[Fix 0000] 过渡页闪烁、地图可配置模块不正确、历史数据排序错误等问题修复

index.html

@@ -165,7 +165,7 @@
     <script src="/js/global.js"></script>
     <script type="module" src="/src/main.ts"></script>
     <!-- 百度统计 -->
-    <script>
+    <!-- <script>
       var _hmt = _hmt || [];
       (function () {
         var hm = document.createElement('script');
@@ -173,6 +173,6 @@
         var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(hm, s);
       })();
-    </script>
+    </script> -->
   </body>
 </html>

src/layouts/default/feature/SimpleMap.vue

@@ -66,7 +66,7 @@
 
   // 用于存储历史节点的栈，实现返回上一级功能
   const historyStack = ref([DEFAULT_NODE]);
-  const isTopLevel = computed(() => historyStack.value.length === 1);
+  const isTopLevel = computed(() => get(historyStack.value, 'length', 1) === 1);
 
   /** 根据GeoJSON文件绘制省市边界和填充色到地图上，其将作为一个新图层 */
   function initMapGeoJSON(map: vjmap.Map, geojson) {
@@ -199,8 +199,8 @@
       callback() {
         // 切换显示CAD图
         toggleCADMap(true, node).then(() => {
-          appStore.setSimpleMapParams({ deptId: node.id, isLeaf: true });
-          historyStack.value.push(node);
+          mineStore.setDepartById(node.id);
+          // historyStack.value.push(node);
         });
       },
     });
@@ -274,6 +274,8 @@
         initMapGeoJSON(map, geojson);
         initMapMarker(map, markers);
       }
+    } catch (e) {
+      console.error('地图初始化错误', e);
     } finally {
       mapLoading.value = false;
     }
@@ -300,6 +302,10 @@
 
       // 此外如果是非矿端那么模拟触发地图点击事件
       markerClickHandler();
+
+      if (mineStore.getDepart?.isLeaf) {
+        appStore.setSimpleMapParams({ deptId: id, isLeaf: true });
+      }
     }
   );
 

src/layouts/default/feature/components/LeafPopup.vue

@@ -90,10 +90,10 @@
   const alarmLevelColor = ref([StatusColorEnum.red, StatusColorEnum.blue, StatusColorEnum.gold, StatusColorEnum.purple, StatusColorEnum.red]);
 
   const coalSeamList = computed(() => {
-    return props.node.coalSeamList;
+    return JSON.parse(props.node.coalSeamList);
   });
   const goafDataList = computed(() => {
-    return props.node.goafDataList;
+    return JSON.parse(props.node.goafDataList);
   });
 </script>
 <style lang="less">

src/views/analysis/warningAnalysis/connectAnalysis/AnalysisChart.vue

@@ -174,6 +174,7 @@
       endTime: endTime,
       goafId: goafId.value,
       deptId: innerValue.value,
