1. 给巷道设备监测表格添加显示隐藏动画

src/components/vent/micro/ventModal.vue

@@ -5,26 +5,27 @@
   <div id="micro-vent-3dModal"></div>
 </template>
 <script lang="ts">
-  import { ref, onMounted, onBeforeUnmount, defineComponent } from 'vue';
+  import { ref, onMounted, onBeforeUnmount, defineComponent, unref } from 'vue';
   import { unmountMicroApps, mountMicroApp, activeApps } from '/@/qiankun';
   import { resetMicroContentWH } from '/@/utils/domUtils';
+  import { useRouter } from 'vue-router';
 
   export default defineComponent({
     name: 'VentModel',
     setup() {
+      const { currentRoute } = useRouter();
       const loading = ref(true);
       onMounted(() => {
-        debugger;
         // 判断子应用是否存在，不存在注册
-        mountMicroApp('/micro-vent-3dModal');
+        mountMicroApp(unref(currentRoute).fullPath);
         resetMicroContentWH('micro-vent-3dModal', () => {
           loading.value = false;
         });
       });
 
-      // onBeforeUnmount(() => {
-      //   unmountMicroApps(['/micro-vent-3dModal']);
-      // });
+      onBeforeUnmount(() => {
+        unmountMicroApps(['/micro-vent-3dModal']);
+      });
 
       return { loading };
     },

src/layouts/default/index.vue

@@ -30,7 +30,7 @@
   import { useLockPage } from '/@/hooks/web/useLockPage';
 
   import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { antPrefixCls } from '/@/settings/designSetting'
+  import { antPrefixCls } from '/@/settings/designSetting';
 
   export default defineComponent({
     name: 'DefaultLayout',

src/layouts/default/sider/bottomSideder.vue

@@ -88,6 +88,7 @@
       }
 
       async function handleMenuClick(path: Menu) {
+        debugger;
         if (path.path == currentRoute.value.fullPath) {
           return;
         }
@@ -104,12 +105,7 @@
           return;
         }
         if (currentRoute.value.path.startsWith('/micro-vent-3dModal')) {
-          if (path.path.startsWith('/micro-vent-3dModal') && currentRoute.value.path.startsWith('/micro-vent-3dModal')) {
-            // unmountMicroApps(['/micro-vent-3dModal']);
-            go(path.path);
-          } else {
-            go(path.path);
-          }
+          go(path.path);
         } else {
           go(path.path);
         }

src/qiankun/index.ts

@@ -25,7 +25,6 @@ function filterApps() {
 const mountMicroApp = (path, toPath?) => {
   const microApps = filterApps();
   const app = microApps.find((item) => path.startsWith(item['activeRule']));
-  debugger;
   if (app) {
     if (activeApps[app['activeRule']]) {
       return;
@@ -59,8 +58,7 @@ const mountMicroApp = (path, toPath?) => {
 };
 
 // 卸载app的方法
-const unmountMicroApps = async (multipleApp) => {
-  debugger;
+const unmountMicroApps = (multipleApp) => {
   for (const key in activeApps) {
     const isExist = multipleApp.some((name) => name == key);
     if (isExist) {

src/router/guard/index.ts

@@ -38,13 +38,12 @@ RootRoute.redirect = glob.homePath || PageEnum.BASE_HOME;
 function createPageGuard(router: Router) {
   const loadedPageMap = new Map<string, boolean>();
 
-  router.beforeEach(async (to) => {
-    // if (!to.path.startsWith('/micro-vent-3dModal')) {
-    //   unmountMicroApps(['/micro-vent-3dModal']);
-    // }
-    // if (!to.path.startsWith('/micro-need-air')) {
-    //   unmountMicroApps(['/micro-need-air']);
-    // }
+  router.beforeEach(async (to, from) => {
+    if (from.path.startsWith('/micro-') && !to.path.startsWith('/micro-')) {
+      // unmountMicroApps(['/micro-vent-3dModal', '/micro-need-air']);
+      unmountMicroApps(['/' + from.path.split('/')[1]]);
+    }
+
     // The page has already been loaded, it will be faster to open it again, you don’t need to do loading and other processing
     to.meta.loaded = !!loadedPageMap.get(to.path);
     // Notify routing changes

src/router/guard/permissionGuard.ts

@@ -41,6 +41,7 @@ export function createPermissionGuard(router: Router) {
   const permissionStore = usePermissionStoreWithOut();
 
   router.beforeEach(async (to, from, next) => {
+    debugger;
     RootRoute.redirect = glob.homePath || PageEnum.BASE_HOME;
 
     if (_.isEmpty(history.state.current)) {

src/utils/event/index.ts

@@ -42,7 +42,13 @@ export function triggerWindowResize() {
 }
 
 export function setDivHeight(e: MouseEvent, minHeight, scroll, scrollClientMaxHeight = 175, scrollClientHeight = 100) {
-  if (e && e.target && e.target['className'] && (e.target['className'].includes('input') || e.target['className'].includes('table-hide-icon'))) {
+  if (
+    e &&
+    e.target &&
+    e.target['className'] &&
+    e.target['className'].includes &&
+    (e.target['className'].includes('input') || e.target['className'].includes('table-hide-icon'))
+  ) {
     return;
   }
   e.preventDefault();

src/utils/threejs/useThree.ts

@@ -510,10 +510,6 @@ class UseThree {
 
       for (const key of Object.keys(material)) {
         const value = material[key];
-        // if (value && typeof value === 'object' && 'minFilter' in value) {
-        //   // this.textureMap.set(value.uuid, value);
-        //   value.dispose();
-        // }
         if (value && typeof value === 'object' && value['dispose'] && typeof value['dispose'] === 'function') {
           value.dispose();
         }

src/views/dashboard/Analysis/homePage/network.vue

@@ -44,8 +44,7 @@
                   <SvgIcon class="icon-style" size="18" :name="data.icon" />
                 </div>
                 <div class="item-name">{{ data.name }}</div>
-                <div v-if="data.code !== 'level' && data.code !== 'resistance'" class="item-value">{{ data.value }}
-                </div>
+                <div v-if="data.code !== 'level' && data.code !== 'resistance'" class="item-value">{{ data.value }} </div>
                 <div v-if="data.code == 'level'" class="item-value">
                   <span class="signal-round signal-round-run"></span>
                 </div>
@@ -55,34 +54,48 @@
             <div class="feature-group">
               <div class="feature-item">
                 <div class="pie">
-                  <Progress type="circle" :width="50" :stroke-color="{
-                    '0%': '#FC9C1D',
-                    '100%': '#1FF8FB',
-                  }" :percent="Number(rate1)"></Progress>
+                  <Progress
+                    type="circle"
+                    :width="50"
+                    :stroke-color="{
+                      '0%': '#FC9C1D',
+                      '100%': '#1FF8FB',
+                    }"
+                    :percent="Number(rate1)"
+                  />
                 </div>
                 <div class="data">可靠度</div>
               </div>
               <div class="feature-item">
                 <div class="pie">
-                  <Progress type="circle" :width="50" :stroke-color="{
-                    '0%': '#A02EFF',
-                    '100%': '#1FF8FB',
-                  }" :percent="Number(rate2)"></Progress>
+                  <Progress
+                    type="circle"
+                    :width="50"
+                    :stroke-color="{
+                      '0%': '#A02EFF',
+                      '100%': '#1FF8FB',
+                    }"
+                    :percent="Number(rate2)"
+                  />
                 </div>
                 <div class="data">风阻合理度</div>
               </div>
               <div class="feature-item">
                 <div class="pie">
-                  <Progress type="circle" :width="50" :stroke-color="{
-                    '0%': '#108ee9',
-                    '100%': '#1FF8FB',
-                  }" :percent="Number(rate3)"></Progress>
+                  <Progress
+                    type="circle"
+                    :width="50"
+                    :stroke-color="{
+                      '0%': '#108ee9',
+                      '100%': '#1FF8FB',
+                    }"
+                    :percent="Number(rate3)"
+                  />
                 </div>
                 <div class="data">有效风量率</div>
               </div>
             </div>
           </div>
-
         </div>
         <div class="right-box lr-box">
           <div class="sensor-box">
@@ -100,8 +113,14 @@
                 <a-table :columns="warningColumns" :data-source="warningDataList" :pagination="false" size="small">
                   <template #bodyCell="{ column, record }">
                     <div v-if="column.dataIndex == 'level'">
-                      <span class="signal-round"
-                        :class="{ 'signal-round-red': record['level'] == 1, 'signal-round-orange': record['level'] == 2, 'signal-round-yellow': record['level'] == 3 }"></span>
+                      <span
+                        class="signal-round"
+                        :class="{
+                          'signal-round-red': record['level'] == 1,
+                          'signal-round-orange': record['level'] == 2,
+                          'signal-round-yellow': record['level'] == 3,
+                        }"
+                      ></span>
                     </div>
                   </template>
                 </a-table>
@@ -187,720 +206,718 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { Icon as SvgIcon } from '/@/components/Icon';
-import { Progress } from 'ant-design-vue';
-import { BorderBox11, BorderBox1 } from '@kjgl77/datav-vue3';
-import { sensorColumns, sensorData, networkColumns, networkData, warningColumns, warningData } from './network.data'
-import dayjs from 'dayjs'
-const currentTitleValue = ref('2') // 监测工作面id
-
-let count = 0;
-const sensorDataList = ref<any[]>([])
-const networkDataList = ref<any[]>([])
-const warningDataList = ref<any[]>([])
-const currentTime = ref(dayjs(new Date('2022-10-11 15:03:11').getTime() + count).format('YYYY-MM-DD HH:mm:ss'))
-
-const totalEnterNum = ref(23855 + '')
-const totalToNum = ref(244436 + '')
-const totalPa = ref(1640 + '')
-const rate1 = ref(95 + '')
-const rate2 = ref(95 + '')
-const rate3 = ref(95 + '')
-
-
-const analysisDetailDataList = ref([
-  {
-    code: '',
-    name: '通风巷道规模（m）',
-    value: '21000',
-    icon: 'path-icon1'
-  },
-  {
-    code: 'level',
-    name: '通风难易程度',
-    value: '21000',
-    icon: 'path-icon2'
-  },
-  {
-    code: 'resistance',
-    name: '总阻力',
-    value: totalPa.value,
-    icon: 'path-icon3'
-  },
-  {
-    code: '',
-    name: '等积孔（㎡）',
-    value: '11.27',
-    icon: 'path-icon4'
-  },
-])
-
-let timer: null | NodeJS.Timeout = null;
-function getMonitorData() {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      sensorDataList.value = sensorData()
-      networkDataList.value = networkData()
-      warningDataList.value = warningData()
-      currentTime.value = dayjs(new Date('2022-10-11 15:03:11').getTime() + (++count * 5000)).format('YYYY-MM-DD HH:mm:ss')
-      totalEnterNum.value = Number(Math.random() * 200 - 100 + 23855).toFixed(0)
-      totalToNum.value = Number(Math.random() * 200 - 100 + 244436).toFixed(0)
-      totalPa.value = Number(Math.random() * 50 - 25 + 1640).toFixed(0)
-      rate1.value = Number(Math.random() * 4 - 2 + 95).toFixed(0)
-      rate2.value = Number(Math.random() * 4 - 2 + 95).toFixed(0)
-      rate3.value = Number(Math.random() * 4 - 2 + 95).toFixed(0)
-      sensorDataList.value = sensorData()
-      networkDataList.value = networkData()
-      warningDataList.value = warningData()
-      if (timer) {
-        timer = null;
-      }
-      getMonitorData();
-    }, 5000)
+  import { ref, onMounted, onUnmounted } from 'vue';
+  import { Icon as SvgIcon } from '/@/components/Icon';
+  import { Progress } from 'ant-design-vue';
+  import { BorderBox11, BorderBox1 } from '@kjgl77/datav-vue3';
+  import { sensorColumns, sensorData, networkColumns, networkData, warningColumns, warningData } from './network.data';
+  import dayjs from 'dayjs';
+  const currentTitleValue = ref('2'); // 监测工作面id
+
+  let count = 0;
+  const sensorDataList = ref<any[]>([]);
+  const networkDataList = ref<any[]>([]);
+  const warningDataList = ref<any[]>([]);
+  const currentTime = ref(dayjs(new Date('2022-10-11 15:03:11').getTime() + count).format('YYYY-MM-DD HH:mm:ss'));
+
+  const totalEnterNum = ref(23855 + '');
+  const totalToNum = ref(244436 + '');
+  const totalPa = ref(1640 + '');
+  const rate1 = ref(95 + '');
+  const rate2 = ref(95 + '');
+  const rate3 = ref(95 + '');
+
+  const analysisDetailDataList = ref([
+    {
+      code: '',
+      name: '通风巷道规模（m）',
+      value: '21000',
+      icon: 'path-icon1',
+    },
+    {
+      code: 'level',
+      name: '通风难易程度',
+      value: '21000',
+      icon: 'path-icon2',
+    },
+    {
+      code: 'resistance',
+      name: '总阻力',
+      value: totalPa.value,
+      icon: 'path-icon3',
+    },
+    {
+      code: '',
+      name: '等积孔（㎡）',
+      value: '11.27',
+      icon: 'path-icon4',
+    },
+  ]);
+
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitorData() {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(async () => {
+        sensorDataList.value = sensorData();
+        networkDataList.value = networkData();
+        warningDataList.value = warningData();
+        currentTime.value = dayjs(new Date('2022-10-11 15:03:11').getTime() + ++count * 5000).format('YYYY-MM-DD HH:mm:ss');
+        totalEnterNum.value = Number(Math.random() * 200 - 100 + 23855).toFixed(0);
+        totalToNum.value = Number(Math.random() * 200 - 100 + 244436).toFixed(0);
+        totalPa.value = Number(Math.random() * 50 - 25 + 1640).toFixed(0);
+        rate1.value = Number(Math.random() * 4 - 2 + 95).toFixed(0);
+        rate2.value = Number(Math.random() * 4 - 2 + 95).toFixed(0);
+        rate3.value = Number(Math.random() * 4 - 2 + 95).toFixed(0);
+        sensorDataList.value = sensorData();
+        networkDataList.value = networkData();
+        warningDataList.value = warningData();
+        if (timer) {
+          timer = null;
+        }
+        getMonitorData();
+      }, 5000);
+    }
   }
-}
-
-// 标题选择
-function handleTitleChange() {
-  //
-}
-
-onMounted(() => {
-  getMonitorData()
-  // if (document.body.getAttribute('class')?.includes('style-styleTwo')) document.body.removeAttribute('class', 'style-styleTwo');
-});
-
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
+
+  // 标题选择
+  function handleTitleChange() {
+    //
   }
-});
+
+  onMounted(() => {
+    getMonitorData();
+    // if (document.body.getAttribute('class')?.includes('style-styleTwo')) document.body.removeAttribute('class', 'style-styleTwo');
+  });
+
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style scoped lang="less">
-@ventSpace: zxm;
-
-.zl-box {
-  width: 100%;
-  height: calc(100% - 100px);
-  color: #fff;
-  background-position: center;
-  background-size: cover;
+  @ventSpace: zxm;
 
-  .modal-box {
-    position: relative;
+  .zl-box {
     width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-}
-
-.zl-container-box {
-  pointer-events: none;
-  margin-top: 30px;
-  
-  .top-box {
-    display: flex;
-    justify-content: space-between;
-    height: calc(70% - 20px);
-    .lr-box {
-      width: 374px;
-      margin-top: 10px;
+    height: calc(100% - 100px);
+    color: #fff;
+    background-position: center;
+    background-size: cover;
+
+    .modal-box {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
     }
+  }
 
-    .left-box {
-      // .container-title {
-      //   width: 398px;
-      //   height: 34px;
-      //   top: -30px;
-      //   background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
-      //   background-size: contain;
-      //   padding: 0 0 0 180px;
-      //   font-size: 20px;
-      //   pointer-events: auto;
-      //   position: relative;
-
-      //   .title-select {
-      //     width: 198px;
-      //     position: absolute;
-      //     top: 0;
-      //     left: 180px;
-      //   }
-      // }
-
-      .analysis-box {
-        position: relative;
-
-        .pie-group {
-          display: flex;
-          flex-direction: row;
-          .item-pie {
-            flex: 1;
-            padding: 5px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
+  .zl-container-box {
+    pointer-events: none;
+    margin-top: 30px;
 
-            .pie {
-              width: 140px;
-              height: 80px;
-              background: url('/@/assets/images/vent/path/di.png') no-repeat;
-              background-size: contain;
+    .top-box {
+      display: flex;
+      justify-content: space-between;
+      height: calc(70% - 20px);
+      .lr-box {
+        width: 374px;
+        margin-top: 10px;
+      }
+
+      .left-box {
+        // .container-title {
+        //   width: 398px;
+        //   height: 34px;
+        //   top: -30px;
+        //   background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+        //   background-size: contain;
+        //   padding: 0 0 0 180px;
+        //   font-size: 20px;
+        //   pointer-events: auto;
+        //   position: relative;
+
+        //   .title-select {
+        //     width: 198px;
+        //     position: absolute;
+        //     top: 0;
+        //     left: 180px;
+        //   }
+        // }
+
+        .analysis-box {
+          position: relative;
+
+          .pie-group {
+            display: flex;
+            flex-direction: row;
+            .item-pie {
+              flex: 1;
+              padding: 5px;
               display: flex;
+              flex-direction: column;
               justify-content: center;
+              align-items: center;
 
-              .qiu1 {
-                background: url('/@/assets/images/vent/path/cicle01.png') no-repeat center;
-              }
+              .pie {
+                width: 140px;
+                height: 80px;
+                background: url('/@/assets/images/vent/path/di.png') no-repeat;
+                background-size: contain;
+                display: flex;
+                justify-content: center;
+
+                .qiu1 {
+                  background: url('/@/assets/images/vent/path/cicle01.png') no-repeat center;
+                }
 
-              .qiu2 {
-                background: url('/@/assets/images/vent/path/cicle04.png') no-repeat center;
+                .qiu2 {
+                  background: url('/@/assets/images/vent/path/cicle04.png') no-repeat center;
+                }
+
+                .qiu {
+                  position: relative;
+                  width: 60px;
+                  height: 60px;
+                  background-size: 100%;
+                  display: flex;
+                  justify-content: center;
+                  padding-top: 18px;
+
+                  &::before {
+                    content: '';
+                    display: block;
+                    width: 60px;
+                    height: 60px;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    border-radius: 50%;
+                    border: 3px solid rgba(255, 255, 255, 0.5);
+                    animation: scale 2s linear infinite;
+                  }
+                }
               }
 
-              .qiu {
-                position: relative;
-                width: 60px;
-                height: 60px;
-                background-size: 100%;
+              .pie-data {
+                width: 140px;
+                height: 20px;
                 display: flex;
                 justify-content: center;
-                padding-top: 18px;
+                position: relative;
+                background: url('/@/assets/images/vent/path/pie-line.png');
 
-                &::before {
-                  content: '';
+                .data-text {
                   display: block;
-                  width: 60px;
-                  height: 60px;
                   position: absolute;
-                  left: 50%;
-                  top: 50%;
-                  transform: translate(-50%, -50%);
-                  border-radius: 50%;
-                  border: 3px solid rgba(255, 255, 255, 0.5);
-                  animation: scale 2s linear infinite;
+                  top: -8px;
                 }
               }
             }
+          }
 
-            .pie-data {
-              width: 140px;
-              height: 20px;
+          .detail-data-group {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: 15px;
+
+            .container-item {
+              width: 307px;
+              height: 63px;
               display: flex;
-              justify-content: center;
               position: relative;
-              background: url('/@/assets/images/vent/path/pie-line.png');
+              background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
+              background-size: auto;
+              background-position: bottom;
+              padding: 10px 30px;
 
-              .data-text {
+              &::before {
+                content: '';
                 display: block;
+                width: 100%;
+                height: 5px;
                 position: absolute;
-                top: -8px;
+                top: 62px;
+                left: 0;
+                background-color: #73f4ff66;
+                backdrop-filter: blur(5px);
               }
-            }
-          }
-        }
-
-        .detail-data-group {
-          width: 100%;
-          ;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin-top: 15px;
-
-          .container-item {
-            width: 307px;
-            height: 63px;
-            display: flex;
-            position: relative;
-            background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
-            background-size: auto;
-            background-position: bottom;
-            padding: 10px 30px;
 
-            &::before {
-              content: '';
-              display: block;
-              width: 100%;
-              height: 5px;
-              position: absolute;
-              top: 62px;
-              left: 0;
-              background-color: #73f4ff66;
-              backdrop-filter: blur(5px);
-            }
-
-            .item-icon {
-              width: 60px;
-              height: 45px;
-              background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
-              background-size: cover;
+              .item-icon {
+                width: 60px;
+                height: 45px;
+                background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
+                background-size: cover;
 
-              .icon-style {
-                margin: 10px 0 0 18px;
+                .icon-style {
+                  margin: 10px 0 0 18px;
+                }
               }
-            }
 
-            .item-name {
-              width: 180px;
-              line-height: 60px;
-              margin-left: 5px;
-              text-align: left;
-            }
+              .item-name {
+                width: 180px;
+                line-height: 60px;
+                margin-left: 5px;
+                text-align: left;
+              }
 
-            .item-value {
-              position: relative;
-              height: 26px;
-              line-height: 24px;
-              margin: 15px 0;
-              text-align: center;
-              width: 80px;
-              border: 1px solid #00f5fe;
-              border-radius: 13px;
-              background: linear-gradient(to right, #00f5fe44, #0090ff44);
+              .item-value {
+                position: relative;
+                height: 26px;
+                line-height: 24px;
+                margin: 15px 0;
+                text-align: center;
+                width: 80px;
+                border: 1px solid #00f5fe;
+                border-radius: 13px;
+                background: linear-gradient(to right, #00f5fe44, #0090ff44);
 
-              &::before {
-                width: 6px;
-                height: 6px;
-                content: '';
-                position: absolute;
-                left: -3px;
-                top: 8px;
-                background: #ffa500;
-                border-radius: 3px;
+                &::before {
+                  width: 6px;
+                  height: 6px;
+                  content: '';
+                  position: absolute;
+                  left: -3px;
+                  top: 8px;
+                  background: #ffa500;
+                  border-radius: 3px;
+                }
               }
             }
           }
-        }
 
-        .feature-group {
-          display: flex;
-          flex-direction: row;
-          padding: 20px;
-          margin-top: 15px;
-
-          .feature-item {
-            width: 108px;
-            height: 120px;
-            background: url('/@/assets/images/vent/path/path-feature-bg.png');
+          .feature-group {
             display: flex;
-            flex-direction: column;
-            // justify-content: center;
-
-            .pie {
+            flex-direction: row;
+            padding: 20px;
+            margin-top: 15px;
+
+            .feature-item {
+              width: 108px;
+              height: 120px;
+              background: url('/@/assets/images/vent/path/path-feature-bg.png');
               display: flex;
-              justify-content: center;
-            }
+              flex-direction: column;
+              // justify-content: center;
 
-            .data {
-              margin-top: 15px;
-              font-size: 12px;
-              scale: 0.9;
-              text-align: center;
+              .pie {
+                display: flex;
+                justify-content: center;
+              }
+
+              .data {
+                margin-top: 15px;
+                font-size: 12px;
+                scale: 0.9;
+                text-align: center;
+              }
             }
           }
         }
       }
-    }
 
-    .right-box {
-      display: flex;
-      flex-direction: column;
-
-      .sensor-box,
-      .warning-box {
-        position: relative;
+      .right-box {
+        display: flex;
+        flex-direction: column;
 
-        // min-height: 220px;
-        // max-height: 250px;
-        .table-box {
-          height: 280px;
+        .sensor-box,
+        .warning-box {
           position: relative;
 
-          .table-container {
-            margin: 25px 20px 20px;
-            height: 250px;
-            position: absolute;
+          // min-height: 220px;
+          // max-height: 250px;
+          .table-box {
+            height: 280px;
+            position: relative;
+
+            .table-container {
+              margin: 25px 20px 20px;
+              height: 250px;
+              position: absolute;
+            }
           }
         }
-      }
 
-      .sensor-box {
-        .item-top-title {
-          &::after {
-            left: 110px;
-          }
+        .sensor-box {
+          .item-top-title {
+            &::after {
+              left: 110px;
+            }
 
-          &::before {
-            left: 265px;
+            &::before {
+              left: 265px;
+            }
           }
         }
-      }
 
-      .warning-box {
-        margin-top: 10px;
+        .warning-box {
+          margin-top: 10px;
+        }
       }
     }
-  }
 
-  .bottom-box {
-    width: 100%;
-    height: calc(30% - 20px);
-    display: flex;
-    justify-content: space-between;
-    margin-top: 20px;
-
-    .bottom-lr-box {
-      flex: 1;
+    .bottom-box {
+      width: 100%;
+      height: calc(30% - 20px);
       display: flex;
-      justify-content: center;
-
-    }
+      justify-content: space-between;
+      margin-top: 20px;
 
-    .bottom-left {
-      margin-right: 10px;
-
-      .network-top {
+      .bottom-lr-box {
+        flex: 1;
         display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        position: relative;
-        top: 55px;
-        padding: 0 30px;
+        justify-content: center;
+      }
+
+      .bottom-left {
+        margin-right: 10px;
 
-        .network-top-left {
+        .network-top {
           display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          position: relative;
+          top: 55px;
+          padding: 0 30px;
 
-          div {
-            margin-right: 20px;
-          }
+          .network-top-left {
+            display: flex;
 
-          span {
-            font-family: 'douyuFont';
-            font-size: 15px;
-          }
+            div {
+              margin-right: 20px;
+            }
+
+            span {
+              font-family: 'douyuFont';
+              font-size: 15px;
+            }
+
+            .accuracy-rate {
+              color: #ffa500;
+            }
 
-          .accuracy-rate {
-            color: #FFA500;
+            .error-rate {
+              color: #00f5fe;
+            }
           }
 
-          .error-rate {
-            color: #00f5fe;
+          .time {
+            color: #949494;
           }
         }
 
-        .time {
-          color: #949494;
+        .table-container {
+          height: 150px;
+          margin-top: 55px;
+          margin-left: 15px;
+          margin-right: 10px;
         }
       }
 
-      .table-container {
-        height: 150px;
-        margin-top: 55px;
-        margin-left: 15px;
-        margin-right: 10px;
-      }
-    }
+      .bottom-right {
+        margin-left: 10px;
 
-    .bottom-right {
-      margin-left: 10px;
+        .zl-top {
+          width: calc(100% - 30px);
+          padding: 0 20px;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          position: relative;
+          top: 35px;
+          z-index: 99;
+          margin: 10px;
+          border-bottom: 1px solid #00f5fe88;
+
+          .btn {
+            padding: 3px 10px;
+            border-top: 1px solid #c6c6c6;
+            background-image: linear-gradient(#c2c2c2aa, #b3b3b388 20%, #5a5a5a88);
+            cursor: pointer;
+            margin-right: 5px;
+
+            &:hover,
+            &:active {
+              border-top: 1px solid #00f5fe;
+              background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
+            }
+          }
 
-      .zl-top {
-        width: calc(100% - 30px);
-        padding: 0 20px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        position: relative;
-        top: 35px;
-        z-index: 99;
-        margin: 10px;
-        border-bottom: 1px solid #00f5fe88;
-
-        .btn {
-          padding: 3px 10px;
-          border-top: 1px solid #c6c6c6;
-          background-image: linear-gradient(#c2c2c2aa, #b3b3b388 20%, #5a5a5a88);
-          cursor: pointer;
-          margin-right: 5px;
-
-          &:hover,
-          &:active {
+          .active {
             border-top: 1px solid #00f5fe;
             background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
           }
-        }
-
-        .active {
-          border-top: 1px solid #00f5fe;
-          background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
-        }
 
-        .data {
-          font-family: 'douyuFont';
-          color: #FFA500;
-          font-size: 15px;
+          .data {
+            font-family: 'douyuFont';
+            color: #ffa500;
+            font-size: 15px;
+          }
         }
-      }
 
-      .zl-container {
-        width: 100%;
-        height: 100%;
-        margin: 0 15px;
-        background: url('/@/assets/images/vent/path/zl-bg1.png') no-repeat;
-        background-size: 920px 190px;
-        position: relative;
-
-        &::after {
-          content: '';
-          display: block;
-          position: absolute;
+        .zl-container {
           width: 100%;
           height: 100%;
-          top: 85px;
-          background: url('/@/assets/images/vent/path/zl-bg2.png') no-repeat;
-          background-size: 920px 100px;
+          margin: 0 15px;
+          background: url('/@/assets/images/vent/path/zl-bg1.png') no-repeat;
+          background-size: 920px 190px;
+          position: relative;
+
+          &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 85px;
+            background: url('/@/assets/images/vent/path/zl-bg2.png') no-repeat;
+            background-size: 920px 100px;
+          }
         }
-      }
 
-      .zl-path-item {
-        height: 67px;
-        background: url('/@/assets/images/vent/path/zl-path-item-bg.png') no-repeat;
-        background-size: auto;
-        background-position: center bottom;
-        position: absolute;
-        scale: 0.9;
+        .zl-path-item {
+          height: 67px;
+          background: url('/@/assets/images/vent/path/zl-path-item-bg.png') no-repeat;
+          background-size: auto;
+          background-position: center bottom;
+          position: absolute;
+          scale: 0.9;
 
-        .title {
-          position: relative;
-          top: -20px;
-          text-align: center;
-          font-size: 12px;
-          background: #00f5fe33;
-          padding: 3px 5px;
-          backdrop-filter: blur(5px);
+          .title {
+            position: relative;
+            top: -20px;
+            text-align: center;
+            font-size: 12px;
+            background: #00f5fe33;
+            padding: 3px 5px;
+            backdrop-filter: blur(5px);
+          }
         }
-      }
 
-      .position10 {
-        top: 130px;
-        left: 0px;
-      }
+        .position10 {
+          top: 130px;
+          left: 0px;
+        }
 
-      .position9 {
-        top: 52px;
-        left: 100px;
-      }
+        .position9 {
+          top: 52px;
+          left: 100px;
+        }
 
-      .position8 {
-        top: 132px;
-        left: 220px;
-      }
+        .position8 {
+          top: 132px;
+          left: 220px;
+        }
 
-      .position7 {
-        top: 128px;
-        left: 420px;
-      }
+        .position7 {
+          top: 128px;
+          left: 420px;
+        }
 
-      .position6 {
-        top: 60px;
-        left: 320px;
-      }
+        .position6 {
+          top: 60px;
+          left: 320px;
+        }
 
-      .position5 {
-        top: 120px;
-        left: 580px;
-      }
+        .position5 {
+          top: 120px;
+          left: 580px;
+        }
 
-      .position4 {
-        top: 123px;
-        left: 690px;
-      }
+        .position4 {
+          top: 123px;
+          left: 690px;
+        }
 
-      .position3 {
-        top: 103px;
-        left: 830px;
-      }
+        .position3 {
+          top: 103px;
+          left: 830px;
+        }
 
-      .position2 {
-        top: 90px;
-        left: 740px;
-      }
+        .position2 {
+          top: 90px;
+          left: 740px;
+        }
 
-      .position1 {
-        top: 80px;
-        left: 535px;
+        .position1 {
+          top: 80px;
+          left: 535px;
+        }
       }
     }
   }
-}
-
-.item-top-title {
-  width: 374px;
-  height: 32px;
-  text-align: center;
-  line-height: 34px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #fafafa;
-  position: absolute;
-  padding-top: 0px;
-  top: -9px;
-  z-index: 999;
-
-  &::before {
-    content: '';
-    display: block;
-    width: 40px;
-    height: 1px;
-    position: absolute;
-    left: 255px;
-    top: 50%;
-    transform: translateY(-50%);
-    -webkit-transform: translate(-50%, -50%);
-    background-color: #00d4fe88;
-  }
 
-  &::after {
-    content: '';
-    display: block;
-    width: 40px;
-    height: 1px;
+  .item-top-title {
+    width: 374px;
+    height: 32px;
+    text-align: center;
+    line-height: 34px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #fafafa;
     position: absolute;
-    left: 120px;
-    top: 50%;
-    transform: translateY(-50%);
-    -webkit-transform: translate(-50%, -50%);
-    background-color: #00d4fe88;
+    padding-top: 0px;
+    top: -9px;
+    z-index: 999;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 40px;
+      height: 1px;
+      position: absolute;
+      left: 255px;
+      top: 50%;
+      transform: translateY(-50%);
+      -webkit-transform: translate(-50%, -50%);
+      background-color: #00d4fe88;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      width: 40px;
+      height: 1px;
+      position: absolute;
+      left: 120px;
+      top: 50%;
+      transform: translateY(-50%);
+      -webkit-transform: translate(-50%, -50%);
+      background-color: #00d4fe88;
+    }
   }
-}
-
-.signal-round {
-  display: inline-block;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  position: relative;
-  top: -3px;
-
-  &::after {
-    display: block;
-    content: '';
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    top: -2px;
-    left: -2px;
+
+  .signal-round {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
     border-radius: 50%;
-    background-color: #daffc044;
-    box-shadow: 0 0 1px 1px #c6ff7722;
+    position: relative;
+    top: -3px;
+
+    &::after {
+      display: block;
+      content: '';
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      top: -2px;
+      left: -2px;
+      border-radius: 50%;
+      background-color: #daffc044;
+      box-shadow: 0 0 1px 1px #c6ff7722;
+    }
   }
-}
 
-.signal-round-run {
-  background-color: #67fc00;
+  .signal-round-run {
+    background-color: #67fc00;
 
-  &::after {
-    background-color: #daffc044;
-    box-shadow: 0 0 1px 1px #c6ff7722;
+    &::after {
+      background-color: #daffc044;
+      box-shadow: 0 0 1px 1px #c6ff7722;
+    }
   }
-}
 
-.signal-round-red {
-  background-color: #FF3823;
+  .signal-round-red {
+    background-color: #ff3823;
 
-  &::after {
-    background-color: #FF382344;
-    box-shadow: 0 0 1px 1px #FF382333;
+    &::after {
+      background-color: #ff382344;
+      box-shadow: 0 0 1px 1px #ff382333;
+    }
   }
-}
 
-.signal-round-orange {
-  background-color: #FF9B17;
+  .signal-round-orange {
+    background-color: #ff9b17;
 
-  &::after {
-    background-color: #FF9B1744;
-    box-shadow: 0 0 1px 1px #FF9B1733;
+    &::after {
+      background-color: #ff9b1744;
+      box-shadow: 0 0 1px 1px #ff9b1733;
+    }
   }
-}
 
-.signal-round-yellow {
-  background-color: #FFFF00;
+  .signal-round-yellow {
+    background-color: #ffff00;
 
-  &::after {
-    background-color: #FFFF0044;
-    box-shadow: 0 0 1px 1px #FFFF0033;
+    &::after {
+      background-color: #ffff0044;
+      box-shadow: 0 0 1px 1px #ffff0033;
+    }
   }
-}
 
-.table-container {
-  overflow-y: auto;
-  overflow-x: hidden;
-  pointer-events: auto;
+  .table-container {
+    overflow-y: auto;
+    overflow-x: hidden;
+    pointer-events: auto;
 
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 8px;
-    background-color: #f5f5f500;
-  }
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 8px;
+      background-color: #f5f5f500;
+    }
 
-  &::-webkit-scrollbar-track {
-    background-color: #ffffff33;
-    border-radius: 10px;
-  }
+    &::-webkit-scrollbar-track {
+      background-color: #ffffff33;
+      border-radius: 10px;
+    }
 
-  &::-webkit-scrollbar-thumb {
-    background-color: #cccccc44;
-    border-radius: 10px;
+    &::-webkit-scrollbar-thumb {
+      background-color: #cccccc44;
+      border-radius: 10px;
+    }
   }
-}
 
-@keyframes scale {
-  0% {
-    transform: translate(-50%, -50%) scale(0.9);
-    opacity: 1;
+  @keyframes scale {
+    0% {
+      transform: translate(-50%, -50%) scale(0.9);
+      opacity: 1;
+    }
+
+    100% {
+      transform: translate(-50%, -50%) scale(1.5);
+      opacity: 0;
+    }
   }
 
-  100% {
-    transform: translate(-50%, -50%) scale(1.5);
-    opacity: 0;
+  :deep(.@{ventSpace}-progress-text) {
+    color: #fff !important;
   }
-}
 
-:deep(.@{ventSpace}-progress-text) {
-  color: #fff !important;
-}
+  :deep(.@{ventSpace}-table-thead) {
+    background-color: transparent !important;
 
-:deep(.@{ventSpace}-table-thead) {
-  background-color: transparent !important;
+    & > tr {
+      border: 1px solid #00f5fe !important;
+    }
 
-  &>tr {
-    border: 1px solid #00f5fe !important;
+    & > tr > th {
+      // border: none !important;
+      color: #00f5fe !important;
+      border-top: 1px solid #00f5fe !important;
+      border-bottom: 1px solid #00f5fe !important;
+      border-left: none !important;
+      border-right: none !important;
+      font-size: 13px;
+    }
   }
 
-  &>tr>th {
-    // border: none !important;
-    color: #00f5fe !important;
-    border-top: 1px solid #00f5fe !important;
-    border-bottom: 1px solid #00f5fe !important;
-    border-left: none !important;
-    border-right: none !important;
-    font-size: 13px;
+  :deep(.@{ventSpace}-table-tbody) {
+    & > tr > td {
+      font-size: 13px;
+    }
   }
-}
 
-:deep(.@{ventSpace}-table-tbody) {
-  &>tr>td {
-    font-size: 13px;
+  :deep(.@{ventSpace}-table-small) {
+    border: none !important;
   }
-}
-
-:deep(.@{ventSpace}-table-small) {
-  border: none !important;
-}
 
-:deep(.@{ventSpace}-layout) {
-  background: transparent !important;
-}</style>
+  :deep(.@{ventSpace}-layout) {
+    background: transparent !important;
+  }
+</style>

src/views/sys/login/LoginForm.vue

@@ -174,13 +174,13 @@
       display: flex;
       justify-content: center;
     }
-    .input-box{
+    .input-box {
       width: 983px;
       height: 96px;
       border: none !important;
       text-align: center;
       padding-top: 30px !important;
-      
+
       padding-left: 20px !important;
       background-color: transparent !important;
       background-size: 100% auto;
@@ -199,19 +199,18 @@
         width: 100%;
         text-align: center;
         &:-webkit-autofill,
-
         &:-webkit-autofill:hover,
-
         &:-webkit-autofill:focus,
-
         &:-webkit-autofill:active {
           -webkit-transition-delay: 99999s;
-          -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
+          -webkit-transition:
+            color 99999s ease-out,
+            background-color 99999s ease-out;
           color: #fff;
         }
       }
     }
-    
+
     .btn-box {
       width: 100%;
       position: relative;

src/views/vent/deviceManager/equipManager/component/normalBtnTable.vue

@@ -145,6 +145,7 @@
   const [registerTable, { reload }] = tableContext;
 
   const saveOrUpdateHandler = async (params) => {
+    if (!params['description']) params['description'] = '';
     Object.assign(params, { dictId: dictId.value });
     try {
       await props.saveOrUpdate(params, isUpdate.value);
@@ -153,6 +154,8 @@
     } catch (error) {
       message.error('保存失败，请联系管理员');
     }
+    // 清除数据
+    dictId.value = null;
   };
 
   /**

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

@@ -305,9 +305,7 @@
   }
 
   function goModalDetail() {
-    router.push('/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D');
-    // history.pushState({}, '', '/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D');
-    // location.reload()
+    router.push('/micro-vent-3dModal/dashboard/analysis?type=model3D');
   }
 
   const changePageType = (pageType) => {

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

@@ -3,241 +3,241 @@ import { getAssetURL } from '/@/utils/ui';
 
 //中间区域数据-通风
 export const centerAreaListT1 = [
-    { id: 0, label: '进风量(m³/min)' },
-    { id: 1, label: '回风量(m³/min)' },
-    { id: 2, label: '需风量(m³/min)' },
+  { id: 0, label: '进风量(m³/min)' },
+  { id: 1, label: '回风量(m³/min)' },
+  { id: 2, label: '需风量(m³/min)' },
 ];
 //中间区域底部数据-通风
 export const centerAreaListB1 = [
-    {
-        id: 0,
-        content: '',
-    },
-    {
-        id: 1,
-        content: '',
-    },
-    {
-        id: 2,
-        content: '',
-    },
+  {
+    id: 0,
+    content: '',
+  },
+  {
+    id: 1,
+    content: '',
+  },
+  {
+    id: 2,
+    content: '',
+  },
 ];
 
 //内外因火灾菜单列表
-export const typeMenuList = [{ name: '内因火灾' }, { name: '外因火灾' },{name:'火灾指标'}];
+export const typeMenuList = [{ name: '内因火灾' }, { name: '外因火灾' }, { name: '火灾指标' }];
 //瓦斯监测菜单列表
-export const typeMenuListGas = [{ name: '预警监测' }, { name: '预警指标' },];
+export const typeMenuListGas = [{ name: '预警监测' }, { name: '预警指标' }];
 //当前加载组件
 export const componentName = {
-    fireWork: markRaw(defineAsyncComponent(() => import('./common/fireWork.vue'))),
-    closeWall: markRaw(defineAsyncComponent(() => import('./common/closeWall.vue'))),
-    mainWell: markRaw(defineAsyncComponent(() => import('./common/mainWell.vue'))),
-    warnTargetFire: markRaw(defineAsyncComponent(() => import('./common/warnTargetFire.vue'))),
+  fireWork: markRaw(defineAsyncComponent(() => import('./common/fireWork.vue'))),
+  closeWall: markRaw(defineAsyncComponent(() => import('./common/closeWall.vue'))),
+  mainWell: markRaw(defineAsyncComponent(() => import('./common/mainWell.vue'))),
+  warnTargetFire: markRaw(defineAsyncComponent(() => import('./common/warnTargetFire.vue'))),
 };
 //顶部区域数据
 export const topList = [
-    {
-        id: 0,
-        label: '最高温度(°C)',
-        imgSrc: true,
-        value: '--',
-        text: '',
-        list: [],
-    },
-    {
-        id: 1,
-        label: '最低温度(°C)',
-        imgSrc: true,
-        value: '--',
-        text: '',
-        list: [],
-    },
-    {
-        id: 2,
-        label: '平均温度(°C)',
-        imgSrc: true,
-        value: '--',
-        text: '',
-        list: [],
-    },
-    { id: 3, imgSrc: false, label: '', value: null, text: '--', list: [] },
-    {
-        id: 4,
-        imgSrc: false,
-        label: '回风隅角',
-        value: null,
-        text: '',
-        list: [
-            { id: 0, label: 'O₂', value: 0 },
-            { id: 1, label: 'CO', value: 0 },
-        ],
-    },
+  {
+    id: 0,
+    label: '最高温度(°C)',
+    imgSrc: true,
+    value: '--',
+    text: '',
+    list: [],
+  },
+  {
+    id: 1,
+    label: '最低温度(°C)',
+    imgSrc: true,
+    value: '--',
+    text: '',
+    list: [],
+  },
+  {
+    id: 2,
+    label: '平均温度(°C)',
+    imgSrc: true,
+    value: '--',
+    text: '',
+    list: [],
+  },
+  { id: 3, imgSrc: false, label: '', value: null, text: '--', list: [] },
+  {
+    id: 4,
+    imgSrc: false,
+    label: '回风隅角',
+    value: null,
+    text: '',
+    list: [
+      { id: 0, label: 'O₂', value: 0 },
+      { id: 1, label: 'CO', value: 0 },
+    ],
+  },
 ];
 
 export const ventilateTopList = [
-    {
-        id: 0,
-        label: '进风量(m³/min)',
-        imgSrc: true,
-        value: '--',
-        text: '',
-        list: [],
-    },
-    {
-        id: 1,
-        label: '回风量(m³/min)',
-        imgSrc: true,
-        value: '--',
-        text: '',
-        list: [],
-    },
-    {
-        id: 2,
-        label: '需风量(m³/min)',
-        imgSrc: true,
-        value: '--',
-        text: '',
-        list: [],
-    },
-    { id: 3, imgSrc: false, label: '', value: null, text: '--', list: [] },
-    {
-        id: 4,
-        imgSrc: false,
-        label: '其他信息',
-        value: null,
-        text: '',
-        list: [
-            { id: 0, label: 'O₂', value: 0 },
-            { id: 1, label: 'CO', value: 0 },
-        ],
-    },
+  {
+    id: 0,
+    label: '进风量(m³/min)',
+    imgSrc: true,
+    value: '--',
+    text: '',
+    list: [],
+  },
+  {
+    id: 1,
+    label: '回风量(m³/min)',
+    imgSrc: true,
+    value: '--',
+    text: '',
+    list: [],
+  },
+  {
+    id: 2,
+    label: '需风量(m³/min)',
+    imgSrc: true,
+    value: '--',
+    text: '',
+    list: [],
+  },
+  { id: 3, imgSrc: false, label: '', value: null, text: '--', list: [] },
+  {
+    id: 4,
+    imgSrc: false,
+    label: '其他信息',
+    value: null,
+    text: '',
+    list: [
+      { id: 0, label: 'O₂', value: 0 },
+      { id: 1, label: 'CO', value: 0 },
+    ],
+  },
 ];
 //束管监测选项列表
 export const contentList = [
-    {
-        id: 0,
-        list: [
-            {
-                id: '0-0',
-                title: 'O₂',
-                dw: '(%)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-            {
-                id: '0-1',
-                title: 'C₂H₄',
-                dw: '(ppm)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-        ],
-    },
-    {
-        id: 1,
-        list: [
-            {
-                id: '1-0',
-                title: 'CO',
-                dw: '(ppm)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-            {
-                id: '1-1',
-                title: 'CH₄',
-                dw: '(ppm)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-        ],
-    },
-    {
-        id: 2,
-        list: [
-            {
-                id: '2-0',
-                title: 'CO₂',
-                dw: '(%)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-            {
-                id: '2-1',
-                title: 'C₂H₂',
-                dw: '(ppm)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-        ],
-    },
+  {
+    id: 0,
+    list: [
+      {
+        id: '0-0',
+        title: 'O₂',
+        dw: '(%)',
+        label: '浓度 : ',
+        value: '--',
+        label1: '时间 : ',
+        time: '--',
+      },
+      {
+        id: '0-1',
+        title: 'C₂H₄',
+        dw: '(ppm)',
+        label: '浓度 : ',
+        value: '--',
+        label1: '时间 : ',
+        time: '--',
+      },
+    ],
+  },
+  {
+    id: 1,
+    list: [
+      {
+        id: '1-0',
+        title: 'CO',
+        dw: '(ppm)',
+        label: '浓度 : ',
+        value: '--',
+        label1: '时间 : ',
+        time: '--',
+      },
+      {
+        id: '1-1',
+        title: 'CH₄',
+        dw: '(ppm)',
+        label: '浓度 : ',
+        value: '--',
+        label1: '时间 : ',
+        time: '--',
+      },
+    ],
+  },
+  {
+    id: 2,
+    list: [
+      {
+        id: '2-0',
+        title: 'CO₂',
+        dw: '(%)',
+        label: '浓度 : ',
+        value: '--',
+        label1: '时间 : ',
+        time: '--',
+      },
+      {
+        id: '2-1',
+        title: 'C₂H₂',
+        dw: '(ppm)',
+        label: '浓度 : ',
+        value: '--',
+        label1: '时间 : ',
+        time: '--',
+      },
+    ],
+  },
 ];
 //外因火灾-工作面顶部区域数据
 export const topOutList = [
-    {
-      id: 0,
-      imgSrc: true,
-      label: '最高温度(°C)',
-      value: '0',
-      text: '',
-    },
-    {
-      id: 1,
-      imgSrc: true,
-      label: '最低温度(°C)',
-      value: '0',
-      text: '',
-    },
-    {
-      id: 2,
-      imgSrc: true,
-      label: '平均温度(°C)',
-      value: '0',
-      text: '',
-    },
-    { id: 3, imgSrc: false, label: '', value: null, text: '' },
-    // {
-    //   id: 4,
-    //   imgSrc: false,
-    //   label: '',
-    //   value: null,
-    //   text: '井下消防材料库',
-    // },
-  ];
-  //外因火灾-中间区域标题数据
+  {
+    id: 0,
+    imgSrc: true,
+    label: '最高温度(°C)',
+    value: '0',
+    text: '',
+  },
+  {
+    id: 1,
+    imgSrc: true,
+    label: '最低温度(°C)',
+    value: '0',
+    text: '',
+  },
+  {
+    id: 2,
+    imgSrc: true,
+    label: '平均温度(°C)',
+    value: '0',
+    text: '',
+  },
+  { id: 3, imgSrc: false, label: '', value: null, text: '' },
+  // {
+  //   id: 4,
+  //   imgSrc: false,
+  //   label: '',
+  //   value: null,
+  //   text: '井下消防材料库',
+  // },
+];
+//外因火灾-中间区域标题数据
 export const tabList = [
-    { id: 0, label: '烟雾传感器监测', details: '设备类型名称' },
-    { id: 1, label: '一氧化碳传感器监测', details: '设备类型名称' },
-    { id: 2, label: '自动喷淋灭火装置监测', details: '设备类型名称' },
-  ];
-  export const tabLists = [
-    { id: 0, label: '烟雾传感器监测', details: '设备类型名称' },
-    { id: 1, label: '温度传感器监测', details: '设备类型名称' },
-    { id: 2, label: '自动喷淋灭火装置监测', details: '设备类型名称' },
-    { id: 3, label: '一氧化碳传感器监测', details: '设备类型名称' },
-  ];
-  //外因火灾-传感器table列
+  { id: 0, label: '烟雾传感器监测', details: '设备类型名称' },
+  { id: 1, label: '一氧化碳传感器监测', details: '设备类型名称' },
+  { id: 2, label: '自动喷淋灭火装置监测', details: '设备类型名称' },
+];
+export const tabLists = [
+  { id: 0, label: '烟雾传感器监测', details: '设备类型名称' },
+  { id: 1, label: '温度传感器监测', details: '设备类型名称' },
+  { id: 2, label: '自动喷淋灭火装置监测', details: '设备类型名称' },
+  { id: 3, label: '一氧化碳传感器监测', details: '设备类型名称' },
+];
+//外因火灾-传感器table列
 export const columns = [
-    { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
-    { rowIndex: 2, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
-    { rowIndex: 3, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
-  ];
-  //外因火灾-烟雾传感器table列
+  { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
+  { rowIndex: 2, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
+  { rowIndex: 3, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
+];
+//外因火灾-烟雾传感器table列
 export const columnsSmoke = [
-    { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
-    { rowIndex: 2, dataIndex: 'val', title: '值', type: '1', align: 'center' },
-    { rowIndex: 3, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
-    { rowIndex: 4, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
-  ];
+  { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
+  { rowIndex: 2, dataIndex: 'val', title: '值', type: '1', align: 'center' },
+  { rowIndex: 3, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
+  { rowIndex: 4, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
+];

src/views/vent/monitorManager/alarmMonitor/common/mainWell.vue

@@ -44,51 +44,98 @@
           <span class="details">{{ `${items.details}>>` }}</span>
         </div>
         <div class="content">
-          <a-table v-if="index == 0" ref="table" size="small" :scroll="{ x: 0, y: 273 }" :columns="columnsSmoke"
-            :data-source="monitorlistYw" :pagination="false">
+          <a-table
+            v-if="index == 0"
+            ref="table"
+            size="small"
+            :scroll="{ x: 0, y: 273 }"
+            :columns="columnsSmoke"
+            :data-source="monitorlistYw"
+            :pagination="false"
+          >
             <span slot="action" slot-scope="text, record"></span>
           </a-table>
-          <a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
-            :pagination="false" :scroll="{ y: 273 }">
+          <a-table
+            v-if="index == 1"
+            ref="table1"
+            size="small"
+            :columns="columns"
+            :data-source="monitorlistHy"
+            :pagination="false"
+            :scroll="{ y: 273 }"
+          >
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
-          <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: 273 }" :columns="columns"
-            :data-source="monitorlistPl" :pagination="false">
+          <a-table
+            v-if="index == 2"
+            ref="table"
+            size="small"
+            :scroll="{ y: 273 }"
+            :columns="columns"
+            :data-source="monitorlistPl"
+            :pagination="false"
+          >
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
         </div>
       </div>
     </div>
     <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
-      <div v-for="(items, index) in tabLists" :class="index != 2 && index != 3 ? 'content-box' : 'content-boxs'"
-        :key="index">
+      <div v-for="(items, index) in tabLists" :class="index != 2 && index != 3 ? 'content-box' : 'content-boxs'" :key="index">
         <div class="title">
           <span class="title-label">{{ items.label }}</span>
           <span class="details">{{ `${items.details}>>` }}</span>
         </div>
         <div class="content">
-          <a-table v-if="index == 0" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
-            :columns="columnsSmoke" :data-source="monitorlistYw" :pagination="false">
+          <a-table
+            v-if="index == 0"
+            ref="table"
+            size="small"
+            :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
+            :columns="columnsSmoke"
+            :data-source="monitorlistYw"
+            :pagination="false"
+          >
             <span slot="action" slot-scope="text, record"></span>
           </a-table>
 
-          <a-table v-if="index == 1" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
-            :columns="columnsSmoke" :data-source="monitorlistWd" :pagination="false">
+          <a-table
+            v-if="index == 1"
+            ref="table"
+            size="small"
+            :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
+            :columns="columnsSmoke"
+            :data-source="monitorlistWd"
+            :pagination="false"
+          >
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
-          <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
-            :columns="columns" :data-source="monitorlistPl" :pagination="false">
+          <a-table
+            v-if="index == 2"
+            ref="table"
+            size="small"
+            :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
+            :columns="columns"
+            :data-source="monitorlistPl"
+            :pagination="false"
+          >
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
-          <a-table v-if="index == 3" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
-            :pagination="false" :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }">
+          <a-table
+            v-if="index == 3"
+            ref="table1"
+            size="small"
+            :columns="columns"
+            :data-source="monitorlistHy"
+            :pagination="false"
+            :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
+          >
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
         </div>
       </div>
     </div>
-    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
-      v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
       <div class="footer-title">
         <div class="echart-label">光钎测温系统实时温度监测</div>
       </div>
@@ -96,8 +143,7 @@
         <echartLine2 :echartDataWd="echartDataWd" />
       </div>
     </div>
-    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
-      v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
       <div class="footer-title">
         <div class="echart-label">光钎测温系统实时温度监测</div>
       </div>
@@ -110,8 +156,12 @@
     <div class="content-s" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
       <div class="title-b">采空区密闭参数</div>
       <div class="card-btn">
-        <div :class="activeIndex == index ? 'content-box1' : 'content-box'" v-for="(item, index) in mbList" :key="index"
-          @click="btnClick(item, index)">
+        <div
+          :class="activeIndex == index ? 'content-box1' : 'content-box'"
+          v-for="(item, index) in mbList"
+          :key="index"
+          @click="btnClick(item, index)"
+        >
           <div class="btn-label">
             <span>{{ item.label }}</span>
             <span>{{ item.dw }}</span>
@@ -143,918 +193,927 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, reactive, watch, defineProps } from 'vue';
-import { topOutList, tabList, tabLists, columns, columnsSmoke } from '../common.data';
-import imgUrl from '../../../../../assets/images/fire/pie.png';
-import echartLine2 from './echartLine2.vue';
-import echartLine1 from './echartLine1.vue';
-
-let props = defineProps({
-  listData: Object,
-  strType: String,
-});
-
-//束管监测-顶部区域数据
-let topContent = reactive({
-  temperature: '0',
-  position: '',
-  time: '',
-  warn: '',
-});
-//束管监测当前密闭参数激活选项
-let activeIndex = ref(0);
-//束管监测当前激活密闭参数类型
-let type = ref('O₂');
-//束管监测密闭参数列表
-let mbList = reactive([
-  {
-    label: 'O₂',
-    dw: '(%)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CO',
-    dw: '(ppm)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CO₂',
-    dw: '(%)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CH₄',
-    dw: '(%)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'C₂H₂',
-    dw: '(ppm)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'C₂H₄',
-    dw: '(ppm)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-]);
-let echartDataSg1 = reactive({
-  xData: [],
-  yData: [],
-  lengedData: 'O₂',
-  lengedDataName: '(%)',
-});
-let echartDataSgList = reactive<any[]>([]);
-
-//外因火灾温度监测-图表数据
-let echartDataWd = reactive({
-  xData: [],
-  maxData: {
-    data: [],
-    lengedData: '实时温度',
-  },
-});
-
-//烟雾传感器列表数据
-let monitorlistYw = reactive([]);
-
-//火焰传感器列表数据
-let monitorlistHy = reactive([]);
-
-//喷淋装置列表数据
-let monitorlistPl = reactive([]);
-
-//温度传感器列表数据
-let monitorlistWd = reactive([]);
-
-//束管监测密闭参数选项切换
-function btnClick(item, ind) {
-  activeIndex.value = ind;
-  type.value = item.label;
-  echartDataSg1.xData.length = 0;
-  echartDataSg1.yData.length = 0;
-  echartDataSg1.lengedData = type.value;
-  echartDataSg1.lengedDataName = item.dw;
-
-  switch (type.value) {
-    case 'O₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.o2val);
-      });
-      break;
-    case 'C₂H₄':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.ch2val);
-      });
-      break;
-    case 'CO':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.coval);
-      });
-      break;
-    case 'CH₄':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.chval);
-      });
-      break;
-    case 'CO₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.co2val);
-      });
-      break;
-    case 'C₂H₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.gasval);
-      });
-      break;
-  }
-}
-
-watch(
-  () => props.listData,
-  (val) => {
-    console.log(val, 'val---------------');
-    props.listData = val;
-    if (JSON.stringify(val) != '{}') {
-      echartDataSg1.xData.length = 0;
-      echartDataSg1.yData.length = 0;
-      echartDataSgList.length = 0;
-      echartDataWd.xData.length = 0;
-      echartDataWd.maxData.data.length = 0;
-      monitorlistYw.length = 0;
-      monitorlistHy.length = 0;
-      monitorlistPl.length = 0;
-      monitorlistWd.length = 0;
-      if (val.fiber.length != 0) {
-        topOutList[0].value = val.fiber[0].readData.fmax;
-        topOutList[1].value = val.fiber[0].readData.fmin;
-        topOutList[2].value = val.fiber[0].readData.favg;
-        topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常';
-        JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
-          echartDataWd.xData.push(el.pos);
-          echartDataWd.maxData.data.push(el.value);
+  import { ref, computed, reactive, watch, defineProps } from 'vue';
+  import { topOutList, tabList, tabLists, columns, columnsSmoke } from '../common.data';
+  import imgUrl from '../../../../../assets/images/fire/pie.png';
+  import echartLine2 from './echartLine2.vue';
+  import echartLine1 from './echartLine1.vue';
+
+  let props = defineProps({
+    listData: Object,
+    strType: String,
+  });
+
+  //束管监测-顶部区域数据
+  let topContent = reactive({
+    temperature: '0',
+    position: '',
+    time: '',
+    warn: '',
+  });
+  //束管监测当前密闭参数激活选项
+  let activeIndex = ref(0);
+  //束管监测当前激活密闭参数类型
+  let type = ref('O₂');
+  //束管监测密闭参数列表
+  let mbList = reactive([
+    {
+      label: 'O₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'CO',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'CO₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'CH₄',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'C₂H₂',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'C₂H₄',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
+    },
+  ]);
+  let echartDataSg1 = reactive({
+    xData: [],
+    yData: [],
+    lengedData: 'O₂',
+    lengedDataName: '(%)',
+  });
+  let echartDataSgList = reactive<any[]>([]);
+
+  //外因火灾温度监测-图表数据
+  let echartDataWd = reactive({
+    xData: [],
+    maxData: {
+      data: [],
+      lengedData: '实时温度',
+    },
+  });
+
+  //烟雾传感器列表数据
+  let monitorlistYw = reactive([]);
+
+  //火焰传感器列表数据
+  let monitorlistHy = reactive([]);
+
+  //喷淋装置列表数据
+  let monitorlistPl = reactive([]);
+
+  //温度传感器列表数据
+  let monitorlistWd = reactive([]);
+
+  //束管监测密闭参数选项切换
+  function btnClick(item, ind) {
+    activeIndex.value = ind;
+    type.value = item.label;
+    echartDataSg1.xData.length = 0;
+    echartDataSg1.yData.length = 0;
+    echartDataSg1.lengedData = type.value;
+    echartDataSg1.lengedDataName = item.dw;
+
+    switch (type.value) {
+      case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.o2val);
         });
-      } else {
-        topOutList[0].value = '--';
-        topOutList[1].value = '--';
-        topOutList[2].value = '--';
-        topOutList[3].text = '正常';
-      }
+        break;
+      case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.ch2val);
+        });
+        break;
+      case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.coval);
+        });
+        break;
+      case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.chval);
+        });
+        break;
+      case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.co2val);
+        });
+        break;
+      case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.gasval);
+        });
+        break;
+    }
+  }
+
+  watch(
+    () => props.listData,
+    (val) => {
+      console.log(val, 'val---------------');
+      props.listData = val;
+      if (JSON.stringify(val) != '{}') {
+        echartDataSg1.xData.length = 0;
+        echartDataSg1.yData.length = 0;
+        echartDataSgList.length = 0;
+        echartDataWd.xData.length = 0;
+        echartDataWd.maxData.data.length = 0;
+        monitorlistYw.length = 0;
+        monitorlistHy.length = 0;
+        monitorlistPl.length = 0;
+        monitorlistWd.length = 0;
+        if (val.fiber.length != 0) {
+          topOutList[0].value = val.fiber[0].readData.fmax;
+          topOutList[1].value = val.fiber[0].readData.fmin;
+          topOutList[2].value = val.fiber[0].readData.favg;
+          topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常';
+          JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
+            echartDataWd.xData.push(el.pos);
+            echartDataWd.maxData.data.push(el.value);
+          });
+        } else {
+          topOutList[0].value = '--';
+          topOutList[1].value = '--';
+          topOutList[2].value = '--';
+          topOutList[3].text = '正常';
+        }
 
-      if (val.bundletube.length != 0) {
-        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
-        topContent.position = val.bundletube[0].strinstallpos || '--';
-        topContent.time = val.bundletube[0].readTime || '--';
-        topContent.warn =
-          val.bundletube[0].warnLevel == 0
-            ? '正常'
-            : val.bundletube[0].warnLevel == 101
+        if (val.bundletube.length != 0) {
+          topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+          topContent.position = val.bundletube[0].strinstallpos || '--';
+          topContent.time = val.bundletube[0].readTime || '--';
+          topContent.warn =
+            val.bundletube[0].warnLevel == 0
+              ? '正常'
+              : val.bundletube[0].warnLevel == 101
               ? '较低风险'
               : val.bundletube[0].warnLevel == 102
-                ? '低风险'
-                : val.bundletube[0].warnLevel == 103
-                  ? '中风险'
-                  : val.bundletube[0].warnLevel == 104
-                    ? '高风险'
-                    : val.bundletube[0].warnLevel == 201
-                      ? '报警'
-                      : '正常';
-        val.bundletube[0].history.forEach((v) => {
-          echartDataSg1.xData.push(v.time);
-          if (echartDataSg1.lengedData == 'O₂') {
-            echartDataSg1.yData.push(v.o2val);
-          } else if (echartDataSg1.lengedData == 'C₂H₄') {
-            echartDataSg1.yData.push(v.ch2val);
-          } else if (echartDataSg1.lengedData == 'CO') {
-            echartDataSg1.yData.push(v.coval);
-          } else if (echartDataSg1.lengedData == 'CH₄') {
-            echartDataSg1.yData.push(v.chval);
-          } else if (echartDataSg1.lengedData == 'CO₂') {
-            echartDataSg1.yData.push(v.co2val);
-          } else if (echartDataSg1.lengedData == 'C₂H₂') {
-            echartDataSg1.yData.push(v.gasval);
-          }
-          echartDataSgList.push(v);
-        });
-      } else {
-        topContent.temperature = '--';
-        topContent.position = '--';
-        topContent.time = '--';
-        topContent.warn = '正常';
-      }
+              ? '低风险'
+              : val.bundletube[0].warnLevel == 103
+              ? '中风险'
+              : val.bundletube[0].warnLevel == 104
+              ? '高风险'
+              : val.bundletube[0].warnLevel == 201
+              ? '报警'
+              : '正常';
+          val.bundletube[0].history.forEach((v) => {
+            echartDataSg1.xData.push(v.time);
+            if (echartDataSg1.lengedData == 'O₂') {
+              echartDataSg1.yData.push(v.o2val);
+            } else if (echartDataSg1.lengedData == 'C₂H₄') {
+              echartDataSg1.yData.push(v.ch2val);
+            } else if (echartDataSg1.lengedData == 'CO') {
+              echartDataSg1.yData.push(v.coval);
+            } else if (echartDataSg1.lengedData == 'CH₄') {
+              echartDataSg1.yData.push(v.chval);
+            } else if (echartDataSg1.lengedData == 'CO₂') {
+              echartDataSg1.yData.push(v.co2val);
+            } else if (echartDataSg1.lengedData == 'C₂H₂') {
+              echartDataSg1.yData.push(v.gasval);
+            }
+            echartDataSgList.push(v);
+          });
+        } else {
+          topContent.temperature = '--';
+          topContent.position = '--';
+          topContent.time = '--';
+          topContent.warn = '正常';
+        }
 
-      if (val.smoke.length != 0) {
-        val.smoke.forEach((el) => {
-          monitorlistYw.push({ strinstallpos: el.strinstallpos, val: el.readData.smokeval, warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str, readTime: el.readTime });
-        });
-      }
+        if (val.smoke.length != 0) {
+          val.smoke.forEach((el) => {
+            monitorlistYw.push({
+              strinstallpos: el.strinstallpos,
+              val: el.readData.smokeval,
+              warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str,
+              readTime: el.readTime,
+            });
+          });
+        }
 
-      if (val.co.length != 0) {
-        val.co.forEach((el) => {
-          monitorlistHy.push(el);
-        });
-      }
+        if (val.co.length != 0) {
+          val.co.forEach((el) => {
+            monitorlistHy.push(el);
+          });
+        }
 
-      if (val.spray.length != 0) {
-        val.spray.forEach((el) => {
-          monitorlistPl.push(el);
-        });
-      }
+        if (val.spray.length != 0) {
+          val.spray.forEach((el) => {
+            monitorlistPl.push(el);
+          });
+        }
 
-      if (val.temperature.length != 0) {
-        val.temperature.forEach((el) => {
-          monitorlistWd.push({ strinstallpos: el.strinstallpos, val: el.readData.fireval, warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str, readTime: el.readTime });
-        });
+        if (val.temperature.length != 0) {
+          val.temperature.forEach((el) => {
+            monitorlistWd.push({
+              strinstallpos: el.strinstallpos,
+              val: el.readData.fireval,
+              warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str,
+              readTime: el.readTime,
+            });
+          });
+        }
       }
-    }
-  },
-  { immediate: true, deep: true }
-);
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-.mainWell {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-  overflow-y: auto;
-
-  .work-nav {
-    height: 15%;
+  .mainWell {
     width: 100%;
-    margin-bottom: 20px;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .nav {
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    .work-nav {
+      height: 15%;
+      width: 100%;
+      margin-bottom: 20px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
       display: flex;
-      justify-content: center;
+      justify-content: space-between;
       align-items: center;
 
-      &:nth-child(1) {
-        flex: 1;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-      }
+      .nav {
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-      &:nth-child(2) {
-        flex: 1;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        &:nth-child(1) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(2) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(3) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(4) {
+          flex: 1.2;
+          color: #b3b8cc;
+          font-size: 16px;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(5) {
+          flex: 0.8;
+          color: #2b87ff;
+          font-size: 14px;
+          height: 100%;
+        }
+
+        .pic {
+          width: 26%;
+          height: 84%;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .content {
+          height: 84%;
+          margin-left: 15px;
+          color: #fff;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          span {
+            font-size: 14px;
+
+            &:nth-child(1) {
+              padding: 5px 0px;
+              color: #b3b8cc;
+            }
+
+            &:nth-child(2) {
+              font-family: 'douyuFont';
+              font-size: 16px;
+              color: #3df6ff;
+            }
+          }
+        }
       }
 
-      &:nth-child(3) {
-        flex: 1;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      .nav:nth-child(1) .pic {
+        background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
+        background-size: 50% 50%;
       }
 
-      &:nth-child(4) {
-        flex: 1.2;
-        color: #b3b8cc;
-        font-size: 16px;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      .nav:nth-child(2) .pic {
+        background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
+        background-size: 50% 50%;
       }
 
-      &:nth-child(5) {
-        flex: 0.8;
-        color: #2b87ff;
-        font-size: 14px;
-        height: 100%;
+      .nav:nth-child(3) .pic {
+        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+        background-size: 50% 50%;
       }
 
-      .pic {
-        width: 26%;
-        height: 84%;
+      .content-box {
+        display: flex;
 
-        img {
-          width: 100%;
+        &:nth-child(1) {
+          justify-content: space-around;
+          align-items: center;
+          flex: 2;
           height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
         }
-      }
 
-      .content {
-        height: 84%;
-        margin-left: 15px;
-        color: #fff;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
+        &:nth-child(2) {
+          flex: 1;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+        }
 
-        span {
-          font-size: 14px;
+        .contents {
+          height: 73%;
 
           &:nth-child(1) {
-            padding: 5px 0px;
-            color: #b3b8cc;
+            width: 40%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            img {
+              position: relative;
+              width: 23%;
+              height: 100%;
+              background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+              background-size: 50% 50%;
+            }
+
+            .text {
+              font-family: 'douyuFont';
+              font-size: 28px;
+              margin: 0px 15px;
+              color: #3df6ff;
+            }
+
+            .dw {
+              font-size: 14px;
+              color: #b3b8cc;
+            }
           }
 
           &:nth-child(2) {
-            font-family: 'douyuFont';
-            font-size: 16px;
-            color: #3df6ff;
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .text {
+              font-size: 18px;
+
+              .text-label {
+                color: #b3b8cc;
+                font-weight: bold;
+              }
+
+              .text-value {
+                font-family: 'douyuFont';
+                color: #3df6ff;
+                margin-left: 10px;
+              }
+            }
           }
         }
-      }
-    }
-
-    .nav:nth-child(1) .pic {
-      background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
-      background-size: 50% 50%;
-    }
 
-    .nav:nth-child(2) .pic {
-      background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
-      background-size: 50% 50%;
-    }
-
-    .nav:nth-child(3) .pic {
-      background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-      background-size: 50% 50%;
+        .text1 {
+          font-size: 16px;
+          color: #b3b8cc;
+          font-weight: bold;
+        }
+      }
     }
 
-    .content-box {
+    .center-box {
+      height: 47%;
+      margin-bottom: 20px;
       display: flex;
+      justify-content: space-between;
+      align-items: center;
 
-      &:nth-child(1) {
-        justify-content: space-around;
-        align-items: center;
-        flex: 2;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-      }
-
-      &:nth-child(2) {
-        flex: 1;
-        justify-content: center;
-        align-items: center;
+      .content-box {
+        display: flex;
+        flex-direction: column;
+        width: 32%;
         height: 100%;
-      }
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-      .contents {
-        height: 73%;
+        &:nth-child(2) {
+          margin: 0px 20px;
+        }
 
-        &:nth-child(1) {
-          width: 40%;
+        .title {
+          width: 100%;
+          height: 40px;
+          padding: 0px 15px;
+          margin-bottom: 10px;
+          border-bottom: 1px solid #0c3c88;
+          box-sizing: border-box;
           display: flex;
-          justify-content: center;
+          justify-content: space-between;
           align-items: center;
 
-          img {
-            position: relative;
-            width: 23%;
-            height: 100%;
-            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-            background-size: 50% 50%;
-          }
-
-          .text {
-            font-family: 'douyuFont';
-            font-size: 28px;
-            margin: 0px 15px;
-            color: #3df6ff;
+          .title-label {
+            // font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
           }
 
-          .dw {
+          .details {
             font-size: 14px;
-            color: #b3b8cc;
+            color: #1f81df;
           }
         }
 
-        &:nth-child(2) {
-          width: 60%;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
+        .content {
+          height: calc(100% - 40px);
+          margin-bottom: 10px;
+        }
+      }
+    }
 
-          .text {
-            font-size: 18px;
+    .center-box1 {
+      height: 70%;
+      // margin-bottom: 20px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
 
-            .text-label {
-              color: #b3b8cc;
-              font-weight: bold;
-            }
+      .content-box {
+        display: flex;
+        flex-direction: column;
+        width: calc(50% - 10px);
+        height: calc(70% - 10px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-            .text-value {
-              font-family: 'douyuFont';
-              color: #3df6ff;
-              margin-left: 10px;
-            }
-          }
+        &:nth-child(1) {
+          margin: 0px 20px 20px 0px;
         }
-      }
 
-      .text1 {
-        font-size: 16px;
-        color: #b3b8cc;
-        font-weight: bold;
-      }
-    }
-  }
+        &:nth-child(3) {
+          margin: 0px 20px 0px 0px;
+        }
+
+        .title {
+          width: 100%;
+          height: 40px;
+          padding: 0px 15px;
+          margin-bottom: 10px;
+          border-bottom: 1px solid #0c3c88;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-  .center-box {
-    height: 47%;
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+          .title-label {
+            font-size: 16px;
+            color: #fff;
+          }
 
-    .content-box {
-      display: flex;
-      flex-direction: column;
-      width: 32%;
-      height: 100%;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
+          .details {
+            font-size: 14px;
+            color: #1f81df;
+          }
+        }
 
-      &:nth-child(2) {
-        margin: 0px 20px;
+        .content {
+          height: calc(100% - 40px);
+          margin-bottom: 10px;
+        }
       }
 
-      .title {
-        width: 100%;
-        height: 40px;
-        padding: 0px 15px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #0c3c88;
-        box-sizing: border-box;
+      .content-boxs {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
+        flex-direction: column;
+        width: calc(50% - 10px);
+        height: calc(30% - 30px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .title-label {
-          // font-family: 'douyuFont';
-          font-size: 14px;
-          color: #fff;
+        &:nth-child(1) {
+          margin: 0px 20px 20px 0px;
         }
 
-        .details {
-          font-size: 14px;
-          color: #1f81df;
+        &:nth-child(3) {
+          margin: 0px 20px 20px 0px;
         }
-      }
 
-      .content {
-        height: calc(100% - 40px);
-        margin-bottom: 10px;
-      }
-    }
-  }
+        .title {
+          width: 100%;
+          height: 40px;
+          padding: 0px 15px;
+          margin-bottom: 10px;
+          border-bottom: 1px solid #0c3c88;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-  .center-box1 {
-    height: 70%;
-    // margin-bottom: 20px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-wrap: wrap;
+          .title-label {
+            font-size: 16px;
+            color: #fff;
+          }
 
-    .content-box {
-      display: flex;
-      flex-direction: column;
-      width: calc(50% - 10px);
-      height: calc(70% - 10px);
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
+          .details {
+            font-size: 14px;
+            color: #1f81df;
+          }
+        }
 
-      &:nth-child(1) {
-        margin: 0px 20px 20px 0px;
+        .content {
+          height: calc(100% - 40px);
+          margin-bottom: 10px;
+        }
       }
+    }
 
-      &:nth-child(3) {
-        margin: 0px 20px 0px 0px;
-      }
+    .center-box2 {
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
 
-      .title {
-        width: 100%;
-        height: 40px;
-        padding: 0px 15px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #0c3c88;
-        box-sizing: border-box;
+      .content-box {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
+        flex-direction: column;
+        width: calc(50% - 10px);
+        height: calc(70% - 10px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .title-label {
-          font-size: 16px;
-          color: #fff;
+        &:nth-child(1) {
+          margin: 0px 20px 20px 0px;
         }
 
-        .details {
-          font-size: 14px;
-          color: #1f81df;
+        &:nth-child(3) {
+          margin: 0px 20px 0px 0px;
         }
-      }
 
-      .content {
-        height: calc(100% - 40px);
-        margin-bottom: 10px;
-      }
-    }
+        .title {
+          width: 100%;
+          height: 40px;
+          padding: 0px 15px;
+          margin-bottom: 10px;
+          border-bottom: 1px solid #0c3c88;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-    .content-boxs {
-      display: flex;
-      flex-direction: column;
-      width: calc(50% - 10px);
-      height: calc(30% - 30px);
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
+          .title-label {
+            font-size: 16px;
+            color: #fff;
+          }
 
-      &:nth-child(1) {
-        margin: 0px 20px 20px 0px;
-      }
+          .details {
+            font-size: 14px;
+            color: #1f81df;
+          }
+        }
 
-      &:nth-child(3) {
-        margin: 0px 20px 20px 0px;
+        .content {
+          height: calc(100% - 40px);
+          margin-bottom: 10px;
+        }
       }
 
-      .title {
-        width: 100%;
-        height: 40px;
-        padding: 0px 15px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #0c3c88;
-        box-sizing: border-box;
+      .content-boxs {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
+        flex-direction: column;
+        width: calc(50% - 10px);
+        height: calc(30% - 30px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .title-label {
-          font-size: 16px;
-          color: #fff;
+        &:nth-child(1) {
+          margin: 0px 20px 20px 0px;
         }
 
-        .details {
-          font-size: 14px;
-          color: #1f81df;
+        &:nth-child(3) {
+          margin: 0px 20px 20px 0px;
         }
-      }
 
-      .content {
-        height: calc(100% - 40px);
-        margin-bottom: 10px;
-      }
-    }
-  }
+        .title {
+          width: 100%;
+          height: 40px;
+          padding: 0px 15px;
+          margin-bottom: 10px;
+          border-bottom: 1px solid #0c3c88;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-  .center-box2 {
-    height: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-wrap: wrap;
+          .title-label {
+            font-size: 16px;
+            color: #fff;
+          }
 
-    .content-box {
-      display: flex;
-      flex-direction: column;
-      width: calc(50% - 10px);
-      height: calc(70% - 10px);
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
+          .details {
+            font-size: 14px;
+            color: #1f81df;
+          }
+        }
 
-      &:nth-child(1) {
-        margin: 0px 20px 20px 0px;
+        .content {
+          height: calc(100% - 40px);
+          margin-bottom: 10px;
+        }
       }
+    }
 
-      &:nth-child(3) {
-        margin: 0px 20px 0px 0px;
-      }
+    .footer-box {
+      height: calc(38% - 40px);
+      padding: 10px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
 
-      .title {
-        width: 100%;
-        height: 40px;
-        padding: 0px 15px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #0c3c88;
-        box-sizing: border-box;
+      .footer-title {
+        height: 30px;
         display: flex;
         justify-content: space-between;
         align-items: center;
 
-        .title-label {
-          font-size: 16px;
-          color: #fff;
-        }
-
-        .details {
+        .echart-label {
+          font-family: 'douyuFont';
           font-size: 14px;
-          color: #1f81df;
+          color: #fff;
         }
       }
 
-      .content {
-        height: calc(100% - 40px);
-        margin-bottom: 10px;
+      .echart-content {
+        height: calc(100% - 30px);
       }
     }
 
-    .content-boxs {
-      display: flex;
-      flex-direction: column;
-      width: calc(50% - 10px);
-      height: calc(30% - 30px);
+    .footer-box1 {
+      height: calc(30% - 20px);
+      padding: 10px 15px;
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
       background-size: 100% 100%;
+      box-sizing: border-box;
 
-      &:nth-child(1) {
-        margin: 0px 20px 20px 0px;
-      }
-
-      &:nth-child(3) {
-        margin: 0px 20px 20px 0px;
-      }
-
-
-      .title {
-        width: 100%;
-        height: 40px;
-        padding: 0px 15px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #0c3c88;
-        box-sizing: border-box;
+      .footer-title {
+        height: 30px;
         display: flex;
         justify-content: space-between;
         align-items: center;
 
-        .title-label {
+        .echart-label {
+          font-family: 'douyuFont';
           font-size: 16px;
           color: #fff;
         }
-
-        .details {
-          font-size: 14px;
-          color: #1f81df;
-        }
       }
 
-      .content {
-        height: calc(100% - 40px);
-        margin-bottom: 10px;
+      .echart-content {
+        height: calc(100% - 30px);
       }
     }
-  }
-
-  .footer-box {
-    height: calc(38% - 40px);
-    padding: 10px;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
 
-    .footer-title {
-      height: 30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+    .content-s {
+      width: 100%;
+      height: 608px;
+      padding: 10px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
 
-      .echart-label {
+      .title-b {
+        height: 30px;
+        line-height: 30px;
         font-family: 'douyuFont';
         font-size: 14px;
         color: #fff;
       }
-    }
-
-    .echart-content {
-      height: calc(100% - 30px);
-    }
-  }
 
-  .footer-box1 {
-    height: calc(30% - 20px);
-    padding: 10px 15px;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-
-    .footer-title {
-      height: 30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+      .card-btn {
+        height: 28%;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
 
-      .echart-label {
-        font-family: 'douyuFont';
-        font-size: 16px;
-        color: #fff;
-      }
-    }
+        .content-box {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+          background-size: 100% 100%;
+          cursor: pointer;
 
-    .echart-content {
-      height: calc(100% - 30px);
-    }
-  }
+          .btn-label {
+            position: absolute;
+            left: 50%;
+            top: 0;
+            transform: translate(-50%);
+            font-size: 16px;
+            color: #fff;
+          }
 
-  .content-s {
-    width: 100%;
-    height: 608px;
-    padding: 10px;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
+          .box-item {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 89%;
+            height: 16%;
+            padding: 0px 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
+            }
 
-    .title-b {
-      height: 30px;
-      line-height: 30px;
-      font-family: 'douyuFont';
-      font-size: 14px;
-      color: #fff;
-    }
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
+            }
+          }
 
-    .card-btn {
-      height: 28%;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: space-between;
+          .box-item1 {
+            top: 24%;
+          }
 
-      .content-box {
-        position: relative;
-        width: 16%;
-        height: 100%;
-        background: url('../../../../../assets/images/fire/1.png') no-repeat center;
-        background-size: 100% 100%;
-        cursor: pointer;
+          .box-item2 {
+            top: 50%;
+          }
 
-        .btn-label {
-          position: absolute;
-          left: 50%;
-          top: 0;
-          transform: translate(-50%);
-          font-size: 16px;
-          color: #fff;
+          .box-item3 {
+            top: 75%;
+          }
         }
 
-        .box-item {
-          position: absolute;
-          left: 50%;
-          transform: translate(-50%, 0);
-          width: 89%;
-          height: 16%;
-          padding: 0px 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+        .content-box1 {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: url('../../../../../assets/images/fire/2.png') no-repeat center;
           background-size: 100% 100%;
+          cursor: pointer;
 
-          .text-t {
-            width: 17%;
+          .btn-label {
+            position: absolute;
+            left: 50%;
+            top: 0;
+            transform: translate(-50%);
+            font-size: 16px;
             color: #fff;
-            font-size: 12px;
           }
 
-          .text-v {
-            width: 83%;
-            font-family: 'douyuFont';
-            font-size: 10px;
-            color: #3df6ff;
+          .box-item {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 89%;
+            height: 16%;
+            padding: 0px 10px;
             display: flex;
-            justify-content: flex-end;
+            justify-content: space-between;
+            align-items: center;
+            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
+            }
+
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
+            }
           }
-        }
 
-        .box-item1 {
-          top: 24%;
-        }
+          .box-item1 {
+            top: 19%;
+          }
 
-        .box-item2 {
-          top: 50%;
-        }
+          .box-item2 {
+            top: 41%;
+          }
 
-        .box-item3 {
-          top: 75%;
+          .box-item3 {
+            top: 63%;
+          }
         }
       }
 
-      .content-box1 {
-        position: relative;
-        width: 16%;
-        height: 100%;
-        background: url('../../../../../assets/images/fire/2.png') no-repeat center;
-        background-size: 100% 100%;
-        cursor: pointer;
-
-        .btn-label {
-          position: absolute;
-          left: 50%;
-          top: 0;
-          transform: translate(-50%);
-          font-size: 16px;
-          color: #fff;
-        }
+      .echart-box {
+        height: calc(72% - 41px);
+        border: 1px solid #114aac;
 
-        .box-item {
-          position: absolute;
-          left: 50%;
-          transform: translate(-50%, 0);
-          width: 89%;
-          height: 16%;
+        .title-f {
+          height: 40px;
           padding: 0px 10px;
+          box-sizing: border-box;
           display: flex;
           justify-content: space-between;
           align-items: center;
-          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-          background-size: 100% 100%;
-
-          .text-t {
-            width: 17%;
-            color: #fff;
-            font-size: 12px;
-          }
 
-          .text-v {
-            width: 83%;
+          .title-text {
             font-family: 'douyuFont';
-            font-size: 10px;
-            color: #3df6ff;
-            display: flex;
-            justify-content: flex-end;
+            font-size: 14px;
+            color: #fff;
           }
         }
 
-        .box-item1 {
-          top: 19%;
+        .echarts-box {
+          height: calc(100% - 40px);
         }
-
-        .box-item2 {
-          top: 41%;
-        }
-
-        .box-item3 {
-          top: 63%;
-        }
-      }
-    }
-
-    .echart-box {
-      height: calc(72% - 41px);
-      border: 1px solid #114aac;
-
-      .title-f {
-        height: 40px;
-        padding: 0px 10px;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .title-text {
-          font-family: 'douyuFont';
-          font-size: 14px;
-          color: #fff;
-        }
-      }
-
-      .echarts-box {
-        height: calc(100% - 40px);
       }
     }
   }
-}
 </style>

src/views/vent/monitorManager/beltTunMonitor/components/beltTunGasHome.vue

@@ -15,7 +15,7 @@
             </div>
           </template>
         </ventBox1>
-        <ventBox1 class="vent-margin-t-10"> 
+        <ventBox1 class="vent-margin-t-10">
           <template #title>
             <div>当前抽采地质测定 (<span class="param-set"> 参数设定 </span> ) </div>
           </template>
@@ -28,7 +28,7 @@
             </div>
           </template>
         </ventBox1>
-        <ventBox1 class="vent-margin-t-10"> 
+        <ventBox1 class="vent-margin-t-10">
           <template #title>
             <div>工作面瓦斯抽采基础属性参数</div>
           </template>
@@ -41,7 +41,6 @@
             </div>
           </template>
         </ventBox1>
-        
       </div>
       <div class="lr right-box">
         <div class="item-box sensor-container">
@@ -50,15 +49,31 @@
               <div>瓦斯抽采监测与控制</div>
             </template>
             <template #container>
-              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>抽采泵监测与控制</span></div>
+              <div class="parameter-title group-parameter-title"
+                ><SvgIcon class="icon" size="42" name="alarm-icon" /><span>抽采泵监测与控制</span></div
+              >
               <div class="vent-margin-b-10 vent-padding-lr-5">
                 <div class="vent-flex-row-between vent-padding-lr-5 gas-pump-item" v-for="(item, index) in gasPump" :key="index">
                   <div class="title">{{ item.title }}</div>
-                  <div><span class="signal-round vent-margin-r-8" :class="{ 'signal-round-gry': item.value == '0', 'signal-round-blue': item.value == '1' }"></span>{{ item.value == '0' ? '关闭' : '开启' }}</div>
-                  <a-switch v-model:checked="gasPumpCtr[item.ctrCode]" checked-children="开启" un-checked-children="关闭" checkedValue="1" unCheckedValue="0" />
+                  <div
+                    ><span
+                      class="signal-round vent-margin-r-8"
+                      :class="{ 'signal-round-gry': item.value == '0', 'signal-round-blue': item.value == '1' }"
+                    ></span
+                    >{{ item.value == '0' ? '关闭' : '开启' }}</div
+                  >
+                  <a-switch
+                    v-model:checked="gasPumpCtr[item.ctrCode]"
+                    checked-children="开启"
+                    un-checked-children="关闭"
+                    checkedValue="1"
+                    unCheckedValue="0"
+                  />
                 </div>
               </div>
-              <div class="parameter-title group-parameter-title vent-margin-t-15"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>阀门开度管理</span></div>
+              <div class="parameter-title group-parameter-title vent-margin-t-15"
+                ><SvgIcon class="icon" size="42" name="alarm-icon" /><span>阀门开度管理</span></div
+              >
               <div class="input-box">
                 <div v-for="(item, index) in gasPumpValve" :key="index" class="input-item">
                   <div class="">{{ item.title }}</div>
@@ -67,8 +82,10 @@
                   <span class="btn btn1">保存</span>
                 </div>
               </div>
-              <div class="parameter-title group-parameter-title vent-margin-t-15"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>高负压管路监测与控制</span></div>
-              <div  v-for="num in highTensionNum" :key="num">
+              <div class="parameter-title group-parameter-title vent-margin-t-15"
+                ><SvgIcon class="icon" size="42" name="alarm-icon" /><span>高负压管路监测与控制</span></div
+              >
+              <div v-for="num in highTensionNum" :key="num">
                 <div class="vent-flex-row-between">
                   <span class="base-title">抽采单元{{ num }}</span>
                   <div class="detail">详情</div>
@@ -80,7 +97,9 @@
                   </div>
                 </div>
               </div>
-              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>低负压管路监测与控制</span></div>
+              <div class="parameter-title group-parameter-title"
+                ><SvgIcon class="icon" size="42" name="alarm-icon" /><span>低负压管路监测与控制</span></div
+              >
               <div v-for="num in lowTensionNum" :key="num">
                 <div class="vent-flex-row-between">
                   <span class="base-title">抽采单元{{ num }}</span>
@@ -102,125 +121,130 @@
 </template>
 
 <script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
+  import { ArrowRightOutlined } from '@ant-design/icons-vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { list } from '../beltTun.api';
+  import {
+    gasMonitor,
+    gasParamData,
+    currentGasMonitor,
+    gasPumpValve,
+    gasPump,
+    gasExtractionUnit,
+    highTensionNum,
+    lowTensionNum,
+    gasPumpCtr,
+  } from '../beltTun.data';
 
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
-import { ArrowRightOutlined } from '@ant-design/icons-vue';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { SvgIcon } from '/@/components/Icon';
-import { list } from '../beltTun.api';
-import { gasMonitor, gasParamData, currentGasMonitor, gasPumpValve, gasPump, gasExtractionUnit, highTensionNum, lowTensionNum, gasPumpCtr } from '../beltTun.data'
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
 
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
-  }
-})
-
-const loading = ref(false)
+  const loading = ref(false);
 
-// 默认初始是第一行
-const beltTunSource = ref({});
-const beltTunHistorySource = ref([])
-const gateDataSource = ref([]);
-const windowDataSource = ref([]);
-const windDataSource = ref([]);
-const temperatureDataSource = ref([]);
-const fireDataSource = ref([]);
+  // 默认初始是第一行
+  const beltTunSource = ref({});
+  const beltTunHistorySource = ref([]);
+  const gateDataSource = ref([]);
+  const windowDataSource = ref([]);
+  const windDataSource = ref([]);
+  const temperatureDataSource = ref([]);
+  const fireDataSource = ref([]);
 
+  // 监测数据
+  const selectData = reactive({});
 
-// 监测数据
-const selectData = reactive({});
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data);
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID });
+    const result = res.msgTxt;
+    result.forEach((item) => {
+      // ''.startsWith
+      if (item.type.startsWith('gate')) {
+        // 风门
+        gateDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+      if (item.type.startsWith('window')) {
+        // 风窗
+        windowDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+      if (item.type.startsWith('windrect')) {
+        // 测风
+        windDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      if (timer) {
-        timer = null;
+      if (item.type === 'modelsensor_temperature') {
+        // 温度
+        temperatureDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      await getMonitor();
-      loading.value = false
-    }, flag ? 0 :1000);
+      if (item.type === 'modelsensor_fire') {
+        // 火焰
+        fireDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+      if (item.type === 'sys') {
+        beltTunSource.value = Object.assign(item['datalist'][0], item['datalist'][0].readData);
+      }
+      if (item.type === 'surface_history') {
+        beltTunHistorySource.value = item['datalist'][0];
+      }
+      loading.value = false;
+    });
   }
-};
 
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID });
-  const result = res.msgTxt;
-  result.forEach(item => {
-    // ''.startsWith
-    if (item.type.startsWith('gate')) {
-      // 风门
-      gateDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
+  function toDetail() {}
 
-    }
-    if (item.type.startsWith('window')) {
-      // 风窗
-      windowDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type.startsWith('windrect')) {
-      // 测风
-      windDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type === 'modelsensor_temperature') {
-      // 温度
-      temperatureDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type === 'modelsensor_fire') {
-      // 火焰
-      fireDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type === 'sys') {
-      beltTunSource.value = Object.assign(item['datalist'][0], item['datalist'][0].readData);
-    }
-    if (item.type === 'surface_history') {
-      beltTunHistorySource.value = item['datalist'][0]
-    }
-    loading.value = false;
-  })
-}
-
-function toDetail() {
-
-}
+  onBeforeMount(() => {});
 
-
-onBeforeMount(() => {
-
-});
-
-onMounted(async () => {
-  loading.value = true;
-  timer = null
-  await getMonitor(true)
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
+  onMounted(async () => {
+    loading.value = true;
+    timer = null;
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 
 <style lang="less">
@@ -246,58 +270,58 @@ onUnmounted(() => {
   @import '/@/design/vent/modal.less';
   @import '../../comment/less/workFace.less';
 
-  .left-box{
+  .left-box {
     width: 360px;
   }
-  .gas-pump-item{
+  .gas-pump-item {
     padding: 3px 0;
   }
 
-  .param-set{
+  .param-set {
     color: #45d3fd;
     cursor: pointer;
-    &:hover{
+    &:hover {
       color: #38a6c8;
     }
   }
 
-  .input-item{
+  .input-item {
     margin: 3px 0 !important;
-    .value{
+    .value {
       width: 80px;
       text-align: center;
     }
   }
-  .data-group{
+  .data-group {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     padding-bottom: 8px;
-    .data-item{
+    .data-item {
       width: calc(50% - 10px);
       display: flex;
       justify-content: space-between;
       line-height: 24px;
-      background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
       margin: 4px 0;
     }
-    .value{
+    .value {
       color: #00eefffe;
     }
-    .data-item1{
+    .data-item1 {
       width: 100%;
       line-height: 24px;
-      background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
       margin: 4px 0;
     }
   }
 
-  .base-title{
+  .base-title {
     line-height: 26px;
     position: relative;
     padding-left: 15px;
     color: #9bf2ff;
-    &::after{
+    &::after {
       content: '';
       position: absolute;
       display: block;
@@ -310,14 +334,13 @@ onUnmounted(() => {
     }
   }
 
-  .detail{
+  .detail {
     border: 1px solid #9bf2ff88;
     padding: 0 5px;
     background-color: #ffffff11;
     margin-right: 4px;
-    &:hover{
+    &:hover {
       background-color: #ffffff05;
     }
   }
-  
 </style>

src/views/vent/monitorManager/comment/AlarmHistoryTable.vue

@@ -60,7 +60,6 @@
   const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
 
   async function getDeviceList() {
-    debugger;
     if (props.deviceType.split('_')[1] && props.deviceType.split('_')[1] === 'history') return;
     let result;
     if (!props.sysId) {
@@ -211,6 +210,10 @@
             component: 'Select',
             defaultValue: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
             componentProps: {
+              showSearch: true,
+              filterOption: (input: string, option: any) => {
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+              },
               options: deviceOptions,
             },
             colProps: {

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

@@ -355,6 +355,9 @@ import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue
 import { nextTick } from 'vue';
 import { useMethods } from '/@/hooks/system/useMethods';
 import { useGo } from '/@/hooks/web/usePage';
+import { useGlobSetting } from '/@/hooks/setting';
+
+const glob = useGlobSetting();
 // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
 
 const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal } = getMonitorComponent()
@@ -776,8 +779,7 @@ function toHome() {
   if (timer) clearTimeout(timer)
   timer = undefined
   deviceType.value = ''
-  go(`/micro-vent-3dModal/dashboard/analysis`)
-  // actions.setGlobalState({ pageObj: { pageType: 'home' } });
+  go(glob.homePath)
 }
 
 function toHide() {
@@ -805,7 +807,7 @@ async function findTreeDataValue(obj) {
       if (item.children.length > 0) {
         findDeviceType(item.children, obj)
       }
-
+      debugger;
       if (item.type == type) {
         if(obj.deviceid && deviceType.value != 'sys'){
           deviceType.value = 'sys'
@@ -892,19 +894,16 @@ function setLocation() {
 }
 
 watch(() => props.pageData, async (pageObj) => {
+  debugger;
   isRefresh.value = false
   if (!treeData.value || treeData.value?.length < 1) {
     await getDeviceType()
   }
   nextTick(() => {
     isRefresh.value = true
-    if (pageObj.deviceid) {
-      findTreeDataValue({ deviceid: pageObj.deviceid })
-    } else if (pageObj.pageType) {
-      findTreeDataValue({ deviceType: pageObj.pageType })
-    }
+    findTreeDataValue(pageObj)
   })
-})
+},{immediate: true})
 
 onMounted(async () => {
   const pageObj = props.pageData
@@ -934,6 +933,8 @@ onMounted(async () => {
   // safetyOption.value = await safetyDeviceList(null, { devicetype: 'safetymonitor', code: 'dataTypeName' })
 })
 
+
+
 onUnmounted(() => {
   if (timer) {
     clearTimeout(timer);

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

@@ -132,7 +132,10 @@
             leave-active-class="animate__animated  animate__slideOutDown"
           >
         <div class="bottom-box" v-if="show">
-          <div class="to-small" @click="toHome"></div>
+          <div class="icon-group">
+            <div class="to-small" @click="toHome('home')"></div>
+            <div class="to-model" @click="toHome('model')"></div>
+          </div>
           <div class="bottom-left bottom-lr-box">
             <div class="network-top">
                 <!-- <div class="network-top-left">
@@ -254,7 +257,10 @@ import { sensorColumns, networkColumns, warningColumns, deviceTab, SensorType, N
 import dayjs from 'dayjs'
 import { formatNum } from '/@/utils/ventutil'
 import { getActions } from '/@/qiankun/state';
+import { useGo } from '/@/hooks/web/usePage';
+import { useGlobSetting } from '/@/hooks/setting';
 
+const glob = useGlobSetting();
 
 const emit = defineEmits(['changePageType'])
 const props = defineProps({
@@ -263,7 +269,7 @@ const props = defineProps({
     default: () => {}
   }
 })
-
+const go = useGo()
 let count = 0;
 const actions = getActions();
 const pageData = reactive({
@@ -320,12 +326,13 @@ const activePath = ref(1)
 let solveTimes: [string, string][] = []
 const scrollBoardRef = ref()
 
-function toHome() {
+function toHome(type: string) {
   show.value = false
-   emit('changePageType', 'model3D')
-  // setTimeout(() => {
-  //   emit('changePageType', 'model3D')
-  // }, 2000)
+  if(type == 'home'){
+    go(glob.homePath)
+  }else{
+    go(`/micro-vent-3dModal/dashboard/analysis?type=model3D`)
+  }
 }
 
 function changeActive(index){
@@ -573,6 +580,9 @@ onUnmounted(() => {
                 display: flex;
                 justify-content: center;
                 padding-top: 18px;
+                font-size: 14px;
+                font-weight: 600px;
+                
 
                 &::before {
                   content: '';
@@ -771,35 +781,43 @@ onUnmounted(() => {
     }
   }
 
-  
-
   .bottom-box {
     width: 100%;
-    height: calc(40%);
+    height: 280px;
     display: flex;
     justify-content: space-between;
     margin-top: 0px;
     position: relative;
     top: 30px;
+    bottom: 10px;
     pointer-events: auto;
-    overflow-y: hidden;
-    .to-small {
-      width: 60px;
-      height: 60px;
-      background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
-      background-size: auto;
+    .icon-group{
       position: absolute;
-      top: -95px;
-      right: 400px;
-      border-radius: 10px;
-      padding: 8px;
-      backdrop-filter: blur(10px);
-      background-color: rgba(45, 86, 137, 0.418);
-
-      &:hover {
-        background-color: rgba(79, 104, 134, 0.418);
+      top: -65px;
+      right: 380px;
+      display: flex;
+      .to-small {
+        width: 60px;
+        height: 60px;
+        background: url('/@/assets/images/vent/home/tohome.png') no-repeat center;
+        background-size: auto;
+        border-radius: 10px;
+        &:hover {
+          background-color: rgba(79, 104, 134, 0.418);
+        }
+      }
+      .to-model {
+        width: 60px;
+        height: 60px;
+        background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
+        background-size: auto;
+        border-radius: 10px;
+        &:hover {
+          background-color: rgba(79, 104, 134, 0.418);
+        }
       }
     }
+    
     .bottom-lr-box {
       flex: 1;
       display: flex;

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

@@ -1,25 +1,24 @@
 <template>
   <div class="scene-box">
-    <template v-if="isShow && routerParam !== 'timesolution' && routerParam !== 'home' && routerParam !== 'model3D'">
+    <template v-if="isShow && routerParam !== 'timesolution' && routerParam !== 'home' && routerParam !== 'model3D' && routerParam !== 'none'">
       <!-- <Emergency ref="NetworkRef" v-if="deviceKind === 'emergency'" :pageResult="pageResult" @changePageType="changePageType" />
       <DeviceVue ref="DeviceRef" v-else :pageData="pageData" /> -->
       <DeviceVue ref="DeviceRef" :pageData="pageData" />
     </template>
     <Network ref="NetworkRef" v-if="routerParam === 'timesolution'" :pageResult="pageResult" @changePageType="changePageType" />
-    <VentModal style="width: 100%; height: 100%; position: absolute" />
   </div>
+  <VentModal style="width: 100%; height: 100%; position: absolute" />
 </template>
 
-<script setup lang="ts">
-  import { ref, onMounted, watch, onUnmounted } from 'vue';
+<script setup lang="ts" name="device-monitor">
+  import { ref, onMounted, watch, onUnmounted, onBeforeUnmount } from 'vue';
   import DeviceVue from './components/device/index.vue';
   import Network from './components/network/index.vue';
   import Emergency from './components/emergency/index.vue';
+  import { unmountMicroApps } from '/@/qiankun';
   import { getActions } from '/@/qiankun/state';
   import { useRoute } from 'vue-router';
-  import { onBeforeUnmount } from 'vue';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { unmountMicroApps } from '/@/qiankun';
 
   const route = useRoute();
   const actions = getActions();
@@ -32,50 +31,53 @@
   const pageData = ref({});
   const pageResult = ref({});
 
-  // actions.setGlobalState({ url: { path: '/micro-vent-3dModal/dashboard/analysis', query: { type, deviceType } } });
-
   const changePageType = (pageType) => {
-    console.log('页面类型', pageType);
     routerParam.value = pageType;
-    actions.setGlobalState({ pageObj: { pageType: pageType } });
+    // actions.setGlobalState({ pageObj: { pageType: pageType } });
   };
 
   watch(
     () => route.fullPath,
-    (fullPath) => {
-      debugger;
-      // const { type, deviceType } = routeVal.query
-      // if (type === 'tunMonitor') {
-      //   pageData.value = { pageType: deviceType }
-      //   actions.setGlobalState({ pageObj: { pageType: deviceType } });
-      // }
-      console.log('fullPath------------------->', fullPath);
+    () => {
+      const { type, deviceType, deviceid } = route.query;
+      if (type === 'tunMonitor') {
+        pageResult.value = {};
+        setTimeout(
+          () => {
+            routerParam.value = 'tunMonitor';
+            pageData.value = { deviceType: deviceType, deviceid };
+          },
+          routerParam.value == 'home' ? 2000 : 0
+        );
+      } else if (type === 'timesolution') {
+        routerParam.value = 'timesolution';
+        pageData.value = {};
+      } else if (!type) {
+        routerParam.value = 'home';
+        pageData.value = {};
+      } else {
+        setTimeout(() => {
+          routerParam.value = 'none';
+          pageData.value = {};
+        }, 3000);
+      }
     }
   );
 
   onMounted(() => {
-    debugger;
     const { type, deviceType, topage } = route.query;
     deviceKind.value = deviceType as string;
     if (!topage) {
       isShow.value = true;
-      if (type === 'network') {
-        routerParam.value = 'network';
-        actions.setGlobalState({ pageObj: { pageType: 'network' } });
+      if (type === 'timesolution') {
+        routerParam.value = 'timesolution';
       } else if (type === 'tunMonitor') {
         routerParam.value = 'tunMonitor';
         if (deviceType) {
           pageData.value = { pageType: deviceType };
-          actions.setGlobalState({ pageObj: { pageType: deviceType } });
-        } //  else if (type === 'emergency') {
-        //   if (deviceType) {
-        //     pageData.value = { pageType: deviceType };
-        //     actions.setGlobalState({ pageObj: { pageType: 'emergency' } });
-        //   }
-        // }
+        }
       } else {
         routerParam.value = 'home';
-        actions.setGlobalState({ pageObj: { pageType: 'home' } });
       }
     } else {
       isShow.value = false;
@@ -85,26 +87,19 @@
         if (key === 'pageObj') {
           const pageObj = newState[key];
           if (pageObj && pageObj.pageType) {
-            routerParam.value = pageObj.pageType;
-            pageData.value = pageObj;
-            console.log('页面参数类型----------->', pageData.value, routerParam.value, pageObj);
             if (pageObj.timesolution) {
               pageResult.value = pageObj.timesolution;
             }
-            if (pageObj.pageType != 'netcal') {
-              isShow.value = true;
-            }
+            // if (pageObj.pageType != 'netcal') {
+            //   isShow.value = true;
+            // }
           }
         }
       }
     });
   });
-
-  onBeforeUnmount(async () => {
-    //
-  });
-  onUnmounted(() => {
-    // unmountMicroApps(['/micro-vent-3dModal']);
+  onBeforeUnmount(() => {
+    unmountMicroApps(['/micro-vent-3dModal']);
   });
 </script>
 

src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHome.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="monitor-container">
     <div id="FlowSensor" class="FlowSensor-box" style="position: absolute; display: none">
-      <div class="elementContent"
-        v-if="selectData['deviceType'].startsWith('pump_under') || selectData['deviceType'] == 'pump_n12m2pq'">
+      <div class="elementContent" v-if="selectData['deviceType'].startsWith('pump_under') || selectData['deviceType'] == 'pump_n12m2pq'">
         <fourBorderBg>
           <template v-for="(item, index) in modelMonitor" :key="index">
             <div class="gas-monitor-row">
@@ -33,18 +32,20 @@
                     <template v-if="item.type !== 'sign' && item.type !== 'warning'">
                       <div class="value">{{
                         selectData && selectData[item.code.replace('Starter', `Starter${key + 4}`)]
-                        ? formatNum(selectData[item.code.replace('Starter', `Starter${key + 4}`)], 1)
-                        : '-'
-                        }}</div>
+                          ? formatNum(selectData[item.code.replace('Starter', `Starter${key + 4}`)], 1)
+                          : '-'
+                      }}</div>
                     </template>
                     <template v-else>
                       <div class="value">
-                        <span :class="{
+                        <span
+                          :class="{
                             'signal-round': true,
                             'signal-round-run': item.type === 'sign' && selectData[item.code.replace('Starter', `Starter${key + 4}`)] == '1',
                             'signal-round-gry': selectData[item.code.replace('Starter', `Starter${key + 4}`)] == '0',
                             'signal-round-warning': item.type === 'warning' && selectData[item.code.replace('Starter', `Starter${key + 4}`)] == '1',
-                          }"></span>
+                          }"
+                        ></span>
                       </div>
                     </template>
                   </div>
@@ -67,17 +68,19 @@
                     <template v-if="item.type !== 'sign'">
                       <div class="value">{{
                         selectData && selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)]
-                        ? formatNum(selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)], 1)
-                        : '-'
-                        }}</div>
+                          ? formatNum(selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)], 1)
+                          : '-'
+                      }}</div>
                     </template>
                     <template v-else>
                       <div class="value">
-                        <span :class="{
+                        <span
+                          :class="{
                             'signal-round': true,
                             'signal-round-run': selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)],
                             'signal-round-gry': selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)] == '0',
-                          }"></span>
+                          }"
+                        ></span>
                       </div>
                     </template>
                   </div>
@@ -100,17 +103,19 @@
                     <template v-if="item.type !== 'sign'">
                       <div class="value">{{
                         selectData && selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)]
-                        ? formatNum(selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)], 1)
-                        : '-'
-                        }}</div>
+                          ? formatNum(selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)], 1)
+                          : '-'
+                      }}</div>
                     </template>
                     <template v-else>
                       <div class="value">
-                        <span :class="{
+                        <span
+                          :class="{
                             'signal-round': true,
                             'signal-round-run': selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)],
                             'signal-round-gry': selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)] == '0',
-                          }"></span>
+                          }"
+                        ></span>
                       </div>
                     </template>
                   </div>
@@ -134,8 +139,7 @@
                 <a-button class="btn-item" type="default" disabled @click="handlerFn('change')">一键切换</a-button>
               </div>
               <div class="btn-group">
-                <a-button style="width: calc(100% - 16px); padding: 0 8px" type="primary"
-                  @click="openModal">瓦斯泵控制</a-button>
+                <a-button style="width: calc(100% - 16px); padding: 0 8px" type="primary" @click="openModal">瓦斯泵控制</a-button>
               </div>
               <div>
                 <div class="control-item">
@@ -171,12 +175,15 @@
                   <div class="state" v-for="(state, i) in valveWarningState" :key="i">
                     <span v-if="state.code == '_CtrlMode'">{{
                       selectData[`CentrifugalPump${key}_${valveType.code}${state.code}`] == '1' ? '控制' : '-'
-                      }}</span>
-                    <span v-else :class="{
+                    }}</span>
+                    <span
+                      v-else
+                      :class="{
                         'signal-round': true,
                         'signal-round-run': selectData[`CentrifugalPump${key}_${valveType.code}${state.code}`] == '1',
                         'signal-round-gry': selectData[`CentrifugalPump${key}_${valveType.code}${state.code}`] == '0',
-                      }"></span>
+                      }"
+                    ></span>
                   </div>
                 </div>
               </div>
@@ -191,8 +198,13 @@
     <div ref="playerRef" class="player-box"></div>
   </div>
   <DetailModal @register="register" :device-type="deviceType" :device-id="deviceId" />
-  <PasswordModal :modal-is-show="passwordModalIsShow" modal-title="密码检验" :modal-type="handlerType" @handle-ok="handleOK"
-    @handle-cancel="handleCancel" />
+  <PasswordModal
+    :modal-is-show="passwordModalIsShow"
+    modal-title="密码检验"
+    :modal-type="handlerType"
+    @handle-ok="handleOK"
+    @handle-cancel="handleCancel"
+  />
 </template>
 
 <script setup lang="ts">
@@ -372,7 +384,7 @@
       nextTick(async () => {
         if (props.deviceType == 'pump_over') {
           setModelType('gasPump');
-        } else if (props.deviceType?.startsWith('pump_under')|| props.deviceType == 'pump_n12m2pq') {
+        } else if (props.deviceType?.startsWith('pump_under') || props.deviceType == 'pump_n12m2pq') {
           setModelType('gasPumpUnder');
         }
       });

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

@@ -1,12 +1,6 @@
 <template>
   <div class="alarm-history">
-    <AlarmHistoryTable
-      columns-type="alarm"
-      device-type="pressurefan"
-      :device-list-api="getTableList.bind(null, { devicekind: 'pressurefan' })"
-      designScope="alarm-history"
-      :scroll="{ y: 650 }"
-    />
+    <AlarmHistoryTable columns-type="alarm" device-type="forcFan" designScope="alarm-history" :scroll="{ y: 650 }" />
   </div>
 </template>
 <script setup lang="ts">

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

@@ -17,7 +17,24 @@
               :is-show-select="false"
               title="设备监测"
               :scroll="{ y: 650 }"
-            />
+            >
+              <template #filterCell="{ column, record }">
+                <template v-if="deviceType.startsWith('safetymonitor')">
+                  <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
+                  <div v-if="!record.V && column.dataIndex === 'V'">-</div>
+                  <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
+                  <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
+                  <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
+                  <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
+                </template>
+                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
+                  {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+                >
+                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                  record.netStatus == '0' ? '断开' : '连接'
+                }}</a-tag>
+              </template>
+            </MonitorTable>
           </template>
           <template v-else>
             <MonitorTable

src/views/vent/performance/comment/HistorySp.vue

@@ -1,213 +1,243 @@
 <template>
-    <div class="HistorySp">
-        <div class="btn-box" v-if="isShow">
-            <a-button type="primary" style="margin-right:10px" @click="getPass">通过</a-button>
-            <a-button type="plain" @click="getReject">驳回</a-button>
-        </div>
-        <div class="top-box">
-            <div class="box-title">流程审批进度历史</div>
-            <div class="box-content">
-                <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 730 }"
-                    :pagination="pagination"></a-table>
-            </div>
-        </div>
-        <div class="bottom-box">
-            <div class="box-title">实时流程图</div>
-            <div class="box-content">
-                <img :src="imgSrcs" alt="" @error="showerrimg">
-            </div>
-        </div>
-        <!-- 审批通过弹窗 -->
-        <a-modal v-model:visible="visibleTg" centered :width="600" title="审批通过" @ok="handleTgOk"
-            @cancel="handleTgCancel">
-            <a-textarea v-model:value="passDes" placeholder="请输入通过原因..." :rows="4"
-                style="width:96%;margin:10px;background-color: transparent;color: #fff;" />
-        </a-modal>
-        <!-- 审批驳回弹窗 -->
-        <a-modal v-model:visible="visibleBh" centered :width="600" title="审批驳回" @ok="handleBhOk"
-            @cancel="handleBhCancel">
-            <a-textarea v-model:value="rejectDes" placeholder="请输入驳回原因..." :rows="4"
-                style="width:96%;margin:10px;background-color: transparent;color: #fff;" />
-        </a-modal>
+  <div class="HistorySp">
+    <div class="btn-box" v-if="isShow">
+      <a-button type="primary" style="margin-right: 10px" @click="getPass">通过</a-button>
+      <a-button type="plain" @click="getReject">驳回</a-button>
     </div>
+    <div class="top-box">
+      <div class="box-title">流程审批进度历史</div>
+      <div class="box-content">
+        <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 730 }" :pagination="pagination" />
+      </div>
+    </div>
+    <div class="bottom-box">
+      <div class="box-title">实时流程图</div>
+      <div class="box-content">
+        <img :src="imgSrcs" alt="" @error="showerrimg" />
+      </div>
+    </div>
+    <!-- 审批通过弹窗 -->
+    <a-modal v-model:visible="visibleTg" centered :width="600" title="审批通过" @ok="handleTgOk" @cancel="handleTgCancel">
+      <a-textarea
+        v-model:value="passDes"
+        placeholder="请输入通过原因..."
+        :rows="4"
+        style="width: 96%; margin: 10px; background-color: transparent; color: #fff"
+      />
+    </a-modal>
+    <!-- 审批驳回弹窗 -->
+    <a-modal v-model:visible="visibleBh" centered :width="600" title="审批驳回" @ok="handleBhOk" @cancel="handleBhCancel">
+      <a-textarea
+        v-model:value="rejectDes"
+        placeholder="请输入驳回原因..."
+        :rows="4"
+        style="width: 96%; margin: 10px; background-color: transparent; color: #fff"
+      />
+    </a-modal>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, defineProps, watch } from 'vue'
-import { columns } from './comment.data'
-import { pass, back } from './comment.api'
-import { message } from 'ant-design-vue';
-import errorImg from '../../../../assets/images/errorImg.png'
-let props = defineProps({
+  import { ref, reactive, defineProps, watch } from 'vue';
+  import { columns } from './comment.data';
+  import { pass, back } from './comment.api';
+  import { message } from 'ant-design-vue';
+  import errorImg from '../../../../assets/images/errorImg.png';
+  let props = defineProps({
     historySpList: {
-        type: Array,
-        default: () => {
-            return []
-        }
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
     imgSrc: {
-        type: String,
-        default: ''
+      type: String,
+      default: '',
     },
     isShow: {
-        type: Boolean,
-        default: true,
+      type: Boolean,
+      default: true,
     },
     spInfo: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    }
-})
-//数据列表
-let dataSource = ref<any[]>([])
-//分页参数配置
-let pagination = reactive({
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  });
+  //数据列表
+  let dataSource = ref<any[]>([]);
+  //分页参数配置
+  let pagination = reactive({
     current: 1, // 当前页码
     pageSize: 10, // 每页显示条数
     total: 0, // 总条目数，后端返回
     // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
     showSizeChanger: true, // 是否可改变每页显示条数
-    pageSizeOptions: ['10', '20', '50',], // 可选的每页显示条数
-})
+    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
+  });
 
-//审批通过驳回参数信息
-let spInfos = reactive({
+  //审批通过驳回参数信息
+  let spInfos = reactive({
     id: '',
     priority: '',
     procInstId: '',
-})
-//审批通过
-let visibleTg = ref(false)
-let passDes = ref('')
-//审批驳回
-let visibleBh = ref(false)
-let rejectDes = ref('')
+  });
+  //审批通过
+  let visibleTg = ref(false);
+  let passDes = ref('');
+  //审批驳回
+  let visibleBh = ref(false);
+  let rejectDes = ref('');
 
-let imgSrcs = ref('')
+  let imgSrcs = ref('');
 
+  let emit = defineEmits(['spClose']);
 
-let emit = defineEmits(['spClose',])
-
-function showerrimg() {
+  function showerrimg() {
     imgSrcs.value = errorImg;
-}
-
-//审批通过
-function getPass() {
-    visibleTg.value = true
-}
-//审批通过-确认
-async function handleTgOk() {
-    let res = await pass({ comment: passDes.value, id: spInfos.id, priority: spInfos.priority, procInstId: spInfos.procInstId, sendEmail: false, sendMessage: true, sendSms: false })
-    visibleTg.value = false
-    emit('spClose')
+  }
+
+  //审批通过
+  function getPass() {
+    visibleTg.value = true;
+  }
+  //审批通过-确认
+  async function handleTgOk() {
+    let res = await pass({
+      comment: passDes.value,
+      id: spInfos.id,
+      priority: spInfos.priority,
+      procInstId: spInfos.procInstId,
+      sendEmail: false,
+      sendMessage: true,
+      sendSms: false,
+    });
+    visibleTg.value = false;
+    emit('spClose');
     message.warning(res.message || res);
-}
-//审批通过-取消
-function handleTgCancel() {
-    passDes.value = ''
-    visibleTg.value = false
-}
-//审批驳回
-function getReject() {
-    visibleBh.value = true
-}
-//确定驳回
-async function handleBhOk() {
-    let res = await back({ comment: rejectDes.value, id: spInfos.id, procInstId: spInfos.procInstId, sendEmail: false, sendMessage: true, sendSms: false })
-    visibleBh.value = false
-    emit('spClose')
+  }
+  //审批通过-取消
+  function handleTgCancel() {
+    passDes.value = '';
+    visibleTg.value = false;
+  }
+  //审批驳回
+  function getReject() {
+    visibleBh.value = true;
+  }
+  //确定驳回
+  async function handleBhOk() {
+    let res = await back({
+      comment: rejectDes.value,
+      id: spInfos.id,
+      procInstId: spInfos.procInstId,
+      sendEmail: false,
+      sendMessage: true,
+      sendSms: false,
+    });
+    visibleBh.value = false;
+    emit('spClose');
     message.warning(res.message || res);
-}
-//取消驳回
-function handleBhCancel() {
-    rejectDes.value = ''
-    visibleBh.value = false
-}
-watch(() => props.historySpList, (newV, oldV) => {
-    if (newV.length != 0) {
-        dataSource.value = newV
+  }
+  //取消驳回
+  function handleBhCancel() {
+    rejectDes.value = '';
+    visibleBh.value = false;
+  }
+  watch(
+    () => props.historySpList,
+    (newV, oldV) => {
+      if (newV.length != 0) {
+        dataSource.value = newV;
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
     }
-}, {
-    immediate: true,
-    deep: true
-})
-watch(() => props.spInfo, (newV, oldV) => {
-    spInfos.id = newV.id
-    spInfos.priority = newV.priority
-    spInfos.procInstId = newV.procInstId
-}, { deep: true })
-
-watch(() => props.imgSrc, (newV, oldV) => {
-    imgSrcs.value = newV
-}, { immediate: true, deep: true })
+  );
+  watch(
+    () => props.spInfo,
+    (newV, oldV) => {
+      spInfos.id = newV.id;
+      spInfos.priority = newV.priority;
+      spInfos.procInstId = newV.procInstId;
+    },
+    { deep: true }
+  );
 
+  watch(
+    () => props.imgSrc,
+    (newV, oldV) => {
+      imgSrcs.value = newV;
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-.HistorySp {
+  .HistorySp {
     position: relative;
     width: 100%;
     height: 100%;
 
     .btn-box {
-        width: 98%;
-        padding: 15px 11px 0px 11px;
-        box-sizing: border-box;
+      width: 98%;
+      padding: 15px 11px 0px 11px;
+      box-sizing: border-box;
     }
 
     .top-box {
-        width: 98%;
-        height: 400px;
-        margin: 15px auto;
-        box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
-        border-radius: 2px;
-        border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
-        padding: 10px;
-        box-sizing: border-box;
-
-        .box-content {
-            height: calc(100% - 30px);
-        }
+      width: 98%;
+      height: 400px;
+      margin: 15px auto;
+      box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
+      border-radius: 2px;
+      border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
+      padding: 10px;
+      box-sizing: border-box;
+
+      .box-content {
+        height: calc(100% - 30px);
+      }
     }
 
     .bottom-box {
-        width: 98%;
-        height: 200px;
-        margin: 15px auto;
-        box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
-        border-radius: 2px;
-        border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
-        padding: 10px;
-        box-sizing: border-box;
-
-        .box-content {
-            position: relative;
-            height: calc(100% - 30px);
-
-            img {
-                width: 408px;
-                height: 95px;
-                position: absolute;
-                left: 50%;
-                top: 26px;
-                transform: translate(-56%, 0);
-            }
+      width: 98%;
+      height: 200px;
+      margin: 15px auto;
+      box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
+      border-radius: 2px;
+      border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
+      padding: 10px;
+      box-sizing: border-box;
+
+      .box-content {
+        position: relative;
+        height: calc(100% - 30px);
+
+        img {
+          width: 408px;
+          height: 95px;
+          position: absolute;
+          left: 50%;
+          top: 26px;
+          transform: translate(-56%, 0);
         }
+      }
     }
 
     .box-title {
-        font-size: 14px;
-        height: 30px;
-        line-height: 30px;
-        color: #fff;
+      font-size: 14px;
+      height: 30px;
+      line-height: 30px;
+      color: #fff;
     }
-}
+  }
 
-.zxm-modal .zxm-modal-body {
+  .zxm-modal .zxm-modal-body {
     padding: 15px !important;
-    box-sizing: border-box
-}
-</style>
+    box-sizing: border-box;
+  }
+</style>