init project

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+webpack.config.js
+.vscode
+.vscode/
+.vs
+.vs/
+package-lock.json

.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/"

README.md

@@ -0,0 +1,140 @@
+# electronic-map
+
+## 项目运行
+```
+npm install
+npm run serve
+```
+
+## 项目打包
+
+```
+npm run build
+```
+
+# 查看 vue cli webpack配置
+```
+vue inspect > webpack.config.js
+```
+
+
+
+# 开发文档
+
+## 文件目录结构
+```
+-src
+ --- assets		-- 静态文件
+ 	--- icon		-- 图标
+ 		--- svg			-- svg图标
+ 	--- style		-- 公共样式
+ 	--- font		-- 字体
+ --- component  -- 自定义组件
+     --- chart  -- 图表组件
+         --- bar    -- 柱状体
+         --- line   -- 折线图
+         --- pie    -- 饼状图
+     --- coms   -- 自定义UI组件
+     	---	table 	-- 表格组件
+     	--- panel	-- panel组件
+     	--- card	-- 自定义卡片
+     	--- ...		-- 更多自定义组件
+ --- helper     -- 小工具
+ 	--- partten 	-- js端全局常量,引入即可使用 目前只有颜色
+ --- router     -- 路由
+     --- index.js   
+ --- store      -- 状态管理 可使用vuex
+ --- views      -- 页面 - 有路由管理跳转
+     --- layout     -- 页面布局
+     --- Home       -- 领导驾驶舱
+     --- Agc        -- AGC页面
+     --- ...		-- 其他页面
+```
+
+## 样式
+
+项目中使用Less语言处理样式
+
+### 公共样式
+
+在assets/styles文件夹中为公共样式 
+其中包含**样式变量**及**公共样式**
+
+#### 样式变量
+
+* 参见 assets/styles/common 文件夹中的文件
+``` less
+@green: #05bb4c;
+@yellow: #f8de5b;
+@blue: #597ef7;
+```
+
+* 使用方式：在项目中可直接`@green`即可使用
+``` \less
+color:@green;
+```
+
+### 公共样式
+
+`assets/styles`除common的文件为公共样式，采用原子性方式设计样式class，可直接在HTML中使用
+
+1. color：通用颜色
+2. font：通用字体字号
+3. svg：svg相关样式
+
+## 布局
+
+栅格化布局
+
+采用element ui 源码直接引入，可直接参考element ui
+https://element.faas.ele.me/#/zh-CN/component/layout
+
+* 注意: 修改布局组件名称 直接为 Row 和 Col即可
+```vue
+  <Row type="flex">
+      <Col :span="6">
+        <Row type="flex">
+          <Col :span="24">
+          </Col>
+        </Row>
+        <Row type="flex">
+          <Col :span="24">
+          </Col>
+        </Row>
+        <Row type="flex">
+          <Col :span="24">
+          </Col>
+        </Row>
+      </Col>
+      <Col :span="12">
+      </Col>
+      <Col :span="6">
+        <Row type="flex">
+          <Col :span="24">
+          </Col>
+        </Row>
+        <Row type="flex">
+          <Col :span="24">
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+```
+
+## svg-icon使用
+1. 将SVG图标添加至 `assets/icon/svg` 文件夹中,svg图片由webpack统一打包,放置到对应文件夹即可
+2. 在组件中引入`svg-icon`组件
+```vue
+import SvgIcon from "@/components/coms/icon/svg-icon.vue";
+```
+3. 使用svg
+```html
+<!-- svgid svg图片的id ，打包规则为 svg-文件名 -->
+<!-- 如 svg图片名为arrow-down.svg 其svgid 为 svg-arrow-down -->
+<!-- 外层样式为公共样式 在 assets/styles/svg.less 中查看 -->
+ <div class="svg-icon svg-icon-white">
+    <svg-icon svgid="svg-arrow-down" />
+</div>
+```
+
+## 版本更新

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -0,0 +1,74 @@
+{
+  "name": "electronic-map",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "echarts": "^5.1.1",
+    "echarts-gl": "^2.0.4",
+    "font-awesome": "^4.7.0",
+    "vivus": "^0.4.6",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-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",
+    "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"
+  ]
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <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>

src/assets/dataService/README.md

@@ -0,0 +1 @@
+# 用于存放json数据文件 如果数据过大则需要单独打包

src/assets/icon/svg/all.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path d="M74.979,37.488c0,10.371-0.086,37.479-0.086,37.479s-27.07,0.01-37.402,0.01C16.785,74.977,0,58.193,0,37.488
+	S16.785,0,37.49,0S74.979,16.783,74.979,37.488z M124.619,74.977c-10.371,0-37.479-0.086-37.479-0.086s-0.01-27.07-0.01-37.402
+	C87.131,16.783,103.916,0,124.619,0s37.49,16.783,37.49,37.488S145.324,74.977,124.619,74.977z M87.131,124.533
+	c0-10.371,0.086-37.479,0.086-37.479s27.07-0.01,37.402-0.01c20.705,0,37.49,16.785,37.49,37.488s-16.785,37.488-37.488,37.488
+	S87.131,145.238,87.131,124.533z M37.49,87.045c10.371,0,37.479,0.086,37.479,0.086s0.01,27.07,0.01,37.402
+	c0,20.705-16.785,37.488-37.488,37.488S0,145.238,0,124.533S16.785,87.045,37.49,87.045z"/>
+</svg>

src/assets/icon/svg/arrow-down.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<path d="M185.918,63.985L54.822,90.807l81.865,66.316L185.918,63.985z"/>
+	<path d="M53.921,86.397l131.095-26.821c1.023-0.211,2.09-0.059,3.014,0.43c2.197,1.164,3.033,3.887,1.871,6.083l-49.24,93.14
+		c-0.137,0.257-0.297,0.501-0.48,0.727c-1.563,1.932-4.396,2.229-6.328,0.667L51.967,94.311c-0.804-0.66-1.354-1.58-1.553-2.602
+		C49.916,89.273,51.486,86.896,53.921,86.397z M177.492,70.302L65.063,93.305l70.203,56.872L177.492,70.302z"/>
+	<path d="M143.225,72.088C122.551-26.775,4.499,12.116,4.499,12.116c89.34-10.693,95.08,68.902,95.08,68.902L143.225,72.088z"/>
+	<path d="M0.089,13.008c-0.452-2.25,0.858-4.479,3.044-5.176c2.515-0.83,62.089-20.01,105.268,4.891
+		c20.375,11.785,33.576,31.406,39.234,58.462c0.492,2.434-1.076,4.807-3.508,5.311l-43.605,8.922
+		c-0.189,0.038-0.382,0.064-0.574,0.078c-2.479,0.181-4.635-1.684-4.814-4.162c-0.021-0.301-2.557-31.005-25.864-50.132
+		C53.521,18.286,31.936,13.362,5.035,16.581c-2.298,0.275-4.429-1.236-4.931-3.494L0.089,13.008L0.089,13.008z M103.404,75.61
+		l34.406-7.04c-5.553-22.105-16.951-38.257-33.92-48.054C85.626,9.971,63.535,8.213,44.948,9.415
+		c11.023,2.623,21.309,7.713,30.084,14.881c18.756,15.496,25.478,36.923,27.827,48.406C103.078,73.769,103.258,74.753,103.404,75.61
+		z"/>
+</g>
+</svg>

src/assets/icon/svg/arrow-dpwn-1.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="200px" height="200px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
+	<path fill="#333" d="M64.679,104.912l41.987-41.986l9.428,9.434l-58.047,58.046L0,72.36l9.426-9.434l41.921,41.919V0h13.333
+	V104.912L64.679,104.912z" />
+</svg>

src/assets/icon/svg/arrow-up-1.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
+<path fill="#FFFFFF" d="M51.415,25.494L9.428,67.48L0,58.046L58.047,0l58.046,58.046l-9.426,9.434L64.747,25.561v104.846H51.415
+	V25.494L51.415,25.494z"/>
+</svg>

src/assets/icon/svg/arrow-up.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<path fill="#4D4D4D" d="M136.688,4.502L54.822,70.819L185.918,97.64L136.688,4.502z"/>
+	<path fill="#4D4D4D" d="M50.414,69.917c0.199-1.021,0.749-1.941,1.553-2.602l81.885-66.313c1.932-1.563,4.766-1.265,6.328,0.667
+		c0.184,0.226,0.344,0.47,0.48,0.727l49.24,93.14c1.162,2.196,0.326,4.92-1.871,6.083c-0.924,0.488-1.99,0.641-3.014,0.43
+		L53.921,75.228C51.486,74.73,49.916,72.352,50.414,69.917z M135.266,11.448L65.063,68.321l112.43,23.003L135.266,11.448z"/>
+	<path fill="#4D4D4D" d="M99.579,80.608c0,0-5.74,79.595-95.08,68.902c0,0,118.052,38.891,138.726-59.972L99.579,80.608z"/>
+	<path fill="#4D4D4D" d="M0.089,148.617l0.016-0.078c0.502-2.258,2.633-3.77,4.931-3.494c26.9,3.219,48.485-1.705,64.233-14.621
+		c23.308-19.127,25.844-49.832,25.864-50.132c0.18-2.479,2.336-4.343,4.814-4.162c0.192,0.014,0.385,0.04,0.574,0.078l43.605,8.922
+		c2.432,0.504,4,2.877,3.508,5.311c-5.658,27.056-18.859,46.677-39.234,58.462c-43.179,24.9-102.753,5.721-105.268,4.891
+		C0.947,153.096-0.363,150.867,0.089,148.617L0.089,148.617z M102.859,88.924c-2.35,11.482-9.071,32.91-27.827,48.406
+		c-8.775,7.168-19.061,12.258-30.084,14.881c18.587,1.201,40.678-0.557,58.942-11.102c16.969-9.797,28.367-25.949,33.92-48.054
+		l-34.406-7.04C103.258,86.873,103.078,87.857,102.859,88.924z"/>
+</g>
+</svg>

src/assets/icon/svg/cockpit/受累图标.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+	<g id="图层_1">
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" opacity="0.3" d="M99.25,0c54.815,0,99.25,44.435,99.25,99.25
+		s-44.435,99.25-99.25,99.25C44.435,198.5,0,154.065,0,99.25S44.435,0,99.25,0z" />
+	</g>
+	<g id="图层_2">
+		<g>
+			<g>
+				<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M99.875,0C44.715,0,0,44.714,0,99.875
+				c0,55.16,44.715,99.875,99.875,99.875s99.875-44.715,99.875-99.875C199.75,44.714,155.035,0,99.875,0z M99.896,193.77
+				c-51.932,0-94.036-42.056-94.036-93.935C5.861,47.956,47.964,5.9,99.896,5.9c51.933,0,94.032,42.055,94.032,93.935
+				C193.929,151.714,151.829,193.77,99.896,193.77z" />
+			</g>
+		</g>
+	</g>
+	<g id="图层_5">
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M60.518,135.525h5.914l6.618-38.637h-8.647v4.699h-2.694
+		c0-2.482,0-4.965,0-7.447l11.631-9.539v-5.644h-8.937v4.7h-2.694c0-2.482,0-4.96,0-7.442l11.631-9.534v-2
+		c0-2.472,2.063-4.135,4.367-4.155c3.441,0,6.878-0.009,10.319-0.009c2.318,0,4.415,1.692,4.415,4.164v2.015l11.63,9.539
+		c0,2.473,0,4.95,0,7.423h-2.694v-4.7H92.44v5.659l11.63,9.539c0,1.596,0,3.191,0,4.787h-2.694v-2.053h-8.642l0.352,2.053H85.89
+		l2.02-2.053H77.869l5.022,5.09l1.552-1.577l-0.766,4.792l-0.786-0.801l-7.008,7.092l7.008,8.43l2.217-2.666h0.583v1.941
+		l-1.701,2.049l1.701,2.049v2.65l-2.8-3.373l-10.773,12.961h15.299v-18.148h47.226v18.148h4.839v3.957c-26.321,0-52.644,0-78.965,0
+		V135.525L60.518,135.525z M75.083,113.17l-3.485,20.33l10.19-12.262L75.083,113.17L75.083,113.17z M77.517,98.951l-1.754,10.242
+		l5.933-6.01L77.517,98.951L77.517,98.951z M78.091,91.871l3.808-5.49l-3.808-5.49V91.871L78.091,91.871z M82.926,84.896
+		l4.116-5.938h-8.228L82.926,84.896L82.926,84.896z M87.688,80.992l-3.731,5.389l3.731,5.389V80.992L87.688,80.992z M82.926,87.865
+		l-4.343,6.276h8.69L82.926,87.865L82.926,87.865z M78.091,74.297l3.644-3.711l-3.644-3.711V74.297L78.091,74.297z M82.926,69.372
+		l3.933-4.006c-2.631,0-5.239-0.01-7.871-0.01L82.926,69.372L82.926,69.372z M87.688,66.947l-3.572,3.639l3.572,3.64V66.947
+		L87.688,66.947z M82.926,71.8l-4.329,4.41h8.656L82.926,71.8L82.926,71.8z M92.44,87.914v6.228h7.592L92.44,87.914L92.44,87.914z
+		 M65.728,94.141h7.611v-6.242L65.728,94.141L65.728,94.141z M92.44,69.993v6.217h7.586L92.44,69.993L92.44,69.993z M65.738,76.21
+		h7.601v-6.232L65.738,76.21L65.738,76.21z M135.916,100.695h-9.365v-4.077h0.429v-2.13h-0.429h-5.755h-0.415v2.13h0.415v6.405
+		h-1.008v-2.328H86.146l-1.947,12.172v2.621h53.665v-2.621L135.916,100.695L135.916,100.695z M95.699,135.525h7.813v-14.369h-7.813
+		V135.525L95.699,135.525z M122.646,121.156h-7.813v9.438h7.813V121.156L122.646,121.156z" />
+	</g>
+</svg>

src/assets/icon/svg/cockpit/待机图标.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+	<g id="图层_1">
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#4B55AE" opacity="0.3" d="M99.25,0c54.815,0,99.25,44.435,99.25,99.25
+		s-44.435,99.25-99.25,99.25C44.435,198.5,0,154.065,0,99.25S44.435,0,99.25,0z" />
+	</g>
+	<g id="图层_2">
+		<g>
+			<g>
+				<path fill-rule="evenodd" clip-rule="evenodd" fill="#4B55AE" d="M99.875,0C44.715,0,0,44.714,0,99.875
+				c0,55.16,44.715,99.875,99.875,99.875s99.875-44.715,99.875-99.875C199.75,44.714,155.035,0,99.875,0z M99.896,193.77
+				c-51.932,0-94.036-42.056-94.036-93.935C5.861,47.956,47.964,5.9,99.896,5.9c51.933,0,94.032,42.055,94.032,93.935
+				C193.929,151.714,151.829,193.77,99.896,193.77z" />
+			</g>
+		</g>
+	</g>
+	<g id="图层_3">
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#4B55AE" d="M125.391,133.789c0.779,0,1.409,0.666,1.409,1.484
+		c0,0.82,0,6.666,0,6.666H73.2c0,0,0-5.846,0-6.666c0-0.818,0.631-1.484,1.411-1.484h4.709
+		c0.233-19.775,12.508-26.151,12.508-34.144c0-8.031-12.5-7.093-12.613-32.698h-4.604c-0.78,0-1.411-3.613-1.411-4.433
+		s0-4.454,0-4.454h53.6c0,0,0,3.635,0,4.454s-0.63,4.433-1.409,4.433h-4.317c-0.115,25.605-12.614,24.667-12.614,32.698
+		c0,7.992,12.271,14.368,12.503,34.144H125.391z M104.547,99.646c0-8.067,12.494-7.093,12.609-32.698H83.127
+		C83.246,92.553,95.74,91.578,95.74,99.646c0,7.754-12.27,14.297-12.504,34.144h2.137c0.502-1.762,2.171-3.877,5.049-5.449
+		l3.74-2.009c2.353-1.278,3.763-2.142,4.233-2.591c0.467-0.445,1.001-1.441,1.595-2.992c0.622,1.551,1.154,2.547,1.608,2.992
+		c0.45,0.449,1.847,1.313,4.186,2.591l3.723,2.009c2.864,1.572,4.524,3.688,5.022,5.449h2.521
+		C116.815,113.942,104.547,107.399,104.547,99.646z M101.609,95.289c-0.34,0.7-0.622,2.03-0.847,4
+		c-0.058,0.595-0.186,1.485-0.379,2.679c-0.203-1.193-0.325-2.084-0.388-2.679c-0.225-1.97-0.507-3.3-0.846-4
+		c-0.343-0.7-1.31-1.956-2.894-3.775l-3.534-4.063c-2.41-2.74-3.957-5.81-4.64-7c-0.44-0.299,24.954-0.811,24.57-0.554
+		c-0.705,1.193-2.256,4.813-4.657,7.554l-3.511,4.063C102.909,93.333,101.947,94.589,101.609,95.289z" />
+	</g>
+</svg>