+      sort: 'asc',
       ...(props.requestParams || {}),
     });
     if (res) {

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

@@ -203,7 +203,7 @@
         <div class="alarm-content">
           <div v-for="(alarm, index) in alarmColumns" :key="index" class="alarm-item">
             <div class="alarm-name">{{ alarm.label }}</div>
-            <div class="alarm-count">{{ mineAlarmData[alarm.key] ?? '-' }}</div>
+            <div class="alarm-count">{{ mineAlarmData?.[alarm.key] || '-' }}</div>
             <div class="alarm-border">
               <div class="alarm-border-icon"></div>
               <div class="alarm-border-line"></div>
@@ -232,9 +232,9 @@
 </template>
 
 <script setup lang="ts">
-  import { useRouter, useRoute } from 'vue-router';
+  import { useRouter } from 'vue-router';
   import { useAppStore } from '/@/store/modules/app';
-  import { computed, ref, watch, onMounted, nextTick } from 'vue';
+  import { ref, onMounted } from 'vue';
   import { useMineDepartmentStore } from '/@/store/modules/mine';
   import { getGoafAlarmNum, getGoafData, getMineData, getProvinceAlarm } from '../overhaul.api';
   import { StatusColorEnum } from '/@/enums/jeecgEnum';
@@ -245,7 +245,6 @@
 
   // 路由实例
   const router = useRouter();
-  const route = useRoute();
 
   // 1. 定义数据类型接口
   interface GoafMonitorItem {
@@ -322,7 +321,7 @@
   const goafMonitorData = ref<GoafMonitorItem[]>([]); //密闭监测详情数据
   const mineAlarmData = ref<any>({}); // 煤矿预警数据
 
-  const connectAnalysisRef = ref<any>(null); // 连接分析组件实例
+  // const connectAnalysisRef = ref<any>(null); // 连接分析组件实例
   const isChartVisible = ref(true); // 控制图表显示/隐藏的状态
 
   // 1. 用于存储展开状态的索引集合 (key: index, value: boolean)
@@ -452,7 +451,7 @@
     }
 
     if (key === 'gasLevelName') {
-      if ( !value ) return { text: value ?? '-', color: '#333' };
+      if (!value) return { text: value ?? '-', color: '#333' };
       // 瓦斯等级特殊处理
       const val = String(value);
       if (val.includes('低瓦斯')) {
@@ -466,7 +465,7 @@
     }
 
     if (key === 'gjMineStatus') {
-      if ( !value ) return { text: value ?? '-', color: '#333' };
+      if (!value) return { text: value ?? '-', color: '#333' };
       // 生产状态特殊处理
       const val = String(value);
       if (val.includes('正常生产')) {
@@ -509,8 +508,8 @@
       .catch((err) => {
         console.error('跳转失败:', err);
       });
-  };
-   /**
+  }
+  /**
    * 计算持续时间
    * @param earliestTimeStr 开始时间字符串
    * @param latestReadTimeStr 结束时间字符串
@@ -567,7 +566,7 @@
       // basicInfo.value = mineData.records[0];
       mineAlarmData.value = alarmData.records[0];
 
-       // 处理煤矿基础信息并计算持续时间
+      // 处理煤矿基础信息并计算持续时间
       const mineRecord = mineData.records[0];
       if (mineRecord) {
         // 获取最早预警时间
@@ -577,17 +576,17 @@
 
         // 调用抽取的方法计算持续时间
         mineRecord.chixuTime = calculateDuration(earliestTimeStr, latestReadTimeStr);
-        
+
         basicInfo.value = mineRecord;
       } else {
         basicInfo.value = {};
       }
 
-      nextTick(() => {
-        if (connectAnalysisRef.value && typeof connectAnalysisRef.value.generateChart === 'function') {
-          connectAnalysisRef.value.generateChart();
-        }
-      });
+      // nextTick(() => {
+      //   if (connectAnalysisRef.value && typeof connectAnalysisRef.value.generateChart === 'function') {
+      //     connectAnalysisRef.value.generateChart();
+      //   }
+      // });
     } catch (error) {
       console.error('数据获取/配置更新失败：', error);
     }
@@ -601,705 +600,694 @@
 </script>
 
 <style scoped>
-.dashboard-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: scroll;
-}
-
-.content-area {
-  flex: 1;
-  padding: 20px;
-  background-color: #f0f8ff;
-}
-
-.top-info {
-  width: 100%;
-  height: 200px;
-  margin-bottom: 20px;
-}
-
-.info-card {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  background-image: url('/@/assets/images/overHaul/leafPage/info-card-bg.png');
-  background-repeat: no-repeat;
-  background-size: 100%;
-  border-radius: 8px;
-  padding: 20px;
-}
-
-.card-title {
-  width: 20%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 8px 10px 8px 50px;
+  .dashboard-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: scroll;
+  }
 
-  .btn {
-    color: #fff;
-    background-color: #2b6ff0;
+  .content-area {
+    flex: 1;
+    padding: 20px;
+    background-color: #f0f8ff;
+  }
 
-    &:hover {
-      background-color: #397af3;
-    }
+  .top-info {
+    width: 100%;
+    height: 200px;
+    margin-bottom: 20px;
   }
-}
-.info-border {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  .info-border-icon {
-    width: 16px;
-    height: 16px;
-    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
+
+  .info-card {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    background-image: url('/@/assets/images/overHaul/leafPage/info-card-bg.png');
     background-repeat: no-repeat;
     background-size: 100%;
+    border-radius: 8px;
+    padding: 20px;
+  }
 
+  .card-title {
+    width: 20%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 8px 10px 8px 50px;
+
+    .btn {
+      color: #fff;
+      background-color: #2b6ff0;
+
+      &:hover {
+        background-color: #397af3;
+      }
+    }
   }
-  .info-border-line {
-    width: 1px;
-    height: 95px;
-    border-left: 2px dotted #397af3;
-    margin-left: 7px;
+  .info-border {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    .info-border-icon {
+      width: 16px;
+      height: 16px;
+      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+    }
+    .info-border-line {
+      width: 1px;
+      height: 95px;
+      border-left: 2px dotted #397af3;
+      margin-left: 7px;
+    }
   }
-}
-.info-details {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 8px 0;
-  
-  .label {
-    font-size: 16px;
-    color: #000;
+  .info-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 8px 0;
+
+    .label {
+      font-size: 16px;
+      color: #000;
+    }
+
+    .value {
+      font-size: 16px;
+      color: #000;
+    }
+
+    .tag {
+      width: fit-content;
+      height: 24px;
+      padding: 2px 8px;
+      border-radius: 15px;
+      font-size: 12px;
+      background-color: #ff6b6b;
+      color: white;
+    }
   }
 
-  .value {
+  .card-details {
+    width: 80%;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 8px;
+  }
+  .info-card-item {
+    max-width: 245px;
+    height: 70px;
+    position: relative;
+    padding: 8px 10px 8px 40px;
+    background-color: #f1f7ff;
+    border-radius: 4px;
+    text-align: left;
+  }
+  .card-border {
+    width: 20px;
+    height: 50px;
+    position: absolute;
+    top: 14px;
+    left: 15px;
+
+    .card-border-icon {
+      width: 16px;
+      height: 16px;
+      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+    }
+    .card-border-line {
+      width: 1px;
+      height: 30px;
+      border-left: 2px dotted #397af3;
+      margin-left: 7px;
+    }
+  }
+
+  .card-label {
     font-size: 16px;
     color: #000;
+    font-weight: bold;
+    margin-bottom: 8px;
   }
 
-  .tag {
-    width: fit-content;
-    height: 24px;
-    padding: 2px 8px;
-    border-radius: 15px;
-    font-size: 12px;
-    background-color: #ff6b6b;
-    color: white;
+  .card-value-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
   }
-}
-
-.card-details {
-  width: 80%;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 8px;
-}
-.info-card-item {
-  max-width: 245px;
-  height: 70px;
-  position: relative;
-  padding: 8px 10px 8px 40px;;
-  background-color: #f1f7ff;
-  border-radius: 4px;
-  text-align: left;
-}
-.card-border {
-  width: 20px;
-  height: 50px;
-  position: absolute;
-  top: 14px;
-  left: 15px;
-
-  .card-border-icon{
-    width: 16px;
-    height: 16px;
-    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;
 
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
   }
-  .card-border-line{
-    width: 1px;
-    height: 30px;
-    border-left: 2px dotted #397af3;
-    margin-left: 7px;
+
+  .card-value-text {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
   }
-}
-
-.card-label {
-  font-size: 16px;
-  color: #000;
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.card-value-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  display: inline-block;
-  flex-shrink: 0;
-
-}
-
-.card-value-text {
-  font-size: 14px;
-  color: #333;
-  font-weight: bold;
-}
-
-
-
-.warning-statistics {
-  background-color: #ffffff;
-  margin-bottom: 20px;
-  padding: 10px 12px;
-  border-radius: 4px;
-}
-
-.statistics-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #333;
-}
-
-.btn-group {
-  display: flex;
-  gap: 8px;
-}
-
-.btn {
-  color: #2b6ff0;
-  padding: 6px 12px;
-  border: 1px solid #2b6ff0;
-  border-radius: 4px;
-  background-color: #E9F0FE;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.btn:hover {
-  background-color: #f5f5f5;
-}
-
-.statistics-content {
-  display: flex;
-  gap: 50px;
-}
-
-.stat-item {
-  flex: 1;
-  min-height: 80px;
-  padding: 16px 50px 10px 90px;
-  text-align: left;
-  position: relative;
-  overflow: hidden;
-  background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
-  background-repeat: no-repeat;
-  background-size: 100%;
-
-  .icon {
-    position: absolute;
-    top: 15px;
-    left: 20px;
+
+  .warning-statistics {
+    background-color: #ffffff;
+    margin-bottom: 20px;
+    padding: 10px 12px;
+    border-radius: 4px;
   }
-  .text {
+
+  .statistics-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title {
     font-size: 16px;
-    color: #000;
     font-weight: bold;
-    .text-sub {
-      font-size: 12px;
-      color: #989587;
-    }
+    color: #333;
   }
-  .count {
-    font-size: 24px;
-    font-weight: bold;
+
+  .btn-group {
+    display: flex;
+    gap: 8px;
   }
 
-  .icon-top{
-    width: 40px;
-    height: 40px;
-    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;;
+  .btn {
+    color: #2b6ff0;
+    padding: 6px 12px;
+    border: 1px solid #2b6ff0;
+    border-radius: 4px;
+    background-color: #e9f0fe;
+    cursor: pointer;
+    font-size: 12px;
+  }
+
+  .btn:hover {
+    background-color: #f5f5f5;
+  }
+
+  .statistics-content {
+    display: flex;
+    gap: 50px;
   }
-  .icon-bottom{
-    width: 40px;
-    height: 20px;
-    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
+
+  .stat-item {
+    flex: 1;
+    min-height: 80px;
+    padding: 16px 50px 10px 90px;
+    text-align: left;
+    position: relative;
+    overflow: hidden;
+    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
     background-repeat: no-repeat;
     background-size: 100%;
-    margin-top: -5px;
+
+    .icon {
+      position: absolute;
+      top: 15px;
+      left: 20px;
+    }
+    .text {
+      font-size: 16px;
+      color: #000;
+      font-weight: bold;
+      .text-sub {
+        font-size: 12px;
+        color: #989587;
+      }
+    }
+    .count {
+      font-size: 24px;
+      font-weight: bold;
+    }
+
+    .icon-top {
+      width: 40px;
+      height: 40px;
+      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+    }
+    .icon-bottom {
+      width: 40px;
+      height: 20px;
+      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
+      background-repeat: no-repeat;
+      background-size: 100%;
+      margin-top: -5px;
+    }
   }
-}
 
-.stat-item.high-risk {
-  background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
-  .icon-top {
-    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
+  .stat-item.high-risk {
+    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
+    .icon-top {
+      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
+    }
+    .icon-bottom {
+      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
+    }
+    .count {
+      color: #ff0000;
+    }
   }
-  .icon-bottom {
-    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
+
+  .stat-item.medium-risk {
+    background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-bg.png');
+    .icon-top {
+      background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon1.svg');
+    }
+    .icon-bottom {
+      background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon2.png');
+    }
+    .count {
+      color: #ff7700;
+    }
   }
-  .count {
-    color: #FF0000;
+
+  .stat-item.normal-risk {
+    background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-bg.png');
+    .icon-top {
+      background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon1.svg');
+    }
+    .icon-bottom {
+      background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon2.png');
+    }
+    .count {
+      color: #d5c702;
+    }
   }
-}
 
-.stat-item.medium-risk {
-  background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-bg.png');
-  .icon-top {
-    background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon1.svg');
+  .stat-item.low-risk {
+    background-image: url('/@/assets/images/overHaul/leafPage/low-risk-bg.png');
+    .icon-top {
+      background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon1.svg');
+    }
+    .icon-bottom {
+      background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon2.png');
+    }
+    .count {
+      color: #0070ff;
+    }
   }
-  .icon-bottom {
-    background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon2.png');
+
+  .warning-details {
+    background-color: #ffffff;
+    margin-bottom: 20px;
+    padding: 10px 12px;
+    border-radius: 4px;
   }
-  .count {
-    color: #FF7700;
+
+  .details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
   }
-}
 
-.stat-item.normal-risk {
-  background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-bg.png');
-  .icon-top {
-    background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon1.svg');
+  .details-content {
+    height: 350px;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
   }
-  .icon-bottom {
-    background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon2.png');
+
+  .warning-item {
+    margin-bottom: 16px;
+    background-color: rgba(218, 234, 251, 0.5);
+    border-radius: 8px;
+    padding: 16px 10px;
+    scroll-snap-align: start;
   }
-  .count {
-    color: #D5C702;
+
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 10px;
+    margin-bottom: 14px;
+    border-bottom: 1px solid rgba(43, 111, 240, 0.2);
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+    }
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+      margin: 0 15px 0px 5px;
+    }
+
+    .risk-level {
+      width: fit-content;
+      height: 24px;
+      padding: 2px 8px;
+      border-radius: 15px;
+      font-size: 12px;
+      background-color: #ff6b6b;
+      color: white;
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+    }
+
+    .expand-btn {
+      color: #2b6ff0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 12px;
+      border: 1px solid #2b6ff0;
+      border-radius: 4px;
+      background-color: #e9f0fe;
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    .expand-btn:hover {
+      color: #1a5cc8;
+    }
+
+    .arrow-icon-wrapper {
+      width: 16px;
+      height: 16px;
+      position: relative;
+      display: inline-block;
+    }
+
+    .arrow-icon {
+      width: 16px;
+      height: 16px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-image: url('/@/assets/images/overHaul/leafPage/icon-down1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      transition: transform 0.3s ease;
+    }
+
+    .arrow-icon.rotate {
+      transform: translate(-50%, -50%) rotate(180deg);
+    }
+  }
+
+  .data-row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 12px;
   }
-}
 
-.stat-item.low-risk {
-  background-image: url('/@/assets/images/overHaul/leafPage/low-risk-bg.png');
-  .icon-top {
-    background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon1.svg');
+  .data-col {
+    width: 100%;
+    height: 80px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    padding: 0 16px 0 30px;
+    background-image: url('/@/assets/images/overHaul/leafPage/warning-item-bg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    border-radius: 4px;
+    font-size: 12px;
+
+    .col-title {
+      color: #000;
+      font-size: 14px;
+      margin-bottom: 5px;
+    }
+    .col-value {
+      color: #000;
+      font-size: 14px;
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+    }
+    .col-icon {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      width: 18px;
+      height: 18px;
+      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+    }
   }
-  .icon-bottom {
-    background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon2.png');
+
+  .monitoring-indicators {
+    display: flex;
+    gap: 20px;
+    margin-top: 20px;
   }
-  .count {
-    color: #0070FF;
+
+  .indicator-group {
+    display: flex;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    min-width: 0;
+    flex: 1;
   }
-}
-
-.warning-details {
-  background-color: #ffffff;
-  margin-bottom: 20px;
-  padding: 10px 12px;
-  border-radius: 4px;
-}
-
-.details-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.details-content {
-  height: 350px;
-  overflow-y: scroll;
-  scroll-snap-type: y mandatory;
-}
-
-.warning-item {
-  margin-bottom: 16px;
-  background-color: rgba(218, 234, 251, 0.5);
-  border-radius: 8px;
-  padding: 16px 10px;
-  scroll-snap-align: start;
-}
-
-.item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-bottom: 10px;
-  margin-bottom: 14px;
-  border-bottom: 1px solid rgba(43, 111, 240, 0.2); 
-
-  .icon {
-    width: 16px;
-    height: 16px;
-    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;
+
+  .indicator-group:nth-child(1) {
+    flex: 4;
   }
-  .name {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-    margin: 0 15px 0px 5px;
+
+  .indicator-group:nth-child(2) {
+    flex: 4;
   }
 
-  .risk-level {
-    width: fit-content;
-    height: 24px;
-    padding: 2px 8px;
-    border-radius: 15px;
-    font-size: 12px;
-    background-color: #ff6b6b;
-    color: white;
+  .indicator-group:nth-child(3) {
+    flex: 2;
   }
 
-  
-  .header-left {
+  .group-title {
+    width: 120px;
     display: flex;
+    flex-direction: column;
     align-items: center;
+    text-align: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: bold;
+    color: #000;
+    background-color: rgba(192, 222, 255, 0.6);
+
+    .title-icon-top {
+      width: 30px;
+      height: 30px;
+      background-image: url('/@/assets/images/overHaul/leafPage/icon-top1.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+      margin-bottom: -5px;
+    }
+    .icon-outer {
+      background-image: url('/@/assets/images/overHaul/leafPage/icon-top2.svg');
+    }
+    .icon-result {
+      background-image: url('/@/assets/images/overHaul/leafPage/icon-top3.svg');
+    }
+    .title-icon-bottom {
+      width: 50px;
+      height: 23px;
+      background-image: url('/@/assets/images/overHaul/leafPage/icon-bottom.png');
+      background-repeat: no-repeat;
+      background-size: 100%;
+    }
   }
 
-  .expand-btn {
-    color: #2b6ff0;
+  .indicator-area {
+    width: calc(100% - 120px);
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    padding: 10px 16px;
+  }
+  .indicator-result {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .indicator-item {
+    height: 30px;
+    line-height: 30px;
     display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 6px 12px;
-    border: 1px solid #2b6ff0;
+    justify-content: space-between;
+    background: linear-gradient(90deg, rgba(192, 222, 255, 0.5) 0%, rgba(192, 222, 255, 0.2) 100%);
     border-radius: 4px;
-    background-color: #E9F0FE;
-    cursor: pointer;
-    font-size: 12px;
+    margin-bottom: 8px;
+    padding: 0 4px;
+    .value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+      flex: 1;
+      text-align: right;
+    }
   }
 
-  .expand-btn:hover {
-    color: #1a5cc8;
+  /* 预警结果只有两行，用来占位的 item */
+  .placeholder-item {
+    visibility: hidden;
+    height: 30px;
+    margin-bottom: 8px;
+    background: transparent;
+    pointer-events: none;
   }
 
-  .arrow-icon-wrapper {
-    width: 16px;
-    height: 16px;
-    position: relative;
-    display: inline-block;
+  .indicator-result .indicator-item:last-of-type {
+    margin-bottom: 8px;
   }
 
-  .arrow-icon {
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-down1.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    transition: transform 0.3s ease;
+  .indicator-item:last-child {
+    border-bottom: none;
   }
 
-  .arrow-icon.rotate {
-    transform: translate(-50%, -50%) rotate(180deg);
+  .abnormal-alarm {
+    background-color: #fff;
+    margin-bottom: 20px;
+    padding: 10px 12px;
+    border-radius: 4px;
   }
 
+  .alarm-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
 
-}
-
-.data-row {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 12px;
-}
-
-.data-col {
-  width: 100%;
-  height: 80px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  justify-content: center ;
-  padding: 0 16px 0 30px;
-  background-image: url('/@/assets/images/overHaul/leafPage/warning-item-bg.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  border-radius: 4px;
-  font-size: 12px;
-
-  .col-title {
-    color: #000;
-    font-size: 14px;
-    margin-bottom: 5px;
+  .alarm-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
   }
-  .col-value {
+
+  .alarm-item {
+    flex: 1;
+    min-width: 120px;
+    height: 70px;
+    position: relative;
+    padding: 8px 10px 8px 40px;
+    background-color: rgba(215, 233, 253, 0.9);
+    border-radius: 4px;
+    text-align: left;
+  }
+
+  .alarm-name {
+    font-size: 16px;
     color: #000;
-    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
 
-    .status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      display: inline-block;
-    }
+  .alarm-count {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
   }
-  .col-icon {
+  .alarm-border {
+    width: 20px;
+    height: 50px;
     position: absolute;
-    top: 10px;
-    left: 10px;
-    width: 18px;
-    height: 18px;
-    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;
+    top: 14px;
+    left: 15px;
+
+    .alarm-border-icon {
+      width: 16px;
+      height: 16px;
+      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+    }
+    .alarm-border-line {
+      width: 1px;
+      height: 30px;
+      border-left: 2px dotted #397af3;
+      margin-left: 7px;
+    }
   }
-}
-
-.monitoring-indicators {
-  display: flex;
-  gap: 20px;
-  margin-top: 20px;
-}
-
-.indicator-group {
-  display: flex;
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  min-width: 0;
-  flex: 1;
-}
-
-.indicator-group:nth-child(1) {
-  flex: 4;
-}
-
-.indicator-group:nth-child(2) {
-  flex: 4;
-}
-
-.indicator-group:nth-child(3) {
-  flex: 2;
-}
-
-.group-title {
-  width: 120px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-  color: #000;
-  background-color: rgba(192, 222, 255, 0.6);
-
-  .title-icon-top {
+  .alarm-border-bottom {
     width: 30px;
     height: 30px;
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-top1.svg');
+    background-image: url('/@/assets/images/overHaul/leafPage/alarm-card-icon.png');
     background-repeat: no-repeat;
     background-size: 100%;
-    margin-bottom: -5px;
-  }
-  .icon-outer{
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-top2.svg');
+    position: absolute;
+    right: 0;
+    bottom: 0;
   }
-  .icon-result{ 
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-top3.svg');
+
+  .historical-data {
+    background-color: #fff;
+    margin-bottom: 20px;
+    padding: 10px 12px;
+    border-radius: 4px;
   }
-  .title-icon-bottom{
-    width: 50px;
-    height: 23px;
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-bottom.png');
-    background-repeat: no-repeat;
-    background-size: 100%;
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
-}
-
-.indicator-area {
-  width: calc(100% - 120px);
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-  padding: 10px 16px;
-
-}
-.indicator-result {
-  grid-template-columns: repeat(1, 1fr);
-}
-
-.indicator-item {
-  height: 30px;
-  line-height: 30px;
-  display: flex;
-  justify-content: space-between;
-  background: linear-gradient(90deg, rgba(192, 222, 255, 0.5) 0%, rgba(192, 222, 255, 0.2) 100%);
-  border-radius: 4px;
-  margin-bottom: 8px;
-  padding: 0 4px;
-   .value {
+
+  .chart-content {
+    padding: 0;
+    height: 600px;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    flex: 1;
-    text-align: right;
-   }
-}
-
-/* 预警结果只有两行，用来占位的 item */
-.placeholder-item {
-  visibility: hidden;
-  height: 30px;
-  margin-bottom: 8px;
-  background: transparent;
-  pointer-events: none;
-}
-
-.indicator-result .indicator-item:last-of-type {
-   margin-bottom: 8px; 
-}
-
-.indicator-item:last-child {
-  border-bottom: none;
-}
-
-
-.abnormal-alarm {
-  background-color: #fff;
-  margin-bottom: 20px;
-  padding: 10px 12px;
-  border-radius: 4px;
-}
-
-.alarm-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.alarm-content {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.alarm-item {
-  flex: 1;
-  min-width: 120px;
-  height: 70px;
-  position: relative;
-  padding: 8px 10px 8px 40px;;
-  background-color: rgba(215, 233, 253, 0.9);
-  border-radius: 4px;
-  text-align: left;
-}
-
-.alarm-name {
-  font-size: 16px;
-  color: #000;
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.alarm-count {
-  font-size: 14px;
-  color: #333;
-  font-weight: bold;
-}
-.alarm-border {
-  width: 20px;
-  height: 50px;
-  position: absolute;
-  top: 14px;
-  left: 15px;
-
-  .alarm-border-icon{
-    width: 16px;
-    height: 16px;
-    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;
+    position: relative;
+  }
 
+  /* 深度选择器：重置 ConnectAnalysis 的样式以适配嵌入环境 */
+  :deep(.connectAnalysis) {
+    margin: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    display: flex;
+    flex-direction: column;
   }
-  .alarm-border-line{
-    width: 1px;
-    height: 30px;
-    border-left: 2px dotted #397af3;
-    margin-left: 7px;
+
+  :deep(.filter-area) {
+    width: 100%;
+  }
+
+  :deep(.echart-box) {
+    /* 让图表区域占据剩余所有高度 */
+    flex: 1;
+    height: auto !important;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+  }
+
+  :deep(.echart-content) {
+    flex: 1;
+    height: auto !important;
+    min-height: 300px;
   }
-}
-.alarm-border-bottom{ 
-  width: 30px;
-  height: 30px;
-  background-image: url('/@/assets/images/overHaul/leafPage/alarm-card-icon.png');
-  background-repeat: no-repeat;
-  background-size: 100%;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-
-.historical-data {
-  background-color: #fff;
-  margin-bottom: 20px;
-  padding: 10px 12px;
-  border-radius: 4px;
-}
-
-.chart-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.chart-content {
-  padding: 0;
-  height: 600px; 
-  overflow: hidden;
-  position: relative;
-}
-
-/* 深度选择器：重置 ConnectAnalysis 的样式以适配嵌入环境 */
-:deep(.connectAnalysis) {
-  margin: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  border: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
-  display: flex;
-  flex-direction: column;
-}
-
-:deep(.filter-area) {
-  width: 100%;
-}
-
-:deep(.echart-box) {
-  /* 让图表区域占据剩余所有高度 */
-  flex: 1;
-  height: auto !important;
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-}
-
-:deep(.echart-content) {
-  flex: 1;
-  height: auto !important;
-  min-height: 300px;
-}
-</style>
+</style>

src/views/monitor/sealedMonitor/components/HistoricalDetailsModal.vue

@@ -175,6 +175,7 @@
           startTime: dayjs().add(-3, 'day').format('YYYY-MM-DD 00:00:00'),
           endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
           pageSize: 100,
+          sort: 'asc',
         }).then((r) => {
           if (r && r.records) {
             dataArray.value = r.records;

src/views/monitor/sealedMonitor/components/RealtimeDetailsModal.vue

@@ -114,6 +114,7 @@
           goafId: dataRef.value.goafId,
           startTime: dayjs().add(-3, 'day').format('YYYY-MM-DD 00:00:00'),
           endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+          sort: 'asc',
         }).then((r) => {
           dataArray.value = r.records;
         });