[Fix 0000] 修复过渡页数据异常的问题

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

@@ -1,7 +1,8 @@
 <template>
   <div class="dashboard-container">
+    <Skeleton v-if="loading" active class="p-20px"></Skeleton>
     <!-- 内容区域 -->
-    <div class="content-area">
+    <div class="content-area" v-if="!loading">
       <!-- 顶部信息卡片 -->
       <div class="top-info">
         <div class="info-card">
@@ -61,7 +62,7 @@
               <div class="icon-bottom"></div>
             </div>
             <div class="text">高风险<span class="text-sub">（需立即处理）</span></div>
-            <div class="count">{{ alarmStatistics.alarm4 }}</div>
+            <div class="count">{{ get(alarmStatistics, 'alarm4', '-') }}</div>
           </div>
           <div class="stat-item medium-risk">
             <div class="icon">
@@ -69,7 +70,7 @@
               <div class="icon-bottom"></div>
             </div>
             <div class="text">较高风险<span class="text-sub"></span></div>
-            <div class="count">{{ alarmStatistics.alarm3 }}</div>
+            <div class="count">{{ get(alarmStatistics, 'alarm3', '-') }}</div>
           </div>
           <div class="stat-item normal-risk">
             <div class="icon">
@@ -77,7 +78,7 @@
               <div class="icon-bottom"></div>
             </div>
             <div class="text">一般风险<span class="text-sub"></span></div>
-            <div class="count">{{ alarmStatistics.alarm2 }}</div>
+            <div class="count">{{ get(alarmStatistics, 'alarm2', '-') }}</div>
           </div>
           <div class="stat-item low-risk">
             <div class="icon">
@@ -85,7 +86,7 @@
               <div class="icon-bottom"></div>
             </div>
             <div class="text">低风险<span class="text-sub"></span></div>
-            <div class="count">{{ alarmStatistics.alarm1 }}</div>
+            <div class="count">{{ get(alarmStatistics, 'alarm1', '-') }}</div>
           </div>
         </div>
       </div>
@@ -100,6 +101,7 @@
           </div>
         </div>
         <div class="details-content">
+          <Empty v-if="!goafMonitorData.length"></Empty>
           <!-- 第一个预警项 -->
           <div v-for="(item, index) in goafMonitorData" :key="index" class="warning-item">
             <div class="item-header">
@@ -232,16 +234,17 @@
 
 <script setup lang="ts">
   import { useRouter } from 'vue-router';
-  import { useAppStore } from '/@/store/modules/app';
-  import { ref, onMounted } from 'vue';
+  // import { useAppStore } from '/@/store/modules/app';
+  import { ref, watch } from 'vue';
   import { useMineDepartmentStore } from '/@/store/modules/mine';
-  import { getGoafAlarmNum, getGoafData, getMineData, getProvinceAlarm } from '../overhaul.api';
+  import { getGoafAlarmNum, getGoafData, getMineData /*, getProvinceAlarm */ } from '../overhaul.api';
   import { StatusColorEnum } from '/@/enums/jeecgEnum';
   import ConnectAnalysis from '/@/views/analysis/warningAnalysis/connectAnalysis/index.vue';
   import { getOverLimitNum } from '../../SealedGoaf/sealedGoaf.api';
   import { get } from 'lodash-es';
+  import { Empty, Skeleton } from 'ant-design-vue';
 
-  const appStore = useAppStore();
+  // const appStore = useAppStore();
   const mineStore = useMineDepartmentStore();
 
   // 路由实例
@@ -300,11 +303,11 @@
     { label: '温度', key: 'temperature', unit: '°C' },
   ];
 