src/assets/icon/svg/cockpit/故障图标.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+	<g id="图层_1">
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#4B55AE" opacity="0.3" d="M99.25,0c54.815,0,99.25,44.435,99.25,99.25
+		s-44.435,99.25-99.25,99.25C44.435,198.5,0,154.065,0,99.25S44.435,0,99.25,0z" />
+	</g>
+	<g id="图层_2">
+		<g>
+			<g>
+				<path fill-rule="evenodd" clip-rule="evenodd" fill="#4B55AE" d="M99.875,0C44.715,0,0,44.714,0,99.875
+				c0,55.16,44.715,99.875,99.875,99.875s99.875-44.715,99.875-99.875C199.75,44.714,155.035,0,99.875,0z M99.896,193.77
+				c-51.932,0-94.036-42.056-94.036-93.935C5.861,47.956,47.964,5.9,99.896,5.9c51.933,0,94.032,42.055,94.032,93.935
+				C193.929,151.714,151.829,193.77,99.896,193.77z" />
+			</g>
+		</g>
+	</g>
+	<g id="图层_4">
+		<g>
+			<g>
+				<path fill="#4B55AE" d="M105.201,119.328c0,0,3.275,1.497,6.033,2.646c-1.523-2.463-10.066-11.155-15.033-16.131
+				c-1.029,0.331-2.105,0.563-3.239,0.563c-6.142,0-11.15-5.249-11.15-11.704c0-6.445,5.008-11.694,11.15-11.694
+				c4.799,0,8.868,3.225,10.432,7.708l0.326-0.35c0,0,7.936,9.059,13.529,15.047l0.934-2.382c0,0,9.545-3.945,9.545-4.486v-8.016
+				c0-0.553-9.563-4.196-9.563-4.196l-1.758-4.477c0,0,4.086-9.889,3.727-10.266l-5.406-5.666c-0.373-0.386-9.592,4.127-9.592,4.127
+				l-4.254-1.842c0,0-3.751-10.02-4.269-10.02h-7.63c-0.53,0-4.005,10.04-4.005,10.04l-4.247,1.849c0,0-9.412-4.29-9.771-3.905
+				l-5.398,5.667c-0.376,0.395,3.924,10.079,3.924,10.079l-1.756,4.464c0,0-9.54,3.942-9.54,4.478v8.02
+				c0,0.562,9.563,4.214,9.563,4.214l1.751,4.459c0,0-4.078,9.882-3.719,10.255l5.402,5.682c0.363,0.381,9.585-4.134,9.585-4.134
+				l4.26,1.851c0,0,3.755,10.012,4.272,10.012h7.63c0.526,0,4.01-10.042,4.01-10.042L105.201,119.328z M141.809,105.493l-7.703-8.26
+				c0,0-12.283,14.017-13.076,14.017c-0.803,0-13.084-14.017-13.084-14.017l-7.698,8.26c0,0,13.079,12.874,13.079,14.041
+				c0,1.146-13.079,14.027-13.079,14.027l7.698,8.249c0,0,12.182-14.027,13.084-14.027c0.9,0,13.076,14.027,13.076,14.027
+				l7.703-8.249c0,0-13.088-13.089-13.088-14.027C128.721,118.558,141.809,105.493,141.809,105.493z" />
+			</g>
+		</g>
+	</g>
+</svg>

src/assets/icon/svg/cockpit/检修图标.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+	<g id="图层_1">
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#4B55AE" opacity="0.3" d="M99.25,0c54.815,0,99.25,44.435,99.25,99.25
+		s-44.435,99.25-99.25,99.25C44.435,198.5,0,154.065,0,99.25S44.435,0,99.25,0z" />
+	</g>
+	<g id="图层_2">
+		<g>
+			<g>
+				<path fill-rule="evenodd" clip-rule="evenodd" fill="#4B55AE" d="M99.875,0C44.715,0,0,44.714,0,99.875
+				c0,55.16,44.715,99.875,99.875,99.875s99.875-44.715,99.875-99.875C199.75,44.714,155.035,0,99.875,0z M99.896,193.77
+				c-51.932,0-94.036-42.056-94.036-93.935C5.861,47.956,47.964,5.9,99.896,5.9c51.933,0,94.032,42.055,94.032,93.935
+				C193.929,151.714,151.829,193.77,99.896,193.77z" />
+			</g>
+		</g>
+	</g>
+	<g id="图层_5">
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#4B55AE" d="M140.332,71.354c3.147,7.737,1.648,16.974-4.529,23.264
+		c-6.801,6.928-17.081,8.007-25.064,3.417l-5.777,6.422l4.119,4.213l2.461-2.508c1.26-1.28,3.302-1.28,4.56,0l19.974,20.546
+		c1.259,1.284,1.259,3.361,0,4.647l-9.12,9.282c-1.259,1.284-3.299,1.284-4.558,0l-19.97-20.547c-1.258-1.277-1.258-3.36,0-4.641
+		l2.247-2.292l-3.925-4.008L73.13,139.885c-2.518,2.563-6.601,2.563-9.119,0l-2.277-2.324c-2.519-2.562-2.519-6.724,0-9.286
+		l31.461-26.837L72.302,80.094H65.7l-7.63-12.512l6.146-6.269l12.559,7.824l0.087,6.586l21.14,21.615l6.146-5.25
+		c-6.008-8.346-5.384-20.102,2.025-27.649c6.146-6.259,15.164-7.814,22.737-4.667l-13.547,13.607l11.397,11.606L140.332,71.354z
+		 M69.303,131.55c-1.259-1.279-3.301-1.279-4.56,0c-1.259,1.284-1.259,3.361,0,4.642c1.259,1.284,3.301,1.284,4.56,0
+		C70.562,134.911,70.562,132.834,69.303,131.55z" />
+	</g>
+</svg>

src/assets/icon/svg/cockpit/离线图标.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
+	 height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g id="图层_1">
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" opacity="0.3" d="M99.25,0c54.815,0,99.25,44.435,99.25,99.25
+		s-44.435,99.25-99.25,99.25C44.435,198.5,0,154.065,0,99.25S44.435,0,99.25,0z"/>
+</g>
+<g id="图层_2">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M99.875,0C44.715,0,0,44.714,0,99.875
+				c0,55.16,44.715,99.875,99.875,99.875s99.875-44.715,99.875-99.875C199.75,44.714,155.035,0,99.875,0z M99.896,193.77
+				c-51.932,0-94.036-42.056-94.036-93.935C5.861,47.956,47.964,5.9,99.896,5.9c51.933,0,94.032,42.055,94.032,93.935
+				C193.929,151.714,151.829,193.77,99.896,193.77z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_4">
+	<g>
+		<g>
+			<path fill="#FFFFFF" d="M144.75,80.001l-0.259-0.195c-24.684-26.468-64.651-26.38-89.237,0.234
+				c-0.387,0.416-0.387,1.1,0.005,1.525l8.802,9.526c0.386,0.421,1.017,0.421,1.403,0c19.033-20.607,50.008-20.602,69.039,0.005
+				c0.382,0.41,1.013,0.416,1.399,0l8.807-9.532l0.029-0.039C145.126,81.111,145.137,80.417,144.75,80.001z M128.795,94.999
+				c-16.559-16.708-42.578-16.347-58.701,1.113c-0.386,0.415-0.386,1.1,0.005,1.52l8.559,9.262c0.381,0.417,1.011,0.417,1.398-0.004
+				c7.653-8.284,18.649-10.792,28.333-7.534c-0.434,0.4-0.865,0.804-1.275,1.248c-1.608,1.741-2.896,3.695-3.883,5.774
+				c-5.176-1.214-10.693,0.351-15.468,5.331c-0.391,0.406-0.611,0.65,0.117,1.438l12.063,12.795l1.949-2.024
+				c0.998,3.403,2.729,6.609,5.221,9.309c8.324,9.007,21.815,9.013,30.138,0c8.32-9.009,8.32-23.613,0-32.627
+				C134.796,97.941,131.885,96.088,128.795,94.999z M130.301,131.568l-8.117-8.789l-8.12,8.789l-5.421-5.865l8.12-8.788
+				l-4.175-4.519c0.044-0.387-0.269-0.57-0.508-0.834c-0.52-0.522-1.058-0.998-1.604-1.451l-1.834-1.985l5.421-5.87l8.12,8.789
+				l8.117-8.789l5.416,5.866l-8.114,8.787l8.12,8.794L130.301,131.568z"/>
+		</g>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/cockpit/运行图标.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+	<g id="图层_1">
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" opacity="0.3" d="M99.25,0c54.815,0,99.25,44.435,99.25,99.25
+		s-44.435,99.25-99.25,99.25C44.435,198.5,0,154.065,0,99.25S44.435,0,99.25,0z" />
+	</g>
+	<g id="图层_2">
+		<g>
+			<g>
+				<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M99.875,0C44.715,0,0,44.714,0,99.875
+				c0,55.16,44.715,99.875,99.875,99.875s99.875-44.715,99.875-99.875C199.75,44.714,155.035,0,99.875,0z M99.896,193.77
+				c-51.932,0-94.036-42.056-94.036-93.935C5.861,47.956,47.964,5.9,99.896,5.9c51.933,0,94.032,42.055,94.032,93.935
+				C193.929,151.714,151.829,193.77,99.896,193.77z" />
+			</g>
+		</g>
+	</g>
+	<g id="图层_4">
+		<g>
+			<g>
+				<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M142.895,122.068l-32.667-16.407
+				c-0.03-4.531-2.647-8.817-6.946-10.634c-0.193-0.083-0.391-0.157-0.587-0.228c1.012-1.305,1.869-2.723,2.42-3.988
+				c0.495-1.134,0.354-1.537,0.119-2.749L94.713,57.694c-0.727-3.41-3.861-3.497-3.913,0.556l2.613,37.508
+				c-2.044,1.239-3.725,3.157-4.693,5.604c-0.854,2.162-1.024,4.442-0.622,6.575c-1.598-0.254-3.209-0.315-4.548-0.175
+				c-1.195,0.122-1.462,0.446-2.356,1.27l-20.133,24.615c-2.491,2.359-1.002,5.214,2.417,3.235l30.052-21.097
+				c0.417,0.241,0.854,0.465,1.305,0.652c4.032,1.707,8.467,0.797,11.549-1.975c0.586,1.56,1.339,3.034,2.123,4.163
+				c0.7,1.008,1.106,1.086,2.241,1.48l30.652,5.748C144.619,126.91,146.261,124.144,142.895,122.068z M103.858,107.763
+				c-1.086,2.749-4.11,4.063-6.759,2.941c-2.653-1.12-3.923-4.255-2.841-7c1.086-2.745,4.111-4.063,6.764-2.942
+				C103.67,101.883,104.939,105.021,103.858,107.763z M89.408,76.899l-0.613-8.773c-6.75,1.983-12.928,5.897-17.725,11.387
+				l3.187,9.728C77.894,83.361,83.292,79.097,89.408,76.899z M110.206,77.473c13.225,5.599,20.408,20.028,17.796,34.023l7.635,3.84
+				c4.574-18.601-4.671-38.323-22.306-45.787c-4.146-1.751-8.422-2.684-12.655-2.872l3.091,8.917
+				C105.929,75.958,108.091,76.58,110.206,77.473z M65.597,123.803l5.91-7.232c-1.589-4.338-2.232-9.058-1.79-13.799l6.588,1.357
+				l-7.346-22.432L55.248,99.786l6.335,1.305C60.663,109.015,62.139,116.921,65.597,123.803z M87.919,133.994
+				c-3.06-1.292-5.796-3.057-8.16-5.18l-7.031,4.934c3.38,3.407,7.434,6.212,12.065,8.17c17.166,7.263,36.506,0.472,46.11-15.205
+				l-9-1.689C113.927,135.167,100.207,139.194,87.919,133.994z" />
+			</g>
+		</g>
+	</g>
+</svg>

src/assets/icon/svg/cockpit/限电图标.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+	<g id="图层_1">
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" opacity="0.3" d="M99.25,0c54.815,0,99.25,44.435,99.25,99.25
+		s-44.435,99.25-99.25,99.25C44.435,198.5,0,154.065,0,99.25S44.435,0,99.25,0z" />
+	</g>
+	<g id="图层_2">
+		<g>
+			<g>
+				<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M99.875,0C44.715,0,0,44.714,0,99.875
+				c0,55.16,44.715,99.875,99.875,99.875s99.875-44.715,99.875-99.875C199.75,44.714,155.035,0,99.875,0z M99.896,193.77
+				c-51.932,0-94.036-42.056-94.036-93.935C5.861,47.956,47.964,5.9,99.896,5.9c51.933,0,94.032,42.055,94.032,93.935
+				C193.929,151.714,151.829,193.77,99.896,193.77z" />
+			</g>
+		</g>
+	</g>
+	<g id="图层_5">
+		<g>
+			<g>
+				<path fill="#FFFFFF" d="M80.017,118.265h-19.83V81.389h35.069l6.34-4.442h-46.03v46.113h22.066L80.017,118.265z M135.627,89.141
+				V76.946h-22.918l-2.18,4.442h20.477v36.876H92.637l-6.493,4.795h49.483v-12.344c2.471,0,8.807,0.421,8.807-3.853V93.718
+				C144.434,88.559,137.764,89.141,135.627,89.141z M81.993,114.812l-0.695-8.573l-12.998,0.009l21.697-21.054H64.673v29.618H81.993
+				z M98.013,114.812h28.598l0.039-29.618h-18.475l-2.254,4.542h13.111L98.013,114.812z M101.84,94.044l10.904-25.167l-33.67,33.357
+				l11.482-0.139L76.39,131.123l36.932-36.962L101.84,94.044z" />
+			</g>
+		</g>
+	</g>
+</svg>

src/assets/icon/svg/fan-state/downtime.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M7.555,0h110.21c4.159,0,7.562,3.366,7.562,7.482V162.79
+	c0,4.122-3.402,7.488-7.562,7.488H7.555c-4.159,0-7.555-3.366-7.555-7.488V7.482C0,3.366,3.396,0,7.555,0L7.555,0z M12.142,9.599
+	h101.343c1.366,0,2.488,1.116,2.488,2.47v34.999c0,1.354-1.122,2.464-2.488,2.464H12.142c-1.366,0-2.488-1.11-2.488-2.464V12.069
+	C9.654,10.715,10.775,9.599,12.142,9.599L12.142,9.599z M84.676,146.764h19.612c0.28,0,0.513,0.231,0.513,0.512v7.879
+	c0,0.269-0.232,0.512-0.513,0.512H84.676c-0.28,0-0.512-0.243-0.512-0.512v-7.879C84.164,146.995,84.396,146.764,84.676,146.764
+	L84.676,146.764z M56.184,146.764h19.613c0.268,0,0.512,0.231,0.512,0.512v7.879c0,0.269-0.244,0.512-0.512,0.512H56.184
+	c-0.287,0-0.518-0.243-0.518-0.512v-7.879C55.666,146.995,55.897,146.764,56.184,146.764L56.184,146.764z M27.687,146.764h19.606
+	c0.287,0,0.518,0.231,0.518,0.512v7.879c0,0.269-0.231,0.512-0.518,0.512H27.687c-0.287,0-0.512-0.243-0.512-0.512v-7.879
+	C27.174,146.995,27.399,146.764,27.687,146.764L27.687,146.764z M48.469,70.942l45.671,45.244
+	c-2.684,4.256-6.343,7.866-10.636,10.525L37.834,81.48C40.518,77.211,44.158,73.601,48.469,70.942L48.469,70.942z M79.102,129.004
+	c-4.024,1.708-8.458,2.672-13.117,2.672c-18.314,0-33.157-14.696-33.157-32.846c0-4.611,0.963-9.001,2.701-12.995L79.102,129.004
+	L79.102,129.004z M65.984,65.984c18.313,0,33.156,14.709,33.156,32.846c0,4.61-0.964,9.014-2.708,13.001l-43.566-43.17
+	C56.892,66.942,61.325,65.984,65.984,65.984L65.984,65.984z M65.984,59.197c22.094,0,40.011,17.747,40.011,39.633
+	c0,21.881-17.917,39.64-40.011,39.64c-22.094,0-40.005-17.759-40.005-39.64C25.979,76.943,43.89,59.197,65.984,59.197L65.984,59.197
+	z M144.672,70.802h9.854v29.114h-9.854V70.802L144.672,70.802z M143.708,66.826h11.782l-4.063-33.92h-3.658L143.708,66.826
+	L143.708,66.826z M164.344,70.802h9.855v29.114h-9.855V70.802L164.344,70.802z M163.075,66.826h11.783l-4.062-33.92h-3.659
+	L163.075,66.826L163.075,66.826z M87.335,171.645v10.44c0,1.731,0.146,3.049,0.439,4.073H77.077
+	c-0.134-1.243-0.17-2.585-0.134-4.049v-10.465H87.335L87.335,171.645z M156.344,189.415c2.951-0.123,2.658-0.586,4.733-2.257
+	c2.804-2.268,3-6.988,3-10.245v-67.325h10.392v67.375c0,6.696-1.342,13.708-6.855,18.147c-5.537,4.478-9.367,4.61-16.124,4.61h-4
+	c0.707-0.377,1.402-0.805,2.072-1.268C152.978,196.014,155.075,192.903,156.344,189.415L156.344,189.415z M57.099,171.645v10.367
+	c0,8.123,3.964,7.416,11.056,7.416h61.637c3.915,0,8.452,0.365,11.793-2.014c2.001-1.414,2.817-4.572,2.817-10.28v-67.546h10.393
+	v67.546c0,9.367-2.099,15.05-7.159,18.648c-5.685,4.037-11.429,3.938-18.101,3.938H67.973c-12.929,0.317-21.442-2.939-21.265-17.611
+	v-10.465H57.099L57.099,171.645z"/>
+</svg>

