From 2f2b09869423f7e98c64f79dc96c62d9a1696f24 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期一, 13 一月 2025 18:08:42 +0800
Subject: [PATCH] 修改整体样式偏大问题

---
 zhitan-vue/src/assets/styles/ruoyi.scss                                          |   39 
 zhitan-vue/src/assets/styles/element-ui.scss                                     |   12 
 zhitan-vue/src/assets/styles/sidebar.scss                                        |   33 
 zhitan-vue/src/layout/components/AppMain.vue                                     |   24 
 zhitan-vue/src/layout/components/TagsView/index.vue                              |  172 +-
 zhitan-vue/src/views/login.vue                                                   |    1 
 zhitan-vue/src/layout/components/Sidebar/Logo.vue                                |   18 
 zhitan-vue/src/layout/components/Sidebar/index.vue                               |   43 
 zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue       | 1014 +++++++------
 zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue                  |  240 +-
 zhitan-vue/src/settings.js                                                       |    4 
 zhitan-vue/src/views/index.vue                                                   |  499 ++----
 zhitan-vue/src/views/costmanage/deviation/deviation.vue                          | 1255 ++++++++-------
 zhitan-vue/src/assets/styles/page.scss                                           |   24 
 zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue |  205 +-
 zhitan-vue/src/components/CardHeader/CardHeader.vue                              |   36 
 zhitan-vue/src/layout/components/Navbar.vue                                      |   86 
 zhitan-vue/src/views/powerbalance/powerbalance.vue                               |  242 +-
 zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue        |  195 +-
 zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue  |  170 +-
 zhitan-vue/src/assets/styles/variables.module.scss                               |    6 
 zhitan-vue/src/views/costmanage/unitpricestrategy/unitpricestrategy.vue          |  230 +-
 22 files changed, 2,316 insertions(+), 2,232 deletions(-)

diff --git a/zhitan-vue/src/assets/styles/element-ui.scss b/zhitan-vue/src/assets/styles/element-ui.scss
index a456a20..f6c2c3a 100644
--- a/zhitan-vue/src/assets/styles/element-ui.scss
+++ b/zhitan-vue/src/assets/styles/element-ui.scss
@@ -3,20 +3,20 @@
 .themeDark {
   .el-breadcrumb__inner,
   .el-breadcrumb__inner a {
-    font-weight: bold !important;
+    font-weight: 500 !important;
     color: #97a8be !important;
-    font-size: 24px !important;
+    font-size: 16px !important;
   }
 }
 .themeLight {
   .el-breadcrumb__inner,
   .el-breadcrumb__inner a {
-    font-weight: bold !important;
-    color: #000103 !important;
-    font-size: 24px !important;
+    font-weight: 500 !important;
+    color: #333 !important;
+    font-size: 16px !important;
   }
   .app-breadcrumb.el-breadcrumb .no-redirect{
-    color: #000103 !important;
+    color: #333 !important;
   }
 }
 
diff --git a/zhitan-vue/src/assets/styles/page.scss b/zhitan-vue/src/assets/styles/page.scss
index c4c8e50..6b2a8b1 100644
--- a/zhitan-vue/src/assets/styles/page.scss
+++ b/zhitan-vue/src/assets/styles/page.scss
@@ -5,8 +5,9 @@
 
       .page-container-left {
         width: 280px;
-        min-height: calc(100vh - 120px);
+        min-height: calc(100vh - 148px);
         border-right: 1px solid #1a235d;
+        background: #1F1C49;
 
         .tree {
           height: calc(100vh - 170px);
@@ -14,6 +15,7 @@
           overflow-y: auto;
         }
       }
+      
 
       .page-container-right {
         flex: 1;
@@ -30,10 +32,15 @@
       padding: 18px 0 0 15px;
     }
 
+    .table-bg-style {
+      .theme-dark-mt20 {
+        margin-top: 20px;
+      }
+    }
+
     .tree {
       // padding: 20px;
-      margin-top: 25px;
-      // margin-left: 20px;
+      margin-top: 2px;
       overflow: hidden;
     }
   }
@@ -76,6 +83,9 @@
 
       .page-container-left {
         width: 280px;
+        min-height: calc(100vh - 148px);
+        border-right: 1px solid #fff;
+        background: #f1f4fa;
 
         // border-right: 1px solid #1a235d;
         .tree {
@@ -100,11 +110,15 @@
       // border: 1px solid #000000;
       padding: 18px 0 0 15px;
     }
+    .table-bg-style {
+      background-color: #fff;
+      padding-top: 12px;
+      margin-top: 12px;
+    }
 
     .tree {
       // padding: 20px;
-      margin-top: 25px;
-      // margin-left: 20px;
+      margin-top: 2px;
       overflow: hidden;
     }
   }
diff --git a/zhitan-vue/src/assets/styles/ruoyi.scss b/zhitan-vue/src/assets/styles/ruoyi.scss
index 4479086..d83440a 100644
--- a/zhitan-vue/src/assets/styles/ruoyi.scss
+++ b/zhitan-vue/src/assets/styles/ruoyi.scss
@@ -125,7 +125,6 @@
   .el-form .el-form-item__label ,.el-form-item__content {
     font-family: OPPOSans, OPPOSans;
     font-weight: 500;
-    font-size: 16px;
     color: #ffffff;
   }
 
@@ -143,7 +142,6 @@
   .el-input__inner {
     font-family: OPPOSans, OPPOSans;
     font-weight: 500;
-    font-size: 16px;
     color: #a7bfeb;
   }
 
@@ -154,8 +152,6 @@
     font-family: OPPOSans, OPPOSans;
     font-weight: 500;
     color: #a7bfeb;
-    font-size: 16px;
-    // color: #ffffff;
   }
 
   // 涓嬫媺姣忔潯
@@ -262,7 +258,7 @@
     background-color: transparent !important;
     font-family: OPPOSans, OPPOSans;
     font-weight: 500;
-    font-size: 16px;
+    // font-size: 16px;
     color: #ffffff;
 
     .el-table__header-wrapper,
@@ -280,7 +276,7 @@
         border-radius: 0px 0px 0px 0px;
         font-family: OPPOSans, OPPOSans;
         font-weight: 500;
-        font-size: 16px;
+        // font-size: 16px;
         color: #ffffff;
         border-bottom: none !important;
       }
@@ -397,18 +393,16 @@
   // 鏍�
   .el-tree {
     background: transparent;
-    font-family: Inter, Inter;
-    font-weight: 500;
     font-size: 16px;
     color: #ffffff;
 
     .el-tree-node__content {
-      height: 50px;
+      height: 48px;
     }
 
     .el-tree-node__expand-icon {
       color: #3371eb;
-      font-size: 18px;
+      font-size: 16px;
     }
 
     .el-tree-node:focus>.el-tree-node__content {
@@ -448,6 +442,7 @@
     margin-bottom: -1px;
     padding: 11px 0px;
     font-size: 13px;
+    color: #fff;
   }
 
   .pull-right {
@@ -465,7 +460,8 @@
     padding: 14px 15px 7px !important;
     min-height: 40px;
     background: #1a235d;
-    border: none;
+    border-bottom: 1px solid #a09f9f;
+    color: #fff;
   }
 
   .el-card__body {
@@ -561,6 +557,13 @@
   /* 琛ㄦ牸鍙充晶宸ュ叿鏍忔牱寮� */
   .top-right-btn {
     margin-left: auto;
+  }
+
+  .el-tabs__item {
+    color: #eaeaea;
+  }
+  .el-tabs__item.is-active {
+    color: #409EFF;
   }
 }
 
@@ -803,7 +806,7 @@
     background-color: transparent !important;
     font-family: OPPOSans, OPPOSans;
     font-weight: 500;
-    font-size: 16px;
+    // font-size: 16px;
     color: #ffffff;
 
     .el-table__header-wrapper,
@@ -818,7 +821,7 @@
         border-radius: 0px 0px 0px 0px;
         font-family: OPPOSans, OPPOSans;
         font-weight: 500;
-        font-size: 16px;
+        // font-size: 16px;
         color: #222222;
         border-bottom: none !important;
       }
@@ -936,18 +939,16 @@
   // 鏍�
   .el-tree {
     background: transparent;
-    font-family: Inter, Inter;
-    font-weight: 500;
     font-size: 16px;
     color: #333333;
 
     .el-tree-node__content {
-      height: 50px;
+      height: 48px;
     }
 
     .el-tree-node__expand-icon {
       color: #393939;
-      font-size: 18px;
+      font-size: 16px;
     }
 
     .el-tree-node:focus>.el-tree-node__content {
@@ -1003,8 +1004,8 @@
   .el-card__header {
     padding: 14px 15px 7px !important;
     min-height: 40px;
-    background: #1a235d;
-    border: none;
+    background: transparent;
+    border-bottom: 1px solid #e7eaec;
   }
 
   .el-card__body {
diff --git a/zhitan-vue/src/assets/styles/sidebar.scss b/zhitan-vue/src/assets/styles/sidebar.scss
index ea9eb7e..c5a8670 100644
--- a/zhitan-vue/src/assets/styles/sidebar.scss
+++ b/zhitan-vue/src/assets/styles/sidebar.scss
@@ -2,7 +2,8 @@
   #app {
     .el-menu-item.is-active {
       background: #3271eb !important;
-      border-radius: 30px 30px 30px 30px !important;
+      // border-radius: 30px 30px 30px 30px !important;
+      color: #fff;
     }
 
     .el-scrollbar {
@@ -10,9 +11,6 @@
       margin: 0 auto;
     }
 
-    // .is-active .menu-title {
-    //   color: #fff !important;
-    // }
 
     .main-container {
       height: 100%;
@@ -39,7 +37,6 @@
       overflow: hidden;
       -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
       box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-
       font-family: OPPOSans, OPPOSans;
       font-weight: 500;
       font-size: 18px;
@@ -86,7 +83,7 @@
       .el-menu {
         border: none;
         height: 100%;
-        width: 95%;
+        // width: 95%;
         margin: 0 auto;
       }
 
@@ -94,7 +91,7 @@
       .menu-title {
         overflow: hidden !important;
         font-weight: 400 !important;
-        font-size: 18px !important;
+        font-size: 16px !important;
       }
 
       // @media (min-width: 1440px) {
@@ -141,18 +138,18 @@
 
         &:hover {
           background-color: rgba(0, 0, 0, 0.06) !important;
-          border-radius: 30px 30px 30px 30px !important;
+          // border-radius: 30px 30px 30px 30px !important;
         }
       }
 
       // 瀛愮骇item
       & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
       & .theme-dark .el-sub-menu .el-menu-item {
-        border-radius: 30px 30px 30px 30px !important;
+        // border-radius: 30px 30px 30px 30px !important;
 
         &:hover {
           background-color: $base-sub-menu-hover !important;
-          border-radius: 30px 30px 30px 30px !important;
+          // border-radius: 30px 30px 30px 30px !important;
         }
       }
     }
@@ -286,7 +283,7 @@
   #app {
     .el-menu-item.is-active {
       background: #e0eafc !important;
-      border-radius: 30px 30px 30px 30px !important;
+      // border-radius: 30px 30px 30px 30px !important;
     }
 
     .el-scrollbar {
@@ -358,19 +355,19 @@
         display: inline-block;
         width: 100%;
         overflow: hidden;
-        border-radius: 30px;
+        // border-radius: 30px;
       }
 
       .svg-icon {
         margin-right: 16px;
-        font-size: 18px;
+        font-size: 16px;
         color: #C3C3C3;
       }
 
       .el-menu {
         border: none;
         height: 100%;
-        width: 95%;
+        // width: 95%;
         margin: 0 auto;
       }
 
@@ -378,7 +375,7 @@
       .menu-title {
         overflow: hidden !important;
         font-weight: 400 !important;
-        font-size: 18px !important;
+        font-size: 16px !important;
       }
 
       // @media (min-width: 1440px) {
@@ -425,7 +422,7 @@
 
         &:hover {
           background-color: #E0EAFC !important;
-          border-radius: 30px 30px 30px 30px !important;
+          // border-radius: 30px 30px 30px 30px !important;
         }
       }
 
@@ -433,11 +430,11 @@
       & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
       & .theme-dark .el-sub-menu .el-menu-item {
         background-color: #E0EAFC !important;
-        border-radius: 30px 30px 30px 30px !important;
+        // border-radius: 30px 30px 30px 30px !important;
 
         &:hover {
           background-color: #E0EAFC !important;
-          border-radius: 30px 30px 30px 30px !important;
+          // border-radius: 30px 30px 30px 30px !important;
         }
       }
     }
diff --git a/zhitan-vue/src/assets/styles/variables.module.scss b/zhitan-vue/src/assets/styles/variables.module.scss
index 85780cf..b324f60 100644
--- a/zhitan-vue/src/assets/styles/variables.module.scss
+++ b/zhitan-vue/src/assets/styles/variables.module.scss
@@ -18,8 +18,8 @@
 $base-menu-light-background: #ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background: #1A235D;
-$base-sub-menu-hover: #3371EB; //榧犳爣鎮仠
+$base-sub-menu-background: #232D70;
+$base-sub-menu-hover: rgba(50, 113, 235, 0.5); //榧犳爣鎮仠
 
 // 鑷畾涔夋殫鑹茶彍鍗曢鏍�
 /**
@@ -42,7 +42,7 @@
 $--color-danger: #F56C6C;
 $--color-info: #909399;
 
-$base-sidebar-width: 280px;
+$base-sidebar-width: 260px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
diff --git a/zhitan-vue/src/components/CardHeader/CardHeader.vue b/zhitan-vue/src/components/CardHeader/CardHeader.vue
index 1456322..503a443 100644
--- a/zhitan-vue/src/components/CardHeader/CardHeader.vue
+++ b/zhitan-vue/src/components/CardHeader/CardHeader.vue
@@ -2,8 +2,13 @@
   <div class="header">
     <slot></slot>
     <div class="btn-list" v-if="props.showBtn">
-      <div class="btn-list-item" :class="{ active: timeType == dict.value }" v-for="dict in props.period"
-        :key="dict.value" @click="handleClick(dict.value)">
+      <div
+        class="btn-list-item"
+        :class="{ active: timeType == dict.value }"
+        v-for="dict in props.period"
+        :key="dict.value"
+        @click="handleClick(dict.value)"
+      >
         {{ dict.label }}
       </div>
     </div>
@@ -11,17 +16,17 @@
 </template>
 
 <script setup>
-const emit = defineEmits();
-const props = defineProps(["showBtn", "period", "active"]);
+const emit = defineEmits()
+const props = defineProps(["showBtn", "period", "active"])
 const data = reactive({
-  timeType: 'DAY',
-});
-const { timeType } = toRefs(data);
-handleClick(timeType.value);
+  timeType: "DAY",
+})
+const { timeType } = toRefs(data)
+handleClick(timeType.value)
 
 function handleClick(value) {
-  timeType.value = value;
-  emit("handleClick", timeType.value, props.active);
+  timeType.value = value
+  emit("handleClick", timeType.value, props.active)
 }
 </script>
 
@@ -29,10 +34,10 @@
 .themeDark {
   .header {
     // width: 88px;
-    height: 29px;
+    height: 26px;
     font-family: OPPOSans, OPPOSans;
     font-weight: bold;
-    font-size: 22px;
+    font-size: 18px;
     color: #fffefe;
     line-height: 29px;
     text-align: left;
@@ -76,10 +81,10 @@
 .themeLight {
   .header {
     // width: 88px;
-    height: 29px;
+    height: 26px;
     font-family: OPPOSans, OPPOSans;
     font-weight: bold;
-    font-size: 22px;
+    font-size: 18px;
     color: #000;
     line-height: 29px;
     text-align: left;
@@ -116,6 +121,7 @@
         background: #1d6aff;
         color: #fff;
       }
-    } }
+    }
+  }
 }
 </style>
diff --git a/zhitan-vue/src/layout/components/AppMain.vue b/zhitan-vue/src/layout/components/AppMain.vue
index 328df52..552c76d 100644
--- a/zhitan-vue/src/layout/components/AppMain.vue
+++ b/zhitan-vue/src/layout/components/AppMain.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import iframeToggle from "./IframeToggle/index"
-import useTagsViewStore from '@/store/modules/tagsView'
+import useTagsViewStore from "@/store/modules/tagsView"
 
 const tagsViewStore = useTagsViewStore()
 </script>
@@ -27,21 +27,22 @@
     position: relative;
     overflow: hidden;
     background: #110f2e;
+    padding: 14px 0 0 14px;
   }
 
   .fixed-header + .app-main {
-    padding-top: 50px;
+    padding-top: 82px;
   }
 
   .hasTagsView {
     .app-main {
-      /* 84 = navbar + tags-view = 50 + 34 */
-      min-height: calc(100vh - 120px);
+      /* 84 = navbar + tags-view + padding = 70 + 56 + 14 */
+      min-height: calc(100vh - 125px);
       // padding: 20px;
     }
 
     .fixed-header + .app-main {
-      padding-top: 84px;
+      padding-top: 130px;
     }
   }
 }
@@ -53,23 +54,23 @@
     width: 100%;
     position: relative;
     overflow: hidden;
-    background: #F7F8FA;
+    background: #f7f8fa;
+    padding: 14px 0 0 14px;
   }
 
   .fixed-header + .app-main {
-    padding-top: 50px;
+    padding-top: 82px;
   }
 
   .hasTagsView {
     .app-main {
-      /* 84 = navbar + tags-view = 50 + 34 */
-      // 70+50
-      min-height: calc(100vh - 120px);
+      /* 84 = navbar + tags-view + padding = 70 + 56 + 14 */
+      min-height: calc(100vh - 125px);
       // padding: 20px;
     }
 
     .fixed-header + .app-main {
-      padding-top: 84px;
+      padding-top: 130px;
     }
   }
 }
@@ -97,4 +98,3 @@
   border-radius: 3px;
 }
 </style>
-
diff --git a/zhitan-vue/src/layout/components/Navbar.vue b/zhitan-vue/src/layout/components/Navbar.vue
index acb1951..3500f36 100644
--- a/zhitan-vue/src/layout/components/Navbar.vue
+++ b/zhitan-vue/src/layout/components/Navbar.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="navbar">
     <div class="navbar-left">
-      <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+      <hamburger
+        id="hamburger-container"
+        :is-active="appStore.sidebar.opened"
+        class="hamburger-container"
+        @toggleClick="toggleSideBar"
+      />
       <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
       <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
     </div>
@@ -31,7 +36,7 @@
               <el-dropdown-item command="toggleTheme">
                 <span>椋庢牸鍒囨崲</span>
               </el-dropdown-item>
-<!--               
+              <!--               
               <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
                 <span>甯冨眬璁剧疆</span>
               </el-dropdown-item> -->
@@ -47,31 +52,29 @@
 </template>
 
 <script setup>
