update

backend/config.ini

@@ -20,5 +20,5 @@ name = evm_store
 backup_dir = backup
 evueapps_dir = evueapps
 launcher_dir = launcher
-host = 127.0.0.1
+host = 0.0.0.0
 port = 5001
\ No newline at end of file

backend/view/api.py

@@ -29,12 +29,21 @@ def stopApp():
         f.write(json.dumps(ret, indent=4))
     return ret
 
+@api.route("/monitor", methods=['GET', 'POST'])
+def action_monitor():
+    print(request.json)
+    print(request.data)
+    print(request.form)
+    print(type(request.json))
+
+    
+
+    return response_result(ResponseCode.OK)
+
 @api.route("/opqcp", methods=['POST'])
 def action_opqcp():
     params = request.json
-
     print(params)
-
     signalManager.actionOpqcp.emit(params)
 
     return response_result(ResponseCode.OK)

evm_monitor/.gitignore

+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

evm_monitor/README.md

+# vuedemo
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

evm_monitor/babel.config.js

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

evm_monitor/controller.py

+'''
+Author: your name
+Date: 2021-06-28 16:56:59
+LastEditTime: 2021-06-28 17:20:52
+LastEditors: Please set LastEditors
+Description: In User Settings Edit
+FilePath: \ewebengine\tools\evm_monitor\controller.py
+'''
+
+from database import session, System, Lvgl, Evm, Image
+
+class SystemResource(object):
+    def get(self):
+        result = session.query(System).all()
+        print(result)
+        return result
+
+    def post(self, params):
+        print("============>", params)
+        result = System(**params)
+        session.add(result)
+        return session.commit()
+        
+    def put(self):
+        pass
+
+    def delete(self):
+        pass
+
+class LvglResource(object):
+    def get(self):
+        result = session.query(Lvgl).all()
+        print(result)
+        return result
+
+    def post(self, params):
+        result = Lvgl(**params)
+        session.add(result)
+        return session.commit()
+        
+    def put(self):
+        pass
+
+    def delete(self):
+        pass
+
+class EvmResource(object):
+    def get(self):
+        result = session.query(Evm).all()
+        print(result)
+        return result
+
+    def post(self, params):
+        result = Evm(**params)
+        session.add(result)
+        return session.commit()
+        
+    def put(self):
+        pass
+
+    def delete(self):
+        pass
+
+class ImageResource(object):
+    def get(self):
+        result = session.query(Image).all()
+        print(result)
+        return result
+
+    def post(self, params):
+        result = Image(**params)
+        session.add(result)
+        return session.commit()
+
+    def post_array(self, array):
+        t = []
+        for a in array:
+            t.append(Image(**a))
+        session.add_all(t)
+        return session.commit()
+        
+    def put(self):
+        pass
+
+    def delete(self):
+        pass
+
+systemResource = SystemResource()
+lvglResource = LvglResource()
+evmResource = EvmResource()
+imageResource = ImageResource()
+
+def insert_data(msg):
+    if msg.get("system"):
+        print(msg.get("system"))
+        res = systemResource.post(msg.get("system"))
+        print("!!!!!!", res)
+
+    if msg.get("lvgl"):
+        res = lvglResource.post(msg.get("lvgl"))
+        print("@@@@@@", res)
+
+    if msg.get("evm"):
+        res = evmResource.post(msg.get("evm"))
+        print("######", res)
+
+    if msg.get("image"):
+        res = imageResource.post_array(msg.get("image"))
+        print("$$$$$$", res)
\ No newline at end of file

evm_monitor/database.py

+'''
+Author: your name
+Date: 2021-06-28 16:43:12
+LastEditTime: 2021-06-28 19:08:29
+LastEditors: Please set LastEditors
+Description: In User Settings Edit
+FilePath: \ewebengine\tools\evm_monitor\database.py
+'''
+from datetime import datetime
+from sqlalchemy import create_engine
+from sqlalchemy import Column, Integer, String, Float
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+
+engine = create_engine('sqlite:///monitor.db?check_same_thread=False', echo=True)
+
+Base = declarative_base()
+
+def get_current_datetime():
+    return datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
+class System(Base):
+    __tablename__ = 'monitor_system'
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    free_size = Column(Integer) # 单位：字节
+    timestamp = Column(String(50), default=get_current_datetime)
+
+class Lvgl(Base):
+    __tablename__ = 'monitor_lvgl'
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    total_size = Column(Integer) # 单位：字节
+    free_cnt = Column(Integer)
+    free_size = Column(Integer)
+    free_biggest_size = Column(Integer)
+    used_cnt = Column(Integer)
+    used_pct = Column(Integer)
+    frag_pct = Column(Integer)
+    timestamp = Column(String(50), default=get_current_datetime)
+
+class Evm(Base):
+    __tablename__ = 'monitor_evm'
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    total_size = Column(Integer) # 单位：字节
+    free_size = Column(Integer)
+    gc_usage = Column(Integer)
+    heap_total_size = Column(Integer)
+    heap_used_size = Column(Integer)
+    stack_total_size = Column(Integer)
+    stack_used_size = Column(Integer)
+    timestamp = Column(String(50), default=get_current_datetime)
+
+class Image(Base):
+    __tablename__ = 'monitor_image'
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    uri = Column(String(50))
+    length = Column(Integer)
+    png_uncompressed_size = Column(Integer)
+    png_total_count = Column(Integer)
+    png_file_size = Column(Integer)
+    timestamp = Column(String(50), default=get_current_datetime)
+
+Base.metadata.create_all(engine, checkfirst=True)
+
+# engine是2.2中创建的连接
+Session = sessionmaker(bind=engine)
+ 
+# 创建Session类实例
+session = Session()

evm_monitor/package.json

+{
+  "name": "web-creator-pro",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "clipboard": "^2.0.6",
+    "codemirror": "^5.50.0",
+    "core-js": "^3.9.0",
+    "dateformat": "^3.0.3",
+    "el-table-infinite-scroll": "^1.0.10",
+    "element-ui": "^2.13.0",
+    "js-cookie": "^2.2.1",
+    "local-storage": "^2.0.0",
+    "mockjs": "^1.1.0",
+    "moment": "^2.29.1",
+    "node-sass": "^4.14.1",
+    "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
+    "sass-loader": "^8.0.0",
+    "vue": "^2.6.12",
+    "vue-codemirror": "^4.0.6",
+    "vue-concise-slider": "^3.4.4",
+    "vue-count-to": "^1.0.13",
+    "vue-grid-layout": "^2.3.12",
+    "vue-loading-spinner": "^1.0.11",
+    "vue-plyr": "^7.0.0",
+    "vue-router": "^3.1.3",
+    "vue-star-rating": "^1.7.0",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.5.8",
+    "@vue/cli-plugin-eslint": "^4.5.8",
+    "@vue/cli-service": "^4.5.8",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.0.3",
+    "css-loader": "^5.0.1",
+    "eslint": "^7.13.0",
+    "eslint-config-tabsanity": "^1.0.25",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-vue": "^7.1.0",
+    "less": "^3.12.2",
+    "less-loader": "^7.1.0",
+    "node-sass": "^5.0.0",
+    "prettier": "^2.1.2",
+    "sass-loader": "^10.1.0",
+    "script-ext-html-webpack-plugin": "^2.1.3",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.2",
+    "vue-cli": "^2.9.6",
+    "vue-concise-slider": "^3.4.4",
+    "vue-template-compiler": "^2.6.12"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "no-console": "off",
+      "no-useless-escape": "off"
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

evm_monitor/public/index.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<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="shortcut icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon">
+    <link rel="png" href="<%= BASE_URL %>favicon.png">
+    <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>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.1.1/dist/gsap.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file

evm_monitor/running_monit.py

+'''
+Author: your name
+Date: 2021-06-28 14:39:58
+LastEditTime: 2021-06-28 21:12:41
+LastEditors: Please set LastEditors
+Description: In User Settings Edit
+FilePath: \ewebengine\tools\evm_monitor\running_monitor.py
+'''
+import tornado.ioloop
+import tornado.web
+from tornado.web import RequestHandler, StaticFileHandler
+from tornado.websocket import WebSocketHandler, WebSocketClosedError
+import json
+import signal
+import logging
+import pprint
+from controller import insert_data
+
+logger = logging.getLogger(__name__)
+
+class ObjectDict(dict):
+    """Makes a dictionary behave like an object, with attribute-style access.
+    """
+    def __getattr__(self, name):
+        try:
+            return self[name]
+        except KeyError:
+            raise AttributeError(name)
+
+    def __setattr__(self, name, value):
+        self[name] = value
+
+class GracefulExit(SystemExit):
+    code = 1
+
+def raise_graceful_exit(*args):
+    tornado.ioloop.IOLoop.current().stop()
+    print("Gracefully shutdown", args)
+    raise GracefulExit()
+
+class BaseHandler(RequestHandler):
+    """解决JS跨域请求问题"""
+    def set_default_headers(self):
+        self.set_header('Access-Control-Allow-Origin', '*')
+        self.set_header('Access-Control-Allow-Methods', 'POST, GET')
+        self.set_header('Access-Control-Max-Age', 1000)
+        self.set_header('Access-Control-Allow-Headers', '*')
+        self.set_header('Content-type', 'application/json')
+
+class WebsocketResponse(ObjectDict):
+    def __init__(self, type="Response", api_code=-1, message='fail', data=None, traceback=""):
+        super(WebsocketResponse, self).__init__()
+        self.type = type
+        self.code = api_code
+        self.message = message
+        self.data = data
+        self.traceback = traceback
+        if isinstance(self.data, list):
+            self.count = len(self.data)
+
+def pushmessage(func):
+    def send(*agrs, **kwargs):
+        self = agrs[0]
+        ret = func(*agrs, **kwargs)
+        if ret:
+            msg, binary = ret
+            try:
+                if isinstance(msg, WebsocketResponse) or isinstance(msg, dict):
+                    self.write_message(json.dumps(msg), binary)
+                elif isinstance(msg, str) or isinstance(msg, str):
+                    self.write_message(msg, binary)
+                else:
+                    self.write_message(repr(msg), binary)
+
+            except WebSocketClosedError as e:
+                self.on_close()
+    return send
+
+class BaseWebsocket(WebSocketHandler):
+    handlers = {}
+    def open(self):
+        className = self.__class__.__name__
+        logger.warning("websocket of %s is opened" % className)
+        if className not in self.handlers:
+            self.handlers[className] = set()
+        self.handlers[className].add(self)
+        pprint.pprint(self.handlers)
+
+    @pushmessage
+    def send(self, message, binary=False):
+        return message, binary
+
+    def on_close(self):
+        className = self.__class__.__name__
+        logger.warning("websocket of %s is closed" % className)
+        if className in self.handlers:
+            self.handlers[className].remove(self)
+
+    def check_origin(self, origin):
+        logger.info(origin)
+        return True
+
+    @classmethod
+    def broadcastMessage(cls, message, binary=False):
+        className = cls.__name__
+        pprint.pprint(cls.handlers)
+
+        message = json.dumps(message)
+
+        if className in cls.handlers:
+            for handler in cls.handlers[className]:
+                handler.send(message, binary)
+
+class NotifyHandler(BaseWebsocket):
+    """
+        建立与web前端的通信连接，发送状态信息报文
+    """
+
+    def open(self):
+        super(NotifyHandler, self).open()
+
+    def on_message(self, message):
+        print("hello,world", message)
+        logger.info(message)
+
+class MainHandler(BaseHandler):
+    def get(self,*args, **kwargs):
+        print("#############", args)
+        print("/////////////", kwargs)
+        print(self.request.path)    # 请求路径
+        print(self.request.method)  # 请求方法
+        print(self.request.host)    # IP地址
+        self.write("Hello, world")
+
+    def post(self):
+        data = tornado.escape.json_decode(self.request.body)
+        print("=====>", data, type(data))
+        
+        self.write(json.dumps({ 'code': 100, 'message': 'success' }))
+
+        message = {'system': {'free_size': 0}, 'lvgl': {'total_size': 5242880, 'free_cnt': 31, 'free_size': 1279664, 'free_biggest_size': 1205448, 'used_cnt': 832, 'used_pct': 76, 'frag_pct': 6}, 'evm': {'total_size': 2097152, 'free_size': 0, 'gc_usage': 50}, 'image': [{'uri': 'evue_launcher', 'length': 1043, 'png_total_count': 0, 'png_uncompressed_size': 0, 'png_file_size': 0}, {'uri': 'kdgs_1_storyList', 'length': 9608, 'png_total_count': 193, 'png_uncompressed_size': 370884, 'png_file_size': 209807}]}
+        insert_data(message)
+        NotifyHandler.broadcastMessage(message)
+
+class DeviceMessageHandler(BaseHandler):
+    def get(self):
+        self.write("Hello, world")
+
+    def post(self):
+        data = tornado.escape.json_decode(self.request.body)
+        print("=====>", data, type(data))
+
+        insert_data(data)
+
+        NotifyHandler.broadcastMessage(data)
+        self.write(json.dumps({ 'code': 100, 'message': 'success' }))
+
+def make_app():
+    return tornado.web.Application([
+        (r"/", MainHandler),
+        (r"/api/v1/evm_store/monitor", DeviceMessageHandler),
+        (r"/ws/v1/notify", NotifyHandler),
+        (r"/dist/(.*)", StaticFileHandler, { "path": "dist" }),
+    ])
+
+if __name__ == "__main__":
+    app = make_app()
+    app.listen(5001)
+
+    signal.signal(signal.SIGINT, raise_graceful_exit)
+    signal.signal(signal.SIGTERM, raise_graceful_exit)
+
+    tornado.ioloop.IOLoop.current().start()
\ No newline at end of file

evm_monitor/src/App.vue

+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+import defaultSetting from './settings'
+export default {
+  name: 'App',
+  mounted() {
+      let divTemp = document.createElement("title");
+      divTemp.innerHTML = defaultSetting.title;
+      document.querySelector("head").appendChild(divTemp)
+  },
+}
+</script>

evm_monitor/src/api/app-store.js

+import request from "@/utils/request";
+
+export function addApp(params) {
+    return request({
+        url: "/api/v1/evm_store/apps/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getAppsList(params) {
+    return request({
+        url: "/api/v1/evm_store/apps/list",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateApp(id, params) {
+    return request({
+        url: `/api/v1/evm_store/apps/update/${id}`,
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteApp(id) {
+    return request({
+        url: `/api/v1/evm_store/apps/delete/${id}`,
+        method: "post",
+    });
+}
+
+export function getBuildApp(id) {
+    return request({
+        url: `/api/v1/evm_store/apps/getBuildApp/${id}`,
+        method: "post"
+    })
+}
+
+export function rebuildApp(params) {
+    return request({
+        url: "/api/v1/evm_store/apps/get",
+        method: "post",
+        data: params,
+    });
+}
+
+export function buildApp(id) {
+    return request({
+        url: `/api/v1/evm_store/apps/build/${id}`,
+        method: "post",
+    });
+}
+
+export function getBuildLogsList(params) {
+    return request({
+        url: "/api/v1/evm_store/apps/buildLogs",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getDownloadList(params) {
+    return request({
+        url: "/api/v1/evm_store/download/list",
+        method: "post",
+        data: params,
+    });
+}
+
+export function addDownload(params) {
+    return request({
+        url: "/api/v1/evm_store/download/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateDownload(id, params) {
+    return request({
+        url: `/api/v1/evm_store/download/update/${id}`,
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteDownload(params) {
+    return request({
+        url: "/api/v1/evm_store/framework/delete",
+        method: "post",
+        data: params,
+    });
+}
+
+export function addDevice(params) {
+    return request({
+        url: "/api/v1/evm_store/device/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteDevice(id) {
+    return request({
+        url: `/api/v1/evm_store/device/delete/${id}`,
+        method: "post"
+    });
+}
+
+export function getDeviceList(params) {
+    return request({
+        url: "/api/v1/evm_store/device/list",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateDevice(id, params) {
+    return request({
+        url: `/api/v1/evm_store/device/update/${id}`,
+        method: "post",
+        data: params,
+    });
+}
+
+export function addUser(params) {
+    // 增
+    return request({
+        url: "/api/v1/evm_store/user/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteUser(id) {
+    // 删
+    return request({
+        url: `/api/v1/evm_store/user/delete/${id}`,
+        method: "post",
+    });
+}
+
+export function getUser(params) {
+    return request({
+        url: "/api/v1/evm_store/user/get",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getUserList(params) {
+    // 查
+    return request({
+        url: "/api/v1/evm_store/user/list",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateUser(id, params) {
+    // 改
+    return request({
+        url: `/api/v1/evm_store/user/update/${id}`,
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateUserPassword(params) {
+    return request({
+        url: "/api/v1/evm_store/updatePassword",
+        method: "post",
+        data: params,
+    });
+}
+
+export function doLogin(params) {
+    return request({
+        url: "/api/v1/evm_store/login/login",
+        method: "post",
+        data: params,
+    });
+}
+
+export function doLogout(params) {
+    return request({
+        url: "/api/v1/evm_store/login/logout",
+        method: "post",
+        data: params,
+    });
+}
+
+export function doRegister(params) {
+    return request({
+        url: "/api/v1/evm_store/login/register",
+        method: "post",
+        data: params,
+    });
+}
+
+export function addAppLogs(params) {
+    return request({
+        url: "/api/v1/evm_store/appLogs/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteAppLogs(params) {
+    return request({
+        url: "/api/v1/evm_store/appLogs/delete",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getAppLogsList(params) {
+    return request({
+        url: "/api/v1/evm_store/appLogs/list",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateAppLogs(params) {
+    return request({
+        url: "/api/v1/evm_store/appLogs/update",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getConvertString(params) {
+    return request({
+        url: "/api/v1/evm_store/system/convertString",
+        method: "post",
+        data: params,
+    });
+}
+
+export function actionOpqcp(params) {
+    return request({
+        url: "/api/v1/evm_store/opqcp",
+        method: "post",
+        data: params,
+    });
+}
+
+export function getTopicList(params) {
+    return request({
+        url: "/uowap/index",
+        method: "get",
+        params
+    });
+}
+
+export function getTabList(params) {
+    return request({
+        url: "/uowap/index",
+        method: "get",
+        params
+    });
+}
+
+export function getAppList(params) {
+    return request({
+        url: "/uowap/index",
+        method: "get",
+        params
+    });
+}
+
+export function getDataList(params) {
+    return request({
+        url: "/uowap/index",
+        method: "get",
+        params
+    });
+}

evm_monitor/src/api/index.js

+import request from "@/utils/request";
+
+export function getWorkbenckData(params) {
+  return request({
+    url: "/api/v1/evm_store/workbench/query",
+    method: "post",
+    data: params,
+  });
+}
+
+export function doLogin(params) {
+  return request({
+    url: "/api/v1/evm_store/login/login",
+    method: "post",
+    data: params,
+  });
+}
+
+export function doLogout(params) {
+  return request({
+    url: "/api/v1/evm_store/login/logout",
+    method: "post",
+    data: params,
+  });
+}
+
+export function doRegister(params) {
+  return request({
+    url: "/api/v1/evm_store/login/register",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addUser(params) {
+  // 增
+  return request({
+    url: "/api/v1/evm_store/user/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteUser(id) {
+  // 删
+  return request({
+    url: `/api/v1/evm_store/user/delete/${id}`,
+    method: "post",
+  });
+}
+
+export function getUser(params) {
+  return request({
+    url: "/api/v1/evm_store/user/get",
+    method: "post",
+    data: params,
+  });
+}
+
+export function getUserList(params) {
+  // 查
+  return request({
+    url: "/api/v1/evm_store/user/list",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateUser(id, params) {
+  // 改
+  return request({
+    url: `/api/v1/evm_store/user/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateUserPassword(params) {
+  return request({
+    url: "/api/v1/evm_store/updatePassword",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addDepot(params) {
+  return request({
+    url: "/api/v1/evm_store/depot/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteDepot(id) {
+  return request({
+    url: `/api/v1/evm_store/depot/delete/${id}`,
+    method: "post",
+  });
+}
+
+export function getDepotList(params) {
+  return request({
+    url: "/api/v1/evm_store/depot/list",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateDepot(id, params) {
+  return request({
+    url: `/api/v1/evm_store/depot/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function getDictsList(params) {
+  return request({
+    url: "/api/v1/evm_store/dict/list",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addDict(params) {
+  return request({
+    url: "/api/v1/evm_store/dict/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateDict(id, params) {
+  return request({
+    url: `/api/v1/evm_store/dict/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteDict(id) {
+  return request({
+    url: `/api/v1/evm_store/dict/delete/${id}`,
+    method: "post",
+  });
+}
+
+export function getProject(params) {
+  return request({
+    url: "/api/v1/evm_store/project/get",
+    method: "post",
+    data: params,
+  });
+}
+
+export function getProjectList(params) {
+  return request({
+    url: "/api/v1/evm_store/project/list",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addProject(params) {
+  return request({
+    url: "/api/v1/evm_store/project/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateProject(id, params) {
+  return request({
+    url: `/api/v1/evm_store/project/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteProject(id) {
+  return request({
+    url: `/api/v1/evm_store/project/delete/${id}`,
+    method: "post",
+  });
+}
+
+export function getRoleList(params) {
+  return request({
+    url: "/api/v1/evm_store/role/list",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addRole(params) {
+  return request({
+    url: "/api/v1/evm_store/role/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateRole(id, params) {
+  return request({
+    url: `/api/v1/evm_store/role/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteRole(id) {
+  return request({
+    url: `/api/v1/evm_store/role/delete/${id}`,
+    method: "delete",
+  });
+}
+
+export function getPermissionList(params) {
+  return request({
+    url: "/api/v1/evm_store/permission/list",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addPermission(params) {
+  return request({
+    url: "/api/v1/evm_store/permission/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updatePermission(id, params) {
+  return request({
+    url: `/api/v1/evm_store/permission/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deletePermission(id) {
+  return request({
+    url: `/api/v1/evm_store/permission/delete/${id}`,
+    method: "post",
+  });
+}
+
+export function addNewProject(params) {
+  return request({
+    url: "/api/v1/evm_store/system/addProject",
+    method: "post",
+    data: params,
+  });
+}
+
+export function exportProject(params) {
+  return request({
+    url: "/api/v1/evm_store/system/exportProject",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addFlow(params) {
+  return request({
+    url: "/api/v1/evm_store/flow/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateFlow(id, params) {
+  return request({
+    url: `/api/v1/evm_store/flow/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteFlow(id) {
+  return request({
+    url: `/api/v1/evm_store/flow/delete/${id}`,
+    method: "delete",
+  });
+}
+
+export function getFlowList(params) {
+  return request({
+    url: "/api/v1/evm_store/system/getFlowList",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addPayback(params) {
+  return request({
+    url: "/api/v1/evm_store/payback/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updatePayback(id, params) {
+  return request({
+    url: `/api/v1/evm_store/payback/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deletePayback(id) {
+  return request({
+    url: `/api/v1/evm_store/payback/delete/${id}`,
+    method: "post",
+  });
+}
+
+export function getPaybackList(params) {
+  return request({
+    url: "/api/v1/evm_store/system/getPaybackList",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addAnnex(params) {
+  return request({
+    url: "/api/v1/evm_store/annex/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteAnnex(id) {
+  return request({
+    url: `/api/v1/evm_store/annex/delete/${id}`,
+    method: "post",
+  });
+}
+
+export function getAnnexList(params) {
+  return request({
+    url: "/api/v1/evm_store/annex/list",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateAnnex(id, params) {
+  return request({
+    url: `/api/v1/evm_store/annex/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteProjectUser(params) {
+  return request({
+    url: "/api/v1/evm_store/system/deleteProjectUser",
+    method: "post",
+    data: params,
+  });
+}
+
+export function modifyProjectUser(params) {
+  return request({
+    url: "/api/v1/evm_store/system/modifyProjectUser",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateFlowList(params) {
+  return request({
+    url: "/api/v1/evm_store/system/updateFlow",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updatePaybackList(params) {
+  return request({
+    url: "/api/v1/evm_store/system/updatePayback",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateProduction(params) {
+  return request({
+    url: "/api/v1/evm_store/system/updateProductionPlan",
+    method: "post",
+    data: params,
+  });
+}
+
+export function getCalendarList(params) {
+  return request({
+    url: "/api/v1/evm_store/calendar/list",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addCalendar(params) {
+  return request({
+    url: "/api/v1/evm_store/calendar/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateCalendar(id, params) {
+  return request({
+    url: `/api/v1/evm_store/calendar/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteCalendar(id) {
+  return request({
+    url: `/api/v1/evm_store/calendar/delete/${id}`,
+    method: "post",
+  });
+}
+
+export function getRoleUser(params) {
+  return request({
+    url: '/api/v1/evm_store/system/getRoleUsers',
+    method: 'post',
+    data: params,
+  })
+}
+
+export function getSummaryList(params) {
+  return request({
+    url: "/api/v1/evm_store/summary/list",
+    method: 'post',
+    data: params,
+  });
+}
+
+export function addSummary(params) {
+  return request({
+    url: "/api/v1/evm_store/summary/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateSummary(id, params) {
+  return request({
+    url: `/api/v1/evm_store/summary/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteSummary(id) {
+  return request({
+    url: `/api/v1/evm_store/summary/delete/${id}`,
+    method: "post",
+  });
+}
+
+export function getProductionPlanList(params) {
+  return request({
+    url: "/api/v1/evm_store/productionPlan/list",
+    method: 'post',
+    data: params,
+  });
+}
+
+export function addProductionPlan(params) {
+  return request({
+    url: "/api/v1/evm_store/productionPlan/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateProductionPlan(id, params) {
+  return request({
+    url: `/api/v1/evm_store/productionPlan/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteProductionPlan(id) {
+  return request({
+    url: `/api/v1/evm_store/productionPlan/delete/${id}`,
+    method: "post",
+  });
+}
+
+export function getFileList(params) {
+  return request({
+    url: "/api/v1/evm_store/netdisc/list",
+    method: "post",
+    data: params,
+  });
+}
+
+export function addFile(params) {
+  return request({
+    url: "/api/v1/evm_store/netdisc/add",
+    method: "post",
+    data: params,
+  });
+}
+
+export function updateFile(id, params) {
+  return request({
+    url: `/api/v1/evm_store/netdisc/update/${id}`,
+    method: "post",
+    data: params,
+  });
+}
+
+export function deleteFile(params) {
+  return request({
+    url: "/api/v1/evm_store/netdisc/delete",
+    method: "post",
+    data: params,
+  });
+}

evm_monitor/src/assets/images/alipay.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1617084891406" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2122" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M902.095 652.871l-250.96-84.392s19.287-28.87 39.874-85.472c20.59-56.606 23.539-87.689 23.539-87.689l-162.454-1.339v-55.487l196.739-1.387v-39.227H552.055v-89.29h-96.358v89.294H272.133v39.227l183.564-1.304v59.513h-147.24v31.079h303.064s-3.337 25.223-14.955 56.606c-11.615 31.38-23.58 58.862-23.58 58.862s-142.3-49.804-217.285-49.804c-74.985 0-166.182 30.123-175.024 117.55-8.8 87.383 42.481 134.716 114.728 152.139 72.256 17.513 138.962-0.173 197.04-28.607 58.087-28.391 115.081-92.933 115.081-92.933l292.486 142.041c-11.932 69.3-72.067 119.914-142.387 119.844H266.37c-79.714 0.078-144.392-64.483-144.466-144.194V266.374c-0.074-79.72 64.493-144.399 144.205-144.47h491.519c79.714-0.073 144.396 64.49 144.466 144.203v386.764z m-365.76-48.895s-91.302 115.262-198.879 115.262c-107.623 0-130.218-54.767-130.218-94.155 0-39.34 22.373-82.144 113.943-88.333 91.519-6.18 215.2 67.226 215.2 67.226h-0.047z" fill="#02A9F1" p-id="2123"></path></svg>
\ No newline at end of file

evm_monitor/src/assets/images/com.qq.weixin.deepin.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>微信</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#A2EC60" offset="0%"></stop>
+            <stop stop-color="#79CC0D" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FCFCFC" offset="0%"></stop>
+            <stop stop-color="#E7ECED" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="微信">
+            <image id="Bitmap" x="0" y="6" width="48" height="39" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAnCAYAAABJ0cukAAAABGdBTUEAA1teXP8meAAAA11JREFUWAnN1+ly2kAQBGA7932+/wPmT1Kp3CG2M9/GTdaAbAECMVXDntrtnuldifOz7ey8m67et7uhs6vrxmrZz5mkPgRgdfGA7UvgevdMP561L7t55oSU+t6WTYYWCqB7NUEdmIuhyQP9nr1fDvgqmYFHxncPEUi/jQH4U27zfcyaD8onJQLgqtkomykX5VOlXRCy9iRrrhLowdtM5Kc2wPnD63Kv9XsCPXg631br2wDpSewlTfruLRo9JPjsB7h9ZELwdrIQsIBscJo/lkWi9t2JRE9A9H8fC3m3jz3tHQl3Q3dXEfCgUhSOIZ3a5oblNrL/1pYMzAU+gAUuWUjfqDIZQGCv22DUbsOTnAUEgmf0eQDcQ4/LaTHprOpRzb5RQ0gEwK1ksGYmzQW+Aaifn6lUiUSIUEbUsYYxrD0bMupzG8BkxWHM+VjLRiSUl8kx3wGFa5Ql+hsDjJ20mPRo1HLzTIJPcJGItBqSSMg1hsBaitqs0/gR6JCAs2ElIaZBRhjO8TaubUcZEpF9k5ZGoq58Ue42iO6qenJGLa79JYEeIUm9Kv/ad55gPQf6spdQ7lhn4Vn59xMEHkjUgsRFCGRAWhB5Uv6y/Fv5KRoCAr1YJQAsEpzOjPdvyGqehCEA3yJaCirRd0h+lQPfDkqVp2ZL3HkP9ABDwmt8E4Hn1e/KndPs387skskAmp7Am5rDIztjXiwypm5BYx/LZfCQ5oyS9tVdBIB4Wv6+nO4c6nwvyR7ASmPqHMkP5Ycy0bcnhdxKQGQjF2xF1VtaPwM64NWZxT2D9I/yQ9i7WtTaDcdQBsgBQxEHjkSGzkQNtTlKc9jbcplKW98UBjwsAtlkK+VDhoRJmHJtvsn6MXWZQUKkrDGFkbGr01fC8t/jbQRs2gPTHmMAc5kTMeT3/UD0eUOaX8rzrdaCeReBmr+ThYTydbm3OjntKilvXYHweRM1VPXfrdEqB/gB3mZAk5TbCRkHPeeqRbHaTB+JICvaLo2MO6vqzpV1l+ahQ1nWlmUAAAdQNNX1h4gydaTVkf5U/rncva+9dqZMPLQFnBLo3jMGg8iKslI/ooBrywbwyqNloPa6YUCxvkxdf+Si1I9oMiUrLgJyzLyq/l+sNWb42USgx2WcdIDu3ZxmfwEDos38MEEH9AAAAABJRU5ErkJggg=="></image>
+            <g id="Group" transform="translate(2.000000, 7.000000)">
+                <path d="M5.44086022,27.9139785 C5.03777931,27.5108976 5.5,25.5 5.4268044,23.1689488 C2.09828764,20.7419141 0,17.1964111 0,13.2473118 C0,5.93102353 7.20195714,0 16.0860215,0 C24.9700859,0 32.172043,5.93102353 32.172043,13.2473118 C32.172043,20.5636001 24.9700859,26.4946237 16.0860215,26.4946237 C14.1408956,26.4946237 12.276405,26.2103074 10.5504841,25.6893854 C8,26.4946237 6.22998122,28.5058192 5.44086022,27.9139785 Z" id="Combined-Shape" fill="url(#linearGradient-1)"></path>
+                <path d="M11.1182796,10.8817204 C9.94244752,10.8817204 8.98924731,9.92852022 8.98924731,8.75268817 C8.98924731,7.57685612 9.94244752,6.62365591 11.1182796,6.62365591 C12.2941116,6.62365591 13.2473118,7.57685612 13.2473118,8.75268817 C13.2473118,9.92852022 12.2941116,10.8817204 11.1182796,10.8817204 Z M21.5268817,10.8817204 C20.3510497,10.8817204 19.3978495,9.92852022 19.3978495,8.75268817 C19.3978495,7.57685612 20.3510497,6.62365591 21.5268817,6.62365591 C22.7027138,6.62365591 23.655914,7.57685612 23.655914,8.75268817 C23.655914,9.92852022 22.7027138,10.8817204 21.5268817,10.8817204 Z" id="Combined-Shape" fill="#166E16"></path>
+                <path d="M39.5192916,35.2890576 C39.9228462,35.0463938 39.5,33 39.6047822,31.3270848 C42.3030259,29.3299594 44,26.4334956 44,23.2106262 C44,17.1854476 38.0689765,12.3010753 30.7526882,12.3010753 C23.4363999,12.3010753 17.5053763,17.1854476 17.5053763,23.2106262 C17.5053763,29.2358048 23.4363999,34.1201771 30.7526882,34.1201771 C32.3545566,34.1201771 33.8900194,33.8860343 35.311366,33.4570397 C37,34.1201771 38.8694272,35.7764558 39.5192916,35.2890576 Z" id="Combined-Shape" fill="url(#linearGradient-2)"></path>
+                <path d="M26.7044655,21.181227 C25.7585739,21.181227 24.9917774,20.4144304 24.9917774,19.4685388 C24.9917774,18.5226473 25.7585739,17.7558507 26.7044655,17.7558507 C27.650357,17.7558507 28.4171536,18.5226473 28.4171536,19.4685388 C28.4171536,20.4144304 27.650357,21.181227 26.7044655,21.181227 Z M35.2762555,21.181227 C34.330364,21.181227 33.5635674,20.4144304 33.5635674,19.4685388 C33.5635674,18.5226473 34.330364,17.7558507 35.2762555,17.7558507 C36.222147,17.7558507 36.9889436,18.5226473 36.9889436,19.4685388 C36.9889436,20.4144304 36.222147,21.181227 35.2762555,21.181227 Z" id="Combined-Shape" fill="#7B7F7F"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

evm_monitor/src/assets/images/dde-calendar.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="dde-calendar64-a" width="131.5%" height="133.3%" x="-14.8%" y="-14.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <radialGradient id="dde-calendar64-b" cx="54.324%" cy="55.779%" r="61.914%" fx="54.324%" fy="55.779%" gradientTransform="matrix(-.81914 -.50611 .72543 -.9141 .584 1.343)">
+      <stop offset="0%"/>
+      <stop offset="100%" stop-opacity=".148"/>
+    </radialGradient>
+    <path id="dde-calendar64-d" d="M25.125,38.25 L25.125,35.4420068 L17.5006017,35.4420068 L23.9204272,27.5420068 C24.7234757,26.5388322 25.125,25.3923469 25.125,24.102551 C25.1067489,22.4903061 24.554653,21.1602041 23.4687124,20.1122449 C22.4010229,19.0553288 21.0093763,18.5179138 19.2937726,18.5 C17.7606799,18.5179138 16.4694144,19.0463719 15.4199759,20.0853741 C14.3796631,21.1512472 13.8230044,22.499263 13.75,24.1294218 L13.75,24.1294218 L16.5971721,24.1294218 C16.6975531,23.2337302 17.0169475,22.5395692 17.555355,22.0469388 C18.0755114,21.5543084 18.7279884,21.3079932 19.5127858,21.3079932 C20.3979643,21.325907 21.0823807,21.6080499 21.5660349,22.1544218 C22.031438,22.7007937 22.2641396,23.3412132 22.2641396,24.0756803 C22.2641396,24.3533447 22.2276374,24.6489229 22.154633,24.962415 C22.0451264,25.2938209 21.8398014,25.6520975 21.5386582,26.0372449 L21.5386582,26.0372449 L13.75,35.6032313 L13.75,38.25 L25.125,38.25 Z M32.8548193,38.125 L39.625,21.3131859 L39.625,18.5 L28.25,18.5 L28.25,24.1532922 L31.1143072,24.1532922 L31.1143072,21.3131859 L36.4180723,21.3131859 L29.6615964,38.125 L32.8548193,38.125 Z"/>
+    <filter id="dde-calendar64-c" width="142.5%" height="155.7%" x="-21.3%" y="-17.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0.423732517   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+    <linearGradient id="dde-calendar64-g" x1="69.809%" x2="57.001%" y1="71.097%" y2="57.701%">
+      <stop offset="0%" stop-color="#C6C6C6"/>
+      <stop offset="53.052%" stop-color="#E7E7E7"/>
+      <stop offset="100%" stop-color="#F4F4F4"/>
+    </linearGradient>
+    <path id="dde-calendar64-f" d="M54,36.5 C54,36.5 52.7578833,40.9842333 52,42.5 C51,44.5 49.9672131,44.1321429 48,46.5 C46.0327869,48.8678571 47.3606557,49.325 44.4098361,51.8142857 C42.8284824,53.1483019 38.5,54 38.5,54 C50.7336066,54 54,42.9964286 54,36.5 Z"/>
+    <filter id="dde-calendar64-e" width="125.8%" height="122.9%" x="-12.9%" y="-5.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#dde-calendar64-a)" transform="rotate(-8 65.252 -6.252)">
+    <rect width="54" height="54" fill="#FFF" rx="9.75"/>
+    <path fill="url(#dde-calendar64-b)" fill-opacity=".39" d="M54,37 L54,44.25 C54,49.6347763 49.6347763,54 44.25,54 L39,54 C44.125,53.375 47.7291667,51.3958333 49.8125,48.0625 C51.8958333,44.7291667 53.2916667,41.0416667 54,37 Z"/>
+    <path fill="#E06164" fill-rule="nonzero" d="M13.25875,13 L13.25875,9.815 C13.25875,9.2375 13.18,8.40625 13.13625,7.82 L13.17125,7.82 L13.67875,9.3075 L14.8075,12.37875 L15.4375,12.37875 L16.5575,9.3075 L17.07375,7.82 L17.10875,7.82 C17.05625,8.40625 16.9775,9.2375 16.9775,9.815 L16.9775,13 L17.9225,13 L17.9225,6.55125 L16.75,6.55125 L15.58625,9.815 C15.4375,10.24375 15.315,10.68125 15.16625,11.11 L15.1225,11.11 C14.97375,10.68125 14.8425,10.24375 14.69375,9.815 L13.5125,6.55125 L12.34875,6.55125 L12.34875,13 L13.25875,13 Z M19.795,13 L20.34625,11.1625 L22.58625,11.1625 L23.12875,13 L24.205,13 L22.07,6.55125 L20.8975,6.55125 L18.7625,13 L19.795,13 Z M22.34125,10.36625 L20.5825,10.36625 L20.845,9.5 C21.055,8.8 21.25625,8.09125 21.44,7.35625 L21.48375,7.35625 C21.67625,8.0825 21.86875,8.8 22.0875,9.5 L22.34125,10.36625 Z M26.06875,13 L26.06875,10.40125 L27.11,10.40125 L28.57125,13 L29.7175,13 L28.1425,10.27 C28.95625,10.01625 29.49,9.42125 29.49,8.42375 C29.49,7.0325 28.4925,6.55125 27.1625,6.55125 L25.05375,6.55125 L25.05375,13 L26.06875,13 Z M27.04,9.5875 L26.06875,9.5875 L26.06875,7.37375 L27.04,7.37375 C27.97625,7.37375 28.48375,7.645 28.48375,8.42375 C28.48375,9.2025 27.97625,9.5875 27.04,9.5875 Z M33.305,13.11375 C34.13625,13.11375 34.7925,12.78125 35.30875,12.18625 L34.76625,11.5475 C34.38125,11.9675 33.935,12.23 33.34,12.23 C32.2025,12.23 31.485,11.29375 31.485,9.7625 C31.485,8.24875 32.255,7.32125 33.36625,7.32125 C33.89125,7.32125 34.29375,7.5575 34.62625,7.89875 L35.1775,7.25125 C34.78375,6.8225 34.15375,6.4375 33.34875,6.4375 C31.72125,6.4375 30.44375,7.6975 30.44375,9.7975 C30.44375,11.90625 31.68625,13.11375 33.305,13.11375 Z M37.46125,13 L37.46125,10.06875 L40.2175,10.06875 L40.2175,13 L41.2325,13 L41.2325,6.55125 L40.2175,6.55125 L40.2175,9.185 L37.46125,9.185 L37.46125,6.55125 L36.44625,6.55125 L36.44625,13 L37.46125,13 Z"/>
+    <g fill-rule="nonzero">
+      <use fill="#000" filter="url(#dde-calendar64-c)" xlink:href="#dde-calendar64-d"/>
+      <use fill="#2D394F" xlink:href="#dde-calendar64-d"/>
+    </g>
+    <path fill="#2D394F" fill-rule="nonzero" d="M17.13,46.5 L17.13,44.68 C17.13,44.35 17.085,43.875 17.06,43.54 L17.08,43.54 L17.37,44.39 L18.015,46.145 L18.375,46.145 L19.015,44.39 L19.31,43.54 L19.33,43.54 C19.3,43.875 19.255,44.35 19.255,44.68 L19.255,46.5 L19.795,46.5 L19.795,42.815 L19.125,42.815 L18.46,44.68 L18.22,45.42 L18.22,45.42 L18.195,45.42 C18.11,45.175 18.035,44.925 17.95,44.68 L17.275,42.815 L16.61,42.815 L16.61,46.5 L17.13,46.5 Z M22.16,46.565 C23.105,46.565 23.765,45.83 23.765,44.645 C23.765,43.46 23.105,42.75 22.16,42.75 C21.215,42.75 20.56,43.46 20.56,44.645 C20.56,45.83 21.215,46.565 22.16,46.565 Z M22.16,46.06 C21.55,46.06 21.155,45.505 21.155,44.645 C21.155,43.78 21.55,43.255 22.16,43.255 C22.77,43.255 23.17,43.78 23.17,44.645 C23.17,45.505 22.77,46.06 22.16,46.06 Z M25.08,46.5 L25.08,44.765 C25.08,44.365 25.035,43.94 25.005,43.56 L25.03,43.56 L25.415,44.33 L26.635,46.5 L27.23,46.5 L27.23,42.815 L26.68,42.815 L26.68,44.535 C26.68,44.935 26.725,45.38 26.755,45.76 L26.73,45.76 L26.345,44.98 L25.125,42.815 L24.53,42.815 L24.53,46.5 L25.08,46.5 Z M29.185,46.5 C30.285,46.5 30.93,45.84 30.93,44.645 C30.93,43.445 30.285,42.815 29.155,42.815 L28.2,42.815 L28.2,46.5 L29.185,46.5 Z M29.115,46.025 L28.78,46.025 L28.78,43.29 L29.115,43.29 C29.905,43.29 30.33,43.725 30.33,44.645 C30.33,45.56 29.905,46.025 29.115,46.025 Z M31.8,46.5 L32.115,45.45 L33.395,45.45 L33.705,46.5 L34.32,46.5 L33.1,42.815 L32.43,42.815 L31.21,46.5 L31.8,46.5 Z M33.255,44.995 L32.25,44.995 L32.4,44.5 C32.52,44.1 32.635,43.695 32.74,43.275 L32.765,43.275 C32.875,43.69 32.985,44.1 33.11,44.5 L33.255,44.995 Z M35.99,46.5 L35.99,45.105 L37.1,42.815 L36.495,42.815 L36.065,43.795 C35.955,44.07 35.835,44.325 35.715,44.605 L35.695,44.605 C35.57,44.325 35.465,44.07 35.35,43.795 L34.925,42.815 L34.305,42.815 L35.41,45.105 L35.41,46.5 L35.99,46.5 Z"/>
+    <use fill="#000" filter="url(#dde-calendar64-e)" xlink:href="#dde-calendar64-f"/>
+    <use fill="url(#dde-calendar64-g)" xlink:href="#dde-calendar64-f"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/dde-introduction.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="dde-introduction-a" width="127.6%" height="127.6%" x="-13.8%" y="-13.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="dde-introduction-b" x1="42.153%" x2="42.153%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00D8A5"/>
+      <stop offset="100%" stop-color="#0058FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#dde-introduction-a)" transform="translate(3 3)">
+    <circle cx="29" cy="29" r="29" fill="url(#dde-introduction-b)"/>
+    <g transform="translate(3 8)">
+      <path fill="#404040" stroke="#373737" stroke-width="1.5" d="M19.3823243,38.9794317 L39.8222282,38.9794317 C40.7887265,38.9794317 41.5722282,38.19593 41.5722282,37.2294317 L41.5722282,15.0743836 C41.5722282,8.9468109 36.604849,3.97943173 30.4772762,3.97943173 C24.3497035,3.97943173 19.3823243,8.9468109 19.3823243,15.0743836 L19.3823243,38.9794317 Z" transform="rotate(45 30.477 21.48)"/>
+      <path fill="#FFF" d="M15.1639045,9.4846976 L37.2312122,9.4846976 C38.6119241,9.4846976 39.7312122,10.6039857 39.7312122,11.9846976 L39.7312122,30.8500822 C39.7312122,32.2307941 38.6119241,33.3500822 37.2312122,33.3500822 L15.1639045,33.3500822 C8.57366052,33.3500822 3.2312122,28.0076339 3.2312122,21.4173899 C3.2312122,14.8271459 8.57366052,9.4846976 15.1639045,9.4846976 Z" transform="rotate(45 21.481 21.417)"/>
+      <rect width="12.459" height="1" x="27.215" y="25.279" fill="#606060" stroke="#373737" stroke-width="1.75" transform="rotate(45 33.445 25.282)"/>
+      <rect width="12.459" height="1" x="23.493" y="29.002" fill="#606060" stroke="#373737" stroke-width="1.75" transform="rotate(45 29.722 29.004)"/>
+      <path fill="#404040" stroke="#373737" stroke-width="1.75" d="M12.5308085,29.351265 L18.1510008,29.351265 L18.1510008,24.6108804 C18.1510008,23.0589071 16.8928779,21.8007842 15.3409046,21.8007842 C13.7889314,21.8007842 12.5308085,23.0589071 12.5308085,24.6108804 L12.5308085,29.351265 Z" transform="rotate(45 15.34 25.576)"/>
+      <path fill="#404040" stroke="#373737" stroke-width="1.75" d="M16.5528822,33.1978579 L21.8221129,33.1978579 L21.8221129,28.2819925 C21.8221129,26.8269346 20.6425554,25.6473771 19.1874975,25.6473771 C17.7324396,25.6473771 16.5528822,26.8269346 16.5528822,28.2819925 L16.5528822,33.1978579 Z" transform="rotate(45 19.187 29.423)"/>
+      <path fill="#404040" stroke="#373737" stroke-width="1.75" d="M20.2753914,36.9203672 L25.5446222,36.9203672 L25.5446222,32.0045018 C25.5446222,30.5494439 24.3650647,29.3698864 22.9100068,29.3698864 C21.4549489,29.3698864 20.2753914,30.5494439 20.2753914,32.0045018 L20.2753914,36.9203672 Z" transform="rotate(45 22.91 33.145)"/>
+      <path fill="#404040" stroke="#373737" stroke-width="1.75" d="M23.9465035,40.7669601 L27.9416958,40.7669601 C28.8391586,40.7669601 29.5666958,40.0394228 29.5666958,39.1419601 L29.5666958,36.0265754 C29.5666958,34.4746022 28.3085729,33.2164793 26.7565997,33.2164793 C25.2046264,33.2164793 23.9465035,34.4746022 23.9465035,36.0265754 L23.9465035,40.7669601 Z" transform="rotate(45 26.757 36.992)"/>
+      <path fill="#404040" stroke="#373737" stroke-width="1.75" d="M27.1749155,8.83972418 L27.1749155,15.5373646 C27.1749155,19.1336191 24.4251259,22.0489594 21.0330885,22.0489594 L21.0330885,8.83972418 L21.0330885,8.83972418" transform="rotate(45 24.104 15.444)"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-album.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-album-a" width="131.7%" height="134.5%" x="-15.9%" y="-17.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <path id="deepin-album-c" d="M2.83312617,9.82192651 C2.83536468,6.50555966 5.51760761,3.8153153 8.84194795,3.81308556 L53.192074,3.78333859 C56.5084161,3.78111422 59.1950254,6.47140662 59.1927894,9.78412438 L59.1668738,48.1780735 C59.1646353,51.4944403 56.4823924,54.1846847 53.158052,54.1869144 L8.80792604,54.2166614 C5.49158392,54.2188858 2.80497458,51.5285934 2.80721063,48.2158756 L2.83312617,9.82192651 Z"/>
+    <filter id="deepin-album-b" width="110.6%" height="111.9%" x="-5.3%" y="-5.9%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"/>
+    </filter>
+    <rect id="deepin-album-e" width="56" height="50" x="3" y="4" rx="6"/>
+    <filter id="deepin-album-d" width="110.7%" height="112%" x="-5.4%" y="-6%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"/>
+    </filter>
+    <linearGradient id="deepin-album-h" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#FFF3E7"/>
+    </linearGradient>
+    <rect id="deepin-album-g" width="56.364" height="50.4" x="0" y="0" rx="6"/>
+    <filter id="deepin-album-f" width="110.6%" height="111.9%" x="-5.3%" y="-6%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"/>
+    </filter>
+    <linearGradient id="deepin-album-j" x1="50%" x2="50%" y1="100%" y2="0%">
+      <stop offset="0%" stop-color="#D14848"/>
+      <stop offset="100%" stop-color="#FF9E00"/>
+    </linearGradient>
+    <rect id="deepin-album-i" width="50.727" height="36.4" x="0" y="0" rx="4"/>
+    <linearGradient id="deepin-album-l" x1="50%" x2="41.314%" y1="34.201%" y2="69.988%">
+      <stop offset="0%" stop-color="#FF3C14" stop-opacity=".8"/>
+      <stop offset="100%" stop-color="#4A00C1" stop-opacity=".899"/>
+    </linearGradient>
+    <linearGradient id="deepin-album-m" x1="50%" x2="50%" y1="11.914%" y2="89.546%">
+      <stop offset="0%" stop-color="#FFD332" stop-opacity=".3"/>
+      <stop offset="100%" stop-color="#002DFF" stop-opacity=".5"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-album-a)" transform="translate(1 3)">
+    <g opacity=".5" transform="rotate(6 31 29)">
+      <use fill="#000" filter="url(#deepin-album-b)" xlink:href="#deepin-album-c"/>
+      <use fill="#FFF" fill-opacity=".8" xlink:href="#deepin-album-c"/>
+    </g>
+    <g opacity=".5">
+      <use fill="#000" filter="url(#deepin-album-d)" xlink:href="#deepin-album-e"/>
+      <use fill="#FFF" fill-opacity=".8" xlink:href="#deepin-album-e"/>
+    </g>
+    <g transform="rotate(-6 65.845 .213)">
+      <use fill="#000" filter="url(#deepin-album-f)" xlink:href="#deepin-album-g"/>
+      <use fill="url(#deepin-album-h)" xlink:href="#deepin-album-g"/>
+      <g transform="translate(2.818 2.8)">
+        <mask id="deepin-album-k" fill="#fff">
+          <use xlink:href="#deepin-album-i"/>
+        </mask>
+        <use fill="url(#deepin-album-j)" xlink:href="#deepin-album-i"/>
+        <ellipse cx="42.273" cy="7" fill="#FFF7A1" mask="url(#deepin-album-k)" rx="2.818" ry="2.8"/>
+        <path fill="url(#deepin-album-l)" d="M-1.40909091,36.4 L18.7414711,10.9192893 C20.4532434,8.75472559 23.225675,8.75105877 24.9403471,10.9192893 L45.0909091,36.4 L-1.40909091,36.4 Z" mask="url(#deepin-album-k)"/>
+        <path fill="url(#deepin-album-m)" d="M14.0909091,39.2 L31.4749163,16.5679177 C33.1581758,14.3764973 35.8870809,14.3762396 37.5705383,16.5679177 L54.9545455,39.2 L14.0909091,39.2 Z" mask="url(#deepin-album-k)"/>
+      </g>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-calculator.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-calculator-a" width="129.6%" height="129.6%" x="-14.8%" y="-14.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <radialGradient id="deepin-calculator-b" cx="50%" cy="9.268%" r="92.618%" fx="50%" fy="9.268%">
+      <stop offset="0%" stop-color="#35DCFF"/>
+      <stop offset="100%" stop-color="#0068FF"/>
+    </radialGradient>
+    <linearGradient id="deepin-calculator-c" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#FFF" stop-opacity=".8"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-calculator-a)" transform="translate(5 5)">
+    <path fill="url(#deepin-calculator-b)" d="M7.85454545,0 L46.1454545,0 C50.4834002,9.13107275e-17 54,3.51659978 54,7.85454545 L54,46.1454545 C54,50.4834002 50.4834002,54 46.1454545,54 L7.85454545,54 C3.51659978,54 7.04865012e-15,50.4834002 0,46.1454545 L0,7.85454545 C3.56933292e-16,3.51659978 3.51659978,3.46140295e-15 7.85454545,0 Z"/>
+    <polygon fill="#FFF" points="14.311 40.378 17.757 36.932 17.068 36.243 13.622 39.689 10.176 36.243 9.486 36.932 12.932 40.378 9.486 43.824 10.176 44.514 13.622 41.068 17.068 44.514 17.757 43.824 14.311 40.378"/>
+    <path fill="url(#deepin-calculator-c)" d="M54,27 L54,46.1454545 C54,50.4834002 50.4834002,54 46.1454545,54 L27,54 L27,27 L54,27 Z M45,42 L36,42 L36,43 L45,43 L45,42 Z M45,38 L36,38 L36,39 L45,39 L45,38 Z M27,0 L27,27 L0,27 L0,7.85454545 C0,3.51659978 3.51659978,0 7.85454545,0 L27,0 Z M14,8 L13,8 L13,13 L8,13 L8,14 L13,14 L13,19 L14,19 L14,14 L19,14 L19,13 L14,13 L14,8 Z"/>
+    <rect width="11" height="1" x="35" y="13" fill="#FFF"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-camera.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>deepin-camera/64</title>
+    <defs>
+        <filter x="-14.0%" y="-14.8%" width="128.1%" height="135.2%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <linearGradient x1="47.8497614%" y1="3.02297477%" x2="47.8497614%" y2="71.398678%" id="linearGradient-2">
+            <stop stop-color="#E6E6E6" offset="0%"></stop>
+            <stop stop-color="#BDBDB6" offset="100%"></stop>
+        </linearGradient>
+        <path d="M9.69177613,1.53701383 L9.91421569,1 C10.164949,0.394679273 10.7556295,-1.0168725e-16 11.4108244,0 L16.881966,0 C17.5671711,-1.25870133e-16 18.193567,0.387133935 18.5,1 L18.7992215,1.59844298 C18.9228456,1.84569113 19.1724532,2.00489229 19.4487738,2.01273117 L20.5,2.04255319 L20.5,2.04255319 L20.5,6 L8,6 L8,2 L8.998867,2 C9.30221319,2 9.57569007,1.81726895 9.69177613,1.53701383 Z" id="path-3"></path>
+        <filter x="-4.0%" y="-8.3%" width="108.0%" height="116.7%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.129698822   0 0 0 0 0.129698822   0 0 0 0 0.129698822  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="47.8497614%" y1="9.49429968%" x2="49.9642249%" y2="89.2013518%" id="linearGradient-5">
+            <stop stop-color="#F3F3F3" offset="0%"></stop>
+            <stop stop-color="#BDBDB6" offset="100%"></stop>
+        </linearGradient>
+        <path d="M56.5,9 L56.5,47 C56.5,50.8659932 53.3659932,54 49.5,54 L7.5,54 C3.63400675,54 0.5,50.8659932 0.5,47 L0.5,9 C0.5,5.13400675 3.63400675,2 7.5,2 L49.5,2 C53.3659932,2 56.5,5.13400675 56.5,9 Z" id="path-6"></path>
+        <filter x="-0.9%" y="-1.0%" width="101.8%" height="101.9%" filterUnits="objectBoundingBox" id="filter-7">
+            <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.129698822   0 0 0 0 0.129698822   0 0 0 0 0.129698822  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50%" y1="1.9723437%" x2="50%" y2="95.7530632%" id="linearGradient-8">
+            <stop stop-color="#B8B8B8" stop-opacity="0.706710282" offset="0%"></stop>
+            <stop stop-color="#A3A3A3" stop-opacity="0.755707427" offset="52.3746517%"></stop>
+            <stop stop-color="#707070" stop-opacity="0.349653764" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-9" x="5.5" y="7" width="6" height="4" rx="0.75"></rect>
+        <filter x="-33.3%" y="-25.0%" width="166.7%" height="200.0%" filterUnits="objectBoundingBox" id="filter-10">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0778313483 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50%" y1="0.854492188%" x2="50%" y2="100%" id="linearGradient-11">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.676950735" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient cx="50.2767254%" cy="17.5532874%" fx="50.2767254%" fy="17.5532874%" r="93.1172462%" id="radialGradient-12">
+            <stop stop-color="#FE8C6C" offset="0%"></stop>
+            <stop stop-color="#EC3E3E" offset="100%"></stop>
+        </radialGradient>
+        <circle id="path-13" cx="49.5" cy="9" r="2"></circle>
+        <filter x="-50.0%" y="-25.0%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-14">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.26133632 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <filter x="-25.0%" y="-25.0%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-15">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="106.422466%" id="linearGradient-16">
+            <stop stop-color="#0F0E12" offset="0%"></stop>
+            <stop stop-color="#2A272D" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="3.4695271%" x2="50%" y2="99.5812336%" id="linearGradient-17">
+            <stop stop-color="#777777" offset="0%"></stop>
+            <stop stop-color="#3D3D3D" offset="40.4098831%"></stop>
+            <stop stop-color="#383838" offset="74.0343641%"></stop>
+            <stop stop-color="#343434" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="1.70676491%" x2="50%" y2="99.8682662%" id="linearGradient-18">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#D7D7D7" offset="32.7551355%"></stop>
+            <stop stop-color="#D6D6D6" offset="75.9314904%"></stop>
+            <stop stop-color="#CCCCCC" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient cx="50%" cy="91.444257%" fx="50%" fy="91.444257%" r="23.2623198%" gradientTransform="translate(0.500000,0.914443),rotate(90.000000),scale(1.000000,1.927773),translate(-0.500000,-0.914443)" id="radialGradient-19">
+            <stop stop-color="#7066AE" offset="0%"></stop>
+            <stop stop-color="#232327" offset="100%"></stop>
+        </radialGradient>
+        <linearGradient x1="50%" y1="2.70518056%" x2="50%" y2="96.190119%" id="linearGradient-20">
+            <stop stop-color="#9CEAB0" stop-opacity="0.020301232" offset="0%"></stop>
+            <stop stop-color="#736FD8" stop-opacity="0.0890362079" offset="100%"></stop>
+        </linearGradient>
+        <path d="M20,5.125 C28.2152357,5.125 34.875,11.7847643 34.875,20 C34.875,28.2152357 28.2152357,34.875 20,34.875 C11.7847643,34.875 5.125,28.2152357 5.125,20 C5.125,11.7847643 11.7847643,5.125 20,5.125 Z M20,8.75 C13.7867966,8.75 8.75,13.7867966 8.75,20 C8.75,26.2132034 13.7867966,31.25 20,31.25 C26.2132034,31.25 31.25,26.2132034 31.25,20 C31.25,13.7867966 26.2132034,8.75 20,8.75 Z" id="path-21"></path>
+        <linearGradient x1="50%" y1="-27.0066935%" x2="60.5062747%" y2="100%" id="linearGradient-22">
+            <stop stop-color="#5B0386" offset="0%"></stop>
+            <stop stop-color="#9F28A1" offset="17.0101139%"></stop>
+            <stop stop-color="#622C81" offset="39.318933%"></stop>
+            <stop stop-color="#71BDD2" offset="74.0890347%"></stop>
+            <stop stop-color="#5A38AA" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50.2631322%" y1="3.69813292%" x2="57.1152703%" y2="100%" id="linearGradient-23">
+            <stop stop-color="#CD66E0" offset="0%"></stop>
+            <stop stop-color="#1F296C" offset="43.5095872%"></stop>
+            <stop stop-color="#6BD9F6" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="1.45956503%" x2="50%" y2="85.7580236%" id="linearGradient-24">
+            <stop stop-color="#FFFFFF" stop-opacity="0.900376967" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-62.1%" y="-47.2%" width="224.3%" height="194.4%" filterUnits="objectBoundingBox" id="filter-25">
+            <feGaussianBlur stdDeviation="1.75" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+    </defs>
+    <g id="deepin-camera/64" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" filter="url(#filter-1)" transform="translate(3.500000, 4.000000)">
+            <g id="路径">
+                <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
+                <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+            </g>
+            <g id="路径">
+                <use fill="url(#linearGradient-5)" fill-rule="evenodd" xlink:href="#path-6"></use>
+                <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+            </g>
+            <rect id="矩形" fill="#FFFFFF" x="4.5" y="6" width="8" height="6" rx="2"></rect>
+            <g id="矩形" opacity="0.58041908">
+                <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
+                <use fill="url(#linearGradient-8)" fill-rule="evenodd" xlink:href="#path-9"></use>
+            </g>
+            <rect id="矩形" fill="url(#linearGradient-11)" opacity="0.683134934" x="6.5" y="8" width="4" height="1" rx="0.375"></rect>
+            <circle id="椭圆形" fill-opacity="0.08" fill="#000000" cx="49.5" cy="9" r="3"></circle>
+            <g id="椭圆形">
+                <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
+                <use fill="url(#radialGradient-12)" fill-rule="evenodd" xlink:href="#path-13"></use>
+            </g>
+            <g id="编组-6" filter="url(#filter-15)" transform="translate(8.500000, 9.000000)">
+                <g id="Group-6">
+                    <ellipse id="Oval备份-8" fill="url(#linearGradient-16)" cx="20.0954023" cy="20.137931" rx="11.5436782" ry="11.4482759"></ellipse>
+                    <path d="M20,-1 C25.7989899,-1 31.0489899,1.35050506 34.8492424,5.1507576 C38.6494949,8.95101013 41,14.2010101 41,20 C41,25.7989899 38.6494949,31.0489899 34.8492424,34.8492424 C31.0489899,38.6494949 25.7989899,41 20,41 C14.2010101,41 8.95101013,38.6494949 5.1507576,34.8492424 C1.35050506,31.0489899 -1,25.7989899 -1,20 C-1,14.2010101 1.35050506,8.95101013 5.1507576,5.1507576 C8.95101013,1.35050506 14.2010101,-1 20,-1 Z M19.75,6.75 C16.1601491,6.75 12.9101491,8.20507456 10.5576118,10.5576118 C8.20507456,12.9101491 6.75,16.1601491 6.75,19.75 C6.75,23.3398509 8.20507456,26.5898509 10.5576118,28.9423882 C12.9101491,31.2949254 16.1601491,32.75 19.75,32.75 C23.3398509,32.75 26.5898509,31.2949254 28.9423882,28.9423882 C31.2949254,26.5898509 32.75,23.3398509 32.75,19.75 C32.75,16.1601491 31.2949254,12.9101491 28.9423882,10.5576118 C26.5898509,8.20507456 23.3398509,6.75 19.75,6.75 Z" id="形状结合" stroke="url(#linearGradient-18)" stroke-width="2" fill="url(#linearGradient-17)"></path>
+                    <g id="形状结合备份">
+                        <use fill="url(#radialGradient-19)" fill-rule="evenodd" xlink:href="#path-21"></use>
+                        <path stroke-opacity="0.166060014" stroke="#000000" stroke-width="1" d="M20,4.625 C24.245689,4.625 28.089439,6.34590549 30.8717668,9.12823324 C33.6540945,11.910561 35.375,15.754311 35.375,20 C35.375,24.245689 33.6540945,28.089439 30.8717668,30.8717668 C28.089439,33.6540945 24.245689,35.375 20,35.375 C15.754311,35.375 11.910561,33.6540945 9.12823324,30.8717668 C6.34590549,28.089439 4.625,24.245689 4.625,20 C4.625,15.754311 6.34590549,11.910561 9.12823324,9.12823324 C11.910561,6.34590549 15.754311,4.625 20,4.625 Z M20,9.25 C17.0314695,9.25 14.3439695,10.4532347 12.3986021,12.3986021 C10.4532347,14.3439695 9.25,17.0314695 9.25,20 C9.25,22.9685305 10.4532347,25.6560305 12.3986021,27.6013979 C14.3439695,29.5467653 17.0314695,30.75 20,30.75 C22.9685305,30.75 25.6560305,29.5467653 27.6013979,27.6013979 C29.5467653,25.6560305 30.75,22.9685305 30.75,20 C30.75,17.0314695 29.5467653,14.3439695 27.6013979,12.3986021 C25.6560305,10.4532347 22.9685305,9.25 20,9.25 Z"></path>
+                        <path stroke="url(#linearGradient-20)" stroke-width="1" d="M20,5.625 C23.9695466,5.625 27.5632966,7.23397668 30.16466,9.83534002 C32.7660233,12.4367034 34.375,16.0304534 34.375,20 C34.375,23.9695466 32.7660233,27.5632966 30.16466,30.16466 C27.5632966,32.7660233 23.9695466,34.375 20,34.375 C16.0304534,34.375 12.4367034,32.7660233 9.83534002,30.16466 C7.23397668,27.5632966 5.625,23.9695466 5.625,20 C5.625,16.0304534 7.23397668,12.4367034 9.83534002,9.83534002 C12.4367034,7.23397668 16.0304534,5.625 20,5.625 Z M20,8.25 C16.7553271,8.25 13.8178271,9.56516355 11.6914953,11.6914953 C9.56516355,13.8178271 8.25,16.7553271 8.25,20 C8.25,23.2446729 9.56516355,26.1821729 11.6914953,28.3085047 C13.8178271,30.4348365 16.7553271,31.75 20,31.75 C23.2446729,31.75 26.1821729,30.4348365 28.3085047,28.3085047 C30.4348365,26.1821729 31.75,23.2446729 31.75,20 C31.75,16.7553271 30.4348365,13.8178271 28.3085047,11.6914953 C26.1821729,9.56516355 23.2446729,8.25 20,8.25 Z" stroke-linejoin="square"></path>
+                    </g>
+                    <circle id="Oval" stroke-opacity="0.602936858" stroke="#080808" fill="url(#linearGradient-22)" cx="20" cy="20" r="8.5"></circle>
+                    <circle id="Oval" stroke="url(#linearGradient-23)" stroke-width="1.37931034" fill-opacity="0.779921738" fill="#0A0611" cx="20" cy="20" r="4.31034483"></circle>
+                </g>
+            </g>
+            <g id="编组-12" transform="translate(19.375000, 19.625000)">
+                <path d="M8.625,8.25 C11.8696729,8.25 14.5,6.40317459 14.5,4.125 C14.5,1.84682541 11.8696729,0 8.625,0 C5.38032709,0 2.75,1.84682541 2.75,4.125 C2.75,6.40317459 5.38032709,8.25 8.625,8.25 Z" id="椭圆形" fill="url(#linearGradient-24)" opacity="0.457738416"></path>
+                <path d="M7.27143852,6.74085361 C6.25720498,2.4969512 6.67387165,0.25 8.52143852,0 C4.75365208,0.593170864 0.646438524,1.36674319 0.146438524,6.03472294 C-0.186894809,9.14670945 0.617905882,10.8434685 2.5608406,11.125 C5.36790588,8.4847012 6.85477186,7.09393543 7.02143852,6.9527027 C7.18810519,6.81146997 7.27143852,6.74085361 7.27143852,6.74085361 Z" id="路径-3" fill="#59AAFF" opacity="0.521017942" filter="url(#filter-25)"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

evm_monitor/src/assets/images/deepin-contacts.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-contacts-a" width="134.7%" height="129.6%" x="-16.3%" y="-14.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-contacts-b" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#F66D6D"/>
+      <stop offset="100%" stop-color="#F44343"/>
+    </linearGradient>
+    <rect id="deepin-contacts-c" width="7.5" height="15" x="41.5" y="33.625" rx="1.25"/>
+    <filter id="deepin-contacts-d" width="166.7%" height="133.3%" x="-33.3%" y="-16.7%" filterUnits="objectBoundingBox">
+      <feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation=".5"/>
+      <feOffset dx="4" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" result="shadowMatrixInner1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.130272072 0"/>
+      <feOffset dy="-1" in="SourceAlpha" result="shadowOffsetInner2"/>
+      <feComposite in="shadowOffsetInner2" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner2"/>
+      <feColorMatrix in="shadowInnerInner2" result="shadowMatrixInner2" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixInner1"/>
+        <feMergeNode in="shadowMatrixInner2"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-contacts-g" x1="50%" x2="50%" y1="7.679%" y2="99.016%">
+      <stop offset="0%" stop-color="#C896E5"/>
+      <stop offset="100%" stop-color="#BD80DF"/>
+    </linearGradient>
+    <rect id="deepin-contacts-f" width="7.5" height="15" x="41.5" y="19.375" rx="1.25"/>
+    <filter id="deepin-contacts-e" width="153.3%" height="126.7%" x="-26.7%" y="-6.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
+    </filter>
+    <filter id="deepin-contacts-h" width="193.3%" height="146.7%" x="-46.7%" y="-16.7%" filterUnits="objectBoundingBox">
+      <feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation=".5"/>
+      <feOffset dx="4" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" result="shadowMatrixInner1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.130272072 0"/>
+      <feOffset dy="-1" in="SourceAlpha" result="shadowOffsetInner2"/>
+      <feComposite in="shadowOffsetInner2" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner2"/>
+      <feColorMatrix in="shadowInnerInner2" result="shadowMatrixInner2" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixInner1"/>
+        <feMergeNode in="shadowMatrixInner2"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-contacts-k" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#7CBDF8"/>
+      <stop offset="100%" stop-color="#469DF0"/>
+    </linearGradient>
+    <rect id="deepin-contacts-j" width="7.5" height="15" x="41.5" y="5" rx="1.25"/>
+    <filter id="deepin-contacts-i" width="153.3%" height="126.7%" x="-26.7%" y="-6.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
+    </filter>
+    <filter id="deepin-contacts-l" width="193.3%" height="146.7%" x="-46.7%" y="-16.7%" filterUnits="objectBoundingBox">
+      <feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation=".5"/>
+      <feOffset dx="4" in="shadowBlurInner1" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" result="shadowMatrixInner1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.130272072 0"/>
+      <feOffset dy="-1" in="SourceAlpha" result="shadowOffsetInner2"/>
+      <feComposite in="shadowOffsetInner2" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner2"/>
+      <feColorMatrix in="shadowInnerInner2" result="shadowMatrixInner2" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixInner1"/>
+        <feMergeNode in="shadowMatrixInner2"/>
+      </feMerge>
+    </filter>
+    <radialGradient id="deepin-contacts-m" cx="55.444%" cy="0%" r="102.185%" fx="55.444%" fy="0%" gradientTransform="scale(1 .83333) rotate(79.017 .554 0)">
+      <stop offset="0%" stop-color="#FAFAFA"/>
+      <stop offset="100%" stop-color="#DAE2FB"/>
+    </radialGradient>
+    <path id="deepin-contacts-n" d="M5,0 L37.5,0 C41.6421356,-7.6089797e-16 45,3.35786438 45,7.5 L45,46.5 C45,50.6421356 41.6421356,54 37.5,54 L5,54 C2.23857625,54 3.38176876e-16,51.7614237 0,49 L0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z"/>
+    <filter id="deepin-contacts-o" width="102.2%" height="101.9%" x="-1.1%" y="-.9%" filterUnits="objectBoundingBox">
+      <feOffset dy="-1" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" result="shadowMatrixInner1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0"/>
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetInner2"/>
+      <feComposite in="shadowOffsetInner2" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner2"/>
+      <feColorMatrix in="shadowInnerInner2" result="shadowMatrixInner2" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.246640079 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixInner1"/>
+        <feMergeNode in="shadowMatrixInner2"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-contacts-r" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#3C88FB"/>
+      <stop offset="100%" stop-color="#587ECE"/>
+    </linearGradient>
+    <path id="deepin-contacts-q" d="M18.4858286,8.75 C23.7297606,8.75 22.5996029,13.1386311 22.5996029,14.1339907 C23.2324912,14.6769142 22.916047,15.9437355 22.2831587,16.3056845 C22.1475398,18.3416473 20.2036684,19.6989559 20.2036684,20.0156613 C20.2036684,20.3323666 20.1584621,20.6943155 20.4749063,21.1467517 C20.7913504,21.5991879 24.5434742,21.7801624 25.7188383,22.6397912 C26.3683199,23.114804 26.9349807,24.4808748 27.4188208,26.7380034 C27.4372795,26.8241137 27.4465863,26.9119335 27.4465863,27 C27.4465863,27.6903491 26.8869478,28.2499876 26.1965988,28.25 L26.1965988,28.25 L10.6252805,28.25 C10.5300132,28.25 10.4350582,28.2391092 10.3422648,28.2175396 C9.6698321,28.0612343 9.25142812,27.3894094 9.40774076,26.7169784 C9.94634575,24.3998739 10.5161655,23.0408115 11.1172,22.6397912 C12.2021514,21.9158933 15.9090689,21.3729698 16.4063383,21.1467517 C16.9036077,20.9205336 16.6775762,20.4228538 16.6775762,19.925174 C16.6775762,19.4274942 14.9145301,18.7035963 14.5980859,16.3056845 C13.8747849,15.762761 13.8747849,14.7221578 14.326848,14.1339907 C14.326848,13.4100928 13.2418966,8.75 18.4858286,8.75 Z M27.420087,9 C31.6717318,9 31.0837383,12.9039474 31.0837383,14.3565789 C31.0837383,15.8092105 32.4406462,16.5809211 32.4406462,17.3526316 C32.4406462,18.1243421 29.3649883,18.8506579 29.138837,18.8506579 C28.9126857,18.8506579 29.0031462,19.35 29.138837,19.8493421 C29.2745278,20.3486842 32.1692647,20.2125 33.5261726,20.9388158 C34.2627272,21.3330734 34.9093234,22.5800284 35.4659611,24.6796806 C35.4936699,24.784199 35.5077,24.891871 35.5077,25 C35.5077,25.6903516 34.9480594,26.2499921 34.2577078,26.25 L34.2577078,26.25 L28.279462,26.25 C27.7819291,25.0243421 27.5105476,23.2539474 26.4250212,22.2098684 C25.3394949,21.1657895 22.3995278,21.0296053 22.082916,20.8480263 C22.263837,20.7118421 25.3847252,20.1671053 25.6561068,19.9855263 C25.9274883,19.8039474 26.0179489,19.2138158 25.8370278,18.9868421 C25.6561068,18.7598684 23.0779818,18.3059211 22.8518304,17.8065789 C22.6256791,17.3072368 23.8468962,16.1723684 23.8468962,14.3565789 C23.8468962,12.5407895 23.1684423,9 27.420087,9 Z"/>
+    <filter id="deepin-contacts-p" width="126.8%" height="135.9%" x="-13.4%" y="-12.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0.257619154   0 0 0 0 0.737828351  0 0 0 0.35 0"/>
+    </filter>
+    <linearGradient id="deepin-contacts-s" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#3C88FB"/>
+      <stop offset="100%" stop-color="#587ECE"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-contacts-a)" transform="rotate(-8 64.252 -27.703)">
+    <use fill="url(#deepin-contacts-b)" xlink:href="#deepin-contacts-c"/>
+    <use fill="#000" filter="url(#deepin-contacts-d)" xlink:href="#deepin-contacts-c"/>
+    <use fill="#000" filter="url(#deepin-contacts-e)" xlink:href="#deepin-contacts-f"/>
+    <use fill="url(#deepin-contacts-g)" xlink:href="#deepin-contacts-f"/>
+    <use fill="#000" filter="url(#deepin-contacts-h)" xlink:href="#deepin-contacts-f"/>
+    <use fill="#000" filter="url(#deepin-contacts-i)" xlink:href="#deepin-contacts-j"/>
+    <use fill="url(#deepin-contacts-k)" xlink:href="#deepin-contacts-j"/>
+    <use fill="#000" filter="url(#deepin-contacts-l)" xlink:href="#deepin-contacts-j"/>
+    <use fill="url(#deepin-contacts-m)" xlink:href="#deepin-contacts-n"/>
+    <use fill="#000" filter="url(#deepin-contacts-o)" xlink:href="#deepin-contacts-n"/>
+    <use fill="#000" filter="url(#deepin-contacts-p)" xlink:href="#deepin-contacts-q"/>
+    <use fill="url(#deepin-contacts-r)" fill-opacity=".85" xlink:href="#deepin-contacts-q"/>
+    <path fill="url(#deepin-contacts-s)" fill-opacity=".85" d="M34.0625,43 C34.580267,43 35,43.419733 35,43.9375 L35,44.0625 C35,44.580267 34.580267,45 34.0625,45 L10.9375,45 C10.419733,45 10,44.580267 10,44.0625 L10,43.9375 C10,43.419733 10.419733,43 10.9375,43 L34.0625,43 Z M34.0625,38.5 C34.580267,38.5 35,38.919733 35,39.4375 L35,39.5625 C35,40.080267 34.580267,40.5 34.0625,40.5 L10.9375,40.5 C10.419733,40.5 10,40.080267 10,39.5625 L10,39.4375 C10,38.919733 10.419733,38.5 10.9375,38.5 L34.0625,38.5 Z M34.0625,34 C34.580267,34 35,34.419733 35,34.9375 L35,35.0625 C35,35.580267 34.580267,36 34.0625,36 L10.9375,36 C10.419733,36 10,35.580267 10,35.0625 L10,34.9375 C10,34.419733 10.419733,34 10.9375,34 L34.0625,34 Z"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-draw.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-draw-a" width="127.6%" height="126.7%" x="-13.8%" y="-13.3%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-draw-b" x1="50%" x2="50%" y1="0%" y2="98.139%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#EDEDED"/>
+    </linearGradient>
+    <linearGradient id="deepin-draw-c" x1="52.545%" x2="34.124%" y1="0%" y2="86.29%">
+      <stop offset="0%" stop-color="#1B90FF"/>
+      <stop offset="47.525%" stop-color="#53A0FD"/>
+      <stop offset="100%" stop-color="#68FFAD"/>
+    </linearGradient>
+    <linearGradient id="deepin-draw-d" x1="51.99%" x2="63.266%" y1="0%" y2="71.03%">
+      <stop offset="0%" stop-color="#BC6FFF"/>
+      <stop offset="100%" stop-color="#3EFF90"/>
+    </linearGradient>
+    <linearGradient id="deepin-draw-e" x1="62.982%" x2="32.877%" y1="18.3%" y2="92.174%">
+      <stop offset="0%" stop-color="#D10BFF"/>
+      <stop offset="100%" stop-color="#FFEE28"/>
+    </linearGradient>
+    <linearGradient id="deepin-draw-f" x1="96.359%" x2="0%" y1="21.872%" y2="83.343%">
+      <stop offset="0%" stop-color="#FF035B"/>
+      <stop offset="100%" stop-color="#FFC800"/>
+    </linearGradient>
+    <linearGradient id="deepin-draw-g" x1="95.792%" x2="0%" y1="45.365%" y2="52.448%">
+      <stop offset="0%" stop-color="#E06C00"/>
+      <stop offset="100%" stop-color="#FFFF46"/>
+    </linearGradient>
+    <linearGradient id="deepin-draw-h" x1="0%" x2="98.687%" y1="100%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#EDEDED"/>
+    </linearGradient>
+    <linearGradient id="deepin-draw-j" x1="-77.238%" x2="100%" y1="100%" y2="100%">
+      <stop offset="0%" stop-color="#828282"/>
+      <stop offset="100%" stop-color="#353535"/>
+    </linearGradient>
+    <path id="deepin-draw-i" d="M39.9030438,23.4407836 C40.5004648,23.4389978 41.0261502,23.8348234 41.1895331,24.409472 L42.1250788,27.6999626 C42.3264633,28.4082699 41.9155212,29.1457209 41.2072139,29.3471054 C41.0886028,29.3808287 40.9658869,29.3979349 40.8425749,29.3979349 L33.8900775,29.3979349 C33.1536979,29.3979349 32.5567442,28.8009812 32.5567442,28.0646015 C32.5567442,27.9509109 32.5712852,27.837687 32.6000133,27.7276858 L33.455335,24.4526238 C33.6082452,23.8671244 34.1362792,23.4580209 34.7414138,23.4562121 L39.9030438,23.4407836 Z M39.6438139,7.48191349 L39.6438139,22.1485802 L35.5507907,22.1485802 L35.5507907,7.48191349 L39.6438139,7.48191349 Z M38.3104806,0.815246825 C39.0468602,0.815246825 39.6438139,1.41220049 39.6438139,2.14858016 L39.6438139,2.14858016 L39.6438139,6.14858016 L35.5507907,6.14858016 L35.5507907,2.14858016 C35.5507907,1.41220049 36.1477443,0.815246825 36.884124,0.815246825 L36.884124,0.815246825 Z"/>
+    <linearGradient id="deepin-draw-k" x1="30.285%" x2="48.436%" y1="78.679%" y2="94.003%">
+      <stop offset="0%" stop-color="#686868"/>
+      <stop offset="100%"/>
+    </linearGradient>
+    <linearGradient id="deepin-draw-l" x1="106.964%" x2="-2.977%" y1="27.653%" y2="35.741%">
+      <stop offset="0%" stop-color="#FFD900"/>
+      <stop offset="14.463%" stop-color="#FFD800"/>
+      <stop offset="25.088%" stop-color="#CE4F02"/>
+      <stop offset="33.457%" stop-color="#D30079"/>
+      <stop offset="53.45%" stop-color="#53A0FD"/>
+      <stop offset="100%" stop-color="#0064A2"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-draw-a)" transform="translate(3 1)">
+    <path fill="url(#deepin-draw-b)" d="M29,2 C32.8036657,2 31.2418551,9.7278464 35.8580518,9.67294675 C40.9304586,9.61262147 45.8274459,10.2502577 51.5338105,15.0638863 C55.8617726,18.7147575 58,25.7325181 58,31 C58,47.0162577 45.0162577,60 29,60 C12.9837423,60 0,47.0162577 0,31 C0,14.9837423 12.9837423,2 29,2 Z M20.3908373,11.5568182 C18.9348139,14.0787247 19.5433318,17.1559316 21.75,18.4299521 C23.9566682,19.7039726 26.9258665,18.6923611 28.3818899,16.1704545 C29.8379134,13.648548 29.2293955,10.5713411 27.0227273,9.2973206 C24.816059,8.0233001 21.8468608,9.03491162 20.3908373,11.5568182 Z"/>
+    <image width="35" height="51" x="12.745" y="2.008" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAzCAYAAAAdD7HCAAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAI6ADAAQAAAABAAAAMwAAAADYXNQlAAADs0lEQVRYCb3Y63LURhAFYBMnAUIICZcK5g+popz3fzUghDukv/UeR9aOrrtyVx2PNCN1nzndM6P1+dnt2p0Kd164LFwU3P9b2JmB2zKB4UXhceHHwm+F74V3hbMf/LlF+6liPevF+7nuiXLntshElecVtBuTKh/2ZG4MVN+mtpt9RUAg9qkuru+7LPPAFi1l1Idi/afwuRBVXH8r7IpIu6UholZeFhB4X6CI9CDnekdma2W6teJavAeFe4W3BasoZL5bXlubwE96QaQKEep8zdiWykQJK8h1TKqkBwlwD5uvprsV43eBOvaxrtUIXBMxvpUyUSVbvlhMcAWM0Jf9fTVXthUZ3tXKo6sw13+zipC5rpWMbkEmqrRqhSqQfWZXK1uS4ft+oVUrSdGBKl46tTJdVfiPpVYGVfHgqcnw+UuhXytqZFQVL56SzJQqNrhmrSDCTkmGP2cQZboWVW7stt0Hcn3slx41EPir4FRWmGavL76dQYBUNrq6PLRjziZEBLwsWD3sacFWb0Mzjli3Vm4s5Rq7YWvJCASvCiESx0kTEoh1V1CeabbH1MxFefy16fWqE0mfC2plND1Xj68r4KRHXUyZyUrNaHriZK0yasU3iRSMBVIznjWBSVtTMyZg5UiBFSKYvpYv6Zk94ZaDer9pnP5ZUCuZqWBqwj2FksLcIzumXA3/b3PIcOy5vws+C7qGoNUjIFIx91LkkyFfcxkbbKfIhIi9pE+k69RzVg+lLGctVaB5Qlf/gY3lUwB4WejvJQeO9h38efZ14U0BGcRm2ZQy9pH+CTzlWEFDd7ObVTdDylDE2EVhjVlpFEFiFhFBhsgYM7ts7e6XmF8FY76bvoZeoMzDNQ47UUyGn9nWIpMUja2eqQBW0CIiHLbIpH/O2ePZlnX3nNZ4s2+IjFmReY1RJT/mF73fIoNIsMjZ/mFEFu28CdIiY2xxvvcOqWIHPpkye7+rCCGhXpxL2Wfib7IdUsaLS9VBYNFnZp/dqcj4ALf9+wdQzqPZO29IDZGhytyljYjUINI9j+p2mQ2RQcQ/i6csyxgRn6GrVRGof2pTxP7yvDBWM4ozRJDwI40qB/8Aqr7ZFjICO2n/2GMsRQIiQoUoIk1HEan3dypEgSzFHHD6QSEaixpZNRSBEKnL46yrTLZ/M851agoRM88+IiVIrNpP6r2mhYzBzFxAiqSlDCIC69OCVBlbvITrnaYlRUkJRYL0JU2CA9IhkLa6jreQ4SnXadOXgP32+Og9D/8BPA71IhAsdSAAAAAASUVORK5CYII="/>
+    <path fill="url(#deepin-draw-c)" d="M22.7429376,26.7214495 C33.8929679,29.6022114 33.3964305,45.9041232 28.2073082,50.0878683 C27.0843657,50.993244 25.9469583,51.4948742 24.8523565,51.7117616 L18.441204,49.8736344 C16.7604635,48.0649303 15.8044748,44.1183772 17.244856,40.6919875 C19.7959279,34.6234786 28.2073082,31.2293894 22.7429376,26.7214495 Z" transform="scale(1 -1) rotate(-42 -78.005 0)"/>
+    <path fill="url(#deepin-draw-d)" d="M23.8156638,27.4472578 L24.0824806,27.4895508 C33.725432,31.3556711 33.0474661,46.3879396 28.0947561,50.3810766 C26.9713733,51.2868073 25.8335142,51.7884758 24.7385167,52.0052248 L18.5333282,50.2249811 C18.3049914,48.6386025 18.3764515,46.9351345 18.8766174,45.2785934 C21.2215974,37.5120601 31.0938185,32.2685096 23.8156638,27.4472578 Z" transform="scale(1 -1) rotate(-42 -78.443 0)"/>
+    <path fill="url(#deepin-draw-e)" d="M28.1481269,27.7766225 L28.2702501,27.8192331 C34.1776781,33.4592894 33.0797258,45.0557985 28.8208543,48.4895261 C27.6972282,49.395453 26.5591194,49.8971427 25.4639034,50.1138152 L19.3066428,48.347488 C19.3812269,46.8681728 19.7364359,45.3411547 20.4544138,43.9198522 C23.9898679,36.9211 34.2664376,33.5870672 28.1481269,27.7766225 Z" transform="scale(1 -1) rotate(-42 -75.616 0)"/>
+    <path fill="url(#deepin-draw-f)" d="M32.0194525,40.1568929 C30.8965101,41.0622685 29.7591026,41.5638988 28.6645008,41.7807861 L22.5490463,40.0266796 C22.9653327,38.9815456 23.560959,37.971188 24.3561081,37.0818886 C27.8270129,33.2000085 33.9978311,31.8829508 35.5057464,28.9027925 C35.8558104,33.563228 34.4541468,38.1939135 32.0194525,40.1568929 Z" transform="scale(1 -1) rotate(-42 -63.163 0)"/>
+    <path fill="url(#deepin-draw-g)" d="M35.0856746,32.1691112 C33.9629785,33.0742883 32.8258237,33.575897 31.7314432,33.7928617 L25.9248196,32.1266135 C26.1560901,31.9907747 26.3965251,31.8660031 26.6458032,31.7539775 C30.2382639,30.1395255 34.8619784,31.0184489 37.041842,29.6311987 C36.505332,30.6832464 35.8458568,31.5562121 35.0856746,32.1691112 Z" transform="scale(1 -1) rotate(-42 -51.226 0)"/>
+    <g transform="rotate(27 37.367 15.107)">
+      <use fill="url(#deepin-draw-h)" xlink:href="#deepin-draw-i"/>
+      <use fill="url(#deepin-draw-j)" xlink:href="#deepin-draw-i"/>
+    </g>
+    <path fill="url(#deepin-draw-k)" fill-rule="nonzero" d="M33.8967012,20.1196797 L35.7615986,21.0698924 L41.5121449,9.78380973 L39.6472475,8.83359705 L33.8967012,20.1196797 Z M39.2102315,7.48860003 L42.8571419,9.3467937 L36.1986146,22.4148894 L32.5517042,20.5566957 L39.2102315,7.48860003 Z M30.7855664,22.2467144 C30.6505664,22.178436 30.4865137,22.2096339 30.3859999,22.3226999 L28.1370557,24.8524936 C28.1181716,24.873736 28.1020819,24.8973064 28.0891783,24.9226312 C28.0056009,25.086661 28.0708205,25.2873862 28.2348503,25.3709635 L34.4295708,28.5273313 C34.4570388,28.5413269 34.4863154,28.5514445 34.5165638,28.5573946 C34.697197,28.5929271 34.872434,28.4752996 34.9079665,28.2946664 L35.5682406,24.9380889 C35.597068,24.7915414 35.524896,24.6437066 35.3916169,24.5762985 L30.7855664,22.2467144 Z M31.2368916,21.3543549 L35.8429421,23.683939 C36.3760588,23.9535713 36.6647468,24.5449106 36.5494371,25.1311006 L35.8891629,28.487678 C35.7470331,29.2102112 35.0460852,29.680721 34.3235521,29.5385911 C34.2025588,29.5147904 34.0854521,29.4743203 33.9755803,29.4183378 L27.7808598,26.2619701 C27.1247407,25.9276607 26.8638624,25.1247598 27.1981718,24.4686407 C27.2497862,24.3673416 27.3141449,24.2730599 27.3896814,24.1880904 L29.6386256,21.6582967 C30.0406807,21.2060326 30.6968916,21.0812412 31.2368916,21.3543549 Z M43.0254466,6.81378798 L44.3874181,4.14076841 C44.4709954,3.97673864 44.4057758,3.77601341 44.2417461,3.69243607 L42.970853,3.04488373 C42.8068233,2.96130638 42.606098,3.02652596 42.5225207,3.19055573 L41.1605492,5.86357531 L43.0254466,6.81378798 Z M39.8155522,6.30059133 L41.6315142,2.73656524 C41.9658236,2.08044615 42.7687245,1.81956783 43.4248435,2.1538772 L44.6957366,2.80142954 C45.3518557,3.13573892 45.612734,3.93863982 45.2784246,4.59475891 L43.4624626,8.15878501 L39.8155522,6.30059133 Z"/>
+    <path fill="url(#deepin-draw-l)" fill-rule="nonzero" d="M28.1656235,44.4082679 C31.711676,41.34072 33.918988,36.9012669 33.4540763,34.0059748 C33.2766061,32.9007587 32.9073308,31.9651163 32.3705419,31.1849574 L26.8652779,28.4998607 C24.5822958,28.8474234 21.9149772,31.0581844 20.9520483,33.8234713 C20.6131484,34.7967056 20.4164913,35.886835 20.3240104,37.1714144 C20.2590951,38.0731021 20.2481713,38.8144281 20.2558705,40.4185776 C20.2707319,43.5149917 20.1805926,44.697564 19.6323105,45.970831 C19.3166831,46.7038075 18.864643,47.2836267 18.2718453,47.7074334 C21.6386863,48.2727123 25.1063207,47.0547482 28.1656235,44.4082679 Z M27.0389637,27.471971 L33.0355144,30.3966842 C33.7034897,31.2901493 34.2128142,32.4237108 34.4414282,33.8474307 C35.4982256,40.4287598 24.9591167,52.8756896 14.7454234,47.5556863 C21.8226427,47.8620117 17.8428579,39.7113999 20.0076671,33.4946186 C21.2297116,29.9852177 24.5798069,27.692255 27.0389637,27.471971 Z" opacity=".5"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-feedback.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-feedback-a" width="129.1%" height="138.2%" x="-14.5%" y="-23.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-feedback-b" x1="26.222%" x2="66.963%" y1="-1.572%" y2="82.336%">
+      <stop offset="0%" stop-color="#90FF8A"/>
+      <stop offset="100%" stop-color="#00B9E4"/>
+    </linearGradient>
+    <linearGradient id="deepin-feedback-c" x1="45.043%" x2="16.292%" y1="61.352%" y2="35.889%">
+      <stop offset="0%" stop-color="#FFF" stop-opacity=".494"/>
+      <stop offset="100%" stop-color="#FFF"/>
+    </linearGradient>
+    <filter id="deepin-feedback-d" width="262.5%" height="132.5%" x="-81.2%" y="-16.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.35 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-feedback-e" x1="0%" x2="80.854%" y1="33.666%" y2="33.666%">
+      <stop offset="0%" stop-color="#E6D049"/>
+      <stop offset="100%" stop-color="#EC9500"/>
+    </linearGradient>
+    <linearGradient id="deepin-feedback-f" x1="0%" x2="89.296%" y1="55.519%" y2="55.519%">
+      <stop offset="0%" stop-color="#F6F6F6"/>
+      <stop offset="100%" stop-color="#747474"/>
+    </linearGradient>
+    <linearGradient id="deepin-feedback-g" x1="-3.437%" x2="86.205%" y1="31.932%" y2="31.932%">
+      <stop offset="0%" stop-color="#5E5E5E"/>
+      <stop offset="100%" stop-color="#373737"/>
+    </linearGradient>
+    <linearGradient id="deepin-feedback-h" x1="2.516%" x2="88.854%" y1="32.939%" y2="32.939%">
+      <stop offset="0%" stop-color="#FFEACA"/>
+      <stop offset="100%" stop-color="#E07431"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-feedback-a)" transform="translate(4 5)">
+    <path fill="url(#deepin-feedback-b)" d="M7.5,6 L47.5,6 C51.6421356,6 55,9.35786438 55,13.5 L55,39.5 C55.0036438,43.6421356 51.6457794,47 47.5036438,47 C47.5024289,47 47.501214,46.9999997 47.5000009,46.9963554 L15.848196,46.9809741 C15.5432901,46.9808259 15.2488437,47.092127 15.0202753,47.2939292 L8.03865662,53.457974 C7.77989887,53.6864302 7.38493389,53.661866 7.15647764,53.4031083 C7.05564579,53.2889025 7,53.1418 7,52.9894516 L7,46.9807441 L7,46.9807441 C3.13400675,46.9807441 -6.04135607e-15,43.8467374 0,39.9807441 L0,13.5 C-1.39544373e-15,9.35786438 3.35786438,6 7.5,6 Z"/>
+    <path fill="url(#deepin-feedback-c)" fill-rule="nonzero" d="M41.5,32 C42.3284271,32 43,32.6715729 43,33.5 C43,34.3284271 42.3284271,35 41.5,35 L12.5,35 C11.6715729,35 11,34.3284271 11,33.5 C11,32.6715729 11.6715729,32 12.5,32 L41.5,32 Z M41.5,25 C42.3284271,25 43,25.6715729 43,26.5 C43,27.3284271 42.3284271,28 41.5,28 L12.5,28 C11.6715729,28 11,27.3284271 11,26.5 C11,25.6715729 11.6715729,25 12.5,25 L41.5,25 Z M41.5,18 C42.3284271,18 43,18.6715729 43,19.5 C43,20.3284271 42.3284271,21 41.5,21 L12.5,21 C11.6715729,21 11,20.3284271 11,19.5 C11,18.6715729 11.6715729,18 12.5,18 L41.5,18 Z"/>
+    <g filter="url(#deepin-feedback-d)" transform="translate(41.5)">
+      <path fill="url(#deepin-feedback-e)" d="M1.75,0 L6.25,0 C6.94035594,-1.26816328e-16 7.5,0.559644063 7.5,1.25 L7.5,5 L7.5,5 L0.5,5 L0.5,1.25 C0.5,0.559644063 1.05964406,1.26816328e-16 1.75,0 Z"/>
+      <rect width="7" height="3" x=".5" y="6" fill="url(#deepin-feedback-f)"/>
+      <rect width="7" height="20" x=".5" y="10" fill="url(#deepin-feedback-g)"/>
+      <polygon fill="url(#deepin-feedback-h)" points=".5 31 7.5 31 6.5 35 1.5 35"/>
+      <path fill="#312F2F" d="M2,36 L6,36 L4.21706079,39.1201436 C4.14855829,39.240023 3.99584463,39.2816722 3.87596527,39.2131697 C3.83720745,39.1910224 3.80508654,39.1589014 3.78293921,39.1201436 L2,36 L2,36 Z"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-image-viewer.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-image-viewer-a" width="132.3%" height="132.2%" x="-19.4%" y="-13.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-image-viewer-b" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#D6D9ED"/>
+    </linearGradient>
+    <linearGradient id="deepin-image-viewer-d" x1="50%" x2="50%" y1="100%" y2="1.926%">
+      <stop offset="0%" stop-color="#4B7BCF"/>
+      <stop offset="100%" stop-color="#3A2EC8"/>
+    </linearGradient>
+    <rect id="deepin-image-viewer-c" width="49.125" height="33.75" x=".122" y=".096" rx="4"/>
+    <linearGradient id="deepin-image-viewer-f" x1="49.803%" x2="41.314%" y1="35.88%" y2="68.829%">
+      <stop offset="0%" stop-color="#40E2E8"/>
+      <stop offset="47.667%" stop-color="#2A7ECA"/>
+      <stop offset="100%" stop-color="#332075"/>
+    </linearGradient>
+    <linearGradient id="deepin-image-viewer-g" x1="50%" x2="50%" y1="11.914%" y2="100%">
+      <stop offset="0%" stop-color="#67CEFF" stop-opacity=".8"/>
+      <stop offset="100%" stop-color="#00CDFF"/>
+    </linearGradient>
+    <filter id="deepin-image-viewer-h" width="133.3%" height="129.4%" x="-18.2%" y="-17.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="-1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.0924666824   0 0 0 0 0.218528561   0 0 0 0 0.62647192  0 0 0 0.302474869 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <circle id="deepin-image-viewer-i" cx="12.51" cy="12.5" r="12.5"/>
+    <linearGradient id="deepin-image-viewer-m" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#E7E7E7"/>
+    </linearGradient>
+    <rect id="deepin-image-viewer-l" width="66.125" height="57.375" x=".021" y=".018" rx="6"/>
+    <filter id="deepin-image-viewer-k" width="109.1%" height="110.5%" x="-4.5%" y="-5.2%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"/>
+    </filter>
+    <linearGradient id="deepin-image-viewer-o" x1="50%" x2="50%" y1="100%" y2="1.926%">
+      <stop offset="0%" stop-color="#4068AD"/>
+      <stop offset="100%" stop-color="#352E86"/>
+    </linearGradient>
+    <rect id="deepin-image-viewer-n" width="59.531" height="41.484" x="0" y="0" rx="4"/>
+    <linearGradient id="deepin-image-viewer-q" x1="49.803%" x2="41.314%" y1="35.865%" y2="68.85%">
+      <stop offset="0%" stop-color="#40D0D5"/>
+      <stop offset="47.667%" stop-color="#2A7ECA"/>
+      <stop offset="100%" stop-color="#332075"/>
+    </linearGradient>
+    <linearGradient id="deepin-image-viewer-r" x1="50%" x2="50%" y1="11.914%" y2="100%">
+      <stop offset="0%" stop-color="#32BEFF" stop-opacity=".8"/>
+      <stop offset="100%" stop-color="#00CDFF"/>
+    </linearGradient>
+    <radialGradient id="deepin-image-viewer-u" cx="50%" cy="50%" r="55.707%" fx="50%" fy="50%">
+      <stop offset="0%" stop-color="#01001F" stop-opacity=".036"/>
+      <stop offset="81.152%" stop-color="#000636" stop-opacity=".219"/>
+      <stop offset="100%" stop-color="#01003C" stop-opacity=".688"/>
+    </radialGradient>
+    <circle id="deepin-image-viewer-t" cx="16.25" cy="16.375" r="12.5"/>
+    <filter id="deepin-image-viewer-s" width="160%" height="160%" x="-30%" y="-30%" filterUnits="objectBoundingBox">
+      <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.279134909   0 0 0 0 0.446591113   0 0 0 0 1  0 0 0 1 0"/>
+    </filter>
+    <radialGradient id="deepin-image-viewer-v" cx="20.808%" cy="86.4%" r="74.745%" fx="20.808%" fy="86.4%" gradientTransform="matrix(.4608 -.86004 1.0475 .68809 -.793 .448)">
+      <stop offset=".037%" stop-color="#C0A8FF" stop-opacity=".515"/>
+      <stop offset="100%" stop-color="#B385FF" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-image-viewer-a)" transform="translate(1 2)">
+    <g transform="rotate(-8 61.633 4.299)">
+      <rect width="54.125" height="46.875" fill="url(#deepin-image-viewer-b)" rx="6"/>
+      <g transform="translate(2.378 2.404)">
+        <mask id="deepin-image-viewer-e" fill="#fff">
+          <use xlink:href="#deepin-image-viewer-c"/>
+        </mask>
+        <use fill="url(#deepin-image-viewer-d)" xlink:href="#deepin-image-viewer-c"/>
+        <circle cx="41.162" cy="6.607" r="2.5" fill="#FFF5D0" mask="url(#deepin-image-viewer-e)"/>
+        <path fill="url(#deepin-image-viewer-f)" d="M-1.25130914,34.6326666 L18.3001886,10.6365131 C20.0440846,8.49617585 22.8697676,8.49405102 24.6153949,10.6365131 L44.1668926,34.6326666 L-1.25130914,34.6326666 Z" mask="url(#deepin-image-viewer-e)"/>
+        <path fill="url(#deepin-image-viewer-g)" fill-opacity=".65" d="M13.8880914,37.2871024 L30.7373289,15.9962966 C32.453413,13.8278416 35.2320308,13.8231609 36.9518192,15.9962966 L53.8010566,37.2871024 L13.8880914,37.2871024 Z" mask="url(#deepin-image-viewer-e)" style="mix-blend-mode:soft-light"/>
+      </g>
+    </g>
+    <g filter="url(#deepin-image-viewer-h)" transform="translate(1 24.125)">
+      <circle cx="16.25" cy="16.125" r="15.875" fill="#FFF"/>
+      <g transform="translate(3.75 3.875)">
+        <mask id="deepin-image-viewer-j" fill="#fff">
+          <use xlink:href="#deepin-image-viewer-i"/>
+        </mask>
+        <use fill="#FFF" fill-opacity=".188" xlink:href="#deepin-image-viewer-i"/>
+        <g mask="url(#deepin-image-viewer-j)">
+          <g transform="rotate(-8 -113.252 135.79)">
+            <use fill="#000" filter="url(#deepin-image-viewer-k)" xlink:href="#deepin-image-viewer-l"/>
+            <use fill="url(#deepin-image-viewer-m)" xlink:href="#deepin-image-viewer-l"/>
+            <g transform="translate(3.313 3.102)">
+              <mask id="deepin-image-viewer-p" fill="#fff">
+                <use xlink:href="#deepin-image-viewer-n"/>
+              </mask>
+              <use fill="url(#deepin-image-viewer-o)" xlink:href="#deepin-image-viewer-n"/>
+              <ellipse cx="49.382" cy="7.878" fill="#FFF5D0" mask="url(#deepin-image-viewer-p)" rx="3.08" ry="3.091"/>
+              <path fill="url(#deepin-image-viewer-q)" d="M-1.65365104,41.4839457 L22.4749718,11.8540088 C24.2183245,9.71317253 27.0411082,9.70856826 28.7882103,11.8540088 L52.9168332,41.4839457 L-1.65365104,41.4839457 Z" mask="url(#deepin-image-viewer-p)"/>
+              <path fill="url(#deepin-image-viewer-r)" fill-opacity=".65" d="M16.5365104,44.6750185 L37.4165979,18.2764269 C39.1274946,16.1133487 41.9072472,16.1207334 43.6123029,18.2764269 L64.4923905,44.6750185 L16.5365104,44.6750185 Z" mask="url(#deepin-image-viewer-p)" style="mix-blend-mode:soft-light"/>
+            </g>
+          </g>
+        </g>
+      </g>
+      <use fill="#000" filter="url(#deepin-image-viewer-s)" xlink:href="#deepin-image-viewer-t"/>
+      <circle cx="16.25" cy="16.375" r="12" fill="url(#deepin-image-viewer-u)" stroke="#000" stroke-linejoin="square" stroke-opacity=".3"/>
+      <path fill="url(#deepin-image-viewer-v)" d="M9.64615967,5.58285651 C9.5158758,5.36430572 9.60680005,5.65083964 9.46533876,5.86132572 C6.33442923,10.5199351 7.52311058,16.6852411 11.9317583,20.1428265 C16.340406,23.600412 22.6396688,23.0040583 26.4164659,18.9327162 C24.1330414,18.2815795 21.9895096,17.3392865 20.0053325,16.150971 C15.7587394,13.6077037 12.2420832,9.93751009 9.64615967,5.58285651 Z" transform="rotate(168 17.062 13.953)" style="mix-blend-mode:lighten"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-movie.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-movie-a" width="127.6%" height="127.6%" x="-13.8%" y="-13.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-movie-b" x1="50%" x2="50%" y1="2.375%" y2="100%">
+      <stop offset="0%" stop-color="#3E3E3E"/>
+      <stop offset="100%" stop-color="#0F0F0F"/>
+    </linearGradient>
+    <linearGradient id="deepin-movie-c" x1="40.768%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#B0FAFF"/>
+      <stop offset="100%" stop-color="#0D96C2"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-movie-a)" transform="translate(3 3)">
+    <circle cx="29" cy="29" r="27.667" fill="url(#deepin-movie-b)" stroke="url(#deepin-movie-c)" stroke-width="2.667"/>
+    <path fill="#FF006B" d="M24.3882745,41.9106267 C21.9646974,43.29381 20,42.1599456 20,39.3721011 L20,19.1246679 C20,16.3394957 21.9757123,15.2092454 24.3882745,16.5861423 L42.1864454,26.7439097 C44.6100225,28.1270929 44.5990076,30.3759625 42.1864454,31.7528594 L24.3882745,41.9106267 Z"/>
+    <path fill="#FFB600" d="M24.223,41.9994253 L24.3882745,41.9106267 C23.0194768,42.6918266 21.797053,42.670136 20.9922844,42.0010412 L24.223,41.9994253 Z M24.3882745,41.9106267 L24.225,41.9994253 L24.223,41.9994253 L24.3882745,41.9106267 Z M28,18.6474253 L36,23.2134253 L36,35.2824253 L28,39.8484253 L28,18.6474253 Z"/>
+    <path fill="#1473FF" d="M24.3882745,16.5861423 L28,18.647 L28,39.848 L24.3882745,41.9106267 C21.9646974,43.29381 20,42.1599456 20,39.3721011 L20,19.1246679 C20,16.3394957 21.9757123,15.2092454 24.3882745,16.5861423 Z"/>
+    <path stroke="#FFF" stroke-opacity=".3" stroke-width="2" d="M23.8925997,41.0421185 L41.6907706,30.8843511 C43.4354382,29.8886349 43.4373799,28.6092422 41.6907706,27.6124179 L23.8925997,17.4546505 C22.1413803,16.455195 21,17.1131896 21,19.1246679 L21,39.3721011 C21,41.3903478 22.1339303,42.0458259 23.8925997,41.0421185 Z"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-music.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-music-a" width="127.6%" height="129.6%" x="-13.8%" y="-14.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-music-b" x1="98.016%" x2="0%" y1="38.451%" y2="41.845%">
+      <stop offset="0%" stop-color="#0BA186"/>
+      <stop offset="100%" stop-color="#68C639"/>
+    </linearGradient>
+    <linearGradient id="deepin-music-c" x1="2.055%" x2="96.944%" y1="41.813%" y2="34.714%">
+      <stop offset="0%" stop-color="#417944" stop-opacity=".381"/>
+      <stop offset="100%" stop-color="#002A35"/>
+    </linearGradient>
+    <linearGradient id="deepin-music-d" x1="50%" x2="50%" y1="0%" y2="98.031%">
+      <stop offset="0%" stop-color="#8DF34C"/>
+      <stop offset="100%" stop-color="#00CCB3"/>
+    </linearGradient>
+    <linearGradient id="deepin-music-e" x1="50%" x2="50%" y1="0%" y2="98.031%">
+      <stop offset="0%" stop-color="#8DF34C"/>
+      <stop offset="100%" stop-color="#00CCB3"/>
+    </linearGradient>
+    <linearGradient id="deepin-music-h" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#FFF" stop-opacity=".7"/>
+    </linearGradient>
+    <path id="deepin-music-g" d="M35.9302044,14.0362092 C35.9766316,14.2799521 36,14.5275258 36,14.7756509 L36,35 C36,37.7614237 33.7614237,40 31,40 C28.2385763,40 26,37.7614237 26,35 C26,32.2385763 28.2385763,30 31,30 C32.1261445,30 33.1653335,30.3723009 34.0011995,31.0005351 L34,17.5701049 C34,16.8425868 33.41023,16.2528168 32.6827119,16.2528168 C32.6059652,16.2528168 32.5293654,16.2595238 32.4537865,16.2728612 L18.0883628,18.807936 C17.4588869,18.91902 17,19.4659774 17,20.1051797 L17,40 C17,42.7614237 14.7614237,45 12,45 C9.23857625,45 7,42.7614237 7,40 C7,37.2385763 9.23857625,35 12,35 C13.1261445,35 14.1653335,35.3723009 15.0011995,36.0005351 L15,17.2701788 C15,15.3727593 16.3485144,13.7431401 18.2124227,13.38811 L31.3086939,10.8935821 C33.4527013,10.4851997 35.521822,11.8922018 35.9302044,14.0362092 Z"/>
+    <filter id="deepin-music-f" width="113.8%" height="112.3%" x="-6.9%" y="-3.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-music-a)" transform="translate(3 5)">
+    <circle cx="34" cy="27" r="23.25" fill="#151E25" stroke="url(#deepin-music-b)" stroke-width="1.5" transform="rotate(90 34 27)"/>
+    <g stroke="url(#deepin-music-c)" stroke-width="1.5" opacity=".8" transform="translate(12.182 5.585)">
+      <path d="M22.5818182,41.6646341 C33.6110338,41.6646341 42.0681818,32.760162 42.0681818,21.4146341 C42.0681818,10.230868 33.001948,1.16463415 21.8181818,1.16463415 C10.6344156,1.16463415 1.56818182,10.230868 1.56818182,21.4146341 C1.56818182,32.4512638 11.2443941,41.6646341 22.5818182,41.6646341 Z" transform="rotate(90 21.818 21.415)"/>
+      <path d="M22.4727273,38.6646341 C31.8658971,38.6646341 39.0681818,31.0813988 39.0681818,21.4146341 C39.0681818,11.8877222 31.3450938,4.16463415 21.8181818,4.16463415 C12.2912699,4.16463415 4.56818182,11.8877222 4.56818182,21.4146341 C4.56818182,30.8142226 12.8129659,38.6646341 22.4727273,38.6646341 Z" transform="rotate(90 21.818 21.415)"/>
+    </g>
+    <ellipse cx="34.932" cy="28.317" fill="url(#deepin-music-d)" rx="11.195" ry="11.205" transform="rotate(90 34.932 28.317)"/>
+    <ellipse cx="34.932" cy="28.317" fill="#2A2A29" rx="7.244" ry="7.25" transform="rotate(90 34.932 28.317)"/>
+    <path fill="url(#deepin-music-e)" d="M10.2555408,-4.14336123e-16 L38.7444592,4.14336123e-16 C42.3105342,-2.4074122e-16 43.6036791,0.371302445 44.9073828,1.06853082 C46.2110865,1.76575919 47.2342408,2.78891348 47.9314692,4.09261719 C48.6286976,5.39632089 49,6.68946584 49,10.2555408 L49,43.7444592 C49,47.3105342 48.6286976,48.6036791 47.9314692,49.9073828 C47.2342408,51.2110865 46.2110865,52.2342408 44.9073828,52.9314692 C43.6036791,53.6286976 42.3105342,54 38.7444592,54 L10.2555408,54 C6.68946584,54 5.39632089,53.6286976 4.09261719,52.9314692 C2.78891348,52.2342408 1.76575919,51.2110865 1.06853082,49.9073828 C0.371302445,48.6036791 -1.15674773e-15,47.3105342 1.99086127e-15,43.7444592 L1.18305822e-15,10.2555408 C-6.87390896e-16,6.68946584 0.371302445,5.39632089 1.06853082,4.09261719 C1.76575919,2.78891348 2.78891348,1.76575919 4.09261719,1.06853082 C5.39632089,0.371302445 6.68946584,2.4074122e-16 10.2555408,-4.14336123e-16 Z"/>
+    <use fill="#000" filter="url(#deepin-music-f)" xlink:href="#deepin-music-g"/>
+    <path fill="url(#deepin-music-h)" stroke="#FFF" stroke-linejoin="square" stroke-opacity=".3" d="M35.4390351,14.1297653 C35.0823223,12.2570232 33.2749921,11.0280386 31.40225,11.3847514 L18.3059788,13.8792792 C16.6778969,14.1893901 15.5,15.6128257 15.5,17.2701468 L15.5012636,37.001861 L14.7007912,36.4002285 C13.9274983,35.819024 12.9885799,35.5 12,35.5 C9.51471863,35.5 7.5,37.5147186 7.5,40 C7.5,42.4852814 9.51471863,44.5 12,44.5 C14.4852814,44.5 16.5,42.4852814 16.5,40 L16.5,20.1051797 C16.5,19.2233568 17.1330655,18.4687921 18.0014701,18.3155442 L32.3668938,15.7804694 C32.47116,15.7620695 32.5768347,15.7528168 32.6827119,15.7528168 C33.6863724,15.7528168 34.5,16.5664444 34.5,17.5700602 L34.5012889,32.0018801 L33.7007912,31.4002285 C32.9274983,30.819024 31.9885799,30.5 31,30.5 C28.5147186,30.5 26.5,32.5147186 26.5,35 C26.5,37.4852814 28.5147186,39.5 31,39.5 C33.4852814,39.5 35.5,37.4852814 35.5,35 L35.5,14.7756509 C35.5,14.5589192 35.4795882,14.3426692 35.4390351,14.1297653 Z"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-phone-master.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>deepin-phone-master/64px</title>
+    <defs>
+        <filter x="-19.0%" y="-13.6%" width="140.5%" height="130.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <linearGradient x1="46.7217965%" y1="0%" x2="57.9744936%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#D7E4FF" offset="0%"></stop>
+            <stop stop-color="#F4F9FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="63.4844817%" x2="100%" y2="63.4844817%" id="linearGradient-3">
+            <stop stop-color="#F1F6FF" offset="0%"></stop>
+            <stop stop-color="#CDDCFA" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="63.4844817%" x2="100%" y2="63.4844817%" id="linearGradient-4">
+            <stop stop-color="#F1F6FF" offset="0%"></stop>
+            <stop stop-color="#CDDCFA" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="38.3957847%" id="linearGradient-5">
+            <stop stop-color="#102956" offset="0%"></stop>
+            <stop stop-color="#2C5A99" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.8897704%" y1="3.04338639%" x2="46.6307769%" y2="93.0226279%" id="linearGradient-6">
+            <stop stop-color="#30466A" offset="0%"></stop>
+            <stop stop-color="#496DA3" offset="26.6891892%"></stop>
+            <stop stop-color="#4C6C9B" offset="54.0857264%"></stop>
+            <stop stop-color="#44628D" offset="82.4297931%"></stop>
+            <stop stop-color="#214068" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="35.1200901%" y1="53.0281445%" x2="58.9758879%" y2="36.9471277%" id="linearGradient-7">
+            <stop stop-color="#19467E" offset="0%"></stop>
+            <stop stop-color="#0F2E5E" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-8" cx="12" cy="12.375" r="11.5"></circle>
+        <filter x="-8.7%" y="-4.3%" width="117.4%" height="117.4%" filterUnits="objectBoundingBox" id="filter-9">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.195230551 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+            <stop stop-color="#4B4B4B" offset="0%"></stop>
+            <stop stop-color="#070707" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="deepin-phone-master/64px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-3" filter="url(#filter-1)" transform="translate(14.875000, 1.750000)">
+            <g id="Group" transform="translate(0.125000, 0.250000)">
+                <path d="M1,5.99226572 C1,2.68282874 3.68697794,0 7.00017566,0 L26.9998243,0 C30.3136298,0 33,2.69179915 33,5.99226572 L33,51.0077343 C33,54.3171713 30.3130221,57 26.9998243,57 L7.00017566,57 C3.68637015,57 1,54.3082008 1,51.0077343 L1,5.99226572 Z" id="Rectangle-134" fill="url(#linearGradient-2)"></path>
+                <path d="M2,6.0022625 C2,3.23958921 4.23894006,1 6.99625272,1 L26.9546938,1 C29.714048,1 31.953051,3.24136401 31.9556432,6.00226243 L31.9978895,50.9977369 C32.0004833,53.7604101 29.7720272,55.9999993 26.9977191,55.9999994 L7.00486695,55.9999999 C4.24075526,56 2,53.758636 2,50.9977376 L2,6.0022625 Z" id="Rectangle-134" fill="#000000"></path>
+                <path d="M0.5,12 L1,12 L1,12 L1,16 L0.5,16 C0.223857625,16 3.38176876e-17,15.7761424 0,15.5 L0,12.5 C-3.38176876e-17,12.2238576 0.223857625,12 0.5,12 Z" id="矩形" fill="url(#linearGradient-3)"></path>
+                <path d="M33.5,13 L34,13 L34,13 L34,19 L33.5,19 C33.2238576,19 33,18.7761424 33,18.5 L33,13.5 C33,13.2238576 33.2238576,13 33.5,13 Z" id="矩形" fill="url(#linearGradient-4)" transform="translate(33.500000, 16.000000) scale(-1, 1) translate(-33.500000, -16.000000) "></path>
+                <path d="M0.5,18 L1,18 L1,18 L1,22 L0.5,22 C0.223857625,22 3.38176876e-17,21.7761424 0,21.5 L0,18.5 C-3.38176876e-17,18.2238576 0.223857625,18 0.5,18 Z" id="矩形" fill="url(#linearGradient-3)"></path>
+                <path d="M7,2 L14.1429323,2 C14.6412806,2 15.0703507,2.35175329 15.1680848,2.84042404 L15.25,3.25 C15.3953643,3.97682171 16.0335393,4.5 16.7747549,4.5 L17.2252451,4.5 C17.9664607,4.5 18.6046357,3.97682171 18.75,3.25 L18.8319152,2.84042404 C18.9296493,2.35175329 19.3587194,2 19.8570677,2 L27,2 C29.209139,2 31,3.790861 31,6 L31,51 C31,53.209139 29.209139,55 27,55 L7,55 C4.790861,55 3,53.209139 3,51 L3,6 C3,3.790861 4.790861,2 7,2 Z" id="矩形" fill="url(#linearGradient-5)"></path>
+                <g id="路径-3-+-路径-2-蒙版" transform="translate(2.875000, 17.625000)">
+                    <path d="M0.125,11.3638208 C11.0151515,7.46508502 16.5473485,4.87701716 16.7215909,3.59961724 C16.8958333,2.32221732 17.0482955,1.1299774 17.1789773,0.0228974678 C23.7357955,2.79529929 27.3844697,5.24600013 28.125,7.375 C28.125,16.0416667 28.125,24.7083333 28.125,33.375 C28.125,35.584139 26.334139,37.375 24.125,37.375 L4.125,37.375 C1.915861,37.375 0.125,35.584139 0.125,33.375 L0.125,11.3638208 L0.125,11.3638208 Z" id="路径-3" fill="url(#linearGradient-6)" opacity="0.795735677"></path>
+                    <path d="M0.125,10.125 C3.625,9.79166667 7.04166667,8.54166667 10.375,6.375 C13.7083333,4.20833333 15.9725379,2.08333333 17.1676136,0 C20.8702652,4.87878788 20.0861742,8.32007576 14.8153409,10.3238636 C6.90909091,13.3295455 8.86931818,20.9744318 15.3380682,21.6278409 C21.8068182,22.28125 21.6107955,22.8693182 17.6903409,27.0511364 C13.7698864,31.2329545 5.35227273,33.375 0.125,33.375 C0.125,31.8503788 0.125,24.1003788 0.125,10.125 Z" id="路径-2" fill="url(#linearGradient-7)"></path>
+                </g>
+                <rect id="矩形" fill="#00C4CC" x="6" y="6" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#FFDD3A" x="12" y="6" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#E8A1EA" x="18" y="6" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#969696" x="24" y="6" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#00DC52" x="6" y="12" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#CE4B67" x="12" y="12" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#DD6A60" x="24" y="12" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#3986FA" x="6" y="18" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#9E43D0" x="12" y="18" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#DABF9F" x="18" y="12" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#666666" x="18" y="18" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#C59F35" x="6" y="24" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#482AC5" x="6" y="48" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#1D84FE" x="12" y="48" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#6FAD93" x="18" y="48" width="4" height="4" rx="1"></rect>
+                <rect id="矩形" fill="#D8D8D8" x="24.625" y="48.875" width="4.75" height="4.75" rx="1"></rect>
+                <path d="M17,4 C17.5522847,4 18,3.55228475 18,3 C18,2.44771525 17.5522847,2 17,2 C16.4477153,2 16,2.44771525 16,3 C16,3.55228475 16.4477153,4 17,4 Z" id="Oval-21" fill-opacity="0.15" fill="#FFFFFF" transform="translate(17.000000, 3.000000) rotate(-360.000000) translate(-17.000000, -3.000000) "></path>
+                <path d="M17,3.5 C17.2761424,3.5 17.5,3.27614237 17.5,3 C17.5,2.72385763 17.2761424,2.5 17,2.5 C16.7238576,2.5 16.5,2.72385763 16.5,3 C16.5,3.27614237 16.7238576,3.5 17,3.5 Z" id="Oval-21" fill-opacity="0.15" fill="#FFFFFF" transform="translate(17.000000, 3.000000) rotate(-360.000000) translate(-17.000000, -3.000000) "></path>
+            </g>
+            <g id="编组-4" transform="translate(17.625000, 34.375000)">
+                <g id="椭圆形">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                    <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-8"></use>
+                </g>
+                <path d="M19.4266969,13.875 C19.4897998,13.875 19.5505683,13.8988632 19.5968097,13.9418016 C19.6979873,14.0357523 19.703846,14.1939351 19.6098953,14.2951128 L19.6098953,14.2951128 L13.9331984,20.4084787 C13.8858953,20.4594204 13.8195172,20.4883659 13.75,20.4883659 C13.6119288,20.4883659 13.5,20.3764371 13.5,20.2383659 L13.5,20.2383659 L13.5,16.875 L6.5,16.875 C5.94771525,16.875 5.5,16.4272847 5.5,15.875 L5.5,15.875 L5.5,14.875 C5.5,14.3227153 5.94771525,13.875 6.5,13.875 L6.5,13.875 Z M11.25,5.2616341 C11.3880712,5.2616341 11.5,5.37356291 11.5,5.5116341 L11.5,5.5116341 L11.5,8.875 L18.5,8.875 C19.0522847,8.875 19.5,9.32271525 19.5,9.875 L19.5,9.875 L19.5,10.875 C19.5,11.4272847 19.0522847,11.875 18.5,11.875 L18.5,11.875 L5.57330309,11.875 C5.51020024,11.875 5.44943168,11.8511368 5.40319032,11.8081984 C5.30201265,11.7142477 5.29615403,11.5560649 5.39010472,11.4548872 L5.39010472,11.4548872 L11.0668016,5.34152132 C11.1141047,5.29057957 11.1804828,5.2616341 11.25,5.2616341 Z" id="形状结合" fill="url(#linearGradient-10)"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

evm_monitor/src/assets/images/deepin-screen-recorder.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-screenshot&amp;record-a" width="126.7%" height="132%" x="-13.3%" y="-16%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="deepin-screenshot&amp;record-b" x1="50%" x2="50%" y1="0%" y2="96.107%">
+      <stop offset="0%" stop-color="#F0EDFF"/>
+      <stop offset="100%" stop-color="#BBA7F6"/>
+    </linearGradient>
+    <path id="deepin-screenshot&amp;record-c" d="M8.12120347,27 L8.12120347,35 L-7.10542736e-15,35 L-7.10542736e-15,27 L8.12120347,27 Z M52,26.9509657 L52,34.9509657 L44,34.9509657 L44,26.9509657 L52,26.9509657 Z M52,0 L52,8 L44,8 L44,0 L52,0 Z M8,0 L8,8 L-7.10542736e-15,8 L-7.10542736e-15,0 L8,0 Z"/>
+    <linearGradient id="deepin-screenshot&amp;record-g" x1="39.277%" x2="39.277%" y1="15.304%" y2="105.982%">
+      <stop offset="0%" stop-color="#6B6386"/>
+      <stop offset="72.102%" stop-color="#302B42"/>
+      <stop offset="100%" stop-color="#72639E"/>
+    </linearGradient>
+    <circle id="deepin-screenshot&amp;record-f" cx="16.591" cy="16.838" r="16"/>
+    <filter id="deepin-screenshot&amp;record-e" width="125%" height="125%" x="-12.5%" y="-6.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
+    </filter>
+    <radialGradient id="deepin-screenshot&amp;record-h" cx="50%" cy="91.243%" r="23.464%" fx="50%" fy="91.243%" gradientTransform="matrix(0 1 -1.57176 0 1.934 .412)">
+      <stop offset="0%" stop-color="#8462FF"/>
+      <stop offset="100%" stop-color="#232129"/>
+    </radialGradient>
+    <circle id="deepin-screenshot&amp;record-i" cx="17" cy="17" r="11"/>
+    <radialGradient id="deepin-screenshot&amp;record-j" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+      <stop offset="0%" stop-color="#F53E84"/>
+      <stop offset="100%" stop-color="#4F2CA2"/>
+    </radialGradient>
+    <linearGradient id="deepin-screenshot&amp;record-k" x1="99.23%" x2=".77%" y1="27.849%" y2="67.669%">
+      <stop offset="0%" stop-color="#4B003F"/>
+      <stop offset="14.589%" stop-color="#33036D"/>
+      <stop offset="51.448%" stop-color="#C30B9D"/>
+      <stop offset="80.605%" stop-color="#591A85"/>
+      <stop offset="100%" stop-color="#470437"/>
+    </linearGradient>
+    <linearGradient id="deepin-screenshot&amp;record-l" x1="50%" x2="50%" y1="0%" y2="50%">
+      <stop offset="0%" stop-color="#FEE" stop-opacity=".85"/>
+      <stop offset="100%" stop-color="#FF578A" stop-opacity=".7"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-screenshot&amp;record-a)" transform="translate(2 7)">
+    <path fill="url(#deepin-screenshot&amp;record-b)" d="M13.8181595,3.0981834 C14.6988074,1.20829074 16.5948768,0 18.6798792,0 L41.3201208,0 C43.4051232,0 45.3011926,1.20829074 46.1818405,3.0981834 L46.923354,4.68949035 C47.5801083,6.09890182 48.9941262,7 50.5490432,7 L52,7 L52,7 C56.418278,7 60,10.581722 60,15 L60,42 C60,46.418278 56.418278,50 52,50 L8,50 C3.581722,50 0,46.418278 0,42 L0,15 C0,10.581722 3.581722,7 8,7 L9.45095676,7 C11.0058738,7 12.4198917,6.09890182 13.076646,4.68949035 L13.8181595,3.0981834 L13.8181595,3.0981834 Z"/>
+    <g transform="translate(4 11)">
+      <mask id="deepin-screenshot&amp;record-d" fill="#fff">
+        <use xlink:href="#deepin-screenshot&amp;record-c"/>
+      </mask>
+      <path stroke="#000" stroke-opacity=".4" d="M3.27338129,0.5 C1.7416851,0.5 0.5,1.7416851 0.5,3.27338129 L0.5,31.7266187 C0.5,33.2583149 1.7416851,34.5 3.27338129,34.5 L48,34.5 C49.9329966,34.5 51.5,32.9329966 51.5,31 L51.5,4 C51.5,2.06700338 49.9329966,0.5 48,0.5 L3.27338129,0.5 Z" mask="url(#deepin-screenshot&amp;record-d)"/>
+    </g>
+    <ellipse cx="50.614" cy="16.216" fill="#F55" stroke="#D51818" rx="1.841" ry="1.851"/>
+    <g transform="translate(13.41 11.162)">
+      <use fill="#000" filter="url(#deepin-screenshot&amp;record-e)" xlink:href="#deepin-screenshot&amp;record-f"/>
+      <use fill="url(#deepin-screenshot&amp;record-g)" xlink:href="#deepin-screenshot&amp;record-f"/>
+      <use fill="url(#deepin-screenshot&amp;record-h)" xlink:href="#deepin-screenshot&amp;record-i"/>
+      <circle cx="17" cy="17" r="11.5" stroke="#000"/>
+      <circle cx="17" cy="17" r="10.5" stroke="#FFF" stroke-linejoin="square" stroke-opacity=".05"/>
+      <circle cx="17" cy="17" r="7.5" fill="url(#deepin-screenshot&amp;record-j)" stroke="#080808"/>
+      <ellipse cx="17" cy="17.039" fill="url(#deepin-screenshot&amp;record-k)" rx="5" ry="5.039"/>
+      <circle cx="17" cy="17" r="3" fill="#38000E"/>
+      <ellipse cx="16.034" cy="12.405" fill="url(#deepin-screenshot&amp;record-l)" opacity=".5" rx="6.034" ry="5.405"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-system-monitor.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="deepin-system-monitor-a" width="131%" height="127.6%" x="-15.5%" y="-13.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <radialGradient id="deepin-system-monitor-b" cx="38.256%" cy="21.126%" r="100.21%" fx="38.256%" fy="21.126%">
+      <stop offset="0%" stop-color="#665AFF"/>
+      <stop offset="100%" stop-color="#4300D7"/>
+    </radialGradient>
+    <radialGradient id="deepin-system-monitor-d" cx="50%" cy="52.28%" r="54.424%" fx="50%" fy="52.28%">
+      <stop offset="0%" stop-color="#00D8FF"/>
+      <stop offset="100%" stop-color="#3D00B5"/>
+    </radialGradient>
+    <circle id="deepin-system-monitor-c" cx="22" cy="22" r="22"/>
+    <path id="deepin-system-monitor-g" d="M9.99376941,32.8364486 C10.2101076,33.2691251 10.6073866,33.8650435 11.2045049,34.4621618 C12.2327072,35.4903641 13.5019789,36.125 15,36.125 C16.8603023,36.125 18.2331117,35.0886635 19.2376325,33.247042 C19.9209371,31.9943169 20.310236,30.8047926 21.0853593,27.9626737 C22.4336212,23.0190467 23.2849194,21.4583333 25,21.4583333 C26.6486243,21.4583333 27.3360864,22.9707499 28.2264797,27.8679128 C28.7447273,30.7182748 29.0264649,31.9102414 29.6008377,33.1738616 C30.4551359,35.0533176 31.7773414,36.125 33.6666667,36.125 C36.0541329,36.125 36.9596661,34.7998294 37.6747436,31.9395192 C37.7119549,31.7900881 37.7119549,31.7900881 37.7482295,31.6435992 C38.1899759,29.861765 38.4339745,29.4583333 39,29.4583333 C39.3977374,29.4583333 39.5859823,29.7112129 39.9922686,30.9652312 C40.0155691,31.0371492 40.1294238,31.3925851 40.1625345,31.4945172 C40.233328,31.712457 40.2938385,31.8918914 40.3563842,32.0668309 C41.4134072,35.0233081 43.2910729,36.4668144 47.1018527,36.1203799 C47.7206214,36.0641282 48.1766316,35.516916 48.1203799,34.8981473 C48.0641282,34.2793786 47.516916,33.8233684 46.8981473,33.8796201 C44.1980547,34.1250831 43.2102371,33.3656716 42.475045,31.3093506 C42.4209381,31.1580143 42.3670295,30.9981567 42.3024675,30.799401 C42.2711684,30.7030457 42.1576647,30.3487056 42.1327314,30.2717479 C41.4479973,28.1582899 40.7408447,27.2083333 39,27.2083333 C36.9341383,27.2083333 36.2487397,28.3415839 35.5643426,31.1021773 C35.5279528,31.2491276 35.5279528,31.2491276 35.491923,31.3938141 C35.0050775,33.3411963 34.6403116,33.875 33.6666667,33.875 C32.0180423,33.875 31.3305802,32.3625834 30.440187,27.4654205 C29.9219393,24.6150585 29.6402018,23.4230919 29.065829,22.1594717 C28.2115308,20.2800157 26.8893252,19.2083333 25,19.2083333 C23.1396977,19.2083333 21.7668883,20.2446699 20.7623675,22.0862914 C20.0790629,23.3390165 19.689764,24.5285407 18.9146407,27.3706596 C17.5663788,32.3142866 16.7150806,33.875 15,33.875 C14.1646877,33.875 13.4339594,33.5096359 12.7954951,32.8711715 C12.5597437,32.6354201 12.3554523,32.3800559 12.1860566,32.1259623 C12.0884592,31.9795662 12.028023,31.8738028 12.0062306,31.830218 C11.7283677,31.2744922 11.0526105,31.0492398 10.4968847,31.3271027 C9.9411589,31.6049656 9.71590651,32.2807228 9.99376941,32.8364486 Z"/>
+    <filter id="deepin-system-monitor-f" width="178.4%" height="276.9%" x="-39.2%" y="-88.4%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4.5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.243137255   0 0 0 0 0.423529412   0 0 0 0 1  0 0 0 1 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#deepin-system-monitor-a)" transform="translate(3 3)">
+    <circle cx="29" cy="29" r="29" fill="url(#deepin-system-monitor-b)"/>
+    <g transform="translate(7 7)">
+      <mask id="deepin-system-monitor-e" fill="#fff">
+        <use xlink:href="#deepin-system-monitor-c"/>
+      </mask>
+      <use fill="url(#deepin-system-monitor-d)" xlink:href="#deepin-system-monitor-c"/>
+      <path fill="#FFF" fill-opacity=".2" fill-rule="nonzero" d="M12.5,-1 L12.4996667,2 L21.4996667,2 L21.5,-1 L22.5,-1 L22.4996667,2 L31.9996667,2 L32,0.666666667 L33,0.666666667 L32.9996667,2 L34.6666667,2 L34.6666667,3 L32.9996667,3 L32.9996667,12 L40.9996667,12 L41,10 L42,10 L41.9996667,12 L43.5,12 L43.5,13 L41.9996667,13 L41.9996667,22 L43.5,22 L43.5,23 L41.9996667,23 L41.9996667,32 L42.6666667,32 L42.6666667,33 L41.9996667,33 L42,34 L41,34 L40.9996667,33 L32.9996667,33 L32.9996667,40 L35.3333333,40 L35.3333333,41 L32.9996667,41 L33,44 L32,44 L31.9996667,41 L22.4996667,41 L22.5,43.6666667 L21.5,43.6666667 L21.4996667,41 L12.4996667,41 L12.5,43.6666667 L11.5,43.6666667 L11.4996667,41 L8.66666667,41 L8.66666667,40 L11.4996667,40 L11.4996667,33 L2.99966667,33 L3,34 L2,34 L1.99966667,33 L0.666666667,33 L0.666666667,32 L1.99966667,32 L1.99966667,23 L1,23 L1,22 L1.99966667,22 L1.99966667,13 L1,13 L1,12 L1.99966667,12 L2,10 L3,10 L2.99966667,12 L11.4996667,12 L11.4996667,3 L8.66666667,3 L8.66666667,2 L11.4996667,2 L11.5,-1 L12.5,-1 Z M21.4996667,33 L12.4996667,33 L12.4996667,40 L21.4996667,40 L21.4996667,33 Z M31.9996667,33 L22.4996667,33 L22.4996667,40 L31.9996667,40 L31.9996667,33 Z M11.4996667,23 L2.99966667,23 L2.99966667,32 L11.4996667,32 L11.4996667,23 Z M21.4996667,23 L12.4996667,23 L12.4996667,32 L21.4996667,32 L21.4996667,23 Z M40.9996667,23 L32.9996667,23 L32.9996667,32 L40.9996667,32 L40.9996667,23 Z M31.9996667,23 L22.4996667,23 L22.4996667,32 L31.9996667,32 L31.9996667,23 Z M11.4996667,13 L2.99966667,13 L2.99966667,22 L11.4996667,22 L11.4996667,13 Z M21.4996667,13 L12.4996667,13 L12.4996667,22 L21.4996667,22 L21.4996667,13 Z M40.9996667,13 L32.9996667,13 L32.9996667,22 L40.9996667,22 L40.9996667,13 Z M31.9996667,13 L22.4996667,13 L22.4996667,22 L31.9996667,22 L31.9996667,13 Z M21.4996667,3 L12.4996667,3 L12.4996667,12 L21.4996667,12 L21.4996667,3 Z M31.9996667,3 L22.4996667,3 L22.4996667,12 L31.9996667,12 L31.9996667,3 Z" mask="url(#deepin-system-monitor-e)"/>
+    </g>
+    <rect width="20.25" height="9" x="19" y="45" fill="#0A8BFF" rx="4.5"/>
+    <path fill="#FFF" d="M24.5425,52.76 C25.2625,52.76 25.855,52.475 26.3125,51.9425 L25.7275,51.2525 C25.4275,51.575 25.0525,51.8 24.58,51.8 C23.7025,51.8 23.1325,51.0725 23.1325,49.865 C23.1325,48.6725 23.7625,47.9525 24.6025,47.9525 C25.0225,47.9525 25.345,48.1475 25.6225,48.4175 L26.2075,47.7125 C25.8475,47.3375 25.285,47 24.58,47 C23.1775,47 22,48.0725 22,49.9025 C22,51.755 23.14,52.76 24.5425,52.76 Z M27.205,52.655 L27.205,47.105 L29.0275,47.105 C30.2575,47.105 31.2025,47.5325 31.2025,48.845 C31.2025,50.1125 30.25,50.6825 29.0575,50.6825 L28.315,50.6825 L28.315,52.655 L27.205,52.655 Z M28.315,49.805 L28.9825,49.805 C29.7475,49.805 30.115,49.4825 30.115,48.845 C30.115,48.2 29.71,47.9825 28.945,47.9825 L28.315,47.9825 L28.315,49.805 Z M34.3375,52.76 C35.695,52.76 36.4825,52.0025 36.4825,50.1575 L36.4825,47.105 L35.4175,47.105 L35.4175,50.255 C35.4175,51.41 34.9975,51.8 34.3375,51.8 C33.685,51.8 33.2875,51.41 33.2875,50.255 L33.2875,47.105 L32.1775,47.105 L32.1775,50.1575 C32.1775,52.0025 32.9875,52.76 34.3375,52.76 Z"/>
+    <path stroke="#FFF" stroke-linecap="round" stroke-width="2" d="M39.0963015,49.6713244 C46.7376991,45.9320953 52,38.0805857 52,29 C52,16.2974508 41.7025492,6 29,6 C16.2974508,6 6,16.2974508 6,29 C6,38.1005783 11.2854982,45.9666623 18.9542048,49.6959624" opacity=".497"/>
+    <path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M29,6 C16.2974508,6 6,16.2974508 6,29 C6,38.1005783 11.2854982,45.9666623 18.9542048,49.6959624"/>
+    <g fill-rule="nonzero">
+      <use fill="#000" filter="url(#deepin-system-monitor-f)" xlink:href="#deepin-system-monitor-g"/>
+      <use fill="#FFF" xlink:href="#deepin-system-monitor-g"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-voice-note.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="voice-note-c" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FD5E5E"/>
+      <stop offset="100%" stop-color="#ED5656"/>
+    </linearGradient>
+    <circle id="voice-note-b" cx="18" cy="18" r="18"/>
+    <filter id="voice-note-a" width="130.6%" height="130.6%" x="-15.3%" y="-9.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.97254902   0 0 0 0 0.17254902   0 0 0 0 0.277440324  0 0 0 0.4 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(7 4)">
+      <path fill="#FFF" d="M8,0 L42,0 C46.418278,-8.11624501e-16 50,3.581722 50,8 L50,48 C50,52.418278 46.418278,56 42,56 L8,56 C3.581722,56 5.41083001e-16,52.418278 0,48 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z"/>
+      <path fill="#000" fill-opacity=".1" d="M8,0 L8,3 L45,3 L45,4 L8,4 L8,8 L45,8 L45,9 L8,9 L8,13 L45,13 L45,14 L8,14 L8,18 L45,18 L45,19 L8,19 L8,23 L45,23 L45,24 L8,24 L8,28 L45,28 L45,29 L8,29 L8,33 L45,33 L45,34 L8,34 L8,38 L45,38 L45,39 L8,39 L8,43 L45,43 L45,44 L8,44 L8,48 L45,48 L45,49 L8,49 L8,55 L7,55 L7,49 L4,49 L4,48 L7,48 L7,44 L4,44 L4,43 L7,43 L7,39 L4,39 L4,38 L7,38 L7,34 L4,34 L4,33 L7,33 L7,29 L4,29 L4,28 L7,28 L7,24 L4,24 L4,23 L7,23 L7,19 L4,19 L4,18 L7,18 L7,14 L4,14 L4,13 L7,13 L7,9 L4,9 L4,8 L7,8 L7,4 L4,4 L4,3 L7,3 L7,0 L8,0 Z"/>
+    </g>
+    <g transform="translate(14 14)">
+      <use fill="#000" filter="url(#voice-note-a)" xlink:href="#voice-note-b"/>
+      <use fill="url(#voice-note-c)" xlink:href="#voice-note-b"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M13,20 L13,21 C13,23.7614237 15.2385763,26 18,26 C20.7614237,26 23,23.7614237 23,21 L23,20 L24,20 L24,21 C24,23.9727145 21.8381232,26.4404956 19.0008069,26.9169061 L19.0007263,28.0400662 C21.2011091,28.2188645 22.8766089,28.9756671 22.9934809,29.8969763 L23,30 L13,30 C13,29.0323792 14.7178935,28.2252525 17.0002666,28.0399856 L17.0001915,26.9170737 C14.1623839,26.4410745 12,23.9730632 12,21 L12,20 L13,20 Z M22,20 L22,21 C22,23.209139 20.209139,25 18,25 C15.790861,25 14,23.209139 14,21 L14,20 L22,20 Z M14,15 L14,11 C14,8.790861 15.790861,7 18,7 C20.209139,7 22,8.790861 22,11 L22,15 L19,15 L19,16 L22,16 L22,17 L19,17 L19,18 L22,18 L22,19 L14,19 L14,18 L17,18 L17,17 L14,17 L14,16 L17,16 L17,15 L14,15 Z"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/assets/images/deepin-voice-recorder.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>deepin-sound-recorder</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="49.9997735%" y1="0%" x2="49.9997727%" y2="99.833549%" id="linearGradient-1">
+            <stop stop-color="#FF9BBA" offset="0%"></stop>
+            <stop stop-color="#DA0C0C" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.9997727%" y1="1.85111235%" x2="49.9997727%" y2="99.833549%" id="linearGradient-2">
+            <stop stop-color="#FF4B83" offset="0%"></stop>
+            <stop stop-color="#EE3A3A" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.9997735%" y1="3.9511297%" x2="49.9997727%" y2="99.1303297%" id="linearGradient-3">
+            <stop stop-color="#FF004F" offset="0%"></stop>
+            <stop stop-color="#E13333" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="deepin-sound-recorder">
+            <image id="Bitmap" x="1" y="2" width="62" height="62" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAYAAABzwahEAAAABGdBTUEAA1teXP8meAAABQhJREFUaAXlmol2ozAMANu973v//yv3ProammEVAwWT5hVcvacaHFvWSLKhaS8vziuXhfnyvvj44qroKO+Lj9ffzjlSaznb47pU7DnGVrjccp2VeYhjru9O+OniJ5jopmqHVn0Q1ygixN+4RhEhnOt45zPG8c53ji1jVomLrpock5yvszj/8GDsT7S/Q9c6ic1HodkegTAIcbnadu84RmqkBMY5FMd+Hdpobk0I6ONQWgKKnhQAAcLOYnGOpWlGfoYFy3ixscqBrPnkMAd4twJdVZWl0wdbsw3QKPMsQzKMVi0c49cIa7h9qACTUG2rBjxDsyhOfD+01QufOMEAEHwUqQr8EnCBzTTQlBmlfdeCH+5/wIWfrYQacCILNMCU9lbEg869L/yN/s2Bm21LitJmoa0Jhxx+LYa/CVxoxmCQTG8ROtzqxFLHV68PHw2bKfAMTXlzkm6pvIck1z1kHt89fCfLfgyciQifaeBH17OPH1QlvqNmXqaegBNxTOhnIi37em+Cz5lh4D9wWXKJs1fI9LnfxvL6t3lNtp8e/B+U/FjGgecUZzB7e6/iGx4sN5Z6zjaD91jiZZJggIXKlq8bU2acDxnEAbHlR1fn/IIfcgjeTxHcaDCglWwLOZp1wRkEvPd7PdCEza0ssMHYiaDc0Em29/Cigr81AhNsA3CzTalv4beuGqglY2GCrc+6F4LzCLM0lhjcyxiZel5LXXAH7AWoxk9OeMH7w+w+gJPUSfAWnt1TVTDIONlGiMZ9AIf1Mu9xAjB4mWdUIwIbjF2iBYeNjpYPN9g6aGAF7zvobFwGGYfXQLTIfsTmjXu75czL1rEKTobp4LWuVYHNBPelTQfKl4util+cdvBk3Chw6rWecZ9aV5Y68HTyq1urAhuMfcYBFZxAGAz6WxG5JsF5ZX3eCm3igAm2I3Cybcb58FloawJTBh/scT7kgGvpkJMngx/tZ7LOl/Do69BWBBa5YOwkH2SWO1/MURotnPAwwAJTv7/jerSkebWjPJjwLXTP8j6cB5i/AfonpS7rOeMA0sle4FtJ3nT8D4O43J3gOwz+Q0Nf5pBMHWJknaDwGPgaukf5EE6TZcCPsg1MmXH6iIwTCMA7Oncm+IzvGfoIYSrjDmLyi1CCsZe/sLwMX1+F8jezXOazpQ7s0aCDIY3E7WaFfwTgQAPaA43DbSBTGQdeIQjc8zzklB81FP13LTy6PocCDDjbVV/LRE4ebjGnEyaonAdvQreYeTINNL4Bzbbk6aTvcXksUxnPo4wWLZl/G0okWWQLwn7+GGqmZ6Fxegk444ycpUPZM5fo3qWwn6lCtqCZHjy6xhxcAu5+z/AEgGc8J6gRHrN/rj5Lm5cU3jOEtrxn110Cno2U8Myn9Hm9pfStiLg8i/Am9imUNcksmfb0FhofZ6UWHIMlPLCcqLw00BKARYvHuKWCXcqatzHWI8Moa3l661d0zYtlPD/y/wjncMqjOIVSdvn9+EvcU4ZkYo2QFF6e2E7YZUsBKqzAVllVsIUIe1XiPFoUJ1ECQDmq9OEgzuo49wRDhwmecw0cLbYYxzzVuWVZV0GHvc5p2rVSBiBD5GBwbYUYLOdaorQEAwUsQ3rNZ46Py/VbysUxcopoJ0MJWraOyesJI3jZ+jktYnt9t+KnDq+YOjol2xMwt0xyjK0QueU6q4s5xvvVrYuvNjAzsbRf3pfTS7Dyvhy/+v4fra1pWYxQ1MYAAAAASUVORK5CYII="></image>
+            <circle id="Combined-Shape" fill="url(#linearGradient-1)" cx="32" cy="32" r="28"></circle>
+            <circle id="Combined-Shape" fill="url(#linearGradient-2)" cx="32" cy="32" r="27"></circle>
+            <path d="M23,33.0167812 C23,37.983509 27.4690909,41.9930211 32,41.9930211 C36.5309091,41.9930211 41,38.9825527 41,33.0167812 L41,28.0069789 L23,28.0069789 L23,33.0167812 Z M43,33.0167812 C43,40.4877869 37.5309091,44 32,44 C26.4690909,44 21,39.7107116 21,33.0167812 L21,28 L43,28 L43,33.0167812 Z" id="Rectangle-41" fill="#E40F35" fill-rule="nonzero"></path>
+            <path d="M23,34.0167812 C23,38.983509 27.4690909,42.9930211 32,42.9930211 C36.5309091,42.9930211 41,39.9825527 41,34.0167812 L41,29.0069789 L23,29.0069789 L23,34.0167812 Z M43,34.0167812 C43,41.4877869 37.5309091,45 32,45 C26.4690909,45 21,40.7107116 21,34.0167812 L21,29.5052342 C21,28.6739163 21,29 21,29 L43,29 C43,29 43,28.6739163 43,29.5052342 L43,34.0167812 Z" id="Rectangle-41" fill="#FFFFFF" fill-rule="nonzero"></path>
+            <rect id="Combined-Shape" fill="url(#linearGradient-3)" x="25" y="13" width="14" height="27" rx="7"></rect>
+            <rect id="Combined-Shape" fill="#FFFFFF" x="25" y="14" width="14" height="27" rx="7"></rect>
+            <polygon id="Combined-Shape" fill="#E40F35" points="25 46 25 48 39 48 39 46"></polygon>
+            <polygon id="Combined-Shape" fill="#FFFFFF" points="33 47 33 43 31 43 31 47 25 47 25 49 39 49 39 47"></polygon>
+            <circle id="Oval" fill="#F94568" cx="32.5" cy="19.5" r="1.5"></circle>
+            <rect id="Rectangle-2" fill="#F94568" x="25" y="26" width="6" height="1"></rect>
+            <rect id="Rectangle-2" fill="#F94568" x="33" y="26" width="6" height="1"></rect>
+            <rect id="Rectangle-2" fill="#F94568" x="25" y="28" width="6" height="1"></rect>
+            <rect id="Rectangle-2" fill="#F94568" x="33" y="28" width="6" height="1"></rect>
+            <rect id="Rectangle-2" fill="#F94568" x="25" y="24" width="6" height="1"></rect>
+            <rect id="Rectangle-2" fill="#F94568" x="33" y="24" width="6" height="1"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

evm_monitor/src/assets/images/desktop-ai-assistant.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="desktop-ai-assistant-a" width="126.7%" height="126.7%" x="-13.3%" y="-13.3%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <radialGradient id="desktop-ai-assistant-c" cx="41.862%" cy="21.344%" r="63.627%" fx="41.862%" fy="21.344%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#B6E6FF"/>
+    </radialGradient>
+    <circle id="desktop-ai-assistant-b" cx="30" cy="30" r="30"/>
+    <linearGradient id="desktop-ai-assistant-d" x1="0%" x2="50%" y1="18.933%" y2="93.757%">
+      <stop offset="0%" stop-color="#0709B6"/>
+      <stop offset="100%" stop-color="#0091A0"/>
+    </linearGradient>
+    <linearGradient id="desktop-ai-assistant-f" x1="100%" x2="37.123%" y1="100%" y2="100%">
+      <stop offset="0%" stop-color="#D4FF00"/>
+      <stop offset="100%" stop-color="#07F"/>
+    </linearGradient>
+    <linearGradient id="desktop-ai-assistant-g" x1="100%" x2="37.123%" y1="100%" y2="100%">
+      <stop offset="0%" stop-color="#D4FF00"/>
+      <stop offset="100%" stop-color="#07F"/>
+    </linearGradient>
+    <linearGradient id="desktop-ai-assistant-h" x1="100%" x2="37.123%" y1="100%" y2="100%">
+      <stop offset="0%" stop-color="#D4FF00"/>
+      <stop offset="100%" stop-color="#07F"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#desktop-ai-assistant-a)" transform="translate(3 2)">
+    <mask id="desktop-ai-assistant-e" fill="#fff">
+      <use xlink:href="#desktop-ai-assistant-b"/>
+    </mask>
+    <use fill="url(#desktop-ai-assistant-c)" xlink:href="#desktop-ai-assistant-b"/>
+    <path fill="url(#desktop-ai-assistant-d)" stroke="#FFF" stroke-opacity=".5" d="M30.5,14.5 C31.6045695,14.5 32.5,15.3954305 32.5,16.5 L32.5,42.5 C32.5,43.6045695 31.6045695,44.5 30.5,44.5 C29.3954305,44.5 28.5,43.6045695 28.5,42.5 L28.5,16.5 C28.5,15.3954305 29.3954305,14.5 30.5,14.5 Z M37.5,18.5 C38.6045695,18.5 39.5,19.3954305 39.5,20.5 L39.5,39.5 C39.5,40.6045695 38.6045695,41.5 37.5,41.5 C36.3954305,41.5 35.5,40.6045695 35.5,39.5 L35.5,20.5 C35.5,19.3954305 36.3954305,18.5 37.5,18.5 Z M23.5,20.5 C24.6045695,20.5 25.5,21.3954305 25.5,22.5 L25.5,37.5 C25.5,38.6045695 24.6045695,39.5 23.5,39.5 C22.3954305,39.5 21.5,38.6045695 21.5,37.5 L21.5,22.5 C21.5,21.3954305 22.3954305,20.5 23.5,20.5 Z M16.5,22.5 C17.6045695,22.5 18.5,23.3954305 18.5,24.5 L18.5,34.5 C18.5,35.6045695 17.6045695,36.5 16.5,36.5 C15.3954305,36.5 14.5,35.6045695 14.5,34.5 L14.5,24.5 C14.5,23.3954305 15.3954305,22.5 16.5,22.5 Z M44.5,24.5 C45.6045695,24.5 46.5,25.3954305 46.5,26.5 L46.5,33.5 C46.5,34.6045695 45.6045695,35.5 44.5,35.5 C43.3954305,35.5 42.5,34.6045695 42.5,33.5 L42.5,26.5 C42.5,25.3954305 43.3954305,24.5 44.5,24.5 Z" mask="url(#desktop-ai-assistant-e)"/>
+    <path fill="url(#desktop-ai-assistant-f)" fill-opacity=".5" d="M59.3386095,40 C54.9528812,51.605768 43.7209553,59.8607645 30.5570449,59.8607645 C24.029874,59.8607645 17.9776923,57.8312273 12.9995652,54.3700005 C29.0445208,50.9210841 39.935529,44.4231194 58.6744035,40.1488638 Z" mask="url(#desktop-ai-assistant-e)"/>
+    <path fill="url(#desktop-ai-assistant-g)" fill-opacity=".5" d="M6.63372527,42.1196951 C28.6784887,40.7677249 32.1918147,49.4688462 52.5268081,51.1040828 C46.933839,57.0436443 39.0111561,60.75 30.2263192,60.75 C17.7412463,60.75 6.99757762,53.2637924 2.20490212,42.5181131 C3.61441308,42.3485597 5.08842629,42.2144069 6.63372527,42.1196951 Z" mask="url(#desktop-ai-assistant-e)"/>
+    <path fill="url(#desktop-ai-assistant-h)" fill-opacity=".5" d="M1.94707293,27.0165923 C25.7247618,26.4017968 35.0901588,43.0318802 52.6282501,50.3167032 C46.9994447,56.5683198 38.834804,60.5 29.75,60.5 C12.7672439,60.5 -1,46.7607383 -1,29.8125 C-1,28.9230592 -0.962083173,28.0424563 -0.887774628,27.1722134 C0.0364956686,27.0937501 0.981355335,27.0415227 1.94707293,27.0165923 Z" mask="url(#desktop-ai-assistant-e)"/>
+  </g>
+</svg>

evm_monitor/src/assets/images/evm-store.svg

+<svg width="642" height="642" xmlns="http://www.w3.org/2000/svg" class="icon">
+ <defs>
+  <style type="text/css"/>
+ </defs>
+ <g>
+  <title>background</title>
+  <rect x="-1" y="-1" width="644" height="644" id="canvas_background" fill="none"/>
+ </g>
+ <g>
+  <title>Layer 1</title>
+  <path d="m546.6176,641.32967l-451.23517,0c-52.32527,0 -95.08571,-42.76044 -95.08571,-95.08571l0,-451.23517c0,-52.32527 42.76044,-95.08571 95.08571,-95.08571l451.23517,0c52.32527,0 95.08571,42.76044 95.08571,95.08571l0,451.23517c0,52.32527 -42.76044,95.08571 -95.08571,95.08571z" fill="#2ecccd" id="svg_1"/>
+  <path d="m321.46431,263.67473c-131.65714,0 -238.55824,-87.2088 -243.05934,-195.79781c0,-3.93846 -3.37582,-7.31428 -7.31429,-7.31428c-3.93846,0 -7.87692,3.37582 -7.31428,7.87692c5.06373,115.34066 118.71648,208.17582 258.25055,208.17583s253.18681,-92.27253 258.25055,-208.17583c0,-3.93846 -3.37583,-7.87692 -7.31429,-7.87692c-3.93846,0 -7.31428,3.37582 -7.31428,7.31428c-5.62638,108.58901 -112.52748,195.79781 -244.18462,195.79781z" fill="#FCFCFC" id="svg_2"/>
+  <path d="m322,324.43956m-14.06593,0a14.06593,14.06593 0 1 0 28.13186,0a14.06593,14.06593 0 1 0 -28.13186,0z" fill="#FCFCFC" id="svg_3"/>
+  <text fill="#ffffff" stroke-width="0" x="183.3125" y="488.8" id="svg_4" font-size="128" font-family="Helvetica, Arial, sans-serif" text-anchor="start" xml:space="preserve">EVM</text>
+ </g>
+</svg>
\ No newline at end of file

evm_monitor/src/assets/images/preferences-system.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <filter id="preference-system-a" width="126.7%" height="126.7%" x="-13.3%" y="-13.3%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="preference-system-b" x1="52.703%" x2="47.944%" y1="103.309%" y2="0%">
+      <stop offset="1.926%" stop-color="#410DD9"/>
+      <stop offset="100%" stop-color="#2F54F8"/>
+    </linearGradient>
+    <circle id="preference-system-c" cx="30" cy="30" r="19.091"/>
+    <filter id="preference-system-d" width="110.5%" height="110.5%" x="-5.2%" y="-5.2%" filterUnits="objectBoundingBox">
+      <feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="1.5"/>
+      <feOffset dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"/>
+    </filter>
+    <path id="preference-system-f" d="M29.2330318,10.9090416 C30.2463392,11.0300148 31.2312089,11.2435883 32.1789378,11.5410591 L31.9801252,13.7624303 C32.7430317,14.0450164 33.4741784,14.3943202 34.1666704,14.8033622 L35.8206861,13.200214 C36.6697012,13.7213313 37.4675189,14.3177491 38.2048407,14.9801689 L36.9976713,17.0226851 C37.5795378,17.6163945 38.1087124,18.2630967 38.5775045,18.9550071 L40.9517555,18.1724343 C41.481992,18.9781362 41.9429585,19.8334759 42.3261807,20.7299791 L40.1887717,22.1580078 C40.4720285,22.9676226 40.6830996,23.8117935 40.8141535,24.6825932 L43.5019544,25.0493494 C43.5906376,25.7391969 43.6363636,26.4424929 43.6363636,27.1564689 C43.6363636,27.3944281 43.6312844,27.6312009 43.6212283,27.866685 L40.897086,28.2381323 C40.8033611,29.1512176 40.6221014,30.0379751 40.3619495,30.8896562 L42.7496213,32.4837745 C42.4502608,33.3536535 42.079629,34.190367 41.6447014,34.9869394 L38.9202275,34.0899431 C38.4317983,34.8865941 37.8658288,35.6294364 37.2329922,36.3076656 L38.7296689,38.8401003 C38.0919795,39.4654935 37.4033115,40.0390934 36.6704744,40.5540908 L34.573679,38.522953 C33.7791544,39.0305353 32.9294922,39.4577203 32.0358424,39.7932212 L32.2991674,42.7336273 C31.4667509,43.0020286 30.6052032,43.2055587 29.720481,43.3382611 L28.6992239,40.580173 C28.2303414,40.6292833 27.754438,40.6544526 27.2727273,40.6544526 C26.7910165,40.6544526 26.3151132,40.6292833 25.8462307,40.580173 L24.824149,43.3381374 C23.9400704,43.2054854 23.0791352,43.0021082 22.2472874,42.7339498 L22.5096121,39.7932212 C21.6159624,39.4577203 20.7663001,39.0305353 19.9717755,38.522953 L17.8750865,40.5541655 C17.1422096,40.0391489 16.4535059,39.4655238 15.8157857,38.8401003 L17.3124624,36.3076656 C16.6796258,35.6294364 16.1136562,34.8865941 15.625227,34.0899431 L12.9007531,34.9869394 C12.4658256,34.190367 12.0951938,33.3536535 11.7958332,32.4837745 L14.183505,30.8896562 C13.9233531,30.0379751 13.7420934,29.1512176 13.6483685,28.2381323 L10.9242262,27.866685 C10.9141702,27.6312009 10.9090909,27.3944281 10.9090909,27.1564689 C10.9090909,26.4424929 10.9548169,25.7391969 11.0435001,25.0493494 L13.7313011,24.6825932 C13.862355,23.8117935 14.0734261,22.9676226 14.3566829,22.1580078 L12.2192739,20.7299791 C12.602496,19.8334759 13.0634626,18.9781362 13.593699,18.1724343 L15.9679501,18.9550071 C16.4367422,18.2630967 16.9659167,17.6163945 17.5477832,17.0226851 L16.3406139,14.9801689 C17.0777816,14.3178875 17.87542,13.7215804 18.7242364,13.2005406 L20.3787842,14.8033622 C21.0712761,14.3943202 21.8024229,14.0450164 22.5653293,13.7624303 L22.3665168,11.5410591 C23.3142456,11.2435883 24.2991153,11.0300148 25.3124227,10.9090416 L26.0766187,12.9741067 C26.4707832,12.9395931 26.8697229,12.9219767 27.2727273,12.9219767 C27.6757317,12.9219767 28.0746714,12.9395931 28.4688358,12.9741067 Z M27.2727273,15.8659578 C21.2478027,15.8659578 16.3636364,20.7501242 16.3636364,26.7750487 C16.3636364,32.7999733 21.2478027,37.6841396 27.2727273,37.6841396 C33.2976518,37.6841396 38.1818182,32.7999733 38.1818182,26.7750487 C38.1818182,20.7501242 33.2976518,15.8659578 27.2727273,15.8659578 Z"/>
+    <filter id="preference-system-e" width="112.2%" height="112.3%" x="-6.1%" y="-3.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+    </filter>
+    <radialGradient id="preference-system-g" cx="50%" cy="50%" r="50.393%" fx="50%" fy="50%" gradientTransform="matrix(0 1 -.95063 0 .975 0)">
+      <stop offset="0%" stop-color="#E2E5ED"/>
+      <stop offset="48.405%" stop-color="#9DA3B5"/>
+      <stop offset="100%" stop-color="#E7ECFF"/>
+    </radialGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" filter="url(#preference-system-a)" transform="translate(2 2)">
+    <circle cx="30" cy="30" r="30" fill="url(#preference-system-b)"/>
+    <use fill="#000" fill-opacity=".5" xlink:href="#preference-system-c"/>
+    <use fill="#000" filter="url(#preference-system-d)" xlink:href="#preference-system-c"/>
+    <g transform="translate(2.727 2.727)">
+      <use fill="#000" filter="url(#preference-system-e)" xlink:href="#preference-system-f"/>
+      <path fill="#585F6C" stroke="#FFF" stroke-linejoin="square" stroke-opacity=".05" d="M29.5634166,11.4569353 L28.8053327,13.505484 L28.425222,13.4722009 C28.0435935,13.438785 27.6592007,13.4219767 27.2727273,13.4219767 C26.8862538,13.4219767 26.5018611,13.438785 26.1202326,13.4722009 L25.7401219,13.505484 L24.9820379,11.4569353 C24.2765335,11.5589433 23.5816383,11.708018 22.900887,11.9027538 L23.0974099,14.0985421 L22.7390017,14.2312991 C22.0084939,14.5018844 21.3040108,14.8375598 20.6330761,15.2338684 L20.3047632,15.4277967 L18.6585703,13.8330687 C18.073065,14.2124273 17.5130189,14.630062 16.9821688,15.0829689 L18.1734576,17.0986153 L17.9048802,17.372659 C17.3429997,17.9459757 16.83305,18.5695735 16.3818876,19.2354634 L16.1700735,19.5480889 L13.80537,18.7686631 C13.4483617,19.3406211 13.128102,19.934845 12.8467848,20.5479003 L14.9565632,21.9574686 L14.8286318,22.3231267 C14.5531377,23.1105538 14.3510028,23.924638 14.225733,24.7570043 L14.1699942,25.1273658 L11.495292,25.4923348 C11.4379709,26.0423962 11.4090909,26.5975952 11.4090909,27.1564689 C11.4090909,27.247235 11.4098527,27.3379083 11.4113746,27.4284829 L14.1055971,27.7958505 L14.1457551,28.1870774 C14.235283,29.0592745 14.4084364,29.9144794 14.661694,30.74359 L14.7702846,31.0990923 L12.398093,32.6828753 C12.6137851,33.2631859 12.8633368,33.8297763 13.1452735,34.3800323 L15.8446827,33.4912882 L16.0514897,33.8286002 C16.5211295,34.5946048 17.0663712,35.3110169 17.6780377,35.9665576 L17.9332204,36.2400442 L16.447993,38.7531063 C16.8860755,39.1622091 17.3468909,39.5463511 17.8281202,39.9035118 L19.9078114,37.8887663 L20.2409586,38.1015975 C21.0113225,38.5937447 21.8301752,39.0040663 22.6853494,39.3251224 L23.0414288,39.4588045 L22.7812525,42.3754486 C23.3443211,42.5413531 23.917367,42.6759528 24.4983501,42.7784081 L25.5122729,40.0424596 L25.8983152,40.0828932 C26.3526788,40.1304828 26.8112071,40.1544526 27.2727273,40.1544526 C27.7342475,40.1544526 28.1927757,40.1304828 28.6471393,40.0828932 L29.0332922,40.042448 L30.0464018,42.778532 C30.6279231,42.6760088 31.2014936,42.5412821 31.7650673,42.3751934 L31.5038974,39.4588527 L31.8601052,39.3251224 C32.7152793,39.0040663 33.534132,38.5937447 34.3044959,38.1015975 L34.6376282,37.8887759 L36.7174234,39.9034457 C37.1986205,39.5463037 37.659406,39.1621839 38.0974616,38.7531062 L36.6122342,36.2400442 L36.8674169,35.9665576 C37.4790834,35.3110169 38.0243251,34.5946048 38.4939648,33.8286002 L38.7007718,33.4912882 L41.400181,34.3800323 C41.6821178,33.8297763 41.9316694,33.2631859 42.1473615,32.6828753 L39.7751699,31.0990923 L39.8837605,30.74359 C40.1370181,29.9144794 40.3101716,29.0592745 40.3996994,28.1870774 L40.4398575,27.7958505 L43.13408,27.4284829 C43.1356019,27.3379083 43.1363636,27.247235 43.1363636,27.1564689 C43.1363636,26.5975952 43.1074837,26.0423962 43.0501626,25.4923348 L40.3754603,25.1273658 L40.3197215,24.7570043 C40.1944518,23.924638 39.9923169,23.1105538 39.7168228,22.3231267 L39.5888914,21.9574686 L41.6986697,20.5479003 C41.4173526,19.934845 41.0970929,19.3406211 40.7400845,18.7686631 L38.3753811,19.5480889 L38.163567,19.2354634 C37.7124046,18.5695735 37.2024549,17.9459757 36.6405743,17.372659 L36.371997,17.0986153 L37.5632857,15.0829689 C37.032305,14.6299505 36.472114,14.2122218 35.8864523,13.8327889 L34.2407808,15.4278495 L33.9123784,15.2338684 C33.2414437,14.8375598 32.5369606,14.5018844 31.8064528,14.2312991 L31.4480447,14.0985421 L31.6445676,11.9027538 C30.9638163,11.708018 30.2689211,11.5589433 29.5634166,11.4569353 Z M27.2727273,15.3659578 C33.5737942,15.3659578 38.6818182,20.4739818 38.6818182,26.7750487 C38.6818182,33.0761156 33.5737942,38.1841396 27.2727273,38.1841396 C20.9716604,38.1841396 15.8636364,33.0761156 15.8636364,26.7750487 C15.8636364,20.4739818 20.9716604,15.3659578 27.2727273,15.3659578 Z"/>
+      <path fill="url(#preference-system-g)" stroke="#FFF" stroke-opacity=".3" d="M32.2412806,0.521637822 C31.8115099,0.424068949 31.3772129,0.665744133 31.2335905,1.08239169 L30.1189264,4.31602393 C29.8482225,5.10133403 29.0904581,5.61267912 28.2608911,5.56984047 C27.8567631,5.54896192 27.5266715,5.53857521 27.2719086,5.53857521 C27.0171501,5.53857521 26.6870657,5.54896155 26.2829473,5.56983937 C25.4534066,5.61269563 24.6956447,5.10136745 24.4249011,4.31605401 L23.3102266,1.08239169 C23.1666042,0.665744133 22.7323072,0.424068949 22.3025365,0.521637822 L20.5913681,0.910116487 C20.1635373,1.00724494 19.8765054,1.40970273 19.924012,1.8458406 L20.3027555,5.32292595 C20.3883986,6.10917964 19.9684348,6.86385692 19.2551317,7.20551199 L17.2843086,8.14948882 C16.5661302,8.493479 15.7087354,8.34315344 15.1504188,7.77535762 L12.7337996,5.31770814 C12.4241982,5.00285025 11.926954,4.97225157 11.5810842,5.24677404 L10.1999516,6.34300138 C9.85776778,6.61459827 9.77229114,7.0989515 10.0008397,7.47126887 L11.8128359,10.4231039 C12.2268212,11.0975073 12.1697648,11.9598175 11.6705312,12.5737959 L10.2010545,14.3810203 C9.70347171,14.9929686 8.87454642,15.2254255 8.13132361,14.9614383 L4.88827129,13.8095304 C4.47604774,13.6631117 4.01944891,13.8480385 3.82529318,14.2400464 L3.04475873,15.8159759 C2.84959543,16.2100182 2.98166012,16.6877877 3.35149504,16.9256536 L6.20441597,18.7605605 C6.87481971,19.1917426 7.19678024,20.001551 7.00544435,20.7753403 L6.40103394,23.219661 C6.2144998,23.9740313 5.57945857,24.5334775 4.80759092,24.6234214 L1.32930049,25.028738 C0.908884085,25.0777281 0.585924449,25.4241844 0.566532094,25.8470011 L0.500906929,27.2778439 C0.499956936,27.2985569 0.499753185,27.3192973 0.500296073,27.3400249 L0.518815747,28.0471115 C0.523667676,28.2323596 0.66396853,28.3858639 0.848034666,28.4073127 L4.6273713,28.8477095 C5.43059109,28.9413067 6.08179698,29.5422197 6.23951335,30.3353452 L6.76313503,32.9685386 C6.91245694,33.71945 6.58733468,34.4852899 5.94340762,34.8994431 L2.97015669,36.8117424 C2.61034457,37.0431619 2.47418137,37.5031257 2.65003646,37.893119 L3.3276223,39.395799 C3.51236879,39.8055107 3.98046826,40.0050458 4.40398433,39.8546161 L7.52823436,38.7449059 C8.29546104,38.4723927 9.15078464,38.7294773 9.64062629,39.3798275 L11.3213125,41.6112314 C11.7821584,42.2230847 11.8216856,43.054611 11.4209561,43.7074198 L9.55168008,46.7525667 C9.32747765,47.117804 9.40502696,47.5922079 9.73385986,47.8670423 L10.935248,48.8711473 C11.2804887,49.1596951 11.7894253,49.1348314 12.1048955,48.8140051 L14.4668875,46.4119104 C15.0353589,45.8337873 15.9123869,45.6895427 16.6360726,46.0551451 L19.1776713,47.3391479 C19.8707368,47.6892811 20.2740818,48.4324462 20.1899998,49.204368 L19.8052646,52.7364609 C19.7580876,53.1695727 20.0408929,53.5700054 20.4648458,53.6703821 L21.9330543,54.0180007 C22.3648757,54.1202404 22.8039021,53.8785834 22.9485193,53.4590498 L24.0614416,50.2304705 C24.3330134,49.442643 25.0945911,48.9308537 25.9266309,48.9770413 L27.2240407,49.0490621 C27.2559281,49.0508322 27.287889,49.0508322 27.3197764,49.0490621 L28.6171862,48.9770413 C29.449226,48.9308537 30.2108037,49.442643 30.4823755,50.2304705 L31.5952978,53.4590498 C31.7399151,53.8785834 32.1789414,54.1202404 32.6107628,54.0180007 L34.0789713,53.6703821 C34.5029242,53.5700054 34.7857295,53.1695727 34.7385525,52.7364609 L34.3538173,49.204368 C34.2697353,48.4324462 34.6730803,47.6892811 35.3661458,47.3391479 L37.9077445,46.0551451 C38.6314302,45.6895427 39.5084582,45.8337873 40.0769296,46.4119104 L42.4389216,48.8140051 C42.7543918,49.1348314 43.2633284,49.1596951 43.6085691,48.8711473 L44.8099572,47.8670423 C45.1387901,47.5922079 45.2163395,47.117804 44.992137,46.7525667 L43.122861,43.7074198 C42.7221316,43.054611 42.7616587,42.2230847 43.2225046,41.6112314 L44.9031908,39.3798275 C45.3930325,38.7294773 46.2483561,38.4723927 47.0155827,38.7449059 L50.1398328,39.8546161 C50.5633488,40.0050458 51.0314483,39.8055107 51.2161948,39.395799 L51.8937806,37.893119 C52.0696357,37.5031257 51.9334725,37.0431619 51.5736604,36.8117424 L48.6004095,34.8994431 C47.9564824,34.4852899 47.6313602,33.71945 47.7806821,32.9685386 L48.3043038,30.3353452 C48.4620201,29.5422197 49.113226,28.9413067 49.9164458,28.8477095 L53.6957824,28.4073127 C53.8798486,28.3858639 54.0201494,28.2323596 54.0250014,28.0471115 L54.043521,27.3400249 C54.0440639,27.3192973 54.0438602,27.2985569 54.0429102,27.2778439 L53.977285,25.8470011 C53.9578927,25.4241844 53.634933,25.0777281 53.2145166,25.028738 L49.7362262,24.6234214 C48.9643585,24.5334775 48.3293173,23.9740313 48.1427832,23.219661 L47.5383728,20.7753403 C47.3470369,20.001551 47.6689974,19.1917426 48.3394011,18.7605605 L51.1923221,16.9256536 C51.562157,16.6877877 51.6942217,16.2100182 51.4990584,15.8159759 L50.7185239,14.2400464 C50.5243682,13.8480385 50.0677694,13.6631117 49.6555458,13.8095304 L46.4124935,14.9614383 C45.6692707,15.2254255 44.8403454,14.9929686 44.3427626,14.3810203 L42.8732859,12.5737959 C42.3740523,11.9598175 42.3169959,11.0975073 42.7309812,10.4231039 L44.5429774,7.47126887 C44.771526,7.0989515 44.6860493,6.61459827 44.3438655,6.34300138 L42.9627329,5.24677404 C42.6168631,4.97225157 42.1196189,5.00285025 41.8100175,5.31770814 L39.3933983,7.77535762 C38.8350817,8.34315344 37.9776869,8.493479 37.2595085,8.14948882 L35.2886854,7.20551199 C34.5753823,6.86385692 34.1554185,6.10917964 34.2410616,5.32292595 L34.6198051,1.8458406 C34.6673117,1.40970273 34.3802798,1.00724494 33.952449,0.910116487 L32.2412806,0.521637822 Z M23.5724369,30.0909091 C26.2258794,34.6868062 26.0629362,40.3052425 23.2819792,44.713212 L23.0876899,45.0211711 L22.7349658,44.9307676 C14.7374418,42.8809953 9.04545455,35.6448753 9.04545455,27.2727273 C9.04545455,25.9896531 9.1781065,24.7233954 9.43896781,23.488202 L9.51432362,23.1313879 L9.87710033,23.0941341 C15.3770985,22.5293353 20.7595812,25.2189001 23.5724369,30.0909091 Z M44.6678616,23.0941357 L45.0310188,23.1314345 L45.1060908,23.4886999 L45.1378361,23.6398437 C45.377989,24.8270495 45.5,26.0421877 45.5,27.2727273 C45.5,35.6447934 39.8081071,42.8809085 31.8110353,44.9303907 L31.4583679,45.020772 L31.2640686,44.7128906 C28.4825968,40.3054468 28.3194888,34.6869558 30.9730176,30.0909091 C33.7858527,25.2189358 39.1683497,22.529297 44.6678616,23.0941357 Z M27.2727605,24.0435062 C29.055134,24.0435062 30.5000332,25.4884054 30.5000332,27.2707789 C30.5000332,29.0531524 29.055134,30.4980517 27.2727605,30.4980517 C25.490387,30.4980517 24.0454878,29.0531524 24.0454878,27.2707789 C24.0454878,25.4884054 25.490387,24.0435062 27.2727605,24.0435062 Z M27.2727273,9.04545455 C32.2003667,9.04545455 36.8176323,11.0106708 40.2180943,14.4410873 L40.452862,14.6779232 L40.324417,14.9856714 C38.1444939,20.2086626 33.0295391,23.6818182 27.2727273,23.6818182 C21.5159499,23.6818182 16.4009587,20.2086869 14.2214089,14.9860792 L14.092994,14.6783731 L14.3277014,14.4415484 C17.727819,11.0107599 22.3449592,9.04545455 27.2727273,9.04545455 Z"/>
+    </g>
+  </g>
+</svg>

evm_monitor/src/components/AppListView.vue

+<template>
+  <div>
+    <!-- <el-row  type="flex"  justify="center"> -->
+    <!-- <el-col :span="24" class="wrapList"> -->
+    <div>
+      <el-row class="wrapList-top" type="flex" justify="end">
+        <!-- <el-button type="primary" size="small" @click="test">测试</el-button> -->
+        <el-button-group class="type-group">
+          <el-button
+            :class="{ 'button-state-hover': isHover }"
+            @click="handleSwitchList"
+            size="small"
+            >缩略图</el-button
+          >
+          <el-button @click="handleSwitchTable" size="small">列表</el-button>
+        </el-button-group>
+      </el-row>
+      <div v-show="isSwitch" class="wrapList-table">
+        <el-table
+          highlight-current-row
+          :data="
+            layoutArr.filter(
+              (data) =>
+                !nameSearch ||
+                data.name.toLowerCase().includes(nameSearch.toLowerCase())
+            )
+          "
+          :header-cell-style="{ background: '#C6E2FF', color: '#303133' }"
+        >
+          <el-table-column type="selection" width="55"></el-table-column>
+          <el-table-column
+            label="项目英文名"
+            prop="name"
+            width="200"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-popover trigger="hover" placement="top">
+                <p>{{ scope.row.name }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="项目英文名"
+            prop="name"
+            sortable
+            align="right"
+          ></el-table-column>
+          <el-table-column
+            label="项目中文名"
+            prop="name_zh"
+            sortable
+            align="right"
+          ></el-table-column>
+          <el-table-column
+            label="项目端口"
+            prop="port"
+            sortable
+            align="right"
+          ></el-table-column>
+          <el-table-column
+            label="项目提供者"
+            prop="provider"
+            sortable
+            align="right"
+          ></el-table-column>
+          <el-table-column
+            label="数据库文件名"
+            prop="dbfilename"
+            sortable
+            align="right"
+          ></el-table-column>
+        </el-table>
+      </div>
+      <div v-show="!isSwitch">
+        <!-- :row-height="30" -->
+        <!-- :is-draggable="true" -->
+        <!-- :is-resizable="true" -->
+        <!-- :is-mirrored="false" -->
+        <!-- :vertical-compact="true" -->
+        <!-- :use-css-transforms="true" -->
+        <grid-layout
+          :layout.sync="layoutArr"
+          :col-num="12"
+          :row-height="35"
+          :margin="[15, 15]"
+          :responsive="true"
+        >
+          <grid-item
+            v-for="item in layoutArr"
+            :x="item.x"
+            :y="item.y"
+            :w="item.w"
+            :h="item.h"
+            :i="item.i"
+            dragIgnoreFrom="i"
+            :key="item.i"
+          >
+            <!-- <div class="card-item-mark">模板 {{Number(item.i)+1}}</div> -->
+            <slot name="card" :cardItem="item"></slot>
+          </grid-item>
+        </grid-layout>
+      </div>
+    </div>
+    <!-- </el-col> -->
+    <!-- </el-row> -->
+
+    <el-row class="pageArea" type="flex" justify="end">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[10]"
+        :page-size="10"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="index"
+      ></el-pagination>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import VueGridLayout from "vue-grid-layout";
+export default {
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+  },
+  props: {
+    layout: {
+      type: Array,
+    },
+    nameSearch: {
+      type: String,
+    },
+  },
+  computed: {
+    layoutArr: {
+      get() {
+        return this.layout;
+      },
+      set() {},
+    },
+  },
+  mounted() {
+    // const gridLayout = this.layout;
+    // console.log("gridLayout", gridLayout);
+    // this.index = gridLayout.length;
+    // this.cacheArr = gridLayout;
+    // console.log("card content", this.content);
+  },
+  data() {
+    return {
+      isSwitch: false,
+      isHover: true,
+
+      // cacheArr: [],
+      index: 0,
+      currentPage: 1,
+    };
+  },
+  methods: {
+    test() {
+      let xcoor = 2 * Math.round(Math.random() * 5);
+      console.log(xcoor, "xcoor");
+      let ycoor = Math.ceil(Math.random() * 10);
+      console.log(ycoor, "xcoor");
+      let item = {
+        x: xcoor,
+        y: ycoor,
+        w: 2,
+        h: 8,
+        i: this.index + "",
+        name: "c xs",
+        exporter_type: "process_exporter",
+        description: "description1",
+        image: "summer.jpg",
+      };
+      console.log("item", item);
+      this.index++;
+      // this.layout.push(item);
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      this.cacheArr = this.layout.filter((item, index) => {
+        return index > 10 * (val - 1) - 1 && index <= 10 * val - 1;
+      });
+      console.log(`this.cacheArr:`, this.cacheArr);
+      console.log(`当前页: ${val}`);
+    },
+
+    handleSwitchTable() {
+      this.isSwitch = true;
+      console.log("table click");
+    },
+    handleSwitchList() {
+      this.isSwitch = false;
+      this.isHover = false;
+      console.log("list click");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-table {
+  margin-bottom: 20px;
+  width: 100%;
+  table-layout: auto;
+}
+.vue-grid-item {
+  img {
+    display: block;
+    width: 100%;
+    height: 90%;
+  }
+}
+.wrapList-top {
+  padding: 15px 15px 0;
+}
+.wrapList-table {
+  padding: 15px 15px 0;
+}
+.button-state-hover {
+  color: #409eff;
+  border-color: #c6e2ff;
+  background-color: #ecf5ff;
+}
+.card {
+  img {
+    display: block;
+    width: 100%;
+    padding-bottom: 10px;
+  }
+  .card-word {
+    padding: 10px 0;
+    span {
+      padding-left: 10px;
+      font-size: 14px;
+    }
+    em {
+      font-style: normal;
+    }
+  }
+}
+</style>

evm_monitor/src/components/BaseContextMenu.vue

+<template>
+  <div class="context-module" v-show="contextVisible" @click="closeContextMenu">
+    <div class="context-wrap">
+      <el-popover
+        v-model="contextVisible"
+        placement="right-start"
+        width="200"
+        trigger="manual"
+        transition="el-zoom-in-left"
+        popover-class="content-popover-area"
+      >
+        <div @click="handleGetBig">大图标</div>
+        <div @click="handleGetMedium">中等图标</div>
+        <div @click="handleGetSmall">小图标</div>
+        <div
+          slot="reference"
+          class="context-module-button"
+          :style="{
+            left: eventPosition.left + 'px',
+            top: eventPosition.top + 'px',
+          }"
+        ></div>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    contextVisible: {
+      type: Boolean,
+    },
+    eventPosition: {
+      type: Object,
+    },
+  },
+  mounted() {
+    console.log("this.contextVisible", this.contextVisible);
+  },
+  data() {
+    return {
+      labelPosition: "right",
+    };
+  },
+  methods: {
+    closeContextMenu() {
+      console.log("关闭");
+      this.$emit("changeVisible", false);
+    },
+    handleGetBig() {
+      console.log("大图标关闭");
+      this.$emit("changeSize", "300");
+      this.$emit("changeVisible", false);
+    },
+    handleGetMedium() {
+      console.log("中等图标关闭");
+      this.$emit("changeSize", "200");
+      this.$emit("changeVisible", false);
+    },
+    handleGetSmall() {
+      console.log("小图标关闭");
+      this.$emit("changeSize", "100");
+      this.$emit("changeVisible", false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.context-module {
+  position: fixed;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  .context-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  .context-module-button {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+  }
+}
+
+.content-popover-area {
+  transform-origin: 0 0 !important;
+}
+.content-popover-area > div {
+  font-size: 12px;
+  cursor: pointer;
+  line-height: 26px;
+  &:hover {
+    color: skyblue;
+  }
+}
+</style>
+<style lang="scss">
+.el-popover {
+  background-color: skyblue;
+  div {
+    font-size: 12px;
+    cursor: pointer;
+    line-height: 26px;
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+</style>

evm_monitor/src/components/Breadcrumb/index.vue

+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect" :class="{'no-redirect-left': appTheme=='one'}">{{ item.meta.title }}</span>
+        <a class="first-link" v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import {mapState } from 'vuex'
+import pathToRegexp from 'path-to-regexp'
+
+export default {
+  computed: {
+    ...mapState('user',['appTheme']),
+  },
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      const first = matched[0]
+
+      if (!this.isDashboard(first)) {
+        matched = [{ path: '/dashboard', meta: { title: '' }}].concat(matched)
+      }
+
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(this.pathCompile(path))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  // line-height: 50px;
+  line-height: 40px;
+  // margin-left: 8px;
+
+  .no-redirect {
+    // color: #97a8be;
+    color: #606266;
+    cursor: text;
+  }
+  .no-redirect-left{
+    margin-left: 20px;
+  }
+  >>> .el-breadcrumb__separator{
+    margin-right: 0;
+  }
+  .first-link{
+    margin-left: 20px;
+    color: #303133;
+  }
+}
+</style>

evm_monitor/src/components/Card.vue

+<template>
+  <div class="card">
+    <el-card shadow="hover" :body-style="{ padding: '0px' }">
+      <!-- <img  :src="require(`@/assets/images/${content.image}`)" class="image" /> -->
+      <img
+        :src="`https://picsum.photos/id/${content.image}/1024/768`"
+        class="image"
+      />
+      <el-row class="card-content">
+        <el-col class="card-content-left">
+          <div class="card-word">
+            <span>项目英文名：</span>
+            <em v-if="isEdit == false">{{ content.name }}</em
+            ><el-input v-model="content.name" v-if="isEdit == true"></el-input>
+          </div>
+          <div class="card-word">
+            <span>项目中文名：</span>
+            <em>{{ content.name_zh }}</em>
+          </div>
+          <div class="card-word">
+            <span>项目端口：</span>
+            <em>{{ content.port }}</em>
+          </div>
+          <div class="card-word">
+            <span>项目提供者：</span>
+            <em>{{ content.provider }}</em>
+          </div>
+          <div class="card-word">
+            <span>数据库文件名：</span>
+            <em>{{ content.dbfilename }}</em>
+          </div>
+        </el-col>
+        <el-col class="card-content-right">
+          <i :class="isEditIcon" @click="handleEdit"></i>
+          <i class="el-icon-view" @click="handleView"></i>
+          <i class="el-icon-delete" @click="handleDelete"></i>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    content: {
+      type: Object,
+    },
+  },
+  mounted() {
+    // console.log("card cardIndex", this.cardIndex);
+  },
+  data() {
+    return {
+      labelPosition: "right",
+      formLabelAlign: {
+        name: "",
+        region: "",
+        type: "",
+      },
+      isEdit: false,
+      isEditIcon: "el-icon-edit-outline",
+    };
+  },
+  methods: {
+    handleEdit() {
+      if (this.isEdit == true) {
+        this.updateItem(this.content);
+      }
+      this.isEdit = !this.isEdit;
+      this.isEditIcon =
+        this.isEditIcon == "el-icon-success"
+          ? "el-icon-edit-outline"
+          : "el-icon-success";
+      console.log("handleEdit");
+    },
+    handleView() {
+      console.log("handleView");
+    },
+    handleDelete() {
+      console.log("handleDelete");
+      console.log(this.content);
+      this.deleteItem(this.content);
+    },
+    deleteItem(item) {
+      var url = this.$client.apiUrlprefix() + "/project/";
+      this.$axios.post(url + "delete", item, (res) => {
+        console.log(res);
+        this.$emit("deleteGrid");
+      });
+    },
+  },
+  updateItem(item) {
+    var url = this.$client.apiUrlprefix() + "/project/";
+    this.$axios.post(url + "update", item, (res) => {
+      console.log(res);
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+  height: 100%;
+  .el-card {
+    height: 100%;
+  }
+  .el-card.is-hover-shadow {
+    border: 1px solid #bbb;
+    &:hover {
+      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
+    }
+  }
+  img {
+    display: block;
+    width: 100%;
+    padding-bottom: 10px;
+  }
+  .card-content-left {
+    width: calc(100% - 30px);
+  }
+  .card-content-right {
+    width: 30px;
+    text-align: center;
+    i {
+      cursor: pointer;
+      display: block;
+      padding: 10px 0;
+      font-size: 18px;
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+  .card-word {
+    position: relative;
+    padding: 7px 0;
+    padding-left: 105px;
+    span {
+      position: absolute;
+      left: 0;
+      top: 12px;
+      padding-left: 10px;
+      // display: inline-block;
+      // width: 100px;
+      // text-align: right;
+      font-size: 14px;
+    }
+    em {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-style: normal;
+    }
+  }
+}
+</style>

evm_monitor/src/components/DateRangePicker/index.vue

+<script>
+import { DatePicker, DatePickerOptions } from 'element-ui'
+import { calendarShortcuts } from '@/utils/shortcuts'
+
+export default {
+  name: 'DateRangePicker',
+  mixins: [DatePicker],
+  props: {
+    type: {
+      type: String,
+      default: 'daterange'
+    },
+    valueFormat: {
+      type: String,
+      default: 'yyyy-MM-dd HH:mm:ss'
+    },
+    defaultTime: {
+      type: Array,
+      default: () => ['00:00:00', '23:59:59']
+    },
+    pickerOptions: {
+      type: DatePickerOptions,
+      default: () => {
+        return { shortcuts: calendarShortcuts }
+      }
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    rangeSeparator: {
+      type: String,
+      default: ':'
+    },
+    startPlaceholder: {
+      type: String,
+      default: '开始日期'
+    },
+    endPlaceholder: {
+      type: String,
+      default: '结束日期'
+    }
+  }
+}
+</script>
\ No newline at end of file

evm_monitor/src/components/FileExplorer/FileExplorer.vue

+<template>
+  <div>
+    <el-row class="header">
+      <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
+        <el-breadcrumb-item v-for="item in breadcrumb" :key="item.dir" :index="item.dir" :to="buildQuery(item.dir)">{{ item.name }}</el-breadcrumb-item>
+      </el-breadcrumb>
+      <span class="loadtips" style="float: right">{{ loadedtips }}</span>
+    </el-row>
+
+    <!-- explorer -->
+    <GridExplorer v-model="rows" :loading="loading" :moreButtons="moreButtons" @on-click="onClick" v-if="layout == 'grid'" />
+    <ListExplorer v-model="rows" :loading="loading" :rowButtons="rowButtons" :moreButtons="moreButtons" @on-click="onClick" @scroll-end="onScrollEnd" @selection-change="onSelectionChange" v-else />
+
+    <!-- viewer -->
+    <MediaViewer v-model="selected" :visible="mediavv" @close="mediavv = false"></MediaViewer>
+    <PictureViewer ref="photoView"></PictureViewer>
+  </div>
+</template>
+
+<script>
+import GridExplorer from "./explorer/GridExplorer";
+import ListExplorer from "./explorer/ListExplorer";
+import { MediaViewer, PictureViewer } from "../FileViewer";
+export default {
+  components: {
+    GridExplorer,
+    ListExplorer,
+    MediaViewer,
+    PictureViewer,
+  },
+  props: {
+    layout: {
+      type: String,
+      default: "list",
+    },
+    dataLoader: Function,
+    linkLoader: Function,
+    rowButtons: Array,
+    moreButtons: Array,
+    rootDir: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      currentDir: "",
+      loading: false,
+      offset: 0,
+      limit: 100,
+      rows: [],
+      total: 0,
+      selection: Array,
+
+      selected: {},
+      mediavv: false,
+    };
+  },
+  watch: {
+    $route: "onRouteChange",
+    layout(nv, ov) {
+      if (nv != ov) {
+        this.listRefresh();
+      }
+    },
+  },
+  computed: {
+    breadcrumb() {
+      let root = [{ name: "全部文件", dir: "" }];
+      if (!this.currentDir) {
+        return root;
+      }
+
+      let parentDir = "";
+      this.currentDir.split("/").forEach((item) => {
+        if (item == "") return;
+
+        root.push({ name: item, dir: parentDir + item + "/" });
+        parentDir += `${item}/`;
+      });
+      return root;
+    },
+    loadedtips() {
+      let loadedNum = this.rows.length;
+      if (loadedNum == this.total) {
+        return `已全部加载，共${this.total}个`;
+      }
+
+      return `已加载${loadedNum}个，共${this.total}个`;
+    },
+  },
+  methods: {
+    onRouteChange(newVal) {
+      if (this.currentDir != newVal.query.dir) {
+        this.currentDir = newVal.query.dir; // change the current direction when the route changed
+      }
+
+      this.listRefresh();
+    },
+    onSelectionChange(selection) {
+      this.$emit("selection-change", selection);
+    },
+    onScrollEnd() {
+      if (this.total != 0 && this.rows.length == this.total) {
+        console.log("no more");
+        return;
+      }
+
+      this.listRefresh(this.offset, this.limit);
+    },
+    listRefresh(offset, limit) {
+      if (!offset) {
+        offset = 0;
+      }
+
+      if (!limit) {
+        limit = this.limit;
+      }
+
+      this.loading = true;
+      let dir = this.currentDir ? this.currentDir : "";
+      this.dataLoader(dir, offset, limit).then((data) => {
+        if (offset == 0) {
+          this.rows = data.list;
+          this.offset = limit;
+        } else {
+          this.rows = this.rows.concat(data.list);
+          this.offset += this.limit;
+        }
+
+        this.total = data.total;
+        this.loading = false;
+      });
+    },
+    buildQuery(dir) {
+      if (dir.startsWith(this.rootDir)) {
+        dir = dir.replace(this.rootDir, "");
+      }
+
+      let query = !dir ? {} : { dir: dir };
+      return { query: query };
+    },
+    onClick(type, obj) {
+      if (type == "folder") {
+        this.$router.push(this.buildQuery(obj.fullpath));
+        return;
+      }
+
+      this.linkLoader(obj).then((link) => {
+        switch (type) {
+          case "media":
+            this.selected = obj;
+            this.selected.url = link;
+            this.mediavv = true;
+            break;
+          case "image":
+            this.$refs.photoView.open(link);
+            break;
+          case "doc":
+            window.open("http://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(link));
+            break;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.currentDir = this.$route.query.dir ? this.$route.query.dir : "";
+
+    // this.listRefresh();
+  },
+};
+</script>
+
+<style scoped>
+@import url("./iconfont.css");
+
+.header {
+  display: flex;
+  flex-flow: row;
+}
+
+.bread {
+  flex: 1;
+}
+
+.loadtips {
+  width: 200px;
+  text-align: right;
+  font-size: 12px;
+  color: #7c7c7c;
+}
+</style>
\ No newline at end of file

evm_monitor/src/components/FileExplorer/explorer/GridExplorer.vue

+<template>
+  <div class="explorer">
+    <div class="explorer-item" v-for="item in data" :key="item.alias" @click="onNameClick(item)">
+      <i v-if="item.dirtype" class="matter-icon el-icon-folder" style="color: #ffc402"></i>
+      <i v-else :class="`iconfont ${type2icon(item.type)}`"></i>
+      <p>{{ item.name }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixin from "./mixin";
+export default {
+  mixins: [mixin],
+  data() {
+    return {};
+  },
+  methods: {
+    onSelectionChange(selection) {
+      this.$emit("selection-change", selection);
+    },
+    onSelectable(row) {
+      if (!row.dirtype) return true;
+    },
+    handleCommand(command) {
+      command.action(command.row);
+    },
+    onScrollEnd() {
+      this.$emit("scroll-end")
+    },
+  },
+};
+</script>
+
+<style scoped>
+.explorer {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.explorer-item {
+  width: 80px;
+  padding: 15px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.explorer-item:hover {
+  background: #f0f6fd;
+  border-radius: 5px;
+}
+
+.explorer-item i {
+  font-size: 55px;
+}
+
+.explorer-item p {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>s
\ No newline at end of file

evm_monitor/src/components/FileExplorer/explorer/ListExplorer.vue

+<template>
+  <el-table style="width: 100%" height="calc(100% - 55px)" tooltip-effect="dark" size="small" :data="data" v-loading="loading" v-el-table-infinite-scroll="onScrollEnd" @selection-change="onSelectionChange" highlight-current-row>
+    <el-table-column type="selection" width="30" :selectable="onSelectable"></el-table-column>
+    <el-table-column prop="name" label="名称" min-width="200" show-overflow-tooltip sortable>
+      <template slot-scope="scope">
+        <i v-if="scope.row.dirtype" class="matter-icon el-icon-folder" style="color: #ffc402"></i>
+        <i v-else :class="`iconfont matter-icon ${type2icon(scope.row.type)}`"></i>
+        <el-link :underline="false" class="matter-title" href="Javascript: void(0);">
+          <span @click="onNameClick(scope.row)">{{ scope.row.name }}</span>
+        </el-link>
+      </template>
+    </el-table-column>
+    <el-table-column width="150">
+      <template slot-scope="scope">
+        <div style="float: right; vertical-align: super" class="operation">
+          <el-link v-for="item in rowButtons" :key="item.name" v-show="!item.shown || item.shown(scope.row)" type="primary" :underline="false">
+            <i :class="`${item.icon} el-icon--right`" @click="item.action(scope.row)"></i>
+          </el-link>
+
+          <el-dropdown v-show="moreButtons && moreButtons.length > 0" trigger="click" @command="handleCommand">
+            <el-link type="primary" class="el-dropdown-link" :underline="false">
+              <i class="el-icon-more el-icon--right"></i>
+            </el-link>
+
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="item in moreButtons" :key="item.name" :command="{ action: item.action, row: scope.row }">
+                {{ item.title }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="size" label="大小" width="180">
+      <template slot-scope="scope">
+        <div v-if="scope.row.dirtype">-</div>
+        <div v-else>{{ scope.row.size }}</div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="updated" label="最近更新" width="180">
+      <template slot-scope="scope">{{ scope.row.updated | moment }}</template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import mixin from "./mixin";
+import elTableInfiniteScroll from "el-table-infinite-scroll";
+export default {
+  mixins: [mixin],
+  directives: {
+    "el-table-infinite-scroll": elTableInfiniteScroll,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onSelectionChange(selection) {
+      this.$emit("selection-change", selection);
+    },
+    onSelectable(row) {
+      if (!row.dirtype) return true;
+    },
+    handleCommand(command) {
+      command.action(command.row);
+    },
+    onScrollEnd() {
+      this.$emit("scroll-end");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.matter-icon {
+  font-size: 35px;
+}
+.matter-title {
+  display: inline;
+  margin-left: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  top: -8px;
+  position: relative;
+}
+
+.el-table__row .operation {
+  display: none;
+}
+.el-table__row:hover .operation {
+  display: block;
+}
+.operation .el-link {
+  font-size: 20px !important;
+  margin: 0 2px;
+}
+</style>
\ No newline at end of file

evm_monitor/src/components/FileExplorer/explorer/mixin.js

+const mixin = {
+    props: {
+        value: Array,
+        loading: false,
+
+        rowButtons: Array,
+        moreButtons: Array
+    },
+    data() {
+        return {
+            data: [],
+        }
+    },
+    watch: {
+        value(nval) {
+            this.data = nval;
+        },
+    },
+    methods: {
+        isOfficeFile(type) {
+            let officeTypes = ["application/msword", "application/vnd.ms-excel", "application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.openxmlformats-officedocument.presentationml.presentation"];
+            return officeTypes.includes(type);
+        },
+        officeIcon(type) {
+            let docTypes = ["application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
+            let excelTypes = ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
+            let pptTypes = ["application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.presentationml.presentation"]
+            if (docTypes.includes(type)) {
+                return 'icon-doc'
+            } else if (excelTypes.includes(type)) {
+                return 'icon-excel'
+            } else if (pptTypes.includes(type)) {
+                return 'icon-ppt'
+            }
+
+        },
+        type2icon(type) {
+            console.log(type)
+            let [t1, t2] = type.split('/')
+            let mt = ['pdf', 'html', 'xml', 'psd', 'rtf']
+            if (mt.includes(t2)) {
+                return `icon-${t2}`
+            }
+
+            let codeTypes = ['json', 'yaml', 'x-yaml']
+            if (codeTypes.includes(t2)) {
+                return 'icon-html'
+            }
+
+            let compressedFileTypes = ['zip', 'x-gzip']
+            if (compressedFileTypes.includes(t2)) {
+                return 'icon-compressed-file'
+            }
+
+            if (this.isOfficeFile(type)) {
+                return this.officeIcon(type)
+            }
+
+            let gt = ['audio', 'video', 'image', 'text']
+            if (gt.includes(t1)) {
+                return `icon-${t1}`
+            }
+
+            return 'icon-file'
+        },
+        onNameClick(item) {
+            // open a folder
+            if (item.dirtype) {
+                this.$emit("on-click", 'folder', item)
+                return;
+            }
+
+            // preview image file
+            if (item.type.startsWith("image")) {
+                this.$emit("on-click", 'image', item)
+                return;
+            }
+
+            // preview media file
+            if (item.type.startsWith("audio") || item.type.startsWith("video")) {
+                this.$emit("on-click", 'media', item)
+                return;
+            }
+
+            // preview office file
+            if (this.isOfficeFile(item.type)) {
+                this.$emit("on-click", 'doc', item)
+                return;
+            }
+        },
+    }
+}
+
+export default mixin
\ No newline at end of file

evm_monitor/src/components/FileExplorer/iconfont.css

+
+@font-face {font-family: "iconfont";
+  src: url('//at.alicdn.com/t/font_2113109_7bz8s7j187s.eot?t=1601822003589'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_2113109_7bz8s7j187s.eot?t=1601822003589#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAvoAAsAAAAAGiAAAAuZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFQAqkBJxvATYCJANICyYABCAFhG0HgSYbmxWjoo5yUtRkf3FgG9MauiEWkVzOXLAsfnHTsZAB+q/BIrKGB8a9Ybrw3hBox36eP/XPfcq970WoUioplWRgkta/nApmc8c3+a2TsgxStg86H0D3t9d4DZ22wkSYTnlzq+k5CJS/4IXc2MqcE8fz79/OrbcWFWoQcZRAgJln2pLog9T/6lIp4S87bLuEPAvKPJVDUke7ZUm+y7V8x68b8h6gucPUYWuYz/9+76q43rZ5SKKlaQlf7Mrkzt/+TAVIqiFxOP3fPzFvW0NCwxOHEGmRDLFgIV510hc2KuAjdgYIAC9cKrSe3dyrEQYhhFZ7DEaNQimYHFMEJ3ApKxagE1i4W0s9BwCb7c+PXsgMBqCwPdCCru3UqYOH+/IILQ5L1aRVQNQeBwBvqwHQAFIBMADdqfIPgHZhqo35tIaMSwAi+e/IgAAXIAEhoAiEBmICNmdHT//8NwI/fHlk+H+udkgQ3cMHRr2IoB2tHXt8ACWODIuCqPAIgZwCTQNTz+QfbwDCcmi+V60BAU56AiUIEARxIoCCDEQBCixICChQIKGggEBiQEEFYgMFHsQJBO2SDiAA6QYFOUgPEPRB+kGBBpkP4RjJG6CAQX6AJ1CDL4+IDx+s1SvEAtgO2A/ZCJS4YfYVFA4jpw9hhPFYHLzj8NCC4CaOIQbPhBIl4SLMGg1D2FvQhGsYRPir5DzPmCjc3ATLaoJVvFrOE14WH2LiFEJDWVpB21wBjldimxWMVUbMaJBCLScrJkydTBR8Awv030vZymuvhLMHX81TgGoxA7+CEwAi47fZQcElU2SMR6JSgCkg0sptqKXHgFYWnFCjKmlIfRTjSrW/TuaWhS7CbX39eUzV4y9L6999G1958gQCPThJv872osTAVjJL+5yyhSyygeBWxZHHREz0ZqSeMoM0sxhTHfoc6RYPqWRhZmvjIS1gXZxDxJQcfi8/0kZRdkr6RPLN9NxpjEUA+1VCInfhAZAt1ogh9GMTMZ6uGW1ko9JFBnrjGazoz3ZBY1VDK4iFqKSKYZ65Y1bvcvdym24pM5lAxOp6Q3hqFG5EifyNxujkSNSAU6XdjWUN51zOaSUAQk6FNvWI7XhUN6fVgdBA9sncOIUrld0PiGC5ELpR0Vfde8YuehIOlAt+eEbqBGWtBCKWK4wYGGYjpF4faRkEMMgr39yN13S52Y2kJiYAwohEcays7VqQBpMFBVzOg0iFqddSCwyPQsER69t4/6jB1OIAPtYJLzaxrlH5xPj63jJTcN5i35weGwzvEJTYpZ/PzcSV2sYu7Wdv+W8d+RbkVrYSGBgalO1NNCahC+FMf49Wf3rEZRzsYpn0ZoguZTwM8fQU8WdgYj8/+m5o7Y/+HenX0xAfFLk3XnL/iMSVKS+2upAi/o6VFYhgq+b/QfM6O9VgsYiJQYzC1veFYhUHXo2RreFuX+oB0HtKZxK9knkOQHYPjr2dtf3y50uPkr2gU9cb49RtEs3sbf7QWOTTaZQcmCjviHp2b3pk9+u/+6a+Hmipno0N8AvyLUmvqgWIeqlWRSCwP3MQqkMEyqDgQIH6FMEEhUX5E1LeMIud3ZjE3Khn606I/azC6JY6e5rgfzA4iIVMlEupru186/lWZ0cWV6pc4JoMqpDpvc66oioRt7+bpf52d1+sHNgPtV2jIdFC4RFSY0YSNVrYqqnneqSG5XsSg1j4Tz5etuGh7Ff1LfqyZipS36a7GSdpihOdev9n8Jy54ujWUbUn5S55svaUPdPHe/f+NUmdHHy/moy8RfcXFhX57EL7ZTLsX+0gcnnsJXNzsNw6l418/PEa9W11rc/3FiG3yS58uzn2bXyNnCYbcYK4cdnAt0LMA4kRI99DLdT7+t2KfJ/qSnOkjVA/765Lc8ZGuW1M64ivDYm2oefHGK32QmeRM6vcy9PaUlfBRA1uJ/bcMTlj7CzPM5r88SWVWoa8C15+e9k+DdGohbcTyc8fxbeIojFnVe6qRoXXTnaU7IN62W6bsrOr/MJDbms1Q4Bkier3qSbqffW73UetTSuLjTie7+1PzG8aqlbs2d+0vGqH4sxR3Qp6ysqT+3u3Vh9T1OdPQSVGAhWHqas2xbfTxrY6vjQlVlxGZXeOj/dLxJeDCfEs8xBy6UxbTKGz2KlzSYTRlrjyJ7W5kYI9Z0zumCxWEGhNwfjSSo6cOF1J54JXJ5uYiEvFZYClW9r8bRw9I1HTHs3vfsIF75mmLVdVV3R+2atbZhEcjcksZx9T1VAE1jb9cfjj+x+Qy7O3fS4QGuGP9JeVlbeVs49ay7l9WWu59VaXS2llBhRRz6XlNdQ3hMHV3FDVEL3JqIbqhtK0yRtIp2wotUmqlqKkKinacDVL9VLYFdVnS/uvqRs96uZ8ecKGTz9FeavGMQ3HK49PoDOXofw1Tqbl6qQbEDUzp6DxiA/U0zSwCcKM/6JSs/D6If8u2N1e9mXilwlPf5N4+8qiOIN76BWlfPGJT9UqS2esXLm8XhhcqhitT1ZNHvqoPSp5wtyarTPkqcaOKg0/NMdqLl3jU1V2LHIa8sOtBmvO06lIXXOswvxwescdI0RDXLNcp6eX/pEaN+gvnzy5+5c7P78xUu6SSvf0nE2L695W/+g7pA/05c3+bYge/d7DT7TvvuHqg6jLoq2nCW4h42ozzmjh2MTjDLX5qU9U587PHc1bSLpNbnG2im+IrSarqdhkMY1MGc2UJ0WPiN8NE9D4x6+6Yn+rrnGOB/OYP2/8qR2LldrliwsuuTc4WHRv5CJku78FL/OOVKfssXF/PqYp5vlrdQeYwdwr5quDORltczk8dcAykD6FCIPnRrw2mvzonr9ZyL+kOLxoMJf1C/xMT7rHMotwc10VgzlXzc13WBzzHtWC3otkNqg7zT4UGJufzrXzAjuNPbpHX3OJ+aWMH8KbssZkaRxRti1nvXOi+TpPzK7bGo+DH5gs7w8aF5YwM5rlJTrDHQoDyu6pyjYDWo+sst14f+VlrC85qkaknUzakWTtKu+eofCUMHxsauUTG/UUkbDeMireRrxsO3MUj2PJ0P9z7lQ3js0CW5RD83mO70i0SV+WoPeKon5vU2mjhyeexgl0O+s9PX00g3iqpIcCf2LSB54Pkr73ZEoR32R9k3Zt5yt1hroLv08Z68pxNcR27as3dNqPlGqE+1Ev/hP9jz/qggBFbdnHL6gUjQrVheN+W8nKj9PlEAzydIWeMC9wQ3NTy79WZXb/JA5+cO+o9G8cNAoqs34zduzAyIRfLYTS12b+4rD8bg5GVFykazmUjWfnstM4acJNY/8Cww5N4H6Z5MjmjeaXEod0+k+gb2d7XFoI3mb37vf3A8Dw0/RqOs923QFLoHIXwU+LgR+47ocLdIvrS/RHtBU+BZxf19RP5+aImio7pd9sAEBf1Buo2gev0dPC8qX3z1QP0bOZmeBsS9Y67/yGycPnc+8e/D+LSdovAozKQqim4LlLn1IAw/9X2buEUrX1PbZS2Kq71i4hFRQAnt8HMNxPhg/6jjeUFmiIQ6I3QJExAxoWq8popgKWIBtwsDLASzGqvkBnBoBukZxkKwEQtfOAonQf0NSeV2U03wcso+8ARx0a8Goz3aAgPl2TYyYj5PDpHaNNnRfpMnFa31J4bgwHJbbLI3GJpbhKt0Zrz6kjbmOR8hLWIh49pxbPjN1R0yTMnCqyMt+I5K2FpT3tEHObWjVhx4ghiIMme9cBu1hJxz9cTGKf/hYJnjUMzhn0J+Ajwor45ihDOmsJ1XPclRp0LB1nehGszWKch7InS1poJONIw6sS5EmfrkIsMddZoyLbYmGTtZfF8/7j220fw9Y3JC2vDYVoxCAWcUiGMCJ3nYIHNLYSqZAaaZAW6UC1oMozUynkZj42pNVlwlvb9M2zi0kLvUn/JTpK8BFzn94sNZCdh5xFb6QNHKk4YPH92JpA4JLVgaPTTSyiFAAA') format('woff2'),
+  url('//at.alicdn.com/t/font_2113109_7bz8s7j187s.woff?t=1601822003589') format('woff'),
+  url('//at.alicdn.com/t/font_2113109_7bz8s7j187s.ttf?t=1601822003589') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('//at.alicdn.com/t/font_2113109_7bz8s7j187s.svg?t=1601822003589#iconfont') format('svg'); /* iOS 4.1- */
+}
+  
+  .iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  .icon-file:before {
+    content: "\e61a";
+  }
+  
+
+  .icon-compressed-file:before {
+    content: "\e61b";
+    color: rgb(244, 196, 70);
+  }
+
+  .icon-xml:before {
+    content: "\e66e";
+    color: #FC7B24;
+  }
+  
+  .icon-audio:before {
+    content: "\e8a4";
+    color: rgb(55, 159, 211);;
+  }
+  
+  .icon-text:before {
+    content: "\e60d";
+    color: rgb(249, 202, 6);
+  }
+  
+  .icon-video:before {
+    content: "\e609";
+    color: rgb(128, 149, 255);
+  }
+  
+  .icon-zip:before {
+    content: "\e60b";
+  }
+  
+  .icon-excel:before {
+    content: "\e6d6";
+    color: rgb(16, 123, 15);
+  }
+  
+  .icon-pdf:before {
+    content: "\e64f";
+    color: rgb(220, 46, 27);
+  }
+  
+  .icon-ppt:before {
+    content: "\e642";
+    color: rgb(210, 70, 37);
+  }
+  
+  .icon-html:before {
+    content: "\e667";
+    color: rgb(247, 98, 44);;
+  }
+  
+  .icon-psd:before {
+    content: "\e66a";
+  }
+  
+  .icon-rtf:before {
+    content: "\e66b";
+  }
+  
+  .icon-image:before {
+    content: "\e606";
+    color: rgb(18, 150, 219);
+  }
+  
+  .icon-doc:before {
+    content: "\e623";
+    color: rgb(13, 71, 161);
+  }
+  
+  .icon-grid:before {
+    content: "\e6ef";
+  }
+  
+  .icon-list:before {
+    content: "\e67a";
+  }
+  
\ No newline at end of file

evm_monitor/src/components/FileExplorer/index.js

+import FileExplorer from './FileExplorer.vue'
+
+const components = {
+    FileExplorer: FileExplorer,
+}
+
+const install = function (Vue) {
+    Object.keys(components).forEach(key => {
+        Vue.component(key, components[key]);
+    });
+}
+
+export default install
\ No newline at end of file

evm_monitor/src/components/FileViewer/Media.vue

+<template>
+  <el-dialog :title="value.name" :visible.sync="show" width="30%" @opened="onOpen" @close="onClose">
+    <vue-plyr ref="audio" v-show="mediatype == 'audio'">
+      <audio :src="value.url"></audio>
+    </vue-plyr>
+
+    <vue-plyr ref="video" v-show="mediatype == 'video'">
+      <video :src="value.url"></video>
+    </vue-plyr>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Object,
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  watch: {
+    visible(n) {
+      this.show = n;
+    },
+  },
+  methods: {
+    onOpen() {
+      this.player.play();
+    },
+    onClose() {
+      this.$emit("close");
+      console.log(this.player);
+      this.player.stop();
+    },
+  },
+  computed: {
+    filetype() {
+      return this.value.type ? this.value.type : "";
+    },
+    mediatype() {
+      return this.filetype.split("/")[0];
+    },
+    player() {
+      return this.$refs[this.mediatype].player;
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

evm_monitor/src/components/FileViewer/Picture.vue

+<template>
+  <div class="pswp" tabindex="0" role="dialog" aria-hidden="true">
+    <!-- Background of PhotoSwipe. 
+         It's a separate element as animating opacity is faster than rgba(). -->
+    <div class="pswp__bg"></div>
+
+    <!-- Slides wrapper with overflow:hidden. -->
+    <div class="pswp__scroll-wrap">
+      <!-- Container that holds slides. 
+            PhotoSwipe keeps only 3 of them in the DOM to save memory.
+            Don't modify these 3 pswp__item elements, data is added later on. -->
+      <div class="pswp__container">
+        <div class="pswp__item"></div>
+        <div class="pswp__item"></div>
+        <div class="pswp__item"></div>
+      </div>
+
+      <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+      <div class="pswp__ui pswp__ui--hidden">
+        <div class="pswp__top-bar">
+          <!--  Controls are self-explanatory. Order can be changed. -->
+          <div class="pswp__counter"></div>
+          <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+          <button class="pswp__button pswp__button--share" title="Share"></button>
+          <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+          <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+          <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
+          <!-- element will get class pswp__preloader--active when preloader is running -->
+          <div class="pswp__preloader">
+            <div class="pswp__preloader__icn">
+              <div class="pswp__preloader__cut">
+                <div class="pswp__preloader__donut"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+          <div class="pswp__share-tooltip"></div>
+        </div>
+
+        <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
+
+        <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
+
+        <div class="pswp__caption">
+          <div class="pswp__caption__center"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PhotoSwipe from "photoswipe";
+import PhotoSwipeDefaultUI from "photoswipe/dist/photoswipe-ui-default";
+import "photoswipe/dist/photoswipe.css";
+import "photoswipe/dist/default-skin/default-skin.css";
+export default {
+  name: "PhotoPreview",
+  methods: {
+    open(picURL) {
+      // build items array
+      var items = [{ src: picURL, w: 600, h: 400 }];
+
+      // define options (if needed)
+      var options = {
+        index: 0, // start at first slide
+        // ui option
+        // timeToIdle: 4000,
+        // loadingIndicatorDelay: 100,
+      };
+
+      // Initializes and opens PhotoSwipe
+      var pswpElement = document.querySelectorAll(".pswp")[0];
+      var gallery = new PhotoSwipe(pswpElement, PhotoSwipeDefaultUI, items, options);
+      gallery.init();
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

evm_monitor/src/components/FileViewer/index.js

+import MediaViewer from './Media'
+import PictureViewer from './Picture'
+
+export { MediaViewer, PictureViewer }
\ No newline at end of file

evm_monitor/src/components/GithubCorner/index.vue

+<template>
+  <a href="https://gitee.com/scriptiot/evm" target="_blank" class="github-corner" aria-label="View source on Github">
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      style="fill:#40c9c6; color:#fff;"
+      aria-hidden="true"
+    >
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px;"
+        class="octo-arm"
+      />
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+        class="octo-body"
+      />
+    </svg>
+  </a>
+</template>
+
+<style scoped>
+.github-corner {
+    top: 0px;
+    right: 0px;
+    position: absolute;
+    margin: 0px;
+}
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}
+</style>

evm_monitor/src/components/Hamburger/index.vue

+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <svg
+      :class="{'is-active':isActive}"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

evm_monitor/src/components/IconFont.vue

+<template>
+  <svg
+    class="icon-font"
+    aria-hidden="true"
+    :style="{
+      fontSize: size ? `${size}` : `inherit`,
+      verticalAlign: align ? `-.${align}em` : `0em`,
+      color: color ? color : `inherit`,
+    }"
+  >
+    <use
+      :xlink:href="`#${icon}${
+        iconTheme == 'default-iconTheme' ? '' : '-color'
+      }`"
+    ></use>
+  </svg>
+</template>
+<script>
+// 组件参数
+// 例：<IconFont icon="bg" size="18px" align="14"/>
+// icon 图标key **必填
+// size 图标大小 非必填 默认为父元素字体大小
+// align 图标对齐的值 非必填 默认为15
+// color 图标颜色 非必填 默认为父元素字体颜色
+export default {
+  props: ["icon", "size", "align", "color", "scale"],
+  computed: {
+    iconTheme() {
+      return this.$store.state.user.iconTheme;
+    },
+  },
+};
+</script>
\ No newline at end of file

evm_monitor/src/components/ListView.vue

+<template>
+  <div @contextmenu.prevent="handleContextmenu">
+    <!-- <el-row :gutter="gutter">
+          <el-col :xs="8" :sm="6" :lg="5" :xl="4" v-for="(item,index) in items" :key="index">
+          </el-col>
+    </el-row>-->
+    <el-button type="primary" @click="test">测试</el-button>
+    <el-row type="flex" justify="center">
+      <el-col :span="20">
+        <el-row class="list" ref="wrapper">
+          <div
+            class="list-item"
+            :style="{
+              'margin-right':
+                (index + 1) % itemNumber == 0 ? 0 : marginRight + 'px',
+              width: itemWidth + 'px',
+            }"
+            v-for="(item, index) in items"
+            :key="index"
+          >
+            <slot name="card" :itemProp="item"></slot>
+          </div>
+        </el-row>
+      </el-col>
+    </el-row>
+    <contextMenu
+      :contextVisible="contextVisible"
+      :eventPosition="eventPosition"
+      @changeSize="changeSize"
+      @changeVisible="changeVisible"
+    />
+  </div>
+</template>
+<script>
+import contextMenu from "./BaseContextMenu.vue";
+export default {
+  components: {
+    contextMenu,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    gutter: {
+      type: Number,
+      default: 10,
+    },
+  },
+  computed: {
+    surplus() {
+      return this.wrapperWidth % this.itemWidth;
+    },
+    itemNumber() {
+      return Math.floor(this.wrapperWidth / this.itemWidth);
+    },
+    marginRight() {
+      return Math.round((this.surplus / (this.itemNumber - 1)) * 100) / 100;
+    },
+  },
+  mounted() {
+    this.wrapperWidth = this.$refs.wrapper.$el.clientWidth - 1;
+    window.onresize = () => {
+      console.log("敞口在滨化");
+      this.wrapperWidth = this.$refs.wrapper.$el.clientWidth - 1;
+    };
+    // console.log("this.items", this.items);
+    // console.log("this.gutter", this.gutter);
+  },
+  data() {
+    return {
+      wrapperWidth: "",
+      itemWidth: "300",
+      contextVisible: false,
+      eventPosition: {
+        left: 0,
+        top: 0,
+      },
+    };
+  },
+  methods: {
+    test() {
+      console.log("this.$refs.wrapper", this.$refs.wrapper);
+      console.log("this.wrapperWidth", this.wrapperWidth);
+      console.log("this.itemWidth", this.itemWidth);
+      console.log("this.surplus", this.surplus);
+      console.log("this.itemNumber", this.itemNumber);
+      console.log("this.marginRight", this.marginRight);
+    },
+    handleContextmenu(event) {
+      console.log("鼠标右击", event);
+      this.contextVisible = true;
+      this.eventPosition = {
+        left: event.clientX,
+        top: event.clientY,
+      };
+    },
+    changeVisible(msg) {
+      this.contextVisible = msg;
+    },
+    changeSize(size) {
+      console.log("size", size);
+      this.itemWidth = size;
+    },
+    handleGetBig() {
+      console.log("大图标关闭");
+      this.$emit("changeVisible", false);
+    },
+    handleGetMedium() {
+      console.log("中等图标关闭");
+      this.$emit("changeVisible", false);
+    },
+    handleGetSmall() {
+      console.log("小图标关闭");
+      this.$emit("changeVisible", false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+  .list-item {
+    float: left;
+  }
+}
+</style>
\ No newline at end of file

evm_monitor/src/components/PanThumb/index.vue

+<template>
+  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
+    <div class="pan-info">
+      <div class="pan-info-roles-container">
+        <slot />
+      </div>
+    </div>
+    <!-- eslint-disable-next-line -->
+    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PanThumb',
+  props: {
+    image: {
+      type: String,
+      required: true
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    width: {
+      type: String,
+      default: '150px'
+    },
+    height: {
+      type: String,
+      default: '150px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pan-item {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.pan-info-roles-container {
+  padding: 20px;
+  text-align: center;
+}
+
+.pan-thumb {
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: cover;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: 95% 40%;
+  transition: all 0.3s ease-in-out;
+}
+
+/* .pan-thumb:after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  border-radius: 50%;
+  top: 40%;
+  left: 95%;
+  margin: -4px 0 0 -4px;
+  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
+} */
+
+.pan-info {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.pan-info h3 {
+  color: #fff;
+  text-transform: uppercase;
+  position: relative;
+  letter-spacing: 2px;
+  font-size: 18px;
+  margin: 0 60px;
+  padding: 22px 0 0 0;
+  height: 85px;
+  font-family: 'Open Sans', Arial, sans-serif;
+  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.pan-info p {
+  color: #fff;
+  padding: 10px 5px;
+  font-style: italic;
+  margin: 0 30px;
+  font-size: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.pan-info p a {
+  display: block;
+  color: #333;
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  color: #fff;
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 9px;
+  letter-spacing: 1px;
+  padding-top: 24px;
+  margin: 7px auto 0;
+  font-family: 'Open Sans', Arial, sans-serif;
+  opacity: 0;
+  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
+  transform: translateX(60px) rotate(90deg);
+}
+
+.pan-info p a:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.pan-item:hover .pan-thumb {
+  transform: rotate(-110deg);
+}
+
+.pan-item:hover .pan-info p a {
+  opacity: 1;
+  transform: translateX(0px) rotate(0deg);
+}
+</style>

evm_monitor/src/components/SvgIcon/index.vue

+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1.5em;
+  height: 1.5em;
+  /* vertical-align: -0.15em; */
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>

evm_monitor/src/directive/permission/index.js

+import permission from "./permission";
+
+const install = function(Vue) {
+  Vue.directive("permission", permission);
+};
+
+if (window.Vue) {
+  window["permission"] = permission;
+  Vue.use(install); // eslint-disable-line
+}
+
+permission.install = install;
+export default permission;

evm_monitor/src/directive/permission/permission.js

+import store from "@/store";
+
+function checkPermission(el, binding) {
+  const { value } = binding;
+  const roles = store.getters && store.getters.roles;
+
+  if (value && value instanceof Array) {
+    if (value.length > 0) {
+      const permissionRoles = value;
+
+      const hasPermission = roles.some((role) => {
+        return permissionRoles.includes(role);
+      });
+
+      if (!hasPermission) {
+        el.parentNode && el.parentNode.removeChild(el);
+      }
+    }
+  } else {
+    throw new Error(`need roles! Like v-permission="['admin','editor']"`);
+  }
+}
+
+export default {
+  inserted(el, binding) {
+    checkPermission(el, binding);
+  },
+  update(el, binding) {
+    checkPermission(el, binding);
+  },
+};

evm_monitor/src/helper.js

+import Vue from 'vue'
+import store from './store'
+import router from './router'
+
+export const transfer = component => {
+    const _constructor = Vue.extend(component)
+    return function (propsData = {}) {
+        let instance = new _constructor({ store, router, propsData }).$mount(document.createElement('div'))
+
+        return new Promise((resolve, reject) => {
+            instance.$once('completed', data => resolve(data))
+            instance.$once('cancel', data => reject(data))
+        })
+    }
+}
\ No newline at end of file

evm_monitor/src/icons/icon-color.js

+!function(l){var c,a,t,e,h,o,i,d='<svg><symbol id="fonggeshehzi-color" viewBox="0 0 1024 1024"><path d="M611.68 699.91l-309-309a31.21 31.21 0 1 1 44.14-44.14l309 309a31.21 31.21 0 0 1-44.14 44.14z" fill="#f7b223" ></path><path d="M390 951.33l-169.2-169.2a31.23 31.23 0 0 1-8.83-26.48l9.03-63.43-66.92 6.93a31.16 31.16 0 0 1-25.27-9l-77.24-77.22a31.22 31.22 0 0 1 0-44.14L408 212.39a31.21 31.21 0 0 1 44.14 0l87.72 87.72c21-39.43 51.52-79.84 88.83-117.15 109-109 232.38-150.15 286.9-95.63s13.41 177.86-95.65 286.9c-37.32 37.31-77.72 67.83-117.15 88.83l87.72 87.72a31.21 31.21 0 0 1 0 44.14l-356.4 356.41a31.22 31.22 0 0 1-44.11 0zM275.94 749L412 885.12l312.3-312.27-97.7-97.7a31.21 31.21 0 0 1 11.67-51.5c43.21-15.26 93.33-49.36 137.53-93.56 88.45-88.45 116.14-178.09 95.63-198.62s-110.17 7.18-198.62 95.63c-44.2 44.2-78.3 94.32-93.57 137.53a31.2 31.2 0 0 1-51.49 11.67l-97.7-97.71-312.27 312.27 44.67 44.67 91.9-9.51a31.22 31.22 0 0 1 34.11 35.46z" fill="#479def" ></path><path d="M418.68 491.46L342.15 568a26.69 26.69 0 1 1-37.74-37.74l76.53-76.53a26.69 26.69 0 0 1 37.74 37.74zM547.21 625.46l-69.94 69.94c-9.52 9.52-26.77 7.72-38.51-4s-13.55-29-4-38.51l69.94-69.94c9.52-9.52 26.77-7.71 38.51 4s13.53 28.98 4 38.51z" fill="#f7b223" ></path></symbol><symbol id="suoxiao-color" viewBox="0 0 1024 1024"><path d="M407.806963 366.396831l-0.165776-269.456988c-0.011256-19.010983-15.344476-34.43016-34.225499-34.418904-18.881023 0.01228-34.1948 15.4509-34.183544 34.46086l0.119727 194.447621L121.745808 72.528873c-12.799514-12.873192-33.528628-12.859889-46.38033 0.028653-12.785188 12.95608-12.772908 33.827433 0.028653 46.699602L293.068755 338.091158l-193.118346 0.12075c-18.879999 0.01228-34.1948 15.4509-34.183544 34.46086 0.011256 19.009959 15.3455 34.43016 34.225499 34.418904l267.615037-0.166799C392.577097 406.9085 407.824359 393.94935 407.806963 366.396831L407.806963 366.396831z" fill="#f7b223" ></path><path d="M655.570883 407.217539l267.615037-0.432859c18.881023-0.030699 34.17945-15.484669 34.149774-34.495652-0.030699-19.010983-15.379269-34.414811-34.259268-34.385135l-193.118346 0.312108L947.148681 118.895901c12.772908-12.900821 12.739139-33.772174-0.074701-46.699602-12.880355-12.860912-33.608445-12.827143-46.38033 0.074701L683.57161 291.660686l-0.310062-194.447621c-0.030699-19.009959-15.379269-34.414811-34.259268-34.384112-18.881023 0.030699-34.17945 15.484669-34.149774 34.495652l0.429789 269.456988C615.32732 394.332067 630.53365 407.257447 655.570883 407.217539L655.570883 407.217539z" fill="#479def" ></path><path d="M367.764991 613.848643l-267.615037-0.415462c-18.879999-0.029676-34.227546 15.376199-34.257222 34.387181-0.028653 19.010983 15.270798 34.463929 34.151821 34.492582l193.118346 0.299829L75.28873 901.243165c-12.812817 12.859889-12.844539 33.731242-0.071631 46.699602 12.840446 12.900821 33.568537 12.933567 46.38033 0.071631L339.40406 729.315444l-0.297782 194.447621c-0.028653 19.010983 15.270798 34.463929 34.151821 34.492582 18.881023 0.029676 34.227546-15.376199 34.257222-34.387181l0.412392-269.456988C407.969669 626.859981 392.734686 613.887528 367.764991 613.848643L367.764991 613.848643z" fill="#479def" ></path><path d="M614.842273 654.450363l0.472767 269.456988c0.033769 19.010983 15.384385 34.412764 34.264385 34.378995 18.881023-0.033769 34.177404-15.489786 34.143635-34.500768l-0.340761-194.447621 217.85575 218.650859c12.814864 12.858866 33.542954 12.822027 46.38033-0.082888 12.770861-12.971429 12.734022-33.842783-0.081864-46.699602l-217.923288-218.582297 193.118346-0.343831c18.879999-0.033769 34.177404-15.489786 34.143635-34.500768-0.033769-19.010983-15.384385-34.412764-34.264385-34.378995l-267.615037 0.475837C629.956505 613.922321 614.793154 626.898867 614.842273 654.450363L614.842273 654.450363z" fill="#f7b223" ></path></symbol><symbol id="shangcheng-color" viewBox="0 0 1028 1024"><path d="M1021.560488 310.923784l-56.554026-169.832937c-23.407558-70.393531-51.257425-135.319603-133.696451-139.07848-100.293696-4.527739-201.783398 0-302.162523 0-110.203465 0-221.175791-4.015165-331.379255 0-71.162392 2.562871-104.565148 51.257425-126.007837 115.585494-20.417541 60.996336-41.603944 121.736385-61.252624 182.989008-36.734488 114.560346 26.226716 244.754206 142.068498 270.29749 119.686088 26.312145 224.422094-63.815495 237.749024-187.26046h-71.931253c11.362063 106.102871 90.042211 192.129916 195.547078 192.129916 107.469735 0 187.943893-89.871353 195.888794-198.793382h-71.931254c8.542904 119.002656 104.479719 212.547457 221.004933 196.486798 120.882095-16.402376 192.984207-142.666501 162.31518-262.865164-11.789208-46.815115-81.243019-26.995577-69.368382 19.990396 19.392393 76.886138-24.688993 158.043728-102.941996 168.466072-71.845825 9.568053-134.209026-48.096551-139.420197-122.419818a35.965627 35.965627 0 1 0-71.931254 0c-10.934917 155.139141-230.658414 162.31518-247.744223 6.663465-5.211172-48.352838-66.720082-48.438267-71.931253 0-11.447492 106.444587-138.053332 155.309999-211.266022 78.680148-53.56401-56.297739-32.463036-124.213828-10.67863-189.396186 17.598383-52.453432 32.377607-107.469735 53.136864-158.641732 14.693795-36.307343 41.94566-36.649059 73.383547-36.649059 199.903959 0 401.003925-7.17604 600.822455 0 53.051435 1.879439 60.312904 47.24226 74.664983 90.640214l54.247442 162.998613c15.12094 45.53368 84.660181 25.970429 69.368382-19.990396zM54.247442 635.04157V768.054589c0 48.011122-5.809175 101.318844 12.47264 146.510808 44.252244 109.605461 151.380263 108.922029 246.719074 108.665742l331.635543-0.768862c87.479339 0 191.7882 15.20637 258.508282-57.92089 44.508531-48.779983 44.508531-107.128019 44.508531-169.320362V635.04157c0-48.438267-71.931254-48.523696-71.931254 0v120.796666c0 36.734488 6.578036 81.755594-2.819158 117.806649-23.920132 91.836221-139.249339 73.810693-208.105147 73.810693l-300.112226 0.683432c-63.046633 0-167.355494 18.794389-215.0249-35.025907-33.317327-37.588779-23.663845-97.389108-23.663844-144.802227v-133.269306c0-48.438267-71.931254-48.523696-71.931254 0zM309.167704 661.268286v149.329966" fill="#2591ee" ></path><path d="M273.287506 661.268286v149.500824c0 48.438267 71.931254 48.523696 71.931254 0V661.268286c0-48.438267-71.931254-48.523696-71.931254 0z" fill="#f7ac0e" ></path></symbol><symbol id="wuliaoxinxix-color" viewBox="0 0 1024 1024"><path d="M754.432 586.56H446.976a28.672 28.672 0 0 0-20.416 8.256 27.968 27.968 0 0 0-8.32 20.16c0 15.808 13.44 28.288 28.736 28.288h307.456a28.608 28.608 0 0 0 20.352-8.192 27.904 27.904 0 0 0 8.32-20.096c0.704-15.168-12.672-28.416-28.672-28.416z m-133.376 122.688h-174.08a28.672 28.672 0 0 0-20.416 8.256 27.968 27.968 0 0 0-8.32 20.096c0 15.872 13.44 28.352 28.736 28.352h174.08a28.608 28.608 0 0 0 20.352-8.256 27.904 27.904 0 0 0 8.32-20.096 27.52 27.52 0 0 0-8.192-20.224 28.16 28.16 0 0 0-20.48-8.128z" fill="#f7ac0e" ></path><path d="M930.304 378.24l-79.36-151.04c-19.264-36.928-68.032-66.56-110.72-66.56H253.312c-42.048 0-90.688 28.992-110.72 65.92L63.232 374.144c-17.344 31.616-30.72 85.056-30.72 121.28l0.64 270.016c0 15.872 12.736 28.352 28.672 28.352 16 0 28.736-12.48 28.736-28.352l-0.64-270.08c0-1.92 0.64-5.184 0.64-7.872h810.432c0.64 3.968 0.64 7.936 0.64 11.264v301.504a28.352 28.352 0 0 1-28.736 28.416H119.232a28.736 28.736 0 0 1-28.672-28.416v-34.88a27.904 27.904 0 0 0-8.32-20.16 28.608 28.608 0 0 0-20.352-8.256 28.672 28.672 0 0 0-20.352 8.32 27.968 27.968 0 0 0-8.32 20.16v35.52c0 47.488 38.72 85.76 86.656 85.76h753.664c48 0 86.72-38.976 86.72-85.76V499.456c0-36.224-12.608-89.6-29.952-121.28z m-827.072 43.392c2.88-9.984 6.656-19.712 11.392-28.992l79.36-147.648c10.048-18.432 38.016-35.584 59.328-35.584h487.552c21.376 0 49.408 17.152 59.392 35.584l79.36 151.04c4.032 7.168 7.296 16.384 10.752 26.368H103.232v-0.768z" fill="#2591ee" ></path></symbol><symbol id="zhuti-color" viewBox="0 0 1024 1024"><path d="M516.36157 1023.694557a403.669026 403.669026 0 0 1-153.394229-38.348557 588.011214 588.011214 0 0 1-358.592651-538.225368A459.509907 459.509907 0 0 1 482.722485 0.393577c296.696734 0 538.225367 180.97828 538.225367 403.669026 0 313.516277-211.253457 336.390855-336.390854 353.210397a244.21976 244.21976 0 0 0-92.843876 20.856233c-16.819543 16.819543-13.455634 31.62074 8.07338 75.351552s47.09472 96.880566-8.07338 147.339194a108.990637 108.990637 0 0 1-75.351552 22.874578zM482.722485 67.671748A392.904518 392.904518 0 0 0 69.634515 447.793414a521.405825 521.405825 0 0 0 318.898531 476.32945c93.516658 41.712466 147.339194 34.311867 155.412574 26.911269s14.128416-24.220142-7.400598-67.278171a121.773489 121.773489 0 0 1 6.055035-154.067012 237.491943 237.491943 0 0 1 134.556342-39.021339c134.556342-15.473979 282.568318-32.966304 279.877191-285.932226C953.669681 218.374851 742.416225 67.671748 482.722485 67.671748z" fill="#2591ee" ></path><path d="M247.248887 538.618945a100.917256 100.917256 0 1 1 100.917256-100.917257A100.917256 100.917256 0 0 1 247.248887 538.618945z m0-134.556342a33.639085 33.639085 0 1 0 33.639085 33.639085 33.639085 33.639085 0 0 0-33.639085-33.639085zM381.805229 336.784432a100.917256 100.917256 0 1 1 100.917256-100.917256A100.917256 100.917256 0 0 1 381.805229 336.784432z m0-134.556342a33.639085 33.639085 0 1 0 33.639085 33.639086 33.639085 33.639085 0 0 0-33.639085-33.639086zM650.917912 336.784432a100.917256 100.917256 0 1 1 100.917257-100.917256A100.917256 100.917256 0 0 1 650.917912 336.784432z m0-134.556342a33.639085 33.639085 0 1 0 33.639086 33.639086 33.639085 33.639085 0 0 0-33.639086-33.639086zM785.474254 538.618945a100.917256 100.917256 0 1 1 100.917256-100.917257 100.917256 100.917256 0 0 1-100.917256 100.917257z m0-134.556342a33.639085 33.639085 0 1 0 33.639086 33.639085 33.639085 33.639085 0 0 0-33.639086-33.639085z" fill="#f7ac0e" ></path></symbol><symbol id="shoucang-color" viewBox="0 0 1024 1024"><path d="M773.48 959.09c-7.39 0-14.8-1.78-21.64-5.37L513 828.14 274.19 953.72c-15.84 8.28-34.62 6.9-48.98-3.57-14.41-10.5-21.48-27.92-18.45-45.47l45.59-265.91L59.14 450.44C46.38 438 41.87 419.75 47.38 402.8c5.5-16.95 19.89-29.08 37.53-31.63l266.99-38.8L471.31 90.42c7.89-15.98 23.87-25.91 41.68-25.91 17.82 0 33.8 9.93 41.68 25.92l119.41 241.94 266.99 38.8c17.64 2.55 32.04 14.68 37.55 31.64 5.5 16.96 0.98 35.22-11.81 47.65L773.66 638.77l45.6 265.93c3 17.57-4.08 34.97-18.48 45.45-8.15 5.92-17.69 8.94-27.3 8.94zM513.01 757.18c7.4 0 14.78 1.75 21.51 5.26l210.11 110.49-40.1-233.86c-2.57-15.07 2.4-30.45 13.34-41.12L887.78 432.3l-234.79-34.12a46.44 46.44 0 0 1-35.02-25.49L513 159.99 408 372.76a46.536 46.536 0 0 1-34.99 25.42L138.2 432.3l169.9 165.62c10.95 10.65 15.95 26.03 13.37 41.12l-40.11 233.89 210.01-110.44c6.78-3.56 14.22-5.31 21.64-5.31zM679.1 342.51l0.02 0.08c0.01-0.03-0.02-0.05-0.02-0.08zM493.55 120.58c0.01 0.03 0.03 0.07 0.04 0.09l-0.04-0.09z" fill="#2591ee" ></path><path d="M432.09 638.06c-10.82 0-21.46-5.13-28.07-14.69l-82.38-119.16c-10.71-15.48-6.83-36.71 8.65-47.42 15.49-10.7 36.74-6.83 47.42 8.65l82.38 119.14c10.71 15.49 6.83 36.72-8.65 47.42a33.774 33.774 0 0 1-19.35 6.06z" fill="#f7ac0e" ></path></symbol><symbol id="xinxi-color" viewBox="0 0 1024 1024"><path d="M277.3 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#f7ac0e" ></path><path d="M344.7 978.2c-5.2 0-10.4-0.8-15.5-2.5-13.8-4.5-24.8-14.8-30.4-28.1l-39.3-94.2H128.3C57.5 853.3 0 795.8 0 725.1V213.6C0 142.9 57.5 85.3 128.3 85.3h767.5c70.7 0 128.3 57.5 128.3 128.3v511.5c0 70.7-57.5 128.3-128.3 128.3H566.5L370.2 971.1c-7.7 4.7-16.6 7.1-25.5 7.1z m-18.3-80.3s-0.1 0 0 0zM128.3 170.7c-23.7 0-42.9 19.3-42.9 42.9v511.5c0 23.7 19.3 42.9 42.9 42.9h188.2l45.3 108.7L542.9 768h352.9c23.7 0 42.9-19.3 42.9-42.9V213.6c0-23.7-19.3-42.9-42.9-42.9H128.3z" fill="#2591ee" ></path><path d="M512 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#f7ac0e" ></path><path d="M746.7 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#f7ac0e" ></path></symbol><symbol id="dianzan-color" viewBox="0 0 1024 1024"><path d="M753.117 941.535c-1.091 0-2.182-0.05-3.256-0.152L134 941.266c-18.373 0-35.638-7.164-48.608-20.169-12.987-12.986-20.117-30.268-20.101-48.633l0.252-381.364c0.034-34.472 25.856-63.767 60.05-68.147 97.636-12.525 175.204-34.279 202.419-56.78 42.97-35.478 80.638-105.303 80.638-149.422 0-75.303 58.961-134.289 134.213-134.289 60.79 0 113.122 40.093 129.28 98.223a32.527 32.527 0 0 1 2.03 6.225c6.327 28.742 9.53 57.643 9.53 85.907 0 28.549-3.037 56.804-9.06 84.43l146.428 0.118c3.004 0 5.84 0.202 8.625 0.596 44.715 2.533 85.168 26.427 108.524 64.237 14.8 23.196 21.863 50.62 20.269 79.086a68.664 68.664 0 0 1-2.316 20.42l-73.91 326.447c-2.164 8.137-5.05 14.74-8.826 20.612-11.242 21.376-27.635 39.229-47.568 51.712-21.643 13.744-46.862 21.06-72.751 21.06zM542.863 151.19c-37.332 0-65.488 28.188-65.488 65.564 0 72.106-53.691 159.54-105.588 202.41-49.128 40.604-156.26 61.544-237.452 71.964l-0.32 381.396 619.102 0.134c0.889 0 1.762 0.034 2.634 0.1a67.18 67.18 0 0 0 33.457-10.419c10.1-6.325 18.305-15.47 23.91-26.56a34.168 34.168 0 0 1 2.633-4.389l73.743-326.229c-0.152-1.736 0.167-4.756 0.285-6.502 1.057-14.446-2.332-28.255-9.765-39.933-11.98-19.38-32.55-31.267-55.287-32.207a33.926 33.926 0 0 1-4.781-0.529l-190.657-0.05a34.393 34.393 0 0 1-27.986-14.463 34.393 34.393 0 0 1-4.43-31.192c12.014-34.53 18.104-70.689 18.104-107.467 0-21.687-2.315-43.91-6.862-66.16a32.51 32.51 0 0 1-1.426-4.622c-6.93-29.931-33.17-50.846-63.826-50.846z" fill="#2591ee" ></path><path d="M261.13 821.343h-58.417V546.441h58.416c15.183 0 27.49 15.385 27.49 34.363v206.177c0 18.978-12.307 34.362-27.49 34.362z" fill="#f7ac0e" ></path></symbol><symbol id="yingyongguanli-color" viewBox="0 0 1024 1024"><path d="M347.861072 475.013409H69.351255A69.552127 69.552127 0 0 1 0 405.662154V127.152337a69.501909 69.501909 0 0 1 69.351255-69.351255h279.112435A69.552127 69.552127 0 0 1 417.814945 127.152337V406.264772a69.602345 69.602345 0 0 1-69.953873 68.748637zM69.351255 127.152337V406.264772h279.112435V127.152337z" fill="#2591ee" ></path><path d="M757.590896 532.814491a68.698419 68.698419 0 0 1-49.113343-20.087257l-197.055991-197.206645a69.702782 69.702782 0 0 1 0-98.226687L708.477553 20.087257a69.702782 69.702782 0 0 1 98.226687 0l197.055991 197.055991a69.702782 69.702782 0 0 1 0 98.226686l-197.055991 197.055991a68.748637 68.748637 0 0 1-49.113344 20.087257z m0-464.065854l-197.05599 197.055991 197.05599 197.055991 197.055991-197.055991z" fill="#f7ac0e" ></path><path d="M347.861072 1023.998142H69.351255A69.552127 69.552127 0 0 1 0 954.646887v-279.112435a69.501909 69.501909 0 0 1 69.351255-69.351255h279.112435a69.552127 69.552127 0 0 1 69.351255 69.351255v279.112435a69.702782 69.702782 0 0 1-69.953873 69.351255z m-278.509817-347.911291v279.112436h279.112435v-279.112436zM896.845805 1023.998142H617.683152a69.602345 69.602345 0 0 1-69.301037-69.351255v-279.112435a69.552127 69.552127 0 0 1 69.301037-69.351255h279.112435a69.501909 69.501909 0 0 1 69.351255 69.351255v279.112435a68.849073 68.849073 0 0 1-69.351255 69.351255z m-278.509817-347.911291v279.112436h279.112435v-279.112436z" fill="#2591ee" ></path></symbol><symbol id="guanyuwomen-color" viewBox="0 0 1271 1024"><path d="M195.831172 315.35669A312.390621 312.390621 0 0 1 302.962759 80.295724 323.336828 323.336828 0 0 1 552.783448 2.824828c138.699034 15.39531 254.516966 122.067862 277.892414 257.447724 22.598621 125.351724-33.897931 251.727448-143.077517 320.052965 177.469793 60.875034 311.190069 212.815448 342.369103 398.900966 1.871448 10.946207-1.235862 22.068966-8.474482 30.543448s-17.902345 13.417931-29.131035 13.453241h-3.884138c-19.067586 0-34.462897-14.018207-37.676138-32.556138-34.957241-204.694069-216.346483-360.695172-435.164689-360.695172-218.782897 0-400.207448 156.001103-435.2 360.695172-3.142621 18.537931-18.537931 32.556138-37.605518 32.556138h-3.884138a38.629517 38.629517 0 0 1-29.166344-13.417931 37.323034 37.323034 0 0 1-8.474483-30.578758c31.214345-186.085517 164.934621-337.990621 342.404414-398.900966-92.12469-57.661793-147.879724-157.590069-147.879725-264.968827z m79.942621 0c0 130.295172 107.414069 235.943724 239.863173 235.943724 132.484414 0 239.863172-105.613241 239.898482-235.943724 0-130.295172-107.414069-235.908414-239.898482-235.908414-132.449103 0-239.827862 105.613241-239.863173 235.908414z" fill="#2591ee" ></path><path d="M980.95669 528.207448a264.827586 264.827586 0 0 0 125.139862-224.220689c-0.03531-132.413793-98.939586-244.70069-232.165518-263.556414a34.392276 34.392276 0 0 0-26.871172 8.050758 33.227034 33.227034 0 0 0-11.581793 25.211587c0 16.41931 12.217379 30.260966 28.777931 32.626758 99.928276 14.124138 174.150621 98.33931 174.185931 197.632 0 98.657103-73.233655 182.483862-172.314483 197.420138-17.584552 2.542345-30.614069 17.302069-30.649379 34.78069v0.282483c0 18.008276 13.665103 33.544828 31.885241 35.063172 170.231172 14.124138 307.800276 140.182069 336.119173 302.680276 2.824828 16.384 16.41931 28.70731 33.297655 28.70731h0.353103a34.215724 34.215724 0 0 0 25.847173-12.040827 33.050483 33.050483 0 0 0 7.344552-27.188966c-27.047724-156.530759-139.828966-284.177655-289.368276-335.448276" fill="#f7ac0e" ></path></symbol><symbol id="header-color" viewBox="0 0 1024 1024"><path d="M1024 409.6H0V0h1024v409.6zM102.4 307.2h819.2V102.4H102.4v204.8zM0 563.2h102.4v153.6H0zM153.6 1024H0v-153.6h102.4v51.2h51.2zM921.6 563.2h102.4v153.6h-102.4zM1024 1024h-153.6v-102.4h51.2v-51.2h102.4zM307.2 921.6h153.6v102.4H307.2zM563.2 921.6h153.6v102.4h-153.6z" fill="#479def" ></path></symbol><symbol id="xuanzhong-color" viewBox="0 0 1365 1024"><path d="M1209.912889 75.093333a56.888889 56.888889 0 1 1 83.285333 77.368889l-739.555555 796.444445a56.888889 56.888889 0 0 1-83.285334 0l-398.222222-428.828445a56.888889 56.888889 0 0 1 83.285333-77.368889L512 826.595556 1209.912889 75.093333z" fill="#479def" ></path></symbol><symbol id="zhaoxiangji-color" viewBox="0 0 1024 1024"><path d="M745.4 430.9m-36 0a36 36 0 1 0 72 0 36 36 0 1 0-72 0Z" fill="#f7ac0e" ></path><path d="M511 400c-88.7 0-160.8 72.1-160.8 160.8 0 88.7 72.1 160.8 160.8 160.8s160.8-72.2 160.8-160.8c0-88.7-72.1-160.8-160.8-160.8z m0 249.7c-49 0-88.8-39.9-88.8-88.8S462 472 511 472s88.9 39.9 88.9 88.8-39.9 88.9-88.9 88.9z" fill="#f7ac0e" ></path><path d="M807.1 281.9h-12.9l-11.7-55c-5-28.3-40.1-65.9-82.6-65.9H322.1c-42.4 0-74.8 25.8-82.4 65.1l-11.9 55.8h-12.9c-66.2 0-120 53.8-120 120v335.9c0 66.1 53.8 120 120 120h592.2c66.1 0 120-53.8 120-120V401.9c-0.1-66.2-53.9-120-120-120z m48 455.9c0 26.5-21.5 48-48 48H214.9c-26.5 0-48-21.5-48-48V401.9c0-26.5 21.5-48 48-48h42c1.6 0 3.1-0.3 4.7-0.5 0.7-0.1 1.5-0.1 2.2-0.2 2-0.4 3.9-1 5.8-1.7l0.9-0.3c1.8-0.7 3.5-1.7 5.2-2.7 0.3-0.2 0.7-0.3 1-0.5 1.5-1 2.8-2.1 4.1-3.2 0.5-0.4 1-0.7 1.4-1.1 1.1-1.1 2-2.3 3-3.5 0.5-0.6 1.1-1.2 1.5-1.8 0.9-1.3 1.6-2.7 2.3-4.1 0.3-0.7 0.8-1.3 1.1-2 0.8-1.8 1.3-3.7 1.8-5.7 0.1-0.4 0.3-0.7 0.3-1.1v-0.1c0-0.1 0-0.2 0.1-0.2l18.1-84.6c0.8-4 1.4-7.5 11.9-7.5h377.8c2.8 0 9.3 5 12.2 9.2l17.7 83V325.6c0.5 2.2 1.1 4.3 2 6.3 0.2 0.6 0.6 1.1 0.8 1.6 0.7 1.5 1.4 2.9 2.3 4.2 0.4 0.6 0.9 1.2 1.4 1.8 0.9 1.1 1.7 2.3 2.7 3.3 0.6 0.6 1.2 1.2 1.8 1.7 1 0.9 2 1.8 3.1 2.5 0.7 0.5 1.4 1 2.2 1.5 1.1 0.7 2.3 1.3 3.5 1.9 0.8 0.4 1.6 0.8 2.4 1.1 1.4 0.5 2.8 0.9 4.2 1.3 0.7 0.2 1.4 0.4 2.1 0.5 2.2 0.4 4.5 0.7 6.8 0.7h42.1c26.4 0 48 21.5 48 48v335.8z" fill="#2591ee" ></path></symbol><symbol id="fangda-color" viewBox="0 0 1024 1024"><path d="M674.414 394.644l253.292-252.418-0.868 143.044c-0.348 11.864 9.244 22.327 21.106 21.979h15.177c11.864-0.349 21.804-7.326 21.979-19.364l0.699-212.995c0-0.175 0.348-11.338 0.348-11.338 0.175-5.929-1.222-11.338-5.06-15.177-3.838-3.838-9.067-6.279-15.177-6.106l-10.816 0.175c-0.174 0-0.344 0-0.52 0.175l-211.252-0.875c-11.864 0.349-21.804 10.122-21.979 22.156v15.177c1.747 14.129 12.907 22.329 24.77 21.979l139.205 0.349-252.593 251.549c-11.514 11.514-11.514 30.177 0 41.689a29.17 29.17 0 0 0 41.693 0h-0.004zM355.18 632.585L101.715 884.136l0.873-142.352c0.349-11.859-9.248-22.323-21.11-21.979H65.432c-11.864 0.349-21.804 7.327-21.979 19.365l-0.699 213.17c0 0.175-0.348 11.338-0.348 11.338-0.175 5.936 1.222 11.338 5.055 15.177 3.838 3.838 9.073 6.279 15.177 6.106l10.815-0.175c0.175 0 0.349 0 0.525-0.175l212.125 0.874c11.859-0.349 21.804-10.117 21.979-22.156v-15.176c-1.746-14.129-12.91-22.329-24.775-21.979l-139.206-0.349L396.52 674.282c11.514-11.514 11.514-30.181 0-41.693-11.334-11.688-29.824-11.688-41.34 0.001z m630.619 319.754l-0.524-213.17c-0.349-11.865-10.122-19.016-21.98-19.365h-15.176c-11.865-0.344-21.283 10.122-21.111 21.979l0.874 143.049-253.466-252.247c-11.514-11.514-30.18-11.514-41.693 0-11.509 11.513-11.509 30.18 0 41.693L885.145 925.82l-139.205 0.349c-11.864-0.349-22.852 8.024-24.774 21.979v15.177c0.348 11.864 10.122 21.804 21.979 22.156l211.253-0.874c0.174 0 0.348 0.175 0.524 0.175l10.816 0.175c5.928 0.174 11.338-2.093 15.176-6.106 3.838-3.838 5.232-9.243 5.056-15.177 0 0-0.175-11.164-0.175-11.338h0.005zM144.282 101.407l139.205-0.349c11.859 0.349 22.848-8.024 24.77-21.979V63.9c-0.349-11.864-10.117-21.804-21.979-22.156l-212.296 0.874c-0.175 0-0.349-0.175-0.525-0.175l-10.814-0.175c-5.936-0.174-11.338 2.093-15.177 6.106-3.838 3.838-5.237 9.243-5.055 15.177 0 0 0.348 11.164 0.348 11.338l0.52 213.17c0.175 11.86 10.122 19.016 21.979 19.36h16.051c11.864 0.348 21.282-10.117 21.105-21.979l-0.698-142.346 253.296 251.725c11.508 11.514 30.176 11.514 41.688 0 11.514-11.514 11.514-30.18 0-41.693L144.281 101.41z m0 0z" fill="#479def" ></path></symbol><symbol id="kuandu-color" viewBox="0 0 1024 1024"><path d="M688.64 357.888c-13.312-13.312-34.304-13.312-47.616 0-6.144 6.144-9.728 14.848-9.728 23.552s3.584 17.408 9.728 23.552l73.216 73.216h-404.48l71.68-71.68c12.8-12.8 12.8-34.304 0-47.616-13.312-13.312-34.304-13.312-47.616 0L213.504 479.744l-1.024 0.512c-4.096 1.536-7.168 3.584-9.216 6.144-6.656 6.656-9.728 15.36-9.216 25.088-0.512 10.24 3.072 19.456 9.216 25.6 3.072 3.072 6.144 4.608 9.216 6.144l1.024 0.512 0.512 0.512 119.808 119.808c13.312 13.312 34.304 13.312 47.616 0 12.8-12.8 12.8-34.304 0-47.616l-71.68-71.68h404.992l-73.216 73.216c-6.144 6.144-9.728 14.848-9.728 23.552 0 8.704 3.584 17.408 9.728 23.552 6.144 6.144 14.848 9.728 23.552 9.728s17.408-3.584 23.552-9.728l130.56-130.56c6.144-6.144 9.728-14.848 9.728-23.552 0-8.704-3.584-17.408-9.728-23.552l-130.56-129.536z" fill="#f7ac0e" ></path><path d="M859.648 66.56H164.352C110.08 66.56 66.56 110.08 66.56 164.352v695.296c0 53.76 44.032 97.792 97.792 97.792h695.296c53.76 0 97.792-44.032 97.792-97.792V164.352c0-54.272-44.032-97.792-97.792-97.792z m30.72 767.488c0 31.232-25.6 56.832-56.832 56.832H189.952C158.72 890.88 133.12 865.28 133.12 834.048V189.952C133.12 158.72 158.72 133.12 189.952 133.12h644.096c31.232 0 56.832 25.6 56.832 56.832v644.096z" fill="#2591ee" ></path></symbol><symbol id="gongzuotai-color" viewBox="0 0 1024 1024"><path d="M819.2 750.933333H208.213333c-54.613333 0-102.4-44.373333-102.4-102.4L102.4 238.933333c0-58.026667 44.373333-102.4 102.4-102.4h614.4c58.026667 0 102.4 44.373333 102.4 102.4v409.6c0 58.026667-44.373333 102.4-102.4 102.4zM204.8 204.8c-17.066667 0-34.133333 13.653333-34.133333 34.133333l3.413333 409.6c0 17.066667 17.066667 34.133333 34.133333 34.133334H819.2c20.48 0 34.133333-13.653333 34.133333-34.133334V238.933333c0-20.48-13.653333-34.133333-34.133333-34.133333H204.8z" fill="#2591ee" ></path><path d="M409.6 552.96c-10.24 0-20.48-3.413333-27.306667-13.653333-10.24-13.653333-6.826667-34.133333 6.826667-47.786667l204.8-143.36c17.066667-10.24 37.546667-6.826667 47.786667 6.826667 10.24 17.066667 6.826667 37.546667-6.826667 47.786666l-204.8 146.773334c-6.826667 3.413333-13.653333 3.413333-20.48 3.413333zM750.933333 955.733333H273.066667c-20.48 0-34.133333-13.653333-34.133334-34.133333s13.653333-34.133333 34.133334-34.133333h477.866666c20.48 0 34.133333 13.653333 34.133334 34.133333s-13.653333 34.133333-34.133334 34.133333z" fill="#f7ac0e" ></path></symbol><symbol id="zhankai-color" viewBox="0 0 1194 1024"><path d="M1087.14166693 962l-960.3 0c-29.47500001 0-44.17499971-15.075-44.17500058-45.29999971 0-30.22499972 14.69999971-45.37500029 44.17500058-45.37500029L1087.14166694 871.325C1116.54166635 871.325 1131.16666635 886.47499971 1131.16666635 916.70000029 1131.24166693 946.925 1116.54166635 962 1087.14166693 962z m1e-8-809.325l-960.30000001 0c-29.47500001 0-44.1749997-15.14999971-44.17500058-45.37500029 0-30.22499972 14.69999971-45.29999971 44.17500058-45.29999971L1087.14166693 62c29.40000029 0 44.1 15.07500001 44.1 45.2999997 0 30.22499972-14.69999971 45.37500029-44.09999999 45.3750003z m-436.50000001 537.75l-523.87500058 0c-29.40000029 0-44.1-15.00000029-44.1-45.29999971 0-30.15 14.69999971-45.29999971 44.1-45.30000058L650.64166693 599.82499971c29.40000029 0 44.1 15.14999971 44.1 45.30000058 0 30.22499972-14.69999971 45.37500029-44.1 45.37499942z m0-271.87499971l-523.87500058 0c-29.40000029 0-44.1-15.14999971-44.1-45.37500029 0-30.15 14.69999971-45.29999971 44.1-45.29999971L650.64166693 327.87500029c29.40000029 0 44.1 15.14999971 44.1 45.29999971 0 30.22499972-14.69999971 45.37500029-44.1 45.37500029z m219.74999942 92.925L1132.66666663 331.775 1132.66666664 691.17499971l-262.27500029-179.69999942z" fill="#479def" ></path></symbol><symbol id="wuliaoguanli-color" viewBox="0 0 1024 1024"><path d="M489.2 989.2l7.3 4.2 7.4-3.9c-4.7 2.4-10.2 2.3-14.7-0.3zM322.5 508.2l-116.7-64.6c-14.5-8-32.8-2.8-40.8 11.7s-2.8 32.8 11.7 40.8l116.7 64.6c14.5 8 32.8 2.8 40.8-11.7s2.8-32.8-11.7-40.8z" fill="#f7ac0e" ></path><path d="M504.6 555.2v-37.6c0-5.6 3-10.7 7.9-13.3l365.3-196.7v144.5c21.4 9.4 41.5 21.1 60 34.9V271.8c3.1-7 0.6-16.1-7.4-19.8L482.8 42.9c-4-1.9-8.7-1.9-12.7 0L44 238.7l-2.2 1c-5.4 2.5-8.8 7.8-8.8 13.7V701c0 5.4 2.9 10.4 7.6 13.1l440.6 253 0.8 0.5c4.5 2.6 10 2.7 14.6 0.2l8-4.3 29.7-15.9c-53.8-55.3-86.9-130.8-86.9-214 0-66.5 21.2-128.1 57.2-178.4zM155.8 253.3L469.9 109c4-1.8 8.7-1.8 12.7 0l314.1 146.8c11.3 5.3 11.7 21.1 0.8 27L482.2 452.5c-4.5 2.4-10 2.4-14.4-0.1l-313-172.2c-10.8-5.9-10.3-21.7 1-26.9z m288.8 597.6c0 11.6-12.5 18.9-22.6 13.1L100.6 679.4c-4.7-2.7-7.6-7.7-7.6-13.1v-326c0-11.5 12.3-18.8 22.4-13.2L436.8 504c4.8 2.7 7.8 7.7 7.8 13.2v333.7z" fill="#2591ee" ></path><path d="M754.6 636.5c-53.6 0-97.2 43.6-97.2 97.2s43.6 97.2 97.2 97.2 97.2-43.6 97.2-97.2-43.6-97.2-97.2-97.2z m0 144.4c-26 0-47.2-21.2-47.2-47.2s21.2-47.2 47.2-47.2 47.2 21.2 47.2 47.2-21.1 47.2-47.2 47.2z" fill="#f7ac0e" ></path><path d="M955.5 681.6c-5.2-2.3-9-6.4-10.8-11.8-1.8-5.4-1.3-11 1.5-16 14.6-26.1 11.4-57.5-8.2-80-19.7-22.5-50.3-30-78.1-19-5.3 2.1-10.9 1.8-16-0.7s-8.7-6.9-10.2-12.3c-8.1-28.8-32.6-48.7-62.4-50.7-29.8-2-56.8 14.4-68.7 41.8-2.3 5.2-6.4 9-11.8 10.8-5.4 1.8-11 1.3-16-1.5-26.1-14.6-57.5-11.4-80 8.2s-30 50.3-19 78.1c2.1 5.3 1.8 10.9-0.7 16s-6.9 8.7-12.3 10.2c-28.8 8.1-48.7 32.6-50.7 62.4s14.4 56.8 41.8 68.7c5.2 2.3 9 6.4 10.8 11.8 1.8 5.4 1.3 11-1.5 15.9-14.6 26.1-11.4 57.5 8.2 80 13.6 15.6 32.6 24 52.2 24 8.6 0 17.4-1.6 25.9-5 5.3-2.1 10.9-1.8 16 0.7s8.7 6.9 10.2 12.3c8.1 28.8 32.6 48.7 62.4 50.7 1.7 0.1 3.3 0.2 5 0.2 27.8 0 52.5-16.1 63.7-42 2.3-5.2 6.4-9 11.8-10.8 5.4-1.8 11-1.3 16 1.5 26.1 14.6 57.5 11.4 80-8.2s30-50.3 19-78.1c-2.1-5.3-1.8-10.9 0.7-16s6.9-8.7 12.3-10.2c28.8-8.1 48.7-32.6 50.7-62.4 2-29.8-14.4-56.7-41.8-68.6z m-8.1 65.2c-0.2 3.3-1.9 14.2-14.3 17.6-19 5.3-34.9 18.5-43.6 36.1-8.8 17.6-9.6 38.3-2.4 56.6 4.7 12-2.9 20-5.4 22.1-2.5 2.1-11.4 8.7-22.6 2.3l-12.2 21.8 12.2-21.8c-17.2-9.6-37.7-11.6-56.4-5.3-18.7 6.3-33.9 20.2-41.7 38.3-5.1 11.8-16.2 12-19.4 11.8-3.3-0.2-14.2-1.9-17.6-14.3-5.3-19-18.5-34.9-36.1-43.6-9.7-4.8-20.4-7.3-31-7.3-8.7 0-17.4 1.6-25.6 4.9-12 4.7-20-2.9-22.1-5.4-2.1-2.5-8.7-11.4-2.3-22.6 9.6-17.2 11.6-37.7 5.3-56.4-6.3-18.7-20.2-33.9-38.3-41.7-11.8-5.1-12-16.2-11.8-19.4 0.2-3.3 1.9-14.2 14.3-17.6 19-5.3 34.9-18.5 43.6-36.1 8.8-17.6 9.6-38.3 2.4-56.6-4.7-12 2.9-20 5.4-22.1 2.5-2.1 11.4-8.7 22.6-2.3 17.2 9.6 37.7 11.6 56.4 5.3 18.7-6.3 33.9-20.2 41.7-38.3 5.1-11.8 16.2-12 19.4-11.8 3.3 0.2 14.2 1.9 17.6 14.3 5.3 19 18.5 34.9 36.1 43.6 17.6 8.8 38.3 9.6 56.6 2.4 12-4.7 20 2.9 22.1 5.4 2.1 2.5 8.7 11.4 2.3 22.6-9.6 17.2-11.6 37.7-5.3 56.4 6.3 18.7 20.2 33.9 38.3 41.7 11.8 5.2 12 16.2 11.8 19.4z" fill="#f7ac0e" ></path></symbol><symbol id="bianji-color" viewBox="0 0 1024 1024"><path d="M881.777778 419.669333c-15.701333 0-28.444444 11.832889-28.444445 26.396445v441.799111c0 14.620444-12.743111 26.396444-28.444444 26.396444H199.111111c-15.701333 0-28.444444-11.776-28.444444-26.396444V249.912889c0-14.620444 12.743111-26.396444 28.444444-26.396445h211.228445c15.701333 0 28.444444-11.832889 28.444444-26.453333 0-14.563556-12.743111-26.396444-28.444444-26.396444H199.111111C152.007111 170.666667 113.777778 206.165333 113.777778 249.912889v637.952C113.777778 931.669333 152.007111 967.111111 199.111111 967.111111h625.777778c47.104 0 85.333333-35.498667 85.333333-79.246222V446.065778c0-14.563556-12.743111-26.396444-28.444444-26.396445z" fill="#2591ee" ></path><path d="M287.744 581.176889a29.582222 29.582222 0 0 0 4.266667 33.223111 34.588444 34.588444 0 0 0 34.019555 10.353778l128.170667-31.061334L910.222222 166.912 792.632889 56.888889l-453.973333 424.903111-50.915556 99.384889z m96.768-68.949333l408.120889-381.952 39.196444 36.636444-406.129777 380.074667-67.356445 16.384 26.168889-51.2z" fill="#f7ac0e" ></path></symbol><symbol id="app-color" viewBox="0 0 1024 1024"><path d="M544 552.325V800a32 32 0 0 1-32 32 31.375 31.375 0 0 1-32-32V552.325L256 423.037a32 32 0 0 1-11.525-43.512A31.363 31.363 0 0 1 288 368l224 128 222.075-128a31.363 31.363 0 0 1 43.525 11.525 31.988 31.988 0 0 1-11.525 43.513L544 551.038z m0 0" fill="#f7ac0e" ></path><path d="M64 256v512l448 256 448-256V256L512 0z m832 480L512 960 128 736V288L512 64l384 224z m0 0" fill="#2591ee" ></path></symbol><symbol id="shangcheng1-color" viewBox="0 0 1024 1024"><path d="M785.067 170.667H204.8c-18.876 0-34.133 14.643-34.133 32.768v617.13c0 18.091 15.257 32.768 34.133 32.768h614.4c18.876 0 34.133-14.677 34.133-32.768v-617.13c0-18.125-15.257-32.768-34.133-32.768m-34.133 68.266v546.134H238.933V238.933h515.414" fill="#2591ee" ></path><path d="M512 566.272c-78.336 0-146.193-46.182-168.926-114.927l-10.752-32.427 64.853-21.401 10.684 32.426C421.137 470.05 463.974 498.04 512 498.04s90.863-27.989 104.14-68.096l10.685-32.426 64.853 21.436-10.752 32.392C658.193 520.09 590.336 566.306 512 566.306" fill="#f7ac0e" ></path></symbol><symbol id="cebianlan-color" viewBox="0 0 1024 1024"><path d="M934.4 119.488H89.6a25.6 25.6 0 0 0-25.6 25.6v695.424a25.6 25.6 0 0 0 25.6 25.6h844.8a25.6 25.6 0 0 0 25.6-25.6V145.088a25.6 25.6 0 0 0-25.6-25.6z m-806.4 64h187.712v618.624H128z m768 618.624H379.712V183.488H896z" fill="#2591ee" ></path><path d="M512 304h238.912v64H512zM512 472h238.912v64H512zM512 640h238.912v64H512z" fill="#f7ac0e" ></path></symbol></svg>',s=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss");if(s&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(l){console&&console.log(l)}}function p(){o||(o=!0,e())}a=function(){var l,c,a,t,e,h=document.createElement("div");h.innerHTML=d,d=null,(l=h.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",c=l,(a=document.body).firstChild?(t=c,(e=a.firstChild).parentNode.insertBefore(t,e)):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),a()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(e=a,h=l.document,o=!1,(i=function(){try{h.documentElement.doScroll("left")}catch(l){return void setTimeout(i,50)}p()})(),h.onreadystatechange=function(){"complete"==h.readyState&&(h.onreadystatechange=null,p())})}(window);
\ No newline at end of file

evm_monitor/src/icons/icon.js

+!function(c){var a,h,l,t,o,z,p='<svg><symbol id="tianqi-yu" viewBox="0 0 1024 1024"><path d="M951.906 562.671c-8.558-91.602-73.08-168.267-161.876-192.335C764.27 240.339 649.612 142.312 512.035 142.312c-137.555 0-252.241 98.027-278 227.989-88.846 24.053-153.406 100.761-161.945 192.408-8.538 91.65 40.746 178.963 123.624 219.012h-0.035c15.54 7.828 34.481 1.572 42.309-13.968 7.827-15.54 1.571-34.481-13.969-42.304-66.559-31.559-102.347-105.047-86.144-176.906s80.062-122.88 153.723-122.822c0-121.741 98.69-220.431 220.436-220.431 121.74 0 220.431 98.69 220.431 220.431 73.368-0.033 137.035 50.612 153.507 122.107 16.471 71.494-18.62 144.891-84.607 176.959-15.713 7.463-22.401 26.245-14.944 41.963 7.463 15.712 26.25 22.4 41.962 14.938l0.063-0.028c82.806-40.098 132.014-127.386 123.46-218.989z"  ></path><path d="M338 717.682c-17.05 0-31 13.95-31 31L286.988 850.688c0 17.05 13.95 31 31 31s31-13.95 31-31L369 748.681c0-17.049-13.95-30.999-31-30.999zM460.667 717.682c-17.05 0-31 13.95-31 31l-20.012 102.006c0 17.05 13.95 31 31 31s31-13.95 31-31l20.012-102.006c0-17.05-13.95-31-31-31zM583.333 717.682c-17.05 0-31 13.95-31 31l-20.012 102.006c0 17.05 13.95 31 31 31s31-13.95 31-31l20.012-102.006c0-17.05-13.95-31-31-31zM706 717.682c-17.05 0-31 13.95-31 31l-20.012 102.006c0 17.05 13.95 31 31 31s31-13.95 31-31L737 748.681c0-17.049-13.95-30.999-31-30.999z"  ></path></symbol><symbol id="tianqi-qing" viewBox="0 0 1356 1024"><path d="M876.997524 210.515509C727.911131 210.515509 606.592609 331.834031 606.592609 480.920425s121.318522 270.404915 270.404915 270.404915 270.404915-121.318522 270.404915-270.404915S1026.097191 210.515509 876.997524 210.515509z m-4.420029 471.283965c-108.217714 0-196.445746-88.028932-196.445747-196.445747s88.228032-196.445746 196.445747-196.445746a196.33956 196.33956 0 0 1 196.259919 196.259919c0 108.416815-88.028932 196.631573-196.259919 196.631574zM965.982138 0c19.671121 0 35.718615 14.919258 35.718615 33.515237v66.884467c0 18.449972-15.928033 33.515237-35.718615 33.515238s-35.718615-14.932531-35.718615-33.515238V33.515237c0-18.463245 15.928033-33.515237 35.718615-33.515237zM1235.657018 93.218816c13.910483 13.910483 14.706884 35.838075 1.566257 48.96543l-47.279713 47.306259c-13.034441 13.047714-34.935487 12.463686-48.952156-1.53971s-14.706884-35.838075-1.566257-48.952156l47.279713-47.30626c13.047714-13.060987 34.935487-12.463686 48.952156 1.526437zM1354.957989 331.581837c5.787186 18.79508-3.743088 38.492748-21.502845 44.001193l-63.924508 19.710941c-17.627024 5.428805-36.714117-5.309344-42.554396-24.263704s3.756361-38.492748 21.516119-44.001193l63.911234-19.697668c17.640297-5.442078 36.727391 5.309344 42.554396 24.250431zM1337.384059 593.890002c-5.561538 18.87472-24.409711 30.037616-42.249109 24.781366l-64.150155-18.87472c-17.706664-5.216431-27.648411-24.741545-22.047053-43.802092s24.409711-30.024343 42.235836-24.768092l64.163428 18.901266c17.706664 5.229704 27.648411 24.741545 22.047053 43.735725zM707.868355 42.833137c16.870442-10.114301 38.306921-5.561538 47.863741 10.393042l34.364732 57.38074c9.490453 15.821847 3.583808 36.926491-13.419368 47.107159s-38.306921 5.548265-47.784101-10.406315l-34.378005-57.380741c-9.47718-15.821847-3.570534-36.926491 13.419368-47.093885z"  ></path><path d="M220.523624 977.105215c-3.822728 0.345107-7.472902 0.703488-11.282357 0.876042-105.005561 5.893372-192.662838-86.276848-192.662839-192.649566a192.662838 192.662838 0 0 1 192.702659-192.649565 180.730087 180.730087 0 0 1 21.688672 1.207876c-0.172554-3.982008-0.172554-7.964017-0.172554-11.946025 0-147.719237 119.805359-267.524596 267.458229-267.524596a267.537869 267.537869 0 0 1 262.812553 216.95309 233.783712 233.783712 0 0 1 36.793757-2.95996c124.092654 0 224.771099 100.678445 224.7711 224.7711a225.28876 225.28876 0 0 1-103.492398 189.065757c-35.06822 22.564714-76.720028 36.966311-121.504349 35.585882-6.065926-0.172554-11.946025-0.517661-17.879217-1.22115-1.898091 0.172554-3.982008 0.172554-5.893373 0.172554H220.523624z"  ></path><path d="M826.664938 482.805242h-2.415751a313.530066 313.530066 0 0 0-297.110918-213.99313c-161.271339 0-294.389879 122.592764-311.393055 279.218427C94.944353 559.352716 0 661.584145 0 785.331691a244.229847 244.229847 0 0 0 76.202367 176.535705c42.68713 40.443932 96.324783 62.132604 152.550741 62.132604 4.167835 0 8.163117-0.172554 12.330952-0.345107 3.636901-0.172554 7.287075-0.530934 10.923977-0.876042h550.844491c1.725537 0 3.464347-0.172554 5.203158-0.172554 5.734092 0.517661 11.454911 0.876042 17.361556 1.048596 50.332586 1.552983 101.700494-13.193721 147.692691-42.872957a269.27668 269.27668 0 0 0 124.105928-227.531959c0.03982-149.11294-121.291975-270.444735-270.550923-270.444735z m103.080924 427.588059c-21.370112 14.05649-56.000311 30.608371-96.961904 29.201395-4.950964-0.185827-9.901927 0.783128-14.839618 0.252194H244.08384l-4.93769 0.35838c-2.99978 0.358381-6.185386-0.796402-9.185166-0.610574-35.320414 2.309565-70.654102-11.21599-98.382154-37.722893a156.81149 156.81149 0 0 1-48.394675-112.82357c0-82.905414 67.110114-150.519917 149.418227-150.519917a127.941929 127.941929 0 0 1 16.790802 1.075142l54.221681 6.211933-2.482118-54.978262c-0.172554-3.371434-0.172554-6.756141-0.172554-10.127575 0-125.446537 101.209379-227.399225 225.726781-227.399224 108.270808 0 201.343617 77.582796 221.665133 184.340441l8.481678 45.009968 44.863961-7.472903a185.136843 185.136843 0 0 1 29.851789-2.495392c100.306791 0 182.097243 82.37448 182.097243 183.437853a182.296343 182.296343 0 0 1-83.900916 154.263004z"  ></path></symbol><symbol id="tianqi-yejianyouyu" viewBox="0 0 1030 1024"><path d="M137.856 1000.218z m35.277-473.6A256.87 256.87 0 0 1 37.888 416.282L0 353.254l72.14 14.31a173.773 173.773 0 0 0 203.93-205.542 173.26 173.26 0 0 0-39.73-79.692L187.7 27.136l73.522 1.024a255.514 255.514 0 0 1 251.674 233.242l-64.922 5.734a190.336 190.336 0 0 0-121.267-161.1 239.002 239.002 0 0 1-172.902 324.838c-5.274 1.024-10.42 1.945-15.693 2.739a193.92 193.92 0 0 0 56.32 31.257z"  ></path><path d="M355.866 838.989h-32.743a215.04 215.04 0 1 1 42.931-425.959l31.95 6.528-12.929 64-31.949-6.528a154.931 154.931 0 0 0-30.003-2.97 150.016 150.016 0 0 0 0 300.007h32.64z"  ></path><path d="M869.888 530.688h-65.152v-32.64a209.434 209.434 0 0 0-413.235-45.568l-7.45 31.718-63.437-14.95 7.45-31.718a274.586 274.586 0 0 1 541.824 60.467z"  ></path><path d="M837.248 838.989h-32.717v-65.152h32.64a121.6 121.6 0 1 0 0-243.2h-32.64v-65.152h32.64a186.88 186.88 0 1 1 0 373.504z m-430.08 0h-83.917v-65.152h122.88z"  ></path><path d="M806.784 838.989H677.402l45.568-65.152h83.814z m-251.11-40.96a43.98 43.98 0 0 1-87.936 0c0-24.269 43.98-87.603 43.98-87.603s43.956 63.283 43.956 87.577z m95.948 65.945a37.222 37.222 0 1 1-74.419 0c0-20.48 37.223-74.086 37.223-74.086S651.622 843.52 651.622 864z m-83.712 85.197a29.875 29.875 0 1 1-59.776 0 195.968 195.968 0 0 1 29.876-59.545 195.968 195.968 0 0 1 29.926 59.52z"  ></path></symbol><symbol id="tianqi-yintian" viewBox="0 0 1024 1024"><path d="M280.806 864.41h-36.275a239.283 239.283 0 1 1 47.847-473.805l35.456 7.168-14.439 71.04-35.456-7.168a172.672 172.672 0 0 0-33.408-3.303 166.758 166.758 0 1 0 0 333.517h36.275z"  ></path><path d="M852.454 521.446H779.93v-36.25a232.96 232.96 0 0 0-459.597-50.687l-8.295 35.251-70.604-16.589 8.294-35.251a305.46 305.46 0 0 1 602.7 67.405z"  ></path><path d="M816.23 864.41h-36.275v-72.55h36.275a135.27 135.27 0 1 0 0-270.542h-36.275V448.82h36.275a207.795 207.795 0 0 1 0 415.59z"  ></path><path d="M244.531 791.987h571.674v72.525H244.53z"  ></path></symbol><symbol id="tianqi-wu" viewBox="0 0 1024 1024"><path d="M302.592 684.902h-32.128a211.866 211.866 0 1 1 42.394-419.481l31.41 6.451-12.8 62.925-31.41-6.451a151.885 151.885 0 0 0-29.492-2.919 147.712 147.712 0 1 0 0 295.424h32.128v64z"  ></path><path d="M808.755 381.184h-64.153v-32.128a206.285 206.285 0 0 0-407.04-44.902l-7.348 31.206-62.438-14.694 7.347-31.207a270.413 270.413 0 0 1 533.581 59.623z"  ></path><path d="M776.755 684.902h-32.128V620.75h32.128a119.731 119.731 0 1 0 0-239.463h-32.128v-64.128h32.128a183.885 183.885 0 1 1 0 367.744z"  ></path><path d="M270.464 620.646h506.189v64.128H270.464z m-120.73 120.935h719.77v64.153h-719.77z m0 113.382h719.77v64.154h-719.77z"  ></path></symbol><symbol id="yonghuming1" viewBox="0 0 1025 1024"><path d="M512 598.231579c-167.073684 0-301.810526-134.736842-301.810526-296.421053C210.189474 134.736842 344.926316 0 512 0c167.073684 0 301.810526 134.736842 301.810526 296.421053 0 167.073684-134.736842 301.810526-301.810526 301.810526z m0-528.168421c-129.347368 0-231.747368 102.4-231.747368 226.357895 0 123.957895 102.4 226.357895 231.747368 226.357894s231.747368-102.4 231.747368-226.357894c0-123.957895-102.4-226.357895-231.747368-226.357895z" fill="#231815" ></path><path d="M905.431579 1024H118.568421c-37.726316 0-70.063158-16.168421-91.621053-43.115789-21.557895-26.947368-32.336842-59.284211-21.557894-91.621053 43.115789-242.526316 258.694737-361.094737 506.610526-361.094737 247.915789 0 463.494737 123.957895 512 361.094737 5.389474 32.336842 0 64.673684-21.557895 91.621053-26.947368 26.947368-59.284211 43.115789-97.010526 43.115789z m-393.431579-425.768421c-215.578947 0-398.821053 97.010526-441.936842 307.2-5.389474 16.168421 5.389474 26.947368 10.778947 32.336842 10.778947 10.778947 21.557895 16.168421 37.726316 16.168421h792.252632c16.168421 0 26.947368-5.389474 37.726315-16.168421 5.389474-5.389474 10.778947-16.168421 10.778948-32.336842-48.505263-210.189474-231.747368-307.2-447.326316-307.2z" fill="#231815" ></path></symbol><symbol id="mima1" viewBox="0 0 1024 1024"><path d="M238.839 443.189V340.934c0-153.178 120.905-272.685 272.685-272.685 151.785 0 272.685 119.506 272.685 272.685v102.254c0 18.828 15.263 34.085 34.084 34.085 18.828 0 34.085-15.257 34.085-34.085V340.934C852.378 149.919 700.764 0.079 511.524 0.079c-189.241 0-340.855 149.84-340.855 340.855v102.254c0 18.828 15.263 34.085 34.085 34.085 18.827 0.001 34.085-15.256 34.085-34.084z m-102.255 67.965c0.116-18.811 15.444-33.975 34.255-33.88h681.367c18.811-0.095 34.146 15.069 34.256 33.88v409.439c-0.11 18.811-15.445 33.975-34.256 33.88H170.839c-18.811 0.095-34.139-15.069-34.255-33.88V511.154z m-68.17 0v409.439c0.11 56.46 45.966 102.144 102.425 102.051h681.367c56.465 0.093 102.315-45.591 102.425-102.051V511.154c-0.11-56.46-45.96-102.144-102.425-102.051H170.839c-56.46-0.093-102.315 45.591-102.425 102.051z m0 0" fill="#455079" ></path><path d="M477.438 647.703v136.34c0 18.828 15.263 34.085 34.085 34.085 18.827 0 34.084-15.257 34.084-34.085v-136.34c0-18.826-15.257-34.084-34.084-34.084-18.822 0-34.085 15.257-34.085 34.084z m0 0" fill="#455079" ></path></symbol><symbol id="xinxi" viewBox="0 0 1024 1024"><path d="M213.3 469.3a64 64 0 1 0 128 0 64 64 0 1 0-128 0z"  ></path><path d="M344.7 978.2c-5.2 0-10.4-0.8-15.5-2.5-13.8-4.5-24.8-14.8-30.4-28.1l-39.3-94.2H128.3C57.5 853.3 0 795.8 0 725.1V213.6C0 142.9 57.5 85.3 128.3 85.3h767.5c70.7 0 128.3 57.5 128.3 128.3v511.5c0 70.7-57.5 128.3-128.3 128.3H566.5L370.2 971.1c-7.7 4.7-16.6 7.1-25.5 7.1z m-18.3-80.3s-0.1 0 0 0zM128.3 170.7c-23.7 0-42.9 19.3-42.9 42.9v511.5c0 23.7 19.3 42.9 42.9 42.9h188.2l45.3 108.7L542.9 768h352.9c23.7 0 42.9-19.3 42.9-42.9V213.6c0-23.7-19.3-42.9-42.9-42.9H128.3z"  ></path><path d="M448 469.3a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM682.7 469.3a64 64 0 1 0 128 0 64 64 0 1 0-128 0z"  ></path></symbol><symbol id="guanyuwomen" viewBox="0 0 1271 1024"><path d="M195.831172 315.35669A312.390621 312.390621 0 0 1 302.962759 80.295724 323.336828 323.336828 0 0 1 552.783448 2.824828c138.699034 15.39531 254.516966 122.067862 277.892414 257.447724 22.598621 125.351724-33.897931 251.727448-143.077517 320.052965 177.469793 60.875034 311.190069 212.815448 342.369103 398.900966 1.871448 10.946207-1.235862 22.068966-8.474482 30.543448s-17.902345 13.417931-29.131035 13.453241h-3.884138c-19.067586 0-34.462897-14.018207-37.676138-32.556138-34.957241-204.694069-216.346483-360.695172-435.164689-360.695172-218.782897 0-400.207448 156.001103-435.2 360.695172-3.142621 18.537931-18.537931 32.556138-37.605518 32.556138h-3.884138a38.629517 38.629517 0 0 1-29.166344-13.417931 37.323034 37.323034 0 0 1-8.474483-30.578758c31.214345-186.085517 164.934621-337.990621 342.404414-398.900966-92.12469-57.661793-147.879724-157.590069-147.879725-264.968827z m79.942621 0c0 130.295172 107.414069 235.943724 239.863173 235.943724 132.484414 0 239.863172-105.613241 239.898482-235.943724 0-130.295172-107.414069-235.908414-239.898482-235.908414-132.449103 0-239.827862 105.613241-239.863173 235.908414z"  ></path><path d="M980.95669 528.207448a264.827586 264.827586 0 0 0 125.139862-224.220689c-0.03531-132.413793-98.939586-244.70069-232.165518-263.556414a34.392276 34.392276 0 0 0-26.871172 8.050758 33.227034 33.227034 0 0 0-11.581793 25.211587c0 16.41931 12.217379 30.260966 28.777931 32.626758 99.928276 14.124138 174.150621 98.33931 174.185931 197.632 0 98.657103-73.233655 182.483862-172.314483 197.420138-17.584552 2.542345-30.614069 17.302069-30.649379 34.78069v0.282483c0 18.008276 13.665103 33.544828 31.885241 35.063172 170.231172 14.124138 307.800276 140.182069 336.119173 302.680276 2.824828 16.384 16.41931 28.70731 33.297655 28.70731h0.353103a34.215724 34.215724 0 0 0 25.847173-12.040827 33.050483 33.050483 0 0 0 7.344552-27.188966c-27.047724-156.530759-139.828966-284.177655-289.368276-335.448276"  ></path></symbol><symbol id="dianzan" viewBox="0 0 1024 1024"><path d="M753.117 941.535c-1.091 0-2.182-0.05-3.256-0.152L134 941.266c-18.373 0-35.638-7.164-48.608-20.169-12.987-12.986-20.117-30.268-20.101-48.633l0.252-381.364c0.034-34.472 25.856-63.767 60.05-68.147 97.636-12.525 175.204-34.279 202.419-56.78 42.97-35.478 80.638-105.303 80.638-149.422 0-75.303 58.961-134.289 134.213-134.289 60.79 0 113.122 40.093 129.28 98.223a32.527 32.527 0 0 1 2.03 6.225c6.327 28.742 9.53 57.643 9.53 85.907 0 28.549-3.037 56.804-9.06 84.43l146.428 0.118c3.004 0 5.84 0.202 8.625 0.596 44.715 2.533 85.168 26.427 108.524 64.237 14.8 23.196 21.863 50.62 20.269 79.086a68.664 68.664 0 0 1-2.316 20.42l-73.91 326.447c-2.164 8.137-5.05 14.74-8.826 20.612-11.242 21.376-27.635 39.229-47.568 51.712-21.643 13.744-46.862 21.06-72.751 21.06zM542.863 151.19c-37.332 0-65.488 28.188-65.488 65.564 0 72.106-53.691 159.54-105.588 202.41-49.128 40.604-156.26 61.544-237.452 71.964l-0.32 381.396 619.102 0.134c0.889 0 1.762 0.034 2.634 0.1a67.18 67.18 0 0 0 33.457-10.419c10.1-6.325 18.305-15.47 23.91-26.56a34.168 34.168 0 0 1 2.633-4.389l73.743-326.229c-0.152-1.736 0.167-4.756 0.285-6.502 1.057-14.446-2.332-28.255-9.765-39.933-11.98-19.38-32.55-31.267-55.287-32.207a33.926 33.926 0 0 1-4.781-0.529l-190.657-0.05a34.393 34.393 0 0 1-27.986-14.463 34.393 34.393 0 0 1-4.43-31.192c12.014-34.53 18.104-70.689 18.104-107.467 0-21.687-2.315-43.91-6.862-66.16a32.51 32.51 0 0 1-1.426-4.622c-6.93-29.931-33.17-50.846-63.826-50.846z"  ></path><path d="M261.13 821.343h-58.417V546.441h58.416c15.183 0 27.49 15.385 27.49 34.363v206.177c0 18.978-12.307 34.362-27.49 34.362z"  ></path></symbol><symbol id="wuliaoxinxix" viewBox="0 0 1024 1024"><path d="M754.432 586.56H446.976a28.672 28.672 0 0 0-20.416 8.256 27.968 27.968 0 0 0-8.32 20.16c0 15.808 13.44 28.288 28.736 28.288h307.456a28.608 28.608 0 0 0 20.352-8.192 27.904 27.904 0 0 0 8.32-20.096c0.704-15.168-12.672-28.416-28.672-28.416z m-133.376 122.688h-174.08a28.672 28.672 0 0 0-20.416 8.256 27.968 27.968 0 0 0-8.32 20.096c0 15.872 13.44 28.352 28.736 28.352h174.08a28.608 28.608 0 0 0 20.352-8.256 27.904 27.904 0 0 0 8.32-20.096 27.52 27.52 0 0 0-8.192-20.224 28.16 28.16 0 0 0-20.48-8.128z"  ></path><path d="M930.304 378.24l-79.36-151.04c-19.264-36.928-68.032-66.56-110.72-66.56H253.312c-42.048 0-90.688 28.992-110.72 65.92L63.232 374.144c-17.344 31.616-30.72 85.056-30.72 121.28l0.64 270.016c0 15.872 12.736 28.352 28.672 28.352 16 0 28.736-12.48 28.736-28.352l-0.64-270.08c0-1.92 0.64-5.184 0.64-7.872h810.432c0.64 3.968 0.64 7.936 0.64 11.264v301.504a28.352 28.352 0 0 1-28.736 28.416H119.232a28.736 28.736 0 0 1-28.672-28.416v-34.88a27.904 27.904 0 0 0-8.32-20.16 28.608 28.608 0 0 0-20.352-8.256 28.672 28.672 0 0 0-20.352 8.32 27.968 27.968 0 0 0-8.32 20.16v35.52c0 47.488 38.72 85.76 86.656 85.76h753.664c48 0 86.72-38.976 86.72-85.76V499.456c0-36.224-12.608-89.6-29.952-121.28z m-827.072 43.392c2.88-9.984 6.656-19.712 11.392-28.992l79.36-147.648c10.048-18.432 38.016-35.584 59.328-35.584h487.552c21.376 0 49.408 17.152 59.392 35.584l79.36 151.04c4.032 7.168 7.296 16.384 10.752 26.368H103.232v-0.768z"  ></path></symbol><symbol id="yingyongguanli" viewBox="0 0 1024 1024"><path d="M347.861072 475.013409H69.351255A69.552127 69.552127 0 0 1 0 405.662154V127.152337a69.501909 69.501909 0 0 1 69.351255-69.351255h279.112435A69.552127 69.552127 0 0 1 417.814945 127.152337V406.264772a69.602345 69.602345 0 0 1-69.953873 68.748637zM69.351255 127.152337V406.264772h279.112435V127.152337z"  ></path><path d="M757.590896 532.814491a68.698419 68.698419 0 0 1-49.113343-20.087257l-197.055991-197.206645a69.702782 69.702782 0 0 1 0-98.226687L708.477553 20.087257a69.702782 69.702782 0 0 1 98.226687 0l197.055991 197.055991a69.702782 69.702782 0 0 1 0 98.226686l-197.055991 197.055991a68.748637 68.748637 0 0 1-49.113344 20.087257z m0-464.065854l-197.05599 197.055991 197.05599 197.055991 197.055991-197.055991z"  ></path><path d="M347.861072 1023.998142H69.351255A69.552127 69.552127 0 0 1 0 954.646887v-279.112435a69.501909 69.501909 0 0 1 69.351255-69.351255h279.112435a69.552127 69.552127 0 0 1 69.351255 69.351255v279.112435a69.702782 69.702782 0 0 1-69.953873 69.351255z m-278.509817-347.911291v279.112436h279.112435v-279.112436zM896.845805 1023.998142H617.683152a69.602345 69.602345 0 0 1-69.301037-69.351255v-279.112435a69.552127 69.552127 0 0 1 69.301037-69.351255h279.112435a69.501909 69.501909 0 0 1 69.351255 69.351255v279.112435a68.849073 68.849073 0 0 1-69.351255 69.351255z m-278.509817-347.911291v279.112436h279.112435v-279.112436z"  ></path></symbol><symbol id="shangcheng" viewBox="0 0 1028 1024"><path d="M1021.560488 310.923784l-56.554026-169.832937c-23.407558-70.393531-51.257425-135.319603-133.696451-139.07848-100.293696-4.527739-201.783398 0-302.162523 0-110.203465 0-221.175791-4.015165-331.379255 0-71.162392 2.562871-104.565148 51.257425-126.007837 115.585494-20.417541 60.996336-41.603944 121.736385-61.252624 182.989008-36.734488 114.560346 26.226716 244.754206 142.068498 270.29749 119.686088 26.312145 224.422094-63.815495 237.749024-187.26046h-71.931253c11.362063 106.102871 90.042211 192.129916 195.547078 192.129916 107.469735 0 187.943893-89.871353 195.888794-198.793382h-71.931254c8.542904 119.002656 104.479719 212.547457 221.004933 196.486798 120.882095-16.402376 192.984207-142.666501 162.31518-262.865164-11.789208-46.815115-81.243019-26.995577-69.368382 19.990396 19.392393 76.886138-24.688993 158.043728-102.941996 168.466072-71.845825 9.568053-134.209026-48.096551-139.420197-122.419818a35.965627 35.965627 0 1 0-71.931254 0c-10.934917 155.139141-230.658414 162.31518-247.744223 6.663465-5.211172-48.352838-66.720082-48.438267-71.931253 0-11.447492 106.444587-138.053332 155.309999-211.266022 78.680148-53.56401-56.297739-32.463036-124.213828-10.67863-189.396186 17.598383-52.453432 32.377607-107.469735 53.136864-158.641732 14.693795-36.307343 41.94566-36.649059 73.383547-36.649059 199.903959 0 401.003925-7.17604 600.822455 0 53.051435 1.879439 60.312904 47.24226 74.664983 90.640214l54.247442 162.998613c15.12094 45.53368 84.660181 25.970429 69.368382-19.990396zM54.247442 635.04157V768.054589c0 48.011122-5.809175 101.318844 12.47264 146.510808 44.252244 109.605461 151.380263 108.922029 246.719074 108.665742l331.635543-0.768862c87.479339 0 191.7882 15.20637 258.508282-57.92089 44.508531-48.779983 44.508531-107.128019 44.508531-169.320362V635.04157c0-48.438267-71.931254-48.523696-71.931254 0v120.796666c0 36.734488 6.578036 81.755594-2.819158 117.806649-23.920132 91.836221-139.249339 73.810693-208.105147 73.810693l-300.112226 0.683432c-63.046633 0-167.355494 18.794389-215.0249-35.025907-33.317327-37.588779-23.663845-97.389108-23.663844-144.802227v-133.269306c0-48.438267-71.931254-48.523696-71.931254 0zM309.167704 661.268286v149.329966"  ></path><path d="M273.287506 661.268286v149.500824c0 48.438267 71.931254 48.523696 71.931254 0V661.268286c0-48.438267-71.931254-48.523696-71.931254 0z"  ></path></symbol><symbol id="shoucang" viewBox="0 0 1024 1024"><path d="M773.48 959.09c-7.39 0-14.8-1.78-21.64-5.37L513 828.14 274.19 953.72c-15.84 8.28-34.62 6.9-48.98-3.57-14.41-10.5-21.48-27.92-18.45-45.47l45.59-265.91L59.14 450.44C46.38 438 41.87 419.75 47.38 402.8c5.5-16.95 19.89-29.08 37.53-31.63l266.99-38.8L471.31 90.42c7.89-15.98 23.87-25.91 41.68-25.91 17.82 0 33.8 9.93 41.68 25.92l119.41 241.94 266.99 38.8c17.64 2.55 32.04 14.68 37.55 31.64 5.5 16.96 0.98 35.22-11.81 47.65L773.66 638.77l45.6 265.93c3 17.57-4.08 34.97-18.48 45.45-8.15 5.92-17.69 8.94-27.3 8.94zM513.01 757.18c7.4 0 14.78 1.75 21.51 5.26l210.11 110.49-40.1-233.86c-2.57-15.07 2.4-30.45 13.34-41.12L887.78 432.3l-234.79-34.12a46.44 46.44 0 0 1-35.02-25.49L513 159.99 408 372.76a46.536 46.536 0 0 1-34.99 25.42L138.2 432.3l169.9 165.62c10.95 10.65 15.95 26.03 13.37 41.12l-40.11 233.89 210.01-110.44c6.78-3.56 14.22-5.31 21.64-5.31zM679.1 342.51l0.02 0.08c0.01-0.03-0.02-0.05-0.02-0.08zM493.55 120.58c0.01 0.03 0.03 0.07 0.04 0.09l-0.04-0.09z"  ></path><path d="M432.09 638.06c-10.82 0-21.46-5.13-28.07-14.69l-82.38-119.16c-10.71-15.48-6.83-36.71 8.65-47.42 15.49-10.7 36.74-6.83 47.42 8.65l82.38 119.14c10.71 15.49 6.83 36.72-8.65 47.42a33.774 33.774 0 0 1-19.35 6.06z"  ></path></symbol><symbol id="zhuti" viewBox="0 0 1024 1024"><path d="M516.36157 1023.694557a403.669026 403.669026 0 0 1-153.394229-38.348557 588.011214 588.011214 0 0 1-358.592651-538.225368A459.509907 459.509907 0 0 1 482.722485 0.393577c296.696734 0 538.225367 180.97828 538.225367 403.669026 0 313.516277-211.253457 336.390855-336.390854 353.210397a244.21976 244.21976 0 0 0-92.843876 20.856233c-16.819543 16.819543-13.455634 31.62074 8.07338 75.351552s47.09472 96.880566-8.07338 147.339194a108.990637 108.990637 0 0 1-75.351552 22.874578zM482.722485 67.671748A392.904518 392.904518 0 0 0 69.634515 447.793414a521.405825 521.405825 0 0 0 318.898531 476.32945c93.516658 41.712466 147.339194 34.311867 155.412574 26.911269s14.128416-24.220142-7.400598-67.278171a121.773489 121.773489 0 0 1 6.055035-154.067012 237.491943 237.491943 0 0 1 134.556342-39.021339c134.556342-15.473979 282.568318-32.966304 279.877191-285.932226C953.669681 218.374851 742.416225 67.671748 482.722485 67.671748z"  ></path><path d="M247.248887 538.618945a100.917256 100.917256 0 1 1 100.917256-100.917257A100.917256 100.917256 0 0 1 247.248887 538.618945z m0-134.556342a33.639085 33.639085 0 1 0 33.639085 33.639085 33.639085 33.639085 0 0 0-33.639085-33.639085zM381.805229 336.784432a100.917256 100.917256 0 1 1 100.917256-100.917256A100.917256 100.917256 0 0 1 381.805229 336.784432z m0-134.556342a33.639085 33.639085 0 1 0 33.639085 33.639086 33.639085 33.639085 0 0 0-33.639085-33.639086zM650.917912 336.784432a100.917256 100.917256 0 1 1 100.917257-100.917256A100.917256 100.917256 0 0 1 650.917912 336.784432z m0-134.556342a33.639085 33.639085 0 1 0 33.639086 33.639086 33.639085 33.639085 0 0 0-33.639086-33.639086zM785.474254 538.618945a100.917256 100.917256 0 1 1 100.917256-100.917257 100.917256 100.917256 0 0 1-100.917256 100.917257z m0-134.556342a33.639085 33.639085 0 1 0 33.639086 33.639085 33.639085 33.639085 0 0 0-33.639086-33.639085z"  ></path></symbol><symbol id="suoxiao" viewBox="0 0 1024 1024"><path d="M407.806963 366.396831l-0.165776-269.456988c-0.011256-19.010983-15.344476-34.43016-34.225499-34.418904-18.881023 0.01228-34.1948 15.4509-34.183544 34.46086l0.119727 194.447621L121.745808 72.528873c-12.799514-12.873192-33.528628-12.859889-46.38033 0.028653-12.785188 12.95608-12.772908 33.827433 0.028653 46.699602L293.068755 338.091158l-193.118346 0.12075c-18.879999 0.01228-34.1948 15.4509-34.183544 34.46086 0.011256 19.009959 15.3455 34.43016 34.225499 34.418904l267.615037-0.166799C392.577097 406.9085 407.824359 393.94935 407.806963 366.396831L407.806963 366.396831z"  ></path><path d="M655.570883 407.217539l267.615037-0.432859c18.881023-0.030699 34.17945-15.484669 34.149774-34.495652-0.030699-19.010983-15.379269-34.414811-34.259268-34.385135l-193.118346 0.312108L947.148681 118.895901c12.772908-12.900821 12.739139-33.772174-0.074701-46.699602-12.880355-12.860912-33.608445-12.827143-46.38033 0.074701L683.57161 291.660686l-0.310062-194.447621c-0.030699-19.009959-15.379269-34.414811-34.259268-34.384112-18.881023 0.030699-34.17945 15.484669-34.149774 34.495652l0.429789 269.456988C615.32732 394.332067 630.53365 407.257447 655.570883 407.217539L655.570883 407.217539z"  ></path><path d="M367.764991 613.848643l-267.615037-0.415462c-18.879999-0.029676-34.227546 15.376199-34.257222 34.387181-0.028653 19.010983 15.270798 34.463929 34.151821 34.492582l193.118346 0.299829L75.28873 901.243165c-12.812817 12.859889-12.844539 33.731242-0.071631 46.699602 12.840446 12.900821 33.568537 12.933567 46.38033 0.071631L339.40406 729.315444l-0.297782 194.447621c-0.028653 19.010983 15.270798 34.463929 34.151821 34.492582 18.881023 0.029676 34.227546-15.376199 34.257222-34.387181l0.412392-269.456988C407.969669 626.859981 392.734686 613.887528 367.764991 613.848643L367.764991 613.848643z"  ></path><path d="M614.842273 654.450363l0.472767 269.456988c0.033769 19.010983 15.384385 34.412764 34.264385 34.378995 18.881023-0.033769 34.177404-15.489786 34.143635-34.500768l-0.340761-194.447621 217.85575 218.650859c12.814864 12.858866 33.542954 12.822027 46.38033-0.082888 12.770861-12.971429 12.734022-33.842783-0.081864-46.699602l-217.923288-218.582297 193.118346-0.343831c18.879999-0.033769 34.177404-15.489786 34.143635-34.500768-0.033769-19.010983-15.384385-34.412764-34.264385-34.378995l-267.615037 0.475837C629.956505 613.922321 614.793154 626.898867 614.842273 654.450363L614.842273 654.450363z"  ></path></symbol><symbol id="fonggeshehzi" viewBox="0 0 1024 1024"><path d="M611.68 699.91l-309-309a31.21 31.21 0 1 1 44.14-44.14l309 309a31.21 31.21 0 0 1-44.14 44.14z"  ></path><path d="M390 951.33l-169.2-169.2a31.23 31.23 0 0 1-8.83-26.48l9.03-63.43-66.92 6.93a31.16 31.16 0 0 1-25.27-9l-77.24-77.22a31.22 31.22 0 0 1 0-44.14L408 212.39a31.21 31.21 0 0 1 44.14 0l87.72 87.72c21-39.43 51.52-79.84 88.83-117.15 109-109 232.38-150.15 286.9-95.63s13.41 177.86-95.65 286.9c-37.32 37.31-77.72 67.83-117.15 88.83l87.72 87.72a31.21 31.21 0 0 1 0 44.14l-356.4 356.41a31.22 31.22 0 0 1-44.11 0zM275.94 749L412 885.12l312.3-312.27-97.7-97.7a31.21 31.21 0 0 1 11.67-51.5c43.21-15.26 93.33-49.36 137.53-93.56 88.45-88.45 116.14-178.09 95.63-198.62s-110.17 7.18-198.62 95.63c-44.2 44.2-78.3 94.32-93.57 137.53a31.2 31.2 0 0 1-51.49 11.67l-97.7-97.71-312.27 312.27 44.67 44.67 91.9-9.51a31.22 31.22 0 0 1 34.11 35.46z"  ></path><path d="M418.68 491.46L342.15 568a26.69 26.69 0 1 1-37.74-37.74l76.53-76.53a26.69 26.69 0 0 1 37.74 37.74zM547.21 625.46l-69.94 69.94c-9.52 9.52-26.77 7.72-38.51-4s-13.55-29-4-38.51l69.94-69.94c9.52-9.52 26.77-7.71 38.51 4s13.53 28.98 4 38.51z"  ></path></symbol><symbol id="xuanzhong" viewBox="0 0 1365 1024"><path d="M1209.912889 75.093333a56.888889 56.888889 0 1 1 83.285333 77.368889l-739.555555 796.444445a56.888889 56.888889 0 0 1-83.285334 0l-398.222222-428.828445a56.888889 56.888889 0 0 1 83.285333-77.368889L512 826.595556 1209.912889 75.093333z"  ></path></symbol><symbol id="zhankai" viewBox="0 0 1194 1024"><path d="M1087.14166693 962l-960.3 0c-29.47500001 0-44.17499971-15.075-44.17500058-45.29999971 0-30.22499972 14.69999971-45.37500029 44.17500058-45.37500029L1087.14166694 871.325C1116.54166635 871.325 1131.16666635 886.47499971 1131.16666635 916.70000029 1131.24166693 946.925 1116.54166635 962 1087.14166693 962z m1e-8-809.325l-960.30000001 0c-29.47500001 0-44.1749997-15.14999971-44.17500058-45.37500029 0-30.22499972 14.69999971-45.29999971 44.17500058-45.29999971L1087.14166693 62c29.40000029 0 44.1 15.07500001 44.1 45.2999997 0 30.22499972-14.69999971 45.37500029-44.09999999 45.3750003z m-436.50000001 537.75l-523.87500058 0c-29.40000029 0-44.1-15.00000029-44.1-45.29999971 0-30.15 14.69999971-45.29999971 44.1-45.30000058L650.64166693 599.82499971c29.40000029 0 44.1 15.14999971 44.1 45.30000058 0 30.22499972-14.69999971 45.37500029-44.1 45.37499942z m0-271.87499971l-523.87500058 0c-29.40000029 0-44.1-15.14999971-44.1-45.37500029 0-30.15 14.69999971-45.29999971 44.1-45.29999971L650.64166693 327.87500029c29.40000029 0 44.1 15.14999971 44.1 45.29999971 0 30.22499972-14.69999971 45.37500029-44.1 45.37500029z m219.74999942 92.925L1132.66666663 331.775 1132.66666664 691.17499971l-262.27500029-179.69999942z"  ></path></symbol><symbol id="header" viewBox="0 0 1024 1024"><path d="M1024 409.6H0V0h1024v409.6zM102.4 307.2h819.2V102.4H102.4v204.8zM0 563.2h102.4v153.6H0zM153.6 1024H0v-153.6h102.4v51.2h51.2zM921.6 563.2h102.4v153.6h-102.4zM1024 1024h-153.6v-102.4h51.2v-51.2h102.4zM307.2 921.6h153.6v102.4H307.2zM563.2 921.6h153.6v102.4h-153.6z"  ></path></symbol><symbol id="zhaoxiangji" viewBox="0 0 1024 1024"><path d="M745.4 430.9m-36 0a36 36 0 1 0 72 0 36 36 0 1 0-72 0Z"  ></path><path d="M511 400c-88.7 0-160.8 72.1-160.8 160.8 0 88.7 72.1 160.8 160.8 160.8s160.8-72.2 160.8-160.8c0-88.7-72.1-160.8-160.8-160.8z m0 249.7c-49 0-88.8-39.9-88.8-88.8S462 472 511 472s88.9 39.9 88.9 88.8-39.9 88.9-88.9 88.9z"  ></path><path d="M807.1 281.9h-12.9l-11.7-55c-5-28.3-40.1-65.9-82.6-65.9H322.1c-42.4 0-74.8 25.8-82.4 65.1l-11.9 55.8h-12.9c-66.2 0-120 53.8-120 120v335.9c0 66.1 53.8 120 120 120h592.2c66.1 0 120-53.8 120-120V401.9c-0.1-66.2-53.9-120-120-120z m48 455.9c0 26.5-21.5 48-48 48H214.9c-26.5 0-48-21.5-48-48V401.9c0-26.5 21.5-48 48-48h42c1.6 0 3.1-0.3 4.7-0.5 0.7-0.1 1.5-0.1 2.2-0.2 2-0.4 3.9-1 5.8-1.7l0.9-0.3c1.8-0.7 3.5-1.7 5.2-2.7 0.3-0.2 0.7-0.3 1-0.5 1.5-1 2.8-2.1 4.1-3.2 0.5-0.4 1-0.7 1.4-1.1 1.1-1.1 2-2.3 3-3.5 0.5-0.6 1.1-1.2 1.5-1.8 0.9-1.3 1.6-2.7 2.3-4.1 0.3-0.7 0.8-1.3 1.1-2 0.8-1.8 1.3-3.7 1.8-5.7 0.1-0.4 0.3-0.7 0.3-1.1v-0.1c0-0.1 0-0.2 0.1-0.2l18.1-84.6c0.8-4 1.4-7.5 11.9-7.5h377.8c2.8 0 9.3 5 12.2 9.2l17.7 83V325.6c0.5 2.2 1.1 4.3 2 6.3 0.2 0.6 0.6 1.1 0.8 1.6 0.7 1.5 1.4 2.9 2.3 4.2 0.4 0.6 0.9 1.2 1.4 1.8 0.9 1.1 1.7 2.3 2.7 3.3 0.6 0.6 1.2 1.2 1.8 1.7 1 0.9 2 1.8 3.1 2.5 0.7 0.5 1.4 1 2.2 1.5 1.1 0.7 2.3 1.3 3.5 1.9 0.8 0.4 1.6 0.8 2.4 1.1 1.4 0.5 2.8 0.9 4.2 1.3 0.7 0.2 1.4 0.4 2.1 0.5 2.2 0.4 4.5 0.7 6.8 0.7h42.1c26.4 0 48 21.5 48 48v335.8z"  ></path></symbol><symbol id="fangda" viewBox="0 0 1024 1024"><path d="M674.414 394.644l253.292-252.418-0.868 143.044c-0.348 11.864 9.244 22.327 21.106 21.979h15.177c11.864-0.349 21.804-7.326 21.979-19.364l0.699-212.995c0-0.175 0.348-11.338 0.348-11.338 0.175-5.929-1.222-11.338-5.06-15.177-3.838-3.838-9.067-6.279-15.177-6.106l-10.816 0.175c-0.174 0-0.344 0-0.52 0.175l-211.252-0.875c-11.864 0.349-21.804 10.122-21.979 22.156v15.177c1.747 14.129 12.907 22.329 24.77 21.979l139.205 0.349-252.593 251.549c-11.514 11.514-11.514 30.177 0 41.689a29.17 29.17 0 0 0 41.693 0h-0.004zM355.18 632.585L101.715 884.136l0.873-142.352c0.349-11.859-9.248-22.323-21.11-21.979H65.432c-11.864 0.349-21.804 7.327-21.979 19.365l-0.699 213.17c0 0.175-0.348 11.338-0.348 11.338-0.175 5.936 1.222 11.338 5.055 15.177 3.838 3.838 9.073 6.279 15.177 6.106l10.815-0.175c0.175 0 0.349 0 0.525-0.175l212.125 0.874c11.859-0.349 21.804-10.117 21.979-22.156v-15.176c-1.746-14.129-12.91-22.329-24.775-21.979l-139.206-0.349L396.52 674.282c11.514-11.514 11.514-30.181 0-41.693-11.334-11.688-29.824-11.688-41.34 0.001z m630.619 319.754l-0.524-213.17c-0.349-11.865-10.122-19.016-21.98-19.365h-15.176c-11.865-0.344-21.283 10.122-21.111 21.979l0.874 143.049-253.466-252.247c-11.514-11.514-30.18-11.514-41.693 0-11.509 11.513-11.509 30.18 0 41.693L885.145 925.82l-139.205 0.349c-11.864-0.349-22.852 8.024-24.774 21.979v15.177c0.348 11.864 10.122 21.804 21.979 22.156l211.253-0.874c0.174 0 0.348 0.175 0.524 0.175l10.816 0.175c5.928 0.174 11.338-2.093 15.176-6.106 3.838-3.838 5.232-9.243 5.056-15.177 0 0-0.175-11.164-0.175-11.338h0.005zM144.282 101.407l139.205-0.349c11.859 0.349 22.848-8.024 24.77-21.979V63.9c-0.349-11.864-10.117-21.804-21.979-22.156l-212.296 0.874c-0.175 0-0.349-0.175-0.525-0.175l-10.814-0.175c-5.936-0.174-11.338 2.093-15.177 6.106-3.838 3.838-5.237 9.243-5.055 15.177 0 0 0.348 11.164 0.348 11.338l0.52 213.17c0.175 11.86 10.122 19.016 21.979 19.36h16.051c11.864 0.348 21.282-10.117 21.105-21.979l-0.698-142.346 253.296 251.725c11.508 11.514 30.176 11.514 41.688 0 11.514-11.514 11.514-30.18 0-41.693L144.281 101.41z m0 0z"  ></path></symbol><symbol id="kuandu" viewBox="0 0 1024 1024"><path d="M688.64 357.888c-13.312-13.312-34.304-13.312-47.616 0-6.144 6.144-9.728 14.848-9.728 23.552s3.584 17.408 9.728 23.552l73.216 73.216h-404.48l71.68-71.68c12.8-12.8 12.8-34.304 0-47.616-13.312-13.312-34.304-13.312-47.616 0L213.504 479.744l-1.024 0.512c-4.096 1.536-7.168 3.584-9.216 6.144-6.656 6.656-9.728 15.36-9.216 25.088-0.512 10.24 3.072 19.456 9.216 25.6 3.072 3.072 6.144 4.608 9.216 6.144l1.024 0.512 0.512 0.512 119.808 119.808c13.312 13.312 34.304 13.312 47.616 0 12.8-12.8 12.8-34.304 0-47.616l-71.68-71.68h404.992l-73.216 73.216c-6.144 6.144-9.728 14.848-9.728 23.552 0 8.704 3.584 17.408 9.728 23.552 6.144 6.144 14.848 9.728 23.552 9.728s17.408-3.584 23.552-9.728l130.56-130.56c6.144-6.144 9.728-14.848 9.728-23.552 0-8.704-3.584-17.408-9.728-23.552l-130.56-129.536z"  ></path><path d="M859.648 66.56H164.352C110.08 66.56 66.56 110.08 66.56 164.352v695.296c0 53.76 44.032 97.792 97.792 97.792h695.296c53.76 0 97.792-44.032 97.792-97.792V164.352c0-54.272-44.032-97.792-97.792-97.792z m30.72 767.488c0 31.232-25.6 56.832-56.832 56.832H189.952C158.72 890.88 133.12 865.28 133.12 834.048V189.952C133.12 158.72 158.72 133.12 189.952 133.12h644.096c31.232 0 56.832 25.6 56.832 56.832v644.096z"  ></path></symbol><symbol id="cebianlan" viewBox="0 0 1024 1024"><path d="M934.4 119.488H89.6a25.6 25.6 0 0 0-25.6 25.6v695.424a25.6 25.6 0 0 0 25.6 25.6h844.8a25.6 25.6 0 0 0 25.6-25.6V145.088a25.6 25.6 0 0 0-25.6-25.6z m-806.4 64h187.712v618.624H128z m768 618.624H379.712V183.488H896z"  ></path><path d="M512 304h238.912v64H512zM512 472h238.912v64H512zM512 640h238.912v64H512z"  ></path></symbol><symbol id="gongzuotai" viewBox="0 0 1024 1024"><path d="M819.2 750.933333H208.213333c-54.613333 0-102.4-44.373333-102.4-102.4L102.4 238.933333c0-58.026667 44.373333-102.4 102.4-102.4h614.4c58.026667 0 102.4 44.373333 102.4 102.4v409.6c0 58.026667-44.373333 102.4-102.4 102.4zM204.8 204.8c-17.066667 0-34.133333 13.653333-34.133333 34.133333l3.413333 409.6c0 17.066667 17.066667 34.133333 34.133333 34.133334H819.2c20.48 0 34.133333-13.653333 34.133333-34.133334V238.933333c0-20.48-13.653333-34.133333-34.133333-34.133333H204.8z"  ></path><path d="M409.6 552.96c-10.24 0-20.48-3.413333-27.306667-13.653333-10.24-13.653333-6.826667-34.133333 6.826667-47.786667l204.8-143.36c17.066667-10.24 37.546667-6.826667 47.786667 6.826667 10.24 17.066667 6.826667 37.546667-6.826667 47.786666l-204.8 146.773334c-6.826667 3.413333-13.653333 3.413333-20.48 3.413333zM750.933333 955.733333H273.066667c-20.48 0-34.133333-13.653333-34.133334-34.133333s13.653333-34.133333 34.133334-34.133333h477.866666c20.48 0 34.133333 13.653333 34.133334 34.133333s-13.653333 34.133333-34.133334 34.133333z"  ></path></symbol><symbol id="wuliaoguanli" viewBox="0 0 1024 1024"><path d="M489.2 989.2l7.3 4.2 7.4-3.9c-4.7 2.4-10.2 2.3-14.7-0.3zM322.5 508.2l-116.7-64.6c-14.5-8-32.8-2.8-40.8 11.7s-2.8 32.8 11.7 40.8l116.7 64.6c14.5 8 32.8 2.8 40.8-11.7s2.8-32.8-11.7-40.8z"  ></path><path d="M504.6 555.2v-37.6c0-5.6 3-10.7 7.9-13.3l365.3-196.7v144.5c21.4 9.4 41.5 21.1 60 34.9V271.8c3.1-7 0.6-16.1-7.4-19.8L482.8 42.9c-4-1.9-8.7-1.9-12.7 0L44 238.7l-2.2 1c-5.4 2.5-8.8 7.8-8.8 13.7V701c0 5.4 2.9 10.4 7.6 13.1l440.6 253 0.8 0.5c4.5 2.6 10 2.7 14.6 0.2l8-4.3 29.7-15.9c-53.8-55.3-86.9-130.8-86.9-214 0-66.5 21.2-128.1 57.2-178.4zM155.8 253.3L469.9 109c4-1.8 8.7-1.8 12.7 0l314.1 146.8c11.3 5.3 11.7 21.1 0.8 27L482.2 452.5c-4.5 2.4-10 2.4-14.4-0.1l-313-172.2c-10.8-5.9-10.3-21.7 1-26.9z m288.8 597.6c0 11.6-12.5 18.9-22.6 13.1L100.6 679.4c-4.7-2.7-7.6-7.7-7.6-13.1v-326c0-11.5 12.3-18.8 22.4-13.2L436.8 504c4.8 2.7 7.8 7.7 7.8 13.2v333.7z"  ></path><path d="M754.6 636.5c-53.6 0-97.2 43.6-97.2 97.2s43.6 97.2 97.2 97.2 97.2-43.6 97.2-97.2-43.6-97.2-97.2-97.2z m0 144.4c-26 0-47.2-21.2-47.2-47.2s21.2-47.2 47.2-47.2 47.2 21.2 47.2 47.2-21.1 47.2-47.2 47.2z"  ></path><path d="M955.5 681.6c-5.2-2.3-9-6.4-10.8-11.8-1.8-5.4-1.3-11 1.5-16 14.6-26.1 11.4-57.5-8.2-80-19.7-22.5-50.3-30-78.1-19-5.3 2.1-10.9 1.8-16-0.7s-8.7-6.9-10.2-12.3c-8.1-28.8-32.6-48.7-62.4-50.7-29.8-2-56.8 14.4-68.7 41.8-2.3 5.2-6.4 9-11.8 10.8-5.4 1.8-11 1.3-16-1.5-26.1-14.6-57.5-11.4-80 8.2s-30 50.3-19 78.1c2.1 5.3 1.8 10.9-0.7 16s-6.9 8.7-12.3 10.2c-28.8 8.1-48.7 32.6-50.7 62.4s14.4 56.8 41.8 68.7c5.2 2.3 9 6.4 10.8 11.8 1.8 5.4 1.3 11-1.5 15.9-14.6 26.1-11.4 57.5 8.2 80 13.6 15.6 32.6 24 52.2 24 8.6 0 17.4-1.6 25.9-5 5.3-2.1 10.9-1.8 16 0.7s8.7 6.9 10.2 12.3c8.1 28.8 32.6 48.7 62.4 50.7 1.7 0.1 3.3 0.2 5 0.2 27.8 0 52.5-16.1 63.7-42 2.3-5.2 6.4-9 11.8-10.8 5.4-1.8 11-1.3 16 1.5 26.1 14.6 57.5 11.4 80-8.2s30-50.3 19-78.1c-2.1-5.3-1.8-10.9 0.7-16s6.9-8.7 12.3-10.2c28.8-8.1 48.7-32.6 50.7-62.4 2-29.8-14.4-56.7-41.8-68.6z m-8.1 65.2c-0.2 3.3-1.9 14.2-14.3 17.6-19 5.3-34.9 18.5-43.6 36.1-8.8 17.6-9.6 38.3-2.4 56.6 4.7 12-2.9 20-5.4 22.1-2.5 2.1-11.4 8.7-22.6 2.3l-12.2 21.8 12.2-21.8c-17.2-9.6-37.7-11.6-56.4-5.3-18.7 6.3-33.9 20.2-41.7 38.3-5.1 11.8-16.2 12-19.4 11.8-3.3-0.2-14.2-1.9-17.6-14.3-5.3-19-18.5-34.9-36.1-43.6-9.7-4.8-20.4-7.3-31-7.3-8.7 0-17.4 1.6-25.6 4.9-12 4.7-20-2.9-22.1-5.4-2.1-2.5-8.7-11.4-2.3-22.6 9.6-17.2 11.6-37.7 5.3-56.4-6.3-18.7-20.2-33.9-38.3-41.7-11.8-5.1-12-16.2-11.8-19.4 0.2-3.3 1.9-14.2 14.3-17.6 19-5.3 34.9-18.5 43.6-36.1 8.8-17.6 9.6-38.3 2.4-56.6-4.7-12 2.9-20 5.4-22.1 2.5-2.1 11.4-8.7 22.6-2.3 17.2 9.6 37.7 11.6 56.4 5.3 18.7-6.3 33.9-20.2 41.7-38.3 5.1-11.8 16.2-12 19.4-11.8 3.3 0.2 14.2 1.9 17.6 14.3 5.3 19 18.5 34.9 36.1 43.6 17.6 8.8 38.3 9.6 56.6 2.4 12-4.7 20 2.9 22.1 5.4 2.1 2.5 8.7 11.4 2.3 22.6-9.6 17.2-11.6 37.7-5.3 56.4 6.3 18.7 20.2 33.9 38.3 41.7 11.8 5.2 12 16.2 11.8 19.4z"  ></path></symbol><symbol id="bianji" viewBox="0 0 1024 1024"><path d="M881.777778 419.669333c-15.701333 0-28.444444 11.832889-28.444445 26.396445v441.799111c0 14.620444-12.743111 26.396444-28.444444 26.396444H199.111111c-15.701333 0-28.444444-11.776-28.444444-26.396444V249.912889c0-14.620444 12.743111-26.396444 28.444444-26.396445h211.228445c15.701333 0 28.444444-11.832889 28.444444-26.453333 0-14.563556-12.743111-26.396444-28.444444-26.396444H199.111111C152.007111 170.666667 113.777778 206.165333 113.777778 249.912889v637.952C113.777778 931.669333 152.007111 967.111111 199.111111 967.111111h625.777778c47.104 0 85.333333-35.498667 85.333333-79.246222V446.065778c0-14.563556-12.743111-26.396444-28.444444-26.396445z"  ></path><path d="M287.744 581.176889a29.582222 29.582222 0 0 0 4.266667 33.223111 34.588444 34.588444 0 0 0 34.019555 10.353778l128.170667-31.061334L910.222222 166.912 792.632889 56.888889l-453.973333 424.903111-50.915556 99.384889z m96.768-68.949333l408.120889-381.952 39.196444 36.636444-406.129777 380.074667-67.356445 16.384 26.168889-51.2z"  ></path></symbol><symbol id="app" viewBox="0 0 1024 1024"><path d="M544 552.325V800a32 32 0 0 1-32 32 31.375 31.375 0 0 1-32-32V552.325L256 423.037a32 32 0 0 1-11.525-43.512A31.363 31.363 0 0 1 288 368l224 128 222.075-128a31.363 31.363 0 0 1 43.525 11.525 31.988 31.988 0 0 1-11.525 43.513L544 551.038z m0 0"  ></path><path d="M64 256v512l448 256 448-256V256L512 0z m832 480L512 960 128 736V288L512 64l384 224z m0 0"  ></path></symbol><symbol id="shangcheng1" viewBox="0 0 1024 1024"><path d="M785.067 170.667H204.8c-18.876 0-34.133 14.643-34.133 32.768v617.13c0 18.091 15.257 32.768 34.133 32.768h614.4c18.876 0 34.133-14.677 34.133-32.768v-617.13c0-18.125-15.257-32.768-34.133-32.768m-34.133 68.266v546.134H238.933V238.933h515.414"  ></path><path d="M512 566.272c-78.336 0-146.193-46.182-168.926-114.927l-10.752-32.427 64.853-21.401 10.684 32.426C421.137 470.05 463.974 498.04 512 498.04s90.863-27.989 104.14-68.096l10.685-32.426 64.853 21.436-10.752 32.392C658.193 520.09 590.336 566.306 512 566.306"  ></path></symbol></svg>',i=(i=document.getElementsByTagName("script"))[i.length-1].getAttribute("data-injectcss");if(i&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}function d(){o||(o=!0,l())}a=function(){var c,a,h,l;(l=document.createElement("div")).innerHTML=p,p=null,(h=l.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",c=h,(a=document.body).firstChild?(l=c,(h=a.firstChild).parentNode.insertBefore(l,h)):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),a()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(l=a,t=c.document,o=!1,(z=function(){try{t.documentElement.doScroll("left")}catch(c){return void setTimeout(z,50)}d()})(),t.onreadystatechange=function(){"complete"==t.readyState&&(t.onreadystatechange=null,d())})}(window);
\ No newline at end of file

evm_monitor/src/icons/index.js

+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)

evm_monitor/src/icons/svg/chakan.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592624404870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1615" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 1024C229.236364 1024 0 794.763636 0 512S229.236364 0 512 0s512 229.236364 512 512-229.236364 512-512 512z m0-315.112727c115.991273 0 221.044364-65.629091 315.112727-196.887273-94.068364-131.258182-199.121455-196.887273-315.112727-196.887273S290.955636 380.741818 196.887273 512c94.068364 131.258182 199.121455 196.887273 315.112727 196.887273z m0-118.132364a78.754909 78.754909 0 1 0 0-157.509818 78.754909 78.754909 0 0 0 0 157.509818z" fill="#2F5DFF" p-id="1616"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/daoru.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592624385739" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1365" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512.32774941 3.66761529c-280.10144654 0-507.16808875 227.06547826-507.16808989 507.1669248 0 181.19341739 96.66559659 348.62370361 253.5834624 439.21983033s350.24789504 90.59729067 507.1669248 0c156.91786581-90.59729067 253.5834624-258.02641181 253.5834624-439.21983033 0.00116395-280.10144654-227.06547826-507.1669248-507.16575971-507.1669248z m221.16599466 808.89748138H301.22824931c-54.45291577 0-98.64722659-44.8230309-98.64722773-100.14683932V461.91202645h49.32070287v253.64167794c0 27.65433629 22.10297742 50.08098759 49.32652486 50.08098646h443.90961039c27.27128291 0 49.35446755-22.45925205 49.35446641-50.08098646v-407.04919324c0-27.68926493-22.08318464-50.11475229-49.35446641-50.11475229h-98.64140573v-46.95252651h98.64140573c54.49366528 0 98.68797725 44.82419485 98.68797724 100.20738162v400.77364338c0 55.25511509-44.19431197 100.14683933-98.68797724 100.14683932h-11.64411563zM582.05970887 394.60762283l77.56184348-47.24709376c5.44773689-3.34618397 12.07141149-3.28447659 17.00452922 0.58796942 4.89236821 3.83868131 7.02069874 10.53221319 5.24980565 16.77399836l-37.39832093 242.86496313c-2.34954752 8.61461959-11.01073863 13.88538311-19.23182592 11.68835812L407.96383346 531.76157981a14.8750336 14.8750336 0 0 1-9.31436089-7.27451535 16.53531875 16.53531875 0 0 1-1.86869305-5.95304107c-0.71138418-6.47347997 2.58124231-12.60000142 8.0476069-15.9112556l76.09250361-46.35757227c-85.41152029-156.28099584-166.94361088-210.72110478-288.45409963-147.01670059V291.61524679c181.33429703-160.44335104 302.51761891-56.21798685 389.59291847 102.99237604z" fill="#FFBD4A" p-id="1366"></path><path d="M192.4667904 291.61524679v17.63441323c121.51048875-63.70440419 203.04257821-9.26546034 288.45409963 147.01670059l-76.09250361 46.35757112c-5.46636573 3.31009138-8.75899221 9.43777565-8.0476069 15.91125675a16.53531875 16.53531875 0 0 0 1.86869305 5.95303993 14.87619755 14.87619755 0 0 0 9.31436089 7.27451534l217.28307086 87.5142383c8.22108729 2.19702499 16.8822784-3.07373853 19.23182592-11.68835812l37.39832206-242.86496199c1.77089309-6.24178631-0.35743858-12.93415424-5.24980679-16.77399951-4.93311773-3.87360995-11.55795741-3.93415339-17.00452921-0.58796828l-77.56184348 47.24709262c-87.07646237-159.21152683-208.25978425-263.43689102-389.59408242-102.99353998z" fill="#FFFFFF" p-id="1367"></path><path d="M843.82467186 712.4194213v-400.77364224c0-55.38318677-44.19431197-100.20738275-98.68797725-100.20738276h-98.64140572v46.95252651h98.64140572c27.27128291 0 49.35446755 22.42548736 49.35446756 50.11475228v407.04919325c0 27.62173554-22.08318464 50.08098759-49.35446756 50.08098759H301.22824931c-27.22238237 0-49.32652373-22.42665131-49.32652486-50.08098759v-253.6416768h-49.32070287v250.50739484c0 55.32380843 44.19431197 100.14683933 98.64722773 100.14683819h443.90961039c54.49250133-0.00232903 98.6868133-44.89288818 98.68681216-100.14800327z" fill="#FFFFFF" p-id="1368"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/dashboard.svg

+<svg t="1592446556659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1081" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.945211 511.945211m-511.945211 0a511.945211 511.945211 0 1 0 1023.890423 0 511.945211 511.945211 0 1 0-1023.890423 0Z" fill="#2C609E" p-id="1082"></path><path d="M513.917603 220.798288L344.291921 456.49909h92.921562v192.308187h153.40824V456.49909h92.921562L514.136758 220.798288z" fill="#FFFFFF" p-id="1083"></path><path d="M783.69695 586.67694h-58.952595v112.645478H299.693954V586.67694h-59.390904v172.584269h543.3939V586.67694z" fill="#FFFFFF" p-id="1084"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/fangda.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1593999074140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1432" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M22.727805 365.642927H49.95122a22.727805 22.727805 0 0 0 22.727804-22.727805V121.880976L324.682927 374.634146a22.727805 22.727805 0 0 0 32.218536 0l19.480976-19.480975a22.727805 22.727805 0 0 0 0-32.218537l-249.756098-249.756097h215.289757a22.727805 22.727805 0 0 0 23.726829-23.227317V22.727805a22.727805 22.727805 0 0 0-22.727805-22.727805H22.727805A22.727805 22.727805 0 0 0 0 22.727805v320.187317a22.727805 22.727805 0 0 0 22.727805 22.727805zM1001.272195 658.357073H974.04878a22.727805 22.727805 0 0 0-22.727804 22.727805v215.289756L699.317073 643.87122a22.727805 22.727805 0 0 0-32.218536 0l-19.480976 19.480975a22.727805 22.727805 0 0 0 0 32.218537l254.501463 255.250731h-221.034146a22.727805 22.727805 0 0 0-22.727805 22.727805v27.722927a22.727805 22.727805 0 0 0 22.727805 22.727805h320.187317a22.727805 22.727805 0 0 0 22.727805-22.727805V681.084878a22.727805 22.727805 0 0 0-22.727805-22.727805zM1001.272195 0H681.084878a22.727805 22.727805 0 0 0-22.727805 22.727805V49.95122a22.727805 22.727805 0 0 0 22.727805 22.727804h221.034146L646.618537 328.429268a22.727805 22.727805 0 0 0 0 32.218537l19.480975 19.480975a22.727805 22.727805 0 0 0 32.218537 0l252.503414-252.253658v215.04a22.727805 22.727805 0 0 0 22.727805 22.727805h27.722927a22.727805 22.727805 0 0 0 22.727805-22.727805V22.727805a22.727805 22.727805 0 0 0-22.727805-22.727805zM357.650732 649.365854A22.727805 22.727805 0 0 0 324.682927 649.365854L73.178537 902.119024v-221.034146a22.727805 22.727805 0 0 0-23.227317-22.727805H22.727805a22.727805 22.727805 0 0 0-22.727805 22.727805v320.187317a22.727805 22.727805 0 0 0 22.727805 22.727805h320.187317a22.727805 22.727805 0 0 0 22.727805-22.727805V974.04878a22.727805 22.727805 0 0 0-22.727805-22.727804H127.875122l249.756098-249.756098a22.727805 22.727805 0 0 0 0-32.218537z" fill="#0a40a0" p-id="1433"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/form.svg

+<svg t="1592444678283" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1832" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 25.6c268.8 0 486.4 217.6 486.4 486.4s-217.6 486.4-486.4 486.4-486.4-217.6-486.4-486.4S243.2 25.6 512 25.6z" fill="#00C3FF" p-id="1833"></path><path d="M625.152 311.296c-1.024-3.584-1.536-7.168-1.536-10.752V225.28h1.024c3.584 0 7.168 0.512 10.24 1.024 3.072 1.024 7.168 2.56 11.776 5.632 4.608 3.072 10.24 7.168 16.896 12.8 6.656 5.632 15.36 12.8 25.6 21.504 10.752 9.728 19.968 17.92 26.112 24.576 6.656 6.656 11.264 12.288 14.848 16.896 3.584 4.608 5.632 8.704 6.656 11.776 1.024 3.072 1.024 6.144 1.024 8.704V337.92h-90.112c-4.096 0-8.192-1.536-11.264-4.608-3.072-3.072-5.632-6.656-7.68-10.752-1.024-2.56-2.56-7.168-3.584-11.264z m214.016 315.904c-2.56-5.632-6.144-11.264-10.752-16.384-4.608-5.12-9.216-8.704-13.312-10.752-4.608-2.048-9.216-3.584-13.824-4.096-5.632-0.512-10.752 1.536-15.872 5.632-2.048 1.536-4.608 4.096-7.68 6.656-3.072 3.072-5.632 5.12-8.192 7.168l52.224 51.2c1.024-1.024 2.56-2.048 4.096-3.584 1.024-1.024 2.56-2.56 4.096-4.608s3.584-3.584 5.632-5.632c4.608-4.608 6.656-9.216 6.144-13.824-0.512-3.584-1.024-7.68-2.56-11.776z m-193.536 49.664L527.36 800.256H358.4c-7.68 0-16.384-2.048-25.6-6.656-9.216-4.608-17.92-10.752-25.6-17.92-8.192-7.168-14.848-15.872-19.968-25.6-5.12-9.216-7.68-19.456-8.192-29.696V304.128c0-8.704 2.048-17.408 5.632-27.136 3.584-9.216 9.216-17.92 15.872-25.6s14.336-13.824 23.04-18.944c8.192-5.12 17.408-7.68 27.136-7.68h234.496v76.288c0 7.68 1.024 15.872 3.584 25.088 2.56 9.216 6.144 17.408 11.264 24.576 5.12 7.68 11.776 13.824 19.968 18.944s17.92 7.68 29.184 7.68h89.088v202.24l-83.968 87.04c4.608-6.656 6.656-13.824 6.656-21.504 0-10.752-3.584-19.456-11.264-27.136-7.68-7.68-16.384-11.264-27.136-11.264H393.728c-10.752 0-19.456 3.584-27.136 11.264-7.168 7.168-11.264 16.896-11.264 27.136 0 10.752 3.584 19.456 11.264 27.136 7.168 7.168 16.384 11.264 27.136 11.264h229.376c9.216 0.512 16.384-2.048 22.528-6.656zM355.84 493.056c0 10.752 3.584 19.456 11.264 27.136 7.168 7.168 16.384 11.264 27.136 11.264h229.376c10.752 0 19.456-3.584 27.136-11.264 7.68-7.168 11.264-16.384 11.264-27.136 0-10.752-3.584-19.456-11.264-27.136s-16.384-11.264-27.136-11.264H393.728c-10.752 0-19.456 3.584-27.136 11.264-6.656 7.168-10.752 16.896-10.752 27.136z m333.824 201.728c-7.168 7.168-14.848 14.848-22.016 22.528-7.168 7.68-13.824 14.336-19.968 20.48l-23.04 23.04c-4.096 4.096-7.168 8.704-9.728 13.824-1.536 3.072-2.56 6.144-3.584 9.216l-4.608 14.336c-2.56 8.704-5.12 17.408-6.656 26.112-1.024 5.12-0.512 8.192 1.024 10.24 1.536 2.048 5.12 2.56 9.728 2.048 2.56-0.512 6.144-1.024 10.752-2.56 5.12-1.024 10.24-2.56 15.36-4.096 5.12-1.536 10.752-3.584 15.36-5.12 5.12-2.048 8.704-3.584 11.264-4.608 2.56-1.024 5.12-2.56 7.168-4.608 2.56-2.048 4.608-3.584 6.656-5.12l6.656-6.656c4.096-4.096 8.704-9.216 14.336-14.848l101.376-101.376-51.2-51.2c-19.456 19.456-38.912 38.912-58.88 58.368z" fill="#FFFFFF" p-id="1834"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/fuwu.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592816814641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1628" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M838.08711111 654.90488889c-9.10222222 0-17.97688889-4.32355555-23.43822222-12.51555556-8.76088889-12.97066667-5.34755555-30.49244445 7.62311111-39.25333333 68.38044445-46.19377778 142.10844445-150.41422222 142.10844445-238.02311111 0-140.40177778-114.23288889-254.63466667-254.5208889-254.63466667-67.01511111 0-130.27555555 26.05511111-178.40355555 73.15911111-11.03644445 10.80888889-28.672 10.80888889-39.70844445 0-48.01422222-47.21777778-111.27466667-73.15911111-178.28977777-73.15911111-140.40177778 0-254.63466667 114.23288889-254.63466667 254.63466667 0 97.05244445 53.93066667 184.32 140.74311111 227.78311111 13.99466667 6.94044445 19.56977778 24.00711111 12.62933333 38.00177778-7.05422222 13.99466667-24.00711111 19.56977778-38.00177777 12.62933333C68.15288889 590.39288889 2.27555555 483.78311111 2.27555555 365.11288889c0-171.57688889 139.60533333-311.18222222 311.18222223-311.18222222 73.04533333 0 142.44977778 25.25866667 198.08711111 71.45244444 55.75111111-46.30755555 125.15555555-71.45244445 198.20088889-71.45244444 171.57688889 0 311.18222222 139.60533333 311.18222222 311.18222222 0 107.63377778-84.992 229.48977778-167.02577778 284.89955556-4.66488889 3.18577778-10.12622222 4.89244445-15.81511111 4.89244444z" fill="#2E95FA" p-id="1629"></path><path d="M792.68977778 751.38844445c-23.32444445 0-45.16977778-9.10222222-61.66755556-25.6l-107.97511111-107.86133334c-11.03644445-11.03644445-11.03644445-29.01333333 0-40.04977778 11.03644445-11.03644445 29.01333333-11.03644445 40.04977778 0l107.97511111 107.86133334c11.60533333 11.60533333 31.744 11.60533333 43.34933333 0 11.94666667-11.94666667 11.94666667-31.40266667 0-43.34933334L504.49066667 341.33333333c-11.264-10.92266667-11.49155555-28.78577778-0.56888889-40.04977778 10.92266667-11.15022222 28.89955555-11.49155555 40.04977777-0.56888888l310.15822223 301.39733333c34.24711111 34.24711111 34.24711111 89.65688889 0.22755555 123.67644445-16.49777778 16.61155555-38.34311111 25.6-61.66755555 25.6z" fill="#2E95FA" p-id="1630"></path><path d="M719.75822222 846.05155555c-22.30044445 0-44.60088889-8.53333333-61.66755555-25.48622222L603.02222222 765.26933333c-11.03644445-11.03644445-11.03644445-29.01333333 0-40.04977778 11.03644445-11.03644445 29.01333333-11.03644445 40.04977778 0l55.18222222 55.18222223c11.94666667 11.94666667 31.40266667 11.94666667 43.34933333 0 5.80266667-5.80266667 8.98844445-13.53955555 8.98844445-21.61777778 0-8.192-3.18577778-15.92888889-8.98844445-21.61777778L595.17155555 590.73422222c-11.03644445-11.03644445-11.03644445-29.01333333 0-40.04977777 11.03644445-11.03644445 29.01333333-11.03644445 40.04977778 0l146.31822222 146.432c16.49777778 16.49777778 25.6 38.34311111 25.6 61.66755555s-9.10222222 45.16977778-25.6 61.66755555c-17.06666667 17.06666667-39.36711111 25.6-61.78133333 25.6zM235.97511111 719.41688889c-23.21066667 0-45.16977778-9.10222222-61.66755556-25.48622222-34.01955555-34.01955555-34.01955555-89.31555555 0-123.33511112l92.95644445-92.95644444c33.10933333-32.99555555 90.45333333-32.88177778 123.33511111 0 16.49777778 16.49777778 25.6 38.34311111 25.6 61.66755556s-9.10222222 45.16977778-25.6 61.66755555l-92.95644444 92.95644445c-16.49777778 16.49777778-38.34311111 25.48622222-61.66755556 25.48622222zM328.93155555 508.58666667c-8.192 0-15.81511111 3.18577778-21.61777777 8.98844444l-92.95644445 92.95644444c-11.94666667 11.94666667-11.94666667 31.40266667 0 43.34933334 11.60533333 11.60533333 31.744 11.60533333 43.34933334 0l92.95644444-92.95644444c5.80266667-5.80266667 8.98844445-13.53955555 8.98844444-21.61777778s-3.18577778-15.81511111-8.98844444-21.61777778c-5.91644445-5.91644445-13.53955555-9.10222222-21.73155556-9.10222222z" fill="#2E95FA" p-id="1631"></path><path d="M319.26044445 802.816c-23.32444445 0-45.16977778-9.10222222-61.66755556-25.48622222-34.01955555-34.01955555-34.01955555-89.31555555 0-123.33511111l92.95644444-92.95644445c33.10933333-32.99555555 90.45333333-32.88177778 123.44888889 0 34.01955555 34.01955555 34.01955555 89.31555555 0 123.33511111l-93.07022222 92.95644445c-16.384 16.384-38.34311111 25.48622222-61.66755555 25.48622222z m92.95644444-210.83022222c-8.192 0-15.81511111 3.18577778-21.61777778 8.98844444l-92.95644444 92.95644445c-11.94666667 11.94666667-11.94666667 31.40266667 0 43.34933333 11.60533333 11.60533333 31.744 11.60533333 43.34933333 0l93.07022222-92.95644445c11.94666667-11.94666667 11.94666667-31.40266667 0-43.34933333-5.91644445-5.80266667-13.53955555-8.98844445-21.84533333-8.98844444z" fill="#2E95FA" p-id="1632"></path><path d="M402.65955555 886.21511111c-23.21066667 0-45.16977778-9.10222222-61.66755555-25.48622222-34.01955555-34.01955555-34.01955555-89.42933333 0-123.44888889l93.07022222-92.95644445c32.88177778-32.88177778 90.22577778-32.99555555 123.33511111 0 34.01955555 34.01955555 34.01955555 89.31555555 0 123.33511112l-93.07022222 92.95644444c-16.49777778 16.49777778-38.34311111 25.6-61.66755556 25.6z m92.95644445-210.944c-8.192 0-15.81511111 3.18577778-21.61777778 8.98844444l-93.07022222 92.95644445c-11.94666667 11.94666667-11.94666667 31.40266667 0 43.34933333 11.60533333 11.60533333 31.744 11.60533333 43.34933333 0l93.07022222-92.95644444c11.94666667-11.94666667 11.94666667-31.40266667 0-43.34933334-5.80266667-5.68888889-13.53955555-8.98844445-21.73155555-8.98844444z" fill="#2E95FA" p-id="1633"></path><path d="M485.94488889 969.50044445c-23.32444445 0-45.16977778-9.10222222-61.66755556-25.48622223-34.01955555-34.01955555-34.01955555-89.31555555 0-123.33511111l93.07022222-92.95644444c32.88177778-32.88177778 90.33955555-32.99555555 123.33511112 0 34.01955555 34.01955555 34.01955555 89.42933333 0 123.33511111l-92.95644445 92.95644444c-16.49777778 16.49777778-38.45688889 25.48622222-61.78133333 25.48622223z m93.07022222-210.83022223c-8.192 0-15.81511111 3.18577778-21.61777778 8.98844445l-93.07022222 92.95644444c-11.94666667 11.94666667-11.94666667 31.40266667 0 43.34933334 11.60533333 11.60533333 31.744 11.49155555 43.34933334 0l92.95644444-92.95644445c11.94666667-11.94666667 11.94666667-31.40266667 0-43.34933333-5.80266667-5.80266667-13.42577778-8.98844445-21.61777778-8.98844445zM379.67644445 455.33866667c-23.32444445 0-45.16977778-9.10222222-61.66755556-25.48622222-34.01955555-34.01955555-34.01955555-89.31555555 0-123.33511112l174.30755556-163.49866666c11.37777778-10.69511111 29.24088889-10.12622222 39.936 1.25155555 10.69511111 11.37777778 10.12622222 29.35466667-1.25155556 40.04977778L357.26222222 347.02222222c-11.264 11.264-11.264 30.72 0.68266667 42.66666667 11.60533333 11.60533333 31.744 11.60533333 43.34933333 0l104.56177778-90.112c11.83288889-10.12622222 29.696-8.87466667 39.936 2.95822222 10.12622222 11.83288889 8.87466667 29.696-2.95822222 39.936l-103.08266667 88.74666667c-14.90488889 15.01866667-36.75022222 24.12088889-60.07466666 24.12088889z" fill="#2E95FA" p-id="1634"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/gongjufuwu.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592816804979" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1504" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M566.10265823 396.00937086l-416.24065771 416.24065771c-11.93046471 11.93046471-11.93046471 30.48896537 0 42.41943008 11.93046471 11.93046471 30.48896537 11.93046471 42.41943008 0L608.52208831 437.76599735c11.93046471-11.93046471 11.93046471-30.48896537 0-41.75662649s-30.48896537-11.93046471-42.41943008 0z m297.59881417 356.58833415l-59.65232356 59.65232356c-11.93046471 11.93046471-11.93046471 30.48896537 0 42.41943008s30.48896537 11.93046471 42.4194301 0l59.65232355-59.65232356c11.93046471-11.93046471 11.93046471-30.48896537 0-42.41943008s-30.48896537-11.26766112-42.41943009 0z" fill="#04b00f" p-id="1505"></path><path d="M607.85928471 521.27925033c147.1423981 130.57230823 280.36592071 249.21415173 279.70311711 247.88854455l-1.32560718-1.32560718c17.23289347 17.23289347 27.17494739 40.4310193 27.17494739 64.9547523 0 49.71026963-39.7682157 90.14128893-89.47848533 90.14128894-22.53532223 0-44.40784087-8.61644674-60.97793074-23.86092942l-1.98841079-1.98841079-3.31401798-3.97682156-1.98841078-1.9884108-235.29527625-265.12143802c-11.26766112-11.93046471-29.82616178-13.2560719-41.75662649-1.98841079s-13.2560719 29.82616178-1.98841078 41.75662649l235.29527624 265.12143804 1.98841079 1.98841077 3.97682157 3.97682158c2.65121438 2.65121438 5.30242877 5.30242877 8.61644673 7.29083954 27.17494739 24.52373301 62.30353794 37.77980492 98.75773567 37.11700132 82.18764578 0 149.13080889-66.9431631 149.13080888-149.13080888 0-38.44260851-14.58167909-75.55960983-41.0938229-102.73455724 0.66280359 0 0.66280359 0-1.98841077-2.65121438l-282.3543315-251.20256253c-12.5932683-11.26766112-31.15176897-9.94205392-42.41943008 2.65121438s-11.26766112 31.81457257 1.32560719 43.08223368zM161.12966164 215.06398942l-41.75662649-62.30353795L144.55957176 127.57391486l62.30353793 41.75662649 26.51214381 52.36148402 6.62803595 8.61644673 210.77154323 185.58500662c12.5932683 9.94205392 31.81457257 7.95364315 41.75662649-4.63962517 9.27925033-11.93046471 8.61644674-29.16335819-2.65121438-39.7682157l-205.46911447-181.60818505-27.1749474-53.6870912c-2.65121438-4.63962516-5.96523235-8.61644674-9.94205393-11.26766112l-89.47848534-59.65232355c-11.93046471-7.95364315-27.83775099-5.96523235-37.7798049 3.97682157l-59.65232356 59.65232355c-9.94205392 9.94205392-11.93046471 25.84934021-3.97682158 37.77980492l59.65232356 89.47848533c2.65121438 4.63962516 6.62803595 7.95364315 11.26766112 9.94205393l54.34989478 27.1749474L363.28475814 499.4067317c9.94205392 13.2560719 28.50055458 15.24448269 41.75662649 5.30242875 13.2560719-9.94205392 15.24448269-28.50055458 5.30242874-41.75662649-0.66280359-0.66280359-1.3256072-1.98841078-2.65121438-2.65121438l-185.58500661-210.77154323-8.61644674-6.62803594-52.361484-27.83775099z" fill="#04b00f" p-id="1506"></path><path d="M284.41113032 930.22906848l-1.98841079 1.98841079-4.63962516 5.30242876c-1.3256072 1.98841078-3.31401797 3.31401797-5.30242876 4.63962516-60.31512715 55.67550198-155.09604125 52.361484-210.77154324-8.61644674-25.18653662-27.83775099-39.7682157-63.62914512-39.7682157-101.40895003-0.66280359-37.11700133 13.2560719-72.90839547 38.44260852-100.08334285 1.3256072-1.98841078 3.31401797-3.97682157 4.63962517-5.96523236 1.3256072-0.66280359 50.37307323-45.07064446 434.79915835-385.75169232V224.34323973c0-39.7682157 15.90728628-77.54802062 43.74503728-105.3857716l62.96634153-62.96634154c20.54691145-20.54691145 49.71026963-29.82616178 78.21082421-25.18653661l149.13080889 24.52373303c10.60485751 1.98841078 19.88410785 9.27925033 23.19812583 19.88410784s0.66280359 22.53532223-7.29083955 29.82616178l-110.68820036 111.35100398v47.72185884h47.72185884L897.50445574 154.08605867c11.93046471-11.93046471 30.48896537-11.26766112 42.4194301 0 4.63962516 4.63962516 7.29083955 9.94205392 7.95364314 15.90728628l25.18653661 149.13080888c4.63962516 28.50055458-4.63962516 57.66391277-25.18653661 78.21082422l-62.96634154 62.96634153c-27.83775099 27.83775099-65.61755591 43.74503728-105.38577161 43.74503727h-116.65343273l-378.46085278 426.18271163z m-46.39625165-37.11700131l389.72851389-438.77597994c5.96523235-6.62803595 13.9188755-9.94205392 22.53532223-9.94205393h129.90950463c23.86092942 0 47.05905525-9.94205392 63.62914512-26.5121438l62.96634155-62.96634153c6.62803595-6.62803595 9.94205392-16.57008987 8.61644672-25.8493402L900.15567014 236.93650805l-79.53643141 78.87362781c-5.30242877 5.30242877-13.2560719 8.61644674-21.20971504 8.61644673h-90.14128893c-7.95364315 0-15.90728628-3.31401797-21.20971505-8.61644673-5.30242877-5.30242877-8.61644674-13.2560719-8.61644673-21.20971504V205.12193549c0-7.95364315 3.31401797-15.24448269 8.61644673-21.20971504l78.87362782-78.87362782-92.12969972-15.24448268c-9.27925033-1.3256072-19.22130427 1.3256072-25.84934021 8.61644673l-62.96634153 62.96634154c-17.23289347 16.57008987-26.51214381 39.7682157-26.5121438 63.62914512v129.90950463c0 8.61644674-3.31401797 16.57008987-9.94205392 22.53532224l-441.42719432 391.71692467c-16.57008987 17.23289347-25.84934021 39.7682157-25.84934021 63.62914512 0 49.71026963 40.4310193 90.14128893 90.14128894 90.14128894 23.19812583 0 45.73344805-9.27925033 62.96634151-25.18653662l2.6512144-4.63962515z" fill="#04b00f" p-id="1507"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/guanli.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592816822776" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1879" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M510.177936 513.822064m-510.177936 0a510.177936 510.177936 0 1 0 1020.355872 0 510.177936 510.177936 0 1 0-1020.355872 0Z" fill="#F77748" p-id="1880"></path><path d="M422.718861 575.772242h-114.182681c-23.079478 0-41.300119 18.220641-41.300118 41.300119v114.182681c0 23.079478 18.220641 41.300119 41.300118 41.300118h114.182681c23.079478 0 41.300119-18.220641 41.300119-41.300118v-114.182681c1.214709-21.864769-18.220641-41.300119-41.300119-41.300119zM422.718861 318.253855h-114.182681c-23.079478 0-41.300119 18.220641-41.300118 41.300119V473.736655c0 23.079478 18.220641 41.300119 41.300118 41.300118h114.182681c23.079478 0 41.300119-18.220641 41.300119-41.300118v-114.182681c1.214709-23.079478-18.220641-41.300119-41.300119-41.300119zM680.237248 575.772242h-114.182681c-23.079478 0-41.300119 18.220641-41.300119 41.300119v114.182681c0 23.079478 18.220641 41.300119 41.300119 41.300118H680.237248c23.079478 0 41.300119-18.220641 41.300119-41.300118v-114.182681c0-21.864769-18.220641-41.300119-41.300119-41.300119zM740.972716 355.909846L652.298932 267.236062c-15.791222-15.791222-42.514828-15.791222-59.520759 0l-88.673784 88.673784c-15.791222 15.791222-15.791222 42.514828 0 59.520759l88.673784 88.673784c15.791222 15.791222 42.514828 15.791222 59.520759 0l88.673784-88.673784c15.791222-17.005931 15.791222-43.729537 0-59.520759z" fill="#FFFFFF" p-id="1881"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/hebing.svg

+<svg t="1592471831674" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1535" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M196.096 125.568v158.272H128V64h320v896H128v-219.84h68.096v158.272h183.808V125.568H196.096zM576 64h320v219.84h-68.096V125.568h-183.808v772.864h183.808v-158.272H896V960H576V64z" fill="#3FA5FF" p-id="1536"></path><path d="M930.752 631.68a26.88 26.88 0 0 0 0-40.32l-55.872-50.816h117.76c17.28 0 31.36-12.8 31.36-28.544s-14.08-28.48-31.36-28.48h-117.76l55.872-50.816a26.816 26.816 0 0 0 8.128-27.52 30.08 30.08 0 0 0-22.208-20.224 33.6 33.6 0 0 0-30.336 7.424L776.96 491.84a17.024 17.024 0 0 0-2.624 3.648l-1.28 1.92c-0.576 0.896-1.152 1.6-2.752 3.648-3.2 6.976-3.2 14.976 0.96 23.168l1.728 2.304 1.28 2.048c0.768 1.28 1.664 2.56 2.688 3.648l109.44 99.392c5.824 5.376 13.824 8.384 22.144 8.384 8.32 0 16.32-3.008 22.208-8.32zM31.36 483.456h117.76l-55.872-50.752a26.752 26.752 0 0 1 0-40.32 33.664 33.664 0 0 1 44.416-0.064L247.04 491.84c1.024 1.088 1.92 2.304 2.624 3.584l1.28 2.048a24.512 24.512 0 0 0 1.792 2.304 25.984 25.984 0 0 1 0.96 23.232c-1.6 1.92-2.176 2.752-2.752 3.52l-1.28 2.048a17.024 17.024 0 0 1-2.624 3.584L137.6 631.68a33.6 33.6 0 0 1-44.352 0 26.752 26.752 0 0 1 0-40.32l55.872-50.752H31.36C14.08 540.544 0 527.744 0 512s14.08-28.544 31.36-28.544z" fill="#3FA5FF" p-id="1537"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/home.svg

+<svg t="1592444655975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1464" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M696.54755555 378.08355555l-38.22933333-33.90577777-145.63555555-129.36533333L295.82222222 406.30044445h432.46933333l-31.744-28.2168889z m-403.11466666 28.2168889v2.16177777l2.38933333-2.16177777h-2.38933333z m414.49244444-89.088h-25.03111111c-2.50311111 0-4.77866667 0.91022222-6.59911111 2.27555555l42.09777778 36.864c0.34133333-1.024 0.45511111-2.16177778 0.45511111-3.29955555v-25.03111112c0-5.91644445-4.89244445-10.80888889-10.92266667-10.80888888z m-11.37777778 60.8711111l-38.22933333-33.90577777-145.63555555-129.36533333L295.82222222 406.30044445h432.46933333l-31.744-28.2168889z m31.744 28.2168889l2.73066667 2.38933333v-2.38933333h-2.73066667z m0 0l2.73066667 2.38933333v-2.38933333h-2.73066667z m-69.97333333-62.12266667l-145.63555555-129.36533333L295.82222222 406.30044445h432.46933333l-31.744-28.2168889-38.22933333-33.90577777z m60.52977778 8.98844444v-25.03111111c0-6.03022222-4.89244445-10.92266667-10.92266667-10.92266666h-25.03111111c-2.50311111 0-4.77866667 0.91022222-6.59911111 2.27555555l42.09777778 36.864c0.22755555-1.024 0.45511111-2.048 0.45511111-3.18577778z m-203.32088889 271.92888889h-7.28177778c-37.66044445 0-68.26666667 30.60622222-68.26666666 68.26666667v145.29422222h143.81511111V693.36177778c0-37.66044445-30.60622222-68.26666667-68.26666667-68.26666667zM293.43288889 408.46222222l2.38933333-2.16177777h-2.38933333v2.16177777zM514.50311111 4.89244445c-280.46222222 0-507.79022222 227.328-507.79022222 507.79022222S234.04088889 1020.58666667 514.50311111 1020.58666667s507.79022222-227.328 507.79022222-507.79022222S794.96533333 4.89244445 514.50311111 4.89244445z m313.68533334 468.08177777l-1.82044445 2.16177778c-5.00622222 5.57511111-13.65333333 6.144-19.22844445 1.13777778l-76.00355555-67.47022223v395.37777778c0 21.95911111-17.97688889 39.82222222-39.82222222 39.82222222H333.25511111c-21.95911111 0-39.82222222-17.97688889-39.82222222-39.82222222V408.46222222l-78.05155556 68.94933333c-5.68888889 5.00622222-14.336 4.43733333-19.22844444-1.13777777l-1.82044444-2.048c-5.00622222-5.68888889-4.43733333-14.336 1.13777777-19.22844445l301.85244445-266.69511111c3.41333333-2.95822222 7.85066667-3.98222222 11.94666666-3.072 5.00622222-3.29955555 11.83288889-2.95822222 16.49777778 1.25155556L663.09688889 308.33777778c2.38933333-2.048 5.46133333-3.18577778 8.76088889-3.18577778h45.85244444c7.50933333 0 13.65333333 6.144 13.65333333 13.65333333v45.85244445c0 1.36533333-0.22755555 2.61688889-0.56888888 3.86844444l96.14222222 85.33333333c5.68888889 4.77866667 6.25777778 13.53955555 1.25155556 19.11466667z m-99.8968889-66.67377777l2.73066667 2.38933333v-2.38933333h-2.73066667z m-31.744-28.2168889l-38.22933333-33.90577777-145.63555555-129.36533333L295.82222222 406.30044445h432.46933333l-31.744-28.2168889z m11.37777778-60.8711111h-25.03111111c-2.50311111 0-4.77866667 0.91022222-6.59911111 2.27555555l42.09777778 36.864c0.34133333-1.024 0.45511111-2.16177778 0.45511111-3.29955555v-25.03111112c0-5.91644445-4.89244445-10.80888889-10.92266667-10.80888888zM515.52711111 625.09511111h-7.28177778c-37.66044445 0-68.26666667 30.60622222-68.26666666 68.26666667v145.29422222h143.81511111V693.36177778c0-37.66044445-30.60622222-68.26666667-68.26666667-68.26666667zM293.43288889 406.30044445v2.16177777l2.38933333-2.16177777h-2.38933333z m414.49244444-89.088h-25.03111111c-2.50311111 0-4.77866667 0.91022222-6.59911111 2.27555555l42.09777778 36.864c0.34133333-1.024 0.45511111-2.16177778 0.45511111-3.29955555v-25.03111112c0-5.91644445-4.89244445-10.80888889-10.92266667-10.80888888z m-11.37777778 60.8711111l-38.22933333-33.90577777-145.63555555-129.36533333L295.82222222 406.30044445h432.46933333l-31.744-28.2168889z m11.37777778-60.8711111h-25.03111111c-2.50311111 0-4.77866667 0.91022222-6.59911111 2.27555555l42.09777778 36.864c0.34133333-1.024 0.45511111-2.16177778 0.45511111-3.29955555v-25.03111112c0-5.91644445-4.89244445-10.80888889-10.92266667-10.80888888z" fill="#29ABE2" p-id="1465"></path><path d="M295.82222222 406.30044445l-2.38933333 2.16177777v-2.16177777zM583.79377778 693.36177778v145.29422222H439.97866667V693.36177778c0-37.66044445 30.60622222-68.26666667 68.26666666-68.26666667h7.28177778c37.66044445 0 68.26666667 30.60622222 68.26666667 68.26666667zM731.02222222 406.30044445v2.38933333l-2.73066667-2.38933333z" fill="#FFFFFF" p-id="1466"></path><path d="M295.82222222 406.30044445l-2.38933333 2.16177777v-2.16177777zM731.02222222 406.30044445v2.38933333l-2.73066667-2.38933333z" fill="#FFFFFF" p-id="1467"></path><path d="M583.79377778 693.36177778v145.29422222H439.97866667V693.36177778c0-37.66044445 30.60622222-68.26666667 68.26666666-68.26666667h7.28177778c37.66044445 0 68.26666667 30.60622222 68.26666667 68.26666667z" fill="#29ABE2" p-id="1468"></path><path d="M718.848 328.13511111v25.03111111c0 1.13777778-0.22755555 2.27555555-0.45511111 3.29955556l-42.09777778-36.864c1.82044445-1.47911111 4.096-2.27555555 6.59911111-2.27555556h25.03111111c6.03022222-0.11377778 10.92266667 4.77866667 10.92266667 10.80888889z" fill="#FFFFFF" p-id="1469"></path><path d="M718.848 328.13511111v25.03111111c0 1.13777778-0.22755555 2.27555555-0.45511111 3.29955556l-42.09777778-36.864c1.82044445-1.47911111 4.096-2.27555555 6.59911111-2.27555556h25.03111111c6.03022222-0.11377778 10.92266667 4.77866667 10.92266667 10.80888889z" fill="#29ABE2" p-id="1470"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/huanjing.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1593163821582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1533" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 6.4C232.704 6.4 6.4 232.704 6.4 512s226.304 505.6 505.6 505.6 505.6-226.304 505.6-505.6S791.296 6.4 512 6.4z m296.32 259.328c-18.816 108.544-48.128 197.76-87.168 265.216-33.664 57.984-74.88 100.864-122.624 127.232-37.632 20.864-78.976 31.36-122.624 31.36-8.064 0-16.128-0.384-24.192-1.024-29.184-2.56-57.856-9.344-84.992-20.352-8.704-3.584-17.024-7.808-25.088-12.544-10.24-6.144-13.568-19.328-7.552-29.568 3.968-6.528 10.88-10.496 18.56-10.496 3.84 0 7.68 1.024 11.008 3.072 6.272 3.712 12.8 7.04 19.328 9.6 16.768 6.784 51.072 18.304 92.544 18.304 36.48 0 70.784-8.832 102.144-26.112 87.808-48.64 149.632-161.92 183.552-336.896h-9.344c-283.136 0-420.992 6.144-459.392 143.488-5.248 18.688-10.24 62.464 3.712 108.16 2.56 8.32 5.888 16.384 10.112 24.192 14.08-18.432 29.312-35.84 45.696-52.096 36.224-36.224 77.568-66.944 119.296-88.832 41.472-21.76 80.64-33.28 113.152-33.28 11.904 0 21.504 9.6 21.504 21.504s-9.6 21.504-21.504 21.504c-25.216 0-58.368 9.984-93.184 28.288-37.888 19.84-75.392 47.872-108.8 81.152-46.336 46.208-124.032 103.936-124.032 234.624 0 11.904-9.6 21.504-21.504 21.504s-21.504-9.6-21.504-21.504c0-73.728 21.632-106.24 64.256-174.336-10.752-15.36-19.072-32.256-24.576-50.176-15.872-51.584-12.032-103.552-3.968-132.352 12.16-43.392 32.64-77.056 62.848-102.656 27.776-23.68 64-40.576 110.72-51.84 79.232-18.944 184.832-20.352 325.248-20.352H787.2c6.272 0 12.16 2.688 16.256 7.424l0.128 0.128 0.256 0.256c3.84 4.736 5.632 11.136 4.48 17.408z" fill="#3F83C5" p-id="1534"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/liuzhuan.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1610952898522" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="782" width="1024" height="1024" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M458.24 5.12c-89.6 9.728-190.464 52.224-261.632 109.056C9.216 265.216-48.128 525.312 58.88 737.28c36.352 72.704 107.008 152.576 173.056 196.096 137.216 91.136 306.688 110.08 459.776 52.736 160.768-60.416 281.6-201.216 320.512-373.76 13.312-58.368 10.752-162.816-5.12-223.232-24.576-95.232-71.68-175.616-142.848-243.712C754.176 39.936 604.672-11.776 458.24 5.12z m34.816 317.44c11.776 0 42.496 4.608 68.608 9.728 120.32 25.088 186.88 89.088 202.24 194.048 12.288 82.944-15.36 165.376-74.24 223.232-28.16 27.136-87.552 64-93.696 57.856-1.024-1.024 7.168-8.704 18.944-16.384 43.52-30.72 66.048-78.848 66.048-142.848-0.512-96.768-52.736-143.872-172.544-154.624l-36.864-3.584-1.536 56.832-1.536 56.32-96.256-92.672-96.256-92.16 96.256-96.768L468.48 225.28l1.536 48.64 1.536 48.64h21.504z" p-id="783" fill="#d6204b"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/logout.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597908712048" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1661" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M437.63839999 843.5808q0 2.4384 0.60906667 12.19093333t3.04746667 16.15253334T439.46666666 886.24746667 433.37173333 898.13333333t-12.496 3.9616H225.82826666q-72.53333333 0-124.03733333-51.504T50.28586666 726.55253333V297.44746667q0-72.53333333 51.50506667-124.0384t124.03733333-51.504h195.04746667q7.92426667 0 13.7152 5.78986666t5.78986666 13.71413334q0 2.4384 0.61013334 12.19093333t3.04746666 16.15253333-1.82933333 14.3232-6.09493333 11.88586667-12.49493334 3.96266667H228.57173333q-40.22933333 0-68.8768 28.64746666t-28.64746667 68.87573334v429.10506666q0 40.22826667 28.64746667 68.87573334t68.8768 28.64746666H418.74133333l7.01013333 0.61013334 7.00906667 1.82826666 4.8768 3.35253334 4.26666666 5.48586666 1.2192 8.22826667zM1003.27466666 512q0 15.84746667-11.5808 27.42826667L660.11413333 871.00906667Q648.53333333 882.592 632.68586666 882.592t-27.42826667-11.58186667-11.58186666-27.42826666V668.0384h-273.06666667q-15.84746667 0-27.42826667-11.5808T281.59999999 629.02826667V394.97173333q0-15.84746667 11.5808-27.42933333t27.42826667-11.5808h273.06666667V180.4192q0-15.84746667 11.58186666-27.42826667t27.42826667-11.58186666 27.42826667 11.58186666l331.5808 331.5808q11.5808 11.5808 11.5808 27.42826667z"  p-id="1662"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/mobanbianji.svg

+<svg t="1592471825798" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1415" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M113.664 0h796.672C972.8 0 1024 51.2 1024 113.664v796.672c0 62.464-51.2 113.664-113.664 113.664H113.664C51.2 1024 0 972.8 0 910.336V113.664C0 51.2 51.2 0 113.664 0z" fill="#4A90E2" p-id="1416"></path><path d="M158.72 707.584v146.432h147.456l382.976-408.576-147.456-147.456-382.976 409.6zM806.912 327.68c14.336-14.336 14.336-44.032 0-58.368l-88.064-88.064c-14.336-14.336-44.032-14.336-59.392 0l-88.064 88.064 147.456 146.432 88.064-88.064zM452.608 794.624l-59.392 58.368h471.04v-58.368H452.608z" fill="#FFFFFF" p-id="1417"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/mobanguanli.svg

+<svg t="1592471820615" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1295" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M83.2 0v1024h851.2V0H83.2z m768 940.8H172.8V83.2h684.8v857.6z" fill="#406EDD" p-id="1296"></path><path d="M256 172.8h512v172.8H256V172.8z m172.8 256H768V512H428.8V428.8z m0 166.4H768v83.2H428.8V595.2z m0 172.8H768v83.2H428.8V768zM256 428.8h83.2v428.8H256V428.8z" fill="#A0B7EF" p-id="1297"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/person.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597909690342" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1532" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 96c-132.3 0-240 107.7-240 240s107.7 240 240 240 240-107.7 240-240S644.3 96 512 96z"  p-id="1533"></path><path d="M753.8 589.7c-21.6-15.5-50.6-16-72.7-1.2C632.7 621 574.5 640 512 640s-120.8-19-169.1-51.5c-22-14.8-51.1-14.3-72.7 1.2-18.6 13.3-36.1 28.1-52.2 44.3-58.4 58.4-99.5 133.9-115.1 218.3-7.3 39.4 22.9 75.7 62.9 75.7h692.3c39.9 0 70.2-36.1 63-75.4-19.8-107.9-81.4-201.3-167.3-262.9z"  p-id="1534"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/project.svg

+<svg t="1592444669442" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1712" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M0 512c0 282.775704 229.224296 512 512 512s512-229.224296 512-512S794.775704 0 512 0 0 229.224296 0 512z" fill="#1ED0C0" p-id="1713"></path><path d="M745.339259 344.443259c-4.816593-9.462519-19.949037-20.707556-29.620148-9.746963l-55.352889 50.87763a35.896889 35.896889 0 0 1-49.000296-5.044148 25.656889 25.656889 0 0 1-1.517037-35.802074l58.368-52.944593a16.175407 16.175407 0 0 0 2.048-23.134815 16.782222 16.782222 0 0 0-6.580148-4.664889A142.753185 142.753185 0 0 0 595.323259 246.518519c-90.548148-0.037926-163.972741 71.698963-164.029629 160.237037 0 21.371259 4.361481 42.514963 12.818963 62.198518l-160.274963 162.436741a62.805333 62.805333 0 0 0 1.517037 90.206815 66.275556 66.275556 0 0 0 92.235852-1.479111l160.90074-162.967704c84.764444 30.53037 178.744889-11.946667 209.957926-94.814815 7.414519-19.721481 10.808889-40.656593 9.936593-61.648593a125.231407 125.231407 0 0 0-13.046519-56.244148z" fill="#FFFFFF" p-id="1714"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/report.svg

+<svg t="1592446260431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2071" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#118CEE" p-id="2072"></path><path d="M565.248 653.312h-178.176c-12.288 0-22.528 12.288-22.528 22.528s12.288 22.528 22.528 22.528h178.176c12.288 0 22.528-10.24 22.528-22.528s-12.288-22.528-22.528-22.528zM372.736 466.944h210.944c12.288 0 22.528-12.288 22.528-22.528 0-12.288-12.288-22.528-22.528-22.528H372.736c-12.288 0-22.528 8.192-22.528 22.528 0 10.24 12.288 22.528 22.528 22.528zM387.072 581.632H532.48c12.288 0 22.528-12.288 22.528-22.528 0-12.288-12.288-22.528-22.528-22.528h-145.408c-12.288 0-22.528 12.288-22.528 22.528 0 12.288 12.288 22.528 22.528 22.528z" fill="#FFFFFF" p-id="2073"></path><path d="M331.776 802.816h286.72c36.864 0 67.584-30.72 67.584-63.488v-38.912c4.096 8.192 10.24 12.288 18.432 12.288 36.864 0 65.536-26.624 69.632-63.488V272.384c0-36.864-30.72-67.584-67.584-67.584H417.792c-36.864 0-67.584 30.72-67.584 67.584 0 8.192 4.096 14.336 10.24 16.384h-28.672c-36.864 0-67.584 30.72-67.584 67.584v378.88c0 36.864 30.72 67.584 67.584 67.584z m55.296-530.432c0-16.384 12.288-30.72 30.72-30.72h286.72c20.48 0 30.72 16.384 30.72 30.72v370.688c0 20.48-16.384 30.72-30.72 30.72-10.24 0-16.384 6.144-18.432 12.288V356.352c0-36.864-30.72-67.584-67.584-67.584H376.832c6.144-2.048 10.24-8.192 10.24-16.384z m-83.968 83.968c0-16.384 16.384-30.72 30.72-30.72h286.72c20.48 0 30.72 16.384 30.72 30.72v385.024c0 16.384-16.384 30.72-30.72 30.72h-286.72c-20.48 0-30.72-16.384-30.72-30.72V356.352z" fill="#FFFFFF" p-id="2074"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/shengcheng.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592624413539" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1737" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512.01024 0c70.656 0 137.173333 13.312 199.509333 40.021333 62.293333 26.666667 116.650667 63.146667 162.986667 109.482667a513.792 513.792 0 0 1 109.525333 162.986667C1010.69824 374.826667 1024.01024 441.344 1024.01024 512c0 70.656-13.312 137.173333-40.021333 199.509333a513.792 513.792 0 0 1-109.482667 162.986667 513.792 513.792 0 0 1-162.986667 109.525333c-62.336 26.666667-128.853333 39.978667-199.509333 39.978667-70.656 0-137.173333-13.312-199.509333-40.021333a513.792 513.792 0 0 1-162.986667-109.482667 513.792 513.792 0 0 1-109.525333-162.986667A501.845333 501.845333 0 0 1 0.01024 512c0-70.656 13.312-137.173333 40.021333-199.509333a513.792 513.792 0 0 1 109.482667-162.986667A513.792 513.792 0 0 1 312.500907 39.978667C374.836907 13.354667 441.35424 0 512.01024 0z m-43.52 142.378667v123.136a278.741333 278.741333 0 0 0-122.624 47.914666 291.754667 291.754667 0 0 0-92.245333 103.253334A286.122667 286.122667 0 0 0 218.463573 554.666667c0 48.64 11.733333 94.72 35.157334 138.026666a294.058667 294.058667 0 0 0 92.245333 102.4 286.592 286.592 0 0 0 130.133333 49.621334l9.557334 1.194666v-88.661333l-7.253334-1.109333a191.317333 191.317333 0 0 1-87.04-36.352 211.584 211.584 0 0 1-61.568-72.234667A197.12 197.12 0 0 1 307.21024 554.666667c0-33.322667 7.509333-64.256 22.485333-92.885334A211.584 211.584 0 0 1 391.263573 389.546667a190.72 190.72 0 0 1 77.226667-34.602667v148.394667l181.930667-179.029334-181.930667-181.930666z m209.962667 529.962666l-4.608 6.058667 64.426666 62.293333 5.802667-7.637333a294.570667 294.570667 0 0 0 58.026667-142.293333l1.28-9.642667H714.676907l-1.194667 7.125333c-5.461333 32.810667-17.152 60.8-35.072 84.096z m-132.864 83.84l-7.125334 1.194667v88.704l9.728-1.365333c54.314667-7.594667 102.314667-26.88 143.872-57.941334l7.808-5.845333-63.274666-64.341333-5.973334 4.48c-23.893333 17.92-52.224 29.653333-85.034666 35.114666z m169.130666-227.968h88.618667l-1.28-9.642666a294.570667 294.570667 0 0 0-57.984-142.293334l-5.76-7.594666-64.426667 61.312 4.522667 6.058666c17.92 23.893333 29.653333 52.224 35.114667 85.034667l1.194666 7.125333z" fill="#0085FF" p-id="1738"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/shujuguanli.svg

+<svg t="1592471806342" class="icon" viewBox="0 0 1097 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1055" xmlns:xlink="http://www.w3.org/1999/xlink" width="214.2578125" height="200"><defs><style type="text/css"></style></defs><path d="M79.36 884.077714A78.445714 78.445714 0 0 1 0.877714 805.851429V558.08c0-43.154286 35.181714-78.262857 78.482286-78.262857h123.977143c43.227429 0 78.445714 35.108571 78.445714 78.262857v247.771429a78.445714 78.445714 0 0 1-78.482286 78.226285h-123.977142z m407.04 0a78.409143 78.409143 0 0 1-78.409143-78.226285V91.684571c0-43.154286 35.181714-78.226286 78.445714-78.226285h123.977143c43.264 0 78.445714 35.108571 78.445715 78.226285v714.166858a78.445714 78.445714 0 0 1-78.445715 78.226285h-123.977143z m407.149714 0a78.409143 78.409143 0 0 1-78.482285-78.226285V303.762286c0-43.117714 35.218286-78.189714 78.482285-78.189715h123.977143c43.227429 0 78.445714 35.072 78.445714 78.189715v502.125714a78.409143 78.409143 0 0 1-78.445714 78.189714h-123.977143zM20.48 960.182857H1076.077714c11.337143 0 20.48 9.179429 20.48 20.48v8.886857c0 11.337143-9.142857 20.48-20.48 20.48H20.48a20.48 20.48 0 0 1-20.48-20.48v-8.850285c0-11.337143 9.142857-20.48 20.48-20.48z" fill="#6389D6" p-id="1056"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/suoxiao.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1594006223957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1464" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M720.429334 340.173993h265.7724a36.976108 36.976108 0 1 0 0-73.952216H808.944805l198.531841-202.85562a36.976108 36.976108 0 1 0-52.847296-51.709354L757.407442 213.20449V37.255494a36.976108 36.976108 0 1 0-73.952216 0v265.942391c0 20.421955 16.554153 36.976108 36.976108 36.976108z m302.748508 380.168546a36.976108 36.976108 0 0 0-36.976108-36.976108H720.429334a36.976108 36.976108 0 0 0-36.976108 36.976108v265.942391a36.976108 36.976108 0 1 0 73.952216 0V810.335934l197.222908 201.547686a36.862114 36.862114 0 0 0 52.335322 0.568971 36.976108 36.976108 0 0 0 0.569971-52.278325L809.000802 757.318647h177.256929a36.976108 36.976108 0 0 0 36.918111-36.976108z m-719.608176-36.918111H37.798266a36.976108 36.976108 0 1 0 0 73.951216H215.055195L16.523354 960.231263a36.976108 36.976108 0 1 0 52.903293 51.709354l197.223908-201.547686V986.341927a36.976108 36.976108 0 1 0 73.952216 0V720.399536a37.033105 37.033105 0 0 0-37.033105-36.976108z m0-683.145042a36.976108 36.976108 0 0 0-36.976108 36.976108v175.948996L69.37065 11.656803a36.976108 36.976108 0 1 0-52.847296 51.709354L215.055195 266.221777H37.798266a36.976108 36.976108 0 1 0 0 73.952216H303.570666a36.976108 36.976108 0 0 0 36.976108-36.976108V37.255494A36.976108 36.976108 0 0 0 303.569666 0.280386z" fill="#0a40a0" p-id="1465"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/xuanran.svg

+<svg t="1592471814737" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1174" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M240.64 754.34666667c81.92-25.6 128-112.64 102.4-194.56-3.41333333-10.24-6.82666667-20.48-11.94666667-29.01333334C184.32 307.2 283.30666667 124.58666667 464.21333333 29.01333333c0 0-522.24 87.04-423.25333333 605.86666667 1.70666667 5.12 6.82666667 25.6 10.24 30.72 32.42666667 73.38666667 112.64 110.93333333 189.44 88.74666667z" fill="#1286FD" p-id="1175"></path><path d="M848.21333333 617.81333333c-64.85333333-56.32-162.13333333-51.2-218.45333333 13.65333334-6.82666667 8.53333333-13.65333333 17.06666667-18.77333333 25.6C494.93333333 897.70666667 286.72 907.94666667 110.93333333 802.13333333c0 0 344.74666667 401.06666667 737.28 46.08 3.41333333-3.41333333 18.77333333-20.48 22.18666667-23.89333333 46.08-64.85333333 37.54666667-153.6-22.18666667-206.50666667z" fill="#1286FD" p-id="1176"></path><path d="M631.46666667 52.90666667c-5.12-1.70666667-27.30666667-5.12-32.42666667-6.82666667C520.53333333 39.25333333 448.85333333 92.16 433.49333333 170.66666667c-17.06666667 83.62666667 39.25333333 165.54666667 122.88 182.61333333 10.24 1.70666667 20.48 3.41333333 30.72 3.41333333C855.04 332.8 967.68 506.88 965.97333333 711.68c1.70666667-1.70666667 170.66666667-503.46666667-334.50666666-658.77333333z" fill="#1286FD" p-id="1177"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svg/zhuangtai.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592624398744" class="icon" viewBox="0 0 1037 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1489" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.5390625" height="200"><defs><style type="text/css"></style></defs><path d="M268.780203 512.006305A243.638379 243.638379 0 1 0 512.418581 268.367927 244.142806 244.142806 0 0 0 268.780203 512.006305z m412.117092 0A167.974286 167.974286 0 1 1 512.418581 344.032019 168.478713 168.478713 0 0 1 680.392867 512.006305z" fill="#438CFF" p-id="1490"></path><path d="M947.739329 476.696395v7.061982a34.301055 34.301055 0 0 0 40.354182 30.770065 40.85861 40.85861 0 0 0 34.301056-44.389601A511.993695 511.993695 0 1 0 512.418581 1024a514.515831 514.515831 0 0 0 478.197067-329.391017 37.832046 37.832046 0 0 0-70.61982-27.239074 436.329602 436.329602 0 1 1 27.239073-190.673514z" fill="#438CFF" p-id="1491"></path></svg>
\ No newline at end of file

evm_monitor/src/icons/svgo.yml

+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'

evm_monitor/src/layout/TreeMenu.vue

+<template>
+    <li v-if="!data.hidden" role="menuitem" :class="[data.children && data.children.length ? 'menu-submenu' : 'menu-item', `/${data.path}` == $route.path ? 'selected' : '', isCollapsed ? 'collapsed' : '']">
+        <template v-if="data.children">
+            <div :class="['menu-submenu-title', isCollapsed ? 'collapsed' : '']" @click="toggle">
+                <span>
+                    <i aria-label="图标：form" class="webicon">
+                        <IconFont :icon="data.icon" />
+                    </i>{{ data.title }}
+                </span>
+                <i v-show="!isCollapsed" :class="['menu-submenu-arrow', flag ? 'up' : 'down']"></i>
+            </div>
+            <collapse-transition>
+                <ul role="menu" class="menu menu-sub" style="padding-left: 24px;" v-show="flag">
+                    <TreeMenu v-for="(child, index) in data.children" :key="index" :data="child"></TreeMenu>
+                </ul>
+            </collapse-transition>
+        </template>
+        <template v-else>
+            <router-link :to="{ name: data.name }">
+                <i aria-label="图标: ant-design" :class="['webicon', isCollapsed ? 'collapsed' : '']">
+                    <IconFont :icon="data.icon" />
+                </i>{{ data.title }}
+            </router-link>
+        </template>
+    </li>
+</template>
+
+<script>
+    import collapseTransition from './collapseTransition';
+
+    export default {
+        name: "TreeMenu",
+        props: {
+            data: {
+                type: Object,
+                default: () => ({})
+            },
+            isCollapsed: {
+                type: Boolean,
+                default: false
+            },
+        },
+        watch: {
+            isCollapsed() {
+                this.flag = false
+            }
+        },
+        components: {
+            collapseTransition
+        },
+        data() {
+            return {
+                flag: false
+            }
+        },
+        methods: {
+            toggle() {
+                if (this.data.children && this.data.children.length) this.flag = !this.flag
+            },
+        },
+        created() {}
+    }
+</script>

evm_monitor/src/layout/collapseTransition.js

+/* 视图伸缩动画效果组件 */
+/* jshint esversion: 6 */
+const elTransition =
+  "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
+const Transition = {
+  "before-enter"(el) {
+    el.style.transition = elTransition;
+    if (!el.dataset) el.dataset = {};
+
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+    el.style.height = 0;
+    el.style.paddingTop = 0;
+    el.style.paddingBottom = 0;
+  },
+
+  enter(el) {
+    el.dataset.oldOverflow = el.style.overflow;
+    if (el.scrollHeight !== 0) {
+      el.style.height = el.scrollHeight + "px";
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    } else {
+      el.style.height = "";
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    }
+
+    el.style.overflow = "hidden";
+  },
+
+  "after-enter"(el) {
+    el.style.transition = "";
+    el.style.height = "";
+    el.style.overflow = el.dataset.oldOverflow;
+  },
+
+  "before-leave"(el) {
+    if (!el.dataset) el.dataset = {};
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.dataset.oldOverflow = el.style.overflow;
+
+    el.style.height = el.scrollHeight + "px";
+    el.style.overflow = "hidden";
+  },
+
+  leave(el) {
+    if (el.scrollHeight !== 0) {
+      el.style.transition = elTransition;
+      el.style.height = 0;
+      el.style.paddingTop = 0;
+      el.style.paddingBottom = 0;
+    }
+  },
+
+  "after-leave"(el) {
+    el.style.transition = "";
+    el.style.height = "";
+    el.style.overflow = el.dataset.oldOverflow;
+    el.style.paddingTop = el.dataset.oldPaddingTop;
+    el.style.paddingBottom = el.dataset.oldPaddingBottom;
+  },
+};
+
+export default {
+  name: "collapseTransition",
+  functional: true,
+  render(h, { children }) {
+    const data = {
+      on: Transition,
+    };
+    return h("transition", data, children);
+  },
+};

evm_monitor/src/layout/components/AppMain.vue

+<template>
+  <section class="app-main">
+    <div :class="contentClass" class="app-main-content">
+      <!-- <transition name="fade-transform" mode="out-in">
+        <router-view :key="key" />
+      </transition> -->
+      <transition name="fade-transform" mode="out-in">
+        <keep-alive v-if="$route.meta.keepAlive">
+          <router-view :key="key"></router-view>
+        </keep-alive>
+        <router-view v-else :key="key"></router-view>
+      </transition>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AppMain",
+  computed: {
+    key() {
+      return this.$route.path;
+    },
+    contentClass() {
+      return {
+        "app-content-setWidth": this.$store.state.user.isFixedWidth,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  position: relative;
+  // width: 100%;
+  // min-height: calc(100% - 85px);
+  margin: 0 20px 20px;
+  .app-main-content {
+    background-color: #fff;
+    border-radius: 5px;
+    overflow: hidden;
+    > div {
+      padding: 20px;
+      background-color: #fff;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+// .el-popup-parent--hidden {
+//   .fixed-header {
+//     padding-right: 15px;
+//   }
+// }
+</style>

evm_monitor/src/layout/components/Navbar.vue

+<template>
+  <nav class="navbar">
+    <!-- <hamburger v-if="theme=='one'" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
+    <breadcrumb class="breadcrumb-container" />
+  </nav>
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex";
+
+import Breadcrumb from "@/components/Breadcrumb";
+// import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    // Hamburger
+  },
+  data() {
+    return {
+      // "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
+    };
+  },
+  computed: {
+    ...mapState("settings", ["isFullScreen"]),
+    ...mapGetters(["sidebar"]),
+  },
+  methods: {
+    test() {
+      console.log("this.isFullScreen", this.isFullScreen);
+      console.log("this.$store", this.$store.state.settings);
+    },
+    toggleSideBar() {
+      this.$store.dispatch("app/toggleSideBar");
+    },
+    async logout() {
+      await this.$store.dispatch("user/logout");
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  overflow: hidden;
+  position: relative;
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background 0.3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 30px;
+
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

evm_monitor/src/layout/components/Sidebar/FixiOSBug.js

+export default {
+  computed: {
+    device() {
+      return this.$store.state.app.device
+    }
+  },
+  mounted() {
+    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
+    this.fixBugIniOS()
+  },
+  methods: {
+    fixBugIniOS() {
+      const $subMenu = this.$refs.subMenu
+      if ($subMenu) {
+        const handleMouseleave = $subMenu.handleMouseleave
+        $subMenu.handleMouseleave = (e) => {
+          if (this.device === 'mobile') {
+            return
+          }
+          handleMouseleave(e)
+        }
+      }
+    }
+  }
+}

evm_monitor/src/layout/components/Sidebar/Item.vue

+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      // vnodes.push(<svg-icon icon-class={icon}/>)
+      vnodes.push(<IconFont icon={icon} size="18px" class="sidebar-icon-first"/>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>

evm_monitor/src/layout/components/Sidebar/Link.vue

+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>

evm_monitor/src/layout/components/Sidebar/Logo.vue

+<template>
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+    <transition name="sidebarLogoFade">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 class="sidebar-title">{{ title }} </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarLogo',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      title: 'Vue Admin Template',
+      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #2b2f3a;
+  text-align: center;
+  overflow: hidden;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>

evm_monitor/src/layout/components/Sidebar/SidebarItem.vue

+<template>
+  <div v-if="!item.hidden" class="menu-wrapper">
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+      </template>
+      <sidebar-item
+        v-for="child in item.children"
+        :key="child.path"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu"
+      />
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { isExternal } from '@/utils/validate'
+import Item from './Item'
+import AppLink from './Link'
+import FixiOSBug from './FixiOSBug'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item, AppLink },
+  mixins: [FixiOSBug],
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
+    // TODO: refactor with render function
+    this.onlyOneChild = null
+    return {}
+  },
+  methods: {
+    hasOneShowingChild(children = [], parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      if (isExternal(routePath)) {
+        return routePath
+      }
+      if (isExternal(this.basePath)) {
+        return this.basePath
+      }
+      return path.resolve(this.basePath, routePath)
+    }
+  }
+}
+</script>

evm_monitor/src/layout/components/Sidebar/index.vue

+<template>
+  <div :class="{'has-logo':showLogo}">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+       <!-- :background-color="variables.menuBg" -->
+        <!-- :text-color="variables.menuText" -->
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :unique-opened="false"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item v-for="(route, index) in routes" :key="index" :item="route" :base-path="route.path" />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+
+export default {
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    routes() {
+      return this.$router.options.routes
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    },
+    variables() {
+      return variables
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>

evm_monitor/src/layout/components/bottomBar/bottomBarItem.vue

+<template>
+    <div v-if="!item.hidden" >
+      <!-- 最后一级菜单 -->
+      <el-menu-item
+        v-if="isHaveOneChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)"
+        :index="resolvePath(onlyOneChild.path)"
+      >
+        <IconFont class="menu-bottomBar-icon" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" size="18px"/>
+        <span slot="title">{{onlyOneChild.meta.title}} </span>
+      </el-menu-item>
+
+      <!-- 此菜单下还有子菜单 -->
+      <el-submenu
+        v-else
+        :popper-append-to-body="false"
+        :index="resolvePath(item.path)"
+      >
+        <template slot="title">
+          <IconFont class="menu-bottomBar-icon" :icon="item.meta && item.meta.icon" size="18px"/>
+          <span>{{item.meta.title}}</span>
+        </template>
+        <!-- 递归 -->
+        <sidebar-item
+          v-for="(child,number) in item.children"
+          :key="number"
+          :item="child"
+          :basePath="resolvePath(child.path)"
+        />
+      </el-submenu>
+    </div>  
+</template>
+
+<script>
+import path from 'path'
+export default {
+  name: "SidebarItem", //使用场景:允许组件模板递归地调用自身
+  props: {
+    "item":{
+      type: Object,
+      required: true
+    },
+    "basePath":{
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    this.onlyOneChild = null
+    return {
+      // onlyOneChild: null
+    };
+  },
+  methods: {
+    isHaveOneChild(children = [], parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+     resolvePath(routePath){
+        // console.log('studyGit-basePath',this.basePath)
+        // console.log('studyGit-routePath',routePath)
+        // console.log('studyGit-后的路径',path.resolve(this.basePath, routePath))
+         return path.resolve(this.basePath, routePath);
+     }
+  }
+};
+</script>
\ No newline at end of file

evm_monitor/src/layout/components/bottomBar/index.vue

+<template>
+  <div class="menu-bottomBar">
+    <el-menu
+    class="menu-light"
+    mode="horizontal"
+    :default-active="$route.path"
+    :router="true"
+    background-color="#fff"
+    text-color="#4F5869"
+    active-text-color="#435DEB"
+    >
+       <template v-for="(route, index) in getRouters"  >
+            <topBarItem  v-if="!route.hidden" :key="index"  :item="route" :basePath="route.path"/>
+       </template>
+    </el-menu>
+  </div>
+</template>
+<script>
+import topBarItem from './bottomBarItem.vue'
+  export default {
+    components:{
+        topBarItem
+    },
+    computed: {
+      getRouters() {
+        return this.$router.options.routes
+      },
+      key() {
+        return this.$route.path
+      }
+    },
+    methods: {
+     
+    }
+  }
+</script>
+<style lang="scss" scoped>
+.menu-bottomBar >>>{
+  // margin-bottom: 10px;
+  .el-menu--horizontal{
+    >.el-menu-item{
+      height: 50px;
+      line-height: 50px;
+    }
+    >.el-submenu .el-submenu__title{
+      height: 50px;
+      line-height: 50px;
+    }
+  }
+  .menu-bottomBar-icon{
+    margin-right: 10px;
+  }
+}
+</style>
\ No newline at end of file

evm_monitor/src/layout/components/drawerBar/drawerBarItem.vue

+<template>
+    <div v-if="!item.hidden" >
+      <!-- 最后一级菜单 -->
+      <el-menu-item
+        v-if="isHaveOneChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)"
+        :index="resolvePath(onlyOneChild.path)"
+      >
+        <IconFont :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" class="menu-drawer-icon" size="18px"/>
+        <span slot="title">{{onlyOneChild.meta.title}} </span>
+      </el-menu-item>
+
+      <!-- 此菜单下还有子菜单 -->
+      <el-submenu
+        v-else
+        :popper-append-to-body="false"
+        :index="resolvePath(item.path)"
+      >
+        <template slot="title">
+           <IconFont :icon="item.meta && item.meta.icon" class="menu-drawer-icon" size="18px"/>
+          <span>{{item.meta.title}}</span>
+        </template>
+        <!-- 递归 -->
+        <sidebar-item
+          v-for="(child,number) in item.children"
+          :key="number"
+          :item="child"
+          :basePath="resolvePath(child.path)"
+        />
+      </el-submenu>
+    </div>
+</template>
+
+<script>
+import path from 'path'
+export default {
+  name: "SidebarItem", //使用场景:允许组件模板递归地调用自身
+  props: {
+    "item":{
+      type: Object,
+      required: true
+    },
+    "basePath":{
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    this.onlyOneChild = null
+    return {
+      // onlyOneChild: null
+    };
+  },
+  methods: {
+    isHaveOneChild(children = [], parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+     resolvePath(routePath){
+        // console.log('studyGit-basePath',this.basePath)
+        // console.log('studyGit-routePath',routePath)
+        // console.log('studyGit-后的路径',path.resolve(this.basePath, routePath))
+         return path.resolve(this.basePath, routePath);
+     }
+  }
+};
+</script>
\ No newline at end of file

evm_monitor/src/layout/components/drawerBar/index.vue

+<template>
+  <div class="menu-drawer">
+    <el-menu
+    :class="{'menu-dark': appStyle=='dark','menu-light': appStyle=='light'}"
+    :default-active="$route.path"
+    :router="true"
+    :background-color="appStyle=='dark' ?'#04142A':'#fff'"
+    :text-color="appStyle=='dark' ?'#AFB3B6 ':'#4F5869'"
+    :active-text-color="appStyle=='dark' ?'#2f9df2':'#435DEB'"
+    >
+       <template v-for="(route, index) in getRouters"  >
+          <drawerBarItem  v-if="!route.hidden" :key="index"  :item="route" :basePath="route.path"/>
+       </template>
+    </el-menu>
+  </div>
+</template>
+<script>
+import {mapState } from 'vuex'
+import drawerBarItem from './drawerBarItem.vue'
+  export default {
+    components:{
+        drawerBarItem
+    },
+    computed: {
+      ...mapState('user',['appStyle']),
+      getRouters() {
+        return this.$router.options.routes
+      },
+      key() {
+        return this.$route.path
+      }
+    },
+    methods: {
+     
+    }
+  }
+</script>
+<style lang="scss" scoped>
+.menu-drawer {
+    >>> .menu-drawer-icon{
+       margin-right: 10px;
+    }
+}
+</style>
\ No newline at end of file

evm_monitor/src/layout/components/header/baseHeader.vue

+<template>
+    <header class="app-header" :class="classObj">
+      
+      <el-row  :class="{'drawer-header': appTheme=='two'|| appTheme=='three'|| appTheme=='four'}">
+        
+        
+         
+        <el-col :span="20" class="header-left">
+            <template  v-if="appTheme=='one'">
+               <div class="title">{{headerTitle}}</div>
+            </template>
+            <template  v-else>
+                <div class="logo">
+                  <div v-if="appTheme=='four'"  class="drawer-header-icon" @click="toggleDrawerMenu">
+                      <IconFont  icon="zhankai"  size="20px" />
+                  </div>
+                  <span></span>
+                </div>
+                <div v-if="device!='mobile'" class="title">{{headerTitle}}</div>
+                <topBar v-if="appTheme =='two'"/>
+            </template>
+        </el-col>
+        <el-col :span="4" class="manage">
+          <div v-if="userblockShow" class="manage-block">
+            <div class="zoomOut" @click="showFullScreen" title="放大">
+                    <!-- <svg-icon icon-class="fangda"></svg-icon> -->
+                    <IconFont icon="fangda" />
+            </div>
+            <div  v-if="fullScreenShow" class="manage-user" @click="showUserSet">
+                <span></span>
+                <em>{{userName}}</em>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </header>
+</template>
+
+<script>
+import {mapState, mapGetters } from 'vuex'
+import topBar from '../topBar/index.vue'
+
+export default {
+  name: 'baseHeader',
+  components: {
+    topBar,
+  },
+  props:{
+   "userSetIsShow":{
+     type: Boolean,
+     require: true
+   }
+  },
+  computed: {
+    ...mapGetters(['isFullScreen','sidebar']),
+    ...mapState('settings',['headerTitle','userblockShow', 'fullScreenShow']),
+    ...mapState('user',['appTheme','appStyle','isFixedHeader']),
+    userName(){
+      return this.$store.getters.name
+    },
+    classObj(){
+      return {
+        'dark': this.appStyle=='dark' && this.appTheme != 'one',
+        'dark-oneTheme': this.appStyle=='dark' && this.appTheme=='one',
+        'light': this.appStyle=='light',
+        'el-hide': this.isFullScreen,
+        'fixed-header-one-open': this.isFixedHeader&& this.appTheme=='one'&& this.sidebar.opened== true,
+        'fixed-header-one-close': this.isFixedHeader&& this.appTheme=='one'&& this.sidebar.opened== false,
+        'fixed-header-two': this.isFixedHeader&& this.appTheme!='one',
+      }
+    },
+    device() {
+      return this.$store.state.app.device
+    },
+  },
+  data:()=>{
+    return {
+      isVisible: false,
+      themeOpen: false,
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleDrawerBar(){
+       this.themeOpen=true;
+    },
+    showUserSet(){
+      this.$emit("changeUserSet",true)
+    },
+    toggleDrawerMenu(){
+      console.log(11111)
+      this.$emit('handleDrawerBar')
+    },
+    showFullScreen() {
+        console.log("showFullScreen")
+        this.$store.dispatch('settings/handleFullScreen',true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+// 黑白主题色切换
+.dark{
+  background-color: #030E1D;
+  color:#AFB3B6;
+  .drawer-header-icon{
+    color: #AFB3B6 ;
+    .icon-font:hover{
+      color: #fff;
+    }
+  }
+}
+.dark-oneTheme{
+  background-color: #fff;
+}
+.light{
+  background-color: #fff;
+  color:#333;
+  .drawer-header-icon{
+    color: #A5A5A5 ;
+  }
+}
+.drawer-header-icon{
+  position: absolute;
+  left: -40px;
+  top: 20px;
+  cursor: pointer;
+}
+
+.header-left{
+  display: flex;
+  height: 55px;
+  .logo {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 40px 0 0;
+    span {
+      display: inline-block;
+      width: 129px;
+      height: 26px;
+      background: url(/static/img/logo.dcfab4cc.png) no-repeat center center;
+      background-size: 100% auto;
+    }
+  }
+}
+.manage-block{
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 130px;
+  height: 100%;
+  .manage-user{
+    padding: 0 10px;
+    cursor: pointer;
+    height: 100%;
+    line-height: 55px;
+    transition: background-color .3s;
+    &:hover{
+      background-color: #e5eaef;
+    }
+    span {
+      display: inline-block;
+      width: 26px;
+      height: 26px;
+      background: url("~@/assets/layout/user-small.png") no-repeat left top;
+      background-size: 100% 100%;
+      
+    }
+    em{ 
+        display: inline-block;
+        max-width: 60px;
+        margin-left: 5px;
+        vertical-align: -15px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+  }
+  .zoomOut{
+    position: relative;
+    top: -3px;
+    margin-right: 10px;
+    font-size: 22px;
+    cursor: pointer;
+  }
+
+}
+</style>

evm_monitor/src/layout/components/index.js

+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as newSidebar } from './newSideBar'
+export { default as AppMain } from './AppMain'

evm_monitor/src/layout/components/newSideBar/index.vue

+<template>
+  <aside class="menu-sideBar" :class="{'hideSidebar': !sidebar.opened,'light':appStyle=='light'}">
+    <div class="title" :class="{'title-back':!sidebar.opened }"  @click="toggleSideBar">
+      <span v-if="sidebar.opened"></span>
+      <IconFont icon="zhankai" :class="{'is-active':!sidebar.opened}" size="20px" />
+    </div>
+    <el-menu
+    :class="{'menu-dark': appStyle=='dark','menu-light': appStyle=='light'}"
+    :default-active="$route.path"
+    :router="true"
+    :collapse="isCollapse"
+    :background-color="appStyle=='dark' ?'#04142A':'#fff'"
+    :text-color="appStyle=='dark' ?'#B0B4B6':'#4F5869'"
+    :active-text-color="appStyle=='dark' ?'#2f9df2':'#435DEB'"
+    :collapse-transition="false"
+     mode="vertical"
+    >
+       <template v-for="(route, index) in getRouters"  >
+            <newSideBarItem  v-if="!route.hidden" :key="index"  :item="route" :basePath="route.path"/>
+       </template>
+    </el-menu>
+    <!-- 当侧边栏展开时显示，解决flex item不能继承父元素高度问题 -->
+    <div v-if="!isCollapse" class="needMat"></div>
+  </aside>
+</template>
+<script>
+import {mapState, mapGetters } from 'vuex'
+import newSideBarItem from './newSideBarItem.vue'
+  export default {
+    name:"newSideBar",
+    components:{
+        newSideBarItem
+    },
+    computed: {
+       ...mapGetters([
+        'sidebar'
+      ]),
+      ...mapState('user',['appStyle']),
+      getRouters() {
+        return this.$router.options.routes
+      },
+      key() {
+        return this.$route.path
+      },
+      isCollapse() {
+        return !this.sidebar.opened
+      }
+    },
+    methods: {
+      toggleSideBar() {
+          this.$store.dispatch('app/toggleSideBar')
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+    .menu-sideBar{
+      >>> .menu-sideBar-icon{
+        margin-right: 10px;
+      }
+    }
+     .title{
+       display: flex;
+       height: 55px;
+       padding:  10px 20px;
+       justify-content: space-between;
+       align-items: center;
+       background-color: #082040;
+       color: #80858D;
+       span{
+         display: inline-block;
+         width: 129px;
+         height: 26px;
+         background:url("~@/assets/layout/klx-logo.png") no-repeat center center;
+         background-size: 100% auto;
+       }
+       .icon-font{
+         cursor: pointer;
+         &:hover{
+           color: #fff !important;
+         }
+       }
+       .is-active {
+        transform: rotate(180deg);
+       }
+     }
+     .title-back{
+        padding: 0;
+        justify-content: center;
+     }
+     .light{
+        background-color: #fff;
+        .title{
+          color: #ccc;
+          background-color: #fff;
+          .icon-font:hover{
+            color: #80858D !important;
+          }
+        }
+     }
+
+     .needMat{
+       width: 220px;
+     }
+</style>
\ No newline at end of file

evm_monitor/src/layout/components/newSideBar/newSideBarItem.vue

+<template>
+    <div v-if="!item.hidden" >
+      <!-- 最后一级菜单 -->
+      <el-menu-item
+        v-if="isHaveOneChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)"
+        :index="resolvePath(onlyOneChild.path)"
+      >
+        <IconFont class="menu-sideBar-icon" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" size="18px"/>
+        <span slot="title">{{onlyOneChild.meta.title}} </span>
+      </el-menu-item>
+
+      <!-- 此菜单下还有子菜单 -->
+      <el-submenu
+        v-else
+        :popper-append-to-body="false"
+        :index="resolvePath(item.path)"
+      >
+        <template slot="title">
+          <IconFont class="menu-sideBar-icon" :icon="item.meta && item.meta.icon" size="18px"/>
+          <span>{{item.meta.title}}</span>
+        </template>
+        <!-- 递归 -->
+        <newSideBarItem
+          v-for="(child,number) in item.children"
+          :key="number"
+          :item="child"
+          :basePath="resolvePath(child.path)"
+        />
+      </el-submenu>
+    </div>
+</template>
+
+<script>
+import path from 'path'
+export default {
+  name: "newSideBarItem", //使用场景:允许组件模板递归地调用自身
+  props: {
+    "item":{
+      type: Object,
+      required: true
+    },
+    "basePath":{
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    this.onlyOneChild = null
+    return {
+      // onlyOneChild: null
+    };
+  },
+  methods: {
+    isHaveOneChild(children = [], parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+     resolvePath(routePath){
+        // console.log('studyGit-basePath',this.basePath)
+        // console.log('studyGit-routePath',routePath)
+        // console.log('studyGit-后的路径',path.resolve(this.basePath, routePath))
+         return path.resolve(this.basePath, routePath);
+     }
+  }
+};
+</script>
\ No newline at end of file

evm_monitor/src/layout/components/topBar/index.vue

+<template>
+  <div class="menu-topBar">
+    <el-menu
+    :class="{'menu-dark': appStyle=='dark','menu-light': appStyle=='light'}"
+    mode="horizontal"
+    :default-active="$route.path"
+    :router="true"
+    :background-color="appStyle=='dark' ?'#030E1D':'#fff'"
+    :text-color="appStyle=='dark' ?'#AFB3B6':'#4F5869'"
+    :active-text-color="appStyle=='dark' ?'#2f9df2':'#435DEB'"
+    >
+       <template v-for="(route, index) in getRouters"  >
+            <topBarItem  v-if="!route.hidden" :key="index"  :item="route" :basePath="route.path"/>
+       </template>
+    </el-menu>
+  </div>
+</template>
+<script>
+import {mapState } from 'vuex'
+import topBarItem from './topBarItem.vue'
+  export default {
+    name:"topBar",
+    components:{
+        topBarItem
+    },
+    computed: {
+      ...mapState('user',['appStyle']),
+      getRouters() {
+        return this.$router.options.routes
+      },
+      key() {
+        return this.$route.path
+      }
+    },
+    methods: {
+    
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .topBar .el-menu--horizontal{
+    border-bottom: none;
+  }
+  .menu-topBar >>>{
+    .el-menu--horizontal{
+      >.el-menu-item{
+        height: 54px;
+        line-height: 54px;
+      }
+       >.el-submenu .el-submenu__title{
+        height: 54px;
+        line-height: 54px;
+      }
+    }
+    .menu-topBar-icon{
+      margin-right: 10px;
+    }
+  }
+</style>
\ No newline at end of file

evm_monitor/src/layout/components/topBar/topBarItem.vue

+<template>
+    <div v-if="!item.hidden" >
+      <!-- 最后一级菜单 -->
+      <el-menu-item
+        v-if="isHaveOneChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)"
+        :index="resolvePath(onlyOneChild.path)"
+      >
+        <IconFont class="menu-topBar-icon" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" size="18px"/>
+        <span slot="title">{{onlyOneChild.meta.title}} </span>
+      </el-menu-item>
+
+      <!-- 此菜单下还有子菜单 -->
+      <el-submenu
+        v-else
+        :popper-append-to-body="false"
+        :index="resolvePath(item.path)"
+      >
+        <template slot="title">
+           <IconFont class="menu-topBar-icon" :icon="item.meta && item.meta.icon" size="18px"/>
+          <span>{{item.meta.title}}</span>
+        </template>
+        <!-- 递归 -->
+        <sidebar-item
+          v-for="(child,number) in item.children"
+          :key="number"
+          :item="child"
+          :basePath="resolvePath(child.path)"
+        />
+      </el-submenu>
+    </div>
+</template>
+
+<script>
+import path from 'path'
+export default {
+  name: "SidebarItem", //使用场景:允许组件模板递归地调用自身
+  props: {
+    "item":{
+      type: Object,
+      required: true
+    },
+    "basePath":{
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    this.onlyOneChild = null
+    return {
+      // onlyOneChild: null
+    };
+  },
+  methods: {
+    isHaveOneChild(children = [], parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+     resolvePath(routePath){
+      //   console.log('studyGit-basePath',this.basePath)
+      // console.log('studyGit-routePath',routePath)
+      // console.log('studyGit-后的路径',path.resolve(this.basePath, routePath))
+         return path.resolve(this.basePath, routePath);
+     }
+  }
+};
+</script>
\ No newline at end of file

evm_monitor/src/layout/developer.vue

+<template>
+  <div>
+    <el-row>
+      <el-col :span="24">
+        <el-menu default-active="2" mode="horizontal" @select="handleSelect">
+          <el-menu-item index="1">EVM应用开发者中心</el-menu-item>
+          <el-menu-item index="2">首页</el-menu-item>
+          <el-submenu index="3">
+            <template slot="title">管理应用</template>
+            <el-menu-item index="3-1">我的应用</el-menu-item>
+            <el-menu-item index="3-2">上传新应用</el-menu-item>
+            <el-menu-item index="3-3">认领应用</el-menu-item>
+          </el-submenu>
+          <el-submenu index="4">
+            <template slot="title">开发者身份管理</template>
+            <el-menu-item index="4-1">开发者实名认证</el-menu-item>
+            <el-menu-item index="4-2">查看开发者身份</el-menu-item>
+            <el-menu-item index="4-3">更换认证支付宝账号</el-menu-item>
+            <el-menu-item index="4-4">修改联系人信息</el-menu-item>
+          </el-submenu>
+          <el-submenu index="5">
+            <template slot="title">推广</template>
+            <el-menu-item index="5-1">申请推广</el-menu-item>
+            <el-menu-item index="5-2">应用推广</el-menu-item>
+            <el-menu-item index="5-3">礼包权益</el-menu-item>
+          </el-submenu>
+          <el-submenu index="6">
+            <template slot="title">我的账户</template>
+            <el-menu-item index="6-1">我的充值记录</el-menu-item>
+            <el-menu-item index="6-2">我的收益</el-menu-item>
+            <el-menu-item index="6-3">开发票</el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </el-col>
+    </el-row>
+    <div class="content-wrap">
+        <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DevLayout",
+  data: () => {
+    return {};
+  },
+  mounted() {},
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+</style>

evm_monitor/src/layout/mixin/ResizeHandler.js

+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route () {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount () {
+    window.addEventListener('resize', this.$_resizeHandler)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.$_resizeHandler)
+  },
+  mounted () {
+    const isMobile = this.$_isMobile()
+    if (isMobile) {
+      store.dispatch('app/toggleDevice', 'mobile')
+      store.dispatch('app/closeSideBar', { withoutAnimation: true })
+      //切换为主题4
+      store.dispatch('user/setTheme', 'four')
+    }
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_isMobile () {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    $_resizeHandler () {
+      if (!document.hidden) {
+        const isMobile = this.$_isMobile()
+        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('app/closeSideBar', { withoutAnimation: true })
+          //切换为主题4
+          store.dispatch('user/setTheme', 'four')
+        }
+      }
+    }
+  }
+}

evm_monitor/src/layout/store.vue

+<template>
+  <div class="app-container">
+    <header class="header-nav">
+      <div class="left" @click="onHomeClick">
+        <img src="../assets/images/evm-store.svg" alt="evue-logo" />
+        <h3>EVM应用商店</h3>
+      </div>
+      <div class="center">
+        <nav>
+          <ul>
+            <router-link
+              to="/gallery"
+              v-slot="{ navigate, isActive, isExactActive }"
+              custom
+            >
+              <li
+                @click="navigate"
+                :class="[
+                  isActive && 'router-link-active',
+                  isExactActive && 'router-link-exact-active',
+                ]"
+              >
+                推荐
+              </li>
+            </router-link>
+            <router-link
+              to="/category"
+              v-slot="{ navigate, isActive, isExactActive }"
+              custom
+            >
+              <li
+                @click="navigate"
+                :class="[
+                  isActive && 'router-link-active',
+                  isExactActive && 'router-link-exact-active',
+                ]"
+              >
+                应用
+              </li>
+            </router-link>
+            <router-link
+              to="/list"
+              v-slot="{ navigate, isActive, isExactActive }"
+              custom
+            >
+              <li
+                @click="navigate"
+                :class="[
+                  isActive && 'router-link-active',
+                  isExactActive && 'router-link-exact-active',
+                ]"
+              >
+                游戏
+              </li>
+            </router-link>
+            <router-link
+              to="/rank"
+              v-slot="{ navigate, isActive, isExactActive }"
+              custom
+            >
+              <li
+                @click="navigate"
+                :class="[
+                  isActive && 'router-link-active',
+                  isExactActive && 'router-link-exact-active',
+                ]"
+              >
+                排行
+              </li>
+            </router-link>
+            <router-link
+              to="/developer"
+              v-slot="{ navigate, isActive, isExactActive }"
+              custom
+            >
+              <li
+                @click="navigate"
+                :class="[
+                  isActive && 'router-link-active',
+                  isExactActive && 'router-link-exact-active',
+                ]"
+              >
+                开放平台
+              </li>
+            </router-link>
+          </ul>
+        </nav>
+      </div>
+      <div class="right">
+        <div class="input-wrapper" ref="search">
+          <input
+            @focus="onSearchFocus"
+            type="text"
+            placeholder="搜索应用、游戏"
+          />
+          <dl v-show="selectShow">
+            <dt>热词</dt>
+            <dd @click="onSearchClick(1)">微聊</dd>
+            <dd @click="onSearchClick(2)">支付宝</dd>
+            <dd @click="onSearchClick(3)">计算器</dd>
+            <dd @click="onSearchClick(4)">手表管家</dd>
+            <dd @click="onSearchClick(5)">语音助手</dd>
+          </dl>
+        </div>
+        <p class="submit-btn">上传应用</p>
+        <img
+          class="avatar"
+          @click="onAccountClick"
+          src="../assets/images/avatar.png"
+          alt="avatar"
+        />
+      </div>
+    </header>
+    <main>
+      <router-view></router-view>
+    </main>
+    <footer>
+      <p>
+        <a
+          href="https://www.yuque.com/docs/share/97df8f40-dc3c-4642-aeb1-9734bc3ef2c8"
+          target="_blank"
+          >EVM应用商店开发者协议</a
+        >
+        <a href="https://www.yuque.com/bytecode/evue" target="_blank"
+          >EVM应用开发标准</a
+        >
+      </p>
+      <p>Copyright © 武汉市字节码科技有限公司</p>
+      <p>⭐⭐⭐⭐⭐</p>
+    </footer>
+  </div>
+</template>
+<script>
+export default {
+  name: "StoreLayout",
+  data() {
+    return {
+      selectShow: false,
+    };
+  },
+  computed: {},
+  methods: {
+    onSearchFocus() {
+      this.selectShow = true;
+    },
+    onSearchBlur() {
+      this.selectShow = false;
+    },
+    onHomeClick() {
+      this.$router.push({ path: "/gallery" });
+    },
+    onAccountClick() {
+      this.$router.push({ path: "/auth" });
+    },
+    onSearchClick(index) {
+      console.log(index);
+      this.$router.push({ path: "/search" });
+      this.selectShow = false;
+    },
+    searchEvent(event) {
+      const e = event || window.event;
+      if (this.$refs.search && !this.$refs.search.contains(e.target)) {
+        this.selectShow = false;
+      }
+    },
+  },
+  mounted() {
+    document.addEventListener("click", this.searchEvent);
+  },
+  created() {},
+  beforeDestroy() {
+    document.removeEventListener("click", this.searchEvent);
+  },
+};
+</script>
+<style lang="scss">
+@import "../styles/iconfont/iconfont.css";
+.app-container {
+  & > div.page-wrapper {
+    margin: 10px 0px;
+  }
+  & > header.header-nav {
+    display: flex;
+    justify-content: center;
+    padding: 12px 25px;
+    border-bottom: 1px solid #f2f2f2;
+    & > div {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    & > div.left {
+      cursor: pointer;
+      & > img {
+        width: 40px;
+        height: 40px;
+        display: block;
+      }
+      & > h3 {
+        display: inline-block;
+        margin: 0px 0px 0px 15px;
+      }
+    }
+    & > div.center {
+      & > nav {
+        & > ul {
+          display: inline-flex;
+          flex-direction: row;
+          & > li {
+            cursor: pointer;
+            padding: 0px 30px;
+            &.router-link-active {
+              color: #4cd1e0;
+            }
+          }
+        }
+      }
+    }
+    & > div.right {
+      & > div.input-wrapper {
+        margin-right: 15px;
+        & > dl {
+          width: 200px;
+          height: auto;
+          position: absolute;
+          font-size: 14px;
+          margin: 5px 0px 0px 0px;
+          z-index: 1000;
+          background: #ffffff;
+          border-radius: 8px;
+          border: 1px solid #f5f5f5;
+          box-shadow: 1px 0px 3px 2px #dbdbdb;
+          & > dt {
+            font-size: 12px;
+            color: grey;
+            margin: 10px;
+          }
+          & > dd {
+            cursor: pointer;
+            padding: 10px;
+            margin-inline-start: 0px;
+            &:hover {
+              background: #eeeeee;
+            }
+          }
+        }
+      }
+      & > img.avatar {
+        width: 32px;
+        height: 32px;
+        display: block;
+        margin-left: 10px;
+        cursor: pointer;
+      }
+    }
+  }
+  & > main {
+    width: 50%;
+    min-height: 76vh;
+    margin: 0px auto;
+    @media screen and (max-width: 1700px) {
+      width: 66%;
+    }
+    @media screen and (max-width: 1170px) {
+      width: 70%;
+    }
+    @media screen and (max-width: 920px) {
+      width: 85%;
+    }
+    @media screen and (max-width: 750px) {
+      width: 100%;
+    }
+  }
+  & > footer {
+    font-size: 13px;
+    padding: 25px 0px;
+    background-color: #f2f2f2;
+    & > p {
+      & > a {
+        margin-right: 20px;
+        color: royalblue;
+        &:last-child {
+          margin-right: 0px;
+        }
+      }
+      text-align: center;
+    }
+  }
+}
+</style>

evm_monitor/src/main.js

+/*
+ * @Author: your name
+ * @Date: 2021-06-28 11:51:13
+ * @LastEditTime: 2021-06-28 14:26:00
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \ewebengine\tools\evm_monitor\src\main.js
+ */
+import Vue from "vue";
+
+import "normalize.css/normalize.css";
+
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+//import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+import "@/styles/index.scss"; // global css
+import "@/styles/theme-blue/index.css"; // blue theme css
+
+import App from "./App";
+import store from "./store";
+import router from "./router";
+
+import "@/icons";
+import "@/icons/icon.js";
+import "@/icons/icon-color.js";
+import IconFont from "@/components/IconFont";
+
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * please remove it before going online! ! !
+ */
+
+// import { mockXHR } from '../mock'
+// if (process.env.NODE_ENV === 'production') {
+//   mockXHR()
+// }
+
+// import CollapseTransition from "element-ui/lib/transitions/collapse-transition";
+// The second argument is optional and sets the default config values for every player.
+// Vue.component(CollapseTransition.name, CollapseTransition);
+
+Vue.component("IconFont", IconFont);
+
+// set ElementUI lang to EN
+//Vue.use(ElementUI, { locale })
+// 如果想要中文版 element-ui，按如下方式声明
+Vue.use(ElementUI);
+// Vue.prototype.$axios = gAxios;
+// Vue.prototype.$client = client;
+Vue.config.productionTip = false;
+
+new Vue({
+  el: "#app",
+  router,
+  store,
+  render: (h) => h(App),
+});

evm_monitor/src/permission.js

+import router from "./router";
+import store from "@/store"; // get token from cookie
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+import { getPageTitle } from "@/utils/index";
+
+const whiteList = ["/login", "/register"];
+
+NProgress.configure({ showSpinner: false }); // NProgress Configuration
+
+router.beforeEach(async (to, from, next) => {
+    // start progress bar
+    NProgress.start();
+
+    // set page title
+    document.title = getPageTitle(to.meta.title);
+
+    // determine whether the user has logged in
+    const hasToken = store.getters.token;
+
+    if (hasToken) {
+        if (to.path === "/login") {
+            // if is logged in, redirect to the home page
+            next({ path: "/" });
+            NProgress.done();
+        } else {
+            next();
+        }
+    } else {
+        /* has no token*/
+        if (whiteList.indexOf(to.path) !== -1) {
+            // in the free login whitelist, go directly
+            next();
+        } else {
+            // other pages that do not have permission to access are redirected to the login page.
+            next(`/login?redirect=${to.path}`);
+            NProgress.done();
+        }
+    }
+});
+
+router.afterEach(() => {
+    // finish progress bar
+    NProgress.done();
+});

evm_monitor/src/router/index.js

+/*
+ * @Author: your name
+ * @Date: 2021-06-28 11:51:14
+ * @LastEditTime: 2021-06-28 14:29:33
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \ewebengine\tools\evm_monitor\src\router\index.js
+ */
+import Vue from "vue";
+import Router from "vue-router";
+
+Vue.use(Router);
+
+/* Layout */
+import Layout from "@/layout";
+
+/**
+ * Note: sub-menu only appear when route children.length >= 1
+ * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+ *
+ * hidden: true                   if set true, item will not show in the sidebar(default is false)
+ * alwaysShow: true               if set true, will always show the root menu
+ *                                if not set alwaysShow, when item has more than one children route,
+ *                                it will becomes nested mode, otherwise not show the root menu
+ * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
+ * name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ * meta : {
+    roles: ['admin','editor']    control the page roles (you can set multiple roles)
+    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
+    icon: 'svg-name'             the icon show in the sidebar
+    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
+    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
+  }
+ */
+
+
+/**
+ * constantRoutes
+ * a base page that does not have permission requirements
+ * all roles can be accessed
+ */
+export const constantRoutes = [
+    {
+        path: '/',
+        redirect: '/home'
+    },
+    {
+        path: '/home',
+        redirect: '/home/index',
+        component: Layout,
+        children: [{
+            path: 'index',
+            name: 'AppIndex',
+            component: () => import('@/views/system/index'),
+            meta: { title: '监控', icon: 'home' }
+        }]
+    },
+    {
+        path: '/404',
+        redirect: '/404/index',
+        component: Layout,
+        children: [{
+            path: 'index',
+            name: 'Page404',
+            component: () => import('@/views/error-pages/404'),
+            meta: { title: '404', icon: 'home' }
+        }]
+    },
+    {
+        path: '/403',
+        redirect: '/403/index',
+        component: Layout,
+        children: [{
+            path: 'index',
+            name: 'Page403',
+            component: () => import('@/views/error-pages/403'),
+            meta: { title: '403', icon: 'home' }
+        }]
+    },
+    { path: '*', redirect: '/404', hidden: true }
+];
+
+// 404 page must be placed at the end !!!
+export const notFound = { path: '*', redirect: '/404', hidden: true }
+
+const createRouter = () =>
+    new Router({
+        // mode: 'history', // require service support, 后台部署在/static 目录
+        // base: "/static", // 应用的基础路径: 默认为'/',修改为'/static'
+        scrollBehavior: () => ({ y: 0 }),
+        routes: constantRoutes,
+    });
+
+const router = createRouter();
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+    const newRouter = createRouter();
+    router.matcher = newRouter.matcher; // reset router
+}
+
+export default router;

evm_monitor/src/settings.js

+/*
+ * @Author: your name
+ * @Date: 2021-06-28 12:01:15
+ * @LastEditTime: 2021-06-28 14:30:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \ewebengine\tools\evm_monitor\src\settings.js
+ */
+export default {
+    name: {
+        zh: "EVM应用商店",
+        en: "EVM App Store",
+    },
+    author: "武汉市字节码科技有限公司",
+    logo: "",
+    officialWeb: "https://www.baidu.com",
+
+    // hostname: "127.0.0.1",
+    // port: window.location.port,
+    port: 9999,
+
+    /**
+     * @type {boolean} true | false
+     * @description Whether fix the header
+     */
+    fixedHeader: true,
+
+    /**
+     * @type {boolean} true | false
+     * @description Whether show the logo in sidebar
+     */
+    sidebarLogo: false,
+    userblockShow: true, // 用户中心
+    isFullScreen: false, //  配置放大按钮初始值
+    fullScreenShow: true, // 放大按钮是否显示
+    svgFilePath: "@/assets/icons/svg",
+
+    pageInfos: [
+        {
+            vue: "system/index.vue",
+            title: "首页",
+            name: "AppIndex",
+            icon: "gongzuotai",
+            path: "home/index",
+        },
+        // {
+        //     vue: "system/tool.vue",
+        //     title: "工具",
+        //     name: "AppTool",
+        //     icon: "gongzuotai",
+        //     path: "tool",
+        // },
+    ],
+};

evm_monitor/src/store/getters.js

+const getters = {
+  sidebar: (state) => state.app.sidebar,
+  device: (state) => state.app.device,
+  token: (state) => state.user.token,
+  avatar: (state) => state.user.avatar,
+  name: (state) => state.user.name,
+  role: (state) => state.user.role,
+  isFullScreen: (state) => state.settings.isFullScreen,
+};
+export default getters;

evm_monitor/src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+import getters from './getters'
+import app from './modules/app'
+import settings from './modules/settings'
+import user from './modules/user'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    app,
+    settings,
+    user,
+  },
+  getters
+})
+
+export default store

evm_monitor/src/store/modules/app.js

+// import Cookies from 'js-cookie'
+import $_ls from 'local-storage'
+
+const state = {
+  sidebar: {
+    opened: $_ls.get('sidebarStatus') ? !!+$_ls.get('sidebarStatus') : true,
+    withoutAnimation: false
+  },
+  device: 'desktop'
+}
+
+const mutations = {
+  TOGGLE_SIDEBAR: state => {
+    state.sidebar.opened = !state.sidebar.opened
+    state.sidebar.withoutAnimation = false
+    if (state.sidebar.opened) {
+      $_ls.set('sidebarStatus', 1)
+    } else {
+      $_ls.set('sidebarStatus', 0)
+    }
+  },
+  CLOSE_SIDEBAR: (state, withoutAnimation) => {
+    $_ls.set('sidebarStatus', 0)
+    state.sidebar.opened = false
+    state.sidebar.withoutAnimation = withoutAnimation
+  },
+  TOGGLE_DEVICE: (state, device) => {
+    state.device = device
+  }
+}
+
+const actions = {
+  toggleSideBar({ commit }) {
+    commit('TOGGLE_SIDEBAR')
+  },
+  closeSideBar({ commit }, { withoutAnimation }) {
+    commit('CLOSE_SIDEBAR', withoutAnimation)
+  },
+  toggleDevice({ commit }, device) {
+    commit('TOGGLE_DEVICE', device)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

evm_monitor/src/store/modules/settings.js

+import defaultSettings from "@/settings";
+
+const state = {
+  headerTitle: defaultSettings.name.zh,
+  fixedHeader: defaultSettings.fixedHeader,
+  sidebarLogo: defaultSettings.sidebarLogo,
+  userblockShow: defaultSettings.userblockShow,
+  isFullScreen: defaultSettings.isFullScreen,
+  fullScreenShow: defaultSettings.fullScreenShow,
+};
+
+const mutations = {
+  changeFullSceen(state, boolean) {
+    state.isFullScreen = boolean;
+  },
+};
+
+const actions = {
+  handleFullScreen(context, boolean) {
+    context.commit("changeFullSceen", boolean);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

evm_monitor/src/store/modules/user.js

+import Cookies from "js-cookie";
+import $ls from "local-storage";
+import { resetRouter } from "@/router";
+
+const TokenKey = "Authorization";
+const NameKey = "name";
+const RoleKey = "role";
+const themeKey = "theme";
+const styleKey = "style";
+const widthKey = "isFixedWidth";
+const headerKey = "isFixedHeader";
+const sideKey = "isFixedSide";
+const disableWidthKey = "isDisableWidth";
+const disableSideKey = "isDisableSide";
+const iconThemeKey = "iconTheme";
+
+export function getToken() {
+  return Cookies.get(TokenKey);
+}
+export function getName() {
+  return $ls.get(NameKey);
+}
+export function getTheme() {
+  return $ls.get(themeKey);
+}
+export function getRole() {
+  return $ls.get(RoleKey);
+}
+export function getStyle() {
+  return $ls.get(styleKey);
+}
+export function getFixedWidth() {
+  return $ls.get(widthKey);
+}
+export function getFixedHeader() {
+  return $ls.get(headerKey);
+}
+export function getFixedSide() {
+  return $ls.get(sideKey);
+}
+export function getDisableWidth() {
+  return $ls.get(disableWidthKey);
+}
+export function getDisableSide() {
+  return $ls.get(disableSideKey);
+}
+export function getIconTheme() {
+  return $ls.get(iconThemeKey);
+}
+
+const state = {
+  token: getToken(),
+  name: getName(),
+  avatar: "",
+  password: "",
+  role: getRole(),
+  appTheme: getTheme() || "one",
+  appStyle: getStyle() || "dark",
+  isFixedWidth: getFixedWidth() || false,
+  isFixedHeader: getFixedHeader() || false,
+  isFixedSide: getFixedSide() || false,
+  isDisableWidth: getDisableWidth() || true,
+  isDisableSide: getDisableSide() || false,
+  iconTheme: getIconTheme() || "default-iconTheme",
+};
+
+const mutations = {
+  login: (state, form) => {
+    state.name = form.username;
+    state.password = form.password;
+  },
+  setToken: (state, token) => {
+    state.token = token;
+    Cookies.set(TokenKey, token);
+  },
+  removeToken: (state, token) => {
+    state.token = "";
+    Cookies.remove(TokenKey, token);
+  },
+  setName: (state, name) => {
+    state.name = name;
+    $ls.set(NameKey, name);
+  },
+  removeName: (state, name) => {
+    state.name = "";
+    $ls.remove(NameKey, name);
+  },
+  setRole: (state, role) => {
+    state.role = role;
+    $ls.set(RoleKey, role);
+  },
+  removeRole: (state, role) => {
+    state.role = "";
+    $ls.remove(RoleKey, role);
+  },
+  setAvatar: (state, avatar) => {
+    state.avatar = avatar;
+  },
+  setTheme: (state, subject) => {
+    state.appTheme = subject;
+    $ls.set(themeKey, subject);
+  },
+  removeTheme: (state) => {
+    state.appTheme = "one";
+    $ls.remove(themeKey);
+  },
+  setAppStyle: (state, style) => {
+    state.appStyle = style;
+    $ls.set(styleKey, style);
+  },
+  removeAppStyle: (state) => {
+    state.appStyle = "dark";
+    $ls.remove(styleKey);
+  },
+  setFixedWidth: (state, boolean) => {
+    state.isFixedWidth = boolean;
+    $ls.set(widthKey, boolean);
+  },
+  removeFixedWidth: (state) => {
+    state.isFixedWidth = false;
+    $ls.remove(widthKey);
+  },
+  setFixedHeader: (state, boolean) => {
+    state.isFixedHeader = boolean;
+    $ls.set(headerKey, boolean);
+  },
+  removeFixedHeader: (state) => {
+    state.isFixedHeader = false;
+    $ls.remove(headerKey);
+  },
+  setFixedSide: (state, boolean) => {
+    state.isFixedSide = boolean;
+    $ls.set(sideKey, boolean);
+  },
+  removeFixedSide: (state) => {
+    state.isFixedSide = false;
+    $ls.remove(sideKey);
+  },
+  setDisableWidth: (state, boolean) => {
+    state.isDisableWidth = boolean;
+    $ls.set(disableWidthKey, boolean);
+  },
+  removeDisableWidth: (state) => {
+    state.isDisableWidth = false;
+    $ls.remove(disableWidthKey);
+  },
+  setDisableSide: (state, boolean) => {
+    state.isDisableSide = boolean;
+    $ls.set(disableSideKey, boolean);
+  },
+  removeDisableSide: (state) => {
+    state.isDisableSide = false;
+    $ls.remove(disableSideKey);
+  },
+  setIconTheme: (state, string) => {
+    state.iconTheme = string;
+    $ls.set(iconThemeKey, string);
+  },
+  removeIconTheme: (state) => {
+    state.iconTheme = "default-iconTheme";
+    $ls.remove(iconThemeKey);
+  },
+};
+
+const actions = {
+  login({ commit }, form) {
+    commit("login", form);
+  },
+  setToken({ commit }, token) {
+    commit("setToken", token);
+  },
+  removeToken({ commit }) {
+    commit("removeToken");
+    resetRouter();
+  },
+  setName({ commit }, name) {
+    commit("setName", name);
+  },
+  removeName({ commit }, name) {
+    commit("removeName", name);
+  },
+  setRole({ commit }, role) {
+    commit("setRole", role);
+  },
+  removeRole({ commit }, role) {
+    commit("removeRole", role);
+  },
+  setTheme({ commit }, subject) {
+    commit("setTheme", subject);
+  },
+  removeTheme({ commit }, subject) {
+    commit("removeTheme", subject);
+  },
+  setAppStyle({ commit }, style) {
+    commit("setAppStyle", style);
+  },
+  removeAppStyle({ commit }, style) {
+    commit("removeAppStyle", style);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

evm_monitor/src/styles/element-ui.scss

+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}

evm_monitor/src/styles/iconfont/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1617005192789'); /* IE9 */
+  src: url('iconfont.eot?t=1617005192789#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAl0AAsAAAAAESAAAAklAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCERAqTGI80ATYCJAMwCxoABCAFhG0HgTMbWQ4RlazZIvs54G5u20jKymScsPLy6H8/A+vkUGbmjof/9nv2+8zMlaeYa9REiPjqoqF5FE1iIZEJGSreaPb/G8JNuxBqSfBQUaXu1A1mWpmSzWHC+uAzQWYiCawTf/au7cA51+kbSJW2cKQl6IwPcjv/dgzOxTUbgzARZihn8d+i7/dSoBzw0FyrYpZcQoNabq93kxffMJWkiQShkojbMNMQLYWIwnD7wIpXhe5NoGs2WAniYFFFPXBUsHigzrnJ4h7gaFErAc6hldUea+bxkAM7bVpLuw8AN5S/j59APOQIJFUG7L6OnSjsBzmfGZ9fsGTiuva8ERDZ0bhwkbESUC7UW0/FcwAiXq5ZtzHdVcBkMJZsv/7M2jCbavOwZdnqbd22tbaNn99OjECSaHcsHSZziU2lKfSfvKRRy3q6Kh0tUQNC9GF+F+91tUiIpPDFLpLgi30kiS/8SBq+eOCCyCwoZZD1UOqB7IZSF+Ra4LIlNyKSDl/fCiespEprTAVsBdJfIP/G2h1SudaqJI4OA6liT5YDIwoGhi1wODjGYAQyMcwJ4/EwLsqGL8+DT6+JYbkhnpATty02zMYwTzFG3Rus1iaLpZEkBwhmYA6Ao7ReJ313UIW3rAE7Le17TRBMmGVGN5rG0IRdARQoA6NIDAlvTGoJtxBNZquMekJJyMdkq/R26HlJpvGO7N6lY8TRi3cbpCbCpQm5tg1BZXu0GrxeYUZ70iqul5ogqAgjMAgxMT3SD5XiQWVKrQInSbcteVr56KuoVHo1ilY2713j3hcV53weii8kyXpqrObZy5JdV/NNi/8ua/ENym872Xj8seSJ7BnxtI36ssH6ucliayQ/9TUo+eBuRS4oVeldmhpVhFq2sEEpMUidG8kPjZaXTdb3DdTz7kby1FNUj1RFuIhFkaz4A7vD+xULNeQ6i7veup5yq8ekJndY3UIz8OkKA47tvWhtrDFMkSoA7brxdAVqyI5QIf1KqoSAGmRNahe1Wq9zVjljDVKkEXLet23rhc1FjTKUfO1mXKHga+I42XsDlYUDwPXP7yu3uCpaUdA10KegaQJ+tvOUwL4ejAkS9xeDsKV9V7hQ5+58aVgrxR/NOmtJlrdqsUhJMpYEEioT17gqgETLV6L7QrjGIRQqC1Hyj1BKYTl/z4kTBRpBLHMOAzdE2qjaHUiQRyUAKuucL1oIq7XvY2deoLzwxESBgHtAoeEr+W7Be/fit5GWU7q7tyAKGp5NNpOhvYjEKDMTJqmhQbMUufcgWrSwvIWQ3YASbexFxHSJQSTiJLCPPwb060+SOKee+dhtfbqQ/FQ/lAOHJ3BmGwLpEvO4gu4zg8QYhILsMj0gdF+qDcaXXqJf+PffCyKkn4fRLxgsZ3SmJYuhTqgLQBMS5y6ok2XykaoqD/eq6sOHBQWCYnvpBvYgN4s7GCiCsiDRui1ZbFGg2GYkHheYyHipnp8O1X7jOQVHcvInqn1bea9xX2ELHHe508hJnnjCyMwF8bgAH4wTxA3hfYmcNf7nVKoI9mDgIFvOyFQXr339+t6D13KKwLsaouIOceUlmCKHxFwTwJHm3Yytdqhyyr+VV+IAO72ULm5ahs9MofH+KKZoHJCOx+POTlmOyy9xXzrBpQ53Eqd8h8oYocW47XcB+9Z8LzBLaAQNQLwq9tXf0+UTJvhNo8nltGmI7gJzzooLLEQNT5PLp618Iqzx9BIKnygGoZenUZz5o0RUyzUAAQT9Bm5/nToj9vbwxhkAWL6Eg73ca2ys0RFyEj2/N8h7QxPdOnfrlpj3mgfWzlpz547Jq8Hb9OiRpqsqY9pGkSJaKJuzcVqt7/DKOTJundmsgx/cYDjrHzyAMMUAdY6GIMsd+UERz5rJKcS4ahgkCBmKxbkHQYp8RPDMJ5f0EaSA61vWXNcJh3990L8lHH8ig2OZuz3A6b9hImsTK5GJg4MPapAH1H+T7vPnoj/QuPGV2z7ko5XJwC8LLtB2rvTbv8p7c/POJw9mZmYMA/uJd/47DY9nQ+Rl8lVecPnFONVRsCBqMbC25VQbjZjvpxfwPQ+mzL5Tlt830/Vv7WItrw/vi6kIqeAlcKun2Xi2Zad4p8D7iYHpYEAafm+L6Sh2CuFaIjAosANC5s3ZF10bbC1Z8XBqz9oELQ/kr/fQO6ckJ3re29a9g1Uo50jec46v3e3z5FKvGi47JKW3qXpmWFbO3t9L28GpvMNsp3RP4bx0Fq80x+P4rZGW4pXTU0PoXrP890X0zY4WtdbMjSDwerd7oxq75F9OPnK/Z99pQfwsT3qQKkSg2h0kaAZEB14qcIM6pAsn0WK7HReP0Jqd/ComHD9qDI4Hp3/M0Nf7wSMWN4eZQ01hJkdeLMw8CUjrzqhggMHBA5vXYLOu1xu3FDPAO/oXy/ynVgj9gyuC/YWVQj/7Cj4XzIUlY3RfX/oYgISJQoMVHdN9Gcu1h+Cv3zDgIYpBSnfhcnF0K90UbqJvHc0xh5lyRkevRqOrmsLMYOkjABhdyRfhbMX0kp8sj+dhv0P5DtzgtxR+BW/k/pRewp4A+QLtytv/Q94Ce6eVgP8x5/JhEW2oi5XxuyP6Kzrp02rzGqocLY1GbDzeiXRNoQn+H9uVHqNRiauE1fTLUyqMkr9ZO4NM2VXV9xIDK3CgLpfOiKaP9yyCmhRZ9GdMTTKCksYslL3MF6IC85VBlZ6NqIb5nqCuFcr1eyZY9UXpYLkDQWGsU1Ay9B5lmF9RgfkjqDLZH9awj35Q1/HYb7FncejZPUWWYwR1AxOnIHhdPlPrfqEsHEuJ5LTQH6aZpgC2YX3L3hgwzWKZrZTXPRfQp+ShYJZA5wjmlAzy/DiiNL6ZZn9b9tiQ78wckEJMLoWNgFqTcMKRQEycmzl+/wuSCg6TBnT5SvgHpTJ6+sBmsCIYv4kQqcuqNN6UpKud0AIIrVPEAwWhkeOKCZi9ZzMQlzsaExTGbkwyVB+VOBZP+TFOGH3dsg/TjxQ5SlRRRxNtdKIbvejHQOe8DvJfYyhnGgsLw0i3Sq8EQ8tai8scGoqbUUZFVtDMODJyKhq+0rxloSoCIQnKce6GuWeOKtSpoJmfMB7X2ZZDK2GZ5p89zpMdKucOfgwAAAA=') format('woff2'),
+  url('iconfont.woff?t=1617005192789') format('woff'),
+  url('iconfont.ttf?t=1617005192789') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1617005192789#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-xingbienv:before {
+  content: "\e605";
+}
+
+.icon-xingbienan:before {
+  content: "\e606";
+}
+
+.icon-dizhi:before {
+  content: "\e63e";
+}
+
+.icon-fangxiang-copy:before {
+  content: "\e50d";
+}
+
+.icon-sousuo:before {
+  content: "\e689";
+}
+
+.icon-jiantouyou:before {
+  content: "\e61b";
+}
+
+.icon-zanwuxiaoxi:before {
+  content: "\e615";
+}
+
+.icon-tianjia:before {
+  content: "\e7df";
+}
+
+.icon-weixin:before {
+  content: "\e68f";
+}
+
+.icon-youxiang:before {
+  content: "\e660";
+}
+
+.icon-70BasicIcons-all-59:before {
+  content: "\e654";
+}

evm_monitor/src/styles/iconfont/iconfont.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="xingbienv" unicode="&#58885;" d="M510.887666 384m-446.708971 0a446.708971 446.708971 0 1 1 893.417942 0 446.708971 446.708971 0 1 1-893.417942 0ZM510.87948 317.097264c-123.673717 0-224.282113 100.607372-224.282113 224.282113s100.607372 224.282113 224.282113 224.282113 224.282113-100.607372 224.282112-224.282113-100.608396-224.282113-224.282112-224.282113z m0 364.80559c-77.486792 0-140.523477-63.036685-140.523477-140.523477s63.036685-140.523477 140.523477-140.523477 140.523477 63.036685 140.523477 140.523477-63.036685 140.523477-140.523477 140.523477zM510.87948-0.635217c-23.12058 0-41.878806 18.744923-41.878806 41.878806V358.97607c0 23.133883 18.758226 41.878806 41.878806 41.878806s41.878806-18.744923 41.878806-41.878806v-317.732481c0-23.133883-18.758226-41.878806-41.878806-41.878806zM669.752884 158.237163H352.033705c-23.12058 0-41.878806 18.744923-41.878806 41.878806s18.758226 41.878806 41.878806 41.878807h317.719179c23.12058 0 41.878806-18.744923 41.878806-41.878807s-18.758226-41.878806-41.878806-41.878806z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xingbienan" unicode="&#58886;" d="M511.843434 384m-446.708971 0a446.708971 446.708971 0 1 1 893.417942 0 446.708971 446.708971 0 1 1-893.417942 0ZM424.111301 77.174939c-59.328223 0-115.140367 23.107277-157.101038 65.081251-86.620823 86.620823-86.620823 227.581252 0 314.215378 41.960671 41.973974 97.771791 65.081251 157.101038 65.081251 59.355853 0 115.140367-23.12058 157.101037-65.081251 41.960671-41.973974 65.081251-97.771791 65.081251-157.11434s-23.12058-115.140367-65.081251-157.101038-97.745185-65.081251-157.101037-65.081251z m0 360.620268c-36.97103 0-71.733765-14.409175-97.881285-40.543392-53.957913-53.984518-53.957913-141.804656 0-195.775872 26.14752-26.14752 60.910255-40.543392 97.881285-40.543391s71.733765 14.395872 97.881284 40.543391c26.14752 26.14752 40.543392 60.910255 40.543392 97.881285s-14.395872 71.733765-40.543392 97.894587c-26.146497 26.14752-60.909232 40.543392-97.881284 40.543392zM551.602973 384.983397c-10.715039 0-21.430078 4.090155-29.609365 12.269442-16.358573 16.358573-16.358573 42.874483 0 59.219753L672.577209 607.056192h-42.833551c-23.12058 0-41.878806 18.744923-41.878806 41.878806s18.758226 41.878806 41.878806 41.878806h143.958716c16.931624 0 32.200376-10.210549 38.689161-25.847691 6.488785-15.650445 2.889817-33.67189-9.078773-45.641503L581.212338 397.252839c-8.179286-8.179286-18.894326-12.269441-29.609365-12.269442zM773.703397 607.056192h-143.958716c-23.12058 0-41.878806 18.744923-41.878806 41.878806s18.758226 41.878806 41.878806 41.878806h143.958716c23.12058 0 41.878806-18.744923 41.878806-41.878806s-18.758226-41.878806-41.878806-41.878806zM779.864724 456.949452c-23.12058 0-41.878806 18.744923-41.878806 41.878806V642.773671c0 23.133883 18.758226 41.878806 41.878806 41.878807s41.878806-18.744923 41.878806-41.878807v-143.945413c0-23.133883-18.758226-41.878806-41.878806-41.878806zM779.864724 456.949452c-23.12058 0-41.878806 18.744923-41.878806 41.878806V642.773671c0 23.133883 18.758226 41.878806 41.878806 41.878807s41.878806-18.744923 41.878806-41.878807v-143.945413c0-23.133883-18.758226-41.878806-41.878806-41.878806z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="dizhi" unicode="&#58942;" d="M512-116.8c-253.6 0-511.2 54.4-511.2 158.4 0 92.8 198.4 131.2 283.2 143.2h3.2c12 0 22.4-8.8 24-20.8 0.8-6.4-0.8-12.8-4.8-17.6-4-4.8-9.6-8.8-16-9.6-176.8-25.6-242.4-72-242.4-96 0-44.8 180.8-110.4 463.2-110.4s463.2 65.6 463.2 110.4c0 24-66.4 70.4-244.8 96-6.4 0.8-12 4-16 9.6-4 4.8-5.6 11.2-4.8 17.6 1.6 12 12 20.8 24 20.8h3.2c85.6-12 285.6-50.4 285.6-143.2 0.8-103.2-256-158.4-509.6-158.4z m-16.8 169.6c-12 11.2-288.8 272.8-288.8 529.6 0 168 136.8 304.8 304.8 304.8S816 750.4 816 582.4c0-249.6-276.8-517.6-288.8-528.8l-16-16-16 15.2zM512 839.2c-141.6 0-256.8-115.2-256.8-256.8 0-200.8 196-416 256.8-477.6 61.6 63.2 257.6 282.4 257.6 477.6C768.8 723.2 653.6 839.2 512 839.2z m0-392.8c-80 0-144.8 64.8-144.8 144.8S432 736 512 736c80 0 144.8-64.8 144.8-144.8 0-80-64.8-144.8-144.8-144.8zM512 688c-53.6 0-96.8-43.2-96.8-96.8S458.4 494.4 512 494.4c53.6 0 96.8 43.2 96.8 96.8S564.8 688 512 688z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fangxiang-copy" unicode="&#58637;" d="M36.324 386.035c0-257.014 209.096-466.103 466.084-466.103 256.992 0 466.087 209.089 466.087 466.103 0 257.011-209.095 466.1-466.087 466.10000001-256.987 0-466.085-209.09-466.084-466.10000001zM442.05 613.991l217.55-217.524c4.444-4.444 6.944-10.477 6.945-16.757 0-0.124 0-0.23100001 0-0.354-0.094-6.403-2.778-12.498-7.438-16.896l-217.551-204.877c-9.535-8.981-24.532-8.532-33.513 1.003-9.012 9.534-8.517 24.51800001 0.988 33.498l199.777 188.135-200.271 200.261c-9.258 9.257-9.258 24.252 0 33.511 9.255 9.259 24.254 9.259 33.513 0.00099999z"  horiz-adv-x="1000" />
+
+    
+    <glyph glyph-name="sousuo" unicode="&#59017;" d="M774.991188 136.307469l201.863039-201.863039a36.569391 36.569391 0 0 0-51.782258-51.70912L717.138411 90.742007a438.832694 438.832694 0 1 0 57.779638 45.565462zM475.561014 91.473395A365.693911 365.693911 0 1 1 475.561014 822.861218a365.693911 365.693911 0 0 1 0-731.387823z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jiantouyou" unicode="&#58907;" d="M319-27c-6.4 0-12.8 2.4-17.7 7.3-9.8 9.8-9.8 25.6 0 35.4L669.6 384 301.3 752.3c-9.8 9.8-9.8 25.6 0 35.4 9.8 9.8 25.6 9.8 35.4 0l386-386c9.8-9.8 9.8-25.6 0-35.4l-386-386c-4.9-4.9-11.3-7.3-17.7-7.3z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zanwuxiaoxi" unicode="&#58901;" d="M888.7 120.5c0-32-167.4-56.7-376.7-56.7-207.4 0-376.7 24.6-376.7 56.7s167.4 56.7 376.7 56.7c207.4-0.1 376.7-24.7 376.7-56.7M653.4 103.5H282.2c-31.4 0-56.8 25.4-56.8 56.8V668.1c0 16.5 13.4 29.9 29.9 29.9h400.4c16.5 0 29.9-13.4 29.9-29.9v-532.4c0-17.8-14.4-32.2-32.2-32.2zM653.4 97.3H282.2c-34.8 0-63 28.3-63 63V668.1c0 19.9 16.2 36.1 36.1 36.1h400.4c19.9 0 36.1-16.2 36.1-36.1v-532.4c0-21.2-17.2-38.4-38.4-38.4zM255.3 691.8c-13.1 0-23.7-10.6-23.7-23.7v-507.7c0-27.9 22.7-50.6 50.6-50.6h371.2c14.3 0 25.9 11.6 25.9 25.9V668.1c0 13.1-10.6 23.7-23.7 23.7H255.3zM308 209s40.5-80.1-35-105.5c0 0-0.4 0 0 0 162.2 0 324.4-2 486.5 2 7.4 2 14.7 5.9 20.3 9.8 3.7 2 12.9 11.7 18.4 25.4 5.5 15.6 7.4 39.1-7.4 56.6-3.7 5.9-9.2 9.8-16.6 11.7H308.5M515 97.1c-40.5 0-80.8 0.1-120.6 0.2-40.5 0.1-81 0.2-121.5 0.2l-0.1 6.3-1.8 5.4c19 6.4 31.7 17 37.7 31.6 11.9 29.2-5.9 65.1-6.1 65.5-1.5 3-0.3 6.6 2.6 8.1 1 0.5 2 0.7 3 0.6H775l0.8-0.2c8.8-2.4 15.6-7.2 20.1-14.3 19.4-23.1 11-53.2 7.9-61.9-6.2-15.2-16.3-26.1-21.3-28.7-6.2-4.5-14.3-8.3-21.5-10.3l-1.4-0.2c-81.2-1.9-163.4-2.3-244.6-2.3z m-216.6 12.4c32.1 0 64.1-0.1 96.1-0.2 119.3-0.4 242.8-0.7 364.2 2.2 5.7 1.6 12.1 4.8 17.7 8.7 3 1.6 11.3 10.4 16.3 22.7 2.4 6.9 9.4 31.6-6.4 50.5-3.2 5-7.3 7.9-12.8 9.6H317.1c5.2-13.8 13-41.7 2.8-66.7-4.5-10.8-11.7-19.7-21.5-26.8zM287.7 626.1h153.4v-38.4H287.7zM287.7 568.6h354.8v-19.2H287.7zM287.7 501.5h76.7v-38.4h-76.7zM287.7 443.9h306.8v-19.2H287.7zM287.7 367.2h230.1V348H287.7zM297.3 328.9h182.2v-19.2H297.3z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tianjia" unicode="&#59359;" d="M482 768c0 16.569 13.431 30 30 30 16.569 0 30-13.431 30-30v-768c0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30V768zM895 414c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30H127c-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30h768z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="weixin" unicode="&#59023;" d="M965.2 2.5c-4 12.2-10.1 25.6-15.6 37.3-0.7 1.6-1.5 3.3-2.3 5 46.7 51.1 72.2 115.2 72.2 182.6 0 38.8-8.4 76.4-24.8 111.8-15.8 33.9-38.4 64.4-67.1 90.4-45.4 41.3-102.4 68.1-164.1 78-3.1 38.2-13 75.2-29.4 110.5-19.5 41.8-47.2 79.2-82.6 111.3C579.5 795 483.8 831 382.3 831s-197.2-36-269.2-101.5c-35.3-32.1-63.1-69.6-82.6-111.3C10.2 574.6 0 528.4 0 480.8c0-84.6 32.7-165 92.5-228.5-1.7-3.8-3.6-7.9-5.2-11.4-6.7-14.6-14.4-31.2-19.2-46.2-3.3-10-5-18.4-5.3-25.8-1-22.2 10.5-33.4 17.5-38.1 9.2-6.2 19.7-8.5 30.3-8.5 12.6 0 25.5 3.2 36.6 6.6 18.8 5.7 38.9 14.3 56.6 21.9 7.6 3.3 17.3 7.4 23.6 9.8 48.9-19.9 100.9-30 155-30 11.8 0 23.5 0.5 35.2 1.5 2.1-5.5 4.4-11 7-16.4 15.8-33.9 38.4-64.4 67.1-90.4 58.4-53.1 135.8-82.3 218-82.3 42.8 0 84.2 7.8 123 23.3 4.7-1.9 11-4.5 16.1-6.7 27.6-11.8 54.1-23.1 76.6-23.1 10.1 0 19.5 2.3 27.7 7.9 5.4 3.6 17.8 14.4 16.8 36-0.4 6.4-1.9 13.4-4.7 22.1zM424.3 339.2c-16.5-35.4-24.8-73-24.8-111.8 0-2.2 0-4.3 0.1-6.5v-1.2c0.1-1.9 0.1-3.7 0.2-5.6 0-0.8 0.1-1.6 0.1-2.3 0.1-1.6 0.2-3.1 0.3-4.7l0.3-3.6c0-0.4 0.1-0.7 0.1-1.1 0.2-2.5 0.5-4.9 0.8-7.4-6.2-0.3-12.6-0.5-19.1-0.5-48.6 0-95.2 9.6-138.6 28.5-16.7 7.3-31.9 0.8-65.2-13.5-13.6-5.8-29-12.4-42.8-17.1 3.5 8.1 7.2 16.1 9.7 21.6 4.1 9 8 17.5 10.7 24.4 1.9 5 3.2 9 3.9 12.6 3.8 18.4-5.4 29.5-9.5 33.5-55.9 53.3-86.6 123-86.6 196.2 0 75.9 32.7 147.4 92.1 201.3 60.3 54.7 140.6 84.9 226.2 84.9s165.9-30.2 226.2-84.9c51.2-46.6 82.6-106.2 90.3-170.4-0.8 0-1.6-0.1-2.4-0.1-1.1 0-2.3-0.1-3.4-0.1-1.4-0.1-2.7-0.1-4.1-0.2-1.1-0.1-2.3-0.1-3.4-0.2-1.3-0.1-2.7-0.2-4-0.3-1.1-0.1-2.3-0.2-3.4-0.3-1.3-0.1-2.7-0.3-4-0.4-1.1-0.1-2.2-0.2-3.4-0.4-1.4-0.2-2.7-0.3-4.1-0.5-1.1-0.1-2.2-0.3-3.3-0.4-1.4-0.2-2.7-0.4-4.1-0.6-1.1-0.2-2.1-0.3-3.2-0.5-1.4-0.2-2.8-0.5-4.2-0.7-1-0.2-2-0.3-3-0.5l-4.5-0.9c-0.9-0.2-1.8-0.3-2.7-0.5-1.8-0.4-3.7-0.8-5.5-1.2-0.6-0.1-1.1-0.2-1.7-0.4-2.4-0.5-4.7-1.1-7.1-1.7l-2.4-0.6c-1.6-0.4-3.1-0.8-4.7-1.2-1-0.3-1.9-0.5-2.9-0.8-1.4-0.4-2.8-0.8-4.1-1.2l-3-0.9-3.9-1.2c-1-0.3-2.1-0.7-3.1-1-1.3-0.4-2.5-0.8-3.8-1.3-1.1-0.4-2.1-0.7-3.1-1.1-1.2-0.4-2.5-0.9-3.7-1.3-1.1-0.4-2.1-0.8-3.1-1.2-1.2-0.5-2.4-0.9-3.6-1.4-1-0.4-2.1-0.9-3.1-1.3l-3.6-1.5c-1-0.4-2.1-0.9-3.1-1.4-1.2-0.5-2.3-1-3.5-1.6-1-0.5-2.1-0.9-3.1-1.4-1.2-0.5-2.3-1.1-3.5-1.6-1-0.5-2-1-3.1-1.5-1.1-0.6-2.3-1.1-3.4-1.7-1-0.5-2-1-3-1.6-1.1-0.6-2.3-1.2-3.4-1.8-1-0.5-2-1.1-3-1.6-1.1-0.6-2.2-1.2-3.3-1.9-1-0.6-1.9-1.1-2.9-1.7-1.1-0.6-2.2-1.3-3.3-2-1-0.6-1.9-1.1-2.9-1.7l-3.3-2.1c-0.9-0.6-1.9-1.2-2.8-1.8l-3.3-2.1-2.7-1.8c-1.1-0.7-2.2-1.5-3.3-2.3-0.9-0.6-1.8-1.2-2.7-1.9l-3.3-2.4c-0.9-0.6-1.7-1.2-2.6-1.9-1.1-0.8-2.2-1.7-3.3-2.5-0.8-0.6-1.6-1.2-2.4-1.9-1.1-0.9-2.3-1.8-3.4-2.7-0.7-0.6-1.5-1.2-2.2-1.8-1.2-1-2.5-2.1-3.7-3.1l-1.8-1.5-5.4-4.8c-28.7-26.1-51.3-56.5-67.1-90.4z m464.6-262.7c-4.1-3.9-13.1-14.8-9.5-32.7 0.7-3.3 1.8-6.8 3.4-11.1 2.2-5.7 5.4-12.5 8.7-19.8 0.4-0.8 0.8-1.6 1.2-2.6-7.3 2.9-14.2 5.9-18.8 7.9-27.3 11.7-41.1 17.6-56.9 10.7-33.6-14.6-69.7-22.1-107.3-22.1-116.1 0-213.6 72.5-239.3 169.6-0.3 1.1-0.6 2.2-0.9 3.4l-0.6 2.4c-0.4 1.7-0.7 3.3-1.1 5-0.1 0.3-0.1 0.6-0.2 0.9-0.4 2.1-0.8 4.2-1.2 6.2 0 0.3-0.1 0.5-0.1 0.8-0.3 1.8-0.6 3.6-0.8 5.4-0.1 0.5-0.1 1-0.2 1.6-0.2 1.5-0.4 3.1-0.5 4.6-0.1 0.6-0.1 1.2-0.2 1.8-0.1 1.5-0.3 2.9-0.4 4.4 0 0.6-0.1 1.3-0.1 1.9-0.1 1.5-0.2 3-0.2 4.5 0 0.6-0.1 1.2-0.1 1.8-0.1 2.1-0.1 4.1-0.1 6.2 0 121.6 110.3 220.5 245.9 220.5 1.9 0 3.8 0 5.6-0.1 0.9 0 1.9-0.1 2.8-0.1 0.9 0 1.7-0.1 2.6-0.1 1.2 0 2.4-0.1 3.6-0.2 0.6 0 1.1-0.1 1.7-0.1 1.3-0.1 2.7-0.2 4-0.3 126.1-9.3 225.6-104.3 225.6-219.7 0-56.1-23.6-109.7-66.6-150.7zM623.6 296.4m-32 0a32 32 0 1 1 64 0 32 32 0 1 1-64 0ZM800.6 296.4m-32 0a32 32 0 1 1 64 0 32 32 0 1 1-64 0ZM273.7 593.9m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM491.2 593.9m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="youxiang01" unicode="&#58976;" d="M934.4 59.903999999999996h-844.8c-16.384 0-29.696 13.312-29.696 29.696V669.696l430.08-412.672c5.632-5.632 13.312-8.704 21.504-8.704 5.12 0 9.728 1.536 13.824 3.584 4.608 1.024 9.216 3.584 12.8 7.168l425.984 414.208v-583.68c0.512-16.384-12.8-29.696-29.696-29.696z m-421.376 260.608l-404.48 387.584H911.36l-398.336-387.584zM934.4 768h-844.8C40.448 768 0.512 727.552 0.512 678.4v-588.8c0-49.152 39.936-89.6 89.6-89.6h844.8c49.152 0 89.6 39.936 89.6 89.6v588.8c-0.512 49.152-40.448 89.6-90.112 89.6z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="70BasicIcons-all-59" unicode="&#58964;" d="M512 896C229.180952 896 0 666.819048 0 384s229.180952-512 512-512 512 229.180952 512 512S792.380952 896 512 896z m0-926.47619c-229.180952 0-414.47619 185.295238-414.47619 414.47619S282.819048 798.47619 512 798.47619s414.47619-185.295238 414.47619-414.47619-185.295238-414.47619-414.47619-414.47619zM711.92381 420.571429h-146.285715V579.047619c0 26.819048-21.942857 48.761905-48.761905 48.761905s-48.761905-21.942857-48.761904-48.761905v-158.47619h-146.285715c-26.819048 0-48.761905-21.942857-48.761904-48.761905s21.942857-48.761905 48.761904-48.761905h146.285715v-146.285714c0-26.819048 21.942857-48.761905 48.761904-48.761905s48.761905 21.942857 48.761905 48.761905v146.285714h146.285715c26.819048 0 48.761905 21.942857 48.761904 48.761905s-21.942857 48.761905-48.761904 48.761905z"  horiz-adv-x="1026" />
+
+    
+
+
+  </font>
+</defs></svg>

evm_monitor/src/styles/index.scss

+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+
+html {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+i,em{
+  font-style: normal;
+}
+h1,h2,h3,h4,h5,h6,b,strong{
+  font-weight: normal;
+}
+
+ul,li{
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+// iconfont的基础样式
+.icon-font {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+
+// 隐藏元素
+.el-hide{
+  display: none !important;
+}
+//修改table表头背景色 start
+// .el-table th{
+//   background: #ebecf0;
+// }
+// .el-table__expanded-cell{
+//   .el-table th{
+//     background-color: #c8cbd9;
+//   }
+// }
+//修改table表头背景色 end
+
+// 增加展开table子标题title start
+.self-menuTable-box{
+  padding-top: 20px;
+  .flowForm--subTitle {
+    position: relative;
+    margin-bottom: 14px;
+    padding-left: 10px;
+    color: #333;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 1.5;
+    &:before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 2.5px;
+        background-color: #298dff;
+        content: "";
+    }
+  }
+}
+// 增加展开table子标题title end
+
+
+
+

evm_monitor/src/styles/login.scss

+@import '~normalize.css/normalize.css';
+.user-login {
+  .user-login-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-size: cover;
+  }
+  .el-checkbox__label {
+    color: #999;
+    font-size: 13px;
+  }
+  .content-wrapper {
+    position: absolute;
+    top: -100px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-width: 1080px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .slogan {
+      text-align: center;
+      color:#409EFF;
+      font-size: 36px;
+      letter-spacing: 2px;
+      line-height: 48px;
+    }
+  }
+  .form-container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    padding: 30px 40px;
+    background-color: #fff;
+    border-radius: 6px;
+    box-shadow: 1px 1px 2px #eee;
+  }
+  .el-form-item {
+    margin-bottom: 15px;
+  }
+  .form-Item {
+    position: relative;
+    flex-direction: column;
+  }
+  .form-line {
+    position: relative;
+    display: flex;
+    align-items: center;
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 3px;
+      left: 0;
+      width: 100%;
+      box-sizing: border-box;
+      border-width: 1px;
+      border-style: solid;
+      border-top: 0;
+      border-left: 0;
+      border-right: 0;
+      border-color: #dcdcdc;
+      border-radius: 0;
+    }
+  }
+  .el-input {
+    width: 240px;
+    input {
+      border: none;
+      margin: 0;
+      padding-left: 10px;
+      font-size: 13px;
+    }
+  }
+  .form-title {
+    margin: 0 0 20px;
+    text-align: center;
+    color: #3080fe;
+    letter-spacing: 12px;
+  }
+  .input-icon {
+    color: #999;
+  }
+  .checkbox {
+    margin-left: 5px;
+  }
+  .submit-btn {
+    margin-bottom: 25px;
+    width: 100%;
+    background: #3080fe;
+    border-radius: 28px;
+  }
+  .tips {}
+  .link {
+    color: #999;
+    text-decoration: none;
+    font-size: 13px;
+  }
+  .line {
+    color: #dcd6d6;
+    margin: 0 8px;
+  }
+}
+
+@media screen and (max-width: 720px) {
+  .user-login {
+    .content-wrapper {
+      margin: 20px auto;
+      top: 40px;
+      max-width: 300px;
+      display: block;
+      .slogan {
+        color: #666;
+        font-size: 22px;
+        line-height: 30px;
+      }
+    }
+  }
+}
\ No newline at end of file

evm_monitor/src/styles/mixin.scss

+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

evm_monitor/src/styles/sidebar.scss

+.app {
+  display: flex;
+  // height: 100%;
+  .app-aside{
+    width:220px;
+    flex-grow: 0;
+    border-right: 1px solid #DCDFE6;
+    background-color: #04142A;
+    transition: width 0.28s;
+    .el-menu{
+      border-right: none;
+    }
+    .el-menu--collapse{
+      width: 53px;
+    }
+  }
+  .hideSidebar{
+      width: 54px !important;
+  }
+  .app-wrapper{
+    @include clearfix;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    //  overflow: hidden;
+     overflow-x: hidden;
+     background-color: #e0e2e5;
+    
+  }
+  >>> .drawer-area {
+    // width: 350px !important;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow: auto;
+  }
+
+  .app-layout-footer{
+    flex: 0 0 auto;
+    padding: 24px 50px;
+    color: #333;
+    font-size: 14px;
+    text-align: center;
+    // background: #f0f2f5;
+    img{
+      display: block;
+      margin: 0 auto;
+      width: 28px;
+      height: 28px;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.app-header{
+  flex: 0 0 auto;
+  height: 55px;
+  color: #333;
+  background-color: #fff;
+  // box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.2);
+  border-bottom: 1px solid #ddd;
+  .title{
+    padding: 0 15px;
+    line-height: 55px;
+    font-size: 20px;
+  }
+  .manage{
+    display:flex;
+    justify-content: flex-end;
+    height: 55px;
+  }
+}
+// main-container global css
+.app-content {
+  flex: auto;
+  box-sizing: border-box;
+  // height: calc(100vh - 0px);
+  // overflow-y: scroll;
+}
+
+.fullExpand{
+  padding-left: 0 !important;
+}
+
+// mobile responsive
+.mobile {
+  .drawer-header-icon {
+    margin-left: 10px;
+  }
+  .header-left .logo {
+    span{
+      background-size: 80% auto !important;
+    }
+  }
+}
+
+// 主题四头部居中和定宽样式 start 
+@mixin drawer-header-style($value) {
+  .drawer-header{
+    position: relative;
+    max-width: $value;
+    margin: 0 auto;
+    background: none;
+  }
+
+  .app-content-setWidth{
+     width: $value !important;
+     margin: 0 auto;
+  }
+}
+
+@media (min-width:1400px){
+   @include drawer-header-style(1340px);
+}
+@media (min-width:1200px) and (max-width:1399px){
+    @include drawer-header-style(1140px);
+}
+@media (min-width:992px) and (max-width:1199px){
+    @include drawer-header-style(960px);
+}
+@media (min-width:768px) and (max-width:991px){
+    @include drawer-header-style(720px);
+}
+@media (min-width:576px) and (max-width:767px){
+    @include drawer-header-style(540px);
+}
+
+// 主题四头部居中和定宽样式 end
+
+// 固定头部样式开始
+@mixin fixed-header-base($value) {
+  position: fixed;
+  z-index:999;
+  left:$value;
+  top:0;
+}
+
+.fixed-header-one-open{
+@include fixed-header-base(220px);
+width: calc(100% - 220px);
+}
+.fixed-header-one-open + .app-content{
+padding-top: 55px;
+}
+
+.fixed-header-one-close{
+@include fixed-header-base(54px);
+width: calc(100% - 54px);
+}
+.fixed-header-one-close + .app-content{
+padding-top: 55px;
+}
+
+.fixed-header-two{
+@include fixed-header-base(0px);
+width: calc(100% - 0px);
+}
+.fixed-header-two + .app-content{
+padding-top: 55px;
+}
+
+
+.fixed-aside {
+position: fixed;
+z-index: 1;
+height: 100%;
+left: 0;
+top: 0;
+}
+.fixed-aside-open+.app-wrapper{
+padding-left: 220px;
+}
+.fixed-aside-close+.app-wrapper{
+padding-left: 54px;
+}
+// 固定头部样式结束
+
+// 侧边栏菜单黑色主题加样式 开始
+.menu-dark >>>{
+  .el-menu {
+    > .el-menu-item{
+      background-color: #0f1e34 !important;
+    }
+    > .el-submenu> .el-submenu__title{
+      background-color: #0f1e34 !important;
+    }
+  }
+  .el-menu-item.is-active{
+    background-color: #0a2445 !important;
+  }
+  .el-submenu.is-active.is-opened > .el-submenu__title{
+    color: #fff !important;
+    border-bottom: none !important; //兼容布局2
+  }
+
+  .el-submenu.is-active > .el-submenu__title{
+    color: #fff !important;
+    border-bottom: none !important;  //兼容布局2
+  }
+  .el-menu--popup{//兼容布局2
+    background-color: #0f1e34 !important;
+  }
+}
+//测试通过css改样式，暂时不生效
+.menuTest >>>{
+  //  设置hover背景色
+  > .el-menu-item:hover{
+    background-color: rgb(3,16,34);
+  }
+  > .el-submenu:hover .el-submenu__title{
+    background-color: rgb(3,16,34);
+  }
+  //设置一级菜单背景色
+  .el-menu-item, .el-submenu{
+    background-color: #04142A;
+    color: #B0B4B6;
+  }
+  .el-submenu> .el-submenu__title{
+      color: #B0B4B6;
+  }
+  //设置展开菜单背景色
+  .el-menu {
+    > .el-menu-item{
+      background-color: #0f1e34 !important;
+    }
+    > .el-submenu> .el-submenu__title{
+      background-color: #0f1e34 !important;
+    }
+  }
+  //设置选中背景色
+  .el-menu-item.is-active{
+    color: #2f9df2;
+    background-color: #0a2445 !important;
+  }
+}
+ // 侧边栏菜单黑色主题加样式 结束
+
+ // 侧边栏菜单白色主题加样式 开始
+.menu-light >>>{
+  .el-menu {
+    > .el-menu-item{
+      background-color: #f2f6fa !important;
+    }
+    > .el-submenu> .el-submenu__title{
+      background-color: #f2f6fa !important;
+    }
+  }
+  .el-menu-item.is-active{
+    background-color: #e0e6f8 !important;
+  }
+  .el-submenu.is-active.is-opened > .el-submenu__title{
+    color: #010622 !important;
+    border-bottom: none !important; //兼容布局2
+  }
+
+  .el-submenu.is-active > .el-submenu__title{
+    color: #435DEB !important;
+    border-bottom: none !important;  //兼容布局2
+  }
+  .el-menu--popup{//兼容布局2
+    background-color: #f2f6fa !important;
+  }
+}
+
+ // 侧边栏菜单白色主题加样式 结束

evm_monitor/src/styles/transition.scss

+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

evm_monitor/src/styles/variables.scss

+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#304156;
+$menuHover:#263445;
+
+$subMenuBg:#1f2d3d;
+$subMenuHover:#001528;
+
+$sideBarWidth: 210px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}

evm_monitor/src/utils/auth.js

+import Cookies from "js-cookie";
+
+const TokenKey = "Authorization";
+
+export function getToken() {
+  return Cookies.get(TokenKey);
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token);
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey);
+}

evm_monitor/src/utils/datetime.js

+/* eslint-disable */
+
+/**
+ * Date对象的补充函数，包括类似Python中的strftime()
+ * 阿债 https://gitee.com/azhai/datetime.js
+ */
+
+Date.prototype.toMidnight = function() {
+  this.setHours(0);
+  this.setMinutes(0);
+  this.setSeconds(0);
+  this.setMilliseconds(0);
+  return this;
+};
+
+Date.prototype.daysAgo = function(days, midnight) {
+  days = days ? days - 0 : 0;
+  const date = new Date(this.getTime() - days * 8.64e7);
+  return midnight ? date.toMidnight() : date;
+};
+
+Date.prototype.monthBegin = function(offset) {
+  offset = offset ? offset - 0 : 0;
+  const days = this.getDate() - 1 - offset;
+  return this.daysAgo(days, true);
+};
+
+Date.prototype.quarterBegin = function() {
+  const month = this.getMonth() - (this.getMonth() % 3);
+  return new Date(this.getFullYear(), month, 1).toMidnight();
+};
+
+Date.prototype.yearBegin = function() {
+  return new Date(this.getFullYear(), 0, 1).toMidnight();
+};
+
+Date.prototype.strftime = function(format, local) {
+  if (!format) {
+    const str = new Date(this.getTime() + 2.88e7).toISOString();
+    return str.substr(0, 16).replace("T", " ");
+  }
+  local = local && local.startsWith("zh") ? "zh" : "en";
+  const padZero = function(str, len) {
+    const pads = len - str.toString().length;
+    return (pads && pads > 0 ? "0".repeat(pads) : "") + str;
+  };
+  format = format.replace("%F", "%Y-%m-%d");
+  format = format.replace(/%D|%x/, "%m/%d/%y");
+  format = format.replace(/%T|%X/, "%H:%M:%S");
+  format = format.replace("%R", "%H:%M");
+  format = format.replace("%r", "%H:%M:%S %p");
+  format = format.replace("%c", "%a %b %e %H:%M:%S %Y");
+  const _this = this;
+  return format.replace(/%[A-Za-z%]/g, function(f) {
+    let ans = f;
+    switch (f) {
+      case "%%":
+        ans = "%";
+        break;
+
+      case "%Y":
+      case "%G":
+        ans = _this.getFullYear();
+        break;
+
+      case "%y":
+        ans = _this.getFullYear() % 100;
+        break;
+
+      case "%C":
+        ans = _this.getFullYear() / 100;
+        break;
+
+      case "%m":
+      case "%n":
+        ans = _this.getMonth() + 1;
+        break;
+
+      case "%B":
+        local = local.startsWith("en") ? "english" : local;
+
+      case "%b":
+        const m = _this.getMonth();
+        ans = local_labels.monthes[local][m];
+        break;
+
+      case "%d":
+      case "%e":
+        ans = _this.getDate();
+        break;
+
+      case "%j":
+        ans = _this.getDaysOfYear();
+        break;
+
+      case "%U":
+      case "%W":
+        const ws = _this.getWeeksOfYear(f === "%W");
+        ans = padZero(ws, 2);
+        break;
+
+      case "%w":
+        ans = _this.getDay();
+
+      case "%u":
+        ans = ans === 0 ? 7 : ans;
+        break;
+
+      case "%A":
+        local = local.startsWith("en") ? "english" : local;
+
+      case "%a":
+        const d = _this.getDay();
+        ans = local_labels.weekdays[local][d];
+        break;
+
+      case "%H":
+      case "%k":
+        ans = _this.getHours();
+        break;
+
+      case "%I":
+      case "%l":
+        ans = _this.getHours();
+        ans = ans % 12;
+        break;
+
+      case "%M":
+        ans = _this.getMinutes();
+        break;
+
+      case "%S":
+        ans = _this.getSeconds();
+        break;
+
+      case "%s":
+        ans = parseInt(_this.getTime() / 1e3);
+        break;
+
+      case "%f":
+        const ms = _this.getMilliseconds();
+        ans = padZero(ms * 1e3, 6);
+        break;
+
+      case "%P":
+        local = local.startsWith("en") ? "english" : local;
+
+      case "%p":
+        const h = _this.getHours();
+        ans = local_labels.meridians[local][h < 12 ? 0 : 1];
+        break;
+
+      case "%z":
+        let tzo = _this.getTimezoneOffset();
+        const sign = tzo < 0 ? "-" : "+";
+        tzo = Math.abs(tzo);
+        const ho = padZero(tzo / 60, 2);
+        const mo = padZero(tzo % 60, 2);
+        ans = sign + ho + mo;
+        break;
+
+      default:
+        break;
+    }
+    if (
+      f === "%C" ||
+      f === "%y" ||
+      f === "%m" ||
+      f === "%d" ||
+      f === "%H" ||
+      f === "%M" ||
+      f === "%S"
+    ) {
+      ans = padZero(ans, 2);
+    }
+    return ans.toString();
+  });
+};
+
+Date.prototype.humanize = function(local) {
+  local = local && local.startsWith("zh") ? "zh" : "en";
+  const result = this.strftime("", local);
+  const days = (Date.today() - this.toMidnight().getTime()) / 8.64e7;
+  if (days <= -10 || days >= 10) {
+    return result;
+  }
+  const labels = local_labels.dayagos[local];
+  let lbl = "";
+  if (days === 0 || days === 1) {
+    lbl = labels[days];
+  } else if (days === -1) {
+    lbl = labels[2];
+  } else if (days >= 2) {
+    lbl = days + labels[3];
+  } else {
+    lbl = days + labels[4];
+  }
+  return lbl + result.substr(10, 6);
+};
+
+const local_labels = {
+  monthes: {
+    english: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ],
+    en: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ],
+    zh: [
+      "一月",
+      "二月",
+      "三月",
+      "四月",
+      "五月",
+      "六月",
+      "七月",
+      "八月",
+      "九月",
+      "十月",
+      "十一月",
+      "十二月",
+    ],
+  },
+  weekdays: {
+    english: [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+    ],
+    en: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    zh: ["日", "一", "二", "三", "四", "五", "六"],
+  },
+  meridians: {
+    english: ["a.m.", "p.m."],
+    en: ["AM", "PM"],
+    zh: ["上午", "下午"],
+  },
+  dayagos: {
+    english: ["Today", "Yesterday", "Tomorrow", " days ago", " days late"],
+    en: ["Today", "Yesterday", "Tomorrow", " days ago", " days late"],
+    zh: ["今天", "昨天", "明天", "天前", "天后"],
+  },
+};
+
+export default Date;

evm_monitor/src/utils/excel.js

+// 输出base64编码
+const base64 = s => window.btoa(unescape(encodeURIComponent(s)));
+
+function checkNullOrUndefined(value) {
+    return (!value && value != 0) || (typeof(value) == "undefined")
+}
+
+export function exportJsonToExcel({ header = [], headerLabel = "", headerProp = "", jsonData = [], worksheet = 'Sheet', filename = "table-list" } = {}) {
+    // 列标题
+    let str = '<tr>';
+    for (let i = 0; i < header.length; i++) {
+        str += `<td>${header[i][headerLabel]}</td>`
+    }
+    str += "</tr>"
+
+    // 循环遍历，每行加入tr标签，每个单元格加td标签
+    for (let i = 0; i < jsonData.length; i++) {
+        str += '<tr>';
+        for (const obj of header) {
+            // 增加\t为了不让表格显示科学计数法或者其他格式
+            str += `<td style="mso-number-format: '\@';">${ checkNullOrUndefined(jsonData[i][obj[headerProp]]) ? "" : jsonData[i][obj[headerProp]] + '\t'}</td>`;
+        }
+        str += '</tr>';
+    }
+    // Worksheet名
+    const uri = 'data:application/vnd.ms-excel;base64,';
+    // 下载的表格模板数据
+    const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
+        xmlns:x="urn:schemas-microsoft-com:office:excel" 
+        xmlns="http://www.w3.org/TR/REC-html40">
+        <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
+        <x:Name>${worksheet}</x:Name>
+        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
+        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
+        </head><body><table>${str}</table></body></html>`;
+    // 下载模板
+    // window.location.href = uri + base64(template);
+
+    // 通过创建a标签实现
+    const body = document.getElementsByTagName("body")[0];
+    const link = document.createElement("a");
+    body.appendChild(link);
+    link.href = uri + base64(template);
+    link.download = `${filename}.xls`;
+    link.click();
+    document.body.removeChild(link);
+    // link.parentNode.removeChild(link);
+}
\ No newline at end of file

evm_monitor/src/utils/index.js

+import dateFormat from "dateformat";
+import settings from "@/settings";
+
+/**
+ * This is just a simple version of deep copy
+ * Has a lot of edge cases bug
+ * If you want to use a perfect deep copy, use lodash's _.cloneDeep
+ * @param {Object} source
+ * @returns {Object}
+ */
+export function deepClone(source) {
+  if (!source && typeof source !== "object") {
+    throw new Error("error arguments", "deepClone");
+  }
+  const targetObj = source.constructor === Array ? [] : {};
+  Object.keys(source).forEach((keys) => {
+    if (source[keys] && typeof source[keys] === "object") {
+      targetObj[keys] = deepClone(source[keys]);
+    } else {
+      targetObj[keys] = source[keys];
+    }
+  });
+  return targetObj;
+}
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string | null}
+ */
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null;
+  }
+  const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
+  let date;
+  if (typeof time === "object") {
+    date = time;
+  } else {
+    if (typeof time === "string" && /^[0-9]+$/.test(time)) {
+      time = parseInt(time);
+    }
+    if (typeof time === "number" && time.toString().length === 10) {
+      time = time * 1000;
+    }
+    date = new Date(time);
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay(),
+  };
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    const value = formatObj[key];
+    // Note: getDay() returns 0 on Sunday
+    if (key === "a") {
+      return ["日", "一", "二", "三", "四", "五", "六"][value];
+    }
+    return value.toString().padStart(2, "0");
+  });
+  return time_str;
+}
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+export function formatTime(time, option) {
+  if (("" + time).length === 10) {
+    time = parseInt(time) * 1000;
+  } else {
+    time = +time;
+  }
+  const d = new Date(time);
+  const now = Date.now();
+
+  const diff = (now - d) / 1000;
+
+  if (diff < 30) {
+    return "刚刚";
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + "分钟前";
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + "小时前";
+  } else if (diff < 3600 * 24 * 2) {
+    return "1天前";
+  }
+  if (option) {
+    return parseTime(time, option);
+  } else {
+    return (
+      d.getMonth() +
+      1 +
+      "月" +
+      d.getDate() +
+      "日" +
+      d.getHours() +
+      "时" +
+      d.getMinutes() +
+      "分"
+    );
+  }
+}
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function param2Obj(url) {
+  const search = url.split("?")[1];
+  if (!search) {
+    return {};
+  }
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"')
+        .replace(/\+/g, " ") +
+      '"}'
+  );
+}
+
+/**
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result;
+
+  const later = function () {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp;
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
+      }
+    }
+  };
+
+  return function (...args) {
+    context = this;
+    timestamp = +new Date();
+    const callNow = immediate && !timeout;
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+
+    return result;
+  };
+}
+
+// timeStamp: MSecsSinceEpoch = Unix timestamp * 1000
+export function parseTimeStamp(timeStamp) {
+  return dateFormat(ts2Date(timeStamp), "yyyy-mm-dd HH:MM:ss");
+}
+
+function ts2Date(strTimestamp) {
+  var timestamp = parseInt(strTimestamp);
+  if (isNaN(timestamp)) {
+    timestamp = 0;
+  }
+  return new Date(timestamp);
+}
+
+export function value2CheckedList(value, options, length) {
+  if (value === undefined) {
+    return;
+  }
+  var bits = value.toString(2);
+  var bitsCount = bits.length;
+  for (var i = 0; i < length - bitsCount; i++) {
+    bits = "0" + bits;
+  }
+  bits = bits.split("").reverse().join("");
+  var ret = [];
+  for (i = 0; i < bits.length; i++) {
+    if (bits[i] === "1") {
+      ret.push(options[i]);
+    }
+  }
+  return ret;
+}
+
+export function checkedList2Value(checkedList, options, length) {
+  var bits = "";
+  for (var i = 0; i < length; i++) {
+    if (checkedList.indexOf(options[i]) != -1) {
+      bits += "1";
+    } else {
+      bits += "0";
+    }
+  }
+
+  bits = bits.split("").reverse().join("");
+  return parseInt(bits, 2);
+}
+
+export function setCache(key, value) {
+  localStorage.setItem(key, JSON.stringify(value));
+}
+
+export function getCache(key) {
+  return JSON.parse(localStorage.getItem(key));
+}
+
+export function mapTrim(obj) {
+  const t = {};
+  Object.keys(obj).forEach((key) => {
+    if (
+      typeof obj[key] !== "undefined" &&
+      obj[key] !== null &&
+      obj[key] !== ""
+    ) {
+      if (typeof obj[key] === "string") t[key] = obj[key].trim();
+      else t[key] = obj[key];
+    }
+  });
+  return t;
+}
+
+export function strTrim(str) {
+  str = str
+    .replace(/^([\s\n\r]|<br>|<br\/>|&nbsp;)+/, "")
+    .replace(/([\s\n\r]|<br>|<br\/>|&nbsp;)+$/, "");
+  return str.replace(/(\r\n)|[\n\r]/g, "<br/>"); // 转换换行符
+}
+
+export function getUUID() {
+  let s = [];
+  const hexDigits = "0123456789abcdef";
+  for (let i = 0; i < 36; i++) {
+    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
+  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+  s[8] = s[13] = s[18] = s[23] = "-";
+
+  return s.join("");
+}
+
+export function getPageTitle(pageTitle) {
+  const title = settings.name.zh || settings.name.en || "Web Creator Pro";
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`;
+  }
+  return `${title}`;
+}
+
+export function compareObjectDiff(dest, sour) {
+  const result = {};
+  Object.keys(dest).filter((key) => {
+    if (dest[key] != sour[key]) result[key] = dest[key];
+  });
+  return result;
+}
+
+export function formatBytes(bytes, decimals) {
+  if (bytes == 0) return "0 Bytes";
+  var k = 1024,
+    dm = decimals + 1 || 3,
+    sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
+    i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
+
+export function download(name, url) {
+    return new Promise((resolve) => {
+        var a = document.createElement("a");
+        a.href = url;
+        a.download = name;
+        a.target = "_blank";
+        a.click();
+        resolve();
+        // document.body.removeChild(a);
+    });
+}
+
+export function checkURL(URL) {
+    var str = URL,
+        Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/,
+        objExp = new RegExp(Expression);
+
+    return objExp.test(str)
+}

evm_monitor/src/utils/permission.js

+import store from "@/store";
+
+/**
+ * @param {Array} value
+ * @returns {Boolean}
+ * @example see @/views/permission/directive.vue
+ */
+export default function checkPermission(value) {
+  if (value && value instanceof Array && value.length > 0) {
+    const permissions = store.getters && store.getters.permissions;
+    const permissionRoles = value;
+
+    const hasPermission = permissions.some((permission) => {
+      return permissionRoles.includes(permission);
+    });
+
+    if (!hasPermission) return false;
+    return true;
+  } else {
+    console.error(`need roles! Like v-permission="['admin','editor']"`);
+    return false;
+  }
+}

evm_monitor/src/utils/request.js

+import axios from "axios";
+import store from "@/store";
+import { getToken } from "@/utils/auth";
+
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 15000, // request timeout
+});
+
+// request interceptor
+service.interceptors.request.use(
+  (config) => {
+    // do something before request is sent
+
+    if (store.getters.token) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      config.headers["Authorization"] = getToken();
+    }
+    return config;
+  },
+  (error) => {
+    // do something with request error
+    return Promise.reject(error);
+  }
+);
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  (response) => {
+    const res = response.data;
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.code === 200) return Promise.resolve(res);
+    else if (res.code === 401)
+      store.dispatch("user/removeToken").then(() => {
+        window.location.reload();
+      });
+    else return Promise.reject(res);
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export default service;

evm_monitor/src/utils/shortcuts.js

+import Date from "./datetime.js";
+
+export const calendarBaseShortcuts = [
+  {
+    text: "今天",
+    onClick(picker) {
+      const start = new Date();
+      picker.$emit("pick", [start, start]);
+    },
+  },
+  {
+    text: "昨天",
+    onClick(picker) {
+      const start = new Date().daysAgo(1);
+      picker.$emit("pick", [start, start]);
+    },
+  },
+  {
+    text: "最近一周",
+    onClick(picker) {
+      const start = new Date().daysAgo(7);
+      picker.$emit("pick", [start, new Date()]);
+    },
+  },
+  {
+    text: "最近30天",
+    onClick(picker) {
+      const start = new Date().daysAgo(30);
+      picker.$emit("pick", [start, new Date()]);
+    },
+  },
+  {
+    text: "这个月",
+    onClick(picker) {
+      const start = new Date().monthBegin();
+      picker.$emit("pick", [start, new Date()]);
+    },
+  },
+  {
+    text: "本季度",
+    onClick(picker) {
+      const start = new Date().quarterBegin();
+      picker.$emit("pick", [start, new Date()]);
+    },
+  },
+];
+
+export const calendarMoveShortcuts = [
+  {
+    text: "‹ 往前一天 ",
+    onClick(picker) {
+      if (picker.value.length === 0) {
+        picker.value = [new Date(), new Date()];
+      }
+      const start = picker.value[0].daysAgo(1);
+      const end = picker.value[1].daysAgo(1);
+      picker.$emit("pick", [start, end]);
+    },
+  },
+  {
+    text: " 往后一天 ›",
+    onClick(picker) {
+      let start = new Date();
+      let end = new Date();
+      if (picker.value.length > 0) {
+        if (end - picker.value[1] > 8.64e7) {
+          start = picker.value[0].daysAgo(-1);
+          end = picker.value[1].daysAgo(-1);
+        } else {
+          start = picker.value[0];
+        }
+      }
+      picker.$emit("pick", [start, end]);
+    },
+  },
+  {
+    text: "« 往前一周 ",
+    onClick(picker) {
+      if (picker.value.length === 0) {
+        picker.value = [new Date().daysAgo(7), new Date()];
+      }
+      const start = picker.value[0].daysAgo(7);
+      const end = picker.value[1].daysAgo(7);
+      picker.$emit("pick", [start, end]);
+    },
+  },
+  {
+    text: " 往后一周 »",
+    onClick(picker) {
+      let start = new Date().daysAgo(7);
+      let end = new Date();
+      if (picker.value.length > 0) {
+        if (end - picker.value[1] > 8.64e7) {
+          start = picker.value[0].daysAgo(-7);
+          end = picker.value[1].daysAgo(-7);
+        } else {
+          start = picker.value[0];
+        }
+      }
+      picker.$emit("pick", [start, end]);
+    },
+  },
+];
+
+export const calendarShortcuts = [
+  ...calendarBaseShortcuts,
+  ...calendarMoveShortcuts,
+];

evm_monitor/src/utils/utils.js

+function formatNumber(n) {
+    n = n.toString();
+    return n[1] ? n : "0" + n;
+}
+
+export function getUTCDateTime(datetime) {
+    var year = datetime.getUTCFullYear();
+    var month = datetime.getUTCMonth() + 1;
+    var day = datetime.getUTCDate();
+    var hour = datetime.getUTCHours();
+    var minute = datetime.getUTCMinutes();
+    var second = datetime.getUTCSeconds();
+    return [year, month, day, hour, minute, second].map(formatNumber);
+}
+
+export function formatDateTime(
+    datetime = [],
+    format = ["-", "-", " ", ":", ":"]
+) {
+    let result = "";
+    datetime.forEach((d, i) => {
+        result += i < 5 ? d + format[i] : d;
+    });
+    return result;
+}
+
+export function formatUTCDateTime(datetime) {
+    if (!(datetime instanceof Date)) datetime = new Date(datetime);
+    datetime = getUTCDateTime(datetime);
+    const format = ["-", "-", " ", ":", ":"];
+    let result = "";
+    datetime.forEach((d, i) => {
+        result += i < 5 ? d + format[i] : d;
+    });
+    return result;
+}

evm_monitor/src/utils/validate.js

+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}

evm_monitor/src/utils/wsNotify.js

+import Vue from "vue";
+import defaultSettings from "@/settings";
+
+let wsNotify = null;
+
+const connectWSServer = () => {
+  try {
+    wsNotify = new WebSocket(
+      "ws://" +
+        window.location.hostname +
+        ":" +
+        defaultSettings.port +
+        "/ws/api/v1/notify"
+    );
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+connectWSServer();
+
+window.wsNotify = wsNotify;
+
+wsNotify.notifyBus = new Vue();
+
+wsNotify.onopen = function(event) {
+  console.log("wsNotify websocket is conneted!", event);
+};
+
+wsNotify.onmessage = function(event) {
+  var message = JSON.parse(event.data);
+  console.log(message);
+  // console.log(message["type"]);
+  wsNotify.notifyBus.$emit(message["type"], message);
+};
+
+wsNotify.onerror = function(event) {
+  console.log(event);
+};
+
+wsNotify.onclose = function(event) {
+  // 关闭 websocket
+  console.log("wsNotify websocket is colosed!", event);
+  // connectWSServer();
+};
+
+export default wsNotify;

evm_monitor/src/vendor/Export2Excel.js

+import { saveAs } from 'file-saver'
+import XLSX from 'xlsx'
+
+function generateArray(table) {
+  var out = [];
+  var rows = table.querySelectorAll('tr');
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll('td');
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute('colspan');
+      var rowspan = cell.getAttribute('rowspan');
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1
+          }
+        });
+      };
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+};
+
+function datenum(v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
+    }
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C]
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
+
+      if (typeof cell.v === 'number') cell.t = 'n';
+      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      else if (cell.v instanceof Date) {
+        cell.t = 'n';
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = 's';
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook() {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab(s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  return buf;
+}
+
+export function export_table_to_excel(id) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws['!merges'] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), "test.xlsx")
+}
+
+export function export_json_to_excel({
+  multiHeader = [],
+  header,
+  data,
+  filename,
+  merges = [],
+  autoWidth = true,
+  bookType = 'xlsx'
+} = {}) {
+  /* original data */
+  filename = filename || 'excel-list'
+  data = [...data]
+  data.unshift(header);
+
+  for (let i = multiHeader.length - 1; i > -1; i--) {
+    data.unshift(multiHeader[i])
+  }
+
+  var ws_name = "SheetJS";
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  if (merges.length > 0) {
+    if (!ws['!merges']) ws['!merges'] = [];
+    merges.forEach(item => {
+      ws['!merges'].push(XLSX.utils.decode_range(item))
+    })
+  }
+
+  if (autoWidth) {
+    /*设置worksheet每列的最大宽度*/
+    const colWidth = data.map(row => row.map(val => {
+      /*先判断是否为null/undefined*/
+      if (val == null) {
+        return {
+          'wch': 10
+        };
+      }
+      /*再判断是否为中文*/
+      else if (val.toString().charCodeAt(0) > 255) {
+        return {
+          'wch': val.toString().length * 2
+        };
+      } else {
+        return {
+          'wch': val.toString().length
+        };
+      }
+    }))
+    /*以第一行为初始值*/
+    let result = colWidth[0];
+    for (let i = 1; i < colWidth.length; i++) {
+      for (let j = 0; j < colWidth[i].length; j++) {
+        if (result[j]['wch'] < colWidth[i][j]['wch']) {
+          result[j]['wch'] = colWidth[i][j]['wch'];
+        }
+      }
+    }
+    ws['!cols'] = result;
+  }
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: bookType,
+    bookSST: false,
+    type: 'binary'
+  });
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), `${filename}.${bookType}`);
+}

evm_monitor/src/vendor/Export2Zip.js

+import { saveAs } from 'file-saver'
+import JSZip from 'jszip'
+
+export function export_txt_to_zip(th, jsonData, txtName, zipName) {
+  const zip = new JSZip()
+  const txt_name = txtName || 'file'
+  const zip_name = zipName || 'file'
+  const data = jsonData
+  let txtData = `${th}\r\n`
+  data.forEach((row) => {
+    let tempStr = ''
+    tempStr = row.toString()
+    txtData += `${tempStr}\r\n`
+  })
+  zip.file(`${txt_name}.txt`, txtData)
+  zip.generateAsync({
+    type: "blob"
+  }).then((blob) => {
+    saveAs(blob, `${zip_name}.zip`)
+  }, (err) => {
+    alert('导出失败')
+  })
+}

evm_monitor/src/views/error-pages/403.vue

+<template>
+  <div class="container">
+    <!-- <img src="@/assets/images/403.png" /> -->
+    <h3>暂无访问权限</h3>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "Page403",
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+  beforeMount() {},
+};
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  & > img {
+    display: block;
+  }
+}
+</style>
\ No newline at end of file

evm_monitor/src/views/error-pages/404.vue

+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">All rights reserved
+          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+        </div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
+        <a href="" class="bullshit__return-home">Back to home</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return 'The webmaster said that you can not enter this page...'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

evm_monitor/src/views/error-pages/not-found.vue

+<template>
+  <div class="row">
+    <div class="col-md-6">
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 800 600"
+      >
+        <g>
+          <defs>
+            <clipPath id="GlassClip">
+              <path
+                d="M380.857,346.164c-1.247,4.651-4.668,8.421-9.196,10.06c-9.332,3.377-26.2,7.817-42.301,3.5
+                s-28.485-16.599-34.877-24.192c-3.101-3.684-4.177-8.66-2.93-13.311l7.453-27.798c0.756-2.82,3.181-4.868,6.088-5.13
+                c6.755-0.61,20.546-0.608,41.785,5.087s33.181,12.591,38.725,16.498c2.387,1.682,3.461,4.668,2.705,7.488L380.857,346.164z"
+              />
+            </clipPath>
+            <clipPath id="cordClip">
+              <rect width="800" height="600" />
+            </clipPath>
+          </defs>
+
+          <g id="planet">
+            <circle
+              fill="none"
+              stroke="#0E0620"
+              stroke-width="3"
+              stroke-miterlimit="10"
+              cx="572.859"
+              cy="108.803"
+              r="90.788"
+            />
+
+            <circle
+              id="craterBig"
+              fill="none"
+              stroke="#0E0620"
+              stroke-width="3"
+              stroke-miterlimit="10"
+              cx="548.891"
+              cy="62.319"
+              r="13.074"
+            />
+
+            <circle
+              id="craterSmall"
+              fill="none"
+              stroke="#0E0620"
+              stroke-width="3"
+              stroke-miterlimit="10"
+              cx="591.743"
+              cy="158.918"
+              r="7.989"
+            />
+            <path
+              id="ring"
+              fill="none"
+              stroke="#0E0620"
+              stroke-width="3"
+              stroke-linecap="round"
+              stroke-miterlimit="10"
+              d="
+			M476.562,101.461c-30.404,2.164-49.691,4.221-49.691,8.007c0,6.853,63.166,12.408,141.085,12.408s141.085-5.555,141.085-12.408
+			c0-3.378-15.347-4.988-40.243-7.225"
+            />
+
+            <path
+              id="ringShadow"
+              opacity="0.5"
+              fill="none"
+              stroke="#0E0620"
+              stroke-width="3"
+              stroke-linecap="round"
+              stroke-miterlimit="10"
+              d="
+			M483.985,127.43c23.462,1.531,52.515,2.436,83.972,2.436c36.069,0,68.978-1.19,93.922-3.149"
+            />
+          </g>
+          <g id="stars">
+            <g id="starsBig">
+              <g>
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="518.07"
+                  y1="245.375"
+                  x2="518.07"
+                  y2="266.581"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="508.129"
+                  y1="255.978"
+                  x2="528.01"
+                  y2="255.978"
+                />
+              </g>
+              <g>
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="154.55"
+                  y1="231.391"
+                  x2="154.55"
+                  y2="252.598"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="144.609"
+                  y1="241.995"
+                  x2="164.49"
+                  y2="241.995"
+                />
+              </g>
+              <g>
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="320.135"
+                  y1="132.746"
+                  x2="320.135"
+                  y2="153.952"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="310.194"
+                  y1="143.349"
+                  x2="330.075"
+                  y2="143.349"
+                />
+              </g>
+              <g>
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="200.67"
+                  y1="483.11"
+                  x2="200.67"
+                  y2="504.316"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="210.611"
+                  y1="493.713"
+                  x2="190.73"
+                  y2="493.713"
+                />
+              </g>
+            </g>
+            <g id="starsSmall">
+              <g>
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="432.173"
+                  y1="380.52"
+                  x2="432.173"
+                  y2="391.83"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="426.871"
+                  y1="386.175"
+                  x2="437.474"
+                  y2="386.175"
+                />
+              </g>
+              <g>
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="489.555"
+                  y1="299.765"
+                  x2="489.555"
+                  y2="308.124"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="485.636"
+                  y1="303.945"
+                  x2="493.473"
+                  y2="303.945"
+                />
+              </g>
+              <g>
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="231.468"
+                  y1="291.009"
+                  x2="231.468"
+                  y2="299.369"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="227.55"
+                  y1="295.189"
+                  x2="235.387"
+                  y2="295.189"
+                />
+              </g>
+              <g>
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="244.032"
+                  y1="547.539"
+                  x2="244.032"
+                  y2="555.898"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="247.95"
+                  y1="551.719"
+                  x2="240.113"
+                  y2="551.719"
+                />
+              </g>
+              <g>
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="186.359"
+                  y1="406.967"
+                  x2="186.359"
+                  y2="415.326"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="190.277"
+                  y1="411.146"
+                  x2="182.44"
+                  y2="411.146"
+                />
+              </g>
+              <g>
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="480.296"
+                  y1="406.967"
+                  x2="480.296"
+                  y2="415.326"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  x1="484.215"
+                  y1="411.146"
+                  x2="476.378"
+                  y2="411.146"
+                />
+              </g>
+            </g>
+            <g id="circlesBig">
+              <circle
+                fill="none"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-miterlimit="10"
+                cx="588.977"
+                cy="255.978"
+                r="7.952"
+              />
+
+              <circle
+                fill="none"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-miterlimit="10"
+                cx="450.066"
+                cy="320.259"
+                r="7.952"
+              />
+
+              <circle
+                fill="none"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-miterlimit="10"
+                cx="168.303"
+                cy="353.753"
+                r="7.952"
+              />
+
+              <circle
+                fill="none"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-miterlimit="10"
+                cx="429.522"
+                cy="201.185"
+                r="7.952"
+              />
+
+              <circle
+                fill="none"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-miterlimit="10"
+                cx="200.67"
+                cy="176.313"
+                r="7.952"
+              />
+
+              <circle
+                fill="none"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-miterlimit="10"
+                cx="133.343"
+                cy="477.014"
+                r="7.952"
+              />
+
+              <circle
+                fill="none"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-miterlimit="10"
+                cx="283.521"
+                cy="568.033"
+                r="7.952"
+              />
+
+              <circle
+                fill="none"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-miterlimit="10"
+                cx="413.618"
+                cy="482.387"
+                r="7.952"
+              />
+            </g>
+            <g id="circlesSmall">
+              <circle fill="#0E0620" cx="549.879" cy="296.402" r="2.651" />
+              <circle fill="#0E0620" cx="253.29" cy="229.24" r="2.651" />
+              <circle fill="#0E0620" cx="434.824" cy="263.931" r="2.651" />
+              <circle fill="#0E0620" cx="183.708" cy="544.176" r="2.651" />
+              <circle fill="#0E0620" cx="382.515" cy="530.923" r="2.651" />
+              <circle fill="#0E0620" cx="130.693" cy="305.608" r="2.651" />
+              <circle fill="#0E0620" cx="480.296" cy="477.014" r="2.651" />
+            </g>
+          </g>
+          <g id="spaceman" clip-path="url(cordClip)">
+            <path
+              id="cord"
+              fill="none"
+              stroke="#0E0620"
+              stroke-width="3"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-miterlimit="10"
+              d="
+			M273.813,410.969c0,0-54.527,39.501-115.34,38.218c-2.28-0.048-4.926-0.241-7.841-0.548
+			c-68.038-7.178-134.288-43.963-167.33-103.87c-0.908-1.646-1.793-3.3-2.654-4.964c-18.395-35.511-37.259-83.385-32.075-118.817"
+            />
+
+            <path
+              id="backpack"
+              fill="#FFFFFF"
+              stroke="#0E0620"
+              stroke-width="3"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-miterlimit="10"
+              d="
+			M338.164,454.689l-64.726-17.353c-11.086-2.972-17.664-14.369-14.692-25.455l15.694-58.537
+			c3.889-14.504,18.799-23.11,33.303-19.221l52.349,14.035c14.504,3.889,23.11,18.799,19.221,33.303l-15.694,58.537
+			C360.647,451.083,349.251,457.661,338.164,454.689z"
+            />
+            <g id="antenna">
+              <line
+                fill="#FFFFFF"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                x1="323.396"
+                y1="236.625"
+                x2="295.285"
+                y2="353.753"
+              />
+              <circle
+                fill="#FFFFFF"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                cx="323.666"
+                cy="235.617"
+                r="6.375"
+              />
+            </g>
+            <g id="armR">
+              <path
+                fill="#FFFFFF"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                d="
+				M360.633,363.039c1.352,1.061,4.91,5.056,5.824,6.634l27.874,47.634c3.855,6.649,1.59,15.164-5.059,19.02l0,0
+				c-6.649,3.855-15.164,1.59-19.02-5.059l-5.603-9.663"
+              />
+
+              <path
+                fill="#FFFFFF"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                d="
+				M388.762,434.677c5.234-3.039,7.731-8.966,6.678-14.594c2.344,1.343,4.383,3.289,5.837,5.793
+				c4.411,7.596,1.829,17.33-5.767,21.741c-7.596,4.411-17.33,1.829-21.741-5.767c-1.754-3.021-2.817-5.818-2.484-9.046
+				C375.625,437.355,383.087,437.973,388.762,434.677z"
+              />
+            </g>
+            <g id="armL">
+              <path
+                fill="#FFFFFF"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                d="
+				M301.301,347.66c-1.702,0.242-5.91,1.627-7.492,2.536l-47.965,27.301c-6.664,3.829-8.963,12.335-5.134,18.999h0
+				c3.829,6.664,12.335,8.963,18.999,5.134l9.685-5.564"
+              />
+
+              <path
+                fill="#FFFFFF"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                d="
+				M241.978,395.324c-3.012-5.25-2.209-11.631,1.518-15.977c-2.701-0.009-5.44,0.656-7.952,2.096
+				c-7.619,4.371-10.253,14.09-5.883,21.71c4.371,7.619,14.09,10.253,21.709,5.883c3.03-1.738,5.35-3.628,6.676-6.59
+				C252.013,404.214,245.243,401.017,241.978,395.324z"
+              />
+            </g>
+            <g id="body">
+              <path
+                fill="#FFFFFF"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                d="
+				M353.351,365.387c-7.948,1.263-16.249,0.929-24.48-1.278c-8.232-2.207-15.586-6.07-21.836-11.14
+				c-17.004,4.207-31.269,17.289-36.128,35.411l-1.374,5.123c-7.112,26.525,8.617,53.791,35.13,60.899l0,0
+				c26.513,7.108,53.771-8.632,60.883-35.158l1.374-5.123C371.778,395.999,365.971,377.536,353.351,365.387z"
+              />
+              <path
+                fill="none"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                d="
+				M269.678,394.912L269.678,394.912c26.3,20.643,59.654,29.585,93.106,25.724l2.419-0.114"
+              />
+            </g>
+            <g id="legs">
+              <g id="legR">
+                <path
+                  fill="#FFFFFF"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-miterlimit="10"
+                  d="
+					M312.957,456.734l-14.315,53.395c-1.896,7.07,2.299,14.338,9.37,16.234l0,0c7.07,1.896,14.338-2.299,16.234-9.37l17.838-66.534
+					C333.451,455.886,323.526,457.387,312.957,456.734z"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-miterlimit="10"
+                  x1="304.883"
+                  y1="486.849"
+                  x2="330.487"
+                  y2="493.713"
+                />
+              </g>
+              <g id="legL">
+                <path
+                  fill="#FFFFFF"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-miterlimit="10"
+                  d="
+					M296.315,452.273L282,505.667c-1.896,7.07-9.164,11.265-16.234,9.37l0,0c-7.07-1.896-11.265-9.164-9.37-16.234l17.838-66.534
+					C278.993,441.286,286.836,447.55,296.315,452.273z"
+                />
+
+                <line
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-miterlimit="10"
+                  x1="262.638"
+                  y1="475.522"
+                  x2="288.241"
+                  y2="482.387"
+                />
+              </g>
+            </g>
+            <g id="head">
+              <ellipse
+                transform="matrix(0.259 -0.9659 0.9659 0.259 -51.5445 563.2371)"
+                fill="#FFFFFF"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                cx="341.295"
+                cy="315.211"
+                rx="61.961"
+                ry="60.305"
+              />
+              <path
+                id="headStripe"
+                fill="none"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                d="
+				M330.868,261.338c-7.929,1.72-15.381,5.246-21.799,10.246"
+              />
+
+              <path
+                fill="#FFFFFF"
+                stroke="#0E0620"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-miterlimit="10"
+                d="
+				M380.857,346.164c-1.247,4.651-4.668,8.421-9.196,10.06c-9.332,3.377-26.2,7.817-42.301,3.5s-28.485-16.599-34.877-24.192
+				c-3.101-3.684-4.177-8.66-2.93-13.311l7.453-27.798c0.756-2.82,3.181-4.868,6.088-5.13c6.755-0.61,20.546-0.608,41.785,5.087
+				s33.181,12.591,38.725,16.498c2.387,1.682,3.461,4.668,2.705,7.488L380.857,346.164z"
+              />
+              <g clip-path="url(#GlassClip)">
+                <polygon
+                  id="glassShine"
+                  fill="none"
+                  stroke="#0E0620"
+                  stroke-width="3"
+                  stroke-miterlimit="10"
+                  points="
+					278.436,375.599 383.003,264.076 364.393,251.618 264.807,364.928 				"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div class="col-md-6">
+      <h1>404</h1>
+      <h2>UH OH! 页面丢失</h2>
+      <p>您所寻找的页面不存在。你可以点击下面的按钮，返回主页。</p>
+      <button class="btn green">返回首页</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import gsap from 'gsap';
+export default {
+  name: "NotFound",
+  mounted() {
+    gsap.set("svg", { visibility: "visible" });
+    gsap.to("#headStripe", {
+      y: 0.5,
+      rotation: 1,
+      yoyo: true,
+      repeat: -1,
+      ease: "sine.inOut",
+      duration: 1,
+    });
+
+    gsap.to("#spaceman", {
+      y: 0.5,
+      rotation: 1,
+      yoyo: true,
+      repeat: -1,
+      ease: "sine.inOut",
+      duration: 1,
+    });
+
+    gsap.to("#craterSmall", {
+      x: -3,
+      yoyo: true,
+      repeat: -1,
+      duration: 1,
+      ease: "sine.inOut",
+    });
+
+    gsap.to("#craterBig", {
+      x: 3,
+      yoyo: true,
+      repeat: -1,
+      duration: 1,
+      ease: "sine.inOut",
+    });
+
+    gsap.to("#planet", {
+      rotation: -2,
+      yoyo: true,
+      repeat: -1,
+      duration: 1,
+      ease: "sine.inOut",
+      transformOrigin: "50% 50%",
+    });
+
+    gsap.to("#starsBig g", {
+      rotation: "random(-30,30)",
+      transformOrigin: "50% 50%",
+      yoyo: true,
+      repeat: -1,
+      ease: "sine.inOut",
+    });
+
+    gsap.fromTo(
+      "#starsSmall g",
+      { scale: 0, transformOrigin: "50% 50%" },
+      {
+        scale: 1,
+        transformOrigin: "50% 50%",
+        yoyo: true,
+        repeat: -1,
+        stagger: 0.1,
+      }
+    );
+
+    gsap.to("#circlesSmall circle", {
+      y: -4,
+      yoyo: true,
+      duration: 1,
+      ease: "sine.inOut",
+      repeat: -1,
+    });
+
+    gsap.to("#circlesBig circle", {
+      y: -2,
+      yoyo: true,
+      duration: 1,
+      ease: "sine.inOut",
+      repeat: -1,
+    });
+
+    gsap.set("#glassShine", { x: -68 });
+
+    gsap.to("#glassShine", {
+      x: 80,
+      duration: 2,
+      rotation: -30,
+      ease: "expo.inOut",
+      transformOrigin: "50% 50%",
+      repeat: -1,
+      repeatDelay: 8,
+      delay: 2,
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+:root {
+  --blue: #0e0620;
+  --white: #fff;
+  --green: #2ccf6d;
+}
+
+div.row {
+  display: flex;
+  flex-direction: row;
+  & > div.col-md-6 {
+    width: 50%;
+    button.btn {
+      z-index: 1;
+      display: inline-block;
+      line-height: 1.5;
+      overflow: hidden;
+      background: transparent;
+      position: relative;
+      padding: 8px 50px;
+      border-radius: 30px;
+      cursor: pointer;
+      font-size: 1em;
+      letter-spacing: 2px;
+      -webkit-transition: 0.2s ease;
+      transition: 0.2s ease;
+      font-weight: bold;
+      margin: 5px 0px;
+      text-align: center;
+      white-space: nowrap;
+      vertical-align: middle;
+      text-transform: none;
+      &.green {
+        border: 4px solid var(--green);
+        color: var(--blue);
+        &:before {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 0%;
+          height: 100%;
+          background: var(--green);
+          z-index: -1;
+          -webkit-transition: 0.2s ease;
+          transition: 0.2s ease;
+        }
+        &:hover {
+          color: var(--white);
+          background: var(--green);
+          -webkit-transition: 0.2s ease;
+          transition: 0.2s ease;
+          &:before {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

evm_monitor/src/views/system/apps.vue

+<template>
+  <div class="app-container">
+    <el-form :inline="true" ref="form" :model="form" size="mini">
+      <el-form-item label="应用名称" prop="uuid">
+        <el-select v-model="form.uuid" filterable placeholder="请输入标题">
+          <el-option
+            v-for="(item, index) in selectList"
+            :key="index"
+            :label="item.app_name"
+            :value="item.uuid"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="应用分类">
+        <el-select v-model="form.category" filterable placeholder="请选择分类">
+          <el-option
+            v-for="(item, index) in categoryList"
+            :key="index"
+            :label="item"
+            :value="item"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        ><el-button type="primary" @click="onSubmit"
+          >查询</el-button
+        ></el-form-item
+      >
+      <el-form-item
+        ><el-button type="warning" @click="onAdd"
+          >添加应用</el-button
+        ></el-form-item
+      >
+    </el-form>
+    <el-table
+      :data="list"
+      v-loading="isLoading"
+      element-loading-text="Loading"
+      size="mini"
+      border
+      stripe
+      fit
+      highlight-current-row
+    >
+      <el-table-column
+        prop="app_name"
+        label="应用名称"
+        width="180"
+      ></el-table-column>
+      <el-table-column
+        prop="app_version"
+        label="应用版本号"
+        width="150"
+      ></el-table-column>
+      <el-table-column
+        prop="category"
+        label="应用类别"
+        width="120"
+      ></el-table-column>
+      <el-table-column
+        prop="epk_size"
+        label="应用大小"
+        width="120"
+      ></el-table-column>
+      <el-table-column
+        prop="app_desc"
+        label="应用描述"
+        width="200"
+      ></el-table-column>
+      <el-table-column
+        prop="create_at"
+        label="创建时间"
+        width="150"
+      ></el-table-column>
+      <el-table-column
+        prop="create_by.username"
+        label="创建者"
+        width="150"
+      ></el-table-column>
+      <el-table-column
+        prop="update_at"
+        label="更新时间"
+        width="150"
+        :show-overflow-tooltip="true"
+      ></el-table-column>
+      <el-table-column
+        prop="update_by.username"
+        label="更新者"
+        width="150"
+      ></el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        min-width="260"
+        fixed="right"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="success"
+            @click="handleRebuild(scope.$index, scope.row)"
+            >重新打包</el-button
+          >
+          <el-button
+            size="mini"
+            type="primary"
+            @click="handleBuild(scope.$index, scope.row)"
+            >下载应用</el-button
+          >
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="page-wrapper">
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page.sync="form.pagenum"
+        background
+        small
+        :page-size="form.pagesize"
+        :pager-count="5"
+        layout="pager, prev, next, total"
+        :total="total"
+      ></el-pagination>
+    </div>
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%">
+      <el-form
+        :model="post"
+        status-icon
+        ref="post"
+        size="medium"
+        label-width="100px"
+      >
+        <el-form-item label="应用排序" prop="sort">
+          <el-input
+            type="number"
+            v-model.number="post.sort"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="应用名称" prop="app_name">
+          <el-input
+            type="text"
+            v-model="post.app_name"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="应用版本号" prop="app_version">
+          <el-input
+            type="text"
+            v-model="post.app_version"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="应用类别" prop="category">
+          <el-input
+            type="text"
+            v-model="post.category"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="应用描述" prop="app_desc">
+          <el-input
+            type="text"
+            v-model="post.app_desc"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="应用Logo" prop="app_icon">
+          <el-upload
+            class="avatar-uploader"
+            ref="logo"
+            name="logo"
+            accept="image/*"
+            action="null"
+            :auto-upload="false"
+            :http-request="handleUploadLogo"
+            :on-remove="handleLogoRemove"
+            :on-change="handleLogoChange"
+            :before-upload="beforeLogoUpload"
+          >
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="应用文件" prop="app_files">
+          <el-upload
+            drag
+            multiple
+            ref="upload"
+            name="binfiles"
+            action="null"
+            :auto-upload="false"
+            :http-request="handleUploadFile"
+            :on-remove="handleUploadRemove"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">
+              将文件拖到此处，或<em>点击上传</em>
+            </div>
+            <div class="el-upload__tip" slot="tip">
+              <el-button size="small" type="text" @click="clear"
+                >清空上传</el-button
+              >
+            </div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          size="medium"
+          plain
+          @click="submitForm('post')"
+          >提交</el-button
+        >
+        <el-button type="success" size="medium" plain @click="onReset('form')"
+          >重置</el-button
+        >
+        <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  getAppsList,
+  deleteApp,
+  addApp,
+  rebuildApp,
+  updateApp,
+  getBuildApp,
+} from "@/api/app-store";
+import { mapTrim, download } from "@/utils/index";
+
+export default {
+  name: "AppIndex",
+  data() {
+    return {
+      imageUrl: "",
+      total: 0,
+      list: [],
+      selectList: [],
+      categoryList: [],
+      isLoading: false,
+      form: {
+        uuid: null,
+        name: null,
+        category: null,
+        pagesize: 15,
+        pagenum: 1,
+      },
+      currentIndex: 0,
+      currentValue: null,
+      dialogTitle: "",
+      dialogVisible: false,
+      post: {
+        sort: 0,
+        app_name: "evue_launcher",
+        app_version: "1.0",
+        app_icon: null,
+        category: "tools",
+        app_desc: "启动器",
+        app_files: [],
+        logo: null,
+        fileList: [],
+      },
+    };
+  },
+  computed: {
+    window: () => window,
+  },
+  methods: {
+    clear() {
+      this.imageUrl = null;
+      this.post.app_icon = null;
+      this.post.app_files = [];
+      this.$refs.upload.clearFiles();
+      this.$refs.logo.clearFiles();
+    },
+    fetchData(params) {
+      this.isLoading = true;
+      getAppsList(params)
+        .then((res) => {
+          this.total = res.count;
+          this.list = res.data.map((item) => {
+            if (item.app_build_log && item.app_build_log.app_info)
+              item.epk_size =
+                (item.app_build_log.app_info.buff_length / 1024).toFixed(2) +
+                "KB";
+            else item.epk_size = "";
+            return item;
+          });
+        })
+        .catch((err) => {
+          console.log(err.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+    fetchCategory() {
+      getAppsList({ scope_type: "distinct" }).then(res => {
+        this.categoryList = res.data
+      }).catch(err => {
+        console.log(err.message)
+      })
+    },
+    handleSizeChange(e) {
+      this.form.pagesize = e;
+      this.fetchData(mapTrim(this.form));
+    },
+    handleCurrentChange(e) {
+      this.form.pagenum = e;
+      this.fetchData(mapTrim(this.form));
+    },
+    handleRebuild(index, row) {
+      rebuildApp({ uuid: row.uuid })
+        .then((res) => {
+          this.$message.success(res.message);
+        })
+        .catch((err) => {
+          this.$message.error(err.message);
+        });
+    },
+    handleBuild(index, row) {
+      getBuildApp(row.uuid)
+        .then((res) => {
+          download(`${res.data.app_name}.epk`, res.data.app_path);
+          this.$message.success(res.message);
+        })
+        .catch((err) => {
+          this.$message.error(err.message);
+        });
+    },
+    handleEdit(index, row) {
+      this.post = Object.assign(row);
+      this.imageUrl = null;
+      this.currentIndex = index;
+      this.currentValue = row;
+      this.dialogTitle = "编辑";
+      this.dialogVisible = true;
+    },
+    handleDelete(index, row) {
+      this.$alert(
+        "您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。",
+        "删除提醒",
+        {
+          confirmButtonText: "确定",
+          callback: (action) => {
+            if (action == "confirm")
+              deleteApp(row.uuid)
+                .then((res) => {
+                  console.log(res);
+                  this.total -= 1;
+                  this.$delete(this.list, index);
+                  this.$message({
+                    type: "success",
+                    message: `成功删除第${index}行`,
+                  });
+                })
+                .catch((err) => {
+                  this.$message.error(err.message);
+                });
+          },
+        }
+      );
+    },
+    handleUploadLogo(file) {
+      this.post.logo = file;
+    },
+    handleUploadFile(file) {
+      this.post.fileList.push(file);
+    },
+    handleUploadRemove(file, fileList) {
+      console.log(file, fileList);
+      for (let i = 0; i < this.post.app_files.length; i++) {
+        if (this.post.app_files[i].uuid == file.response.data.uuid) {
+          this.post.app_files.splice(i, 1);
+          break;
+        }
+      }
+    //   this.post.app_files = fileList;
+    },
+    handleLogoChange(file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+    },
+    beforeLogoUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isLt2M;
+    },
+    handleLogoRemove(file) {
+      console.log(file);
+      this.imageUrl = null;
+      this.post.logo = file.file;
+    },
+    fetchSelectData() {
+      getAppsList({ scope_type: "list" })
+        .then((res) => {
+          if (res.code == 200) this.selectList = res.data;
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        let result = true;
+        if (valid) {
+          if (this.dialogTitle === "添加") {
+            this.$refs.upload.submit(); // 调用这个upload组件该方法才会执行http-request回调
+            this.$refs.logo.submit();
+
+            let formData = new FormData();
+            this.post.fileList.forEach(item => {
+                formData.append("fileList", item.file)
+            });
+            formData.append("logo", this.post.logo.file)
+            Object.keys(this.post).forEach(k => {
+                if (this.post[k] && typeof this.post[k] !== "object") {
+                    formData.append(k, this.post[k])
+                }
+            });
+
+            addApp(formData).then((res) => {
+                this.$message({
+                  type: "success",
+                  message: `添加成功：${res.message}`,
+                });
+                this.fetchData(mapTrim(this.form));
+              })
+              .catch((err) => {
+                this.$message.error(err.message);
+              });              
+          }
+          else if (this.dialogTitle === "编辑") {
+            updateApp(this.currentValue.uuid, this.post)
+              .then((res) => {
+                // this.$set(this.list, this.currentIndex, Object.assign(this.currentValue, tmp))
+                this.$message({
+                  type: "success",
+                  message: `更新成功：${res.message}`,
+                });
+                this.fetchData(mapTrim(this.form));
+              })
+              .catch((err) => {
+                this.$message.error(err.message);
+              });
+          }
+        } else {
+          result = false;
+        }
+        this.dialogVisible = false;
+        return result;
+      });
+    },
+    onAdd() {
+      setTimeout(() => { this.clear(); }, 100);
+      this.post.sort = this.form.pagesize * (this.form.pagenum - 1) + this.list.length + 1;
+      this.dialogTitle = "添加";
+      this.dialogVisible = true;
+    },
+    onSubmit() {
+      this.form.pagenum = 1;
+      this.form.pagesize = 15;
+      this.fetchData(mapTrim(this.form));
+    },
+    onReset(formName) {
+      this.$refs[formName].resetFields();
+      this.form.pagesize = 15;
+      this.form.pagenum = 1;
+      this.fetchData(mapTrim(this.form));
+    },
+  },
+  mounted() {},
+  created() {
+    this.fetchData(mapTrim(this.form));
+    this.fetchSelectData();
+    this.fetchCategory();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  & > div.page-wrapper {
+    margin: 10px 0px;
+  }
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>

evm_monitor/src/views/system/chart.vue

+<template>
+  <div class="app-container">
+    <el-form :inline="true" :model="form" size="mini">
+      <el-form-item label="权限名称">
+        <el-select v-model="form.uuid" filterable placeholder="请输入权限名称">
+          <el-option
+            v-for="(item, index) in roles"
+            :key="index"
+            :label="item.name"
+            :value="item.uuid"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        ><el-button type="primary" @click="onSubmit"
+          >查询</el-button
+        ></el-form-item
+      >
+      <el-form-item><el-button @click="onReset">重置</el-button></el-form-item>
+      <el-form-item
+        ><el-button type="warning" @click="onAdd">添加</el-button></el-form-item
+      >
+    </el-form>
+    <div></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts/core";
+import { getPermissionList } from "@/api/index";
+import { mapTrim } from "@/utils/index";
+export default {
+  data() {
+    return {
+      total: 0,
+      list: [],
+      isLoading: false,
+      form: {
+        uuid: null,
+        name: null,
+        pagesize: 15,
+        pagenum: 1,
+      },
+      option: {
+        title: {
+          text: "动态数据 + 时间坐标轴",
+        },
+        tooltip: {
+          trigger: "axis",
+          formatter: function (params) {
+            params = params[0];
+            var date = new Date(params.name);
+            return (
+              date.getDate() +
+              "/" +
+              (date.getMonth() + 1) +
+              "/" +
+              date.getFullYear() +
+              " : " +
+              params.value[1]
+            );
+          },
+          axisPointer: {
+            animation: false,
+          },
+        },
+        xAxis: {
+          type: "time",
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, "100%"],
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "模拟数据",
+            type: "line",
+            showSymbol: false,
+            hoverAnimation: false,
+            data: [],
+          },
+        ],
+      },
+      chartInstance: null
+    };
+  },
+  methods: {
+    initCharts() {
+      this.chartInstance = echarts.init(this.$el);
+    },
+    fetchData(params) {
+      this.isLoading = true;
+      getPermissionList(
+        Object.assign(
+          {
+            pagenum: this.form.pagenum,
+            pagesize: this.form.pagesize,
+          },
+          params
+        )
+      )
+        .then((res) => {
+          if (res.code == 200) {
+            this.total = res.count;
+            this.list = res.data;
+          }
+        })
+        .catch((err) => {
+          // this.$message.error(err.message)
+          console.log(err.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+    onSubmit() {
+      this.form.pagenum = 1;
+      this.form.pagesize = 15;
+      this.fetchData(mapTrim(this.form));
+    },
+    onReset(formName) {
+      this.form = {
+        account: null,
+        username: null,
+        pagesize: 15,
+        pagenum: 1,
+      };
+      this.$refs[formName].resetFields();
+      this.fetchData();
+    },
+  },
+  mounted() {},
+  created() {
+    this.fetchData();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  & > div.page-wrapper {
+    margin: 10px 0px;
+  }
+}
+</style>

evm_monitor/src/views/system/components/Activity.vue

+<template>
+  <div class="user-activity">
+    <div class="post">
+      <div class="user-block">
+        <img class="img-circle" :src="'https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg'+avatarPrefix">
+        <span class="username text-muted">Iron Man</span>
+        <span class="description">Shared publicly - 7:30 PM today</span>
+      </div>
+      <p>
+        Lorem ipsum represents a long-held tradition for designers,
+        typographers and the like. Some people hate it and argue for
+        its demise, but others ignore the hate as they create awesome
+        tools to help create filler text for everyone from bacon lovers
+        to Charlie Sheen fans.
+      </p>
+      <ul class="list-inline">
+        <li>
+          <span class="link-black text-sm">
+            <i class="el-icon-share" />
+            Share
+          </span>
+        </li>
+        <li>
+          <span class="link-black text-sm">
+            <svg-icon icon-class="like" />
+            Like
+          </span>
+        </li>
+      </ul>
+    </div>
+    <div class="post">
+      <div class="user-block">
+        <img class="img-circle" :src="'https://wpimg.wallstcn.com/9e2a5d0a-bd5b-457f-ac8e-86554616c87b.jpg'+avatarPrefix">
+        <span class="username text-muted">Captain American</span>
+        <span class="description">Sent you a message - yesterday</span>
+      </div>
+      <p>
+        Lorem ipsum represents a long-held tradition for designers,
+        typographers and the like. Some people hate it and argue for
+        its demise, but others ignore the hate as they create awesome
+        tools to help create filler text for everyone from bacon lovers
+        to Charlie Sheen fans.
+      </p>
+      <ul class="list-inline">
+        <li>
+          <span class="link-black text-sm">
+            <i class="el-icon-share" />
+            Share
+          </span>
+        </li>
+        <li>
+          <span class="link-black text-sm">
+            <svg-icon icon-class="like" />
+            Like
+          </span>
+        </li>
+      </ul>
+    </div>
+    <div class="post">
+      <div class="user-block">
+        <img class="img-circle" :src="'https://wpimg.wallstcn.com/fb57f689-e1ab-443c-af12-8d4066e202e2.jpg'+avatarPrefix">
+        <span class="username">Spider Man</span>
+        <span class="description">Posted 4 photos - 2 days ago</span>
+      </div>
+      <div class="user-images">
+        <el-carousel :interval="6000" type="card" height="220px">
+          <el-carousel-item v-for="item in carouselImages" :key="item">
+            <img :src="item+carouselPrefix" class="image">
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+      <ul class="list-inline">
+        <li><span class="link-black text-sm"><i class="el-icon-share" /> Share</span></li>
+        <li>
+          <span class="link-black text-sm">
+            <svg-icon icon-class="like" /> Like</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+const avatarPrefix = '?imageView2/1/w/80/h/80'
+const carouselPrefix = '?imageView2/2/h/440'
+
+export default {
+  data() {
+    return {
+      carouselImages: [
+        'https://wpimg.wallstcn.com/9679ffb0-9e0b-4451-9916-e21992218054.jpg',
+        'https://wpimg.wallstcn.com/bcce3734-0837-4b9f-9261-351ef384f75a.jpg',
+        'https://wpimg.wallstcn.com/d1d7b033-d75e-4cd6-ae39-fcd5f1c0a7c5.jpg',
+        'https://wpimg.wallstcn.com/50530061-851b-4ca5-9dc5-2fead928a939.jpg'
+      ],
+      avatarPrefix,
+      carouselPrefix
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-activity {
+  .user-block {
+
+    .username,
+    .description {
+      display: block;
+      margin-left: 50px;
+      padding: 2px 0;
+    }
+
+    .username{
+      font-size: 16px;
+      color: #000;
+    }
+
+    :after {
+      clear: both;
+    }
+
+    .img-circle {
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      float: left;
+    }
+
+    span {
+      font-weight: 500;
+      font-size: 12px;
+    }
+  }
+
+  .post {
+    font-size: 14px;
+    border-bottom: 1px solid #d2d6de;
+    margin-bottom: 15px;
+    padding-bottom: 15px;
+    color: #666;
+
+    .image {
+      width: 100%;
+      height: 100%;
+
+    }
+
+    .user-images {
+      padding-top: 20px;
+    }
+  }
+
+  .list-inline {
+    padding-left: 0;
+    margin-left: -5px;
+    list-style: none;
+
+    li {
+      display: inline-block;
+      padding-right: 5px;
+      padding-left: 5px;
+      font-size: 13px;
+    }
+
+    .link-black {
+
+      &:hover,
+      &:focus {
+        color: #999;
+      }
+    }
+  }
+
+}
+
+.box-center {
+  margin: 0 auto;
+  display: table;
+}
+
+.text-muted {
+  color: #777;
+}
+</style>

evm_monitor/src/views/system/components/BarChart.vue

+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+const animationDuration = 6000
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHandler)
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

evm_monitor/src/views/system/components/LineChart.vue

+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['应收款', '实收款']
+        },
+        series: [{
+          name: '应收款', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: '实收款',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>

evm_monitor/src/views/system/components/PanelGroup.vue

+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="project" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">全年管理项目总数</div>
+          <count-to
+            :start-val="0"
+            :end-val="project.project_currentyear"
+            :duration="1000"
+            class="card-panel-num"
+          />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('messages')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="report" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">已经结案数</div>
+          <count-to
+            :start-val="0"
+            :end-val="project.project_finished"
+            :duration="1000"
+            class="card-panel-num"
+          />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="liuzhuan" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">未结案流转下年度项目总数</div>
+          <count-to
+            :start-val="0"
+            :end-val="project.project_unfinished_outdate"
+            :duration="1000"
+            class="card-panel-num"
+          />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="guanli" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">未结案且逾期结案项目总数</div>
+          <count-to
+            :start-val="0"
+            :end-val="project.project_unfinished_nextyear"
+            :duration="1000"
+            class="card-panel-num"
+          />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from "vue-count-to";
+
+export default {
+  props: {
+    project: {
+      type: Object,
+      require: false,
+      default() {
+        return {
+          project_total: 10000,
+          project_finished: 1000,
+          project_unfinished_outdate: 100,
+          project_unfinished_nextyear: 10,
+        }
+      }
+    }
+  },
+  components: {
+    CountTo,
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit("handleSetLineChartData", type);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.05);
+
+    &:hover {
+      .icon-people {
+        color: #40c9c6;
+      }
+
+      .icon-message {
+        color: #36a3f7;
+      }
+
+      .icon-money {
+        color: #f4516c;
+      }
+
+      .icon-shopping {
+        color: #ff8000;
+      }
+    }
+
+    .card-panel-icon-wrapper {
+      color: #fff;
+    }
+
+    .icon-people {
+      background: #40c9c6;
+    }
+
+    .icon-message {
+      background: #36a3f7;
+    }
+
+    .icon-money {
+      background: #f4516c;
+    }
+
+    .icon-shopping {
+      background: #ff8000;
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      // margin: 14px 0 0 14px;
+      padding: 18px;
+      transition: all 0.38s ease-out;
+      // border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>

evm_monitor/src/views/system/components/PieChart.vue

+<template>
+  <div :class="className" :style="{height: height, width: width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHandler)
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['咨询类', '评价类', '评审类']
+        },
+        calculable: true,
+        series: [
+          {
+            name: '项目类型',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: '咨询类' },
+              { value: 240, name: '评价类' },
+              { value: 149, name: '评审类' },
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

evm_monitor/src/views/system/components/RadarChart.vue

+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+const animationDuration = 3000
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHandler)
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

evm_monitor/src/views/system/components/Timeline.vue

+<template>
+  <div class="block">
+    <el-timeline>
+      <el-timeline-item v-for="(item, index) in timeline" :key="index" :timestamp="item.timestamp" placement="top">
+        <el-card>
+          <h4>{{ item.title }}</h4>
+          <p>{{ item.content }}</p>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      timeline: [
+        {
+          timestamp: '2019/4/20',
+          title: 'Update Github template',
+          content: 'PanJiaChen committed 2019/4/20 20:46'
+        },
+        {
+          timestamp: '2019/4/21',
+          title: 'Update Github template',
+          content: 'PanJiaChen committed 2019/4/21 20:46'
+        },
+        {
+          timestamp: '2019/4/22',
+          title: 'Build Template',
+          content: 'PanJiaChen committed 2019/4/22 20:46'
+        },
+        {
+          timestamp: '2019/4/23',
+          title: 'Release New Version',
+          content: 'PanJiaChen committed 2019/4/23 20:46'
+        }
+      ]
+    }
+  }
+}
+</script>

evm_monitor/src/views/system/components/UserCard.vue

+<template>
+  <el-card style="margin-bottom:20px;">
+    <div slot="header" class="clearfix">
+      <span>关于我</span>
+    </div>
+
+    <div class="user-profile">
+      <div class="box-center">
+        <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
+          <div>Hello</div>{{ user.role }}</pan-thumb>
+      </div>
+      <div class="box-center">
+        <div class="user-name text-center">{{ user.name }}</div>
+        <div class="user-role text-center text-muted">{{ user.role | uppercaseFirst }}</div>
+      </div>
+    </div>
+
+    <div class="user-bio">
+      <div class="user-education user-bio-section">
+        <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>个性签名</span></div>
+        <div class="user-bio-section-body">
+          <div class="text-muted">{{ user.sign | wrapperSign }}</div>
+        </div>
+      </div>
+
+      <div class="user-skills user-bio-section">
+        <div class="user-bio-section-header"><svg-icon icon-class="skill" /><span>所属公司</span></div>
+        <div class="user-bio-section-body">{{ user.company }}</div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import PanThumb from '@/components/PanThumb'
+
+export default {
+  components: { PanThumb },
+  filters: {
+    wrapperSign(sign) {
+      return sign === '' || !sign ? '此人非常懒，一个字都不写' : sign
+    }
+  },
+  props: {
+    user: {
+      type: Object,
+      default: () => {
+        return {
+          name: '',
+          email: '',
+          avatar: '',
+          roles: '',
+          phone: '',
+          gender: '',
+          company: '',
+          jobNumber: '',
+          sign: ''
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ .box-center {
+   margin: 0 auto;
+   display: table;
+ }
+
+ .text-muted {
+   color: #777;
+ }
+
+ .user-profile {
+   .user-name {
+     font-weight: bold;
+   }
+
+   .box-center {
+     padding-top: 10px;
+   }
+
+   .user-role {
+     padding-top: 10px;
+     font-weight: 400;
+     font-size: 14px;
+   }
+
+   .box-social {
+     padding-top: 30px;
+
+     .el-table {
+       border-top: 1px solid #dfe6ec;
+     }
+   }
+
+   .user-follow {
+     padding-top: 20px;
+   }
+ }
+
+ .user-bio {
+   margin-top: 20px;
+   color: #606266;
+
+   span {
+     padding-left: 4px;
+   }
+
+   .user-bio-section {
+     font-size: 14px;
+     padding: 15px 0;
+
+     .user-bio-section-header {
+       border-bottom: 1px solid #dfe6ec;
+       padding-bottom: 10px;
+       margin-bottom: 10px;
+       font-weight: bold;
+     }
+   }
+ }
+</style>

evm_monitor/src/views/system/components/mixins/resize.js

+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}

evm_monitor/src/views/system/dashboard.vue

+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-editor-container">
+      <panel-group
+        :project="project"
+        @handleSetLineChartData="handleSetLineChartData"
+      />
+
+      <el-row
+        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
+      >
+        <el-col :span="16">
+          <line-chart :chart-data="lineChartData" />
+        </el-col>
+        <el-col :span="8">
+          <div class="chart-wrapper">
+            <pie-chart />
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="15">
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">查询条件</p>
+            <div class="content">
+              <p style="margin: 7px 0px;">
+                <el-select v-model="form.year" filterable @change="onChange" size="mini" placeholder="请选择年份">
+                  <el-option v-for="(item, index) in yearList" :key="index" :label="item" :value="item">
+                  </el-option>
+                </el-select>
+              </p>
+              <p style="margin: 7px 0px;">
+                <el-select v-model="form.type" clearable filterable @change="onChange" size="mini" placeholder="请选择项目类型">
+                  <el-option v-for="(item, index) in typeList" :key="index" :label="item.label" :value="item.label">
+                  </el-option>
+                </el-select>
+              </p>
+              <p style="margin: 7px 0px;" v-if="role.name === '超级管理员'">
+                <el-radio-group v-model="active" @change="onRadioChange" size="mini">
+                  <el-radio-button label="用户"></el-radio-button>
+                  <el-radio-button label="部门"></el-radio-button>
+                </el-radio-group>
+              </p>
+              <p style="margin: 7px 0px;" v-if="role.name === '超级管理员'" v-show="show == 0">
+                <el-select v-model="form.user" clearable filterable @change="onChange" size="mini" placeholder="请选择用户">
+                  <el-option v-for="(item, index) in users" :key="index" :label="item.account" :value="item.uuid">
+                  </el-option>
+                </el-select>
+              </p>
+              <p style="margin: 7px 0px;" v-if="role.name === '超级管理员'" v-show="show == 1">
+                <el-select v-model="form.depot" clearable filterable @change="onChange" size="mini" placeholder="请选择部门">
+                  <el-option v-for="(item, index) in depots" :key="index" :label="item.name" :value="item.uuid">
+                  </el-option>
+                </el-select>
+              </p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">项目统计</p>
+            <div class="content">
+              <p>历史项目总数：{{ project.project_total }}</p>
+              <p>年度项目总数：{{ project.project_currentyear }}</p>
+              <p>年度结案项目总数：{{ project.project_finished }}</p>
+              <p>年度逾期项目总数：{{ project.project_outdate }}</p>
+              <p>年度列入坏帐并终止项目数：{{ project.project_stop }}</p>
+              <p>年度项目总的毛利率：{{ (project.year_profit / project.year_cost).toFixed(2) }}</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">项目统计</p>
+            <div class="content">
+              <p>上一年未完成项目总数：{{ project.project_unfinished_lastyear }}</p>
+              <p>未结案流转下年度项目总数：{{ project.project_unfinished_nextyear }}</p>
+              <p>已结案但逾期结案项目总数：{{ project.project_unfinished_outdate }}</p>
+              <p>年度逾期项目总数：{{ project.project_unfinished_outdate }}</p>
+              <p>年度项目中标总数：{{ project.bidding }}</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">项目统计</p>
+            <div class="content">
+              <p>年度项目逾期率：{{ calculate(project.project_outdate, project.project_year) }}%</p>
+              <p>年度项目结案逾期率：{{ calculate(project.project_unfinished_outdate, project.project_year) }}%</p>
+              <p>年度项目满意率：{{ calculate(project.satisfaction, project.project_year) }}%</p>
+              <p>年度调派技术现场总天数：{{ project.days_for_dispatch_on_site }} 天</p>
+              <p>年度监督流失率：{{ calculate(project.supervise_loss, project.project_supervise) }}%</p>
+              <p>年度再认证流失率：{{ calculate(project.authenticate_loss, project.project_authenticate) }}%</p>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="15">
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">项目统计</p>
+            <div class="content">
+              <p>年度应收款：{{ project.plan_amount }} 元</p>
+              <p>年度实收款：{{ project.real_amount }} 元</p>
+              <p>年度应收款回款率：{{ calculate(project.real_amount, project.plan_amount) }}%</p>
+              <p>年度坏账总金额：{{ project.bad_debts_amount }} 元</p>
+              <p>年度销售合同额：{{ project.year_contract_amount }} 元</p>
+              <p>年度销售认可合同额：{{ project.year_agree_amount }} 元</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">季度合同金额</p>
+            <div class="content">
+              <p>一季度：{{ project.quarter_contract_amount.q1 }}</p>
+              <p>二季度：{{ project.quarter_contract_amount.q2 }}</p>
+              <p>三季度：{{ project.quarter_contract_amount.q3 }}</p>
+              <p>四季度：{{ project.quarter_contract_amount.q4 }}</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">季度认可合同金额</p>
+            <div class="content">
+              <p>一季度：{{ project.quarter_agree_amount.q1 }}</p>
+              <p>二季度：{{ project.quarter_agree_amount.q2 }}</p>
+              <p>三季度：{{ project.quarter_agree_amount.q3 }}</p>
+              <p>四季度：{{ project.quarter_agree_amount.q4 }}</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">季度利润</p>
+            <div class="content">
+              <p>一季度：{{ project.quater_profit.q1 }}</p>
+              <p>二季度：{{ project.quater_profit.q2 }}</p>
+              <p>三季度：{{ project.quater_profit.q3 }}</p>
+              <p>四季度：{{ project.quater_profit.q4 }}</p>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="15">
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">季度项目数统计</p>
+            <div class="content">
+              <p>一季度：{{ project.quarter_project_count.q1 }}</p>
+              <p>二季度：{{ project.quarter_project_count.q2 }}</p>
+              <p>三季度：{{ project.quarter_project_count.q3 }}</p>
+              <p>四季度：{{ project.quarter_project_count.q4 }}</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">季度项目回款率</p>
+            <div class="content">
+              <table>
+                <tr>
+                  <th>季度</th>
+                  <th>应收款</th>
+                  <th>实收款</th>
+                  <th>回款率</th>
+                </tr>
+                <tr>
+                  <td>一季度</td>
+                  <td>{{ project.quarter_project_collection_rate.q1[0] }}</td>
+                  <td>{{ project.quarter_project_collection_rate.q1[1] }}</td>
+                  <td>
+                    {{ calculate(project.quarter_project_collection_rate.q1[1], project.quarter_project_collection_rate.q1[0]) }}%
+                  </td>
+                </tr>
+                <tr>
+                  <td>二季度</td>
+                  <td>{{ project.quarter_project_collection_rate.q2[0] }}</td>
+                  <td>{{ project.quarter_project_collection_rate.q2[1] }}</td>
+                  <td>
+                    {{ calculate(project.quarter_project_collection_rate.q2[1], project.quarter_project_collection_rate.q2[0]) }}%
+                  </td>
+                </tr>
+                <tr>
+                  <td>三季度</td>
+                  <td>{{ project.quarter_project_collection_rate.q3[0] }}</td>
+                  <td>{{ project.quarter_project_collection_rate.q3[1] }}</td>
+                  <td>
+                    {{ calculate(project.quarter_project_collection_rate.q3[1], project.quarter_project_collection_rate.q3[0]) }}%
+                  </td>
+                </tr>
+                <tr>
+                  <td>四季度</td>
+                  <td>{{ project.quarter_project_collection_rate.q4[0] }}</td>
+                  <td>{{ project.quarter_project_collection_rate.q4[1] }}</td>
+                  <td>
+                    {{ calculate(project.quarter_project_collection_rate.q4[1], project.quarter_project_collection_rate.q4[0]) }}%
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6">
+          <div class="grid-content">
+            <p class="title">季度项目结案率</p>
+            <div class="content">
+              <table>
+                <tr>
+                  <th>季度</th>
+                  <th>应结案</th>
+                  <th>实结案</th>
+                  <th>结案率</th>
+                </tr>
+                <tr>
+                  <td>一季度</td>
+                  <td>{{ project.quarter_project_finished_rate.q1[0] }}</td>
+                  <td>{{ project.quarter_project_finished_rate.q1[1] }}</td>
+                  <td>
+                    {{ calculate(project.quarter_project_finished_rate.q1[1], project.quarter_project_finished_rate.q1[0]) }}%
+                  </td>
+                </tr>
+                <tr>
+                  <td>二季度</td>
+                  <td>{{ project.quarter_project_finished_rate.q2[0] }}</td>
+                  <td>{{ project.quarter_project_finished_rate.q2[1] }}</td>
+                  <td>
+                    {{ calculate(project.quarter_project_finished_rate.q2[1], project.quarter_project_finished_rate.q2[0]) }}%
+                  </td>
+                </tr>
+                <tr>
+                  <td>三季度</td>
+                  <td>{{ project.quarter_project_finished_rate.q3[0] }}</td>
+                  <td>{{ project.quarter_project_finished_rate.q3[1] }}</td>
+                  <td>
+                    {{ calculate(project.quarter_project_finished_rate.q3[1], project.quarter_project_finished_rate.q3[0]) }}%
+                  </td>
+                </tr>
+                <tr>
+                  <td>四季度</td>
+                  <td>{{ project.quarter_project_finished_rate.q4[0] }}</td>
+                  <td>{{ project.quarter_project_finished_rate.q4[1] }}</td>
+                  <td>
+                    {{ calculate(project.quarter_project_finished_rate.q4[1], project.quarter_project_finished_rate.q4[0]) }}%
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex"
+import { mapTrim } from '@/utils/index'
+import { getWorkbenckData, getDepotList, getUserList, getDictsList } from "@/api/index";
+
+import PanelGroup from "./components/PanelGroup";
+import LineChart from "./components/LineChart";
+import PieChart from "./components/PieChart";
+
+const current = new Date();
+const yearList = [];
+for (let i = 2020; i <= current.getFullYear(); i++) {
+  yearList.push(i);
+}
+
+export default {
+  name: "Dashboard",
+  components: {
+    PanelGroup,
+    LineChart,
+    PieChart,
+  },
+  filter: {
+    isZero(value) {
+      return value ? value : 1
+    }
+  },
+  computed: {
+    ...mapState("user", [ "role", ]),
+    calculate() {
+      return (divisor, dividend) => {
+        if (dividend == 0) return ((divisor / 1) * 100).toFixed(2)
+        else return ((divisor / dividend) * 100).toFixed(2)
+      };
+    },
+  },
+  data() {
+    return {
+      yearList,
+      active: "用户",
+      show: 0,
+      form: {
+        year: current.getFullYear(),
+        depot: null,
+        type: null,
+        user: null,
+      },
+      users: [],
+      depots: [],
+      typeList: [],
+      project: {
+        project_total: 0,
+        project_year: 0,
+        project_finished: 0,
+        project_unfinished_nextyear: 0,
+        project_unfinished_outdate: 0,
+        project_unfinished_lastyear: 0,
+        project_currentyear: 0,
+        consult_projects: 0,
+        review_evaluate_projects: 0,
+        authenticate_projects: 0,
+        pieList: [],
+        year_contract_amount: 0,
+        year_agree_amount: 0,
+        year_profit: 0,
+        year_cost: 0,
+        quarter_project_count: {
+          q1: 0,
+          q2: 0,
+          q3: 0,
+          q4: 0,
+        },
+        quarter_project_collection_rate: {
+          q1: [1, 0],
+          q2: [1, 0],
+          q3: [1, 0],
+          q4: [1, 0],
+        },
+        quarter_project_finished_rate: {
+          q1: [1, 0],
+          q2: [1, 0],
+          q3: [1, 0],
+          q4: [1, 0],
+        },
+        quarter_contract_amount: {
+          q1: 0,
+          q2: 0,
+          q3: 0,
+          q4: 0,
+        },
+        quarter_agree_amount: {
+          q1: 0,
+          q2: 0,
+          q3: 0,
+          q4: 0,
+        },
+        quater_profit: {
+          q1: 0,
+          q2: 0,
+          q3: 0,
+          q4: 0,
+        },
+      },
+      lineChartData: {
+        expectedData: [
+          100,
+          120,
+          161,
+          134,
+          105,
+          160,
+          165,
+          134,
+          105,
+          160,
+          165,
+          140,
+        ],
+        actualData: [120, 82, 91, 154, 162, 140, 145, 154, 162, 140, 145, 130],
+      },
+    };
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      console.log(type);
+    },
+    onChange() {
+      this.fetchData();
+    },
+    onRadioChange(e) {
+      if (e == "部门") this.show = 1
+      else this.show = 0
+    },
+    getDepotList() {
+      getDepotList({ "scope_type": "list" }).then(res => {
+        this.depots = res.data
+      }).catch(err => {
+        console.log(err.message)
+      })
+    },
+    getUserList() {
+      getUserList({ "scope_type": "list" }).then(res => {
+        this.users = res.data
+      }).catch(err => {
+        console.log(err.message)
+      })
+    },
+    getDictList() {
+      getDictsList({ "scope_type": "list", "category": ["project-type"] }).then(res => {
+        this.typeList = res.data
+      }).catch(err => {
+        console.log(err.message)
+      })
+    },
+    fetchData() {
+      getWorkbenckData(mapTrim(this.form))
+        .then((res) => {
+          this.project = res.data;
+          res.data.plan_moneys.shift();
+          this.lineChartData.expectedData = res.data.plan_moneys;
+          res.data.real_moneys.shift();
+          this.lineChartData.actualData = res.data.real_moneys;
+          this.project.pieList = [
+            { value: this.project.consult_projects, name: "咨询类" },
+            { value: this.project.authenticate_projects, name: "认证类" },
+            { value: this.project.review_evaluate_projects, name: "评审评价类" },
+          ];
+          // Object.keys(this.project.quarter_project_collection_rate).forEach(
+          //   (item) => {
+          //     if (this.project.quarter_project_collection_rate[item][0] == 0)
+          //       this.project.quarter_project_collection_rate[item][0] = 1;
+          //   }
+          // );
+          // Object.keys(this.project.quarter_project_finished_rate).forEach(
+          //   (item) => {
+          //     if (this.project.quarter_project_finished_rate[item][0] == 0)
+          //       this.project.quarter_project_finished_rate[item][0] = 1;
+          //   }
+          // );
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+  },
+  created() {
+    this.fetchData();
+    this.getDepotList();
+    this.getUserList();
+    this.getDictList();
+
+    if (!this.role || this.role == "") {
+      this.$store.dispatch("user/removeRole")
+      this.$store.dispatch("user/removeToken")
+      this.$router.push("/login")
+    }
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .github-corner {
+    position: absolute;
+    top: 0;
+    border: 0;
+    right: 0;
+  }
+
+  .grid-content {
+    font-size: 13px;
+    background: #ffffff;
+    min-height: 210px;
+    & > p.title {
+      color: #303133;
+      margin-top: 15px;
+      margin-bottom: 0px;
+      background: #f2f6fc;
+      border-bottom: 1px solid #ebeef5;
+      padding: 10px;
+    }
+    & > div.content {
+      padding: 10px;
+      overflow: auto;
+      & > p {
+        margin: 10px 0px;
+      }
+      & > table {
+        tr {
+          td {
+            min-width: 70px;
+            height: 24px;
+          }
+        }
+      }
+    }
+  }
+
+  .chart-wrapper {
+    height: 332px;
+    background: #fff;
+    padding: 16px 16px 0;
+  }
+}
+
+@media (max-width: 1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>
\ No newline at end of file

evm_monitor/src/views/system/device.vue

+<template>
+    <div class="app-container">
+        <el-form :inline="true" :model="form" size="mini">
+            <el-form-item><el-button type="warning" @click="onAdd">绑定设备</el-button></el-form-item>
+        </el-form>
+        <el-table v-loading="isLoading" element-loading-text="Loading" :data="list" size="mini" border stripe fit highlight-current-row>
+            <el-table-column prop="name" label="设备名称" align="center" min-width="100"></el-table-column>
+            <el-table-column prop="imei" label="IMEI" align="center" width="150"></el-table-column>
+            <el-table-column prop="create_at" label="创建时间" width="150"></el-table-column>
+            <el-table-column prop="create_by.username" label="创建者" width="150"></el-table-column>
+            <el-table-column prop="update_at" label="更新时间" width="150" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="update_by.username" label="更新者" width="150"></el-table-column>
+            <el-table-column label="操作" align="center" width="180" fixed="right">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="page-wrapper">
+            <el-pagination @current-change="handleCurrentChange" :current-page.sync="form.pagenum" background small :page-size="form.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
+        </div>
+        <el-dialog
+            :title="dialogTitle"
+            :visible.sync="dialogVisible"
+            width="45%"
+        >
+            <el-form :model="post" status-icon :rules="rules" ref="post" size="mini" label-width="100px">
+                <el-form-item label="设备名称" prop="name">
+                    <el-input type="text" v-model="post.name" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="IMEI" prop="imei">
+                    <el-input type="text" v-model="post.imei" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="设备描述" prop="desc">
+                    <el-input type="text" v-model="post.desc" autocomplete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" size="mini" plain @click="submitForm('post')">提交</el-button>
+                <el-button type="success" size="mini" plain @click="onReset('post')">重置</el-button>
+                <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { getDeviceList, deleteDevice, addDevice, updateDevice } from '@/api/app-store'
+import { mapTrim, compareObjectDiff } from '@/utils/index'
+
+export default {
+    name: "Device",
+    data() {
+        return {
+            total: 0,
+            list: [],
+            isLoading: false,
+            roles: [],
+            depots: [],
+            form: {
+                uuid: null,
+                name: null,
+                pagesize: 15,
+                pagenum: 1
+            },
+            dialogTitle: "",
+            dialogVisible: false,
+            post: {
+                imei: null,
+                name: null,
+                type: "watch",
+                desc: null
+            },
+            rules: {
+                imei: [{ type: 'string', required: true, message: 'IMEI不能为空', trigger: 'blur' }],
+                name: [
+                    { type: 'string', required: true, message: '用户名不能为空', trigger: 'blur' },
+                    { min: 1, max: 20, message: '字符串长度在 1 到 20 之间', trigger: 'blur' }
+                ]
+            }
+        }
+    },
+    methods: {
+        fetchData(params) {
+            this.isLoading = true
+            getDeviceList(Object.assign({
+                pagenum: this.form.pagenum,
+                pagesize: this.form.pagesize,
+            }, params)).then(res => {
+                if (res.code == 200) {
+                    this.total = res.count
+                    this.list = res.data
+                }
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            }).finally(() => {
+                this.isLoading = false
+            })
+        },
+        fetchSelectData() {
+            getDeviceList({ "scope_type": "list" }).then(res => {
+                this.roles = res.data
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            })
+        },
+        handleSizeChange(e) {
+            this.form.pagesize = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleCurrentChange(e) {
+            this.form.pagenum = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleEdit(index, row) {
+            this.post.name = row.name
+            this.post.imei = row.imei
+            this.post.desc = row.desc
+            this.currentValue = row
+            this.dialogTitle = "编辑"
+            this.dialogVisible = true
+        },
+        handleDelete(index, row) {
+            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
+                confirmButtonText: '确定',
+                callback: action => {
+                    if (action == 'confirm') deleteDevice(row.id).then(res => {
+                        console.log(res)
+                        this.total -= 1
+                        this.$delete(this.list, index)
+                        this.$message({ type: 'success', message: `成功删除第${ index }行` })
+                        this.fetchData(mapTrim(this.form))
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                }
+            })
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                let result = true
+                if (valid) {
+                    if (this.dialogTitle === '添加') addDevice(mapTrim(this.post)).then(res => {
+                        console.log(res)
+                        this.$message({ type: 'success', message: res.message })
+                        this.fetchData(mapTrim(this.form))
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                    else if (this.dialogTitle === '编辑') updateDevice(this.currentValue.uuid, compareObjectDiff(this.post, this.currentValue)).then(res => {
+                        console.log(res)
+                        // this.$set(this.list, this.currentIndex, Object.assign(this.currentValue, tmp))
+                        this.$message({ type: 'success', message: '更新成功' })
+                        this.fetchData(mapTrim(this.form))
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                } else {
+                    result = false
+                }
+                this.dialogVisible = false
+                return result
+            })
+        },
+        onAdd() {
+            this.dialogTitle = "添加"
+            this.dialogVisible = true
+        },
+        onSubmit() {
+            this.form.pagenum = 1
+            this.form.pagesize = 15
+            this.fetchData(mapTrim(this.form))
+        },
+        onReset(formName) {
+            this.form.name = null
+            this.form.pagesize = 15
+            this.form.pagenum = 1
+            this.$refs[formName].resetFields()
+            this.fetchData()
+        }
+    },
+    mounted() {
+    },
+    created() {
+        this.fetchData()
+        this.fetchSelectData()
+    }
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+    & > div.page-wrapper {
+        margin: 10px 0px;
+    }
+}
+</style>

evm_monitor/src/views/system/dictionary.vue

+<template>
+    <div class="app-container">
+        <el-form :inline="true" :model="form" size="mini">
+            <el-form-item label="字典名称">
+                <el-select v-model="form.uuid" filterable placeholder="请输入字典名称">
+                    <el-option v-for="(item, index) in dicts" :key="index" :label="item.label" :value="item.uuid"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="字典类别">
+                <el-select v-model="form.category" filterable placeholder="请输入字典类别">
+                    <el-option v-for="(item, index) in categoryList" :key="index" :label="item" :value="item"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
+            <el-form-item><el-button @click="onReset">重置</el-button></el-form-item>
+            <el-form-item><el-button type="warning" @click="onAdd">添加</el-button></el-form-item>
+        </el-form>
+        <el-table v-loading="isLoading" element-loading-text="Loading" :data="list" size="mini" border stripe fit highlight-current-row>
+            <el-table-column prop="label" label="字典名" align="center" width="130" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="value" label="字典值" align="center" width="100" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="category" label="字典类别" align="center" min-width="150" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="is_system" label="是否内置" width="80">
+                <template slot-scope="scope">
+                    <span>{{ scope.row.is_system ? '是': '否' }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="create_at" label="创建时间" width="150"></el-table-column>
+            <el-table-column prop="create_by.username" label="创建者" width="150"></el-table-column>
+            <el-table-column prop="update_at" label="更新时间" width="150" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="update_by.username" label="更新者" width="150"></el-table-column>
+            <el-table-column prop="remarks" label="备注" width="150" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column label="操作" align="center" width="180" fixed="right">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="success" :disabled="scope.row.is_system" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                    <el-button size="mini" type="danger" :disabled="scope.row.is_system" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="page-wrapper">
+            <el-pagination @current-change="handleCurrentChange" :current-page.sync="form.pagenum" background small :page-size="form.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
+        </div>
+        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%">
+            <el-form :model="post" status-icon :rules="rules" :inline="true" ref="post" size="mini" label-width="80px">
+                <el-form-item label="字典名" prop="label">
+                    <el-input type="text" v-model="post.label" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="字典值" prop="value">
+                    <el-input type="text" v-model="post.value" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="字典类别" prop="category">
+                    <el-input type="text" v-model="post.category" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="排序" prop="sort">
+                    <el-input type="number" v-model.number="post.sort" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="备注" prop="remarks">
+                    <el-input type="text" v-model="post.remarks" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="是否内置" prop="is_system">
+                    <el-switch :disabled="!enableDelete" v-model="post.is_system" @change="onSwitchChange"></el-switch>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" size="mini" plain @click="submitForm('post')">提交</el-button>
+                <el-button type="success" size="mini" plain @click="onReset('post')">重置</el-button>
+                <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { getDictsList, deleteDict, addDict, updateDict } from '@/api/index'
+import { mapTrim, compareObjectDiff } from '@/utils/index'
+import { formatUTCDateTime } from '@/utils/utils'
+export default {
+    data() {
+        return {
+            total: 0,
+            list: [],
+            isLoading: false,
+            dicts: [],
+            categoryList: [],
+            form: {
+                uuid: null,
+                category: null,
+                pagesize: 15,
+                pagenum: 1
+            },
+            dialogTitle: "",
+            dialogVisible: false,
+            currentValue: null,
+            currentIndex: null,
+            enableDelete: false,
+            post: {
+                label: null,
+                value: null,
+                category: null,
+                sort: null,
+                remarks: null,
+                is_system: null
+            },
+            rules: {
+                label: [{ type: 'string', required: true, message: '字典名不能为空', trigger: 'blur' }],
+                value: [{ type: 'string', required: true, message: '字典值不能为空', trigger: 'blur' }],
+                category: [{ type: 'string', required: true, message: '字典类别不能为空', trigger: 'blur' }],
+                sort: [{ type: 'number', required: false, message: '排序不能为空', trigger: 'blur' }],
+                remarks: [{ type: 'string', required: false, message: '备注不能为空', trigger: 'blur' }],
+                is_system: [{ type: 'boolean', required: false, message: '能否删除必选', trigger: 'blur' }],
+            }
+        }
+    },
+    computed: {
+        role: () => this.$store.state.user.role
+    },
+    methods: {
+        fetchCategoryData() {
+            getDictsList({ is_category: 1, }).then(res => {
+                this.categoryList = res.data
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            })
+        },
+        fetchData(params) {
+            this.isLoading = true
+            getDictsList(Object.assign({
+                pagenum: this.form.pagenum,
+                pagesize: this.form.pagesize,
+            }, params)).then(res => {
+                if (res.code == 200) {
+                    this.total = res.count
+                    this.list = res.data.map(item => {
+                        item.create_at = formatUTCDateTime(item.create_at)
+                        item.update_at = formatUTCDateTime(item.update_at)
+                        return item
+                    })
+                }
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            }).finally(() => {
+                this.isLoading = false
+            })
+        },
+        fetchSelectData() {
+            getDictsList({ "scope_type": "list" }).then(res => {
+                if (res.code == 200) this.dicts = res.data
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            })
+        },
+        handleSizeChange(e) {
+            this.form.pagesize = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleCurrentChange(e) {
+            this.form.pagenum = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleEdit(index, row) {
+            this.post.label = row.label
+            this.post.value = row.value
+            this.post.category = row.category
+            this.post.sort = row.sort
+            this.post.remarks = row.remarks
+            this.post.is_system = row.is_system
+            this.dialogTitle = "编辑"
+            this.dialogVisible = true
+            this.enableDelete = row.is_system
+            this.currentIndex = index
+            this.currentValue = row
+        },
+        handleDelete(index, row) {
+            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
+                confirmButtonText: '确定',
+                callback: action => {
+                    if (action == 'confirm') deleteDict(row.uuid).then(res => {
+                        console.log(res)
+                        this.total -= 1
+                        this.$delete(this.list, index)
+                        this.$message({ type: 'success', message: res.message })
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                }
+            })
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                let result = true
+                if (valid) {
+                    if (this.dialogTitle === '添加') addDict(this.post).then(res => {
+                        this.$message({ type: 'success', message: res.message })
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                    else if (this.dialogTitle === '编辑') updateDict(this.currentValue.uuid, compareObjectDiff(this.post, this.currentValue)).then(res => {
+                        // this.$set(this.list, this.currentIndex, Object.assign(this.currentValue, tmp))
+                        this.$message({ type: 'success', message: res.message })
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                } else {
+                    result = false
+                }
+                this.dialogVisible = false
+                return result
+            })
+        },
+        onAdd() {
+            this.dialogTitle = "添加"
+            this.enableDelete = true
+            this.dialogVisible = true
+        },
+        onSubmit() {
+            this.form.pagenum = 1
+            this.form.pagesize = 15
+            this.fetchData(mapTrim(this.form))
+        },
+        onReset(formName) {
+            this.form.uuid = null 
+            this.form.category = null
+            this.form.pagesize = 15
+            this.form.pagenum = 1
+            this.$refs[formName].resetFields()
+            this.fetchData()
+        },
+        onSwitchChange() {
+            console.log(this.post.is_system)
+        }
+    },
+    mounted() {},
+    created() {
+        this.fetchData()
+        this.fetchSelectData()
+        this.fetchCategoryData()
+
+        const user = JSON.parse(sessionStorage.getItem("user"))
+        if (!user || user.role.name != "超级管理员") this.$router.push("/403")
+    }
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+    & > div.page-wrapper {
+        margin: 10px 0px;
+    }
+}
+</style>

evm_monitor/src/views/system/download.vue

+<template>
+    <div class="app-container">
+        <el-form :inline="true" :model="form" size="mini">
+            <el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
+            <el-form-item><el-button @click="onReset">重置</el-button></el-form-item>
+        </el-form>
+        <el-table v-loading="isLoading" element-loading-text="Loading" :data="list" size="mini" border stripe fit highlight-current-row>
+            <el-table-column prop="app.app_name" label="应用" align="center" min-width="150"></el-table-column>
+            <el-table-column prop="imei" label="IMEI" align="center" min-width="150"></el-table-column>
+            <el-table-column prop="download_at" label="下载时间" min-width="150"></el-table-column>
+        </el-table>
+        <div class="page-wrapper">
+            <el-pagination @current-change="handleCurrentChange" :current-page.sync="form.pagenum" background small :page-size="form.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+import checkPermission from '@/utils/permission'
+import { getDownloadList, deleteDownload } from '@/api/app-store'
+import { mapTrim } from '@/utils/index'
+import { formatUTCDateTime } from '@/utils/utils'
+export default {
+    name: "AppDownload",
+    data() {
+        return {
+            total: 0,
+            list: [],
+            isLoading: false,
+            form: {
+                uuid: null,
+                imei: null,
+                pagesize: 15,
+                pagenum: 1
+            },
+        }
+    },
+    methods: {
+        checkPermission,
+        fetchData(params) {
+            this.isLoading = true
+            getDownloadList(params).then(res => {
+                if (res.code == 200) {
+                    this.total = res.count
+                    this.list = res.data.map(item => {
+                        item.create_at = formatUTCDateTime(item.create_at)
+                        item.update_at = formatUTCDateTime(item.update_at)
+                        return item
+                    })
+                }
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            }).finally(() => {
+                this.isLoading = false
+            })
+        },
+        handleSizeChange(e) {
+            this.form.pagesize = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleCurrentChange(e) {
+            this.form.pagenum = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleDelete(index, row) {
+            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
+                confirmButtonText: '确定',
+                callback: action => {
+                    if (action == 'confirm') deleteDownload(row.id).then(res => {
+                        console.log(res)
+                        this.total -= 1
+                        this.$delete(this.list, index)
+                        this.$message({ type: 'success', message: `成功删除第${ index }行` })
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                }
+            })
+        },
+        onSubmit() {
+            this.form.pagenum = 1
+            this.form.pagesize = 15
+            this.fetchData(mapTrim(this.form))
+        },
+        onReset(formName) {
+            this.form = {
+                account: null,
+                username: null,
+                pagesize: 15,
+                pagenum: 1
+            }
+            this.$refs[formName].resetFields()
+            this.fetchData(mapTrim(this.form))
+        }
+    },
+    mounted() {},
+    created() {
+        if (this.$store.getters.role !== "ADMIN") this.$router.push({ path: "/403" })
+        this.fetchData(mapTrim(this.form))
+    }
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+    & > div.page-wrapper {
+        margin: 10px 0px;
+    }
+}
+</style>

evm_monitor/src/views/system/index.vue

+<template>
+  <div class="app-container">
+    <h2>SYSTEM</h2>
+    <el-table
+      element-loading-text="Loading"
+      :data="system"
+      size="mini"
+      border
+      stripe
+      fit
+      highlight-current-row
+    >
+      <el-table-column
+        label="free_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.free_size }}(KB)</template>
+      </el-table-column>
+    </el-table>
+    <h2>LVGL</h2>
+    <el-table
+      element-loading-text="Loading"
+      :data="lvgl"
+      size="mini"
+      border
+      stripe
+      fit
+      highlight-current-row
+    >
+      <el-table-column
+        label="total_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.total_size }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        prop="free_cnt"
+        label="free_cnt"
+        min-width="180"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        label="free_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.free_size }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        label="free_biggest_size"
+        min-width="180"
+      >
+        <template slot-scope="scope">{{ scope.row.free_biggest_size }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        label="used_cnt"
+        min-width="180"
+      >
+        <template slot-scope="scope">{{ scope.row.used_cnt }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        label="used_pct"
+        min-width="180"
+      >
+        <template slot-scope="scope">{{ scope.row.used_pct }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        prop="frag_pct"
+        label="frag_pct"
+        min-width="180"
+      ></el-table-column>
+    </el-table>
+    <h2>EVM</h2>
+    <el-table
+      element-loading-text="Loading"
+      :data="evm"
+      size="mini"
+      border
+      stripe
+      fit
+      highlight-current-row
+    >
+      <!-- <el-table-column
+        label="total_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.total_size }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        label="free_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.free_size }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        label="gc_usage"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.gc_usage }}(KB)</template>
+      </el-table-column> -->
+      <el-table-column
+        label="heap_total_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.heap_total_size }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        label="heap_used_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.heap_used_size }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        label="stack_total_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.stack_total_size }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        label="stack_used_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.stack_used_size }}(KB)</template>
+      </el-table-column>
+    </el-table>
+    <h2>APP</h2>
+    <el-table
+      element-loading-text="Loading"
+      :data="image"
+      size="mini"
+      border
+      stripe
+      fit
+      highlight-current-row
+    >
+      <el-table-column
+        prop="uri"
+        label="uri"
+        min-width="180"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        label="length"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.length }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        label="png_file_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.png_file_size }}(KB)</template>
+      </el-table-column>
+      <el-table-column
+        prop="png_total_count"
+        label="png_total_count"
+        min-width="180"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        label="png_uncompressed_size"
+        min-width="180"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{ scope.row.png_uncompressed_size }}(KB)</template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import { getAppLogsList } from "@/api/app-store";
+
+export default {
+  name: "AppIndex",
+  data() {
+    return {
+      total: 0,
+      list: [],
+      system: [],
+      lvgl: [],
+      evm: [],
+      image: [],
+      isLoading: false,
+      selectList: [],
+      socket: null,
+      form: {
+        system: ['free_size'],
+        lvgl: ['total_size', 'free_size', 'free_biggest_size'],
+        evm: ['total_size', 'free_size', 'heap_total_size', 'heap_used_size', 'stack_total_size', 'stack_used_size'],
+        image: ['png_uncompressed_size', 'png_file_size', 'length']
+      },
+    };
+  },
+  filters: {
+    kb(value) {
+      return Math.ceil(value / 1024);
+    },
+  },
+  methods: {
+    initWebSocket() {
+      if ("WebSocket" in window) {
+        this.socket = new WebSocket("ws://127.0.0.1:5001/ws/v1/notify");
+        this.socket.onopen = () => {
+          console.log("连接成功");
+
+          this.sendMsg();
+        };
+        this.socket.onmessage = (evt) => {
+          var message = evt.data;
+          message = JSON.parse(message);
+          console.log(message);
+          this.handleMessage(message);
+        };
+        this.socket.onclose = function (res) {
+          console.log("断开了连接", res);
+        };
+        this.socket.onerror = function (err) {
+          console.log(err);
+        };
+      } else {
+        console.log("浏览器不支持WebSocket");
+      }
+    },
+    sendMsg() {
+      var message = "hello,world";
+      this.socket.send(message);
+    },
+    handleMessage(msg) {
+      Object.keys(msg).forEach(item => {
+        if (this.form[item]) {
+          var keys = this.form[item]
+          for(var i = 0; i < keys.length; i++) {
+            var k = keys[i]
+            if (item == "image") {
+              for(var j = 0; j < msg[item].length; j++) {
+                msg[item][j][k] = Math.ceil(msg[item][j][k] / 1024)
+              }
+            } else {
+              msg[item][k] = Math.ceil(msg[item][k] / 1024)
+            }
+          }
+        }
+      })
+
+      this.system = [{ ...msg.system }];
+      this.lvgl = [{ ...msg.lvgl }];
+      this.evm = [{ ...msg.evm }];
+      this.image = msg.image;
+    },
+    fetchData(params) {
+      this.isLoading = true;
+      getAppLogsList(params)
+        .then((res) => {
+          this.total = res.count;
+          this.list = res.data.map((item) => {
+            if (item.source == 1) item.source_text = "后台";
+            else if (item.source == 2) item.source_text = "接口";
+            return item;
+          });
+        })
+        .catch((err) => {
+          // this.$message.error(err.message)
+          console.log(err.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+  },
+  mounted() {},
+  created() {
+    this.initWebSocket();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  & > div.page-wrapper {
+    margin: 10px 0px;
+  }
+}
+</style>

evm_monitor/src/views/system/login.vue

+<template>
+  <div class="container-wrapper">
+    <github-corner class="github-corner" />
+    <img class="qr-code" v-show="showIndex == 1" src="../../assets/images/evm-mp.jpg" />
+    <img class="qr-code" v-show="showIndex == 2" src="../../assets/images/evm-qq-group.png" />
+    <div :class="['container', isActive ? 'right-panel-active' : '']">
+      <div class="form-container sign-up-container">
+        <form action="#">
+          <h1>注册</h1>
+          <div class="social-container">
+            <a href="#" class="social" @mouseenter="onMouseEnter(1)" @mouseleave="onMouseLeave"><i class="el-icon-brush"></i></a>
+            <a href="#" class="social" @mouseenter="onMouseEnter(2)" @mouseleave="onMouseLeave"><i class="el-icon-cherry"></i></a>
+            <a href="https://gitee.com/scriptiot/evm" target="_blank" class="social"><i class="el-icon-pear"></i></a>
+          </div>
+          <span>完善用户基本信息</span>
+          <input type="text" v-model="post.account" placeholder="账号" />
+          <input type="text" v-model="post.username" placeholder="用户名" />
+          <input type="password" v-model="post.password" placeholder="密码" />
+          <button @click.prevent="doRegister">注册</button>
+        </form>
+      </div>
+      <div class="form-container sign-in-container">
+        <form action="#">
+          <h1>登录</h1>
+          <div class="social-container">
+            <a href="#" class="social" @mouseenter="onMouseEnter(1)" @mouseleave="onMouseLeave"><i class="el-icon-sunrise"></i></a>
+            <a href="#" class="social" @mouseenter="onMouseEnter(2)" @mouseleave="onMouseLeave"><i class="el-icon-sunny"></i></a>
+            <a href="https://gitee.com/scriptiot/evm" target="_blank" class="social"><i class="el-icon-cloudy"></i></a>
+          </div>
+          <span>请输入账号密码</span>
+          <input
+            type="text"
+            v-model="user.account"
+            autocomplete="off"
+            placeholder="账号"
+          />
+          <input
+            type="password"
+            v-model="user.password"
+            autocomplete="off"
+            placeholder="密码"
+          />
+          <!-- <a href="#">忘记密码？</a> -->
+          <button @click.prevent="login">登录</button>
+        </form>
+      </div>
+      <div class="overlay-container">
+        <div class="overlay">
+          <div class="overlay-panel overlay-left">
+            <h1>欢迎回来！</h1>
+            <p>请您先填写个人信息，进行操作。</p>
+            <button class="ghost" @click="isActive = false">登录</button>
+          </div>
+          <div class="overlay-panel overlay-right">
+            <h1>EVM应用商店</h1>
+            <p>注册账号</p>
+            <button class="ghost" @click="isActive = true">注册</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p style="position: absolute;bottom: 0px;text-align: center;">Copyright © 武汉市字节码科技有限公司</p>
+  </div>
+</template>
+<script>
+import GithubCorner from '@/components/GithubCorner'
+import { doLogin, getUser, doRegister } from "@/api/app-store"
+import { strTrim } from "@/utils/index"
+
+let loading = null;
+
+export default {
+  name: "Login",
+  components: {
+    GithubCorner
+  },
+  data() {
+    return {
+      isActive: false,
+      showIndex: 0,
+      user: {
+        account: "",
+        password: "",
+      },
+      post: {
+        account: "",
+        username: "",
+        password: ""
+      }
+    };
+  },
+  computed: {},
+  methods: {
+      onMouseEnter(index) {
+          this.showIndex = index;
+      },
+      onMouseLeave() {
+          this.showIndex = -1;
+      },
+    getUserPermission() {
+      getUser()
+        .then((res) => {
+          this.$store.dispatch("user/setRole", res.data.role);
+          sessionStorage.setItem("user", JSON.stringify(res.data));
+          this.$router.push({ path: "/home" });
+        })
+        .catch((err) => {
+          this.$message.error(err.message);
+        })
+        .finally(() => {
+          if (loading) loading.close();
+        });
+    },
+    login() {
+      if (!this.user.account || this.user.account.length == 0)
+        return this.$message.error("账号不能为空");
+      if (!this.user.password || this.user.password.length == 0)
+        return this.$message.error("密码不能为空");
+
+      loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+
+      doLogin({
+        account: strTrim(this.user.account),
+        password: strTrim(this.user.password),
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$store.dispatch("user/setToken", res.data.token);
+            this.$store.dispatch("user/setName", res.data.username);
+            this.getUserPermission();
+          }
+        })
+        .catch((err) => {
+          if (err.code == 404) this.$message.error("账号不存在");
+          else if (err.code == 4003) this.$message.error("密码错误");
+          else if (err.code == 4006) this.$message.error("账号被禁用");
+          else this.$message.error(err.message);
+          if (loading) loading.close();
+        });
+    },
+    doRegister() {
+      if (!this.post.account || this.post.account.length == 0)
+        return this.$message.error("账号不能为空");
+      if (!this.post.password || this.post.password.length == 0)
+        return this.$message.error("密码不能为空");
+
+      doRegister(this.post)
+        .then((res) => {
+          console.log(res);
+          this.user.account = this.post.account
+          this.user.password = this.post.password
+          this.$message.success("注册成功，请登录！");
+        })
+        .catch((err) => {
+          this.$message.error(err.message);
+        });
+    },
+  },
+  created() {},
+  mounted() {},
+  beforeMount() {},
+};
+</script>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: #f6f5f7;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-family: "Montserrat", sans-serif;
+  height: 100vh;
+  margin: -20px 0 50px;
+}
+
+h1 {
+  font-weight: bold;
+  margin: 0;
+}
+
+h2 {
+  text-align: center;
+}
+
+p {
+  font-size: 14px;
+  font-weight: 100;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  margin: 20px 0 30px;
+}
+
+span {
+  font-size: 12px;
+}
+
+a {
+  color: #333;
+  font-size: 14px;
+  /* 	text-decoration: none; */
+  margin: 15px 0;
+}
+
+button {
+  border-radius: 20px;
+  border: 1px solid #3c97bf;
+  background-color: #3c97bf;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 45px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  transition: transform 80ms ease-in;
+}
+
+button:active {
+  transform: scale(0.95);
+}
+
+button:focus {
+  outline: none;
+}
+
+button.ghost {
+  background-color: transparent;
+  border-color: #ffffff;
+}
+
+form {
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 50px;
+  height: 100%;
+  text-align: center;
+}
+
+input {
+  background-color: #eee;
+  border: none;
+  padding: 12px 15px;
+  margin: 8px 0;
+  width: 100%;
+}
+
+.container-wrapper {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container-wrapper > .qr-code {
+    top: 10px;
+    height: auto;
+    width: 150px;
+    position: absolute;
+}
+
+.container {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  position: relative;
+  overflow: hidden;
+  width: 768px;
+  max-width: 100%;
+  min-height: 480px;
+}
+
+.form-container {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  transition: all 0.6s ease-in-out;
+}
+
+.sign-in-container {
+  left: 0;
+  width: 50%;
+  z-index: 2;
+}
+
+.container.right-panel-active .sign-in-container {
+  transform: translateX(100%);
+}
+
+.sign-up-container {
+  left: 0;
+  width: 50%;
+  opacity: 0;
+  z-index: 1;
+}
+
+.container.right-panel-active .sign-up-container {
+  transform: translateX(100%);
+  opacity: 1;
+  z-index: 5;
+  animation: show 0.6s;
+}
+
+@keyframes show {
+  0%,
+  49.99% {
+    opacity: 0;
+    z-index: 1;
+  }
+
+  50%,
+  100% {
+    opacity: 1;
+    z-index: 5;
+  }
+}
+
+.overlay-container {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  transition: transform 0.6s ease-in-out;
+  z-index: 100;
+}
+
+.container.right-panel-active .overlay-container {
+  transform: translateX(-100%);
+}
+
+.overlay {
+  background: #3c97bf;
+  background: -webkit-linear-gradient(to right, #3c97bf, #13dbe2);
+  background: linear-gradient(to right, #3c97bf, #13dbe2);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 0 0;
+  color: #ffffff;
+  position: relative;
+  left: -100%;
+  height: 100%;
+  width: 200%;
+  transform: translateX(0);
+  transition: transform 0.6s ease-in-out;
+}
+
+.container.right-panel-active .overlay {
+  transform: translateX(50%);
+}
+
+.overlay-panel {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 40px;
+  text-align: center;
+  top: 0;
+  height: 100%;
+  width: 50%;
+  transform: translateX(0);
+  transition: transform 0.6s ease-in-out;
+}
+
+.overlay-left {
+  transform: translateX(-20%);
+}
+
+.container.right-panel-active .overlay-left {
+  transform: translateX(0);
+}
+
+.overlay-right {
+  right: 0;
+  transform: translateX(0);
+}
+
+.container.right-panel-active .overlay-right {
+  transform: translateX(20%);
+}
+
+.social-container {
+  margin: 20px 0;
+}
+
+.social-container a {
+  border: 1px solid #dddddd;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 5px;
+  height: 40px;
+  width: 40px;
+}
+
+footer {
+  background-color: #222;
+  color: #fff;
+  font-size: 14px;
+  bottom: 0;
+  position: fixed;
+  left: 0;
+  right: 0;
+  text-align: center;
+  z-index: 999;
+}
+
+footer p {
+  margin: 10px 0;
+}
+
+footer i {
+  color: red;
+}
+
+footer a {
+  color: #3c97bf;
+  text-decoration: none;
+}
+</style>
\ No newline at end of file

evm_monitor/src/views/system/opqcp.vue

+<template>
+  <div class="app-container">
+    <el-alert title="代码混淆工具" type="success"></el-alert>
+    <div style="margin: 10px 0px">
+      <el-form>
+        <el-form-item>
+          <el-upload
+            class="upload-demo"
+            action="/api/v1/evm_store/upload"
+            name="binfile"
+            :on-success="handleUploaded"
+            :file-list="fileList"
+          >
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">
+              上传C源文件，转换完成后会自动下载
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="getConvertString">转换</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+import { actionOpqcp } from "@/api/app-store";
+
+export default {
+  name: "Opqcp",
+  data() {
+    return {
+      fileList: [],
+      inputString: null,
+      outputString: null,
+      filename: "app.js",
+    };
+  },
+  methods: {
+    createFile(content, filename) {
+      const a = document.createElement("a");
+      const blob = new Blob([content]);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = filename;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    },
+    handleUploaded(response) {
+      if (response.code == 200) {
+        this.filename = response.data.filename
+        actionOpqcp({ filename: response.data.filepath })
+          .then((res) => {
+            this.$message.success(res.message);
+            // const a = document.createElement("a");
+            // a.href = url;
+            // a.download = filename;
+            // a.click();
+          })
+          .catch((err) => {
+            this.$message.error(err.message);
+          });
+      }
+      console.log(response)
+    },
+    downloadFile() {
+      this.$prompt("请输入文件名", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputValue: this.filename,
+        inputErrorMessage: "文件名格式不正确",
+      })
+        .then(({ value }) => {
+          if (value) this.filename = value;
+          this.createFile(this.outputString, this.filename);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
+        });
+    },
+    getConvertString() {
+
+    },
+  },
+  mounted() {},
+  created() {},
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  & > div.page-wrapper {
+    margin: 10px 0px;
+  }
+}
+</style>

evm_monitor/src/views/system/permission.vue

+<template>
+    <div class="app-container">
+        <el-form :inline="true" :model="form" size="mini">
+            <el-form-item label="权限名称">
+                <el-select v-model="form.uuid" filterable placeholder="请输入权限名称">
+                    <el-option v-for="(item, index) in roles" :key="index" :label="item.name" :value="item.uuid"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
+            <el-form-item><el-button @click="onReset">重置</el-button></el-form-item>
+            <el-form-item><el-button type="warning" @click="onAdd">添加</el-button></el-form-item>
+        </el-form>
+        <el-table v-loading="isLoading" element-loading-text="Loading" :data="list" size="mini" border stripe fit highlight-current-row>
+            <el-table-column prop="name" label="权限名称" align="center" min-width="100"></el-table-column>
+            <el-table-column prop="create_at" label="创建时间" width="150"></el-table-column>
+            <el-table-column prop="create_by.username" label="创建者" width="150"></el-table-column>
+            <el-table-column prop="update_at" label="更新时间" width="150" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="update_by.username" label="更新者" width="150"></el-table-column>
+            <el-table-column label="操作" align="center" width="180" fixed="right">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                    <!-- <el-tag type="warning" v-if="!checkPermission(['area-modify']) && !checkPermission(['area-remove'])">没有操作权限</el-tag> -->
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="page-wrapper">
+            <el-pagination @current-change="handleCurrentChange" :current-page.sync="form.pagenum" background small :page-size="form.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
+        </div>
+        <el-dialog
+            :title="dialogTitle"
+            :visible.sync="dialogVisible"
+            width="45%"
+        >
+            <el-form :model="post" status-icon :rules="rules" :inline="true" ref="post" size="mini" label-width="80px">
+                <el-form-item label="权限名称" prop="permission">
+                    <el-input type="text" v-model="post.permission" autocomplete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" size="mini" plain @click="submitForm('post')">提交</el-button>
+                <el-button type="success" size="mini" plain @click="onReset('post')">重置</el-button>
+                <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { getPermissionList, deletePermission, addPermission, updatePermission } from '@/api/index'
+import checkPermission from '@/utils/permission'
+import { mapTrim, compareObjectDiff } from '@/utils/index'
+import { formatUTCDateTime } from '@/utils/utils'
+export default {
+    data() {
+        return {
+            total: 0,
+            list: [],
+            isLoading: false,
+            roles: [],
+            depots: [],
+            form: {
+                uuid: null,
+                name: null,
+                pagesize: 15,
+                pagenum: 1
+            },
+            dialogTitle: "",
+            dialogVisible: false,
+            post: {
+                permission: null,
+                name: null,
+            },
+            rules: {
+                permission: [{ type: 'string', required: true, message: '权限名称不能为空', trigger: 'blur' }],
+                name: [
+                    { type: 'string', required: true, message: '用户名不能为空', trigger: 'blur' },
+                    { min: 1, max: 20, message: '字符串长度在 1 到 20 之间', trigger: 'blur' }
+                ]
+            }
+        }
+    },
+    methods: {
+        checkPermission,
+        fetchData(params) {
+            this.isLoading = true
+            getPermissionList(Object.assign({
+                pagenum: this.form.pagenum,
+                pagesize: this.form.pagesize,
+            }, params)).then(res => {
+                if (res.code == 200) {
+                    this.total = res.count
+                    this.list = res.data.map(item => {
+                        item.create_at = formatUTCDateTime(item.create_at)
+                        item.update_at = formatUTCDateTime(item.update_at)
+                        return item
+                    })
+                }
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            }).finally(() => {
+                this.isLoading = false
+            })
+        },
+        fetchSelectData() {
+            getPermissionList({ "scope_type": "list" }).then(res => {
+                this.roles = res.data
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            })
+        },
+        handleSizeChange(e) {
+            this.form.pagesize = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleCurrentChange(e) {
+            this.form.pagenum = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleEdit(index, row) {
+            this.post.account = row.account
+            this.post.username = row.username
+            this.post.contact = row.contact
+            this.post.birthday = row.birthday
+            this.post.email = row.email
+            this.post.hometown = row.hometown
+            this.post.entry_time = row.entry_time
+            this.post.expire_date = row.expire_date
+            this.post.role = row.role
+            this.post.depot = row.depot
+            this.dialogTitle = "编辑"
+            this.dialogVisible = true
+        },
+        handleDelete(index, row) {
+            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
+                confirmButtonText: '确定',
+                callback: action => {
+                    if (action == 'confirm') deletePermission(row.id).then(res => {
+                        console.log(res)
+                        this.total -= 1
+                        this.$delete(this.list, index)
+                        this.$message({ type: 'success', message: `成功删除第${ index }行` })
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                }
+            })
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                let result = true
+                if (valid) {
+                    if (this.dialogTitle === '添加') addPermission(mapTrim(this.post)).then(res => {
+                        console.log(res)
+                        this.$message({ type: 'success', message: res.message })
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                    else if (this.dialogTitle === '编辑') updatePermission(this.currentValue.id, compareObjectDiff(this.post, this.currentValue)).then(res => {
+                        console.log(res)
+                        // this.$set(this.list, this.currentIndex, Object.assign(this.currentValue, tmp))
+                        this.$message({ type: 'success', message: '更新成功' })
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                } else {
+                    result = false
+                }
+                this.dialogVisible = false
+                return result
+            })
+        },
+        onAdd() {
+            this.dialogTitle = "添加"
+            this.dialogVisible = true
+        },
+        onSubmit() {
+            this.form.pagenum = 1
+            this.form.pagesize = 15
+            this.fetchData(mapTrim(this.form))
+        },
+        onReset(formName) {
+            this.form = {
+                account: null,
+                username: null,
+                pagesize: 15,
+                pagenum: 1
+            }
+            this.$refs[formName].resetFields()
+            this.fetchData()
+        }
+    },
+    mounted() {
+    },
+    created() {
+        this.fetchData()
+        this.fetchSelectData()
+    }
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+    & > div.page-wrapper {
+        margin: 10px 0px;
+    }
+}
+</style>

evm_monitor/src/views/system/profile.vue

+<template>
+  <div class="app-container">
+    <el-row :gutter="20" v-if="user">
+      <el-col :span="6" :xs="24">
+        <el-card style="margin-bottom: 20px">
+          <div slot="header" class="clearfix"><span>关于我</span></div>
+          <div class="user-profile">
+            <div class="box-center">
+              <pan-thumb
+                image="http://statics.evmiot.com/evue-logo.png"
+                :height="'100px'"
+                :width="'100px'"
+                :hoverable="false"
+                ><div>Hello</div>
+                {{ user.role }}</pan-thumb
+              >
+            </div>
+            <div class="box-center">
+              <div class="user-name text-center">{{ user.name }}</div>
+              <div class="user-role text-center text-muted">
+                未知
+              </div>
+            </div>
+          </div>
+          <div class="user-bio">
+            <div class="user-education user-bio-section">
+              <div class="user-bio-section-header">
+                <svg-icon icon-class="education" /><span>个性签名</span>
+              </div>
+              <div class="user-bio-section-body">
+                <div class="text-muted">{{ user.sign | wrapperSign }}</div>
+              </div>
+            </div>
+            <div class="user-skills user-bio-section">
+              <div class="user-bio-section-header">
+                <svg-icon icon-class="skill" /><span>所属公司</span>
+              </div>
+              <div class="user-bio-section-body">{{ user.company }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="账号信息" name="account">
+              <el-form
+                size="mini"
+                :model="user"
+                status-icon
+                :rules="rules"
+                ref="post"
+                label-width="80px"
+              >
+                <el-form-item label="账号">
+                  <el-col :md="8" :xs="24">
+                    <el-input v-model.trim="currentValue.account" disabled />
+                  </el-col>
+                </el-form-item>
+                <el-form-item label="性别" prop="gender">
+                  <el-col :md="8" :xs="24">
+                    <el-radio-group v-model="user.gender">
+                      <el-radio :label="1">男</el-radio>
+                      <el-radio :label="2">女</el-radio>
+                    </el-radio-group>
+                  </el-col>
+                </el-form-item>
+                <el-form-item label="生日" prop="birthday">
+                  <el-col :md="8" :xs="24">
+                    <el-date-picker
+                      v-model="user.birthday"
+                      type="date"
+                      format="yyyy-MM-dd"
+                      value-format="yyyy-MM-dd"
+                      placeholder="选择日期"
+                    >
+                    </el-date-picker>
+                  </el-col>
+                </el-form-item>
+                <el-form-item label="手机" prop="contact">
+                  <el-col :md="8" :xs="24">
+                    <el-input v-model.trim="user.contact" />
+                  </el-col>
+                </el-form-item>
+                <el-form-item label="邮箱" prop="email">
+                  <el-col :md="8" :xs="24">
+                    <el-input v-model.trim="user.email" />
+                  </el-col>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="submitForm('post')"
+                    >更新资料</el-button
+                  >
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="activity">
+              <el-form size="mini" label-width="100px">
+                <el-form-item label="原密码">
+                  <el-col :md="8" :xs="24">
+                    <el-input
+                      v-model="form.password"
+                      type="password"
+                      autocomplete="off"
+                    />
+                  </el-col>
+                </el-form-item>
+                <el-form-item label="新密码">
+                  <el-col :md="8" :xs="24">
+                    <el-input
+                      v-model="form.newPassword"
+                      type="password"
+                      autocomplete="off"
+                    />
+                  </el-col>
+                </el-form-item>
+                <el-form-item label="确认新密码">
+                  <el-col :md="8" :xs="24">
+                    <el-input
+                      v-model="form.confirmPassword"
+                      type="password"
+                      autocomplete="off"
+                    />
+                  </el-col>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="updatePassword"
+                    >更新密码</el-button
+                  >
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="接口密钥" name="apiKey">
+              <el-form size="mini" label-width="100px">
+                <el-form-item label="AccessKey">
+                  <el-col :md="10" :xs="24">
+                    <el-input v-model="user.uuid" type="text" autocomplete="off" disabled />
+                  </el-col>
+                  <el-col :md="4" :xs="24">
+                      <el-button @click="copyAccessKey">复制</el-button>
+                  </el-col>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { updateUser, updateUserPassword } from "@/api/index";
+import PanThumb from "@/components/PanThumb";
+
+export default {
+  name: "Profile",
+  components: { PanThumb },
+  filters: {
+    wrapperSign(sign) {
+      return sign === "" || !sign ? "此人非常懒，一个字都不写" : sign;
+    },
+  },
+  data() {
+    return {
+      user: {
+        birthday: "",
+        email: "",
+        contact: "",
+        hometown: "",
+        gender: 1,
+        uuid: "",
+      },
+      form: {
+        password: "",
+        newPassword: "",
+        confirmPassword: "",
+      },
+      rules: {
+        email: [
+          {
+            type: "string",
+            required: false,
+            message: "邮箱不能为空",
+            trigger: "blur",
+          },
+        ],
+        contact: [
+          {
+            type: "string",
+            required: false,
+            message: "手机不能为空",
+            trigger: "blur",
+          },
+        ],
+        hometown: [
+          {
+            type: "string",
+            required: false,
+            message: "邮箱不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+      currentValue: null,
+      activeTab: "account",
+    };
+  },
+  computed: {
+    ...mapGetters(["name", "avatar", "role"]),
+  },
+  created() {
+    this.getUser();
+  },
+  methods: {
+    getUser() {
+      const user = JSON.parse(window.sessionStorage.getItem("user"));
+      if (user) {
+        this.currentValue = user;
+        this.user.birthday = user.birthday;
+        this.user.email = user.email;
+        this.user.contact = user.contact;
+        this.user.hometown = user.hometown;
+        this.user.gender = user.gender;
+        this.user.uuid = user.uuid;
+      }
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        let result = true;
+        if (valid) {
+          updateUser(this.currentValue.uuid, this.user)
+            .then((res) => {
+              this.user = res.data;
+              this.$message({ type: "success", message: "更新成功" });
+              const profile = Object.assign({}, this.currentValue, res.data);
+              window.sessionStorage.setItem("user", JSON.stringify(profile));
+            })
+            .catch((err) => {
+              this.$message.error(err.message);
+            });
+        } else {
+          result = false;
+        }
+        this.dialogVisible = false;
+        return result;
+      });
+    },
+    copyAccessKey() {
+        let oInput = document.createElement('input')
+        oInput.value = this.user.uuid
+        document.body.appendChild(oInput)
+        oInput.select()
+        document.execCommand("Copy")
+        this.$message({ message: '复制成功', type: 'success' })
+        oInput.remove()
+    },
+    updatePassword() {
+      if (
+        this.form.password.trim().length > 0 &&
+        this.form.newPassword.trim().length > 0 &&
+        this.form.confirmPassword.trim().length > 0
+      ) {
+        if (this.form.newPassword === this.form.confirmPassword) {
+          if (this.form.newPassword.trim().length < 6) {
+            return this.$message.error("新密码长度不能少于6位");
+          }
+
+          // if (!/\d/.test(this.form.newPassword.trim())) {
+          //   return this.$message.error("新密码必须包含数字");
+          // } // 如果用户输入的密码 包含了数字
+
+          // if (!/[a-z]/.test(this.form.newPassword.trim())) {
+          //   return this.$message.error("新密码必须包含小写字母");
+          // } // 如果用户输入的密码 包含了小写的a到z
+
+          // if (!/[A-Z]/.test(this.form.newPassword.trim())) {
+          //   return this.$message.error("新密码必须包含大写字母");
+          // } // 如果用户输入的密码 包含了大写的A到Z
+
+          // if (!/_|\W/.test(this.form.newPassword.trim())) {
+          //   return this.$message.error("新密码必须包含字符");
+          // } // 如果是非数字 字母
+
+          updateUserPassword({
+            uuid: this.currentValue.uuid,
+            password: this.form.password,
+            newPassword: this.form.newPassword,
+          })
+            .then((res) => {
+              console.log(res);
+              this.$message({ type: "success", message: "密码更新成功" });
+            })
+            .catch((err) => {
+              this.$message.error(err.message);
+            });
+        } else this.$message.error("新密码和确认新密码不一致");
+      } else this.$message.error("原密码、新密码、确认新密码都不能为空");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box-center {
+  margin: 0 auto;
+  display: table;
+}
+
+.text-muted {
+  color: #777;
+}
+
+.user-profile {
+  .user-name {
+    font-weight: bold;
+  }
+
+  .box-center {
+    padding-top: 10px;
+  }
+
+  .user-role {
+    padding-top: 10px;
+    font-weight: 400;
+    font-size: 14px;
+  }
+
+  .box-social {
+    padding-top: 30px;
+
+    .el-table {
+      border-top: 1px solid #dfe6ec;
+    }
+  }
+
+  .user-follow {
+    padding-top: 20px;
+  }
+}
+
+.user-bio {
+  margin-top: 20px;
+  color: #606266;
+
+  span {
+    padding-left: 4px;
+  }
+
+  .user-bio-section {
+    font-size: 14px;
+    padding: 15px 0;
+
+    .user-bio-section-header {
+      border-bottom: 1px solid #dfe6ec;
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+      font-weight: bold;
+    }
+  }
+}
+</style>

evm_monitor/src/views/system/register.vue

+<template>
+  <div class="login-container">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+      auto-complete="on"
+      label-position="left"
+    >
+      <div class="title-container">
+        <h3 class="title">Login Form</h3>
+      </div>
+
+      <el-form-item prop="username">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          ref="username"
+          v-model="loginForm.username"
+          placeholder="Username"
+          name="username"
+          type="text"
+          tabindex="1"
+          auto-complete="on"
+        />
+      </el-form-item>
+
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          :key="passwordType"
+          ref="password"
+          v-model="loginForm.password"
+          :type="passwordType"
+          placeholder="Password"
+          name="password"
+          tabindex="2"
+          auto-complete="on"
+          @keyup.enter.native="handleLogin"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon
+            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+          />
+        </span>
+      </el-form-item>
+
+      <div style="margin: 20px auto;">
+        <el-button
+          :loading="loading"
+          type="primary"
+          @click.native.prevent="handleLogin"
+          >Login</el-button
+        >
+
+        <el-button
+          :loading="loading"
+          type="success"
+          @click.native.prevent="clearToken"
+          >Clear</el-button
+        >
+      </div>
+
+      <div class="tips">
+        <span style="margin-right: 20px">username: admin</span>
+        <span> password: any</span>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import { validUsername } from "@/utils/validate";
+
+export default {
+  name: "Register",
+  data() {
+    const validateUsername = (rule, value, callback) => {
+      if (!validUsername(value)) {
+        callback(new Error("Please enter the correct user name"));
+      } else {
+        callback();
+      }
+    };
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error("The password can not be scss than 6 digits"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      loginForm: {
+        username: "admin",
+        password: "111111",
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", validator: validateUsername },
+        ],
+        password: [
+          { required: true, trigger: "blur", validator: validatePassword },
+        ],
+      },
+      loading: false,
+      passwordType: "password",
+      redirect: undefined,
+    };
+  },
+  watch: {
+    $route: {
+      handler(route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    showPwd() {
+      if (this.passwordType === "password") {
+        this.passwordType = "";
+      } else {
+        this.passwordType = "password";
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus();
+      });
+    },
+    handleLogin() {
+      this.$store
+        .dispatch("user/login", this.loginForm)
+        .then(() => {
+          this.$router.push({ path: "/login" });
+        })
+        .catch((err) => {
+          console.log(err);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    clearToken() {
+      store.dispatch("user/removeToken").then(() => {
+        location.reload();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: $light_gray;
+      margin: 0px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+</style>

evm_monitor/src/views/system/role.vue

+<template>
+    <div class="app-container">
+        <el-form :inline="true" :model="form" size="mini">
+            <el-form-item label="角色名称">
+                <el-select v-model="form.uuid" filterable placeholder="请输入角色名称">
+                    <el-option v-for="(item, index) in roles" :key="index" :label="item.name" :value="item.uuid"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
+            <el-form-item><el-button @click="onReset">重置</el-button></el-form-item>
+            <el-form-item><el-button type="warning" @click="onAdd">添加</el-button></el-form-item>
+        </el-form>
+        <el-table v-loading="isLoading" element-loading-text="Loading" :data="list" size="mini" border stripe fit highlight-current-row>
+            <el-table-column prop="name" label="角色名称" align="center" min-width="150" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="is_system" label="系统角色" width="80">
+                <template slot-scope="scope">
+                    <span>{{ scope.row.is_system ? '是': '否' }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="create_at" label="创建时间" width="150"></el-table-column>
+            <el-table-column prop="create_by.username" label="创建者" width="150"></el-table-column>
+            <el-table-column prop="update_at" label="更新时间" width="150"></el-table-column>
+            <el-table-column prop="update_by.username" label="更新者" width="150"></el-table-column>
+            <el-table-column label="操作" align="center" width="180" fixed="right">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="success" :disabled="hasPermission" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                    <el-button size="mini" type="danger" :disabled="scope.row.is_system" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="page-wrapper">
+            <el-pagination @current-change="handleCurrentChange" :current-page.sync="form.pagenum" background small :page-size="form.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
+        </div>
+        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%">
+            <el-form :model="post" status-icon :rules="rules" :inline="true" ref="post" size="mini" label-width="120px">
+                <el-form-item label="角色名称" prop="name">
+                    <el-input type="text" v-model="post.name" :disabled="post.is_system" autocomplete="off" placeholder="请输入角色名称"></el-input>
+                </el-form-item>
+                <el-divider content-position="left">操作权限</el-divider>
+                <el-form-item label="基础信息权限" prop="permission">
+                    <el-radio-group v-model="post.permission.basic" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="流程管理权限" prop="permission">
+                    <el-radio-group v-model="post.permission.flow" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="回款计划权限" prop="permission">
+                    <el-radio-group v-model="post.permission.paybackPlan" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="回款进度权限" prop="permission">
+                    <el-radio-group v-model="post.permission.paybackProgress" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="技术资源库权限" prop="permission">
+                    <el-radio-group v-model="post.permission.techResources" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="技术日历权限" prop="permission">
+                    <el-radio-group v-model="post.permission.calendar" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="用户管理权限" prop="permission">
+                    <el-radio-group v-model="post.permission.users" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="角色管理权限" prop="permission">
+                    <el-radio-group v-model="post.permission.roles" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="部门管理权限" prop="permission">
+                    <el-radio-group v-model="post.permission.depots" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="人员资质预警" prop="permission">
+                    <el-radio-group v-model="post.permission.personQualification" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="设备资质预警" prop="permission">
+                    <el-radio-group v-model="post.permission.equipmentQualification" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="公司资质预警" prop="permission">
+                    <el-radio-group v-model="post.permission.companyQualification" size="mini">
+                        <el-radio-button label="可读"></el-radio-button>
+                        <el-radio-button label="可读写"></el-radio-button>
+                        <el-radio-button label="无权限"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-divider content-position="left">数据范围</el-divider>
+                <el-form-item label="项目数据范围" prop="permission">
+                    <el-radio-group v-model="post.permission.dataScope" size="mini">
+                        <el-radio-button label="自己的"></el-radio-button>
+                        <el-radio-button label="部门的"></el-radio-button>
+                        <el-radio-button label="公司的"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="预警数据范围" prop="permission">
+                    <el-radio-group v-model="post.permission.warningDataScope" size="mini">
+                        <el-radio-button label="自己的"></el-radio-button>
+                        <el-radio-button label="部门的"></el-radio-button>
+                        <el-radio-button label="公司的"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="日历数据范围" prop="permission">
+                    <el-radio-group v-model="post.permission.calendarDataScope" size="mini">
+                        <el-radio-button label="自己的"></el-radio-button>
+                        <el-radio-button label="部门的"></el-radio-button>
+                        <el-radio-button label="公司的"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" size="mini" plain @click="submitForm('post')">提交</el-button>
+                <el-button type="success" size="mini" plain @click="onReset('post')">重置</el-button>
+                <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapState, mapGetters } from "vuex";
+import { getRoleList, deleteRole, updateRole, addRole } from '@/api/index'
+import checkPermission from '@/utils/permission'
+import { mapTrim, compareObjectDiff } from '@/utils/index'
+
+export default {
+    data() {
+        return {
+            total: 0,
+            list: [],
+            isLoading: false,
+            roles: [],
+            form: {
+                uuid: null,
+                name: null,
+                pagesize: 15,
+                pagenum: 1
+            },
+            dialogTitle: "",
+            dialogVisible: false,
+            currentValue: null,
+            currentIndex: null,
+            post: {
+                name: null,
+                permission: {
+                    basic: '无权限',
+                    flow: '无权限',
+                    users: '无权限',
+                    roles: '无权限',
+                    depots: '无权限',
+                    paybackPlan: '无权限',
+                    paybackProgress: '无权限',
+                    personQualification: "无权限",
+                    equipmentQualification: "无权限",
+                    companyQualification: "无权限",
+                    techResources: "无权限",
+                    calendar: "无权限",
+                    dataScope: "自己的",
+                    warningDataScope: "自己的",
+                    calendarDataScope: "自己的",
+                },
+                is_system: false
+            },
+            rules: {
+                name: [
+                    { type: 'string', required: true, message: '用户名不能为空', trigger: 'blur' },
+                    { min: 1, max: 20, message: '字符串长度在 1 到 20 之间', trigger: 'blur' }
+                ],
+                permission: [{ type: 'object', required: true, message: '权限不能为空', trigger: 'blur' }]
+            }
+        }
+    },
+    computed: {
+        ...mapState("user", [ "avatar", ]),
+        ...mapGetters([ "role", ]),
+        hasPermission: () => JSON.parse(sessionStorage.getItem("user")).role.name === "超级管理员" ? false : true,
+    },
+    methods: {
+        checkPermission,
+        fetchData(params) {
+            this.isLoading = true
+            getRoleList(Object.assign({
+                pagenum: this.form.pagenum,
+                pagesize: this.form.pagesize,
+            }, params)).then(res => {
+                this.total = res.count
+                this.list = res.data
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            }).finally(() => {
+                this.isLoading = false
+            })
+        },
+        fetchSelectData() {
+            getRoleList({ "scope_type": "list" }).then(res => {
+                if (res.code == 200) this.roles = res.data
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            })
+        },
+        handleSizeChange(e) {
+            this.form.pagesize = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleCurrentChange(e) {
+            this.form.pagenum = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleEdit(index, row) {
+            if (row.is_system && this.hasPermission) return this.$message.error("系统内置角色，无法修改")
+            if (row.permission.basic) this.post.permission.basic = row.permission.basic
+            if (row.permission.dataScope) this.post.permission.dataScope = row.permission.dataScope
+            if (row.permission.flow) this.post.permission.flow = row.permission.flow
+            if (row.permission.users) this.post.permission.users = row.permission.users
+            if (row.permission.roles) this.post.permission.roles = row.permission.roles
+            if (row.permission.depots) this.post.permission.depots = row.permission.depots
+            if (row.permission.paybackPlan) this.post.permission.paybackPlan = row.permission.paybackPlan
+            if (row.permission.paybackProgress) this.post.permission.paybackProgress = row.permission.paybackProgress
+            if (row.permission.personQualification) this.post.permission.personQualification = row.permission.personQualification
+            if (row.permission.equipmentQualification) this.post.permission.equipmentQualification = row.permission.equipmentQualification
+            if (row.permission.companyQualification) this.post.permission.companyQualification = row.permission.companyQualification
+            if (row.permission.techResources) this.post.permission.techResources = row.permission.techResources
+            if (row.permission.calendar) this.post.permission.calendar = row.permission.calendar
+            if (row.permission.calendarDataScope) this.post.permission.calendarDataScope = row.permission.calendarDataScope
+            if (row.permission.warningDataScope) this.post.permission.warningDataScope = row.permission.warningDataScope
+            this.post.name = row.name
+            this.post.is_system = row.is_system
+            this.currentValue = row
+            this.currentIndex = index
+            this.dialogTitle = "编辑"
+            this.dialogVisible = true
+        },
+        handleDelete(index, row) {
+            if (row.is_system) return this.$message.error("系统内置角色，无法删除")
+            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
+                confirmButtonText: '确定',
+                callback: action => {
+                    if (action == 'confirm') deleteRole(row.uuid).then(res => {
+                        console.log(res)
+                        this.total -= 1
+                        this.$delete(this.list, index)
+                        this.$message({ type: 'success', message: `成功删除第${ index }行` })
+                        this.fetchData()
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                }
+            })
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                let result = true
+                if (valid) {
+                    if (this.dialogTitle === '添加') addRole(this.post).then(res => {
+                        console.log(res)
+                        this.$message({ type: 'success', message: '添加成功' })
+                        this.fetchData()
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                    else if (this.dialogTitle === '编辑') updateRole(this.currentValue.uuid, compareObjectDiff(this.post, this.currentValue)).then(res => {
+                        console.log(res)
+                        this.$message({ type: 'success', message: '更新成功' })
+                        this.fetchData()
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                } else {
+                    result = false
+                }
+                this.dialogVisible = false
+                return result
+            })
+        },
+        onAdd() {
+            this.dialogTitle = "添加"
+            this.dialogVisible = true
+        },
+        onSubmit() {
+            this.form.pagenum = 1
+            this.form.pagesize = 15
+            this.fetchData(mapTrim(this.form))
+        },
+        onReset(formName) {
+            this.form = {
+                account: null,
+                username: null,
+                pagesize: 15,
+                pagenum: 1
+            }
+            this.$refs[formName].resetFields()
+            this.fetchData()
+        }
+    },
+    mounted() {},
+    created() {
+        this.fetchData()
+        this.fetchSelectData()
+
+        const user = JSON.parse(sessionStorage.getItem("user"))
+        if (!user || user.role.permission.roles == "无权限") this.$router.push("/403")
+    }
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+    & > div.page-wrapper {
+        margin: 10px 0px;
+    }
+}
+</style>

evm_monitor/src/views/system/summary.vue

+<template>
+    <div class="app-container">
+        <el-form :inline="true" ref="form" :model="form" size="mini">
+            <el-form-item label="标题" prop="uuid">
+                <el-select v-model="form.uuid" filterable placeholder="请输入标题">
+                    <el-option v-for="(item, index) in roles" :key="index" :label="item.name" :value="item.uuid"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
+            <el-form-item><el-button @click="onReset">重置</el-button></el-form-item>
+            <el-form-item><el-button type="warning" @click="onAdd">添加</el-button></el-form-item>
+            <el-form-item>
+                <el-popover placement="top-start" width="240" trigger="click">
+                    <el-checkbox-group :min="1" v-model="checkList" @change="onCheckboxChange">
+                        <el-checkbox :label="item" v-for="(item, index) in headerList" :key="index"></el-checkbox>
+                    </el-checkbox-group>
+                    <el-button type="success" slot="reference">表头设置</el-button>
+                </el-popover>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="info" plain @click="handleDownload">导出当前数据</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table v-loading="isLoading" element-loading-text="Loading" :data="list" size="mini" border stripe fit highlight-current-row>
+            <el-table-column :prop="item.prop" :label="item.label" :align="item.align" :min-width="item.width" v-for="(item, index) in tableHeader" :key="index"></el-table-column>
+            <el-table-column prop="create_at" label="创建时间" width="150"></el-table-column>
+            <el-table-column prop="create_by.username" label="创建者" width="150"></el-table-column>
+            <el-table-column prop="update_at" label="更新时间" width="150" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="update_by.username" label="更新者" width="150"></el-table-column>
+            <el-table-column label="操作" align="center" width="180" fixed="right">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="page-wrapper">
+            <el-pagination @current-change="handleCurrentChange" :current-page.sync="form.pagenum" background small :page-size="form.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
+        </div>
+        <el-dialog
+            :title="dialogTitle"
+            :visible.sync="dialogVisible"
+            width="50%"
+        >
+            <el-form :model="post" status-icon :rules="rules" :inline="true" ref="post" size="mini" label-width="200px">
+                <el-form-item label="标题" prop="name">
+                    <el-input type="text" v-model="post.name" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="年度调派现场总天数" prop="year_dispatch_site_days">
+                    <el-input type="number" v-model.number="post.year_dispatch_site_days" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="年度监督流失率" prop="year_supervise_churn_rate">
+                    <el-input type="number" v-model.number="post.year_supervise_churn_rate" autocomplete="off"><template slot="append">%</template></el-input>
+                </el-form-item>
+                <el-form-item label="年度再认证流失率" prop="year_recert_churn_rate">
+                    <el-input type="number" v-model.number="post.year_recert_churn_rate" autocomplete="off"><template slot="append">%</template></el-input>
+                </el-form-item>
+                <el-form-item label="年度顾客满意率" prop="year_satis_churn_rate">
+                    <el-input type="number" v-model.number="post.year_satis_churn_rate" autocomplete="off"><template slot="append">%</template></el-input>
+                </el-form-item>
+                <el-form-item label="年度应收款回款率" prop="year_receiv_collection_rate">
+                    <el-input type="number" v-model.number="post.year_receiv_collection_rate" autocomplete="off"><template slot="append">%</template></el-input>
+                </el-form-item>
+                <el-form-item label="行业项目比率" prop="indus_project_rate">
+                    <el-input type="number" v-model.number="post.indus_project_rate" autocomplete="off"><template slot="append">%</template></el-input>
+                </el-form-item>
+                <el-form-item label="渠道开发项目比率" prop="channel_project_rate">
+                    <el-input type="number" v-model.number="post.channel_project_rate" autocomplete="off"><template slot="append">%</template></el-input>
+                </el-form-item>
+                <el-form-item label="年度坏账终止项目数" prop="year_bad_project">
+                    <el-input type="number" v-model.number="post.year_bad_project" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="年度坏账金额" prop="year_bad_debt_amount">
+                    <el-input type="number" v-model.number="post.year_bad_debt_amount" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="行业项目数量" prop="indus_project_count">
+                    <el-input type="number" v-model.number="post.indus_project_count" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="渠道开发项目数量" prop="channel_project_count">
+                    <el-input type="number" v-model.number="post.channel_project_count" autocomplete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" size="mini" plain @click="submitForm('post')">提交</el-button>
+                <el-button type="success" size="mini" plain @click="onReset('form')">重置</el-button>
+                <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { getSummaryList, deleteSummary, addSummary, updateSummary } from '@/api/index'
+import { mapTrim } from '@/utils/index'
+import { exportJsonToExcel } from "@/utils/excel"
+
+const fieldList = [
+  { label: "标题", prop: "name", isShow: true },
+  { label: "年度监督流失率", prop: "year_supervise_churn_rate", isShow: true },
+  { label: "年度再认证流失率", prop: "year_recert_churn_rate", isShow: true },
+  { label: "年度顾客满意率", prop: "year_satis_churn_rate", isShow: true },
+  { label: "年度应收款回款率", prop: "year_receiv_collection_rate", isShow: true },
+  { label: "行业项目比率", prop: "indus_project_rate", isShow: true },
+  { label: "渠道开发项目比率", prop: "channel_project_rate", isShow: true },
+  { label: "年度调派现场总天数", prop: "year_dispatch_site_days", isShow: false },
+  { label: "年度坏账终止项目数", prop: "year_bad_project", isShow: false },
+  { label: "年度坏账金额", prop: "year_bad_debt_amount", isShow: false },
+  { label: "行业项目数量", prop: "indus_project_count", isShow: false },
+  { label: "渠道开发项目数量", prop: "channel_project_count", isShow: false },
+]
+
+const tableHeader = fieldList.filter(item => {
+  if (item.isShow) return Object.assign(item, { align: "center", width: "150" })
+})
+
+export default {
+    name: "Summary",
+    data() {
+        return {
+            total: 0,
+            list: [],
+            isLoading: false,
+            checkList: tableHeader.map(item => item.label),
+            headerList: fieldList.map(item => item.label),
+            tableHeader: tableHeader,
+            roles: [],
+            form: {
+                uuid: null,
+                name: null,
+                pagesize: 15,
+                pagenum: 1
+            },
+            currentIndex: 0,
+            currentValue: null,
+            dialogTitle: "",
+            dialogVisible: false,
+            post: {
+                name: null,
+                year_supervise_churn_rate: null,
+                year_recert_churn_rate: null,
+                year_satis_churn_rate: null,
+                year_dispatch_site_days: null,
+                year_receiv_collection_rate: null,
+                year_bad_project: null,
+                year_bad_debt_amount: null,
+                indus_project_rate: null,
+                indus_project_count: null,
+                channel_project_rate: null,
+                channel_project_count: null,
+            },
+            rules: {
+                year_supervise_churn_rate: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                year_recert_churn_rate: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                year_satis_churn_rate: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                year_dispatch_site_days: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                year_receiv_collection_rate: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                year_bad_project: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                year_bad_debt_amount: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                indus_project_rate: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                indus_project_count: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                channel_project_rate: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                channel_project_count: [{ type: 'number', required: true, message: '字段不能为空', trigger: 'blur' }],
+                name: [
+                    { type: 'string', required: true, message: '用户名不能为空', trigger: 'blur' },
+                    { min: 1, max: 20, message: '字符串长度在 1 到 20 之间', trigger: 'blur' }
+                ]
+            }
+        }
+    },
+    methods: {
+        fetchData(params) {
+            this.isLoading = true
+            getSummaryList(params).then(res => {
+                this.total = res.count
+                this.list = res.data
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            }).finally(() => {
+                this.isLoading = false
+            })
+        },
+        fetchSelectData() {
+            getSummaryList({ "scope_type": "list" }).then(res => {
+                if (res.code == 200) this.roles = res.data
+            }).catch(err => {
+                // this.$message.error(err.message)
+                console.log(err.message)
+            })
+        },
+        handleSizeChange(e) {
+            this.form.pagesize = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleCurrentChange(e) {
+            this.form.pagenum = e
+            this.fetchData(mapTrim(this.form))
+        },
+        handleEdit(index, row) {
+            this.post = Object.assign(row)
+            this.currentIndex = index
+            this.currentValue = row
+            this.dialogTitle = "编辑"
+            this.dialogVisible = true
+        },
+        handleDelete(index, row) {
+            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
+                confirmButtonText: '确定',
+                callback: action => {
+                    if (action == 'confirm') deleteSummary(row.uuid).then(res => {
+                        console.log(res)
+                        this.total -= 1
+                        this.$delete(this.list, index)
+                        this.$message({ type: 'success', message: `成功删除第${ index }行` })
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                }
+            })
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                let result = true
+                if (valid) {
+                    if (this.dialogTitle === '添加') addSummary(mapTrim(this.post)).then(res => {
+                        console.log(res)
+                        this.$message({ type: 'success', message: '添加成功' })
+                        this.fetchData(mapTrim(this.form))
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                    else if (this.dialogTitle === '编辑') updateSummary(this.currentValue.uuid, this.post).then(res => {
+                        console.log(res)
+                        // this.$set(this.list, this.currentIndex, Object.assign(this.currentValue, tmp))
+                        this.$message({ type: 'success', message: '更新成功' })
+                        this.fetchData(mapTrim(this.form))
+                    }).catch(err => {
+                        this.$message.error(err.message)
+                    })
+                } else {
+                    result = false
+                }
+                this.dialogVisible = false
+                return result
+            })
+        },
+        handleDownload() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            })
+            getSummaryList({ "scope_type": "list", "props": this.tableHeader.map(item => item.prop) })
+                .then((res) => {
+                    exportJsonToExcel({
+                        header: this.tableHeader,
+                        headerLabel: "label",
+                        headerProp: "prop",
+                        jsonData: res.data,
+                        filename: Date.now()
+                    })
+                })
+                .catch((err) => {
+                    this.$message.warning(err.message)
+                }).finally(() => {
+                    loading.close()
+                })
+        },
+        onCheckboxChange(evt) {
+            let header = []
+            evt.forEach(f => {
+                for(let i = 0 ; i < fieldList.length; i++) {
+                    if (fieldList[i].label === f) {
+                        header.push(Object.assign(fieldList[i], { align: "center", width: "150" }))
+                        break
+                    }
+                }
+            })
+            this.tableHeader = header
+        },
+        onAdd() {
+            this.dialogTitle = "添加"
+            this.dialogVisible = true
+        },
+        onSubmit() {
+            this.form.pagenum = 1
+            this.form.pagesize = 15
+            this.fetchData(mapTrim(this.form))
+        },
+        onReset(formName) {
+            this.$refs[formName].resetFields()
+            this.form.pagesize = 15
+            this.form.pagenum = 1
+            this.fetchData(mapTrim(this.form))
+        }
+    },
+    mounted() {},
+    created() {
+        this.fetchData(mapTrim(this.form))
+        this.fetchSelectData()
+    }
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+    & > div.page-wrapper {
+        margin: 10px 0px;
+    }
+}
+</style>

evm_monitor/src/views/system/tool.vue

+<template>
+  <div class="app-container">
+    <el-alert
+      title="将文本转换为类似C的文字，转义换行符，制表符，双引号和反斜杠。"
+      type="success"
+    ></el-alert>
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <h5>请输入要转换的文本：</h5>
+        <el-input
+          type="textarea"
+          :autosize="{ minRows: 30, maxRows: 50 }"
+          resize="none"
+          placeholder="请输入内容"
+          v-model="inputString"
+        ></el-input>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <h5>转换结果：</h5>
+        <el-input
+          type="textarea"
+          :autosize="{ minRows: 30, maxRows: 50 }"
+          resize="none"
+          placeholder="转换结果"
+          v-model="outputString"
+        ></el-input>
+      </el-col>
+    </el-row>
+    <div style="margin: 10px 0px">
+      <el-form>
+        <el-form-item>
+          <el-button type="primary" @click="getConvertString">转换</el-button>
+          <el-button type="success" @click="downloadFile">下载</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+import { getConvertString } from "@/api/app-store";
+
+export default {
+  name: "AppTool",
+  data() {
+    return {
+      inputString: null,
+      outputString: null,
+      filename: "app.js",
+    };
+  },
+  methods: {
+    createFile(content, filename) {
+      const a = document.createElement("a");
+      const blob = new Blob([content]);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = filename;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    },
+    downloadFile() {
+      if (!this.inputString) return this.$message.error("输入内容不能为空");
+
+      this.$prompt("请输入文件名", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputValue: this.filename,
+        inputErrorMessage: "文件名格式不正确",
+      })
+        .then(({ value }) => {
+          if (value) this.filename = value;
+          this.createFile(this.outputString, this.filename);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
+        });
+    },
+    getConvertString() {
+      getConvertString({ string: this.inputString })
+        .then((res) => {
+          this.outputString = res.data;
+          this.$message.success(res.message);
+        })
+        .catch((err) => {
+          this.$message.error(err.message);
+        });
+    },
+  },
+  mounted() {},
+  created() {},
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  & > div.page-wrapper {
+    margin: 10px 0px;
+  }
+}
+</style>

evm_monitor/src/views/system/users.vue

+<template>
+  <div class="app-container">
+    <el-form :inline="true" ref="form" :model="form" size="mini">
+      <el-form-item label="帐号" prop="uuid">
+        <el-select v-model="form.uuid" filterable placeholder="请输入帐号">
+          <el-option
+            v-for="(item, index) in users"
+            :key="index"
+            :label="item.account"
+            :value="item.uuid"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        ><el-button type="primary" @click="onSubmit"
+          >查询</el-button
+        ></el-form-item
+      >
+      <el-form-item
+        ><el-button @click="onReset('form')">重置</el-button></el-form-item
+      >
+      <el-form-item
+        ><el-button type="warning" @click="onAdd">添加</el-button></el-form-item
+      >
+    </el-form>
+    <el-table
+      v-loading="isLoading"
+      element-loading-text="Loading"
+      :data="list"
+      size="mini"
+      border
+      stripe
+      fit
+      highlight-current-row
+    >
+      <el-table-column
+        prop="username"
+        label="用户名"
+        align="center"
+        width="150"
+      ></el-table-column>
+      <el-table-column
+        prop="account"
+        label="账号"
+        align="center"
+        width="120"
+      ></el-table-column>
+      <el-table-column prop="phone" label="手机" width="150"></el-table-column>
+      <el-table-column
+        prop="email"
+        label="邮箱"
+        width="200"
+        :show-overflow-tooltip="true"
+      ></el-table-column>
+      <el-table-column
+        prop="remarks"
+        label="备注"
+        width="240"
+        :show-overflow-tooltip="true"
+      ></el-table-column>
+      <el-table-column
+        prop="create_at"
+        label="创建时间"
+        width="150"
+      ></el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        min-width="180"
+        fixed="right"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="success"
+            @click="handleEdit(scope.$index, scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="page-wrapper">
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page.sync="form.pagenum"
+        background
+        small
+        :page-size="form.pagesize"
+        :pager-count="5"
+        layout="pager, prev, next, total"
+        :total="total"
+      ></el-pagination>
+    </div>
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%">
+      <el-form
+        :model="post"
+        status-icon
+        :rules="rules"
+        ref="post"
+        size="mini"
+        label-width="80px"
+      >
+        <el-form-item label="账号" prop="account">
+          <el-input
+            type="text"
+            v-model="post.account"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input
+            type="password"
+            v-model="post.password"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="角色" prop="password">
+          <el-select v-model="post.role" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用户名" prop="username">
+          <el-input
+            type="text"
+            v-model="post.username"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="联系方式" prop="phone">
+          <el-input
+            type="text"
+            v-model="post.phone"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input
+            type="email"
+            v-model="post.email"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remarks">
+          <el-input
+            type="text"
+            v-model="post.remarks"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="mini" plain @click="submitForm('post')"
+          >提交</el-button
+        >
+        <el-button type="success" size="mini" plain @click="onReset('post')"
+          >重置</el-button
+        >
+        <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getUserList, deleteUser, updateUser, addUser } from "@/api/index";
+import { mapTrim, compareObjectDiff } from "@/utils/index";
+export default {
+  data() {
+    return {
+      data: {},
+      total: 0,
+      list: [],
+      isLoading: false,
+      users: [],
+      options: [
+        { value: "USER", label: "用户" },
+        { value: "ADMIN", label: "管理员" },
+      ],
+      form: {
+        uuid: null,
+        role: null,
+        depot: null,
+        pagesize: 15,
+        pagenum: 1,
+      },
+      dialogTitle: "",
+      dialogVisible: false,
+      currentValue: null,
+      currentIndex: 0,
+      post: {
+        account: null,
+        username: null,
+        phone: null,
+        birthday: null,
+        gender: 1,
+        email: null,
+        hometown: null,
+        entry_time: null,
+        expire_date: null,
+        depot: null,
+        role: null,
+        remarks: "",
+      },
+      rules: {
+        account: [
+          {
+            type: "string",
+            required: true,
+            message: "账号不能为空",
+            trigger: "blur",
+          },
+        ],
+        username: [
+          {
+            type: "string",
+            required: true,
+            message: "用户名不能为空",
+            trigger: "blur",
+          },
+          {
+            min: 1,
+            max: 20,
+            message: "字符串长度在 1 到 20 之间",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          {
+            type: "string",
+            required: true,
+            message: "密码不能为空",
+            trigger: "blur",
+          },
+          {
+            min: 6,
+            max: 18,
+            message: "长度在 6 到 18 个字符",
+            trigger: "blur",
+          },
+        ],
+        phone: [
+          {
+            type: "string",
+            required: false,
+            message: "手机号不能为空",
+            trigger: "blur",
+          },
+          { len: 11, message: "手机号长度为11", trigger: "blur" },
+        ],
+        birthday: [
+          { required: false, message: "出生年月不能为空", trigger: "blur" },
+        ],
+        gender: [
+          {
+            type: "number",
+            required: false,
+            message: "性别不能为空",
+            trigger: "blur",
+          },
+        ],
+        email: [
+          {
+            type: "email",
+            required: false,
+            message: "邮箱不能为空",
+            trigger: "blur",
+          },
+        ],
+        hometown: [
+          {
+            type: "string",
+            required: false,
+            message: "籍贯不能为空",
+            trigger: "blur",
+          },
+        ],
+        role: [
+          {
+            type: "string",
+            required: false,
+            message: "角色不能为空",
+            trigger: "blur",
+          },
+        ],
+        remarks: [
+          {
+            type: "string",
+            required: false,
+            message: "备注不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    fetchData(params) {
+      this.isLoading = true;
+      getUserList(
+        Object.assign(
+          {
+            pagenum: this.form.pagenum,
+            pagesize: this.form.pagesize,
+          },
+          params
+        )
+      )
+        .then((res) => {
+          this.total = res.count;
+          this.list = res.data.map((item) => {
+            item.gender = item.gender == 1 ? "男" : "女";
+            if (item.email == "user@example.com") item.email = null;
+            return item;
+          });
+        })
+        .catch((err) => {
+          this.list = err.data;
+          // this.$message.error(err.message)
+          console.log(err.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+    fetchSelectData() {
+      getUserList({ scope_type: "list" })
+        .then((res) => {
+          if (res.code == 200) this.users = res.data;
+        })
+        .catch((err) => {
+          // this.$message.error(err.message)
+          console.log(err.message);
+        });
+    },
+    handleSizeChange(e) {
+      this.form.pagesize = e;
+      this.fetchData(mapTrim(this.form));
+    },
+    handleCurrentChange(e) {
+      this.form.pagenum = e;
+      this.fetchData(mapTrim(this.form));
+    },
+    handleEdit(index, row) {
+      this.post.account = row.account;
+      this.post.username = row.username;
+      this.post.phone = row.phone;
+      this.post.birthday = row.birthday;
+      this.post.email = row.email;
+      this.post.hometown = row.hometown;
+      this.post.entry_time = row.entry_time;
+      this.post.expire_date = row.expire_date;
+      this.post.role = row.role_id;
+      this.post.depot = row.depot_id;
+      this.post.remarks = row.remarks;
+      this.dialogTitle = "编辑";
+      this.dialogVisible = true;
+      this.currentValue = row;
+      this.currentIndex = index;
+      this.rules.password[0].required = false;
+    },
+    handleDelete(index, row) {
+      this.$alert(
+        "您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。",
+        "删除提醒",
+        {
+          confirmButtonText: "确定",
+          callback: (action) => {
+            if (action == "confirm")
+              deleteUser(row.uuid)
+                .then((res) => {
+                  console.log(res);
+                  this.total -= 1;
+                  this.$delete(this.list, index);
+                  this.$message({
+                    type: "success",
+                    message: `成功删除第${index}行`,
+                  });
+                })
+                .catch((err) => {
+                  this.$message.error(err.message);
+                });
+          },
+        }
+      );
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        let result = true;
+        if (valid) {
+          if (!this.post.username) this.post.username = this.post.account;
+          if (this.dialogTitle === "添加")
+            addUser(mapTrim(this.post))
+              .then((res) => {
+                console.log(res);
+                this.$message({ type: "success", message: "添加成功" });
+                this.fetchData();
+              })
+              .catch((err) => {
+                this.$message.error(err.message);
+              });
+          else if (this.dialogTitle === "编辑")
+            updateUser(
+              this.currentValue.uuid,
+              compareObjectDiff(this.post, this.currentValue)
+            )
+              .then((res) => {
+                console.log(res);
+                this.$message({ type: "success", message: "更新成功" });
+                this.fetchData();
+              })
+              .catch((err) => {
+                this.$message.error(err.message);
+              });
+        } else {
+          result = false;
+        }
+        this.dialogVisible = false;
+        return result;
+      });
+    },
+    onAdd() {
+      this.dialogTitle = "添加";
+      this.dialogVisible = true;
+      this.rules.password[0].required = true;
+    },
+    onSubmit() {
+      this.form.pagenum = 1;
+      this.form.pagesize = 15;
+      this.fetchData(mapTrim(this.form));
+    },
+    onReset(formName) {
+      this.form.account = null;
+      this.form.username = null;
+      this.form.pagesize = 15;
+      this.form.pagenum = 1;
+      this.$refs[formName].resetFields();
+      this.fetchData();
+    },
+  },
+  mounted() {},
+  created() {
+    if (this.$store.getters.role !== "ADMIN")
+      this.$router.push({ path: "/403" });
+
+    this.fetchData();
+    this.fetchSelectData();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  & > div.page-wrapper {
+    margin: 10px 0px;
+  }
+}
+</style>

evm_monitor/vue.config.js

+"use strict";
+const path = require("path");
+
+function resolve(dir) {
+    return path.join(__dirname, dir);
+}
+
+// All configuration item explanations can be find in https://cli.vuejs.org/config/
+module.exports = {
+    /**
+     * You will need to set publicPath if you plan to deploy your site under a sub path,
+     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+     * then publicPath should be set to "/bar/".
+     * In most cases please use '/' !!!
+     * Detail: https://cli.vuejs.org/config/#publicpath
+     */
+    publicPath: process.env.NODE_ENV === 'production'
+    ? '/dist/'
+    : '/',
+    outputDir: "dist",
+    productionSourceMap: false,
+    css: {
+        sourceMap: true,
+    },
+    devServer: {
+        port: 8080,
+        open: true,
+        overlay: {
+            warnings: false,
+            errors: true,
+        },
+        proxy: {
+            // change xxx-api/login => mock/login
+            // detail: https://cli.vuejs.org/config/#devserver-proxy
+            "/api/v1": {
+                target: "http://127.0.0.1:5001/",
+                changeOrigin: true,
+                pathRewrite: {},
+            },
+            "/api/v1/kxpms": {
+                target: "http://192.168.1.106:5000/",
+                changeOrigin: true,
+                pathRewrite: {
+                    "^/online": "/",
+                    // 这里理解成用/api代替target里面的地址，后面组件中我们调用接口时直接用api代替
+                    // 比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
+                },
+            },
+            "/uowap/": {
+                target: "https://web-drcn.hispace.dbankcloud.cn/",
+                changeOrigin: true,
+                pathRewrite: {},
+            },
+        },
+        // after: require("./mock/mock-server.js"),
+    },
+    configureWebpack: (config) => {
+        // debug JS
+        config.devtool = "source-map";
+
+        config.externals = {
+            'gsap': 'gsap'
+        }
+    },
+    chainWebpack(config) {
+        config.plugins.delete("preload"); // TODO: need test
+        config.plugins.delete("prefetch"); // TODO: need test
+
+        // set svg-sprite-loader
+        config.module.rule("svg").exclude.add(resolve("src/icons")).end();
+        config.module
+            .rule("icons")
+            .test(/\.svg$/)
+            .include.add(resolve("src/icons"))
+            .end()
+            .use("svg-sprite-loader")
+            .loader("svg-sprite-loader")
+            .options({
+                symbolId: "icon-[name]",
+            })
+            .end();
+
+        // set preserveWhitespace
+        config.module
+            .rule("vue")
+            .use("vue-loader")
+            .loader("vue-loader")
+            .tap((options) => {
+                options.compilerOptions.preserveWhitespace = true;
+                return options;
+            })
+            .end();
+
+        config.when(process.env.NODE_ENV !== "development", (config) => {
+            config
+                .plugin("ScriptExtHtmlWebpackPlugin")
+                .after("html")
+                .use("script-ext-html-webpack-plugin", [
+                    {
+                        // `runtime` must same as runtimeChunk name. default is `runtime`
+                        inline: /runtime\..*\.js$/,
+                    },
+                ])
+                .end();
+            config.optimization.splitChunks({
+                chunks: "all",
+                cacheGroups: {
+                    libs: {
+                        name: "chunk-libs",
+                        test: /[\\/]node_modules[\\/]/,
+                        priority: 10,
+                        chunks: "initial", // only package third parties that are initially dependent
+                    },
+                    elementUI: {
+                        name: "chunk-elementUI", // split elementUI into a single package
+                        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+                    },
+                    commons: {
+                        name: "chunk-commons",
+                        test: resolve("src/components"), // can customize your rules
+                        minChunks: 3, //  minimum common number
+                        priority: 5,
+                        reuseExistingChunk: true,
+                    },
+                },
+            });
+            config.optimization.runtimeChunk("single");
+        });
+    },
+};

tools/modules/file-manager/main.py

 '''
 Author: your name
 Date: 2021-06-21 14:52:24
-LastEditTime: 2021-06-23 11:51:02
+LastEditTime: 2021-06-28 09:56:10
 LastEditors: Please set LastEditors
 Description: In User Settings Edit
 FilePath: \evm-store\tools\modules\file-manager\main.py
@@ -162,7 +162,7 @@ class FileManager(object):
     @param {*} self
     @return {*}
     '''
-    def tree(self):
+    def tree(self, disk, target_path="/"):
         '''
         {
             basename: "trees"
@@ -171,7 +171,6 @@ class FileManager(object):
             props: {
                 hasSubdirectories: false
             }
-            hasSubdirectories: false
             timestamp: 1544277291
             type: "dir"
         }
@@ -184,41 +183,43 @@ class FileManager(object):
         #     for name in files:
         #         print(os.path.join(root, name), name)
 
-        target_path = "./"
+        if not target_path.startswith("/"):
+            target_path = "/" + target_path
+
+        result = []
+
+        disk_path = os.sep.join([disk_root, disk])
+        if not os.path.exists(disk_path):
+            return result
+        if not os.path.exists(os.path.normpath(os.sep.join([disk_path, target_path]))):
+            return result
+
+        os.chdir(disk_path)
         home_fs = OSFS(os.getcwd())
 
         # 获取当前目录下所有目录、文件、子目录以及子文件的信息。递归获取
         for step in home_fs.walk():
             print("================>")
-            print(step.path, step.dirs, step.files, os.path.basename(step.path))
 
-            result["directories"].append({
+            result.append({
                 "basename": os.path.basename(step.path),
                 "dirname": os.path.dirname(step.path),
                 "path": step.path,
-                "timestamp": int(os.path.getatime(os.sep.join([target_path, step.path]))),
+                "props": {
+                    "hasSubdirectories": True if len(step.files) else False
+                },
+                # "timestamp": int(os.path.getatime(os.sep.join([target_path, step.path]))),
                 "type": "dir"
             })
 
-            for file in step.files:
-                if file.is_file:
-                    fn, ex = os.path.splitext(file.name)
-                    result["files"].append({
-                        "basename": file.name,
-                        "dirname": os.path.dirname(step.path),
-                        "extension": ex,
-                        "filename": fn,
-                        "path": step.path,
-                        "size": os.path.getsize(os.sep.join([target_path, step.path, file.name])),
-                        "timestamp": int(os.path.getmtime(os.sep.join([target_path, step.path, file.name]))),
-                        "type": "file"
-                    })
-                    print(file.name, step.path)
-
             print("<================")
 
         home_fs.close()
 
+        pprint.pprint(result)
+
+        return result
+
 fileManager = FileManager()
 
 if __name__ == "__main__":
@@ -230,8 +231,11 @@ if __name__ == "__main__":
     # def test():
     #     pass
 
-    result = fileManager.initialize()
-    print(result)
+    # result = fileManager.initialize()
+    # print(result)
     
-    result = fileManager.content("uploads", "evueapps/evm")
+    # result = fileManager.content("uploads", "evueapps/evm")
+    # print(result)
+
+    result = fileManager.tree("uploads", "evueapps/evm")
     print(result)
\ No newline at end of file