Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/views/vent/deviceManager/configurationTable/types.ts

@@ -49,7 +49,7 @@ export interface ModuleData {
     link: string;
   };
   /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
-  layout: ('board' | 'list' | 'chart' | 'table' | 'blast_delta')[];
+  layout: ('board' | 'list' | 'chart' | 'table' | 'blast_delta' | 'fire_control' | 'fire_warn')[];
   /** 展示牌元素 */
   board: {
     /** 展示牌说明内容 */
@@ -68,11 +68,13 @@ export interface ModuleData {
     label: string;
     formatter?: string;
     prop: string;
+    /** 列表预设的背景类型，仅第一个type生效，即第一个type决定了列表整体的类型 */
+    type: 'timeline' | 'A' | 'B';
   }[];
   /** 图表元素，仅第一个配置项将生效 */
   chart: {
     /** 图表通用类型，一个类型对应一种图表预设 */
-    type: 'pie' | 'bar' | 'line';
+    type: 'pie' | 'bar' | 'line' | 'line_area';
     /** 读取数据时的基础路径，例如如果图表依赖一个数组，那么该项应设置能读取到该数组的路径。例如：readData.history */
     readFrom: string;
     /** 排序依据，该项应配置为`readFrom`指向的数据中的可读项。例如：createTime */

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/home/configurable/components/customChart.vue → src/views/vent/home/configurable/components/CustomChart.vue

@@ -26,7 +26,7 @@
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
-  // 核心方法，生成适用与 echart 的选项
+  // 核心方法，生成适用与 echart 的选项，这个方法需要适配 chart 类型的每种子类型
   const genChartOption = () => {
     // 依据每一个图表配置生成图表选项
     const { yAxis = [], xAxis = [], order, type, sortBy, series } = props.chartConfig;
@@ -147,6 +147,7 @@
         }, []),
       };
     }