-import { ElMessageBox } from 'element-plus'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import HeaderSearch from '@/components/HeaderSearch'
-import useAppStore from '@/store/modules/app'
-import useUserStore from '@/store/modules/user'
-import useSettingsStore from '@/store/modules/settings'
-
+import { ElMessageBox } from "element-plus"
+import Breadcrumb from "@/components/Breadcrumb"
+import TopNav from "@/components/TopNav"
+import Hamburger from "@/components/Hamburger"
+import Screenfull from "@/components/Screenfull"
+import SizeSelect from "@/components/SizeSelect"
+import HeaderSearch from "@/components/HeaderSearch"
+import useAppStore from "@/store/modules/app"
+import useUserStore from "@/store/modules/user"
+import useSettingsStore from "@/store/modules/settings"
 
 const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 
 function toggleTheme() {
-  if (settingsStore.sideTheme == 'theme-dark') {
-    settingsStore.sideTheme = 'theme-light'
-    document.querySelector('body').className = 'themeLight';
+  if (settingsStore.sideTheme == "theme-dark") {
+    settingsStore.sideTheme = "theme-light"
+    document.querySelector("body").className = "themeLight"
   } else {
-    settingsStore.sideTheme = 'theme-dark'
-    document.querySelector('body').className = 'themeDark';
+    settingsStore.sideTheme = "theme-dark"
+    document.querySelector("body").className = "themeDark"
   }
-
 }
 
 function toggleSideBar() {
@@ -81,44 +84,46 @@
 function handleCommand(command) {
   switch (command) {
     case "toggleTheme":
-      toggleTheme();
-      break;
+      toggleTheme()
+      break
     case "setLayout":
-      setLayout();
-      break;
+      setLayout()
+      break
     case "logout":
-      logout();
-      break;
+      logout()
+      break
     default:
-      break;
+      break
   }
 }
 
 function logout() {
-  ElMessageBox.confirm('纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�', '鎻愮ず', {
-    confirmButtonText: '纭畾',
-    cancelButtonText: '鍙栨秷',
-    type: 'warning'
-  }).then(() => {
-    userStore.logOut().then(() => {
-      location.href = '/index';
+  ElMessageBox.confirm("纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�", "鎻愮ず", {
+    confirmButtonText: "纭畾",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index"
+      })
     })
-  }).catch(() => { });
+    .catch(() => {})
 }
 
-const emits = defineEmits(['setLayout'])
+const emits = defineEmits(["setLayout"])
 function setLayout() {
-  emits('setLayout');
+  emits("setLayout")
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .themeDark {
   .navbar {
     height: 70px;
     background: #1a235d;
     border-radius: 0px 0px 0px 0px;
-    border: 1px solid #000000;
+    border-bottom: 2px solid #110f2e;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -208,14 +213,13 @@
       }
     }
   }
-  
 }
 .themeLight {
   .navbar {
     height: 70px;
-    background: #FEFEFE;
+    background: #fefefe;
     border-radius: 0px 0px 0px 0px;
-    border: 1px solid#f7f8fa;
+    border-bottom: 2px solid#f7f8fa;
     display: flex;
     justify-content: space-between;
     align-items: center;
diff --git a/zhitan-vue/src/layout/components/Sidebar/Logo.vue b/zhitan-vue/src/layout/components/Sidebar/Logo.vue
index 4831fa2..36ee63f 100644
--- a/zhitan-vue/src/layout/components/Sidebar/Logo.vue
+++ b/zhitan-vue/src/layout/components/Sidebar/Logo.vue
@@ -19,7 +19,7 @@
       <img v-else :src="systemInfo.leftLogo" class="sidebar-logo" />
     </div>
 
-    <div class="name" v-if="!collapse" :style="{ color: sideTheme === 'theme-dark' ? '#fff' : '#487FEE' }">
+    <div class="name" v-if="!collapse" :style="{ color: sideTheme === 'theme-dark' ? '#fff' : '#333' }">
       {{ title }}
     </div>
   </div>
@@ -58,27 +58,27 @@
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
+  height: 70px;
+  line-height: 70px;
+  background: #1a235d;
   text-align: center;
   overflow: hidden;
   display: flex;
+  justify-content: center;
   align-items: center;
-  margin-top: 24px;
-  margin-bottom: 15px;
+  // margin-top: 24px;
+  // margin-bottom: 15px;
   .logo {
     width: 40px;
     height: 40px;
-    margin-left: 13px;
+    margin-left: 10px;
     .sidebar-logo {
       width: 100%;
       height: 100%;
     }
   }
   .name {
-    width: 210px;
-    margin-top: 2px;
+    // width: 210px;
     margin-left: 6px;
     font-family: OPPOSans, OPPOSans;
     font-weight: bold;
diff --git a/zhitan-vue/src/layout/components/Sidebar/index.vue b/zhitan-vue/src/layout/components/Sidebar/index.vue
index ce46e57..2fe645a 100644
--- a/zhitan-vue/src/layout/components/Sidebar/index.vue
+++ b/zhitan-vue/src/layout/components/Sidebar/index.vue
@@ -1,11 +1,14 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div
+    :class="{ 'has-logo': showLogo }"
+    :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
+  >
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
-        :background-color="sideTheme === 'theme-dark' ? '#1A235D' : '#fff'"
+        :background-color="sideTheme === 'theme-dark' ? '#232D70' : '#fff'"
         :text-color="sideTheme === 'theme-dark' ? '#fff' : '#000'"
         :unique-opened="true"
         :active-text-color="theme"
@@ -24,35 +27,31 @@
 </template>
 
 <script setup>
-import Logo from './Logo'
-import SidebarItem from './SidebarItem'
-import variables from '@/assets/styles/variables.module.scss'
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import Logo from "./Logo"
+import SidebarItem from "./SidebarItem"
+import variables from "@/assets/styles/variables.module.scss"
+import useAppStore from "@/store/modules/app"
+import useSettingsStore from "@/store/modules/settings"
+import usePermissionStore from "@/store/modules/permission"
 
-const route = useRoute();
+const route = useRoute()
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
 
-const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
-const showLogo = computed(() => settingsStore.sidebarLogo);
-const sideTheme = computed(() => settingsStore.sideTheme);
-const theme = computed(() => settingsStore.theme);
-const isCollapse = computed(() => !appStore.sidebar.opened);
+const sidebarRouters = computed(() => permissionStore.sidebarRouters)
+const showLogo = computed(() => settingsStore.sidebarLogo)
+const sideTheme = computed(() => settingsStore.sideTheme)
+const theme = computed(() => settingsStore.theme)
+const isCollapse = computed(() => !appStore.sidebar.opened)
 
 const activeMenu = computed(() => {
-  const { meta, path } = route;
+  const { meta, path } = route
   // if set path, the sidebar will highlight the path you set
   if (meta.activeMenu) {
-    return meta.activeMenu;
+    return meta.activeMenu
   }
-  return path;
+  return path
 })
-
 </script>
-<style lang="scss" scoped>
-
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/zhitan-vue/src/layout/components/TagsView/index.vue b/zhitan-vue/src/layout/components/TagsView/index.vue
index 02baf0f..926a7b1 100644
--- a/zhitan-vue/src/layout/components/TagsView/index.vue
+++ b/zhitan-vue/src/layout/components/TagsView/index.vue
@@ -1,59 +1,57 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link v-for="tag in visitedViews" :key="tag.path" :data-path="tag.path" :class="isActive(tag) ? 'active' : ''"
-                   :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" class="tags-view-item" :style="activeStyle(tag)"
-                   @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent="openMenu(tag, $event)">
+      <router-link
+        v-for="tag in visitedViews"
+        :key="tag.path"
+        :data-path="tag.path"
+        :class="isActive(tag) ? 'active' : ''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        class="tags-view-item"
+        :style="activeStyle(tag)"
+        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+        @contextmenu.prevent="openMenu(tag, $event)"
+      >
         {{ tag.title }}
         <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
-          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
+          <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
         </span>
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">
-        <refresh-right style="width: 1em; height: 1em;" /> 鍒锋柊椤甸潰
-      </li>
+      <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> 鍒锋柊椤甸潰</li>
       <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-        <close style="width: 1em; height: 1em;" /> 鍏抽棴褰撳墠
+        <close style="width: 1em; height: 1em" /> 鍏抽棴褰撳墠
       </li>
-      <li @click="closeOthersTags">
-        <circle-close style="width: 1em; height: 1em;" /> 鍏抽棴鍏朵粬
-      </li>
-      <li v-if="!isFirstView()" @click="closeLeftTags">
-        <back style="width: 1em; height: 1em;" /> 鍏抽棴宸︿晶
-      </li>
-      <li v-if="!isLastView()" @click="closeRightTags">
-        <right style="width: 1em; height: 1em;" /> 鍏抽棴鍙充晶
-      </li>
-      <li @click="closeAllTags(selectedTag)">
-        <circle-close style="width: 1em; height: 1em;" /> 鍏ㄩ儴鍏抽棴
-      </li>
+      <li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> 鍏抽棴鍏朵粬</li>
+      <li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> 鍏抽棴宸︿晶</li>
+      <li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> 鍏抽棴鍙充晶</li>
+      <li @click="closeAllTags(selectedTag)"><circle-close style="width: 1em; height: 1em" /> 鍏ㄩ儴鍏抽棴</li>
     </ul>
   </div>
 </template>
 
 <script setup>
-import ScrollPane from './ScrollPane'
-import { getNormalPath } from '@/utils/ruoyi'
-import useTagsViewStore from '@/store/modules/tagsView'
-import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import ScrollPane from "./ScrollPane"
+import { getNormalPath } from "@/utils/ruoyi"
+import useTagsViewStore from "@/store/modules/tagsView"
+import useSettingsStore from "@/store/modules/settings"
+import usePermissionStore from "@/store/modules/permission"
 
-const visible = ref(false);
-const top = ref(0);
-const left = ref(0);
-const selectedTag = ref({});
-const affixTags = ref([]);
-const scrollPaneRef = ref(null);
+const visible = ref(false)
+const top = ref(0)
+const left = ref(0)
+const selectedTag = ref({})
+const affixTags = ref([])
+const scrollPaneRef = ref(null)
 
-const { proxy } = getCurrentInstance();
-const route = useRoute();
-const router = useRouter();
+const { proxy } = getCurrentInstance()
+const route = useRoute()
+const router = useRouter()
 
-const visitedViews = computed(() => useTagsViewStore().visitedViews);
-const routes = computed(() => usePermissionStore().routes);
-const theme = computed(() => useSettingsStore().theme);
+const visitedViews = computed(() => useTagsViewStore().visitedViews)
+const routes = computed(() => usePermissionStore().routes)
+const theme = computed(() => useSettingsStore().theme)
 
 watch(route, () => {
   addTags()
@@ -61,9 +59,9 @@
 })
 watch(visible, (value) => {
   if (value) {
-    document.body.addEventListener('click', closeMenu)
+    document.body.addEventListener("click", closeMenu)
   } else {
-    document.body.removeEventListener('click', closeMenu)
+    document.body.removeEventListener("click", closeMenu)
   }
 })
 onMounted(() => {
@@ -75,18 +73,18 @@
   return r.path === route.path
 }
 function activeStyle(tag) {
-  if (!isActive(tag)) return {};
+  if (!isActive(tag)) return {}
   return {
     "background-color": theme.value,
-    "border-color": theme.value
-  };
+    "border-color": theme.value,
+  }
 }
 function isAffix(tag) {
   return tag.meta && tag.meta.affix
 }
 function isFirstView() {
   try {
-    return selectedTag.value.fullPath === '/index' || selectedTag.value.fullPath === visitedViews.value[1].fullPath
+    return selectedTag.value.fullPath === "/index" || selectedTag.value.fullPath === visitedViews.value[1].fullPath
   } catch (err) {
     return false
   }
@@ -98,16 +96,16 @@
     return false
   }
 }
-function filterAffixTags(routes, basePath = '') {
+function filterAffixTags(routes, basePath = "") {
   let tags = []
-  routes.forEach(route => {
+  routes.forEach((route) => {
     if (route.meta && route.meta.affix) {
-      const tagPath = getNormalPath(basePath + '/' + route.path)
+      const tagPath = getNormalPath(basePath + "/" + route.path)
       tags.push({
         fullPath: tagPath,
         path: tagPath,
         name: route.name,
-        meta: { ...route.meta }
+        meta: { ...route.meta },
       })
     }
     if (route.children) {
@@ -120,8 +118,8 @@
   return tags
 }
 function initTags() {
-  const res = filterAffixTags(routes.value);
-  affixTags.value = res;
+  const res = filterAffixTags(routes.value)
+  affixTags.value = res
   for (const tag of res) {
     // Must have tag name
     if (tag.name) {
@@ -134,7 +132,7 @@
   if (name) {
     useTagsViewStore().addView(route)
     if (route.meta.link) {
-      useTagsViewStore().addIframeView(route);
+      useTagsViewStore().addIframeView(route)
     }
   }
   return false
@@ -143,7 +141,7 @@
   nextTick(() => {
     for (const r of visitedViews.value) {
       if (r.path === route.path) {
-        scrollPaneRef.value.moveToTarget(r);
+        scrollPaneRef.value.moveToTarget(r)
         // when query is different then update
         if (r.fullPath !== route.fullPath) {
           useTagsViewStore().updateVisitedView(route)
@@ -153,9 +151,9 @@
   })
 }
 function refreshSelectedTag(view) {
-  proxy.$tab.refreshPage(view);
+  proxy.$tab.refreshPage(view)
   if (route.meta.link) {
-    useTagsViewStore().delIframeView(route);
+    useTagsViewStore().delIframeView(route)
   }
 }
 function closeSelectedTag(view) {
@@ -166,28 +164,28 @@
   })
 }
 function closeRightTags() {
-  proxy.$tab.closeRightPage(selectedTag.value).then(visitedViews => {
-    if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
+  proxy.$tab.closeRightPage(selectedTag.value).then((visitedViews) => {
+    if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
       toLastView(visitedViews)
     }
   })
 }
 function closeLeftTags() {
-  proxy.$tab.closeLeftPage(selectedTag.value).then(visitedViews => {
-    if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
+  proxy.$tab.closeLeftPage(selectedTag.value).then((visitedViews) => {
+    if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
       toLastView(visitedViews)
     }
   })
 }
 function closeOthersTags() {
-  router.push(selectedTag.value).catch(() => { });
+  router.push(selectedTag.value).catch(() => {})
   proxy.$tab.closeOtherPage(selectedTag.value).then(() => {
     moveToCurrentTag()
   })
 }
 function closeAllTags(view) {
   proxy.$tab.closeAllPage().then(({ visitedViews }) => {
-    if (affixTags.value.some(tag => tag.path === route.path)) {
+    if (affixTags.value.some((tag) => tag.path === route.path)) {
       return
     }
     toLastView(visitedViews, view)
@@ -200,11 +198,11 @@
   } else {
     // now the default is to redirect to the home page if there is no tags-view,
     // you can adjust it according to your needs.
-    if (view.name === 'Dashboard') {
+    if (view.name === "Dashboard") {
       // to reload home page
-      router.replace({ path: '/redirect' + view.fullPath })
+      router.replace({ path: "/redirect" + view.fullPath })
     } else {
-      router.push('/')
+      router.push("/")
     }
   }
 }
@@ -233,10 +231,10 @@
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .themeDark {
   .tags-view-container {
-    height: 50px;
+    height: 56px;
     width: 100%;
     background: #1a235d;
     // border-bottom: 1px solid #d8dce5;
@@ -246,27 +244,27 @@
         display: inline-block;
         position: relative;
         cursor: pointer;
-        height: 34px;
-        line-height: 34px;
-        border: 1px solid #203a81;
-        color: #c1c1c1;
-        background: #3271eb;
-        padding: 0 8px;
-        font-size: 15px;
-        margin-left: 5px;
-        margin-top: 6px;
-        border-radius: 5px;
+        height: 36px;
+        line-height: 36px;
+        border: 1px solid #5278f5;
+        color: #fff;
+        // background: #3271eb;
+        padding: 0 14px;
+        font-size: 14px;
+        margin-left: 6px;
+        margin-top: 10px;
+        border-radius: 4px;
         font-family: OPPOSans, OPPOSans;
         &:first-of-type {
-          margin-left: 15px;
+          margin-left: 16px;
         }
         &:last-of-type {
           margin-right: 15px;
         }
         &.active {
-          background-color: #42b983;
+          background-color: #4e77f8 !important;
           color: #fff;
-          border-color: #42b983;
+          border-color: #4e77f8 !important;
           &::before {
             content: "";
             background: #fff;
@@ -306,7 +304,7 @@
 
 .themeLight {
   .tags-view-container {
-    height: 50px;
+    height: 56px;
     width: 100%;
     background: #fff;
     // border-bottom: 1px solid #d8dce5;
@@ -316,19 +314,19 @@
         display: inline-block;
         position: relative;
         cursor: pointer;
-        height: 34px;
-        line-height: 34px;
+        height: 36px;
+        line-height: 36px;
         border: 1px solid #d8dce5;
         color: #495060;
         background: #fff;
-        padding: 0 8px;
-        font-size: 15px;
-        margin-left: 5px;
-        margin-top: 6px;
-        border-radius: 5px;
+        padding: 0 14px;
+        font-size: 14px;
+        margin-left: 6px;
+        margin-top: 10px;
+        border-radius: 4px;
         font-family: OPPOSans, OPPOSans;
         &:first-of-type {
-          margin-left: 15px;
+          margin-left: 16px;
         }
         &:last-of-type {
           margin-right: 15px;
@@ -405,4 +403,4 @@
 .scroll-container .el-scrollbar__wrap {
   height: 50px !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/zhitan-vue/src/settings.js b/zhitan-vue/src/settings.js
index 08a0108..3a7443d 100644
--- a/zhitan-vue/src/settings.js
+++ b/zhitan-vue/src/settings.js
@@ -6,7 +6,7 @@
   /**
    * 渚ц竟鏍忎富棰� 娣辫壊涓婚theme-dark锛屾祬鑹蹭富棰榯heme-light
    */
-  sideTheme: 'theme-dark',
+  sideTheme: "theme-dark",
   /**
    * 鏄惁绯荤粺甯冨眬閰嶇疆
    */
@@ -43,5 +43,5 @@
    * The default is only used in the production env
    * If you want to also use it in dev, you can pass ['production', 'development']
    */
-  errorLog: 'production'
+  errorLog: "production",
 }
diff --git a/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue b/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue
index 1f73fb4..e832fe5 100644
--- a/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue
+++ b/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue
@@ -1,116 +1,141 @@
 <template>
-    <div class="page">
-        <div class="form-card">
-            <el-form :model="form" ref="formRef" :inline="true">
-                <el-form-item label="鏈熼棿" prop="type">
-                    <el-select v-model="form.type" placeholder="鏈熼棿" style="width: 100%" @change="handleTimeType">
-                        <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value"
-                            v-show="dict.value != 'DAY'" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="鏃堕棿">
-                    <el-date-picker v-model="form.time" type="year" v-if="form.type == 'YEAR'" range-separator="鍒�"
-                        format="YYYY" value-format="YYYY" placeholder="鏃堕棿" style="width: 100%" :clearable="false" />
-                    <el-date-picker v-model="form.time" type="month" v-else format="YYYY-MM" value-format="YYYY-MM"
-                        placeholder="鏃堕棿" style="width: 100%" :clearable="false" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
-                    <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
-                </el-form-item>
-            </el-form>
-
-        </div>
-        <div class="table-box">
-            <div class="mt20 mb20">
-                <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button>
-            </div>
-            <el-table :data="tableData" v-loading="loading">
-                <el-table-column prop="time" label="鏃堕棿" show-overflow-tooltip align="center" />
-                <el-table-column prop="electricityNum" label="鎬荤數閲�(鍗冪摝鏃�)" show-overflow-tooltip align="center" />
-                <el-table-column prop="electricityFee" label="鎬荤數璐�(鍏�)" show-overflow-tooltip align="center" />
-                <el-table-column prop="powerFactor" label="鍔熺巼鍥犳暟" show-overflow-tooltip align="center" />
-                <el-table-column prop="electricityNum" label="灏�(鍗冪摝鏃�)" show-overflow-tooltip align="center" />
-                <el-table-column prop="peakElectricity" label="宄�(鍗冪摝鏃�)" show-overflow-tooltip align="center" />
-                <el-table-column prop="flatElectricity" label="骞�(鍗冪摝鏃�)" show-overflow-tooltip align="center" />
-                <el-table-column prop="valleyElectricity" label="璋�(鍗冪摝鏃�)" show-overflow-tooltip align="center" />
-                <el-table-column prop="createTime" label="鎻愪氦鏃堕棿" show-overflow-tooltip align="center" />
-                <el-table-column label="鎿嶄綔" width="280" align="center">
-                    <template #default="scope">
-                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)">
-                            淇敼
-                        </el-button>
-                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
-                            鍒犻櫎
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-            v-model:limit="queryParams.pageSize" @pagination="getList" />
-        <EditModal ref="EditModalRef" @getList="resetQuery" />
+  <div class="page">
+    <div class="form-card">
+      <el-form :model="form" ref="formRef" :inline="true">
+        <el-form-item label="鏈熼棿" prop="type">
+          <el-select v-model="form.type" placeholder="鏈熼棿" style="width: 100%" @change="handleTimeType">
+            <el-option
+              v-for="dict in period"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+              v-show="dict.value != 'DAY'"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="鏃堕棿">
+          <el-date-picker
+            v-model="form.time"
+            type="year"
+            v-if="form.type == 'YEAR'"
+            range-separator="鍒�"
+            format="YYYY"
+            value-format="YYYY"
+            placeholder="鏃堕棿"
+            style="width: 100%"
+            :clearable="false"
+          />
+          <el-date-picker
+            v-model="form.time"
+            type="month"
+            v-else
+            format="YYYY-MM"
+            value-format="YYYY-MM"
+            placeholder="鏃堕棿"
+            style="width: 100%"
+            :clearable="false"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
+          <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+        </el-form-item>
+      </el-form>
     </div>
+    <div class="table-bg-style">
+      <div class="theme-dark-mt20 mb20 ml20">
+        <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button>
+      </div>
+      <div class="table-box">
+        <el-table :data="tableData" v-loading="loading">
+          <el-table-column prop="time" label="鏃堕棿" show-overflow-tooltip align="center" />
+          <el-table-column prop="electricityNum" label="鎬荤數閲�(鍗冪摝鏃�)" show-overflow-tooltip align="center" />
+          <el-table-column prop="electricityFee" label="鎬荤數璐�(鍏�)" show-overflow-tooltip align="center" />
+          <el-table-column prop="powerFactor" label="鍔熺巼鍥犳暟" show-overflow-tooltip align="center" />
+          <el-table-column prop="electricityNum" label="灏�(鍗冪摝鏃�)" show-overflow-tooltip align="center" />
+          <el-table-column prop="peakElectricity" label="宄�(鍗冪摝鏃�)" show-overflow-tooltip align="center" />
+          <el-table-column prop="flatElectricity" label="骞�(鍗冪摝鏃�)" show-overflow-tooltip align="center" />
+          <el-table-column prop="valleyElectricity" label="璋�(鍗冪摝鏃�)" show-overflow-tooltip align="center" />
+          <el-table-column prop="createTime" label="鎻愪氦鏃堕棿" show-overflow-tooltip align="center" />
+          <el-table-column label="鎿嶄綔" width="280" align="center">
+            <template #default="scope">
+              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 淇敼 </el-button>
+              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 鍒犻櫎 </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <EditModal ref="EditModalRef" @getList="resetQuery" />
+  </div>
 </template>
 <script setup>
-import { electricityInputList, electricityInputDel } from '@/api/auxiliaryEntry/electricityInput.js'
-import EditModal from './components/EditModal.vue'
-const { proxy } = getCurrentInstance();
-const { period } = proxy.useDict("period");
+import { electricityInputList, electricityInputDel } from "@/api/auxiliaryEntry/electricityInput.js"
+import EditModal from "./components/EditModal.vue"
+const { proxy } = getCurrentInstance()
+const { period } = proxy.useDict("period")
 let form = ref({
-    type: null,
-    time: null
+  type: null,
+  time: null,
 })
 // handleTimeType('YEAR')
 function handleTimeType(e) {
-    form.value.type = e;
-    form.value.time = proxy.dayjs(new Date()).format(e == "YEAR" ? "YYYY" : "YYYY-MM");
+  form.value.type = e
+  form.value.time = proxy.dayjs(new Date()).format(e == "YEAR" ? "YYYY" : "YYYY-MM")
 }
 let loading = ref(false)
 let EditModalRef = ref()
 let tableData = ref([])
 let total = ref(0)
 let queryParams = ref({
-    pageNum: 1,
-    pageSize: 10,
+  pageNum: 1,
+  pageSize: 10,
 })
 
 //鑾峰彇鍒楄〃
 function getList() {
-    loading.value = true
-    electricityInputList({ ...queryParams.value, ...form.value }).then(res => {
-        tableData.value = res.rows
-        total.value = res.total
-        loading.value = false
-    })
+  loading.value = true
+  electricityInputList({ ...queryParams.value, ...form.value }).then((res) => {
+    tableData.value = res.rows
+    total.value = res.total
+    loading.value = false
+  })
 }
 getList()
 function handleAdd(row) {
-    if (EditModalRef.value) {
-        EditModalRef.value.handleOpen(row)
-    }
+  if (EditModalRef.value) {
+    EditModalRef.value.handleOpen(row)
+  }
 }
 
 function handleDel(row) {
-    proxy.$modal
-        .confirm('鏄惁纭鍒犻櫎鏃堕棿涓�"' + row.time + '"鐨勬暟鎹」锛�')
-        .then(function () {
-            return electricityInputDel(row.id);
-        })
-        .then(() => {
-            resetQuery();
-            proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-        })
-        .catch(() => { });
+  proxy.$modal
+    .confirm('鏄惁纭鍒犻櫎鏃堕棿涓�"' + row.time + '"鐨勬暟鎹」锛�')
+    .then(function () {
+      return electricityInputDel(row.id)
+    })
+    .then(() => {
+      resetQuery()
+      proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛")
+    })
+    .catch(() => {})
 }
 function resetQuery() {
-    form.value = {}
-    queryParams.value.pageNum = 1
-    getList()
+  form.value = {}
+  queryParams.value.pageNum = 1
+  getList()
 }
 function handleQuery() {
-    queryParams.value.pageNum = 1
-    getList()
+  queryParams.value.pageNum = 1
+  getList()
 }
 </script>
 
diff --git a/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue b/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue
index 51682f1..5be2000 100644
--- a/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue
+++ b/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue
@@ -1,133 +1,144 @@
 <template>
-    <div class="page">
-        <div class="form-card">
-            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
-                <el-form-item label="闄愬�肩被鍨嬪悕绉�">
-                    <el-input v-model="queryParams.limitName" placeholder="璇疯緭鍏ラ檺鍊肩被鍨嬪悕绉�" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
-                    <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
-
-
-        <div class="table-box">
-            <div class="mt20 mb20">
-                <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button>
-                <!-- <el-button type="primary" icon="Delete">鍒犻櫎</el-button> -->
-            </div>
-            <el-table :data="tableData" v-loading="loading">
-                <el-table-column prop="limitName" label="闄愬�肩被鍨嬪悕绉�" show-overflow-tooltip align="center" />
-                <el-table-column prop="limitCode" label="闄愬�肩被鍨嬬紪鍙�" show-overflow-tooltip align="center" />
-                <el-table-column prop="alarmType" label="鎶ヨ闄愬埗绫诲瀷" show-overflow-tooltip align="center"
-                    :formatter="(row, column) => proxy.selectDictLabel(alarm_type, row.alarmType)" />
-                <el-table-column prop="colorNumber" label="鑹插彿" show-overflow-tooltip align="center">
-                    <template #default="scope">
-                        <div style="width: 20px;height: 20px;border-radius: 5px; margin: 0 auto"
-                            :style="{ 'background': scope.row.colorNumber }">
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="comparatorOperator" label="姣旇緝杩愮畻绗�" show-overflow-tooltip align="center"
-                    :formatter="(row) => proxy.selectDictLabel(operatorList,row.comparatorOperator)" />
-                <el-table-column label="鎿嶄綔" width="300" align="center">
-                    <template #default="scope">
-                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)">
-                            淇敼
-                        </el-button>
-                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
-                            鍒犻櫎
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-        </div>
-        <edit-modal ref="EditModalRef" @getList="getList" :operatorList="operatorList" :alarmTypeList='alarm_type' />
+  <div class="page">
+    <div class="form-card">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
+        <el-form-item label="闄愬�肩被鍨嬪悕绉�">
+          <el-input v-model="queryParams.limitName" placeholder="璇疯緭鍏ラ檺鍊肩被鍨嬪悕绉�" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
+          <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+        </el-form-item>
+      </el-form>
     </div>
+
+    <div class="table-bg-style">
+      <div class="theme-dark-mt20 mb20 ml20">
+        <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button>
+        <!-- <el-button type="primary" icon="Delete">鍒犻櫎</el-button> -->
+      </div>
+      <div class="table-box">
+        <el-table :data="tableData" v-loading="loading">
+          <el-table-column prop="limitName" label="闄愬�肩被鍨嬪悕绉�" show-overflow-tooltip align="center" />
+          <el-table-column prop="limitCode" label="闄愬�肩被鍨嬬紪鍙�" show-overflow-tooltip align="center" />
+          <el-table-column
+            prop="alarmType"
+            label="鎶ヨ闄愬埗绫诲瀷"
+            show-overflow-tooltip
+            align="center"
+            :formatter="(row, column) => proxy.selectDictLabel(alarm_type, row.alarmType)"
+          />
+          <el-table-column prop="colorNumber" label="鑹插彿" show-overflow-tooltip align="center">
+            <template #default="scope">
+              <div
+                style="width: 20px; height: 20px; border-radius: 5px; margin: 0 auto"
+                :style="{ background: scope.row.colorNumber }"
+              ></div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="comparatorOperator"
+            label="姣旇緝杩愮畻绗�"
+            show-overflow-tooltip
+            align="center"
+            :formatter="(row) => proxy.selectDictLabel(operatorList, row.comparatorOperator)"
+          />
+          <el-table-column label="鎿嶄綔" width="300" align="center">
+            <template #default="scope">
+              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 淇敼 </el-button>
+              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 鍒犻櫎 </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+    <edit-modal ref="EditModalRef" @getList="getList" :operatorList="operatorList" :alarmTypeList="alarm_type" />
+  </div>
 </template>
 
 <script setup>
-import EditModal from './components/EditModal.vue'
-import { alarmList, alarmDel } from '@/api/businessConfiguration/businessConfiguration'
+import EditModal from "./components/EditModal.vue"
+import { alarmList, alarmDel } from "@/api/businessConfiguration/businessConfiguration"
 let { proxy } = getCurrentInstance()
 let operatorList = ref([
-    { label: '澶т簬', value: '>' },
-    { label: '澶т簬绛変簬', value: '>=' },
-    { label: '灏忎簬', value: '<' },
-    { label: '灏忎簬绛変簬', value: '<=' },
-    { label: '绛変簬', value: '=' },
+  { label: "澶т簬", value: ">" },
+  { label: "澶т簬绛変簬", value: ">=" },
+  { label: "灏忎簬", value: "<" },
+  { label: "灏忎簬绛変簬", value: "<=" },
+  { label: "绛変簬", value: "=" },
 ])
-let { alarm_type } = proxy.useDict('alarm_type')
-let loading = ref(false);
-let total = ref(0);
+let { alarm_type } = proxy.useDict("alarm_type")
+let loading = ref(false)
+let total = ref(0)
 let tableData = ref([])
 let queryParams = ref({
-    limitName: '',
-    pageNum: 1,
-    pageSize: 10,
+  limitName: "",
+  pageNum: 1,
+  pageSize: 10,
 })
 
 function getList() {
-    loading.value = true
-    alarmList(queryParams.value).then(res => {
-        console.log(res.rows)
-        tableData.value = res.rows
-        total.value = res.total
-        loading.value = false
-    })
+  loading.value = true
+  alarmList(queryParams.value).then((res) => {
+    console.log(res.rows)
+    tableData.value = res.rows
+    total.value = res.total
+    loading.value = false
+  })
 }
 
 getList()
 
-let EditModalRef = ref('')
+let EditModalRef = ref("")
 function handleAdd(row) {
-    if (EditModalRef.value) {
-        EditModalRef.value.handleOpen(row)
-    }
-
+  if (EditModalRef.value) {
+    EditModalRef.value.handleOpen(row)
+  }
 }
 
 function handleDel(row) {
-    proxy.$modal.confirm('鏄惁纭鍒犻櫎鏁版嵁椤�?').then(function () {
-        return alarmDel(row.id);
-    }).then(() => {
-        getList();
-        proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-    }).catch(() => { });
+  proxy.$modal
+    .confirm("鏄惁纭鍒犻櫎鏁版嵁椤�?")
+    .then(function () {
+      return alarmDel(row.id)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛")
+    })
+    .catch(() => {})
 }
 
 function handleQuery() {
-    queryParams.value.pageNum = 1
-    getList()
-
+  queryParams.value.pageNum = 1
+  getList()
 }
 
 function resetQuery() {
-    queryParams.value = {
-        limitName: '',
-        pageNum: 1,
-        pageSize: 10,
-    }
-    getList()
+  queryParams.value = {
+    limitName: "",
+    pageNum: 1,
+    pageSize: 10,
+  }
+  getList()
 }
-
-
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/styles/page.scss";
 
-
 .header-box {
-    :deep .el-form-item__content {
-        color: #fff;
-        font-size: 16px;
-    }
-
+  :deep .el-form-item__content {
+    color: #fff;
+    font-size: 16px;
+  }
 }
 </style>
diff --git a/zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue b/zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue
index 3f20ab8..74abd5f 100644
--- a/zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue
+++ b/zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue
@@ -22,505 +22,522 @@
 </template>
 
 <script setup>
-
-
-let dataList = ref([{
-  name: "缃戝叧",
-  list: [
-    {
-      id: 1,
-      title_num: "鏁版嵁搴�",
-      dot: []
-    },
-    {
-      id: 2,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 3,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 4,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 5,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 6,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 7,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 8,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 9,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 10,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 11,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 12,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 13,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 14,
-      title_num: "200331",
-      dot: []
-    },
-    {
-      id: 15,
-      title_num: "200461",
-      dot: []
-    },
-    {
-      id: 16,
-      title_num: "200475",
-      dot: []
-    },
-  ]
-},
-{
-  name: "璁$畻鍣ㄥ叿",
-  list: [{
-    id: 1,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
-    {
-      id: '003',
-      dot_li: ""
-    },
+let dataList = ref([
+  {
+    name: "缃戝叧",
+    list: [
+      {
+        id: 1,
+        title_num: "鏁版嵁搴�",
+        dot: [],
+      },
+      {
+        id: 2,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 3,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 4,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 5,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 6,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 7,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 8,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 9,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 10,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 11,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 12,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 13,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 14,
+        title_num: "200331",
+        dot: [],
+      },
+      {
+        id: 15,
+        title_num: "200461",
+        dot: [],
+      },
+      {
+        id: 16,
+        title_num: "200475",
+        dot: [],
+      },
     ],
   },
   {
-    id: 2,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
+    name: "璁$畻鍣ㄥ叿",
+    list: [
+      {
+        id: 1,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+          {
+            id: "003",
+            dot_li: "",
+          },
+        ],
+      },
+      {
+        id: 2,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+        ],
+      },
+      {
+        id: 3,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+          {
+            id: "003",
+            dot_li: "",
+          },
+          {
+            id: "004",
+            dot_li: "",
+          },
+        ],
+      },
     ],
   },
   {
-    id: 3,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
-    {
-      id: '003',
-      dot_li: ""
-    },
-    {
-      id: '004',
-      dot_li: ""
-    },
-    ],
-  }
-  ]
-},
-{
-  name: "缃戝叧",
-  list: [{
-    id: 1,
-    title_num: "200505"
-  },
-  {
-    id: 2,
-    title_num: "200331"
-  },
-  {
-    id: 3,
-    title_num: "200331"
-  },
-  {
-    id: 4,
-    title_num: "200331"
-  },
-  {
-    id: 5,
-    title_num: "200331"
-  },
-  {
-    id: 6,
-    title_num: "200331"
-  },
-  {
-    id: 7,
-    title_num: "200331"
-  },
-  {
-    id: 8,
-    title_num: "200331"
-  },
-  {
-    id: 9,
-    title_num: "200331"
-  },
-  {
-    id: 10,
-    title_num: "200331"
-  },
-  {
-    id: 11,
-    title_num: "200331"
-  },
-  {
-    id: 12,
-    title_num: "200331"
-  },
-  {
-    id: 13,
-    title_num: "200331"
-  },
-  {
-    id: 14,
-    title_num: "200331"
-  },
-  {
-    id: 15,
-    title_num: "200461"
-  },
-  {
-    id: 16,
-    title_num: "200604"
-  },
-  ]
-},
-{
-  name: "璁$畻鍣ㄥ叿",
-  list: [{
-    id: 1,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
-    {
-      id: '003',
-      dot_li: ""
-    },
+    name: "缃戝叧",
+    list: [
+      {
+        id: 1,
+        title_num: "200505",
+      },
+      {
+        id: 2,
+        title_num: "200331",
+      },
+      {
+        id: 3,
+        title_num: "200331",
+      },
+      {
+        id: 4,
+        title_num: "200331",
+      },
+      {
+        id: 5,
+        title_num: "200331",
+      },
+      {
+        id: 6,
+        title_num: "200331",
+      },
+      {
+        id: 7,
+        title_num: "200331",
+      },
+      {
+        id: 8,
+        title_num: "200331",
+      },
+      {
+        id: 9,
+        title_num: "200331",
+      },
+      {
+        id: 10,
+        title_num: "200331",
+      },
+      {
+        id: 11,
+        title_num: "200331",
+      },
+      {
+        id: 12,
+        title_num: "200331",
+      },
+      {
+        id: 13,
+        title_num: "200331",
+      },
+      {
+        id: 14,
+        title_num: "200331",
+      },
+      {
+        id: 15,
+        title_num: "200461",
+      },
+      {
+        id: 16,
+        title_num: "200604",
+      },
     ],
   },
   {
-    id: 2,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
+    name: "璁$畻鍣ㄥ叿",
+    list: [
+      {
+        id: 1,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+          {
+            id: "003",
+            dot_li: "",
+          },
+        ],
+      },
+      {
+        id: 2,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+        ],
+      },
+      {
+        id: 3,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+          {
+            id: "003",
+            dot_li: "",
+          },
+          {
+            id: "004",
+            dot_li: "",
+          },
+        ],
+      },
+      {
+        id: 4,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+          {
+            id: "003",
+            dot_li: "",
+          },
+          {
+            id: "004",
+            dot_li: "",
+          },
+          {
+            id: "005",
+            dot_li: "",
+          },
+        ],
+      },
+      {
+        id: 5,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+          {
+            id: "003",
+            dot_li: "",
+          },
+          {
+            id: "004",
+            dot_li: "",
+          },
+          {
+            id: "005",
+            dot_li: "",
+          },
+          {
+            id: "006",
+            dot_li: "",
+          },
+        ],
+      },
     ],
   },
   {
-    id: 3,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
-    {
-      id: '003',
-      dot_li: ""
-    },
-    {
-      id: '004',
-      dot_li: ""
-    },
+    name: "缃戝叧",
+    list: [
+      {
+        id: 1,
+        title_num: "200605",
+      },
+      {
+        id: 2,
+        title_num: "200331",
+      },
+      {
+        id: 3,
+        title_num: "200331",
+      },
+      {
+        id: 4,
+        title_num: "38081703",
+      },
     ],
   },
   {
-    id: 4,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
-    {
-      id: '003',
-      dot_li: ""
-    },
-    {
-      id: '004',
-      dot_li: ""
-    },
-    {
-      id: '005',
-      dot_li: ""
-    },
+    name: "璁$畻鍣ㄥ叿",
+    list: [
+      {
+        id: 1,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+          {
+            id: "003",
+            dot_li: "",
+          },
+        ],
+      },
+      {
+        id: 2,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+        ],
+      },
+      {
+        id: 3,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+          {
+            id: "003",
+            dot_li: "",
+          },
+          {
+            id: "004",
+            dot_li: "",
+          },
+        ],
+      },
+      {
+        id: 4,
+        title_num: "",
+        dot: [
+          {
+            id: "001",
+            dot_li: "",
+          },
+          {
+            id: "002",
+            dot_li: "",
+          },
+          {
+            id: "003",
+            dot_li: "",
+          },
+          {
+            id: "004",
+            dot_li: "",
+          },
+          {
+            id: "005",
+            dot_li: "",
+          },
+        ],
+      },
     ],
   },
-  {
-    id: 5,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
-    {
-      id: '003',
-      dot_li: ""
-    },
-    {
-      id: '004',
-      dot_li: ""
-    },
-    {
-      id: '005',
-      dot_li: ""
-    },
-    {
-      id: '006',
-      dot_li: ""
-    },
-    ],
-  }
-  ]
-},
-{
-  name: "缃戝叧",
-  list: [{
-    id: 1,
-    title_num: "200605"
-  },
-  {
-    id: 2,
-    title_num: "200331"
-  },
-  {
-    id: 3,
-    title_num: "200331"
-  },
-  {
-    id: 4,
-    title_num: "38081703"
-  },
-  ]
-},
-{
-  name: "璁$畻鍣ㄥ叿",
-  list: [{
-    id: 1,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
-    {
-      id: '003',
-      dot_li: ""
-    },
-    ],
-  },
-  {
-    id: 2,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
-    ],
-  },
-  {
-    id: 3,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
-    {
-      id: '003',
-      dot_li: ""
-    },
-    {
-      id: '004',
-      dot_li: ""
-    },
-    ],
-  },
-  {
-    id: 4,
-    title_num: "",
-    dot: [{
-      id: '001',
-      dot_li: ""
-    },
-    {
-      id: '002',
-      dot_li: ""
-    },
-    {
-      id: '003',
-      dot_li: ""
-    },
-    {
-      id: '004',
-      dot_li: ""
-    },
-    {
-      id: '005',
-      dot_li: ""
-    },
-    ],
-  }
-  ]
-},
 ])
-
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/styles/page.scss";
+.themeDark {
+  .border {
+    border: 1px solid #fff;
+    color: #fff;
 
-.border {
-  border: 1px solid #fff;
-  color: #fff;
-
-  .table {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    border-bottom: 1px solid #fff;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    .num {
-      width: 100%;
+    .table {
       display: flex;
       align-items: center;
       justify-content: flex-start;
+      border-bottom: 1px solid #fff;
 
-      .name {
-        width: 6%;
-        min-height: 50px;
-        height: max-content;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-right: none !important;
+      &:last-child {
+        border-bottom: none;
       }
 
-      .firstLi {
-        width: 94%;
-        flex-shrink: 0;
+      .num {
+        width: 100%;
         display: flex;
         align-items: center;
         justify-content: flex-start;
-        border-left: 1px solid #fff;
 
-        .li {
-          width: 6.25%;
+        .name {
+          width: 6%;
           min-height: 50px;
           height: max-content;
           display: flex;
           align-items: center;
           justify-content: center;
-          border-right: 1px solid #fff;
+          border-right: none !important;
+        }
 
-          &.hasRightLine {
-            border-right: 1px solid #fff !important;
-          }
+        .firstLi {
+          width: 94%;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          border-left: 1px solid #fff;
 
-          &:last-child {
-            border-right: none;
-          }
-
-          .title_num {}
-
-          .dot {
-            width: 40px;
+          .li {
+            width: 6.25%;
+            min-height: 50px;
+            height: max-content;
             display: flex;
             align-items: center;
-            justify-content: space-between;
-            flex-wrap: wrap;
+            justify-content: center;
+            border-right: 1px solid #fff;
 
-            .dot_li {
-              width: 15px;
-              height: 15px;
-              border-radius: 4px;
-              background: #ff0000;
-              margin: 10px auto;
+            &.hasRightLine {
+              border-right: 1px solid #fff !important;
+            }
 
-              &:nth-child(2n) {
-                margin-right: 0;
+            &:last-child {
+              border-right: none;
+            }
+
+            .title_num {
+            }
+
+            .dot {
+              width: 40px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              flex-wrap: wrap;
+
+              .dot_li {
+                width: 15px;
+                height: 15px;
+                border-radius: 4px;
+                background: #ff0000;
+                margin: 10px auto;
+
+                &:nth-child(2n) {
+                  margin-right: 0;
+                }
               }
             }
           }
@@ -529,4 +546,89 @@
     }
   }
 }
-</style>
\ No newline at end of file
+
+.themeLight {
+  .border {
+    border: 1px solid #666;
+    color: #333;
+
+    .table {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      border-bottom: 1px solid #666;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .num {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        .name {
+          width: 6%;
+          min-height: 50px;
+          height: max-content;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-right: none !important;
+        }
+
+        .firstLi {
+          width: 94%;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          border-left: 1px solid #666;
+
+          .li {
+            width: 6.25%;
+            min-height: 50px;
+            height: max-content;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-right: 1px solid #666;
+
+            &.hasRightLine {
+              border-right: 1px solid #666 !important;
+            }
+
+            &:last-child {
+              border-right: none;
+            }
+
+            .title_num {
+            }
+
+            .dot {
+              width: 40px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              flex-wrap: wrap;
+
+              .dot_li {
+                width: 15px;
+                height: 15px;
+                border-radius: 4px;
+                background: #ff0000;
+                margin: 10px auto;
+
+                &:nth-child(2n) {
+                  margin-right: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/zhitan-vue/src/views/costmanage/deviation/deviation.vue b/zhitan-vue/src/views/costmanage/deviation/deviation.vue
index 2f8dce6..126e1d9 100644
--- a/zhitan-vue/src/views/costmanage/deviation/deviation.vue
+++ b/zhitan-vue/src/views/costmanage/deviation/deviation.vue
@@ -1,687 +1,736 @@
 <template>
-    <div class="page">
-        <div class="form-card">
-            <el-form :model="form" ref="formRef" :inline="true">
-                <el-form-item label="鏈熼棿" prop="timeType">
-                    <el-select v-model="form.timeType" placeholder="鏈熼棿" style="width: 100%" @change="handleTimeType">
-                        <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value"
-                            v-show="dict.value != 'DAY'" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="鏃堕棿">
-                    <el-date-picker v-model="form.date" type="year" v-if="form.timeType == 'YEAR'" range-separator="鍒�"
-                        format="YYYY" value-format="YYYY" placeholder="鏃堕棿" style="width: 100%" :clearable="false" />
-                    <el-date-picker v-model="form.date" type="month" v-else format="YYYY-MM" value-format="YYYY-MM"
-                        placeholder="鏃堕棿" style="width: 100%" :clearable="false" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
-                    <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
-        <BaseCard title="鐢靛姏鏁版嵁">
-            <div class="card-list">
-                <div class="card-list-item" v-for="item in periodList" :key="item.title">
-                    <div class="item-top">
-                        <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
-                        <div class="name">{{ item.title }}</div>
-                    </div>
-                    <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
-                        <div class="bottom-left">{{ node.label }}</div>
-                        <div class="bottom-right" :style="{ color: item.color }">
-                            {{ form.timeType == 'YEAR' && nodeIndex == 1 ? '--' : node.value }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </BaseCard>
-        <BaseCard title="缁熻鏁版嵁">
-            <div class="card-list card-list19 ">
-                <div class="card-list-item" v-for="item in periodList1" :key="item.title">
-                    <div class="item-top">
-                        <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
-                        <div class="name">{{ item.title }}</div>
-                    </div>
-                    <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
-                        <div class="bottom-left">{{ node.label }}</div>
-                        <div class="bottom-right" :style="{ color: item.color }">
-                            {{ form.timeType == 'YEAR' && nodeIndex == 1 ? '--' : node.value }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </BaseCard>
-        <BaseCard title="鑰楃數鏄庣粏">
-            <div class="table-box">
-                <el-table :data="tableData" v-loading="loading"
-                    style="width: 100%; max-height: 500px; margin-bottom: 20px" row-key="id">
-                    <el-table-column prop="nodeId" label="鐢ㄨ兘鍗曚綅" align="center" show-overflow-tooltip
-                        :formatter="(row, column) => findLabelById(treeNode, row.nodeId)" />
-                    <el-table-column prop="electricityNum" label="鎬昏�楃數閲�(鍗冪摝鏃�)" align="center" show-overflow-tooltip />
-                    <el-table-column prop="sharpElectricity" label="灏�(鍗冪摝鏃�)" align="center" show-overflow-tooltip />
-                    <el-table-column prop="peakElectricity" label="宄�(鍗冪摝鏃�)" align="center" show-overflow-tooltip />
-                    <el-table-column prop="flatElectricity" label="骞�(鍗冪摝鏃�)" align="center" show-overflow-tooltip />
-                    <el-table-column prop="valleyElectricity" label="璋�(鍗冪摝鏃�)" align="center" show-overflow-tooltip />
-                    <el-table-column prop="electricityFee" label="鎬荤數璐癸紙鍏冿級" align="center" show-overflow-tooltip />
-                    <el-table-column prop="electricityNumYoy" label="鍚屾瘮" align="center" show-overflow-tooltip />
-                    <el-table-column prop="electricityNumQoq" label="鐜瘮" v-if="form.timeType != 'YEAR'" align="center"
-                        show-overflow-tooltip />
-                    <el-table-column prop="electricityNumRadio" label="鍗犳瘮" align="center" show-overflow-tooltip />
-                    <el-table-column label="鎿嶄綔" width="80" align="center">
-                        <template #default="scope">
-                            <el-button link type="primary" icon="Document" @click="handleInfo(scope.row)">
-                                璇︽儏
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-        </BaseCard>
-        <InfoModal ref="InfoModalRef" />
+  <div class="page">
+    <div class="form-card">
+      <el-form :model="form" ref="formRef" :inline="true">
+        <el-form-item label="鏈熼棿" prop="timeType">
+          <el-select v-model="form.timeType" placeholder="鏈熼棿" style="width: 100%" @change="handleTimeType">
+            <el-option
+              v-for="dict in period"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+              v-show="dict.value != 'DAY'"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="鏃堕棿">
+          <el-date-picker
+            v-model="form.date"
+            type="year"
+            v-if="form.timeType == 'YEAR'"
+            range-separator="鍒�"
+            format="YYYY"
+            value-format="YYYY"
+            placeholder="鏃堕棿"
+            style="width: 100%"
+            :clearable="false"
+          />
+          <el-date-picker
+            v-model="form.date"
+            type="month"
+            v-else
+            format="YYYY-MM"
+            value-format="YYYY-MM"
+            placeholder="鏃堕棿"
+            style="width: 100%"
+            :clearable="false"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
+          <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+        </el-form-item>
+      </el-form>
     </div>
+    <BaseCard title="鐢靛姏鏁版嵁">
+      <div class="card-list">
+        <div class="card-list-item" v-for="item in periodList" :key="item.title">
+          <div class="item-top">
+            <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
+            <div class="name">{{ item.title }}</div>
+          </div>
+          <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
+            <div class="bottom-left">{{ node.label }}</div>
+            <div class="bottom-right" :style="{ color: item.color }">
+              {{ form.timeType == "YEAR" && nodeIndex == 1 ? "--" : node.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </BaseCard>
+    <BaseCard title="缁熻鏁版嵁">
+      <div class="card-list card-list19">
+        <div class="card-list-item" v-for="item in periodList1" :key="item.title">
+          <div class="item-top">
+            <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
+            <div class="name">{{ item.title }}</div>
+          </div>
+          <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
+            <div class="bottom-left">{{ node.label }}</div>
+            <div class="bottom-right" :style="{ color: item.color }">
+              {{ form.timeType == "YEAR" && nodeIndex == 1 ? "--" : node.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </BaseCard>
+    <BaseCard title="鑰楃數鏄庣粏">
+      <div class="table-box">
+        <el-table
+          :data="tableData"
+          v-loading="loading"
+          style="width: 100%; max-height: 500px; margin-bottom: 20px"
+          row-key="id"
+        >
+          <el-table-column
+            prop="nodeId"
+            label="鐢ㄨ兘鍗曚綅"
+            align="center"
+            show-overflow-tooltip
+            :formatter="(row, column) => findLabelById(treeNode, row.nodeId)"
+          />
+          <el-table-column prop="electricityNum" label="鎬昏�楃數閲�(鍗冪摝鏃�)" align="center" show-overflow-tooltip />
+          <el-table-column prop="sharpElectricity" label="灏�(鍗冪摝鏃�)" align="center" show-overflow-tooltip />
+          <el-table-column prop="peakElectricity" label="宄�(鍗冪摝鏃�)" align="center" show-overflow-tooltip />
+          <el-table-column prop="flatElectricity" label="骞�(鍗冪摝鏃�)" align="center" show-overflow-tooltip />
+          <el-table-column prop="valleyElectricity" label="璋�(鍗冪摝鏃�)" align="center" show-overflow-tooltip />
+          <el-table-column prop="electricityFee" label="鎬荤數璐癸紙鍏冿級" align="center" show-overflow-tooltip />
+          <el-table-column prop="electricityNumYoy" label="鍚屾瘮" align="center" show-overflow-tooltip />
+          <el-table-column
+            prop="electricityNumQoq"
+            label="鐜瘮"
+            v-if="form.timeType != 'YEAR'"
+            align="center"
+            show-overflow-tooltip
+          />
+          <el-table-column prop="electricityNumRadio" label="鍗犳瘮" align="center" show-overflow-tooltip />
+          <el-table-column label="鎿嶄綔" width="80" align="center">
+            <template #default="scope">
+              <el-button link type="primary" icon="Document" @click="handleInfo(scope.row)"> 璇︽儏 </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </BaseCard>
+    <InfoModal ref="InfoModalRef" />
+  </div>
 </template>
 <script setup>
-import { deviationCardList, deviationTableList } from '@/api/costManage/costManage.js'
-import InfoModal from './components/InfoModal.vue'
-import { useRoute } from "vue-router";
-const { proxy } = getCurrentInstance();
-const { period } = proxy.useDict("period");
-import { treeList } from "@/api/modelConfiguration/indexWarehouse";
+import { deviationCardList, deviationTableList } from "@/api/costManage/costManage.js"
+import InfoModal from "./components/InfoModal.vue"
+import { useRoute } from "vue-router"
+const { proxy } = getCurrentInstance()
+const { period } = proxy.useDict("period")
+import { treeList } from "@/api/modelConfiguration/indexWarehouse"
 let loading = ref(false)
 let form = ref({
-    timeType: '',
-    date: null,
-    ...useRoute().query
+  timeType: "",
+  date: null,
+  ...useRoute().query,
 })
-import icon1 from "@/assets/images/period/icon1.png";
-import icon2 from "@/assets/images/period/icon2.png";
-import icon3 from "@/assets/images/period/icon3.png";
-import icon4 from "@/assets/images/period/icon4.png";
-import icon5 from "@/assets/images/period/icon5.png";
-
+import icon1 from "@/assets/images/period/icon1.png"
+import icon2 from "@/assets/images/period/icon2.png"
+import icon3 from "@/assets/images/period/icon3.png"
+import icon4 from "@/assets/images/period/icon4.png"
+import icon5 from "@/assets/images/period/icon5.png"
 
 const periodList = ref([
-    {
-        icon: icon1,
-        color: "#3371eb",
-        title: "鎬荤數閲忥紙鍗冪摝鏃�)",
+  {
+    icon: icon1,
+    color: "#3371eb",
+    title: "鎬荤數閲忥紙鍗冪摝鏃�)",
+    value: 0,
+    data: [
+      {
+        label: "鍚屾瘮",
+        value: "0",
+      },
+      {
+        label: "鐜瘮",
+        value: "0",
+      },
+    ],
+  },
+  {
+    icon: icon2,
+    color: "#f52528",
+    title: "鎬荤數璐癸紙鍏冿級",
+    value: 5566778,
+    data: [
+      {
+        label: "鍚屾瘮",
+        value: "0",
+      },
+      {
+        label: "鐜瘮",
+        value: "0",
+      },
+    ],
+  },
+  {
+    icon: icon3,
+    color: "#ff6200",
+    title: "鍔熺巼鍥犳暟",
+    value: 0.9,
+    data: [
+      {
+        label: "鍚屾瘮",
+        value: "0",
+      },
+      {
+        label: "鐜瘮",
+        value: "0",
+      },
+    ],
+  },
+  {
+    icon: icon4,
+    color: "#ffce0c",
+    title: "灏栧嘲骞宠胺鐢ㄧ數",
+    data: [
+      {
+        label: "灏�",
         value: 0,
-        data: [
-            {
-                label: "鍚屾瘮",
-                value: '0',
-            },
-            {
-                label: "鐜瘮",
-                value: '0',
-            },
-        ],
-    },
-    {
-        icon: icon2,
-        color: "#f52528",
-        title: "鎬荤數璐癸紙鍏冿級",
-        value: 5566778,
-        data: [
-            {
-                label: "鍚屾瘮",
-                value: '0',
-            },
-            {
-                label: "鐜瘮",
-                value: '0',
-            },
-        ],
-    },
-    {
-        icon: icon3,
-        color: "#ff6200",
-        title: "鍔熺巼鍥犳暟",
-        value: 0.9,
-        data: [
-            {
-                label: "鍚屾瘮",
-                value: '0',
-            },
-            {
-                label: "鐜瘮",
-                value: '0',
-            },
-        ],
-    },
-    {
-        icon: icon4,
-        color: "#ffce0c",
-        title: "灏栧嘲骞宠胺鐢ㄧ數",
-        data: [
-            {
-                label: "灏�",
-                value: 0,
-            },
-            {
-                label: "宄�",
-                value: 0,
-            },
-            {
-                label: "骞�",
-                value: 0,
-            },
-            {
-                label: "璋�",
-                value: 0,
-            },
-        ],
-    },
-]);
+      },
+      {
+        label: "宄�",
+        value: 0,
+      },
+      {
+        label: "骞�",
+        value: 0,
+      },
+      {
+        label: "璋�",
+        value: 0,
+      },
+    ],
+  },
+])
 
-
-const periodList1 = ref(
-    [{
-        icon: icon1,
-        color: "#3371eb",
-        title: "鎬荤數閲忥紙鍗冪摝鏃�)",
+const periodList1 = ref([
+  {
+    icon: icon1,
+    color: "#3371eb",
+    title: "鎬荤數閲忥紙鍗冪摝鏃�)",
+    value: 0,
+    data: [
+      {
+        label: "鍚屾瘮",
+        value: "0",
+      },
+      {
+        label: "鐜瘮",
+        value: "0",
+      },
+      {
+        label: "瀵规瘮宸�硷紙鍗冪摝鏃讹級",
+        value: "0",
+      },
+    ],
+  },
+  {
+    icon: icon2,
+    color: "#f52528",
+    title: "鎬荤數璐癸紙鍏冿級",
+    value: 0,
+    data: [
+      {
+        label: "鍚屾瘮",
+        value: "0",
+      },
+      {
+        label: "鐜瘮",
+        value: "0",
+      },
+      {
+        label: "瀵规瘮宸�硷紙鍗冪摝鏃讹級",
+        value: "0",
+      },
+    ],
+  },
+  {
+    icon: icon3,
+    color: "#ff6200",
+    title: "鍔熺巼鍥犳暟",
+    value: 0,
+    data: [
+      {
+        label: "鍚屾瘮",
+        value: "0",
+      },
+      {
+        label: "鐜瘮",
+        value: "0",
+      },
+      {
+        label: "瀵规瘮宸�硷紙鍗冪摝鏃讹級",
+        value: "0",
+      },
+    ],
+  },
+  {
+    icon: icon4,
+    color: "#ffce0c",
+    title: "灏栧嘲骞宠胺鐢ㄧ數",
+    data: [
+      {
+        label: "灏�",
         value: 0,
-        data: [
-            {
-                label: "鍚屾瘮",
-                value: '0',
-            },
-            {
-                label: "鐜瘮",
-                value: '0',
-            },
-            {
-                label: "瀵规瘮宸�硷紙鍗冪摝鏃讹級",
-                value: '0',
-            },
-        ],
-    },
-    {
-        icon: icon2,
-        color: "#f52528",
-        title: "鎬荤數璐癸紙鍏冿級",
+      },
+      {
+        label: "宄�",
         value: 0,
-        data: [
-            {
-                label: "鍚屾瘮",
-                value: '0',
-            },
-            {
-                label: "鐜瘮",
-                value: '0',
-            },
-            {
-                label: "瀵规瘮宸�硷紙鍗冪摝鏃讹級",
-                value: '0',
-            },
-        ],
-    },
-    {
-        icon: icon3,
-        color: "#ff6200",
-        title: "鍔熺巼鍥犳暟",
+      },
+      {
+        label: "骞�",
         value: 0,
-        data: [
-            {
-                label: "鍚屾瘮",
-                value: '0',
-            },
-            {
-                label: "鐜瘮",
-                value: '0',
-            },
-            {
-                label: "瀵规瘮宸�硷紙鍗冪摝鏃讹級",
-                value: '0',
-            },
-        ],
-    },
-    {
-        icon: icon4,
-        color: "#ffce0c",
-        title: "灏栧嘲骞宠胺鐢ㄧ數",
-        data: [
-            {
-                label: "灏�",
-                value: 0,
-            },
-            {
-                label: "宄�",
-                value: 0,
-            },
-            {
-                label: "骞�",
-                value: 0,
-            },
-            {
-                label: "璋�",
-                value: 0,
-            },
-        ],
-    },
-    {
-        icon: icon5,
-        color: "#ffce0c",
-        title: "灏栧嘲骞宠胺鐢ㄧ數瀵规瘮宸��",
-        data: [
-            {
-                label: "灏�",
-                value: 0,
-            },
-            {
-                label: "宄�",
-                value: 0,
-            },
-            {
-                label: "骞�",
-                value: 0,
-            },
-            {
-                label: "璋�",
-                value: 0,
-            },
-        ],
-    },
-    ]);
-handleTimeType('YEAR')
+      },
+      {
+        label: "璋�",
+        value: 0,
+      },
+    ],
+  },
+  {
+    icon: icon5,
+    color: "#ffce0c",
+    title: "灏栧嘲骞宠胺鐢ㄧ數瀵规瘮宸��",
+    data: [
+      {
+        label: "灏�",
+        value: 0,
+      },
+      {
+        label: "宄�",
+        value: 0,
+      },
+      {
+        label: "骞�",
+        value: 0,
+      },
+      {
+        label: "璋�",
+        value: 0,
+      },
+    ],
+  },
+])
+handleTimeType("YEAR")
 function handleTimeType(e) {
-    form.value.timeType = e;
-    form.value.date = proxy.dayjs(new Date()).format(e == "YEAR" ? "YYYY" : "YYYY-MM");
-    getList()
-    getTableList()
+  form.value.timeType = e
+  form.value.date = proxy.dayjs(new Date()).format(e == "YEAR" ? "YYYY" : "YYYY-MM")
+  getList()
+  getTableList()
 }
 
 let tableData = ref([])
 //鑾峰彇鍒楄〃
 function getList() {
-    deviationCardList(form.value).then(res => {
-        if (res.code == 200) {
-            let { CostElectricityData, CostStatisticsData } = res.data
-            periodList.value = [
-                {
-                    icon: icon1,
-                    color: "#3371eb",
-                    title: "鎬荤數閲忥紙鍗冪摝鏃�)",
-                    value: CostElectricityData.electricityNum ? CostElectricityData.electricityNum : 0,
-                    data: [
-                        {
-                            label: "鍚屾瘮",
-                            value: CostElectricityData.electricityNumYoy ? CostElectricityData.electricityNumYoy + '%' : 0,
-                        },
-                        {
-                            label: "鐜瘮",
-                            value: CostElectricityData.electricityNumQoq ? CostElectricityData.electricityNumQoq + '%' : 0,
-                        },
-                    ],
-                },
-                {
-                    icon: icon2,
-                    color: "#f52528",
-                    title: "鎬荤數璐癸紙鍏冿級",
-                    value: CostElectricityData.electricityFee ? CostElectricityData.electricityFee : 0,
-                    data: [
-                        {
-                            label: "鍚屾瘮",
-                            value: CostElectricityData.electricityFeeYoy ? CostElectricityData.electricityFeeYoy + '%' : 0,
-                        },
-                        {
-                            label: "鐜瘮",
-                            value: CostElectricityData.electricityFeeQoq ? CostElectricityData.electricityFeeQoq + '%' : 0,
-                        },
-                    ],
-                },
-                {
-                    icon: icon3,
-                    color: "#ff6200",
-                    title: "鍔熺巼鍥犳暟",
-                    value: CostElectricityData.powerFactor ? CostElectricityData.powerFactor : 0,
-                    data: [
-                        {
-                            label: "鍚屾瘮",
-                            value: CostElectricityData.powerFactorYoy ? CostElectricityData.powerFactorYoy + '%' : 0,
-                        },
-                        {
-                            label: "鐜瘮",
-                            value: CostElectricityData.powerFactorQoq ? CostElectricityData.powerFactorQoq + '%' : 0,
-                        },
-                    ],
-                },
-                {
-                    icon: icon4,
-                    color: "#ffce0c",
-                    title: "灏栧嘲骞宠胺鐢ㄧ數",
-                    data: [
-                        {
-                            label: "灏栵紙鍗冪摝鏃�)",
-                            value: CostElectricityData.sharpElectricity ? CostElectricityData.sharpElectricity : 0,
-                        },
-                        {
-                            label: "宄帮紙鍗冪摝鏃�)",
-                            value: CostElectricityData.peakElectricity ? CostElectricityData.peakElectricity : 0,
-                        },
-                        {
-                            label: "骞筹紙鍗冪摝鏃�)",
-                            value: CostElectricityData.flatElectricity ? CostElectricityData.flatElectricity : 0,
-                        },
-                        {
-                            label: "璋凤紙鍗冪摝鏃�)",
-                            value: CostElectricityData.valleyElectricity ? CostElectricityData.valleyElectricity : 0,
-                        },
-                    ],
-                },
-            ]
+  deviationCardList(form.value).then((res) => {
+    if (res.code == 200) {
+      let { CostElectricityData, CostStatisticsData } = res.data
+      periodList.value = [
+        {
+          icon: icon1,
+          color: "#3371eb",
+          title: "鎬荤數閲忥紙鍗冪摝鏃�)",
+          value: CostElectricityData.electricityNum ? CostElectricityData.electricityNum : 0,
+          data: [
+            {
+              label: "鍚屾瘮",
+              value: CostElectricityData.electricityNumYoy ? CostElectricityData.electricityNumYoy + "%" : 0,
+            },
+            {
+              label: "鐜瘮",
+              value: CostElectricityData.electricityNumQoq ? CostElectricityData.electricityNumQoq + "%" : 0,
+            },
+          ],
+        },
+        {
+          icon: icon2,
+          color: "#f52528",
+          title: "鎬荤數璐癸紙鍏冿級",
+          value: CostElectricityData.electricityFee ? CostElectricityData.electricityFee : 0,
+          data: [
+            {
+              label: "鍚屾瘮",
+              value: CostElectricityData.electricityFeeYoy ? CostElectricityData.electricityFeeYoy + "%" : 0,
+            },
+            {
+              label: "鐜瘮",
+              value: CostElectricityData.electricityFeeQoq ? CostElectricityData.electricityFeeQoq + "%" : 0,
+            },
+          ],
+        },
+        {
+          icon: icon3,
+          color: "#ff6200",
+          title: "鍔熺巼鍥犳暟",
+          value: CostElectricityData.powerFactor ? CostElectricityData.powerFactor : 0,
+          data: [
+            {
+              label: "鍚屾瘮",
+              value: CostElectricityData.powerFactorYoy ? CostElectricityData.powerFactorYoy + "%" : 0,
+            },
+            {
+              label: "鐜瘮",
+              value: CostElectricityData.powerFactorQoq ? CostElectricityData.powerFactorQoq + "%" : 0,
+            },
+          ],
+        },
+        {
+          icon: icon4,
+          color: "#ffce0c",
+          title: "灏栧嘲骞宠胺鐢ㄧ數",
+          data: [
+            {
+              label: "灏栵紙鍗冪摝鏃�)",
+              value: CostElectricityData.sharpElectricity ? CostElectricityData.sharpElectricity : 0,
+            },
+            {
+              label: "宄帮紙鍗冪摝鏃�)",
+              value: CostElectricityData.peakElectricity ? CostElectricityData.peakElectricity : 0,
+            },
+            {
+              label: "骞筹紙鍗冪摝鏃�)",
+              value: CostElectricityData.flatElectricity ? CostElectricityData.flatElectricity : 0,
+            },
+            {
+              label: "璋凤紙鍗冪摝鏃�)",
+              value: CostElectricityData.valleyElectricity ? CostElectricityData.valleyElectricity : 0,
+            },
+          ],
+        },
+      ]
 
-            periodList1.value = [{
-                icon: icon1,
-                color: "#3371eb",
-                title: "鎬荤數閲忥紙鍗冪摝鏃�)",
-                value: CostStatisticsData && CostStatisticsData.electricityNum ? CostStatisticsData.electricityNum : 0,
-                data: [
-                    {
-                        label: "鍚屾瘮",
-                        value: CostStatisticsData && CostStatisticsData.electricityNumYoy ? CostStatisticsData.electricityNumYoy : 0,
-                    },
-                    {
-                        label: "鐜瘮",
-                        value: CostStatisticsData && CostStatisticsData.electricityNumQoq ? CostStatisticsData.electricityNumQoq : 0,
-                    },
-                    {
-                        label: "瀵规瘮宸�硷紙鍗冪摝鏃讹級",
-                        value: CostStatisticsData && CostStatisticsData.electricityNumDiff ? CostStatisticsData.electricityNumDiff : 0,
-                    },
-                ],
+      periodList1.value = [
+        {
+          icon: icon1,
+          color: "#3371eb",
+          title: "鎬荤數閲忥紙鍗冪摝鏃�)",
+          value: CostStatisticsData && CostStatisticsData.electricityNum ? CostStatisticsData.electricityNum : 0,
+          data: [
+            {
+              label: "鍚屾瘮",
+              value:
+                CostStatisticsData && CostStatisticsData.electricityNumYoy ? CostStatisticsData.electricityNumYoy : 0,
             },
             {
-                icon: icon2,
-                color: "#f52528",
-                title: "鎬荤數璐癸紙鍏冿級",
-                value: CostStatisticsData && CostStatisticsData.electricityFee ? CostStatisticsData.electricityFee : 0,
-                data: [
-                    {
-                        label: "鍚屾瘮",
-                        value: CostStatisticsData && CostStatisticsData.electricityFeeYoy ? CostStatisticsData.electricityFeeYoy : 0,
-                    },
-                    {
-                        label: "鐜瘮",
-                        value: CostStatisticsData && CostStatisticsData.electricityNumQoq ? CostStatisticsData.electricityNumQoq : 0,
-                    },
-                    {
-                        label: "瀵规瘮宸�硷紙鍗冪摝鏃讹級",
-                        value: CostStatisticsData && CostStatisticsData.electricityNumDiff ? CostStatisticsData.electricityNumDiff : 0,
-                    },
-                ],
+              label: "鐜瘮",
+              value:
+                CostStatisticsData && CostStatisticsData.electricityNumQoq ? CostStatisticsData.electricityNumQoq : 0,
             },
             {
-                icon: icon3,
-                color: "#ff6200",
-                title: "鍔熺巼鍥犳暟",
-                value: CostStatisticsData && CostStatisticsData.powerFactor ? CostStatisticsData.powerFactor : 0,
-                data: [
-                    {
-                        label: "鍚屾瘮",
-                        value: CostStatisticsData && CostStatisticsData.powerFactorYoy ? CostStatisticsData.powerFactorYoy : 0,
-                    },
-                    {
-                        label: "鐜瘮",
-                        value: CostStatisticsData && CostStatisticsData.powerFactorQoq ? CostStatisticsData.powerFactorQoq : 0,
-                    },
-                    {
-                        label: "瀵规瘮宸��",
-                        value: CostStatisticsData && CostStatisticsData.powerFactorDiff ? CostStatisticsData.powerFactorDiff : 0,
-                    },
-                ],
+              label: "瀵规瘮宸�硷紙鍗冪摝鏃讹級",
+              value:
+                CostStatisticsData && CostStatisticsData.electricityNumDiff ? CostStatisticsData.electricityNumDiff : 0,
+            },
+          ],
+        },
+        {
+          icon: icon2,
+          color: "#f52528",
+          title: "鎬荤數璐癸紙鍏冿級",
+          value: CostStatisticsData && CostStatisticsData.electricityFee ? CostStatisticsData.electricityFee : 0,
+          data: [
+            {
+              label: "鍚屾瘮",
+              value:
+                CostStatisticsData && CostStatisticsData.electricityFeeYoy ? CostStatisticsData.electricityFeeYoy : 0,
             },
             {
-                icon: icon4,
-                color: "#ffce0c",
-                title: "灏栧嘲骞宠胺鐢ㄧ數",
-                data: [
-                    {
-                        label: "灏�",
-                        value: CostStatisticsData && CostStatisticsData.sharpElectricity ? CostStatisticsData.sharpElectricity : 0,
-                    },
-                    {
-                        label: "宄�",
-                        value: CostStatisticsData && CostStatisticsData.peakElectricity ? CostStatisticsData.peakElectricity : 0,
-                    },
-                    {
-                        label: "骞�",
-                        value: CostStatisticsData && CostStatisticsData.flatElectricity ? CostStatisticsData.flatElectricity : 0,
-                    },
-                    {
-                        label: "璋�",
-                        value: CostStatisticsData && CostStatisticsData.valleyElectricity ? CostStatisticsData.valleyElectricity : 0,
-                    },
-                ],
+              label: "鐜瘮",
+              value:
+                CostStatisticsData && CostStatisticsData.electricityNumQoq ? CostStatisticsData.electricityNumQoq : 0,
             },
             {
-                icon: icon5,
-                color: "#ffce0c",
-                title: "灏栧嘲骞宠胺鐢ㄧ數瀵规瘮宸��",
-                data: [
-                    {
-                        label: "灏�",
-                        value: CostStatisticsData && CostStatisticsData.sharpElectricityDiff ? CostStatisticsData.sharpElectricityDiff : 0,
-                    },
-                    {
-                        label: "宄�",
-                        value: CostStatisticsData && CostStatisticsData.peakElectricityDiff ? CostStatisticsData.peakElectricityDiff : 0,
-                    },
-                    {
-                        label: "骞�",
-                        value: CostStatisticsData && CostStatisticsData.flatElectricityDiff ? CostStatisticsData.flatElectricityDiff : 0,
-                    },
-                    {
-                        label: "璋�",
-                        value: CostStatisticsData && CostStatisticsData.valleyElectricityDiff ? CostStatisticsData.valleyElectricityDiff : 0,
-                    },
-                ],
+              label: "瀵规瘮宸�硷紙鍗冪摝鏃讹級",
+              value:
+                CostStatisticsData && CostStatisticsData.electricityNumDiff ? CostStatisticsData.electricityNumDiff : 0,
             },
-            ]
-        }
-    })
-
+          ],
+        },
+        {
+          icon: icon3,
+          color: "#ff6200",
+          title: "鍔熺巼鍥犳暟",
+          value: CostStatisticsData && CostStatisticsData.powerFactor ? CostStatisticsData.powerFactor : 0,
+          data: [
+            {
+              label: "鍚屾瘮",
+              value: CostStatisticsData && CostStatisticsData.powerFactorYoy ? CostStatisticsData.powerFactorYoy : 0,
+            },
+            {
+              label: "鐜瘮",
+              value: CostStatisticsData && CostStatisticsData.powerFactorQoq ? CostStatisticsData.powerFactorQoq : 0,
+            },
+            {
+              label: "瀵规瘮宸��",
+              value: CostStatisticsData && CostStatisticsData.powerFactorDiff ? CostStatisticsData.powerFactorDiff : 0,
+            },
+          ],
+        },
+        {
+          icon: icon4,
+          color: "#ffce0c",
+          title: "灏栧嘲骞宠胺鐢ㄧ數",
+          data: [
+            {
+              label: "灏�",
+              value:
+                CostStatisticsData && CostStatisticsData.sharpElectricity ? CostStatisticsData.sharpElectricity : 0,
+            },
+            {
+              label: "宄�",
+              value: CostStatisticsData && CostStatisticsData.peakElectricity ? CostStatisticsData.peakElectricity : 0,
+            },
+            {
+              label: "骞�",
+              value: CostStatisticsData && CostStatisticsData.flatElectricity ? CostStatisticsData.flatElectricity : 0,
+            },
+            {
+              label: "璋�",
+              value:
+                CostStatisticsData && CostStatisticsData.valleyElectricity ? CostStatisticsData.valleyElectricity : 0,
+            },
+          ],
+        },
+        {
+          icon: icon5,
+          color: "#ffce0c",
+          title: "灏栧嘲骞宠胺鐢ㄧ數瀵规瘮宸��",
+          data: [
+            {
+              label: "灏�",
+              value:
+                CostStatisticsData && CostStatisticsData.sharpElectricityDiff
+                  ? CostStatisticsData.sharpElectricityDiff
+                  : 0,
+            },
+            {
+              label: "宄�",
+              value:
+                CostStatisticsData && CostStatisticsData.peakElectricityDiff
+                  ? CostStatisticsData.peakElectricityDiff
+                  : 0,
+            },
+            {
+              label: "骞�",
+              value:
+                CostStatisticsData && CostStatisticsData.flatElectricityDiff
+                  ? CostStatisticsData.flatElectricityDiff
+                  : 0,
+            },
+            {
+              label: "璋�",
+              value:
+                CostStatisticsData && CostStatisticsData.valleyElectricityDiff
+                  ? CostStatisticsData.valleyElectricityDiff
+                  : 0,
+            },
+          ],
+        },
+      ]
+    }
+  })
 }
 
 function getTableList() {
-    loading.value = true
-    deviationTableList(form.value).then(res => {
-        tableData.value = []
-        if (res.code == 200) {
-            tableData.value.push(res.data)
-            loading.value = false
-        }
-    })
+  loading.value = true
+  deviationTableList(form.value).then((res) => {
+    tableData.value = []
+    if (res.code == 200) {
+      tableData.value.push(res.data)
+      loading.value = false
+    }
+  })
 }
 
 function resetQuery() {
-    getList()
-    getTableList()
+  getList()
+  getTableList()
 }
 function handleQuery() {
-    getList()
-    getTableList()
+  getList()
+  getTableList()
 }
 
 let InfoModalRef = ref()
 function handleInfo(row) {
-    if (InfoModalRef.value) {
-        InfoModalRef.value.handleOpen(row, form.value)
-    }
-
+  if (InfoModalRef.value) {
+    InfoModalRef.value.handleOpen(row, form.value)
+  }
 }
 let treeNode = ref([])
 function handleNodeTree() {
-    treeList(useRoute().query).then((response) => {
-        treeNode.value = response.data;
-    })
+  treeList(useRoute().query).then((response) => {
+    treeNode.value = response.data
+  })
 }
 handleNodeTree()
 
 // 閫掑綊鍑芥暟锛屾牴鎹甶d鏌ユ壘label
 function findLabelById(tree, targetId) {
-    for (const node of tree) {
-        if (node.id === targetId) {
-            return node.label;
-        }
-        if (node.children && node.children.length > 0) {
-            const result = findLabelById(node.children, targetId);
-            if (result) {
-                return result;
-            }
-        }
+  for (const node of tree) {
+    if (node.id === targetId) {
+      return node.label
     }
-    return null;
+    if (node.children && node.children.length > 0) {
+      const result = findLabelById(node.children, targetId)
+      if (result) {
+        return result
+      }
+    }
+  }
+  return null
 }
-
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/styles/page.scss";
 
-:deep(.el-table__expand-icon>.el-icon) {
-    color: #cac9c9 !important;
+:deep(.el-table__expand-icon > .el-icon) {
+  color: #cac9c9 !important;
 }
 
-
 .themeDark {
-    .tree-title-box {
+  .tree-title-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .card-list {
+    display: flex;
+    justify-content: space-between;
+    padding: 18px;
+
+    .card-list-item {
+      width: 24%;
+      height: 187px;
+      background: #223386;
+      border-radius: 5px 5px 5px 5px;
+      border: 1px solid #4868b7;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      padding: 10px 18px 13px 16px;
+
+      .item-top {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-    }
 
-    .card-list {
+        .icon {
+          width: 40px;
+          height: 40px;
+          background-size: 100% 100%;
+        }
+
+        .name {
+          font-family: OPPOSans, OPPOSans;
+          font-weight: bold;
+          font-size: 18px;
+          color: #fffdfd;
+          margin-left: 7px;
+        }
+      }
+
+      .item-bottom {
         display: flex;
         justify-content: space-between;
-        padding: 18px;
+        margin-top: 10px;
+        font-family: OPPOSans, OPPOSans;
+        font-weight: bold;
+        font-size: 16px;
 
-        .card-list-item {
-            width: 24%;
-            height: 187px;
-            background: #223386;
-            border-radius: 5px 5px 5px 5px;
-            border: 1px solid #4868b7;
-            background-size: 100% 100%;
-            box-sizing: border-box;
-            padding: 10px 18px 13px 16px;
-
-            .item-top {
-                display: flex;
-                align-items: center;
-
-                .icon {
-                    width: 40px;
-                    height: 40px;
-                    background-size: 100% 100%;
-                }
-
-                .name {
-                    font-family: OPPOSans, OPPOSans;
-                    font-weight: bold;
-                    font-size: 20px;
-                    color: #fffdfd;
-                    margin-left: 7px;
-                }
-            }
-
-            .item-bottom {
-                display: flex;
-                justify-content: space-between;
-                margin-top: 10px;
-                font-family: OPPOSans, OPPOSans;
-                font-weight: bold;
-                font-size: 16px;
-
-                .bottom-left {
-                    font-family: OPPOSans, OPPOSans;
-                    font-weight: 500;
-                    font-size: 14px;
-                    color: rgba(255, 255, 255, 0.7);
-                }
-
-                .bottom-right {
-                    font-family: OPPOSans, OPPOSans;
-                    font-weight: 800;
-                    font-size: 16px;
-                    color: #f52528;
-                }
-            }
+        .bottom-left {
+          font-family: OPPOSans, OPPOSans;
+          font-weight: 500;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.7);
         }
+
+        .bottom-right {
+          font-family: OPPOSans, OPPOSans;
+          font-weight: 800;
+          font-size: 16px;
+          color: #f52528;
+        }
+      }
     }
+  }
 }
 
 .themeLight {
-    .tree-title-box {
+  .tree-title-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .card-list {
+    display: flex;
+    justify-content: space-between;
+    padding: 18px;
+
+    .card-list-item {
+      width: 24%;
+      height: 187px;
+      background: #fff;
+      border-radius: 5px 5px 5px 5px;
+      border: 1px solid #e8e8e8;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      padding: 10px 18px 13px 16px;
+
+      .item-top {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-    }
 
-    .card-list {
+        .icon {
+          width: 40px;
+          height: 40px;
+          background-size: 100% 100%;
+        }
+
+        .name {
+          font-family: OPPOSans, OPPOSans;
+          font-weight: bold;
+          font-size: 18px;
+          color: #000;
+          margin-left: 7px;
+        }
+      }
+
+      .item-bottom {
         display: flex;
         justify-content: space-between;
-        padding: 18px;
+        margin-top: 10px;
+        font-family: OPPOSans, OPPOSans;
+        font-weight: bold;
+        font-size: 16px;
 
-        .card-list-item {
-            width: 24%;
-            height: 187px;
-            background: #fff;
-            border-radius: 5px 5px 5px 5px;
-            border: 1px solid #e8e8e8;
-            background-size: 100% 100%;
-            box-sizing: border-box;
-            padding: 10px 18px 13px 16px;
-
-            .item-top {
-                display: flex;
-                align-items: center;
-
-                .icon {
-                    width: 40px;
-                    height: 40px;
-                    background-size: 100% 100%;
-                }
-
-                .name {
-                    font-family: OPPOSans, OPPOSans;
-                    font-weight: bold;
-                    font-size: 20px;
-                    color: #000;
-                    margin-left: 7px;
-                }
-            }
-
-            .item-bottom {
-                display: flex;
-                justify-content: space-between;
-                margin-top: 10px;
-                font-family: OPPOSans, OPPOSans;
-                font-weight: bold;
-                font-size: 16px;
-
-                .bottom-left {
-                    font-family: OPPOSans, OPPOSans;
-                    font-weight: 500;
-                    font-size: 14px;
-                    color: #5d5c5c;
-                }
-
-                .bottom-right {
-                    font-family: OPPOSans, OPPOSans;
-                    font-weight: 800;
-                    font-size: 16px;
-                    color: #f52528;
-                }
-            }
+        .bottom-left {
+          font-family: OPPOSans, OPPOSans;
+          font-weight: 500;
+          font-size: 14px;
+          color: #5d5c5c;
         }
+
+        .bottom-right {
+          font-family: OPPOSans, OPPOSans;
+          font-weight: 800;
+          font-size: 16px;
+          color: #f52528;
+        }
+      }
     }
+  }
 }
 
 .card-list19 {
-    .card-list-item {
-        width: 19% !important;
-    }
+  .card-list-item {
+    width: 19% !important;
+  }
 }
 </style>
diff --git a/zhitan-vue/src/views/costmanage/unitpricestrategy/unitpricestrategy.vue b/zhitan-vue/src/views/costmanage/unitpricestrategy/unitpricestrategy.vue
index 0c2a4e3..4a2818f 100644
--- a/zhitan-vue/src/views/costmanage/unitpricestrategy/unitpricestrategy.vue
+++ b/zhitan-vue/src/views/costmanage/unitpricestrategy/unitpricestrategy.vue
@@ -1,147 +1,163 @@
 <template>
-    <div class="page">
-        <div class="form-card">
-            <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
-                <!-- <el-form-item label="鏈夋晥鍛ㄦ湡">
+  <div class="page">
+    <div class="form-card">
+      <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
+        <!-- <el-form-item label="鏈夋晥鍛ㄦ湡">
                     <el-date-picker v-model="form.index1" type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                         placeholder="鏃堕棿" style="width: 260px" unlink-panels />
                 </el-form-item> -->
-                <el-form-item label="鑳芥簮鍝佺">
-                    <el-select v-model="form.energyType" placeholder="璇烽�夋嫨鑳芥簮鍝佺" style="width: 100%">
-                        <el-option v-for="dict in energyVarietiesList" :key="dict.enerclassid"
-                            :label="dict.enerclassname" :value="dict.enerclassid" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="绛栫暐鍚嶇О">
-                    <el-input v-model="form.tacticsName" placeholder="璇疯緭鍏ョ瓥鐣ュ悕绉�" />
-                </el-form-item>
-                <el-form-item label="绛栫暐缂栫爜">
-                    <el-input v-model="form.tacticsNumber" placeholder="璇疯緭鍏ョ瓥鐣ョ紪鐮�" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
-                    <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
-        <div class="mt20 mb20 ml20">
-            <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button>
-        </div>
-        <div class="table-box">
-            <el-table :data="tableData" v-loading="loading" height="calc(100vh - 450px)">
-                <el-table-column type="index" label="搴忓彿" align="center" width="100" />
-                <el-table-column label="绛栫暐缂栫爜" prop="tacticsNumber" align="center" show-overflow-tooltip />
-                <el-table-column label="绛栫暐鍚嶇О" prop="tacticsName" align="center" show-overflow-tooltip />
-                <el-table-column label="鑳芥簮鍝佺" prop="energyType" align="center" show-overflow-tooltip
-                    :formatter="(row, column) => formatterLabel(energyVarietiesList, row.energyType)" />
-                <el-table-column label="鏄惁闃舵浠锋牸" prop="type" align="center" show-overflow-tooltip
-                    :formatter="(row, column) => row.type == 0 ? '鍚�' : '鏄�'" />
-                <el-table-column label="鎿嶄綔" width="220" align="center">
-                    <template #default="scope">
-                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row, scope.$index)">
-                            缂栬緫
-                        </el-button>
-                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row, scope.$index)">
-                            鍒犻櫎
-                        </el-button>
-                        <el-button link type="primary" icon="DocumentCopy" @click="handleCopy(scope.row, scope.$index)">
-                            澶嶅埗
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                v-model:limit="queryParams.pageSize" @pagination="getList" />
-        </div>
-        <EditModal ref="editModalRef" :energyVarietiesList='energyVarietiesList' @getList='getList' />
+        <el-form-item label="鑳芥簮鍝佺">
+          <el-select v-model="form.energyType" placeholder="璇烽�夋嫨鑳芥簮鍝佺" style="width: 100%">
+            <el-option
+              v-for="dict in energyVarietiesList"
+              :key="dict.enerclassid"
+              :label="dict.enerclassname"
+              :value="dict.enerclassid"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="绛栫暐鍚嶇О">
+          <el-input v-model="form.tacticsName" placeholder="璇疯緭鍏ョ瓥鐣ュ悕绉�" />
+        </el-form-item>
+        <el-form-item label="绛栫暐缂栫爜">
+          <el-input v-model="form.tacticsNumber" placeholder="璇疯緭鍏ョ瓥鐣ョ紪鐮�" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
+          <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+        </el-form-item>
+      </el-form>
     </div>
+    <div class="table-bg-style">
+      <div class="mb20 ml20 theme-dark-mt20">
+        <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button>
+      </div>
+      <div class="table-box">
+        <el-table :data="tableData" v-loading="loading" height="calc(100vh - 450px)">
+          <el-table-column type="index" label="搴忓彿" align="center" width="100" />
+          <el-table-column label="绛栫暐缂栫爜" prop="tacticsNumber" align="center" show-overflow-tooltip />
+          <el-table-column label="绛栫暐鍚嶇О" prop="tacticsName" align="center" show-overflow-tooltip />
+          <el-table-column
+            label="鑳芥簮鍝佺"
+            prop="energyType"
+            align="center"
+            show-overflow-tooltip
+            :formatter="(row, column) => formatterLabel(energyVarietiesList, row.energyType)"
+          />
+          <el-table-column
+            label="鏄惁闃舵浠锋牸"
+            prop="type"
+            align="center"
+            show-overflow-tooltip
+            :formatter="(row, column) => (row.type == 0 ? '鍚�' : '鏄�')"
+          />
+          <el-table-column label="鎿嶄綔" width="220" align="center">
+            <template #default="scope">
+              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row, scope.$index)"> 缂栬緫 </el-button>
+              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row, scope.$index)">
+                鍒犻櫎
+              </el-button>
+              <el-button link type="primary" icon="DocumentCopy" @click="handleCopy(scope.row, scope.$index)">
+                澶嶅埗
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+    <EditModal ref="editModalRef" :energyVarietiesList="energyVarietiesList" @getList="getList" />
+  </div>
 </template>
 <script setup>
-import { unitPriceStrategyList, unitPriceStrategyDel } from '@/api/costManage/costManage.js'
-const { proxy } = getCurrentInstance();
-import EditModal from './components/EditModal'
-import { listEnergyVarietiesList } from "@/api/modelConfiguration/energyVarieties";
-const energyVarietiesList = ref([]);
+import { unitPriceStrategyList, unitPriceStrategyDel } from "@/api/costManage/costManage.js"
+const { proxy } = getCurrentInstance()
+import EditModal from "./components/EditModal"
+import { listEnergyVarietiesList } from "@/api/modelConfiguration/energyVarieties"
+const energyVarietiesList = ref([])
 
 getEnergyVarietiesList()
-let loading = ref(false);
-let tableData = ref([{}]);
+let loading = ref(false)
+let tableData = ref([{}])
 let editModalRef = ref()
 let form = ref({
-    // index1: [proxy.dayjs().startOf('year').format("YYYY-MM-DD"), proxy.dayjs().endOf('year').format("YYYY-MM-DD")],
-    energyType: null,
-    tacticsName: null,
-    tacticsNumber: null
+  // index1: [proxy.dayjs().startOf('year').format("YYYY-MM-DD"), proxy.dayjs().endOf('year').format("YYYY-MM-DD")],
+  energyType: null,
+  tacticsName: null,
+  tacticsNumber: null,
 })
 function getEnergyVarietiesList() {
-    listEnergyVarietiesList().then((res) => {
-        energyVarietiesList.value = res.data;
-        form.value.energyType = res.data[0].enerclassid
-
-    });
+  listEnergyVarietiesList().then((res) => {
+    energyVarietiesList.value = res.data
+    form.value.energyType = res.data[0].enerclassid
+  })
 }
 let queryParams = ref({
-    pageNum: 1,
-    pageSize: 10,
+  pageNum: 1,
+  pageSize: 10,
 })
 let total = ref(0)
 getList()
 //鑾峰彇鍒楄〃
 function getList() {
-    loading.value = true
-    unitPriceStrategyList({ ...queryParams.value, ...form.value }).then(res => {
-        tableData.value = res.rows
-        total.value = res.total
-        loading.value = false
-    })
+  loading.value = true
+  unitPriceStrategyList({ ...queryParams.value, ...form.value }).then((res) => {
+    tableData.value = res.rows
+    total.value = res.total
+    loading.value = false
+  })
 }
 function handleAdd(row) {
-    if (editModalRef.value) {
-        editModalRef.value.handleOpen(row, true)
-    }
+  if (editModalRef.value) {
+    editModalRef.value.handleOpen(row, true)
+  }
 }
 function handleQuery() {
-    queryParams.value.pageNum = 1
-    getList()
+  queryParams.value.pageNum = 1
+  getList()
 }
 function resetQuery() {
-    form.value = {
-        // index1: [proxy.dayjs().startOf('year').format("YYYY-MM-DD"), proxy.dayjs().endOf('year').format("YYYY-MM-DD")],
-        energyType: null,
-        tacticsName: null,
-        tacticsNumber: null
-    }
-    queryParams.value.pageNum = 1
-    getList()
+  form.value = {
+    // index1: [proxy.dayjs().startOf('year').format("YYYY-MM-DD"), proxy.dayjs().endOf('year').format("YYYY-MM-DD")],
+    energyType: null,
+    tacticsName: null,
+    tacticsNumber: null,
+  }
+  queryParams.value.pageNum = 1
+  getList()
 }
 
 function handleDel(row) {
-    proxy.$modal
-        .confirm('鏄惁纭鍒犻櫎鏃堕棿涓�"' + row.tacticsName + '"鐨勬暟鎹」锛�')
-        .then(function () {
-            return unitPriceStrategyDel(row.id);
-        })
-        .then(() => {
-            resetQuery();
-            proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-        })
-        .catch(() => { });
+  proxy.$modal
+    .confirm('鏄惁纭鍒犻櫎鏃堕棿涓�"' + row.tacticsName + '"鐨勬暟鎹」锛�')
+    .then(function () {
+      return unitPriceStrategyDel(row.id)
+    })
+    .then(() => {
+      resetQuery()
+      proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛")
+    })
+    .catch(() => {})
 }
 
 function handleCopy(row) {
-    if (editModalRef.value) {
-        editModalRef.value.handleOpen(row, false)
-    }
+  if (editModalRef.value) {
+    editModalRef.value.handleOpen(row, false)
+  }
 }
 
 function formatterLabel(list, value) {
-    let dict = list.find(item => item.enerclassid == value)
-    return dict ? dict.enerclassname : ''
+  let dict = list.find((item) => item.enerclassid == value)
+  return dict ? dict.enerclassname : ""
 }
-
-
 </script>
 
 <style scoped lang="scss">
 @import "@/assets/styles/page.scss";
-</style>
\ No newline at end of file
+</style>
diff --git a/zhitan-vue/src/views/index.vue b/zhitan-vue/src/views/index.vue
index 2d94da3..8c988a0 100644
--- a/zhitan-vue/src/views/index.vue
+++ b/zhitan-vue/src/views/index.vue
@@ -1,27 +1,13 @@
 <template>
-  <div class="page">
-    <CardHeader
-      :showBtn="true"
-      :active="'0'"
-      :period="period"
-      @handleClick="handleTimeType"
-    >
+  <div class="page" style="padding-left: 8px; padding-top: 8px">
+    <CardHeader :showBtn="true" :active="'0'" :period="period" @handleClick="handleTimeType">
       <span>
         鍏ㄥ巶鑳借�楃粺璁�
-        <el-button @click="dialogVisible = true" v-if="list.length > 1">
-          鏌ョ湅鏇村
-        </el-button>
+        <el-button @click="dialogVisible = true" v-if="list.length > 1"> 鏌ョ湅鏇村 </el-button>
       </span>
     </CardHeader>
-    <template
-      v-for="(row, rowIndex) in list"
-      :key="rowIndex"
-      v-loading="loading02"
-    >
-      <div
-        class="card-list"
-        v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0"
-      >
+    <template v-for="(row, rowIndex) in list" :key="rowIndex" v-loading="loading02">
+      <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0">
         <template v-for="(item, index) in row" :key="index">
           <div
             class="card-list-item"
@@ -30,10 +16,7 @@
             }"
           >
             <div class="item-top">
-              <div
-                class="top-icon"
-                :style="{ backgroundImage: 'url(' + bgList[index].icon + ')' }"
-              />
+              <div class="top-icon" :style="{ backgroundImage: 'url(' + bgList[index].icon + ')' }" />
               <div class="top-right">
                 <div class="right-name">
                   {{ item.energyName }}
@@ -48,11 +31,7 @@
               <div class="bottom-left">
                 <span>
                   鍚屾瘮: {{ Math.abs(item.tongbi) }}
-                  <el-icon
-                    :color="
-                      item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
-                    "
-                  >
+                  <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''">
                     <Top v-if="item.tongbi > 0" />
                     <Bottom v-if="item.tongbi < 0" />
                   </el-icon>
@@ -61,11 +40,7 @@
               <div class="bottom-right">
                 <span
                   >鐜瘮: {{ Math.abs(item.huanbi) }}
-                  <el-icon
-                    :color="
-                      item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
-                    "
-                  >
+                  <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''">
                     <Top v-if="item.huanbi > 0" />
                     <Bottom v-if="item.huanbi < 0" />
                   </el-icon>
@@ -75,23 +50,11 @@
           </div>
         </template>
       </div>
-      <div
-        class="card-list"
-        v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0"
-      >
-        <template
-          v-for="(item, index) in row"
-          :key="index"
-          v-show="rowIndex == 0"
-        >
-          <div
-            class="card-list-item"
-          >
+      <div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0">
+        <template v-for="(item, index) in row" :key="index" v-show="rowIndex == 0">
+          <div class="card-list-item">
             <div class="item-top">
-              <div
-                class="top-icon"
-                :style="{ backgroundImage: 'url(' + bgList[index].icon2 + ')' }"
-              />
+              <div class="top-icon" :style="{ backgroundImage: 'url(' + bgList[index].icon2 + ')' }" />
               <div class="top-right">
                 <div class="right-name">
                   {{ item.energyName }}
@@ -106,11 +69,7 @@
               <div class="bottom-left">
                 <span>
                   鍚屾瘮: {{ Math.abs(item.tongbi) }}
-                  <el-icon
-                    :color="
-                      item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
-                    "
-                  >
+                  <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''">
                     <Top v-if="item.tongbi > 0" />
                     <Bottom v-if="item.tongbi < 0" />
                   </el-icon>
@@ -119,11 +78,7 @@
               <div class="bottom-right">
                 <span
                   >鐜瘮: {{ Math.abs(item.huanbi) }}
-                  <el-icon
-                    :color="
-                      item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
-                    "
-                  >
+                  <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''">
                     <Top v-if="item.huanbi > 0" />
                     <Bottom v-if="item.huanbi < 0" />
                   </el-icon>
@@ -140,17 +95,13 @@
       <el-row :gutter="9" style="margin-bottom: 27px">
         <el-col :span="12">
           <el-card>
-            <CardHeader :period="period" @handleClick="handleTimeType">
-              鑳借�楄秼鍔�
-            </CardHeader>
+            <CardHeader :period="period" @handleClick="handleTimeType"> 鑳借�楄秼鍔� </CardHeader>
             <div id="Chart1" class="chart" v-loading="loading1" />
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card>
-            <CardHeader :period="period" @handleClick="handleTimeType">
-              鍏ㄥ巶鑳借�楀崰姣�
-            </CardHeader>
+            <CardHeader :period="period" @handleClick="handleTimeType"> 鍏ㄥ巶鑳借�楀崰姣� </CardHeader>
             <div id="Chart2" class="chart" v-loading="loading02" />
           </el-card>
         </el-col>
@@ -158,13 +109,8 @@
       <el-row :gutter="9">
         <el-col :span="12">
           <el-card>
-            <CardHeader
-              :showBtn="true"
-              :period="period"
-              :active="'3'"
-              @handleClick="handleTimeType"
-            >
-              鍘傚尯鑳借�楁帓鍚峊OP{{ listEnergyConsumptionRankingLength }}
+            <CardHeader :showBtn="true" :period="period" :active="'3'" @handleClick="handleTimeType">
+              鍘傚尯鑳借�楁帓鍚峊OP{{ listEnergyConsumptionRankingLength || "" }}
             </CardHeader>
             <div class="top-header">
               <div class="header-left">
@@ -173,22 +119,12 @@
               </div>
               <div class="header-right">鑳借�楅噺(tce)</div>
             </div>
-            <div
-              id="Chart3"
-              class="chart"
-              v-loading="loading3"
-              style="height: 254px"
-            />
+            <div id="Chart3" class="chart" v-loading="loading3" style="height: 254px" />
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card>
-            <CardHeader
-              :showBtn="true"
-              :period="period"
-              :active="'4'"
-              @handleClick="handleTimeType"
-            >
+            <CardHeader :showBtn="true" :period="period" :active="'4'" @handleClick="handleTimeType">
               灏栧嘲骞宠胺鍗犳瘮
             </CardHeader>
             <div id="Chart4" class="chart" v-loading="loading4" />
@@ -196,7 +132,7 @@
         </el-col>
       </el-row>
     </div>
-    <el-dialog v-model="dialogVisible" title="鏌ョ湅鍏ㄥ巶鑳借�楃粺璁�" width="80%" v-if='dialogVisible'>
+    <el-dialog v-model="dialogVisible" title="鏌ョ湅鍏ㄥ巶鑳借�楃粺璁�" width="80%" v-if="dialogVisible">
       <template v-for="(row, rowIndex) in list" :key="rowIndex">
         <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark'">
           <template v-for="(item, index) in row" :key="index">
@@ -227,11 +163,7 @@
                 <div class="bottom-left">
                   <span>
                     鍚屾瘮: {{ Math.abs(item.tongbi) }}
-                    <el-icon
-                      :color="
-                        item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
-                      "
-                    >
+                    <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''">
                       <Top v-if="item.tongbi > 0" />
                       <Bottom v-if="item.tongbi < 0" />
                     </el-icon>
@@ -240,11 +172,7 @@
                 <div class="bottom-right">
                   <span
                     >鐜瘮: {{ Math.abs(item.huanbi) }}
-                    <el-icon
-                      :color="
-                        item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
-                      "
-                    >
+                    <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''">
                       <Top v-if="item.huanbi > 0" />
                       <Bottom v-if="item.huanbi < 0" />
                     </el-icon>
@@ -255,14 +183,8 @@
           </template>
         </div>
         <div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark'">
-          <template
-            v-for="(item, index) in row"
-            :key="index"
-            v-show="rowIndex == 0"
-          >
-            <div
-              class="card-list-item"
-            >
+          <template v-for="(item, index) in row" :key="index" v-show="rowIndex == 0">
+            <div class="card-list-item">
               <div class="item-top">
                 <div
                   class="top-icon"
@@ -284,11 +206,7 @@
                 <div class="bottom-left">
                   <span>
                     鍚屾瘮: {{ Math.abs(item.tongbi) }}
-                    <el-icon
-                      :color="
-                        item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
-                      "
-                    >
+                    <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''">
                       <Top v-if="item.tongbi > 0" />
                       <Bottom v-if="item.tongbi < 0" />
                     </el-icon>
@@ -297,11 +215,7 @@
                 <div class="bottom-right">
                   <span
                     >鐜瘮: {{ Math.abs(item.huanbi) }}
-                    <el-icon
-                      :color="
-                        item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
-                      "
-                    >
+                    <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''">
                       <Top v-if="item.huanbi > 0" />
                       <Bottom v-if="item.huanbi < 0" />
                     </el-icon>
@@ -317,43 +231,43 @@
   </div>
 </template>
 <script setup name="Index">
-import * as echarts from "echarts";
-import CardHeader from "@/components/CardHeader/CardHeader.vue";
+import * as echarts from "echarts"
+import CardHeader from "@/components/CardHeader/CardHeader.vue"
 import {
   listEnergyConsumptionSummation,
   listEnergyConsumptionTrend,
   listEnergyConsumptionRanking,
   listPeakValley,
-} from "@/api/home";
-const { proxy } = getCurrentInstance();
-const { period } = proxy.useDict("period");
-import useSettingsStore from "@/store/modules/settings";
-const settingsStore = useSettingsStore();
+} from "@/api/home"
+const { proxy } = getCurrentInstance()
+const { period } = proxy.useDict("period")
+import useSettingsStore from "@/store/modules/settings"
+const settingsStore = useSettingsStore()
 watch(
   () => settingsStore.sideTheme,
   (val) => {
-    getListEnergyConsumptionSummation();
-    getListEnergyConsumptionTrend();
-    getListEnergyConsumptionRanking();
-    getListPeakValley();
+    getListEnergyConsumptionSummation()
+    getListEnergyConsumptionTrend()
+    getListEnergyConsumptionRanking()
+    getListPeakValley()
   }
-);
-import index_card_1 from "@/assets/images/home/index-card-1.png";
-import index_card_2 from "@/assets/images/home/index-card-2.png";
-import index_card_3 from "@/assets/images/home/index-card-3.png";
-import index_card_4 from "@/assets/images/home/index-card-4.png";
-import index_card_5 from "@/assets/images/home/index-card-5.png";
-import card_icon_1 from "@/assets/images/home/card-icon-1.png";
-import card_icon_2 from "@/assets/images/home/card-icon-2.png";
-import card_icon_3 from "@/assets/images/home/card-icon-3.png";
-import card_icon_4 from "@/assets/images/home/card-icon-4.png";
-import card_icon_5 from "@/assets/images/home/card-icon-5.png";
-import card_icon2_1 from "@/assets/images/home/card-icon2-1.png";
-import card_icon2_2 from "@/assets/images/home/card-icon2-2.png";
-import card_icon2_3 from "@/assets/images/home/card-icon2-3.png";
-import card_icon2_4 from "@/assets/images/home/card-icon2-4.png";
-import card_icon2_5 from "@/assets/images/home/card-icon2-5.png";
-import { fa } from "element-plus/es/locales.mjs";
+)
+import index_card_1 from "@/assets/images/home/index-card-1.png"
+import index_card_2 from "@/assets/images/home/index-card-2.png"
+import index_card_3 from "@/assets/images/home/index-card-3.png"
+import index_card_4 from "@/assets/images/home/index-card-4.png"
+import index_card_5 from "@/assets/images/home/index-card-5.png"
+import card_icon_1 from "@/assets/images/home/card-icon-1.png"
+import card_icon_2 from "@/assets/images/home/card-icon-2.png"
+import card_icon_3 from "@/assets/images/home/card-icon-3.png"
+import card_icon_4 from "@/assets/images/home/card-icon-4.png"
+import card_icon_5 from "@/assets/images/home/card-icon-5.png"
+import card_icon2_1 from "@/assets/images/home/card-icon2-1.png"
+import card_icon2_2 from "@/assets/images/home/card-icon2-2.png"
+import card_icon2_3 from "@/assets/images/home/card-icon2-3.png"
+import card_icon2_4 from "@/assets/images/home/card-icon2-4.png"
+import card_icon2_5 from "@/assets/images/home/card-icon2-5.png"
+import { fa } from "element-plus/es/locales.mjs"
 const bgList = ref([
   {
     bg: index_card_1,
@@ -380,14 +294,14 @@
     icon: card_icon_5,
     icon2: card_icon2_5,
   },
-]);
-const list = ref([[{}, {}, {}, {}, {}]]);
-const listEnergyConsumptionRankingLength = ref(0);
-const dialogVisible = ref(false);
-const loading02 = ref(false);
-const loading1 = ref(false);
-const loading3 = ref(false);
-const loading4 = ref(false);
+])
+const list = ref([[{}, {}, {}, {}, {}]])
+const listEnergyConsumptionRankingLength = ref(0)
+const dialogVisible = ref(false)
+const loading02 = ref(false)
+const loading1 = ref(false)
+const loading3 = ref(false)
+const loading4 = ref(false)
 const data = reactive({
   queryParams: {
     nodeId: null,
@@ -395,54 +309,54 @@
     dataTime: null,
     nodeName: null,
   },
-});
-const { queryParams } = toRefs(data);
+})
+const { queryParams } = toRefs(data)
 function handleTimeType(item, type) {
-  queryParams.value.timeType = item;
-  queryParams.value.type = type;
-  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
+  queryParams.value.timeType = item
+  queryParams.value.type = type
+  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
   if (type == 0) {
-    getListEnergyConsumptionSummation();
-    getListEnergyConsumptionTrend();
+    getListEnergyConsumptionSummation()
+    getListEnergyConsumptionTrend()
   } else if (type == 3) {
-    getListEnergyConsumptionRanking();
+    getListEnergyConsumptionRanking()
   } else if (type == 4) {
-    getListPeakValley();
+    getListPeakValley()
   }
 }
-let myChart1 = null;
-let myChart2 = null;
-let myChart3 = null;
-let myChart4 = null;
+let myChart1 = null
+let myChart2 = null
+let myChart3 = null
+let myChart4 = null
 onMounted(() => {
-  myChart1 = echarts.init(document.getElementById("Chart1"));
-  myChart2 = echarts.init(document.getElementById("Chart2"));
-  myChart3 = echarts.init(document.getElementById("Chart3"));
-  myChart4 = echarts.init(document.getElementById("Chart4"));
-});
+  myChart1 = echarts.init(document.getElementById("Chart1"))
+  myChart2 = echarts.init(document.getElementById("Chart2"))
+  myChart3 = echarts.init(document.getElementById("Chart3"))
+  myChart4 = echarts.init(document.getElementById("Chart4"))
+})
 // 棣栭〉-鍏ㄥ巶鑳借�楃粺璁�/鍏ㄥ巶鑳借�楀崰姣�-鍒楄〃
 function getListEnergyConsumptionSummation() {
-  loading02.value = true;
-  list.value = [];
+  loading02.value = true
+  list.value = []
   listEnergyConsumptionSummation(
     proxy.addDateRange({
       ...queryParams.value,
     })
   ).then((res) => {
-    loading02.value = false;
+    loading02.value = false
     if (!!res.code && res.code == 200) {
-      let total = 0;
-      let seriesData = [];
+      let total = 0
+      let seriesData = []
       if (!!res.data && res.data.length > 0) {
         res.data.map((item, index) => {
-          total += Number(item.tonCount);
-          item.name = item.energyName;
-          item.value = Number(item.tonCount).toFixed(2);
+          total += Number(item.tonCount)
+          item.name = item.energyName
+          item.value = Number(item.tonCount).toFixed(2)
           if (index % 5 === 0) {
-            list.value.push(res.data.slice(index, index + 5));
+            list.value.push(res.data.slice(index, index + 5))
           }
-        });
-        seriesData = res.data;
+        })
+        seriesData = res.data
       }
       setTimeout(() => {
         myChart2.setOption({
@@ -471,40 +385,30 @@
               verticalAlign: "middle",
               rich: {
                 name: {
-                  color:
-                    settingsStore.sideTheme == "theme-dark"
-                      ? "#FFFFFF"
-                      : "#222222",
+                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                   fontSize: 14,
                 },
                 value: {
-                  color:
-                    settingsStore.sideTheme == "theme-dark"
-                      ? "#FFFFFF"
-                      : "#222222",
+                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                   fontSize: 14,
                 },
                 rate: {
-                  color:
-                    settingsStore.sideTheme == "theme-dark"
-                      ? "#FFFFFF"
-                      : "#222222",
+                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                   fontSize: 14,
                 },
               },
             },
             data: seriesData,
             formatter: (name) => {
-              let target, percent, energyUnit;
+              let target, percent, energyUnit
               for (let i = 0; i < seriesData.length; i++) {
                 if (seriesData[i].name === name) {
-                  target = seriesData[i].value;
-                  energyUnit = seriesData[i].energyUnit;
-                  percent =
-                    total != 0 ? ((target / total) * 100).toFixed(2) : 0;
+                  target = seriesData[i].value
+                  energyUnit = seriesData[i].energyUnit
+                  percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
                 }
               }
-              return `{name|${name}(${energyUnit})  }{value| ${target}} {rate| ${percent}%}`;
+              return `{name|${name}(${energyUnit})  }{value| ${target}} {rate| ${percent}%}`
             },
           },
           series: [
@@ -516,8 +420,7 @@
               label: {
                 show: false,
                 fontSize: 11,
-                color:
-                  settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
               },
               labelLine: {
                 show: false,
@@ -526,44 +429,40 @@
               data: seriesData,
             },
           ],
-        });
-      }, 100);
+        })
+      }, 100)
       window.addEventListener(
         "resize",
         () => {
-          myChart2.resize();
+          myChart2.resize()
         },
         { passive: true }
-      );
+      )
     }
-  });
+  })
 }
 // 棣栭〉-鍏ㄥ巶鑳借�楄秼鍔�-鍒楄〃
 function getListEnergyConsumptionTrend() {
-  loading1.value = true;
+  loading1.value = true
   listEnergyConsumptionTrend(
     proxy.addDateRange({
       ...queryParams.value,
     })
   ).then((res) => {
-    loading1.value = false;
+    loading1.value = false
     if (!!res.code && res.code == 200) {
-      let xdata = [];
-      let series = [];
+      let xdata = []
+      let series = []
       if (!!res.data.xdata) {
         res.data.xdata.map((item) => {
           xdata.push(
             proxy
               .dayjs(item)
               .format(
-                queryParams.value.timeType == "YEAR"
-                  ? "MM鏈�"
-                  : queryParams.value.timeType == "MONTH"
-                  ? "DD鏃�"
-                  : "HH鏃�"
+                queryParams.value.timeType == "YEAR" ? "MM鏈�" : queryParams.value.timeType == "MONTH" ? "DD鏃�" : "HH鏃�"
               )
-          );
-        });
+          )
+        })
       }
       if (!!res.data.legend && !!res.data.ydata) {
         series = res.data.legend.map((item, index) => {
@@ -573,8 +472,8 @@
             stack: "total",
             barWidth: "16",
             data: !!res.data.ydata ? res.data.ydata[index] : [],
-          };
-        });
+          }
+        })
       }
       setTimeout(() => {
         myChart1.setOption({
@@ -590,8 +489,7 @@
             itemWidth: 14,
             itemHeight: 10,
             textStyle: {
-              color:
-                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
             },
           },
           grid: {
@@ -609,10 +507,7 @@
             axisLine: {
               show: true,
               lineStyle: {
-                color:
-                  settingsStore.sideTheme == "theme-dark"
-                    ? "#FFFFFF"
-                    : "#222222",
+                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
               },
             },
             axisTick: {
@@ -625,8 +520,7 @@
               show: false,
             },
             axisLabel: {
-              color:
-                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
               fontSize: 14,
               padding: [5, 0, 0, 0],
               //   formatter: '{value} ml'
@@ -638,10 +532,7 @@
               type: "value",
               name: "tce",
               nameTextStyle: {
-                color:
-                  settingsStore.sideTheme == "theme-dark"
-                    ? "#FFFFFF"
-                    : "#222222",
+                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                 fontSize: 14,
                 padding: [0, 0, 5, 0],
               },
@@ -652,10 +543,7 @@
                 show: true,
                 lineStyle: {
                   type: "dashed",
-                  color:
-                    settingsStore.sideTheme == "theme-dark"
-                      ? "#FFFFFF"
-                      : "#222222",
+                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                 },
               },
               axisTick: {
@@ -665,52 +553,47 @@
                 show: false,
               },
               axisLabel: {
-                color:
-                  settingsStore.sideTheme == "theme-dark"
-                    ? "#FFFFFF"
-                    : "#222222",
+                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                 fontSize: 14,
               },
             },
           ],
           series,
-        });
-      }, 100);
+        })
+      }, 100)
     }
-  });
+  })
   window.addEventListener(
     "resize",
     () => {
-      myChart1.resize();
+      myChart1.resize()
     },
     { passive: true }
-  );
+  )
 }
 // 棣栭〉-绉戝鑳借�楁帓鍚峊OP-鍒楄〃
 function getListEnergyConsumptionRanking() {
-  loading3.value = true;
+  loading3.value = true
   let opt = {
     index: 0,
-  };
+  }
   listEnergyConsumptionRanking(
     proxy.addDateRange({
       ...queryParams.value,
     })
   ).then((res) => {
-    loading3.value = false;
-    let nodeName = [];
-    let energyConsumption = [];
-    let maxenergyConsumption = [];
-    
+    loading3.value = false
+    let nodeName = []
+    let energyConsumption = []
+    let maxenergyConsumption = []
+
     if (!!res.data) {
       res.data.map((item, index) => {
-        nodeName.push(item.nodeName);
-        energyConsumption.push(
-          !!item.energyConsumption ? item.energyConsumption : 0
-        );
-        maxenergyConsumption[index] = res.data[0].energyConsumption;
-      });
-      listEnergyConsumptionRankingLength.value = res.data.length;
+        nodeName.push(item.nodeName)
+        energyConsumption.push(!!item.energyConsumption ? item.energyConsumption : 0)
+        maxenergyConsumption[index] = res.data[0].energyConsumption
+      })
+      listEnergyConsumptionRankingLength.value = res.data.length
     }
     setTimeout(() => {
       myChart3.setOption({
@@ -727,7 +610,7 @@
             type: "none",
           },
           formatter: function (params) {
-            return params[0].name + " : " + params[0].value;
+            return params[0].name + " : " + params[0].value
           },
         },
         xAxis: {
@@ -749,38 +632,17 @@
             },
             axisLabel: {
               interval: 0,
-              color:
-                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
               fontSize: 14,
               formatter: function (value, index) {
                 if (index == 0) {
-                  return (
-                    "{idx0|" +
-                    (1 + index + opt.index) +
-                    "}{title|" +
-                    value +
-                    "}"
-                  );
+                  return "{idx0|" + (1 + index + opt.index) + "}{title|" + value + "}"
                 } else if (index == 1) {
-                  return (
-                    "{idx1|" +
-                    (1 + index + opt.index) +
-                    "}{title|" +
-                    value +
-                    "}"
-                  );
+                  return "{idx1|" + (1 + index + opt.index) + "}{title|" + value + "}"
                 } else if (index == 2) {
-                  return (
-                    "{idx2|" +
-                    (1 + index + opt.index) +
-                    "}{title|" +
-                    value +
-                    "}"
-                  );
+                  return "{idx2|" + (1 + index + opt.index) + "}{title|" + value + "}"
                 } else {
-                  return (
-                    "{idx|" + (1 + index + opt.index) + "}{title|" + value + "}"
-                  );
+                  return "{idx|" + (1 + index + opt.index) + "}{title|" + value + "}"
                 }
               },
               rich: {
@@ -822,8 +684,7 @@
             axisLine: "none",
             show: true,
             axisLabel: {
-              color:
-                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
               fontSize: "12",
             },
             data: energyConsumption,
@@ -863,48 +724,41 @@
             data: energyConsumption,
           },
         ],
-      });
-    }, 100);
+      })
+    }, 100)
     window.addEventListener(
       "resize",
       () => {
-        myChart3.resize();
+        myChart3.resize()
       },
       { passive: true }
-    );
-  });
+    )
+  })
 }
 // 棣栭〉-灏栧嘲骞宠胺鍗犳瘮-鍒楄〃
 function getListPeakValley() {
-  loading4.value = true;
+  loading4.value = true
   listPeakValley(
     proxy.addDateRange({
       ...queryParams.value,
     })
   ).then((res) => {
-    loading4.value = false;
+    loading4.value = false
     if (!!res.code && res.code == 200) {
-      let total = 0;
-      let seriesData = [];
+      let total = 0
+      let seriesData = []
       if (!!res.data && res.data.length > 0) {
         res.data.map((item, index) => {
-          total += Number(item.count);
+          total += Number(item.count)
           seriesData.push({
             name: item.timeName,
             value: Number(item.count).toFixed(2),
-          });
-        });
+          })
+        })
       }
       setTimeout(() => {
         myChart4.setOption({
-          color: [
-            "#8B33FF",
-            "#00DBFF",
-            "#002ADB",
-            "#5C92F7",
-            "#76D2F1",
-            "#8FADF9",
-          ],
+          color: ["#8B33FF", "#00DBFF", "#002ADB", "#5C92F7", "#76D2F1", "#8FADF9"],
           grid: {
             top: "20%",
             left: "15%",
@@ -929,39 +783,29 @@
               verticalAlign: "middle",
               rich: {
                 name: {
-                  color:
-                    settingsStore.sideTheme == "theme-dark"
-                      ? "#FFFFFF"
-                      : "#222222",
+                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                   fontSize: 14,
                 },
                 value: {
-                  color:
-                    settingsStore.sideTheme == "theme-dark"
-                      ? "#FFFFFF"
-                      : "#222222",
+                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                   fontSize: 14,
                 },
                 rate: {
-                  color:
-                    settingsStore.sideTheme == "theme-dark"
-                      ? "#FFFFFF"
-                      : "#222222",
+                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                   fontSize: 14,
                 },
               },
             },
             data: seriesData,
             formatter: (name) => {
-              let target, percent;
+              let target, percent
               for (let i = 0; i < seriesData.length; i++) {
                 if (seriesData[i].name === name) {
-                  target = seriesData[i].value;
-                  percent =
-                    total != 0 ? ((target / total) * 100).toFixed(2) : 0;
+                  target = seriesData[i].value
+                  percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
                 }
               }
-              return `{name|${name}(kWh)  }{value| ${target}} {rate| ${percent}%}`;
+              return `{name|${name}(kWh)  }{value| ${target}} {rate| ${percent}%}`
             },
           },
           series: [
@@ -973,8 +817,7 @@
               avoidLabelOverlap: false,
               label: {
                 fontSize: 11,
-                color:
-                  settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
               },
               labelLine: {
                 show: true,
@@ -999,17 +842,17 @@
               data: seriesData,
             },
           ],
-        });
-      }, 100);
+        })
+      }, 100)
       window.addEventListener(
         "resize",
         () => {
-          myChart4.resize();
+          myChart4.resize()
         },
         { passive: true }
-      );
+      )
     }
