1. 优化语音播放功能

2. 传感器页面优化
3. 设备管理、场景管理添加报表录入功能

src/layouts/default/header/components/VoiceBroadcast.vue

@@ -1,12 +1,12 @@
 <template>
-  <div style="position: fixed; z-index: 999999; right: 120px; top: 20px; color: #fff">
+  <div>
     <div class="btn" @click="showWarningBroad">
       <!-- <div>语音播报</div>
     <a-badge :count="10">
       <a href="#" class="head-example"></a>
     </a-badge> -->
-      <a-badge :dot="isWarningDot">
-        <BellOutlined style="font-size: 22px; color: #fff; margin-right: 20px" />
+      <a-badge :dot="isWarningDot" style="display: flex; flex-direction: row">
+        <BellOutlined style="font-size: 22px; color: #fff; margin-right: 10px" />
         <WarningOutlined style="font-size: 22px; color: #fff" />
       </a-badge>
     </div>
@@ -38,7 +38,8 @@
             <div>{{ item['isok'] ? '已解决' : '未解决' }}</div>
           </div>
         </div>
-        <!-- <div v-if="broadcastList.length > 0" class="more" @click="toMore">更多>></div> -->
+        <div v-if="broadcastList.length > 0" class="more" @click="toMore">更多>></div>
+        <!-- <div v-if="broadcastList.length > 0" class="more" @click.self="test()">测试>></div> -->
       </div>
     </div>
   </div>
@@ -56,13 +57,13 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import SpeakVoice from './notify/speakVoice';
   import { useDrag } from '@/hooks/event/useDrag';
-
   export default defineComponent({
     name: 'VoiceBroadcast',
     components: { Icon, Tooltip, Badge, SoundOutlined, BellOutlined, WarningOutlined },
 
     setup() {
-      const speakVoice = new SpeakVoice();
+      debugger;
+      let speakVoice;
       const userStore = useUserStore();
       const glob = useGlobSetting();
       const router = useRouter();
@@ -83,7 +84,6 @@
           });
         }
       }
-
       function handleBroad() {
         isBroad.value = !isBroad.value;
       }
@@ -92,12 +92,12 @@
         activeKey.value = key;
         const res = await list({ pageSize: 20, devicetype: '', isok: key == 1 ? 0 : key == 2 ? 1 : null, sort: 'createTime' });
         broadcastList.value = res['records'];
-        // const isHasWarning = broadcastList.value.findIndex((item) => !item['isok']);
-        // isWarningDot.value = isHasWarning > -1 ? true : false;
+        const isHasWarning = broadcastList.value.findIndex((item) => !item['isok']);
+        if (key !== 2) isWarningDot.value = isHasWarning > -1 ? true : false;
       }
 
       async function toMore() {
-        await router.push({ path: '/monitorChannel/device-monitor/warningHistory' });
+        await router.push({ path: '/monitorChannel/device-monitor/warningHistory/home' });
         showWarningBroad();
       }
 
@@ -114,10 +114,11 @@
         onWebSocket(onWebSocketMessage);
       }
 
-      function onWebSocketMessage(data) {
+      async function onWebSocketMessage(data) {
         // console.log('WebSocket 监测消息--------------》', data);
         if (data.topic === 'warn' || data.cmd === 'user') {
           if (isBroad.value) {
+            await speakVoice.getSpeechCnVoices();
             const messageText = data['warndata'];
             // const messageText = '这是一个测试';
             speakVoice.handleReply(messageText);
@@ -135,10 +136,27 @@
         }
       }
       onMounted(() => {
-        initWebSocket();
+        speakVoice = new SpeakVoice();
+        nextTick(async () => {
+          initWebSocket();
+          await toSelectList(1);
+        });
+        window.speechSynthesis.onvoiceschanged = () => {
+          console.log('语音列表已更新');
+        };
       });
 
-      return { showWarningBroad, isShowWarningBroad, activeKey, toSelectList, broadcastList, toMore, isBroad, handleBroad, isWarningDot };
+      return {
+        showWarningBroad,
+        isShowWarningBroad,
+        activeKey,
+        toSelectList,
+        broadcastList,
+        toMore,
+        isBroad,
+        handleBroad,
+        isWarningDot,
+      };
     },
   });
 </script>
@@ -292,4 +310,8 @@
       }
     }
   }
+  :deep(.zxm-badge-count) {
+    width: 8px;
+    height: 8px;
+  }
 </style>

src/layouts/default/header/components/notify/index_old.vue

@@ -143,13 +143,13 @@
       }
 
       function onWebSocketMessage(data) {
-        console.log('---onWebSocketMessage---', data)
+        console.log('---onWebSocketMessage---', data);
         if (data.cmd === 'topic' || data.cmd === 'user') {
           //update-begin-author:taoyan date:2022-7-13 for: VUEN-1674【严重bug】系统通知，为什么必须刷新右上角才提示
           //后台保存数据太慢 前端延迟刷新消息
-          setTimeout(()=>{
+          setTimeout(() => {
             loadData();
-          }, 1000)
+          }, 1000);
           //update-end-author:taoyan date:2022-7-13 for: VUEN-1674【严重bug】系统通知，为什么必须刷新右上角才提示
         }
       }

src/layouts/default/header/components/notify/speakVoice.ts

@@ -9,19 +9,13 @@ export default class SpeakVoice {
     this.voices = [];
     this.initVoice();
   }
-  button = document.createElement('button');
-  event = new MouseEvent('click', {
-    view: window,
-    bubbles: true,
-    cancelable: true,
-  });
+
   // 初始化
   initVoice() {
     this.instance.volume = 1; // 声音音量：1，范围从0到1
     this.instance.rate = 3; // 设置语速：1，范围从0到100
     this.instance.lang = 'zh-CN'; // 使用的语言:中文
-    this.instance.localService = true;
-    this.instance.pitch = 0; // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
+    this.instance.pitch = 1; // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
     this.instance.voiceURI = 'Ting-Ting';
     // this.instance.voiceURI = 'Google 普通话（中国大陆）';
   }
@@ -33,20 +27,9 @@ export default class SpeakVoice {
 
   // 语音队列重播
   handleReply(text) {
-    const _this = this;
-
-    // button.textContent = '点击我';
-
-    // 添加点击事件处理程序
-    this.button.addEventListener('click', function () {
-      _this.instance.text = text;
-      _this.handleCancel();
-      _this.handleSpeak();
-    });
-
-    // 模拟用户点击事件
-
-    this.button.dispatchEvent(this.event);
+    this.instance.text = text;
+    this.handleCancel();
+    this.handleSpeak();
   }
 
   // 语音队列删除 , 删除队列中所有的语音.如果正在播放,则直接停止
@@ -76,17 +59,21 @@ export default class SpeakVoice {
 
   // 获取可用的中文语音
   async getSpeechCnVoices() {
-    try {
-      const voices = await this.getSpeechVoices();
-      const cnVoices = voices.filter((item) => item.lang.startsWith('zh-') && item.localService);
-      if (cnVoices.length === 0) {
-        throw new Error('没有可用的中文语音！');
+    if (this.voices.length < 1) {
+      try {
+        const voices = await this.getSpeechVoices();
+        const cnVoices = voices.filter((item) => item.lang.startsWith('zh-') && item.localService);
+        if (cnVoices.length === 0) {
+          throw new Error('没有可用的中文语音！');
+        } else {
+          console.log('有中文语音包');
+        }
+        this.voices = cnVoices;
+        return cnVoices;
+      } catch (error) {
+        console.error(error);
+        throw error;
       }
-      this.voices = cnVoices;
-      return cnVoices;
-    } catch (error) {
-      console.error(error);
-      throw error;
     }
   }
 

src/layouts/default/header/components/user-dropdown/index.vue

@@ -17,6 +17,7 @@
         <MenuItem key="password" :text="t('layout.header.dropdownItemSwitchPassword')" icon="ant-design:edit-outlined" />
         <MenuItem key="depart" :text="t('layout.header.dropdownItemSwitchDepart')" icon="ant-design:cluster-outlined" />
         <MenuItem key="cache" :text="t('layout.header.dropdownItemRefreshCache')" icon="ion:sync-outline" />
+        <MenuItem key="modalCache" :text="t('layout.header.dropdownItemSwitchModal')" icon="ion:sync-outline" />
         <!-- <MenuItem
             v-if="getUseLockPage"
             key="lock"
@@ -58,7 +59,7 @@
   import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
   import { getRefPromise } from '/@/utils/index';
 
-  type MenuEvent = 'logout' | 'doc' | 'lock' | 'cache' | 'depart';
+  type MenuEvent = 'logout' | 'doc' | 'lock' | 'cache' | 'depart' | 'modalCache';
   const { createMessage } = useMessage();
   export default defineComponent({
     name: 'UserDropdown',
@@ -132,6 +133,15 @@
           createMessage.error('刷新缓存失败！');
         }
       }
+
+      function clearModalCache() {
+        if (window['CustomDB']) {
+          const tables = window['CustomDB'].tables[0];
+          tables.clear();
+          location.reload();
+        }
+      }
+
       // 切换部门
       function updateCurrentDepart() {
         loginSelectRef.value.show();
@@ -159,6 +169,9 @@
           case 'cache':
             clearCache();
             break;
+          case 'modalCache':
+            clearModalCache();
+            break;
           case 'depart':
             updateCurrentDepart();
             break;

src/layouts/default/header/index.vue

@@ -46,21 +46,17 @@
 
     <!-- action  -->
     <div :class="`${prefixCls}-action`">
-      <div class="right-position">
+      <!-- <div class="right-position">
+        <VoiceBroadcast />
         <UserDropDown v-if="showUserDropdown" :theme="getHeaderTheme" />
       </div>
-      <VoiceBroadcast />
-      <LoginSelect ref="loginSelectRef" @success="loginSelectOk" />
+      <LoginSelect ref="loginSelectRef" @success="loginSelectOk" /> -->
     </div>
   </Header>
-  <div
-    v-else-if="currentRoute.path.endsWith('home') || currentRoute.path.startsWith('/micro')"
-    :class="`${prefixCls}-action`"
-    style="position: fixed; top: 30px; right: 20px; z-index: 999999"
-  >
+  <div :class="`${prefixCls}-action`" style="position: fixed; top: 30px; right: 20px; z-index: 999999">
     <div class="right-position">
-      <UserDropDown v-if="showUserDropdown" :theme="getHeaderTheme" />
       <VoiceBroadcast />
+      <UserDropDown v-if="showUserDropdown" :theme="getHeaderTheme" />
       <LoginSelect ref="loginSelectRef" @success="loginSelectOk" />
     </div>
   </div>

src/locales/lang/zh-CN/layout.ts

@@ -9,6 +9,7 @@ export default {
     dropdownItemSwitchDepart: '切换部门',
     dropdownItemRefreshCache: '刷新缓存',
     dropdownItemSwitchAccount: '账户设置',
+    dropdownItemSwitchModal: '刷新模型缓存',
 
     // tooltip
     tooltipErrorLog: '错误日志',

src/views/vent/deviceManager/comment/DeviceModal.vue

@@ -7,7 +7,7 @@
     :showCancelBtn="false"
     :showOkBtn="false"
     :footer="null"
-    destroyOnClose
+    :destroyOnClose="true"
     :mask-closable="false"
     @cancel="closeModalFn"
   >
@@ -18,6 +18,9 @@
       <!-- <a-tab-pane key="10" v-if="deviceType == 'fanlocal' || deviceType == 'fanmain'" tab="风机曲线" force-render>
         <FanLineModal :record="deviceData" />
       </a-tab-pane> -->
+      <a-tab-pane key="11" tab="报表录入">
+        <DeviceReportInfo v-if="activeKey == '11'" />
+      </a-tab-pane>
       <a-tab-pane key="2" tab="点表关联">
         <PointTable
           :columns="pointColumns"
@@ -84,6 +87,7 @@
   import ManagerWarningDeviceTable from './warningTabel/index2.vue';
   import BackWindDeviceTable from './warningTabel/index3.vue';
   import WorkFacePointTable from './pointTabel/WorkFacePointTable.vue';
+  import DeviceReportInfo from './DeviceReportInfo.vue';
   // import editWarnTable from './editWarnTable/index.vue'
   import FanLineModal from './FanLineModal .vue';
   import FormModal from './FormModal.vue';
@@ -216,6 +220,7 @@
   });
 
   const closeModalFn = () => {
+    activeKey.value = '1';
     closeModal();
     emit('closeModal');
   };

src/views/vent/deviceManager/comment/pointTabel/PointTable.vue

@@ -26,7 +26,7 @@
             :fieldNames="{ label: 'deviceName', value: 'deviceID' }"
             v-model:value="record['editValueRefs']['link_id']"
             style="width: 100%"
-          ></Select>
+          />
         </div>
         <div v-if="record.editable && column.dataIndex === 'link_code'">
           <Select
@@ -35,7 +35,7 @@
             :fieldNames="{ label: 'valuename', value: 'valuecode' }"
             @change="handleChangeLinkCode($event, index)"
             v-model:value="record['editValueRefs']['link_code']"
-          ></Select>
+          />
         </div>
       </template>
     </BasicTable>
@@ -60,9 +60,9 @@
         type: String || Number,
         requried: true,
       },
-      valuetype:{
+      valuetype: {
         type: Number,
-         requried: true,
+        requried: true,
       },
       pointType: {
         type: String,
@@ -134,11 +134,11 @@
           console.log(res);
         });
       }
-      function handleSearch(val: string){
-        return options.value.map(item => {
-          return (item['deviceName'] as string).includes(val)
-        })
-      };
+      function handleSearch(val: string) {
+        return options.value.map((item) => {
+          return (item['deviceName'] as string).includes(val);
+        });
+      }
 
       function handleChangeDeviceType(e, index?) {
         if (!e) return;
@@ -244,7 +244,7 @@
         monitorParamsOptions,
         deviceList,
         dataSource,
-        filterOption
+        filterOption,
       };
     },
   });

