[Feat 0000] 公司端过渡页图表开发

src/assets/images/overHaul/rootPage/alarm-icon-9.svg

@@ -0,0 +1,11 @@
+<svg id="组_16855" data-name="组 16855" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="73.722" height="73.723" viewBox="0 0 73.722 73.723">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#6ea0ff"/>
+      <stop offset="1" stop-color="#2c70f0"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_56369" data-name="路径 56369" d="M68.712,34.41A31.947,31.947,0,0,0,39.32,5.009V0H34.4V5.013A31.944,31.944,0,0,0,5.009,34.4H0V39.32H5.009A31.944,31.944,0,0,0,34.4,68.709v5.013H39.32V68.712A31.944,31.944,0,0,0,68.709,39.32h5.013V34.4ZM39.32,63.769V58.977H34.4v4.81A27.037,27.037,0,0,1,9.952,39.32h4.792V34.4H9.952A27.041,27.041,0,0,1,34.4,9.952v4.792H39.32V9.952A27.041,27.041,0,0,1,63.769,34.4H58.977V39.32h4.81A27.037,27.037,0,0,1,39.32,63.769Z" fill="url(#linear-gradient)"/>
+  <path id="路径_56370" data-name="路径 56370" d="M283.483,271.976A13.756,13.756,0,1,1,273.755,276a13.756,13.756,0,0,1,9.728-4.029m0-3.841a17.6,17.6,0,1,0,17.594,17.6,17.6,17.6,0,0,0-17.594-17.6Zm0,0" transform="translate(-246.74 -248.831)" fill="url(#linear-gradient)"/>
+  <path id="路径_56371" data-name="路径 56371" d="M469.5,378.521a2.949,2.949,0,1,0,1.474-2.547A2.949,2.949,0,0,0,469.5,378.521Zm0,0,2.941-18.943c-1.592,0-2.883.837-2.883,1.865s.041,12.345,2.883,12.345,2.883-11.316,2.883-12.345S474.038,359.578,472.445,359.578Zm0,0" transform="translate(-435.702 -333.691)" fill="url(#linear-gradient)"/>
+</svg>

src/views/dashboard/Overhaul/components/RootPage.vue

@@ -1,51 +1,39 @@
 <template>
   <div class="dashboard-container">
+    <Spin class="w-full h-full" v-if="!isDataLoaded"></Spin>
     <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 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 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>
 
       <!-- 预警统计 -->
@@ -97,69 +85,55 @@
         <div class="details-header">
           <div class="title">预警数据详情</div>
           <div class="btn-group">
-            <button class="btn"  @click="handleShowDetail({deptId:mineStore.getRootId})">展开详情</button>
+            <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 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' }"
-                >
+                <div class="risk-level" :style="{ backgroundColor: getAlarmColor(item.alarmLevel), color: '#fff' }">
                   {{ getRiskText(item.alarmLevel) }}
                 </div>
               </div>
-              <a-button 
-                class="expand-btn"
-                @click="handleShowDetail(item)"
-              >
+              <a-button class="expand-btn" @click="handleShowDetail(item)">
                 详情
                 <div class="arrow-icon-wrapper">
-                  <div class="arrow-icon" ></div>
+                  <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" 
+                <div
+                  v-for="(col, colIndex) in dataColumns"
+                  :key="colIndex"
                   class="data-col"
                   :class="{
-                    'col-first-row': colIndex < 5, 
+                    'col-first-row': colIndex < 5,
                     'col-second-row': colIndex >= 5,
-                    'col-span-3': 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 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>
@@ -181,34 +155,35 @@
           <!-- 左侧饼图区域 -->
           <div class="chart-item pie-chart">
             <div class="chart-title">预测预报类型统计</div>
-            <Pie :chart-data="alarmType"></Pie>
+            <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"></Bar>
+            <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"
-    >
+    <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 { useRouter } from 'vue-router';
   import { onMounted, ref } from 'vue';
   import { getAlarmType, getGoafAccessCount, getHistoryAlarmNum, getMineData, getRealAlarmNum, getGoafData } from '../overhaul.api';
   import { columns } from '../overhaul.data';
@@ -220,7 +195,12 @@
   import { StatusColorEnum } from '/@/enums/jeecgEnum';
   import { BasicTable } from '/@/components/Table';
   import { BasicModal } from '/@/components/Modal';
-    // 处理矿名选择器相关的逻辑
+  import { Spin } from 'ant-design-vue';
+  import { EChartsOption, graphic } from 'echarts';
+  import { computed } from 'vue';
+  import { get } from 'lodash-es';
+
+  // 处理矿名选择器相关的逻辑
   const isDetailModalVisible = ref(false);
   const currentDeptId = ref<string | number>('');
 
@@ -234,15 +214,15 @@
     }
     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, 
