[Mod 0000]矿端和公司端过渡页细节调整

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

@@ -271,7 +271,7 @@
     { label: '煤层自燃倾向性', key: 'coalSeamLevel' },
     { label: '生产状态', key: 'gjMineStatus' },
     { label: '预警结果', key: 'alarmLevel' },
-    { label: '预警时间', key: 'createTime' },
+    { label: '预警时间', key: 'earliestTime' },
     { label: '持续时间', key: 'chixuTime' },
     { label: '接入状态', key: 'accessStatus' },
     { label: '数据联网状态', key: 'status' },
@@ -507,7 +507,49 @@
       .catch((err) => {
         console.error('跳转失败:', err);
       });
-  }
+  };
+   /**
+   * 计算持续时间
+   * @param earliestTimeStr 开始时间字符串
+   * @param latestReadTimeStr 结束时间字符串
+   * @returns 格式化后的持续时间字符串，如 "1天2小时30分钟"，无效则返回 "-"
+   */
+  const calculateDuration = (earliestTimeStr?: string, latestReadTimeStr?: string): string => {
+    if (!earliestTimeStr || !latestReadTimeStr) {
+      return '-';
+    }
+
+    const earliestTime = new Date(earliestTimeStr).getTime();
+    const latestReadTime = new Date(latestReadTimeStr).getTime();
+
+    if (isNaN(earliestTime) || isNaN(latestReadTime)) {
+      return '-';
+    }
+
+    const diffMs = latestReadTime - earliestTime;
+
+    // 如果时间差为负数，返回 '-'
+    if (diffMs < 0) {
+      return '-';
+    }
+
+    // 转换为天、小时、分钟
+    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+
+    let timeStr = '';
+    if (days > 0) {
+      timeStr += `${days}天`;
+    }
+    if (hours > 0 || days > 0) {
+      timeStr += `${hours}小时`;
+    }
+    // 如果只有分钟，或者有天/小时，都加上分钟
+    timeStr += `${minutes}分钟`;
+
+    return timeStr;
+  };
 
   async function fetchLeafData() {
     try {
@@ -520,9 +562,25 @@
       ]);
       alarmStatistics.value = goafAlarmNum[0];
       goafMonitorData.value = goafData.records;
-      basicInfo.value = mineData.records[0];
+      // basicInfo.value = mineData.records[0];
       mineAlarmData.value = alarmData.records[0];
 
+       // 处理煤矿基础信息并计算持续时间
+      const mineRecord = mineData.records[0];
+      if (mineRecord) {
+        // 获取最早预警时间
+        const earliestTimeStr = mineRecord.earliestTime;
+        // 获取最新的一条密闭监测数据的读取时间
+        const latestReadTimeStr = goafData.records?.[0]?.readTime;
+
+        // 调用抽取的方法计算持续时间
+        mineRecord.chixuTime = calculateDuration(earliestTimeStr, latestReadTimeStr);
+        
+        basicInfo.value = mineRecord;
+      } else {
+        basicInfo.value = {};
+      }
+
       nextTick(() => {
         if (connectAnalysisRef.value && typeof connectAnalysisRef.value.generateChart === 'function') {
           connectAnalysisRef.value.generateChart();
@@ -859,11 +917,18 @@
   margin-bottom: 16px;
 }
 
+.details-content {
+  height: 350px;
+  overflow-y: scroll;
+  scroll-snap-type: y mandatory;
+}
+
 .warning-item {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   background-color: rgba(218, 234, 251, 0.5);
   border-radius: 8px;
-  padding: 16px;
+  padding: 16px 10px;
+  scroll-snap-align: start;
 }
 
 .item-header {
@@ -871,7 +936,7 @@
   justify-content: space-between;
   align-items: center;
   padding-bottom: 10px;
-  margin-bottom: 16px;
+  margin-bottom: 14px;
   border-bottom: 1px solid rgba(43, 111, 240, 0.2); 
 
   .icon {
@@ -935,7 +1000,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-down.png');
+    background-image: url('/@/assets/images/overHaul/leafPage/icon-down1.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     transition: transform 0.3s ease;
@@ -952,7 +1017,6 @@
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 12px;
-  margin-bottom: 8px;
 }
 
 .data-col {

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

@@ -122,6 +122,9 @@
                 @click="handleShowDetail(item)"
               >
                 详情
+                <div class="arrow-icon-wrapper">
+                  <div class="arrow-icon" ></div>
+                </div>
               </a-button>
             </div>
             <div class="item-body">
@@ -285,10 +288,10 @@
     { label: '煤层自燃倾向性', key: 'coalSeamLevel', type: 'text'  },
     { label: '联网', key: 'status', colorKey: 'status', type: 'status',showPoint: true },
     { label: '永久密闭数量', key: 'goafNum', type: 'text'  },
-    { label: '报警数量', key: 'alarmCount', type: 'custom_count'  },
-    { label: '报警原因', key: 'alarmReasons', type: 'custom_reasons'  },
-    { label: '开始时间', key: 'createTime', type: 'text' },
-    { label: '最新监测时间', key: '-',type: 'text' },
+    { label: '报警数量', key: 'alarmCount', type: 'custom'  },
+    { label: '报警原因', key: 'alarmReasons', type: 'custom'  },
+    { label: '开始时间', key: 'earliestTime', type: 'text' },
+    { label: '最新监测时间', key: 'latestReadTime',type: 'text' },
   ];
   const alartTypeColumns = [
     'fireAlarm',
@@ -452,6 +455,28 @@
     if (col.type === 'status') {
       return getlinkStatusInfo(rawValue).text;
     }
+    if (col.key === 'alarmCount') {
+      // 取 alarmRecordList 的长度
+      return item.alarmRecordList ? item.alarmRecordList.length : 0;
+    }
+
+    if (col.key === 'alarmReasons') {
+      // 遍历 alarmRecordList 拼接 alarmName
+      if (!item.alarmRecordList || !Array.isArray(item.alarmRecordList)) {
+        return '-';
+      }
+      const names = item.alarmRecordList.map((record: any) => record.alarmName).filter(Boolean);
+      return names.length > 0 ? names.join('、') : '-';
+    }
+
+    if (col.key === 'latestReadTime') {
+      // 安全获取 goafDataList 第一个元素的 readTime
+      if (item.goafDataList && Array.isArray(item.goafDataList) && item.goafDataList.length > 0) {
+        return item.goafDataList[0].readTime || '-';
+      }
+      return '-';
+    }
+
 
     // 默认直接返回原始值或经过 getDataValue 处理后的值
     return rawValue;
@@ -620,7 +645,7 @@
 
   }
 
-// 预警统计样式
+/* // 预警统计样式 */
 .warning-statistics {
   background-color: #ffffff;
   margin-bottom: 20px;
@@ -764,8 +789,7 @@
 
 }
 
-
-//  预警详情样式
+/* //  预警详情样式 */
 .warning-details {
   background-color: #ffffff;
   margin-bottom: 20px;
@@ -790,6 +814,11 @@
     gap: 8px;
   }
 }
+.details-content {
+  height: 450px;
+  overflow-y: scroll;
+  scroll-snap-type: y mandatory;
+}
 
 
 .warning-item {
@@ -797,6 +826,7 @@
   background-color: rgba(218, 234, 251, 0.5);
   border-radius: 8px;
   padding: 16px;
+  scroll-snap-align: start;
 }
 
 .item-header {
@@ -868,7 +898,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-down.png');
+    background-image: url('/@/assets/images/overHaul/rootPage/icon-details.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     transition: transform 0.3s ease;