设备预警监测，核桃峪压风管控系统界面开发-提交

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

@@ -7,10 +7,10 @@
           <i style="margin: 0px 5px 0px 5px">
             <SvgIcon class="icon" size="14" name="internet-bad" />
           </i>
-          <span style="color: #fff">{{ nowStatus ? '报警信息' : '网络断开' }}</span>
+          <span style="color: #fff">{{ !nowStatus ? '报警信息' : '网络断开' }}</span>
         </div>
 
-        <div class="now-status">{{ nowStatus ? nowStatus : 0 }}</div>
+        <div class="now-status">{{ !nowStatus ? nowStatus : 0 }}</div>
       </div>
     </div>
     <div class="warn-contents">
@@ -32,178 +32,200 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineProps, watch } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import { getAssetURL } from '/@/utils/ui';
-  let props = defineProps({
-    warnData: Array,
-  });
-
-  const emit = defineEmits(['goDetail']);
-  let nowStatus = ref<any>(0);
-  let warnList = reactive<any[]>([
-    { name: '报警', icon: getAssetURL('home-container/warning/warn-icon.png'), val: 0 },
-    { name: '重大风险预警', icon: getAssetURL('home-container/warning/warn-icon.png'), val: 0 },
-    { name: '较大风险预警', icon: getAssetURL('home-container/warning/warn-icon1.png'), val: 0 },
-    { name: '一般风险预警', icon: getAssetURL('home-container/warning/warn-icon2.png'), val: 0 },
-    { name: '低风险预警', icon: getAssetURL('home-container/warning/warn-icon3.png'), val: 0 },
-  ]);
-
-  //跳转详情
-  function getDetail() {
-    emit('goDetail', 'warning');
+import { ref, reactive, defineProps, watch } from 'vue';
+import { SvgIcon } from '/@/components/Icon';
+import { getAssetURL } from '/@/utils/ui';
+let props = defineProps({
+  warnData: Array,
+});
+
+const emit = defineEmits(['goDetail']);
+let nowStatus = ref<any>(0);
+let warnList = reactive<any[]>([
+  { name: '报警', icon: getAssetURL('home-container/warning/warn-icon.png'), val: 0 },
+  { name: '重大风险预警', icon: getAssetURL('home-container/warning/warn-icon.png'), val: 0 },
+  { name: '较大风险预警', icon: getAssetURL('home-container/warning/warn-icon1.png'), val: 0 },
+  { name: '一般风险预警', icon: getAssetURL('home-container/warning/warn-icon2.png'), val: 0 },
+  { name: '低风险预警', icon: getAssetURL('home-container/warning/warn-icon3.png'), val: 0 },
+]);
+
+//跳转详情
+function getDetail() {
+  emit('goDetail', 'warning');
+}
+watch(
+  () => props.warnData,
+  (val) => {
+    val.forEach((el) => {
+      nowStatus.value = el.netstatus.val;
+      warnList[0].val = el.red.val;
+      warnList[1].val = el.alarm.val;
+      warnList[2].val = el.orange.val;
+      warnList[3].val = el.yellow.val;
+      warnList[4].val = el.blue.val;
+    });
+  },
+  {
+    deep: true,
   }
-  watch(
-    () => props.warnData,
-    (val) => {
-      val.forEach((el) => {
-        nowStatus.value = el.netstatus.val;
-        warnList[0].val = el.red.val;
-        warnList[1].val = el.alarm.val;
-        warnList[2].val = el.orange.val;
-        warnList[3].val = el.yellow.val;
-        warnList[4].val = el.blue.val;
-      });
-    },
-    {
-      deep: true,
-    }
-  );
+);
 </script>
 
 <style lang="less" scoped>
-  @font-face {
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../../assets/font/douyuFont.otf');
+}
+
+.deviceWarn {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
     font-family: 'douyuFont';
-    src: url('../../../../../assets/font/douyuFont.otf');
-  }
-  .deviceWarn {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    .title-top {
-      position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
-      &:hover {
-        color: #66ffff;
-      }
+    cursor: pointer;
+
+    &:hover {
+      color: #66ffff;
     }
-    .toggle-search {
-      position: absolute;
-      left: 9px;
-      top: 37px;
+  }
+
+  .toggle-search {
+    position: absolute;
+    left: 9px;
+    top: 37px;
+    display: flex;
+
+    .status-yx {
+      height: 30px;
+      width: 180px;
+      background-color: rgba(8, 148, 255, 0.3);
+      border: 1px solid #1d80da;
       display: flex;
-      .status-yx {
-        height: 30px;
-        width: 180px;
-        background-color: rgba(8, 148, 255, 0.3);
-        border: 1px solid #1d80da;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .now-status {
-          margin-right: 5px;
-          padding-top: 3px;
-          font-family: 'douyuFont';
-          color: #3df6ff;
-        }
+      justify-content: space-between;
+      align-items: center;
+
+      .now-status {
+        margin-right: 5px;
+        padding-top: 3px;
+        font-family: 'douyuFont';
+        color: #3df6ff;
       }
     }
-    .warn-contents {
-      position: absolute;
-      top: 66px;
-      left: 0;
-      height: calc(100% - 66px);
-      width: 100%;
-      padding: 20px 15px;
-      box-sizing: border-box;
+  }
+
+  .warn-contents {
+    position: absolute;
+    top: 66px;
+    left: 0;
+    height: calc(100% - 66px);
+    width: 100%;
+    padding: 20px 15px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    .warn-box {
+      position: relative;
+      width: 396px;
+      height: 16px;
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      .warn-box {
-        position: relative;
-        width: 396px;
-        height: 16px;
-        display: flex;
-        background: url('../../../../../assets/images/home-container/warn1.png') no-repeat;
-        .warn-icon {
-          position: absolute;
-          left: 10%;
-          top: -20px;
-          width: 44px;
-          height: 35px;
-          img {
-            width: 100%;
-            height: 100%;
-          }
+      background: url('../../../../../assets/images/home-container/warn1.png') no-repeat;
+
+      .warn-icon {
+        position: absolute;
+        left: 10%;
+        top: -20px;
+        width: 44px;
+        height: 35px;
+
+        img {
+          width: 100%;
+          height: 100%;
         }
-        .warn-text {
-          width: 168px;
-          height: 2px;
+      }
+
+      .warn-text {
+        width: 168px;
+        height: 2px;
+        position: absolute;
+        left: 22%;
+        top: -2px;
+        background: url('../../../../../assets/images/home-container/warn7.png') no-repeat;
+        background-size: 100% 100%;
+
+        .text-n {
           position: absolute;
-          left: 22%;
-          top: -2px;
-          background: url('../../../../../assets/images/home-container/warn7.png') no-repeat;
-          background-size: 100% 100%;
-          .text-n {
-            position: absolute;
-            left: 50%;
-            top: -10px;
-            transform: translate(-50%, 0);
-            color: #fff;
-          }
+          left: 50%;
+          top: -10px;
+          transform: translate(-50%, 0);
+          color: #fff;
         }
-        .warn-val {
+      }
+
+      .warn-val {
+        position: absolute;
+        left: 66%;
+        top: -21px;
+        width: 94px;
+        height: 45px;
+        background: url('../../../../../assets/images/home-container/warn8.png') no-repeat;
+
+        .val-n {
           position: absolute;
-          left: 66%;
-          top: -21px;
-          width: 94px;
-          height: 45px;
-          background: url('../../../../../assets/images/home-container/warn8.png') no-repeat;
-          .val-n {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            font-size: 14px;
-            font-family: 'douyuFont';
-            transform: translate(-50%, -52%);
-          }
-        }
-        &:nth-child(1) .val-n {
-          color: red;
-        }
-        &:nth-child(2) .val-n {
-          color: #f93825;
-        }
-        &:nth-child(3) .val-n {
-          color: #ff9b17;
-        }
-        &:nth-child(4) .val-n {
-          color: #ffff00;
-        }
-        &:nth-child(5) .val-n {
-          color: #31dbfd;
+          left: 50%;
+          top: 50%;
+          font-size: 14px;
+          font-family: 'douyuFont';
+          transform: translate(-50%, -52%);
         }
       }
+
+      &:nth-child(1) .val-n {
+        color: red;
+      }
+
+      &:nth-child(2) .val-n {
+        color: #f93825;
+      }
+
+      &:nth-child(3) .val-n {
+        color: #ff9b17;
+      }
+
+      &:nth-child(4) .val-n {
+        color: #ffff00;
+      }
+
+      &:nth-child(5) .val-n {
+        color: #31dbfd;
+      }
     }
   }
-  :deep .zxm-select-selector {
-    width: 100%;
-    height: 30px !important;
-    padding: 0 11px 0px 25px !important;
-    background-color: rgba(8, 148, 255, 0.3) !important;
-    border: 1px solid #1d80da !important;
-  }
-  :deep .zxm-select-selection-item {
-    color: #fff !important;
-    line-height: 28px !important;
-  }
-  :deep .zxm-select-arrow {
-    color: #fff !important;
+}
+
+:deep .zxm-select-selector {
+  width: 100%;
+  height: 30px !important;
+  padding: 0 11px 0px 25px !important;
+  background-color: rgba(8, 148, 255, 0.3) !important;
+  border: 1px solid #1d80da !important;
+}
+
+:deep .zxm-select-selection-item {
+  color: #fff !important;
+  line-height: 28px !important;
+}
+
+:deep .zxm-select-arrow {
+  color: #fff !important;
   }
 </style>

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

@@ -5,45 +5,13 @@
       <div class="icons-box" @mouseleave="resetScroll">
         <template v-for="(item, key) in iconsMonitor" :key="key">
           <div class="icon-item" v-if="item.text">
-            <div
-              class="wrapper"
-              :class="{
-                'level-warning': item['count'] > 0,
-              }"
-            >
+            <div class="wrapper">
               {{ item.text }}
             </div>
             <div></div>
             <img :src="item.url" :alt="item.text" />
+
             <!-- <div
-            class="level-text"
-            :class="{
-              'level-text-0': item.level == 0,
-              'level-text-1': item.level == 101,
-              'level-text-2': item.level == 102,
-              'level-text-3': item.level == 103,
-              'level-text-4': item.level == 104,
-              'level-text-5': item.level == 201,
-              'level-text-6':item.level!=0 && item.level!=101 && item.level!=102 && item.level!=103 && item.level!=104 && item.level!=201
-            }"
-            >{{
-              item.level == 0
-                ? '正常'
-                : item.level == 101
-                ? '较低风险'
-                : item.level == 102
-                ? '低风险'
-                : item.level == 103
-                ? '中风险'
-                : item.level == 104
-                ? '高风险'
-                : item.level == 201
-                ? '报警'
-                : item.level > 1000
-                ? '网络断开'
-                : '未连接'
-            }}</div> -->
-            <div
               class="level-text"
               :class="{
                 'level-text-0': item['count'] == 0,
@@ -51,6 +19,21 @@
               }"
               >{{ item['count'] == 0 ? '正常' : `${item['count']}` }}</div
             >
+          </div> -->
+            <div class="level-text">
+              <div class="all-count">
+                <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
+                <span class="num-count">{{ item.allCount || '-' }}</span>
+              </div>
+              <div class="warn-count">
+                <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
+                <span class="num-count">{{ item.warnCount || '-' }}</span>
+              </div>
+              <div class="close-count">
+                <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
+                <span class="num-count">{{ item.closeCount || '-' }}</span>
+              </div>
+            </div>
           </div>
         </template>
       </div>
@@ -59,260 +42,399 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineProps, watch } from 'vue';
-  import { getAssetURL } from '/@/utils/ui';
-  let props = defineProps({
-    devicedata: Object,
-  });
-  const emit = defineEmits(['goDetail']);
-  let iconsMonitor = reactive({
-    fanmain: {
-      url: getAssetURL('home-container/device/zhushan.png'),
-      level: 0,
-      text: '',
-    },
-    fanlocal: {
-      url: getAssetURL('home-container/device/js.png'),
-      level: 0,
-      text: '',
-    },
-    gate: {
-      url: getAssetURL('home-container/device/fm.png'),
-      level: 0,
-      text: '',
-    },
-    window: {
-      url: getAssetURL('home-container/device/fc.png'),
-      level: 0,
-      text: '',
-    },
-    windrect: {
-      url: getAssetURL('home-container/device/cf.png'),
-      level: 0,
-      text: '',
-    },
-    forcFan: {
-      url: getAssetURL('home-container/device/yafeng.png'),
-      level: 1,
-      text: '',
-    },
-    spray: {
-      url: getAssetURL('home-container/device/penlin.png'),
-      level: 1,
-      text: '',
-    },
-    dustdev: {
-      url: getAssetURL('home-container/device/penfen.png'),
-      level: 1,
-      text: '',
-    },
-    nitrogen: {
-      url: getAssetURL('home-container/device/zhudan.png'),
-      level: 1,
-      text: '',
-    },
-    pulping: {
-      url: getAssetURL('home-container/device/zhujiang.png'),
-      level: 1,
-      text: '',
-    },
-    atomizing: {
-      url: getAssetURL('home-container/device/pw.png'),
-      level: 1,
-      text: '',
-    },
-    dedustefan: {
-      url: getAssetURL('home-container/device/ccq.png'),
-      level: 1,
-      text: '',
-    },
-    pump: {
-      url: getAssetURL('home-container/device/wasibeng.png'),
-      level: 1,
-      text: '',
-    },
-    gas: {
-      url: getAssetURL('home-container/device/js.png'),
-      level: 1,
-      text: '',
-    },
-  });
+import { ref, reactive, defineProps, watch } from 'vue';
+import { getAssetURL } from '/@/utils/ui';
+let props = defineProps({
+  devicedata: Object,
+});
+const emit = defineEmits(['goDetail']);
+let iconsMonitor = reactive({
+  // fanmain: {
+  //   url: getAssetURL('home-container/device/zhushan.png'),
+  //   level: 0,
+  //   text: '',
+  // },
+ 
+  fanmain: {
+    url: getAssetURL('vent/alarm-icons/zhushan.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  fanlocal: {
+    url: getAssetURL('vent/alarm-icons/js.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  gate: {
+    url: getAssetURL('vent/alarm-icons/fm.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  window: {
+    url: getAssetURL('vent/alarm-icons/fc.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  windrect: {
+    url: getAssetURL('vent/alarm-icons/cf.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  forcFan: {
+    url: getAssetURL('vent/alarm-icons/yafeng.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  spray: {
+    url: getAssetURL('vent/alarm-icons/penlin.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  dustdev: {
+    url: getAssetURL('vent/alarm-icons/penfen.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  nitrogen: {
+    url: getAssetURL('vent/alarm-icons/zhudan.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  pulping: {
+    url: getAssetURL('vent/alarm-icons/zhujiang.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  atomizing: {
+    url: getAssetURL('vent/alarm-icons/pw.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  dustsensor: {
+    url: getAssetURL('vent/alarm-icons/ccq.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  gas: {
+    url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  pump: {
+    url: getAssetURL('vent/alarm-icons/wasibeng.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  modelsensor: {
+    url: getAssetURL('vent/alarm-icons/cf.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+});
 
-  const resetScroll = (e: Event) => {
-    if (e.target && e.target) (e.target as Element).scrollTop = 0;
-  };
+const resetScroll = (e: Event) => {
+  if (e.target && e.target) (e.target as Element).scrollTop = 0;
+};
 
-  //跳转详情
-  function getDetail() {
-    // emit('goDetail', 'windrect')
-  }
+//跳转详情
+function getDetail() {
+  // emit('goDetail', 'windrect')
+}
 
-  watch(
-    () => props.devicedata,
-    (val) => {
-      Object.keys(iconsMonitor).forEach((el) => {
-        if (val && val[el]) {
-          iconsMonitor[el].level = val[el].maxLevel;
-          iconsMonitor[el]['text'] = val[el].name;
-          iconsMonitor[el]['count'] = val[el].count;
-        }
-      });
-    },
-    {
-      deep: true,
-    }
-  );
+watch(
+  () => props.devicedata,
+  (val) => {
+    Object.keys(iconsMonitor).forEach((el) => {
+      if (val && val[el]) {
+        iconsMonitor[el].level = val[el].maxLevel;
+        iconsMonitor[el]['text'] = val[el].name;
+        // iconsMonitor[el]['count'] = val[el].count;
+        iconsMonitor[el].allCount = val[el].totalcount
+        iconsMonitor[el].warnCount = val[el].count
+        iconsMonitor[el].closeCount = val[el].netStatus
+      }
+    });
+  },
+  {
+    deep: true,
+  }
+);
 </script>
 
 <style lang="less" scoped>
-  @font-face {
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../../assets/font/douyuFont.otf');
+}
+
+.windDevice {
+  width: 100%;
+  // min-width: ;
+  height: 100%;
+  position: relative;
+
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
     font-family: 'douyuFont';
-    src: url('../../../../../assets/font/douyuFont.otf');
+    cursor: pointer;
+
+    &:hover {
+      color: #66ffff;
+    }
   }
-  .windDevice {
+
+  .device-contents {
+    position: absolute;
+    top: 30px;
+    left: 0;
+    height: calc(100% - 30px);
+    padding: 10px 15px;
+    box-sizing: border-box;
     width: 100%;
-    // min-width: ;
-    height: 100%;
-    position: relative;
-    .title-top {
-      position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
-      &:hover {
-        color: #66ffff;
-      }
-    }
+    overflow-y: auto;
 
-    .device-contents {
-      position: absolute;
-      top: 30px;
-      left: 0;
-      height: calc(100% - 30px);
-      padding: 10px 15px;
-      box-sizing: border-box;
-      width: 100%;
-      overflow-y: auto;
-      .icons-box {
+    .icons-box {
+      // display: flex; lxh
+      // flex-wrap: wrap; lxh
+      // justify-content: space-around; 
+      // justify-content: space-between; lxh
+      height: 100%;
+
+      // overflow-y: hidden;
+      // align-items: start ;
+      // &:hover {
+      //   overflow-y: auto;
+      //   & > .icon-item {
+      //     // animation-play-state: paused; lxh
+      //     // animation: move1 2s linear;lxh
+      //   }
+      // }
+      .icon-item {
+        position: relative;
         display: flex;
-        flex-wrap: wrap;
-        // justify-content: space-around; lxh
-        justify-content: space-between;
-        height: 100%;
-        // overflow-y: hidden;
-        // align-items: start ;
-        // &:hover {
-        //   overflow-y: auto;
-        //   & > .icon-item {
-        //     // animation-play-state: paused; lxh
-        //     // animation: move1 2s linear;lxh
-        //   }
-        // }
-        .icon-item {
-          position: relative;
+        align-items: center;
+        justify-content: center;
+        padding: 3px;
+        // animation: move 10s linear infinite;lxh
+
+        .level-text {
+          width: 220px;
           display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 3px;
-          // animation: move 10s linear infinite;lxh
+          justify-content: space-between;
+          position: absolute;
+          // top: 42px;lxh
+          // right: 25px;lxh
+          // color: #fff;lxh
+          // font-family: 'douyuFont';lxh
+          // font-size: 12px;lxh
+          top: 47px;
+          left: 185px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
 
-          .level-text {
-            position: absolute;
-            top: 42px;
-            right: 25px;
-            color: #fff;
-            font-family: 'douyuFont';
-            font-size: 12px;
+          .all-count,
+          .warn-count,
+          .close-count {
+            // margin: 0px 5px;
+            .num-count {
+              font-family: 'douyuFont';
+              font-size: 12px;
+            }
           }
+        }
 
-          .level-text-0 {
-            color: rgb(145, 230, 9);
-            text-shadow: 2px 2px 4px #001c22;
-          }
+        // .level-text-0 {
+        //   color: rgb(145, 230, 9);
+        //   text-shadow: 2px 2px 4px #001c22;
+        // }
 
-          .level-text-1 {
-            color: rgb(0, 242, 255);
-            text-shadow: 2px 2px 4px #001c22;
-          }
+        // .level-text-1 {
+        //   color: rgb(0, 242, 255);
+        //   text-shadow: 2px 2px 4px #001c22;
+        // }
 
-          .level-text-2 {
-            color: #ffff35;
-            text-shadow: 2px 2px 4px #313100;
-          }
+        // .level-text-2 {
+        //   color: #ffff35;
+        //   text-shadow: 2px 2px 4px #313100;
+        // }
 
-          .level-text-3 {
-            color: #ffbe69;
-            text-shadow: 2px 2px 4px #271600;
-          }
+        // .level-text-3 {
+        //   color: #ffbe69;
+        //   text-shadow: 2px 2px 4px #271600;
+        // }
 
-          .level-text-4 {
-            color: #ff6f00;
-            // color: #09caff;
-            text-shadow: 2px 2px 4px #060200;
-          }
+        // .level-text-4 {
+        //   color: #ff6f00;
+        //   // color: #09caff;
+        //   text-shadow: 2px 2px 4px #060200;
+        // }
 
-          .level-text-5 {
-            width: 35px;
-            color: #ff0000;
-            text-shadow: 2px 2px 4px #200000;
-          }
+        // .level-text-5 {
+        //   width: 35px;
+        //   color: #ff0000;
+        //   text-shadow: 2px 2px 4px #200000;
+        // }
 
-          .level-text-6 {
-            color: #bbb;
-            text-shadow: 2px 2px 4px #001c22;
-          }
+        // .level-text-6 {
+        //   color: #bbb;
+        //   text-shadow: 2px 2px 4px #001c22;
+        // }
 
-          img {
-            width: 208px;
-            height: 69px;
-          }
-        }
-        @keyframes move {
-          0% {
-            transform: translateY(0px);
-          }
-          100% {
-            transform: translateY(-269px);
-          }
+        img {
+          // width: 208px; //lxh
+          // height: 69px;//lxh
+          width: 427px;
+          height: 79px;
         }
+      }
 
-        @keyframes move1 {
-          0% {
-            transform: translateY(0px);
-          }
+      @keyframes move {
+        0% {
+          transform: translateY(0px);
         }
-        .wrapper {
-          position: absolute;
-          top: 40px;
-          left: 82px;
-          color: #ffffffe0;
-          font-size: 13px;
-          text-align: center;
-          letter-spacing: 1px;
+
+        100% {
+          transform: translateY(-269px);
         }
-        .level-warning {
-          font-weight: 600;
-          color: #ff2e2e;
-          text-shadow: 2px 2px 4px #000000;
+      }
+
+      @keyframes move1 {
+        0% {
+          transform: translateY(0px);
         }
       }
+
+      .wrapper {
+        position: absolute;
+        // top: 40px;  lxh
+        // left: 82px;lxh
+        top: 47px;
+        left: 100px;
+        color: #ffffffe0;
+        font-size: 13px;
+        text-align: center;
+        letter-spacing: 1px;
+      }
+
+      .level-warning {
+        font-weight: 600;
+        color: #ff2e2e;
+        text-shadow: 2px 2px 4px #000000;
+      }
     }
   }
-  :deep .zxm-select-selector {
-    width: 100%;
-    height: 30px !important;
-    padding: 0 11px 0px 25px !important;
-    background-color: rgba(8, 148, 255, 0.3) !important;
-    border: 1px solid #1d80da !important;
-  }
-  :deep .zxm-select-selection-item {
-    color: #fff !important;
-    line-height: 28px !important;
-  }
-  :deep .zxm-select-arrow {
-    color: #fff !important;
-  }
+}
+
+:deep .zxm-select-selector {
+  width: 100%;
+  height: 30px !important;
+  padding: 0 11px 0px 25px !important;
+  background-color: rgba(8, 148, 255, 0.3) !important;
+  border: 1px solid #1d80da !important;
+}
+
+:deep .zxm-select-selection-item {
+  color: #fff !important;
+  line-height: 28px !important;
+}
+
+:deep .zxm-select-arrow {
+  color: #fff !important;
+}
 </style>

src/views/vent/monitorManager/alarmMonitor/alarm.data.ts

@@ -120,76 +120,166 @@ export const iconsMonitor = reactive({
     url: getAssetURL('vent/alarm-icons/zhushan.png'),
     level: 100,
     text: '主风机',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   fanlocal: {
     url: getAssetURL('vent/alarm-icons/js.png'),
     level: 100,
     text: '局部风机',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   gate: {
     url: getAssetURL('vent/alarm-icons/fm.png'),
     level: 100,
     text: '风门',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   window: {
     url: getAssetURL('vent/alarm-icons/fc.png'),
     level: 100,
     text: '风窗',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   windrect: {
     url: getAssetURL('vent/alarm-icons/cf.png'),
     level: 100,
     text: '测风装置',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   forcFan: {
     url: getAssetURL('vent/alarm-icons/yafeng.png'),
     level: 100,
     text: '压风装置',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   spray: {
     url: getAssetURL('vent/alarm-icons/penlin.png'),
     level: 100,
     text: '喷淋',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   dustdev: {
     url: getAssetURL('vent/alarm-icons/penfen.png'),
     level: 100,
     text: '喷粉',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   nitrogen: {
     url: getAssetURL('vent/alarm-icons/zhudan.png'),
     level: 100,
     text: '注氮',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   pulping: {
     url: getAssetURL('vent/alarm-icons/zhujiang.png'),
     level: 100,
     text: '注浆',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   atomizing: {
     url: getAssetURL('vent/alarm-icons/pw.png'),
     level: 100,
     text: '跟机喷雾',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   dustsensor: {
     url: getAssetURL('vent/alarm-icons/ccq.png'),
     level: 100,
     text: '除尘器',
-  },
-  pump: {
-    url: getAssetURL('vent/alarm-icons/wasibeng.png'),
-    level: 100,
-    text: '瓦斯泵',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   gas: {
     url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
     level: 100,
     text: '瓦斯抽采管路',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
+  },
+  pump: {
+    url: getAssetURL('vent/alarm-icons/wasibeng.png'),
+    level: 100,
+    text: '瓦斯泵',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
   modelsensor: {
     url: getAssetURL('vent/alarm-icons/cf.png'),
     level: 100,
     text: '传感器',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
   },
 });
 

src/views/vent/monitorManager/alarmMonitor/index.vue

@@ -67,7 +67,7 @@
                 </div>
                 <div></div>
                 <img :src="item.url" :alt="item.text" />
-                <div class="level-text" :class="{
+                <!-- <div class="level-text" :class="{
                   'level-text-0': item.level == 0,
                   'level-text-1': item.level == 101,
                   'level-text-2': item.level == 102,
@@ -90,7 +90,21 @@
                             : item.level == 201
                               ? '报警'
                               : '未连接'
-                }}</div>
+                }}</div> -->
+                <div class="level-text">
+                  <div class="all-count">
+                    <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
+                    <span class="num-count">{{ item.allCount || '-' }}</span>
+                  </div>
+                  <div class="warn-count">
+                    <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
+                    <span class="num-count">{{ item.warnCount || '-' }}</span>
+                  </div>
+                  <div class="close-count">
+                    <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
+                    <span class="num-count">{{ item.closeCount || '-' }}</span>
+                  </div>
+                </div>
               </div>
             </template>
           </div>
@@ -228,7 +242,7 @@
                     value1: item.warnLevel == '绿色预警',
                     value2: item.warnLevel == '黄色预警',
                     value3: item.warnLevel == '红色预警',
-                  }">{{item.warnLevel || '-'}}
+                  }">{{ item.warnLevel || '-' }}
                   </div>
                   <div class="title">预警等级</div>
                 </div>
@@ -237,7 +251,7 @@
                     value1: item.warnLevel == '绿色预警',
                     value2: item.warnLevel == '黄色预警',
                     value3: item.warnLevel == '红色预警',
-                  }">{{item.smokeJd || '-'}}
+                  }">{{ item.smokeJd || '-' }}
                   </div>
                   <div class="title">煤自燃阶段</div>
                 </div>
@@ -430,6 +444,9 @@ async function getList() {
   Object.keys(iconsMonitor).forEach((el) => {
     if (res.info.devicekindInfo[el]) {
       iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
+      iconsMonitor[el].allCount = res.info.devicekindInfo[el].totalcount
+      iconsMonitor[el].warnCount = res.info.devicekindInfo[el].count
+      iconsMonitor[el].closeCount = res.info.devicekindInfo[el].netStatus
     }
   });
   fireMonitor[0].value =
@@ -640,8 +657,8 @@ onUnmounted(() => {
     }
 
     .icons-box {
-      display: flex;
-      flex-wrap: wrap;
+      // display: flex;  lxh
+      // flex-wrap: wrap; lxh
       // max-height: 365px;
       height: 365px;
       overflow-y: hidden;
@@ -670,52 +687,72 @@ onUnmounted(() => {
         }
 
         .level-text {
+          width: 245px;
+          display: flex;
+          justify-content: space-between;
           position: absolute;
-          top: 51px;
-          right: 25px;
-          color: #fff;
-          font-family: 'douyuFont';
-          font-size: 12px;
+          // top: 51px; lxh
+          // left: 25px; lxh
+          // color: #fff; lxh
+          // font-family: 'douyuFont'; lxh
+          // font-size: 12px; lxh
+          top: 48px;
+          left: 180px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
+
+          .all-count,
+          .warn-count,
+          .close-count {
+            // margin: 0px 5px;
+            .num-count {
+              font-family: 'douyuFont';
+              font-size: 12px;
+            }
+          }
         }
 
-        .level-text-0 {
-          color: rgb(145, 230, 9);
-          text-shadow: 2px 2px 4px #001c22;
-        }
+        // .level-text-0 {
+        //   color: rgb(145, 230, 9);
+        //   text-shadow: 2px 2px 4px #001c22;
+        // }
 
-        .level-text-1 {
-          color: rgb(0, 242, 255);
-          text-shadow: 2px 2px 4px #001c22;
-        }
+        // .level-text-1 {
+        //   color: rgb(0, 242, 255);
+        //   text-shadow: 2px 2px 4px #001c22;
+        // }
 
-        .level-text-2 {
-          color: #ffff35;
-          text-shadow: 2px 2px 4px #313100;
-        }
+        // .level-text-2 {
+        //   color: #ffff35;
+        //   text-shadow: 2px 2px 4px #313100;
+        // }
 
-        .level-text-3 {
-          color: #ffbe69;
-          text-shadow: 2px 2px 4px #271600;
-        }
+        // .level-text-3 {
+        //   color: #ffbe69;
+        //   text-shadow: 2px 2px 4px #271600;
+        // }
 
-        .level-text-4 {
-          color: #ff6f00;
-          // color: #09caff;
-          text-shadow: 2px 2px 4px #060200;
-        }
+        // .level-text-4 {
+        //   color: #ff6f00;
+        //   // color: #09caff;
+        //   text-shadow: 2px 2px 4px #060200;
+        // }
 
-        .level-text-5 {
-          color: #ff0000;
-          text-shadow: 2px 2px 4px #200000;
-        }
+        // .level-text-5 {
+        //   color: #ff0000;
+        //   text-shadow: 2px 2px 4px #200000;
+        // }
 
-        .level-text-6 {
-          color: #bbb;
-          text-shadow: 2px 2px 4px #001c22;
-        }
+        // .level-text-6 {
+        //   color: #bbb;
+        //   text-shadow: 2px 2px 4px #001c22;
+        // }
 
         img {
-          width: 225px;
+          // width: 225px;  lxh
+          width: 427px;
           height: 79px;
         }
       }
@@ -723,7 +760,8 @@ onUnmounted(() => {
       .wrapper {
         position: absolute;
         top: 48px;
-        left: 82px;
+        // left: 82px; lxh
+        left: 112px;
         color: #ffffffe0;
         font-size: 13px;
         text-align: center;
@@ -979,6 +1017,7 @@ onUnmounted(() => {
                   font-size: 13px;
                 }
               }
+
               .box-item1 {
                 width: 50%;
                 height: 100%;

src/views/vent/monitorManager/nitrogen/components/nitrogenHome2.vue

@@ -0,0 +1,715 @@
+<template>
+    <div class="monitor-container">
+        <template v-for="(sysItem, sysIndex) in deviceProperty.monitorDataGroupArr" :key="sysIndex">
+            <div :id="`compressorCss3D${sysIndex + 1}`" class="threejs-Object-CSS compressorCss3D-box"
+                style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0px; left: 0px">
+            </div>
+        </template>
+        <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+        <div v-for="(sysItem, sysIndex) in deviceProperty.monitorDataGroupArr" :key="sysIndex"
+            style="position: absolute; z-index: -1">
+            <div v-show="monitorDataGroupFlag == sysIndex + 1" :id="`nitrogenMonitorBox${sysIndex}`">
+                <div v-for="(groupNum, index) in sysItem" :key="index" class="modal-monitor">
+                    <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
+                        <div class="title">{{ deviceProperty.modelMonitor[0].title + (index + 1) }} </div>
+                        <template v-for="(preMonitor, preMonitorIndex) in deviceProperty.modelMonitor[0].list"
+                            :key="preMonitorIndex">
+                            <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
+                                <span class="monitor-title">{{ preMonitor.title }}:</span>
+                                <span class="monitor-val"><span class="val">{{
+                                    selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`]
+                                        ?
+                                        formatNum(selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`])
+                                        : '-'
+                                        }}</span><span class="unit">{{ preMonitor.unit }}</span></span>
+                            </div>
+                            <div v-else class="signal-item">
+                                <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
+                                    <span class="monitor-title">{{ signal.title }}</span>
+                                    <span :class="{
+                                        'signal-round': true,
+                                        'signal-round-run':
+                                            signal.title != '故障信号' && selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] == '1',
+                                        'signal-round-warning':
+                                            signal.title == '故障信号' && selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] == '1',
+                                        'signal-round-gry': selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] != '1',
+                                    }"></span>
+                                </div>
+                            </div>
+                        </template>
+                    </fourBorderBg>
+                    <fourBorderBg v-if="getShowModelMonitor(deviceProperty.modelMonitor[1], groupNum)"
+                        :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
+                        <div class="title">{{ deviceProperty.modelMonitor[1].title + (index + 1) }}</div>
+                        <template v-for="(cqgMonitor, cqgMonitorIndex) in deviceProperty.modelMonitor[1].list"
+                            :key="cqgMonitorIndex">
+                            <div class="monitor-item">
+                                <span class="monitor-title">{{ cqgMonitor.title }}:</span>
+                                <span class="monitor-val"><span class="val">{{
+                                    selectData[`${deviceProperty.modelMonitor[1].key}${groupNum}${cqgMonitor.code}`]
+                                        ?
+                                        formatNum(selectData[`${deviceProperty.modelMonitor[1].key}${groupNum}${cqgMonitor.code}`])
+                                        : '-'
+                                        }}</span><span class="unit">{{ cqgMonitor.unit }}</span></span>
+                            </div>
+                        </template>
+                    </fourBorderBg>
+                </div>
+            </div>
+        </div>
+
+
+        <div class="total-data">
+            <div class="vent-flex-row">
+                <div class="item" v-for="(data, index) in deviceProperty.totalData" :key="index">{{ data.title + '(' +
+                    data.unit
+                    + ')' }}：<span class="val">{{
+                        selectData[data.code] ? formatNum(selectData[data.code]) : '-'
+                        }}</span></div>
+            </div>
+        </div>
+        <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
+        <div class="nitrogen-home">
+            <div class="lr left-box">
+                <div class="left-container">
+                    <div class="monitor-box">
+                        <template v-for="(device, leftIndex) in deviceProperty.leftMonitor" :key="leftIndex">
+                            <ventBox1 :class="{ 'vent-margin-t-10': leftIndex > 0 }">
+                                <template #title>
+                                    <div>{{ device.title }}</div>
+                                </template>
+                                <template #container>
+                                    <template v-for="(deviceChild, deviceChildIndex) in device.children"
+                                        :key="deviceChildIndex">
+                                        <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
+                                            <div v-if="deviceChild.key.length > 1"
+                                                class="parameter-title group-parameter-title">
+                                                <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{
+                                                    deviceChild.childTitle[deviceIndex] }}</span>
+                                            </div>
+                                            <div class="input-box">
+                                                <div v-for="(item, index) in deviceChild.list" class="input-item"
+                                                    :key="index">
+                                                    <div :class="{
+                                                        'w-280px': item.type == 'sign' || item.type == 'warning',
+                                                        title: item.type !== 'sign' && item.type !== 'warning',
+                                                    }">{{ item.title }}：</div>
+                                                    <template v-if="item.type !== 'sign' && item.type !== 'warning'">
+                                                        <div class="value">{{
+                                                            selectData && selectData[deviceKey + item.code] ?
+                                                            formatNum(selectData[deviceKey + item.code], 1) : '-'
+                                                            }}</div>
+                                                    </template>
+                                                    <template v-else>
+                                                        <div class="value">
+                                                            <span :class="{
+                                                                'signal-round': true,
+                                                                'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
+                                                                'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
+                                                                'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
+                                                            }"></span>
+                                                        </div>
+                                                    </template>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </template>
+                            </ventBox1>
+                        </template>
+                    </div>
+                </div>
+            </div>
+            <div class="lr right-box">
+                <div class="item-box" :class="{ 'mt-50px': deviceProperty.totalData.length > 0 }">
+                    <ventBox1 v-for="(device, rightIndex) in deviceProperty.rightMonitor" :key="rightIndex"
+                        class="vent-margin-t-10">
+                        <template #title>
+                            <div>{{ device.title }}</div>
+                        </template>
+                        <template #container>
+                            <div>
+                                <template v-for="(deviceChild, deviceChildIndex) in device.children"
+                                    :key="deviceChildIndex">
+                                    <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
+                                        <div v-if="deviceChild.key.length > 1"
+                                            class="parameter-title group-parameter-title">
+                                            <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{
+                                                deviceChild.childTitle[deviceIndex] }}</span>
+                                        </div>
+                                        <div class="input-box">
+                                            <div v-for="(item, index) in deviceChild.list" class="input-item"
+                                                :key="index">
+                                                <div :class="{
+                                                    'w-280px': item.type == 'sign' || item.type == 'warning',
+                                                    title: item.type !== 'sign' && item.type !== 'warning',
+                                                }">{{ item.title }}：</div>
+                                                <template v-if="item.type !== 'sign' && item.type !== 'warning'">
+                                                    <div class="value">{{
+                                                        selectData && selectData[deviceKey + item.code] ?
+                                                        formatNum(selectData[deviceKey + item.code], 1) : '-'
+                                                        }}</div>
+                                                </template>
+                                                <template v-else>
+                                                    <div class="value">
+                                                        <span :class="{
+                                                            'signal-round': true,
+                                                            'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
+                                                            'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
+                                                            'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
+                                                        }"></span>
+                                                    </div>
+                                                </template>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </template>
+                    </ventBox1>
+                </div>
+            </div>
+        </div>
+        <div ref="playerRef" class="player-box" :class="{ 'sw-player': sysOrgCode == 'sdmtjtswmk' }"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, defineProps, inject, onBeforeUnmount } from 'vue';
+import { devicePropertyType, propertyListType, getMonitorData } from '../nitrogen.data.1';
+import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
+import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
+import { list } from '../nitrogen.api';
+import ventBox1 from '/@/components/vent/ventBox1.vue';
+import { formatNum } from '/@/utils/ventutil';
+import { useCamera } from '/@/hooks/system/useCamera';
+import { useGlobSetting } from '/@/hooks/setting';
+
+const props = defineProps({
+    deviceId: {
+        type: String,
+        require: true,
+    },
+    deviceType: {
+        type: String,
+        require: true,
+    },
+});
+const { sysOrgCode } = useGlobSetting();
+// const sysOrgCode = 'sdmtjtswmk';
+const loading = ref(false);
+const monitorDataGroup = ref<Number[]>([]);
+const monitorDataGroupFlag = ref(1);
+const playerRef = ref();
+const deviceProperty = ref({
+    leftMonitor: [] as devicePropertyType[],
+    rightMonitor: [] as devicePropertyType[],
+    modelMonitor: [] as devicePropertyType[],
+    detailCtrl: [] as devicePropertyType[],
+    monitorDataGroupArr: [],
+    totalData: [] as propertyListType[],
+});
+deviceProperty.value = await getMonitorData(props.deviceType);
+
+// 监测数据
+// const selectData = reactive({});
+const selectData = ref<Object | []>({});
+const { getCamera, removeCamera } = useCamera();
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+        return new Promise(async (resolve) => {
+            timer = await setTimeout(
+                async () => {
+                    await getDataSource();
+                    if (timer) {
+                        timer = null;
+                    }
+                    resolve(null);
+                    await getMonitor(false);
+                },
+                flag ? 0 : 1000
+            );
+        });
+    }
+}
+
+async function getDataSource() {
+    const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
+    let dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : [];
+    // dataSource = {
+    //   msgType: null,
+    //   deviceID: '1781605808973565954',
+    //   strname: '压风机',
+    //   strinstallpos: '压风机',
+    //   fsectarea: 'null',
+    //   stationname: '压风机',
+    //   stationtype: 'redis',
+    //   deviceType: 'forcFan_normal',
+    //   typeName: '压风机',
+    //   netStatus: 1,
+    //   warnFlag: 0,
+    //   warnLevel: 0,
+    //   warnLevel_str: '正常',
+    //   warnTime: null,
+    //   readTime: '2024-04-23 08:23:49',
+    //   warnDes: '',
+    //   frontGateOpenCtrl: null,
+    //   rearGateOpenCtrl: null,
+    //   readData: {
+    //     PRE3_CPR_CoolantTemp: '62.0',
+    //     PRE1_MOT_PhaseATemp: '59.0',
+    //     PRE3_MOT_PhaseCTemp: '56.02',
+    //     PRE2_CPR_HeadTemp: '81.0',
+    //     sign: '0',
+    //     PRE1_CPR_UnLoadPre: '6.0',
+    //     PRE3_CPR_ExhaustPre: '5.7',
+    //     PRE1_CPR_LoadorUnload: '0',
+    //     PRE2_MOT_PhaseATempAlarm: '0',
+    //     PRE2_CPR_ExhaustTemp: '18.01',
+    //     PRE1_MOT_StopFail: '0',
+    //     PRE3_MOT_StopFail: '0',
+    //     PRE1_HMIReset: '0',
+    //     PRE2_HMIStop: '0',
+    //     PRE1_MOT_Ready: '1',
+    //     PRE2_CPR_LoadorUnload: '0',
+    //     PRE3_MOT_PhaseBTemp: '66.0',
+    //     Reset: '0',
+    //     PRE1_CPR_ExhaustPre: '5.3',
+    //     PRE3_FaultSignal: '0',
+    //     PRE1_MOT_PhaseATempAlarm: '0',
+    //     PRE2_MOT_PhaseBTempAlarm: '0',
+    //     PRE3_MOT_PhaseCTempAlarm: '0',
+    //     PRE2_HMIStart: '0',
+    //     PRE1_MOT_StartFail: '0',
+    //     PRE3_MOT_PhaseATemp: '66.0',
+    //     PRE2_CPR_CoolantTemp: '53.0',
+    //     PRE3_HostorLoc: '0',
+    //     PRE1_FaultSignal: '0',
+    //     PRE2_FaultSignal: '0',
+    //     PRE3_MOT_RunReturn: '1',
+    //     PRE1_HMIStart: '0',
+    //     PRE1_MOT_TotalRunTime: '6313.0',
+    //     'PRE1_MOT_Pha seBTempAlarm': '0',
+    //     PRE1_CPR_LoadTime: '5184.0',
+    //     PRE2_MOT_PhaseCTempAlarm: '0',
+    //     PRE2_CPR_LoadTime: '3328.0',
+    //     PRE1_CPR_HeadTemp: '73.0',
+    //     PRE3_CPR_LoadTime: '5920.0',
+    //     PRE2_MOT_StartFail: '0',
+    //     PRE2_MOT_PhaseBTemp: '61.0',
+    //     PRE2_HostorLoc: '0',
+    //     PRE3_HMIStop: '0',
+    //     PRE3_CPR_HeadTemp: '84.0',
+    //     PRE2_MOT_TotalRunTime: '4272.0',
+    //     PRE3_HMIReset: '0',
+    //     PRE2_MOT_Ready: '1',
+    //     PRE2_MOT_RunReturn: '1',
+    //     PRE3_MOT_PhaseBTempAlarm: '0',
+    //     PRE2_MOT_StopFail: '0',
+    //     PRE3_CPR_UnLoadPre: '6.0',
+    //     PRE2_CPR_ExhaustPre: '5.7',
+    //     PRE3_CPR_ExhaustTemp: '18.09',
+    //     PRE3_MOT_StartFail: '0',
+    //     PRE3_MOT_TotalRunTime: '8474.0',
+    //     PRE2_MOT_PhaseATemp: '60.0',
+    //     PRE1_MOT_PhaseCTempAlarm: '0',
+    //     PRE3_HMIStart: '0',
+    //     PRE1_HMIStop: '0',
+    //     PRE3_MOT_Ready: '0',
+    //     PRE1_HostorLoc: '0',
+    //     PRE1_CPR_LoadPre: '5.0',
+    //     PRE1_MOT_RunReturn: '0',
+    //     PRE2_MOT_CtrlMode: '0',
+    //     PRE2_HMIReset: '0',
+    //     PRE1_MOT_CtrlMode: '0',
+    //     PRE3_CPR_LoadPre: '5.0',
+    //     PRE2_CPR_LoadPre: '5.0',
+    //     PRE3_MOT_CtrlMode: '0',
+    //     PRE1_MOT_PhaseCTemp: '58.0',
+    //     PRE3_CPR_LoadorUnload: '1',
+    //     TotalOutPipePre: '5.85',
+    //     PRE1_MOT_PhaseBTemp: '60.0',
+    //     PRE2_MOT_PhaseCTemp: '55.02',
+    //     PRE1_CPR_CoolantTemp: '55.0',
+    //     PRE3_MOT_PhaseATempAlarm: '0',
+    //     PRE2_CPR_UnLoadPre: '6.0',
+    //     isRun: '-2',
+    //     PRE1_CPR_ExhaustTemp: '16.12',
+    //     TotalOutPipeFlow: '884.0',
+    //   },
+    //   readDataDes: null,
+    //   summaryHour: [],
+    //   summaryDay: [],
+    //   history: [],
+    //   dayhistory: [],
+    //   totalInfo: null,
+    //   sign: null,
+    //   cameras: [],
+    //   links: [],
+    //   other1: null,
+    //   other2: null,
+    //   other3: null,
+    //   remarkInfo: null,
+    //   linkInfo: null,
+    // };
+    if (dataSource) {
+        Object.assign(selectData.value, dataSource, dataSource.readData);
+    }
+    loading.value = false;
+}
+
+function setMonitorGroupNum(flag) {
+    if (flag != monitorDataGroupFlag.value) monitorDataGroupFlag.value = flag;
+    const monitorGroup = deviceProperty.value.monitorDataGroupArr[flag - 1];
+    setModelType('compressor' + (flag - 1));
+    monitorDataGroup.value = monitorGroup;
+}
+
+function handleOK() { }
+
+function handleCancel() { }
+
+// 判断是否应该在某套件（组别）下展示监测数据详情
+function getShowModelMonitor(config: devicePropertyType, groupNum: number) {
+    if (config.hideInGroup) {
+        return !config.hideInGroup.includes(groupNum);
+    }
+    return !!config.list.length;
+}
+
+onMounted(async () => {
+    setTimeout(() => {
+        mountedThree(deviceProperty.value.monitorDataGroupArr).then(async () => {
+            setMonitorGroupNum(1);
+            getMonitor(true).then(async () => {
+                if (selectData.value && selectData.value['deviceID']) await getCamera(selectData.value['deviceID'], playerRef.value);
+            });
+        });
+    }, 0);
+});
+onBeforeUnmount(() => {
+    removeCamera();
+});
+onUnmounted(() => {
+    destroy();
+    removeCamera();
+    if (timer) {
+        clearTimeout(timer);
+        timer = undefined;
+    }
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/vent/modal.less';
+@import '../../comment/less/workFace.less';
+@ventSpace: zxm;
+
+.monitor-container {
+    position: fixed;
+    width: 100%;
+}
+
+.compressorCss3D-box {
+    pointer-events: auto;
+
+    .modal-monitor {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+
+    &:deep(.win) {
+        margin: 0 !important;
+        background: #00000044;
+    }
+
+    &: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 {
+            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;
+                }
+            }
+        }
+
+        .monitor-title {
+            width: 100px;
+            color: #7af5ff;
+            font-weight: 400;
+            font-size: 14px;
+        }
+
+        .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%;
+                }
+            }
+
+            .signal-round-gry {
+                background-color: #858585;
+
+                &::after {
+                    background-color: #85858544;
+                    box-shadow: 0 0 1px 1px #85858599;
+                }
+            }
+
+            .signal-round-run {
+                background-color: #67fc00;
+
+                &::after {
+                    background-color: #67fc0044;
+                    box-shadow: 0 0 1px 1px #c6ff77;
+                }
+            }
+
+            .signal-round-warning {
+                background-color: #e9170b;
+
+                &::after {
+                    background-color: #e9170b44;
+                    box-shadow: 0 0 1px 1px #e9170b;
+                }
+            }
+        }
+    }
+}
+
+.total-data {
+    position: absolute;
+    top: 40px;
+    right: 100px;
+    z-index: 999;
+    color: #e4cd00;
+
+    .item {
+        width: 200px;
+        margin-left: 30px;
+
+        .val {
+            color: #00d8ff;
+        }
+    }
+}
+
+.nitrogen-home {
+    width: 100%;
+    height: calc(100%);
+    position: fixed;
+    z-index: 0;
+    height: calc(100%);
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    top: 20px;
+    pointer-events: none;
+
+    .lr {
+        margin-top: 0 !important;
+    }
+
+    .left-box {
+        width: 360px !important;
+        direction: rtl;
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: calc(100% - 60px);
+        margin-top: 30px !important;
+
+        .left-container {
+            direction: ltr;
+
+            :deep(.input-item .title) {
+                width: 220px !important;
+            }
+        }
+    }
+
+    .right-box {
+        width: 360px !important;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        .environment-monitor {
+            .item {
+                flex: 1;
+                margin: 0 5px;
+
+                .title {
+                    color: #7ae5ff;
+                    text-align: center;
+                    margin-bottom: 2px;
+                }
+
+                .num {
+                    width: 100%;
+                    height: 30px;
+                    text-align: center;
+                    border-top: 2px solid #50c8fc;
+                    border-radius: 4px;
+                    background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
+                }
+            }
+        }
+
+        .pool-box {
+            width: 327px;
+            height: 65px;
+            padding: 0 5px;
+            background: url('/@/assets/images/vent/pump1.png') no-repeat;
+            background-size: cover;
+            background-origin: content-box;
+            margin-top: 2px;
+
+            .num {
+                color: aqua;
+            }
+
+            .center {
+                padding-right: 5px;
+            }
+        }
+    }
+}
+
+.device-state {
+    width: 100%;
+    position: absolute;
+    top: 30px;
+    color: #e90000;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+}
+
+.player-box {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    padding: 0 20px 0 20px;
+    z-index: 9999;
+    display: flex;
+    align-items: end;
+    bottom: 80px;
+    pointer-events: none;
+
+    :deep(#LivePlayerBox) {
+        display: flex;
+        justify-content: end;
+    }
+}
+
+//**上湾视频样式 */
+.sw-player {
+    right: 350px;
+    bottom: 130px;
+    display: flex;
+    flex-direction: row;
+}
+
+.input-box {
+    width: calc(100%);
+    display: flex;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+
+    .input-item {
+        width: calc(50% - 8px);
+        padding: 0 2px;
+
+        &:nth-child(2n) {
+            margin-left: 4px;
+        }
+    }
+}
+
+.btn-group {
+    width: 100%;
+    position: fixed;
+    display: flex;
+    justify-content: end;
+    right: 380px;
+    top: 85px;
+    pointer-events: auto;
+
+    .btn-item {
+        width: auto;
+        text-align: center;
+    }
+}
+
+.state-header {
+    display: flex;
+    color: #73e8fe;
+
+    .header-item {
+        width: 25%;
+        text-align: center;
+    }
+}
+
+.device-row {
+    display: flex;
+    margin-top: 10px;
+
+    .state {
+        width: 25%;
+        text-align: center;
+        font-size: 13px;
+    }
+}
+
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+}
+</style>

src/views/vent/monitorManager/nitrogen/nitrogen.data.1.ts

@@ -16,7 +16,8 @@ export function getNitrogenHome() {
       nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome1.vue'));
       return nitrogenHome;
     default:
-      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome.vue'));
+      // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome.vue'));
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome2.vue'));
       return nitrogenHome;
   }
 }
@@ -90,6 +91,8 @@ export async function getMonitorData() {
       return await import('./nitrogen.data.wlml');
     case 'yjmdjhmk': // 窑街金河矿
       return await import('./nitrogen.data.jh');
+    case 'hty'://核桃峪
+    return await import('./nitrogen.data.hty');
     default: //默认
       return await import('./nitrogen.dataCc_2');
     // return await import('./nitrogen.data.yjl');

src/views/vent/monitorManager/nitrogen/nitrogen.data.hty.ts

@@ -0,0 +1,1027 @@
+export const monitorDataGroupArr = [[1, 2, 3, 4, 5, 6]];
+export const modelMonitor = [
+    {
+        type: 'list',
+        title: '空压机',
+        stateHeader: [],
+        key: 'PRE',
+        list: [
+            {
+                title: '累计运行时间_天',
+                code: '_TotalRunTime_Day',
+                unit: 'day',
+                child: [],
+            },
+            {
+                title: '累计运行时间_时',
+                code: '_TotalRunTime_Hour',
+                unit: 'h',
+                child: [],
+            },
+            {
+                title: '累计运行时间_分',
+                code: '_TotalRunTime_Min',
+                unit: 'minutes',
+                child: [],
+            },
+            {
+                title: '电压',
+                code: '_Voltage',
+                unit: 'V',
+                child: [],
+            },
+            {
+                title: '电流',
+                code: '_Current',
+                unit: 'A',
+                child: [],
+            },
+         
+            {
+                title: '主机温度',
+                code: '_MainUnitTemp',
+                unit: '℃',
+                child: [],
+            },
+            {
+                title: '回水温度',
+                code: '_ReturnWaterTemp',
+                unit: '℃',
+                child: [],
+            },
+            {
+                title: '排气压力',
+                code: '_ExhaustPressure',
+                unit: 'MPa',
+                child: [],
+            },
+            {
+                title: '故障次数',
+                code: '_FaultCount',
+                unit: '',
+                child: [],
+            },
+            {
+                title: '启动次数',
+                code: '_StartCount',
+                unit: '',
+                child: [],
+            },
+            {
+                title: '油分油位',
+                code: '_OilSeparatorLevel',
+                unit: '',
+                child: [],
+            },
+
+            {
+                code: 'signal',
+                child: [
+                    {
+                        title: `运行反馈`,
+                        code: `_Blower1_RunFeedback`,
+                        isWaring: false,
+                    },
+                    {
+                        title: `故障反馈`,
+                        code: `_Blower1_FaultFeedback`,
+                        isWaring: false,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        type: 'list',
+        title: '储气罐',
+        key: 'PRE',
+        stateHeader: [],
+        hideInGroup: [],
+        list: [
+            {
+                title: '储气温度',
+                code: '_StorageTemp',
+                unit: '℃',
+            },
+            {
+                title: '风包压力',
+                code: '_PackagePressure',
+                unit: 'MPa',
+            },
+        ],
+    },
+];
+export const totalData = [
+    {
+        title: '总管路瞬时流量',
+        code: 'MainInstantFlow',
+        unit: 'bar',
+    },
+    {
+        title: '总管路累计流量',
+        code: 'MainTotalFlow',
+        unit: 'bar',
+    },
+];
+export const leftMonitor = [
+    {
+        type: 'list',
+        title: '压风机1',
+        stateHeader: [],
+        children: [
+            {
+                title: '',
+                childTitle: ['1#压风机'],
+                key: ['PRE1'],
+                list: [
+                    {
+                        title: `风包温度高报警`,
+                        code: `_Blower1_TempHighAlarm`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包温度低报警`,
+                        code: `_Blower1_TempLowAlarm`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力高报警`,
+                        code: `_Blower1_PressureHighAlarm`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力低报警`,
+                        code: `_Blower_LowPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `电机前轴振动高报警`,
+                        code: `_Motor_FrontVibHigh`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动低报警',
+                        code: '_Motor_FrontVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动高报警',
+                        code: '_Motor_RearVibHigh',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动低报警',
+                        code: '_Motor_RearVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '启动超时报警',
+                        code: '_Blower_StartTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '停止超时报警',
+                        code: '_Blower_StopTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '压力传感器保护投退',
+                        code: '_PressureSensor_Protect',
+                        type: 'warning',
+                    },
+                    {
+                        title: '温度传感器保护投退',
+                        code: '_TemperatureSensor_Protect',
+                        type: 'warning',
+                    },
+                    {
+                        title: '前轴振动传感器保护投退',
+                        code: '_FrontVibrationSensor_Protect',
+                        type: 'warning',
+                    },
+                    {
+                        title: '后轴振动传感器保护投退',
+                        code: '_RearVibrationSensor_Protect',
+                        type: 'warning',
+                    },
+                    {
+                        title: '流量传感器保护投退',
+                        code: '_FlowSensor_Protect',
+                        type: 'warning',
+                    },
+
+                    {
+                        title: '启动',
+                        code: '_AirCompressor_Start',
+                        type: 'warning',
+                    },
+                    {
+                        title: '停止',
+                        code: '_AirCompressor_Stop',
+                        type: 'warning',
+                    },
+                    {
+                        title: '复位',
+                        code: '_AirCompressor_Reset',
+                        type: 'warning',
+                    },
+                    {
+                        title: '加载',
+                        code: '_AirCompressor_Load',
+                        type: 'warning',
+                    },
+                    {
+                        title: `电机前轴振动`,
+                        code: `_FrontVibration`,
+                        type: '',
+                    },
+                    {
+                        title: '电机前轴温度',
+                        code: '_FrontTemp',
+                        type: '',
+                    },
+                    {
+                        title: '回水管流量',
+                        code: '_ReturnFlow',
+                        type: '',
+                    },
+                    {
+                        title: '电压高报警值',
+                        code: '_HighVoltageAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '电流高报警值',
+                        code: '_HighCurrentAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '排气温度高报警值',
+                        code: '_ExhaustTempHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '振动值高报警值',
+                        code: '_VibrationHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '流量高报警值',
+                        code: '_FlowHighAlarmSetting',
+                        type: '',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        type: 'list',
+        title: '压风机2',
+        stateHeader: [],
+        children: [
+            {
+                title: '',
+                childTitle: ['2#压风机'],
+                key: ['PRE2'],
+                list: [
+                    {
+                        title: `风包温度高报警`,
+                        code: `_Blower_HighTemp`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包温度低报警`,
+                        code: `_Blower_LowTemp`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力高报警`,
+                        code: `_Blower_HighPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力低报警`,
+                        code: `_Blower_LowPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `电机前轴振动高报警`,
+                        code: `_Motor_FrontVibHigh`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动低报警',
+                        code: '_Motor_FrontVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动高报警',
+                        code: '_Motor_RearVibHigh',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动低报警',
+                        code: '_Motor_RearVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '启动超时报警',
+                        code: '_Blower_StartTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '停止超时报警',
+                        code: '_Blower_StopTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '压力传感器保护投退',
+                        code: '_PressureSensor_Protect',
+                        type: 'warning',
+                    },
+                    {
+                        title: `温度传感器保护投退`,
+                        code: `_TemperatureSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `前轴振动传感器保护投退`,
+                        code: `_FrontVibrationSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `后轴振动传感器保护投退`,
+                        code: `_RearVibrationSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `流量传感器保护投退`,
+                        code: `_FlowSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `启动`,
+                        code: `_AirCompressor_Start`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `停止`,
+                        code: `_AirCompressor_Stop`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `复位`,
+                        code: `_AirCompressor_Reset`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `加载`,
+                        code: `_AirCompressor_Load`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动',
+                        code: '_FrontVibration',
+                        type: '',
+                    },
+                    {
+                        title: '电机前轴温度',
+                        code: '_FrontTemp',
+                        type: '',
+                    },
+                    {
+                        title: '回水管流量',
+                        code: '_ReturnFlow',
+                        type: '',
+                    },
+                    {
+                        title: '电压高报警值',
+                        code: '_HighVoltageAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '电流高报警值',
+                        code: '_HighCurrentAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '排气温度高报警值',
+                        code: '_ExhaustTempHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '振动值高报警值',
+                        code: '_VibrationHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '流量高报警值',
+                        code: '_FlowHighAlarmSetting',
+                        type: '',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        type: 'list',
+        title: '压风机3',
+        stateHeader: [],
+        children: [
+            {
+                title: '',
+                childTitle: ['3#压风机'],
+                key: ['PRE3'],
+                list: [
+                    {
+                        title: `风包温度高报警`,
+                        code: `_Blower_HighTemp`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包温度低报警`,
+                        code: `_Blower_LowTemp`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力高报警`,
+                        code: `_Blower_HighPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力低报警`,
+                        code: `_Blower_LowPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `电机前轴振动高报警`,
+                        code: `_Motor_FrontVibHigh`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动低报警',
+                        code: '_Motor_FrontVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动高报警',
+                        code: '_Motor_RearVibHigh',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动低报警',
+                        code: '_Motor_RearVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '启动超时报警',
+                        code: '_Blower_StartTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '停止超时报警',
+                        code: '_Blower_StopTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '压力传感器保护投退',
+                        code: '_PressureSensor_Protect',
+                        type: 'warning',
+                    },
+                    {
+                        title: `温度传感器保护投退`,
+                        code: `_TemperatureSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `前轴振动传感器保护投退`,
+                        code: `_FrontVibrationSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `后轴振动传感器保护投退`,
+                        code: `_RearVibrationSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `流量传感器保护投退`,
+                        code: `_FlowSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `启动`,
+                        code: `_AirCompressor_Start`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `停止`,
+                        code: `_AirCompressor_Stop`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `复位`,
+                        code: `_AirCompressor_Reset`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `加载`,
+                        code: `_AirCompressor_Load`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动',
+                        code: '_FrontVibration',
+                        type: '',
+                    },
+                    {
+                        title: '电机前轴温度',
+                        code: '_FrontTemp',
+                        type: '',
+                    },
+                    {
+                        title: '回水管流量',
+                        code: '_ReturnFlow',
+                        type: '',
+                    },
+                    {
+                        title: '电压高报警值',
+                        code: '_HighVoltageAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '电流高报警值',
+                        code: '_HighCurrentAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '排气温度高报警值',
+                        code: '_ExhaustTempHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '振动值高报警值',
+                        code: '_VibrationHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '流量高报警值',
+                        code: '_FlowHighAlarmSetting',
+                        type: '',
+                    },
+                ],
+            },
+        ],
+    },
+];
+
+export const rightMonitor = [
+    {
+        type: 'list',
+        title: '压风机4',
+        stateHeader: [],
+        children: [
+            {
+                title: '',
+                childTitle: ['4#压风机'],
+                key: ['PRE4'],
+                list: [
+                    {
+                        title: `风包温度高报警`,
+                        code: `_Blower_HighTemp`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包温度低报警`,
+                        code: `_Blower_LowTemp`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力高报警`,
+                        code: `_Blower_HighPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力低报警`,
+                        code: `_Blower_LowPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `电机前轴振动高报警`,
+                        code: `_Motor_FrontVibHigh`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动低报警',
+                        code: '_Motor_FrontVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动高报警',
+                        code: '_Motor_RearVibHigh',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动低报警',
+                        code: '_Motor_RearVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '启动超时报警',
+                        code: '_Blower_StartTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '停止超时报警',
+                        code: '_Blower_StopTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '压力传感器保护投退',
+                        code: '_PressureSensor_Protect',
+                        type: 'warning',
+                    },
+                    {
+                        title: `温度传感器保护投退`,
+                        code: `_TemperatureSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `前轴振动传感器保护投退`,
+                        code: `_FrontVibrationSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `后轴振动传感器保护投退`,
+                        code: `_RearVibrationSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `流量传感器保护投退`,
+                        code: `_FlowSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `启动`,
+                        code: `_AirCompressor_Start`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `停止`,
+                        code: `_AirCompressor_Stop`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `复位`,
+                        code: `_AirCompressor_Reset`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `加载`,
+                        code: `_AirCompressor_Load`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动',
+                        code: '_FrontVibration',
+                        type: '',
+                    },
+                    {
+                        title: '电机前轴温度',
+                        code: '_FrontTemp',
+                        type: '',
+                    },
+                    {
+                        title: '回水管流量',
+                        code: '_ReturnFlow',
+                        type: '',
+                    },
+                    {
+                        title: '电压高报警值',
+                        code: '_HighVoltageAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '电流高报警值',
+                        code: '_HighCurrentAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '排气温度高报警值',
+                        code: '_ExhaustTempHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '振动值高报警值',
+                        code: '_VibrationHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '流量高报警值',
+                        code: '_FlowHighAlarmSetting',
+                        type: '',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        type: 'list',
+        title: '压风机5',
+        stateHeader: [],
+        children: [
+            {
+                title: '',
+                childTitle: ['5#压风机'],
+                key: ['PRE5'],
+                list: [
+                    {
+                        title: `风包温度高报警`,
+                        code: `_Blower_HighTemp`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包温度低报警`,
+                        code: `_Blower_LowTemp`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力高报警`,
+                        code: `_Blower_HighPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力低报警`,
+                        code: `_Blower_LowPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `电机前轴振动高报警`,
+                        code: `_Motor_FrontVibHigh`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动低报警',
+                        code: '_Motor_FrontVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动高报警',
+                        code: '_Motor_RearVibHigh',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动低报警',
+                        code: '_Motor_RearVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '启动超时报警',
+                        code: '_Blower_StartTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '停止超时报警',
+                        code: '_Blower_StopTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '压力传感器保护投退',
+                        code: '_PressureSensor_Protect',
+                        type: 'warning',
+                    },
+                    {
+                        title: `温度传感器保护投退`,
+                        code: `_TemperatureSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `前轴振动传感器保护投退`,
+                        code: `_FrontVibrationSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `后轴振动传感器保护投退`,
+                        code: `_RearVibrationSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `流量传感器保护投退`,
+                        code: `_FlowSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `启动`,
+                        code: `_AirCompressor_Start`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `停止`,
+                        code: `_AirCompressor_Stop`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `复位`,
+                        code: `_AirCompressor_Reset`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `加载`,
+                        code: `_AirCompressor_Load`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动',
+                        code: '_FrontVibration',
+                        type: '',
+                    },
+                    {
+                        title: '电机前轴温度',
+                        code: '_FrontTemp',
+                        type: '',
+                    },
+                    {
+                        title: '回水管流量',
+                        code: '_ReturnFlow',
+                        type: '',
+                    },
+                    {
+                        title: '电压高报警值',
+                        code: '_HighVoltageAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '电流高报警值',
+                        code: '_HighCurrentAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '排气温度高报警值',
+                        code: '_ExhaustTempHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '振动值高报警值',
+                        code: '_VibrationHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '流量高报警值',
+                        code: '_FlowHighAlarmSetting',
+                        type: '',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        type: 'list',
+        title: '压风机6',
+        stateHeader: [],
+        children: [
+            {
+                title: '',
+                childTitle: ['6#压风机'],
+                key: ['PRE6'],
+                list: [
+                    {
+                        title: `风包温度高报警`,
+                        code: `_Blower_HighTemp`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包温度低报警`,
+                        code: `_Blower_LowTemp`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力高报警`,
+                        code: `_Blower_HighPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `风包压力低报警`,
+                        code: `_Blower_LowPressure`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `电机前轴振动高报警`,
+                        code: `_Motor_FrontVibHigh`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动低报警',
+                        code: '_Motor_FrontVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动高报警',
+                        code: '_Motor_RearVibHigh',
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机后轴振动低报警',
+                        code: '_Motor_RearVibLow',
+                        type: 'warning',
+                    },
+                    {
+                        title: '启动超时报警',
+                        code: '_Blower_StartTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '停止超时报警',
+                        code: '_Blower_StopTimeout',
+                        type: 'warning',
+                    },
+                    {
+                        title: '压力传感器保护投退',
+                        code: '_PressureSensor_Protect',
+                        type: 'warning',
+                    },
+                    {
+                        title: `温度传感器保护投退`,
+                        code: `_TemperatureSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `前轴振动传感器保护投退`,
+                        code: `_FrontVibrationSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `后轴振动传感器保护投退`,
+                        code: `_RearVibrationSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `流量传感器保护投退`,
+                        code: `_FlowSensor_Protect`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `启动`,
+                        code: `_AirCompressor_Start`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `停止`,
+                        code: `_AirCompressor_Stop`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `复位`,
+                        code: `_AirCompressor_Reset`,
+                        type: 'warning',
+                    },
+                    {
+                        title: `加载`,
+                        code: `_AirCompressor_Load`,
+                        type: 'warning',
+                    },
+                    {
+                        title: '电机前轴振动',
+                        code: '_FrontVibration',
+                        type: '',
+                    },
+                    {
+                        title: '电机前轴温度',
+                        code: '_FrontTemp',
+                        type: '',
+                    },
+                    {
+                        title: '回水管流量',
+                        code: '_ReturnFlow',
+                        type: '',
+                    },
+                    {
+                        title: '电压高报警值',
+                        code: '_HighVoltageAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '电流高报警值',
+                        code: '_HighCurrentAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '排气温度高报警值',
+                        code: '_ExhaustTempHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '振动值高报警值',
+                        code: '_VibrationHighAlarmSetting',
+                        type: '',
+                    },
+                    {
+                        title: '流量高报警值',
+                        code: '_FlowHighAlarmSetting',
+                        type: '',
+                    },
+                ],
+            },
+        ],
+    },
+];
+
+export const detailCtrl = [];