src/assets/icon/svg/fan-state/drop-output.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#FFFFFF" d="M99.759,0C44.657,0,0,44.664,0,99.759c0,55.088,44.657,99.739,99.759,99.739
+			c55.088,0,99.739-44.65,99.739-99.739C199.498,44.664,154.848,0,99.759,0z M99.759,182.545c-45.743,0-82.807-37.064-82.807-82.786
+			c0-45.742,37.063-82.793,82.807-82.793c45.708,0,82.786,37.051,82.786,82.793C182.545,145.48,145.467,182.545,99.759,182.545z
+			 M99.759,28.672v142.154c39.25,0,71.081-31.816,71.081-71.067C170.84,60.496,139.01,28.672,99.759,28.672z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/fan-state/environment.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#FFFFFF" d="M140.512,66.53c2.121-0.513,4.319-0.857,6.596-0.857c5.086,0,9.807,1.493,13.979,3.916
+			c0.561-2.057,0.963-4.195,0.963-6.444c0-12.624-9.571-22.833-21.395-22.833c-7.543,0-14.148,4.199-17.947,10.508
+			C130.303,54.287,137.237,59.763,140.512,66.53z M182.143,43.823V18.151h-24.943L140.201,0l-17.637,18.839H98.531v26.646
+			l-2.471,2.642c4.474-1.016,9.571-1.508,13.942-1.022c5.58-12.134,17.142-20.562,30.653-20.562c18.923,0,34.257,16.395,34.257,36.6
+			c0,5.793-1.363,11.189-3.603,16.055c3.344,5.11,5.346,11.316,5.346,18.037c0,3.604-0.676,6.998-1.716,10.223h7.854V80.825
+			l16.985-18.165L182.143,43.823z M135.57,77.573c-2.146,0-4.213,0.312-6.216,0.807c-4.631-9.56-13.853-16.161-24.606-16.161
+			c-5.268,0-10.119,1.652-14.32,4.344c-4.93-8.29-13.539-13.825-23.41-13.825c-14.606,0-26.428,12.043-27.571,27.307
+			c-3.564-1.744-7.479-2.811-11.642-2.811C12.447,77.233,0,90.526,0,106.926s12.447,29.692,27.805,29.692
+			c0.82,0,1.601-0.184,2.42-0.259c4.148,10.806,14.072,18.428,25.686,18.428c8.806,0,16.569-4.461,21.655-11.289
+			c4.592,9.664,13.876,16.361,24.724,16.361c13.422,0,24.621-10.158,27.223-23.657c1.949,0.453,3.965,0.755,6.059,0.755
+			c15.348,0,27.807-13.292,27.807-29.692C163.377,90.865,150.918,77.573,135.57,77.573z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/fan-state/field-involved.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M52.599,126.432l-22.962-10.533v27.045l22.962,13.613V126.432z
+	 M117.458,179.547v-63.732l32.521-5.977v61.459l30.444-7.803c0-24.244,0.083-48.572,0.083-72.885
+	c3.79-0.711,7.581-1.407,11.371-2.02l-56.975-67.871l-66.337,90.26l13.655-2.633v80.174L117.458,179.547z M0,76.563L62.714,0
+	l65.529,6.583l-69.96,95.088L0,76.563z M134.583,7.196l65.194,77.791c0,3.783,0,7.476,0,11.237
+	c-3.789,0.697-7.579,1.408-11.356,2.118c-0.083,24.133-0.083,48.293-0.166,72.426c-37.956,9.67-75.896,19.313-113.934,28.982
+	c-22.14-15.105-44.281-30.125-66.504-45.131c0-18.1,0.083-39.418,0.083-58.646L0,92.546v-9.572l59.844,25.819L134.583,7.196z
+	 M117.293,9.92c-4.851-0.529-9.629-1.052-14.241-1.581c-1.311,0.613-2.634,1.317-3.943,1.93c-3.136,4.131-6.34,8.256-9.559,12.471
+	c0.25,0.877,0.418,1.755,0.668,2.632c4.528,0.704,9.21,1.408,13.989,2.195c1.478-0.613,2.968-1.316,4.445-2.02
+	c3.218-4.39,6.423-8.688,9.628-12.994C117.961,11.676,117.626,10.799,117.293,9.92L117.293,9.92z M96.141,7.635
+	c-4.362-0.528-8.555-0.961-12.68-1.4c-1.239,0.613-2.466,1.227-3.706,1.839c-3.038,3.867-6.173,7.817-9.294,11.768
+	c0.167,0.793,0.334,1.581,0.403,2.376c4.125,0.696,8.235,1.309,12.513,2.013c1.325-0.613,2.717-1.227,4.041-1.93
+	c3.205-4.124,6.339-8.165,9.377-12.206C96.545,9.217,96.308,8.422,96.141,7.635L96.141,7.635z M77.206,5.615
+	c-3.874-0.432-7.65-0.877-11.357-1.226c-1.156,0.522-2.298,1.143-3.455,1.665c-2.968,3.692-6.005,7.461-9.057,11.154
+	c0.168,0.787,0.251,1.491,0.335,2.285c3.622,0.614,7.314,1.143,11.105,1.756c1.24-0.614,2.563-1.234,3.79-1.756
+	c3.135-3.956,6.173-7.816,9.14-11.592C77.54,7.106,77.372,6.319,77.206,5.615L77.206,5.615z M102.313,30.201
+	c-4.765-0.788-9.461-1.581-13.989-2.369c-1.324,0.613-2.717,1.232-4.04,1.846c-3.289,4.299-6.578,8.688-9.963,13.083
+	c0.167,0.961,0.334,1.93,0.501,2.892c4.445,0.967,8.973,2.02,13.669,3.162c1.477-0.704,3.038-1.316,4.528-2.02
+	c3.372-4.563,6.744-9.217,10.116-13.697C102.814,32.137,102.563,31.169,102.313,30.201L102.313,30.201z M81.497,26.689
+	c-4.291-0.704-8.401-1.4-12.442-2.104c-1.226,0.613-2.466,1.135-3.692,1.755c-3.218,4.041-6.423,8.165-9.726,12.29
+	c0.083,0.877,0.167,1.755,0.334,2.632c3.957,0.969,7.983,1.846,12.094,2.814c1.408-0.62,2.8-1.232,4.208-1.846
+	c3.289-4.305,6.578-8.604,9.796-12.819C81.9,28.445,81.65,27.567,81.497,26.689L81.497,26.689z M62.965,23.526
+	c-3.79-0.613-7.496-1.226-11.104-1.839c-1.156,0.53-2.313,1.135-3.456,1.665c-3.134,3.867-6.256,7.726-9.475,11.677
+	c0.084,0.794,0.168,1.581,0.168,2.458c3.539,0.795,7.162,1.582,10.868,2.46c1.31-0.613,2.55-1.227,3.86-1.755
+	c3.218-4.125,6.339-8.166,9.558-12.116C63.216,25.199,63.132,24.405,62.965,23.526L62.965,23.526z M86.513,51.539
+	c-4.696-1.142-9.223-2.285-13.669-3.336c-1.393,0.613-2.716,1.226-4.026,1.839c-3.455,4.57-6.995,9.133-10.534,13.787
+	c0.153,1.059,0.237,2.02,0.405,3.072c4.277,1.407,8.722,2.724,13.333,4.131c1.477-0.614,3.052-1.233,4.529-1.847
+	c3.623-4.918,7.162-9.656,10.618-14.483C86.931,53.643,86.764,52.592,86.513,51.539L86.513,51.539z M66.184,46.621
+	c-4.208-0.967-8.234-1.929-12.192-2.897c-1.226,0.613-2.466,1.143-3.706,1.755c-3.372,4.215-6.744,8.521-10.199,12.91
+	c0.084,0.961,0.167,1.93,0.251,2.898c3.775,1.135,7.733,2.368,11.76,3.601c1.408-0.53,2.8-1.142,4.208-1.762
+	c3.455-4.564,6.912-9.043,10.283-13.522C66.42,48.642,66.267,47.582,66.184,46.621L66.184,46.621z M48.07,42.316
+	c-3.707-0.878-7.245-1.756-10.784-2.543c-1.157,0.529-2.299,1.051-3.539,1.582c-3.205,4.034-6.507,8.074-9.796,12.198
+	c0,0.885,0,1.763,0,2.64c3.455,1.052,6.912,2.195,10.534,3.247c1.24-0.529,2.55-1.143,3.873-1.665
+	c3.373-4.305,6.66-8.52,9.962-12.644C48.237,44.162,48.154,43.284,48.07,42.316L48.07,42.316z M69.877,73.93
+	c-4.515-1.498-8.974-2.897-13.335-4.215c-1.309,0.522-2.716,1.136-4.026,1.665c-3.623,4.829-7.329,9.656-11.021,14.491
+	c0.069,1.129,0.069,2.271,0.153,3.414c4.194,1.756,8.556,3.427,13.015,5.266c1.477-0.612,3.037-1.225,4.514-1.839
+	c3.79-5.183,7.58-10.185,11.286-15.271C70.211,76.299,70.043,75.157,69.877,73.93L69.877,73.93z M50.049,67.605
+	c-4.041-1.317-7.984-2.55-11.773-3.776c-1.241,0.529-2.55,1.143-3.791,1.672c-3.456,4.473-7.079,8.952-10.618,13.515
+	c0,1.059,0,2.111,0,3.163c3.707,1.498,7.58,2.988,11.44,4.569c1.407-0.528,2.8-1.148,4.208-1.762
+	c3.608-4.738,7.231-9.481,10.854-14.135C50.286,69.715,50.133,68.664,50.049,67.605L50.049,67.605z M32.507,61.983
+	c-3.622-1.136-7.079-2.279-10.534-3.337c-1.143,0.53-2.298,1.059-3.455,1.588c-3.372,4.208-6.827,8.43-10.282,12.729
+	c-0.084,0.968-0.084,1.929-0.084,2.898c3.288,1.317,6.66,2.634,10.115,4.041c1.324-0.529,2.563-1.142,3.874-1.672
+	c3.539-4.473,6.994-8.869,10.45-13.257C32.59,64.003,32.507,62.952,32.507,61.983L32.507,61.983z"/>
+</svg>

src/assets/icon/svg/fan-state/gz-downtime.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#FFFFFF" d="M112.014,145.68c0,0,7.811,3.572,14.369,6.311c-3.627-5.865-23.973-26.586-35.813-38.441
+			c-2.461,0.793-5.018,1.348-7.728,1.348c-14.62,0-26.558-12.506-26.558-27.892c0-15.363,11.938-27.864,26.558-27.864
+			c11.452,0,21.138,7.685,24.863,18.365l0.777-0.833c0,0,18.916,21.589,32.242,35.849l2.225-5.672c0,0,22.75-9.393,22.75-10.687
+			V77.055c0-1.32-22.791-9.992-22.791-9.992l-4.184-10.673c0,0,9.729-23.556,8.879-24.452l-12.883-13.502
+			c-0.889-0.924-22.846,9.832-22.846,9.832l-10.146-4.391c0,0-8.949-23.876-10.172-23.876H73.378
+			c-1.265,0-9.547,23.925-9.547,23.925l-10.117,4.406c0,0-22.431-10.222-23.292-9.312L17.565,32.527
+			c-0.889,0.938,9.354,24.014,9.354,24.014L22.722,67.18c0,0-22.722,9.395-22.722,10.666v19.11c0,1.333,22.792,10.048,22.792,10.048
+			l4.168,10.631c0,0-9.714,23.543-8.867,24.432l12.883,13.537c0.861,0.916,22.833-9.84,22.833-9.84l10.146,4.406
+			c0,0,8.95,23.861,10.187,23.861H92.32c1.265,0,9.547-23.932,9.547-23.932L112.014,145.68z M199.248,112.717l-18.359-19.68
+			c0,0-29.268,33.409-31.158,33.409c-1.902,0-31.172-33.409-31.172-33.409l-18.345,19.68c0,0,31.16,30.684,31.16,33.463
+			c0,2.725-31.16,33.424-31.16,33.424l18.345,19.65c0,0,29.018-33.422,31.172-33.422s31.158,33.422,31.158,33.422l18.359-19.65
+			c0,0-31.186-31.186-31.186-33.424C168.063,143.846,199.248,112.717,199.248,112.717z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/fan-state/jx-downtime.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M195.214,31.231c7.465,18.36,3.903,40.275-10.75,55.203
+	c-16.143,16.435-40.526,18.992-59.47,8.112l-13.714,15.252l9.78,9.973l5.845-5.941c2.979-3.044,7.82-3.044,10.815,0l47.391,48.751
+	c2.979,3.044,2.979,7.982,0,11.011l-21.631,22.052c-2.995,3.044-7.836,3.044-10.831,0l-47.376-48.768
+	c-2.995-3.044-2.995-7.966,0-11.01l5.327-5.44l-9.31-9.521l-65.541,72.94c-5.975,6.072-15.657,6.072-21.632,0l-5.407-5.521
+	c-5.975-6.071-5.975-15.932,0-22.019l74.656-63.696L33.775,51.972l-15.657-0.008L0,22.286L14.604,7.398l29.792,18.579l0.21,15.616
+	l50.16,51.302l14.588-12.459c-14.264-19.81-12.775-47.707,4.809-65.614C128.751-0.033,150.14-3.717,168.111,3.747l-32.139,32.285
+	l27.038,27.54L195.214,31.231z M26.667,174.077c-2.996-3.044-7.836-3.044-10.832,0c-2.979,3.044-2.979,7.965,0,11.009
+	c2.995,3.044,7.836,3.044,10.832,0C29.646,182.042,29.646,177.121,26.667,174.077z"/>
+</svg>

src/assets/icon/svg/fan-state/limit-power.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#FFFFFF" d="M54.946,113.248H10.379V28.699h78.813l14.249-10.191H0v105.741h49.585L54.946,113.248z M179.912,46.468
+			v-27.96h-51.501l-4.895,10.191h46.01v84.549H83.302l-14.589,11h111.199V95.933c5.563,0,19.784,0.978,19.784-8.825V56.967
+			C199.696,45.137,184.723,46.468,179.912,46.468z M59.386,105.33l-1.563-19.657L28.609,85.7L77.37,37.42H20.468v67.91H59.386z
+			 M95.383,105.33h64.271l0.084-67.91h-41.518l-5.075,10.421h29.473L95.383,105.33z M103.985,57.718L128.495,0L52.826,76.499
+			l25.8-0.335l-31.829,66.573l82.995-84.753L103.985,57.718z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/fan-state/manual.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path fill="#FFFFFF" d="M135.813,159.082l23.201-30.882l27.254-25.724c0,0-9.099-10.696-20.315-10.696
+	c-5.042,0-9.67,1.43-13.868,4.275c-4.21,2.847-8.03,7.124-11.489,12.831c-4.808,1.661-8.564,3.249-11.269,4.756
+	c-0.585-5.927-1.313-10.32-2.157-13.179l15.661-60.029c3.691-14.471,4.588-21.783-4.236-25.663
+	c-8.813-3.874-17.832,6.817-22.473,20.445l-14.855,46.361l0.468-59.625C101.733,7.318,97.055,0,87.696,0
+	C78.26,0,73.549,6.492,73.549,19.458v59.605l-15.181-52.21c-3.77-9.248-10.392-18.332-19.217-15.428
+	c-8.819,2.905-8.403,17.255-5.958,26.424l13.523,50.911L24.9,53.146C18.227,41.728,6.717,39.512,4.111,42.184
+	c-4.147,4.25-6.922,13.302,0.611,26.287l24.057,41.417l21.485,73.552v16.207h62.724v-20.366
+	C120.28,174.354,126.584,167.619,135.813,159.082L135.813,159.082z"/>
+</svg>

