Merge branch 'dev' of http://120.46.213.136:9528/isoftstone/lc_frontend into dev

src/views/Home/Index12.vue

@@ -2,15 +2,19 @@
   <div class="dashboard-container">
     <!-- 顶部标题栏 -->
     <div class="header-container">
-      <div class="header-left">
+      <HeaderSelector
-        <el-icon class="back-arrow" @click="returnToHeadquarters">
+        back-button-type="image"
-          <ArrowLeft />
+        :show-back-button="true"
-        </el-icon>
+        :on-back="returnToHeadquarters"
-        <div class="region-name-clickable" @click="openParkSelector">
+        :display-text="selectedRegion"
-          {{ selectedRegion }}
+        :clickable="true"
-          <span>···</span>
+        :show-selector-indicator="true"
-        </div>
+        selector-type="park"
-            </div>
+        :selected-value="selectedPark"
+        :region-code="route.query.regionCode as string"
+        theme="light"
+        @selector-change="onParkChange"
+      />
       <!-- <h1 class="header-title">区域视角数据看板</h1> -->
       <div class="header-right">
         <div class="date-range-wrapper">
@@ -41,16 +45,33 @@
               <Echart :options="outsourcingChartOption" width="100%" height="200px" />
           </div>
             <div class="region-distribution">
-              <div class="distribution-title">园区分布</div>
+              <div class="distribution-title">园区人数分布</div>
-              <div class="distribution-list">
+              <div class="grid-wrapper">
-                <div class="distribution-item" v-for="item in outsourcingDistribution" :key="item.region">
+                <!-- 第一列：园区名称 -->
-                  <span class="dot" :style="{ backgroundColor: item.color }"></span>
+                <div class="grid-column">
-                  <span class="region-name">{{ item.region }}</span>
+                  <div class="grid-header empty-header"></div>
-                  <span class="region-count">{{ item.count }}人</span>
+                  <div class="grid-park-name" v-for="item in outsourcingDistribution" :key="'area-' + item.region">
-                  <span class="region-percent">({{ item.percent }})</span>
+                    {{ item.region }}
-        </div>
                   </div>
+                </div>
+                <!-- 人数列 -->
+                <div class="grid-column">
+                  <div class="grid-header">人数</div>
+                  <div class="grid-number" v-for="item in outsourcingDistribution"
+                    :key="'count-' + item.region">
+                    {{ item.count }}人
                   </div>
+                </div>
+                <!-- 占比列 -->
+                <div class="grid-column">
+                  <div class="grid-header">占比</div>
+                  <div class="grid-number" v-for="item in outsourcingDistribution"
+                    :key="'percent-' + item.region">
+                    {{ item.percent }}
+                  </div>
+                </div>
+              </div>
+            </div>
             </div>
           </div>
 
@@ -69,28 +90,47 @@
         </div>
             <div class="risk-distribution-table">
               <div class="distribution-title">园区风险分布</div>
-              <div class="table-wrapper">
+              <div class="grid-wrapper">
-                <table class="risk-table">
+                <!-- 第一列：园区名称 -->
-                  <thead>
+                <div class="grid-column">
-                    <tr>
+                  <div class="grid-header empty-header"></div>
-                      <th>园区</th>
+                  <div class="grid-park-name" v-for="item in parkRiskDistribution" :key="'area-' + item.park">
-                      <th>低</th>
+                    {{ item.park }}
-                      <th>一般</th>
+                  </div>
-                      <th>较大</th>
+                </div>
-                      <th>重大</th>
+                <!-- 低列 -->
-                    </tr>
+                <div class="grid-column">
-                  </thead>
+                  <div class="grid-header status-low">低</div>
-                  <tbody>
+                  <div class="grid-number status-low" v-for="item in parkRiskDistribution"
-                    <tr v-for="item in parkRiskDistribution" :key="item.park">
+                    :key="'low-' + item.park">
-                      <td>{{ item.park }}</td>
+                    {{ item.low || '0' }}
-                      <td>{{ item.low || '' }}</td>
+                  </div>
-                      <td>{{ item.general }}</td>
+                </div>
-                      <td>{{ item.moderate }}</td>
+                <!-- 一般列 -->
-                      <td>{{ item.major }}</td>
+                <div class="grid-column">
-                    </tr>
+                  <div class="grid-header status-general">一般</div>
-                  </tbody>
+                  <div class="grid-number status-general" v-for="item in parkRiskDistribution"
-                </table>
+                    :key="'general-' + item.park">
-      </div>
+                    {{ item.general || '0' }}
+                  </div>
+                </div>
+                <!-- 较大列 -->
+                <div class="grid-column">
+                  <div class="grid-header status-moderate">较大</div>
+                  <div class="grid-number status-moderate" v-for="item in parkRiskDistribution"
+                    :key="'moderate-' + item.park">
+                    {{ item.moderate || '0' }}
+                  </div>
+                </div>
+                <!-- 重大列 -->
+                <div class="grid-column">
+                  <div class="grid-header status-major">重大</div>
+                  <div class="grid-number status-major" v-for="item in parkRiskDistribution"
+                    :key="'major-' + item.park">
+                    {{ item.major || '0' }}
+                  </div>
+                </div>
+              </div>
             </div>
                 </div>
                 </div>
@@ -106,11 +146,14 @@
                     </div>
           <div class="card-content">
             <div class="line-chart-wrapper">
-              <Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
+              <Echart :key="hiddenDangerChartKey" :options="hiddenDangerChartOption" width="100%" height="180px" />
-                  </div>
+            </div>
             <div class="rectification-status-grid">
               <div class="distribution-title">园区整改状态</div>
-              <div class="grid-wrapper">
+              <div v-if="parkRectificationStatus.length === 0" class="empty-data-tip">
+                暂无数据
+              </div>
+              <div v-else class="grid-wrapper">
                 <!-- 第一列：园区名称 -->
                 <div class="grid-column">
                   <div class="grid-header empty-header"></div>
@@ -122,21 +165,21 @@
                 <div class="grid-column">
                   <div class="grid-header status-overdue">已逾期</div>
                   <div class="grid-number status-overdue" v-for="item in parkRectificationStatus" :key="'overdue-' + item.park">
-                    {{ item.overdue }}
+                    {{ item.overdue ?? 0 }}
                   </div>
                 </div>
                 <!-- 处理中列 -->
                 <div class="grid-column">
                   <div class="grid-header status-processing">处理中</div>
                   <div class="grid-number status-processing" v-for="item in parkRectificationStatus" :key="'processing-' + item.park">
-                    {{ item.processing }}
+                    {{ item.processing ?? 0 }}
                   </div>
                 </div>
                 <!-- 已处理列 -->
                 <div class="grid-column">
                   <div class="grid-header status-processed">已处理</div>
                   <div class="grid-number status-processed" v-for="item in parkRectificationStatus" :key="'processed-' + item.park">
-                    {{ item.processed }}
+                    {{ item.processed ?? 0 }}
                   </div>
                 </div>
               </div>
@@ -254,16 +297,13 @@
           </div>
               </div>
 
-    <!-- 园区选择弹窗 -->
-    <RegionSelector v-model="parkSelectorVisible" :modelSelected="selectedPark" :regions="parkOption"
-      @change="onParkChange" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { Refresh, ArrowLeft } from '@element-plus/icons-vue'
+import { Refresh } from '@element-plus/icons-vue'
 import Echart from '@/components/Echart/src/Echart.vue'
 import type { EChartsOption } from 'echarts'
 import dayjs from 'dayjs'
@@ -277,8 +317,7 @@ import {
   getHiddenDangerManagementDataRegionWeek,
   getHiddenDangerManagementDataRegionMonth
 } from '@/api'
-import RegionSelector from '@/views/screen/components/RegionSelector.vue'
+import HeaderSelector from '@/views/screen/components/HeaderSelector.vue'
-import { getTableList } from '@/api/design/report'
 
 defineOptions({ name: 'Home12' })
 
@@ -319,8 +358,6 @@ const route = useRoute()
 // 区域和园区选择相关
 const selectedRegion = ref<string>('')
 const selectedPark = ref<string>('')
-const parkSelectorVisible = ref<boolean>(false)
-const parkOption = ref<ParkItem[]>([])
 
 // 外协管理：/person/table/view/1959187451673116674
 // 风险管理：/fx/table/view/1978723750599790594
@@ -329,22 +366,22 @@ const parkOption = ref<ParkItem[]>([])
 // 应急预案：/yayl/table/view/1966394259751907330
 // 安全培训：/pxks/table/view/1968225010550091777
 const openOutsourcingManagement = () => {
-  window.open('/person/table/view/1959187451673116674', '_blank')
+  router.push('/person/table/view/1959187451673116674')
 }
 const openRiskManagement = () => {
-  window.open('/fx/table/view/1978723750599790594', '_blank')
+  router.push('/fx/table/view/1978723750599790594')
 }
 const openHiddenDangerManagement = () => {
-  window.open('/fx/table/view/1963446160885366786', '_blank')
+  router.push('/fx/table/view/1963446160885366786')
 }
 const openHighRiskManagement = () => {
-  window.open('/low/table/view/1964253329070571521', '_blank')
+  router.push('/low/table/view/1964253329070571521')
 }
 const openEmergencyPlanManagement = () => {
-  window.open('/yayl/table/view/1966394259751907330', '_blank')
+  router.push('/yayl/table/view/1966394259751907330')
 }
 const openTrainingManagement = () => {
-  window.open('/pxks/table/view/1968225010550091777', '_blank')
+  router.push('/pxks/table/view/1968225010550091777')
 }
 // 时间选择相关 - 默认当前月起止，如果路由中有日期范围参数则使用
 const getCurrentMonthRange = () => {
@@ -408,35 +445,10 @@ const operationTypeColors: Record<string, string> = {
 }
 
 // 初始化区域数据 - 加载园区列表
+// 初始化区域数据 - 只设置选中区域，园区列表由 HeaderSelector 组件内部管理
 const initRegionData = async () => {
-  try {
+  if (typeof route.query.region === 'string') {
-    if (typeof route.query.region === 'string') {
+    selectedRegion.value = route.query.region
-      selectedRegion.value = route.query.region
-    }
-
-    // 加载园区列表
-    const { records } = await getTableList('park_info_list')
-    
-    if (records && records.length > 0) {
-      // 根据regionCode过滤园区
-      const regionCode = route.query.regionCode as string
-      const parkMap = new Map<string, ParkItem>()
-      
-      records
-        .filter((el: any) => el.region_id == regionCode)
-        .forEach((el: any) => {
-          if (!parkMap.has(el.park_name)) {
-            parkMap.set(el.park_name, {
-              name: el.park_name,
-              code: el.park_code
-            })
-          }
-        })
-      
-      parkOption.value = Array.from(parkMap.values())
-    }
-  } catch (error) {
-    console.error('初始化区域数据失败:', error)
   }
 }
 
@@ -451,15 +463,9 @@ const returnToHeadquarters = () => {
   })
 }
 