+
     // 折线图和上面的柱状图类似
     if (type === 'line') {
       return {
@@ -162,9 +163,9 @@
           color: '#fff',
         },
         grid: {
-          left: 80,
+          left: 60,
           top: 50,
-          right: 80,
+          right: 60,
           bottom: 50,
         },
         xAxis: xAxis.map((e) => {
@@ -204,6 +205,74 @@
 
       return {};
     }
+
+    // 折线图和上面的柱状图类似
+    if (type === 'line_area') {
+      return {
+        legend: {
+          show: false,
+        },
+        // backgroundColor: '#081f33',
+        textStyle: {
+          color: '#fff',
+        },
+        grid: {
+          left: 60,
+          top: 50,
+          right: 60,
+          bottom: 50,
+        },
+        xAxis: xAxis.map((e) => {
+          return {
+            type: 'category',
+            boundaryGap: false,
+            data: sorttedData.map((d) => {
+              return getFormattedText(d, e.prop, e.formatter);
+            }),
+          };
+        }),
+        yAxis: yAxis.map((e) => {
+          return {
+            name: e.label,
+            position: e.align,
+            splitLine: {
+              lineStyle: {
+                color: '#fff',
+                opacity: 0.3,
+              },
+            },
+          };
+        }),
+        series: series.map((serie, index) => {
+          const colors = ['#66ffff', '#6666ff'];
+          const data = sorttedData.map((d) => {
+            return {
+              name: serie.label,
+              value: get(d, serie.prop, 0),
+            };
+          });
+
+          return {
+            type: 'line',
+            data,
+            symbol: 'none',
+            endLabel: { distance: 0 },
+            // itemStyle: { show: false, opacity: 0 },
+            lineStyle: { color: colors[index % colors.length] },
+            areaStyle: {
+              origin: 'auto',
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: colors[index % colors.length] },
+                { offset: 0.2, color: colors[index % colors.length] },
+                { offset: 1, color: `${colors[index % colors.length]}22` },
+              ]),
+            },
+          };
+        }),
+      };
+
+      return {};
+    }
   };
 
   watch(

src/views/vent/home/configurable/components/CustomList.vue

@@ -0,0 +1,146 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="list flex items-center" :class="`list__${type}`">
+    <!-- 部分类型的列表需要加一张图片 -->
+    <div :class="`list-item__image__${type}`"></div>
+    <div class="flex-grow">
+      <div v-for="item in listConfig" :key="item.prop" class="flex items-center list-item">
+        <div :class="`list-item__icon__${type}`"></div>
+        <div class="flex-grow" :class="`list-item__content__${type}`">
+          <div class="list-item__label">{{ item.label }}</div>
+          <div :class="`list-item__value_${item.color}`">
+            {{ item.value }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        value: string;
+        color: string;
+        label: string;
+        prop: string;
+      }[];
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      type: 'A',
+    }
+  );
+
+  //   defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+  /* Timeline 相关的样式 */
+
+  .list-item {
+    height: 20%;
+  }
+  .list-item__content__A {
+    background-repeat: no-repeat;
+    background-image: @vent-gas-list-item-bg-img;
+    padding: 5px 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .list-item__content__B {
+    background-repeat: no-repeat;
+    padding: 5px 10px 10px 10px;
+    display: flex;
+    justify-content: space-between;
+    background-position: left bottom;
+    background-size: 100% auto;
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_b.png);
+  }
+  .list-item__image__B {
+    width: 77px;
+    height: 77px;
+    background-repeat: no-repeat;
+    background-image: url(/@/assets/images/home-container/configurable/deco_1.png);
+    background-size: auto;
+    margin-right: 20px;
+  }
+  .list-item__icon__A {
+    background-repeat: no-repeat;
+    width: 25px;
+    height: 29px;
+    background-image: url(/@/assets/images/home-container/configurable/triangle_icon.png);
+  }
+  // .list-item__icon_red {
+  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_5.png');
+  // }
+  // .list-item__icon_orange {
+  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_4.png');
+  // }
+  // .list-item__icon_yellow {
+  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_3.png');
+  // }
+  // .list-item__icon_green {
+  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_2.png');
+  // }
+  // .list-item__icon_blue {
+  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_1.png');
+  // }
+  // .list-item__icon {
+  //   width: 33px;
+  //   height: 35px;
+  //   margin-left: 50px;
+  //   background-repeat: no-repeat;
+  //   background-position: center center;
+  // }
+  // .list-item__dot {
+  //   width: 10px;
+  //   height: 10px;
+  //   margin-left: 70px;
+  //   background-color: @vent-gas-primary-bg;
+  //   border-radius: 5px;
+  //   position: relative;
+  // }
+  // .list-item__dot::before {
+  //   content: '';
+  //   position: absolute;
+  //   top: -3px;
+  //   left: -3px;
+  //   width: 16px;
+  //   height: 16px;
+  //   border-radius: 8px;
+  //   border: 1px solid @vent-gas-tab-border;
+  // }
+  // .list-item__label {
+  // }
+  .list-item__value_red {
+    color: red;
+  }
+  .list-item__value_orange {
+    color: orange;
+  }
+  .list-item__value_yellow {
+    color: yellow;
+  }
+  .list-item__value_green {
+    color: yellowgreen;
+  }
+  .list-item__value_blue {
+    color: lightblue;
+  }
+
+  .list {
+    padding: 5px 20px;
+    position: relative;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    background-size: auto 100%;
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_default.png);
+  }
+
+  .list__A {
+    padding-left: 5px;
+  }
+</style>

src/views/vent/home/configurable/components/FIreControl.vue