src/views/vent/deviceManager/workingFace/workingFace.data.ts

@@ -165,8 +165,6 @@ export const commentFormSchema = (strtype) => {
         let api;
         if (formModel['strtype'] == 'sys_dongshi') {
           api = dongshi;
-        } else if (formModel['strtype'] == 'sys_other') {
-          api = qita;
         } else if (formModel['strtype'] == 'sys_cheliang') {
           api = cheliang;
         } else if (formModel['strtype'] == 'sys_surface_juejin') {
@@ -175,13 +173,16 @@ export const commentFormSchema = (strtype) => {
           api = caimei;
         } else if (formModel['strtype'] == 'sys_surface_beiyong') {
           api = beiyong;
+        } else if (formModel['strtype'] == 'sys_other') {
+          api = qita;
         }
-        return {
-          api: api.bind(null, { id: formModel['huifengid'] }),
-          labelField: 'work_name',
-          valueField: 'id',
-          resultField: 'obj',
-        };
+        if (api)
+          return {
+            api: api.bind(null, { id: formModel['huifengid'] }),
+            labelField: 'work_name',
+            valueField: 'id',
+            resultField: 'obj',
+          };
       },
     },
     {

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

@@ -11,7 +11,7 @@
         </div>
 
         <!-- <div class="now-status">{{ !nowStatus ? nowStatus : 0 }}</div> -->
-        <div class="now-status">{{  nowStatus}}</div>
+        <div class="now-status">{{ nowStatus }}</div>
       </div>
     </div>
     <div class="warn-contents">
@@ -33,200 +33,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');
-}
-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,
+  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,
+    }
+  );
 </script>
 
 <style lang="less" scoped>
-@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-face {
     font-family: 'douyuFont';
-    cursor: pointer;
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
 
-    &:hover {
-      color: #66ffff;
+  .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;
+      }
     }
-  }
 
-  .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;
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
       display: flex;
-      justify-content: space-between;
-      align-items: center;
 
-      .now-status {
-        margin-right: 5px;
-        padding-top: 3px;
-        font-family: 'douyuFont';
-        color: #3df6ff;
+      .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;
+        }
       }
     }
-  }
 
-  .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;
+    .warn-contents {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      height: calc(100% - 66px);
+      width: 100%;
+      padding: 20px 15px;
+      box-sizing: border-box;
       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%;
-        }
-      }
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
 
-      .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%;
+      .warn-box {
+        position: relative;
+        width: 396px;
+        height: 16px;
+        display: flex;
+        background: url('../../../../../assets/images/home-container/warn1.png') no-repeat;
 
-        .text-n {
+        .warn-icon {
           position: absolute;
-          left: 50%;
-          top: -10px;
-          transform: translate(-50%, 0);
-          color: #fff;
+          left: 10%;
+          top: -20px;
+          width: 44px;
+          height: 35px;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
         }
-      }
 
-      .warn-val {
-        position: absolute;
-        left: 66%;
-        top: -21px;
-        width: 94px;
-        height: 45px;
-        background: url('../../../../../assets/images/home-container/warn8.png') no-repeat;
+        .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: 50%;
+            top: -10px;
+            transform: translate(-50%, 0);
+            color: #fff;
+          }
+        }
 