+      scroll: { x: 'max-content', y: 500 },
+      useSearchForm: false, // 隐藏搜索表单
+      // showActionButtonGroup: false,
     },
 
     pagination: false,
@@ -261,7 +241,7 @@
     currentDeptId.value = item.deptId;
     // 显示弹框
     isDetailModalVisible.value = true;
-    
+
     // 关键：手动触发表格刷新，因为 api 依赖的 ref 变化可能不会自动触发 BasicTable 的内部重载
     // 使用 nextTick 确保 DOM 更新后再重载，或者直接在 modal 的 open 事件中处理
     setTimeout(() => {
@@ -285,13 +265,13 @@
 
   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: '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' },
+    { label: '最新监测时间', key: 'latestReadTime', type: 'text' },
   ];
   const alartTypeColumns = [
     'fireAlarm',
@@ -324,6 +304,7 @@
       endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
     });
     alarmType.value = result.map((e) => ({
+      key: e.alarm_type,
       name: e.name,
       value: e.num,
     }));
@@ -349,7 +330,7 @@
     });
   }
 
-    /**
+  /**
    * 风险等级映射配置
    */
   const RISK_LEVEL_MAP: Record<string, { text: string; color: string }> = {
@@ -359,7 +340,7 @@
     '1': { text: '低风险', color: StatusColorEnum.blue },
     '0': { text: '无风险', color: '#333' }, // 假设 0 为无风险或默认
   };
-    /**
+  /**
    * 获取报警颜色
    * @param level 报警级别 '1', '2', '3', '4'
    */
@@ -367,7 +348,7 @@
     if (!level && level !== 0) return '#333'; // 默认颜色
     return RISK_LEVEL_MAP[String(level)]?.color;
   };
-     /**
+  /**
    * 获取风险等级对应的文本
    * @param level 报警级别 '1', '2', '3', '4'
    */
@@ -376,29 +357,29 @@
     return RISK_LEVEL_MAP[String(level)]?.text || '未知';
   };
 
-   /**
+  /**
    * 通用页面跳转方法
    * @param record 当前行数据
    * @param path 目标路径
    */
   function handleGoToPageQuery(path: string) {
-
-    router.push({
-      path,
-    }).catch(err => {
-      console.error('跳转失败:', err);
-    });
+    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; // 红色
@@ -413,17 +394,17 @@
     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 路径字符串
@@ -451,7 +432,7 @@
    */
   const getColDisplayText = (col: any, item: any) => {
     const rawValue = getDataValue(item, col.key);
-    
+
     if (col.type === 'status') {
       return getlinkStatusInfo(rawValue).text;
     }
@@ -477,7 +458,6 @@
       return '-';
     }
 
-
     // 默认直接返回原始值或经过 getDataValue 处理后的值
     return rawValue;
   };
@@ -487,16 +467,176 @@
     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: '/src/assets/images/overHaul/rootPage/pie-chart-center.png',
+            width: 260, // 图片宽度，单位px
+            height: 260, // 图片高度，单位px
+          },
+          // 可选：设置 z 层级确保不被扇区遮盖
+          // z: 100,
+        },
+        {
+          type: 'image', // 类型为图片
+          // left: 'center' 和 top: 'center' 使图片居中于图表容器
+          left: 'center',
+          top: 'center',
+          style: {
+            // 图片路径或 base64
+            image: '/src/assets/images/overHaul/rootPage/alarm-icon-9.svg',
+            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();
+    },
+  });
 
