goaf-monitoring-system/src/views/dashboard/Overhaul/components/RootPage.vue

<template>
  <div class="dashboard-container">
    <div class="content-area" v-if="isDataLoaded">
      <!-- 顶部信息卡片 -->
      <div class="top-info">
        <!-- {{ mineStore.getRoot }} -->
        <div class="info-card">
            <div class="card-title">
              <div class="info-details">
                <div class="label">{{ mineStore.getRoot?.departName }}</div>
                <!-- <div class="tag" :style="{ backgroundColor: getAlarmColor(mineStore.alarmLevel), color: '#fff' }">{{ getRiskText(mineStore.alarmLevel) }}</div> -->
              </div>
              <div>
                <a-button class="btn" @click="handleGoToPageQuery('/basicinfo/access-statistics')">接入详情</a-button>
              </div>
              <div class="info-border">
                <div class="info-border-icon"></div>
                <div class="info-border-line"></div>
                <div class="info-border-icon"></div>
              </div>
            </div>

            <div class="card-details">
              <div v-for="value in accessStatics" :key="value.id" class="card-item">
                <div class="item-cont">
                  组织机构：{{ value.name }}
                </div>
                <div class="item-cont">
                  应接入：{{ value.yjNum }} 
                </div>
                <div class="item-cont">
                  在线：{{ value.yjNum }}
                </div>
                <div class="item-cont">
                  中断：{{ value.yjNum }}
                </div>
                <div class="item-cont">
                  未接入：{{ value.yjNum }}
                </div>
                <div class="item-cont">
                  接入密闭数：{{ value.yjNum }}
                </div> 
                <div class="bg-line">
                </div>
                <div class="bg-icon"></div>
              </div>
            </div>
          </div>
      </div>

      <!-- 预警统计 -->
      <div class="warning-statistics">
        <div class="statistics-header">
          <div class="title">实时预警统计</div>
          <div class="btn-group">
            <!-- <button class="btn">预警级别</button> -->
          </div>
        </div>
        <div class="statistics-content">
          <div class="stat-item high-risk">
            <div class="icon">
              <div class="icon-top"></div>
              <div class="icon-bottom"></div>
            </div>
            <div class="text">超限异常报警</div>
            <div class="count">{{ realtimeWarning.overLimitCount }}</div>
          </div>
          <div class="stat-item medium-risk">
            <div class="icon">
              <div class="icon-top"></div>
              <div class="icon-bottom"></div>
            </div>
            <div class="text">预测预警</div>
            <div class="count">{{ realtimeWarning.alarmInfoCount }}</div>
          </div>
          <div class="stat-item normal-risk">
            <div class="icon">
              <div class="icon-top"></div>
              <div class="icon-bottom"></div>
            </div>
            <div class="text">数据中断</div>
            <div class="count">{{ realtimeWarning.dataBreakCount }}</div>
          </div>
          <div class="stat-item low-risk">
            <div class="icon">
              <div class="icon-top"></div>
              <div class="icon-bottom"></div>
            </div>
            <div class="text">数据质量</div>
            <div class="count">{{ realtimeWarning.dataQualityCount }}</div>
          </div>
        </div>
      </div>

      <!-- 预警数据详情 -->
      <div class="warning-details">
        <div class="details-header">
          <div class="title">预警数据详情</div>
          <div class="btn-group">
            <button class="btn"  @click="handleShowDetail({deptId:mineStore.getRootId})">展开详情</button>
          </div>
        </div>
        <div class="details-content">
          <div 
            v-for="(item, index) in mineData?.records" 
            :key="index" 
            class="warning-item"
          >
            <div class="item-header">
              <div class="header-left">
                <div class="icon"></div>
                <div class="name">煤矿名称: {{ item.mineName }}</div>
                <div 
                  class="risk-level" 
                  :style="{ backgroundColor: getAlarmColor(item.alarmLevel), color: '#fff' }"
                >
                  {{ getRiskText(item.alarmLevel) }}
                </div>
              </div>
              <a-button 
                class="expand-btn"
                @click="handleShowDetail(item)"
              >
                详情
                <div class="arrow-icon-wrapper">
                  <div class="arrow-icon" ></div>
                </div>
              </a-button>
            </div>
            <div class="item-body">
              <div class="data-row">
                <div 
                  v-for="(col, colIndex) in dataColumns" 
                  :key="colIndex" 
                  class="data-col"
                  :class="{
                    'col-first-row': colIndex < 5, 
                    'col-second-row': colIndex >= 5,
                    'col-span-3': colIndex === 5 
                  }"
                >
                <div class="col-icon">
                  <div class="icon-item" :class="`alarm-icon-${(colIndex % 8) + 1}`"></div>
                </div>
                <div class="col-cont">
                  <div class="col-title">{{ col.label }}</div>
                  <div 
                    class="col-value" 
                    :style="{ color: getColValueColor(col, item) }"
                  >
                    <span 
                      v-if="col.showPoint" 
                      class="status-dot" 
                      :style="{ 
                        backgroundColor: getColValueColor(col, item), 
                        boxShadow: `0 0 10px ${getColValueColor(col, item)}`
                      }"
                    ></span>
                    {{ getColDisplayText(col, item) }}
                  </div>
                </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 近半年报警统计 -->
      <div class="half-year-statistics">
        <div class="statistics-header">
          <div class="title">近半年预测预报统计</div>
          <div class="btn-group">
            <button class="btn" @click="toggleChartVisibility">
              {{ isChartVisible ? '收起图表' : '展开图表' }}
            </button>
          </div>
        </div>
        <div class="statistics-content" v-show="isChartVisible">
          <!-- 左侧饼图区域 -->
          <div class="chart-item pie-chart">
            <div class="chart-title">预测预报类型统计</div>
            <Pie :chart-data="alarmType"></Pie>
          </div>
          <!-- 右侧柱状图区域 -->
          <div class="chart-item bar-chart">
            <div class="chart-title">重点矿井报警次数统计</div>
            <Bar :chart-data="historyAlarmNum"></Bar>
          </div>
        </div>
      </div>
    </div>

    <!-- 实时数据表格 -->
    <BasicModal
      v-model:open="isDetailModalVisible"
      title="实时数据详情"
      width="70%"
      centered
      :footer="null"
      @cancel="handleModalClose"
    >
      <BasicTable @register="registerRealtimeTable" />

    </BasicModal>

  </div>
