[Feat 0000] 公用模态框、工作面样式文件主题化

README.md

@@ -47,18 +47,92 @@
 下面是配合主题化使用的工具，输入页面的 css 样式，即可输出标准模板所需的资源
 
 ```javascript
-// 使用前请确保：1、所有需主题化的 url 引入请以 url(/@/xxx/xxx.yyy) 格式声明。2、除去注释。
-function themifyScript(str) {
-  const reg = /url\('?(\/[@|0-9|a-z|A-Z|\-|_]+)+.(png|svg)'?\)/g;
+// Please make sure these requires before using this function:
+// 1. replace all url patterns to patterns like `url(/@/xxx/xxx.xxx)`.
+// 2. remove all the in-line comments(//) or replace them to block comments(/** */).
+// 3. replace all rbg/rgba/hsa or any other css color functions to hex colors(#xxxxxx).
+function themifyScript(
+  str,
+  options = {
+    color: true,
+    gradient: true,
+    url: true,
+  }
+) {
+  const keySet = new Set();
   let strcopy = str;
-  let res = reg.exec(str);
   let varstr = '';
-  while (res) {
-    const [url, image] = res;
-    const varname = `--image-${image.replace('/', '')}`;
-    varstr += `${varname}: ${url};`;
-    strcopy = strcopy.replace(url, `var(${varname})`);
-    res = reg.exec(str);
+
+  // process url, extract all css url and replace them to css var and record them.
+  if (options.url) {
+    keySet.clear();
+    const regexp = /url\('?(\/[@|0-9|a-z|A-Z|\-|_]+)+.(png|svg)'?\)/g;
+    let res = regexp.exec(str);
+    while (res) {
+      const [url, image] = res;
+      const varname = `--image-${image.replace('/', '')}`;
+      if (!keySet.has(image)) {
+        keySet.add(image);
+        varstr += `${varname}: ${url};`;
+      }
+      strcopy = strcopy.replace(url, `var(${varname})`);
+      res = regexp.exec(str);
+    }
+  }
+
+  // process gradient, extract all css gradient and replace them to css var and record them.
+  if (options.gradient) {
+    keySet.clear();
+    let key = 0;
+    const regexp = /linear-gradient\([0-9|a-z|A-Z|#|,|\s|%|.]+\)/g;
+    let res = regexp.exec(str);
+    while (res) {
+      const [gradient] = res;
+      const varname = `--gradient-${key}`;
+      if (!keySet.has(gradient)) {
+        keySet.add(gradient);
+        varstr += `${varname}: ${gradient};`;
+      }
+      strcopy = strcopy.replace(gradient, `var(${varname})`);
+      res = regexp.exec(str);
+      key += 1;
+    }
+  }
+  if (options.gradient) {
+    keySet.clear();
+    let key = 0;
+    const regexp = /radial-gradient\([0-9|a-z|A-Z|#|,|\s|%|.]+\)/g;
+    let res = regexp.exec(str);
+    while (res) {
+      const [gradient] = res;
+      const varname = `--gradient-${key}`;
+      if (!keySet.has(gradient)) {
+        keySet.add(gradient);
+        varstr += `${varname}: ${gradient};`;
+      }
+      strcopy = strcopy.replace(gradient, `var(${varname})`);
+      res = regexp.exec(str);
+      key += 1;
+    }
+  }
+
+  // process color, extract all css colors and replace them to css var and record them.
+  if (options.color) {
+    keySet.clear();
+    let key = 0;
+    const regexp = /#[0-9|a-z|A-Z]{3,8}/g;
+    let res = regexp.exec(str);
+    while (res) {
+      const [color] = res;
+      const varname = `--color-${key}`;
+      if (!keySet.has(color)) {
+        keySet.add(color);
+        varstr += `${varname}: ${color};`;
+      }
+      strcopy = strcopy.replace(color, `var(${varname})`);
+      res = regexp.exec(str);
+      key += 1;
+    }
   }
 
   return [varstr, strcopy];

src/design/theme.less

@@ -1,6 +1,6 @@
 @import './themify/dark.less';
 @import './themify/light.less';
-@import './themify/vent1.less';
+@import './themify/default.less';
 @import './themify/deepblue.less';
 
 @ventSpace: zxm;
@@ -124,5 +124,5 @@ html[data-theme='light'] {
 // 下面的代码负责将主题相关的选择器、图片前缀等 less 变量声明
 @theme-dark: ~"html[data-theme='dark2']";
 @theme-light: ~"html[data-theme='light']";
-@theme-vent1: ~"html[data-theme='vent1']";
+@theme-default: ~"html";
 @theme-deepblue: ~"html[data-theme='deepblue']";

src/design/vent/modal.less

@@ -1,11 +1,32 @@
 @import '../theme.less';
+
+@{theme-default} {
+  --image-bg1: url('/@/assets/images/vent/bg1.png');
+  --image-device-detail-card: url('/@/assets/images/vent/device-detail-card.png');
+  --image-device-left-bg: url('/@/assets/images/vent/device-left-bg.png');
+  --image-tj: url('/@/assets/images/vent/tj.png');
+  --image-short-light: url('/@/assets/images/vent/short-light.png');
+  --image-bottom-tabs-l: url('/@/assets/images/vent/bottom-tabs-l.png');
+  --image-bottom-tabs-r: url('/@/assets/images/vent/bottom-tabs-r.png');
+}
+
+@{theme-deepblue} {
+  --image-device-detail-card: url('/@/assets/images/themify/deepblue/vent/device-detail-card.png');
+  --image-device-left-bg: url('/@/assets/images/themify/deepblue/vent/device-left-bg.png');
+  --image-tj: url('/@/assets/images/themify/deepblue/vent/tj.png');
+  --image-short-light: url('/@/assets/images/themify/deepblue/vent/short-light.png');
+  --image-bottom-tabs-l: url('/@/assets/images/themify/deepblue/vent/bottom-tabs-l.png');
+  --image-bottom-tabs-r: url('/@/assets/images/themify/deepblue/vent/bottom-tabs-r.png');
+}
+
 .bg {
   width: 100%;
   height: 100%;
-  background: url('/@/assets/images/vent/bg1.png') no-repeat;
+  background: var(--image-bg1) no-repeat;
   background-size: cover;
   //background-repeat: no-repeat;
   position: relative;
+
   &::before {
     content: '';
     width: 100%;
@@ -16,12 +37,14 @@
     top: 0;
     background: var(--vent-base-color);
   }
-  .elementTag{
+
+  .elementTag {
     pointer-events: none !important;
-    
   }
+
   .threejs-Object-CSS {
     pointer-events: none;
+
     .elementContent {
       // background-color: rgb(20 143 221 / 40%);
       // box-shadow: 0px 0px 12px rgb(0 128 255 / 75%);
@@ -32,6 +55,7 @@
       border: 2px solid rgb(153 176 195 / 55%);
       padding: 15px 20px 0px 20px;
       color: #efefef;
+
       &::before {
         content: '';
         display: block;
@@ -44,6 +68,7 @@
         transform-origin: 0 0;
         transform: rotate(30deg);
       }
+
       &::after {
         content: '';
         display: block;
@@ -58,6 +83,7 @@
         //animation: sign 1s infinite;
       }
     }
+
     .elementContent-r {
       &::before {
         content: '';
@@ -71,6 +97,7 @@
         transform-origin: 0 0;
         transform: rotate(150deg);
       }
+
       &::after {
         content: '';
         display: block;
@@ -85,20 +112,25 @@
         //animation: sign 1s infinite;
       }
     }
-    .value{
+
+    .value {
       color: #e90;
     }
+
     @keyframes sign {
       0% {
         background: #d35d00;
       }
+
       50% {
         background: #ffd8b9;
       }
+
       100% {
         background: #d35d00;
       }
     }
+
     .gas_unit_text {
       writing-mode: vertical-lr;
       /*垂直展示*/
@@ -108,11 +140,13 @@
       text-orientation: upright;
     }
   }
+
   .hot-point {
     .status {
       width: 30px;
       height: 30px;
       position: relative;
+
       .animate1,
       .animate2 {
         background: #fff;
@@ -124,15 +158,18 @@
         top: 0;
         z-index: 1;
       }
+
       .animate1 {
         -webkit-animation: circle 2s 0s ease-out infinite running;
         animation: circle 2s 0s ease-out infinite running;
       }
+
       .animate2 {
         -webkit-animation: circle 2s 1s ease-out infinite running;
         animation: circle 2s 1s ease-out infinite running;
       }
     }
+
     @keyframes circle {
       0% {
         -webkit-transform: scale(1);
@@ -146,6 +183,7 @@
         opacity: 0.1;
       }
     }
+
     .solid {
       width: 100%;
       height: 100%;
@@ -157,20 +195,23 @@
       border-radius: 100%;
     }
   }
+
   .device-detail {
     width: 100%;
     height: 100%;
     position: absolute;
     overflow: hidden;
+
     // pointer-events: none !important;
     .device-card {
       width: 329px;
       height: 247px;
-      background: url('/@/assets/images/vent/device-detail-card.png') no-repeat;
+      background: var(--image-device-detail-card) no-repeat;
       background-size: 100%;
       z-index: 99;
       position: relative;
       pointer-events: none;
+
       .title {
         color: var(--vent-font-color);
         font-family: 'douyuFont';
@@ -178,18 +219,21 @@
         font-size: 12px;
         padding-top: 15px;
       }
+
       .detail-box {
         display: flex;
         flex-direction: row;
         position: relative;
+
         .left-box {
           width: 164px;
           height: 152px;
-          background: url('/@/assets/images/vent/device-left-bg.png') no-repeat;
+          background: var(--image-device-left-bg) no-repeat;
           background-size: contain;
           position: relative;
           margin-top: 10px;
         }
+
         .right-box {
           width: 165px;
           height: 160px;
@@ -197,6 +241,7 @@
           padding: 10px 10px 10px 0;
           overflow-y: auto;
           pointer-events: auto;
+
           .detail-title {
             color: #ffd80a;
           }
@@ -228,11 +273,13 @@
     display: flex;
     align-items: center;
     pointer-events: auto;
+
     .row {
       color: var(--vent-font-color);
       display: flex;
       align-items: center;
     }
+
     .top-left {
       width: 400px;
       height: 100%;
@@ -241,15 +288,24 @@
       align-items: center;
       padding-left: 20px;
       position: relative;
-      background: url('/@/assets/images/vent/tj.png') no-repeat;
+      background: var(--image-tj) no-repeat;
       background-position: center right;
       background-size: auto 100%;
       cursor: pointer;
       padding-right: 80px;
-      color: #ffffff;
+      color: var(--vent-font-color);
       letter-spacing: 0.15em;
-      text-shadow: -1px -1px 1px #0084ff, 0px 1px 0 #28282822, 0px 2px 0 #28282822, 0px 3px 0 #28282822, 0px 4px 0 #28282822, 0px 5px 0 #28282822,
-        0px 6px 0 #28282822, 0px 7px 0 #28282822, 0px 8px 0 #28282822, 0px 9px 0 #28282822,
+      text-shadow:
+        -1px -1px 1px #0084ff,
+        0px 1px 0 #28282822,
+        0px 2px 0 #28282822,
+        0px 3px 0 #28282822,
+        0px 4px 0 #28282822,
+        0px 5px 0 #28282822,
+        0px 6px 0 #28282822,
+        0px 7px 0 #28282822,
+        0px 8px 0 #28282822,
+        0px 9px 0 #28282822,
         // 0px 10px 0 #28282822,
         // 0px 11px 0 #28282822,
         // 0px 12px 0 #181818,
@@ -257,7 +313,9 @@
         // 0px 14px 0 #141414,
         // 0px 15px 0 #121212,
         2px 20px 5px rgba(0, 0, 0, 0.3),
-        5px 23px 5px rgba(0, 0, 0, 0.1), 8px 27px 8px rgba(0, 0, 0, 0.2);
+        5px 23px 5px rgba(0, 0, 0, 0.1),
+        8px 27px 8px rgba(0, 0, 0, 0.2);
+
       &::after {
         width: calc(100% - 105px);
         height: 100%;
@@ -268,20 +326,25 @@
         border-bottom: 3px solid #5595ff;
       }
     }
+
     .top-center {
       flex: 1.5;
     }
+
     .top-right {
       flex: 1;
       justify-content: right;
+
       .run-type {
         margin: 0 10px;
       }
+
       .control-title {
         color: #73e8fe;
         // color: rgb(0, 255, 242);// 64D5FF
       }
     }
+
     :deep(.button-box) {
       position: relative;
       padding: 5px;
@@ -299,9 +362,11 @@
       color: var(--vent-font-color);
       padding: 0 15px 5px 15px;
       cursor: pointer;
+
       &:hover {
         background: var(--vent-modal-bg2);
       }
+
       &::before {
         width: calc(100% - 6px);
         height: 27px;
@@ -312,9 +377,11 @@
         left: 3px;
         bottom: 0;
         z-index: -1;
-        border-radius: inherit; /*important*/
+        border-radius: inherit;
+        /*important*/
         background: linear-gradient(#1fa6cb, #127cb5);
       }
+
       &::after {
         width: calc(100% + 32px);
         height: 10px;
@@ -325,32 +392,37 @@
         left: -16px;
         bottom: 0;
         z-index: -1;
-        border-radius: inherit; /*important*/
-        background: url('/@/assets/images/vent/short-light.png') no-repeat;
+        border-radius: inherit;
+        /*important*/
+        background: var(--image-short-light) no-repeat;
         background-position: center;
         background-size: 100%;
         z-index: 999;
       }
     }
+
     :deep(.button-disable) {
       border: 1px solid #66989e !important;
 
       &:hover {
         background: none !important;
       }
+
       &::before {
         background: linear-gradient(#1fa6cbcc, #127cb5cc) !important;
       }
     }
   }
+
   .title-text {
-    color: #ffffff;
+    color: var(--vent-font-color);
     font-size: 16px;
     text-align: center;
     line-height: 32px;
     position: relative;
     top: 47px;
   }
+
   .title-box {
     font-family: Geneva, sans-serif;
     width: 100%;
@@ -360,14 +432,27 @@
     font-size: 28px;
     color: #ff9900;
     letter-spacing: 0.15em;
-    text-shadow: -1px -1px 1px #efede3, 0px 1px 0 #28282822, 0px 2px 0 #28282822, 0px 3px 0 #28282822, 0px 4px 0 #28282822, 0px 5px 0 #28282822,
-      0px 6px 0 #28282822, 0px 7px 0 #28282822, 0px 8px 0 #28282822, 0px 9px 0 #28282822, 0px 10px 0 #28282822, 0px 11px 0 #28282822,
+    text-shadow:
+      -1px -1px 1px #efede3,
+      0px 1px 0 #28282822,
+      0px 2px 0 #28282822,
+      0px 3px 0 #28282822,
+      0px 4px 0 #28282822,
+      0px 5px 0 #28282822,
+      0px 6px 0 #28282822,
+      0px 7px 0 #28282822,
+      0px 8px 0 #28282822,
+      0px 9px 0 #28282822,
+      0px 10px 0 #28282822,
+      0px 11px 0 #28282822,
       // 0px 12px 0 #181818,
       // 0px 13px 0 #161616,
       // 0px 14px 0 #141414,
       // 0px 15px 0 #121212,
       2px 20px 5px rgba(0, 0, 0, 0.3),
-      5px 23px 5px rgba(0, 0, 0, 0.1), 8px 27px 8px rgba(0, 0, 0, 0.2);
+      5px 23px 5px rgba(0, 0, 0, 0.1),
+      8px 27px 8px rgba(0, 0, 0, 0.2);
+
     // 8px 28px 35px rgba(0, 0, 0, 0.9);
     &:before {
       content: attr(text);
@@ -377,6 +462,7 @@
       -webkit-mask: linear-gradient(to left, red, transparent);
     }
   }
+
   .bottom-tabs-box {
     position: fixed;
     width: 100%;
@@ -396,7 +482,7 @@
     //   top: -19px;
     //   background-image: linear-gradient(#00F7FF05, #00F7FF, #00F7FF05);
     //   background-position: center;
-    //   // background: url('/@/assets/images/vent/bottom-tabs-l.png') no-repeat;
+    //   // background: var(--image-bottom-tabs-l) no-repeat;
     //   // background-size: contain;
     // }
     // &:after {
@@ -408,11 +494,12 @@
     //   top: -19px;
     //   background-image: linear-gradient(#00F7FF05, #00F7FF, #00F7FF05);
     //   background-position: center;
-    //   // background: url('/@/assets/images/vent/bottom-tabs-r.png') no-repeat;
+    //   // background: var(--image-bottom-tabs-r) no-repeat;
     //   // background-size: contain;
     // }
-    .dv_border_8{
+    .dv_border_8 {
       position: relative;
+
       .enter-detail {
         color: var(--vent-font-color);
         cursor: pointer;
@@ -434,6 +521,7 @@
         right: 20px;
         top: 6px;
         z-index: 99;
+
         &:hover {
           background: var(--vent-modal-bg2);
         }
@@ -454,6 +542,7 @@
         }
       }
     }
+
     .tabs-button-group {
       position: absolute;
       display: flex;
@@ -462,10 +551,12 @@
       z-index: 999;
       align-items: center;
       pointer-events: auto;
+
       .tabs-button {
         margin-right: 10px;
       }
     }
+
     :deep(.tabs-box) {
       position: absolute;
       width: calc(100%);
@@ -479,13 +570,16 @@
       backdrop-filter: blur(18px);
       overflow-y: hidden;
       border-radius: 8px;
+
       .tabs-box {
         height: 100%;
       }
+
       .tab-item {
         height: 240px;
         color: var(--vent-font-color);
       }
+
       // .@{ventSpace}-tabs-content,
       // .vent-table {
       //   height: calc(100% - 10px);
@@ -496,30 +590,38 @@
       .@{ventSpace}-tabs-top > .@{ventSpace}-tabs-nav {
         margin: 0 !important;
       }
+
       .@{ventSpace}-table-title {
         padding: 0 !important;
       }
+
       .vent-table {
         .@{ventSpace}-table-column-title,
         .@{ventSpace}-table-thead > tr > th {
           color: var(--vent-table-action-link) !important;
         }
+
         .@{ventSpace}-progress-text {
           color: var(--vent-font-color) !important;
         }
       }
+
       .@{ventSpace}-tabs-nav {
         margin-bottom: 0px !important;
       }
+
       .@{ventSpace}-tabs-nav-wrap {
         padding-left: 10px !important;
       }
+
       .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
         color: var(--vent-tabs-action-link) !important;
       }
+
       .@{ventSpace}-tabs-ink-bar {
         background: var(--vent-tabs-action-link);
       }
+
       .@{ventSpace}-tabs-top > .@{ventSpace}-tabs-nav::before {
         border-color: #f0f0f022 !important;
       }
@@ -534,10 +636,12 @@
   border-radius: 6px;
   margin-right: 6px;
 }
+
 .open {
   border: 2px solid #133a56;
   background: #4ecb73;
 }
+
 // .gray {
 //   border: 2px solid #898fa144;
 //   background: #898fa1;
@@ -547,20 +651,24 @@
   background: #ff8888;
   animation: close 1s infinite;
 }
+
 @keyframes close {
   0% {
     border: 2px solid #ff8888;
     background: #ff3538;
   }
+
   50% {
     border: 2px solid #ff0000;
     background: #c90000;
   }
+
   100% {
     border: 2px solid #ff8888;
     background: #ff3538;
   }
 }
+
 .data-title {
   color: #eee;
 }
@@ -569,25 +677,29 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  
 }
+
 /* 模态框样式 */
 :deep(.modal-container) {
   min-height: 100px;
   padding: 20px;
+
   .label {
     margin-right: 15px;
     font-size: 15px;
     font-weight: 600;
     color: #70e0f7;
   }
+
   .warning-text {
     margin-left: 10px;
     font-size: 16px;
   }
+
   .input-box {
     margin-top: 20px;
   }
+
   .startSmoke-select {
     display: flex;
     margin: 15px 12px;
@@ -597,28 +709,33 @@
 :deep(.@{ventSpace}-table-thead) {
   // background: linear-gradient(#003f77 0%, #004a86aa 10%); //#003f77, #0a134c
   background-color: var(--vent-tabs-table-thead) !important;
+
   & > tr > th,
   .@{ventSpace}-table-column-title {
     // color: #70f9fc !important;
     color: var(--vent-table-action-link) !important;
     border-color: #91e9fe55 !important;
     border-left: none !important;
+
     // border-right: none !important;
     &:last-child {
       border-right: none !important;
     }
   }
 }
+
 :deep(.@{ventSpace}-table-tbody) {
   tr.@{ventSpace}-table-row-selected {
     td {
       background: #007cc422 !important;
     }
   }
+
   tr > td {
     background: #007cc405 !important;
   }
 }
+
 // .jeecg-basic-table-row__striped {
 //   // background: #97efff11 !important;
 //   td {
@@ -632,25 +749,30 @@
   border: none !important;
   margin-bottom: 0 !important;
 }
+
 :deep(.@{ventSpace}-picker),
 :deep(.@{ventSpace}-select-selector) {
   // width: 100% !important;
   // height: 30px !important;
   background: #00000017 !important;
   border: 1px solid @vent-form-item-border !important;
+
   input,
   .@{ventSpace}-select-selection-item,
   .@{ventSpace}-picker-suffix {
     color: var(--vent-font-color) !important;
   }
+
   .@{ventSpace}-select-selection-placeholder {
     color: #b7b7b7 !important;
   }
 }
+
 :deep(.@{ventSpace}-select-arrow),
 :deep(.@{ventSpace}-picker-separator) {
   color: var(--vent-font-color) !important;
 }
+
 :deep(.@{ventSpace}-picker-dropdown) {
   top: 0 !important;
   left: 0 !important;

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

@@ -1,373 +1,416 @@
 <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="workFace3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden; z-index: 1; top: 0"> </div>
     <div
-          id="workFace3DCSS"
-          class="threejs-Object-CSS"
-          v-show="monitorActive == 4"
-          style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
-        >
-      </div>
+      id="workFace3DCSS"
+      class="threejs-Object-CSS"
+      v-show="monitorActive == 4"
+      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
+    >
+    </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>
-        <workFaceHome v-if="monitorActive == 0" :deviceId = 'optionValue' />
-        <workFaceVentHome v-if="monitorActive == 1" :deviceId = 'optionValue' />
-        <workFaceFireHome v-if="monitorActive == 2" :deviceId = 'optionValue'/>
-        <workFaceDustHome v-if="monitorActive == 3" :deviceId = 'optionValue'/>
-        <workFaceGasHome v-if="monitorActive == 4" :deviceId = 'optionValue' :gas-unit-num="gasUnitNum"/>
+        <workFaceHome v-if="monitorActive == 0" :deviceId="optionValue" />
+        <workFaceVentHome v-if="monitorActive == 1" :deviceId="optionValue" />
+        <workFaceFireHome v-if="monitorActive == 2" :deviceId="optionValue" />
+        <workFaceDustHome v-if="monitorActive == 3" :deviceId="optionValue" />
+        <workFaceGasHome v-if="monitorActive == 4" :deviceId="optionValue" :gas-unit-num="gasUnitNum" />
       </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">
-          <workFaceHistory v-if="activeKey == 'monitor_history' && isRefresh" ref="historyTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType"/>
-          <workFaceHandleHistory v-if="activeKey == 'handler_history' && isRefresh" ref="alarmHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType" />
-          <workFaceAlarmHistory v-if="activeKey == 'faultRecord' && isRefresh" ref="handlerHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType"/>
+          <workFaceHistory
+            v-if="activeKey == 'monitor_history' && isRefresh"
+            ref="historyTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+          <workFaceHandleHistory
+            v-if="activeKey == 'handler_history' && isRefresh"
+            ref="alarmHistoryTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+          <workFaceAlarmHistory
+            v-if="activeKey == 'faultRecord' && isRefresh"
+            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, nextTick } from 'vue';
-import { mountedThree, destroy, setModelType, showOrHideGasPlane } from './wokeFace.threejs';
-import { getTableList, systemList } from './workFace.api';
-import { monitorNav } from './workFace.data'
-import customHeader from '/@/components/vent/customHeader.vue';
-import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-import workFaceVentHome from './components/workFaceVentHome.vue';
-import workFaceHome from './components/workFaceHome.vue';
-import workFaceFireHome from './components/workFaceFireHome.vue'
-import workFaceDustHome from './components/workFaceDustHome.vue';
-import workFaceGasHome from './components/workFaceGasHome.vue';
-import workFaceHistory from './components/workFaceHistory.vue';
-import workFaceHandleHistory from './components/workFaceHandleHistory.vue';
-import workFaceAlarmHistory from './components/workFaceAlarmHistory.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)
-
-let modalType = '' //模型类型
-
-const historyTable = ref()
-const alarmHistoryTable = ref()
-const handlerHistoryTable = ref()
-
-//关联设备
-const deviceList = ref<DeviceType[]>([])
-const deviceActive = ref('')
-const deviceType = ref('')
-
-const options = ref()
-const optionValue = ref('')
-const gasUnitNum = ref(0)
-
-const isRefresh = ref(true)
-
-function changeActive(activeValue) {
-  activeKey.value = activeValue
-  loading.value = true
-  if(activeKey.value === 'monitor'){
-    // gasUnitNum.value = Math.ceil(Math.random() * 10)
-    gasUnitNum.value = 4
-    setTimeout(() =>{
-      loading.value = false
-    }, 600)
-    
-  }else{
-    loading.value = false
-  }
-  nextTick(() => {
-    setModelType(modalType, gasUnitNum.value, monitorActive.value == 4 ? true : false)
-  })
-}
-
-function deviceChange(index) {
-  deviceActive.value = deviceType.value = deviceList.value[index].deviceType
-  isRefresh.value = false
-  nextTick(() => {
-    isRefresh.value = true
-  })
-}
-
-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_caimei', pagetype: 'normal' });
-  if (!options.value) {
-    // 初始时选择第一条数据
-    options.value = res.records || [];
-    if (!optionValue.value) {
-      optionValue.value = options.value[0]['id']
-      getDeviceList()
-      changeModalType(options.value[0])
+  import { onBeforeMount, ref, onMounted, onUnmounted, nextTick } from 'vue';
+  import { mountedThree, destroy, setModelType, showOrHideGasPlane } from './wokeFace.threejs';
+  import { getTableList, systemList } from './workFace.api';
+  import { monitorNav } from './workFace.data';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import workFaceVentHome from './components/workFaceVentHome.vue';
+  import workFaceHome from './components/workFaceHome.vue';
+  import workFaceFireHome from './components/workFaceFireHome.vue';
+  import workFaceDustHome from './components/workFaceDustHome.vue';
+  import workFaceGasHome from './components/workFaceGasHome.vue';
+  import workFaceHistory from './components/workFaceHistory.vue';
+  import workFaceHandleHistory from './components/workFaceHandleHistory.vue';
+  import workFaceAlarmHistory from './components/workFaceAlarmHistory.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);
+
+  let modalType = ''; //模型类型
+
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  //关联设备
+  const deviceList = ref<DeviceType[]>([]);
+  const deviceActive = ref('');
+  const deviceType = ref('');
+
+  const options = ref();
+  const optionValue = ref('');
+  const gasUnitNum = ref(0);
+
+  const isRefresh = ref(true);
+
+  function changeActive(activeValue) {
+    activeKey.value = activeValue;
+    loading.value = true;
+    if (activeKey.value === 'monitor') {
+      // gasUnitNum.value = Math.ceil(Math.random() * 10)
+      gasUnitNum.value = 4;
+      setTimeout(() => {
+        loading.value = false;
+      }, 600);
+    } else {
+      loading.value = false;
     }
+    nextTick(() => {
+      setModelType(modalType, gasUnitNum.value, monitorActive.value == 4 ? true : false);
+    });
   }
-};
-
-// 切换检测数据
-async function getSelectRow(deviceID) {
-
-  const currentData = options.value.find((item: any) => {
-    return item.id == deviceID
-  })
-  optionValue.value = deviceID
-  changeModalType(currentData)
-  getDeviceList()
-}
-
-// 获取模型类型
-function changeModalType(currentData) {
-  if (currentData['strsystype'] === 'sys_surface_caimei_modal_1') {
-    // 单进单回
-    modalType = 'workFace1'
-  } else if (currentData['strsystype'] === 'sys_surface_caimei_modal_3') {
-    // 双进单回
-    modalType = 'workFace3'
-  } else if (currentData['strsystype'] === 'sys_surface_caimei_modal_4') {
-    // 双进双回
-    modalType = 'workFace4'
+
+  function deviceChange(index) {
+    deviceActive.value = deviceType.value = deviceList.value[index].deviceType;
+    isRefresh.value = false;
+    nextTick(() => {
+      isRefresh.value = true;
+    });
   }
-  // gasUnitNum.value = Math.ceil(Math.random() * 4)
-  gasUnitNum.value = 4
-  setModelType(modalType, gasUnitNum.value, monitorActive.value == 4 ? true : false)
-}
-
-function changeMonitor(nav) {
-  nav.isShow = true
-  monitorNav.forEach((item, index) => {
-    if(item.title !== nav.title) {
-      item.isShow = false
-    }else{
-      monitorActive.value = index
-      if (monitorActive.value != 4) {
+
+  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_caimei', pagetype: 'normal' });
+    if (!options.value) {
+      // 初始时选择第一条数据
+      options.value = res.records || [];
+      if (!optionValue.value) {
+        optionValue.value = options.value[0]['id'];
+        getDeviceList();
+        changeModalType(options.value[0]);
       }
     }
-  })
-  showOrHideGasPlane(monitorActive.value == 4 ? true : false)
-}
-
-onBeforeMount(() => {
-
-});
-
-onMounted(async() => {
-  if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id']
-  await getSysDataSource()
-  loading.value = true;
-  mountedThree().then(async () => {
-    // gasUnitNum.value = Math.ceil(Math.random() * 10)
-    gasUnitNum.value = 4
-    loading.value = false;
-    nextTick(() => {
-      setModelType(modalType, gasUnitNum.value, monitorActive.value == 4 ? true : false)
-    })
-  });
-});
+  }
 
-onUnmounted(() => {
-  destroy();
-});
+  // 切换检测数据
+  async function getSelectRow(deviceID) {
+    const currentData = options.value.find((item: any) => {
+      return item.id == deviceID;
+    });
+    optionValue.value = deviceID;
+    changeModalType(currentData);
+    getDeviceList();
+  }
 
-</script>
-<style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  overflow: auto;
-}
-.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;
-    
+  // 获取模型类型
+  function changeModalType(currentData) {
+    if (currentData['strsystype'] === 'sys_surface_caimei_modal_1') {
+      // 单进单回
+      modalType = 'workFace1';
+    } else if (currentData['strsystype'] === 'sys_surface_caimei_modal_3') {
+      // 双进单回
+      modalType = 'workFace3';
+    } else if (currentData['strsystype'] === 'sys_surface_caimei_modal_4') {
+      // 双进双回
+      modalType = 'workFace4';
+    }
+    // gasUnitNum.value = Math.ceil(Math.random() * 4)
+    gasUnitNum.value = 4;
+    setModelType(modalType, gasUnitNum.value, monitorActive.value == 4 ? true : false);
   }
-  .nav-item-active{
-    color: #00fbff;
+
+  function changeMonitor(nav) {
+    nav.isShow = true;
+    monitorNav.forEach((item, index) => {
+      if (item.title !== nav.title) {
+        item.isShow = false;
+      } else {
+        monitorActive.value = index;
+        if (monitorActive.value != 4) {
+        }
+      }
+    });
+    showOrHideGasPlane(monitorActive.value == 4 ? true : false);
   }
-}
 
-.history-group{
-  padding: 0 20px;
-  margin-top: 90px;
-  .history-container{
-    position: relative;
-    background: #6195af1a;
-    width: calc(100% + 10px);
-    left: -10px;
-    border: 1px solid #00fffd22;
-    padding: 10px 0;
-    box-shadow: 0 0 20px #44b4ff33 inset;
+  onBeforeMount(() => {});
+
+  onMounted(async () => {
+    if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id'];
+    await getSysDataSource();
+    loading.value = true;
+    mountedThree().then(async () => {
+      // gasUnitNum.value = Math.ceil(Math.random() * 10)
+      gasUnitNum.value = 4;
+      loading.value = false;
+      nextTick(() => {
+        setModelType(modalType, gasUnitNum.value, monitorActive.value == 4 ? true : false);
+      });
+    });
+  });
+
+  onUnmounted(() => {
+    destroy();
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
   }
-}
-.device-button-group{
-  // margin: 0 20px;
-  display: flex;
-  pointer-events: auto;
-  position: relative;
-  &::after{
-    position:absolute;
-    content: '';
-    width: calc(100% + 10px);
-    height: 2px;
-    top: 30px;
-    left: -10px;
-    border-bottom: 1px solid #0efcff;
+  .scene-box {
+    --image-wokeFaca-nav: url('/@/assets/images/vent/wokeFaca-nav.png');
+    --gradient-0: linear-gradient(45deg, #96c5ca38, #156c7d4a);
+    --color-0: #73e8fe;
+    --color-2: #96c5ca38;
+    --color-3: #156c7d4a;
+    --color-5: #6195af1a;
+    --color-6: #00fffd22;
+    --color-7: #44b4ff33;
+    --color-10: #6176af;
+    --color-15: #ffffff88;
+    --color-16: #f73b2440;
+    --color-18: #ff9b1740;
+    --color-22: #ffa500;
+    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;
-    
-    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;
+    // border: 1px solid var(--color-0);
+    color: var(--vent-font-color);
+    position: absolute;
+    top: 88px;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    pointer-events: auto;
+    background: var(--gradient-0);
+    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: var(--image-wokeFaca-nav) 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: var(--vent-font-action-link);
     }
   }
-}
-
-.input-box {
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
 
-  .input-title {
-    color: #73e8fe;
-    width: auto;
+  .history-group {
+    padding: 0 20px;
+    margin-top: 90px;
+    .history-container {
+      position: relative;
+      background: var(--color-5);
+      width: calc(100% + 10px);
+      left: -10px;
+      border: 1px solid var(--color-6);
+      padding: 10px 0;
+      box-shadow: 0 0 20px var(--color-7) inset;
+    }
   }
-
-  .@{ventSpace}-input-number {
-    border-color: #ffffff88 !important;
+  .device-button-group {
+    // margin: 0 20px;
+    display: flex;
+    pointer-events: auto;
+    position: relative;
+    &::after {
+      position: absolute;
+      content: '';
+      width: calc(100% + 10px);
+      height: 2px;
+      top: 30px;
+      left: -10px;
+      border-bottom: 1px solid var(--vent-font-action-link);
+    }
+    .device-button {
+      padding: 4px 15px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+
+      color: var(--color-9);
+      cursor: pointer;
+      margin: 0 3px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border: 1px solid var(--color-10);
+        transform: skewX(-38deg);
+        background-color: rgba(0, 77, 103, 85%);
+        z-index: -1;
+      }
+    }
+    .device-active {
+      // color: var(--color-11);
+      &::before {
+        border-color: var(--color-12);
+        box-shadow: 1px 1px 3px 1px var(--color-13) 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: var(--color-14);
+      width: auto;
+    }
 
-  .errorColor {
-    box-shadow: #F73B2440 0px 0px 40px inset;
-    border: 1px solid #F73B2440;
-  }
+    .@{ventSpace}-input-number {
+      border-color: var(--color-15) !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: var(--color-16) 0px 0px 40px inset;
+      border: 1px solid var(--color-17);
+    }
 
-    .item-title {
-      color: #73e8fe;
+    .warningColor {
+      box-shadow: var(--color-18) 0px 0px 40px inset;
+      border: 1px solid var(--color-19);
     }
 
-    .num {
-      color: #FFA500;
+    .monitor-item {
+      padding: 10px 10px 0px 10px;
+      color: var(--color-20);
+      letter-spacing: 2px;
+
+      .item-title {
+        color: var(--color-21);
+      }
+
+      .num {
+        color: var(--color-22);
+      }
     }
   }
-}
 </style>