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

<template>
  <div class="dashboard-container">
    <Skeleton v-if="loading" active class="p-20px"></Skeleton>
    <div class="content-area" v-if="!loading">
      <!-- 顶部信息卡片 -->
      <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.zxNum }} </div>
              <div class="item-cont"> 中断：{{ value.zdNum }} </div>
              <div class="item-cont"> 未接入：{{ value.wjNum }} </div>
              <div class="item-cont"> 接入密闭数：{{ value.goafNum }} </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 cursor-pointer" @click="handleRouterPush('/warningAnalysis/overlimit-alarm')">超限异常报警</div>
            <div class="count">{{ get(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 cursor-pointer" @click="handleRouterPush('/sealed')">预测预警</div>
            <div class="count">{{ get(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 cursor-pointer" @click="handleRouterPush('/warningAnalysis/report-analysis')">数据中断</div>
            <div class="count">{{ get(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 cursor-pointer" @click="handleRouterPush('/basicinfo/data-quality')">数据质量</div>
            <div class="count">{{ get(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.getDepartId })">展开详情</button>
          </div>
        </div>
        <div class="details-content">
          <div v-for="(item, index) in mineData" :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" :style="{ gridColumn: `span ${col.span}` }">
                  <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>
                      <span class="text-content"> {{ getColDisplayText(col, item) }} </span>
                    </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>
            <div class="flex w-full h-full items-center">
              <div class="flex-basis-300px flex-shrink-0">
                <Pie :option="pieOption" :chart-data="alarmType" height="390px"></Pie>
              </div>
              <div class="flex justify-around items-center flex-wrap h-300px">
                <div v-for="item in alarmType" :key="item.key" class="pie-legends">
                  <div class="pie-legends-title">{{ item.name }}</div>
                  <div class="pie-legends-value">{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧柱状图区域 -->
          <div class="chart-item bar-chart">
            <div class="chart-title">重点矿井报警次数统计</div>
            <Bar :chart-data="historyAlarmNum" :option="barOption" height="390px"></Bar>
          </div>
        </div>
      </div>
    </div>

    <!-- 实时数据表格 -->
    <BasicModal v-model:open="isDetailModalVisible" title="实时数据详情" width="70%" centered :footer="null" @cancel="handleModalClose">
      <BasicTable @register="registerRealtimeTable">
        <template #action="{ record }">
          <div class="action-buttons">
            <button @click="openModal(record)" class="action-btn" title="详情">
              <SvgIcon name="details" />
            </button>
          </div>
        </template>
      </BasicTable>
    </BasicModal>

    <!-- 密闭监测详情弹框 -->
    <HistoricalDetailsModal :modal-details-data="modalDetailsData" @register="registerDetailModal" @close="resume" />
  </div>
</template>
<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import { ref, watch } 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';
  import { Skeleton } from 'ant-design-vue';
  import { EChartsOption, graphic } from 'echarts';
  import IMG1 from '/@/assets/images/overHaul/rootPage/pie-chart-center.png';
  import IMG2 from '/@/assets/images/overHaul/rootPage/alarm-icon-9.svg';
  import { get } from 'lodash-es';
  import HistoricalDetailsModal from '../../../monitor/sealedMonitor/components/HistoricalDetailsModal.vue';
  import { modalDetailsData } from '../../../monitor/sealedMonitor/monitor.data';
  import { useModal } from '/@/components/Modal';
  import { SvgIcon } from '/@/components/Icon';
  import { useIntervalFn } from '@vueuse/core';
  import { advancedRoutePush } from '/@/utils';

  // 处理矿名选择器相关的逻辑
  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.getDepartId;
    }
    return getGoafData(params);
  };
  // 注册实时数据表格
  const { tableContext: ctxRealtime } = 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 = ''; // 可选：清空状态
  };

  // 详情弹窗（复用 HistoricalDetailsModal）
  const [registerDetailModal, { openModal: openDetailModal }] = useModal();
  const { resume } = useIntervalFn(() => {}, 60000, { immediate: false });

  const openModal = (record: any) => {
    openDetailModal(true, record);
  };

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

  const dataColumns = [
    { label: '瓦斯等级', key: 'gasLevelName', type: 'alarm', showPoint: true, span: 1 },
    { label: '煤层自燃倾向性', key: 'fire', type: 'text', span: 1 },
    { label: '联网', key: 'status', colorKey: 'status', type: 'status', showPoint: true, span: 1 },
    { label: '永久密闭数量', key: 'goafDataCount', type: 'custom', span: 1 },
    { label: '报警数量', key: 'alarmGoafNum', type: 'custom', span: 1 },
    // { label: '报警原因', key: 'alarmReasons', type: 'custom', span: 1 },
    { label: '开始预警时间', key: 'earliestTime', type: 'text', span: 1 },
    { label: '最新监测时间', key: 'latestReadTime', type: 'text', span: 1 },
  ];
  // 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: '密闭启封'},
  // ];
  /**
   * 单一刷新方法：并行获取所有接口数据，统一处理空数组/undefined 兜底
   */
  const realtimeWarning = ref<any>({});
  const alarmType = ref<any[]>([]);
  const historyAlarmNum = ref<any[]>([]);
  const mineData = ref<any>([]);

  async function fetchAllData() {
    const deptId = mineStore.getDepartId;
    if (!deptId) return;

    const [accessResult, realtimeResult, alarmTypeResult, historyResult, mineResult] = await Promise.all([
      getGoafAccessCount({ deptId }),
      getRealAlarmNum({ deptId }),
      getAlarmType({
        deptId,
        startTime: dayjs().add(-6, 'months').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      }),
      getHistoryAlarmNum({
        deptId,
        startTime: dayjs().add(-6, 'months').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      }),
      getMineData({ deptId }),
    ]);

    // —— 兜底处理：接口返回空数组/undefined 时使用安全的默认值 ——
    accessStatics.value = Array.isArray(accessResult) ? accessResult : [];
    realtimeWarning.value = realtimeResult ?? {};

    const alarmTypeList = Array.isArray(alarmTypeResult) ? alarmTypeResult : [];
    alarmType.value = alarmTypeList.map((e) => ({
      key: e.alarm_type,
      name: e.name,
      value: e.num,
    }));

    const historyList = Array.isArray(historyResult) ? historyResult : [];
    historyAlarmNum.value = historyList.map((e) => ({
      name: e.mine_name,
      value: e.num,
    }));

    const mineRecords = Array.isArray(mineResult?.records) ? mineResult.records : [];
    mineData.value = mineRecords;
  }

  /**
   * 风险等级映射配置
   */
  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;
    }

    // 处理永久密闭数量：取 goafDataList 的长度
    if (col.key === 'goafDataCount') {
      return item.goafDataList && Array.isArray(item.goafDataList) ? item.goafDataList.length : 0;
    }

    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;
  };

  // 跳转至密闭监测页面（不带 level 过滤，展示所有预警）
  function handleRouterPush(path) {
    return advancedRoutePush({
      path,
      query: { deptId: mineStore.getDepartId },
    });
  }

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

  const pieOption: EChartsOption = {
    series: [
      {
        type: 'pie',
        // 关键: radius 数组，第一个值是内径（留白），第二个是外径（扇区范围）
        radius: ['54%', '70%'],
        color: ['#0070ff', '#0bc9d6', '#00c31a', '#ffa200', '#d2c629', '#8a53c1'],
        colorBy: 'data',
        // 其他饼图样式配置（可选）
        label: { show: false },
        // padAngle: 4,
        itemStyle: { borderColor: '#fff', borderWidth: 2 },
        minAngle: 5,
      },
    ],
    // 关键: graphic 配置，用于在中心添加图片
    graphic: {
      elements: [
        {
          type: 'image', // 类型为图片
          // left: 'center' 和 top: 'center' 使图片居中于图表容器
          left: 'center',
          top: 'center',
          style: {
            // 图片路径或 base64
            image: IMG1,
            width: 260, // 图片宽度，单位px
            height: 260, // 图片高度，单位px
          },
          // 可选：设置 z 层级确保不被扇区遮盖
          // z: 100,
        },
        {
          type: 'image', // 类型为图片
          // left: 'center' 和 top: 'center' 使图片居中于图表容器
          left: 'center',
          top: 'center',
          style: {
            // 图片路径或 base64
            image: IMG2,
            width: 80, // 图片宽度，单位px
            height: 80, // 图片高度，单位px
          },
        },
      ],
    },
  };

  const barConfig = {
    halfWidth: 12,
    offsetY: 6,
  };
  // ========== 左侧面 ==========
  const CubeLeft = graphic.extendShape({
    shape: { x: 0, y: 0 },
    buildPath: function (ctx, shape) {
      const { halfWidth, offsetY } = barConfig;
      const xAxisPoint = shape.xAxisPoint;

      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - halfWidth, shape.y - offsetY];
      const c2 = [xAxisPoint[0] - halfWidth, xAxisPoint[1]];
      const c3 = [xAxisPoint[0], xAxisPoint[1] + offsetY];
      ctx.moveTo(c0[0], c0[1])!.lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
    },
  });

  const CubeRight = graphic.extendShape({
    shape: { x: 0, y: 0 },
    buildPath: function (ctx, shape) {
      const { halfWidth, offsetY } = barConfig;
      const xAxisPoint = shape.xAxisPoint;

      const c0 = [shape.x, shape.y];
      const c1 = [xAxisPoint[0], xAxisPoint[1] + offsetY];
      const c2 = [xAxisPoint[0] + halfWidth, xAxisPoint[1]];
      const c3 = [shape.x + halfWidth, shape.y - offsetY];
      ctx.moveTo(c0[0], c0[1])!.lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
    },
  });

  // ========== 顶面 ==========
  const CubeTop = graphic.extendShape({
    shape: { x: 0, y: 0 },
    buildPath: function (ctx, shape) {
      const { halfWidth, offsetY } = barConfig;

      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - halfWidth, shape.y - offsetY];
      const c2 = [shape.x, shape.y - 2 * offsetY];
      const c3 = [shape.x + halfWidth, shape.y - offsetY];
      ctx.moveTo(c0[0], c0[1])!.lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
    },
  });

  // 注册形状
  graphic.registerShape('CubeLeft', CubeLeft);
  graphic.registerShape('CubeRight', CubeRight);
  graphic.registerShape('CubeTop', CubeTop);

  const barOption: EChartsOption = {
    grid: {
      left: '10%',
      right: '10%',
      bottom: '10%',
      top: '10%',
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        overflow: 'break',
        width: 100,
      },
    },
    yAxis: {
      type: 'value',
      name: '报警数量',
    },
    // @ts-ignore-next-line
    series: [
      {
        type: 'custom',
        renderItem: function (params, api) {
          // 获取当前柱子的数值和位置
          const value = api.value(1);
          const point = api.coord([api.value(0), value]);
          const basePoint = api.coord([api.value(0), 0]);

          // 统一柱子颜色（渐变）
          return {
            type: 'group',
            children: [
              {
                type: 'CubeLeft',
                shape: { x: point[0], y: point[1], xAxisPoint: basePoint },
                style: {
                  fill: new graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#004dbb' },
                    { offset: 1, color: '#157cfe' },
                  ]),
                },
              },
              {
                type: 'CubeRight',
                shape: { x: point[0], y: point[1], xAxisPoint: basePoint },
                style: {
                  fill: new graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: '#004dbb' },
                    { offset: 1, color: '#157cfe' },
                  ]),
                },
              },
              {
                type: 'CubeTop',
                shape: { x: point[0], y: point[1] },
                style: {
                  fill: new graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#004dbb' },
                    { offset: 1, color: '#157cfe' },
                  ]),
                },
              },
            ],
          };
        },
      },
    ],
  };

  watch(
    () => mineStore.getDepartId,
    async (newId) => {
      if (!newId) return;
      loading.value = true;
      await fetchAllData();
      loading.value = false;
    },
    {
      immediate: 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: auto;
    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 {
    max-height: 450px;
    overflow-y: auto;
    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(4, 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;
      display: flex;
      align-items: center;
      width: 100%;
      overflow: visible;

      .status-dot {
        width: 8px;
        height: 8px;
        margin-right: 5px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
      }
      .text-content {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }
    }

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

    .col-second-row:nth-child(7) {
      grid-column: span 1;
    }

    .col-second-row:nth-child(8) {
      grid-column: span 1;
    }
  }

  .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;
      height: 440px;
      background-color: #ecf4fd;
      /* align-items: center; */
      /* display: flex; */
      /* flex-direction: column; */
    }

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

    .pie-legends {
      height: 80px;
      width: 200px;
      padding: 20px 0 20px 10px;
      background-repeat: no-repeat;
      background-image: url('/@/assets/images/overHaul/rootPage/border-top.png');
      background-position: top center;

      &-title {
        font-size: 16px;
        color: #333;
        padding: 0 10px;
      }
      &-value {
        font-size: 16px;
        color: #333;
        padding: 0 10px;
        font-weight: bold;
      }

      &:nth-child(1) {
        .pie-legends-title {
          border-left: 3px solid #0070ff;
        }
        .pie-legends-value {
          color: #0070ff;
          border-left: 3px solid #0070ff55;
        }
      }
      &:nth-child(2) {
        .pie-legends-title {
          border-left: 3px solid #0bc9d6;
        }
        .pie-legends-value {
          color: #0bc9d6;
          border-left: 3px solid #0bc9d655;
        }
      }
      &:nth-child(3) {
        .pie-legends-title {
          border-left: 3px solid #00c31a;
        }
        .pie-legends-value {
          color: #00c31a;
          border-left: 3px solid #00c31a55;
        }
      }
      &:nth-child(4) {
        .pie-legends-title {
          border-left: 3px solid #ffa200;
        }
        .pie-legends-value {
          color: #ffa200;
          border-left: 3px solid #ffa20055;
        }
      }
      &:nth-child(5) {
        .pie-legends-title {
          border-left: 3px solid #d2c629;
        }
        .pie-legends-value {
          color: #d2c629;
          border-left: 3px solid #d2c62955;
        }
      }
      &:nth-child(6) {
        .pie-legends-title {
          border-left: 3px solid #8a53c1;
        }
        .pie-legends-value {
          color: #8a53c1;
          border-left: 3px solid #8a53c155;
        }
      }
    }
  }
</style>