src/assets/icon/svg/fan-state/normal-power.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M194.68,148.595l-72.564-36.441
+			c-0.072-10.064-5.871-19.581-15.425-23.623c-0.424-0.181-0.863-0.352-1.3-0.503c2.235-2.899,4.146-6.042,5.372-8.861
+			c1.095-2.517,0.79-3.409,0.267-6.102L87.656,5.609c-1.616-7.578-8.575-7.772-8.692,1.229l5.811,83.315
+			c-4.546,2.753-8.284,7.013-10.429,12.459c-1.891,4.802-2.273,9.857-1.386,14.598c-3.549-0.571-7.123-0.692-10.094-0.389
+			c-2.656,0.279-3.252,0.995-5.24,2.807l-44.718,54.698c-5.537,5.227-2.218,11.572,5.372,7.171l66.756-46.857
+			c0.923,0.547,1.89,1.033,2.898,1.446c8.946,3.793,18.804,1.775,25.647-4.375c1.299,3.451,2.978,6.733,4.717,9.237
+			c1.555,2.237,2.454,2.42,4.971,3.294l68.09,12.763C198.51,159.352,202.156,153.201,194.68,148.595z M107.968,116.821
+			c-2.408,6.101-9.129,9.03-15.012,6.527c-5.89-2.479-8.71-9.445-6.309-15.546c2.406-6.09,9.128-9.026,15.024-6.528
+			C107.553,103.755,110.374,110.731,107.968,116.821z M75.872,48.261l-1.355-19.479c-15,4.4-28.723,13.091-39.377,25.289
+			l7.075,21.605C50.304,62.623,62.289,53.147,75.872,48.261z M122.079,49.543c29.379,12.429,45.326,44.481,39.527,75.579
+			l16.955,8.509c10.163-41.301-10.38-85.114-49.542-101.687c-9.214-3.902-18.72-5.969-28.115-6.382l6.868,19.8
+			C112.574,46.17,117.375,47.55,122.079,49.543z M22.985,152.447l13.127-16.068c-3.531-9.627-4.965-20.117-3.974-30.655
+			l14.635,3.015L30.455,58.927L0,99.105l14.064,2.899C12.028,119.604,15.303,137.157,22.985,152.447z M72.565,175.079
+			c-6.801-2.869-12.872-6.782-18.129-11.497l-15.607,10.962c7.5,7.561,16.501,13.797,26.796,18.149
+			c38.123,16.128,81.092,1.046,102.412-33.779l-19.982-3.744C130.332,177.693,99.872,186.639,72.565,175.079z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/fan-state/offline.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#FFFFFF" d="M199.115,42.853l-0.572-0.425C143.799-14.324,55.158-14.129,0.636,42.937
+			c-0.851,0.892-0.851,2.349,0.014,3.262L20.176,66.63c0.85,0.899,2.244,0.892,3.108,0c42.202-44.188,110.898-44.181,153.115,0.007
+			c0.848,0.885,2.244,0.892,3.092,0l19.543-20.439l0.068-0.083C199.951,45.222,199.965,43.738,199.115,42.853z M163.177,74.467
+			c-36.741-35.279-94.046-34.323-129.622,2.916c-0.864,0.892-0.864,2.37,0,3.262l18.983,19.86c0.85,0.893,2.243,0.893,3.094,0
+			c17.167-17.963,41.908-23.263,63.557-15.923c-0.862,0.782-1.711,1.588-2.53,2.446c-3.629,3.793-6.533,8.055-8.736,12.594
+			c-11.73-2.988-24.322,0.254-35.189,11.21c-0.864,0.863-1.351,1.395,0.266,3.08l26.744,27.441l5.072-5.094
+			c2.176,7.577,6.121,14.718,11.844,20.705c18.453,19.316,48.377,19.316,66.828,0c18.455-19.318,18.455-50.635,0-69.952
+			C177.629,80.883,170.613,76.705,163.177,74.467z M168.074,153.424l-18.008-18.857l-18.006,18.844l-12.014-12.586l18.006-18.842
+			l-18.006-18.844l11.938-12.479c0.158,0.1,0.313,0.207,0.471,0.308l17.61,18.443l18.008-18.843l12.014,12.572l-17.992,18.844
+			l18.006,18.842L168.074,153.424z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/fan-state/photovoltaic.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path fill="#FFFFFF" d="M118.237,63.879c17.971,0,43.655,0,43.655,0l9.758,7.319l6.668,15.658c0,0-4.802,6.431-7.291,9.686
+	c-20.521,0-30.632,0-51.164,0c-3.172-3.255-9.456-9.686-9.456-9.686l-0.229-15.202C110.179,71.655,115.603,66.409,118.237,63.879
+	L118.237,63.879z M37.529,63.879c0,0,25.136,0,43.117,0c2.718,2.529,8.13,7.775,8.13,7.775l-0.312,15.202
+	c0,0-6.263,6.431-9.445,9.686c-20.46,0-30.186,0-50.636,0c-2.55-3.255-7.363-9.686-7.363-9.686l6.74-15.658
+	C27.76,71.199,34.273,66.409,37.529,63.879L37.529,63.879z M116.837,21.228c15.886,0,37.154,0,37.154,0l8.45,6.024
+	c0,0,3.32,10.121,5.104,18.999c-2.169,2.385-4.336,4.769-6.574,7.227c-17.755,0-25.157,0-42.89,0
+	c-2.718-2.458-8.13-7.227-8.13-7.227l-0.239-18.999C109.712,27.251,114.514,23.208,116.837,21.228L116.837,21.228z M45.347,21.228
+	c0,0,20.884,0,36.688,0c2.323,1.98,7.136,6.024,7.136,6.024L88.941,46.25c0,0-5.351,4.769-8.141,7.227c-17.741,0-24.689,0-42.421,0
+	c-2.178-2.458-4.417-4.904-6.512-7.291c1.784-8.875,5.112-15.948,5.112-15.948S42.559,23.208,45.347,21.228L45.347,21.228z
+	 M47.453,0.286c34.791,0,71.643,0,106.507,0c12.62,0,24.94,18.608,27.646,29.56c5.661,23.176,11.241,32.29,16.893,55.468
+	c4.262,17.38-6.419,31.72-24.007,31.72c-48.509,0-101.063,0-149.634,0c-17.587,0-28.122-14.34-23.943-31.72
+	c5.651-23.178,11.313-32.292,16.892-55.468C20.523,18.894,32.832,0,45.462,0L47.453,0.286z M152.819,10.78
+	c-35.403,0-70.814,0-106.217,0c-9.375,0-18.437,12.937-20.221,21.036c-5.196,23.167-10.38,30.32-15.575,53.498
+	c-2.79,12.452,5.112,21.195,17.586,21.195c47.566,0,95.059,0,142.552,0c12.548,0,20.377-8.743,17.588-21.195
+	c-5.186-23.178-10.381-30.331-15.493-53.498C171.173,23.717,162.11,10.78,152.819,10.78L152.819,10.78z M89.107,127.361h20.989
+	v7.736l31.741,6.201v8.213c-26.267,0-58.579,0-84.917,0v-8.213l32.187-6.201V127.361z"/>
+</svg>

src/assets/icon/svg/fan-state/standby.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M121.723,180.568c1.822,0,3.289,1.577,3.289,3.533
+	c0,1.954,0,15.898,0,15.898H0c0,0,0-13.944,0-15.898c0-1.956,1.473-3.533,3.287-3.533h10.987
+	c0.55-47.161,29.166-62.352,29.166-81.411c0-19.157-29.142-16.915-29.417-77.966H3.287C1.473,21.191,0,12.582,0,10.627
+	C0,8.671,0,0,0,0h125.012c0,0,0,8.671,0,10.627c0,1.955-1.467,10.564-3.289,10.564h-10.057C111.385,82.243,82.237,80,82.237,99.157
+	c0,19.06,28.623,34.25,29.16,81.411H121.723z M73.12,99.157c0-19.236,29.136-16.915,29.403-77.966h-79.37
+	C23.428,82.243,52.57,79.921,52.57,99.157c0,18.496-28.622,34.078-29.166,81.411h4.992c1.167-4.204,5.06-9.251,11.775-13.002
+	l8.726-4.792c5.487-3.042,8.775-5.108,9.869-6.159c1.094-1.076,2.328-3.446,3.721-7.137c1.443,3.69,2.689,6.061,3.74,7.137
+	c1.051,1.051,4.314,3.117,9.777,6.159l8.677,4.792c6.686,3.751,10.559,8.798,11.72,13.002h5.878
+	C101.73,133.235,73.12,117.653,73.12,99.157z M66.251,88.763c-0.783,1.675-1.442,4.852-1.968,9.533
+	c-0.134,1.424-0.428,3.544-0.893,6.392c-0.464-2.848-0.757-4.968-0.879-6.392c-0.538-4.681-1.198-7.858-1.993-9.533
+	c-0.794-1.662-3.042-4.668-6.752-8.995l-8.231-9.692c-5.627-6.532-9.232-13.853-10.821-16.694c-1.032-0.709,58.203-1.925,57.3-1.314
+	c-1.639,2.842-5.256,11.476-10.853,18.008l-8.189,9.692C69.283,84.094,67.045,87.101,66.251,88.763z"/>
+</svg>

src/assets/icon/svg/fan-state/unknown.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M99.618,199.236C44.596,199.236,0,154.641,0,99.618
+	C0,44.603,44.596,0,99.618,0c55.009,0,99.618,44.603,99.618,99.618C199.236,154.641,154.627,199.236,99.618,199.236z
+	 M149.005,25.051C122.429,7.218,99.904,10.153,99.904,10.153l-0.026,64.292c-9.049,0.228-16.839,5.219-21.11,12.561L24.33,52.14
+	c0,0-14.41,14.125-14.41,46.128c0,32.003,13.813,47.479,13.813,47.479l55.112-33.367c4.285,7.258,12.049,12.191,21.033,12.412
+	l0.026,65.201c0,0,22.524,2.934,49.101-14.905c26.577-17.838,30.796-36.183,30.796-36.183l-56.957-27.745
+	c1.806-3.479,2.922-7.349,2.922-11.542c0-3.778-0.896-7.335-2.389-10.555l57.632-27.226
+	C181.009,61.838,175.582,42.883,149.005,25.051z M100.515,114.042c-7.972,0-14.425-6.452-14.425-14.424
+	c0-7.965,6.454-14.424,14.425-14.424c7.971,0,14.424,6.458,14.424,14.424C114.938,107.59,108.485,114.042,100.515,114.042z"/>
+</svg>

src/assets/icon/svg/menu/agc.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M123.809,94.644H95.537v9.523h18.749v9.821h-28.57V85.12h38.094
+			v-9.524h-47.32l-0.297,47.618h47.618V94.644z M0,0v199.404h200V0H0z M190.477,170.834H10.119V28.572h180.357V170.834z
+			 M28.572,104.464h28.571v19.048h9.524V75.893H19.048v47.619h9.524V104.464z M28.572,85.417h28.571v9.523H28.572V85.417z
+			 M180.952,123.512v-9.821h-38.096V85.417h38.096v-9.524h-47.619l0.298,47.619H180.952z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/menu/easy-compass.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
+	 height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+
+
+<g id="图层_3">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M100.523,18.655c-44.661,0-80.865,36.205-80.865,80.866
+				c0,44.66,36.205,80.865,80.865,80.865c44.661,0,80.865-36.205,80.865-80.865C181.389,54.86,145.185,18.655,100.523,18.655z
+				 M101.156,173.509c-40.862,0-73.988-33.126-73.988-73.987c0-40.863,33.126-73.989,73.988-73.989
+				c40.862,0,73.988,33.125,73.988,73.989C175.145,140.383,142.019,173.509,101.156,173.509z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_1">
+	<polyline fill="#FFFFFF" points="59.177,142.682 113.678,116.092 84.673,87.663 	"/>
+</g>
+<g id="图层_7">
+	<polygon fill="#FFFFFF" points="139.496,60.156 114.004,115.172 85.004,86.745 	"/>
+</g>
+</svg>

src/assets/icon/svg/menu/intranet-involvement.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M0,190.207h14.988l16.776-97.992H9.848v11.93H3.017
+	c0-6.3,0-12.601,0-18.894l29.488-24.18V46.76H9.848v11.916H3.017c0-6.293,0-12.58,0-18.873l29.488-24.18v-5.071
+	c0-6.264,5.238-10.49,11.077-10.532C52.299,0.021,61.029,0,69.746,0c5.895,0,11.203,4.282,11.203,10.553v5.113l29.489,24.187
+	c0,6.271,0,12.551,0,18.823h-6.832V46.76H80.949v14.354l29.489,24.187c0,4.037,0,8.087,0,12.139h-6.832v-5.225H81.689l0.894,5.225
+	H64.34l5.126-5.225H44.001l12.726,12.922l3.953-3.996l-1.956,12.139l-1.998-2.025l-17.769,17.979l17.769,21.387l5.629-6.775h1.481
+	v4.945l-4.316,5.195l4.316,5.184v6.719l-7.11-8.549l-27.309,32.869h38.792V144.18h119.755v46.027h12.264v10.043
+	c-66.744,0-133.486,0-200.229,0V190.207L0,190.207z M36.933,133.506l-8.829,51.559l25.829-31.08L36.933,133.506L36.933,133.506z
+	 M43.107,97.467l-4.456,25.955l15.059-15.227L43.107,97.467L43.107,97.467z M44.56,79.51l9.652-13.934l-9.652-13.92V79.51
+	L44.56,79.51z M56.825,61.812L67.246,46.76H46.39L56.825,61.812L56.825,61.812z M68.894,51.922l-9.457,13.655l9.457,13.661V51.922
+	L68.894,51.922z M56.825,69.348L45.804,85.258h22.042L56.825,69.348L56.825,69.348z M44.56,34.943l9.248-9.415l-9.248-9.422V34.943
+	L44.56,34.943z M56.825,22.448l9.959-10.163c-6.663,0-13.284-0.021-19.948-0.021L56.825,22.448L56.825,22.448z M68.894,16.294
+	l-9.051,9.233l9.051,9.227V16.294L68.894,16.294z M56.825,28.608L45.845,39.79h21.959L56.825,28.608L56.825,28.608z M80.949,69.474
+	v15.785h19.25L80.949,69.474L80.949,69.474z M13.214,85.258h19.291V69.432L13.214,85.258L13.214,85.258z M80.949,24.026V39.79
+	h19.235L80.949,24.026L80.949,24.026z M13.228,39.79h19.277V23.985L13.228,39.79L13.228,39.79z M191.189,101.881h-23.746V91.544
+	h1.104v-5.392h-1.104h-14.584h-1.061v5.392h1.061v16.231h-2.555v-5.895H64.982l-4.945,30.857v6.662h136.097v-6.662L191.189,101.881
+	L191.189,101.881z M89.205,190.207h19.821v-36.445H89.205V190.207L89.205,190.207z M157.539,153.762h-19.807v23.943h19.807V153.762
+	L157.539,153.762z"/>
+</svg>

src/assets/icon/svg/menu/lead-cockpit.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path fill="#FFFFFF" d="M199.559,158.279c-3.393-9.837-10.278-11.245-19.658-15.206c-10.304-4.351-21.727-9.388-32.005-13.619
+	c-2.927-0.798-5.868-1.603-8.803-2.399c-3.494-2.409-6.921-10.415-8.804-14.409c-1.865-0.264-3.722-0.534-5.597-0.797
+	c0.298-6.166,4.104-6.497,5.597-11.212c1.332-4.155,0.154-9.548,2.239-13.398c1.45-2.672,4.74-2.688,6.378-4.979
+	c1.493-2.078,2.476-5.698,2.926-8.243c0.848-4.655,1.585-11.024-0.62-15.638c-1.271-2.646-2.068-2.9-2.425-6.123
+	c-0.424-3.901,1.153-16.613,1.222-19.361c0.16-7.131-0.018-7.708-1.739-14.662c0,0-2.094-6.293-5.384-8.192l-6.549-1.128
+	l-4.036-3.748c-16.3-10.05-33.786-2.993-43.14,0.797c-13.493,4.376-22.016,17.598-16.07,45.837c1.017,4.817-2.629,6.972-2.392,9.601
+	c0.526,5.767,0.628,19.598,6.063,23.017c0.5,0.305,4.368,1.271,4.334,1.017c0.535,5.598,1.069,11.203,1.611,16.808
+	c1.348,3.724,4.597,4.131,5.546,9.397l-4.155,1.009c-1.883,3.994-5.309,12-8.803,14.409c-2.935,0.797-5.877,1.602-8.802,2.399
+	c-10.279,4.231-21.71,9.269-32.005,13.619c-9.38,3.961-20.608,5.369-24,15.206c0,6.683-0.628,19.938-0.458,28.697H89.71l6.589-42.47
+	l-5.478-11.567l12.637-6.063l10.642,5.945l-5.859,11.898l10.371,42.257h81.404C200.187,178.217,199.559,164.962,199.559,158.279"/>
+</svg>

