[Wip 0000] 6.0系统主题化

src/design/color.less

@@ -102,7 +102,7 @@ html {
 // =================================
 
 // Main text color
-@text-color-base: @text-color;
+@text-color-base: var(--vent-text-base);
 
 // Label color
 @text-color-call-out: #606266;

src/design/theme.less

@@ -79,7 +79,7 @@ html[data-theme='light'] {
 }
 
 // 下面的代码负责将 themify 文件夹下声明的 css 变量赋给 less 变量
-@themify-text-primary: var(--themify-text-primary);
+@vent-text-base: var(--vent-text-base);
 @vent-base-light-bg: var(--vent-base-light-bg);
 @vent-configurable-module-bg: var(--vent-configurable-module-bg);
 @vent-configurable-bg: var(--vent-configurable-bg);
@@ -89,8 +89,28 @@ html[data-theme='light'] {
 @vent-configurable-home-bg-img: var(--vent-configurable-home-bg-img);
 @vent-configurable-home-timeline: var(--vent-configurable-home-timeline);
 @vent-configurable-home-light-border: var(--vent-configurable-home-light-border);
+// ant组件相关的变量
+@vent-table-thead: var(--vent-table-thead);
+@vent-table-thead-border: var(--vent-table-thead-border);
+@vent-base-color: var(--vent-base-color);
+@vent-transparent: var(--vent-transparent);
+@vent-font-color: var(--vent-font-color);
+@vent-table-hover: var(--vent-table-hover);
+@vent-table-no-hover: var(--vent-table-no-hover);
+@vent-table-action-link: var(--vent-table-action-link);
+@vent-form-item-boder: var(--vent-form-item-boder);
 // vent/gas 模块下重要文本的颜色
 @vent-gas-primary-text: var(--vent-gas-primary-text);
+// vent/gas 模块下Tab相关的颜色
+@vent-gas-tab-bg: var(--vent-gas-tab-bg);
+@vent-gas-tab-bg-avtived: var(--vent-gas-tab-bg-avtived);
+@vent-gas-tab-border: var(--vent-gas-tab-border);
+// vent/gas 各模块的基准背景色
+@vent-gas-primary-bg: var(--vent-gas-primary-bg);
+@vent-gas-primary-trasparent-bg: var(--vent-gas-primary-trasparent-bg);
+@vent-device-manager-box-border: var(--vent-device-manager-box-border);
+@vent-device-manager-box-bg: var(--vent-device-manager-box-bg);
+@vent-configurable-dropdown: var(--vent-configurable-dropdown);
 
 // 下面的代码负责将主题相关的选择器、图片前缀等 less 变量声明
 @theme-dark: ~"html[data-theme='dark2']";

src/design/themify/dark.less

@@ -1,14 +1,35 @@
 html[data-theme='dark2'] {
-    --themify-text-primary: #ddd;
+    --vent-header-bg-color: linear-gradient(#005177, #0a344c);
+    --vent-btn-primary-hover-color: #389bd9;
+    --vent-btn-primary-focus-color: #1c638a99;
+    --vent-btn-primary-color: #1c638a;
+    --vent-btn-primary-border-color: #56b3c96b;
+
+    --vent-table-thead: #3d9dd45d;
+    --vent-table-thead-border: #91e9fe;
+    
+    --vent-base-color: #09172c;
+    --vent-transparent: #ffffff00;
+    --vent-font-color: #ffffff;
+    --vent-table-hover: #0dc3ff22;
+    --vent-table-no-hover: #00bfff10;
+    --vent-table-action-link: #00e7ff;
+    --vent-form-item-boder: #3ad8ff77;
+
+    --vent-text-base: #ddd;
     --vent-base-light-bg: #60f4ff;
     --vent-base-light-bg-opcity: #60f4ff55;
     --vent-configurable-bg: #09316a;
     --vent-configurable-module-bg: #3df6ff22;
     --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
+    --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
 
     --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
     --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
     --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
     --vent-configurable-home-light-border: #3df6ff;
     --vent-gas-primary-text: #00c8d9;
+    
+    --vent-device-manager-box-border: #44d3ff70;
+    --vent-device-manager-box-bg: #ffffff11;
 }

src/design/themify/deepblue.less

@@ -1,18 +1,43 @@
 html[data-theme='deepblue'] {
+    --vent-header-bg-color: linear-gradient(#0A84FF99, #0A84FF22);
+    --vent-btn-primary-hover-color: #2986e9;
+    --vent-btn-primary-focus-color: #0359b5;
+    --vent-btn-primary-color: #0963c1;
+    --vent-btn-primary-border-color: #3F506A;
+
+    --vent-table-thead: #172943;
+    --vent-table-thead-border: #3F506A;
+
     --vent-base-color: #021632;
-    --vent-header-bg-color: linear-gradient(#02132c, #021a3f);
+    --vent-transparent: #ffffff00;
+    --vent-font-color: #ffffff;
+    --vent-table-hover: #283851;
+    --vent-table-no-hover: #28385180;
+    --vent-table-action-link: #0a80fa;
+    --vent-form-item-boder: #3ad8ff77;
 
-    --themify-text-primary: #ddd;
+    --vent-text-base: #fff;
     --vent-base-light-bg: #8691a3;
     --vent-base-light-bg-opcity: #8691a355;
     --vent-configurable-bg: #02132c;
     --vent-configurable-module-bg: #0d2037;
     --vent-configurable-module-border-bd: linear-gradient(#3b4c65 0%, #3b4c65 60%, #000723);
+    --vent-configurable-dropdown: linear-gradient(to bottom, #7a8595, #072a40);
 
     --vent-gas-list-item-bg-img: linear-gradient(to right, #3d82be55, #3977e500);
     --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
     --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
-    --vent-configurable-home-light-border: #3df6ff;
-    --vent-gas-primary-text: #dfdfdf;
+    --vent-configurable-home-light-border: #fbfdff;
+    --vent-gas-primary-text: #ededed;
+
+    // vent/gas 模块下Tab相关的颜色
+    --vent-gas-tab-bg: #10427a;
+    --vent-gas-tab-bg-avtived: #166ab5;
+    --vent-gas-tab-border: #5590d8;
+    // vent/gas 各模块的基准背景色
+    --vent-gas-primary-bg: #1673bf;
+    --vent-gas-primary-trasparent-bg: #0091ff12;
 
+    --vent-device-manager-box-border: #3F506A50;
+    --vent-device-manager-box-bg: #aaaaaa11;
 }

src/design/themify/light.less

@@ -1,14 +1,35 @@
 html[data-theme='light'] {
-    --themify-text-primary: #333;
+    --vent-header-bg-color: linear-gradient(#005177, #0a344c);
+    --vent-btn-primary-hover-color: #389bd9;
+    --vent-btn-primary-focus-color: #1c638a99;
+    --vent-btn-primary-color: #1c638a;
+    --vent-btn-primary-border-color: #56b3c96b;
+
+    --vent-table-thead: #3d9dd45d;
+    --vent-table-thead-border: #91e9fe;
+    
+    --vent-base-color: #09172c;
+    --vent-transparent: #ffffff00;
+    --vent-font-color: #ffffff;
+    --vent-table-hover: #0dc3ff22;
+    --vent-table-no-hover: #00bfff10;
+    --vent-table-action-link: #00e7ff;
+    --vent-form-item-boder: #3ad8ff77;
+
+    --vent-text-base: #ddd;
     --vent-base-light-bg: #60f4ff;
     --vent-base-light-bg-opcity: #60f4ff55;
     --vent-configurable-bg: #09316a;
     --vent-configurable-module-bg: #3df6ff22;
     --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
+    --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
 
     --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
     --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
     --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
     --vent-configurable-home-light-border: #3df6ff;
     --vent-gas-primary-text: #00c8d9;
+    
+    --vent-device-manager-box-border: #44d3ff70;
+    --vent-device-manager-box-bg: #ffffff11;
 }

src/design/themify/vent1.less

@@ -1,14 +1,35 @@
 html[data-theme='vent1'] {
-    --themify-text-primary: #fff;
+    --vent-header-bg-color: linear-gradient(#005177, #0a344c);
+    --vent-btn-primary-hover-color: #389bd9;
+    --vent-btn-primary-focus-color: #1c638a99;
+    --vent-btn-primary-color: #1c638a;
+    --vent-btn-primary-border-color: #56b3c96b;
+
+    --vent-table-thead: #3d9dd45d;
+    --vent-table-thead-border: #91e9fe;
+    
+    --vent-base-color: #09172c;
+    --vent-transparent: #ffffff00;
+    --vent-font-color: #ffffff;
+    --vent-table-hover: #0dc3ff22;
+    --vent-table-no-hover: #00bfff10;
+    --vent-table-action-link: #00e7ff;
+    --vent-form-item-boder: #3ad8ff77;
+
+    --vent-text-base: #ddd;
     --vent-base-light-bg: #60f4ff;
     --vent-base-light-bg-opcity: #60f4ff55;
     --vent-configurable-bg: #09316a;
-    --vent-configurable-module-bg: #259ccf22;
+    --vent-configurable-module-bg: #3df6ff22;
     --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
+    --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
 
     --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
     --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
     --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
     --vent-configurable-home-light-border: #3df6ff;
     --vent-gas-primary-text: #00c8d9;
+    
+    --vent-device-manager-box-border: #44d3ff70;
+    --vent-device-manager-box-bg: #ffffff11;
 }

src/design/vent/antCss.less

@@ -167,18 +167,18 @@ tr.@{ventSpace}-table-expanded-row:hover > td {
     background-color: #ffffff00 !important;
   }
   .@{ventSpace}-modal-confirm-title {
-    color: #fff !important;
+    color: @vent-font-color !important;
   }
   .@{ventSpace}-form {
     label {
-      color: #fff;
+      color: @vent-font-color;
     }
     .anticon.@{ventSpace}-input-clear-icon,
     .anticon {
-      color: #fff !important;
+      color: @vent-font-color !important;
     }
     .@{ventSpace}-select-selector {
-      color: #fff;
+      color: @vent-font-color;
       background-color: #ffffff00 !important;
     }
     .@{ventSpace}-form-item-control-input-content {
@@ -186,12 +186,12 @@ tr.@{ventSpace}-table-expanded-row:hover > td {
         background-color: #ffffff00 !important;
       }
       .@{ventSpace}-input {
-        color: #fff;
+        color: @vent-font-color;
         background-color: #ffffff00 !important;
       }
       .@{ventSpace}-select-single.@{ventSpace}-select-show-arrow .@{ventSpace}-select-selection-item,
       .@{ventSpace}-select-single.@{ventSpace}-select-show-arrow .@{ventSpace}-select-selection-placeholder {
-        color: #fff;
+        color: @vent-font-color;
       }
     }
   }

src/design/vent/color.less

@@ -6,18 +6,4 @@
 // @vent-form-item-boder: #3ad8ff77;
 // @ventSpace: zxm;
 // @vent-base-color: #09172c;
-@vent-base-color: #297fff;
-@vent-transparent: #ffffff00;
-@vent-font-color: #ffffff;
-@vent-table-hover: #ffffff22;
-@vent-table-hover: #0dc3ff22;
-@vent-table-no-hover: #00bfff10;
-@vent-form-item-boder: #3ad8ff77;
-@ventSpace: zxm;
-// vent/gas 模块下Tab相关的颜色
-@vent-gas-tab-bg: #10427a;
-@vent-gas-tab-bg-avtived: #166ab5;
-@vent-gas-tab-border: #2cb6ff;
-// vent/gas 各模块的基准背景色
-@vent-gas-primary-bg: #0091ff;
-@vent-gas-primary-trasparent-bg: #0091ff12;
+@ventSpace: zxm;

src/design/vent/comment.less

@@ -1,3 +1,5 @@
+@import '../theme.less';
+
 /*公共*/
 .vent-flex-row {
   display: flex;
@@ -77,7 +79,7 @@
   padding: 0 10px
 }
 .table-action-link {
-  color: #00e7ff;
+  color: @vent-table-action-link;
   padding: 0 5px;
 }
 
@@ -143,7 +145,7 @@
   line-height: 14px;
   border: 1px solid #008000;
   border-radius: 10px;
-  color: #fff;
+  color: @vent-font-color;
   font-size: 20px;
   text-align: center;
   cursor: pointer;
@@ -160,7 +162,7 @@
   line-height: 14px;
   border: 1px solid #008000;
   border-radius: 10px;
-  color: #fff;
+  color: @vent-font-color;
   font-size: 20px;
   text-align: center;
   cursor: pointer;
@@ -189,7 +191,7 @@
     position: absolute;
     top: 25px;
     right: 35px;
-    color: #fff;
+    color: @vent-font-color;
     background-color: hsla(0, 0%, 50%, .5);
     border-radius: 2px;
     padding: 1px 5px;

src/design/vent/index.less

@@ -22,7 +22,7 @@
   }
 }
 .@{ventSpace}-btn-dangerous{
-  color: #fff !important;
+  color: @vent-font-color !important;
   border-color: #ed4c4c !important;
   background: #ed4c4c !important;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
@@ -34,14 +34,14 @@
 }
 
 .@{ventSpace}-btn-link {
-  color: #00e7ff !important;
+  color: @vent-table-action-link !important;
   &:hover,
   &:focus {
     background: none !important;
     border: none !important;
   }
   .anticon {
-    color: #fff !important;
+    color: @vent-font-color !important;
   }
 }
 
@@ -56,23 +56,23 @@
 
     .anticon.@{ventSpace}-input-clear-icon,
     .anticon {
-      color: #fff !important;
+      color: @vent-font-color !important;
     }
     .@{ventSpace}-select-selector {
-      color: #fff;
+      color: @vent-font-color;
       background-color: #ffffff00 !important;
     }
     .@{ventSpace}-form-item-control-input-content {
       .@{ventSpace}-input-affix-wrapper,
       .@{ventSpace}-input-number-handler-wrap {
-        color: #fff;
+        color: @vent-font-color;
         // background-color: #ffffff17 !important;
         border: 1px solid @vent-form-item-boder !important;
       }
       .@{ventSpace}-picker,
       .@{ventSpace}-select-selector {
         width: 100%;
-        color: #fff !important;
+        color: @vent-font-color !important;
         // background: #ffffff17 !important;
         border: 1px solid @vent-form-item-boder !important;
       }
@@ -80,7 +80,7 @@
     }
     .@{ventSpace}-select-multiple {
       .@{ventSpace}-select-selection-item-content {
-        color: #fff !important;
+        color: @vent-font-color !important;
       }
     }
     .@{ventSpace}-input,
@@ -91,7 +91,7 @@
     .@{ventSpace}-input-group-addon,
     .@{ventSpace}-picker,
     .@{ventSpace}-picker-suffix {
-      color: #fff !important;
+      color: @vent-font-color !important;
       background: #ffffff00 !important;
       border: none;
       &::placeholder {
@@ -113,7 +113,7 @@
     }
     .@{ventSpace}-select-arrow,
     .@{ventSpace}-picker-separator {
-      color: #fff !important;
+      color: @vent-font-color !important;
     }
 
     .@{ventSpace}-form-item {
@@ -134,12 +134,12 @@
     }
     .@{ventSpace}-btn-primary {
       .anticon {
-        color: #fff !important;
+        color: @vent-font-color !important;
       }
     }
     .@{ventSpace}-btn-link {
       .anticon {
-        color: #fff !important;
+        color: @vent-font-color !important;
       }
     }
     /** 下拉框 */
@@ -157,13 +157,13 @@
     .@{ventSpace}-picker-panel{
       border: 1px solid #ececec66;
       // background: #004362 !important;
-      color: #fff !important;
+      color: @vent-font-color !important;
     }
 
     .@{ventSpace}-select-tree {
       background: transparent !important;
       backdrop-filter: blur(50px) !important;
-      color: #fff !important;
+      color: @vent-font-color !important;
     }
 
     .@{ventSpace}-select-tree {
@@ -203,13 +203,13 @@
 //   }
 //   .ant-input-affix-wrapper,
 //   .ant-input-number-handler-wrap {
-//     color: #fff;
+//     color: @vent-font-color;
 //     background-color: #ffffff17 !important;
 //     border: 1px solid @vent-form-item-boder !important;
 //   }
 //   .ant-picker,
 //   .ant-select-selector {
-//     color: #fff !important;
+//     color: @vent-font-color !important;
 //     background: #ffffff17 !important;
 //     border: 1px solid @vent-form-item-boder !important;
 //   }
@@ -218,7 +218,7 @@
 //   .ant-input-number,
 //   .ant-select-selection-item,
 //   .ant-picker-suffix {
-//     color: #fff !important;
+//     color: @vent-font-color !important;
 //     background: #ffffff00 !important;
 //     border: none;
 //   }
@@ -227,7 +227,7 @@
 //   }
 //   .ant-select-arrow,
 //   .ant-picker-separator {
-//     color: #fff !important;
+//     color: @vent-font-color !important;
 //   }
 // }
 
@@ -250,20 +250,20 @@
     backdrop-filter: blur(20px);
     .@{ventSpace}-drawer-title,
     .@{ventSpace}-drawer-close {
-      color: #fff !important;
+      color: @vent-font-color !important;
     }
     .@{ventSpace}-drawer-title {
       .jeecg-basic-title {
-        color: #fff !important;
+        color: @vent-font-color !important;
       }
     }
     .@{ventSpace}-descriptions-bordered {
       .@{ventSpace}-descriptions-item-label {
-        color: #fff !important;
+        color: @vent-font-color !important;
         background-color: #ffffff22 !important;
       }
       .@{ventSpace}-descriptions-item-content {
-        color: #fff !important;
+        color: @vent-font-color !important;
       }
     }
   }
@@ -290,7 +290,7 @@
 }
 
 .@{ventSpace}-card {
-  border: 1px solid #44d3ff70 !important;
+  border: 1px solid @vent-device-manager-box-border !important;
   border-radius: 2px !important;
   -webkit-backdrop-filter: blur(8px) !important;
   backdrop-filter: blur(8px) !important;
@@ -336,11 +336,11 @@
   }
   .@{ventSpace}-descriptions-bordered {
     .@{ventSpace}-descriptions-item-label {
-      color: #fff !important;
+      color: @vent-font-color !important;
       background-color: #ffffff22 !important;
     }
     .@{ventSpace}-descriptions-item-content {
-      color: #fff !important;
+      color: @vent-font-color !important;
     }
 
     .@{ventSpace}-descriptions-row,
@@ -357,7 +357,7 @@
 .jeecg-tree {
   .jeecg-tree-header {
     .jeecg-basic-title {
-      color: #fff !important;
+      color: @vent-font-color !important;
     }
     .@{ventSpace}-input-affix-wrapper {
       background-color: @vent-transparent !important;
@@ -371,7 +371,7 @@
   height: calc(100% - 72px);
   padding-bottom: 10px;
   // border: 1px solid #447fff55;
-  border: 1px solid #44d3ff70;
+  border: 1px solid @vent-device-manager-box-border;
   border-radius: 2px;
   // background-color: #001d3055;
   -webkit-backdrop-filter: blur(8px);
@@ -381,7 +381,7 @@
   overflow-y: auto;
   // background-color: #00b3ff12;
   .@{ventSpace}-table-thead > tr > th {
-    color: #fff !important;
+    color: @vent-font-color !important;
     font-weight: 600;
   }
 }
@@ -410,12 +410,14 @@
 }
 .@{ventSpace}-table-thead {
   // background: linear-gradient(#003f77 0%, #004a86aa 10%) !important; //#003f77, #0a134c
-  background-color: #3d9dd45d !important;
+  // background-color: #3d9dd45d !important;
+  background-color: @vent-table-thead !important;
   & > tr > th,
   .@{ventSpace}-table-column-title {
     // color: #70f9fc !important;
-    color: #fff !important;
-    border-color: #91e9fe !important;
+    color: @vent-font-color !important;
+    // border-color: #91e9fe !important;
+    border-color: @vent-table-thead-border !important;
     border-left: none !important;
     // border-right: none !important;
     &:last-child {
@@ -431,7 +433,7 @@
 }
 
 .@{ventSpace}-empty {
-  color: #fff !important;
+  color: @vent-font-color !important;
 }
 
 .modal-container {

src/design/vent/modal.less

@@ -1,4 +1,4 @@
-@import './color.less';
+@import '../theme.less';
 .bg {
   width: 100%;
   height: 100%;

src/layouts/default/content/index.vue

@@ -93,7 +93,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   @prefix-cls: ~'@{namespace}-layout-content';
   @ventSpace: zxm;
 

src/layouts/default/header/components/user-dropdown/index.vue

@@ -233,6 +233,7 @@
     font-size: 12px;
     cursor: pointer;
     align-items: center;
+    color: @text-color-base;
 
     img {
       width: 24px;

src/views/sys/login/Login.vue

@@ -85,6 +85,7 @@
     }
   }
 
+  // 深蓝色主题特化的变量
   @{theme-deepblue} {
     .login-container {
       --image-top: url('/@/assets/images/themify/deepblue/login/top.png');
@@ -96,13 +97,16 @@
   }
 
   .login-container {
+    // 需要主题化的变量放在上面
     --image-top: url('/@/assets/images/vent/login/top.png');
     --image-icon: url('/@/assets/images/vent/login/icon.png');
     --image-down: url('/@/assets/images/vent/login/down.png');
     --image-bg: url('/@/assets/images/vent/login/bg.png');
     --container-bg: linear-gradient(to bottom, #000c37, #001e63);
+
+    // 下面是不需要主题化的变量，例如单色图标、中性颜色等
     --login-bg: linear-gradient(to bottom, #000c3766, #001e6366);
-    color: @themify-text-primary;
+    color: @vent-text-base;
     width: 100vw;
     height: 100%;
     background: var(--container-bg);

src/views/vent/comment/history/HistoryTable.vue

@@ -236,7 +236,7 @@
 </script>
 
 <style scoped lang="less">
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   :deep(.@{ventSpace}-table-body) {
     height: auto !important;

src/views/vent/deviceManager/comment/DeviceReportInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <BasicForm ref="FormRef" @register="registerForm"/>
+  <BasicForm ref="FormRef" @register="registerForm" />
   <div class="j-box-bottom-button offset-20" style="margin-top: 30px">
     <div class="j-box-bottom-button-float">
       <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
@@ -8,100 +8,99 @@
   </div>
 </template>
 <script lang="ts" setup>
+  import { onMounted, ref, defineEmits, onUnmounted, watch, PropType, nextTick, inject, onBeforeMount } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { FormSchema } from '/@/components/Form';
+  import { getFormSchemaColumns } from '/@/hooks/web/useWebColumns';
+  import { list as substationList } from '/@/views/vent/deviceManager/substationTabel/substation.api';
+  import { list, updateReportInfo, sysList, sysInput } from '../../monitorManager/comment/comment.api';
+  const deviceData = inject('formData') as any;
+  const emit = defineEmits(['close', 'register']);
+  const FormRef = ref();
+  const tabType = ref('');
 
-import { onMounted, ref, defineEmits, onUnmounted, watch, PropType, nextTick, inject, onBeforeMount } from 'vue';
-import { BasicForm, useForm } from '/@/components/Form/index';
-import { FormSchema } from '/@/components/Form';
-import { getFormSchemaColumns } from '/@/hooks/web/useWebColumns';
-import { list as substationList } from '/@/views/vent/deviceManager/substationTabel/substation.api';
-import {list, updateReportInfo, sysList, sysInput } from '../../monitorManager/comment/comment.api'
-const deviceData = inject('formData') as any;
-const emit = defineEmits(['close', 'register'])
-const FormRef = ref()
-const tabType = ref('')
+  const formSchema = ref<any[]>([]);
+  const formData = ref(deviceData);
+  const deviceTypeName = ref(deviceData.devicekind ? deviceData.devicekind : deviceData.strtype);
 
-const formSchema = ref<any[]>([])
-const formData = ref(deviceData)
-const deviceTypeName = ref(deviceData.devicekind ? deviceData.devicekind : deviceData.strtype)
-
-const arrToFormColumns = (tableHeaderColumns = [], devicetype) => {
-  const columnList: any[] = [];
-  tableHeaderColumns.forEach((item: any) => {
-    let columnsItem;
-    if (item.type == 1 || item.type == 10) {
-      columnsItem = {
-        label: item.des, //_dictText
-        field: item.monitorcode,
-        component: item.type == 1 ? 'Input' : item.type == 10 ? 'InputTextArea' : '',
-      };
-    } else {
-      if (item.type == 2 && item['monitorcode'] == 'nsubstationid') {
+  const arrToFormColumns = (tableHeaderColumns = [], devicetype) => {
+    const columnList: any[] = [];
+    tableHeaderColumns.forEach((item: any) => {
+      let columnsItem;
+      if (item.type == 1 || item.type == 10) {
         columnsItem = {
           label: item.des, //_dictText
           field: item.monitorcode,
-          component: 'ApiSelect',
-          componentProps: {
-            api: substationList,
-            labelField: 'strname',
-            valueField: 'id',
-          },
+          component: item.type == 1 ? 'Input' : item.type == 10 ? 'InputTextArea' : '',
         };
-      }
-      if (item.type == 3) {
-        columnsItem = {
-          label: item.des, //_dictText
-          field: item.monitorcode,
-          component: 'RadioGroup',
-          defaultValue: 1,
-          componentProps: () => {
-            return {
-              options: [
-                { label: '是', value: 1, key: '1' },
-                { label: '否', value: 0, key: '2' },
-              ],
+      } else {
+        if (item.type == 2 && item['monitorcode'] == 'nsubstationid') {
+          columnsItem = {
+            label: item.des, //_dictText
+            field: item.monitorcode,
+            component: 'ApiSelect',
+            componentProps: {
+              api: substationList,
+              labelField: 'strname',
+              valueField: 'id',
+            },
+          };
+        }
+        if (item.type == 3) {
+          columnsItem = {
+            label: item.des, //_dictText
+            field: item.monitorcode,
+            component: 'RadioGroup',
+            defaultValue: 1,
+            componentProps: () => {
+              return {
+                options: [
+                  { label: '是', value: 1, key: '1' },
+                  { label: '否', value: 0, key: '2' },
+                ],
+                stringToNumber: true,
+              };
+            },
+          };
+        }
+        if (item.type == 4) {
+          columnsItem = {
+            label: item.des, //_dictText
+            field: item.monitorcode,
+            component: 'JDictSelectTag',
+            componentProps: {
+              dictCode: item.dict,
+              placeholder: '请选择',
               stringToNumber: true,
-            };
-          },
-        };
+            },
+          };
+        }
       }
-      if (item.type == 4) {
-        columnsItem = {
-          label: item.des, //_dictText
-          field: item.monitorcode,
-          component: 'JDictSelectTag',
+      columnList.push(columnsItem);
+    });
+    formSchema.value = columnList;
+    if (tabType.value === 'deviceInfo') {
+      formSchema.value.unshift(
+        {
+          label: '设备id', //_dictText
+          field: 'id',
+          component: 'Input',
           componentProps: {
-            dictCode: item.dict,
-            placeholder: '请选择',
-            stringToNumber: true,
+            disabled: true,
+            show: false,
           },
-        };
-      }
-    }
-    columnList.push(columnsItem);
-  });
-  formSchema.value = columnList
-  if(tabType.value === 'deviceInfo'){
-    formSchema.value.unshift(
-      {
-        label: '设备id', //_dictText
-        field: 'id',
-        component: 'Input',
-        componentProps: {
-          disabled: true,
-          show: false
         },
-      },
-      {
-        label: '点表',
-        field: 'strtype',
-        component: 'JDictSelectTag',
-        componentProps: {
-          dictCode: `${devicetype.split('_')[0]}kind`,
-          placeholder: '请选择点表',
-        },
-      })
-      formSchema.value.push(
-      {
+        {
+          label: '点表',
+          field: 'strtype',
+          component: 'JDictSelectTag',
+          componentProps: {
+            dictCode: `${devicetype.split('_')[0]}kind`,
+            placeholder: '请选择点表',
+          },
+        }
+      );
+      formSchema.value.push({
         label: '备用分站',
         field: 'stationids',
         component: 'ApiSelect',
@@ -110,76 +109,68 @@ const arrToFormColumns = (tableHeaderColumns = [], devicetype) => {
           labelField: 'strname',
           valueField: 'id',
         },
-      },
-    )
-  }else{
-    formSchema.value.unshift(
-      {
+      });
+    } else {
+      formSchema.value.unshift({
         label: '设备id', //_dictText
         field: 'id',
         component: 'Input',
         componentProps: {
           disabled: true,
-          show: false
+          show: false,
         },
-      })
-  }
-};
+      });
+    }
+  };
 
-const [registerForm, { resetSchema, getFieldsValue, setFieldsValue, resetFields }] = useForm({
-  schemas: <FormSchema[]>formSchema.value,
-  showActionButtonGroup: false,
-});
+  const [registerForm, { resetSchema, getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: <FormSchema[]>formSchema.value,
+    showActionButtonGroup: false,
+  });
 
-function getColumns() {
-  let formSchemaArr = getFormSchemaColumns( `${deviceData.devicekind ? deviceData.devicekind : deviceData.strtype}_input`) || []
-  if (formSchemaArr && formSchemaArr.length < 1) {
-    const arr = deviceTypeName.value.split('_')
-    formSchemaArr = getFormSchemaColumns(arr[0] + '_input') || []
+  function getColumns() {
+    let formSchemaArr = getFormSchemaColumns(`${deviceData.devicekind ? deviceData.devicekind : deviceData.strtype}_input`) || [];
+    if (formSchemaArr && formSchemaArr.length < 1) {
+      const arr = deviceTypeName.value.split('_');
+      formSchemaArr = getFormSchemaColumns(arr[0] + '_input') || [];
+    }
+    arrToFormColumns(formSchemaArr, deviceTypeName.value);
+    resetSchema(formSchema.value);
   }
-  arrToFormColumns(formSchemaArr, deviceTypeName.value)
-  resetSchema(formSchema.value)
-} 
-
 
-async function onReset() {
-  await resetFields();
-  await setFieldsValue({ ...deviceData });
-}
+  async function onReset() {
+    await resetFields();
+    await setFieldsValue({ ...deviceData });
+  }
 
-async function handleSubmit() {
-  const data = await getFieldsValue()
-  if(!deviceData.devicekind) {
-    await sysInput(data)
-  }else{
-    await updateReportInfo(data)
+  async function handleSubmit() {
+    const data = await getFieldsValue();
+    if (!deviceData.devicekind) {
+      await sysInput(data);
+    } else {
+      await updateReportInfo(data);
+    }
   }
-  
-}
 
-onBeforeMount(async() => {
-  
-})
+  onBeforeMount(async () => {});
 
-onMounted(async () => {
-  getColumns()
-  let result;
-  debugger;
-  if(!deviceData.devicekind) {
-     result = await sysList({ id: deviceData.id })
-  }else{
-     result = await list({ id: deviceData.id })
-  }
-  formData.value = result['records'][0] || []
-  await setFieldsValue({
-    ...formData.value,
+  onMounted(async () => {
+    getColumns();
+    let result;
+    debugger;
+    if (!deviceData.devicekind) {
+      result = await sysList({ id: deviceData.id });
+    } else {
+      result = await list({ id: deviceData.id });
+    }
+    formData.value = result['records'][0] || [];
+    await setFieldsValue({
+      ...formData.value,
+    });
   });
-});
-onUnmounted(() => {
-
-});
+  onUnmounted(() => {});
 </script>
 <style scoped lang="less">
-@import '/@/design/vent/color.less';
-@import '/@/design/vent/modal.less';
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
 </style>

src/views/vent/gas/components/board/baseBoard.vue

@@ -34,7 +34,7 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   .board {
     background-image: url('@/assets/images/vent/custom-board.png');

src/views/vent/gas/components/board/categoryBoard.vue

@@ -38,7 +38,7 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   .board {
     background-image: url('@/assets/images/vent/gas/category-board-bg.png');

src/views/vent/gas/components/board/squareBoard.vue

@@ -34,7 +34,7 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   .board {
     background-image: url('/@/assets/images/vent/gas/square-border.png');

src/views/vent/gas/components/board/unitBoard.vue

@@ -37,7 +37,7 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   .board {
     background-image: url('@/assets/images/vent/gas/list-wrapper.png');

src/views/vent/gas/components/form/button.vue

@@ -12,7 +12,7 @@
 </script>
 
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
 
   .button {
     background-image: url('@/assets/images/vent/gas/button.png');

src/views/vent/gas/components/list/listItem.vue

@@ -84,7 +84,7 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   .list-item {
     height: 36px;

src/views/vent/gas/components/tab/baseTab.vue

@@ -30,7 +30,7 @@
 </script>
 
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
 
   .tabs {
     font-weight: bold;

src/views/vent/gas/gasPumpMonitor/components/monitorChart.vue

@@ -68,7 +68,7 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   .monitor-chart {
     margin-top: 100px;

src/views/vent/gas/gasPumpSetting/components/settingForm.vue

@@ -127,7 +127,7 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   .setting-form {
     padding: 0 20px;

src/views/vent/home/billboard/components/CommonTitle.vue

@@ -24,7 +24,7 @@
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   .common-title {
     height: 30px;

src/views/vent/home/billboard/components/DustRisk.vue

@@ -31,7 +31,7 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   @font-face {
     font-family: 'douyuFont';
     src: url(/@/assets/images/files/douyuFont.otf);

src/views/vent/home/billboard/components/LargeBoard.vue

@@ -26,7 +26,7 @@
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   @font-face {
     font-family: 'douyuFont';
     src: url('@/assets/font/douyuFont.otf');

src/views/vent/home/billboard/components/ListItem.vue

@@ -34,7 +34,7 @@
   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
 
   .my-list-item {
     height: 34px;

src/views/vent/home/billboard/components/MiniBoard.vue

@@ -26,7 +26,7 @@
   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
 
   .mini-board {
     height: 62px;

src/views/vent/home/billboard/components/Warning.vue

@@ -33,7 +33,7 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   @font-face {
     font-family: 'douyuFont';
     src: url(/@/assets/images/files/douyuFont.otf);

src/views/vent/home/configurable/components/ModuleDHZ.vue

@@ -0,0 +1,74 @@
+<template>
+  <!-- 常用模块 -->
+  <ventBox1 class="module-common" :style="style">
+    <template v-if="moduleName" #title>
+      <div :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">{{ moduleName }}</div>
+    </template>
+    <template #container>
+      <slot>
+        <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
+        <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+      </slot>
+    </template>
+  </ventBox1>
+</template>
+<script lang="ts" setup>
+  import Header from './header.vue';
+  import Content from './content.vue';
+  // import ModuleLeft from './original/moduleLeft.vue';
+  // import ModuleBottom from './original/moduleBottom.vue';
+  import { computed, ref } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { openWindow } from '/@/utils';
+  // import { ModuleProps } from '../types';
+
+  const props = defineProps<{
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
+    deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  defineEmits(['close', 'click']);
+
+  const { header } = props.moduleData;
+  const selectedData = ref();
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position + 'position: absolute;';
+  });
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  // function getModuleComponent(position) {
+  //   if (position === '中下') {
+  //     return ModuleBottom;
+  //   }
+  //   return ModuleLeft;
+  // }
+
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(to);
+  }
+</script>
+<style scoped>
+  .module-common .box1-center {
+    height: calc(100% - 70px);
+  }
+  :deep(.box1-center) {
+    height: calc(100% - 70px);
+  }
+  :deep(.box1-center > .box-container) {
+    height: 100%;
+    padding: 0 !important;
+    width: 100% !important;
+  }
+</style>

src/views/vent/home/configurable/components/MonitorCenter.vue

@@ -206,7 +206,7 @@
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   .monitor-center__primary_text {
     font-size: 20px;

src/views/vent/home/configurable/components/content.vue

@@ -297,7 +297,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
 
   .content {
     height: calc(100% - 30px);

src/views/vent/home/configurable/components/detail/ComplexList.vue

@@ -43,17 +43,17 @@
   //   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-    @import '@/design/vent/color.less';
+    @import '@/design/theme.less';
     @import '@/design/theme.less';
     /* Timeline 相关的样式 */
 
     @{theme-deepblue} {
       .list {
-        // --image-img-3: url(/@/assets/images/themify/deepblue/configurable/firehome/img-3.png);
-        // --image-img-7: url(/@/assets/images/themify/deepblue/configurable/firehome/img-7.png);
-        // --image-img-8: url(/@/assets/images/themify/deepblue/configurable/firehome/img-8.png);
-        // --image-img-9: url(/@/assets/images/themify/deepblue/configurable/firehome/img-9.png);
-        // --image-list_bg_1: url(/@/assets/images/themify/deepblue/configurable/dusthome/list_bg_1.png);
+        --image-img-3: url(/@/assets/images/themify/deepblue/configurable/firehome/img-3.png);
+        --image-img-7: url(/@/assets/images/themify/deepblue/configurable/firehome/img-7.png);
+        --image-img-8: url(/@/assets/images/themify/deepblue/configurable/firehome/img-8.png);
+        --image-img-9: url(/@/assets/images/themify/deepblue/configurable/firehome/img-9.png);
+        --image-list_bg_1: url(/@/assets/images/themify/deepblue/configurable/dusthome/list_bg_1.png);
       }
     }
 
@@ -400,7 +400,7 @@
       color: yellowgreen;
     }
     .list-item__value_blue {
-      color: #009bff;
+      color: @vent-table-action-link;
     }
     .list-item__value_white {
       color: white;

src/views/vent/home/configurable/components/detail/CustomGallery.vue

@@ -34,36 +34,36 @@
   //   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
   @import '@/design/theme.less';
   @{theme-deepblue} {
     .gallery {
-      // --image-gallery_center: url(/@/assets/images/themify/deepblue/configurable/gallery_center.png);
-      // --image-gallery_1: url(/@/assets/images/themify/deepblue/configurable/gallery_1.png);
-      // --image-deco_2: url(/@/assets/images/themify/deepblue/configurable/deco_2.png);
-      // --image-deco_3: url(/@/assets/images/themify/deepblue/configurable/deco_3.png);
-      // --image-deco_4: url(/@/assets/images/themify/deepblue/configurable/deco_4.png);
-      // --image-img-2: url(/@/assets/images/themify/deepblue/configurable/firehome/img-2.png);
-      // --image-img-1: url(/@/assets/images/themify/deepblue/configurable/firehome/img-1.png);
+      --image-gallery_center: url(/@/assets/images/themify/deepblue/configurable/gallery_center.png);
+      --image-gallery_1: url(/@/assets/images/themify/deepblue/configurable/gallery_1.png);
+      --image-deco_2: url(/@/assets/images/themify/deepblue/configurable/deco_2.png);
+      --image-deco_3: url(/@/assets/images/themify/deepblue/configurable/deco_3.png);
+      --image-deco_4: url(/@/assets/images/themify/deepblue/configurable/deco_4.png);
+      --image-img-2: url(/@/assets/images/themify/deepblue/configurable/firehome/img-2.png);
+      --image-img-1: url(/@/assets/images/themify/deepblue/configurable/firehome/img-1.png);
       // --image-img-8: url(/@/assets/images/themify/deepblue/configurable/dusthome/img-8.png);
       // --image-img-9: url(/@/assets/images/themify/deepblue/configurable/dusthome/img-9.png);
       // --image-sbzs: url(/@/assets/images/themify/deepblue/configurable/dusthome/sbzs.png);
       // --image-pwkqs: url(/@/assets/images/themify/deepblue/configurable/dusthome/pwkqs.png);
       // --image-lwsl: url(/@/assets/images/themify/deepblue/configurable/dusthome/lwsl.png);
       // --image-dwsl: url(/@/assets/images/themify/deepblue/configurable/dusthome/dwsl.png);
-      // --image-img-1: url(/@/assets/images/themify/deepblue/configurable/firehome/img-1.png);
-      // --image-img-7: url(/@/assets/images/themify/deepblue/configurable/dusthome/img-7.png);
-      // --image-img-4: url(/@/assets/images/themify/deepblue/configurable/firehome/img-4.png);
-      // --image-bottom1: url('/@/assets/images/themify/deepblue/alarm/bottom1.png');
-      // --image-center-bg: url('/@/assets/images/themify/deepblue/alarm/center-bg.png');
-      // --image-warning-icon-bg1: url(/@/assets/images/themify/deepblue/alarm/warning-icon-bg1.png);
-      // --image-warning-icon-bg-a1: url(/@/assets/images/themify/deepblue/alarm/warning-icon-bg-a1.png);
-      // --image-data-bg: url(/@/assets/images/themify/deepblue/alarm/data-bg.png);
-      // --image-icon-vent: url(/@/assets/images/themify/deepblue/alarm/icon-vent.svg);
-      // --image-icon-bg: url(/@/assets/images/themify/deepblue/alarm/icon-bg.png);
-      // --image-icon-device: url(/@/assets/images/themify/deepblue/alarm/icon-device.svg);
-      // --image-icon-dust: url(/@/assets/images/themify/deepblue/alarm/icon-dust.svg);
-      // --image-icon-gas: url(/@/assets/images/themify/deepblue/alarm/icon-gas.svg);
+      --image-img-1: url(/@/assets/images/themify/deepblue/configurable/firehome/img-1.png);
+      --image-img-7: url(/@/assets/images/themify/deepblue/configurable/dusthome/img-7.png);
+      --image-img-4: url(/@/assets/images/themify/deepblue/configurable/firehome/img-4.png);
+      --image-bottom1: url('/@/assets/images/themify/deepblue/alarm/bottom1.png');
+      --image-center-bg: url('/@/assets/images/themify/deepblue/alarm/center-bg.png');
+      --image-warning-icon-bg1: url(/@/assets/images/themify/deepblue/alarm/warning-icon-bg1.png);
+      --image-warning-icon-bg-a1: url(/@/assets/images/themify/deepblue/alarm/warning-icon-bg-a1.png);
+      --image-data-bg: url(/@/assets/images/themify/deepblue/alarm/data-bg.png);
+      --image-icon-vent: url(/@/assets/images/themify/deepblue/alarm/icon-vent.svg);
+      --image-icon-bg: url(/@/assets/images/themify/deepblue/alarm/icon-bg.png);
+      --image-icon-device: url(/@/assets/images/themify/deepblue/alarm/icon-device.svg);
+      --image-icon-dust: url(/@/assets/images/themify/deepblue/alarm/icon-dust.svg);
+      --image-icon-gas: url(/@/assets/images/themify/deepblue/alarm/icon-gas.svg);
       // --image-gallery_I_2: url(/@/assets/images/themify/deepblue/configurable/dusthome/gallery_I_2.png);
       // --image-gallery_I_1: url(/@/assets/images/themify/deepblue/configurable/dusthome/gallery_I_1.png);
     }
@@ -116,6 +116,7 @@
     height: 90px;
     position: absolute;
     text-align: center;
+    background-size: 100% 90px;
   }
   .gallery > .gallery-item_A:nth-child(2) {
     top: 20px;
@@ -187,6 +188,7 @@
     position: absolute;
     background-position: center;
     background-size: auto 100%;
+    z-index: -1;
   }
   .gallery_C {
     display: flex;
@@ -516,7 +518,7 @@
     color: yellowgreen;
   }
   .gallery-item__value_blue {
-    color: #009bff;
+    color: @vent-table-action-link;
   }
   .gallery-item__value_white {
     color: white;

src/views/vent/home/configurable/components/detail/CustomList.vue

@@ -42,23 +42,22 @@
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   /* Timeline 相关的样式 */
 
   @{theme-deepblue} {
     .list {
-      // --image-list_bg_default: url(/@/assets/images/themify/deepblue/configurable/list_bg_default.png);
-      // --image-triangle_icon: url(/@/assets/images/themify/deepblue/configurable/triangle_icon.png);
-      // --image-list_bg_b: url(/@/assets/images/themify/deepblue/configurable/list_bg_b.png);
-      // --image-deco_1: url(/@/assets/images/themify/deepblue/configurable/deco_1.png);
-      // --image-list_bg_c: url(/@/assets/images/themify/deepblue/configurable/list_bg_c.png);
-      // --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/configurable/list_bg_defflip.png);
-      // --image-list_bg_d: url(/@/assets/images/themify/deepblue/configurable/list_bg_d.png);
-      // --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/configurable/list_bg_defflip.png);
-      // --image-list_bg_e: url(/@/assets/images/themify/deepblue/configurable/list_bg_e.png);
-      // --image-list: url(/@/assets/images/themify/deepblue/configurable/firehome/list.png);
-      // --image-list_bg_h: url(/@/assets/images/themify/deepblue/configurable/list_bg_h.png);
-      // --image-list_bg_i: url('/@/assets/images/themify/deepblue/configurable/list_bg_i.png');
+      --image-list_bg_default: url(/@/assets/images/themify/deepblue/configurable/list_bg_default.png);
+      --image-triangle_icon: url(/@/assets/images/themify/deepblue/configurable/triangle_icon.png);
+      --image-list_bg_b: url(/@/assets/images/themify/deepblue/configurable/list_bg_b.png);
+      --image-deco_1: url(/@/assets/images/themify/deepblue/configurable/deco_1.png);
+      --image-list_bg_c: url(/@/assets/images/themify/deepblue/configurable/list_bg_c.png);
+      --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/configurable/list_bg_defflip.png);
+      --image-list_bg_d: url(/@/assets/images/themify/deepblue/configurable/list_bg_d.png);
+      --image-list_bg_e: url(/@/assets/images/themify/deepblue/configurable/list_bg_e.png);
+      --image-list: url(/@/assets/images/themify/deepblue/configurable/firehome/list.png);
+      --image-list_bg_h: url(/@/assets/images/themify/deepblue/configurable/list_bg_h.png);
+      --image-list_bg_i: url('/@/assets/images/themify/deepblue/configurable/list_bg_i.png');
     }
   }
 
@@ -70,7 +69,6 @@
     --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
     --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
     --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
-    --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
     --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
     --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
     --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
@@ -347,7 +345,7 @@
     color: yellowgreen;
   }
   .list-item__value_blue {
-    color: #009bff;
+    color: @vent-table-action-link;
   }
   .list-item__value_white {
     color: white;

src/views/vent/home/configurable/components/detail/CustomTable.vue

@@ -46,7 +46,7 @@
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
 
   @font-face {
     font-family: 'douyuFont';
@@ -55,11 +55,9 @@
 
   @{theme-deepblue} {
     .table__content {
-      // --image-content-label: url(/@/assets/images/themify/deepblue/company/content-label.png);
-      // --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
-      // --image-list-head: url('/@/assets/images/themify/deepblue/configurable/firehome/list-head.png');
-      // --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
-      // --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
+      --image-content-label: url(/@/assets/images/themify/deepblue/company/content-label.png);
+      --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
+      --image-list-head: url('/@/assets/images/themify/deepblue/configurable/firehome/list-head.png');
     }
   }
 
@@ -67,8 +65,6 @@
     --image-content-label: url(/@/assets/images/company/content-label.png);
     --image-content-text: url('/@/assets/images/company/content-text.png');
     --image-list-head: url('/@/assets/images/home-container/configurable/firehome/list-head.png');
-    --image-content-text: url('/@/assets/images/company/content-text.png');
-    --image-content-text: url('/@/assets/images/company/content-text.png');
     height: 100%;
     box-sizing: border-box;
     display: flex;

src/views/vent/home/configurable/components/detail/GalleryList.vue

@@ -43,7 +43,7 @@
   //   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
 
   .complex-list__gallery_A {
     // width: 200px;

src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -64,25 +64,21 @@
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   @{theme-deepblue} {
     .mini-board {
-      // --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
-      // --image-value-bg: url('/@/assets/images/themify/deepblue/value-bg.png');
-      // --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent-param-bg.png');
-      // --image-mini-board-1: url('/@/assets/images/themify/deepblue/home/mini-board-1.png');
-      // --image-board_bg_1: url('/@/assets/images/themify/deepblue/configurable/board_bg_1.png');
-      // --image-miehuo: url('/@/assets/images/themify/deepblue/configurable/firehome/miehuo.png');
-      // --image-value-bg-2: url('/@/assets/images/themify/deepblue/value-bg-2.png');
-      // --image-board_bg_3: url('/@/assets/images/themify/deepblue/configurable/board_bg_3.png');
-      // --image-hycd: url(/@/assets/images/themify/deepblue/configurable/dusthome/hycd.png);
-      // --image-dyfl: url(/@/assets/images/themify/deepblue/configurable/dusthome/dyfl.png);
-      // --image-jdjl: url(/@/assets/images/themify/deepblue/configurable/dusthome/jdjl.png);
-      // --image-board_bg_3: url('/@/assets/images/themify/deepblue/configurable/board_bg_3.png');
-      // --image-board_bg_2: url('/@/assets/images/themify/deepblue/configurable/board_bg_2.png');
-      // --image-board_bg_5: url('/@/assets/images/themify/deepblue/configurable/board_bg_5.png');
-      // --image-board_bg_4: url('/@/assets/images/themify/deepblue/configurable/board_bg_4.png');
+      --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+      --image-value-bg: url('/@/assets/images/themify/deepblue/value-bg.png');
+      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent-param-bg.png');
+      --image-mini-board-1: url('/@/assets/images/themify/deepblue/home/mini-board-1.png');
+      --image-board_bg_1: url('/@/assets/images/themify/deepblue/configurable/board_bg_1.png');
+      --image-miehuo: url('/@/assets/images/themify/deepblue/configurable/firehome/miehuo.png');
+      --image-value-bg-2: url('/@/assets/images/themify/deepblue/value-bg-2.png');
+      --image-board_bg_3: url('/@/assets/images/themify/deepblue/configurable/board_bg_3.png');
+      --image-board_bg_2: url('/@/assets/images/themify/deepblue/configurable/board_bg_2.png');
+      --image-board_bg_5: url('/@/assets/images/themify/deepblue/configurable/board_bg_5.png');
+      --image-board_bg_4: url('/@/assets/images/themify/deepblue/configurable/board_bg_4.png');
     }
   }
 
@@ -95,13 +91,13 @@
     --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
     --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
     --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
-    --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
-    --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
-    --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
-    --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
     --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
     --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
     --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
+
+    --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
+    --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
+    --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
     height: 50px;
     line-height: 25px;
     width: 130px;
@@ -121,7 +117,7 @@
     width: 131px;
     height: 64px;
     background-image: var(--image-value-bg);
-    background-size: 100% auto;
+    background-size: auto 40px;
     background-position: center bottom;
     background-repeat: no-repeat;
   }

src/views/vent/home/configurable/components/detail/TimelineList.vue

@@ -28,16 +28,16 @@
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
   /* Timeline 相关的样式 */
 
   @{theme-deepblue} {
     .timeline-item {
-      // --image-warn_icon_5: url('/@/assets/images/themify/deepblue/configurable/warn_icon_5.png');
-      // --image-warn_icon_4: url('/@/assets/images/themify/deepblue/configurable/warn_icon_4.png');
-      // --image-warn_icon_3: url('/@/assets/images/themify/deepblue/configurable/warn_icon_3.png');
-      // --image-warn_icon_2: url('/@/assets/images/themify/deepblue/configurable/warn_icon_2.png');
-      // --image-warn_icon_1: url('/@/assets/images/themify/deepblue/configurable/warn_icon_1.png');
+      --image-warn_icon_5: url('/@/assets/images/themify/deepblue/configurable/warn_icon_5.png');
+      --image-warn_icon_4: url('/@/assets/images/themify/deepblue/configurable/warn_icon_4.png');
+      --image-warn_icon_3: url('/@/assets/images/themify/deepblue/configurable/warn_icon_3.png');
+      --image-warn_icon_2: url('/@/assets/images/themify/deepblue/configurable/warn_icon_2.png');
+      --image-warn_icon_1: url('/@/assets/images/themify/deepblue/configurable/warn_icon_1.png');
     }
   }
 

src/views/vent/home/configurable/components/preset/FIreControl.vue

@@ -104,7 +104,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
 
   .board {
     width: 151px;

src/views/vent/home/configurable/components/preset/FIreWarn.vue

@@ -110,7 +110,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '@/design/theme.less';
 
   .fire-warn__image {
     position: relative;

src/views/vent/home/configurable/configurable.data.ts

@@ -538,7 +538,7 @@ export const testConfigDust: Config[] = [
       chart: [],
       gallery: [
         {
-          type: 'F',
+          type: 'D',
           readFrom: 'dustManageInfo',
           items: [
             {

src/views/vent/home/configurable/dust.vue

@@ -74,9 +74,9 @@
   import ModuleCommon from './components/ModuleCommon.vue';
   // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getHomeData } from './configurable.api';
+  // import { getHomeData } from './configurable.api';
   import { BDDustMock } from './mock';
-  // import { testConfigDust } from './configurable.data';
+  import { testConfigDust } from './configurable.data';
 
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
   const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能粉尘管控系统');
@@ -84,7 +84,7 @@
 
   onMounted(() => {
     fetchConfigs('dust').then(() => {
-      // configs.value = testConfigDust;
+      configs.value = testConfigDust;
       updateEnhancedConfigs(configs.value);
 
       Promise.resolve(BDDustMock).then(updateData);
@@ -157,8 +157,8 @@
     // }
     .module-dropdown {
       padding: 10px;
-      background-image: linear-gradient(to bottom, #036886, #072a40);
-      border-bottom: 2px solid #3df6ff;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
       color: #fff;
       position: absolute;
       top: 70px;
@@ -166,8 +166,8 @@
     }
     .module-dropdown-original {
       padding: 10px;
-      background-image: linear-gradient(to bottom, #036886, #072a40);
-      border-bottom: 2px solid #3df6ff;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
       color: #fff;
       position: absolute;
       top: 70px;
@@ -175,9 +175,9 @@
     }
     .module-trigger-button {
       color: #fff;
-      background-image: linear-gradient(to bottom, #036886, #072a40);
+      background-image: @vent-configurable-dropdown;
       border: none;
-      border-bottom: 2px solid #3df6ff;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
     }
   }
   :deep(.loading-box) {

src/views/vent/home/configurable/dustBD.vue

@@ -121,9 +121,8 @@
       --image-fire-title: url(/@/assets/images/themify/deepblue/configurable/firehome/fire-title.png);
       --image-qkjaq: url('/@/assets/images/themify/deepblue/configurable/firehome/qkjaq.png');
       --image-common-border2: url('/@/assets/images/themify/deepblue/configurable/firehome/common-border2.png');
-      --image-img-5: url(/@/assets/images/themify/deepblue/configurable/firehome/img-5.png);
-      // --image-ggxt: url(/@/assets/images/themify/deepblue/configurable/firehome/ggxt.png);
-      // --image-zjxt: url(/@/assets/images/themify/deepblue/configurable/firehome/zjxt.png);
+      --image-znzjxt: url(/@/assets/images/themify/deepblue/configurable/firehome/znzjxt.png);
+      --image-znzdxt: url(/@/assets/images/themify/deepblue/configurable/firehome/znzdxt.png);
     }
   }
 
@@ -132,9 +131,8 @@
     --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
     --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
     --image-common-border2: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
-    --image-img-5: url(/@/assets/images/home-container/configurable/firehome/img-5.png);
-    --image-ggxt: url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
-    --image-zjxt: url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
+    --image-znzjxt: url(/@/assets/images/home-container/configurable/firehome/znzjxt.png);
+    --image-znzdxt: url(/@/assets/images/home-container/configurable/firehome/znzdxt.png);
     width: 100%;
     height: 100%;
     color: @white;
@@ -144,7 +142,7 @@
     .top-bg {
       width: 100%;
       height: 86px;
-      background: var(--image-fire-title) no-repeat center;
+      background: var(--image-fire-title) no-repeat top;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -208,7 +206,7 @@
     left: 10px;
     width: 440px;
     background-image: var(--image-qkjaq);
-    background-color: #000723;
+    // background-color: #000723;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% 100%;
@@ -264,10 +262,11 @@
   }
   .right-t {
     position: absolute;
-    height: 160px;
-    right: 0;
+    // height: 160px;
+    height: 115px;
+    right: 10px;
     top: 50px;
-    width: 450px;
+    width: 440px;
     background-image: var(--image-common-border2);
     background-color: #000723;
     background-repeat: no-repeat;
@@ -279,39 +278,27 @@
 
     .tcontent-l {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
-      background-image: var(--image-img-5), var(--image-ggxt);
-      background-size:
-        auto 100%,
-        auto auto;
+      background-image: var(--image-znzjxt);
+      background-size: auto 100%;
       background-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
+      background-position: center;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
-      cursor: pointer;
+      padding-top: 85px;
     }
     .tcontent-r {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
-      background-image: var(--image-img-5), var(--image-zjxt);
-      background-size:
-        auto 100%,
-        auto auto;
+      background-image: var(--image-znzdxt);
+      background-size: auto 100%;
       background-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
+      background-position: center;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
-      cursor: pointer;
+      padding-top: 85px;
     }
   }
 

src/views/vent/home/configurable/fire.vue

@@ -59,9 +59,9 @@
         </div>
       </div>
     </template>
-    <!-- <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
-    </div> -->
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -74,7 +74,7 @@
   import ModuleCommon from './components/ModuleCommon.vue';
   // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getHomeData } from './configurable.api';
+  // import { getHomeData } from './configurable.api';
   import { BDFireMock } from './mock';
   // import { testConfigFire } from './configurable.data';
 
@@ -157,8 +157,8 @@
     // }
     .module-dropdown {
       padding: 10px;
-      background-image: linear-gradient(to bottom, #036886, #072a40);
-      border-bottom: 2px solid #3df6ff;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
       color: #fff;
       position: absolute;
       top: 70px;
@@ -166,8 +166,8 @@
     }
     .module-dropdown-original {
       padding: 10px;
-      background-image: linear-gradient(to bottom, #036886, #072a40);
-      border-bottom: 2px solid #3df6ff;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
       color: #fff;
       position: absolute;
       top: 70px;
@@ -175,9 +175,9 @@
     }
     .module-trigger-button {
       color: #fff;
-      background-image: linear-gradient(to bottom, #036886, #072a40);
+      background-image: @vent-configurable-dropdown;
       border: none;
-      border-bottom: 2px solid #3df6ff;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
     }
   }
   :deep(.loading-box) {

src/views/vent/home/configurable/fireBD.vue

@@ -168,7 +168,7 @@
     .top-bg {
       width: 100%;
       height: 86px;
-      background: var(--image-fire-title) no-repeat center;
+      background: var(--image-fire-title) no-repeat top;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -228,11 +228,11 @@
   .left-t {
     position: absolute;
     height: 115px;
-    top: 40px;
+    top: 50px;
     left: 10px;
     width: 440px;
     background-image: var(--image-qkjaq);
-    background-color: #000723;
+    // background-color: #000723;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% 100%;

src/views/vent/home/configurable/fireWZ.vue

@@ -109,9 +109,8 @@
       --image-fire-title: url(/@/assets/images/themify/deepblue/configurable/firehome/fire-title.png);
       --image-qkjaq: url('/@/assets/images/themify/deepblue/configurable/firehome/qkjaq.png');
       --image-common-border2: url('/@/assets/images/themify/deepblue/configurable/firehome/common-border2.png');
-      --image-img-5: url(/@/assets/images/themify/deepblue/configurable/firehome/img-5.png);
-      // --image-ggxt: url(/@/assets/images/themify/deepblue/configurable/firehome/ggxt.png);
-      // --image-zjxt: url(/@/assets/images/themify/deepblue/configurable/firehome/zjxt.png);
+      --image-znzjxt: url(/@/assets/images/themify/deepblue/configurable/firehome/znzjxt.png);
+      --image-znzdxt: url(/@/assets/images/themify/deepblue/configurable/firehome/znzdxt.png);
     }
   }
 
@@ -120,9 +119,8 @@
     --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
     --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
     --image-common-border2: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
-    --image-img-5: url(/@/assets/images/home-container/configurable/firehome/img-5.png);
-    --image-ggxt: url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
-    --image-zjxt: url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
+    --image-znzjxt: url(/@/assets/images/home-container/configurable/firehome/znzjxt.png);
+    --image-znzdxt: url(/@/assets/images/home-container/configurable/firehome/znzdxt.png);
     width: 100%;
     height: 100%;
     color: @white;
@@ -132,7 +130,7 @@
     .top-bg {
       width: 100%;
       height: 86px;
-      background: var(--image-fire-title) no-repeat center;
+      background: var(--image-fire-title) no-repeat top;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -195,7 +193,7 @@
     top: 50px;
     width: 450px;
     background-image: var(--image-qkjaq);
-    background-color: #000723;
+    // background-color: #000723;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% 100%;
@@ -251,10 +249,11 @@
   }
   .right-t {
     position: absolute;
-    height: 160px;
-    right: 0;
+    // height: 160px;
+    height: 115px;
+    right: 10px;
     top: 50px;
-    width: 450px;
+    width: 440px;
     background-image: var(--image-common-border2);
     background-color: #000723;
     background-repeat: no-repeat;
@@ -266,39 +265,27 @@
 
     .tcontent-l {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
-      background-image: var(--image-img-5), var(--image-ggxt);
-      background-size:
-        auto 100%,
-        auto auto;
+      background-image: var(--image-znzjxt);
+      background-size: auto 100%;
       background-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
+      background-position: center;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
-      cursor: pointer;
+      padding-top: 85px;
     }
     .tcontent-r {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
-      background-image: var(--image-img-5), var(--image-zjxt);
-      background-size:
-        auto 100%,
-        auto auto;
+      background-image: var(--image-znzdxt);
+      background-size: auto 100%;
       background-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
+      background-position: center;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
-      cursor: pointer;
+      padding-top: 85px;
     }
   }
 

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

@@ -15,147 +15,120 @@
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
 
-    <div class="left-t">
-      <div class="tcontent-area">
-        <div class="tcontent-l">
-          <div>监测</div>
-          <div>区域</div>
+    <template v-if="isOriginal">
+      <ModuleOriginal
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :data="data"
+        :visible="true"
+      />
+    </template>
+    <template v-else-if="isCommon">
+      <ModuleCommon
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :data="data"
+        :visible="true"
+      />
+    </template>
+    <template v-else>
+      <!-- 下面是正常展示的各新版模块 -->
+      <ModuleEnhanced
+        v-for="cfg in enhancedConfigs"
+        :key="cfg.deviceType"
+        :visible="cfg.visible"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :data="data"
+        @close="cfg.visible = false"
+      />
+      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
+      <div class="pos-absolute top-70px left-460px z-3">
+        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
+          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
-        <div class="tcontent-c">
-          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
-            {{ data.fireAllMineWarn }}
-          </div>
-          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
-        </div>
-        <div class="tcontent-r">
-          <div>火灾</div>
-          <div>风险</div>
-        </div>
-      </div>
-    </div>
-    <div class="right-t">
-      <div class="tcontent-l" @click="redirectTo('/grout-home')">
-        <div>智能注浆系统</div>
-      </div>
-      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
-        <div>智能注氮系统</div>
       </div>
-    </div>
-    <ModuleBD
-      v-for="cfg in cfgs"
-      :key="cfg.deviceType"
-      :show-style="cfg.showStyle"
-      :module-data="cfg.moduleData"
-      :module-name="cfg.moduleName"
-      :device-type="cfg.deviceType"
-      :data="data"
-      :visible="true"
-    />
-    <ModuleBDDual
-      v-if="cfgA && cfgB"
-      :show-style="cfgA.showStyle"
-      :module-data-a="cfgA.moduleData"
-      :module-name-a="cfgA.moduleName"
-      :device-type-a="cfgA.deviceType"
-      :module-data-b="cfgB.moduleData"
-      :module-name-b="cfgB.moduleName"
-      :device-type-b="cfgB.deviceType"
-      :data="data"
-      :visible="true"
-    />
-    <div style="width: 1000px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
+    </template>
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
-      <a-button
-        type="primary"
-        shape="circle"
-        style="width: 34px; height: 34px; position: absolute; right: 5px; bottom: 5px"
-        @click="redirectTo('/micro-vent-3dModal/dashboard/analysis?type=model3D&deviceType=model3D')"
-      >
-        <EyeFilled />
-      </a-button>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted } from 'vue';
+  import { onMounted, onUnmounted } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
-  import ModuleBD from './components/ModuleBD.vue';
-  import ModuleBDDual from './components/ModuleBDDual.vue';
+  import ModuleEnhanced from './components/ModuleEnhanced.vue';
+  import ModuleOriginal from './components/ModuleOriginal.vue';
+  import ModuleCommon from './components/ModuleCommon.vue';
+  // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getDisHome } from './configurable.api';
-  import { testConfigBDFire } from './configurable.data.bd';
-  import { EyeFilled } from '@ant-design/icons-vue';
-  // import { getToken } from '/@/utils/auth';
+  import { getHomeData } from './configurable.api';
+  // import { testConfigVent } from './configurable.data';
 
-  const cfgs = computed(() =>
-    configs.value.filter((_, index) => {
-      return index !== 4 && index !== 3;
-    })
-  );
-  const cfgA = computed<any>(() =>
-    configs.value.find((_, index) => {
-      return index === 3;
-    })
-  );
-  const cfgB = computed<any>(() =>
-    configs.value.find((_, index) => {
-      return index === 4;
-    })
-  );
-  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData } = useInitPage('保德煤矿火灾预警系统');
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能通风管控系统');
   let interval: number | undefined;
-  // function hideLoading() {
-  //   loading.value = false;
-  // }
+
   onMounted(() => {
-    // fetchConfigs('BD_fire').then(() => {
-    configs.value = testConfigBDFire;
+    fetchConfigs('vent').then(() => {
+      // configs.value = testConfigVent;
+      updateEnhancedConfigs(configs.value);
 
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
-    // });
-    // setInterval(() => {
-    //   getDisHome({
-    //     dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    //   }).then(updateData);
-    // }, 60000);
+      getHomeData({}).then(updateData);
+    });
+    setInterval(() => {
+      getHomeData({}).then(updateData);
+    }, 60000);
   });
 
   onUnmounted(() => {
     clearInterval(interval);
   });
-
-  function redirectTo(url) {
-    window.open(url);
-  }
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
   @font-face {
     font-family: 'douyuFont';
     src: url('../../../../assets/font/douyuFont.otf');
   }
 
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/themify/deepblue/configurable/modal-top.png');
+    }
+  }
+
   .company-home {
+    --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
     width: 100%;
     height: 100%;
     color: @white;
     position: relative;
-    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
+    // background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
 
     .top-bg {
       width: 100%;
-      height: 86px;
-      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
+      height: 56px;
+      background: var(--image-modal-top) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
-        height: 86px;
+        height: 56px;
         font-family: 'douyuFont';
-        font-size: 26px;
+        font-size: 20px;
         letter-spacing: 2px;
         display: flex;
         justify-content: center;
@@ -165,13 +138,13 @@
 
     // .module-left {
     //   position: absolute;
-    //   width: 440px;
+    //   width: 450px;
     //   height: 280px;
     //   left: 0;
     // }
     // .module-right {
     //   position: absolute;
-    //   width: 440px;
+    //   width: 450px;
     //   height: 280px;
     //   right: 0;
     // }
@@ -205,111 +178,6 @@
       border-bottom: 2px solid #3df6ff;
     }
   }
-
-  .left-t {
-    position: absolute;
-    height: 115px;
-    top: 40px;
-    left: 10px;
-    width: 440px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
-    background-color: #000723;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100% 100%;
-
-    .tcontent-area {
-      display: flex;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      box-sizing: border-box;
-      align-items: center;
-      justify-content: space-around;
-      width: 100%;
-      height: 70px;
-      padding: 0 15px;
-      transform: translate(0, -40%);
-
-      .tcontent-l {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: #9da5aa;
-        font-size: 14px;
-        font-weight: bold;
-        letter-spacing: 2px;
-      }
-
-      .tcontent-c {
-        display: flex;
-        flex: 3;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-      }
-
-      .tcontent-r {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: #9da5aa;
-        font-size: 14px;
-        font-weight: bold;
-        letter-spacing: 2px;
-      }
-    }
-  }
-  .right-t {
-    position: absolute;
-    // height: 160px;
-    height: 115px;
-    right: 10px;
-    top: 50px;
-    width: 440px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
-    background-color: #000723;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100% 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    z-index: 1;
-
-    .tcontent-l {
-      flex: 1;
-      height: 100%;
-      font-size: 16px;
-      font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/znzjxt.png);
-      background-size: auto 100%;
-      background-repeat: no-repeat;
-      background-position: center;
-      text-align: center;
-      padding-top: 85px;
-    }
-    .tcontent-r {
-      flex: 1;
-      height: 100%;
-      font-size: 16px;
-      font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/znzdxt.png);
-      background-size: auto 100%;
-      background-repeat: no-repeat;
-      background-position: center;
-      text-align: center;
-      padding-top: 85px;
-    }
-  }
-
   :deep(.loading-box) {
     position: unset;
   }

src/views/vent/home/configurable/vent.vue

@@ -155,8 +155,8 @@
     // }
     .module-dropdown {
       padding: 10px;
-      background-image: linear-gradient(to bottom, #036886, #072a40);
-      border-bottom: 2px solid #3df6ff;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
       color: #fff;
       position: absolute;
       top: 70px;
@@ -164,8 +164,8 @@
     }
     .module-dropdown-original {
       padding: 10px;
-      background-image: linear-gradient(to bottom, #036886, #072a40);
-      border-bottom: 2px solid #3df6ff;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
       color: #fff;
       position: absolute;
       top: 70px;
@@ -173,9 +173,9 @@
     }
     .module-trigger-button {
       color: #fff;
-      background-image: linear-gradient(to bottom, #036886, #072a40);
+      background-image: @vent-configurable-dropdown;
       border: none;
-      border-bottom: 2px solid #3df6ff;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
     }
   }
   :deep(.loading-box) {

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

@@ -91,7 +91,7 @@
   onUnmounted(() => {});
 </script>
 <style scoped lang="less">
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
   .padding-0 {
     padding: 10px 0 !important;

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

@@ -376,7 +376,7 @@
   }
 </style>
 <style lang="less" scoped>
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   .charts-container {
     position: relative;
     height: 100%;

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

@@ -421,7 +421,7 @@
   }
 </style>
 <style lang="less" scoped>
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   .charts-container {
     position: relative;
     height: 100%;

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

@@ -498,7 +498,7 @@
 </script>
 
 <style scoped lang="less">
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   :deep(.@{ventSpace}-table-body) {
     height: auto !important;

src/views/vent/monitorManager/comment/components/DetailModal.vue

@@ -23,6 +23,6 @@
   onUnmounted(() => {});
 </script>
 <style scoped lang="less">
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
 </style>

src/views/vent/monitorManager/comment/components/DeviceBaseInfo.vue

@@ -1,140 +1,146 @@
 <template>
-  <BasicModal @register="register" :title="tabType =='deviceInfo' ? '设备编辑' : '报表录入'" width="1000px" v-bind="$attrs" @ok="onSubmit" :mask-closable="false">
-    <BasicForm ref="FormRef" @register="registerForm"/>
+  <BasicModal
+    @register="register"
+    :title="tabType == 'deviceInfo' ? '设备编辑' : '报表录入'"
+    width="1000px"
+    v-bind="$attrs"
+    @ok="onSubmit"
+    :mask-closable="false"
+  >
+    <BasicForm ref="FormRef" @register="registerForm" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
+  import { onMounted, ref, defineEmits, onUnmounted, watch, PropType, nextTick, computed } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { FormSchema } from '/@/components/Form';
+  import { getFormSchemaColumns } from '/@/hooks/web/useWebColumns';
+  import { list as substationList } from '/@/views/vent/deviceManager/substationTabel/substation.api';
+  import { list, updateDeviceInfo, updateReportInfo } from '../comment.api';
+  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
 
-import { onMounted, ref, defineEmits, onUnmounted, watch, PropType, nextTick, computed } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import { BasicForm, useForm } from '/@/components/Form/index';
-import { FormSchema } from '/@/components/Form';
-import { getFormSchemaColumns } from '/@/hooks/web/useWebColumns';
-import { list as substationList } from '/@/views/vent/deviceManager/substationTabel/substation.api';
-import {list, updateDeviceInfo, updateReportInfo } from '../comment.api'
-import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+  const emit = defineEmits(['close', 'register']);
+  const props = defineProps({
+    formSchema: {
+      type: Array as PropType<FormSchema[]>,
+      default: () => [],
+    },
+    deviceType: {
+      type: String,
+      default: '',
+    },
+  });
+  const FormRef = ref();
+  const tabType = ref('deviceInfo');
+  const formSchema = ref<FormSchema[]>([]);
+  const formData = ref({});
+  const deviceTypeName = ref('');
+  const deviceType = computed(() => props.deviceType);
 
-const emit = defineEmits(['close', 'register'])
-const props = defineProps({
-  formSchema: {
-    type: Array as PropType <FormSchema[]> ,
-    default: () => []
-  },
-  deviceType: {
-    type: String,
-    default: ''
-  },
-})
-const FormRef = ref()
-const tabType = ref('deviceInfo')
-const formSchema = ref<FormSchema[]>([])
-const formData = ref({})
-const deviceTypeName = ref('')
-const deviceType = computed(() => props.deviceType)
+  // const arrToFormColumns = (tableHeaderColumns = [], devicetype) => {
+  //   const columnList: any[] = [];
+  //   tableHeaderColumns.forEach((item: any) => {
+  //     let columnsItem;
+  //     if (item.type == 1 || item.type == 10) {
+  //       columnsItem = {
+  //         label: item.des, //_dictText
+  //         field: item.monitorcode,
+  //         component: item.type == 1 ? 'Input' : item.type == 10 ? 'InputTextArea' : '',
+  //       };
+  //     } else {
+  //       if (item.type == 2 && item['monitorcode'] == 'nsubstationid') {
+  //         columnsItem = {
+  //           label: item.des, //_dictText
+  //           field: item.monitorcode,
+  //           component: 'ApiSelect',
+  //           componentProps: {
+  //             api: substationList,
+  //             labelField: 'strname',
+  //             valueField: 'id',
+  //           },
+  //         };
+  //       }
+  //       if (item.type == 3) {
+  //         columnsItem = {
+  //           label: item.des, //_dictText
+  //           field: item.monitorcode,
+  //           component: 'RadioGroup',
+  //           defaultValue: 1,
+  //           componentProps: () => {
+  //             return {
+  //               options: [
+  //                 { label: '是', value: 1, key: '1' },
+  //                 { label: '否', value: 0, key: '2' },
+  //               ],
+  //               stringToNumber: true,
+  //             };
+  //           },
+  //         };
+  //       }
+  //       if (item.type == 4) {
+  //         columnsItem = {
+  //           label: item.des, //_dictText
+  //           field: item.monitorcode,
+  //           component: 'JDictSelectTag',
+  //           componentProps: {
+  //             dictCode: item.dict,
+  //             placeholder: '请选择',
+  //             stringToNumber: true,
+  //           },
+  //         };
+  //       }
+  //     }
+  //     columnList.push(columnsItem);
+  //   });
+  //   formSchema.value = columnList
+  //   if(tabType.value === 'deviceInfo'){
+  //     formSchema.value.unshift(
+  //       {
+  //         label: '设备id', //_dictText
+  //         field: 'id',
+  //         component: 'Input',
+  //         componentProps: {
+  //           disabled: true,
+  //           show: false
+  //         },
+  //       },
+  //       {
+  //         label: '点表',
+  //         field: 'strtype',
+  //         component: 'JDictSelectTag',
+  //         componentProps: {
+  //           dictCode: `${devicetype.split('_')[0]}kind`,
+  //           placeholder: '请选择点表',
+  //         },
+  //       })
+  //       formSchema.value.push(
+  //       {
+  //         label: '备用分站',
+  //         field: 'stationids',
+  //         component: 'ApiSelect',
+  //         componentProps: {
+  //           api: substationList,
+  //           labelField: 'strname',
+  //           valueField: 'id',
+  //         },
+  //       },
+  //     )
+  //   }else{
+  //     formSchema.value.unshift(
+  //       {
+  //         label: '设备id', //_dictText
+  //         field: 'id',
+  //         component: 'Input',
+  //         componentProps: {
+  //           disabled: true,
+  //           show: false
+  //         },
+  //       })
+  //   }
+  // };
 
-// const arrToFormColumns = (tableHeaderColumns = [], devicetype) => {
-//   const columnList: any[] = [];
-//   tableHeaderColumns.forEach((item: any) => {
-//     let columnsItem;
-//     if (item.type == 1 || item.type == 10) {
-//       columnsItem = {
-//         label: item.des, //_dictText
-//         field: item.monitorcode,
-//         component: item.type == 1 ? 'Input' : item.type == 10 ? 'InputTextArea' : '',
-//       };
-//     } else {
-//       if (item.type == 2 && item['monitorcode'] == 'nsubstationid') {
-//         columnsItem = {
-//           label: item.des, //_dictText
-//           field: item.monitorcode,
-//           component: 'ApiSelect',
-//           componentProps: {
-//             api: substationList,
-//             labelField: 'strname',
-//             valueField: 'id',
-//           },
-//         };
-//       }
-//       if (item.type == 3) {
-//         columnsItem = {
-//           label: item.des, //_dictText
-//           field: item.monitorcode,
-//           component: 'RadioGroup',
-//           defaultValue: 1,
-//           componentProps: () => {
-//             return {
-//               options: [
-//                 { label: '是', value: 1, key: '1' },
-//                 { label: '否', value: 0, key: '2' },
-//               ],
-//               stringToNumber: true,
-//             };
-//           },
-//         };
-//       }
-//       if (item.type == 4) {
-//         columnsItem = {
-//           label: item.des, //_dictText
-//           field: item.monitorcode,
-//           component: 'JDictSelectTag',
-//           componentProps: {
-//             dictCode: item.dict,
-//             placeholder: '请选择',
-//             stringToNumber: true,
-//           },
-//         };
-//       }
-//     }
-//     columnList.push(columnsItem);
-//   });
-//   formSchema.value = columnList
-//   if(tabType.value === 'deviceInfo'){
-//     formSchema.value.unshift(
-//       {
-//         label: '设备id', //_dictText
-//         field: 'id',
-//         component: 'Input',
-//         componentProps: {
-//           disabled: true,
-//           show: false
-//         },
-//       },
-//       {
-//         label: '点表',
-//         field: 'strtype',
-//         component: 'JDictSelectTag',
-//         componentProps: {
-//           dictCode: `${devicetype.split('_')[0]}kind`,
-//           placeholder: '请选择点表',
-//         },
-//       })
-//       formSchema.value.push(
-//       {
-//         label: '备用分站',
-//         field: 'stationids',
-//         component: 'ApiSelect',
-//         componentProps: {
-//           api: substationList,
-//           labelField: 'strname',
-//           valueField: 'id',
-//         },
-//       },
-//     )
-//   }else{
-//     formSchema.value.unshift(
-//       {
-//         label: '设备id', //_dictText
-//         field: 'id',
-//         component: 'Input',
-//         componentProps: {
-//           disabled: true,
-//           show: false
-//         },
-//       })
-//   }
-// };
-
-const arrToFormColumns = (tableHeaderColumns = []) => {
+  const arrToFormColumns = (tableHeaderColumns = []) => {
     const columnList: any[] = [];
     tableHeaderColumns.forEach((item: any) => {
       let columnsItem;
@@ -264,66 +270,64 @@ const arrToFormColumns = (tableHeaderColumns = []) => {
       }
     );
   };
-// 注册 modal
-const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
-  tabType.value = data.type
-  const deviceId = data.deviceId
-  if (FormRef.value) {
-    setModalProps({ confirmLoading: false });
-    getColumns()
-    resetSchema(formSchema.value)
-    resetFields()
-    const result = await list({ id: deviceId })
-    formData.value = result['records'][0]
-    await setFieldsValue({
-      ...formData.value,
-    });
-  }
-});
+  // 注册 modal
+  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
+    tabType.value = data.type;
+    const deviceId = data.deviceId;
+    if (FormRef.value) {
+      setModalProps({ confirmLoading: false });
+      getColumns();
+      resetSchema(formSchema.value);
+      resetFields();
+      const result = await list({ id: deviceId });
+      formData.value = result['records'][0];
+      await setFieldsValue({
+        ...formData.value,
+      });
+    }
+  });
 
-const [registerForm, { resetSchema, getFieldsValue, setFieldsValue, resetFields }] = useForm({
-  schemas: <FormSchema[]>formSchema.value,
-  showActionButtonGroup: false,
-});
+  const [registerForm, { resetSchema, getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: <FormSchema[]>formSchema.value,
+    showActionButtonGroup: false,
+  });
 
-function getColumns() {
-  let formSchemaArr = getFormSchemaColumns(tabType.value === 'deviceInfo' ? `${deviceTypeName.value}_edit` : `${deviceTypeName.value}_input`) || []
-  if (formSchemaArr && formSchemaArr.length < 1) {
-    const arr = deviceTypeName.value.split('_')
-    formSchemaArr = getFormSchemaColumns(tabType.value === 'deviceInfo' ? arr[0] + '_edit' : arr[0] + '_input') || []
+  function getColumns() {
+    let formSchemaArr = getFormSchemaColumns(tabType.value === 'deviceInfo' ? `${deviceTypeName.value}_edit` : `${deviceTypeName.value}_input`) || [];
+    if (formSchemaArr && formSchemaArr.length < 1) {
+      const arr = deviceTypeName.value.split('_');
+      formSchemaArr = getFormSchemaColumns(tabType.value === 'deviceInfo' ? arr[0] + '_edit' : arr[0] + '_input') || [];
+    }
+    arrToFormColumns(formSchemaArr);
   }
-  arrToFormColumns(formSchemaArr)
-} 
 
-watch(() => props.deviceType, (devicetype) => {
-  deviceTypeName.value = devicetype
-  getColumns()
-  if(FormRef.value)resetSchema(formSchema.value)
-})
+  watch(
+    () => props.deviceType,
+    (devicetype) => {
+      deviceTypeName.value = devicetype;
+      getColumns();
+      if (FormRef.value) resetSchema(formSchema.value);
+    }
+  );
 
+  async function onSubmit() {
+    let formValue = getFieldsValue();
+    setModalProps({ confirmLoading: true });
+    if (tabType.value === 'deviceInfo') {
+      await updateDeviceInfo(formValue);
+    } else {
+      await updateReportInfo(formValue);
+    }
 
-async function onSubmit() {
-  
-  let formValue = getFieldsValue();
-  setModalProps({ confirmLoading: true });
-  if(tabType.value === 'deviceInfo'){
-    await updateDeviceInfo(formValue)
-  }else{
-    await updateReportInfo(formValue)
+    setModalProps({ confirmLoading: false });
+    emit('close');
+    closeModal();
   }
-  
-  setModalProps({ confirmLoading: false });
-  emit('close')
-  closeModal();
-}
-
-onMounted(async () => {
-});
-onUnmounted(() => {
 
-});
+  onMounted(async () => {});
+  onUnmounted(() => {});
 </script>
 <style scoped lang="less">
-@import '/@/design/vent/color.less';
-@import '/@/design/vent/modal.less';
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
 </style>

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

@@ -1,6 +1,6 @@
-<template>group
-  <BasicModal @register="register" title="详情" width="1600px" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit"
-    :defaultFullscreen="true">
+<template>
+  group
+  <BasicModal @register="register" title="详情" width="1600px" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
     <div class="detail-box">
       <div class="left-box">
         <SvgPreview :data-model="data_model" :canvas-drag="false" />
@@ -17,7 +17,7 @@
           <div class="right-detail-box">
             <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
               <a-tab-pane key="1" tab="运行状态">
-                <div class=" detail-state">
+                <div class="detail-state">
                   <div class="detail-item">
                     <div class="item-title">高压侧</div>
                     <div class="vent-flex-row-between detail-item-row">
@@ -66,8 +66,7 @@
                       <div>运行状态</div>
                       <div>正常</div>
                     </div>
-                    <div v-for="(item, key) in protectionEnableH" :key="key"
-                      class="vent-flex-row-between detail-item-row">
+                    <div v-for="(item, key) in protectionEnableH" :key="key" class="vent-flex-row-between detail-item-row">
                       <div>{{ item.title }}</div>
                       <div>-</div>
                     </div>
@@ -78,8 +77,7 @@
                       <div>运行状态</div>
                       <div>正常</div>
                     </div>
-                    <div v-for="(item, key) in protectionEnableL" :key="key"
-                      class="vent-flex-row-between detail-item-row">
+                    <div v-for="(item, key) in protectionEnableL" :key="key" class="vent-flex-row-between detail-item-row">
                       <div>{{ item.title }}</div>
                       <div>-</div>
                     </div>
@@ -89,7 +87,6 @@
             </a-tabs>
           </div>
         </div>
-
       </div>
       <div class="right-box" v-if="activeBox == 2">
         <div class="right-title">电光馈电</div>
@@ -102,10 +99,11 @@
           <div class="right-detail-box">
             <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
               <a-tab-pane key="1" tab="运行状态">
-                <template v-for="(electric, key) in electricMonitor " :key="index">
+                <template v-for="(electric, key) in electricMonitor" :key="index">
                   <div class="padding-20">
-                    <a-divider style="border-color: #1580CC; color: #49b3ff; font-weight: 600; font-size: 14px;"
-                      orientation="left">{{ key }}</a-divider>
+                    <a-divider style="border-color: #1580cc; color: #49b3ff; font-weight: 600; font-size: 14px" orientation="left">{{
+                      key
+                    }}</a-divider>
                     <div class="data-group">
                       <div class="data-item" v-for="(item, index) in electric" :key="index">
                         <div class="title">{{ item.title }}</div>
@@ -120,8 +118,7 @@
               </a-tab-pane>
               <a-tab-pane key="2" tab="定值设定">
                 <div class="padding-20">
-                  <a-divider style="border-color: #1580CC; color: #49b3ff; font-weight: 600; font-size: 14px;"
-                    orientation="left">保护状态</a-divider>
+                  <a-divider style="border-color: #1580cc; color: #49b3ff; font-weight: 600; font-size: 14px" orientation="left">保护状态</a-divider>
                   <div class="data-group">
                     <div class="data-item" v-for="(item, index) in electricState" :key="index">
                       <div class="title">{{ item.title }}</div>
@@ -145,16 +142,17 @@
           <div class="right-detail-box">
             <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
               <a-tab-pane key="1" tab="注氮状态">
-                <div class=" detail-state">
+                <div class="detail-state">
                   <div class="detail-item">
                     <div class="item-title">
                       <span> 1#注氮机</span>
-                      <span style="color:red">停机</span>
+                      <span style="color: red">停机</span>
                     </div>
-                    <template v-for="(fanState, key) in fanControlState1 " :key="index">
+                    <template v-for="(fanState, key) in fanControlState1" :key="index">
                       <div class="padding-20">
-                        <a-divider style="border-color: #1580CC; color: #49b3ff; font-weight: 600; font-size: 14px;"
-                          orientation="left">{{ key }}</a-divider>
+                        <a-divider style="border-color: #1580cc; color: #49b3ff; font-weight: 600; font-size: 14px" orientation="left">{{
+                          key
+                        }}</a-divider>
                         <div class="data-group data-group1">
                           <div class="data-item" v-for="(item, key1) in fanState" :key="key1">
                             <div class="title">{{ key1 }}</div>
@@ -167,12 +165,13 @@
                   <div class="detail-item">
                     <div class="item-title">
                       <span> 2#注氮机</span>
-                      <span style="color:red">停机</span>
+                      <span style="color: red">停机</span>
                     </div>
-                    <template v-for="(fanState, key) in fanControlState2 " :key="index">
+                    <template v-for="(fanState, key) in fanControlState2" :key="index">
                       <div class="padding-20">
-                        <a-divider style="border-color: #1580CC; color: #49b3ff; font-weight: 600; font-size: 14px;"
-                          orientation="left">{{ key }}</a-divider>
+                        <a-divider style="border-color: #1580cc; color: #49b3ff; font-weight: 600; font-size: 14px" orientation="left">{{
+                          key
+                        }}</a-divider>
                         <div class="data-group data-group1">
                           <div class="data-item" v-for="(item, key1) in fanState" :key="key1">
                             <div class="title">{{ key1 }}</div>
@@ -185,15 +184,16 @@
                 </div>
               </a-tab-pane>
               <a-tab-pane key="2" tab="注氮移变">
-                <div class=" detail-state">
+                <div class="detail-state">
                   <div class="detail-item">
                     <div class="item-title">
                       <span>高压侧</span>
                     </div>
                     <template v-for="(fanState, key) in shifTing" :key="index">
                       <div class="padding-20">
-                        <a-divider style="border-color: #1580CC; color: #49b3ff; font-weight: 600; font-size: 14px;"
-                          orientation="left">{{ key }}</a-divider>
+                        <a-divider style="border-color: #1580cc; color: #49b3ff; font-weight: 600; font-size: 14px" orientation="left">{{
+                          key
+                        }}</a-divider>
                         <div class="data-group2 data-group3">
                           <div class="data-item" v-for="(item, key1) in fanState" :key="key1">
                             <div class="title">{{ key1 }}</div>
@@ -207,10 +207,11 @@
                     <div class="item-title">
                       <span>低压侧</span>
                     </div>
-                    <template v-for="(fanState, key) in shifTing1 " :key="index">
+                    <template v-for="(fanState, key) in shifTing1" :key="index">
                       <div class="padding-20">
-                        <a-divider style="border-color: #1580CC; color: #49b3ff; font-weight: 600; font-size: 14px;"
-                          orientation="left">{{ key }}</a-divider>
+                        <a-divider style="border-color: #1580cc; color: #49b3ff; font-weight: 600; font-size: 14px" orientation="left">{{
+                          key
+                        }}</a-divider>
                         <div class="data-group data-group1">
                           <div class="data-item" v-for="(item, key1) in fanState" :key="key1">
                             <div class="title">{{ key1 }}</div>
@@ -243,879 +244,815 @@
               </a-tab-pane>
             </a-tabs>
             <div class="btn-box">
-              <a-button style="margin-left:10px" size="small" v-for="(btn, ind) in btnList" :key="ind"
-                preIcon="ant-design:upload-outlined" type="primary">{{ btn.name }}</a-button>
+              <a-button
+                style="margin-left: 10px"
+                size="small"
+                v-for="(btn, ind) in btnList"
+                :key="ind"
+                preIcon="ant-design:upload-outlined"
+                type="primary"
+                >{{ btn.name }}</a-button
+              >
             </div>
           </div>
         </div>
-
       </div>
     </div>
   </BasicModal>
 </template>
 <script lang="ts" setup>
+  import { onMounted, reactive, ref, defineEmits, onUnmounted, watch } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import {
+    transformMobileH,
+    transformMobileL,
+    protectionEnableH,
+    protectionEnableL,
+    electricMonitor,
+    electricState,
+    fanControlState1,
+    fanControlState2,
+    fanSetting1,
+    fanSetting2,
+    data_model,
+  } from '../../fanLocalMonitor/fanLocal.data';
+  import { SvgPreview } from 'mky-svg';
+
+  const emit = defineEmits(['close', 'register']);
+  const props = defineProps({
+    // detailTitle:{
+    //   type:String,
+    //   default:''
+    //   }
+  });
+  //btn列表
+  let btnList = reactive([{ name: '1#注氮一键启停' }, { name: '2#注氮一键启停' }]);
+
+  //1#注氮列表数据
+  let fanControlState1 = reactive({
+    空压机: {
+      空压机排气压力: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: 'Kpa',
+        },
+      ],
+      空压机排气温度: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: '­°C',
+        },
+      ],
+      空压机运行时间: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: 'h',
+        },
+      ],
+      空压机加载时间: [
+        {
+          code: '',
+          value: 55.0,
+        },
+        {
+          code: '',
+          value: 'h',
+        },
+      ],
+    },
+    流量: {
+      累计流量: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: 'm³',
+        },
+      ],
+      瞬时流量: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: 'm³/h',
+        },
+      ],
+    },
+    其他: {
+      膜前温度: [
+        {
+          code: '',
+          value: 0,
+        },
+        {
+          code: '',
+          value: '­°C',
+        },
+      ],
+      氮气纯度: [
+        {
+          code: '',
+          value: 0,
+        },
+        {
+          code: '',
+          value: '­%',
+        },
+      ],
+    },
+  });
+
+  //2#注氮列表
+  let fanControlState2 = reactive({
+    空压机: {
+      空压机排气压力: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: 'Kpa',
+        },
+      ],
+      空压机排气温度: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: '­°C',
+        },
+      ],
+      空压机运行时间: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: 'h',
+        },
+      ],
+      空压机加载时间: [
+        {
+          code: '',
+          value: 55.0,
+        },
+        {
+          code: '',
+          value: 'h',
+        },
+      ],
+    },
+    流量: {
+      累计流量: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: 'm³',
+        },
+      ],
+      瞬时流量: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: 'm³/h',
+        },
+      ],
+    },
+    其他: {
+      膜前温度: [
+        {
+          code: '',
+          value: 0,
+        },
+        {
+          code: '',
+          value: '­°C',
+        },
+      ],
+      氮气纯度: [
+        {
+          code: '',
+          value: 0,
+        },
+        {
+          code: '',
+          value: '­%',
+        },
+      ],
+    },
+  });
+
+  //移变-高压
+  let shifTing = reactive({
+    状态: {
+      运行状态: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      合闸命令返回: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      上位分闸: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      额定电流: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      上位复位: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      控制方式: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      电流: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      系统电压: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      短路电流整定: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      过载电流整定: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      过载电流: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      短路电流: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      温度: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      电度高位: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      电度低位: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+      上位合闸: [
+        {
+          code: '',
+          value: 55.0,
+        },
+      ],
+    },
+    投撤: {
+      高压零序电压投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      高压差动投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      高压瓦斯闭锁投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      高压断相投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+
+      高压风电闭锁投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      高压失压投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      高压过载投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      '高、低压联锁1投撤': [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      高压短路投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      '高、低压联锁2投撤': [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      高压机电闭锁投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      高压腔盖闭锁投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      高压相不平衡投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      ' 铁芯接地保护投撤': [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      ' 高压欠压投撤': [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      ' 高压零序电流投撤': [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      ' 高压温度投撤': [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+    },
+  });
+  //移变-低压
+  let shifTing1 = reactive({
+    状态: {
+      运行状态: [
+        {
+          code: '',
+          value: 0,
+        },
+      ],
+      上位复位: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      短路电流整定: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      短路电流: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      额定电流: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      过载电流整定: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      漏电电阻: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      电流: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      过载电流: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+      系统电压: [
+        {
+          code: '',
+          value: 0.0,
+        },
+      ],
+    },
+    投撤: {
+      低压欠压投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: '',
+        },
+      ],
+
+      低压漏电投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: '',
+        },
+      ],
+      低压过载投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: '',
+        },
+      ],
+      低压过压投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: '',
+        },
+      ],
+
+      低压短路投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: '',
+        },
+      ],
+
+      低压相不平衡投撤: [
+        {
+          code: '',
+          value: 0.0,
+        },
+        {
+          code: '',
+          value: '',
+        },
+      ],
+    },
+  });
+
+  const activeKey = ref('1');
+  const activeBox = ref(3);
+  // 注册 modal
+  const [register, { closeModal }] = useModalInner();
+
+  //tab选项切换
+  const tabChange = (key) => {
+    activeKey.value = key;
+    console.log(activeKey, '--------------------');
+    switch (key) {
+      case '1':
+        btnList = [{ name: '1#注氮一键启停' }, { name: '2#注氮一键启停' }];
+        break;
+      case '2':
+        btnList = [{ name: '高压分闸' }, { name: '高压合闸' }, { name: '高压复位' }, { name: '低压复位' }, { name: '漏电测试' }];
+        break;
+      case '3':
+        btnList = [{ name: '分闸' }, { name: '合闸' }, { name: '复位' }];
+        break;
+      case '4':
+        break;
+    }
+  };
 
-import { onMounted, reactive, ref, defineEmits, onUnmounted, watch } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import { transformMobileH, transformMobileL, protectionEnableH, protectionEnableL, electricMonitor, electricState, fanControlState1, fanControlState2, fanSetting1, fanSetting2, data_model } from '../../fanLocalMonitor/fanLocal.data'
-import { SvgPreview } from 'mky-svg'
-
-const emit = defineEmits(['close', 'register'])
-const props = defineProps({
-  // detailTitle:{
-  //   type:String,
-  //   default:''
-  //   }
-
-})
-//btn列表
-let btnList = reactive([
-  { name: "1#注氮一键启停" },
-  { name: "2#注氮一键启停" }
-])
-
-//1#注氮列表数据
-let fanControlState1 = reactive({
-  空压机: {
-    '空压机排气压力': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: 'Kpa',
-      },
-    ],
-    '空压机排气温度': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: '­°C',
-      },
-    ],
-    '空压机运行时间': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: 'h',
-      },
-    ],
-    '空压机加载时间': [
-      {
-        code: '',
-        value: 55.0,
-      },
-      {
-        code: '',
-        value: 'h',
-      },
-    ],
-  },
-  流量: {
-    '累计流量': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: 'm³',
-      },
-    ],
-    '瞬时流量': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: 'm³/h',
-      },
-    ],
-  },
-  其他: {
-    膜前温度: [
-      {
-        code: '',
-        value: 0,
-      },
-      {
-        code: '',
-        value: '­°C',
-      },
-    ],
-    氮气纯度: [
-      {
-        code: '',
-        value: 0,
-      },
-      {
-        code: '',
-        value: '­%',
-      },
-    ],
-  },
-})
-
-//2#注氮列表
-let fanControlState2 = reactive({
-  空压机: {
-    '空压机排气压力': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: 'Kpa',
-      },
-    ],
-    '空压机排气温度': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: '­°C',
-      },
-    ],
-    '空压机运行时间': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: 'h',
-      },
-    ],
-    '空压机加载时间': [
-      {
-        code: '',
-        value: 55.0,
-      },
-      {
-        code: '',
-        value: 'h',
-      },
-    ],
-  },
-  流量: {
-    '累计流量': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: 'm³',
-      },
-    ],
-    '瞬时流量': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: 'm³/h',
-      },
-    ],
-  },
-  其他: {
-    膜前温度: [
-      {
-        code: '',
-        value: 0,
-      },
-      {
-        code: '',
-        value: '­°C',
-      },
-    ],
-    氮气纯度: [
-      {
-        code: '',
-        value: 0,
-      },
-      {
-        code: '',
-        value: '­%',
-      },
-    ],
-  },
-})
-
-
-//移变-高压
-let shifTing = reactive({
-  状态: {
-    '运行状态': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '合闸命令返回': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '上位分闸': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '额定电流': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '上位复位': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '控制方式': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '电流': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '系统电压': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '短路电流整定': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '过载电流整定': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '过载电流': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '短路电流': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '温度': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '电度高位': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '电度低位': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-    '上位合闸': [
-      {
-        code: '',
-        value: 55.0,
-      },
-
-    ],
-  },
-  投撤: {
-    '高压零序电压投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高压差动投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高压瓦斯闭锁投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高压断相投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-
-    '高压风电闭锁投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高压失压投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高压过载投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高、低压联锁1投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高压短路投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高、低压联锁2投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高压机电闭锁投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高压腔盖闭锁投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '高压相不平衡投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    ' 铁芯接地保护投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    ' 高压欠压投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    ' 高压零序电流投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    ' 高压温度投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-  },
-
-})
-//移变-低压
-let shifTing1 = reactive({
-  状态: {
-    '运行状态': [
-      {
-        code: '',
-        value: 0,
-      },
-    ],
-    '上位复位': [
-      {
-        code: '',
-        value: 0.0,
-      },
-    ],
-    '短路电流整定': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '短路电流': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '额定电流': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '过载电流整定': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '漏电电阻': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '电流': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '过载电流': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-    '系统电压': [
-      {
-        code: '',
-        value: 0.0,
-      },
-
-    ],
-  },
-  投撤: {
-    '低压欠压投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: '',
-      },
-    ],
-
-
-    '低压漏电投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: '',
-      },
-    ],
-    '低压过载投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: '',
-      },
-    ],
-    '低压过压投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: '',
-      },
-    ],
-
-
-
-
-    '低压短路投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: '',
-      },
-    ],
-
-
-    '低压相不平衡投撤': [
-      {
-        code: '',
-        value: 0.0,
-      },
-      {
-        code: '',
-        value: '',
-      },
-    ],
-
-  },
-
-})
-
-
-
-const activeKey = ref('1')
-const activeBox = ref(3)
-// 注册 modal
-const [register, { closeModal }] = useModalInner();
-
-//tab选项切换
-const tabChange = (key) => {
-  activeKey.value = key
-  console.log(activeKey, '--------------------')
-  switch (key) {
-    case '1':
-      btnList = [
-        { name: "1#注氮一键启停" },
-        { name: "2#注氮一键启停" }
-
-      ]
-      break;
-    case '2':
-      btnList = [
-        { name: '高压分闸' },
-        { name: '高压合闸' },
-        { name: '高压复位' },
-        { name: '低压复位' },
-        { name: '漏电测试' },
-
-      ]
-      break;
-    case '3':
-      btnList = [
-        { name: '分闸' },
-        { name: '合闸' },
-        { name: '复位' },
-
-
-      ]
-      break;
-    case '4':
-
-      break;
+  async function onSubmit() {
+    emit('close');
+    closeModal();
   }
 
-}
-
-async function onSubmit() {
-  emit('close')
-  closeModal();
-}
-
-onMounted(async () => {
-
-});
-onUnmounted(() => {
-
-});
+  onMounted(async () => {});
+  onUnmounted(() => {});
 </script>
 <style scoped lang="less">
-@import '/@/design/vent/color.less';
-@import '/@/design/vent/modal.less';
-@import 'mky-svg/style.css';
-
-@ventSpace: zxm;
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @import 'mky-svg/style.css';
 
-.detail-box {
-  width: 100%;
-  height: 100%;
-  padding: 10px;
-  display: flex;
-  justify-content: space-between;
+  @ventSpace: zxm;
 
-  .left-box {
-    width: 800px;
+  .detail-box {
+    width: 100%;
     height: 100%;
-    // height: initial;
-    border-right: 1px solid #ffffff22;
+    padding: 10px;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 30px;
-    margin-right: 10px;
-  }
-
-  .right-box {
-    flex: 1;
-    height: 100%;
+    justify-content: space-between;
 
-    .right-title {
-      line-height: 60px;
-      background: #ffffff11;
-      margin-bottom: 2px;
-      text-align: center;
-      font-size: 20px;
-      letter-spacing: 2px;
-      color: #f0f0f0;
+    .left-box {
+      width: 800px;
+      height: 100%;
+      // height: initial;
+      border-right: 1px solid #ffffff22;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 30px;
+      margin-right: 10px;
     }
 
-    .detail-container {
-      position: relative;
-      // height: calc(100% - 60px);
+    .right-box {
+      flex: 1;
       height: 100%;
-      display: flex;
-      justify-content: space-between;
 
-      .detail-control {
-        width: 300px;
-        height: initial;
-        display: flex;
-        flex-direction: column;
+      .right-title {
+        line-height: 60px;
         background: #ffffff11;
-        margin-right: 10px;
-        padding: 10px;
-
-        .control-item {}
+        margin-bottom: 2px;
+        text-align: center;
+        font-size: 20px;
+        letter-spacing: 2px;
+        color: #f0f0f0;
       }
 
-      .right-detail-box {
-        flex: 1;
-        background: #ffffff11;
-        // padding-bottom: 40px;
+      .detail-container {
+        position: relative;
+        // height: calc(100% - 60px);
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
 
-        .detail-state {
-          width: 100%;
-          height: 100%;
+        .detail-control {
+          width: 300px;
+          height: initial;
           display: flex;
-          justify-content: space-between;
+          flex-direction: column;
+          background: #ffffff11;
+          margin-right: 10px;
+          padding: 10px;
+
+          .control-item {
+          }
         }
 
-        .detail-item {
+        .right-detail-box {
           flex: 1;
-          padding: 0 40px;
-          color: #fff;
-
-          .item-title {
-            line-height: 60px;
-            font-size: 24px;
-            text-align: center;
+          background: #ffffff11;
+          // padding-bottom: 40px;
+
+          .detail-state {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: space-between;
           }
 
-          .detail-item-row {
-            padding: 10px 0;
+          .detail-item {
+            flex: 1;
+            padding: 0 40px;
+            color: #fff;
+
+            .item-title {
+              line-height: 60px;
+              font-size: 24px;
+              text-align: center;
+            }
+
+            .detail-item-row {
+              padding: 10px 0;
+            }
           }
-        }
 
-        .btn-box {
-          position: absolute;
-          top: 0px;
-          right: 18px;
-          height: 46px;
-          line-height: 46px;
+          .btn-box {
+            position: absolute;
+            top: 0px;
+            right: 18px;
+            height: 46px;
+            line-height: 46px;
+          }
         }
-
       }
-    }
 
-    .value {
-      color: #00eefffe;
+      .value {
+        color: #00eefffe;
+      }
     }
   }
-}
 
-.data-group {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: 0 20px 8px 20px;
-  color: #fff;
-
-  .data-item {
-    width: calc(50% - 20px);
+  .data-group {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
-    line-height: 24px;
-    background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
-    margin: 4px 0;
-  }
+    padding: 0 20px 8px 20px;
+    color: #fff;
 
-  .value {
-    color: #00eefffe;
-  }
+    .data-item {
+      width: calc(50% - 20px);
+      display: flex;
+      justify-content: space-between;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
 
-  .data-item1 {
-    width: 100%;
-    line-height: 24px;
-    background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
-    margin: 4px 0;
-  }
-}
-.data-group2 {
-  height: calc(100% - 54px);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: 0 10px 8px 10px;
-  color: #fff;
-  overflow-y: auto;
+    .value {
+      color: #00eefffe;
+    }
 
-  .data-item {
-    width: calc(50% - 20px);
+    .data-item1 {
+      width: 100%;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
+  }
+  .data-group2 {
+    height: calc(100% - 54px);
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
-    line-height: 24px;
-    background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
-    margin: 4px 0;
-  }
+    padding: 0 10px 8px 10px;
+    color: #fff;
+    overflow-y: auto;
 
-  .value {
-    color: #00eefffe;
-  }
-
-  .data-item1 {
-    width: 100%;
-    line-height: 24px;
-    background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
-    margin: 4px 0;
-  }
-}
-
-.data-group1 {
-  .data-item {
-    width: calc(100% - 20px);
-    .title {
+    .data-item {
+      width: calc(50% - 20px);
       display: flex;
-      flex: 1;
-      height: 100%;
-      justify-content: flex-start;
+      justify-content: space-between;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
     }
 
     .value {
-      display: flex;
-      flex: 1;
-      height: 100%;
-      justify-content: flex-end;
+      color: #00eefffe;
     }
 
+    .data-item1 {
+      width: 100%;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
   }
-}
-.data-group3 {
-  .data-item {
-    width: calc(50% - 10px);
 
-    .title {
-      display: flex;
-      flex: 2;
-      height: 100%;
-      justify-content: flex-start;
-    }
+  .data-group1 {
+    .data-item {
+      width: calc(100% - 20px);
+      .title {
+        display: flex;
+        flex: 1;
+        height: 100%;
+        justify-content: flex-start;
+      }
 
-    .value {
-      display: flex;
-      flex: 1;
-      height: 100%;
-      justify-content: flex-end;
+      .value {
+        display: flex;
+        flex: 1;
+        height: 100%;
+        justify-content: flex-end;
+      }
     }
+  }
+  .data-group3 {
+    .data-item {
+      width: calc(50% - 10px);
+
+      .title {
+        display: flex;
+        flex: 2;
+        height: 100%;
+        justify-content: flex-start;
+      }
 
+      .value {
+        display: flex;
+        flex: 1;
+        height: 100%;
+        justify-content: flex-end;
+      }
+    }
   }
-}
 
-.padding-20 {
-  height: calc(50% - 30px);
-  padding: 10px;
-  box-sizing: border-box;
-}
+  .padding-20 {
+    height: calc(50% - 30px);
+    padding: 10px;
+    box-sizing: border-box;
+  }
 
-.tabs-box {
-  width: 100%;
-  height: 100%;
-}
+  .tabs-box {
+    width: 100%;
+    height: 100%;
+  }
 
-:deep(.@{ventSpace}-tabs-nav) {
-  padding: 0 20px;
-}
-::v-deep .zxm-tabs-content{
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
+  :deep(.@{ventSpace}-tabs-nav) {
+    padding: 0 20px;
+  }
+  ::v-deep .zxm-tabs-content {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
 </style>

src/views/vent/monitorManager/deviceMC/HistoryTable.vue

@@ -432,7 +432,7 @@
 </script>
 
 <style scoped lang="less">
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
   :deep(.@{ventSpace}-table-body) {
     height: auto !important;

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

@@ -220,66 +220,66 @@
     }
   }
 
-async function getDataSource() {
-  let resultData, searchForm;
-      if (monitorTable.value) {
-        const formData = monitorTable.value.getForm();
-        searchForm = formData.getFieldsValue();
-      }
+  async function getDataSource() {
+    let resultData, searchForm;
+    if (monitorTable.value) {
+      const formData = monitorTable.value.getForm();
+      searchForm = formData.getFieldsValue();
+    }
 
-      if (monitorTable.value) {
-        if (deviceType.value.startsWith('safetymonitor')) {
-          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } });
-        } else{
-          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
-        }
+    if (monitorTable.value) {
+      if (deviceType.value.startsWith('safetymonitor')) {
+        resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } });
       } else {
-        // 非安全监控
         resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
       }
-      if (resultData && resultData.msgTxt) {
-        const result = resultData.msgTxt[0];
-        if (result) {
-          const data = result['datalist'].filter((data: any) => {
-            const readData = data.readData;
-            return Object.assign(data, readData);
-          });
-          if (deviceType.value.startsWith('safetymonitor')) {
-            const resultData = <any[]>[];
-            // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
-            const dictCodes = getDictItemsByCode('safetynormal');
-            if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
-              for (let i = 0; i < dictCodes.length; i++) {
-                const dict = dictCodes[i];
-                data.forEach((item) => {
-                  if (dict['value'] == item['dataTypeName']) {
-                    resultData.push(item);
-                  }
-                });
-              }
-              dataSource.value = resultData;
-            } else {
-              dataSource.value = data;
+    } else {
+      // 非安全监控
+      resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
+    }
+    if (resultData && resultData.msgTxt) {
+      const result = resultData.msgTxt[0];
+      if (result) {
+        const data = result['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+        if (deviceType.value.startsWith('safetymonitor')) {
+          const resultData = <any[]>[];
+          // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
+          const dictCodes = getDictItemsByCode('safetynormal');
+          if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
+            for (let i = 0; i < dictCodes.length; i++) {
+              const dict = dictCodes[i];
+              data.forEach((item) => {
+                if (dict['value'] == item['dataTypeName']) {
+                  resultData.push(item);
+                }
+              });
             }
+            dataSource.value = resultData;
           } else {
-            let tableData: any[] = [];
-            let noNetData: any[] = [];
-            data.filter((el) => {
-              if (el.netStatus == 1) {
-                tableData.push(el);
-              } else {
-                noNetData.push(el);
-              }
-            });
-            dataSource.value = [...tableData, ...noNetData];
+            dataSource.value = data;
           }
         } else {
-          dataSource.value = [];
+          let tableData: any[] = [];
+          let noNetData: any[] = [];
+          data.filter((el) => {
+            if (el.netStatus == 1) {
+              tableData.push(el);
+            } else {
+              noNetData.push(el);
+            }
+          });
+          dataSource.value = [...tableData, ...noNetData];
         }
       } else {
         dataSource.value = [];
       }
-}
+    } else {
+      dataSource.value = [];
+    }
+  }
 
   onMounted(async () => {
     const { currentRoute } = useRouter();
@@ -301,7 +301,7 @@ async function getDataSource() {
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
   @ventSpace: zxm;