@@ -0,0 +1,144 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="w-100% h-100% flex justify-around">
+    <div v-for="(item, i) in listAConfig" :key="`hccfc${i}`" class="board">
+      <div class="text-center mb-20px">{{ item.title }}</div>
+      <div v-for="stuff in item.list" :key="stuff.prop" class="board-item flex justify-between">
+        <div>{{ stuff.label }}</div>
+        <div :class="`board-item__value_${stuff.color}`">{{ stuff.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted } from 'vue';
+  //   import { Config } from '../../../deviceManager/configurationTable/types';
+  //   import { useInitDevices } from '../hooks/useInit';
+  //   import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  //   import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+  //   import MiniBoard from './MiniBoard.vue';
+  //   import TimelineList from './TimelineList.vue';
+  //   import CustomList from './CustomList.vue';
+  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
+  //   import CustomChart from './CustomChart.vue';
+  //   import { get } from 'lodash-es';
+  //   import CommonTable from '../../billboard/components/CommonTable.vue';
+  //   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+
+  //   const { header: headerConfig, background, board, layout, list, chart, table } = props.moduleData;
+  const listA = [
+    {
+      title: '防火注浆',
+      list: [
+        {
+          prop: 'a',
+          label: '注浆流量',
+          color: 'white',
+        },
+        {
+          prop: 'b',
+          label: '注浆压力',
+          color: 'blue',
+        },
+        {
+          prop: 'c',
+          label: '启停状态',
+          color: 'blue',
+          formatter: '${}',
+        },
+      ],
+      //   color: 'yellow',
+    },
+    {
+      title: '防火注氮',
+      list: [
+        {
+          prop: 'a',
+          label: '注浆流量',
+          color: 'white',
+        },
+        {
+          prop: 'b',
+          label: '注浆压力',
+          color: 'blue',
+        },
+        {
+          prop: 'c',
+          label: '启停状态',
+          color: 'blue',
+          formatter: '${}',
+        },
+      ],
+      //   color: 'yellow',
+    },
+  ];
+
+  const listAConfig = computed(() => {
+    const data = {
+      a: '8.12',
+      b: '9.99',
+      c: '开启',
+      d: '正常',
+    };
+    return listA.map((b) => {
+      return {
+        ...b,
+        list: b.list.map((e) => {
+          return {
+            ...e,
+            value: getFormattedText(data, e.prop, e.formatter),
+          };
+        }),
+      };
+    });
+  });
+  //   const listType = computed(() => {
+  //     return list[0]?.type || 'A';
+  //   });
+
+  //   const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
+  //     props.deviceType,
+  //     headerConfig
+  //   );
+
+  onMounted(() => {
+    // fetchDevices();
+  });
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .board {
+    width: 151px;
+    height: 196px;
+    background-image: url(/@/assets/images/home-container/configurable/board_bg.png);
+    padding: 8px 5px 0 5px;
+  }
+
+  .board-item {
+    height: 40px;
+    line-height: 40px;
+    border-style: solid;
+    // border: 2px solid blue;
+    // border-image: linear-gradient(transparent, #fff, transparent);
+    border-top: none;
+    border-bottom: none;
+    border-image: linear-gradient(transparent 30%, #fff 50%, transparent 80%) 10;
+    padding: 0 5px;
+  }
+  .board-item__value_red {
+    color: red;
+  }
+  .board-item__value_orange {
+    color: orange;
+  }
+  .board-item__value_yellow {
+    color: yellow;
+  }
+  .board-item__value_green {
+    color: yellowgreen;
+  }
+  .board-item__value_blue {
+    color: lightblue;
+  }
+</style>

src/views/vent/home/configurable/components/FIreWarn.vue

@@ -0,0 +1,132 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="w-100% h-100% pl-5px pr-5px">
+    <div class="flex items-center h-140px">
+      <div class="fire-warn__image">
+        <div class="fire-warn__image_sub w-50px h-50px top-10px left-20px line-height-50px">低风险</div>
+        <div class="fire-warn__image_sub w-30px h-30px top-50px left-70px line-height-30px">CO</div>
+        <div class="fire-warn__image_sub w-20px h-20px top-80px left-20px line-height-20px">CO</div>
+      </div>
+      <CustomList type="A" :list-config="listAConfig" />
+    </div>
+    <CustomList type="B" :list-config="listBConfig" style="height: 80px; margin-top: 10px" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted } from 'vue';
+  import { Config } from '../../../deviceManager/configurationTable/types';
+  //   import { useInitDevices } from '../hooks/useInit';
+  //   import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  //   import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+  //   import MiniBoard from './MiniBoard.vue';
+  //   import TimelineList from './TimelineList.vue';
+  import CustomList from './CustomList.vue';
+  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
+  //   import CustomChart from './CustomChart.vue';
+  //   import { get } from 'lodash-es';
+  //   import CommonTable from '../../billboard/components/CommonTable.vue';
+  //   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+
+  //   const { header: headerConfig, background, board, layout, list, chart, table } = props.moduleData;
+  const listA: Config['moduleData']['list'] = [
+    {
+      type: 'A',
+      prop: 'a',
+      label: '火情状态',
+      color: 'yellow',
+    },
+    {
+      type: 'A',
+      prop: 'b',
+      label: '回采位置',
+      color: 'white',
+    },
+    {
+      type: 'A',
+      prop: 'c',
+      label: '硐室火情',
+      color: 'blue',
+    },
+    {
+      type: 'A',
+      prop: 'd',
+      label: '联动设备状态',
+      color: 'blue',
+    },
+  ];
+  const listB: Config['moduleData']['list'] = [
+    {
+      type: 'B',
+      prop: 'a',
+      label: '2024/07/22 07:00:00',
+      color: 'white',
+    },
+    {
+      type: 'B',
+      prop: 'b',
+      label: '2811工作面上隅角',
+      color: 'white',
+    },
+  ];
+  const listBConfig = computed(() => {
+    const data = {
+      a: '轻微堵塞',
+      b: '甲烷0.02%',
+    };
+    return listB.map((b) => {
+      return {
+        ...b,
+        value: getFormattedText(data, b.prop, b.formatter),
+      };
+    });
+  });
+  const listAConfig = computed(() => {
+    const data = {
+      a: '缓慢氧化',
+      b: '800m',
+      c: '正常',
+      d: '正常',
+    };
+    return listA.map((b) => {
+      return {
+        ...b,
+        value: getFormattedText(data, b.prop, b.formatter),
+      };
+    });
+  });
+  //   const listType = computed(() => {
+  //     return list[0]?.type || 'A';
+  //   });
+
+  //   const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
+  //     props.deviceType,
+  //     headerConfig
+  //   );
+
+  onMounted(() => {
+    // fetchDevices();
+  });
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .fire-warn__image {
+    position: relative;
+    width: 200px;
+    height: 100%;
+    margin: 0 10px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% auto;
+    background-image: url(/@/assets/images/home-container/configurable/deco_2.png);
+  }
+
+  .fire-warn__image_sub {
+    text-align: center;
+    position: absolute;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% auto;
+    background-image: url(/@/assets/images/home-container/configurable/deco_3.png);
+  }
+</style>

src/views/vent/home/configurable/components/content.vue

@@ -57,19 +57,30 @@
       </div>
       <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
       <template v-if="val === 'chart'">
-        <CustomChart :chart-config="chartConfig" :chart-data="chartData" style="flex-grow: 1" />
+        <CustomChart :chart-config="chartConfig" :chart-data="chartData" class="flex-grow" />
       </template>
-      <!-- 时间线列表部分，这部分通常是占一整个模块的 -->
+      <!-- 通常列表部分 -->
       <template v-if="val === 'list'">
-        <TimelineList :list-config="listConfig" />
+        <template v-if="listType === 'timeline'">
+          <TimelineList :list-config="listConfig" />
+        </template>
+        <template v-else>
+          <CustomList :type="listType" :list-config="listConfig" />
+        </template>
       </template>
       <!-- 表格部分，这部分通常是占一整个模块的 -->
       <template v-if="val === 'table'">
-        <CommonTable :columns="tableConfig.columns" :data="tableData" class="mt-10px mb-10px" />
+        <CommonTable :columns="tableConfig.columns" :data="tableData" class="mt-10px mb-10px text-center flex-grow overflow-auto" />
       </template>
       <template v-if="val === 'blast_delta'">
         <BlastDelta class="mt-10px mb-10px" />
       </template>
+      <template v-if="val === 'fire_control'">
+        <FIreControl class="mt-10px mb-10px" />
+      </template>
+      <template v-if="val === 'fire_warn'">
+        <FIreWarn class="mt-10px mb-10px" />
+      </template>
     </template>
   </div>
 </template>
@@ -79,13 +90,16 @@
   import { useInitDevices } from '../hooks/useInit';
   import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
   import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
-  import MiniBoard from './miniBoard.vue';
-  import TimelineList from './timelineList.vue';
+  import MiniBoard from './MiniBoard.vue';
+  import TimelineList from './TimelineList.vue';
+  import CustomList from './CustomList.vue';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
-  import CustomChart from './customChart.vue';
+  import CustomChart from './CustomChart.vue';
   import { get } from 'lodash-es';
   import CommonTable from '../../billboard/components/CommonTable.vue';
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+  import FIreWarn from './FIreWarn.vue';
+  import FIreControl from './FIreControl.vue';
 
   const props = defineProps<{
     deviceType: Config['deviceType'];
@@ -122,6 +136,9 @@
       };
     });
   });