-        .val-n {
+        .warn-val {
           position: absolute;
-          left: 50%;
-          top: 50%;
-          font-size: 14px;
-          font-family: 'douyuFont';
-          transform: translate(-50%, -52%);
+          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(1) .val-n {
+          color: red;
+        }
 
-      &:nth-child(2) .val-n {
-        color: #f93825;
-      }
+        &:nth-child(2) .val-n {
+          color: #f93825;
+        }
 
-      &:nth-child(3) .val-n {
-        color: #ff9b17;
-      }
+        &:nth-child(3) .val-n {
+          color: #ff9b17;
+        }
 
-      &:nth-child(4) .val-n {
-        color: #ffff00;
-      }
+        &:nth-child(4) .val-n {
+          color: #ffff00;
+        }
 
-      &:nth-child(5) .val-n {
-        color: #31dbfd;
+        &: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/monitorManager/comment/comment.api.ts

@@ -1,9 +1,11 @@
 import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
-  list = '/safety/ventanalyDeviceInfo/list',
   edit = '/safety/ventanalyDeviceInfo/edit',
+  list = '/safety/ventanalyDeviceInfo/list',
   input = '/safety/ventanalyDeviceInfo/input',
+  sysList = '/safety/ventanalyManageSystem/list',
+  sysInput = '/safety/ventanalyManageSystem/input',
 }
 
 /**
@@ -18,3 +20,6 @@ export const list = (params) => defHttp.get({ url: Api.list, params });
 export const updateDeviceInfo = (params) => defHttp.put({ url: Api.edit, params });
 
 export const updateReportInfo = (params) => defHttp.put({ url: Api.input, params });
+
+export const sysList = (params) => defHttp.get({ url: Api.sysList, params });
+export const sysInput = (params) => defHttp.put({ url: Api.sysInput, params });

src/views/vent/monitorManager/compressor/components/nitrogenHome_bd.vue

@@ -311,6 +311,7 @@ import { deviceControlApi } from '/@/api/vent/index';
 import { message } from 'ant-design-vue';
 import { useCamera } from '/@/hooks/system/useCamera';
 import lodash from 'lodash';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 const globalConfig = inject('globalConfig');
 
 const props = defineProps({
@@ -712,35 +713,23 @@ const deviceMonitorList = reactive([
 ])
 
 
-const propTypeArr = ref([])
-const chartsColumns = ref([])
-watch(monitorDataGroupNum, () => {
-
-    const arr = <any[]>[]
-    const item = {
-        legend: '实时流量',
-        seriesName: '(m³/min)',
-        ymax: 100,
-        yname: 'm³/min',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'flow',
-    }
-    const propTypeList = []
-    let echartLend=1
-    for (let i = 1; i <= echartLend; i++) {
-        const lineType = lodash.cloneDeep(item)
-        lineType.legend = '制氮机实时流量';
-        lineType.dataIndex = 'flow'
-        lineType.color = colors[i - 1]
-        arr.push(lineType)
-    }
-    chartsColumns.value = arr
-
-})
+// const chartsColumns = ref([])
+
+const chartsColumns = ref(getTableHeaderColumns('sys_nitrogen_chart'))
+// const propTypeArr = ref([])
+// watch(monitorDataGroupNum, () => {
+//     const arr = <any[]>[]
+//     const item = getTableHeaderColumns('sys_nitrogen_chart')
+//     const propTypeList = []
+//     for (let i = 1; i <= monitorDataGroupNum.value; i++) {
+//         const lineType = lodash.cloneDeep(item[0])
+//         lineType.legend = `制氮机${i}瞬时流量`;
+//         lineType.dataIndex = `${item[0].dataIndex}${i}`
+//         lineType.color = colors[i - 1]
+//         arr.push(lineType)
+//     }
+//     chartsColumns.value = arr
+// })
 
 const monitorData = ref(
     new Array(3).fill({

src/views/vent/monitorManager/compressor/components/nitrogenHome_bet.vue

@@ -1,42 +1,59 @@
 <template>
   <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
-  <div id="nitrogenCss3D" class="threejs-Object-CSS"
-    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
+  <div
+    id="nitrogenCss3D"
+    class="threejs-Object-CSS"
+    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
+  >
     <a-spin :spinning="loading" />
     <template>
-      <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor" >
+      <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
         <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
           <div class="title">{{ monitorData[groupNum - 1]['strname'] }} </div>
           <div class="monitor-item">
             <span class="monitor-title">排气压力:</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{
-              monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] ? monitorData[groupNum -
-              1]['AirCompressor_ExhaustPre'] : '-'
-            }}</span>
-            <span class="unit">kPa</span></span>
+            <span class="monitor-val" v-if="!refresh"
+              ><span class="val">{{
+                monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] ? monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] : '-'
+              }}</span>
+              <span class="unit">kPa</span></span
+            >
           </div>
           <div class="monitor-item">
             <span class="monitor-title">累计流量:</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{ monitorData[groupNum - 1]['FluxTotal1'] ? parseFloat(monitorData[groupNum - 1]['FluxTotal1']).toFixed(2) : '-' }}</span><span class="unit">m³</span></span>
+            <span class="monitor-val" v-if="!refresh"
+              ><span class="val">{{
+                monitorData[groupNum - 1]['FluxTotal1'] ? parseFloat(monitorData[groupNum - 1]['FluxTotal1']).toFixed(2) : '-'
+              }}</span
+              ><span class="unit">m³</span></span
+            >
           </div>
           <div class="monitor-item">
             <span class="monitor-title">氮气纯度:</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{ monitorData[groupNum - 1]['NitrogenPurity'] ? parseFloat(monitorData[groupNum - 1]['NitrogenPurity']).toFixed(2) : '-' }}</span>
-            <span class="unit">%</span></span>
+            <span class="monitor-val" v-if="!refresh"
+              ><span class="val">{{
+                monitorData[groupNum - 1]['NitrogenPurity'] ? parseFloat(monitorData[groupNum - 1]['NitrogenPurity']).toFixed(2) : '-'
+              }}</span>
+              <span class="unit">%</span></span
+            >
           </div>
           <div class="monitor-item">
             <span class="monitor-title">运行时间:</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{
-              monitorData[groupNum - 1]['AirCompressor_RunTime'] ? monitorData[groupNum - 1]['AirCompressor_RunTime'] :
-              '-'
-            }}</span><span class="unit">h</span></span>
+            <span class="monitor-val" v-if="!refresh"
+              ><span class="val">{{
+                monitorData[groupNum - 1]['AirCompressor_RunTime'] ? monitorData[groupNum - 1]['AirCompressor_RunTime'] : '-'
+              }}</span
+              ><span class="unit">h</span></span
+            >
           </div>
           <div class="monitor-item">
             <span class="monitor-title">加载时间:</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{
-              monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum - 1]['AirCompressor_LoadTime']
-              : '-'
-            }}</span><span class="unit">h</span></span>
+            <span class="monitor-val" v-if="!refresh"
+              ><span class="val">{{
+                monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum - 1]['AirCompressor_LoadTime'] : '-'
+              }}</span
+              ><span class="unit">h</span></span
+            >
           </div>
         </fourBorderBg>
       </div>
@@ -44,17 +61,20 @@
         <fourBorderBg id="downWindMonitor">
           <div class="title">下风测监测 </div>
           <div class="monitor-item" v-for="(data, index) in downWindData" :key="index">
-            <span class="monitor-title">{{ data.title}} :</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{
-                        (monitorData.length > 0 && monitorData[0][data.code]) >= 0
-                        ? monitorData[0][data.code] ? parseFloat(monitorData[0][data.code]).toFixed(2) : '-'
-                        : '-'
-                      }}</span>
-            <span class="unit">{{ data.unit }}</span></span>
+            <span class="monitor-title">{{ data.title }} :</span>
+            <span class="monitor-val" v-if="!refresh"
+              ><span class="val">{{
+                (monitorData.length > 0 && monitorData[0][data.code]) >= 0
+                  ? monitorData[0][data.code]
+                    ? parseFloat(monitorData[0][data.code]).toFixed(2)
+                    : '-'
+                  : '-'
+              }}</span>
+              <span class="unit">{{ data.unit }}</span></span
+            >
           </div>
         </fourBorderBg>
       </div>
-
     </template>
   </div>
   <div class="nitrogen-home">
@@ -78,18 +98,20 @@
                       <span class="state-title">{{ Object.values(data)[0] }} :</span>
                       <span class="state-val">{{
                         (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
-                        ? monitorData[groupNum - 1][Object.keys(data)[0]] ? parseFloat(monitorData[groupNum -
-                          1][Object.keys(data)[0]]).toFixed(2) : '-'
-                        : '-'
+                          ? monitorData[groupNum - 1][Object.keys(data)[0]]
+                            ? parseFloat(monitorData[groupNum - 1][Object.keys(data)[0]]).toFixed(2)
+                            : '-'
+                          : '-'
                       }}</span>
                     </div>
                     <div class="item-col" v-if="Object.keys(data)[1]">
                       <span class="state-title">{{ Object.values(data)[1] }} :</span>
                       <span class="state-val">{{
                         (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
-                        ? monitorData[groupNum - 1][Object.keys(data)[1]] ? parseFloat(monitorData[groupNum -
-                          1][Object.keys(data)[1]]).toFixed(2) : '-'
-                        : '-'
+                          ? monitorData[groupNum - 1][Object.keys(data)[1]]
+                            ? parseFloat(monitorData[groupNum - 1][Object.keys(data)[1]]).toFixed(2)
+                            : '-'
+                          : '-'
                       }}</span>
                     </div>
                   </div>
@@ -103,16 +125,16 @@
                       <span class="state-title">{{ Object.values(data)[0] }} :</span>
                       <span class="state-val">{{
                         (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
-                        ? monitorData[groupNum - 1][Object.keys(data)[0]]
-                        : '-'
+                          ? monitorData[groupNum - 1][Object.keys(data)[0]]
+                          : '-'
                       }}</span>
                     </div>
                     <div class="item-col" v-if="Object.keys(data)[1]">
                       <span class="state-title">{{ Object.values(data)[1] }} :</span>
                       <span class="state-val">{{
                         (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
-                        ? monitorData[groupNum - 1][Object.keys(data)[1]]
-                        : '-'
+                          ? monitorData[groupNum - 1][Object.keys(data)[1]]
+                          : '-'
                       }}</span>
                     </div>
                   </div>
@@ -161,20 +183,47 @@
                 <div class="control-item" v-for="(groupNum, index) in monitorDataGroupNum" :key="groupNum">
                   <div class="control-item-title">{{ monitorData[groupNum - 1]['strname'] }}</div>
                   <div class="control-item-state">
-                    <a-button disabled v-if="index == 0" size="small" type="text" style="color: #fff;"
-                      @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
-                    <a-button disabled v-else size="small" type="text" style="color: #fff;"
-                      @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
-
+                    <a-button
+                      disabled
+                      v-if="index == 0"
+                      size="small"
+                      type="text"
+                      style="color: #fff"
+                      @click="handlerDevice(airCompressorState[groupNum - 1], false)"
+                      >一键启停</a-button
+                    >
+                    <a-button
+                      disabled
+                      v-else
+                      size="small"
+                      type="text"
+                      style="color: #fff"
+                      @click="handlerDevice(airCompressorState[groupNum - 1], false)"
+                      >一键启停</a-button
+                    >
                   </div>
                 </div>
                 <div class="control-item" v-for="(groupNum, index) in monitorDataGroupNum" :key="groupNum">
                   <div class="control-item-title">{{ monitorData[groupNum - 1]['strname'] }}</div>
                   <div class="control-item-state">
-                    <a-button disabled v-if="index == 0" size="small" type="text" style="color: #fff;"
-                      @click="handlerDevice(airCompressorState[groupNum - 1], true)">一键复位</a-button>
-                    <a-button disabled v-else size="small" type="text" style="color: #fff;"
-                      @click="handlerDevice(airCompressorState[groupNum - 1], true)">一键复位</a-button>
+                    <a-button
+                      disabled
+                      v-if="index == 0"
+                      size="small"
+                      type="text"
+                      style="color: #fff"
+                      @click="handlerDevice(airCompressorState[groupNum - 1], true)"
+                      >一键复位</a-button
+                    >
+                    <a-button
+                      disabled
+                      v-else
+                      size="small"
+                      type="text"
+                      style="color: #fff"
+                      @click="handlerDevice(airCompressorState[groupNum - 1], true)"
+                      >一键复位</a-button
+                    >
                   </div>
                 </div>
               </div>
@@ -185,8 +234,15 @@
               <div>设备实时监测曲线</div>
             </template>
             <template #container>
-              <BarAndLine v-if="chartsColumns.length > 0" xAxisPropType="readTime" :dataSource="echartData" height="300px"
-                :chartsColumns="chartsColumns" chartsType="listMonitor" :option="echatsOption" />
+              <BarAndLine
+                v-if="chartsColumns.length > 0"
+                xAxisPropType="readTime"
+                :dataSource="echartData"
+                height="300px"
+                :chartsColumns="chartsColumns"
+                chartsType="listMonitor"
+                :option="echatsOption"
+              />
             </template>
           </ventBox1>
         </div>
@@ -194,703 +250,695 @@
       </div>
     </div>
   </div>
-  <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK"
-    @handle-cancel="handleCancel" />
+  <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK" @handle-cancel="handleCancel" />
 </template>
 <script lang="ts" setup name="nitrogenHome">
-import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject, onBeforeUnmount } from 'vue';
-import ventBox1 from '/@/components/vent/ventBox1.vue';
-import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
-import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
-import { getDevice } from '../nitrogen.api';
-import { SvgIcon } from '/@/components/Icon';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import HandleModal from './modal.vue';
-import { deviceControlApi } from '/@/api/vent/index';
-import { groupParameterData, deviceParameterData, downWindData } from '../nitrogen.data'
-import { message } from 'ant-design-vue';
-import lodash from 'lodash';
-import { useCamera } from '/@/hooks/system/useCamera';
-import dayjs from 'dayjs';
-
-const globalConfig = inject('globalConfig');
-
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true,
-  },
-  modalType: {
-    type: String,
-    require: true,
-  },
-});
-const playerRef = ref();
-const refresh = ref(false)
-const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
-const modalType = ref(''); // 模态框内容显示类型，设备操作类型
-const modalIsShow = ref<boolean>(false); // 是否显示模态框
-const loading = ref(true);
-let kzParam = reactive<any>({
-  data: {},
-  isFw: null,
-});
-
-// const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
-const flvURL1 = () => {
-  // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-  return '';
-};
-const colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9']
-const echatsOption = {
-  grid: {
-    top: '35%',
-    left: '15%',
-    right: '20px',
-    bottom: '8%',
-    // containLabel: true
-  },
-  toolbox: {
-    feature: {}
-  }
-}
-const monitorNetStatus = ref(0)
-const monitorDataGroupNum = ref(0);
-
-let airCompressorState = reactive<any[]>([]);
-
-const propTypeArr = ref([])
-const chartsColumns = ref([])
-
-watch(monitorDataGroupNum, () => {
-
-  const arr = <any[]>[]
-  const item = {
-    legend: '瞬时流量',
-    seriesName: '(m³/h)',
-    ymax: 2000,
-    yname: 'm³/h',
-    linetype: 'line',
-    yaxispos: 'left',
-    color: '#FDB146',
-    sort: 1,
-    xRotate: 0,
-    dataIndex: 'InputFlux',
-  }
-  const propTypeList = []
-  for (let i = 1; i <= monitorDataGroupNum.value; i++) {
-    const lineType = lodash.cloneDeep(item)
-    lineType.legend = `制氮机${i}瞬时流量`;
-    lineType.dataIndex = `InputFlux${i}`
-    lineType.color = colors[i - 1]
-    arr.push(lineType)
+  import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject, onBeforeUnmount } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
+  import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
+  import { getDevice } from '../nitrogen.api';
+  import { SvgIcon } from '/@/components/Icon';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import HandleModal from './modal.vue';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import { groupParameterData, deviceParameterData, downWindData } from '../nitrogen.data';
+  import { message } from 'ant-design-vue';
+  import lodash from 'lodash';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  import dayjs from 'dayjs';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+
+  const globalConfig = inject('globalConfig');
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+    modalType: {
+      type: String,
+      require: true,
+    },
+  });
+  const playerRef = ref();
+  const refresh = ref(false);
+  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
+  const modalIsShow = ref<boolean>(false); // 是否显示模态框
+  const loading = ref(true);
+  let kzParam = reactive<any>({
+    data: {},
+    isFw: null,
+  });
+
+  // const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
+  const flvURL1 = () => {
+    // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+    return '';
+  };
+  const colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9'];
+  const echatsOption = {
+    grid: {
+      top: '35%',
+      left: '15%',
+      right: '20px',
+      bottom: '8%',
+      // containLabel: true
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+  const monitorNetStatus = ref(0);
+  const monitorDataGroupNum = ref(0);
+
+  let airCompressorState = reactive<any[]>([]);
+
+  const chartsColumns = ref(getTableHeaderColumns('sys_nitrogen_chart'));
+
+  // const propTypeArr = ref([]);
+  // watch(monitorDataGroupNum, () => {
+  //   const arr = <any[]>[]
+  //   const item = getTableHeaderColumns('sys_nitrogen_chart')
+  //   const propTypeList = []
+  //   for (let i = 1; i <= monitorDataGroupNum.value; i++) {
+  //     const lineType = lodash.cloneDeep(item[0])
+  //     lineType.legend = `制氮机${i}瞬时流量`;
+  //     lineType.dataIndex = `${item[0].dataIndex}${i}`
+  //     lineType.color = colors[i - 1]
+  //     arr.push(lineType)
+  //   }
+  //   chartsColumns.value = arr
+  // })
+
+  const monitorData = ref(
+    new Array(3).fill({
+      // strName: '空压机',
+      // cumulativeFlow: '-',
+      // centerTemperature: '-',
+      // outletTemperature: '-',
+    })
+  );
+
+  //图表数据
+  let echartData = ref<any>([]);
+
+  const { getCamera, removeCamera } = useCamera();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = await setTimeout(
+        async () => {
+          if (props.deviceId) {
+            await getDataSource(props.deviceId);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+        },
+        flag ? 0 : 3000
+      );
+    }
   }
-  chartsColumns.value = arr
-
-})
-
-const monitorData = ref(
-  new Array(3).fill({
-    // strName: '空压机',
-    // cumulativeFlow: '-',
-    // centerTemperature: '-',
-    // outletTemperature: '-',
-  })
-);
-
-//图表数据
-let echartData = ref<any>([]);
-
-const { getCamera, removeCamera } = useCamera();
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-async function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = await setTimeout(
-      async () => {
-        if (props.deviceId) {
-          await getDataSource(props.deviceId);
-        }
-        if (timer) {
-          timer = null;
+
+  async function getDataSource(systemID) {
+    const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
+    if (res) {
+      const result = res;
+      if (!result || result.msgTxt.length < 1) return;
+      result.msgTxt.forEach((item) => {
+        if (item.type && item.type.startsWith('nitrogen')) {
+          airCompressorState.length = 0;
+          let netStatus = 0;
+          monitorData.value = item['datalist'].filter((data) => {
+            const readData = data.readData;
+            if (data['netStatus'] == 1) {
+              netStatus = 1;
+            }
+            airCompressorState.push({
+              id: data.deviceID,
+              deviceType: data.deviceType,
+              HMIReset: readData.HMIReset,
+              HMIStartStop: readData.HMIStartStop,
+            });
+            return Object.assign(data, readData);
+          });
+          monitorNetStatus.value = netStatus;
+          // console.log(monitorData,'monitorData.value---===')
+          const airCompressor = {
+            readTime: monitorData.value[0]['readTime'] ? monitorData.value[0]['readTime'].substring(11) : dayjs().format('HH:mm:ss'),
+          };
+          const dataArr = lodash.cloneDeep(echartData.value);
+          //图表数据
+          if (dataArr.length <= 5) {
+            monitorData.value.forEach((el, index) => {
+              airCompressor[`InputFlux${index + 1}`] = el['InputFlux'] || 0;
+            });
+            dataArr.push(airCompressor);
+          } else {
+            dataArr.shift();
+            dataArr.push(airCompressor);
+          }
+          echartData.value = dataArr;
         }
-        await getMonitor();
-      },
-      flag ? 0 : 3000
-    );
+      });
+      monitorDataGroupNum.value = monitorData.value.length;
+      refresh.value = true;
+      nextTick(() => {
+        refresh.value = false;
+      });
+    }
   }
-}
-
-async function getDataSource(systemID) {
-  const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
-  if (res) {
-    const result =res;
-    if (!result || result.msgTxt.length < 1) return;
-    result.msgTxt.forEach((item) => {
-      if (item.type && item.type.startsWith('nitrogen')) {
-        airCompressorState.length = 0;
-        let netStatus = 0
-        monitorData.value = item['datalist'].filter((data) => {
-          const readData = data.readData;
-          if (data['netStatus'] == 1) {
-            netStatus = 1
-          }
-          airCompressorState.push({
-            id: data.deviceID,
-            deviceType: data.deviceType,
-            HMIReset: readData.HMIReset,
-            HMIStartStop: readData.HMIStartStop
-          });
-          return Object.assign(data, readData);
-        });
-        monitorNetStatus.value = netStatus
-        // console.log(monitorData,'monitorData.value---===')
-        const airCompressor = { readTime: monitorData.value[0]['readTime'] ? monitorData.value[0]['readTime'].substring(11) : dayjs().format('HH:mm:ss') }
-        const dataArr = lodash.cloneDeep(echartData.value)
-        //图表数据
-        if (dataArr.length <= 5) {
-          monitorData.value.forEach((el, index) => {
-            airCompressor[`InputFlux${index + 1}`] = el['InputFlux'] || 0
-          });
-          dataArr.push(airCompressor)
+
+  function handlerDevice(data, bol) {
+    // console.log(bol, 'bol-------')
+    kzParam.data = data;
+    kzParam.isFw = bol;
+    // console.log(kzParam, 'kz--------')
+    if (bol) {
+      modalTitle.value = '一键复位';
+      modalType.value = '1';
+      modalIsShow.value = true;
+      kzParam.data.HMIReset = !data.HMIReset;
+    } else {
+      modalTitle.value = '一键启停';
+      modalType.value = '2';
+      modalIsShow.value = true;
+      kzParam.data.HMIStartStop = !data.HMIStartStop;
+    }
+  }
+  function handleOK(passWord, handlerState) {
+    // console.log(kzParam, 'kz----------');
+    // if (passWord !== '123456') {
+    //   message.warning('密码不正确，请重新输入');
+    //   return;
+    // }
+
+    let data = {};
+    if (kzParam.isFw) {
+      data = {
+        deviceid: kzParam.data.id,
+        devicetype: kzParam.data.deviceType,
+        password: passWord,
+        HMIReset: kzParam.data.HMIReset,
+      };
+    } else {
+      data = {
+        deviceid: kzParam.data.id,
+        password: passWord,
+        devicetype: kzParam.data.deviceType,
+        HMIStartStop: kzParam.data.HMIStartStop,
+      };
+    }
+
+    deviceControlApi(data).then((res) => {
+      // 模拟时开启
+      if (res.success) {
+        modalIsShow.value = false;
+        getDataSource(props.deviceId);
+        if (globalConfig.History_Type == 'remote') {
+          message.success('指令已下发至生产管控平台成功！');
         } else {
-          dataArr.shift()
-          dataArr.push(airCompressor)
+          message.success('指令已下发成功！');
         }
-        echartData.value = dataArr
       }
     });
-    monitorDataGroupNum.value = monitorData.value.length;
-    refresh.value = true
-    nextTick(() => {
-      refresh.value = false
-    })
   }
-}
-
-function handlerDevice(data, bol) {
-  // console.log(bol, 'bol-------')
-  kzParam.data = data;
-  kzParam.isFw = bol;
-  // console.log(kzParam, 'kz--------')
-  if (bol) {
-    modalTitle.value = '一键复位';
-    modalType.value = '1';
-    modalIsShow.value = true;
-    kzParam.data.HMIReset = !data.HMIReset
-  } else {
-    modalTitle.value = '一键启停';
-    modalType.value = '2';
-    modalIsShow.value = true;
-    kzParam.data.HMIStartStop = !data.HMIStartStop;
-  }
-}
-function handleOK(passWord, handlerState) {
-  // console.log(kzParam, 'kz----------');
-  // if (passWord !== '123456') {
-  //   message.warning('密码不正确，请重新输入');
-  //   return;
-  // }
-
-  let data = {};
-  if (kzParam.isFw) {
-    data = {
-      deviceid: kzParam.data.id,
-      devicetype: kzParam.data.deviceType,
-      password: passWord,
-      HMIReset: kzParam.data.HMIReset,
-    };
-  } else {
-    data = {
-      deviceid: kzParam.data.id,
-      password: passWord,
-      devicetype: kzParam.data.deviceType,
-      HMIStartStop: kzParam.data.HMIStartStop,
-    };
+
+  function handleCancel() {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
   }
 
-  deviceControlApi(data).then((res) => {
-    // 模拟时开启
-    if (res.success) {
-      modalIsShow.value = false;
-      getDataSource(props.deviceId);
-      if (globalConfig.History_Type == 'remote') {
-        message.success('指令已下发至生产管控平台成功！')
-      } else {
-        message.success('指令已下发成功！')
+  watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
+    nextTick(() => {
+      if (newMonitorDataGroupNum && !newLoading) {
+        setModelType(props.modalType, newMonitorDataGroupNum);
       }
-    }
+    });
   });
-}
-
-function handleCancel() {
-  modalIsShow.value = false;
-  modalTitle.value = '';
-  modalType.value = '';
-}
-
-watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
-  nextTick(() => {
-    if (newMonitorDataGroupNum && !newLoading) {
-      setModelType(props.modalType, newMonitorDataGroupNum);
+
+  watch(
+    () => props.deviceId,
+    async (deviceId) => {
+      if (deviceId) {
+        await getCamera(deviceId, playerRef.value, 'nitrogen');
+      }
     }
+  );
+  onBeforeUnmount(() => {
+    removeCamera();
   });
-});
 
-watch(() => props.deviceId, async(deviceId) => {
-  if(deviceId){
-    await getCamera(deviceId, playerRef.value, 'nitrogen');
-  }
-})
-onBeforeUnmount(() => {
-  removeCamera();
-});
-
-onMounted(async () => {
-  await getMonitor(true);
-  await mountedThree().then(() => {
-    loading.value = false;
+  onMounted(async () => {
+    await getMonitor(true);
+    await mountedThree().then(() => {
+      loading.value = false;
+    });
+    await getCamera(props.deviceId, playerRef.value, 'nitrogen');
+  });
+
+  onUnmounted(() => {
+    destroy();
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
   });
-  await getCamera(props.deviceId, playerRef.value, 'nitrogen');
-});
-
-onUnmounted(() => {
-  destroy();
-  removeCamera()
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
 </script>
 
 <style lang="less" scoped>
-@ventSpace: zxm;
-
-.nitrogen-box {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-#nitrogenCss3D {
-  .modal-monitor {
-    width: 200px;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-  }
+  @ventSpace: zxm;
 
-  &:deep(.win) {
-    margin: 0 !important;
-    background: #00000044;
-  }
-}
-
-.nitrogen-home {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-  top: 20px;
-
-  .nitrogen-container {
+  .nitrogen-box {
     width: 100%;
-    height: calc(100% - 100px);
+    height: 100%;
     display: flex;
-    justify-content: space-between;
-    margin-bottom: 100px;
-    position: relative;
-    .device-state{
-      width: 100%;
+    justify-content: center;
+  }
+
+  #nitrogenCss3D {
+    .modal-monitor {
+      width: 200px;
       position: absolute;
-      top: 80px;
-      color: #e90000;
-      display: flex;
-      justify-content: center;
-      font-size: 20px;
+      left: 0px;
+      top: 0px;
+    }
+
+    &:deep(.win) {
+      margin: 0 !important;
+      background: #00000044;
     }
-    .top-box {
+  }
+
+  .nitrogen-home {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    top: 20px;
+
+    .nitrogen-container {
       width: 100%;
-      padding: 10px;
-      overflow: hidden;
+      height: calc(100% - 100px);
       display: flex;
       justify-content: space-between;
+      margin-bottom: 100px;
       position: relative;
-      // margin-top: 40px;
-      .lr-box {
-        height: 100%;
+      .device-state {
+        width: 100%;
+        position: absolute;
+        top: 80px;
+        color: #e90000;
         display: flex;
-        flex-direction: column;
-        position: relative;
-        // overflow: hidden;
-        z-index: 9999;
-        pointer-events: auto;
-        overflow-y: auto;
-        overflow-x: hidden;
-        height: calc(100% - 70px);
+        justify-content: center;
+        font-size: 20px;
       }
-
-      .item {
-        width: 335px;
-        height: auto;
+      .top-box {
+        width: 100%;
+        padding: 10px;
+        overflow: hidden;
+        display: flex;
+        justify-content: space-between;
         position: relative;
-        border-radius: 5px;
-        margin-top: 10px;
-        margin-bottom: 0px;
-        pointer-events: auto;
-        color: #fff;
-        // overflow: hidden;
-
-        &:first-child {
-          margin-top: 0px;
+        // margin-top: 40px;
+        .lr-box {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          // overflow: hidden;
+          z-index: 9999;
+          pointer-events: auto;
+          overflow-y: auto;
+          overflow-x: hidden;
+          height: calc(100% - 70px);
         }
 
-        .base-title {
-          color: #fff;
-          margin-bottom: 8px;
-          padding-left: 10px;
+        .item {
+          width: 335px;
+          height: auto;
           position: relative;
-          font-size: 16px;
-
-          &::after {
-            content: '';
-            position: absolute;
-            display: block;
-            width: 4px;
-            height: 12px;
-            top: 7px;
-            left: 0px;
-            background: #45d3fd;
-            border-radius: 4px;
-          }
-        }
+          border-radius: 5px;
+          margin-top: 10px;
+          margin-bottom: 0px;
+          pointer-events: auto;
+          color: #fff;
+          // overflow: hidden;
 
-        .state-item {
-          display: flex;
-          flex-direction: row;
-          padding: 5px;
+          &:first-child {
+            margin-top: 0px;
+          }
 
-          .item-col {
-            width: calc(50% - 5px);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding-right: 4px;
-            background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+          .base-title {
+            color: #fff;
+            margin-bottom: 8px;
+            padding-left: 10px;
+            position: relative;
+            font-size: 16px;
 
-            &:first-child {
-              margin-right: 10px;
+            &::after {
+              content: '';
+              position: absolute;
+              display: block;
+              width: 4px;
+              height: 12px;
+              top: 7px;
+              left: 0px;
+              background: #45d3fd;
+              border-radius: 4px;
             }
+          }
 
-            .state-title {
-              color: #ffffffcc;
-              flex: 9;
-              font-size: 14px;
-            }
+          .state-item {
+            display: flex;
+            flex-direction: row;
+            padding: 5px;
 
-            .state-val {
-              flex: 1;
-              color: #00eefffe;
-              margin-right: 5px;
-              text-align: right;
-              font-size: 14px;
+            .item-col {
+              width: calc(50% - 5px);
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding-right: 4px;
+              background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+
+              &:first-child {
+                margin-right: 10px;
+              }
+
+              .state-title {
+                color: #ffffffcc;
+                flex: 9;
+                font-size: 14px;
+              }
+
+              .state-val {
+                flex: 1;
+                color: #00eefffe;
+                margin-right: 5px;
+                text-align: right;
+                font-size: 14px;
+              }
             }
           }
-        }
 
-        .signal-box {
-          margin: 5px 0;
-          display: flex;
-          align-items: center;
+          .signal-box {
+            margin: 5px 0;
+            display: flex;
+            align-items: center;
 
-          .signal-title {
-            color: #7af5ff;
-            margin: 0 5px;
-          }
+            .signal-title {
+              color: #7af5ff;
+              margin: 0 5px;
+            }
 
-          &:last-child {
-            margin-right: 0px;
+            &:last-child {
+              margin-right: 0px;
+            }
           }
-        }
 
-        .list-item {
-          padding: 0 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+          .list-item {
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
 
-          .item-data-key {
-            color: #ffffff99;
+            .item-data-key {
+              color: #ffffff99;
+            }
           }
-        }
 
-        .item-data-box {
-          color: #fff;
+          .item-data-box {
+            color: #fff;
 
-          .state-icon {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            border-radius: 12px;
-          }
+            .state-icon {
+              display: inline-block;
+              width: 12px;
+              height: 12px;
+              border-radius: 12px;
+            }
 
-          .open {
-            border: 5px solid #133a56;
-            background: #4ecb73;
-          }
+            .open {
+              border: 5px solid #133a56;
+              background: #4ecb73;
+            }
 
-          .close {
-            border: 5px solid #192961;
-            background: #6d7898;
+            .close {
+              border: 5px solid #192961;
+              background: #6d7898;
+            }
           }
         }
-      }
-
-      .item-l {
-        width: 100%;
 
-        .monitor-box {
+        .item-l {
           width: 100%;
 
-          .parameter-title {
-            position: relative;
+          .monitor-box {
             width: 100%;
-            height: 14px;
-            margin-top: 10px;
 
-            .icon,
-            span {
-              position: absolute;
-              top: -10px;
+            .parameter-title {
+              position: relative;
+              width: 100%;
+              height: 14px;
+              margin-top: 10px;
+
+              .icon,
+              span {
+                position: absolute;
+                top: -10px;
+              }
             }
-          }
 
-          .group-parameter-title {
-            background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+            .group-parameter-title {
+              background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
 
-            .icon {
-              left: -12px;
-              top: -17px;
-            }
+              .icon {
+                left: -12px;
+                top: -17px;
+              }
 
-            span {
-              left: 18px;
-            }
+              span {
+                left: 18px;
+              }
 
-            .item-col {
-              background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+              .item-col {
+                background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+              }
             }
-          }
 
-          .device-parameter-title {
-            background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+            .device-parameter-title {
+              background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
 
-            .icon {
-              left: -10px;
-              top: -14px;
-            }
+              .icon {
+                left: -10px;
+                top: -14px;
+              }
 
-            span {
-              left: 18px;
-            }
+              span {
+                left: 18px;
+              }
 
-            .item-col {
-              background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
+              .item-col {
+                background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
+              }
             }
           }
         }
-      }
-
-      .right-box {
-        width: 310px;
-        margin-top: 50px;
 
-        .control-group {
-          display: flex;
-          // justify-content: space-around;
-          flex-wrap: wrap;
+        .right-box {
+          width: 310px;
+          margin-top: 50px;
 
-          .control-item {
-            width: 50%; //lxh
+          .control-group {
             display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            padding: 0 4px;
-
-            .control-item-title {
-              color: #a6dce9;
-              position: relative;
-              top: 5px;
-            }
+            // justify-content: space-around;
+            flex-wrap: wrap;
 
-            .control-item-state {
-              width: 94px;
-              height: 47px;
-              background: url('/@/assets/images/vent/control-switch-bg.png');
+            .control-item {
+              width: 50%; //lxh
               display: flex;
+              flex-direction: column;
               justify-content: center;
               align-items: center;
-              color: #fff;
-            }
-
-            .button-box {
-              position: relative;
-              padding: 5px;
-              border: 1px transparent solid;
-              background-clip: border-box;
-              border-radius: 5px;
-              margin-left: 8px;
-            }
-
-            .a-button {
-              pointer-events: auto;
-            }
-
-            &::v-deep .a-button--mini {
-              padding: 6px 10px;
-            }
-
-            &::v-deep .a-button--mini.is-round {
-              padding: 6px 10px;
+              padding: 0 4px;
+
+              .control-item-title {
+                color: #a6dce9;
+                position: relative;
+                top: 5px;
+              }
+
+              .control-item-state {
+                width: 94px;
+                height: 47px;
+                background: url('/@/assets/images/vent/control-switch-bg.png');
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #fff;
+              }
+
+              .button-box {
+                position: relative;
+                padding: 5px;
+                border: 1px transparent solid;
+                background-clip: border-box;
+                border-radius: 5px;
+                margin-left: 8px;
+              }
+
+              .a-button {
+                pointer-events: auto;
+              }
+
+              &::v-deep .a-button--mini {
+                padding: 6px 10px;
+              }
+
+              &::v-deep .a-button--mini.is-round {
+                padding: 6px 10px;
+              }
             }
           }
         }
-      }
 
-      .left-box {
-        width: 365px;
-        margin-top: 80px;
+        .left-box {
+          width: 365px;
+          margin-top: 80px;
+        }
       }
-    }
-    .player-box {
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      padding: 0 20px 0 20px;
-      z-index: 9999;
-      display: flex;
-      align-items: end;
-      :deep(#LivePlayerBox) {
+      .player-box {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        padding: 0 20px 0 20px;
+        z-index: 9999;
         display: flex;
-        justify-content: end;
+        align-items: end;
+        :deep(#LivePlayerBox) {
+          display: flex;
+          justify-content: end;
+        }
+      }
+      &:deep(.win) {
+        width: 100%;
+        margin: 0 !important;
       }
     }
-    &:deep(.win) {
-      width: 100%;
-      margin: 0 !important;
-    }
-  }
-}
-
-&:deep(.main) {
-  .title {
-    height: 34px;
-    text-align: center;
-    font-weight: 600;
-    color: #7af5ff;
-    // background-image: url('../../../assets/img/yfj/light.png');
-    background-repeat: no-repeat;
-    background-position-x: center;
-    background-position-y: 100%;
-    background-size: 80%;
-    font-size: 16px;
   }
 
-  .monitor-item {
-    width: 200px;
-    display: flex;
-    flex-direction: row;
-    width: auto;
-    margin-bottom: 3px;
+  &: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-val {
-      color: #ffb700;
+    .monitor-item {
+      width: 200px;
       display: flex;
+      flex-direction: row;
       width: auto;
+      margin-bottom: 3px;
 
-      .val {
-        width: 80px;
-        font-size: 14px;
-      }
+      .monitor-val {
+        color: #ffb700;
+        display: flex;
+        width: auto;
+
+        .val {
+          width: 80px;
+          font-size: 14px;
+        }
 
-      .unit {
-        color: #ffffffbb;
-        font-size: 14px;
+        .unit {
+          color: #ffffffbb;
+          font-size: 14px;
+        }
       }
     }
-  }
 
-  .monitor-title {
-    width: 100px;
-    color: #7af5ff;
-    font-weight: 400;
-    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;
+    .signal-item {
+      display: flex;
+      justify-content: space-between;
 
-      &::after {
-        display: block;
-        content: '';
-        position: absolute;
-        width: 12px;
-        height: 12px;
-        top: -2px;
-        left: -2px;
+      // 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;
+      .signal-round-gry {
+        background-color: #858585;
 
-      &::after {
-        background-color: #85858544;
-        box-shadow: 0 0 1px 1px #85858599;
+        &::after {
+          background-color: #85858544;
+          box-shadow: 0 0 1px 1px #85858599;
+        }
       }
-    }
 
-    .signal-round-run {
-      background-color: #67fc00;
+      .signal-round-run {
+        background-color: #67fc00;
 
-      &::after {
-        background-color: #67fc0044;
-        box-shadow: 0 0 1px 1px #c6ff77;
+        &::after {
+          background-color: #67fc0044;
+          box-shadow: 0 0 1px 1px #c6ff77;
+        }
       }
-    }
 
-    .signal-round-warning {
-      background-color: #e9170b;
+      .signal-round-warning {
+        background-color: #e9170b;
 
-      &::after {
-        background-color: #e9170b44;
-        box-shadow: 0 0 1px 1px #e9170b;
+        &::after {
+          background-color: #e9170b44;
+          box-shadow: 0 0 1px 1px #e9170b;
+        }
       }
     }
   }
-}
 
-:deep(.zxm-radio-wrapper) {
-  color: #fff !important;
-}
+  :deep(.zxm-radio-wrapper) {
+    color: #fff !important;
+  }
 </style>

src/views/vent/monitorManager/compressor/components/nitrogenHome_blt.vue

@@ -1,21 +1,20 @@
 <template>
   <div>{{ Math.random() }}</div>
   <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
-  <div id="nitrogenCss3D" class="threejs-Object-CSS"
-    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
+  <div
+    id="nitrogenCss3D"
+    class="threejs-Object-CSS"
+    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
+  >
     <a-spin :spinning="loading" />
-    <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor" >
+    <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
       <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
         <div class="title">{{ monitorData[groupNum - 1]['strname'] }} </div>
         <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :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">{{
-                monitorData[groupNum - 1][preMonitor.code]
-                  ? formatNum(monitorData[groupNum - 1][preMonitor.code])
-                  : '-'
-              }}</span
+              ><span class="val">{{ monitorData[groupNum - 1][preMonitor.code] ? formatNum(monitorData[groupNum - 1][preMonitor.code]) : '-' }}</span
               ><span class="unit">{{ preMonitor.unit }}</span></span
             >
           </div>
@@ -27,12 +26,13 @@
                 :class="{
                   'signal-round': true,
                   'signal-round-run': !signal.isFault && monitorData[groupNum - 1][preMonitor.code] == '1',
-                  'signal-round-warning':
-                    signal.isFault && monitorData[groupNum - 1][preMonitor.code] == '1',
+                  'signal-round-warning': signal.isFault && monitorData[groupNum - 1][preMonitor.code] == '1',
                   'signal-round-gry': monitorData[groupNum - 1][preMonitor.code] != '1',
                 }"
               ></span>
-              <span style="display: inline-block; width: 30px; text-align: center;" v-else>{{ monitorData[groupNum - 1][preMonitor.code] == '1' ? '加载': monitorData[groupNum - 1][preMonitor.code] == '2' ? '卸载' : '-'}}</span>
+              <span style="display: inline-block; width: 30px; text-align: center" v-else>{{
+                monitorData[groupNum - 1][preMonitor.code] == '1' ? '加载' : monitorData[groupNum - 1][preMonitor.code] == '2' ? '卸载' : '-'
+              }}</span>
             </div>
           </div>
         </template>
@@ -45,23 +45,21 @@
       <div class="top-box">
         <!-- 底部区域故障数据 -->
         <div class="footer-item-box">
-            <div class="device-detail">
-                <div class="device-title">&nbsp</div>
-                <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="device-title" >
-                  {{ monitorData[groupNum - 1]['strname'] }}
-                </div>
-                <!-- <div class="device-val">故障</div> -->
+          <div class="device-detail">
+            <div class="device-title">&nbsp</div>
+            <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="device-title">
+              {{ monitorData[groupNum - 1]['strname'] }}
             </div>
-            <div v-for="(device, key) in deviceFault" class="device-detail" :key="key">
-                <div class="device-title">{{ device.title }}</div>
-                <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="device-val">
-                    <span :style="{ color: monitorData[groupNum - 1][device.code] != '1' ? '#BFBFBF' : '#10BC79' }">{{
-                        monitorData[groupNum - 1][device.code] == '0' ? '正常' : monitorData[groupNum - 1][device.code] == '1' ?
-                        '故障' :
-                        '-'
-                    }}</span>
-                </div>
+            <!-- <div class="device-val">故障</div> -->
+          </div>
+          <div v-for="(device, key) in deviceFault" class="device-detail" :key="key">
+            <div class="device-title">{{ device.title }}</div>
+            <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="device-val">
+              <span :style="{ color: monitorData[groupNum - 1][device.code] != '1' ? '#BFBFBF' : '#10BC79' }">{{
+                monitorData[groupNum - 1][device.code] == '0' ? '正常' : monitorData[groupNum - 1][device.code] == '1' ? '故障' : '-'
+              }}</span>
             </div>
+          </div>
         </div>
         <!-- 左边监测数据 -->
         <div class="lr-box left-box">
@@ -76,12 +74,10 @@
                     <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span>
                   </div> -->
                   <div class="monitor-item">
-                     <div class="state-item" v-for="(preFan, index) in preFanMonitorData" :key="index">
+                    <div class="state-item" v-for="(preFan, index) in preFanMonitorData" :key="index">
                       <div class="state-title">{{ preFan.title + (preFan.unit !== 'signal' ? `(${preFan.unit})` : '') }}</div>
                       <div v-if="preFan.unit !== 'signal'" class="state-val">{{
-                        monitorData[groupNum - 1][preFan.code] >= 0
-                          ? formatNum(Number(monitorData[groupNum - 1][preFan.code]))
-                          : '-'
+                        monitorData[groupNum - 1][preFan.code] >= 0 ? formatNum(Number(monitorData[groupNum - 1][preFan.code])) : '-'
                       }}</div>
                       <div
                         v-else
@@ -93,7 +89,6 @@
                       ></div>
                     </div>
                   </div>
-                 
                 </div>
               </template>
             </ventBox1>
@@ -106,8 +101,15 @@
               <div>设备实时监测曲线</div>
             </template>
             <template #container>
-              <BarAndLine v-if="chartsColumns.length > 0" xAxisPropType="readTime" :dataSource="echartData" height="340px"
-                :chartsColumns="chartsColumns" chartsType="listMonitor" :option="echatsOption" />
+              <BarAndLine
+                v-if="chartsColumns.length > 0"
+                xAxisPropType="readTime"
+                :dataSource="echartData"
+                height="340px"
+                :chartsColumns="chartsColumns"
+                chartsType="listMonitor"
+                :option="echatsOption"
+              />
               <!-- :option="zhudanOption" -->
             </template>
           </ventBox1>
@@ -115,373 +117,358 @@
       </div>
     </div>
   </div>
-  <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK"
-    @handle-cancel="handleCancel" />
+  <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK" @handle-cancel="handleCancel" />
 </template>
 <script lang="ts" setup name="nitrogenHome">
-import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject, computed } from 'vue';
-import ventBox1 from '/@/components/vent/ventBox1.vue';
-import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
-import { mountedThree, destroy, setModelType, addText } from '../nitrogen.threejs';
-import { getDevice } from '../nitrogen.api';
-import { SvgIcon } from '/@/components/Icon';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import HandleModal from './modal.vue';
-import { deviceControlApi } from '/@/api/vent/index';
-import { preMonitorList, preFanMonitorData, deviceFault } from '../nitrogen.data.blt'
-import { message } from 'ant-design-vue';
-import lodash from 'lodash';
-import { formatNum } from '/@/utils/ventutil';
-const globalConfig = inject('globalConfig');
-
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true,
-  },
-  modalType: {
-    type: String,
-    require: true,
-  },
-});
-const refresh = ref(false)
-const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
-const modalType = ref(''); // 模态框内容显示类型，设备操作类型
-const modalIsShow = ref<boolean>(false); // 是否显示模态框
-const loading = ref(true);
-let kzParam = reactive<any>({
-  data: {},
-  isFw: null,
-});
-
-// const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
-const flvURL1 = () => {
-  // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-  return '';
-};
-const colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9']
-const echatsOption = {
-  grid: {
-    top: '35%',
-    left: '15%',
-    right: '20px',
-    bottom: '8%',
-    // containLabel: true
-  },
-  toolbox: {
-    feature: {}
-  }
-}
-const monitorNetStatus = ref(0)
-const monitorDataGroupNum = ref(0);
-
-let airCompressorState = reactive<any[]>([]);
-
-const propTypeArr = ref([])
-const chartsColumns = ref([])
-watch(monitorDataGroupNum, () => {
-
-  const arr = <any[]>[]
-  const item = {
-    legend: '瞬时流量',
-    seriesName: '(m³/h)',
-    ymax: 2000,
-    yname: 'm³/h',
-    linetype: 'line',
-    yaxispos: 'left',
-    color: '#FDB146',
-    sort: 1,
-    xRotate: 0,
-    dataIndex: 'InputFlux',
-  }
-  const propTypeList = []
-  for (let i = 1; i <= monitorDataGroupNum.value; i++) {
-    const lineType = lodash.cloneDeep(item)
-    lineType.legend = `制氮机${i}瞬时流量`;
-    lineType.dataIndex = `InputFlux${i}`
-    lineType.color = colors[i - 1]
-    arr.push(lineType)
+  import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject, computed } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
+  import { mountedThree, destroy, setModelType, addText } from '../nitrogen.threejs';
+  import { getDevice } from '../nitrogen.api';
+  import { SvgIcon } from '/@/components/Icon';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import HandleModal from './modal.vue';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import { preMonitorList, preFanMonitorData, deviceFault } from '../nitrogen.data.blt';
+  import { message } from 'ant-design-vue';
+  import lodash from 'lodash';
+  import { formatNum } from '/@/utils/ventutil';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+
+  const globalConfig = inject('globalConfig');
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+    modalType: {
+      type: String,
+      require: true,
+    },
+  });
+  const refresh = ref(false);
+  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
+  const modalIsShow = ref<boolean>(false); // 是否显示模态框
+  const loading = ref(true);
+  let kzParam = reactive<any>({
+    data: {},
+    isFw: null,
+  });
+
+  // const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
+  const flvURL1 = () => {
+    // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+    return '';
+  };
+  const colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9'];
+  const echatsOption = {
+    grid: {
+      top: '35%',
+      left: '15%',
+      right: '20px',
+      bottom: '8%',
+      // containLabel: true
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+  const monitorNetStatus = ref(0);
+  const monitorDataGroupNum = ref(0);
+
+  let airCompressorState = reactive<any[]>([]);
+
+  const chartsColumns = ref(getTableHeaderColumns('sys_nitrogen_chart'));
+
+  // const propTypeArr = ref([])
+  // watch(monitorDataGroupNum, () => {
+  //     const arr = <any[]>[]
+  //     const item = getTableHeaderColumns('sys_nitrogen_chart')
+  //     const propTypeList = []
+  //     for (let i = 1; i <= monitorDataGroupNum.value; i++) {
+  //         const lineType = lodash.cloneDeep(item[0])
+  //         lineType.legend = `制氮机${i}瞬时流量`;
+  //         lineType.dataIndex = `${item[0].dataIndex}${i}`
+  //         lineType.color = colors[i - 1]
+  //         arr.push(lineType)
+  //     }
+  //     chartsColumns.value = arr
+  // })
+
+  const monitorData = ref(
+    new Array(3).fill({
+      // strName: '空压机',
+      // cumulativeFlow: '-',
+      // centerTemperature: '-',
+      // outletTemperature: '-',
+      // Ia: '-',
+      // Ib: '-',
+      // Ic: '-',
+      // Vab: '-',
+      // Vac: '-',
+      // Vbc: '-',
+      // compressGroupName: '',
+      // compressExhaustPressF1: '-',
+      // compressSeparatePressF1: '-',
+      // compressHostTempF1: '-',
+      // compressCrewTempF1: '-',
+      // compressRunTimeF1: '-',
+      // controlModel: 'LOC'
+    })
+  );
+
+  //图表数据
+  let echartData = ref<any>([]);
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = await setTimeout(
+        async () => {
+          if (props.deviceId) {
+            await getDataSource(props.deviceId);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+        },
+        flag ? 0 : 3000
+      );
+    }
   }
-  chartsColumns.value = arr
-
-})
-
-
-
-const monitorData = ref(
-  new Array(3).fill({
-    // strName: '空压机',
-    // cumulativeFlow: '-',
-    // centerTemperature: '-',
-    // outletTemperature: '-',
-    // Ia: '-',
-    // Ib: '-',
-    // Ic: '-',
-    // Vab: '-',
-    // Vac: '-',
-    // Vbc: '-',
-    // compressGroupName: '',
-    // compressExhaustPressF1: '-',
-    // compressSeparatePressF1: '-',
-    // compressHostTempF1: '-',
-    // compressCrewTempF1: '-',
-    // compressRunTimeF1: '-',
-    // controlModel: 'LOC'
-  })
-);
-
-//图表数据
-let echartData = ref<any>([]);
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-async function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = await setTimeout(
-      async () => {
-        if (props.deviceId) {
-          await getDataSource(props.deviceId);
-        }
-        if (timer) {
-          timer = null;
+
+  async function getDataSource(systemID) {
+    const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
+    console.log(res, 'res---------------');
+
+    if (res) {
+      const result = res;
+      if (!result || result.msgTxt.length < 1) return;
+      result.msgTxt.forEach((item) => {
+        if (item.type && item.type.startsWith('nitrogen')) {
+          airCompressorState.length = 0;
+          let netStatus = 0;
+          monitorData.value = item['datalist'].filter((data) => {
+            const readData = data.readData;
+            if (data['netStatus'] == 1) {
+              netStatus = 1;
+            }
+            airCompressorState.push({
+              id: data.deviceID,
+              deviceType: data.deviceType,
+              HMIReset: readData.HMIReset,
+              HMIStartStop: readData.HMIStartStop,
+            });
+            return Object.assign(data, readData);
+          });
+          monitorNetStatus.value = netStatus;
+          console.log(monitorData, 'monitorData.value---===');
+          const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) };
+          const dataArr = lodash.cloneDeep(echartData.value);
+          //图表数据
+          if (dataArr.length <= 5) {
+            monitorData.value.forEach((el, index) => {
+              airCompressor[`InputFlux${index + 1}`] = el['InputFlux'] || 0;
+            });
+            dataArr.push(airCompressor);
+          } else {
+            dataArr.shift();
+            dataArr.push(airCompressor);
+          }
+          echartData.value = dataArr;
         }
-        await getMonitor();
-      },
-      flag ? 0 : 3000
-    );
+      });
+      monitorDataGroupNum.value = monitorData.value.length;
+      refresh.value = true;
+      nextTick(() => {
+        refresh.value = false;
+      });
+    }
   }
-}
-
-async function getDataSource(systemID) {
-  const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
-  console.log(res, 'res---------------');
-
-  if (res) {
-    const result =res;
-    if (!result || result.msgTxt.length < 1) return;
-    result.msgTxt.forEach((item) => {
-      if (item.type && item.type.startsWith('nitrogen')) {
-        airCompressorState.length = 0;
-        let netStatus = 0
-        monitorData.value = item['datalist'].filter((data) => {
-          const readData = data.readData;
-          if (data['netStatus'] == 1) {
-            netStatus = 1
-          }
-          airCompressorState.push({
-            id: data.deviceID,
-            deviceType: data.deviceType,
-            HMIReset: readData.HMIReset,
-            HMIStartStop: readData.HMIStartStop
-          });
-          return Object.assign(data, readData);
-        });
-        monitorNetStatus.value = netStatus
-        console.log(monitorData,'monitorData.value---===')
-        const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) }
-        const dataArr = lodash.cloneDeep(echartData.value)
-        //图表数据
-        if (dataArr.length <= 5) {
-          monitorData.value.forEach((el, index) => {
-            airCompressor[`InputFlux${index + 1}`] = el['InputFlux'] || 0
-          });
-          dataArr.push(airCompressor)
+
+  function handlerDevice(data, bol) {
+    // console.log(bol, 'bol-------')
+    kzParam.data = data;
+    kzParam.isFw = bol;
+    // console.log(kzParam, 'kz--------')
+    if (bol) {
+      modalTitle.value = '一键复位';
+      modalType.value = '1';
+      modalIsShow.value = true;
+      kzParam.data.HMIReset = !data.HMIReset;
+    } else {
+      modalTitle.value = '一键启停';
+      modalType.value = '2';
+      modalIsShow.value = true;
+      kzParam.data.HMIStartStop = !data.HMIStartStop;
+    }
+  }
+  function handleOK(passWord, handlerState) {
+    // console.log(kzParam, 'kz----------');
+    // if (passWord !== '123456') {
+    //   message.warning('密码不正确，请重新输入');
+    //   return;
+    // }
+
+    let data = {};
+    if (kzParam.isFw) {
+      data = {
+        deviceid: kzParam.data.id,
+        devicetype: kzParam.data.deviceType,
+        password: passWord,
+        HMIReset: kzParam.data.HMIReset,
+      };
+    } else {
+      data = {
+        deviceid: kzParam.data.id,
+        password: passWord,
+        devicetype: kzParam.data.deviceType,
+        HMIStartStop: kzParam.data.HMIStartStop,
+      };
+    }
+
+    deviceControlApi(data).then((res) => {
+      // 模拟时开启
+      if (res.success) {
+        modalIsShow.value = false;
+        getDataSource(props.deviceId);
+        if (globalConfig.History_Type == 'remote') {
+          message.success('指令已下发至生产管控平台成功！');
         } else {
-          dataArr.shift()
-          dataArr.push(airCompressor)
+          message.success('指令已下发成功！');
         }
-        echartData.value = dataArr
       }
     });
-    monitorDataGroupNum.value = monitorData.value.length;
-    refresh.value = true
-    nextTick(() => {
-      refresh.value = false
-    })
-  }
-}
-
-function handlerDevice(data, bol) {
-  // console.log(bol, 'bol-------')
-  kzParam.data = data;
-  kzParam.isFw = bol;
-  // console.log(kzParam, 'kz--------')
-  if (bol) {
-    modalTitle.value = '一键复位';
-    modalType.value = '1';
-    modalIsShow.value = true;
-    kzParam.data.HMIReset = !data.HMIReset
-  } else {
-    modalTitle.value = '一键启停';
-    modalType.value = '2';
-    modalIsShow.value = true;
-    kzParam.data.HMIStartStop = !data.HMIStartStop;
   }
-}
-function handleOK(passWord, handlerState) {
-  // console.log(kzParam, 'kz----------');
-  // if (passWord !== '123456') {
-  //   message.warning('密码不正确，请重新输入');
-  //   return;
-  // }
-
-  let data = {};
-  if (kzParam.isFw) {
-    data = {
-      deviceid: kzParam.data.id,
-      devicetype: kzParam.data.deviceType,
-      password: passWord,
-      HMIReset: kzParam.data.HMIReset,
-    };
-  } else {
-    data = {
-      deviceid: kzParam.data.id,
-      password: passWord,
-      devicetype: kzParam.data.deviceType,
-      HMIStartStop: kzParam.data.HMIStartStop,
-    };
+  function handleCancel() {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
   }
 
-  deviceControlApi(data).then((res) => {
-    // 模拟时开启
-    if (res.success) {
-      modalIsShow.value = false;
-      getDataSource(props.deviceId);
-      if (globalConfig.History_Type == 'remote') {
-        message.success('指令已下发至生产管控平台成功！')
-      } else {
-        message.success('指令已下发成功！')
+  watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
+    nextTick(() => {
+      if (newMonitorDataGroupNum && !newLoading) {
+        setModelType(props.modalType, newMonitorDataGroupNum);
       }
-    }
-  });
-}
-function handleCancel() {
-  modalIsShow.value = false;
-  modalTitle.value = '';
-  modalType.value = '';
-}
-
-watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
-  nextTick(() => {
-    if (newMonitorDataGroupNum && !newLoading) {
-      setModelType(props.modalType, newMonitorDataGroupNum);
-    }
+    });
   });
-});
-
 
-onMounted(async () => {
-  await getMonitor(true);
-  await mountedThree().then(() => {
-    loading.value = false;
+  onMounted(async () => {
+    await getMonitor(true);
+    await mountedThree().then(() => {
+      loading.value = false;
+    });
   });
-});
 
-onUnmounted(() => {
-  destroy();
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
+  onUnmounted(() => {
+    destroy();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 
 <style lang="less" scoped>
-@ventSpace: zxm;
-
-.nitrogen-box {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-#nitrogenCss3D {
-  .modal-monitor {
-    width: 200px;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-  }
+  @ventSpace: zxm;
 
-  &:deep(.win) {
-    margin: 0 !important;
-    background: #00000044;
-  }
-}
-
-.nitrogen-home {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-  top: 20px;
-
-  .nitrogen-container {
+  .nitrogen-box {
     width: 100%;
-    height: calc(100% - 100px);
+    height: 100%;
     display: flex;
-    justify-content: space-between;
-    margin-bottom: 100px;
-    .device-state{
-      width: 100%;
+    justify-content: center;
+  }
+
+  #nitrogenCss3D {
+    .modal-monitor {
+      width: 200px;
       position: absolute;
-      top: 20px;
-      color: #e90000;
-      display: flex;
-      justify-content: center;
-      font-size: 20px;
+      left: 0px;
+      top: 0px;
+    }
+
+    &:deep(.win) {
+      margin: 0 !important;
+      background: #00000044;
     }
-    .top-box {
+  }
+
+  .nitrogen-home {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    top: 20px;
+
+    .nitrogen-container {
       width: 100%;
-      padding: 10px;
-      overflow: hidden;
+      height: calc(100% - 100px);
       display: flex;
       justify-content: space-between;
-      // margin-top: 40px;
-      .footer-item-box {
-        width: calc(100% - 20px);
-        height: auto;
-        position: fixed;
-        bottom: 130px;
+      margin-bottom: 100px;
+      .device-state {
+        width: 100%;
+        position: absolute;
+        top: 20px;
+        color: #e90000;
         display: flex;
         justify-content: center;
-        color: #fff;
-        // box-shadow: 0 0 30px rgb(0, 153, 184) inset;
-        pointer-events: auto;
+        font-size: 20px;
+      }
+      .top-box {
+        width: 100%;
+        padding: 10px;
+        overflow: hidden;
+        display: flex;
+        justify-content: space-between;
+        // margin-top: 40px;
+        .footer-item-box {
+          width: calc(100% - 20px);
+          height: auto;
+          position: fixed;
+          bottom: 130px;
+          display: flex;
+          justify-content: center;
+          color: #fff;
+          // box-shadow: 0 0 30px rgb(0, 153, 184) inset;
+          pointer-events: auto;
 
-        .device-detail {
+          .device-detail {
             text-align: center;
 
             &:first-child {
-                background-color: #00bbff11;
+              background-color: #00bbff11;
             }
 
             &:last-child {
-
-                .device-val,
-                .device-title {
-                    border-right: 1px solid #00baffd4;
-                }
+              .device-val,
+              .device-title {
+                border-right: 1px solid #00baffd4;
+              }
             }
 
             .device-val {
-                line-height: 36px;
-                border-top: 1px solid #00baffd4;
-                border-left: 1px solid #00baffd4;
+              line-height: 36px;
+              border-top: 1px solid #00baffd4;
+              border-left: 1px solid #00baffd4;
 
-                &:last-child {
-                    border-bottom: 1px solid #00baffd4;
-                }
+              &:last-child {
+                border-bottom: 1px solid #00baffd4;
+              }
             }
-        }
+          }
 
-        .device-title {
+          .device-title {
             width: 110px;
             text-align: center;
             border-top: 1px solid #00baffd4;
@@ -493,360 +480,358 @@ onUnmounted(() => {
             &:last-child {
               border-bottom: 1px solid #00baffd4;
             }
+          }
         }
-
-    }
-      .lr-box {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        // overflow: hidden;
-        z-index: 9999;
-        pointer-events: auto;
-        overflow-y: auto;
-        overflow-x: hidden;
-        height: calc(100% - 70px);
-      }
-
-      .item {
-        width: 285px;
-        height: auto;
-        position: relative;
-        border-radius: 5px;
-        margin-top: 10px;
-        margin-bottom: 0px;
-        pointer-events: auto;
-        color: #fff;
-        // overflow: hidden;
-
-        &:first-child {
-          margin-top: 0px;
+        .lr-box {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          // overflow: hidden;
+          z-index: 9999;
+          pointer-events: auto;
+          overflow-y: auto;
+          overflow-x: hidden;
+          height: calc(100% - 70px);
         }
 
-        .base-title {
-          color: #fff;
-          margin-bottom: 8px;
-          padding-left: 10px;
+        .item {
+          width: 285px;
+          height: auto;
           position: relative;
-          font-size: 16px;
-
-          &::after {
-            content: '';
-            position: absolute;
-            display: block;
-            width: 4px;
-            height: 12px;
-            top: 7px;
-            left: 0px;
-            background: #45d3fd;
-            border-radius: 4px;
+          border-radius: 5px;
+          margin-top: 10px;
+          margin-bottom: 0px;
+          pointer-events: auto;
+          color: #fff;
+          // overflow: hidden;
+
+          &:first-child {
+            margin-top: 0px;
           }
-        }
-        .monitor-item{
-          width: 100%;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          .state-item {
-            width: 50%;
-            padding: 5px;
+
+          .base-title {
+            color: #fff;
+            margin-bottom: 8px;
+            padding-left: 10px;
+            position: relative;
+            font-size: 16px;
+
+            &::after {
+              content: '';
+              position: absolute;
+              display: block;
+              width: 4px;
+              height: 12px;
+              top: 7px;
+              left: 0px;
+              background: #45d3fd;
+              border-radius: 4px;
+            }
+          }
+          .monitor-item {
+            width: 100%;
             display: flex;
-             align-items: center;
-             justify-content: space-between;
-            .state-title {
-              width: 100px;
-              color: #ffffffdd;
-              flex: 9;
-              font-size: 14px;
-              .unit {
-                // color: #ffffffbb;
+            flex-direction: row;
+            flex-wrap: wrap;
+            .state-item {
+              width: 50%;
+              padding: 5px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .state-title {
+                width: 100px;
+                color: #ffffffdd;
+                flex: 9;
+                font-size: 14px;
+                .unit {
+                  // color: #ffffffbb;
+                }
+              }
+              .state-val {
+                flex: 1;
+                color: #e4a300;
+                margin-right: 5px;
+                text-align: right;
+                font-size: 14px;
               }
-            }
-            .state-val {
-              flex: 1;
-              color: #e4a300;
-              margin-right: 5px;
-              text-align: right;
-              font-size: 14px;
             }
           }
 
-        }
-        
-        .signal-box {
-          margin: 5px 0;
-          display: flex;
-          align-items: center;
+          .signal-box {
+            margin: 5px 0;
+            display: flex;
+            align-items: center;
 
-          .signal-title {
-            color: #7af5ff;
-            margin: 0 5px;
-          }
+            .signal-title {
+              color: #7af5ff;
+              margin: 0 5px;
+            }
 
-          &:last-child {
-            margin-right: 0px;
+            &:last-child {
+              margin-right: 0px;
+            }
           }
-        }
 
-        .list-item {
-          padding: 0 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+          .list-item {
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
 
-          .item-data-key {
-            color: #ffffff99;
+            .item-data-key {
+              color: #ffffff99;
+            }
           }
-        }
 
-        .item-data-box {
-          color: #fff;
+          .item-data-box {
+            color: #fff;
 
-          .state-icon {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            border-radius: 12px;
-          }
+            .state-icon {
+              display: inline-block;
+              width: 12px;
+              height: 12px;
+              border-radius: 12px;
+            }
 
-          .open {
-            border: 5px solid #133a56;
-            background: #4ecb73;
-          }
+            .open {
+              border: 5px solid #133a56;
+              background: #4ecb73;
+            }
 
-          .close {
-            border: 5px solid #192961;
-            background: #6d7898;
+            .close {
+              border: 5px solid #192961;
+              background: #6d7898;
+            }
           }
         }
-      }
-
-      .item-l {
-        width: 100%;
 
-        .monitor-box {
+        .item-l {
           width: 100%;
 
-          .parameter-title {
-            position: relative;
+          .monitor-box {
             width: 100%;
-            height: 14px;
-            margin-top: 10px;
 
-            .icon,
-            span {
-              position: absolute;
-              top: -10px;
+            .parameter-title {
+              position: relative;
+              width: 100%;
+              height: 14px;
+              margin-top: 10px;
+
+              .icon,
+              span {
+                position: absolute;
+                top: -10px;
+              }
             }
-          }
 
-          .group-parameter-title {
-            background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+            .group-parameter-title {
+              background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
 
-            .icon {
-              left: -12px;
-              top: -17px;
-            }
+              .icon {
+                left: -12px;
+                top: -17px;
+              }
 
-            span {
-              left: 18px;
-            }
+              span {
+                left: 18px;
+              }
 
-            .item-col {
-              background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+              .item-col {
+                background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+              }
             }
-          }
 
-          .device-parameter-title {
-            background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+            .device-parameter-title {
+              background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
 
-            .icon {
-              left: -10px;
-              top: -14px;
-            }
+              .icon {
+                left: -10px;
+                top: -14px;
+              }
 
-            span {
-              left: 18px;
-            }
+              span {
+                left: 18px;
+              }
 
-            .item-col {
-              background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
+              .item-col {
+                background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
+              }
             }
           }
         }
-      }
 
-      .right-box {
-        width: 330px;
-        margin-top: 50px;
+        .right-box {
+          width: 330px;
+          margin-top: 50px;
 
-        .control-group {
-          display: flex;
-          // justify-content: space-around;
-          flex-wrap: wrap;
-
-          .control-item {
-            width: 50%; //lxh
+          .control-group {
             display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            padding: 0 4px;
-
-            .control-item-title {
-              color: #a6dce9;
-              position: relative;
-              top: 5px;
-            }
+            // justify-content: space-around;
+            flex-wrap: wrap;
 
-            .control-item-state {
-              width: 94px;
-              height: 47px;
-              background: url('/@/assets/images/vent/control-switch-bg.png');
+            .control-item {
+              width: 50%; //lxh
               display: flex;
+              flex-direction: column;
               justify-content: center;
               align-items: center;
-              color: #fff;
-            }
+              padding: 0 4px;
 
-            .button-box {
-              position: relative;
-              padding: 5px;
-              border: 1px transparent solid;
-              background-clip: border-box;
-              border-radius: 5px;
-              margin-left: 8px;
-            }
+              .control-item-title {
+                color: #a6dce9;
+                position: relative;
+                top: 5px;
+              }
 
-            .a-button {
-              pointer-events: auto;
-            }
+              .control-item-state {
+                width: 94px;
+                height: 47px;
+                background: url('/@/assets/images/vent/control-switch-bg.png');
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #fff;
+              }
 
-            &::v-deep .a-button--mini {
-              padding: 6px 10px;
-            }
+              .button-box {
+                position: relative;
+                padding: 5px;
+                border: 1px transparent solid;
+                background-clip: border-box;
+                border-radius: 5px;
+                margin-left: 8px;
+              }
+
+              .a-button {
+                pointer-events: auto;
+              }
+
+              &::v-deep .a-button--mini {
+                padding: 6px 10px;
+              }
 
-            &::v-deep .a-button--mini.is-round {
-              padding: 6px 10px;
+              &::v-deep .a-button--mini.is-round {
+                padding: 6px 10px;
+              }
             }
           }
         }
-      }
 
-      .left-box {
-        width: 335px;
-        margin-top: 80px;
+        .left-box {
+          width: 335px;
+          margin-top: 80px;
+        }
       }
-    }
 
-    &:deep(.win) {
-      width: 100%;
-      margin: 0 !important;
+      &:deep(.win) {
+        width: 100%;
+        margin: 0 !important;
+      }
     }
   }
-}
-
-&:deep(.main) {
-  .title {
-    height: 34px;
-    text-align: center;
-    font-weight: 600;
-    color: #7af5ff;
-    // background-image: url('../../../assets/img/yfj/light.png');
-    background-repeat: no-repeat;
-    background-position-x: center;
-    background-position-y: 100%;
-    background-size: 80%;
-    font-size: 16px;
-  }
 
-  .monitor-item {
-    width: 200px;
-    display: flex;
-    flex-direction: row;
-    width: auto;
-    margin-bottom: 3px;
+  &: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-val {
-      color: #ffb700;
+    .monitor-item {
+      width: 200px;
       display: flex;
+      flex-direction: row;
       width: auto;
+      margin-bottom: 3px;
 
-      .val {
-        width: 80px;
-        font-size: 14px;
-      }
+      .monitor-val {
+        color: #ffb700;
+        display: flex;
+        width: auto;
 
-      .unit {
-        color: #ffffffbb;
-        font-size: 14px;
+        .val {
+          width: 80px;
+          font-size: 14px;
+        }
+
+        .unit {
+          color: #ffffffbb;
+          font-size: 14px;
+        }
       }
     }
-  }
 
-  .monitor-title {
-    width: 100px;
-    color: #7af5ff;
-    font-weight: 400;
-    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;
+    .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;
+      .signal-round-gry {
+        background-color: #858585;
 
-      &::after {
-        background-color: #85858544;
-        box-shadow: 0 0 1px 1px #85858599;
+        &::after {
+          background-color: #85858544;
+          box-shadow: 0 0 1px 1px #85858599;
+        }
       }
-    }
 
-    .signal-round-run {
-      background-color: #67fc00;
+      .signal-round-run {
+        background-color: #67fc00;
 
-      &::after {
-        background-color: #67fc0044;
-        box-shadow: 0 0 1px 1px #c6ff77;
+        &::after {
+          background-color: #67fc0044;
+          box-shadow: 0 0 1px 1px #c6ff77;
+        }
       }
-    }
 
-    .signal-round-warning {
-      background-color: #e9170b;
+      .signal-round-warning {
+        background-color: #e9170b;
 
-      &::after {
-        background-color: #e9170b44;
-        box-shadow: 0 0 1px 1px #e9170b;
+        &::after {
+          background-color: #e9170b44;
+          box-shadow: 0 0 1px 1px #e9170b;
+        }
       }
     }
   }
-}
 
-:deep(.zxm-radio-wrapper) {
-  color: #fff !important;
-}
+  :deep(.zxm-radio-wrapper) {
+    color: #fff !important;
+  }
 </style>

src/views/vent/monitorManager/compressor/components/nitrogenHome_dltj.vue

@@ -189,6 +189,8 @@
   import { useCamera } from '/@/hooks/system/useCamera';
   import { message } from 'ant-design-vue';
   import lodash from 'lodash';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+
   const globalConfig = inject('globalConfig');
 
   const props = defineProps({
@@ -241,20 +243,22 @@
 
   let airCompressorState = reactive<any[]>([]);
 
-  const chartsColumns = ref([
-    {
-      legend: '瞬时流量',
-      seriesName: '(m³/h)',
-      ymax: 2000,
-      yname: 'm³/h',
-      linetype: 'line',
-      yaxispos: 'left',
-      color: '#FDB146',
-      sort: 1,
-      xRotate: 0,
-      dataIndex: 'InputFlux',
-    },
-  ]);
+  // const chartsColumns = ref([
+  //   {
+  //     legend: '瞬时流量',
+  //     seriesName: '(m³/h)',
+  //     ymax: 2000,
+  //     yname: 'm³/h',
+  //     linetype: 'line',
+  //     yaxispos: 'left',
+  //     color: '#FDB146',
+  //     sort: 1,
+  //     xRotate: 0,
+  //     dataIndex: 'InputFlux',
+  //   },
+  // ]);
+  const chartsColumns = ref(getTableHeaderColumns('sys_nitrogen_chart'));
+
   const { getCamera, removeCamera } = useCamera();
 
   const monitorData = ref({});
@@ -584,6 +588,7 @@
         airCompressor[`FluxTotal`] = monitorData.value['FluxTotal'] || 0;
       } else {
         airCompressor[`InputFlux`] = Number(monitorData.value['InputFlux1']) + Number(monitorData.value['InputFlux2']) || null;
+        if (!airCompressor[`InputFlux`]) airCompressor[`InputFlux`] = monitorData.value['InputFlux'];
         monitorData.value['RunTime31'] = (Number(monitorData.value['RunTime31']) / 24).toFixed(0);
         monitorData.value['RunTime41'] = (Number(monitorData.value['RunTime41']) / 24).toFixed(0);
         monitorData.value['RunTime32'] = (Number(monitorData.value['RunTime32']) / 24).toFixed(0);

src/views/vent/monitorManager/compressor/components/nitrogenHome_ln.vue

@@ -146,6 +146,7 @@
   import { useCamera } from '/@/hooks/system/useCamera';
   import { message } from 'ant-design-vue';
   import lodash from 'lodash';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 
   const globalConfig = inject('globalConfig');
 
@@ -195,20 +196,7 @@
 
   let airCompressorState = reactive<any[]>([]);
 
-  const chartsColumns = ref([
-    {
-      legend: '氮气流量',
-      seriesName: '(m³/h)',
-      ymax: 1000,
-      yname: 'm³/h',
-      linetype: 'line',
-      yaxispos: 'left',
-      color: '#FDB146',
-      sort: 1,
-      xRotate: 0,
-      dataIndex: 'nitrogen_flow_rate',
-    },
-  ]);
+  const chartsColumns = ref(getTableHeaderColumns('sys_nitrogen_chart'));
   const { getCamera, webRtcServer } = useCamera();
 
   const monitorData = reactive<any[]>([]);

src/views/vent/monitorManager/compressor/components/nitrogenHome_lt.vue

@@ -99,6 +99,7 @@
   import { formatNum } from '/@/utils/ventutil';
   import { useCamera } from '/@/hooks/system/useCamera';
   import lodash from 'lodash';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 
   const props = defineProps({
     deviceId: {
@@ -134,20 +135,8 @@
 
   const monitorDataGroupNum = ref(1);
 
-  const chartsColumns = ref([
-    {
-      legend: '瞬时流量',
-      seriesName: '(m³/h)',
-      ymax: 2000,
-      yname: 'm³/h',
-      linetype: 'line',
-      yaxispos: 'left',
-      color: '#FDB146',
-      sort: 1,
-      xRotate: 0,
-      dataIndex: 'InputFlux',
-    },
-  ]);
+  const chartsColumns = ref(getTableHeaderColumns('sys_nitrogen_chart'));
+
   const { getCamera, removeCamera } = useCamera();
 
   const monitorData = ref({});

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

@@ -215,7 +215,7 @@ export function getMonitorComponent() {
   // const sysOrgCode = 'sdmtjtbdmk';
   let nitrogenHome;
   switch (sysOrgCode) {
-    case 'sdmtjtdltmk': //dltj
+    case 'sdmtjtdltmk': //dltj sdmtjtdltmk
       nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_dltj.vue'));
       return nitrogenHome;
     case 'sdmtjtltmk':

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -287,6 +287,10 @@
                     <a-tag v-if="column.dataIndex === 'stateConn' && record.stateConn == '1'" color="green">连接</a-tag>
                     <a-tag v-if="column.dataIndex === 'stateConn' && record.stateConn == '0'" color="red">断开</a-tag>
                   </template>
+                  <template v-else-if="deviceType.startsWith('gaspatrol')">
+                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('正常')" color="green">{{record.deviceConnect_str}}</a-tag>
+                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('断开')" color="red">{{record.deviceConnect_str}}</a-tag>
+                  </template>
                   <a-tag v-if="column.dataIndex === 'warnFlag'"
                     :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
                     {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'

src/views/vent/monitorManager/gateMonitor/gate.threejs.two.ss.ts

@@ -519,11 +519,22 @@ class FmTwoSs {
     }
   }
 
+  resetModal() {
+    const wireGroup = this.group?.getObjectByName('fmTwoSs-wire');
+    if (wireGroup) {
+      const screenObj1 = wireGroup.getObjectByName('对象192');
+      if (screenObj1) screenObj1.visible = false;
+      const screenObj2 = wireGroup.getObjectByName('对象231');
+      if (screenObj2) screenObj2.visible = false;
+    }
+  }
+
   mountedThree(playerDom) {
     this.group = new THREE.Object3D();
     this.group.name = this.modelName;
     return new Promise((resolve) => {
       this.model.setGLTFModel(['fmTwoSs-door', 'fmTwoSs-wall', 'fmTwoSs-wire'], this.group).then(() => {
+        this.resetModal();
         this.setModalPosition();
         // 初始化左右摇摆动画;
         this.initAnimation();

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

@@ -250,6 +250,9 @@
       </div>
     </div>
     <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll, 170)">
+      <!-- 摄像头显示隐藏图标 -->
+      <VideoCameraOutlined class="video-icon" :class="{ 'no-play': !showPlay }" @click="changePlay" />
+
       <!-- 保德视频及系统外界，保德特有 -->
       <div v-if="sysOrgCode === 'sdmtjtbdmk'" class="bd-control">
         <div class="button-box" @click="goOutLink('1')">视频查看</div>
@@ -348,8 +351,7 @@
   <div style="z-index: -1; position: absolute; top: -100px; right: 10px; width: 300px; height: 280px; margin: auto" class="palyer">
     <LivePlayer id="main-player1" ref="player1" :videoUrl="flvURL1()" muted loop loading controls />
   </div>
-  <!-- 摄像头显示隐藏图标 -->
-  <VideoCameraOutlined class="video-icon" :class="{ 'no-play': !showPlay }" @click="changePlay" />
+
   <div
     v-show="showPlay"
     ref="playerRef"
@@ -1543,7 +1545,7 @@
     width: 30px;
     height: 38px;
     position: absolute;
-    top: 605px;
+    top: -40px;
     right: 390px;
     color: #fff;
     z-index: 99999;

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

@@ -1,5 +1,4 @@
 <template>
-  <customHeader>传感器监测</customHeader>
   <div class="sensor-container">
     <a-spin :spinning="loading">
       <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
@@ -87,9 +86,9 @@
           </div>
         </a-tab-pane> -->
       </a-tabs>
-      <!-- <div class="title-text">
+      <div class="title-text">
         {{ selectData.strinstallpos || selectData.strname }}
-      </div> -->
+      </div>
     </a-spin>
   </div>
 </template>