</template>
<script setup lang="ts">
  import { useRouter, useRoute } from 'vue-router';
  import { onMounted, ref } from 'vue';
  import { getAlarmType, getGoafAccessCount, getHistoryAlarmNum, getMineData, getRealAlarmNum, getGoafData } from '../overhaul.api';
  import { columns } from '../overhaul.data';
  import { useMineDepartmentStore } from '/@/store/modules/mine';
  import { useListPage } from '/@/hooks/system/useListPage';
  import dayjs from 'dayjs';
  import Pie from '/@/components/chart/Pie.vue';
  import Bar from '/@/components/chart/Bar.vue';
  import { StatusColorEnum } from '/@/enums/jeecgEnum';
  import { BasicTable } from '/@/components/Table';
  import { BasicModal } from '/@/components/Modal';
    // 处理矿名选择器相关的逻辑
  const isDetailModalVisible = ref(false);
  const currentDeptId = ref<string | number>('');

  const getDynamicTableData = (params: any) => {
    // 如果 currentDeptId 存在，则覆盖 params 中的 deptId
    if (currentDeptId.value) {
      params.deptId = currentDeptId.value;
    } else {
      // 默认使用 rootId，防止初始加载时无数据
      params.deptId = mineStore.getRootId;
    }
    return getGoafData(params);
  };
   // 注册实时数据表格
  const { tableContext: ctxRealtime, onExportXls: onExportXlsTime } = useListPage({
    tableProps: {
      api: getDynamicTableData,
      columns,
      showIndexColumn: false,
      scroll: { x: 'max-content', y: 500 }, 
      useSearchForm: false,       // 隐藏搜索表单
      showActionButtonGroup: false, 
    },

    pagination: false,
    exportConfig: {
      url: '/ventanaly-province/province/device/exportGoafReal',
      name: '老空区永久密闭监测数据',
      // params: {
      //   goafId,
      // },
    },
  });
  const [registerRealtimeTable, realtimeTable] = ctxRealtime;

  const handleShowDetail = (item: any) => {
    // 设置当前选中的 deptId
    currentDeptId.value = item.deptId;
    // 显示弹框
    isDetailModalVisible.value = true;
    
    // 关键：手动触发表格刷新，因为 api 依赖的 ref 变化可能不会自动触发 BasicTable 的内部重载
    // 使用 nextTick 确保 DOM 更新后再重载，或者直接在 modal 的 open 事件中处理
    setTimeout(() => {
      realtimeTable?.reload();
    }, 100);
  };

  const handleModalClose = () => {
    isDetailModalVisible.value = false;
    currentDeptId.value = ''; // 可选：清空状态
  };

  // 路由实例
  const router = useRouter();
  const mineStore = useMineDepartmentStore();
  // 数据加载状态
  const isDataLoaded = ref(false);
  const accessStatics = ref<any[]>([]);
  // 控制图表显示/隐藏的状态
  const isChartVisible = ref(true);

  const dataColumns = [
    { label: '瓦斯等级', key: 'gasLevelName', type: 'alarm', showPoint: true },
    { label: '煤层自燃倾向性', key: 'coalSeamLevel', type: 'text'  },
    { label: '联网', key: 'status', colorKey: 'status', type: 'status',showPoint: true },
    { label: '永久密闭数量', key: 'goafNum', type: 'text'  },
    { label: '报警数量', key: 'alarmCount', type: 'custom'  },
    { label: '报警原因', key: 'alarmReasons', type: 'custom'  },
    { label: '开始时间', key: 'earliestTime', type: 'text' },
    { label: '最新监测时间', key: 'latestReadTime',type: 'text' },
  ];
  const alartTypeColumns = [
    'fireAlarm',
    'fireAlarmOut',
    'explosionAlarm',
    'sourcePressureAlarm',
    'leakageAlarm',
    'unsealAlarm',
    // {key: 'fireAlarm', label: '闭内自燃发火'},
    // {key: 'fireAlarmOut', label: '闭外自燃发火'},
    // {key: 'explosionAlarm', label: '爆炸预警'},
    // {key: 'sourcePressureAlarm', label: '压差隐患'},
    // {key: 'leakageAlarm', label: '漏风'},
    // {key: 'unsealAlarm', label: '密闭启封'},
  ];
  async function fetchAccessStatics() {
    accessStatics.value = await getGoafAccessCount({ deptId: mineStore.getRootId });
  }

  const realtimeWarning = ref<any>({});
  async function fetchRealtimeWarning() {
    realtimeWarning.value = await getRealAlarmNum({ deptId: mineStore.getRootId });
  }

  const alarmType = ref<any[]>([]);
  async function fetchAlarmType() {
    const result = await getAlarmType({
      deptId: mineStore.getRootId,
      startTime: dayjs().add(-6, 'months').format('YYYY-MM-DD HH:mm:ss'),
      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    });
    alarmType.value = result.map((e) => ({
      name: e.name,
      value: e.num,
    }));
  }

  const historyAlarmNum = ref<any[]>([]);
  async function fetchHistoryAlarmNum() {
    const result = await getHistoryAlarmNum({
      deptId: mineStore.getRootId,
      startTime: dayjs().add(-6, 'months').format('YYYY-MM-DD HH:mm:ss'),
      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    });
    historyAlarmNum.value = result.map((e) => ({
      name: e.mine_name,
      value: e.num,
    }));
  }

  const mineData = ref<any>();
  async function fetchMineData() {
    mineData.value = await getMineData({
      deptId: mineStore.getRootId,
    });
  }

    /**
   * 风险等级映射配置
   */
  const RISK_LEVEL_MAP: Record<string, { text: string; color: string }> = {
    '4': { text: '高风险', color: StatusColorEnum.red },
    '3': { text: '较高风险', color: StatusColorEnum.gold },
    '2': { text: '一般风险', color: StatusColorEnum.yellow },
    '1': { text: '低风险', color: StatusColorEnum.blue },
    '0': { text: '无风险', color: '#333' }, // 假设 0 为无风险或默认
  };
    /**
   * 获取报警颜色
   * @param level 报警级别 '1', '2', '3', '4'
   */
  const getAlarmColor = (level?: string | number) => {
    if (!level && level !== 0) return '#333'; // 默认颜色
    return RISK_LEVEL_MAP[String(level)]?.color;
  };
     /**
   * 获取风险等级对应的文本
   * @param level 报警级别 '1', '2', '3', '4'
   */
  const getRiskText = (level?: string | number) => {
    if (!level && level !== 0) return '-';
    return RISK_LEVEL_MAP[String(level)]?.text || '未知';
  };

   /**
   * 通用页面跳转方法
   * @param record 当前行数据
   * @param path 目标路径
   */
  function handleGoToPageQuery(path: string) {

    router.push({
      path,
    }).catch(err => {
      console.error('跳转失败:', err);
    });
  }

    /**
   * 获取列显示的颜色
   */
  const getColValueColor = (col: any, item: any) => {

    if (col.key === 'gasLevelName') {
      const val = getDataValue(item, col.key);
      if (!val || val === '-') return '#000';
      
      const strVal = String(val);
      if (strVal.includes('突出')) {
        return StatusColorEnum.red; // 红色
      } else if (strVal.includes('高瓦斯')) {
        return StatusColorEnum.gold; // 橙色/金色
      } else if (strVal.includes('低瓦斯')) {
        return StatusColorEnum.blue; // 蓝色
      }
      return '#000';
    }
    // 如果是报警类型，使用原有的报警颜色逻辑
    if (col.type === 'alarm' && col.colorKey) {
      return getAlarmColor(getDataValue(item, col.colorKey));
    }
    
    // 如果是设备状态类型，使用状态颜色逻辑
    if (col.type === 'status') {
      return getlinkStatusInfo(getDataValue(item, col.key)).color;
    }
    
    // 默认黑色
    return '#000';
  };

    /**
   * 根据点分字符串路径获取对象值 (例如: 'fireAlarm.alarmName')
   * @param item 数据对象
   * @param path 路径字符串
   * @param defaultValue 默认值
   */
  const getDataValue = (item: any, path: string, defaultValue: string = '-') => {
    if (!item || !path) return defaultValue;
    const val = path.split('.').reduce((acc, part) => acc && acc[part], item);
    return val ?? defaultValue;
  };

  /**
   * 获取设备状态信息 (文本和颜色)
   * @param status 0: 断开, 1: 正常
   */
  const getlinkStatusInfo = (status?: number | string) => {
    if (status === 1 || status === '1') {
      return { text: '正常', color: '#52c41a' }; // 绿色
    }
    return { text: '断开', color: '#ff4d4f' }; // 红色
  };

  /**
   * 获取列显示的文本
   */
  const getColDisplayText = (col: any, item: any) => {
    const rawValue = getDataValue(item, col.key);
    
    if (col.type === 'status') {
      return getlinkStatusInfo(rawValue).text;
    }
    if (col.key === 'alarmCount') {
      // 取 alarmRecordList 的长度
      return item.alarmRecordList ? item.alarmRecordList.length : 0;
    }

    if (col.key === 'alarmReasons') {
      // 遍历 alarmRecordList 拼接 alarmName
      if (!item.alarmRecordList || !Array.isArray(item.alarmRecordList)) {
        return '-';
      }
      const names = item.alarmRecordList.map((record: any) => record.alarmName).filter(Boolean);
      return names.length > 0 ? names.join('、') : '-';
    }

    if (col.key === 'latestReadTime') {
      // 安全获取 goafDataList 第一个元素的 readTime
      if (item.goafDataList && Array.isArray(item.goafDataList) && item.goafDataList.length > 0) {
        return item.goafDataList[0].readTime || '-';
      }
      return '-';
    }


    // 默认直接返回原始值或经过 getDataValue 处理后的值
    return rawValue;
  };

  // 切换图表显示状态
  const toggleChartVisibility = () => {
    isChartVisible.value = !isChartVisible.value;
  };


  onMounted(async() => {
    console.log(mineStore.getRoot)
    await Promise.all([
      fetchAccessStatics(),
      fetchRealtimeWarning(),
      fetchAlarmType(),
      fetchHistoryAlarmNum(),
      fetchMineData(),
    ]);
    isDataLoaded.value = true;
  });
