系统总览页面

web/.eslintrc.js

@@ -24,7 +24,8 @@ module.exports = {
     eqeqeq: 0, //   警告使用全等
     quotes: [0, 'single'], //   单引号
     singleQuote: 0,
-    'no-console': 2, //   不禁用console
+    'no-console': ['off'], // 允许所有 console 语句
+    // 'no-console': 2, //   不禁用console
     'no-debugger': 2, //   警告debugger
     'no-var': 2, //   对var禁止
     'no-eval': 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

@@ -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,20 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5010233_m6gk6vpoxg.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/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/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,139 @@
+<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"
+      :closable="false"
+      :footer="null"
+      :title="testVal.name"
+      :mask="true"
+    >
+      <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-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/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

@@ -13,9 +13,13 @@ 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')

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

@@ -66,7 +66,7 @@ export default {
   height: calc(100% - 80px - 15px - 47px - 60px);
   margin: 40px 10px 20px 10px;
   border-radius: 20px;
-background: #052F4D;
+// background: #052F4D;
 
 }
 .menu {

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>