+  const listType = computed(() => {
+    return list[0]?.type || 'A';
+  });
 
   const chartConfig = computed(() => {
     return chart[0];
@@ -142,8 +159,30 @@
     };
   });
   const tableData = computed(() => {
-    const data = selectedDevice.value;
-    return get(data, table[0]?.readFrom, []);
+    // const data = selectedDevice.value;
+    return [
+      {
+        index: '1',
+        time: '2024/07/22 07:00',
+        warn: '未知',
+      },
+      {
+        index: '2',
+        time: '2024/07/22 08:00',
+        warn: '未知',
+      },
+      {
+        index: '3',
+        time: '2024/07/22 09:00',
+        warn: '未知',
+      },
+      {
+        index: '4',
+        time: '2024/07/22 10:00',
+        warn: '未知',
+      },
+    ];
+    // return get(data, table[0]?.readFrom, []);
   });
 
   const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(

src/views/vent/home/configurable/index.vue

@@ -44,11 +44,11 @@
   // import VentilateAnalysis from './components/VentilateAnalysis.vue';
   // import WorkSurface from './components/WorkSurface.vue';
   // import DeviceWarning from './components/DeviceWarning.vue';
-  import MonitorCenter from './components/monitorCenter.vue';
+  import MonitorCenter from './components/MonitorCenter.vue';
   // import { useInitConfigs } from './hooks/useInit';
   import { Config } from '../../deviceManager/configurationTable/types';
-  import ModuleEnhanced from './components/moduleEnhanced.vue';
-  import ModuleOriginal from './components/moduleOriginal.vue';
+  import ModuleEnhanced from './components/ModuleEnhanced.vue';
+  import ModuleOriginal from './components/ModuleOriginal.vue';
   import Content from './components/content.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -129,7 +129,7 @@
         list: [],
         chart: [
           {
-            type: 'line',
+            type: 'line_area',
             readFrom: 'majorpath.paths',
             xAxis: [{ prop: 'name' }],
             yAxis: [
@@ -157,7 +157,7 @@
       pageType: '',
       moduleData: {
         header: {
-          show: true,
+          show: false,
           showSelector: false,
           showSlot: true,
           selector: {
@@ -173,7 +173,8 @@
           type: 'video',
           link: '',
         },
-        layout: ['list'],
+        layout: ['fire_warn'],
+        // layout: ['list'],
         board: [],
         chart: [],
         table: [],
@@ -182,26 +183,31 @@
             label: '正常',
             prop: 'blue.val',
             color: 'blue',
+            type: 'B',
           },
           {
             label: '告警',
             prop: 'orange.val',
             color: 'orange',
+            type: 'B',
           },
           {
             label: '报警',
             prop: 'yellow.val',
             color: 'yellow',
+            type: 'B',
           },
           {
             label: '危险',
             prop: 'red.val',
             color: 'red',
+            type: 'B',
           },
           {
             label: '错误',
             prop: 'alarm.val',
             color: 'green',
+            type: 'B',
           },
         ],
       },
@@ -350,12 +356,16 @@
             readFrom: 'history',
             columns: [
               {
-                prop: 'A',
-                label: 'A列',
+                prop: 'index',
+                label: '编号',
+              },
+              {
+                prop: 'time',
+                label: '报警时间',
               },
               {
-                prop: 'B',
-                label: 'B列',
+                prop: 'warn',
+                label: '报警内容',
               },
             ],
           },
@@ -363,11 +373,44 @@
         chart: [],
       },
       showStyle: {
-        size: 'width:450px;height:570px;',
+        size: 'width:450px;height:280px;',
         version: 'enhanced',
         position: 'top:350px;right:0;',
       },
     },
+    {
+      deviceType: 'sys_majorpath',
+      moduleName: '测试关键路线',
+      pageType: '',
+      moduleData: {
+        header: {
+          show: false,
+          showSelector: true,
+          showSlot: true,
+          selector: {
+            prop: 'devicePos',
+          },
+          slot: {
+            prop: 'devicePos',
+          },
+        },
+        background: {
+          show: false,
+          type: 'video',
+          link: '',
+        },
+        layout: ['fire_control'],
+        board: [],
+        list: [],
+        table: [],
+        chart: [],
+      },
+      showStyle: {
+        size: 'width:450px;height:280px;',
+        version: 'enhanced',
+        position: 'top:640px;right:0;',
+      },
+    },
   ]);
   const isOriginal = true;
   const visible = ref(true);

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 = [];