</script>
<style lang="less" scoped>
  .dashboard-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: scroll;
  }

  .content-area {
    flex: 1;
    padding: 20px;
    background-color: #f0f8ff;
  }

  // 顶部信息总览样式
  .top-info {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    flex-shrink: 0;
  }

  .info-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-image: url('/@/assets/images/overHaul/leafPage/info-card-bg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 8px;
    padding: 20px;
  }

  .card-title {
    width: 20%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 10px 8px 50px;

    .btn {
      color: #fff;
      background-color: #2b6ff0;

      &:hover {
        background-color: #397af3;
      }
    }
  }
  .info-border {
    position: absolute;
    top: 20px;
    left: 20px;
    .info-border-icon {
      width: 16px;
      height: 16px;
      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
      background-repeat: no-repeat;
      background-size: 100%;

    }
    .info-border-line {
      width: 1px;
      height: 95px;
      border-left: 2px dotted #397af3;
      margin-left: 7px;
    }
  }
  .info-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 0;
    
    .label {
      font-size: 16px;
      color: #000;
    }

    .value {
      font-size: 16px;
      color: #000;
    }

    .tag {
      width: fit-content;
      height: 24px;
      padding: 2px 8px;
      border-radius: 15px;
      font-size: 12px;
      background-color: #ff6b6b;
      color: white;
    }
  }

  .card-details {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    gap: 15px;
  }
  .card-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    background-color: #f1f7ff;
    height: 40px;
    align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0 0 0 20px;
    overflow: hidden;

    .item-cont {
      color: #000;
      font-weight: 500;
      background-color: #f1f7ff;
      z-index: 1;
      padding: 0 10px;
    }
    .bg-line {
      position: absolute;
      width: 100%;
      height: 1px;
      border-top: 2px dotted #397af3;

    }

    .bg-icon {
      width: 15px;
      height: 15px;
      position: absolute;
      left: 10px;
      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
      background-repeat: no-repeat;
      background-size: 100%;
      z-index: 1;
    }

  }