-  });
+  })
 }
 </script>
 <style scoped lang="scss">
diff --git a/zhitan-vue/src/views/login.vue b/zhitan-vue/src/views/login.vue
index 7308664..b58823d 100644
--- a/zhitan-vue/src/views/login.vue
+++ b/zhitan-vue/src/views/login.vue
@@ -76,6 +76,7 @@
 const router = useRouter()
 const { proxy } = getCurrentInstance()
 const systemInfo = JSON.parse(Cookies.get("SystemInfo") || "{}")
+console.log(systemInfo)
 
 const loginForm = ref({
   username: "admin",
diff --git a/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue b/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue
index 0b2d98f..f5f8e00 100644
--- a/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue
+++ b/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue
@@ -9,41 +9,53 @@
           <el-input v-model="queryParams.name" placeholder="鍚嶇О" maxlength="30" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleQuery">
-            鎼滅储
-          </el-button>
+          <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button>
           <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
         </el-form-item>
       </el-form>
     </div>
-    <div class="table-box">
-      <div class="mt20 mb20">
+    <div class="table-bg-style">
+      <div class="ml20 mb20 theme-dark-mt20">
         <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button>
       </div>
-      <el-table v-loading="loading" :data="energyTypeList">
-        <el-table-column label="缂栧彿" align="center" key="code" prop="code" :show-overflow-tooltip="true" />
-        <el-table-column label="鍚嶇О" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
-        <el-table-column label="璐熻矗浜�" align="center" key="principals" prop="principals" :show-overflow-tooltip="true" />
-        <el-table-column label="璐熻矗浜虹數璇�" align="center" key="principalsTel" prop="principalsTel"
-          :show-overflow-tooltip="true" />
-        <el-table-column label="澶囨敞" align="center" key="remark" prop="remark" :show-overflow-tooltip="true" />
-        <el-table-column label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-tooltip content="缂栬緫" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">
-                缂栬緫
-              </el-button>
-            </el-tooltip>
-            <el-tooltip content="鍒犻櫎" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">
-                鍒犻櫎
-              </el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <div class="table-box">
+        <el-table v-loading="loading" :data="energyTypeList">
+          <el-table-column label="缂栧彿" align="center" key="code" prop="code" :show-overflow-tooltip="true" />
+          <el-table-column label="鍚嶇О" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
+          <el-table-column
+            label="璐熻矗浜�"
+            align="center"
+            key="principals"
+            prop="principals"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="璐熻矗浜虹數璇�"
+            align="center"
+            key="principalsTel"
+            prop="principalsTel"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="澶囨敞" align="center" key="remark" prop="remark" :show-overflow-tooltip="true" />
+          <el-table-column label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-tooltip content="缂栬緫" placement="top">
+                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> 缂栬緫 </el-button>
+              </el-tooltip>
+              <el-tooltip content="鍒犻櫎" placement="top">
+                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 鍒犻櫎 </el-button>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="queryParams.total > 0"
+          :total="queryParams.total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
     </div>
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
       <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
@@ -93,12 +105,12 @@
   getDistributionRoom,
   updateDistributionRoom,
   delDistributionRoom,
-} from "@/api/measuringinstruments/distributionroom";
-const { proxy } = getCurrentInstance();
-const energyTypeList = ref([]);
-const open = ref(false);
-const loading = ref(false);
-const title = ref("");
+} from "@/api/measuringinstruments/distributionroom"
+const { proxy } = getCurrentInstance()
+const energyTypeList = ref([])
+const open = ref(false)
+const loading = ref(false)
+const title = ref("")
 const data = reactive({
   form: {},
   queryParams: {
@@ -106,61 +118,61 @@
     pageSize: 10,
     total: 0,
     name: null,
-    code: null
+    code: null,
   },
   rules: {
-    name: [
-      { required: true, message: "鍚嶇О涓嶈兘涓虹┖", trigger: "blur" },
-    ],
+    name: [{ required: true, message: "鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }],
     code: [
       { required: true, message: "缂栧彿涓嶈兘涓虹┖", trigger: "blur" },
       // { pattern: /^[a-z0-9]*$/, message: "缂栧彿蹇呴』涓烘暟瀛�/灏忓啓瀛楁瘝" },
     ],
-    principalsTel: [{ required: false, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }]
+    principalsTel: [
+      { required: false, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" },
+    ],
   },
-});
-const { queryParams, form, rules } = toRefs(data);
-getList();
+})
+const { queryParams, form, rules } = toRefs(data)
+getList()
 // 璁¢噺鍣ㄥ叿妗f-閰嶇數瀹ょ鐞�-鍒楄〃
 function getList() {
-  loading.value = true;
+  loading.value = true
   listDistributionRoom(proxy.addDateRange(queryParams.value)).then((res) => {
-    loading.value = false;
-    energyTypeList.value = res.data.records;
-    queryParams.value.total = res.data.total;
-  });
+    loading.value = false
+    energyTypeList.value = res.data.records
+    queryParams.value.total = res.data.total
+  })
 }
 // 璁¢噺鍣ㄥ叿妗f-閰嶇數瀹ょ鐞�-鎼滅储
 function handleQuery() {
-  queryParams.value.pageNo = 1;
-  getList();
+  queryParams.value.pageNo = 1
+  getList()
 }
 // 璁¢噺鍣ㄥ叿妗f-閰嶇數瀹ょ鐞�-閲嶇疆
 function resetQuery() {
-  proxy.resetForm("queryRef");
+  proxy.resetForm("queryRef")
   queryParams.value = {
     pageNo: 1,
     pageSize: 10,
     total: 0,
     name: null,
-    code: null
-  };
-  getList();
+    code: null,
+  }
+  getList()
 }
 // 璁¢噺鍣ㄥ叿妗f-閰嶇數瀹ょ鐞�-鏂板
 function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "鏂板閰嶇數瀹�";
