Merge branch 'master' of https://gitee.com/js-yhsec/energy_storage

web/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   },
   plugins: ['react', '@typescript-eslint', 'prettier'], // 添加 prettier 插件
   rules: {
+    'vue/require-explicit-emits': 'off', // 关闭 emits 声明检查
     'vue/v-on-event-hyphenation': 'off',
     'prettier/prettier': 'off',
     'react/react-in-jsx-scope': 'off', // React 17+ 可关闭 JSX 运行时检查
@@ -24,8 +25,8 @@ module.exports = {
     eqeqeq: 0, //   警告使用全等
     quotes: [0, 'single'], //   单引号
     singleQuote: 0,
-    'no-console': 2, //   不禁用console
-    'no-debugger': 2, //   警告debugger
+    'no-console': 0, //   不禁用console
+    'no-debugger': 0, //   警告debugger
     'no-var': 2, //   对var禁止
     'no-eval': 0,
     semi: 0, //   强制使用分号

web/package-lock.json

@@ -11,6 +11,7 @@
         "ant-design-vue": "^4.2.6",
         "axios": "^1.11.0",
         "core-js": "^3.8.3",
+        "echarts": "^6.0.0",
         "moment": "^2.30.1",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
@@ -35,6 +36,7 @@
         "sass": "^1.32.7",
         "sass-loader": "^12.0.0",
         "vue-eslint-parser": "^10.2.0",
+        "vue-tianditu": "^2.7.6",
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.2"
       }
@@ -6721,6 +6723,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -10490,6 +10506,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true
+    },
     "node_modules/module-alias": {
       "version": "2.2.3",
       "resolved": "https://registry.npmmirror.com/module-alias/-/module-alias-2.2.3.tgz",
@@ -14484,6 +14506,51 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-tianditu": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmmirror.com/vue-tianditu/-/vue-tianditu-2.7.6.tgz",
+      "integrity": "sha512-Yvcxg0IAgGB3ZY8zlC5ayjo9f85fa8PFTaifguTNpri76g67GO9toaRWMjBKi39yYHMBADaT3P6bEkJx87X8MQ==",
+      "dev": true,
+      "dependencies": {
+        "mitt": "^3.0.0",
+        "vue-demi": "^0.12.1"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.2",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-tianditu/node_modules/vue-demi": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz",
+      "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-types": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz",
@@ -15586,6 +15653,19 @@
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true,
       "license": "ISC"
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   }
 }

web/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve && webpack-dev-server",
+    "serve": "vue-cli-service serve ",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "show-webpack-version": "webpack --version"
@@ -12,6 +12,7 @@
     "ant-design-vue": "^4.2.6",
     "axios": "^1.11.0",
     "core-js": "^3.8.3",
+    "echarts": "^6.0.0",
     "moment": "^2.30.1",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
@@ -37,7 +38,8 @@
     "sass-loader": "^12.0.0",
     "vue-eslint-parser": "^10.2.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "webpack-dev-server": "^5.2.2",
+    "vue-tianditu": "^2.7.6"
   },
   "eslintConfig": {
     "root": true,

web/public/index.html

@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_fpzrc14sfwj.css" />
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
+        JavaScript enabled. Please enable it to continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

web/src/App.vue

@@ -1,5 +1,13 @@
 <template>
+  <a-config-provider
+    :theme="{
+      token: {
+        colorPrimary: '#143d7d'
+      }
+    }"
+  >
   <router-view />
+  </a-config-provider>
 </template>
 
 <style lang="scss">
@@ -9,7 +17,7 @@
   left: 0;
   bottom: 0;
   right: 0;
-  // min-width: 1440px;
-  // min-height: 900px;
+  min-width: 1440px;
+  min-height: 900px;
 }
 </style>

web/src/assets/iconfont/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

web/src/assets/iconfont/iconfont.css

@@ -0,0 +1,468 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4945642 */
+  src: url('iconfont.woff2?t=1756516508134') format('woff2'),
+       url('iconfont.woff?t=1756516508134') format('woff'),
+       url('iconfont.ttf?t=1756516508134') format('truetype'),
+       url('iconfont.svg?t=1756516508134#iconfont') format('svg');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-full:before {
+  content: "\e651";
+}
+
+.icon-exit:before {
+  content: "\e652";
+}
+
+.icon-a-qiyong:before {
+  content: "\e64e";
+}
+
+.icon-a-jinyong:before {
+  content: "\e64f";
+}
+
+.icon-tuihuishenqing:before {
+  content: "\e64d";
+}
+
+.icon-mti-loudianjiance:before {
+  content: "\e64c";
+}
+
+.icon-guanbi:before {
+  content: "\e64b";
+}
+
+.icon-a-fenzu1411:before {
+  content: "\e649";
+}
+
+.icon-a-fenzu1409:before {
+  content: "\e64a";
+}
+
+.icon-xianlu:before {
+  content: "\e647";
+}
+
+.icon-jizhongqi:before {
+  content: "\e648";
+}
+
+.icon-a-lujing41:before {
+  content: "\e646";
+}
+
+.icon-a-lujing4:before {
+  content: "\e645";
+}
+
+.icon-Electrocardiogram:before {
+  content: "\e644";
+}
+
+.icon-hezha:before {
+  content: "\e642";
+}
+
+.icon-bisuo:before {
+  content: "\e643";
+}
+
+.icon-lixian:before {
+  content: "\e63b";
+}
+
+.icon-dengpao:before {
+  content: "\e63c";
+}
+
+.icon-daunlu:before {
+  content: "\e63e";
+}
+
+.icon-loudianjiance:before {
+  content: "\e63f";
+}
+
+.icon-guozai:before {
+  content: "\e641";
+}
+
+.icon-a-fenzu92:before {
+  content: "\e63a";
+}
+
+.icon-yonghu2:before {
+  content: "\e68d";
+}
+
+.icon-guzhang:before {
+  content: "\e632";
+}
+
+.icon-leijishouyi:before {
+  content: "\e631";
+}
+
+.icon-fadianliang:before {
+  content: "\e63d";
+}
+
+.icon-fengji:before {
+  content: "\e661";
+}
+
+.icon-guangfu:before {
+  content: "\e633";
+}
+
+.icon-jiantanpaifang:before {
+  content: "\e67d";
+}
+
+.icon-hebing:before {
+  content: "\e630";
+}
+
+.icon-a-fenzu2:before {
+  content: "\e62e";
+}
+
+.icon-jiantou:before {
+  content: "\e62d";
+}
+
+.icon-a-fenzu549:before {
+  content: "\e62c";
+}
+
+.icon-guanbi1:before {
+  content: "\e62a";
+}
+
+.icon-baohuzhuangzhi:before {
+  content: "\e704";
+}
+
+.icon-peidianfang:before {
+  content: "\e6ae";
+}
+
+.icon-map-mark0:before {
+  content: "\e6ba";
+}
+
+.icon-caokongguanli:before {
+  content: "\e62b";
+}
+
+.icon-a-CyberMonitoring:before {
+  content: "\e640";
+}
+
+.icon-a-GrowthChart:before {
+  content: "\e650";
+}
+
+.icon-a-SalesGrowth:before {
+  content: "\e668";
+}
+
+.icon-a-TrendChat:before {
+  content: "\e673";
+}
+
+.icon-a-CloudComputer:before {
+  content: "\e683";
+}
+
+.icon-a-CloudInfrastructure:before {
+  content: "\e687";
+}
+
+.icon-a-CloudManagement:before {
+  content: "\e689";
+}
+
+.icon-a-CloudSecurity:before {
+  content: "\e68e";
+}
+
+.icon-Dataserver:before {
+  content: "\e693";
+}
+
+.icon-a-VolumeEqualizer:before {
+  content: "\e6c0";
+}
+
+.icon-a-ResourceManagement1:before {
+  content: "\e808";
+}
+
+.icon-a-GraphUp:before {
+  content: "\e859";
+}
+
+.icon-a-FileCabinet:before {
+  content: "\e97d";
+}
+
+.icon-a-SystemSetting:before {
+  content: "\ee41";
+}
+
+.icon-map-mark1:before {
+  content: "\ee42";
+}
+
+.icon-map-mark2-copy:before {
+  content: "\ee43";
+}
+
+.icon-shouye:before {
+  content: "\e625";
+}
+
+.icon-dingwei:before {
+  content: "\e8c4";
+}
+
+.icon-guanbi2:before {
+  content: "\e62f";
+}
+
+.icon-chulizhuangtai:before {
+  content: "\e684";
+}
+
+.icon-a-fenzu302:before {
+  content: "\e629";
+}
+
+.icon-a-fenzu1163:before {
+  content: "\e605";
+}
+
+.icon-tuichu:before {
+  content: "\e627";
+}
+
+.icon-yonghu-yuan:before {
+  content: "\e628";
+}
+
+.icon-mima:before {
+  content: "\e8b2";
+}
+
+.icon-tuichu3:before {
+  content: "\e624";
+}
+
+.icon-yueliang:before {
+  content: "\e656";
+}
+
+.icon-tongzhi:before {
+  content: "\e674";
+}
+
+.icon-tongzhi1:before {
+  content: "\e9cd";
+}
+
+.icon-tongzhi2:before {
+  content: "\101d4";
+}
+
+.icon-xingzhuangjiehe:before {
+  content: "\e623";
+}
+
+.icon-xitongguanli:before {
+  content: "\e672";
+}
+
+.icon-pingtaiguanli:before {
+  content: "\e619";
+}
+
+.icon-shidu:before {
+  content: "\e635";
+}
+
+.icon-dingdan-quanbudingdan:before {
+  content: "\e626";
+}
+
+.icon-wendu:before {
+  content: "\e80f";
+}
+
+.icon-fengtian-guangzhao:before {
+  content: "\e636";
+}
+
+.icon-fengsu:before {
+  content: "\ea32";
+}
+
+.icon-wulianzhongxin_normal:before {
+  content: "\e620";
+}
+
+.icon-icon-1:before {
+  content: "\e621";
+}
+
+.icon-fengexian:before {
+  content: "\e634";
+}
+
+.icon-quxiao:before {
+  content: "\e637";
+}
+
+.icon-a-xingzhuangjiehe1x:before {
+  content: "\e638";
+}
+
+.icon-a-xingzhuangjiehe1x1:before {
+  content: "\e639";
+}
+
+.icon-xingzhuang1:before {
+  content: "\e622";
+}
+
+.icon-xingzhuang:before {
+  content: "\e604";
+}
+
+.icon-a-fenzu1865:before {
+  content: "\e61f";
+}
+
+.icon-confirm:before {
+  content: "\e61a";
+}
+
+.icon-a-fenzu412:before {
+  content: "\e61b";
+}
+
+.icon-shuaxin:before {
+  content: "\e61c";
+}
+
+.icon-download:before {
+  content: "\e61d";
+}
+
+.icon-upload:before {
+  content: "\e61e";
+}
+
+.icon-add:before {
+  content: "\e616";
+}
+
+.icon-chongzhi:before {
+  content: "\e617";
+}
+
+.icon-setProtectControl:before {
+  content: "\e618";
+}
+
+.icon-export:before {
+  content: "\e613";
+}
+
+.icon-import:before {
+  content: "\e614";
+}
+
+.icon-del:before {
+  content: "\e615";
+}
+
+.icon-setProtectValue:before {
+  content: "\e60e";
+}
+
+.icon-setLightMode:before {
+  content: "\e60f";
+}
+
+.icon-setTimeMode:before {
+  content: "\e610";
+}
+
+.icon-switchMode:before {
+  content: "\e611";
+}
+
+.icon-setTime:before {
+  content: "\e612";
+}
+
+.icon-sousu:before {
+  content: "\e60c";
+}
+
+.icon-a-fenzu2241:before {
+  content: "\e60d";
+}
+
+.icon-openOrClose:before {
+  content: "\e60b";
+}
+
+.icon-zhaoce:before {
+  content: "\e60a";
+}
+
+.icon-send:before {
+  content: "\e609";
+}
+
+.icon-a-fenzu5:before {
+  content: "\e608";
+}
+
+.icon-shezhi:before {
+  content: "\e607";
+}
+
+.icon-touxiang:before {
+  content: "\e606";
+}
+
+.icon-jiaoyizhanghuguanli:before {
+  content: "\e602";
+}
+
+.icon-yingxiaoxuanzhong:before {
+  content: "\e603";
+}
+
+.icon-a-lujing1:before {
+  content: "\e600";
+}
+
+.icon-a-lujing11:before {
+  content: "\e601";
+}
+

web/src/assets/iconfont/iconfont.json

