神东5.5

.env.development

@@ -6,6 +6,7 @@ VITE_PUBLIC_PATH = /
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
 #VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
+# VITE_PROXY = [["/jeecgsystem","http://10.10.150.72:9999"],["/upload","http://localhost:3300/upload"]]
 VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://localhost:3300/upload"]]
 #VITE_PROXY = [["/jeecgsystem","http://192.168.1.8:9999"],["/upload","http://localhost:3300/upload"]]
 
@@ -18,6 +19,7 @@ VITE_GLOB_API_URL=/jeecgsystem
 
 
 #后台接口全路径地址(必填)
+# VITE_GLOB_DOMAIN_URL=http://10.10.150.72:9999
 VITE_GLOB_DOMAIN_URL=http://182.92.126.35:9999
 #VITE_GLOB_DOMAIN_URL=http://192.168.1.8:9999
 

src/assets/icons/internet-bad.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.669" height="18.669" viewBox="0 0 18.669 18.669">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#36c7ff"/>
+      <stop offset="1" stop-color="#c2eeff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14251" data-name="组 14251" transform="translate(-0.025 0.443)">
+    <g id="组_14269" data-name="组 14269" transform="translate(-3.195 -0.664)">
+      <path id="椭圆_2488" data-name="椭圆 2488" d="M8.835-.5A9.335,9.335,0,1,1-.5,8.835,9.345,9.345,0,0,1,8.835-.5Zm0,17.669A8.335,8.335,0,1,0,.5,8.835,8.344,8.344,0,0,0,8.835,17.169Z" transform="translate(3.721 0.72)" fill="url(#linear-gradient)"/>
+      <path id="路径_55148" data-name="路径 55148" d="M4.164,6.387,2.106,8.447a1.489,1.489,0,0,1-2.1,0l-.023-.023a1.489,1.489,0,0,1,0-2.1L2.043,4.266a1.489,1.489,0,0,1,2.1,0l.023.023a1.487,1.487,0,0,1,0,2.1ZM8.746,1.8,6.688,3.864a1.489,1.489,0,0,1-2.1,0l-.023-.023a1.489,1.489,0,0,1,0-2.1L6.624-.317a1.489,1.489,0,0,1,2.1,0l.023.023a1.487,1.487,0,0,1,0,2.1ZM3.764,3.165,3.773.92,2.862.61Zm-.6.15L1.208,2.564l.451.9Zm1.8,1.362.305,2.259.6-.766Zm.3.15,1.8,1.043-.451-.9ZM3.012,2.714,2.261,1.662l-.15.752Z" transform="translate(8.191 5.491)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/yxfj.svg

@@ -0,0 +1,22 @@
+<svg id="组_14254" data-name="组 14254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.195" height="18.195" viewBox="0 0 18.195 18.195">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#36c7ff"/>
+      <stop offset="1" stop-color="#c2eeff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_12385" data-name="组 12385">
+    <g id="组_9332" data-name="组 9332">
+      <g id="图层_2" data-name="图层 2">
+        <g id="图层_1" data-name="图层 1">
+          <g id="组_12446" data-name="组 12446">
+            <g id="组_12442" data-name="组 12442">
+              <path id="路径_55231" data-name="路径 55231" d="M9.1,18.2a9.1,9.1,0,1,1,9.1-9.1,9.124,9.124,0,0,1-9.1,9.1ZM9.1.91A8.188,8.188,0,1,0,17.285,9.1,8.154,8.154,0,0,0,9.1.91Z" fill="url(#linear-gradient)"/>
+              <path id="路径_55232" data-name="路径 55232" d="M334.929,244.545s-7.506-4.208-7.619-4.208c-.682-.227-.91.341-.91.8h0s0,8.3.114,8.3c.227.569.8.569,1.251.341h0s6.937-3.98,7.051-4.094c.341-.227.682-.682.114-1.137Z" transform="translate(-320.6 -236.016)" fill="url(#linear-gradient)"/>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/images/home-container/internet-bad.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.669" height="18.669" viewBox="0 0 18.669 18.669">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#36c7ff"/>
+      <stop offset="1" stop-color="#c2eeff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14251" data-name="组 14251" transform="translate(-0.025 0.443)">
+    <g id="组_14269" data-name="组 14269" transform="translate(-3.195 -0.664)">
+      <path id="椭圆_2488" data-name="椭圆 2488" d="M8.835-.5A9.335,9.335,0,1,1-.5,8.835,9.345,9.345,0,0,1,8.835-.5Zm0,17.669A8.335,8.335,0,1,0,.5,8.835,8.344,8.344,0,0,0,8.835,17.169Z" transform="translate(3.721 0.72)" fill="url(#linear-gradient)"/>
+      <path id="路径_55148" data-name="路径 55148" d="M4.164,6.387,2.106,8.447a1.489,1.489,0,0,1-2.1,0l-.023-.023a1.489,1.489,0,0,1,0-2.1L2.043,4.266a1.489,1.489,0,0,1,2.1,0l.023.023a1.487,1.487,0,0,1,0,2.1ZM8.746,1.8,6.688,3.864a1.489,1.489,0,0,1-2.1,0l-.023-.023a1.489,1.489,0,0,1,0-2.1L6.624-.317a1.489,1.489,0,0,1,2.1,0l.023.023a1.487,1.487,0,0,1,0,2.1ZM3.764,3.165,3.773.92,2.862.61Zm-.6.15L1.208,2.564l.451.9Zm1.8,1.362.305,2.259.6-.766Zm.3.15,1.8,1.043-.451-.9ZM3.012,2.714,2.261,1.662l-.15.752Z" transform="translate(8.191 5.491)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

src/assets/images/home-container/运行风机图标.svg

@@ -0,0 +1,22 @@
+<svg id="组_14254" data-name="组 14254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.195" height="18.195" viewBox="0 0 18.195 18.195">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#36c7ff"/>
+      <stop offset="1" stop-color="#c2eeff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_12385" data-name="组 12385">
+    <g id="组_9332" data-name="组 9332">
+      <g id="图层_2" data-name="图层 2">
+        <g id="图层_1" data-name="图层 1">
+          <g id="组_12446" data-name="组 12446">
+            <g id="组_12442" data-name="组 12442">
+              <path id="路径_55231" data-name="路径 55231" d="M9.1,18.2a9.1,9.1,0,1,1,9.1-9.1,9.124,9.124,0,0,1-9.1,9.1ZM9.1.91A8.188,8.188,0,1,0,17.285,9.1,8.154,8.154,0,0,0,9.1.91Z" fill="url(#linear-gradient)"/>
+              <path id="路径_55232" data-name="路径 55232" d="M334.929,244.545s-7.506-4.208-7.619-4.208c-.682-.227-.91.341-.91.8h0s0,8.3.114,8.3c.227.569.8.569,1.251.341h0s6.937-3.98,7.051-4.094c.341-.227.682-.682.114-1.137Z" transform="translate(-320.6 -236.016)" fill="url(#linear-gradient)"/>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/design/vent/comment.less

@@ -176,7 +176,8 @@
   position: relative;
   width: 314px;
   height: 208px;
-  background: url('/@/assets/images/vent/camera_bg.png');
+  // background: url('/@/assets/images/vent/camera_bg.png');lxh
+  background: url('/@/assets/images/vent/camera-new.png');//lxh
   background-size: cover;
   padding: 10px;
   .rtspVideo{
@@ -205,7 +206,8 @@
     width: 314px;
     height: 208px;
     padding: 10px;
-    background: url('/@/assets/images/vent/camera_bg.png');
+    // background: url('/@/assets/images/vent/camera_bg.png');lxh
+     background: url('/@/assets/images/vent/camera-new.png');//lxh
     background-size: cover;
   }
 }

src/design/vent/index.less