+  reset()
+  open.value = true
+  title.value = "鏂板閰嶇數瀹�"
 }
 // 璁¢噺鍣ㄥ叿妗f-閰嶇數瀹ょ鐞�-缂栬緫
 function handleUpdate(row) {
-  reset();
+  reset()
   getDistributionRoom({ id: row.id }).then((response) => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "缂栬緫閰嶇數瀹�";
-  });
+    form.value = response.data
+    open.value = true
+    title.value = "缂栬緫閰嶇數瀹�"
+  })
 }
 // 璁¢噺鍣ㄥ叿妗f-閰嶇數瀹ょ鐞�-鏂板/缂栬緫-淇濆瓨
 function submitForm() {
@@ -168,24 +180,24 @@
     if (valid) {
       if (form.value.id != undefined) {
         updateDistributionRoom(form.value).then((response) => {
-          proxy.$modal.msgSuccess("淇敼鎴愬姛");
-          open.value = false;
-          getList();
-        });
+          proxy.$modal.msgSuccess("淇敼鎴愬姛")
+          open.value = false
+          getList()
+        })
       } else {
         addDistributionRoom(form.value).then((response) => {
-          proxy.$modal.msgSuccess("鏂板鎴愬姛");
-          open.value = false;
-          getList();
-        });
+          proxy.$modal.msgSuccess("鏂板鎴愬姛")
+          open.value = false
+          getList()
+        })
       }
     }