@@ -0,0 +1,800 @@
+{
+  "id": "4945642",
+  "name": "海达普平台3.0",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "44946071",
+      "name": "full",
+      "font_class": "full",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "44946066",
+      "name": "exit",
+      "font_class": "exit",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    },
+    {
+      "icon_id": "44797354",
+      "name": "qiyong",
+      "font_class": "a-qiyong",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "44797352",
+      "name": "jinyong",
+      "font_class": "a-jinyong",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "41945643",
+      "name": "退回申请",
+      "font_class": "tuihuishenqing",
+      "unicode": "e64d",
+      "unicode_decimal": 58957
+    },
+    {
+      "icon_id": "44643473",
+      "name": "mti-漏电监测",
+      "font_class": "mti-loudianjiance",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "44642653",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "44628330",
+      "name": "启用",
+      "font_class": "a-fenzu1411",
+      "unicode": "e649",
+      "unicode_decimal": 58953
+    },
+    {
+      "icon_id": "44628328",
+      "name": "禁用",
+      "font_class": "a-fenzu1409",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "44626923",
+      "name": "线路",
+      "font_class": "xianlu",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "44626921",
+      "name": "集中器",
+      "font_class": "jizhongqi",
+      "unicode": "e648",
+      "unicode_decimal": 58952
+    },
+    {
+      "icon_id": "44626922",
+      "name": "路径 4 (1)",
+      "font_class": "a-lujing41",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "44626457",
+      "name": "路径 4",
+      "font_class": "a-lujing4",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "40668428",
+      "name": "Electrocardiogram",
+      "font_class": "Electrocardiogram",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "44621269",
+      "name": "分组 10",
+      "font_class": "hezha",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "44621265",
+      "name": "路径 1 (1)",
+      "font_class": "bisuo",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "44621293",
+      "name": "离线",
+      "font_class": "lixian",
+      "unicode": "e63b",
+      "unicode_decimal": 58939
+    },
+    {
+      "icon_id": "44621290",
+      "name": "49",
+      "font_class": "dengpao",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "44621289",
+      "name": "路径 6",
+      "font_class": "daunlu",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "44621287",
+      "name": "mti-漏电监测",
+      "font_class": "loudianjiance",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "44621285",
+      "name": "路径 1",
+      "font_class": "guozai",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "44613655",
+      "name": "分组 92",
+      "font_class": "a-fenzu92",
+      "unicode": "e63a",
+      "unicode_decimal": 58938
+    },
+    {
+      "icon_id": "8998607",
+      "name": "用户",
+      "font_class": "yonghu2",
+      "unicode": "e68d",
+      "unicode_decimal": 59021
+    },
+    {
+      "icon_id": "17398117",
+      "name": "故障",
+      "font_class": "guzhang",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "683410",
+      "name": "累计收益",
+      "font_class": "leijishouyi",
+      "unicode": "e631",
+      "unicode_decimal": 58929
+    },
+    {
+      "icon_id": "6943378",
+      "name": "发电量",
+      "font_class": "fadianliang",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "31328216",
+      "name": "风机",
+      "font_class": "fengji",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "37843318",
+      "name": "光伏-copy",
+      "font_class": "guangfu",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "39630640",
+      "name": "减碳排放",
+      "font_class": "jiantanpaifang",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "44416323",
+      "name": "合并",
+      "font_class": "hebing",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "44603155",
+      "name": "分组 2",
+      "font_class": "a-fenzu2",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "19877417",
+      "name": "箭头",
+      "font_class": "jiantou",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "44581189",
+      "name": "分组 549",
+      "font_class": "a-fenzu549",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "4880431",
+      "name": "关闭",
+      "font_class": "guanbi1",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "27326599",
+      "name": "保护装置",
+      "font_class": "baohuzhuangzhi",
+      "unicode": "e704",
+      "unicode_decimal": 59140
+    },
+    {
+      "icon_id": "32257173",
+      "name": "配电房",
+      "font_class": "peidianfang",
+      "unicode": "e6ae",
+      "unicode_decimal": 59054
+    },
+    {
+      "icon_id": "35105134",
+      "name": "同心圆",
+      "font_class": "map-mark0",
+      "unicode": "e6ba",
+      "unicode_decimal": 59066
+    },
+    {
+      "icon_id": "40458894",
+      "name": "操控管理",
+      "font_class": "caokongguanli",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "40668708",
+      "name": "Cyber Monitoring",
+      "font_class": "a-CyberMonitoring",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "40668774",
+      "name": "Growth Chart",
+      "font_class": "a-GrowthChart",
+      "unicode": "e650",
+      "unicode_decimal": 58960
+    },
+    {
+      "icon_id": "40668863",
+      "name": "Sales Growth",
+      "font_class": "a-SalesGrowth",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "40668908",
+      "name": "Trend Chat",
+      "font_class": "a-TrendChat",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "40668959",
+      "name": "Cloud Computer",
+      "font_class": "a-CloudComputer",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "40668971",
+      "name": "Cloud Infrastructure",
+      "font_class": "a-CloudInfrastructure",
+      "unicode": "e687",
+      "unicode_decimal": 59015
+    },
+    {
+      "icon_id": "40668978",
+      "name": "Cloud Management",
+      "font_class": "a-CloudManagement",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "40668994",
+      "name": "Cloud Security",
+      "font_class": "a-CloudSecurity",
+      "unicode": "e68e",
+      "unicode_decimal": 59022
+    },
+    {
+      "icon_id": "40669013",
+      "name": "Dataserver",
+      "font_class": "Dataserver",
+      "unicode": "e693",
+      "unicode_decimal": 59027
+    },
+    {
+      "icon_id": "40669125",
+      "name": "Volume Equalizer",
+      "font_class": "a-VolumeEqualizer",
+      "unicode": "e6c0",
+      "unicode_decimal": 59072
+    },
+    {
+      "icon_id": "40669723",
+      "name": "Resource Management",
+      "font_class": "a-ResourceManagement1",
+      "unicode": "e808",
+      "unicode_decimal": 59400
+    },
+    {
+      "icon_id": "40669819",
+      "name": "Graph Up",
+      "font_class": "a-GraphUp",
+      "unicode": "e859",
+      "unicode_decimal": 59481
+    },
+    {
+      "icon_id": "40670170",
+      "name": "File Cabinet",
+      "font_class": "a-FileCabinet",
+      "unicode": "e97d",
+      "unicode_decimal": 59773
+    },
+    {
+      "icon_id": "40671533",
+      "name": "System Setting",
+      "font_class": "a-SystemSetting",
+      "unicode": "ee41",
+      "unicode_decimal": 60993
+    },
+    {
+      "icon_id": "41578337",
+      "name": "同心圆-copy",
+      "font_class": "map-mark1",
+      "unicode": "ee42",
+      "unicode_decimal": 60994
+    },
+    {
+      "icon_id": "41578361",
+      "name": "同心圆-copy-copy",
+      "font_class": "map-mark2-copy",
+      "unicode": "ee43",
+      "unicode_decimal": 60995
+    },
+    {
+      "icon_id": "1228",
+      "name": "首页",
+      "font_class": "shouye",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "11372763",
+      "name": "定位",
+      "font_class": "dingwei",
+      "unicode": "e8c4",
+      "unicode_decimal": 59588
+    },
+    {
+      "icon_id": "21164164",
+      "name": "关闭",
+      "font_class": "guanbi2",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "35113133",
+      "name": "处理状态",
+      "font_class": "chulizhuangtai",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "44573704",
+      "name": "分组 302",
+      "font_class": "a-fenzu302",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "44573686",
+      "name": "分组 1163",
+      "font_class": "a-fenzu1163",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "44573683",
+      "name": "分组 449",
+      "font_class": "tuichu",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "44573677",
+      "name": "分组 1565",
+      "font_class": "yonghu-yuan",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "11372676",
+      "name": "密码",
+      "font_class": "mima",
+      "unicode": "e8b2",
+      "unicode_decimal": 59570
+    },
+    {
+      "icon_id": "28622327",
+      "name": "退出",
+      "font_class": "tuichu3",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "35972990",
+      "name": "icon_夜间-月亮",
+      "font_class": "yueliang",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "16388270",
+      "name": "通知",
+      "font_class": "tongzhi",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "32538041",
+      "name": "通知",
+      "font_class": "tongzhi1",
+      "unicode": "e9cd",
+      "unicode_decimal": 59853
+    },
+    {
+      "icon_id": "42794618",
+      "name": "通知",
+      "font_class": "tongzhi2",
+      "unicode": "101d4",
+      "unicode_decimal": 66004
+    },
+    {
+      "icon_id": "44572036",
+      "name": "形状结合",
+      "font_class": "xingzhuangjiehe",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "4138428",
+      "name": "系统管理",
+      "font_class": "xitongguanli",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "5093337",
+      "name": "平台管理",
+      "font_class": "pingtaiguanli",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "6677873",
+      "name": "湿度",
+      "font_class": "shidu",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "17541547",
+      "name": "订单-全部订单",
+      "font_class": "dingdan-quanbudingdan",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "17605421",
+      "name": "温度",
+      "font_class": "wendu",
+      "unicode": "e80f",
+      "unicode_decimal": 59407
+    },
+    {
+      "icon_id": "21135941",
+      "name": "光照",
+      "font_class": "fengtian-guangzhao",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
+      "icon_id": "25716499",
+      "name": "风速",
+      "font_class": "fengsu",
+      "unicode": "ea32",
+      "unicode_decimal": 59954
+    },
+    {
+      "icon_id": "35264434",
+      "name": "物联中心_normal",
+      "font_class": "wulianzhongxin_normal",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "39347276",
+      "name": "icon-home",
+      "font_class": "icon-1",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "41233755",
+      "name": "分割线",
+      "font_class": "fengexian",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "44546776",
+      "name": "取消-抽屉",
+      "font_class": "quxiao",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "44565750",
+      "name": "user_login",
+      "font_class": "a-xingzhuangjiehe1x",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "44565801",
+      "name": "passwd_login",
+      "font_class": "a-xingzhuangjiehe1x1",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "44572019",
+      "name": "形状",
+      "font_class": "xingzhuang1",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "44572020",
+      "name": "形状",
+      "font_class": "xingzhuang",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "44571957",
+      "name": "分组 1865",
+      "font_class": "a-fenzu1865",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "44571956",
+      "name": "分组 929",
+      "font_class": "confirm",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "44571953",
+      "name": "分组 412",
+      "font_class": "a-fenzu412",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "44571951",
+      "name": "分组 1753",
+      "font_class": "shuaxin",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "44571950",
+      "name": "分组 2121",
+      "font_class": "download",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "44571949",
+      "name": "分组 204",
+      "font_class": "upload",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "44571900",
+      "name": "分组 463",
+      "font_class": "add",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "44571899",
+      "name": "分组 423",
+      "font_class": "chongzhi",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "44571892",
+      "name": "分组 1977",
+      "font_class": "setProtectControl",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "44571905",
+      "name": "分组 610",
+      "font_class": "export",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "44571903",
+      "name": "分组 614",
+      "font_class": "import",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "44571902",
+      "name": "分组 249",
+      "font_class": "del",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "44571893",
+      "name": "分组 1237",
+      "font_class": "setProtectValue",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "44571891",
+      "name": "分组 2237",
+      "font_class": "setLightMode",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "44571888",
+      "name": "分组 2085",
+      "font_class": "setTimeMode",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "44571885",
+      "name": "分组 1739",
+      "font_class": "switchMode",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "44571884",
+      "name": "分组 1375",
+      "font_class": "setTime",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "44571897",
+      "name": "分组 403",
+      "font_class": "sousu",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "44571896",
+      "name": "分组 2241",
+      "font_class": "a-fenzu2241",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "44567819",
+      "name": "分组 1067",
+      "font_class": "openOrClose",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "44567629",
+      "name": "分组 1928",
+      "font_class": "zhaoce",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "44567660",
+      "name": "分组 342",
+      "font_class": "send",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "44567617",
+      "name": "分组 5",
+      "font_class": "a-fenzu5",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "44567394",
+      "name": "设置",
+      "font_class": "shezhi",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "44567418",
+      "name": "分组 1565",
+      "font_class": "touxiang",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "44567099",
+      "name": "交易账户",
+      "font_class": "jiaoyizhanghuguanli",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "44567095",
+      "name": "营销选中",
+      "font_class": "yingxiaoxuanzhong",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "44567155",
+      "name": "可视化",
+      "font_class": "a-lujing1",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "44567153",
+      "name": "用户",
+      "font_class": "a-lujing11",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    }
+  ]
+}

web/src/components/ComTable.vue

@@ -0,0 +1,447 @@
+<template>
+  <div class="comtable" >
+    <div class="table" ref="comtable">
+      <a-table
+      bordered
+      :loading="loading"
+      :columns="columns"
+      :scroll="scroll"
+      :data-source="data.realTableData"
+      :pagination="false"
+      :row-class-name="rowClassName"
+      row-key="id"
+      :expand-icon="expandIcon"
+      :row-selection="
+        data.newTableOpt.select
+          ? {
+              selectedRowKeys: data.selectedRowKeys,
+              onChange: onSelectChange
+            }
+          : false
+      "
+      :expanded-row-keys="data.newTableOpt.expand?data.expandedKeys:null"
+      size="middle"
+      :indent-size="30"
+      @resizeColumn="handleResizeColumn"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.scopedSlots">
+          <slot
+            v-bind="record"
+            :name="column.scopedSlots ? column.scopedSlots.customRender : ''"
+          ></slot>
+        </template>
+      </template>
+      <template v-if="data.newTableOpt.expand" #expandedRowRender="{ record }">
+            <a-table
+              size="small"
+              :columns="innerColumns"
+              :data-source="record.currentLimitList"
+              :pagination="false"
+            >
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'type'">
+                  <span>
+                    {{ getType(record.type) }}
+                  </span>
+                </template>
+              </template>
+            </a-table>
+          </template>
+
+    </a-table>
+
+    </div>
+
+    <div class="pagination" v-if="data.newTableOpt.page">
+      <a-pagination
+        v-model:current="data.newPageOption.current"
+        :total="data.newPageOption.total"
+        :page-size="data.newPageOption.pageSize"
+        @change="onChange"
+        show-size-changer
+        show-quick-jumper
+        :show-total="(total) => `共 ${total} 条`"
+        :page-size-options="data.pageSizeOptions"
+      >
+      </a-pagination>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+// <a-select :dropdownMatchSelectWidth="false" size="small" placement="top" />
+import {
+  nextTick,
+  ref,
+  toRefs,
+  reactive,
+  onMounted,
+  watch,
+  defineProps,
+  defineEmits,
+  defineExpose,
+} from 'vue'
+
+const comtable = ref('')
+const props = defineProps({
+  columns: { type: Array },
+  tableData: { type: Array },
+  tableOption: {
+    type: Object,
+    default: () => {
+      return {
+        loading: false,
+        page: true,
+        align: 'center',
+        expand: false,
+        select: true,
+        scroll: { y: 750 }
+      }
+    }
+  },
+  pageOption: {
+    type: Object,
+    default: () => {
+      return {
+        current: 1,
+        pageSize: 10,
+        total: 1
+      }
+    }
+  },
+  selectField: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  rowClick: {
+    default: () => {}
+  },
+  tableH: {
+    type: Number,
+
+  },
+
+})
+function handleResizeColumn(w, col) {
+  col.width = w
+}
+const mountedScroll = () => {
+  data.newColumns = [...props.columns]
+  data.realTableData = [...props.tableData]
+  // tableScoll()
+}
+const emit = defineEmits(['handlePagesizeChange'])
+const data = reactive({
+  expandedKeys: [],
+  newColumns: [],
+  selectedRowKeys: [],
+  realColumns: [],
+  realTableData: [],
+  selectedRows: [],
+  defaultTabOpt: {
+    page: true,
+    align: 'center',
+    expand: false,
+    select: true
+  },
+
+  newPageOption: {},
+  newTableOpt: {},
+  pageSizeOptions: ['15', '20', '30', '40', '50', '100'],
+  mountedScroll
+})
+const loading = ref(false)
+const scroll = ref({})
+
+onMounted(async() => {
+  data.newColumns = [...props.columns]
+  data.realTableData = [...props.tableData]
+  await nextTick()
+  // console.log(props.tableH, 'props.tableH');
+
+  scroll.value = { y: comtable.value.offsetHeight - 56 }
+})
+
+watch(
+  () => props.tableData,
+  (n, o) => {
+    if (n) {
+      data.realTableData = [...n]
+    }
+  },
+  { deep: true, immediate: true }
+)
+watch(
+  () => props.pageOption,
+  (n, o) => {
+    data.newPageOption = { ...n }
+  },
+  { deep: true, immediate: true }
+)
+watch(
+  () => props.tableOption,
+  (n, o) => {
+    data.newTableOpt = { ...data.defaultTabOpt, ...n }
+  },
+  { deep: true, immediate: true }
+)
+watch(
+  () => props.tableH,
+  (n, o) => {
+    if (n && n !== o) {
+      const pageH = data.newTableOpt.page ? 42 : 0
+      scroll.value = { y: n - pageH - 56 }
+    }
+  },
+  // { deep: true, immediate: true }
+)
+
+function rowClassName(record, index) {
+  return 'table-row'
+}
+function expandIcon(props) {}
+function onChange(page, pageSize) {
+  data.newPageOption.current = page
+  data.newPageOption.pageSize = pageSize
+  emit('handlePagesizeChange', data.newPageOption)
+}
+
+function onSelectChange(selectedRowKeys, selectedRows) {
+  data.selectedRowKeys = selectedRowKeys
+  data.selectedRows = selectedRows
+}
+defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
+</script>
+
+<style lang="scss" scoped>
+@use '../style/color.scss' as *;
+.comtable {
+  border-radius: 8px;
+  font-size: 14px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .table{
+    flex:1
+  }
+
+  .pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+    // margin-bottom: 10px;
+    min-width: 420px;
+    height: 32px;
+
+  }
+
+  ::v-deep .ant-table-thead > tr > th {
+    border-inline: 1px solid var(--theme-bg) !important;
+    background: var(--table-header-bg);
+    color: var(--theme-text-default);
+    border-bottom: none;
+    // &.ant-table-column-has-sorters{
+    //   &::hover{
+    //      background: var(--table-header-bg) !important;
+
+    //   }
+    // }
+    &:last-child {
+      border-inline-end: 1.5px solid var(--table-header-bg) !important;
+    }
+    &:nth-last-child(2) {
+      border-inline-end: 1.5px solid var(--table-header-bg) !important;
+    }
+  }
+
+  :deep(.ant-table-container > .ant-table-content > table) {
+    border-inline-start: 1px solid var(--theme-bg) !important;
+  }
+  :deep(.ant-pagination-item-link) {
+    color: var(--theme-text-default) !important;
+
+    height: 100% !important;
+    display: block !important;
+  }
+
+}
+
+:deep(
+  .ant-table-wrapper
+    .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-header
+    > table
+) {
+  border-top: none !important;
+}
+:deep(.ant-checkbox-checked .ant-checkbox-inner) {
+  background-color: var(--table-header-bg) !important;
+  border: none !important;
+}
+:deep(.ant-checkbox-indeterminate .ant-checkbox-inner:after) {
+  background-color: var(--table-header-bg) !important;
+}
+
+:deep(.ant-pagination) {
+
+  .ant-pagination-prev,
+  .ant-pagination-next {
+    background: var(--theme-bg) !important;
+    color: var(--theme-text-default) !important;
+  }
+  .ant-select-selector {
+    border: none !important;
+  }
+  .ant-select-arrow {
+    color: var(--theme-text-default) !important;
+  }
+
+  span.ant-input-affix-wrapper,
+  .ant-select,
+  .ant-picker {
+    width: 110px !important;
+    border-radius: 8px !important;
+  }
+  .ant-select-selection-item {
+    color: var(--theme-text-default) !important;
+  }
+  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+    background-color: var(--theme-bg) !important;
+    border-radius: 8px !important;
+  }
+  .ant-pagination-total-text,
+  .ant-pagination-options-quick-jumper {
+    color: var(--theme-text-default) !important;
+    margin-inline-end: 9px !important;
+  }
+  .ant-pagination-options-quick-jumper input {
+    background-color: var(--theme-bg) !important;
+    border: none !important;
+    color: var(--theme-text-default) !important;
+  }
+  .ant-pagination-options .ant-pagination-options-size-changer .ant-select-selector {
+    color: var(--theme-text-default) !important;
+    background-color: var(--theme-bg) !important;
+  }
+  .ant-select-dropdown {
+    top: -210px !important;
+  }
+   .ant-pagination-item  {
+    &:not(.ant-pagination-item-active):hover{
+      background: var(--theme-bg) !important;
+    }
+    a{
+    color: var(--theme-text-default) !important;
+
+    }
+  }
+  .ant-pagination-item-ellipsis {
+    color: var(--theme-text-default) !important;
+  }
+  .ant-pagination-item-active {
+    border-color: transparent !important;
+    font-size: 16px;
+    background: var(--theme-bg1) !important;
+    a {
+      color: var(--theme-text2) !important;
+    }
+  }
+}
+:deep(
+  .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > thead > tr > th
+) {
+  &:nth-last-child(2) {
+    border-inline-end: 1px solid var(--table-header-bg) !important;
+  }
+}
+//表格样式
+:deep(.ant-table-tbody) {
+  color: var(--theme-text-default) !important;
+
+  > tr {
+    &:hover {
+      > .ant-table-cell {
+        background-color: var(--table-select) !important;
+      }
+
+    }
+    td {
+      border: 1px solid var(--theme-bg-default) !important; /* 第一行单元格边框为红色 */
+    }
+  }
+  // td.ant-table-cell.ant-table-cell-row-hover {
+  //   // background-color: var(--table-select) !important;
+  // }
+}
+:deep(.ant-table-body) {
+  background: var(--theme-bg) !important;
+  .ant-table-cell {
+    background: var(--theme-bg) !important;
+  }
+  .ant-table-row-selected {
+    td {
+      background-color: var(--table-select) !important;
+    }
+  }
+  .ant-table-cell-fix-right.ant-table-cell-fix-right-first,
+  .ant-table-cell-fix-left {
+    box-shadow: none !important;
+    padding: 8px !important;
+    margin: 0 !important;
+  }
+}
+:deep(.ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container) {
+  border-inline-start: none !important;
+
+  :deep(.ant-progress .ant-progress-text) {
+    color: var(--theme-text-default) !important;
+  }
+}
+:deep(.ant-table-wrapper) {
+  .ant-table-cell-scrollbar,
+  .ant-table.ant-table-bordered > .ant-table-container {
+    box-shadow: none !important;
+  }
+
+}
+
+:deep(.ant-table-wrapper .ant-table) {
+  background-color: transparent !important;
+}
+
+:deep(
+  .ant-table-wrapper
+    .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-body
+    > table
+    > tbody
+    > tr
+    > .ant-table-cell-fix-right-first::after
+) {
+  border-inline-end: 1px solid var(--theme-bg) !important;
+}
+:deep(
+  .ant-table-wrapper
+    .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-header
+    > table
+    > thead
+    > tr
+    > .ant-table-cell-fix-right-first::after
+) {
+  border-inline-end: 1px solid var(--theme-bg) !important;
+}
+
+:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
+  background: var(--table-select) !important;
+}
+</style>

