[Wip 0000] 通风 6.0 主题化

src/components/vent/ventBox1.vue

@@ -26,10 +26,31 @@
 
   @{theme-deepblue} {
     .vent-box1-bg {
-      --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box1-top.png');
-      --image-box1-bottom: url('/@/assets/images/themify/deepblue/vent/border/box1-bottom.png');
+      --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box2-top.png');
+      --image-box1-bottom: none;
+      // --image-box1-bottom: url('/@/assets/images/themify/deepblue/vent/border/box1-bottom.png');
       --container-color: #0e223b;
-      --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
+      // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
+      --container-image: none;
+    }
+
+    .vent-box1-bg {
+      border: 1px solid #3a4b5f;
+      border-radius: 10px;
+      background: var(--container-color) no-repeat;
+      padding-top: 10px;
+      .box1-top {
+        height: 35px;
+        background: var(--image-box1-top) no-repeat;
+        background-size: 94% 25px;
+        background-position: center center;
+        .title {
+          height: 100%;
+          padding-left: 8%;
+          justify-content: flex-start;
+          align-items: center;
+        }
+      }
     }
   }
 

src/design/ant/pagination.less

@@ -71,7 +71,7 @@ html[data-theme='dark'] {
     }
 
     .@{ventSpace}-pagination-item-active {
-      background-color: @primary-color !important;
+      background-color: @vent-primary-color !important;
       border: none;
       border-radius: none !important;
 

src/design/theme.less

@@ -97,7 +97,7 @@ html[data-theme='light'] {
 @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-form-item-border: var(--vent-form-item-border);
 @vent-gas-primary-text: var(--vent-gas-primary-text);
 @vent-gas-tab-bg: var(--vent-gas-tab-bg);
 @vent-gas-tab-bg-avtived: var(--vent-gas-tab-bg-avtived);
@@ -116,6 +116,10 @@ html[data-theme='light'] {
 @vent-tabs-bg: var(--vent-tabs-bg);
 @vent-tabs-table-thead: var(--vent-tabs-table-thead);
 @vent-tabs-action-link: var(--vent-tabs-action-link);
+@vent-font-action-link: var(--vent-font-action-link);
+@vent-modal-bg2: var(--vent-modal-bg2);
+@vent-primary-color: var(--vent-primary-color);
+@vent-modal-title: var(--vent-modal-title);
 
 // 下面的代码负责将主题相关的选择器、图片前缀等 less 变量声明
 @theme-dark: ~"html[data-theme='dark2']";

src/design/themify/dark.less

@@ -1,4 +1,6 @@
 html[data-theme='dark2'] {
+    --vent-primary-color: #1580cc;
+
     --vent-header-bg-color: linear-gradient(#005177, #0a344c);
 
     --vent-btn-primary-hover-color: #389bd9;
@@ -12,15 +14,17 @@ html[data-theme='dark2'] {
     --vent-table-no-hover: #00bfff10;
     --vent-table-action-link: #00e7ff;
     
+    --vent-modal-title: #39e9fe;
     --vent-modal-border: #04bdaa;
     --vent-modal-bg: #0042ab22;
     --vent-modal-box-shadow: #2b87ff;
+    --vent-modal-bg2: linear-gradient(#2cd1ff55, #1eb0ff55);
 
     --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
     --vent-tabs-table-thead: #3d9dd433;
     --vent-tabs-action-link: #28f3f3;
     
-    --vent-form-item-boder: #3ad8ff77;
+    --vent-form-item-border: #3ad8ff77;
     
     --vent-text-base: #ddd;
     --vent-base-color: #09172c;
@@ -28,6 +32,7 @@ html[data-theme='dark2'] {
     --vent-base-light-bg-opcity: #60f4ff55;
     --vent-transparent: #ffffff00;
     --vent-font-color: #ffffff;
+    --vent-font-action-link: #7af5ff;
 
     --vent-configurable-bg: #09316a;
     --vent-configurable-module-bg: #3df6ff22;

src/design/themify/deepblue.less

@@ -1,4 +1,6 @@
 html[data-theme='deepblue'] {
+    --vent-primary-color: #0A84FF;
+
     --vent-header-bg-color: linear-gradient(#0A84FF99, #0A84FF22);
 
     --vent-btn-primary-hover-color: #2986e9;
@@ -12,9 +14,11 @@ html[data-theme='deepblue'] {
     --vent-table-no-hover: #28385180;
     --vent-table-action-link: #0a80fa;
 
+    --vent-modal-title: #0a80fa;
     --vent-modal-border: #3F506A;
     --vent-modal-bg: #0b1f3980;
     --vent-modal-box-shadow: #316b92;
+    --vent-modal-bg2: linear-gradient(#2986e955, #0963c155);
 
     --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
     --vent-tabs-table-thead: #3d9dd433;
@@ -23,7 +27,7 @@ html[data-theme='deepblue'] {
     // --vent-tabs-table-thead: #172943;
     --vent-tabs-action-link: #0a80fa;
     
-    --vent-form-item-boder: #3ad8ff77;
+    --vent-form-item-border: #3aa6ff77;
 
     --vent-text-base: #fff;
     --vent-base-color: #021632;
@@ -31,6 +35,7 @@ html[data-theme='deepblue'] {
     --vent-base-light-bg-opcity: #8691a355;
     --vent-transparent: #ffffff00;
     --vent-font-color: #ffffff;
+    --vent-font-action-link: #0a80fa;
 
     --vent-configurable-bg: #02132c;
     --vent-configurable-module-bg: #0d2037;
@@ -45,7 +50,7 @@ html[data-theme='deepblue'] {
     --vent-gas-tab-bg-actived: #166ab5;
     --vent-gas-tab-border: #3F506A;
     --vent-gas-primary-text: #ededed;
-    --vent-gas-primary-bg: #1673bf;
+    --vent-gas-primary-bg: #244d84;
     --vent-gas-primary-trasparent-bg: #0091ff12;
 
     --vent-device-manager-box-border: #3F506A50;

src/design/themify/light.less

@@ -1,4 +1,6 @@
 html[data-theme='light'] {
+    --vent-primary-color: #1580cc;
+
     --vent-header-bg-color: linear-gradient(#005177, #0a344c);
 
     --vent-btn-primary-hover-color: #389bd9;
@@ -12,15 +14,17 @@ html[data-theme='light'] {
     --vent-table-no-hover: #00bfff10;
     --vent-table-action-link: #00e7ff;
     
+    --vent-modal-title: #39e9fe;
     --vent-modal-border: #04bdaa;
     --vent-modal-bg: #0042ab22;
     --vent-modal-box-shadow: #2b87ff;
+    --vent-modal-bg2: linear-gradient(#2cd1ff55, #1eb0ff55);
 
     --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
     --vent-tabs-table-thead: #3d9dd433;
     --vent-tabs-action-link: #28f3f3;
     
-    --vent-form-item-boder: #3ad8ff77;
+    --vent-form-item-border: #3ad8ff77;
     
     --vent-text-base: #ddd;
     --vent-base-color: #09172c;
@@ -28,6 +32,7 @@ html[data-theme='light'] {
     --vent-base-light-bg-opcity: #60f4ff55;
     --vent-transparent: #ffffff00;
     --vent-font-color: #ffffff;
+    --vent-font-action-link: #7af5ff;
 
     --vent-configurable-bg: #09316a;
     --vent-configurable-module-bg: #3df6ff22;

src/design/themify/vent1.less

@@ -1,5 +1,7 @@
 html {
     // html[data-theme='vent1'] {
+    --vent-primary-color: #1580cc;
+
     --vent-header-bg-color: linear-gradient(#005177, #0a344c);
 
     --vent-btn-primary-hover-color: #389bd9;
@@ -13,15 +15,17 @@ html {
     --vent-table-no-hover: #00bfff10;
     --vent-table-action-link: #00e7ff;
     
+    --vent-modal-title: #39e9fe;
     --vent-modal-border: #04bdaa;
     --vent-modal-bg: #0042ab22;
     --vent-modal-box-shadow: #2b87ff;
+    --vent-modal-bg2: linear-gradient(#2cd1ff55, #1eb0ff55);
 
     --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
     --vent-tabs-table-thead: #3d9dd433;
     --vent-tabs-action-link: #28f3f3;
     
-    --vent-form-item-boder: #3ad8ff77;
+    --vent-form-item-border: #3ad8ff77;
     
     --vent-text-base: #ddd;
     --vent-base-color: #09172c;
@@ -29,6 +33,7 @@ html {
     --vent-base-light-bg-opcity: #60f4ff55;
     --vent-transparent: #ffffff00;
     --vent-font-color: #ffffff;
+    --vent-font-action-link: #7af5ff;
 
     --vent-configurable-bg: #09316a;
     --vent-configurable-module-bg: #3df6ff22;

src/design/vent/antCss.less

@@ -159,7 +159,7 @@ tr.@{ventSpace}-table-expanded-row:hover > td {
     color: @vent-font-color !important;
   }
   .@{ventSpace}-modal-title {
-    color: #39e9fe !important;
+    color: @vent-modal-title !important;
   }
 }
 .@{ventSpace}-modal-body {

src/design/vent/color.less

@@ -3,7 +3,7 @@
 // @vent-table-hover: #ffffff22;
 // @vent-table-hover: #0dc3ff22;
 // @vent-table-no-hover: #00bfff10;
-// @vent-form-item-boder: #3ad8ff77;
+// @vent-form-item-border: #3ad8ff77;
 // @ventSpace: zxm;
 // @vent-base-color: #09172c;
 @ventSpace: zxm;

src/design/vent/comment.less

@@ -1,107 +1,137 @@
 @import '../theme.less';
 
+@{theme-deepblue} {
+  .video-parent {
+    --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
+  }
+
+  #LivePlayerBox {
+    --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
+  }
+}
+
 /*公共*/
 .vent-flex-row {
   display: flex;
   align-items: center;
 }
+
 .vent-flex-row-between {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
 .vent-flex-row-wrap {
   display: flex;
   flex-wrap: wrap;
 }
-.vent-row-center{
+
+.vent-row-center {
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
 .vent-column-center {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
-.vent-right{
+
+.vent-right {
   text-align: right;
 }
 
-.vent-margin-b-20{
+.vent-margin-b-20 {
   margin-bottom: 20px;
 }
+
 .vent-margin-b-10 {
   margin-bottom: 10px;
 }
+
 .vent-margin-b-5 {
   margin-bottom: 5px;
 }
+
 .vent-margin-t-20 {
   margin-top: 20px !important;
 }
+
 .vent-margin-t-15 {
   margin-top: 15px !important;
 }
+
 .vent-margin-t-10 {
   margin-top: 10px;
 }
+
 .vent-margin-l-5 {
   margin-left: 5px;
 }
+
 .vent-margin-l-8 {
   margin-left: 8px;
 }
+
 .vent-margin-l-10 {
   margin-left: 10px;
 }
+
 .vent-margin-l-15 {
   margin-left: 15px;
 }
+
 .vent-margin-l-20 {
   margin-left: 20px;
 }
+
 .vent-margin-r-8 {
   margin-right: 8px;
 }
+
 .vent-margin-r-10 {
   margin-right: 10px;
 }
+
 .vent-margin-r-5 {
   margin-right: 5px;
 }
 
-.vent-padding-lr-5{
+.vent-padding-lr-5 {
   padding: 0 5px
 }
+
 .vent-padding-lr-10 {
   padding: 0 10px
 }
+
 .table-action-link {
   color: @vent-table-action-link;
   padding: 0 5px;
 }
 
 .signal-round {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  // margin: 0 10px;
+  position: relative;
+
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    top: -2px;
+    left: -2px;
     border-radius: 50%;
-    // margin: 0 10px;
-    position: relative;
-
-    &::after {
-      display: block;
-      content: '';
-      position: absolute;
-      width: 12px;
-      height: 12px;
-      top: -2px;
-      left: -2px;
-      border-radius: 50%;
-    }
   }
+}
 
 .signal-round-gry {
   background-color: #858585;
@@ -114,6 +144,7 @@
 
 .signal-round-run {
   background-color: #67fc00;
+
   &::after {
     background-color: #67fc0044;
     box-shadow: 0 0 1px 1px #c6ff77;
@@ -122,6 +153,7 @@
 
 .signal-round-blue {
   background-color: #00ffe1;
+
   &::after {
     background-color: #00b2de66;
     box-shadow: 0 0 1px 1px rgba(105, 238, 255, 0.3);
@@ -173,20 +205,23 @@
 }
 
 // 视频样式
-.video-parent{
+.video-parent {
+  --image-camera_bg: url('/@/assets/images/vent/camera_bg.png');
   margin-top: 10px;
   position: relative;
   width: 314px;
   height: 208px;
-  background: url('/@/assets/images/vent/camera_bg.png');
+  background: var(--image-camera_bg);
   background-size: cover;
   padding: 10px;
-  .rtspVideo{
+
+  .rtspVideo {
     border: 1px solid #ffffff22;
     height: 180px;
     width: 320px;
   }
-  .video-name{
+
+  .video-name {
     font-size: 14px;
     position: absolute;
     top: 25px;
@@ -201,17 +236,20 @@
     text-overflow: ellipsis;
   }
 }
-#LivePlayerBox{
+
+#LivePlayerBox {
+  --image-camera_bg: url('/@/assets/images/vent/camera_bg.png');
   width: 100%;
   // height: 100%;
   height: 208px;
   position: relative;
-  .liveVideo{
+
+  .liveVideo {
     height: 208px;
     pointer-events: auto !important;
     width: 314px;
     padding: 10px;
-    background: url('/@/assets/images/vent/camera_bg.png');
+    background: var(--image-camera_bg);
     background-size: cover;
     // .player {
     //     width: 314px;
@@ -221,7 +259,7 @@
     //     background-size: cover;
     //   }
   }
- 
+
 }
 
 @keyframes breathe {

src/design/vent/index.less

@@ -67,14 +67,14 @@
       .@{ventSpace}-input-number-handler-wrap {
         color: @vent-font-color;
         // background-color: #ffffff17 !important;
-        border: 1px solid @vent-form-item-boder !important;
+        border: 1px solid @vent-form-item-border !important;
       }
       .@{ventSpace}-picker,
       .@{ventSpace}-select-selector {
         width: 100%;
         color: @vent-font-color !important;
         // background: #ffffff17 !important;
-        border: 1px solid @vent-form-item-boder !important;
+        border: 1px solid @vent-form-item-border !important;
       }
       
     }
@@ -101,7 +101,7 @@
     .@{ventSpace}-input-number {
       width: 100%;
       .@{ventSpace}-input-number-input-wrap {
-        border: 1px solid @vent-form-item-boder !important;
+        border: 1px solid @vent-form-item-border !important;
       }
     }
 
@@ -205,13 +205,13 @@
 //   .ant-input-number-handler-wrap {
 //     color: @vent-font-color;
 //     background-color: #ffffff17 !important;
-//     border: 1px solid @vent-form-item-boder !important;
+//     border: 1px solid @vent-form-item-border !important;
 //   }
 //   .ant-picker,
 //   .ant-select-selector {
 //     color: @vent-font-color !important;
 //     background: #ffffff17 !important;
-//     border: 1px solid @vent-form-item-boder !important;
+//     border: 1px solid @vent-form-item-border !important;
 //   }
 //   .anticon,
 //   input,

src/design/vent/modal.less

@@ -300,7 +300,7 @@
       padding: 0 15px 5px 15px;
       cursor: pointer;
       &:hover {
-        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+        background: var(--vent-modal-bg2);
       }
       &::before {
         width: calc(100% - 6px);
@@ -435,7 +435,7 @@
         top: 6px;
         z-index: 99;
         &:hover {
-          background: linear-gradient(#2cd1ff55, #1eb0ff55);
+          background: var(--vent-modal-bg2);
         }
 
         &::before {
@@ -637,7 +637,7 @@
   // width: 100% !important;
   // height: 30px !important;
   background: #00000017 !important;
-  border: 1px solid @vent-form-item-boder !important;
+  border: 1px solid @vent-form-item-border !important;
   input,
   .@{ventSpace}-select-selection-item,
   .@{ventSpace}-picker-suffix {

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

@@ -81,7 +81,18 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .bottom-btn-group {
+      --image-bottom-btn: url('/@/assets/images/themify/deepblue/vent/bottom-btn.png');
+      --image-bottom-btn-active: url('/@/assets/images/themify/deepblue/vent/bottom-btn-active.png');
+    }
+  }
+
   .bottom-btn-group {
+    --image-bottom-btn: url('/@/assets/images/vent/bottom-btn.png');
+    --image-bottom-btn-active: url('/@/assets/images/vent/bottom-btn-active.png');
     display: flex;
     position: fixed;
     width: 100%;
@@ -100,13 +111,13 @@
       cursor: pointer;
       padding-bottom: 2px;
       pointer-events: auto;
+      background: var(--image-bottom-btn);
       font-family: 'ysbtFont';
       font-size: 18px;
-      background: url('/@/assets/images/vent/bottom-btn.png');
     }
     .btn-item-active {
+      background: var(--image-bottom-btn-active) !important;
       color: #ffffff !important;
-      background: url('/@/assets/images/vent/bottom-btn-active.png') !important;
     }
     .btn-item-route {
       width: 194px;

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

@@ -9,334 +9,334 @@
 </template>
 
 <script lang="ts" setup>
-//ts语法
-import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
-import { FormSchema } from '/@/components/Form/index';
-import { BasicTable } from '/@/components/Table';
-import { useListPage } from '/@/hooks/system/useListPage';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { defHttp } from '/@/utils/http/axios';
-import dayjs from 'dayjs';
-import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+  //ts语法
+  import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
+  import { FormSchema } from '/@/components/Form/index';
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { defHttp } from '/@/utils/http/axios';
+  import dayjs from 'dayjs';
+  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
 
-const props = defineProps({
-  columnsType: {
-    type: String,
-  },
-  columns: {
-    type: Array,
-    // required: true,
-    default: () => [],
-  },
-  historyColumns: {
-    type: Array,
-    default: () => [],
-  },
-  id: {
-    type: String,
-  },
-  scroll: {
-    type: Object,
-    default: { y: 0 },
-  },
-  formSchemas: {
-    type: Array<FormSchema>,
-    default: () => [],
-  },
-});
-//获取分站数据
-const getDeviceListApi = (params) => defHttp.get({ url: '/safety/ventanalySubStation/alllist', params });
-const historyTable = ref();
-const loading = ref(false);
-const dataSource = ref([]);
+  const props = defineProps({
+    columnsType: {
+      type: String,
+    },
+    columns: {
+      type: Array,
+      // required: true,
+      default: () => [],
+    },
+    historyColumns: {
+      type: Array,
+      default: () => [],
+    },
+    id: {
+      type: String,
+    },
+    scroll: {
+      type: Object,
+      default: { y: 0 },
+    },
+    formSchemas: {
+      type: Array<FormSchema>,
+      default: () => [],
+    },
+  });
+  //获取分站数据
+  const getDeviceListApi = (params) => defHttp.get({ url: '/safety/ventanalySubStation/alllist', params });
+  const historyTable = ref();
+  const loading = ref(false);
+  const dataSource = ref([]);
 
-const emit = defineEmits(['change']);
+  const emit = defineEmits(['change']);
 
-const historyType = ref('');
-const deviceKide = ref('');
-const columns = ref([]);
-const deviceOptions = ref([]);
-const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
-const deviceTypeStr = ref('');
-loading.value = true;
+  const historyType = ref('');
+  const deviceKide = ref('');
+  const columns = ref([]);
+  const deviceOptions = ref([]);
+  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
+  const deviceTypeStr = ref('');
+  loading.value = true;
 
-watch(
-  () => {
-    return props.columnsType;
-  },
-  async (newVal) => {
-    debugger;
-    if (!newVal) return;
-    deviceKide.value = newVal;
-    if (historyTable.value) {
-      getForm().resetFields();
-      // getForm().updateSchema();
-      // getForm();
+  watch(
+    () => {
+      return props.columnsType;
+    },
+    async (newVal) => {
+      debugger;
+      if (!newVal) return;
+      deviceKide.value = newVal;
+      if (historyTable.value) {
+        getForm().resetFields();
+        // getForm().updateSchema();
+        // getForm();
+      }
+      dataSource.value = [];
+      await getDeviceList();
+      nextTick(() => {
+        getDataSource();
+      });
+
+      if (historyTable.value) reload();
+    },
+    {
+      immediate: true,
     }
-    dataSource.value = [];
-    await getDeviceList();
-    nextTick(() => {
-      getDataSource();
-    });
+  );
 
-    if (historyTable.value) reload();
-  },
-  {
-    immediate: true,
-  }
-);
+  watch(
+    () => props.scroll.y,
+    (newVal) => {
+      if (newVal) {
+        tableScroll.value = { y: newVal - 100 };
+      } else {
+        tableScroll.value = {};
+      }
+    }
+  );
 
-watch(
-  () => props.scroll.y,
-  (newVal) => {
-    if (newVal) {
-      tableScroll.value = { y: newVal - 100 };
-    } else {
-      tableScroll.value = {};
+  watch(
+    () => props.id,
+    async () => {
+      await getForm().setFieldsValue({});
+      await getDeviceList();
     }
-  }
-);
+  );
 
-watch(
-  () => props.id,
-  async () => {
-    await getForm().setFieldsValue({});
-    await getDeviceList();
+  async function getDeviceList() {
+    let result;
+    const res = await getDeviceListApi({ column: 'createTime', pageNo: 1, pageSize: 10000 });
+    result = res;
+    if (result) {
+      deviceOptions.value = [];
+      deviceOptions.value = result.map((item) => {
+        return {
+          label: item['strinstallpos'],
+          value: item['id'],
+          strinstallpos: item['strinstallpos'],
+        };
+        // return { label: item['strname'], value: item['id']}
+      });
+    }
+    deviceOptions.value.unshift({ label: '--请选择设备--', value: '', strinstallpos: '' });
   }
-);
 
-async function getDeviceList() {
-  let result;
-  const res = await getDeviceListApi({ column: 'createTime', pageNo: 1, pageSize: 10000 });
-  result = res;
-  if (result) {
-    deviceOptions.value = [];
-    deviceOptions.value = result.map((item) => {
-      return {
-        label: item['strinstallpos'],
-        value: item['id'],
-        strinstallpos: item['strinstallpos'],
-      };
-      // return { label: item['strname'], value: item['id']}
-    });
+  function resetFormParam() {
+    const formData = getForm().getFieldsValue();
+    const pagination = getPaginationRef();
+    formData['pageNo'] = pagination['current'];
+    formData['pageSize'] = pagination['pageSize'];
+    formData['column'] = 'createTime';
+    const params = {
+      pageNo: pagination['current'],
+      pageSize: pagination['pageSize'],
+      column: pagination['createTime'],
+      starttime_begin: formData['starttime_begin'],
+      starttime_endtime: formData['starttime_endtime'],
+      nsubstationid: formData['nsubstationid'],
+      nwartype: 1001,
+    };
+    return params;
   }
-  deviceOptions.value.unshift({ label: '--请选择设备--', value: '', strinstallpos: '' });
-}
-
-function resetFormParam() {
-  const formData = getForm().getFieldsValue();
-  const pagination = getPaginationRef();
-  formData['pageNo'] = pagination['current'];
-  formData['pageSize'] = pagination['pageSize'];
-  formData['column'] = 'createTime';
-  const params = {
-    pageNo: pagination['current'],
-    pageSize: pagination['pageSize'],
-    column: pagination['createTime'],
-    starttime_begin: formData['starttime_begin'],
-    starttime_endtime: formData['starttime_endtime'],
-    nsubstationid: formData['nsubstationid'],
-    nwartype: 1001,
-  };
-  return params;
-}
 
-async function getDataSource() {
-  dataSource.value = [];
-  setLoading(true);
-  const params = await resetFormParam();
-  const result = await defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params: params });
-  // if (result['datalist']['records'].length > 0) {
-  //   dataSource.value = result['datalist']['records'].map((item: any) => {
-  //     return Object.assign(item, item['readData']);
-  //   });
-  // } else {
-  //   dataSource.value = [];
-  // }
-  dataSource.value = result['records'];
+  async function getDataSource() {
+    dataSource.value = [];
+    setLoading(true);
+    const params = await resetFormParam();
+    const result = await defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params: params });
+    // if (result['datalist']['records'].length > 0) {
+    //   dataSource.value = result['datalist']['records'].map((item: any) => {
+    //     return Object.assign(item, item['readData']);
+    //   });
+    // } else {
+    //   dataSource.value = [];
+    // }
+    dataSource.value = result['records'];
 
-  setLoading(false);
-}
+    setLoading(false);
+  }
 
-// 列表页面公共参数、方法
-const { tableContext } = useListPage({
-  tableProps: {
-    // api: list,
-    columns: props.historyColumns ? props.historyColumns : (props.historyColumns as any[]),
-    canResize: true,
-    showTableSetting: false,
-    showActionColumn: false,
-    bordered: false,
-    size: 'small',
-    scroll: tableScroll,
-    showIndexColumn: true,
-    tableLayout: 'auto',
-    formConfig: {
-      labelAlign: 'left',
-      showAdvancedButton: false,
-      showSubmitButton: false,
-      showResetButton: false,
-      baseColProps: {
-        xs: 24,
-        sm: 24,
-        md: 24,
-        lg: 9,
-        xl: 7,
-        xxl: 4,
-      },
-      schemas:
-        props.formSchemas.length > 0
-          ? props.formSchemas
-          : [
-              {
-                field: 'starttime_begin',
-                label: '开始时间',
-                component: 'DatePicker',
-                defaultValue: dayjs().startOf('date'),
-                required: true,
-                componentProps: {
-                  showTime: true,
-                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
-                  getPopupContainer: getAutoScrollContainer,
-                },
-                colProps: {
-                  span: 4,
-                },
-              },
-              {
-                field: 'starttime_endtime',
-                label: '结束时间',
-                component: 'DatePicker',
-                defaultValue: dayjs(),
-                required: true,
-                componentProps: {
-                  showTime: true,
-                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
-                  getPopupContainer: getAutoScrollContainer,
-                },
-                colProps: {
-                  span: 4,
-                },
-              },
-              {
-                label: '查询设备',
-                field: 'nsubstationid',
-                component: 'Select',
-                defaultValue: props.id ? props.id : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
-                componentProps: {
-                  showSearch: true,
-                  filterOption: (input: string, option: any) => {
-                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  // 列表页面公共参数、方法
+  const { tableContext } = useListPage({
+    tableProps: {
+      // api: list,
+      columns: props.historyColumns ? props.historyColumns : (props.historyColumns as any[]),
+      canResize: true,
+      showTableSetting: false,
+      showActionColumn: false,
+      bordered: false,
+      size: 'small',
+      scroll: tableScroll,
+      showIndexColumn: true,
+      tableLayout: 'auto',
+      formConfig: {
+        labelAlign: 'left',
+        showAdvancedButton: false,
+        showSubmitButton: false,
+        showResetButton: false,
+        baseColProps: {
+          xs: 24,
+          sm: 24,
+          md: 24,
+          lg: 9,
+          xl: 7,
+          xxl: 4,
+        },
+        schemas:
+          props.formSchemas.length > 0
+            ? props.formSchemas
+            : [
+                {
+                  field: 'starttime_begin',
+                  label: '开始时间',
+                  component: 'DatePicker',
+                  defaultValue: dayjs().startOf('date'),
+                  required: true,
+                  componentProps: {
+                    showTime: true,
+                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                    getPopupContainer: getAutoScrollContainer,
                   },
-                  options: deviceOptions,
-                  onChange: (e, option) => {
-                    if (option) {
-                      historyType.value = option.value; // 使用选项的value（即id）更新historyType
-                    }
+                  colProps: {
+                    span: 4,
                   },
                 },
-                colProps: {
-                  span: 4,
+                {
+                  field: 'starttime_endtime',
+                  label: '结束时间',
+                  component: 'DatePicker',
+                  defaultValue: dayjs(),
+                  required: true,
+                  componentProps: {
+                    showTime: true,
+                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                    getPopupContainer: getAutoScrollContainer,
+                  },
+                  colProps: {
+                    span: 4,
+                  },
                 },
-              },
-              {
-                field: 'nwartype',
-                required: true,
-                componentProps: {
-                  valueFormat: '1001',
+                {
+                  label: '查询设备',
+                  field: 'nsubstationid',
+                  component: 'Select',
+                  defaultValue: props.id ? props.id : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
+                  componentProps: {
+                    showSearch: true,
+                    filterOption: (input: string, option: any) => {
+                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+                    },
+                    options: deviceOptions,
+                    onChange: (e, option) => {
+                      if (option) {
+                        historyType.value = option.value; // 使用选项的value（即id）更新historyType
+                      }
+                    },
+                  },
+                  colProps: {
+                    span: 4,
+                  },
                 },
-                colProps: {
-                  span: 4,
+                {
+                  field: 'nwartype',
+                  required: true,
+                  componentProps: {
+                    valueFormat: '1001',
+                  },
+                  colProps: {
+                    span: 4,
+                  },
                 },
-              },
-            ],
-    },
-    // fetchSetting: {
-    pagination: {
-      current: 1,
-      pageSize: 10,
-      pageSizeOptions: ['10', '30', '50', '100'],
-      showQuickJumper: false,
-    },
-    beforeFetch() {
-      const newParams = { ...resetFormParam() };
-      // debugger;
-      return newParams;
+              ],
+      },
+      // fetchSetting: {
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '30', '50', '100'],
+        showQuickJumper: false,
+      },
+      beforeFetch() {
+        const newParams = { ...resetFormParam() };
+        // debugger;
+        return newParams;
+      },
     },
-  },
-});
+  });
 
-//注册table数据
-const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
+  //注册table数据
+  const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
 
-watchEffect(() => {
-  if (historyTable.value && dataSource) {
-    const data = dataSource.value || [];
-    emit('change', data);
-  }
-});
+  watchEffect(() => {
+    if (historyTable.value && dataSource) {
+      const data = dataSource.value || [];
+      emit('change', data);
+    }
+  });
 
-onMounted(async () => {
-  await getDeviceList();
-  if (deviceOptions.value[0]) {
-    historyType.value = deviceOptions.value[0]['strinstallpos'] || deviceOptions.value[0]['id'];
-    nextTick(async () => {
-      await getDataSource();
-    });
-  }
-});
-defineExpose({ setLoading });
+  onMounted(async () => {
+    await getDeviceList();
+    if (deviceOptions.value[0]) {
+      historyType.value = deviceOptions.value[0]['strinstallpos'] || deviceOptions.value[0]['id'];
+      nextTick(async () => {
+        await getDataSource();
+      });
+    }
+  });
+  defineExpose({ setLoading });
 </script>
 
 <style scoped lang="less">
-@import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
-:deep(.@{ventSpace}-table-body) {
-  height: auto !important;
-}
-:deep(.zxm-picker) {
-  height: 30px !important;
-}
-.history-table {
-  width: 100%;
-  :deep(.jeecg-basic-table-form-container) {
-    .@{ventSpace}-form {
-      padding: 0 !important;
-      border: none !important;
-      margin-bottom: 0 !important;
-      .@{ventSpace}-picker,
-      .@{ventSpace}-select-selector {
-        width: 100% !important;
-        height: 100%;
-        background: #00000017;
-        border: 1px solid #b7b7b7;
-        input,
-        .@{ventSpace}-select-selection-item,
-        .@{ventSpace}-picker-suffix {
-          color: #fff;
-        }
-        .@{ventSpace}-select-selection-placeholder {
-          color: #ffffffaa;
+  :deep(.@{ventSpace}-table-body) {
+    height: auto !important;
+  }
+  :deep(.zxm-picker) {
+    height: 30px !important;
+  }
+  .history-table {
+    width: 100%;
+    :deep(.jeecg-basic-table-form-container) {
+      .@{ventSpace}-form {
+        padding: 0 !important;
+        border: none !important;
+        margin-bottom: 0 !important;
+        .@{ventSpace}-picker,
+        .@{ventSpace}-select-selector {
+          width: 100% !important;
+          height: 100%;
+          background: #00000017;
+          border: 1px solid #b7b7b7;
+          input,
+          .@{ventSpace}-select-selection-item,
+          .@{ventSpace}-picker-suffix {
+            color: #fff;
+          }
+          .@{ventSpace}-select-selection-placeholder {
+            color: #ffffffaa;
+          }
         }
       }
+      .@{ventSpace}-table-title {
+        min-height: 0 !important;
+      }
     }
-    .@{ventSpace}-table-title {
-      min-height: 0 !important;
-    }
-  }
-  .pagination-box {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    .page-num {
-      border: 1px solid #0090d8;
-      padding: 4px 8px;
-      margin-right: 5px;
-      color: #0090d8;
-    }
-    .btn {
-      margin-right: 10px;
+    .pagination-box {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .page-num {
+        border: 1px solid #0090d8;
+        padding: 4px 8px;
+        margin-right: 5px;
+        color: #0090d8;
+      }
+      .btn {
+        margin-right: 10px;
+      }
     }
   }
-}
 </style>

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

@@ -38,10 +38,21 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .board {
+      --image-category-board-bg: url('@/assets/images/themify/deepblue/vent/gas/category-board-bg.png');
+      --image-category-board-img1: url('@/assets/images/themify/deepblue/vent/gas/category-board-img1.png');
+      --image-category-board-img2: url('@/assets/images/themify/deepblue/vent/gas/category-board-img2.png');
+    }
+  }
 
   .board {
-    background-image: url('@/assets/images/vent/gas/category-board-bg.png');
+    --image-category-board-bg: url('@/assets/images/vent/gas/category-board-bg.png');
+    --image-category-board-img1: url('@/assets/images/vent/gas/category-board-img1.png');
+    --image-category-board-img2: url('@/assets/images/vent/gas/category-board-img2.png');
+
+    background-image: var(--image-category-board-bg);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: auto 100%;
@@ -53,7 +64,7 @@
   }
 
   .board__image_top {
-    background-image: url('@/assets/images/vent/gas/category-board-img2.png');
+    background-image: var(--image-category-board-img2);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: auto 100%;
@@ -62,7 +73,7 @@
     height: 56px;
   }
   .board__image_buttom {
-    background-image: url('@/assets/images/vent/gas/category-board-img1.png');
+    background-image: var(--image-category-board-img1);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: auto 100%;

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

@@ -14,8 +14,17 @@
 <style lang="less" scoped>
   @import '@/design/theme.less';
 
+  @{theme-deepblue} {
+    .button {
+      --image-button: url('@/assets/images/themify/deepblue/vent/gas/button.png');
+      --image-button-hover: url('@/assets/images/themify/deepblue/vent/gas/button-hover.png');
+    }
+  }
+
   .button {
-    background-image: url('@/assets/images/vent/gas/button.png');
+    --image-button: url('@/assets/images/vent/gas/button.png');
+    --image-button-hover: url('@/assets/images/vent/gas/button-hover.png');
+    background-image: var(--image-button);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 100% auto;
@@ -26,6 +35,6 @@
   }
 
   .button:hover {
-    background-image: url('@/assets/images/vent/gas/button-hover.png');
+    background-image: var(--image-button-hover);
   }
 </style>

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

@@ -32,8 +32,17 @@
 </script>
 
 <style lang="less" scoped>
+  @import '@/design/theme.less';
+
+  @{theme-deepblue} {
+    .form-title {
+      --image-form-title: url('@/assets/images/themify/deepblue/vent/home/form-title.png');
+    }
+  }
+
   .form-title {
-    background-image: url('@/assets/images/vent/home/form-title.png');
+    --image-form-title: url('@/assets/images/vent/home/form-title.png');
+    background-image: var(--image-form-title);
     background-repeat: no-repeat;
     background-position: left center;
     background-size: auto 100%;

src/views/vent/gas/components/modal/confirmModal.vue

@@ -31,14 +31,23 @@
   }
 </script>
 <style lang="less">
+  @import '@/design/theme.less';
+
+  @{theme-deepblue} {
+    .gas-confirm-modal {
+      --image-confirm-modal: url('@/assets/images/themify/deepblue/vent/gas/confirm-modal.png');
+    }
+  }
+
   .gas-confirm-modal {
+    --image-confirm-modal: url('@/assets/images/vent/gas/confirm-modal.png');
     .zxm-modal-content {
       width: 410px;
       height: 300px;
       border: none !important;
       box-shadow: none !important;
       background-color: transparent !important;
-      background-image: url('@/assets/images/vent/gas/confirm-modal.png');
+      background-image: var(--image-confirm-modal);
       background-size: 100% auto;
       background-repeat: no-repeat;
 

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

@@ -154,21 +154,19 @@
 </script>
 
 <style lang="less" scoped>
-  @import '@/views/vent/monitorManager/comment/less/workFace.less';
+  @import '/@/design/theme.less';
+  @import '/@/views/vent/monitorManager/comment/less/workFace.less';
   @ventSpace: zxm;
-  @tab-bg: #10427a;
-  @tab-pane-bg: #166ab5;
-  @tab-pane-border: #2cb6ff;
 
   .pump__tabs {
     font-weight: bold;
-    background-color: @tab-bg;
+    background-color: var(--vent-gas-tab-bg);
     border-radius: 5px 5px 0 0;
   }
 
   .pump__tabs_pane_actived {
-    background-color: @tab-pane-bg;
+    background-color: var(--vent-gas-tab-bg-avtived);
     border-radius: 5px 5px 0 0;
-    border-bottom: 5px solid @tab-pane-border;
+    border-bottom: 5px solid var(--vent-tabs-action-link);
   }
 </style>

src/views/vent/gas/gasReport/index.vue

@@ -7,8 +7,14 @@
           <a-col :span="4">
             <div class="area-item">
               <div class="item-text">填报日期：</div>
-              <a-date-picker style="width: 220px" :showTime="false" valueFormat="YYYY-MM-DD"
-                v-model:value="searchData.reportTime" placeholder="请选择填报日期" @change="onChange" />
+              <a-date-picker
+                style="width: 220px"
+                :showTime="false"
+                valueFormat="YYYY-MM-DD"
+                v-model:value="searchData.reportTime"
+                placeholder="请选择填报日期"
+                @change="onChange"
+              />
             </div>
           </a-col>
           <!-- <a-col :span="4">
@@ -30,8 +36,7 @@
             <div class="area-item">
               <div class="item-text">上报地点：</div>
               <a-select v-model:value="searchData.strInstallPos" style="width: 220px" placeholder="请选择上报地点">
-                <a-select-option v-for="item in addressList" :key="item" :value="item.value">{{ item.label
-                  }}</a-select-option>
+                <a-select-option v-for="item in addressList" :key="item" :value="item.value">{{ item.label }}</a-select-option>
               </a-select>
             </div>
           </a-col>
@@ -39,8 +44,7 @@
           <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch">查询</a-button>
           <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px" @click="onReset">重置</a-button>
           <a-button type="primary" preIcon="ant-design:download-outlined" @click="getExport">导出日报表</a-button>
-          <a-button type="primary" preIcon="ant-design:download-outlined" @click="getExport1"
-            style="margin: 0px 15px">导出瓦斯三对照报表</a-button>
+          <a-button type="primary" preIcon="ant-design:download-outlined" @click="getExport1" style="margin: 0px 15px">导出瓦斯三对照报表</a-button>
           <a-dropdown>
             <template #overlay>
               <a-menu @click="handleMenuClick">
@@ -67,8 +71,7 @@
           </a-dropdown>
         </a-row>
       </div>
-      <a-table :columns="columns" :data-source="tableData" :scroll="{ y: 500 }" class="tableW" :pagination="pagination"
-        @change="pageChange">
+      <a-table :columns="columns" :data-source="tableData" :scroll="{ y: 500 }" class="tableW" :pagination="pagination" @change="pageChange">
         <template #bodyCell="{ column, text }"></template>
       </a-table>
     </div>
@@ -76,189 +79,191 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, reactive } from 'vue';
-import { columns } from './gas-report.data';
-import { getGasAddressList, getList, expComReportByParam } from './gas-report.api';
-import customHeader from '/@/components/vent/customHeader.vue';
-import { message } from 'ant-design-vue';
-import dayjs from 'dayjs';
-
-let searchData = reactive({
-  reportTime: dayjs().format('YYYY-MM-DD'),
-  districtTeam: '',
-  sbr: '',
-  strInstallPos: '',
-});
-let qdList = reactive<any[]>([]); //区队下拉列表
-let addressList = reactive<any[]>([]); //上报地点下拉列表
-let pagination = reactive({
-  current: 1, // 当前页码
-  pageSize: 10, // 每页显示条数
-  total: 0, // 总条目数，后端返回
-  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
-  showSizeChanger: true, // 是否可改变每页显示条数
-  pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
-});
-let tableData = ref<any[]>([]);
+  import { ref, onMounted, computed, reactive } from 'vue';
+  import { columns } from './gas-report.data';
+  import { getGasAddressList, getList, expComReportByParam } from './gas-report.api';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import { message } from 'ant-design-vue';
+  import dayjs from 'dayjs';
 
-function onChange(val, time) {
-  searchData.reportTime = time;
-}
-//获取日报列表数据
-async function getTableList() {
-  let res = await getList({ pageNo: pagination.current, pageSize: pagination.pageSize, ...searchData });
-  console.log(res, '瓦斯日报列表数据-----------');
-  tableData.value = res.records;
-  pagination.total = res.total;
-}
-//查询
-function getSearch() {
-  pagination.current = 1;
-  getTableList();
-}
-//重置
-function onReset() {
-  pagination.current = 1;
-  searchData.districtTeam = '';
-  searchData.reportTime = '';
-  searchData.strInstallPos = '';
-  searchData.sbr = '';
-  getTableList();
-}
-//分页切换
-function pageChange(val) {
-  pagination.current = val.current;
-  pagination.pageSize = val.pageSize;
-  getTableList();
-}
-function uniqueObjectsArray(arr) {
-  const map = new Map();
-  return arr.filter((item) => {
-    const key = JSON.stringify(item);
-    const isNew = !map.has(key);
-    map.set(key, item);
-    return isNew;
+  let searchData = reactive({
+    reportTime: dayjs().format('YYYY-MM-DD'),
+    districtTeam: '',
+    sbr: '',
+    strInstallPos: '',
   });
-}
-//获取安装位置下拉选项
-async function getSelectList() {
-  let res = await getGasAddressList({ devicekind: 'gasDayReport' });
-  console.log(res, '区队下拉选项--------');
-  qdList.length = 0;
-  addressList.length = 0;
-  if (res.length != 0) {
-    res.forEach((el) => {
-      qdList.push({ label: el.devgroup_dictText, value: el.devgroup_dictText });
-      addressList.push({ label: el.strinstallpos, value: el.strinstallpos });
+  let qdList = reactive<any[]>([]); //区队下拉列表
+  let addressList = reactive<any[]>([]); //上报地点下拉列表
+  let pagination = reactive({
+    current: 1, // 当前页码
+    pageSize: 10, // 每页显示条数
+    total: 0, // 总条目数，后端返回
+    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+    showSizeChanger: true, // 是否可改变每页显示条数
+    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
+  });
+  let tableData = ref<any[]>([]);
+
+  function onChange(val, time) {
+    searchData.reportTime = time;
+  }
+  //获取日报列表数据
+  async function getTableList() {
+    let res = await getList({ pageNo: pagination.current, pageSize: pagination.pageSize, ...searchData });
+    console.log(res, '瓦斯日报列表数据-----------');
+    tableData.value = res.records;
+    pagination.total = res.total;
+  }
+  //查询
+  function getSearch() {
+    pagination.current = 1;
+    getTableList();
+  }
+  //重置
+  function onReset() {
+    pagination.current = 1;
+    searchData.districtTeam = '';
+    searchData.reportTime = '';
+    searchData.strInstallPos = '';
+    searchData.sbr = '';
+    getTableList();
+  }
+  //分页切换
+  function pageChange(val) {
+    pagination.current = val.current;
+    pagination.pageSize = val.pageSize;
+    getTableList();
+  }
+  function uniqueObjectsArray(arr) {
+    const map = new Map();
+    return arr.filter((item) => {
+      const key = JSON.stringify(item);
+      const isNew = !map.has(key);
+      map.set(key, item);
+      return isNew;
     });
-    qdList = uniqueObjectsArray(qdList);
   }
-}
-//导出报表
-async function getExport() {
-  if (searchData.reportTime) {
-    let res = await expComReportByParam({ tempName: 'wsrb', reportTime: searchData.reportTime });
-    console.log(res, '导出------------');
-    let filename = searchData.reportTime + '.xlsx';
-    downFilePublic(res, filename);
-  } else {
-    message.warning('请选择需要导出数据的填报日期!');
+  //获取安装位置下拉选项
+  async function getSelectList() {
+    let res = await getGasAddressList({ devicekind: 'gasDayReport' });
+    console.log(res, '区队下拉选项--------');
+    qdList.length = 0;
+    addressList.length = 0;
+    if (res.length != 0) {
+      res.forEach((el) => {
+        qdList.push({ label: el.devgroup_dictText, value: el.devgroup_dictText });
+        addressList.push({ label: el.strinstallpos, value: el.strinstallpos });
+      });
+      qdList = uniqueObjectsArray(qdList);
+    }
   }
-}
-//导出三对照报表
-async function getExport1() {
-  if (searchData.reportTime) {
-    let res = await expComReportByParam({ tempName: 'wssdz', reportTime: searchData.reportTime });
-    console.log(res, '导出------------');
-    let filename = searchData.reportTime + '.xlsx';
-    downFilePublic(res, filename);
-  } else {
-    message.warning('请选择需要导出数据的填报日期!');
+  //导出报表
+  async function getExport() {
+    if (searchData.reportTime) {
+      let res = await expComReportByParam({ tempName: 'wsrb', reportTime: searchData.reportTime });
+      console.log(res, '导出------------');
+      let filename = searchData.reportTime + '.xlsx';
+      downFilePublic(res, filename);
+    } else {
+      message.warning('请选择需要导出数据的填报日期!');
+    }
+  }
+  //导出三对照报表
+  async function getExport1() {
+    if (searchData.reportTime) {
+      let res = await expComReportByParam({ tempName: 'wssdz', reportTime: searchData.reportTime });
+      console.log(res, '导出------------');
+      let filename = searchData.reportTime + '.xlsx';
+      downFilePublic(res, filename);
+    } else {
+      message.warning('请选择需要导出数据的填报日期!');
+    }
   }
-}
 
-// 下载公用方法
-function downFilePublic(content, fileName) {
-  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
-  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-  // IE10以上支持blob但是依然不支持download
-  if ('download' in document.createElement('a')) {
-    // 支持a标签download的浏览器
-    const link = document.createElement('a'); // 创建a标签
-    link.download = fileName; // a标签添加属性
-    link.style.display = 'none';
-    link.href = URL.createObjectURL(blob);
-    document.body.appendChild(link);
-    link.click(); // 执行下载
-    URL.revokeObjectURL(link.href); // 释放url
-    document.body.removeChild(link); // 释放标签
-  } else {
-    // 其他浏览器
-    navigator.msSaveBlob(blob, fileName);
+  // 下载公用方法
+  function downFilePublic(content, fileName) {
+    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
+    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+    // IE10以上支持blob但是依然不支持download
+    if ('download' in document.createElement('a')) {
+      // 支持a标签download的浏览器
+      const link = document.createElement('a'); // 创建a标签
+      link.download = fileName; // a标签添加属性
+      link.style.display = 'none';
+      link.href = URL.createObjectURL(blob);
+      document.body.appendChild(link);
+      link.click(); // 执行下载
+      URL.revokeObjectURL(link.href); // 释放url
+      document.body.removeChild(link); // 释放标签
+    } else {
+      // 其他浏览器
+      navigator.msSaveBlob(blob, fileName);
+    }
   }
-}
-//下拉选项切换
-function handleMenuClick(val) {
-  console.log(val, 'val--------')
-  switch (val.key) {
-    case '1':
-      break;
-    case '2':
-      break;
-    case '3':
-      break;
+  //下拉选项切换
+  function handleMenuClick(val) {
+    console.log(val, 'val--------');
+    switch (val.key) {
+      case '1':
+        break;
+      case '2':
+        break;
+      case '3':
+        break;
+    }
   }
-}
 
-onMounted(() => {
-  getSelectList();
-  getTableList();
-});
+  onMounted(() => {
+    getSelectList();
+    getTableList();
+  });
 </script>
 
 <style lang="less" scoped>
-.gasReport {
-  width: 100%;
-  height: 100%;
-  padding: 80px 10px 15px 10px;
-  box-sizing: border-box;
-  position: relative;
+  @import '/@/design/theme.less';
 
-  .search-area {
-    margin: 20px 0px;
+  .gasReport {
+    width: 100%;
+    height: 100%;
+    padding: 80px 10px 15px 10px;
+    box-sizing: border-box;
+    position: relative;
 
-    .area-item {
-      display: flex;
-      align-items: center;
+    .search-area {
+      margin: 20px 0px;
 
-      .item-text {
-        color: #fff;
+      .area-item {
+        display: flex;
+        align-items: center;
+
+        .item-text {
+          color: #fff;
+        }
       }
     }
-  }
 
-  .zxm-picker,
-  .zxm-input {
-    border: 1px solid #3ad8ff77 !important;
-    background-color: #ffffff00 !important;
-    color: #fff !important;
+    .zxm-picker,
+    .zxm-input {
+      border: 1px solid var(--vent-form-item-border) !important;
+      background-color: #ffffff00 !important;
+      color: #fff !important;
+    }
   }
-}
 
-:deep(.zxm-table-thead > tr > th:last-child) {
-  border-right: 1px solid #91e9fe !important;
-}
+  :deep(.zxm-table-thead > tr > th:last-child) {
+    border-right: 1px solid #91e9fe !important;
+  }
 
-:deep(.zxm-picker-input > input) {
-  color: #fff;
-}
+  :deep(.zxm-picker-input > input) {
+    color: #fff;
+  }
 
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  border: 1px solid #3ad8ff77 !important;
-  background-color: #ffffff00 !important;
-}
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    border: 1px solid var(--vent-form-item-border) !important;
+    background-color: #ffffff00 !important;
+  }
 
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
 </style>

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

@@ -555,12 +555,14 @@
   @{theme-deepblue} {
     .sensor-container {
       --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-      --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/box-top-bg.png');
+      --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
+      // --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/box-top-bg.png');
       --image-fire-bg-top: url('/@/assets/images/themify/deepblue/vent/fire-bg-top.png');
       --image-icon-bottom-bg: url('/@/assets/images/themify/deepblue/vent/icon-bottom-bg.png');
       --image-outer-icon: url('/@/assets/images/themify/deepblue/vent/outer-icon.svg');
       --image-inner-icon: url('/@/assets/images/themify/deepblue/vent/inner-icon.svg');
-      --image-box-bottom-bg: url('/@/assets/images/themify/deepblue/vent/box-bottom-bg.png');
+      --image-box-bottom-bg: none;
+      // --image-box-bottom-bg: url('/@/assets/images/themify/deepblue/vent/box-bottom-bg.png');
       --image-center-bg: url('/@/assets/images/themify/deepblue/vent/alarm/center-bg.png');
       --image-warning-bg: url('/@/assets/images/themify/deepblue/vent/alarm/warning-bg.png');
       --image-warning-icon-bg1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg1.png');
@@ -588,7 +590,28 @@
       --image-small-bg1: url('/@/assets/images/themify/deepblue/vent/small-bg1.png');
       --image-plane1: url('/@/assets/images/themify/deepblue/vent/plane1.png');
       --container-color: #0e223b;
-      --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
+      // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
+      --container-image: none;
+    }
+
+    .sensor-container {
+      .center-box {
+        .fire-monitor {
+          border: 1px solid #3a4b5f;
+          border-radius: 10px;
+          background: var(--container-color) no-repeat;
+          padding-top: 20px;
+
+          .top {
+            height: 35px;
+            background: var(--image-box-top-bg) no-repeat;
+            background-size: 94% 25px;
+            background-position: center center;
+            padding-left: 6%;
+            text-align: left;
+          }
+        }
+      }
     }
   }
 

src/views/vent/monitorManager/alarmMonitor/index1.vue

@@ -258,7 +258,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
   .padding-0 {
     padding: 10px 0 !important;
@@ -327,7 +327,7 @@
     .@{ventSpace}-select-selector {
       width: 100% !important;
       background: #00000017 !important;
-      border: 1px solid @vent-form-item-boder !important;
+      border: 1px solid @vent-form-item-border !important;
       input,
       .@{ventSpace}-select-selection-item,
       .@{ventSpace}-picker-suffix {

src/views/vent/monitorManager/alarmMonitor/warn/deviceWarn.vue

@@ -11,7 +11,7 @@
       >返回</a-button
     >
     <div class="device-type-box">
-      <div v-for="(item,index) in iconsMonitor" :key="index" class="device-icon-box">
+      <div v-for="(item, index) in iconsMonitor" :key="index" class="device-icon-box">
         <img :src="item.url" :alt="item.text" />
       </div>
     </div>
@@ -313,7 +313,7 @@
     .@{ventSpace}-select-selector {
       width: 100% !important;
       background: #00000017 !important;
-      border: 1px solid @vent-form-item-boder !important;
+      border: 1px solid @vent-form-item-border !important;
 
       input,
       .@{ventSpace}-select-selection-item,

src/views/vent/monitorManager/alarmMonitor/warn/dustWarn.vue

@@ -355,17 +355,34 @@
 </script>
 
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .dustWarn {
+      --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
+      --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
+      --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
+      --image-dust-choice: url('/@/assets/images/themify/deepblue/fire/dust-choice.png');
+      --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
+      --image-dust-choice1: url('/@/assets/images/themify/deepblue/fire/dust-choice1.png');
+      --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
+      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+      --image-bot-area: url(/src/assets/images/themify/deepblue/fire/bot-area.png);
+      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
+    }
+  }
+
   .dustWarn {
-    --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
-    --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
-    --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
-    --image-dust-choice: url('/@/assets/images/themify/deepblue/fire/dust-choice.png');
-    --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
-    --image-dust-choice1: url('/@/assets/images/themify/deepblue/fire/dust-choice1.png');
-    --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
-    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
-    --image-bot-area: url(/src/assets/images/themify/deepblue/fire/bot-area.png);
-    --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
+    --image-border: url('/@/assets/images/fire/border.png');
+    --image-no-choice: url('/@/assets/images/fire/no-choice.png');
+    --image-choice: url('/@/assets/images/fire/choice.png');
+    --image-dust-choice: url('/@/assets/images/fire/dust-choice.png');
+    --image-dust-content: url('/@/assets/images/fire/dust-content.png');
+    --image-dust-choice1: url('/@/assets/images/fire/dust-choice1.png');
+    --image-dust-content: url('/@/assets/images/fire/dust-content.png');
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-bot-area: url(/src/assets/images/fire/bot-area.png);
+    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
     width: 100%;
     height: 100%;
     padding: 80px 10px 15px 10px;

src/views/vent/monitorManager/camera/common/treeList.vue

@@ -1,19 +1,13 @@
 <template>
   <div class="vtl-node" :id="model.id" :class="{ 'vtl-leaf-node': !isFolder, 'vtl-tree-node': isFolder }">
-    <div
-      :class="treeNodeClass"
-      @mouseover="mouseOver"
-      @mouseout="mouseOut"
-      @click.stop="toggle"
-    >
+    <div :class="treeNodeClass" @mouseover="mouseOver" @mouseout="mouseOut" @click.stop="toggle">
       <div class="vtl-border-text">
         <template v-if="isFolder">
           <slot v-if="expanded" :item="{ title: model.title, isFolder: true, expanded: true }" name="icon"> </slot>
           <slot v-else :item="{ title: model.title, isFolder: true, expanded: false }" name="icon"></slot>
-       
         </template>
         <slot v-else :item="{ title: model.title, isFolder: false }" name="icon"></slot>
-        <span class="vtl-node-content ellipsis" >
+        <span class="vtl-node-content ellipsis">
           {{ model.title }}
         </span>
       </div>
@@ -44,7 +38,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { computed, ref,  } from 'vue';
+  import { computed, ref } from 'vue';
   interface IFileSystem {
     id: string;
     title: string;
@@ -54,10 +48,7 @@
     children?: IFileSystem[];
   }
   // 吐出去的事件
-  const emit = defineEmits([
-    'onClick',
-    'detailNode',
-  ]);
+  const emit = defineEmits(['onClick', 'detailNode']);
   // 拿到传入的值
   const props = withDefaults(
     defineProps<{
@@ -84,7 +75,7 @@
       selected: isSelected.value,
     };
   });
- 
+
   // 删除目录
   const delNode = () => {
     emit('detailNode', {
@@ -92,11 +83,10 @@
       eventType: 'detail',
     });
   };
- 
-  
+
   // 展开收起
   const toggle = () => {
-    if (isFolder.value ) {
+    if (isFolder.value) {
       expanded.value = !expanded.value;
       emit('onClick', {
         ...props.model,
@@ -115,12 +105,18 @@
   const mouseOut = () => {
     isHover.value = false;
   };
- 
-  
-  
 </script>
 <style lang="less">
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .vtl-node {
+      --node-select-bg: #3f506a;
+    }
+  }
+
   .vtl-node {
+    --node-select-bg: #1c4869;
     .vtl-node-main {
       display: flex;
       align-items: center;
@@ -149,11 +145,9 @@
 
       &.selected {
         // background-color: rgba(45, 113, 134, 0.2);
-        background-color: #1c4869;
+        background-color: var(--node-select-bg);
       }
 
-   
-
       .vtl-node-content {
         color: #fff;
         padding-left: 5px;
@@ -170,8 +164,6 @@
         }
       }
 
-
-
       .vtl-operation {
         padding-right: 10px;
       }

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

@@ -11,7 +11,7 @@
         </template>
         <template #operation="{ type }">
           <!-- <i class="iconfont icon-eyeoutlined"></i> -->
-          <span style="color:#ccc;font-size:12px">详情</span>
+          <span style="color: #ccc; font-size: 12px">详情</span>
         </template>
       </cameraTree>
     </div>
@@ -19,7 +19,7 @@
       <div class="vent-flex-row-wrap" :class="addrList.length == 1 ? 'camera-box1' : 'camera-box'">
         <div v-for="(item, index) in addrList" :key="index" class="player-box">
           <div class="player-name">{{ item.name }}</div>
-          <div style="padding-top:3px">
+          <div style="padding-top: 3px">
             <template v-if="item.addr.startsWith('rtsp://')">
               <video :id="`video${index}`" muted autoplay></video>
               <div class="click-box" @dblclick="goFullScreen(`video${index}`)"></div>
@@ -40,515 +40,508 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, reactive } from 'vue';
-import { useRouter } from 'vue-router';
-import { Pagination, Empty } from 'ant-design-vue';
-import { list, cameraAddr, getCameraDevKind, getDevice, getVentanalyCamera } from './camera.api'
-import Player, { I18N } from 'xgplayer';
-import ZH from 'xgplayer/es/lang/zh-cn'
-import HlsPlugin from 'xgplayer-hls';
-import FlvPlugin from 'xgplayer-flv';
-import 'xgplayer/dist/index.min.css';
-import cameraTree from './common/cameraTree.vue';
-import { SvgIcon } from '/@/components/Icon';
-import treeIcon from './common/Icon/treeIcon.vue';
-
-//当前选中树节点
-let selected = reactive<any>({
-  id: null,
-  pid: null,
-  title: '',
-  isFolder: false,
-});
-//tree菜单列表
-let listArr = reactive<any[]>([]);
-let searchParam = reactive({
-  devKind: '',
-  strType: '',
-})
-
-I18N.use(ZH)
-let router = useRouter(); //路由
-const pageSize = ref(4)
-const current = ref(1)
-const total = ref(0)
-const playerList = ref([])
-const webRtcServerList = <any[]>[]
-let addrList = ref<{ name: string, addr: string, cameraRate: number; devicekind: string }[]>([])
-
-async function getCameraDevKindList() {
-  let res = await getCameraDevKind()
-  if (res.length != 0) {
-    listArr.length = 0
-    listArr.push({
-      pid: 'root',
-      isFolder: true,
-      expanded: true,
-      title: '全部',
-      id: 0,
-      children: []
-    })
-    res.forEach(el => {
-      el.pid = 0
-      el.isFolder = true,
-        el.expanded = false,
-        el.title = el.itemText
-      el.id = el.subDictId
-      el.children = []
-      listArr[0].children.push(el)
-    })
-    selected.id = listArr[0].id;
-    selected.pid = listArr[0].pid;
-    selected.title = listArr[0].title;
-    selected.isFolder = listArr[0].isFolder;
+  import { onMounted, onUnmounted, ref, reactive } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { Pagination, Empty } from 'ant-design-vue';
+  import { list, cameraAddr, getCameraDevKind, getDevice, getVentanalyCamera } from './camera.api';
+  import Player, { I18N } from 'xgplayer';
+  import ZH from 'xgplayer/es/lang/zh-cn';
+  import HlsPlugin from 'xgplayer-hls';
+  import FlvPlugin from 'xgplayer-flv';
+  import 'xgplayer/dist/index.min.css';
+  import cameraTree from './common/cameraTree.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import treeIcon from './common/Icon/treeIcon.vue';
+
+  //当前选中树节点
+  let selected = reactive<any>({
+    id: null,
+    pid: null,
+    title: '',
+    isFolder: false,
+  });
+  //tree菜单列表
+  let listArr = reactive<any[]>([]);
+  let searchParam = reactive({
+    devKind: '',
+    strType: '',
+  });
+
+  I18N.use(ZH);
+  let router = useRouter(); //路由
+  const pageSize = ref(4);
+  const current = ref(1);
+  const total = ref(0);
+  const playerList = ref([]);
+  const webRtcServerList = <any[]>[];
+  let addrList = ref<{ name: string; addr: string; cameraRate: number; devicekind: string }[]>([]);
+
+  async function getCameraDevKindList() {
+    let res = await getCameraDevKind();
+    if (res.length != 0) {
+      listArr.length = 0;
+      listArr.push({
+        pid: 'root',
+        isFolder: true,
+        expanded: true,
+        title: '全部',
+        id: 0,
+        children: [],
+      });
+      res.forEach((el) => {
+        el.pid = 0;
+        (el.isFolder = true), (el.expanded = false), (el.title = el.itemText);
+        el.id = el.subDictId;
+        el.children = [];
+        listArr[0].children.push(el);
+      });
+      selected.id = listArr[0].id;
+      selected.pid = listArr[0].pid;
+      selected.title = listArr[0].title;
+      selected.isFolder = listArr[0].isFolder;
+    }
   }
-}
-
 
-//点击目录
-async function onClick(node) {
-  if (selected.title === node.title && selected.id === node.id) return
-  current.value = 1
-  selected.id = node.id;
-  selected.pid = node.pid;
-  selected.title = node.title;
-  selected.isFolder = node.isFolder;
-  if (node.pid != 'root') {
-    if (node.isFolder) {
-      let types, devicetype
-      if (node.itemValue.indexOf('&') != -1) {
-        types = node.itemValue.substring(node.itemValue.indexOf('&') + 1)
-        devicetype = node.itemValue.substring(0, node.itemValue.indexOf('&'))
+  //点击目录
+  async function onClick(node) {
+    if (selected.title === node.title && selected.id === node.id) return;
+    current.value = 1;
+    selected.id = node.id;
+    selected.pid = node.pid;
+    selected.title = node.title;
+    selected.isFolder = node.isFolder;
+    if (node.pid != 'root') {
+      if (node.isFolder) {
+        let types, devicetype;
+        if (node.itemValue.indexOf('&') != -1) {
+          types = node.itemValue.substring(node.itemValue.indexOf('&') + 1);
+          devicetype = node.itemValue.substring(0, node.itemValue.indexOf('&'));
+        } else {
+          types = '';
+          devicetype = '';
+        }
+        let res = await getDevice({ ids: types, devicetype: devicetype });
+        if (res.msgTxt.length != 0) {
+          res.msgTxt[0].datalist.forEach((el) => {
+            el.pid = node.id;
+            el.isFolder = false;
+            el.title = el.strinstallpos;
+            el.id = el.deviceID;
+          });
+          listArr[0].children.forEach((v) => {
+            if (v.id == node.id) {
+              v.children = res.msgTxt[0].datalist;
+            }
+          });
+        }
+        searchParam.devKind = node.itemValue;
+        searchParam.strType = '';
+        await getVideoAddrs();
+        getVideo();
       } else {
-        types = ''
-        devicetype = ''
-      }
-      let res = await getDevice({ ids: types, devicetype: devicetype })
-      if (res.msgTxt.length != 0) {
-        res.msgTxt[0].datalist.forEach(el => {
-          el.pid = node.id
-          el.isFolder = false
-          el.title = el.strinstallpos
-          el.id = el.deviceID
-        })
-        listArr[0].children.forEach(v => {
-          if (v.id == node.id) {
-            v.children = res.msgTxt[0].datalist
-          }
-        })
+        await getVideoAddrsSon(node.deviceID);
+        getVideo();
       }
-      searchParam.devKind = node.itemValue
-      searchParam.strType = ''
-      await getVideoAddrs()
-      getVideo()
     } else {
-      await getVideoAddrsSon(node.deviceID)
-      getVideo()
+      searchParam.devKind = '';
+      searchParam.strType = '';
+      await getVideoAddrs();
+      getVideo();
     }
-
-  } else {
-    searchParam.devKind = ''
-    searchParam.strType = ''
-    await getVideoAddrs()
-    getVideo()
   }
 
-};
-
-//点击详情跳转
-function onDetail(node) {
-  let str = listArr[0].children.filter(v => v.id == node.pid)[0].itemValue
-  let type = str.indexOf('&') != -1 ? str.substring(0, str.indexOf('&')) : ''
-  console.log(type, 'type--------')
-  switch (type) {
-    case 'pulping'://注浆
-      router.push('/grout-home')
-      break;
-    case 'window'://自动风窗
-      router.push('/monitorChannel/monitor-window?id=' + node.deviceID)
-      break;
-    case 'gate'://自动风门
-      router.push('/monitorChannel/monitor-gate?id=' + node.deviceID + '&deviceType=' + node.deviceType)
-      break;
-    case 'fanlocal'://局部风机
-      router.push('/monitorChannel/monitor-fanlocal?id=' + node.deviceID + '&deviceType=fanlocal')
-      break;
-    case 'fanmain'://主风机
-      router.push('/monitorChannel/monitor-fanmain?id=' + node.deviceID)
-      break;
-    case 'forcFan'://压风机
-      router.push('/forcFan/home')
-      break;
-    case 'pump'://瓦斯抽采泵
-      router.push('/monitorChannel/gasPump-home')
-      break;
-    case 'nitrogen'://制氮
-      router.push('/nitrogen-home')
-      break;
-
+  //点击详情跳转
+  function onDetail(node) {
+    let str = listArr[0].children.filter((v) => v.id == node.pid)[0].itemValue;
+    let type = str.indexOf('&') != -1 ? str.substring(0, str.indexOf('&')) : '';
+    console.log(type, 'type--------');
+    switch (type) {
+      case 'pulping': //注浆
+        router.push('/grout-home');
+        break;
+      case 'window': //自动风窗
+        router.push('/monitorChannel/monitor-window?id=' + node.deviceID);
+        break;
+      case 'gate': //自动风门
+        router.push('/monitorChannel/monitor-gate?id=' + node.deviceID + '&deviceType=' + node.deviceType);
+        break;
+      case 'fanlocal': //局部风机
+        router.push('/monitorChannel/monitor-fanlocal?id=' + node.deviceID + '&deviceType=fanlocal');
+        break;
+      case 'fanmain': //主风机
+        router.push('/monitorChannel/monitor-fanmain?id=' + node.deviceID);
+        break;
+      case 'forcFan': //压风机
+        router.push('/forcFan/home');
+        break;
+      case 'pump': //瓦斯抽采泵
+        router.push('/monitorChannel/gasPump-home');
+        break;
+      case 'nitrogen': //制氮
+        router.push('/nitrogen-home');
+        break;
+    }
   }
-}
-
-async function getVideoAddrs() {
-  clearCamera();
-  playerList.value = []
-  let paramKind = searchParam.devKind.substring(0, searchParam.devKind.indexOf('&'))
-  let res = await list({ devKind: paramKind, strType: searchParam.strType, pageSize: pageSize.value, pageNo: current.value })
-  total.value = res['total'] || 0
-  if (res.records.length != 0) {
-    const cameraList = <{ name: string, addr: string, cameraRate: number ; devicekind: string }[]>[]
-    const cameras = res.records
-    for (let i = 0; i < cameras.length; i++) {
-      const item = cameras[i];
 
-      if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs') {
-        // 从海康平台接口获取视频流
-        const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
-        try {
-          const data = await cameraAddr({ cameraCode: item['addr'], videoType });
-          if (data) {
-            cameraList.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
+  async function getVideoAddrs() {
+    clearCamera();
+    playerList.value = [];
+    let paramKind = searchParam.devKind.substring(0, searchParam.devKind.indexOf('&'));
+    let res = await list({ devKind: paramKind, strType: searchParam.strType, pageSize: pageSize.value, pageNo: current.value });
+    total.value = res['total'] || 0;
+    if (res.records.length != 0) {
+      const cameraList = <{ name: string; addr: string; cameraRate: number; devicekind: string }[]>[];
+      const cameras = res.records;
+      for (let i = 0; i < cameras.length; i++) {
+        const item = cameras[i];
+
+        if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs') {
+          // 从海康平台接口获取视频流
+          const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
+          try {
+            const data = await cameraAddr({ cameraCode: item['addr'], videoType });
+            if (data) {
+              cameraList.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
+            }
+            // cameraList.push({
+            //   name: item['name'],
+            //   // addr: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'
+            //   addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
+            // });
+          } catch (error) {}
+        } else {
+          if (item['addr'].includes('0.0.0.0')) {
+            item['addr'] = item['addr'].replace('0.0.0.0', window.location.hostname);
           }
-          // cameraList.push({
-          //   name: item['name'],
-          //   // addr: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'
-          //   addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
-          // });
-        } catch (error) {
-
-        }
-
-      } else {
-        if (item['addr'].includes('0.0.0.0')) {
-          item['addr'] = item['addr'].replace('0.0.0.0', window.location.hostname)
+          cameraList.push({ name: item['name'], addr: item['addr'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
         }
-        cameraList.push({ name: item['name'], addr: item['addr'], cameraRate: item['cameraRate'], devicekind: item['devicekind']  });
       }
+      addrList.value = cameraList;
+      console.log(addrList.value, ' addrList.value-------------');
     }
-    addrList.value = cameraList
-    console.log( addrList.value,' addrList.value-------------')
   }
-}
 
-async function getVideoAddrsSon(Id) {
-  clearCamera();
-  playerList.value = []
-  let res = await getVentanalyCamera({ deviceid: Id })
-  if (res.records.length != 0) {
-    const cameraList = <{ name: string, addr: string, cameraRate: number; devicekind: string }[]>[]
-    const cameras = res.records
-    debugger;
-    for (let i = 0; i < cameras.length; i++) {
-      const item = cameras[i];
-
-      if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs') {
-        // 从海康平台接口获取视频流
-        const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
-        try {
-          const data = await cameraAddr({ cameraCode: item['addr'], videoType });
-          if (data && data['url']) {
-            cameraList.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
+  async function getVideoAddrsSon(Id) {
+    clearCamera();
+    playerList.value = [];
+    let res = await getVentanalyCamera({ deviceid: Id });
+    if (res.records.length != 0) {
+      const cameraList = <{ name: string; addr: string; cameraRate: number; devicekind: string }[]>[];
+      const cameras = res.records;
+      debugger;
+      for (let i = 0; i < cameras.length; i++) {
+        const item = cameras[i];
+
+        if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs') {
+          // 从海康平台接口获取视频流
+          const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
+          try {
+            const data = await cameraAddr({ cameraCode: item['addr'], videoType });
+            if (data && data['url']) {
+              cameraList.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
+            }
+            // cameraList.push({
+            //   name: item['name'],
+            //   // addr: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'
+            //   addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
+            // });
+          } catch (error) {}
+        } else {
+          if (item['addr'].includes('0.0.0.0')) {
+            item['addr'] = item['addr'].replace('0.0.0.0', window.location.hostname);
           }
-          // cameraList.push({
-          //   name: item['name'],
-          //   // addr: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'
-          //   addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
-          // });
-        } catch (error) {
-
+          cameraList.push({ name: item['name'], addr: item['addr'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
         }
-
-      } else {
-        if (item['addr'].includes('0.0.0.0')) {
-          item['addr'] = item['addr'].replace('0.0.0.0', window.location.hostname)
-        }
-        cameraList.push({ name: item['name'], addr: item['addr'], cameraRate: item['cameraRate'], devicekind: item['devicekind']  });
       }
+      addrList.value = cameraList;
     }
-    addrList.value = cameraList
   }
-}
-
-async function onChange(page) {
-  current.value = page;
-  await getVideoAddrs()
-  getVideo()
-}
 
-function getVideo() {
-  const ip = VUE_APP_URL.webRtcUrl;
-  for (let i = 0; i < addrList.value.length; i++) {
-    const item = addrList.value[i]
-    if (item.addr.startsWith('rtsp://')) {
-      const dom = document.getElementById('video' + i) as HTMLVideoElement
-      dom.muted = true;
-      dom.volume = 0
-      const webRtcServer = new window['WebRtcStreamer'](dom, location.protocol + ip)
-      webRtcServerList.push(webRtcServer)
-      webRtcServer.connect(item.addr)
-    } else {
-      setNoRtspVideo('player' + i, item.addr, item.cameraRate, item.devicekind)
-    }
+  async function onChange(page) {
+    current.value = page;
+    await getVideoAddrs();
+    getVideo();
   }
-}
 
-function setNoRtspVideo(id, videoAddr, cameraRate, devicekind) {
-  debugger;
-  const fileExtension = videoAddr.split('.').pop();
-  if (fileExtension === 'flv' || devicekind == 'flv') {
-    const player = new Player({
-      lang: 'zh',
-      id: id,
-      url: videoAddr,
-      width: 589,
-      height: 330,
-      poster: '/src/assets/images/vent/noSinge.png',
-      plugins: [FlvPlugin],
-      fluid: true,
-      autoplay: true,
-      isLive: true,
-      playsinline: true,
-      screenShot: true,
-      whitelist: [''],
-      ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
-      closeVideoClick: true,
-      customConfig: {
-        isClickPlayBack: false
-      },
-      defaultPlaybackRate: cameraRate || 1,
-      controls: false,
-      flv: {
-        retryCount: 3, // 重试 3 次，默认值
-        retryDelay: 1000, // 每次重试间隔 1 秒，默认值
-        loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
-        fetchOptions: {
-          // 该参数会透传给 fetch，默认值为 undefined
-          mode: 'cors'
-        },
-        targetLatency: 10, // 直播目标延迟，默认 10 秒
-        maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
-        disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
-        maxJumpDistance: 10,
+  function getVideo() {
+    const ip = VUE_APP_URL.webRtcUrl;
+    for (let i = 0; i < addrList.value.length; i++) {
+      const item = addrList.value[i];
+      if (item.addr.startsWith('rtsp://')) {
+        const dom = document.getElementById('video' + i) as HTMLVideoElement;
+        dom.muted = true;
+        dom.volume = 0;
+        const webRtcServer = new window['WebRtcStreamer'](dom, location.protocol + ip);
+        webRtcServerList.push(webRtcServer);
+        webRtcServer.connect(item.addr);
+      } else {
+        setNoRtspVideo('player' + i, item.addr, item.cameraRate, item.devicekind);
       }
-    });
-    playerList.value.push(player)
+    }
   }
-  if (fileExtension === 'm3u8' || devicekind == 'm3u8') {
-    let player
-    if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
-      // 原生支持 hls 播放
-      player = new Player({
-        lang: 'zh',
-        id: id,
-        url: videoAddr,
-        width: 589,
-        height: 330,
-        isLive: true,
-        autoplay: true,
-        autoplayMuted: true,
-        cors: true,
-        ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
-        poster: '/src/assets/images/vent/noSinge.png',
-        defaultPlaybackRate: cameraRate || 1,
-        controls: false,
-        hls: {
-          retryCount: 3, // 重试 3 次，默认值
-          retryDelay: 1000, // 每次重试间隔 1 秒，默认值
-          loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
-          fetchOptions: {
-            // 该参数会透传给 fetch，默认值为 undefined
-            mode: 'cors'
-          },
-          targetLatency: 10, // 直播目标延迟，默认 10 秒
-          maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
-          disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
-          maxJumpDistance: 10,
-        }
 
-      })
-    } else if (HlsPlugin.isSupported()) { // 第一步
-      player = new Player({
+  function setNoRtspVideo(id, videoAddr, cameraRate, devicekind) {
+    debugger;
+    const fileExtension = videoAddr.split('.').pop();
+    if (fileExtension === 'flv' || devicekind == 'flv') {
+      const player = new Player({
         lang: 'zh',
         id: id,
         url: videoAddr,
         width: 589,
         height: 330,
-        isLive: true,
-        autoplay: true,
-        autoplayMuted: true,
-        plugins: [HlsPlugin], // 第二步
         poster: '/src/assets/images/vent/noSinge.png',
+        plugins: [FlvPlugin],
+        fluid: true,
+        autoplay: true,
+        isLive: true,
+        playsinline: true,
+        screenShot: true,
+        whitelist: [''],
         ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+        closeVideoClick: true,
+        customConfig: {
+          isClickPlayBack: false,
+        },
         defaultPlaybackRate: cameraRate || 1,
         controls: false,
-        hls: {
+        flv: {
           retryCount: 3, // 重试 3 次，默认值
           retryDelay: 1000, // 每次重试间隔 1 秒，默认值
           loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
           fetchOptions: {
             // 该参数会透传给 fetch，默认值为 undefined
-            mode: 'cors'
+            mode: 'cors',
           },
           targetLatency: 10, // 直播目标延迟，默认 10 秒
           maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
           disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
           maxJumpDistance: 10,
-        }
-      })
+        },
+      });
+      playerList.value.push(player);
+    }
+    if (fileExtension === 'm3u8' || devicekind == 'm3u8') {
+      let player;
+      if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
+        // 原生支持 hls 播放
+        player = new Player({
+          lang: 'zh',
+          id: id,
+          url: videoAddr,
+          width: 589,
+          height: 330,
+          isLive: true,
+          autoplay: true,
+          autoplayMuted: true,
+          cors: true,
+          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+          poster: '/src/assets/images/vent/noSinge.png',
+          defaultPlaybackRate: cameraRate || 1,
+          controls: false,
+          hls: {
+            retryCount: 3, // 重试 3 次，默认值
+            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+            loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+            fetchOptions: {
+              // 该参数会透传给 fetch，默认值为 undefined
+              mode: 'cors',
+            },
+            targetLatency: 10, // 直播目标延迟，默认 10 秒
+            maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
+            disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
+            maxJumpDistance: 10,
+          },
+        });
+      } else if (HlsPlugin.isSupported()) {
+        // 第一步
+        player = new Player({
+          lang: 'zh',
+          id: id,
+          url: videoAddr,
+          width: 589,
+          height: 330,
+          isLive: true,
+          autoplay: true,
+          autoplayMuted: true,
+          plugins: [HlsPlugin], // 第二步
+          poster: '/src/assets/images/vent/noSinge.png',
+          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+          defaultPlaybackRate: cameraRate || 1,
+          controls: false,
+          hls: {
+            retryCount: 3, // 重试 3 次，默认值
+            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+            loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+            fetchOptions: {
+              // 该参数会透传给 fetch，默认值为 undefined
+              mode: 'cors',
+            },
+            targetLatency: 10, // 直播目标延迟，默认 10 秒
+            maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
+            disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
+            maxJumpDistance: 10,
+          },
+        });
+      }
+      playerList.value.push(player);
     }
-    playerList.value.push(player)
   }
-}
-
 
-function goFullScreen(domId) {
-  const videoDom = document.getElementById(domId) as HTMLVideoElement
-  if (videoDom.requestFullscreen) {
-    videoDom.requestFullscreen()
-    videoDom.play()
-  } else if (videoDom.mozRequestFullscreen) {
-    videoDom.mozRequestFullscreen()
-    videoDom.play()
-  } else if (videoDom.webkitRequestFullscreen) {
-    videoDom.webkitRequestFullscreen()
-    videoDom.play()
-  } else if (videoDom.msRequestFullscreen) {
-    videoDom.msRequestFullscreen()
-    videoDom.play()
+  function goFullScreen(domId) {
+    const videoDom = document.getElementById(domId) as HTMLVideoElement;
+    if (videoDom.requestFullscreen) {
+      videoDom.requestFullscreen();
+      videoDom.play();
+    } else if (videoDom.mozRequestFullscreen) {
+      videoDom.mozRequestFullscreen();
+      videoDom.play();
+    } else if (videoDom.webkitRequestFullscreen) {
+      videoDom.webkitRequestFullscreen();
+      videoDom.play();
+    } else if (videoDom.msRequestFullscreen) {
+      videoDom.msRequestFullscreen();
+      videoDom.play();
+    }
   }
-}
 
-function clearCamera() {
-  const num = webRtcServerList.length
-  for (let i = 0; i < num; i++) {
-    if(webRtcServerList[i]){
-      webRtcServerList[i].disconnect()
-      webRtcServerList[i] = null
+  function clearCamera() {
+    const num = webRtcServerList.length;
+    for (let i = 0; i < num; i++) {
+      if (webRtcServerList[i]) {
+        webRtcServerList[i].disconnect();
+        webRtcServerList[i] = null;
+      }
     }
+    for (let i = 0; i < playerList.value.length; i++) {
+      const player = playerList.value[i];
+      if (player.destroy) player.destroy();
+    }
+    playerList.value = [];
   }
-  for (let i = 0; i < playerList.value.length; i++) {
-    const player = playerList.value[i]
-    if (player.destroy) player.destroy()
-  }
-  playerList.value = []
-}
-
-onMounted(async () => {
-  await getVideoAddrs()
-  // getTreeList()
-  getCameraDevKindList()
-  getVideo()
-})
 
-onUnmounted(() => {
-  clearCamera()
-})
+  onMounted(async () => {
+    await getVideoAddrs();
+    // getTreeList()
+    getCameraDevKindList();
+    getVideo();
+  });
 
+  onUnmounted(() => {
+    clearCamera();
+  });
 </script>
 <style lang="less">
-.camera-container {
-  position: relative;
-  width: calc(100% - 30px);
-  height: calc(100% - 84px);
-  display: flex;
-  margin: 15px;
-  justify-content: space-between;
-  align-items: center;
+  @import '/@/design/theme.less';
 
-  .left-area {
-    width: 15%;
-    height: 100%;
-    padding: 20px;
-    border: 1px solid #99e8ff66;
-    background: #27546e1a;
-    box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-    -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-    -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
-    box-sizing: border-box;
-
-    // lxh
-    .iconfont {
-      color: #fff;
-      font-size: 12px;
-      margin-left: 5px;
+  @{theme-deepblue} {
+    .camera-container {
+      --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
     }
   }
 
-  .right-area {
-    width: 85%;
-    height: 100%;
-    padding: 0px 0px 0px 15px;
-    box-sizing: border-box;
-
-    .camera-box {
-      width: 100%;
-      height: calc(100% - 60px);
-      display: flex;
-      justify-content: space-around;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      overflow-y: auto;
-    }
-
-    .camera-box1 {
-      width: 100%;
-      height: calc(100% - 60px);
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      overflow-y: auto;
+  .camera-container {
+    --image-camera_bg: url('/@/assets/images/vent/camera_bg.png');
+    position: relative;
+    width: calc(100% - 30px);
+    height: calc(100% - 84px);
+    display: flex;
+    margin: 15px;
+    justify-content: space-between;
+    align-items: center;
+
+    .left-area {
+      width: 15%;
+      height: 100%;
+      padding: 20px;
+      border: 1px solid #99e8ff66;
+      background: #27546e1a;
+      box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+      -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+      -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
+      box-sizing: border-box;
+
+      // lxh
+      .iconfont {
+        color: #fff;
+        font-size: 12px;
+        margin-left: 5px;
+      }
     }
 
-    .player-box {
-      width: 626px;
-      height: 370px;
-      padding: 17px 18px;
-      background: url('/@/assets/images/vent/camera_bg.png');
-      background-size: 100% 100%;
-      position: relative;
-      margin: 10px;
+    .right-area {
+      width: 85%;
+      height: 100%;
+      padding: 0px 0px 0px 15px;
+      box-sizing: border-box;
 
-      .player-name {
-        font-size: 14px;
-        position: absolute;
-        top: 35px;
-        right: 15px;
-        color: #fff;
-        background-color: hsla(0, 0%, 50%, .5);
-        border-radius: 2px;
-        padding: 1px 5px;
-        max-width: 120px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        z-index: 999;
+      .camera-box {
+        width: 100%;
+        height: calc(100% - 60px);
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        overflow-y: auto;
       }
 
-      .click-box {
-        position: absolute;
+      .camera-box1 {
         width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
+        height: calc(100% - 60px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        overflow-y: auto;
       }
-    }
 
-    .pagination {
-      width: 100%;
-      height: 60px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
+      .player-box {
+        width: 626px;
+        height: 370px;
+        padding: 17px 18px;
+        background: var(--image-camera_bg);
+        background-size: 100% 100%;
+        position: relative;
+        margin: 10px;
+
+        .player-name {
+          font-size: 14px;
+          position: absolute;
+          top: 35px;
+          right: 15px;
+          color: #fff;
+          background-color: hsla(0, 0%, 50%, 0.5);
+          border-radius: 2px;
+          padding: 1px 5px;
+          max-width: 120px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          z-index: 999;
+        }
 
+        .click-box {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+        }
+      }
 
+      .pagination {
+        width: 100%;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
 
-:deep(video) {
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover !important;
-}
-</style>
+  :deep(video) {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover !important;
+  }
+</style>

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

@@ -134,7 +134,7 @@
   .@{ventSpace}-select-selector {
     width: 100% !important;
     background: #00000017 !important;
-    border: 1px solid @vent-form-item-boder !important;
+    border: 1px solid @vent-form-item-border !important;
     input,
     .@{ventSpace}-select-selection-item,
     .@{ventSpace}-picker-suffix {

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

@@ -390,7 +390,7 @@
     .@{ventSpace}-picker,
     .@{ventSpace}-select-selector {
       background: #00000017 !important;
-      border: 1px solid @vent-form-item-boder !important;
+      border: 1px solid @vent-form-item-border !important;
       input,
       .@{ventSpace}-select-selection-item,
       .@{ventSpace}-picker-suffix {

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

@@ -443,7 +443,7 @@
     .@{ventSpace}-picker,
     .@{ventSpace}-select-selector {
       background: #00000017 !important;
-      border: 1px solid @vent-form-item-boder !important;
+      border: 1px solid @vent-form-item-border !important;
       input,
       .@{ventSpace}-select-selection-item,
       .@{ventSpace}-picker-suffix {

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

@@ -37,6 +37,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/less/workFace.less

@@ -1,6 +1,42 @@
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .monitor-container {
+    --image-param-bg: url('/@/assets/images/themify/deepblue/vent/param-bg.png');
+    --image-workFace-param-bg: url('/@/assets/images/themify/deepblue/vent/workFace-param-bg.png');
+    --image-plane-bg: url('/@/assets/images/themify/deepblue/vent/plane-bg.png');
+    --image-ligth-q: url('/@/assets/images/themify/deepblue/vent/ligth-q.png');
+    --param-bg: #0a80fa;
+    --param-border: #40B7F3;
+    --param-border-after: #006EA6;
+    --param-title-bg: linear-gradient(to right, #3df6ff40, #3df6ff00);
+    --data-item-bg: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
+  }
+
+  .fire-analysis1 {
+    --image-1: url('/@/assets/images/themify/deepblue/vent/alarm/1.png');
+    --image-21: url('/@/assets/images/themify/deepblue/vent/alarm/21.png');
+    --image-31: url('/@/assets/images/themify/deepblue/vent/alarm/31.png');
+    --image-41: url('/@/assets/images/themify/deepblue/vent/alarm/41.png');
+
+  }
 
+  .group-parameter-title {
+    --param-title-bg: linear-gradient(to right, #2d7cf350, #2d7cf300);
+    --param-title-bg-before: linear-gradient(to right, #30bcf440, #30bcf4f00);
+  }
+}
 
 .monitor-container {
+  --image-param-bg: url('/@/assets/images/vent/param-bg.png');
+  --image-workFace-param-bg: url('/@/assets/images/vent/workFace-param-bg.png');
+  --image-plane-bg: url('/@/assets/images/vent/plane-bg.png');
+  --image-ligth-q: url('/@/assets/images/vent/ligth-q.png');
+  --image-workFace-param-bg: url('/@/assets/images/vent/workFace-param-bg.png');
+  --param-bg: #00d8ff;
+  --param-border: #40B7F3;
+  --param-border-after: #006EA6;
+  --data-item-bg: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
   width: 100%;
   height: 100%;
   margin-top: 40px;
@@ -20,6 +56,7 @@
 
   .right-box {
     width: 340px;
+
     .disaster-btn {
       padding: 4px 10px !important;
       margin-right: 8px;
@@ -30,7 +67,7 @@
     margin-top: 30px;
   }
 
-  .warning-monitor {  
+  .warning-monitor {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -40,26 +77,27 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
+
       .title {
         cursor: pointer;
       }
-    
+
       .active-title {
-        color: aqua;
+        color: var(--vent-font-action-link);
       }
     }
 
     .state-box {
       width: 79px;
       height: 47px;
-      background: url('/@/assets/images/vent/param-bg.png');
+      background: var(--image-param-bg);
       display: flex;
       justify-content: center;
       align-items: center;
 
       .title {
         text-align: center;
-        color: #73e8fe;
+        color: var(--vent-font-action-link);
       }
 
       span {
@@ -105,7 +143,7 @@
           .param-icon {
             width: 79px;
             height: 48px;
-            background: url('/@/assets/images/vent/workFace-param-bg.png');
+            background: var(--image-workFace-param-bg);
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -137,7 +175,7 @@
             .param-val-icon {
               width: 2px;
               height: 15px;
-              background: #00d8ff;
+              background: var(--param-bg);
               position: relative;
 
               &::after {
@@ -147,7 +185,7 @@
                 width: 6px;
                 height: 6px;
                 border-radius: 3px;
-                background: #00d8ff;
+                background: var(--param-bg);
                 bottom: -2px;
                 left: -2px;
               }
@@ -157,10 +195,9 @@
             .param-val {
               position: relative;
               font-family: 'douyuFont';
-              // color: #20dbfd;
-              text-shadow: 0 0 25px #00d8ff;
+              text-shadow: 0 0 25px var(--param-bg);
               font-size: 13px;
-              border: 1px solid #40B7F3;
+              border: 1px solid var(--param-border);
               padding: 5px 8px 2px 8px;
               top: 2px;
               text-align: center;
@@ -174,7 +211,7 @@
                 top: 2px;
                 left: 2px;
                 display: block;
-                border: 1px solid #006EA6;
+                border: 1px solid var(--param-border-after);
               }
             }
           }
@@ -195,7 +232,7 @@
       display: flex;
       justify-content: space-between;
       line-height: 24px;
-      background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
+      background-image: var(--data-item-bg);
       margin: 4px 0;
     }
 
@@ -206,7 +243,7 @@
     .data-item1 {
       width: 100%;
       line-height: 24px;
-      background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
+      background-image: var(--data-item-bg);
       margin: 4px 0;
     }
   }
@@ -216,6 +253,7 @@
     flex-direction: column;
     padding: 0 5px;
   }
+
   .input-item {
     display: flex;
     justify-content: space-between;
@@ -238,12 +276,12 @@
       line-height: 28px !important;
       background: transparent !important;
       border-color: #228DA2 !important;
-      color: #fff !important;
+      color: var(--vent-font-color) !important;
     }
 
     .value {
       width: 80px;
-      color: #00d8ff;
+      color: var(--param-bg);
       padding-right: 20px;
     }
 
@@ -266,7 +304,7 @@
       width: 6px;
       height: 6px;
       border: 1px solid #1bf5fd;
-      background: #00d8ff;
+      background: var(--param-bg);
       border-radius: 3px;
       left: -1px;
       top: 8px;
@@ -290,7 +328,7 @@
       .light-bg {
         width: 331px;
         height: 42px;
-        background: url('/@/assets/images/vent/plane-bg.png') no-repeat;
+        background: var(--image-plane-bg) no-repeat;
         background-size: contain;
         position: absolute;
         z-index: -1;
@@ -321,7 +359,7 @@
           .light-icon {
             width: 90px;
             height: 58px;
-            background: url('/@/assets/images/vent/ligth-q.png');
+            background: var(--image-ligth-q);
             opacity: 0.8;
           }
 
@@ -341,7 +379,7 @@
             .light-val-icon {
               width: 2px;
               height: 18px;
-              background: #00d8ff;
+              background: var(--param-bg);
               position: relative;
 
               &::after {
@@ -351,7 +389,7 @@
                 width: 6px;
                 height: 6px;
                 border-radius: 3px;
-                background: #00d8ff;
+                background: var(--param-bg);
                 bottom: -2px;
                 left: -2px;
               }
@@ -361,10 +399,9 @@
             .light-val {
               position: relative;
               font-family: 'douyuFont';
-              // color: #20dbfd;
-              text-shadow: 0 0 25px #00d8ff;
+              text-shadow: 0 0 25px var(--param-bg);
               font-size: 13px;
-              border: 1px solid #40B7F3;
+              border: 1px solid var(--param-border);
               padding: 5px 8px 2px 8px;
               top: 2px;
 
@@ -376,7 +413,7 @@
                 top: 2px;
                 left: 2px;
                 display: block;
-                border: 1px solid #006EA6;
+                border: 1px solid var(--param-border-after);
               }
             }
           }
@@ -452,7 +489,7 @@
           .param-icon {
             width: 79px;
             height: 48px;
-            background: url('/@/assets/images/vent/workFace-param-bg.png');
+            background: var(--image-workFace-param-bg);
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -484,7 +521,7 @@
             .param-val-icon {
               width: 2px;
               height: 18px;
-              background: #00d8ff;
+              background: var(--param-bg);
               position: relative;
 
               &::after {
@@ -494,7 +531,7 @@
                 width: 6px;
                 height: 6px;
                 border-radius: 3px;
-                background: #00d8ff;
+                background: var(--param-bg);
                 bottom: -2px;
                 left: -2px;
               }
@@ -504,10 +541,9 @@
             .param-val {
               position: relative;
               font-family: 'douyuFont';
-              // color: #20dbfd;
-              text-shadow: 0 0 25px #00d8ff;
+              text-shadow: 0 0 25px var(--param-bg);
               font-size: 13px;
-              border: 1px solid #40B7F3;
+              border: 1px solid var(--param-border);
               padding: 5px 8px 2px 8px;
               top: 2px;
 
@@ -519,7 +555,7 @@
                 top: 2px;
                 left: 2px;
                 display: block;
-                border: 1px solid #006EA6;
+                border: 1px solid var(--param-border-after);
               }
             }
           }
@@ -533,7 +569,7 @@
     padding: 2px 12px;
     position: relative;
     border-radius: 2px;
-    color: #fff;
+    color: var(--vent-font-color);
     cursor: pointer;
 
     &::before {
@@ -590,6 +626,7 @@
   display: flex;
   align-items: center;
   top: -2px;
+
   .icon,
   span {
     position: absolute;
@@ -597,22 +634,27 @@
 }
 
 .group-parameter-title {
-  background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+  --param-title-bg: linear-gradient(to right, #39a3ff50, #39a3ff00);
+  --param-title-bg-before: linear-gradient(to right, #3df6ff40, #3df6ff00);
+  background-image: var(--param-title-bg);
+
   .icon {
     left: 0px;
     top: -4px;
   }
+
   span {
     left: 20px;
     top: -8px;
   }
-  &::before{
+
+  &::before {
     position: absolute;
     content: '';
     width: 100%;
     height: 100%;
     top: 4px;
-    background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+    background-image: var(--param-title-bg-before)
   }
 }
 
@@ -620,18 +662,23 @@
   align-self: flex-end;
   color: #66e8fc;
   cursor: pointer;
+
   &:hover {
     color: #1bf5fddd;
   }
 }
 
-.a-detail{
+.a-detail {
   font-size: 12px;
   padding-left: 5px;
   cursor: pointer;
 }
 
 .fire-analysis1 {
+  --image-1: url('/@/assets/images/vent/alarm/1.png');
+  --image-21: url('/@/assets/images/vent/alarm/21.png');
+  --image-31: url('/@/assets/images/vent/alarm/31.png');
+  --image-41: url('/@/assets/images/vent/alarm/41.png');
   display: flex;
   justify-content: center;
 
@@ -639,7 +686,7 @@
     width: 321px;
     height: 104px;
     text-align: center;
-    background: url('/@/assets/images/vent/alarm/1.png');
+    background: var(--image-1);
     color: #ffffffdd;
     margin: 0 4px;
 
@@ -653,15 +700,15 @@
   }
 
   .warning1 {
-    background: url('/@/assets/images/vent/alarm/21.png');
+    background: var(--image-21);
   }
 
   .warning2 {
-    background: url('/@/assets/images/vent/alarm/31.png');
+    background: var(--image-31);
   }
 
   .warning3 {
-    background: url('/@/assets/images/vent/alarm/41.png');
+    background: var(--image-41);
   }
 }
 
@@ -678,16 +725,16 @@
     box-shadow: none !important;
 
     .zxm-select-selection-item {
-      color: #fff !important;
+      color: var(--vent-font-color) !important;
     }
   }
 
   .@{ventSpace}-select-arrow {
-    color: #fff !important;
+    color: var(--vent-font-color) !important;
   }
 }
 
 :deep(.zxm-select-dropdown) {
   background: #ffffff !important;
-  color: #fff !important;
-}
+  color: var(--vent-font-color) !important;
+}

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

@@ -956,8 +956,18 @@
 </script>
 
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @ventSpace: zxm;
 
+  @{theme-deepblue} {
+    .nitrogen-home {
+      --button-box-bg: linear-gradient(#0963c1, #1774d7);
+      --control-title-color: #0a80fa;
+      --border-color: #0a80fad4;
+      --footer-item-bg: rgba(0, 32, 66, 0.6);
+    }
+  }
+
   .nitrogen-box {
     width: 100%;
     height: 100%;
@@ -980,6 +990,10 @@
   }
 
   .nitrogen-home {
+    --button-box-bg: linear-gradient(#1fa6cb, #127cb5);
+    --control-title-color: #73e8fe;
+    --border-color: #00baffd4;
+    --footer-item-bg: #0e223b90;
     width: 100%;
     height: 100%;
     position: fixed;
@@ -1021,7 +1035,7 @@
           .top-left {
             display: flex;
             flex: 2;
-            color: #fff;
+            color: var(--vent-font-color);
 
             .button-box {
               position: relative;
@@ -1031,12 +1045,12 @@
               align-items: center;
               justify-content: center;
               border-radius: 5px;
-              color: #fff;
+              color: var(--vent-font-color);
               padding: 10px 15px;
               margin: 0px 10px;
               box-sizing: border-box;
               cursor: pointer;
-              background: linear-gradient(#1fa6cb, #127cb5);
+              background: var(--button-box-bg);
             }
           }
           .top-center {
@@ -1045,7 +1059,7 @@
             justify-content: center;
             align-items: center;
             font-size: 20px;
-            color: #fff;
+            color: var(--vent-font-color);
             .top-c-label {
               color: yellow;
             }
@@ -1056,14 +1070,14 @@
             flex: 2;
             justify-content: right;
             align-items: center;
-            color: #fff;
+            color: var(--vent-font-color);
 
             .control-type {
               display: flex;
-              color: #fff;
+              color: var(--vent-font-color);
 
               .control-title {
-                color: #73e8fe;
+                color: var(--control-title-color);
               }
             }
           }
@@ -1078,7 +1092,7 @@
           transform: translate(-50%);
           display: flex;
           justify-content: center;
-          color: #fff;
+          color: var(--vent-font-color);
           // box-shadow: 0 0 30px rgb(0, 153, 184) inset;
           pointer-events: auto;
 
@@ -1086,23 +1100,23 @@
             text-align: center;
 
             &:first-child {
-              background-color: #0032429a;
+              background-color: var(--footer-item-bg);
             }
 
             &:last-child {
               .device-val,
               .device-title {
-                border-right: 1px solid #00baffd4;
+                border-right: 1px solid var(--border-color);
               }
             }
 
             .device-val {
               line-height: 36px;
-              border-top: 1px solid #00baffd4;
-              border-left: 1px solid #00baffd4;
+              border-top: 1px solid var(--border-color);
+              border-left: 1px solid var(--border-color);
 
               &:last-child {
-                border-bottom: 1px solid #00baffd4;
+                border-bottom: 1px solid var(--border-color);
               }
             }
           }
@@ -1110,11 +1124,11 @@
           .device-title {
             width: 110px;
             text-align: center;
-            border-top: 1px solid #00baffd4;
-            border-left: 1px solid #00baffd4;
+            border-top: 1px solid var(--border-color);
+            border-left: 1px solid var(--border-color);
             line-height: 46px;
             color: #e7fdff;
-            background-color: #0032429a;
+            background-color: var(--footer-item-bg);
           }
         }
 
@@ -1136,7 +1150,7 @@
           margin-top: 10px;
           margin-bottom: 0px;
           pointer-events: auto;
-          color: #fff;
+          color: var(--vent-font-color);
           overflow: hidden;
 
           &:first-child {
@@ -1144,7 +1158,7 @@
           }
 
           .base-title {
-            color: #fff;
+            color: var(--vent-font-color);
             margin-bottom: 8px;
             padding-left: 10px;
             position: relative;
@@ -1215,7 +1229,7 @@
             align-items: center;
 
             .signal-title {
-              color: #7af5ff;
+              color: var(--vent-font-action-link);
               margin: 0 5px;
             }
 
@@ -1236,7 +1250,7 @@
           }
 
           .item-data-box {
-            color: #fff;
+            color: var(--vent-font-color);
 
             .state-icon {
               display: inline-block;
@@ -1344,7 +1358,7 @@
       height: 34px;
       text-align: center;
       font-weight: 600;
-      color: #7af5ff;
+      color: var(--vent-font-action-link);
       // background-image: url('../../../assets/img/yfj/light.png');
       background-repeat: no-repeat;
       background-position-x: center;
@@ -1381,7 +1395,7 @@
 
     .monitor-title {
       width: 100px;
-      color: #7af5ff;
+      color: var(--vent-font-action-link);
       font-weight: 400;
       // font-size: 14px;
       font-size: 16px;
@@ -1442,18 +1456,18 @@
   }
 
   :deep(.zxm-radio-wrapper) {
-    color: #fff !important;
+    color: var(--vent-font-color) !important;
   }
 
   :deep(.zxm-radio-group) {
-    color: #fff !important;
+    color: var(--vent-font-color) !important;
   }
 
   :deep(.zxm-radio-group .zxm-radio-wrapper) {
-    color: #fff !important;
+    color: var(--vent-font-color) !important;
   }
   :deep(.zxm-radio-disabled + span) {
-    color: #fff;
+    color: var(--vent-font-color);
   }
 
   :deep(.zxm-radio-disabled .zxm-radio-inner::after) {

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

@@ -513,6 +513,7 @@
 </script>
 
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @ventSpace: zxm;
 
   .nitrogen-box {

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

@@ -712,6 +712,7 @@
 </script>
 
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @ventSpace: zxm;
 
   .nitrogen-box {

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

@@ -489,7 +489,7 @@
     .@{ventSpace}-select-selector {
       width: 100% !important;
       background: #00000017 !important;
-      border: 1px solid @vent-form-item-boder !important;
+      border: 1px solid @vent-form-item-border !important;
 
       input,
       .@{ventSpace}-select-selection-item,

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

@@ -1754,7 +1754,7 @@
       input {
         background: transparent !important;
         color: var(--vent-font-color);
-        border: 1px solid #3ad8ff77 !important;
+        border: 1px solid var(--vent-form-item-border) !important;
       }
     }
 

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

@@ -417,9 +417,11 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
   @import '../../comment/less/workFace.less';
   @ventSpace: zxm;
+
   .elementContent {
     :deep(.main-container) {
       display: flex;
@@ -609,13 +611,13 @@
       display: flex;
       .control-title {
         width: 150px;
-        color: #73e8fe;
+        color: var(--vent-font-action-link);
       }
     }
   }
   .state-header {
     display: flex;
-    color: #73e8fe;
+    color: var(--vent-font-action-link);
     .header-item {
       width: 25%;
       text-align: center;

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

@@ -323,10 +323,19 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
   @import '../../comment/less/workFace.less';
   @ventSpace: zxm;
+
+  @{theme-deepblue} {
+    .elementContent {
+      --image-pump1: url('/@/assets/images/themify/deepblue/vent/pump1.png');
+    }
+  }
+
   .elementContent {
+    --image-pump1: url('/@/assets/images/vent/pump1.png');
     :deep(.main-container) {
       display: flex;
       flex-wrap: wrap;
@@ -409,7 +418,7 @@
       width: 327px;
       height: 65px;
       padding: 0 5px;
-      background: url('/@/assets/images/vent/pump1.png') no-repeat;
+      background: var(--image-pump1) no-repeat;
       background-size: cover;
       background-origin: content-box;
       margin-top: 2px;
@@ -464,7 +473,7 @@
   }
   .state-header {
     display: flex;
-    color: #73e8fe;
+    color: var(--vent-font-action-link);
     .header-item {
       width: 25%;
       text-align: center;

src/views/vent/monitorManager/groutMonitor/components/groutHomeHjt.vue

@@ -9,17 +9,19 @@
         </div>
         <div class="device-detail">
           <div class="device-val">
-            <span :style="{ color: '#10BC79' }">{{ monitorData['InputFlux'] !== undefined ? monitorData['InputFlux'] : '-' }}</span>
+            <span :style="{ color: 'var(--vent-table-action-link)' }">
+              {{ monitorData['InputFlux'] !== undefined ? monitorData['InputFlux'] : '-' }}
+            </span>
           </div>
           <div class="device-val">
-            <span :style="{ color: '#10BC79' }">{{
-              monitorData['CurrentCumulativeFlow'] !== undefined ? monitorData['CurrentCumulativeFlow'] : '-'
-            }}</span>
+            <span :style="{ color: 'var(--vent-table-action-link)' }">
+              {{ monitorData['CurrentCumulativeFlow'] !== undefined ? monitorData['CurrentCumulativeFlow'] : '-' }}
+            </span>
           </div>
           <div class="device-val">
-            <span :style="{ color: '#10BC79' }">{{
-              monitorData['AccumulateRunDuration'] !== undefined ? monitorData['AccumulateRunDuration'] : '-'
-            }}</span>
+            <span :style="{ color: 'var(--vent-table-action-link)' }">
+              {{ monitorData['AccumulateRunDuration'] !== undefined ? monitorData['AccumulateRunDuration'] : '-' }}
+            </span>
           </div>
         </div>
         <div class="device-detail">
@@ -124,10 +126,20 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
   @ventSpace: zxm;
 
+  @{theme-deepblue} {
+    .monitor-container {
+      --box-shadow: #316b92;
+      --border-color: #0a80fad4;
+    }
+  }
+
   .monitor-container {
+    --box-shadow: #0099b8;
+    --border-color: #00baffd4;
     width: 100%;
     height: 100%;
     // height: 550px;
@@ -147,15 +159,15 @@
         flex-direction: row;
         justify-content: center;
         color: #fff;
-        box-shadow: 0 0 30px rgb(0, 153, 184) inset;
+        box-shadow: 0 0 30px var(--box-shadow) inset;
       }
       .device-title {
         width: 110px;
         text-align: center;
-        border-top: 1px solid #00baffd4;
-        border-left: 1px solid #00baffd4;
+        border-top: 1px solid var(--border-color);
+        border-left: 1px solid var(--border-color);
         line-height: 46px;
-        color: #00e5ff;
+        color: var(--vent-table-action-link);
         background-color: #00bbff21;
       }
       .device-detail {
@@ -167,15 +179,15 @@
         &:last-child {
           .device-val,
           .device-title {
-            border-right: 1px solid #00baffd4;
+            border-right: 1px solid var(--border-color);
           }
         }
         .device-val {
           line-height: 36px;
-          border-top: 1px solid #00baffd4;
-          border-left: 1px solid #00baffd4;
+          border-top: 1px solid var(--border-color);
+          border-left: 1px solid var(--border-color);
           &:last-child {
-            border-bottom: 1px solid #00baffd4;
+            border-bottom: 1px solid var(--border-color);
           }
         }
       }

src/views/vent/monitorManager/groutMonitor/components/groutHomeJj.vue

@@ -122,10 +122,20 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
   @ventSpace: zxm;
 
+  @{theme-deepblue} {
+    .monitor-container {
+      --box-shadow: #316b92;
+      --border-color: #0a80fad4;
+    }
+  }
+
   .monitor-container {
+    --box-shadow: #0099b8;
+    --border-color: #00baffd4;
     width: 100%;
     height: 100%;
     // height: 550px;
@@ -145,15 +155,15 @@
         flex-direction: row;
         justify-content: center;
         color: #fff;
-        box-shadow: 0 0 30px rgb(0, 153, 184) inset;
+        box-shadow: 0 0 30px var(--box-shadow) inset;
       }
       .device-title {
         width: 110px;
         text-align: center;
-        border-top: 1px solid #00baffd4;
-        border-left: 1px solid #00baffd4;
+        border-top: 1px solid var(--border-color);
+        border-left: 1px solid var(--border-color);
         line-height: 46px;
-        color: #00e5ff;
+        color: var(--vent-table-action-link);
         background-color: #00bbff21;
       }
       .device-detail {
@@ -164,15 +174,15 @@
         &:last-child {
           .device-val,
           .device-title {
-            border-right: 1px solid #00baffd4;
+            border-right: 1px solid var(--border-color);
           }
         }
         .device-val {
           line-height: 36px;
-          border-top: 1px solid #00baffd4;
-          border-left: 1px solid #00baffd4;
+          border-top: 1px solid var(--border-color);
+          border-left: 1px solid var(--border-color);
           &:last-child {
-            border-bottom: 1px solid #00baffd4;
+            border-bottom: 1px solid var(--border-color);
           }
         }
       }

src/views/vent/monitorManager/groutMonitor/components/groutHomelt.vue

@@ -189,10 +189,20 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
   @ventSpace: zxm;
 
+  @{theme-deepblue} {
+    .monitor-container {
+      --box-shadow: #316b92;
+      --border-color: #0a80fad4;
+    }
+  }
+
   .monitor-container {
+    --box-shadow: #0099b8;
+    --border-color: #00baffd4;
     width: 100%;
     height: 100%;
     // height: 550px;
@@ -212,17 +222,17 @@
         flex-direction: row;
         justify-content: center;
         color: #fff;
-        box-shadow: 0 0 30px rgb(0, 153, 184) inset;
+        box-shadow: 0 0 30px var(--box-shadow) inset;
         margin-top: 500px;
       }
 
       .device-title {
         width: 130px;
         text-align: center;
-        border-top: 1px solid #00baffd4;
-        border-left: 1px solid #00baffd4;
+        border-top: 1px solid var(--border-color);
+        border-left: 1px solid var(--border-color);
         line-height: 46px;
-        color: #00e5ff;
+        color: var(--vent-table-action-link);
         background-color: #00bbff21;
         backdrop-filter: blur(5px);
       }
@@ -237,17 +247,17 @@
         &:last-child {
           .device-val,
           .device-title {
-            border-right: 1px solid #00baffd4;
+            border-right: 1px solid var(--border-color);
           }
         }
 
         .device-val {
           line-height: 36px;
-          border-top: 1px solid #00baffd4;
-          border-left: 1px solid #00baffd4;
+          border-top: 1px solid var(--border-color);
+          border-left: 1px solid var(--border-color);
 
           &:last-child {
-            border-bottom: 1px solid #00baffd4;
+            border-bottom: 1px solid var(--border-color);
           }
         }
       }

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

@@ -510,7 +510,7 @@
       cursor: pointer;
 
       &:hover {
-        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+        background: var(--vent-modal-bg2);
       }
 
       &::before {
@@ -541,7 +541,7 @@
       display: flex;
       align-items: center;
       .btn {
-        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+        background: var(--vent-modal-bg2);
       }
     }
     .btn {
@@ -566,7 +566,7 @@
     }
 
     .btn1 {
-      border: 1px solid #5cfaff;
+      border: 1px solid var(--vent-btn-primary-border-color);
 
       &::before {
         background-image: linear-gradient(#2effee92, #0cb1d592);
@@ -584,18 +584,18 @@
 
   :deep(.@{ventSpace}-tabs-tabpane-active) {
     height: 100%;
-    border: 1px solid #44d3ff70;
+    border: 1px solid var(--vent-device-manager-box-border);
     border-radius: 2px;
     -webkit-backdrop-filter: blur(8px);
     box-shadow: 0 0 20px #44b4ff33 inset;
-    background-color: #ffffff11;
+    background-color: var(--vent-device-manager-box-bg);
     overflow-y: auto;
   }
 
   :deep(.@{ventSpace}-tabs-card) {
     .@{ventSpace}-tabs-tab {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
-      border-color: #74e9fe;
+      background: var(--vent-modal-bg2);
+      border-color: var(--vent-btn-primary-border-color);
       border-radius: 0%;
 
       &:hover {
@@ -608,18 +608,18 @@
     }
 
     .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-      color: aqua;
+      color: var(--vent-font-action-link);
     }
 
     .@{ventSpace}-tabs-nav::before {
-      border-color: #74e9fe;
+      border-color: var(--vent-btn-primary-border-color);
     }
 
     .@{ventSpace}-picker,
     .@{ventSpace}-select-selector {
       width: 100% !important;
       background: #00000017 !important;
-      border: 1px solid @vent-form-item-boder !important;
+      border: 1px solid @vent-form-item-border !important;
 
       input,
       .@{ventSpace}-select-selection-item,
@@ -638,48 +638,5 @@
     .@{ventSpace}-picker-separator {
       color: #fff !important;
     }
-
-    .@{ventSpace}-table-cell-row-hover {
-      background: #264d8833 !important;
-    }
-
-    .@{ventSpace}-table-row-selected {
-      background: #00c0a311 !important;
-
-      td {
-        background-color: #00000000 !important;
-      }
-    }
-
-    .@{ventSpace}-table-thead {
-      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-      background: #3d9dd45d !important;
-
-      & > tr > th,
-      .@{ventSpace}-table-column-title {
-        // color: #70f9fc !important;
-        border-color: #84f2ff !important;
-        border-left: none !important;
-        border-right: none !important;
-        padding: 7px;
-      }
-    }
-
-    .@{ventSpace}-table-tbody {
-      tr > td {
-        padding: 12px;
-      }
-    }
-
-    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
-      background-color: #26648855 !important;
-    }
-
-    .jeecg-basic-table-row__striped {
-      // background: #97efff11 !important;
-      td {
-        background-color: #97efff11 !important;
-      }
-    }
   }
 </style>

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

@@ -368,7 +368,7 @@
     .@{ventSpace}-select-selector {
       width: 100% !important;
       background: #00000017 !important;
-      border: 1px solid @vent-form-item-boder !important;
+      border: 1px solid @vent-form-item-border !important;
       input,
       .@{ventSpace}-select-selection-item,
       .@{ventSpace}-picker-suffix {

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

@@ -283,6 +283,7 @@
 </script>
 
 <style scoped lang="less">
+  @import '/@/design/theme.less';
   @ventSpace: zxm;
 
   :deep(.zxm-table-container) {
@@ -303,7 +304,31 @@
     left: 0 !important;
   }
 
+  @{theme-deepblue} {
+    .data-statistics {
+      --image-vent-tf: url('/@/assets/images/themify/deepblue/vent-tf.png');
+      --image-dust-fc: url('/@/assets/images/themify/deepblue/dust-fc.png');
+      --image-gas-ws: url('/@/assets/images/themify/deepblue/gas-ws.png');
+      --image-fire-fz: url('/@/assets/images/themify/deepblue/fire-fz.png');
+      --image-aqjc: url('/@/assets/images/themify/deepblue/aqjc.png');
+      --image-his-one: url('/@/assets/images/themify/deepblue/his-one.png');
+    }
+
+    .tab-box {
+      --table-border: #0eb3ff66;
+      --tab-bg: linear-gradient(#001325, #051f4a);
+      --image-top-btn: url('/@/assets/images/themify/deepblue/top-btn.png');
+      --image-top-btn-select: url('/@/assets/images/themify/deepblue/top-btn-select.png');
+    }
+  }
+
   .data-statistics {
+    --image-vent-tf: url('/@/assets/images/vent-tf.png');
+    --image-dust-fc: url('/@/assets/images/dust-fc.png');
+    --image-gas-ws: url('/@/assets/images/gas-ws.png');
+    --image-fire-fz: url('/@/assets/images/fire-fz.png');
+    --image-aqjc: url('/@/assets/images/aqjc.png');
+    --image-his-one: url('/@/assets/images/his-one.png');
     height: 200px;
     padding: 20px;
     margin-top: 90px;
@@ -334,27 +359,27 @@
       }
 
       &:nth-child(1) .left-box {
-        background: url('../../../../assets/images/vent-tf.png') no-repeat center;
+        background: var(--image-vent-tf) no-repeat center;
         background-size: 100% auto;
       }
 
       &:nth-child(2) .left-box {
-        background: url('../../../../assets/images/dust-fc.png') no-repeat center;
+        background: var(--image-dust-fc) no-repeat center;
         background-size: 100% auto;
       }
 
       &:nth-child(3) .left-box {
-        background: url('../../../../assets/images/gas-ws.png') no-repeat center;
+        background: var(--image-gas-ws) no-repeat center;
         background-size: 100% auto;
       }
 
       &:nth-child(4) .left-box {
-        background: url('../../../../assets/images/fire-fz.png') no-repeat center;
+        background: var(--image-fire-fz) no-repeat center;
         background-size: 100% auto;
       }
 
       &:nth-child(5) .left-box {
-        background: url('../../../../assets/images/aqjc.png') no-repeat center;
+        background: var(--image-aqjc) no-repeat center;
         background-size: 100% auto;
       }
 
@@ -372,7 +397,7 @@
           width: 100%;
           height: 40px;
           color: #fff;
-          background: url('../../../../assets/images/his-one.png') no-repeat center;
+          background: var(--image-his-one) no-repeat center;
           background-size: 100% 100%;
 
           .text-label {
@@ -402,11 +427,15 @@
   }
 
   .tab-box {
+    --table-border: #0efcff44;
+    --tab-bg: linear-gradient(#001325, #012e4f);
+    --image-top-btn: url('/@/assets/images/top-btn.png');
+    --image-top-btn-select: url('/@/assets/images/top-btn-select.png');
     display: flex;
     color: #fff;
     position: relative;
     top: 11px;
-    background: linear-gradient(#001325, #012e4f);
+    background: var(--tab-bg);
 
     :deep(.zxm-tabs-nav) {
       margin: 0 !important;
@@ -414,7 +443,7 @@
       .zxm-tabs-tab {
         width: 180px;
         height: 45px;
-        background: url('@/assets/images/top-btn.png') center no-repeat;
+        background: var(--image-top-btn) center no-repeat;
         background-size: cover;
         display: flex;
         justify-content: center;
@@ -424,7 +453,7 @@
       .zxm-tabs-tab-active {
         width: 180px;
         position: relative;
-        background: url('@/assets/images/top-btn-select.png') center no-repeat;
+        background: var(--image-top-btn-select) center no-repeat;
         background-size: cover;
 
         .zxm-tabs-tab-btn {
@@ -455,7 +484,7 @@
       height: 2px;
       top: 0px;
       left: -10px;
-      border-bottom: 1px solid #0efcff44;
+      border-bottom: 1px solid var(--table-border);
     }
   }
 </style>

src/views/vent/performance/fileDetail/commen/treeList.vue

@@ -290,7 +290,16 @@
   };
 </script>
 <style lang="less">
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .vtl-node {
+      --node-select-bg: #3f506a;
+    }
+  }
+
   .vtl-node {
+    --node-select-bg: #1c4869;
     .vtl-node-main {
       display: flex;
       align-items: center;
@@ -319,7 +328,7 @@
 
       &.selected {
         // background-color: rgba(45, 113, 134, 0.2);
-        background-color: #1c4869;
+        background-color: var(--node-select-bg);
       }
 
       .vtl-input {

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

@@ -475,9 +475,19 @@
 </script>
 
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @ventSpace: zxm;
 
+  @{theme-deepblue} {
+    .file-details {
+      --input-border: #0863c3;
+      --image-btn: url(/@/assets/images/themify/deepblue/files/details/btn.png);
+    }
+  }
+
   .file-details {
+    --input-border: #31bccc;
+    --image-btn: url(/@/assets/images/files/details/btn.png);
     width: calc(100% - 10px);
     height: calc(100% - 100px);
     padding: 0px 15px 15px 15px;
@@ -567,7 +577,7 @@
   ::v-deep .zxm-btn-primary {
     background-color: transparent;
     border: none;
-    background: url(../../../../assets/images/files/details/btn.png) no-repeat !important;
+    background: var(--image-btn) no-repeat !important;
     background-size: 100% 100% !important;
   }
 
@@ -579,7 +589,7 @@
     width: 220px;
     height: 30px;
     background: transparent;
-    border: 1px solid #31bccc;
+    border: 1px solid var(--input-border);
     color: #fff;
     margin-right: 20px;
     border-radius: 5px;
@@ -588,7 +598,7 @@
   ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
     height: 30px !important;
     background: transparent !important;
-    border: 1px solid #31bccc !important;
+    border: 1px solid var(--input-border) !important;
     border-radius: 5px !important;
     color: #fff !important;
   }

src/views/vent/reportManager/comment/common/treeList.vue

@@ -3,9 +3,8 @@
     <div :class="treeNodeClass" @mouseover="mouseOver" @mouseout="mouseOut" @click.stop="toggle">
       <div class="vtl-border-text">
         <template v-if="isFolder">
-          <slot v-if="isexpanded" :item="{ title: model.title, isFolder: true, isexpanded:true }"
-            name="icon"> </slot>
-          <slot v-else :item="{ title: model.title, isFolder: true,isexpanded:false  }" name="icon"></slot>
+          <slot v-if="isexpanded" :item="{ title: model.title, isFolder: true, isexpanded: true }" name="icon"> </slot>
+          <slot v-else :item="{ title: model.title, isFolder: true, isexpanded: false }" name="icon"></slot>
         </template>
         <slot v-else :item="{ title: model.title, isFolder: false }" name="icon"></slot>
         <span class="vtl-node-content ellipsis">
@@ -21,8 +20,14 @@
   </div>
   <div class="vtl-tree-margin" v-show="isexpanded">
     <!-- 这里无法使用$attr来透传属性官方还未解决此bug -->
-    <treeList @on-click="(depth) => $emit('onClick', depth)" @detail-node="(depth) => $emit('detailNode', depth)"
-      v-for="newmodel in model.children" :selected="selected" :model="newmodel" :key="newmodel.id">
+    <treeList
+      @on-click="(depth) => $emit('onClick', depth)"
+      @detail-node="(depth) => $emit('detailNode', depth)"
+      v-for="newmodel in model.children"
+      :selected="selected"
+      :model="newmodel"
+      :key="newmodel.id"
+    >
       <template #icon="slotProps">
         <slot name="icon" v-bind="slotProps"></slot>
       </template>
@@ -33,156 +38,154 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, } from 'vue';
-interface IFileSystem {
-  id: string;
-  title: string;
-  pid: string;
-  ppid: string,
-  isFolder: boolean;
-  isexpanded:boolean;
-  isAdd: boolean;
-  children?: IFileSystem[];
-}
-// 吐出去的事件
-const emit = defineEmits([
-  'onClick',
-  'detailNode',
-]);
-// 拿到传入的值
-const props = withDefaults(
-  defineProps<{
-    model: IFileSystem;
-    selected: IFileSystem;
-  }>(),
-  {
-    // draggable: false,
+  import { computed, ref } from 'vue';
+  interface IFileSystem {
+    id: string;
+    title: string;
+    pid: string;
+    ppid: string;
+    isFolder: boolean;
+    isexpanded: boolean;
+    isAdd: boolean;
+    children?: IFileSystem[];
   }
-);
-//是否移入
-const isHover = ref(false);
-// 是否是文件夹
-const isFolder = computed(() => {
-  return props.model.isFolder;
-});
-//是否展开
-const isexpanded = computed(() => {
-  return props.model.isexpanded;
-});
-const isSelected = computed(() => {
-  if (props.model.pid == '0' || props.model.pid == '1' || props.model.pid == '2') {
-    return props.selected.id === props.model.id && props.selected.pid === props.model.pid;
-  } else if (props.model.ppid == '0' || props.model.ppid == '1' || props.model.ppid == '2') {
-    return props.selected.id === props.model.id && props.selected.ppid === props.model.ppid;
-  } else {
-    return props.selected.id === props.model.id;
-  }
-})
-
-// 拖拽样式
-const treeNodeClass = computed(() => {
-  return {
-    'vtl-node-main': true,
-    selected: isSelected.value,
-  };
-});
-
-// 删除目录
-const delNode = () => {
-  emit('detailNode', {
-    ...props.model,
-    eventType: 'detail',
+  // 吐出去的事件
+  const emit = defineEmits(['onClick', 'detailNode']);
+  // 拿到传入的值
+  const props = withDefaults(
+    defineProps<{
+      model: IFileSystem;
+      selected: IFileSystem;
+    }>(),
+    {
+      // draggable: false,
+    }
+  );
+  //是否移入
+  const isHover = ref(false);
+  // 是否是文件夹
+  const isFolder = computed(() => {
+    return props.model.isFolder;
+  });
+  //是否展开
+  const isexpanded = computed(() => {
+    return props.model.isexpanded;
+  });
+  const isSelected = computed(() => {
+    if (props.model.pid == '0' || props.model.pid == '1' || props.model.pid == '2') {
+      return props.selected.id === props.model.id && props.selected.pid === props.model.pid;
+    } else if (props.model.ppid == '0' || props.model.ppid == '1' || props.model.ppid == '2') {
+      return props.selected.id === props.model.id && props.selected.ppid === props.model.ppid;
+    } else {
+      return props.selected.id === props.model.id;
+    }
   });
-};
 
+  // 拖拽样式
+  const treeNodeClass = computed(() => {
+    return {
+      'vtl-node-main': true,
+      selected: isSelected.value,
+    };
+  });
 
-// 展开收起
-const toggle = () => {
-  if (isFolder.value) {
-    console.log(props.model, 'props.model---------')
-    props.model.isexpanded=!props.model.isexpanded
-    emit('onClick', {
-      ...props.model,
-    }); //lxh
-  } else {
-    console.log(props.model, 'props.model---------')
-    emit('onClick', {
+  // 删除目录
+  const delNode = () => {
+    emit('detailNode', {
       ...props.model,
+      eventType: 'detail',
     });
-  }
-};
-// 拖拽结束
-const mouseOver = () => {
-  isHover.value = true;
-};
-// 移出
-const mouseOut = () => {
-  isHover.value = false;
-};
-
-
+  };
 
+  // 展开收起
+  const toggle = () => {
+    if (isFolder.value) {
+      console.log(props.model, 'props.model---------');
+      props.model.isexpanded = !props.model.isexpanded;
+      emit('onClick', {
+        ...props.model,
+      }); //lxh
+    } else {
+      console.log(props.model, 'props.model---------');
+      emit('onClick', {
+        ...props.model,
+      });
+    }
+  };
+  // 拖拽结束
+  const mouseOver = () => {
+    isHover.value = true;
+  };
+  // 移出
+  const mouseOut = () => {
+    isHover.value = false;
+  };
 </script>
 <style lang="less">
-.vtl-node {
-  .vtl-node-main {
-    display: flex;
-    align-items: center;
-    padding: 2px 0 2px 2px;
-    cursor: pointer;
+  @import '/@/design/theme.less';
 
-    &:hover {
-      .vtl-border-text {
-        width: 80%;
-      }
+  @{theme-deepblue} {
+    .vtl-node {
+      --node-select-bg: #3f506a;
     }
+  }
 
-    .vtl-border-text {
-      display: flex; //lxh
-      flex: 1;
-      align-items: center; //lxh
-      width: 100%;
-      padding-left: 5px;
-
-      .iconfont {
-        width: 16px;
-        height: 16px;
-        vertical-align: text-bottom;
+  .vtl-node {
+    --node-select-bg: #1c4869;
+    .vtl-node-main {
+      display: flex;
+      align-items: center;
+      padding: 2px 0 2px 2px;
+      cursor: pointer;
+
+      &:hover {
+        .vtl-border-text {
+          width: 80%;
+        }
       }
-    }
-
-    &.selected {
-      // background-color: rgba(45, 113, 134, 0.2);
-      background-color: #1c4869;
-    }
-
 
+      .vtl-border-text {
+        display: flex; //lxh
+        flex: 1;
+        align-items: center; //lxh
+        width: 100%;
+        padding-left: 5px;
+
+        .iconfont {
+          width: 16px;
+          height: 16px;
+          vertical-align: text-bottom;
+        }
+      }
 
-    .vtl-node-content {
-      color: #fff;
-      padding-left: 5px;
-      font-size: 14px;
-      width: 80%;
-      display: inline-block;
-      vertical-align: bottom;
-    }
+      &.selected {
+        // background-color: rgba(45, 113, 134, 0.2);
+        background-color: var(--node-select-bg);
+      }
 
-    &:hover {
       .vtl-node-content {
         color: #fff;
-        overflow: hidden;
+        padding-left: 5px;
+        font-size: 14px;
+        width: 80%;
+        display: inline-block;
+        vertical-align: bottom;
       }
-    }
-
 
+      &:hover {
+        .vtl-node-content {
+          color: #fff;
+          overflow: hidden;
+        }
+      }
 
-    .vtl-operation {
-      padding-right: 10px;
+      .vtl-operation {
+        padding-right: 10px;
+      }
     }
   }
-}
 
-.vtl-tree-margin {
-  padding-left: 1em;
-}
+  .vtl-tree-margin {
+    padding-left: 1em;
+  }
 </style>

src/views/vent/reportManager/comment/report-modal.vue

@@ -160,6 +160,8 @@
 </script>
 
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
   .report-add {
     position: relative;
     width: 100%;
@@ -186,7 +188,7 @@
   :deep(.zxm-select-selector) {
     width: 100%;
     color: #fff;
-    border: 1px solid #3ad8ff77 !important;
+    border: 1px solid var(--vent-form-item-border) !important;
     background-color: #ffffff00 !important;
   }
 
@@ -200,7 +202,7 @@
 
   :deep(.zxm-input) {
     color: #fff;
-    border: 1px solid #3ad8ff77 !important;
+    border: 1px solid var(--vent-form-item-border) !important;
     background-color: #ffffff00 !important;
   }
 </style>

src/views/vent/reportManager/comment/reportMap.vue

@@ -175,6 +175,8 @@
 </script>
 
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
   .report-map {
     position: relative;
     width: 100%;
@@ -192,7 +194,7 @@
   :deep(.zxm-select-selector) {
     width: 100%;
     // color: #fff;
-    border: 1px solid #3ad8ff77 !important;
+    border: 1px solid var(--vent-form-item-border) !important;
     background-color: #ffffff00 !important;
   }
 

src/views/vent/safetyList/common/HistoryTable.vue

@@ -10,311 +10,311 @@
 </template>
 
 <script lang="ts" setup>
-//ts语法
-import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
-import { subStationList } from '../safetyList.api';
-import { historyColumns } from '../historyLsit.data';
-import { FormSchema } from '/@/components/Form/index';
-import { BasicTable } from '/@/components/Table';
-import { useListPage } from '/@/hooks/system/useListPage';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { useMethods } from '/@/hooks/system/useMethods';
-import { defHttp } from '/@/utils/http/axios';
-import dayjs from 'dayjs';
-import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+  //ts语法
+  import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
+  import { subStationList } from '../safetyList.api';
+  import { historyColumns } from '../historyLsit.data';
+  import { FormSchema } from '/@/components/Form/index';
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { useMethods } from '/@/hooks/system/useMethods';
+  import { defHttp } from '/@/utils/http/axios';
+  import dayjs from 'dayjs';
+  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
 
-const props = defineProps({
-  columnsType: {
-    type: String,
-  },
-  columns: {
-    type: Array,
-    // required: true,
-    default: () => [],
-  },
-  historyColumns: {
-    type: Array,
-    default: () => [],
-  },
-  stationId: {
-    type: String,
-  },
-  scroll: {
-    type: Object,
-    default: { y: 0 },
-  },
-  formSchemas: {
-    type: Array<FormSchema>,
-    default: () => [],
-  },
-});
-const postExportXlsUrl = '/safety/ventanalySubStation/export158StatusLog';
-//获取分站数据
-const historyTable = ref();
-const loading = ref(false);
-const dataSource = ref([]);
+  const props = defineProps({
+    columnsType: {
+      type: String,
+    },
+    columns: {
+      type: Array,
+      // required: true,
+      default: () => [],
+    },
+    historyColumns: {
+      type: Array,
+      default: () => [],
+    },
+    stationId: {
+      type: String,
+    },
+    scroll: {
+      type: Object,
+      default: { y: 0 },
+    },
+    formSchemas: {
+      type: Array<FormSchema>,
+      default: () => [],
+    },
+  });
+  const postExportXlsUrl = '/safety/ventanalySubStation/export158StatusLog';
+  //获取分站数据
+  const historyTable = ref();
+  const loading = ref(false);
+  const dataSource = ref([]);
 
-const emit = defineEmits(['change']);
+  const emit = defineEmits(['change']);
 
-const deviceKide = ref('');
-const columns = ref([]);
-const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
-loading.value = true;
+  const deviceKide = ref('');
+  const columns = ref([]);
+  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
+  loading.value = true;
 
-watch(
-  () => {
-    return props.columnsType;
-  },
-  async (newVal) => {
-    debugger;
-    if (!newVal) return;
-    deviceKide.value = newVal;
-    if (historyTable.value) {
-      getForm().resetFields();
-      // getForm().updateSchema();
-      // getForm();
+  watch(
+    () => {
+      return props.columnsType;
+    },
+    async (newVal) => {
+      debugger;
+      if (!newVal) return;
+      deviceKide.value = newVal;
+      if (historyTable.value) {
+        getForm().resetFields();
+        // getForm().updateSchema();
+        // getForm();
+      }
+      dataSource.value = [];
+      nextTick(() => {
+        getDataSource();
+      });
+
+      if (historyTable.value) reload();
+    },
+    {
+      immediate: true,
     }
-    dataSource.value = [];
-    nextTick(() => {
-      getDataSource();
-    });
+  );
 
-    if (historyTable.value) reload();
-  },
-  {
-    immediate: true,
-  }
-);
+  watch(
+    () => props.scroll.y,
+    (newVal) => {
+      if (newVal) {
+        tableScroll.value = { y: newVal - 100 };
+      } else {
+        tableScroll.value = {};
+      }
+    }
+  );
 
-watch(
-  () => props.scroll.y,
-  (newVal) => {
-    if (newVal) {
-      tableScroll.value = { y: newVal - 100 };
-    } else {
-      tableScroll.value = {};
+  watch(
+    () => props.stationId,
+    async () => {
+      await getForm().setFieldsValue({});
     }
-  }
-);
+  );
 
-watch(
-  () => props.stationId,
-  async () => {
-    await getForm().setFieldsValue({});
+  function resetFormParam() {
+    const formData = getForm().getFieldsValue();
+    const pagination = getPaginationRef();
+    formData['pageNo'] = pagination['current'];
+    formData['pageSize'] = pagination['pageSize'];
+    const params = {
+      pageNo: pagination['current'],
+      pageSize: pagination['pageSize'],
+      createTime_begin: formData['starttime_begin'],
+      createTime_end: formData['starttime_end'],
+      stationId: props.stationId,
+      status: formData['status'],
+    };
+    return params;
   }
-);
-
-function resetFormParam() {
-  const formData = getForm().getFieldsValue();
-  const pagination = getPaginationRef();
-  formData['pageNo'] = pagination['current'];
-  formData['pageSize'] = pagination['pageSize'];
-  const params = {
-    pageNo: pagination['current'],
-    pageSize: pagination['pageSize'],
-    createTime_begin: formData['starttime_begin'],
-    createTime_end: formData['starttime_end'],
-    stationId: props.stationId,
-    status: formData['status'],
-  };
-  return params;
-}
 
-async function getDataSource() {
-  dataSource.value = [];
-  setLoading(true);
-  const params = await resetFormParam();
-  const res = await defHttp.post(
-    { url: '/safety/ventanalySubStation/get158StatusLog', params: params },
-    { joinParamsToUrl: true, isTransformResponse: false }
-  );
-  console.log(res.result['records']);
-  if (res.result['records'].length > 0) {
-    dataSource.value = res.result['records'];
-    setLoading(false);
-  } else {
+  async function getDataSource() {
     dataSource.value = [];
-    setLoading(false);
+    setLoading(true);
+    const params = await resetFormParam();
+    const res = await defHttp.post(
+      { url: '/safety/ventanalySubStation/get158StatusLog', params: params },
+      { joinParamsToUrl: true, isTransformResponse: false }
+    );
+    console.log(res.result['records']);
+    if (res.result['records'].length > 0) {
+      dataSource.value = res.result['records'];
+      setLoading(false);
+    } else {
+      dataSource.value = [];
+      setLoading(false);
+    }
+  }
+  //导入导出方法
+  function onExportXlsFn() {
+    const { exportXlsPost0 } = useMethods();
+    const params = resetFormParam();
+    exportXlsPost0('历史数据', postExportXlsUrl, params);
   }
-}
-//导入导出方法
-function onExportXlsFn() {
-  const { exportXlsPost0 } = useMethods();
-  const params = resetFormParam();
-  exportXlsPost0('历史数据', postExportXlsUrl, params);
-}
 
-// 列表页面公共参数、方法
-const { tableContext } = useListPage({
-  tableProps: {
-    // api: list,
-    columns: props.historyColumns ? props.historyColumns : (props.historyColumns as any[]),
-    canResize: true,
-    showTableSetting: false,
-    showActionColumn: false,
-    bordered: false,
-    size: 'small',
-    scroll: tableScroll,
-    showIndexColumn: true,
-    tableLayout: 'auto',
-    formConfig: {
-      labelAlign: 'left',
-      showAdvancedButton: false,
-      showSubmitButton: false,
-      showResetButton: false,
-      baseColProps: {
-        xs: 24,
-        sm: 24,
-        md: 24,
-        lg: 9,
-        xl: 7,
-        xxl: 4,
-      },
-      schemas:
-        props.formSchemas.length > 0
-          ? props.formSchemas
-          : [
-              {
-                field: 'starttime_begin',
-                label: '开始时间',
-                component: 'DatePicker',
-                defaultValue: dayjs().startOf('date'),
-                required: true,
-                componentProps: {
-                  showTime: true,
-                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
-                  getPopupContainer: getAutoScrollContainer,
-                },
-                colProps: {
-                  span: 6,
-                },
-              },
-              {
-                field: 'starttime_end',
-                label: '结束时间',
-                component: 'DatePicker',
-                defaultValue: dayjs(),
-                required: true,
-                componentProps: {
-                  showTime: true,
-                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
-                  getPopupContainer: getAutoScrollContainer,
+  // 列表页面公共参数、方法
+  const { tableContext } = useListPage({
+    tableProps: {
+      // api: list,
+      columns: props.historyColumns ? props.historyColumns : (props.historyColumns as any[]),
+      canResize: true,
+      showTableSetting: false,
+      showActionColumn: false,
+      bordered: false,
+      size: 'small',
+      scroll: tableScroll,
+      showIndexColumn: true,
+      tableLayout: 'auto',
+      formConfig: {
+        labelAlign: 'left',
+        showAdvancedButton: false,
+        showSubmitButton: false,
+        showResetButton: false,
+        baseColProps: {
+          xs: 24,
+          sm: 24,
+          md: 24,
+          lg: 9,
+          xl: 7,
+          xxl: 4,
+        },
+        schemas:
+          props.formSchemas.length > 0
+            ? props.formSchemas
+            : [
+                {
+                  field: 'starttime_begin',
+                  label: '开始时间',
+                  component: 'DatePicker',
+                  defaultValue: dayjs().startOf('date'),
+                  required: true,
+                  componentProps: {
+                    showTime: true,
+                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                    getPopupContainer: getAutoScrollContainer,
+                  },
+                  colProps: {
+                    span: 6,
+                  },
                 },
-                colProps: {
-                  span: 6,
+                {
+                  field: 'starttime_end',
+                  label: '结束时间',
+                  component: 'DatePicker',
+                  defaultValue: dayjs(),
+                  required: true,
+                  componentProps: {
+                    showTime: true,
+                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                    getPopupContainer: getAutoScrollContainer,
+                  },
+                  colProps: {
+                    span: 6,
+                  },
                 },
-              },
-              {
-                label: '连接状态',
-                field: 'status',
-                component: 'Select',
-                defaultValue: 1,
-                componentProps: () => {
-                  return {
-                    options: [
-                      { label: '连接成功', value: 1 },
-                      { label: '连接失败', value: 0 },
-                    ],
-                  };
+                {
+                  label: '连接状态',
+                  field: 'status',
+                  component: 'Select',
+                  defaultValue: 1,
+                  componentProps: () => {
+                    return {
+                      options: [
+                        { label: '连接成功', value: 1 },
+                        { label: '连接失败', value: 0 },
+                      ],
+                    };
+                  },
+                  colProps: {
+                    span: 6,
+                  },
                 },
-                colProps: {
-                  span: 6,
-                },
-              },
-            ],
-    },
-    // fetchSetting: {
-    pagination: {
-      current: 1,
-      pageSize: 20,
-      pageSizeOptions: ['10', '30', '50', '100'],
-      showQuickJumper: false,
-    },
+              ],
+      },
+      // fetchSetting: {
+      pagination: {
+        current: 1,
+        pageSize: 20,
+        pageSizeOptions: ['10', '30', '50', '100'],
+        showQuickJumper: false,
+      },
 
-    beforeFetch() {
-      const newParams = { ...resetFormParam() };
-      // debugger;
-      return newParams;
+      beforeFetch() {
+        const newParams = { ...resetFormParam() };
+        // debugger;
+        return newParams;
+      },
     },
-  },
-  exportConfig: {
-    name: '历史列表',
-    url: postExportXlsUrl,
-  },
-});
+    exportConfig: {
+      name: '历史列表',
+      url: postExportXlsUrl,
+    },
+  });
 
-//注册table数据
-const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
+  //注册table数据
+  const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
 
-watchEffect(() => {
-  if (historyTable.value && dataSource) {
-    const data = dataSource.value || [];
-    emit('change', data);
-  }
-});
+  watchEffect(() => {
+    if (historyTable.value && dataSource) {
+      const data = dataSource.value || [];
+      emit('change', data);
+    }
+  });
 
-onMounted(async () => {
-  if (props.stationId) {
-    nextTick(async () => {
-      await getDataSource();
-    });
-  }
-});
-defineExpose({ setLoading });
+  onMounted(async () => {
+    if (props.stationId) {
+      nextTick(async () => {
+        await getDataSource();
+      });
+    }
+  });
+  defineExpose({ setLoading });
 </script>
 
 <style scoped lang="less">
-@import '/@/design/vent/color.less';
+  @import '/@/design/theme.less';
 
-:deep(.@{ventSpace}-table-body) {
-  height: auto !important;
-}
-:deep(.zxm-picker) {
-  height: 30px !important;
-}
-.history-table {
-  width: 100%;
-  :deep(.jeecg-basic-table-form-container) {
-    .@{ventSpace}-form {
-      padding: 0 !important;
-      border: none !important;
-      margin-bottom: 0 !important;
-      .@{ventSpace}-picker,
-      .@{ventSpace}-select-selector {
-        width: 100% !important;
-        height: 100%;
-        background: #00000017;
-        border: 1px solid #b7b7b7;
-        input,
-        .@{ventSpace}-select-selection-item,
-        .@{ventSpace}-picker-suffix {
-          color: #fff;
-        }
-        .@{ventSpace}-select-selection-placeholder {
-          color: #ffffffaa;
-        }
-        .@{ventSpace}-zxm-select-selection-item {
-          color: #00000017 !important;
+  :deep(.@{ventSpace}-table-body) {
+    height: auto !important;
+  }
+  :deep(.zxm-picker) {
+    height: 30px !important;
+  }
+  .history-table {
+    width: 100%;
+    :deep(.jeecg-basic-table-form-container) {
+      .@{ventSpace}-form {
+        padding: 0 !important;
+        border: none !important;
+        margin-bottom: 0 !important;
+        .@{ventSpace}-picker,
+        .@{ventSpace}-select-selector {
+          width: 100% !important;
+          height: 100%;
+          background: #00000017;
+          border: 1px solid #b7b7b7;
+          input,
+          .@{ventSpace}-select-selection-item,
+          .@{ventSpace}-picker-suffix {
+            color: #fff;
+          }
+          .@{ventSpace}-select-selection-placeholder {
+            color: #ffffffaa;
+          }
+          .@{ventSpace}-zxm-select-selection-item {
+            color: #00000017 !important;
+          }
         }
       }
+      .@{ventSpace}-table-title {
+        min-height: 0 !important;
+      }
     }
-    .@{ventSpace}-table-title {
-      min-height: 0 !important;
-    }
-  }
-  .pagination-box {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    .page-num {
-      border: 1px solid #0090d8;
-      padding: 4px 8px;
-      margin-right: 5px;
-      color: #0090d8;
-    }
-    .btn {
-      margin-right: 10px;
+    .pagination-box {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .page-num {
+        border: 1px solid #0090d8;
+        padding: 4px 8px;
+        margin-right: 5px;
+        color: #0090d8;
+      }
+      .btn {
+        margin-right: 10px;
+      }
     }
   }
-}
 </style>