-  });
+  })
 }
 // 璁¢噺鍣ㄥ叿妗f-閰嶇數瀹ょ鐞�-鏂板/缂栬緫-鍙栨秷
 function cancel() {
-  open.value = false;
-  reset();
+  open.value = false
+  reset()
 }
 // 璁¢噺鍣ㄥ叿妗f-閰嶇數瀹ょ鐞�-鏂板/缂栬緫-琛ㄥ崟閲嶇疆
 function reset() {
@@ -193,21 +205,21 @@
     name: null,
     code: null,
     remark: null,
-  };
-  proxy.resetForm("formRef");
+  }
+  proxy.resetForm("formRef")
 }
 // 璁¢噺鍣ㄥ叿妗f-閰嶇數瀹ょ鐞�-鍒犻櫎
 function handleDelete(row) {
   proxy.$modal
     .confirm('鏄惁纭鍒犻櫎閰嶇數瀹ゅ悕绉颁负"' + row.name + '"鐨勬暟鎹」锛�')
     .then(function () {
-      return delDistributionRoom({ ids: row.id });
+      return delDistributionRoom({ ids: row.id })
     })
     .then(() => {
-      getList();
-      proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+      getList()
+      proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛")
     })
-    .catch(() => { });
+    .catch(() => {})
 }
 </script>
 <style scoped lang="scss">
