[Feat 0000] 过渡页面添加卡片跳转和预警原因预览功能

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

@@ -61,7 +61,7 @@
               <div class="icon-top"></div>
               <div class="icon-bottom"></div>
             </div>
-            <div class="text">高风险<span class="text-sub">（需立即处理）</span></div>
+            <div class="text cursor-pointer" @click="handleRouterPush('4')">高风险<span class="text-sub">（需立即处理）</span></div>
             <div class="count">{{ get(alarmStatistics, 'alarm4', '-') }}</div>
           </div>
           <div class="stat-item medium-risk">
@@ -69,7 +69,7 @@
               <div class="icon-top"></div>
               <div class="icon-bottom"></div>
             </div>
-            <div class="text">较高风险<span class="text-sub"></span></div>
+            <div class="text cursor-pointer" @click="handleRouterPush('3')">较高风险<span class="text-sub"></span></div>
             <div class="count">{{ get(alarmStatistics, 'alarm3', '-') }}</div>
           </div>
           <div class="stat-item normal-risk">
@@ -77,7 +77,7 @@
               <div class="icon-top"></div>
               <div class="icon-bottom"></div>
             </div>
-            <div class="text">一般风险<span class="text-sub"></span></div>
+            <div class="text cursor-pointer" @click="handleRouterPush('2')">一般风险<span class="text-sub"></span></div>
             <div class="count">{{ get(alarmStatistics, 'alarm2', '-') }}</div>
           </div>
           <div class="stat-item low-risk">
@@ -85,7 +85,7 @@
               <div class="icon-top"></div>
               <div class="icon-bottom"></div>
             </div>
-            <div class="text">低风险<span class="text-sub"></span></div>
+            <div class="text cursor-pointer" @click="handleRouterPush('1')">低风险<span class="text-sub"></span></div>
             <div class="count">{{ get(alarmStatistics, 'alarm1', '-') }}</div>
           </div>
         </div>
@@ -173,7 +173,7 @@
                   </div>
                 </div>
               </div>
-              <!-- <div class="indicator-group">
+              <div class="indicator-group">
                 <div class="group-title">
                   <div class="title-icon-top icon-result"></div>
                   <div class="title-icon-bottom"></div>
@@ -182,12 +182,18 @@
                 <div class="indicator-area indicator-result">
                   <div v-for="(res, resIndex) in resultColumns" :key="'result-' + resIndex" class="indicator-item">
                     <div class="label">{{ res.label }}:</div>
-                    <div v-if="res.key == 'alarmLevel'" :title="getRiskText(item.alarmLevel)" class="value">{{ getRiskText(item.alarmLevel) }}</div>
+                    <div v-if="res.key == 'alarmLevel'" class="value" :style="{ color: getAlarmColor(item.alarmLevel) }">{{
+                      getRiskText(item.alarmLevel)
+                    }}</div>
+                    <div v-else-if="res.type === 'computed'" class="value value-tags">
+                      <Tag v-for="(reason, rIdx) in getWarningReason(item, res.computeKey)" :key="rIdx" color="warning">{{ reason }}</Tag>
+                      <span v-if="getWarningReason(item, res.computeKey).length === 0">-</span>
+                    </div>
                     <div v-else class="value" :title="getDataValue(item, res.key)">{{ getDataValue(item, res.key) }}</div>
                   </div>
                   <div class="indicator-item placeholder-item"></div>
                 </div>
-              </div> -->
+              </div>
             </div>
           </div>
         </div>
@@ -242,7 +248,9 @@
   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';
+  import { Empty, Skeleton, Tag } from 'ant-design-vue';
+  import { evaluateExpressionLite, DEFAULT_OPERAND_SET, DEFAULT_DISPLAY_MAP } from '/@/views/system/algorithm/utils';
+  import { advancedRoutePush } from '/@/utils';
 
   // const appStore = useAppStore();
   const mineStore = useMineDepartmentStore();
@@ -304,10 +312,13 @@
   ];
 
   // 3. 预警结果配置（已注释，对应模板块已隐藏）
-  // const resultColumns = [
-  //   { label: '数据来源', key: 'readTime', value: '最近2天' },
-  //   { label: '预警结果', key: 'alarmLevel', value: '异常' },
-  // ];
+  const resultColumns = [
+    { label: '数据来源', key: 'readTime', value: '最近2天' },
+    { label: '预警结果', key: 'alarmLevel', value: '异常' },
+    { label: '内外压差变化预警原因', key: 'warningReasonPressure', type: 'computed', computeKey: 'pressure' },
+    { label: '密闭墙内自燃发火预警原因', key: 'warningReasonFireInner', type: 'computed', computeKey: 'fireInner' },
+    { label: '密闭墙外自燃发火预警原因', key: 'warningReasonFireOuter', type: 'computed', computeKey: 'fireOuter' },
+  ];
 
   // 4. 异常超限报警配置
   const alarmColumns = [
@@ -626,6 +637,48 @@
     }
   }
 
