[Mod 0000] 优化光纤测温详情、黑龙矿主风机tab顺序调整

src/views/vent/monitorManager/comment/FanDeviceEcharts.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="charts-container">
     <a-select ref="select" v-model:value="chartsType" size="small" style="position: absolute; z-index: 99; top: 2px; left: 2px; width: 98px">
-      <a-select-option value="listMonitor">实时监测</a-select-option>
-      <a-select-option value="detail">详情监测</a-select-option>
+      <!-- <a-select-option value="listMonitor">实时监测</a-select-option>
+      <a-select-option value="detail">详情监测</a-select-option> -->
       <a-select-option value="history">历史记录</a-select-option>
     </a-select>
 

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.bd1.vue

@@ -19,7 +19,8 @@
             </div>
             <div class="item-container">
               <div class="title">最高温度</div>
-              <div class="value">{{ posMonitor.maxValue || '--' }} <span>℃</span> </div>
+              <!-- <div class="value">{{ posMonitor.fmax }} <span>℃</span> </div> -->
+              <div class="value">{{ formatNum(posMonitor.maxValue) || '--' }} <span>℃</span> </div>
             </div>
           </div>
           <div class="top-item">
@@ -28,7 +29,8 @@
             </div>
             <div class="item-container">
               <div class="title">最低温度</div>
-              <div class="value">{{ posMonitor.fmin || '--' }} <span>℃</span></div>
+              <!-- <div class="value">{{ posMonitor.fmin }} <span>℃</span></div> -->
+              <div class="value">{{ formatNum(posMonitor.fmin) || '--' }} <span>℃</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -37,7 +39,8 @@
             </div>
             <div class="item-container">
               <div class="title">平均温度</div>
-              <div class="value">{{ posMonitor.favg || '--' }} <span>℃</span></div>
+              <!-- <div class="value">{{ posMonitor.favg }} <span>℃</span></div> -->
+              <div class="value">{{ formatNum(posMonitor.favg) || '--' }} <span>℃</span></div>
             </div>
           </div>
           <div class="top-item warning-box">
@@ -50,23 +53,16 @@
             </div>
           </div>
         </div>
-        <div class="right-center">
-          <div class="table-box">
-            <span class="base-title">测点监测详情</span>
-            <a-table size="small" :columns="columns" :data-source="posList" :pagination="false" :scroll="{ y: 200 }" />
-          </div>
-          <!-- <div class="warning-box">
-              <span class="base-title">预警历史详情</span>
-              <div class="warning-container">
-                <dv-scroll-board ref="scrollBoard" :config="warningConfig"
-                  style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33" />
-              </div>
-            </div> -->
-        </div>
         <div class="right-bottom">
           <span class="base-title">测点监测曲线</span>
           <div class="echarts-box">
-            <BarAndLine xAxisPropType="Section_MaxTemp" :dataSource="posList1" height="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
+            <BarAndLine xAxisPropType="pos" :dataSource="posList" height="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
+          </div>
+        </div>
+        <div class="right-center">
+          <div class="table-box">
+            <span class="base-title">测点历史监测</span>
+            <a-table size="small" :columns="columns" :data-source="history" :pagination="false" :scroll="{ y: 200 }" />
           </div>
         </div>
       </div>
@@ -78,11 +74,11 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
   import { SvgIcon } from '/@/components/Icon';
-  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
   import dayjs from 'dayjs';