diff --git a/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue b/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue
index fced560..c99bef1 100644
--- a/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue
+++ b/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue
@@ -1,162 +1,176 @@
 <template>
-    <div class="page">
-        <div class="form-card">
-            <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
-                <el-form-item label="缂栫爜" prop="code">
-                    <el-input v-model="form.code" placeholder="璇疯緭鍏ョ紪鐮�" />
-                </el-form-item>
-                <el-form-item label="鍣ㄥ叿鍚嶇О" prop="meterName">
-                    <el-input v-model="form.meterName" placeholder="璇疯緭鍏ュ櫒鍏峰悕绉�" />
-                </el-form-item>
-                <el-form-item label="绉嶇被" prop="meterType">
-                    <el-select v-model="form.meterType" placeholder="璇烽�夋嫨绉嶇被" style="width: 170px;">
-                        <el-option :label="item.label" :value="item.value" v-for="item in sys_device_type"
-                            :key="item.value" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
-                    <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
-        <div class="table-box">
-            <div class=" mt20 mb20">
-                <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button>
-            </div>
-            <el-table :data="tableData" v-loading="loading">
-                <el-table-column prop="code" label="缂栫爜" show-overflow-tooltip align="center" />
-                <el-table-column prop="meterName" label="鍣ㄥ叿鍚嶇О" show-overflow-tooltip align="center" />
-                <el-table-column prop="meterType" label="绉嶇被" show-overflow-tooltip align="center"
-                    :formatter="(row, column) => proxy.selectDictLabel(sys_device_type, row.meterType)" />
-                <el-table-column prop="energyType" label="鑳芥簮绫诲瀷" show-overflow-tooltip align="center"
-                    :formatter="energyTypeFormatter" />
-                <el-table-column prop="modelNumber" label="瑙勬牸鍨嬪彿" show-overflow-tooltip align="center" />
-                <el-table-column prop="measureRange" label="娴嬮噺鑼冨洿" show-overflow-tooltip align="center" />
-                <el-table-column prop="manufacturer" label="鐢熶骇鍘傚晢" show-overflow-tooltip align="center" />
-                <el-table-column prop="installLocationName" label="閰嶇數瀹�" show-overflow-tooltip align="center" />
-                <el-table-column prop="meterStatus" label="鐘舵��" width="90" show-overflow-tooltip align="center"
-                    :formatter="(row, column) => proxy.selectDictLabel(meter_status, row.meterStatus)" />
-                <el-table-column label="鎿嶄綔" width="280" align="center">
-                    <template #default="scope">
-                        <!-- <el-button link type="primary" icon="Files" @click="handleAnnexModal(scope.row)">
+  <div class="page">
+    <div class="form-card">
+      <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
+        <el-form-item label="缂栫爜" prop="code">
+          <el-input v-model="form.code" placeholder="璇疯緭鍏ョ紪鐮�" />
+        </el-form-item>
+        <el-form-item label="鍣ㄥ叿鍚嶇О" prop="meterName">
+          <el-input v-model="form.meterName" placeholder="璇疯緭鍏ュ櫒鍏峰悕绉�" />
+        </el-form-item>
+        <el-form-item label="绉嶇被" prop="meterType">
+          <el-select v-model="form.meterType" placeholder="璇烽�夋嫨绉嶇被" style="width: 170px">
+            <el-option :label="item.label" :value="item.value" v-for="item in sys_device_type" :key="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
+          <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="table-bg-style">
+      <div class="ml20 mb20 theme-dark-mt20">
+        <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button>
+      </div>
+      <div class="table-box">
+        <el-table :data="tableData" v-loading="loading">
+          <el-table-column prop="code" label="缂栫爜" show-overflow-tooltip align="center" />
+          <el-table-column prop="meterName" label="鍣ㄥ叿鍚嶇О" show-overflow-tooltip align="center" />
+          <el-table-column
+            prop="meterType"
+            label="绉嶇被"
+            show-overflow-tooltip
+            align="center"
+            :formatter="(row, column) => proxy.selectDictLabel(sys_device_type, row.meterType)"
+          />
+          <el-table-column
+            prop="energyType"
+            label="鑳芥簮绫诲瀷"
+            show-overflow-tooltip
+            align="center"
+            :formatter="energyTypeFormatter"
+          />
+          <el-table-column prop="modelNumber" label="瑙勬牸鍨嬪彿" show-overflow-tooltip align="center" />
+          <el-table-column prop="measureRange" label="娴嬮噺鑼冨洿" show-overflow-tooltip align="center" />
+          <el-table-column prop="manufacturer" label="鐢熶骇鍘傚晢" show-overflow-tooltip align="center" />
+          <el-table-column prop="installLocationName" label="閰嶇數瀹�" show-overflow-tooltip align="center" />
+          <el-table-column
+            prop="meterStatus"
+            label="鐘舵��"
+            width="90"
+            show-overflow-tooltip
+            align="center"
+            :formatter="(row, column) => proxy.selectDictLabel(meter_status, row.meterStatus)"
+          />
+          <el-table-column label="鎿嶄綔" width="280" align="center">
+            <template #default="scope">
+              <!-- <el-button link type="primary" icon="Files" @click="handleAnnexModal(scope.row)">
                                         闄勪欢
                                     </el-button> -->