-// 打开园区选择器
-const openParkSelector = (): void => {
-  parkSelectorVisible.value = true
-}
-
 // 园区选择变化 - 跳转到园区页面
 const onParkChange = (item: ParkItem): void => {
   selectedPark.value = item.name
-  parkSelectorVisible.value = false
   router.push({
     path: '/park',
     query: { 
@@ -591,10 +597,10 @@ const initRiskData = async () => {
       
       // 处理风险等级分布数据（用于环形图）
       const allLevels = [
-        { key: '低', level: '低风险', count: 0, percent: '0%', color: '#10b981' },
+        { key: '低', level: '低风险', count: 0, percent: '0%', color: '#117cee' },
-        { key: '一般', level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
+        { key: '一般', level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
-        { key: '较大', level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
+        { key: '较大', level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
-        { key: '重大', level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
+        { key: '重大', level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
       ]
       
       riskDistribution.value = allLevels.map(defaultItem => {
@@ -632,10 +638,10 @@ const initRiskData = async () => {
     } else {
       riskTotal.value = 0
       riskDistribution.value = [
-        { level: '低风险', count: 0, percent: '0%', color: '#10b981' },
+        { level: '低风险', count: 0, percent: '0%', color: '#117cee' },
-        { level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
+        { level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
-        { level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
+        { level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
-        { level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
+        { level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
       ]
       parkRiskDistribution.value = []
       console.log('区域风险管理无数据')
@@ -644,10 +650,10 @@ const initRiskData = async () => {
     console.error('获取区域风险管理数据失败:', error)
     riskTotal.value = 0
     riskDistribution.value = [
-      { level: '低风险', count: 0, percent: '0%', color: '#10b981' },
+      { level: '低风险', count: 0, percent: '0%', color: '#117cee' },
-      { level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
+      { level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
-      { level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
+      { level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
-      { level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
+      { level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
     ]
     parkRiskDistribution.value = []
   }
@@ -1053,6 +1059,21 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
   if (chartData.length === 0 || outsourcingTotal.value === 0) {
     return {
       tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+      graphic: [
+        {
+          type: 'text',
+          left: 'center',
+          top: 'center',
+          style: {
+            text: `${outsourcingTotal.value}\n外协人员总数`,
+            fontSize: 16,
+            fontWeight: 'bold',
+            fill: '#333',
+            textAlign: 'center',
+            textVerticalAlign: 'middle'
+          }
+        }
+      ],
       series: [{
         name: '外协人员',
         type: 'pie',
@@ -1060,13 +1081,8 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
         center: ['50%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
-            label: {
+        label: {
-          show: true,
+          show: false
-          position: 'center',
-          formatter: () => `${outsourcingTotal.value}\n外协人员总数`,
-          fontSize: 16,
-          fontWeight: 'bold',
-          color: '#333'
         },
         data: [{ value: 1, name: '暂无数据', itemStyle: { color: '#e5e7eb' } }]
       }]
@@ -1075,6 +1091,21 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
   
   return {
     tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: `${outsourcingTotal.value}\n外协人员总数`,
+          fontSize: 16,
+          fontWeight: 'bold',
+          fill: '#333',
+          textAlign: 'center',
+          textVerticalAlign: 'middle'
+        }
+      }
+    ],
     series: [{
       name: '外协人员',
       type: 'pie',
@@ -1083,14 +1114,9 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
       avoidLabelOverlap: false,
       itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
       label: {
-        show: true,
+        show: false
-        position: 'center',
-        formatter: () => `${outsourcingTotal.value}\n外协人员总数`,
-        fontSize: 16,
-        fontWeight: 'bold',
-        color: '#333'
       },
-      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
+      emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
       data: chartData
     }]
   }
@@ -1106,6 +1132,21 @@ const riskChartOption = computed<EChartsOption>(() => {
   
   return {
     tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: `${riskTotal.value}\n风险总数`,
+          fontSize: 16,
+          fontWeight: 'bold',
+          fill: '#333',
+          textAlign: 'center',
+          textVerticalAlign: 'middle'
+        }
+      }
+    ],
     series: [{
       name: '风险',
       type: 'pie',
@@ -1115,23 +1156,52 @@ const riskChartOption = computed<EChartsOption>(() => {
       itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
       label: {
         show: true,
-        position: 'center',
+        alignTo: 'edge',
-        formatter: () => `${riskTotal.value}\n风险总数`,
+        formatter: (params: any) => {
-        fontSize: 16,
+          const value = Number(params.value) || 0
-        fontWeight: 'bold',
+          const total = Number(riskTotal.value) || 0
-        color: '#333'
+          if (total === 0) {
+            return '0%'
+          }
+          const percent = ((value / total) * 100).toFixed(2) + '%'
+          return percent
+        }
+      },
+      labelLine: {
+        show: true,
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 14,
+          fontWeight: 'bold'
+        }
       },
-      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
       data: chartData
     }]
   }
 })
 
+// 隐患管理图表 key，用于强制刷新图表
+const hiddenDangerChartKey = computed(() => {
+  // 基于数据长度和内容生成 key，确保数据变化时图表能正确刷新
+  const dataLength = hiddenDangerTrend.value.length
+  const dataHash = dataLength > 0 
+    ? JSON.stringify(hiddenDangerTrend.value.map(item => `${item.date}-${item.general}-${item.major}`)).slice(0, 50)
+    : 'empty'
+  return `hidden-danger-${dataLength}-${dataHash}`
+})
+
 // 隐患管理折线图配置
 const hiddenDangerChartOption = computed<EChartsOption>(() => {
-  const dates = hiddenDangerTrend.value.map(item => item.date)
+  const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
-  const generalData = hiddenDangerTrend.value.map(item => item.general)
+  const generalData = hiddenDangerTrend.value.map(item => item.general ?? 0)
-  const majorData = hiddenDangerTrend.value.map(item => item.major)
+  const majorData = hiddenDangerTrend.value.map(item => item.major ?? 0)
+  
+  // 判断是否为空数据：只有当原始数据数组为空，或者所有数据值都为0时才认为为空
+  const totalGeneral = generalData.reduce((sum, v) => sum + v, 0)
+  const totalMajor = majorData.reduce((sum, v) => sum + v, 0)
+  const isEmpty = hiddenDangerTrend.value.length === 0 || (totalGeneral === 0 && totalMajor === 0)
   
   return {
     tooltip: { trigger: 'axis' },
@@ -1139,14 +1209,40 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
       data: ['一般隐患', '重大隐患'],
       top: 10
     },
-    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: '12%', containLabel: true },
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: dates
+      data: isEmpty ? [] : dates,
+      show: !isEmpty
     },
-    yAxis: { type: 'value' },
+    yAxis: { 
-    series: [
+      type: 'value',
+      show: !isEmpty
+    },
+    graphic: isEmpty ? [
+      {
+        type: 'group',
+        left: 'center',
+        top: 'center',
+        children: [
+          {
+            type: 'text',
+            z: 100,
+            left: 'center',
+            top: 'center',
+            style: {
+              text: '暂无数据',
+              fontSize: 16,
+              fontWeight: 'normal',
+              fill: '#9ca3af',
+              textAlign: 'center'
+            }
+          }
+        ]
+      }
+    ] : [],
+    series: isEmpty ? [] : [
       {
         name: '一般隐患',
         type: 'line',
@@ -1169,6 +1265,21 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
 const highRiskChartOption = computed<EChartsOption>(() => {
   return {
     tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: `${highRiskTotal.value}\n累计作业`,
+          fontSize: 15,
+          fontWeight: 'bold',
+          fill: '#333',
+          textAlign: 'center',
+          textVerticalAlign: 'middle'
+        }
+      }
+    ],
     series: [{
       name: '高危作业',
       type: 'pie',
@@ -1177,14 +1288,9 @@ const highRiskChartOption = computed<EChartsOption>(() => {
       avoidLabelOverlap: false,
       itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
       label: {
-        show: true,
+        show: false
-        position: 'center',
-        formatter: () => `${highRiskTotal.value}\n累计作业`,
-        fontSize: 15,
-        fontWeight: 'bold',
-        color: '#333'
       },
-      emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } },
+      emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
       data: operationTypeDistribution.value.map(item => ({
         value: item.count,
         name: item.type,
@@ -1559,6 +1665,14 @@ onMounted(() => {
   font-weight: bold;
   color: #333;
   margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  span {
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+  }
 }
 
 .distribution-list {
@@ -1595,11 +1709,104 @@ onMounted(() => {
   color: #999;
 }
 
-.table-wrapper {
+// 风险管理网格样式（与隐患管理一致）
-  overflow-x: auto;
+.risk-distribution-table {
+  .grid-wrapper {
+    display: flex;
+    gap: 0;
+    justify-content: flex-start;
+  }
+
+  .grid-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 0;
+
+    &:first-child {
+      align-items: flex-start;
+      margin-right: 20px;
+      flex: 0 0 auto;
+      min-width: 80px;
+    }
+
+    &:not(:first-child) {
+      flex: 1;
+      min-width: 60px;
+    }
+  }
+
+  .grid-header {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 12px;
+    height: 20px;
+    line-height: 20px;
+
+    &.empty-header {
+      visibility: hidden;
+    }
+
+    &.status-low {
+      color: #117cee;
+    }
+
+    &.status-general {
+      color: #fbde28;
+    }
+
+    &.status-moderate {
+      color: #ed740c;
+    }
+
+    &.status-major {
+      color: #df2a3f;
+    }
+  }
+
+  .grid-park-name {
+    font-size: 13px;
+    color: #333;
+    margin-bottom: 8px;
+    text-align: left;
+    height: 24px;
+    line-height: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .grid-number {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 8px;
+    text-align: center;
+    height: 24px;
+    line-height: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.status-low {
+      color: #117cee;
+    }
+
+    &.status-general {
+      color: #fbde28;
+    }
+
+    &.status-moderate {
+      color: #ed740c;
+    }
+
+    &.status-major {
+      color: #df2a3f;
+    }
+  }
 }
 
-.risk-table,
 .status-table {
   width: 100%;
   border-collapse: collapse;
@@ -1616,7 +1823,7 @@ onMounted(() => {
   }
   
   th {
-  font-weight: bold;
+    font-weight: bold;
     color: #333;
   }
   
@@ -1627,6 +1834,13 @@ onMounted(() => {
 
 // 九宫格样式
 .rectification-status-grid {
+  .empty-data-tip {
+    text-align: center;
+    padding: 40px 0;
+    color: #9ca3af;
+    font-size: 14px;
+  }
+
   .grid-wrapper {
     display: flex;
     gap: 0;
@@ -1715,6 +1929,74 @@ onMounted(() => {
   }
 }
 
+// 外协管理网格样式（与隐患管理一致）
+.region-distribution {
+  .grid-wrapper {
+    display: flex;
+    gap: 0;
+    justify-content: flex-start;
+  }
+
+  .grid-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 0;
+
+    &:first-child {
+      align-items: flex-start;
+      margin-right: 20px;
+      flex: 0 0 auto;
+      min-width: 80px;
+    }
+
+    &:not(:first-child) {
+      flex: 1;
+      min-width: 60px;
+    }
+  }
+
+  .grid-header {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 12px;
+    height: 20px;
+    line-height: 20px;
+    color: #374151;
+
+    &.empty-header {
+      visibility: hidden;
+    }
+  }
+
+  .grid-park-name {
+    font-size: 13px;
+    color: #333;
+    margin-bottom: 8px;
+    text-align: left;
+    height: 24px;
+    line-height: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .grid-number {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 8px;
+    text-align: center;
+    height: 24px;
+    line-height: 24px;
+    color: #1f2937;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
 .high-risk-top {
   display: flex;
   align-items: center;

src/views/Home/Index13.vue

@@ -2,12 +2,16 @@
   <div class="dashboard-container">
     <!-- 顶部标题栏 -->
     <div class="header-container">
-      <div class="header-left">
+      <HeaderSelector
-        <el-icon class="back-arrow" @click="returnToRegion">
+        back-button-type="image"
-          <ArrowLeft />
+        :show-back-button="true"
-        </el-icon>
+        :on-back="returnToRegion"
-        <div class="park-name">{{ selectedPark }}</div>
+        :display-text="selectedPark"
-              </div>
+        :clickable="false"
+        :show-selector-indicator="false"
+        selector-type="none"
+        theme="light"
+      />
       <!-- <h1 class="header-title">园区视角数据看板</h1> -->
       <div class="header-right">
         <div class="date-range-wrapper">
@@ -38,16 +42,33 @@
               <Echart :options="outsourcingChartOption" width="100%" height="200px" />
           </div>
             <div class="region-distribution">
-              <div class="distribution-title">供应商分布</div>
+              <div class="distribution-title">供应商人数分布</div>
-              <div class="distribution-list">
+              <div class="grid-wrapper">
-                <div class="distribution-item" v-for="item in supplierDistribution" :key="item.supplier">
+                <!-- 第一列：供应商名称 -->
-                  <span class="dot" :style="{ backgroundColor: item.color }"></span>
+                <div class="grid-column">
-                  <span class="region-name">{{ item.supplier }}</span>
+                  <div class="grid-header empty-header"></div>
-                  <span class="region-count">{{ item.count }}人</span>
+                  <div class="grid-park-name" v-for="item in supplierDistribution" :key="'area-' + item.supplier">
-                  <span class="region-percent">({{ item.percent }})</span>
+                    {{ item.supplier }}
-          </div>
-        </div>
                   </div>
+                </div>
+                <!-- 人数列 -->
+                <div class="grid-column">
+                  <div class="grid-header">人数</div>
+                  <div class="grid-number" v-for="item in supplierDistribution"
+                    :key="'count-' + item.supplier">
+                    {{ item.count }}人
+                  </div>
+                </div>
+                <!-- 占比列 -->
+                <div class="grid-column">
+                  <div class="grid-header">占比</div>
+                  <div class="grid-number" v-for="item in supplierDistribution"
+                    :key="'percent-' + item.supplier">
+                    {{ item.percent }}
+                  </div>
+                </div>
+              </div>
+            </div>
             </div>
           </div>
 
@@ -66,28 +87,47 @@
         </div>
             <div class="risk-distribution-table">
               <div class="distribution-title">地点风险分布</div>
-              <div class="table-wrapper">
+              <div class="grid-wrapper">
-                <table class="risk-table">
+                <!-- 第一列：地点名称 -->
-                  <thead>
+                <div class="grid-column">
-                    <tr>
+                  <div class="grid-header empty-header"></div>
-                      <th>所在地点</th>
+                  <div class="grid-park-name" v-for="item in locationRiskDistribution" :key="'area-' + item.location">
-                      <th>低</th>
+                    {{ item.location }}
-                      <th>一般</th>
+                  </div>
-                      <th>较大</th>
+                </div>
-                      <th>重大</th>
+                <!-- 低列 -->
-                    </tr>
+                <div class="grid-column">
-                  </thead>
+                  <div class="grid-header status-low">低</div>
-                  <tbody>
+                  <div class="grid-number status-low" v-for="item in locationRiskDistribution"
-                    <tr v-for="item in locationRiskDistribution" :key="item.location">
+                    :key="'low-' + item.location">
-                      <td>{{ item.location }}</td>
+                    {{ item.low || '0' }}
-                      <td>{{ item.low || '' }}</td>
+                  </div>
-                      <td>{{ item.general }}</td>
+                </div>
-                      <td>{{ item.moderate }}</td>
+                <!-- 一般列 -->
-                      <td>{{ item.major }}</td>
+                <div class="grid-column">
-                    </tr>
+                  <div class="grid-header status-general">一般</div>
-                  </tbody>
+                  <div class="grid-number status-general" v-for="item in locationRiskDistribution"
-                </table>
+                    :key="'general-' + item.location">
-      </div>
+                    {{ item.general || '0' }}
+                  </div>
+                </div>
+                <!-- 较大列 -->
+                <div class="grid-column">
+                  <div class="grid-header status-moderate">较大</div>
+                  <div class="grid-number status-moderate" v-for="item in locationRiskDistribution"
+                    :key="'moderate-' + item.location">
+                    {{ item.moderate || '0' }}
+                  </div>
+                </div>
+                <!-- 重大列 -->
+                <div class="grid-column">
+                  <div class="grid-header status-major">重大</div>
+                  <div class="grid-number status-major" v-for="item in locationRiskDistribution"
+                    :key="'major-' + item.location">
+                    {{ item.major || '0' }}
+                  </div>
+                </div>
+              </div>
             </div>
                 </div>
                 </div>
@@ -103,11 +143,14 @@
                     </div>
           <div class="card-content">
             <div class="line-chart-wrapper">
-              <Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
+              <Echart :key="hiddenDangerChartKey" :options="hiddenDangerChartOption" width="100%" height="180px" />
-                  </div>
+            </div>
             <div class="rectification-status-grid">
               <div class="distribution-title">所属公司整改状态</div>
-              <div class="grid-wrapper">
+              <div v-if="companyRectificationStatus.length === 0" class="empty-data-tip">
+                暂无数据
+              </div>
+              <div v-else class="grid-wrapper">
                 <!-- 第一列：公司名称 -->
                 <div class="grid-column">
                   <div class="grid-header empty-header"></div>
@@ -119,21 +162,21 @@
                 <div class="grid-column">
                   <div class="grid-header status-overdue">已逾期</div>
                   <div class="grid-number status-overdue" v-for="item in companyRectificationStatus" :key="'overdue-' + item.company">
-                    {{ item.overdue }}
+                    {{ item.overdue ?? 0 }}
                   </div>
                 </div>
                 <!-- 处理中列 -->
                 <div class="grid-column">
                   <div class="grid-header status-processing">处理中</div>
                   <div class="grid-number status-processing" v-for="item in companyRectificationStatus" :key="'processing-' + item.company">
-                    {{ item.processing }}
+                    {{ item.processing ?? 0 }}
                   </div>
                 </div>
                 <!-- 已处理列 -->
                 <div class="grid-column">
                   <div class="grid-header status-processed">已处理</div>
                   <div class="grid-number status-processed" v-for="item in companyRectificationStatus" :key="'processed-' + item.company">
-                    {{ item.processed }}
+                    {{ item.processed ?? 0 }}
                   </div>
                 </div>
               </div>
@@ -258,7 +301,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { Refresh, ArrowLeft } from '@element-plus/icons-vue'
+import { Refresh } from '@element-plus/icons-vue'
 import Echart from '@/components/Echart/src/Echart.vue'
 import type { EChartsOption } from 'echarts'
 import dayjs from 'dayjs'
@@ -272,6 +315,7 @@ import {
   getHiddenDangerManagementDataParkWeek,
   getHiddenDangerManagementDataParkMonth
 } from '@/api'
+import HeaderSelector from '@/views/screen/components/HeaderSelector.vue'
 
 defineOptions({ name: 'Home13' })
 
@@ -319,22 +363,22 @@ const route = useRoute()
 // 应急预案：/yayl/table/view/1966394259751907330
 // 安全培训：/pxks/table/view/1968225010550091777
 const openOutsourcingManagement = () => {
-  window.open('/person/table/view/1959187451673116674', '_blank')
+  router.push('/person/table/view/1959187451673116674')
 }
 const openRiskManagement = () => {
-  window.open('/fx/table/view/1978723750599790594', '_blank')
+  router.push('/fx/table/view/1978723750599790594')
 }
 const openHiddenDangerManagement = () => {
-  window.open('/fx/table/view/1963446160885366786', '_blank')
+  router.push('/fx/table/view/1963446160885366786')
 }
 const openHighRiskManagement = () => {
-  window.open('/low/table/view/1964253329070571521', '_blank')
+  router.push('/low/table/view/1964253329070571521')
 }
 const openEmergencyPlanManagement = () => {
-  window.open('/yayl/table/view/1966394259751907330', '_blank')
+  router.push('/yayl/table/view/1966394259751907330')
 }
 const openTrainingManagement = () => {
-  window.open('/pxks/table/view/1968225010550091777', '_blank')
+  router.push('/pxks/table/view/1968225010550091777')
 }
 // 园区名称 - 从路由参数获取
 const selectedPark = ref<string>('')
@@ -541,10 +585,10 @@ const initRiskData = async () => {
       
       // 处理风险等级分布数据（用于环形图）
       const allLevels = [
-        { key: '低', level: '低风险', count: 0, percent: '0%', color: '#10b981' },
+        { key: '低', level: '低风险', count: 0, percent: '0%', color: '#117cee' },
-        { key: '一般', level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
+        { key: '一般', level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
-        { key: '较大', level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
+        { key: '较大', level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
-        { key: '重大', level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
+        { key: '重大', level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
       ]
       
       riskDistribution.value = allLevels.map(defaultItem => {
@@ -582,10 +626,10 @@ const initRiskData = async () => {
     } else {
       riskTotal.value = 0
       riskDistribution.value = [
-        { level: '低风险', count: 0, percent: '0%', color: '#10b981' },
+        { level: '低风险', count: 0, percent: '0%', color: '#117cee' },
-        { level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
+        { level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
-        { level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
+        { level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
-        { level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
+        { level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
       ]
       locationRiskDistribution.value = []
       console.log('园区风险管理无数据')
@@ -594,10 +638,10 @@ const initRiskData = async () => {
     console.error('获取园区风险管理数据失败:', error)
     riskTotal.value = 0
     riskDistribution.value = [
-      { level: '低风险', count: 0, percent: '0%', color: '#10b981' },
+      { level: '低风险', count: 0, percent: '0%', color: '#117cee' },
-      { level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
+      { level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
-      { level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
+      { level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
-      { level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
+      { level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
     ]
     locationRiskDistribution.value = []
   }
@@ -974,6 +1018,21 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
   if (chartData.length === 0 || outsourcingTotal.value === 0) {
     return {
       tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+      graphic: [
+        {
+          type: 'text',
+          left: 'center',
+          top: 'center',
+          style: {
+            text: `${outsourcingTotal.value}\n外协人员总数`,
+            fontSize: 16,
+            fontWeight: 'bold',
+            fill: '#333',
+            textAlign: 'center',
+            textVerticalAlign: 'middle'
+          }
+        }
+      ],
       series: [{
         name: '外协人员',
         type: 'pie',
@@ -981,13 +1040,8 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
         center: ['50%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
-            label: {
+        label: {
-          show: true,
+          show: false
-          position: 'center',
-          formatter: () => `${outsourcingTotal.value}\n外协人员总数`,
-          fontSize: 16,
-          fontWeight: 'bold',
-          color: '#333'
         },
         data: [{ value: 1, name: '暂无数据', itemStyle: { color: '#e5e7eb' } }]
       }]
@@ -996,6 +1050,21 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
   
   return {
     tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: `${outsourcingTotal.value}\n外协人员总数`,
+          fontSize: 16,
+          fontWeight: 'bold',
+          fill: '#333',
+          textAlign: 'center',
+          textVerticalAlign: 'middle'
+        }
+      }
+    ],
     series: [{
       name: '外协人员',
       type: 'pie',
@@ -1004,14 +1073,9 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
       avoidLabelOverlap: false,
       itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
       label: {
-        show: true,
+        show: false
-        position: 'center',
-        formatter: () => `${outsourcingTotal.value}\n外协人员总数`,
-        fontSize: 16,
-        fontWeight: 'bold',
-        color: '#333'
       },
-      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
+      emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
       data: chartData
     }]
   }
@@ -1027,6 +1091,21 @@ const riskChartOption = computed<EChartsOption>(() => {
   
   return {
     tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: `${riskTotal.value}\n风险总数`,
+          fontSize: 16,
+          fontWeight: 'bold',
+          fill: '#333',
+          textAlign: 'center',
+          textVerticalAlign: 'middle'
+        }
+      }
+    ],
     series: [{
       name: '风险',
       type: 'pie',
@@ -1036,23 +1115,52 @@ const riskChartOption = computed<EChartsOption>(() => {
       itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
       label: {
         show: true,
-        position: 'center',
+        alignTo: 'edge',
-        formatter: () => `${riskTotal.value}\n风险总数`,
+        formatter: (params: any) => {
-        fontSize: 16,
+          const value = Number(params.value) || 0
-        fontWeight: 'bold',
+          const total = Number(riskTotal.value) || 0
-        color: '#333'
+          if (total === 0) {
+            return '0%'
+          }
+          const percent = ((value / total) * 100).toFixed(2) + '%'
+          return percent
+        }
+      },
+      labelLine: {
+        show: true,
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 14,
+          fontWeight: 'bold'
+        }
       },
-      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
       data: chartData
     }]
   }
 })
 
+// 隐患管理图表 key，用于强制刷新图表
+const hiddenDangerChartKey = computed(() => {
+  // 基于数据长度和内容生成 key，确保数据变化时图表能正确刷新
+  const dataLength = hiddenDangerTrend.value.length
+  const dataHash = dataLength > 0 
+    ? JSON.stringify(hiddenDangerTrend.value.map(item => `${item.date}-${item.general}-${item.major}`)).slice(0, 50)
+    : 'empty'
+  return `hidden-danger-${dataLength}-${dataHash}`
+})
+
 // 隐患管理折线图配置
 const hiddenDangerChartOption = computed<EChartsOption>(() => {
-  const dates = hiddenDangerTrend.value.map(item => item.date)
+  const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
-  const generalData = hiddenDangerTrend.value.map(item => item.general)
+  const generalData = hiddenDangerTrend.value.map(item => item.general ?? 0)
-  const majorData = hiddenDangerTrend.value.map(item => item.major)
+  const majorData = hiddenDangerTrend.value.map(item => item.major ?? 0)
+  
+  // 判断是否为空数据：只有当原始数据数组为空，或者所有数据值都为0时才认为为空
+  const totalGeneral = generalData.reduce((sum, v) => sum + v, 0)
+  const totalMajor = majorData.reduce((sum, v) => sum + v, 0)
+  const isEmpty = hiddenDangerTrend.value.length === 0 || (totalGeneral === 0 && totalMajor === 0)
   
   return {
     tooltip: { trigger: 'axis' },
@@ -1060,14 +1168,41 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
       data: ['一般隐患', '重大隐患'],
       top: 10
     },
-    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: '12%', containLabel: true },
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: dates
+      data: isEmpty ? [] : dates,
+      show: !isEmpty
     },
-    yAxis: { type: 'value', max: 45 },
+    yAxis: { 
-    series: [
+      type: 'value', 
+      max: 45,
+      show: !isEmpty
+    },
+    graphic: isEmpty ? [
+      {
+        type: 'group',
+        left: 'center',
+        top: 'center',
+        children: [
+          {
+            type: 'text',
+            z: 100,
+            left: 'center',
+            top: 'center',
+            style: {
+              text: '暂无数据',
+              fontSize: 16,
+              fontWeight: 'normal',
+              fill: '#9ca3af',
+              textAlign: 'center'
+            }
+          }
+        ]
+      }
+    ] : [],
+    series: isEmpty ? [] : [
       {
         name: '一般隐患',
         type: 'line',
@@ -1090,6 +1225,21 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
 const highRiskChartOption = computed<EChartsOption>(() => {
   return {
     tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: `${highRiskTotal.value}\n累计作业`,
+          fontSize: 15,
+          fontWeight: 'bold',
+          fill: '#333',
+          textAlign: 'center',
+          textVerticalAlign: 'middle'
+        }
+      }
+    ],
     series: [{
       name: '高危作业',
       type: 'pie',
@@ -1098,14 +1248,9 @@ const highRiskChartOption = computed<EChartsOption>(() => {
       avoidLabelOverlap: false,
       itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
       label: {
-        show: true,
+        show: false
-        position: 'center',
-        formatter: () => `${highRiskTotal.value}\n累计作业`,
-        fontSize: 15,
-        fontWeight: 'bold',
-        color: '#333'
       },
-      emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } },
+      emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
       data: operationTypeDistribution.value.map(item => ({
         value: item.count,
         name: item.type,
@@ -1466,6 +1611,14 @@ onMounted(() => {
   font-weight: bold;
   color: #333;
   margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  span {
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+  }
 }
 
 .distribution-list {
@@ -1502,11 +1655,104 @@ onMounted(() => {
   color: #999;
 }
 
-.table-wrapper {
+// 风险管理网格样式（与隐患管理一致）
-  overflow-x: auto;
+.risk-distribution-table {
+  .grid-wrapper {
+    display: flex;
+    gap: 0;
+    justify-content: flex-start;
+  }
+
+  .grid-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 0;
+
+    &:first-child {
+      align-items: flex-start;
+      margin-right: 20px;
+      flex: 0 0 auto;
+      min-width: 80px;
+    }
+
+    &:not(:first-child) {
+      flex: 1;
+      min-width: 60px;
+    }
+  }
+
+  .grid-header {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 12px;
+    height: 20px;
+    line-height: 20px;
+
+    &.empty-header {
+      visibility: hidden;
+    }
+
+    &.status-low {
+      color: #117cee;
+    }
+
+    &.status-general {
+      color: #fbde28;
+    }
+
+    &.status-moderate {
+      color: #ed740c;
+    }
+
+    &.status-major {
+      color: #df2a3f;
+    }
+  }
+
+  .grid-park-name {
+    font-size: 13px;
+    color: #333;
+    margin-bottom: 8px;
+    text-align: left;
+    height: 24px;
+    line-height: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .grid-number {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 8px;
+    text-align: center;
+    height: 24px;
+    line-height: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.status-low {
+      color: #117cee;
+    }
+
+    &.status-general {
+      color: #fbde28;
+    }
+
+    &.status-moderate {
+      color: #ed740c;
+    }
+
+    &.status-major {
+      color: #df2a3f;
+    }
+  }
 }
 
-.risk-table,
 .status-table {
   width: 100%;
   border-collapse: collapse;
@@ -1535,6 +1781,13 @@ onMounted(() => {
 // 九宫格样式
 // 九宫格样式
 .rectification-status-grid {
+  .empty-data-tip {
+    text-align: center;
+    padding: 40px 0;
+    color: #9ca3af;
+    font-size: 14px;
+  }
+
   .grid-wrapper {
     display: flex;
     gap: 0;
@@ -1623,6 +1876,74 @@ onMounted(() => {
   }
 }
 
+// 外协管理网格样式（与隐患管理一致）
+.region-distribution {
+  .grid-wrapper {
+    display: flex;
+    gap: 0;
+    justify-content: flex-start;
+  }
+
+  .grid-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 0;
+
+    &:first-child {
+      align-items: flex-start;
+      margin-right: 20px;
+      flex: 0 0 auto;
+      min-width: 80px;
+    }
+
+    &:not(:first-child) {
+      flex: 1;
+      min-width: 60px;
+    }
+  }
+
+  .grid-header {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 12px;
+    height: 20px;
+    line-height: 20px;
+    color: #374151;
+
+    &.empty-header {
+      visibility: hidden;
+    }
+  }
+
+  .grid-park-name {
+    font-size: 13px;
+    color: #333;
+    margin-bottom: 8px;
+    text-align: left;
+    height: 24px;
+    line-height: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .grid-number {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 8px;
+    text-align: center;
+    height: 24px;
+    line-height: 24px;
+    color: #1f2937;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
 .high-risk-top {
   display: flex;
   align-items: center;

src/views/screen/companyScreen.vue

@@ -2,10 +2,15 @@
   <div class="dashboard-container">
     <!-- 顶部标题栏 -->
     <div class="header-container">
-      <div class="header-left">
+      <HeaderSelector
-        <img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
+        back-button-type="image"
-        <div class="back-button"> {{ selectedPark }} </div>
+        :show-back-button="true"
-      </div>
+        :on-back="returnToHeadquarters"
+        :display-text="selectedPark"
+        :clickable="false"
+        :show-selector-indicator="false"
+        selector-type="none"
+      />
       <h1 class="header-title">{{ selectedPark }}综合监控大屏</h1>
       <div class="date-wrapper">
         <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -29,7 +34,10 @@
               </div>
               <span>总计</span>
               <div class="number-wrapper">
-                <span class="total-number" v-for="(digit, index) in totalCountDigits" :key="index">
+                <div v-if="isFirstLoading" class="skeleton-number-wrapper">
+                  <div v-for="i in 4" :key="i" class="skeleton-number skeleton-pulse"></div>
+                </div>
+                <span v-else class="total-number" v-for="(digit, index) in totalCountDigits" :key="index">
                   {{ digit }}
                 </span>
               </div>
@@ -37,32 +45,53 @@
             </div>
             <div class="top-card-right">
               <div class="top-card-right-item">
-                <img width="18px" src="@/assets/images/v2_rel0n8.png" />
+                <div>
-                <span>正式员工</span>
+                  <img width="18px" src="@/assets/images/v2_rel0n8.png" />
-                <div class="type-number-wrapper" style="margin-left: 2vw">
+                  <span>正式员工</span>
-                  <span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
+                </div>
-                    {{ digit }}
+                <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
-                  </span>
+                  <div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
+                    <div v-for="i in formalEmployeeDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
+                  </div>
+                  <div v-else class="type-number-wrapper">
+                    <span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
+                      {{ digit }}
+                    </span>
+                  </div>
                 </div>
                 <span>人</span>
               </div>
               <div class="top-card-right-item">
-                <img width="18px" src="@/assets/images/v2_rel0n23.png" />
+                <div>
-                <span>外协人员</span>
+                  <img width="18px" src="@/assets/images/v2_rel0n23.png" />
-                <div class="type-number-wrapper" style="margin-left: 1vw">
+                  <span>外协人员</span>
-                  <span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
+                </div>
-                    {{ digit }}
+                <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
-                  </span>
+                  <div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
+                    <div v-for="i in externalStaffDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
+                  </div>
+                  <div v-else class="type-number-wrapper">
+                    <span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
+                      {{ digit }}
+                    </span>
+                  </div>
                 </div>
                 <span>人</span>
               </div>
               <div class="top-card-right-item">
-                <img width="18px" src="@/assets/images/24508_654.png" />
+                <div>
-                <span>访客</span>
+                  <img width="18px" src="@/assets/images/24508_654.png" />
-                <div class="type-number-wrapper">
+                  <span>访客</span>
-                  <span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
+                </div>
-                    {{ digit }}
+                <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
-                  </span>
+                  <div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
+                    <div v-for="i in visitorDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
+                  </div>
+                  <div v-else class="type-number-wrapper">
+                    <span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
+                      {{ digit }}
+                    </span>
+                  </div>
                 </div>
                 <span>人</span>
               </div>
@@ -77,12 +106,14 @@
             <div class="type-wrapper">
               <div class="type-item">
                 <span class="type-btn yellow">重大</span>
-                <span class="type-num cursor-pointer" @click="handleSeverityCountClick">{{
+                <div v-if="isFirstLoading" class="type-num skeleton-pulse"></div>
+                <span v-else class="type-num cursor-pointer" @click="handleSeverityCountClick">{{
                   mockData.hiddenDangerData.severityCount }}</span>
               </div>
               <div class="type-item">
                 <span class="type-btn green">一般</span>
-                <span class="type-num cursor-pointer" @click="handleGeneralCountClick">{{
+                <div v-if="isFirstLoading" class="type-num skeleton-pulse"></div>
+                <span v-else class="type-num cursor-pointer" @click="handleGeneralCountClick">{{
                   mockData.hiddenDangerData.generalCount }}</span>
               </div>
               <!-- <div class="type-item">
@@ -92,6 +123,7 @@
 
             </div>
             <div class="hazard-wrapper">
+              <!-- <div v-if="isFirstLoading" class="skeleton-chart skeleton-pulse"></div> -->
               <div ref="progressChartRef" class="progress-chart"></div>
               <div class="progress-legend">
                 <div class="legend-item"><span class="dot red"></span>已逾期</div>
@@ -154,7 +186,12 @@
                   <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
                 </div>
               </div>
-              <AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="tableTitle" :list-data="examList" />
+              <AlertList
+                maxHeight="40vh"
+                style="margin-left: 1vw;"
+                :table-title="tableTitle"
+                :list-data="examList"
+              />
             </template>
 <template v-if="activeTab === '应急预案及演练'">
               <div class="bottom-card">
@@ -167,7 +204,7 @@
                 :list-data="drillList" />
             </template>
 </div> -->
-          <RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
+          <RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
             @tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
         </div>
       </div>
@@ -181,34 +218,39 @@
           <div class="tip-container">
             <div class="tip-image">
               <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
-              <span class="number">{{ mockData.alertData.total }}</span>
+              <div v-if="isFirstLoading" style="width: 20px; height: 20px" class="number skeleton-pulse"></div>
+              <span v-else class="number">{{ mockData.alertData.total }}</span>
             </div>
             <img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
             <div class="tip-content">
               <div class="col-item">
                 <img src="@/assets/images/screen/warning_img.png" width="23" />
                 <span>告警总数</span>
-                <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.total }}</span>
+                <div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+                <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.total }}</span>
               </div>
               <div class="col-item">
                 <span>已处理</span>
-                <span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ mockData.alertData.processed
+                <div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+                <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ mockData.alertData.processed
                 }}</span>
               </div>
               <div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
                 <span>待处理</span>
-                <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending
+                <div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+                <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending
                 }}</span>
               </div>
               <div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
                 <span>处理中</span>
-                <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing
+                <div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+                <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing
                 }}</span>
               </div>
             </div>
           </div>
           <div style=" display: flex; width: 100%;margin-top: 1vw; flex: 1; justify-content: flex-end;">
-            <AlertList linkUrl="http://10.0.64.20/security/console/command-center?p=tabl" style="margin-right: 1vw;" title="告警详情" :list-data="mockData.alertData.details" />
+            <AlertList :loading="isFirstLoading" linkUrl="http://10.0.64.20/security/console/command-center?p=tabl" style="margin-right: 1vw;" title="告警详情" :list-data="mockData.alertData.details" />
           </div>
         </div>
         <!-- 右下区域 -->
@@ -218,20 +260,30 @@
           <div class="tip-container">
             <div class="tip-image">
               <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
-              <span class="number">{{ mockData.timeoutWorkOrders.total }}</span>
+              <div v-if="isFirstLoading" style="width: 20px; height: 20px" class="number skeleton-pulse"></div>
+              <span v-else class="number">{{ mockData.timeoutWorkOrders.total }}</span>
             </div>
             <img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
             <div class="tip-content">
               <div class="col-item">
                 <img src="@/assets/images/screen/warning_img.png" width="23" />
                 <span>超时工单数</span>
-                <span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ mockData.timeoutWorkOrders.total
+                <div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
-                }}</span>
+                <span
+                  v-else
+                  style="font-size: 1.2rem; marker-start: 2vw; color: red;"
+                >{{ mockData.timeoutWorkOrders.total }}</span>
               </div>
             </div>
           </div>
           <div style=" display: flex; width: 100%;margin-top: 1vw; flex: 1; justify-content: flex-end;">
-            <AlertList linkUrl="http://10.0.64.20/pms/workorder-list" style="margin-right: 1vw;" title="工单详情" :list-data="mockData.timeoutWorkOrders.details" />
+            <AlertList
+              :loading="isFirstLoading"
+              linkUrl="http://10.0.64.20/pms/workorder-list"
+              style="margin-right: 1vw;"
+              title="工单详情"
+              :list-data="mockData.timeoutWorkOrders.details"
+            />
           </div>
         </div>
       </div>
@@ -250,6 +302,9 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+
+// 创建 AbortController 用于取消请求
+const abortController = new AbortController()
 import * as echarts from 'echarts'
 import ParkCenter from './components/ParkCenter.vue'
 import PointInfoPopup from './components/PointInfoPopup.vue'
@@ -257,6 +312,7 @@ import WeatherWarning from './components/WeatherWarning.vue'
 import AlertList from './components/AlertList.vue'
 import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail, getWorkOrderStatistics } from './report'
 import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
+import HeaderSelector from './components/HeaderSelector.vue'
 
 interface PointPosition {
   label: string
@@ -269,6 +325,17 @@ const totalCountDigits = computed(() => String(mockData.totalCount).split('').ma
 const formalEmployeeDigits = computed(() => String(mockData.formalEmployeeCount).split('').map(Number))
 const externalStaffDigits = computed(() => String(mockData.externalStaffCount).split('').map(Number))
 const visitorDigits = computed(() => String(mockData.visitorCount).split('').map(Number))
+
+// 计算数字区域的最大宽度
+// 每个数字框宽度 14px，gap 2px
+const maxNumberWidth = computed(() => {
+  const formalLen = formalEmployeeDigits.value.length
+  const externalLen = externalStaffDigits.value.length
+  const visitorLen = visitorDigits.value.length
+  const maxLen = Math.max(formalLen, externalLen, visitorLen)
+  // 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
+  return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
+})
 const route = useRoute()
 const router = useRouter()
 
@@ -281,6 +348,9 @@ const currentTime = ref<string>('')
 const activeTab = ref<string>('高危作业')
 const showPointPopup = ref(false)
 const currentPoint = ref<PointPosition | null>(null)
+
+// 首次加载状态
+const isFirstLoading = ref<boolean>(true)
 const progressChart = ref<echarts.ECharts | null>(null)
 const progressChartRef = ref<HTMLElement | null>(null)
 const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
@@ -298,16 +368,16 @@ const handleGeneralCountClick = () => {
 }
 
 const riskStatistics = ref<any>({
-  '安全类': [],
+  '安全类事项': [],
-  '工程类': []
+  '工程类事项': []
 })
 const dangerDetail = ref<any>({
-  '安全类': [],
+  '安全类事项': [],
-  '工程类': []
+  '工程类事项': []
 })
 const parkValue = ref<string>('')
 
-type TabType = '安全类' | '工程类'
+type TabType = '安全类事项' | '工程类事项'
 
 
 const handleRiskTabChange = async (tab: TabType) => {
@@ -316,10 +386,10 @@ const handleRiskTabChange = async (tab: TabType) => {
   try {
     let workOrderType = ''
     switch (tab) {
-      case '安全类':
+      case '安全类事项':
         workOrderType = '安全生产'
         break
-      case '工程类':
+      case '工程类事项':
         workOrderType = '物业服务-工程'
         break
       default:
@@ -328,11 +398,11 @@ const handleRiskTabChange = async (tab: TabType) => {
 
     // 同时获取维保任务和巡检任务的数据
     const [maintenanceResponse, inspectionResponse] = await Promise.all([
-      getWorkOrderStatistics({ workOrderType, taskType: '维保任务', campus_id: query.campus_id }).catch(error => {
+      getWorkOrderStatistics({ workOrderType, taskType: '维保任务', campus_id: query.campus_id }, { signal: abortController.signal }).catch(error => {
         console.error('获取维保任务数据失败:', error)
         return { records: [] }
       }),
-      getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }).catch(error => {
+      getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }, { signal: abortController.signal }).catch(error => {
         console.error('获取巡检任务数据失败:', error)
         return { records: [] }
       })
@@ -729,55 +799,70 @@ onMounted(async () => {
   updateTime()
   timeUpdateTimerId.value = setInterval(updateTime, 1000)
 
-  if (typeof route.query.parkName === 'string') {
+  try {
-    selectedPark.value = route.query.parkName
+    if (typeof route.query.parkName === 'string') {
-    query.campus_id = route.query.parkCode as string
+      selectedPark.value = route.query.parkName
-  }
+      query.campus_id = route.query.parkCode as string
-
-  handleRiskTabChange('安全类')
-
-  // 先检查缓存
-  const cachedRecords = getCachedRegionOption()
-  let records = cachedRecords
-  
-  if (!records || records.length === 0) {
-    // 缓存不存在或已过期，调用接口
-    try {
-      let result = await getTableList('park_info_list')
-      records = result.records || []
-      
-      if (records && records.length > 0) {
-        // 保存到缓存
-        setCachedRegionOption(records)
-      }
-    } catch (error) {
-      console.error('初始化园区数据失败:', error)
-      records = []
     }
-  }
-  
-  if (records && records.length > 0) {
-    // 更新为新的数据格式
-    regionOption.value = records.map(el => ({
-      name: el.park_name,
-      code: el.park_code,
-      pic_url: el.pic_url
-    }))
 
-    for (let i = 0; i < regionOption.value.length; i++) {
+    handleRiskTabChange('安全类事项')
-      const el = regionOption.value[i];
+
-      if (el.code == query.campus_id && el.pic_url) {
+    // 先检查缓存
-        backgroundImage.value = el.pic_url
+    const cachedRecords = getCachedRegionOption()
+    let records = cachedRecords
+
+    if (!records || records.length === 0) {
+      // 缓存不存在或已过期，调用接口
+      try {
+        let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
+        records = result.records || []
+
+        if (records && records.length > 0) {
+          // 保存到缓存
+          setCachedRegionOption(records)
+        }
+      } catch (error) {
+        console.error('初始化园区数据失败:', error)
+        records = []
       }
     }
-  }
+
-  // 初始化数据
+    if (records && records.length > 0) {
-  await loadDashboardData()
+      // 更新为新的数据格式
+      regionOption.value = records.map(el => ({
+        name: el.park_name,
+        code: el.park_code,
+        pic_url: el.pic_url
+      }))
+
+      for (let i = 0; i < regionOption.value.length; i++) {
+        const el = regionOption.value[i];
+        if (el.code == query.campus_id && el.pic_url) {
+          backgroundImage.value = el.pic_url
+        }
+      }
+    }
+    // 初始化数据
+    await loadDashboardData()
 
   // 添加周期性动画演示
   dashboardTimerId.value = setInterval(async () => {
-    await loadDashboardData()
+    try {
+      await loadDashboardData()
+    } catch (error) {
+      console.error('定时数据更新失败:', error)
+    }
   }, 2 * 60 * 1000) // 每2分钟更新一次
+  } catch (error) {
+    console.error('页面初始化失败:', error)
+    // 即使出错也要隐藏骨架屏，避免界面一直处于加载状态
+    setTimeout(() => {
+      if (isFirstLoading.value) {
+        isFirstLoading.value = false
+        console.log('因错误隐藏骨架屏')
+      }
+    }, 1000)
+  }
 })
 
 const loadDashboardData = () => {
@@ -785,7 +870,7 @@ const loadDashboardData = () => {
     isFirstLoad.value = false
   }
   // 获取总体概览数据
-  getTableList('generalTotal', query).then(generalTotal => {
+  getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
     if (generalTotal.records && generalTotal.records.length > 0) {
       mockData.totalCount = Number(generalTotal.records[0].totalCount)
       mockData.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
@@ -893,7 +978,7 @@ const loadDashboardData = () => {
   handleTabClick("高危作业")
 
   // 获取风险预警数据
-  getTableList('risk_alert_data', query).then(risk_alert_data => {
+  getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
     if (risk_alert_data.records && risk_alert_data.records.length > 0) {
       mockData.alertData.total = risk_alert_data.records[0].total
       mockData.alertData.processed = risk_alert_data.records[0].processed
@@ -904,7 +989,7 @@ const loadDashboardData = () => {
     console.error('获取风险预警数据失败:', error)
   })
   // 获取风险预警详情数据
-  getTableList('risk_alert_detail', query).then(risk_alert_detail => {
+  getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
     if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
       mockData.alertData.details = risk_alert_detail.records
     }
@@ -913,7 +998,7 @@ const loadDashboardData = () => {
   })
 
   // 获取超期工单数据
-  getTableList('timeout_work_order', query).then(timeout_work_order => {
+  getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
     if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
       mockData.timeoutWorkOrders.total = timeout_work_order.records.length
       mockData.timeoutWorkOrders.details = timeout_work_order.records
@@ -923,7 +1008,7 @@ const loadDashboardData = () => {
   })
 
   // 获取超期工单数据
-  getTableList('park_build_info', query).then(res => {
+  getTableList('park_build_info', query, false, { signal: abortController.signal }).then(res => {
     if (res.records && res.records.length > 0) {
 
     }
@@ -931,11 +1016,22 @@ const loadDashboardData = () => {
     console.error('获取超期工单数据失败:', error)
   })
 
+  // 调用数据处理函数
   handleHiddenDangerPannelData(query)
+
+  // 延迟一段时间等待异步操作完成，然后隐藏骨架屏
+  setTimeout(() => {
+    if (isFirstLoading.value) {
+      isFirstLoading.value = false
+      console.log('隐藏骨架屏')
+    }
+  }, 2000) // 2秒后隐藏骨架屏
 }
 
 
-const handleHiddenDangerPannelData = (query) => {
+const handleHiddenDangerPannelData = async (query) => {
+  const promises = []
+
   let _data = {
     flag: false,
     general: 0,
@@ -955,6 +1051,8 @@ const handleHiddenDangerPannelData = (query) => {
     processing: 0,
     pending: 0
   }
+
+  // 初始化图表
   progressChart.value = echarts.init(progressChartRef.value)
   const width = progressChart.value.getWidth()
   const progressOption = {
@@ -1007,12 +1105,12 @@ const handleHiddenDangerPannelData = (query) => {
   }
   try {
     // 获取隐患排查治理数据
-    getTableList('risk_level_count', query).then(res => {
+    getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
       if (res.records && res.records.length > 0) {
         _data.general = _data.general + Number(res.records[0].general_count)
         _data.major = _data.major + Number(res.records[0].major_count)
         // 获取隐患排查治理数据
-        getTableList('risk_status_count', query).then(res => {
+        getTableList('risk_status_count', query, false, { signal: abortController.signal }).then(res => {
           if (res.records && res.records.length > 0) {
             // 接口返回的已经是百分比，直接使用
             const record = res.records[0]
@@ -1086,13 +1184,13 @@ const handleHiddenDangerPannelData = (query) => {
 
 
     // 获取隐患排查治理数据
-    getTableList('hidden_danger_investigation', query).then(res => {
+    getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
       if (res.records && res.records.length > 0) {
         _data2.general = Number(res.records[0].general)
         _data2.major = Number(res.records[0].major)
 
         // 获取隐患排查治理处理进度数据
-        getTableList('hidden_danger_process_progress', query).then(res => {
+        getTableList('hidden_danger_process_progress', query, false, { signal: abortController.signal }).then(res => {
           // if (res.records && res.records.length > 0) {
           //   _data2.flag = true
           //   _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
@@ -1167,12 +1265,12 @@ const handleTabClick = async (tab: string) => {
       code = "fire_drill"
       code1 = "fire_drill_detail"
 
-      getDangerDetail(query.campus_id).then(res => {
+      getDangerDetail(query.campus_id, { signal: abortController.signal }).then(res => {
         const list = res.records.map((item: any) => ({ description: item.contenttext }))
         dangerList.value = list
       })
 
-      getDangerCount(query.campus_id).then(res => {
+      getDangerCount(query.campus_id, { signal: abortController.signal }).then(res => {
         unfinishedCount.value = res.records[0].wks
         inProgressCount.value = res.records[0].jxz
         finishedCount.value = res.records[0].ywc
@@ -1183,7 +1281,7 @@ const handleTabClick = async (tab: string) => {
       code = 'security_training_count'
       code1 = 'security_training_detail'
 
-      const res = await getExamDetail(query.campus_id)
+      const res = await getExamDetail(query.campus_id, { signal: abortController.signal })
 
       examList.value = res.records
 
@@ -1192,7 +1290,7 @@ const handleTabClick = async (tab: string) => {
       code = 'security_training_count'
       code1 = 'security_training_detail'
 
-      const res1 = await getDrillDetail(query.campus_id)
+      const res1 = await getDrillDetail(query.campus_id, { signal: abortController.signal })
 
       drillList.value = res1.records
 
@@ -1340,6 +1438,9 @@ const updateTime = (): void => {
 }
 
 onUnmounted(() => {
+  // 取消所有正在进行的请求
+  abortController.abort()
+
   if (dashboardTimerId.value) {
     clearInterval(dashboardTimerId.value)
     dashboardTimerId.value = null
@@ -1743,17 +1844,25 @@ onUnmounted(() => {
             .top-card-right-item {
               display: flex;
               align-items: center;
-              column-gap: 5px;
               padding: 0 10px;
               font-size: 0.7rem;
               color: #fff;
 
+              > :first-child {
+                display: flex;
+                align-items: center;
+                column-gap: 5px;
+                width: 100px;
+              }
+
               .type-number-wrapper {
                 display: flex;
                 align-items: center;
+                justify-content: flex-start;
                 gap: 2px;
                 font-size: 0.8rem;
                 color: #fff;
+                margin-left: 8px;
 
                 .type-number {
                   display: inline-block;
@@ -1767,6 +1876,10 @@ onUnmounted(() => {
                   border-radius: 2px;
                 }
               }
+
+              > span:last-child {
+                margin-left: 4px;
+              }
             }
           }
         }
@@ -2040,4 +2153,44 @@ onUnmounted(() => {
     }
   }
 }
+
+// 骨架屏样式
+.skeleton-pulse {
+  animation: skeleton-loading-company 1.5s ease-in-out infinite;
+  background-color: #444;
+  border-radius: 4px;
+}
+
+.skeleton-number-wrapper {
+  display: flex;
+  gap: 2px;
+}
+
+.skeleton-number {
+  width: 14px;
+  height: 24px;
+}
+
+.skeleton-type-number {
+  width: 14px;
+  height: 16px;
+}
+
+.skeleton-chart {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+
+@keyframes skeleton-loading-company {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 </style>

src/views/screen/components/AlertList.vue

@@ -5,32 +5,59 @@
       <img width="50%" src="@/assets/images/line_1.png" />
     </div>
     <div class="list" :style="{ maxHeight: maxHeight }">
-      <!-- 表格头部 -->
+      <!-- 骨架屏 -->
-      <div v-if="tableTitle && tableTitle.length > 0" class="table-header">
+      <template v-if="props.loading">
-        <div class="header-item" v-for="(title, index) in tableTitle" :key="index">
+        <!-- 表格模式骨架屏 -->
-          {{ title.name }}
-        </div>
-      </div>
-      
-      <div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
-        <!-- 表格模式 -->
         <template v-if="tableTitle && tableTitle.length > 0">
-          <div @click="handleItemClick(item)" class="table-row cursor-pointer" v-for="(item, index) in listData" :key="`table-${index}`"  @mouseenter="handleMouseEnter">
+          <div class="table-header">
-            <div class="table-cell" v-for="(title, cellIndex) in tableTitle" :key="`cell-${index}-${cellIndex}`">
+            <div class="header-item skeleton-pulse" v-for="(title, index) in tableTitle" :key="`header-skeleton-${index}`"></div>
-              {{ item[title.key] || '-' }}
+          </div>
+          <div class="list-wrapper">
+            <div class="table-row skeleton-row" v-for="i in 10" :key="`table-skeleton-${i}`">
+              <div class="table-cell skeleton-pulse" v-for="(title, cellIndex) in tableTitle" :key="`cell-skeleton-${i}-${cellIndex}`"></div>
             </div>
           </div>
         </template>
-        
+
-        <!-- 列表模式 -->
+        <!-- 列表模式骨架屏 -->
         <template v-else>
-          <div @click="handleItemClick(item)" class="list-item cursor-pointer" v-for="(item, index) in listData" :key="`list-${index}`"  @mouseenter="handleMouseEnter">
+          <div class="list-wrapper">
-            <span class="alert-text" :class="[{ error: item.alarm_level_code == 'severity' }, { warn: item.alarm_level_code == 'major' }]">
+            <div class="list-item skeleton-item" v-for="i in 10" :key="`list-skeleton-${i}`">
-              {{ (index + 1) }} {{ item.description }}
+              <div class="alert-text skeleton-pulse"></div>
-            </span>
+            </div>
           </div>
         </template>
-      </div>
+      </template>
+
+      <!-- 实际内容 -->
+      <template v-else>
+        <!-- 表格头部 -->
+        <div v-if="tableTitle && tableTitle.length > 0" class="table-header">
+          <div class="header-item" v-for="(title, index) in tableTitle" :key="index">
+            {{ title.name }}
+          </div>
+        </div>
+
+        <div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
+          <!-- 表格模式 -->
+          <template v-if="tableTitle && tableTitle.length > 0">
+            <div @click="handleItemClick(item)" class="table-row cursor-pointer" v-for="(item, index) in listData" :key="`table-${index}`"  @mouseenter="handleMouseEnter">
+              <div class="table-cell" v-for="(title, cellIndex) in tableTitle" :key="`cell-${index}-${cellIndex}`">
+                {{ item[title.key] || '-' }}
+              </div>
+            </div>
+          </template>
+
+          <!-- 列表模式 -->
+          <template v-else>
+            <div @click="handleItemClick(item)" class="list-item cursor-pointer" v-for="(item, index) in listData" :key="`list-${index}`"  @mouseenter="handleMouseEnter">
+              <span class="alert-text" :class="[{ error: item.alarm_level_code == 'severity' }, { warn: item.alarm_level_code == 'major' }]">
+                {{ (index + 1) }} {{ item.description }}
+              </span>
+            </div>
+          </template>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -51,6 +78,7 @@ interface TableTitle {
 }
 
 interface Props {
+  loading?: boolean
   title?: string
   listData: AlertItem[]
   maxHeight?: string
@@ -313,4 +341,31 @@ onUnmounted(() => {
     }
   }
 }
+
+// 骨架屏样式
+.skeleton-pulse {
+  animation: skeleton-loading-alertlist 1.5s ease-in-out infinite;
+  background-color: #444;
+  border-radius: 4px;
+}
+
+.skeleton-row {
+  margin-bottom: 4px;
+}
+
+.skeleton-item {
+  margin-bottom: 4px;
+}
+
+@keyframes skeleton-loading-alertlist {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 </style>

src/views/screen/components/HeaderSelector.vue

@@ -0,0 +1,398 @@
+<template>
+  <div :class="['header-left', `theme-${theme}`]">
+    <!-- 返回按钮 - PNG图片类型（暗色系主题使用，保持原样） -->
+    <img
+      v-if="backButtonType === 'image' && showBackButton && theme === 'dark'"
+      class="back-img"
+      @click="handleBack"
+      src="@/assets/images/screen/back_image.png"
+    />
+    <!-- 返回按钮 - SVG图片类型（亮色系主题使用，支持主题颜色） -->
+    <svg
+      v-if="backButtonType === 'image' && showBackButton && theme === 'light'"
+      class="back-svg"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="handleBack"
+    >
+      <path
+        d="M620.8 348.16H276.48l102.4-102.4c10.24-10.24 10.24-25.6 0-35.84-10.24-10.24-25.6-10.24-35.84 0L197.12 354.56c-5.12 5.12-7.68 11.52-7.68 17.92 0 6.4 2.56 12.8 7.68 17.92l144.64 144.64c10.24 10.24 25.6 10.24 35.84 0 10.24-10.24 10.24-25.6 0-35.84L277.76 399.36h343.04C716.8 399.36 793.6 476.16 793.6 572.16S716.8 744.96 620.8 744.96H358.4c-14.08 0-25.6 11.52-25.6 25.6s11.52 25.6 25.6 25.6h262.4a223.4368 223.4368 0 0 0 224-224A223.4368 223.4368 0 0 0 620.8 348.16z"
+        :fill="svgFillColor"
+      />
+    </svg>
+    <!-- 返回按钮 - 图标类型 -->
+    <el-icon
+      v-if="backButtonType === 'icon' && showBackButton"
+      class="back-arrow"
+      @click="handleBack"
+    >
+      <ArrowLeft />
+    </el-icon>
+    <!-- 文本按钮/显示 -->
+    <div
+      v-if="displayText"
+      :class="[
+        'back-button',
+        {
+          'clickable': clickable,
+          'non-clickable': !clickable
+        }
+      ]"
+      @click="handleTextClick"
+    >
+      {{ displayText }}
+      <span v-if="showSelectorIndicator">···</span>
+    </div>
+  </div>
+
+  <!-- 区域/园区选择弹窗 -->
+  <RegionSelector
+    v-model="selectorVisible"
+    :modelSelected="selectedValue"
+    :regions="options"
+    @change="handleSelectorChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ArrowLeft } from '@element-plus/icons-vue'
+import RegionSelector from './RegionSelector.vue'
+import { getTableList } from '@/api/design/report'
+
+interface OptionItem {
+  name: string
+  code: string
+}
+
+interface Props {
+  // 返回按钮类型：'image' | 'icon' | 'none'
+  backButtonType?: 'image' | 'icon' | 'none'
+  // 是否显示返回按钮
+  showBackButton?: boolean
+  // 返回按钮点击事件
+  onBack?: () => void
+  // 显示的文本
+  displayText?: string
+  // 文本是否可点击
+  clickable?: boolean
+  // 是否显示选择器指示器（···）
+  showSelectorIndicator?: boolean
+  // 选择器类型：'region' | 'park' | 'none'
+  selectorType?: 'region' | 'park' | 'none'
+  // 选择器选项（如果不提供，会根据 selectorType 自动获取）
+  options?: OptionItem[]
+  // 当前选中的值
+  selectedValue?: string
+  // 选择器变化事件
+  onSelectorChange?: (item: OptionItem) => void
+  // 区域代码（用于获取园区列表）
+  regionCode?: string
+  // 主题：'light' | 'dark'
+  theme?: 'light' | 'dark'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  backButtonType: 'none',
+  showBackButton: false,
+  clickable: true,
+  showSelectorIndicator: false,
+  selectorType: 'none',
+  options: () => [],
+  selectedValue: '',
+  regionCode: '',
+  theme: 'dark'
+})
+
+const emit = defineEmits<{
+  selectorChange: [item: OptionItem]
+}>()
+
+const router = useRouter()
+
+const selectorVisible = ref(false)
+const options = ref<OptionItem[]>(props.options || [])
+
+// 根据主题计算 SVG 填充颜色
+const svgFillColor = computed(() => {
+  return props.theme === 'light' ? '#409eff' : '#ffffff'
+})
+
+// 监听 props.options 的变化
+watch(() => props.options, (newOptions) => {
+  if (newOptions && newOptions.length > 0) {
+    options.value = newOptions
+  }
+}, { immediate: true, deep: true })
+
+// 缓存工具函数
+const CACHE_KEY = 'shared_regionOption_cache'
+
+interface CacheData {
+  records: any[]
+  timestamp: number
+}
+
+const getCachedRegionOption = (): any[] | null => {
+  try {
+    const cached = sessionStorage.getItem(CACHE_KEY)
+    if (cached) {
+      const cacheData: CacheData = JSON.parse(cached)
+      return cacheData.records
+    }
+  } catch (error) {
+    console.error('读取缓存失败:', error)
+    sessionStorage.removeItem(CACHE_KEY)
+  }
+  return null
+}
+
+const setCachedRegionOption = (records: any[]) => {
+  try {
+    const cacheData: CacheData = {
+      records,
+      timestamp: Date.now()
+    }
+    sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
+    console.log('regionOption 数据已缓存')
+  } catch (error) {
+    console.error('保存缓存失败:', error)
+  }
+}
+
+// 初始化选项数据 - 统一从内部获取，不再依赖外部传入
+const initOptions = async () => {
+  // 如果外部传入了 options，优先使用（保留兼容性）
+  if (props.options && props.options.length > 0) {
+    options.value = props.options
+    return
+  }
+
+  if (props.selectorType === 'none') {
+    return
+  }
+
+  try {
+    // 先检查缓存
+    const cachedRecords = getCachedRegionOption()
+    let records = cachedRecords
+
+    if (!records || records.length === 0) {
+      // 缓存不存在或已过期，调用接口
+      const result = await getTableList('park_info_list')
+      records = result.records || []
+
+      if (records && records.length > 0) {
+        // 保存到缓存
+        setCachedRegionOption(records)
+      }
+    }
+
+    if (records && records.length > 0) {
+      if (props.selectorType === 'region') {
+        // 区域选择：去重region字段
+        const regionMap = new Map()
+        records.forEach((el: any) => {
+          if (!regionMap.has(el.region)) {
+            regionMap.set(el.region, {
+              name: el.region,
+              code: el.region_id
+            })
+          }
+        })
+        options.value = Array.from(regionMap.values())
+      } else if (props.selectorType === 'park') {
+        // 园区选择：根据regionCode过滤，去重park_name字段
+        if (!props.regionCode) {
+          // 如果 regionCode 还没有值，等待它被设置
+          console.log('等待 regionCode 设置...')
+          return
+        }
+        const parkMap = new Map()
+        const filteredRecords = records.filter((el: any) => el.region_id == props.regionCode)
+        if (filteredRecords.length === 0) {
+          console.warn(`未找到 regionCode 为 ${props.regionCode} 的园区数据`)
+        }
+        filteredRecords.forEach((el: any) => {
+          if (!parkMap.has(el.park_name)) {
+            parkMap.set(el.park_name, {
+              name: el.park_name,
+              code: el.park_code
+            })
+          }
+        })
+        options.value = Array.from(parkMap.values())
+        console.log('园区选项已更新:', options.value)
+      }
+    }
+  } catch (error) {
+    console.error('初始化选项数据失败:', error)
+  }
+}
+
+// 处理返回按钮点击
+const handleBack = () => {
+  if (props.onBack) {
+    props.onBack()
+  } else {
+    router.back()
+  }
+}
+
+// 处理文本点击
+const handleTextClick = () => {
+  if (!props.clickable) {
+    return
+  }
+
+  if (props.selectorType !== 'none') {
+    selectorVisible.value = true
+  }
+}
+
+// 处理选择器变化
+const handleSelectorChange = (item: OptionItem) => {
+  if (props.onSelectorChange) {
+    props.onSelectorChange(item)
+  }
+  // 同时发出事件，供父组件使用 @selector-change 监听
+  emit('selectorChange', item)
+}
+
+onMounted(() => {
+  initOptions()
+})
+
+// 监听 regionCode 的变化，当它变化时重新初始化选项（用于园区选择）
+watch(() => props.regionCode, (newRegionCode) => {
+  if (props.selectorType === 'park' && newRegionCode) {
+    initOptions()
+  }
+}, { immediate: false })
+</script>
+
+<style scoped lang="scss">
+.header-left {
+  display: flex;
+  padding-left: 1vw;
+  line-height: 80px;
+  flex: 1;
+  align-items: center;
+
+  .back-img {
+    height: 3vh;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .back-svg {
+    height: 3vh;
+    width: auto;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .back-arrow {
+    font-size: 20px;
+    color: #409eff;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      color: #79bbff;
+      transform: translateX(-2px);
+    }
+  }
+
+  .back-button {
+    display: inline-flex;
+    height: 2vh;
+    min-width: 6vw;
+    padding: 4px 16px;
+    margin-left: 0.5vw;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+    align-items: center;
+    justify-content: space-between;
+    color: white;
+
+    &.clickable {
+      cursor: pointer;
+    }
+
+    &.non-clickable {
+      cursor: default;
+    }
+
+    span {
+      font-size: 18px;
+      line-height: 1;
+    }
+  }
+
+  // 暗色系主题（默认）
+  &.theme-dark {
+    .back-button {
+      background: rgb(13 24 84 / 80%);
+      border: 1px solid rgb(59 130 246 / 40%);
+
+      &:hover {
+        background: rgb(59 130 246 / 30%);
+        border-color: rgb(59 130 246 / 60%);
+      }
+    }
+  }
+
+  // 亮色系主题 - 只改颜色，保持UI结构
+  &.theme-light {
+    .back-button {
+      background: #409eff;
+      border: 1px solid #e5e7eb;
+
+      &:hover {
+        background: #79bbff;
+        border-color: #cbd5e1;
+      }
+    }
+  }
+}
+
+/* 响应式设计 */
+@media (width <= 1024px) {
+  .header-left .back-button {
+    min-width: 8vw;
+    font-size: 0.8rem;
+  }
+}
+
+@media (width <= 768px) {
+  .header-left {
+    line-height: 70px;
+
+    .back-button {
+      min-width: 12vw;
+      padding: 3px 12px;
+      font-size: 0.7rem;
+    }
+  }
+}
+
+@media (width <= 480px) {
+  .header-left {
+    line-height: 60px;
+
+    .back-button {
+      min-width: 15vw;
+      padding: 2px 10px;
+      font-size: 0.65rem;
+    }
+  }
+}
+</style>
+

src/views/screen/components/HiddenDangerPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="center-container">
+  <div class="center-container" :data-window-width="windowWidth">
     <div class="center-content">
       <!-- 隐患排查治理 这个标题需要隐藏 2025-10-31 -->
       <span class="title"></span>
@@ -10,11 +10,13 @@
       <div class="type-wrapper">
         <div class="type-item">
           <span class="type-btn">重大</span>
-          <span class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.major || 0 }}</span>
+          <div style="width: 20px; height: 20px" v-if="props.loading" class="type-num skeleton-pulse"></div>
+          <span v-else class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.major || 0 }}</span>
         </div>
         <div class="type-item">
           <span class="type-btn active">一般</span>
-          <span class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
+          <div style="width: 20px; height: 20px" v-if="props.loading" class="type-num skeleton-pulse"></div>
+          <span v-else class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
         </div>
       </div>
 
@@ -30,7 +32,8 @@
       </div>
       <div class="echart-wrapper">
         <div class="lf-rt">
-          <Echart :options="progressChartOption" class="progress-chart" height="80%" />
+          <div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div>
+          <Echart v-else :options="progressChartOption" class="progress-chart" height="80%" />
           <div class="progress-legend">
             <div class="legend-item"><span class="dot red"></span>已逾期</div>
             <div class="legend-item"><span class="dot green"></span>已处理</div>
@@ -41,39 +44,45 @@
           </div>
         </div>
         <div class="lf-rt">
-          <Echart :options="top3TypesChartOption" class="progress-chart" height="80%" />
+          <div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div>
+          <Echart v-else :options="top3TypesChartOption" class="progress-chart" height="80%" />
           <div class="progress-legend-column">
             <div class="legend-item">
               <span class="dot blue"></span>
-              <span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
+              <span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
             </div>
             <div class="legend-item">
               <span class="dot green"></span>
-              <span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
+              <span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
             </div>
             <div class="legend-item">
               <span class="dot yellow"></span>
-              <span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
+              <span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
             </div>
           </div>
         </div>
       </div>
       <div class="safe-wrapper">
         <span class="safe-title">
-          <img width="22" style="margin: 3px 5px 0 0" src="@/assets/images/ybp_icon.png" />
+          <img class="safe-icon" src="@/assets/images/ybp_icon.png" />
-          安全指数:<p title="安全指数 = 逾期隐患百分比 × 60% + 安全考核通过率 × 20% + 安全培训完成率 × 20%"></p>
+          <span class="safe-title-text">安全指数:</span>
+          <p class="safe-tooltip" title="安全指数 = (1-逾期隐患百分比) × 40% + 安全考核通过率 × 10% + 安全培训完成率 × 10%
+   + 安全类工单完成率 × 20%  +  工程类工单完成率 × 20%"></p>
         </span>
-        <span class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
+        <span v-if="props.loading" class="pending-count skeleton-pulse"></span>
+        <span v-else class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import echarts from '@/plugins/echarts'
 
 
 interface Props {
+  loading?: boolean
   hiddenDangerData?: {
     general: number
     major: number
@@ -94,6 +103,116 @@ interface Props {
 
 const props = defineProps<Props>()
 
+// 窗口尺寸响应式变量，用于强制响应式更新
+const windowWidth = ref(window.innerWidth)
+const windowHeight = ref(window.innerHeight)
+
+// 防抖函数
+let resizeTimer: ReturnType<typeof setTimeout> | null = null
+
+// 手动触发 ECharts 图表 resize
+const resizeEcharts = () => {
+  nextTick(() => {
+    // 查找所有 ECharts 容器并触发 resize
+    // Echart 组件会在内部创建 div，class 包含 progress-chart
+    const chartContainers = document.querySelectorAll('.center-container .progress-chart')
+    chartContainers.forEach((container) => {
+      try {
+        const chartInstance = echarts.getInstanceByDom(container as HTMLElement)
+        if (chartInstance) {
+          chartInstance.resize()
+        }
+      } catch (error) {
+        console.warn('ECharts resize 失败:', error)
+      }
+    })
+    
+    // 如果上面的选择器找不到，尝试更通用的方式
+    if (chartContainers.length === 0) {
+      const allContainers = document.querySelectorAll('.center-container [class*="echart"]')
+      allContainers.forEach((container) => {
+        try {
+          const chartInstance = echarts.getInstanceByDom(container as HTMLElement)
+          if (chartInstance) {
+            chartInstance.resize()
+          }
+        } catch (error) {
+          // 忽略错误
+        }
+      })
+    }
+  })
+}
+
+// 监听窗口尺寸变化
+const handleResize = () => {
+  // 立即更新窗口尺寸（用于响应式绑定）
+  windowWidth.value = window.innerWidth
+  windowHeight.value = window.innerHeight
+  
+  // 立即触发一次 ECharts resize（快速响应）
+  resizeEcharts()
+  
+  // 清除之前的定时器
+  if (resizeTimer) {
+    clearTimeout(resizeTimer)
+  }
+  
+  // 使用防抖，延迟执行样式重新计算（优化性能）
+  resizeTimer = setTimeout(() => {
+    // 强制触发样式重新计算 - 通过读取 offsetHeight 触发重排
+    const container = document.querySelector('.center-container') as HTMLElement
+    if (container) {
+      // 触发重排，强制浏览器重新计算样式
+      void container.offsetHeight
+    }
+    // 再次触发 ECharts resize（确保完全更新）
+    resizeEcharts()
+  }, 100) // 100ms 防抖延迟
+}
+
+// 全屏切换处理函数（立即执行，不使用防抖）
+const handleFullscreenChange = () => {
+  // 立即更新窗口尺寸
+  windowWidth.value = window.innerWidth
+  windowHeight.value = window.innerHeight
+  // 延迟一点确保 DOM 已更新
+  setTimeout(() => {
+    resizeEcharts()
+    // 强制触发样式重新计算
+    const container = document.querySelector('.center-container') as HTMLElement
+    if (container) {
+      void container.offsetHeight
+    }
+  }, 150) // 稍微延迟确保全屏切换完成
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  // 监听全屏变化 - 立即执行，不使用防抖
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+  document.addEventListener('mozfullscreenchange', handleFullscreenChange)
+  document.addEventListener('MSFullscreenChange', handleFullscreenChange)
+  
+  // 组件挂载时，如果已有数据，立即更新图表
+  if (props.hiddenDangerData?.progress) {
+    console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
+    refreshProcessCharts(props.hiddenDangerData.progress)
+  }
+})
+
+onUnmounted(() => {
+  if (resizeTimer) {
+    clearTimeout(resizeTimer)
+  }
+  window.removeEventListener('resize', handleResize)
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+  document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
+  document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
+})
+
 // 图表引用
 const progressChartOption = ref<any>({
   backgroundColor: 'transparent',
@@ -201,17 +320,6 @@ const handleMajorClick = () => {
   window.open('http://10.0.64.20/pms/workorder-list', '_blank')
 }
 
-watch(() => props.hiddenDangerData?.progress, (newVal, oldVal) => {
-  console.log('HiddenDangerPanel watch 触发，progress 数据:', newVal, '旧数据:', oldVal)
-  // 确保每次数据变化都更新图表
-  if (newVal) {
-    refreshProcessCharts(newVal)
-  } else {
-    // 即使数据为空，也要显示空图表
-    refreshProcessCharts(null)
-  }
-}, { deep: true, immediate: true })
-
 // 辅助函数：安全地将值转换为数字，处理 NaN 和字符串 "NaN" 的情况
 const safeNumber = (val: any): number => {
   if (val === null || val === undefined || val === '' || val === 'NaN') {
@@ -309,11 +417,6 @@ const refreshProcessCharts = (process): void => {
   // chartKey.value = Date.now()
 }
 
-
-watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
-  refreshTop3TypesCharts(newVal)
-}, { deep: true })
-
 // 更新图表数据
 const refreshTop3TypesCharts = (top3Types): void => {
   if (!top3Types || !Array.isArray(top3Types) || top3Types.length === 0) {
@@ -335,25 +438,54 @@ const refreshTop3TypesCharts = (top3Types): void => {
   top3TypesChartOption.value = option
 }
 
-onMounted(() => {
+watch(() => props.hiddenDangerData?.progress, (newVal, oldVal) => {
-  // 组件挂载时，如果已有数据，立即更新图表
+  console.log('HiddenDangerPanel watch 触发，progress 数据:', newVal, '旧数据:', oldVal)
-  if (props.hiddenDangerData?.progress) {
+  // 确保每次数据变化都更新图表
-    console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
+  if (newVal) {
-    refreshProcessCharts(props.hiddenDangerData.progress)
+    refreshProcessCharts(newVal)
+  } else {
+    // 即使数据为空，也要显示空图表
+    refreshProcessCharts(null)
   }
-})
+}, { deep: true, immediate: true })
+
+watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
+  refreshTop3TypesCharts(newVal)
+}, { deep: true })
 </script>
 
 <style scoped lang="scss">
 /* 响应式设计 */
-@media (width <=1200px) {
+@media (max-width: 1200px) {
   .center-container {
     width: 60vh;
     height: 60vh;
+
+    .center-content {
+      .echart-wrapper {
+        .lf-rt {
+          .progress-legend-column {
+            padding: 0 4px;
+
+            .legend-item {
+              .legend-text {
+                font-size: 0.68rem;
+              }
+            }
+          }
+        }
+      }
+
+      .safe-wrapper {
+        .safe-title {
+          font-size: 0.75rem;
+        }
+      }
+    }
   }
 }
 
-@media (width <=1024px) {
+@media (max-width: 1024px) {
   .center-container {
     width: 55vh;
     height: 55vh;
@@ -375,11 +507,34 @@ onMounted(() => {
           font-size: 0.65rem;
         }
       }
+
+      .echart-wrapper {
+        .lf-rt {
+          .progress-legend-column {
+            padding: 0 3px;
+
+            .legend-item {
+              .legend-text {
+                font-size: 0.65rem;
+              }
+            }
+          }
+        }
+      }
+
+      .safe-wrapper {
+        .safe-title {
+          .safe-icon {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
     }
   }
 }
 
-@media (width <=768px) {
+@media (max-width: 768px) {
   .center-container {
     top: 60%;
     width: 50vh;
@@ -423,16 +578,45 @@ onMounted(() => {
       .echart-wrapper {
         width: 90%;
 
-        .lf-rt .progress-legend .legend-item {
+        .lf-rt {
-          font-size: 0.6rem;
+          .progress-legend .legend-item {
+            font-size: 0.6rem;
+          }
+
+          .progress-legend-column {
+            padding: 0 2px;
+
+            .legend-item {
+              gap: 3px;
+
+              .legend-text {
+                font-size: 0.6rem;
+              }
+            }
+          }
         }
       }
 
       .safe-wrapper {
         width: 50%;
+        flex-direction: column;
+        gap: 0.5vh;
 
         .safe-title {
           font-size: 0.7rem;
+          margin-left: 0;
+          justify-content: center;
+
+          .safe-icon {
+            width: 18px;
+            height: 18px;
+            margin: 2px 3px 0 0;
+          }
+
+          .safe-tooltip {
+            width: 15px;
+            height: 15px;
+          }
         }
 
         .pending-count {
@@ -443,7 +627,7 @@ onMounted(() => {
   }
 }
 
-@media (width <=480px) {
+@media (max-width: 480px) {
   .center-container {
     top: 65%;
     width: 45vh;
@@ -470,13 +654,43 @@ onMounted(() => {
 
       .echart-wrapper {
         width: 95%;
+
+        .lf-rt {
+          .progress-legend-column {
+            padding: 0 1px;
+            gap: 6px;
+
+            .legend-item {
+              gap: 2px;
+
+              .legend-text {
+                font-size: 0.55rem;
+              }
+            }
+          }
+        }
       }
 
       .safe-wrapper {
         width: 60%;
+        flex-direction: column;
+        gap: 0.3vh;
 
         .safe-title {
           font-size: 0.65rem;
+          margin-left: 0;
+          justify-content: center;
+
+          .safe-icon {
+            width: 16px;
+            height: 16px;
+            margin: 2px 2px 0 0;
+          }
+
+          .safe-tooltip {
+            width: 14px;
+            height: 14px;
+          }
         }
 
         .pending-count {
@@ -486,8 +700,11 @@ onMounted(() => {
     }
   }
 }
-p{width:17px;    height:17px;   background-color:rgb(125, 125, 152);    border-radius:50%;    text-align:center;    }
+.safe-tooltip:before {
-p:before{content:'?';    color:yellow;    font-weight: bold;}
+  content: '?';
+  color: yellow;
+  font-weight: bold;
+}
 .center-container {
   position: fixed;
   top: 55%;
@@ -619,14 +836,19 @@ p:before{content:'?';    color:yellow;    font-weight: bold;}
           flex-direction: column;
           display: flex;
           justify-content: center;
-          align-items: center;
+          align-items: flex-start;
           gap: 8px;
+          width: 100%;
+          padding: 0 5px;
+          box-sizing: border-box;
 
           .legend-item {
             display: flex;
-            width: 60%;
+            width: 100%;
+            max-width: 100%;
             align-items: center;
             gap: 4px;
+            min-width: 0; // 允许 flex 子元素收缩
 
             .legend-text {
               overflow: hidden;
@@ -634,6 +856,7 @@ p:before{content:'?';    color:yellow;    font-weight: bold;}
               text-overflow: ellipsis;
               white-space: nowrap;
               flex: 1;
+              min-width: 0; // 关键：允许文本收缩
             }
           }
         }
@@ -643,15 +866,47 @@ p:before{content:'?';    color:yellow;    font-weight: bold;}
     .safe-wrapper {
       display: flex;
       width: 40%;
+      min-width: 0; // 允许收缩
       height: 20%;
       margin-bottom: 5%;
       align-items: center;
       column-gap: 1vw;
+      flex-wrap: wrap; // 允许换行
+      justify-content: center;
 
       .safe-title {
         display: flex;
         align-items: center;
         margin-left: 1vw;
+        flex-wrap: wrap;
+        gap: 2px;
+        min-width: 0;
+        flex: 1;
+        max-width: 100%;
+
+        .safe-icon {
+          width: 22px;
+          height: 22px;
+          margin: 3px 5px 0 0;
+          flex-shrink: 0;
+        }
+
+        .safe-title-text {
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+
+        .safe-tooltip {
+          width: 17px;
+          height: 17px;
+          background-color: rgb(125, 125, 152);
+          border-radius: 50%;
+          text-align: center;
+          flex-shrink: 0;
+          margin: 0;
+          padding: 0;
+          display: inline-block;
+        }
       }
 
       .pending-count {
@@ -659,6 +914,7 @@ p:before{content:'?';    color:yellow;    font-weight: bold;}
         font-size: 1.6rem;
         font-weight: 500;
         color: yellow;
+        flex-shrink: 0;
       }
     }
   }
@@ -686,4 +942,32 @@ p:before{content:'?';    color:yellow;    font-weight: bold;}
 .dot.blue {
   background-color: #3b82f6;
 }
+
+// 骨架屏动画
+.skeleton-pulse {
+  animation: skeleton-loading-hiddendanger 1.5s ease-in-out infinite;
+  background-color: #444;
+  border-radius: 4px;
+}
+
+// 圆形饼图骨架屏
+.skeleton-chart-circle {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  margin: 30px auto 50px auto;
+  background-color: #444;
+}
+
+@keyframes skeleton-loading-hiddendanger {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 </style>

src/views/screen/components/HighRiskAlertPanel.vue

@@ -4,29 +4,37 @@
     <div>
       <img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
     </div>
+    <!-- 骨架屏 -->
+
+    <!-- 实际内容 -->
     <div class="tip-container">
       <div class="tip-image">
         <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
-        <span class="number">{{ alertData?.total || 0 }}</span>
+        <div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
+        <span v-else class="number">{{ alertData?.total || 0 }}</span>
       </div>
       <img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
       <div class="tip-content">
         <div class="col-item">
           <img src="@/assets/images/screen/warning_img.png" width="23" />
           <span>告警总数</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
         </div>
         <div class="col-item">
           <span>已处理</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
         </div>
         <div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
           <span>待处理</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
         </div>
         <div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
           <span>处理中</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
         </div>
       </div>
     </div>
@@ -45,7 +53,7 @@
         </div>
       </div>
     </div> -->
-    <AlertList style="margin-right: 1vw;" title="告警详情" :list-data="alertDetails" :linkUrl="linkUrl"></AlertList>
+    <AlertList style="margin-right: 1vw;" title="告警详情" :list-data="alertDetails" :linkUrl="linkUrl" :loading="props.loading"></AlertList>
   </div>
 </template>
 
@@ -73,6 +81,7 @@ interface Props {
   alertDetails?: AlertItem[]
   sourceIndex?: number
   linkUrl?: string
+  loading?: boolean
 }
 
 // 默认值
@@ -84,7 +93,8 @@ const props = withDefaults(defineProps<Props>(), {
     processing: 0
   }),
   alertDetails: () => [],
-  sourceIndex: 1
+  sourceIndex: 1,
+  loading: false
 })
 </script>
 
@@ -265,5 +275,104 @@ const props = withDefaults(defineProps<Props>(), {
       }
     }
   }
+
+  // 骨架屏样式
+  .skeleton-container {
+    .skeleton-tip-container {
+      position: relative;
+      width: 100%;
+      height: 70px;
+
+      .skeleton-tip-image {
+        position: absolute;
+        top: -5px;
+        right: 10px;
+        z-index: 2;
+
+        .skeleton-circle {
+          width: 80px;
+          height: 80px;
+          background-color: #3a3a3a;
+          border-radius: 50%;
+        }
+
+        .skeleton-number {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 30px;
+          height: 20px;
+          background-color: #3a3a3a;
+          border-radius: 4px;
+        }
+      }
+
+      .skeleton-bg {
+        width: 100%;
+        height: 70px;
+        background-color: #3a3a3a;
+        border-radius: 4px;
+      }
+
+      .skeleton-tip-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        padding: 8px 15px;
+
+        .skeleton-col-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .skeleton-icon {
+            width: 23px;
+            height: 23px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+
+          .skeleton-text {
+            flex: 1;
+            height: 16px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+
+          .skeleton-value {
+            width: 40px;
+            height: 18px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  // 骨架屏动画
+  .skeleton-pulse {
+    animation: skeleton-loading-highrisk 1.5s ease-in-out infinite;
+    background-color: #444;
+    border-radius: 4px;
+  }
+
+  @keyframes skeleton-loading-highrisk {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 </style>

src/views/screen/components/OverviewPanel.vue

@@ -3,7 +3,34 @@
     <div class="panel-title">人员管理</div>
     <img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
 
-    <div class="top-card">
+    <!-- 骨架屏 -->
+    <div v-if="props.loading" class="skeleton-container">
+      <div class="skeleton-card">
+        <div class="skeleton-left">
+          <div class="skeleton-icon skeleton-pulse"></div>
+          <div class="skeleton-text skeleton-pulse"></div>
+          <div class="skeleton-numbers">
+            <div class="skeleton-number skeleton-pulse" v-for="i in 6" :key="i"></div>
+          </div>
+          <div class="skeleton-text skeleton-pulse"></div>
+        </div>
+        <div class="skeleton-right">
+          <div class="skeleton-item" v-for="i in 3" :key="i">
+            <div class="skeleton-row">
+              <div class="skeleton-icon-small skeleton-pulse"></div>
+              <div class="skeleton-text skeleton-pulse"></div>
+            </div>
+            <div class="skeleton-numbers">
+              <div class="skeleton-number-small skeleton-pulse" v-for="j in 4" :key="j"></div>
+            </div>
+            <div class="skeleton-text skeleton-pulse"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 实际内容 -->
+    <div v-else class="top-card">
       <div class="top-card-left">
         <div>
           <img width="33px" src="@/assets/images/1_224520_821.png" />
@@ -19,9 +46,11 @@
 
       <div class="top-card-right">
         <div class="top-card-right-item">
-          <img width="18px" src="@/assets/images/v2_rel0n8.png" />
+          <div>
-          <span>正式员工</span>
+            <img width="18px" src="@/assets/images/v2_rel0n8.png" />
-          <div class="type-number-wrapper" style="margin-left: 2vw">
+            <span>正式员工</span>
+          </div>
+          <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
             <span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
               {{ digit }}
             </span>
@@ -30,9 +59,11 @@
         </div>
 
         <div class="top-card-right-item">
-          <img width="18px" src="@/assets/images/v2_rel0n23.png" />
+          <div>
-          <span>外协人员</span>
+            <img width="18px" src="@/assets/images/v2_rel0n23.png" />
-          <div class="type-number-wrapper" style="margin-left: 1vw">
+            <span>外协人员</span>
+          </div>
+          <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
             <span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
               {{ digit }}
             </span>
@@ -41,9 +72,11 @@
         </div>
 
         <div class="top-card-right-item">
-          <img width="18px" src="@/assets/images/24508_654.png" />
+          <div>
-          <span>访客</span>
+            <img width="18px" src="@/assets/images/24508_654.png" />
-          <div class="type-number-wrapper">
+            <span>访客</span>
+          </div>
+          <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
             <span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
               {{ digit }}
             </span>
@@ -58,6 +91,7 @@
         <span>各园区统计</span>
         <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
       </div>
+      <!-- <div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div> -->
       <Echart :options="barChartOption" class="bar-chart" height="17.5vh" />
     </div>
   </div>
@@ -68,6 +102,7 @@ import { ref, onMounted, watch, computed } from 'vue'
 import { rgbToHex } from '@/utils/color'
 
 interface Props {
+  loading?: boolean
   totalCount: number
   formalEmployeeCount: number
   externalStaffCount: number
@@ -87,6 +122,17 @@ const formalEmployeeDigits = computed(() => String(props.formalEmployeeCount).sp
 const externalStaffDigits = computed(() => String(props.externalStaffCount).split('').map(Number))
 const visitorDigits = computed(() => String(props.visitorCount).split('').map(Number))
 
+// 计算数字区域的最大宽度
+// 每个数字框宽度 14px，gap 2px
+const maxNumberWidth = computed(() => {
+  const formalLen = formalEmployeeDigits.value.length
+  const externalLen = externalStaffDigits.value.length
+  const visitorLen = visitorDigits.value.length
+  const maxLen = Math.max(formalLen, externalLen, visitorLen)
+  // 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
+  return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
+})
+
 // 图表引用
 const barChartOption = ref({
   legend: {
@@ -243,17 +289,25 @@ onMounted(() => {
       .top-card-right-item {
         display: flex;
         align-items: center;
-        column-gap: 5px;
         padding: 0 10px;
         font-size: 0.7rem;
         color: #fff;
 
+        > :first-child {
+          display: flex;
+          align-items: center;
+          column-gap: 5px;
+          width: 100px;
+        }
+
         .type-number-wrapper {
           display: flex;
           align-items: center;
+          justify-content: flex-start;
           gap: 2px;
           font-size: 0.8rem;
           color: #fff;
+          margin-left: 8px;
 
           .type-number {
             display: inline-block;
@@ -268,6 +322,10 @@ onMounted(() => {
             transition: all 0.3s ease;
           }
         }
+
+        > span:last-child {
+          margin-left: 4px;
+        }
       }
     }
   }
@@ -290,5 +348,141 @@ onMounted(() => {
       min-height: 17.5vh;
     }
   }
+
+  // 骨架屏样式
+  .skeleton-container {
+    .skeleton-card {
+      display: flex;
+      padding: 0 20px;
+      column-gap: 15px;
+      font-size: 0.8rem;
+
+      .skeleton-left {
+        display: flex;
+        height: 12vh;
+        min-width: 15vw;
+        padding: 0 10px;
+        background-image: url('@/assets/imgs/total_count_card_bg.png');
+        background-size: cover;
+        column-gap: 6px;
+        align-items: center;
+
+        .skeleton-icon {
+          width: 33px;
+          height: 33px;
+          background-color: #3a3a3a;
+          border-radius: 4px;
+        }
+
+        .skeleton-text {
+          background-color: #3a3a3a;
+          border-radius: 4px;
+        }
+
+        .skeleton-numbers {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          font-size: 0.8rem;
+
+          .skeleton-number {
+            width: 26px;
+            height: 50px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+        }
+      }
+
+      .skeleton-right {
+        display: flex;
+        height: 12vh;
+        min-width: 20vw;
+        background-image: url('@/assets/imgs/staff_types_bg.png');
+        background-position: top center;
+        background-size: cover;
+        flex-direction: column;
+        justify-content: center;
+        row-gap: 4px;
+
+        .skeleton-item {
+          display: flex;
+          align-items: center;
+          column-gap: 5px;
+          padding: 0 10px;
+
+          .skeleton-row {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            flex: 1;
+
+            .skeleton-icon-small {
+              width: 18px;
+              height: 18px;
+              background-color: #3a3a3a;
+              border-radius: 4px;
+            }
+
+            .skeleton-text {
+              height: 16px;
+              width: 60px;
+              background-color: #3a3a3a;
+              border-radius: 4px;
+            }
+          }
+
+          .skeleton-numbers {
+            display: flex;
+            align-items: center;
+            gap: 2px;
+            font-size: 0.8rem;
+
+            .skeleton-number-small {
+              width: 14px;
+              height: 25px;
+              background-color: #3a3a3a;
+              border-radius: 2px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 骨架屏动画
+  .skeleton-pulse {
+    animation: skeleton-loading-overview 1.5s ease-in-out infinite;
+
+  }
+
+  // 圆形饼图骨架屏
+  .skeleton-chart-circle {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    margin: 30px auto 50px auto;
+    background-color: #444;
+  }
+
+  // 柱状图骨架屏
+  // .skeleton-chart-bar {
+  //   width: 100%;
+  //   height: 17.5vh;
+  //   background-color: #444;
+  //   border-radius: 8px;
+  // }
+
+  @keyframes skeleton-loading-overview {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 </style>

src/views/screen/components/RiskStatisticsPanel.vue

@@ -2,14 +2,38 @@
   <div class="left-bottom">
     <div class="panel-title">
       <div class="tabs">
-        <span class="tab" :class="{ active: activeTab === '安全类' }" @click="handleTabClick('安全类')">安全类</span>
+        <span class="tab" :class="{ active: activeTab === '安全类事项' }" @click="handleTabClick('安全类事项')">安全类事项</span>
         <span class="divider">|</span>
-        <span class="tab" :class="{ active: activeTab === '工程类' }" @click="handleTabClick('工程类')">工程类</span>
+        <span class="tab" :class="{ active: activeTab === '工程类事项' }" @click="handleTabClick('工程类事项')">工程类事项</span>
       </div>
     </div>
     <img class="title-line" src="@/assets/images/title_border_line.png" />
 
-    <div class="chart-grid">
+    <!-- 骨架屏 -->
+    <div v-if="props.loading" class="skeleton-container">
+      <div class="skeleton-grid">
+        <div class="skeleton-card" v-for="i in 6" :key="i">
+          <div class="skeleton-title skeleton-pulse"></div>
+          <div class="skeleton-chart">
+            <div class="skeleton-chart-circle skeleton-pulse"></div>
+            <div class="skeleton-chart-center">
+              <div class="skeleton-text-small skeleton-pulse"></div>
+              <div class="skeleton-text-large skeleton-pulse"></div>
+            </div>
+          </div>
+          <div class="skeleton-legend">
+            <div class="skeleton-legend-item" v-for="j in 4" :key="j">
+              <div class="skeleton-dot skeleton-pulse"></div>
+              <div class="skeleton-text skeleton-pulse"></div>
+              <div class="skeleton-value skeleton-pulse"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 实际内容 -->
+    <div v-else class="chart-grid">
       <div class="chart-card" v-for="item in currentCharts" :key="`${activeTab}-${item.title}`">
         <div class="chart-title" @click="handleChartTitleClick()">{{ item.title }}</div>
         <div class="chart-content">
@@ -40,7 +64,7 @@
         </div>
       </div>
       </div>
-    </div>
+  </div>
   </div>
 </template>
 
@@ -49,7 +73,7 @@ import { computed, ref, watch } from 'vue'
 import { ElTooltip } from 'element-plus'
 import type { EChartsOption } from 'echarts'
 
-type TabType = '安全类' | '工程类'
+type TabType = '安全类事项' | '工程类事项'
 type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided'
 
 interface ChartItem {
@@ -67,12 +91,12 @@ const statusList: { key: StatusKey; label: string; color: string }[] = [
 ]
 
 const defaultChart: ChartItem[] = [
-  { title: '每日检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '当日维保', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  { title: '每月检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '本月维保', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  { title: '每年检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '本年维保', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  { title: '每日检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '当日巡检', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  { title: '每月检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '本月巡检', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  { title: '每年检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
+  { title: '本年巡检', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
 ]
 
 const handleChartTitleClick = () => {
@@ -80,23 +104,24 @@ const handleChartTitleClick = () => {
 }
 
 const tabCharts = ref<Record<TabType, ChartItem[]>>({
-  安全类: [...defaultChart],
+  安全类事项: [...defaultChart],
-  工程类: [...defaultChart]
+  工程类事项: [...defaultChart]
 })
 
 const props = defineProps<{
+  loading?: boolean
   riskStatistics?: Record<TabType, ChartItem[]>
 }>()
 
-const activeTab = ref<TabType>('安全类')
+const activeTab = ref<TabType>('安全类事项')
 const emit = defineEmits<{ tabChange: [tab: TabType] }>()
 
 // 监听props变化，更新图表数据
 watch(() => props.riskStatistics, (newData) => {
   if (newData) {
     tabCharts.value = {
-      安全类: newData['安全类'] ? JSON.parse(JSON.stringify(newData['安全类'])) : [...defaultChart],
+      安全类事项: newData['安全类事项'] ? JSON.parse(JSON.stringify(newData['安全类事项'])) : [...defaultChart],
-      工程类: newData['工程类'] ? JSON.parse(JSON.stringify(newData['工程类'])) : [...defaultChart]
+      工程类事项: newData['工程类事项'] ? JSON.parse(JSON.stringify(newData['工程类事项'])) : [...defaultChart]
     }
   }
 }, { deep: true, immediate: true })
@@ -415,5 +440,122 @@ const handleTabClick = (tab: TabType) => {
 //     padding: 5px;
 //   }
 // }
+
+// 骨架屏样式
+.skeleton-container {
+  .skeleton-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+
+    .skeleton-card {
+      background-image: url('@/assets/images/screen/left_top_2_img.png'),
+                        url('@/assets/images/screen/left_center_img.png'),
+                        url('@/assets/images/screen/left_bottom_img.png');
+      background-position: top center, left center, bottom center;
+      background-repeat: no-repeat, no-repeat, no-repeat;
+      background-size: 100% 90px, cover, 100% 68px;
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .skeleton-title {
+        width: 120px;
+        height: 16px;
+        background-color: #3a3a3a;
+        border-radius: 4px;
+        margin-bottom: 10px;
+      }
+
+      .skeleton-chart {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        margin-bottom: 10px;
+
+        .skeleton-chart-circle {
+          width: 100%;
+          height: 100%;
+          background-color: #3a3a3a;
+          border-radius: 50%;
+        }
+
+        .skeleton-chart-center {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          text-align: center;
+
+          .skeleton-text-small {
+            width: 40px;
+            height: 12px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+            margin-bottom: 4px;
+          }
+
+          .skeleton-text-large {
+            width: 30px;
+            height: 16px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+        }
+      }
+
+      .skeleton-legend {
+        width: 100%;
+
+        .skeleton-legend-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 6px;
+
+          .skeleton-dot {
+            width: 8px;
+            height: 8px;
+            background-color: #3a3a3a;
+            border-radius: 50%;
+          }
+
+          .skeleton-text {
+            flex: 1;
+            height: 12px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+            margin: 0 8px;
+          }
+
+          .skeleton-value {
+            width: 20px;
+            height: 12px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 骨架屏动画
+.skeleton-pulse {
+  animation: skeleton-loading-riskstats 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-loading-riskstats {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 </style>
 

src/views/screen/components/TimeoutWorkOrderPanel.vue

@@ -3,17 +3,21 @@
     <div class="panel-title">超时工单</div>
     <img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
 
+    <!-- 骨架屏 -->
+    <!-- 实际内容 -->
     <div class="tip-container">
       <div class="tip-image">
         <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
-        <span class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
+        <div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
+        <span v-else class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
       </div>
       <img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
       <div class="tip-content">
         <div class="col-item">
           <img src="@/assets/images/screen/warning_img.png" width="23" />
           <span>超时工单数</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
         </div>
       </div>
     </div>
@@ -32,7 +36,7 @@
         </div>
       </div>
     </div> -->
-    <AlertList :linkUrl="linkUrl" style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" ></AlertList>
+    <AlertList :linkUrl="linkUrl" style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" :loading="props.loading" ></AlertList>
   </div>
 </template>
 
@@ -52,6 +56,7 @@ interface TimeoutWorkOrders {
 
 // Props定义
 interface Props {
+  loading?: boolean
   timeoutWorkOrders?: TimeoutWorkOrders
   alertDetails?: AlertItem[]
   sourceIndex?: number
@@ -247,5 +252,104 @@ const props = withDefaults(defineProps<Props>(), {
       }
     }
   }
+
+  // 骨架屏样式
+  .skeleton-container {
+    .skeleton-tip-container {
+      position: relative;
+      width: 100%;
+      height: 70px;
+
+      .skeleton-tip-image {
+        position: absolute;
+        top: -5px;
+        right: 10px;
+        z-index: 2;
+
+        .skeleton-circle {
+          width: 80px;
+          height: 80px;
+          background-color: #3a3a3a;
+          border-radius: 50%;
+        }
+
+        .skeleton-number {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 30px;
+          height: 20px;
+          background-color: #3a3a3a;
+          border-radius: 4px;
+        }
+      }
+
+      .skeleton-bg {
+        width: 100%;
+        height: 70px;
+        background-color: #3a3a3a;
+        border-radius: 4px;
+      }
+
+      .skeleton-tip-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 8px 15px;
+
+        .skeleton-col-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .skeleton-icon {
+            width: 23px;
+            height: 23px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+
+          .skeleton-text {
+            flex: 1;
+            height: 16px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+
+          .skeleton-value {
+            width: 40px;
+            height: 18px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  // 骨架屏动画
+  .skeleton-pulse {
+    animation: skeleton-loading-timeout 1.5s ease-in-out infinite;
+    background-color: #444;
+    border-radius: 4px;
+  }
+
+  @keyframes skeleton-loading-timeout {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 </style>

src/views/screen/mainScreen.vue

@@ -2,11 +2,16 @@
   <div class="dashboard-container">
     <!-- 顶部标题栏 -->
     <div class="header-container">
-      <div class="header-left">
+      <HeaderSelector
-        <div class="back-button" @click="openRegionSelector"> 集团
+        back-button-type="none"
-          <span>···</span>
+        :show-back-button="false"
-        </div>
+        display-text="集团"
-      </div>
+        :clickable="true"
+        :show-selector-indicator="true"
+        selector-type="region"
+        :selected-value="selectedRegion"
+        @selector-change="onRegionChange"
+      />
       <h1 class="header-title">总部综合监控大屏</h1>
       <div class="date-wrapper">
         <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -19,39 +24,41 @@
     <!-- 主内容区 -->
     <div class="content-container">
       <div class="left-wrapper">
-        <OverviewPanel :totalCount="dashboardData?.totalCount || 0"
+        <OverviewPanel :loading="isFirstLoading"
+                       :totalCount="dashboardData?.totalCount || 0"
                        :formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
                        :externalStaffCount="dashboardData?.externalStaffCount || 0"
                        :visitorCount="dashboardData?.visitorCount || 0"
                        :parkStatistics="dashboardData?.parkStatistics"/>
-        <RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
+        <RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
                              @tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
       </div>
       <div class="right-wrapper">
-        <HighRiskAlertPanel :alertData="dashboardData?.alertData"
+        <HighRiskAlertPanel :loading="isFirstLoading"
+                            :alertData="dashboardData?.alertData"
                             :alertDetails="dashboardData?.alertData.details"
                             linkUrl="http://10.0.64.20/security/console/command-center?p=tabl"
                             :sourceIndex="sourceIndex"/>
-        <TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
+        <TimeoutWorkOrderPanel :loading="isFirstLoading"
+                               :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
                                :alertDetails="dashboardData?.timeoutWorkOrders.details"
                                linkUrl="http://10.0.64.20/pms/workorder-list"
                                :sourceIndex="sourceIndex"/>
       </div>
-      <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
+      <HiddenDangerPanel :loading="isFirstLoading" :hiddenDangerData="dashboardData?.hiddenDangerData"/>
     </div>
   </div>
 
-  <!-- 区域选择弹窗 -->
-  <RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedRegion"
-                  :regions="regionOption"
-                  @change="onRegionChange"/>
 </template>
 
 <script setup lang="ts">
 import {getTableList, getTableData, getWorkOrderStatistics} from './report'
-import {ref, onMounted, watch, onUnmounted} from 'vue'
+import {ref, reactive, onMounted, watch, onUnmounted} from 'vue'
 import {useRouter} from 'vue-router'
-import RegionSelector from './components/RegionSelector.vue'
+
+// 创建 AbortController 用于取消请求
+const abortController = new AbortController()
+import HeaderSelector from './components/HeaderSelector.vue'
 import WeatherWarning from './components/WeatherWarning.vue'
 import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
 
@@ -60,7 +67,6 @@ import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
 import HighRiskAlertPanel from './components/HighRiskAlertPanel.vue'
 import TimeoutWorkOrderPanel from './components/TimeoutWorkOrderPanel.vue'
 import HiddenDangerPanel from './components/HiddenDangerPanel.vue'
-import {error} from "echarts/types/src/util/log";
 
 // 类型定义
 interface AlertItem {
@@ -73,14 +79,13 @@ interface RegionItem {
   code: string
 }
 
-type TabType = '安全类' | '工程类'
+type TabType = '安全类事项' | '工程类事项'
 
 // 响应式数据
 const currentDateTime = ref<string>('')
 const currentDate = ref<string>('')
 const currentWeek = ref<string>('')
 const currentTime = ref<string>('')
-const regionSelectorVisible = ref<boolean>(false)
 const selectedRegion = ref<string>('')
 const sourceIndex = ref<number>(1)
 
@@ -96,11 +101,14 @@ const visitorCount = ref<number>(0)
 const parkStatistics = ref<any>()
 // 高危作业/安全培训考试/安全培训考试
 const riskStatistics = ref<any>({
-  安全类: [],
+  安全类事项: [],
-  工程类: []
+  工程类事项: []
 })
 const dangerDetail = ref<any>()
 
+// 加载状态
+const isFirstLoading = ref<boolean>(true)
+
 // 动画相关的状态
 const isAnimating = ref<boolean>(false)
 const animationDuration = 2000 // 动画持续时间（毫秒）
@@ -201,7 +209,6 @@ const updateAllCounts = (counts: {
 // 路由
 const router = useRouter()
 
-const regionOption = ref<RegionItem[]>([])
 // 定时器ID
 const dashboardTimerId = ref<ReturnType<typeof setInterval> | null>(null)
 const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
@@ -266,7 +273,7 @@ onMounted(async () => {
   if (!records || records.length === 0) {
     // 缓存不存在或已过期，调用接口
     try {
-      let result = await getTableList('park_info_list')
+      let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
       records = result.records || []
 
       if (records && records.length > 0) {
@@ -280,21 +287,6 @@ onMounted(async () => {
   }
 
   if (records && records.length > 0) {
-    // 去重region字段，使用Map来确保唯一性
-    const regionMap = new Map()
-    records.forEach(el => {
-      if (!regionMap.has(el.region)) {
-        regionMap.set(el.region, {
-          name: el.region,
-          code: el.region_id // 使用region_id作为code
-        })
-      }
-    })
-    // 转换为数组
-    regionOption.value = Array.from(regionMap.values())
-
-    console.log('regionOption.value>>>>', regionOption.value);
-
     // 将园区信息去重
     const parkMap = new Map();
     records.forEach(el => {
@@ -308,14 +300,19 @@ onMounted(async () => {
     // 将parkMap转换为数组
     query.campus_id = Array.from(parkMap.values()).map(e1 => e1.code).join();
   }
-  // 将初始化的逻辑放在这里
-  dashboardData.value.hiddenDangerData.general = 0
-  dashboardData.value.hiddenDangerData.major = 0
-  dashboardData.value.hiddenDangerData.progress.overdue = 0
-  dashboardData.value.hiddenDangerData.progress.processed = 0
-  dashboardData.value.hiddenDangerData.progress.processing = 0
   // 初始化数据，loadDashboardData()既然是包含初始化的逻辑，所以并不适合定时调用，不然每次都要初始化。
   await loadDashboardData()
+  
+  // 将初始化的逻辑放在这里（在loadDashboardData之后，确保dashboardData.value已初始化）
+  if (dashboardData.value && dashboardData.value.hiddenDangerData) {
+    dashboardData.value.hiddenDangerData.general = dashboardData.value.hiddenDangerData.general || 0
+    dashboardData.value.hiddenDangerData.major = dashboardData.value.hiddenDangerData.major || 0
+    if (dashboardData.value.hiddenDangerData.progress) {
+      dashboardData.value.hiddenDangerData.progress.overdue = dashboardData.value.hiddenDangerData.progress.overdue || 0
+      dashboardData.value.hiddenDangerData.progress.processed = dashboardData.value.hiddenDangerData.progress.processed || 0
+      dashboardData.value.hiddenDangerData.progress.processing = dashboardData.value.hiddenDangerData.progress.processing || 0
+    }
+  }
 
   // 启动定时器
   timeOut1()
@@ -326,8 +323,11 @@ onMounted(async () => {
   }, 2 * 60 * 1000) // 每2分钟更新一次
 })
 
-// 组件卸载时清理定时器
+// 组件卸载时清理定时器并取消所有请求
 onUnmounted(() => {
+  // 取消所有正在进行的请求
+  abortController.abort()
+
   if (dashboardTimerId.value) {
     clearInterval(dashboardTimerId.value)
     dashboardTimerId.value = null
@@ -344,6 +344,11 @@ onUnmounted(() => {
 let isFirstLoad = ref<boolean>(true)
 // 数据初始化方法
 const loadDashboardData = async (): Promise<void> => {
+  // 第一次加载时显示骨架屏
+  if (isFirstLoading.value) {
+    console.log('第一次加载，显示骨架屏');
+  }
+
   const data = await getDashboardData()
   if (isFirstLoad.value) {
     console.log('第一次加载');
@@ -352,9 +357,12 @@ const loadDashboardData = async (): Promise<void> => {
   }
   console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
 
-  try {
+  // 收集所有异步请求
-    // 获取总体概览数据
+  const promises = []
-    getTableList('generalTotal', query).then(generalTotal => {
+
+  // 获取总体概览数据
+  promises.push(
+    getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
       if (generalTotal.records && generalTotal.records.length > 0) {
         dashboardData.value.totalCount = Number(generalTotal.records[0].totalCount)
         dashboardData.value.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
@@ -367,14 +375,14 @@ const loadDashboardData = async (): Promise<void> => {
         external: Number(dashboardData.value.externalStaffCount),
         visitor: Number(dashboardData.value.visitorCount)
       })
+    }).catch(error => {
+      console.error('获取总体概览数据失败:', error)
     })
-  } catch (error) {
+  )
-    console.error('获取总体概览数据失败:', error)
-  }
 
-  try {
+  // 获取各园区统计数据
-    // 获取各园区统计数据
+  promises.push(
-    getTableList('parkscreen_user_info', query).then(parkscreen_user_info => {
+    getTableList('parkscreen_user_info', query, false, { signal: abortController.signal }).then(parkscreen_user_info => {
       if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
         dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
           return {
@@ -385,14 +393,14 @@ const loadDashboardData = async (): Promise<void> => {
           }
         })
       }
+    }).catch(error => {
+      console.error('获取各园区统计数据失败:', error)
     })
-  } catch (error) {
+  )
-    console.error('获取各园区统计数据失败:', error)
-  }
 
-  try {
+  // 获取风险预警数据
-    // 获取风险预警数据
+  promises.push(
-    getTableList('risk_alert_data', query).then(risk_alert_data => {
+    getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
       if (risk_alert_data.records && risk_alert_data.records.length > 0) {
         dashboardData.value.alertData.total = risk_alert_data.records[0].total
         dashboardData.value.alertData.processed = risk_alert_data.records[0].processed
@@ -402,26 +410,22 @@ const loadDashboardData = async (): Promise<void> => {
     }).catch(error => {
       console.error('获取风险预警数据失败:', error)
     })
-  } catch (error) {
+  )
-    console.error('获取风险预警数据失败:', error)
-  }
 
-  try {
+  // 获取风险预警详情数据
-    // 获取风险预警详情数据
+  promises.push(
-    getTableList('risk_alert_detail', query).then(risk_alert_detail => {
+    getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
       if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
         dashboardData.value.alertData.details = risk_alert_detail.records
       }
     }).catch(error => {
       console.error('获取风险预警详情数据失败:', error)
     })
-  } catch (error) {
+  )
-    console.error('获取风险预警详情数据失败:', error)
-  }
 
-  try {
+  // 获取超期工单数据
-    // 获取超期工单数据
+  promises.push(
-    getTableList('timeout_work_order', query).then(timeout_work_order => {
+    getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
       if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
         dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
         dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
@@ -429,201 +433,111 @@ const loadDashboardData = async (): Promise<void> => {
     }).catch(error => {
       console.error('获取超期工单数据失败:', error)
     })
+  )
+
+  // 处理风险统计和隐患数据（这些是异步的）
+  promises.push(
+    Promise.all([
+      handleRiskTabChange('安全类事项'),
+      handleHiddenDangerPannelData(query)
+    ]).catch(error => {
+      console.error('处理风险统计和隐患数据失败:', error)
+    })
+  )
+
+  // 等待所有异步操作完成
+  try {
+    await Promise.all(promises)
+    console.log('所有数据加载完成')
+
+    // 第一次加载完成后，隐藏骨架屏
+    if (isFirstLoading.value) {
+      isFirstLoading.value = false
+      console.log('隐藏骨架屏')
+    }
   } catch (error) {
-    console.error('获取超期工单数据失败:', error)
+    console.error('数据加载过程中出现错误:', error)
+    // 即使出错也要隐藏骨架屏，避免界面一直处于加载状态
+    if (isFirstLoading.value) {
+      isFirstLoading.value = false
+    }
   }
-  handleRiskTabChange('安全类')
-  handleHiddenDangerPannelData(query)
-  console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
 }
 
-const handleHiddenDangerPannelData = (query) => {
+const handleHiddenDangerPannelData = async (query) => {
-  let _data = {
+  const promises = []
-    flag: false,
-    general: 0,
-    major: 0,
-    overdue: 0,
-    processed: 0,
-    processing: 0,
-    pending: 0
-  }
 
-  let _data2 = {
+  // 获取隐患排查治理数据 - 系统数据
-    flag: false,
+  promises.push(
-    general: 0,
+    getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
-    major: 0,
-    overdue: 0,
-    processed: 0,
-    processing: 0,
-    pending: 0
-  }
-  try {
-    // 获取隐患排查治理数据
-    getTableList('risk_level_count', query).then(res => {
       if (res.records && res.records.length > 0) {
-        _data.general = _data.general + Number(res.records[0].general_count)
+        dashboardData.value.hiddenDangerData.general = Number(res.records[0].general_count)
-        _data.major = _data.major + Number(res.records[0].major_count)
+        dashboardData.value.hiddenDangerData.major = Number(res.records[0].major_count)
-        // 获取隐患排查治理数据
-        getTableList('risk_status_count', query).then(res => {
-          if (res.records && res.records.length > 0) {
-            // 接口返回的已经是百分比，直接使用
-            const record = res.records[0]
-            _data.overdue = Number(record.overdueCnt) || 0
-            _data.processed = Number(record.processedCnt) || 0
-            _data.processing = Number(record.processingCnt) || 0
-            _data.pending = 0 // 接口没有返回pending，设为0
-            _data.flag = true
-
-            console.log('risk_status_count 接口返回数据:', record)
-            console.log('处理后的 _data:', _data)
-
-            if (_data2.flag) {
-              // 合并数据
-              console.log("请求系统和第三方成功，合并数据", _data, _data2);
-              let generalCnt = _data.general + _data2.general
-              let majorCnt = _data.major + _data2.major
-              dashboardData.value.hiddenDangerData.general = generalCnt
-              dashboardData.value.hiddenDangerData.major = majorCnt
-
-              // 如果第三方数据也是百分比，需要合并；否则使用系统数据
-              // 这里假设系统数据是百分比，第三方数据可能是数量或百分比
-              let overdueCnt, processedCnt, processingCnt, pendingCnt
-              if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
-                // 第三方数据可能是百分比，直接使用系统数据（因为系统数据更准确）
-                overdueCnt = _data.overdue.toFixed(2)
-                processedCnt = _data.processed.toFixed(2)
-                processingCnt = _data.processing.toFixed(2)
-                pendingCnt = _data.pending.toFixed(2)
-              } else {
-                // 第三方数据可能是数量，需要计算百分比
-                let totalCnt = generalCnt + majorCnt
-                overdueCnt = totalCnt > 0 ? ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) : '0.00'
-                processedCnt = totalCnt > 0 ? ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2) : '0.00'
-                processingCnt = totalCnt > 0 ? ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) : '0.00'
-                pendingCnt = totalCnt > 0 ? ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) : '0.00'
-              }
-
-              dashboardData.value.hiddenDangerData.progress = {
-                overdue: overdueCnt,
-                processed: processedCnt,
-                processing: processingCnt,
-                pending: pendingCnt,
-              }
-              console.log('合并后的 progress:', dashboardData.value.hiddenDangerData.progress)
-            } else {
-              console.log("请求系统成功，展示数据", _data, _data2);
-              dashboardData.value.hiddenDangerData.general = _data.general
-              dashboardData.value.hiddenDangerData.major = _data.major
-
-              // 接口返回的已经是百分比，直接使用
-              dashboardData.value.hiddenDangerData.progress = {
-                overdue: _data.overdue.toFixed(2),
-                processed: _data.processed.toFixed(2),
-                processing: _data.processing.toFixed(2),
-                pending: _data.pending.toFixed(2),
-              }
-              console.log('系统数据 progress:', dashboardData.value.hiddenDangerData.progress)
-            }
-          }
-        })
       }
-    })
+      return getTableList('risk_status_count', query, false, { signal: abortController.signal })
-
+    }).then(res => {
-
-    // 获取隐患排查治理数据
-    getTableList('hidden_danger_investigation', query).then(res => {
       if (res.records && res.records.length > 0) {
-        _data2.general = Number(res.records[0].general)
+        const record = res.records[0]
-        _data2.major = Number(res.records[0].major)
+        dashboardData.value.hiddenDangerData.progress = {
-
+          overdue: Number(record.overdueCnt).toFixed(2),
-        // 安全指数另算，再起一个报表
+          processed: Number(record.processedCnt).toFixed(2),
-        // dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
+          processing: Number(record.processingCnt).toFixed(2),
-        // 在这里添加获取安全指数的逻辑
+          pending: '0.00'
-        getTableList('hidden_danger_safety_index', query).then(res => {
+        }
-          if (res.records && res.records.length > 0) {
-            dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
-          }
-        }).catch(error => {
-          console.error('获取隐患排查治理数据失败:', error)
-        })
-
-        // 获取隐患排查治理处理进度数据
-        getTableList('hidden_danger_process_progress', query).then(res => {
-          // if (res.records && res.records.length > 0) {
-          //   _data2.flag = true
-          //   _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
-          //   _data2.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
-          //   _data2.processing = Number(res.records[0].processing) / 100 * (_data2.general + _data2.major)
-          //   _data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
-
-          //   if (_data.flag) {
-          //     console.log("请求第三方和系统成功，合并数据", _data, _data2);
-          //     // 合并数据
-          //     let generalCnt = _data.general + _data2.general
-          //     let majorCnt = _data.major + _data2.major
-          //     dashboardData.value.hiddenDangerData.general = generalCnt
-          //     dashboardData.value.hiddenDangerData.major = majorCnt
-
-          //     let totalCnt = generalCnt + majorCnt
-          //     let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
-          //     let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
-          //     let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
-          //     let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
-          //     dashboardData.value.hiddenDangerData.progress = {
-          //       overdue: overdueCnt,
-          //       processed: processedCnt,
-          //       processing: processingCnt,
-          //       pending: pendingCnt,
-          //     }
-          //   } else {
-          //     //显示三方数据
-          //     console.log("请求第三方成功，展示数据", _data, _data2);
-          //     dashboardData.value.hiddenDangerData.general = _data2.general
-          //     dashboardData.value.hiddenDangerData.major = _data2.major
-
-          //     dashboardData.value.hiddenDangerData.progress = {
-          //       overdue: res.records[0].overdue,
-          //       processed: res.records[0].processed,
-          //       processing: res.records[0].processing,
-          //       pending: res.records[0].pending,
-          //     }
-          //   }
-          // }
-        }).catch(error => {
-          console.error('获取隐患排查治理处理进度数据失败:', error)
-        })
       }
     }).catch(error => {
-      console.error('获取隐患排查治理数据失败:', error)
+      console.error('获取系统隐患数据失败:', error)
     })
-  } catch (error) {
+  )
-    console.error('获取隐患排查治理数据失败:', error)
-  }
 
-  try {
+  // 获取第三方隐患排查治理数据
-    // 获取隐患排查治理TOP3类型数据
+  promises.push(
-    getTableList('hidden_danger_top', query).then(hidden_danger_top => {
+    getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
+      if (res.records && res.records.length > 0) {
+        // 获取安全指数
+        return getTableList('hidden_danger_safety_index', query, false, { signal: abortController.signal })
+      }
+    }).then(res => {
+      if (res.records && res.records.length > 0) {
+        dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
+      }
+    }).catch(error => {
+      console.error('获取第三方隐患数据失败:', error)
+    })
+  )
+
+  // 获取隐患排查治理TOP3类型数据
+  promises.push(
+    getTableList('hidden_danger_top', query, false, { signal: abortController.signal }).then(hidden_danger_top => {
       if (hidden_danger_top.records && hidden_danger_top.records.length > 0) {
         dashboardData.value.hiddenDangerData.top3Types = hidden_danger_top.records
       }
     }).catch(error => {
       console.error('获取隐患排查治理TOP3类型数据失败:', error)
     })
-  } catch (error) {
+  )
-    console.error('获取隐患排查治理TOP3类型数据失败:', error)
+
-  }
+  return Promise.all(promises)
 }
 
 // 处理风险统计tab切换
-const handleRiskTabChange = async (tab: TabType) => {
+const handleRiskTabChange = async (tab: TabType | '安全类事项' | '工程类事项') => {
   console.log('Tab changed to:', tab)
   try {
+    // 处理类型映射：组件可能传入 '安全类事项' 或 '工程类事项'
+    let normalizedTab: TabType = '安全类事项'
+    if (tab === '安全类事项' || tab === '安全类事项') {
+      normalizedTab = '安全类事项'
+    } else if (tab === '工程类事项' || tab === '工程类事项') {
+      normalizedTab = '工程类事项'
+    }
+    
     let workOrderType = ''
     switch (tab) {
-      case '安全类':
+      case '安全类事项':
         workOrderType = '物业服务-安全'
         break
-      case '工程类':
+      case '工程类事项':
         workOrderType = '物业服务-工程'
         break
       default:
@@ -636,7 +550,7 @@ const handleRiskTabChange = async (tab: TabType) => {
         workOrderType,
         taskType: '维保任务',
         campus_id: query.campus_id
-      }).catch(error => {
+      }, { signal: abortController.signal }).catch(error => {
         console.error('获取维保任务数据失败:', error)
         return {records: []}
       }),
@@ -644,7 +558,7 @@ const handleRiskTabChange = async (tab: TabType) => {
         workOrderType,
         taskType: '巡检任务',
         campus_id: query.campus_id
-      }).catch(error => {
+      }, { signal: abortController.signal }).catch(error => {
         console.error('获取巡检任务数据失败:', error)
         return {records: []}
       })
@@ -699,8 +613,8 @@ const handleRiskTabChange = async (tab: TabType) => {
     // 合并为6个图表：先维保（3个），后巡检（3个）
     const allCharts = [...maintenanceCharts, ...inspectionCharts]
 
-    // 更新riskStatistics
+    // 更新riskStatistics（使用标准化后的tab）
-    riskStatistics.value[tab] = allCharts
+    riskStatistics.value[normalizedTab] = allCharts
 
     console.log('更新后的riskStatistics:', riskStatistics.value)
   } catch (error) {
@@ -717,11 +631,6 @@ const onRegionChange = (item: RegionItem): void => {
   })
 }
 
-// 打开区域选择器
-const openRegionSelector = (): void => {
-  regionSelectorVisible.value = true
-}
-
 // 更新时间
 const updateTime = (): void => {
   const now = new Date()

src/views/screen/regionScreen.vue

@@ -2,13 +2,18 @@
   <div class="dashboard-container">
     <!-- 顶部标题栏 -->
     <div class="header-container">
-      <div class="header-left">
+      <HeaderSelector
-        <img class="back-img" @click="returnToHeadquarters"
+        back-button-type="image"
-             src="@/assets/images/screen/back_image.png"/>
+        :show-back-button="true"
-        <div class="back-button" @click="openRegionSelector"> {{ selectedRegion }}
+        :on-back="returnToHeadquarters"
-          <span>···</span>
+        :display-text="selectedRegion"
-        </div>
+        :clickable="true"
-      </div>
+        :show-selector-indicator="true"
+        selector-type="park"
+        :selected-value="selectedPark"
+        :region-code="query.regionCode"
+        @selector-change="onRegionChange"
+      />
       <h1 class="header-title">{{ selectedRegion }}综合监控大屏</h1>
       <div class="date-wrapper">
         <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -21,40 +26,42 @@
     <!-- 主内容区 -->
     <div class="content-container">
       <div class="left-wrapper">
-        <OverviewPanel :totalCount="dashboardData?.totalCount || 0"
+        <OverviewPanel :loading="isFirstLoading"
+                       :totalCount="dashboardData?.totalCount || 0"
                        :formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
                        :externalStaffCount="dashboardData?.externalStaffCount || 0"
                        :visitorCount="dashboardData?.visitorCount || 0"
                        :parkStatistics="dashboardData?.parkStatistics"/>
-        <RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
+        <RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
                              :park="parkValue"
                              @tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
       </div>
       <div class="right-wrapper">
-        <HighRiskAlertPanel :alertData="dashboardData?.alertData"
+        <HighRiskAlertPanel :loading="isFirstLoading"
+                            :alertData="dashboardData?.alertData"
                             :alertDetails="dashboardData?.alertData.details"
                             linkUrl="http://10.0.64.20/security/console/command-center?p=tabl"
                             :sourceIndex="sourceIndex"/>
-        <TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
+        <TimeoutWorkOrderPanel :loading="isFirstLoading"
+                               :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
                                :alertDetails="dashboardData?.timeoutWorkOrders.details"
                                linkUrl="http://10.0.64.20/pms/workorder-list"
                                :sourceIndex="sourceIndex"/>
       </div>
-      <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
+      <HiddenDangerPanel :loading="isFirstLoading" :hiddenDangerData="dashboardData?.hiddenDangerData"/>
     </div>
   </div>
 
-  <!-- 区域选择弹窗 -->
-  <RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedPark"
-                  :regions="regionOption"
-                  @change="onRegionChange"/>
 </template>
 
 <script setup lang="ts">
 import {getTableList, getTableData, getWorkOrderStatistics} from './report'
 import {ref, onMounted, watch, onUnmounted} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
-import RegionSelector from './components/RegionSelector.vue'
+
+// 创建 AbortController 用于取消请求
+const abortController = new AbortController()
+import HeaderSelector from './components/HeaderSelector.vue'
 import WeatherWarning from './components/WeatherWarning.vue'
 import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
 
@@ -75,14 +82,13 @@ interface RegionItem {
   code: string
 }
 
-type TabType = '安全类' | '工程类'
+type TabType = '安全类事项' | '工程类事项'
 
 // 响应式数据
 const currentDateTime = ref<string>('')
 const currentDate = ref<string>('')
 const currentWeek = ref<string>('')
 const currentTime = ref<string>('')
-const regionSelectorVisible = ref<boolean>(false)
 const selectedRegion = ref<string>('')
 const sourceIndex = ref<number>(1)
 
@@ -98,14 +104,17 @@ const visitorCount = ref<number>(0)
 const parkStatistics = ref<any>()
 // 危险作业/安全考核/安全、保密培训
 const riskStatistics = ref<Record<TabType, any[]>>({
-  安全类: [],
+  安全类事项: [],
-  工程类: []
+  工程类事项: []
 })
 const dangerDetail = ref<any>()
 // 动画相关的状态
 const isAnimating = ref<boolean>(false)
 const animationDuration = 2000 // 动画持续时间（毫秒）
 
+// 首次加载状态
+const isFirstLoading = ref<boolean>(true)
+
 // 数字变化时的闪烁效果
 const flashNumbers = () => {
   const numberElements = document.querySelectorAll('.total-number, .type-number')
@@ -202,7 +211,6 @@ const updateAllCounts = (counts: {
 const router = useRouter()
 const route = useRoute()
 
-const regionOption = ref<RegionItem[]>([])
 const selectedPark = ref<string>('')
 const parkValue = ref<string>('')
 // 定时器ID
@@ -279,7 +287,7 @@ onMounted(async () => {
   if (!records || records.length === 0) {
     // 缓存不存在或已过期，调用接口
     try {
-      let result = await getTableList('park_info_list')
+      let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
       records = result.records || []
 
       if (records && records.length > 0) {
@@ -304,20 +312,20 @@ onMounted(async () => {
           })
         }
       })
-    // 转换为数组
+    // 转换为数组并设置 campus_id
-    regionOption.value = Array.from(regionMap.values())
+    const regionArray = Array.from(regionMap.values())
-    console.log('regionOption.value>>>>', regionOption.value);
+    query.campus_id = regionArray.map(el => el.code).join()
-
-    query.campus_id = regionOption.value.map(el => el.code).join()
   }
-  // 暂时先放在这里
+  // 初始化数据 - 先加载数据，再设置初始值
-  dashboardData.value.hiddenDangerData.general = 0
-  dashboardData.value.hiddenDangerData.major = 0
-  dashboardData.value.hiddenDangerData.progress.overdue = 0
-  dashboardData.value.hiddenDangerData.progress.processed = 0
-  dashboardData.value.hiddenDangerData.progress.processing = 0
-  // 初始化数据
   await loadDashboardData()
+  // 暂时先放在这里 - 确保 dashboardData.value 已初始化后再访问
+  if (dashboardData.value && dashboardData.value.hiddenDangerData) {
+    dashboardData.value.hiddenDangerData.general = 0
+    dashboardData.value.hiddenDangerData.major = 0
+    dashboardData.value.hiddenDangerData.progress.overdue = 0
+    dashboardData.value.hiddenDangerData.progress.processed = 0
+    dashboardData.value.hiddenDangerData.progress.processing = 0
+  }
 
   // 启动定时器
   timeOut1()
@@ -328,8 +336,11 @@ onMounted(async () => {
   }, 2 * 60 * 1000) // 每2分钟更新一次
 })
 
-// 组件卸载时清理定时器
+// 组件卸载时清理定时器并取消所有请求
 onUnmounted(() => {
+  // 取消所有正在进行的请求
+  abortController.abort()
+
   if (dashboardTimerId.value) {
     clearInterval(dashboardTimerId.value)
     dashboardTimerId.value = null
@@ -356,7 +367,7 @@ const loadDashboardData = async (): Promise<void> => {
 
   try {
     // 获取总体概览数据
-    getTableList('generalTotal', query).then(generalTotal => {
+    getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
       if (generalTotal.records && generalTotal.records.length > 0) {
         dashboardData.value.totalCount = generalTotal.records.reduce((sum, item) => sum + Number(item.totalCount || 0), 0)
         dashboardData.value.formalEmployeeCount = generalTotal.records.reduce((sum, item) => sum + Number(item.formalEmployeeCount || 0), 0)
@@ -376,7 +387,7 @@ const loadDashboardData = async (): Promise<void> => {
 
   try {
     // 获取各园区统计数据
-    getTableList('parkscreen_user_info', query).then(parkscreen_user_info => {
+    getTableList('parkscreen_user_info', query, false, { signal: abortController.signal }).then(parkscreen_user_info => {
       if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
         dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
           return {
@@ -394,7 +405,7 @@ const loadDashboardData = async (): Promise<void> => {
 
   try {
     // 获取风险预警数据
-    getTableList('risk_alert_data', query).then(risk_alert_data => {
+    getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
       if (risk_alert_data.records && risk_alert_data.records.length > 0) {
         dashboardData.value.alertData.total = risk_alert_data.records.reduce((sum, item) => sum + Number(item.total || 0), 0)
         dashboardData.value.alertData.processed = risk_alert_data.records.reduce((sum, item) => sum + Number(item.processed || 0), 0)
@@ -410,7 +421,7 @@ const loadDashboardData = async (): Promise<void> => {
 
   try {
     // 获取风险预警详情数据
-    getTableList('risk_alert_detail', query).then(risk_alert_detail => {
+    getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
       // if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
       dashboardData.value.alertData.details = risk_alert_detail.records || []
       // }
@@ -423,7 +434,7 @@ const loadDashboardData = async (): Promise<void> => {
 
   try {
     // 获取超期工单数据
-    getTableList('timeout_work_order', query).then(timeout_work_order => {
+    getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
       if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
         dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
         dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
@@ -434,7 +445,7 @@ const loadDashboardData = async (): Promise<void> => {
   } catch (error) {
     console.error('获取超期工单数据失败:', error)
   }
-  handleRiskTabChange('安全类')
+  handleRiskTabChange('安全类事项')
   handleHiddenDangerPannelData(query)
   console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
 }
@@ -462,12 +473,12 @@ const handleHiddenDangerPannelData = (query) => {
   }
   try {
     // 获取隐患排查治理数据
-    getTableList('risk_level_count', query).then(res => {
+    getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
       if (res.records && res.records.length > 0) {
         _data.general = _data.general + Number(res.records[0].general_count)
         _data.major = _data.major + Number(res.records[0].major_count)
         // 获取隐患排查治理数据
-        getTableList('risk_status_count', query).then(res => {
+        getTableList('risk_status_count', query, false, { signal: abortController.signal }).then(res => {
           if (res.records && res.records.length > 0) {
             // 接口返回的已经是百分比，直接使用
             const record = res.records[0]
@@ -534,7 +545,7 @@ const handleHiddenDangerPannelData = (query) => {
 
 
     // 获取隐患排查治理数据
-    getTableList('hidden_danger_investigation', query).then(res => {
+    getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
       if (res.records && res.records.length > 0) {
         _data2.general = Number(res.records[0].general)
         _data2.major = Number(res.records[0].major)
@@ -542,7 +553,7 @@ const handleHiddenDangerPannelData = (query) => {
         // 安全指数另算，再起一个报表
         // dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
         // 在这里添加获取安全指数的逻辑
-        getTableList('hidden_danger_safety_index', query).then(res => {
+        getTableList('hidden_danger_safety_index', query, false, { signal: abortController.signal }).then(res => {
           if (res.records && res.records.length > 0) {
             dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
           }
@@ -551,7 +562,7 @@ const handleHiddenDangerPannelData = (query) => {
         })
 
         // 获取隐患排查治理处理进度数据
-        getTableList('hidden_danger_process_progress', query).then(res => {
+        getTableList('hidden_danger_process_progress', query, false, { signal: abortController.signal }).then(res => {
           // if (res.records && res.records.length > 0) {
           //   _data2.flag = true
           //   _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
@@ -605,7 +616,7 @@ const handleHiddenDangerPannelData = (query) => {
 
   try {
     // 获取隐患排查治理TOP3类型数据
-    getTableList('hidden_danger_top', query).then(res => {
+    getTableList('hidden_danger_top', query, false, { signal: abortController.signal }).then(res => {
       if (res.records && res.records.length > 0) {
         dashboardData.value.hiddenDangerData.top3Types = res.records
       }
@@ -624,10 +635,10 @@ const handleRiskTabChange = async (tab: TabType) => {
   try {
     let workOrderType = ''
     switch (tab) {
-      case '安全类':
+      case '安全类事项':
         workOrderType = '安全生产'
         break
-      case '工程类':
+      case '工程类事项':
         workOrderType = '物业服务-工程'
         break
       default:
@@ -640,7 +651,7 @@ const handleRiskTabChange = async (tab: TabType) => {
         workOrderType,
         taskType: '维保任务',
         campus_id: query.campus_id
-      }).catch(error => {
+      }, { signal: abortController.signal }).catch(error => {
         console.error('获取维保任务数据失败:', error)
         return {records: []}
       }),
@@ -648,7 +659,7 @@ const handleRiskTabChange = async (tab: TabType) => {
         workOrderType,
         taskType: '巡检任务',
         campus_id: query.campus_id
-      }).catch(error => {
+      }, { signal: abortController.signal }).catch(error => {
         console.error('获取巡检任务数据失败:', error)
         return {records: []}
       })
@@ -728,6 +739,12 @@ const handleRiskTabChange = async (tab: TabType) => {
   } catch (error) {
     console.error('获取风险统计数据失败:', error)
   }
+
+  // 第一次加载完成后，隐藏骨架屏
+  if (isFirstLoading.value) {
+    isFirstLoading.value = false
+    console.log('隐藏骨架屏')
+  }
 }
 
 // 方法定义
@@ -740,11 +757,6 @@ const onRegionChange = (item: RegionItem): void => {
   })
 }
 
-// 打开区域选择器
-const openRegionSelector = (): void => {
-  regionSelectorVisible.value = true
-}
-
 // 更新时间
 const updateTime = (): void => {
   const now = new Date()

src/views/screen/report/index.ts

@@ -73,24 +73,24 @@ export const exportExcelData = (reportCode, data?) => {
 }
 
 //获取报表数据
-export const getTableList = (reportCode, data?, isOpen?) => {
+export const getTableList = (reportCode, data?, isOpen?, options = {}) => {
-  return request.post({ url: `/jeelowcode/${isOpen ? 'open/report' : 'report-data'}/list/${reportCode}`, data })
+  return request.post({ url: `/jeelowcode/${isOpen ? 'open/report' : 'report-data'}/list/${reportCode}`, data, ...options })
 }
 
-export const getDangerDetail = (campus_id: string) => {
+export const getDangerDetail = (campus_id: string, options = {}) => {
-  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_detail', data: {campus_id} })
+  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_detail', data: {campus_id}, ...options })
 }
 
 export const getZBDangerSum = (campus_id: string) => {
   return request.post({ url: '/jeelowcode/report-data/list/dp_zb_danger_sum', data: {campus_id} })
 }
 
-export const getDangerCount = (campus_id: string) => {
+export const getDangerCount = (campus_id: string, options = {}) => {
-  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_sum', data: {campus_id} })
+  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_sum', data: {campus_id}, ...options })
 }
 
-export const getExamDetail = (campus_id: string) => {
+export const getExamDetail = (campus_id: string, options = {}) => {
-  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_exam_detail', data: {campus_id} })
+  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_exam_detail', data: {campus_id}, ...options })
 }
 
 export const getExamSum = (campus_id: string) => {
@@ -101,13 +101,13 @@ export const getDrillSum = (campus_id: string) => {
     return request.post({ url: '/jeelowcode/report-data/list/dp_zb_drill_sum', data: {campus_id} })
 }
 
-export const getDrillDetail = (campus_id: string) => {
+export const getDrillDetail = (campus_id: string, options = {}) => {
-    return request.post({ url: '/jeelowcode/report-data/list/dp_yq_drill_detail', data: {campus_id} })
+    return request.post({ url: '/jeelowcode/report-data/list/dp_yq_drill_detail', data: {campus_id}, ...options })
 }
 
 //获取报表数据
-export const getTableData = (tableId, data?) => {
+export const getTableData = (tableId, data?, options = {}) => {
-  return request.post({ url: `/jeelowcode/dbform-data/list/${tableId}`, data })
+  return request.post({ url: `/jeelowcode/dbform-data/list/${tableId}`, data, ...options })
 }
 
 /**
@@ -135,8 +135,8 @@ export const batchGetTableList = (reportCodes: string, data?) => {
 // 参数：workOrderType：'物业服务-工程'，taskType：'巡检任务'
 // 统计周期 cycle: day，month，year  对应月日年
 
-export const getWorkOrderStatistics = (data: {workOrderType: string, taskType: string, campus_id?: string}) => {
+export const getWorkOrderStatistics = (data: {workOrderType: string, taskType: string, campus_id?: string}, options = {}) => {
-  return request.post({ url: '/jeelowcode/report-data/list/report_work_order_statistics', data: {...data, pageNo: 1, pageSize: 10} })
+  return request.post({ url: '/jeelowcode/report-data/list/report_work_order_statistics', data: {...data, pageNo: 1, pageSize: 10}, ...options })
 }