/* // 预警统计样式 */
.warning-statistics {
  background-color: #ffffff;
  margin-bottom: 20px;
  padding: 10px 12px;
  border-radius: 4px;

  .statistics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .btn-group {
    display: flex;
    gap: 8px;
  }

  .btn {
    color: #2b6ff0;
    padding: 6px 12px;
    border: 1px solid #2b6ff0;
    border-radius: 4px;
    background-color: #E9F0FE;
    cursor: pointer;
    font-size: 12px;
  }

  .btn:hover {
    background-color: #f5f5f5;
  }

  .statistics-content {
    display: flex;
    gap: 50px;
  }

  .stat-item {
    flex: 1;
    padding: 16px 50px 10px 90px;
    text-align: left;
    position: relative;
    overflow: hidden;
    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
    background-repeat: no-repeat;
    background-size: 100%;

    .icon {
      position: absolute;
      top: 15px;
      left: 20px;
    }
    .text {
      font-size: 16px;
      color: #000;
      font-weight: bold;
      .text-sub {
        font-size: 12px;
        color: #989587;
      }
    }
    .count {
      font-size: 24px;
      font-weight: bold;
    }

    .icon-top{
      width: 40px;
      height: 40px;
      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
      background-repeat: no-repeat;
      background-size: 100%;;
    }
    .icon-bottom{
      width: 40px;
      height: 20px;
      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
      background-repeat: no-repeat;
      background-size: 100%;
      margin-top: -5px;
    }
  }

  .stat-item.high-risk {
    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
    .icon-top {
      background-image: url('/@/assets/images/overHaul/rootPage/over-limit-icon.svg');
    }
    .icon-bottom {
      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
    }
    .count {
      color: #FF0000;
    }
  }

  .stat-item.medium-risk {
    background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-bg.png');
    .icon-top {
      background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon1.svg');
    }
    .icon-bottom {
      background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon2.png');
    }
    .count {
      color: #FF7700;
    }
  }

  .stat-item.normal-risk {
    background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-bg.png');
    .icon-top {
      background-image: url('/@/assets/images/overHaul/rootPage/data-break-icon.svg');
    }
    .icon-bottom {
      background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon2.png');
    }
    .count {
      color: #D5C702;
    }
  }

  .stat-item.low-risk {
    background-image: url('/@/assets/images/overHaul/leafPage/low-risk-bg.png');
    .icon-top {
      background-image: url('/@/assets/images/overHaul/rootPage/data-quality-icon.svg');
    }
    .icon-bottom {
      background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon2.png');
    }
    .count {
      color: #0070FF;
    }
  }

}