-                        <el-button link type="primary" icon="Document" @click="handleTargetModal(scope.row)">
-                            鎸囨爣
-                        </el-button>
-                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)">
-                            淇敼
-                        </el-button>
-                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
-                            鍒犻櫎
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-            v-model:limit="queryParams.pageSize" @pagination="getList" />
-        <EditModal ref="EditModalRef" :typeArray="sys_device_type" :energyTypeArr="energyTypeArr" @getList="getList" />
-        <AnnexModal ref="AnnexModalRef" />
-        <TargetModal ref="TargetModalRef" />
-
-
+              <el-button link type="primary" icon="Document" @click="handleTargetModal(scope.row)"> 鎸囨爣 </el-button>
+              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 淇敼 </el-button>
+              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 鍒犻櫎 </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
     </div>
+    <EditModal ref="EditModalRef" :typeArray="sys_device_type" :energyTypeArr="energyTypeArr" @getList="getList" />
+    <AnnexModal ref="AnnexModalRef" />
+    <TargetModal ref="TargetModalRef" />
+  </div>
 </template>
 
 <script setup name="measuring">
-import EditModal from './components/EditModal.vue'
-import AnnexModal from './components/AnnexModal.vue'
-import TargetModal from './components/TargetModal.vue'
-import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
-import { getMaintainList, delMaintain } from '@/api/measuringInstruments/measuringInstruments'
-const { proxy } = getCurrentInstance();
-const { sys_device_type } = proxy.useDict("sys_device_type");
-const { meter_status } = proxy.useDict("meter_status");
+import EditModal from "./components/EditModal.vue"
+import AnnexModal from "./components/AnnexModal.vue"
+import TargetModal from "./components/TargetModal.vue"
+import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
+import { getMaintainList, delMaintain } from "@/api/measuringInstruments/measuringInstruments"
+const { proxy } = getCurrentInstance()
+const { sys_device_type } = proxy.useDict("sys_device_type")
+const { meter_status } = proxy.useDict("meter_status")
 
 let form = ref({
-    code: '',
-    meterName: '',
-    meterType: ''
+  code: "",
+  meterName: "",
+  meterType: "",
 })
 