+  import { formatNum } from '/@/utils/ventutil';
 
   export default defineComponent({
-    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    components: { BasicModal, BarAndLine, SvgIcon },
     props: {
       dataSource: { type: Array },
       activeID: { type: String },
@@ -93,8 +89,8 @@
       const loading = ref(true);
       const activeDeviceID = ref<any>('');
       const deviceList = ref<any[]>([]);
-      const posList = reactive<any[]>([]);
-      const posList1 = reactive<any[]>([]);
+      const posList = ref<any[]>([]);
+      const history = ref<any[]>([]);
       const posMonitor = shallowRef({});
 
       const echatsOption = {
@@ -112,7 +108,7 @@
 
       const chartsColumns = [
         {
-          legend: '测点最高温度',
+          legend: '测点温度',
           seriesName: '(℃)',
           ymax: 100,
           yname: '℃',
@@ -135,52 +131,27 @@
         },
         {
           title: '最高温度(℃)',
-          dataIndex: 'Section_MaxTemp',
-          align: 'center',
-        },
-        {
-          title: '对应米数(m)',
-          dataIndex: 'Section_MaxTempPos',
+          dataIndex: 'fmax',
           align: 'center',
         },
         {
-          title: '起点',
-          dataIndex: 'Section_BeginPosition',
+          title: '平均温度(℃)',
+          dataIndex: 'favg',
           align: 'center',
         },
         {
-          title: '终点',
-          dataIndex: 'Section_EndPosition',
+          title: '最低温度(℃)',
+          dataIndex: 'fmin',
           align: 'center',
         },
         {
-          title: '状态',
-          dataIndex: 'Section_AlarmTemp',
+          title: '时间',
+          dataIndex: 'time',
           align: 'center',
+          width: 200,
         },
       ];
 
-      // const warningConfig = reactive({
-      //   header: ['测点', '温度', '预警信息'],
-      //   data: [
-      //     ['测点6', '318℃', '严重报警'],
-      //     ['测点43', '142℃', '一般预警'],
-      //     ['测点23', '167℃', '一般预警'],
-      //     ['测点6', '198℃', '超高预警'],
-      //     ['测点65', '197℃', '超高预警'],
-      //     ['测点78', '154℃', '一般预警'],
-      //     ['测点61', '104℃', '一般预警'],
-      //     ['测点87', '150℃', '一般信息'],
-      //   ],
-      //   index: false,
-      //   columnWidth: [150],
-      //   headerHeight: 38,
-      //   headerBGC: '#3d9dd45d',
-      //   oddRowBGC: '#009acd10',
-      //   evenRowBGC: '#009acd05',
-      //   align: ['center', 'center', 'center'],
-      // });
-
       const [register, { setModalProps, closeModal }] = useModalInner();
 
       function handleVisibleChange(visible) {
@@ -222,27 +193,15 @@
         if (newActiveID != oldActiveID) {
           activeDeviceID.value = newActiveID as string;
         }
+        // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
         newDataSource?.forEach((item: any, index) => {
           if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            history.value = item.history;
             posMonitor.value = item.readData;
-            posList.length = 0;
-            posList1.length = 0;
-            let counts = Math.ceil((Object.keys(item.readData).length - 2) / 5);
-            for (let i = 0; i < counts; i++) {
-              posList.push({
-                Section_MaxTemp: item.readData[`Section${i + 1}_MaxTemp`],
-                Section_MaxTempPos: item.readData[`Section${i + 1}_MaxTempPos`],
-                Section_BeginPosition: item.readData[`Section${i + 1}_BeginPosition`],
-                Section_EndPosition: item.readData[`Section${i + 1}_EndPosition`],
-                Section_AlarmTemp:
-                  item.readData[`Section${i + 1}_AlarmTemp`] == '0' ? '正常' : item.readData[`Section${i + 1}_AlarmTemp`] == '1' ? '报警' : '',
-              });
+            if (item.readData.fibreTemperature) {
+              const list = JSON.parse(item.readData.fibreTemperature);
+              if (list.length > 0) posList.value = list;
             }
-            posList.forEach((el, index) => {
-              posList1.push({ Section_MaxTemp: index + 1, value: el.Section_MaxTemp });
-            });
-            console.log(posList, 'posList-----------------');
-            console.log(posList1, 'posList1-----------------');
           }
         });
       });
@@ -260,10 +219,10 @@
         posMonitor,
         echatsOption,
         posList,
-        posList1,
+        history,
         chartsColumns,
         columns,
-        // warningConfig,
+        formatNum,
       };
     },
   });
@@ -341,7 +300,7 @@
         margin-bottom: 10px;
 
         .top-item {
-          width: 49%;
+          width: 200px;
           height: 80px;
           display: flex;
           flex-direction: row;
@@ -412,10 +371,10 @@
       }
 
       .right-center {
-        margin-top: 10px;
-        // display: flex;
-        // flex-direction: row;
-        // justify-content: space-between;
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
 
         .table-box {
           position: relative;
@@ -425,31 +384,31 @@
           :deep(.zxm-table-wrapper) {
             height: 220px !important;
             background: #ffffff05 !important;
-            // border-bottom: 1px solid #91e9fe80 !important;
+            border-bottom: 1px solid #91e9fe80 !important;
           }
         }
 
-        // .warning-box {
-        //   width: calc(100% - 520px);
-
-        //   .warning-container {
-        //     width: 100%;
-        //     height: convert;
-        //     background: #009acd00;
-
-        //     :deep(.dv-scroll-board) {
-        //       .row-item {
-        //         height: 40px !important;
-        //         line-height: 40px !important;
-        //       }
-
-        //       .header-item {
-        //         border-top: 1px solid #91e9fe !important;
-        //         border-bottom: 1px solid #91e9fe !important;
-        //       }
-        //     }
-        //   }
-        // }
+        .warning-box {
+          width: calc(100% - 520px);
+
+          .warning-container {
+            width: 100%;
+            height: convert;
+            background: #009acd00;
+
+            :deep(.dv-scroll-board) {
+              .row-item {
+                height: 40px !important;
+                line-height: 40px !important;
+              }
+
+              .header-item {
+                border-top: 1px solid #91e9fe !important;
+                border-bottom: 1px solid #91e9fe !important;
+              }
+            }
+          }
+        }
       }
 
       .right-bottom {