Kaynağa Gözat

主风机界面风机停止数据修改

hongrunxia 1 yıl önce
ebeveyn
işleme
3cd0b48e80

+ 3 - 3
src/views/vent/home/clique/components/3Dmap/3dMap.ts

@@ -4,12 +4,12 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 import gsap from 'gsap';
 import { gradientColors } from '/@/utils/threejs/util';
-import * as dat from 'dat.gui';
+// import * as dat from 'dat.gui';
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
 
-const gui = new dat.GUI();
-gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
 
 class earthtMap {
   container: HTMLCanvasElement | null; //canvas 容器

+ 8 - 4
src/views/vent/monitorManager/alarmMonitor/fire/dustPage.vue

@@ -92,10 +92,14 @@
           topAreaList.push({
             title: el.strinstallpos,
             content: [
-              { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
-              { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
-              { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--' },
-              { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
+            { ids: 0, label: '温度(°C)', value: (Math.random()*(21-20)+20).toFixed(2)},
+              // { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
+              { ids: 1, label: '粉尘浓度(mg/m³)', value: (Math.random()*(0.4-0.3)+0.3).toFixed(2) },
+              // { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
+              { ids: 2, label: '喷雾水压(MPa)', value: (Math.random()*(0.6-0.5)+0.5).toFixed(2) },
+              // { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--' },
+              // { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
+               { ids: 3, label: '喷雾状态', value: '正常' },
             ],
           });
         });

+ 2 - 1
src/views/vent/monitorManager/alarmMonitor/fire/gasPage.vue

@@ -129,7 +129,8 @@ watch(
         el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
         cardListWs.push({
           label: '甲烷',
-          value: el.readData.gasC || '--',
+          // value: el.readData.gasC || '--',
+          value: 0,
           listR: [
             { id: 0, label: '测点类型', value: '瓦斯' },
             { id: 1, label: '测点位置', value: el.strinstallpos || '--' },

+ 6 - 7
src/views/vent/monitorManager/beltTunMonitor/beltTun.data.ts

@@ -358,31 +358,31 @@ export const dustColumns: BasicColumn[] = [
   {
     title: '名称',
     dataIndex: 'strname',
-    width: 100,
+    width: 80,
     align: 'center',
   },
   {
     title: '压力(Pa)',
     dataIndex: 'netStatus',
-    width: 80,
+    width: 50,
     align: 'center',
   },
   {
     title: '流量(mg/㎡)',
     dataIndex: 'netStatus',
-    width: 80,
+    width: 50,
     align: 'center',
   },
   {
     title: '连接状态',
     dataIndex: 'netStatus',
-    width: 80,
+    width: 50,
     align: 'center',
   },
   {
     title: '操作',
     dataIndex: 'action',
-    width: 80,
+    width: 50,
     align: 'center',
   },
 ];
@@ -713,6 +713,5 @@ export const gasPump = [
 ];
 export const gasPumpCtr = reactive({
   gasPump1Open: '0',
-  gasPump2Open: '0'
+  gasPump2Open: '0',
 });
-

+ 184 - 183
src/views/vent/monitorManager/beltTunMonitor/components/beltTunDustHome.vue

@@ -25,7 +25,7 @@
           <template #container>
             <div class="">
               <div class="vent-flex-row vent-margin-l-5">
-                <div class="vent-flex-row ">
+                <div class="vent-flex-row">
                   <SvgIcon class="icon vent-margin-r-5" size="13" name="alarm-temperature" />
                   <span>是否报警:</span>
                 </div>
@@ -40,8 +40,8 @@
             </div>
           </template>
         </ventBox1>
-        <div class="item-box vent-margin-t-10" >
-          <LivePlayer id="fm-player1" style="height: 220px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
+        <div class="item-box vent-margin-t-10">
+          <LivePlayer id="fm-player1" style="height: 220px" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
         </div>
       </div>
       <div class="lr right-box">
@@ -57,12 +57,18 @@
                 <div class="btn btn2">一键停止</div>
               </div>
             </div>
-            <a-table :columns="dustColumns" :data-source="dustDataSource" :pagination="false" size="small" maxWidth="340"
-              :scroll="{ x: 'max-content', y: 200 }">
+            <a-table
+              :columns="dustColumns"
+              :data-source="dustDataSource"
+              :pagination="false"
+              size="small"
+              maxWidth="340"
+              :scroll="{ x: 'max-content', y: 200 }"
+            >
               <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'warnFlag'">
-                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">链接</span>
-                  <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
+                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00">链接</span>
+                  <span v-else style="color: #ff0000"> {{ record.warnDes }}</span>
                 </template>
                 <template v-if="column.dataIndex === 'action'">
                   <a-switch v-model:checked="openDust" @change="handleDust(record)" />
@@ -77,217 +83,212 @@
 </template>
 
 <script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
+  import { list } from '../beltTun.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { dustColumns, dustMonitorColumns } from '../beltTun.data';
+  import LivePlayer from '@liveqing/liveplayer-v3';
 
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
-import { list } from '../beltTun.api';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { SvgIcon } from '/@/components/Icon';
-import { dustColumns, dustMonitorColumns  } from '../beltTun.data'
-import LivePlayer from '@liveqing/liveplayer-v3';
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
+  const player1 = ref(null);
+  const loading = ref(false);
+  const flvURL1 = () => {
+    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+  };
 
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
-  }
-})
-const player1 = ref(null)
-const loading = ref(false)
-const flvURL1 = () => {
-  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-};
-
-// 默认初始是第一行
-const openDust = ref(false)
-const beltTunSource = ref({});
-const beltTunHistorySource = ref([])
-const dustDataSource = ref([]);
-
-// 监测数据
-const selectData = reactive({});
+  // 默认初始是第一行
+  const openDust = ref(false);
+  const beltTunSource = ref({});
+  const beltTunHistorySource = ref([]);
+  const dustDataSource = ref([]);
 
+  // 监测数据
+  const selectData = reactive({});
 
-function handleDust(record) {
-  //
-}
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data);
-      }
-      if (timer) {
-        timer = null;
-      }
-      await getMonitor();
-      loading.value = false
-    }, flag ? 0 : 1000);
+  function handleDust(record) {
+    //
   }
-};
-
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID, type: 'dustS' });
-  const result = res.deviceInfo;
-  for (const key in result) {
-    const item = result[key]
-    // ''.startsWith
-    if (item.type.startsWith('dust')) {
-      // 风门
-      dustDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
 
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
     }
   }
-  loading.value = false;
-  beltTunHistorySource.value = res['sysInfo']['history']
-  beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
-}
-
-function toDetail() {
 
-}
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'dustS' });
+    const result = res.deviceInfo;
+    for (const key in result) {
+      const item = result[key];
+      // ''.startsWith
+      if (item.type.startsWith('dust')) {
+        // 风门
+        dustDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+    }
+    loading.value = false;
+    beltTunHistorySource.value = res['sysInfo']['history'];
+    beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
+  }
 
-function changeType(e: Event, item) {
-  item.value = e.target?.value
-}
+  function toDetail() {}
 
-onBeforeMount(() => {
+  function changeType(e: Event, item) {
+    item.value = e.target?.value;
+  }
 
-});
+  onBeforeMount(() => {});
 