-  // 3. 预警结果配置
-  const resultColumns = [
-    { label: '数据来源', key: 'readTime', value: '最近2天' }, // 静态数据可以直接写死在配置里，或者从 item 取
-    { label: '预警结果', key: 'alarmLevel', value: '异常' }, // 这里假设是静态展示，如果是动态可改为 key: 'resultStatus'
-  ];
+  // 3. 预警结果配置（已注释，对应模板块已隐藏）
+  // const resultColumns = [
+  //   { label: '数据来源', key: 'readTime', value: '最近2天' },
+  //   { label: '预警结果', key: 'alarmLevel', value: '异常' },
+  // ];
 
   // 4. 异常超限报警配置
   const alarmColumns = [
@@ -324,6 +327,7 @@
 
   // const connectAnalysisRef = ref<any>(null); // 连接分析组件实例
   const isChartVisible = ref(true); // 控制图表显示/隐藏的状态
+  const loading = ref(false);
 
   // 1. 用于存储展开状态的索引集合 (key: index, value: boolean)
   const expandedIndices = ref<Record<number, boolean>>({});
@@ -557,13 +561,14 @@
     try {
       // 异步获取所有接口数据（并行请求提升性能）
       const [goafAlarmNum, goafData, mineData, alarmData] = await Promise.all([
-        getGoafAlarmNum(appStore.simpleMapParams), // 预警统计
-        getGoafData(appStore.simpleMapParams), // 密闭监测数据
-        getMineData(appStore.simpleMapParams), // 煤矿基础信息数据
-        // getProvinceAlarm(appStore.simpleMapParams), // 预警信息列表
-        getOverLimitNum(appStore.simpleMapParams),
+        getGoafAlarmNum({ deptId: mineStore.getDepartId }), // 预警统计
+        getGoafData({ deptId: mineStore.getDepartId }), // 密闭监测数据
+        getMineData({ deptId: mineStore.getDepartId }), // 煤矿基础信息数据
+        // getProvinceAlarm({ deptId: mineStore.getDepartId }), // 预警信息列表
+        getOverLimitNum({ deptId: mineStore.getDepartId }),
       ]);
-      alarmStatistics.value = goafAlarmNum[0];
+
+      alarmStatistics.value = goafAlarmNum[0] || {};
       goafMonitorData.value = goafData.records;
       // basicInfo.value = mineData.records[0];
       mineAlarmData.value = alarmData.reduce((obj, e) => {
@@ -596,10 +601,16 @@
       console.error('数据获取/配置更新失败：', error);
     }
   }
-  onMounted(() => {
-    fetchLeafData();
-    console.log('当前页面的参数：', mineStore.getRoot);
-  });
+
+  watch(
+    () => mineStore.getDepartId,
+    async () => {
+      loading.value = true;
+      await fetchLeafData();
+      loading.value = false;
+    },
+    { immediate: true }
+  );
 
   // 页面逻辑代码
 </script>
@@ -920,8 +931,8 @@
   }
 
   .details-content {
-    height: 350px;
-    overflow-y: scroll;
+    max-height: 350px;
+    overflow-y: auto;
     scroll-snap-type: y mandatory;
   }
 

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

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard-container">
-    <Spin class="w-full h-full" v-if="!isDataLoaded"></Spin>
-    <div class="content-area" v-if="isDataLoaded">
+    <Skeleton v-if="loading" active class="p-20px"></Skeleton>
+    <div class="content-area" v-if="!loading">
       <!-- 顶部信息卡片 -->
       <div class="top-info">
         <!-- {{ mineStore.getRoot }} -->
@@ -51,7 +51,7 @@
               <div class="icon-bottom"></div>
             </div>
             <div class="text">超限异常报警</div>
-            <div class="count">{{ realtimeWarning.overLimitCount }}</div>
+            <div class="count">{{ get(realtimeWarning, 'overLimitCount', '-') }}</div>
           </div>
           <div class="stat-item medium-risk">
             <div class="icon">
@@ -59,7 +59,7 @@
               <div class="icon-bottom"></div>
             </div>
             <div class="text">预测预警</div>
-            <div class="count">{{ realtimeWarning.alarmInfoCount }}</div>
+            <div class="count">{{ get(realtimeWarning, 'alarmInfoCount', '-') }}</div>
           </div>
           <div class="stat-item normal-risk">
             <div class="icon">
@@ -67,7 +67,7 @@
               <div class="icon-bottom"></div>
             </div>
             <div class="text">数据中断</div>
-            <div class="count">{{ realtimeWarning.dataBreakCount }}</div>
+            <div class="count">{{ get(realtimeWarning, 'dataBreakCount', '-') }}</div>
           </div>
           <div class="stat-item low-risk">
             <div class="icon">
@@ -75,7 +75,7 @@
               <div class="icon-bottom"></div>
             </div>
             <div class="text">数据质量</div>
-            <div class="count">{{ realtimeWarning.dataQualityCount }}</div>
+            <div class="count">{{ get(realtimeWarning, 'dataQualityCount', '-') }}</div>
           </div>
         </div>
       </div>
@@ -175,7 +175,7 @@
 </template>
 <script setup lang="ts">
   import { useRouter } from 'vue-router';
-  import { onMounted, ref } from 'vue';
+  import { ref, watch } from 'vue';
   import { getAlarmType, getGoafAccessCount, getHistoryAlarmNum, getMineData, getRealAlarmNum, getGoafData } from '../overhaul.api';
   import { columns } from '../overhaul.data';
   import { useMineDepartmentStore } from '/@/store/modules/mine';
@@ -186,10 +186,11 @@
   import { StatusColorEnum } from '/@/enums/jeecgEnum';
   import { BasicTable } from '/@/components/Table';
   import { BasicModal } from '/@/components/Modal';
-  import { Spin } from 'ant-design-vue';
+  import { Skeleton } from 'ant-design-vue';
   import { EChartsOption, graphic } from 'echarts';
   import IMG1 from '/@/assets/images/overHaul/rootPage/pie-chart-center.png';
   import IMG2 from '/@/assets/images/overHaul/rootPage/alarm-icon-9.svg';
+  import { get } from 'lodash-es';
 
   // 处理矿名选择器相关的逻辑
   const isDetailModalVisible = ref(false);
@@ -249,7 +250,7 @@
   const router = useRouter();
   const mineStore = useMineDepartmentStore();
   // 数据加载状态
-  const isDataLoaded = ref(false);
+  const loading = ref(false);
   const accessStatics = ref<any[]>([]);
   // 控制图表显示/隐藏的状态
   const isChartVisible = ref(true);
@@ -278,48 +279,53 @@
   //   // {key: 'leakageAlarm', label: '漏风'},
   //   // {key: 'unsealAlarm', label: '密闭启封'},
   // ];
-  async function fetchAccessStatics() {
-    accessStatics.value = await getGoafAccessCount({ deptId: mineStore.getRootId });
-  }
-
+  /**
+   * 单一刷新方法：并行获取所有接口数据，统一处理空数组/undefined 兜底
+   */
   const realtimeWarning = ref<any>({});
-  async function fetchRealtimeWarning() {
-    realtimeWarning.value = await getRealAlarmNum({ deptId: mineStore.getRootId });
-  }
-
   const alarmType = ref<any[]>([]);
-  async function fetchAlarmType() {
-    const result = await getAlarmType({
-      deptId: mineStore.getRootId,
-      startTime: dayjs().add(-6, 'months').format('YYYY-MM-DD HH:mm:ss'),
-      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-    });
-    alarmType.value = result.map((e) => ({
+  const historyAlarmNum = ref<any[]>([]);
+  const mineData = ref<any>([]);
+
+  async function fetchAllData() {
+    const deptId = mineStore.getDepartId;
+    if (!deptId) return;
+
+    const [accessResult, realtimeResult, alarmTypeResult, historyResult, mineResult] = await Promise.all([
+      getGoafAccessCount({ deptId }),
+      getRealAlarmNum({ deptId }),
+      getAlarmType({
+        deptId,
+        startTime: dayjs().add(-6, 'months').format('YYYY-MM-DD HH:mm:ss'),
+        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      }),
+      getHistoryAlarmNum({
+        deptId,
+        startTime: dayjs().add(-6, 'months').format('YYYY-MM-DD HH:mm:ss'),
+        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      }),
+      getMineData({ deptId }),
+    ]);
+
+    // —— 兜底处理：接口返回空数组/undefined 时使用安全的默认值 ——
+    accessStatics.value = Array.isArray(accessResult) ? accessResult : [];
+    realtimeWarning.value = realtimeResult ?? {};
+
+    const alarmTypeList = Array.isArray(alarmTypeResult) ? alarmTypeResult : [];
+    alarmType.value = alarmTypeList.map((e) => ({
       key: e.alarm_type,
       name: e.name,
       value: e.num,
     }));
-  }
 
-  const historyAlarmNum = ref<any[]>([]);
-  async function fetchHistoryAlarmNum() {
-    const result = await getHistoryAlarmNum({
-      deptId: mineStore.getRootId,
-      startTime: dayjs().add(-6, 'months').format('YYYY-MM-DD HH:mm:ss'),
-      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-    });
-    historyAlarmNum.value = result.map((e) => ({
+    const historyList = Array.isArray(historyResult) ? historyResult : [];
+    historyAlarmNum.value = historyList.map((e) => ({
       name: e.mine_name,
       value: e.num,
     }));
-  }
 
-  const mineData = ref<any>([]);
-  async function fetchMineData() {
-    const { records } = await getMineData({
-      deptId: mineStore.getRootId,
-    });
-    mineData.value = records;
+    const mineRecords = Array.isArray(mineResult?.records) ? mineResult.records : [];
+    mineData.value = mineRecords;
   }
 
   /**
@@ -635,10 +641,18 @@
     ],
   };
 
-  onMounted(async () => {
-    await Promise.all([fetchAccessStatics(), fetchRealtimeWarning(), fetchAlarmType(), fetchHistoryAlarmNum(), fetchMineData()]);
-    isDataLoaded.value = true;
-  });
+  watch(
+    () => mineStore.getDepartId,
+    async (newId) => {
+      if (!newId) return;
+      loading.value = true;
+      await fetchAllData();
+      loading.value = false;
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 <style lang="less" scoped>
   .dashboard-container {
@@ -741,7 +755,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    overflow-y: scroll;
+    overflow-y: auto;
     gap: 15px;
   }
   .card-item {
@@ -951,8 +965,8 @@
     }
   }
   .details-content {
-    height: 450px;
-    overflow-y: scroll;
+    max-height: 450px;
+    overflow-y: auto;
     scroll-snap-type: y mandatory;
   }