光钎测温详情界面布局及功能修改-提交

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

@@ -16,37 +16,17 @@
             </div>
             <div class="item-container">
               <div class="title">最高温度</div>
-              <!-- <div class="value">{{ posMonitor.fmax }} <span>℃</span> </div> -->
-              <div class="value">{{ posMonitor.fmax || '--' }} <span>℃</span> </div>
-            </div>
-          </div>
-          <div class="top-item">
-            <div class="icon">
-              <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
-            </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>
-          </div>
-          <div class="top-item">
-            <div class="icon">
-              <SvgIcon class="icon-style aveg-temperature" size="38" name="aveg-temperature" />
-            </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">{{ maxTemp || '--' }} <span>℃</span> </div>
             </div>
           </div>
+
           <div class="top-item warning-box">
             <div class="icon">
               <SvgIcon class="icon-style" size="38" name="risk-level" />
             </div>
             <div class="item-container">
               <div class="title">风险等级</div>
-              <div class="warning-value">低风险</div>
+              <div class="warning-value">{{ warnLevels }}</div>
             </div>
           </div>
         </div>
@@ -55,13 +35,7 @@
             <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>
@@ -96,7 +70,10 @@ export default defineComponent({
     const deviceList = ref<any[]>([]);
     const posList = reactive<any[]>([]);
     const posList1 = reactive<any[]>([])
-    const posMonitor = shallowRef({});
+    //风险等级
+    const warnLevels = ref('')
+    //最高温度
+    const maxTemp = ref(0)
 
     const echatsOption = {
       grid: {
@@ -132,62 +109,41 @@ export default defineComponent({
         width: 60,
         align: 'center',
         customRender: ({ index }) => {
-          return `测点${index}`;
+          return `测点${index + 1}`;
         },
       },
       {
         title: '最高温度(℃)',
         dataIndex: 'Section_MaxTemp',
         align: 'center',
-        width: 100,
       },
       {
         title: '对应米数(m)',
         dataIndex: 'Section_MaxTempPos',
         align: 'center',
-        width: 100,
       },
       {
         title: '起点',
         dataIndex: 'Section_BeginPosition',
         align: 'center',
-        width: 60,
       },
       {
         title: '终点',
         dataIndex: 'Section_EndPosition',
         align: 'center',
-        width: 60,
       },
       {
         title: '报警温度(℃)',
         dataIndex: 'Section_AlarmTemp',
         align: 'center',
-
+      },
+      {
+        title: '报警状态',
+        dataIndex: 'isWarn',
+        align: 'center',
       },
     ];
 
-    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) {
@@ -232,20 +188,18 @@ export default defineComponent({
       newDataSource?.forEach((item: any, index) => {
         if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
           activeDeviceID.value = item.deviceID;
-          // if (item.readData.fibreTemperature) {
-          //   const list = JSON.parse(item.readData.fibreTemperature);
-          //   if (list.length > 0) posList.value = list;
-          // }
-          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`] })
+            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`], isWarn: parseFloat(item.readData[`Section${i + 1}_MaxTemp`]) > parseFloat(item.readData[`Section${i + 1}_AlarmTemp`]) ? '报警' : '未报警' })
           }
           posList.forEach((el, index) => {
             posList1.push({ Section_AlarmTemp: index + 1, value: el.Section_AlarmTemp })
           })
+          let maxValue = posList.map(m => m.Section_MaxTemp)
+          maxTemp.value = Math.max(...maxValue)
+          warnLevels.value = posList.find(v => v.isWarn == '报警') ? '报警' : '未报警'
           console.log(posList, 'posList-----------------')
           console.log(posList1, 'posList1-----------------')
         }
@@ -262,13 +216,14 @@ export default defineComponent({
       handleCancel,
       deviceList,
       activeDeviceID,
-      posMonitor,
       echatsOption,
       posList,
       posList1,
       chartsColumns,
       columns,
-      warningConfig,
+      warnLevels,
+      maxTemp
+      // warningConfig,
     };
   },
 });
@@ -346,7 +301,8 @@ export default defineComponent({
       margin-bottom: 10px;
 
       .top-item {
-        width: 200px;
+        // width: 200px;
+        width: 49%;
         height: 80px;
         display: flex;
         flex-direction: row;
@@ -424,31 +380,32 @@ export default defineComponent({
 
       .table-box {
         position: relative;
-        width: 500px;
+        // width: 500px;
+        width: 100%;
         height: 250px;
       }
 
-      .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 {