пре 3 година · 44c37816f5
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,15 @@
 
				+node_modules
			
 
				+dist
			
 
				+dist.rar
			
 
				+webpack.config.js
			
 
				+.vscode
			
 
				+.vscode/
			
 
				+.vs
			
 
				+.vs/
			
 
				+package-lock.json
			
 
				+.py
			
 
				+.py/
			
 
				+.idea
			
 
				+.idea/
			
 
				+public/static/cesium/Assets/Textures/temp
			
 
				+public/static/cesium/Assets/Textures/temp/
			
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -0,0 +1,17 @@
 
				+stages:
			
 
				+  - build
			
 
				+
			
 
				+build:
			
 
				+  stage: build
			
 
				+  tags:
			
 
				+    - "172_16_3_31"
			
 
				+  only:
			
 
				+    - develop
			
 
				+  script:
			
 
				+    - npm install
			
 
				+    - npm run build
			
 
				+    - rm -rf ${ROOT_PATH}*
			
 
				+    - cp -rf dist/* ${ROOT_PATH}
			
 
				+
			
 
				+variables:
			
 
				+  ROOT_PATH: "/www/vue-dome/"
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,4 @@
 
				+# web框架，用于内嵌第三方页面的壳项目
			
 
				+
			
 
				+- 如需新增页面只需要直接修改 src/router/index.js 内的配置项即可同步生成菜单。
			
 
				+- 如需修改网页 title 标题可打开根目录内 vue.config 找到 args[0].title 后面的字符串修改并重启项目即可应用
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/package.json
+++ b/package.json
@@ -0,0 +1,102 @@
 
				+{
			
 
				+  "name": "electronic-map",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "servebig": "node --max-old-space-size=6000  ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "test:unit": "vue-cli-service test:unit",
			
 
				+    "lint": "vue-cli-service lint",
			
 
				+    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "@antv/x6": "^1.24.4",
			
 
				+    "@arcgis/core": "^4.19.3",
			
 
				+    "@element-plus/icons-vue": "^0.2.4",
			
 
				+    "@open-wc/webpack-import-meta-loader": "git+https://github.com/KmjKoishi/webpack-import-meta-loader-fixed.git",
			
 
				+    "animate.css": "3.5",
			
 
				+    "axios": "^0.21.1",
			
 
				+    "cesium": "^1.78.0",
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "echarts": "^5.1.1",
			
 
				+    "echarts-gl": "^2.0.4",
			
 
				+    "echarts-stat": "^1.2.0",
			
 
				+    "element-plus": "^1.1.0-beta.4",
			
 
				+    "file-saver": "^2.0.5",
			
 
				+    "font-awesome": "^4.7.0",
			
 
				+    "html2canvas": "^1.0.0-rc.7",
			
 
				+    "jquery": "^3.6.0",
			
 
				+    "jspdf": "^2.3.1",
			
 
				+    "jszip": "^3.7.1",
			
 
				+    "papaparse": "^5.3.1",
			
 
				+    "stompjs": "^2.3.3",
			
 
				+    "three": "^0.129.0",
			
 
				+    "three-collada-loader": "^0.0.1",
			
 
				+    "three-css2drender": "^1.0.0",
			
 
				+    "three-fbx-loader": "^1.0.2",
			
 
				+    "three-obj-mtl-loader": "^1.0.3",
			
 
				+    "vivus": "^0.4.6",
			
 
				+    "vue": "^3.0.11",
			
 
				+    "vue-axios": "^3.2.4",
			
 
				+    "vue-router": "^4.0.0-0",
			
 
				+    "vuex": "^4.0.0-0",
			
 
				+    "xlsx": "^0.17.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.0",
			
 
				+    "@vue/cli-plugin-eslint": "~4.5.0",
			
 
				+    "@vue/cli-plugin-router": "~4.5.0",
			
 
				+    "@vue/cli-plugin-unit-mocha": "~4.5.0",
			
 
				+    "@vue/cli-plugin-vuex": "~4.5.0",
			
 
				+    "@vue/cli-service": "~4.5.0",
			
 
				+    "@vue/compiler-sfc": "^3.0.0",
			
 
				+    "@vue/test-utils": "^2.0.0-0",
			
 
				+    "babel-eslint": "^10.1.0",
			
 
				+    "chai": "^4.1.2",
			
 
				+    "eslint": "^6.7.2",
			
 
				+    "eslint-plugin-vue": "^7.0.0",
			
 
				+    "less": "^3.0.4",
			
 
				+    "less-loader": "^5.0.0",
			
 
				+    "sass": "^1.27.0",
			
 
				+    "sass-loader": "^10.0.4",
			
 
				+    "script-loader": "^0.7.2",
			
 
				+    "style-resources-loader": "^1.4.1",
			
 
				+    "svg-sprite-loader": "^6.0.7",
			
 
				+    "svgo-loader": "^3.0.0"
			
 
				+  },
			
 
				+  "eslintConfig": {
			
 
				+    "root": true,
			
 
				+    "env": {
			
 
				+      "node": true
			
 
				+    },
			
 
				+    "extends": [
			
 
				+      "plugin:vue/vue3-essential",
			
 
				+      "eslint:recommended"
			
 
				+    ],
			
 
				+    "parserOptions": {
			
 
				+      "parser": "babel-eslint"
			
 
				+    },
			
 
				+    "rules": {
			
 
				+      "no-debugger": "off",
			
 
				+      "no-console": "off",
			
 
				+      "no-unused-vars": "off"
			
 
				+    },
			
 
				+    "overrides": [
			
 
				+      {
			
 
				+        "files": [
			
 
				+          "**/__tests__/*.{j,t}s?(x)",
			
 
				+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
			
 
				+        ],
			
 
				+        "env": {
			
 
				+          "mocha": true
			
 
				+        }
			
 
				+      }
			
 
				+    ]
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ]
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,48 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,IE=IE9">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+  <script type="text/javascript">
			
 
				+    window.onload = function () {
			
 
				+      if (!!window.ActiveXObject || "ActiveXObject" in window) {
			
 
				+        document.getElementById("ie_dialog").style.display = "block";
			
 
				+      }
			
 
				+    }
			
 
				+  </script>
			
 
				+  <script src="./static/js/hlslib/hls.min.js"></script>
			
 
				+  <script src="./static/config/modeConfig.js"></script>
			
 
				+  <style type="text/css">
			
 
				+    #ie_dialog {
			
 
				+      width: 350px;
			
 
				+      border: 1px solid #eeeeee;
			
 
				+      box-shadow: 8px 8px 8px #EEEEEE;
			
 
				+      margin: 150px auto 0;
			
 
				+      padding: 30px;
			
 
				+      text-align: center;
			
 
				+      display: none;
			
 
				+    }
			
 
				+  </style>
			
 
				+  <title>
			
 
				+    <%= htmlWebpackPlugin.options.title %>
			
 
				+  </title>
			
 
				+</head>
			
 
				+
			
 
				+<body id="appBody" class="dark">
			
 
				+  <div id="ie_dialog">
			
 
				+    本平台仅支持非ie浏览器使用
			
 
				+  </div>
			
 
				+  <noscript>
			
 
				+    <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 -->
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/static/WT01.glb
+++ b/public/static/WT01.glb
--- a/public/static/config/modeConfig.js
+++ b/public/static/config/modeConfig.js
@@ -0,0 +1,43 @@
 
				+// 本地联调开关
			
 
				+const localTest = 0;
			
 
				+
			
 
				+// 服务器地址
			
 
				+let baseURL = null;
			
 
				+
			
 
				+// websocket 服务器地址
			
 
				+let websocketUrl = null;
			
 
				+
			
 
				+// 3D 地球瓦片路径
			
 
				+let tilesUrl = null;
			
 
				+// 3D 地球最大支持放大到多少级
			
 
				+const tilesMaxLevel = 18;
			
 
				+
			
 
				+// 适配器地址
			
 
				+const adapterUrl = "http://10.155.32.4:8011/";
			
 
				+
			
 
				+// 切换模块时是否提示当前模块名称(用于对内介绍项目时便捷显示模块名称)
			
 
				+const showModuleName = 0;
			
 
				+
			
 
				+if (localTest) {
			
 
				+    // baseURL = "http://192.168.10.13:8082/" // 联机调试 - 石林
			
 
				+    // baseURL = "http://10.155.32.33:9001/" // 联机调试 - 谢生杰
			
 
				+    baseURL = "http://192.168.10.6:8082/" // 联机调试 - 王昌盛
			
 
				+
			
 
				+    tilesUrl = "http://localhost:8080/static/cesium/Assets/Textures/NaturalEarthII";
			
 
				+} else {
			
 
				+    baseURL = "http://10.155.32.4:8082/" // 正式环境
			
 
				+    // baseURL = "http://192.168.1.103:8082/" // 正式环境
			
 
				+
			
 
				+    tilesUrl = "http://10.155.32.4:8070/zhfx/new_tiles";
			
 
				+}
			
 
				+
			
 
				+websocketUrl = (baseURL.replace(/http:\/\/|https:\/\//g, "")) + "gyee-websocket";
			
 
				+
			
 
				+window.__MODE__ = {
			
 
				+    baseURL,
			
 
				+    websocketUrl,
			
 
				+    adapterUrl,
			
 
				+    tilesUrl,
			
 
				+    tilesMaxLevel,
			
 
				+    showModuleName
			
 
				+};
			
--- a/public/static/img/404.png
+++ b/public/static/img/404.png
--- a/public/static/js/hlslib/hls.min.js
+++ b/public/static/js/hlslib/hls.min.js
--- a/public/static/js/less.min.js
+++ b/public/static/js/less.min.js
--- a/public/static/json/mapgeoJsonnx.json
+++ b/public/static/json/mapgeoJsonnx.json
--- a/public/static/stylesheet/color.less
+++ b/public/static/stylesheet/color.less
@@ -0,0 +1,23 @@
 
				+@green: #05bb4c;
			
 
				+@yellow: #edbf03;
			
 
				+@blue: #1a93cf;
			
 
				+@darkBlue: #4b55ae;
			
 
				+@darkBlue2: #1529E9;
			
 
				+@darkgray: #606769;
			
 
				+@gray: #606769;
			
 
				+@gray-l: #B3BDC0;
			
 
				+@black: #000000;
			
 
				+@write: #ffffff;
			
 
				+@ligntRed: #ff7a7f;
			
 
				+@red: #BA3237;
			
 
				+@darkRed: #710f14;
			
 
				+@purple: #4b55ae;
			
 
				+@orange: #e17e23;
			
 
				+@white: #ffffff;
			
 
				+@pink: #c531c7;
			
 
				+
			
 
				+@greenLinearTop: linear-gradient(to top, fade(@green, 50%), fade(@green, 0));
			
 
				+@greenLinearRight: linear-gradient(to right, fade(@green, 50%), fade(@green, 0));
			
 
				+@redLinearRight: linear-gradient(to right, fade(@red, 50%), fade(@red, 0));
			
 
				+
			
 
				+@font-color: #7a8385;
			
--- a/sh.exe.stackdump
+++ b/sh.exe.stackdump
@@ -0,0 +1,11 @@
 
				+Stack trace:
			
 
				+Frame        Function    Args
			
 
				+00000010002  0018006021E (00180241C10, 001802340B9, 00000000000, 000FFFFBA40)
			
 
				+00000010002  00180048859 (00000000001, 00180328B40, 00000000001, 00180328B40)
			
 
				+00000010002  00180048892 (00000000001, 00180328E50, 00000000000, 00000000008)
			
 
				+00000010002  001800598BC (001800C0322, 00000000000, 00000000000, 00000000000)
			
 
				+000FFFFCCD0  0018005994E (000FFFFCDF0, 000FFFFCCD0, FFFFFFFFFFFFFFD8, 00000000000)
			
 
				+000FFFFCCD0  00180048FE1 (00000000000, 00000000000, 00000000000, 00000000000)
			
 
				+00000000000  00180047963 (00000000000, 00000000000, 00000000000, 00000000000)
			
 
				+000FFFFFFF0  00180047A14 (00000000000, 00000000000, 00000000000, 00000000000)
			
 
				+End of stack trace
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,440 @@
 
				+<template>
			
 
				+  <div class="main">
			
 
				+    <!-- 顶部菜单 -->
			
 
				+    <el-container v-if="!$store.state.showLoginPage">
			
 
				+      <el-header class="currentHeader" v-if="hideHeard === '0'">
			
 
				+        <div class="l">LOGO或者其他的什么</div>
			
 
				+        <Menu class="r" />
			
 
				+        <div class="userBox">
			
 
				+          <el-button
			
 
				+            type="text"
			
 
				+            style="color: #fff"
			
 
				+            v-if="!authToken"
			
 
				+            @click="goLogin"
			
 
				+            >登录</el-button
			
 
				+          >
			
 
				+          <el-popover
			
 
				+            popper-class="loginBoxPopover"
			
 
				+            placement="bottom"
			
 
				+            :width="150"
			
 
				+            trigger="hover"
			
 
				+            :show-arrow="false"
			
 
				+            v-else
			
 
				+          >
			
 
				+            <template #reference>
			
 
				+              <el-button type="text" style="color: #fff; font-size: 16px">{{
			
 
				+                username
			
 
				+              }}</el-button>
			
 
				+            </template>
			
 
				+            <div style="background-color: rgb(rgb(4, 12, 11))">
			
 
				+              <el-button
			
 
				+                type="text"
			
 
				+                style="color: #fff; width: 100%"
			
 
				+                @click="loginOut"
			
 
				+                >退&nbsp;出&nbsp;登&nbsp;录</el-button
			
 
				+              >
			
 
				+            </div>
			
 
				+          </el-popover>
			
 
				+        </div>
			
 
				+      </el-header>
			
 
				+      <el-main style="padding: 0">
			
 
				+        <router-view :key="$route.fullPath" v-if="authToken" />
			
 
				+      </el-main>
			
 
				+    </el-container>
			
 
				+    <LoginPage v-else />
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+import $ from "jquery";
			
 
				+import LoginPage from "./views/user/login.vue";
			
 
				+import Menu from "./views/menu/index.vue";
			
 
				+import { useRoute, useRouter } from "vue-router";
			
 
				+export default {
			
 
				+  components: {
			
 
				+    LoginPage,
			
 
				+    Menu,
			
 
				+  },
			
 
				+
			
 
				+  data() {
			
 
				+    return {
			
 
				+      menu: [],
			
 
				+      defalutActiveMenu: "",
			
 
				+      hideMenus: "0",
			
 
				+      hideHeard: "0",
			
 
				+      username: localStorage.getItem("username"),
			
 
				+      authToken: localStorage.getItem("authToken"),
			
 
				+    };
			
 
				+  },
			
 
				+
			
 
				+  created() {
			
 
				+    let that = this;
			
 
				+
			
 
				+    const themeName = that.$store.state.themeName;
			
 
				+    $("#appBody").attr(
			
 
				+      "class",
			
 
				+      themeName === "dark" || themeName === "light" ? themeName : "dark"
			
 
				+    );
			
 
				+  },
			
 
				+
			
 
				+  mounted() {
			
 
				+    // console.log(111, useRoute());
			
 
				+    // console.log(222, useRouter().options.routes);
			
 
				+  },
			
 
				+
			
 
				+  methods: {
			
 
				+    goLogin() {
			
 
				+      this.$store.dispatch("changeShowLoginPage", true);
			
 
				+    },
			
 
				+
			
 
				+    loginOut() {
			
 
				+      localStorage.setItem("authToken", "");
			
 
				+      this.authToken = "";
			
 
				+      this.$store.dispatch("changeShowLoginPage", true);
			
 
				+    },
			
 
				+  },
			
 
				+
			
 
				+  watch: {
			
 
				+    $route(res) {
			
 
				+      this.hideHeard = res.query.hideheard || "0";
			
 
				+      this.hideMenus = res.query.hidemenus || "0";
			
 
				+
			
 
				+      if (res.query.theme) {
			
 
				+        const theme = res.query.theme === "dark" ? "dark" : "light";
			
 
				+        this.$store.dispatch("changeTheme", theme);
			
 
				+        $("#appBody").attr("class", theme);
			
 
				+      }
			
 
				+
			
 
				+      if (res.query.fn) {
			
 
				+        this[res.query.fn] && this[res.query.fn]();
			
 
				+      }
			
 
				+
			
 
				+      if (localStorage.getItem("authToken")) {
			
 
				+        this.$store.dispatch("changeShowLoginPage", false);
			
 
				+      } else {
			
 
				+        this.$store.dispatch("changeShowLoginPage", true);
			
 
				+      }
			
 
				+    },
			
 
				+    "$store.state.moudleName"(msg) {
			
 
				+      if (window.__MODE__.showModuleName && msg) {
			
 
				+        this.BASE.showMsg({
			
 
				+          type: this.$store.state.themeName === "dark" ? "success" : "warning",
			
 
				+          showClose: true,
			
 
				+          msg,
			
 
				+        });
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+@import "./assets/styles/main.less";
			
 
				+
			
 
				+html,
			
 
				+body,
			
 
				+#app {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+
			
 
				+  .el-container.is-vertical {
			
 
				+    .menubar {
			
 
				+      float: right;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+* {
			
 
				+  box-sizing: border-box;
			
 
				+
			
 
				+  &::-webkit-scrollbar {
			
 
				+    width: 6px;
			
 
				+    height: 6px;
			
 
				+  }
			
 
				+
			
 
				+  &::-webkit-scrollbar-track-piece {
			
 
				+    background-color: rgba(255, 255, 255, 0.05);
			
 
				+    border-radius: 4px;
			
 
				+  }
			
 
				+
			
 
				+  &::-webkit-scrollbar-thumb {
			
 
				+    background-color: fade(@gray, 75);
			
 
				+    border-radius: 4px;
			
 
				+    outline: none;
			
 
				+    outline-offset: 0px;
			
 
				+    border: none;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#appBody {
			
 
				+  .el-popper.is-light {
			
 
				+    border: 1px solid rgba(4, 12, 11);
			
 
				+  }
			
 
				+}
			
 
				+// 横向菜单
			
 
				+.el-menu--horizontal {
			
 
				+  .el-menu-item {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+
			
 
				+  .el-menu-item:hover {
			
 
				+    background: linear-gradient(
			
 
				+      to top,
			
 
				+      rgba(5, 187, 76, 0.5),
			
 
				+      rgba(5, 187, 76, 0)
			
 
				+    ) !important;
			
 
				+  }
			
 
				+}
			
 
				+// 纵向菜单
			
 
				+.el-menu--vertical {
			
 
				+  .el-menu {
			
 
				+    background: rgb(4, 12, 11);
			
 
				+
			
 
				+    .el-menu-item,
			
 
				+    .el-sub-menu__title {
			
 
				+      color: #fff;
			
 
				+    }
			
 
				+
			
 
				+    .el-menu-item:hover,
			
 
				+    .el-sub-menu__title:hover {
			
 
				+      background: linear-gradient(
			
 
				+        to top,
			
 
				+        rgba(5, 187, 76, 0.5),
			
 
				+        rgba(5, 187, 76, 0)
			
 
				+      );
			
 
				+      transition: 0.2s;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+  margin: 0;
			
 
				+  background: #fff;
			
 
				+  color: #fff;
			
 
				+  // background-image: url("./assets/background.png");
			
 
				+  background: rgb(4, 12, 11);
			
 
				+  background-size: cover;
			
 
				+  font-size: @fontsize;
			
 
				+  font-family: @defalut-font-family;
			
 
				+}
			
 
				+@menuWidth: 5.37vh;
			
 
				+@headerHeight: 4.63vh;
			
 
				+.main {
			
 
				+  width: 100vw;
			
 
				+  height: 100%;
			
 
				+  display: flex;
			
 
				+  flex-wrap: wrap;
			
 
				+  overflow: hidden;
			
 
				+
			
 
				+  .menuIconBox {
			
 
				+    width: 100%;
			
 
				+    height: 63px;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    cursor: pointer;
			
 
				+    transition: 0.25s;
			
 
				+
			
 
				+    .menuIcon {
			
 
				+      font-size: 20px;
			
 
				+      color: #fff;
			
 
				+      transition: 0.25s;
			
 
				+    }
			
 
				+
			
 
				+    &:hover .menuIcon {
			
 
				+      font-size: 32px;
			
 
				+      color: #fff;
			
 
				+      cursor: pointer;
			
 
				+      transition: 0.25s;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .el-menu--collapse .el-sub-menu.is-active i {
			
 
				+    color: #05bb4c;
			
 
				+  }
			
 
				+
			
 
				+  .el-menu {
			
 
				+    border-color: rgb(4, 12, 11);
			
 
				+
			
 
				+    .el-menu-item,
			
 
				+    .el-sub-menu__title {
			
 
				+      color: #fff;
			
 
				+    }
			
 
				+
			
 
				+    .el-menu-item:hover,
			
 
				+    .el-sub-menu__title:hover {
			
 
				+      background: linear-gradient(
			
 
				+        to top,
			
 
				+        rgba(5, 187, 76, 0.5),
			
 
				+        rgba(5, 187, 76, 0)
			
 
				+      );
			
 
				+      transition: 0.2s;
			
 
				+    }
			
 
				+
			
 
				+    .el-menu-item.is-active {
			
 
				+      color: #05bb4c;
			
 
				+    }
			
 
				+
			
 
				+    .el-sub-menu {
			
 
				+      .el-menu {
			
 
				+        background: rgb(4, 12, 11);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .header-body {
			
 
				+    // background: radial-gradient(closest-corner at 22% 40%, #2d5a47, #040d0a, #040d0a);
			
 
				+    flex: 0 0 100%;
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+    height: @headerHeight;
			
 
				+    border-bottom: 1px solid #142b29;
			
 
				+    .header-title {
			
 
				+      margin: auto;
			
 
				+      color: #fff;
			
 
				+    }
			
 
				+    .header-menu-body {
			
 
				+      flex-grow: 1;
			
 
				+    }
			
 
				+  }
			
 
				+  .menu-body {
			
 
				+    position: absolute;
			
 
				+    flex: 0 0 @menuWidth;
			
 
				+    width: @menuWidth;
			
 
				+    height: calc(100vh - @headerHeight);
			
 
				+    top: @headerHeight;
			
 
				+    background-color: fade(#192a26, 75%);
			
 
				+    z-index: 3000;
			
 
				+    opacity: 0;
			
 
				+    transition: opacity 0.2s;
			
 
				+    transition-timing-function: ease-in;
			
 
				+    transform: translate(-@menuWidth);
			
 
				+
			
 
				+    &:hover,
			
 
				+    &.hover {
			
 
				+      opacity: 1;
			
 
				+      transition: opacity 0.2s;
			
 
				+      transition-timing-function: ease-out;
			
 
				+      transform: translate(0);
			
 
				+    }
			
 
				+  }
			
 
				+  .main-body {
			
 
				+    flex: 0 0 calc(100vw);
			
 
				+    max-width: calc(100vw);
			
 
				+    height: calc(100vh - @headerHeight);
			
 
				+    padding: 1.481vh;
			
 
				+    // transition: flex 0.1s, margin-left 0.1s;
			
 
				+    // transition-timing-function: ease-in-out;
			
 
				+    // &.show-menu {
			
 
				+    //   flex: 0 0 calc(100vw - @menuWidth);
			
 
				+    //   margin-left: @menuWidth;
			
 
				+    //   transition: flex 0.1s, margin-left 0.1s;
			
 
				+    //   transition-timing-function: ease-in-out;
			
 
				+    // }
			
 
				+  }
			
 
				+  .el-table__body tr.current-row > td {
			
 
				+    color: #fff;
			
 
				+    background: rgba(66, 66, 66, 0.66) !important;
			
 
				+  }
			
 
				+
			
 
				+  .el-transfer-panel {
			
 
				+    width: 450px !important;
			
 
				+    height: 73vh;
			
 
				+    background-color: #111d1c !important;
			
 
				+    border: 1px solid #999999 !important;
			
 
				+
			
 
				+    .el-transfer-panel__body {
			
 
				+      height: 100% !important;
			
 
				+
			
 
				+      .el-transfer-panel__list {
			
 
				+        height: 100% !important;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .el-transfer-panel .el-transfer-panel__header {
			
 
				+    background-color: #111d1c !important;
			
 
				+    color: #05bb4c !important;
			
 
				+
			
 
				+    .el-checkbox .el-checkbox__label {
			
 
				+      color: #05bb4c !important;
			
 
				+    }
			
 
				+  }
			
 
				+  .el-button--primary.is-disabled,
			
 
				+  .el-button--primary.is-disabled:active,
			
 
				+  .el-button--primary.is-disabled:focus,
			
 
				+  .el-button--primary.is-disabled:hover {
			
 
				+    background-color: #05bb4c;
			
 
				+    border-color: #05bb4c;
			
 
				+  }
			
 
				+}
			
 
				+.el-tree-node__content {
			
 
				+  height: 40px !important;
			
 
				+}
			
 
				+.el-tree-node__label {
			
 
				+  font-size: 18px !important;
			
 
				+}
			
 
				+.el-pagination.is-background .el-pager li:not(.disabled).active {
			
 
				+  background-color: #05bb4c !important;
			
 
				+  display: flex;
			
 
				+}
			
 
				+
			
 
				+.userBox {
			
 
				+  .loginoption {
			
 
				+    font-size: 16px;
			
 
				+    width: 150px;
			
 
				+    background-color: #292929;
			
 
				+    border: none;
			
 
				+    color: rgb(220, 220, 220);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.loginBoxPopover {
			
 
				+  background: rgb(4, 12, 11) !important;
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.currentHeader {
			
 
				+  display: flex;
			
 
				+  justify-content: start;
			
 
				+  align-content: center;
			
 
				+
			
 
				+  .l,
			
 
				+  .r {
			
 
				+    height: 100%;
			
 
				+  }
			
 
				+
			
 
				+  .l {
			
 
				+    width: 20%;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    font-size: 18px;
			
 
				+  }
			
 
				+
			
 
				+  .r {
			
 
				+    width: 80%;
			
 
				+  }
			
 
				+
			
 
				+  .el-menu {
			
 
				+    border-color: rgb(4, 12, 11);
			
 
				+
			
 
				+    .el-menu-item:hover {
			
 
				+      background: linear-gradient(
			
 
				+        to top,
			
 
				+        rgba(5, 187, 76, 0.5),
			
 
				+        rgba(5, 187, 76, 0)
			
 
				+      );
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .userBox {
			
 
				+    height: 60px;
			
 
				+    position: absolute;
			
 
				+    right: 20px;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/api/AES.js
+++ b/src/api/AES.js
@@ -0,0 +1,32 @@
 
				+import CryptoJS from 'crypto-js';
			
 
				+/**
			
 
				+ * CryptoJS加密
			
 
				+ */
			
 
				+export function localEncrypt(word, keyStr) {
			
 
				+  keyStr = keyStr ? keyStr : "BTRH201911PERMIS";
			
 
				+  let key = CryptoJS.enc.Utf8.parse(keyStr);
			
 
				+  let srcs = CryptoJS.enc.Utf8.parse(word);
			
 
				+  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
			
 
				+    mode: CryptoJS.mode.ECB,
			
 
				+    padding: CryptoJS.pad.Pkcs7
			
 
				+  });
			
 
				+  return encrypted.toString();
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * CryptoJS解密
			
 
				+ */
			
 
				+export function localDecrypt(word, keyStr) {
			
 
				+  keyStr = keyStr ? keyStr : "BTRH201911PERMIS";
			
 
				+  var key = CryptoJS.enc.Utf8.parse(keyStr);
			
 
				+  var decrypt = CryptoJS.AES.decrypt(word, key, {
			
 
				+    mode: CryptoJS.mode.ECB,
			
 
				+    padding: CryptoJS.pad.Pkcs7
			
 
				+  });
			
 
				+  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
			
 
				+}
			
 
				+
			
 
				+export default {
			
 
				+  localEncrypt,
			
 
				+  localDecrypt
			
 
				+}
			
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -0,0 +1,323 @@
 
				+import request from './zmaxios.js'
			
 
				+
			
 
				+
			
 
				+//获取服务端公钥
			
 
				+export const getPublickey = query => {
			
 
				+        return request.get(`info/publickey`);
			
 
				+    }
			
 
				+    // login
			
 
				+export const loginRequest = params => {
			
 
				+    return request.post("user/login", params);
			
 
				+};
			
 
				+//register
			
 
				+export const registerRequest = params => {
			
 
				+    return request.post("user/registers", params);
			
 
				+};
			
 
				+// ----------------------------------------user------------------------------------------------
			
 
				+export const getUserList = () => {
			
 
				+    return request.get(`user/getall`);
			
 
				+}
			
 
				+export const editRequest = params => {
			
 
				+    return request.post("user/edituser", params);
			
 
				+};
			
 
				+export const deleteUser = data => {
			
 
				+        return request.delete(`user/${data}`);
			
 
				+    }
			
 
				+    // ----------------------------------------user------------------------------------------------
			
 
				+
			
 
				+
			
 
				+//获取所有风场
			
 
				+export const fetchStationList = () => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/station',
			
 
				+        method: 'get'
			
 
				+    });
			
 
				+};
			
 
				+//根据风场id获取所有风机
			
 
				+export const fetchWindturbineList = query => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/windturbine',
			
 
				+        method: 'get',
			
 
				+        params: {
			
 
				+            stationId: query
			
 
				+        }
			
 
				+    });
			
 
				+};
			
 
				+// ----------------------------------------安全生产- 报警记录------------------------------------------------
			
 
				+//查询历史报警
			
 
				+export const alarm_history = (params) => {
			
 
				+        return request({
			
 
				+            url: `alarm/history/page2`,
			
 
				+            params: params
			
 
				+        });
			
 
				+    }
			
 
				+    //查报警
			
 
				+export const alarm_snap = (params) => {
			
 
				+        return request({
			
 
				+            url: `alarm/snap`,
			
 
				+            params: params
			
 
				+        });
			
 
				+    }
			
 
				+    // ----------------------------------------安全生产- 实时报警------------------------------------------------
			
 
				+    //实时故障 最高级
			
 
				+export const alarm_fault_recent = (params) => {
			
 
				+        return request({
			
 
				+            url: `fault/recent`,
			
 
				+            params: params
			
 
				+        });
			
 
				+    }
			
 
				+    //实时故障 第一次请求
			
 
				+export const alarm_fault_top = (params) => {
			
 
				+        return request({
			
 
				+            url: `fault/snap/top`,
			
 
				+            params: params
			
 
				+        });
			
 
				+    }
			
 
				+    //底下的实时报警 
			
 
				+export const alarm_snap_top = (params) => {
			
 
				+        return request({
			
 
				+            url: `alarm/snap/top`,
			
 
				+            params: params
			
 
				+        });
			
 
				+    }
			
 
				+    // ----------------------------------------基础数据- 设备管理------------------------------------------------
			
 
				+    //查询全部设备型号接口
			
 
				+export const device_list = () => {
			
 
				+        return request.get(`device/model/list`);
			
 
				+    }
			
 
				+    //获取结构tree
			
 
				+export function tree(params) {
			
 
				+    return request({
			
 
				+        url: 'device/structure/tree/windturbine',
			
 
				+        method: 'get',
			
 
				+    });
			
 
				+}
			
 
				+//根据结构获取测点
			
 
				+export function point(code, pagenum, pagesize) {
			
 
				+    return request.get(`device/metrics/page?pagenum=${pagenum}&pagesize=${pagesize}&deviceId=windturbine&structureCode=${code}`);
			
 
				+}
			
 
				+//测点新增
			
 
				+export function metrics(params) {
			
 
				+    return request.post(`device/metrics/single`, params);
			
 
				+}
			
 
				+//测点删除
			
 
				+export function delmetrics(params) {
			
 
				+    return request.delete(`device/metrics/single/delete/${params}`);
			
 
				+}
			
 
				+
			
 
				+//tree新增 添加一个设备结构节点
			
 
				+export function treeAdd(params) {
			
 
				+    return request.post(`device/structure`, params);
			
 
				+}
			
 
				+//tree删除 tree删除一个设备结构节点
			
 
				+export function treeDel(params) {
			
 
				+    return request.delete(`device/structure/delete/${params}`);
			
 
				+}
			
 
				+
			
 
				+
			
 
				+// 故障模式
			
 
				+// get All
			
 
				+export const faultmode_windturbine = () => {
			
 
				+        return request.get(`device/faultmode/windturbine`);
			
 
				+    }
			
 
				+    // 根据 structurecode get
			
 
				+export const faultmode_structurecode = params => {
			
 
				+        return request.get(`device/faultmode/windturbine/${params}`);
			
 
				+    }
			
 
				+    // 根据 id delete
			
 
				+export const faultmode_delete = params => {
			
 
				+    return request.delete(`device/faultmode/delete/${params}`);
			
 
				+}
			
 
				+
			
 
				+// 新增 修改
			
 
				+export const faultmode_add_edit = data => {
			
 
				+    return request.post(`device/faultmode`, data);
			
 
				+}
			
 
				+
			
 
				+// ----------------------------------------end 基础数据- 风机管理------------------------------------------------
			
 
				+
			
 
				+
			
 
				+// ---------------------------------------- 报警配置- 自定义预警------------------------------------------------
			
 
				+export function custombj_fetchTableData(params) {
			
 
				+    return request.get(`alertrule2/page/`, {
			
 
				+        params: params
			
 
				+    });
			
 
				+}
			
 
				+
			
 
				+//根据场站编号，风机型号获取AI测点
			
 
				+export const fetchAIPointList = (stationId, modelId) => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/testing_point_ai',
			
 
				+        method: 'get',
			
 
				+        params: {
			
 
				+            stationId: stationId,
			
 
				+            modelId: modelId
			
 
				+        }
			
 
				+    });
			
 
				+};
			
 
				+//根据场站编号，风机型号获取DI测点
			
 
				+export const fetchDIPointList = (stationId, modelId) => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/testing_point_di',
			
 
				+        method: 'get',
			
 
				+        params: {
			
 
				+            stationId: stationId,
			
 
				+            modelId: modelId
			
 
				+        }
			
 
				+    });
			
 
				+};
			
 
				+//根据场站编号，获取电气DI测点
			
 
				+export const fetchElectricDIPointList = (stationId) => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/electrical_point_di',
			
 
				+        method: 'get',
			
 
				+        params: {
			
 
				+            stationId: stationId
			
 
				+        }
			
 
				+    });
			
 
				+};
			
 
				+//根据电气测点，获取测点信息
			
 
				+export const fetchElectricDIPointByPointId = (pointId) => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/electrical_point_di/byId',
			
 
				+        method: 'get',
			
 
				+        params: {
			
 
				+            pointId: pointId
			
 
				+        }
			
 
				+    });
			
 
				+};
			
 
				+
			
 
				+//获取风机关联部件列表
			
 
				+export const fetchRelatePart = () => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/windturbine_parts',
			
 
				+        method: 'get',
			
 
				+    });
			
 
				+};
			
 
				+//根据风场编号获取电气AI测点
			
 
				+export const fetch_electrical_point_ai = (stationId) => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/electrical_point_ai',
			
 
				+        method: 'get',
			
 
				+        params: {
			
 
				+            stationId: stationId
			
 
				+        }
			
 
				+    });
			
 
				+};
			
 
				+//根据风场编号获取电气DI测点
			
 
				+export const fetch_electrical_point_di = (stationId) => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/electrical_point_di',
			
 
				+        method: 'get',
			
 
				+        params: {
			
 
				+            stationId: stationId
			
 
				+        }
			
 
				+    });
			
 
				+};
			
 
				+//获取报警类型
			
 
				+export const fetchWarningType = () => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/warning_type',
			
 
				+        method: 'get',
			
 
				+    });
			
 
				+};
			
 
				+//获取报警种类
			
 
				+export const fetchWarningClassify = () => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/warning_classify',
			
 
				+        method: 'get',
			
 
				+    });
			
 
				+};
			
 
				+export const custombj_batchImport = list => {
			
 
				+    return Axrequestios.post('' + "alertrule2/save-batch", list);
			
 
				+};
			
 
				+export const custombj_postSave = form => {
			
 
				+    return request.post('' + "alertrule2/save", form)
			
 
				+};
			
 
				+
			
 
				+//******************************end****************************************//
			
 
				+
			
 
				+
			
 
				+//******************************升压站报警API************************************//
			
 
				+
			
 
				+export const scadabj_fetchTableData = query => {
			
 
				+    return request({
			
 
				+        url: '' + 'scadabj/page',
			
 
				+        method: 'get',
			
 
				+        params: query,
			
 
				+        timeout: 20000,
			
 
				+    });
			
 
				+};
			
 
				+export const scadabj_postSave = objData => {
			
 
				+    return request.post('' + "scadabj/save", objData);
			
 
				+};
			
 
				+export const scadabj_batchImport = list => {
			
 
				+    return request.post('' + "scadabj/save-batch", list);
			
 
				+};
			
 
				+//********************************************end********************************//\
			
 
				+
			
 
				+
			
 
				+
			
 
				+//******************************风机报警API************************************//
			
 
				+export const windturbinebj_fetchTableData = query => {
			
 
				+    return request({
			
 
				+        url: '' + 'warning2/page',
			
 
				+        method: 'get',
			
 
				+        params: query,
			
 
				+        timeout: 20000,
			
 
				+    });
			
 
				+};
			
 
				+export const windturbinebj_postSave = form => {
			
 
				+    return Axios.post('' + 'warning2/save', form);
			
 
				+};
			
 
				+export const windturbinebj_batchImport = list => {
			
 
				+    return Axios.post('' + "warning2/save-batch", list);
			
 
				+};
			
 
				+
			
 
				+export const fetchLeaf = () => {
			
 
				+    return request({
			
 
				+        url: '' + 'warning2/page',
			
 
				+        method: 'get',
			
 
				+        params: {
			
 
				+            pagenum: 1,
			
 
				+            pagesize: 10000,
			
 
				+            isLeaf: 0,
			
 
				+        }
			
 
				+    });
			
 
				+};
			
 
				+
			
 
				+
			
 
				+//根据风机型号获取DI测点统一编码相关数据 testingpointdi2
			
 
				+export const getDIPointByModelId = query => {
			
 
				+    return request({
			
 
				+        url: '' + 'info/testing_point_di',
			
 
				+        method: 'get',
			
 
				+        params: query
			
 
				+    });
			
 
				+};
			
 
				+
			
 
				+//******************************end*******************************************// 
			
 
				+//******************************预警统计*******************************************//
			
 
				+export const statistics_querymap = params => {
			
 
				+    return request.get(`alarm/count/querymap2`, { params: params })
			
 
				+        // return request.get(`alarm/count/querymap?stationid=XS_FDC&datebegin=2021-10-12&dateend=2021-11-13`)
			
 
				+};
			
 
				+export const statistics_querybyname = params => {
			
 
				+    return request.get('alarm/count/querybyname2', { params: params })
			
 
				+};
			
 
				+export const statistics_lineandproject = params => {
			
 
				+    return request.get('alarm/count/lineandproject2', { params: params })
			
 
				+};
			
 
				+//******************************end*******************************************//
			
 
				+
			
 
				+//******************************预警分析*******************************************//
			
 
				+export const warning_query_new = params => {
			
 
				+    return request.get(`alarm/count/query/new2`, { params: params })
			
 
				+};
			
 
				+export const warning_detail = params => {
			
 
				+    return request.get('analysis/detail', { params: params })
			
 
				+};
			
 
				+// export const statistics_lineandproject = params => {
			
 
				+//     return request.get('alarm/count/lineandproject', { params: params })
			
 
				+// };
			
 
				+//******************************end*******************************************//
			
--- a/src/api/axios.js
+++ b/src/api/axios.js
@@ -0,0 +1,164 @@
 
				+// 引入axios
			
 
				+import axios from 'axios';
			
 
				+import BASE from '@tools/basicTool.js';
			
 
				+
			
 
				+axios.defaults.withCredentials = true;
			
 
				+
			
 
				+/**
			
 
				+ * 通用请求函数
			
 
				+ * @param {Object} options 详细配置项，使用方法与所有配置项说明如下：
			
 
				+
			
 
				+  this.API.requestData({
			
 
				+    isMust: true, // 请求是否携带 token ，默认为 true ，可缺省 
			
 
				+    showLoading: false, // 请求是否显示加载中遮罩层，默认 false ，可缺省
			
 
				+    method: "GET", // 请求方式，默认为 GET ，可缺省
			
 
				+    baseURL: "http://192.168.10.23:8082/", // 请求服务器地址 + 端口，可缺省
			
 
				+    subUrl: "api/repassword", // 请求接口地址，必传项
			
 
				+    timeout: 3000, // 请求超时时间，默认 3s ，可缺省
			
 
				+    body: { id: "151", name: "张三" }, // 请求体所携带的 Body ，如果后端要求 Body 传参的话需要携带此参数，且请求方式需为 POST
			
 
				+    data: { name: "admin", pasword: "123456" }, // 请求所携带参数，默认为空，可缺省
			
 
				+    success (res) {
			
 
				+      // 请求成功的回调
			
 
				+    },
			
 
				+    fail (error) {
			
 
				+      // 请求失败的回调
			
 
				+    }
			
 
				+  });
			
 
				+
			
 
				+ */
			
 
				+export function requestData(options) {
			
 
				+  return new Promise((resolve, reject) => {
			
 
				+
			
 
				+    if (options.showLoading) {
			
 
				+      BASE.showLoading();
			
 
				+    }
			
 
				+
			
 
				+    // 包装请求头
			
 
				+    let headers = options.headers || {
			
 
				+      'Content-Type': 'application/x-www-form-urlencoded',
			
 
				+      'Access-Control-Allow-Origin': '*',
			
 
				+      'Access-Control-Allow-Credentials': 'true'
			
 
				+    };
			
 
				+
			
 
				+    // 请求是否携带 token
			
 
				+    const isMust = (options.isMust == true || options.isMust == false) ? options.isMust : true;
			
 
				+    if (isMust) headers.authToken = localStorage.getItem('authToken');
			
 
				+
			
 
				+    // 创建请求实例
			
 
				+    const XHRReq = axios.create({
			
 
				+      headers,
			
 
				+      withCredentials: true,
			
 
				+      crossDomain: true,
			
 
				+      baseURL: options.baseURL || window.__MODE__.baseURL || '/api/',
			
 
				+      timeout: options.timeout || 30000, // 请求超时时间 - 3s
			
 
				+    });
			
 
				+
			
 
				+    // 请求拦截器
			
 
				+    XHRReq.interceptors.request.use((config) => {
			
 
				+      return config;
			
 
				+    }, (err) => {
			
 
				+      return Promise.reject(err);
			
 
				+    });
			
 
				+
			
 
				+    // 统一格式包装请求参数
			
 
				+    let params = new URLSearchParams();
			
 
				+    for (let key in (options.data || {})) {
			
 
				+      params.append(key, options.data[key]);
			
 
				+    }
			
 
				+
			
 
				+    // 发起请求
			
 
				+    XHRReq({
			
 
				+      url: options.subUrl,
			
 
				+      method: options.method || 'GET',
			
 
				+      params,
			
 
				+    }).then(response => {
			
 
				+      if (options.showLoading) {
			
 
				+        BASE.closeLoading();
			
 
				+      }
			
 
				+      if (response.data.code === 2002) { // 用户类请求错误code (账号密码错误、用户锁定、token过期等)
			
 
				+
			
 
				+        localStorage.removeItem('authToken');
			
 
				+        BASE.showMsg({
			
 
				+          msg: (response.data && response.data.msg) || ("请求出错[" + response.data.code + "]")
			
 
				+        });
			
 
				+
			
 
				+        // window.location.reload();
			
 
				+        // window.__STATICVUE__.$router.replace('/login');
			
 
				+
			
 
				+      } else if (response.data.code === 200 || response.data.length >= 0 || response.data.records) { // 请求成功 code
			
 
				+
			
 
				+        options.success && options.success(response.data);
			
 
				+        resolve(response);
			
 
				+
			
 
				+      } else { // 其他code
			
 
				+        BASE.closeLoading();
			
 
				+        BASE.showMsg({
			
 
				+          msg: (response.data && response.data.msg) || ("请求出错[" + response.data.code + "]")
			
 
				+        });
			
 
				+
			
 
				+      }
			
 
				+    }).catch(error => {
			
 
				+
			
 
				+      if (options.showLoading) {
			
 
				+        BASE.closeLoading();
			
 
				+      }
			
 
				+
			
 
				+      options.fail && options.fail(error);
			
 
				+      reject(error);
			
 
				+
			
 
				+    });
			
 
				+  });
			
 
				+}
			
 
				+
			
 
				+
			
 
				+/**
			
 
				+ * 原生 axios 请求方法
			
 
				+ * @param {Object} options 请求配置项，调用方法：
			
 
				+  this.API.get({
			
 
				+    showLoading: false, // 请求是否显示加载中遮罩层，默认 false ，可缺省
			
 
				+    baseURL: "http://192.168.10.23:8082/", // 请求服务器地址 + 端口，可缺省
			
 
				+    subUrl: "api/repassword", // 请求接口地址，必传项
			
 
				+    success (res) {
			
 
				+      // 请求成功的回调
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+
			
 
				+ */
			
 
				+function get(options) {
			
 
				+  const baseURL = options.baseURL || window.__MODE__.baseURL || '/api/';
			
 
				+
			
 
				+  if (options.showLoading) {
			
 
				+    BASE.showLoading();
			
 
				+  }
			
 
				+
			
 
				+  axios.get(baseURL + options.subUrl)
			
 
				+    .then(res => {
			
 
				+      if (res.code === 200) {
			
 
				+        if (options.showLoading) {
			
 
				+          BASE.closeLoading();
			
 
				+        }
			
 
				+        options.success && options.success(res)
			
 
				+      } else {
			
 
				+        if (options.showLoading) {
			
 
				+          BASE.closeLoading();
			
 
				+        }
			
 
				+        BASE.showMsg({
			
 
				+          msg: (res.data && res.data.msg) || ("请求出错[" + res.data.code + "]")
			
 
				+        });
			
 
				+      }
			
 
				+    }).catch(err => {
			
 
				+      if (options.showLoading) {
			
 
				+        BASE.closeLoading();
			
 
				+      }
			
 
				+      BASE.showMsg({
			
 
				+        msg: "请求未能完成"
			
 
				+      });
			
 
				+    });
			
 
				+}
			
 
				+
			
 
				+
			
 
				+export default {
			
 
				+  requestData,
			
 
				+  get,
			
 
				+}
			
--- a/src/api/config.js
+++ b/src/api/config.js
@@ -0,0 +1,13 @@
 
				+/**
			
 
				+ * 国电电力宁夏新能源集中监控系统
			
 
				+ * */
			
 
				+
			
 
				+//测试 - 国电
			
 
				+export default {
			
 
				+  webSoketUrl: 'ws://10.155.32.4:8082/gyee-websocket', // webSoket
			
 
				+}
			
 
				+
			
 
				+//生产 - 国电
			
 
				+// export default {
			
 
				+//   webSoketUrl: '192.168.4.203:9008', // webSoket
			
 
				+// }
			
--- a/src/api/zmaxios.js
+++ b/src/api/zmaxios.js
@@ -0,0 +1,61 @@
 
				+import axios from 'axios';
			
 
				+import { ElMessage, ElMessageBox } from 'element-plus';
			
 
				+
			
 
				+// 配置新建一个 axios 实例
			
 
				+const service = axios.create({
			
 
				+    baseURL: 'http://192.168.1.18:8075',
			
 
				+    timeout: 50000,
			
 
				+    headers: { 'Content-Type': 'application/json' },
			
 
				+});
			
 
				+
			
 
				+// 添加请求拦截器
			
 
				+service.interceptors.request.use(
			
 
				+    (config) => {
			
 
				+        // 在发送请求之前做些什么 token
			
 
				+        let token = sessionStorage.getItem('token')
			
 
				+        if (token) {
			
 
				+            config.headers.common['token'] = token;
			
 
				+        }
			
 
				+        return config
			
 
				+    },
			
 
				+    (error) => {
			
 
				+        // 对请求错误做些什么
			
 
				+        return Promise.reject(error);
			
 
				+    }
			
 
				+);
			
 
				+
			
 
				+// 添加响应拦截器
			
 
				+service.interceptors.response.use(
			
 
				+    (response) => {
			
 
				+        // 对响应数据做点什么
			
 
				+        const res = response.data;
			
 
				+        if (res.code && res.code !== 0 && res.code == !200) {
			
 
				+            // `token` 过期或者账号已在别处登录
			
 
				+            if (res.code === 401 || res.code === 4001) {
			
 
				+                localStorage.clear(); // 清除浏览器全部临时缓存
			
 
				+                window.location.href = '/'; // 去登录页
			
 
				+                ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
			
 
				+                    .then(() => {})
			
 
				+                    .catch(() => {});
			
 
				+            }
			
 
				+            return Promise.reject(service.interceptors.response);
			
 
				+        } else {
			
 
				+            return response.data;
			
 
				+        }
			
 
				+    },
			
 
				+    (error) => {
			
 
				+        // 对响应错误做点什么
			
 
				+        if (error.message.indexOf('timeout') != -1) {
			
 
				+            ElMessage.error('网络超时');
			
 
				+        } else if (error.message == 'Network Error') {
			
 
				+            ElMessage.error('网络连接错误');
			
 
				+        } else {
			
 
				+            if (error.response.data) ElMessage.error(error.response.statusText);
			
 
				+            else ElMessage.error('接口路径找不到');
			
 
				+        }
			
 
				+        return Promise.reject(error);
			
 
				+    }
			
 
				+);
			
 
				+
			
 
				+// 导出 axios 实例
			
 
				+export default service;
			
--- a/src/assets/styles/app.less
+++ b/src/assets/styles/app.less
@@ -0,0 +1,102 @@
 
				+.background {
			
 
				+  background: fade(@darkgray, 20);
			
 
				+}
			
 
				+
			
 
				+.pd-8 {
			
 
				+  padding: 0.741vh;
			
 
				+}
			
 
				+
			
 
				+.pd-t-8 {
			
 
				+  padding-top: 0.741vh;
			
 
				+}
			
 
				+
			
 
				+.pd-b-8 {
			
 
				+  padding-bottom: 0.741vh;
			
 
				+}
			
 
				+
			
 
				+.pd-l-8 {
			
 
				+  padding-left: 0.741vh;
			
 
				+}
			
 
				+
			
 
				+.pd-r-8 {
			
 
				+  padding-right: 0.741vh;
			
 
				+}
			
 
				+
			
 
				+.pd-16 {
			
 
				+  padding: 1.481vh;
			
 
				+}
			
 
				+.pd-t-16 {
			
 
				+  padding-top: 1.481vh;
			
 
				+}
			
 
				+
			
 
				+.pd-b-16 {
			
 
				+  padding-bottom: 1.481vh;
			
 
				+}
			
 
				+
			
 
				+.pd-l-16 {
			
 
				+  padding-left: 1.481vh;
			
 
				+}
			
 
				+
			
 
				+.pd-r-16 {
			
 
				+  padding-right: 1.481vh;
			
 
				+}
			
 
				+
			
 
				+.mg-8 {
			
 
				+  margin: 0.741vh;
			
 
				+}
			
 
				+
			
 
				+.mg-t-8 {
			
 
				+  margin-top: 0.741vh;
			
 
				+}
			
 
				+
			
 
				+.mg-b-8 {
			
 
				+  margin-bottom: 0.741vh;
			
 
				+}
			
 
				+
			
 
				+.mg-l-8 {
			
 
				+  margin-left: 0.741vh;
			
 
				+}
			
 
				+
			
 
				+.mg-r-8 {
			
 
				+  margin-right: 0.741vh;
			
 
				+}
			
 
				+
			
 
				+.mg-16 {
			
 
				+  margin: 1.481vh;
			
 
				+}
			
 
				+.mg-t-16 {
			
 
				+  margin-top: 1.481vh;
			
 
				+}
			
 
				+
			
 
				+.mg-b-16 {
			
 
				+  margin-bottom: 1.481vh;
			
 
				+}
			
 
				+
			
 
				+.mg-l-16 {
			
 
				+  margin-left: 1.481vh;
			
 
				+}
			
 
				+
			
 
				+.mg-r-16 {
			
 
				+  margin-right: 1.481vh;
			
 
				+}
			
 
				+
			
 
				+.scroll {
			
 
				+  overflow: hidden;
			
 
				+  padding-right: 6px;
			
 
				+  &:hover {
			
 
				+    overflow: auto;
			
 
				+    padding-right: 0px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.el-col + .el-col {
			
 
				+  padding-left: 1.481vh;
			
 
				+}
			
 
				+
			
 
				+.blur {
			
 
				+  backdrop-filter: blur(3px);
			
 
				+}
			
 
				+
			
 
				+.pointer {
			
 
				+  cursor: pointer;
			
 
				+}
			
--- a/src/assets/styles/button.less
+++ b/src/assets/styles/button.less
@@ -0,0 +1,27 @@
 
				+.btn {
			
 
				+  height: 33px;
			
 
				+  line-height: 33px;
			
 
				+  flex: 0 0 auto;
			
 
				+  background: transparent;
			
 
				+  border: 1px solid @darkgray;
			
 
				+  padding: 0 1.481vh;
			
 
				+  color: @gray;
			
 
				+  font-size: @fontsize-s;
			
 
				+  cursor: pointer;
			
 
				+
			
 
				+  &:hover {
			
 
				+    border-color: @green;
			
 
				+    color: @green;
			
 
				+    background: fade(@green, 20);
			
 
				+  }
			
 
				+
			
 
				+  &.green {
			
 
				+    border-color: @green;
			
 
				+    color: @green;
			
 
				+    background: fade(@green, 20);
			
 
				+  }
			
 
				+
			
 
				+  & + button {
			
 
				+    margin-left: 16px;
			
 
				+  }
			
 
				+}
			
--- a/src/assets/styles/color.less
+++ b/src/assets/styles/color.less
@@ -0,0 +1,75 @@
 
				+.bg-green {
			
 
				+  background: @green;
			
 
				+}
			
 
				+
			
 
				+.green {
			
 
				+  color: @green;
			
 
				+}
			
 
				+
			
 
				+.bg-yellow {
			
 
				+  background: @yellow;
			
 
				+}
			
 
				+
			
 
				+.bg-blue {
			
 
				+  background: @blue;
			
 
				+}
			
 
				+
			
 
				+.bg-pink {
			
 
				+  background: @pink;
			
 
				+}
			
 
				+
			
 
				+.blue {
			
 
				+  color: @blue;
			
 
				+}
			
 
				+
			
 
				+.darkblue {
			
 
				+  color: @darkBlue2;
			
 
				+}
			
 
				+
			
 
				+.yellow {
			
 
				+  color: @yellow;
			
 
				+}
			
 
				+
			
 
				+.gray {
			
 
				+  color: @font-color;
			
 
				+}
			
 
				+
			
 
				+.purple {
			
 
				+  color: @purple;
			
 
				+}
			
 
				+
			
 
				+.bg-purple {
			
 
				+  background: @purple;
			
 
				+}
			
 
				+
			
 
				+.orange {
			
 
				+  color: @orange;
			
 
				+}
			
 
				+
			
 
				+.bg-orange {
			
 
				+  background: @orange;
			
 
				+}
			
 
				+
			
 
				+.red {
			
 
				+  color: @red;
			
 
				+}
			
 
				+
			
 
				+.bg-red {
			
 
				+  background: @red;
			
 
				+}
			
 
				+
			
 
				+.gary-l {
			
 
				+  color: @gray-l;
			
 
				+}
			
 
				+
			
 
				+.gray-l {
			
 
				+  color: @gray-l;
			
 
				+}
			
 
				+
			
 
				+.pink {
			
 
				+  color: @pink;
			
 
				+}
			
 
				+
			
 
				+.white {
			
 
				+    color: @white;
			
 
				+}
			
--- a/src/assets/styles/common/color.css
+++ b/src/assets/styles/common/color.css
@@ -0,0 +1,7 @@
 
				+.drak-theme {
			
 
				+  --color-green: #05bb4c;
			
 
				+}
			
 
				+
			
 
				+.light-theme {
			
 
				+  --color-green: pink;
			
 
				+}
			
--- a/src/assets/styles/common/color.less
+++ b/src/assets/styles/common/color.less
@@ -0,0 +1,26 @@
 
				+@green: #05bb4c;
			
 
				+@yellow: #edbf03;
			
 
				+@blue: #1a93cf;
			
 
				+@darkBlue: #4b55ae;
			
 
				+@darkBlue2: #1529E9;
			
 
				+@darkgray: #606769;
			
 
				+@gray: #606769;
			
 
				+@gray-l: #B3BDC0;
			
 
				+@black: #000000;
			
 
				+@write: #ffffff;
			
 
				+@ligntRed: #ff7a7f;
			
 
				+@red: #BA3237;
			
 
				+@darkRed: #710f14;
			
 
				+@purple: #4b55ae;
			
 
				+@orange: #e17e23;
			
 
				+@white: #ffffff;
			
 
				+@pink: #c531c7;
			
 
				+
			
 
				+@greenLinearTop: linear-gradient(to top, fade(@green, 50%), fade(@green, 0));
			
 
				+@greenLinearRight: linear-gradient(to right, fade(@green, 50%), fade(@green, 0));
			
 
				+@redLinearRight: linear-gradient(to right, fade(@red, 50%), fade(@red, 0));
			
 
				+
			
 
				+@deepblueLinearTop: linear-gradient(to top, fade(@deepblue, 50%), fade(@deepblue, 0));
			
 
				+@deepblueLinearRight: linear-gradient(to right, fade(@deepblue, 50%), fade(@deepblue, 0));
			
 
				+
			
 
				+@font-color: #7a8385;
			
--- a/src/assets/styles/common/common.less
+++ b/src/assets/styles/common/common.less
@@ -0,0 +1,50 @@
 
				+@import "color.less";
			
 
				+@import "font.less";
			
 
				+
			
 
				+// 关于主题样式的开发，应遵循以下开发提规章：
			
 
				+// 1. 通过增加样式的 id class 标签名 来提升权重实现样式替换。
			
 
				+// 即：避免使用 !important 修饰符来提升权重(本身需覆盖的样式就有 !important 的除外)
			
 
				+
			
 
				+// 2. 个人所负责的模块内的所有样式个人处理解决完。
			
 
				+// 包括但不限于模块内所使用但还没进行样式切换修改的组件、工具、弹窗、第三方UI库等。
			
 
				+
			
 
				+// 3. 理论上来说只需要亮色主题样式。
			
 
				+// 但是部分模块可能还需要再写一份暗色的样式避免切换后亮色主题的部分样式残留问题。如需写两套，所分配任务的个人承担。
			
 
				+
			
 
				+// 4. 遵循一个模块一个 less 文件的原则，文件顶部写明当前文件所属模块的名称。
			
 
				+
			
 
				+// 5. 提交代码后如果衍生出冲突需要自行解决
			
 
				+
			
 
				+// 亮色主题
			
 
				+@import "../theme/light/light-jsc.less"; // 驾驶舱
			
 
				+@import "../theme/light/light-jjyx.less"; // 经济运行
			
 
				+@import "../theme/light/light-sp.less"; // 沙盘
			
 
				+@import "../theme/light/light-qt.less"; // 其他
			
 
				+
			
 
				+@import "../theme/light/components.less"; // 白色组件
			
 
				+
			
 
				+// 驾驶舱模块
			
 
				+@import "../theme/light/jsc/status.less"; // 状态监视
			
 
				+@import "../theme/light/jsc/lightmatrix1.less"; // 基础矩阵
			
 
				+@import "../theme/light/jsc/lightmatrix2.less"; // 光伏矩阵
			
 
				+@import "../theme/light/jsc/info.less"; // 单机状态监视  /monitor/windsite/info/MHS_FDC/MG01_01
			
 
				+@import "../theme/light/jsc/inverter-info.less"; //monitor/windsite/inverter-info/MHS_FDC/MG01_01
			
 
				+@import "../theme/light/jsc/matrix.less";//风场矩阵 /monitor/windsite/matrix/MHS_FDC
			
 
				+@import "../theme/light/jsc/agc.less";// AGC 监视
			
 
				+@import "../theme/light/jsc/home.less";// 场站监视  /monitor/windsite/home/MHS_FDC
			
 
				+@import "../theme/light/jsc/map.less";// 场站监视  /monitor/windsite/map/MHS_FDC
			
 
				+
			
 
				+
			
 
				+// 经济运行模块
			
 
				+@import "../theme/light/jjyx/decision1.less";//风机绩效榜 /decision/decision1
			
 
				+@import "../theme/light/jjyx/decision3db.less";//单机横向对比 /decision/decision3db
			
 
				+@import "../theme/light/jjyx/ztzhl.less";// 状态转换率 /decision/ztzhl
			
 
				+@import "../theme/light/jjyx/ztfx.less"; //专题分析 /decision/ztfx
			
 
				+@import "../theme/light/jjyx/dlyc.less"; //专题分析 /decision/dlyc
			
 
				+// 智慧检修模块
			
 
				+@import "../theme/light/zhjx/frist.less"; //健康推荐 /health/frist
			
 
				+@import "../theme/light/zhjx/malfunctionRecall.less"; //故障回溯 /health/gzzd/malfunctionRecall
			
 
				+// 安全管控模块
			
 
				+@import "../theme/light/aqgk/personnel.less"; //人员矩阵 /save/personnel
			
 
				+// 暗色主题
			
 
				+@import "../theme/dark/dark-jsc.less"; // 驾驶舱
			
--- a/src/assets/styles/common/font.less
+++ b/src/assets/styles/common/font.less
@@ -0,0 +1,9 @@
 
				+// @fontsize: 14px;
			
 
				+// @fontsize-l: 16px;
			
 
				+// @fontsize-s: 12px;
			
 
				+@defalut-font-family: Arial, "SourceHanSans", "Microsoft YaHei", sans-serif;
			
 
				+@font-family-num: "Bicubik";
			
 
				+
			
 
				+@fontsize: 1.481vh;
			
 
				+@fontsize-l: 1.667vh;
			
 
				+@fontsize-s: 1.296vh;
			
--- a/src/assets/styles/dialog.less
+++ b/src/assets/styles/dialog.less
@@ -0,0 +1,92 @@
 
				+.modal {
			
 
				+  &.el-dialog {
			
 
				+    background: fade(#121d1c, 95);
			
 
				+    border: 1px solid fade(@green, 50);
			
 
				+    box-shadow: 0px 8px 17px 1px rgba(5, 187, 76, 0.3);
			
 
				+
			
 
				+    .el-dialog__header {
			
 
				+      padding: 10px 0;
			
 
				+      border-bottom: 1px solid #323b3c;
			
 
				+      margin: 0 24px;
			
 
				+      .el-dialog__title {
			
 
				+        font-size: 16px;
			
 
				+        color: fade(@white, 75);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.el-dialog--center .el-dialog__body,
			
 
				+    .el-dialog__body {
			
 
				+      padding: 16px 24px;
			
 
				+    }
			
 
				+
			
 
				+    &.hide-header {
			
 
				+      .el-dialog__header {
			
 
				+        border: none;
			
 
				+        .el-dialog__title {
			
 
				+          display: none;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.el-overlay {
			
 
				+  .el-message-box {
			
 
				+    background: fade(#121d1c, 95);
			
 
				+    border: 1px solid fade(@green, 50);
			
 
				+    box-shadow: 0px 8px 17px 1px rgba(5, 187, 76, 0.3);
			
 
				+  }
			
 
				+  .el-message-box__header {
			
 
				+    .el-message-box__title {
			
 
				+      color: @gray;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .el-message-box__content {
			
 
				+    color: @white;
			
 
				+  }
			
 
				+
			
 
				+  .el-message-box__btns {
			
 
				+    .el-button {
			
 
				+      height: 30px;
			
 
				+      flex: 0 0 auto;
			
 
				+      background: transparent;
			
 
				+      border: 1px solid @gray;
			
 
				+      padding: 0 1.481vh;
			
 
				+      color: @gray;
			
 
				+      font-size: 1.296vh;
			
 
				+      cursor: pointer;
			
 
				+
			
 
				+      &.el-button--primary {
			
 
				+        border-color: @green;
			
 
				+        color: @green;
			
 
				+        background: fade(@green, 20);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.el-message {
			
 
				+  &.el-message--info {
			
 
				+    border-color: @gray;
			
 
				+    background-color: fade(@gray, 20);
			
 
				+    color: @gray;
			
 
				+  }
			
 
				+  &.el-message--success {
			
 
				+    border-color: @green;
			
 
				+    background-color: fade(@green, 20);
			
 
				+    color: @green;
			
 
				+  }
			
 
				+
			
 
				+  &.el-message--warning {
			
 
				+    border-color: @yellow;
			
 
				+    background-color: fade(@yellow, 20);
			
 
				+    color: @yellow;
			
 
				+  }
			
 
				+
			
 
				+  &.el-message--error {
			
 
				+    border-color: @red;
			
 
				+    background-color: fade(@red, 20);
			
 
				+    color: @red;
			
 
				+  }
			
 
				+}
			
--- a/src/assets/styles/el-override/el-card.less
+++ b/src/assets/styles/el-override/el-card.less
@@ -0,0 +1,13 @@
 
				+.main-body {
			
 
				+  .el-card {
			
 
				+    background: transparent;
			
 
				+    border-color: fade(@gray, 50);
			
 
				+    border-radius: 0;
			
 
				+
			
 
				+    .el-card__header {
			
 
				+      color: @gray-l;
			
 
				+      background: fade(@gray, 20);
			
 
				+      border: none;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/assets/styles/el-override/el-input.less
+++ b/src/assets/styles/el-override/el-input.less
@@ -0,0 +1,392 @@
 
				+@picker-bg-color: fade(#121d1c, 95);
			
 
				+
			
 
				+body {
			
 
				+  .el-input__inner {
			
 
				+    background: fade(@gray, 20);
			
 
				+    color: @gray-l;
			
 
				+  }
			
 
				+
			
 
				+  .el-input {
			
 
				+    &.is-disabled .el-input__inner {
			
 
				+      background-color: fade(@gray-l, 20);
			
 
				+      border-color: @gray;
			
 
				+      color: @gray;
			
 
				+      cursor: not-allowed;
			
 
				+    }
			
 
				+
			
 
				+    &.is-in-pagination .el-input__inner[type="number"] {
			
 
				+      width: 48px;
			
 
				+    }
			
 
				+
			
 
				+    .el-input__inner[type="number"] {
			
 
				+      width: 200px;
			
 
				+
			
 
				+      &::-webkit-textfield-decoration-container {
			
 
				+        appearance: none;
			
 
				+      }
			
 
				+
			
 
				+      &::-webkit-inner-spin-button,
			
 
				+      &::-webkit-outer-spin-button {
			
 
				+        appearance: none;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 数字组件
			
 
				+  .el-input-number {
			
 
				+    &.is-controls-right {
			
 
				+      .el-input-number__increase {
			
 
				+        border-bottom: 1px solid @gray;
			
 
				+      }
			
 
				+
			
 
				+      .el-input-number__decrease,
			
 
				+      .el-input-number__increase {
			
 
				+        line-height: 15px;
			
 
				+        color: @gray-l;
			
 
				+        background: fade(@gray, 40);
			
 
				+        border-left: 1px solid @gray;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 日期组件
			
 
				+  .el-date-editor {
			
 
				+    &.is-active,
			
 
				+    &.is-active:hover,
			
 
				+    &.is-focus .el-input__inner {
			
 
				+      border-color: @green;
			
 
				+    }
			
 
				+
			
 
				+    // el datetimerange Start
			
 
				+    &.el-date-editor--datetimerange ,&.el-date-editor--daterange{
			
 
				+      border: 1px solid fade(@gray, 20);
			
 
				+      height: 33px;
			
 
				+      padding: 0 8px;
			
 
				+      width: 369px;
			
 
				+
			
 
				+      .el-range-separator {
			
 
				+        color: @gray-l;
			
 
				+        line-height: 33px;
			
 
				+      }
			
 
				+
			
 
				+      .el-range-input {
			
 
				+        flex-basis: 145px;
			
 
				+        line-height: 33px;
			
 
				+        background: transparent;
			
 
				+        color: @gray-l;
			
 
				+        &::placeholder {
			
 
				+          text-align: center;
			
 
				+          color: @gray-l;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    // el datetimerange End
			
 
				+  }
			
 
				+
			
 
				+  // 单选框
			
 
				+  .el-radio {
			
 
				+    color: @gray-l;
			
 
				+
			
 
				+    &.is-checked {
			
 
				+      .el-radio__inner {
			
 
				+        background: @green;
			
 
				+        border-color: @green;
			
 
				+      }
			
 
				+
			
 
				+      .el-radio__label {
			
 
				+        color: @green;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.is-bordered.is-checked {
			
 
				+      border-color: @green;
			
 
				+    }
			
 
				+
			
 
				+    &:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
			
 
				+      box-shadow: 0 0 2px 2px @green;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 单选框组
			
 
				+  .el-radio-group {
			
 
				+    height: 33px;
			
 
				+    & > .el-radio {
			
 
				+      line-height: 33px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .el-checkbox {
			
 
				+    height: 33px;
			
 
				+    line-height: 33px;
			
 
				+    color: @gray-l;
			
 
				+
			
 
				+    &.is-bordered {
			
 
				+      height: 33px;
			
 
				+      line-height: 33px;
			
 
				+      padding: 0px 20px;
			
 
				+      border-color: @gray;
			
 
				+
			
 
				+      &.is-checked {
			
 
				+        border-color: @green;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .el-checkbox__inner {
			
 
				+      background: fade(@gray, 20);
			
 
				+      border-color: fade(@gray, 40);
			
 
				+    }
			
 
				+
			
 
				+    .el-checkbox__input.is-checked + .el-checkbox__label {
			
 
				+      color: @green;
			
 
				+    }
			
 
				+
			
 
				+    .el-checkbox__input.is-checked .el-checkbox__inner,
			
 
				+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
			
 
				+      background-color: @green;
			
 
				+      border-color: @green;
			
 
				+    }
			
 
				+
			
 
				+    .el-checkbox__input.is-focus .el-checkbox__inner {
			
 
				+      border-color: @green;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 树组件
			
 
				+  .el-tree {
			
 
				+    color: @gray-l;
			
 
				+    background: fade(@gray, 20);
			
 
				+
			
 
				+    .el-checkbox__inner {
			
 
				+      background: transparent;
			
 
				+      border-color: @gray;
			
 
				+    }
			
 
				+
			
 
				+    .el-tree-node:focus > .el-tree-node__content {
			
 
				+      background: transparent;
			
 
				+    }
			
 
				+
			
 
				+    .el-checkbox__input.is-disabled .el-checkbox__inner {
			
 
				+      background: @gray;
			
 
				+      border-color: @gray;
			
 
				+    }
			
 
				+
			
 
				+    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
			
 
				+      background: transparent;
			
 
				+      color: @green;
			
 
				+    }
			
 
				+
			
 
				+    .el-tree-node__content:hover,
			
 
				+    .el-upload-list__item:hover {
			
 
				+      background: transparent;
			
 
				+      color: @green;
			
 
				+    }
			
 
				+
			
 
				+    .el-checkbox__inner:hover {
			
 
				+      border-color: @green;
			
 
				+    }
			
 
				+
			
 
				+    .el-checkbox__input.is-focus .el-checkbox__inner {
			
 
				+      border-color: @green;
			
 
				+    }
			
 
				+
			
 
				+    .el-checkbox__input.is-checked .el-checkbox__inner,
			
 
				+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
			
 
				+      background: @green;
			
 
				+      border-color: @green;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // Cascader 级联选择器
			
 
				+  .el-cascader {
			
 
				+    line-height: 30px;
			
 
				+    .el-cascader__tags {
			
 
				+      .el-tag {
			
 
				+        color: white;
			
 
				+        background-color: fade(@green, 50);
			
 
				+
			
 
				+        .el-icon-close {
			
 
				+          background-color: fade(@green, 50);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .el-input__suffix {
			
 
				+      right: 0px;
			
 
				+    }
			
 
				+
			
 
				+  }
			
 
				+
			
 
				+  .el-select {
			
 
				+    .el-input.is-focus .el-input__inner {
			
 
				+      border-color: @green;
			
 
				+    }
			
 
				+    .el-input__inner:focus {
			
 
				+      border-color: @green;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .el-popper {
			
 
				+    &.el-cascader__dropdown[role="tooltip"] {
			
 
				+      background: @picker-bg-color;
			
 
				+      border-color: @picker-bg-color;
			
 
				+
			
 
				+      .el-cascader-menu {
			
 
				+        border-color: @gray;
			
 
				+      }
			
 
				+
			
 
				+      .el-cascader-node:not(.is-disabled):focus,
			
 
				+      .el-cascader-node:not(.is-disabled):hover {
			
 
				+        background: fade(@green, 20);
			
 
				+        color: @green;
			
 
				+      }
			
 
				+
			
 
				+      .el-cascader-node.in-active-path,
			
 
				+      .el-cascader-node.is-active,
			
 
				+      .el-cascader-node.is-selectable.in-checked-path {
			
 
				+        color: @green;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.el-select__popper[role="tooltip"] {
			
 
				+      border-color: @picker-bg-color;
			
 
				+      background: @picker-bg-color;
			
 
				+
			
 
				+      .el-cascader-menu {
			
 
				+        border-color: @gray;
			
 
				+      }
			
 
				+
			
 
				+      .el-select-dropdown__item.hover,
			
 
				+      .el-select-dropdown__item:hover {
			
 
				+        background: fade(@green, 20);
			
 
				+        color: @green;
			
 
				+      }
			
 
				+
			
 
				+      .el-select-dropdown__item.selected {
			
 
				+        color: @green;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.el-picker__popper.el-popper[role="tooltip"] {
			
 
				+  border-color: @picker-bg-color !important;
			
 
				+  background: @picker-bg-color !important;
			
 
				+}
			
 
				+
			
 
				+.el-picker-panel {
			
 
				+  // el datetimerange  picker Start
			
 
				+  &.el-date-range-picker {
			
 
				+    color: @gray-l;
			
 
				+    background: transparent;
			
 
				+
			
 
				+    .el-date-range-picker__time-header {
			
 
				+      border-color: @gray;
			
 
				+
			
 
				+      .el-icon-arrow-right {
			
 
				+        color: @gray-l;
			
 
				+      }
			
 
				+
			
 
				+      .el-input__inner {
			
 
				+        background: fade(@gray, 20);
			
 
				+        color: @gray-l;
			
 
				+        border-color: @gray;
			
 
				+      }
			
 
				+
			
 
				+      .el-date-range-picker__time-picker-wrap {
			
 
				+        .el-time-panel {
			
 
				+          background-color: @picker-bg-color;
			
 
				+
			
 
				+          .el-time-spinner__item.active:not(.disabled) {
			
 
				+            color: @green;
			
 
				+          }
			
 
				+          .el-time-spinner__item:hover:not(.disabled):not(.active) {
			
 
				+            background: transparent;
			
 
				+            color: @green;
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .el-time-panel__btn.confirm {
			
 
				+          color: @green;
			
 
				+        }
			
 
				+
			
 
				+        .el-time-panel__btn.cancel {
			
 
				+          color: @gray;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .el-date-range-picker__content {
			
 
				+      border-color: @gray;
			
 
				+
			
 
				+      .el-date-table {
			
 
				+        th {
			
 
				+          color: @gray-l;
			
 
				+        }
			
 
				+
			
 
				+        td {
			
 
				+          &.available:hover {
			
 
				+            color: @green;
			
 
				+          }
			
 
				+
			
 
				+          &.in-range div,
			
 
				+          &.in-range div:hover {
			
 
				+            background: fade(@gray, 40);
			
 
				+          }
			
 
				+
			
 
				+          &.end-date span,
			
 
				+          &.start-date span {
			
 
				+            background: @green;
			
 
				+          }
			
 
				+
			
 
				+          &.today {
			
 
				+            span {
			
 
				+              color: @green;
			
 
				+            }
			
 
				+
			
 
				+            &.end-date span,
			
 
				+            &.start-date span {
			
 
				+              color: @white;
			
 
				+            }
			
 
				+          }
			
 
				+
			
 
				+          &.next-month,
			
 
				+          &.prev-month {
			
 
				+            color: @gray;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  // el datetimerange  picker End
			
 
				+
			
 
				+  .el-picker-panel__body {
			
 
				+    border-color: @gray;
			
 
				+  }
			
 
				+
			
 
				+  .el-picker-panel__footer {
			
 
				+    background: transparent;
			
 
				+    border-color: @gray;
			
 
				+
			
 
				+    .el-button--text {
			
 
				+      color: @gray;
			
 
				+    }
			
 
				+
			
 
				+    .el-button.is-plain {
			
 
				+      background: transparent;
			
 
				+      border-color: @green;
			
 
				+      color: @green;
			
 
				+    }
			
 
				+  }
			
 
				+  .el-time-panel__btn.confirm {
			
 
				+    color: @green;
			
 
				+  }
			
 
				+  
			
 
				+  .el-time-panel__btn.cancel {
			
 
				+    color: @gray;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.el-popper__arrow::before {
			
 
				+  background: fade(#121d1c, 95) !important;
			
 
				+  border: 1px solid fade(#121d1c, 95) !important;
			
 
				+}
			
--- a/src/assets/styles/el-override/el-pagination.less
+++ b/src/assets/styles/el-override/el-pagination.less
@@ -0,0 +1,40 @@
 
				+// el-pagination
			
 
				+.main-body {
			
 
				+  .el-pagination {
			
 
				+    color: @gray;
			
 
				+    .el-pagination__total {
			
 
				+      color: @gray;
			
 
				+    }
			
 
				+
			
 
				+    button {
			
 
				+      &.btn-next,
			
 
				+      &.btn-prev {
			
 
				+        background: center center no-repeat fade(@gray, 20);
			
 
				+        color: @gray-l;
			
 
				+      }
			
 
				+      &:disabled {
			
 
				+        color: @gray-l;
			
 
				+        background-color: fade(@gray, 20);
			
 
				+        cursor: not-allowed;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .el-pager li {
			
 
				+      color: @gray-l;
			
 
				+      background: fade(@gray, 20);
			
 
				+      &.active {
			
 
				+        color: @green;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .el-input__inner {
			
 
				+      color: @gray-l;
			
 
				+      background: fade(@gray, 20);
			
 
				+      border: 1px solid fade(@gray, 20);
			
 
				+    }
			
 
				+
			
 
				+    .el-pagination__sizes .el-input .el-input__inner:hover {
			
 
				+      border-color: @green;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/assets/styles/el-override/el-table.less
+++ b/src/assets/styles/el-override/el-table.less
@@ -0,0 +1,120 @@
 
				+// el-table
			
 
				+.main-body,.df-table {
			
 
				+  .el-table,.custom-table.el-table {
			
 
				+    background: transparent;
			
 
				+    border: 0px;
			
 
				+
			
 
				+    &.el-table--border::after,
			
 
				+    &.el-table--group::after,
			
 
				+    &::before {
			
 
				+      background-color: transparent;
			
 
				+    }
			
 
				+
			
 
				+    tr {
			
 
				+      &:hover {
			
 
				+        td {
			
 
				+          color: @green;
			
 
				+          background-color: transparent !important;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    td {
			
 
				+      border: 0px;
			
 
				+      padding: 0;
			
 
				+      height: 27px;
			
 
				+      line-height: 27px;
			
 
				+      font-size: 12px;
			
 
				+      color: @gray-l;
			
 
				+
			
 
				+      &.light,
			
 
				+      &.always-light {
			
 
				+        color: @green !important;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    th {
			
 
				+      border: 0px;
			
 
				+      padding: 0px;
			
 
				+      height: 30px;
			
 
				+      line-height: 30px;
			
 
				+      font-weight: normal;
			
 
				+      text-align: center;
			
 
				+      color: @gray-l;
			
 
				+      cursor: pointer;
			
 
				+
			
 
				+      &.is-leaf {
			
 
				+        border: 0px;
			
 
				+      }
			
 
				+
			
 
				+      &.light,
			
 
				+      &.always-light {
			
 
				+        color: @green !important;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    th,
			
 
				+    tr {
			
 
				+      background-color: transparent;
			
 
				+      border: 0px;
			
 
				+    }
			
 
				+
			
 
				+    thead {
			
 
				+      color: @gray-l;
			
 
				+      font-weight: 500;
			
 
				+      font-size: @fontsize-s;
			
 
				+      border: 0px;
			
 
				+
			
 
				+      th,
			
 
				+      &.is-group th {
			
 
				+        & > .cell {
			
 
				+        }
			
 
				+
			
 
				+        background-color: fade(@gray, 20);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .el-table__body {
			
 
				+      border: 0px;
			
 
				+    }
			
 
				+
			
 
				+    &.el-table--striped .el-table__body tr.el-table__row--striped {
			
 
				+      &:hover td {
			
 
				+        background-color: fade(@gray, 20) !important;
			
 
				+      }
			
 
				+
			
 
				+      td {
			
 
				+        background-color: fade(@gray, 20);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.el-table--border,
			
 
				+    &.el-table--group {
			
 
				+      border: none;
			
 
				+    }
			
 
				+
			
 
				+    .ascending .sort-caret.ascending {
			
 
				+      border-bottom-color: @green;
			
 
				+    }
			
 
				+
			
 
				+    .descending .sort-caret.descending {
			
 
				+      border-top-color: @green;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .el-table__expanded-cell {
			
 
				+    background: transparent;
			
 
				+  }
			
 
				+
			
 
				+  .el-table__body tr.hover-row.current-row > td,
			
 
				+  .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
			
 
				+  .el-table__body tr.hover-row.el-table__row--striped > td,
			
 
				+  .el-table__body tr.hover-row > td {
			
 
				+    background: transparent;
			
 
				+    color: @green;
			
 
				+  }
			
 
				+
			
 
				+  .el-table__footer-wrapper tbody td {
			
 
				+    background: #1a1f2fCC;
			
 
				+  }
			
 
				+}
			
--- a/src/assets/styles/el-override/index.less
+++ b/src/assets/styles/el-override/index.less
@@ -0,0 +1,5 @@
 
				+@import "./el-card.less";
			
 
				+@import "./el-pagination.less";
			
 
				+@import "./el-pagination.less";
			
 
				+@import "./el-input.less";
			
 
				+@import "./el-table.less";
			
--- a/src/assets/styles/font.less
+++ b/src/assets/styles/font.less
@@ -0,0 +1,29 @@
 
				+@font-face {
			
 
				+  font-family: @font-family-num;
			
 
				+  src: url("../font/Bicubik.woff"), url("../font/Bicubik.ttf");
			
 
				+}
			
 
				+
			
 
				+@font-face {
			
 
				+  font-family: "SourceHanSans";
			
 
				+  src: url("../font/SourceHanSansCN-Normal.ttf");
			
 
				+}
			
 
				+
			
 
				+.font-num {
			
 
				+  font-family: @font-family-num;
			
 
				+}
			
 
				+
			
 
				+.font-cn {
			
 
				+  font-family: "SourceHanSans";
			
 
				+}
			
 
				+
			
 
				+.font-md {
			
 
				+  font-size: @fontsize;
			
 
				+}
			
 
				+
			
 
				+.font-sm {
			
 
				+  font-size: @fontsize-s;
			
 
				+}
			
 
				+
			
 
				+.font-lg {
			
 
				+  font-size: @fontsize-l;
			
 
				+}
			
--- a/src/assets/styles/form.less
+++ b/src/assets/styles/form.less
@@ -0,0 +1,472 @@
 
				+// 查询 样式
			
 
				+.main-body {
			
 
				+  .query {
			
 
				+    display: flex;
			
 
				+    // justify-content: space-between;
			
 
				+
			
 
				+    &.left {
			
 
				+      justify-content: flex-start;
			
 
				+    }
			
 
				+
			
 
				+    .query-items {
			
 
				+      flex: 0 0 auto;
			
 
				+      display: flex;
			
 
				+
			
 
				+      .query-item {
			
 
				+        flex: 0 0 auto;
			
 
				+        display: flex;
			
 
				+        margin: 0 1.4815vh;
			
 
				+
			
 
				+        .el-input {
			
 
				+          &.placeholder-left {
			
 
				+            input {
			
 
				+              &::placeholder {
			
 
				+                text-align: left;
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+        .placeholder-left {
			
 
				+          .el-input {
			
 
				+            input {
			
 
				+              height: 33px !important;
			
 
				+              &::placeholder {
			
 
				+                text-align: left;
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .lable {
			
 
				+          flex: 0 0 auto;
			
 
				+          margin-right: 1.4815vh;
			
 
				+          line-height: 33px;
			
 
				+          color: @gray-l;
			
 
				+        }
			
 
				+
			
 
				+        .search-input {
			
 
				+          position: relative;
			
 
				+
			
 
				+          // input {
			
 
				+          //   box-sizing: border-box;
			
 
				+          //   flex: 0 0 200px;
			
 
				+          //   border: 0px solid @darkgray;
			
 
				+          //   color: @white;
			
 
				+          //   outline: unset;
			
 
				+          //   border-radius: 0%;
			
 
				+          //   padding-right: 40px;
			
 
				+          //   background: fade(#536268, 20);
			
 
				+          //   height: 33px;
			
 
				+          //   line-height: 33px;
			
 
				+
			
 
				+          //   &::placeholder {
			
 
				+          //     font-size: 12px;
			
 
				+          //     text-align: right;
			
 
				+          //     color: @darkgray;
			
 
				+          //   }
			
 
				+          // }
			
 
				+
			
 
				+          // .unit {
			
 
				+          //   position: absolute;
			
 
				+          //   right: 12px;
			
 
				+          //   top: 6px;
			
 
				+          //   line-height: 33px;
			
 
				+          //   margin: auto;
			
 
				+          // }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .query-actions {
			
 
				+      flex: 0 0 auto;
			
 
				+      margin-left: 50px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  input {
			
 
				+    box-sizing: border-box;
			
 
				+    flex: 0 0 200px;
			
 
				+    border: 0px solid @darkgray;
			
 
				+    color: @white;
			
 
				+    outline: unset;
			
 
				+    border-radius: 0%;
			
 
				+    padding-right: 40px;
			
 
				+    background: fade(#536268, 20);
			
 
				+    height: 33px;
			
 
				+    line-height: 33px;
			
 
				+
			
 
				+    &::placeholder {
			
 
				+      font-size: 12px;
			
 
				+      text-align: right;
			
 
				+      color: @darkgray;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  input[type="checkbox"] {
			
 
				+    position: relative;
			
 
				+    display: inline-block;
			
 
				+    appearance: none;
			
 
				+    width: 14px;
			
 
				+    height: 14px;
			
 
				+    outline: none;
			
 
				+    border: 1px solid @gray;
			
 
				+    background-color: #000;
			
 
				+    border-radius: 20%;
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+
			
 
				+    &:checked {
			
 
				+      border-color: @green;
			
 
				+      background: @green;
			
 
				+    }
			
 
				+
			
 
				+    &::after {
			
 
				+      display: inline-block;
			
 
				+      content: " ";
			
 
				+      position: absolute;
			
 
				+      left: 30%;
			
 
				+      top: 5%;
			
 
				+      width: 3px;
			
 
				+      height: 7px;
			
 
				+      border-color: #fff;
			
 
				+      border-style: solid;
			
 
				+      border-width: 0px 2px 2px 0px;
			
 
				+      transform: rotate(45deg);
			
 
				+      opacity: 0;
			
 
				+    }
			
 
				+
			
 
				+    &:checked::after {
			
 
				+      content: "";
			
 
				+      opacity: 1;
			
 
				+      transition: opacity 0.3s ease-out;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.search-input {
			
 
				+  .el-input {
			
 
				+    line-height: 33px;
			
 
				+    height: 33px;
			
 
				+
			
 
				+    &.el-input--prefix .el-input__inner {
			
 
				+      padding-left: 16px;
			
 
				+    }
			
 
				+
			
 
				+    .el-input__icon {
			
 
				+      height: 33px;
			
 
				+      line-height: 33px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .el-select {
			
 
				+    line-height: 33px;
			
 
				+
			
 
				+    .el-input {
			
 
				+      .el-input__suffix {
			
 
				+        padding: 0 8px;
			
 
				+        background: transparent;
			
 
				+        right: 0;
			
 
				+      }
			
 
				+
			
 
				+      .el-input__icon {
			
 
				+        line-height: 33px;
			
 
				+        height: 33px;
			
 
				+      }
			
 
				+
			
 
				+      .el-input__inner {
			
 
				+        background: fade(#536268, 20);
			
 
				+        border-color: fade(#536268, 20);
			
 
				+        height: 33px;
			
 
				+        line-height: 33px;
			
 
				+        padding-left: 16px;
			
 
				+
			
 
				+        &::placeholder {
			
 
				+          text-align: right;
			
 
				+          padding-right: 8px;
			
 
				+          color: @gray;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .el-select__tags .el-tag {
			
 
				+      background-color: fade(@green, 50);
			
 
				+      color: @white;
			
 
				+
			
 
				+      .el-icon-close {
			
 
				+        background-color: fade(@green, 50);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .el-input__prefix {
			
 
				+    left: unset;
			
 
				+    right: 5px;
			
 
				+  }
			
 
				+
			
 
				+  .el-input__suffix {
			
 
				+    right: 30px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.select {
			
 
				+  &.el-select__popper.el-popper[role="tooltip"] {
			
 
				+    background: fade(#121d1c, 95);
			
 
				+    border: 1px solid fade(#121d1c, 95);
			
 
				+  }
			
 
				+
			
 
				+  .el-select-dropdown {
			
 
				+    &.is-multiple .el-select-dropdown__item.selected {
			
 
				+      background-color: fade(@green, 20);
			
 
				+      color: #fff;
			
 
				+      font-weight: 400;
			
 
				+      border: 1px solid @green;
			
 
				+    }
			
 
				+
			
 
				+    .el-select-dropdown__item {
			
 
				+      color: @font-color;
			
 
				+
			
 
				+      &:hover {
			
 
				+        background-color: fade(@green, 20);
			
 
				+        color: #fff;
			
 
				+      }
			
 
				+
			
 
				+      &.selected {
			
 
				+        background-color: fade(@green, 20);
			
 
				+        color: #fff;
			
 
				+        border: 1px solid #05bb4c;
			
 
				+        font-weight: 500;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.el-popper.is-light .el-popper__arrow::before {
			
 
				+    background: fade(#121d1c, 95);
			
 
				+    border: 1px solid fade(#121d1c, 95) !important;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.date-select {
			
 
				+  .el-input {
			
 
				+    .el-input__inner {
			
 
				+      background: fade(#536268, 20);
			
 
				+      border-color: fade(#536268, 20);
			
 
				+      height: 33px;
			
 
				+      line-height: 33px;
			
 
				+      padding-left: 16px;
			
 
				+      color: #ffffff;
			
 
				+      font-size: 12px;
			
 
				+      font-family: "SourceHanSans";
			
 
				+
			
 
				+      &::placeholder {
			
 
				+        font-size: 12px;
			
 
				+        color: #606769;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.el-picker__popper.el-popper[role="tooltip"] {
			
 
				+    background: fade(#121d1c, 95);
			
 
				+    border: 1px solid fade(#121d1c, 95);
			
 
				+
			
 
				+    .el-picker-panel {
			
 
				+      background: transparent;
			
 
				+      color: @white;
			
 
				+
			
 
				+      .el-date-table {
			
 
				+        th {
			
 
				+          color: @white;
			
 
				+        }
			
 
				+
			
 
				+        td {
			
 
				+          &.next-month,
			
 
				+          &.prev-month {
			
 
				+            color: @gray;
			
 
				+          }
			
 
				+
			
 
				+          &.available:hover {
			
 
				+            color: @green;
			
 
				+          }
			
 
				+
			
 
				+          &.today span {
			
 
				+            color: @green;
			
 
				+          }
			
 
				+
			
 
				+          &.current:not(.disabled) span {
			
 
				+            color: @white;
			
 
				+            background: @green;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .el-year-table td.today .cell {
			
 
				+        color: @white;
			
 
				+      }
			
 
				+
			
 
				+      .el-date-picker__editor-wrap {
			
 
				+        .el-time-panel {
			
 
				+          .el-time-panel__content {
			
 
				+            background: fade(#121d1c, 95);
			
 
				+          }
			
 
				+
			
 
				+          .el-time-panel__footer {
			
 
				+            background: fade(#121d1c, 95);
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .el-picker-panel__footer {
			
 
				+        background: fade(#121d1c, 95);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .el-select-dropdown {
			
 
				+    &.is-multiple .el-select-dropdown__item.selected {
			
 
				+      background-color: fade(@green, 100);
			
 
				+      color: #fff;
			
 
				+      font-weight: 400;
			
 
				+    }
			
 
				+
			
 
				+    .el-select-dropdown__item {
			
 
				+      color: @font-color;
			
 
				+
			
 
				+      &:hover {
			
 
				+        background-color: fade(@green, 100);
			
 
				+        color: #fff;
			
 
				+      }
			
 
				+
			
 
				+      &.selected {
			
 
				+        background-color: fade(@green, 100);
			
 
				+        color: #fff;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.el-popper.is-light .el-popper__arrow::before {
			
 
				+    background: fade(#121d1c, 95);
			
 
				+    border: 1px solid fade(#121d1c, 95) !important;
			
 
				+  }
			
 
				+
			
 
				+  .el-picker-panel__icon-btn:hover {
			
 
				+    color: @green;
			
 
				+  }
			
 
				+
			
 
				+  .el-date-picker__header-label.active,
			
 
				+  .el-date-picker__header-label:hover {
			
 
				+    color: @green;
			
 
				+  }
			
 
				+
			
 
				+  .el-year-table td .cell:hover,
			
 
				+  .el-year-table td.current:not(.disabled) .cell {
			
 
				+    color: @green;
			
 
				+  }
			
 
				+
			
 
				+  .el-month-table td .cell:hover {
			
 
				+    color: @green;
			
 
				+  }
			
 
				+
			
 
				+  .el-month-table td.current:not(.disabled) .cell {
			
 
				+    color: @green;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.el-form {
			
 
				+  .el-form-item {
			
 
				+    margin-bottom: 8px;
			
 
				+
			
 
				+    .el-form-item__label {
			
 
				+      line-height: 33px;
			
 
				+      color: @gray-l;
			
 
				+      font-family: "SourceHanSans";
			
 
				+    }
			
 
				+
			
 
				+    .el-form-item__content {
			
 
				+      line-height: 33px;
			
 
				+
			
 
				+      .el-input {
			
 
				+        line-height: 33px;
			
 
				+
			
 
				+        .el-input__inner {
			
 
				+          background: fade(#536268, 20);
			
 
				+          border-color: fade(#536268, 20);
			
 
				+          height: 33px;
			
 
				+          line-height: 33px;
			
 
				+          padding-left: 16px;
			
 
				+          color: #ffffff;
			
 
				+          font-size: 12px;
			
 
				+          font-family: "SourceHanSans";
			
 
				+
			
 
				+          &::placeholder {
			
 
				+            font-size: 12px;
			
 
				+            color: #606769;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .el-textarea {
			
 
				+        .el-textarea__inner {
			
 
				+          background: fade(#536268, 20);
			
 
				+          border-color: fade(#536268, 20);
			
 
				+          color: #ffffff;
			
 
				+          font-size: 12px;
			
 
				+          font-family: "SourceHanSans";
			
 
				+
			
 
				+          &::placeholder {
			
 
				+            font-size: 12px;
			
 
				+            color: #606769;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.el-input-number {
			
 
				+  .el-input {
			
 
				+    .el-input__inner {
			
 
				+      background: fade(#536268, 20);
			
 
				+      border-color: fade(#536268, 20);
			
 
				+      height: 33px;
			
 
				+      line-height: 33px;
			
 
				+      padding-left: 16px;
			
 
				+      color: #ffffff;
			
 
				+      font-size: 12px;
			
 
				+      font-family: "SourceHanSans";
			
 
				+
			
 
				+      &::placeholder {
			
 
				+        font-size: 12px;
			
 
				+        color: #606769;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.el-checkbox-group {
			
 
				+  .el-checkbox {
			
 
				+    &.is-checked {
			
 
				+      .el-checkbox__input {
			
 
				+        &.is-checked {
			
 
				+          .el-checkbox__inner {
			
 
				+            background-color: @green;
			
 
				+            border-color: @green;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .el-checkbox__label {
			
 
				+        color: @green;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .el-checkbox__input {
			
 
				+      .el-checkbox__inner {
			
 
				+        background-color: transparent;
			
 
				+        border-color: #606769;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .el-checkbox__label {
			
 
				+      color: @gray-l;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/assets/styles/main.less
+++ b/src/assets/styles/main.less
@@ -0,0 +1,20 @@
 
				+@import "./app.less";
			
 
				+
			
 
				+@import "./color.less";
			
 
				+
			
 
				+@import "./font.less";
			
 
				+
			
 
				+@import "./svg.less";
			
 
				+
			
 
				+@import "./table-form.less";
			
 
				+
			
 
				+@import "./form.less";
			
 
				+
			
 
				+@import "./button.less";
			
 
				+
			
 
				+@import "./dialog.less";
			
 
				+
			
 
				+@import "./table.less";
			
 
				+
			
 
				+// el 样式 重写
			
 
				+@import "./el-override/index.less";
			
--- a/src/assets/styles/svg.less
+++ b/src/assets/styles/svg.less
@@ -0,0 +1,233 @@
 
				+.svg-icon {
			
 
				+  font-size: 0;
			
 
				+  line-height: 0;
			
 
				+
			
 
				+  svg {
			
 
				+    width: 2.222vh;
			
 
				+    height: 2.222vh;
			
 
				+    use {
			
 
				+      fill: #fff;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.svg-icon-sm {
			
 
				+    line-height: 0;
			
 
				+    width: 1.481vh;
			
 
				+    height: 1.481vh;
			
 
				+    svg {
			
 
				+      width: 1.481vh;
			
 
				+      height: 1.481vh;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.svg-icon-md {
			
 
				+    line-height: 0;
			
 
				+    width: 2.222vh;
			
 
				+    height: 2.222vh;
			
 
				+    svg {
			
 
				+      width: 2.222vh;
			
 
				+      height: 2.222vh;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.svg-icon-lg {
			
 
				+    line-height: 0;
			
 
				+    width: 3.333vh;
			
 
				+    height: 3.333vh;
			
 
				+    svg {
			
 
				+      width: 3.333vh;
			
 
				+      height: 3.333vh;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.svg-icon-llg {
			
 
				+    line-height: 0;
			
 
				+    width: 4.444vh;
			
 
				+    height: 4.444vh;
			
 
				+    svg {
			
 
				+      width: 4.444vh;
			
 
				+      height: 4.444vh;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.svg-icon-gray {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @gray;
			
 
				+      }
			
 
				+    }
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @gray);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  &.svg-icon-gray-l {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @gray-l;
			
 
				+      }
			
 
				+    }
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @gray-l);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  &.svg-icon-green {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @green;
			
 
				+      }
			
 
				+    }
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @green);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  &.svg-icon-red {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @red;
			
 
				+      }
			
 
				+    }
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @red);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  &.svg-icon-blue {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @darkBlue;
			
 
				+      }
			
 
				+    }
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @darkBlue);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  &.svg-icon-darkblue {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @darkBlue2;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @darkBlue2);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.svg-icon-yellow {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @yellow;
			
 
				+      }
			
 
				+    }
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @yellow);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.svg-icon-orange {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @orange;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @orange);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.svg-icon-purple {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @purple;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @purple);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.svg-icon-write {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @write;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @write);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &.svg-icon-black {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @black;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @black);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  &.svg-icon-pink {
			
 
				+    svg {
			
 
				+      use {
			
 
				+        fill: @pink;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.svg-shadow {
			
 
				+      svg {
			
 
				+        use {
			
 
				+          filter: drop-shadow(0 0 6px @pink);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+}
			
--- a/src/assets/styles/table-form.less
+++ b/src/assets/styles/table-form.less
@@ -0,0 +1,29 @@
 
				+.table-form {
			
 
				+  width: 100%;
			
 
				+  border-collapse: collapse;
			
 
				+
			
 
				+  tr {
			
 
				+    background: transparent;
			
 
				+
			
 
				+    &:nth-child(2n) {
			
 
				+      background: fade(@darkgray, 20);
			
 
				+    }
			
 
				+    td {
			
 
				+      padding: 0.741vh;
			
 
				+      border: 0px;
			
 
				+      font-size: 12px;
			
 
				+      text-align: center;
			
 
				+
			
 
				+      &.text {
			
 
				+        min-width: 13vh;
			
 
				+      }
			
 
				+
			
 
				+      &.value {
			
 
				+        min-width: 6vh;
			
 
				+      }
			
 
				+      &.unit {
			
 
				+        min-width: 40px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/assets/styles/table.less
+++ b/src/assets/styles/table.less
@@ -0,0 +1,73 @@
 
				+// 自定义table
			
 
				+@titleGray: #9ca5a8;
			
 
				+@rowGray: #606769;
			
 
				+@darkBack: #536268;
			
 
				+.com-table {
			
 
				+  width: 100%;
			
 
				+  border-collapse: collapse;
			
 
				+
			
 
				+  thead {
			
 
				+    tr {
			
 
				+      display: table;
			
 
				+      table-layout: fixed;
			
 
				+      width: 100%;
			
 
				+
			
 
				+      th {
			
 
				+        background-color: fade(@darkBack, 20%);
			
 
				+        height: 30px;
			
 
				+        line-height: 30px;
			
 
				+        color: @titleGray;
			
 
				+        font-weight: 400;
			
 
				+        font-size: @fontsize-s;
			
 
				+        position: sticky;
			
 
				+        top: 0;
			
 
				+        cursor: pointer;
			
 
				+
			
 
				+        &.light,
			
 
				+        &.always-light {
			
 
				+          color: @green;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  tbody {
			
 
				+    display: block;
			
 
				+
			
 
				+    tr {
			
 
				+      display: table;
			
 
				+      table-layout: fixed;
			
 
				+      width: 100%;
			
 
				+
			
 
				+      &:nth-child(2n) {
			
 
				+        background-color: fade(@rowGray, 20%);
			
 
				+      }
			
 
				+
			
 
				+      td {
			
 
				+        padding: 4px;
			
 
				+        color: @rowGray;
			
 
				+        text-align: center;
			
 
				+        font-size: @fontsize-s;
			
 
				+        white-space: nowrap;
			
 
				+        overflow: hidden;
			
 
				+        text-overflow: ellipsis;
			
 
				+
			
 
				+        & > span {
			
 
				+          white-space: nowrap;
			
 
				+          overflow: hidden;
			
 
				+          text-overflow: ellipsis;
			
 
				+        }
			
 
				+
			
 
				+        &.light,
			
 
				+        &.always-light {
			
 
				+          color: @green !important;
			
 
				+        }
			
 
				+
			
 
				+        &.num {
			
 
				+          font-family: "Bicubik";
			
 
				+          font-weight: 400;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/assets/styles/theme/dark/dark-jsc.less
+++ b/src/assets/styles/theme/dark/dark-jsc.less
@@ -0,0 +1,278 @@
 
				+// 驾驶舱模块黑色主题样式
			
 
				+
			
 
				+@import "./setting.less";
			
 
				+
			
 
				+#appBody.dark {
			
 
				+    transition: @transition;
			
 
				+
			
 
				+    .gray {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .green {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .white {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .panel-title {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .panel-tools {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .weather {
			
 
				+        .other-info {
			
 
				+            .text {
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+
			
 
				+            div.svg-icon svg use {
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .security-days {
			
 
				+        .text {
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+
			
 
				+        .num {
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .tab-box {
			
 
				+        .tab-item {
			
 
				+            span {
			
 
				+                svg {
			
 
				+                    use {
			
 
				+                        transition: @transition;
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .header-body {
			
 
				+        .header-title {
			
 
				+            svg {
			
 
				+                g:nth-child(1) {
			
 
				+
			
 
				+                    path,
			
 
				+                    polygon {
			
 
				+                        transition: @transition;
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .weather-info {
			
 
				+        span svg use {
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .map .tab-box .tab-item.active {
			
 
				+        background-image: linear-gradient(to top,
			
 
				+                rgba(5, 187, 76, 0.5),
			
 
				+                rgba(5, 187, 76, 0));
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .map .tab-box .tab-item.active::after {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .header-menu .header-menu-list .header-menu-item.active::after {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .header-menu .header-menu-list .header-menu-item.active {
			
 
				+        background: linear-gradient(to top,
			
 
				+                rgba(5, 187, 76, 0.5),
			
 
				+                rgba(5, 187, 76, 0));
			
 
				+        border    : 0.093vh solid @green;
			
 
				+        transition: color @transition ease-in-out;
			
 
				+    }
			
 
				+
			
 
				+    .coulometric-analysis {
			
 
				+        .card-1 {
			
 
				+            .card-icon {
			
 
				+                svg use {
			
 
				+                    transition: @transition;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .map .compass {
			
 
				+        svg g:nth-child(3) {
			
 
				+            g g path {
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        svg g:nth-child(4) {
			
 
				+            g g path {
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        &::after {
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .name-box-period-label {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .name-box-period-value {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .svg-map-nx {
			
 
				+        .item-label {
			
 
				+            rect {
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+
			
 
				+            .mapKey {
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        .popup-layer-svg {
			
 
				+            .mapKey {
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        #popup-box-svg rect {
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .com-panel-3,
			
 
				+    .com-panel,
			
 
				+    .header-body {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel-3 .dot,
			
 
				+    .com-panel.line:before {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .panel-header {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .fengji-icon {
			
 
				+        svg use {
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .modal.el-dialog {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .modal.el-dialog .el-dialog__title {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .situation-body {
			
 
				+        .value span:nth-child(2) {
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .coulometric-analysis .card-title {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel,
			
 
				+    .panel-header,
			
 
				+    .home .table-card,
			
 
				+    .com-panel-3.situation,
			
 
				+    .el-menu--collapse,
			
 
				+    .el-sub-menu,
			
 
				+    .el-sub-menu__title,
			
 
				+    .el-menu--popup,
			
 
				+    .el-menu-item {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel.line::before {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu {
			
 
				+        width        : 0;
			
 
				+        height       : calc(100% - 71px);
			
 
				+        position     : absolute;
			
 
				+        left         : 0;
			
 
				+        top          : 57px;
			
 
				+        z-index      : 100;
			
 
				+        border-radius: 20px;
			
 
				+        border       : 0;
			
 
				+        overflow     : hidden;
			
 
				+        transition   : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu.hidden {
			
 
				+        width     : 0;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .main-body {
			
 
				+        margin-left: 0;
			
 
				+        transition : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .dot.top-left {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .dot.bottom-left {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .dot.top-rignt {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .dot.bottom-right {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu .el-menu--collapse {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu .el-menu--collapse {
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu .el-sub-menu__title {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu .el-sub-menu__title i {
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    transition: @transition;
			
 
				+}
			
--- a/src/assets/styles/theme/dark/setting.less
+++ b/src/assets/styles/theme/dark/setting.less
@@ -0,0 +1,6 @@
 
				+// 暗色样式配置
			
 
				+
			
 
				+@green     : #05bb4c;
			
 
				+@deepblue  : #36348e;
			
 
				+@transition: 0.25s;
			
 
				+@black     : rgb(13, 30, 28);
			
--- a/src/assets/styles/theme/light/aqgk/personnel.less
+++ b/src/assets/styles/theme/light/aqgk/personnel.less
@@ -0,0 +1,62 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	//人员矩阵
			
 
				+	.personnel {
			
 
				+		.personnel-btn {
			
 
				+			.i-btn {
			
 
				+				&:hover,
			
 
				+				&.active {
			
 
				+					border: 1px solid rgba(75, 85, 174, 0.6);
			
 
				+					background: rgba(75, 85, 174, 0.6);
			
 
				+					color: @white;
			
 
				+				}
			
 
				+				background: rgb(220 221 223);
			
 
				+				border: 1px solid @black;
			
 
				+				color: @black;
			
 
				+			}
			
 
				+		}
			
 
				+		.personnel-box {
			
 
				+			.personnel-box-item {
			
 
				+				background: @white;
			
 
				+				border: 1px solid @black;
			
 
				+				&:hover {
			
 
				+					border: 1px solid @deepblue;
			
 
				+					background: @deepblue;
			
 
				+					.personnel-box-item-h .personnel-box-item-form .personnel-box-item-group {
			
 
				+						.personnel-box-item-label,
			
 
				+						.personnel-box-item-value {
			
 
				+							color: @white;
			
 
				+						}
			
 
				+					}
			
 
				+
			
 
				+					.personnel-box-item-f {
			
 
				+						.personnel-box-item-name,
			
 
				+						.personnel-box-item-icon {
			
 
				+							color: @white;
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+
			
 
				+				.personnel-box-item-h .personnel-box-item-form .personnel-box-item-group {
			
 
				+					.personnel-box-item-label,
			
 
				+					.personnel-box-item-value {
			
 
				+						color: @black;
			
 
				+						font-weight: bold;
			
 
				+					}
			
 
				+				}
			
 
				+
			
 
				+				.personnel-box-item-f {
			
 
				+					.personnel-box-item-name,
			
 
				+					.personnel-box-item-icon {
			
 
				+						color: @black;
			
 
				+						font-weight: bold;
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	.iframe4 .el-dialog {
			
 
				+		background: @white;
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/components.less
+++ b/src/assets/styles/theme/light/components.less
@@ -0,0 +1,378 @@
 
				+@import './setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	// 组件部分
			
 
				+	.com-collapse {
			
 
				+		.collapse-box {
			
 
				+			.box-text {
			
 
				+				&:hover {
			
 
				+					color: @purple;
			
 
				+					font-weight: 700;
			
 
				+					background: @fadePurple;
			
 
				+				}
			
 
				+			}
			
 
				+			&.active {
			
 
				+				background: @white;
			
 
				+				.box-text {
			
 
				+				 color: @purple;
			
 
				+				 font-weight: 700;
			
 
				+					background: @fadePurple;
			
 
				+				}
			
 
				+			}
			
 
				+			.collapse-items .item.active {
			
 
				+				background: @fadePurple;
			
 
				+				color: @deepblue;
			
 
				+				cursor: pointer;
			
 
				+				font-weight: bold;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	.wave {
			
 
				+		z-index: 1;
			
 
				+	}
			
 
				+	.svg-icon {
			
 
				+		.svg-icon-write,
			
 
				+		.svg-icon.svg-icon-gray-l {
			
 
				+			svg use {
			
 
				+				fill: @black;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	.el-table td.light,
			
 
				+	.df-table .el-table td.light,
			
 
				+	.main-body .custom-table.el-table td.light,
			
 
				+	.df-table .custom-table.el-table td.light,
			
 
				+	.main-body .el-table td.always-light,
			
 
				+	.df-table .el-table td.always-light,
			
 
				+	.main-body .custom-table.el-table td.always-light,
			
 
				+	.df-table .custom-table.el-table td.always-light {
			
 
				+		color: @deepblue !important;
			
 
				+		font-weight: bold;
			
 
				+	}
			
 
				+	.table-form tr:nth-child(2n) {
			
 
				+		background: @gray-3;
			
 
				+	}
			
 
				+
			
 
				+	.com-table {
			
 
				+		thead tr th {
			
 
				+			font-weight: 700;
			
 
				+			background: @gray-3;
			
 
				+		}
			
 
				+		tbody tr:nth-child(2n) {
			
 
				+			background: @gray-3;
			
 
				+		}
			
 
				+	}
			
 
				+	.btn-group-with-icon .btn-group-with-icon-list a {
			
 
				+		background-color: @white;
			
 
				+		border: none;
			
 
				+		color: @black;
			
 
				+		&.active {
			
 
				+			color: @white;
			
 
				+			background-color: @deepblue;
			
 
				+		}
			
 
				+	}
			
 
				+	.el-scrollbar__wrap {
			
 
				+		background: @white;
			
 
				+		transition: @transition;
			
 
				+	}
			
 
				+
			
 
				+	.title {
			
 
				+		font-weight: bold;
			
 
				+	}
			
 
				+
			
 
				+	.general-appearance-body,
			
 
				+	.booster-station-body {
			
 
				+		//升压站白色状态
			
 
				+		background: @white;
			
 
				+		transition: @transition;
			
 
				+	}
			
 
				+
			
 
				+	.com-table {
			
 
				+		thead tr th {
			
 
				+			color: @black;
			
 
				+		}
			
 
				+
			
 
				+		.el-scrollbar tr td {
			
 
				+			color: @black;
			
 
				+		}
			
 
				+
			
 
				+		.el-scrollbar tr td.light span,
			
 
				+		.el-scrollbar tr td.light div {
			
 
				+			color: @deepblue;
			
 
				+		}
			
 
				+	}
			
 
				+	.btn.green,
			
 
				+	.btn:hover {
			
 
				+		color: @deepblue;
			
 
				+		border-color: @deepblue;
			
 
				+		background: rgba(@deepblueBg, 0.2);
			
 
				+	}
			
 
				+
			
 
				+	.el-select__popper.select,
			
 
				+	.el-picker__popper {
			
 
				+		background: @white;
			
 
				+		border-color: @white;
			
 
				+		.el-popper__arrow::before {
			
 
				+			border: 1px solid @white !important;
			
 
				+			background: @white !important;
			
 
				+		}
			
 
				+		.el-select-dropdown__item.selected,
			
 
				+		.el-select-dropdown__item:hover {
			
 
				+			color: @deepblue;
			
 
				+			background: fade(@deepblue, 20);
			
 
				+			border: 1px solid @deepblue;
			
 
				+		}
			
 
				+		.el-select-dropdown__item {
			
 
				+			color: @black;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	.el-picker__popper.el-popper[role='tooltip'] {
			
 
				+		background: @white !important;
			
 
				+		border-color: @white !important;
			
 
				+		.el-date-table {
			
 
				+			th {
			
 
				+				color: @black;
			
 
				+			}
			
 
				+			td.current:not(.disabled) span {
			
 
				+				color: @white;
			
 
				+				background: @blue;
			
 
				+			}
			
 
				+			td.today span,
			
 
				+			span:hover {
			
 
				+				color: @blue;
			
 
				+			}
			
 
				+			td.prev-month,
			
 
				+			td.next-month {
			
 
				+				background: @gray-3;
			
 
				+				span:hover{
			
 
				+					color: @black;
			
 
				+				}
			
 
				+			}
			
 
				+			span {
			
 
				+				color: @black;
			
 
				+			}
			
 
				+		}
			
 
				+		.el-year-table {
			
 
				+			td {
			
 
				+				color: @black;
			
 
				+			}
			
 
				+			td.today .cell,
			
 
				+			td:hover {
			
 
				+				color: @blue;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	.el-input {
			
 
				+		.el-input__inner {
			
 
				+			background: @white;
			
 
				+			color: @black;
			
 
				+		}
			
 
				+	}
			
 
				+	.query-item .lable {
			
 
				+		color: @black;
			
 
				+	}
			
 
				+
			
 
				+	// 风机绩效榜-明细
			
 
				+	.main-body {
			
 
				+		input[type='checkbox']:checked {
			
 
				+			background: @blue;
			
 
				+			border-color: @blue;
			
 
				+		}
			
 
				+		input[type='checkbox'] {
			
 
				+			background: @white;
			
 
				+			border-color: @gray-l;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	.el-select {
			
 
				+		.el-select__tags .el-tag {
			
 
				+			background-color: fade(@deepblue, 20);
			
 
				+			color: @deepblue;
			
 
				+
			
 
				+			.el-icon-close {
			
 
				+				background-color: fade(@deepblue, 50);
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	.active {
			
 
				+		background: @fadePurple;
			
 
				+		color: @deepblue;
			
 
				+	}
			
 
				+
			
 
				+	.el-month-table td .cell:hover,
			
 
				+	.el-date-picker__header-label.active,
			
 
				+	.el-date-picker__header-label:hover {
			
 
				+		color: @blue;
			
 
				+	}
			
 
				+
			
 
				+	.action-bar {
			
 
				+		.selections {
			
 
				+			.item {
			
 
				+				background: @white;
			
 
				+				color: @black;
			
 
				+				&:hover,
			
 
				+				&.active {
			
 
				+					background: fade(@deepblue, 20);
			
 
				+					border: 1px solid @deepblue;
			
 
				+					color: @deepblue;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	// 风场信息
			
 
				+	.fc-info {
			
 
				+		.fc-item {
			
 
				+			& > .title {
			
 
				+				color: fade(@black, 75);
			
 
				+			}
			
 
				+
			
 
				+			.tags {
			
 
				+				.tag {
			
 
				+					.tag-title {
			
 
				+						color: @black;
			
 
				+					}
			
 
				+
			
 
				+					.tag-value {
			
 
				+						color: @deepblue;
			
 
				+						.unit {
			
 
				+							color: @gray;
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+			.health-info {
			
 
				+				.title {
			
 
				+					color: @black;
			
 
				+					.actions {
			
 
				+						.action {
			
 
				+							color: @gray;
			
 
				+							svg use {
			
 
				+								fill: @gray;
			
 
				+							}
			
 
				+							&.active,
			
 
				+							&:hover {
			
 
				+								background: none;
			
 
				+								color: @deepblue;
			
 
				+								svg use {
			
 
				+									fill: @deepblue;
			
 
				+								}
			
 
				+							}
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+
			
 
				+				.info-body {
			
 
				+					.device-list {
			
 
				+						.item {
			
 
				+							color: @black;
			
 
				+							&.green {
			
 
				+								color: @green;
			
 
				+								background: fade(@green, 20);
			
 
				+								border-color: @green;
			
 
				+							}
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	.el-table {
			
 
				+		th {
			
 
				+			color: @black;
			
 
				+		}
			
 
				+
			
 
				+		.el-table__body tr.hover-row.current-row > td,
			
 
				+		.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
			
 
				+		.el-table__body tr.hover-row.el-table__row--striped > td,
			
 
				+		.el-table__body tr.hover-row > td {
			
 
				+			color: @blue;
			
 
				+		}
			
 
				+
			
 
				+		.ascending .sort-caret.ascending {
			
 
				+			border-bottom-color: @deepblue;
			
 
				+		}
			
 
				+
			
 
				+		.descending .sort-caret.descending {
			
 
				+			border-top-color: @deepblue;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	.el-checkbox {
			
 
				+		color: @black;
			
 
				+		&.is-bordered {
			
 
				+			&.is-checked {
			
 
				+				border-color: @deepblue;
			
 
				+			}
			
 
				+		}
			
 
				+		.el-checkbox__input.is-checked + .el-checkbox__label {
			
 
				+			color: @deepblue;
			
 
				+		}
			
 
				+		.el-checkbox__input.is-disabled + span.el-checkbox__label {
			
 
				+			color: @black;
			
 
				+		}
			
 
				+		.el-checkbox__input.is-checked .el-checkbox__inner,
			
 
				+		.el-checkbox__input.is-indeterminate .el-checkbox__inner {
			
 
				+			background-color: @deepblue;
			
 
				+			border-color: @deepblue;
			
 
				+		}
			
 
				+
			
 
				+		.el-checkbox__input.is-focus .el-checkbox__inner {
			
 
				+			border-color: @deepblue;
			
 
				+		}
			
 
				+	}
			
 
				+	.el-textarea {
			
 
				+		.el-textarea__inner {
			
 
				+			color: @black;
			
 
				+			background: fade(@gray-l, 20);
			
 
				+		}
			
 
				+	}
			
 
				+	.el-time-panel__btn {
			
 
				+		&.confirm {
			
 
				+			color: @deepblue;
			
 
				+		}
			
 
				+		&.cancel {
			
 
				+			color: @gray;
			
 
				+		}
			
 
				+	}
			
 
				+	.main-body input {
			
 
				+		color: @black;
			
 
				+		background: @white;
			
 
				+	}
			
 
				+	.font-md {
			
 
				+		color: @black;
			
 
				+	}
			
 
				+	.date-select.el-picker__popper.el-popper[role='tooltip'] .el-picker-panel .el-picker-panel__footer {
			
 
				+		background: @deepblue;
			
 
				+		border-color: @deepblue;
			
 
				+	}
			
 
				+	.el-time-panel .el-time-panel__footer {
			
 
				+		background: @deepblue;
			
 
				+	}
			
 
				+	.el-picker-panel .el-time-panel__btn.cancel {
			
 
				+		color: @white;
			
 
				+	}
			
 
				+	.el-time-panel__btn.confirm {
			
 
				+		color: @black;
			
 
				+	}
			
 
				+
			
 
				+	.el-picker-panel {
			
 
				+		.el-picker-panel__footer {
			
 
				+			.el-button--text {
			
 
				+				color: @white;
			
 
				+			}
			
 
				+			.el-button.is-plain {
			
 
				+				background: @white;
			
 
				+				border-color: @deepblue;
			
 
				+				color: @black;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+}
			
 
				+.iframeBody{
			
 
				+	background-color: #FFFFFF;
			
 
				+	border-radius:5px ;
			
 
				+}
			
--- a/src/assets/styles/theme/light/jjyx/decision1.less
+++ b/src/assets/styles/theme/light/jjyx/decision1.less
@@ -0,0 +1,15 @@
 
				+@import "../setting.less";
			
 
				+
			
 
				+#appBody.light {
			
 
				+    // 风机绩效榜
			
 
				+    .decision-page-2,.decision-page-3,.decision-page-4{
			
 
				+    	.com-panel{
			
 
				+    		border-radius:0;
			
 
				+    		padding:0;
			
 
				+    	}
			
 
				+    }
			
 
				+    .action{
			
 
				+    	color: @blue;
			
 
				+    }
			
 
				+   
			
 
				+}
			
--- a/src/assets/styles/theme/light/jjyx/decision3db.less
+++ b/src/assets/styles/theme/light/jjyx/decision3db.less
@@ -0,0 +1,13 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	//单机横向对比
			
 
				+	.direction-info {
			
 
				+		.com-table {
			
 
				+			th,
			
 
				+			td {
			
 
				+				color: @black;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/jjyx/dlyc.less
+++ b/src/assets/styles/theme/light/jjyx/dlyc.less
@@ -0,0 +1,49 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	// 电量预测
			
 
				+	.main-body {
			
 
				+		.dlTable {
			
 
				+			.el-table thead.is-group th.el-table__cell {
			
 
				+				background-color: @gray-3;
			
 
				+			}
			
 
				+
			
 
				+			.el-table__expanded-cell {
			
 
				+				background: @gray-3;
			
 
				+			}
			
 
				+
			
 
				+			.el-table__body {
			
 
				+				tr.hover-row > td {
			
 
				+					background-color: @white;
			
 
				+					color: @black !important;
			
 
				+				}
			
 
				+
			
 
				+				td {
			
 
				+					background-color: @white;
			
 
				+				}
			
 
				+
			
 
				+				td[rowspan="2"],
			
 
				+				td[rowspan="3"],
			
 
				+				tr.hover-row>td[rowspan="2"],
			
 
				+				tr.hover-row>td[rowspan="3"],
			
 
				+				tr td:last-of-type,
			
 
				+				tr td:nth-last-of-type(2),
			
 
				+				tr:hover td {
			
 
				+					color: @black;
			
 
				+					background-color: @gray-3 !important;
			
 
				+				}
			
 
				+			}
			
 
				+
			
 
				+			.el-table__fixed-footer-wrapper tbody td.el-table__cell {
			
 
				+				color: @gray;
			
 
				+				background-color: @gray-3 !important;
			
 
				+			}
			
 
				+
			
 
				+			.el-table__footer-wrapper tbody td.el-table__cell,
			
 
				+			.el-table__header-wrapper tbody td.el-table__cell {
			
 
				+				color: @black;
			
 
				+				background-color: @white;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/jjyx/ztfx.less
+++ b/src/assets/styles/theme/light/jjyx/ztfx.less
@@ -0,0 +1,43 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	// 专题分析
			
 
				+	.ztfx {
			
 
				+		.table-complex {
			
 
				+			.table {
			
 
				+				tbody {
			
 
				+					tr:nth-child(2n) td {
			
 
				+						background-color: fade(@black, 20%);
			
 
				+						&.item {
			
 
				+							background-color: transparent;
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+
			
 
				+				th {
			
 
				+					background: fade(@black, 40);
			
 
				+					color: @white;
			
 
				+				}
			
 
				+				td {
			
 
				+					color: @black;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+		.table-panel {
			
 
				+			.table {
			
 
				+				tbody {
			
 
				+					tr:nth-child(2n) td {
			
 
				+						background-color: fade(@black, 20%);
			
 
				+					}
			
 
				+				}
			
 
				+				th {
			
 
				+					background: fade(@black, 40);
			
 
				+					color: @white;
			
 
				+				}
			
 
				+				td {
			
 
				+					color: @black;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/jjyx/ztzhl.less
+++ b/src/assets/styles/theme/light/jjyx/ztzhl.less
@@ -0,0 +1,15 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	// 状态转换率
			
 
				+	.newspan {
			
 
				+		color: @black;
			
 
				+	}
			
 
				+	.newspan:hover {
			
 
				+		background: linear-gradient(to top, rgba(54, 52, 142, 0.5), rgba(54, 52, 142, 0));
			
 
				+		color: @deepblue;
			
 
				+	}
			
 
				+	.newspan:hover::after {
			
 
				+		border: 0.093vh solid @deepblue;
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/jsc/agc.less
+++ b/src/assets/styles/theme/light/jsc/agc.less
@@ -0,0 +1,24 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	// AGC 监视
			
 
				+	.com-panel2 .panel-header2 {
			
 
				+		&::after {
			
 
				+			background-image: linear-gradient(to right, @white, rgba(5, 187, 76, 0));
			
 
				+		}
			
 
				+		.panel-tools2 {
			
 
				+			color: @black;
			
 
				+			opacity: 0.3;
			
 
				+		}
			
 
				+		.panel-title2 {
			
 
				+			color: @deepblue;
			
 
				+			.panel-icon2 {
			
 
				+				color: @black;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	.panel-table .data-item .data-item-count {
			
 
				+		color: @deepblue;
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/jsc/home.less
+++ b/src/assets/styles/theme/light/jsc/home.less
@@ -0,0 +1,31 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	//风场-场站监视
			
 
				+	.station-tip {
			
 
				+		background-color: @gray-l;
			
 
				+		color: @black;
			
 
				+	}
			
 
				+
			
 
				+	.wind-site-info {
			
 
				+		//场站监视
			
 
				+		.wind-site-info-body {
			
 
				+			.info-menu {
			
 
				+				.info-menu-item {
			
 
				+					& + .info-menu-item {
			
 
				+						border: none;
			
 
				+						background-color: @white;
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	.light-matrix-small {
			
 
				+		background: @white;
			
 
				+		transition: @transition;
			
 
				+	}
			
 
				+	.df-table .custom-table.el-table {
			
 
				+		background: @white;
			
 
				+		transition: @transition;
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/jsc/info.less
+++ b/src/assets/styles/theme/light/jsc/info.less
@@ -0,0 +1,94 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	// 单机状态监视
			
 
				+	.wind-site-warning .search .options .option-item {
			
 
				+		background: @white;
			
 
				+		transition: @transition;
			
 
				+		.count,
			
 
				+		.text {
			
 
				+			border-radius: 0.3125rem;
			
 
				+			border: none;
			
 
				+			background: @gray-3;
			
 
				+		}
			
 
				+		&.active {
			
 
				+			.count,
			
 
				+			.text {
			
 
				+				background: @fadePurple;
			
 
				+				color: @deepblue;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	//右侧导航栏第一个-天气
			
 
				+	.wind-site-weather {
			
 
				+		border-radius: 10px;
			
 
				+		border: none;
			
 
				+		background: @white;
			
 
				+		transition: @transition;
			
 
				+	}
			
 
				+	.generator .info-panel .panel-title {
			
 
				+		background: @gray-3;
			
 
				+	}
			
 
				+	.wind-site-base-info {
			
 
				+		.power-load {
			
 
				+			background-color: @white;
			
 
				+		}
			
 
				+		.wind-site-tag {
			
 
				+			background: @gray-3;
			
 
				+			.tag-value {
			
 
				+				color: @deepblue;
			
 
				+			}
			
 
				+		}
			
 
				+		.info-panel {
			
 
				+			.panel-title {
			
 
				+				background: @gray-3;
			
 
				+			}
			
 
				+		}
			
 
				+		.generation {
			
 
				+			background: @white;
			
 
				+		}
			
 
				+		.wind-site-name {
			
 
				+			border: none;
			
 
				+			background-color: @fadePurple;
			
 
				+		}
			
 
				+		.wind-site-other {
			
 
				+			.wind-site-tag {
			
 
				+				background-color: @white;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	.wind-site-info {
			
 
				+		.wind-site-menu {
			
 
				+			border-radius: 0 15px 0 0;
			
 
				+			color: @black;
			
 
				+			background: @gray-3;
			
 
				+		}
			
 
				+	}
			
 
				+	.wind-site .page-common-body .page-common-body-menu .page-common-body-menu-box {
			
 
				+		background-color: @white;
			
 
				+		transition: @transition;
			
 
				+		border: none;
			
 
				+		border-radius: 5px;
			
 
				+		.page-common-body-menu-item {
			
 
				+			border: none;
			
 
				+			.svg-icon svg use {
			
 
				+				fill: @gray-font;
			
 
				+			}
			
 
				+			&.active {
			
 
				+				background: @fadePurple;
			
 
				+				border: none;
			
 
				+				&::after {
			
 
				+					box-shadow: none;
			
 
				+					border: none;
			
 
				+				}
			
 
				+				.svg-icon.svg-icon-yellow svg use {
			
 
				+					fill: @deepblue;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+		.page-common-body-menu-border {
			
 
				+			background-color: transparent;
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/jsc/inverter-info.less
+++ b/src/assets/styles/theme/light/jsc/inverter-info.less
@@ -0,0 +1,53 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	//
			
 
				+	.Inverter-Info .box-main {
			
 
				+		.wind-site-menu {
			
 
				+			background-color: @gray-3;
			
 
				+		}
			
 
				+		.Inverter-Info-body {
			
 
				+			.inverter-datas .inverter-item .inverter-item-info {
			
 
				+				border: 1px solid @gray-3;
			
 
				+				background-color: @white;
			
 
				+				.states {
			
 
				+					background: @white;
			
 
				+					transition: @transition;
			
 
				+					.state-list .list-item {
			
 
				+						background: rgba(96, 103, 105, 0.1);
			
 
				+						&:nth-child(2n) {
			
 
				+							background: transparent;
			
 
				+						}
			
 
				+						.state {
			
 
				+							background: rgba(96, 103, 105, 0.2);
			
 
				+						}
			
 
				+					}
			
 
				+					.counts {
			
 
				+						.all {
			
 
				+							background: rgba(96, 103, 105, 0.1);
			
 
				+						}
			
 
				+						.error {
			
 
				+							color: @white;
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+			.Inverter-Info-title {
			
 
				+				position: relative;
			
 
				+				background: @white;
			
 
				+				transition: @transition;
			
 
				+				.title {
			
 
				+					color: @deepblue;
			
 
				+					font-weight: bold;
			
 
				+				}
			
 
				+				.title-tools-left {
			
 
				+					color: @black;
			
 
				+				}
			
 
				+			}
			
 
				+			.table-form.mg-b-8 {
			
 
				+				background: @white;
			
 
				+				transition: @transition;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/jsc/lightmatrix1.less
+++ b/src/assets/styles/theme/light/jsc/lightmatrix1.less
@@ -0,0 +1,151 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+
			
 
				+	// 基础矩阵
			
 
				+	.el-scrollbar__wrap {
			
 
				+		background: transparent;
			
 
				+	}
			
 
				+
			
 
				+	.light-matrix {
			
 
				+
			
 
				+		.panel {
			
 
				+			background   : #fff;
			
 
				+			border-radius: @borderRaduis;
			
 
				+			border-color : #fff;
			
 
				+			transition   : @transition;
			
 
				+
			
 
				+			.item.write {
			
 
				+				color      : #000;
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.item.blue {
			
 
				+				color      : rgb(53, 64, 164);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.item.green,
			
 
				+			.item.greenv {
			
 
				+				color      : rgb(0, 179, 54);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.item.pink {
			
 
				+				color      : rgb(197, 50, 200);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.item.red {
			
 
				+				color      : rgb(187, 52, 57);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.item.orange {
			
 
				+				color      : rgb(221, 109, 9);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.item.write {
			
 
				+				color      : rgb(2, 2, 2);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.item.gray {
			
 
				+				color      : rgb(77, 85, 87);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		.panel-body {
			
 
				+			background: @white;
			
 
				+			.gray{
			
 
				+				color: @white;
			
 
				+			}
			
 
				+			.green{
			
 
				+				color: @green;
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		.card-panel .card-left .tag {
			
 
				+			color: @black;
			
 
				+		}
			
 
				+
			
 
				+		.panel-box>div {
			
 
				+			padding      : 4px 0 8px 0;
			
 
				+			background   : #fff;
			
 
				+			margin-bottom: 4px;
			
 
				+			border-radius: 8px;
			
 
				+			overflow     : hidden;
			
 
				+		}
			
 
				+
			
 
				+		.panel-box .panel-title .panel-title-name {
			
 
				+			font-size  : 1.296vh;
			
 
				+			color      : rgb(5, 187, 76);
			
 
				+			font-weight: bold;
			
 
				+			background : #fff;
			
 
				+		}
			
 
				+
			
 
				+		.panel-box .sub-title-item {
			
 
				+			.sub-title {
			
 
				+				color     : #000;
			
 
				+				transition: @transition;
			
 
				+			}
			
 
				+
			
 
				+			.sub-count.write {
			
 
				+				color      : rgb(0, 0, 0);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.sub-count.green {
			
 
				+				color      : rgb(5, 187, 76);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.sub-count.blue {
			
 
				+				color      : rgb(53, 64, 164);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.sub-count.purple {
			
 
				+				color      : rgb(202, 68, 205);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.sub-count.red {
			
 
				+				color      : rgb(187, 52, 57);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.sub-count.orange {
			
 
				+				color      : rgb(221, 109, 9);
			
 
				+				font-weight: 700;
			
 
				+				transition : @transition;
			
 
				+			}
			
 
				+
			
 
				+			.sub-count.gray {
			
 
				+				color     : rgb(24, 24, 24);
			
 
				+				transition: @transition;
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		.panel-box .panel-title .svg-icon.svg-icon-green svg use {
			
 
				+			fill      : rgb(5, 187, 76);
			
 
				+			transition: @transition;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+}
			
--- a/src/assets/styles/theme/light/jsc/lightmatrix2.less
+++ b/src/assets/styles/theme/light/jsc/lightmatrix2.less
@@ -0,0 +1,10 @@
 
				+@import "../setting.less";
			
 
				+
			
 
				+#appBody.light {
			
 
				+    // 光伏矩阵
			
 
				+   .light-matrix .panel .item2{
			
 
				+	   .num1,.num2,.num3{
			
 
				+	   	   color:@black;
			
 
				+	   }
			
 
				+   }
			
 
				+}
			
--- a/src/assets/styles/theme/light/jsc/map.less
+++ b/src/assets/styles/theme/light/jsc/map.less
@@ -0,0 +1,11 @@
 
				+@import "../setting.less";
			
 
				+
			
 
				+#appBody.light {
			
 
				+    // 
			
 
				+   .map-1 .btn-group-tabs {
			
 
				+       display: flex;
			
 
				+       flex-direction: row;
			
 
				+       background: @white;
			
 
				+       height: 50px;
			
 
				+   }
			
 
				+}
			
--- a/src/assets/styles/theme/light/jsc/matrix.less
+++ b/src/assets/styles/theme/light/jsc/matrix.less
@@ -0,0 +1,7 @@
 
				+@import "../setting.less";
			
 
				+
			
 
				+#appBody.light {
			
 
				+   .matrix .panel-title .panel-title-name {//风场矩阵
			
 
				+       color: @deepblue;
			
 
				+   }
			
 
				+}
			
--- a/src/assets/styles/theme/light/jsc/status.less
+++ b/src/assets/styles/theme/light/jsc/status.less
@@ -0,0 +1,84 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	// 状态监视
			
 
				+	.status-panel {
			
 
				+		.pause{
			
 
				+			color:@white;
			
 
				+			background-color: fade(@deepblue,40);
			
 
				+		}
			
 
				+		.status-com-panel {
			
 
				+			.panel-body {
			
 
				+				padding: 0;
			
 
				+				.p-body {
			
 
				+					.item-box .data-item {
			
 
				+						background-color: @white;
			
 
				+						border-top: 1px solid @gray-3;
			
 
				+						.f3,
			
 
				+						.f5 {
			
 
				+							color: @deepblue;
			
 
				+						}
			
 
				+						&.light {
			
 
				+							&:first-child {
			
 
				+								background-color: @gray-3;
			
 
				+		
			
 
				+								div {
			
 
				+									color: @black;
			
 
				+								}
			
 
				+								&::after {
			
 
				+									background-color: @deepblue;
			
 
				+								}
			
 
				+							}
			
 
				+							&::after {
			
 
				+								background-color: transparent;
			
 
				+							}
			
 
				+							div {
			
 
				+								&.f3,
			
 
				+								&.f5 {
			
 
				+									color: @deepblue;
			
 
				+								}
			
 
				+								color: @gray;
			
 
				+							}
			
 
				+							background-color: @white;
			
 
				+						}
			
 
				+					}
			
 
				+					.category-box {
			
 
				+						width: 100%;
			
 
				+						background-color: @white;
			
 
				+						transition: @transition;
			
 
				+						display: flex;
			
 
				+						margin-bottom: 0.37vh;
			
 
				+						.score span {
			
 
				+							color: @deepblue;
			
 
				+							background-color: fade(@deepblue, 10%);
			
 
				+							border: 0.093vh solid @deepblue;
			
 
				+						}
			
 
				+						.category-item{
			
 
				+							.green{
			
 
				+								color:rgb(6,186,76) ;
			
 
				+							}
			
 
				+							.purple{
			
 
				+								color: @deepblue;
			
 
				+							}
			
 
				+							.yellow{
			
 
				+								color:rgb(249,222,89) ;
			
 
				+							}
			
 
				+							.orange{
			
 
				+								color: rgb(225,125,37);
			
 
				+							}
			
 
				+							.red{
			
 
				+								color: rgb(186,49,56);
			
 
				+							}
			
 
				+							.blue{
			
 
				+								color: rgb(20,40,233);
			
 
				+							}
			
 
				+							.gray{
			
 
				+								color: #606769;
			
 
				+							}
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/light-jjyx.less
+++ b/src/assets/styles/theme/light/light-jjyx.less
@@ -0,0 +1,170 @@
 
				+// 经济运行模块白色主题样式
			
 
				+
			
 
				+@import "./setting.less";
			
 
				+
			
 
				+#appBody.light {
			
 
				+    .static-main {
			
 
				+        background   : #fff;
			
 
				+        border-color : @deepblue;
			
 
				+        border-radius: @borderRaduis;
			
 
				+        transition   : @transition;
			
 
				+        flex         : 0 0 130px;
			
 
				+        margin-right : 5px;
			
 
				+        transition   : @transition;
			
 
				+
			
 
				+        .icon i {
			
 
				+            background  : @deepblue;
			
 
				+            border-color: rgb(128, 128, 128);
			
 
				+            transition  : @transition;
			
 
				+
			
 
				+            svg use {
			
 
				+                fill      : #fff;
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        .info .value {
			
 
				+            color     : @deepblue;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .static-items {
			
 
				+        background   : #fff;
			
 
				+        margin-right : 4px;
			
 
				+        border-radius: @borderRaduis;
			
 
				+        transition   : @transition;
			
 
				+
			
 
				+        .static-items-title {
			
 
				+            color      : @deepblue;
			
 
				+            font-weight: 700;
			
 
				+            transition : @transition;
			
 
				+        }
			
 
				+
			
 
				+        .items {
			
 
				+            .item {
			
 
				+                margin-left  : 4px;
			
 
				+                border-radius: @borderRaduis;
			
 
				+                background   : rgba(128, 128, 128, 0.15);
			
 
				+                transition   : @transition;
			
 
				+                font-weight  : 700;
			
 
				+
			
 
				+                .title {
			
 
				+                    color      : @deepblue;
			
 
				+                    font-weight: 700;
			
 
				+                    transition : @transition;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .power-benchmarking-page .top .top-left .top-left-header .header-right>div.active,
			
 
				+    .power-benchmarking-page .top .top-left .top-left-header .header-right>div:hover {
			
 
				+        background  : rgba(54, 52, 142, 0.2);
			
 
				+        border-color: @deepblue;
			
 
				+        color       : @deepblue;
			
 
				+        transition  : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .power-benchmarking-page .top .top-right .rank-title::before {
			
 
				+        background: linear-gradient(135deg, rgba(54, 52, 142, 0.4), transparent, transparent, transparent, rgba(54, 52, 142, 0.4));
			
 
				+    }
			
 
				+
			
 
				+    .power-benchmarking-page .top .top-right .rank-title {
			
 
				+        border-color: @deepblue;
			
 
				+        color       : @deepblue;
			
 
				+        transition  : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .power-benchmarking-page .top .top-right .rank-title .border {
			
 
				+        border-color: @deepblue;
			
 
				+        transition  : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .power-benchmarking-page .top .top-right .rank-table.el-table thead tr th {
			
 
				+        background : rgba(54, 52, 142, 0.05);
			
 
				+        color      : @black;
			
 
				+        font-weight: 700;
			
 
				+        transition : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .power-benchmarking-page .top .top-right .rank-block {
			
 
				+        border-color: @deepblue;
			
 
				+        background  : rgba(54, 52, 142, 0.2);
			
 
				+        transition  : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .power-benchmarking-page .top .top-right .rank-table {
			
 
				+        border-color: @deepblue;
			
 
				+        transition  : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .top-right .el-table__body-wrapper {
			
 
				+        background: #fff;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .main-body .el-table td,
			
 
				+    .main-body .custom-table.el-table td {
			
 
				+        color      : @black;
			
 
				+        font-weight: 700;
			
 
				+        transition : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .main-body .el-table tr:hover td,
			
 
				+    .main-body .custom-table.el-table tr:hover td {
			
 
				+        color      : @deepblue;
			
 
				+        font-weight: 700;
			
 
				+        transition : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .power-benchmarking-page .top .top-right .rank-table.el-table.el-table--striped .el-table__body tr.el-table__row--striped td {
			
 
				+        background: rgba(54, 52, 142, 0.1);
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .power-benchmarking-page .top .top-right .rank-table.el-table.el-table--striped .el-table__body tr.el-table__row--striped:hover td {
			
 
				+        background: rgba(54, 52, 142, 0.1) !important;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .top-left .el-table {
			
 
				+        // background: #fff;
			
 
				+        // transition: @transition;
			
 
				+
			
 
				+        table {
			
 
				+            background: #fff;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+
			
 
				+        th,
			
 
				+        td {
			
 
				+            font-weight: bold;
			
 
				+            font-weight: 700;
			
 
				+        }
			
 
				+
			
 
				+        thead tr:first-child th {
			
 
				+            background: rgba(128, 128, 128, 0.3);
			
 
				+            color     : @black;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+
			
 
				+        thead tr:last-child th {
			
 
				+            background: rgba(128, 128, 128, 0.1);
			
 
				+            color     : @black;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+
			
 
				+        th.light,
			
 
				+        td.light {
			
 
				+            color     : @deepblue  !important;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .power-benchmarking-page .top .top-left .table.el-table thead tr:last-child th .cell {
			
 
				+        height : 116px;
			
 
				+    }
			
 
				+}
			
--- a/src/assets/styles/theme/light/light-jsc.less
+++ b/src/assets/styles/theme/light/light-jsc.less
@@ -0,0 +1,433 @@
 
				+// 驾驶舱模块白色主题样式
			
 
				+
			
 
				+@import "./setting.less";
			
 
				+
			
 
				+#appBody.light {
			
 
				+    color     : @black;
			
 
				+    transition: @transition;
			
 
				+
			
 
				+    .gray {
			
 
				+        color      : @black;
			
 
				+        font-weight: 700;
			
 
				+        transition : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .green {
			
 
				+        color      : @deepblue;
			
 
				+        font-weight: 700;
			
 
				+        transition : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .white {
			
 
				+        color     : @black;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+        // background: rgb(220, 221, 223);
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .panel-title {
			
 
				+        color     : @black;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .panel-tools {
			
 
				+        color     : @black;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .weather {
			
 
				+        .other-info {
			
 
				+            .text {
			
 
				+                color     : @black;
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+
			
 
				+            div.svg-icon svg use {
			
 
				+                fill      : @deepblue;
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .security-days {
			
 
				+        .text {
			
 
				+            color     : @black;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+
			
 
				+        .num {
			
 
				+            color     : @deepblue;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .tab-box {
			
 
				+        .tab-item {
			
 
				+            span {
			
 
				+                svg {
			
 
				+                    use {
			
 
				+                        fill      : @black;
			
 
				+                        transition: @transition;
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .header-body {
			
 
				+        border    : 0;
			
 
				+        transition: @transition;
			
 
				+
			
 
				+        .header-title {
			
 
				+            svg {
			
 
				+                g:nth-child(1) {
			
 
				+
			
 
				+                    path,
			
 
				+                    polygon {
			
 
				+                        fill      : @black;
			
 
				+                        transition: @transition;
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .weather-info {
			
 
				+        span svg use {
			
 
				+            fill      : @black;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .map .tab-box .tab-item.active {
			
 
				+        color   : @deepblue;
			
 
				+        position: relative;
			
 
				+        background-image: linear-gradient(to top,
			
 
				+                rgba(57, 54, 143, 0.5),
			
 
				+                rgba(5, 187, 76, 0));
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .map .tab-box .tab-item.active::after {
			
 
				+        border    : 0.093vh solid @deepblue;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+	.header-menu .header-menu-list{
			
 
				+		align-items: center;
			
 
				+		.header-menu-item{
			
 
				+			width: 11.259vh;
			
 
				+			height: 70%;
			
 
				+			&.active::after {
			
 
				+				content: inherit;
			
 
				+				transition: @transition;
			
 
				+			}
			
 
				+			
			
 
				+			&.active {
			
 
				+			    color   : @deepblue;
			
 
				+			    background: @fadePurple;
			
 
				+				    border-radius: 0.3125rem;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+
			
 
				+    .home .table-card {
			
 
				+        outline   : none;
			
 
				+        transition: @transition;
			
 
				+        overflow  : hidden;
			
 
				+    }
			
 
				+
			
 
				+    .coulometric-analysis {
			
 
				+        .card-1 {
			
 
				+            .card-icon {
			
 
				+                svg use {
			
 
				+                    fill      : @deepblue;
			
 
				+                    filter    : drop-shadow(0 0 6px @deepblue);
			
 
				+                    transition: @transition;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .map .compass {
			
 
				+        svg g:nth-child(3) {
			
 
				+            g g path {
			
 
				+                fill      : @deepblue;
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        svg g:nth-child(4) {
			
 
				+            g g path {
			
 
				+                fill      : @deepblue;
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        &::after {
			
 
				+            box-shadow: inset 0px -5px 10px 0px @deepblue;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .name-box-period-label {
			
 
				+        color     : @black;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .name-box-period-value {
			
 
				+        color     : @deepblue;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .svg-map-nx {
			
 
				+        .item-label {
			
 
				+            rect {
			
 
				+                fill      : @deepblue;
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+
			
 
				+            .mapKey {
			
 
				+                fill      : #fff;
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        .popup-layer-svg {
			
 
				+            .mapKey {
			
 
				+                fill      : #fff;
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        #popup-box-svg rect {
			
 
				+            fill      : @deepblue;
			
 
				+            opacity   : 0.8;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+
			
 
				+        .esp-1 {
			
 
				+            stroke: @deepblue;
			
 
				+        }
			
 
				+
			
 
				+        .esp-6 {
			
 
				+            stroke: @deepblue;
			
 
				+        }
			
 
				+
			
 
				+        .esp-c {
			
 
				+            stroke: @deepblue;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .com-panel-3,
			
 
				+    .com-panel,
			
 
				+    .header-body {
			
 
				+        background: #fff;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel.line:before {
			
 
				+        background: @black;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+	.com-panel-3{
			
 
				+		border-radius: 10px;
			
 
				+		.dot{
			
 
				+			background: transparent;
			
 
				+			transition: @transition;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+    .panel-header {
			
 
				+        background: #fff;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .fengji-icon {
			
 
				+		box-shadow: inset 1.5px -1px 1px 0px @deepblue;
			
 
				+        svg use {
			
 
				+            fill      : @deepblue;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .modal.el-dialog {
			
 
				+        background   : rgba(255, 255, 255, 0.85);
			
 
				+        border       : 1px solid rgba(57, 54, 143, 0.5);
			
 
				+        box-shadow   : 0px 8px 17px 1px rgb(57, 54, 143 / 30%);
			
 
				+        border-radius: @borderRaduis;
			
 
				+        transition   : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .modal.el-dialog .el-dialog__title {
			
 
				+        color     : rgba(0, 0, 0, 0.75);
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .situation-body {
			
 
				+        .value span:nth-child(2) {
			
 
				+            font-weight: 700;
			
 
				+            transition : @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .coulometric-analysis .card-title {
			
 
				+        color     : @black;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel,
			
 
				+    .panel-header,
			
 
				+    .home .table-card,
			
 
				+    .com-panel-3.situation,
			
 
				+    .el-menu--collapse,
			
 
				+    .el-sub-menu,
			
 
				+    .el-sub-menu__title,
			
 
				+    .el-menu--popup,
			
 
				+    .el-menu-item {
			
 
				+        border-radius: @borderRaduis;
			
 
				+        transition   : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel {
			
 
				+        padding-bottom: 10px;
			
 
				+        transition    : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel.line {
			
 
				+        border-left: 0;
			
 
				+        transition : @transition;
			
 
				+		margin-left: 1px;
			
 
				+		z-index: 1;
			
 
				+		font-weight: 900;
			
 
				+		&::before {
			
 
				+			width     : 0;
			
 
				+			height    : 0;
			
 
				+			margin    : 0;
			
 
				+			transition: @transition;
			
 
				+		}
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu {
			
 
				+        width        : 0;
			
 
				+        height       : calc(100% - 71px);
			
 
				+        position     : absolute;
			
 
				+        left         : 14px;
			
 
				+        top          : 57px;
			
 
				+        z-index      : 100;
			
 
				+        border-radius: 20px;
			
 
				+        border       : 0;
			
 
				+        overflow     : hidden;
			
 
				+        transition   : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu.show {
			
 
				+        width     : 54px;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .main-body {
			
 
				+        transition : @transition;
			
 
				+    }
			
 
				+	// .dot{
			
 
				+		
			
 
				+	// }
			
 
				+    // .dot.top-left {
			
 
				+    //     top       : 0.85vh;
			
 
				+    //     left      : 0.85vh;
			
 
				+    //     background: @black;
			
 
				+    //     transition: @transition;
			
 
				+    // }
			
 
				+
			
 
				+    // .dot.bottom-left {
			
 
				+    //     bottom    : 0.85vh;
			
 
				+    //     left      : 0.85vh;
			
 
				+    //     background: @black;
			
 
				+    //     transition: @transition;
			
 
				+    // }
			
 
				+
			
 
				+    // .dot.top-rignt {
			
 
				+    //     top       : 0.85vh;
			
 
				+    //     right     : 0.85vh;
			
 
				+    //     background: @black;
			
 
				+    //     transition: @transition;
			
 
				+    // }
			
 
				+
			
 
				+    // .dot.bottom-right {
			
 
				+    //     bottom    : 0.85vh;
			
 
				+    //     right     : 0.85vh;
			
 
				+    //     background: @black;
			
 
				+    //     transition: @transition;
			
 
				+    // }
			
 
				+
			
 
				+    .lightMenu .el-menu--collapse {
			
 
				+        width     : 54px;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu .el-menu--collapse {
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu .el-sub-menu__title {
			
 
				+        text-align    : center;
			
 
				+        vertical-align: middle;
			
 
				+        padding       : 0 20px;
			
 
				+        transition    : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .lightMenu .el-sub-menu__title i {
			
 
				+        color     : #fff;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+	
			
 
				+	.el-popper.is-light.is-pure .el-menu--popup {
			
 
				+	  padding:0;
			
 
				+	  .el-menu-item-group__title{padding:0;}
			
 
				+	  .el-menu-item{height: 46px;line-height: 46px;}
			
 
				+	}
			
 
				+	
			
 
				+	.el-popper.is-light{
			
 
				+		border:none;
			
 
				+		.el-menu{border-radius: 0px;}
			
 
				+	}
			
 
				+	
			
 
				+    .com-panel-3 {
			
 
				+        border    : 0;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .map .return {
			
 
				+        color     : rgba(0, 0, 0, 0.8);
			
 
				+        transition: @transition;
			
 
				+
			
 
				+        use {
			
 
				+            fill      : @black;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .map .return:hover {
			
 
				+        color       : @deepblue;
			
 
				+        border-color: @deepblue;
			
 
				+        transition  : @transition;
			
 
				+
			
 
				+        use {
			
 
				+            fill      : @deepblue;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .name-box {
			
 
				+        .name-box-title {
			
 
				+            color     : @black;
			
 
				+            transition: @transition;
			
 
				+        }
			
 
				+    }
			
 
				+	
			
 
				+    background: rgb(220, 221, 223);
			
 
				+    transition: @transition;
			
 
				+}
			
--- a/src/assets/styles/theme/light/light-qt.less
+++ b/src/assets/styles/theme/light/light-qt.less
@@ -0,0 +1,257 @@
 
				+// 其他模块白色主题样式
			
 
				+
			
 
				+@import "./setting.less";
			
 
				+
			
 
				+#appBody.light {
			
 
				+
			
 
				+    .sjcx-item {
			
 
				+        color: @black;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .sjcx-item:hover {
			
 
				+        color: @deepblue;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .imgTitle {
			
 
				+        color: @black;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .imgItem1:hover .imgTitle {
			
 
				+        color: @deepblue;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .el-carousel__item {
			
 
				+        border-radius: @borderRaduis;
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    //原始数据查询-测点历史数据查询
			
 
				+    .el-date-editor.is-active,
			
 
				+    body .el-date-editor.is-active:hover,
			
 
				+    body .el-date-editor.is-focus .el-input__inner {
			
 
				+        border-color: @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .el-date-editor .el-range__icon {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .el-date-editor .el-range__close-icon {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .el-picker-panel .el-picker-panel__footer {
			
 
				+        background: @deepblue;
			
 
				+        border-color: @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .el-picker-panel .el-picker-panel__footer .el-button.is-plain {
			
 
				+        color: @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .el-date-editor.el-date-editor--datetimerange .el-range-input {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .el-date-editor.el-date-editor--datetimerange .el-range-separator {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .main-body .el-card .el-card__header {
			
 
				+        color: @black;
			
 
				+        background: @white;
			
 
				+    }
			
 
				+
			
 
				+    .el-radio.is-bordered.el-radio--small .el-radio__label {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .el-radio.is-bordered.is-checked {
			
 
				+        border-color: @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .el-radio.is-checked .el-radio__inner {
			
 
				+        background: @deepblue;
			
 
				+        border-color: @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .el-radio.is-checked .el-radio__label {
			
 
				+        color: @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .el-tree {
			
 
				+        color: @black;
			
 
				+        background: @white;
			
 
				+    }
			
 
				+
			
 
				+    .el-tree-node__expand-icon {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .el-tree.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
			
 
				+        color: @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .el-tree .el-tree-node__content:hover,
			
 
				+    body .el-tree .el-upload-list__item:hover {
			
 
				+        color: @deepblue;
			
 
				+        font-weight: bold;
			
 
				+    }
			
 
				+
			
 
				+    .el-tree .el-checkbox__inner:hover {
			
 
				+        border-color: @blue;
			
 
				+    }
			
 
				+
			
 
				+    .el-picker-panel.el-date-range-picker .el-date-range-picker__content .el-date-table td.end-date span,
			
 
				+    .el-picker-panel.el-date-range-picker .el-date-range-picker__content .el-date-table td.start-date span {
			
 
				+        background: rgba(@deepblueBg, 0.2);
			
 
				+    }
			
 
				+
			
 
				+    // 原始数据查询-数据导出
			
 
				+    .com-table td {
			
 
				+        color: @black  !important;
			
 
				+    }
			
 
				+
			
 
				+    .el-input__prefix {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .el-input__suffix {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .el-popper.el-select__popper[role="tooltip"] {
			
 
				+        background: @white;
			
 
				+    }
			
 
				+
			
 
				+    .el-popper__arrow::before {
			
 
				+        background: @white  !important;
			
 
				+        border: 1px solid @white  !important;
			
 
				+    }
			
 
				+
			
 
				+    .el-popper.el-select__popper[role="tooltip"] .el-select-dropdown__item.selected {
			
 
				+        color: @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .el-popper.el-select__popper[role="tooltip"] .el-select-dropdown__item.hover {
			
 
				+        background: @deepblue;
			
 
				+        color: @white;
			
 
				+    }
			
 
				+
			
 
				+    .el-popper.el-select__popper[role="tooltip"] .el-select-dropdown__item:hover {
			
 
				+        background: @deepblue;
			
 
				+        color: @white;
			
 
				+    }
			
 
				+
			
 
				+    .el-select .el-input .el-select__caret {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+    .el-picker-panel.el-date-picker td.current .cell{
			
 
				+        background-color: rgba(@deepblueBg, 0.2);
			
 
				+        color: @deepblue;
			
 
				+    }   
			
 
				+
			
 
				+    //设备管理
			
 
				+    .el-tabs--card>.el-tabs__header .el-tabs__nav {
			
 
				+        border: 1px solid @deepblue;
			
 
				+        background: rgba(@deepblueBg, 0.2);
			
 
				+    }
			
 
				+
			
 
				+    .tab .el-tabs__item.is-active {
			
 
				+        color: @deepblue;
			
 
				+        font-weight: bold;
			
 
				+    }
			
 
				+
			
 
				+    .el-tabs--card>.el-tabs__header .el-tabs__item {
			
 
				+        border-bottom: 1px solid @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .tab .el-tabs__item {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .el-pagination .btn-next .el-icon,
			
 
				+    .el-pagination .btn-prev .el-icon {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .el-pagination.is-background .el-pager li:not(.disabled).active {
			
 
				+        background: linear-gradient(to top, #4b55ae, #36348e);
			
 
				+        color: @white;
			
 
				+    }
			
 
				+
			
 
				+    .el-table__row {
			
 
				+        background: @white;
			
 
				+    }
			
 
				+
			
 
				+    .el-popper.el-cascader__dropdown[role="tooltip"] .el-cascader-node.is-selectable.in-checked-path {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    .el-popper.el-cascader__dropdown[role="tooltip"] .el-cascader-node:not(.is-disabled):hover {
			
 
				+        color: @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    //预警记录-预警管理
			
 
				+    .alarm-center .fj .fj-item .fj-title {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    //预警记录-升压站报警
			
 
				+    .number {
			
 
				+        background: @white;
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    //预警记录-自定义报警记录
			
 
				+    .custom-report-items .title {
			
 
				+        background: @white;
			
 
				+        color: @black;
			
 
				+		width: 18.2vw;
			
 
				+    }
			
 
				+
			
 
				+    .el-pagination .el-pager li {
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    // .title {
			
 
				+    //     background: @white;
			
 
				+    // }
			
 
				+
			
 
				+    //专家知识-故障知识列表
			
 
				+    .know-info .table-card tr {
			
 
				+        font-size: 12px;
			
 
				+        color: @black;
			
 
				+    }
			
 
				+
			
 
				+    //样本库-故障训练样本库
			
 
				+    .main-body .query .query-items {
			
 
				+        padding-bottom: 1vh;
			
 
				+    }
			
 
				+
			
 
				+    //样本库-知识库
			
 
				+    .el-table th.el-table__cell>.cell {
			
 
				+        color: @black;
			
 
				+        height: 3.8vh;
			
 
				+        padding-top: 0.6vh;
			
 
				+    }
			
 
				+    .el-time-panel__footer{
			
 
				+        background: @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .swiperBox .imageBox1 .imgItem1 .img1:hover,
			
 
				+    .itemBox .imageBox1 .imgItem1 .img1:hover {
			
 
				+        border: 3px solid @deepblue;
			
 
				+    }
			
 
				+
			
 
				+    .el-picker-panel.el-date-range-picker .el-date-range-picker__time-header 
			
 
				+    .el-date-range-picker__time-picker-wrap 
			
 
				+    .el-time-panel .el-time-spinner__item:hover:not(.disabled):not(.active){
			
 
				+        color: @deepblue;
			
 
				+        font-weight: bold;
			
 
				+    }
			
 
				+}
			
--- a/src/assets/styles/theme/light/light-sp.less
+++ b/src/assets/styles/theme/light/light-sp.less
@@ -0,0 +1,140 @@
 
				+// 沙盘模块白色主题样式
			
 
				+
			
 
				+@import "./setting.less";
			
 
				+
			
 
				+#appBody.light {
			
 
				+    .com-panel-sand {
			
 
				+        background   : #fff;
			
 
				+        border-top   : 1px solid transparent;
			
 
				+        border-radius: @borderRaduis;
			
 
				+        transition   : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel-sand::after {
			
 
				+        background: transparent;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel-sand-header {
			
 
				+        border-color: @deepblue;
			
 
				+        font-weight : 700;
			
 
				+        transition  : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel-sand .com-panel-sand-header::after,
			
 
				+    .com-panel-sand .com-panel-sand-header::before {
			
 
				+        background: @deepblue;
			
 
				+        transition: @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel-sand .com-panel-body .other-info {
			
 
				+        .value {
			
 
				+            color      : @black;
			
 
				+            font-weight: 700;
			
 
				+            transition : @transition;
			
 
				+        }
			
 
				+
			
 
				+        .text {
			
 
				+            color      : @black;
			
 
				+            font-weight: 700;
			
 
				+            transition : @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .com-panel-sand .rank-table th {
			
 
				+        color      : @black;
			
 
				+        font-weight: 700;
			
 
				+        transition : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .com-panel-sand .rank-table td {
			
 
				+        font-weight: 700;
			
 
				+        transition : @transition;
			
 
				+    }
			
 
				+
			
 
				+    .sand-table-bottom {
			
 
				+        .p-panel {
			
 
				+            background   : #fff;
			
 
				+            border-radius: @borderRaduis;
			
 
				+        }
			
 
				+
			
 
				+        .p-panel-title {
			
 
				+            color      : @black;
			
 
				+            font-weight: 700;
			
 
				+            transition : @transition;
			
 
				+        }
			
 
				+
			
 
				+        .pp-info-data .gray-l {
			
 
				+            color      : rgb(128, 128, 128);
			
 
				+            font-weight: 700;
			
 
				+            transition : @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .sand-table-right .com-panel-body .com-table {
			
 
				+        th {
			
 
				+            color      : rgb(128, 128, 128);
			
 
				+            font-weight: 700;
			
 
				+            transition : @transition;
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+        th.light {
			
 
				+            color      : @deepblue  !important;
			
 
				+            font-weight: 700;
			
 
				+            transition : @transition;
			
 
				+        }
			
 
				+
			
 
				+        td {
			
 
				+            color      : @black;
			
 
				+            font-weight: 700;
			
 
				+            transition : @transition;
			
 
				+        }
			
 
				+
			
 
				+        td.light {
			
 
				+            color      : @deepblue  !important;
			
 
				+            font-weight: 700;
			
 
				+            transition : @transition;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .modal {
			
 
				+        .el-dialog__body {
			
 
				+            background: rgba(255, 255, 255, 0.8);
			
 
				+            transition: @transition;
			
 
				+
			
 
				+
			
 
				+            .el-form-item__label {
			
 
				+                color     : @black;
			
 
				+                transition: @transition;
			
 
				+            }
			
 
				+
			
 
				+            .el-input__inner {
			
 
				+                // background   : rgba(0, 0, 0, 0.5);
			
 
				+                border :1px solid rgba(0, 0, 0, 0.5);
			
 
				+                border-radius: @borderRaduis;
			
 
				+                transition   : @transition;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .weatherBox {
			
 
				+        .r {
			
 
				+            .el-collapse-item__content {
			
 
				+                background : transparent;
			
 
				+                color      : @black;
			
 
				+                font-weight: 700;
			
 
				+                padding    : 20px;
			
 
				+                transition : @transition;
			
 
				+            }
			
 
				+
			
 
				+            .el-collapse-item__header {
			
 
				+                background   : transparent;
			
 
				+                border-bottom: 1px solid #999;
			
 
				+                color        : rgba(0, 0, 0, 0.75);
			
 
				+                transition   : @transition;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+}
			
--- a/src/assets/styles/theme/light/setting.less
+++ b/src/assets/styles/theme/light/setting.less
@@ -0,0 +1,17 @@
 
				+// 亮色样式配置
			
 
				+
			
 
				+@black      : #000;
			
 
				+@transition : 0.25s;
			
 
				+@deepblue   : #36348e;
			
 
				+@borderRaduis: 12px;
			
 
				+@blue : #159AFA;
			
 
				+@white : #ffffff;
			
 
				+@gray-l     : #B3BDC0;
			
 
				+@darkgray-1 : #7b7d7e;
			
 
				+@green      : #05bb4c;
			
 
				+@deepblueBg : 54, 52, 142;
			
 
				+@gray-2:#dcdddf;
			
 
				+@gray-3     : #EDEDED;
			
 
				+
			
 
				+@fadePurple     :#DFDEEC;
			
 
				+@gray-font      :#7a8385;
			
--- a/src/assets/styles/theme/light/zhjx/frist.less
+++ b/src/assets/styles/theme/light/zhjx/frist.less
@@ -0,0 +1,306 @@
 
				+@import '../setting.less';
			
 
				+
			
 
				+#appBody.light {
			
 
				+	// 健康推荐
			
 
				+	.selections {
			
 
				+		.item {
			
 
				+			color: @black;
			
 
				+			background: fade(@black, 20);
			
 
				+			border: 1px solid fade(@black, 20);
			
 
				+
			
 
				+			&:hover,
			
 
				+			&.active {
			
 
				+				background: fade(@deepblue, 20);
			
 
				+				border: 1px solid @deepblue;
			
 
				+				color: @deepblue;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	.power-info {
			
 
				+		.info-tab {
			
 
				+			.tab {
			
 
				+				color: @black;
			
 
				+				background: fade(@black, 20);
			
 
				+				border: 1px solid fade(@black, 20);
			
 
				+				i {
			
 
				+					svg use {
			
 
				+						fill: @black;
			
 
				+					}
			
 
				+				}
			
 
				+
			
 
				+				&:hover,
			
 
				+				&.active {
			
 
				+					background: fade(@deepblue, 20);
			
 
				+					border: 1px solid @deepblue;
			
 
				+					color: @deepblue;
			
 
				+
			
 
				+					i svg use {
			
 
				+						fill: @deepblue;
			
 
				+					}
			
 
				+				}
			
 
				+
			
 
				+				&.active::after {
			
 
				+					border-bottom: 9px solid @deepblue;
			
 
				+				}
			
 
				+
			
 
				+				&.active::before {
			
 
				+					border-bottom: 9px solid #063319;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	.health-report {
			
 
				+		// 健康报告 按钮样式
			
 
				+		.actions {
			
 
				+			.active {
			
 
				+				border: 1px solid @deepblue;
			
 
				+			}
			
 
				+			.item {
			
 
				+				color: fade(@white, 75);
			
 
				+				&.green {
			
 
				+					background: @deepblue;
			
 
				+				}
			
 
				+
			
 
				+				&.purple {
			
 
				+					background: @purple;
			
 
				+				}
			
 
				+
			
 
				+				&.gray {
			
 
				+			  background: @black;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		.report-items {
			
 
				+			.item {
			
 
				+				.title {
			
 
				+					background: fade(@black, 40);
			
 
				+					color: @black;
			
 
				+				}
			
 
				+
			
 
				+				.info {
			
 
				+					background: fade(@black, 20);
			
 
				+					color: @font-color;
			
 
				+					.actions {
			
 
				+						.success {
			
 
				+					  border-color: @deepblue;
			
 
				+							color: @deepblue;
			
 
				+							background: fade(@deepblue, 20);
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	// 健康推荐-已分配任务
			
 
				+	.track-info {
			
 
				+		.form-info {
			
 
				+			.work-flow {
			
 
				+				background: fade(@gray, 20);
			
 
				+				.work-flow-line {
			
 
				+					background: @deepblue;
			
 
				+				}
			
 
				+
			
 
				+				.work-flow-item {
			
 
				+					&.active {
			
 
				+				  background: none;
			
 
				+						.work-flow-icon-item {
			
 
				+							.work-flow-icon-o {
			
 
				+								border: 1px solid @deepblue;
			
 
				+							}
			
 
				+
			
 
				+							.work-flow-icon-i {
			
 
				+								border: 2px solid @deepblue;
			
 
				+								background: linear-gradient(to bottom, @gray-l 0%, @gray-l 20%, @deepblue 100%);
			
 
				+							}
			
 
				+
			
 
				+							.svg-icon {
			
 
				+								svg {
			
 
				+									use {
			
 
				+										fill: @deepblue;
			
 
				+									}
			
 
				+								}
			
 
				+							}
			
 
				+						}
			
 
				+
			
 
				+						.work-flow-text {
			
 
				+							color: @deepblue;
			
 
				+						}
			
 
				+					}
			
 
				+
			
 
				+					.work-flow-icon-item {
			
 
				+						.work-flow-icon-o {
			
 
				+							border: 1px solid #b3bdc0;
			
 
				+						}
			
 
				+
			
 
				+						.work-flow-icon-m {
			
 
				+							border: 4px solid #212b2b;
			
 
				+						}
			
 
				+
			
 
				+						.work-flow-icon-i {
			
 
				+							border: 2px solid @gray-l;
			
 
				+							background: linear-gradient(to bottom, @gray 0%, @gray 20%, @gray-l 100%);
			
 
				+						}
			
 
				+
			
 
				+						.svg-icon {
			
 
				+							svg {
			
 
				+								use {
			
 
				+									fill: @gray-l;
			
 
				+								}
			
 
				+							}
			
 
				+						}
			
 
				+					}
			
 
				+					.work-flow-text {
			
 
				+						color: @black;
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		.evaluate {
			
 
				+			.evaluate-item {
			
 
				+				.evaluate-label,
			
 
				+				.evaluate-unit {
			
 
				+					color: @black;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+		.tabs {
			
 
				+			border-left: 1px solid #53626833;
			
 
				+			.tab-box {
			
 
				+				.tab-item {
			
 
				+					&.active {
			
 
				+						color: @deepblue;
			
 
				+						background-image: @deepblueLinearTop;
			
 
				+
			
 
				+						&::after {
			
 
				+							border: 1px solid @deepblue;
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	.defect-elimination-tracking {
			
 
				+		background: fade(@white, 95);
			
 
				+		border: 1px solid fade(@deepblue, 50);
			
 
				+
			
 
				+		.defect-elimination-tracking-close {
			
 
				+			&:hover {
			
 
				+				i {
			
 
				+					color: @blue;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		.header-tile-box {
			
 
				+			.header-tile {
			
 
				+				.info-form-box {
			
 
				+					.info-form {
			
 
				+						.info-form-label {
			
 
				+							color: @gray;
			
 
				+						}
			
 
				+						.info-form-value {
			
 
				+							color: @black;
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+		.det-chart-title {
			
 
				+			color: @black;
			
 
				+		}
			
 
				+
			
 
				+		.det-chart-sub-title {
			
 
				+			color: @black;
			
 
				+		}
			
 
				+
			
 
				+		.det-chart-sub-title-big {
			
 
				+			color: @black;
			
 
				+		}
			
 
				+	}
			
 
				+	.health-2 {
			
 
				+		// 电量健康情况
			
 
				+		.power-info {
			
 
				+			.info-tab {
			
 
				+				.tab {
			
 
				+					color: @black;
			
 
				+
			
 
				+					&:hover,
			
 
				+					&.active {
			
 
				+						background: fade(@deepblue, 20);
			
 
				+						border: 1px solid @deepblue;
			
 
				+						color: @deepblue;
			
 
				+						i {
			
 
				+							svg use {
			
 
				+								fill: @deepblue;
			
 
				+							}
			
 
				+						}
			
 
				+					}
			
 
				+
			
 
				+					&.active::after {
			
 
				+						border-bottom: 9px solid @deepblue;
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	.health-3 {
			
 
				+		.com-panel {
			
 
				+			.green {
			
 
				+				color: @green;
			
 
				+				&.lengend {
			
 
				+					background: @blue;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	.health-6 .header-info .selections .item:hover i svg use,
			
 
				+	.health-6 .header-info .selections .item.active i svg use {
			
 
				+		fill: @deepblue;
			
 
				+	}
			
 
				+	.health-matrix {
			
 
				+		.green {
			
 
				+			color: @green;
			
 
				+		}
			
 
				+		.health-matrix-panel {
			
 
				+			.header {
			
 
				+				.svg-icon svg use {
			
 
				+					fill: @black;
			
 
				+				}
			
 
				+				.tools .tool-block .legend-value {
			
 
				+					color: @black;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	
			
 
				+	// /health/health0/MHS_FDC/MG01_02
			
 
				+	.progress-bar {
			
 
				+		.progress-bar-body .progress-bar-box .progress-bar-bar,.progress-bar-header .progress-bar-state{
			
 
				+			&.bg-green{
			
 
				+				background:@deepblue;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	
			
 
				+	.health-0 {
			
 
				+		.com-table tbody tr:nth-child(2n) {
			
 
				+		    background: @white;
			
 
				+		}
			
 
				+		.health-0-right .card-tool{
			
 
				+			background: @white;
			
 
				+			color: @black;
			
 
				+			font-weight: 700;
			
 
				+			.card-tool-item {
			
 
				+				color: @black;
			
 
				+				&:hover{
			
 
				+					color: @black;
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/assets/styles/theme/light/zhjx/malfunctionRecall.less
+++ b/src/assets/styles/theme/light/zhjx/malfunctionRecall.less
@@ -0,0 +1,19 @@
 
				+@import "../setting.less";
			
 
				+
			
 
				+#appBody.light {
			
 
				+    // 故障回溯
			
 
				+   .time-axis-box {
			
 
				+       .time-axis-progress-box {
			
 
				+           .time-axis-progress {
			
 
				+               background: fade(@deepblue, 60);
			
 
				+           }
			
 
				+           .time-axis-progress-scale {
			
 
				+               border: 1px solid @deepblue;
			
 
				+           }
			
 
				+       }
			
 
				+   }
			
 
				+   
			
 
				+   .fdp-sub-title {
			
 
				+       color: @deepblue;
			
 
				+   }
			
 
				+}
			
--- a/src/components/arcgis/DWK_GDC.vue
+++ b/src/components/arcgis/DWK_GDC.vue
@@ -0,0 +1,679 @@
 
				+<template>
			
 
				+  <div class="map-1" style="width: 100%; height: 100%">
			
 
				+    <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
			
 
				+      <template v-slot:content>
			
 
				+        <div class="panel-box">
			
 
				+          <div
			
 
				+            class="panel-item"
			
 
				+            :class="panel.line"
			
 
				+            v-for="(panel, index) of panels"
			
 
				+            :key="index"
			
 
				+          >
			
 
				+            <svg
			
 
				+              v-show="panel.type != 'none' && panel.type != 'syz'"
			
 
				+              viewBox="0 0 800 800"
			
 
				+              version="1.1"
			
 
				+              xmlns="http://www.w3.org/2000/svg"
			
 
				+              xmlns:xlink="http://www.w3.org/1999/xlink"
			
 
				+              xml:space="preserve"
			
 
				+            >
			
 
				+              <defs>
			
 
				+                <rect
			
 
				+                  id="fill-rect"
			
 
				+                  x="5"
			
 
				+                  y="5"
			
 
				+                  rx="8"
			
 
				+                  ry="8"
			
 
				+                  width="90"
			
 
				+                  height="340"
			
 
				+                  fill="#303B6F"
			
 
				+                />
			
 
				+                <rect
			
 
				+                  id="none-rect"
			
 
				+                  x="5"
			
 
				+                  y="5"
			
 
				+                  rx="8"
			
 
				+                  ry="8"
			
 
				+                  width="90"
			
 
				+                  height="120"
			
 
				+                  fill="#303B6F"
			
 
				+                />
			
 
				+                <g id="panel-deepblue">
			
 
				+                  <polygon
			
 
				+                    fill="#FFFFFF"
			
 
				+                    points="300 13.73 60.07 13.73 60.07 13.73 22.48 13.73 0 109.84 0 109.84 0 109.84 0 109.84 0 109.84 22.48 205.95 272.88 205.95 272.88 205.61 300 205.61 300 13.73"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#5C9BAF"
			
 
				+                    points="250.4 109.84 3.26 109.84 29 0 276.14 0 250.4 109.84"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#00486B"
			
 
				+                    points="29 219.68 276.14 219.68 250.4 109.84 3.26 109.84 29 219.68"
			
 
				+                  />
			
 
				+                </g>
			
 
				+                <g id="panel-blue">
			
 
				+                  <polygon
			
 
				+                    fill="#FFFFFF"
			
 
				+                    points="300 13.73 60.07 13.73 60.07 13.73 22.48 13.73 0 109.84 0 109.84 0 109.84 0 109.84 0 109.84 22.48 205.95 272.88 205.95 272.88 205.61 300 205.61 300 13.73"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#23ABFF"
			
 
				+                    points="250.4 109.84 3.26 109.84 29 0 276.14 0 250.4 109.84"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#0E6BBB"
			
 
				+                    points="29 219.68 276.14 219.68 250.4 109.84 3.26 109.84 29 219.68"
			
 
				+                  />
			
 
				+                </g>
			
 
				+                <g id="panel-red">
			
 
				+                  <polygon
			
 
				+                    fill="#FFFFFF"
			
 
				+                    points="290 13.27 58.07 13.27 58.07 13.27 21.73 13.27 0 106.18 0 106.18 0 106.18 0 106.18 0 106.18 21.73 199.09 263.79 199.09 263.79 198.75 290 198.75 290 13.27"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#EC1208"
			
 
				+                    points="242.05 106.18 3.15 106.18 28.04 0 266.94 0 242.05 106.18"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#AA0607"
			
 
				+                    points="28.04 212.36 266.94 212.36 242.05 106.18 3.15 106.18 28.04 212.36"
			
 
				+                  />
			
 
				+                </g>
			
 
				+              </defs>
			
 
				+              <!-- 底图 左右两列矩形 -->
			
 
				+              <g>
			
 
				+                <use xlink:href="#fill-rect" x="50" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="150" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="550" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="650" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="50" y="400" />
			
 
				+                <use xlink:href="#fill-rect" x="150" y="400" />
			
 
				+                <use xlink:href="#fill-rect" x="550" y="400" />
			
 
				+                <use xlink:href="#fill-rect" x="650" y="400" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上矩形 全部 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'fill' || panel.type == 'bottom'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+              >
			
 
				+                <use xlink:href="#fill-rect" x="250" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="350" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="450" y="50" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上矩形 一半 -->
			
 
				+              <g
			
 
				+                :style="'display: ' + (panel.type == 'top' ? 'block' : 'none')"
			
 
				+              >
			
 
				+                <use xlink:href="#none-rect" x="250" y="270" />
			
 
				+                <use xlink:href="#none-rect" x="350" y="270" />
			
 
				+                <use xlink:href="#none-rect" x="450" y="270" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上逆变器 深蓝色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'top' && panel.state == 'deepblue'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-deepblue" x="250" y="50" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上逆变器 蓝色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'top' && panel.state == 'blue'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-blue" x="250" y="50" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上逆变器 红色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'top' && panel.state == 'red'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-red" x="250" y="50" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上文字 -->
			
 
				+              <g
			
 
				+                :style="'display: ' + (panel.type == 'top' ? 'block' : 'none')"
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <text
			
 
				+                  x="365"
			
 
				+                  y="220"
			
 
				+                  fill="#ffffff"
			
 
				+                  font-size="150"
			
 
				+                  text-anchor="middle"
			
 
				+                >
			
 
				+                  {{ panel.code }}
			
 
				+                </text>
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下矩形 全部 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'fill' || panel.type == 'top'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+              >
			
 
				+                <use xlink:href="#fill-rect" x="250" y="400" />
			
 
				+                <use xlink:href="#fill-rect" x="350" y="400" />
			
 
				+                <use xlink:href="#fill-rect" x="450" y="400" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下矩形 一半 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' + (panel.type == 'bottom' ? 'block' : 'none')
			
 
				+                "
			
 
				+              >
			
 
				+                <use xlink:href="#none-rect" x="250" y="400" />
			
 
				+                <use xlink:href="#none-rect" x="350" y="400" />
			
 
				+                <use xlink:href="#none-rect" x="450" y="400" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下逆变器 深蓝色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'bottom' && panel.state == 'deepblue'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-deepblue" x="250" y="530" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下逆变器 蓝色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'bottom' && panel.state == 'blue'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-blue" x="250" y="530" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下逆变器 红色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'bottom' && panel.state == 'red'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-red" x="250" y="530" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下文字 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' + (panel.type == 'bottom' ? 'block' : 'none')
			
 
				+                "
			
 
				+                class="can-click"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <text
			
 
				+                  x="460"
			
 
				+                  y="740"
			
 
				+                  fill="#ffffff"
			
 
				+                  font-size="150"
			
 
				+                  text-anchor="middle"
			
 
				+                >
			
 
				+                  {{ panel.code }}
			
 
				+                </text>
			
 
				+              </g>
			
 
				+            </svg>
			
 
				+            <div v-show="panel.type == 'syz'" class="panel-syz">
			
 
				+              <img :src="syzImg" class="syz-img" />
			
 
				+              <div class="syz-text">升压站</div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+          <!-- <img :src="tempImg" style="width: 800px; height: 700px;"> -->
			
 
				+        </div>
			
 
				+      </template>
			
 
				+    </arcgis>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import arcgis from "./arcgis.vue";
			
 
				+import dataService from "@/helper/data.js";
			
 
				+
			
 
				+export default {
			
 
				+  // 名称
			
 
				+  name: "Map",
			
 
				+  // 使用组件
			
 
				+  components: {
			
 
				+    arcgis,
			
 
				+  },
			
 
				+  props: {
			
 
				+    wpId: {
			
 
				+      type: String,
			
 
				+      default: "",
			
 
				+    },
			
 
				+  },
			
 
				+  // 数据
			
 
				+  data() {
			
 
				+    return {
			
 
				+      wpnumMap: {}, //风机监视数量
			
 
				+      wpInfoMap: {}, //风机详情
			
 
				+      fjmap: [], // 风机名
			
 
				+      sourceId: "",
			
 
				+      arcgisData: {
			
 
				+        mode: "2D", // 模式 2D 3D
			
 
				+        title: "宁夏地图", // 标题
			
 
				+        center: [106.2953, 38.58533], // 初始中心点
			
 
				+        height: 654, // 3D地图初始相机高度
			
 
				+        tilt: 65, // 俯视角
			
 
				+        scale: 15000,
			
 
				+        rotation: 180,
			
 
				+      },
			
 
				+      tempImg: require("@assets/temp1.png"),
			
 
				+      syzImg: require("@assets/png/booster-station.png"),
			
 
				+      showPopup: true,
			
 
				+      panels: 
			
 
				+	  [{"id":"00","type":"top","code":1,"state":"deepblue","line":"top left"},
			
 
				+	  {"id":"01","type":"top","code":2,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"02","type":"top","code":3,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"03","type":"top","code":4,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"04","type":"top","code":5,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"05","type":"top","code":6,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"06","type":"top","code":7,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"07","type":"top","code":8,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"08","type":"top","code":9,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"09","type":"top","code":10,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"10","type":"top","code":11,"state":"deepblue","line":"top left"},
			
 
				+	  {"id":"11","type":"top","code":12,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"12","type":"top","code":13,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"13","type":"top","code":14,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"14","type":"top","code":15,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"15","type":"top","code":16,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"16","type":"top","code":17,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"17","type":"top","code":18,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"18","type":"top","code":19,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"19","type":"top","code":20,"state":"deepblue","line":"top right"}]
			
 
				+    };
			
 
				+  },
			
 
				+  created() {
			
 
				+    let that = this;
			
 
				+    that.sourceId = this.wpId;
			
 
				+    that.$nextTick(() => {});
			
 
				+  },
			
 
				+  // 函数
			
 
				+  methods: {
			
 
				+    when: function () {
			
 
				+      this.$refs.arcgis.addHtmlPoint(
			
 
				+        [106.48638888888888, 38.924166666666665],
			
 
				+        "content",
			
 
				+        400,
			
 
				+        350
			
 
				+      );
			
 
				+    },
			
 
				+    clickMap: function (info) {
			
 
				+      console.log(info);
			
 
				+    },
			
 
				+    clickEl: function (item) {
			
 
				+		let wpId = this.$route.path.split('/').pop(),
			
 
				+			wtId = wpId.split('_')[0] +'01_'+ item.id;
			
 
				+		this.$router.push({
			
 
				+		  path: `/monitor/windsite/inverter-info/`+wpId+`/`+wtId,
			
 
				+		});
			
 
				+    },
			
 
				+  },
			
 
				+  watch: {
			
 
				+    wpId(res) {
			
 
				+      this.sourceId = res;
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+@titleHeight: 40px;
			
 
				+
			
 
				+.map-1 {
			
 
				+  width: 100%;
			
 
				+  height: calc(100vh - 90px);
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+
			
 
				+  .btn-group-tabs {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+  }
			
 
				+
			
 
				+    .panel-box {
			
 
				+        width: 840px;
			
 
				+        padding: 20px;
			
 
				+        display: flex;
			
 
				+        flex-wrap: wrap;
			
 
				+        background: #536268B8;
			
 
				+
			
 
				+        .panel-item {
			
 
				+            width: 80px;
			
 
				+            height: 80px;
			
 
				+            position: relative;
			
 
				+            
			
 
				+            // margin-top: -20px;
			
 
				+            // margin-left: -20px;
			
 
				+
			
 
				+            &.top {
			
 
				+                &::after {
			
 
				+                    top: -3px;
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            &.bottom {
			
 
				+                &::after {
			
 
				+                    bottom: -3px;
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            &.left {
			
 
				+                &::before {
			
 
				+                    left: -3px;
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            &.right {
			
 
				+                &::before {
			
 
				+                    right: -3px;
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            &::after {
			
 
				+                content: '';
			
 
				+                width: 100%;
			
 
				+                height: 6px;
			
 
				+                position: absolute;
			
 
				+                left: 0;
			
 
				+                background: @green;
			
 
				+                opacity: 0;
			
 
				+            }
			
 
				+
			
 
				+            &::before {
			
 
				+                content: '';
			
 
				+                width: 6px;
			
 
				+                height: 100%;
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                background: @green;
			
 
				+                opacity: 0;
			
 
				+            }
			
 
				+
			
 
				+            svg {
			
 
				+                width: 80px;
			
 
				+                height: 80px;
			
 
				+            }
			
 
				+
			
 
				+            .panel-syz {
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+                position: relative;
			
 
				+
			
 
				+                .syz-img {
			
 
				+                    position: absolute;
			
 
				+                    height: 70px;
			
 
				+                    top: -35px;
			
 
				+                    left: -10px;
			
 
				+                }
			
 
				+
			
 
				+                .syz-text {
			
 
				+                    position: absolute;
			
 
				+                    color: @green;
			
 
				+                    font-size: @fontsize-l;
			
 
				+                    width: 100%;
			
 
				+                    text-align: center;
			
 
				+                    left: 0;
			
 
				+                    top: -55px;
			
 
				+                    font-weight: bold;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+  .can-click {
			
 
				+    cursor: pointer;
			
 
				+  }
			
 
				+
			
 
				+  .syz-img {
			
 
				+    width: 65px;
			
 
				+    height: 47px;
			
 
				+
			
 
				+    img {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-title {
			
 
				+    width: 100%;
			
 
				+    background-color: fade(@darkgray, 40%);
			
 
				+    margin-top: 16px;
			
 
				+    padding: 6px;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .panel-title-name {
			
 
				+      color: @green;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      line-height: 0;
			
 
				+      font-size: 0;
			
 
				+
			
 
				+      i,
			
 
				+      span {
			
 
				+        margin: 0 0 0 16px;
			
 
				+        line-height: 0;
			
 
				+        font-size: 13px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .sub-title-item {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      margin-left: 16px;
			
 
				+
			
 
				+      .sub-title {
			
 
				+        font-size: 13px;
			
 
				+        margin-left: 6px;
			
 
				+      }
			
 
				+
			
 
				+      .sub-count {
			
 
				+        font-size: 13px;
			
 
				+        font-weight: 500;
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        height: 31px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-body {
			
 
				+    flex-grow: 1;
			
 
				+    background-color: fade(@darkgray, 20%);
			
 
				+    padding: 8px;
			
 
				+    overflow: auto;
			
 
				+    position: relative;
			
 
				+
			
 
				+    .arcgis-layer {
			
 
				+      z-index: 1;
			
 
				+    }
			
 
				+
			
 
				+    .map-popup-panel {
			
 
				+      width: 760px;
			
 
				+      position: absolute;
			
 
				+      left: 71px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+
			
 
				+      .map-popup-panel-header {
			
 
				+        width: 100%;
			
 
				+        background: fade(#152221, 90%);
			
 
				+        display: flex;
			
 
				+
			
 
				+        .map-popup-panel-title {
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          position: relative;
			
 
				+
			
 
				+          &::before,
			
 
				+          &::after {
			
 
				+            position: absolute;
			
 
				+            width: calc(50% - 6px);
			
 
				+            bottom: 0;
			
 
				+            border-bottom: 2px solid @green;
			
 
				+          }
			
 
				+
			
 
				+          &::before {
			
 
				+            content: "";
			
 
				+            left: 0;
			
 
				+          }
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            right: 0;
			
 
				+          }
			
 
				+
			
 
				+          span {
			
 
				+            position: absolute;
			
 
				+            width: 11.3px;
			
 
				+            height: 11.3px;
			
 
				+            border-left: 2px solid @green;
			
 
				+            border-top: 2px solid @green;
			
 
				+            left: calc(50% - 5.65px);
			
 
				+            bottom: -3px;
			
 
				+            transform: rotate(45deg);
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-date {
			
 
				+          flex-grow: 1;
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          text-align: right;
			
 
				+          border-bottom: 2px solid @green;
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-back {
			
 
				+          margin-left: auto;
			
 
				+          width: 54px;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+          justify-content: center;
			
 
				+          position: relative;
			
 
				+          cursor: pointer;
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            position: absolute;
			
 
				+            left: 0;
			
 
				+            height: 50%;
			
 
				+            border-left: 1px solid @gray;
			
 
				+            top: 25%;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .map-popup-panel-body {
			
 
				+        background: fade(#152221, 75%);
			
 
				+        border: 1px solid fade(@darkgray, 40);
			
 
				+        border-top: 0px;
			
 
				+
			
 
				+        .table-form {
			
 
				+          .text,
			
 
				+          .unit {
			
 
				+            font-weight: 400;
			
 
				+          }
			
 
				+
			
 
				+          .unit {
			
 
				+            min-width: auto;
			
 
				+          }
			
 
				+
			
 
				+          .value,
			
 
				+          .unit {
			
 
				+            text-align: left;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .map-tool {
			
 
				+      position: absolute;
			
 
				+      right: 22px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+      background: #152221af;
			
 
				+      padding: 18px 14px;
			
 
				+
			
 
				+      .m-btn {
			
 
				+        width: 124px;
			
 
				+        height: 44px;
			
 
				+        background: #152221bf;
			
 
				+        border: 1px solid #152221bf;
			
 
				+        color: #ffffff;
			
 
				+        transition: all 0.3s;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        justify-content: center;
			
 
				+        cursor: pointer;
			
 
				+
			
 
				+        &:hover,
			
 
				+        &.active {
			
 
				+          background: #05bb4c33;
			
 
				+          border: 1px solid #05bb4c;
			
 
				+          color: #05bb4c;
			
 
				+        }
			
 
				+
			
 
				+        + .m-btn {
			
 
				+          margin-top: 16px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/arcgis/HZJ_GDC.vue
+++ b/src/components/arcgis/HZJ_GDC.vue
--- a/src/components/arcgis/MCH_GDC.vue
+++ b/src/components/arcgis/MCH_GDC.vue
--- a/src/components/arcgis/MHS_FDC.vue
+++ b/src/components/arcgis/MHS_FDC.vue
@@ -0,0 +1,502 @@
 
				+<template>
			
 
				+  <div class="map-1" style="width: 100%; height: 100%">
			
 
				+    <arcgis
			
 
				+      class="arcgis-layer"
			
 
				+      @when="when"
			
 
				+      ref="arcgis"
			
 
				+      :data="arcgisData"
			
 
				+      @clickMap="clickMap"
			
 
				+    >
			
 
				+      <template
			
 
				+        v-for="(fan, index) of fans"
			
 
				+        :key="index"
			
 
				+        v-slot:[fan.attributes.code]
			
 
				+      >
			
 
				+        <svg
			
 
				+          v-if="fan.attributes.code != '升压站'"
			
 
				+          @click="clickFan(fan.attributes.code)"
			
 
				+          class="can-click esri-component"
			
 
				+          version="1.1"
			
 
				+          xmlns="http://www.w3.org/2000/svg"
			
 
				+          xmlns:xlink="http://www.w3.org/1999/xlink"
			
 
				+          viewBox="0 0 200 240"
			
 
				+          enable-background="new 0 0 200 240"
			
 
				+          xml:space="preserve"
			
 
				+          width="66"
			
 
				+          height="66"
			
 
				+        >
			
 
				+          <!-- 底座 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][2]"
			
 
				+              d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
			
 
				+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 后面的脑袋 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][0]"
			
 
				+              d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
			
 
				+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 柱 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][0]"
			
 
				+              d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 风扇 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][1]"
			
 
				+              d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z"
			
 
				+            />
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][1]"
			
 
				+              d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
			
 
				+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z"
			
 
				+            />
			
 
				+            <animateTransform
			
 
				+              v-if="fan.attributes.rotate"
			
 
				+              attributeName="transform"
			
 
				+              attributeType="XML"
			
 
				+              type="rotate"
			
 
				+              from="0 100 82"
			
 
				+              to="359 100 82"
			
 
				+              :dur="fan.attributes.dur + 's'"
			
 
				+              repeatCount="indefinite"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 前面的尖 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][2]"
			
 
				+              d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
			
 
				+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 文字 -->
			
 
				+          <g>
			
 
				+            <text
			
 
				+              x="100"
			
 
				+              y="240"
			
 
				+              fill="#ffffff"
			
 
				+              font-size="40"
			
 
				+              text-anchor="middle"
			
 
				+              alignment-baseline="baseline"
			
 
				+            >
			
 
				+              {{ fan.attributes.code }}
			
 
				+            </text>
			
 
				+          </g>
			
 
				+        </svg>
			
 
				+        <div v-if="fan.attributes.code == '升压站'">
			
 
				+          <div class="syz-img">
			
 
				+            <img :src="syzImg" />
			
 
				+          </div>
			
 
				+          <div class="white font-sm mr-t-8" style="text-align: center">
			
 
				+            {{ fan.attributes.code }}
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </template>
			
 
				+    </arcgis>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import arcgis from "./arcgis.vue";
			
 
				+import dataService from "@/helper/data.js";
			
 
				+
			
 
				+export default {
			
 
				+  // 名称
			
 
				+  name: "Map",
			
 
				+  // 使用组件
			
 
				+  components: {
			
 
				+    arcgis,
			
 
				+  },
			
 
				+  props: {
			
 
				+    wpId: {
			
 
				+      type: String,
			
 
				+      default: "",
			
 
				+    },
			
 
				+  },
			
 
				+  // 数据
			
 
				+  data() {
			
 
				+    return {
			
 
				+      wpnumMap: {}, //风机监视数量
			
 
				+      wpInfoMap: {}, //风机详情
			
 
				+      fjmap: [], // 风机名
			
 
				+      sourceId: "",
			
 
				+      arcgisData: {
			
 
				+        mode: "2D", // 模式 2D 3D
			
 
				+        title: "宁夏地图", // 标题
			
 
				+        center: [107.0391975, 37.31469028], // 初始中心点 106.230909, 38.487193
			
 
				+        height: 654, // 3D地图初始相机高度
			
 
				+        tilt: 65, // 俯视角
			
 
				+        scale: 30000,
			
 
				+        rotation: -45,
			
 
				+        ox: -600,
			
 
				+        oy: -50,
			
 
				+      },
			
 
				+      showPopup: false,
			
 
				+      mapToolIndex: 0,
			
 
				+      fans: [],
			
 
				+      colors: {
			
 
				+        0: ["#05bb4c", "#4ad476", "#9fedb2"],
			
 
				+        1: ["#4b55ae", "#959dc7", "#d3d6e0"],
			
 
				+        2: ["#BA3237", "#d4807d", "#eddad8"],
			
 
				+        3: ["#606769", "#757575", "#AFAFAF"],
			
 
				+        4: ["#e17e23", "#fabf78", "#ffebcc"],
			
 
				+        5: ["#c531c7", "#e080dc", "#fadef7"],
			
 
				+        6: ["#c531c7", "#e080dc", "#fadef7"],
			
 
				+      },
			
 
				+      syzImg: require("@assets/png/booster-station.png"),
			
 
				+    };
			
 
				+  },
			
 
				+  created() {
			
 
				+    let that = this;
			
 
				+    that.sourceId = this.wpId;
			
 
				+    that.$nextTick(() => {
			
 
				+      that.requestData();
			
 
				+    });
			
 
				+  },
			
 
				+  // 函数
			
 
				+  methods: {
			
 
				+    select(res) {
			
 
				+      this.$router.replace({
			
 
				+        path: `/monitor/windsite/map/${res.code}`,
			
 
				+      });
			
 
				+    },
			
 
				+    // 风机状态监视
			
 
				+    requestData() {
			
 
				+      let that = this;
			
 
				+      that.API.requestData({
			
 
				+        method: "POST",
			
 
				+        subUrl: "monitor/findGeneralAppearance",
			
 
				+        data: {
			
 
				+          wpId: that.wpId,
			
 
				+        },
			
 
				+        success(res) {
			
 
				+          if (res.code == 200) {
			
 
				+            that.wpnumMap = res.data.fczbmap.jczbmap;
			
 
				+            that.wpInfoMap = res.data.wxssmap;
			
 
				+            that.fjmap = res.data.fjmap[0];
			
 
				+			that.when();
			
 
				+          }
			
 
				+        },
			
 
				+      });
			
 
				+    },
			
 
				+    when: function () {
			
 
				+      let jsonObj = dataService.get("arcgis-mhs");
			
 
				+      this.fans = jsonObj;
			
 
				+      jsonObj.forEach((item) => {
			
 
				+        let obj = this.fjmap.find((t) => {
			
 
				+          let wtid = t.wtId.replace("01_", "");
			
 
				+          if (wtid == item.attributes.code) return t;
			
 
				+        });
			
 
				+        if (obj) {
			
 
				+          item.attributes.state = String(obj.fjzt);
			
 
				+        } else {
			
 
				+          item.attributes.state = "4";
			
 
				+        }
			
 
				+        switch (item.attributes.state) {
			
 
				+          case "0": //待机
			
 
				+            item.attributes.rotate = false; // 转
			
 
				+            item.attributes.dur = 8; // 转一圈时间
			
 
				+            break;
			
 
				+          case "1": //运行
			
 
				+            item.attributes.rotate = true; // 转
			
 
				+            item.attributes.dur = 2; // 转一圈时间
			
 
				+            break;
			
 
				+          case "2": //故障
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "3": //中断
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "4": //维护
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "5": //限电
			
 
				+            item.attributes.rotate = true; // 转
			
 
				+            item.attributes.dur = 6;
			
 
				+            break;
			
 
				+          case "6": //停机
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          default:
			
 
				+            item.attributes.rotate = false;
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+        }
			
 
				+        this.$refs.arcgis.addHtmlPoint(
			
 
				+          [item.geometry.x, item.geometry.y],
			
 
				+          item.attributes.code,
			
 
				+          33,
			
 
				+          50,
			
 
				+          false
			
 
				+        );
			
 
				+      });
			
 
				+      let lineJsonObj = dataService.get("arcgis-mhs-line");
			
 
				+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
			
 
				+    },
			
 
				+    clickMap: function (info) {
			
 
				+      console.log(info);
			
 
				+    },
			
 
				+    clickFan: function (code) {
			
 
				+      let wtId = code.replace("G", "G01_");
			
 
				+      this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
			
 
				+    },
			
 
				+    popupBack: function () {
			
 
				+      this.showPopup = false;
			
 
				+    },
			
 
				+    clickMapTool: function (index) {
			
 
				+      //   this.mapToolIndex = index;
			
 
				+      this.showPopup = !this.showPopup;
			
 
				+    },
			
 
				+  },
			
 
				+  watch: {
			
 
				+    wpId(res) {
			
 
				+      this.sourceId = res;
			
 
				+      if (res) {
			
 
				+        this.requestData();
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+@titleHeight: 40px;
			
 
				+
			
 
				+.map-1 {
			
 
				+  width: 100%;
			
 
				+  height: calc(100vh - 90px);
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+
			
 
				+  .btn-group-tabs {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+  }
			
 
				+
			
 
				+  .can-click {
			
 
				+    cursor: pointer;
			
 
				+  }
			
 
				+
			
 
				+  .syz-img {
			
 
				+    width: 65px;
			
 
				+    height: 47px;
			
 
				+
			
 
				+    img {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-title {
			
 
				+    width: 100%;
			
 
				+    background-color: fade(@darkgray, 40%);
			
 
				+    margin-top: 16px;
			
 
				+    padding: 6px;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .panel-title-name {
			
 
				+      color: @green;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      line-height: 0;
			
 
				+      font-size: 0;
			
 
				+
			
 
				+      i,
			
 
				+      span {
			
 
				+        margin: 0 0 0 16px;
			
 
				+        line-height: 0;
			
 
				+        font-size: 13px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .sub-title-item {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      margin-left: 16px;
			
 
				+
			
 
				+      .sub-title {
			
 
				+        font-size: 13px;
			
 
				+        margin-left: 6px;
			
 
				+      }
			
 
				+
			
 
				+      .sub-count {
			
 
				+        font-size: 13px;
			
 
				+        font-weight: 500;
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        height: 31px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-body {
			
 
				+    flex-grow: 1;
			
 
				+    background-color: fade(@darkgray, 20%);
			
 
				+    padding: 8px;
			
 
				+    overflow: auto;
			
 
				+    position: relative;
			
 
				+
			
 
				+    .arcgis-layer {
			
 
				+      z-index: 1;
			
 
				+    }
			
 
				+
			
 
				+    .map-popup-panel {
			
 
				+      width: 760px;
			
 
				+      position: absolute;
			
 
				+      left: 71px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+
			
 
				+      .map-popup-panel-header {
			
 
				+        width: 100%;
			
 
				+        background: fade(#152221, 90%);
			
 
				+        display: flex;
			
 
				+
			
 
				+        .map-popup-panel-title {
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          position: relative;
			
 
				+
			
 
				+          &::before,
			
 
				+          &::after {
			
 
				+            position: absolute;
			
 
				+            width: calc(50% - 6px);
			
 
				+            bottom: 0;
			
 
				+            border-bottom: 2px solid @green;
			
 
				+          }
			
 
				+
			
 
				+          &::before {
			
 
				+            content: "";
			
 
				+            left: 0;
			
 
				+          }
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            right: 0;
			
 
				+          }
			
 
				+
			
 
				+          span {
			
 
				+            position: absolute;
			
 
				+            width: 11.3px;
			
 
				+            height: 11.3px;
			
 
				+            border-left: 2px solid @green;
			
 
				+            border-top: 2px solid @green;
			
 
				+            left: calc(50% - 5.65px);
			
 
				+            bottom: -3px;
			
 
				+            transform: rotate(45deg);
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-date {
			
 
				+          flex-grow: 1;
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          text-align: right;
			
 
				+          border-bottom: 2px solid @green;
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-back {
			
 
				+          margin-left: auto;
			
 
				+          width: 54px;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+          justify-content: center;
			
 
				+          position: relative;
			
 
				+          cursor: pointer;
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            position: absolute;
			
 
				+            left: 0;
			
 
				+            height: 50%;
			
 
				+            border-left: 1px solid @gray;
			
 
				+            top: 25%;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .map-popup-panel-body {
			
 
				+        background: fade(#152221, 75%);
			
 
				+        border: 1px solid fade(@darkgray, 40);
			
 
				+        border-top: 0px;
			
 
				+
			
 
				+        .table-form {
			
 
				+          .text,
			
 
				+          .unit {
			
 
				+            font-weight: 400;
			
 
				+          }
			
 
				+
			
 
				+          .unit {
			
 
				+            min-width: auto;
			
 
				+          }
			
 
				+
			
 
				+          .value,
			
 
				+          .unit {
			
 
				+            text-align: left;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .map-tool {
			
 
				+      position: absolute;
			
 
				+      right: 22px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+      background: #152221af;
			
 
				+      padding: 18px 14px;
			
 
				+
			
 
				+      .m-btn {
			
 
				+        width: 124px;
			
 
				+        height: 44px;
			
 
				+        background: #152221bf;
			
 
				+        border: 1px solid #152221bf;
			
 
				+        color: #ffffff;
			
 
				+        transition: all 0.3s;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        justify-content: center;
			
 
				+        cursor: pointer;
			
 
				+
			
 
				+        &:hover,
			
 
				+        &.active {
			
 
				+          background: #05bb4c33;
			
 
				+          border: 1px solid #05bb4c;
			
 
				+          color: #05bb4c;
			
 
				+        }
			
 
				+
			
 
				+        + .m-btn {
			
 
				+          margin-top: 16px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/arcgis/NSS_FDC.vue
+++ b/src/components/arcgis/NSS_FDC.vue
@@ -0,0 +1,502 @@
 
				+<template>
			
 
				+  <div class="map-1" style="width: 100%; height: 100%">
			
 
				+    <arcgis
			
 
				+      class="arcgis-layer"
			
 
				+      @when="when"
			
 
				+      ref="arcgis"
			
 
				+      :data="arcgisData"
			
 
				+      @clickMap="clickMap"
			
 
				+    >
			
 
				+      <template
			
 
				+        v-for="(fan, index) of fans"
			
 
				+        :key="index"
			
 
				+        v-slot:[fan.attributes.code]
			
 
				+      >
			
 
				+        <svg
			
 
				+          v-if="fan.attributes.code != '升压站'"
			
 
				+          @click="clickFan(fan.attributes.code)"
			
 
				+          class="can-click esri-component"
			
 
				+          version="1.1"
			
 
				+          xmlns="http://www.w3.org/2000/svg"
			
 
				+          xmlns:xlink="http://www.w3.org/1999/xlink"
			
 
				+          viewBox="0 0 200 240"
			
 
				+          enable-background="new 0 0 200 240"
			
 
				+          xml:space="preserve"
			
 
				+          width="66"
			
 
				+          height="66"
			
 
				+        >
			
 
				+          <!-- 底座 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][2]"
			
 
				+              d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
			
 
				+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 后面的脑袋 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][0]"
			
 
				+              d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
			
 
				+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 柱 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][0]"
			
 
				+              d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 风扇 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][1]"
			
 
				+              d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z"
			
 
				+            />
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][1]"
			
 
				+              d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
			
 
				+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z"
			
 
				+            />
			
 
				+            <animateTransform
			
 
				+              v-if="fan.attributes.rotate"
			
 
				+              attributeName="transform"
			
 
				+              attributeType="XML"
			
 
				+              type="rotate"
			
 
				+              from="0 100 82"
			
 
				+              to="359 100 82"
			
 
				+              :dur="fan.attributes.dur + 's'"
			
 
				+              repeatCount="indefinite"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 前面的尖 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][2]"
			
 
				+              d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
			
 
				+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 文字 -->
			
 
				+          <g>
			
 
				+            <text
			
 
				+              x="100"
			
 
				+              y="240"
			
 
				+              fill="#ffffff"
			
 
				+              font-size="40"
			
 
				+              text-anchor="middle"
			
 
				+              alignment-baseline="baseline"
			
 
				+            >
			
 
				+              {{ fan.attributes.code }}
			
 
				+            </text>
			
 
				+          </g>
			
 
				+        </svg>
			
 
				+        <div v-if="fan.attributes.code == '升压站'">
			
 
				+          <div class="syz-img">
			
 
				+            <img :src="syzImg" />
			
 
				+          </div>
			
 
				+          <div class="white font-sm mr-t-8" style="text-align: center">
			
 
				+            {{ fan.attributes.code }}
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </template>
			
 
				+    </arcgis>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import arcgis from "./arcgis.vue";
			
 
				+import dataService from "@/helper/data.js";
			
 
				+
			
 
				+export default {
			
 
				+  // 名称
			
 
				+  name: "Map",
			
 
				+  // 使用组件
			
 
				+  components: {
			
 
				+    arcgis,
			
 
				+  },
			
 
				+  props: {
			
 
				+    wpId: {
			
 
				+      type: String,
			
 
				+      default: "",
			
 
				+    },
			
 
				+  },
			
 
				+  // 数据
			
 
				+  data() {
			
 
				+    return {
			
 
				+      wpnumMap: {}, //风机监视数量
			
 
				+      wpInfoMap: {}, //风机详情
			
 
				+      fjmap: [], // 风机名
			
 
				+      sourceId: "",
			
 
				+      arcgisData: {
			
 
				+        mode: "2D", // 模式 2D 3D
			
 
				+        title: "宁夏地图", // 标题
			
 
				+        center: [106.0231304, 37.76323706], // 初始中心点 106.230909, 38.487193
			
 
				+        height: 654, // 3D地图初始相机高度
			
 
				+        tilt: 65, // 俯视角
			
 
				+        scale: 50000,
			
 
				+        rotation: -45,
			
 
				+        ox: -600,
			
 
				+        oy: -50,
			
 
				+      },
			
 
				+      showPopup: false,
			
 
				+      mapToolIndex: 0,
			
 
				+      fans: [],
			
 
				+      colors: {
			
 
				+        0: ["#05bb4c", "#4ad476", "#9fedb2"],
			
 
				+        1: ["#4b55ae", "#959dc7", "#d3d6e0"],
			
 
				+        2: ["#BA3237", "#d4807d", "#eddad8"],
			
 
				+        3: ["#606769", "#757575", "#AFAFAF"],
			
 
				+        4: ["#e17e23", "#fabf78", "#ffebcc"],
			
 
				+        5: ["#c531c7", "#e080dc", "#fadef7"],
			
 
				+        6: ["#c531c7", "#e080dc", "#fadef7"],
			
 
				+      },
			
 
				+      syzImg: require("@assets/png/booster-station.png"),
			
 
				+    };
			
 
				+  },
			
 
				+  created() {
			
 
				+    let that = this;
			
 
				+    that.sourceId = this.wpId;
			
 
				+    that.$nextTick(() => {
			
 
				+      that.requestData();
			
 
				+    });
			
 
				+  },
			
 
				+  // 函数
			
 
				+  methods: {
			
 
				+    select(res) {
			
 
				+      this.$router.replace({
			
 
				+        path: `/monitor/windsite/map/${res.code}`,
			
 
				+      });
			
 
				+    },
			
 
				+    // 风机状态监视
			
 
				+    requestData() {
			
 
				+      let that = this;
			
 
				+      that.API.requestData({
			
 
				+        method: "POST",
			
 
				+        subUrl: "monitor/findGeneralAppearance",
			
 
				+        data: {
			
 
				+          wpId: that.wpId,
			
 
				+        },
			
 
				+        success(res) {
			
 
				+          if (res.code == 200) {
			
 
				+            that.wpnumMap = res.data.fczbmap.jczbmap;
			
 
				+            that.wpInfoMap = res.data.wxssmap;
			
 
				+            that.fjmap = res.data.fjmap[0];
			
 
				+			that.when();
			
 
				+          }
			
 
				+        },
			
 
				+      });
			
 
				+    },
			
 
				+    when: function () {
			
 
				+      let jsonObj = dataService.get("arcgis-nss");
			
 
				+      this.fans = jsonObj;
			
 
				+      jsonObj.forEach((item) => {
			
 
				+        let obj = this.fjmap.find((t) => {
			
 
				+          let wtid = t.wtId.replace("01_", "");
			
 
				+          if (wtid == item.attributes.code) return t;
			
 
				+        });
			
 
				+        if (obj) {
			
 
				+          item.attributes.state = String(obj.fjzt);
			
 
				+        } else {
			
 
				+          item.attributes.state = "4";
			
 
				+        }
			
 
				+        switch (item.attributes.state) {
			
 
				+          case "0": //待机
			
 
				+            item.attributes.rotate = false; // 转
			
 
				+            item.attributes.dur = 8; // 转一圈时间
			
 
				+            break;
			
 
				+          case "1": //运行
			
 
				+            item.attributes.rotate = true; // 转
			
 
				+            item.attributes.dur = 2; // 转一圈时间
			
 
				+            break;
			
 
				+          case "2": //故障
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "3": //中断
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "4": //维护
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "5": //限电
			
 
				+            item.attributes.rotate = true; // 转
			
 
				+            item.attributes.dur = 6;
			
 
				+            break;
			
 
				+          case "6": //停机
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          default:
			
 
				+            item.attributes.rotate = false;
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+        }
			
 
				+        this.$refs.arcgis.addHtmlPoint(
			
 
				+          [item.geometry.x, item.geometry.y],
			
 
				+          item.attributes.code,
			
 
				+          33,
			
 
				+          50,
			
 
				+          false
			
 
				+        );
			
 
				+      });
			
 
				+      let lineJsonObj = dataService.get("arcgis-nss-line");
			
 
				+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
			
 
				+    },
			
 
				+    clickMap: function (info) {
			
 
				+      console.log(info);
			
 
				+    },
			
 
				+    clickFan: function (code) {
			
 
				+      let wtId = code.replace("G", "G01_");
			
 
				+      this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
			
 
				+    },
			
 
				+    popupBack: function () {
			
 
				+      this.showPopup = false;
			
 
				+    },
			
 
				+    clickMapTool: function (index) {
			
 
				+      //   this.mapToolIndex = index;
			
 
				+      this.showPopup = !this.showPopup;
			
 
				+    },
			
 
				+  },
			
 
				+  watch: {
			
 
				+    wpId(res) {
			
 
				+      this.sourceId = res;
			
 
				+      if (res) {
			
 
				+        this.requestData();
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+@titleHeight: 40px;
			
 
				+
			
 
				+.map-1 {
			
 
				+  width: 100%;
			
 
				+  height: calc(100vh - 90px);
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+
			
 
				+  .btn-group-tabs {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+  }
			
 
				+
			
 
				+  .can-click {
			
 
				+    cursor: pointer;
			
 
				+  }
			
 
				+
			
 
				+  .syz-img {
			
 
				+    width: 65px;
			
 
				+    height: 47px;
			
 
				+
			
 
				+    img {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-title {
			
 
				+    width: 100%;
			
 
				+    background-color: fade(@darkgray, 40%);
			
 
				+    margin-top: 16px;
			
 
				+    padding: 6px;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .panel-title-name {
			
 
				+      color: @green;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      line-height: 0;
			
 
				+      font-size: 0;
			
 
				+
			
 
				+      i,
			
 
				+      span {
			
 
				+        margin: 0 0 0 16px;
			
 
				+        line-height: 0;
			
 
				+        font-size: 13px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .sub-title-item {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      margin-left: 16px;
			
 
				+
			
 
				+      .sub-title {
			
 
				+        font-size: 13px;
			
 
				+        margin-left: 6px;
			
 
				+      }
			
 
				+
			
 
				+      .sub-count {
			
 
				+        font-size: 13px;
			
 
				+        font-weight: 500;
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        height: 31px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-body {
			
 
				+    flex-grow: 1;
			
 
				+    background-color: fade(@darkgray, 20%);
			
 
				+    padding: 8px;
			
 
				+    overflow: auto;
			
 
				+    position: relative;
			
 
				+
			
 
				+    .arcgis-layer {
			
 
				+      z-index: 1;
			
 
				+    }
			
 
				+
			
 
				+    .map-popup-panel {
			
 
				+      width: 760px;
			
 
				+      position: absolute;
			
 
				+      left: 71px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+
			
 
				+      .map-popup-panel-header {
			
 
				+        width: 100%;
			
 
				+        background: fade(#152221, 90%);
			
 
				+        display: flex;
			
 
				+
			
 
				+        .map-popup-panel-title {
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          position: relative;
			
 
				+
			
 
				+          &::before,
			
 
				+          &::after {
			
 
				+            position: absolute;
			
 
				+            width: calc(50% - 6px);
			
 
				+            bottom: 0;
			
 
				+            border-bottom: 2px solid @green;
			
 
				+          }
			
 
				+
			
 
				+          &::before {
			
 
				+            content: "";
			
 
				+            left: 0;
			
 
				+          }
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            right: 0;
			
 
				+          }
			
 
				+
			
 
				+          span {
			
 
				+            position: absolute;
			
 
				+            width: 11.3px;
			
 
				+            height: 11.3px;
			
 
				+            border-left: 2px solid @green;
			
 
				+            border-top: 2px solid @green;
			
 
				+            left: calc(50% - 5.65px);
			
 
				+            bottom: -3px;
			
 
				+            transform: rotate(45deg);
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-date {
			
 
				+          flex-grow: 1;
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          text-align: right;
			
 
				+          border-bottom: 2px solid @green;
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-back {
			
 
				+          margin-left: auto;
			
 
				+          width: 54px;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+          justify-content: center;
			
 
				+          position: relative;
			
 
				+          cursor: pointer;
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            position: absolute;
			
 
				+            left: 0;
			
 
				+            height: 50%;
			
 
				+            border-left: 1px solid @gray;
			
 
				+            top: 25%;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .map-popup-panel-body {
			
 
				+        background: fade(#152221, 75%);
			
 
				+        border: 1px solid fade(@darkgray, 40);
			
 
				+        border-top: 0px;
			
 
				+
			
 
				+        .table-form {
			
 
				+          .text,
			
 
				+          .unit {
			
 
				+            font-weight: 400;
			
 
				+          }
			
 
				+
			
 
				+          .unit {
			
 
				+            min-width: auto;
			
 
				+          }
			
 
				+
			
 
				+          .value,
			
 
				+          .unit {
			
 
				+            text-align: left;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .map-tool {
			
 
				+      position: absolute;
			
 
				+      right: 22px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+      background: #152221af;
			
 
				+      padding: 18px 14px;
			
 
				+
			
 
				+      .m-btn {
			
 
				+        width: 124px;
			
 
				+        height: 44px;
			
 
				+        background: #152221bf;
			
 
				+        border: 1px solid #152221bf;
			
 
				+        color: #ffffff;
			
 
				+        transition: all 0.3s;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        justify-content: center;
			
 
				+        cursor: pointer;
			
 
				+
			
 
				+        &:hover,
			
 
				+        &.active {
			
 
				+          background: #05bb4c33;
			
 
				+          border: 1px solid #05bb4c;
			
 
				+          color: #05bb4c;
			
 
				+        }
			
 
				+
			
 
				+        + .m-btn {
			
 
				+          margin-top: 16px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/arcgis/PL_GDC.vue
+++ b/src/components/arcgis/PL_GDC.vue
@@ -0,0 +1,678 @@
 
				+<template>
			
 
				+  <div class="map-1" style="width: 100%; height: 100%">
			
 
				+    <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
			
 
				+      <template v-slot:content>
			
 
				+        <div class="panel-box">
			
 
				+          <div
			
 
				+            class="panel-item"
			
 
				+            :class="panel.line"
			
 
				+            v-for="(panel, index) of panels"
			
 
				+            :key="index"
			
 
				+          >
			
 
				+            <svg
			
 
				+              v-show="panel.type != 'none' && panel.type != 'syz'"
			
 
				+              viewBox="0 0 800 800"
			
 
				+              version="1.1"
			
 
				+              xmlns="http://www.w3.org/2000/svg"
			
 
				+              xmlns:xlink="http://www.w3.org/1999/xlink"
			
 
				+              xml:space="preserve"
			
 
				+            >
			
 
				+              <defs>
			
 
				+                <rect
			
 
				+                  id="fill-rect"
			
 
				+                  x="5"
			
 
				+                  y="5"
			
 
				+                  rx="8"
			
 
				+                  ry="8"
			
 
				+                  width="90"
			
 
				+                  height="340"
			
 
				+                  fill="#303B6F"
			
 
				+                />
			
 
				+                <rect
			
 
				+                  id="none-rect"
			
 
				+                  x="5"
			
 
				+                  y="5"
			
 
				+                  rx="8"
			
 
				+                  ry="8"
			
 
				+                  width="90"
			
 
				+                  height="120"
			
 
				+                  fill="#303B6F"
			
 
				+                />
			
 
				+                <g id="panel-deepblue">
			
 
				+                  <polygon
			
 
				+                    fill="#FFFFFF"
			
 
				+                    points="300 13.73 60.07 13.73 60.07 13.73 22.48 13.73 0 109.84 0 109.84 0 109.84 0 109.84 0 109.84 22.48 205.95 272.88 205.95 272.88 205.61 300 205.61 300 13.73"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#5C9BAF"
			
 
				+                    points="250.4 109.84 3.26 109.84 29 0 276.14 0 250.4 109.84"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#00486B"
			
 
				+                    points="29 219.68 276.14 219.68 250.4 109.84 3.26 109.84 29 219.68"
			
 
				+                  />
			
 
				+                </g>
			
 
				+                <g id="panel-blue">
			
 
				+                  <polygon
			
 
				+                    fill="#FFFFFF"
			
 
				+                    points="300 13.73 60.07 13.73 60.07 13.73 22.48 13.73 0 109.84 0 109.84 0 109.84 0 109.84 0 109.84 22.48 205.95 272.88 205.95 272.88 205.61 300 205.61 300 13.73"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#23ABFF"
			
 
				+                    points="250.4 109.84 3.26 109.84 29 0 276.14 0 250.4 109.84"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#0E6BBB"
			
 
				+                    points="29 219.68 276.14 219.68 250.4 109.84 3.26 109.84 29 219.68"
			
 
				+                  />
			
 
				+                </g>
			
 
				+                <g id="panel-red">
			
 
				+                  <polygon
			
 
				+                    fill="#FFFFFF"
			
 
				+                    points="290 13.27 58.07 13.27 58.07 13.27 21.73 13.27 0 106.18 0 106.18 0 106.18 0 106.18 0 106.18 21.73 199.09 263.79 199.09 263.79 198.75 290 198.75 290 13.27"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#EC1208"
			
 
				+                    points="242.05 106.18 3.15 106.18 28.04 0 266.94 0 242.05 106.18"
			
 
				+                  />
			
 
				+                  <polygon
			
 
				+                    fill="#AA0607"
			
 
				+                    points="28.04 212.36 266.94 212.36 242.05 106.18 3.15 106.18 28.04 212.36"
			
 
				+                  />
			
 
				+                </g>
			
 
				+              </defs>
			
 
				+              <!-- 底图 左右两列矩形 -->
			
 
				+              <g>
			
 
				+                <use xlink:href="#fill-rect" x="50" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="150" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="550" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="650" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="50" y="400" />
			
 
				+                <use xlink:href="#fill-rect" x="150" y="400" />
			
 
				+                <use xlink:href="#fill-rect" x="550" y="400" />
			
 
				+                <use xlink:href="#fill-rect" x="650" y="400" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上矩形 全部 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'fill' || panel.type == 'bottom'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+              >
			
 
				+                <use xlink:href="#fill-rect" x="250" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="350" y="50" />
			
 
				+                <use xlink:href="#fill-rect" x="450" y="50" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上矩形 一半 -->
			
 
				+              <g
			
 
				+                :style="'display: ' + (panel.type == 'top' ? 'block' : 'none')"
			
 
				+              >
			
 
				+                <use xlink:href="#none-rect" x="250" y="270" />
			
 
				+                <use xlink:href="#none-rect" x="350" y="270" />
			
 
				+                <use xlink:href="#none-rect" x="450" y="270" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上逆变器 深蓝色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'top' && panel.state == 'deepblue'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-deepblue" x="250" y="50" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上逆变器 蓝色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'top' && panel.state == 'blue'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-blue" x="250" y="50" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上逆变器 红色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'top' && panel.state == 'red'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-red" x="250" y="50" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间上文字 -->
			
 
				+              <g
			
 
				+                :style="'display: ' + (panel.type == 'top' ? 'block' : 'none')"
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <text
			
 
				+                  x="365"
			
 
				+                  y="220"
			
 
				+                  fill="#ffffff"
			
 
				+                  font-size="150"
			
 
				+                  text-anchor="middle"
			
 
				+                >
			
 
				+                  {{ panel.code }}
			
 
				+                </text>
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下矩形 全部 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'fill' || panel.type == 'top'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+              >
			
 
				+                <use xlink:href="#fill-rect" x="250" y="400" />
			
 
				+                <use xlink:href="#fill-rect" x="350" y="400" />
			
 
				+                <use xlink:href="#fill-rect" x="450" y="400" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下矩形 一半 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' + (panel.type == 'bottom' ? 'block' : 'none')
			
 
				+                "
			
 
				+              >
			
 
				+                <use xlink:href="#none-rect" x="250" y="400" />
			
 
				+                <use xlink:href="#none-rect" x="350" y="400" />
			
 
				+                <use xlink:href="#none-rect" x="450" y="400" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下逆变器 深蓝色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'bottom' && panel.state == 'deepblue'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-deepblue" x="250" y="530" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下逆变器 蓝色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'bottom' && panel.state == 'blue'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-blue" x="250" y="530" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下逆变器 红色 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' +
			
 
				+                  (panel.type == 'bottom' && panel.state == 'red'
			
 
				+                    ? 'block'
			
 
				+                    : 'none')
			
 
				+                "
			
 
				+                class="can-click esri-component"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <use xlink:href="#panel-red" x="250" y="530" />
			
 
				+              </g>
			
 
				+
			
 
				+              <!-- 中间下文字 -->
			
 
				+              <g
			
 
				+                :style="
			
 
				+                  'display: ' + (panel.type == 'bottom' ? 'block' : 'none')
			
 
				+                "
			
 
				+                class="can-click"
			
 
				+                @click.prevent="clickEl(panel)"
			
 
				+              >
			
 
				+                <text
			
 
				+                  x="460"
			
 
				+                  y="740"
			
 
				+                  fill="#ffffff"
			
 
				+                  font-size="150"
			
 
				+                  text-anchor="middle"
			
 
				+                >
			
 
				+                  {{ panel.code }}
			
 
				+                </text>
			
 
				+              </g>
			
 
				+            </svg>
			
 
				+            <div v-show="panel.type == 'syz'" class="panel-syz">
			
 
				+              <img :src="syzImg" class="syz-img" />
			
 
				+              <div class="syz-text">升压站</div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+          <!-- <img :src="tempImg" style="width: 800px; height: 700px;"> -->
			
 
				+        </div>
			
 
				+      </template>
			
 
				+    </arcgis>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import arcgis from "./arcgis.vue";
			
 
				+import dataService from "@/helper/data.js";
			
 
				+
			
 
				+export default {
			
 
				+  // 名称
			
 
				+  name: "Map",
			
 
				+  // 使用组件
			
 
				+  components: {
			
 
				+    arcgis,
			
 
				+  },
			
 
				+  props: {
			
 
				+    wpId: {
			
 
				+      type: String,
			
 
				+      default: "",
			
 
				+    },
			
 
				+  },
			
 
				+  // 数据
			
 
				+  data() {
			
 
				+    return {
			
 
				+      wpnumMap: {}, //风机监视数量
			
 
				+      wpInfoMap: {}, //风机详情
			
 
				+      fjmap: [], // 风机名
			
 
				+      sourceId: "",
			
 
				+      arcgisData: {
			
 
				+        mode: "2D", // 模式 2D 3D
			
 
				+        title: "宁夏地图", // 标题
			
 
				+        center: [106.2850, 38.5528], // 初始中心点
			
 
				+        height: 654, // 3D地图初始相机高度
			
 
				+        tilt: 65, // 俯视角
			
 
				+        scale: 15000,
			
 
				+        rotation: 180,
			
 
				+      },
			
 
				+      tempImg: require("@assets/temp1.png"),
			
 
				+      syzImg: require("@assets/png/booster-station.png"),
			
 
				+      showPopup: true,
			
 
				+      panels: 
			
 
				+	  [{"id":"00","type":"top","code":1,"state":"deepblue","line":"top left"},
			
 
				+	  {"id":"01","type":"top","code":2,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"02","type":"top","code":3,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"03","type":"top","code":4,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"04","type":"top","code":5,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"05","type":"top","code":6,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"06","type":"top","code":7,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"07","type":"top","code":8,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"08","type":"top","code":9,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"09","type":"top","code":10,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"10","type":"top","code":11,"state":"deepblue","line":"top left"},
			
 
				+	  {"id":"11","type":"top","code":12,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"12","type":"top","code":13,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"13","type":"top","code":14,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"14","type":"top","code":15,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"15","type":"top","code":16,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"16","type":"top","code":17,"state":"deepblue","line":"top"},
			
 
				+	  {"id":"17","type":"top","code":18,"state":"deepblue","line":"top right"},
			
 
				+	  {"id":"18","type":"top","code":19,"state":"deepblue","line":"top right"}]
			
 
				+    };
			
 
				+  },
			
 
				+  created() {
			
 
				+    let that = this;
			
 
				+    that.sourceId = this.wpId;
			
 
				+    that.$nextTick(() => {});
			
 
				+  },
			
 
				+  // 函数
			
 
				+  methods: {
			
 
				+    when: function () {
			
 
				+      this.$refs.arcgis.addHtmlPoint(
			
 
				+        [106.48638888888888, 38.924166666666665],
			
 
				+        "content",
			
 
				+        400,
			
 
				+        350
			
 
				+      );
			
 
				+    },
			
 
				+    clickMap: function (info) {
			
 
				+      console.log(info);
			
 
				+    },
			
 
				+    clickEl: function (item) {
			
 
				+		let wpId = this.$route.path.split('/').pop(),
			
 
				+			wtId = wpId.split('_')[0] +'01_'+ item.id;
			
 
				+		this.$router.push({
			
 
				+		  path: `/monitor/windsite/inverter-info/`+wpId+`/`+wtId,
			
 
				+		});
			
 
				+    },
			
 
				+  },
			
 
				+  watch: {
			
 
				+    wpId(res) {
			
 
				+      this.sourceId = res;
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+@titleHeight: 40px;
			
 
				+
			
 
				+.map-1 {
			
 
				+  width: 100%;
			
 
				+  height: calc(100vh - 90px);
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+
			
 
				+  .btn-group-tabs {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+  }
			
 
				+
			
 
				+    .panel-box {
			
 
				+        width: 840px;
			
 
				+        padding: 20px;
			
 
				+        display: flex;
			
 
				+        flex-wrap: wrap;
			
 
				+        background: #536268B8;
			
 
				+
			
 
				+        .panel-item {
			
 
				+            width: 80px;
			
 
				+            height: 80px;
			
 
				+            position: relative;
			
 
				+            
			
 
				+            // margin-top: -20px;
			
 
				+            // margin-left: -20px;
			
 
				+
			
 
				+            &.top {
			
 
				+                &::after {
			
 
				+                    top: -3px;
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            &.bottom {
			
 
				+                &::after {
			
 
				+                    bottom: -3px;
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            &.left {
			
 
				+                &::before {
			
 
				+                    left: -3px;
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            &.right {
			
 
				+                &::before {
			
 
				+                    right: -3px;
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            &::after {
			
 
				+                content: '';
			
 
				+                width: 100%;
			
 
				+                height: 6px;
			
 
				+                position: absolute;
			
 
				+                left: 0;
			
 
				+                background: @green;
			
 
				+                opacity: 0;
			
 
				+            }
			
 
				+
			
 
				+            &::before {
			
 
				+                content: '';
			
 
				+                width: 6px;
			
 
				+                height: 100%;
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                background: @green;
			
 
				+                opacity: 0;
			
 
				+            }
			
 
				+
			
 
				+            svg {
			
 
				+                width: 80px;
			
 
				+                height: 80px;
			
 
				+            }
			
 
				+
			
 
				+            .panel-syz {
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+                position: relative;
			
 
				+
			
 
				+                .syz-img {
			
 
				+                    position: absolute;
			
 
				+                    height: 70px;
			
 
				+                    top: -35px;
			
 
				+                    left: -10px;
			
 
				+                }
			
 
				+
			
 
				+                .syz-text {
			
 
				+                    position: absolute;
			
 
				+                    color: @green;
			
 
				+                    font-size: @fontsize-l;
			
 
				+                    width: 100%;
			
 
				+                    text-align: center;
			
 
				+                    left: 0;
			
 
				+                    top: -55px;
			
 
				+                    font-weight: bold;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+  .can-click {
			
 
				+    cursor: pointer;
			
 
				+  }
			
 
				+
			
 
				+  .syz-img {
			
 
				+    width: 65px;
			
 
				+    height: 47px;
			
 
				+
			
 
				+    img {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-title {
			
 
				+    width: 100%;
			
 
				+    background-color: fade(@darkgray, 40%);
			
 
				+    margin-top: 16px;
			
 
				+    padding: 6px;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .panel-title-name {
			
 
				+      color: @green;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      line-height: 0;
			
 
				+      font-size: 0;
			
 
				+
			
 
				+      i,
			
 
				+      span {
			
 
				+        margin: 0 0 0 16px;
			
 
				+        line-height: 0;
			
 
				+        font-size: 13px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .sub-title-item {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      margin-left: 16px;
			
 
				+
			
 
				+      .sub-title {
			
 
				+        font-size: 13px;
			
 
				+        margin-left: 6px;
			
 
				+      }
			
 
				+
			
 
				+      .sub-count {
			
 
				+        font-size: 13px;
			
 
				+        font-weight: 500;
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        height: 31px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-body {
			
 
				+    flex-grow: 1;
			
 
				+    background-color: fade(@darkgray, 20%);
			
 
				+    padding: 8px;
			
 
				+    overflow: auto;
			
 
				+    position: relative;
			
 
				+
			
 
				+    .arcgis-layer {
			
 
				+      z-index: 1;
			
 
				+    }
			
 
				+
			
 
				+    .map-popup-panel {
			
 
				+      width: 760px;
			
 
				+      position: absolute;
			
 
				+      left: 71px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+
			
 
				+      .map-popup-panel-header {
			
 
				+        width: 100%;
			
 
				+        background: fade(#152221, 90%);
			
 
				+        display: flex;
			
 
				+
			
 
				+        .map-popup-panel-title {
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          position: relative;
			
 
				+
			
 
				+          &::before,
			
 
				+          &::after {
			
 
				+            position: absolute;
			
 
				+            width: calc(50% - 6px);
			
 
				+            bottom: 0;
			
 
				+            border-bottom: 2px solid @green;
			
 
				+          }
			
 
				+
			
 
				+          &::before {
			
 
				+            content: "";
			
 
				+            left: 0;
			
 
				+          }
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            right: 0;
			
 
				+          }
			
 
				+
			
 
				+          span {
			
 
				+            position: absolute;
			
 
				+            width: 11.3px;
			
 
				+            height: 11.3px;
			
 
				+            border-left: 2px solid @green;
			
 
				+            border-top: 2px solid @green;
			
 
				+            left: calc(50% - 5.65px);
			
 
				+            bottom: -3px;
			
 
				+            transform: rotate(45deg);
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-date {
			
 
				+          flex-grow: 1;
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          text-align: right;
			
 
				+          border-bottom: 2px solid @green;
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-back {
			
 
				+          margin-left: auto;
			
 
				+          width: 54px;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+          justify-content: center;
			
 
				+          position: relative;
			
 
				+          cursor: pointer;
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            position: absolute;
			
 
				+            left: 0;
			
 
				+            height: 50%;
			
 
				+            border-left: 1px solid @gray;
			
 
				+            top: 25%;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .map-popup-panel-body {
			
 
				+        background: fade(#152221, 75%);
			
 
				+        border: 1px solid fade(@darkgray, 40);
			
 
				+        border-top: 0px;
			
 
				+
			
 
				+        .table-form {
			
 
				+          .text,
			
 
				+          .unit {
			
 
				+            font-weight: 400;
			
 
				+          }
			
 
				+
			
 
				+          .unit {
			
 
				+            min-width: auto;
			
 
				+          }
			
 
				+
			
 
				+          .value,
			
 
				+          .unit {
			
 
				+            text-align: left;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .map-tool {
			
 
				+      position: absolute;
			
 
				+      right: 22px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+      background: #152221af;
			
 
				+      padding: 18px 14px;
			
 
				+
			
 
				+      .m-btn {
			
 
				+        width: 124px;
			
 
				+        height: 44px;
			
 
				+        background: #152221bf;
			
 
				+        border: 1px solid #152221bf;
			
 
				+        color: #ffffff;
			
 
				+        transition: all 0.3s;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        justify-content: center;
			
 
				+        cursor: pointer;
			
 
				+
			
 
				+        &:hover,
			
 
				+        &.active {
			
 
				+          background: #05bb4c33;
			
 
				+          border: 1px solid #05bb4c;
			
 
				+          color: #05bb4c;
			
 
				+        }
			
 
				+
			
 
				+        + .m-btn {
			
 
				+          margin-top: 16px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/arcgis/QS_FDC.vue
+++ b/src/components/arcgis/QS_FDC.vue
@@ -0,0 +1,502 @@
 
				+<template>
			
 
				+  <div class="map-1" style="width: 100%; height: 100%">
			
 
				+    <arcgis
			
 
				+      class="arcgis-layer"
			
 
				+      @when="when"
			
 
				+      ref="arcgis"
			
 
				+      :data="arcgisData"
			
 
				+      @clickMap="clickMap"
			
 
				+    >
			
 
				+      <template
			
 
				+        v-for="(fan, index) of fans"
			
 
				+        :key="index"
			
 
				+        v-slot:[fan.attributes.code]
			
 
				+      >
			
 
				+        <svg
			
 
				+          v-if="fan.attributes.code != '升压站'"
			
 
				+          @click="clickFan(fan.attributes.code)"
			
 
				+          class="can-click esri-component"
			
 
				+          version="1.1"
			
 
				+          xmlns="http://www.w3.org/2000/svg"
			
 
				+          xmlns:xlink="http://www.w3.org/1999/xlink"
			
 
				+          viewBox="0 0 200 240"
			
 
				+          enable-background="new 0 0 200 240"
			
 
				+          xml:space="preserve"
			
 
				+          width="66"
			
 
				+          height="66"
			
 
				+        >
			
 
				+          <!-- 底座 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][2]"
			
 
				+              d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
			
 
				+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 后面的脑袋 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][0]"
			
 
				+              d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
			
 
				+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 柱 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][0]"
			
 
				+              d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 风扇 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][1]"
			
 
				+              d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z"
			
 
				+            />
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][1]"
			
 
				+              d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
			
 
				+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z"
			
 
				+            />
			
 
				+            <animateTransform
			
 
				+              v-if="fan.attributes.rotate"
			
 
				+              attributeName="transform"
			
 
				+              attributeType="XML"
			
 
				+              type="rotate"
			
 
				+              from="0 100 82"
			
 
				+              to="359 100 82"
			
 
				+              :dur="fan.attributes.dur + 's'"
			
 
				+              repeatCount="indefinite"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 前面的尖 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][2]"
			
 
				+              d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
			
 
				+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 文字 -->
			
 
				+          <g>
			
 
				+            <text
			
 
				+              x="100"
			
 
				+              y="240"
			
 
				+              fill="#ffffff"
			
 
				+              font-size="40"
			
 
				+              text-anchor="middle"
			
 
				+              alignment-baseline="baseline"
			
 
				+            >
			
 
				+              {{ fan.attributes.code }}
			
 
				+            </text>
			
 
				+          </g>
			
 
				+        </svg>
			
 
				+        <div v-if="fan.attributes.code == '升压站'">
			
 
				+          <div class="syz-img">
			
 
				+            <img :src="syzImg" />
			
 
				+          </div>
			
 
				+          <div class="white font-sm mr-t-8" style="text-align: center">
			
 
				+            {{ fan.attributes.code }}
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </template>
			
 
				+    </arcgis>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import arcgis from "./arcgis.vue";
			
 
				+import dataService from "@/helper/data.js";
			
 
				+
			
 
				+export default {
			
 
				+  // 名称
			
 
				+  name: "Map",
			
 
				+  // 使用组件
			
 
				+  components: {
			
 
				+    arcgis,
			
 
				+  },
			
 
				+  props: {
			
 
				+    wpId: {
			
 
				+      type: String,
			
 
				+      default: "",
			
 
				+    },
			
 
				+  },
			
 
				+  // 数据
			
 
				+  data() {
			
 
				+    return {
			
 
				+      wpnumMap: {}, //风机监视数量
			
 
				+      wpInfoMap: {}, //风机详情
			
 
				+      fjmap: [], // 风机名
			
 
				+      sourceId: "",
			
 
				+      arcgisData: {
			
 
				+        mode: "2D", // 模式 2D 3D
			
 
				+        title: "宁夏地图", // 标题
			
 
				+        center: [107.217636108398, 37.5134917819943], // 初始中心点 106.230909, 38.487193
			
 
				+        height: 654, // 3D地图初始相机高度
			
 
				+        tilt: 65, // 俯视角
			
 
				+        scale: 55000,
			
 
				+        rotation: -45,
			
 
				+        ox: -600,
			
 
				+        oy: -50,
			
 
				+      },
			
 
				+      showPopup: false,
			
 
				+      mapToolIndex: 0,
			
 
				+      fans: [],
			
 
				+      colors: {
			
 
				+        0: ["#05bb4c", "#4ad476", "#9fedb2"],
			
 
				+        1: ["#4b55ae", "#959dc7", "#d3d6e0"],
			
 
				+        2: ["#BA3237", "#d4807d", "#eddad8"],
			
 
				+        3: ["#606769", "#757575", "#AFAFAF"],
			
 
				+        4: ["#e17e23", "#fabf78", "#ffebcc"],
			
 
				+        5: ["#c531c7", "#e080dc", "#fadef7"],
			
 
				+        6: ["#c531c7", "#e080dc", "#fadef7"],
			
 
				+      },
			
 
				+      syzImg: require("@assets/png/booster-station.png"),
			
 
				+    };
			
 
				+  },
			
 
				+  created() {
			
 
				+    let that = this;
			
 
				+    that.sourceId = this.wpId;
			
 
				+    that.$nextTick(() => {
			
 
				+      that.requestData();
			
 
				+    });
			
 
				+  },
			
 
				+  // 函数
			
 
				+  methods: {
			
 
				+    select(res) {
			
 
				+      this.$router.replace({
			
 
				+        path: `/monitor/windsite/map/${res.code}`,
			
 
				+      });
			
 
				+    },
			
 
				+    // 风机状态监视
			
 
				+    requestData() {
			
 
				+      let that = this;
			
 
				+      that.API.requestData({
			
 
				+        method: "POST",
			
 
				+        subUrl: "monitor/findGeneralAppearance",
			
 
				+        data: {
			
 
				+          wpId: that.wpId,
			
 
				+        },
			
 
				+        success(res) {
			
 
				+          if (res.code == 200) {
			
 
				+            that.wpnumMap = res.data.fczbmap.jczbmap;
			
 
				+            that.wpInfoMap = res.data.wxssmap;
			
 
				+            that.fjmap = res.data.fjmap[0];
			
 
				+			that.when();
			
 
				+          }
			
 
				+        },
			
 
				+      });
			
 
				+    },
			
 
				+    when: function () {
			
 
				+      let jsonObj = dataService.get("arcgis-qs");
			
 
				+      this.fans = jsonObj;
			
 
				+      jsonObj.forEach((item) => {
			
 
				+        let obj = this.fjmap.find((t) => {
			
 
				+          let wtid = t.wtId.replace("01_", "");
			
 
				+          if (wtid == item.attributes.code) return t;
			
 
				+        });
			
 
				+        if (obj) {
			
 
				+          item.attributes.state = String(obj.fjzt);
			
 
				+        } else {
			
 
				+          item.attributes.state = "4";
			
 
				+        }
			
 
				+        switch (item.attributes.state) {
			
 
				+          case "0": //待机
			
 
				+            item.attributes.rotate = false; // 转
			
 
				+            item.attributes.dur = 8; // 转一圈时间
			
 
				+            break;
			
 
				+          case "1": //运行
			
 
				+            item.attributes.rotate = true; // 转
			
 
				+            item.attributes.dur = 2; // 转一圈时间
			
 
				+            break;
			
 
				+          case "2": //故障
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "3": //中断
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "4": //维护
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "5": //限电
			
 
				+            item.attributes.rotate = true; // 转
			
 
				+            item.attributes.dur = 6;
			
 
				+            break;
			
 
				+          case "6": //停机
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          default:
			
 
				+            item.attributes.rotate = false;
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+        }
			
 
				+        this.$refs.arcgis.addHtmlPoint(
			
 
				+          [item.geometry.x, item.geometry.y],
			
 
				+          item.attributes.code,
			
 
				+          33,
			
 
				+          50,
			
 
				+          false
			
 
				+        );
			
 
				+      });
			
 
				+      let lineJsonObj = dataService.get("arcgis-qs-line");
			
 
				+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
			
 
				+    },
			
 
				+    clickMap: function (info) {
			
 
				+      console.log(info);
			
 
				+    },
			
 
				+    clickFan: function (code) {
			
 
				+      let wtId = code.replace("G", "G01_");
			
 
				+      this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
			
 
				+    },
			
 
				+    popupBack: function () {
			
 
				+      this.showPopup = false;
			
 
				+    },
			
 
				+    clickMapTool: function (index) {
			
 
				+      //   this.mapToolIndex = index;
			
 
				+      this.showPopup = !this.showPopup;
			
 
				+    },
			
 
				+  },
			
 
				+  watch: {
			
 
				+    wpId(res) {
			
 
				+      this.sourceId = res;
			
 
				+      if (res) {
			
 
				+        this.requestData();
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+@titleHeight: 40px;
			
 
				+
			
 
				+.map-1 {
			
 
				+  width: 100%;
			
 
				+  height: calc(100vh - 90px);
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+
			
 
				+  .btn-group-tabs {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+  }
			
 
				+
			
 
				+  .can-click {
			
 
				+    cursor: pointer;
			
 
				+  }
			
 
				+
			
 
				+  .syz-img {
			
 
				+    width: 65px;
			
 
				+    height: 47px;
			
 
				+
			
 
				+    img {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-title {
			
 
				+    width: 100%;
			
 
				+    background-color: fade(@darkgray, 40%);
			
 
				+    margin-top: 16px;
			
 
				+    padding: 6px;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .panel-title-name {
			
 
				+      color: @green;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      line-height: 0;
			
 
				+      font-size: 0;
			
 
				+
			
 
				+      i,
			
 
				+      span {
			
 
				+        margin: 0 0 0 16px;
			
 
				+        line-height: 0;
			
 
				+        font-size: 13px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .sub-title-item {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      margin-left: 16px;
			
 
				+
			
 
				+      .sub-title {
			
 
				+        font-size: 13px;
			
 
				+        margin-left: 6px;
			
 
				+      }
			
 
				+
			
 
				+      .sub-count {
			
 
				+        font-size: 13px;
			
 
				+        font-weight: 500;
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        height: 31px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-body {
			
 
				+    flex-grow: 1;
			
 
				+    background-color: fade(@darkgray, 20%);
			
 
				+    padding: 8px;
			
 
				+    overflow: auto;
			
 
				+    position: relative;
			
 
				+
			
 
				+    .arcgis-layer {
			
 
				+      z-index: 1;
			
 
				+    }
			
 
				+
			
 
				+    .map-popup-panel {
			
 
				+      width: 760px;
			
 
				+      position: absolute;
			
 
				+      left: 71px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+
			
 
				+      .map-popup-panel-header {
			
 
				+        width: 100%;
			
 
				+        background: fade(#152221, 90%);
			
 
				+        display: flex;
			
 
				+
			
 
				+        .map-popup-panel-title {
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          position: relative;
			
 
				+
			
 
				+          &::before,
			
 
				+          &::after {
			
 
				+            position: absolute;
			
 
				+            width: calc(50% - 6px);
			
 
				+            bottom: 0;
			
 
				+            border-bottom: 2px solid @green;
			
 
				+          }
			
 
				+
			
 
				+          &::before {
			
 
				+            content: "";
			
 
				+            left: 0;
			
 
				+          }
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            right: 0;
			
 
				+          }
			
 
				+
			
 
				+          span {
			
 
				+            position: absolute;
			
 
				+            width: 11.3px;
			
 
				+            height: 11.3px;
			
 
				+            border-left: 2px solid @green;
			
 
				+            border-top: 2px solid @green;
			
 
				+            left: calc(50% - 5.65px);
			
 
				+            bottom: -3px;
			
 
				+            transform: rotate(45deg);
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-date {
			
 
				+          flex-grow: 1;
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          text-align: right;
			
 
				+          border-bottom: 2px solid @green;
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-back {
			
 
				+          margin-left: auto;
			
 
				+          width: 54px;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+          justify-content: center;
			
 
				+          position: relative;
			
 
				+          cursor: pointer;
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            position: absolute;
			
 
				+            left: 0;
			
 
				+            height: 50%;
			
 
				+            border-left: 1px solid @gray;
			
 
				+            top: 25%;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .map-popup-panel-body {
			
 
				+        background: fade(#152221, 75%);
			
 
				+        border: 1px solid fade(@darkgray, 40);
			
 
				+        border-top: 0px;
			
 
				+
			
 
				+        .table-form {
			
 
				+          .text,
			
 
				+          .unit {
			
 
				+            font-weight: 400;
			
 
				+          }
			
 
				+
			
 
				+          .unit {
			
 
				+            min-width: auto;
			
 
				+          }
			
 
				+
			
 
				+          .value,
			
 
				+          .unit {
			
 
				+            text-align: left;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .map-tool {
			
 
				+      position: absolute;
			
 
				+      right: 22px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+      background: #152221af;
			
 
				+      padding: 18px 14px;
			
 
				+
			
 
				+      .m-btn {
			
 
				+        width: 124px;
			
 
				+        height: 44px;
			
 
				+        background: #152221bf;
			
 
				+        border: 1px solid #152221bf;
			
 
				+        color: #ffffff;
			
 
				+        transition: all 0.3s;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        justify-content: center;
			
 
				+        cursor: pointer;
			
 
				+
			
 
				+        &:hover,
			
 
				+        &.active {
			
 
				+          background: #05bb4c33;
			
 
				+          border: 1px solid #05bb4c;
			
 
				+          color: #05bb4c;
			
 
				+        }
			
 
				+
			
 
				+        + .m-btn {
			
 
				+          margin-top: 16px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/arcgis/SBQ_FDC.vue
+++ b/src/components/arcgis/SBQ_FDC.vue
@@ -0,0 +1,502 @@
 
				+<template>
			
 
				+  <div class="map-1" style="width: 100%; height: 100%">
			
 
				+    <arcgis
			
 
				+      class="arcgis-layer"
			
 
				+      @when="when"
			
 
				+      ref="arcgis"
			
 
				+      :data="arcgisData"
			
 
				+      @clickMap="clickMap"
			
 
				+    >
			
 
				+      <template
			
 
				+        v-for="(fan, index) of fans"
			
 
				+        :key="index"
			
 
				+        v-slot:[fan.attributes.code]
			
 
				+      >
			
 
				+        <svg
			
 
				+          v-if="fan.attributes.code != '升压站'"
			
 
				+          @click="clickFan(fan.attributes.code)"
			
 
				+          class="can-click esri-component"
			
 
				+          version="1.1"
			
 
				+          xmlns="http://www.w3.org/2000/svg"
			
 
				+          xmlns:xlink="http://www.w3.org/1999/xlink"
			
 
				+          viewBox="0 0 200 240"
			
 
				+          enable-background="new 0 0 200 240"
			
 
				+          xml:space="preserve"
			
 
				+          width="66"
			
 
				+          height="66"
			
 
				+        >
			
 
				+          <!-- 底座 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][2]"
			
 
				+              d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
			
 
				+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 后面的脑袋 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][0]"
			
 
				+              d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
			
 
				+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 柱 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][0]"
			
 
				+              d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 风扇 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][1]"
			
 
				+              d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z"
			
 
				+            />
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][1]"
			
 
				+              d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
			
 
				+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z"
			
 
				+            />
			
 
				+            <animateTransform
			
 
				+              v-if="fan.attributes.rotate"
			
 
				+              attributeName="transform"
			
 
				+              attributeType="XML"
			
 
				+              type="rotate"
			
 
				+              from="0 100 82"
			
 
				+              to="359 100 82"
			
 
				+              :dur="fan.attributes.dur + 's'"
			
 
				+              repeatCount="indefinite"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 前面的尖 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][2]"
			
 
				+              d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
			
 
				+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 文字 -->
			
 
				+          <g>
			
 
				+            <text
			
 
				+              x="100"
			
 
				+              y="240"
			
 
				+              fill="#ffffff"
			
 
				+              font-size="40"
			
 
				+              text-anchor="middle"
			
 
				+              alignment-baseline="baseline"
			
 
				+            >
			
 
				+              {{ fan.attributes.code }}
			
 
				+            </text>
			
 
				+          </g>
			
 
				+        </svg>
			
 
				+        <div v-if="fan.attributes.code == '升压站'">
			
 
				+          <div class="syz-img">
			
 
				+            <img :src="syzImg" />
			
 
				+          </div>
			
 
				+          <div class="white font-sm mr-t-8" style="text-align: center">
			
 
				+            {{ fan.attributes.code }}
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </template>
			
 
				+    </arcgis>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import arcgis from "./arcgis.vue";
			
 
				+import dataService from "@/helper/data.js";
			
 
				+
			
 
				+export default {
			
 
				+  // 名称
			
 
				+  name: "Map",
			
 
				+  // 使用组件
			
 
				+  components: {
			
 
				+    arcgis,
			
 
				+  },
			
 
				+  props: {
			
 
				+    wpId: {
			
 
				+      type: String,
			
 
				+      default: "",
			
 
				+    },
			
 
				+  },
			
 
				+  // 数据
			
 
				+  data() {
			
 
				+    return {
			
 
				+      wpnumMap: {}, //风机监视数量
			
 
				+      wpInfoMap: {}, //风机详情
			
 
				+      fjmap: [], // 风机名
			
 
				+      sourceId: "",
			
 
				+      arcgisData: {
			
 
				+        mode: "2D", // 模式 2D 3D
			
 
				+        title: "宁夏地图", // 标题
			
 
				+        center: [106.4515667, 37.60171667], // 初始中心点 106.230909, 38.487193
			
 
				+        height: 654, // 3D地图初始相机高度
			
 
				+        tilt: 65, // 俯视角
			
 
				+        scale: 120000,
			
 
				+        rotation: -45,
			
 
				+        ox: -600,
			
 
				+        oy: -50,
			
 
				+      },
			
 
				+      showPopup: false,
			
 
				+      mapToolIndex: 0,
			
 
				+      fans: [],
			
 
				+      colors: {
			
 
				+        0: ["#05bb4c", "#4ad476", "#9fedb2"],
			
 
				+        1: ["#4b55ae", "#959dc7", "#d3d6e0"],
			
 
				+        2: ["#BA3237", "#d4807d", "#eddad8"],
			
 
				+        3: ["#606769", "#757575", "#AFAFAF"],
			
 
				+        4: ["#e17e23", "#fabf78", "#ffebcc"],
			
 
				+        5: ["#c531c7", "#e080dc", "#fadef7"],
			
 
				+        6: ["#c531c7", "#e080dc", "#fadef7"],
			
 
				+      },
			
 
				+      syzImg: require("@assets/png/booster-station.png"),
			
 
				+    };
			
 
				+  },
			
 
				+  created() {
			
 
				+    let that = this;
			
 
				+    that.sourceId = this.wpId;
			
 
				+    that.$nextTick(() => {
			
 
				+      that.requestData();
			
 
				+    });
			
 
				+  },
			
 
				+  // 函数
			
 
				+  methods: {
			
 
				+    select(res) {
			
 
				+      this.$router.replace({
			
 
				+        path: `/monitor/windsite/map/${res.code}`,
			
 
				+      });
			
 
				+    },
			
 
				+    // 风机状态监视
			
 
				+    requestData() {
			
 
				+      let that = this;
			
 
				+      that.API.requestData({
			
 
				+        method: "POST",
			
 
				+        subUrl: "monitor/findGeneralAppearance",
			
 
				+        data: {
			
 
				+          wpId: that.wpId,
			
 
				+        },
			
 
				+        success(res) {
			
 
				+          if (res.code == 200) {
			
 
				+            that.wpnumMap = res.data.fczbmap.jczbmap;
			
 
				+            that.wpInfoMap = res.data.wxssmap;
			
 
				+            that.fjmap = res.data.fjmap[0];
			
 
				+			that.when();
			
 
				+          }
			
 
				+        },
			
 
				+      });
			
 
				+    },
			
 
				+    when: function () {
			
 
				+      let jsonObj = dataService.get("arcgis-sbq");
			
 
				+      this.fans = jsonObj;
			
 
				+      jsonObj.forEach((item) => {
			
 
				+        let obj = this.fjmap.find((t) => {
			
 
				+          let wtid = t.wtId.replace("01_", "");
			
 
				+          if (wtid == item.attributes.code) return t;
			
 
				+        });
			
 
				+        if (obj) {
			
 
				+          item.attributes.state = String(obj.fjzt);
			
 
				+        } else {
			
 
				+          item.attributes.state = "4";
			
 
				+        }
			
 
				+        switch (item.attributes.state) {
			
 
				+          case "0": //待机
			
 
				+            item.attributes.rotate = false; // 转
			
 
				+            item.attributes.dur = 8; // 转一圈时间
			
 
				+            break;
			
 
				+          case "1": //运行
			
 
				+            item.attributes.rotate = true; // 转
			
 
				+            item.attributes.dur = 2; // 转一圈时间
			
 
				+            break;
			
 
				+          case "2": //故障
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "3": //中断
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "4": //维护
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "5": //限电
			
 
				+            item.attributes.rotate = true; // 转
			
 
				+            item.attributes.dur = 6;
			
 
				+            break;
			
 
				+          case "6": //停机
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          default:
			
 
				+            item.attributes.rotate = false;
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+        }
			
 
				+        this.$refs.arcgis.addHtmlPoint(
			
 
				+          [item.geometry.x, item.geometry.y],
			
 
				+          item.attributes.code,
			
 
				+          33,
			
 
				+          50,
			
 
				+          false
			
 
				+        );
			
 
				+      });
			
 
				+      let lineJsonObj = dataService.get("arcgis-sbq-line");
			
 
				+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
			
 
				+    },
			
 
				+    clickMap: function (info) {
			
 
				+      console.log(info);
			
 
				+    },
			
 
				+    clickFan: function (code) {
			
 
				+      let wtId = code.replace("G", "G01_");
			
 
				+      this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
			
 
				+    },
			
 
				+    popupBack: function () {
			
 
				+      this.showPopup = false;
			
 
				+    },
			
 
				+    clickMapTool: function (index) {
			
 
				+      //   this.mapToolIndex = index;
			
 
				+      this.showPopup = !this.showPopup;
			
 
				+    },
			
 
				+  },
			
 
				+  watch: {
			
 
				+    wpId(res) {
			
 
				+      this.sourceId = res;
			
 
				+      if (res) {
			
 
				+        this.requestData();
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+@titleHeight: 40px;
			
 
				+
			
 
				+.map-1 {
			
 
				+  width: 100%;
			
 
				+  height: calc(100vh - 90px);
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+
			
 
				+  .btn-group-tabs {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+  }
			
 
				+
			
 
				+  .can-click {
			
 
				+    cursor: pointer;
			
 
				+  }
			
 
				+
			
 
				+  .syz-img {
			
 
				+    width: 65px;
			
 
				+    height: 47px;
			
 
				+
			
 
				+    img {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-title {
			
 
				+    width: 100%;
			
 
				+    background-color: fade(@darkgray, 40%);
			
 
				+    margin-top: 16px;
			
 
				+    padding: 6px;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .panel-title-name {
			
 
				+      color: @green;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      line-height: 0;
			
 
				+      font-size: 0;
			
 
				+
			
 
				+      i,
			
 
				+      span {
			
 
				+        margin: 0 0 0 16px;
			
 
				+        line-height: 0;
			
 
				+        font-size: 13px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .sub-title-item {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      margin-left: 16px;
			
 
				+
			
 
				+      .sub-title {
			
 
				+        font-size: 13px;
			
 
				+        margin-left: 6px;
			
 
				+      }
			
 
				+
			
 
				+      .sub-count {
			
 
				+        font-size: 13px;
			
 
				+        font-weight: 500;
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        height: 31px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-body {
			
 
				+    flex-grow: 1;
			
 
				+    background-color: fade(@darkgray, 20%);
			
 
				+    padding: 8px;
			
 
				+    overflow: auto;
			
 
				+    position: relative;
			
 
				+
			
 
				+    .arcgis-layer {
			
 
				+      z-index: 1;
			
 
				+    }
			
 
				+
			
 
				+    .map-popup-panel {
			
 
				+      width: 760px;
			
 
				+      position: absolute;
			
 
				+      left: 71px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+
			
 
				+      .map-popup-panel-header {
			
 
				+        width: 100%;
			
 
				+        background: fade(#152221, 90%);
			
 
				+        display: flex;
			
 
				+
			
 
				+        .map-popup-panel-title {
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          position: relative;
			
 
				+
			
 
				+          &::before,
			
 
				+          &::after {
			
 
				+            position: absolute;
			
 
				+            width: calc(50% - 6px);
			
 
				+            bottom: 0;
			
 
				+            border-bottom: 2px solid @green;
			
 
				+          }
			
 
				+
			
 
				+          &::before {
			
 
				+            content: "";
			
 
				+            left: 0;
			
 
				+          }
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            right: 0;
			
 
				+          }
			
 
				+
			
 
				+          span {
			
 
				+            position: absolute;
			
 
				+            width: 11.3px;
			
 
				+            height: 11.3px;
			
 
				+            border-left: 2px solid @green;
			
 
				+            border-top: 2px solid @green;
			
 
				+            left: calc(50% - 5.65px);
			
 
				+            bottom: -3px;
			
 
				+            transform: rotate(45deg);
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-date {
			
 
				+          flex-grow: 1;
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          text-align: right;
			
 
				+          border-bottom: 2px solid @green;
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-back {
			
 
				+          margin-left: auto;
			
 
				+          width: 54px;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+          justify-content: center;
			
 
				+          position: relative;
			
 
				+          cursor: pointer;
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            position: absolute;
			
 
				+            left: 0;
			
 
				+            height: 50%;
			
 
				+            border-left: 1px solid @gray;
			
 
				+            top: 25%;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .map-popup-panel-body {
			
 
				+        background: fade(#152221, 75%);
			
 
				+        border: 1px solid fade(@darkgray, 40);
			
 
				+        border-top: 0px;
			
 
				+
			
 
				+        .table-form {
			
 
				+          .text,
			
 
				+          .unit {
			
 
				+            font-weight: 400;
			
 
				+          }
			
 
				+
			
 
				+          .unit {
			
 
				+            min-width: auto;
			
 
				+          }
			
 
				+
			
 
				+          .value,
			
 
				+          .unit {
			
 
				+            text-align: left;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .map-tool {
			
 
				+      position: absolute;
			
 
				+      right: 22px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+      background: #152221af;
			
 
				+      padding: 18px 14px;
			
 
				+
			
 
				+      .m-btn {
			
 
				+        width: 124px;
			
 
				+        height: 44px;
			
 
				+        background: #152221bf;
			
 
				+        border: 1px solid #152221bf;
			
 
				+        color: #ffffff;
			
 
				+        transition: all 0.3s;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        justify-content: center;
			
 
				+        cursor: pointer;
			
 
				+
			
 
				+        &:hover,
			
 
				+        &.active {
			
 
				+          background: #05bb4c33;
			
 
				+          border: 1px solid #05bb4c;
			
 
				+          color: #05bb4c;
			
 
				+        }
			
 
				+
			
 
				+        + .m-btn {
			
 
				+          margin-top: 16px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/arcgis/XH_GDC.vue
+++ b/src/components/arcgis/XH_GDC.vue
--- a/src/components/arcgis/XS_FDC.vue
+++ b/src/components/arcgis/XS_FDC.vue
@@ -0,0 +1,502 @@
 
				+<template>
			
 
				+  <div class="map-1" style="width: 100%; height: 100%">
			
 
				+    <arcgis
			
 
				+      class="arcgis-layer"
			
 
				+      @when="when"
			
 
				+      ref="arcgis"
			
 
				+      :data="arcgisData"
			
 
				+      @clickMap="clickMap"
			
 
				+    >
			
 
				+      <template
			
 
				+        v-for="(fan, index) of fans"
			
 
				+        :key="index"
			
 
				+        v-slot:[fan.attributes.code]
			
 
				+      >
			
 
				+        <svg
			
 
				+          v-if="fan.attributes.code != '升压站'"
			
 
				+          @click="clickFan(fan.attributes.code)"
			
 
				+          class="can-click esri-component"
			
 
				+          version="1.1"
			
 
				+          xmlns="http://www.w3.org/2000/svg"
			
 
				+          xmlns:xlink="http://www.w3.org/1999/xlink"
			
 
				+          viewBox="0 0 200 240"
			
 
				+          enable-background="new 0 0 200 240"
			
 
				+          xml:space="preserve"
			
 
				+          width="66"
			
 
				+          height="66"
			
 
				+        >
			
 
				+          <!-- 底座 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][2]"
			
 
				+              d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
			
 
				+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 后面的脑袋 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][0]"
			
 
				+              d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
			
 
				+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 柱 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][0]"
			
 
				+              d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 风扇 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][1]"
			
 
				+              d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z"
			
 
				+            />
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][1]"
			
 
				+              d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
			
 
				+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z"
			
 
				+            />
			
 
				+            <animateTransform
			
 
				+              v-if="fan.attributes.rotate"
			
 
				+              attributeName="transform"
			
 
				+              attributeType="XML"
			
 
				+              type="rotate"
			
 
				+              from="0 100 82"
			
 
				+              to="359 100 82"
			
 
				+              :dur="fan.attributes.dur + 's'"
			
 
				+              repeatCount="indefinite"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 前面的尖 -->
			
 
				+          <g>
			
 
				+            <path
			
 
				+              fill-rule="evenodd"
			
 
				+              clip-rule="evenodd"
			
 
				+              :fill="colors[fan.attributes.state][2]"
			
 
				+              d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
			
 
				+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z"
			
 
				+            />
			
 
				+          </g>
			
 
				+          <!-- 文字 -->
			
 
				+          <g>
			
 
				+            <text
			
 
				+              x="100"
			
 
				+              y="240"
			
 
				+              fill="#ffffff"
			
 
				+              font-size="40"
			
 
				+              text-anchor="middle"
			
 
				+              alignment-baseline="baseline"
			
 
				+            >
			
 
				+              {{ fan.attributes.code }}
			
 
				+            </text>
			
 
				+          </g>
			
 
				+        </svg>
			
 
				+        <div v-if="fan.attributes.code == '升压站'">
			
 
				+          <div class="syz-img">
			
 
				+            <img :src="syzImg" />
			
 
				+          </div>
			
 
				+          <div class="white font-sm mr-t-8" style="text-align: center">
			
 
				+            {{ fan.attributes.code }}
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </template>
			
 
				+    </arcgis>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import arcgis from "./arcgis.vue";
			
 
				+import dataService from "@/helper/data.js";
			
 
				+
			
 
				+export default {
			
 
				+  // 名称
			
 
				+  name: "Map",
			
 
				+  // 使用组件
			
 
				+  components: {
			
 
				+    arcgis,
			
 
				+  },
			
 
				+  props: {
			
 
				+    wpId: {
			
 
				+      type: String,
			
 
				+      default: "",
			
 
				+    },
			
 
				+  },
			
 
				+  // 数据
			
 
				+  data() {
			
 
				+    return {
			
 
				+      wpnumMap: {}, //风机监视数量
			
 
				+      wpInfoMap: {}, //风机详情
			
 
				+      fjmap: [], // 风机名
			
 
				+      sourceId: "",
			
 
				+      arcgisData: {
			
 
				+        mode: "2D", // 模式 2D 3D
			
 
				+        title: "宁夏地图", // 标题
			
 
				+        center: [105.2139616, 37.15630397], // 初始中心点 106.230909, 38.487193
			
 
				+        height: 654, // 3D地图初始相机高度
			
 
				+        tilt: 65, // 俯视角
			
 
				+        scale: 45000,
			
 
				+        rotation: -45,
			
 
				+        ox: -600,
			
 
				+        oy: -50,
			
 
				+      },
			
 
				+      showPopup: false,
			
 
				+      mapToolIndex: 0,
			
 
				+      fans: [],
			
 
				+      colors: {
			
 
				+        0: ["#05bb4c", "#4ad476", "#9fedb2"],
			
 
				+        1: ["#4b55ae", "#959dc7", "#d3d6e0"],
			
 
				+        2: ["#BA3237", "#d4807d", "#eddad8"],
			
 
				+        3: ["#606769", "#757575", "#AFAFAF"],
			
 
				+        4: ["#e17e23", "#fabf78", "#ffebcc"],
			
 
				+        5: ["#c531c7", "#e080dc", "#fadef7"],
			
 
				+        6: ["#c531c7", "#e080dc", "#fadef7"],
			
 
				+      },
			
 
				+      syzImg: require("@assets/png/booster-station.png"),
			
 
				+    };
			
 
				+  },
			
 
				+  created() {
			
 
				+    let that = this;
			
 
				+    that.sourceId = this.wpId;
			
 
				+    that.$nextTick(() => {
			
 
				+      that.requestData();
			
 
				+    });
			
 
				+  },
			
 
				+  // 函数
			
 
				+  methods: {
			
 
				+    select(res) {
			
 
				+      this.$router.replace({
			
 
				+        path: `/monitor/windsite/map/${res.code}`,
			
 
				+      });
			
 
				+    },
			
 
				+    // 风机状态监视
			
 
				+    requestData() {
			
 
				+      let that = this;
			
 
				+      that.API.requestData({
			
 
				+        method: "POST",
			
 
				+        subUrl: "monitor/findGeneralAppearance",
			
 
				+        data: {
			
 
				+          wpId: that.wpId,
			
 
				+        },
			
 
				+        success(res) {
			
 
				+          if (res.code == 200) {
			
 
				+            that.wpnumMap = res.data.fczbmap.jczbmap;
			
 
				+            that.wpInfoMap = res.data.wxssmap;
			
 
				+            that.fjmap = res.data.fjmap[0];
			
 
				+			that.when();
			
 
				+          }
			
 
				+        },
			
 
				+      });
			
 
				+    },
			
 
				+    when: function () {
			
 
				+      let jsonObj = dataService.get("arcgis-xs");
			
 
				+      this.fans = jsonObj;
			
 
				+      jsonObj.forEach((item) => {
			
 
				+        let obj = this.fjmap.find((t) => {
			
 
				+          let wtid = t.wtId.replace("01_", "");
			
 
				+          if (wtid == item.attributes.code) return t;
			
 
				+        });
			
 
				+        if (obj) {
			
 
				+          item.attributes.state = String(obj.fjzt);
			
 
				+        } else {
			
 
				+          item.attributes.state = "4";
			
 
				+        }
			
 
				+        switch (item.attributes.state) {
			
 
				+          case "0": //待机
			
 
				+            item.attributes.rotate = false; // 转
			
 
				+            item.attributes.dur = 8; // 转一圈时间
			
 
				+            break;
			
 
				+          case "1": //运行
			
 
				+            item.attributes.rotate = true; // 转
			
 
				+            item.attributes.dur = 2; // 转一圈时间
			
 
				+            break;
			
 
				+          case "2": //故障
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "3": //中断
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "4": //维护
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          case "5": //限电
			
 
				+            item.attributes.rotate = true; // 转
			
 
				+            item.attributes.dur = 6;
			
 
				+            break;
			
 
				+          case "6": //停机
			
 
				+            item.attributes.rotate = false; // 不转
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+          default:
			
 
				+            item.attributes.rotate = false;
			
 
				+            item.attributes.dur = 8;
			
 
				+            break;
			
 
				+        }
			
 
				+        this.$refs.arcgis.addHtmlPoint(
			
 
				+          [item.geometry.x, item.geometry.y],
			
 
				+          item.attributes.code,
			
 
				+          33,
			
 
				+          50,
			
 
				+          false
			
 
				+        );
			
 
				+      });
			
 
				+      let lineJsonObj = dataService.get("arcgis-xs-line");
			
 
				+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
			
 
				+    },
			
 
				+    clickMap: function (info) {
			
 
				+      console.log(info);
			
 
				+    },
			
 
				+    clickFan: function (code) {
			
 
				+      let wtId = code.replace("G", "G01_");
			
 
				+      this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
			
 
				+    },
			
 
				+    popupBack: function () {
			
 
				+      this.showPopup = false;
			
 
				+    },
			
 
				+    clickMapTool: function (index) {
			
 
				+      //   this.mapToolIndex = index;
			
 
				+      this.showPopup = !this.showPopup;
			
 
				+    },
			
 
				+  },
			
 
				+  watch: {
			
 
				+    wpId(res) {
			
 
				+      this.sourceId = res;
			
 
				+      if (res) {
			
 
				+        this.requestData();
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+@titleHeight: 40px;
			
 
				+
			
 
				+.map-1 {
			
 
				+  width: 100%;
			
 
				+  height: calc(100vh - 90px);
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+
			
 
				+  .btn-group-tabs {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+  }
			
 
				+
			
 
				+  .can-click {
			
 
				+    cursor: pointer;
			
 
				+  }
			
 
				+
			
 
				+  .syz-img {
			
 
				+    width: 65px;
			
 
				+    height: 47px;
			
 
				+
			
 
				+    img {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-title {
			
 
				+    width: 100%;
			
 
				+    background-color: fade(@darkgray, 40%);
			
 
				+    margin-top: 16px;
			
 
				+    padding: 6px;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .panel-title-name {
			
 
				+      color: @green;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      line-height: 0;
			
 
				+      font-size: 0;
			
 
				+
			
 
				+      i,
			
 
				+      span {
			
 
				+        margin: 0 0 0 16px;
			
 
				+        line-height: 0;
			
 
				+        font-size: 13px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .sub-title-item {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      margin-left: 16px;
			
 
				+
			
 
				+      .sub-title {
			
 
				+        font-size: 13px;
			
 
				+        margin-left: 6px;
			
 
				+      }
			
 
				+
			
 
				+      .sub-count {
			
 
				+        font-size: 13px;
			
 
				+        font-weight: 500;
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        height: 31px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .panel-body {
			
 
				+    flex-grow: 1;
			
 
				+    background-color: fade(@darkgray, 20%);
			
 
				+    padding: 8px;
			
 
				+    overflow: auto;
			
 
				+    position: relative;
			
 
				+
			
 
				+    .arcgis-layer {
			
 
				+      z-index: 1;
			
 
				+    }
			
 
				+
			
 
				+    .map-popup-panel {
			
 
				+      width: 760px;
			
 
				+      position: absolute;
			
 
				+      left: 71px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+
			
 
				+      .map-popup-panel-header {
			
 
				+        width: 100%;
			
 
				+        background: fade(#152221, 90%);
			
 
				+        display: flex;
			
 
				+
			
 
				+        .map-popup-panel-title {
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          position: relative;
			
 
				+
			
 
				+          &::before,
			
 
				+          &::after {
			
 
				+            position: absolute;
			
 
				+            width: calc(50% - 6px);
			
 
				+            bottom: 0;
			
 
				+            border-bottom: 2px solid @green;
			
 
				+          }
			
 
				+
			
 
				+          &::before {
			
 
				+            content: "";
			
 
				+            left: 0;
			
 
				+          }
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            right: 0;
			
 
				+          }
			
 
				+
			
 
				+          span {
			
 
				+            position: absolute;
			
 
				+            width: 11.3px;
			
 
				+            height: 11.3px;
			
 
				+            border-left: 2px solid @green;
			
 
				+            border-top: 2px solid @green;
			
 
				+            left: calc(50% - 5.65px);
			
 
				+            bottom: -3px;
			
 
				+            transform: rotate(45deg);
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-date {
			
 
				+          flex-grow: 1;
			
 
				+          padding: 17px 24px;
			
 
				+          font-size: @fontsize-s;
			
 
				+          text-align: right;
			
 
				+          border-bottom: 2px solid @green;
			
 
				+        }
			
 
				+
			
 
				+        .map-popup-panel-back {
			
 
				+          margin-left: auto;
			
 
				+          width: 54px;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+          justify-content: center;
			
 
				+          position: relative;
			
 
				+          cursor: pointer;
			
 
				+
			
 
				+          &::after {
			
 
				+            content: "";
			
 
				+            position: absolute;
			
 
				+            left: 0;
			
 
				+            height: 50%;
			
 
				+            border-left: 1px solid @gray;
			
 
				+            top: 25%;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .map-popup-panel-body {
			
 
				+        background: fade(#152221, 75%);
			
 
				+        border: 1px solid fade(@darkgray, 40);
			
 
				+        border-top: 0px;
			
 
				+
			
 
				+        .table-form {
			
 
				+          .text,
			
 
				+          .unit {
			
 
				+            font-weight: 400;
			
 
				+          }
			
 
				+
			
 
				+          .unit {
			
 
				+            min-width: auto;
			
 
				+          }
			
 
				+
			
 
				+          .value,
			
 
				+          .unit {
			
 
				+            text-align: left;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .map-tool {
			
 
				+      position: absolute;
			
 
				+      right: 22px;
			
 
				+      top: 22px;
			
 
				+      z-index: 2;
			
 
				+      background: #152221af;
			
 
				+      padding: 18px 14px;
			
 
				+
			
 
				+      .m-btn {
			
 
				+        width: 124px;
			
 
				+        height: 44px;
			
 
				+        background: #152221bf;
			
 
				+        border: 1px solid #152221bf;
			
 
				+        color: #ffffff;
			
 
				+        transition: all 0.3s;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        justify-content: center;
			
 
				+        cursor: pointer;
			
 
				+
			
 
				+        &:hover,
			
 
				+        &.active {
			
 
				+          background: #05bb4c33;
			
 
				+          border: 1px solid #05bb4c;
			
 
				+          color: #05bb4c;
			
 
				+        }
			
 
				+
			
 
				+        + .m-btn {
			
 
				+          margin-top: 16px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/arcgis/arcgis.vue
+++ b/src/components/arcgis/arcgis.vue
@@ -0,0 +1,516 @@
 
				+<template>
			
 
				+    <div class="arcgis" :class="{'pointer': pointer}">
			
 
				+        <div id="viewDiv"></div>
			
 
				+        <teleport to=".esri-ui" v-if="teleport">
			
 
				+            <div id="marker">
			
 
				+                <div v-for="(marker, index) of markers" :key="index" v-show="marker.show" 
			
 
				+                    :id="'arcgic-marker-' + marker.slot" class="arcgis-marker" :style="'left: '+marker.x+'px; top: '+marker.y+'px; transform: scale('+marker.scale+')'">
			
 
				+                    <slot :name="marker.slot"></slot>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </teleport>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+    import Map from "@arcgis/core/Map";
			
 
				+    import Basemap from "@arcgis/core/Basemap";
			
 
				+    import Graphic from "@arcgis/core/Graphic";
			
 
				+    import SpatialReference from "@arcgis/core/geometry/SpatialReference";
			
 
				+    import MapView from "@arcgis/core/views/MapView";
			
 
				+    import SceneView from "@arcgis/core/views/SceneView";
			
 
				+    import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
			
 
				+    import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
			
 
				+    import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
			
 
				+    import "@arcgis/core/assets/esri/themes/light/main.css";
			
 
				+
			
 
				+    const mapUrl = "http://10.155.32.4:9080/arcgis/rest/services/nxmap/MapServer"; // ArcMap地址
			
 
				+    // const mapUrl = "http://10.155.32.4:9080/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
			
 
				+    let basemap = null;
			
 
				+    let map = null;
			
 
				+    let view = null;
			
 
				+    let point_graphicsLayer = null;
			
 
				+    let line_graphicsLayer = null;
			
 
				+    let text_graphicsLayer = null;
			
 
				+    let img_graphicsLayer = null;
			
 
				+    let html_graphicsLayer = null;
			
 
				+    let point_graphics = [];
			
 
				+    let line_graphics = [];
			
 
				+    let text_graphics = [];
			
 
				+    let img_graphics = [];
			
 
				+    let html_graphics = [];
			
 
				+
			
 
				+    export default {
			
 
				+        // 名称
			
 
				+        name: "arcgis",
			
 
				+        // 使用组件
			
 
				+        components: {},
			
 
				+        // 传入参数
			
 
				+        props: {
			
 
				+            data: {
			
 
				+                type: Object,
			
 
				+                default: () => {
			
 
				+                    return {
			
 
				+                        mode: "2D", // 模式 2D 3D
			
 
				+                        title: "宁夏地图", // 标题
			
 
				+                        center: [106.230909, 38.487193], // 初始中心点
			
 
				+                        height: 654, // 3D地图初始相机高度
			
 
				+                        tilt: 65, // 俯视角
			
 
				+                        scale: 128000, // 缩放
			
 
				+                        rotation: 0, // 正北顺时针旋转角度
			
 
				+                        ox: 0, // 标记整体偏移
			
 
				+                        oy: 0, // 标记整体偏移
			
 
				+                    }
			
 
				+                },
			
 
				+            }
			
 
				+        },
			
 
				+        // 自定义事件
			
 
				+        emits: {
			
 
				+            when: null, // 地图加载完成
			
 
				+            clickMap: null, // 点击地图(可点击元素)
			
 
				+        },
			
 
				+        // 数据
			
 
				+        data() {
			
 
				+            return {
			
 
				+                fanStateImgMapping: [{
			
 
				+                        name: "待机",
			
 
				+                        code: "0",
			
 
				+                        img: require("@assets/map/fan/green.png")
			
 
				+                    },
			
 
				+                    {
			
 
				+                        name: "运行",
			
 
				+                        code: "1",
			
 
				+                        img: require("@assets/map/fan/blue.png")
			
 
				+                    },
			
 
				+                    {
			
 
				+                        name: "故障",
			
 
				+                        code: "2",
			
 
				+                        img: require("@assets/map/fan/red.png")
			
 
				+                    },
			
 
				+                    {
			
 
				+                        name: "离线",
			
 
				+                        code: "3",
			
 
				+                        img: require("@assets/map/fan/black.png")
			
 
				+                    },               
			
 
				+                    {
			
 
				+                        name: "检修",
			
 
				+                        code: "4",
			
 
				+                        img: require("@assets/map/fan/orange.png")
			
 
				+                    },
			
 
				+                    {
			
 
				+                        name: "限电",
			
 
				+                        code: "5",
			
 
				+                        img: require("@assets/map/fan/purple.png")
			
 
				+                    },
			
 
				+                    {
			
 
				+                        name: "限停",
			
 
				+                        code: "6",
			
 
				+                        img: require("@assets/map/fan/white.png")
			
 
				+                    },
			
 
				+                ],
			
 
				+                syzImg: require("@assets/png/booster-station.png"),
			
 
				+                markers: [],
			
 
				+                pointer: false,
			
 
				+                teleport: false, // 是否进行传送
			
 
				+            }
			
 
				+        },
			
 
				+        // 函数
			
 
				+        methods: {
			
 
				+            // 世界转屏幕
			
 
				+            worldToScreen: function (point) {
			
 
				+                // var world = new Point(point.x, point.y, SpatialReference.WGS84);
			
 
				+                // var screenPoint = map.toScreen(point);
			
 
				+            },
			
 
				+            // 屏幕转世界
			
 
				+            screenToWorld: function (point) {},
			
 
				+            // 偏移转经纬度
			
 
				+            oToLL: function (x, y) {
			
 
				+                return {
			
 
				+                    x: 0.00000899 * x,
			
 
				+                    y: 0.00001141 * y
			
 
				+                }
			
 
				+            },
			
 
				+            // 初始化地图
			
 
				+            initMap: function() {
			
 
				+                basemap = new Basemap({
			
 
				+                    // 底图
			
 
				+                    baseLayers: [
			
 
				+                        new MapImageLayer({
			
 
				+                            url: mapUrl,
			
 
				+                            title: this.data.title,
			
 
				+                            spatialReference: SpatialReference.WGS84,
			
 
				+                        }),
			
 
				+                    ],
			
 
				+                    title: this.data.title,
			
 
				+                    spatialReference: SpatialReference.WGS84,
			
 
				+                });
			
 
				+                map = new Map({
			
 
				+                    // 地图容器
			
 
				+                    basemap: basemap,
			
 
				+                });
			
 
				+                if (this.data.mode == "3D") {
			
 
				+                    view = new SceneView({
			
 
				+                        // 3D显示图层
			
 
				+                        map: map,
			
 
				+                        center: this.data.center,
			
 
				+                        camera: {
			
 
				+                            position: {
			
 
				+                                x: this.data.center[0], // lon
			
 
				+                                y: this.data.center[1], // lat
			
 
				+                                z: this.data.height, // elevation in meters
			
 
				+                            },
			
 
				+                            tilt: this.data.tilt,
			
 
				+                        },
			
 
				+                        container: this.$el.querySelector("#viewDiv"),
			
 
				+                    });
			
 
				+                } else {
			
 
				+                    view = new MapView({
			
 
				+                        // 2D显示图层
			
 
				+                        map: map,
			
 
				+                        center: this.data.center,
			
 
				+                        container: this.$el.querySelector("#viewDiv"),
			
 
				+                        rotation: this.data.rotation,
			
 
				+                    });
			
 
				+                }
			
 
				+                view.scale = this.data.scale;
			
 
				+                //去掉版权
			
 
				+                view.ui._removeComponents(["attribution"]);
			
 
				+                view.when(() => {
			
 
				+                    this.when();
			
 
				+                    this.$emit('when');
			
 
				+                });
			
 
				+            },
			
 
				+            when: function() {
			
 
				+                // 当地图加载完成
			
 
				+                this.teleport = true; // 传送
			
 
				+                point_graphicsLayer = new GraphicsLayer({
			
 
				+                    graphics: []
			
 
				+                });
			
 
				+                line_graphicsLayer = new GraphicsLayer({
			
 
				+                    graphics: []
			
 
				+                });
			
 
				+                text_graphicsLayer = new GraphicsLayer({
			
 
				+                    graphics: []
			
 
				+                });
			
 
				+                img_graphicsLayer = new GraphicsLayer({
			
 
				+                    graphics: []
			
 
				+                });
			
 
				+                html_graphicsLayer = new GraphicsLayer({
			
 
				+                    graphics: []
			
 
				+                });
			
 
				+                map.add(line_graphicsLayer);
			
 
				+                map.add(point_graphicsLayer);
			
 
				+                map.add(text_graphicsLayer);
			
 
				+                map.add(img_graphicsLayer);
			
 
				+                map.add(html_graphicsLayer);
			
 
				+                view.on("click", (event) => { // 监听鼠标点击 判断是否可以点击
			
 
				+                    view.hitTest(event).then((response) => {
			
 
				+                        let result = null;
			
 
				+                        if (response.results.length) {
			
 
				+                            const canClick = ["picture-marker", "text"];
			
 
				+                            response.results.forEach(item => {
			
 
				+                                if (canClick.indexOf(item.graphic.symbol.type) >= 0) {
			
 
				+                                    result = item.graphic.attributes;
			
 
				+                                }
			
 
				+                            })
			
 
				+                        }
			
 
				+                        if (result != null) {
			
 
				+                            this.$emit('clickMap', result);
			
 
				+                        }
			
 
				+                    })
			
 
				+                });
			
 
				+                view.on("pointer-move", (event) => { // 监听鼠标移动 判断是否把鼠标变成小手
			
 
				+                    view.hitTest(event).then((response) => {
			
 
				+                        let result = null;
			
 
				+                        if (response.results.length) {
			
 
				+                            const canClick = ["picture-marker", "text"];
			
 
				+                            response.results.forEach(item => {
			
 
				+                                if (canClick.indexOf(item.graphic.symbol.type) >= 0) {
			
 
				+                                    result = item.graphic.attributes;
			
 
				+                                }
			
 
				+                            })
			
 
				+                        }
			
 
				+                        if (result) {
			
 
				+                            this.pointer= true;
			
 
				+                        } else {
			
 
				+                            this.pointer= false;
			
 
				+                        }
			
 
				+                    })
			
 
				+                })
			
 
				+                view.watch("extent", (evt) => {
			
 
				+                    this.markers.forEach((marker, index) => {
			
 
				+                        let graphics = html_graphics[index];
			
 
				+                        let screenPoint = view.toScreen(graphics.geometry);
			
 
				+                        marker.x = screenPoint.x - marker.ox;
			
 
				+                        marker.y = screenPoint.y - marker.oy;
			
 
				+                        if (marker.canScale) {
			
 
				+                            marker.scale =  0.0272 / evt.height;
			
 
				+                            // console.log(evt.height)
			
 
				+                            if (evt.height < 0.295) { 
			
 
				+                                if (!marker.show) {
			
 
				+                                    marker.show = true;
			
 
				+                                    graphics.symbol = new SimpleMarkerSymbol({
			
 
				+                                        color: "transparent",
			
 
				+                                        outline: {
			
 
				+                                            color: [255, 255, 255],
			
 
				+                                            width: 0
			
 
				+                                        }
			
 
				+                                    });
			
 
				+                                }
			
 
				+                            } else {
			
 
				+                                if (marker.show) {
			
 
				+                                    marker.show = false;
			
 
				+                                    graphics.symbol = new SimpleMarkerSymbol({
			
 
				+                                        color: [5,187,76,0.75],
			
 
				+                                        outline: {
			
 
				+                                            color: [5,187,76],
			
 
				+                                            width: 2
			
 
				+                                        }
			
 
				+                                    });
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }
			
 
				+                    });
			
 
				+                });
			
 
				+            },
			
 
				+            // 通过name或code获取img
			
 
				+            getFanImg: function(nameOrState) {
			
 
				+                const item = this.fanStateImgMapping.find(t => t.name == nameOrState || t.code ==
			
 
				+                    nameOrState);
			
 
				+                if (item) {
			
 
				+                    return item.img;
			
 
				+                } else {
			
 
				+                    console.error(nameOrState, "对应的图片不存在");
			
 
				+                    return "";
			
 
				+                }
			
 
				+            },
			
 
				+            // 添加html
			
 
				+            addHtmlPoint: function (point, slot, ox=0, oy=0, scale=true) {
			
 
				+                point[0] += this.oToLL(this.data.ox, this.data.oy).x;
			
 
				+                point[1] += this.oToLL(this.data.ox, this.data.oy).y;
			
 
				+                let item = {
			
 
				+                    geometry: {
			
 
				+                        type: "point",
			
 
				+                        spatialReference: SpatialReference.WGS84,
			
 
				+                        x: point[0],
			
 
				+                        y: point[1],
			
 
				+                    },
			
 
				+                    symbol: {
			
 
				+                        type: "simple-marker",
			
 
				+                        color: "transparent",
			
 
				+                        outline: {
			
 
				+                            color: [255, 255, 255],
			
 
				+                            width: 0
			
 
				+                        }
			
 
				+                    },
			
 
				+                    // symbol: null,
			
 
				+                    attributes: {},
			
 
				+                    popupTemplate: null
			
 
				+                };
			
 
				+                let graphic = new Graphic(item);
			
 
				+                html_graphics.push(graphic);
			
 
				+                html_graphicsLayer.add(graphic);
			
 
				+                let screenPoint = view.toScreen(graphic.geometry);
			
 
				+                let marker = {
			
 
				+                    slot: slot,
			
 
				+                    ox: ox,
			
 
				+                    oy: oy,
			
 
				+                    x: screenPoint.x - ox,
			
 
				+                    y: screenPoint.y - oy,
			
 
				+                    scale: 1,
			
 
				+                    canScale: scale,
			
 
				+                    show: true,
			
 
				+                };
			
 
				+                this.markers.push(marker);
			
 
				+                return marker;
			
 
				+            },
			
 
				+            // 添加图片点
			
 
				+            addImagePoint: function (point, src, width, height) {
			
 
				+                let item = {
			
 
				+                    geometry: {
			
 
				+                        type: "point",
			
 
				+                        spatialReference: SpatialReference.WGS84,
			
 
				+                        x: point[0],
			
 
				+                        y: point[1]
			
 
				+                    },
			
 
				+                    symbol: {
			
 
				+                        type: "picture-marker",
			
 
				+                        url: this.tempImg,
			
 
				+                        width: width,
			
 
				+                        height: height,
			
 
				+                        xoffset: 0,
			
 
				+                        yoffset: 0
			
 
				+                    },
			
 
				+                    attributes: {},
			
 
				+                    popupTemplate: null
			
 
				+                };
			
 
				+                console.log(item)
			
 
				+                let graphic = new Graphic(item);
			
 
				+                img_graphics.push(graphic);
			
 
				+                img_graphicsLayer.add(graphic);
			
 
				+            },
			
 
				+            // 移除
			
 
				+            remove: function (type, obj) {
			
 
				+                if (type == "html") {
			
 
				+                    let markerIndex = this.markers.findIndex(t => t.slot == obj.slot);
			
 
				+                    // let marker = this.markers[markerIndex];
			
 
				+                    this.markers.splice(markerIndex, 1);
			
 
				+                    let graphic = html_graphics[markerIndex];
			
 
				+                    html_graphics.splice(markerIndex, 1);
			
 
				+                    html_graphicsLayer.remove(graphic);
			
 
				+                } else {
			
 
				+                    console.info("arcgis: No type:", type)
			
 
				+                }
			
 
				+            },
			
 
				+            // 添加图片点
			
 
				+            addImgPoint: function(jsonItem) {
			
 
				+                let item = JSON.parse(JSON.stringify(jsonItem));
			
 
				+                item.geometry.type = "point";
			
 
				+                item.geometry.spatialReference = SpatialReference.WGS84;
			
 
				+                item.geometry.x += this.oToLL(this.data.ox, this.data.oy).x;
			
 
				+                item.geometry.y += this.oToLL(this.data.ox, this.data.oy).y;
			
 
				+                item.symbol = {
			
 
				+                    type: "picture-marker",
			
 
				+                    url: item.attributes.type == "升压站" ? this.syzImg : this.getFanImg(item.attributes.state),
			
 
				+                    width: item.attributes.type == "升压站" ? "96px" : "48px",
			
 
				+                    height: item.attributes.type == "升压站" ? "96px" : "48px",
			
 
				+                    xoffset: 0,
			
 
				+                    yoffset: 18
			
 
				+                };
			
 
				+                let graphic = new Graphic(item);
			
 
				+                point_graphics.push(graphic);
			
 
				+                point_graphicsLayer.add(graphic);
			
 
				+                this.addImgText(jsonItem);
			
 
				+            },
			
 
				+            // 添加图片文字
			
 
				+            addImgText: function(jsonItem) {
			
 
				+                let item = JSON.parse(JSON.stringify(jsonItem));
			
 
				+                item.geometry.type = "point";
			
 
				+                item.geometry.spatialReference = SpatialReference.WGS84;
			
 
				+                item.geometry.x += this.oToLL(this.data.ox, this.data.oy).x;
			
 
				+                item.geometry.y += this.oToLL(this.data.ox, this.data.oy).y;
			
 
				+                item.symbol = {
			
 
				+                    type: "text",
			
 
				+                    color: "white",
			
 
				+                    haloColor: "black",
			
 
				+                    haloSize: "1px",
			
 
				+                    text: item.attributes.code,
			
 
				+                    xoffset: 0,
			
 
				+                    yoffset: -10,
			
 
				+                    font: {
			
 
				+                        size: 12,
			
 
				+                        // family: "Josefin Slab",/
			
 
				+                        weight: "bold"
			
 
				+                    }
			
 
				+                };
			
 
				+                let graphic = new Graphic(item);
			
 
				+                text_graphics.push(graphic);
			
 
				+                text_graphicsLayer.add(graphic);
			
 
				+            },
			
 
				+            // 添加线段
			
 
				+            addLine: function(jsonItem) {
			
 
				+                let item = JSON.parse(JSON.stringify(jsonItem));
			
 
				+                item.geometry.type = "polyline";
			
 
				+                item.geometry.spatialReference = SpatialReference.WGS84;
			
 
				+                item.geometry.paths.forEach(item => {
			
 
				+                    item[0] += this.oToLL(this.data.ox, this.data.oy).x;
			
 
				+                    item[1] += this.oToLL(this.data.ox, this.data.oy).y;
			
 
				+                });
			
 
				+                item.symbol = {
			
 
				+                    type: "simple-line",
			
 
				+                    color: "#05bb4c",
			
 
				+                    width: item.attributes.width,
			
 
				+                }
			
 
				+                let graphic = new Graphic(item);
			
 
				+                line_graphics.push(graphic);
			
 
				+                line_graphicsLayer.add(graphic);
			
 
				+            },
			
 
				+            addFanByJson: function(jsonObj, lineJsonObj) {
			
 
				+                // jsonObj.forEach(item => {
			
 
				+                //     this.addImgPoint(item);
			
 
				+                // });
			
 
				+                lineJsonObj.forEach(item => {
			
 
				+                    this.addLine(item);
			
 
				+                });
			
 
				+            },
			
 
				+            goto: function(point) {
			
 
				+                view.goTo({
			
 
				+                    center: point
			
 
				+                }).catch(function(error) {
			
 
				+                    if (error.name != "AbortError") {
			
 
				+                        console.error(error);
			
 
				+                    }
			
 
				+                });
			
 
				+            }
			
 
				+        },
			
 
				+        // 生命周期钩子
			
 
				+        beforeCreate() {
			
 
				+            // 创建前
			
 
				+        },
			
 
				+        created() {
			
 
				+            // 创建后
			
 
				+        },
			
 
				+        beforeMount() {
			
 
				+            // 渲染前
			
 
				+        },
			
 
				+        mounted() {
			
 
				+            // 渲染后
			
 
				+			basemap = null;
			
 
				+            map = null;
			
 
				+            view = null;
			
 
				+            point_graphicsLayer = null;
			
 
				+            line_graphicsLayer = null;
			
 
				+            text_graphicsLayer = null;
			
 
				+            img_graphicsLayer = null;
			
 
				+            html_graphicsLayer = null;
			
 
				+            point_graphics = [];
			
 
				+            line_graphics = [];
			
 
				+            text_graphics = [];
			
 
				+            img_graphics = [];
			
 
				+            html_graphics = [];
			
 
				+            this.initMap();
			
 
				+        },
			
 
				+        beforeUpdate() {
			
 
				+            // 数据更新前
			
 
				+        },
			
 
				+        updated() {
			
 
				+            // 数据更新后
			
 
				+        },
			
 
				+    }
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+    .arcgis {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        position: relative;
			
 
				+        overflow: hidden;
			
 
				+
			
 
				+        &.pointer {
			
 
				+            cursor: pointer;
			
 
				+        }
			
 
				+
			
 
				+        #viewDiv {
			
 
				+            position: absolute;
			
 
				+            z-index: 1;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            top: 0;
			
 
				+            left: 0;
			
 
				+        }
			
 
				+
			
 
				+        #marker {
			
 
				+            position: absolute;
			
 
				+            z-index: 2;
			
 
				+            width: 0;
			
 
				+            height: 0;
			
 
				+            top: 0;
			
 
				+            left: 0;
			
 
				+        }
			
 
				+
			
 
				+        .arcgis-marker {
			
 
				+            position: absolute;
			
 
				+            z-index: 2;
			
 
				+        }
			
 
				+    }
			
 
				+</style>
			
--- a/src/components/chart/bar/horizontal-bar-chart.vue
+++ b/src/components/chart/bar/horizontal-bar-chart.vue
@@ -0,0 +1,172 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "800px",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    data: {
			
 
				+      type: Object,
			
 
				+      default: () => {
			
 
				+        return {
			
 
				+          area: ["新荣区", "平城区", "云冈区", "云州区", "阳高县", "天镇县", "广灵县", "浑源县", "左云县"],
			
 
				+          legend: ["因病", "因残", "因学", "因灾", "缺土地", "缺水"],
			
 
				+          data: [
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+          ],
			
 
				+        };
			
 
				+      },
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      color: ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    datas() {
			
 
				+      return this.list.map((t) => {
			
 
				+        return t.value;
			
 
				+      });
			
 
				+    },
			
 
				+    xdata() {
			
 
				+      return this.list[0].value.map((t) => {
			
 
				+        return t.text;
			
 
				+      });
			
 
				+    },
			
 
				+    ydata() {
			
 
				+      let result = [];
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+    series() {
			
 
				+      let result = [];
			
 
				+      return result;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      const chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        grid: {
			
 
				+          left: 40,
			
 
				+          right: 16,
			
 
				+          bottom: 16,
			
 
				+          top: 16,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor: "rgba(0,0,0,0.4)",
			
 
				+          borderColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: "#fff",
			
 
				+            fontSize: 14,
			
 
				+          },
			
 
				+        },
			
 
				+        yAxis: {
			
 
				+          type: "category",
			
 
				+          axisLabel: {
			
 
				+            color: partten.getColor("gray"),
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: "#96A4F4",
			
 
				+            },
			
 
				+            width: 5,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          data: this.data.area,
			
 
				+        },
			
 
				+        xAxis: {
			
 
				+          type: "value",
			
 
				+          axisLabel: {
			
 
				+            color: partten.getColor("gray"),
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: "#96A4F4",
			
 
				+              type: "dashed",
			
 
				+            },
			
 
				+            width: 5,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            lineStyle: {
			
 
				+              color: partten.getColor("gray") + "20",
			
 
				+            },
			
 
				+          },
			
 
				+        },
			
 
				+        series: [],
			
 
				+      };
			
 
				+
			
 
				+      for (var i = 0; i < this.data.legend.length; i++) {
			
 
				+        option.series.push({
			
 
				+          name: this.data.legend[i],
			
 
				+          type: "bar",
			
 
				+          stack: "总量",
			
 
				+          barWidth: "10%",
			
 
				+          label: {
			
 
				+            show: false,
			
 
				+            position: "insideRight",
			
 
				+          },
			
 
				+          data: this.data.data[i],
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/bar/hover-bar-chart.vue
+++ b/src/components/chart/bar/hover-bar-chart.vue
@@ -0,0 +1,267 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "13.889vh",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          text: "1",
			
 
				+          value: 1,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "2",
			
 
				+          value: 2,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "3",
			
 
				+          value: 1,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "4",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "5",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "6",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "7",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "8",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "9",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "10",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "11",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "12",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "13",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "14",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "15",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "16",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "17",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "18",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "19",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "20",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "21",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "22",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "23",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "24",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "25",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "26",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "27",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "28",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "29",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "30",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          text: "31",
			
 
				+          value: 3,
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    colorValue() {
			
 
				+      return partten.getColor(this.color);
			
 
				+    },
			
 
				+    datas() {
			
 
				+      return this.list.map((t) => {
			
 
				+        return t.value;
			
 
				+      });
			
 
				+    },
			
 
				+    xdata() {
			
 
				+      return this.list.map((t) => {
			
 
				+        return t.text;
			
 
				+      });
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        tooltip: {
			
 
				+          trigger: "item",
			
 
				+          backgroundColor: "rgba(0,0,0,0.4)",
			
 
				+          borderColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: "#fff",
			
 
				+            fontSize: 14,
			
 
				+          },
			
 
				+          formatter: function(param) {
			
 
				+            let marker = '<span style="display:inline-block;margin-right:0.370vh;border-radius:0.926vh;width:0.926vh;height:0.926vh;background-color:' + partten.getColor("green") + ';"></span>';
			
 
				+            return param.name + "<br >" + marker + param.seriesName + "：" + param.value;
			
 
				+          },
			
 
				+        },
			
 
				+        grid: {
			
 
				+          top: 28,
			
 
				+          left: 16,
			
 
				+          bottom: 16,
			
 
				+          right: 16,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            data: this.xdata,
			
 
				+            axisLabel: {
			
 
				+              fontSize: 14,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            type: "value",
			
 
				+            name: "(万KWh)",
			
 
				+            //分格线
			
 
				+            splitLine: {
			
 
				+              lineStyle: {
			
 
				+                color: "#999",
			
 
				+                type: "dashed",
			
 
				+              },
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              fontSize: 14,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        series: {
			
 
				+          name: "损失电量",
			
 
				+          type: "bar",
			
 
				+          data: this.datas,
			
 
				+          itemStyle: {
			
 
				+            color: partten.getColor("gray") + 50,
			
 
				+          },
			
 
				+          emphasis: {
			
 
				+            itemStyle: {
			
 
				+              color: partten.getColor("green"),
			
 
				+            },
			
 
				+          },
			
 
				+        },
			
 
				+      };
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/bar/list-bar-chart.vue
+++ b/src/components/chart/bar/list-bar-chart.vue
@@ -0,0 +1,416 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "percent-pie",
			
 
				+  componentName: "percent-pie",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "18.519vh",
			
 
				+    },
			
 
				+    //  传入数据
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          name: "当日预测电量",
			
 
				+          value: 103.62,
			
 
				+        },
			
 
				+        {
			
 
				+          name: "实际发电量",
			
 
				+          value: 98.62,
			
 
				+        },
			
 
				+        {
			
 
				+          name: "当月预测电量",
			
 
				+          value: 113.27,
			
 
				+        },
			
 
				+        {
			
 
				+          name: "实际发电量",
			
 
				+          value: 136.72,
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    total: {
			
 
				+      type: Number,
			
 
				+      default: 150,
			
 
				+    },
			
 
				+    colors: {
			
 
				+      type: Array,
			
 
				+      default: () => ["green", "purple"],
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    datas() {
			
 
				+      return this.list.map((t) => {
			
 
				+        return t.value;
			
 
				+      });
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      let color1 = this.colors[0];
			
 
				+      let color2 = this.colors[1];
			
 
				+
			
 
				+      let option = {
			
 
				+        xAxis: {
			
 
				+          max: this.total,
			
 
				+          splitLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLabel: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+        },
			
 
				+        grid: {
			
 
				+          left: 16,
			
 
				+          top: 16, // 设置条形图的边s距
			
 
				+          right: 80,
			
 
				+          bottom: 0,
			
 
				+        },
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            inverse: true,
			
 
				+            data: this.list,
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        series: [
			
 
				+          // 内
			
 
				+          {
			
 
				+            type: "bar",
			
 
				+            barWidth: 6,
			
 
				+            // legendHoverLink: false,
			
 
				+            // silent: true,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: function(params) {
			
 
				+                  var color;
			
 
				+                  if (params.dataIndex == 0 || params.dataIndex == 2) {
			
 
				+                    color = {
			
 
				+                      type: "linear",
			
 
				+                      x: 0,
			
 
				+                      y: 0,
			
 
				+                      x2: 1,
			
 
				+                      y2: 0,
			
 
				+                      colorStops: [
			
 
				+                        {
			
 
				+                          offset: 0,
			
 
				+                          color: partten.getColor(color1), // 0% 处的颜色
			
 
				+                        },
			
 
				+                        {
			
 
				+                          offset: 1,
			
 
				+                          color: partten.getColor(color1), // 100% 处的颜色
			
 
				+                        },
			
 
				+                      ],
			
 
				+                    };
			
 
				+                  } else if (params.dataIndex == 1 || params.dataIndex == 3) {
			
 
				+                    color = {
			
 
				+                      type: "linear",
			
 
				+                      x: 0,
			
 
				+                      y: 0,
			
 
				+                      x2: 1,
			
 
				+                      y2: 0,
			
 
				+                      colorStops: [
			
 
				+                        {
			
 
				+                          offset: 0,
			
 
				+                          color: partten.getColor(color2), // 0% 处的颜色
			
 
				+                        },
			
 
				+                        {
			
 
				+                          offset: 1,
			
 
				+                          color: partten.getColor(color2), // 100% 处的颜色
			
 
				+                        },
			
 
				+                      ],
			
 
				+                    };
			
 
				+                  } else {
			
 
				+                    color = {
			
 
				+                      type: "linear",
			
 
				+                      x: 0,
			
 
				+                      y: 0,
			
 
				+                      x2: 1,
			
 
				+                      y2: 0,
			
 
				+                      colorStops: [
			
 
				+                        {
			
 
				+                          offset: 0,
			
 
				+                          color: partten.getColor(color1), // 0% 处的颜色
			
 
				+                        },
			
 
				+                        {
			
 
				+                          offset: 1,
			
 
				+                          color: partten.getColor(color1), // 100% 处的颜色
			
 
				+                        },
			
 
				+                      ],
			
 
				+                    };
			
 
				+                  }
			
 
				+                  return color;
			
 
				+                },
			
 
				+                shadowBlur: 10,
			
 
				+                shadowColor: "rgba(255, 255, 255, 0.30)",
			
 
				+              },
			
 
				+            },
			
 
				+            label: {
			
 
				+              normal: {
			
 
				+                show: true,
			
 
				+                position: [0, util.vh("-20")],
			
 
				+                formatter: function(param) {
			
 
				+                  return param.data.name;
			
 
				+                },
			
 
				+                textStyle: {
			
 
				+                  color: "#7a8385",
			
 
				+                  fontSize: 12,
			
 
				+                },
			
 
				+                rich: {
			
 
				+                  c1: {
			
 
				+                    color: partten.getColor(color1),
			
 
				+                  },
			
 
				+                  c2: {
			
 
				+                    color: partten.getColor(color2),
			
 
				+                  },
			
 
				+                },
			
 
				+              },
			
 
				+            },
			
 
				+            data: this.list,
			
 
				+            z: 1,
			
 
				+            animationEasing: "elasticOut",
			
 
				+          },
			
 
				+          // 三角
			
 
				+          {
			
 
				+            type: "pictorialBar",
			
 
				+            symbolPosition: "end",
			
 
				+            data: this.list,
			
 
				+            symbol: "triangle",
			
 
				+            symbolOffset: [0, -10],
			
 
				+            symbolSize: [5, 5],
			
 
				+            symbolRotate: 180,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                borderWidth: 0,
			
 
				+                color: function(params) {
			
 
				+                  var color;
			
 
				+                  if (params.dataIndex == 0 || params.dataIndex == 2) {
			
 
				+                    color = partten.getColor(color1);
			
 
				+                  } else if (params.dataIndex == 1 || params.dataIndex == 3) {
			
 
				+                    color = partten.getColor(color2);
			
 
				+                  } else {
			
 
				+                    color = partten.getColor(color1);
			
 
				+                  }
			
 
				+                  return color;
			
 
				+                },
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          // 分隔
			
 
				+          {
			
 
				+            type: "pictorialBar",
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "#20314f",
			
 
				+              },
			
 
				+            },
			
 
				+            animation: this.firstAnimation,
			
 
				+            symbolRepeat: "fixed",
			
 
				+            symbolMargin: 4,
			
 
				+            symbol: "rect",
			
 
				+            symbolClip: true,
			
 
				+            symbolSize: [1, 8],
			
 
				+            symbolPosition: "start",
			
 
				+            symbolOffset: [8, -1],
			
 
				+            symbolBoundingData: this.total,
			
 
				+            symbolRotate: -15,
			
 
				+            data: this.list,
			
 
				+            z: 2,
			
 
				+            animationEasing: "elasticOut",
			
 
				+          },
			
 
				+          // 外边框
			
 
				+          {
			
 
				+            type: "pictorialBar",
			
 
				+            symbol: "rect",
			
 
				+            symbolBoundingData: this.total,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "none",
			
 
				+              },
			
 
				+            },
			
 
				+            label: {
			
 
				+              normal: {
			
 
				+                formatter: (params) => {
			
 
				+                  var text;
			
 
				+                  if (params.dataIndex == 0 || params.dataIndex == 2) {
			
 
				+                    text = "{gm|}{f|  " + params.data + "}";
			
 
				+                  } else if (params.dataIndex == 1 || params.dataIndex == 3) {
			
 
				+                    text = "{pm|}{f|  " + params.data + "}";
			
 
				+                  } else {
			
 
				+                    text = "{gm|}{f|  " + params.data + "}";
			
 
				+                  }
			
 
				+                  return text;
			
 
				+                },
			
 
				+                rich: {
			
 
				+                  f: {
			
 
				+                    color: "#ffffff",
			
 
				+                    fontSize: 14,
			
 
				+                    lineHeight: 20,
			
 
				+                    fontFamily: "Bicubik",
			
 
				+                  },
			
 
				+                  gm: {
			
 
				+                    backgroundColor: partten.getColor(color1),
			
 
				+                    width: 4,
			
 
				+                    height: 4,
			
 
				+                    lineHeight: 20,
			
 
				+                    verticalAlign: "middle",
			
 
				+                    borderRadius: [50, 50, 50, 50],
			
 
				+                  },
			
 
				+                  pm: {
			
 
				+                    backgroundColor: partten.getColor(color2),
			
 
				+                    width: 4,
			
 
				+                    height: 4,
			
 
				+                    lineHeight: 20,
			
 
				+                    verticalAlign: "middle",
			
 
				+                    borderRadius: [50, 50, 50, 50],
			
 
				+                  },
			
 
				+                },
			
 
				+                position: "right",
			
 
				+                distance: 8, // 向右偏移位置
			
 
				+                show: true,
			
 
				+              },
			
 
				+            },
			
 
				+            data: this.datas,
			
 
				+          },
			
 
				+          // 外框
			
 
				+          {
			
 
				+            type: "bar",
			
 
				+            name: "外框",
			
 
				+            barGap: "-120%", // 设置外框粗细
			
 
				+            data: [
			
 
				+              {
			
 
				+                value: this.total,
			
 
				+                itemStyle: {
			
 
				+                  normal: {
			
 
				+                    color: "transparent",
			
 
				+                    borderColor: partten.getColor(color1), // [, "#333"],// [, "#333"],
			
 
				+                    borderWidth: 1, // 边框宽度
			
 
				+                    // barBorderRadius: 0, //圆角半径
			
 
				+                    opacity: 0.5,
			
 
				+                    label: {
			
 
				+                      // 标签显示位置
			
 
				+                      show: false,
			
 
				+                      position: "top", // insideTop 或者横向的 insideLeft
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+              },
			
 
				+              {
			
 
				+                value: this.total,
			
 
				+                itemStyle: {
			
 
				+                  normal: {
			
 
				+                    color: "transparent",
			
 
				+                    borderColor: partten.getColor(color2), // [, "#333"],
			
 
				+                    opacity: 0.5,
			
 
				+                    borderWidth: 1, // 边框宽度
			
 
				+                    // barBorderRadius: 0, //圆角半径
			
 
				+                    label: {
			
 
				+                      // 标签显示位置
			
 
				+                      show: false,
			
 
				+                      position: "top", // insideTop 或者横向的 insideLeft
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+              },
			
 
				+              {
			
 
				+                value: this.total,
			
 
				+                itemStyle: {
			
 
				+                  normal: {
			
 
				+                    color: "transparent",
			
 
				+                    borderColor: partten.getColor(color1), // [, "#333"],
			
 
				+                    borderWidth: 1, // 边框宽度
			
 
				+                    opacity: 0.5,
			
 
				+                    // barBorderRadius: 0, //圆角半径
			
 
				+                    label: {
			
 
				+                      // 标签显示位置
			
 
				+                      show: false,
			
 
				+                      position: "top", // insideTop 或者横向的 insideLeft
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+              },
			
 
				+              {
			
 
				+                value: this.total,
			
 
				+                itemStyle: {
			
 
				+                  normal: {
			
 
				+                    color: "transparent",
			
 
				+                    borderColor: partten.getColor(color2), // [, "#333"],
			
 
				+                    opacity: 0.7,
			
 
				+                    borderWidth: 1, // 边框宽度
			
 
				+                    // barBorderRadius: 0, //圆角半径
			
 
				+                    label: {
			
 
				+                      // 标签显示位置
			
 
				+                      show: false,
			
 
				+                      position: "top", // insideTop 或者横向的 insideLeft
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+              },
			
 
				+            ],
			
 
				+            barWidth: 9,
			
 
				+          },
			
 
				+        ],
			
 
				+      };
			
 
				+
			
 
				+      this.chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.chart = echarts.init(this.$el);
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/bar/list-bar-chart2.vue
+++ b/src/components/chart/bar/list-bar-chart2.vue
@@ -0,0 +1,340 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <div
			
 
				+      class="chart"
			
 
				+      v-for="index of list.length"
			
 
				+      :key="index"
			
 
				+      :id="id + index"
			
 
				+    ></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "percent-pie",
			
 
				+  componentName: "percent-pie",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "18.519vh",
			
 
				+    },
			
 
				+    //  传入数据
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          name: "当日预测电量",
			
 
				+          value: 103.62,
			
 
				+          total: 200,
			
 
				+        },
			
 
				+        {
			
 
				+          name: "实际发电量",
			
 
				+          value: 98.62,
			
 
				+          total: 100,
			
 
				+        },
			
 
				+        {
			
 
				+          name: "当月预测电量",
			
 
				+          value: 113.27,
			
 
				+          total: 100,
			
 
				+        },
			
 
				+        {
			
 
				+          name: "实际发电量",
			
 
				+          value: 136.72,
			
 
				+          total: 100,
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    total: {
			
 
				+      type: Number,
			
 
				+      default: 150,
			
 
				+    },
			
 
				+    colors: {
			
 
				+      type: Array,
			
 
				+      default: () => ["green", "purple"],
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      firstAnimation: true,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    datas() {
			
 
				+      return this.list.map((t) => {
			
 
				+        return t.value;
			
 
				+      });
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    resize() {},
			
 
				+    initChart(value, index) {
			
 
				+      var currColor = this.colors[index % 2];
			
 
				+      var $dom = document.getElementById(this.id + (index + 1));
			
 
				+      $dom.style.width = this.width;
			
 
				+      $dom.style.height = `calc(${this.height} / ${this.list.length} - 4px)`;
			
 
				+      let chart = echarts.init($dom);
			
 
				+
			
 
				+      let option = {
			
 
				+        xAxis: {
			
 
				+          max: value.total,
			
 
				+          splitLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLabel: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+        },
			
 
				+        grid: {
			
 
				+          left: 16,
			
 
				+          top: 16, // 设置条形图的边s距
			
 
				+          right: 110,
			
 
				+          bottom: 0,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            inverse: true,
			
 
				+            data: [value],
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        series: [
			
 
				+          // 内
			
 
				+          {
			
 
				+            type: "bar",
			
 
				+            barWidth: 6,
			
 
				+            animation: this.firstAnimation,
			
 
				+            // legendHoverLink: false,
			
 
				+            // silent: true,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: function (params) {
			
 
				+                  return {
			
 
				+                    type: "linear",
			
 
				+                    x: 0,
			
 
				+                    y: 0,
			
 
				+                    x2: 1,
			
 
				+                    y2: 0,
			
 
				+                    colorStops: [
			
 
				+                      {
			
 
				+                        offset: 0,
			
 
				+                        color: partten.getColor(currColor), // 0% 处的颜色
			
 
				+                      },
			
 
				+                      {
			
 
				+                        offset: 1,
			
 
				+                        color: partten.getColor(currColor), // 100% 处的颜色
			
 
				+                      },
			
 
				+                    ],
			
 
				+                  };
			
 
				+                },
			
 
				+                shadowBlur: 10,
			
 
				+                shadowColor: "rgba(255, 255, 255, 0.30)",
			
 
				+              },
			
 
				+            },
			
 
				+            label: {
			
 
				+              normal: {
			
 
				+                show: true,
			
 
				+                position: [0, util.vh("-20")],
			
 
				+                formatter: function (param) {
			
 
				+                  return param.data.name;
			
 
				+                },
			
 
				+                textStyle: {
			
 
				+                  color: this.$store.state.themeName === "dark" ? "#7a8385" : "#000",
			
 
				+                  fontSize: 12,
			
 
				+                },
			
 
				+              },
			
 
				+            },
			
 
				+            data: [value],
			
 
				+            z: 1,
			
 
				+            animationEasing: "elasticOut",
			
 
				+          },
			
 
				+          // 三角
			
 
				+          {
			
 
				+            type: "pictorialBar",
			
 
				+            symbolPosition: "end",
			
 
				+            animation: this.firstAnimation,
			
 
				+            data: [value],
			
 
				+            symbol: "triangle",
			
 
				+            symbolOffset: [0, -10],
			
 
				+            symbolSize: [5, 5],
			
 
				+            symbolRotate: 180,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                borderWidth: 0,
			
 
				+                color: function (params) {
			
 
				+                  return partten.getColor(currColor);
			
 
				+                },
			
 
				+                // shadowBlur: 2,
			
 
				+                // shadowColor: "rgba(255, 255, 255, 0.80)",
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          // 分隔
			
 
				+          {
			
 
				+            type: "pictorialBar",
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: this.$store.state.themeName === "dark" ? "#20314f" : "#000",
			
 
				+              },
			
 
				+            },
			
 
				+            animation: this.firstAnimation,
			
 
				+            symbolRepeat: "fixed",
			
 
				+            symbolMargin: 4,
			
 
				+            symbol: "rect",
			
 
				+            symbolClip: true,
			
 
				+            symbolSize: [1, 8],
			
 
				+            symbolPosition: "start",
			
 
				+            symbolOffset: [8, -1],
			
 
				+            symbolBoundingData: value.total,
			
 
				+            symbolRotate: -15,
			
 
				+            data: [value],
			
 
				+            z: 2,
			
 
				+            animationEasing: "elasticOut",
			
 
				+          },
			
 
				+          // 外边框
			
 
				+          {
			
 
				+            type: "pictorialBar",
			
 
				+            animation: this.firstAnimation,
			
 
				+            symbol: "rect",
			
 
				+            symbolBoundingData: value.total,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "none",
			
 
				+              },
			
 
				+            },
			
 
				+            label: {
			
 
				+              normal: {
			
 
				+                formatter: (params) => {
			
 
				+                  return "{gm|}{f|  " + params.data + "}";
			
 
				+                },
			
 
				+                rich: {
			
 
				+                  f: {
			
 
				+                    color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
			
 
				+                    fontSize: 14,
			
 
				+                    lineHeight: 20,
			
 
				+                    fontFamily: "Bicubik",
			
 
				+                  },
			
 
				+                  gm: {
			
 
				+                    backgroundColor: partten.getColor(currColor),
			
 
				+                    width: 4,
			
 
				+                    height: 4,
			
 
				+                    lineHeight: 20,
			
 
				+                    verticalAlign: "middle",
			
 
				+                    borderRadius: [50, 50, 50, 50],
			
 
				+                  },
			
 
				+                },
			
 
				+                position: "right",
			
 
				+                distance: 8, // 向右偏移位置
			
 
				+                show: true,
			
 
				+              },
			
 
				+            },
			
 
				+            data: [value.value],
			
 
				+          },
			
 
				+          // 外框
			
 
				+          {
			
 
				+            type: "bar",
			
 
				+            animation: this.firstAnimation,
			
 
				+            name: "外框",
			
 
				+            barGap: "-120%", // 设置外框粗细
			
 
				+            data: [
			
 
				+              {
			
 
				+                value: value.total,
			
 
				+                itemStyle: {
			
 
				+                  normal: {
			
 
				+                    color: "transparent",
			
 
				+                    borderColor: partten.getColor(currColor), // [, "#333"],
			
 
				+                    borderWidth: 1, // 边框宽度
			
 
				+                    // barBorderRadius: 0, //圆角半径
			
 
				+                    opacity: 0.5,
			
 
				+                    label: {
			
 
				+                      // 标签显示位置
			
 
				+                      show: false,
			
 
				+                      position: "top", // insideTop 或者横向的 insideLeft
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+              },
			
 
				+            ],
			
 
				+            barWidth: 9,
			
 
				+          },
			
 
				+        ],
			
 
				+      };
			
 
				+
			
 
				+      chart.clear();
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      this.resize = function () {
			
 
				+        chart.resize();
			
 
				+      };
			
 
				+
			
 
				+      window.removeEventListener("resize", this.resize);
			
 
				+      window.addEventListener("resize", this.resize);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.list.forEach((value, index) => {
			
 
				+        this.initChart(value, index);
			
 
				+      });
			
 
				+      this.firstAnimation = false;
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.list.forEach((value, index) => {
			
 
				+        this.initChart(value, index);
			
 
				+      });
			
 
				+    });
			
 
				+  },
			
 
				+  unmounted() {
			
 
				+    window.removeEventListener("resize", this.resize);
			
 
				+  },
			
 
				+
			
 
				+  watch: {
			
 
				+    "$store.state.themeName"() {
			
 
				+      this.list.forEach((value, index) => {
			
 
				+        this.initChart(value, index);
			
 
				+      });
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+  cursor: default;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/bar/multiple-bar-chart.vue
+++ b/src/components/chart/bar/multiple-bar-chart.vue
@@ -0,0 +1,406 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "13.889vh",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          title: "日发电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "上网电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "购网电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "风速",
			
 
				+          yAxisIndex: 1,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["(万KWh)", "(风速)"],
			
 
				+    },
			
 
				+    // 显示 legend
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    // 颜色#
			
 
				+    color: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        "#05bb4c",
			
 
				+        "#4b55ae",
			
 
				+        "#fa8c16",
			
 
				+        "#f8de5b",
			
 
				+        "#1a93cf",
			
 
				+        "#c531c7",
			
 
				+        "#bd3338",
			
 
				+      ],
			
 
				+    },
			
 
				+    showAnimation: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    // 柱子最大宽度
			
 
				+    barMaxWidth: {
			
 
				+      type: Number || String,
			
 
				+      default: 0,
			
 
				+    },
			
 
				+    // 柱子间距
			
 
				+    barGap: {
			
 
				+      type: Number || String,
			
 
				+      default: 0,
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      firstAnimation: true,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    legend() {
			
 
				+      return this.list.map((t) => {
			
 
				+        return t.title;
			
 
				+      });
			
 
				+    },
			
 
				+    xdata() {
			
 
				+      let result = [];
			
 
				+      if (this.list && this.list.length > 0 && this.list[0].value.length > 0) {
			
 
				+        result = this.list[0].value.map((t) => {
			
 
				+          return t.text;
			
 
				+        });
			
 
				+      }
			
 
				+      return result;
			
 
				+    },
			
 
				+    ydata() {
			
 
				+      let result = [];
			
 
				+      this.units.forEach((value, index) => {
			
 
				+        let data = null;
			
 
				+        if (index == 0) {
			
 
				+          data = {
			
 
				+            type: "value",
			
 
				+            name: value,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value} ",
			
 
				+              fontSize: 12,
			
 
				+              textStyle: {
			
 
				+                color:
			
 
				+                  this.$store.state.themeName === "dark"
			
 
				+                    ? "rgb(116,124,128)"
			
 
				+                    : "#000",
			
 
				+              },
			
 
				+            },
			
 
				+            //分格线
			
 
				+            splitLine: {
			
 
				+              lineStyle: {
			
 
				+                color:
			
 
				+                  this.$store.state.themeName === "dark" ? "#5a6162" : "#000",
			
 
				+                type: "dashed",
			
 
				+              },
			
 
				+            },
			
 
				+          };
			
 
				+        } else {
			
 
				+          data = {
			
 
				+            type: "value",
			
 
				+            name: value,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value}",
			
 
				+              fontSize: 12,
			
 
				+              textStyle: {
			
 
				+                color:
			
 
				+                  this.$store.state.themeName === "dark"
			
 
				+                    ? "rgb(116,124,128)"
			
 
				+                    : "#000",
			
 
				+              },
			
 
				+            },
			
 
				+            //分格线
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          };
			
 
				+        }
			
 
				+
			
 
				+        result.push(data);
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+    series() {
			
 
				+      let result = [];
			
 
				+      if (this.list && this.list.length > 0) {
			
 
				+        this.list.forEach((value, index) => {
			
 
				+          let seriesItem = {
			
 
				+            name: value.title,
			
 
				+            type: "bar",
			
 
				+            barWidth: "8%",
			
 
				+            animation: this.firstAnimation && this.showAnimation,
			
 
				+            yAxisIndex: value.yAxisIndex,
			
 
				+            data: value.value.map((t) => {
			
 
				+              return t.value;
			
 
				+            }),
			
 
				+          };
			
 
				+          if (this.barMaxWidth) {
			
 
				+            seriesItem.barMaxWidth = this.barMaxWidth;
			
 
				+          } else {
			
 
				+            seriesItem.barWidth = "8%";
			
 
				+          }
			
 
				+
			
 
				+          if (this.barGap) {
			
 
				+            seriesItem.barGap = this.barGap;
			
 
				+          }
			
 
				+          result.push(seriesItem);
			
 
				+        });
			
 
				+      }
			
 
				+      return result;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    resize() {
			
 
				+      this.initChart();
			
 
				+    },
			
 
				+    initChart() {
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor:
			
 
				+            this.$store.state.themeName === "dark"
			
 
				+              ? "rgba(0,0,0,0.4)"
			
 
				+              : "rgba(255,255,255,0.5)",
			
 
				+          borderColor:
			
 
				+            this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("gray")
			
 
				+              : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.legend,
			
 
				+          right: 56,
			
 
				+          icon: "ract",
			
 
				+          itemWidth: 8,
			
 
				+          itemHeight: 8,
			
 
				+          inactiveColor:
			
 
				+            this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("gray")
			
 
				+              : "#000",
			
 
				+          textStyle: {
			
 
				+            fontSize: 12,
			
 
				+            color:
			
 
				+              this.$store.state.themeName === "dark"
			
 
				+                ? partten.getColor("grayl")
			
 
				+                : "#000",
			
 
				+          },
			
 
				+        },
			
 
				+        grid: {
			
 
				+          top: 32,
			
 
				+          left: 8,
			
 
				+          right: 8,
			
 
				+          bottom: 0,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            data: this.xdata,
			
 
				+            nameLocation: "center",
			
 
				+            axisPointer: {
			
 
				+              type: "shadow",
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              interval: 0,
			
 
				+              fontSize: 12,
			
 
				+              textStyle: {
			
 
				+                color:
			
 
				+                  this.$store.state.themeName === "dark"
			
 
				+                    ? "rgb(116,124,128)"
			
 
				+                    : "#000",
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: this.ydata,
			
 
				+        series: this.series,
			
 
				+      };
			
 
				+
			
 
				+      chart.clear();
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      this.resize = function () {
			
 
				+        chart.resize();
			
 
				+      };
			
 
				+
			
 
				+      window.addEventListener("resize", this.resize);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.id = "pie-chart-" + util.newGUID();
			
 
				+    });
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+      this.firstAnimation = false;
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  unmounted() {
			
 
				+    window.removeEventListener("resize", this.resize);
			
 
				+  },
			
 
				+
			
 
				+  watch: {
			
 
				+    "$store.state.themeName"() {
			
 
				+      let myChart = echarts.init(document.getElementById(this.id));
			
 
				+      myChart.dispose();
			
 
				+      setTimeout(() => {
			
 
				+        this.initChart();
			
 
				+      }, 300);
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/bar/multiple-hover-bar-chart.vue
+++ b/src/components/chart/bar/multiple-hover-bar-chart.vue
@@ -0,0 +1,369 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "13.889vh",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          title: "日发电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "8日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "9日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "上网电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "购网电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "风速",
			
 
				+          yAxisIndex: 1,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["(万KWh)", "(风速)"],
			
 
				+    },
			
 
				+    // 自定义tooltip 显示内容
			
 
				+    customerTooltip: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    // 颜色
			
 
				+    color: {
			
 
				+      type: Array,
			
 
				+      default: () => ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    xdata() {
			
 
				+      let result = [];
			
 
				+      if (this.list && this.list.length > 0 && this.list[0].value.length > 0) {
			
 
				+        result = this.list[0].value.map((t) => {
			
 
				+          return t.text;
			
 
				+        });
			
 
				+      }
			
 
				+      return result;
			
 
				+    },
			
 
				+    ydata() {
			
 
				+      let result = [];
			
 
				+      this.units.forEach((value, index) => {
			
 
				+        let data = null;
			
 
				+        if (index == 0) {
			
 
				+          data = {
			
 
				+            type: "value",
			
 
				+            name: value,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value} ",
			
 
				+              fontSize: 14,
			
 
				+            },
			
 
				+            //分格线
			
 
				+            splitLine: {
			
 
				+              lineStyle: {
			
 
				+                color: "#5a6162",
			
 
				+                type: "dashed",
			
 
				+              },
			
 
				+            },
			
 
				+          };
			
 
				+        } else {
			
 
				+          data = {
			
 
				+            type: "value",
			
 
				+            name: value,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value}",
			
 
				+              fontSize: 14,
			
 
				+            },
			
 
				+
			
 
				+            //分格线
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          };
			
 
				+        }
			
 
				+
			
 
				+        result.push(data);
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+    series() {
			
 
				+      let result = [];
			
 
				+      if (this.list && this.list.length > 0) {
			
 
				+        this.list.forEach((value, index) => {
			
 
				+          result.push({
			
 
				+            name: value.title,
			
 
				+            type: "bar",
			
 
				+            yAxisIndex: value.yAxisIndex,
			
 
				+            data: value.value.map((t) => {
			
 
				+              return t.value;
			
 
				+            }),
			
 
				+            itemStyle: {
			
 
				+              color: partten.getColor("gray") + 50,
			
 
				+            },
			
 
				+            emphasis: {
			
 
				+              itemStyle: {
			
 
				+                color: this.color[index],
			
 
				+              },
			
 
				+            },
			
 
				+          });
			
 
				+        });
			
 
				+      }
			
 
				+      return result;
			
 
				+    },
			
 
				+  },
			
 
				+  emits: {
			
 
				+    tooltip: function(param, callback) {
			
 
				+      var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
			
 
				+      var result = param[0].axisValue;
			
 
				+      param.forEach((value, index) => {
			
 
				+        result += "<br />" + `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` + value.seriesName + "：" + value.value;
			
 
				+      });
			
 
				+      callback(result);
			
 
				+      return true;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      let that = this;
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor: "rgba(0,0,0,0.4)",
			
 
				+          borderColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: "#fff",
			
 
				+            fontSize: 14,
			
 
				+          },
			
 
				+        },
			
 
				+        grid: {
			
 
				+          top: util.vh(32),
			
 
				+          left: util.vh(40),
			
 
				+          right: this.ydata.length > 1 ? util.vh(40) : util.vh(16),
			
 
				+          bottom: util.vh(24),
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            data: this.xdata,
			
 
				+            axisPointer: {
			
 
				+              type: "shadow",
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              fontSize: 14,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: this.ydata,
			
 
				+        series: this.series,
			
 
				+      };
			
 
				+
			
 
				+      if (that.customerTooltip) {
			
 
				+        option.tooltip.formatter = function(param) {
			
 
				+          let result = "";
			
 
				+          let callback = function(value) {
			
 
				+            result = value;
			
 
				+          };
			
 
				+          that.$emit("tooltip", param, callback);
			
 
				+          return result;
			
 
				+        };
			
 
				+      }
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/bar/percent-bar-2.vue
+++ b/src/components/chart/bar/percent-bar-2.vue
@@ -0,0 +1,204 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "dsah-pie",
			
 
				+  componentName: "dsah-pie",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "7.407vh",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "7.407vh",
			
 
				+    },
			
 
				+    name: {
			
 
				+      type: String,
			
 
				+      default: "名称",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    value: {
			
 
				+      type: Number,
			
 
				+      default: 25,
			
 
				+    },
			
 
				+    // 颜色 green yellow (partten中支持的颜色)
			
 
				+    color: {
			
 
				+      type: String,
			
 
				+      default: "green",
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    colorValue() {
			
 
				+      return partten.getColor(this.color);
			
 
				+    },
			
 
				+    text() {
			
 
				+      return this.value + "%";
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        title: [
			
 
				+          {
			
 
				+            text: this.text,
			
 
				+            subtext: this.name,
			
 
				+            x: "47%",
			
 
				+            y: "25%",
			
 
				+            textAlign: "center",
			
 
				+            textStyle: {
			
 
				+              fontSize: 20,
			
 
				+              fontFamily: "Bicubik",
			
 
				+              color: this.colorValue,
			
 
				+              textAlign: "center",
			
 
				+            },
			
 
				+            subtextStyle: {
			
 
				+              fontSize: 12,
			
 
				+              color: "#fff",
			
 
				+              textAlign: "center",
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        polar: {
			
 
				+          radius: ["100%", "85%"],
			
 
				+          center: ["50%", "50%"],
			
 
				+        },
			
 
				+        angleAxis: {
			
 
				+          max: 100,
			
 
				+          show: false,
			
 
				+          startAngle: 180,
			
 
				+        },
			
 
				+        radiusAxis: {
			
 
				+          type: "category",
			
 
				+          show: true,
			
 
				+          axisLabel: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "",
			
 
				+            z: "3",
			
 
				+            type: "bar",
			
 
				+            roundCap: true,
			
 
				+            barWidth: 60,
			
 
				+            showBackground: true,
			
 
				+            backgroundStyle: {
			
 
				+              color: this.colorValue + "30",
			
 
				+            },
			
 
				+            data: [this.value],
			
 
				+            coordinateSystem: "polar",
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: this.colorValue,
			
 
				+                //    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
			
 
				+                //     {
			
 
				+                //       offset: 0,
			
 
				+                //       color: "#0ff",
			
 
				+                //     },
			
 
				+                //     {
			
 
				+                //       offset: 1,
			
 
				+                //       color: "#02aeff",
			
 
				+                //     },
			
 
				+                //   ]),
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            type: "pie",
			
 
				+            radius: ["100%", "97%"],
			
 
				+            startAngle: 180,
			
 
				+            center: ["50%", "50%"],
			
 
				+            data: [
			
 
				+              {
			
 
				+                hoverOffset: 1,
			
 
				+                value: 100,
			
 
				+                name: "",
			
 
				+                itemStyle: {
			
 
				+                  color: this.colorValue,
			
 
				+                },
			
 
				+                label: {
			
 
				+                  show: false,
			
 
				+                },
			
 
				+                labelLine: {
			
 
				+                  normal: {
			
 
				+                    smooth: true,
			
 
				+                    lineStyle: {
			
 
				+                      width: 0,
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+                hoverAnimation: false,
			
 
				+              },
			
 
				+              {
			
 
				+                label: {
			
 
				+                  show: false,
			
 
				+                },
			
 
				+                labelLine: {
			
 
				+                  normal: {
			
 
				+                    smooth: true,
			
 
				+                    lineStyle: {
			
 
				+                      width: 0,
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+                value: 0,
			
 
				+                hoverAnimation: false,
			
 
				+                itemStyle: {
			
 
				+                  color: "transparent",
			
 
				+                },
			
 
				+              },
			
 
				+            ],
			
 
				+          },
			
 
				+        ],
			
 
				+      };
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: block;
			
 
				+  margin: auto;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/bar/percent-bar-3.vue
+++ b/src/components/chart/bar/percent-bar-3.vue
@@ -0,0 +1,199 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "dsah-pie",
			
 
				+  componentName: "dsah-pie",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "7.407vh",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "7.407vh",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    value: {
			
 
				+      type: Number,
			
 
				+      default: 25,
			
 
				+    },
			
 
				+    // 颜色 green yellow (partten中支持的颜色)
			
 
				+    color: {
			
 
				+      type: String,
			
 
				+      default: "green",
			
 
				+    },
			
 
				+    fontsize: {
			
 
				+      type: Number,
			
 
				+      default: 12,
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    colorValue() {
			
 
				+      return partten.getColor(this.color);
			
 
				+    },
			
 
				+    text() {
			
 
				+      return this.value + "%";
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        title: [
			
 
				+          {
			
 
				+            text: this.text,
			
 
				+            x: "43%",
			
 
				+            y: "32%",
			
 
				+            textAlign: "center",
			
 
				+            textStyle: {
			
 
				+              fontSize: this.fontsize,
			
 
				+              fontFamily: "Bicubik",
			
 
				+              fontWeight: "400",
			
 
				+              color: partten.getColor(this.colors),
			
 
				+              textAlign: "center",
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        polar: {
			
 
				+          radius: ["100%", "85%"],
			
 
				+          center: ["50%", "50%"],
			
 
				+        },
			
 
				+        angleAxis: {
			
 
				+          max: 100,
			
 
				+          show: false,
			
 
				+          startAngle: 180,
			
 
				+        },
			
 
				+        radiusAxis: {
			
 
				+          type: "category",
			
 
				+          show: true,
			
 
				+          axisLabel: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "",
			
 
				+            z: "3",
			
 
				+            type: "bar",
			
 
				+            roundCap: true,
			
 
				+            barWidth: 60,
			
 
				+            showBackground: true,
			
 
				+            backgroundStyle: {
			
 
				+              color: partten.getColor(this.colors) + "30",
			
 
				+            },
			
 
				+            data: [this.value],
			
 
				+            coordinateSystem: "polar",
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: partten.getColor(this.colors),
			
 
				+                //    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
			
 
				+                //     {
			
 
				+                //       offset: 0,
			
 
				+                //       color: "#0ff",
			
 
				+                //     },
			
 
				+                //     {
			
 
				+                //       offset: 1,
			
 
				+                //       color: "#02aeff",
			
 
				+                //     },
			
 
				+                //   ]),
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            type: "pie",
			
 
				+            radius: ["100%", "97%"],
			
 
				+            startAngle: 180,
			
 
				+            center: ["50%", "50%"],
			
 
				+            data: [
			
 
				+              {
			
 
				+                hoverOffset: 1,
			
 
				+                value: 100,
			
 
				+                name: "",
			
 
				+                itemStyle: {
			
 
				+                  color: partten.getColor(this.colors),
			
 
				+                },
			
 
				+                label: {
			
 
				+                  show: false,
			
 
				+                },
			
 
				+                labelLine: {
			
 
				+                  normal: {
			
 
				+                    smooth: true,
			
 
				+                    lineStyle: {
			
 
				+                      width: 0,
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+                hoverAnimation: false,
			
 
				+              },
			
 
				+              {
			
 
				+                label: {
			
 
				+                  show: false,
			
 
				+                },
			
 
				+                labelLine: {
			
 
				+                  normal: {
			
 
				+                    smooth: true,
			
 
				+                    lineStyle: {
			
 
				+                      width: 0,
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+                value: 0,
			
 
				+                hoverAnimation: false,
			
 
				+                itemStyle: {
			
 
				+                  color: "transparent",
			
 
				+                },
			
 
				+              },
			
 
				+            ],
			
 
				+          },
			
 
				+        ],
			
 
				+      };
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: block;
			
 
				+  margin: auto;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/bar/percent-bar.vue
+++ b/src/components/chart/bar/percent-bar.vue
@@ -0,0 +1,211 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "dsah-pie",
			
 
				+  componentName: "dsah-pie",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "7.407vh",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "7.407vh",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    value: {
			
 
				+      type: Number,
			
 
				+      default: 25,
			
 
				+    },
			
 
				+    // 颜色 green yellow (partten中支持的颜色)
			
 
				+    color: {
			
 
				+      type: String,
			
 
				+      default: "green",
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    colorValue() {
			
 
				+      return partten.getColor(this.color);
			
 
				+    },
			
 
				+    text() {
			
 
				+      return this.value + "%";
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        title: [
			
 
				+          {
			
 
				+            text: this.text,
			
 
				+            x: "47%",
			
 
				+            y: "32%",
			
 
				+            textAlign: "center",
			
 
				+            textStyle: {
			
 
				+              fontSize: 14,
			
 
				+              fontFamily: "Bicubik",
			
 
				+              fontWeight: "600",
			
 
				+              color:
			
 
				+                this.$store.state.themeName === "dark"
			
 
				+                  ? partten.getColor(this.colors)
			
 
				+                  : "rgb(57, 54, 143)",
			
 
				+              textAlign: "center",
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        polar: {
			
 
				+          radius: ["100%", "85%"],
			
 
				+          center: ["50%", "50%"],
			
 
				+        },
			
 
				+        angleAxis: {
			
 
				+          max: 100,
			
 
				+          show: false,
			
 
				+          startAngle: 180,
			
 
				+        },
			
 
				+        radiusAxis: {
			
 
				+          type: "category",
			
 
				+          show: true,
			
 
				+          axisLabel: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "",
			
 
				+            z: "3",
			
 
				+            type: "bar",
			
 
				+            roundCap: true,
			
 
				+            barWidth: 60,
			
 
				+            showBackground: true,
			
 
				+            backgroundStyle: {
			
 
				+              color:
			
 
				+                this.$store.state.themeName === "dark"
			
 
				+                    ? partten.getColor(this.colors)
			
 
				+                    : "rgb(57, 54, 143)",
			
 
				+            },
			
 
				+            data: [this.value],
			
 
				+            coordinateSystem: "polar",
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color:this.$store.state.themeName === "dark"
			
 
				+                  ? 'black'
			
 
				+                  : "#fff",
			
 
				+                //    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
			
 
				+                //     {
			
 
				+                //       offset: 0,
			
 
				+                //       color: "#0ff",
			
 
				+                //     },
			
 
				+                //     {
			
 
				+                //       offset: 1,
			
 
				+                //       color: "#02aeff",
			
 
				+                //     },
			
 
				+                //   ]),
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            type: "pie",
			
 
				+            radius: ["100%", "97%"],
			
 
				+            startAngle: 180,
			
 
				+            center: ["50%", "50%"],
			
 
				+            data: [
			
 
				+              {
			
 
				+                hoverOffset: 1,
			
 
				+                value: 100,
			
 
				+                name: "",
			
 
				+                itemStyle: {
			
 
				+                  color:
			
 
				+                    this.$store.state.themeName === "dark"
			
 
				+                      ? partten.getColor(this.colors)
			
 
				+                      : "rgb(57, 54, 143)",
			
 
				+                },
			
 
				+                label: {
			
 
				+                  show: false,
			
 
				+                },
			
 
				+                labelLine: {
			
 
				+                  normal: {
			
 
				+                    smooth: true,
			
 
				+                    lineStyle: {
			
 
				+                      width: 0,
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+                hoverAnimation: false,
			
 
				+              },
			
 
				+              {
			
 
				+                label: {
			
 
				+                  show: false,
			
 
				+                },
			
 
				+                labelLine: {
			
 
				+                  normal: {
			
 
				+                    smooth: true,
			
 
				+                    lineStyle: {
			
 
				+                      width: 0,
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+                value: 0,
			
 
				+                hoverAnimation: false,
			
 
				+                itemStyle: {
			
 
				+                  color: "transparent",
			
 
				+                },
			
 
				+              },
			
 
				+            ],
			
 
				+          },
			
 
				+        ],
			
 
				+      };
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  watch: {
			
 
				+    "$store.state.themeName"() {
			
 
				+      this.initChart();
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: block;
			
 
				+  margin: auto;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/bar/single-bar-chart.vue
+++ b/src/components/chart/bar/single-bar-chart.vue
@@ -0,0 +1,408 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "percent-pie",
			
 
				+  componentName: "percent-pie",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "18.519vh",
			
 
				+    },
			
 
				+    //  传入数据
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          name: "当日预测电量",
			
 
				+          value: 103.62,
			
 
				+        },
			
 
				+        {
			
 
				+          name: "实际发电量",
			
 
				+          value: 98.62,
			
 
				+        },
			
 
				+        {
			
 
				+          name: "当月预测电量",
			
 
				+          value: 113.27,
			
 
				+        },
			
 
				+        {
			
 
				+          name: "实际发电量",
			
 
				+          value: 136.72,
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    total: {
			
 
				+      type: Number,
			
 
				+      default: 150,
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    datas() {
			
 
				+      return this.list.map((t) => {
			
 
				+        return t.value;
			
 
				+      });
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        xAxis: {
			
 
				+          max: this.total,
			
 
				+          splitLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLabel: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+        },
			
 
				+        // tooltip: {
			
 
				+        //   trigger: "axis",
			
 
				+        //   backgroundColor: "rgba(0,0,0,0.4)",
			
 
				+        //   borderColor: partten.getColor("gray"),
			
 
				+        //   textStyle: {
			
 
				+        //     color: "#fff",
			
 
				+        //     fontSize: 14,
			
 
				+        //   },
			
 
				+        // },
			
 
				+        grid: {
			
 
				+          left: 16,
			
 
				+          top: 16, // 设置条形图的边s距
			
 
				+          right: 80,
			
 
				+          bottom: 0,
			
 
				+        },
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            inverse: true,
			
 
				+            data: this.list,
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        series: [
			
 
				+          {
			
 
				+            // 内
			
 
				+            type: "bar",
			
 
				+            barWidth: 10,
			
 
				+            // legendHoverLink: false,
			
 
				+            // silent: true,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: function(params) {
			
 
				+                  var color;
			
 
				+                  if (params.dataIndex == 0 || params.dataIndex == 2) {
			
 
				+                    color = {
			
 
				+                      type: "linear",
			
 
				+                      x: 0,
			
 
				+                      y: 0,
			
 
				+                      x2: 1,
			
 
				+                      y2: 0,
			
 
				+                      colorStops: [
			
 
				+                        {
			
 
				+                          offset: 0,
			
 
				+                          color: partten.getColor("green"), // 0% 处的颜色
			
 
				+                        },
			
 
				+                        {
			
 
				+                          offset: 1,
			
 
				+                          color: partten.getColor("green"), // 100% 处的颜色
			
 
				+                        },
			
 
				+                      ],
			
 
				+                    };
			
 
				+                  } else if (params.dataIndex == 1 || params.dataIndex == 3) {
			
 
				+                    color = {
			
 
				+                      type: "linear",
			
 
				+                      x: 0,
			
 
				+                      y: 0,
			
 
				+                      x2: 1,
			
 
				+                      y2: 0,
			
 
				+                      colorStops: [
			
 
				+                        {
			
 
				+                          offset: 0,
			
 
				+                          color: partten.getColor("purple"), // 0% 处的颜色
			
 
				+                        },
			
 
				+                        {
			
 
				+                          offset: 1,
			
 
				+                          color: partten.getColor("purple"), // 100% 处的颜色
			
 
				+                        },
			
 
				+                      ],
			
 
				+                    };
			
 
				+                  } else {
			
 
				+                    color = {
			
 
				+                      type: "linear",
			
 
				+                      x: 0,
			
 
				+                      y: 0,
			
 
				+                      x2: 1,
			
 
				+                      y2: 0,
			
 
				+                      colorStops: [
			
 
				+                        {
			
 
				+                          offset: 0,
			
 
				+                          color: partten.getColor("green"), // 0% 处的颜色
			
 
				+                        },
			
 
				+                        {
			
 
				+                          offset: 1,
			
 
				+                          color: partten.getColor("green"), // 100% 处的颜色
			
 
				+                        },
			
 
				+                      ],
			
 
				+                    };
			
 
				+                  }
			
 
				+                  return color;
			
 
				+                },
			
 
				+                shadowBlur: 3,
			
 
				+                shadowColor: "rgba(255, 255, 255, 0.70)",
			
 
				+              },
			
 
				+            },
			
 
				+            label: {
			
 
				+              normal: {
			
 
				+                show: true,
			
 
				+                position: [0, util.vh("-20")],
			
 
				+                formatter: "{b}",
			
 
				+                textStyle: {
			
 
				+                  color: "#7a8385",
			
 
				+                  fontSize: util.vh("14"),
			
 
				+                },
			
 
				+              },
			
 
				+            },
			
 
				+            data: this.list,
			
 
				+            z: 1,
			
 
				+            animationEasing: "elasticOut",
			
 
				+          },
			
 
				+          {
			
 
				+            // 三角
			
 
				+            type: "pictorialBar",
			
 
				+            symbolPosition: "end",
			
 
				+            data: this.list,
			
 
				+            symbol: "triangle",
			
 
				+            symbolOffset: [0, -16],
			
 
				+            symbolSize: [10, 10],
			
 
				+            symbolRotate: 180,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                borderWidth: 0,
			
 
				+                color: function(params) {
			
 
				+                  var color;
			
 
				+                  if (params.dataIndex == 0 || params.dataIndex == 2) {
			
 
				+                    color = partten.getColor("green");
			
 
				+                  } else if (params.dataIndex == 1 || params.dataIndex == 3) {
			
 
				+                    color = partten.getColor("purple");
			
 
				+                  } else {
			
 
				+                    color = partten.getColor("green");
			
 
				+                  }
			
 
				+                  return color;
			
 
				+                },
			
 
				+                shadowBlur: 2,
			
 
				+                shadowColor: "rgba(255, 255, 255, 0.80)",
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            // 分隔
			
 
				+            type: "pictorialBar",
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "#20314f",
			
 
				+              },
			
 
				+            },
			
 
				+            symbolRepeat: "fixed",
			
 
				+            symbolMargin: 6,
			
 
				+            symbol: "rect",
			
 
				+            symbolClip: true,
			
 
				+            symbolSize: [1, 10],
			
 
				+            symbolPosition: "start",
			
 
				+            symbolOffset: [10, -1],
			
 
				+            symbolBoundingData: this.total,
			
 
				+            symbolRotate: -15,
			
 
				+            data: this.list,
			
 
				+            z: 2,
			
 
				+            animationEasing: "elasticOut",
			
 
				+          },
			
 
				+          {
			
 
				+            // 外边框
			
 
				+            type: "pictorialBar",
			
 
				+            symbol: "rect",
			
 
				+            symbolBoundingData: this.total,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "none",
			
 
				+              },
			
 
				+            },
			
 
				+            label: {
			
 
				+              normal: {
			
 
				+                formatter: (params) => {
			
 
				+                  var text;
			
 
				+                  if (params.dataIndex == 0 || params.dataIndex == 2) {
			
 
				+                    text = "{gm|}{f|  " + params.data + "}";
			
 
				+                  } else if (params.dataIndex == 1 || params.dataIndex == 3) {
			
 
				+                    text = "{pm|}{f|  " + params.data + "}";
			
 
				+                  } else {
			
 
				+                    text = "{gm|}{f|  " + params.data + "}";
			
 
				+                  }
			
 
				+                  return text;
			
 
				+                },
			
 
				+                rich: {
			
 
				+                  f: {
			
 
				+                    color: "#ffffff",
			
 
				+                    fontSize: util.vh("14"),
			
 
				+                    lineHeight: util.vh(20),
			
 
				+                  },
			
 
				+                  gm: {
			
 
				+                    backgroundColor: partten.getColor("green"),
			
 
				+                    width: util.vh(8),
			
 
				+                    height: util.vh(8),
			
 
				+                    lineHeight: util.vh(20),
			
 
				+                    verticalAlign: "middle",
			
 
				+                    borderRadius: [50, 50, 50, 50],
			
 
				+                  },
			
 
				+                  pm: {
			
 
				+                    backgroundColor: partten.getColor("purple"),
			
 
				+                    width: util.vh(8),
			
 
				+                    height: util.vh(8),
			
 
				+                    lineHeight: util.vh(20),
			
 
				+                    verticalAlign: "middle",
			
 
				+                    borderRadius: [50, 50, 50, 50],
			
 
				+                  },
			
 
				+                },
			
 
				+                position: "right",
			
 
				+                distance: 8, // 向右偏移位置
			
 
				+                show: true,
			
 
				+              },
			
 
				+            },
			
 
				+            data: this.datas,
			
 
				+          },
			
 
				+          {
			
 
				+            type: "bar",
			
 
				+            name: "外框",
			
 
				+            barGap: "-120%", // 设置外框粗细
			
 
				+            data: [
			
 
				+              {
			
 
				+                value: this.total,
			
 
				+                itemStyle: {
			
 
				+                  normal: {
			
 
				+                    color: "transparent",
			
 
				+                    borderColor: partten.getColor("green"), // [, "#333"],
			
 
				+                    borderWidth: 1, // 边框宽度
			
 
				+                    // barBorderRadius: 0, //圆角半径
			
 
				+                    opacity: 0.5,
			
 
				+                    label: {
			
 
				+                      // 标签显示位置
			
 
				+                      show: false,
			
 
				+                      position: "top", // insideTop 或者横向的 insideLeft
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+              },
			
 
				+              {
			
 
				+                value: this.total,
			
 
				+                itemStyle: {
			
 
				+                  normal: {
			
 
				+                    color: "transparent",
			
 
				+                    borderColor: partten.getColor("purple"), // [, "#333"],
			
 
				+                    opacity: 0.5,
			
 
				+                    borderWidth: 1, // 边框宽度
			
 
				+                    // barBorderRadius: 0, //圆角半径
			
 
				+                    label: {
			
 
				+                      // 标签显示位置
			
 
				+                      show: false,
			
 
				+                      position: "top", // insideTop 或者横向的 insideLeft
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+              },
			
 
				+              {
			
 
				+                value: this.total,
			
 
				+                itemStyle: {
			
 
				+                  normal: {
			
 
				+                    color: "transparent",
			
 
				+                    borderColor: partten.getColor("green"), // [, "#333"],
			
 
				+                    borderWidth: 1, // 边框宽度
			
 
				+                    opacity: 0.5,
			
 
				+                    // barBorderRadius: 0, //圆角半径
			
 
				+                    label: {
			
 
				+                      // 标签显示位置
			
 
				+                      show: false,
			
 
				+                      position: "top", // insideTop 或者横向的 insideLeft
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+              },
			
 
				+              {
			
 
				+                value: this.total,
			
 
				+                itemStyle: {
			
 
				+                  normal: {
			
 
				+                    color: "transparent",
			
 
				+                    borderColor: partten.getColor("purple"), // [, "#333"],
			
 
				+                    opacity: 0.7,
			
 
				+                    borderWidth: 1, // 边框宽度
			
 
				+                    // barBorderRadius: 0, //圆角半径
			
 
				+                    label: {
			
 
				+                      // 标签显示位置
			
 
				+                      show: false,
			
 
				+                      position: "top", // insideTop 或者横向的 insideLeft
			
 
				+                    },
			
 
				+                  },
			
 
				+                },
			
 
				+              },
			
 
				+            ],
			
 
				+            barWidth: 14,
			
 
				+          },
			
 
				+        ],
			
 
				+      };
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/bar/thermometer.vue
+++ b/src/components/chart/bar/thermometer.vue
@@ -0,0 +1,320 @@
 
				+<template>
			
 
				+  <div class="thermometer"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import * as echarts from "echarts";
			
 
				+export default {
			
 
				+  // 名称
			
 
				+  name: "thermometer",
			
 
				+  // 使用组件
			
 
				+  components: {},
			
 
				+  // 传入参数
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "9.259vh",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "11.111vh",
			
 
				+    },
			
 
				+    min: {
			
 
				+      type: Number,
			
 
				+      default: -20,
			
 
				+    },
			
 
				+    max: {
			
 
				+      type: Number,
			
 
				+      default: 100,
			
 
				+    },
			
 
				+    value: {
			
 
				+      type: Number,
			
 
				+      default: 36.6,
			
 
				+    },
			
 
				+    title: {
			
 
				+      type: String,
			
 
				+      default: "温度",
			
 
				+    },
			
 
				+  },
			
 
				+  // 自定义事件
			
 
				+  emits: {},
			
 
				+  // 数据
			
 
				+  data() {
			
 
				+    return {
			
 
				+      option: {},
			
 
				+    };
			
 
				+  },
			
 
				+  // 函数
			
 
				+  methods: {
			
 
				+    initChart: function() {
			
 
				+      const chart = echarts.init(this.$el);
			
 
				+      let kd = []; // 刻度
			
 
				+      for (var i = 0, len = 135; i <= len; i++) {
			
 
				+        if (i < 30 || i > 130) {
			
 
				+          kd.push("");
			
 
				+        } else {
			
 
				+          if ((i - 30) % 20 === 0) {
			
 
				+            kd.push("-3");
			
 
				+          } else if ((i - 30) % 4 === 0) {
			
 
				+            kd.push("-1");
			
 
				+          } else {
			
 
				+            kd.push("");
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+      let width = this.$el.offsetWidth;
			
 
				+      this.option = {
			
 
				+        backgroundColor: "transparent",
			
 
				+        grid: {
			
 
				+          top: "0",
			
 
				+          left: "0",
			
 
				+          right: "0",
			
 
				+          bottom: "45%",
			
 
				+        },
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            show: false,
			
 
				+            data: [],
			
 
				+            min: 0,
			
 
				+            max: 135,
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            axisTick: "none",
			
 
				+            axisLine: "none",
			
 
				+            offset: 0,
			
 
				+            data: [this.title],
			
 
				+            axisLabel: {
			
 
				+              show: true,
			
 
				+              textStyle: {
			
 
				+                color: "#606769",
			
 
				+                fontSize: "14",
			
 
				+              },
			
 
				+              lineHeight: 40,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            axisTick: "none",
			
 
				+            axisLabel: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            data: [0],
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            name: "单位：件",
			
 
				+            nameGap: "50",
			
 
				+            data: [],
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+              color: "#ffffff",
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            show: false,
			
 
				+            min: 0 - width * 0.35,
			
 
				+            max: width * 0.5,
			
 
				+          },
			
 
				+        ],
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "℃",
			
 
				+            type: "bar",
			
 
				+            yAxisIndex: 0,
			
 
				+            xAxisIndex: 0,
			
 
				+            label: {
			
 
				+              show: true,
			
 
				+              position: "top",
			
 
				+              formatter: "{back|" + "{c}" + "}",
			
 
				+              rich: {
			
 
				+                back: {
			
 
				+                  align: "right",
			
 
				+                  lineHeight: 14,
			
 
				+                  fontSize: 14,
			
 
				+                  fontFamily: "微软雅黑",
			
 
				+                  color: "#05bb4c",
			
 
				+                },
			
 
				+              },
			
 
				+              offset: [25, 15],
			
 
				+            },
			
 
				+            data: [this.value],
			
 
				+            barWidth: 5,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "#05bb4c",
			
 
				+              },
			
 
				+            },
			
 
				+            z: 2,
			
 
				+          },
			
 
				+          {
			
 
				+            name: "温度背景框",
			
 
				+            type: "bar",
			
 
				+            yAxisIndex: 0,
			
 
				+            xAxisIndex: 1,
			
 
				+            barGap: "-100%",
			
 
				+            data: [99],
			
 
				+            barWidth: 8,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "#040c0b",
			
 
				+                barBorderRadius: 5,
			
 
				+              },
			
 
				+            },
			
 
				+            z: 1,
			
 
				+          },
			
 
				+          {
			
 
				+            name: "外框",
			
 
				+            type: "bar",
			
 
				+            yAxisIndex: 0,
			
 
				+            xAxisIndex: 2,
			
 
				+            barGap: "-100%",
			
 
				+            data: [100],
			
 
				+            barWidth: width * 0.1,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "#606769",
			
 
				+                barBorderRadius: width * 0.5,
			
 
				+              },
			
 
				+            },
			
 
				+            z: 0,
			
 
				+          },
			
 
				+          {
			
 
				+            name: "外圆",
			
 
				+            type: "scatter",
			
 
				+            hoverAnimation: false,
			
 
				+            data: [0],
			
 
				+            yAxisIndex: 0,
			
 
				+            xAxisIndex: 2,
			
 
				+            symbolSize: width * 0.15,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "#05bb4c",
			
 
				+                opacity: 1,
			
 
				+              },
			
 
				+            },
			
 
				+            z: 2,
			
 
				+          },
			
 
				+          {
			
 
				+            name: "白圆",
			
 
				+            type: "scatter",
			
 
				+            hoverAnimation: false,
			
 
				+            data: [0],
			
 
				+            yAxisIndex: 0,
			
 
				+            xAxisIndex: 1,
			
 
				+            symbolSize: width * 0.2,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "#040c0b",
			
 
				+                opacity: 1,
			
 
				+              },
			
 
				+            },
			
 
				+            z: 1,
			
 
				+          },
			
 
				+          {
			
 
				+            name: "外圆",
			
 
				+            type: "scatter",
			
 
				+            hoverAnimation: false,
			
 
				+            data: [0],
			
 
				+            yAxisIndex: 0,
			
 
				+            xAxisIndex: 2,
			
 
				+            symbolSize: width * 0.23,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "#606769",
			
 
				+                opacity: 1,
			
 
				+              },
			
 
				+            },
			
 
				+            z: 0,
			
 
				+          },
			
 
				+          {
			
 
				+            name: "刻度",
			
 
				+            type: "bar",
			
 
				+            yAxisIndex: 1,
			
 
				+            xAxisIndex: 3,
			
 
				+            label: {
			
 
				+              normal: {
			
 
				+                show: false,
			
 
				+              },
			
 
				+            },
			
 
				+            barGap: "100%",
			
 
				+            data: kd,
			
 
				+            barWidth: 1,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: "#606769",
			
 
				+                barBorderRadius: width * 1.2,
			
 
				+              },
			
 
				+            },
			
 
				+            z: 0,
			
 
				+          },
			
 
				+        ],
			
 
				+      };
			
 
				+      chart.setOption(this.option);
			
 
				+    },
			
 
				+    setValue: function() {
			
 
				+      this.option.series[0].data[0] = this.value;
			
 
				+      const chart = echarts.getInstanceByDom(this.$el);
			
 
				+      chart.setOption(this.option);
			
 
				+    },
			
 
				+  },
			
 
				+  // 生命周期钩子
			
 
				+  beforeCreate() {
			
 
				+    // 创建前
			
 
				+  },
			
 
				+  created() {
			
 
				+    // 创建后
			
 
				+  },
			
 
				+  beforeMount() {
			
 
				+    // 渲染前
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    // 渲染后
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  beforeUpdate() {
			
 
				+    // 数据更新前
			
 
				+  },
			
 
				+  updated() {
			
 
				+    // 数据更新后
			
 
				+    this.setValue();
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.thermometer {
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/combination/area-bar-chart.vue
+++ b/src/components/chart/combination/area-bar-chart.vue
@@ -0,0 +1,372 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "800px",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    bardata: {
			
 
				+      type: Object,
			
 
				+      default: () => {
			
 
				+        return {
			
 
				+          area: ["风场1", "风场2", "风场3", "风场4", "风场5", "风场6", "风场7", "风场8", "风场9"],
			
 
				+          legend: ["实际电量", "计划检修损失", "非计划检修损失", "限电损失", "受累损失", "性能损失"],
			
 
				+          data: [
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+          ],
			
 
				+        };
			
 
				+      },
			
 
				+    },
			
 
				+    lineData: {
			
 
				+      type: Array,
			
 
				+      default: () => [[200, 350, 400, 500, 600, 700, 800, 900, 1200]],
			
 
				+    },
			
 
				+    areaData: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          name: "1",
			
 
				+          start: 0,
			
 
				+          end: 100,
			
 
				+          state: "green",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "1",
			
 
				+          start: 100,
			
 
				+          end: 200,
			
 
				+          state: "red",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "1",
			
 
				+          start: 200,
			
 
				+          end: 300,
			
 
				+          state: "yellow",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "",
			
 
				+          start: 300,
			
 
				+          end: 400,
			
 
				+          state: "green",
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["健康趋势", "风机健康状态数量"],
			
 
				+    },
			
 
				+    // 显示 legend
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    // 颜色
			
 
				+    color: {
			
 
				+      type: Array,
			
 
				+      default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    legend() {
			
 
				+      let data = this.bardata.legend;
			
 
				+      data.push(this.units[0]);
			
 
				+      return data;
			
 
				+    },
			
 
				+    areaChartData() {
			
 
				+      let data = [];
			
 
				+      for (var i = 0; i < this.areaData.length; i++) {
			
 
				+        let item = this.areaData[i];
			
 
				+        var color = item.color ? item.color : partten.getColor(item.state);
			
 
				+        data.push({
			
 
				+          name: item.name,
			
 
				+          value: [item.start, item.end, item.end - item.start],
			
 
				+          itemStyle: {
			
 
				+            normal: {
			
 
				+              color: color,
			
 
				+            },
			
 
				+          },
			
 
				+          exData: item,
			
 
				+        });
			
 
				+      }
			
 
				+      return data;
			
 
				+    },
			
 
				+    areaMax() {
			
 
				+      let max = 0;
			
 
				+      this.areaData.forEach((value) => {
			
 
				+        if (max < value.end) max = value.end;
			
 
				+      });
			
 
				+      return max;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    renderItem(params, api) {
			
 
				+      var start = api.coord([api.value(0)]);
			
 
				+      var end = api.coord([api.value(1)]);
			
 
				+      var height = api.size([0, 1])[1];
			
 
				+
			
 
				+      var rectShape = echarts.graphic.clipRectByRect(
			
 
				+        {
			
 
				+          x: start[0],
			
 
				+          y: start[1] - height / 2,
			
 
				+          width: end[0] - start[0],
			
 
				+          height: height,
			
 
				+        },
			
 
				+        {
			
 
				+          x: params.coordSys.x,
			
 
				+          y: params.coordSys.y,
			
 
				+          width: params.coordSys.width,
			
 
				+          height: params.coordSys.height,
			
 
				+        }
			
 
				+      );
			
 
				+
			
 
				+      return (
			
 
				+        rectShape && {
			
 
				+          type: "rect",
			
 
				+          transition: ["shape"],
			
 
				+          shape: rectShape,
			
 
				+          style: api.style(),
			
 
				+        }
			
 
				+      );
			
 
				+    },
			
 
				+    initChart() {
			
 
				+      let that = this;
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        grid: {
			
 
				+          left: 16,
			
 
				+          right: 16,
			
 
				+          bottom: 0,
			
 
				+          top: 32,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          show: true,
			
 
				+          trigger: "axis",
			
 
				+          axisPointer: {
			
 
				+            type: "line",
			
 
				+          },
			
 
				+          backgroundColor: "rgba(0,0,0,0.4)",
			
 
				+          borderColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: "#fff",
			
 
				+            fontSize: 14,
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.bardata.legend,
			
 
				+          right: 120,
			
 
				+          icon: "ract",
			
 
				+          itemWidth: 8,
			
 
				+          itemHeight: 8,
			
 
				+          inactiveColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: partten.getColor("grayl"),
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            axisLabel: {
			
 
				+              color: partten.getColor("gray"),
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            data: this.bardata.area,
			
 
				+          },
			
 
				+          {
			
 
				+            show: false,
			
 
				+            min: 0,
			
 
				+            max: this.areaMax,
			
 
				+            axisLabel: {
			
 
				+              show: false,
			
 
				+              formatter: function(val) {
			
 
				+                return Math.max(0, val - 0) + " ms";
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            type: "value",
			
 
				+            name: this.units[0],
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value} ",
			
 
				+              color: partten.getColor("gray"),
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              type: "dashed",
			
 
				+              lineStyle: {
			
 
				+                color: partten.getColor("gray"),
			
 
				+              },
			
 
				+              width: 5,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              lineStyle: {
			
 
				+                type: "dashed",
			
 
				+                dashOffset: 10,
			
 
				+                color: partten.getColor("gray") + 80,
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            type: "value",
			
 
				+            name: this.units[1],
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value} ",
			
 
				+              color: partten.getColor("gray"),
			
 
				+              align: "left",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            data: [(this.areaData && this.areaData[0] && this.areaData[0].name) || ""],
			
 
				+            axisLabel: { show: false },
			
 
				+            splitLine: { show: false },
			
 
				+          },
			
 
				+        ],
			
 
				+        series: [],
			
 
				+      };
			
 
				+
			
 
				+      // line data
			
 
				+      if (this.lineData.length) {
			
 
				+        this.lineData.forEach((ele, index) => {
			
 
				+          option.series.push({
			
 
				+            name: this.units[index] || this.units[0] || "",
			
 
				+            type: "line",
			
 
				+            data: ele,
			
 
				+            smooth: true, //平滑展示
			
 
				+            yAxisIndex: 0,
			
 
				+            lineStyle: {
			
 
				+              color: this.color[index],
			
 
				+            },
			
 
				+            itemStyle: {
			
 
				+              color: this.color[index],
			
 
				+            },
			
 
				+          });
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      // bar data
			
 
				+      for (var i = 0; i < this.bardata.legend.length; i++) {
			
 
				+        option.series.push({
			
 
				+          name: this.bardata.legend[i],
			
 
				+          type: "bar",
			
 
				+          stack: "总量",
			
 
				+          yAxisIndex: 1,
			
 
				+          barWidth: "10%",
			
 
				+          label: {
			
 
				+            show: false,
			
 
				+            position: "insideRight",
			
 
				+          },
			
 
				+          data: this.bardata.data[i],
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      // 区域
			
 
				+      if (this.areaData && this.areaData.length > 0) {
			
 
				+        option.series.push({
			
 
				+          type: "custom",
			
 
				+          renderItem: this.renderItem,
			
 
				+          yAxisIndex: 2,
			
 
				+          xAxisIndex: 1,
			
 
				+          itemStyle: {
			
 
				+            opacity: 0.2,
			
 
				+          },
			
 
				+          tooltip: {
			
 
				+            show: false,
			
 
				+            formatter: function(params) {
			
 
				+              return params.marker + params.name + ": " + params.value[2] + "s";
			
 
				+            },
			
 
				+          },
			
 
				+          encode: {
			
 
				+            x: [1, 2],
			
 
				+            y: 0,
			
 
				+          },
			
 
				+          data: this.areaChartData,
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      chart.on("click", function(e, p) {
			
 
				+        if (e.seriesType == "custom") {
			
 
				+          that.$emit("areaClick", { data: e.data.exData });
			
 
				+        }
			
 
				+      });
			
 
				+    },
			
 
				+  },
			
 
				+  emits: {
			
 
				+    areaClick: null,
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/combination/area-line-chart-2.vue
+++ b/src/components/chart/combination/area-line-chart-2.vue
@@ -0,0 +1,484 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "800px",
			
 
				+    },
			
 
				+    lineData: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          text: "日发电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "8",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "9",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "13",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "14",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "15",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "16",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          text: "上网电量",
			
 
				+          yAxisIndex: 1,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5",
			
 
				+              value: 4,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6",
			
 
				+              value: 5,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7",
			
 
				+              value: 6,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "8",
			
 
				+              value: 7,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "9",
			
 
				+              value: 8,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10",
			
 
				+              value: 7,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11",
			
 
				+              value: 9,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "13",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "14",
			
 
				+              value: 5,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "15",
			
 
				+              value: 12,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "16",
			
 
				+              value: 11,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    areaData: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          name: "1",
			
 
				+          start: 0,
			
 
				+          end: 100,
			
 
				+          state: "green",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "1",
			
 
				+          start: 100,
			
 
				+          end: 200,
			
 
				+          state: "red",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "1",
			
 
				+          start: 200,
			
 
				+          end: 300,
			
 
				+          state: "yellow",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "2",
			
 
				+          start: 300,
			
 
				+          end: 800,
			
 
				+          state: "green",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "3",
			
 
				+          start: 800,
			
 
				+          end: 9000,
			
 
				+          state: "green",
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["健康趋势", "风机健康状态数量"],
			
 
				+    },
			
 
				+    // 显示 legend
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    // 颜色
			
 
				+    color: {
			
 
				+      type: Array,
			
 
				+      default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    legend() {
			
 
				+      let data = [];
			
 
				+      this.lineData.forEach((value, index) => {
			
 
				+        data.push(value.text);
			
 
				+      });
			
 
				+      return data;
			
 
				+    },
			
 
				+    xAxisData() {
			
 
				+      let data = [];
			
 
				+      if (this.lineData.length > 0)
			
 
				+        this.lineData[0].value.forEach((value, index) => {
			
 
				+          data.push(value.text);
			
 
				+        });
			
 
				+      return data;
			
 
				+    },
			
 
				+    yAxisData() {
			
 
				+      let result = [];
			
 
				+      this.units.forEach((value, index) => {
			
 
				+        let data = {
			
 
				+          type: "value",
			
 
				+          name: value,
			
 
				+          axisLabel: {
			
 
				+            formatter: "{value} ",
			
 
				+            color: partten.getColor("gray"),
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            type: "dashed",
			
 
				+            lineStyle: {
			
 
				+              color: partten.getColor("gray"),
			
 
				+            },
			
 
				+            width: 5,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            lineStyle: {
			
 
				+              type: "dashed",
			
 
				+              dashOffset: 10,
			
 
				+              color: partten.getColor("gray") + 80,
			
 
				+            },
			
 
				+          },
			
 
				+        };
			
 
				+        result.push(data);
			
 
				+      });
			
 
				+
			
 
				+      result.push({
			
 
				+        data: [this.areaData[0].name],
			
 
				+        axisLabel: { show: false },
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+    areaChartData() {
			
 
				+      let data = [];
			
 
				+      for (var i = 0; i < this.areaData.length; i++) {
			
 
				+        let item = this.areaData[i];
			
 
				+        var color = item.state;
			
 
				+        data.push({
			
 
				+          name: item.name,
			
 
				+          value: [item.start, item.end, item.end - item.start],
			
 
				+          itemStyle: {
			
 
				+            normal: {
			
 
				+              color: color,
			
 
				+            },
			
 
				+          },
			
 
				+          exData: item,
			
 
				+        });
			
 
				+      }
			
 
				+      return data;
			
 
				+    },
			
 
				+    areaMax() {
			
 
				+      let max = 0;
			
 
				+      this.areaData.forEach((value) => {
			
 
				+        if (max < value.end) max = value.end;
			
 
				+      });
			
 
				+      return max;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    renderItem(params, api) {
			
 
				+      var start = api.coord([api.value(0)]);
			
 
				+      var end = api.coord([api.value(1)]);
			
 
				+      var height = api.size([0, 1])[1];
			
 
				+
			
 
				+      var rectShape = echarts.graphic.clipRectByRect(
			
 
				+        {
			
 
				+          x: start[0],
			
 
				+          y: start[1] - height / 2,
			
 
				+          width: end[0] - start[0],
			
 
				+          height: height,
			
 
				+        },
			
 
				+        {
			
 
				+          x: params.coordSys.x,
			
 
				+          y: params.coordSys.y,
			
 
				+          width: params.coordSys.width,
			
 
				+          height: params.coordSys.height,
			
 
				+        }
			
 
				+      );
			
 
				+
			
 
				+      return (
			
 
				+        rectShape && {
			
 
				+          type: "rect",
			
 
				+          transition: ["shape"],
			
 
				+          shape: rectShape,
			
 
				+          style: api.style(),
			
 
				+        }
			
 
				+      );
			
 
				+    },
			
 
				+    initChart() {
			
 
				+      let that = this;
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        grid: {
			
 
				+          left: 40,
			
 
				+          right: 40,
			
 
				+          bottom: 40,
			
 
				+          top: 32,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          show: true,
			
 
				+          trigger: "axis",
			
 
				+          axisPointer: {
			
 
				+            type: "cross",
			
 
				+          },
			
 
				+          backgroundColor: "rgba(0,0,0,0.4)",
			
 
				+          borderColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: "#fff",
			
 
				+            fontSize: 14,
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.legend,
			
 
				+          right: 120,
			
 
				+          icon: "ract",
			
 
				+          itemWidth: 8,
			
 
				+          itemHeight: 8,
			
 
				+          inactiveColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: partten.getColor("grayl"),
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            axisLabel: {
			
 
				+              color: partten.getColor("gray"),
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            data: this.xAxisData,
			
 
				+          },
			
 
				+          {
			
 
				+            show: false,
			
 
				+            min: 0,
			
 
				+            max: this.areaMax,
			
 
				+            axisLabel: {
			
 
				+              show: false,
			
 
				+              formatter: function(val) {
			
 
				+                return Math.max(0, val - 0) + " ms";
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: this.yAxisData,
			
 
				+        series: [],
			
 
				+      };
			
 
				+
			
 
				+      // line data
			
 
				+      if (this.lineData.length > 0) {
			
 
				+        this.lineData.forEach((value, index) => {
			
 
				+          option.series.push({
			
 
				+            name: value.text,
			
 
				+            type: "line",
			
 
				+            data: value.value,
			
 
				+            smooth: true, //平滑展示
			
 
				+            yAxisIndex: value.yAxisIndex,
			
 
				+            // lineStyle: {
			
 
				+            //   color: partten.getColor("green"),
			
 
				+            // },
			
 
				+            // itemStyle: {
			
 
				+            //   color: partten.getColor("green"),
			
 
				+            // },
			
 
				+          });
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      // 区域
			
 
				+      if (this.areaData && this.areaData.length > 0) {
			
 
				+        option.series.push({
			
 
				+          type: "custom",
			
 
				+          renderItem: this.renderItem,
			
 
				+          yAxisIndex: this.units.length,
			
 
				+          xAxisIndex: 1,
			
 
				+          itemStyle: {
			
 
				+            opacity: 0.2,
			
 
				+          },
			
 
				+          tooltip: {
			
 
				+            show: false,
			
 
				+            formatter: function(params) {
			
 
				+              return params.marker + params.name + ": " + params.value[2] + "s";
			
 
				+            },
			
 
				+          },
			
 
				+          encode: {
			
 
				+            x: [1, 2],
			
 
				+            y: 0,
			
 
				+          },
			
 
				+          data: this.areaChartData,
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      return chart;
			
 
				+    },
			
 
				+  },
			
 
				+  emits: {
			
 
				+    areaClick: null,
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      let that = this;
			
 
				+      let chart = this.initChart();
			
 
				+      chart.on("click", function(e, p) {
			
 
				+        if (e.seriesType == "custom") {
			
 
				+          that.$emit("areaClick", { data: e.data.exData });
			
 
				+        }
			
 
				+      });
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/combination/area-line-chart.vue
+++ b/src/components/chart/combination/area-line-chart.vue
@@ -0,0 +1,480 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "800px",
			
 
				+    },
			
 
				+    lineData: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          text: "日发电量",
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "8",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "9",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "13",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "14",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "15",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "16",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          text: "上网电量",
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5",
			
 
				+              value: 4,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6",
			
 
				+              value: 5,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7",
			
 
				+              value: 6,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "8",
			
 
				+              value: 7,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "9",
			
 
				+              value: 8,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10",
			
 
				+              value: 7,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11",
			
 
				+              value: 9,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "13",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "14",
			
 
				+              value: 5,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "15",
			
 
				+              value: 12,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "16",
			
 
				+              value: 11,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    areaData: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          name: "1",
			
 
				+          start: 0,
			
 
				+          end: 100,
			
 
				+          state: "green",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "1",
			
 
				+          start: 100,
			
 
				+          end: 200,
			
 
				+          state: "red",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "1",
			
 
				+          start: 200,
			
 
				+          end: 300,
			
 
				+          state: "yellow",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "2",
			
 
				+          start: 300,
			
 
				+          end: 800,
			
 
				+          state: "green",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "3",
			
 
				+          start: 800,
			
 
				+          end: 9000,
			
 
				+          state: "green",
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["健康趋势", "风机健康状态数量"],
			
 
				+    },
			
 
				+    // 显示 legend
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    // 颜色
			
 
				+    color: {
			
 
				+      type: Array,
			
 
				+      default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
			
 
				+    },
			
 
				+  },
			
 
				+  data () {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    legend () {
			
 
				+      let data = [];
			
 
				+      this.lineData.forEach((value, index) => {
			
 
				+        data.push(value.text);
			
 
				+      });
			
 
				+      return data;
			
 
				+    },
			
 
				+    xAxisData () {
			
 
				+      let data = [];
			
 
				+      if (this.lineData.length > 0)
			
 
				+        this.lineData[0].value.forEach((value, index) => {
			
 
				+          data.push(value.text);
			
 
				+        });
			
 
				+      return data;
			
 
				+    },
			
 
				+    areaChartData () {
			
 
				+      let data = [];
			
 
				+      for (var i = 0; i < this.areaData.length; i++) {
			
 
				+        let item = this.areaData[i];
			
 
				+        var color = item.color || item.state;
			
 
				+        data.push({
			
 
				+          name: item.name,
			
 
				+          value: [item.start, item.end, item.end - item.start],
			
 
				+          itemStyle: {
			
 
				+            normal: {
			
 
				+              color: color,
			
 
				+            },
			
 
				+          },
			
 
				+          exData: item,
			
 
				+        });
			
 
				+      }
			
 
				+      return data;
			
 
				+    },
			
 
				+    areaMax () {
			
 
				+      let max = 0;
			
 
				+      this.areaData.forEach((value) => {
			
 
				+        if (max < value.end) max = value.end;
			
 
				+      });
			
 
				+      return max;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    renderItem (params, api) {
			
 
				+      var start = api.coord([api.value(0)]);
			
 
				+      var end = api.coord([api.value(1)]);
			
 
				+      var height = api.size([0, 1])[1];
			
 
				+
			
 
				+      var rectShape = echarts.graphic.clipRectByRect(
			
 
				+        {
			
 
				+          x: start[0],
			
 
				+          y: start[1] - height / 2,
			
 
				+          width: end[0] - start[0],
			
 
				+          height: height,
			
 
				+        },
			
 
				+        {
			
 
				+          x: params.coordSys.x,
			
 
				+          y: params.coordSys.y,
			
 
				+          width: params.coordSys.width,
			
 
				+          height: params.coordSys.height,
			
 
				+        }
			
 
				+      );
			
 
				+
			
 
				+      return (
			
 
				+        rectShape && {
			
 
				+          type: "rect",
			
 
				+          transition: ["shape"],
			
 
				+          shape: rectShape,
			
 
				+          style: api.style(),
			
 
				+        }
			
 
				+      );
			
 
				+    },
			
 
				+    initChart () {
			
 
				+      console.log("units:",this.units)
			
 
				+      let that = this;
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        grid: {
			
 
				+          left: 40,
			
 
				+          right: 40,
			
 
				+          bottom: 40,
			
 
				+          top: 32,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          show: true,
			
 
				+          trigger: "axis",
			
 
				+          axisPointer: {
			
 
				+            type: "cross",
			
 
				+          },
			
 
				+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
			
 
				+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
			
 
				+            fontSize: 14,
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.legend,
			
 
				+          right: 120,
			
 
				+          icon: "ract",
			
 
				+          itemWidth: 8,
			
 
				+          itemHeight: 8,
			
 
				+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            axisLabel: {
			
 
				+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            data: this.xAxisData,
			
 
				+          },
			
 
				+          {
			
 
				+            show: false,
			
 
				+            min: 0,
			
 
				+            max: this.areaMax,
			
 
				+            axisLabel: {
			
 
				+              show: false,
			
 
				+              formatter: function (val) {
			
 
				+                return Math.max(0, val - 0) + " ms";
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            type: "value",
			
 
				+            name: this.units[0],
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value} ",
			
 
				+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              type: "dashed",
			
 
				+              lineStyle: {
			
 
				+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+              },
			
 
				+              width: 5,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              lineStyle: {
			
 
				+                type: "dashed",
			
 
				+                dashOffset: 10,
			
 
				+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000" + 80,
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            data: [this.areaData[0].name],
			
 
				+            axisLabel: { show: false },
			
 
				+          },
			
 
				+        ],
			
 
				+        series: [],
			
 
				+      };
			
 
				+
			
 
				+      // line data
			
 
				+      if (this.lineData.length > 0) {
			
 
				+        this.lineData.forEach((value, index) => {
			
 
				+          option.series.push({
			
 
				+            name: value.text,
			
 
				+            type: "line",
			
 
				+            data: value.value,
			
 
				+            smooth: true, //平滑展示
			
 
				+            yAxisIndex: 0,
			
 
				+            // lineStyle: {
			
 
				+            //   color: partten.getColor("green"),
			
 
				+            // },
			
 
				+            // itemStyle: {
			
 
				+            //   color: partten.getColor("green"),
			
 
				+            // },
			
 
				+          });
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      // 区域
			
 
				+      if (this.areaData && this.areaData.length > 0) {
			
 
				+        option.series.push({
			
 
				+          type: "custom",
			
 
				+          renderItem: this.renderItem,
			
 
				+          yAxisIndex: 1,
			
 
				+          xAxisIndex: 1,
			
 
				+          itemStyle: {
			
 
				+            opacity: 0.2,
			
 
				+          },
			
 
				+          tooltip: {
			
 
				+            show: false,
			
 
				+            formatter: function (params) {
			
 
				+              return params.marker + params.name + ": " + params.value[2] + "s";
			
 
				+            },
			
 
				+          },
			
 
				+          encode: {
			
 
				+            x: [1, 2],
			
 
				+            y: 0,
			
 
				+          },
			
 
				+          data: this.areaChartData,
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      return chart;
			
 
				+    },
			
 
				+  },
			
 
				+  emits: {
			
 
				+    areaClick: null,
			
 
				+  },
			
 
				+  created () {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted () {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      let that = this;
			
 
				+      let chart = this.initChart();
			
 
				+      chart.on("click", function(e, p) {
			
 
				+        if (e.seriesType == "custom") {
			
 
				+          that.$emit("areaClick", { data: e.data.exData });
			
 
				+        }
			
 
				+      });
			
 
				+    });
			
 
				+  },
			
 
				+  updated () {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  watch: {
			
 
				+      "$store.state.themeName"() {
			
 
				+        this.initChart();
			
 
				+      },
			
 
				+    },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/combination/bar-line-chart.vue
+++ b/src/components/chart/combination/bar-line-chart.vue
@@ -0,0 +1,355 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "800px",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    bardata: {
			
 
				+      type: Object,
			
 
				+      default: () => {
			
 
				+        return {
			
 
				+          area: [
			
 
				+            "风场1",
			
 
				+            "风场2",
			
 
				+            "风场3",
			
 
				+            "风场4",
			
 
				+            "风场5",
			
 
				+            "风场6",
			
 
				+            "风场7",
			
 
				+            "风场8",
			
 
				+            "风场9",
			
 
				+          ],
			
 
				+          legend: [
			
 
				+            "实际电量",
			
 
				+            "计划检修损失",
			
 
				+            "非计划检修损失",
			
 
				+            "限电损失",
			
 
				+            "受累损失",
			
 
				+            "性能损失",
			
 
				+          ],
			
 
				+          data: [
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+          ],
			
 
				+        };
			
 
				+      },
			
 
				+    },
			
 
				+    lineData: {
			
 
				+      type: Array,
			
 
				+      default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
			
 
				+    },
			
 
				+    lineName: {
			
 
				+      type: String,
			
 
				+      default: "损失电量",
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["(万KWh)", "(风速)"],
			
 
				+    },
			
 
				+    // 显示 legend
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    // 颜色
			
 
				+    color: {
			
 
				+      type: Array,
			
 
				+      default: () => ["#323E6F", "#e17e23", "#ba3237", "#c531c7", "#ffffff", "#EDEB2F"],
			
 
				+    },
			
 
				+    // 每页显示个数
			
 
				+    pageSize: {
			
 
				+      type: Number,
			
 
				+      default: 20,
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      areaData: [],
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    legend() {
			
 
				+      return this.bardata.legend;
			
 
				+    },
			
 
				+    end() {
			
 
				+      var result = 20;
			
 
				+      if (this.areaData) {
			
 
				+        result = parseInt((this.pageSize / this.areaData.length) * 100);
			
 
				+      }
			
 
				+      return result;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        grid: {
			
 
				+          left: 40,
			
 
				+          right: 16,
			
 
				+          bottom: 16,
			
 
				+          top: 16,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.bardata.legend,
			
 
				+          right: 56,
			
 
				+          icon: "ract",
			
 
				+          itemWidth: 8,
			
 
				+          itemHeight: 8,
			
 
				+          inactiveColor: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("gray")
			
 
				+              : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("grayl")
			
 
				+              : "#000",
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor: this.$store.state.themeName === "dark"
			
 
				+              ? "rgba(0,0,0,0.4)"
			
 
				+              : "rgba(255,255,255,0.5)",
			
 
				+          borderColor: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("gray")
			
 
				+              : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
			
 
				+            fontSize: util.vh(16),
			
 
				+          },
			
 
				+        },
			
 
				+        dataZoom: [
			
 
				+          {
			
 
				+            type: "inside",
			
 
				+            start: 0,
			
 
				+            end: this.end,
			
 
				+            yAxisIndex: [0],
			
 
				+          },
			
 
				+          {
			
 
				+            start: 0,
			
 
				+            end: this.end,
			
 
				+            bottom: 40,
			
 
				+            yAxisIndex: [0],
			
 
				+            backgroundColor: "transparent",
			
 
				+            // handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
			
 
				+            handleStyle: {
			
 
				+              color: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("green")
			
 
				+              : partten.getColor("blue"),
			
 
				+            },
			
 
				+            moveHandleSize: 0,
			
 
				+            // dataBackground: {
			
 
				+            //   lineStyle: {
			
 
				+            //     color: partten.getColor("gray"),
			
 
				+            //   },
			
 
				+            //   areaStyle: {
			
 
				+            //     color: partten.getColor("gray"),
			
 
				+            //   },
			
 
				+            // },
			
 
				+            // selectedDataBackground: {
			
 
				+            //   lineStyle: {
			
 
				+            //     color: partten.getColor("yellow"),
			
 
				+            //   },
			
 
				+            //   areaStyle: {
			
 
				+            //     color: partten.getColor("yellow"),
			
 
				+            //   },
			
 
				+            // },
			
 
				+            fillerColor: "transparent",
			
 
				+            textStyle: {
			
 
				+              color: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("grayl")
			
 
				+              : "#000",
			
 
				+            },
			
 
				+            borderColor: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("gray")
			
 
				+              : "#000",
			
 
				+            brushSelect: false,
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            axisLabel: {
			
 
				+              color: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("gray")
			
 
				+              : "#000",
			
 
				+            },
			
 
				+            inverse: true,
			
 
				+            // minInterval: 10,
			
 
				+            // maxInterval: 10,
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            data: this.areaData,
			
 
				+          },
			
 
				+        ],
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "value",
			
 
				+            axisLabel: {
			
 
				+              color: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("gray")
			
 
				+              : "#000",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              type: "dashed",
			
 
				+              lineStyle: {
			
 
				+                color: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("gray")
			
 
				+              : "#000",
			
 
				+              },
			
 
				+              width: 5,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              lineStyle: {
			
 
				+                type: "dashed",
			
 
				+                dashOffset: 10,
			
 
				+                color: this.$store.state.themeName === "dark" ? "#5a6162" : "#000" + 80,
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            type: "value",
			
 
				+            name: "",
			
 
				+            axisLabel: {
			
 
				+              show: false,
			
 
				+              // formatter: "{value}",
			
 
				+              // color: partten.getColor("gray"),
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        series: [],
			
 
				+      };
			
 
				+
			
 
				+      if (this.bardata && this.bardata.legend)
			
 
				+        // bar data
			
 
				+        for (var i = 0; i < this.bardata.legend.length; i++) {
			
 
				+          option.series.push({
			
 
				+            name: this.bardata.legend[i],
			
 
				+            type: "bar",
			
 
				+            stack: "总量",
			
 
				+            barWidth: 16,
			
 
				+            label: {
			
 
				+              show: false,
			
 
				+              position: "insideRight",
			
 
				+            },
			
 
				+            data: this.bardata.data[i],
			
 
				+          });
			
 
				+        }
			
 
				+
			
 
				+      // line data
			
 
				+      if (this.lineData.length > 0) {
			
 
				+        option.series.push({
			
 
				+          name: this.lineName,
			
 
				+          type: "line",
			
 
				+          data: this.lineData,
			
 
				+          smooth: false, //平滑展示
			
 
				+          xAxisIndex: 1,
			
 
				+          lineStyle: {
			
 
				+            color: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("green")
			
 
				+              : partten.getColor("blue"),
			
 
				+          },
			
 
				+          itemStyle: {
			
 
				+            color: this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("green")
			
 
				+              : partten.getColor("blue"),
			
 
				+          },
			
 
				+        });
			
 
				+      }
			
 
				+      chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+    if (this.bardata.area && this.bardata.area.length < this.pageSize) {
			
 
				+      this.areaData = this.bardata.area;
			
 
				+      for (let i = this.bardata.area.length; i <= this.pageSize; i++) {
			
 
				+        this.areaData.push("");
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  beforeUpdate(){
			
 
				+	  this.areaData = this.bardata.area;
			
 
				+  },
			
 
				+  beforeUpdate(){
			
 
				+  	  this.areaData = this.bardata.area;
			
 
				+  },
			
 
				+  watch: {
			
 
				+    bardata(val) {
			
 
				+      if (val.area && val.area.length < this.pageSize) {
			
 
				+        this.areaData = val.area;
			
 
				+        for (let i = val.area.length; i <= this.pageSize; i++) {
			
 
				+          this.areaData.push("");
			
 
				+        }
			
 
				+      }
			
 
				+    },
			
 
				+	"$store.state.themeName"() {
			
 
				+	  this.initChart();
			
 
				+	},
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/combination/health-bar-line-chart.vue
+++ b/src/components/chart/combination/health-bar-line-chart.vue
@@ -0,0 +1,253 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "800px",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    bardata: {
			
 
				+      type: Object,
			
 
				+      default: () => {
			
 
				+        return {
			
 
				+          area: ["风场1", "风场2", "风场3", "风场4", "风场5", "风场6", "风场7", "风场8", "风场9"],
			
 
				+          legend: ["实际电量", "计划检修损失", "非计划检修损失", "限电损失", "受累损失", "性能损失"],
			
 
				+          data: [
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+          ],
			
 
				+        };
			
 
				+      },
			
 
				+    },
			
 
				+    lineData: {
			
 
				+      type: Array,
			
 
				+      // default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["", "风机健康状态数量"],
			
 
				+    },
			
 
				+    // 显示 legend
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    // 颜色
			
 
				+    color: {
			
 
				+      type: Array,
			
 
				+      default: () => ["#05bb4c", "#4b55ae", "#e17e23", "#02BB4C", "#EDB32F", "#EDEB2F"],
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      newbardata:null
			
 
				+    };
			
 
				+  },
			
 
				+    watch: {
			
 
				+    bardata: {
			
 
				+      handler(newValue, oldValue) {
			
 
				+        console.warn(newValue);
			
 
				+        this.newbardata = newValue;
			
 
				+        this.initChart();
			
 
				+      },
			
 
				+      deep: true,
			
 
				+    },
			
 
				+  },
			
 
				+  computed: {
			
 
				+    legend() {
			
 
				+      return this.newbardata.legend;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        grid: {
			
 
				+          left: 16,
			
 
				+          right: 16,
			
 
				+          bottom: 0,
			
 
				+          top: 32,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor: "rgba(0,0,0,0.4)",
			
 
				+          borderColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: "#fff",
			
 
				+            fontSize: 14,
			
 
				+          },
			
 
				+          // formatter: function(param) {
			
 
				+          //   return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
			
 
				+          // },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.newbardata.legend,
			
 
				+          right: 120,
			
 
				+          icon: "ract",
			
 
				+          itemWidth: 8,
			
 
				+          itemHeight: 8,
			
 
				+          inactiveColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: partten.getColor("grayl"),
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            axisLabel: {
			
 
				+              color: partten.getColor("gray"),
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            data: this.newbardata.area,
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            type: "value",
			
 
				+            min: function(value){
			
 
				+               return (value.min-1)%1==0?value.min-1:(value.min-1).toFixed(0);
			
 
				+            },
			
 
				+            max: function(value){
			
 
				+               return value.max; 
			
 
				+            },
			
 
				+            name: this.units[0],
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value} ",
			
 
				+              color: partten.getColor("gray"),
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              type: "dashed",
			
 
				+              lineStyle: {
			
 
				+                color: partten.getColor("gray"),
			
 
				+              },
			
 
				+              width: 5,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              lineStyle: {
			
 
				+                type: "dashed",
			
 
				+                dashOffset: 10,
			
 
				+                color: partten.getColor("gray") + 80,
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            type: "value",
			
 
				+            name: this.units[1],
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value} ",
			
 
				+              color: partten.getColor("gray"),
			
 
				+              align: "left",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        series: [],
			
 
				+      };
			
 
				+
			
 
				+      // line data
			
 
				+      if (this.lineData.length > 0) {
			
 
				+        option.series.push({
			
 
				+          name: this.units[0],
			
 
				+          type: "line",
			
 
				+          data: this.lineData,
			
 
				+          smooth: false, //平滑展示
			
 
				+          yAxisIndex: 0,
			
 
				+          lineStyle: {
			
 
				+            // color: partten.getColor("green"),
			
 
				+            color: "#1a93cf",
			
 
				+          },
			
 
				+          itemStyle: {
			
 
				+            // color: partten.getColor("green"),
			
 
				+            color: "#1a93cf",
			
 
				+          },
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      // bar data
			
 
				+      for (var i = 0; i < this.newbardata.legend.length; i++) {
			
 
				+        option.series.push({
			
 
				+          name: this.newbardata.legend[i],
			
 
				+          type: "bar",
			
 
				+          stack: "总量",
			
 
				+          yAxisIndex: 1,
			
 
				+          barWidth: "10%",
			
 
				+          label: {
			
 
				+            show: false,
			
 
				+            position: "insideRight",
			
 
				+          },
			
 
				+          data: this.newbardata.data[i],
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+    this.newbardata = this.bardata
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/combination/multiple-bar-line-chart.vue
+++ b/src/components/chart/combination/multiple-bar-line-chart.vue
@@ -0,0 +1,437 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "13.889vh",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    barData: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          title: "日发电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "上网电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "购网电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "风速",
			
 
				+          yAxisIndex: 1,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2日",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3日",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7日",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    lineData: {
			
 
				+      type: Object,
			
 
				+      default: () => {
			
 
				+        return {
			
 
				+          name: "风速",
			
 
				+          unit: "km",
			
 
				+          data: [200, 800, 400, 500, 800, 700, 800, 900, 200],
			
 
				+        };
			
 
				+      },
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["(万KWh)", "(风速)"],
			
 
				+    },
			
 
				+    // 显示 legend
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    // 颜色
			
 
				+    color: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        "#05bb4c",
			
 
				+        "#4b55ae",
			
 
				+        "#fa8c16",
			
 
				+        "#f8de5b",
			
 
				+        "#1a93cf",
			
 
				+        "#c531c7",
			
 
				+        "#bd3338",
			
 
				+      ],
			
 
				+    },
			
 
				+    showAnimation: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      firstAnimation: true,
			
 
				+      newbarData: null,
			
 
				+    };
			
 
				+  },
			
 
				+  watch: {
			
 
				+    barData: {
			
 
				+      handler(newValue, oldValue) {
			
 
				+        this.newbarData = newValue;
			
 
				+        this.initChart();
			
 
				+      },
			
 
				+      deep: true,
			
 
				+    },
			
 
				+    lineData : {
			
 
				+      handler(newValue, oldValue) {
			
 
				+        this.newlineData = newValue;
			
 
				+        this.initChart();
			
 
				+      },
			
 
				+      deep: true,
			
 
				+    },
			
 
				+	"$store.state.themeName"() {
			
 
				+	  this.initChart();
			
 
				+	},
			
 
				+  },
			
 
				+  computed: {
			
 
				+    legend() {
			
 
				+      return this.newbarData.map((t) => {
			
 
				+        return t.title;
			
 
				+      });
			
 
				+    },
			
 
				+    xdata() {
			
 
				+      let result = [];
			
 
				+      if (
			
 
				+        this.newbarData &&
			
 
				+        this.newbarData.length > 0 &&
			
 
				+        this.newbarData[0].value.length > 0
			
 
				+      ) {
			
 
				+        result = this.newbarData[0].value.map((t) => {
			
 
				+          return t.text;
			
 
				+        });
			
 
				+      }
			
 
				+      return result;
			
 
				+    },
			
 
				+    ydata() {
			
 
				+      let result = [];
			
 
				+      this.units.forEach((value, index) => {
			
 
				+        let data = null;
			
 
				+        if (index == 0) {
			
 
				+          data = {
			
 
				+            type: "value",
			
 
				+            name: value,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value} ",
			
 
				+              fontSize: 12,
			
 
				+            },
			
 
				+            //分格线
			
 
				+            splitLine: {
			
 
				+              lineStyle: {
			
 
				+                color: "#5a6162",
			
 
				+                type: "dashed",
			
 
				+              },
			
 
				+            },
			
 
				+          };
			
 
				+        } else {
			
 
				+          data = {
			
 
				+            type: "value",
			
 
				+            name: value,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value}",
			
 
				+              fontSize: 12,
			
 
				+            },
			
 
				+            //分格线
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          };
			
 
				+        }
			
 
				+
			
 
				+        result.push(data);
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+    series() {
			
 
				+      let result = [];
			
 
				+      if (this.newbarData && this.newbarData.length > 0) {
			
 
				+        this.newbarData.forEach((value, index) => {
			
 
				+          result.push({
			
 
				+            name: value.title,
			
 
				+            type: "bar",
			
 
				+            barWidth: "10%",
			
 
				+            animation: this.firstAnimation && this.showAnimation,
			
 
				+            yAxisIndex: value.yAxisIndex,
			
 
				+            data: value.value.map((t) => {
			
 
				+              return t.value;
			
 
				+            }),
			
 
				+          });
			
 
				+        });
			
 
				+      }
			
 
				+      return result;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    resize() {},
			
 
				+    initChart() {
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
			
 
				+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.legend,
			
 
				+          right: 56,
			
 
				+          icon: "ract",
			
 
				+          itemWidth: 8,
			
 
				+          itemHeight: 8,
			
 
				+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        grid: {
			
 
				+          top: 32,
			
 
				+          left: 40,
			
 
				+          right: this.ydata.length > 1 ? 40 : 14,
			
 
				+          bottom: 24,
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            data: this.xdata,
			
 
				+            axisPointer: {
			
 
				+              type: "shadow",
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              fontSize: 12,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: this.ydata,
			
 
				+        series: this.series,
			
 
				+      };
			
 
				+
			
 
				+      // line data
			
 
				+      if (this.newlineData && this.newlineData.data.length > 0) {
			
 
				+        option.yAxis.push({
			
 
				+          type: "value",
			
 
				+          name: this.newlineData.name,
			
 
				+          axisLabel: {
			
 
				+            formatter: "{value} ",
			
 
				+            color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            show: false,
			
 
				+            lineStyle: {
			
 
				+              type: "dashed",
			
 
				+              dashOffset: 10,
			
 
				+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000" + 80,
			
 
				+            },
			
 
				+          },
			
 
				+        });
			
 
				+
			
 
				+        option.series.push({
			
 
				+          name: this.newlineData.name,
			
 
				+          type: "line",
			
 
				+          data: this.newlineData.data,
			
 
				+          smooth: true, //平滑展示
			
 
				+          yAxisIndex: option.yAxis.length - 1,
			
 
				+          lineStyle: {
			
 
				+            color: partten.getColor("yellow"),
			
 
				+          },
			
 
				+          itemStyle: {
			
 
				+            color: partten.getColor("yellow"),
			
 
				+          },
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      chart.clear();
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      this.resize = function () {
			
 
				+        chart.resize();
			
 
				+      };
			
 
				+
			
 
				+      window.addEventListener("resize", this.resize);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+    this.newbarData = this.barData;
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+      this.firstAnimation = false;
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  unmounted() {
			
 
				+    window.removeEventListener("resize", this.resize);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/combination/scatter-line-chart.vue
+++ b/src/components/chart/combination/scatter-line-chart.vue
@@ -0,0 +1,804 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "350px",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    data: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          title: "男",
			
 
				+          value: [
			
 
				+            [161.2, 51.6],
			
 
				+            [167.5, 59.0],
			
 
				+            [159.5, 49.2],
			
 
				+            [157.0, 63.0],
			
 
				+            [155.8, 53.6],
			
 
				+            [170.0, 59.0],
			
 
				+            [159.1, 47.6],
			
 
				+            [166.0, 69.8],
			
 
				+            [176.2, 66.8],
			
 
				+            [160.2, 75.2],
			
 
				+            [172.5, 55.2],
			
 
				+            [170.9, 54.2],
			
 
				+            [172.9, 62.5],
			
 
				+            [153.4, 42.0],
			
 
				+            [160.0, 50.0],
			
 
				+            [147.2, 49.8],
			
 
				+            [168.2, 49.2],
			
 
				+            [175.0, 73.2],
			
 
				+            [157.0, 47.8],
			
 
				+            [167.6, 68.8],
			
 
				+            [159.5, 50.6],
			
 
				+            [175.0, 82.5],
			
 
				+            [166.8, 57.2],
			
 
				+            [176.5, 87.8],
			
 
				+            [170.2, 72.8],
			
 
				+            [174.0, 54.5],
			
 
				+            [173.0, 59.8],
			
 
				+            [179.9, 67.3],
			
 
				+            [170.5, 67.8],
			
 
				+            [160.0, 47.0],
			
 
				+            [154.4, 46.2],
			
 
				+            [162.0, 55.0],
			
 
				+            [176.5, 83.0],
			
 
				+            [160.0, 54.4],
			
 
				+            [152.0, 45.8],
			
 
				+            [162.1, 53.6],
			
 
				+            [170.0, 73.2],
			
 
				+            [160.2, 52.1],
			
 
				+            [161.3, 67.9],
			
 
				+            [166.4, 56.6],
			
 
				+            [168.9, 62.3],
			
 
				+            [163.8, 58.5],
			
 
				+            [167.6, 54.5],
			
 
				+            [160.0, 50.2],
			
 
				+            [161.3, 60.3],
			
 
				+            [167.6, 58.3],
			
 
				+            [165.1, 56.2],
			
 
				+            [160.0, 50.2],
			
 
				+            [170.0, 72.9],
			
 
				+            [157.5, 59.8],
			
 
				+            [167.6, 61.0],
			
 
				+            [160.7, 69.1],
			
 
				+            [163.2, 55.9],
			
 
				+            [152.4, 46.5],
			
 
				+            [157.5, 54.3],
			
 
				+            [168.3, 54.8],
			
 
				+            [180.3, 60.7],
			
 
				+            [165.5, 60.0],
			
 
				+            [165.0, 62.0],
			
 
				+            [164.5, 60.3],
			
 
				+            [156.0, 52.7],
			
 
				+            [160.0, 74.3],
			
 
				+            [163.0, 62.0],
			
 
				+            [165.7, 73.1],
			
 
				+            [161.0, 80.0],
			
 
				+            [162.0, 54.7],
			
 
				+            [166.0, 53.2],
			
 
				+            [174.0, 75.7],
			
 
				+            [172.7, 61.1],
			
 
				+            [167.6, 55.7],
			
 
				+            [151.1, 48.7],
			
 
				+            [164.5, 52.3],
			
 
				+            [163.5, 50.0],
			
 
				+            [152.0, 59.3],
			
 
				+            [169.0, 62.5],
			
 
				+            [164.0, 55.7],
			
 
				+            [161.2, 54.8],
			
 
				+            [155.0, 45.9],
			
 
				+            [170.0, 70.6],
			
 
				+            [176.2, 67.2],
			
 
				+            [170.0, 69.4],
			
 
				+            [162.5, 58.2],
			
 
				+            [170.3, 64.8],
			
 
				+            [164.1, 71.6],
			
 
				+            [169.5, 52.8],
			
 
				+            [163.2, 59.8],
			
 
				+            [154.5, 49.0],
			
 
				+            [159.8, 50.0],
			
 
				+            [173.2, 69.2],
			
 
				+            [170.0, 55.9],
			
 
				+            [161.4, 63.4],
			
 
				+            [169.0, 58.2],
			
 
				+            [166.2, 58.6],
			
 
				+            [159.4, 45.7],
			
 
				+            [162.5, 52.2],
			
 
				+            [159.0, 48.6],
			
 
				+            [162.8, 57.8],
			
 
				+            [159.0, 55.6],
			
 
				+            [179.8, 66.8],
			
 
				+            [162.9, 59.4],
			
 
				+            [161.0, 53.6],
			
 
				+            [151.1, 73.2],
			
 
				+            [168.2, 53.4],
			
 
				+            [168.9, 69.0],
			
 
				+            [173.2, 58.4],
			
 
				+            [171.8, 56.2],
			
 
				+            [178.0, 70.6],
			
 
				+            [164.3, 59.8],
			
 
				+            [163.0, 72.0],
			
 
				+            [168.5, 65.2],
			
 
				+            [166.8, 56.6],
			
 
				+            [172.7, 105.2],
			
 
				+            [163.5, 51.8],
			
 
				+            [169.4, 63.4],
			
 
				+            [167.8, 59.0],
			
 
				+            [159.5, 47.6],
			
 
				+            [167.6, 63.0],
			
 
				+            [161.2, 55.2],
			
 
				+            [160.0, 45.0],
			
 
				+            [163.2, 54.0],
			
 
				+            [162.2, 50.2],
			
 
				+            [161.3, 60.2],
			
 
				+            [149.5, 44.8],
			
 
				+            [157.5, 58.8],
			
 
				+            [163.2, 56.4],
			
 
				+            [172.7, 62.0],
			
 
				+            [155.0, 49.2],
			
 
				+            [156.5, 67.2],
			
 
				+            [164.0, 53.8],
			
 
				+            [160.9, 54.4],
			
 
				+            [162.8, 58.0],
			
 
				+            [167.0, 59.8],
			
 
				+            [160.0, 54.8],
			
 
				+            [160.0, 43.2],
			
 
				+            [168.9, 60.5],
			
 
				+            [158.2, 46.4],
			
 
				+            [156.0, 64.4],
			
 
				+            [160.0, 48.8],
			
 
				+            [167.1, 62.2],
			
 
				+            [158.0, 55.5],
			
 
				+            [167.6, 57.8],
			
 
				+            [156.0, 54.6],
			
 
				+            [162.1, 59.2],
			
 
				+            [173.4, 52.7],
			
 
				+            [159.8, 53.2],
			
 
				+            [170.5, 64.5],
			
 
				+            [159.2, 51.8],
			
 
				+            [157.5, 56.0],
			
 
				+            [161.3, 63.6],
			
 
				+            [162.6, 63.2],
			
 
				+            [160.0, 59.5],
			
 
				+            [168.9, 56.8],
			
 
				+            [165.1, 64.1],
			
 
				+            [162.6, 50.0],
			
 
				+            [165.1, 72.3],
			
 
				+            [166.4, 55.0],
			
 
				+            [160.0, 55.9],
			
 
				+            [152.4, 60.4],
			
 
				+            [170.2, 69.1],
			
 
				+            [162.6, 84.5],
			
 
				+            [170.2, 55.9],
			
 
				+            [158.8, 55.5],
			
 
				+            [172.7, 69.5],
			
 
				+            [167.6, 76.4],
			
 
				+            [162.6, 61.4],
			
 
				+            [167.6, 65.9],
			
 
				+            [156.2, 58.6],
			
 
				+            [175.2, 66.8],
			
 
				+            [172.1, 56.6],
			
 
				+            [162.6, 58.6],
			
 
				+            [160.0, 55.9],
			
 
				+            [165.1, 59.1],
			
 
				+            [182.9, 81.8],
			
 
				+            [166.4, 70.7],
			
 
				+            [165.1, 56.8],
			
 
				+            [177.8, 60.0],
			
 
				+            [165.1, 58.2],
			
 
				+            [175.3, 72.7],
			
 
				+            [154.9, 54.1],
			
 
				+            [158.8, 49.1],
			
 
				+            [172.7, 75.9],
			
 
				+            [168.9, 55.0],
			
 
				+            [161.3, 57.3],
			
 
				+            [167.6, 55.0],
			
 
				+            [165.1, 65.5],
			
 
				+            [175.3, 65.5],
			
 
				+            [157.5, 48.6],
			
 
				+            [163.8, 58.6],
			
 
				+            [167.6, 63.6],
			
 
				+            [165.1, 55.2],
			
 
				+            [165.1, 62.7],
			
 
				+            [168.9, 56.6],
			
 
				+            [162.6, 53.9],
			
 
				+            [164.5, 63.2],
			
 
				+            [176.5, 73.6],
			
 
				+            [168.9, 62.0],
			
 
				+            [175.3, 63.6],
			
 
				+            [159.4, 53.2],
			
 
				+            [160.0, 53.4],
			
 
				+            [170.2, 55.0],
			
 
				+            [162.6, 70.5],
			
 
				+            [167.6, 54.5],
			
 
				+            [162.6, 54.5],
			
 
				+            [160.7, 55.9],
			
 
				+            [160.0, 59.0],
			
 
				+            [157.5, 63.6],
			
 
				+            [162.6, 54.5],
			
 
				+            [152.4, 47.3],
			
 
				+            [170.2, 67.7],
			
 
				+            [165.1, 80.9],
			
 
				+            [172.7, 70.5],
			
 
				+            [165.1, 60.9],
			
 
				+            [170.2, 63.6],
			
 
				+            [170.2, 54.5],
			
 
				+            [170.2, 59.1],
			
 
				+            [161.3, 70.5],
			
 
				+            [167.6, 52.7],
			
 
				+            [167.6, 62.7],
			
 
				+            [165.1, 86.3],
			
 
				+            [162.6, 66.4],
			
 
				+            [152.4, 67.3],
			
 
				+            [168.9, 63.0],
			
 
				+            [170.2, 73.6],
			
 
				+            [175.2, 62.3],
			
 
				+            [175.2, 57.7],
			
 
				+            [160.0, 55.4],
			
 
				+            [165.1, 104.1],
			
 
				+            [174.0, 55.5],
			
 
				+            [170.2, 77.3],
			
 
				+            [160.0, 80.5],
			
 
				+            [167.6, 64.5],
			
 
				+            [167.6, 72.3],
			
 
				+            [167.6, 61.4],
			
 
				+            [154.9, 58.2],
			
 
				+            [162.6, 81.8],
			
 
				+            [175.3, 63.6],
			
 
				+            [171.4, 53.4],
			
 
				+            [157.5, 54.5],
			
 
				+            [165.1, 53.6],
			
 
				+            [160.0, 60.0],
			
 
				+            [174.0, 73.6],
			
 
				+            [162.6, 61.4],
			
 
				+            [174.0, 55.5],
			
 
				+            [162.6, 63.6],
			
 
				+            [161.3, 60.9],
			
 
				+            [156.2, 60.0],
			
 
				+            [149.9, 46.8],
			
 
				+            [169.5, 57.3],
			
 
				+            [160.0, 64.1],
			
 
				+            [175.3, 63.6],
			
 
				+            [169.5, 67.3],
			
 
				+            [160.0, 75.5],
			
 
				+            [172.7, 68.2],
			
 
				+            [162.6, 61.4],
			
 
				+            [157.5, 76.8],
			
 
				+            [176.5, 71.8],
			
 
				+            [164.4, 55.5],
			
 
				+            [160.7, 48.6],
			
 
				+            [174.0, 66.4],
			
 
				+            [163.8, 67.3],
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "女",
			
 
				+          value: [
			
 
				+            [174.0, 65.6],
			
 
				+            [175.3, 71.8],
			
 
				+            [193.5, 80.7],
			
 
				+            [186.5, 72.6],
			
 
				+            [187.2, 78.8],
			
 
				+            [181.5, 74.8],
			
 
				+            [184.0, 86.4],
			
 
				+            [184.5, 78.4],
			
 
				+            [175.0, 62.0],
			
 
				+            [184.0, 81.6],
			
 
				+            [180.0, 76.6],
			
 
				+            [177.8, 83.6],
			
 
				+            [192.0, 90.0],
			
 
				+            [176.0, 74.6],
			
 
				+            [174.0, 71.0],
			
 
				+            [184.0, 79.6],
			
 
				+            [192.7, 93.8],
			
 
				+            [171.5, 70.0],
			
 
				+            [173.0, 72.4],
			
 
				+            [176.0, 85.9],
			
 
				+            [176.0, 78.8],
			
 
				+            [180.5, 77.8],
			
 
				+            [172.7, 66.2],
			
 
				+            [176.0, 86.4],
			
 
				+            [173.5, 81.8],
			
 
				+            [178.0, 89.6],
			
 
				+            [180.3, 82.8],
			
 
				+            [180.3, 76.4],
			
 
				+            [164.5, 63.2],
			
 
				+            [173.0, 60.9],
			
 
				+            [183.5, 74.8],
			
 
				+            [175.5, 70.0],
			
 
				+            [188.0, 72.4],
			
 
				+            [189.2, 84.1],
			
 
				+            [172.8, 69.1],
			
 
				+            [170.0, 59.5],
			
 
				+            [182.0, 67.2],
			
 
				+            [170.0, 61.3],
			
 
				+            [177.8, 68.6],
			
 
				+            [184.2, 80.1],
			
 
				+            [186.7, 87.8],
			
 
				+            [171.4, 84.7],
			
 
				+            [172.7, 73.4],
			
 
				+            [175.3, 72.1],
			
 
				+            [180.3, 82.6],
			
 
				+            [182.9, 88.7],
			
 
				+            [188.0, 84.1],
			
 
				+            [177.2, 94.1],
			
 
				+            [172.1, 74.9],
			
 
				+            [167.0, 59.1],
			
 
				+            [169.5, 75.6],
			
 
				+            [174.0, 86.2],
			
 
				+            [172.7, 75.3],
			
 
				+            [182.2, 87.1],
			
 
				+            [164.1, 55.2],
			
 
				+            [163.0, 57.0],
			
 
				+            [171.5, 61.4],
			
 
				+            [184.2, 76.8],
			
 
				+            [174.0, 86.8],
			
 
				+            [174.0, 72.2],
			
 
				+            [177.0, 71.6],
			
 
				+            [186.0, 84.8],
			
 
				+            [167.0, 68.2],
			
 
				+            [171.8, 66.1],
			
 
				+            [182.0, 72.0],
			
 
				+            [167.0, 64.6],
			
 
				+            [177.8, 74.8],
			
 
				+            [164.5, 70.0],
			
 
				+            [192.0, 101.6],
			
 
				+            [175.5, 63.2],
			
 
				+            [171.2, 79.1],
			
 
				+            [181.6, 78.9],
			
 
				+            [167.4, 67.7],
			
 
				+            [181.1, 66.0],
			
 
				+            [177.0, 68.2],
			
 
				+            [174.5, 63.9],
			
 
				+            [177.5, 72.0],
			
 
				+            [170.5, 56.8],
			
 
				+            [182.4, 74.5],
			
 
				+            [197.1, 90.9],
			
 
				+            [180.1, 93.0],
			
 
				+            [175.5, 80.9],
			
 
				+            [180.6, 72.7],
			
 
				+            [184.4, 68.0],
			
 
				+            [175.5, 70.9],
			
 
				+            [180.6, 72.5],
			
 
				+            [177.0, 72.5],
			
 
				+            [177.1, 83.4],
			
 
				+            [181.6, 75.5],
			
 
				+            [176.5, 73.0],
			
 
				+            [175.0, 70.2],
			
 
				+            [174.0, 73.4],
			
 
				+            [165.1, 70.5],
			
 
				+            [177.0, 68.9],
			
 
				+            [192.0, 102.3],
			
 
				+            [176.5, 68.4],
			
 
				+            [169.4, 65.9],
			
 
				+            [182.1, 75.7],
			
 
				+            [179.8, 84.5],
			
 
				+            [175.3, 87.7],
			
 
				+            [184.9, 86.4],
			
 
				+            [177.3, 73.2],
			
 
				+            [167.4, 53.9],
			
 
				+            [178.1, 72.0],
			
 
				+            [168.9, 55.5],
			
 
				+            [157.2, 58.4],
			
 
				+            [180.3, 83.2],
			
 
				+            [170.2, 72.7],
			
 
				+            [177.8, 64.1],
			
 
				+            [172.7, 72.3],
			
 
				+            [165.1, 65.0],
			
 
				+            [186.7, 86.4],
			
 
				+            [165.1, 65.0],
			
 
				+            [174.0, 88.6],
			
 
				+            [175.3, 84.1],
			
 
				+            [185.4, 66.8],
			
 
				+            [177.8, 75.5],
			
 
				+            [180.3, 93.2],
			
 
				+            [180.3, 82.7],
			
 
				+            [177.8, 58.0],
			
 
				+            [177.8, 79.5],
			
 
				+            [177.8, 78.6],
			
 
				+            [177.8, 71.8],
			
 
				+            [177.8, 116.4],
			
 
				+            [163.8, 72.2],
			
 
				+            [188.0, 83.6],
			
 
				+            [198.1, 85.5],
			
 
				+            [175.3, 90.9],
			
 
				+            [166.4, 85.9],
			
 
				+            [190.5, 89.1],
			
 
				+            [166.4, 75.0],
			
 
				+            [177.8, 77.7],
			
 
				+            [179.7, 86.4],
			
 
				+            [172.7, 90.9],
			
 
				+            [190.5, 73.6],
			
 
				+            [185.4, 76.4],
			
 
				+            [168.9, 69.1],
			
 
				+            [167.6, 84.5],
			
 
				+            [175.3, 64.5],
			
 
				+            [170.2, 69.1],
			
 
				+            [190.5, 108.6],
			
 
				+            [177.8, 86.4],
			
 
				+            [190.5, 80.9],
			
 
				+            [177.8, 87.7],
			
 
				+            [184.2, 94.5],
			
 
				+            [176.5, 80.2],
			
 
				+            [177.8, 72.0],
			
 
				+            [180.3, 71.4],
			
 
				+            [171.4, 72.7],
			
 
				+            [172.7, 84.1],
			
 
				+            [172.7, 76.8],
			
 
				+            [177.8, 63.6],
			
 
				+            [177.8, 80.9],
			
 
				+            [182.9, 80.9],
			
 
				+            [170.2, 85.5],
			
 
				+            [167.6, 68.6],
			
 
				+            [175.3, 67.7],
			
 
				+            [165.1, 66.4],
			
 
				+            [185.4, 102.3],
			
 
				+            [181.6, 70.5],
			
 
				+            [172.7, 95.9],
			
 
				+            [190.5, 84.1],
			
 
				+            [179.1, 87.3],
			
 
				+            [175.3, 71.8],
			
 
				+            [170.2, 65.9],
			
 
				+            [193.0, 95.9],
			
 
				+            [171.4, 91.4],
			
 
				+            [177.8, 81.8],
			
 
				+            [177.8, 96.8],
			
 
				+            [167.6, 69.1],
			
 
				+            [167.6, 82.7],
			
 
				+            [180.3, 75.5],
			
 
				+            [182.9, 79.5],
			
 
				+            [176.5, 73.6],
			
 
				+            [186.7, 91.8],
			
 
				+            [188.0, 84.1],
			
 
				+            [188.0, 85.9],
			
 
				+            [177.8, 81.8],
			
 
				+            [174.0, 82.5],
			
 
				+            [177.8, 80.5],
			
 
				+            [171.4, 70.0],
			
 
				+            [185.4, 81.8],
			
 
				+            [185.4, 84.1],
			
 
				+            [188.0, 90.5],
			
 
				+            [188.0, 91.4],
			
 
				+            [182.9, 89.1],
			
 
				+            [176.5, 85.0],
			
 
				+            [175.3, 69.1],
			
 
				+            [175.3, 73.6],
			
 
				+            [188.0, 80.5],
			
 
				+            [188.0, 82.7],
			
 
				+            [175.3, 86.4],
			
 
				+            [170.5, 67.7],
			
 
				+            [179.1, 92.7],
			
 
				+            [177.8, 93.6],
			
 
				+            [175.3, 70.9],
			
 
				+            [182.9, 75.0],
			
 
				+            [170.8, 93.2],
			
 
				+            [188.0, 93.2],
			
 
				+            [180.3, 77.7],
			
 
				+            [177.8, 61.4],
			
 
				+            [185.4, 94.1],
			
 
				+            [168.9, 75.0],
			
 
				+            [185.4, 83.6],
			
 
				+            [180.3, 85.5],
			
 
				+            [174.0, 73.9],
			
 
				+            [167.6, 66.8],
			
 
				+            [182.9, 87.3],
			
 
				+            [160.0, 72.3],
			
 
				+            [180.3, 88.6],
			
 
				+            [167.6, 75.5],
			
 
				+            [186.7, 101.4],
			
 
				+            [175.3, 91.1],
			
 
				+            [175.3, 67.3],
			
 
				+            [175.9, 77.7],
			
 
				+            [175.3, 81.8],
			
 
				+            [179.1, 75.5],
			
 
				+            [181.6, 84.5],
			
 
				+            [177.8, 76.6],
			
 
				+            [182.9, 85.0],
			
 
				+            [177.8, 102.5],
			
 
				+            [184.2, 77.3],
			
 
				+            [179.1, 71.8],
			
 
				+            [176.5, 87.9],
			
 
				+            [188.0, 94.3],
			
 
				+            [174.0, 70.9],
			
 
				+            [167.6, 64.5],
			
 
				+            [170.2, 77.3],
			
 
				+            [167.6, 72.3],
			
 
				+            [188.0, 87.3],
			
 
				+            [174.0, 80.0],
			
 
				+            [176.5, 82.3],
			
 
				+            [180.3, 73.6],
			
 
				+            [167.6, 74.1],
			
 
				+            [188.0, 85.9],
			
 
				+            [180.3, 73.2],
			
 
				+            [167.6, 76.3],
			
 
				+            [183.0, 65.9],
			
 
				+            [183.0, 90.9],
			
 
				+            [179.1, 89.1],
			
 
				+            [170.2, 62.3],
			
 
				+            [177.8, 82.7],
			
 
				+            [179.1, 79.1],
			
 
				+            [190.5, 98.2],
			
 
				+            [177.8, 84.1],
			
 
				+            [180.3, 83.2],
			
 
				+            [180.3, 83.2],
			
 
				+          ],
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    xTitle: {
			
 
				+      type: String,
			
 
				+      default: "x轴标题",
			
 
				+    },
			
 
				+    yTitle: {
			
 
				+      type: String,
			
 
				+      default: "Y轴标题",
			
 
				+    },
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    lineData: {
			
 
				+      type: Object,
			
 
				+      default: () => {
			
 
				+        return {
			
 
				+          xTitle: "折线X",
			
 
				+          yTitle: "折线y",
			
 
				+          legends: ["1", "2", "3"],
			
 
				+          data: [[1, 2, 3, 4]],
			
 
				+        };
			
 
				+      },
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    series() {
			
 
				+      let result = [];
			
 
				+      this.data.forEach((element, index) => {
			
 
				+        result.push({
			
 
				+          name: element.title,
			
 
				+          type: "scatter",
			
 
				+          emphasis: {
			
 
				+            focus: "series",
			
 
				+          },
			
 
				+          data: element.value,
			
 
				+          markLine: {
			
 
				+            data: [
			
 
				+              {
			
 
				+                type: "max",
			
 
				+                name: "最大值",
			
 
				+                label: {
			
 
				+                  color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+                },
			
 
				+              },
			
 
				+              {
			
 
				+                type: "min",
			
 
				+                name: "最小值",
			
 
				+                label: {
			
 
				+                  color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+                },
			
 
				+              },
			
 
				+            ],
			
 
				+          },
			
 
				+        });
			
 
				+      });
			
 
				+      return result;
			
 
				+    },
			
 
				+    legend() {
			
 
				+      let result = [];
			
 
				+
			
 
				+      // if (this.data && this.data.length > 0)
			
 
				+      //   result.push(
			
 
				+      //     this.data.map((t) => {
			
 
				+      //       return t.title;
			
 
				+      //     })
			
 
				+      //   );
			
 
				+
			
 
				+      // if (this.lineData && this.lineData.legends && this.lineData.legends.legends > 0) result.push(this.lineData.legends);
			
 
				+
			
 
				+      this.data.forEach((ele) => {
			
 
				+        result.push(ele.title);
			
 
				+      });
			
 
				+
			
 
				+      this.lineData.legends.forEach((ele) => {
			
 
				+        result.push(ele);
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    resize() {},
			
 
				+    initChart() {
			
 
				+      let that = this;
			
 
				+      const chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        grid: {
			
 
				+          top: 40,
			
 
				+          left: 40,
			
 
				+          right: 64,
			
 
				+          bottom: 24,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          trigger: "item",
			
 
				+          showDelay: 0,
			
 
				+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
			
 
				+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+          textStyle: {
			
 
				+            fontSize: util.vh(16),
			
 
				+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
			
 
				+          },
			
 
				+          formatter(params) {
			
 
				+            if (params.componentType == "markLine") {
			
 
				+              return params.name + "<br />" + params.value;
			
 
				+            }
			
 
				+            var msg = params.seriesName + "<br />";
			
 
				+            msg +=
			
 
				+              params.marker + that.xTitle + "：" + params.value[0] + "<br />";
			
 
				+            msg +=
			
 
				+              params.marker + that.yTitle + "：" + params.value[1] + "<br />";
			
 
				+            return msg;
			
 
				+          },
			
 
				+          axisPointer: {
			
 
				+            show: true,
			
 
				+            type: "cross",
			
 
				+            lineStyle: {
			
 
				+              type: "dashed",
			
 
				+              width: 1,
			
 
				+            },
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.legend,
			
 
				+          right: "40",
			
 
				+          icon: "circle",
			
 
				+          itemWidth: 6,
			
 
				+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            name: this.xTitle,
			
 
				+            type: "value",
			
 
				+            scale: true,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value}",
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            min: 0,
			
 
				+            type: "value",
			
 
				+            name: this.yTitle,
			
 
				+            scale: true,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value}",
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        series: this.series,
			
 
				+      };
			
 
				+
			
 
				+      if (this.lineData && this.lineData.data) {
			
 
				+        option.xAxis.push({
			
 
				+          type: "category",
			
 
				+          // name: this.lineData.xTitle,
			
 
				+          boundaryGap: false,
			
 
				+          axisLabel: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          data: this.lineData.legends,
			
 
				+        });
			
 
				+
			
 
				+        option.yAxis.push({
			
 
				+          type: "value",
			
 
				+          // name: this.lineData.yTitle,
			
 
				+          axisLabel: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          //分格线
			
 
				+          splitLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+        });
			
 
				+
			
 
				+        this.lineData.data.forEach((value, index) => {
			
 
				+          option.series.push({
			
 
				+            name: this.lineData.legends[index],
			
 
				+            type: "line",
			
 
				+            smooth: true,
			
 
				+            showSymbol: false,
			
 
				+            zlevel: index,
			
 
				+            lineStyle: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            yAxisIndex: 0,
			
 
				+            xAxisIndex: 1,
			
 
				+            data: value,
			
 
				+          });
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      chart.clear();
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      this.resize = function () {
			
 
				+        chart.resize();
			
 
				+      };
			
 
				+
			
 
				+      window.addEventListener("resize", this.resize);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  unmounted() {
			
 
				+    window.removeEventListener("resize", this.resize);
			
 
				+  },
			
 
				+  watch: {
			
 
				+      "$store.state.themeName"() {
			
 
				+        this.initChart();
			
 
				+      },
			
 
				+    },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/combination/vertival-bar-line-chart.vue
+++ b/src/components/chart/combination/vertival-bar-line-chart.vue
@@ -0,0 +1,247 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multiple-bar-chart",
			
 
				+  componentName: "multiple-bar-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "800px",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    bardata: {
			
 
				+      type: Object,
			
 
				+      default: () => {
			
 
				+        return {
			
 
				+          area: ["风场1", "风场2", "风场3", "风场4", "风场5", "风场6", "风场7", "风场8", "风场9"],
			
 
				+          legend: ["实际电量", "计划检修损失", "非计划检修损失", "限电损失", "受累损失", "性能损失"],
			
 
				+          data: [
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
			
 
				+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
			
 
				+          ],
			
 
				+        };
			
 
				+      },
			
 
				+    },
			
 
				+    lineData: {
			
 
				+      type: Array,
			
 
				+      // default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["", "风机健康状态数量"],
			
 
				+    },
			
 
				+    // 显示 legend
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    // 颜色
			
 
				+    color: {
			
 
				+      type: Array,
			
 
				+      default: () => ["#05bb4c", "#4b55ae", "#e17e23", "#02BB4C", "#EDB32F", "#EDEB2F"],
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      newbardata:null
			
 
				+    };
			
 
				+  },
			
 
				+    watch: {
			
 
				+    bardata: {
			
 
				+      handler(newValue, oldValue) {
			
 
				+        console.warn(newValue);
			
 
				+        this.newbardata = newValue;
			
 
				+        this.initChart();
			
 
				+      },
			
 
				+      deep: true,
			
 
				+    },
			
 
				+	"$store.state.themeName"() {
			
 
				+	  this.initChart();
			
 
				+	},
			
 
				+  },
			
 
				+  computed: {
			
 
				+    legend() {
			
 
				+      return this.newbardata.legend;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      let chart = echarts.init(this.$el);
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        grid: {
			
 
				+          left: 16,
			
 
				+          right: 16,
			
 
				+          bottom: 0,
			
 
				+          top: 32,
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
			
 
				+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
			
 
				+            fontSize: 14,
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.newbardata.legend,
			
 
				+          right: 120,
			
 
				+          icon: "ract",
			
 
				+          itemWidth: 8,
			
 
				+          itemHeight: 8,
			
 
				+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            axisLabel: {
			
 
				+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            data: this.newbardata.area,
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            type: "value",
			
 
				+            name: this.units[0],
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value} ",
			
 
				+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              type: "dashed",
			
 
				+              lineStyle: {
			
 
				+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+              },
			
 
				+              width: 5,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              lineStyle: {
			
 
				+                type: "dashed",
			
 
				+                dashOffset: 10,
			
 
				+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000" + 80,
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            type: "value",
			
 
				+            name: this.units[1],
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value} ",
			
 
				+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
			
 
				+              align: "left",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            axisTick: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+        series: [],
			
 
				+      };
			
 
				+
			
 
				+      // line data
			
 
				+      // if (this.lineData.length > 0) {
			
 
				+      //   option.series.push({
			
 
				+      //     name: this.units[0],
			
 
				+      //     type: "line",
			
 
				+      //     data: this.lineData,
			
 
				+      //     smooth: false, //平滑展示
			
 
				+      //     yAxisIndex: 0,
			
 
				+      //     lineStyle: {
			
 
				+      //       // color: partten.getColor("green"),
			
 
				+      //       color: "#323E6F",
			
 
				+      //     },
			
 
				+      //     itemStyle: {
			
 
				+      //       // color: partten.getColor("green"),
			
 
				+      //       color: "#323E6F",
			
 
				+      //     },
			
 
				+      //   });
			
 
				+      // }
			
 
				+
			
 
				+      // bar data
			
 
				+      for (var i = 0; i < this.newbardata.legend.length; i++) {
			
 
				+        option.series.push({
			
 
				+          name: this.newbardata.legend[i],
			
 
				+          type: "bar",
			
 
				+          stack: "总量",
			
 
				+          yAxisIndex: 1,
			
 
				+          barWidth: "10%",
			
 
				+          label: {
			
 
				+            show: false,
			
 
				+            position: "insideRight",
			
 
				+          },
			
 
				+          data: this.newbardata.data[i],
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      chart.setOption(option);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+    this.newbardata = this.bardata
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/line/arrow-dash-line-chart.vue
+++ b/src/components/chart/line/arrow-dash-line-chart.vue
@@ -0,0 +1,301 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "multi-arrow-line-chart",
			
 
				+  componentName: "multi-arrow-line-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "13.889vh",
			
 
				+    },
			
 
				+    // 数据
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          title: "功率",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "0m/s",
			
 
				+              value: 1,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2m/s",
			
 
				+              value: 2,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3m/s",
			
 
				+              value: 16,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4m/s",
			
 
				+              value: 3,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5m/s",
			
 
				+              value: 3,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6m/s",
			
 
				+              value: 31,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7m/s",
			
 
				+              value: 33,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "8m/s",
			
 
				+              value: 43,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "9m/s",
			
 
				+              value: 3,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10m/s",
			
 
				+              value: 3,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11m/s",
			
 
				+              value: 31,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12m/s",
			
 
				+              value: 3,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "13m/s",
			
 
				+              value: 3,
			
 
				+              show: true,
			
 
				+              size: 12,
			
 
				+              route: -90,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["()"],
			
 
				+    },
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      color: ["#606769"],
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    legend() {
			
 
				+      return this.list.map((t) => {
			
 
				+        return t.title;
			
 
				+      });
			
 
				+    },
			
 
				+    xdata() {
			
 
				+      return this.list[0].value.map((t) => {
			
 
				+        return t.text;
			
 
				+      });
			
 
				+    },
			
 
				+    yAxis() {
			
 
				+      let result = [];
			
 
				+      this.units.forEach((value, index) => {
			
 
				+        result.push({
			
 
				+          type: "value",
			
 
				+          name: value,
			
 
				+          axisLabel: {
			
 
				+            formatter: "{value}",
			
 
				+            fontSize: util.vh(14),
			
 
				+          },
			
 
				+          //分格线
			
 
				+          splitLine: {
			
 
				+            lineStyle: {
			
 
				+              color: partten.getColor("gray") + 55,
			
 
				+              type: "dashed",
			
 
				+            },
			
 
				+          },
			
 
				+        });
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+    series() {
			
 
				+      let result = [];
			
 
				+
			
 
				+      this.list.forEach((value, index) => {
			
 
				+        var data = value.value.map((t) => {
			
 
				+          return t.value;
			
 
				+        });
			
 
				+
			
 
				+        var arrowArr = [];
			
 
				+        data.forEach((dvalue, dindex) => {
			
 
				+          var item = dvalue;
			
 
				+          if (value.value[dindex].show) {
			
 
				+            arrowArr.push({
			
 
				+              symbol: "arrow",
			
 
				+              symbolSize: value.value[dindex].size,
			
 
				+              symbolRotate: value.value[dindex].route,
			
 
				+              value: item,
			
 
				+            });
			
 
				+          } else {
			
 
				+            arrowArr.push({ symbol: "none", value: item });
			
 
				+          }
			
 
				+        });
			
 
				+        result.push({
			
 
				+          name: value.title,
			
 
				+          type: "line",
			
 
				+          smooth: true,
			
 
				+          zlevel: index,
			
 
				+          lineStyle: {
			
 
				+            type: "dotted", //dashed
			
 
				+          },
			
 
				+          yAxisIndex: value.yAxisIndex,
			
 
				+          data: arrowArr,
			
 
				+        });
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      const chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor: "rgba(0,0,0,0.4)",
			
 
				+          borderColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: "#fff",
			
 
				+            fontSize: util.vh(16),
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.legend,
			
 
				+          right: 56,
			
 
				+          icon: "circle",
			
 
				+          itemWidth: 6,
			
 
				+          inactiveColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: partten.getColor("grayl"),
			
 
				+            fontsize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        grid: {
			
 
				+          top: util.vh(32),
			
 
				+          left: util.vh(40),
			
 
				+          right: util.vh(40),
			
 
				+          bottom: util.vh(24),
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            boundaryGap: false,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value}",
			
 
				+              fontSize: util.vh(14),
			
 
				+              textStyle: {
			
 
				+                color: partten.getColor("gray"),
			
 
				+              },
			
 
				+            },
			
 
				+            data: this.xdata,
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: this.yAxis,
			
 
				+        series: this.series,
			
 
				+      };
			
 
				+
			
 
				+      chart.clear();
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      this.resize = function() {
			
 
				+        chart.resize();
			
 
				+      };
			
 
				+
			
 
				+      window.addEventListener("resize", this.resize);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  unmounted() {
			
 
				+    window.removeEventListener("resize", this.resize);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/line/arrow-line-chart.vue
+++ b/src/components/chart/line/arrow-line-chart.vue
@@ -0,0 +1,304 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "normal-line-chart",
			
 
				+  componentName: "normal-line-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "13.889vh",
			
 
				+    },
			
 
				+    // 数据
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          title: "日发电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "8",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "9",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "13",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "14",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "15",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "16",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "上网电量",
			
 
				+          yAxisIndex: 0,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "1",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "2",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "3",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "4",
			
 
				+              value: 3,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "5",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "6",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "7",
			
 
				+              value: 2,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    units: {
			
 
				+      type: Array,
			
 
				+      default: () => ["(MW)"],
			
 
				+    },
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    legend() {
			
 
				+      return this.list.map((t) => {
			
 
				+        return t.title;
			
 
				+      });
			
 
				+    },
			
 
				+    xdata() {
			
 
				+      return this.list[0].value.map((t) => {
			
 
				+        return t.text;
			
 
				+      });
			
 
				+    },
			
 
				+    yAxis() {
			
 
				+      let result = [];
			
 
				+      this.units.forEach((value, index) => {
			
 
				+        result.push({
			
 
				+          type: "value",
			
 
				+          name: value,
			
 
				+          axisLabel: {
			
 
				+            formatter: "{value}",
			
 
				+            fontSize: util.vh(14),
			
 
				+          },
			
 
				+          //分格线
			
 
				+          splitLine: {
			
 
				+            lineStyle: {
			
 
				+              color: partten.getColor("gray") + 55,
			
 
				+              type: "dashed",
			
 
				+            },
			
 
				+          },
			
 
				+        });
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+    series() {
			
 
				+      let result = [];
			
 
				+
			
 
				+      this.list.forEach((value, index) => {
			
 
				+        var data = value.value.map((t) => {
			
 
				+          return t.value;
			
 
				+        });
			
 
				+        const lastvalue = data[data.length - 1];
			
 
				+        data[data.length - 1] = {
			
 
				+          symbol: "arrow",
			
 
				+          symbolSize: 12,
			
 
				+          symbolRotate: -90,
			
 
				+          value: lastvalue,
			
 
				+        };
			
 
				+
			
 
				+        result.push({
			
 
				+          name: value.title,
			
 
				+          type: "line",
			
 
				+          smooth: true,
			
 
				+          zlevel: index,
			
 
				+          lineStyle: {
			
 
				+            normal: {
			
 
				+              color: this.color[index],
			
 
				+              width: 1,
			
 
				+            },
			
 
				+          },
			
 
				+          yAxisIndex: value.yAxisIndex,
			
 
				+          data: data,
			
 
				+        });
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initChart() {
			
 
				+      const chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor: "rgba(0,0,0,0.4)",
			
 
				+          borderColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: "#fff",
			
 
				+            fontSize: util.vh(16),
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.legend,
			
 
				+          right: 56,
			
 
				+          icon: "circle",
			
 
				+          itemWidth: 6,
			
 
				+          inactiveColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: partten.getColor("grayl"),
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        grid: {
			
 
				+          top: util.vh(32),
			
 
				+          left: util.vh(40),
			
 
				+          right: util.vh(40),
			
 
				+          bottom: util.vh(24),
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            boundaryGap: false,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value}",
			
 
				+              fontSize: util.vh(14),
			
 
				+              textStyle: {
			
 
				+                color: partten.getColor("gray"),
			
 
				+              },
			
 
				+            },
			
 
				+            data: this.xdata,
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: this.yAxis,
			
 
				+        series: this.series,
			
 
				+      };
			
 
				+
			
 
				+      chart.clear();
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      this.resize = function() {
			
 
				+        chart.resize();
			
 
				+      };
			
 
				+
			
 
				+      window.addEventListener("resize", this.resize);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.id = "pie-chart-" + util.newGUID();
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  unmounted() {
			
 
				+    window.removeEventListener("resize", this.resize);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/line/double-line-chart.vue
+++ b/src/components/chart/line/double-line-chart.vue
@@ -0,0 +1,317 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "double-line-chart",
			
 
				+  componentName: "double-line-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "13.889vh",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          title: "绿线",
			
 
				+          smooth: true,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "",
			
 
				+              value: 0,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "0:00",
			
 
				+              value: 20,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10:00",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11:00",
			
 
				+              value: 40,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12:00",
			
 
				+              value: 10,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "13:00",
			
 
				+              value: 15,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "14:00",
			
 
				+              value: 30,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "15:00",
			
 
				+              value: 40,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "",
			
 
				+              value: 10,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "黄线",
			
 
				+          smooth: true,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "",
			
 
				+              value: 0,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "0:00",
			
 
				+              value: 40,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10:00",
			
 
				+              value: 20,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11:00",
			
 
				+              value: 20,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12:00",
			
 
				+              value: 10,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "13:00",
			
 
				+              value: 40,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "14:00",
			
 
				+              value: 50,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "15:00",
			
 
				+              value: 40,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "",
			
 
				+              value: 10,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    unit: {
			
 
				+      type: String,
			
 
				+      default: "",
			
 
				+    },
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: false,
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16", "#1DA0D7", "#DD5044"],
			
 
				+      newlist: null,
			
 
				+    };
			
 
				+  },
			
 
				+  watch: {
			
 
				+    list: {
			
 
				+      handler(newValue, oldValue) {
			
 
				+        console.warn(newValue);
			
 
				+        this.newlist = newValue;
			
 
				+        this.$nextTick(() => {
			
 
				+          this.initChart();
			
 
				+        });
			
 
				+      },
			
 
				+      deep: true,
			
 
				+    },
			
 
				+    "$store.state.themeName"() {
			
 
				+      this.initChart();
			
 
				+    },
			
 
				+  },
			
 
				+  computed: {
			
 
				+    colorValue() {
			
 
				+      return partten.getColor(this.color);
			
 
				+    },
			
 
				+    datas() {
			
 
				+      return this.newlist.map((t) => {
			
 
				+        return t.value;
			
 
				+      });
			
 
				+    },
			
 
				+    legend() {
			
 
				+      if (this.newlist) {
			
 
				+        return this.newlist.map((t) => {
			
 
				+          return t.title;
			
 
				+        });
			
 
				+      }
			
 
				+    },
			
 
				+    xdata() {
			
 
				+      return this.newlist[0].value.map((t) => {
			
 
				+        return t.text;
			
 
				+      });
			
 
				+    },
			
 
				+    series() {
			
 
				+      let result = [];
			
 
				+      this.newlist.forEach((value, index) => {
			
 
				+        result.push({
			
 
				+          name: value.title,
			
 
				+          type: "line",
			
 
				+          smooth: value.smooth,
			
 
				+          showSymbol: false,
			
 
				+          zlevel: index,
			
 
				+          lineStyle: {
			
 
				+            normal: {
			
 
				+              color: this.color[index],
			
 
				+              width: 1,
			
 
				+            },
			
 
				+          },
			
 
				+          yAxisIndex: value.yAxisIndex,
			
 
				+          data: value.value.map((t) => {
			
 
				+            return t.value;
			
 
				+          }),
			
 
				+        });
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+    yAxis() {
			
 
				+      let result = [];
			
 
				+      result.push({
			
 
				+        type: "value",
			
 
				+        name: this.unit,
			
 
				+        axisLabel: {
			
 
				+          formatter: "{value}",
			
 
				+          fontSize: util.vh(14),
			
 
				+        },
			
 
				+        boundaryGap: false,
			
 
				+        //分格线
			
 
				+        splitLine: {
			
 
				+          show: false,
			
 
				+        },
			
 
				+      });
			
 
				+      return result;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    resize() {},
			
 
				+    initChart() {
			
 
				+      const chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor:
			
 
				+            this.$store.state.themeName === "dark"
			
 
				+              ? "rgba(0,0,0,0.4)"
			
 
				+              : "rgba(255,255,255,0.4)",
			
 
				+          borderColor:
			
 
				+            this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("gray")
			
 
				+              : "#000",
			
 
				+          textStyle: {
			
 
				+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
			
 
				+            fontSize: util.vh(16),
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.legend,
			
 
				+          right: 56,
			
 
				+          icon: "circle",
			
 
				+          itemWidth: 6,
			
 
				+          inactiveColor:
			
 
				+            this.$store.state.themeName === "dark"
			
 
				+              ? partten.getColor("gray")
			
 
				+              : "#000",
			
 
				+          textStyle: {
			
 
				+            color:
			
 
				+              this.$store.state.themeName === "dark"
			
 
				+                ? partten.getColor("grayl")
			
 
				+                : "#000",
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        grid: {
			
 
				+          top: 16,
			
 
				+          left: 40,
			
 
				+          right: 15,
			
 
				+          bottom: 24,
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            boundaryGap: false,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value}",
			
 
				+              textStyle: {
			
 
				+                color:
			
 
				+                  this.$store.state.themeName === "dark"
			
 
				+                    ? partten.getColor("gray")
			
 
				+                    : "#000",
			
 
				+                fontSize: util.vh(10),
			
 
				+              },
			
 
				+            },
			
 
				+            data: this.xdata,
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: this.yAxis,
			
 
				+        series: this.series,
			
 
				+      };
			
 
				+
			
 
				+      chart.clear();
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      this.resize = function () {
			
 
				+        chart.resize();
			
 
				+      };
			
 
				+
			
 
				+      window.addEventListener("resize", this.resize);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.id = "pie-chart-" + util.newGUID();
			
 
				+    });
			
 
				+    this.newlist = this.list;
			
 
				+    console.warn(this.list);
			
 
				+    console.warn(this.newlist);
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  unmounted() {
			
 
				+    window.removeEventListener("resize", this.resize);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/line/double-line-chartold.vue
+++ b/src/components/chart/line/double-line-chartold.vue
@@ -0,0 +1,289 @@
 
				+<template>
			
 
				+  <div class="chart" :id="id"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import util from "@/helper/util.js";
			
 
				+import partten from "@/helper/partten.js";
			
 
				+import * as echarts from "echarts";
			
 
				+
			
 
				+export default {
			
 
				+  name: "double-line-chart",
			
 
				+  componentName: "double-line-chart",
			
 
				+  props: {
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: "100%",
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: "13.889vh",
			
 
				+    },
			
 
				+    // 传入数据
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => [
			
 
				+        {
			
 
				+          title: "绿线",
			
 
				+          smooth: true,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "",
			
 
				+              value: 0,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "0:00",
			
 
				+              value: 20,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10:00",
			
 
				+              value: 1,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11:00",
			
 
				+              value: 40,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12:00",
			
 
				+              value: 10,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "13:00",
			
 
				+              value: 15,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "14:00",
			
 
				+              value: 30,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "15:00",
			
 
				+              value: 40,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "",
			
 
				+              value: 10,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+        {
			
 
				+          title: "黄线",
			
 
				+          smooth: true,
			
 
				+          value: [
			
 
				+            {
			
 
				+              text: "",
			
 
				+              value: 0,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "0:00",
			
 
				+              value: 40,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "10:00",
			
 
				+              value: 20,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "11:00",
			
 
				+              value: 20,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "12:00",
			
 
				+              value: 10,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "13:00",
			
 
				+              value: 40,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "14:00",
			
 
				+              value: 50,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "15:00",
			
 
				+              value: 40,
			
 
				+            },
			
 
				+            {
			
 
				+              text: "",
			
 
				+              value: 10,
			
 
				+            },
			
 
				+          ],
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    // 单位
			
 
				+    unit: {
			
 
				+      type: String,
			
 
				+      default: "",
			
 
				+    },
			
 
				+    showLegend: {
			
 
				+      type: Boolean,
			
 
				+      default: false,
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      id: "",
			
 
				+      chart: null,
			
 
				+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    colorValue() {
			
 
				+      return partten.getColor(this.color);
			
 
				+    },
			
 
				+    datas() {
			
 
				+      return this.list.map((t) => {
			
 
				+        return t.value;
			
 
				+      });
			
 
				+    },
			
 
				+    legend() {
			
 
				+      if (this.newlist) {
			
 
				+        return this.newlist.map((t) => {
			
 
				+          return t.title;
			
 
				+        });
			
 
				+      } else {
			
 
				+        return "";
			
 
				+      }
			
 
				+    },
			
 
				+    xdata() {
			
 
				+      if (this.list) {
			
 
				+        return this.list[0].value.map((t) => {
			
 
				+          return t.text;
			
 
				+        });
			
 
				+      } else {
			
 
				+        return "";
			
 
				+      }
			
 
				+    },
			
 
				+    series() {
			
 
				+      let result = [];
			
 
				+      this.list.forEach((value, index) => {
			
 
				+        result.push({
			
 
				+          name: value.title,
			
 
				+          type: "line",
			
 
				+          smooth: value.smooth,
			
 
				+          showSymbol: false,
			
 
				+          zlevel: index,
			
 
				+          lineStyle: {
			
 
				+            normal: {
			
 
				+              color: this.color[index],
			
 
				+              width: 1,
			
 
				+            },
			
 
				+          },
			
 
				+          yAxisIndex: value.yAxisIndex,
			
 
				+          data: value.value.map((t) => {
			
 
				+            return t.value;
			
 
				+          }),
			
 
				+        });
			
 
				+      });
			
 
				+
			
 
				+      return result;
			
 
				+    },
			
 
				+    yAxis() {
			
 
				+      let result = [];
			
 
				+      result.push({
			
 
				+        type: "value",
			
 
				+        name: this.unit,
			
 
				+        axisLabel: {
			
 
				+          formatter: "{value}",
			
 
				+          fontSize: util.vh(14),
			
 
				+        },
			
 
				+        boundaryGap: false,
			
 
				+        //分格线
			
 
				+        splitLine: {
			
 
				+          show: false,
			
 
				+        },
			
 
				+      });
			
 
				+      return result;
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    resize() {},
			
 
				+    initChart() {
			
 
				+      const chart = echarts.init(this.$el);
			
 
				+
			
 
				+      let option = {
			
 
				+        color: this.color,
			
 
				+        tooltip: {
			
 
				+          trigger: "axis",
			
 
				+          backgroundColor: "rgba(0,0,0,0.4)",
			
 
				+          borderColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: "#fff",
			
 
				+            fontSize: util.vh(16),
			
 
				+          },
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: this.showLegend,
			
 
				+          data: this.legend,
			
 
				+          right: 56,
			
 
				+          icon: "circle",
			
 
				+          itemWidth: 6,
			
 
				+          inactiveColor: partten.getColor("gray"),
			
 
				+          textStyle: {
			
 
				+            color: partten.getColor("grayl"),
			
 
				+            fontSize: 12,
			
 
				+          },
			
 
				+        },
			
 
				+        grid: {
			
 
				+          top: 16,
			
 
				+          left: 32,
			
 
				+          right: 8,
			
 
				+          bottom: 24,
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            type: "category",
			
 
				+            boundaryGap: false,
			
 
				+            axisLabel: {
			
 
				+              formatter: "{value}",
			
 
				+              textStyle: {
			
 
				+                color: partten.getColor("gray"),
			
 
				+                fontSize: util.vh(14),
			
 
				+              },
			
 
				+            },
			
 
				+            data: this.xdata,
			
 
				+          },
			
 
				+        ],
			
 
				+        yAxis: this.yAxis,
			
 
				+        series: this.series,
			
 
				+      };
			
 
				+
			
 
				+      chart.clear();
			
 
				+      chart.setOption(option);
			
 
				+
			
 
				+      this.resize = function() {
			
 
				+        chart.resize();
			
 
				+      };
			
 
				+
			
 
				+      window.addEventListener("resize", this.resize);
			
 
				+    },
			
 
				+  },
			
 
				+  created() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.id = "pie-chart-" + util.newGUID();
			
 
				+    });
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$el.style.width = this.width;
			
 
				+      this.$el.style.height = this.height;
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  updated() {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.initChart();
			
 
				+    });
			
 
				+  },
			
 
				+  unmounted() {
			
 
				+    window.removeEventListener("resize", this.resize);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.chart {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/chart/line/img-line-chart.vue
+++ b/src/components/chart/line/img-line-chart.vue