/* //  预警详情样式 */
.warning-details {
  background-color: #ffffff;
  margin-bottom: 20px;
  padding: 10px 12px;
  border-radius: 4px;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .btn-group {
    display: flex;
    gap: 8px;
  }
}
.details-content {
  height: 450px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}


.warning-item {
  margin-bottom: 20px;
  background-color: rgba(218, 234, 251, 0.5);
  border-radius: 8px;
  padding: 16px;
  scroll-snap-align: start;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(43, 111, 240, 0.2); 

  .icon {
    width: 16px;
    height: 16px;
    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0 15px 0px 5px;
  }

  .risk-level {
    width: fit-content;
    height: 24px;
    padding: 2px 8px;
    border-radius: 15px;
    font-size: 12px;
    background-color: #ff6b6b;
    color: white;
  }

  
  .header-left {
    display: flex;
    align-items: center;
  }

  .expand-btn {
    color: #2b6ff0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #2b6ff0;
    border-radius: 4px;
    background-color: #E9F0FE;
    cursor: pointer;
    font-size: 12px;
  }

  .expand-btn:hover {
    color: #1a5cc8;
  }

  .arrow-icon-wrapper {
    width: 16px;
    height: 16px;
    position: relative;
    display: inline-block;
  }

  .arrow-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('/@/assets/images/overHaul/rootPage/icon-details.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: transform 0.3s ease;
  }

  .arrow-icon.rotate {
    transform: translate(-50%, -50%) rotate(180deg);
  }


}

