束管监测更新

.env.development

@@ -6,8 +6,8 @@ VITE_PUBLIC_PATH = /
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
 #VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
-# VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://182.92.126.35:9999/upload"],["/documents", "http://182.92.126.35:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://182.92.126.35:8051"]]
-VITE_PROXY = [["/jeecgsystem","http://192.168.183.88:9999"],["/upload","http://192.168.183.88:9999/upload"],["/documents", "http://192.168.183.88:9050"],["/modelreq", "http://192.168.183.88:9999"],["/webRtc", "http://192.168.183.88:8051"]]
+VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://182.92.126.35:9999/upload"],["/documents", "http://182.92.126.35:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://182.92.126.35:8051"]]
+# VITE_PROXY = [["/jeecgsystem","http://192.168.183.88:9999"],["/upload","http://192.168.183.88:9999/upload"],["/documents", "http://192.168.183.88:9050"],["/modelreq", "http://192.168.183.88:9999"],["/webRtc", "http://192.168.183.88:8051"]]
 # VITE_PROXY = [["/jeecgsystem","http://10.10.150.72:9999"],["/upload","http://localhost:3300/upload"],["/documents", "http://10.10.150.72:9050"],["/modelreq", "http://10.10.150.72:9999"],["/webRtc", "http://192.168.183.216:8051"]]
 #VITE_PROXY = [["/jeecgsystem","http://192.168.1.8:9999"],["/upload","http://localhost:3300/upload"]]
 
@@ -29,7 +29,7 @@ VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//10.10.150.72:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
-VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
-# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
+VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]

src/views/vent/monitorManager/deviceMonitor/components/device/modal/ballvalve.modal.vue

@@ -307,10 +307,10 @@
       }
 
       watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-        // if (newActiveID != oldActiveID) {