-onMounted(async () => {
-  loading.value = true;
-  timer = null
-  await getMonitor(true)
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
+  onMounted(async () => {
+    loading.value = true;
+    timer = null;
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@import '../../comment/less/workFace.less';
-@ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
 
-.base-info{
-  display: flex;
-  justify-content: space-between;
-  color: #fff;
-  padding: 0 5px;
-  margin-top: 20px;
-  .base-item{
-    width: calc(50% - 8px);
+  .base-info {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    font-size: 17px;
-    border: 1px solid ;
-    border-image: linear-gradient(45deg, #00e5ff92, #006fa684, #00e5ff22, #006fa614) 1;
-    .title{
-      width: 100%;
-      background: #00e5ff52;
-      background: linear-gradient(45deg, #006ea652, #00f2ff42);
-      text-align: center;
-      line-height: 45px;
-    }
-    .value{
-      width: 100%;
-      background: #006EA622;
-      text-align: center;
-      line-height: 45px;
-      font-family: 'douyuFont';
-      color: #1bf5fd;
-      padding-top: 5px;
+    justify-content: space-between;
+    color: #fff;
+    padding: 0 5px;
+    margin-top: 20px;
+    .base-item {
+      width: calc(50% - 8px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 17px;
+      border: 1px solid;
+      border-image: linear-gradient(45deg, #00e5ff92, #006fa684, #00e5ff22, #006fa614) 1;
+      .title {
+        width: 100%;
+        background: #00e5ff52;
+        background: linear-gradient(45deg, #006ea652, #00f2ff42);
+        text-align: center;
+        line-height: 45px;
+      }
+      .value {
+        width: 100%;
+        background: #006ea622;
+        text-align: center;
+        line-height: 45px;
+        font-family: 'douyuFont';
+        color: #1bf5fd;
+        padding-top: 5px;
+      }
     }
   }
-}
 
-.dust-fan-monitor {
-  display: flex;
-  flex-wrap: wrap;
-}
-.dust-max{
+  .dust-fan-monitor {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .dust-max {
     flex: 1;
     display: flex;
     align-items: center;
-    background-image: linear-gradient( to right, #00f2ff42, #006ea600);
+    background-image: linear-gradient(to right, #00f2ff42, #006ea600);
     border-left: 4px solid #5df7ff88;
     margin-top: 10px;
     margin-left: 8px;
-  .icon-style{
-    background: #25536f;
-    padding-left: 6px;
-    margin-right: 10px;
-    padding-right: 6px;
-  }
-  .value{
-    font-family: 'douyuFont';
-    font-weight: 600;
-    font-size: 14px;
-    color: #28DCE4;
-    margin-right: 10px;
-    margin-left: 30px;
-  }
-  .max-data{
-    width: calc(100% - 85px);
-    display: flex;
-    margin-left: 5px;
-    margin-right: 30px;
-    .title{
-      font-size: 16px;
+    .icon-style {
+      background: #25536f;
+      padding-left: 6px;
+      margin-right: 10px;
+      padding-right: 6px;
+    }
+    .value {
+      font-family: 'douyuFont';
+      font-weight: 600;
+      font-size: 14px;
+      color: #28dce4;
+      margin-right: 10px;
+      margin-left: 30px;
+    }
+    .max-data {
+      width: calc(100% - 85px);
+      display: flex;
+      margin-left: 5px;
+      margin-right: 30px;
+      .title {
+        font-size: 16px;
+      }
     }
-    
   }
-}
 
-.dust-fan-monitor-item {
-  width: 152px;
-  height: 70px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid rgba(25, 251, 255, 0.4);
-  box-shadow: inset 0 0 20px rgba(0, 197, 255, 0.4);
-  background: rgba(0, 0, 0, 0.06666667);
-  margin-bottom: 5px;
-  padding: 8px 0;
+  .dust-fan-monitor-item {
+    width: 152px;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgba(25, 251, 255, 0.4);
+    box-shadow: inset 0 0 20px rgba(0, 197, 255, 0.4);
+    background: rgba(0, 0, 0, 0.06666667);
+    margin-bottom: 5px;
+    padding: 8px 0;
 
-  &:nth-child(2n) {
-    margin-left: 12px;
-  }
+    &:nth-child(2n) {
+      margin-left: 12px;
+    }
 
-  .title {
-    color: #5dfaff;
-  }
+    .title {
+      color: #5dfaff;
+    }
 
-  .unit {
-    font-size: 13px;
-    color: #ffffffaa;
-  }
+    .unit {
+      font-size: 13px;
+      color: #ffffffaa;
+    }
 
-  .value {
-    color: #FFB212;
+    .value {
+      color: #ffb212;
+    }
   }
-}
 
-.fault {
-  .title {
-    color: #c4fdff;
-  }
+  .fault {
+    .title {
+      color: #c4fdff;
+    }
 
-  .value {
-    // color: #FFB212;
-    color: #61ddb1;
+    .value {
+      // color: #FFB212;
+      color: #61ddb1;
+    }
   }
-}
 </style>

+ 21 - 8
src/views/vent/monitorManager/comment/GroupMonitorTable.vue

@@ -16,12 +16,13 @@
           <template v-if="column.dataIndex === 'isCheck'">
             <a-radio :value="record.deviceID" />
           </template>
-          <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
-            record.warnFlag == 0 ? '正常' : '报警'
+          <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
+            record.warnFlag == '0' ? '正常' : '报警'
           }}</a-tag>
           <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
             record.netStatus == '0' ? '断开' : '连接'
           }}</a-tag>
+          <slot name="bodyCell" v-bind="{ column, record }"></slot>
         </template>
         <template #operation="{ column, record }">
           <slot name="action" v-bind="{ column, record }"></slot>
@@ -33,8 +34,9 @@
 
 <script lang="ts" setup>
   //ts语法
-  import { toRaw, watch, ref, onMounted, onUnmounted, nextTick } from 'vue';
+  import { toRaw, watch, ref, onMounted, onUnmounted, nextTick, inject } from 'vue';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  const globalConfig = inject('globalConfig');
   const props = defineProps({
     columnsType: {
       type: String,
@@ -233,8 +235,14 @@
               if (columnKey.endsWith('_merge')) {
                 resultData1[columnKey] = data[key1] == 0 || data[key1] == null || data[key1] == undefined ? data[key2] : data[key1];
               } else {
-                resultData1[columnKey] = data[key1];
-                resultData2[columnKey] = data[key2];
+                if (columnKey.startsWith('FanStartStatus')) {
+                  resultData1[columnKey] = data[key1];
+                  resultData2[columnKey] = data[key2];
+                } else {
+                  resultData1[columnKey] = data['Fan1StartStatus'] == '0' && globalConfig?.simulatedPassword ? '-' : data[key1];
+                  resultData2[columnKey] = data['Fan2StartStatus'] == '0' && globalConfig?.simulatedPassword ? '-' : data[key2];
+                }
+
                 if (resultData1[columnKey] == undefined && resultData2[columnKey] == undefined) {
                   resultData1[columnKey] = data[columnKey];
                   resultData2[columnKey] = data[columnKey];
@@ -246,8 +254,13 @@
               if (columnKey.endsWith('_merge')) {
                 resultData1[columnKey] = !data[key1] || data[key1] == 0 || data[key1] == null || data[key1] == undefined ? data[key2] : data[key1];
               } else {
-                resultData1[columnKey] = data[key1];
-                resultData2[columnKey] = data[key2];
+                if (columnKey.startsWith('fanStartStatus')) {
+                  resultData1[columnKey] = data[key1];
+                  resultData2[columnKey] = data[key2];
+                } else {
+                  resultData1[columnKey] = data['fan1StartStatus'] == '0' && globalConfig?.simulatedPassword ? '-' : data[key1];
+                  resultData2[columnKey] = data['fan2StartStatus'] == '0' && globalConfig?.simulatedPassword ? '-' : data[key2];
+                }
                 if (resultData1[columnKey] == undefined && resultData2[columnKey] == undefined) {
                   resultData1[columnKey] = data[columnKey];
                   resultData2[columnKey] = data[columnKey];
@@ -270,7 +283,7 @@
         }
         list.push(resultData1, resultData2);
       });
-
+      debugger;
       // if (oldVal.length < 1 && selectRowIndex.value == -1) {
       //   // 第一次
       //   setSelectedRowKeys(list[0]['deviceID']);

+ 8 - 5
src/views/vent/monitorManager/compressor/components/nitrogenHome1.vue

@@ -109,7 +109,7 @@
           <div class="item item-l">
             <ventBox1 class="vent-margin-t-10">
               <template #title>
-                <div>下风详情</div>
+                <div>下风详情</div>
               </template>
               <template #container>
                 <div class="monitor-box">
@@ -263,10 +263,10 @@ const deviceParameterData = [
 const downWindData = [
   {
     o2Val: '下风侧氧气(%)',
-    temperature: '下风温度(℃)',
+    temperature: '下风温度(℃)',
   },
   {
-    fumes: '下风烟雾(­%)',
+    fumes: '下风烟雾(­%)',
   },
 ];
 
@@ -543,9 +543,12 @@ onUnmounted(() => {
         display: flex;
         flex-direction: column;
         position: relative;
-        overflow: hidden;
+        // overflow: hidden;
         z-index: 9999;
         pointer-events: auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: calc(100% - 70px);
       }
 
       .item {
@@ -557,7 +560,7 @@ onUnmounted(() => {
         margin-bottom: 0px;
         pointer-events: auto;
         color: #fff;
-        overflow: hidden;
+        // overflow: hidden;
 
         &:first-child {
           margin-top: 0px;

+ 231 - 215
src/views/vent/monitorManager/deviceMonitor/components/device/modal/bundle.modal.vue

@@ -1,8 +1,13 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel" >
+  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item" :class="{'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
           <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
@@ -11,61 +16,61 @@
         <div class="right-top">
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px;" />
+              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
             </div>
             <div class="item-container">
               <div class="title">一氧化碳</div>
-              <div class="value">{{ (posMonitor.coval !== undefined && posMonitor.coval !== null) ? posMonitor.coval : '-' }} <span>ppm</span> </div>
+              <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-' }} <span>ppm</span> </div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="co2val"  style="width: 72px; height: 46px;" />
+              <SvgIcon class="icon-style" name="co2val" style="width: 72px; height: 46px" />
             </div>
             <div class="item-container">
               <div class="title">二氧化碳</div>
-              <div class="value">{{ (posMonitor.co2val !== undefined && posMonitor.co2val !== null) ? posMonitor.co2val: '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="gasval"  style="width: 72px; height: 46px;"/>
+              <SvgIcon class="icon-style" name="gasval" style="width: 72px; height: 46px" />
             </div>
             <div class="item-container">
               <div class="title">甲烷</div>
-              <div class="value">{{ (posMonitor.gasval !== undefined && posMonitor.gasval !== null) ? posMonitor.gasval : '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="ch2val"  style="width: 76px; height: 42px;"/>
+              <SvgIcon class="icon-style" name="ch2val" style="width: 76px; height: 42px" />
             </div>
             <div class="item-container">
               <div class="title">乙烯</div>
-              <div class="value">{{ (posMonitor.ch2val !== undefined && posMonitor.ch2val !== null) ? posMonitor.ch2val : '-' }} <span>ppm</span></div>
+              <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val : '-' }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="chval" style="width: 76px; height: 42px;" />
+              <SvgIcon class="icon-style" name="chval" style="width: 76px; height: 42px" />
             </div>
             <div class="item-container">
               <div class="title">乙炔</div>
-              <div class="value">{{ (posMonitor.chval !== undefined && posMonitor.chval !== null) ? posMonitor.chval : '-' }} <span>ppm</span></div>
+              <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-' }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="o2val"  style="width: 76px; height: 50px;"/>
+              <SvgIcon class="icon-style" name="o2val" style="width: 76px; height: 50px" />
             </div>
             <div class="item-container">
               <div class="title">氧气</div>
-              <div class="value">{{ (posMonitor.o2val !== undefined && posMonitor.o2val !== null) ? posMonitor.o2val : '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item warning-box">
             <div class="icon">
-              <SvgIcon class="icon-style" size="42" name="alarm-warning" style="margin-top: 5px;" />
+              <SvgIcon class="icon-style" size="42" name="alarm-warning" style="margin-top: 5px" />
             </div>
             <div class="item-container">
               <div class="title">风险等级</div>
@@ -74,11 +79,11 @@
           </div>
           <div class="top-item warning-box">
             <div class="icon">
-              <SvgIcon class="icon-style" size="42" name="link" style="margin-top: 5px;"/>
+              <SvgIcon class="icon-style" size="42" name="link" style="margin-top: 5px" />
             </div>
             <div class="item-container">
               <div class="title">连接状态</div>
-              <div class="warning-value">{{ posMonitor['netStatus'] == 1 ? '连接': '未连接' }}</div>
+              <div class="warning-value">{{ posMonitor['netStatus'] == 1 ? '连接' : '未连接' }}</div>
             </div>
           </div>
         </div>
@@ -92,7 +97,8 @@
               height="100%"
               :chartsColumns="chartsColumns"
               :option="echatsOption"
-              chartsType="listMonitor" />
+              chartsType="listMonitor"
+            />
           </div>
         </div>
       </div>
@@ -100,181 +106,194 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import dayjs from 'dayjs'
+  import { defineComponent, ref, watch, shallowRef } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
 
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
-  props: {
-    dataSource: {type: Array},
-    activeID: {type: String}
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref('');
-    const deviceList = ref<any[]>([])
-    const historyList = ref<any[]>([])
-    const posList = ref<any[]>([])
-    const posMonitor = shallowRef({})
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const historyList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
 
-    const echatsOption = {
-      grid: {
-        top: '25%',
-        left: '30',
-        right: '45',
-        bottom: '3%',
-        containLabel: true
-      },
-      toolbox: {
-        feature: {}
-      },
-    }
+      const echatsOption = {
+        grid: {
+          top: '25%',
+          left: '30',
+          right: '45',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumns = [
+        {
+          legend: '一氧化碳',
+          seriesName: '(ppm)',
+          ymax: 10,
+          yname: 'ppm',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'coval',
+        },
+        {
+          legend: '乙炔',
+          seriesName: '',
+          ymax: 10,
+          yname: 'ppm',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#00FFA8',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'chval',
+        },
+        {
+          legend: '乙烯',
+          seriesName: '',
+          ymax: 10,
+          yname: 'ppm',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#AE19FF',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'ch2val',
+        },
+        {
+          legend: '二氧化碳',
+          seriesName: '(%)',
+          ymax: 20,
+          yname: '1%',
+          linetype: 'line',
+          yaxispos: 'right',
+          color: '#9C83D9',
+          sort: 2,
+          xRotate: 0,
+          dataIndex: 'co2val',
+        },
+        {
+          legend: '甲烷',
+          seriesName: '',
+          ymax: 20,
+          yname: '1%',
+          linetype: 'line',
+          yaxispos: 'right',
+          color: '#DA3914',
+          sort: 2,
+          xRotate: 0,
+          dataIndex: 'gasval',
+        },
+        {
+          legend: '氧气',
+          seriesName: '(氧气%)',
+          ymax: 30,
+          yname: '2%',
+          linetype: 'line',
+          yaxispos: 'right',
+          color: '#03C2EC',
+          sort: 3,
+          xRotate: 0,
+          dataIndex: 'o2val',
+        },
+      ];
+      const [register, { setModalProps, closeModal }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
 
-    const chartsColumns = [
-      {
-        legend: '一氧化碳',
-        seriesName: '(ppm)',
-        ymax: 10,
-        yname: 'ppm',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'coval',
-      },
-      {
-        legend: '乙炔',
-        seriesName: '',
-        ymax: 10,
-        yname: 'ppm',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#00FFA8',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'chval',
-      },
-      {
-        legend: '乙烯',
-        seriesName: '',
-        ymax: 10,
-        yname: 'ppm',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#AE19FF',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'ch2val',
-      },
-      {
-        legend: '二氧化碳',
-        seriesName: '(%)',
-        ymax: 20,
-        yname: '1%',
-        linetype: 'line',
-        yaxispos: 'right',
-        color: '#9C83D9',
-        sort: 2,
-        xRotate: 0,
-        dataIndex: 'co2val',
-      },
-      {
-        legend: '甲烷',
-        seriesName: '',
-        ymax: 20,
-        yname: '1%',
-        linetype: 'line',
-        yaxispos: 'right',
-        color: '#DA3914',
-        sort: 2,
-        xRotate: 0,
-        dataIndex: 'gasval',
-      },
-      {
-        legend: '氧气',
-        seriesName: '(氧气%)',
-        ymax: 30,
-        yname: '2%',
-        linetype: 'line',
-        yaxispos: 'right',
-        color: '#03C2EC',
-        sort: 3,
-        xRotate: 0,
-        dataIndex: 'o2val',
-      },
-      
-    ]
-    const [register, { setModalProps, closeModal }] = useModalInner();
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
 
-    function handleVisibleChange(visible) {
-      if (visible) {
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
       }
-    }
 
-    // 选择监测
-    function selectDevice (id){
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-       setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-    }
-
-    function handleOk(e) {
-      e.preventDefault()
-      closeModal()
-    }
-
-    function handleCancel(e) {
-      e.preventDefault()
-      closeModal()
-    }
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      if(newActiveID != oldActiveID){
-        activeDeviceID.value = newActiveID as string
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
       }
-      deviceList.value = newDataSource?.filter((item:any, index) => {
-        if((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value){
-          activeDeviceID.value = item.deviceID
-          posMonitor.value = Object.assign(item, item.readData)
-          historyList.value = item['history']
+
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
         }
-        item.readTime = item.readTime?.substring(11)
-        return item
-      })
-    })
+        deviceList.value = newDataSource?.filter((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            activeDeviceID.value = item.deviceID;
+            posMonitor.value = Object.assign(item, item.readData);
+            historyList.value = item['history'];
+          }
+          item.readTime = item.readTime?.substring(11);
+          return item;
+        });
+      });
 
-    return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, deviceList, historyList, activeDeviceID, posMonitor, echatsOption, posList, chartsColumns };
-  },
-  
-});
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        historyList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-  .fiber-modal{
+  .fiber-modal {
     width: 100%;
     height: 650px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    
-    .modal-left{
+
+    .modal-left {
       width: 200px;
       height: 100%;
       overflow-y: auto;
@@ -284,15 +303,15 @@ export default defineComponent({
       .active-device-title {
         color: aqua;
       }
-      .link-item{
+      .link-item {
         position: relative;
         cursor: pointer;
         line-height: 30px;
         padding-left: 30px;
-        span:hover{
+        span:hover {
           color: #89ffff;
         }
-        &::after{
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -305,14 +324,14 @@ export default defineComponent({
         }
       }
     }
-    .modal-right{
+    .modal-right {
       width: calc(100% - 220px);
       overflow-y: auto;
-      .base-title{
+      .base-title {
         line-height: 32px;
         position: relative;
         padding-left: 20px;
-        &::after{
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -324,42 +343,42 @@ export default defineComponent({
           border-radius: 4px;
         }
       }
-      .right-top{
+      .right-top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         flex-wrap: wrap;
         margin-bottom: 10px;
-        .top-item{
+        .top-item {
           width: 220px;
           height: 100px;
           display: flex;
           flex-direction: row;
           justify-content: center;
-          border: 1px solid rgba(25,237,255,.4);
-          box-shadow: inset 0 0 10px rgba(0,197,255,.6);
-          background: rgba(0,0,0,.06666666666666667);
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
           padding-top: 20px;
           margin: 10px 0;
-          .icon{
+          .icon {
             margin-right: 10px;
             margin-top: 5px;
-            color: #FDB146;
+            color: #fdb146;
           }
-          .item-container{
-            width: 100px;
+          .item-container {
+            width: 110px;
             display: flex;
             flex-direction: column;
             justify-content: center;
-            div{
+            div {
               text-align: center;
             }
-            .title{
+            .title {
               font-size: 18px;
             }
-            .value{
+            .value {
               text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient( 0deg,#45d3fd, #45d3fd, #61ddb1,#61ddb1);
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
               font-style: normal;
               background-size: cover;
               font-family: electronicFont;
@@ -369,83 +388,80 @@ export default defineComponent({
               -webkit-text-fill-color: transparent;
               position: relative;
               top: -8px;
-              
-              span{
+
+              span {
                 font-family: Arial, Helvetica, sans-serif;
                 font-size: 18px;
                 color: aliceblue;
               }
-              
             }
-            
           }
         }
-        .warning-box{
+        .warning-box {
           padding-top: 0px;
-          .icon{
+          .icon {
             margin-top: 20px;
-            :deep(.icon-style){
+            :deep(.icon-style) {
               width: auto;
-              color: #FDB146;
+              color: #fdb146;
             }
           }
-          .warning-value{
+          .warning-value {
             font-size: 18px;
             color: #61ddb1;
           }
         }
       }
-      .right-center{
+      .right-center {
         margin-top: 20px;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        .table-box{
+        .table-box {
           position: relative;
           width: 500px;
           height: 250px;
         }
-        .warning-box{
+        .warning-box {
           width: calc(100% - 520px);
-          .warning-container{
+          .warning-container {
             width: 100%;
             height: convert;
             background: #009acd00;
-            :deep(.dv-scroll-board){
-              .row-item{
+            :deep(.dv-scroll-board) {
+              .row-item {
                 height: 40px !important;
                 line-height: 40px !important;
               }
-              .header-item{
+              .header-item {
                 border-top: 1px solid #91e9fe !important;
                 border-bottom: 1px solid #91e9fe !important;
               }
             }
-
           }
         }
       }
-      .right-bottom{
+      .right-bottom {
         margin-top: 20px;
-        .echarts-box{
+        .echarts-box {
           width: 100%;
           height: 320px;
           position: relative;
-          .echarts-line{
+          .echarts-line {
             width: calc(100% + 80px);
-            position: absolute
+            position: absolute;
           }
         }
-      }      
+      }
     }
   }
-  :deep(.zxm-table-body){
+  :deep(.zxm-table-body) {
     border: 1px solid rgba(57, 232, 255, 0.2) !important;
-    .zxm-table-tbody > tr > td{
+    .zxm-table-tbody > tr > td {
       border: none !important;
     }
   }
-  :deep(.zxm-table-cell){
+  :deep(.zxm-table-cell) {
     border-right: none !important;
   }
 </style>

+ 537 - 553
src/views/vent/monitorManager/deviceMonitor/index1.vue

@@ -1,657 +1,641 @@
 <template>
-  <div class="scene-box" >
+  <div class="scene-box">
     <DeviceVue ref="DeviceRef" :pageData="pageData" />
   </div>
-  <VentModal style="width: 100%; height: 100%; position: absolute"/>
-  
+  <VentModal style="width: 100%; height: 100%; position: absolute" />
 </template>
 
 <script setup lang="ts">
-import { ref, onUnmounted, onMounted, nextTick, watch } from 'vue';
-import DeviceVue from './components/device/index.vue';
-import Network from './components/network/index.vue'
-import { getActions } from '/@/qiankun/state';
-import { useRoute } from 'vue-router';
-import { onBeforeUnmount } from 'vue';
-import VentModal from '/@/components/vent/micro/ventModal.vue'
-
-
-const route = useRoute()
-const actions = getActions();
-
-const DeviceRef = ref(null)
-const NetworkRef = ref(null)
-
-const routerParam = ref('home')
-const pageData = ref({})
-const pageResult = ref({})
-const { type, deviceType } = route.query
-
-// actions.setGlobalState({ url: { path: '/micro-vent-3dModal/dashboard/analysis', query: { type, deviceType } } });
-
-const changePageType = (pageType) => {
-  console.log('页面类型', pageType)
-  routerParam.value = pageType
-  actions.setGlobalState({ pageObj: { pageType: pageType } });
-}
-
-watch(() => route.fullPath, (fullPath) => {
-  // const { type, deviceType } = routeVal.query
-  // if (type === 'tunMonitor') {
-  //   pageData.value = { pageType: deviceType }
-  //   actions.setGlobalState({ pageObj: { pageType: deviceType } });
-  // }
-  console.log('fullPath------------------->', fullPath)
-})
-
-onMounted(() => {
-
-
-  // nextTick(() => {
-    
-  //   if (type === 'network') {
-  //     routerParam.value = 'network'
-  //     actions.setGlobalState({ pageObj: { pageType: 'network' } });
-  //   } else if (type === 'home') {
-  //     actions.setGlobalState({ pageObj: { pageType: 'home' } });
-  //   }
-  //   else if (type === 'tunMonitor') {
-  //     if (deviceType) {
-  //       pageData.value = { pageType: deviceType }
-  //       actions.setGlobalState({ pageObj: { pageType: deviceType } });
-  //     }
-  //   }
-  //   actions.onGlobalStateChange((newState) => {
-  //     for (const key in newState) {
-  //       if (key === 'pageObj') {
-  //         const pageObj = newState[key]
-  //         if (pageObj && pageObj.pageType) {
-  //           routerParam.value = pageObj.pageType
-  //           pageData.value = pageObj
-  //           console.log('页面参数类型----------->', pageData.value, routerParam.value, pageObj)
-  //           if (pageObj.timesolution) {
-  //             pageResult.value = pageObj.timesolution
-  //           }
-  //         }
-  //       }
-  //     }
-  //   })
-  // })
-})
-
+  import { ref, onUnmounted, onMounted, nextTick, watch } from 'vue';
+  import DeviceVue from './components/device/index.vue';
+  import Network from './components/network/index.vue';
+  import { getActions } from '/@/qiankun/state';
+  import { useRoute } from 'vue-router';
+  import { onBeforeUnmount } from 'vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+
+  const route = useRoute();
+  const actions = getActions();
+
+  const DeviceRef = ref(null);
+  const NetworkRef = ref(null);
+
+  const routerParam = ref('home');
+  const pageData = ref({});
+  const pageResult = ref({});
+  const { type, deviceType } = route.query;
+
+  // actions.setGlobalState({ url: { path: '/micro-vent-3dModal/dashboard/analysis', query: { type, deviceType } } });
+
+  const changePageType = (pageType) => {
+    console.log('页面类型', pageType);
+    routerParam.value = pageType;
+    actions.setGlobalState({ pageObj: { pageType: pageType } });
+  };
+
+  watch(
+    () => route.fullPath,
+    (fullPath) => {
+      // const { type, deviceType } = routeVal.query
+      // if (type === 'tunMonitor') {
+      //   pageData.value = { pageType: deviceType }
+      //   actions.setGlobalState({ pageObj: { pageType: deviceType } });
+      // }
+      console.log('fullPath------------------->', fullPath);
+    }
+  );
+
+  onMounted(() => {
+    // nextTick(() => {
+    //   if (type === 'network') {
+    //     routerParam.value = 'network'
+    //     actions.setGlobalState({ pageObj: { pageType: 'network' } });
+    //   } else if (type === 'home') {
+    //     actions.setGlobalState({ pageObj: { pageType: 'home' } });
+    //   }
+    //   else if (type === 'tunMonitor') {
+    //     if (deviceType) {
+    //       pageData.value = { pageType: deviceType }
+    //       actions.setGlobalState({ pageObj: { pageType: deviceType } });
+    //     }
+    //   }
+    //   actions.onGlobalStateChange((newState) => {
+    //     for (const key in newState) {
+    //       if (key === 'pageObj') {
+    //         const pageObj = newState[key]
+    //         if (pageObj && pageObj.pageType) {
+    //           routerParam.value = pageObj.pageType
+    //           pageData.value = pageObj
+    //           console.log('页面参数类型----------->', pageData.value, routerParam.value, pageObj)
+    //           if (pageObj.timesolution) {
+    //             pageResult.value = pageObj.timesolution
+    //           }
+    //         }
+    //       }
+    //     }
+    //   })
+    // })
+  });
 </script>
 
-<style lang="less" scoped >
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-.device-header {
-  position: fixed;
-  width: 100%;
-  height: 56px;
-  background: url('/@/assets/images/vent/home/modal-top.png');
-  text-align: center;
-  line-height: 56px;
-  font-size: 28px;
-  color: #ffffffdd;
-  font-weight: 600;
-  z-index: -1;
-}
-
-.select-node {
-  position: fixed;
-  top: 60px;
-  left: 10px;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  font-size: 22px;
-
-  .title {
-    margin-left: 10px;
-  }
-}
+<style lang="less" scoped>
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
 
-.expansion-icon {
-  background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
-  background-size: contain;
-  position: absolute;
-  left: 190px;
-  top: 25px;
-
-  &:hover {
-    background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
-    background-size: contain;
-  }
-}
-
-.device-select {
-  width: 250px;
-  height: 500px;
-  background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
-  position: fixed;
-  top: 60px;
-  left: 10px;
-  background-size: contain;
-  pointer-events: auto;
-  padding: 20px 10px 30px 10px;
-
-}
-
-.is-expansion-icon {
-  padding: 5px;
-  pointer-events: auto;
-  z-index: 999;
-}
-
-.device-select-show {
-  left: 10px;
-  animation-name: treeShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-
-}
-
-.device-select-hide {
-  left: -250px;
-  animation-name: treeHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.node-select-show {
-  width: 276px;
-  height: 44px;
-  background: url('/@/assets/images/vent/home/tree-expansion-bg.png') no-repeat;
-  left: 10px;
-  animation-name: treeShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-  display: flex;
-  align-items: center;
-  margin-left: 0;
-  justify-content: flex-start;
-  pointer-events: auto;
-
-  &:hover {
-    background: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png') no-repeat;
+  .device-header {
+    position: fixed;
+    width: 100%;
+    height: 56px;
+    background: url('/@/assets/images/vent/home/modal-top.png');
+    text-align: center;
+    line-height: 56px;
+    font-size: 28px;
+    color: #ffffffdd;
+    font-weight: 600;
+    z-index: -1;
   }
 
-  .put-away-icon {
-    position: relative;
-    display: inline-block;
-    left: 4px;
-  }
-}
-
-.node-select-hide {
-  left: -400px;
-  animation-name: treeHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.device-select-box {
-  width: 208px;
-  height: 450px;
-  overflow-y: auto;
-  color: #fff;
-
-  :deep(.zxm-tree) {
-    background: transparent !important;
-    color: #fff !important;
-
-    .zxm-tree-switcher {
-      background: transparent !important;
-    }
+  .select-node {
+    position: fixed;
+    top: 60px;
+    left: 10px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    font-size: 22px;
 
-    .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
-      background-color: #00b1c8;
+    .title {
+      margin-left: 10px;
     }
+  }
 
-    .zxm-tree-node-content-wrapper:hover {
-      background-color: #00b1c855;
-    }
+  .expansion-icon {
+    background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
+    background-size: contain;
+    position: absolute;
+    left: 190px;
+    top: 25px;
 
-    input {
-      height: 0px !important;
+    &:hover {
+      background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
+      background-size: contain;
     }
   }
 
-  &::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    background: #ededed22;
-    height: 100px;
+  .device-select {
+    width: 250px;
+    height: 500px;
+    background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
+    position: fixed;
+    top: 60px;
+    left: 10px;
+    background-size: contain;
+    pointer-events: auto;
+    padding: 20px 10px 30px 10px;
   }
 
-  &::-webkit-scrollbar-thumb {
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    background: #4288A444;
-  }
-}
-
-.location-icon {
-  width: 46px;
-  height: 178px;
-  position: absolute;
-  top: 60px;
-  // right: 0;
-  background: url('/@/assets/images/vent/home/location-bg.png') no-repeat;
-  background-size: contain;
-  writing-mode: vertical-lr;
-  line-height: 46px;
-  color: #fff;
-  padding-top: 10px;
-  pointer-events: auto;
-  cursor: pointer;
-
-  &:hover {
-    background: url('/@/assets/images/vent/home/location-hover-bg.png') no-repeat;
+  .is-expansion-icon {
+    padding: 5px;
+    pointer-events: auto;
+    z-index: 999;
   }
 
-  .location-text {
-    padding-top: 20px;
-    letter-spacing: 3px;
-    font-size: 16px;
+  .device-select-show {
+    left: 10px;
+    animation-name: treeShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
   }
-}
-
-.location-select {
-  position: fixed;
-  top: 60px;
-  // right: 240px;
-  pointer-events: auto;
 
-  .location-select-box {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    &::before {
-      content: "";
-      position: absolute;
-      width: 230px;
-      height: 500px;
-      top: 0;
-      left: 0;
-      background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
-      background-size: contain;
-      transform: rotateY(180deg);
-      z-index: -1;
-      // &:hover {
-      //   background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
-      //   background-size: contain;
-      // }
-    }
+  .device-select-hide {
+    left: -250px;
+    animation-name: treeHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-    .location-top-title {
-      color: #fff;
-      position: absolute;
-      width: 225px;
-      height: 68px;
-      background: url('/@/assets/images/vent/home/turn-location-top-bg.png') no-repeat;
-      background-size: contain;
-      top: 5px;
-      left: 5px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: flex-end;
+  .node-select-show {
+    width: 276px;
+    height: 44px;
+    background: url('/@/assets/images/vent/home/tree-expansion-bg.png') no-repeat;
+    left: 10px;
+    animation-name: treeShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+    display: flex;
+    align-items: center;
+    margin-left: 0;
+    justify-content: flex-start;
+    pointer-events: auto;
 
-      .title {
-        font-size: 18px;
-        position: relative;
-        top: -14px;
-        right: 15px;
-      }
+    &:hover {
+      background: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png') no-repeat;
     }
 
-    .location-expansion-icon {
-      background: url('/@/assets/images/vent/home/tree-icon-cover-bg.png') no-repeat;
-      background-size: contain;
+    .put-away-icon {
       position: relative;
-      left: 10px;
-      top: -15px;
-      padding: 5px;
-
-      &:hover {
-        background: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png') no-repeat;
-        background-size: contain;
-      }
+      display: inline-block;
+      left: 4px;
     }
   }
 
-  .location-container {
-    width: 200px;
-    height: 390px;
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    top: 80px;
-    left: 18px;
+  .node-select-hide {
+    left: -400px;
+    animation-name: treeHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
+
+  .device-select-box {
+    width: 208px;
+    height: 450px;
     overflow-y: auto;
+    color: #fff;
 
-    .location-item {
-      color: #fff;
-      line-height: 30px;
-      display: flex;
-      justify-content: space-between;
-      background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
-      margin: 3px 0;
-
-      .item-title {
-        width: 80px;
-        text-align: right;
-        color: #87f1ff;
+    :deep(.zxm-tree) {
+      background: transparent !important;
+      color: #fff !important;
+
+      .zxm-tree-switcher {
+        background: transparent !important;
       }
-    }
 
-    .location-bottom-btn {
-      width: 100%;
-      color: #fff;
-      display: flex;
-      justify-content: flex-end;
-      margin-top: 20px;
+      .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
+        background-color: #00b1c8;
+      }
 
-      span {
-        display: inline-block;
-        width: 100%;
-        background: #00709955;
-        border-radius: 3px;
-        border: 1px solid rgba(174, 243, 255, 0.3);
-        text-align: center;
-        padding: 2px 0;
-        cursor: pointer;
+      .zxm-tree-node-content-wrapper:hover {
+        background-color: #00b1c855;
+      }
 
-        &:hover {
-          background: #00557422;
-        }
+      input {
+        height: 0px !important;
       }
     }
+
+    &::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      background: #ededed22;
+      height: 100px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      background: #4288a444;
+    }
   }
-}
-
-.location-select-show {
-  right: 240px;
-  animation-name: locationShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.location-select-hide {
-  right: -2px;
-  animation-name: locationHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.location-btn-show {
-  right: -0px;
-  animation-name: locationBtnShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.location-btn-hide {
-  right: -240px;
-  animation-name: locationBtnHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.bottom-tabs-box {
-
-  position: relative;
-
-  .to-small {
-    width: 60px;
-    height: 60px;
-    background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
-    background-size: auto;
+
+  .location-icon {
+    width: 46px;
+    height: 178px;
     position: absolute;
-    top: -65px;
-    right: 36px;
-    border-radius: 10px;
-    padding: 8px;
-    backdrop-filter: blur(10px);
-    background-color: rgba(45, 86, 137, 0.418);
+    top: 60px;
+    // right: 0;
+    background: url('/@/assets/images/vent/home/location-bg.png') no-repeat;
+    background-size: contain;
+    writing-mode: vertical-lr;
+    line-height: 46px;
+    color: #fff;
+    padding-top: 10px;
+    pointer-events: auto;
+    cursor: pointer;
 
     &:hover {
-      background-color: rgba(79, 104, 134, 0.418);
+      background: url('/@/assets/images/vent/home/location-hover-bg.png') no-repeat;
+    }
+
+    .location-text {
+      padding-top: 20px;
+      letter-spacing: 3px;
+      font-size: 16px;
     }
   }
 
-  .device-button-group {
-    position: absolute;
-    top: -30px;
-    display: flex;
-    width: 100%;
+  .location-select {
+    position: fixed;
+    top: 60px;
+    // right: 240px;
+    pointer-events: auto;
 
-    .device-button {
-      height: 26px;
-      padding: 0 20px;
-      background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
-      clip-path: polygon(10px 0,
-          0 50%,
-          10px 100%,
-          100% 100%,
-          calc(100% - 10px) 50%,
-          100% 0);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #FFF;
+    .location-select-box {
+      width: 100%;
+      height: 100%;
       position: relative;
-      cursor: pointer;
 
-      &:nth-child(1) {
-        left: calc(-6px * 1);
+      &::before {
+        content: '';
+        position: absolute;
+        width: 230px;
+        height: 500px;
+        top: 0;
+        left: 0;
+        background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
+        background-size: contain;
+        transform: rotateY(180deg);
+        z-index: -1;
+        // &:hover {
+        //   background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
+        //   background-size: contain;
+        // }
       }
 
-      &:nth-child(2) {
-        left: calc(-6px * 2);
+      .location-top-title {
+        color: #fff;
+        position: absolute;
+        width: 225px;
+        height: 68px;
+        background: url('/@/assets/images/vent/home/turn-location-top-bg.png') no-repeat;
+        background-size: contain;
+        top: 5px;
+        left: 5px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-end;
+
+        .title {
+          font-size: 18px;
+          position: relative;
+          top: -14px;
+          right: 15px;
+        }
       }
 
-      &:nth-child(3) {
-        left: calc(-6px * 3);
-      }
+      .location-expansion-icon {
+        background: url('/@/assets/images/vent/home/tree-icon-cover-bg.png') no-repeat;
+        background-size: contain;
+        position: relative;
+        left: 10px;
+        top: -15px;
+        padding: 5px;
 
-      &:nth-child(4) {
-        left: calc(-6px * 4);
+        &:hover {
+          background: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png') no-repeat;
+          background-size: contain;
+        }
       }
+    }
 
-      &:nth-child(5) {
-        left: calc(-6px * 5);
+    .location-container {
+      width: 200px;
+      height: 390px;
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      top: 80px;
+      left: 18px;
+      overflow-y: auto;
+
+      .location-item {
+        color: #fff;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
+        margin: 3px 0;
+
+        .item-title {
+          width: 80px;
+          text-align: right;
+          color: #87f1ff;
+        }
       }
 
-      &:nth-child(6) {
-        left: calc(-6px * 6);
+      .location-bottom-btn {
+        width: 100%;
+        color: #fff;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+
+        span {
+          display: inline-block;
+          width: 100%;
+          background: #00709955;
+          border-radius: 3px;
+          border: 1px solid rgba(174, 243, 255, 0.3);
+          text-align: center;
+          padding: 2px 0;
+          cursor: pointer;
+
+          &:hover {
+            background: #00557422;
+          }
+        }
       }
+    }
+  }
 
-      &:nth-child(7) {
-        left: calc(-6px * 7);
-      }
+  .location-select-show {
+    right: 240px;
+    animation-name: locationShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-      &:nth-child(8) {
-        left: calc(-6px * 8);
-      }
+  .location-select-hide {
+    right: -2px;
+    animation-name: locationHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-      &:nth-child(9) {
-        left: calc(-6px * 9);
-      }
+  .location-btn-show {
+    right: -0px;
+    animation-name: locationBtnShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-      &:nth-child(10) {
-        left: calc(-6px * 10);
-      }
+  .location-btn-hide {
+    right: -240px;
+    animation-name: locationBtnHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-      &:nth-child(11) {
-        left: calc(-6px * 11);
-      }
+  .bottom-tabs-box {
+    position: relative;
 
-      &:nth-child(12) {
-        left: calc(-6px * 12);
-      }
+    .to-small {
+      width: 60px;
+      height: 60px;
+      background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
+      background-size: auto;
+      position: absolute;
+      top: -65px;
+      right: 36px;
+      border-radius: 10px;
+      padding: 8px;
+      backdrop-filter: blur(10px);
+      background-color: rgba(45, 86, 137, 0.418);
 
-      &:nth-child(13) {
-        left: calc(-6px * 13);
+      &:hover {
+        background-color: rgba(79, 104, 134, 0.418);
       }
+    }
 
-      &:nth-child(14) {
-        left: calc(-6px * 14);
-      }
+    .device-button-group {
+      position: absolute;
+      top: -30px;
+      display: flex;
+      width: 100%;
 
-      &:nth-child(15) {
-        left: calc(-6px * 15);
-      }
+      .device-button {
+        height: 26px;
+        padding: 0 20px;
+        background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
+        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        position: relative;
+        cursor: pointer;
+
+        &:nth-child(1) {
+          left: calc(-6px * 1);
+        }
+
+        &:nth-child(2) {
+          left: calc(-6px * 2);
+        }
+
+        &:nth-child(3) {
+          left: calc(-6px * 3);
+        }
+
+        &:nth-child(4) {
+          left: calc(-6px * 4);
+        }
+
+        &:nth-child(5) {
+          left: calc(-6px * 5);
+        }
+
+        &:nth-child(6) {
+          left: calc(-6px * 6);
+        }
+
+        &:nth-child(7) {
+          left: calc(-6px * 7);
+        }
+
+        &:nth-child(8) {
+          left: calc(-6px * 8);
+        }
+
+        &:nth-child(9) {
+          left: calc(-6px * 9);
+        }
+
+        &:nth-child(10) {
+          left: calc(-6px * 10);
+        }
+
+        &:nth-child(11) {
+          left: calc(-6px * 11);
+        }
+
+        &:nth-child(12) {
+          left: calc(-6px * 12);
+        }
+
+        &:nth-child(13) {
+          left: calc(-6px * 13);
+        }
+
+        &:nth-child(14) {
+          left: calc(-6px * 14);
+        }
 
-      &:first-child {
-        clip-path: polygon(0 0,
-            10px 50%,
-            0 100%,
-            100% 100%,
-            calc(100% - 10px) 50%,
-            100% 0);
+        &:nth-child(15) {
+          left: calc(-6px * 15);
+        }
+
+        &:first-child {
+          clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        }
       }
 
+      .device-active {
+        background: linear-gradient(45deg, #04e6fb, #0c5cab);
+
+        &::before {
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
+      }
     }
 
-    .device-active {
-      background: linear-gradient(45deg, #04e6fb, #0c5cab);
+    .enter-detail {
+      color: #fff;
+      cursor: pointer;
+      position: absolute;
+      right: 120px;
+      top: -6px;
+      padding: 5px;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      height: 33px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      padding: 5px 15px 5px 15px;
+      cursor: pointer;
+
+      &:hover {
+        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      }
 
       &::before {
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
+        width: calc(100% - 6px);
+        height: 27px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit;
+        /*important*/
+        background: linear-gradient(#1fa6cb, #127cb5);
       }
     }
   }
 
-  .enter-detail {
-    color: #fff;
-    cursor: pointer;
-    position: absolute;
-    right: 120px;
-    top: -6px;
-    padding: 5px;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    height: 33px !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    padding: 5px 15px 5px 15px;
-    cursor: pointer;
-
-    &:hover {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
+  @keyframes treeShow {
+    0% {
+      left: -400px;
+      opacity: 0;
     }
 
-    &::before {
-      width: calc(100% - 6px);
-      height: 27px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit;
-      /*important*/
-      background: linear-gradient(#1fa6cb, #127cb5);
+    100% {
+      left: 10px;
+      opacity: 1;
     }
   }
-}
 
-@keyframes treeShow {
-  0% {
-    left: -400px;
-    opacity: 0;
-  }
+  @keyframes treeHide {
+    0% {
+      left: 10px;
+      opacity: 1;
+    }
 
-  100% {
-    left: 10px;
-    opacity: 1;
+    100% {
+      left: -400px;
+      opacity: 0;
+    }
   }
-}
 
-@keyframes treeHide {
-  0% {
-    left: 10px;
-    opacity: 1;
-  }
+  @keyframes locationShow {
+    0% {
+      right: 0px;
+      opacity: 0;
+    }
 
-  100% {
-    left: -400px;
-    opacity: 0;
+    100% {
+      right: 240px;
+      opacity: 1;
+    }
   }
-}
 
-@keyframes locationShow {
-  0% {
-    right: 0px;
-    opacity: 0;
-  }
+  @keyframes locationHide {
+    0% {
+      right: 240px;
+      opacity: 1;
+    }
 
-  100% {
-    right: 240px;
-    opacity: 1;
+    100% {
+      right: 0;
+      opacity: 0;
+    }
   }
-}
 
-@keyframes locationHide {
-  0% {
-    right: 240px;
-    opacity: 1;
-  }
+  @keyframes locationBtnShow {
+    0% {
+      right: -240px;
+      opacity: 0;
+    }
 
-  100% {
-    right: 0;
-    opacity: 0;
+    100% {
+      right: -2px;
+      opacity: 1;
+    }
   }
-}
 
-@keyframes locationBtnShow {
-  0% {
-    right: -240px;
-    opacity: 0;
-  }
+  @keyframes locationBtnHide {
+    0% {
+      right: -2px;
+      opacity: 1;
+    }
 
-  100% {
-    right: -2px;
-    opacity: 1;
+    100% {
+      right: -240px;
+      opacity: 0;
+    }
   }
-}
 
-@keyframes locationBtnHide {
-  0% {
-    right: -2px;
-    opacity: 1;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    // overflow: auto;
+    height: 100%;
   }
 
-  100% {
-    right: -240px;
-    opacity: 0;
+  :deep(.zxm-select-dropdown) {
+    left: 0 !important;
+    color: #000000 !important;
   }
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  // overflow: auto;
-  height: 100%;
-}
-
-:deep(.zxm-select-dropdown) {
-  left: 0 !important;
-  color: #000000 !important;
-}</style>
+</style>

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

@@ -284,7 +284,7 @@ class FmTwoSs {
   /* 提取风门序列帧,初始化前后门动画 */
   initAnimation() {
     const fmGroup = this.group?.getObjectByName('fmTwoSs');
-    if (fmGroup) {
+    if (fmGroup && fmGroup.animations[0]) {
       const tracks = fmGroup.animations[0].tracks;
       const fontTracks: any[] = [],
         backTracks: any[] = [];

+ 12 - 6
src/views/vent/monitorManager/gateMonitor/index.vue

@@ -368,6 +368,7 @@
 
   // 播放动画
   function playAnimation(handlerState) {
+    debugger;
     switch (handlerState) {
       case 1: // 打开前门
         if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
@@ -465,16 +466,20 @@
   }
 
   function handleOK(passWord, handlerState) {
+    debugger;
     // if (passWord !== '123456') {
     //   message.warning('密码不正确,请重新输入');
     //   return;
     // }
 
-    if (isOpenRunning && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
-      return;
-    }
+    // if (isOpenRunning && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
+    //   return;
+    // }
 
-    if (isOpenRunning && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
+    // if (isOpenRunning && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
+    //   return;
+    // }
+    if (isOpenRunning) {
       return;
     }
 
@@ -487,7 +492,7 @@
       masterComputer: selectData.masterComputer,
     };
     let handler = () => {};
-
+    debugger;
     switch (handlerState) {
       case '1': // 打开前门
         if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
@@ -608,10 +613,11 @@
     //   //   frontDeviceState = 1;
     //   // }
     // }
+
     if (
       (selectData.frontGateOpen == '0' && selectData.frontGateClose == '0') ||
       (selectData.rearGateOpen == '0' && selectData.rearGateClose == '0') ||
-      (selectData.midGateOpen == '0' && selectData.rearGateClose == '0')
+      (selectData.midGateOpen == '0' && selectData.midGateClose == '0')
     ) {
       isOpenRunning = true;
     } else {

+ 57 - 34
src/views/vent/monitorManager/mainFanMonitor/index.vue

@@ -132,10 +132,18 @@
                 <div class="item-name">{{ data.title }}</div>
                 <div v-if="data.dataIndex.startsWith('Fan')">
                   <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
-                    selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
+                    selectData['Fan1StartStatus'] == '0' && globalConfig?.simulatedPassword
+                      ? '-'
+                      : selectData[data.dataIndex.replace('Fan', 'Fan1')]
+                      ? selectData[data.dataIndex.replace('Fan', 'Fan1')]
+                      : '-'
                   }}</div>
                   <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
-                    selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
+                    selectData['Fan2StartStatus'] == '0' && globalConfig?.simulatedPassword
+                      ? '-'
+                      : selectData[data.dataIndex.replace('Fan', 'Fan2')]
+                      ? selectData[data.dataIndex.replace('Fan', 'Fan2')]
+                      : '-'
                   }}</div>
                 </div>
                 <div v-else>
@@ -174,40 +182,52 @@
                   <div class="item-name"><div class="icon"></div> {{ state.title }}</div>
                   <div v-if="state.dataIndex.startsWith('Fan')">
                     <div class="signal-item" v-if="warningMonitorRowIndex == 0">
-                      <div
-                        class="signal-round"
-                        :class="{
-                          'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan1')],
-                          'signal-round-warning':
-                            selectData[state.dataIndex.replace('Fan', 'Fan1')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan1')],
-                          'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined,
-                        }"
-                      ></div>
-                      <div class="vent-margin-l-8">{{
-                        selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
-                          ? '无状态'
-                          : selectData[state.dataIndex.replace('Fan', 'Fan1')]
-                          ? '正常'
-                          : '异常'
-                      }}</div>
+                      <template v-if="selectData['Fan1StartStatus'] == '0' && globalConfig?.simulatedPassword">
+                        <div class="signal-round signal-round-gry"></div>
+                        <div class="vent-margin-l-8">无状态</div></template
+                      >
+                      <template v-else>
+                        <div
+                          class="signal-round"
+                          :class="{
+                            'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan1')],
+                            'signal-round-warning':
+                              selectData[state.dataIndex.replace('Fan', 'Fan1')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan1')],
+                            'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined,
+                          }"
+                        ></div>
+                        <div class="vent-margin-l-8">{{
+                          selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
+                            ? '无状态'
+                            : selectData[state.dataIndex.replace('Fan', 'Fan1')]
+                            ? '正常'
+                            : '异常'
+                        }}</div>
+                      </template>
                     </div>
                     <div class="signal-item" v-if="warningMonitorRowIndex == 1">
-                      <div
-                        class="signal-round"
-                        :class="{
-                          'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan2')],
-                          'signal-round-warning':
-                            selectData[state.dataIndex.replace('Fan', 'Fan2')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan2')],
-                          'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined,
-                        }"
-                      ></div>
-                      <div class="vent-margin-l-8">{{
-                        selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined
-                          ? '无状态'
-                          : selectData[state.dataIndex.replace('Fan', 'Fan2')]
-                          ? '正常'
-                          : '异常'
-                      }}</div>
+                      <template v-if="selectData['Fan2StartStatus'] == '0' && globalConfig?.simulatedPassword">
+                        <div class="signal-round signal-round-gry"></div>
+                        <div class="vent-margin-l-8">无状态</div></template
+                      >
+                      <template v-else>
+                        <div
+                          class="signal-round"
+                          :class="{
+                            'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan2')],
+                            'signal-round-warning':
+                              selectData[state.dataIndex.replace('Fan', 'Fan2')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan2')],
+                            'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined,
+                          }"
+                        ></div>
+                        <div class="vent-margin-l-8">{{
+                          selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined
+                            ? '无状态'
+                            : selectData[state.dataIndex.replace('Fan', 'Fan2')]
+                            ? '正常'
+                            : '异常'
+                        }}</div>
+                      </template>
                     </div>
                   </div>
                   <div v-else>
@@ -243,6 +263,9 @@
               @selectRow="getSelectRow"
               :scroll="{ y: scroll.y - (headElHeight - 56) }"
             >
+              <template #bodyCell="{ column, record }">
+                <!-- <a-tag :color="record.netStatus == '0' ? '#f00' : 'green'">{{ record.netStatus == '1' ? '报警' : '正常' }}</a-tag> -->
+              </template>
               <template #action="{ record }">
                 <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
                 <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>

+ 2 - 2
src/views/vent/monitorManager/nitrogen/components/nitrogenHomeYJ.vue

@@ -134,8 +134,8 @@
   import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
   import { list } from '../nitrogen.api';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';
-  import type { State } from '../nitrogen.dataYJ';
+  // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';
+  // import type { State } from '../nitrogen.dataYJ';
   import { formatNum } from '/@/utils/ventutil';
 
   const loading = ref(true);

+ 7 - 0
src/views/vent/monitorManager/sensorMonitor/index.vue

@@ -181,6 +181,13 @@
     const type = devicetype ? devicetype : 'modelsensor';
     const res = await list({ devicetype: type, pagetype: 'normal' });
     dataSource.value = res.msgTxt[0].datalist || [];
+    console.log( dataSource.value,' dataSource.value----------')
+    //lxh
+    dataSource.value.forEach(el=>{
+      el.readData.temperature=(Math.random()*(60-50)+50).toFixed(2)
+      el.readData.humidity=(Math.random()*(60-50)+50).toFixed(2)
+      el.readData.pa=(Math.random()*(102000-100000)+100000).toFixed(2)
+    })
     dataSource.value.map((data: any) => {
       const readData = data.readData;
       data = Object.assign(data, readData);

+ 2 - 1
src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceHome.vue

@@ -83,7 +83,8 @@
                 </div>
               </div>
             </div>
-            <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 240px; overflow-y: auto; " />
+            <div class="" style="height: 200px; display: flex; align-items: center; justify-content: center;">暂无数据</div>
+            <!-- <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 240px; overflow-y: auto; " /> -->
           </template>
         </ventBox1>
       </div>

+ 1 - 1
src/views/vent/monitorManager/windowMonitor/dandaoFc.threejs.ts

@@ -108,7 +108,7 @@ class singleWindow {
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 440,
+        x: 470,
         y: 145,
       },
       {