-
 function handleQuery() {
-    queryParams.value.pageNum = 1
-    getList()
+  queryParams.value.pageNum = 1
+  getList()
 }
 
 function resetQuery() {
-    proxy.resetForm("queryRef");
-    handleQuery();
+  proxy.resetForm("queryRef")
+  handleQuery()
 }
 
-
-let loading = ref(false);
-let total = ref(0);
+let loading = ref(false)
+let total = ref(0)
 let tableData = ref([])
 let queryParams = ref({
-    pageNum: 1,
-    pageSize: 10,
+  pageNum: 1,
+  pageSize: 10,
 })
 
 //鑾峰彇鍒楄〃
 function getList() {
-    loading.value = true
-    getMaintainList({ ...queryParams.value, ...form.value }).then(res => {
-        tableData.value = res.rows
-        total.value = res.total
-        loading.value = false
-    })
+  loading.value = true
+  getMaintainList({ ...queryParams.value, ...form.value }).then((res) => {
+    tableData.value = res.rows
+    total.value = res.total
+    loading.value = false
+  })
 }
 
 getList()
 
-let EditModalRef = ref('')
+let EditModalRef = ref("")
 function handleAdd(row) {
-    if (EditModalRef.value) {
-        EditModalRef.value.handleOpen(row)
-    }
-
+  if (EditModalRef.value) {
+    EditModalRef.value.handleOpen(row)
+  }
 }
 
 function handleDel(row) {
-    proxy.$modal.confirm('鏄惁纭鍒犻櫎鏁版嵁椤�?').then(function () {
-        return delMaintain(row.id);
-    }).then(() => {
-        getList();
-        proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-    }).catch(() => { });
+  proxy.$modal
+    .confirm("鏄惁纭鍒犻櫎鏁版嵁椤�?")
+    .then(function () {
+      return delMaintain(row.id)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛")
+    })
+    .catch(() => {})
 }
 
-let AnnexModalRef = ref('')
+let AnnexModalRef = ref("")
 
 function handleAnnexModal(row) {
-    if (AnnexModalRef.value) {
-        AnnexModalRef.value.handleOpen(row)
-    }
+  if (AnnexModalRef.value) {
+    AnnexModalRef.value.handleOpen(row)
+  }
 }
 
-let TargetModalRef = ref('')
+let TargetModalRef = ref("")
 
 function handleTargetModal(row) {
-    if (TargetModalRef.value) {
-        TargetModalRef.value.handleOpen(row)
-    }
-
+  if (TargetModalRef.value) {
+    TargetModalRef.value.handleOpen(row)
+  }
 }
 let energyTypeArr = ref([])
 function energyTypeFun() {
-    listEnergyTypeList().then((res) => {
-        energyTypeArr.value = res.data;
-    });
+  listEnergyTypeList().then((res) => {
+    energyTypeArr.value = res.data
+  })
 }
 energyTypeFun()
 
 function energyTypeFormatter(value) {
-    let dict = energyTypeArr.value.find(item => item.enersno == value.energyType)
-    return dict ? dict.enername : ''
+  let dict = energyTypeArr.value.find((item) => item.enersno == value.energyType)
+  return dict ? dict.enername : ""
 }
 </script>
 
diff --git a/zhitan-vue/src/views/powerbalance/powerbalance.vue b/zhitan-vue/src/views/powerbalance/powerbalance.vue
index d559c09..4656d80 100644
--- a/zhitan-vue/src/views/powerbalance/powerbalance.vue
+++ b/zhitan-vue/src/views/powerbalance/powerbalance.vue
@@ -8,22 +8,22 @@
         <div class="table-box">
           <div class="table-header-box">
             <div>
-              <div class="cell"> </div>
+              <div class="cell"></div>
             </div>
-            <div v-for=" (item, i) in tableHeaderData" :key="i">
+            <div v-for="(item, i) in tableHeaderData" :key="i">
               <div class="cell">{{ item }}</div>
             </div>
           </div>
 
           <div class="table-content-box" v-for="(items, i) in ListData" :key="i">
-            <div class="calc6_4 ">
-              <div style="display: flex;align-items: center; width: 100%;border: 1px solid #666;">
+            <div class="calc6_4">
+              <div style="display: flex; align-items: center; width: 100%; border: 1px solid #666">
                 <div class="calc4">
                   {{ items.jinList.jinName }}
                 </div>
                 <div class="width50">
-                  <div v-for="  (item, k) in items.jinList.list" :key="k" class="data-list-ul">
-                    <div class="width50" style="border-right: 1px solid #666;">{{ item.title }}</div>
+                  <div v-for="(item, k) in items.jinList.list" :key="k" class="data-list-ul">
+                    <div class="width50" style="border-right: 1px solid #666">{{ item.title }}</div>
                     <div class="width50">{{ item.num }}</div>
                   </div>
                 </div>
@@ -31,16 +31,19 @@
                   {{ items.jinList.total }}
                 </div>
               </div>
-              <div style="display: flex;align-items: center; width: 100%;border: 1px solid #666;">
+              <div style="display: flex; align-items: center; width: 100%; border: 1px solid #666">
                 <div class="calc4">
                   {{ items.chuList.chuName }}
                 </div>
                 <div class="width50">
-                  <div v-for="  (item, k) in items.chuList.list" :key="k"
-                    style="display: flex;align-items: center; width: 100%;" class="data-list-ul">
-                    <div class="width50" style="border-right: 1px solid #666;">{{ item.title }}</div>
+                  <div
+                    v-for="(item, k) in items.chuList.list"
+                    :key="k"
+                    style="display: flex; align-items: center; width: 100%"
+                    class="data-list-ul"
+                  >
+                    <div class="width50" style="border-right: 1px solid #666">{{ item.title }}</div>
                     <div class="width50">{{ item.num }}</div>
-
                   </div>
                 </div>
                 <div class="calc4">
@@ -48,21 +51,23 @@
                 </div>
               </div>
             </div>
-            <div class="calc6"
-              style="border: 1px solid #666;display: flex;align-items: center;justify-content: center;">
+            <div
+              class="calc6"
+              style="border: 1px solid #666; display: flex; align-items: center; justify-content: center"
+            >
               <div>
                 {{ items.cha }}
               </div>
             </div>
-            <div class="calc6"
-              style="border: 1px solid #666;display: flex;align-items: center;justify-content: center;">
+            <div
+              class="calc6"
+              style="border: 1px solid #666; display: flex; align-items: center; justify-content: center"
+            >
               <div>
                 {{ items.baifenbi }}
               </div>
-
             </div>
           </div>
-
         </div>
         <BaseCard title="鑳芥簮娴佸悜鍒嗘瀽">
           <div class="chart-box">
@@ -74,119 +79,111 @@
   </div>
 </template>
 <script setup>
-import useSettingsStore from '@/store/modules/settings'
+import useSettingsStore from "@/store/modules/settings"
 const settingsStore = useSettingsStore()
-import * as echarts from 'echarts';
-import { onMounted } from 'vue';
+import * as echarts from "echarts"
+import { onMounted } from "vue"
 /** 鑺傜偣鍗曞嚮浜嬩欢 */
-function handleNodeClick(data) {
-}
+function handleNodeClick(data) {}
 
-
-const tableHeaderData = ['绾胯矾鍚嶇О', '鑰楃數閲�', '灏忚', '宸��', '鐧惧垎姣�']
+const tableHeaderData = ["绾胯矾鍚嶇О", "鑰楃數閲�", "灏忚", "宸��", "鐧惧垎姣�"]
 const ListData = ref([
   {
     id: 1,
     jinList: {
-      jinName: '杩涚嚎',
+      jinName: "杩涚嚎",
       list: [
-        { num: 24726900, title: '1#涓诲彉' },
-        { num: 0, title: '鍐朵笁浣欑儹鍙戠數鍙嶅悜' },
-        { num: 958880, title: '鍚夐『鍏変紡1#绾�' },
-        { num: 874720, title: '鍚夐『鍏変紡2#绾�' }
+        { num: 24726900, title: "1#涓诲彉" },
+        { num: 0, title: "鍐朵笁浣欑儹鍙戠數鍙嶅悜" },
+        { num: 958880, title: "鍚夐『鍏変紡1#绾�" },
+        { num: 874720, title: "鍚夐『鍏変紡2#绾�" },
       ],
-      total: 39375820
+      total: 39375820,
     },
 
     chuList: {
-      chuName: '鍑虹嚎',
+      chuName: "鍑虹嚎",
       list: [
-        { num: 1766800, title: '鍐朵笁榧撻鏈烘埧1#绾�' },
-        { num: 1046400, title: '鍐朵笁榧撻鏈烘埧2#绾�' },
-        { num: 1790400, title: '鍐朵笁纭吀1#绾�' },
-        { num: 1385700, title: '鍐朵笁纭吀2#绾�' },
-        { num: 5058600, title: '鍐朵笁鍒舵哀1#绾�' },
-        { num: 3921600, title: '鍐朵笁鍒舵哀2#绾�' },
-        { num: 215760, title: '鐢熷寲2#绾�' },
-        { num: 0, title: '渚у惞绮剧偧1#绾�' },
-        { num: 5555000, title: '渚у惞鐔旂偧1#绾�' },
-        { num: 4786530, title: '1#35kV鐢熷寲绾�' },
-        { num: 973980, title: '2#35kV鐢熷寲绾�' },
-        { num: 7680, title: '鍚夐『鍏変紡1#绾�' },
-        { num: 5280, title: '鍚夐『鍏変紡2#绾�' }
-
+        { num: 1766800, title: "鍐朵笁榧撻鏈烘埧1#绾�" },
+        { num: 1046400, title: "鍐朵笁榧撻鏈烘埧2#绾�" },
+        { num: 1790400, title: "鍐朵笁纭吀1#绾�" },
+        { num: 1385700, title: "鍐朵笁纭吀2#绾�" },
+        { num: 5058600, title: "鍐朵笁鍒舵哀1#绾�" },
+        { num: 3921600, title: "鍐朵笁鍒舵哀2#绾�" },
+        { num: 215760, title: "鐢熷寲2#绾�" },
+        { num: 0, title: "渚у惞绮剧偧1#绾�" },
+        { num: 5555000, title: "渚у惞鐔旂偧1#绾�" },
+        { num: 4786530, title: "1#35kV鐢熷寲绾�" },
+        { num: 973980, title: "2#35kV鐢熷寲绾�" },
+        { num: 7680, title: "鍚夐『鍏変紡1#绾�" },
+        { num: 5280, title: "鍚夐『鍏変紡2#绾�" },
       ],
-      total: 39173060
+      total: 39173060,
     },
     cha: 202760,
-    baifenbi: '0.51%'
+    baifenbi: "0.51%",
+  },
+])
+
+watch(
+  () => settingsStore.sideTheme,
+  (val) => {
+    getChart()
   }
-
-]);
-
-
-
-watch(() => settingsStore.sideTheme, (val) => {
-  getChart()
-})
+)
 
 function getChart() {
-
-
-  let colors = ['#FBB4AE', '#B3CDE3', '#CCEBC5', '#DECBE4', '#5470C6'];
+  let colors = ["#FBB4AE", "#B3CDE3", "#CCEBC5", "#DECBE4", "#5470C6"]
   let mydata = [
-    { id: 1, name: '1#涓诲彉', itemStyle: { color: colors[0] }, depth: 0 },
-    { id: 2, name: '鍚夐『鍏変紡1#绾�', itemStyle: { color: colors[0] }, depth: 0 },
-    { id: 3, name: '鍚夐『鍏変紡2#绾�', itemStyle: { color: colors[0] }, depth: 0 },
-    { id: 4, name: '鍐朵笁浣欑儹鍙戠數鍙嶅悜', itemStyle: { color: colors[0] }, depth: 0 },
+    { id: 1, name: "1#涓诲彉", itemStyle: { color: colors[0] }, depth: 0 },
+    { id: 2, name: "鍚夐『鍏変紡1#绾�", itemStyle: { color: colors[0] }, depth: 0 },
+    { id: 3, name: "鍚夐『鍏変紡2#绾�", itemStyle: { color: colors[0] }, depth: 0 },
+    { id: 4, name: "鍐朵笁浣欑儹鍙戠數鍙嶅悜", itemStyle: { color: colors[0] }, depth: 0 },
 
-
-    { id: 5, name: '杩涘嚭绾�', itemStyle: { color: colors[1] }, depth: 1 },
+    { id: 5, name: "杩涘嚭绾�", itemStyle: { color: colors[1] }, depth: 1 },
     // { name: 'L2-1', itemStyle: { color: colors[1] }, depth: 1 },
     // { name: 'L2-2', itemStyle: { color: colors[1] }, depth: 1 },
     // { name: 'L2-3', itemStyle: { color: colors[1] }, depth: 1 },
-
 
     // { name: 'L3', itemStyle: { color: colors[2] }, depth: 2 },
     // { name: 'L3-1', itemStyle: { color: colors[2] }, depth: 2 },
     // { name: 'L3-2', itemStyle: { color: colors[2] }, depth: 2 },
 
-    { id: 6, name: '鍐朵笁榧撻鏈烘埧1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 7, name: '鍐朵笁榧撻鏈烘埧2#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 8, name: '鍐朵笁纭吀1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 9, name: '鍐朵笁纭吀2#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 10, name: '鍐朵笁鍒舵哀1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 11, name: '鍐朵笁鍒舵哀2#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 12, name: '鐢熷寲2#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 13, name: '渚у惞绮剧偧1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 14, name: '渚у惞鐔旂偧1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 15, name: '1#35kV鐢熷寲绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 16, name: '2#35kV鐢熷寲绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 17, name: '鍚夐『鍏変紡1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-    { id: 18, name: '鍚夐『鍏変紡2#绾�', itemStyle: { color: colors[3] }, depth: 3 },
-  ];
+    { id: 6, name: "鍐朵笁榧撻鏈烘埧1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 7, name: "鍐朵笁榧撻鏈烘埧2#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 8, name: "鍐朵笁纭吀1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 9, name: "鍐朵笁纭吀2#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 10, name: "鍐朵笁鍒舵哀1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 11, name: "鍐朵笁鍒舵哀2#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 12, name: "鐢熷寲2#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 13, name: "渚у惞绮剧偧1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 14, name: "渚у惞鐔旂偧1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 15, name: "1#35kV鐢熷寲绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 16, name: "2#35kV鐢熷寲绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 17, name: "鍚夐『鍏変紡1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+    { id: 18, name: "鍚夐『鍏変紡2#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+  ]
   // mydata.reverse()
   let mylinks = [
     // L1鈫扡4	 9720
-    { source: '1', target: '5', value: 24726900 },
-    { source: '2', target: '5', value: 958880 },
-    { source: '3', target: '5', value: 874720 },
-    { source: '4', target: '5', value: 0 },
+    { source: "1", target: "5", value: 24726900 },
+    { source: "2", target: "5", value: 958880 },
+    { source: "3", target: "5", value: 874720 },
+    { source: "4", target: "5", value: 0 },
     // L2鈫扡4	 24396
-    { source: '5', target: '6', value: 1766800 },
-    { source: '5', target: '7', value: 1046400 },
-    { source: '5', target: '8', value: 1790400 },
-    { source: '5', target: '9', value: 1385700 },
-    { source: '5', target: '10', value: 5058600 },
-    { source: '5', target: '11', value: 3921600 },
-    { source: '5', target: '12', value: 215760 },
-    { source: '5', target: '13', value: 0 },
-    { source: '5', target: '14', value: 5555000 },
-    { source: '5', target: '15', value: 4786530 },
-    { source: '5', target: '16', value: 973980 },
-    { source: '5', target: '17', value: 7680 },
-    { source: '5', target: '18', value: 5280 },
-
+    { source: "5", target: "6", value: 1766800 },
+    { source: "5", target: "7", value: 1046400 },
+    { source: "5", target: "8", value: 1790400 },
+    { source: "5", target: "9", value: 1385700 },
+    { source: "5", target: "10", value: 5058600 },
+    { source: "5", target: "11", value: 3921600 },
+    { source: "5", target: "12", value: 215760 },
+    { source: "5", target: "13", value: 0 },
+    { source: "5", target: "14", value: 5555000 },
+    { source: "5", target: "15", value: 4786530 },
+    { source: "5", target: "16", value: 973980 },
+    { source: "5", target: "17", value: 7680 },
+    { source: "5", target: "18", value: 5280 },
 
     // // L3鈫扡4	 1462
     // { source: 'L3', target: 'L4', value: 1462 },
@@ -206,28 +203,26 @@
     // // L2鈫扡3鈫扡4	 893
     // { source: 'L2-3', target: 'L3-3', value: 893 },
     // { source: 'L3-3', target: 'L4', value: 893 },
+  ]
 
-  ];
-
-
-  const myChart1 = echarts.init(document.getElementById("Chart1"));
+  const myChart1 = echarts.init(document.getElementById("Chart1"))
   myChart1.setOption({
     tooltip: {
-      trigger: 'item',
-      triggerOn: 'mousemove',
+      trigger: "item",
+      triggerOn: "mousemove",
     },
     series: {
-      type: 'sankey',
+      type: "sankey",
       lineStyle: {
         opacity: 0.3,
-        color: 'gradient',
+        color: "gradient",
         curveness: 0.7,
       },
       // nodeAlign: 'left',
       nodeGap: 18,
       layoutIterations: 1,
       emphasis: {
-        focus: 'adjacency',
+        focus: "adjacency",
       },
       data: mydata,
       links: mylinks,
@@ -237,15 +232,19 @@
           // position: 'left', // 鏍囩浣嶇疆
           formatter: function (node) {
             // 鑷畾涔夋爣绛惧唴瀹�
-            return node.data.name;
-          }
-        }
+            return node.data.name
+          },
+        },
       },
     },
   })
-  window.addEventListener("resize", () => {
-    myChart1.resize();
-  }, { passive: true });
+  window.addEventListener(
+    "resize",
+    () => {
+      myChart1.resize()
+    },
+    { passive: true }
+  )
 }
 onMounted(() => {
   getChart()
@@ -272,7 +271,7 @@
   padding: 8px 0;
   align-items: center;
 
-  &>div {
+  & > div {
     width: calc(100% / 6);
     word-break: break-word;
     background-color: #1d3778 !important;
@@ -296,13 +295,12 @@
       line-height: 23px;
       padding: 0 12px;
     }
-
-
   }
 }
 
 .table-content-box {
   color: #fff;
+  background-color: #1d3778 !important;
   padding: 8px 0;
   width: 100%;
   display: flex;
@@ -311,24 +309,20 @@
   align-items: stretch;
 
   .calc6_4 {
-    width: calc((100% / 6) * 4)
+    width: calc((100% / 6) * 4);
   }
 
-
-
   .calc6 {
-    width: calc(100% / 6)
+    width: calc(100% / 6);
   }
 
   .calc4 {
-    width: calc(100% / 4)
+    width: calc(100% / 4);
   }
 
   .width50 {
     width: 50%;
   }
-
-
 
   .data-list-ul {
     width: 100%;
@@ -353,8 +347,6 @@
     //   /* 浣跨敤鐪佺暐鍙疯〃绀烘孩鍑虹殑鏂囨湰 */
     // }
   }
-
-
 }
 
 .chart-box {
@@ -366,4 +358,4 @@
     height: 100%;
   }
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.9.3