src/assets/icon/svg/menu/matrix.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M14.573,61.655H61.17V14.088H14.573V61.655z M76.702,61.655
+			h46.595V14.088H76.702V61.655z M138.829,14.088v47.567h46.597V14.088H138.829z M14.573,123.783H61.17V76.216H14.573V123.783z
+			 M76.702,123.783h46.595V76.216H76.702V123.783z M138.829,123.783h46.597V76.216h-46.597V123.783z M14.573,185.911H61.17v-47.566
+			H14.573V185.911z M76.702,185.911h46.595v-47.566H76.702V185.911z M138.829,185.911h46.597v-47.566h-46.597V185.911z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/menu/periodic-line.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M75.323,197.894h49.958v-16.598H75.323V197.894z M67.652,26.037
+			L32.337,61.243l11.765,11.734l35.323-35.205L67.652,26.037z M44.102,2.762L8.786,37.972l11.771,11.735l35.325-35.409L44.102,2.762
+			z M75.323,164.706h49.958v-16.615H75.323V164.706z M100.304,56.07c-20.904,0-37.845,16.879-37.845,37.716
+			c0,20.829,16.94,37.725,37.845,37.725c20.901,0,37.842-16.896,37.842-37.725C138.146,72.949,121.205,56.07,100.304,56.07z
+			 M100.304,114.907c-11.709,0-21.198-9.46-21.198-21.121c0-11.666,9.489-21.131,21.198-21.131c11.706,0,21.193,9.465,21.193,21.131
+			C121.497,105.447,112.01,114.907,100.304,114.907z M123.308,39.904l30.849,30.554l12.276-12.615l-30.847-30.942L123.308,39.904z
+			 M160.383,2.106l-12.277,13.006l30.849,30.551l12.26-12.611L160.383,2.106z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/menu/temperature.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#FFFFFF" d="M180.111,103.539c-3.384,4.647-7.861,8.39-13.38,11.218c-5.537,2.837-11.877,4.247-19.054,4.247
+			c-6.912,0-13.141-1.196-18.668-3.581c-5.529-2.392-10.279-5.758-14.244-10.09c-3.956-4.341-7.006-9.527-9.143-15.559
+			c-2.136-6.041-3.212-12.714-3.212-20.002c0-6.912,1.11-13.329,3.298-19.233c2.204-5.904,5.357-11.064,9.441-15.457
+			c4.084-4.409,8.954-7.861,14.602-10.381c5.656-2.512,11.962-3.777,18.866-3.777c5.417,0,10.937,1.102,16.601,3.307
+			c5.657,2.196,10.244,5.69,13.765,10.458l18.114-14.329c-2.649-3.512-5.853-6.536-9.621-9.048
+			c-3.776-2.512-7.793-4.614-12.072-6.323c-4.264-1.691-8.741-2.948-13.389-3.776C157.358,0.402,152.906,0,148.618,0
+			c-10.305,0-19.857,1.632-28.657,4.905c-8.818,3.264-16.439,7.912-22.916,13.952C90.56,24.89,85.476,32.22,81.759,40.824
+			c-3.708,8.621-5.562,18.267-5.562,28.948c0,10.441,1.76,19.968,5.28,28.571c3.529,8.622,8.424,16.046,14.713,22.267
+			c6.288,6.22,13.808,11.064,22.54,14.524c8.731,3.452,18.327,5.178,28.759,5.178c11.44,0,21.438-2.033,29.991-6.126
+			s15.772-9.834,21.685-17.259L180.111,103.539z M51.487,9.997c-2.768-2.768-5.964-4.938-9.621-6.51
+			c-3.639-1.572-7.535-2.358-11.688-2.358c-4.144,0-8.04,0.786-11.688,2.358c-3.64,1.572-6.852,3.742-9.621,6.51
+			c-2.768,2.769-4.938,5.972-6.51,9.621C0.786,23.257,0,27.153,0,31.306c0,4.144,0.786,8.04,2.358,11.688
+			c1.572,3.648,3.742,6.853,6.51,9.621c2.769,2.768,5.981,4.938,9.621,6.511c3.435,1.47,7.083,2.256,10.954,2.35h1.461
+			c3.888-0.094,7.536-0.88,10.962-2.35c3.657-1.572,6.853-3.743,9.621-6.511c2.768-2.769,4.938-5.973,6.511-9.621
+			c1.572-3.648,2.358-7.544,2.358-11.688c0-4.153-0.786-8.049-2.358-11.688C56.426,15.969,54.255,12.766,51.487,9.997z
+			 M41.115,42.243c-3.008,3.025-6.665,4.528-10.937,4.528c-4.272,0-7.912-1.503-10.937-4.528s-4.528-6.665-4.528-10.937
+			c0-4.281,1.503-7.92,4.528-10.945c3.025-3.016,6.664-4.52,10.937-4.52c4.272,0,7.929,1.503,10.937,4.52
+			c3.025,3.025,4.528,6.665,4.528,10.945C45.643,35.578,44.14,39.218,41.115,42.243z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/menu/weather.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<path fill="#FFFFFF" d="M38.057,49.947c0,0.779,0.024,1.574,0.079,2.369h-0.079C17.073,52.316,0,69.397,0,90.373
+	c0,20.983,17.073,41.315,38.057,41.315H152.22c26.236,0,47.57-24.592,47.57-50.822c0-26.245-21.334-47.579-47.57-47.579
+	c-5.62,0-11.042,0.969-16.239,2.869C129.939,14.887,110.657,0,88.004,0C60.471,0,38.057,22.406,38.057,49.947"/>
+</svg>

src/assets/icon/svg/menu/wind-site.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M97.18,93.992l7.2,0.033l0.023-7.881c2.087-0.291,14.628-1.712,14.628-1.712
+			L105.656,0.766c0,0-4.534-1.851-8.38,0.202L80.709,84.772c0,0,12.607,1.049,16.478,1.47L97.18,93.992z M135.216,100.622
+			c0,0-7.209,10.393-9.513,13.535l-6.699-3.888l-3.638,6.223l6.813,3.961c-0.793,1.946-5.827,13.529-5.827,13.529l79.142,30.247
+			c0,0,3.87-2.998,4.017-7.361L135.216,100.622z M84.977,117.804l-3.573-6.257l-6.829,3.921c-1.292-1.666-8.808-11.815-8.808-11.815
+			L0,157.07c0,0,0.664,4.849,4.364,7.159l80.863-27.559c0,0-5.399-11.44-6.965-15.006L84.977,117.804z M99.866,95.886
+			c-7.563,0-13.706,6.134-13.706,13.706c0,7.563,6.142,13.705,13.706,13.705c7.572,0,13.715-6.142,13.715-13.705
+			C113.581,102.02,107.438,95.886,99.866,95.886z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/shield-error.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
+	 height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g id="图层_2">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M16.667,16.667v166.667h166.667V16.667H16.667z
+				 M177.777,177.951H22.396V22.396h155.382V177.951z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_3">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M0,0v200h200V0H0z M194.445,194.617H5.729V5.729h188.716
+				V194.617z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_1">
+	<path fill="#FFFFFF" d="M136.279,65.563l-3.526-0.068c-0.082,0-9.364-0.195-17.524-3.958c-8.371-3.86-13.759-8.297-13.808-8.352
+		l-2.132-1.752l-2.11,1.752c-0.049,0.044-5.447,4.481-13.808,8.352c-8.148,3.763-16.054,3.958-16.13,3.958l-3.537,0.068v40.828
+		c0,20.503,23.155,42.177,35.596,42.177c12.451,0,36.99-21.674,36.99-42.177C136.301,106.413,136.279,65.563,136.279,65.563z
+		 M100.092,100.499l14.122-16.081c1.184-1.345,3.137-1.345,4.33,0c1.183,1.362,1.183,3.57,0,4.927l-23.074,26.27
+		c-0.597,0.673-1.378,1.009-2.17,1.009c-0.787,0-1.568-0.336-2.159-1.009l-11.068-12.598c-1.183-1.346-1.183-3.564,0-4.927
+		c1.188-1.345,3.136-1.345,4.33,0l8.902,10.141L100.092,100.499"/>
+</g>
+</svg>

src/assets/icon/svg/shield-right.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
+	 height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g id="图层_2">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M16.667,16.667v166.667h166.667V16.667H16.667z
+				 M177.777,177.951H22.396V22.396h155.382V177.951z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_3">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M0,0v200h200V0H0z M194.445,194.617H5.729V5.729h188.716
+				V194.617z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_1">
+	<path fill="#FFFFFF" d="M136.279,65.563l-3.526-0.068c-0.082,0-9.364-0.195-17.524-3.958c-8.371-3.86-13.759-8.297-13.808-8.352
+		l-2.132-1.752l-2.11,1.752c-0.049,0.044-5.447,4.481-13.808,8.352c-8.148,3.763-16.054,3.958-16.13,3.958l-3.537,0.068v40.828
+		c0,20.503,23.155,42.177,35.596,42.177c12.451,0,36.99-21.674,36.99-42.177C136.301,106.413,136.279,65.563,136.279,65.563z
+		 M-8091.5,83.5h16383 M-8091.5,117h16383 M100.34,107.691l-9.699,9.698l-6.472-6.473l9.698-9.698l-9.698-9.697l6.474-6.474
+		l9.697,9.698l9.698-9.697l6.472,6.473l-9.696,9.697l9.699,9.699l-6.475,6.474L100.34,107.691z"/>
+</g>
+</svg>

src/assets/icon/svg/风机.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+	<g id="图层_1">
+		<path fill="#FFFFFF" d="M99.388,105.25c8.441,0,15.283-6.767,15.283-15.083c0-8.333-6.833-15.075-15.283-15.075
+		s-15.283,6.75-15.283,15.083C84.104,98.483,90.938,105.25,99.388,105.25z M92.913,116.25L83.471,200h31.5l-9.475-83.742H92.913
+		V116.25z" />
+	</g>
+	<g id="图层_3">
+	</g>
+	<g id="图层_2">
+		<path fill="#FFFFFF" d="M86.346,109.158c-0.073,0.678-0.471,1.277-1.066,1.608C59.213,124.934,29.388,138.8,20.471,139
+		c-1.042-0.025-2.4-0.066-3.375-1.5c-0.292-0.461-0.442-0.996-0.434-1.541c0.792-4.918,8.25-9.934,19.3-18.226
+		c10.975-7.858,25.358-17.108,39.125-25.192c0.955-0.581,2.201-0.278,2.782,0.677c0.144,0.236,0.237,0.499,0.276,0.773
+		c0.743,5.239,3.407,10.015,7.475,13.4C86.138,107.816,86.412,108.492,86.346,109.158z" />
+		<path fill="#FFFFFF" d="M92.22,71.033c-1.074,0.387-2.258-0.17-2.645-1.244c-0.081-0.224-0.122-0.459-0.122-0.697
+		c0.392-24.508,2.475-50,5.441-61.65c1.309-3.75,1.292-6.617,5.092-7.442c3.833,0.833,3.783,3.684,5.1,7.442
+		c1.017,3.908,1.9,9.292,2.642,15.725c1.525,12.792,2.566,29.616,2.809,45.917c0.001,0.676-0.329,1.311-0.884,1.699
+		c-0.336,0.254-0.746,0.389-1.166,0.384c-0.251,0.002-0.5-0.043-0.733-0.134c-2.479-0.952-5.11-1.451-7.767-1.475
+		C97.27,69.559,94.67,70.117,92.22,71.033L92.22,71.033z" />
+		<path fill="#FFFFFF" d="M163.604,119.332c-12.719-9.203-25.857-17.813-39.374-25.799c-0.587-0.35-1.31-0.381-1.925-0.083
+		c-0.615,0.271-1.052,0.836-1.158,1.5c-0.886,5.22-3.695,9.918-7.875,13.166c-0.533,0.42-0.823,1.074-0.775,1.75
+		c0.05,0.668,0.45,1.275,1.041,1.634c26.25,14.267,57.268,29.524,66.15,29.75c0.967-0.024,2.283-0.158,3.233-1.476
+		c0.267-0.469,0.407-1,0.408-1.541C182.537,133.341,174.862,127.999,163.604,119.332L163.604,119.332z" />
+	</g>
+</svg>

src/assets/icon/svg_fill/agc.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<g>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M123.809,94.644H95.537v9.523h18.749v9.821h-28.57V85.12h38.094
+			v-9.524h-47.32l-0.297,47.618h47.618V94.644z M0,0v199.404h200V0H0z M190.477,170.834H10.119V28.572h180.357V170.834z
+			 M28.572,104.464h28.571v19.048h9.524V75.893H19.048v47.619h9.524V104.464z M28.572,85.417h28.571v9.523H28.572V85.417z
+			 M180.952,123.512v-9.821h-38.096V85.417h38.096v-9.524h-47.619l0.298,47.619H180.952z"/>
+	</g>
+</g>
+</svg>

src/assets/styles/color.less

@@ -0,0 +1,35 @@
+.bg-green {
+  background: @green;
+}
+
+.green {
+  color: @green;
+}
+
+.bg-yellow {
+  background: @yellow;
+}
+
+.yellow {
+  color: @yellow;
+}
+
+.gray {
+  color: @gray;
+}
+
+.purple {
+  color: @purple;
+}
+
+.bg-purple {
+  background: @purple;
+}
+
+.orange {
+  color: @orange;
+}
+
+.bg-orange {
+  background: @orange;
+}

src/assets/styles/common/color.css

@@ -0,0 +1,7 @@
+.drak-theme {
+  --color-green: #05bb4c;
+}
+
+.light-theme {
+  --color-green: pink;
+}

src/assets/styles/common/color.less

@@ -0,0 +1,15 @@
+@green: #05bb4c;
+@yellow: #EDBF03;
+@blue: #1A93CF;
+@darkBlue: #4b55ae;
+@gray: #606769;
+@black: #000000;
+@write: #ffffff;
+@red: #BD3338;
+@darkRed: #710f14;
+@purple: #c631c9;
+@orange: #e17e23;
+
+@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));

src/assets/styles/common/common.less

@@ -0,0 +1,2 @@
+@import "color.less";
+@import "font.less";

src/assets/styles/common/font.less

@@ -0,0 +1,3 @@
+@fontsize: 1.296vh;
+@fontsize-l: 1.481vh;
+@fontsize-s: 1.111vh;

src/assets/styles/font.less

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "Bicubik";
+  src: url("../font/Bicubik.woff"), url("../font/Bicubik.ttf");
+}
+
+.font-num {
+    font-family: "Bicubik";
+}

src/assets/styles/main.less

@@ -0,0 +1,7 @@
+@import "./app.less";
+
+@import "./color.less";
+
+@import "./font.less";
+
+@import "./svg.less";

src/assets/styles/svg.less

@@ -0,0 +1,119 @@
+.svg-icon {
+
+  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-icon-green {
+    svg {
+      use {
+        fill: @green;
+      }
+    }
+  }
+  &.svg-icon-red {
+    svg {
+      use {
+        fill: @red;
+      }
+    }
+  }
+  &.svg-icon-blue {
+    svg {
+      use {
+        fill: @blue;
+      }
+    }
+  }
+
+  &.svg-icon-yellow {
+    svg {
+      use {
+        fill: @yellow;
+      }
+    }
+  }
+  
+  &.svg-icon-orange {
+    svg {
+      use {
+        fill: @orange;
+      }
+    }
+  }
+  
+  &.svg-icon-purple {
+    svg {
+      use {
+        fill: @purple;
+      }
+    }
+  }
+  
+  &.svg-icon-write {
+    svg {
+      use {
+        fill: @write;
+      }
+    }
+  }
+  
+  &.svg-icon-black {
+    svg {
+      use {
+        fill: @black;
+      }
+    }
+  }
+}

src/components/chart/bar/hover-bar-chart.vue

@@ -0,0 +1,263 @@
+<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: "150px",
+    },
+    // 传入数据
+    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 option = {
+        color: this.color,
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.3)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+          formatter: function(param) {
+            console.log(param);
+            let marker = '<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;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: util.vh(12),
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "(万KWh)",
+            //分格线
+            splitLine: {
+              lineStyle: {
+                color: "#999",
+                type: "dashed",
+              },
+            },
+            axisLabel: {
+              fontSize: util.vh(12),
+            },
+          },
+        ],
+        series: {
+          name: "损失电量",
+          type: "bar",
+          data: this.datas,
+          itemStyle: {
+            color: partten.getColor("gray"),
+          },
+          emphasis: {
+            itemStyle: {
+              color: partten.getColor("green"),
+            },
+          },
+        },
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/bar/list-bar-chart.vue