-  onMounted(async() => {
-    console.log(mineStore.getRoot)
-    await Promise.all([
-      fetchAccessStatics(),
-      fetchRealtimeWarning(),
-      fetchAlarmType(),
-      fetchHistoryAlarmNum(),
-      fetchMineData(),
-    ]);
+  // ========== 顶面 ==========
+  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: {
+        // rotate: 30, // 名称过长时旋转
+        interval: 0,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: '报警数量',
+    },
+    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' },
+                  ]),
+                },
+              },
+            ],
+          };
+        },
+      },
+    ],
+  };
+
+  onMounted(async () => {
+    await Promise.all([fetchAccessStatics(), fetchRealtimeWarning(), fetchAlarmType(), fetchHistoryAlarmNum(), fetchMineData()]);
     isDataLoaded.value = true;
   });
 </script>
@@ -561,7 +701,6 @@
       background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
       background-repeat: no-repeat;
       background-size: 100%;
-
     }
     .info-border-line {
       width: 1px;
@@ -575,7 +714,7 @@
     flex-direction: column;
     justify-content: space-between;
     padding: 8px 0;
-    
+
     .label {
       font-size: 16px;
       color: #000;
@@ -629,7 +768,6 @@
       width: 100%;
       height: 1px;
       border-top: 2px dotted #397af3;
-
     }
 
     .bg-icon {
@@ -642,441 +780,510 @@
       background-size: 100%;
       z-index: 1;
     }
-
   }
 
-/* // 预警统计样式 */
-.warning-statistics {
-  background-color: #ffffff;
-  margin-bottom: 20px;
-  padding: 10px 12px;
-  border-radius: 4px;
+  /* // 预警统计样式 */
+  .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;
-  }
+    .statistics-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
 
-  .title {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-  }
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
 
-  .btn-group {
-    display: flex;
-    gap: 8px;
-  }
+    .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 {
+      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;
-  }
+    .btn:hover {
+      background-color: #f5f5f5;
+    }
 
-  .statistics-content {
-    display: flex;
-    gap: 50px;
-  }
+    .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%;
+    .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;
+      .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;
+      }
     }
-    .text {
-      font-size: 16px;
-      color: #000;
-      font-weight: bold;
-      .text-sub {
-        font-size: 12px;
-        color: #989587;
+
+    .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;
       }
     }
-    .count {
-      font-size: 24px;
-      font-weight: bold;
+
+    .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;
+      }
     }
 
-    .icon-top{
-      width: 40px;
-      height: 40px;
-      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
-      background-repeat: no-repeat;
-      background-size: 100%;;
+    .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;
+      }
     }
-    .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.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;
+      }
     }
   }
 
-  .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');
+  /* //  预警详情样式 */
+  .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;
     }
-    .count {
-      color: #FF0000;
+
+    .btn-group {
+      display: flex;
+      gap: 8px;
     }
   }
+  .details-content {
+    height: 450px;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+  }
 
-  .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');
+  .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%;
     }
-    .count {
-      color: #FF7700;
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+      margin: 0 15px 0px 5px;
     }
-  }
 
-  .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');
+    .risk-level {
+      width: fit-content;
+      height: 24px;
+      padding: 2px 8px;
+      border-radius: 15px;
+      font-size: 12px;
+      background-color: #ff6b6b;
+      color: white;
     }
-    .icon-bottom {
-      background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon2.png');
+
+    .header-left {
+      display: flex;
+      align-items: center;
     }
-    .count {
-      color: #D5C702;
+
+    .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;
     }
-  }
 
-  .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');
+    .expand-btn:hover {
+      color: #1a5cc8;
     }
-    .icon-bottom {
-      background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon2.png');
+
+    .arrow-icon-wrapper {
+      width: 16px;
+      height: 16px;
+      position: relative;
+      display: inline-block;
     }
-    .count {
-      color: #0070FF;
+
+    .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;
     }
-  }
 