@@ -4,19 +4,21 @@
 @import './comment.less';
 
 .vent {
-  background-color: #09172c !important;
+  // background-color: #09172c !important;
+  background: url('/@/assets/images/home-container/home-bg.png') no-repeat !important; //lxh
+  background-size: 100% 100% !important; //lxh
 }
 
 
 /* 按钮 */
 .@{ventSpace}-btn-primary {
-  border-color: #56b3c96b !important;
-  background: #1c638a !important;
-  &:hover,
-  &:focus {
-    background: #1c638a99 !important;
-    border-color: #56b3c96b !important;
-  }
+  // border-color: #56b3c96b !important;lxh
+  // background: #1c638a !important;lxh
+  // &:hover,
+  // &:focus {
+  //   background: #1c638a99 !important;lxh
+  //   border-color: #56b3c96b !important;lxh
+  // }
 }
 .@{ventSpace}-btn-dangerous{
   color: #fff !important;

src/design/vent/modal.less

@@ -150,6 +150,8 @@
     height: 100%;
     position: absolute;
     overflow: hidden;
+    background: url('/@/assets/images/home-container/home-bg.png') no-repeat;//lxh
+  background-size: 100% 100%;//lxh
     // pointer-events: none !important;
     .device-card {
       width: 329px;
@@ -206,7 +208,8 @@
   flex-direction: column;
   justify-items: center;
   overflow: hidden;
-
+  // background: url('/@/assets/images/home-container/home-bg.png') no-repeat;//lxh
+  // background-size: 100% 100%;//lxh
   .top-box {
     position: absolute;
     top: 50px;
@@ -265,8 +268,9 @@
         margin: 0 10px;
       }
       .control-title {
-        color: #73e8fe;
+        // color: #73e8fe;  lxh
         // color: rgb(0, 255, 242);// 64D5FF
+        color: #fff;
       }
     }
     :deep(.button-box) {
@@ -286,9 +290,9 @@
       color: #fff;
       padding: 0 15px 5px 15px;
       cursor: pointer;
-      &:hover {
-        background: linear-gradient(#2cd1ff55, #1eb0ff55);
-      }
+      // &:hover {  lxh
+      //   background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      // }
       &::before {
         width: calc(100% - 6px);
         height: 27px;
@@ -300,7 +304,7 @@
         bottom: 0;
         z-index: -1;
         border-radius: inherit; /*important*/
-        background: linear-gradient(#1fa6cb, #127cb5);
+        // background: linear-gradient(#1fa6cb, #127cb5);  lxh
       }
       &::after {
         width: calc(100% + 32px);
@@ -336,7 +340,8 @@
     text-align: center;
     line-height: 32px;
     position: relative;
-    top: 47px;
+    // top: 47px; lxh
+    top: 64px;
   }
   .title-box {
     font-family: Geneva, sans-serif;
@@ -461,9 +466,10 @@
       pointer-events: auto;
       // background: #02263aaa;
       // background: linear-gradient(#00daff33, #2081ff11);
-      background: linear-gradient(#0091aa33, #2081ff11);
+      // background: linear-gradient(#0091aa33, #2081ff11);//lxh
+      background: linear-gradient(to bottom,rgba(0, 74, 172,.4),rgba(0, 74, 172,.6));
       // background: radial-gradient(circle at 50% 80%, #3df6ff33, #0038b433);
-      backdrop-filter: blur(18px);
+      // backdrop-filter: blur(18px);//lxh
       overflow-y: hidden;
       border-radius: 8px;
       .tabs-box {
@@ -496,16 +502,19 @@
         }
       }
       .@{ventSpace}-tabs-nav {
-        margin-bottom: 0px !important;
+        // margin-bottom: 0px !important; //lxh
+        margin: 10px 0px !important;
       }
       .@{ventSpace}-tabs-nav-wrap {
         padding-left: 10px !important;
+        background: rgba(1, 59, 156,.6);//lxh
       }
       .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
         color: #28f3f3 !important;
       }
       .@{ventSpace}-tabs-ink-bar {
         background: #28f3f3;
+        height: 3px;//lxh
       }
       .@{ventSpace}-tabs-top > .@{ventSpace}-tabs-nav::before {
         border-color: #f0f0f022 !important;
@@ -583,14 +592,16 @@
 
 :deep(.@{ventSpace}-table-thead) {
   // background: linear-gradient(#003f77 0%, #004a86aa 10%); //#003f77, #0a134c
-  background-color: #3d9dd433 !important;
+  // background-color: #3d9dd433 !important;//lxh
+  background-color: transparent !important;
   & > tr > th,
   .@{ventSpace}-table-column-title {
     // color: #70f9fc !important;
     color: #84f2ff !important;
-    border-color: #91e9fe55 !important;
+    // border-color: #91e9fe55 !important;//lxh
+    border-color: #33d3e7 !important;//lxh
     border-left: none !important;
-    // border-right: none !important;
+    border-right: none !important;//lxh
     &:last-child {
       border-right: none !important;
     }

src/layouts/default/header/index.less

@@ -184,10 +184,10 @@
 
     // background: linear-gradient(#02050c 0%, #03114c 100%);
     // border: none;
-    background: linear-gradient(#005177, #0a344c);
-    border-bottom: 1px solid #81aabf01;
+    // background: linear-gradient(#005177, #0a344c);  lxh
+    // border-bottom: 1px solid #81aabf01;lxh
     padding-bottom: 2px;
-    box-shadow: 0 0 20px #44caff55 inset;
+    // box-shadow: 0 0 20px #44caff55 inset;lxh
 
     .@{header-prefix-cls}-logo {
       //color: @text-color-base;
@@ -260,7 +260,8 @@
 .vent-header {
   height: 120px !important;
   // background: url('/src/assets/images/vent/header-bg.png') no-repeat !important;
-  background: url('/src/assets/images/vent/vent-header2.png') no-repeat !important;
+  // background: url('/src/assets/images/vent/vent-header2.png') no-repeat !important;
+  background: url('/src/assets/images/vent/head-title.png') no-repeat !important;//lxh
   border: none !important;
   padding-bottom: 0px !important;
   box-shadow: none !important;

src/layouts/default/header/index.vue

@@ -1,11 +1,20 @@
 <template>
-  <Header v-if="!getShowFullHeader || (currentRoute.path.startsWith('/micro-vent-3dModal/modelchannel/') && !currentRoute.path.endsWith('home')) " 
-    :class="[...getHeaderClass, { 'vent-header': currentRoute.path.startsWith('/monitorChannel/monitor-'), 'normal-header': !currentRoute.path.startsWith('/monitorChannel/monitor-'), 'no-header': currentRoute.path.endsWith('home') }]">
+  <Header
+    v-if="!getShowFullHeader || (currentRoute.path.startsWith('/micro-vent-3dModal/modelchannel/') && !currentRoute.path.endsWith('home'))"
+    :class="[
+      ...getHeaderClass,
+      {
+        'vent-header': currentRoute.path.startsWith('/monitorChannel/monitor-'),
+        'normal-header': !currentRoute.path.startsWith('/monitorChannel/monitor-'),
+        'no-header': currentRoute.path.endsWith('home'),
+      },
+    ]"
+  >
     <!-- left start -->
     <div :class="`${prefixCls}-left`">
       <!-- logo -->
       <!-- <AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" /> -->
-      <AppLogo  :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" />
+      <AppLogo :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" />
       <div v-if="!currentRoute.path.startsWith('/monitorChannel/monitor-')" style="margin-top: 5px; color: #aaa; margin-left: 10px; font-weight: 600"
         >/{{ currentRoute.meta.title }}</div
       >
@@ -38,7 +47,11 @@
       </div>
     </div>
   </Header>
-  <div v-if="currentRoute.path.endsWith('home') || currentRoute.path.startsWith('micro-need-air')" :class="`${prefixCls}-action`"  style="position: fixed; top: 30px; right: 20px; z-index: 999;">
+  <div
+    v-if="currentRoute.path.endsWith('home') || currentRoute.path.startsWith('micro-need-air')"
+    :class="`${prefixCls}-action`"
+    style="position: fixed; top: 30px; right: 20px; z-index: 999"
+  >
     <div class="right-position">
       <UserDropDown :theme="getHeaderTheme" />
     </div>
@@ -268,20 +281,21 @@
   //   border-bottom: 1px solid #81aabf01;
   //   padding-bottom: 2px;
   //   box-shadow: 0 0 20px #44caff55 inset;
-  .normal-header{
+  .normal-header {
     height: 52px !important;
     line-height: 52px !important;
-    background: linear-gradient(#005177,#0a344c) !important;
-    border-bottom: 1px solid #81aabf01 !important;
+
+    // background: linear-gradient(#005177,#0a344c) !important; lxh
+    // border-bottom: 1px solid #81aabf01 !important;lxh
     padding-bottom: 2px !important;
-    box-shadow: 0 0 20px #44caff55 inset !important;
+    // box-shadow: 0 0 20px #44caff55 inset !important; lxh
     padding: 0 8px !important;
   }
-  .no-header{
+  .no-header {
     height: 0px !important;
     display: none !important;
   }
-  .header-nav-title{
+  .header-nav-title {
     background-image: linear-gradient(#ffffff 50%, #60f4ff);
     -webkit-background-clip: text;
     color: transparent;

src/views/demo/threejs/damper.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vent-home-header">
-    <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" />
+    <!-- <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" /> -->
     <div class="header-text">实时网络解算</div>
   </div>
   <div class="zl-box">
@@ -295,8 +295,10 @@
     height: 100px;
     position: fixed;
     top: 0;
-    background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
-    background-size: contain;
+    // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;lxh
+    background: url('/@/assets/images/vent/head-title.png') no-repeat; //lxh
+    // background-size: contain;lxh
+    background-size: 100% 100%;
     display: flex;
     justify-content: center;
     z-index: 99;
@@ -318,8 +320,10 @@
     overflow: hidden;
     color: #fff;
     // background: url('/@/assets/images/vent/path/bg.png') no-repeat;
-    background-position: center;
-    background-size: cover;
+    // background-position: center;lxh
+    // background-size: cover;lxh
+    background: url('../../../assets/images/home-container/home-bg.png') no-repeat;
+    background-size: 100% 100%;
     .modal-box{
       position: relative;
       width: 100%;

src/views/vent/comment/components/customHeader.vue

@@ -85,7 +85,9 @@ export default defineComponent({
       top: 0;
       // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
       // height: 100px;
-      background: url('/@/assets/images/vent/vent-header1.png') no-repeat;
+      // background: url('/@/assets/images/vent/vent-header1.png') no-repeat;lxh
+      background: url('../../../../assets/images/vent/head-title.png') no-repeat;//lxh
+
       height: 89px;
       background-size: contain;
       display: flex;
@@ -96,6 +98,8 @@ export default defineComponent({
       .header-text{
         position: fixed;
         top: 5px;
+        left: 50%;//lxh
+        transform: translate(-80%,0);//lxh
         color: #fff;
         font-size: 32px;
         font-family: 'ysbtFont';

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

@@ -0,0 +1,204 @@
+<template>
+  <div class="deviceWarn">
+    <div class="title-top" @click="getDetail">设备预警</div>
+    <div class="toggle-search">
+      <div class="status-yx">
+        <div class="now-name">
+          <i style="margin: 0px 5px 0px 5px">
+            <SvgIcon class="icon" size="14" name="internet-bad" />
+          </i>
+          <span style="color: #fff">网络断开</span>
+        </div>
+
+        <div class="now-status">25条</div>
+      </div>
+    </div>
+    <div class="warn-contents">
+      <div class="warn-box" v-for="(item, index) in warnList" :key="index">
+        <div class="warn-icon">
+          <img :src="item.icon" alt="" />
+        </div>
+        <div class="warn-text">
+          <div class="text-n">
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="warn-val">
+          <div class="val-n"> {{ item.val }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { getAssetURL } from '/@/utils/ui';
+  let searchValue = ref('');
+  const options1 = reactive<any>([
+    {
+      value: '测试',
+      label: '测试',
+    },
+    {
+      value: '测试1',
+      label: '测试1',
+    },
+    {
+      value: '测试2',
+      label: '测试2',
+      disabled: true,
+    },
+  ]);
+
+  let warnList = reactive<any[]>([
+    { name: '报警', icon: getAssetURL('home-container/warn-icon.png'), val: '5' },
+    { name: '重大风险预警', icon: getAssetURL('home-container/warn-icon.png'), val: '5' },
+    { name: '较大风险预警', icon: getAssetURL('home-container/warn-icon1.png'), val: '5' },
+    { name: '一般风险预警', icon: getAssetURL('home-container/warn-icon2.png'), val: '5' },
+    { name: '低风险预警', icon: getAssetURL('home-container/warn-icon3.png'), val: '5' },
+  ]);
+
+  //跳转详情
+   function getDetail(){
+    console.log('跳转详情')
+  }
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
+  .deviceWarn {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover{
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .status-yx {
+        height: 30px;
+        width: 180px;
+        background-color: rgba(8, 148, 255, 0.3);
+        border: 1px solid #1d80da;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .now-status {
+          margin-right: 5px;
+          padding-top: 3px;
+          font-family: 'douyuFont';
+          color: #3df6ff;
+        }
+      }
+    }
+    .warn-contents {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      height: calc(100% - 66px);
+      width: 100%;
+      padding: 20px 15px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      .warn-box {
+        position: relative;
+        width: 396px;
+        height: 16px;
+        display: flex;
+        background: url('../../../../../assets/images/home-container/warn1.png') no-repeat;
+        .warn-icon {
+          position: absolute;
+          left: 10%;
+          top: -20px;
+          width: 44px;
+          height: 35px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .warn-text {
+          width: 168px;
+          height: 2px;
+          position: absolute;
+          left: 22%;
+          top: -2px;
+          background: url('../../../../../assets/images/home-container/warn7.png') no-repeat;
+          background-size: 100% 100%;
+          .text-n {
+            position: absolute;
+            left: 50%;
+            top: -10px;
+            transform: translate(-50%, 0);
+            color: #fff;
+          }
+        }
+        .warn-val {
+          position: absolute;
+          left: 66%;
+          top: -21px;
+          width: 94px;
+          height: 45px;
+          background: url('../../../../../assets/images/home-container/warn8.png') no-repeat;
+          .val-n {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            font-size: 14px;
+            font-family: 'douyuFont';
+            transform: translate(-50%, -52%);
+          }
+        }
+        &:nth-child(1) .val-n {
+          color: red;
+        }
+        &:nth-child(2) .val-n {
+          color: #f93825;
+        }
+        &:nth-child(3) .val-n {
+          color: #ff9b17;
+        }
+        &:nth-child(4) .val-n {
+          color: #ffff00;
+        }
+        &:nth-child(5) .val-n {
+          color: #31dbfd;
+        }
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

src/views/vent/home/clique/components/fan-monitor.vue

@@ -0,0 +1,364 @@
+<template>
+  <div class="fanMonitor">
+    <div class="title-top" @click="getDetail">局部通风系统</div>
+    <div class="toggle-search">
+      <i class="icon-search">
+        <SvgIcon class="icon" size="14" name="toggle" />
+      </i>
+      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="options1" aria-placeholder="请选择" @change="changeSelect" />
+      <div class="status-yx">
+        <div class="now-name">
+          <i style="margin: 0px 5px 0px 5px">
+            <SvgIcon class="icon" size="14" name="yxfj" />
+          </i>
+          <span style="color: #fff">运行风机</span>
+        </div>
+
+        <div class="now-status">主风机</div>
+      </div>
+    </div>
+    <div class="fan-contents">
+      <div class="fan" ref="fan"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, nextTick } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+  let searchValue = ref('局扇监测');
+  const options1 = reactive<any>([
+    {
+      value: '局扇监测',
+      label: '局扇监测',
+    },
+    {
+      value: '局扇监测1',
+      label: '局扇监测1',
+    },
+    {
+      value: '局扇监测2',
+      label: '局扇监测2',
+    },
+  ]);
+
+  //获取dom节点
+  let fan = ref<any>();
+  //echart图表数据
+  let echartData=reactive<any>({
+    xdata:80,
+    ydata:60
+  })
+//跳转详情
+function getDetail(){
+    console.log('跳转详情')
+  }
+  //选项切换
+  function changeSelect(val){
+    console.log(val,'val-------')
+    switch(val){
+        case '局扇监测':
+          echartData.xdata=80
+          echartData.ydata=60
+          getOption()
+          break;
+          case '局扇监测1':
+          echartData.xdata=50
+          echartData.ydata=70
+          getOption()
+          break;
+          case '局扇监测2':
+          echartData.xdata=40
+          echartData.ydata=90
+          getOption()
+          break;
+
+    }
+    
+  }
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(fan.value);
+      let option = {
+        grid: {
+          top: '20%',
+          left: '5%',
+          bottom: '10%',
+          right: '5%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['吸风量', '供风量'],
+            axisTick: {
+              alignWithLabel: true,
+            },
+            nameTextStyle: {
+              color: 'red',
+            },
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
+              },
+            },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 10,
+                fontSize: 14,
+              },
+              formatter: function (data) {
+                return data;
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            min: 0,
+            name: '(m³/min)',
+            nameTextStyle: {
+              color: '#b3b8cc',
+              fontSize: 12,
+              padding: -5,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: 'rgba(62, 103, 164,.4)',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
+              },
+            },
+           
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 0,
+                fontSize: 14,
+              },
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
+                }
+                return value;
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+           
+          },
+        ],
+        series: [
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [60, 16],
+            symbolOffset: [0, -10],
+            symbolPosition: 'end',  
+            z: 12,
+            //"barWidth": "20",
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                formatter: '{c}',
+                color:'#fff'
+              },
+            },
+            data: [
+              {
+                value: echartData.xdata,
+                itemStyle: {
+                  color: '#59cb42',
+                },
+              },
+              {
+                value: echartData.ydata,
+                itemStyle: {
+                  color: '#3cefff',
+                },
+              },
+            ],
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [60, 16],
+            symbolOffset: [0, 10],
+            // "barWidth": "20",
+            z: 12,
+            data: [
+              {
+                value: 100,
+                itemStyle: {
+                  color: '#59cb42',
+                },
+              },
+              {
+                value: 100,
+                itemStyle: {
+                  color: '#3cefff',
+                },
+              },
+            ],
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [90, 30],
+            symbolOffset: [0, 20],
+            z: 10,
+            itemStyle: {
+              normal: {
+                color: 'transparent',
+                borderColor: '#14b1eb',
+                borderType: 'dashed',
+                borderWidth: 5,
+              },
+            },
+            data: [100, 100],
+          },
+          {
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                //color: '#14b1eb',
+                opacity: 0.7,
+              },
+            },
+            //silent: true,
+            barWidth: '60',
+            //barGap: '-100%', // Make series be overlap
+            data: [
+              {
+                value: echartData.xdata,
+                itemStyle: {
+                  color: '#59cb42',
+                },
+              },
+              {
+                value: echartData.ydata,
+                itemStyle: {
+                  color: '#3cefff',
+                },
+              },
+            ],
+            markLine: {
+              symbol: 'none',
+              label: {
+                position: 'middle',
+                formatter: '{b}',
+              },
+              data: [
+                {
+                  name: '目标值',
+                  yAxis: 40, //res.targetTwo,
+                  lineStyle: {
+                    color: 'rgba(0, 119, 233,.8)',
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+  onMounted(() => {
+    getOption();
+  });
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
+  .fanMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
+   
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover{
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
+      }
+      .status-yx {
+        height: 30px;
+        width: 180px;
+        background-color: rgba(8, 148, 255, 0.3);
+        border: 1px solid #1d80da;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .now-status {
+          margin-right: 5px;
+          padding-top: 3px;
+          font-family: 'douyuFont';
+          color: #3df6ff;
+        }
+      }
+    }
+    .fan-contents {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      height: calc(100% - 66px);
+      width: 100%;
+      .fan {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

src/views/vent/home/clique/components/main-monitor.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="mainMonitor">
+    <div class="title-top" @click="getDetail">主通风系统</div>
+    <div class="toggle-search">
+      <i class="icon-search">
+        <SvgIcon class="icon" size="14" name="toggle" />
+      </i>
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="options1"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
+      <div class="status-yx">
+        <div class="now-name">
+          <i style="margin: 0px 5px 0px 5px">
+            <SvgIcon class="icon" size="14" name="yxfj" />
+          </i>
+          <span style="color: #fff">运行风机</span>
+        </div>
+
+        <div class="now-status">主风机</div>
+      </div>
+    </div>
+    <div class="main-contents">
+      <div class="main" ref="main"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, nextTick } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+  let searchValue = ref('1号回风斜井');
+  const options1 = reactive<any>([
+    {
+      value: '1号回风斜井',
+      label: '1号回风斜井',
+    },
+    {
+      value: '2号回风斜井',
+      label: '2号回风斜井',
+    },
+    {
+      value: '3号回风斜井',
+      label: '3号回风斜井',
+    },
+  ]);
+
+  //获取dom节点
+  let main = ref<any>();
+  //echart图表数据
+  let echartData = reactive<any>({
+    xdata: ['1000', '2000', '3000', '4000', '5000', '6000'],
+    ydata: [0, 20, 50, 90, 140, 200],
+    ydata1: [210, 190, 160, 120, 80, 30],
+  });
+  //跳转详情
+  function getDetail() {
+    console.log('跳转详情');
+  }
+  //选项切换
+  function changeSelect(val) {
+    switch (val) {
+      case '1号回风斜井':
+        (echartData.xdata = ['1000', '2000', '3000', '4000', '5000', '6000']),
+          (echartData.ydata = [0, 20, 50, 90, 140, 200]),
+          (echartData.ydata1 = [210, 190, 160, 120, 80, 30]),
+          getOption();
+        break;
+      case '2号回风斜井':
+        (echartData.xdata = ['1000', '2000', '3000', '4000', '5000', '6000']),
+          (echartData.ydata = [20, 40, 70, 110, 160, 220]),
+          (echartData.ydata1 = [270, 260, 240, 210, 170, 120]),
+          getOption();
+        break;
+      case '3号回风斜井':
+        (echartData.xdata = ['1000', '2000', '3000', '4000', '5000', '6000']),
+          (echartData.ydata = [40, 60, 100, 160, 240, 340]),
+          (echartData.ydata1 = [380, 360, 320, 260, 180, 80]),
+          getOption();
+        break;
+    }
+  }
+
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(main.value);
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          },
+        },
+
+        legend: {
+          align: 'left',
+          right: '4%',
+          top: '6%',
+          type: 'plain',
+          textStyle: {
+            color: '#7ec7ff',
+            fontSize: 14,
+          },
+          // icon:'rect',
+          itemGap: 25,
+          itemWidth: 18,
+          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+          data: [
+            {
+              name: '风阻',
+            },
+            {
+              name: '负压',
+            },
+            // {
+            //   name: '工作面需风'
+            // }
+          ],
+        },
+
+        grid: {
+          top: '22%',
+          left: '5%',
+          right: '16%',
+          bottom: '5%',
+          containLabel: true,
+        },
+
+        xAxis: [
+          {
+            type: 'category',
+            name: '风量\n(m³/min)',
+            nameTextStyle: {
+              color: '#b3b8cc',
+              fontSize: 12,
+              padding: -5,
+            },
+            // boundaryGap: false,
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
+              },
+            },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 0,
+                fontSize: 14,
+              },
+              formatter: function (data) {
+                return data;
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: echartData.xdata,
+          },
+        ],
+
+        yAxis: [
+          {
+            name: '负压(Pa)',
+            nameTextStyle: {
+              color: '#b3b8cc',
+              fontSize: 12,
+              padding: -5,
+            },
+            min: 0,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164,.4)',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 0,
+                fontSize: 14,
+              },
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
+                }
+                return value;
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '风阻',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: 'orange', // 线条颜色
+              },
+              borderColor: 'rgba(0,0,0,.4)',
+            },
+            itemStyle: {
+              color: 'orange',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartData.ydata,
+          },
+          {
+            name: '负压',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 6,
+
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#00ba01', // 线条颜色
+              },
+              borderColor: 'rgba(0,0,0,.4)',
+            },
+            itemStyle: {
+              color: '#00ba01',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartData.ydata1,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+  onMounted(() => {
+    getOption();
+  });
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
+  .mainMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover{
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
+      }
+      .status-yx {
+        height: 30px;
+        width: 180px;
+        background-color: rgba(8, 148, 255, 0.3);
+        border: 1px solid #1d80da;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .now-status {
+          margin-right: 5px;
+          padding-top: 3px;
+          font-family: 'douyuFont';
+          color: #3df6ff;
+        }
+      }
+    }
+    .main-contents {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      height: calc(100% - 66px);
+      width: 100%;
+      .main {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

src/views/vent/home/clique/components/wind-device.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="windDevice">
+    <div class="title-top" @click="getDetail">通风设施远程控制</div>
+    <div class="toggle-search">
+      <i class="icon-search">
+        <SvgIcon class="icon" size="14" name="toggle" />
+      </i>
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="options1"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
+    </div>
+    <!-- <img class="contents" :src="imgSrc" alt="" /> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  // import { getAssetURL } from '/@/utils/ui';
+  let searchValue = ref('风门');
+  const options1 = reactive<any>([
+    {
+      value: '风门',
+      label: '风门',
+    },
+    {
+      value: '风窗',
+      label: '风窗',
+    },
+  ]);
+  //跳转详情
+  function getDetail() {
+    console.log('跳转详情');
+  }
+  // let imgSrc = ref(getAssetURL('home-container/wind-door.gif'));
+  //选项切换
+  function changeSelect(val) {
+    switch (val) {
+      case '风门':
+        // imgSrc.value = getAssetURL('home-container/wind-door.gif');
+        break;
+      case '风窗':
+      
+        break;
+    }
+  }
+</script>  
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
+  .windDevice {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover{
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
+      }
+    }
+    // .contents {
+    //   display: inline-block;
+    //   position: absolute;
+    //   top: 66px;
+    //   left: 50%;
+    //   transform: translate(-50%, 0);
+    //   // width: 100%;
+    //   height: calc(100% - 66px);
+    //   padding-bottom: 10px;
+    //   box-sizing: border-box;
+    // }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

src/views/vent/home/clique/components/wind-line.vue

@@ -0,0 +1,387 @@
+<template>
+  <div class="windLine">
+    <div class="title-top" @click="getDetail">关键路线通风</div>
+    <div class="toggle-search">
+      <i class="icon-search">
+        <SvgIcon class="icon" size="14" name="toggle" />
+      </i>
+      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="options1" aria-placeholder="请选择" />
+    </div>
+    <div class="line-echart">
+      <div class="line" ref="line"></div>
+      <div class="pic">
+        <img src="../../../../../assets/images/home-container/pie.png" alt="" />
+      </div>
+      <div class="percent">
+        <div class="percent-box">
+          <span>20</span>
+          <span class="dw">Pa</span>
+        </div>
+        <div class="percent-box">
+          <span>20</span>
+          <span class="dw">Pa</span>
+        </div>
+        <div class="percent-box">
+          <span>40</span>
+          <span class="dw">Pa</span>
+        </div>
+      </div>
+    </div>
+    <div class="line-card">
+      <div class="card-item" v-for="(item, index) in tabList" :key="index">
+        <div class="item-s">
+          <div class="item-label">{{ item.name }}</div>
+          <div class="item-val">{{ item.val }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, nextTick } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+
+  //获取dom节点
+  let line = ref<any>();
+  let searchValue = ref('1号回风斜井');
+  const options1 = reactive<any>([
+    {
+      value: '1号回风斜井',
+      label: '1号回风斜井',
+    },
+    {
+      value: '2号回风斜井',
+      label: '2号回风斜井',
+    },
+    {
+      value: '3号回风斜井',
+      label: '3号回风斜井',
+      disabled: true,
+    },
+  ]);
+
+  let echartData = reactive<any[]>([
+    { name: '进风区', value: 13684 },
+    { name: '用风区', value: 34555 },
+    { name: '回风区', value: 16905 },
+  ]);
+  let xData = reactive<any[]>([]);
+  let yData = reactive<any[]>([]);
+
+  let tabList = reactive<any[]>([
+    { name: '总风量(m³/min)', val: '13129' },
+    { name: '总阻力(Pa)', val: '217010' },
+    { name: '等积孔(m²)', val: '0.56' },
+  ]);
+//跳转详情
+function getDetail() {
+    console.log('跳转详情');
+  }
+  function getOption() {
+    nextTick(() => {
+      function deepCopy(obj) {
+        if (typeof obj !== 'object') {
+          return obj;
+        }
+        var newobj = {};
+        for (var attr in obj) {
+          newobj[attr] = obj[attr];
+        }
+        return newobj;
+      }
+
+      echartData.map((a, b) => {
+        xData.push(a.name);
+        yData.push(a.value);
+      });
+      var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
+      var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
+      var RealData = [];
+      var borderData = [];
+      echartData.map((item, index) => {
+        var newobj = deepCopy(item);
+        var newobj1 = deepCopy(item);
+        RealData.push(newobj);
+        borderData.push(newobj1);
+      });
+      RealData.map((item, index) => {
+        item.itemStyle = {
+          normal: {
+            color: startColor[index],
+          },
+        };
+      });
+      borderData.map((item, index) => {
+        item.itemStyle = {
+          normal: {
+            color: borderStartColor[index],
+          },
+        };
+      });
+      const myChart = echarts.init(line.value);
+
+      let option = {
+        legend: [
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '12%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
+            },
+            data: ['进风区'],
+          },
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '42%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
+            },
+            data: ['用风区'],
+          },
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '70%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
+            },
+            data: ['回风区'],
+          },
+        ],
+        tooltip: {
+          formatter: '{b}:{c}',
+        },
+        series: [
+          // 主要展示层的
+          {
+            radius: ['40%', '80%'],
+            center: ['25%', '50%'],
+            type: 'pie',
+            z: 10,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                borderColor: 'rgba(2, 39, 115)',
+              },
+            },
+            data: RealData,
+          },
+          // 边框的设置
+          {
+            radius: ['45%', '52%'],
+            center: ['25%', '50%'],
+            type: 'pie',
+            z: 5,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+
+            animation: false,
+            tooltip: {
+              show: false,
+            },
+            data: borderData,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+  onMounted(() => {
+    getOption();
+  });
+</script>
+
+<style lang="less" scoped>
+ @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
+  .windLine {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover{
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
+      }
+    }
+    .line-echart {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      width: 100%;
+      height: 120px;
+      .line {
+        width: 100%;
+        height: 100%;
+      }
+      .pic {
+        height: 100%;
+        position: absolute;
+        left: 45%;
+        top: 0;
+        display: flex;
+        align-items: center;
+        img {
+          height: 60%;
+        }
+      }
+      .percent {
+        position: absolute;
+        left: 75%;
+        top: 0;
+        width: 45px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        // justify-content: space-between;
+        align-items: center;
+        .percent-box {
+          font-size: 14px;
+          // color: #b3b8cc;
+          &:nth-child(1) {
+            position: absolute;
+            top: 12%;
+            color: #ffe01c;
+          }
+          &:nth-child(2) {
+            position: absolute;
+            top: 42%;
+            color: #1ff8fb;
+          }
+          &:nth-child(3) {
+            position: absolute;
+            top: 70%;
+            color: #9affa8;
+          }
+          .dw{
+            color: #b3b8cc;
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+    .line-card {
+      position: absolute;
+      top: 186px;
+      left: 0;
+      width: 100%;
+      height: calc(100% - 186px);
+      padding: 0px 15px 15px 15px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .card-item {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        .item-s {
+          position: relative;
+          width: 105px;
+          height: 58px;
+          background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
+          .item-label {
+            width: 100%;
+            text-align: center;
+            color: #b3b8cc;
+            font-size: 12px;
+          }
+          .item-val {
+            position: absolute;
+            left: 50%;
+            top: 31px;
+            font-size: 14px;
+            font-family: 'douyuFont';
+            color: #fff;
+            transform: translate(-50%, 0);
+          }
+        }
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

src/views/vent/home/clique/components/wind-monitor.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="windMonitor">
+    <div class="title-top" @click="getDetail">风量监测</div>
+    <div class="wind-contents">
+      <div class="wind-bar" ref="windBar"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, nextTick, onMounted } from 'vue';
+  import * as echarts from 'echarts';
+  //获取dom节点
+  let windBar = ref<any>();
+//跳转详情
+function getDetail() {
+    console.log('跳转详情');
+  }
+  function getOption() {
+    nextTick(() => {
+      const data = [60, 90, 100, 50, 70, 33,];
+      const color = '#66ffff';
+      const barWidth = 0.1; // 柱条占比
+
+      function renderItem(params, api) {
+        const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
+        const width = api.size([0, 1])[0] * barWidth; // 宽度
+        const ballRadius = width * 0.8;
+        return {
+          type: 'group',
+          children: [
+            {
+              // 圆形装饰
+              type: 'circle',
+              shape: {
+                cx: topCenter[0],
+                cy: topCenter[1],
+                r: ballRadius,
+              },
+              style: api.style({
+                fill: '#66ffff',
+                stroke: color,
+                lineWidth: 2,
+              }),
+            },
+          ],
+        };
+      }
+
+      const myChart = echarts.init(windBar.value);
+      let option = {
+        color: [color],
+        tooltip: {
+          trigger: 'item',
+          show: true,
+          formatter: function (p) {
+            console.info(p);
+            return p.marker + p.name + ' : ' + p.value;
+          },
+        },
+
+        grid: {
+          left: '8%',
+          top: '15%',
+          bottom: '15%',
+          right: '8%',
+          // containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: ['2023.1', '2023.2',  '2023.3', '2023.4', '2023.5', '2023.6'],
+          axisLabel: {
+            formatter: '{value}',
+            fontSize: 14,
+            margin: 10,
+            textStyle: {
+              color: '#b3b8cc',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(62, 103, 164)',
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: 'value',
+          name: '(%)',
+          max: 150,
+          axisLabel: {
+            textStyle: {
+                fontSize: 14, 
+              color: '#b3b8cc',
+            },
+          },
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 10,
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(62, 103, 164,.4)',
+            },
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: data,
+            type: 'bar',
+            barWidth: barWidth * 100 + '%',
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(85, 255, 237, 1)', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(66, 142, 255, 0.1)', // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                position: ['-7', '-28'],
+                formatter: [' {a|{c}}'].join(','),
+                rich: {
+                  a: {
+                    color: '#fff',
+                    align: 'center',
+                  },
+                },
+              },
+            },
+          },
+          {
+            data: data,
+            type: 'custom',
+            renderItem: renderItem,
+            zlevel: 2,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+  onMounted(() => {
+    getOption();
+  });
+</script>
+
+<style lang="less" scoped>
+  .windMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover{
+        color: #66ffff;
+      }
+    }
+    .wind-contents {
+      position: absolute;
+      left: 0;
+      top: 36px;
+      width: 100%;
+      height: calc(100% - 36px);
+      .wind-bar {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/vent/home/clique/components/work-monitor.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="workMonitor">
+    <div class="title-top" @click="getDetail">工作面智能管控</div>
+    <div class="toggle-search">
+      <i class="icon-search">
+        <SvgIcon class="icon" size="14" name="toggle" />
+      </i>
+      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="options1" aria-placeholder="请选择" />
+    </div>
+    <div class="work-echart">
+      <div class="work" ref="work"></div>
+    </div>
+    <div class="work-card">
+      <div class="card-item" v-for="(item, index) in tabList" :key="index">
+        <div class="item-s">
+          <div class="item-label">{{ item.name }}</div>
+          <div class="item-val">{{ item.val }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive,nextTick,onMounted } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+
+  let searchValue = ref('15212工作面');
+  const options1 = reactive<any>([
+    {
+      value: '15212工作面',
+      label: '15212工作面',
+    },
+    {
+      value: '15213工作面',
+      label: '15213工作面',
+    },
+    {
+      value: '15214工作面',
+      label: '15214工作面',
+      disabled: true,
+    },
+  ]);
+
+  let tabList = reactive<any[]>([
+    { name: '总风量(m³/min)', val: '13129' },
+    { name: '总阻力(Pa)', val: '217010' },
+    { name: '等积孔(m²)', val: '0.56' },
+  ]);
+
+  let work = ref<any>();
+  let echartData=reactive({
+    xdata:['08:00:00', '09:00:00', '10:00:00', '11:00:00', '12:00:00', '13:00:00', ],
+    ydata:[12, 5, 12, 46, 22, 24, ],
+    ydata1:[18, 27, 20, 58, 37, 28,]
+  })
+//跳转详情
+function getDetail() {
+    console.log('跳转详情');
+  }
+  function getOption() {
+      nextTick(() => {
+        const myChart = echarts.init(work.value)
+        let option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross'
+            }
+          },
+
+          legend: {
+            align: 'left',
+            right: '4%',
+            top: '6%',
+            type: 'plain',
+            textStyle: {
+              color: '#7ec7ff',
+              fontSize: 12
+            },
+            // icon:'rect',
+            itemGap: 25,
+            itemWidth: 18,
+            icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+            data: [
+              {
+                name: '工作面进风'
+              },
+              {
+                name: '工作面回风'
+              },
+              // {
+              //   name: '工作面需风'
+              // }
+            ]
+          },
+
+          grid: {
+            top: '28%',
+            left: '5%',
+            right: '5%',
+            bottom: '5%',
+            containLabel: true
+          },
+
+          xAxis: [
+            {
+              type: 'category',
+              // boundaryGap: false,
+              axisLine: {
+                //坐标轴轴线相关设置。数学上的x轴
+                show: true,
+                lineStyle: {
+                  color: 'rgba(62, 103, 164)',
+                }
+              },
+              axisLabel: {
+                //坐标轴刻度标签的相关设置
+                textStyle: {
+                  color: '#b3b8cc',
+                  padding: 0,
+                  fontSize: 12
+                },
+                formatter: function (data) {
+                  return data
+                }
+              },
+              splitLine: {
+                show: false,
+                
+              },
+              axisTick: {
+                show: false
+              },
+              data: echartData.xdata
+            }
+          ],
+
+          yAxis: [
+            {
+              name: 'm³/s',
+              nameTextStyle: {
+                color: '#b3b8cc',
+                fontSize: 12,
+                padding: -10
+              },
+              min: 0,
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: 'rgba(62, 103, 164,.4)',
+                }
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: 'rgba(62, 103, 164)',
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#b3b8cc',
+                  padding: 0,
+                  fontSize: 12
+                },
+                formatter: function (value) {
+                  if (value === 0) {
+                    return value
+                  }
+                  return value
+                }
+              },
+              axisTick: {
+                show: false
+              }
+            }
+          ],
+          series: [
+            {
+              name: '工作面进风',
+              type: 'line',
+              yAxisIndex: 0,
+              symbolSize: 6,
+              lineStyle: {
+                normal: {
+                  width: 2,
+                  color: 'orange' // 线条颜色
+                },
+                borderColor: 'rgba(0,0,0,.4)'
+              },
+              itemStyle: {
+                color: 'orange',
+                borderColor: '#646ace',
+                borderWidth: 0
+              },
+              data: echartData.ydata
+            },
+            {
+              name: '工作面回风',
+              type: 'line',
+              yAxisIndex: 0,
+              symbolSize: 6,
+
+              lineStyle: {
+                normal: {
+                  width: 2,
+                  color: '#1891de' // 线条颜色
+                },
+                borderColor: 'rgba(0,0,0,.4)'
+              },
+              itemStyle: {
+                color: '#1891de',
+                borderColor: '#646ace',
+                borderWidth: 0
+              },
+              data: echartData.ydata1
+            },
+           
+          ]
+        }
+        myChart.setOption(option)
+        window.onresize = function () {
+          myChart.resize()
+        }
+      })
+    }
+  onMounted(() => {
+    getOption();
+  });
+
+
+  
+</script>
+
+<style lang="less" scoped>
+  .workMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover{
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
+      }
+    }
+    .work-echart {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      height: 110px;
+      margin: 5px 0px;
+      padding: 0px 20px;
+      box-sizing: border-box;
+      width: 100%;
+      .work {
+        height: 100%;
+        background: url('../../../../../assets/images/home-container/work-bd.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    .work-card {
+      position: absolute;
+      top: 186px;
+      left: 0;
+      width: 100%;
+      height: calc(100% - 186px);
+      padding: 0px 15px 15px 15px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .card-item {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        .item-s {
+          position: relative;
+          width: 105px;
+          height: 58px;
+          background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
+          .item-label {
+            width: 100%;
+            text-align: center;
+            color: #b3b8cc;
+            font-size: 12px;
+          }
+          .item-val {
+            position: absolute;
+            left: 50%;
+            top: 31px;
+            font-size: 14px;
+            font-family: 'douyuFont';
+            color: #fff;
+            transform: translate(-50%, 0);
+          }
+        }
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

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

@@ -1,111 +1,267 @@
 <template>
-  <div class="header">1111</div>
-  <div class="container-box">
-    <div class="left-box lr-box">
-      <div class="lr-top air-monitor">
-        <div class="column-header">
-          <div class="header-item" v-for="(item, index) in airVolumeMonitorKey" :key="index">{{ item.value }}</div>
+  <div class="home-container">
+    <div class="header">
+      <div class="head-time">
+        <span>2022/03/28</span>
+        <span>星期一</span>
+        <span>13:46:37</span>
+      </div>
+      <div class="main-title">通防智能管控系统</div>
+    </div>
+    <div class="home-contents">
+      <div class="left-content">
+        <!-- 局部通风机 -->
+        <div class="monitor-box">
+          <fanMonitor />
+        </div>
+        <!-- 主通风机 -->
+        <div class="monitor-box monitor-box1">
+          <mainMonitor />
         </div>
-        <div class="column-container">
-          <div class="column-item" v-for="(airVolume, index) in airVolumeMonitor" :key="index">
-            <div class="item-column" v-for="(item, key) in airVolumeMonitorKey" :key="key">{{ airVolume[item.code] }}</div>
+        <!-- 通风设备远程控制 -->
+        <div class="monitor-box">
+          <windDevice />
+        </div>
+      </div>
+      <div class="center-content">
+        <!-- 三维模型 -->
+        <div class="three-box">
+          <div class="three-nav">
+            <div class="nav-item" v-for="(item, index) in navList" :key="index">
+              <div class="item-label">{{ item.name }}</div>
+              <div class="item-value">
+                <div v-if="item.isShow" class="bg-box" v-for="(ite, ind) in item.valList" :key="ind">
+                  <div class="box-line"></div>
+                  <div class="value-text">{{ ite.val }}</div>
+                </div>
+                <div v-else class="value-text1">{{ item.val }}</div>
+              </div>
+            </div>
           </div>
+          <div class="three-modal">
+            <iframe id="iframe" ref="iframe" src="http://10.10.150.72:8091/user/autologin" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
+          </div>
+        </div>
+        <!-- 风量监测 -->
+        <div class="wind-box">
+          <windMonitor />
         </div>
       </div>
-      <div class="lr-bottom warning-monitor"></div>
-    </div>
-    <div class="center-box ">
-      <div class="center-container file-list"></div>
-    </div>
-    <div class="right-box lr-box">
-      <div class="lr-top scene-monitor"></div>
-      <div class="lr-bottom tunnel-statistic">
-        
+      <div class="right-content">
+        <!-- 关键通风路线 -->
+        <div class="monitor-box">
+          <windLine />
+        </div>
+        <!-- 工作面智能管控 -->
+        <div class="monitor-box monitor-box1">
+          <workMonitor />
+        </div>
+        <!-- 设备预警 -->
+        <div class="monitor-box">
+          <deviceWarn />
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { airVolumeMonitorKey, airVolumeMonitor } from './clique.data'
+  import { reactive } from 'vue';
+  import fanMonitor from './components/fan-monitor.vue';
+  import mainMonitor from './components/main-monitor.vue';
+  import windDevice from './components/wind-device.vue';
+  import windMonitor from './components/wind-monitor.vue';
+  import windLine from './components/wind-line.vue';
+  import workMonitor from './components/work-monitor.vue';
+  import deviceWarn from './components/device-warn.vue';
+
+  let navList = reactive([
+    { name: '总风量(m³/min)', isShow: true, valList: [{ val: '2' }, { val: '1' }, { val: '3' }, { val: '3' }, { val: '0' }] },
+    { name: '总阻力(Pa)', isShow: true, valList: [{ val: '0' }, { val: '2' }, { val: '4' }, { val: '6' }, { val: '3' }] },
+    { name: '等积孔(m²)', isShow: true, valList: [{ val: '1' }, { val: '0' }, { val: '.' }, { val: '5' }, { val: '4' }] },
+    { name: '外部漏风率', isShow: false, val: '6%' },
+    { name: '有效风量率', isShow: false, val: '91.5%' },
+  ]);
 </script>
+
 <style lang="less" scoped>
-  .header{
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff11;
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+  @font-face {
+    font-family: 'yjsz';
+    src: url('../../../../assets/font/yjsz.TTF');
   }
-  .container-box{
-    height: calc(100% - 32px);
-    display: flex;
-    margin: 16px 10px;
-    .lr-box{
-      width: 400px;
-      height: calc(100% - 50px);
+  .home-container {
+    width: 100%;
+    height: 100%;
+    .header {
+      width: 100%;
+      height: 76px;
       position: relative;
-      top: -50px;
-      background-color: #ffffff11;
-    }
-    .center-box{
-      flex: 1;
-      margin: 0 16px;
-      .center-container{
-        height: 500px;
-        position: fixed;
-        bottom: 0;
-        background-color: #ffffff11;
+      background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;
+      .head-time {
+        position: absolute;
+        top: 14px;
+        left: 15px;
+        color: #b5c9e9;
+        font-size: 14px;
+        span {
+          margin-right: 20px;
+          letter-spacing: 2px;
+        }
+      }
+      .main-title {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        color: #fff;
+        font-size: 24px;
+        font-family: 'douyuFont';
       }
     }
-    .air-monitor{
-      .column-header{
-        width: 100%;
+    .home-contents {
+      display: flex;
+      justify-content: space-between;
+      height: calc(100% - 76px);
+      padding: 10px;
+      box-sizing: border-box;
+      .left-content {
         display: flex;
-        justify-content: center;
-        color: aqua;
-        height: 80px;
-        line-height: 80px;
-        .header-item{
-          width: 25%;
-          text-align: center;
+        flex-direction: column;
+        flex: 1;
+        justify-content: space-between;
+        height: 100%;
+        .monitor-box {
+          display: flex;
+          flex: 1;
+          width: 100%;
+          background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        .monitor-box1 {
+          margin: 15px 0px;
         }
       }
-      .column-container{
-        height: 400px;
-        overflow-y: auto;
-        &:hover {
-          overflow-y: auto;
-          & > .column-item{
-            animation-play-state: paused;
-            // animation: move1 2s linear;
+      .center-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex: 2;
+        height: 100%;
+        margin: 0px 10px;
+        .three-box {
+          position: relative;
+          display: flex;
+          background-color: #fff;
+          flex: 2;
+          width: 100%;
+          margin-bottom: 15px;
+          background: url('../../../../assets/images/home-container/three-dialog.png') no-repeat;
+          background-size: 100% 100%;
+          .three-nav {
+            position: absolute;
+            left: 50%;
+            top: 38px;
+            transform: translate(-50%, 0);
+            width: 812px;
+            height: 89px;
+            padding: 0px 20px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;
+            .nav-item {
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              justify-content: space-around;
+              align-items: center;
+              height: 80%;
+              .item-label {
+                color: #98f5ff;
+              }
+              .item-value {
+                position: relative;
+                width: 125px;
+                height: 37px;
+                padding: 0px 5px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                background: url('../../../../assets/images/home-container/item-value.png') no-repeat;
+                .bg-box {
+                  position: relative;
+                  width: 20px;
+                  height: 26px;
+                  border-bottom: 2px solid #063493;
+                  background: linear-gradient(to right, rgba(1, 194, 249), rgba(0, 125, 252));
+                  .box-line {
+                    position: absolute;
+                    left: 0;
+                    top: 50%;
+                    transform: translate(0, -50%);
+                    height: 1px;
+                    width: 100%;
+                    background-color: rgba(6, 52, 147, 0.6);
+                  }
+                  .value-text {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    color: #fff;
+                    font-size: 22px;
+                    font-family: 'yjsz';
+                    font-weight: 500;
+                  }
+                }
+                .value-text1 {
+                  width: 100%;
+                  text-align: center;
+                  color: #fff;
+                  font-size: 22px;
+                  font-family: 'yjsz';
+                  font-weight: 500;
+                }
+              }
+            }
+          }
+          .three-modal{
+            width: 100%;
+            height: 100%;
+            padding: 20px 17px 20px 15px;
+            box-sizing: border-box;
           }
         }
-        .column-item{
-          width: 100%;
+        .wind-box {
           display: flex;
-          justify-content: center;
-          color: #fff;
-          height: 60px;
-          animation: move 5s linear infinite;
-          .item-column{
-            width: 25%;
-            text-align: center;
-          }
+          flex: 1;
+          width: 100%;
+          background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
+          background-size: 100% 100%;
         }
       }
-      @keyframes move {
-        0% {
-          transform: translateY(0px);
-        }
-        100% {
-          transform: translateY(-260px);
+      .right-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex: 1;
+        height: 100%;
+        .monitor-box {
+          display: flex;
+          flex: 1;
+          width: 100%;
+          background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
+          background-size: 100% 100%;
         }
-      }
-
-      @keyframes move1 {
-        0% {
-          transform: translateY(0px);
+        .monitor-box1 {
+          margin: 15px 0px;
         }
       }
-      
     }
   }
 </style>

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

@@ -2,7 +2,7 @@
   <div class="bg"
     style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="balancePress3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="balancePress3D" class="balancePress3D-bg" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
       <div>
         <div ref="elementContent" class="elementContent">
@@ -133,6 +133,11 @@ onUnmounted(() => {
 <style lang="less" scoped>
 @import '/@/design/vent/modal.less';
 @ventSpace: zxm;
+
+.balancePress3D-bg{
+  background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+}
 .scene-box{
   pointer-events: none;
   .history-group{

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

@@ -11,7 +11,7 @@
         style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
       >
     </div>
-    <div id="beltTun3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="beltTun3D" class="beltTun3D-bg" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
   </div>
   <div class="scene-box">
     <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">皮带巷智能管控</customHeader>
@@ -187,6 +187,11 @@ onUnmounted(() => {
 @import '/@/design/vent/modal.less';
 @ventSpace: zxm;
 
+.beltTun3D-bg{
+   background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+}
+
 :deep(.@{ventSpace}-tabs-tabpane-active) {
   overflow: auto;
 }

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

@@ -2,7 +2,7 @@
   <div class="bg"
     style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="chamber3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="chamber3D" class="chamber3D-bg" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
       <div>
         <div ref="elementContent" class="elementContent">
@@ -151,6 +151,11 @@ onUnmounted(() => {
 <style lang="less" scoped>
 @import '/@/design/vent/modal.less';
 @ventSpace: zxm;
+
+.chamber3D-bg{
+  background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+}
 .scene-box{
   pointer-events: none;
   .history-group{

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

@@ -1,66 +1,67 @@
 <template>
-  <a-modal v-model:visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel">
-    <div class="modal-container">
-      <div class="vent-flex-row">
-        <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
-        <div class="warning-text">您是否要进行{{ title }}操作？</div>
+    <a-modal v-model:visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel">
+      <div class="modal-container">
+        <div class="vent-flex-row">
+          <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
+          <div class="warning-text">您是否要进行{{ title }}操作？</div>
+        </div>
+        <div class="vent-flex-row input-box">
+          <div class="label">操作密码：</div>
+          <a-input size="small" type="password" v-model:value="passWord" />
+        </div>
       </div>
-      <div class="vent-flex-row input-box">
-        <div class="label">操作密码：</div>
-        <a-input size="small" type="password" v-model:value="passWord" />
-      </div>
-    </div>
-  </a-modal>
-</template>
-<script setup lang="ts">
-  import { watch, ref } from 'vue';
-  import { ExclamationCircleFilled } from '@ant-design/icons-vue';
-
-  const props = defineProps({
-    modalIsShow: {
-      type: Boolean,
-      default: false,
-    },
-    modalTitle: {
-      type: String,
-      default: '',
-    },
-    modalType: {
-      type: String,
-      default: '',
-    },
-  });
-
-  const emit = defineEmits(['handleOk', 'handleCancel']);
-
-  const visible = ref<Boolean>(false);
-  const title = ref<String>('');
-  const type = ref<String>('');
-  const passWord = ref('');
-
-  watch([() => props.modalIsShow, () => props.modalTitle, () => props.modalType], ([newVal, newModalTitle, newModalType]) => {
-    visible.value = newVal;
-    if (newModalTitle) title.value = newModalTitle;
-    if (newModalType) type.value = newModalType;
-    passWord.value = '';
-  });
-
-  function handleOk() {
-    //
-    emit('handleOk', passWord.value, type.value);
-  }
-  function handleCancel() {
-    //
-    emit('handleCancel');
-  }
-</script>
-<style scoped lang="less">
-  @ventSpace: zxm;
-
-  .label {
-    width: 80px;
-  }
-  .@{ventSpace}-input {
-    width: 150px;
-  }
-</style>
+    </a-modal>
+  </template>
+  <script setup lang="ts">
+    import { watch, ref } from 'vue';
+    import { ExclamationCircleFilled } from '@ant-design/icons-vue';
+  
+    const props = defineProps({
+      modalIsShow: {
+        type: Boolean,
+        default: false,
+      },
+      modalTitle: {
+        type: String,
+        default: '',
+      },
+      modalType: {
+        type: String,
+        default: '',
+      },
+    });
+  
+    const emit = defineEmits(['handleOk', 'handleCancel']);
+  
+    const visible = ref<Boolean>(false);
+    const title = ref<String>('');
+    const type = ref<String>('');
+    const passWord = ref('');
+  
+    watch([() => props.modalIsShow, () => props.modalTitle, () => props.modalType], ([newVal, newModalTitle, newModalType]) => {
+      visible.value = newVal;
+      if (newModalTitle) title.value = newModalTitle;
+      if (newModalType) type.value = newModalType;
+      passWord.value = '';
+    });
+  
+    function handleOk() {
+      //
+      emit('handleOk', passWord.value, type.value);
+    }
+    function handleCancel() {
+      //
+      emit('handleCancel');
+    }
+  </script>
+  <style scoped lang="less">
+    @ventSpace: zxm;
+  
+    .label {
+      width: 80px;
+    }
+    .@{ventSpace}-input {
+      width: 150px;
+    }
+  </style>
+  

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

@@ -21,14 +21,14 @@
           <div class="monitor-item">
             <span class="monitor-title">累计流量:</span>
             <span class="monitor-val"
-              ><span class="val">{{ monitorData[groupNum - 1]['FluxTotal1'] ? monitorData[groupNum - 1]['FluxTotal1'] ?  parseFloat(monitorData[groupNum - 1]['FluxTotal1']).toFixed(2) : '-' : '-' }}</span
+              ><span class="val">{{ monitorData[groupNum - 1]['FluxTotal1'] ? monitorData[groupNum - 1]['FluxTotal1'].toFixed(2) : '-' }}</span
               ><span class="unit">m³/h</span></span
             >
           </div>
           <div class="monitor-item">
             <span class="monitor-title">氮气纯度:</span>
             <span class="monitor-val"
-              ><span class="val">{{ monitorData[groupNum - 1]['NitrogenPurity'] ? monitorData[groupNum - 1]['NitrogenPurity'] ? parseFloat(monitorData[groupNum - 1]['NitrogenPurity']).toFixed(2) : '-' : '-' }}</span
+              ><span class="val">{{ monitorData[groupNum - 1]['NitrogenPurity'] ? monitorData[groupNum - 1]['NitrogenPurity'].toFixed(2) : '-' }}</span
               ><span class="unit">%</span></span
             >
           </div>
@@ -38,7 +38,7 @@
               ><span class="val">{{
                 monitorData[groupNum - 1]['AirCompressor_RunTime'] ? monitorData[groupNum - 1]['AirCompressor_RunTime'] : '-'
               }}</span
-              ><span class="unit">h</span></span
+              ><span class="unit">-</span></span
             >
           </div>
           <div class="monitor-item">
@@ -47,7 +47,7 @@
               ><span class="val">{{
                 monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum - 1]['AirCompressor_LoadTime'] : '-'
               }}</span
-              ><span class="unit">h</span></span
+              ><span class="unit">-</span></span
             >
           </div>
         </fourBorderBg>
@@ -75,7 +75,7 @@
                       <span class="state-title">{{ Object.values(data)[0] }} :</span>
                       <span class="state-val">{{
                         (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
-                          ? monitorData[groupNum - 1][Object.keys(data)[0]] ?  parseFloat(monitorData[groupNum - 1][Object.keys(data)[0]]).toFixed(2) : '-'
+                          ? monitorData[groupNum - 1][Object.keys(data)[0]].toFixed(2)
                           : '-'
                       }}</span>
                     </div>
@@ -83,7 +83,7 @@
                       <span class="state-title">{{ Object.values(data)[1] }} :</span>
                       <span class="state-val">{{
                         (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
-                          ? monitorData[groupNum - 1][Object.keys(data)[1]] ? parseFloat(monitorData[groupNum - 1][Object.keys(data)[1]]).toFixed(2) : '-'
+                          ? monitorData[groupNum - 1][Object.keys(data)[1]].toFixed(2)
                           : '-'
                       }}</span>
                     </div>
@@ -127,32 +127,14 @@
                 <div class="control-item" v-for="(groupNum, index) in monitorDataGroupNum" :key="groupNum">
                   <div class="control-item-title">{{ monitorData[groupNum - 1]['strname'] }}</div>
                   <div class="control-item-state">
-                    <!-- <a-switch
+                    <a-switch
                       v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
                       size="small"
                       checked-children="开启"
                       un-checked-children="关闭"
                       :disabled="airCompressorState[groupNum - 1][`controlModel`]"
                       @change="handlerDevice(airCompressorState[groupNum - 1], index)"
-                    /> -->
-                    <a-button v-if="index==0" size="small"  type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1],false)">一键启停</a-button>
-                    <a-button v-else size="small"  type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
-                 
-                  </div>
-                </div>
-                <div class="control-item" v-for="(groupNum, index) in monitorDataGroupNum" :key="groupNum">
-                  <div class="control-item-title">{{ monitorData[groupNum - 1]['strname'] }}</div>
-                  <div class="control-item-state">
-                    <!-- <a-switch
-                      v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
-                      size="small"
-                      checked-children="开启"
-                      un-checked-children="关闭"
-                      :disabled="airCompressorState[groupNum - 1][`controlModel`]"
-                      @change="handlerDevice(airCompressorState[groupNum - 1], index)"
-                    /> -->
-                    <a-button v-if="index==0" size="small"  type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1],true)">一键复位</a-button>
-                    <a-button v-else size="small"  type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1],true)">一键复位</a-button>
+                    />
                   </div>
                 </div>
               </div>
@@ -207,7 +189,7 @@
   const loading = ref(true);
   let kzParam = reactive<any>({
     data: {},
-    isFw:null,
+    activeIndex: 0,
   });
   // const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
 
@@ -288,7 +270,6 @@
   async function getDataSource(systemID) {
     const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
     console.log(res, 'res---------------');
-   
     if (res) {
       const result = res;
       if (!result || result.msgTxt.length < 1) return;
@@ -310,8 +291,8 @@
             airCompressorState.push({
               id: v.deviceID,
               deviceType:v.deviceType,
-              HMIReset:v.readData.HMIReset,
-              HMIStartStop:v.readData.HMIStartStop
+              compressRunSigF1: false,
+              controlModel: false,
             });
           });
         }
@@ -321,21 +302,19 @@
     }
   }
 
-  function handlerDevice(data,bol) {
-    console.log(bol,'bol-------')
+  function handlerDevice(data, index) {
     kzParam.data = data;
-    kzParam.isFw = bol;
-    console.log(kzParam,'kz--------')
-    if ( bol) {
+    kzParam.activeIndex = index;
+    if (index == 1) {
       modalTitle.value = '一键复位';
       modalType.value = '1';
       modalIsShow.value = true;
-      kzParam.data.HMIReset=!data.HMIReset
+      kzParam.data.compressRunSigF1 = !kzParam.data.compressRunSigF1;
     } else {
       modalTitle.value = '一键启停';
       modalType.value = '2';
       modalIsShow.value = true;
-      kzParam.data.HMIStartStop =!data.HMIStartStop;
+      kzParam.data.compressRunSigF1 = !kzParam.data.compressRunSigF1;
     }
   }
   function handleOK(passWord, handlerState) {
@@ -346,19 +325,19 @@
     // }
 
     let data = {};
-    if (kzParam.isFw ) {
+    if (kzParam.activeIndex == 1) {
       data = {
         deviceid: kzParam.data.id,
         devicetype:kzParam.data.deviceType,
         password: passWord,
-        HMIReset: kzParam.data.HMIReset,
+        HMIReset: kzParam.data.compressRunSigF1,
       };
     } else {
       data = {
         deviceid: kzParam.data.id,
         password: passWord,
         devicetype:kzParam.data.deviceType,
-        HMIStartStop: kzParam.data.HMIStartStop,
+        HMIStartStop: kzParam.data.compressRunSigF1,
       };
     }
 
@@ -642,7 +621,6 @@
             flex-wrap: wrap;
 
             .control-item {
-              width: 50%;//lxh
               display: flex;
               flex-direction: column;
               justify-content: center;

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

@@ -1,8 +1,8 @@
 <template>
   <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="fanLocal3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
-    <div id="fanLocal3DCSS" class="threejs-Object-CSS" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none;">
+    <div id="fanLocal3D" class="fanLocal3D-bg" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="fanLocal3DCSS" class="threejs-Object-CSS" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none">
       <div style="z-index: -1; position: relative">
         <div class="elementTag" id="inputBox">
           <div class="elementContent">
@@ -27,7 +27,7 @@
             <p>风门过风面积：{{ selectData.gas1 ? selectData.gas1 : '-' }}</p>
           </div>
         </div>
-        <div  class="elementTag" id="windownBox">
+        <div class="elementTag" id="windownBox">
           <div class="elementContent">
             <p>风窗全风压回风流：0</p>
           </div>
@@ -35,7 +35,7 @@
       </div>
     </div>
   </div>
-  
+
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center row">
@@ -122,8 +122,8 @@
                       ></div>
                       <div class="vent-margin-l-8">{{
                         selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
-                        ? '无状态'
-                        : selectData[state.dataIndex.replace('Fan', 'Fan1')]
+                          ? '无状态'
+                          : selectData[state.dataIndex.replace('Fan', 'Fan1')]
                           ? '正常'
                           : '异常'
                       }}</div>
@@ -140,8 +140,8 @@
                       ></div>
                       <div class="vent-margin-l-8">{{
                         selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined
-                        ? '无状态'
-                        : selectData[state.dataIndex.replace('Fan', 'Fan2')]
+                          ? '无状态'
+                          : selectData[state.dataIndex.replace('Fan', 'Fan2')]
                           ? '正常'
                           : '异常'
                       }}</div>
@@ -152,12 +152,14 @@
                       <div
                         class="signal-round vent-margin-l-8"
                         :class="{
-                                'signal-round-run': selectData[state.dataIndex],
-                                'signal-round-warning': selectData[state.dataIndex] !== undefined && !selectData[state.dataIndex],
-                                'signal-round-gry': selectData[state.dataIndex] === undefined,
-                              }"
+                          'signal-round-run': selectData[state.dataIndex],
+                          'signal-round-warning': selectData[state.dataIndex] !== undefined && !selectData[state.dataIndex],
+                          'signal-round-gry': selectData[state.dataIndex] === undefined,
+                        }"
                       ></div>
-                      <div class="vent-margin-l-8">{{ selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] ? '正常' : '异常' }}</div>
+                      <div class="vent-margin-l-8">{{
+                        selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] ? '正常' : '异常'
+                      }}</div>
                     </div>
                   </div>
                 </div>
@@ -169,14 +171,18 @@
     </div>
 
     <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 170, scroll, 180)">
-      
-      <dv-border-box8 :dur="5" class="dv_border_8"  :style="`bottom: 20px; padding: 5px; height: ${scroll.y + 120}px`" >
-        <div class="enter-detail" @click="goDetail()">
-          <send-outlined class=""/>风机运行详情
-        </div>
+      <dv-border-box8 :dur="5" class="dv_border_8" :style="`bottom: 20px; padding: 5px; height: ${scroll.y + 120}px`">
+        <div class="enter-detail" @click="goDetail()"> <send-outlined class="" />风机运行详情 </div>
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
           <a-tab-pane key="1" tab="实时监测">
-            <GroupMonitorTable  v-if="activeKey === '1'" ref="MonitorDataTable" :dataSource="dataSource" columnsType="fanlocal_monitor" @selectRow="getSelectRow" :scroll="scroll"/>
+            <GroupMonitorTable
+              v-if="activeKey === '1'"
+              ref="MonitorDataTable"
+              :dataSource="dataSource"
+              columnsType="fanlocal_monitor"
+              @selectRow="getSelectRow"
+              :scroll="scroll"
+            />
           </a-tab-pane>
           <a-tab-pane key="2" tab="实时曲线图" force-render>
             <div class="tab-item" v-if="activeKey === '2'">
@@ -208,17 +214,35 @@
           </a-tab-pane>
           <a-tab-pane key="3" tab="历史数据">
             <div class="tab-item" v-if="activeKey === '3'">
-              <HistoryTable columns-type="fanlocal" device-type="fanlocal" :device-list-api="baseList" designScope="fanlocal-history" :scroll="scroll" />
+              <HistoryTable
+                columns-type="fanlocal"
+                device-type="fanlocal"
+                :device-list-api="baseList"
+                designScope="fanlocal-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="报警历史">
             <div class="tab-item" v-if="activeKey === '4'">
-              <AlarmHistoryTable columns-type="alarm" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
+              <AlarmHistoryTable
+                columns-type="alarm"
+                device-type="fanlocal"
+                :device-list-api="baseList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="5" tab="操作历史">
             <div class="tab-item" v-if="activeKey === '5'">
-              <HandlerHistoryTable columns-type="operatorhistory" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
+              <HandlerHistoryTable
+                columns-type="operatorhistory"
+                device-type="fanlocal"
+                :device-list-api="baseList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
         </a-tabs>
@@ -311,7 +335,7 @@
       </div>
     </div>
   </a-modal>
-  <DetailModal @register="registerModal"/>
+  <DetailModal @register="registerModal" />
 </template>
 
 <script setup lang="ts">
@@ -336,7 +360,7 @@
   import { SvgIcon } from '/@/components/Icon';
   import { useRouter } from 'vue-router';
   import { useModal } from '/@/components/Modal';
-import { message } from 'ant-design-vue';
+  import { message } from 'ant-design-vue';
 
   const [registerModal, { openModal, closeModal }] = useModal();
   const { currentRoute } = useRouter();
@@ -425,9 +449,9 @@ import { message } from 'ant-design-vue';
   ]);
 
   const scroll = reactive({
-    y: 180
-  })
-  const MonitorDataTable = ref()
+    y: 180,
+  });
+  const MonitorDataTable = ref();
   const modalSensor = ref(null);
   const loading = ref(false);
   const activeKey = ref('1');
@@ -445,7 +469,6 @@ import { message } from 'ant-design-vue';
   // 默认数据右边监测的是1#风机
   const warningMonitorRowIndex = ref(0);
 
-
   // 设备数据
   const controlType = ref(1);
   const modalType = ref('fm');
@@ -469,9 +492,8 @@ import { message } from 'ant-design-vue';
 
   const flvURL1 = () => {
     // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-    return ''
+    return '';
   };
-  
 
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
@@ -492,10 +514,10 @@ import { message } from 'ant-design-vue';
 
   //详情
   function goDetail() {
-    openModal()
+    openModal();
   }
   //
-  async function getDataSource(){
+  async function getDataSource() {
     const res = await list({ devicetype: 'fanlocal', pagetype: 'normal' });
     const dataArr = res.msgTxt[0].datalist || [];
     dataSource.value = [];
@@ -506,33 +528,36 @@ import { message } from 'ant-design-vue';
     });
     const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
     return data;
-  };
+  }
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   async function getMonitor(flag?) {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = await setTimeout(async () => {
-        await getDataSource();
-        if (dataSource.value.length > 0 && selectRowIndex.value == -1 && MonitorDataTable.value) {
-          // 初始打开页面
-          if (currentRoute.value['query'] && currentRoute.value['query']['id']) {
-            MonitorDataTable.value.setSelectedRowKeys(currentRoute.value['query']['id'])
-          }else{
-            MonitorDataTable.value.setSelectedRowKeys(dataSource.value[0]['deviceID'])
+      timer = await setTimeout(
+        async () => {
+          await getDataSource();
+          if (dataSource.value.length > 0 && selectRowIndex.value == -1 && MonitorDataTable.value) {
+            // 初始打开页面
+            if (currentRoute.value['query'] && currentRoute.value['query']['id']) {
+              MonitorDataTable.value.setSelectedRowKeys(currentRoute.value['query']['id']);
+            } else {
+              MonitorDataTable.value.setSelectedRowKeys(dataSource.value[0]['deviceID']);
+            }
           }
-        }
-        Object.assign(selectData, deviceBaseList.value, dataSource.value[selectRowIndex.value]);
-        addText(selectData);
-        // playAnimation(data, selectData.maxarea);
-        playSmoke(selectData)
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      }, flag ? 0 :1000);
+          Object.assign(selectData, deviceBaseList.value, dataSource.value[selectRowIndex.value]);
+          addText(selectData);
+          // playAnimation(data, selectData.maxarea);
+          playSmoke(selectData);
+          if (timer) {
+            timer = null;
+          }
+          getMonitor();
+        },
+        flag ? 0 : 1000
+      );
     }
-  };
+  }
 
   // 获取设备基本信息列表
   const deviceBaseList = ref([]);
@@ -540,11 +565,11 @@ import { message } from 'ant-design-vue';
     getTableList({ pageSize: 1000 }).then((res) => {
       deviceBaseList.value = res.records;
     });
-  };
+  }
 
   // 切换检测数据
   function getSelectRow(id) {
-    console.log('选中的设备id------->', id)
+    console.log('选中的设备id------->', id);
 
     if (!id) return;
     loading.value = true;
@@ -564,7 +589,7 @@ import { message } from 'ant-design-vue';
     }
     addCssText();
     return;
-  };
+  }
 
   // 打开并设置modal的标题
   function showModal(obj) {
@@ -572,9 +597,9 @@ import { message } from 'ant-design-vue';
     modalTitle.value = obj.value;
     passWord.value = '';
     modalIsShow.value = true;
-  };
+  }
 
-  function changeMotor(e){
+  function changeMotor(e) {
     const target = e.target;
     if (target.name === 'localWind1') {
       if (target.value === 'open') {
@@ -585,7 +610,7 @@ import { message } from 'ant-design-vue';
         mainWindIsShow1.value = 'stop';
       }
     }
-  };
+  }
 
   function handleOk(e: MouseEvent) {
     const handType = modalType.value;
@@ -597,28 +622,27 @@ import { message } from 'ant-design-vue';
       value: null,
     };
     if (handType === 'startSmoke') {
-
       // 启动风机
       if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
         // playSmoke(handType, 'top', frequency, 'open');
         data.paramcode = 'CtrlFan1Start';
-        deviceControlApi(data).then((res) => {
-          console.log('设备操作结果', res);
-          modalTitle.value = '';
-          modalIsShow.value = false;
-        }).catch((err) => {
-
-        });
+        deviceControlApi(data)
+          .then((res) => {
+            console.log('设备操作结果', res);
+            modalTitle.value = '';
+            modalIsShow.value = false;
+          })
+          .catch((err) => {});
       } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
         // playSmoke(handType, 'down', frequency, 'open');
         data.paramcode = 'CtrlFan2Start';
-        deviceControlApi(data).then((res) => {
-          console.log('设备操作结果', res);
-          modalTitle.value = '';
-          modalIsShow.value = false;
-        }).catch((err) => {
-
-        });
+        deviceControlApi(data)
+          .then((res) => {
+            console.log('设备操作结果', res);
+            modalTitle.value = '';
+            modalIsShow.value = false;
+          })
+          .catch((err) => {});
       } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
         // playSmoke(handType, '', frequency, 'stop');
       }
@@ -632,70 +656,66 @@ import { message } from 'ant-design-vue';
         data.paramcode = 'Fan2fHz';
         data.value = fan2FrequencyVal.value;
       }
-      
-      deviceControlApi(data).then((res) => {
-        console.log('设备操作结果', res);
-        modalTitle.value = '';
-        modalIsShow.value = false;
-      }).catch((err) => {
-   
-      });
-    } else if (handType === 'changeSmoke') {
 
+      deviceControlApi(data)
+        .then((res) => {
+          console.log('设备操作结果', res);
+          modalTitle.value = '';
+          modalIsShow.value = false;
+        })
+        .catch((err) => {});
+    } else if (handType === 'changeSmoke') {
       // 一键倒机
       if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
         // playSmoke('startSmoke', 'down', frequency, 'open');
         data.paramcode = 'fanRun2';
-        deviceControlApi(data).then((res) => {
-          console.log('设备操作结果', res);
-          modalTitle.value = '';
-          modalIsShow.value = false;
-        }).catch((err) => {
-
-        });
+        deviceControlApi(data)
+          .then((res) => {
+            console.log('设备操作结果', res);
+            modalTitle.value = '';
+            modalIsShow.value = false;
+          })
+          .catch((err) => {});
         mainWindIsShow1.value = 'stop';
         mainWindIsShow2.value = 'open';
       } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
         // playSmoke('startSmoke', 'top', frequency, 'open');
         data.paramcode = 'fanRun1';
-        deviceControlApi(data).then((res) => {
-          console.log('设备操作结果', res);
-          modalTitle.value = '';
-          modalIsShow.value = false;
-        }).catch((err) => {
-
-        });
+        deviceControlApi(data)
+          .then((res) => {
+            console.log('设备操作结果', res);
+            modalTitle.value = '';
+            modalIsShow.value = false;
+          })
+          .catch((err) => {});
         mainWindIsShow1.value = 'open';
         mainWindIsShow2.value = 'stop';
       } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
         // playSmoke(handType, '', frequency, 'stop');
       }
     }
-    
-  };
+  }
 
-  function handleChangeSensor(value: string){
+  function handleChangeSensor(value: string) {
     console.log(value);
-  };
+  }
 
   function addPlayVideo() {
     if (player1.value && player1.value.play) {
       if (!player1.value.paused()) player1.value.play();
       document.body.removeEventListener('mousedown', addPlayVideo);
     }
-  };
-
+  }
 
   onBeforeMount(() => {
     getDeviceBaseList();
   });
 
   onMounted(() => {
-    
     mountedThree(player1.value).then(() => {
-      nextTick(async() => {
+      nextTick(async () => {
         await getMonitor(true);
-        
+
         addCssText();
         // playSmoke('startSmoke', 'top', frequencyVal.value, 'open');
       });
@@ -716,9 +736,24 @@ import { message } from 'ant-design-vue';
   :deep(.@{ventSpace}-tabs-tabpane-active) {
     height: 100%;
   }
-  .scene-box .bottom-tabs-box{
+  .button-box {
+    border: none !important; //lxh
+    background: url('../../../../assets/images/vent/wind-doorbtn.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+  }
+  .fanLocal3D-bg {
+    background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+  }
+  :deep .zxm-tabs-tab {
+    padding: 6px 12px !important; //lxh
+    background: rgba(49, 252, 239, 0.4); //lxh
+    border-top-left-radius: 8px; //lxh
+    border-top-right-radius: 8px; //lxh
+  }
+  .scene-box .bottom-tabs-box {
     height: 280px;
-    .tabs-box{
+    .tabs-box {
       position: relative !important;
     }
   }
@@ -929,7 +964,7 @@ import { message } from 'ant-design-vue';
   .label {
     max-width: 220px;
   }
-  
+
   .@{ventSpace}-input {
     width: 150px;
   }

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

@@ -2,7 +2,7 @@
   <div class="bg"
     style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="gasPump3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="gasPump3D" class="gasPump3D-bg" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
       <div>
         <div ref="elementContent" class="elementContent">
@@ -153,6 +153,11 @@ onUnmounted(() => {
 <style lang="less" scoped>
 @import '/@/design/vent/modal.less';
 @ventSpace: zxm;
+
+.gasPump3D-bg{
+  background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+}
 .scene-box{
   pointer-events: none;
   .history-group{
@@ -161,7 +166,8 @@ onUnmounted(() => {
       position: relative;
       background: #6195af1a;
       width: calc(100% + 10px);
-      top: 0px;
+      // top: 0px;//lxh
+      top: 72px;//lxh
       left: -10px;
       border: 1px solid #00fffd22;
       padding: 10px 0;

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

@@ -16,7 +16,7 @@
         </div>
       </div>
     </div>
-    <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+    <div id="damper3D"  style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
   </div>
   <div class="scene-box">
     <div class="top-box">
@@ -607,17 +607,22 @@ onUnmounted(() => {
 <style lang="less" scoped>
 @import '/@/design/vent/modal.less';
 
+
 .button-box {
   border: none !important;
   height: 34px !important;
+  background: url('../../../../assets/images/vent/wind-doorbtn.png') no-repeat;//lxh
+  background-size: 100% 100%;//lxh
 
-  &:hover {
-    background: linear-gradient(#2cd1ff55, #1eb0ff55) !important;
-  }
+
+  // &:hover {
+  //   // background: linear-gradient(#2cd1ff55, #1eb0ff55) !important; lxh
+  // }
 
   &::before {
     height: 27px !important;
-    background: linear-gradient(#1fa6cb, #127cb5) !important;
+    background: #000;
+    // background: linear-gradient(#1fa6cb, #127cb5) !important;  lxh
   }
 
   &::after {
@@ -629,6 +634,13 @@ onUnmounted(() => {
   height: 100%;
 }
 
+:deep .zxm-tabs-tab{
+  padding: 6px 12px !important;
+  background: rgba(49, 252, 239,.4);
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+
 ::-webkit-scrollbar-thumb {
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   background: #4288A444;

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

@@ -2,7 +2,7 @@
   <div class="bg"
     style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="grout3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="grout3D" class="grout3D-bg" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
       <div>
         <div ref="elementContent" class="elementContent">
@@ -144,6 +144,11 @@ onUnmounted(() => {
 <style lang="less" scoped>
 @import '/@/design/vent/modal.less';
 @ventSpace: zxm;
+
+.grout3D-bg{
+  background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+}
 .scene-box{
   pointer-events: none;
   .history-group{

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

@@ -69,7 +69,7 @@
         </div>
       </div>
     </div>
-    <div id="main3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="main3D" class="main3D-bg" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <FanEchrats id="fan-echarts" :chartData="selectData" style="position: absolute; z-index: -1" />
   </div>
 
@@ -1168,4 +1168,15 @@
   .@{ventSpace}-input {
     width: 150px;
   }
+
+  .main3D-bg {
+    background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+  }
+  :deep .zxm-tabs-tab {
+    padding: 6px 12px !important; //lxh
+    background: rgba(49, 252, 239, 0.4); //lxh
+    border-top-left-radius: 8px; //lxh
+    border-top-right-radius: 8px; //lxh
+  }
 </style>

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

@@ -84,6 +84,8 @@ function changeActive(activeValue) {
   height: 100%;
   display: flex;
   justify-content: center;
+  background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
   .bottom-btn-group {
     display: flex;
     position: fixed;

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

@@ -2,7 +2,7 @@
   <div class="bg"
     style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="obfurage3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="obfurage3D" class="obfurage3D-bg" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
       <div>
         <div ref="elementContent" class="elementContent">
@@ -155,6 +155,11 @@ onUnmounted(() => {
 <style lang="less" scoped>
 @import '/@/design/vent/modal.less';
 @ventSpace: zxm;
+
+.obfurage3D-bg{
+  background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+}
 .scene-box{
   pointer-events: none;
   .history-group{

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

@@ -6,64 +6,69 @@
           <GroupMonitorTable :dataSource="dataSource" :columnsType="`${deviceType}_monitor`" />
         </template>
         <template v-else-if="activeKey == '1' && deviceType">
-          <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :dataSource="dataSource"
-            design-scope="device_monitor" :isShowPagination="false" :isShowActionColumn="true" title="设备监测"
-            :form-config="deviceType == 'safetymonitor' ? formConfig : undefined" :scroll="scroll">
+          <MonitorTable
+            ref="monitorTable"
+            :columnsType="`${deviceType}_monitor`"
+            :dataSource="dataSource"
+            design-scope="device_monitor"
+            :isShowPagination="false"
+            :isShowActionColumn="true"
+            title="设备监测"
+            :form-config="deviceType == 'safetymonitor' ? formConfig : undefined"
+            :scroll="scroll"
+          >
             <template #filterCell="{ column, record }">
               <template v-if="deviceType.startsWith('gate')">
                 <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
-                  <a-tag
-                    v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-                    color="red">正在打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                    >正在打开</a-tag
+                  >
                   <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
                 </template>
                 <template v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
-                  <a-tag
-                    v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-                    color="red">正在关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
-                    color="default">关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0"
-                    color="default">打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                    >正在关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
+                    >关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
+                    >打开</a-tag
+                  >
                 </template>
                 <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
-                  <a-tag
-                    v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-                    color="red">正在打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
+                    >正在打开</a-tag
+                  >
                   <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
                 </template>
                 <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
-                  <a-tag
-                    v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-                    color="red">正在关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1"
-                    color="default">关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0"
-                    color="default">打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
+                    >正在关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
+                    >关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
+                    >打开</a-tag
+                  >
                 </template>
               </template>
               <template v-if="deviceType.startsWith('windrect')">
-                <a-tag v-if="column.dataIndex === 'sign'"
-                  :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'"> {{
-                    record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位'
-                  }}</a-tag>
+                <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
+                  {{ record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag
+                >
                 <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
-                  <a-tag v-if="record.isRun == -2 || record.isRun == -1"
-                    :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
-                      record.isRun == -2 ? '空闲' : '等待'
-                    }}</a-tag>
+                  <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
+                    record.isRun == -2 ? '空闲' : '等待'
+                  }}</a-tag>
                   <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
                   <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
                 </template>
               </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 === '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 ? 'default' : 'green'">{{
                 record.netStatus == 0 ? '断开' : '连接'
               }}</a-tag>
@@ -71,61 +76,176 @@
           </MonitorTable>
         </template>
         <!-- 图表 -->
-        <!-- <div style="width:100%;height:280px;margin: 20px 0px;">
-          <BarAndLine v-if="deviceType == 'windrect'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
-            :chartsColumns="chartsColumnsRect" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else-if="deviceType == 'fanlocal'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
-            :chartsColumns="chartsColumnsFan" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else-if="deviceType == 'fanmain'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
-            :chartsColumns="chartsColumnsMain" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else-if="deviceType == 'fiber'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
-            :chartsColumns="chartsColumnsFiber" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else-if="deviceType == 'obfurage'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
-            :chartsColumns="chartsColumnsObf" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else-if="deviceType == 'bundletube'" xAxisPropType="strname" :dataSource="dataSource"
-            height="100%" :chartsColumns="chartsColumnsBun" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else xAxisPropType="strname" :dataSource="dataSource" height="100%"
-            :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
-        </div> -->
-
+        <div style="width: 100%; height: 280px; margin: 20px 0px">
+          <BarAndLine
+            v-if="deviceType == 'windrect'"
+            xAxisPropType="strname"
+            :dataSource="dataSource"
+            height="100%"
+            :chartsColumns="chartsColumnsRect"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else-if="deviceType == 'fanlocal'"
+            xAxisPropType="strname"
+            :dataSource="dataSource"
+            height="100%"
+            :chartsColumns="chartsColumnsFan"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else-if="deviceType == 'fanmain'"
+            xAxisPropType="strname"
+            :dataSource="dataSource"
+            height="100%"
+            :chartsColumns="chartsColumnsMain"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else-if="deviceType == 'fiber'"
+            xAxisPropType="strname"
+            :dataSource="dataSource"
+            height="100%"
+            :chartsColumns="chartsColumnsFiber"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else-if="deviceType == 'obfurage'"
+            xAxisPropType="strname"
+            :dataSource="dataSource"
+            height="100%"
+            :chartsColumns="chartsColumnsObf"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else-if="deviceType == 'bundletube'"
+            xAxisPropType="strname"
+            :dataSource="dataSource"
+            height="100%"
+            :chartsColumns="chartsColumnsBun"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else
+            xAxisPropType="strname"
+            :dataSource="dataSource"
+            height="100%"
+            :chartsColumns="chartsColumnsreal"
+            chartsType=""
+            :option="echartsOption"
+          />
+        </div>
       </a-tab-pane>
       <a-tab-pane key="2" tab="历史数据">
         <div class="tab-item">
-          <HistoryTable ref="historyTable" v-if="activeKey == '2'" :columns-type="`${deviceType}`"
-            :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
-            designScope="device-history" :scroll="scroll" @change="changeHis" />
+          <HistoryTable
+            ref="historyTable"
+            v-if="activeKey == '2'"
+            :columns-type="`${deviceType}`"
+            :device-type="deviceType"
+            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
+            designScope="device-history"
+            :scroll="scroll"
+            @change="changeHis"
+          />
         </div>
         <!-- 图表 -->
-        <!-- <div v-if="alive" style="width:100%;height:280px;margin: 20px 0px;">
-
-          <BarAndLine v-if="deviceType == 'windrect'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
-            height="100%" :chartsColumns="chartsColumnsRect" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else-if="deviceType == 'fanlocal'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
-            height="100%" :chartsColumns="chartsColumnsFan" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else-if="deviceType == 'fanmain'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
-            height="100%" :chartsColumns="chartsColumnsMain" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else-if="deviceType == 'fiber'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
-            height="100%" :chartsColumns="chartsColumnsFiber" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else-if="deviceType == 'obfurage'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
-            height="100%" :chartsColumns="chartsColumnsObf" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else-if="deviceType == 'bundletube'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
-            height="100%" :chartsColumns="chartsColumnsBun" chartsType="" :option="echartsOption" />
-          <BarAndLine v-else xAxisPropType="gdevicename" :dataSource="dataSourceHis" height="100%"
-            :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
-        </div> -->
+        <div v-if="alive" style="width: 100%; height: 280px; margin: 20px 0px">
+          <BarAndLine
+            v-if="deviceType == 'windrect'"
+            xAxisPropType="gdevicename"
+            :dataSource="dataSourceHis"
+            height="100%"
+            :chartsColumns="chartsColumnsRect"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else-if="deviceType == 'fanlocal'"
+            xAxisPropType="gdevicename"
+            :dataSource="dataSourceHis"
+            height="100%"
+            :chartsColumns="chartsColumnsFan"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else-if="deviceType == 'fanmain'"
+            xAxisPropType="gdevicename"
+            :dataSource="dataSourceHis"
+            height="100%"
+            :chartsColumns="chartsColumnsMain"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else-if="deviceType == 'fiber'"
+            xAxisPropType="gdevicename"
+            :dataSource="dataSourceHis"
+            height="100%"
+            :chartsColumns="chartsColumnsFiber"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else-if="deviceType == 'obfurage'"
+            xAxisPropType="gdevicename"
+            :dataSource="dataSourceHis"
+            height="100%"
+            :chartsColumns="chartsColumnsObf"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else-if="deviceType == 'bundletube'"
+            xAxisPropType="gdevicename"
+            :dataSource="dataSourceHis"
+            height="100%"
+            :chartsColumns="chartsColumnsBun"
+            chartsType=""
+            :option="echartsOption"
+          />
+          <BarAndLine
+            v-else
+            xAxisPropType="gdevicename"
+            :dataSource="dataSourceHis"
+            height="100%"
+            :chartsColumns="chartsColumnsreal"
+            chartsType=""
+            :option="echartsOption"
+          />
+        </div>
       </a-tab-pane>
       <a-tab-pane key="3" tab="报警历史">
         <div class="tab-item">
-          <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" columns-type="alarm"
-            :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
-            :scroll="scroll" designScope="alarm-history" />
+          <AlarmHistoryTable
+            ref="alarmHistoryTable"
+            v-if="activeKey == '3'"
+            columns-type="alarm"
+            :device-type="deviceType"
+            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
+            :scroll="scroll"
+            designScope="alarm-history"
+          />
         </div>
       </a-tab-pane>
       <a-tab-pane key="4" tab="操作历史" v-if="deviceType !== 'safetymonitor'">
         <div class="tab-item">
-          <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" columns-type="operatorhistory"
-            :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
-            :scroll="scroll" designScope="operator-history" />
+          <HandlerHistoryTable
+            ref="handlerHistoryTable"
+            v-if="activeKey == '4'"
+            columns-type="operatorhistory"
+            :device-type="deviceType"
+            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
+            :scroll="scroll"
+            designScope="operator-history"
+          />
         </div>
       </a-tab-pane>
     </a-tabs>
@@ -133,385 +253,382 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, nextTick } from 'vue'
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { list, getDeviceList } from './safety.api'
-import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-import HistoryTable from '../comment/HistoryTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import MonitorTable from '../comment/MonitorTable.vue';
-import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
-import { Progress } from 'ant-design-vue';
-import { useRouter } from 'vue-router';
-import { formConfig, chartsColumnsreal, chartsColumnsRect, chartsColumnsFan, chartsColumnsMain, chartsColumnsFiber, chartsColumnsObf, chartsColumnsBun } from './safety.data'
-
-
-// import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-
-// const echartsOption = {
-//   grid: {
-//     top: '60px',
-//     left: '10px',
-//     right: '25px',
-//     bottom: '5%',
-//     containLabel: true,
-//   },
-//   toolbox: {
-//     feature: {},
-//   },
-// };
-// let alive = ref(true)
-
-type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
-
-const props = defineProps({
-  pageData: {
-    type: Object,
-    default: () => { }
+  import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, nextTick } from 'vue';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { list, getDeviceList } from './safety.api';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
+  import { Progress } from 'ant-design-vue';
+  import { useRouter } from 'vue-router';
+  import {
+    formConfig,
+    chartsColumnsreal,
+    chartsColumnsRect,
+    chartsColumnsFan,
+    chartsColumnsMain,
+    chartsColumnsFiber,
+    chartsColumnsObf,
+    chartsColumnsBun,
+  } from './safety.data';
+
+  // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+
+  const echartsOption = {
+    grid: {
+      top: '60px',
+      left: '10px',
+      right: '25px',
+      bottom: '5%',
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+  let alive = ref(true);
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+  const props = defineProps({
+    pageData: {
+      type: Object,
+      default: () => {},
+    },
+  });
+
+  const scroll = {
+    y: 360,
+  };
+  const monitorTable = ref();
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  const isRefresh = ref(true);
+
+  const activeKey = ref('1'); // tab key
+  const dataSource = shallowRef([]); // 实时监测数据
+  const deviceType = ref(''); // 监测设备类型
+
+  let dataSourceHis = shallowRef([]); //历史数据
+
+  //历史数据
+  async function changeHis(data) {
+    alive.value = false;
+    nextTick(() => {
+      dataSourceHis = data;
+      alive.value = true;
+    });
   }
-})
-
-const scroll = {
-  y: 360
-}
-const monitorTable = ref()
-const historyTable = ref()
-const alarmHistoryTable = ref()
-const handlerHistoryTable = ref()
 
-const isRefresh = ref(true)
-
-const activeKey = ref('1'); // tab key
-const dataSource = shallowRef([]) // 实时监测数据
-const deviceType = ref('') // 监测设备类型
-
-// let dataSourceHis = shallowRef([])//历史数据
-
-//历史数据
-async function changeHis(data) {
-  // alive.value = false
-  // nextTick(() => {
-  //   dataSourceHis = data
-  //   alive.value = true
-
-  // })
-
-}
-
-async function tabChange(activeKeyVal) {
-  activeKey.value = activeKeyVal;
-  if (activeKey.value != '1') {
-    if (timer != undefined) {
-      clearTimeout(timer);
-      timer = undefined;
+  async function tabChange(activeKeyVal) {
+    activeKey.value = activeKeyVal;
+    if (activeKey.value != '1') {
+      if (timer != undefined) {
+        clearTimeout(timer);
+        timer = undefined;
+      }
+    } else {
+      timer = null;
+      await getMonitor(true);
     }
-  } else {
-    timer = null
-    await getMonitor(true)
   }
-};
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (deviceType.value) {
-    if (timer) timer = null
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(async () => {
-        await getDataSource()
-        if (timer) {
-          getMonitor();
-        }
-      }, flag ? 0 : 1000);
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (deviceType.value) {
+      if (timer) timer = null;
+      if (Object.prototype.toString.call(timer) === '[object Null]') {
+        timer = setTimeout(
+          async () => {
+            await getDataSource();
+            if (timer) {
+              getMonitor();
+            }
+          },
+          flag ? 0 : 1000
+        );
+      }
     }
   }
-};
-
-async function getDataSource() {
-  const res = await list({ devicetype: deviceType.value, pagetype: 'normal' })
-  if (res.msgTxt.length > 0) {
-    dataSource.value = res.msgTxt[0].datalist || [];
-    dataSource.value.filter((data: any) => {
-      const readData = data.readData;
-      return Object.assign(data, readData);
-    });
-  } else {
-    dataSource.value = []
-  }
-}
-
-onMounted(async () => {
-  const { currentRoute } = useRouter();
-  deviceType.value = currentRoute.value.path.substring(currentRoute.value.path.lastIndexOf('/') + 1)
-  await getMonitor(true)
-})
 
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
+  async function getDataSource() {
+    const res = await list({ devicetype: deviceType.value, pagetype: 'normal' });
+    if (res.msgTxt.length > 0) {
+      dataSource.value = res.msgTxt[0].datalist || [];
+      dataSource.value.filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      });
+    } else {
+      dataSource.value = [];
+    }
   }
-  timer = undefined;
-})
 
+  onMounted(async () => {
+    const { currentRoute } = useRouter();
+    deviceType.value = currentRoute.value.path.substring(currentRoute.value.path.lastIndexOf('/') + 1);
+    await getMonitor(true);
+  });
+
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = undefined;
+  });
 </script>
 
-<style lang="less" scoped >
-@import '/@/design/vent/color.less';
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-.device-box {
-  width: 100%;
-  height: calc(100% - 100px);
-  padding-bottom: 10px;
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-
-  .tabs-box {
-    width: calc(100% - 12px) !important;
-    bottom: 3px !important;
-  }
+<style lang="less" scoped>
+  @import '/@/design/vent/color.less';
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
 
-  .device-button-group {
-    position: absolute;
-    top: -30px;
-    display: flex;
+  .device-box {
     width: 100%;
+    height: calc(100% - 100px);
+    padding-bottom: 10px;
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    
+
+    .tabs-box {
+      width: calc(100% - 12px) !important;
+      bottom: 3px !important;
+    }
 
-    .device-button {
-      height: 26px;
-      padding: 0 20px;
-      background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
-      clip-path: polygon(10px 0,
-          0 50%,
-          10px 100%,
-          100% 100%,
-          calc(100% - 10px) 50%,
-          100% 0);
+    .device-button-group {
+      position: absolute;
+      top: -30px;
       display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #FFF;
-      position: relative;
-      cursor: pointer;
+      width: 100%;
+
+      .device-button {
+        height: 26px;
+        padding: 0 20px;
+        background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
+        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        position: relative;
+        cursor: pointer;
+
+        &:nth-child(1) {
+          left: calc(-6px * 1);
+        }
 
-      &:nth-child(1) {
-        left: calc(-6px * 1);
-      }
+        &:nth-child(2) {
+          left: calc(-6px * 2);
+        }
 
-      &:nth-child(2) {
-        left: calc(-6px * 2);
-      }
+        &:nth-child(3) {
+          left: calc(-6px * 3);
+        }
 
-      &:nth-child(3) {
-        left: calc(-6px * 3);
-      }
+        &:nth-child(4) {
+          left: calc(-6px * 4);
+        }
 
-      &:nth-child(4) {
-        left: calc(-6px * 4);
-      }
+        &:nth-child(5) {
+          left: calc(-6px * 5);
+        }
 
-      &:nth-child(5) {
-        left: calc(-6px * 5);
-      }
+        &:nth-child(6) {
+          left: calc(-6px * 6);
+        }
 
-      &:nth-child(6) {
-        left: calc(-6px * 6);
-      }
+        &:nth-child(7) {
+          left: calc(-6px * 7);
+        }
 
-      &:nth-child(7) {
-        left: calc(-6px * 7);
-      }
+        &:nth-child(8) {
+          left: calc(-6px * 8);
+        }
 
-      &:nth-child(8) {
-        left: calc(-6px * 8);
-      }
+        &:nth-child(9) {
+          left: calc(-6px * 9);
+        }
 
-      &:nth-child(9) {
-        left: calc(-6px * 9);
-      }
+        &:nth-child(10) {
+          left: calc(-6px * 10);
+        }
 
-      &:nth-child(10) {
-        left: calc(-6px * 10);
-      }
+        &:nth-child(11) {
+          left: calc(-6px * 11);
+        }
 
-      &:nth-child(11) {
-        left: calc(-6px * 11);
-      }
+        &:nth-child(12) {
+          left: calc(-6px * 12);
+        }
 
-      &:nth-child(12) {
-        left: calc(-6px * 12);
-      }
+        &:nth-child(13) {
+          left: calc(-6px * 13);
+        }
 
-      &:nth-child(13) {
-        left: calc(-6px * 13);
-      }
+        &:nth-child(14) {
+          left: calc(-6px * 14);
+        }
 
-      &:nth-child(14) {
-        left: calc(-6px * 14);
-      }
+        &:nth-child(15) {
+          left: calc(-6px * 15);
+        }
 
-      &:nth-child(15) {
-        left: calc(-6px * 15);
+        &:first-child {
+          clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        }
       }
 
-      &:first-child {
-        clip-path: polygon(0 0,
-            10px 50%,
-            0 100%,
-            100% 100%,
-            calc(100% - 10px) 50%,
-            100% 0);
-      }
+      .device-active {
+        background: linear-gradient(45deg, #04e6fb, #0c5cab);
 
+        &::before {
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
+      }
     }
 
-    .device-active {
-      background: linear-gradient(45deg, #04e6fb, #0c5cab);
+    .enter-detail {
+      color: #fff;
+      cursor: pointer;
+      position: absolute;
+      right: 120px;
+      top: -6px;
+      padding: 5px;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      height: 33px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      padding: 5px 15px 5px 15px;
+      cursor: pointer;
+
+      &:hover {
+        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      }
 
       &::before {
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
+        width: calc(100% - 6px);
+        height: 27px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit;
+        /*important*/
+        background: linear-gradient(#1fa6cb, #127cb5);
       }
     }
   }
 
-  .enter-detail {
-    color: #fff;
-    cursor: pointer;
-    position: absolute;
-    right: 120px;
-    top: -6px;
-    padding: 5px;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    height: 33px !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    padding: 5px 15px 5px 15px;
-    cursor: pointer;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
+    border: 1px solid #44d3ff70;
+    border-radius: 2px;
+    -webkit-backdrop-filter: blur(8px);
+    box-shadow: 0 0 20px #44b4ff33 inset;
+    background-color: #ffffff11;
+    overflow-y: auto;
+  }
 
-    &:hover {
+  :deep(.@{ventSpace}-tabs-card) {
+    .@{ventSpace}-tabs-tab {
       background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      border-color: #74e9fe;
+      border-radius: 0%;
+
+      &:hover {
+        color: #64d5ff;
+      }
     }
 
-    &::before {
-      width: calc(100% - 6px);
-      height: 27px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit;
-      /*important*/
-      background: linear-gradient(#1fa6cb, #127cb5);
+    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+      color: aqua;
     }
-  }
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-  border: 1px solid #44d3ff70;
-  border-radius: 2px;
-  -webkit-backdrop-filter: blur(8px);
-  box-shadow: 0 0 20px #44b4ff33 inset;
-  background-color: #ffffff11;
-  overflow-y: auto;
-}
-
-:deep(.@{ventSpace}-tabs-card) {
-  .@{ventSpace}-tabs-tab {
-    background: linear-gradient(#2cd1ff55, #1eb0ff55);
-    border-color: #74e9fe;
-    border-radius: 0%;
-
-    &:hover {
-      color: #64d5ff;
+
+    .@{ventSpace}-tabs-nav::before {
+      border-color: #74e9fe;
     }
-  }
 
-  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-    color: aqua;
-  }
+    .@{ventSpace}-picker,
+    .@{ventSpace}-select-selector {
+      width: 100% !important;
+      background: #00000017 !important;
+      border: 1px solid @vent-form-item-boder !important;
 
-  .@{ventSpace}-tabs-nav::before {
-    border-color: #74e9fe;
-  }
+      input,
+      .@{ventSpace}-select-selection-item,
+      .@{ventSpace}-picker-suffix {
+        color: #fff !important;
+      }
 
-  .@{ventSpace}-picker,
-  .@{ventSpace}-select-selector {
-    width: 100% !important;
-    background: #00000017 !important;
-    border: 1px solid @vent-form-item-boder !important;
+      .@{ventSpace}-select-selection-placeholder {
+        color: #b7b7b7 !important;
+      }
+    }
 
-    input,
-    .@{ventSpace}-select-selection-item,
-    .@{ventSpace}-picker-suffix {
+    .@{ventSpace}-pagination-next,
+    .action,
+    .@{ventSpace}-select-arrow,
+    .@{ventSpace}-picker-separator {
       color: #fff !important;
     }
 
-    .@{ventSpace}-select-selection-placeholder {
-      color: #b7b7b7 !important;
+    .@{ventSpace}-table-cell-row-hover {
+      background: #264d8833 !important;
     }
-  }
-
-  .@{ventSpace}-pagination-next,
-  .action,
-  .@{ventSpace}-select-arrow,
-  .@{ventSpace}-picker-separator {
-    color: #fff !important;
-  }
-
-  .@{ventSpace}-table-cell-row-hover {
-    background: #264d8833 !important;
-  }
 
-  .@{ventSpace}-table-row-selected {
-    background: #00c0a311 !important;
+    .@{ventSpace}-table-row-selected {
+      background: #00c0a311 !important;
 
-    td {
-      background-color: #00000000 !important;
+      td {
+        background-color: #00000000 !important;
+      }
     }
-  }
 
-  .@{ventSpace}-table-thead {
-    // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-    background: #3d9dd45d !important;
-
-    &>tr>th,
-    .@{ventSpace}-table-column-title {
-      // color: #70f9fc !important;
-      border-color: #84f2ff !important;
-      border-left: none !important;
-      border-right: none !important;
-      padding: 7px;
+    .@{ventSpace}-table-thead {
+      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
+      background: #3d9dd45d !important;
+
+      & > tr > th,
+      .@{ventSpace}-table-column-title {
+        // color: #70f9fc !important;
+        border-color: #84f2ff !important;
+        border-left: none !important;
+        border-right: none !important;
+        padding: 7px;
+      }
     }
-  }
 
-  .@{ventSpace}-table-tbody {
-    tr>td {
-      padding: 12px;
+    .@{ventSpace}-table-tbody {
+      tr > td {
+        padding: 12px;
+      }
     }
-  }
-
-  .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
-    background-color: #26648855 !important;
-  }
 
-  .jeecg-basic-table-row__striped {
+    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
+      background-color: #26648855 !important;
+    }
 
-    // background: #97efff11 !important;
-    td {
-      background-color: #97efff11 !important;
+    .jeecg-basic-table-row__striped {
+      // background: #97efff11 !important;
+      td {
+        background-color: #97efff11 !important;
+      }
     }
   }
-}
-</style>
+</style>

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

@@ -290,6 +290,9 @@
     padding: 10px;
     z-index: 999;
     max-height: calc(100vh - 150px);
+    margin-top: 31px;//lxh
+     background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
     .@{ventSpace}-tabs {
       max-height: calc(100vh - 100px);
       .tab-item {
@@ -299,7 +302,8 @@
     }
     .title-text {
       position: absolute;
-      top: -14px;
+      // top: -14px;//lxh
+      top: -27px;//lxh
       left: 0;
       width: 100%;
       text-align: center;

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

@@ -1,349 +1,385 @@
 <template>
   <div
-    v-show="activeKey == 'monitor' && !loading" 
+    v-show="activeKey == 'monitor' && !loading"
     class="bg"
-    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden"
+  >
     <a-spin :spinning="loading" />
     <div
-        id="tunFace3DCSS"
-        class="threejs-Object-CSS"
-        v-show="!loading"
-        style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
-      >
+      id="tunFace3DCSS"
+      class="threejs-Object-CSS"
+      v-show="!loading"
+      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
+    >
     </div>
-    <div id="tunFace3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="tunFace3D" class="tunFace3D-bg" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
   </div>
   <div class="scene-box">
-    <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">掘进工作面智能管控</customHeader>
+    <customHeader
+      :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
+      :options="options"
+      @change="getSelectRow"
+      :optionValue="optionValue"
+      >掘进工作面智能管控</customHeader
+    >
     <div class="center-container">
       <template v-if="activeKey == 'monitor'">
         <div class="monitor-nav">
-          <template  v-for="(nav, index) in monitorNavData" :key="index">
-            <div class="nav-item" :class="{'nav-item-active': nav.isShow}" @click="changeMonitor(nav)">{{ nav.title }} </div>
-            <a-divider v-if="index !== monitorNav.length - 1" type="vertical" style="height: 10px; background-color: #00e1ff;" />
+          <template v-for="(nav, index) in monitorNavData" :key="index">
+            <div class="nav-item" :class="{ 'nav-item-active': nav.isShow }" @click="changeMonitor(nav)">{{ nav.title }} </div>
+            <a-divider v-if="index !== monitorNav.length - 1" type="vertical" style="height: 10px; background-color: #00e1ff" />
           </template>
         </div>
-        <tunFaceHome v-if="monitorActive == 0" :deviceId = 'optionValue' />
-        <tunFaceVentHome v-if="monitorActive == 1" :deviceId = 'optionValue' />
-        <tunFaceFireHome v-if="monitorActive == 2" :deviceId = 'optionValue'/>
-        <tunFaceDustHome v-if="monitorActive == 3" :deviceId = 'optionValue'/>
-        <tunFaceGasHome v-if="monitorActive == 4" :deviceId = 'optionValue'/>
+        <tunFaceHome v-if="monitorActive == 0" :deviceId="optionValue" />
+        <tunFaceVentHome v-if="monitorActive == 1" :deviceId="optionValue" />
+        <tunFaceFireHome v-if="monitorActive == 2" :deviceId="optionValue" />
+        <tunFaceDustHome v-if="monitorActive == 3" :deviceId="optionValue" />
+        <tunFaceGasHome v-if="monitorActive == 4" :deviceId="optionValue" />
       </template>
       <div v-else class="history-group">
         <div class="device-button-group" v-if="deviceList.length > 0 && activeKey !== 'faultRecord'">
-          <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }" v-for="(device, index) in deviceList" :key="index" @click="deviceChange(index)">{{ device.deviceName }}</div>
+          <div
+            class="device-button"
+            :class="{ 'device-active': deviceActive == device.deviceType }"
+            v-for="(device, index) in deviceList"
+            :key="index"
+            @click="deviceChange(index)"
+            >{{ device.deviceName }}</div
+          >
         </div>
         <div class="history-container">
-          <tunFaceHistory v-if="activeKey == 'monitor_history'" ref="historyTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType"/>
-          <tunFaceHandleHistory v-if="activeKey == 'handler_history'" ref="alarmHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType" />
-          <tunFaceAlarmHistory v-if="activeKey == 'faultRecord'" ref="handlerHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType"/>
+          <tunFaceHistory
+            v-if="activeKey == 'monitor_history'"
+            ref="historyTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+          <tunFaceHandleHistory
+            v-if="activeKey == 'handler_history'"
+            ref="alarmHistoryTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+          <tunFaceAlarmHistory
+            v-if="activeKey == 'faultRecord'"
+            ref="handlerHistoryTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
         </div>
       </div>
     </div>
-    <BottomMenu @change="changeActive"/>
+    <BottomMenu @change="changeActive" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
-import { mountedThree, destroy, setModelType, refreshModal } from './tunFace.threejs';
-import { systemList, getTableList } from './tunFace.api';
-import { monitorNav } from './tunFace.data'
-import customHeader from '/@/views/vent/comment/components/customHeader.vue';
-import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-import tunFaceVentHome from './components/tunFaceVentHome.vue';
-import tunFaceHome from './components/tunFaceHome.vue';
-import tunFaceFireHome from './components/tunFaceFireHome.vue'
-import tunFaceDustHome from './components/tunFaceDustHome.vue';
-import tunFaceGasHome from './components/tunFaceGasHome.vue';
-import tunFaceHistory from './components/tunFaceHistory.vue';
-import tunFaceHandleHistory from './components/tunFaceHandleHistory.vue';
-import tunFaceAlarmHistory from './components/tunFaceAlarmHistory.vue';
-import { useRouter } from 'vue-router';
-
-type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
-
-const { currentRoute } = useRouter();
-const activeKey = ref('monitor');
-const loading = ref(false);
-
-const monitorNavData = ref(monitorNav)
-const monitorActive = ref(0)
-
-const historyTable = ref()
-const alarmHistoryTable = ref()
-const handlerHistoryTable = ref()
-
-//关联设备
-const deviceList = ref<DeviceType[]>([])
-const deviceActive = ref('')
-const deviceType = ref('')
-
-const options = ref()
-// 默认初始是第一行
-const selectRowIndex = ref(0);
-const dataSource = ref([])
-
-const optionValue = ref('')
-
-// 监测数据
-const selectData = reactive({});
-
-function changeActive(activeValue) {
-  activeKey.value = activeValue
-  loading.value = true
-  if(activeKey.value === 'monitor'){
-    // refreshModal()
-    setModelType('tunFace')
-    setTimeout(() =>{
-      loading.value = false
-    }, 600)
-    
-  }else{
-    loading.value = false
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
+  import { mountedThree, destroy, setModelType, refreshModal } from './tunFace.threejs';
+  import { systemList, getTableList } from './tunFace.api';
+  import { monitorNav } from './tunFace.data';
+  import customHeader from '/@/views/vent/comment/components/customHeader.vue';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import tunFaceVentHome from './components/tunFaceVentHome.vue';
+  import tunFaceHome from './components/tunFaceHome.vue';
+  import tunFaceFireHome from './components/tunFaceFireHome.vue';
+  import tunFaceDustHome from './components/tunFaceDustHome.vue';
+  import tunFaceGasHome from './components/tunFaceGasHome.vue';
+  import tunFaceHistory from './components/tunFaceHistory.vue';
+  import tunFaceHandleHistory from './components/tunFaceHandleHistory.vue';
+  import tunFaceAlarmHistory from './components/tunFaceAlarmHistory.vue';
+  import { useRouter } from 'vue-router';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+  const { currentRoute } = useRouter();
+  const activeKey = ref('monitor');
+  const loading = ref(false);
+
+  const monitorNavData = ref(monitorNav);
+  const monitorActive = ref(0);
+
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  //关联设备
+  const deviceList = ref<DeviceType[]>([]);
+  const deviceActive = ref('');
+  const deviceType = ref('');
+
+  const options = ref();
+  // 默认初始是第一行
+  const selectRowIndex = ref(0);
+  const dataSource = ref([]);
+
+  const optionValue = ref('');
+
+  // 监测数据
+  const selectData = reactive({});
+
+  function changeActive(activeValue) {
+    activeKey.value = activeValue;
+    loading.value = true;
+    if (activeKey.value === 'monitor') {
+      // refreshModal()
+      setModelType('tunFace');
+      setTimeout(() => {
+        loading.value = false;
+      }, 600);
+    } else {
+      loading.value = false;
+    }
+  }
+
+  function deviceChange(index) {
+    deviceActive.value = deviceType.value = deviceList.value[index].deviceType;
   }
-}
-
-function deviceChange(index) {
-  deviceActive.value = deviceType.value = deviceList.value[index].deviceType
-}
-
-// 查询关联设备列表
-async function getDeviceList() {
-  const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
-  const result = res.msgTxt;
-  const deviceArr = <DeviceType[]>[]
-  result.forEach(item => {
-    const data = item['datalist'].filter((data: any) => {
-      const readData = data.readData;
-      return Object.assign(data, readData);
-    })
-    if (item.type != 'sys') {
-      deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
+
+  // 查询关联设备列表
+  async function getDeviceList() {
+    const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
+    const result = res.msgTxt;
+    const deviceArr = <DeviceType[]>[];
+    result.forEach((item) => {
+      const data = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      });
+      if (item.type != 'sys') {
+        deviceArr.unshift({
+          deviceType: item.type,
+          deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+          datalist: data,
+        });
+      }
+    });
+    deviceList.value = deviceArr;
+    deviceActive.value = deviceArr[0].deviceType;
+    deviceChange(0);
+  }
+
+  async function getSysDataSource() {
+    const res = await getTableList({ strtype: 'sys_surface_juejin', pagetype: 'normal' });
+    if (!options.value) {
+      // 初始时选择第一条数据
+      options.value = res.records || [];
+      if (!optionValue.value) {
+        optionValue.value = options.value[0]['id'];
+        getDeviceList();
+      }
     }
-  })
-  deviceList.value = deviceArr
-  deviceActive.value = deviceArr[0].deviceType
-  deviceChange(0)
-};
-
-async function getSysDataSource() {
-  const res = await getTableList({ strtype: 'sys_surface_juejin', pagetype: 'normal' });
-  if (!options.value) {
-    // 初始时选择第一条数据
-    options.value = res.records || [];
-    if (!optionValue.value) {
-      optionValue.value = options.value[0]['id']
-      getDeviceList()
+  }
+
+  // 切换检测数据
+  async function getSelectRow(deviceID) {
+    const currentData = dataSource.value.find((item: any) => {
+      return item.deviceID == deviceID;
+    });
+    if (currentData) {
+      optionValue.value = currentData['deviceID'];
+      Object.assign(selectData, currentData);
+      await getDeviceList();
     }
   }
-};
-
-// 切换检测数据
-async function getSelectRow(deviceID) {
-  const currentData = dataSource.value.find((item: any) => {
-    return item.deviceID == deviceID
-  })
-  if (currentData) {
-    optionValue.value = currentData['deviceID']
-    Object.assign(selectData, currentData)
-    await getDeviceList()
+
+  function changeMonitor(nav) {
+    nav.isShow = true;
+    monitorNav.forEach((item, index) => {
+      if (item.title !== nav.title) {
+        item.isShow = false;
+      } else {
+        monitorActive.value = index;
+      }
+    });
   }
-}
-
-function changeMonitor(nav) {
-  nav.isShow = true
-  monitorNav.forEach((item, index) => {
-    if(item.title !== nav.title) {
-      item.isShow = false
-    }else{
-      monitorActive.value = index
-    }
-  })
-}
-
-onBeforeMount(() => {
-
-});
-
-onMounted(async() => {
-  if (currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id']
-  await getSysDataSource()
-  await getDeviceList()
-  
-  loading.value = true;
-  mountedThree().then(async () => {
-    setModelType('tunFace')
-    loading.value = false;
-  });
-});
 
-onUnmounted(() => {
-  destroy();
-});
+  onBeforeMount(() => {});
+
+  onMounted(async () => {
+    if (currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id'];
+    await getSysDataSource();
+    await getDeviceList();
 
+    loading.value = true;
+    mountedThree().then(async () => {
+      setModelType('tunFace');
+      loading.value = false;
+    });
+  });
+
+  onUnmounted(() => {
+    destroy();
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-}
-
-.scene-box{
-  width: 100%;
-  height: 100%;
-}
-
-.monitor-nav{
-  width: 860px;
-  height: 42px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  // border: 1px solid #73e8fe;
-  color: #fff;
-  position: absolute;
-  top: 88px;
-  left: 50% !important;
-  transform: translateX(-50%) !important;
-  pointer-events: auto;
-  background: linear-gradient(45deg, #96c5ca38, #156c7d4a);
-  clip-path: polygon(
-    14px 0,
-    calc(100% - 14px) 0,
-    100% 14px,
-    100% calc(100% - 14px),
-    calc(100% - 14px) 100%,
-    14px 100%,
-    0 calc(100% - 14px),
-    0 14px
-  );
-  // background: url('/@/assets/images/vent/wokeFaca-nav.png') no-repeat !important;
-
-  .nav-item{
-    padding: 1px 10px;
-    cursor: pointer;
-    
-  }
-  .nav-item-active{
-    color: #00fbff;
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  .tunFace3D-bg {
+    background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
   }
-}
 
-.history-group{
-  padding: 0 20px;
-  .history-container{
-    position: relative;
-    background: #6195af1a;
-    width: calc(100% + 10px);
-    top: 0px;
-    left: -10px;
-    border: 1px solid #00fffd22;
-    padding: 10px 0;
-    box-shadow: 0 0 20px #44b4ff33 inset;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
   }
-}
-.device-button-group{
-  // margin: 0 20px;
-  display: flex;
-  pointer-events: auto;
-  position: relative;
-  margin-top: 90px;
-  &::after{
-    position:absolute;
-    content: '';
-    width: calc(100% + 10px);
-    height: 2px;
-    top: 30px;
-    left: -10px;
-    border-bottom: 1px solid #0efcff;
+
+  .scene-box {
+    width: 100%;
+    height: 100%;
   }
-  .device-button{
-    padding: 4px 15px;
-    position: relative;
+
+  .monitor-nav {
+    width: 860px;
+    height: 42px;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 14px;
-    
+    // border: 1px solid #73e8fe;
     color: #fff;
-    cursor: pointer;
-    margin: 0 3px;
-
-    &::before{
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      border: 1px solid #6176AF;
-      transform: skewX(-38deg);
-      background-color: rgba(0, 77, 103,85%);
-      z-index: -1;
+    position: absolute;
+    top: 88px;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    pointer-events: auto;
+    background: linear-gradient(45deg, #96c5ca38, #156c7d4a);
+    clip-path: polygon(
+      14px 0,
+      calc(100% - 14px) 0,
+      100% 14px,
+      100% calc(100% - 14px),
+      calc(100% - 14px) 100%,
+      14px 100%,
+      0 calc(100% - 14px),
+      0 14px
+    );
+    // background: url('/@/assets/images/vent/wokeFaca-nav.png') no-repeat !important;
+
+    .nav-item {
+      padding: 1px 10px;
+      cursor: pointer;
     }
-  }
-  .device-active{
-    // color: #0efcff;
-    &::before{
-      border-color: #0efcff;
-      box-shadow: 1px 1px 3px 1px #0efcff inset;
+    .nav-item-active {
+      color: #00fbff;
     }
   }
-}
 
-.input-box {
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
-
-  .input-title {
-    color: #73e8fe;
-    width: auto;
+  .history-group {
+    padding: 0 20px;
+    .history-container {
+      position: relative;
+      background: #6195af1a;
+      width: calc(100% + 10px);
+      top: 0px;
+      left: -10px;
+      border: 1px solid #00fffd22;
+      padding: 10px 0;
+      box-shadow: 0 0 20px #44b4ff33 inset;
+    }
   }
-
-  .@{ventSpace}-input-number {
-    border-color: #ffffff88 !important;
+  .device-button-group {
+    // margin: 0 20px;
+    display: flex;
+    pointer-events: auto;
+    position: relative;
+    margin-top: 90px;
+    &::after {
+      position: absolute;
+      content: '';
+      width: calc(100% + 10px);
+      height: 2px;
+      top: 30px;
+      left: -10px;
+      border-bottom: 1px solid #0efcff;
+    }
+    .device-button {
+      padding: 4px 15px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+
+      color: #fff;
+      cursor: pointer;
+      margin: 0 3px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border: 1px solid #6176af;
+        transform: skewX(-38deg);
+        background-color: rgba(0, 77, 103, 85%);
+        z-index: -1;
+      }
+    }
+    .device-active {
+      // color: #0efcff;
+      &::before {
+        border-color: #0efcff;
+        box-shadow: 1px 1px 3px 1px #0efcff inset;
+      }
+    }
   }
 
-  margin-right: 10px;
-}
-.monitor-msg-box {
-  width: 170px;
-  margin-top: 100px;
+  .input-box {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
 
-  .monitor-msg-container {
-    width: 170px;
-    height: 150px;
-    box-shadow: rgba(128, 128, 128, 0.3) 0px 0px 40px inset;
-    border: 1px solid rgba(128, 128, 128, 0.3);
-    background-color: transparent;
-  }
+    .input-title {
+      color: #73e8fe;
+      width: auto;
+    }
 
-  .errorColor {
-    box-shadow: #F73B2440 0px 0px 40px inset;
-    border: 1px solid #F73B2440;
-  }
+    .@{ventSpace}-input-number {
+      border-color: #ffffff88 !important;
+    }
 
-  .warningColor {
-    box-shadow: #FF9B1740 0px 0px 40px inset;
-    border: 1px solid #FF9B1740;
+    margin-right: 10px;
   }
+  .monitor-msg-box {
+    width: 170px;
+    margin-top: 100px;
+
+    .monitor-msg-container {
+      width: 170px;
+      height: 150px;
+      box-shadow: rgba(128, 128, 128, 0.3) 0px 0px 40px inset;
+      border: 1px solid rgba(128, 128, 128, 0.3);
+      background-color: transparent;
+    }
 
-  .monitor-item {
-    padding: 10px 10px 0px 10px;
-    color: #fff;
-    letter-spacing: 2px;
+    .errorColor {
+      box-shadow: #f73b2440 0px 0px 40px inset;
+      border: 1px solid #f73b2440;
+    }
 
-    .item-title {
-      color: #73e8fe;
+    .warningColor {
+      box-shadow: #ff9b1740 0px 0px 40px inset;
+      border: 1px solid #ff9b1740;
     }
 
-    .num {
-      color: #FFA500;
+    .monitor-item {
+      padding: 10px 10px 0px 10px;
+      color: #fff;
+      letter-spacing: 2px;
+
+      .item-title {
+        color: #73e8fe;
+      }
+
+      .num {
+        color: #ffa500;
+      }
     }
   }
-}
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="window3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="window3D" class="window3D-bg" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
       <div>
         <div ref="elementContent" class="elementContent">
@@ -27,9 +27,8 @@
           <div class="button-box" @click="setArea(2)">设定后窗面积</div>
         </div>
         <div v-if="selectData.nwindownum == 1" class="row">
-            <div class="button-box" @click="setArea(1)">设定风窗面积</div>
+          <div class="button-box" @click="setArea(1)">设定风窗面积</div>
         </div>
-        
       </div>
       <!-- <div class="top-right row">
         <div class="control-type row">
@@ -57,7 +56,7 @@
       {{ selectData.strname }}
     </div>
     <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll)">
-      <dv-border-box8 :dur="5"  :style="`padding: 5px; height: ${scroll.y + 100}px`" >
+      <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 100}px`">
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
           <a-tab-pane key="1" tab="实时监测">
             <MonitorTable
@@ -97,17 +96,23 @@
           </a-tab-pane>
           <a-tab-pane key="3" tab="历史数据">
             <div class="tab-item" v-if="activeKey === '3'">
-              <HistoryTable columns-type="window" device-type="window" :device-list-api="baseList" designScope="window-history" :scroll="scroll"/>
+              <HistoryTable columns-type="window" device-type="window" :device-list-api="baseList" designScope="window-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="报警历史">
             <div class="tab-item" v-if="activeKey === '4'">
-              <AlarmHistoryTable columns-type="alarm" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
+              <AlarmHistoryTable columns-type="alarm" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
           <a-tab-pane key="5" tab="操作历史">
             <div class="tab-item" v-if="activeKey === '5'">
-              <HandlerHistoryTable columns-type="operatorhistory" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
+              <HandlerHistoryTable
+                columns-type="operatorhistory"
+                device-type="window"
+                :device-list-api="baseList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
         </a-tabs>
@@ -136,17 +141,17 @@
   import { setDivHeight } from '/@/utils/event';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
   import { useRouter } from 'vue-router';
-  import { deviceCameraInit } from '/@/utils/ventutil.ts'
+  import { deviceCameraInit } from '/@/utils/ventutil.ts';
 
   const { currentRoute } = useRouter();
 
-  const MonitorDataTable = ref()
+  const MonitorDataTable = ref();
 
   const playerRef = ref();
-  let webRtcServer: any[] = []
+  let webRtcServer: any[] = [];
   const scroll = reactive({
-    y: 240
-  })
+    y: 240,
+  });
 
   const modalIsShow = ref<boolean>(false); // 是否显示模态框
   const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
@@ -173,12 +178,11 @@
 
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
-    if(activeKeyVal == 1){
+    if (activeKeyVal == 1) {
       nextTick(() => {
-        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
-      })
+        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+      });
     }
-    
   };
 
   const initData = {
@@ -196,7 +200,7 @@
     frontRearDifference: '-',
     rearPresentValue: '-',
     maxarea: 0,
-    nwindownum: 0
+    nwindownum: 0,
   };
 
   // 监测数据
@@ -206,16 +210,19 @@
   let timer: null | NodeJS.Timeout = null;
   const getMonitor = (flag?) => {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(async () => {
-        const data = await getDataSource();
-        Object.assign(selectData, data);
-        playAnimation(selectData, selectData.maxarea);
-        addMonitorText(selectData);
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      }, flag ? 0 : 1000);
+      timer = setTimeout(
+        async () => {
+          const data = await getDataSource();
+          Object.assign(selectData, data);
+          playAnimation(selectData, selectData.maxarea);
+          addMonitorText(selectData);
+          if (timer) {
+            timer = null;
+          }
+          getMonitor();
+        },
+        flag ? 0 : 1000
+      );
     }
   };
 
@@ -229,9 +236,9 @@
     if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
       // 初始打开页面
       if (currentRoute.value['query'] && currentRoute.value['query']['id']) {
-        MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']])
+        MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
       } else {
-        MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']])
+        MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
       }
     }
     const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
@@ -246,30 +253,31 @@
   };
 
   async function getCamera() {
-    const res = await cameraList({ deviceid: selectData['deviceID'] })
-    const cameras: [] = res.records || []
-    let cameraAddrs: any[] = [], cameraNames: string[] = [];
+    const res = await cameraList({ deviceid: selectData['deviceID'] });
+    const cameras: [] = res.records || [];
+    let cameraAddrs: any[] = [],
+      cameraNames: string[] = [];
     if (cameras.length > 0) {
-      cameras.forEach(item => {
+      cameras.forEach((item) => {
         if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
-          cameraNames.push(item['name'])
+          cameraNames.push(item['name']);
         } else {
-          cameraAddrs.push({ name: item['name'], addr: item['addr'] })
+          cameraAddrs.push({ name: item['name'], addr: item['addr'] });
         }
-      })
+      });
     }
     if (cameraNames.length > 0) {
       // 请求接口从装备院拿数据
-      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames })
+      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames });
       for (let i = 0; i < addrs.length; i++) {
-        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] })
+        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] });
       }
     }
-    const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer)
-    webRtcServer = obj.webRtcServerList
-    const playerDoms = obj.playerDoms
+    const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer);
+    webRtcServer = obj.webRtcServerList;
+    const playerDoms = obj.playerDoms;
     // 注意前后门适应需要对应 //[0] 后门 [1]前门
-    await initCameraCanvas(...playerDoms)
+    await initCameraCanvas(...playerDoms);
   }
 
   // 切换检测数据
@@ -286,7 +294,7 @@
       playAnimation(selectRow, baseData.maxarea, true);
       loading.value = false;
     });
-    await getCamera()
+    await getCamera();
   };
 
   // 判断前后窗的面积是否发生改变，如果改变则开启动画
@@ -296,9 +304,27 @@
     rotationParam.frontDeg1 = (90 / maxarea) * Number(data.forntArea) || 0;
     rotationParam.backDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
     if (isFirst) {
-      console.log('最大面积---->', maxarea, '前窗实际面积---->', selectData.forntArea, '后窗实际面积---->', selectData.rearArea, '计算的值---->', rotationParam);
+      console.log(
+        '最大面积---->',
+        maxarea,
+        '前窗实际面积---->',
+        selectData.forntArea,
+        '后窗实际面积---->',
+        selectData.rearArea,
+        '计算的值---->',
+        rotationParam
+      );
     }
-    console.log('最大面积---->', maxarea, '前窗实际面积---->', selectData.forntArea, '后窗实际面积---->', selectData.rearArea, '计算的值---->', rotationParam);
+    console.log(
+      '最大面积---->',
+      maxarea,
+      '前窗实际面积---->',
+      selectData.forntArea,
+      '后窗实际面积---->',
+      selectData.rearArea,
+      '计算的值---->',
+      rotationParam
+    );
     if (!rotationParam.frontDeg1 && !rotationParam.backDeg1) {
       // 当返回值有误时默认关闭
       play(rotationParam, 0);
@@ -318,13 +344,13 @@
 
   // 设置风窗面积
   const setArea = (flag) => {
-    if(selectData.nwindownum == 2){
+    if (selectData.nwindownum == 2) {
       modalTitle.value = flag === 1 ? '设定前窗面积' : '设定后窗面积';
-    }else {
-      modalTitle.value = '设定风窗面积'
+    } else {
+      modalTitle.value = '设定风窗面积';
     }
-    
-    modalType.value = flag+'';
+
+    modalType.value = flag + '';
     modalIsShow.value = true;
   };
 
@@ -343,7 +369,7 @@
     };
     deviceControlApi(data)
       .then(() => {
-        message.success('设置成功')
+        message.success('设置成功');
       })
       .finally(() => {
         handleCancel();
@@ -356,7 +382,6 @@
     modalType.value = '';
   };
 
-
   onBeforeMount(() => {
     // const sendVal = JSON.stringify({ pagetype: 'normal', devicetype: 'window', orgcode: '', ids: '', systemID: '' });
     // initWebSocket(sendVal);
@@ -365,13 +390,12 @@
 
   onMounted(() => {
     loading.value = true;
-    
+
     mountedThree().then(async () => {
       // await setModelType('singleWindow');
       getMonitor(true);
       loading.value = false;
       addMonitorText(selectData);
-      
     });
   });
   onUnmounted(() => {
@@ -381,9 +405,9 @@
       timer = undefined;
     }
     if (webRtcServer && webRtcServer.length > 0) {
-      webRtcServer.forEach(item => {
-        item.disconnect()
-      })
+      webRtcServer.forEach((item) => {
+        item.disconnect();
+      });
     }
   });
 </script>
@@ -394,6 +418,21 @@
   // :deep(.@{ventSpace}-tabs-tabpane-active) {
   //   height: 100%;
   // }
+  .button-box {
+    border: none !important; //lxh
+    background: url('../../../../assets/images/vent/wind-doorbtn.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+  }
+  .window3D-bg {
+    background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+  }
+  :deep .zxm-tabs-tab {
+    padding: 6px 12px !important; //lxh
+    background: rgba(49, 252, 239, 0.4); //lxh
+    border-top-left-radius: 8px; //lxh
+    border-top-right-radius: 8px; //lxh
+  }
   .input-box {
     display: flex;
     align-items: center;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="window3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="window3D" class="window3D-bg" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
   </div>
   <div class="scene-box">
     <div class="top-box">
@@ -766,4 +766,24 @@
       }
     }
   }
+  .button-box {
+    border: none !important; //lxh
+    background: url('../../../../assets/images/vent/wind-doorbtn.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+  }
+  .window3D-bg {
+    background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+  }
+  :deep .zxm-tabs-tab {
+    padding: 6px 12px !important; //lxh
+    background: rgba(49, 252, 239, 0.4); //lxh
+    border-top-left-radius: 8px; //lxh
+    border-top-right-radius: 8px; //lxh
+  }
+  :deep .zxm-btn-primary{
+    border: none;
+    background: url('../../../../assets/images/vent/wind-doorbtn.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+  }
 </style>

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

@@ -11,7 +11,7 @@
         style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
       >
     </div>
-    <div id="workFace3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="workFace3D" class="workFace3D-bg" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
   </div>
   <div class="scene-box">
     <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">回采工作面智能管控</customHeader>
@@ -202,6 +202,11 @@ onUnmounted(() => {
 @import '/@/design/vent/modal.less';
 @ventSpace: zxm;
 
+.workFace3D-bg{
+  background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    background-size: 100% 100%; //lxh
+}
+
 :deep(.@{ventSpace}-tabs-tabpane-active) {
   overflow: auto;
 }

src/views/vent/performance/fileDetail/index.vue

@@ -301,7 +301,7 @@
     padding: 15px;
     position: relative;
     margin-top: 100px;
-    background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
+    // background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;lxh
     background-size: contain;
 
     &::after {

src/views/vent/performance/fileIndex/index.vue

@@ -92,7 +92,7 @@ onMounted(() => {
   padding: 15px;
   position: relative;
   box-sizing: border-box;
-  background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
+  // background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;//lxh
 
   .main-container {
     width: 100%;