-        //   activeDeviceID.value = newActiveID as string;
-        // }
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
+        }
+        // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
         deviceList.value = newDataSource?.filter((item: any, index) => {
           if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
             // activeDeviceID.value = item.deviceID;

src/views/vent/monitorManager/deviceMonitor/components/device/modal/bundle.modal.vue

@@ -266,10 +266,10 @@
       watch(
         [() => props.dataSource, () => props.activeID],
         ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-          // if (newActiveID != oldActiveID) {
-          //   activeDeviceID.value = newActiveID as string;
-          // }
-          activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+          if (newActiveID != oldActiveID) {
+            activeDeviceID.value = newActiveID as string;
+          }
+          // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
           deviceList.value = newDataSource?.filter((item: any, index) => {
             if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
               // activeDeviceID.value = item.deviceID;

src/views/vent/monitorManager/deviceMonitor/components/device/modal/dust.modal.vue

@@ -263,10 +263,10 @@
       }
       watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
         deviceList.value = newDataSource as any[];
-        // if (newActiveID != oldActiveID) {
-        //   activeDeviceID.value = newActiveID as string;
-        // }
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
+        }
+        // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
         newDataSource?.forEach((item: any, index) => {
           if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
             // activeDeviceID.value = item.deviceID;

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal-Gx.vue

@@ -62,7 +62,8 @@
                 value2: posMonitor['warnstate'] == '1',
                 value5: posMonitor['warnstate'] == '2',
                 value3: posMonitor['warnstate'] == '3',
-              }">{{ posMonitor['warnstate']=='0' ? '无报警' :posMonitor['warnstate']=='1' ? '定温' : posMonitor['warnstate']=='2' ? '差温' : posMonitor['warnstate']=='3' ? '预报警' : '--' }}</div>
+              }">{{ posMonitor['warnstate'] == '0' ? '无报警' : posMonitor['warnstate'] == '1' ? '定温' :
+                posMonitor['warnstate'] == '2' ? '差温' : posMonitor['warnstate'] == '3' ? '预报警' : '--' }}</div>
             </div>
           </div>
           <div class="top-item">
@@ -71,7 +72,8 @@
             </div>
             <div class="item-container">
               <div class="title">报警位置</div>
-              <div class="value">{{ posMonitor.warnposition !== undefined && posMonitor.warnposition !== null ? posMonitor.warnposition : '-'
+              <div class="value">{{ posMonitor.warnposition !== undefined && posMonitor.warnposition !== null ?
+                posMonitor.warnposition : '-'
                 }} <span>m</span></div>
             </div>
           </div>
@@ -85,7 +87,7 @@
                 width="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
             </div>
           </div>
-         
+
         </div>
       </div>
     </div>
@@ -97,7 +99,7 @@ import { BasicModal, useModalInner } from '/@/components/Modal';
 import BarAndLine from '/@/components/chart/BarAndLine.vue';
 import { SvgIcon } from '/@/components/Icon';
 import dayjs from 'dayjs';
-import { chartsColumnListGx  } from '../device.data';
+import { chartsColumnListGx } from '../device.data';
 
 
 export default defineComponent({
@@ -161,12 +163,15 @@ export default defineComponent({
     watch(
       [() => props.dataSource, () => props.activeID],
       ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
+        }
+        // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
         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 || []
+            historyList.value = item.history || []
           }
           item.readTime = item.readTime?.substring(11);
           return item;
@@ -445,7 +450,8 @@ export default defineComponent({
     border: none !important;
   }
 }
-:deep(.zxm-table-wrapper){
+
+:deep(.zxm-table-wrapper) {
   padding-top: 20px;
   box-sizing: border-box;
 }

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.bd.vue

@@ -1,13 +1,10 @@
 <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>
@@ -56,7 +53,8 @@
         <div class="right-bottom">
           <span class="base-title">测点监测曲线</span>
           <div class="echarts-box">
-            <BarAndLine xAxisPropType="pos" :dataSource="posList" height="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
+            <BarAndLine xAxisPropType="pos" :dataSource="posList" height="100%" :chartsColumns="chartsColumns"
+              :option="echatsOption" />
           </div>
         </div>
         <div class="right-center">
@@ -70,364 +68,367 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import BarAndLine from '/@/components/chart/BarAndLine.vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import dayjs from 'dayjs';
-  import { formatNum } from '/@/utils/ventutil';
-
-  export default defineComponent({
-    components: { BasicModal, BarAndLine, SvgIcon },
-    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<any>('');
-      const deviceList = ref<any[]>([]);
-      const posList = ref<any[]>([]);
-      const history = ref<any[]>([]);
-      const posMonitor = shallowRef({});
-
-      const echatsOption = {
-        grid: {
-          top: '20%',
-          left: '2px',
-          right: '10px',
-          bottom: '3%',
-          containLabel: true,
+import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import { SvgIcon } from '/@/components/Icon';
+import dayjs from 'dayjs';
+import { formatNum } from '/@/utils/ventutil';
+
+export default defineComponent({
+  components: { BasicModal, BarAndLine, SvgIcon },
+  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<any>('');
+    const deviceList = ref<any[]>([]);
+    const posList = ref<any[]>([]);
+    const history = ref<any[]>([]);
+    const posMonitor = shallowRef({});
+
+    const echatsOption = {
+      grid: {
+        top: '20%',
+        left: '2px',
+        right: '10px',
+        bottom: '3%',
+        containLabel: true,
+      },
+      toolbox: {
+        feature: {},
+      },
+    };
+
+    const chartsColumns = [
+      {
+        legend: '测点温度',
+        seriesName: '(℃)',
+        ymax: 100,
+        yname: '℃',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#FDB146',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'value',
+      },
+    ];
+    const columns = [
+      {
+        title: '位置',
+        dataIndex: 'position',
+        align: 'center',
+        customRender: ({ index }) => {
+          return `测点${index}`;
         },
-        toolbox: {
-          feature: {},
-        },
-      };
-
-      const chartsColumns = [
-        {
-          legend: '测点温度',
-          seriesName: '(℃)',
-          ymax: 100,
-          yname: '℃',
-          linetype: 'line',
-          yaxispos: 'left',
-          color: '#FDB146',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'value',
-        },
-      ];
-      const columns = [
-        {
-          title: '位置',
-          dataIndex: 'position',
-          align: 'center',
-          customRender: ({ index }) => {
-            return `测点${index}`;
-          },
-        },
-        {
-          title: '最高温度(℃)',
-          dataIndex: 'fmax',
-          align: 'center',
-        },
-        {
-          title: '平均温度(℃)',
-          dataIndex: 'favg',
-          align: 'center',
-        },
-        {
-          title: '最低温度(℃)',
-          dataIndex: 'fmin',
-          align: 'center',
-        },
-        {
-          title: '时间',
-          dataIndex: 'time',
-          align: 'center',
-          width: 200,
-        },
-      ];
-
-      const [register, { setModalProps, closeModal }] = useModalInner();
-
-      function handleVisibleChange(visible) {
-        if (visible) {
-          loading.value = true;
-          setModalProps({ loading: true, confirmLoading: true });
-
-          setTimeout(() => {
-            loading.value = false;
-            setModalProps({ loading: false, confirmLoading: false });
-          }, 1000);
-        }
-      }
-
-      // 选择监测
-      function selectDevice(id) {
+      },
+      {
+        title: '最高温度(℃)',
+        dataIndex: 'fmax',
+        align: 'center',
+      },
+      {
+        title: '平均温度(℃)',
+        dataIndex: 'favg',
+        align: 'center',
+      },
+      {
+        title: '最低温度(℃)',
+        dataIndex: 'fmin',
+        align: 'center',
+      },
+      {
+        title: '时间',
+        dataIndex: 'time',
+        align: 'center',
+        width: 200,
+      },
+    ];
+
+    const [register, { setModalProps, closeModal }] = useModalInner();
+
+    function handleVisibleChange(visible) {
+      if (visible) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
+
         setTimeout(() => {
           loading.value = false;
-          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 300);
+        }, 1000);
       }
+    }
 
-      function handleOk(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    // 选择监测
+    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 handleCancel(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    function handleOk(e) {
+      e.preventDefault();
+      closeModal();
+    }
 
-      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-        console.log(newDataSource, 'newDataSource--------------');
-        deviceList.value = newDataSource as any[];
-
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-        newDataSource?.forEach((item: any, index) => {
-          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-            history.value = item.history;
-            posMonitor.value = item.readData;
-            if (item.readData.fibreTemperature) {
-              const list = JSON.parse(item.readData.fibreTemperature);
-              if (list.length > 0) posList.value = list;
-            }
+    function handleCancel(e) {
+      e.preventDefault();
+      closeModal();
+    }
+
+    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+      console.log(newDataSource, 'newDataSource--------------');
+      deviceList.value = newDataSource as any[];
+      if (newActiveID != oldActiveID) {
+        activeDeviceID.value = newActiveID as string;
+      }
+      // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+      newDataSource?.forEach((item: any, index) => {
+        if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+          history.value = item.history;
+          posMonitor.value = item.readData;
+          if (item.readData.fibreTemperature) {
+            const list = JSON.parse(item.readData.fibreTemperature);
+            if (list.length > 0) posList.value = list;
           }
-        });
+        }
       });
-
-      return {
-        register,
-        model: modelRef,
-        currentTime,
-        handleVisibleChange,
-        selectDevice,
-        handleOk,
-        handleCancel,
-        deviceList,
-        activeDeviceID,
-        posMonitor,
-        echatsOption,
-        posList,
-        history,
-        chartsColumns,
-        columns,
-        formatNum,
-      };
-    },
-  });
+    });
+
+    return {
+      register,
+      model: modelRef,
+      currentTime,
+      handleVisibleChange,
+      selectDevice,
+      handleOk,
+      handleCancel,
+      deviceList,
+      activeDeviceID,
+      posMonitor,
+      echatsOption,
+      posList,
+      history,
+      chartsColumns,
+      columns,
+      formatNum,
+    };
+  },
+});
 </script>
 <style lang="less" scoped>
-  .fiber-modal {
-    width: 100%;
-    height: 650px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    .modal-left {
-      width: 200px;
-      height: 100%;
-      overflow-y: auto;
-      background: #ffffff11;
-      padding: 5px;
-      border-radius: 5px;
-
-      .active-device-title {
-        color: aqua;
-      }
+.fiber-modal {
+  width: 100%;
+  height: 650px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .modal-left {
+    width: 200px;
+    height: 100%;
+    overflow-y: auto;
+    background: #ffffff11;
+    padding: 5px;
+    border-radius: 5px;
+
+    .active-device-title {
+      color: aqua;
+    }
 
-      .link-item {
-        position: relative;
-        cursor: pointer;
-        line-height: 30px;
-        padding-left: 30px;
+    .link-item {
+      position: relative;
+      cursor: pointer;
+      line-height: 30px;
+      padding-left: 30px;
 
-        span:hover {
-          color: #89ffff;
-        }
+      span:hover {
+        color: #89ffff;
+      }
 
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 8px;
-          height: 8px;
-          top: 12px;
-          left: 10px;
-          transform: rotateZ(45deg) skew(10deg, 10deg);
-          background: #45d3fd;
-        }
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 8px;
+        height: 8px;
+        top: 12px;
+        left: 10px;
+        transform: rotateZ(45deg) skew(10deg, 10deg);
+        background: #45d3fd;
       }
     }
+  }
 
-    .modal-right {
-      width: calc(100% - 220px);
-      overflow-y: auto;
-
-      .base-title {
-        line-height: 32px;
-        position: relative;
-        padding-left: 20px;
-
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 4px;
-          height: 12px;
-          top: 4px;
-          left: 10px;
-          background: #45d3fd;
-          border-radius: 4px;
-        }
+  .modal-right {
+    width: calc(100% - 220px);
+    overflow-y: auto;
+
+    .base-title {
+      line-height: 32px;
+      position: relative;
+      padding-left: 20px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 4px;
+        height: 12px;
+        top: 4px;
+        left: 10px;
+        background: #45d3fd;
+        border-radius: 4px;
       }
+    }
+
+    .right-top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 10px;
 
-      .right-top {
+      .top-item {
+        width: 200px;
+        height: 80px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-        margin-bottom: 10px;
+        justify-content: center;
+        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: 16px;
+
+        .icon {
+          margin-right: 10px;
+          margin-top: 5px;
+          color: #fdb146;
+        }
 
-        .top-item {
-          width: 200px;
-          height: 80px;
+        .item-container {
+          width: 100px;
           display: flex;
-          flex-direction: row;
+          flex-direction: column;
           justify-content: center;
-          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: 16px;
-
-          .icon {
-            margin-right: 10px;
-            margin-top: 5px;
-            color: #fdb146;
-          }
 
-          .item-container {
-            width: 100px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
+          div {
+            text-align: center;
+          }
 
-            div {
-              text-align: center;
-            }
+          .title {
+            font-size: 18px;
+          }
 
-            .title {
+          .value {
+            text-shadow: 0 0 25px #00fbfe;
+            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+            font-style: normal;
+            background-size: cover;
+            font-family: electronicFont;
+            font-size: 30px;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+            top: -8px;
+
+            span {
+              font-family: Arial, Helvetica, sans-serif;
               font-size: 18px;
-            }
-
-            .value {
-              text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-              font-style: normal;
-              background-size: cover;
-              font-family: electronicFont;
-              font-size: 30px;
-              -webkit-background-clip: text;
-              background-clip: text;
-              -webkit-text-fill-color: transparent;
-              position: relative;
-              top: -8px;
-
-              span {
-                font-family: Arial, Helvetica, sans-serif;
-                font-size: 18px;
-                color: aliceblue;
-              }
+              color: aliceblue;
             }
           }
         }
+      }
 
-        .warning-box {
-          padding-top: 0px;
+      .warning-box {
+        padding-top: 0px;
 
-          .icon {
-            margin-top: 20px;
+        .icon {
+          margin-top: 20px;
 
-            .icon-style {
-              color: #fdb146;
-            }
+          .icon-style {
+            color: #fdb146;
           }
+        }
 
-          .warning-value {
-            font-size: 18px;
-            color: #61ddb1;
-          }
+        .warning-value {
+          font-size: 18px;
+          color: #61ddb1;
         }
       }
+    }
 
-      .right-center {
-        margin-top: 20px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+    .right-center {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
 
-        .table-box {
-          position: relative;
-          width: 100%;
-          height: 250px;
-          :deep(.zxm-table-wrapper) {
-            height: 220px !important;
-            background: #ffffff05 !important;
-            border-bottom: 1px solid #91e9fe80 !important;
-          }
+      .table-box {
+        position: relative;
+        width: 100%;
+        height: 250px;
+
+        :deep(.zxm-table-wrapper) {
+          height: 220px !important;
+          background: #ffffff05 !important;
+          border-bottom: 1px solid #91e9fe80 !important;
         }
+      }
 
-        .warning-box {
-          width: calc(100% - 520px);
+      .warning-box {
+        width: calc(100% - 520px);
 
-          .warning-container {
-            width: 100%;
-            height: convert;
-            background: #009acd00;
+        .warning-container {
+          width: 100%;
+          height: convert;
+          background: #009acd00;
 
-            :deep(.dv-scroll-board) {
-              .row-item {
-                height: 40px !important;
-                line-height: 40px !important;
-              }
+          :deep(.dv-scroll-board) {
+            .row-item {
+              height: 40px !important;
+              line-height: 40px !important;
+            }
 
-              .header-item {
-                border-top: 1px solid #91e9fe !important;
-                border-bottom: 1px solid #91e9fe !important;
-              }
+            .header-item {
+              border-top: 1px solid #91e9fe !important;
+              border-bottom: 1px solid #91e9fe !important;
             }
           }
         }
       }
+    }
 
-      .right-bottom {
-        margin-top: 20px;
+    .right-bottom {
+      margin-top: 20px;
 
-        .echarts-box {
-          width: 100%;
-          height: 230px;
-        }
+      .echarts-box {
+        width: 100%;
+        height: 230px;
       }
     }
   }
+}
 
-  :deep(.zxm-table-body) {
-    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+:deep(.zxm-table-body) {
+  border: 1px solid rgba(57, 232, 255, 0.2) !important;
 
-    .zxm-table-tbody > tr > td {
-      border: none !important;
-    }
+  .zxm-table-tbody>tr>td {
+    border: none !important;
   }
+}
 
-  :deep(.zxm-table-cell) {
-    border-right: none !important;
-  }
+:deep(.zxm-table-cell) {
+  border-right: none !important;
+}
 </style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.cct.vue

@@ -164,7 +164,7 @@
         if (newActiveID != oldActiveID) {
           activeDeviceID.value = newActiveID as string;
         }
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
         newDataSource?.forEach((item: any, index) => {
           if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
             // activeDeviceID.value = item.deviceID;

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.hlg.vue

@@ -678,7 +678,10 @@
         //   },
         // ];
         deviceList.value = newDataSource as any[];
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+         if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
+        }
+        // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
         maxTemp.value = 0;
         newDataSource?.forEach((item: any, index) => {
           if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.sjh.vue

@@ -1,13 +1,10 @@
 <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>
@@ -66,7 +63,8 @@
         <div class="right-bottom">
           <span class="base-title">测点监测曲线</span>
           <div class="echarts-box">
-            <BarAndLine xAxisPropType="tempmax" :dataSource="posList1" height="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
+            <BarAndLine xAxisPropType="tempmax" :dataSource="posList1" height="100%" :chartsColumns="chartsColumns"
+              :option="echatsOption" />
           </div>
         </div>
       </div>
@@ -74,392 +72,396 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watch, shallowRef, reactive } 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 { formatNum } from '/@/utils/ventutil';
-
-  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<any>('');
-      const deviceList = ref<any[]>([]);
-      const posList = reactive<any[]>([]);
-      const posList1 = reactive<any[]>([]);
-      const posMonitor = shallowRef({});
-
-      const echatsOption = {
-        grid: {
-          top: '20%',
-          left: '2px',
-          right: '10px',
-          bottom: '3%',
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {},
-        },
-      };
-
-      const chartsColumns = [
-        {
-          legend: '测点报警温度',
-          seriesName: '(℃)',
-          ymax: 100,
-          yname: '℃',
-          linetype: 'line',
-          yaxispos: 'left',
-          color: '#FDB146',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'value',
-        },
-      ];
-      const columns = [
-        {
-          title: '位置',
-          dataIndex: 'maxposition',
-          align: 'center',
-          width: 120,
-        },
-        {
-          title: '最高温度(℃)',
-          dataIndex: 'tempmax',
-          align: 'center',
-          width: 100,
-        },
-        {
-          title: '起点',
-          dataIndex: 'fiberstart',
-          align: 'center',
-        },
-        {
-          title: '终点',
-          dataIndex: 'fiberend',
-          align: 'center',
-        },
-        {
-          title: '报警状态',
-          dataIndex: 'alarmflag',
-          align: 'center',
-        },
-      ];
-
-      // const warningConfig = reactive({
-      //     header: ['测点', '温度', '预警信息'],
-      //     data: [
-      //         ['测点6', '318℃', '严重报警'],
-      //         ['测点43', '142℃', '一般预警'],
-      //         ['测点23', '167℃', '一般预警'],
-      //         ['测点6', '198℃', '超高预警'],
-      //         ['测点65', '197℃', '超高预警'],
-      //         ['测点78', '154℃', '一般预警'],
-      //         ['测点61', '104℃', '一般预警'],
-      //         ['测点87', '150℃', '一般信息'],
-      //     ],
-      //     index: false,
-      //     columnWidth: [150],
-      //     headerHeight: 38,
-      //     headerBGC: '#3d9dd45d',
-      //     oddRowBGC: '#009acd10',
-      //     evenRowBGC: '#009acd05',
-      //     align: ['center', 'center', 'center'],
-      // });
-
-      const [register, { setModalProps, closeModal }] = useModalInner();
-
-      function handleVisibleChange(visible) {
-        if (visible) {
-          loading.value = true;
-          setModalProps({ loading: true, confirmLoading: true });
-
-          setTimeout(() => {
-            loading.value = false;
-            setModalProps({ loading: false, confirmLoading: false });
-          }, 1000);
-        }
-      }
-
-      // 选择监测
-      function selectDevice(id) {
+import { defineComponent, ref, watch, shallowRef, reactive } 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 { formatNum } from '/@/utils/ventutil';
+
+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<any>('');
+    const deviceList = ref<any[]>([]);
+    const posList = reactive<any[]>([]);
+    const posList1 = reactive<any[]>([]);
+    const posMonitor = shallowRef({});
+
+    const echatsOption = {
+      grid: {
+        top: '20%',
+        left: '2px',
+        right: '10px',
+        bottom: '3%',
+        containLabel: true,
+      },
+      toolbox: {
+        feature: {},
+      },
+    };
+
+    const chartsColumns = [
+      {
+        legend: '测点报警温度',
+        seriesName: '(℃)',
+        ymax: 100,
+        yname: '℃',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#FDB146',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'value',
+      },
+    ];
+    const columns = [
+      {
+        title: '位置',
+        dataIndex: 'maxposition',
+        align: 'center',
+        width: 120,
+      },
+      {
+        title: '最高温度(℃)',
+        dataIndex: 'tempmax',
+        align: 'center',
+        width: 100,
+      },
+      {
+        title: '起点',
+        dataIndex: 'fiberstart',
+        align: 'center',
+      },
+      {
+        title: '终点',
+        dataIndex: 'fiberend',
+        align: 'center',
+      },
+      {
+        title: '报警状态',
+        dataIndex: 'alarmflag',
+        align: 'center',
+      },
+    ];
+
+    // const warningConfig = reactive({
+    //     header: ['测点', '温度', '预警信息'],
+    //     data: [
+    //         ['测点6', '318℃', '严重报警'],
+    //         ['测点43', '142℃', '一般预警'],
+    //         ['测点23', '167℃', '一般预警'],
+    //         ['测点6', '198℃', '超高预警'],
+    //         ['测点65', '197℃', '超高预警'],
+    //         ['测点78', '154℃', '一般预警'],
+    //         ['测点61', '104℃', '一般预警'],
+    //         ['测点87', '150℃', '一般信息'],
+    //     ],
+    //     index: false,
+    //     columnWidth: [150],
+    //     headerHeight: 38,
+    //     headerBGC: '#3d9dd45d',
+    //     oddRowBGC: '#009acd10',
+    //     evenRowBGC: '#009acd05',
+    //     align: ['center', 'center', 'center'],
+    // });
+
+    const [register, { setModalProps, closeModal }] = useModalInner();
+
+    function handleVisibleChange(visible) {
+      if (visible) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
+
         setTimeout(() => {
           loading.value = false;
-          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 300);
+        }, 1000);
       }
+    }
 
-      function handleOk(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    // 选择监测
+    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 handleCancel(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    function handleOk(e) {
+      e.preventDefault();
+      closeModal();
+    }
 
-      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-        console.log(newDataSource, 'newDataSource--------------');
-        deviceList.value = newDataSource as any[];
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-        posList.length = 0;
-        posList1.length = 0;
-        newDataSource?.forEach((item: any, index) => {
-          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-            posMonitor.value = item.readData;
-            posList.push({
-              maxposition: item.readData['maxposition'],
-              tempmax: item.readData['tempmax'],
-              fiberstart: item.readData['fiberstart'],
-              fiberend: item.readData['fiberend'],
-              alarmflag: item.readData['alarmflag'] == '0' ? '正常' : '报警',
-            });
-            let echartList = item.readData.TempStr ? item.readData.TempStr.split(',') : [];
-            echartList.forEach((el, index) => {
-              posList1.push({ tempmax: index + 1, value: el });
-            });
-          }
-        });
-      });
+    function handleCancel(e) {
+      e.preventDefault();
+      closeModal();
+    }
 
-      return {
-        register,
-        model: modelRef,
-        currentTime,
-        handleVisibleChange,
-        selectDevice,
-        handleOk,
-        handleCancel,
-        deviceList,
-        activeDeviceID,
-        posMonitor,
-        echatsOption,
-        posList,
-        posList1,
-        chartsColumns,
-        columns,
-        formatNum,
-        // warningConfig,
-      };
-    },
-  });
+    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+      console.log(newDataSource, 'newDataSource--------------');
+      deviceList.value = newDataSource as any[];
+      if (newActiveID != oldActiveID) {
+        activeDeviceID.value = newActiveID as string;
+      }
+      // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+      posList.length = 0;
+      posList1.length = 0;
+      newDataSource?.forEach((item: any, index) => {
+        if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+          posMonitor.value = item.readData;
+          posList.push({
+            maxposition: item.readData['maxposition'],
+            tempmax: item.readData['tempmax'],
+            fiberstart: item.readData['fiberstart'],
+            fiberend: item.readData['fiberend'],
+            alarmflag: item.readData['alarmflag'] == '0' ? '正常' : '报警',
+          });
+          let echartList = item.readData.TempStr ? item.readData.TempStr.split(',') : [];
+          echartList.forEach((el, index) => {
+            posList1.push({ tempmax: index + 1, value: el });
+          });
+        }
+      });
+    });
+
+    return {
+      register,
+      model: modelRef,
+      currentTime,
+      handleVisibleChange,
+      selectDevice,
+      handleOk,
+      handleCancel,
+      deviceList,
+      activeDeviceID,
+      posMonitor,
+      echatsOption,
+      posList,
+      posList1,
+      chartsColumns,
+      columns,
+      formatNum,
+      // warningConfig,
+    };
+  },
+});
 </script>
 <style lang="less" scoped>
-  .fiber-modal {
-    width: 100%;
-    height: 650px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    .modal-left {
-      width: 200px;
-      height: 100%;
-      overflow-y: auto;
-      background: #ffffff11;
-      padding: 5px;
-      border-radius: 5px;
-
-      .active-device-title {
-        color: aqua;
-      }
+.fiber-modal {
+  width: 100%;
+  height: 650px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .modal-left {
+    width: 200px;
+    height: 100%;
+    overflow-y: auto;
+    background: #ffffff11;
+    padding: 5px;
+    border-radius: 5px;
+
+    .active-device-title {
+      color: aqua;
+    }
 
-      .link-item {
-        position: relative;
-        cursor: pointer;
-        line-height: 30px;
-        padding-left: 30px;
+    .link-item {
+      position: relative;
+      cursor: pointer;
+      line-height: 30px;
+      padding-left: 30px;
 
-        span:hover {
-          color: #89ffff;
-        }
+      span:hover {
+        color: #89ffff;
+      }
 
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 8px;
-          height: 8px;
-          top: 12px;
-          left: 10px;
-          transform: rotateZ(45deg) skew(10deg, 10deg);
-          background: #45d3fd;
-        }
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 8px;
+        height: 8px;
+        top: 12px;
+        left: 10px;
+        transform: rotateZ(45deg) skew(10deg, 10deg);
+        background: #45d3fd;
       }
     }
+  }
 
-    .modal-right {
-      width: calc(100% - 220px);
-      overflow-y: auto;
-
-      .base-title {
-        line-height: 32px;
-        position: relative;
-        padding-left: 20px;
-
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 4px;
-          height: 12px;
-          top: 4px;
-          left: 10px;
-          background: #45d3fd;
-          border-radius: 4px;
-        }
+  .modal-right {
+    width: calc(100% - 220px);
+    overflow-y: auto;
+
+    .base-title {
+      line-height: 32px;
+      position: relative;
+      padding-left: 20px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 4px;
+        height: 12px;
+        top: 4px;
+        left: 10px;
+        background: #45d3fd;
+        border-radius: 4px;
       }
+    }
+
+    .right-top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 10px;
 
-      .right-top {
+      .top-item {
+        width: 200px;
+        height: 80px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-        margin-bottom: 10px;
+        justify-content: center;
+        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: 16px;
+
+        .icon {
+          margin-right: 10px;
+          margin-top: 5px;
+          color: #fdb146;
+        }
 
-        .top-item {
-          width: 200px;
-          height: 80px;
+        .item-container {
+          width: 100px;
           display: flex;
-          flex-direction: row;
+          flex-direction: column;
           justify-content: center;
-          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: 16px;
-
-          .icon {
-            margin-right: 10px;
-            margin-top: 5px;
-            color: #fdb146;
-          }
 
-          .item-container {
-            width: 100px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
+          div {
+            text-align: center;
+          }
 
-            div {
-              text-align: center;
-            }
+          .title {
+            font-size: 18px;
+          }
 
-            .title {
+          .value {
+            text-shadow: 0 0 25px #00fbfe;
+            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+            font-style: normal;
+            background-size: cover;
+            font-family: electronicFont;
+            font-size: 30px;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+            top: -8px;
+
+            span {
+              font-family: Arial, Helvetica, sans-serif;
               font-size: 18px;
-            }
-
-            .value {
-              text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-              font-style: normal;
-              background-size: cover;
-              font-family: electronicFont;
-              font-size: 30px;
-              -webkit-background-clip: text;
-              background-clip: text;
-              -webkit-text-fill-color: transparent;
-              position: relative;
-              top: -8px;
-
-              span {
-                font-family: Arial, Helvetica, sans-serif;
-                font-size: 18px;
-                color: aliceblue;
-              }
+              color: aliceblue;
             }
           }
         }
+      }
 
-        .warning-box {
-          padding-top: 0px;
+      .warning-box {
+        padding-top: 0px;
 
-          .icon {
-            margin-top: 20px;
+        .icon {
+          margin-top: 20px;
 
-            .icon-style {
-              color: #fdb146;
-            }
-          }
-
-          .warning-value {
-            font-size: 18px;
-            color: #61ddb1;
+          .icon-style {
+            color: #fdb146;
           }
         }
-      }
 
-      .right-center {
-        margin-top: 20px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-
-        .table-box {
-          position: relative;
-          width: 100%;
-          height: 250px;
-          :deep(.zxm-table-wrapper) {
-            height: 220px !important;
-            background: #ffffff05 !important;
-            border-bottom: 1px solid #91e9fe80 !important;
-          }
+        .warning-value {
+          font-size: 18px;
+          color: #61ddb1;
         }
-
-        // .warning-box {
-        //     width: calc(100% - 520px);
-
-        //     .warning-container {
-        //         width: 100%;
-        //         height: convert;
-        //         background: #009acd00;
-
-        //         :deep(.dv-scroll-board) {
-        //             .row-item {
-        //                 height: 40px !important;
-        //                 line-height: 40px !important;
-        //             }
-
-        //             .header-item {
-        //                 border-top: 1px solid #91e9fe !important;
-        //                 border-bottom: 1px solid #91e9fe !important;
-        //             }
-        //         }
-        //     }
-        // }
       }
+    }
 
-      .right-bottom {
-        margin-top: 20px;
+    .right-center {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
 
-        .echarts-box {
-          width: 100%;
-          height: 230px;
+      .table-box {
+        position: relative;
+        width: 100%;
+        height: 250px;
+
+        :deep(.zxm-table-wrapper) {
+          height: 220px !important;
+          background: #ffffff05 !important;
+          border-bottom: 1px solid #91e9fe80 !important;
         }
       }
+
+      // .warning-box {
+      //     width: calc(100% - 520px);
+
+      //     .warning-container {
+      //         width: 100%;
+      //         height: convert;
+      //         background: #009acd00;
+
+      //         :deep(.dv-scroll-board) {
+      //             .row-item {
+      //                 height: 40px !important;
+      //                 line-height: 40px !important;
+      //             }
+
+      //             .header-item {
+      //                 border-top: 1px solid #91e9fe !important;
+      //                 border-bottom: 1px solid #91e9fe !important;
+      //             }
+      //         }
+      //     }
+      // }
     }
-  }
 
-  :deep(.zxm-table-body) {
-    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+    .right-bottom {
+      margin-top: 20px;
 
-    .zxm-table-tbody > tr > td {
-      border: none !important;
+      .echarts-box {
+        width: 100%;
+        height: 230px;
+      }
     }
   }
+}
+
+:deep(.zxm-table-body) {
+  border: 1px solid rgba(57, 232, 255, 0.2) !important;
 
-  :deep(.zxm-table-cell) {
-    border-right: none !important;
+  .zxm-table-tbody>tr>td {
+    border: none !important;
   }
+}
+
+:deep(.zxm-table-cell) {
+  border-right: none !important;
+}
 </style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.sw.vue

@@ -148,7 +148,10 @@ export default defineComponent({
         watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
             console.log(newDataSource, 'newDataSource--------------');
             deviceList.value = newDataSource as any[];
-            activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+            if (newActiveID != oldActiveID) {
+                activeDeviceID.value = newActiveID as string;
+            }
+            // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
             newDataSource?.forEach((item: any, index) => {
                 if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
                     posMonitor.value = item.readData;

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.vue

@@ -1,13 +1,10 @@
 <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>
@@ -61,24 +58,16 @@
           <div class="warning-box">
             <span class="base-title">预警历史详情</span>
             <div class="warning-container">
-              <dv-scroll-board
-                ref="scrollBoard"
-                :config="warningConfig"
-                style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33"
-              />
+              <dv-scroll-board ref="scrollBoard" :config="warningConfig"
+                style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33" />
             </div>
           </div>
         </div>
         <div class="right-bottom">
           <span class="base-title">测点监测曲线</span>
           <div class="echarts-box">
-            <BarAndLine
-              xAxisPropType="Section_AlarmTemp"
-              :dataSource="posList1"
-              height="100%"
-              :chartsColumns="chartsColumns"
-              :option="echatsOption"
-            />
+            <BarAndLine xAxisPropType="Section_AlarmTemp" :dataSource="posList1" height="100%"
+              :chartsColumns="chartsColumns" :option="echatsOption" />
           </div>
         </div>
       </div>
@@ -86,411 +75,414 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watch, shallowRef, reactive } 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<any>('');
-      const deviceList = ref<any[]>([]);
-      const posList = reactive<any[]>([]);
-      const posList1 = reactive<any[]>([]);
-      const posMonitor = shallowRef({});
-
-      const echatsOption = {
-        grid: {
-          top: '20%',
-          left: '2px',
-          right: '10px',
-          bottom: '3%',
-          containLabel: true,
+import { defineComponent, ref, watch, shallowRef, reactive } 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<any>('');
+    const deviceList = ref<any[]>([]);
+    const posList = reactive<any[]>([]);
+    const posList1 = reactive<any[]>([]);
+    const posMonitor = shallowRef({});
+
+    const echatsOption = {
+      grid: {
+        top: '20%',
+        left: '2px',
+        right: '10px',
+        bottom: '3%',
+        containLabel: true,
+      },
+      toolbox: {
+        feature: {},
+      },
+    };
+
+    const chartsColumns = [
+      {
+        legend: '测点报警温度',
+        seriesName: '(℃)',
+        ymax: 100,
+        yname: '℃',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#FDB146',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'value',
+      },
+    ];
+    const columns = [
+      {
+        title: '位置',
+        dataIndex: 'position',
+        width: 60,
+        align: 'center',
+        customRender: ({ index }) => {
+          return `测点${index}`;
         },
-        toolbox: {
-          feature: {},
-        },
-      };
-
-      const chartsColumns = [
-        {
-          legend: '测点报警温度',
-          seriesName: '(℃)',
-          ymax: 100,
-          yname: '℃',
-          linetype: 'line',
-          yaxispos: 'left',
-          color: '#FDB146',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'value',
-        },
-      ];
-      const columns = [
-        {
-          title: '位置',
-          dataIndex: 'position',
-          width: 60,
-          align: 'center',
-          customRender: ({ index }) => {
-            return `测点${index}`;
-          },
-        },
-        {
-          title: '最高温度(℃)',
-          dataIndex: 'Section_MaxTemp',
-          align: 'center',
-          width: 100,
-        },
-        {
-          title: '对应米数(m)',
-          dataIndex: 'Section_MaxTempPos',
-          align: 'center',
-          width: 100,
-        },
-        {
-          title: '起点',
-          dataIndex: 'Section_BeginPosition',
-          align: 'center',
-          width: 60,
-        },
-        {
-          title: '终点',
-          dataIndex: 'Section_EndPosition',
-          align: 'center',
-          width: 60,
-        },
-        {
-          title: '报警温度(℃)',
-          dataIndex: 'Section_AlarmTemp',
-          align: 'center',
-        },
-      ];
-
-      const warningConfig = reactive({
-        header: ['测点', '温度', '预警信息'],
-        data: [
-          ['测点6', '318℃', '严重报警'],
-          ['测点43', '142℃', '一般预警'],
-          ['测点23', '167℃', '一般预警'],
-          ['测点6', '198℃', '超高预警'],
-          ['测点65', '197℃', '超高预警'],
-          ['测点78', '154℃', '一般预警'],
-          ['测点61', '104℃', '一般预警'],
-          ['测点87', '150℃', '一般信息'],
-        ],
-        index: false,
-        columnWidth: [150],
-        headerHeight: 38,
-        headerBGC: '#3d9dd45d',
-        oddRowBGC: '#009acd10',
-        evenRowBGC: '#009acd05',
-        align: ['center', 'center', 'center'],
-      });
-
-      const [register, { setModalProps, closeModal }] = useModalInner();
-
-      function handleVisibleChange(visible) {
-        if (visible) {
-          loading.value = true;
-          setModalProps({ loading: true, confirmLoading: true });
-
-          setTimeout(() => {
-            loading.value = false;
-            setModalProps({ loading: false, confirmLoading: false });
-          }, 1000);
-        }
-      }
-
-      // 选择监测
-      function selectDevice(id) {
+      },
+      {
+        title: '最高温度(℃)',
+        dataIndex: 'Section_MaxTemp',
+        align: 'center',
+        width: 100,
+      },
+      {
+        title: '对应米数(m)',
+        dataIndex: 'Section_MaxTempPos',
+        align: 'center',
+        width: 100,
+      },
+      {
+        title: '起点',
+        dataIndex: 'Section_BeginPosition',
+        align: 'center',
+        width: 60,
+      },
+      {
+        title: '终点',
+        dataIndex: 'Section_EndPosition',
+        align: 'center',
+        width: 60,
+      },
+      {
+        title: '报警温度(℃)',
+        dataIndex: 'Section_AlarmTemp',
+        align: 'center',
+      },
+    ];
+
+    const warningConfig = reactive({
+      header: ['测点', '温度', '预警信息'],
+      data: [
+        ['测点6', '318℃', '严重报警'],
+        ['测点43', '142℃', '一般预警'],
+        ['测点23', '167℃', '一般预警'],
+        ['测点6', '198℃', '超高预警'],
+        ['测点65', '197℃', '超高预警'],
+        ['测点78', '154℃', '一般预警'],
+        ['测点61', '104℃', '一般预警'],
+        ['测点87', '150℃', '一般信息'],
+      ],
+      index: false,
+      columnWidth: [150],
+      headerHeight: 38,
+      headerBGC: '#3d9dd45d',
+      oddRowBGC: '#009acd10',
+      evenRowBGC: '#009acd05',
+      align: ['center', 'center', 'center'],
+    });
+
+    const [register, { setModalProps, closeModal }] = useModalInner();
+
+    function handleVisibleChange(visible) {
+      if (visible) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
+
         setTimeout(() => {
           loading.value = false;
-          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 300);
+        }, 1000);
       }
+    }
 
-      function handleOk(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    // 选择监测
+    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 handleCancel(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    function handleOk(e) {
+      e.preventDefault();
+      closeModal();
+    }
 
-      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-        console.log(newDataSource, 'newDataSource--------------');
-        deviceList.value = newDataSource as any[];
-
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-        newDataSource?.forEach((item: any, index) => {
-          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-            // activeDeviceID.value = item.deviceID;
-            // if (item.readData.fibreTemperature) {
-            //   const list = JSON.parse(item.readData.fibreTemperature);
-            //   if (list.length > 0) posList.value = list;
-            // }
-            posMonitor.value = item.readData;
-            posList.length = 0;
-            posList1.length = 0;
-            let counts = Math.ceil((Object.keys(item.readData).length - 2) / 5);
-            for (let i = 0; i < counts; i++) {
-              posList.push({
-                Section_MaxTemp: item.readData[`Section${i + 1}_MaxTemp`],
-                Section_MaxTempPos: item.readData[`Section${i + 1}_MaxTempPos`],
-                Section_BeginPosition: item.readData[`Section${i + 1}_BeginPosition`],
-                Section_EndPosition: item.readData[`Section${i + 1}_EndPosition`],
-                Section_AlarmTemp: item.readData[`Section${i + 1}_AlarmTemp`],
-              });
-            }
-            posList.forEach((el, index) => {
-              posList1.push({ Section_AlarmTemp: index + 1, value: el.Section_AlarmTemp });
+    function handleCancel(e) {
+      e.preventDefault();
+      closeModal();
+    }
+
+    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+      console.log(newDataSource, 'newDataSource--------------');
+      deviceList.value = newDataSource as any[];
+      if (newActiveID != oldActiveID) {
+        activeDeviceID.value = newActiveID as string;
+      }
+      // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+      newDataSource?.forEach((item: any, index) => {
+        if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+          // activeDeviceID.value = item.deviceID;
+          // if (item.readData.fibreTemperature) {
+          //   const list = JSON.parse(item.readData.fibreTemperature);
+          //   if (list.length > 0) posList.value = list;
+          // }
+          posMonitor.value = item.readData;
+          posList.length = 0;
+          posList1.length = 0;
+          let counts = Math.ceil((Object.keys(item.readData).length - 2) / 5);
+          for (let i = 0; i < counts; i++) {
+            posList.push({
+              Section_MaxTemp: item.readData[`Section${i + 1}_MaxTemp`],
+              Section_MaxTempPos: item.readData[`Section${i + 1}_MaxTempPos`],
+              Section_BeginPosition: item.readData[`Section${i + 1}_BeginPosition`],
+              Section_EndPosition: item.readData[`Section${i + 1}_EndPosition`],
+              Section_AlarmTemp: item.readData[`Section${i + 1}_AlarmTemp`],
             });
-            console.log(posList, 'posList-----------------');
-            console.log(posList1, 'posList1-----------------');
           }
-        });
+          posList.forEach((el, index) => {
+            posList1.push({ Section_AlarmTemp: index + 1, value: el.Section_AlarmTemp });
+          });
+          console.log(posList, 'posList-----------------');
+          console.log(posList1, 'posList1-----------------');
+        }
       });
-
-      return {
-        register,
-        model: modelRef,
-        currentTime,
-        handleVisibleChange,
-        selectDevice,
-        handleOk,
-        handleCancel,
-        deviceList,
-        activeDeviceID,
-        posMonitor,
-        echatsOption,
-        posList,
-        posList1,
-        chartsColumns,
-        columns,
-        warningConfig,
-      };
-    },
-  });
+    });
+
+    return {
+      register,
+      model: modelRef,
+      currentTime,
+      handleVisibleChange,
+      selectDevice,
+      handleOk,
+      handleCancel,
+      deviceList,
+      activeDeviceID,
+      posMonitor,
+      echatsOption,
+      posList,
+      posList1,
+      chartsColumns,
+      columns,
+      warningConfig,
+    };
+  },
+});
 </script>
 <style lang="less" scoped>
-  .fiber-modal {
-    width: 100%;
-    height: 650px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    .modal-left {
-      width: 200px;
-      height: 100%;
-      overflow-y: auto;
-      background: #ffffff11;
-      padding: 5px;
-      border-radius: 5px;
-
-      .active-device-title {
-        color: aqua;
-      }
+.fiber-modal {
+  width: 100%;
+  height: 650px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .modal-left {
+    width: 200px;
+    height: 100%;
+    overflow-y: auto;
+    background: #ffffff11;
+    padding: 5px;
+    border-radius: 5px;
+
+    .active-device-title {
+      color: aqua;
+    }
 
-      .link-item {
-        position: relative;
-        cursor: pointer;
-        line-height: 30px;
-        padding-left: 30px;
+    .link-item {
+      position: relative;
+      cursor: pointer;
+      line-height: 30px;
+      padding-left: 30px;
 
-        span:hover {
-          color: #89ffff;
-        }
+      span:hover {
+        color: #89ffff;
+      }
 
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 8px;
-          height: 8px;
-          top: 12px;
-          left: 10px;
-          transform: rotateZ(45deg) skew(10deg, 10deg);
-          background: #45d3fd;
-        }
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 8px;
+        height: 8px;
+        top: 12px;
+        left: 10px;
+        transform: rotateZ(45deg) skew(10deg, 10deg);
+        background: #45d3fd;
       }
     }
+  }
 
-    .modal-right {
-      width: calc(100% - 220px);
-      overflow-y: auto;
-
-      .base-title {
-        line-height: 32px;
-        position: relative;
-        padding-left: 20px;
-
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 4px;
-          height: 12px;
-          top: 4px;
-          left: 10px;
-          background: #45d3fd;
-          border-radius: 4px;
-        }
+  .modal-right {
+    width: calc(100% - 220px);
+    overflow-y: auto;
+
+    .base-title {
+      line-height: 32px;
+      position: relative;
+      padding-left: 20px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 4px;
+        height: 12px;
+        top: 4px;
+        left: 10px;
+        background: #45d3fd;
+        border-radius: 4px;
       }
+    }
 
-      .right-top {
+    .right-top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 10px;
+
+      .top-item {
+        width: 200px;
+        height: 80px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-        margin-bottom: 10px;
+        justify-content: center;
+        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: 16px;
+
+        .icon {
+          margin-right: 10px;
+          margin-top: 5px;
+          color: #fdb146;
+        }
 
-        .top-item {
-          width: 200px;
-          height: 80px;
+        .item-container {
+          width: 100px;
           display: flex;
-          flex-direction: row;
+          flex-direction: column;
           justify-content: center;
-          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: 16px;
-
-          .icon {
-            margin-right: 10px;
-            margin-top: 5px;
-            color: #fdb146;
-          }
 
-          .item-container {
-            width: 100px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
+          div {
+            text-align: center;
+          }
 
-            div {
-              text-align: center;
-            }
+          .title {
+            font-size: 18px;
+          }
 
-            .title {
+          .value {
+            text-shadow: 0 0 25px #00fbfe;
+            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+            font-style: normal;
+            background-size: cover;
+            font-family: electronicFont;
+            font-size: 30px;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+            top: -8px;
+
+            span {
+              font-family: Arial, Helvetica, sans-serif;
               font-size: 18px;
-            }
-
-            .value {
-              text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-              font-style: normal;
-              background-size: cover;
-              font-family: electronicFont;
-              font-size: 30px;
-              -webkit-background-clip: text;
-              background-clip: text;
-              -webkit-text-fill-color: transparent;
-              position: relative;
-              top: -8px;
-
-              span {
-                font-family: Arial, Helvetica, sans-serif;
-                font-size: 18px;
-                color: aliceblue;
-              }
+              color: aliceblue;
             }
           }
         }
+      }
 
-        .warning-box {
-          padding-top: 0px;
+      .warning-box {
+        padding-top: 0px;
 
-          .icon {
-            margin-top: 20px;
+        .icon {
+          margin-top: 20px;
 
-            .icon-style {
-              color: #fdb146;
-            }
+          .icon-style {
+            color: #fdb146;
           }
+        }
 
-          .warning-value {
-            font-size: 18px;
-            color: #61ddb1;
-          }
+        .warning-value {
+          font-size: 18px;
+          color: #61ddb1;
         }
       }
+    }
 
-      .right-center {
-        margin-top: 20px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-
-        .table-box {
-          position: relative;
-          width: 500px;
-          height: 250px;
-          :deep(.zxm-table-wrapper) {
-            height: 220px !important;
-            background: #ffffff05 !important;
-            border-bottom: 1px solid #91e9fe80 !important;
-          }
+    .right-center {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .table-box {
+        position: relative;
+        width: 500px;
+        height: 250px;
+
+        :deep(.zxm-table-wrapper) {
+          height: 220px !important;
+          background: #ffffff05 !important;
+          border-bottom: 1px solid #91e9fe80 !important;
         }
+      }
 
-        .warning-box {
-          width: calc(100% - 520px);
+      .warning-box {
+        width: calc(100% - 520px);
 
-          .warning-container {
-            width: 100%;
-            height: convert;
-            background: #009acd00;
+        .warning-container {
+          width: 100%;
+          height: convert;
+          background: #009acd00;
 
-            :deep(.dv-scroll-board) {
-              .row-item {
-                height: 40px !important;
-                line-height: 40px !important;
-              }
+          :deep(.dv-scroll-board) {
+            .row-item {
+              height: 40px !important;
+              line-height: 40px !important;
+            }
 
-              .header-item {
-                border-top: 1px solid #91e9fe !important;
-                border-bottom: 1px solid #91e9fe !important;
-              }
+            .header-item {
+              border-top: 1px solid #91e9fe !important;
+              border-bottom: 1px solid #91e9fe !important;
             }
           }
         }
       }
+    }
 
-      .right-bottom {
-        margin-top: 20px;
+    .right-bottom {
+      margin-top: 20px;
 
-        .echarts-box {
-          width: 100%;
-          height: 230px;
-        }
+      .echarts-box {
+        width: 100%;
+        height: 230px;
       }
     }
   }
+}
 
-  :deep(.zxm-table-body) {
-    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+:deep(.zxm-table-body) {
+  border: 1px solid rgba(57, 232, 255, 0.2) !important;
 
-    .zxm-table-tbody > tr > td {
-      border: none !important;
-    }
+  .zxm-table-tbody>tr>td {
+    border: none !important;
   }
+}
 
-  :deep(.zxm-table-cell) {
-    border-right: none !important;
-  }
+:deep(.zxm-table-cell) {
+  border-right: none !important;
+}
 </style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/firemon.modal.vue

@@ -1,21 +1,10 @@
 <template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    :title="`智慧球监测详情 ${currentTime}`"
-    width="1200px"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    wrapClassName="bundle-modal"
-  >
+  <BasicModal v-bind="$attrs" @register="register" :title="`智慧球监测详情 ${currentTime}`" width="1200px" @ok="handleOk"
+    @cancel="handleCancel" wrapClassName="bundle-modal">
     <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>
@@ -105,19 +94,11 @@
           </div>
         </div>
         <div class="right-bottom">
-          <span class="base-title"
-            >设备监测曲线&nbsp; <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' : '' }}</span></span
-          >
+          <span class="base-title">设备监测曲线&nbsp; <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' :
+              '' }}</span></span>
           <div class="echarts-box">
-            <BarAndLine
-              class="echarts-line"
-              :xAxisPropType="xAxisPropType"
-              :dataSource="historyList"
-              height="100%"
-              width="100%"
-              :chartsColumns="chartsColumns"
-              :option="echatsOption"
-            />
+            <BarAndLine class="echarts-line" :xAxisPropType="xAxisPropType" :dataSource="historyList" height="100%"
+              width="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
 
             <!-- 爆炸三角形 -->
             <!-- <div style="width: 35%; height: 100%; margin: 0px auto">
@@ -130,433 +111,433 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import BarAndLine from '/@/components/chart/BarAndLine.vue';
-  // import blastDelta from './blastDelta.vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import dayjs from 'dayjs';
-  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-  import { chartsColumnList } from '../device.data';
-  import { listdays, getHistoryData } from '../device.api';
-  import { isNil } from 'lodash-es';
-
-  export default defineComponent({
-    components: { BasicModal, BarAndLine, SvgIcon },
-    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: '29%',
-          left: '3',
-          right: '45',
-          bottom: '3%',
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {},
-        },
-      };
-
-      const chartsColumnArr = getTableHeaderColumns('firemon_chart');
-      const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
-      const xAxisPropType = ref('ttime');
-      const [register, { setModalProps, closeModal }] = useModalInner();
-
-      function handleVisibleChange(visible) {
-        if (visible) {
-          loading.value = true;
-          setModalProps({ loading: true, confirmLoading: true });
-
-          setTimeout(() => {
-            loading.value = false;
-            setModalProps({ loading: false, confirmLoading: false });
-          }, 1000);
-        }
-      }
-
-      // 选择监测
-      function selectDevice(id) {
+import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+// import blastDelta from './blastDelta.vue';
+import { SvgIcon } from '/@/components/Icon';
+import dayjs from 'dayjs';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { chartsColumnList } from '../device.data';
+import { listdays, getHistoryData } from '../device.api';
+import { isNil } from 'lodash-es';
+
+export default defineComponent({
+  components: { BasicModal, BarAndLine, SvgIcon },
+  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: '29%',
+        left: '3',
+        right: '45',
+        bottom: '3%',
+        containLabel: true,
+      },
+      toolbox: {
+        feature: {},
+      },
+    };
+
+    const chartsColumnArr = getTableHeaderColumns('firemon_chart');
+    const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
+    const xAxisPropType = ref('ttime');
+    const [register, { setModalProps, closeModal }] = useModalInner();
+
+    function handleVisibleChange(visible) {
+      if (visible) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
+
         setTimeout(() => {
           loading.value = false;
-          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 300);
-        getListdays();
+        }, 1000);
       }
+    }
 
-      function handleOk(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    // 选择监测
+    function selectDevice(id) {
+      loading.value = true;
+      setModalProps({ loading: true, confirmLoading: true });
+      setTimeout(() => {
+        loading.value = false;
+        activeDeviceID.value = id;
+        setModalProps({ loading: false, confirmLoading: false });
+      }, 300);
+      getListdays();
+    }
 
-      function handleCancel(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    function handleOk(e) {
+      e.preventDefault();
+      closeModal();
+    }
 
-      //获取历史数据
-      async function getListdays() {
-        if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
-          xAxisPropType.value = 'ttime';
-          const ttime_begin = dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss');
-          const ttime_end = dayjs().format('YYYY-MM-DD HH:mm:ss');
-          const pageNo = 1;
-          const pageSize = 100;
-          const skip = 8;
-          const strtype = posMonitor.value.deviceType;
-          let res = await listdays({
-            ttime_begin,
-            ttime_end,
-            pageNo,
-            pageSize,
-            skip,
-            strtype,
-            column: 'createTime',
-            gdeviceid: activeDeviceID.value,
+    function handleCancel(e) {
+      e.preventDefault();
+      closeModal();
+    }
+
+    //获取历史数据
+    async function getListdays() {
+      if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
+        xAxisPropType.value = 'ttime';
+        const ttime_begin = dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss');
+        const ttime_end = dayjs().format('YYYY-MM-DD HH:mm:ss');
+        const pageNo = 1;
+        const pageSize = 100;
+        const skip = 8;
+        const strtype = posMonitor.value.deviceType;
+        let res = await listdays({
+          ttime_begin,
+          ttime_end,
+          pageNo,
+          pageSize,
+          skip,
+          strtype,
+          column: 'createTime',
+          gdeviceid: activeDeviceID.value,
+        });
+        let data = res.datalist.records;
+        if (data.length != 0) {
+          data.forEach((el) => {
+            Object.assign(el, el.readData);
+          });
+        }
+        historyList.value = data;
+      } else {
+        const params = {
+          pageNum: 1,
+          pageSize: 100,
+          startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
+          endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
+          deviceId: activeDeviceID.value,
+          interval: '1h',
+          isEmployee: true,
+        };
+        xAxisPropType.value = 'time';
+        const result = await getHistoryData({ ...params });
+        if (result['records'].length != 0) {
+          result['records'].forEach((el) => {
+            el.ch2val = el.C2H4;
+            el.chval = el.C2H2;
+            el.co2val = el.CO2;
+            el.coval = el.CO;
+            el.gasval = el.CH4;
+            el.o2val = el.O2;
           });
-          let data = res.datalist.records;
-          if (data.length != 0) {
-            data.forEach((el) => {
-              Object.assign(el, el.readData);
-            });
-          }
-          historyList.value = data;
-        } else {
-          const params = {
-            pageNum: 1,
-            pageSize: 100,
-            startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
-            endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
-            deviceId: activeDeviceID.value,
-            interval: '1h',
-            isEmployee: true,
-          };
-          xAxisPropType.value = 'time';
-          const result = await getHistoryData({ ...params });
-          if (result['records'].length != 0) {
-            result['records'].forEach((el) => {
-              el.ch2val = el.C2H4;
-              el.chval = el.C2H2;
-              el.co2val = el.CO2;
-              el.coval = el.CO;
-              el.gasval = el.CH4;
-              el.o2val = el.O2;
-            });
-          }
-          historyList.value = result['records'];
         }
+        historyList.value = result['records'];
       }
+    }
 
-      function get(object, path) {
-        return isNil(object[path]) ? '-' : object[path];
-      }
+    function get(object, path) {
+      return isNil(object[path]) ? '-' : object[path];
+    }
 
-      watch(
-        [() => props.dataSource, () => props.activeID],
-        ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-          // if (newActiveID != oldActiveID) {
-          //   activeDeviceID.value = newActiveID as string;
-          // }
-          activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-          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);
-            }
-            item.readTime = item.readTime?.substring(11);
-            return item;
-          });
-        },
-        { immediate: true }
-      );
-      onMounted(() => {
-        getListdays();
-      });
-      return {
-        register,
-        model: modelRef,
-        currentTime,
-        handleVisibleChange,
-        selectDevice,
-        handleOk,
-        handleCancel,
-        deviceList,
-        historyList,
-        activeDeviceID,
-        posMonitor,
-        echatsOption,
-        posList,
-        chartsColumns,
-        xAxisPropType,
-        get,
-      };
-    },
-  });
+    watch(
+      [() => props.dataSource, () => props.activeID],
+      ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
+        }
+        // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        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);
+          }
+          item.readTime = item.readTime?.substring(11);
+          return item;
+        });
+      },
+      { immediate: true }
+    );
+    onMounted(() => {
+      getListdays();
+    });
+    return {
+      register,
+      model: modelRef,
+      currentTime,
+      handleVisibleChange,
+      selectDevice,
+      handleOk,
+      handleCancel,
+      deviceList,
+      historyList,
+      activeDeviceID,
+      posMonitor,
+      echatsOption,
+      posList,
+      chartsColumns,
+      xAxisPropType,
+      get,
+    };
+  },
+});
 </script>
 <style lang="less">
-  .bundle-modal {
-    .zxm-modal {
-      top: 30px !important;
-    }
+.bundle-modal {
+  .zxm-modal {
+    top: 30px !important;
   }
+}
 </style>
 
 <style lang="less" scoped>
-  .fiber-modal {
-    width: 100%;
-    height: 650px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    .modal-left {
-      width: 200px;
-      height: 100%;
-      overflow-y: auto;
-      background: #ffffff11;
-      padding: 5px;
-      border-radius: 5px;
-
-      .active-device-title {
-        color: aqua;
-      }
+.fiber-modal {
+  width: 100%;
+  height: 650px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .modal-left {
+    width: 200px;
+    height: 100%;
+    overflow-y: auto;
+    background: #ffffff11;
+    padding: 5px;
+    border-radius: 5px;
+
+    .active-device-title {
+      color: aqua;
+    }
 
-      .link-item {
-        position: relative;
-        cursor: pointer;
-        line-height: 30px;
-        padding-left: 30px;
+    .link-item {
+      position: relative;
+      cursor: pointer;
+      line-height: 30px;
+      padding-left: 30px;
 
-        span:hover {
-          color: #89ffff;
-        }
+      span:hover {
+        color: #89ffff;
+      }
 
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 8px;
-          height: 8px;
-          top: 12px;
-          left: 10px;
-          transform: rotateZ(45deg) skew(10deg, 10deg);
-          background: #45d3fd;
-        }
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 8px;
+        height: 8px;
+        top: 12px;
+        left: 10px;
+        transform: rotateZ(45deg) skew(10deg, 10deg);
+        background: #45d3fd;
       }
     }
+  }
 
-    .modal-right {
-      width: calc(100% - 220px);
-      overflow-y: auto;
-
-      .base-title {
-        line-height: 32px;
-        position: relative;
-        padding-left: 20px;
-
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 4px;
-          height: 12px;
-          top: 4px;
-          left: 10px;
-          background: #45d3fd;
-          border-radius: 4px;
-        }
+  .modal-right {
+    width: calc(100% - 220px);
+    overflow-y: auto;
+
+    .base-title {
+      line-height: 32px;
+      position: relative;
+      padding-left: 20px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 4px;
+        height: 12px;
+        top: 4px;
+        left: 10px;
+        background: #45d3fd;
+        border-radius: 4px;
       }
+    }
+
+    .right-top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
 
-      .right-top {
+      .top-item {
+        width: 220px;
+        height: 100px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        margin-bottom: 10px;
+        justify-content: center;
+        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 {
+          margin-right: 10px;
+          margin-top: 5px;
+          color: #fdb146;
+        }
 
-        .top-item {
-          width: 220px;
-          height: 100px;
+        .item-container {
+          width: 110px;
           display: flex;
-          flex-direction: row;
+          flex-direction: column;
           justify-content: center;
-          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 {
-            margin-right: 10px;
-            margin-top: 5px;
-            color: #fdb146;
-          }
 
-          .item-container {
-            width: 110px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
+          div {
+            text-align: center;
+          }
 
-            div {
-              text-align: center;
-            }
+          .title {
+            font-size: 18px;
+          }
 
-            .title {
+          .value {
+            text-shadow: 0 0 25px #00fbfe;
+            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+            font-style: normal;
+            background-size: cover;
+            font-family: electronicFont;
+            font-size: 30px;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+            top: -8px;
+
+            span {
+              font-family: Arial, Helvetica, sans-serif;
               font-size: 18px;
-            }
-
-            .value {
-              text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-              font-style: normal;
-              background-size: cover;
-              font-family: electronicFont;
-              font-size: 30px;
-              -webkit-background-clip: text;
-              background-clip: text;
-              -webkit-text-fill-color: transparent;
-              position: relative;
-              top: -8px;
-
-              span {
-                font-family: Arial, Helvetica, sans-serif;
-                font-size: 18px;
-                color: aliceblue;
-              }
+              color: aliceblue;
             }
           }
         }
+      }
 
-        .warning-box {
-          padding-top: 0px;
+      .warning-box {
+        padding-top: 0px;
 
-          .icon {
-            margin-top: 20px;
+        .icon {
+          margin-top: 20px;
 
-            :deep(.icon-style) {
-              width: auto;
-              color: #fdb146;
-            }
+          :deep(.icon-style) {
+            width: auto;
+            color: #fdb146;
           }
+        }
 
-          .warning-value {
-            font-size: 18px;
-            color: #61ddb1;
-          }
+        .warning-value {
+          font-size: 18px;
+          color: #61ddb1;
+        }
 
-          .value1 {
-            font-size: 18px;
-            color: rgb(145, 230, 9) !important;
-          }
+        .value1 {
+          font-size: 18px;
+          color: rgb(145, 230, 9) !important;
+        }
 
-          .value2 {
-            font-size: 18px;
-            // color: rgb(0, 242, 255) !important;
-            color: #ffff35 !important;
-          }
+        .value2 {
+          font-size: 18px;
+          // color: rgb(0, 242, 255) !important;
+          color: #ffff35 !important;
+        }
 
-          .value3 {
-            font-size: 18px;
-            // color: #ffff35 !important;
-            color: #ff0000 !important;
-          }
+        .value3 {
+          font-size: 18px;
+          // color: #ffff35 !important;
+          color: #ff0000 !important;
+        }
 
-          .value4 {
-            font-size: 18px;
-            color: #ffbe69 !important;
-          }
+        .value4 {
+          font-size: 18px;
+          color: #ffbe69 !important;
+        }
 
-          .value5 {
-            font-size: 18px;
-            color: #ff6f00 !important;
-          }
+        .value5 {
+          font-size: 18px;
+          color: #ff6f00 !important;
+        }
 
-          .value6 {
-            font-size: 18px;
-            color: #ff0000 !important;
-          }
+        .value6 {
+          font-size: 18px;
+          color: #ff0000 !important;
         }
       }
+    }
 
-      .right-center {
-        margin-top: 20px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+    .right-center {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
 
-        .table-box {
-          position: relative;
-          width: 500px;
-          height: 250px;
-        }
+      .table-box {
+        position: relative;
+        width: 500px;
+        height: 250px;
+      }
 
-        .warning-box {
-          width: calc(100% - 520px);
+      .warning-box {
+        width: calc(100% - 520px);
 
-          .warning-container {
-            width: 100%;
-            height: convert;
-            background: #009acd00;
+        .warning-container {
+          width: 100%;
+          height: convert;
+          background: #009acd00;
 
-            :deep(.dv-scroll-board) {
-              .row-item {
-                height: 40px !important;
-                line-height: 40px !important;
-              }
+          :deep(.dv-scroll-board) {
+            .row-item {
+              height: 40px !important;
+              line-height: 40px !important;
+            }
 
-              .header-item {
-                border-top: 1px solid #91e9fe !important;
-                border-bottom: 1px solid #91e9fe !important;
-              }
+            .header-item {
+              border-top: 1px solid #91e9fe !important;
+              border-bottom: 1px solid #91e9fe !important;
             }
           }
         }
       }
+    }
 
-      .right-bottom {
-        margin-top: 20px;
+    .right-bottom {
+      margin-top: 20px;
 
-        .echarts-box {
-          width: 100%;
-          height: 320px;
-          position: relative;
-          display: flex;
-          justify-content: space-between;
+      .echarts-box {
+        width: 100%;
+        height: 320px;
+        position: relative;
+        display: flex;
+        justify-content: space-between;
 
-          .echarts-line {
-            width: calc(100% + 80px);
-            position: absolute;
-          }
+        .echarts-line {
+          width: calc(100% + 80px);
+          position: absolute;
         }
       }
     }
   }
+}
 
-  :deep(.zxm-table-body) {
-    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+:deep(.zxm-table-body) {
+  border: 1px solid rgba(57, 232, 255, 0.2) !important;
 
-    .zxm-table-tbody > tr > td {
-      border: none !important;
-    }
+  .zxm-table-tbody>tr>td {
+    border: none !important;
   }
+}
 
-  :deep(.zxm-table-cell) {
-    border-right: none !important;
-  }
+:deep(.zxm-table-cell) {
+  border-right: none !important;
+}
 </style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/gaspatrol.modal.vue

@@ -1,21 +1,10 @@
 <template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    :title="`瓦斯巡检监测详情  ${currentTime}`"
-    width="1200px"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    wrapClassName="bundle-modal"
-  >
+  <BasicModal v-bind="$attrs" @register="register" :title="`瓦斯巡检监测详情  ${currentTime}`" width="1200px" @ok="handleOk"
+    @cancel="handleCancel" wrapClassName="bundle-modal">
     <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>
@@ -28,7 +17,8 @@
             </div>
             <div class="item-container">
               <div class="title">氧气</div>
-              <div class="value">{{ posMonitor.o2 !== undefined && posMonitor.o2 !== null ? posMonitor.o2 : '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.o2 !== undefined && posMonitor.o2 !== null ? posMonitor.o2 : '-' }}
+                <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -37,7 +27,8 @@
             </div>
             <div class="item-container">
               <div class="title">一氧化碳</div>
-              <div class="value">{{ posMonitor.co !== undefined && posMonitor.co !== null ? posMonitor.co : '-' }} <span>ppm</span> </div>
+              <div class="value">{{ posMonitor.co !== undefined && posMonitor.co !== null ? posMonitor.co : '-' }}
+                <span>ppm</span> </div>
             </div>
           </div>
           <div class="top-item">
@@ -46,7 +37,8 @@
             </div>
             <div class="item-container">
               <div class="title">二氧化碳</div>
-              <div class="value">{{ posMonitor.co2 !== undefined && posMonitor.co2 !== null ? posMonitor.co2 : '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.co2 !== undefined && posMonitor.co2 !== null ? posMonitor.co2 : '-' }}
+                <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -55,7 +47,8 @@
             </div>
             <div class="item-container">
               <div class="title">甲烷</div>
-              <div class="value">{{ posMonitor.ch4 !== undefined && posMonitor.ch4 !== null ? posMonitor.ch4 : '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.ch4 !== undefined && posMonitor.ch4 !== null ? posMonitor.ch4 : '-' }}
+                <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -64,9 +57,8 @@
             </div>
             <div class="item-container">
               <div class="title">温度</div>
-              <div class="value"
-                >{{ posMonitor.temperature !== undefined && posMonitor.temperature !== null ? posMonitor.temperature : '-' }} <span>℃</span></div
-              >
+              <div class="value">{{ posMonitor.temperature !== undefined && posMonitor.temperature !== null ?
+                posMonitor.temperature : '-' }} <span>℃</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -75,9 +67,8 @@
             </div>
             <div class="item-container">
               <div class="title">湿度</div>
-              <div class="value"
-                >{{ posMonitor.humidity !== undefined && posMonitor.humidity !== null ? posMonitor.humidity : '-' }} <span>%</span></div
-              >
+              <div class="value">{{ posMonitor.humidity !== undefined && posMonitor.humidity !== null ?
+                posMonitor.humidity : '-' }} <span>%</span></div>
             </div>
           </div>
 
@@ -103,14 +94,8 @@
         <div class="right-bottom">
           <span class="base-title">设备监测曲线</span>
           <div class="echarts-box">
-            <BarAndLine
-              class="echarts-line"
-              xAxisPropType="time"
-              :dataSource="historyList"
-              height="100%"
-              :chartsColumns="chartsColumns"
-              :option="echatsOption"
-            />
+            <BarAndLine class="echarts-line" xAxisPropType="time" :dataSource="historyList" height="100%"
+              :chartsColumns="chartsColumns" :option="echatsOption" />
           </div>
         </div>
       </div>
@@ -118,301 +103,331 @@
   </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 { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-  import { chartsColumnList } from '../device.data';
-
-  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: '10',
-          right: '45',
-          bottom: '3%',
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {},
-        },
-      };
-      const chartsColumnArr = getTableHeaderColumns('gaspatrol_chart');
-      const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
-
-      const [register, { setModalProps, closeModal }] = useModalInner();
-
-      function handleVisibleChange(visible) {
-        if (visible) {
-          loading.value = true;
-          setModalProps({ loading: true, confirmLoading: true });
-
-          setTimeout(() => {
-            loading.value = false;
-            setModalProps({ loading: false, confirmLoading: false });
-          }, 1000);
-        }
-      }
+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 { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { chartsColumnList } from '../device.data';
+
+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({});
 
-      // 选择监测
-      function selectDevice(id) {
+    const echatsOption = {
+      grid: {
+        top: '25%',
+        left: '10',
+        right: '45',
+        bottom: '3%',
+        containLabel: true,
+      },
+      toolbox: {
+        feature: {},
+      },
+    };
+    const chartsColumnArr = getTableHeaderColumns('gaspatrol_chart');
+    const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
+
+    const [register, { setModalProps, closeModal }] = useModalInner();
+
+    function handleVisibleChange(visible) {
+      if (visible) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
+
         setTimeout(() => {
           loading.value = false;
-          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 300);
+        }, 1000);
       }
+    }
 
-      function handleOk(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    // 选择监测
+    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 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;
-        // }
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-        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;
-        });
+    function handleCancel(e) {
+      e.preventDefault();
+      closeModal();
+    }
+
+    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+      if (newActiveID != oldActiveID) {
+        activeDeviceID.value = newActiveID as string;
+      }
+      // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+      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">
-  .bundle-modal {
-    .zxm-modal {
-      top: 30px !important;
-    }
+.bundle-modal {
+  .zxm-modal {
+    top: 30px !important;
   }
+}
 </style>
 
 <style lang="less" scoped>
-  .fiber-modal {
-    width: 100%;
-    height: 650px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    .modal-left {
-      width: 200px;
-      height: 100%;
-      overflow-y: auto;
-      background: #ffffff11;
-      padding: 5px;
-      border-radius: 5px;
-      .active-device-title {
-        color: aqua;
+.fiber-modal {
+  width: 100%;
+  height: 650px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .modal-left {
+    width: 200px;
+    height: 100%;
+    overflow-y: auto;
+    background: #ffffff11;
+    padding: 5px;
+    border-radius: 5px;
+
+    .active-device-title {
+      color: aqua;
+    }
+
+    .link-item {
+      position: relative;
+      cursor: pointer;
+      line-height: 30px;
+      padding-left: 30px;
+
+      span:hover {
+        color: #89ffff;
       }
-      .link-item {
-        position: relative;
-        cursor: pointer;
-        line-height: 30px;
-        padding-left: 30px;
-        span:hover {
-          color: #89ffff;
-        }
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 8px;
-          height: 8px;
-          top: 12px;
-          left: 10px;
-          transform: rotateZ(45deg) skew(10deg, 10deg);
-          background: #45d3fd;
-        }
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 8px;
+        height: 8px;
+        top: 12px;
+        left: 10px;
+        transform: rotateZ(45deg) skew(10deg, 10deg);
+        background: #45d3fd;
       }
     }
-    .modal-right {
-      width: calc(100% - 220px);
-      overflow-y: auto;
-      .base-title {
-        line-height: 32px;
-        position: relative;
-        padding-left: 20px;
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 4px;
-          height: 12px;
-          top: 4px;
-          left: 10px;
-          background: #45d3fd;
-          border-radius: 4px;
-        }
+  }
+
+  .modal-right {
+    width: calc(100% - 220px);
+    overflow-y: auto;
+
+    .base-title {
+      line-height: 32px;
+      position: relative;
+      padding-left: 20px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 4px;
+        height: 12px;
+        top: 4px;
+        left: 10px;
+        background: #45d3fd;
+        border-radius: 4px;
       }
-      .right-top {
+    }
+
+    .right-top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
+
+      .top-item {
+        width: 220px;
+        height: 100px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        margin-bottom: 10px;
-        .top-item {
-          width: 220px;
-          height: 100px;
+        justify-content: center;
+        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 {
+          margin-right: 10px;
+          margin-top: 5px;
+          color: #fdb146;
+        }
+
+        .item-container {
+          width: 110px;
           display: flex;
-          flex-direction: row;
+          flex-direction: column;
           justify-content: center;
-          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 {
-            margin-right: 10px;
-            margin-top: 5px;
-            color: #fdb146;
+
+          div {
+            text-align: center;
           }
-          .item-container {
-            width: 110px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            div {
-              text-align: center;
-            }
-            .title {
-              font-size: 18px;
-            }
-            .value {
-              text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-              font-style: normal;
-              background-size: cover;
-              font-family: electronicFont;
-              font-size: 30px;
-              -webkit-background-clip: text;
-              background-clip: text;
-              -webkit-text-fill-color: transparent;
-              position: relative;
-              top: -8px;
-
-              span {
-                font-family: Arial, Helvetica, sans-serif;
-                font-size: 18px;
-                color: aliceblue;
-              }
-            }
+
+          .title {
+            font-size: 18px;
           }
-        }
-        .warning-box {
-          padding-top: 0px;
-          .icon {
-            margin-top: 20px;
-            :deep(.icon-style) {
-              width: auto;
-              color: #fdb146;
+
+          .value {
+            text-shadow: 0 0 25px #00fbfe;
+            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+            font-style: normal;
+            background-size: cover;
+            font-family: electronicFont;
+            font-size: 30px;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+            top: -8px;
+
+            span {
+              font-family: Arial, Helvetica, sans-serif;
+              font-size: 18px;
+              color: aliceblue;
             }
           }
-          .warning-value {
-            font-size: 18px;
-            color: #61ddb1;
-          }
         }
       }
-      .right-center {
-        margin-top: 20px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        .table-box {
-          position: relative;
-          width: 500px;
-          height: 250px;
-        }
-        .warning-box {
-          width: calc(100% - 520px);
-          .warning-container {
-            width: 100%;
-            height: convert;
-            background: #009acd00;
-            :deep(.dv-scroll-board) {
-              .row-item {
-                height: 40px !important;
-                line-height: 40px !important;
-              }
-              .header-item {
-                border-top: 1px solid #91e9fe !important;
-                border-bottom: 1px solid #91e9fe !important;
-              }
-            }
+
+      .warning-box {
+        padding-top: 0px;
+
+        .icon {
+          margin-top: 20px;
+
+          :deep(.icon-style) {
+            width: auto;
+            color: #fdb146;
           }
         }
+
+        .warning-value {
+          font-size: 18px;
+          color: #61ddb1;
+        }
       }
-      .right-bottom {
-        margin-top: 20px;
-        .echarts-box {
+    }
+
+    .right-center {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .table-box {
+        position: relative;
+        width: 500px;
+        height: 250px;
+      }
+
+      .warning-box {
+        width: calc(100% - 520px);
+
+        .warning-container {
           width: 100%;
-          height: 320px;
-          position: relative;
-          .echarts-line {
-            width: calc(100% + 80px);
-            position: absolute;
+          height: convert;
+          background: #009acd00;
+
+          :deep(.dv-scroll-board) {
+            .row-item {
+              height: 40px !important;
+              line-height: 40px !important;
+            }
+
+            .header-item {
+              border-top: 1px solid #91e9fe !important;
+              border-bottom: 1px solid #91e9fe !important;
+            }
           }
         }
       }
     }
-  }
-  :deep(.zxm-table-body) {
-    border: 1px solid rgba(57, 232, 255, 0.2) !important;
-    .zxm-table-tbody > tr > td {
-      border: none !important;
+
+    .right-bottom {
+      margin-top: 20px;
+
+      .echarts-box {
+        width: 100%;
+        height: 320px;
+        position: relative;
+
+        .echarts-line {
+          width: calc(100% + 80px);
+          position: absolute;
+        }
+      }
     }
   }
-  :deep(.zxm-table-cell) {
-    border-right: none !important;
+}
+
+:deep(.zxm-table-body) {
+  border: 1px solid rgba(57, 232, 255, 0.2) !important;
+
+  .zxm-table-tbody>tr>td {
+    border: none !important;
   }
+}
+
+:deep(.zxm-table-cell) {
+  border-right: none !important;
+}
 </style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/wisdomball.modal.vue

@@ -1,13 +1,10 @@
 <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>
@@ -52,9 +49,8 @@
             </div>
             <div class="item-container">
               <div class="title">温度值</div>
-              <div class="value"
-                >{{ posMonitor['tempValue'] !== undefined && posMonitor['tempValue'] !== null ? posMonitor['tempValue'] : '-' }} <span>℃</span></div
-              >
+              <div class="value">{{ posMonitor['tempValue'] !== undefined && posMonitor['tempValue'] !== null ?
+                posMonitor['tempValue'] : '-' }} <span>℃</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -64,8 +60,8 @@
             </div>
             <div class="item-container">
               <div class="title">设备电量值</div>
-              <div class="value"
-                >{{ posMonitor['quantity'] !== undefined && posMonitor['quantity'] !== null ? posMonitor['quantity'] : '-' }} <span>W</span>
+              <div class="value">{{ posMonitor['quantity'] !== undefined && posMonitor['quantity'] !== null ?
+                posMonitor['quantity'] : '-' }} <span>W</span>
               </div>
             </div>
           </div>
@@ -76,9 +72,8 @@
             </div>
             <div class="item-container">
               <div class="title">一氧化碳值</div>
-              <div class="value"
-                >{{ posMonitor['coValue'] !== undefined && posMonitor['coValue'] !== null ? posMonitor['coValue'] : '-' }} <span>ppm</span></div
-              >
+              <div class="value">{{ posMonitor['coValue'] !== undefined && posMonitor['coValue'] !== null ?
+                posMonitor['coValue'] : '-' }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -87,9 +82,8 @@
             </div>
             <div class="item-container">
               <div class="title">氧气值</div>
-              <div class="value"
-                >{{ posMonitor['o2Value'] !== undefined && posMonitor['o2Value'] !== null ? posMonitor['o2Value'] : '-' }} <span>%</span></div
-              >
+              <div class="value">{{ posMonitor['o2Value'] !== undefined && posMonitor['o2Value'] !== null ?
+                posMonitor['o2Value'] : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item warning-box">
@@ -98,7 +92,8 @@
             </div>
             <div class="item-container">
               <div class="title">通信状态</div>
-              <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线' }}</div>
+              <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ?
+                '开启' : '离线' }}</div>
             </div>
           </div>
           <div class="top-item warning-box">
@@ -107,7 +102,8 @@
             </div>
             <div class="item-container">
               <div class="title">报警状态</div>
-              <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线' }}</div>
+              <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ?
+                '开启' : '离线' }}</div>
             </div>
           </div>
           <!-- <div class="top-item item-data">
@@ -237,15 +233,8 @@
           <span class="base-title">设备监测</span>
           <!-- <a-table size="small" :columns="ballvalveColumns" :data-source="historyList" :pagination="false" :scroll="{ y: 300 }" /> -->
           <div class="echarts-box">
-            <BarAndLine
-              class="echarts-line"
-              xAxisPropType="time"
-              :dataSource="historyList"
-              height="100%"
-              width="100%"
-              :chartsColumns="chartsColumns"
-              :option="echatsOption"
-            />
+            <BarAndLine class="echarts-line" xAxisPropType="time" :dataSource="historyList" height="100%" width="100%"
+              :chartsColumns="chartsColumns" :option="echatsOption" />
           </div>
         </div>
       </div>
@@ -253,398 +242,414 @@
   </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 { chartsColumnListBall } from '../device.data';
-  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-  import dayjs from 'dayjs';
-  import { ballvalveColumns } from '../device.data';
-  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-
-  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 chartsColumnArr = getTableHeaderColumns('firemon_normal_chart');
-      const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnListBall;
-      const echatsOption = {
-        grid: {
-          top: '20%',
-          left: '10',
-          right: '65',
-          bottom: '0',
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {},
-        },
-      };
-
-      const [register, { setModalProps, closeModal }] = useModalInner();
-
-      function handleVisibleChange(visible) {
-        if (visible) {
-          loading.value = true;
-          setModalProps({ loading: true, confirmLoading: true });
-
-          setTimeout(() => {
-            loading.value = false;
-            setModalProps({ loading: false, confirmLoading: false });
-          }, 1000);
-        }
-      }
-
-      // 选择监测
-      function selectDevice(id) {
+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 { chartsColumnListBall } from '../device.data';
+import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+import dayjs from 'dayjs';
+import { ballvalveColumns } from '../device.data';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+
+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 chartsColumnArr = getTableHeaderColumns('firemon_normal_chart');
+    const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnListBall;
+    const echatsOption = {
+      grid: {
+        top: '20%',
+        left: '10',
+        right: '65',
+        bottom: '0',
+        containLabel: true,
+      },
+      toolbox: {
+        feature: {},
+      },
+    };
+
+    const [register, { setModalProps, closeModal }] = useModalInner();
+
+    function handleVisibleChange(visible) {
+      if (visible) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
+
         setTimeout(() => {
           loading.value = false;
-          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 300);
+        }, 1000);
       }
+    }
 
-      function handleOk(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    // 选择监测
+    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 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;
-        // }
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-        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;
-        });
-      });
+    function handleCancel(e) {
+      e.preventDefault();
+      closeModal();
+    }
 
-      return {
-        register,
-        model: modelRef,
-        currentTime,
-        handleVisibleChange,
-        selectDevice,
-        handleOk,
-        handleCancel,
-        ballvalveColumns,
-        deviceList,
-        historyList,
-        activeDeviceID,
-        posMonitor,
-        echatsOption,
-        chartsColumnListBall,
-        chartsColumns,
-      };
-    },
-  });
+    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+      if (newActiveID != oldActiveID) {
+        activeDeviceID.value = newActiveID as string;
+      }
+      // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+      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,
+      ballvalveColumns,
+      deviceList,
+      historyList,
+      activeDeviceID,
+      posMonitor,
+      echatsOption,
+      chartsColumnListBall,
+      chartsColumns,
+    };
+  },
+});
 </script>
 <style lang="less" scoped>
-  .fiber-modal {
-    width: 100%;
-    height: 650px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    .modal-left {
-      width: 200px;
-      height: 100%;
-      overflow-y: auto;
-      background: #ffffff11;
-      padding: 5px;
-      border-radius: 5px;
-
-      .active-device-title {
-        color: aqua;
+.fiber-modal {
+  width: 100%;
+  height: 650px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .modal-left {
+    width: 200px;
+    height: 100%;
+    overflow-y: auto;
+    background: #ffffff11;
+    padding: 5px;
+    border-radius: 5px;
+
+    .active-device-title {
+      color: aqua;
+    }
+
+    .link-item {
+      position: relative;
+      cursor: pointer;
+      line-height: 30px;
+      padding-left: 30px;
+
+      span:hover {
+        color: #89ffff;
       }
 
-      .link-item {
-        position: relative;
-        cursor: pointer;
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 8px;
+        height: 8px;
+        top: 12px;
+        left: 10px;
+        transform: rotateZ(45deg) skew(10deg, 10deg);
+        background: #45d3fd;
+      }
+    }
+  }
+
+  .modal-right {
+    width: calc(100% - 220px);
+    overflow-y: auto;
+
+    .base-title {
+      line-height: 32px;
+      position: relative;
+      padding-left: 20px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 4px;
+        height: 12px;
+        top: 4px;
+        left: 10px;
+        background: #45d3fd;
+        border-radius: 4px;
+      }
+    }
+
+    .base-box {
+      width: 100%;
+      // height: 100px;
+      height: 65px;
+      font-size: 14px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      border: 1px solid rgba(25, 237, 255, 0.4);
+      box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.3);
+      background: rgba(0, 0, 0, 0.06666666666666667);
+      padding: 15px 20px;
+      margin-bottom: 10px;
+
+      .base-item {
+        width: 33%;
         line-height: 30px;
-        padding-left: 30px;
 
-        span:hover {
-          color: #89ffff;
+        span {
+          display: inline-block;
         }
 
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 8px;
-          height: 8px;
-          top: 12px;
-          left: 10px;
-          transform: rotateZ(45deg) skew(10deg, 10deg);
-          background: #45d3fd;
+        .title {
+          width: 120px;
         }
-      }
-    }
 
-    .modal-right {
-      width: calc(100% - 220px);
-      overflow-y: auto;
-      .base-title {
-        line-height: 32px;
-        position: relative;
-        padding-left: 20px;
-
-        &::after {
-          content: '';
-          position: absolute;
-          display: block;
-          width: 4px;
-          height: 12px;
-          top: 4px;
-          left: 10px;
-          background: #45d3fd;
-          border-radius: 4px;
+        .value {
+          width: 150px;
+          text-overflow: ellipsis;
         }
       }
+    }
 
-      .base-box {
-        width: 100%;
-        // height: 100px;
-        height: 65px;
-        font-size: 14px;
+    .right-top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
+
+      .top-item {
+        width: 220px;
+        height: 100px;
         display: flex;
         flex-direction: row;
-        flex-wrap: wrap;
+        justify-content: center;
         border: 1px solid rgba(25, 237, 255, 0.4);
-        box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.3);
+        box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
         background: rgba(0, 0, 0, 0.06666666666666667);
-        padding: 15px 20px;
-        margin-bottom: 10px;
-        .base-item {
-          width: 33%;
-          line-height: 30px;
-          span {
-            display: inline-block;
+        padding-top: 20px;
+        margin: 10px 0;
+
+        .icon {
+          margin-right: 10px;
+          margin-top: 5px;
+          color: #fdb146;
+        }
+
+        .item-container {
+          width: 100px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+
+          div {
+            text-align: center;
           }
+
           .title {
-            width: 120px;
+            font-size: 18px;
           }
+
           .value {
-            width: 150px;
-            text-overflow: ellipsis;
+            text-shadow: 0 0 25px #00fbfe;
+            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+            font-style: normal;
+            background-size: cover;
+            font-family: electronicFont;
+            font-size: 30px;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+            top: -8px;
+
+            span {
+              font-family: Arial, Helvetica, sans-serif;
+              font-size: 18px;
+              color: aliceblue;
+            }
+          }
+
+          .alarm-value {
+            text-shadow: 0 0 25px #fe1500;
+            background: linear-gradient(0deg, #fd4545, #fd5e45, #dd7461, #dd6161);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
           }
         }
       }
 
-      .right-top {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        margin-bottom: 10px;
-        .top-item {
-          width: 220px;
-          height: 100px;
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          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 {
-            margin-right: 10px;
-            margin-top: 5px;
-            color: #fdb146;
-          }
+      .item-data {
+        position: relative;
+        height: 120px;
+        padding-top: 0;
 
-          .item-container {
-            width: 100px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
+        .icon {
+          position: absolute;
+          left: 20px;
+          top: 25px;
+          // margin-right: 30px;
+          // margin-top: 25px;
+        }
 
-            div {
-              text-align: center;
-            }
+        .item-container {
+          width: 140px;
+          position: absolute;
+          padding-top: 15px;
+          justify-content: flex-start;
+          right: 0;
 
-            .title {
-              font-size: 18px;
-            }
+          .value {
+            top: 0px;
+          }
 
-            .value {
-              text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-              font-style: normal;
-              background-size: cover;
-              font-family: electronicFont;
-              font-size: 30px;
-              -webkit-background-clip: text;
-              background-clip: text;
-              -webkit-text-fill-color: transparent;
-              position: relative;
-              top: -8px;
-
-              span {
-                font-family: Arial, Helvetica, sans-serif;
-                font-size: 18px;
-                color: aliceblue;
-              }
-            }
-            .alarm-value {
-              text-shadow: 0 0 25px #fe1500;
-              background: linear-gradient(0deg, #fd4545, #fd5e45, #dd7461, #dd6161);
-              -webkit-background-clip: text;
-              background-clip: text;
-              -webkit-text-fill-color: transparent;
-            }
+          .state-close {
+            color: #b9b9b9;
           }
-        }
-        .item-data {
-          position: relative;
-          height: 120px;
-          padding-top: 0;
-          .icon {
-            position: absolute;
-            left: 20px;
-            top: 25px;
-            // margin-right: 30px;
-            // margin-top: 25px;
+
+          .state-open {
+            color: #00ff88;
           }
-          .item-container {
-            width: 140px;
-            position: absolute;
-            padding-top: 15px;
-            justify-content: flex-start;
-            right: 0;
-            .value {
-              top: 0px;
-            }
-            .state-close {
-              color: #b9b9b9;
-            }
-            .state-open {
-              color: #00ff88;
-            }
-            .state-offline {
-              color: #ffd000;
-            }
+
+          .state-offline {
+            color: #ffd000;
           }
-          .rang {
-            position: absolute;
-            color: #ff8331;
-            bottom: 10px;
-            right: 20px;
-            .rang-data {
-              padding: 0 5px;
-            }
+        }
+
+        .rang {
+          position: absolute;
+          color: #ff8331;
+          bottom: 10px;
+          right: 20px;
+
+          .rang-data {
+            padding: 0 5px;
           }
         }
+      }
 
-        .warning-box {
-          padding-top: 0px;
+      .warning-box {
+        padding-top: 0px;
 
-          .icon {
-            margin-top: 20px;
+        .icon {
+          margin-top: 20px;
 
-            :deep(.icon-style) {
-              width: auto;
-              color: #fdb146;
-            }
+          :deep(.icon-style) {
+            width: auto;
+            color: #fdb146;
           }
+        }
 
-          .warning-value {
-            font-size: 18px;
-            color: #61ddb1;
-          }
+        .warning-value {
+          font-size: 18px;
+          color: #61ddb1;
         }
       }
+    }
 
-      .right-center {
-        margin-top: 20px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+    .right-center {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
 
-        .table-box {
-          position: relative;
-          width: 500px;
-          height: 250px;
-        }
+      .table-box {
+        position: relative;
+        width: 500px;
+        height: 250px;
+      }
 
-        .warning-box {
-          width: calc(100% - 520px);
+      .warning-box {
+        width: calc(100% - 520px);
 
-          .warning-container {
-            width: 100%;
-            height: convert;
-            background: #009acd00;
+        .warning-container {
+          width: 100%;
+          height: convert;
+          background: #009acd00;
 
-            :deep(.dv-scroll-board) {
-              .row-item {
-                height: 40px !important;
-                line-height: 35px !important;
-              }
+          :deep(.dv-scroll-board) {
+            .row-item {
+              height: 40px !important;
+              line-height: 35px !important;
+            }
 
-              .header-item {
-                border-top: 1px solid #91e9fe !important;
-                border-bottom: 1px solid #91e9fe !important;
-              }
+            .header-item {
+              border-top: 1px solid #91e9fe !important;
+              border-bottom: 1px solid #91e9fe !important;
             }
           }
         }
       }
+    }
 
-      .right-bottom {
-        margin-top: 10px;
+    .right-bottom {
+      margin-top: 10px;
 
-        .echarts-box {
-          width: 100%;
-          height: 180px;
-          position: relative;
+      .echarts-box {
+        width: 100%;
+        height: 180px;
+        position: relative;
 
-          .echarts-line {
-            width: calc(100% + 80px);
-            position: absolute;
-          }
+        .echarts-line {
+          width: calc(100% + 80px);
+          position: absolute;
         }
       }
     }
   }
+}
 
-  :deep(.zxm-table-body) {
-    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+:deep(.zxm-table-body) {
+  border: 1px solid rgba(57, 232, 255, 0.2) !important;
 
-    .zxm-table-tbody > tr > td {
-      border: none !important;
-    }
+  .zxm-table-tbody>tr>td {
+    border: none !important;
   }
+}
 
-  :deep(.zxm-table-cell) {
-    border-right: none !important;
-  }
+:deep(.zxm-table-cell) {
+  border-right: none !important;
+}
 </style>