@@ -0,0 +1,395 @@
+<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: "200px",
+    },
+    //  传入数据
+    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 option = {
+        xAxis: {
+          max: this.total,
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        grid: {
+          left: util.vh(16),
+          top: util.vh(16), // 设置条形图的边s距
+          right: util.vh(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("-24")],
+                formatter: "{b}",
+                textStyle: {
+                  color: partten.getColor("gray"),
+                  fontSize: util.vh("14"),
+                  fontWeight: 600,
+                },
+              },
+            },
+            data: this.list,
+            z: 1,
+            animationEasing: "elasticOut",
+          },
+          {
+            // 三角
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.list,
+            symbol: "triangle",
+            symbolOffset: [0, -21],
+            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,
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/bar/multiple-bar-chart.vue

@@ -0,0 +1,305 @@
+<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: "150px",
+    },
+    // 传入数据
+    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,
+            },
+          ],
+        },
+        {
+          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)", "(风速)"],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+    };
+  },
+  computed: {
+    datas() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    ydata() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        let data = null;
+        if (index == 0) {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value} ",
+              fontSize: util.vh(12),
+            },
+            //分格线
+            splitLine: {
+              lineStyle: {
+                color: "#999",
+                type: "dashed",
+              },
+            },
+          };
+        } else {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: util.vh(12),
+            },
+            //分格线
+            splitLine: {
+              show: false,
+            },
+          };
+        }
+
+        result.push(data);
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: "bar",
+          yAxisIndex: value.yAxisIndex,
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    initChart() {
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.3)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+          formatter: function(param) {
+            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+          },
+        },
+        grid: {
+          top: util.vh(28),
+          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: util.vh(12),
+            },
+          },
+        ],
+        yAxis: this.ydata,
+        series: this.series,
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/bar/percent-bar.vue

@@ -0,0 +1,189 @@
+<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: "80px",
+    },
+    height: {
+      type: String,
+      default: "80px",
+    },
+    // 传入数据
+    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 option = {
+        title: [
+          {
+            text: this.text,
+            x: "45%",
+            y: "35%",
+            textAlign: "center",
+            textStyle: {
+              fontSize: util.vh("16"),
+              fontWeight: "600",
+              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",
+                },
+              },
+            ],
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+}
+</style>

src/components/chart/line/double-line-chart.vue