-}
-
-/* //  预警详情样式 */
-.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;
+    .arrow-icon.rotate {
+      transform: translate(-50%, -50%) rotate(180deg);
+    }
   }
 
   .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 {
+  .btn {
     color: #2b6ff0;
-    display: flex;
-    align-items: center;
-    gap: 4px;
     padding: 6px 12px;
     border: 1px solid #2b6ff0;
     border-radius: 4px;
-    background-color: #E9F0FE;
+    background-color: #e9f0fe;
     cursor: pointer;
     font-size: 12px;
   }
 
-  .expand-btn:hover {
-    color: #1a5cc8;
+  .data-row {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+    margin-bottom: 8px;
   }
 
-  .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;
+  .data-col {
+    width: 100%;
     height: 50px;
-    background-image: url('/@/assets/images/overHaul/rootPage/alarm-icon-bg.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    align-items: center;
+    position: relative;
     display: flex;
+    flex-direction: row;
+    align-items: start;
     justify-content: center;
+    padding: 0 16px 0 30px;
+    border-radius: 4px;
+    font-size: 12px;
 
-    .icon-item {
-      width: 25px;
-      height: 25px;
-      background-image: url('/@/assets/images/overHaul/rootPage/alarm-icon-1.svg');
+    .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%;
-      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');
+      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');
+      }
     }
-    .alarm-icon-3 {
-      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-3.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;
     }
-    .alarm-icon-4 {
-      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-4.svg');
+
+    .col-title {
+      color: #000;
+      font-size: 14px;
+      margin-bottom: 5px;
     }
-    .alarm-icon-5 {
-      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-5.svg');
+    .col-value {
+      color: #000;
+      font-size: 14px;
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+      }
     }
-    .alarm-icon-6 {
-      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-6.svg');
+
+    .col-first-row {
+      grid-column: span 1;
     }
-    .alarm-icon-7 {
-      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-7.svg');
+    .col-second-row:nth-child(6) {
+      grid-column: 1 / span 3; // 占据第 1 到第 3 列
     }
-    .alarm-icon-8 {
-      background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-8.svg');
+
+    .col-second-row:nth-child(7) {
+      grid-column: span 1; // 占据第 4 列
     }
-  }
-  .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-second-row:nth-child(8) {
+      grid-column: span 1; // 占据第 5 列
     }
   }
 
-  .col-first-row {
-    grid-column: span 1;
-  }
-  .col-second-row:nth-child(6) {
-    grid-column: 1 / span 3; // 占据第 1 到第 3 列
-  }
+  .half-year-statistics {
+    background-color: #ffffff;
+    margin-bottom: 20px;
+    padding: 10px 12px;
+    border-radius: 4px;
 
-  .col-second-row:nth-child(7) {
-    grid-column: span 1; // 占据第 4 列
-  }
+    .statistics-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
 
-  .col-second-row:nth-child(8) {
-    grid-column: span 1; // 占据第 5 列
-  }
-}
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
 
-.half-year-statistics {
-  background-color: #ffffff;
-  margin-bottom: 20px;
-  padding: 10px 12px;
-  border-radius: 4px;
+    .statistics-content {
+      display: flex;
+      gap: 20px; // 图表之间的间距
+    }
 
-  .statistics-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-  }
+    .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; */
+    }
 
-  .title {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-  }
+    .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;
+    }
 
-  .statistics-content {
-    display: flex;
-    gap: 20px; // 图表之间的间距
-  }
+    .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;
 
-  .chart-item {
-    flex: 1;
-    min-width: 0;
-    padding: 10px;
-    border-radius: 4px;
-    background-color: #ecf4fd;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-  }
+      &-title {
+        font-size: 16px;
+        color: #333;
+        padding: 0 10px;
+      }
+      &-value {
+        font-size: 16px;
+        color: #333;
+        padding: 0 10px;
+        font-weight: bold;
+      }
 
-  .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%;
-    
+      &: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>