web/src/components/Home/Alarm.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="alarm">
+    <div class="text_Cur">
+      <div v-for="item in curList" :key="item.key">
+        <div>{{ item.name }}</div>
+        <span class="mark">{{ item.value ? item.value : 0 }}</span>
+        <span class="d">{{ item.d }}</span>
+      </div>
+    </div>
+    <div id="alarm-chart"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: {
+    deviceInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      curList: [
+        {
+          name: '日光伏设备告警',
+          key: 'key1',
+          lineColor: '#22E4FF',
+          value: 0,
+          d: ''
+        },
+        {
+          name: '日储能设备告警',
+          key: 'key2',
+          lineColor: '#0E68E4',
+          value: 0,
+          d: ''
+        },
+        {
+          name: '日充电设备告警',
+          key: 'key3',
+          lineColor: '#00BAAD',
+          value: 0,
+          d: ''
+        },
+        {
+          name: '日负荷设备告警',
+          key: 'key4',
+          lineColor: '#FF8D1A',
+          value: 0,
+          d: ''
+        }
+      ],
+      faultChart: null,
+      lineChartData: {
+        ydata: [],
+        xdata: []
+      }
+    }
+  },
+  watch: {
+    deviceInfo: {
+      handler(n) {
+        this.$nextTick(() => {
+          this.drawLineChart()
+        })
+      }
+      // immediate: true
+    }
+  },
+  mounted() {},
+  onBeforeUnmount() {
+    this.faultChart = null
+    window.removeEventListener('resize', this.handleResize)
+  },
+
+  methods: {
+    handleResize() {
+      this.faultChart.resize()
+    },
+    processData(data, keys) {
+      data.sort((a, b) => {
+        return new Date(a.date) - new Date(b.date)
+      })
+      const dates = data.map((item) => item.date)
+      const values = []
+      keys.forEach((item, index) => {
+        values[index] = data.map((dataValue) => dataValue[keys[index]])
+      })
+
+      return {
+        dates,
+        values
+      }
+    },
+    getChargeData() {
+      const arr = this.curList
+      const keyList = this.curList.map((item) => item.key)
+      const result = this.processData(this.deviceInfo, keyList)
+
+      this.lineChartData.xdata = result.dates
+      arr.forEach((item, index) => {
+        this.lineChartData.ydata[index] = {
+          name: item.name,
+          smooth: true,
+          type: 'bar',
+          barWidth: 5,
+          itemStyle: {
+            borderRadius: [5, 5, 0, 0],
+            color: item.lineColor
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          global: false,
+          showSymbol: false,
+          data: result.values[index]
+        }
+      })
+    },
+
+    drawLineChart(activeKey) {
+      this.getChargeData(activeKey)
+      const chartDom = document.getElementById('alarm-chart')
+      let faultChart = this.$echarts.init(chartDom)
+      this.faultChart = faultChart
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: 20,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineChartData.xdata,
+          axisLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        series: this.lineChartData.ydata
+      }
+      option && faultChart.setOption(option)
+      console.log(this.lineChartData, 'this.lineChartData')
+      window.addEventListener('resize', this.handleResize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.alarm {
+  height: calc(100% - 45px);
+
+  #alarm-chart {
+    height: calc(100% - 45px);
+  }
+}
+
+.text_Cur {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
+  padding: 0px 15px;
+  font-size: 14px;
+  margin: 3px 0px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .mark {
+    font-size: 16px;
+    margin-right: 2px;
+  }
+  & > div:nth-child(2),
+  & > div:nth-child(3) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+   & > div:last-child{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+   }
+  background: linear-gradient(
+    90deg,
+    rgba(0, 186, 173, 0.15) 0%,
+    rgba(61, 254, 250, 0.15) 49.2%,
+    rgba(61, 254, 250, 0) 100%
+  );
+  .d {
+    margin-left: 1px;
+    font-size: 12px;
+  }
+}
+</style>

web/src/components/Home/Charge.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="charge">
+    <div class="text_Cur">
+      <div  v-for="item in curList" :key="item.key">
+        <div>{{ item.name }}</div>
+        <span class="mark">{{
+          item.value?item.value: 0
+        }}</span
+        >
+         <span class="d">{{ item.d }}</span>
+      </div>
+    </div>
+    <div id="charge-chart"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: {
+    deviceInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      curList: [
+        {
+          name: '日充电电量',
+          key: 'key1',
+          lineColor: '#00BBA3',
+          colorStart: ' rgba(10, 250, 106, 0.15)',
+          colorEnd: ' rgba(171, 255, 249, 0.3)',
+          value:0,
+          d:'kW·h'
+        },
+        {
+          name: '日充电次数',
+          key: 'key2',
+          lineColor: '#3F80F2',
+          colorStart: ' rgba(99, 151, 235, 0.3)',
+          colorEnd: ' rgba(24, 109, 245, 0.3)',
+          value:0,
+          d:''
+        }
+      ],
+      curListEcharts: [
+        {
+          name: '日充电电量',
+          key: 'key1',
+          lineColor: '#00BBA3',
+          colorStart: ' rgba(10, 250, 106, 0.15)',
+          colorEnd: ' rgba(171, 255, 249, 0.3)',
+          value:0,
+          d:'kW·h'
+        },
+        {
+          name: '日充电收益',
+          key: 'key2',
+          lineColor: '#3F80F2',
+          colorStart: ' rgba(99, 151, 235, 0.3)',
+          colorEnd: ' rgba(24, 109, 245, 0.3)',
+          value:0,
+          d:''
+        }
+      ],
+      chargeChart: null,
+      lineChartData: {
+        ydata: [],
+        xdata: []
+      },
+     
+    }
+  },
+  watch: {
+    deviceInfo: {
+      handler(n) {
+        this.$nextTick(() => {
+          this.drawLineChart()
+        })
+      }
+      // immediate: true
+    }
+  },
+  mounted() {},
+  onBeforeUnmount() {
+    this.chargeChart = null
+    window.removeEventListener('resize', this.handleResize)
+  },
+
+  methods: {
+    handleResize() {
+      this.chargeChart.resize()
+    },
+    processData(data, keys) {
+      console.log(data, 'dddddddddddddddddddddddddddd')
+      data.sort((a, b) => {
+        return new Date(a.date) - new Date(b.date)
+      })
+      const dates = data.map((item) => item.date)
+      const values=[]
+      keys.forEach((item,index)=>{
+        
+        values[index]= data.map((dataValue)=>dataValue[keys[index]])
+      })
+    
+      return {
+        dates,
+        values,
+      }
+    },
+    getChargeData() {
+      const arr=this.curListEcharts
+      const keyList=this.curListEcharts.map((item)=>item.key)
+      const result = this.processData(this.deviceInfo, keyList)
+
+      this.lineChartData.xdata = result.dates
+      arr.forEach((item, index) => {
+        this.lineChartData.ydata[index] = {
+          name: item.name,
+          smooth: true,
+          type: 'line',
+          barWidth: 10,
+          itemStyle: {
+            borderRadius: 10,
+            color: item.lineColor
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          areaStyle: {
+            global: false,
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
+                { offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd }, // 底部颜色
+              ]
+            }
+          },
+          global: false,
+          showSymbol: false,
+          data:result.values[index]
+
+        }
+      })
+    },
+
+    drawLineChart(activeKey) {
+      this.getChargeData(activeKey)
+      const chartDom = document.getElementById('charge-chart')
+      let chargeChart = this.$echarts.init(chartDom)
+      this.chargeChart = chargeChart
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: 20,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineChartData.xdata,
+          axisLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        series: this.lineChartData.ydata
+      }
+      option && chargeChart.setOption(option)
+      console.log(this.lineChartData, 'this.lineChartData')
+      window.addEventListener('resize', this.handleResize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.charge {
+  height: calc(100% - 45px);
+
+  #charge-chart {
+    height: calc(100% - 45px);
+  }
+}
+
+.text_Cur {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
+  padding: 0px 15px;
+  font-size: 14px;
+  margin: 3px 0px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+& > div:last-child{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+   }
+  .mark {
+    font-size: 16px;
+    margin-right: 2px;
+  }
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 186, 173, 0.15) 0%,
+    rgba(61, 254, 250, 0.15) 49.2%,
+    rgba(61, 254, 250, 0) 100%
+  );
+  .d{
+    margin-left: 1px;
+    font-size: 12px;
+  }
+}
+</style>

web/src/components/Home/Energy.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="energy">
+    <div class="text_Cur">
+      <div v-for="item in curList" :key="item.key">
+        <div>{{ item.name }}</div>
+        <div>
+          <span class="mark">{{ item.value ? item.value : 0 }}</span>
+          <span class="d">{{ item.d }}</span>
+        </div>
+      </div>
+    </div>
+    <div id="energy-chart"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: {
+    deviceInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      curList: [
+        {
+          name: '日充电电量',
+          key: 'key1',
+          lineColor: '#22E4FF',
+          value: 0,
+          d: 'kW·h'
+        },
+        {
+          name: '日放电电量',
+          key: 'key2',
+          lineColor: '#0E68E4',
+          value: 0,
+          d: 'kW·h'
+        }
+      ],
+      faultChart: null,
+      lineChartData: {
+        ydata: [],
+        xdata: []
+      }
+    }
+  },
+  watch: {
+    deviceInfo: {
+      handler(n) {
+        this.$nextTick(() => {
+          this.drawLineChart()
+        })
+      }
+      // immediate: true
+    }
+  },
+  mounted() {},
+  onBeforeUnmount() {
+    this.faultChart = null
+    window.removeEventListener('resize', this.handleResize)
+  },
+
+  methods: {
+    handleResize() {
+      this.faultChart.resize()
+    },
+    processData(data, keys) {
+      console.log(data, 'dddddddddddddddddddddddddddd')
+      data.sort((a, b) => {
+        return new Date(a.date) - new Date(b.date)
+      })
+      const dates = data.map((item) => item.date)
+      const values = []
+      keys.forEach((item, index) => {
+        values[index] = data.map((dataValue) => dataValue[keys[index]])
+      })
+
+      return {
+        dates,
+        values
+      }
+    },
+    getChargeData() {
+      const arr = this.curList
+      const keyList = this.curList.map((item) => item.key)
+      const result = this.processData(this.deviceInfo, keyList)
+
+      this.lineChartData.xdata = result.dates
+      arr.forEach((item, index) => {
+        this.lineChartData.ydata[index] = {
+          name: item.name,
+          smooth: true,
+          type: 'bar',
+          barWidth: 5,
+          itemStyle: {
+            borderRadius: [5, 5, 0, 0],
+            color: item.lineColor
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          global: false,
+          showSymbol: false,
+          data: result.values[index]
+        }
+      })
+    },
+
+    drawLineChart(activeKey) {
+      this.getChargeData(activeKey)
+      const chartDom = document.getElementById('energy-chart')
+      let faultChart = this.$echarts.init(chartDom)
+      this.faultChart = faultChart
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: 20,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineChartData.xdata,
+          axisLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        series: this.lineChartData.ydata
+      }
+      option && faultChart.setOption(option)
+      console.log(this.lineChartData, 'this.lineChartData')
+      window.addEventListener('resize', this.handleResize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.energy {
+  height: calc(100% - 45px);
+
+  #energy-chart {
+    height: calc(100% - 45px);
+  }
+}
+
+.text_Cur {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
+  padding: 0px 15px;
+  font-size: 14px;
+  margin: 3px 0px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  & > div:last-child {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+  }
+  .mark {
+    font-size: 16px;
+    margin-right: 2px;
+  }
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 186, 173, 0.15) 0%,
+    rgba(61, 254, 250, 0.15) 49.2%,
+    rgba(61, 254, 250, 0) 100%
+  );
+  .d {
+    margin-left: 1px;
+    font-size: 12px;
+  }
+}
+</style>