@@ -0,0 +1,251 @@
+<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: "150px",
+    },
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "绿线",
+          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: "黄线",
+          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: "",
+    },
+  },
+  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;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    series() {
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: true,
+          showSymbol: false,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+            },
+          },
+          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(12),
+        },
+        boundaryGap: false,
+        //分格线
+        splitLine: {
+          show: false,
+        },
+      });
+      return result;
+    },
+  },
+  methods: {
+    hexToRgba(hex, opacity) {
+      let rgbaColor = "";
+      let reg = /^#[\da-f]{6}$/i;
+      if (reg.test(hex)) {
+        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+      }
+      return rgbaColor;
+    },
+    initChart() {
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(255,255,255,0.3)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+          formatter: function(param) {
+            console.log(param);
+            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+          },
+        },
+        grid: {
+          top: 20,
+          left: 30,
+          right: 20,
+          bottom: 40,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "#333",
+                fontSize: util.vh(12),
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: this.yAxis,
+        series: this.series,
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/line/multiple-line-chart.vue

@@ -0,0 +1,378 @@
+<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-line-chart",
+  componentName: "multiple-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "150px",
+    },
+    // 数据
+    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,
+            },
+            {
+              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,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "购网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 1,
+          value: [
+            {
+              text: "1",
+              value: 100,
+            },
+            {
+              text: "2",
+              value: 200,
+            },
+            {
+              text: "1",
+              value: 100,
+            },
+            {
+              text: "2",
+              value: 400,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(MW)", "(风速)"],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+    };
+  },
+  computed: {
+    datas() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    series() {
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: true,
+          showSymbol: false,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+            },
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: this.hexToRgba(this.color[index], 0.3),
+                  },
+                  {
+                    offset: 1,
+                    color: this.hexToRgba(this.color[index], 0.1),
+                  },
+                ],
+                false
+              ),
+              shadowColor: this.hexToRgba(this.color[index], 0.1),
+              shadowBlur: 10,
+            },
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
+
+      return result;
+    },
+    yAxis() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        result.push({
+          type: "value",
+          name: value,
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: util.vh(12),
+          },
+          //分格线
+          splitLine: {
+            lineStyle: {
+              color: "#999",
+              type: "dashed",
+            },
+          },
+        });
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    hexToRgba(hex, opacity) {
+      let rgbaColor = "";
+      let reg = /^#[\da-f]{6}$/i;
+      if (reg.test(hex)) {
+        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+      }
+      return rgbaColor;
+    },
+    initChart() {
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(255,255,255,0.3)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+          formatter: function(param) {
+            console.log(param);
+            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+          },
+        },
+        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(12),
+              textStyle: {
+                color: "#333",
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: this.yAxis,
+        series: this.series,
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/line/normal-line-chart.vue

@@ -0,0 +1,257 @@
+<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: "150px",
+    },
+    // 数据
+    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,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(MW)"],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+    };
+  },
+  computed: {
+    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(12),
+          },
+          //分格线
+          splitLine: {
+            lineStyle: {
+              color: "#999",
+              type: "dashed",
+            },
+          },
+        });
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: true,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+            },
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    hexToRgba(hex, opacity) {
+      let rgbaColor = "";
+      let reg = /^#[\da-f]{6}$/i;
+      if (reg.test(hex)) {
+        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+      }
+      return rgbaColor;
+    },
+    initChart() {
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(255,255,255,0.3)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+          formatter: function(param) {
+            console.log(param);
+            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+          },
+        },
+        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(12),
+              textStyle: {
+                color: partten.getColor("gray"),
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: this.yAxis,
+        series: this.series,
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/pie/dash-pie-chart.vue

@@ -0,0 +1,291 @@
+<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: {
+    // 宽度 默认105px
+    width: {
+      type: String,
+      default: "70%",
+    },
+    // 高度 默认105px
+    height: {
+      type: String,
+      default: "105px",
+    },
+    // 标题
+    title: {
+      type: String,
+      default: "标题",
+    },
+    // 值
+    value: {
+      type: Number,
+      default: 42.1,
+    },
+    // 颜色 传入 green yellow等 (partten中支持的颜色)
+    color: {
+      type: String,
+      default: "green",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    colorValue() {
+      return partten.getColor(this.color);
+    },
+  },
+  methods: {
+    initChart() {
+      let option = {
+        title: {
+          show: true,
+          text: this.title,
+          x: "47%",
+          y: "80%",
+          z: 8,
+          textAlign: "center",
+          textStyle: {
+            color: partten.getColor("gray"),
+            fontSize: util.vh(12),
+            fontWeight: "normal",
+          },
+        },
+        series: [
+          // 进度条
+          {
+            z: 1,
+            name: "内部（环形）进度条",
+            type: "gauge",
+            radius: "100%",
+            splitNumber: 5,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [
+                    this.value / 100,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: "rgba(255, 255, 255, 0)",
+                      },
+                      {
+                        offset: 1,
+                        color: partten.getColor(this.color),
+                      },
+                    ]),
+                  ],
+                  [1, "transparent"],
+                ],
+                width: util.vh(8),
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+          },
+          // 指针
+          {
+            name: "指针",
+            type: "gauge",
+            z: 2,
+            min: 0,
+            max: 100,
+            radius: "100%",
+            axisLine: {
+              show: false,
+            },
+            tooltip: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+            title: {
+              //标题
+              show: false,
+            },
+            data: [
+              {
+                value: this.value,
+              },
+            ],
+            itemStyle: {
+              normal: {
+                color: "#fff",
+              },
+            },
+            pointer: {
+              show: true,
+              length: "35%",
+              radius: "20%",
+              width: util.vh(2), //指针粗细
+              offsetCenter: ["0%", "-40%"],
+            },
+            animationDuration: 1000,
+          },
+          // 刻度
+          {
+            name: "外部刻度",
+            type: "gauge",
+            //  center: ['20%', '50%'],
+            radius: "100%",
+            min: 0, //最小刻度
+            max: 100, //最大刻度
+            splitNumber: 10, //刻度数量
+            startAngle: 225,
+            endAngle: -45,
+            axisLine: {
+              show: true,
+              // 仪表盘刻度线
+              lineStyle: {
+                width: util.vh(1),
+                color: [[1, partten.getColor(this.color)]],
+              },
+            },
+            //仪表盘文字
+            axisLabel: {
+              show: false,
+            },
+            //刻度标签。
+            axisTick: {
+              show: true,
+              distance: 6,
+              splitNumber: 2,
+              lineStyle: {
+                color: "#fff", //用颜色渐变函数不起作用
+                width: util.vh(1),
+              },
+              length: util.vh(4),
+            }, //刻度样式
+            splitLine: {
+              show: false,
+            }, //分隔线样式
+            detail: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+          },
+          // 显示数字
+          {
+            type: "pie",
+            radius: ["0", "40%"],
+            center: ["50%", "50%"],
+            z: 8,
+            hoverAnimation: false,
+            data: [
+              {
+                value: this.value,
+                itemStyle: {
+                  normal: {
+                    color: "transition",
+                  },
+                },
+                label: {
+                  normal: {
+                    formatter: function(params) {
+                      return params.value;
+                    },
+                    color: partten.getColor(this.color),
+                    fontSize: util.vh(16),
+                    fontWeight: "bold",
+                    position: "center",
+                    show: true,
+                  },
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            ],
+          },
+          // 光环
+          {
+            type: "pie",
+            radius: "40%",
+            center: ["50%", "50%"],
+            animationType: "scale",
+            animation: false,
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              {
+                value: 1,
+                itemStyle: {
+                  normal: {
+                    color: "transparent",
+                    borderColor: partten.getColor(this.color),
+                    opacity: 0.3,
+                    shadowColor: partten.getColor(this.color),
+                    shadowBlur: util.vh(20),
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+}
+</style>

src/components/chart/pie/dual-pie-chart.vue

@@ -0,0 +1,214 @@
+<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: "100%",
+    },
+    height: {
+      type: String,
+      default: "200px",
+    },
+    // 内部饼图数据
+    innerData: {
+      type: Array,
+      default: () => [
+        {
+          value: 700,
+          unit: "个",
+          name: "行业大类1",
+        },
+        {
+          value: 679,
+          unit: "个",
+          name: "行业大类2",
+        },
+        {
+          value: 1548,
+          unit: "个",
+          name: "行业大类3",
+        },
+      ],
+    },
+    // 外部饼图数据
+    outerData: {
+      type: Array,
+      default: () => [
+        {
+          value: 310,
+          unit: "个",
+          name: "邮件营销",
+        },
+        {
+          value: 234,
+          unit: "个",
+          name: "联盟广告",
+        },
+        {
+          value: 335,
+          unit: "个",
+          name: "视频广告",
+        },
+        {
+          value: 548,
+          unit: "个",
+          name: "百度",
+        },
+        {
+          value: 351,
+          unit: "个",
+          name: "谷歌",
+        },
+        {
+          value: 247,
+          unit: "个",
+          name: "必应",
+        },
+      ],
+    },
+    // 颜色
+    color: {
+      type: String,
+      default: "green",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      let legend1 = this.innerData.map((v) => v.name);
+      let legend2 = this.outerData.map((v) => v.name);
+      let legendData = [...legend1, ...legend2];
+
+      let option = {
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.3)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        grid: {
+          top: 32,
+          left: 60,
+          right: 40,
+          bottom: 24,
+        },
+        legend: {
+          orient: "vertical", //纵向图例
+          right: "16",
+          bottom: 32,
+          itemWidth: 15,
+          itemHeight: 15,
+          //icon: 'circle',
+          itemGap: 12, //图例item间距
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(12),
+          },
+          data: legend1,
+        },
+        series: [
+          {
+            name: "访问来源",
+            type: "pie",
+            center: ["40%", "50%"],
+            radius: [0, "35%"],
+            itemStyle: {
+              normal: {},
+            },
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.innerData,
+          },
+          {
+            name: "访问来源",
+            type: "pie",
+            center: ["40%", "50%"],
+            radius: ["55%", "95%"],
+            data: this.outerData,
+            labelLine: {
+              normal: {
+                // length: 40,
+                // length2: 120,
+                lineStyle: {
+                  color: "#fff",
+                  fontSize: util.vh(14),
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderWidth: util.vh(12),
+                borderColor: "#071812",
+              },
+            },
+            label: {
+              normal: {
+                formatter: (params) => {
+                  return "{percent|" + params.percent.toFixed(2) + "%}";
+                },
+                padding: [0, 0, 0, 0],
+                rich: {
+                  color: "#fff",
+                  percent: {
+                    fontSize: util.vh(12),
+                    color: "#fff",
+                  },
+                },
+              },
+            },
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    }
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+}
+</style>

src/components/chart/pie/percent-pie-chart.vue

@@ -0,0 +1,128 @@
+<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: "200px",
+    },
+    height: {
+      type: String,
+      default: "200px",
+    },
+    // 百分比值
+    value: {
+      type: Number,
+      default: 10,
+    },
+    // 颜色 green yellow 等 partten支持的颜色
+    color: {
+      type: String,
+      default: "green",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    colorValue() {
+      return partten.getColor(this.color);
+    },
+  },
+  methods: {
+    initChart() {
+      let option = {
+        calculable: true,
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["0%", "100%"],
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: this.value,
+                name: "",
+                itemStyle: {
+                  color: this.colorValue,
+                },
+              },
+              {
+                value: 100 - this.value,
+                name: "",
+                itemStyle: {
+                  color: "transparent",
+                },
+              },
+            ],
+            label: {
+              show: false,
+              position: "center",
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            radius: ["0%", "95%"],
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: this.value,
+                name: "",
+                itemStyle: {
+                  color: "transparent",
+                },
+              },
+              {
+                value: 100 - this.value,
+                name: "",
+                itemStyle: {
+                  color: "#5f6769",
+                },
+              },
+            ],
+            label: {
+              show: false,
+              position: "center",
+            },
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/coms/btn/btn-group-double.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="btn-group-with-icon">
+        <div class="btn-group-with-icon-list" v-for="(group, i) of btnGroups" :key="group">
+            <i v-if="group.icon == '' ? false : true" :class="group.icon"></i>
+            <a href="javascript:;" v-for="(btn, index) of group.btns" :key="btn" @click="click(i, index)"
+                :class="{ active: activeIndex == index && activeRow == i }">
+                {{btn.text}}
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        // 名称
+        name: "BtnGroup2",
+        // 传入参数
+        props: {
+            /**
+             * {
+                    icon: "fa fa-fire",
+                    btns: [{
+                        text: "某某风场",
+                    }, {
+                        text: "某某风场",
+                    }, {
+                        text: "某某风场",
+                    }, {
+                        text: "某某风场",
+                    }, {
+                        text: "某某风场",
+                    }]
+                }
+             */
+            btnGroups: Array,
+            // 默认选择第几组
+            rowIndex: {
+                type: Number,
+                default: 0
+            },
+            // 默认选中第几个
+            index: {
+                type: Number,
+                default: 0
+            }
+        },
+        // 自定义事件
+        emits: {
+            select: null
+        },
+        // 数据
+        data() {
+            return {
+                activeRow: 0,
+                activeIndex: 0,
+            }
+        },
+        // 函数
+        methods: {
+            click: function(i, index) {
+                this.activeRow = i;
+                this.activeIndex = index;
+                this.$emit('select', this.btnGroups[i].btns[index]);
+            }
+        },
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+            this.activeRow = this.rowIndex;
+            this.activeIndex = this.index;
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less">
+    .btn-group-with-icon {
+        display: flex;
+        flex-direction: row;
+        
+        .btn-group-with-icon-list {
+            display: flex;
+            flex-direction: row;
+            margin-left: 1.481vh;
+            
+            &:first-child {
+                margin-left: 0;
+            }
+            
+            i {
+                color: @gray;
+                margin-right: 0.556vh;
+            }
+            
+            a {
+                text-decoration: none;
+                color: @gray;
+                margin-right: 0.278vh;
+                border: 1px solid @gray;
+                border-radius: 2px;
+                width: 9.815vh;
+                height: 2.13vh;
+                line-height: 2.13vh;
+                text-align: center;
+                font-size: 1.111vh;
+            
+                &:last-child {
+                    margin-right: 0;
+                }
+            
+                &.active {
+                    color: @write;
+                    background-color: @darkBlue;
+                }
+            }
+        }
+    }
+</style>

src/components/coms/btn/btn-group.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="btn-group-with-icon">
+        <i v-if="showIcon" :class="icon"></i>
+        <a href="javascript:;" v-for="(btn, index) of btns" :key="btn" @click="click(index)"
+            :class="{ active: activeIndex == index }">
+            {{btn.text}}
+        </a>
+    </div>
+</template>
+
+<script>
+    export default {
+        // 名称
+        name: "BtnGroup",
+        // 传入参数
+        props: {
+            // 图标
+            icon: String,
+            // 按钮的数组
+            /**
+             * {
+                    text: "某某风场",
+                }
+             */
+            btns: Array,
+            // 默认选中第几个
+            index: {
+                type: Number,
+                default: 0
+            }
+        },
+        // 自定义事件
+        emits: {
+            // 选中事件
+            select: null
+        },
+        // 数据
+        data() {
+            return {
+                showIcon: false,
+                activeIndex: 0,
+            }
+        },
+        // 函数
+        methods: {
+            click: function(index) {
+                this.activeIndex = index;
+                this.$emit('select', index, this.btns[index]);
+            }
+        },
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+            if (this.icon && this.icon != "") {
+                this.showIcon = true;
+            } else {
+                this.showIcon = false;
+            }
+            this.activeIndex = this.index;
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less">
+    .btn-group-with-icon {
+        display: flex;
+        flex-direction: row;
+
+        i {
+            color: @gray;
+            margin-right: 0.556vh;
+        }
+
+        a {
+            text-decoration: none;
+            color: @gray;
+            margin-right: 0.278vh;
+            border: 1px solid @gray;
+            border-radius: 2px;
+            width: 9.815vh;
+            height: 2.13vh;
+            line-height: 2.13vh;
+            text-align: center;
+            font-size: 1.111vh;
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            &.active {
+                color: @write;
+                background-color: @darkBlue;
+            }
+        }
+    }
+</style>

src/components/coms/cards/card-1.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="card-1">
+    <div class="card-icon svg-icon" :class="'svg-icon-' + color">
+      <svg-icon :svgid="shieldIcon" />
+    </div>
+    <div class="card-info">
+      <div class="card-title">
+        {{ title }}
+      </div>
+      <div class="card-value">
+        <span class="value-text">
+          {{ value }}
+        </span>
+        <span class="svg-icon" :class="'svg-icon-' + color">
+          <svg-icon class="increase-icon" :svgid="IncreaseIcon" />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 百分比card2
+// 使用位置 驾驶舱首页 计划电量完成情况 中的百分比卡片
+import SvgIcon from "../icon/svg-icon.vue";
+export default {
+  components: {
+    SvgIcon,
+  },
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: "及时并网增发电量",
+    },
+    // 是否增加 true 增加 false 降低
+    // 判断图标 及 显示颜色
+    isIncrease: {
+      type: Boolean,
+      default: true,
+    },
+    // 值
+    value: {
+      type: Number,
+      default: 100,
+    },
+  },
+  computed: {
+    percent() {
+      return (this.ActualValue / this.TotalValue) * 100;
+    },
+    IncreaseIcon() {
+      return this.isIncrease ? "svg-arrow-up-1" : "svg-arrow-dpwn-1";
+    },
+    shieldIcon() {
+      return this.isIncrease ? "svg-shield-right" : "svg-shield-error";
+    },
+    color() {
+      return this.isIncrease ? "green" : "yellow";
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.card-1 {
+  display: flex;
+
+  .card-icon svg {
+    width: 3.333vh;
+    height: 3.333vh;
+  }
+
+  .card-info {
+    flex: auto;
+    align-self: center;
+    margin-left: 1.481vh;
+
+    .card-title {
+      width: 100%;
+      font-size: @fontsize-s;
+      color: @gray;
+    }
+
+    .card-value {
+      font-size: @fontsize-s;
+      font-weight: 600;
+
+      .value-text {
+        margin-right: 0.741vh;
+      }
+      .increase-icon {
+        width: 0.926v;
+        height: 0.926vh;
+      }
+    }
+
+    .card-text {
+      font-size: @fontsize;
+    }
+  }
+}
+</style>

src/components/coms/cards/percent-card-2.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="percent-card">
+    <div class="card-chart">
+      <percent-bar width="5.926vh" height="5.926vh" :value="percent" :color="color" />
+      <div class="card-title gray">{{ title }}</div>
+    </div>
+    <div class="card-info">
+      <div class="card-value">
+        <span class="value-text gray">{{ TotalText }}</span>
+        <span class="white">{{ TotalValue }}</span>
+      </div>
+      <div class="card-value">
+        <span class="value-text gray">{{ ActualText }}</span>
+        <span class="white">{{ ActualValue }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 百分比card2
+// 使用位置 驾驶舱首页 计划电量完成情况 中的百分比卡片
+import PercentBar from "../../chart/bar/percent-bar.vue";
+export default {
+  components: {
+    PercentBar,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "月计划完成率",
+    },
+    TotalText: {
+      type: String,
+      default: "实际",
+    },
+    TotalValue: {
+      type: Number,
+      default: 100,
+    },
+    ActualText: {
+      type: String,
+      default: "计划",
+    },
+    ActualValue: {
+      type: Number,
+      default: 25,
+    },
+    color: {
+      type: String,
+      default: "green",
+    },
+  },
+  computed: {
+    percent() {
+      return (this.ActualValue / this.TotalValue) * 100;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.percent-card {
+  display: flex;
+
+  .card-chart {
+    flex: 1 1 5.926vh;
+  }
+
+  .card-title {
+    text-align: center;
+    width: 100%;
+    margin-top: 1.481vh;
+    font-size: 1.111vh;
+  }
+
+  .card-info {
+    flex: auto;
+    align-self: center;
+    margin-left: 0.741vh;
+    margin-top: -2.593vh;
+
+    .card-value {
+      font-size: @fontsize-s;
+      font-weight: 600;
+      margin-bottom: 1.111vh;
+
+      .value-text {
+        margin-right: 0.741vh;
+      }
+    }
+
+    .card-text {
+      font-size: @fontsize;
+    }
+  }
+}
+</style>

src/components/coms/cards/percent-card.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="percent-card">
+    <percent-pie-chart width="7.407vh" height="7.407vh" :value="value" :color="color" class="card-chart" />
+    <div class="card-info">
+      <div class="card-value" :class="color">{{ value }}%</div>
+      <div class="card-text gray">{{ title }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 百分比卡片
+// 使用位置 电量分析 饼图 + 百分比 + 标题
+
+import PercentPieChart from "../../chart/pie/percent-pie-chart.vue";
+export default {
+  components: {
+    PercentPieChart,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "标题",
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+    color: {
+      type: String,
+      default: "green",
+    },
+  },
+  computed: {},
+};
+</script>
+
+<style lang="less" scoped>
+.percent-card {
+  display: flex;
+
+  .card-chart {
+    flex: 0 0 5.926vh;
+  }
+
+  .card-info {
+    flex: auto;
+    align-self: center;
+    margin-left: 1.481vh;
+
+    .card-value {
+      font-size: @fontsize-l;
+      font-weight: 600;
+    }
+
+    .card-text {
+      font-size: @fontsize;
+    }
+  }
+}
+</style>

src/components/coms/grid/row.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :style="style" :class="classList"><slot></slot></div>
+</template>
+<script>
+export default {
+  name: "Row",
+  componentName: "Row",
+  props: {
+    gutter: Number,
+    type: { type: String, default: "flex" },
+    justify: { type: String, default: "start" },
+    align: { type: String, default: "top" },
+  },
+  computed: {
+    style() {
+      const ret = {};
+      if (this.gutter) {
+        ret.marginLeft = `-${this.gutter / 2}px`;
+        ret.marginRight = ret.marginLeft;
+      }
+      return ret;
+    },
+    classList() {
+      return ["row", this.justify !== "start" ? `is-justify-${this.justify}` : "", this.align !== "top" ? `is-align-${this.align}` : "", { "row--flex": this.type === "flex" }];
+    },
+  },
+  // render() {
+  //   return h(
+  //     this.tag,
+  //     {
+  //       class: ["row", this.justify !== "start" ? `is-justify-${this.justify}` : "", this.align !== "top" ? `is-align-${this.align}` : "", { "row--flex": this.type === "flex" }],
+  //       style: this.style,
+  //     },
+  //     this.$slots.default
+  //   );
+  // },
+};
+</script>
+
+<style>
+.row {
+  position: relative;
+  box-sizing: border-box;
+}
+.row + .row {
+  margin-top: 1.481vh;
+}
+.row:after,
+.row:before {
+  display: table;
+  content: "";
+}
+.row:after {
+  clear: both;
+}
+.row--flex {
+  display: flex;
+}
+.row--flex:after,
+.row--flex:before {
+  display: none;
+}
+.row--flex.is-justify-center {
+  justify-content: center;
+}
+.row--flex.is-justify-end {
+  justify-content: flex-end;
+}
+.row--flex.is-justify-space-between {
+  justify-content: space-between;
+}
+.row--flex.isz-justify-space-around {
+  justify-content: space-around;
+}
+.row--flex.is-align-middle {
+  align-items: center;
+}
+.row--flex.is-align-bottom {
+  align-items: flex-end;
+}
+</style>

src/components/coms/icon/svg-draw.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="svg-draw"></div>
+</template>
+
+<script>
+    import Vivus from 'vivus';
+    export default {
+        // 名称
+        name: "SvgDraw",
+        // 使用组件
+        components: {},
+        // 传入参数
+        props: {
+            file: {
+                type: String,
+                required: true
+            }
+        },
+        // 自定义事件
+        emits: {},
+        // 数据
+        data() {
+            return {}
+        },
+        // 函数
+        methods: {
+            play: function (speed, fun) {
+                this.svg.play(speed, fun);
+            }
+        },
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+            this.svg = new Vivus(this.$el, {
+                file: this.file
+            })
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less">
+    .svg-draw {
+        
+    }
+</style>

src/components/coms/icon/svg-icon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg aria-hidden="true" pointer-events="none">
+    <use class="svg-use" :xlink:href="'#' + svgid" />
+  </svg>
+</template>
+<script>
+export default {
+  name: "SvgIcon",
+  props: {
+      // "svg-文件名"
+    svgid: { type: String, required: true },
+  },
+};
+</script>

src/components/coms/list/list.vue

@@ -0,0 +1,192 @@
+<template>
+    <div class="com-list-box" :class="{'fill' : height == 'fill', 'auto' : height == 'auto'}">
+        <div class="com-list-title" v-if="title != ''">{{title}}</div>
+        <div class="com-list-body">
+            <div class="con-list-item" v-for="(data, index) of list" :key="index" @click="select(index)"
+                :class="data.color + ' ' + (activeIndex == index ? 'active' : '')">{{data.text}}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        // 名称
+        name: "List",
+        // 使用组件
+        components: {},
+        // 传入参数
+        props: {
+            // 标题 ""不显示
+            title: {
+                type: String,
+                default: ""
+            },
+            // 列表面板高度 fill auto 300px
+            height: {
+                type: String,
+                default: "fill"
+            },
+            // 默认选中第几个
+            index: {
+                type: Number,
+                default: 0
+            },
+            /**
+             * {
+                    text: "1#逆变室",
+                    color: "blue"
+                }
+             */
+            list: Array
+        },
+        // 自定义事件
+        emits: {
+            // 选中事件
+            select: null
+        },
+        // 数据
+        data() {
+            return {
+                activeIndex: 0
+            }
+        },
+        // 函数
+        methods: {
+            select: function (index) {
+                this.activeIndex = index;
+                this.$emit('select', this.list[index]);
+            }
+        },
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+            this.activeIndex = this.index;
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+            if (this.height != 'fill' && this.height != 'auto') {
+                this.$el.style.height = this.height;
+            }
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less">
+    .com-list-box {
+        display: flex;
+        flex-direction: column;
+
+        &.auto {
+            height: auto;
+        }
+
+        &.fill {
+            height: 100%;
+        }
+
+        .com-list-title {
+            font-size: @fontsize-l;
+            color: @write;
+            background-color: fade(@gray, 50%);
+            padding: 16px 20px;
+        }
+
+        .com-list-body {
+            background-color: fade(@gray, 20%);
+            flex-grow: 1;
+            overflow: auto;
+            display: flex;
+            flex-direction: column;
+
+            .con-list-item {
+                color: @gray;
+                position: relative;
+                font-size: @fontsize;
+                text-align: center;
+                padding: 4px 0;
+                border-bottom: 1px solid @gray;
+                cursor: pointer;
+
+                &:hover {
+                    background-color: fade(@gray, 30%);
+                }
+
+                &.active {
+                    color: @write;
+                    background-color: fade(@blue, 60%);
+                }
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    width: 8px;
+                    height: 8px;
+                    left: 12px;
+                    top: calc(50% - 4px);
+                }
+
+                &.write {
+                    &::after {
+                        background-color: @write;
+                    }
+                }
+
+                &.green {
+                    &::after {
+                        background-color: @green;
+                    }
+                }
+
+                &.blue {
+                    &::after {
+                        background-color: @blue;
+                    }
+                }
+
+                &.purple {
+                    &::after {
+                        background-color: @purple;
+                    }
+                }
+
+                &.red {
+                    &::after {
+                        background-color: @red;
+                    }
+                }
+
+                &.orange {
+                    &::after {
+                        background-color: @orange;
+                    }
+                }
+
+                &.gray {
+                    &::after {
+                        background-color: @gray;
+                    }
+                }
+
+                &.yellow {
+                    &::after {
+                        background-color: @yellow;
+                    }
+                }
+
+            }
+        }
+    }
+</style>

src/components/coms/panel/panel-no-title.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="com-panel" :class="{ 'no-title': !hasTitle }">
+    <div v-if="hasTitle" class="panel-header">
+      <div class="panel-title">
+        <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
+        {{ title }}
+      </div>
+      <div class="panel-tools">{{ subTitle }}</div>
+    </div>
+    <div class="panel-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "com-panel",
+  componentName: "com-panel",
+  props: {
+    title: String,
+    icon: String,
+    subTitle: String,
+  },
+  computed: {
+    hasTitle() {
+      if (this.title) return true;
+      return false;
+    },
+    hasIcon() {
+      if (this.icon) return true;
+      return false;
+    },
+  },
+};s
+</script>
+<style lang="less" scoped>
+.com-panel {
+  border-left: 2px solid rgba(255, 255, 255, 50%);
+
+  &:before {
+    content: " ";
+    width: 0.37vh;
+    height: 0.37vh;
+    float: left;
+    background: #fff;
+    margin: 0.185vh 0.556vh 0vh 0.185vh;
+  }
+
+  &.no-title {
+    border-left: 0px;
+  }
+
+  &.no-title::before {
+    display: none;
+  }
+
+  .panel-header {
+    display: flex;
+    font-size: 1.296vh;
+    padding-left: 1.111vh;
+    background: rgba(255, 255, 255, 10%);
+    line-height: 2.963vh;
+    margin-bottom: 1.481vh;
+
+    .panel-title {
+      color: rgba(255, 255, 255, 0.8);
+      flex: 1 1 auto;
+      .panel-icon {
+        margin-right: 0.741vh;
+      }
+    }
+
+    .panel-tools {
+      flex: 0 0 auto;
+      color: #fff;
+      opacity: 0.3;
+      padding: 0 0.741vh;
+      font-size: 1.111vh;
+      letter-spacing: 0.093vh;
+    }
+  }
+
+  .panel-body {
+    padding-left: 1.111vh;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &.no-title .panel-body {
+    padding-left: 0px;
+  }
+}
+</style>

src/components/coms/panel/panel.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="com-panel" :class="{ 'no-title': !hasTitle }">
+    <div v-if="hasTitle" class="panel-header">
+      <div class="panel-title">
+        <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
+        {{ title }}
+      </div>
+      <div class="panel-tools">{{ subTitle }}</div>
+    </div>
+    <div class="panel-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "com-panel",
+  componentName: "com-panel",
+  props: {
+    // 标题
+    title: String,
+    // 图标
+    icon: String,
+    // 副标题
+    subTitle: String,
+  },
+  computed: {
+    // 是否存在标题
+    // 标题为空时 不显示标题框
+    hasTitle() {
+      if (this.title) return true;
+      return false;
+    },
+    // 是否存在图标
+    hasIcon() {
+      if (this.icon) return true;
+      return false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.com-panel {
+  border-left: 2px solid rgba(255, 255, 255, 50%);
+
+  &:before {
+    content: " ";
+    width: 4px;
+    height: 4px;
+    float: left;
+    background: #fff;
+    margin: 2px 6px 0px 2px;
+  }
+
+  &.no-title {
+    border-left: 0px;
+  }
+
+  &.no-title::before {
+    display: none;
+  }
+
+  .panel-header {
+    display: flex;
+    font-size: @fontsize;
+    padding-left: 12px;
+    background: rgba(255, 255, 255, 10%);
+    line-height: 2.593vh;
+    margin-bottom: 1.481vh;
+
+    .panel-title {
+      color: rgba(255, 255, 255, 0.8);
+      flex: 1 1 auto;
+      .panel-icon {
+        margin-right: 8px;
+      }
+    }
+
+    .panel-tools {
+      flex: 0 0 auto;
+      color: #ffffff4d;
+      padding: 0 8px;
+      font-size: @fontsize-s;
+      letter-spacing: 1px;
+    }
+  }
+
+  .panel-body {
+    padding-left: 12px;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &.no-title .panel-body {
+    padding-left: 0px;
+  }
+}
+</style>

src/components/coms/panel/panel2.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="com-panel2" :class="(hasTitle ? '' : 'no-title') + ' ' + color">
+    <div v-if="hasTitle" class="panel-header2">
+      <div class="panel-title2">
+        <i v-if="hasIcon" class="panel-icon2" :class="icon"></i>
+        {{ title }}
+      </div>
+      <div class="panel-tools2">{{ subTitle }}</div>
+    </div>
+    <div class="panel-body2">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ComPanel",
+  componentName: "ComPanel",
+  props: {
+    title: String,
+    icon: String,
+    subTitle: String,
+    color: String,
+  },
+  computed: {
+    hasTitle() {
+      if (this.title) return true;
+      return false;
+    },
+    hasIcon() {
+      if (this.icon) return true;
+      return false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.com-panel2 {
+  border-left: 2px solid rgba(255, 255, 255, 50%);
+  padding-left: 12px;
+  position: relative;
+
+  &:before,
+  &:after {
+    content: " ";
+    width: 4px;
+    height: 4px;
+    background: @write;
+    position: absolute;
+    left: 2px;
+  }
+
+  &:before {
+    top: 2px;
+  }
+
+  &:after {
+    bottom: 2px;
+  }
+
+  &.no-title {
+    border-left: 0px;
+  }
+
+  &.no-title::before {
+    display: none;
+  }
+
+  &.green {
+    .panel-header2 {
+      &::after {
+        background-image: @greenLinearRight;
+      }
+      .panel-title2 {
+        .panel-icon2 {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  &.red {
+    .panel-header2 {
+      &::after {
+        background-image: @redLinearRight;
+      }
+      .panel-title2 {
+        .panel-icon2 {
+          color: @red;
+        }
+      }
+    }
+  }
+
+  .panel-header2 {
+    display: flex;
+    font-size: 16px;
+    padding-left: 12px;
+    background: rgba(255, 255, 255, 10%);
+    line-height: 2.963vh;
+    margin-bottom: 1.111vh;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 40px;
+      height: 100%;
+    }
+
+    .panel-title2 {
+      color: @write;
+
+      .panel-icon2 {
+        margin-right: 8px;
+      }
+    }
+
+    .panel-tools2 {
+      color: #fff;
+      opacity: 0.3;
+      padding: 0 8px;
+    }
+  }
+
+  .panel-body2 {
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &.no-title .panel-body2 {
+    padding-left: 0px;
+  }
+}
+</style>

src/components/coms/panel/panel3.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="com-panel-3">
+    <span class="dot top-left"></span>
+    <span class="dot bottom-left"></span>
+    <span class="dot top-rignt"></span>
+    <span class="dot bottom-right"></span>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "com-panel-3",
+  componentName: "com-panel-3",
+};
+</script>
+<style lang="less" scoped>
+.com-panel-3 {
+  position: relative;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.741vh;
+  display: inline-block;
+  border: 1px solid #536268;
+
+  .dot {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: #fff;
+
+    &.top-left {
+      top: 6px;
+      left: 6px;
+    }
+
+    &.bottom-left {
+      bottom: 6px;
+      left: 6px;
+    }
+
+    &.top-rignt {
+      top: 6px;
+      right: 6px;
+    }
+
+    &.bottom-right {
+      bottom: 6px;
+      right: 6px;
+    }
+  }
+}
+</style>

src/components/coms/panel/toolbar-panel.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="com-panel" :class="{ 'no-title': !hasTitle }">
+    <div v-if="hasTitle" class="panel-header">
+      <div class="panel-title">
+        <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
+        {{ title }}
+      </div>
+      <div class="panel-tools">
+        <slot name="tools"></slot>
+      </div>
+    </div>
+    <div class="panel-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+// 副标题可嵌入html的panel
+export default {
+  name: "toolbar-panel",
+  componentName: "toolbar-panel",
+  props: {
+    // 标题
+    title: String,
+    // 图标
+    icon: String,
+  },
+  computed: {
+    hasTitle() {
+      if (this.title) return true;
+      return false;
+    },
+    hasIcon() {
+      if (this.icon) return true;
+      return false;
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>

src/components/coms/table/table-page.vue

@@ -0,0 +1,333 @@
+<template>
+    <div class="table-page">
+        <div class="toolbar">
+            <div class="title" v-if="grid.title.show">
+                <i :class="grid.title.icon"></i>
+                <span>{{grid.title.text}}</span>
+            </div>
+            <div class="page-bar">
+                <span class="btn" @click="firstPage()">首页</span>
+                <span class="btn" @click="prevPage()">上一页</span>
+                <span v-for="(bar, index) of pageBar" :key="index" @click="gotoPage(bar)"
+                    :class="bar.type + ' ' + (bar.type != 'dot' && page == bar.text ? 'active' : '')">{{bar.text}}</span>
+                <span class="btn" @click="nextPage()">下一页</span>
+                <span class="btn" @click="lastPage()">尾页</span>
+            </div>
+            <div class="page-num">
+                <span>共</span>
+                <span>{{pages}}</span>
+                <span>页</span>
+                <span class="total">{{grid.data.total}}</span>
+                <span>条数据</span>
+            </div>
+            <div class="return" v-if="showReturn" @click="onReturn">
+                返回
+            </div>
+        </div>
+        <div class="sub-title" v-if="grid.subTitle.show">
+            <div class="text">{{grid.subTitle.text}}</div>
+            <div class="sub-text">{{grid.subTitle.subText}}</div>
+        </div>
+        <div class="ct">
+            <table class="com-table">
+                <thead>
+                    <tr>
+                        <th v-for="(col, index) of grid.column" :key="index" :class="{ 'light': col.is_light }">{{col.name}}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(row, index) of data" :key="index">
+                        <td v-for="(col, i) of grid.column" :key="i" :class="{ 'light': col.is_light || row.is_light, 'num': col.is_num }">
+                            {{row[col.field]}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+</template>
+
+<script>
+    export default {
+        // 名称
+        name: "ComTable",
+        // 使用组件
+        components: {},
+        // 传入参数
+        props: {
+            grid: Object,
+            showReturn: Boolean
+        },
+        // 自定义事件
+        emits: {
+            onReturn: null,
+        },
+        // 数据
+        data() {
+            return {
+                pages: 0,
+                page: 1,
+                pageBar: [],
+                data: []
+            }
+        },
+        // 函数
+        methods: {
+            createPageBar: function() {
+                let pb = [];
+                const p = this.page;
+                const ps = this.pages;
+                if (p >= 4) {
+                    pb.push({
+                        type: "dot",
+                        text: "...",
+                    })
+                }
+                for (let i = p - 2; i <= p + 2 && i <= ps; i++) {
+                    if (i <= 0) {
+                        continue;
+                    }
+                    pb.push({
+                        type: "btn num",
+                        text: i,
+                    })
+                }
+                if (ps > p + 2) {
+                    pb.push({
+                        type: "dot",
+                        text: "...",
+                    })
+                }
+                this.pageBar = pb;
+            },
+            createData: function () {
+                let d = [];
+                let p = this.page;
+                let l = this.grid.limit;
+                let t = this.grid.data.list.length;
+                for (let i = l * (p - 1); i < l * (p - 1) + l && i < t; i++) {
+                    d.push(this.grid.data.list[i]);
+                }
+                this.data = d;
+            },
+            gotoPage: function(item) {
+                if (item.type != 'dot') {
+                    this.page = item.text;
+                    this.createPageBar();
+                    this.createData();
+                }
+            },
+            prevPage: function() {
+                let p = this.page - 1;
+                if (p > 0) {
+                    this.page = p;
+                    this.createPageBar();
+                    this.createData();
+                }
+            },
+            nextPage: function() {
+                let p = this.page + 1;
+                if (p <= this.pages) {
+                    this.page = p;
+                    this.createPageBar();
+                    this.createData();
+                }
+            },
+            firstPage: function() {
+                this.page = 1;
+                this.createPageBar();
+                this.createData();
+            },
+            lastPage: function() {
+                this.page = this.pages;
+                this.createPageBar();
+                this.createData();
+            },
+            onReturn: function() {
+                this.$emit('onReturn');
+            }
+        },
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+            this.pages = Math.ceil(this.grid.data.list.length / this.grid.limit);
+            this.createPageBar();
+            this.createData();
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less">
+    @titleGray: #9CA5A8;
+    @rowGray: #606769;
+    @darkBack: #536268;
+
+    .table-page {
+        display: flex;
+        flex-direction: column;
+        
+        .toolbar {
+            background-color: fade(@gray, 40%);
+            display: flex;
+
+            .title {
+                padding: 0.741vh 0;
+                color: @green;
+                font-size: @fontsize;
+
+                i {
+                    margin: 0 0.556vh 0 1.481vh;
+                }
+            }
+
+            .page-bar {
+                margin-left: auto;
+                font-size: @fontsize;
+                color: @gray;
+                display: flex;
+                align-items: center;
+
+                span {
+                    border-radius: 4px;
+                    padding: 0.185vh 0.278vh;
+                    margin-right: 0.556vh;
+
+                    &.btn {
+                        cursor: pointer;
+
+                        &:hover {
+                            color: @green;
+                            border-color: @green;
+                        }
+                    }
+
+                }
+
+                .num {
+                    font-weight: 600;
+                    width: 2.315vh;
+                    text-align: center;
+                    border: 1px solid @gray;
+
+                    &.active {
+                        color: @green;
+                        border-color: @green;
+                    }
+                }
+
+            }
+
+            .page-num {
+                margin-left: 1.481vh;
+                margin-right: 1.481vh;
+                font-size: @fontsize;
+                color: @gray;
+                display: flex;
+                align-items: center;
+
+                .total {
+                    margin-left: 0.741vh;
+                }
+            }
+
+            .return {
+                margin-right: 1.481vh;
+                font-size: @fontsize;
+                color: @gray;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+
+                &:hover {
+                    color: @green;
+                }
+            }
+        }
+
+        .sub-title {
+            background-color: fade(@gray, 40%);
+            display: flex;
+            padding: 0.741vh 2.222vh;
+            font-size: @fontsize;
+            margin-top: 1.481vh;
+
+            .text {
+                color: @write;
+            }
+
+            .sub-text {
+                margin-left: auto;
+                color: @write;
+            }
+        }
+        
+        .ct {
+            flex-grow: 1;
+            overflow: auto;
+        }
+        
+        .com-table {
+            width: 100%;
+            border-collapse: collapse;
+        
+            thead {
+                tr {
+                    th {
+                        background-color: fade(@darkBack, 60%);
+                        padding: 0.556vh 0;
+                        color: @titleGray;
+                        font-weight: 400;
+                        font-size: @fontsize-s;
+                        position: sticky;
+                        top: 0;
+                        
+                        &.light {
+                            color: @green;
+                        }
+                    }
+                }
+            }
+        
+            tbody {
+                tr {
+                    &:nth-child(2n) {
+                        background-color: fade(@rowGray, 20%);
+                    }
+        
+                    td {
+                        padding: 0.556vh 0;
+                        color: @rowGray;
+                        text-align: center;
+                        font-size: @fontsize-s;
+                        
+                        &.light {
+                            color: @green;
+                        }
+                        
+                        &.num {
+                            font-family: "Bicubik";
+                            font-weight: 400;
+                        }
+                    }
+                }
+            }
+        }
+        
+    }
+</style>

src/components/coms/table/table-span.vue

@@ -0,0 +1,144 @@
+<template>
+    <table class="com-table">
+        <thead>
+            <tr>
+                <th v-for="(col, index) of data.column" :key="index" :class="{ 'light': col.is_light }">{{col.name}}<br
+                        v-if="col.unit != ''">{{col.unit}}
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(row, index) of data.data" :key="index">
+                <td :rowspan="rowspan(row, col)" :colspan="colspan(row, col)" v-for="(col, i) of data.column" :key="i"
+                    :class="{ 'light': col.is_light || row.is_light, 'num': col.is_num, 'remove': row[col.field] == '' }">
+                    {{row[col.field]}}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script>
+    export default {
+        // 名称
+        name: "ComTable",
+        // 使用组件
+        components: {},
+        // 传入参数
+        props: {
+            data: Object
+        },
+        // 自定义事件
+        emits: {},
+        // 数据
+        data() {
+            return {}
+        },
+        computed: {
+
+        },
+        // 函数
+        methods: {
+            rowspan: function(row, col) {
+                if (row.row_span.length == 0) {
+                    return 1;
+                } else {
+                    let row_span = row.row_span.find(t => t[0] == col.field);
+                    if (row_span) {
+                        return row_span[1];
+                    } else {
+                        return 1;
+                    }
+                }
+            },
+            colspan: function(row, col) {
+                if (row.col_span.length == 0) {
+                    return 1;
+                } else {
+                    let col_span = row.col_span.find(t => t[0] == col.field);
+                    if (col_span) {
+                        return col_span[1];
+                    } else {
+                        return 1;
+                    }
+                }
+            }
+        },
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less">
+    @titleGray: #9CA5A8;
+    @rowGray: #606769;
+    @darkBack: #536268;
+
+    .com-table {
+        width: 100%;
+        border-collapse: collapse;
+
+        thead {
+            tr {
+                th {
+                    background-color: fade(@darkBack, 60%);
+                    padding: 0.741vh 0;
+                    color: @titleGray;
+                    font-weight: 400;
+                    font-size: @fontsize-s;
+                    position: sticky;
+                    top: 0;
+
+                    &.light {
+                        color: @green;
+                    }
+                }
+            }
+        }
+
+        tbody {
+            tr {
+                &:nth-child(2n) {
+                    background-color: fade(@rowGray, 20%);
+                }
+
+                td {
+                    padding: 0.556vh 0;
+                    color: @rowGray;
+                    text-align: center;
+                    font-size: @fontsize-s;
+
+                    &.light {
+                        color: @green;
+                    }
+
+                    &.num {
+                        font-family: "Bicubik";
+                        font-weight: 400;
+                    }
+                    
+                    &.remove {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+</style>

src/components/coms/table/table.vue

@@ -0,0 +1,128 @@
+<template>
+    <table class="com-table">
+        <thead>
+            <tr>
+                <th v-for="(col, index) of data.column" :key="index" :class="{ 'light': col.is_light }">{{col.name}}
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(row, index) of data.data" :key="index">
+                <td v-for="(col, i) of data.column" :key="i" :class="{ 'light': col.is_light || row.is_light, 'num': col.is_num }">
+                    {{row[col.field]}}</td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script>
+    export default {
+        // 名称
+        name: "ComTable",
+        // 使用组件
+        components: {},
+        // 传入参数
+        props: {
+            /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        is_num: false, // 是否为数字
+                        is_light: false // 是否高亮
+                    },{
+                        name: "冷却风温度",
+                        field: "lqf",
+                        is_num: true,
+                        is_light: false
+                    }],
+                    data: [{
+                        name: "1E01",
+                        lqf: 15.78,
+                        is_light: false
+                    }]
+                }
+             */
+            data: Object
+        },
+        // 自定义事件
+        emits: {},
+        // 数据
+        data() {
+            return {}
+        },
+        // 函数
+        methods: {},
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less">
+    @titleGray: #9CA5A8;
+    @rowGray: #606769;
+    @darkBack: #536268;
+    .com-table {
+        width: 100%;
+        border-collapse: collapse;
+
+        thead {
+            tr {
+                th {
+                    background-color: fade(@darkBack, 60%);
+                    padding: 1.481vh 0;
+                    color: @titleGray;
+                    font-weight: 400;
+                    font-size: @fontsize-s;
+                    position: sticky;
+                    top: 0;
+                    
+                    &.light {
+                        color: @green;
+                    }
+                }
+            }
+        }
+
+        tbody {
+            tr {
+                &:nth-child(2n) {
+                    background-color: fade(@rowGray, 20%);
+                }
+
+                td {
+                    padding: 0.556vh 0;
+                    color: @rowGray;
+                    text-align: center;
+                    font-size: @fontsize-s;
+                    
+                    &.light {
+                        color: @green;
+                    }
+                    
+                    &.num {
+                        font-family: "Bicubik";
+                        font-weight: 400;
+                    }
+                }
+            }
+        }
+    }
+</style>