.btn-group {
  display: flex;
  gap: 8px;
}

.btn {
  color: #2b6ff0;
  padding: 6px 12px;
  border: 1px solid #2b6ff0;
  border-radius: 4px;
  background-color: #E9F0FE;
  cursor: pointer;
  font-size: 12px;
}

.data-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}

.data-col {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center ;
  padding: 0 16px 0 30px;
  border-radius: 4px;
  font-size: 12px;

  .col-icon {
    width: 50px;
    height: 50px;
    background-image: url('/@/assets/images/overHaul/rootPage/alarm-icon-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    align-items: center;
    display: flex;
    justify-content: center;

    .icon-item {
      width: 25px;
      height: 25px;
      background-image: url('/@/assets/images/overHaul/rootPage/alarm-icon-1.svg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      z-index: 1;
    }
    .alarm-icon-1 {
      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-1.svg');
    }
    .alarm-icon-2 {
      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-2.svg');
    }
    .alarm-icon-3 {
      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-3.svg');
    }
    .alarm-icon-4 {
      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-4.svg');
    }
    .alarm-icon-5 {
      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-5.svg');
    }
    .alarm-icon-6 {
      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-6.svg');
    }
    .alarm-icon-7 {
      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-7.svg');
    }
    .alarm-icon-8 {
      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-8.svg');
    }
  }
  .col-cont {
    width: calc(100% - 50px);
    height: 50px;
    background-image: url('/@/assets/images/overHaul/rootPage/alarm-content-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 20px;
  }

  .col-title {
    color: #000;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .col-value {
    color: #000;
    font-size: 14px;

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }
  }

  .col-first-row {
    grid-column: span 1;
  }
  .col-second-row:nth-child(6) {
    grid-column: 1 / span 3; // 占据第 1 到第 3 列
  }

  .col-second-row:nth-child(7) {
    grid-column: span 1; // 占据第 4 列
  }

  .col-second-row:nth-child(8) {
    grid-column: span 1; // 占据第 5 列
  }
}

.half-year-statistics {
  background-color: #ffffff;
  margin-bottom: 20px;
  padding: 10px 12px;
  border-radius: 4px;

  .statistics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .statistics-content {
    display: flex;
    gap: 20px; // 图表之间的间距
  }

  .chart-item {
    flex: 1;
    min-width: 0;
    padding: 10px;
    border-radius: 4px;
    background-color: #ecf4fd;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .chart-title {
    min-width: 400px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
    background-image: url('/@/assets/images/overHaul/rootPage/chart-title-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
  }
}

  
</style>