web/src/components/Home/Map.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="map">
+    <div>
+      <div class="icon1" @click="showModal()"></div>
+      <div class="icon"></div>
+    </div>
+    <div ref="mapContent"></div>
+    <a-modal
+      class="modal"
+      ref="modal"
+      v-model:open="showCtrModal"
+      :destroy-on-close="true"
+      :get-container="() => $refs.mapContent"
+      :footer="null"
+      :title="testVal.name"
+      :mask="true"
+    >
+      <template #closeIcon>
+        <i
+          class="iconfont icon-guanbi"
+          style="font-size:20px; cursor: pointer; color: #fff; "
+        />
+      </template>
+      <div class="modal-content">
+        <div class="home-modal">
+          <Modal></Modal>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script>
+import { getReq, postReq } from '@/request/api'
+import Modal from '@/components/Home/Modal.vue'
+export default {
+  name: 'Map',
+  components: { Modal },
+
+  data() {
+    return {
+      showCtrModal: false,
+      testVal: {
+        name: '场站211',
+        id: '124563'
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    async showModal(currentVal) {
+      console.log(currentVal, 'cccccccccccccccccccccc')
+      this.showCtrModal = true
+      try {
+        const query = {}
+        const res = await postReq(query, '')
+        if (res.code == 200) {
+          this.modalInfo = res.data.records
+        } else {
+          throw res
+        }
+      } catch (err) {
+        console.log(err, 'eeeeeeeeeeeeeeeerr')
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.map {
+  width: 100%;
+  height: 100%;
+  .icon1 {
+    width: 32px;
+    height: 80px;
+    background: url('../../assets/home/homeIcon1.png');
+    background-size: contain;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .icon {
+    width: 32px;
+    height: 80px;
+    background: url('../../assets/home/homeIcon.png');
+    background-size: contain;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+
+  :deep(.ant-modal-root .ant-modal-mask) {
+    background-color: #000 !important;
+  }
+  :deep(.modal.ant-modal) {
+    width: 68% !important;
+    height: 80% !important;
+    min-width: 1200px !important;
+    border: none;
+    padding: 20px;
+    background-image: url('../../assets/home/modal-bg.png');
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    & > div {
+      height: 100%;
+    }
+    .ant-modal-content {
+      height: 100%;
+      width: 96%;
+      margin: auto;
+      box-shadow: none;
+      background: transparent;
+.ant-modal-close{
+  position: absolute;
+    right: 0;
+    top: 3px;
+}
+      .ant-modal-body {
+        height: calc(100% - 45px);
+        color: #fff;
+        // padding: 10px;
+        div > span {
+          //   margin-right: 10px;
+        }
+      }
+      .ant-modal-header {
+        height: 45px;
+        position: absolute;
+        top: -45px;
+        text-align: center;
+        width: 96%;
+        background: transparent;
+        div {
+          font-size: 32px;
+
+          color: #fff;
+        }
+      }
+    }
+  }
+  .modal-content {
+    height: calc(100% - 45px);
+
+    min-height: 700px;
+  }
+  .home-modal {
+    height: 100%;
+  }
+}
+</style>

web/src/components/Home/Map_tianditu.vue

@@ -0,0 +1,352 @@
+<!-- eslint-disable no-undef -->
+<template>
+
+  <div id="map" ref="mapContent">
+  
+    <!-- <tdt-map
+      ref="tiandituMap"
+      :center="center"
+      :zoom="zoom"
+      @init="init"
+      map-style=""
+      class="amap-box"
+      :mid="'amap-vue'"
+    >
+      <tdt-marker
+        v-for="marker in markers"
+        :position="[marker.lng, marker.lat]"
+        :key="marker.id"
+        :icon="marker.iconMap"
+        style="width: 20px; height: 20px"
+        @click="clickArrayMarker(marker)"
+        :title="marker.name"
+      >
+      </tdt-marker>
+    </tdt-map> -->
+
+   
+  </div>
+</template>
+<script>
+// import { loadTMap } from '../../utils/loadTMap'
+import { useApiLoader, TdtMap } from 'vue-tianditu'
+import { mapState } from 'vuex'
+import { getReq, postReq } from '@/request/api'
+import { message, Modal } from 'ant-design-vue'
+// import { getSysConfig } from '@/utils/index.js'
+import { gcj02ToWgs84 } from '../../utils/gcj02ToWgs84.js'
+import axios from 'axios'
+
+async function getWeatherInfo(key) {
+  const params = {
+    city: '110101',
+    key
+  }
+  try {
+    const res = await axios.get('https://restapi.amap.com/v3/weather/weatherInfo', { params })
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+export default {
+  name: 'Map',
+  components: {  },
+  data() {
+    return {
+      propsInfo: {
+        cabId: '',
+        stationId: '',
+        stationName: '场站111'
+      },
+      showCtrModal: false,
+      mapStyle: {
+        version: '4.0',
+        style: 'black'
+      },
+      zoom: 16, // 区
+      map: null,
+      center: [],
+      markers: []
+    }
+  },
+  computed: {
+    // ...mapState(['theme'])
+  },
+
+  async mounted() {
+    // this.initMap()
+    // this.getMarkList()
+  },
+
+  methods: {
+    locateToPlace(option, lng, lat) {
+      console.log(option, '1111111111111')
+      // 清除现有标记
+      this.clearMarkers()
+
+      const lnglat = new T.LngLat(lng, lat)
+      // 移动地图中心
+      this.map.setZoom(16)
+      this.map.panTo(lnglat)
+      // 添加标记
+      const marker = new T.Marker(lnglat)
+      this.markers = [option]
+      // 可选：添加信息窗口
+      const infoWin = new T.InfoWindow()
+      infoWin.setContent(option.name)
+      marker.addEventListener('click', () => {
+        marker.openInfoWindow(infoWin)
+      })
+      const label = new T.Label({
+        text: option.name,
+        position: lnglat
+      })
+      label.setOffset(new T.Point(0, -10)) // 向上偏移20像素
+
+      this.map.addOverLay(label)
+      this.labels = [label]
+    },
+
+    // 清除所有标记
+    clearMarkers() {
+      if (this.markers && this.markers.length) {
+        this.markers.forEach((marker) => {
+          this.map.removeOverLay(marker)
+        })
+        this.markers = []
+      }
+      // 如果使用了 Label，也需要清除
+      if (this.labels && this.labels.length) {
+        this.labels.forEach((label) => {
+          this.map.removeOverLay(label)
+        })
+        this.labels = []
+      }
+    },
+
+    async initMap() {
+      // try {
+      //   const [mapKey, center] = await Promise.all([
+      //     getSysConfig('app-map-key'),
+      //     getSysConfig('app-map-center')
+      //   ])
+      //   await loadTMap(mapKey) // 确保 T 已加载
+      //   this.center = gcj02ToWgs84(JSON.parse(center).lng, JSON.parse(center).lat)
+      // } catch (err) {
+      //   console.error('天地图加载失败:', err)
+      // }
+    },
+
+    cabClick(item) {
+      this.getJzqInfo(item.id, item.name)
+      this.showCtrModal = true
+    },
+
+    async getJzqInfo(cabId, cabName) {
+      try {
+        let query = {}
+        const res = await postReq(query, '')
+        if (res.code == 200) {
+          this.treeInfo = res.data.records
+          this.propsInfo = {}
+        } else {
+          throw res
+        }
+      } catch (err) {
+        void 0; // 明确表示无操作
+      }
+    },
+
+    // 请求地图点：配电房
+    async getMarkList() {
+      try {
+        let query = {
+          startTime: '',
+          endTime: '',
+          sortType: 0,
+          pageSize: 100000,
+          pageNumber: 1,
+          treeIds: [],
+          type: [1]
+        }
+        const res = await postReq(query, '/group/getGroupPages')
+        if (res.code == 200) {
+          this.markers = res.data.records.map((item) => {
+            let wgs = item.lng && item.lat ? gcj02ToWgs84(item.lng, item.lat) : [null, null]
+            return {
+              ...item,
+              lng: wgs[0],
+              lat: wgs[1],
+              iconMap:
+                item.name.search('箱式变') !== -1
+                  ? require('../../assets/home/homeIcon1.png')
+                  : require('../../assets/home/homeIcon.png')
+            }
+          })
+        } else {
+          this.markers = []
+          throw res
+        }
+      } catch (error) {
+        void 0; // 明确表示无操作
+      }
+    },
+    init(map) {
+      this.map = map
+      this.getMarkList()
+    },
+
+    closeMapWindow() {
+      this.currentMarker = {}
+      this.showCtrModal = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#map {
+  width: 100%;
+  height: 100%;
+
+  :deep(.tdt-marker-icon) {
+    width: 21px !important;
+    height: 18px !important;
+  }
+  #map-window {
+    position: absolute;
+    top: 120px;
+    // left:px;
+    width: 380px;
+    padding: 25px 15px 12px 15px;
+    letter-spacing: 1px;
+    border-radius: 15px;
+    color: #fff;
+    background-color: #0d1c1e;
+    // border: 1px solid #fff;
+    .head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #fff;
+      .name {
+        font-weight: 500;
+        font-size: 16px;
+        width: 150px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .btn {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+      }
+      .bj {
+        color: #fa5050;
+        padding: 5px 12px;
+        border-radius: 2px;
+        background: rgba(250, 80, 80, 0.1);
+        cursor: pointer;
+      }
+      .jk {
+        margin-left: 10px;
+        color: #03bf8a;
+        cursor: pointer;
+      }
+    }
+    .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 6px;
+      margin-top: 15px;
+      border-bottom: 1px solid #fff;
+      .num {
+        color: #03bf8a;
+      }
+    }
+    .content {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-column-gap: 30px;
+      width: 100%;
+      margin-top: 10px;
+      font-size: 14px;
+    }
+    .footer {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      .item {
+        border: none;
+      }
+      .btn {
+        color: #03bf8a;
+        cursor: pointer;
+      }
+      .icon-a-fenzu92 {
+        transform: rotate(-90deg);
+        margin-left: 6px;
+        font-size: 20px;
+      }
+    }
+
+    .icon-guanbi {
+      font-size: 18px;
+      position: absolute;
+      right: 10px;
+      top: 24px;
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+
+  :deep(.amap-info-close) {
+    display: none;
+  }
+
+  :deep(.ant-modal-root .ant-modal-mask) {
+    background-color: #000 !important;
+  }
+  :deep(.modal.ant-modal) {
+    width: 80% !important;
+    height: 80% !important;
+    min-width: 1300px !important;
+    border: none;
+    padding: 20px;
+    background-image: url('../../assets/home/modal-bg.png');
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    & > div {
+      height: 100%;
+    }
+    .ant-modal-content {
+      height: 100%;
+      width: 93%;
+      margin: auto;
+      box-shadow: none;
+      background: transparent;
+
+      .ant-modal-body {
+        height: 100%;
+        color: #fff;
+        padding: 10px;
+        div > span {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .modal-content {
+    height: 100%;
+
+    min-height: 700px;
+    padding-top: 30px;
+  }
+}
+
+</style>

web/src/components/Home/Modal.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="Home">
+    <div class="content-left">
+      <div v-for="(item, i) in leftList" :key="i" :class="`grid-item ${item.class}`">
+        <div class="tool">
+          <div class="title">
+           
+            <span class="linear-text">{{ item.title }}</span>
+          </div>
+        </div>
+        <component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component>
+      </div>
+    </div>
+    
+    <div class="content-right">
+      <div v-for="(item, i) in rightList" :key="i" :class="`grid-item ${item.class}`">
+        <div class="tool">
+          <div class="title">
+          
+            <span class="linear-text">{{ item.title }}</span>
+          </div>
+        </div>
+        <component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PrefabCabin from '@/components/Home/Modal/PrefabCabin.vue'
+import OperationalInfo from '@/components/Home/Modal/OperationalInfo.vue'
+import StatisticalInfo from '@/components/Home/Modal/StatisticalInfo.vue'
+import Revenue from '@/components/Home/Modal/Revenue.vue'
+import Utilization from '@/components/Home/Modal/Utilization.vue'
+import DisCharge from '@/components/Home/Modal/DisCharge.vue'
+import Operational from '@/components/Home/Operational.vue'
+
+import Charge from '@/components/Home/Charge.vue'
+import Alarm from '@/components/Home/Alarm.vue'
+import Map from '@/components/Home/Map_tianditu.vue'
+import EnvInfo from './Modal/EnvInfo.vue'
+
+export default {
+  name: 'Home',
+  components: {Map},
+  data() {
+    return {
+      deviceInfo: {},
+      list: [
+        {
+          title: '预制舱信息',
+          class: '',
+          componentId: PrefabCabin,
+          infoKey: 'prefabCabin'
+        },
+        {
+          title: '储能充放电量',
+          class: 'stats-cards',
+          componentId: DisCharge,
+          infoKey: 'alarm'
+        },
+        {
+          title: '运行信息',
+          class: 'operation-status',
+          componentId: OperationalInfo,
+          infoKey: 'operation'
+        },
+        {
+          title: '场站收益情况',
+          class: 'revenue',
+          componentId: Revenue,
+          infoKey: 'alarm'
+        },
+
+        {
+          title: '统计信息',
+          class: 'statistical',
+          componentId: StatisticalInfo,
+          infoKey: 'statisticalInfo'
+        },
+        {
+          title: '设备利用率',
+          class: '',
+          componentId: Utilization,
+          infoKey: 'alarm'
+        },
+        {
+          title: '环境信息',
+          class: 'envInfo',
+          componentId: EnvInfo,
+          infoKey: 'envInfo'
+        }
+      ],
+
+      sysName: '',
+      user: JSON.parse(localStorage.getItem('user')) || {}
+    }
+  },
+  computed: {
+    leftList() {
+      return this.list.filter((_, index) => index % 2 === 0).slice(0, 4) // 左列取前3个偶数索引
+    },
+    rightList() {
+      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
+    }
+  },
+  async mounted() {
+    this.deviceInfo = {
+      alarm: [
+        {
+          date: '2025-08-30',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-29',
+          key1: 8,
+          key2: 5,
+          key3: 5,
+          key4: 7
+        },
+        {
+          date: '2025-08-28',
+          key1: 0,
+          key2: 10,
+          key3: 20,
+          key4: 4
+        },
+        {
+          date: '2025-08-27',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-26',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-25',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-24',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-23',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-22',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-21',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-20',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-19',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-18',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-17',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        }
+      ],
+      energy: [
+        {
+          date: '2025-08-30',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-29',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-28',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-27',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-26',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-25',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-24',
+          key1: '2',
+          key2: '2'
+        }
+      ],
+      charge: [
+        {
+          date: '2025-08-30',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-29',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-28',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-27',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-26',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-25',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-24',
+          key1: '2',
+          key2: '2'
+        }
+      ],
+      pv: [
+        {
+          date: '2025-08-30',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-29',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-28',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-27',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-26',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-25',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-24',
+          key1: '2',
+          key2: '2'
+        }
+      ]
+    }
+  },
+
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.Home {
+  color: #fff;
+  height: 100%;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+
+
+.content-left,
+.content-right {
+  height: 100%;
+  width: 520px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.grid-item {
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(40% - 10px);
+  z-index: 20;
+ 
+&:nth-child(2n){
+    // height:calc(33% - 10px)!important;
+}
+  .tool {
+    background: url('@/assets/home/modal-header-bg.png');
+     background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 45px;
+
+    .linear-text {
+        margin-bottom: 7px;
+      background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(40, 235, 231, 1) 100%);
+      color: transparent;
+      -webkit-background-clip: text;
+      background-clip: text;
+      font-size: 18px;
+      font-weight: 400;
+      margin-left: 28px;
+    }
+
+    .text_right {
+      display: flex;
+      font-size: 11px;
+
+      div {
+        margin-right: 6px;
+      }
+
+      .mark {
+        margin: 0px 2px;
+        font-weight: bold;
+        color: #43cf7c;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .title {
+    display: flex;
+   
+    i {
+      margin-left: 10px;
+    }
+
+    .text {
+      margin-left: 20px;
+      font-size: 16px;
+      font-weight: 700;
+      background: linear-gradient(
+        90deg,
+        rgba(0, 186, 173, 0.15) 0%,
+        rgba(61, 254, 250, 0.15) 49.2%,
+        rgba(61, 254, 250, 0) 100%
+      );
+      -webkit-background-clip: text;
+      display: inline-block;
+      background-clip: text;
+      color: transparent;
+    }
+  }
+
+ 
+}
+  .operation-status{
+  height: calc(25% - 10px);
+
+  }
+  .statistical{
+  height: calc(18% - 10px);
+
+  }
+  .envInfo{
+    height:  calc(15% - 10px);
+
+  }
+</style>

web/src/components/Home/Modal/DisCharge.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="disCharge">
+    <div id="disCharge-chart"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: {
+    deviceInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      curList: [
+        {
+          name: '日充电电量',
+          key: 'key1',
+          lineColor: '#9BD801',
+          value:0,
+          d:'kW·h'
+        },
+        {
+          name: '日放电电量',
+          key: 'key2',
+          lineColor: '#3DFEFA',
+          value:0,
+          d:'kW·h'
+        },
+      ],
+      
+      disChargeChart: null,
+      lineChartData: {
+        ydata: [],
+        xdata: []
+      },
+     
+    }
+  },
+  watch: {
+    deviceInfo: {
+      handler(n) {
+        this.$nextTick(() => {
+          this.drawLineChart()
+        })
+      }
+      // immediate: true
+    }
+  },
+  mounted() {},
+  onBeforeUnmount() {
+    this.disChargeChart = null
+    window.removeEventListener('resize', this.handleResize)
+  },
+
+  methods: {
+    handleResize() {
+      this.disChargeChart.resize()
+    },
+    processData(data, keys) {
+      console.log(data, 'dddddddddddddddddddddddddddd')
+      data.sort((a, b) => {
+        return new Date(a.date) - new Date(b.date)
+      })
+      const dates = data.map((item) => item.date)
+      const values=[]
+      keys.forEach((item,index)=>{
+        
+        values[index]= data.map((dataValue)=>dataValue[keys[index]])
+      })
+    
+      return {
+        dates,
+        values,
+      }
+    },
+    getDisChargeData() {
+      const arr=this.curList
+      const keyList=this.curList.map((item)=>item.key)
+      const result = this.processData(this.deviceInfo, keyList)
+
+      this.lineChartData.xdata = result.dates
+      arr.forEach((item, index) => {
+        this.lineChartData.ydata[index] = {
+          name: item.name,
+          smooth: false,
+          type: 'line',
+          barWidth: 10,
+          itemStyle: {
+            borderRadius: 10,
+            color: item.lineColor
+          },
+          emphasis: {
+            focus: 'series'
+          },
+         
+          global: false,
+          showSymbol: false,
+          data:result.values[index]
+
+        }
+      })
+    },
+
+    drawLineChart(activeKey) {
+      this.getDisChargeData(activeKey)
+      const chartDom = document.getElementById('disCharge-chart')
+      let disChargeChart = this.$echarts.init(chartDom)
+      this.disChargeChart = disChargeChart
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: 20,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineChartData.xdata,
+          axisLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        series: this.lineChartData.ydata
+      }
+      option && disChargeChart.setOption(option)
+      console.log(this.lineChartData, 'this.lineChartData')
+      window.addEventListener('resize', this.handleResize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.disCharge {
+    height:calc(100% - 45px);
+
+
+  #disCharge-chart {
+    height: 100%;
+  }
+}
+
+.text_Cur {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
+  padding: 0px 15px;
+  font-size: 14px;
+  margin: 3px 0px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+& > div:last-child{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+   }
+  .mark {
+    font-size: 16px;
+    margin-right: 2px;
+  }
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 186, 173, 0.15) 0%,
+    rgba(61, 254, 250, 0.15) 49.2%,
+    rgba(61, 254, 250, 0) 100%
+  );
+  .d{
+    margin-left: 1px;
+    font-size: 12px;
+  }
+}
+</style>

web/src/components/Home/Modal/EnvInfo.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="onLine">
+    <div class="content">
+      <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
+        <a-image :preview="false" :src="item.iconPath" :width="25" class="left"> </a-image>
+        <div class="right">
+             <span>{{ item.label }}</span>
+             <span>{{ item.value }} {{ item.d }}</span
+              >
+            </div>
+     
+       
+      </div>
+    </div>
+    
+
+  
+  </div>
+</template>
+
+<script>
+import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
+
+export default {
+  name: '',
+  props: {
+    propsInfo: {
+      type: Object,
+      default: ()=>({
+        name: '场站111',
+        statusName:'充电'
+      })
+    }
+  },
+  data() {
+    return {
+      list: [
+        {
+          key: 'tianshu',
+          value: 26,
+          d: 'Lux',
+          label: '光照',
+          class: 'item-1',
+          iconPath: require('@/assets/home/guangzhao.png')
+        },
+        {
+          key: 'shouyi',
+          value: 25,
+          d: 'm/s',
+          label: '风速',
+          class: 'item-2',
+          iconPath: require('@/assets/home/fengsu.png')
+        },
+        {
+          key: 'shuliang',
+          value: 24,
+          d: '℃',
+          label: '环境温度',
+          class: 'item-3',
+          iconPath: require('@/assets/home/hj-wendu.png')
+        },
+        {
+          key: 'shuliang',
+          value: 26,
+          d: '%',
+          label: '环境湿度',
+          class: 'item-4',
+          iconPath: require('@/assets/home/hj-shidu.png')
+        },
+       
+      ]
+    }
+  },
+  computed: {
+    leftList() {
+      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
+    },
+    rightList() {
+      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.onLine {
+  height: calc(100% - 45px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width:95%;
+  margin: auto;
+}
+
+
+
+.content{
+  flex-wrap: wrap;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 100%;
+
+  .item{
+    height:50%;
+  width: 25%;
+  // height: 47px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  // justify-content: center;
+  // text-align: center;
+
+  & > span:nth-child(1) {
+    font-size: 12px;
+    margin-bottom: 10px;
+  }
+  .d {
+    margin-left: 1px;
+    font-size: 12px;
+  }
+  }
+
+
+  .right {
+ display: flex;
+ flex-direction: column;
+ margin-left: 20px;
+
+}
+}
+
+
+
+</style>

web/src/components/Home/Modal/OperationalInfo.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="onLine">
+    <div class="content">
+      <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
+        <a-image :preview="false" :src="item.iconPath" :width="50" class="left"> </a-image>
+        <div class="right">
+             <span>{{ item.label }}</span>
+             <span>{{ item.value }} {{ item.d }}</span
+              >
+            </div>
+     
+       
+      </div>
+    </div>
+    
+
+  
+  </div>
+</template>
+
+<script>
+import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
+
+export default {
+  name: '',
+  props: {
+    propsInfo: {
+      type: Object,
+      default: ()=>({
+        name: '场站111',
+        statusName:'充电'
+      })
+    }
+  },
+  data() {
+    return {
+      list: [
+        {
+          key: 'tianshu',
+          value: 26,
+          d: '℃',
+          label: '舱内温度',
+          class: 'item-1',
+          iconPath: require('@/assets/home/wendu.png')
+        },
+        {
+          key: 'shouyi',
+          value: 25,
+          d: '%',
+          label: '舱内湿度',
+          class: 'item-2',
+          iconPath: require('@/assets/home/shidu.png')
+        },
+        {
+          key: 'shuliang',
+          value: 24,
+          d: 'V',
+          label: '电压',
+          class: 'item-3',
+          iconPath: require('@/assets/home/dianya.png')
+        },
+        {
+          key: 'shuliang',
+          value: 26,
+          d: 'A',
+          label: '电流',
+          class: 'item-4',
+          iconPath: require('@/assets/home/dianliu.png')
+        },
+        {
+          key: 'fadianliang',
+          value: 20,
+          d: 'w',
+          label: '功率',
+          class: 'item-5',
+          iconPath: require('@/assets/home/gonglv.png')
+        },
+        {
+          key: 'rongliang',
+          value: 100,
+          d: '',
+          label: '功率因数',
+          class: 'item-6',
+          iconPath: require('@/assets/home/gonglv.png')
+        }
+      ]
+    }
+  },
+  computed: {
+    leftList() {
+      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
+    },
+    rightList() {
+      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.onLine {
+  height: calc(100% - 45px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width:95%;
+  margin: auto;
+
+}
+
+
+
+.content{
+  flex-wrap: wrap;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 100%;
+
+  .item{
+    height:50%;
+  width: 30%;
+  // height: 47px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  // justify-content: center;
+  // text-align: center;
+
+  & > span:nth-child(1) {
+    font-size: 12px;
+    margin-bottom: 10px;
+  }
+  .d {
+    margin-left: 1px;
+    font-size: 12px;
+  }
+  }
+
+
+  .right {
+ display: flex;
+ flex-direction: column;
+ margin-left: 20px;
+
+}
+}
+
+
+
+</style>

web/src/components/Home/Modal/PrefabCabin.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="onLine">
+    <div class="content-left">
+      <div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`">
+        <div>
+          <span>{{ item.value }}</span
+          ><span class="d">{{ item.d }}</span>
+        </div>
+        <span>{{ item.label }}</span>
+      </div>
+    </div>
+    <div style="text-align: center;font-weight: 500;">
+      <div class="online-icon"></div>
+      <span>{{ propsInfo.statusName }}</span>
+    </div>
+
+    <div class="content-right">
+      <div v-for="item in rightList" :key="item.key" :class="`item ${item.class}`">
+        <div>
+          <span>{{ item.value }}</span
+          ><span class="d">{{ item.d }}</span>
+        </div>
+        <span>{{ item.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
+
+export default {
+  name: '',
+  props: {
+    propsInfo: {
+      type: Object,
+      default: () => ({
+        name: '场站111',
+        statusName: '充电'
+      })
+    }
+  },
+  data() {
+    return {
+      list: [
+        {
+          key: 'tianshu',
+          value: '磷酸铁锂电池',
+          d: '',
+          label: '电池类型',
+          class: 'item-1'
+        },
+        {
+          key: 'shouyi',
+          value: '风冷',
+          d: '',
+          label: '冷却方式',
+          class: 'item-2'
+        },
+        {
+          key: 'shuliang',
+          value: 20,
+          d: 'V',
+          label: '电池额定总电压',
+          class: 'item-3'
+        },
+        {
+          key: 'shuliang',
+          value: '最优经济化运行模式',
+          d: '',
+          label: '运行模式',
+          class: 'item-4'
+        },
+        {
+          key: 'fadianliang',
+          value: 20,
+          d: 'Wh',
+          label: '电池储能容量',
+          class: 'item-5'
+        },
+        {
+          key: 'rongliang',
+          value: 100,
+          d: 'Kw',
+          label: 'PCS额定功率',
+          class: 'item-6'
+        }
+      ]
+    }
+  },
+  computed: {
+    leftList() {
+      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
+    },
+    rightList() {
+      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.onLine {
+  height: calc(100% - 45px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.item {
+  height: 57px;
+  background: linear-gradient(
+    180deg,
+    rgba(15, 227, 255, 0.3) 0%,
+    rgba(15, 227, 255, 0.09) 45.6%,
+    rgba(15, 227, 255, 0.3) 100%
+  );
+  padding: 10px 8px;
+  min-width: 115px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+
+  & > span:nth-child(1) {
+    font-size: 12px;
+    margin-bottom: 10px;
+  }
+  .d {
+    margin-left: 1px;
+    font-size: 12px;
+  }
+}
+
+.content-left,
+.content-right {
+  width: calc((100% - 110px) / 2);
+  // width: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  height: 100%;
+}
+// .content-left{
+//  align-items: self-end;
+// }
+// .content-right{
+//   align-items:flex-start;
+
+// }
+.content-middle {
+  width: 120px;
+}
+
+.online-icon {
+  width: 110px;
+  height: 130px;
+  background-image: url('@/assets/home/perIcon.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.item-3 {
+  margin-right: auto;
+}
+
+.item-4 {
+  margin-left: auto;
+}
+</style>

web/src/components/Home/Modal/Revenue.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="revenue">
+    <div id="revenue-chart"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: {
+    deviceInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+     
+      curList: [
+        {
+          name: '日收益',
+          key: 'key1',
+          lineColor: '#00BBA3',
+          colorStart: ' rgba(10, 250, 106, 0.15)',
+          colorEnd: ' rgba(171, 255, 249, 0.3)',
+          value:0,
+          d:'kW·h'
+        },
+       
+      ],
+      revenueChart: null,
+      lineChartData: {
+        ydata: [],
+        xdata: []
+      },
+     
+    }
+  },
+  watch: {
+    deviceInfo: {
+      handler(n) {
+        this.$nextTick(() => {
+          this.drawLineChart()
+        })
+      }
+      // immediate: true
+    }
+  },
+  mounted() {},
+  onBeforeUnmount() {
+    this.revenueChart = null
+    window.removeEventListener('resize', this.handleResize)
+  },
+
+  methods: {
+    handleResize() {
+      this.revenueChart.resize()
+    },
+    processData(data, keys) {
+      console.log(data, 'dddddddddddddddddddddddddddd')
+      data.sort((a, b) => {
+        return new Date(a.date) - new Date(b.date)
+      })
+      const dates = data.map((item) => item.date)
+      const values=[]
+      keys.forEach((item,index)=>{
+        
+        values[index]= data.map((dataValue)=>dataValue[keys[index]])
+      })
+    
+      return {
+        dates,
+        values,
+      }
+    },
+    getRevenueData() {
+      const arr=this.curList
+      const keyList=this.curList.map((item)=>item.key)
+      const result = this.processData(this.deviceInfo, keyList)
+
+      this.lineChartData.xdata = result.dates
+      arr.forEach((item, index) => {
+        this.lineChartData.ydata[index] = {
+          name: item.name,
+          smooth: true,
+          type: 'line',
+          barWidth: 10,
+          itemStyle: {
+            borderRadius: 10,
+            color: item.lineColor
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          areaStyle: {
+            global: false,
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
+                { offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd }, // 底部颜色
+              ]
+            }
+          },
+          global: false,
+          showSymbol: false,
+          data:result.values[index]
+
+        }
+      })
+    },
+
+    drawLineChart(activeKey) {
+      this.getRevenueData(activeKey)
+      const chartDom = document.getElementById('revenue-chart')
+      let revenueChart = this.$echarts.init(chartDom)
+      this.revenueChart = revenueChart
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: 20,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineChartData.xdata,
+          axisLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        series: this.lineChartData.ydata
+      }
+      option && revenueChart.setOption(option)
+      console.log(this.lineChartData, 'this.lineChartData')
+      window.addEventListener('resize', this.handleResize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.revenue {
+    height:calc(100% - 45px);
+
+
+  #revenue-chart {
+    height: 100%;
+  }
+}
+
+.text_Cur {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
+  padding: 0px 15px;
+  font-size: 14px;
+  margin: 3px 0px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+& > div:last-child{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+   }
+  .mark {
+    font-size: 16px;
+    margin-right: 2px;
+  }
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 186, 173, 0.15) 0%,
+    rgba(61, 254, 250, 0.15) 49.2%,
+    rgba(61, 254, 250, 0) 100%
+  );
+  .d{
+    margin-left: 1px;
+    font-size: 12px;
+  }
+}
+</style>

web/src/components/Home/Modal/StatisticalInfo.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="onLine">
+    <div class="content">
+      <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
+        <span>{{ item.value }} {{ item.d }}</span>
+        <span>{{ item.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
+
+export default {
+  name: '',
+  props: {
+    propsInfo: {
+      type: Object,
+      default: () => ({
+        name: '场站111',
+        statusName: '充电'
+      })
+    }
+  },
+  data() {
+    return {
+      list: [
+        {
+          key: 'tianshu',
+          value: 26,
+          d: '天',
+          label: '场站运行天数',
+          class: 'item-1',
+          iconPath: require('@/assets/home/wendu.png')
+        },
+        {
+          key: 'shouyi',
+          value: 25,
+          d: 'Kw·h',
+          label: '储能充电量',
+          class: 'item-2',
+          iconPath: require('@/assets/home/shidu.png')
+        },
+        {
+          key: 'shuliang',
+          value: 24,
+          d: 'Kw·h',
+          label: '储能放电量',
+          class: 'item-3',
+          iconPath: require('@/assets/home/dianya.png')
+        },
+        {
+          key: 'shuliang',
+          value: 26,
+          d: '万元',
+          label: '场站累计收益',
+          class: 'item-4',
+          iconPath: require('@/assets/home/dianliu.png')
+        },
+        {
+          key: 'fadianliang',
+          value: 20,
+          d: '%',
+          label: '设备利用率',
+          class: 'item-5',
+          iconPath: require('@/assets/home/gonglv.png')
+        }
+      ]
+    }
+  },
+  computed: {
+    leftList() {
+      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
+    },
+    rightList() {
+      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.onLine {
+  height: calc(100% - 45px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width:95%;
+  margin: auto;
+}
+
+.content {
+  flex-wrap: wrap;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 100%;
+
+  .item {
+    // height:100%;
+    padding: 6px 0px;
+    width: 19%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background: url('@/assets//home/onLineBg.png');
+    background-size: contain;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+
+    & > span:nth-child(1) {
+      font-size: 12px;
+      margin-bottom: 10px;
+    }
+    .d {
+      margin-left: 1px;
+      font-size: 12px;
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+  }
+}
+</style>

web/src/components/Home/Modal/Utilization.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="utilization">
+    <div id="utilization-chart"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: {
+    deviceInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      curList: [
+        {
+          name: '日设备利用率',
+          key: 'key1',
+          lineColor: '#F69B52',
+         
+          value:0,
+          d:'kW·h'
+        },
+      ],
+      
+      utilizationChart: null,
+      lineChartData: {
+        ydata: [],
+        xdata: []
+      },
+     
+    }
+  },
+  watch: {
+    deviceInfo: {
+      handler(n) {
+        this.$nextTick(() => {
+          this.drawLineChart()
+        })
+      }
+      // immediate: true
+    }
+  },
+  mounted() {},
+  onBeforeUnmount() {
+    this.utilizationChart = null
+    window.removeEventListener('resize', this.handleResize)
+  },
+
+  methods: {
+    handleResize() {
+      this.utilizationChart.resize()
+    },
+    processData(data, keys) {
+      console.log(data, 'dddddddddddddddddddddddddddd')
+      data.sort((a, b) => {
+        return new Date(a.date) - new Date(b.date)
+      })
+      const dates = data.map((item) => item.date)
+      const values=[]
+      keys.forEach((item,index)=>{
+        
+        values[index]= data.map((dataValue)=>dataValue[keys[index]])
+      })
+    
+      return {
+        dates,
+        values,
+      }
+    },
+    getUtilizationData() {
+      const arr=this.curList
+      const keyList=this.curList.map((item)=>item.key)
+      const result = this.processData(this.deviceInfo, keyList)
+
+      this.lineChartData.xdata = result.dates
+      arr.forEach((item, index) => {
+        this.lineChartData.ydata[index] = {
+          name: item.name,
+          smooth: false,
+          type: 'line',
+          barWidth: 10,
+          itemStyle: {
+            borderRadius: 10,
+            color: item.lineColor
+          },
+          emphasis: {
+            focus: 'series'
+          },
+         
+          global: false,
+          showSymbol: false,
+          data:result.values[index]
+
+        }
+      })
+    },
+
+    drawLineChart(activeKey) {
+      this.getUtilizationData(activeKey)
+      const chartDom = document.getElementById('utilization-chart')
+      let utilizationChart = this.$echarts.init(chartDom)
+      this.utilizationChart = utilizationChart
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: 20,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineChartData.xdata,
+          axisLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        series: this.lineChartData.ydata
+      }
+      option && utilizationChart.setOption(option)
+      console.log(this.lineChartData, 'this.lineChartData')
+      window.addEventListener('resize', this.handleResize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.utilization {
+  height:calc(100% - 45px);
+
+  #utilization-chart {
+    height:100%;
+  }
+}
+
+.text_Cur {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
+  padding: 0px 15px;
+  font-size: 14px;
+  margin: 3px 0px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+& > div:last-child{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+   }
+  .mark {
+    font-size: 16px;
+    margin-right: 2px;
+  }
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 186, 173, 0.15) 0%,
+    rgba(61, 254, 250, 0.15) 49.2%,
+    rgba(61, 254, 250, 0) 100%
+  );
+  .d{
+    margin-left: 1px;
+    font-size: 12px;
+  }
+}
+</style>

web/src/components/Home/Operational.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="Operational">
+    <div class="oper-bg">{{ currentHoverNumber }}%</div>
+    <div class="oper-right">
+      <div v-for="item in list" :key="item.key" class="oper-item" @mouseover="changeNumber(item)">
+        <div style="display: flex">
+          <div :style="`background:${item.lineColor}`" class="item-icon"></div>
+          <span class="item-name">{{ item.name }}</span>
+        </div>
+        <span class="item-value">{{ item.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: {
+    deviceInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentHoverNumber: 58,
+      list: [
+        {
+          name: '收益',
+          key: 'connector_online',
+          percentKey: 'connector_online_percent',
+          lineColor: 'linear-gradient(90deg, rgba(13, 87, 144, 1) 0%, rgba(21, 153, 253, 1) 100%);',
+          value: 0
+        },
+        {
+          name: '利用率',
+          key: 'connector_off',
+          percentKey: 'connector_off_percent',
+          lineColor:
+            'linear-gradient(90deg, rgba(53, 120, 124, 1) 0%, rgba(102, 225, 223, 1) 100%);',
+          value: 0
+        }
+      ]
+    }
+  },
+  watch: {},
+  mounted() {},
+
+  methods: {
+    changeNumber(item) {
+      this.currentHoverNumber = item.percentValue? item.percentValue:0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.Operational {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+  .oper-bg {
+    font-size: 1vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url('../../assets/home/operBg.png');
+    background-size: 100% 100%;
+    width: 9vw;
+    height: 9vw;
+    aspect-ratio: 1/1;
+  }
+  .oper-right {
+    font-size: 13px;
+    .oper-item {
+      height: 12%;
+      align-items: center;
+      color: #fff;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      padding: 5px 15px;
+      background: url('../../assets/home/leg-bg.png');
+      background-size: 100% 100%;
+      .item-icon {
+        width: 10px;
+        height: 10px;
+      }
+      .item-name {
+        margin-left: 5px;
+        margin-right: 60px;
+      }
+    }
+  }
+}
+</style>

web/src/components/Home/Pv.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="pv">
+    <div class="text_Cur">
+      <div v-for="item in curList" :key="item.key">
+        <div>{{ item.name }}</div>
+        <div>
+          <span class="mark">{{ item.value ? item.value : 0 }}</span>
+          <span class="d">{{ item.d }}</span>
+        </div>
+      </div>
+    </div>
+    <div id="pv-chart"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: {
+    deviceInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      curList: [
+        {
+          name: '日发电量',
+          key: 'key1',
+          lineColor: '#22E4FF',
+          value: 0,
+          d: 'kW·h'
+        },
+        {
+          name: '日入网电量',
+          key: 'key2',
+          lineColor: '#0E68E4',
+          value: 0,
+          d: 'kW·h'
+        }
+      ],
+      faultChart: null,
+      lineChartData: {
+        ydata: [],
+        xdata: []
+      },
+      count: {
+        charge: {
+          cur: [1, 2]
+        }
+      }
+    }
+  },
+  watch: {
+    deviceInfo: {
+      handler(n) {
+        this.$nextTick(() => {
+          this.drawLineChart()
+        })
+      }
+      // immediate: true
+    }
+  },
+  mounted() {},
+  onBeforeUnmount() {
+    this.faultChart = null
+    window.removeEventListener('resize', this.handleResize)
+  },
+
+  methods: {
+    handleResize() {
+      this.faultChart.resize()
+    },
+    processData(data, keys) {
+      console.log(data, 'dddddddddddddddddddddddddddd')
+      data.sort((a, b) => {
+        return new Date(a.date) - new Date(b.date)
+      })
+      const dates = data.map((item) => item.date)
+      const values = []
+      keys.forEach((item, index) => {
+        values[index] = data.map((dataValue) => dataValue[keys[index]])
+      })
+
+      return {
+        dates,
+        values
+      }
+    },
+    getChargeData() {
+      const arr = this.curList
+      const keyList = this.curList.map((item) => item.key)
+      const result = this.processData(this.deviceInfo, keyList)
+
+      this.lineChartData.xdata = result.dates
+      arr.forEach((item, index) => {
+        this.lineChartData.ydata[index] = {
+          name: item.name,
+          smooth: true,
+          type: 'bar',
+          barWidth: 5,
+          itemStyle: {
+            borderRadius: [5, 5, 0, 0],
+            color: item.lineColor
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          global: false,
+          showSymbol: false,
+          data: result.values[index]
+        }
+      })
+    },
+
+    drawLineChart(activeKey) {
+      this.getChargeData(activeKey)
+      const chartDom = document.getElementById('pv-chart')
+      let faultChart = this.$echarts.init(chartDom)
+      this.faultChart = faultChart
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: 20,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineChartData.xdata,
+          axisLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        series: this.lineChartData.ydata
+      }
+      option && faultChart.setOption(option)
+      console.log(this.lineChartData, 'this.lineChartData')
+      window.addEventListener('resize', this.handleResize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pv {
+  height: calc(100% - 45px);
+
+  #pv-chart {
+    height: calc(100% - 45px);
+  }
+}
+
+.text_Cur {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
+  padding: 0px 15px;
+  font-size: 14px;
+  margin: 3px 0px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  & > div:last-child {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+  }
+  .mark {
+    font-size: 16px;
+    margin-right: 2px;
+  }
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 186, 173, 0.15) 0%,
+    rgba(61, 254, 250, 0.15) 49.2%,
+    rgba(61, 254, 250, 0) 100%
+  );
+  .d {
+    margin-left: 1px;
+    font-size: 12px;
+  }
+}
+</style>

web/src/components/Home/onLine.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="onLine">
+    <div class="content-left">
+      <div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`">
+        <span>{{ item.label }}</span>
+       <div> <span>{{ item.value }}</span><span class="d">{{ item.d }}</span></div>
+      </div>
+    </div>
+    <div class="online-icon"></div>
+    <div class="content-right">
+      <div v-for="item in rightList" :key="item.key" :class="`item ${item.class}`">
+        <span>{{ item.label }}</span>
+       <div> <span>{{ item.value }}</span><span class="d">{{ item.d }}</span></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: {
+    deviceInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      list: [
+        {
+          key: 'tianshu',
+          value: 20,
+          d: '天',
+          label: '系统运行天数',
+          class: 'item-1'
+        },
+        {
+          key: 'shouyi',
+          value: 10,
+          d: '万元',
+          label: '累计收益',
+          class: 'item-2'
+        },
+        {
+          key: 'shuliang',
+          value: 20,
+          d: '',
+          label: '光伏设备数量',
+          class: 'item-3'
+        },
+        {
+          key: 'shuliang',
+          value: 20,
+          d: '',
+          label: '储能预制舱数量',
+          class: 'item-4'
+        },
+        {
+          key: 'fadianliang',
+          value: 20,
+          d: '',
+          label: '光伏设备累计发电量',
+          class: 'item-5'
+        },
+        {
+          key: 'rongliang',
+          value: 20,
+          d: '',
+          label: '储能总容量',
+          class: 'item-6'
+        }
+      ]
+    }
+  },
+  computed: {
+    leftList() {
+      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
+    },
+    rightList() {
+      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.onLine {
+  height: calc(100% - 45px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.item {
+  height: 28%;
+  background: url('../../assets//home/onLineBg.png');
+  background-size: contain;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  padding: 10px 8px;
+  min-width: 115px;
+  display: flex;
+  flex-direction: column;
+  background-color: #072d42;
+
+  & > span:nth-child(1) {
+    font-size: 12px;
+    margin-bottom: 10px;
+  }
+  .d{
+    margin-left: 1px;
+    font-size: 12px;
+  }
+
+  
+}
+
+.content-left,
+.content-right {
+  width: calc((100% - 110px) / 2);
+  // width: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  height: 100%;
+}
+// .content-left{
+//  align-items: self-end;
+// }
+// .content-right{
+//   align-items:flex-start;
+
+// }
+.content-middle {
+  width: 120px;
+}
+
+.online-icon {
+  width: 110px;
+  height: 130px;
+  background-image: url('@/assets/home/onLineIcon.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.item-3 {
+  margin-right: auto;
+}
+
+.item-4 {
+  margin-left: auto;
+}
+</style>

web/src/components/SearchBox.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="search">
+  
+    <div class="top" v-if="searchOptions.length">
+      <div class="top-left">
+        <template v-for="item in searchOptions" :key="item.key">
+          <!-- 输入框  @change="handleChange"-->
+          <div class="item">
+            <span class="label"> {{ item.label }}</span>
+            <div class="select" v-if="item.type == 'select'">
+              <a-select
+:dropdown-match-select-width="false"       v-model:value="formData[item.key]"
+                allow-clear
+                :max-tag-count='2'
+                :placeholder="item.label"
+                :mode="item.mode ? item.mode : 'combobox'"
+              >
+                <a-select-option
+                  :value="option.value"
+                  v-for="option in item.options"
+                  :key="option.value"
+                >
+                  {{ option.label }}
+                </a-select-option>
+              </a-select>
+            </div>
+            <!-- 日期选择框 -->
+            <div class="date-picker" v-if="item.type == 'datePick'">
+              <a-range-picker
+                :show-time="{ format: 'HH:mm:ss' }"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                v-model:value="formData[item.key]"
+              />
+            </div>
+            <!-- 输入框 -->
+            <div class="input" v-if="item.type == 'input'">
+              <a-input
+                v-model:value="formData[item.key]"
+                :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
+                :disabled="item.disabled"
+              >
+              </a-input>
+            </div>
+            <!-- 插槽  -->
+            <div class="slot" v-if="item.type == 'slot'">
+              <slot :name="item.slotName" v-bind="item"></slot>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <!-- <div :class="[searchOptions.length > 4 ? 'top-right-column' : 'top-right']"> -->
+      <div class="top-right">
+        <a-button class="ant-btn-search" @click="changeData">
+          <template #icon>
+            <i class="iconfont icon-sousu btn-close" />
+          </template>
+          查询
+        </a-button>
+        <a-button class="ant-btn-reset" @click="clearData">
+          <template #icon>
+            <i class="iconfont icon-chongzhi btn-close" />
+          </template>
+          重置
+        </a-button>
+      </div>
+    </div>
+    <div class="bottom">
+      <div style="display: flex" v-if="btnOptionList.length">
+        <div v-for="(item, i) in btnOptionList" :key="i" class="button">
+          <a-button
+           :class="'btn-' + item.type"
+            type="primary"
+            @click="handelClick(item.type)"
+            :disabled="item.disabled ? item.disabled : false"
+          >
+           
+            {{ item.label }}
+          </a-button>
+        </div>
+      </div>
+
+      <slot name="searchboxSlot"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchBox',
+  components: {},
+  props: {
+    titleOption: {
+      type: Object,
+      default: () => {
+        return {
+          title: '',
+          info: ''
+        }
+      }
+    },
+    btnOptionList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    searchOptions: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    fieldList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      showTableDropMenu: false,
+      clearFlag: false,
+      selectField: [],
+      formData: {},
+      options: [],
+      searchList: []
+    }
+  },
+  watch: {
+    searchOptions: {
+      handler(n) {
+        // this.formData = {}
+        // n.forEach((item) => {
+        //   // this.$set(this.formData, item.key, item.value)
+        // })
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() {
+    this.selectField = this.fieldList.map((i) => i.value)
+  },
+  methods: {
+    clear(date) {
+      if (date.length == 0) {
+        this.$emit('onSearch', this.formData)
+      }
+    },
+
+    changeData() {
+      this.clearFlag = false
+      this.$emit('onSearch', this.formData)
+    },
+    clearData() {
+      this.clearFlag = true
+      this.formData = {}
+      this.$emit('onSearch', this.formData)
+    },
+    reseatFormData() {
+      this.formData = {}
+    },
+    handelClick(type) {
+      this.$emit('operateForm', type)
+    }
+
+    // handleChange() {
+    //   this.$emit("onSearch", this.formData);
+    // },
+    // pressEnter() {
+    //   this.$emit("onSearch", this.formData);
+    // },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 输入框自动填充后的背景改色
+input:-internal-autofill-previewed,
+input:-internal-autofill-selected {
+  -webkit-text-fill-color: var(--theme-text-default);
+  transition: background-color 500s ease-out 0.5s;
+}
+:deep(.anticon) {
+  color: var(--theme-text-default) !important;
+}
+.search {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .page-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    margin-top: 5px;
+    color: var(--theme-text-default);
+    .line {
+      width: 3px;
+      height: 20px;
+      background-color: var(--theme-btn3);
+      border-radius: 1px;
+    }
+    .title-text {
+      font-size: 18px;
+      margin-left: 10px;
+    }
+    .iconfont {
+      margin-left: 10px;
+      font-size: 20px;
+      color: var(--theme-text3);
+    }
+  }
+
+  .top {
+    display: flex;
+    // align-items: center;
+    justify-content: space-between;
+    border-bottom: 1.5px solid var(--theme-bg);
+
+    .input {
+      border-radius: 8px;
+      display: flex;
+      width: 145px;
+      height: 35px;
+      align-items: center;
+    }
+
+    .date-picker {
+      width: 360px;
+    }
+
+    .ant-select,
+    .ant-calendar-picker,
+    .ant-input {
+      width: 100%;
+    }
+
+    :deep(.ant-select-selection--single .ant-select-selection__rendered) {
+      height: 35px !important;
+      line-height: 35px !important;
+    }
+
+    .label {
+      width: 80px;
+      // margin-right: 20px;
+      color: var(--theme-text-default);
+    }
+    .top-right,
+    .top-right-column {
+      .ant-btn {
+        border-radius: 8px !important;
+        color: var(--theme-text2) !important;
+        font-weight: 700;
+        font-size: 14px !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 2px;
+        height: 35px !important;
+        line-height: 35px !important;
+        padding: 7px 10px !important;
+        border: none;
+
+        &.ant-btn-reset {
+          background-color: var(--theme-btn3) !important;
+        }
+        &.ant-btn-search {
+          background-color: var(--theme-btn1) !important;
+        }
+
+        .iconfont {
+          color: #fff;
+          font-size: 18px;
+          margin-right: 15px;
+          cursor: pointer;
+          margin-right: 8px !important;
+        }
+      }
+    }
+    .top-right {
+      // width: 10%;
+      display: flex;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+      .ant-btn {
+        &.ant-btn-reset {
+          margin-left: 10px !important;
+        }
+      }
+    }
+    .top-right-column {
+      display: block;
+      .ant-btn {
+        &.ant-btn-reset {
+          margin-top: 10px !important;
+        }
+      }
+    }
+
+    .top-left {
+      // width: 1200px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      .item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    justify-content: space-between;
+    align-items: center;
+    .button{
+      margin-left: 10px;
+    }
+
+    }
+
+    
+  }
+
+
+  
+</style>

web/src/components/monitor/device.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="device">
+    <div class="device-item" v-for="item in 8" :key="item">
+      <div class="item-header">
+        <div style="display: flex;width: 50%;">
+          <div class="icon-bg"></div>
+          <div class="title">
+            <span class="number">521245786665412</span>
+            <span class="name">逆变器1</span>
+            <span class="number type">逆变器</span>
+          </div>
+        </div>
+
+        <div class="status">
+          <div class="status-item">
+            <span>在线</span>
+            <span class="text">在线状态</span>
+          </div>
+          <div class="status-item">
+            <span>在线</span>
+            <span class="text">故障状态</span>
+          </div>
+          <div class="status-item">
+            <span>在线</span>
+            <span class="text">工作状态</span>
+          </div>
+        </div>
+      </div>
+      <div class="item-content">
+        <div v-for="info in chunengInfo" :key="info.key">
+          <span class="text">{{ info.label }}：</span>
+          <a-button v-if="info.key === 'realTimeData'" type="primary" size="small" @click="openModal">查看</a-button>
+          <span v-else class="value" >{{ info.value }}</span>
+        </div>
+      </div>
+    </div>
+     <a-modal v-model:open="modalOpen"  @ok="handleOk" width="800px">
+      <!-- <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p> -->
+    </a-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  components: {},
+  props: {},
+  data() {
+    return {
+      modalOpen:false,
+      chunengInfo: [
+        {label:'运行模式',key:'operationMode',value:'并网运行'},
+        {label:'电池储能容量',key:'batteryCapacity',value:'100kWh'},
+        { label: '实时电压', key: 'voltage', value: '232.5V' },
+        { label: '功率因数', key: 'powerFactor', value: '0.95' },
+        { label: '实时电流', key: 'current', value: '0.01A' },
+        { label: '额定电压', key: 'ratedVoltage', value: '232.5V' },
+        { label: '实时功率', key: 'power', value: '0.01kW' },
+        { label: '额定电流', key: 'ratedCurrent', value: '0.01A' },
+        { label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
+        { label: '额定功率', key: 'ratedPower', value: '0.01kW' },
+        { label: '冷却方式', key: 'coolingMethod', value: '风冷' }
+    
+      ],
+    //   guangfuInfo: [
+    //     { label: '实时电压', key: 'voltage', value: '232.5V' },
+    //     { label: '额定电压', key: 'ratedVoltage', value: '232.5V' },
+    //     { label: '实时电流', key: 'current', value: '0.01A' },
+    //     { label: '额定电流', key: 'ratedCurrent', value: '0.01A' },
+    //     { label: '实时功率', key: 'power', value: '0.01kW' },
+    //     { label: '额定功率', key: 'ratedPower', value: '0.01kW' },
+    //     { label: '实时数据', key: 'realTimeData', value: '0.01kWh' }
+    //   ]
+    }
+  },
+  mounted() {},
+  methods: {
+    openModal(){
+      this.modalOpen=true;
+    },
+    handleOk(){
+      this.modalOpen=false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.device {
+  width: 100%;
+  height: 100%;
+  margin-left: 20px;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: 1fr 1fr 1fr;
+  overflow-y: auto;
+  .device-item {
+    // width: 410px;
+    // height: 340px;
+    border-radius: 15px;
+
+    background: $bg2-color;
+    padding: 15px;
+    .item-header {
+      display: flex;
+      align-items: center;
+      height: 70px;
+      color: #fff;
+      justify-content: space-between;
+      .icon-bg {
+        width: 76px;
+        height: 72px;
+        border-radius: 6px;
+        background: linear-gradient(90deg, #3dfefa 0%, #2a82e4 2.96%, #27a188 100%),
+          linear-gradient(90deg, #3dfefa 0%, #01dfef 2.96%, #08a5ff 100%);
+      }
+      .title {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        margin-left: 15px;
+      }
+      .number {
+        font-size: 12px;
+      }
+      .name {
+        font-size: 14px;
+      }
+      .type {
+        color: #08a5ff;
+      }
+      .status {
+        display: flex;
+        font-size: 14px;
+        height: 100%;
+        width: 50%;
+        justify-content: space-between;
+        &-item {
+          display: flex;
+          flex-direction: column;
+          text-align: center;
+          justify-content: space-evenly;
+          span:first-child {
+            font-weight: 700;
+          }
+          .text {
+            color: $text-color;
+          }
+        }
+      }
+    }
+    .item-content {
+      grid-template-columns: 1fr 1fr;
+      color: #fff;
+      display: grid;
+      line-height: 45px;
+      margin-top: 15px;
+      padding: 0 10px;
+      .value {
+        font-weight: 700;
+      }
+    }
+    .text {
+      color: $text-color;
+    }
+    .video {
+      margin-top: 10px;
+    }
+  }
+}
+.environment {
+  width: 200px;
+}
+</style>

web/src/components/monitor/videos.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="videos">
+    <div class="video-item" v-for="item in 8" :key="item">
+      <div class="title">
+        <span>xxxxz监控点</span>
+        <img
+          src="@/assets/images/fillScreen.png"
+          alt=""
+          width="23px"
+          style="margin-left: 10px; cursor: pointer"
+        />
+      </div>
+      <div class="video">
+        <video
+          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
+          controls="controls"
+          width="100%"
+          height="100%"
+        ></video>
+      </div>
+    </div>
+  </div>
+  <div class="environment">
+    <div class="item">
+      <div class="title">环境温湿度信息</div>
+      <img src="@/assets/images/titleLine.png" alt="" width="100%" />
+      <div class="content">
+        <div class="header">
+          <div>点位</div>
+          <div>温度</div>
+          <div>湿度</div>
+        </div>
+        <div class="row">
+          <div>#1</div>
+          <div>20 ℃</div>
+          <div>20%</div>
+        </div>
+      </div>
+    </div>
+    <div class="item" style="margin-top: 40px">
+      <div class="title">消防信息</div>
+      <img src="@/assets/images/titleLine.png" alt="" width="100%" />
+      <div class="content">
+        <div class="header">
+          <div>点位</div>
+          <div>烟感状态</div>
+        </div>
+        <div class="row" v-for="value in 6" :key="value">
+          <div>#{{ value }}</div>
+          <div>xxx</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.videos {
+  width: calc(100% - 240px);
+  margin-left: 20px;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: 1fr 1fr 1fr;
+  overflow-y: auto;
+  .video-item {
+    // width: 410px;
+    // height: 340px;
+    border-radius: 15px;
+
+    background: $bg2-color;
+    padding: 10px;
+    .title {
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      font-weight: 700;
+      color: #fff;
+    }
+    .video {
+      margin-top: 10px;
+    }
+  }
+}
+.environment {
+  width: 220px;
+  margin-left: 10px;
+  color: #fff;
+  .title {
+    font-size: 24px;
+    font-weight: 700;
+  }
+  .content {
+    margin-top: 15px;
+    border-radius: 6px;
+    border: 1px solid $border-color;
+    font-size: 18px;
+    font-weight: 700;
+    .header {
+      height: 40px;
+      background: linear-gradient(90deg, #3dfefa33 0%, #00fffb33 50.17%, #3dfefa33 100%), #3dfefa33;
+    }
+    .header,
+    .row {
+      display: flex;
+      div {
+        flex: 1; /* 每列平分宽度 */
+        text-align: center; /* 文字水平居中 */
+        display: flex;
+        justify-content: center; /* 水平居中 */
+        align-items: center; /* 垂直居中（如果需要） */
+        padding: 10px; /* 可选：添加内边距 */
+      }
+    }
+  }
+}
+</style>

web/src/main.js

@@ -1,9 +1,16 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+
 import router from './router'
 import store from './store'
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'
 import '@/style/index.scss'
+// import '@/assets/iconfont/iconfont.css'
+import * as echarts from 'echarts'
+import VueTianditu from 'vue-tianditu'
 
-createApp(App).use(store).use(router).use(Antd).mount('#app')
+const app = createApp(App)
+app.config.globalProperties.$echarts = echarts // 挂载到全局属性
+
+app.use(store).use(router).use(Antd).use(VueTianditu).mount('#app')

web/src/router/index.js

@@ -1,9 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-const routes = [
+export const routes = [
   {
     path: '/',
-    redirect: '/main'
+    redirect: '/main/Home'
   },
   {
     path: '/login',
@@ -13,12 +13,75 @@ const routes = [
   {
     path: '/main',
     name: 'main',
-    redirect: '/main/monitor',
+    redirect: '/main/Home',
     component: () => import(/* webpackChunkName: "main" */ '@/views/MainView.vue'),
     children: [
+      {
+        path: 'Home',
+        component: () => import(/* webpackChunkName: "monitor" */ '@/views/sub/Home.vue')
+      },
       {
         path: 'monitor',
-        component: () => import(/* webpackChunkName: "monitor" */ '@/views/sub/monitor.vue')
+        name: 'monitor',
+        title: '运行监控',
+        component: () => import(/* webpackChunkName: "monitor" */ '@/views/monitor.vue')
+      },
+      {
+        path: 'system',
+        name: 'system',
+        redirect: '/system/policy',
+        component: () => import(/* webpackChunkName: "system" */ '@/views/system/index.vue'),
+        children: [
+          {
+            path: 'user',
+            name: 'user',
+            title: '用户管理',
+            component: () => import(/* webpackChunkName: "system" */ '@/views/system/user.vue')
+          },
+
+          {
+            name: 'role',
+            path: 'role',
+            title: '角色管理'
+            // component: () => import(/* webpackChunkName: "system" */ '@/views/system/role.vue')s
+          },
+          {
+            name: 'permission',
+            path: 'permission',
+            title: '权限管理'
+          },
+          {
+            name: 'station',
+            path: 'station',
+            title: '场站管理'
+          },
+          {
+            name: 'service',
+            path: 'service',
+            title: '服务管理'
+          },
+          {
+            path: 'policy',
+            name: 'policy',
+            title: '策略管理',
+            component: () => import(/* webpackChunkName: "system" */ '@/views/system/policy.vue')
+          },
+          {
+            name: 'device',
+            path: 'device',
+            title: '设备管理'
+          },
+          {
+            name: 'log',
+            path: 'log',
+            title: '告警日志'
+          },
+          {
+            name: 'syslog',
+            path: 'syslog',
+            title: '系统日志'
+          }
+        ]
       }
     ]
   }

web/src/style/antd.scss

@@ -1,14 +1,49 @@
-$border-color:#12FBFF;
-
+$border-color: #12fbff;
+$btn-confirm: #1C918A;
+$btn-del:#D43030;
 //级联器样式
-.ant-cascader{
-.ant-select-selector{
+.ant-cascader {
+  .ant-select-selector {
     background: none !important;
     border: 1px solid $border-color !important;
-    
-}
-.ant-select-arrow{
+  }
+  .ant-select-arrow {
     color: $border-color;
   }
+  .ant-select-selection-placeholder{
+    color: #ffffff3b;
+  }
 }
+//按钮样式
+// .ant-btn{
+//     padding: 4px 8px;
+// }
+.ant-btn-primary{
+    background: $btn-confirm;
+    &:hover{
+        background: $btn-confirm;
+        opacity: 0.8;
+    }
+    &:active{
+        background: #0f6f6a;
 
+    }
+}
+.btn-del{
+  background: $btn-del;
+  &:hover{
+        background: $btn-del;
+        opacity: 0.8;
+    }
+    &:active{
+        background: $btn-del;
+
+    }
+}
+//modal样式
+.ant-modal .ant-modal-content{
+    background-image: url('@/assets/images/modalBg.png');
+    background-size: 100% 100%;
+    background-color: #ffffff00 !important;
+    border-radius: 0;
+}

web/src/style/color.scss

@@ -1 +1,5 @@
-$border-color:#12FBFF
+$bg1-color:#052f4d;
+$bg2-color:#2169c31f;
+$bg3-color:#00d2ff1f;
+
+$text-color:#A6B8DD

web/src/style/index.scss

@@ -1 +1,34 @@
+::-webkit-scrollbar {
+  width: 5px;
+  height: 6px;
+}
 
+::-webkit-scrollbar-button {
+  display: none;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 4px;
+  background: rgba(144, 147, 153, 0.3);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #989eac;
+}
+
+::-webkit-scrollbar-corner {
+  display: none;
+}
+
+::-webkit-resizer {
+  display: none;
+}

web/src/utils/gcj02ToWgs84.js

@@ -0,0 +1,80 @@
+// /**
+//  * 判断是否在中国境外
+//  */
+// function outOfChina(lng, lat) {
+//   return !(lng >= 72.004 && lng <= 137.8347 && lat >= 0.8293 && lat <= 55.8271)
+// }
+
+// /**
+//  * 辅助函数：纬度转换
+//  */
+// function _transformLat(x, y) {
+//   let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
+//   ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0
+//   ret += ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) * 2.0) / 3.0
+//   ret +=
+//     ((160.0 * Math.sin((y / 12.0) * Math.PI) + 320 * Math.sin((y * Math.PI) / 30.0)) * 2.0) / 3.0
+//   return ret
+// }
+
+// /**
+//  * 辅助函数：经度转换
+//  */
+// function _transformLng(x, y) {
+//   let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
+//   ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0
+//   ret += ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) * 2.0) / 3.0
+//   ret +=
+//     ((150.0 * Math.sin((x / 12.0) * Math.PI) + 300.0 * Math.sin((x / 30.0) * Math.PI)) * 2.0) / 3.0
+//   return ret
+// }
+
+// /**
+//  * GCJ-02 (高德/腾讯坐标系) 转 WGS-84 (GPS原始坐标系)
+//  * @param {number} lng GCJ-02经度
+//  * @param {number} lat GCJ-02纬度
+//  * @returns {number[]} [WGS-84经度, WGS-84纬度]
+//  */
+// export function gcj02ToWgs84(lng, lat) {
+//   // 判断是否在中国境内（简化版，实际需更完整判断）
+//   if (outOfChina(lng, lat)) {
+//     return [lng, lat] // 境外坐标不转换
+//   }
+
+//   let dlat = _transformLat(lng - 105.0, lat - 35.0)
+//   let dlng = _transformLng(lng - 105.0, lat - 35.0)
+
+//   const radlat = (lat / 180.0) * Math.PI
+//   let magic = Math.sin(radlat)
+//   magic = 1 - 0.00669342162296594323 * magic * magic
+//   const sqrtmagic = Math.sqrt(magic)
+
+//   dlat =
+//     (dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI)
+//   dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI)
+
+//   // 初始转换结果（粗略值）
+//   let wgsLat = lat - dlat
+//   let wgsLng = lng - dlng
+
+//   return [wgsLng, wgsLat]
+// }
+
+// /**
+//  * WGS-84 转 GCJ-02（用于迭代优化）
+//  */
+// function wgs84ToGcj02(lng, lat) {
+//   if (outOfChina(lng, lat)) {
+//     return [lng, lat]
+//   }
+//   let dlat = _transformLat(lng - 105.0, lat - 35.0)
+//   let dlng = _transformLng(lng - 105.0, lat - 35.0)
+//   const radlat = (lat / 180.0) * Math.PI
+//   let magic = Math.sin(radlat)
+//   magic = 1 - 0.00669342162296594323 * magic * magic
+//   const sqrtmagic = Math.sqrt(magic)
+//   dlat =
+//     (dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI)
+//   dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI)
+//   return [lng + dlng, lat + dlat]
+// }

web/src/views/MainView.vue

@@ -1,11 +1,32 @@
 <template>
   <div class="main">
     <div class="header"></div>
+
     <div class="page">
-      <router-view/>
+      <div class="subMenu" v-if="subMenu.length > 0">
+        <div
+          class="subItem"
+          v-for="subItem in subMenu"
+          :key="subItem.name"
+          @click="subMenuClick(subItem)"
+          :class="subCurrentKey == subItem.path ? 'active' : ''"
+        >
+          {{ subItem.title }}
+        </div>
+      </div>
+      <div :class="[subMenu.length > 0 ? 'subcontent' : 'content']">
+         <router-view />
+      </div>
+     
     </div>
     <div class="menu">
-      <div v-for="menu in menuList" :key="menu.name" class="menu-item">
+      <div
+        v-for="menu in menuList"
+        :key="menu.name"
+        class="menu-item"
+        @click="menuClick(menu)"
+        :class="currentKey == menu.path ? 'active' : ''"
+      >
         <i :class="menu.icon"></i>
         {{ menu.name }}
       </div>
@@ -21,29 +42,83 @@ export default {
   components: {},
   data() {
     return {
+      currentKey: '',
+      subCurrentKey: '',
       menuList: [
         {
           name: '系统总览',
           icon: 'icon-xitongguanli'
         },
+        {
+          name: '运行监控',
+          path: '/monitor'
+        },
         {
           name: '系统管理',
-          icon: 'icon-xitongguanli',
+          path: '/system',
           children: [
             {
               name: '用户管理',
-              icon: 'icon-yonghuguanli',
-              children: [
+              path: '/user'
+            },
             {
-                  name: '用户列表',
-                  icon: 'icon-yonghuguanli',
-                  path: '/user/list'
+              name: '角色管理',
+              path: '/role'
+            },
+            {
+              name: '权限管理',
+              icon: 'icon-caidanguanli'
+            },
+            {
+              name: '场站管理',
+              icon: 'icon-caidanguanli'
+            },
+            {
+              name: '服务管理',
+              icon: 'icon-bumenguanli'
+            },
+            {
+              name: '策略管理',
+              path: '/policy'
+            },
+            {
+              name: '设备管理',
+              icon: 'icon-rizhiguanli'
+            },
+            {
+              name: '告警日志',
+              icon: 'icon-rizhiguanli'
+            },
+            {
+              name: '系统日志',
+              icon: 'icon-rizhiguanli'
             }
           ]
         }
-          ]
+      ],
+      subMenu: []
     }
-      ]
+  },
+  mounted() {
+    this.initRoute()
+  },
+  methods: {
+    initRoute() {
+      console.log(this.$route,this.$router)
+      this.subMenu = this.$route.matched[1].children || []
+
+      this.currentKey = '/' + this.$route.fullPath.split('/')[1]
+      this.subCurrentKey = this.$route.fullPath.split('/')[2]
+      console.log(this.subCurrentKey)
+    },
+    menuClick(menu) {
+      this.currentKey = menu.path
+      this.subMenu = menu.children || []
+      this.$router.push(menu.path)
+    },
+    subMenuClick(subMenu) {
+      this.subCurrentKey = subMenu.path
+      this.$router.push(subMenu.path)
     }
   }
 }
@@ -58,16 +133,42 @@ export default {
 }
 .header {
   width: 100%;
-  height: 80px;
-  border: 1px solid red;
+  height: 70px;
 }
-.page{
-  width: calc(100% - 20px);
-  height: calc(100% - 80px - 15px - 47px - 60px);
-  margin: 40px 10px 20px 10px;
-  border-radius: 20px;
-background: #052F4D;
+.subMenu {
+  display: flex;
+  color: #fff;
+  margin-left: 10px;
+  padding-bottom: 20px;
+  .subItem {
+    width: 96px;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    background: #132347;
 
+    border: 1px solid #2169c3;
+    border-radius: 8px;
+    margin-right: 15px;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+  }
+  .active {
+    background: #27a188;
+  }
+}
+.page {
+  width: calc(100% - 20px);
+  height: calc(100% - 70px - 65px - 40px);
+  margin: 20px 10px;
+  border-radius: 20px;
+}
+.content{
+  height: 100%;
+}
+.subcontent{
+  height: calc(100% - 46px);
 }
 .menu {
   position: absolute;
@@ -86,6 +187,11 @@ background: #052F4D;
     color: #fff;
     font-size: 20px;
     font-weight: 700;
+    cursor: pointer;
+  }
+  .active {
+    border: 1px solid $border-color;
+    color: #01b3cd;
   }
 }
 </style>

web/src/views/monitor.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="monitor">
+    <div class="search">
+      <div class="left">
+        <div class="search-item">
+          <span>场站切换</span>
+          <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
+        </div>
+      </div>
+      <div class="right">
+        <div class="search-item">
+          <span>运行模式</span>
+          <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
+        </div>
+        <div class="search-item">
+          <span>策略名称</span>
+          <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
+        </div>
+        <div class="search-item">
+          <a-button type="primary">调控</a-button>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="stations">
+        <div class="station-item" v-for="station in stations" :key="station.name" @click="()=>currentKey=station.name" :class="currentKey==station.name?'active':''">
+          <span class="name">{{ station.name }}</span>
+          <span class="des">总功率：{{ station.power }} W</span>
+          <span class="des">数量：{{ station.num }}</span>
+        </div>
+      </div>
+      <div class="container">
+        <device v-if="stationType" />
+        <videos v-else />
+      </div>
+      
+    </div>
+  </div>
+</template>
+
+<script>
+import device from '@/components/monitor/device.vue'
+import videos from '@/components/monitor/videos.vue'
+
+export default {
+  name: 'MonitorView',
+  components: {
+    device,
+    videos
+  },
+  data() {
+    return {
+      currentKey:'储能系统1',
+      stationType: 1,
+      value: [],
+      options: [
+        {
+          value: 'zhejiang',
+          label: 'Zhejiang',
+          children: [
+            {
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [
+                {
+                  value: 'xihu',
+                  label: 'West Lake'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          value: 'jiangsu',
+          label: 'Jiangsu',
+          children: [
+            {
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [
+                {
+                  value: 'zhonghuamen'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      stations: [
+        {
+          name: '储能系统1',
+          power: 60,
+          num: 62
+        },
+        {
+          name: '储能系统2',
+          power: 60,
+          num: 62
+        }
+        // {
+        //   name: "储能系统3",
+        //   power: 60,
+        //   num: 62
+        // },
+        // {
+        //   name: "储能系统4",
+        // }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import url(@/style/color.scss);
+.monitor {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  background: $bg1-color;
+  border-radius: 15px;
+
+  .search {
+    display: flex;
+    justify-content: space-between;
+    .search-item {
+      span {
+        margin-right: 20px;
+      }
+      color: #fff;
+      margin-left: 30px;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+    .left,
+    .right {
+      display: flex;
+    }
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 32px - 20px);
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    .stations {
+      min-width: 155px;
+      max-width: 235px;
+      width: 13%;
+      height: 100%;
+      border-radius: 12px;
+      background: $bg2-color;
+      padding: 15px 0;
+      overflow-y: auto;
+      .station-item {
+        width: calc(100% - 30px);
+        margin: 0 15px 15px 15px;
+        border-radius: 12px;
+        
+        display: flex;
+        flex-direction: column;
+        color: #fff;
+        padding: 10px 15px;
+          cursor: pointer;
+
+        .name {
+          font-size: 20px;
+          font-weight: 700;
+          line-height: 50px;
+        }
+        .des {
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 40px;
+        }
+      }
+      .active{
+        background: $bg3-color;
+      }
+    }
+    .container {
+        width: 87%;
+        display: flex;
+    }
+  }
+}
+</style>

web/src/views/sub/Home.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="Home">
+    <div class="content-left">
+      <div v-for="(item, i) in leftList" :key="i" :class="`grid-item ${item.class}`">
+        <div class="tool">
+          <div class="title">
+            <i class="iconfont icon-hebing linear-text"></i>
+            <span class="linear-text">{{ item.title }}</span>
+          </div>
+        </div>
+        <component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component>
+      </div>
+    </div>
+    <div class="tianditu">
+      <Map></Map>
+    </div>
+    <div class="content-right">
+      <div v-for="(item, i) in rightList" :key="i" :class="`grid-item ${item.class}`">
+        <div class="tool">
+          <div class="title">
+            <i class="iconfont icon-hebing linear-text"></i>
+            <span class="linear-text">{{ item.title }}</span>
+          </div>
+        </div>
+        <component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import onLine from '@/components/Home/onLine.vue'
+import Operational from '@/components/Home/Operational.vue'
+import Energy from '@/components/Home/Energy.vue'
+import Charge from '@/components/Home/Charge.vue'
+import Pv from '@/components/Home/Pv.vue'
+import Alarm from '@/components/Home/Alarm.vue'
+import Map from '@/components/Home/Map.vue'
+
+export default {
+  name: 'Home',
+  components: {Map},
+  data() {
+    return {
+      deviceInfo: {},
+      list: [
+        {
+          title: '运行状况',
+          class: 'online-status',
+          componentId: onLine,
+          infoKey: 'onLine'
+        },
+        {
+          title: '运行分析',
+          class: 'stats-cards',
+          componentId: Operational,
+          infoKey: 'stats'
+        },
+        {
+          title: '储能设备',
+          class: 'energy-status',
+          componentId: Energy,
+          infoKey: 'energy'
+        },
+        {
+          title: '充电设备',
+          class: 'charge-analysis',
+          componentId: Charge,
+          infoKey: 'charge'
+        },
+
+        {
+          title: '光伏设备',
+          class: 'work-order',
+          componentId: Pv,
+          infoKey: 'pv'
+        },
+        {
+          title: '告警信息',
+          class: 'alarm-stats',
+          componentId: Alarm,
+          infoKey: 'alarm'
+        }
+      ],
+
+      sysName: '',
+      user: JSON.parse(localStorage.getItem('user')) || {}
+    }
+  },
+  computed: {
+    leftList() {
+      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
+    },
+    rightList() {
+      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
+    }
+  },
+  async mounted() {
+    this.deviceInfo = {
+      alarm: [
+        {
+          date: '2025-08-30',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-29',
+          key1: 8,
+          key2: 5,
+          key3: 5,
+          key4: 7
+        },
+        {
+          date: '2025-08-28',
+          key1: 0,
+          key2: 10,
+          key3: 20,
+          key4: 4
+        },
+        {
+          date: '2025-08-27',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-26',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-25',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-24',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-23',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-22',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-21',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-20',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-19',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-18',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-17',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        }
+      ],
+      energy: [
+        {
+          date: '2025-08-30',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-29',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-28',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-27',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-26',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-25',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-24',
+          key1: '2',
+          key2: '2'
+        }
+      ],
+      charge: [
+        {
+          date: '2025-08-30',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-29',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-28',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-27',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-26',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-25',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-24',
+          key1: '2',
+          key2: '2'
+        }
+      ],
+      pv: [
+        {
+          date: '2025-08-30',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-29',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-28',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-27',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-26',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-25',
+          key1: '2',
+          key2: '2'
+        },
+        {
+          date: '2025-08-24',
+          key1: '2',
+          key2: '2'
+        }
+      ]
+    }
+  },
+
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.Home {
+  color: #fff;
+  height: 100%;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tianditu {
+   width: calc(100% - 520px * 2) ;
+  height: 100%;
+  margin: 0px 15px;
+
+}
+
+.content-left,
+.content-right {
+  height: 100%;
+  width: 520px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.grid-item {
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(33% - 10px);
+  z-index: 20;
+
+  .tool {
+    background: linear-gradient(180deg, rgba(0, 10, 6, 0) 0%, rgba(0, 76, 112, 1) 100%);
+    border-bottom: 2px solid transparent;
+    border-image: linear-gradient(90deg, rgba(3, 220, 255, 1) 0%, rgba(0, 19, 13, 0) 100%) 0 0 2 0;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 45px;
+
+    .linear-text {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(40, 235, 231, 1) 100%);
+      color: transparent;
+      -webkit-background-clip: text;
+      background-clip: text;
+      font-size: 16px;
+      font-weight: 400;
+      margin-left: 6px;
+    }
+
+    .text_right {
+      display: flex;
+      font-size: 11px;
+
+      div {
+        margin-right: 6px;
+      }
+
+      .mark {
+        margin: 0px 2px;
+        font-weight: bold;
+        color: #43cf7c;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .title {
+    display: flex;
+
+    i {
+      margin-left: 10px;
+    }
+
+    .text {
+      margin-left: 20px;
+      font-size: 16px;
+      font-weight: 700;
+      background: linear-gradient(
+        90deg,
+        rgba(0, 186, 173, 0.15) 0%,
+        rgba(61, 254, 250, 0.15) 49.2%,
+        rgba(61, 254, 250, 0) 100%
+      );
+      -webkit-background-clip: text;
+      display: inline-block;
+      background-clip: text;
+      color: transparent;
+    }
+  }
+}
+</style>

web/src/views/sub/monitor.vue

@@ -1,27 +0,0 @@
-<template>
-    <div class="monitor">
-        <div class="search">
-            <div class="left">
-                <div class="search-item">
-                    <span>场站切换</span>
-                    <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
-                </div>
-            </div>
-            <div class="right"></div>
-        </div>
-
-    </div>
-</template>
-
-<script setup>
-</script>
-
-<style scoped lang="scss">
-.monitor{
-    padding: 10px;
-    .search{
-        display: flex;
-        justify-content: space-between;
-    }
-}
-</style>

web/src/views/system/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="system">
+<router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  components:{
+  },
+  props: {
+
+  },
+  data() { 
+    return {
+
+    }
+  },
+  mounted() {
+
+  },
+  methods:{
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.system{
+    width: 100%;
+    height: 100%;
+    background: $bg1-color;
+    border-radius: 15px;
+}
+</style>

web/src/views/system/policy.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="policy">
+<searchBox :btn-option-list="btnOptionList" @onSearch="onSearch" @operateForm="operateForm"/>
+  </div>
+</template>
+
+<script>
+import searchBox from '@/components/SearchBox.vue'
+export default {
+  name: '',
+  components:{searchBox
+  },
+  props: {
+
+  },
+  data() { 
+    return {
+      btnOptionList:[
+        {label:'新增',icon:'icon-tianjia',type:'add'},
+        {label:'删除',icon:'icon-tianjia',type:'del'}
+
+      ]
+    }
+  },
+  mounted() {
+
+  },
+  methods:{
+    onSearch(data){
+      console.log(data)
+    },
+    operateForm(type){
+      console.log(type  )
+
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.policy{
+    width: 100%;
+    height: 100%;
+    padding: 0 15px;
+}
+</style>

web/src/views/system/user.vue

@@ -0,0 +1,30 @@
+   <template>
+     <div >
+   
+     </div>
+   </template>
+   
+<script>
+export default {
+  name: '',
+  components:{
+  },
+  props: {
+   
+  },
+  data() { 
+    return {
+   
+    }
+  },
+  mounted() {
+   
+  },
+  methods:{
+   
+  },
+}
+</script>
+   
+   <style lang="scss" scoped>
+   </style>

web/vue.config.js

@@ -38,8 +38,8 @@ module.exports = defineConfig({
     loaderOptions: {
       scss: {
         additionalData: `
-        @use "~@/style/color.scss";
-        @use "~@/style/antd.scss";
+        @import "@/style/color.scss";
+        @import "@/style/antd.scss";
         ` //在每个 .scss 文件顶部自动添加这行代码，无需手动导入
       }
     },