lxh 1 anno fa
parent
commit
4eb867f6e1

+ 1 - 1
src/views/vent/deviceManager/workingFace/index.vue

@@ -21,7 +21,7 @@
 <script lang="ts" name="system-user" setup>
   //ts语法
   import { ref, onMounted } from 'vue'
-  import CustomNormalTable from './CustomNormalTable.vue';
+  // import CustomNormalTable from './CustomNormalTable.vue';
   import { searchFormSchema, commentFormSchema } from './workingFace.data';
   import { list, deleteById, batchDeleteById, saveOrUpdate } from './workingFace.api';
 

+ 0 - 1
src/views/vent/home/colliery/components/device-warn.vue

@@ -57,7 +57,6 @@
   watch(
     () => props.warnData,
     (val) => {
-      console.log(val, '预警数据');
       val.forEach((el) => {
         // nowStatus.value = el.netstatus.val;
         nowStatus.value=0

+ 13 - 55
src/views/vent/home/colliery/components/fan-monitor.vue

@@ -20,7 +20,7 @@
     </div>
     <div class="fan-contents">
       <div v-if="!isShowGif" class="fan" ref="fan"></div>
-      <img v-else src="@/assets/images/gif/fanlocal.gif" style="height: 100%; width: 100%; "/>
+      <img v-else src="@/assets/images/gif/fanlocal.gif" style="height: 100%; width: 100%; " />
     </div>
   </div>
 </template>
@@ -54,59 +54,17 @@ function getDetail() {
 //选项切换
 function changeSelect(val) {
   searchValue.value = val
-  // switch (val) {
-  //   case '局扇监测':
-  //     fjStatus.value =
-  //       fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.Fan1StartStatus == '1'
-  //         ? '1号风机'
-  //         : fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.Fan2StartStatus == '1'
-  //           ? '2号风机'
-  //           : '';
-  //     echartData.xdata = fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.windQuantity1;
-  //     echartData.ydata = fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.windQuantity2;
-  //     getOption();
-  //     break;
-  //   case '局部通风机系统':
-  //     fjStatus.value =
-  //       fanList.filter((v) => v.strinstallpos == '局部通风机系统')[0].readData.Fan1StartStatus == '1'
-  //         ? '1号风机'
-  //         : fanList.filter((v) => v.strinstallpos == '局部通风机系统')[0].readData.Fan2StartStatus == '1'
-  //           ? '2号风机'
-  //           : '';
-  //     echartData.xdata = fanList.filter((v) => v.strinstallpos == '局部通风机系统')[0].readData.windQuantity1;
-  //     echartData.ydata = fanList.filter((v) => v.strinstallpos == '局部通风机系统')[0].readData.windQuantity2;
-  //     getOption();
-  //     break;
-  //   case '地址1':
-  //     fjStatus.value =
-  //       fanList.filter((v) => v.strinstallpos == '地址1')[0].readData.Fan1StartStatus == '1'
-  //         ? '1号风机'
-  //         : fanList.filter((v) => v.strinstallpos == '地址1')[0].readData.Fan2StartStatus == '1'
-  //           ? '2号风机'
-  //           : '';
-  //     echartData.xdata = fanList.filter((v) => v.strinstallpos == '地址1')[0].readData.windQuantity1;
-  //     echartData.ydata = fanList.filter((v) => v.strinstallpos == '地址1')[0].readData.windQuantity2;
-  //     getOption();
-  //     break;
-  // }
-  fjStatus.value =
-    fanList.filter((v) => v.strinstallpos == val)[0].readData.Fan1StartStatus == '1'
-      ? '1号风机'
-      : fanList.filter((v) => v.strinstallpos == val)[0].readData.Fan2StartStatus == '1'
-        ? '2号风机'
-        : '';
-  echartData.xdata = fanList.filter((v) => v.strinstallpos == val)[0].readData.windQuantity1;
-  echartData.ydata = fanList.filter((v) => v.strinstallpos == val)[0].readData.windQuantity2;
-  
-  echartData.xdata = null
-  echartData.ydata = null
-
-  if(echartData.xdata && echartData.ydata){
-    getOption();
-  }else{
-    isShowGif.value = true
+  const selectData = fanList.find((item) => item['deviceID'] == val)
+  if (selectData) {
+    fjStatus.value = selectData.readData.Fan1StartStatus == '1' ? '1号风机' : selectData.readData.Fan2StartStatus == '1' ? '2号风机' : '';
+    echartData.xdata = selectData.readData.windQuantity1;
+    echartData.ydata = selectData.readData.windQuantity2;
+    if (echartData.xdata && echartData.ydata) {
+      getOption();
+    } else {
+      isShowGif.value = true
+    }
   }
-  
 }
 function getOption() {
   nextTick(() => {
@@ -315,13 +273,12 @@ function getOption() {
 watch(
   () => props.fandata,
   (val) => {
-    console.log(val, '局部风机数据');
     fanList = val[0];
     fanTypeList.length = 0;
     fanList.forEach((el) => {
       fanTypeList.push({
         label: el.strinstallpos,
-        value: el.strinstallpos,
+        value: el.deviceID,
       });
     });
     if (searchValue.value) {
@@ -402,6 +359,7 @@ onMounted(() => { });
     height: calc(100% - 66px);
     width: 100%;
     padding: 10px;
+
     .fan {
       width: 100%;
       height: 100%;

+ 2 - 53
src/views/vent/home/colliery/components/main-monitor.vue

@@ -55,7 +55,7 @@ function changeSelect(val) {
   let objParam
   let objParam1
   searchValue.value = val;
-  const selectData = mainList.find((item) => item['strinstallpos'] == val)
+  const selectData = mainList.find((item) => item['deviceID'] == val)
   if(selectData){
     objParam = {
       dataQ: selectData.readData.Fan1m3 || selectData.readData.Fan2m3 || selectData.readData.m3,
@@ -71,55 +71,6 @@ function changeSelect(val) {
     setChart(objParam, objParam1);
     getOption();
   }
-
-  // switch (val) {
-  //   case '1号回风斜井':
-  //     objParam = {
-  //       dataQ: mainList[0].readData.m3,
-  //       dataH: mainList[0].readData.DataPa,
-  //     }
-  //     objParam1 = {
-  //       dataha0: -0.056,
-  //       dataha1: 3.6491,
-  //       dataha2: 434.4,
-  //       dataha3: 100,
-  //       dataha4: -1000,
-  //     }
-  //     setChart(objParam, objParam1);
-  //     getOption();
-  //     break;
-  //   case '2号回风立井':
-  //     objParam = {
-  //       dataQ: mainList[1].readData.m3,
-  //       dataH: mainList[1].readData.DataPa,
-  //     }
-  //     objParam1 = {
-  //       dataha0: -0.056,
-  //       dataha1: 3.6491,
-  //       dataha2: 434.4,
-  //       dataha3: 200,
-  //       dataha4: -800,
-  //     }
-  //     setChart(objParam, objParam1);
-  //     getOption();
-  //     break;
-
-  //   case '主通风机主机':
-  //     objParam = {
-  //       dataQ: mainList[0].readData.m3,
-  //       dataH: mainList[0].readData.DataPa,
-  //     }
-  //     objParam1 = {
-  //       dataha0: -0.056,
-  //       dataha1: 3.6491,
-  //       dataha2: 434.4,
-  //       dataha3: 100,
-  //       dataha4: -1000,
-  //     }
-  //     setChart(objParam, objParam1);
-  //     getOption();
-  //     break;
-  // }
 }
 
 function getOption() {
@@ -329,14 +280,12 @@ function setChart(param, character) {
 watch(
   () => props.maindata,
   (val) => {
-    console.log(val, '主风机数据');
     mainList = val;
     mainTypeList.length = 0;
-
     mainList.forEach(el => {
       mainTypeList.push({
         label: el.strinstallpos,
-        value: el.strinstallpos,
+        value: el.deviceID,
       });
     })
 

+ 0 - 2
src/views/vent/home/colliery/components/wind-device.vue

@@ -132,11 +132,9 @@
   watch(
     () => props.devicedata,
     (val) => {
-      console.log(val, '设备数据');
      Object.keys(iconsMonitor).forEach(el=>{
       iconsMonitor[el].level=val[el].maxLevel
      })
-     console.log(iconsMonitor,'icon---000')
     },
     {
       deep: true,

+ 2 - 106
src/views/vent/home/colliery/components/wind-line.vue

@@ -80,7 +80,7 @@ function getDetail() {
 //选项切换
 function changeSelect(val) {
   searchValue.value = val;
-  const selectData = lineData.find(item => item['deviceName'] == val)
+  const selectData = lineData.find(item => item['deviceID'] == val)
   if(selectData){
     echartData[0].value = (selectData.majorpath['drag_1'] || Math.floor(Math.random() * (629 - 620 + 1)) + 620).toFixed(2);
     echartData[1].value = (selectData.majorpath['drag_2'] || Math.floor(Math.random() * (949 - 940 + 1)) + 940).toFixed(2);
@@ -93,109 +93,6 @@ function changeSelect(val) {
     percentE.value = formatNum((echartData[2].value / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100)
   }
   getOption();
-
-  // switch (val) {
-  //   case 'bet关键路线1':
-  //     echartData[0].value = lineData[0].majorpath.drag_1 || 0;
-  //     echartData[1].value = lineData[0].majorpath.drag_2 || 0;
-  //     echartData[2].value = lineData[0].majorpath.drag_3 || 0;
-  //     tabList[0].val = lineData[0].majorpath.drag_total || 0;
-  //     tabList[1].val = lineData[0].majorpath.m3_total || 0;
-  //     tabList[2].val = 6.20;
-  //     percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-  //     percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-  //     percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-
-  //     // echartData[0].value = Math.floor(Math.random() * (629 - 620 + 1)) + 620;
-  //     // echartData[1].value = Math.floor(Math.random() * (949 - 940 + 1)) + 940;
-  //     // echartData[2].value = Math.floor(Math.random() * (855 - 850 + 1)) + 850;
-  //     // tabList[0].val = Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600;
-  //     // tabList[1].val = Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423;
-  //     // tabList[2].val = 0.56;
-  //     // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     getOption();
-  //     break;
-  //   case 'bet关键路线2':
-  //     echartData[0].value = lineData[1].majorpath.drag_1 || 0;
-  //     echartData[1].value = lineData[1].majorpath.drag_2 || 0;
-  //     echartData[2].value = lineData[1].majorpath.drag_3 || 0;
-  //     tabList[0].val = lineData[1].majorpath.drag_total || 0;
-  //     tabList[1].val = lineData[1].majorpath.m3_total || 0;
-  //     tabList[2].val = 0.83;
-  //     percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-  //     percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-  //     percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-
-  //     // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
-  //     // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
-  //     // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
-  //     // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
-  //     // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
-  //     // tabList[2].val = 0.78;
-  //     // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     getOption();
-  //     break;
-  //   case 'sw关键路线1':
-  //     echartData[0].value = lineData[2].majorpath.drag_1 || 0;
-  //     echartData[1].value = lineData[2].majorpath.drag_2 || 0;
-  //     echartData[2].value = lineData[2].majorpath.drag_3 || 0;
-  //     tabList[0].val = lineData[2].majorpath.drag_total || 0;
-  //     tabList[1].val = lineData[2].majorpath.m3_total || 0;
-  //     tabList[2].val = 0.88;
-  //     percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-  //     percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-  //     percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-
-  //     // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
-  //     // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
-  //     // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
-  //     // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
-  //     // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
-  //     // tabList[2].val = 0.78;
-  //     // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     getOption();
-  //     break;
-  //   case 'sw关键路线2':
-  //     echartData[0].value = lineData[3].majorpath.drag_1 || 0;
-  //     echartData[1].value = lineData[3].majorpath.drag_2 || 0;
-  //     echartData[2].value = lineData[3].majorpath.drag_3 || 0;
-  //     tabList[0].val = lineData[3].majorpath.drag_total || 0;
-  //     tabList[1].val = lineData[3].majorpath.m3_total || 0;
-  //     tabList[2].val = 0.93;
-  //     percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-  //     percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-  //     percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
-
-  //     // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
-  //     // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
-  //     // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
-  //     // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
-  //     // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
-  //     // tabList[2].val = 0.78;
-  //     // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //     getOption();
-  //     break;
-  //   case '关键-路线':
-  //   echartData[0].value = Math.floor(Math.random() * (110 - 100 + 1)) + 100;
-  //   echartData[1].value = Math.floor(Math.random() * (210 - 200 + 1)) + 200;
-  //   echartData[2].value = Math.floor(Math.random() * (310 - 300 + 1)) + 300;
-  //   tabList[0].val = Math.floor(Math.random() * (1010 - 1000 + 1)) + 1000;
-  //   tabList[1].val = Math.floor(Math.random() * (2010 - 2000+ 1)) + 2000;
-  //   tabList[2].val = 0.56;
-  //   percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //   percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //   percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-  //   getOption();
-  //   break;
-  // }
 }
 
 function getOption() {
@@ -358,13 +255,12 @@ function getOption() {
 watch(
   () => props.lineList,
   (val) => {
-    console.log(val, '关键路线数据');
     lineData = val;
     lineTypeList.length = 0;
     lineData.forEach((el) => {
       lineTypeList.push({
         label: el.deviceName,
-        value: el.deviceName,
+        value: el.deviceID,
       });
     });
 

+ 0 - 2
src/views/vent/home/colliery/components/wind-monitor.vue

@@ -28,7 +28,6 @@
     nextTick(() => {
       const color = '#66ffff';
       let barWidth = echartData.ydata.length>0 && echartData.ydata.length<=1 ? 0.03 : 0.1; // 柱条占比
-
       function renderItem(params, api) {
         const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
         const width = api.size([0, 1])[0] * barWidth; // 宽度
@@ -210,7 +209,6 @@
   watch(
     () => props.flList,
     (val) => {
-      console.log(val, '测风数据');
       echartData.xdata.length = 0;
       echartData.ydata.length = 0;
       val.forEach((el) => {

+ 9 - 63
src/views/vent/home/colliery/components/work-monitor.vue

@@ -58,76 +58,23 @@ function getDetail() {
 function changeSelect(val) {
   searchValue.value = val;
 
-  const selectData = workData.find(item => item['deviceName'] == val)
+  const selectData = workData.find(item => item['deviceID'] == val)
   if(selectData){
-    tabList[0].val = workData[0].jin;
-    tabList[1].val = workData[0].hui;
-    tabList[2].val = workData[0].xufengliang;
+    tabList[0].val = selectData.jin || 0;
+    tabList[1].val = selectData.hui || 0;
+    tabList[2].val = selectData.xufengliang || 0;
     echartData.xdata.length = 0;
     echartData.ydata.length = 0;
     echartData.ydata1.length = 0;
-    workData[0].history.forEach((el) => {
+    if(selectData.history.length!=0){
+      selectData.history.forEach((el) => {
       echartData.xdata.push(el.time);
       echartData.ydata.push(el.jin);
       echartData.ydata1.push(el.hui);
     });
     getOption();
+    }
   }
-  
-  // switch (val) {
-  //   case '15212工作面':
-  //     tabList[0].val = workData[0].jin;
-  //     tabList[1].val = workData[0].hui;
-  //     tabList[2].val = workData[0].xufengliang;
-  //     echartData.xdata.length = 0;
-  //     echartData.ydata.length = 0;
-  //     echartData.ydata1.length = 0;
-  //     workData[0].history.forEach((el) => {
-  //       echartData.xdata.push(el.time);
-  //       echartData.ydata.push(el.jin);
-  //       echartData.ydata1.push(el.hui);
-  //     });
-
-  //     getOption();
-  //     break;
-  //   case '采煤工作面':
-  //     tabList[0].val = workData[1].jin;
-  //     tabList[1].val = workData[1].hui;
-  //     tabList[2].val = workData[1].xufengliang;
-  //     echartData.xdata.length = 0;
-  //     echartData.ydata.length = 0;
-  //     echartData.ydata1.length = 0;
-  //     workData[1].history.forEach((el) => {
-  //       echartData.xdata.push(el.time);
-  //       echartData.ydata.push(el.jin);
-  //       echartData.ydata1.push(el.hui);
-  //     });
-  //     getOption();
-  //     break;
-  //     case '工作面-6':
-  //     tabList[0].val = Math.floor(Math.random() * (110 - 100 + 1)) + 100;
-  //     tabList[1].val = Math.floor(Math.random() * (210 - 200 + 1)) + 200;
-  //     tabList[2].val = Math.floor(Math.random() * (310 - 300 + 1)) + 300;
-  //     echartData.xdata.length = 0;
-  //     echartData.ydata.length = 0;
-  //     echartData.ydata1.length = 0;
-  //     let mnList=[
-  //       {time:'10:00:01',jin: Math.floor(Math.random() * (15 - 10 + 1)) + 10,hui: Math.floor(Math.random() * (20 - 15 + 1)) + 15},
-  //       {time:'10:00:06',jin: Math.floor(Math.random() * (15 - 10 + 1)) + 10,hui: Math.floor(Math.random() * (20 - 15 + 1)) + 15},
-  //       {time:'10:00:11',jin: Math.floor(Math.random() * (15 - 10 + 1)) + 10,hui: Math.floor(Math.random() * (20 - 15 + 1)) + 15},
-  //       {time:'10:00:16',jin: Math.floor(Math.random() * (15 - 10 + 1)) + 10,hui: Math.floor(Math.random() * (20 - 15 + 1)) + 15},
-  //       {time:'10:00:21',jin: Math.floor(Math.random() * (15 - 10 + 1)) + 10,hui: Math.floor(Math.random() * (20 - 15 + 1)) + 15},
-  //       {time:'10:00:26',jin: Math.floor(Math.random() * (15 - 10 + 1)) + 10,hui: Math.floor(Math.random() * (20 - 15 + 1)) + 15},
-  //     ]
-  //     mnList.forEach((el) => {
-  //       echartData.xdata.push(el.time);
-  //       echartData.ydata.push(el.jin);
-  //       echartData.ydata1.push(el.hui);
-  //     });
-
-  //     getOption();
-  //     break;
-  // }
 }
 
 function getOption() {
@@ -300,14 +247,13 @@ function getOption() {
 watch(
   () => props.workList,
   (val) => {
-    debugger
-    console.log(val, '工作面数据');
+    // debugger
     workData = val;
     workTypeList.length = 0;
     workData.forEach((el) => {
       workTypeList.push({
         label: el.deviceName,
-        value: el.deviceName,
+        value: el.deviceID,
       });
     });
 

+ 13 - 8
src/views/vent/home/colliery/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="pageType == 'home'" style="position: relative; width: 100%; height: 100%">
-    <div class="home-container" >
+    <div class="home-container">
       <div class="header">
         <div class="head-time">
           <span>{{ nowTime }}</span>
@@ -66,12 +66,12 @@
       </div>
     </div>
     <!-- <DeviceMonitor :pageType="pageType" @goHome="goHome" /> -->
-    
+
   </div>
   <div v-else id="vent-model" style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute"></div>
 </template>
 <script lang="ts" setup>
-import { reactive, onMounted, ref, nextTick, computed, unref , inject, onBeforeUnmount, onUnmounted } from 'vue';
+import { reactive, onMounted, ref, nextTick, computed, unref, inject, onBeforeUnmount, onUnmounted } from 'vue';
 import fanMonitor from './components/fan-monitor.vue';
 import mainMonitor from './components/main-monitor.vue';
 import windDevice from './components/wind-device.vue';
@@ -194,6 +194,7 @@ function getList() {
       paramArr.push({
         deviceName: '关键路线1',
         deviceType: 'sys_majorpath',
+        deviceID: Math.random() * 100,
         majorpath: {
           drag_1: 380,
           drag_2: 167,
@@ -202,7 +203,6 @@ function getList() {
           m3_total: 8138 + (Math.random() * 2 - 1 * 20)
         }
       })
-      
       lineList.value = paramArr
     }
 
@@ -213,15 +213,20 @@ function getList() {
       paramArr.push({
         deviceName: '12204工作面',
         deviceType: 'sys_surface_caimei',
+        deviceID: Math.random() * 100,
+        history: [],
+        jin: 100,
+        hui: 200,
+        xufengliang: 300,
       })
-
       workList.value = getDate(paramArr)
     }
-
     warnData.value = res.warn || [];
     deviceData.value = res.device || {};
   });
 }
+
+
 let weeks = computed(() => {
   let week = moment(new Date().getTime()).day();
   switch (week) {
@@ -264,12 +269,12 @@ function goModalDetail() {
 
 onMounted(() => {
   const currentRouteObj = unref(currentRoute)
-  if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']){
+  if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
     pageType.value = 'model3D'
   }
 
   mountMicroApp('/micro-vent-3dModal')
-  
+
   getList();
   timer = Number(
     setInterval(() => {

+ 835 - 621
src/views/vent/monitorManager/compressor/components/nitrogenHome1.vue

@@ -1,9 +1,6 @@
 <template>
-  <div
-    id="nitrogenCss3D"
-    class="threejs-Object-CSS"
-    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
-  >
+  <div id="nitrogenCss3D" class="threejs-Object-CSS"
+    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
     <a-spin :spinning="loading" />
     <template>
       <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
@@ -11,44 +8,34 @@
           <div class="title">{{ monitorData[groupNum - 1]['strname'] }} </div>
           <div class="monitor-item">
             <span class="monitor-title">排气压力:</span>
-            <span class="monitor-val"
-              ><span class="val">{{
-                monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] ? monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] : '-'
-              }}</span
-              ><span class="unit">kPa</span></span
-            >
+            <span class="monitor-val"><span class="val">{{
+              monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] ? monitorData[groupNum -
+              1]['AirCompressor_ExhaustPre'] : '-'
+            }}</span>
+            <span class="unit">kPa</span></span>
           </div>
           <div class="monitor-item">
             <span class="monitor-title">累计流量:</span>
-            <span class="monitor-val"
-              ><span class="val">{{ monitorData[groupNum - 1]['FluxTotal1'] ? monitorData[groupNum - 1]['FluxTotal1'] ?  parseFloat(monitorData[groupNum - 1]['FluxTotal1']).toFixed(2) : '-' : '-' }}</span
-              ><span class="unit">m³/h</span></span
-            >
+            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['FluxTotal1'] ? parseFloat(monitorData[groupNum - 1]['FluxTotal1']).toFixed(2) : '-'}}</span><span class="unit">m³/h</span></span>
           </div>
           <div class="monitor-item">
             <span class="monitor-title">氮气纯度:</span>
-            <span class="monitor-val"
-              ><span class="val">{{ monitorData[groupNum - 1]['NitrogenPurity'] ? monitorData[groupNum - 1]['NitrogenPurity'] ? parseFloat(monitorData[groupNum - 1]['NitrogenPurity']).toFixed(2) : '-' : '-' }}</span
-              ><span class="unit">%</span></span
-            >
+            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['NitrogenPurity'] ? parseFloat(monitorData[groupNum -1]['NitrogenPurity']).toFixed(2) : '-' }}</span>
+            <span class="unit">%</span></span>
           </div>
           <div class="monitor-item">
             <span class="monitor-title">运行时间:</span>
-            <span class="monitor-val"
-              ><span class="val">{{
-                monitorData[groupNum - 1]['AirCompressor_RunTime'] ? monitorData[groupNum - 1]['AirCompressor_RunTime'] : '-'
-              }}</span
-              ><span class="unit">h</span></span
-            >
+            <span class="monitor-val"><span class="val">{{
+              monitorData[groupNum - 1]['AirCompressor_RunTime'] ? monitorData[groupNum - 1]['AirCompressor_RunTime'] :
+              '-'
+            }}</span><span class="unit">h</span></span>
           </div>
           <div class="monitor-item">
             <span class="monitor-title">加载时间:</span>
-            <span class="monitor-val"
-              ><span class="val">{{
-                monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum - 1]['AirCompressor_LoadTime'] : '-'
-              }}</span
-              ><span class="unit">h</span></span
-            >
+            <span class="monitor-val"><span class="val">{{
+              monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum - 1]['AirCompressor_LoadTime']
+              : '-'
+            }}</span><span class="unit">h</span></span>
           </div>
         </fourBorderBg>
       </div>
@@ -75,16 +62,18 @@
                       <span class="state-title">{{ Object.values(data)[0] }} :</span>
                       <span class="state-val">{{
                         (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
-                          ? monitorData[groupNum - 1][Object.keys(data)[0]] ?  parseFloat(monitorData[groupNum - 1][Object.keys(data)[0]]).toFixed(2) : '-'
-                          : '-'
+                        ? monitorData[groupNum - 1][Object.keys(data)[0]] ? parseFloat(monitorData[groupNum -
+                          1][Object.keys(data)[0]]).toFixed(2) : '-'
+                        : '-'
                       }}</span>
                     </div>
                     <div class="item-col" v-if="Object.keys(data)[1]">
                       <span class="state-title">{{ Object.values(data)[1] }} :</span>
                       <span class="state-val">{{
                         (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
-                          ? monitorData[groupNum - 1][Object.keys(data)[1]] ? parseFloat(monitorData[groupNum - 1][Object.keys(data)[1]]).toFixed(2) : '-'
-                          : '-'
+                        ? monitorData[groupNum - 1][Object.keys(data)[1]] ? parseFloat(monitorData[groupNum -
+                          1][Object.keys(data)[1]]).toFixed(2) : '-'
+                        : '-'
                       }}</span>
                     </div>
                   </div>
@@ -98,16 +87,16 @@
                       <span class="state-title">{{ Object.values(data)[0] }} :</span>
                       <span class="state-val">{{
                         (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
-                          ? monitorData[groupNum - 1][Object.keys(data)[0]]
-                          : '-'
+                        ? monitorData[groupNum - 1][Object.keys(data)[0]]
+                        : '-'
                       }}</span>
                     </div>
                     <div class="item-col" v-if="Object.keys(data)[1]">
                       <span class="state-title">{{ Object.values(data)[1] }} :</span>
                       <span class="state-val">{{
                         (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
-                          ? monitorData[groupNum - 1][Object.keys(data)[1]]
-                          : '-'
+                        ? monitorData[groupNum - 1][Object.keys(data)[1]]
+                        : '-'
                       }}</span>
                     </div>
                   </div>
@@ -135,9 +124,11 @@
                       :disabled="airCompressorState[groupNum - 1][`controlModel`]"
                       @change="handlerDevice(airCompressorState[groupNum - 1], index)"
                     /> -->
-                    <a-button v-if="index==0" size="small"  type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1],false)">一键启停</a-button>
-                    <a-button v-else size="small"  type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
-                 
+                    <a-button v-if="index == 0" size="small" type="text" style="color: #fff;"
+                      @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
+                    <a-button v-else size="small" type="text" style="color: #fff;"
+                      @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
+
                   </div>
                 </div>
                 <div class="control-item" v-for="(groupNum, index) in monitorDataGroupNum" :key="groupNum">
@@ -151,8 +142,10 @@
                       :disabled="airCompressorState[groupNum - 1][`controlModel`]"
                       @change="handlerDevice(airCompressorState[groupNum - 1], index)"
                     /> -->
-                    <a-button v-if="index==0" size="small"  type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1],true)">一键复位</a-button>
-                    <a-button v-else size="small"  type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1],true)">一键复位</a-button>
+                    <a-button v-if="index == 0" size="small" type="text" style="color: #fff;"
+                      @click="handlerDevice(airCompressorState[groupNum - 1], true)">一键复位</a-button>
+                    <a-button v-else size="small" type="text" style="color: #fff;"
+                      @click="handlerDevice(airCompressorState[groupNum - 1], true)">一键复位</a-button>
                   </div>
                 </div>
               </div>
@@ -163,703 +156,924 @@
               <div>设备实时监测曲线</div>
             </template>
             <template #container>
-              <BarAndLine
-                v-if="chartsColumns.length > 0"
-                xAxisPropType="readTime"
-                :dataSource="echartData"
-                height="340px"
-                :chartsColumns="chartsColumns"
-                chartsType="listMonitor"
-                :option="echatsOption"
-              />
-                        <!-- :option="zhudanOption" -->
+              <BarAndLine v-if="chartsColumns.length > 0" xAxisPropType="readTime" :dataSource="echartData" height="340px"
+                :chartsColumns="chartsColumns" chartsType="listMonitor" :option="echatsOption" />
+              <!-- :option="zhudanOption" -->
             </template>
           </ventBox1>
         </div>
       </div>
     </div>
   </div>
-  <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK" @handle-cancel="handleCancel" />
+  <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK"
+    @handle-cancel="handleCancel" />
 </template>
 <script lang="ts" setup name="nitrogenHome">
-  import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject } from 'vue';
-  import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
-  import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
-  import { getDevice } from '../nitrogen.api';
-  import { SvgIcon } from '/@/components/Icon';
-  import BarAndLine from '/@/components/chart/BarAndLine.vue';
-  import { zhudanOption } from '../nitrogen.data.ts';
-  import HandleModal from './modal.vue';
-  import { deviceControlApi } from '/@/api/vent/index';
-  import { message } from 'ant-design-vue';
-  import { computed } from 'vue';
-  import lodash from 'lodash';
-
-  const globalConfig = inject('globalConfig');
-  
-  const props = defineProps({
-    deviceId: {
-      type: String,
-      require: true,
-    },
-    modalType: {
-      type: String,
-      require: true,
-    },
-  });
-  const modalTitle = ref(''); // 模态框标题显示内容,根据设备操作类型决定
-  const modalType = ref(''); // 模态框内容显示类型,设备操作类型
-  const modalIsShow = ref<boolean>(false); // 是否显示模态框
-  const loading = ref(true);
-  let kzParam = reactive<any>({
-    data: {},
-    isFw:null,
-  });
-
-  // const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
-
-  const flvURL1 = () => {
-    // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-    return '';
-  };
-  const colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9']
-  const echatsOption = {
-    grid: {
-      top: '35%',
-      left: '-25px',
-      right: '10px',
-      bottom: '3%',
-      containLabel: true
-    },
-    toolbox: {
-      feature: {}
-    }
+import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject, computed } from 'vue';
+import ventBox1 from '/@/components/vent/ventBox1.vue';
+import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
+import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
+import { getDevice } from '../nitrogen.api';
+import { SvgIcon } from '/@/components/Icon';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import { zhudanOption } from '../nitrogen.data.ts';
+import HandleModal from './modal.vue';
+import { deviceControlApi } from '/@/api/vent/index';
+import { message } from 'ant-design-vue';
+import lodash from 'lodash';
+
+const globalConfig = inject('globalConfig');
+
+const props = defineProps({
+  deviceId: {
+    type: String,
+    require: true,
+  },
+  modalType: {
+    type: String,
+    require: true,
+  },
+});
+const modalTitle = ref(''); // 模态框标题显示内容,根据设备操作类型决定
+const modalType = ref(''); // 模态框内容显示类型,设备操作类型
+const modalIsShow = ref<boolean>(false); // 是否显示模态框
+const loading = ref(true);
+let kzParam = reactive<any>({
+  data: {},
+  isFw: null,
+});
+
+// const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
+
+const flvURL1 = () => {
+  // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+  return '';
+};
+const colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9']
+const echatsOption = {
+  grid: {
+    top: '35%',
+    left: '-25px',
+    right: '10px',
+    bottom: '3%',
+    containLabel: true
+  },
+  toolbox: {
+    feature: {}
   }
-  const monitorDataGroupNum = ref(0);
-
-  let airCompressorState = reactive<any[]>([]);
-
-  const groupParameterData = [
-    {
-      FluxTotal1: '累计流量(m³)',
-      InputFlux: '瞬时流量(m³/h)',
-    },
-    {
-      PreMembraneTemperature: '膜前温度(­°C)',
-      NitrogenPurity: '氮气纯度(%)',
-    },
-  ];
-  const deviceParameterData = [
-    {
-      AirCompressor_ExhaustPre: '排气压力(KPa)',
-      AirCompressor_ExhaustTemp: '排气温度(­°C)',
-    },
-    {
-      AirCompressor_RunTime: '运行时间(h)',
-      AirCompressor_LoadTime: '加载时间(h)',
-    },
-  ];
-  const propTypeArr = ref([])
-  const chartsColumns = ref([])
-  watch(monitorDataGroupNum, () => {
-    
-    const arr = <any[]>[]
-    const item = {
-      legend: '瞬时流量',
-      seriesName: '(m³/h)',
-      ymax: 5,
-      yname: 'm³/h',
-      linetype: 'line',
-      yaxispos: 'left',
-      color: '#FDB146',
-      sort: 1,
-      xRotate: 0,
-      dataIndex: 'InputFlux',
-    }
-    const propTypeList = []
-    for (let i = 1; i <= monitorDataGroupNum.value; i++) {
-      const lineType = lodash.cloneDeep(item)
-      lineType.legend = `制氮机${i}瞬时流量`;
-      lineType.dataIndex = `InputFlux${i}`
-      lineType.color = colors[i-1]
-      arr.push(lineType)
-    }
-    chartsColumns.value = arr
-
-  })
-
-
-
-  const monitorData = ref(
-    new Array(3).fill({
-      // strName: '空压机',
-      // cumulativeFlow: '-',
-      // centerTemperature: '-',
-      // outletTemperature: '-',
-      // Ia: '-',
-      // Ib: '-',
-      // Ic: '-',
-      // Vab: '-',
-      // Vac: '-',
-      // Vbc: '-',
-      // compressGroupName: '',
-      // compressExhaustPressF1: '-',
-      // compressSeparatePressF1: '-',
-      // compressHostTempF1: '-',
-      // compressCrewTempF1: '-',
-      // compressRunTimeF1: '-',
-      // controlModel: 'LOC'
-    })
-  );
-
-  //图表数据
-  let echartData = ref<any>([]);
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  async function getMonitor(flag?) {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = await setTimeout(
-        async () => {
-          if (props.deviceId) {
-            await getDataSource(props.deviceId);
-          }
-          if (timer) {
-            timer = null;
-          }
-          await getMonitor();
-        },
-        flag ? 0 : 3000
-      );
-    }
+}
+const monitorDataGroupNum = ref(0);
+
+let airCompressorState = reactive<any[]>([]);
+
+const groupParameterData = [
+  {
+    FluxTotal1: '累计流量(m³)',
+    InputFlux: '瞬时流量(m³/h)',
+  },
+  {
+    PreMembraneTemperature: '膜前温度(­°C)',
+    NitrogenPurity: '氮气纯度(%)',
+  },
+];
+const deviceParameterData = [
+  {
+    AirCompressor_ExhaustPre: '排气压力(KPa)',
+    AirCompressor_ExhaustTemp: '排气温度(­°C)',
+  },
+  {
+    AirCompressor_RunTime: '运行时间(h)',
+    AirCompressor_LoadTime: '加载时间(h)',
+  },
+];
+const propTypeArr = ref([])
+const chartsColumns = ref([])
+watch(monitorDataGroupNum, () => {
+
+  const arr = <any[]>[]
+  const item = {
+    legend: '瞬时流量',
+    seriesName: '(m³/h)',
+    ymax: 5,
+    yname: 'm³/h',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#FDB146',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'InputFlux',
   }
-
-  async function getDataSource(systemID) {
-    const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
-    console.log(res, 'res---------------');
-   
-    if (res) {
-      const result = res;
-      if (!result || result.msgTxt.length < 1) return;
-      result.msgTxt.forEach((item) => {
-        if (item.type && item.type.startsWith('nitrogen')) {
-          airCompressorState.length = 0;
-          monitorData.value = item['datalist'].filter((data) => {
-            const readData = data.readData;
-            airCompressorState.push({
-              id: data.deviceID,
-              deviceType: data.deviceType,
-              HMIReset: readData.HMIReset,
-              HMIStartStop: readData.HMIStartStop
-            });
-            return Object.assign(data, readData);
-          });
-          const airCompressor = {readTime: monitorData.value[0]['readTime'].substring(11) }
-          const dataArr = lodash.cloneDeep(echartData.value)
-          //图表数据
-          if (dataArr.length <= 5) {
-            monitorData.value.forEach((el, index) => {
-              airCompressor[`InputFlux${index+1}`] = el['InputFlux'] || 0
-            });
-            dataArr.push(airCompressor)
-          }else{
-            dataArr.shift()
-            dataArr.push(airCompressor)
-          }
-          echartData.value = dataArr
-          
+  const propTypeList = []
+  for (let i = 1; i <= monitorDataGroupNum.value; i++) {
+    const lineType = lodash.cloneDeep(item)
+    lineType.legend = `制氮机${i}瞬时流量`;
+    lineType.dataIndex = `InputFlux${i}`
+    lineType.color = colors[i - 1]
+    arr.push(lineType)
+  }
+  chartsColumns.value = arr
+
+})
+
+
+
+const monitorData = ref(
+  new Array(3).fill({
+    // strName: '空压机',
+    // cumulativeFlow: '-',
+    // centerTemperature: '-',
+    // outletTemperature: '-',
+    // Ia: '-',
+    // Ib: '-',
+    // Ic: '-',
+    // Vab: '-',
+    // Vac: '-',
+    // Vbc: '-',
+    // compressGroupName: '',
+    // compressExhaustPressF1: '-',
+    // compressSeparatePressF1: '-',
+    // compressHostTempF1: '-',
+    // compressCrewTempF1: '-',
+    // compressRunTimeF1: '-',
+    // controlModel: 'LOC'
+  })
+);
+
+//图表数据
+let echartData = ref<any>([]);
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+async function getMonitor(flag?) {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    timer = await setTimeout(
+      async () => {
+        if (props.deviceId) {
+          await getDataSource(props.deviceId);
         }
-      });
-      monitorDataGroupNum.value = monitorData.value.length;
-    }
+        if (timer) {
+          timer = null;
+        }
+        await getMonitor();
+      },
+      flag ? 0 : 3000
+    );
   }
+}
+
+async function getDataSource(systemID) {
+  const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
+  console.log(res, 'res---------------');
+
+  let objParams = reactive({
+    "result": {
+      "cmd": "monitordata",
+      "msgTxt": [
+        {
+          "datalist": [
+            {
+              "msgType": null,
+              "deviceID": "1705212847586627588",
+              "strname": "12上302注氮机1",
+              "strinstallpos": "12上302注氮机1",
+              "fsectarea": "null",
+              "stationname": "12s302kd制氮分站1",
+              "deviceType": "nitrogen_zd_12s302zd",
+              "typeName": "注氮机设备",
+              "netStatus": 0,
+              "warnFlag": 0,
+              "warnLevel": 0,
+              "warnLevel_str": "正常",
+              "warnTime": null,
+              "readTime": "2023-12-04 09:45:37",
+              "warnDes": "",
+              "frontGateOpenCtrl": null,
+              "rearGateOpenCtrl": null,
+              "readData": {
+                "RunTime4": "2000",
+                "RunTime3": "77",
+                "RunTime2": "24",
+                "RunTime1": "24",
+                "sign": "0",
+                "AirCompressor_ShortCutFaul": "0",
+                "HMIReset": "0",
+                "AirCompressor_Status": "0",
+                "AirCompressor_OilGasBarrel_HighPressureFault": "0",
+                "AirCompressor_PhaseFailureFault1": "0",
+                "AirCompressor_OverVoltageFault": "0",
+                "AirCompressor_TotalFailureSignal1": "0",
+                "AirCompressor_PhaseFailureFault": "0",
+                "InputFlux": "0.25",
+                "AirCompressor_LoadTime": "1597",
+                "AirCompressor_Fan_Current": "0",
+                "FluxTotal1": (Math.random()*3972).toFixed(2),
+                "FluxTotal2": "145.0",
+                "AirCompressor_OilGasBarrel_SeparatorFault": "0",
+                "AirCompressor_TotalFailureSignal": "1",
+                "AirCompressor_RunTime": "1",
+                "AirCompressor_MainMotor_OverTempFault": "0",
+                "AirCompressor_PhaseSequenceFault1": "0",
+                "AirCompressor_LoadorUnload": "0",
+                "AirCompressor_OilPressureLowFault": "0",
+                "AirCompressor_ExhaustTemp": "25",
+                "HMIStartStop": "0",
+                "AirCompressor_MainMotor_Current": "0",
+                "AirCompressor_ExhaustPre": (Math.random()*2930).toFixed(2),
+                "AirCompressor_CtrlMode": "1",
+                "AirCompressor_UnbalanceFault": "0",
+                "AirCompressor_NoWaterFault": "1",
+                "AirCompressor_MainMotor_OverloadFault": "0",
+                "o2Val": "20.7",
+                "AirCompressor_OilGasBarrel_OverTempAlarm": "0",
+                "NitrogenPurity": "79.63",
+                "AirCompressor_LowVoltageFault": "0",
+                "AirCompressor_Fan_OverloadFault": "0",
+                "AirCompressor_LeakageLock": "0",
+                "AirCompressor_PowerFault": "0",
+                "temperature": "20.3",
+                "AirCompressor_ExhaustPreHighFault": "0",
+                "AirCompressor_SysVoltage": "1139",
+                "AirCompressor_CloseFail": "0",
+                "AirCompressor_ExhaustTemp1": "0",
+                "PreMembraneTemperature": "23.0",
+                "fumes": "0.0",
+                "AirCompressor_OilGasBarrel_FilterBlockageFault": "0",
+                "AirCompressor_OpenFail": "0",
+                "AirCompressor_OilGasBarrel_OverTempAlarm1": "0",
+                "isRun": "-2",
+                "AirCompressor_PhaseSequenceFault": "0"
+              },
+              "readDataDes": null,
+              "summaryHour": [],
+              "summaryDay": [],
+              "history": [],
+              "totalInfo": null,
+              "sign": null,
+              "cameras": [],
+              "links": [],
+              "other1": null,
+              "other2": null,
+              "other3": null
+            },
+            {
+              "msgType": null,
+              "deviceID": "1705212847586627589",
+              "strname": "12上302注氮机2",
+              "strinstallpos": "12上302注氮机2",
+              "fsectarea": "null",
+              "stationname": "12s302kd制氮分站2",
+              "deviceType": "nitrogen_zd_12s302zd",
+              "typeName": "注氮机设备",
+              "netStatus": 0,
+              "warnFlag": 0,
+              "warnLevel": 0,
+              "warnLevel_str": "正常",
+              "warnTime": null,
+              "readTime": "2023-12-04 09:45:47",
+              "warnDes": "",
+              "frontGateOpenCtrl": null,
+              "rearGateOpenCtrl": null,
+              "readData": {
+                "RunTime4": "2000",
+                "RunTime3": "202",
+                "RunTime2": "27",
+                "RunTime1": "19",
+                "sign": "0",
+                "AirCompressor_ShortCutFaul": "0",
+                "HMIReset": "0",
+                "AirCompressor_Status": "0",
+                "AirCompressor_OilGasBarrel_HighPressureFault": "0",
+                "AirCompressor_PhaseFailureFault1": "0",
+                "AirCompressor_OverVoltageFault": "0",
+                "AirCompressor_TotalFailureSignal1": "0",
+                "AirCompressor_PhaseFailureFault": "0",
+                "InputFlux": "0.0",
+                "AirCompressor_LoadTime": "1210",
+                "AirCompressor_Fan_Current": "0",
+                "FluxTotal1": (Math.random()*9350).toFixed(2),
+                "FluxTotal2": "117.0",
+                "AirCompressor_OilGasBarrel_SeparatorFault": "0",
+                "AirCompressor_TotalFailureSignal": "1",
+                "AirCompressor_RunTime": "1",
+                "AirCompressor_MainMotor_OverTempFault": "0",
+                "AirCompressor_PhaseSequenceFault1": "0",
+                "AirCompressor_LoadorUnload": "0",
+                "AirCompressor_OilPressureLowFault": "0",
+                "AirCompressor_ExhaustTemp": "27",
+                "HMIStartStop": "0",
+                "AirCompressor_MainMotor_Current": "0",
+                "AirCompressor_ExhaustPre": (Math.random()*4930).toFixed(2),
+                "AirCompressor_CtrlMode": "1",
+                "AirCompressor_UnbalanceFault": "0",
+                "AirCompressor_NoWaterFault": "1",
+                "AirCompressor_MainMotor_OverloadFault": "0",
+                "o2Val": "20.7",
+                "AirCompressor_OilGasBarrel_OverTempAlarm": "0",
+                "NitrogenPurity": "79.45",
+                "AirCompressor_LowVoltageFault": "0",
+                "AirCompressor_Fan_OverloadFault": "0",
+                "AirCompressor_LeakageLock": "0",
+                "AirCompressor_PowerFault": "0",
+                "temperature": "20.3",
+                "AirCompressor_ExhaustPreHighFault": "0",
+                "AirCompressor_SysVoltage": "1143",
+                "AirCompressor_CloseFail": "0",
+                "AirCompressor_ExhaustTemp1": "0",
+                "PreMembraneTemperature": "22.63",
+                "fumes": "0.0",
+                "AirCompressor_OilGasBarrel_FilterBlockageFault": "0",
+                "AirCompressor_OpenFail": "0",
+                "AirCompressor_OilGasBarrel_OverTempAlarm1": "0",
+                "isRun": "-2",
+                "AirCompressor_PhaseSequenceFault": "0"
+              },
+              "readDataDes": null,
+              "summaryHour": [],
+              "summaryDay": [],
+              "history": [],
+              "totalInfo": null,
+              "sign": null,
+              "cameras": [],
+              "links": [],
+              "other1": null,
+              "other2": null,
+              "other3": null
+            }
+          ],
+          "avginfo": {
+            "warnFlag": {
+              "value": 0
+            }
+          },
+          "typeName": "注氮机设备",
+          "type": "nitrogen_zd_12s302zd"
+        },
 
-  function handlerDevice(data,bol) {
-    console.log(bol,'bol-------')
-    kzParam.data = data;
-    kzParam.isFw = bol;
-    console.log(kzParam,'kz--------')
-    if ( bol) {
-      modalTitle.value = '一键复位';
-      modalType.value = '1';
-      modalIsShow.value = true;
-      kzParam.data.HMIReset=!data.HMIReset
-    } else {
-      modalTitle.value = '一键启停';
-      modalType.value = '2';
-      modalIsShow.value = true;
-      kzParam.data.HMIStartStop =!data.HMIStartStop;
-    }
-  }
-  function handleOK(passWord, handlerState) {
-    console.log(kzParam, 'kz----------');
-    // if (passWord !== '123456') {
-    //   message.warning('密码不正确,请重新输入');
-    //   return;
-    // }
-
-    let data = {};
-    if (kzParam.isFw ) {
-      data = {
-        deviceid: kzParam.data.id,
-        devicetype:kzParam.data.deviceType,
-        password: passWord,
-        HMIReset: kzParam.data.HMIReset,
-      };
-    } else {
-      data = {
-        deviceid: kzParam.data.id,
-        password: passWord,
-        devicetype:kzParam.data.deviceType,
-        HMIStartStop: kzParam.data.HMIStartStop,
-      };
+      ]
     }
+  })
 
-    deviceControlApi(data).then((res) => {
-      // 模拟时开启
-      if (res.success) {
-        modalIsShow.value = false;
-        getDataSource(props.deviceId);
-        if(globalConfig.History_Type == 'remote'){
-          message.success('指令已下发至生产管控平台成功!')
-        }else{
-          message.success('指令已下发成功!')
+  if (res) {
+    const result =objParams.result;
+    if (!objParams.result || objParams.result.msgTxt.length < 1) return;
+    objParams.result.msgTxt.forEach((item) => {
+      if (item.type && item.type.startsWith('nitrogen')) {
+        airCompressorState.length = 0;
+        
+        monitorData.value = item['datalist'].filter((data) => {
+          const readData = data.readData;
+          airCompressorState.push({
+            id: data.deviceID,
+            deviceType: data.deviceType,
+            HMIReset: readData.HMIReset,
+            HMIStartStop: readData.HMIStartStop
+          });
+          return Object.assign(data, readData);
+        });
+        console.log(monitorData,'monitorData.value---===')
+        const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) }
+        const dataArr = lodash.cloneDeep(echartData.value)
+        //图表数据
+        if (dataArr.length <= 5) {
+          monitorData.value.forEach((el, index) => {
+            airCompressor[`InputFlux${index + 1}`] = el['InputFlux'] || 0
+          });
+          dataArr.push(airCompressor)
+        } else {
+          dataArr.shift()
+          dataArr.push(airCompressor)
         }
+        echartData.value = dataArr
+
       }
     });
+    monitorDataGroupNum.value = monitorData.value.length;
   }
-  function handleCancel() {
-    modalIsShow.value = false;
-    modalTitle.value = '';
-    modalType.value = '';
+
+
+
+  // if (res) {
+  //   const result = res;
+  //   if (!result || result.msgTxt.length < 1) return;
+  //   result.msgTxt.forEach((item) => {
+  //     if (item.type && item.type.startsWith('nitrogen')) {
+  //       airCompressorState.length = 0;
+  //       monitorData.value = item['datalist'].filter((data) => {
+  //         const readData = data.readData;
+  //         airCompressorState.push({
+  //           id: data.deviceID,
+  //           deviceType: data.deviceType,
+  //           HMIReset: readData.HMIReset,
+  //           HMIStartStop: readData.HMIStartStop
+  //         });
+  //         return Object.assign(data, readData);
+  //       });
+  //       const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) }
+  //       const dataArr = lodash.cloneDeep(echartData.value)
+  //       //图表数据
+  //       if (dataArr.length <= 5) {
+  //         monitorData.value.forEach((el, index) => {
+  //           airCompressor[`InputFlux${index + 1}`] = el['InputFlux'] || 0
+  //         });
+  //         dataArr.push(airCompressor)
+  //       } else {
+  //         dataArr.shift()
+  //         dataArr.push(airCompressor)
+  //       }
+  //       echartData.value = dataArr
+
+  //     }
+  //   });
+  //   monitorDataGroupNum.value = monitorData.value.length;
+  // }
+}
+
+function handlerDevice(data, bol) {
+  console.log(bol, 'bol-------')
+  kzParam.data = data;
+  kzParam.isFw = bol;
+  console.log(kzParam, 'kz--------')
+  if (bol) {
+    modalTitle.value = '一键复位';
+    modalType.value = '1';
+    modalIsShow.value = true;
+    kzParam.data.HMIReset = !data.HMIReset
+  } else {
+    modalTitle.value = '一键启停';
+    modalType.value = '2';
+    modalIsShow.value = true;
+    kzParam.data.HMIStartStop = !data.HMIStartStop;
+  }
+}
+function handleOK(passWord, handlerState) {
+  console.log(kzParam, 'kz----------');
+  // if (passWord !== '123456') {
+  //   message.warning('密码不正确,请重新输入');
+  //   return;
+  // }
+
+  let data = {};
+  if (kzParam.isFw) {
+    data = {
+      deviceid: kzParam.data.id,
+      devicetype: kzParam.data.deviceType,
+      password: passWord,
+      HMIReset: kzParam.data.HMIReset,
+    };
+  } else {
+    data = {
+      deviceid: kzParam.data.id,
+      password: passWord,
+      devicetype: kzParam.data.deviceType,
+      HMIStartStop: kzParam.data.HMIStartStop,
+    };
   }
 
-  watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
-    nextTick(() => {
-      if (newMonitorDataGroupNum && !newLoading) {
-        setModelType(props.modalType, newMonitorDataGroupNum);
+  deviceControlApi(data).then((res) => {
+    // 模拟时开启
+    if (res.success) {
+      modalIsShow.value = false;
+      getDataSource(props.deviceId);
+      if (globalConfig.History_Type == 'remote') {
+        message.success('指令已下发至生产管控平台成功!')
+      } else {
+        message.success('指令已下发成功!')
       }
-    });
+    }
   });
-
-  onMounted(async () => {
-    await getMonitor(true);
-    await mountedThree().then(() => {
-      loading.value = false;
-    });
+}
+function handleCancel() {
+  modalIsShow.value = false;
+  modalTitle.value = '';
+  modalType.value = '';
+}
+
+watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
+  nextTick(() => {
+    if (newMonitorDataGroupNum && !newLoading) {
+      setModelType(props.modalType, newMonitorDataGroupNum);
+    }
   });
+});
 
-  onUnmounted(() => {
-    destroy();
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
+
+onMounted(async () => {
+  await getMonitor(true);
+  await mountedThree().then(() => {
+    loading.value = false;
   });
+});
+
+onUnmounted(() => {
+  destroy();
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+});
 </script>
 
 <style lang="less" scoped>
-  @ventSpace: zxm;
-
-  .nitrogen-box {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
+@ventSpace: zxm;
+
+.nitrogen-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+#nitrogenCss3D {
+  .modal-monitor {
+    width: 200px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
   }
 
-  #nitrogenCss3D {
-    .modal-monitor {
-      width: 200px;
-      position: absolute;
-      left: 0px;
-      top: 0px;
-    }
-
-    &:deep(.win) {
-      margin: 0 !important;
-      background: #00000044;
-    }
+  &:deep(.win) {
+    margin: 0 !important;
+    background: #00000044;
   }
-
-  .nitrogen-home {
+}
+
+.nitrogen-home {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  top: 20px;
+
+  .nitrogen-container {
     width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 9999;
+    height: calc(100%);
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    pointer-events: none;
-    top: 20px;
+    justify-content: space-between;
+    margin-bottom: 100px;
 
-    .nitrogen-container {
+    .top-box {
       width: 100%;
-      height: calc(100%);
+      padding: 10px;
+      overflow: hidden;
       display: flex;
       justify-content: space-between;
-      margin-bottom: 100px;
 
-      .top-box {
-        width: 100%;
-        padding: 10px;
-        overflow: hidden;
+      .lr-box {
+        height: fit-content;
         display: flex;
-        justify-content: space-between;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+        z-index: 9999;
+        pointer-events: auto;
+      }
 
-        .lr-box {
-          height: fit-content;
-          display: flex;
-          flex-direction: column;
-          position: relative;
-          overflow: hidden;
-          z-index: 9999;
-          pointer-events: auto;
+      .item {
+        width: 335px;
+        height: auto;
+        position: relative;
+        border-radius: 5px;
+        margin-top: 10px;
+        margin-bottom: 0px;
+        pointer-events: auto;
+        color: #fff;
+        overflow: hidden;
+
+        &:first-child {
+          margin-top: 0px;
         }
 
-        .item {
-          width: 335px;
-          height: auto;
-          position: relative;
-          border-radius: 5px;
-          margin-top: 10px;
-          margin-bottom: 0px;
-          pointer-events: auto;
+        .base-title {
           color: #fff;
-          overflow: hidden;
-
-          &:first-child {
-            margin-top: 0px;
+          margin-bottom: 8px;
+          padding-left: 10px;
+          position: relative;
+          font-size: 16px;
+
+          &::after {
+            content: '';
+            position: absolute;
+            display: block;
+            width: 4px;
+            height: 12px;
+            top: 7px;
+            left: 0px;
+            background: #45d3fd;
+            border-radius: 4px;
           }
+        }
 
-          .base-title {
-            color: #fff;
-            margin-bottom: 8px;
-            padding-left: 10px;
-            position: relative;
-            font-size: 16px;
-
-            &::after {
-              content: '';
-              position: absolute;
-              display: block;
-              width: 4px;
-              height: 12px;
-              top: 7px;
-              left: 0px;
-              background: #45d3fd;
-              border-radius: 4px;
-            }
-          }
+        .state-item {
+          display: flex;
+          flex-direction: row;
+          padding: 5px;
 
-          .state-item {
+          .item-col {
+            width: calc(50% - 5px);
             display: flex;
-            flex-direction: row;
-            padding: 5px;
+            justify-content: center;
+            align-items: center;
+            padding-right: 4px;
+            background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
 
-            .item-col {
-              width: calc(50% - 5px);
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              padding-right: 4px;
-              background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+            &:first-child {
+              margin-right: 10px;
+            }
+
+            .state-title {
+              color: #ffffffcc;
+              flex: 9;
+              font-size: 14px;
+            }
 
-              &:first-child {
-                margin-right: 10px;
-              }
-
-              .state-title {
-                color: #ffffffcc;
-                flex: 9;
-                font-size: 14px;
-              }
-
-              .state-val {
-                flex: 1;
-                color: #00eefffe;
-                margin-right: 5px;
-                text-align: right;
-                font-size: 14px;
-              }
+            .state-val {
+              flex: 1;
+              color: #00eefffe;
+              margin-right: 5px;
+              text-align: right;
+              font-size: 14px;
             }
           }
+        }
 
-          .signal-box {
-            margin: 5px 0;
-            display: flex;
-            align-items: center;
+        .signal-box {
+          margin: 5px 0;
+          display: flex;
+          align-items: center;
 
-            .signal-title {
-              color: #7af5ff;
-              margin: 0 5px;
-            }
+          .signal-title {
+            color: #7af5ff;
+            margin: 0 5px;
+          }
 
-            &:last-child {
-              margin-right: 0px;
-            }
+          &:last-child {
+            margin-right: 0px;
           }
+        }
 
-          .list-item {
-            padding: 0 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+        .list-item {
+          padding: 0 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-            .item-data-key {
-              color: #ffffff99;
-            }
+          .item-data-key {
+            color: #ffffff99;
           }
+        }
 
-          .item-data-box {
-            color: #fff;
+        .item-data-box {
+          color: #fff;
 
-            .state-icon {
-              display: inline-block;
-              width: 12px;
-              height: 12px;
-              border-radius: 12px;
-            }
+          .state-icon {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 12px;
+          }
 
-            .open {
-              border: 5px solid #133a56;
-              background: #4ecb73;
-            }
+          .open {
+            border: 5px solid #133a56;
+            background: #4ecb73;
+          }
 
-            .close {
-              border: 5px solid #192961;
-              background: #6d7898;
-            }
+          .close {
+            border: 5px solid #192961;
+            background: #6d7898;
           }
         }
+      }
+
+      .item-l {
+        width: 100%;
 
-        .item-l {
+        .monitor-box {
           width: 100%;
 
-          .monitor-box {
+          .parameter-title {
+            position: relative;
             width: 100%;
+            height: 14px;
+            margin-top: 10px;
 
-            .parameter-title {
-              position: relative;
-              width: 100%;
-              height: 14px;
-              margin-top: 10px;
-
-              .icon,
-              span {
-                position: absolute;
-                top: -10px;
-              }
+            .icon,
+            span {
+              position: absolute;
+              top: -10px;
             }
+          }
 
-            .group-parameter-title {
-              background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+          .group-parameter-title {
+            background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
 
-              .icon {
-                left: -12px;
-                top: -17px;
-              }
+            .icon {
+              left: -12px;
+              top: -17px;
+            }
 
-              span {
-                left: 18px;
-              }
+            span {
+              left: 18px;
+            }
 
-              .item-col {
-                background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
-              }
+            .item-col {
+              background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
             }
+          }
 
-            .device-parameter-title {
-              background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+          .device-parameter-title {
+            background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
 
-              .icon {
-                left: -10px;
-                top: -14px;
-              }
+            .icon {
+              left: -10px;
+              top: -14px;
+            }
 
-              span {
-                left: 18px;
-              }
+            span {
+              left: 18px;
+            }
 
-              .item-col {
-                background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
-              }
+            .item-col {
+              background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
             }
           }
         }
+      }
 
-        .right-box {
-          width: 330px;
-          margin-top: 50px;
+      .right-box {
+        width: 330px;
+        margin-top: 50px;
+
+        .control-group {
+          display: flex;
+          // justify-content: space-around;
+          flex-wrap: wrap;
 
-          .control-group {
+          .control-item {
+            width: 50%; //lxh
             display: flex;
-            // justify-content: space-around;
-            flex-wrap: wrap;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 0 4px;
 
-            .control-item {
-              width: 50%;//lxh
+            .control-item-title {
+              color: #a6dce9;
+              position: relative;
+              top: 5px;
+            }
+
+            .control-item-state {
+              width: 94px;
+              height: 47px;
+              background: url('/@/assets/images/vent/control-switch-bg.png');
               display: flex;
-              flex-direction: column;
               justify-content: center;
               align-items: center;
-              padding: 0 4px;
-
-              .control-item-title {
-                color: #a6dce9;
-                position: relative;
-                top: 5px;
-              }
-
-              .control-item-state {
-                width: 94px;
-                height: 47px;
-                background: url('/@/assets/images/vent/control-switch-bg.png');
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                color: #fff;
-              }
-
-              .button-box {
-                position: relative;
-                padding: 5px;
-                border: 1px transparent solid;
-                background-clip: border-box;
-                border-radius: 5px;
-                margin-left: 8px;
-              }
-
-              .a-button {
-                pointer-events: auto;
-              }
-
-              &::v-deep .a-button--mini {
-                padding: 6px 10px;
-              }
-
-              &::v-deep .a-button--mini.is-round {
-                padding: 6px 10px;
-              }
+              color: #fff;
+            }
+
+            .button-box {
+              position: relative;
+              padding: 5px;
+              border: 1px transparent solid;
+              background-clip: border-box;
+              border-radius: 5px;
+              margin-left: 8px;
+            }
+
+            .a-button {
+              pointer-events: auto;
             }
-          }
-        }
 
-        .left-box {
-          width: 365px;
-          margin-top: 80px;
+            &::v-deep .a-button--mini {
+              padding: 6px 10px;
+            }
+
+            &::v-deep .a-button--mini.is-round {
+              padding: 6px 10px;
+            }
+          }
         }
       }
 
-      &:deep(.win) {
-        width: 100%;
-        margin: 0 !important;
+      .left-box {
+        width: 365px;
+        margin-top: 80px;
       }
     }
-  }
 
-  &:deep(.main) {
-    .title {
-      height: 34px;
-      text-align: center;
-      font-weight: 600;
-      color: #7af5ff;
-      // background-image: url('../../../assets/img/yfj/light.png');
-      background-repeat: no-repeat;
-      background-position-x: center;
-      background-position-y: 100%;
-      background-size: 80%;
-      font-size: 16px;
+    &:deep(.win) {
+      width: 100%;
+      margin: 0 !important;
     }
+  }
+}
+
+&:deep(.main) {
+  .title {
+    height: 34px;
+    text-align: center;
+    font-weight: 600;
+    color: #7af5ff;
+    // background-image: url('../../../assets/img/yfj/light.png');
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: 100%;
+    background-size: 80%;
+    font-size: 16px;
+  }
+
+  .monitor-item {
+    width: 200px;
+    display: flex;
+    flex-direction: row;
+    width: auto;
+    margin-bottom: 3px;
 
-    .monitor-item {
-      width: 200px;
+    .monitor-val {
+      color: #ffb700;
       display: flex;
-      flex-direction: row;
       width: auto;
-      margin-bottom: 3px;
-
-      .monitor-val {
-        color: #ffb700;
-        display: flex;
-        width: auto;
 
-        .val {
-          width: 80px;
-          font-size: 14px;
-        }
-
-        .unit {
-          color: #ffffffbb;
-          font-size: 14px;
-        }
+      .val {
+        width: 80px;
+        font-size: 14px;
       }
-    }
 
-    .monitor-title {
-      width: 100px;
-      color: #7af5ff;
-      font-weight: 400;
-      font-size: 14px;
+      .unit {
+        color: #ffffffbb;
+        font-size: 14px;
+      }
     }
+  }
 
-    .signal-item {
-      display: flex;
-      justify-content: space-between;
+  .monitor-title {
+    width: 100px;
+    color: #7af5ff;
+    font-weight: 400;
+    font-size: 14px;
+  }
 
-      // margin-bottom: 5px;
-      .signal-round {
-        display: inline-block;
-        width: 8px;
-        height: 8px;
+  .signal-item {
+    display: flex;
+    justify-content: space-between;
+
+    // margin-bottom: 5px;
+    .signal-round {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin: 0 10px;
+      position: relative;
+
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        top: -2px;
+        left: -2px;
         border-radius: 50%;
-        margin: 0 10px;
-        position: relative;
-
-        &::after {
-          display: block;
-          content: '';
-          position: absolute;
-          width: 12px;
-          height: 12px;
-          top: -2px;
-          left: -2px;
-          border-radius: 50%;
-        }
       }
+    }
 
-      .signal-round-gry {
-        background-color: #858585;
+    .signal-round-gry {
+      background-color: #858585;
 
-        &::after {
-          background-color: #85858544;
-          box-shadow: 0 0 1px 1px #85858599;
-        }
+      &::after {
+        background-color: #85858544;
+        box-shadow: 0 0 1px 1px #85858599;
       }
+    }
 
-      .signal-round-run {
-        background-color: #67fc00;
+    .signal-round-run {
+      background-color: #67fc00;
 
-        &::after {
-          background-color: #67fc0044;
-          box-shadow: 0 0 1px 1px #c6ff77;
-        }
+      &::after {
+        background-color: #67fc0044;
+        box-shadow: 0 0 1px 1px #c6ff77;
       }
+    }
 
-      .signal-round-warning {
-        background-color: #e9170b;
+    .signal-round-warning {
+      background-color: #e9170b;
 
-        &::after {
-          background-color: #e9170b44;
-          box-shadow: 0 0 1px 1px #e9170b;
-        }
+      &::after {
+        background-color: #e9170b44;
+        box-shadow: 0 0 1px 1px #e9170b;
       }
     }
   }
+}
 
-  :deep(.zxm-radio-wrapper) {
-    color: #fff !important;
-  }
+:deep(.zxm-radio-wrapper) {
+  color: #fff !important;
+}
 </style>