+  function getWarningReason(item: any, type: string): string[] {
+    const { coalSeamAlarmRule, sourcePressureAlarm, fireAlarm, fireAlarmReson, fireAlarmOut, fireAlarmOutReson } = item;
+    if (!coalSeamAlarmRule) return [];
+
+    let ruleKey: string;
+    let params: string[];
+
+    switch (type) {
+      case 'pressure':
+        if (!sourcePressureAlarm) return [];
+        ruleKey = `ycWarn${sourcePressureAlarm.alarmLevel}`;
+        params = ['sourcePressureChange'];
+        break;
+      case 'fireInner':
+        if (!fireAlarm) return [];
+        ruleKey = `fireWarn${fireAlarm.alarmLevel}`;
+        params = fireAlarmReson || [];
+        break;
+      case 'fireOuter':
+        if (!fireAlarmOut) return [];
+        ruleKey = `fireOutWarn${fireAlarmOut.alarmLevel}`;
+        params = fireAlarmOutReson || [];
+        break;
+      default:
+        return [];
+    }
+
+    try {
+      const result = evaluateExpressionLite(coalSeamAlarmRule[ruleKey], params, DEFAULT_OPERAND_SET, DEFAULT_DISPLAY_MAP);
+      return result;
+    } catch {
+      return [];
+    }
+  }
+
+  function handleRouterPush(level: string) {
+    return advancedRoutePush({
+      path: `/sealed/${mineStore.getDepart?.parentId}`,
+      query: { deptId: mineStore.getDepartId, alarmLevel: level },
+    });
+  }
+
   watch(
     () => mineStore.getDepartId,
     async () => {
@@ -957,7 +1010,7 @@
   .details-content {
     max-height: 350px;
     overflow-y: auto;
-    scroll-snap-type: y mandatory;
+    /* scroll-snap-type: y proximity; */
   }
 
   .warning-item {
@@ -1100,6 +1153,7 @@
 
   .monitoring-indicators {
     display: flex;
+    flex-wrap: wrap;
     gap: 20px;
     margin-top: 20px;
   }
@@ -1122,7 +1176,7 @@
   }
 
   .indicator-group:nth-child(3) {
-    flex: 2;
+    flex: 0 0 100%;
   }
 
   .group-title {
@@ -1173,13 +1227,13 @@
 
   .indicator-item {
     height: 30px;
-    line-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;
+    padding: 4px;
     .value {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1188,9 +1242,17 @@
       flex: 1;
       text-align: right;
     }
+    .value-tags {
+      white-space: normal;
+      overflow: visible;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      justify-content: flex-end;
+    }
   }
 
-  /* 预警结果只有两行，用来占位的 item */
+  /* 预警结果占位 item */
   .placeholder-item {
     visibility: hidden;
     height: 30px;

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

@@ -50,7 +50,7 @@
               <div class="icon-top"></div>
               <div class="icon-bottom"></div>
             </div>
-            <div class="text">超限异常报警</div>
+            <div class="text cursor-pointer" @click="handleRouterPush('/warningAnalysis/overlimit-alarm')">超限异常报警</div>
             <div class="count">{{ get(realtimeWarning, 'overLimitCount', '-') }}</div>
           </div>
           <div class="stat-item medium-risk">
@@ -58,7 +58,7 @@
               <div class="icon-top"></div>
               <div class="icon-bottom"></div>
             </div>
-            <div class="text">预测预警</div>
+            <div class="text cursor-pointer" @click="handleRouterPush('/sealed')">预测预警</div>
             <div class="count">{{ get(realtimeWarning, 'alarmInfoCount', '-') }}</div>
           </div>
           <div class="stat-item normal-risk">
@@ -66,7 +66,7 @@
               <div class="icon-top"></div>
               <div class="icon-bottom"></div>
             </div>
-            <div class="text">数据中断</div>
+            <div class="text cursor-pointer" @click="handleRouterPush('/warningAnalysis/report-analysis')">数据中断</div>
             <div class="count">{{ get(realtimeWarning, 'dataBreakCount', '-') }}</div>
           </div>
           <div class="stat-item low-risk">
@@ -74,7 +74,7 @@
               <div class="icon-top"></div>
               <div class="icon-bottom"></div>
             </div>
-            <div class="text">数据质量</div>
+            <div class="text cursor-pointer" @click="handleRouterPush('/basicinfo/data-quality')">数据质量</div>
             <div class="count">{{ get(realtimeWarning, 'dataQualityCount', '-') }}</div>
           </div>
         </div>
@@ -207,6 +207,7 @@
   import { useModal } from '/@/components/Modal';
   import { SvgIcon } from '/@/components/Icon';
   import { useIntervalFn } from '@vueuse/core';
+  import { advancedRoutePush } from '/@/utils';
 
   // 处理矿名选择器相关的逻辑
   const isDetailModalVisible = ref(false);
@@ -490,6 +491,14 @@
     return rawValue;
   };
 
+  // 跳转至密闭监测页面（不带 level 过滤，展示所有预警）
+  function handleRouterPush(path) {
+    return advancedRoutePush({
+      path,
+      query: { deptId: mineStore.getDepartId },
+    });
+  }
+
   // 切换图表显示状态
   const toggleChartVisibility = () => {
     isChartVisible.value = !isChartVisible.value;

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

@@ -52,6 +52,12 @@
                   textStyle: {
                     color: '#000',
                   },
+                  tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                      type: 'none',
+                    },
+                  },
                 }"
                 style="height: 100%; width: 100%"
               />
@@ -67,6 +73,12 @@
                   textStyle: {
                     color: '#000',
                   },
+                  tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                      type: 'none',
+                    },
+                  },
                 }"
                 style="height: 100%; width: 100%"
               />
@@ -106,6 +118,12 @@
                   textStyle: {
                     color: '#000',
                   },
+                  tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                      type: 'none',
+                    },
+                  },
                 }"
                 style="height: 100%; width: 100%"
               />
@@ -121,6 +139,12 @@
                   textStyle: {
                     color: '#000',
                   },
+                  tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                      type: 'none',
+                    },
+                  },
                 }"
                 style="height: 100%; width: 100%"
               />