diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 0000000000..1c125a9172
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd ./frontend
+npm run lint-staged
diff --git a/backend/pom.xml b/backend/pom.xml
index 160cf502c7..e637cc3138 100644
--- a/backend/pom.xml
+++ b/backend/pom.xml
@@ -6,7 +6,7 @@
     <parent>
         <artifactId>dataease-server</artifactId>
         <groupId>io.dataease</groupId>
-        <version>1.15.0</version>
+        <version>1.16.0</version>
     </parent>
 
     <modelVersion>4.0.0</modelVersion>
@@ -205,7 +205,7 @@
         <dependency>
             <groupId>io.dataease</groupId>
             <artifactId>dataease-plugin-interface</artifactId>
-            <version>1.15.0</version>
+            <version>1.16.0</version>
             <exclusions>
                 <exclusion>
                     <artifactId>guava</artifactId>
@@ -216,12 +216,12 @@
         <dependency>
             <groupId>io.dataease</groupId>
             <artifactId>dataease-plugin-view</artifactId>
-            <version>1.15.0</version>
+            <version>1.16.0</version>
         </dependency>
         <dependency>
             <groupId>io.dataease</groupId>
             <artifactId>dataease-plugin-datasource</artifactId>
-            <version>1.15.0</version>
+            <version>1.16.0</version>
         </dependency>
         <!-- kettle及数据源依赖 -->
         <dependency>
diff --git a/backend/src/main/java/io/dataease/dto/datasource/MysqlConfiguration.java b/backend/src/main/java/io/dataease/dto/datasource/MysqlConfiguration.java
index 7c0378ace3..6a22b778f0 100644
--- a/backend/src/main/java/io/dataease/dto/datasource/MysqlConfiguration.java
+++ b/backend/src/main/java/io/dataease/dto/datasource/MysqlConfiguration.java
@@ -5,20 +5,30 @@ import lombok.Getter;
 import lombok.Setter;
 import org.apache.commons.lang3.StringUtils;
 
+import java.util.Arrays;
+import java.util.List;
+
 @Getter
 @Setter
 public class MysqlConfiguration extends JdbcConfiguration {
 
     private String driver = "com.mysql.jdbc.Driver";
     private String extraParams = "characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull";
+    private List<String> illegalParameters = Arrays.asList("autoDeserialize", "queryInterceptors", "statementInterceptors", "detectCustomCollations");
 
     public String getJdbc() {
-        if(StringUtils.isEmpty(extraParams.trim())){
+        if (StringUtils.isEmpty(extraParams.trim())) {
             return "jdbc:mysql://HOSTNAME:PORT/DATABASE"
                     .replace("HOSTNAME", getHost().trim())
                     .replace("PORT", getPort().toString().trim())
                     .replace("DATABASE", getDataBase().trim());
-        }else {
+        } else {
+            for (String illegalParameter : illegalParameters) {
+                if (getExtraParams().contains(illegalParameter)) {
+                    throw new RuntimeException("Illegal parameter: " + illegalParameter);
+                }
+            }
+
             return "jdbc:mysql://HOSTNAME:PORT/DATABASE?EXTRA_PARAMS"
                     .replace("HOSTNAME", getHost().trim())
                     .replace("PORT", getPort().toString().trim())
diff --git a/backend/src/main/java/io/dataease/provider/query/mysql/MysqlQueryProvider.java b/backend/src/main/java/io/dataease/provider/query/mysql/MysqlQueryProvider.java
index 9eb8a81cdd..a93217138c 100644
--- a/backend/src/main/java/io/dataease/provider/query/mysql/MysqlQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/query/mysql/MysqlQueryProvider.java
@@ -781,7 +781,7 @@ public class MysqlQueryProvider extends QueryProvider {
             StringBuilder stringBuilder = new StringBuilder();
             if (f.getDeExtractType() == 4) { // 处理 tinyint
                 stringBuilder.append("concat(`").append(f.getOriginName()).append("`,'') AS ").append(f.getDataeaseName());
-            } if (f.getDeExtractType() == 1 && f.getType().equalsIgnoreCase("YEAR")) { // 处理 YEAR
+            } else if (f.getDeExtractType() == 1 && f.getType().equalsIgnoreCase("YEAR")) { // 处理 YEAR
                 stringBuilder.append("").append(String.format(MySQLConstants.DATE_FORMAT, "CONCAT(" + f.getOriginName() + ",'-01-01')", MySQLConstants.DEFAULT_DATE_FORMAT)).append(" AS ").append(f.getDataeaseName());
             } else {
                 stringBuilder.append("`").append(f.getOriginName()).append("` AS ").append(f.getDataeaseName());
diff --git a/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java b/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
index 0d6b4f7314..b403f1e41f 100644
--- a/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
+++ b/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
@@ -445,6 +445,7 @@ public class ChartDataBuild {
                 } catch (Exception e) {
                     axisChartDataDTO.setValue(new BigDecimal(0));
                 }
+                axisChartDataDTO.setCategory(yAxis.get(j).getName());
                 series.get(j).getData().add(axisChartDataDTO);
             }
         }
@@ -947,7 +948,7 @@ public class ChartDataBuild {
         if (CollectionUtils.isNotEmpty(fieldMap.get("tooltipAxis"))) {
             fieldMap.get("tooltipAxis").forEach(field -> {
                 Integer deType = field.getDeType();
-                if(deType == 2 || deType == 3) {
+                if (deType == 2 || deType == 3) {
                     yfields.add(field);
                 } else {
                     fields.add(field);
@@ -957,7 +958,7 @@ public class ChartDataBuild {
         if (CollectionUtils.isNotEmpty(fieldMap.get("labelAxis"))) {
             fieldMap.get("labelAxis").forEach(field -> {
                 Integer deType = field.getDeType();
-                if(deType == 2 || deType == 3) {
+                if (deType == 2 || deType == 3) {
                     yfields.add(field);
                 } else {
                     fields.add(field);
diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
index 457d498e67..5822c8631b 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -1068,8 +1068,23 @@ public class DataSetTableService {
         CCJSqlParserUtil.parse(sql, parser -> parser.withSquareBracketQuotation(true));
         Statement statement = CCJSqlParserUtil.parse(sql);
         Select select = (Select) statement;
-        PlainSelect plainSelect = ((PlainSelect) select.getSelectBody());
-        // 访问from
+
+        if (select.getSelectBody() instanceof PlainSelect) {
+            return handlePlainSelect((PlainSelect) select.getSelectBody(), select, dsType);
+        }else {
+            String result = "";
+            SetOperationList setOperationList = (SetOperationList) select.getSelectBody();
+            for (int i = 0; i < setOperationList.getSelects().size(); i++) {
+                result = result + handlePlainSelect((PlainSelect) setOperationList.getSelects().get(i), null, dsType);
+                if (i < setOperationList.getSelects().size() - 1) {
+                    result = result + " " + setOperationList.getOperations().get(i).toString() + " ";
+                }
+            }
+            return result;
+        }
+    }
+
+    private String handlePlainSelect(PlainSelect plainSelect, Select statementSelect, String dsType) throws Exception {
         FromItem fromItem = plainSelect.getFromItem();
         if (fromItem instanceof SubSelect) {
             SelectBody selectBody = ((SubSelect) fromItem).getSelectBody();
@@ -1086,7 +1101,7 @@ public class DataSetTableService {
         }
         Expression expr = plainSelect.getWhere();
         if (expr == null) {
-            return handleWith(plainSelect, select, dsType);
+            return handleWith(plainSelect, statementSelect, dsType);
         }
         StringBuilder stringBuilder = new StringBuilder();
         BinaryExpression binaryExpression = null;
@@ -1100,12 +1115,12 @@ public class DataSetTableService {
             expr.accept(getExpressionDeParser(stringBuilder));
         }
         plainSelect.setWhere(CCJSqlParserUtil.parseCondExpression(stringBuilder.toString()));
-        return handleWith(plainSelect, select, dsType);
+        return handleWith(plainSelect, statementSelect, dsType);
     }
 
     private String handleWith(PlainSelect plainSelect, Select select, String dsType) throws Exception {
         StringBuilder builder = new StringBuilder();
-        if (CollectionUtils.isNotEmpty(select.getWithItemsList())) {
+        if (select != null && CollectionUtils.isNotEmpty(select.getWithItemsList())) {
             builder.append("WITH");
             builder.append(" ");
             for (Iterator<WithItem> iter = select.getWithItemsList().iterator(); iter.hasNext(); ) {
diff --git a/frontend/.eslintignore b/frontend/.eslintignore
index e6529fc09c..5cae13b518 100644
--- a/frontend/.eslintignore
+++ b/frontend/.eslintignore
@@ -1,4 +1,7 @@
 build/*.js
 src/assets
+src/styles/deicon/iconfont.js
+src/components/canvas/assets/iconfont/iconfont.js
 public
 dist
+node_modules
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 5de7bd689a..7acc556764 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -14,16 +14,11 @@ module.exports = {
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
-    "vue/max-attributes-per-line": [2, {
-      "singleline": 10,
-      "multiline": {
-        "max": 1,
-        "allowFirstLine": false
-      }
-    }],
     "vue/singleline-html-element-content-newline": "off",
     "vue/multiline-html-element-content-newline": "off",
-    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-mutating-props": "off",
+    "vue/multi-word-component-names": "off",
+    "vue/require-default-prop": "off",
     "vue/no-v-html": "off",
     'accessor-pairs': 2,
     'arrow-spacing': [2, {
diff --git a/frontend/package.json b/frontend/package.json
index 1395aca36c..e028ed0a97 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,18 +1,29 @@
 {
   "name": "dataease",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "dataease front",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "serves": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "dll": "webpack -p --progress --config ./webpack.dll.conf.js",
     "preview": "node build/index.js --preview",
-    "lint": "eslint --ext .js,.vue src",
+    "lint": "eslint --ext .js,.vue src --fix",
+    "lint-staged": "lint-staged",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.js": "eslint --ext .js",
+    "src/**/*.vue": "eslint --ext .vue"
+  },
   "dependencies": {
     "@antv/g2plot": "^2.4.9",
     "@antv/l7-maps": "^2.8.35",
@@ -74,17 +85,24 @@
     "@babel/plugin-proposal-optional-chaining": "^7.18.6",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.6.0",
-    "@vue/cli-plugin-eslint": "^3.9.1",
+    "@vue/cli-plugin-eslint": "^5.0.4",
     "@vue/cli-service": "^3.3.1",
     "add-asset-html-webpack-plugin": "^3.1.3",
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^10.1.0",
     "chalk": "2.4.2",
     "clean-webpack-plugin": "^1.0.1",
     "connect": "3.6.6",
     "copy-webpack-plugin": "^4.6.0",
-    "eslint": "5.15.3",
-    "eslint-plugin-vue": "5.2.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^9.1.0",
     "html-webpack-plugin": "3.2.0",
+    "husky": "^8.0.1",
+    "less": "^3.0.0",
+    "less-loader": "^5.0.0",
+    "lint-staged": "^13.0.1",
     "mockjs": "1.0.1-beta3",
     "runjs": "^4.1.3",
     "sass": "^1.33.0",
diff --git a/frontend/pom.xml b/frontend/pom.xml
index 633db6097d..b4c0df5188 100644
--- a/frontend/pom.xml
+++ b/frontend/pom.xml
@@ -6,7 +6,7 @@
   <parent>
     <artifactId>dataease-server</artifactId>
     <groupId>io.dataease</groupId>
-    <version>1.15.0</version>
+    <version>1.16.0</version>
   </parent>
 
   <modelVersion>4.0.0</modelVersion>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4c83f5c23f..184adffb84 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,11 @@
 <template>
   <div id="app">
-    <router-view/>
-    <plugin-com v-show="false" ref="de-theme" component-name="ThemeSetting"/>
+    <router-view />
+    <plugin-com
+      v-show="false"
+      ref="de-theme"
+      component-name="ThemeSetting"
+    />
   </div>
 </template>
 
@@ -10,7 +14,7 @@ import PluginCom from '@/views/system/plugin/PluginCom'
 
 export default {
   name: 'App',
-  components: {PluginCom},
+  components: { PluginCom },
   beforeCreate() {
 
   }
diff --git a/frontend/src/api/dataset/dataset.js b/frontend/src/api/dataset/dataset.js
index d29956a17a..106337e62b 100644
--- a/frontend/src/api/dataset/dataset.js
+++ b/frontend/src/api/dataset/dataset.js
@@ -246,7 +246,7 @@ export function exportExcel(data) {
 export function dsTable(page, size, id) {
   return request({
     url: '/datasource/getTables/' + id + '/' + page + '/' + size,
-    method: 'post',
+    method: 'post'
   })
 }
 export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, checkCustomDs }
diff --git a/frontend/src/api/panel/panel.js b/frontend/src/api/panel/panel.js
index e7da3e0ff7..3a74f445a8 100644
--- a/frontend/src/api/panel/panel.js
+++ b/frontend/src/api/panel/panel.js
@@ -293,18 +293,17 @@ export function removePanelCache(panelId) {
   })
 }
 
-
 export function findPanelElementInfo(viewId) {
   return request({
-    url: 'panel/group/findPanelElementInfo/'+viewId,
+    url: 'panel/group/findPanelElementInfo/' + viewId,
     method: 'get',
     loading: false
   })
 }
 
-export function export2AppCheck(panelId){
+export function export2AppCheck(panelId) {
   return request({
-    url: 'panel/group/export2AppCheck/'+panelId,
+    url: 'panel/group/export2AppCheck/' + panelId,
     method: 'get',
     loading: false
   })
diff --git a/frontend/src/api/system/datasource.js b/frontend/src/api/system/datasource.js
index 647cb4445b..365d2b7da3 100644
--- a/frontend/src/api/system/datasource.js
+++ b/frontend/src/api/system/datasource.js
@@ -152,7 +152,7 @@ export function getDatasourceDetail(id) {
   return request({
     url: `/datasource/get/${id}`,
     loading: true,
-    method: 'post',
+    method: 'post'
   })
 }
 export default { getDatasourceDetail, dsGrid, addDs, editDs, delDs, validateDs, listDatasource, getSchema }
diff --git a/frontend/src/api/system/engine.js b/frontend/src/api/system/engine.js
index 3a6c9fdcdc..7028190c18 100644
--- a/frontend/src/api/system/engine.js
+++ b/frontend/src/api/system/engine.js
@@ -1,5 +1,4 @@
 import request from '@/utils/request'
-import { validateDs } from '@/api/system/datasource'
 
 export function engineMode() {
   return request({
@@ -35,7 +34,6 @@ export function save(data) {
   })
 }
 
-
 export function dbPreview(data) {
   return request({
     url: '/dataset/table/dbPreview',
@@ -43,4 +41,4 @@ export function dbPreview(data) {
     loading: true,
     data
   })
-}
\ No newline at end of file
+}
diff --git a/frontend/src/api/system/kettle.js b/frontend/src/api/system/kettle.js
index e07517b0d3..d7f01e0a78 100644
--- a/frontend/src/api/system/kettle.js
+++ b/frontend/src/api/system/kettle.js
@@ -1,5 +1,4 @@
 import request from '@/utils/request'
-import { validateDs } from '@/api/system/datasource'
 
 export function validate(data) {
   return request({
diff --git a/frontend/src/assets/DataEase-0.jpg b/frontend/src/assets/DataEase-0.jpg
deleted file mode 100644
index 9e9795332e..0000000000
Binary files a/frontend/src/assets/DataEase-0.jpg and /dev/null differ
diff --git a/frontend/src/assets/DataEase-1.jpg b/frontend/src/assets/DataEase-1.jpg
deleted file mode 100644
index 0cdc743d6b..0000000000
Binary files a/frontend/src/assets/DataEase-1.jpg and /dev/null differ
diff --git a/frontend/src/assets/DataEase-2.jpg b/frontend/src/assets/DataEase-2.jpg
deleted file mode 100644
index 46c9ac5281..0000000000
Binary files a/frontend/src/assets/DataEase-2.jpg and /dev/null differ
diff --git a/frontend/src/assets/DataEase-3.jpg b/frontend/src/assets/DataEase-3.jpg
deleted file mode 100644
index 5a1078e153..0000000000
Binary files a/frontend/src/assets/DataEase-3.jpg and /dev/null differ
diff --git a/frontend/src/assets/DataEase-4.jpg b/frontend/src/assets/DataEase-4.jpg
deleted file mode 100644
index 55163d03f9..0000000000
Binary files a/frontend/src/assets/DataEase-4.jpg and /dev/null differ
diff --git a/frontend/src/assets/DataEase-5.jpg b/frontend/src/assets/DataEase-5.jpg
deleted file mode 100644
index 1fe04aa014..0000000000
Binary files a/frontend/src/assets/DataEase-5.jpg and /dev/null differ
diff --git a/frontend/src/assets/blue_1.svg b/frontend/src/assets/blue_1.svg
deleted file mode 100644
index 15cfcc7946..0000000000
--- a/frontend/src/assets/blue_1.svg
+++ /dev/null
@@ -1,151 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none meet"
-	 viewBox="0 0 454.2 286.6" style="enable-background:new 0 0 454.2 286.6;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#0B101E;}
-	.st1{opacity:0.1;fill:#006CE2;}
-	.st2{fill:none;stroke:#31ECFF;stroke-width:0.6677;stroke-miterlimit:10;}
-	.st3{fill:#31ECFF;}
-	.st4{opacity:0.75;fill:#31ECFF;}
-	.st5{opacity:0.5;fill:#31ECFF;}
-	.st6{opacity:0.25;fill:#31ECFF;}
-	.st7{opacity:0.25;fill:#006CE2;}
-</style>
-<rect x="2743.8" y="-1694.6" class="st0" width="1920" height="1080"/>
-<g>
-	<polygon class="st1" points="63,-472.9 -388.8,-472.9 -388.8,-756.4 -353.3,-756.4 -312.8,-712.4 63,-712.4 	"/>
-	<polygon class="st1" points="-345.9,-756.4 -309,-717 63,-717 63,-756.4 	"/>
-	<polygon class="st2" points="63,-472.9 -388.8,-472.9 -388.8,-756.4 -353.3,-756.4 -312.8,-712.4 63,-712.4 	"/>
-	<polygon class="st2" points="-345.9,-756.4 -309,-717 63,-717 63,-756.4 	"/>
-	<g>
-		<rect x="52.2" y="-474.1" class="st3" width="12" height="2.4"/>
-		
-			<rect x="57" y="-478.9" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -414.7073 -540.6516)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-394.8" y="-478.9" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -866.4924 -88.8664)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-390" y="-474.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -768.0378 -945.7705)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="56.6" y="-752.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 814.0578 -688.874)" class="st3" width="12" height="2.4"/>
-		<rect x="51.8" y="-757.4" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-389.7" y="-757.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -767.3794 -1512.5201)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-394.5" y="-752.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 362.9821 -1139.9497)" class="st3" width="12" height="2.4"/>
-	</g>
-</g>
-<g>
-	<polygon class="st1" points="84.6,-1179.5 -367.2,-1179.5 -367.2,-1447.9 -352.5,-1463 84.6,-1463 	"/>
-	<polygon class="st2" points="84.6,-1179.5 -367.2,-1179.5 -367.2,-1447.9 -352.5,-1463 84.6,-1463 	"/>
-	<polyline class="st2" points="-367.2,-1419 63.9,-1419 84.6,-1434.2 	"/>
-	<polygon class="st3" points="20,-1421.6 12,-1421.6 24.3,-1431.5 32.3,-1431.5 	"/>
-	<polygon class="st4" points="34.1,-1421.6 26.1,-1421.6 38.4,-1431.5 46.4,-1431.5 	"/>
-	<polygon class="st5" points="48.2,-1421.6 40.2,-1421.6 52.5,-1431.5 60.5,-1431.5 	"/>
-	<polygon class="st6" points="62.3,-1421.6 54.3,-1421.6 66.6,-1431.5 74.6,-1431.5 	"/>
-	<polygon class="st3" points="-367.5,-1450.9 -367.5,-1463 -355.9,-1463 	"/>
-</g>
-<g>
-	<polygon class="st1" points="15.6,-844.6 -436.1,-844.6 -436.1,-1128.1 -110.9,-1128.1 -88.4,-1111 15.6,-1111 	"/>
-	<polygon class="st2" points="15.6,-844.6 -436.1,-844.6 -436.1,-1128.1 -110.9,-1128.1 -88.4,-1111 15.6,-1111 	"/>
-	<g>
-		<rect x="4.9" y="-845.7" class="st3" width="12" height="2.4"/>
-		
-			<rect x="9.7" y="-850.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -833.7073 -864.9849)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-442.1" y="-850.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -1285.4924 -413.1997)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-437.3" y="-845.7" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -862.7045 -1689.1039)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-437" y="-1129.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -862.0461 -2255.8535)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-441.8" y="-1124.3" transform="matrix(6.123234e-17 -1 1 6.123234e-17 687.3154 -1558.9497)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="-54.9,-1114.3 -76.3,-1114.3 -89.6,-1124.2 -68.2,-1124.2 	"/>
-	<polygon class="st4" points="-28.8,-1114.3 -47.5,-1114.3 -60.8,-1124.2 -42.1,-1124.2 	"/>
-	<polygon class="st5" points="-5.4,-1114.3 -21.4,-1114.3 -34.7,-1124.2 -18.7,-1124.2 	"/>
-	<polygon class="st6" points="15.4,-1114.3 2,-1114.3 -11.2,-1124.2 15.4,-1124.2 	"/>
-	<rect x="-436.1" y="-1081.9" class="st3" width="451.8" height="1.8"/>
-</g>
-<g>
-	<polygon class="st1" points="2182.7,-1069.2 1731,-1069.2 1731,-1337.6 1745.7,-1352.8 2182.7,-1352.8 	"/>
-	<polygon class="st2" points="2182.7,-1069.2 1731,-1069.2 1731,-1337.6 1745.7,-1352.8 2182.7,-1352.8 	"/>
-	<polyline class="st2" points="1731,-1308.7 2162.1,-1308.7 2182.7,-1323.9 	"/>
-	<polygon class="st3" points="2118.2,-1311.3 2110.2,-1311.3 2122.5,-1321.3 2130.5,-1321.3 	"/>
-	<polygon class="st4" points="2132.3,-1311.3 2124.3,-1311.3 2136.6,-1321.3 2144.6,-1321.3 	"/>
-	<polygon class="st5" points="2146.4,-1311.3 2138.4,-1311.3 2150.7,-1321.3 2158.7,-1321.3 	"/>
-	<polygon class="st6" points="2160.5,-1311.3 2152.4,-1311.3 2164.8,-1321.3 2172.8,-1321.3 	"/>
-	<polygon class="st3" points="1730.7,-1340.6 1730.7,-1352.8 1742.3,-1352.8 	"/>
-</g>
-<g>
-	<polygon class="st1" points="2182.6,-750.6 1730.8,-750.6 1730.8,-1034.2 2056,-1034.2 2078.6,-1017.1 2182.6,-1017.1 	"/>
-	<polygon class="st2" points="2182.6,-750.6 1730.8,-750.6 1730.8,-1034.2 2056,-1034.2 2078.6,-1017.1 2182.6,-1017.1 	"/>
-	<g>
-		<rect x="2171.8" y="-751.8" class="st3" width="12" height="2.4"/>
-		
-			<rect x="2176.6" y="-756.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 1427.1624 -2938.0291)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="1724.8" y="-756.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 975.3772 -2486.2439)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1729.6" y="-751.8" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3471.2095 -1501.2784)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="1730" y="-1035.2" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3471.8679 -2068.0281)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1725.2" y="-1030.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 2760.3596 701.9199)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="2112,-1020.3 2090.6,-1020.3 2077.4,-1030.3 2098.7,-1030.3 	"/>
-	<polygon class="st4" points="2138.1,-1020.3 2119.4,-1020.3 2106.2,-1030.3 2124.9,-1030.3 	"/>
-	<polygon class="st5" points="2161.6,-1020.3 2145.5,-1020.3 2132.3,-1030.3 2148.3,-1030.3 	"/>
-	<polygon class="st6" points="2182.3,-1020.3 2169,-1020.3 2155.7,-1030.3 2182.3,-1030.3 	"/>
-	<rect x="1730.8" y="-988" class="st3" width="451.8" height="1.8"/>
-</g>
-<g>
-	<polygon class="st1" points="1682.5,-750.7 850.3,-750.7 850.3,-1034.3 1555.9,-1034.3 1578.5,-1017.2 1682.5,-1017.2 	"/>
-	<polygon class="st2" points="1682.5,-750.7 850.3,-750.7 850.3,-1034.3 1555.9,-1034.3 1578.5,-1017.2 1682.5,-1017.2 	"/>
-	<g>
-		<rect x="1671.7" y="-751.9" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1676.5" y="-756.7" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 926.9837 -2438.0081)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="844.3" y="-756.7" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 94.7936 -1605.818)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="849.1" y="-751.9" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1710.2 -1501.436)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="849.4" y="-1035.3" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1710.8583 -2068.1858)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="844.7" y="-1030.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 1879.9337 -178.6637)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="1611.9,-1020.4 1590.5,-1020.4 1577.3,-1030.4 1598.6,-1030.4 	"/>
-	<polygon class="st4" points="1638,-1020.4 1619.3,-1020.4 1606.1,-1030.4 1624.8,-1030.4 	"/>
-	<polygon class="st5" points="1661.5,-1020.4 1645.4,-1020.4 1632.2,-1030.4 1648.2,-1030.4 	"/>
-	<polygon class="st6" points="1682.2,-1020.4 1668.9,-1020.4 1655.6,-1030.4 1682.2,-1030.4 	"/>
-	<rect x="850.2" y="-988.1" class="st3" width="832.3" height="1.8"/>
-</g>
-<g>
-	<polygon class="st1" points="444.4,285.1 2.4,285.1 2.4,11.8 12.1,1.6 454.2,1.6 454.2,275 	"/>
-	<polygon class="st3" points="414.3,3.2 194.9,3.2 191.7,0 417.3,0 	"/>
-	<polyline class="st2" points="454.2,50 454.2,1.6 418.8,1.6 415.3,5.3 193.8,5.3 190.3,1.6 12.4,1.6 2.4,11.9 2.4,18.5 	"/>
-	
-		<rect x="25.5" y="283.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 314.9124 570.0419)" class="st3" width="263.9" height="3.2"/>
-	<polyline class="st2" points="2.4,249.9 2.4,285 444.2,285 454.2,274.7 454.2,268.2 	"/>
-	<polygon class="st7" points="454.2,50 454.2,1.6 418.8,1.6 415.3,5.3 193.8,5.3 190.2,1.6 12.1,1.6 2.4,11.8 2.4,50 	"/>
-</g>
-</svg>
diff --git a/frontend/src/components/AssistButton/ColorButton.vue b/frontend/src/components/AssistButton/ColorButton.vue
index c4273ce710..1758fa822d 100644
--- a/frontend/src/components/AssistButton/ColorButton.vue
+++ b/frontend/src/components/AssistButton/ColorButton.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="color-button-main">
-    <div class="color-button-outer" :class="active?'color-button-active':''" @click.stop="colorButtonClick">
-      <div class="color-button-inner" :class="'color-button-inner-'+colorType" />
+    <div
+      class="color-button-outer"
+      :class="active?'color-button-active':''"
+      @click.stop="colorButtonClick"
+    >
+      <div
+        class="color-button-inner"
+        :class="'color-button-inner-'+colorType"
+      />
     </div>
     <span class="text-area">
       <slot />
diff --git a/frontend/src/components/AsyncSoltComponent/index.vue b/frontend/src/components/AsyncSoltComponent/index.vue
index 891e1a6900..4db8a5468c 100644
--- a/frontend/src/components/AsyncSoltComponent/index.vue
+++ b/frontend/src/components/AsyncSoltComponent/index.vue
@@ -5,7 +5,7 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <template v-slot:default>
+    <template #default>
       <slot name="default" />
     </template>
   </component>
diff --git a/frontend/src/components/Breadcrumb/index.vue b/frontend/src/components/Breadcrumb/index.vue
index 6e0a823584..c920645c89 100644
--- a/frontend/src/components/Breadcrumb/index.vue
+++ b/frontend/src/components/Breadcrumb/index.vue
@@ -1,10 +1,22 @@
 <template>
-  <el-breadcrumb class="app-breadcrumb" separator="/">
+  <el-breadcrumb
+    class="app-breadcrumb"
+    separator="/"
+  >
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+      <el-breadcrumb-item
+        v-for="(item,index) in levelList"
+        :key="item.path"
+      >
         <span v-if="index === 0">当前位置：</span>
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+        <span
+          v-if="item.redirect==='noRedirect'||index==levelList.length-1"
+          class="no-redirect"
+        >{{ item.meta.title }}</span>
+        <a
+          v-else
+          @click.prevent="handleLink(item)"
+        >{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
diff --git a/frontend/src/components/DeDrag/MoveInShadow.vue b/frontend/src/components/DeDrag/MoveInShadow.vue
index 83be41af0b..68a8317fe9 100644
--- a/frontend/src/components/DeDrag/MoveInShadow.vue
+++ b/frontend/src/components/DeDrag/MoveInShadow.vue
@@ -1,5 +1,8 @@
 <template>
-  <div style="z-index:-1" :style="style" />
+  <div
+    style="z-index:-1"
+    :style="style"
+  />
 </template>
 
 <script>
diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index ebe445291d..ffd15ea2ae 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -44,7 +44,11 @@
         @boardSet="boardSet"
         @fieldSelect="fieldSelect"
       />
-      <mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
+      <mobile-check-bar
+        v-if="mobileCheckBarShow"
+        :element="element"
+        @amRemoveItem="amRemoveItem"
+      />
       <div
         v-if="resizing"
         style="transform: translateZ(11px);position: absolute; z-index: 3"
@@ -60,8 +64,17 @@
       >
         <slot :name="handlei" />
       </div>
-      <div :id="componentCanvasId" :style="mainSlotStyleInner" class="main-background">
-        <svg-icon v-if="svgInnerEnable" :style="{'color':this.element.commonBackground.innerImageColor}" class="svg-background" :icon-class="mainSlotSvgInner" />
+      <div
+        :id="componentCanvasId"
+        :style="mainSlotStyleInner"
+        class="main-background"
+      >
+        <svg-icon
+          v-if="svgInnerEnable"
+          :style="{'color':element.commonBackground.innerImageColor}"
+          class="svg-background"
+          :icon-class="mainSlotSvgInner"
+        />
         <slot />
       </div>
     </div>
@@ -81,7 +94,7 @@ import { mapState } from 'vuex'
 import EditBar from '@/components/canvas/components/Editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   replace: true,
@@ -819,7 +832,7 @@ export default {
       this.mobileLayoutStatus && this.$store.commit('topComponent')
       eventsFor = events.mouse
       this.elementDown(e)
-      this.$nextTick(()=>{
+      this.$nextTick(() => {
         this.$store.commit('setCurComponent', { component: this.element, index: this.index })
       })
     },
diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue
index 787d2d586c..9550c94f2f 100644
--- a/frontend/src/components/DeDrag/shadow.vue
+++ b/frontend/src/components/DeDrag/shadow.vue
@@ -1,12 +1,16 @@
 <template>
-  <div class="main-shadow" style="z-index:-1" :style="styleInfo" />
+  <div
+    class="main-shadow"
+    style="z-index:-1"
+    :style="styleInfo"
+  />
 </template>
 
 <script>
 import { mapState } from 'vuex'
 export default {
   replace: true,
-  name: 'Shadow',
+  name: 'ShadowDe',
   computed: {
     styleInfo() {
       let left = 0
diff --git a/frontend/src/components/DeViewSelect/index.bak.vue b/frontend/src/components/DeViewSelect/index.bak.vue
index 40160056f6..93c850e5c6 100644
--- a/frontend/src/components/DeViewSelect/index.bak.vue
+++ b/frontend/src/components/DeViewSelect/index.bak.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="el-view-select" :class="selectClass">
+  <div
+    class="el-view-select"
+    :class="selectClass"
+  >
     <el-select
       ref="select"
       v-model="innerValues"
@@ -20,8 +23,22 @@
       />
     </el-select>
 
-    <el-popover ref="popover" v-model="visible" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
-      <el-scrollbar v-if="viewLoaded" tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
+    <el-popover
+      ref="popover"
+      v-model="visible"
+      :placement="placement"
+      :transition="transition"
+      :popper-class="popperClass"
+      :width="width"
+      trigger="click"
+    >
+      <el-scrollbar
+        v-if="viewLoaded"
+        tag="div"
+        wrap-class="el-select-dropdown__wrap"
+        view-class="el-select-dropdown__list"
+        class="is-empty"
+      >
         <div :style="{'height': panelHeight + 'px'}">
           <Preview
             :component-data="componentData"
@@ -32,7 +49,12 @@
         </div>
 
       </el-scrollbar>
-      <el-empty v-else style="height: 150px;" :image-size="120" description="" />
+      <el-empty
+        v-else
+        style="height: 150px;"
+        :image-size="120"
+        description=""
+      />
 
     </el-popover>
   </div>
diff --git a/frontend/src/components/DeViewSelect/index.vue b/frontend/src/components/DeViewSelect/index.vue
index c7b2949346..ad736c0571 100644
--- a/frontend/src/components/DeViewSelect/index.vue
+++ b/frontend/src/components/DeViewSelect/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="el-view-select" :class="selectClass">
+  <div
+    class="el-view-select"
+    :class="selectClass"
+  >
     <el-select
       ref="select"
       v-model="innerValues"
@@ -25,7 +28,11 @@
       class="dialog-css"
       :fullscreen="true"
     >
-      <div v-if="dialogShow && viewLoaded" ref="contaninerDiv" :style="{'height': panelHeight + 'px'}">
+      <div
+        v-if="dialogShow && viewLoaded"
+        ref="contaninerDiv"
+        :style="{'height': panelHeight + 'px'}"
+      >
         <Preview
           :component-data="componentData"
           :canvas-style-data="canvasStyleData"
@@ -34,13 +41,23 @@
         />
       </div>
 
-      <div slot="title" class="dialog-footer title-text">
+      <div
+        slot="title"
+        class="dialog-footer title-text"
+      >
         <span style="font-size: 14px;">
           选择视图
         </span>
         <span style="float: right;">
-          <el-button type="primary" size="mini" @click="sureDialog()">{{ $t('commons.confirm') }}</el-button>
-          <el-button size="mini" @click="cancelDialog()">{{ $t('commons.cancel') }}</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="sureDialog()"
+          >{{ $t('commons.confirm') }}</el-button>
+          <el-button
+            size="mini"
+            @click="cancelDialog()"
+          >{{ $t('commons.cancel') }}</el-button>
         </span>
       </div>
     </el-dialog>
diff --git a/frontend/src/components/Doc/index.vue b/frontend/src/components/Doc/index.vue
index d7384461d3..f39e68135f 100644
--- a/frontend/src/components/Doc/index.vue
+++ b/frontend/src/components/Doc/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <svg-icon icon-class="doc" @click="click" />
+    <svg-icon
+      icon-class="doc"
+      @click="click"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/components/DragItem/index.vue b/frontend/src/components/DragItem/index.vue
index e8afd23872..ec326d9737 100644
--- a/frontend/src/components/DragItem/index.vue
+++ b/frontend/src/components/DragItem/index.vue
@@ -1,12 +1,23 @@
 <template>
   <span>
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
+    <el-dropdown
+      trigger="click"
+      size="mini"
+      @command="clickItem"
+    >
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis">
+        <el-tag
+          size="small"
+          class="item-axis"
+        >
           {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item v-if="isSortWidget" :disabled="disabledSort" :command="beforeClickItem('none')">
+          <el-dropdown-item
+            v-if="isSortWidget"
+            :disabled="disabledSort"
+            :command="beforeClickItem('none')"
+          >
             <span
               class="de-sort-menu"
               :class="!disabledSort && (!sortNode || sortNode.sort === 'none') ? 'de-active-li': ''"
@@ -14,7 +25,11 @@
               $t('chart.none')
             }}</span>
           </el-dropdown-item>
-          <el-dropdown-item v-if="isSortWidget" :disabled="disabledSort" :command="beforeClickItem('asc')">
+          <el-dropdown-item
+            v-if="isSortWidget"
+            :disabled="disabledSort"
+            :command="beforeClickItem('asc')"
+          >
             <span
               v-popover:popoverasc
               class="el-dropdown-link inner-dropdown-menu de-sort-menu"
@@ -47,7 +62,11 @@
               </ul>
             </el-popover>
           </el-dropdown-item>
-          <el-dropdown-item v-if="isSortWidget" :disabled="disabledSort" :command="beforeClickItem('desc')">
+          <el-dropdown-item
+            v-if="isSortWidget"
+            :disabled="disabledSort"
+            :command="beforeClickItem('desc')"
+          >
             <span
               v-popover:popoverdesc
               class="el-dropdown-link inner-dropdown-menu de-sort-menu"
@@ -80,7 +99,11 @@
               </ul>
             </el-popover>
           </el-dropdown-item>
-          <el-dropdown-item :divided="isSortWidget" icon="el-icon-delete" :command="beforeClickItem('remove')">
+          <el-dropdown-item
+            :divided="isSortWidget"
+            icon="el-icon-delete"
+            :command="beforeClickItem('remove')"
+          >
             <span class="de-delete-field">{{ $t('chart.delete') }}</span>
           </el-dropdown-item>
           <slot />
diff --git a/frontend/src/components/ElTreeSelect/index.vue b/frontend/src/components/ElTreeSelect/index.vue
index 21f249fe73..184a769a03 100644
--- a/frontend/src/components/ElTreeSelect/index.vue
+++ b/frontend/src/components/ElTreeSelect/index.vue
@@ -1,6 +1,9 @@
 
 <template>
-  <div class="el-tree-select" :class="selectClass">
+  <div
+    class="el-tree-select"
+    :class="selectClass"
+  >
     <el-select
       :id="'el-tree-select-' + guid"
       ref="select"
@@ -20,12 +23,45 @@
       @clear="_selectClearFun"
       @focus="_popoverShowFun"
     />
-    <el-popover ref="popover" v-model="visible" :append-to-body="popperAppendToBody" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click" @show="showPopover">
-      <el-input v-if="treeParams.filterable" ref="input" v-model="keywords" size="mini" class="input-with-select mb10">
-        <el-button slot="append" icon="el-icon-search" @click="_searchFun" />
+    <el-popover
+      ref="popover"
+      v-model="visible"
+      :append-to-body="popperAppendToBody"
+      :placement="placement"
+      :transition="transition"
+      :popper-class="popperClass"
+      :width="width"
+      trigger="click"
+      @show="showPopover"
+    >
+      <el-input
+        v-if="treeParams.filterable"
+        ref="input"
+        v-model="keywords"
+        size="mini"
+        class="input-with-select mb10"
+      >
+        <el-button
+          slot="append"
+          icon="el-icon-search"
+          @click="_searchFun"
+        />
       </el-input>
-      <p v-if="selectParams.multiple" class="tree-select-all"><el-checkbox v-model="selectAll" v-customStyle="customStyle" :indeterminate="isIndeterminate" @change="selectAllChane">{{ $t('dataset.check_all') }}</el-checkbox></p>
-      <el-scrollbar tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
+      <p
+        v-if="selectParams.multiple"
+        class="tree-select-all"
+      ><el-checkbox
+        v-model="selectAll"
+        v-customStyle="customStyle"
+        :indeterminate="isIndeterminate"
+        @change="selectAllChane"
+      >{{ $t('dataset.check_all') }}</el-checkbox></p>
+      <el-scrollbar
+        tag="div"
+        wrap-class="el-select-dropdown__wrap"
+        view-class="el-select-dropdown__list"
+        class="is-empty"
+      >
         <el-tree
           v-show="data.length > 0"
           ref="tree"
@@ -42,7 +78,10 @@
           @check="_treeCheckFun"
           @check-change="_treeCheckChange"
         />
-        <div v-if="data.length === 0" class="no-data">暂无数据</div>
+        <div
+          v-if="data.length === 0"
+          class="no-data"
+        >暂无数据</div>
       </el-scrollbar>
     </el-popover>
   </div>
diff --git a/frontend/src/components/ElVisualSelect/index.vue b/frontend/src/components/ElVisualSelect/index.vue
index 4519b8f42c..9d2f9d2484 100644
--- a/frontend/src/components/ElVisualSelect/index.vue
+++ b/frontend/src/components/ElVisualSelect/index.vue
@@ -12,8 +12,22 @@
     @change="visualChange"
     @visible-change="popChange"
   >
-    <p v-if="startIndex === 0 && $attrs.multiple" class="select-all"><el-checkbox v-model="selectAll" v-customStyle="customStyle" :indeterminate="isIndeterminate" @change="selectAllChane">{{ $t('dataset.check_all') }}</el-checkbox></p>
-    <el-option v-for="item in options" :key="item.id" :label="item.text" :value="item.id" :class="setSelect(item.id)" />
+    <p
+      v-if="startIndex === 0 && $attrs.multiple"
+      class="select-all"
+    ><el-checkbox
+      v-model="selectAll"
+      v-customStyle="customStyle"
+      :indeterminate="isIndeterminate"
+      @change="selectAllChane"
+    >{{ $t('dataset.check_all') }}</el-checkbox></p>
+    <el-option
+      v-for="item in options"
+      :key="item.id"
+      :label="item.text"
+      :value="item.id"
+      :class="setSelect(item.id)"
+    />
   </el-select>
 </template>
 
diff --git a/frontend/src/components/GridButton/index.vue b/frontend/src/components/GridButton/index.vue
index 34d1521433..729d9e47a4 100644
--- a/frontend/src/components/GridButton/index.vue
+++ b/frontend/src/components/GridButton/index.vue
@@ -1,6 +1,12 @@
 <template>
   <el-tooltip :content="tooltip">
-    <el-button circle class="fu-search-bar-button" :type="type" :size="size" @click="click">
+    <el-button
+      circle
+      class="fu-search-bar-button"
+      :type="type"
+      :size="size"
+      @click="click"
+    >
       <slot>
         <i :class="icon" />
       </slot>
diff --git a/frontend/src/components/Hamburger/index.vue b/frontend/src/components/Hamburger/index.vue
index 368b002154..2fe8862c13 100644
--- a/frontend/src/components/Hamburger/index.vue
+++ b/frontend/src/components/Hamburger/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
+  <div
+    style="padding: 0 15px;"
+    @click="toggleClick"
+  >
     <svg
       :class="{'is-active':isActive}"
       class="hamburger"
diff --git a/frontend/src/components/IconSelect/index.vue b/frontend/src/components/IconSelect/index.vue
index b0ec9fa1a4..29055d477f 100644
--- a/frontend/src/components/IconSelect/index.vue
+++ b/frontend/src/components/IconSelect/index.vue
@@ -1,12 +1,29 @@
 <!-- @author zhengjie -->
 <template>
   <div class="icon-body">
-    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
-      <i slot="suffix" class="el-icon-search el-input__icon" />
+    <el-input
+      v-model="name"
+      style="position: relative;"
+      clearable
+      placeholder="请输入图标名称"
+      @clear="filterIcons"
+      @input.native="filterIcons"
+    >
+      <i
+        slot="suffix"
+        class="el-icon-search el-input__icon"
+      />
     </el-input>
     <div class="icon-list">
-      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
-        <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
+      <div
+        v-for="(item, index) in iconList"
+        :key="index"
+        @click="selectedIcon(item)"
+      >
+        <svg-icon
+          :icon-class="item"
+          style="height: 30px;width: 16px;"
+        />
         <span>{{ item }}</span>
       </div>
     </div>
diff --git a/frontend/src/components/LangSelect/index.vue b/frontend/src/components/LangSelect/index.vue
index 5f7615d761..e8227de8dc 100644
--- a/frontend/src/components/LangSelect/index.vue
+++ b/frontend/src/components/LangSelect/index.vue
@@ -1,16 +1,34 @@
 <template>
-  <el-dropdown style="display: flex;align-items: center;" trigger="click" class="international" @command="handleSetLanguage">
+  <el-dropdown
+    style="display: flex;align-items: center;"
+    trigger="click"
+    class="international"
+    @command="handleSetLanguage"
+  >
     <div>
-      <svg-icon style="color: var(--TextPrimary)" class-name="international-icon" icon-class="language" />
+      <svg-icon
+        style="color: var(--TextPrimary)"
+        class-name="international-icon"
+        icon-class="language"
+      />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item :disabled="language==='zh_CN'" command="zh_CN">
+      <el-dropdown-item
+        :disabled="language==='zh_CN'"
+        command="zh_CN"
+      >
         简体中文
       </el-dropdown-item>
-      <el-dropdown-item :disabled="language==='zh_TW'" command="zh_TW">
+      <el-dropdown-item
+        :disabled="language==='zh_TW'"
+        command="zh_TW"
+      >
         繁体中文
       </el-dropdown-item>
-      <el-dropdown-item :disabled="language==='en_US'" command="en_US">
+      <el-dropdown-item
+        :disabled="language==='en_US'"
+        command="en_US"
+      >
         English
       </el-dropdown-item>
       <!-- <el-dropdown-item :disabled="language==='es'" command="es">
diff --git a/frontend/src/components/Notification/index.vue b/frontend/src/components/Notification/index.vue
index 61eb3c5528..b09bccb536 100644
--- a/frontend/src/components/Notification/index.vue
+++ b/frontend/src/components/Notification/index.vue
@@ -13,8 +13,15 @@
         <div style="float: left;font-size:16px;font-weight:bold;">
           <span>{{ $t('webmsg.web_msg') }}</span>
         </div>
-        <div v-if="showSetting" style="float: right;">
-          <a href="#" style="text-detext-decoratext-decoration:none;cursor:point;" @click="msgSetting">消息规则</a>
+        <div
+          v-if="showSetting"
+          style="float: right;"
+        >
+          <a
+            href="#"
+            style="text-detext-decoratext-decoration:none;cursor:point;"
+            @click="msgSetting"
+          >消息规则</a>
         </div>
 
       </div>
@@ -26,10 +33,16 @@
         :highlight-current-row="true"
         style="width: 100%"
       >
-        <el-table-column prop="content" :label="$t('commons.name')">
+        <el-table-column
+          prop="content"
+          :label="$t('commons.name')"
+        >
           <template slot-scope="scope">
             <div class="start-item">
-              <div class="filter-db-row star-item-content" @click="showDetail(scope.row)">
+              <div
+                class="filter-db-row star-item-content"
+                @click="showDetail(scope.row)"
+              >
                 <!-- <svg-icon icon-class="panel" class="ds-icon-scene" /> -->
                 <div class="title-div"><span>【{{ getTypeName(scope.row.typeId) }}】&nbsp;&nbsp;{{ scope.row.content }}</span></div>
                 <div class="title-div"><span>{{ scope.row.createTime | timestampFormatDate }}</span></div>
@@ -41,15 +54,29 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="msg-foot-class" @click="showMore">
-        <el-row style="padding: 5px 0;margin-bottom: -5px;cursor:point;" @click="showMore">
+      <div
+        class="msg-foot-class"
+        @click="showMore"
+      >
+        <el-row
+          style="padding: 5px 0;margin-bottom: -5px;cursor:point;"
+          @click="showMore"
+        >
           <span>{{ $t('webmsg.show_more') }}</span>
         </el-row>
       </div>
     </div>
     <div slot="reference">
-      <el-badge :value="visible && !loading ? paginationConfig.total : count" :hidden="!count && !paginationConfig.total" :max="99" class="item">
-        <svg-icon class-name="notification" icon-class="notification" />
+      <el-badge
+        :value="visible && !loading ? paginationConfig.total : count"
+        :hidden="!count && !paginationConfig.total"
+        :max="99"
+        class="item"
+      >
+        <svg-icon
+          class-name="notification"
+          icon-class="notification"
+        />
       </el-badge>
 
     </div></el-popover>
diff --git a/frontend/src/components/Pagination/index.vue b/frontend/src/components/Pagination/index.vue
index ddbfb65d1f..4e2749b3c2 100644
--- a/frontend/src/components/Pagination/index.vue
+++ b/frontend/src/components/Pagination/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
+  <div
+    :class="{'hidden':hidden}"
+    class="pagination-container"
+  >
     <el-pagination
       :background="background"
       :current-page.sync="currentPage"
diff --git a/frontend/src/components/Screenfull/index.vue b/frontend/src/components/Screenfull/index.vue
index 260c90de51..fc970653ca 100644
--- a/frontend/src/components/Screenfull/index.vue
+++ b/frontend/src/components/Screenfull/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
+    <svg-icon
+      :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'"
+      @click="click"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/components/SizeSelect/index.vue b/frontend/src/components/SizeSelect/index.vue
index 380ebc7777..dae9876809 100644
--- a/frontend/src/components/SizeSelect/index.vue
+++ b/frontend/src/components/SizeSelect/index.vue
@@ -1,10 +1,21 @@
 <template>
-  <el-dropdown trigger="click" @command="handleSetSize">
+  <el-dropdown
+    trigger="click"
+    @command="handleSetSize"
+  >
     <div>
-      <svg-icon class-name="size-icon" icon-class="size" />
+      <svg-icon
+        class-name="size-icon"
+        icon-class="size"
+      />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
+      <el-dropdown-item
+        v-for="item of sizeOptions"
+        :key="item.value"
+        :disabled="size===item.value"
+        :command="item.value"
+      >
         {{
           item.label }}
       </el-dropdown-item>
diff --git a/frontend/src/components/SvgIcon/index.vue b/frontend/src/components/SvgIcon/index.vue
index aab94ba63a..99f1dd2ccc 100644
--- a/frontend/src/components/SvgIcon/index.vue
+++ b/frontend/src/components/SvgIcon/index.vue
@@ -1,6 +1,16 @@
 <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">
+  <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>
diff --git a/frontend/src/components/TreeSelector/index.vue b/frontend/src/components/TreeSelector/index.vue
index 8634a12ecf..ffbcd79d9e 100644
--- a/frontend/src/components/TreeSelector/index.vue
+++ b/frontend/src/components/TreeSelector/index.vue
@@ -7,12 +7,18 @@
       highlight-current
       @node-click="nodeClick"
     >
-      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
+      <span
+        slot-scope="{ node, data }"
+        :class="treeClass(data,node)"
+      >
         <span style="display: flex;flex: 1;width: 0;">
           <span v-if="data.type === 'scene'">
             <svg-icon icon-class="scene" />
           </span>
-          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+          <span
+            style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+            :title="data.name"
+          >{{ data.name }}</span>
         </span>
       </span>
     </el-tree>
diff --git a/frontend/src/components/back-button/index.vue b/frontend/src/components/back-button/index.vue
index 791f4cbe1c..adeccdb1ba 100644
--- a/frontend/src/components/back-button/index.vue
+++ b/frontend/src/components/back-button/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <i class="el-icon-arrow-left back-button" @click="jump" />
+  <i
+    class="el-icon-arrow-left back-button"
+    @click="jump"
+  />
 </template>
 
 <script>
diff --git a/frontend/src/components/business/DeLayoutContent.vue b/frontend/src/components/business/DeLayoutContent.vue
index 6c71c60ab5..372b5c4c94 100644
--- a/frontend/src/components/business/DeLayoutContent.vue
+++ b/frontend/src/components/business/DeLayoutContent.vue
@@ -1,10 +1,18 @@
 <template>
   <div class="layout-container">
     <p class="route-title">
-      <back-button v-if="showBack" :path="backPath" :name="backName" :to="backTo" />
+      <back-button
+        v-if="showBack"
+        :path="backPath"
+        :name="backName"
+        :to="backTo"
+      />
       <span>{{ routeTitle }}</span>
     </p>
-    <div class="container-wrapper" :class="[needInnerPadding ? 'layout-inner-padding' : '']">
+    <div
+      class="container-wrapper"
+      :class="[needInnerPadding ? 'layout-inner-padding' : '']"
+    >
       <slot />
     </div>
   </div>
@@ -34,7 +42,7 @@ export default {
       return backPath || backName || backTo
     },
     needInnerPadding() {
-      return ['sys-identification', 'sys-abutment', 'sys-task-email', 'system-dept', 'system-dept-form', 'system-auth', 'sys-appearance', 'system-param', 'system-template', "sys-task-dataset", "sys-msg-web-all", "system-plugin"].includes(this.$route.name)
+      return ['sys-identification', 'sys-abutment', 'sys-task-email', 'system-dept', 'system-dept-form', 'system-auth', 'sys-appearance', 'system-param', 'system-template', 'sys-task-dataset', 'sys-msg-web-all', 'system-plugin'].includes(this.$route.name)
     }
   }
 }
diff --git a/frontend/src/components/business/ElSelectAll/index.vue b/frontend/src/components/business/ElSelectAll/index.vue
index ea7f3e6339..9254ee3b59 100644
--- a/frontend/src/components/business/ElSelectAll/index.vue
+++ b/frontend/src/components/business/ElSelectAll/index.vue
@@ -1,6 +1,17 @@
 <template>
-  <el-select v-model="selected" multiple v-bind="$attrsAll" v-on="$listenserAll" @change="onChange">
-    <el-option v-for="item in mdoptionsList" :key="item.key" :label="item.label" :value="item.value" />
+  <el-select
+    v-model="selected"
+    multiple
+    v-bind="$attrsAll"
+    v-on="$listenserAll"
+    @change="onChange"
+  >
+    <el-option
+      v-for="item in mdoptionsList"
+      :key="item.key"
+      :label="item.label"
+      :value="item.value"
+    />
     <slot name="default" />
   </el-select>
 </template>
diff --git a/frontend/src/components/business/LayoutContent.vue b/frontend/src/components/business/LayoutContent.vue
index 7f8916a912..d4c3e8fa3f 100644
--- a/frontend/src/components/business/LayoutContent.vue
+++ b/frontend/src/components/business/LayoutContent.vue
@@ -1,12 +1,23 @@
 <template>
   <div class="content-container">
-    <div v-if="$slots.header || header" class="content-container__header">
+    <div
+      v-if="$slots.header || header"
+      class="content-container__header"
+    >
       <slot name="header">
-        <back-button v-if="showBack" :path="backPath" :name="backName" :to="backTo" />
+        <back-button
+          v-if="showBack"
+          :path="backPath"
+          :name="backName"
+          :to="backTo"
+        />
         {{ header }}
       </slot>
     </div>
-    <div v-if="$slots.toolbar" class="content-container__toolbar">
+    <div
+      v-if="$slots.toolbar"
+      class="content-container__toolbar"
+    >
       <slot name="toolbar" />
     </div>
     <slot />
diff --git a/frontend/src/components/business/complex-table/index.vue b/frontend/src/components/business/complex-table/index.vue
index 3847284859..57a50c528d 100644
--- a/frontend/src/components/business/complex-table/index.vue
+++ b/frontend/src/components/business/complex-table/index.vue
@@ -1,30 +1,51 @@
 
 <template>
   <div class="complex-table">
-    <div v-if="$slots.header || header" class="complex-table__header">
+    <div
+      v-if="$slots.header || header"
+      class="complex-table__header"
+    >
       <slot name="header">{{ header }}</slot>
     </div>
 
-    <div v-if="$slots.toolbar || searchConfig" class="complex-table__toolbar">
+    <div
+      v-if="$slots.toolbar || searchConfig"
+      class="complex-table__toolbar"
+    >
       <div>
         <slot name="toolbar" />
       </div>
-      <fu-search-bar ref="search" v-bind="searchConfig" @exec="search">
+      <fu-search-bar
+        ref="search"
+        v-bind="searchConfig"
+        @exec="search"
+      >
         <template #complex>
           <slot name="complex" />
         </template>
         <slot name="buttons" />
-        <fu-table-column-select v-if="!hideColumns" :columns="columns" />
+        <fu-table-column-select
+          v-if="!hideColumns"
+          :columns="columns"
+        />
       </fu-search-bar>
     </div>
 
     <div class="complex-table__body">
-      <fu-table v-bind="$attrs" :columns="columns" :local-key="localKey" v-on="$listeners">
+      <fu-table
+        v-bind="$attrs"
+        :columns="columns"
+        :local-key="localKey"
+        v-on="$listeners"
+      >
         <slot />
       </fu-table>
     </div>
 
-    <div v-if="$slots.pagination || paginationConfig" class="complex-table__pagination">
+    <div
+      v-if="$slots.pagination || paginationConfig"
+      class="complex-table__pagination"
+    >
       <slot name="pagination">
         <fu-table-pagination
           :current-page.sync="paginationConfig.currentPage"
diff --git a/frontend/src/components/business/condition-table/DeComplexInput.vue b/frontend/src/components/business/condition-table/DeComplexInput.vue
index 8108de7c9f..329f51a1d1 100644
--- a/frontend/src/components/business/condition-table/DeComplexInput.vue
+++ b/frontend/src/components/business/condition-table/DeComplexInput.vue
@@ -1,6 +1,16 @@
 <template>
-  <de-complex-operator v-model="operator" :label="label" :operators="operators" :size="configSize">
-    <el-input v-model="value" :placeholder="$t('fu.search_bar.please_input')" :size="configSize" v-bind="$attrs" />
+  <de-complex-operator
+    v-model="operator"
+    :label="label"
+    :operators="operators"
+    :size="configSize"
+  >
+    <el-input
+      v-model="value"
+      :placeholder="$t('fu.search_bar.please_input')"
+      :size="configSize"
+      v-bind="$attrs"
+    />
   </de-complex-operator>
 </template>
 
diff --git a/frontend/src/components/business/condition-table/DeComplexOperator.vue b/frontend/src/components/business/condition-table/DeComplexOperator.vue
index 4f995080b4..24e4ff0b24 100644
--- a/frontend/src/components/business/condition-table/DeComplexOperator.vue
+++ b/frontend/src/components/business/condition-table/DeComplexOperator.vue
@@ -13,7 +13,12 @@
         @change="change"
         @input="change"
       >
-        <el-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value" />
+        <el-option
+          v-for="o in operators"
+          :key="o.value"
+          :label="$t(o.label)"
+          :value="o.value"
+        />
       </el-select>
     </div>
     <div class="fu-operator-component__value">
diff --git a/frontend/src/components/business/condition-table/DeComplexSelect.vue b/frontend/src/components/business/condition-table/DeComplexSelect.vue
index d09d56faa7..59ba80e2a9 100644
--- a/frontend/src/components/business/condition-table/DeComplexSelect.vue
+++ b/frontend/src/components/business/condition-table/DeComplexSelect.vue
@@ -1,5 +1,11 @@
 <template>
-  <de-complex-operator v-model="operator" :label="label" :operators="operators" :size="configSize" disabled>
+  <de-complex-operator
+    v-model="operator"
+    :label="label"
+    :operators="operators"
+    :size="configSize"
+    disabled
+  >
     <el-select
       v-model="value"
       class="fu-complex-select"
@@ -8,7 +14,12 @@
       clearable
       v-bind="$attrs"
     >
-      <el-option v-for="o in options" :key="o.value" :label="o.label" :value="o.value" />
+      <el-option
+        v-for="o in options"
+        :key="o.value"
+        :label="o.label"
+        :value="o.value"
+      />
     </el-select>
   </de-complex-operator>
 </template>
diff --git a/frontend/src/components/business/condition-table/index.vue b/frontend/src/components/business/condition-table/index.vue
index 0507940af8..2d1d535cf7 100644
--- a/frontend/src/components/business/condition-table/index.vue
+++ b/frontend/src/components/business/condition-table/index.vue
@@ -7,9 +7,9 @@
       :options="options"
       :load-options="loadData"
       style="width: 200px"
-      :noChildrenText="$t('commons.treeselect.no_children_text')"
-      :noOptionsText="$t('commons.treeselect.no_options_text')"
-      :noResultsText="$t('commons.treeselect.no_results_text')"
+      :no-children-text="$t('commons.treeselect.no_children_text')"
+      :no-options-text="$t('commons.treeselect.no_options_text')"
+      :no-results-text="$t('commons.treeselect.no_results_text')"
     />
   </div>
 </template>
diff --git a/frontend/src/components/business/tree-table/index.vue b/frontend/src/components/business/tree-table/index.vue
index 82eede9af0..2a07e24da6 100644
--- a/frontend/src/components/business/tree-table/index.vue
+++ b/frontend/src/components/business/tree-table/index.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="complex-table">
-    <div v-if="$slots.header || header" class="complex-table__header">
+    <div
+      v-if="$slots.header || header"
+      class="complex-table__header"
+    >
       <slot name="header">{{ header }}</slot>
     </div>
 
-    <div v-if="$slots.toolbar || searchConfig" class="complex-table__toolbar">
+    <div
+      v-if="$slots.toolbar || searchConfig"
+      class="complex-table__toolbar"
+    >
       <!-- <slot name="toolbar">
         <fu-search-bar v-bind="searchConfig" @exec="search">
           <slot name="buttons" />
@@ -14,7 +20,10 @@
       <div>
         <slot name="toolbar" />
       </div>
-      <fu-search-bar v-bind="searchConfig" @exec="search">
+      <fu-search-bar
+        v-bind="searchConfig"
+        @exec="search"
+      >
         <template #complex>
           <slot name="complex" />
         </template>
@@ -30,7 +39,10 @@
       </fu-table> -->
     </div>
 
-    <div v-if="$slots.pagination || paginationConfig" class="complex-table__pagination">
+    <div
+      v-if="$slots.pagination || paginationConfig"
+      class="complex-table__pagination"
+    >
       <slot name="pagination">
         <fu-table-pagination
           :current-page.sync="paginationConfig.currentPage"
diff --git a/frontend/src/components/canvas/components/AnimationList.vue b/frontend/src/components/canvas/components/AnimationList.vue
index ef44a0a983..a8fe652a1a 100644
--- a/frontend/src/components/canvas/components/AnimationList.vue
+++ b/frontend/src/components/canvas/components/AnimationList.vue
@@ -18,7 +18,12 @@
     <!-- 选择动画 -->
     <Modal v-model="isShowAnimation">
       <el-tabs v-model="animationActiveName">
-        <el-tab-pane v-for="item in animationClassData" :key="item.label" :label="item.label" :name="item.label">
+        <el-tab-pane
+          v-for="item in animationClassData"
+          :key="item.label"
+          :label="item.label"
+          :name="item.label"
+        >
           <el-scrollbar class="animate-container">
             <div
               v-for="(animate, index) in item.children"
diff --git a/frontend/src/components/canvas/components/AttrList.vue b/frontend/src/components/canvas/components/AttrList.vue
index 9bb53a5de2..fd5486f318 100644
--- a/frontend/src/components/canvas/components/AttrList.vue
+++ b/frontend/src/components/canvas/components/AttrList.vue
@@ -2,11 +2,27 @@
 <template>
   <div class="attr-list">
     <el-form>
-      <el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :key="index" :label="map[key]">
-        <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
-        <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
-        <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
-        <el-select v-else-if="selectKey.includes(key)" v-model="curComponent.style[key]">
+      <el-form-item
+        v-for="(key, index) in styleKeys.filter(item => item != 'rotate')"
+        :key="index"
+        :label="map[key]"
+      >
+        <el-color-picker
+          v-if="key == 'borderColor'"
+          v-model="curComponent.style[key]"
+        />
+        <el-color-picker
+          v-else-if="key == 'color'"
+          v-model="curComponent.style[key]"
+        />
+        <el-color-picker
+          v-else-if="key == 'backgroundColor'"
+          v-model="curComponent.style[key]"
+        />
+        <el-select
+          v-else-if="selectKey.includes(key)"
+          v-model="curComponent.style[key]"
+        >
           <template v-if="key == 'textAlign'">
             <el-option
               v-for="item in textAlignOptions"
@@ -32,10 +48,20 @@
             />
           </template>
         </el-select>
-        <el-input v-else v-model="curComponent.style[key]" type="number" />
+        <el-input
+          v-else
+          v-model="curComponent.style[key]"
+          type="number"
+        />
       </el-form-item>
-      <el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" :label="$t('panel.content')">
-        <el-input v-model="curComponent.propValue" type="textarea" />
+      <el-form-item
+        v-if="curComponent && !excludes.includes(curComponent.component)"
+        :label="$t('panel.content')"
+      >
+        <el-input
+          v-model="curComponent.propValue"
+          type="textarea"
+        />
       </el-form-item>
     </el-form>
   </div>
diff --git a/frontend/src/components/canvas/components/AttrListExtend.vue b/frontend/src/components/canvas/components/AttrListExtend.vue
index 074fad3646..be1fc51dc4 100644
--- a/frontend/src/components/canvas/components/AttrListExtend.vue
+++ b/frontend/src/components/canvas/components/AttrListExtend.vue
@@ -1,12 +1,31 @@
 <!-- TODO: 这个页面后续将用 JSX 重构 -->
 <template>
   <div class="attr-list">
-    <el-form label-width="80px" size="mini">
-      <el-form-item v-for="(key, index) in styleKeys.filter(item => styleFilter.includes(item))" :key="index" :label="map[key]+':'">
-        <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
-        <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
-        <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
-        <el-select v-else-if="selectKey.includes(key)" v-model="curComponent.style[key]">
+    <el-form
+      label-width="80px"
+      size="mini"
+    >
+      <el-form-item
+        v-for="(key, index) in styleKeys.filter(item => styleFilter.includes(item))"
+        :key="index"
+        :label="map[key]+':'"
+      >
+        <el-color-picker
+          v-if="key == 'borderColor'"
+          v-model="curComponent.style[key]"
+        />
+        <el-color-picker
+          v-else-if="key == 'color'"
+          v-model="curComponent.style[key]"
+        />
+        <el-color-picker
+          v-else-if="key == 'backgroundColor'"
+          v-model="curComponent.style[key]"
+        />
+        <el-select
+          v-else-if="selectKey.includes(key)"
+          v-model="curComponent.style[key]"
+        >
           <template v-if="key == 'textAlign'">
             <el-option
               v-for="item in textAlignOptions"
@@ -32,10 +51,17 @@
             />
           </template>
         </el-select>
-        <el-input v-else v-model="curComponent.style[key]" type="number" />
+        <el-input
+          v-else
+          v-model="curComponent.style[key]"
+          type="number"
+        />
       </el-form-item>
       <el-form-item :label="$t('panel.content_style')+':'">
-        <div v-if="curComponent.type==='v-text'" style="width: 100%;max-height: 400px;overflow: auto">
+        <div
+          v-if="curComponent.type==='v-text'"
+          style="width: 100%;max-height: 400px;overflow: auto"
+        >
           <VText
             style="border: 1px solid #dcdfe6;border-radius:4px;background-color: #f7f8fa;"
             :prop-value="curComponent.propValue"
diff --git a/frontend/src/components/canvas/components/ComponentList.vue b/frontend/src/components/canvas/components/ComponentList.vue
index cfeaf9172d..798d5f510a 100644
--- a/frontend/src/components/canvas/components/ComponentList.vue
+++ b/frontend/src/components/canvas/components/ComponentList.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="component-list" @dragstart="handleDragStart">
+  <div
+    class="component-list"
+    @dragstart="handleDragStart"
+  >
     <div
       v-for="(item, index) in componentList"
       :key="index"
@@ -7,7 +10,10 @@
       draggable
       :data-index="index"
     >
-      <span class="iconfont" :class="'icon-' + item.icon" />
+      <span
+        class="iconfont"
+        :class="'icon-' + item.icon"
+      />
       <span>{{ item.label }}</span>
     </div>
   </div>
diff --git a/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue b/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue
index 1c95b2c34d..87a831ab32 100644
--- a/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue
+++ b/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue
@@ -1,7 +1,14 @@
 <template>
-  <div v-show="existLinkage" class="bar-main">
+  <div
+    v-show="existLinkage"
+    class="bar-main"
+  >
     <div>
-      <el-button size="mini" type="warning" @click="clearAllLinkage"><i class="icon iconfont icon-quxiaoliandong" />{{ $t('panel.remove_all_linkage') }}</el-button>
+      <el-button
+        size="mini"
+        type="warning"
+        @click="clearAllLinkage"
+      ><i class="icon iconfont icon-quxiaoliandong" />{{ $t('panel.remove_all_linkage') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/canvas/components/Editor/CloseBar.vue b/frontend/src/components/canvas/components/Editor/CloseBar.vue
index 6d0c2066f9..4e68cc2dc9 100644
--- a/frontend/src/components/canvas/components/Editor/CloseBar.vue
+++ b/frontend/src/components/canvas/components/Editor/CloseBar.vue
@@ -1,35 +1,17 @@
 <template>
   <div class="bar-main">
     <div style="margin-right: -1px;width: 18px">
-      <i class="icon iconfont icon-guanbi" @click.stop="closePreview" />
+      <i
+        class="icon iconfont icon-guanbi"
+        @click.stop="closePreview"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import bus from '@/utils/bus'
-import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
-import LinkageField from '@/components/canvas/components/Editor/LinkageField'
 
 export default {
-  components: { },
-
-  props: {
-
-  },
-  data() {
-    return {
-
-    }
-  },
-  computed: {
-
-  },
-  mounted() {
-  },
-  beforeDestroy() {
-  },
   methods: {
     closePreview() {
       this.$emit('closePreview')
diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index 92dca2fb45..030ca7e218 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -5,10 +5,29 @@
     @click="handleClick"
     @mousedown="elementMouseDown"
   >
-    <edit-bar v-if="componentActiveFlag" :source-element="sourceConfig" :terminal="terminal" :element="config" :show-position="showPosition" @showViewDetails="showViewDetails" />
-    <div :id="componentCanvasId" :style="commonStyle" class="main_view">
-      <svg-icon v-if="svgInnerEnable" :style="{'color':this.config.commonBackground.innerImageColor}" class="svg-background" :icon-class="mainSlotSvgInner" />
-      <close-bar v-if="previewVisible" @closePreview="closePreview" />
+    <edit-bar
+      v-if="componentActiveFlag"
+      :source-element="sourceConfig"
+      :terminal="terminal"
+      :element="config"
+      :show-position="showPosition"
+      @showViewDetails="showViewDetails"
+    />
+    <div
+      :id="componentCanvasId"
+      :style="commonStyle"
+      class="main_view"
+    >
+      <svg-icon
+        v-if="svgInnerEnable"
+        :style="{'color':config.commonBackground.innerImageColor}"
+        class="svg-background"
+        :icon-class="mainSlotSvgInner"
+      />
+      <close-bar
+        v-if="previewVisible"
+        @closePreview="closePreview"
+      />
       <de-out-widget
         v-if="config.type==='custom'"
         :id="'component' + config.id"
@@ -58,7 +77,7 @@ import EditBar from '@/components/canvas/components/Editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
 import CloseBar from '@/components/canvas/components/Editor/CloseBar'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
@@ -132,7 +151,7 @@ export default {
       }
     },
     svgInnerEnable() {
-      return !this.screenShot&&this.config.commonBackground.enable && this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string'
+      return !this.screenShot && this.config.commonBackground.enable && this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string'
     },
     mainSlotSvgInner() {
       if (this.svgInnerEnable) {
@@ -155,7 +174,7 @@ export default {
         }
         if (this.config.commonBackground.enable) {
           if (this.screenShot && this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string') {
-            let innerImage = this.config.commonBackground.innerImage.replace('svg', 'png')
+            const innerImage = this.config.commonBackground.innerImage.replace('svg', 'png')
             style['background'] = `url(${imgUrlTrans(innerImage)}) no-repeat ${colorRGBA}`
           } else if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') {
             style['background'] = `url(${imgUrlTrans(this.config.commonBackground.outerImage)}) no-repeat ${colorRGBA}`
diff --git a/frontend/src/components/canvas/components/Editor/ContextMenu.vue b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
index 79496f3a34..1e22d3af74 100644
--- a/frontend/src/components/canvas/components/Editor/ContextMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
@@ -1,9 +1,16 @@
 <template>
-  <div v-show="menuShow" class="contextmenu" :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">
+  <div
+    v-show="menuShow"
+    class="contextmenu"
+    :style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
+  >
     <ul @mouseup="handleMouseUp">
       <template v-if="curComponent">
         <template v-if="!curComponent.isLock">
-          <li v-if="editFilter.includes(curComponent.type)" @click="edit"> {{ $t('panel.edit') }}</li>
+          <li
+            v-if="editFilter.includes(curComponent.type)"
+            @click="edit"
+          > {{ $t('panel.edit') }}</li>
           <li @click="copy"> {{ $t('panel.copy') }}</li>
           <li @click="cut"> {{ $t('panel.cut') }}</li>
           <li @click="deleteComponent"> {{ $t('panel.delete') }}</li>
@@ -13,9 +20,15 @@
           <li @click="upComponent"> {{ $t('panel.upComponent') }}</li>
           <li @click="downComponent"> {{ $t('panel.downComponent') }}</li>
         </template>
-        <li v-else @click="unlock">解锁</li>
+        <li
+          v-else
+          @click="unlock"
+        >解锁</li>
       </template>
-      <li v-else @click="paste">粘贴</li>
+      <li
+        v-else
+        @click="paste"
+      >粘贴</li>
     </ul>
   </div>
 </template>
diff --git a/frontend/src/components/canvas/components/Editor/DateFormat.vue b/frontend/src/components/canvas/components/Editor/DateFormat.vue
index 1902858748..c827ffbb03 100644
--- a/frontend/src/components/canvas/components/Editor/DateFormat.vue
+++ b/frontend/src/components/canvas/components/Editor/DateFormat.vue
@@ -6,7 +6,12 @@
     trigger="click"
   >
     <el-row>
-      <el-form ref="form" :inline="true" size="mini" label-width="70px">
+      <el-form
+        ref="form"
+        :inline="true"
+        size="mini"
+        label-width="70px"
+      >
 
         <el-form-item :label="$t('deshowdate.open_mode')">
 
@@ -27,14 +32,23 @@
         </el-form-item>
 
         <el-form-item :label="$t('deshowdate.show_week')">
-          <el-switch v-model="formatInfo.showWeek" size="mini" />
+          <el-switch
+            v-model="formatInfo.showWeek"
+            size="mini"
+          />
         </el-form-item>
 
         <el-form-item :label="$t('deshowdate.show_date')">
-          <el-switch v-model="formatInfo.showDate" size="mini" />
+          <el-switch
+            v-model="formatInfo.showDate"
+            size="mini"
+          />
         </el-form-item>
 
-        <el-form-item v-show="formatInfo.showDate" :label="$t('deshowdate.date_format')">
+        <el-form-item
+          v-show="formatInfo.showDate"
+          :label="$t('deshowdate.date_format')"
+        >
           <el-select
             v-model="formatInfo.dateFormat"
             :placeholder="$t('deshowdate.select_date_format')"
@@ -77,7 +91,10 @@
         </el-form-item> -->
       </el-form>
     </el-row>
-    <i slot="reference" class="icon iconfont icon-shijiangeshizhuanhuan" />
+    <i
+      slot="reference"
+      class="icon iconfont icon-shijiangeshizhuanhuan"
+    />
   </el-popover>
 </template>
 
diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue
index ce6e4d4d2d..e85008ec54 100644
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -1,42 +1,116 @@
 <template>
-  <div class="bar-main" :class="showEditPosition" @mousedown="showLabelInfo">
-    <input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange">
-    <div v-if="linkageAreaShow" style="margin-right: -1px;width: 20px">
-      <el-checkbox v-model="linkageInfo.linkageActive" size="medium" />
-      <linkage-field v-if="linkageInfo.linkageActive" :element="element" />
+  <div
+    class="bar-main"
+    :class="showEditPosition"
+    @mousedown="showLabelInfo"
+  >
+    <input
+      id="input"
+      ref="files"
+      type="file"
+      accept="image/*"
+      hidden
+      @click="e => {e.target.value = '';}"
+      @change="handleFileChange"
+    >
+    <div
+      v-if="linkageAreaShow"
+      style="margin-right: -1px;width: 20px"
+    >
+      <el-checkbox
+        v-model="linkageInfo.linkageActive"
+        size="medium"
+      />
+      <linkage-field
+        v-if="linkageInfo.linkageActive"
+        :element="element"
+      />
     </div>
-    <div v-if="positionCheck('multiplexing') && showMultiplexingCheck" style="margin-right: 1px;width: 18px;z-index: 5">
-      <el-checkbox v-model="multiplexingCheckModel" size="medium" @change="multiplexingCheck" />
+    <div
+      v-if="positionCheck('multiplexing') && showMultiplexingCheck"
+      style="margin-right: 1px;width: 18px;z-index: 5"
+    >
+      <el-checkbox
+        v-model="multiplexingCheckModel"
+        size="medium"
+        @change="multiplexingCheck"
+      />
     </div>
-    <div v-if="batchOptAreaShow" style="margin-right: -1px;width: 20px;z-index: 5">
-      <el-checkbox size="medium" @change="batchOptChange" />
+    <div
+      v-if="batchOptAreaShow"
+      style="margin-right: -1px;width: 20px;z-index: 5"
+    >
+      <el-checkbox
+        size="medium"
+        @change="batchOptChange"
+      />
     </div>
     <div v-if="normalAreaShow">
       <span :title="$t('panel.edit')">
-        <i v-if="activeModel==='edit'&&curComponent&&editFilter.includes(curComponent.type)" class="icon iconfont icon-edit" @click.stop="edit" />
+        <i
+          v-if="activeModel==='edit'&&curComponent&&editFilter.includes(curComponent.type)"
+          class="icon iconfont icon-edit"
+          @click.stop="edit"
+        />
       </span>
       <span :title="$t('panel.matrix')">
-        <i v-if="activeModel==='edit'&&curComponent.auxiliaryMatrix" class="icon iconfont icon-shujujuzhen" @click.stop="auxiliaryMatrixChange" />
+        <i
+          v-if="activeModel==='edit'&&curComponent.auxiliaryMatrix"
+          class="icon iconfont icon-shujujuzhen"
+          @click.stop="auxiliaryMatrixChange"
+        />
       </span>
       <span :title="$t('panel.suspension')">
-        <i v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix" class="icon iconfont icon-xuanfuanniu" @click.stop="auxiliaryMatrixChange" />
+        <i
+          v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix"
+          class="icon iconfont icon-xuanfuanniu"
+          @click.stop="auxiliaryMatrixChange"
+        />
       </span>
       <span :title="$t('panel.enlarge')">
-        <i v-if="enlargeShow" class="icon iconfont icon-fangda" @click.stop="showViewDetails('enlarge')" />
+        <i
+          v-if="enlargeShow"
+          class="icon iconfont icon-fangda"
+          @click.stop="showViewDetails('enlarge')"
+        />
       </span>
       <span :title="$t('panel.details')">
-        <i v-if="detailsShow" class="icon iconfont icon-chakan" @click.stop="showViewDetails('details')" />
+        <i
+          v-if="detailsShow"
+          class="icon iconfont icon-chakan"
+          @click.stop="showViewDetails('details')"
+        />
       </span>
-      <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet" @boardSet="boardSet">
-        <span slot="icon" :title="$t('panel.setting')">
-          <i class="icon iconfont icon-shezhi" style="margin-top:2px" />
+      <setting-menu
+        v-if="activeModel==='edit'"
+        style="float: right;height: 24px!important;"
+        @amRemoveItem="amRemoveItem"
+        @linkJumpSet="linkJumpSet"
+        @boardSet="boardSet"
+      >
+        <span
+          slot="icon"
+          :title="$t('panel.setting')"
+        >
+          <i
+            class="icon iconfont icon-shezhi"
+            style="margin-top:2px"
+          />
         </span>
       </setting-menu>
       <span :title="$t('panel.cancel_linkage')">
-        <i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
+        <i
+          v-if="curComponent.type==='view'&&existLinkage"
+          class="icon iconfont icon-quxiaoliandong"
+          @click.stop="clearLinkage"
+        />
       </span>
       <span :title="$t('panel.switch_picture')">
-        <i v-if="activeModel==='edit'&&curComponent&&curComponent.type==='picture-add'" class="icon iconfont icon-genghuan" @click.stop="goFile" />
+        <i
+          v-if="activeModel==='edit'&&curComponent&&curComponent.type==='picture-add'"
+          class="icon iconfont icon-genghuan"
+          @click.stop="goFile"
+        />
       </span>
       <el-popover
         v-if="selectFieldShow"
@@ -44,11 +118,25 @@
         trigger="click"
         @mousedown="fieldsAreaDown"
       >
-        <fields-list :fields="curFields" :element="element" />
-        <i slot="reference" :disabled="element.editing" :title="$t('panel.select_field')" class="icon iconfont icon-datasource-select" style="margin-left: 4px;cursor: pointer;font-size: 14px;" />
+        <fields-list
+          :fields="curFields"
+          :element="element"
+        />
+        <i
+          slot="reference"
+          :disabled="element.editing"
+          :title="$t('panel.select_field')"
+          class="icon iconfont icon-datasource-select"
+          style="margin-left: 4px;cursor: pointer;font-size: 14px;"
+        />
       </el-popover>
       <span :title="$t('panel.jump')">
-        <a v-if="showJumpFlag" :title="curComponent.hyperlinks.content " :target="curComponent.hyperlinks.openMode " :href="curComponent.hyperlinks.content ">
+        <a
+          v-if="showJumpFlag"
+          :title="curComponent.hyperlinks.content "
+          :target="curComponent.hyperlinks.openMode "
+          :href="curComponent.hyperlinks.content "
+        >
           <i class="icon iconfont icon-com-jump" />
         </a>
       </span>
@@ -117,12 +205,7 @@ export default {
       viewXArray: []
     }
   },
-  mounted() {
-    this.initCurFields()
-    if (this.element.type === 'view') {
-      bus.$on('initCurFields-' + this.element.id, this.initCurFields)
-    }
-  },
+
   computed: {
     detailsShow() {
       return this.curComponent.type === 'view' && this.terminal === 'pc' && this.curComponent.propValue.innerType !== 'richTextView'
@@ -212,7 +295,11 @@ export default {
       'panelViewDetailsInfo'
     ])
   },
-  beforeDestroy() {
+  mounted() {
+    this.initCurFields()
+    if (this.element.type === 'view') {
+      bus.$on('initCurFields-' + this.element.id, this.initCurFields)
+    }
   },
   methods: {
     fieldsAreaDown(e) {
diff --git a/frontend/src/components/canvas/components/Editor/EditBarView.vue b/frontend/src/components/canvas/components/Editor/EditBarView.vue
index 8a9259c9f8..084c45d82b 100644
--- a/frontend/src/components/canvas/components/Editor/EditBarView.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBarView.vue
@@ -1,21 +1,53 @@
 <template>
   <div class="bar-main">
     <div v-if="!positionCheck('multiplexing') && !positionCheck('email-task')">
-      <span v-if="isEdit" :title="$t('panel.edit')">
-        <i class="icon iconfont icon-edit" @click.stop="edit" />
+      <span
+        v-if="isEdit"
+        :title="$t('panel.edit')"
+      >
+        <i
+          class="icon iconfont icon-edit"
+          @click.stop="edit"
+        />
       </span>
-      <span v-show="detailsShow" :title="$t('panel.details')">
-        <i class="icon iconfont icon-chakan" @click.stop="showViewDetails('details')" />
+      <span
+        v-show="detailsShow"
+        :title="$t('panel.details')"
+      >
+        <i
+          class="icon iconfont icon-chakan"
+          @click.stop="showViewDetails('details')"
+        />
       </span>
-      <span v-show="enlargeShow" :title="$t('panel.enlarge')">
-        <i class="icon iconfont icon-fangda" @click.stop="showViewDetails('enlarge')" />
+      <span
+        v-show="enlargeShow"
+        :title="$t('panel.enlarge')"
+      >
+        <i
+          class="icon iconfont icon-fangda"
+          @click.stop="showViewDetails('enlarge')"
+        />
       </span>
     </div>
-    <div v-if="positionCheck('multiplexing')" style="margin-right: -1px;width: 18px;z-index: 5">
-      <el-checkbox v-model="multiplexingCheckModel" size="medium" @change="multiplexingCheck" />
+    <div
+      v-if="positionCheck('multiplexing')"
+      style="margin-right: -1px;width: 18px;z-index: 5"
+    >
+      <el-checkbox
+        v-model="multiplexingCheckModel"
+        size="medium"
+        @change="multiplexingCheck"
+      />
     </div>
-    <div v-if="positionCheck('email-task') && element.component === 'user-view'" style="margin-right: -1px;width: 18px;z-index: 5">
-      <el-checkbox v-model="isTaskChecked" size="medium" @change="emailTaskCheck" />
+    <div
+      v-if="positionCheck('email-task') && element.component === 'user-view'"
+      style="margin-right: -1px;width: 18px;z-index: 5"
+    >
+      <el-checkbox
+        v-model="isTaskChecked"
+        size="medium"
+        @change="emailTaskCheck"
+      />
     </div>
   </div>
 </template>
@@ -63,10 +95,10 @@ export default {
     }
   },
   computed: {
-    detailsShow(){
+    detailsShow() {
       return this.element.propValue.innerType !== 'richTextView'
     },
-    enlargeShow(){
+    enlargeShow() {
       return this.element.propValue.innerType !== 'richTextView'
     },
     // gapStyle() {
diff --git a/frontend/src/components/canvas/components/Editor/FrameLinks.vue b/frontend/src/components/canvas/components/Editor/FrameLinks.vue
index a7aa661a5e..f88bd5eb63 100644
--- a/frontend/src/components/canvas/components/Editor/FrameLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/FrameLinks.vue
@@ -5,7 +5,11 @@
     trigger="click"
   >
     <el-row>
-      <el-form ref="form" size="mini" label-width="70px">
+      <el-form
+        ref="form"
+        size="mini"
+        label-width="70px"
+      >
         <el-form-item :label="'Tips:'">
           <span style="color: #909399; font-size: 8px;margin-left: 3px">
             {{ $t('panel.web_set_tips') }}
@@ -15,12 +19,18 @@
           <el-input v-model="linkInfoTemp.src" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
+          <el-button
+            type="primary"
+            @click="onSubmit"
+          >{{ $t('panel.confirm') }}</el-button>
           <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
         </el-form-item>
       </el-form>
     </el-row>
-    <i slot="reference" class="icon iconfont icon-chaolianjie" />
+    <i
+      slot="reference"
+      class="icon iconfont icon-chaolianjie"
+    />
   </el-popover>
 </template>
 
@@ -54,6 +64,12 @@ export default {
       ]
     }
   },
+  computed: {
+    ...mapState([
+      'curComponent',
+      'curActiveTabInner'
+    ])
+  },
   watch: {
     linkInfo: {
       handler: function() {
@@ -65,14 +81,6 @@ export default {
   created() {
     this.init()
   },
-  mounted() {
-  },
-  computed: {
-    ...mapState([
-      'curComponent',
-      'curActiveTabInner'
-    ])
-  },
   methods: {
     init() {
       this.linkInfoTemp = deepCopy(this.linkInfo)
diff --git a/frontend/src/components/canvas/components/Editor/Grid.vue b/frontend/src/components/canvas/components/Editor/Grid.vue
index b79ce1388d..d9ec4391b1 100644
--- a/frontend/src/components/canvas/components/Editor/Grid.vue
+++ b/frontend/src/components/canvas/components/Editor/Grid.vue
@@ -1,7 +1,17 @@
 <template>
-  <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    class="grid"
+    width="100%"
+    height="100%"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <defs>
-      <pattern id="smallGrid" :width="smallGridW" :height="smallGridH" patternUnits="userSpaceOnUse">
+      <pattern
+        id="smallGrid"
+        :width="smallGridW"
+        :height="smallGridH"
+        patternUnits="userSpaceOnUse"
+      >
         <path
           :d="smallGridPathD"
           fill="none"
@@ -9,8 +19,17 @@
           stroke-width="1"
         />
       </pattern>
-      <pattern id="middleGrid" :width="middleGridW" :height="middleGridH" patternUnits="userSpaceOnUse">
-        <rect :width="middleGridW" :height="middleGridH" fill="url(#smallGrid)" />
+      <pattern
+        id="middleGrid"
+        :width="middleGridW"
+        :height="middleGridH"
+        patternUnits="userSpaceOnUse"
+      >
+        <rect
+          :width="middleGridW"
+          :height="middleGridH"
+          fill="url(#smallGrid)"
+        />
         <path
           :d="middleGridPathD"
           fill="none"
@@ -18,8 +37,17 @@
           stroke-width="1.5"
         />
       </pattern>
-      <pattern id="grid" :width="gridW" :height="gridH" patternUnits="userSpaceOnUse">
-        <rect :width="gridW" :height="gridH" fill="url(#middleGrid)" />
+      <pattern
+        id="grid"
+        :width="gridW"
+        :height="gridH"
+        patternUnits="userSpaceOnUse"
+      >
+        <rect
+          :width="gridW"
+          :height="gridH"
+          fill="url(#middleGrid)"
+        />
         <path
           :d="pathD"
           fill="none"
@@ -28,7 +56,11 @@
         />
       </pattern>
     </defs>
-    <rect width="100%" height="100%" fill="url(#grid)" />
+    <rect
+      width="100%"
+      height="100%"
+      fill="url(#grid)"
+    />
   </svg>
 </template>
 
diff --git a/frontend/src/components/canvas/components/Editor/Hyperlinks.vue b/frontend/src/components/canvas/components/Editor/Hyperlinks.vue
index 649cd85ab3..9751e10900 100644
--- a/frontend/src/components/canvas/components/Editor/Hyperlinks.vue
+++ b/frontend/src/components/canvas/components/Editor/Hyperlinks.vue
@@ -6,29 +6,51 @@
     trigger="click"
   >
     <el-row>
-      <el-form ref="form" size="mini" label-width="70px">
+      <el-form
+        ref="form"
+        size="mini"
+        label-width="70px"
+      >
         <el-form-item :label="$t('panel.enable_jump')">
-          <el-switch v-model="linkInfo.enable" size="mini" />
-          <span v-show="linkInfo.enable" style="color: #909399; font-size: 8px;margin-left: 3px">
+          <el-switch
+            v-model="linkInfo.enable"
+            size="mini"
+          />
+          <span
+            v-show="linkInfo.enable"
+            style="color: #909399; font-size: 8px;margin-left: 3px"
+          >
             Tips:{{ $t('panel.link_open_tips') }}
           </span>
         </el-form-item>
         <el-form-item :label="$t('panel.open_mode')">
-          <el-radio-group v-model="linkInfo.openMode" :disabled="!linkInfo.enable">
+          <el-radio-group
+            v-model="linkInfo.openMode"
+            :disabled="!linkInfo.enable"
+          >
             <el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
             <el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item :label="$t('panel.hyperLinks')">
-          <el-input v-model="linkInfo.content" :disabled="!linkInfo.enable" />
+          <el-input
+            v-model="linkInfo.content"
+            :disabled="!linkInfo.enable"
+          />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
+          <el-button
+            type="primary"
+            @click="onSubmit"
+          >{{ $t('panel.confirm') }}</el-button>
           <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
         </el-form-item>
       </el-form>
     </el-row>
-    <i slot="reference" class="icon iconfont icon-font icon-chaolianjie1" />
+    <i
+      slot="reference"
+      class="icon iconfont icon-font icon-chaolianjie1"
+    />
   </el-popover>
 </template>
 
diff --git a/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue b/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
index 226ad2ed93..104e3e7296 100644
--- a/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
+++ b/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
@@ -1,23 +1,42 @@
 <template>
   <el-row>
-    <el-form ref="form" size="mini" label-width="70px">
+    <el-form
+      ref="form"
+      size="mini"
+      label-width="70px"
+    >
       <el-form-item :label="$t('panel.enable_jump')">
-        <el-switch v-model="linkInfo.enable" size="mini" />
-        <span v-show="linkInfo.enable" style="color: #909399; font-size: 8px;margin-left: 3px">
+        <el-switch
+          v-model="linkInfo.enable"
+          size="mini"
+        />
+        <span
+          v-show="linkInfo.enable"
+          style="color: #909399; font-size: 8px;margin-left: 3px"
+        >
           Tips:{{ $t('panel.link_open_tips') }}
         </span>
       </el-form-item>
       <el-form-item :label="$t('panel.open_mode')">
-        <el-radio-group v-model="linkInfo.openMode" :disabled="!linkInfo.enable">
+        <el-radio-group
+          v-model="linkInfo.openMode"
+          :disabled="!linkInfo.enable"
+        >
           <el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
           <el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item :label="$t('panel.hyperLinks')">
-        <el-input v-model="linkInfo.content" :disabled="!linkInfo.enable" />
+        <el-input
+          v-model="linkInfo.content"
+          :disabled="!linkInfo.enable"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
+        <el-button
+          type="primary"
+          @click="onSubmit"
+        >{{ $t('panel.confirm') }}</el-button>
         <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
       </el-form-item>
     </el-form>
@@ -42,14 +61,14 @@ export default {
       linkageActiveStatus: false
     }
   },
-  mounted() {
-    this.linkInfo = { ...this.linkInfo }
-  },
   computed: {
     ...mapState([
       'curComponent'
     ])
   },
+  mounted() {
+    this.linkInfo = { ...this.linkInfo }
+  },
   methods: {
     onSubmit() {
       this.linkInfo.content = checkAddHttp(this.linkInfo.content)
diff --git a/frontend/src/components/canvas/components/Editor/LinkageField.vue b/frontend/src/components/canvas/components/Editor/LinkageField.vue
index 6e5bb19ebb..ae39d47366 100644
--- a/frontend/src/components/canvas/components/Editor/LinkageField.vue
+++ b/frontend/src/components/canvas/components/Editor/LinkageField.vue
@@ -15,10 +15,17 @@
     </el-row>
 
     <el-row style="height: 120px;overflow-y: auto">
-      <el-row v-for="(itemLinkage, index) in linkageInfo.linkageFields" :key="index">
+      <el-row
+        v-for="(itemLinkage, index) in linkageInfo.linkageFields"
+        :key="index"
+      >
         <el-col :span="11">
           <div class="select-filed">
-            <el-select v-model="itemLinkage.sourceField" size="mini" placeholder="请选择">
+            <el-select
+              v-model="itemLinkage.sourceField"
+              size="mini"
+              placeholder="请选择"
+            >
               <el-option
                 v-for="item in sourceLinkageInfo.targetViewFields"
                 :key="item.id"
@@ -26,10 +33,26 @@
                 :value="item.id"
               >
                 <span style="float: left">
-                  <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-                  <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-                  <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-                  <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                  <svg-icon
+                    v-if="item.deType === 0"
+                    icon-class="field_text"
+                    class="field-icon-text"
+                  />
+                  <svg-icon
+                    v-if="item.deType === 1"
+                    icon-class="field_time"
+                    class="field-icon-time"
+                  />
+                  <svg-icon
+                    v-if="item.deType === 2 || item.deType === 3"
+                    icon-class="field_value"
+                    class="field-icon-value"
+                  />
+                  <svg-icon
+                    v-if="item.deType === 5"
+                    icon-class="field_location"
+                    class="field-icon-location"
+                  />
                 </span>
                 <span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
               </el-option>
@@ -38,7 +61,11 @@
         </el-col>
         <el-col :span="11">
           <div class="select-filed">
-            <el-select v-model="itemLinkage.targetField" size="mini" placeholder="请选择">
+            <el-select
+              v-model="itemLinkage.targetField"
+              size="mini"
+              placeholder="请选择"
+            >
               <el-option
                 v-for="item in linkageInfo.targetViewFields"
                 :key="item.id"
@@ -46,10 +73,26 @@
                 :value="item.id"
               >
                 <span style="float: left">
-                  <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-                  <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-                  <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-                  <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                  <svg-icon
+                    v-if="item.deType === 0"
+                    icon-class="field_text"
+                    class="field-icon-text"
+                  />
+                  <svg-icon
+                    v-if="item.deType === 1"
+                    icon-class="field_time"
+                    class="field-icon-time"
+                  />
+                  <svg-icon
+                    v-if="item.deType === 2 || item.deType === 3"
+                    icon-class="field_value"
+                    class="field-icon-value"
+                  />
+                  <svg-icon
+                    v-if="item.deType === 5"
+                    icon-class="field_location"
+                    class="field-icon-location"
+                  />
                 </span>
                 <span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
               </el-option>
@@ -58,18 +101,33 @@
         </el-col>
         <el-col :span="2">
           <div>
-            <el-button icon="el-icon-delete" type="text" size="small" style="float: left" @click="deleteLinkageField(index)" />
+            <el-button
+              icon="el-icon-delete"
+              type="text"
+              size="small"
+              style="float: left"
+              @click="deleteLinkageField(index)"
+            />
           </div>
         </el-col>
       </el-row>
     </el-row>
 
     <el-row class="bottom">
-      <el-button size="mini" type="success" icon="el-icon-plus" round @click="addLinkageField(null,null)">追加联动依赖字段</el-button>
+      <el-button
+        size="mini"
+        type="success"
+        icon="el-icon-plus"
+        round
+        @click="addLinkageField(null,null)"
+      >追加联动依赖字段</el-button>
     </el-row>
 
     <!--    <el-button slot="reference">T</el-button>-->
-    <i slot="reference" class="icon iconfont icon-edit slot-class" />
+    <i
+      slot="reference"
+      class="icon iconfont icon-edit slot-class"
+    />
   </el-popover>
 </template>
 
@@ -105,16 +163,6 @@ export default {
       ]
     }
   },
-  mounted() {
-    // 初始化映射关系 如果当前是相同的数据集且没有关联关系，则自动补充映射关系
-    checkSameDataSet(this.curLinkageView.propValue.viewId, this.element.propValue.viewId).then(res => {
-      if (res.data === 'YES' && this.linkageInfo.linkageFields.length === 0) {
-        this.sourceLinkageInfo.targetViewFields.forEach(item => {
-          this.addLinkageField(item.id, item.id)
-        })
-      }
-    })
-  },
   computed: {
     linkageInfo() {
       return this.targetLinkageInfo[this.element.propValue.viewId]
@@ -134,6 +182,16 @@ export default {
       'curLinkageView'
     ])
   },
+  mounted() {
+    // 初始化映射关系 如果当前是相同的数据集且没有关联关系，则自动补充映射关系
+    checkSameDataSet(this.curLinkageView.propValue.viewId, this.element.propValue.viewId).then(res => {
+      if (res.data === 'YES' && this.linkageInfo.linkageFields.length === 0) {
+        this.sourceLinkageInfo.targetViewFields.forEach(item => {
+          this.addLinkageField(item.id, item.id)
+        })
+      }
+    })
+  },
   methods: {
     showViewDetails() {
       this.$emit('showViewDetails')
diff --git a/frontend/src/components/canvas/components/Editor/MobileCheckBar.vue b/frontend/src/components/canvas/components/Editor/MobileCheckBar.vue
index fa5b521a1b..9ed014e393 100644
--- a/frontend/src/components/canvas/components/Editor/MobileCheckBar.vue
+++ b/frontend/src/components/canvas/components/Editor/MobileCheckBar.vue
@@ -2,7 +2,10 @@
   <div class="bar-main">
     <div style="width: 20px">
       <!--      <svg-icon icon-class="field_text" class="el-icon-close" />-->
-      <el-checkbox v-model="element.mobileSelected" @change="onChange" />
+      <el-checkbox
+        v-model="element.mobileSelected"
+        @change="onChange"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/canvas/components/Editor/PGrid.vue b/frontend/src/components/canvas/components/Editor/PGrid.vue
index c23ea87262..8a1e8756f0 100644
--- a/frontend/src/components/canvas/components/Editor/PGrid.vue
+++ b/frontend/src/components/canvas/components/Editor/PGrid.vue
@@ -2,9 +2,18 @@
   <div class="grid">
     <!--    positionBox:{{ positionBox.length }}-->
     <!--    <div v-for="(yItem, index) in positionBox" v-if="index<positionBox.length-5" :key="index+'y'" style="float: left; width: 105%">-->
-    <div v-for="(yItem, index) in positionBox" :key="index+'y'" style="float: left; width: 105%">
-<!--      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;color: #00feff">-->
-      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;">
+    <div
+      v-for="(yItem, index) in positionBox"
+      :key="index+'y'"
+      style="float: left; width: 105%"
+    >
+      <!--      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;color: #00feff">-->
+      <div
+        v-for="(xItem, indx) in yItem"
+        :key="indx+'x'"
+        :style="classInfo"
+        style="float: left; border: 0.2px solid #b3d4fc ;"
+      >
         {{ xItem.el?1:0 }}
       </div>
     </div>
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 5c4f8cc660..07eb624dc4 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -1,15 +1,32 @@
 <template>
-  <div class="bg" :style="customStyle" @scroll="canvasScroll">
+  <div
+    class="bg"
+    :style="customStyle"
+    @scroll="canvasScroll"
+  >
     <canvas-opt-bar />
-    <div id="canvasInfoMain" ref="canvasInfoMain" :style="canvasInfoMainStyle">
-      <el-row v-if="showUnpublishedArea" class="custom-position">
+    <div
+      id="canvasInfoMain"
+      ref="canvasInfoMain"
+      :style="canvasInfoMainStyle"
+    >
+      <el-row
+        v-if="showUnpublishedArea"
+        class="custom-position"
+      >
         <div style="text-align: center">
-          <svg-icon icon-class="unpublished" style="font-size: 75px" />
+          <svg-icon
+            icon-class="unpublished"
+            style="font-size: 75px"
+          />
           <br>
           <span>{{ $t('panel.panel_off') }}</span>
         </div>
       </el-row>
-      <el-row v-else-if="componentDataShow && componentDataShow.length===0" class="custom-position">
+      <el-row
+        v-else-if="componentDataShow && componentDataShow.length===0"
+        class="custom-position"
+      >
         {{ $t('panel.panelNull') }}
       </el-row>
       <div
@@ -44,15 +61,37 @@
           :destroy-on-close="true"
           top="5vh"
         >
-          <span v-if="chartDetailsVisible" style="position: absolute;right: 70px;top:15px">
-            <el-button v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
+          <span
+            v-if="chartDetailsVisible"
+            style="position: absolute;right: 70px;top:15px"
+          >
+            <el-button
+              v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
+              class="el-icon-picture-outline"
+              size="mini"
+              @click="exportViewImg"
+            >
               {{ $t('chart.export_img') }}
             </el-button>
-            <el-button v-if="showChartInfoType==='details'" size="mini" @click="exportExcel">
-              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{ $t('chart.export') }}Excel
+            <el-button
+              v-if="showChartInfoType==='details'"
+              size="mini"
+              @click="exportExcel"
+            >
+              <svg-icon
+                icon-class="ds-excel"
+                class="ds-icon-excel"
+              />{{ $t('chart.export') }}Excel
             </el-button>
           </span>
-          <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :canvas-style-data="canvasStyleData" :open-type="showChartInfoType" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+          <UserViewDialog
+            v-if="chartDetailsVisible"
+            ref="userViewDialog"
+            :canvas-style-data="canvasStyleData"
+            :open-type="showChartInfoType"
+            :chart="showChartInfo"
+            :chart-table="showChartTableInfo"
+          />
         </el-dialog>
 
         <!--手机视图详情-->
@@ -62,7 +101,12 @@
           class="mobile-dialog-css"
           :destroy-on-close="true"
         >
-          <UserViewMobileDialog v-if="mobileChartDetailsVisible" :canvas-style-data="canvasStyleData" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+          <UserViewMobileDialog
+            v-if="mobileChartDetailsVisible"
+            :canvas-style-data="canvasStyleData"
+            :chart="showChartInfo"
+            :chart-table="showChartTableInfo"
+          />
         </el-dialog>
       </div>
     </div>
@@ -177,12 +221,6 @@ export default {
       buttonFilterMap: null
     }
   },
-  created() {
-    // 取消视图请求
-    this.$cancelRequest('/chart/view/getData/**')
-    this.$cancelRequest('/api/link/viewDetail/**')
-    this.$cancelRequest('/static-resource/**')
-  },
   computed: {
     mainActiveName() {
       return this.$store.state.panel.mainActiveName
@@ -253,7 +291,7 @@ export default {
     },
     // 此处单独计算componentData的值 不放入全局mapState中
     componentDataInfo() {
-      return this.componentDataShow||[]
+      return this.componentDataShow || []
     },
     ...mapState([
       'isClickComponent'
@@ -297,6 +335,12 @@ export default {
       deep: true
     }
   },
+  created() {
+    // 取消视图请求
+    this.$cancelRequest('/chart/view/getData/**')
+    this.$cancelRequest('/api/link/viewDetail/**')
+    this.$cancelRequest('/static-resource/**')
+  },
   mounted() {
     this._isMobile()
     this.initListen()
diff --git a/frontend/src/components/canvas/components/Editor/PreviewEject.vue b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
index 3c68e95923..da63010bb5 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewEject.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-loading="dataLoading" class="bg" :style="bgStyle">
+  <div
+    v-loading="dataLoading"
+    class="bg"
+    :style="bgStyle"
+  >
     <Preview
       v-if="!dataLoading"
       :component-data="componentData"
diff --git a/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue b/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue
index 565c5e322d..736c06bbf0 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue
@@ -1,6 +1,10 @@
 <template>
   <div style="width: 100%;height: 100vh;">
-    <fullscreen style="height:100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen" @change="fullscreenChange">
+    <fullscreen
+      style="height:100%;background: #f7f8fa;overflow-y: auto"
+      :fullscreen.sync="fullscreen"
+      @change="fullscreenChange"
+    >
       <Preview
         v-if="fullscreen"
         :component-data="componentData"
@@ -20,6 +24,11 @@ import { mapState } from 'vuex'
 
 export default {
   components: { Preview },
+  data() {
+    return {
+      fullscreen: false
+    }
+  },
   computed: {
     panelInfo() {
       return this.$store.state.panel.panelInfo
@@ -29,11 +38,6 @@ export default {
       'componentData'
     ])
   },
-  data() {
-    return {
-      fullscreen: false
-    }
-  },
   mounted() {
     this.fullscreen = false
     this.$nextTick(() => (this.fullscreen = true))
diff --git a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
index efed07fbad..aaf2ec1935 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
@@ -1,7 +1,14 @@
 <template>
-  <div class="bg" :style="customStyle">
+  <div
+    class="bg"
+    :style="customStyle"
+  >
     <canvas-opt-bar />
-    <div id="canvasInfoMain" ref="canvasInfoMain" style="width: 100%;height: 100%">
+    <div
+      id="canvasInfoMain"
+      ref="canvasInfoMain"
+      style="width: 100%;height: 100%"
+    >
       <div
         id="canvasInfoTemp"
         ref="canvasInfoTemp"
@@ -10,7 +17,11 @@
         @mouseup="deselectCurComponent"
         @mousedown="handleMouseDown"
       >
-        <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
+        <el-row
+          v-if="componentDataShow.length===0"
+          style="height: 100%;"
+          class="custom-position"
+        >
           {{ $t('panel.panelNull') }}
         </el-row>
         <ComponentWrapper
@@ -29,12 +40,23 @@
           :destroy-on-close="true"
         >
           <span style="position: absolute;right: 70px;top:15px">
-            <el-button size="mini" @click="exportExcel">
-              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
+            <el-button
+              size="mini"
+              @click="exportExcel"
+            >
+              <svg-icon
+                icon-class="ds-excel"
+                class="ds-icon-excel"
+              />
               {{ $t('chart.export_details') }}
             </el-button>
           </span>
-          <UserViewDialog ref="userViewDialog" :canvas-style-data="canvasStyleData" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+          <UserViewDialog
+            ref="userViewDialog"
+            :canvas-style-data="canvasStyleData"
+            :chart="showChartInfo"
+            :chart-table="showChartTableInfo"
+          />
         </el-dialog>
       </div>
     </div>
@@ -47,7 +69,7 @@ import { mapState } from 'vuex'
 import ComponentWrapper from './ComponentWrapper'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import { uuid } from 'vue-uuid'
-import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
+import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
index 5e7cad3e74..270b0ab830 100644
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
@@ -1,30 +1,75 @@
 <template>
   <div>
     <div style="width: 100%;">
-      <el-dropdown trigger="click" @mouseup="handleMouseUp">
+      <el-dropdown
+        trigger="click"
+        @mouseup="handleMouseUp"
+      >
         <slot name="icon" />
         <el-dropdown-menu v-if="curComponent">
-          <el-dropdown-item v-if="editFilter.includes(curComponent.type)" icon="el-icon-edit-outline" @click.native="edit">{{ $t('panel.edit') }}</el-dropdown-item>
-          <el-dropdown-item v-if="curComponent.type != 'custom-button'" icon="el-icon-document-copy" @click.native="copy">{{ $t('panel.copy') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-delete" @click.native="deleteComponent">{{ $t('panel.delete') }}</el-dropdown-item>
+          <el-dropdown-item
+            v-if="editFilter.includes(curComponent.type)"
+            icon="el-icon-edit-outline"
+            @click.native="edit"
+          >{{ $t('panel.edit') }}</el-dropdown-item>
+          <el-dropdown-item
+            v-if="curComponent.type != 'custom-button'"
+            icon="el-icon-document-copy"
+            @click.native="copy"
+          >{{ $t('panel.copy') }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-delete"
+            @click.native="deleteComponent"
+          >{{ $t('panel.delete') }}</el-dropdown-item>
           <el-dropdown-item v-if="!curComponent.auxiliaryMatrix">
             <el-dropdown placement="right-start">
               <span class="el-icon-copy-document">
                 {{ $t('panel.level') }} <i class="el-icon-arrow-right el-icon--right" />
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item icon="el-icon-upload2" @click.native="topComponent">{{ $t('panel.topComponent') }}</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-download" @click.native="bottomComponent">{{ $t('panel.bottomComponent') }}</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-arrow-up" @click.native="upComponent">{{ $t('panel.upComponent') }}</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-arrow-down" @click.native="downComponent">{{ $t('panel.downComponent') }}</el-dropdown-item>
+                <el-dropdown-item
+                  icon="el-icon-upload2"
+                  @click.native="topComponent"
+                >{{ $t('panel.topComponent') }}</el-dropdown-item>
+                <el-dropdown-item
+                  icon="el-icon-download"
+                  @click.native="bottomComponent"
+                >{{ $t('panel.bottomComponent') }}</el-dropdown-item>
+                <el-dropdown-item
+                  icon="el-icon-arrow-up"
+                  @click.native="upComponent"
+                >{{ $t('panel.upComponent') }}</el-dropdown-item>
+                <el-dropdown-item
+                  icon="el-icon-arrow-down"
+                  @click.native="downComponent"
+                >{{ $t('panel.downComponent') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item v-if="linkageSettingShow" icon="el-icon-link" @click.native="linkageSetting">{{ $t('panel.linkage_setting') }}</el-dropdown-item>
-          <el-dropdown-item v-if="'de-tabs'===curComponent.type" icon="el-icon-plus" @click.native="addTab">{{ $t('panel.add_tab') }}</el-dropdown-item>
-          <el-dropdown-item v-if="linkJumpSetShow" icon="el-icon-connection" @click.native="linkJumpSet">{{ $t('panel.setting_jump') }}</el-dropdown-item>
-          <el-dropdown-item v-if="curComponent.type != 'custom-button'" icon="el-icon-magic-stick" @click.native="boardSet">{{ $t('panel.component_style') }}</el-dropdown-item>
-          <el-dropdown-item v-if="curComponent.type != 'custom-button'" @click.native="hyperlinksSet">
+          <el-dropdown-item
+            v-if="linkageSettingShow"
+            icon="el-icon-link"
+            @click.native="linkageSetting"
+          >{{ $t('panel.linkage_setting') }}</el-dropdown-item>
+          <el-dropdown-item
+            v-if="'de-tabs'===curComponent.type"
+            icon="el-icon-plus"
+            @click.native="addTab"
+          >{{ $t('panel.add_tab') }}</el-dropdown-item>
+          <el-dropdown-item
+            v-if="linkJumpSetShow"
+            icon="el-icon-connection"
+            @click.native="linkJumpSet"
+          >{{ $t('panel.setting_jump') }}</el-dropdown-item>
+          <el-dropdown-item
+            v-if="curComponent.type != 'custom-button'"
+            icon="el-icon-magic-stick"
+            @click.native="boardSet"
+          >{{ $t('panel.component_style') }}</el-dropdown-item>
+          <el-dropdown-item
+            v-if="curComponent.type != 'custom-button'"
+            @click.native="hyperlinksSet"
+          >
             <i class="icon iconfont icon-font icon-chaolianjie1" />
             {{ $t('panel.hyperlinks') }}
           </el-dropdown-item>
@@ -40,7 +85,11 @@
       :append-to-body="true"
       :show-close="true"
     >
-      <HyperlinksDialog v-if="hyperlinksSetVisible" :link-info="curComponent.hyperlinks" @onClose="hyperlinksSetVisible = false" />
+      <HyperlinksDialog
+        v-if="hyperlinksSetVisible"
+        :link-info="curComponent.hyperlinks"
+        @onClose="hyperlinksSetVisible = false"
+      />
     </el-dialog>
   </div>
 
@@ -83,14 +132,14 @@ export default {
   },
   computed: {
     linkJumpSetShow() {
-      return this.curComponent.type === 'view'
-        && !this.jumpExcludeViewType.includes(this.curComponent.propValue.innerType)
-        && !(this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
+      return this.curComponent.type === 'view' &&
+        !this.jumpExcludeViewType.includes(this.curComponent.propValue.innerType) &&
+        !(this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
     },
     linkageSettingShow() {
-      return this.curComponent.type === 'view'
-        && !this.linkageExcludeViewType.includes(this.curComponent.propValue.innerType)
-        && !(this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
+      return this.curComponent.type === 'view' &&
+        !this.linkageExcludeViewType.includes(this.curComponent.propValue.innerType) &&
+        !(this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
     },
     panelInfo() {
       return this.$store.state.panel.panelInfo
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue b/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue
index 9af209dd06..7b488f6e62 100644
--- a/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue
@@ -1,16 +1,43 @@
 <template>
   <div>
     <div style="width: 100%;">
-      <el-dropdown trigger="click" @mouseup="handleMouseUp">
-        <el-button ref="trackButton" class="icon iconfont icon-shezhi">TEST</el-button>
+      <el-dropdown
+        trigger="click"
+        @mouseup="handleMouseUp"
+      >
+        <el-button
+          ref="trackButton"
+          class="icon iconfont icon-shezhi"
+        >TEST</el-button>
         <el-dropdown-menu>
-          <el-dropdown-item icon="el-icon-document-copy" @click.native="copy">{{ $t('panel.copy') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-delete" @click.native="deleteComponent">{{ $t('panel.delete') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-upload2" @click.native="topComponent">{{ $t('panel.topComponent') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-download" @click.native="bottomComponent">{{ $t('panel.bottomComponent') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-arrow-up" @click.native="upComponent">{{ $t('panel.upComponent') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-arrow-down" @click.native="downComponent">{{ $t('panel.downComponent') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-link" @click.native="linkageSetting">联动设置</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-document-copy"
+            @click.native="copy"
+          >{{ $t('panel.copy') }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-delete"
+            @click.native="deleteComponent"
+          >{{ $t('panel.delete') }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-upload2"
+            @click.native="topComponent"
+          >{{ $t('panel.topComponent') }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-download"
+            @click.native="bottomComponent"
+          >{{ $t('panel.bottomComponent') }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-arrow-up"
+            @click.native="upComponent"
+          >{{ $t('panel.upComponent') }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-arrow-down"
+            @click.native="downComponent"
+          >{{ $t('panel.downComponent') }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-link"
+            @click.native="linkageSetting"
+          >联动设置</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
diff --git a/frontend/src/components/canvas/components/Editor/Shape.vue b/frontend/src/components/canvas/components/Editor/Shape.vue
index e8cac6dc69..9b258ca8f4 100644
--- a/frontend/src/components/canvas/components/Editor/Shape.vue
+++ b/frontend/src/components/canvas/components/Editor/Shape.vue
@@ -1,7 +1,21 @@
 <template>
-  <div class="shape" :class="classInfo" @mouseenter="enter" @mouseleave="leave" @click="selectCurComponent" @mousedown="handleMouseDownOnShape">
-    <span v-show="isActive()" class="iconfont icon-xiangyouxuanzhuan" @mousedown="handleRotate" />
-    <span v-show="element.isLock" class="iconfont icon-suo" />
+  <div
+    class="shape"
+    :class="classInfo"
+    @mouseenter="enter"
+    @mouseleave="leave"
+    @click="selectCurComponent"
+    @mousedown="handleMouseDownOnShape"
+  >
+    <span
+      v-show="isActive()"
+      class="iconfont icon-xiangyouxuanzhuan"
+      @mousedown="handleRotate"
+    />
+    <span
+      v-show="element.isLock"
+      class="iconfont icon-suo"
+    />
 
     <!--    <span v-show="isActive()" class="iconfont icon-more">-->
     <!--      <el-button-->
diff --git a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
index 86e93091df..7e086d1772 100644
--- a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
@@ -6,7 +6,11 @@
     trigger="click"
   >
     <el-row>
-      <el-form ref="form" size="mini" label-width="70px">
+      <el-form
+        ref="form"
+        size="mini"
+        label-width="70px"
+      >
         <el-form-item :label="$t('panel.video_type')">
           <el-radio-group v-model="streamMediaInfoTemp.videoType">
             <el-radio :label="'flv'">FLV</el-radio>
@@ -42,12 +46,18 @@
           </el-form-item>
         </el-row>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
+          <el-button
+            type="primary"
+            @click="onSubmit"
+          >{{ $t('panel.confirm') }}</el-button>
           <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
         </el-form-item>
       </el-form>
     </el-row>
-    <i slot="reference" class="icon iconfont icon-chaolianjie" />
+    <i
+      slot="reference"
+      class="icon iconfont icon-chaolianjie"
+    />
   </el-popover>
 </template>
 
@@ -81,6 +91,12 @@ export default {
       ]
     }
   },
+  computed: {
+    ...mapState([
+      'curComponent',
+      'curActiveTabInner'
+    ])
+  },
   watch: {
     linkInfo: {
       handler: function() {
@@ -92,14 +108,6 @@ export default {
   created() {
     this.init()
   },
-  mounted() {
-  },
-  computed: {
-    ...mapState([
-      'curComponent',
-      'curActiveTabInner'
-    ])
-  },
   methods: {
     init() {
       this.streamMediaInfoTemp = deepCopy(this.linkInfo)
diff --git a/frontend/src/components/canvas/components/Editor/VideoLinks.vue b/frontend/src/components/canvas/components/Editor/VideoLinks.vue
index 024550c696..a92e603282 100644
--- a/frontend/src/components/canvas/components/Editor/VideoLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/VideoLinks.vue
@@ -6,7 +6,11 @@
     trigger="click"
   >
     <el-row>
-      <el-form ref="form" size="mini" label-width="70px">
+      <el-form
+        ref="form"
+        size="mini"
+        label-width="70px"
+      >
         <!--        <el-form-item :label="$t('panel.video_type')">-->
         <!--          <el-radio-group v-model="linkInfoTemp.videoType">-->
         <!--            <el-radio :label="'web'">{{$t('panel.online_video')}}</el-radio>-->
@@ -15,12 +19,18 @@
         <!--          </el-radio-group>-->
         <!--        </el-form-item>-->
         <el-form-item :label="$t('panel.auto_play')">
-          <el-switch v-model="linkInfoTemp[linkInfoTemp.videoType].autoplay" size="mini" />
+          <el-switch
+            v-model="linkInfoTemp[linkInfoTemp.videoType].autoplay"
+            size="mini"
+          />
           <span style="color: #909399; font-size: 8px;margin-left: 3px">
             Tips:{{ $t('panel.video_tips') }}
           </span>
         </el-form-item>
-        <el-form-item v-if="linkInfoTemp.videoType==='web'" :label="$t('panel.play_frequency')">
+        <el-form-item
+          v-if="linkInfoTemp.videoType==='web'"
+          :label="$t('panel.play_frequency')"
+        >
           <el-radio-group v-model="linkInfoTemp[linkInfoTemp.videoType].loop">
             <el-radio :label="false">{{ $t('panel.play_once') }}</el-radio>
             <el-radio :label="true">{{ $t('panel.play_circle') }}</el-radio>
@@ -30,12 +40,18 @@
           <el-input v-model="linkInfoTemp[linkInfoTemp.videoType].sources[0].src" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
+          <el-button
+            type="primary"
+            @click="onSubmit"
+          >{{ $t('panel.confirm') }}</el-button>
           <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
         </el-form-item>
       </el-form>
     </el-row>
-    <i slot="reference" class="icon iconfont icon-chaolianjie" />
+    <i
+      slot="reference"
+      class="icon iconfont icon-chaolianjie"
+    />
   </el-popover>
 </template>
 
@@ -69,6 +85,12 @@ export default {
       ]
     }
   },
+  computed: {
+    ...mapState([
+      'curComponent',
+      'curActiveTabInner'
+    ])
+  },
   watch: {
     linkInfo: {
       handler: function() {
@@ -80,14 +102,6 @@ export default {
   created() {
     this.init()
   },
-  mounted() {
-  },
-  computed: {
-    ...mapState([
-      'curComponent',
-      'curActiveTabInner'
-    ])
-  },
   methods: {
     init() {
       this.linkInfoTemp = deepCopy(this.linkInfo)
diff --git a/frontend/src/components/canvas/components/Editor/ViewTrackBar.vue b/frontend/src/components/canvas/components/Editor/ViewTrackBar.vue
index 605c0627b5..b044107dfa 100644
--- a/frontend/src/components/canvas/components/Editor/ViewTrackBar.vue
+++ b/frontend/src/components/canvas/components/Editor/ViewTrackBar.vue
@@ -1,9 +1,21 @@
 <template>
   <div>
     <el-dropdown trigger="click">
-      <input id="input" ref="trackButton" type="button" hidden>
-      <el-dropdown-menu class="track-menu" :append-to-body="false">
-        <el-dropdown-item v-for="(item, key) in trackMenu" :key="key" @click.native="trackMenuClick(item)"><span class="menu-item">{{ i18n_map[item] }}</span></el-dropdown-item>
+      <input
+        id="input"
+        ref="trackButton"
+        type="button"
+        hidden
+      >
+      <el-dropdown-menu
+        class="track-menu"
+        :append-to-body="false"
+      >
+        <el-dropdown-item
+          v-for="(item, key) in trackMenu"
+          :key="key"
+          @click.native="trackMenuClick(item)"
+        ><span class="menu-item">{{ i18n_map[item] }}</span></el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </div>
diff --git a/frontend/src/components/canvas/components/Editor/fieldsList.vue b/frontend/src/components/canvas/components/Editor/fieldsList.vue
index f6dd8dda9a..06c2513694 100644
--- a/frontend/src/components/canvas/components/Editor/fieldsList.vue
+++ b/frontend/src/components/canvas/components/Editor/fieldsList.vue
@@ -1,6 +1,13 @@
 <template>
   <div @mousedown="fieldsAreaDown">
-    <el-button v-for="(field) in fields" :title="field.name" :key="field.id" size="mini" class="field-area" @click="fieldSelect(field)">
+    <el-button
+      v-for="(field) in fields"
+      :key="field.id"
+      :title="field.name"
+      size="mini"
+      class="field-area"
+      @click="fieldSelect(field)"
+    >
       {{ field.name }}
     </el-button>
   </div>
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 722b519b28..8c0c0dbe8b 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -14,8 +14,15 @@
     @scroll="canvasScroll"
   >
     <!-- 网格线 -->
-    <Grid v-if="showGrid" :matrix-style="matrixStyle" />
-    <PGrid v-if="psDebug" :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />
+    <Grid
+      v-if="showGrid"
+      :matrix-style="matrixStyle"
+    />
+    <PGrid
+      v-if="psDebug"
+      :position-box="positionBoxInfoArray"
+      :matrix-style="matrixStyle"
+    />
     <!--页面组件列表展示-->
     <de-drag
       v-for="(item, index) in componentData"
@@ -140,12 +147,27 @@
       :show-close="true"
       top="5vh"
     >
-      <span v-if="chartDetailsVisible" style="position: absolute;right: 70px;top:15px">
-        <el-button v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
+      <span
+        v-if="chartDetailsVisible"
+        style="position: absolute;right: 70px;top:15px"
+      >
+        <el-button
+          v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
+          class="el-icon-picture-outline"
+          size="mini"
+          @click="exportViewImg"
+        >
           {{ $t('chart.export_img') }}
         </el-button>
-        <el-button v-if="showChartInfoType==='details'" size="mini" @click="exportExcel">
-          <svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{ $t('chart.export') }}Excel
+        <el-button
+          v-if="showChartInfoType==='details'"
+          size="mini"
+          @click="exportExcel"
+        >
+          <svg-icon
+            icon-class="ds-excel"
+            class="ds-icon-excel"
+          />{{ $t('chart.export') }}Excel
         </el-button>
       </span>
       <UserViewDialog
@@ -166,7 +188,11 @@
       :destroy-on-close="true"
       :append-to-body="true"
     >
-      <LinkJumpSet v-if="linkJumpSetVisible" :view-id="linkJumpSetViewId" @closeJumpSetDialog="closeJumpSetDialog" />
+      <LinkJumpSet
+        v-if="linkJumpSetVisible"
+        :view-id="linkJumpSetViewId"
+        @closeJumpSetDialog="closeJumpSetDialog"
+      />
     </el-dialog>
 
     <el-dialog
@@ -178,7 +204,10 @@
       :destroy-on-close="true"
       :append-to-body="true"
     >
-      <background v-if="boardSetVisible" @backgroundSetClose="backgroundSetClose" />
+      <background
+        v-if="boardSetVisible"
+        @backgroundSetClose="backgroundSetClose"
+      />
     </el-dialog>
   </div>
 </template>
@@ -488,6 +517,7 @@ function removeItem(index) {
       }
     })
     this.yourList.splice(index, 1, {})
+    // eslint-disable-next-line
   } catch (e) {
   }
 }
@@ -784,6 +814,7 @@ export default {
     Shape,
     ContextMenu,
     MarkLine,
+    // eslint-disable-next-line
     Area,
     Grid,
     PGrid,
diff --git a/frontend/src/components/canvas/components/EventList.vue b/frontend/src/components/canvas/components/EventList.vue
index 301a76f557..32d9c200f6 100644
--- a/frontend/src/components/canvas/components/EventList.vue
+++ b/frontend/src/components/canvas/components/EventList.vue
@@ -17,10 +17,29 @@
     <!-- 选择事件 -->
     <Modal v-model="isShowEvent">
       <el-tabs v-model="eventActiveName">
-        <el-tab-pane v-for="item in eventList" :key="item.key" :label="item.label" :name="item.key" style="padding: 0 20px">
-          <el-input v-if="item.key == 'redirect'" v-model="item.param" type="textarea" placeholder="请输入完整的 URL" />
-          <el-input v-if="item.key == 'alert'" v-model="item.param" type="textarea" placeholder="请输入要 alert 的内容" />
-          <el-button style="margin-top: 20px;" @click="addEvent(item.key, item.param)">确定</el-button>
+        <el-tab-pane
+          v-for="item in eventList"
+          :key="item.key"
+          :label="item.label"
+          :name="item.key"
+          style="padding: 0 20px"
+        >
+          <el-input
+            v-if="item.key == 'redirect'"
+            v-model="item.param"
+            type="textarea"
+            placeholder="请输入完整的 URL"
+          />
+          <el-input
+            v-if="item.key == 'alert'"
+            v-model="item.param"
+            type="textarea"
+            placeholder="请输入要 alert 的内容"
+          />
+          <el-button
+            style="margin-top: 20px;"
+            @click="addEvent(item.key, item.param)"
+          >确定</el-button>
         </el-tab-pane>
       </el-tabs>
     </Modal>
diff --git a/frontend/src/components/canvas/components/FilterTextAttr.vue b/frontend/src/components/canvas/components/FilterTextAttr.vue
index 58d03633aa..8ea39c4760 100644
--- a/frontend/src/components/canvas/components/FilterTextAttr.vue
+++ b/frontend/src/components/canvas/components/FilterTextAttr.vue
@@ -1,48 +1,100 @@
 <template>
-  <el-card class="el-card-main" :style="mainStyle">
+  <el-card
+    class="el-card-main"
+    :style="mainStyle"
+  >
     <div style="position: relative;">
       <el-tooltip :content="$t('panel.fontSize')">
 
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="iconfont icon-font_size" />
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="iconfont icon-font_size"
+        />
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" @change="styleChange"/>
+        <el-input
+          v-model="styleInfo.fontSize"
+          type="number"
+          size="mini"
+          min="12"
+          max="128"
+          @change="styleChange"
+        />
       </div>
 
       <el-tooltip :content="$t('panel.fontWeight')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-font-weight-bold" />
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="icon iconfont icon-font-weight-bold"
+        />
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange"/>
+        <el-input
+          v-model="styleInfo.fontWeight"
+          type="number"
+          size="mini"
+          min="100"
+          step="100"
+          max="900"
+          @change="styleChange"
+        />
       </div>
 
       <el-tooltip :content="$t('panel.letterSpacing')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-letter_spacing" />
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="icon iconfont icon-letter_spacing"
+        />
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange"/>
+        <el-input
+          v-model="styleInfo.letterSpacing"
+          type="number"
+          size="mini"
+          min="0"
+          max="99"
+          @change="styleChange"
+        />
       </div>
 
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
           <el-tooltip :content="$t('panel.color')">
-            <i class="icon iconfont icon-zimua" @click="goColor" />
+            <i
+              class="icon iconfont icon-zimua"
+              @click="goColor"
+            />
           </el-tooltip>
           <div :style="letterDivColor" />
-          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
+          <el-color-picker
+            ref="colorPicker"
+            v-model="styleInfo.color"
+            style="margin-top: 7px;height: 0px"
+            size="mini"
+            @change="styleChange"
+          />
         </div>
       </div>
 
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
           <el-tooltip content="背景颜色">
-            <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
+            <i
+              class="iconfont icon-beijingse1"
+              @click="goBackgroundColor"
+            />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
+          <el-color-picker
+            ref="backgroundColorPicker"
+            v-model="styleInfo.backgroundColor"
+            style="margin-top: 7px;height: 0px"
+            size="mini"
+            @change="styleChange"
+          />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/canvas/components/Modal.vue b/frontend/src/components/canvas/components/Modal.vue
index 2040566ab4..894a51e9cb 100644
--- a/frontend/src/components/canvas/components/Modal.vue
+++ b/frontend/src/components/canvas/components/Modal.vue
@@ -1,6 +1,13 @@
 <template>
-  <div v-if="show" class="modal-bg" @click="hide">
-    <div class="fadeInLeft animated modal" @click="stopPropagation">
+  <div
+    v-if="show"
+    class="modal-bg"
+    @click="hide"
+  >
+    <div
+      class="fadeInLeft animated modal"
+      @click="stopPropagation"
+    >
       <slot />
     </div>
   </div>
diff --git a/frontend/src/components/canvas/components/RectangleAttr.vue b/frontend/src/components/canvas/components/RectangleAttr.vue
index c32e14d660..57ed0d730c 100644
--- a/frontend/src/components/canvas/components/RectangleAttr.vue
+++ b/frontend/src/components/canvas/components/RectangleAttr.vue
@@ -1,9 +1,16 @@
 <template>
-  <el-card class="el-card-main" :style="mainStyle">
+  <el-card
+    class="el-card-main"
+    :style="mainStyle"
+  >
     <div style="position: relative;">
       <div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
         <el-tooltip content="边框风格">
-          <el-select v-model="styleInfo.borderStyle" size="mini" @change="styleChange">
+          <el-select
+            v-model="styleInfo.borderStyle"
+            size="mini"
+            @change="styleChange"
+          >
             <el-option
               v-for="item in lineStyle"
               :key="item.value"
@@ -21,7 +28,12 @@
 
       <div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-tooltip content="边框宽度">
-          <el-select v-model="styleInfo.borderWidth" size="mini" placeholder="" @change="styleChange">
+          <el-select
+            v-model="styleInfo.borderWidth"
+            size="mini"
+            placeholder=""
+            @change="styleChange"
+          >
             <el-option
               v-for="item in lineFont"
               :key="item.value"
@@ -33,38 +45,78 @@
       </div>
 
       <el-tooltip :content="$t('panel.borderRadius')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-fangxing-" />
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="icon iconfont icon-fangxing-"
+        />
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.borderRadius" type="number" size="mini" min="0" max="100" step="1" @change="styleChange" />
+        <el-input
+          v-model="styleInfo.borderRadius"
+          type="number"
+          size="mini"
+          min="0"
+          max="100"
+          step="1"
+          @change="styleChange"
+        />
       </div>
 
       <el-tooltip :content="$t('panel.opacity')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="icon iconfont icon-touming"
+        />
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" @change="styleChange" />
+        <el-input
+          v-model="innerOpacity"
+          type="number"
+          size="mini"
+          min="0"
+          max="100"
+          step="10"
+          @change="styleChange"
+        />
       </div>
 
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
           <el-tooltip content="边框颜色">
-            <i class="iconfont icon-huabi" @click="goBoardColor" />
+            <i
+              class="iconfont icon-huabi"
+              @click="goBoardColor"
+            />
           </el-tooltip>
           <div :style="boardDivColor" />
-          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
+          <el-color-picker
+            ref="boardColorPicker"
+            v-model="styleInfo.borderColor"
+            style="margin-top: 7px;height: 0px"
+            size="mini"
+            @change="styleChange"
+          />
         </div>
       </div>
 
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
           <el-tooltip content="背景颜色">
-            <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
+            <i
+              class="iconfont icon-beijingse1"
+              @click="goBackgroundColor"
+            />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
+          <el-color-picker
+            ref="backgroundColorPicker"
+            v-model="styleInfo.backgroundColor"
+            style="margin-top: 7px;height: 0px"
+            size="mini"
+            @change="styleChange"
+          />
         </div>
       </div>
 
@@ -122,20 +174,8 @@ export default {
       innerOpacity: 0
     }
   },
-  watch: {
-    innerOpacity: {
-      handler(oldVal, newVal) {
-        this.styleInfo['opacity'] = this.innerOpacity / 100
-      }
-    }
-  },
-  mounted() {
-    if (this.styleInfo['opacity']) {
-      this.innerOpacity = this.styleInfo['opacity'] * 100
-    }
-  },
-  computed: {
 
+  computed: {
     boardDivColor() {
       const style = {
         height: '2px',
@@ -175,6 +215,18 @@ export default {
     ])
 
   },
+  watch: {
+    innerOpacity: {
+      handler(oldVal, newVal) {
+        this.styleInfo['opacity'] = this.innerOpacity / 100
+      }
+    }
+  },
+  mounted() {
+    if (this.styleInfo['opacity']) {
+      this.innerOpacity = this.styleInfo['opacity'] * 100
+    }
+  },
   methods: {
     goBoardColor() {
       this.$refs.boardColorPicker.handleTrigger()
diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue
index ab6926eefb..7c0fe79921 100644
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/frontend/src/components/canvas/components/TextAttr.vue
@@ -1,8 +1,21 @@
 <template>
-  <el-card class="el-card-main" :style="mainStyle">
-    <div id="main-attr" style="position: relative;">
-      <div v-if="attrShow('textAlign')" style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-radio-group v-model="styleInfo.textAlign" size="mini" @change="styleChange">
+  <el-card
+    class="el-card-main"
+    :style="mainStyle"
+  >
+    <div
+      id="main-attr"
+      style="position: relative;"
+    >
+      <div
+        v-if="attrShow('textAlign')"
+        style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
+        <el-radio-group
+          v-model="styleInfo.textAlign"
+          size="mini"
+          @change="styleChange"
+        >
           <el-radio-button
             v-for="item in textAlignOptions"
             :key="item.label"
@@ -16,9 +29,16 @@
           </el-radio-button>
         </el-radio-group>
       </div>
-      <div v-if="attrShow('borderStyle')" style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
+      <div
+        v-if="attrShow('borderStyle')"
+        style="width: 80px;margin-top: 2px;margin-left: 2px;float: left"
+      >
         <el-tooltip content="边框风格">
-          <el-select v-model="styleInfo.borderStyle" size="mini" @change="styleChange">
+          <el-select
+            v-model="styleInfo.borderStyle"
+            size="mini"
+            @change="styleChange"
+          >
             <el-option
               v-for="item in lineStyle"
               :key="item.value"
@@ -34,9 +54,17 @@
         </el-tooltip>
       </div>
 
-      <div v-if="attrShow('borderWidth')" style="width: 60px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div
+        v-if="attrShow('borderWidth')"
+        style="width: 60px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
         <el-tooltip content="边框宽度">
-          <el-select v-model="styleInfo.borderWidth" size="mini" placeholder="" @change="styleChange">
+          <el-select
+            v-model="styleInfo.borderWidth"
+            size="mini"
+            placeholder=""
+            @change="styleChange"
+          >
             <el-option
               v-for="item in lineFont"
               :key="item.value"
@@ -46,138 +74,323 @@
           </el-select>
         </el-tooltip>
       </div>
-      <el-tooltip v-if="attrShow('fontSize')" :content="$t('panel.fontSize')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="iconfont icon-font_size" />
+      <el-tooltip
+        v-if="attrShow('fontSize')"
+        :content="$t('panel.fontSize')"
+      >
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="iconfont icon-font_size"
+        />
       </el-tooltip>
 
-      <div v-if="attrShow('fontSize')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="initFontSize" type="number" size="mini" :min="miniFontSize" :max="maxFontSize" @change="styleChange" />
+      <div
+        v-if="attrShow('fontSize')"
+        style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
+        <el-input
+          v-model="initFontSize"
+          type="number"
+          size="mini"
+          :min="miniFontSize"
+          :max="maxFontSize"
+          @change="styleChange"
+        />
       </div>
 
-      <el-tooltip v-if="attrShow('fontWeight')" :content="$t('panel.fontWeight')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-font-weight-bold" />
+      <el-tooltip
+        v-if="attrShow('fontWeight')"
+        :content="$t('panel.fontWeight')"
+      >
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="icon iconfont icon-font-weight-bold"
+        />
       </el-tooltip>
 
-      <div v-if="attrShow('fontWeight')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange" />
+      <div
+        v-if="attrShow('fontWeight')"
+        style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
+        <el-input
+          v-model="styleInfo.fontWeight"
+          type="number"
+          size="mini"
+          min="100"
+          step="100"
+          max="900"
+          @change="styleChange"
+        />
       </div>
 
-      <el-tooltip v-if="attrShow('letterSpacing')" :content="$t('panel.letterSpacing')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-letter_spacing" />
+      <el-tooltip
+        v-if="attrShow('letterSpacing')"
+        :content="$t('panel.letterSpacing')"
+      >
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="icon iconfont icon-letter_spacing"
+        />
       </el-tooltip>
 
-      <div v-if="attrShow('letterSpacing')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange" />
+      <div
+        v-if="attrShow('letterSpacing')"
+        style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
+        <el-input
+          v-model="styleInfo.letterSpacing"
+          type="number"
+          size="mini"
+          min="0"
+          max="99"
+          @change="styleChange"
+        />
       </div>
 
-      <el-tooltip v-if="attrShow('margin')" :content="$t('panel.margin')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-margin" />
+      <el-tooltip
+        v-if="attrShow('margin')"
+        :content="$t('panel.margin')"
+      >
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="icon iconfont icon-margin"
+        />
       </el-tooltip>
 
-      <div v-if="attrShow('margin')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.margin" type="number" size="mini" min="0" max="99" @change="styleChange" />
+      <div
+        v-if="attrShow('margin')"
+        style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
+        <el-input
+          v-model="styleInfo.margin"
+          type="number"
+          size="mini"
+          min="0"
+          max="99"
+          @change="styleChange"
+        />
       </div>
 
-      <el-tooltip v-if="attrShow('opacity')" :content="$t('panel.opacity')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
+      <el-tooltip
+        v-if="attrShow('opacity')"
+        :content="$t('panel.opacity')"
+      >
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="icon iconfont icon-touming"
+        />
       </el-tooltip>
 
-      <div v-if="attrShow('opacity')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" @change="styleChange" />
+      <div
+        v-if="attrShow('opacity')"
+        style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
+        <el-input
+          v-model="innerOpacity"
+          type="number"
+          size="mini"
+          min="0"
+          max="100"
+          step="10"
+          @change="styleChange"
+        />
       </div>
 
-      <el-tooltip v-if="attrShow('borderRadius')" :content="$t('panel.borderRadius')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-fangxing-" />
+      <el-tooltip
+        v-if="attrShow('borderRadius')"
+        :content="$t('panel.borderRadius')"
+      >
+        <i
+          style="float: left;margin-top: 3px;margin-left: 2px;"
+          class="icon iconfont icon-fangxing-"
+        />
       </el-tooltip>
 
-      <div v-if="attrShow('borderRadius')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.borderRadius" type="number" size="mini" min="0" max="100" step="1" @change="styleChange" />
+      <div
+        v-if="attrShow('borderRadius')"
+        style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
+        <el-input
+          v-model="styleInfo.borderRadius"
+          type="number"
+          size="mini"
+          min="0"
+          max="100"
+          step="1"
+          @change="styleChange"
+        />
       </div>
 
-      <div v-if="attrShow('color')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div
+        v-if="attrShow('color')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
+      >
         <div style="width: 16px;height: 18px">
           <el-tooltip :content="$t('panel.color')">
-            <i class="icon iconfont icon-zimua" @click="goColor" />
+            <i
+              class="icon iconfont icon-zimua"
+              @click="goColor"
+            />
           </el-tooltip>
           <div :style="letterDivColor" />
-          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
+          <el-color-picker
+            ref="colorPicker"
+            v-model="styleInfo.color"
+            style="margin-top: 7px;height: 0px"
+            size="mini"
+            :predefine="predefineColors"
+            @change="styleChange"
+          />
         </div>
       </div>
-      <div v-if="attrShow('borderColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div
+        v-if="attrShow('borderColor')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
+      >
         <div style="width: 16px;height: 18px">
           <el-tooltip :content="$t('panel.border_color')">
-            <i class="iconfont icon-huabi" @click="goBoardColor" />
+            <i
+              class="iconfont icon-huabi"
+              @click="goBoardColor"
+            />
           </el-tooltip>
           <div :style="boardDivColor" />
-          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
+          <el-color-picker
+            ref="boardColorPicker"
+            v-model="styleInfo.borderColor"
+            style="margin-top: 7px;height: 0px"
+            size="mini"
+            :predefine="predefineColors"
+            @change="styleChange"
+          />
         </div>
       </div>
 
-      <div v-if="attrShow('backgroundColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div
+        v-if="attrShow('backgroundColor')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
+      >
         <div style="width: 16px;height: 18px">
           <el-tooltip :content="$t('panel.background_color')">
-            <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
+            <i
+              class="iconfont icon-beijingse1"
+              @click="goBackgroundColor"
+            />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" :predefine="predefineColors" size="mini" @change="styleChange" />
+          <el-color-picker
+            ref="backgroundColorPicker"
+            v-model="styleInfo.backgroundColor"
+            style="margin-top: 7px;height: 0px"
+            :predefine="predefineColors"
+            size="mini"
+            @change="styleChange"
+          />
         </div>
       </div>
-      <div v-if="attrShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div
+        v-if="attrShow('videoLinks')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
         <el-tooltip :content="$t('panel.video_info')">
           <VideoLinks :link-info="curComponent.videoLinks" />
         </el-tooltip>
       </div>
 
-      <div v-if="attrShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div
+        v-if="attrShow('streamMediaLinks')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
         <el-tooltip :content="$t('panel.stream_media_info')">
           <StreamMediaLinks :link-info="curComponent.streamMediaLinks" />
         </el-tooltip>
       </div>
 
-      <div v-if="attrShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div
+        v-if="attrShow('frameLinks')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
+      >
         <el-tooltip :content="$t('panel.web_addr')">
           <FrameLinks :link-info="curComponent.frameLinks" />
         </el-tooltip>
       </div>
-      <div v-if="attrShow('date-format')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div
+        v-if="attrShow('date-format')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
+      >
         <el-tooltip :content="$t('panel.data_format')">
           <date-format :format-info="curComponent.formatInfo" />
         </el-tooltip>
       </div>
 
-      <div v-if="attrShow('deTabStyle')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div
+        v-if="attrShow('deTabStyle')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
+      >
         <el-tooltip :content="$t('panel.tab_inner_style')">
           <tab-style :style-info="styleInfo" />
         </el-tooltip>
       </div>
 
-      <div v-if="attrShow('titlePostion')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div
+        v-if="attrShow('titlePostion')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
+      >
         <el-tooltip :content="$t('panel.title_position')">
-          <title-postion :element-type="elementType" :show-vertical="showVertical" :style-info="styleInfo" />
+          <title-postion
+            :element-type="elementType"
+            :show-vertical="showVertical"
+            :style-info="styleInfo"
+          />
         </el-tooltip>
       </div>
       <!--tab 内部组件样式-->
-      <div v-if="attrTabShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div
+        v-if="attrTabShow('videoLinks')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
+      >
         <el-tooltip :content="$t('panel.video_info')">
-          <VideoLinks :attr-position="'tab'" :link-info="curActiveTabInner.videoLinks" />
+          <VideoLinks
+            :attr-position="'tab'"
+            :link-info="curActiveTabInner.videoLinks"
+          />
         </el-tooltip>
       </div>
 
-      <div v-if="attrTabShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div
+        v-if="attrTabShow('streamMediaLinks')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
+      >
         <el-tooltip :content="$t('panel.stream_media_info')">
-          <StreamMediaLinks :attr-position="'tab'" :link-info="curActiveTabInner.streamMediaLinks" />
+          <StreamMediaLinks
+            :attr-position="'tab'"
+            :link-info="curActiveTabInner.streamMediaLinks"
+          />
         </el-tooltip>
       </div>
 
-      <div v-if="attrTabShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div
+        v-if="attrTabShow('frameLinks')"
+        style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
+      >
         <el-tooltip :content="$t('panel.web_addr')">
-          <FrameLinks :attr-position="'tab'" :link-info="curActiveTabInner.frameLinks" />
+          <FrameLinks
+            :attr-position="'tab'"
+            :link-info="curActiveTabInner.frameLinks"
+          />
         </el-tooltip>
       </div>
 
-      <div v-if="attrShow('adaptation')" style="width: 100px;margin-top: 2px;margin-right:2px;float: left">
+      <div
+        v-if="attrShow('adaptation')"
+        style="width: 100px;margin-top: 2px;margin-right:2px;float: left"
+      >
         <el-tooltip :content="$t('panel.pic_size')">
-          <el-select v-model="styleInfo.adaptation" size="mini" @change="styleChange">
+          <el-select
+            v-model="styleInfo.adaptation"
+            size="mini"
+            @change="styleChange"
+          >
             <el-option
               v-for="item in pictureAdaptation"
               :key="item.value"
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 4cbddbe300..53d4dd32cf 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -1,7 +1,11 @@
 <template>
   <div>
     <div class="switch-position">
-      <el-radio-group v-model="mobileLayoutInitStatus" size="mini" @change="openMobileLayout">
+      <el-radio-group
+        v-model="mobileLayoutInitStatus"
+        size="mini"
+        @change="openMobileLayout"
+      >
         <el-radio-button :label="false">
           <span class="icon iconfont icon-icon_pc_outlined icon16_only" />
         </el-radio-button>
@@ -10,21 +14,38 @@
         </el-radio-button>
       </el-radio-group>
     </div>
-    <div v-show="editControlButton" class="toolbar">
+    <div
+      v-show="editControlButton"
+      class="toolbar"
+    >
       <span style="float: right;">
-        <el-button v-if="mobileLayoutStatus" size="mini" @click="editReset">
+        <el-button
+          v-if="mobileLayoutStatus"
+          size="mini"
+          @click="editReset"
+        >
           {{ $t('commons.reset') }}
         </el-button>
-        <el-button type="primary" size="mini" @click="editSave">
+        <el-button
+          type="primary"
+          size="mini"
+          @click="editSave"
+        >
           {{ $t('commons.confirm') }}
         </el-button>
-        <el-button size="mini" @click="editCancel">
+        <el-button
+          size="mini"
+          @click="editCancel"
+        >
           {{ $t('commons.cancel') }}
         </el-button>
       </span>
     </div>
 
-    <div v-show="!editControlButton" class="toolbar">
+    <div
+      v-show="!editControlButton"
+      class="toolbar"
+    >
       <div class="panel-info-area">
         <!--back to panelList-->
         <svg-icon
@@ -37,17 +58,36 @@
         </span>
       </div>
       <el-tooltip :content="$t('panel.undo') ">
-        <svg-icon icon-class="icon_undo_outlined" class="toolbar-icon-active icon16 margin-right20" @click="undo" />
+        <svg-icon
+          icon-class="icon_undo_outlined"
+          class="toolbar-icon-active icon16 margin-right20"
+          @click="undo"
+        />
       </el-tooltip>
       <el-tooltip :content="$t('panel.redo') ">
-        <svg-icon icon-class="icon_redo_outlined" class="toolbar-icon-active icon16 margin-right20" @click="redo" />
+        <svg-icon
+          icon-class="icon_redo_outlined"
+          class="toolbar-icon-active icon16 margin-right20"
+          @click="redo"
+        />
       </el-tooltip>
       <el-tooltip :content="$t('panel.fullscreen_preview')">
-        <svg-icon icon-class="icon_magnify_outlined" class="toolbar-icon-active icon16" @click="clickPreview" />
+        <svg-icon
+          icon-class="icon_magnify_outlined"
+          class="toolbar-icon-active icon16"
+          @click="clickPreview"
+        />
       </el-tooltip>
-      <el-divider style="margin-left: 20px" direction="vertical" />
+      <el-divider
+        style="margin-left: 20px"
+        direction="vertical"
+      />
       <span class="button_self">
-        <el-dropdown :hide-on-click="false" trigger="click" placement="bottom-start">
+        <el-dropdown
+          :hide-on-click="false"
+          trigger="click"
+          placement="bottom-start"
+        >
           <span class="icon iconfont icon-icon-more insert margin-right20">
             <span class="icon-font-margin">{{ $t('panel.more') }}</span>
           </span>
@@ -57,16 +97,25 @@
                 <span>
                   <span class="icon iconfont icon-icon_moments-categories_outlined icon16" />
                   <span class="text14 margin-left8">{{ $t('panel.new_element_distribution') }}</span>
-                  <svg-icon icon-class="icon_right_outlined" class="icon16 margin-left8" />
+                  <svg-icon
+                    icon-class="icon_right_outlined"
+                    class="icon16 margin-left8"
+                  />
                 </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item @click.native="auxiliaryMatrixChange(false)">
                     <span class="text14"> {{ $t('panel.suspension') }} </span>
-                    <i v-if="!canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check margin-left52" />
+                    <i
+                      v-if="!canvasStyleData.auxiliaryMatrix"
+                      class=" font-active el-icon-check margin-left52"
+                    />
                   </el-dropdown-item>
                   <el-dropdown-item @click.native="auxiliaryMatrixChange(true)">
                     <span class="text14"> {{ $t('panel.matrix') }} </span>
-                    <i v-if="canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check margin-left52" />
+                    <i
+                      v-if="canvasStyleData.auxiliaryMatrix"
+                      class=" font-active el-icon-check margin-left52"
+                    />
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
@@ -74,7 +123,12 @@
             <el-dropdown-item>
               <span class="icon iconfont icon-icon_dialpad_outlined icon16" />
               <span class="text14 margin-left8">{{ $t('panel.aided_grid') }}</span>
-              <el-switch v-model="showGridSwitch" :class="[{['grid-active']: showGridSwitch},'margin-left8']" size="mini" @change="showGridChange" />
+              <el-switch
+                v-model="showGridSwitch"
+                :class="[{['grid-active']: showGridSwitch},'margin-left8']"
+                size="mini"
+                @change="showGridChange"
+              />
             </el-dropdown-item>
             <el-dropdown-item @click.native="openOuterParamsSet">
               <span class="icon iconfont icon-icon-quicksetting icon16" />
@@ -87,14 +141,25 @@
           </el-dropdown-menu>
         </el-dropdown>
       </span>
-      <span class="icon iconfont icon-icon_effects_outlined insert margin-right20" @click="showPanel">
+      <span
+        class="icon iconfont icon-icon_effects_outlined insert margin-right20"
+        @click="showPanel"
+      >
         <span class="icon-font-margin">{{ $t('panel.panel_style') }}</span>
       </span>
-      <span class="icon iconfont icon-icon_Batch_outlined insert margin-right20" @click="batchOption"><span
+      <span
+        class="icon iconfont icon-icon_Batch_outlined insert margin-right20"
+        @click="batchOption"
+      ><span
         class="icon-font-margin"
       >{{ $t('panel.batch_opt') }}</span></span>
       <span style="float: right;margin-right: 24px">
-        <el-button size="mini" type="primary" :disabled="saveButtonDisabled" @click="save(false)">
+        <el-button
+          size="mini"
+          type="primary"
+          :disabled="saveButtonDisabled"
+          @click="save(false)"
+        >
           {{ $t('commons.save') }}
         </el-button>
       </span>
@@ -110,7 +175,10 @@
     >
       <el-row style="height: 20px">
         <el-col :span="4">
-          <svg-icon icon-class="warn-tre" style="width: 20px;height: 20px;float: right" />
+          <svg-icon
+            icon-class="warn-tre"
+            style="width: 20px;height: 20px;float: right"
+          />
         </el-col>
         <el-col :span="20">
           <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{
@@ -118,10 +186,24 @@
           }}</span>
         </el-col>
       </el-row>
-      <div slot="footer" class="dialog-footer">
-        <el-button style="float: left" size="mini" @click="closeNotSave()">{{ $t('panel.do_not_save') }}</el-button>
-        <el-button size="mini" @click="closePanelVisible=false">{{ $t('panel.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="save(true)">{{ $t('panel.save') }}
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          style="float: left"
+          size="mini"
+          @click="closeNotSave()"
+        >{{ $t('panel.do_not_save') }}</el-button>
+        <el-button
+          size="mini"
+          @click="closePanelVisible=false"
+        >{{ $t('panel.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="save(true)"
+        >{{ $t('panel.save') }}
         </el-button>
       </div>
     </el-dialog>
@@ -211,7 +293,7 @@ export default {
     this.timer = null
   },
   methods: {
-    editPanelInit(){
+    editPanelInit() {
       this.showGridSwitch = this.canvasStyleData.aidedDesign.showGrid
     },
     close() {
@@ -343,7 +425,7 @@ export default {
       _this.timer = setInterval(() => {
         if (_this.$store.state.cacheStyleChangeTimes > 0) {
           const requestInfo = _this.savePrepare()
-          const cacheRequest ={
+          const cacheRequest = {
             ...this.panelInfo,
             ...requestInfo
           }
diff --git a/frontend/src/components/canvas/custom-component/DeFrame.vue b/frontend/src/components/canvas/custom-component/DeFrame.vue
index 17ae111e50..de7fa21f61 100644
--- a/frontend/src/components/canvas/custom-component/DeFrame.vue
+++ b/frontend/src/components/canvas/custom-component/DeFrame.vue
@@ -1,19 +1,49 @@
 <template>
   <el-row class="main-frame">
-    <div v-if="element.frameLinks.src" class="main-frame">
-      <iframe v-if="frameShow" id="iframe" :src="element.frameLinks.src" scrolling="auto" frameborder="0" class="main-frame" @load="loaded" @error="onError" />
-      <div v-if="editMode==='edit'" class="frame-mask edit-mask">
+    <div
+      v-if="element.frameLinks.src"
+      class="main-frame"
+    >
+      <iframe
+        v-if="frameShow"
+        id="iframe"
+        :src="element.frameLinks.src"
+        scrolling="auto"
+        frameborder="0"
+        class="main-frame"
+        @load="loaded"
+        @error="onError"
+      />
+      <div
+        v-if="editMode==='edit'"
+        class="frame-mask edit-mask"
+      >
         <span style="opacity: 1;">
           <span style="font-weight: bold;color: lawngreen;">{{ $t('panel.edit_web_tips') }}</span>
         </span>
       </div>
       <!--Here are three 15px wide masks(left top right) for easy clicking on the display jump button-->
-      <div v-if="editMode!=='edit'" class="frame-mask preview-top-mask" />
-      <div v-if="editMode!=='edit'" class="frame-mask preview-right-mask" />
-      <div v-if="editMode!=='edit'" class="frame-mask preview-left-mask" />
-      <div v-if="screenShot" class="frame-mask" />
+      <div
+        v-if="editMode!=='edit'"
+        class="frame-mask preview-top-mask"
+      />
+      <div
+        v-if="editMode!=='edit'"
+        class="frame-mask preview-right-mask"
+      />
+      <div
+        v-if="editMode!=='edit'"
+        class="frame-mask preview-left-mask"
+      />
+      <div
+        v-if="screenShot"
+        class="frame-mask"
+      />
     </div>
-    <div v-else class="info-class">
+    <div
+      v-else
+      class="info-class"
+    >
       {{ $t('panel.web_add_tips') }}
     </div>
   </el-row>
@@ -69,7 +99,7 @@ export default {
   },
   mounted() {
     bus.$on('frameLinksChange-' + this.element.id, this.frameLinksChange)
-    eventBus.$on('startMoveIn',this.frameLinksChange)
+    eventBus.$on('startMoveIn', this.frameLinksChange)
   },
   beforeDestroy() {
     bus.$off('frameLinksChange-' + this.element.id, this.frameLinksChange)
diff --git a/frontend/src/components/canvas/custom-component/DeRichText.vue b/frontend/src/components/canvas/custom-component/DeRichText.vue
index 97798dc30d..8a91d93836 100644
--- a/frontend/src/components/canvas/custom-component/DeRichText.vue
+++ b/frontend/src/components/canvas/custom-component/DeRichText.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="rich-main-class" @dblclick="setEdit">
+  <div
+    class="rich-main-class"
+    @dblclick="setEdit"
+  >
     <Editor
       v-if="editShow"
       :id="tinymceId"
@@ -39,6 +42,10 @@ export default {
     Editor
   },
   props: {
+    terminal: {
+      type: String,
+      default: 'pc'
+    },
     propValue: {
       type: String,
       require: true
@@ -93,11 +100,31 @@ export default {
     }
   },
   computed: {
+    scale() {
+      return Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
+    },
     editStatus() {
       return this.editMode === 'edit' && !this.mobileLayoutStatus
     },
+    autoStyle() {
+      return {
+        height: (100 / this.scale) + '%!important',
+        width: (100 / this.scale) + '%!important',
+        left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
+        top: 50 * (1 - 1 / this.scale) + '%',
+        transform: 'scale(' + this.scale + ')'
+      }
+    },
+    scaleCoefficient() {
+      if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
+        return 1.1
+      } else {
+        return 4.5
+      }
+    },
     ...mapState([
-      'mobileLayoutStatus'
+      'mobileLayoutStatus',
+      'previewCanvasScale'
     ])
   },
   watch: {
@@ -146,6 +173,7 @@ export default {
     width: 100%;
     height: 100%;
     overflow-y: auto!important;
+    position: relative;
   }
   ::-webkit-scrollbar {
     width: 0px!important;
diff --git a/frontend/src/components/canvas/custom-component/DeRichTextView.vue b/frontend/src/components/canvas/custom-component/DeRichTextView.vue
index cdf84b1ad9..c91825be1e 100644
--- a/frontend/src/components/canvas/custom-component/DeRichTextView.vue
+++ b/frontend/src/components/canvas/custom-component/DeRichTextView.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="rich-main-class" @dblclick="setEdit">
+  <div
+    class="rich-main-class"
+    @dblclick="setEdit"
+  >
     <Editor
       v-if="editShow"
       :id="tinymceId"
@@ -41,6 +44,11 @@ export default {
     Editor
   },
   props: {
+    scale: {
+      type: Number,
+      required: false,
+      default: 1
+    },
     element: {
       type: Object
     },
@@ -85,9 +93,9 @@ export default {
         plugins: 'advlist autolink link image lists charmap  media wordcount table contextmenu directionality pagebreak', // 插件
         // 工具栏
         toolbar: 'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| formatselect |' +
-            'alignleft aligncenter alignright | bullist numlist |' +
-            ' blockquote subscript superscript removeformat | table image media | fullscreen ' +
-            '| bdmap indent2em lineheight formatpainter axupimgs',
+          'alignleft aligncenter alignright | bullist numlist |' +
+          ' blockquote subscript superscript removeformat | table image media | fullscreen ' +
+          '| bdmap indent2em lineheight formatpainter axupimgs',
         toolbar_location: '/',
         font_formats: '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
         fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
@@ -102,6 +110,15 @@ export default {
     editStatus() {
       return this.editMode === 'edit' && !this.mobileLayoutStatus
     },
+    autoStyle() {
+      return {
+        height: (100 / this.scale) + '%!important',
+        width: (100 / this.scale) + '%!important',
+        left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
+        top: 50 * (1 - 1 / this.scale) + '%',
+        transform: 'scale(' + this.scale + ')'
+      }
+    },
     ...mapState([
       'mobileLayoutStatus'
     ])
@@ -121,23 +138,23 @@ export default {
       }
     },
     myValue(newValue) {
-      this.initReady&&this.$store.commit('canvasChange')
+      this.initReady && this.$store.commit('canvasChange')
     }
   },
   mounted() {
-   this.viewInit()
+    this.viewInit()
   },
   beforeDestroy() {
     bus.$off('fieldSelect-' + this.element.propValue.viewId)
   },
   methods: {
-    viewInit(){
+    viewInit() {
       bus.$on('fieldSelect-' + this.element.propValue.viewId, this.fieldSelect)
       tinymce.init({})
       this.myValue = this.assignment(this.element.propValue.textValue)
       bus.$on('initCurFields-' + this.element.id, this.initCurFieldsChange)
-      this.$nextTick(()=>{
-        this.initReady=true
+      this.$nextTick(() => {
+        this.initReady = true
       })
     },
     initCurFieldsChange() {
@@ -154,45 +171,44 @@ export default {
           content = content.replace(itm, _this.dataRowNameSelect[ele] !== undefined ? _this.dataRowNameSelect[ele] : '[无法获取字段值]')
         })
       }
-      content = content.replace('class="base-selected"','')
+      content = content.replace('class="base-selected"', '')
       this.resetSelect()
       return content
     },
     fieldSelect(field) {
       const ed = tinymce.editors[this.tinymceId]
-      const fieldId = 'changeText-'+uuid.v1()
-      const value = '<span id="'+fieldId+'"><span class="mceNonEditable" contenteditable="false" data-mce-content="['+field.name +']">[' + field.name + ']</span></span>'
+      const fieldId = 'changeText-' + uuid.v1()
+      const value = '<span id="' + fieldId + '"><span class="mceNonEditable" contenteditable="false" data-mce-content="[' + field.name + ']">[' + field.name + ']</span></span>'
       const attachValue = '<span id="attachValue">&nbsp;</span>'
       ed.insertContent(value)
       ed.insertContent(attachValue)
     },
     onClick(e) {
-      const edInner = tinymce.get(this.tinymceId);
       const node = tinymce.activeEditor.selection.getNode()
       this.resetSelect(node)
     },
-    resetSelect(node){
-      const edInner = tinymce.get(this.tinymceId);
-      if(edInner.dom){
-        const nodeArray = edInner.dom.select(".base-selected")
-        if(nodeArray){
-          nodeArray.forEach(nodeInner=>{
+    resetSelect(node) {
+      const edInner = tinymce.get(this.tinymceId)
+      if (edInner.dom) {
+        const nodeArray = edInner.dom.select('.base-selected')
+        if (nodeArray) {
+          nodeArray.forEach(nodeInner => {
             nodeInner.removeAttribute('class')
           })
         }
-        if(node){
+        if (node) {
           const pNode = node.parentElement
-          if(pNode && pNode.id&& pNode.id.indexOf('changeText')>-1){
-            const innerId = '#'+pNode.id
+          if (pNode && pNode.id && pNode.id.indexOf('changeText') > -1) {
+            const innerId = '#' + pNode.id
             const domTest = edInner.dom.select(innerId)[0]
-            domTest.setAttribute("class",'base-selected')
+            domTest.setAttribute('class', 'base-selected')
             edInner.selection.select(domTest)
           }
         }
       }
     },
     setEdit() {
-      if (this.editStatus&&this.canEdit===false) {
+      if (this.editStatus && this.canEdit === false) {
         this.canEdit = true
         this.element['editing'] = true
         this.myValue = this.element.propValue.textValue
@@ -215,40 +231,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .rich-main-class {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto!important;
-  }
-  ::-webkit-scrollbar {
-    width: 0px!important;
-    height: 0px!important;
-  }
-  ::v-deep ol {
-    display: block!important;
-    list-style-type: decimal;
-    margin-block-start: 1em!important;
-    margin-block-end: 1em!important;
-    margin-inline-start: 0px!important;
-    margin-inline-end: 0px!important;
-    padding-inline-start: 40px!important;
-  }
-  ::v-deep ul {
-    display: block!important;
-    list-style-type: disc;
-    margin-block-start: 1em!important;
-    margin-block-end: 1em!important;
-    margin-inline-start: 0px!important;
-    margin-inline-end: 0px!important;
-    padding-inline-start: 40px!important;
-  }
-  ::v-deep li {
-    display: list-item!important;
-    text-align: -webkit-match-parent!important;
-  }
+.rich-main-class {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto !important;
+  position: relative;
+}
 
-  ::v-deep .base-selected{
-   background-color: #b4d7ff
-  }
+::-webkit-scrollbar {
+  width: 0px !important;
+  height: 0px !important;
+}
+
+::v-deep ol {
+  display: block !important;
+  list-style-type: decimal;
+  margin-block-start: 1em !important;
+  margin-block-end: 1em !important;
+  margin-inline-start: 0px !important;
+  margin-inline-end: 0px !important;
+  padding-inline-start: 40px !important;
+}
+
+::v-deep ul {
+  display: block !important;
+  list-style-type: disc;
+  margin-block-start: 1em !important;
+  margin-block-end: 1em !important;
+  margin-inline-start: 0px !important;
+  margin-inline-end: 0px !important;
+  padding-inline-start: 40px !important;
+}
+
+::v-deep li {
+  display: list-item !important;
+  text-align: -webkit-match-parent !important;
+}
+
+::v-deep .base-selected {
+  background-color: #b4d7ff
+}
 </style>
 
diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
index 48c8b2633f..7b647099dd 100644
--- a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
@@ -1,15 +1,37 @@
 <template>
-  <el-row ref="mainPlayer" style="width: 100%;height: 100%">
-    <div v-if="element.streamMediaLinks[element.streamMediaLinks.videoType].url" class="video-container">
-      <video :ref="'player-'+element.id" class="centered-video" name="centeredVideo" :loop="pOption.loop" :controls="inScreen" muted />
-      <div v-if="editMode==='edit'" class="stream-mask edit-mask-stream" />
-      <div v-if="mobileLayoutStatus" class="stream-mask">
+  <el-row
+    ref="mainPlayer"
+    style="width: 100%;height: 100%"
+  >
+    <div
+      v-if="element.streamMediaLinks[element.streamMediaLinks.videoType].url"
+      class="video-container"
+    >
+      <video
+        :ref="'player-'+element.id"
+        class="centered-video"
+        name="centeredVideo"
+        :loop="pOption.loop"
+        :controls="inScreen"
+        muted
+      />
+      <div
+        v-if="editMode==='edit'"
+        class="stream-mask edit-mask-stream"
+      />
+      <div
+        v-if="mobileLayoutStatus"
+        class="stream-mask"
+      >
         <span style="opacity: 0.7;">
           <span style="color: lightgray;">{{ $t('panel.stream_mobile_tips') }}</span>
         </span>
       </div>
     </div>
-    <div v-else class="info-stream-class">
+    <div
+      v-else
+      class="info-stream-class"
+    >
       {{ $t('panel.stream_media_add_tips') }}
     </div>
   </el-row>
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index 40f705ce53..5a5970e707 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/frontend/src/components/canvas/custom-component/DeVideo.vue
@@ -1,6 +1,9 @@
 <template>
   <el-row ref="mainPlayer">
-    <div v-if="element.videoLinks[element.videoLinks.videoType].sources[0].src" class="player">
+    <div
+      v-if="element.videoLinks[element.videoLinks.videoType].sources[0].src"
+      class="player"
+    >
       <video-player
         v-if="showVideo"
         ref="videoPlayer"
@@ -19,7 +22,10 @@
         @statechanged="playerStateChanged($event)"
       />
     </div>
-    <div v-else class="info-class">
+    <div
+      v-else
+      class="info-class"
+    >
       {{ $t('panel.video_add_tips') }}
     </div>
   </el-row>
diff --git a/frontend/src/components/canvas/custom-component/Picture.vue b/frontend/src/components/canvas/custom-component/Picture.vue
index 7bc43a8210..44e3ceac8e 100644
--- a/frontend/src/components/canvas/custom-component/Picture.vue
+++ b/frontend/src/components/canvas/custom-component/Picture.vue
@@ -1,8 +1,20 @@
 <template>
   <div style="overflow: hidden;width: 100%;height: 100%;">
-    <img v-if="!showLink" :style="imageAdapter" :src="element.propValue">
-    <a v-if="showLink" :title="element.hyperlinks.content " :target="element.hyperlinks.openMode " :href="element.hyperlinks.content ">
-      <img :style="imageAdapter" :src="element.propValue">
+    <img
+      v-if="!showLink"
+      :style="imageAdapter"
+      :src="element.propValue"
+    >
+    <a
+      v-if="showLink"
+      :title="element.hyperlinks.content "
+      :target="element.hyperlinks.openMode "
+      :href="element.hyperlinks.content "
+    >
+      <img
+        :style="imageAdapter"
+        :src="element.propValue"
+      >
     </a>
   </div>
 </template>
diff --git a/frontend/src/components/canvas/custom-component/RectShape.vue b/frontend/src/components/canvas/custom-component/RectShape.vue
index 8f05f0809e..44c3e0ff59 100644
--- a/frontend/src/components/canvas/custom-component/RectShape.vue
+++ b/frontend/src/components/canvas/custom-component/RectShape.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="rect-shape">
-    <v-text :prop-value="element.propValue" :element="element" />
+    <v-text
+      :prop-value="element.propValue"
+      :element="element"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 6b19314033..3312f4898a 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -18,7 +18,10 @@
       :view-id="element.propValue.viewId"
       @showViewDetails="openChartDetailsDialog"
     />
-    <div v-if="requestStatus==='error'" class="chart-error-class">
+    <div
+      v-if="requestStatus==='error'"
+      class="chart-error-class"
+    >
       <div class="chart-error-message-class">
         {{ message }},{{ $t('chart.chart_show_error') }}
         <br>
@@ -45,6 +48,7 @@
     <de-rich-text-view
       v-else-if="richTextViewShowFlag"
       :ref="element.propValue.id"
+      :scale="scale"
       :element="element"
       :prop-value="element.propValue.textValue"
       :active="active"
@@ -110,7 +114,11 @@
       @onJumpClick="jumpClick"
     />
     <div style="position: absolute;left: 8px;bottom:8px;">
-      <drill-path :drill-filters="drillFilters" :theme-style="element.commonBackground" @onDrillJump="drillJump" />
+      <drill-path
+        :drill-filters="drillFilters"
+        :theme-style="element.commonBackground"
+        @onDrillJump="drillJump"
+      />
     </div>
   </div>
 </template>
@@ -477,7 +485,7 @@ export default {
         this.chart.customStyle = this.sourceCustomStyleStr
         updateParams['customStyle'] = this.sourceCustomStyleStr
       }
-      viewPropsSave(this.panelInfo.id, updateParams).then(rsp =>{
+      viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {
         this.active && bus.$emit('current-component-change')
       })
       this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
@@ -494,7 +502,7 @@ export default {
       this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
       this.chart.customStyle = this.sourceCustomStyleStr
       updateParams['customStyle'] = this.sourceCustomStyleStr
-      viewPropsSave(this.panelInfo.id, updateParams).then(rsp =>{
+      viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {
         this.active && bus.$emit('current-component-change')
       })
       this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
@@ -660,20 +668,20 @@ export default {
           return pre
         }, {})
         const rowData = chartDetails.data.tableRow[0]
-        if(chartDetails.type === 'richTextView'){
+        if (chartDetails.type === 'richTextView') {
           let yAxis = []
           try {
             yAxis = JSON.parse(chartDetails.yaxis)
           } catch (err) {
             yAxis = JSON.parse(JSON.stringify(chartDetails.yaxis))
           }
-          let yDataeaseNames = []
-          let yDataeaseNamesCfg = []
+          const yDataeaseNames = []
+          const yDataeaseNamesCfg = []
           yAxis.forEach(yItem => {
             yDataeaseNames.push(yItem.dataeaseName)
-            yDataeaseNamesCfg[yItem.dataeaseName]=yItem.formatterCfg
+            yDataeaseNamesCfg[yItem.dataeaseName] = yItem.formatterCfg
           })
-          this.rowDataFormat(rowData,yDataeaseNames,yDataeaseNamesCfg)
+          this.rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg)
         }
         for (const key in rowData) {
           this.dataRowSelect[nameIdMap[key]] = rowData[key]
@@ -688,24 +696,23 @@ export default {
         })
       }
     },
-    rowDataFormat(rowData,yDataeaseNames,yDataeaseNamesCfg) {
+    rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg) {
       for (const key in rowData) {
-       if(yDataeaseNames.includes(key)){
-         let formatterCfg = yDataeaseNamesCfg[key]
-         let value = rowData[key]
-         if (value === null || value === undefined) {
-           rowData[key] = '-'
-         }
-         if (formatterCfg) {
-           const v = valueFormatter(value, formatterCfg)
-           rowData[key] = v.includes('NaN') ? value : v
-         } else {
-           const v = valueFormatter(value, formatterItem)
-           rowData[key] =  v.includes('NaN') ? value : v
-         }
-       }
+        if (yDataeaseNames.includes(key)) {
+          const formatterCfg = yDataeaseNamesCfg[key]
+          const value = rowData[key]
+          if (value === null || value === undefined) {
+            rowData[key] = '-'
+          }
+          if (formatterCfg) {
+            const v = valueFormatter(value, formatterCfg)
+            rowData[key] = v.includes('NaN') ? value : v
+          } else {
+            const v = valueFormatter(value, formatterItem)
+            rowData[key] = v.includes('NaN') ? value : v
+          }
+        }
       }
-
     },
     viewIdMatch(viewIds, viewId) {
       return !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
diff --git a/frontend/src/components/canvas/custom-component/UserViewDialog.vue b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
index e8026fb260..58740b44e8 100644
--- a/frontend/src/components/canvas/custom-component/UserViewDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
@@ -1,8 +1,21 @@
 <template>
-  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" :class="isAbsoluteContainer ? 'abs-container' : ''">
-    <de-main-container v-show="showChartCanvas" class="">
-      <div id="chartCanvas" class="canvas-class" :style="customStyle">
-        <div class="canvas-class" :style="commonStyle">
+  <de-container
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    :class="isAbsoluteContainer ? 'abs-container' : ''"
+  >
+    <de-main-container
+      v-show="showChartCanvas"
+      class=""
+    >
+      <div
+        id="chartCanvas"
+        class="canvas-class"
+        :style="customStyle"
+      >
+        <div
+          class="canvas-class"
+          :style="commonStyle"
+        >
           <plugin-com
             v-if="chart.isPlugin"
             :component-name="chart.type + '-view'"
@@ -12,17 +25,47 @@
             :canvas-style-data="canvasStyleData"
             class="chart-class"
           />
-          <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" :theme-style="element.commonBackground" class="chart-class" :chart="mapChart || chart" />
-          <chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
-          <chart-component-s2 v-else-if="chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
-          <label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
-          <label-normal-text v-else-if="chart.type === 'label'" :chart="chart" class="table-class" />
-          <table-normal v-else-if="chart.type.includes('table') && renderComponent() === 'echarts'" :chart="chart" class="table-class" />
+          <chart-component
+            v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'"
+            :theme-style="element.commonBackground"
+            class="chart-class"
+            :chart="mapChart || chart"
+          />
+          <chart-component-g2
+            v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'"
+            class="chart-class"
+            :chart="chart"
+          />
+          <chart-component-s2
+            v-else-if="chart.type.includes('table') && renderComponent() === 'antv'"
+            class="chart-class"
+            :chart="chart"
+          />
+          <label-normal
+            v-else-if="chart.type.includes('text')"
+            :chart="chart"
+            class="table-class"
+          />
+          <label-normal-text
+            v-else-if="chart.type === 'label'"
+            :chart="chart"
+            class="table-class"
+          />
+          <table-normal
+            v-else-if="chart.type.includes('table') && renderComponent() === 'echarts'"
+            :chart="chart"
+            class="table-class"
+          />
         </div>
       </div>
     </de-main-container>
     <de-main-container v-show="!showChartCanvas">
-      <table-normal :enable-scroll="false" :chart="chartTable" :show-summary="false" class="table-class" />
+      <table-normal
+        :enable-scroll="false"
+        :chart="chartTable"
+        :show-summary="false"
+        class="table-class"
+      />
     </de-main-container>
   </de-container>
 </template>
@@ -34,7 +77,6 @@ import TableNormal from '@/views/chart/components/table/TableNormal'
 import LabelNormal from '@/views/chart/components/normal/LabelNormal'
 import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
-import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import { mapState } from 'vuex'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
 import PluginCom from '@/views/system/plugin/PluginCom'
@@ -47,7 +89,7 @@ import { deepCopy, exportImg, imgUrlTrans } from '@/components/canvas/utils/util
 import { getLinkToken, getToken } from '@/utils/auth'
 export default {
   name: 'UserViewDialog',
-  components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, DeAsideContainer, ChartComponent, TableNormal, LabelNormal, PluginCom },
+  components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, ChartComponent, TableNormal, LabelNormal, PluginCom },
   props: {
     chart: {
       type: Object,
diff --git a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
index c5dd240530..8feabb5299 100644
--- a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
@@ -1,7 +1,14 @@
 <template>
   <de-container>
-    <de-main-container v-if="chart.type !== 'table-normal' && chart.type !== 'table-info'" :style="customStyle" class="full-div">
-      <div class="canvas-class" :style="commonStyle">
+    <de-main-container
+      v-if="chart.type !== 'table-normal' && chart.type !== 'table-info'"
+      :style="customStyle"
+      class="full-div"
+    >
+      <div
+        class="canvas-class"
+        :style="commonStyle"
+      >
         <plugin-com
           v-if="chart.isPlugin"
           :component-name="chart.type + '-view'"
@@ -11,15 +18,40 @@
           :canvas-style-data="canvasStyleData"
           class="chart-class"
         />
-        <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" :theme-style="element.commonBackground" class="chart-class" :chart="mapChart || chart" />
-        <chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
-        <chart-component-s2 v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
-        <label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
-        <label-normal-text v-else-if="chart.type === 'label'" :chart="chart" class="table-class" />
+        <chart-component
+          v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'"
+          :theme-style="element.commonBackground"
+          class="chart-class"
+          :chart="mapChart || chart"
+        />
+        <chart-component-g2
+          v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'"
+          class="chart-class"
+          :chart="chart"
+        />
+        <chart-component-s2
+          v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'"
+          class="chart-class"
+          :chart="chart"
+        />
+        <label-normal
+          v-else-if="chart.type.includes('text')"
+          :chart="chart"
+          class="table-class"
+        />
+        <label-normal-text
+          v-else-if="chart.type === 'label'"
+          :chart="chart"
+          class="table-class"
+        />
       </div>
     </de-main-container>
     <de-main-container v-else>
-      <table-normal :chart="chartTable" :show-summary="false" class="table-class" />
+      <table-normal
+        :chart="chartTable"
+        :show-summary="false"
+        class="table-class"
+      />
     </de-main-container>
   </de-container>
 </template>
@@ -50,7 +82,7 @@ export default {
       type: Object,
       default: null
     }
-    
+
   },
   data() {
     return {
@@ -59,9 +91,6 @@ export default {
       lastMapChart: null
     }
   },
-  created() {
-    this.element = deepCopy(this.curComponent)
-  },
   computed: {
     customStyle() {
       let style = {
@@ -146,6 +175,9 @@ export default {
       return null
     }
   },
+  created() {
+    this.element = deepCopy(this.curComponent)
+  },
   methods: {
 
     renderComponent() {
diff --git a/frontend/src/components/canvas/custom-component/VText.vue b/frontend/src/components/canvas/custom-component/VText.vue
index 3addb151eb..f23c2ca559 100644
--- a/frontend/src/components/canvas/custom-component/VText.vue
+++ b/frontend/src/components/canvas/custom-component/VText.vue
@@ -1,5 +1,10 @@
 <template>
-  <div v-if="editStatus" class="v-text" @keydown="handleKeydown" @keyup="handleKeyup">
+  <div
+    v-if="editStatus"
+    class="v-text"
+    @keydown="handleKeydown"
+    @keyup="handleKeyup"
+  >
     <!-- tabindex >= 0 使得双击时聚集该元素 -->
     <div
       v-if="canEdit"
@@ -26,8 +31,14 @@
       v-html="element.propValue"
     />
   </div>
-  <div v-else class="v-text">
-    <div :style="{ verticalAlign: element.style.verticalAlign }" v-html="textInfo" />
+  <div
+    v-else
+    class="v-text"
+  >
+    <div
+      :style="{ verticalAlign: element.style.verticalAlign }"
+      v-html="textInfo"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/components/canvas/custom-component/index.js b/frontend/src/components/canvas/custom-component/index.js
index acb5fb3bb2..7f9e99b351 100644
--- a/frontend/src/components/canvas/custom-component/index.js
+++ b/frontend/src/components/canvas/custom-component/index.js
@@ -12,6 +12,7 @@ import DeStreamMedia from '@/components/canvas/custom-component/DeStreamMedia'
 import DeRichText from '@/components/canvas/custom-component/DeRichText'
 Vue.component('DeRichText', DeRichText)
 Vue.component('DeStreamMedia', DeStreamMedia)
+// eslint-disable-next-line
 Vue.component('Picture', Picture)
 Vue.component('VText', VText)
 Vue.component('VButton', VButton)
diff --git a/frontend/src/components/canvas/index.vue b/frontend/src/components/canvas/index.vue
index 504b157c1f..cb54b624a3 100644
--- a/frontend/src/components/canvas/index.vue
+++ b/frontend/src/components/canvas/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <Toolbar/>
+    <Toolbar />
     <main>
       <section class="center">
         <div
@@ -10,7 +10,7 @@
           @mousedown="handleMouseDown"
           @mouseup="deselectCurComponent"
         >
-          <Editor/>
+          <Editor />
         </div>
       </section>
 
@@ -22,12 +22,12 @@
 import Editor from '@/components/Editor/index'
 import componentList from '@/components/canvas/custom-component/component-list' // 左侧列表数据
 import Toolbar from '@/components/Toolbar'
-import {deepCopy} from '@/utils/utils'
-import {mapState} from 'vuex'
+import { deepCopy } from '@/utils/utils'
+import { mapState } from 'vuex'
 import generateID from '@/utils/generateID'
-
+import { uuid } from 'vue-uuid'
 export default {
-  components: {Editor, Toolbar},
+  components: { Editor, Toolbar },
   data() {
     return {
       activeName: 'attr',
@@ -80,7 +80,7 @@ export default {
       component.style.top = e.offsetY
       component.style.left = e.offsetX
       component.id = generateID()
-      this.$store.commit('addComponent', {component})
+      this.$store.commit('addComponent', { component })
       this.$store.commit('recordSnapshot', 'handleDrop')
     },
 
@@ -95,7 +95,7 @@ export default {
 
     deselectCurComponent(e) {
       if (!this.isClickComponent) {
-        this.$store.commit('setCurComponent', {component: null, index: null})
+        this.$store.commit('setCurComponent', { component: null, index: null })
       }
 
       // 0 左击 1 滚轮 2 右击
diff --git a/frontend/src/components/canvas/store/copy.js b/frontend/src/components/canvas/store/copy.js
index 291b08b631..902e3f98ea 100644
--- a/frontend/src/components/canvas/store/copy.js
+++ b/frontend/src/components/canvas/store/copy.js
@@ -5,7 +5,7 @@ import { deepCopy } from '@/components/canvas/utils/utils'
 import { chartBatchCopy, chartCopy } from '@/api/chart/chart'
 import { uuid } from 'vue-uuid'
 import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
-import Vue from "vue";
+import Vue from 'vue'
 
 export default {
   state: {
diff --git a/frontend/src/components/canvas/store/layer.js b/frontend/src/components/canvas/store/layer.js
index 52b2c4942e..b485b86b61 100644
--- a/frontend/src/components/canvas/store/layer.js
+++ b/frontend/src/components/canvas/store/layer.js
@@ -1,4 +1,4 @@
-import { swap, toBottom, toTop, moveUp, moveDown } from '@/components/canvas/utils/utils'
+import { toBottom, toTop, moveUp, moveDown } from '@/components/canvas/utils/utils'
 import toast from '@/components/canvas/utils/toast'
 
 export default {
diff --git a/frontend/src/components/canvas/utils/shortcutKey.js b/frontend/src/components/canvas/utils/shortcutKey.js
index f00f3309cc..2c1cba10e6 100644
--- a/frontend/src/components/canvas/utils/shortcutKey.js
+++ b/frontend/src/components/canvas/utils/shortcutKey.js
@@ -13,13 +13,9 @@ const gKey = 71 // 组合
 const bKey = 66 // 拆分
 
 const lKey = 76 // 锁定
-const uKey = 85 // 解锁
 
-const sKey = 83 // 保存
-const pKey = 80 // 预览
 const dKey = 68 // 删除
 const deleteKey = 46 // 删除
-const eKey = 69 // 清空画布
 
 export const keycodes = [66, 67, 68, 69, 71, 76, 80, 83, 85, 86, 88, 89, 90]
 
@@ -30,12 +26,6 @@ const basemap = {
   [zKey]: undo
 }
 
-// 组件锁定状态下可以执行的操作
-const lockMap = {
-  ...basemap,
-  [uKey]: unlock
-}
-
 // 组件未锁定状态下可以执行的操作
 const unlockMap = {
   ...basemap,
@@ -117,7 +107,3 @@ function deleteComponent() {
 function lock() {
   store.commit('lock')
 }
-
-function unlock() {
-  store.commit('unlock')
-}
diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js
index 9b23117cc4..0cfe1137af 100644
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@@ -380,9 +380,9 @@ export function adaptCurThemeCommonStyle(component) {
   } else if (isTabComponent(component.component)) {
     const tabStyle = store.state.canvasStyleData.chartInfo.tabStyle
     for (const styleKey in tabStyle) {
-      if(typeof tabStyle[styleKey] === 'string'){
+      if (typeof tabStyle[styleKey] === 'string') {
         Vue.set(component.style, styleKey, tabStyle[styleKey])
-      }else{
+      } else {
         Vue.set(component.style, styleKey, null)
       }
     }
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index 13ea262cb2..cd002ea3a0 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -94,7 +94,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
           item.options.attrs.default = widget.defaultSetting()
         }
       }
-      if (item.options.attrs && widget.isTimeWidget && widget.isTimeWidget() && !item.options.attrs.hasOwnProperty('showTime')) {
+      if (item.options.attrs && widget.isTimeWidget && widget.isTimeWidget() && !Object.prototype.hasOwnProperty.call(item.options.attrs, 'showTime')) {
         item.options.attrs.showTime = false
         item.options.attrs.accuracy = 'HH:mm'
       }
@@ -218,10 +218,9 @@ export function colorReverse(OldColorValue) {
 }
 
 export function imgUrlTrans(url) {
-  if(url && typeof url === 'string' && url.indexOf('static-resource') > -1){
-    return process.env.VUE_APP_BASE_API + url.replace('/static-resource','static-resource')
-  }else {
+  if (url && typeof url === 'string' && url.indexOf('static-resource') > -1) {
+    return process.env.VUE_APP_BASE_API + url.replace('/static-resource', 'static-resource')
+  } else {
     return url
   }
-
 }
diff --git a/frontend/src/components/cron/cron.vue b/frontend/src/components/cron/cron.vue
index e7dc69c3e1..d27db8ec1f 100644
--- a/frontend/src/components/cron/cron.vue
+++ b/frontend/src/components/cron/cron.vue
@@ -1,26 +1,71 @@
 <template lang="html">
-  <div class="cron" :val="value_">
+  <div
+    class="cron"
+    :val="value_"
+  >
     <el-tabs v-model="activeName">
-      <el-tab-pane :label="$t('cron.second')" name="s">
-        <second-and-minute v-model="sVal" :label="$t('cron.second')" />
+      <el-tab-pane
+        :label="$t('cron.second')"
+        name="s"
+      >
+        <second-and-minute
+          v-model="sVal"
+          :label="$t('cron.second')"
+        />
       </el-tab-pane>
-      <el-tab-pane :label="$t('cron.minute')" name="m">
-        <second-and-minute v-model="mVal" :label="$t('cron.minute')" />
+      <el-tab-pane
+        :label="$t('cron.minute')"
+        name="m"
+      >
+        <second-and-minute
+          v-model="mVal"
+          :label="$t('cron.minute')"
+        />
       </el-tab-pane>
-      <el-tab-pane :label="$t('cron.hour')" name="h">
-        <hour v-model="hVal" :label="$t('cron.hour')" />
+      <el-tab-pane
+        :label="$t('cron.hour')"
+        name="h"
+      >
+        <hour
+          v-model="hVal"
+          :label="$t('cron.hour')"
+        />
       </el-tab-pane>
-      <el-tab-pane :label="$t('cron.day')" name="d">
-        <day v-model="dVal" :label="$t('cron.day')" />
+      <el-tab-pane
+        :label="$t('cron.day')"
+        name="d"
+      >
+        <day
+          v-model="dVal"
+          :label="$t('cron.day')"
+        />
       </el-tab-pane>
-      <el-tab-pane :label="$t('cron.month')" name="month">
-        <month v-model="monthVal" :label="$t('cron.month')" />
+      <el-tab-pane
+        :label="$t('cron.month')"
+        name="month"
+      >
+        <month
+          v-model="monthVal"
+          :label="$t('cron.month')"
+        />
       </el-tab-pane>
-      <el-tab-pane :label="$t('cron.week')" name="week">
-        <week v-model="weekVal" :label="$t('cron.week')" />
+      <el-tab-pane
+        :label="$t('cron.week')"
+        name="week"
+      >
+        <week
+          v-model="weekVal"
+          :label="$t('cron.week')"
+        />
       </el-tab-pane>
-      <el-tab-pane :label="$t('cron.year')" name="year">
-        <year v-model="yearVal" :label="$t('cron.year')" />
+      <el-tab-pane
+        :label="$t('cron.year')"
+        name="year"
+      >
+        <year
+          v-model="yearVal"
+          :label="$t('cron.year')"
+        />
       </el-tab-pane>
     </el-tabs>
     <!-- table -->
@@ -75,7 +120,6 @@ import day from './cron/day'
 import month from './cron/month'
 import week from './cron/week'
 import year from './cron/year'
-import { log } from '@antv/g2plot/lib/utils'
 export default {
   components: {
     SecondAndMinute, hour, day, month, week, year
@@ -85,7 +129,7 @@ export default {
       type: String
     },
     isRate: {
-      type: Boolean,
+      type: Boolean
     }
   },
   data() {
@@ -139,11 +183,11 @@ export default {
   watch: {
     value: {
       handler() {
-        if (!this.isRate) return;
-        this.updateVal();
+        if (!this.isRate) return
+        this.updateVal()
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   methods: {
     updateVal() {
diff --git a/frontend/src/components/cron/cron/day.vue b/frontend/src/components/cron/cron/day.vue
index b37dc92d08..f0c96fba7d 100644
--- a/frontend/src/components/cron/cron/day.vue
+++ b/frontend/src/components/cron/cron/day.vue
@@ -1,41 +1,121 @@
 <template lang="html">
   <div :val="value_">
     <div>
-      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every_day') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="1"
+        size="mini"
+        border
+      >{{ $t('cron.every_day') }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="5" size="mini" border>{{ $t('cron.not_set') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="5"
+        size="mini"
+        border
+      >{{ $t('cron.not_set') }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="2"
+        size="mini"
+        border
+      >{{ $t('cron.cycle') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
-      <el-input-number v-model="cycle.start" :min="1" :max="31" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.start"
+        :min="1"
+        :max="31"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.to') }}</span>
-      <el-input-number v-model="cycle.end" :min="2" :max="31" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.end"
+        :min="2"
+        :max="31"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       {{ $t('cron.day') }}
     </div>
     <div>
-      <el-radio v-model="type" label="3" size="mini" border>{{ $t('cron.repeat') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="3"
+        size="mini"
+        border
+      >{{ $t('cron.repeat') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
-      <el-input-number v-model="loop.start" :min="1" :max="31" size="mini" style="width: 100px;" @change="type = '3'" />
+      <el-input-number
+        v-model="loop.start"
+        :min="1"
+        :max="31"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '3'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.day_begin') }}</span>
-      <el-input-number v-model="loop.end" :min="1" :max="31" size="mini" style="width: 100px;" @change="type = '3'" />
+      <el-input-number
+        v-model="loop.end"
+        :min="1"
+        :max="31"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '3'"
+      />
       {{ $t('cron.day_exec') }}
     </div>
     <div>
-      <el-radio v-model="type" label="8" size="mini" border>{{ $t('cron.work_day') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="8"
+        size="mini"
+        border
+      >{{ $t('cron.work_day') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.this_month') }}</span>
-      <el-input-number v-model="work" :min="1" :max="31" size="mini" style="width: 100px;" @change="type = '8'" />
+      <el-input-number
+        v-model="work"
+        :min="1"
+        :max="31"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '8'"
+      />
       {{ $t('cron.day_near_work_day') }}
     </div>
     <div>
-      <el-radio v-model="type" label="6" size="mini" border>{{ $t('cron.this_week_last_day') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="6"
+        size="mini"
+        border
+      >{{ $t('cron.this_week_last_day') }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="4" size="mini" border>{{ $t('cron.set') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="4"
+        size="mini"
+        border
+      >{{ $t('cron.set') }}</el-radio>
       <el-checkbox-group v-model="appoint">
-        <div v-for="i in 4" :key="i" style="margin-left: 10px;  line-height: 25px;">
-          <el-checkbox v-for="j in 10" v-if="parseInt((i - 1) + '' + (j - 1)) < 32 && !(i === 1 && j === 1)" :key="j" :label="(i - 1) + '' + (j - 1)" @change="type = '4'" />
+        <div
+          v-for="i in 4"
+          :key="i"
+          style="margin-left: 10px;  line-height: 25px;"
+        >
+          <el-checkbox
+            v-for="j in 10"
+            v-if="parseInt((i - 1) + '' + (j - 1)) < 32 && !(i === 1 && j === 1)"
+            :key="j"
+            :label="(i - 1) + '' + (j - 1)"
+            @change="type = '4'"
+          />
         </div>
       </el-checkbox-group>
     </div>
diff --git a/frontend/src/components/cron/cron/hour.vue b/frontend/src/components/cron/cron/hour.vue
index 9ffaf7c8f7..37f4962127 100644
--- a/frontend/src/components/cron/cron/hour.vue
+++ b/frontend/src/components/cron/cron/hour.vue
@@ -1,29 +1,87 @@
 <template lang="html">
   <div :val="value_">
     <div>
-      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every_hour') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="1"
+        size="mini"
+        border
+      >{{ $t('cron.every_hour') }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="2"
+        size="mini"
+        border
+      >{{ $t('cron.cycle') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
-      <el-input-number v-model="cycle.start" :min="0" :max="23" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.start"
+        :min="0"
+        :max="23"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.to') }}</span>
-      <el-input-number v-model="cycle.end" :min="2" :max="23" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.end"
+        :min="2"
+        :max="23"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       {{ $t('cron.hour') }}
     </div>
     <div>
-      <el-radio v-model="type" label="3" size="mini" border>{{ $t('cron.repeat') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="3"
+        size="mini"
+        border
+      >{{ $t('cron.repeat') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
-      <el-input-number v-model="loop.start" :min="0" :max="23" size="mini" style="width: 100px;" @change="type = '3'" />
+      <el-input-number
+        v-model="loop.start"
+        :min="0"
+        :max="23"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '3'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.hour_begin') }}</span>
-      <el-input-number v-model="loop.end" :min="1" :max="23" size="mini" style="width: 100px;" @change="type = '3'" />
+      <el-input-number
+        v-model="loop.end"
+        :min="1"
+        :max="23"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '3'"
+      />
       {{ $t('cron.hour_exec') }}
     </div>
     <div>
-      <el-radio v-model="type" label="4" size="mini" border>{{ $t('cron.set') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="4"
+        size="mini"
+        border
+      >{{ $t('cron.set') }}</el-radio>
       <el-checkbox-group v-model="appoint">
-        <div v-for="i in 3" :key="i" style="margin-left: 10px;  line-height: 25px;">
-          <el-checkbox v-for="j in 10" v-if="parseInt((i - 1) + '' + (j - 1)) < 24" :key="j" :label="(i - 1) + '' + (j - 1)" @change="type = '4'" />
+        <div
+          v-for="i in 3"
+          :key="i"
+          style="margin-left: 10px;  line-height: 25px;"
+        >
+          <el-checkbox
+            v-for="j in 10"
+            v-if="parseInt((i - 1) + '' + (j - 1)) < 24"
+            :key="j"
+            :label="(i - 1) + '' + (j - 1)"
+            @change="type = '4'"
+          />
         </div>
       </el-checkbox-group>
     </div>
diff --git a/frontend/src/components/cron/cron/month.vue b/frontend/src/components/cron/cron/month.vue
index b528309d3a..4993d7af31 100644
--- a/frontend/src/components/cron/cron/month.vue
+++ b/frontend/src/components/cron/cron/month.vue
@@ -1,31 +1,92 @@
 <template lang="html">
   <div :val="value_">
     <div>
-      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every_month') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="1"
+        size="mini"
+        border
+      >{{ $t('cron.every_month') }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="5" size="mini" border>{{ $t('cron.not_set') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="5"
+        size="mini"
+        border
+      >{{ $t('cron.not_set') }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="2"
+        size="mini"
+        border
+      >{{ $t('cron.cycle') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
-      <el-input-number v-model="cycle.start" :min="1" :max="12" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.start"
+        :min="1"
+        :max="12"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.to') }}</span>
-      <el-input-number v-model="cycle.end" :min="2" :max="12" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.end"
+        :min="2"
+        :max="12"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       {{ $t('cron.month') }}
     </div>
     <div>
-      <el-radio v-model="type" label="3" size="mini" border>{{ $t('cron.repeat') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="3"
+        size="mini"
+        border
+      >{{ $t('cron.repeat') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
-      <el-input-number v-model="loop.start" :min="1" :max="12" size="mini" style="width: 100px;" @change="type = '3'" />
+      <el-input-number
+        v-model="loop.start"
+        :min="1"
+        :max="12"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '3'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.month_begin') }}</span>
-      <el-input-number v-model="loop.end" :min="1" :max="12" size="mini" style="width: 100px;" @change="type = '3'" />
+      <el-input-number
+        v-model="loop.end"
+        :min="1"
+        :max="12"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '3'"
+      />
       {{ $t('cron.month_exec') }}
     </div>
     <div>
-      <el-radio v-model="type" label="4" size="mini" border>{{ $t('cron.set') }}</el-radio>
-      <el-checkbox-group v-model="appoint" style="margin-left: 0px;  line-height: 25px;">
-        <el-checkbox v-for="i in 12" :key="i" :label="i+''" @change="type = '4'" />
+      <el-radio
+        v-model="type"
+        label="4"
+        size="mini"
+        border
+      >{{ $t('cron.set') }}</el-radio>
+      <el-checkbox-group
+        v-model="appoint"
+        style="margin-left: 0px;  line-height: 25px;"
+      >
+        <el-checkbox
+          v-for="i in 12"
+          :key="i"
+          :label="i+''"
+          @change="type = '4'"
+        />
       </el-checkbox-group>
     </div>
   </div>
diff --git a/frontend/src/components/cron/cron/secondAndMinute.vue b/frontend/src/components/cron/cron/secondAndMinute.vue
index f42df2826b..d56077ccd4 100644
--- a/frontend/src/components/cron/cron/secondAndMinute.vue
+++ b/frontend/src/components/cron/cron/secondAndMinute.vue
@@ -2,29 +2,86 @@
 <template lang="html">
   <div :val="value_">
     <div>
-      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every') }}{{ lable }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="1"
+        size="mini"
+        border
+      >{{ $t('cron.every') }}{{ lable }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="2"
+        size="mini"
+        border
+      >{{ $t('cron.cycle') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
-      <el-input-number v-model="cycle.start" :min="1" :max="59" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.start"
+        :min="1"
+        :max="59"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.to') }}</span>
-      <el-input-number v-model="cycle.end" :min="2" :max="59" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.end"
+        :min="2"
+        :max="59"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       {{ lable }}
     </div>
     <div>
-      <el-radio v-model="type" label="3" size="mini" border>{{ $t('cron.repeat') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="3"
+        size="mini"
+        border
+      >{{ $t('cron.repeat') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
-      <el-input-number v-model="loop.start" :min="0" :max="59" size="mini" style="width: 100px;" @change="type = '3'" />
+      <el-input-number
+        v-model="loop.start"
+        :min="0"
+        :max="59"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '3'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ lable }}{{ $t('cron.every_begin') }}</span>
-      <el-input-number v-model="loop.end" :min="1" :max="59" size="mini" style="width: 100px;" @change="type = '3'" />
+      <el-input-number
+        v-model="loop.end"
+        :min="1"
+        :max="59"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '3'"
+      />
       {{ lable }}{{ $t('cron.every_exec') }}
     </div>
     <div>
-      <el-radio v-model="type" label="4" size="mini" border>{{ $t('cron.set') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="4"
+        size="mini"
+        border
+      >{{ $t('cron.set') }}</el-radio>
       <el-checkbox-group v-model="appoint">
-        <div v-for="i in 6" :key="i" style="margin-left: 10px; line-height: 25px;">
-          <el-checkbox v-for="j in 10" :key="j" :label="(i - 1) + '' + (j - 1)" @change="type = '4'" />
+        <div
+          v-for="i in 6"
+          :key="i"
+          style="margin-left: 10px; line-height: 25px;"
+        >
+          <el-checkbox
+            v-for="j in 10"
+            :key="j"
+            :label="(i - 1) + '' + (j - 1)"
+            @change="type = '4'"
+          />
         </div>
       </el-checkbox-group>
     </div>
diff --git a/frontend/src/components/cron/cron/week.vue b/frontend/src/components/cron/cron/week.vue
index e54986f5cc..69bced3715 100644
--- a/frontend/src/components/cron/cron/week.vue
+++ b/frontend/src/components/cron/cron/week.vue
@@ -1,24 +1,72 @@
 <template lang="html">
   <div :val="value_">
     <div>
-      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every_week') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="1"
+        size="mini"
+        border
+      >{{ $t('cron.every_week') }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="5" size="mini" border>{{ $t('cron.not_set') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="5"
+        size="mini"
+        border
+      >{{ $t('cron.not_set') }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="2"
+        size="mini"
+        border
+      >{{ $t('cron.cycle') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.week_start') }}</span>
-      <el-input-number v-model="cycle.start" :min="1" :max="7" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.start"
+        :min="1"
+        :max="7"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.week_end') }}</span>
-      <el-input-number v-model="cycle.end" :min="2" :max="7" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.end"
+        :min="2"
+        :max="7"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
     </div>
     <div>
-      <el-radio v-model="type" label="3" size="mini" border>{{ $t('cron.repeat') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="3"
+        size="mini"
+        border
+      >{{ $t('cron.repeat') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.week_start') }}</span>
-      <el-input-number v-model="loop.start" :min="1" :max="7" size="mini" style="width: 100px;" @change="type = '3'" />
+      <el-input-number
+        v-model="loop.start"
+        :min="1"
+        :max="7"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '3'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.every_begin') }}</span>
-      <el-input-number v-model="loop.end" :min="1" :max="7" size="mini" style="width: 100px;" @change="type = '3'" />
+      <el-input-number
+        v-model="loop.end"
+        :min="1"
+        :max="7"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '3'"
+      />
       {{ $t('cron.day_exec') }}
     </div>
     <!--    <div>-->
@@ -34,9 +82,22 @@
     <!--      <el-input-number v-model="last" :min="1" :max="7" size="mini" style="width: 100px;" @change="type = '6'" />-->
     <!--    </div>-->
     <div>
-      <el-radio v-model="type" label="4" size="mini" border>{{ $t('cron.set') }}</el-radio>
-      <el-checkbox-group v-model="appoint" style="margin-left: 50px;  line-height: 25px;">
-        <el-checkbox v-for="i in 7" :key="i" :label="i+''" @change="type = '4'" />
+      <el-radio
+        v-model="type"
+        label="4"
+        size="mini"
+        border
+      >{{ $t('cron.set') }}</el-radio>
+      <el-checkbox-group
+        v-model="appoint"
+        style="margin-left: 50px;  line-height: 25px;"
+      >
+        <el-checkbox
+          v-for="i in 7"
+          :key="i"
+          :label="i+''"
+          @change="type = '4'"
+        />
       </el-checkbox-group>
     </div>
     <div>
diff --git a/frontend/src/components/cron/cron/year.vue b/frontend/src/components/cron/cron/year.vue
index aa253dc263..d895e70240 100644
--- a/frontend/src/components/cron/cron/year.vue
+++ b/frontend/src/components/cron/cron/year.vue
@@ -1,17 +1,44 @@
 <template lang="html">
   <div :val="value_">
     <div>
-      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every_year') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="1"
+        size="mini"
+        border
+      >{{ $t('cron.every_year') }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="5" size="mini" border>{{ $t('cron.not_set') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="5"
+        size="mini"
+        border
+      >{{ $t('cron.not_set') }}</el-radio>
     </div>
     <div>
-      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <el-radio
+        v-model="type"
+        label="2"
+        size="mini"
+        border
+      >{{ $t('cron.cycle') }}</el-radio>
       <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
-      <el-input-number v-model="cycle.start" :min="2000" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.start"
+        :min="2000"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.to') }}</span>
-      <el-input-number v-model="cycle.end" :min="2000" size="mini" style="width: 100px;" @change="type = '2'" />
+      <el-input-number
+        v-model="cycle.end"
+        :min="2000"
+        size="mini"
+        style="width: 100px;"
+        @change="type = '2'"
+      />
       {{ $t('cron.year') }}
     </div>
   </div>
diff --git a/frontend/src/components/dataease-tabs/index.vue b/frontend/src/components/dataease-tabs/index.vue
index cd581d5d75..08afcceafa 100644
--- a/frontend/src/components/dataease-tabs/index.vue
+++ b/frontend/src/components/dataease-tabs/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <el-tabs :class="['de-tabs',...tabClassName]" :style="tabStyle" v-bind="$attrs" v-on="$listeners">
+  <el-tabs
+    :class="['de-tabs',...tabClassName]"
+    :style="tabStyle"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
     <slot />
   </el-tabs>
 </template>
diff --git a/frontend/src/components/dataease/DeAsideContainer.vue b/frontend/src/components/dataease/DeAsideContainer.vue
index 25ea438df6..c2eb6074ea 100644
--- a/frontend/src/components/dataease/DeAsideContainer.vue
+++ b/frontend/src/components/dataease/DeAsideContainer.vue
@@ -5,7 +5,10 @@
     :style="{'margin-left': !asideHidden ? 0 : '-' + currentWidth}"
   >
     <slot />
-    <de-horizontal-drag-bar v-if="isSystem" :type="type" />
+    <de-horizontal-drag-bar
+      v-if="isSystem"
+      :type="type"
+    />
   </el-aside>
 </template>
 
diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue
index 14f1762054..847ef8e992 100644
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/frontend/src/components/dataease/DeOutWidget.vue
@@ -1,7 +1,19 @@
 <template>
-  <div ref="myContainer" class="my-container">
-    <div ref="conditionMain" :style="outsideStyle" class="condition-main">
-      <div v-if="element.options.attrs.showTitle && element.options.attrs.title" ref="deTitleContainer" :style="titleStyle" class="condition-title">
+  <div
+    ref="myContainer"
+    class="my-container"
+  >
+    <div
+      ref="conditionMain"
+      :style="outsideStyle"
+      class="condition-main"
+    >
+      <div
+        v-if="element.options.attrs.showTitle && element.options.attrs.title"
+        ref="deTitleContainer"
+        :style="titleStyle"
+        class="condition-title"
+      >
         <div class="condition-title-absolute">
           <div class="first-title">
             <div class="span-container">
diff --git a/frontend/src/components/dataease/dragbar/DeBottom2TopDragBar.vue b/frontend/src/components/dataease/dragbar/DeBottom2TopDragBar.vue
index a387717093..229efd2a32 100644
--- a/frontend/src/components/dataease/dragbar/DeBottom2TopDragBar.vue
+++ b/frontend/src/components/dataease/dragbar/DeBottom2TopDragBar.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-bottom-to-top-drag class="drag-bar" />
+  <div
+    v-bottom-to-top-drag
+    class="drag-bar"
+  />
 </template>
 
 <script>
diff --git a/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue b/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
index 9a11e677d1..7798cd4e92 100644
--- a/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
+++ b/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-left-to-right-drag="type" class="drag-bar" />
+  <div
+    v-left-to-right-drag="type"
+    class="drag-bar"
+  />
 </template>
 
 <script>
diff --git a/frontend/src/components/dataease/dragbar/DeRight2LeftDragBar.vue b/frontend/src/components/dataease/dragbar/DeRight2LeftDragBar.vue
index f789ea4712..73250bd947 100644
--- a/frontend/src/components/dataease/dragbar/DeRight2LeftDragBar.vue
+++ b/frontend/src/components/dataease/dragbar/DeRight2LeftDragBar.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-right-to-left-drag class="drag-bar" />
+  <div
+    v-right-to-left-drag
+    class="drag-bar"
+  />
 </template>
 
 <script>
diff --git a/frontend/src/components/deCustomCm/deBtn.vue b/frontend/src/components/deCustomCm/deBtn.vue
index 3a19b42e73..f950e9f85d 100644
--- a/frontend/src/components/deCustomCm/deBtn.vue
+++ b/frontend/src/components/deCustomCm/deBtn.vue
@@ -1,7 +1,6 @@
 <template>
   <button
     class="de-button"
-    @click="handleClick"
     :disabled="buttonDisabled || loading"
     :class="[
       type ? 'de-button--' + type : '',
@@ -12,74 +11,77 @@
         'is-de-loading': loading,
       },
     ]"
+    @click="handleClick"
   >
-    <!-- <svg
-      class="de-circular"
+    <svg
       v-if="loading"
-      width="14"
-      height="14"
-      viewBox="0 0 14 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+      viewBox="25 25 50 50"
+      class="de-circular"
     >
-      <path
-        d="M3.04575 3.00511C3.11074 2.94007 3.1879 2.88847 3.27283 2.85326C3.35776 2.81804 3.4488 2.7999 3.54074 2.79987C3.63269 2.79983 3.72374 2.81791 3.80869 2.85306C3.89365 2.88822 3.97085 2.93976 4.03589 3.00475C4.10093 3.06974 4.15253 3.14691 4.18774 3.23184C4.22296 3.31677 4.2411 3.40781 4.24113 3.49975C4.24117 3.5917 4.22309 3.68275 4.18794 3.7677C4.15278 3.85266 4.10124 3.92986 4.03625 3.9949C3.64356 4.38689 3.33222 4.85263 3.12013 5.36535C2.90804 5.87807 2.79938 6.42765 2.80039 6.9825C2.80039 9.31246 4.68128 11.2 7.00039 11.2C9.3195 11.2 11.2004 9.31246 11.2004 6.9825C11.2004 6.79685 11.2741 6.6188 11.4054 6.48753C11.5367 6.35625 11.7147 6.2825 11.9004 6.2825C12.086 6.2825 12.2641 6.35625 12.3954 6.48753C12.5266 6.6188 12.6004 6.79685 12.6004 6.9825C12.6004 10.0846 10.0937 12.6 7.00039 12.6C3.90709 12.6 1.40039 10.0846 1.40039 6.9825C1.40039 5.4705 1.99959 4.05195 3.04575 3.00511Z"
-        fill="#3370ff"
+      <circle
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+        class="path"
       />
-    </svg> -->
-    <svg v-if="loading" viewBox="25 25 50 50" class="de-circular">
-      <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
     </svg>
-    <i :class="icon" v-if="icon && !loading"></i>
-    <span :class="[{'de-btn-mar5': icon || loading }]" v-if="$slots.default"><slot></slot></span>
+    <i
+      v-if="icon && !loading"
+      :class="icon"
+    />
+    <span
+      v-if="$slots.default"
+      :class="[{'de-btn-mar5': icon || loading }]"
+    ><slot /></span>
   </button>
 </template>
 <script>
 export default {
-  name: "DeButton",
+  name: 'DeButton',
   inject: {
     elForm: {
-      default: "",
-    },
+      default: ''
+    }
   },
   props: {
     type: {
       type: String,
-      default: "default",
+      default: 'default'
     },
     size: String,
     icon: {
       type: String,
-      default: "",
+      default: ''
     },
     loading: Boolean,
     disabled: Boolean,
     plain: Boolean,
-    secondary: Boolean,
+    secondary: Boolean
   },
 
   computed: {
     buttonDisabled() {
-      return this.$options.propsData.hasOwnProperty("disabled")
+      return Object.prototype.hasOwnProperty.call(this.$options.propsData, 'disabled')
         ? this.disabled
-        : (this.elForm || {}).disabled;
-    },
+        : (this.elForm || {}).disabled
+    }
   },
 
   methods: {
     handleClick(evt) {
-      this.$emit("click", evt);
-    },
-  },
-};
+      this.$emit('click', evt)
+    }
+  }
+}
 </script>
 <style lang="scss">
 $namespace: "de";
 $state-prefix: "is-de-";
 $modifier-separator: "--";
+$B: null;
 @mixin b($block) {
-  $B: $namespace + "-" + $block !global;
-
+  $B: $namespace + "-" + $block;
   .#{$B} {
     @content;
   }
@@ -240,7 +242,6 @@ $modifier-separator: "--";
       }
     }
   }
-  
 
   @include when(plain) {
     color: var(--primary, #3370FF);
@@ -284,7 +285,6 @@ $modifier-separator: "--";
     }
   }
 
-
     @include when(disabled) {
       &,
       &:hover,
@@ -352,4 +352,4 @@ $modifier-separator: "--";
   //     }
   //   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/deCustomCm/deDatePick.vue b/frontend/src/components/deCustomCm/deDatePick.vue
index ce1f42316f..4a5af11be7 100644
--- a/frontend/src/components/deCustomCm/deDatePick.vue
+++ b/frontend/src/components/deCustomCm/deDatePick.vue
@@ -5,29 +5,31 @@
       size="small"
       :disabled="disabled"
       type="daterange"
-      @input="handleChange"
       range-separator="-"
       :start-placeholder="$t('commons.date.start_date')"
       :end-placeholder="$t('commons.date.end_date')"
-    >
-    </el-date-picker>
-    <svg-icon icon-class="icon_calendar_outlined" class="calendar-outlined" />
+      @input="handleChange"
+    />
+    <svg-icon
+      icon-class="icon_calendar_outlined"
+      class="calendar-outlined"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  name: "DeDatePick",
+  name: 'DeDatePick',
   props: {
     disabled: Boolean,
-    value: Array,
+    value: Array
   },
   methods: {
     handleChange(val) {
-      this.$emit("input", val);
-    },
-  },
-};
+      this.$emit('input', val)
+    }
+  }
+}
 </script>
 
 <style lang="scss">
@@ -53,4 +55,4 @@ export default {
     right: 13px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/deCustomCm/dePwd.vue b/frontend/src/components/deCustomCm/dePwd.vue
index 61bf3e88ee..6d2ca693b9 100644
--- a/frontend/src/components/deCustomCm/dePwd.vue
+++ b/frontend/src/components/deCustomCm/dePwd.vue
@@ -9,61 +9,61 @@
     @change="handleChange"
   >
     <svg-icon
-      @click="handleClick"
       v-if="!showPwd || buttonDisabled"
       slot="suffix"
       icon-class="de_pwd_invisible"
+      @click="handleClick"
     />
     <svg-icon
-      @click="handleClick"
       v-else
       slot="suffix"
       icon-class="de_pwd_visible"
+      @click="handleClick"
     />
   </el-input>
 </template>
 
 <script>
 export default {
-  name: "DePwd",
+  name: 'DePwd',
   inject: {
     elForm: {
-      default: "",
-    },
+      default: ''
+    }
   },
   props: {
     disabled: Boolean,
     placeholder: String,
-    value: String,
+    value: String
   },
   data() {
     return {
-      showPwd: false,
-    };
+      showPwd: false
+    }
   },
   computed: {
     buttonDisabled() {
-      return this.$options.propsData.hasOwnProperty("disabled")
+      return Object.prototype.hasOwnProperty.call(this.$options.propsData, 'disabled')
         ? this.disabled
-        : (this.elForm || {}).disabled;
+        : (this.elForm || {}).disabled
     },
     type() {
-      return !this.showPwd || this.buttonDisabled ? "password" : "text";
-    },
+      return !this.showPwd || this.buttonDisabled ? 'password' : 'text'
+    }
   },
   methods: {
     handleClick() {
-      if (this.buttonDisabled) return;
-      this.showPwd = !this.showPwd;
+      if (this.buttonDisabled) return
+      this.showPwd = !this.showPwd
     },
     handleInput(val) {
-      this.$emit("input", val);
+      this.$emit('input', val)
     },
     handleChange(val) {
-      this.$emit("change", val);
-    },
-  },
-};
+      this.$emit('change', val)
+    }
+  }
+}
 </script>
 <style lang="scss">
 .de-pwd-input {
@@ -72,4 +72,4 @@ export default {
     font-size: 16px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/deCustomCm/deTextarea.vue b/frontend/src/components/deCustomCm/deTextarea.vue
index 1ca36bdfe8..438312dcb8 100644
--- a/frontend/src/components/deCustomCm/deTextarea.vue
+++ b/frontend/src/components/deCustomCm/deTextarea.vue
@@ -5,53 +5,53 @@
     show-word-limit
     :disabled="disabled"
     :value="value"
-    @input="handleChange"
     type="textarea"
     maxlength="200"
+    @input="handleChange"
   />
 </template>
 <script>
 export default {
-  name: "DeTextarea",
+  name: 'DeTextarea',
+  directives: {
+    count: {
+      update: function(el, binding) {
+        const lg = binding.value?.length || 0
+        const count = el.querySelector('.el-input__count')
+        if (!count) return
+        if (!lg) {
+          if (count?.classList?.contains('no-zore')) {
+            count.classList.remove('no-zore')
+          }
+          count.innerHTML = '0/200'
+          return
+        }
+        if (el.querySelector('.no-zore')) {
+          count.firstChild.innerHTML = lg
+          return
+        }
+        const newCount = document.createElement('span')
+        const num = document.createElement('span')
+        const total = document.createElement('span')
+        num.style.color = '#1F2329'
+        total.innerHTML = '/200'
+        num.innerHTML = lg
+        if (!newCount) return
+        newCount.classList.add('el-input__count', 'no-zore')
+        newCount.appendChild(num)
+        newCount.appendChild(total)
+        el.replaceChild(newCount, count)
+      }
+    }
+  },
   props: {
     disabled: Boolean,
-    value: String,
+    value: String
   },
   methods: {
     handleChange(val) {
-      this.$emit("input", val);
-    },
-  },
-  directives: {
-    count: {
-      update: function (el, binding) {
-        const lg = binding.value?.length || 0;
-        const count = el.querySelector(".el-input__count");
-        if (!count) return
-        if (!lg) {
-          if (count?.classList?.contains("no-zore")) {
-            count.classList.remove("no-zore");
-          }
-          count.innerHTML = "0/200";
-          return;
-        }
-        if (el.querySelector(".no-zore")) {
-          count.firstChild.innerHTML = lg;
-          return;
-        }
-        const newCount = document.createElement("span");
-        const num = document.createElement("span");
-        const total = document.createElement("span");
-        num.style.color = "#1F2329";
-        total.innerHTML = "/200";
-        num.innerHTML = lg;
-        if (!newCount) return
-        newCount.classList.add("el-input__count", "no-zore");
-        newCount.appendChild(num);
-        newCount.appendChild(total);
-        el.replaceChild(newCount, count);
-      },
-    },
-  },
-};
-</script>
\ No newline at end of file
+      this.$emit('input', val)
+    }
+  }
+}
+</script>
diff --git a/frontend/src/components/gridTable/index.vue b/frontend/src/components/gridTable/index.vue
index 178f927aa7..8a8a09ef16 100644
--- a/frontend/src/components/gridTable/index.vue
+++ b/frontend/src/components/gridTable/index.vue
@@ -3,56 +3,55 @@
     <el-table
       ref="table"
       v-bind="$attrs"
-      v-on="tableEvent"
       height="2000"
       :data="tableData"
       :style="{ width: '100%' }"
+      v-on="tableEvent"
     >
       <table-body :columns="columns">
-        <slot></slot>
+        <slot />
       </table-body>
-      <slot name="__operation"></slot>
+      <slot name="__operation" />
     </el-table>
     <div class="pagination-cont">
       <el-pagination
         background
         v-bind="paginationDefalut"
         v-on="paginationEvent"
-      >
-      </el-pagination>
+      />
     </div>
   </div>
 </template>
 
 <script>
-import tableBody from "./tableBody";
+import tableBody from './tableBody'
 export default {
   components: { tableBody },
   props: {
     columns: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     multipleSelection: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     pagination: {
       type: Object,
-      default: () => {},
+      default: () => {}
     },
     isRememberSelected: {
       type: Boolean,
-      default: false,
+      default: false
     },
     selectedFlags: {
       type: String,
-      default: "id",
+      default: 'id'
     },
     tableData: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
   data() {
     return {
@@ -61,98 +60,98 @@ export default {
         currentPage: 1,
         pageSizes: [10, 20, 50, 100],
         pageSize: 10,
-        layout: "total, prev, pager, next, sizes, jumper",
-        total: 0,
+        layout: 'total, prev, pager, next, sizes, jumper',
+        total: 0
       },
       multipleSelectionCach: [],
-      tableEvent: {},
-    };
-  },
-  created() {
-    this.handleListeners();
+      tableEvent: {}
+    }
   },
   computed: {
     multipleSelectionAll() {
-      return [...this.multipleSelectionCach, ...this.multipleSelection];
-    },
+      return [...this.multipleSelectionCach, ...this.multipleSelection]
+    }
   },
   watch: {
     pagination: {
       handler() {
         this.paginationDefalut = {
           ...this.paginationDefalut,
-          ...this.pagination,
-        };
+          ...this.pagination
+        }
       },
       deep: true,
-      immediate: true,
+      immediate: true
     },
     tableData: {
       handler() {
         this.$nextTick(() => {
-          this.$refs.table.doLayout();
-        });
-        if (!this.isRememberSelected) return;
+          this.$refs.table.doLayout()
+        })
+        if (!this.isRememberSelected) return
         // 先拷贝 重新加载数据会触发SelectionChange 导致this.multipleSelection为空
-        const multipleSelection = [...this.multipleSelection];
+        const multipleSelection = [...this.multipleSelection]
         this.$nextTick(() => {
-          this.handlerSelected(multipleSelection);
-        });
+          this.handlerSelected(multipleSelection)
+        })
       },
-      deep: true,
+      deep: true
     },
     columns: {
       handler() {
         this.$nextTick(() => {
-          this.$refs.table.doLayout();
-        });
+          this.$refs.table.doLayout()
+        })
       },
-      deep: true,
-    },
+      deep: true
+    }
+  },
+  created() {
+    this.handleListeners()
   },
   methods: {
     toggleRowSelection(row) {
-      this.$refs.table.toggleRowSelection(row, true);
+      this.$refs.table.toggleRowSelection(row, true)
     },
     handlerSelected(multipleSelection) {
       this.multipleSelectionCach = [
         ...this.multipleSelectionCach,
-        ...multipleSelection,
-      ];
+        ...multipleSelection
+      ]
       const flags = this.multipleSelectionCach.map(
         (ele) => ele[this.selectedFlags]
-      );
+      )
       // 当前页的选中项索引
-      const notCurrenArr = [];
+      const notCurrenArr = []
       this.tableData.forEach((ele) => {
-        const resultIndex = flags.indexOf(ele[this.selectedFlags]);
+        const resultIndex = flags.indexOf(ele[this.selectedFlags])
         if (resultIndex !== -1) {
-          this.$refs.table.toggleRowSelection(ele, true);
-          notCurrenArr.push(resultIndex);
+          this.$refs.table.toggleRowSelection(ele, true)
+          notCurrenArr.push(resultIndex)
         }
-      });
+      })
       notCurrenArr.sort().reduceRight((pre, next) => {
-        this.multipleSelectionCach.splice(next, 1);
-      }, 0);
+        this.multipleSelectionCach.splice(next, 1)
+      }, 0)
     },
     handleListeners() {
       Object.keys(this.$listeners).forEach((key) => {
         if (
           [
-            "size-change",
-            "current-change",
-            "prev-click",
-            "next-click",
+            'size-change',
+            'current-change',
+            'prev-click',
+            'next-click'
           ].includes(key)
         ) {
-          this.paginationEvent[key] = this.$listeners[key];
+          this.paginationEvent[key] = this.$listeners[key]
         } else {
-          this.tableEvent[key] = this.$listeners[key];
+          this.tableEvent[key] = this.$listeners[key]
         }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -226,4 +225,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/gridTable/tableBody.vue b/frontend/src/components/gridTable/tableBody.vue
index 7a987865d6..25da98acc6 100644
--- a/frontend/src/components/gridTable/tableBody.vue
+++ b/frontend/src/components/gridTable/tableBody.vue
@@ -1,25 +1,25 @@
 <script>
 export default {
-  name: "TableBody",
+  name: 'TableBody',
   functional: true,
   props: {
     columns: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
   render(h, context) {
-    const nodes = [];
-    const { columns } = context.props;
-    const { children = [] } = context;
-    if (!columns?.length) return children;
+    const nodes = []
+    const { columns } = context.props
+    const { children = [] } = context
+    if (!columns?.length) return children
     children.forEach((ele) => {
-      const { prop, type } = ele.componentOptions?.propsData || {};
-      if (columns.includes(prop) || type === "selection") {
-        nodes.push(ele);
+      const { prop, type } = ele.componentOptions?.propsData || {}
+      if (columns.includes(prop) || type === 'selection') {
+        nodes.push(ele)
       }
-    });
-    return nodes;
-  },
-};
-</script>
\ No newline at end of file
+    })
+    return nodes
+  }
+}
+</script>
diff --git a/frontend/src/components/msgCfm/index.js b/frontend/src/components/msgCfm/index.js
index 59331628b1..f3d99bfa99 100644
--- a/frontend/src/components/msgCfm/index.js
+++ b/frontend/src/components/msgCfm/index.js
@@ -2,44 +2,44 @@
 export default {
   methods: {
     openMessageSuccess(text, type) {
-      const h = this.$createElement;
-      const iconClass = `el-icon-${ type || 'success'}`;
-      const customClass = `de-message-${ type || 'success'} de-message`;
+      const h = this.$createElement
+      const iconClass = `el-icon-${type || 'success'}`
+      const customClass = `de-message-${type || 'success'} de-message`
       this.$message({
-        message: h("p", null, [h("span", null, this.$t(text))]),
+        message: h('p', null, [h('span', null, this.$t(text))]),
         iconClass,
-        customClass,
-      });
+        customClass
+      })
     },
-    handlerConfirm(options,confirmButtonTextInfo) {
-      let { title, content, type = 'danger', cb, confirmButtonText = confirmButtonTextInfo?confirmButtonTextInfo:this.$t('commons.delete'), showCancelButton = true, cancelButtonText = this.$t("commons.cancel"), cancelCb = () => {}, finallyCb = () => {} } = options;
-      let text = content ? `<span>${ this.$t(title) }</span><br><span class="use-html">${ this.$t(content) }</span>` : this.$t(title);
-      const dangerouslyUseHTMLString = Boolean(content);
-      let customClass = `de-confirm de-confirm-fail ${ dangerouslyUseHTMLString && 'de-use-html'}`
-      let confirmButtonClass = `de-confirm-${type}-btn de-confirm-btn`
+    handlerConfirm(options, confirmButtonTextInfo) {
+      const { title, content, type = 'danger', cb, confirmButtonText = confirmButtonTextInfo || this.$t('commons.delete'), showCancelButton = true, cancelButtonText = this.$t('commons.cancel'), cancelCb = () => {}, finallyCb = () => {} } = options
+      const text = content ? `<span>${this.$t(title)}</span><br><span class="use-html">${this.$t(content)}</span>` : this.$t(title)
+      const dangerouslyUseHTMLString = Boolean(content)
+      const customClass = `de-confirm de-confirm-fail ${dangerouslyUseHTMLString && 'de-use-html'}`
+      const confirmButtonClass = `de-confirm-${type}-btn de-confirm-btn`
       this.$confirm(
         text,
-        "",
+        '',
         {
           confirmButtonText,
           cancelButtonText,
           showCancelButton,
-          cancelButtonClass: "de-confirm-btn de-confirm-plain-cancel",
+          cancelButtonClass: 'de-confirm-btn de-confirm-plain-cancel',
           dangerouslyUseHTMLString,
           confirmButtonClass,
           customClass,
-          iconClass: "el-icon-warning",
+          iconClass: 'el-icon-warning'
         }
       )
         .then(() => {
-          cb();
+          cb()
         })
         .catch((action) => {
           cancelCb(action)
         })
         .finally(() => {
           finallyCb()
-        });
-    },
-  },
-};
+        })
+    }
+  }
+}
diff --git a/frontend/src/components/msgCfm/keyEnter.js b/frontend/src/components/msgCfm/keyEnter.js
index ca0d8f36a0..f91a4aeacc 100644
--- a/frontend/src/components/msgCfm/keyEnter.js
+++ b/frontend/src/components/msgCfm/keyEnter.js
@@ -1,16 +1,16 @@
 export default {
-    mounted() {
-        document.addEventListener('keypress', this.entryKey)
-    },
-    destroyed() {
-        document.removeEventListener('keypress', this.entryKey)
-    },
-    methods: {
-        entryKey(event) {
-            const keyCode = event.keyCode
-            if (keyCode === 13) {
-                this.$refs.search.blur()
-            }
-        },
+  mounted() {
+    document.addEventListener('keypress', this.entryKey)
+  },
+  destroyed() {
+    document.removeEventListener('keypress', this.entryKey)
+  },
+  methods: {
+    entryKey(event) {
+      const keyCode = event.keyCode
+      if (keyCode === 13) {
+        this.$refs.search.blur()
+      }
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index 8bda125c45..f054608404 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -309,7 +309,7 @@ export default {
   .el-date-picker__time-header {
     border-bottom: 1px solid var(--BrDateColor, #dfe4ed) !important;
   }
-  
+
   .el-picker-panel__footer {
     border-top: 1px solid var(--BrDateColor, #dfe4ed) !important;
     background: var(--BgDateColor, #FFFFFF) !important;
@@ -329,7 +329,6 @@ export default {
     background: var(--BgDateColor, #FFFFFF) !important;
     border:1px solid var(--BrDateColor, #dfe4ed) !important;
   }
-  
 
   .popper__arrow,
   .popper__arrow::after {
diff --git a/frontend/src/components/widget/DeWidget/DeInputSearch.vue b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
index 1011a5fa33..c09179631f 100644
--- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue
+++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
@@ -13,7 +13,11 @@
     @dblclick="setEdit"
   >
 
-    <el-button slot="append" icon="el-icon-search" @click="search" />
+    <el-button
+      slot="append"
+      icon="el-icon-search"
+      @click="search"
+    />
   </el-input>
 
 </template>
diff --git a/frontend/src/components/widget/DeWidget/DeNumberRange.vue b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
index 5f146afbe1..66590a87c0 100644
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
@@ -1,13 +1,32 @@
 <template>
 
-  <el-form v-if="element.options!== null && element.options.attrs!==null" ref="form" :model="form" :rules="rules">
+  <el-form
+    v-if="element.options!== null && element.options.attrs!==null"
+    ref="form"
+    :model="form"
+    :rules="rules"
+  >
     <div class="de-number-range-container">
       <el-form-item prop="min">
-        <el-input ref="de-number-range-min" v-model="form.min" :placeholder="$t(element.options.attrs.placeholder_min)" :size="size" @input="inputChange" @change="handleMinChange" />
+        <el-input
+          ref="de-number-range-min"
+          v-model="form.min"
+          :placeholder="$t(element.options.attrs.placeholder_min)"
+          :size="size"
+          @input="inputChange"
+          @change="handleMinChange"
+        />
       </el-form-item>
       <span>{{ $t('denumberrange.split_placeholder') }}</span>
       <el-form-item prop="max">
-        <el-input ref="de-number-range-max" v-model="form.max" :placeholder="$t(element.options.attrs.placeholder_max)" :size="size" @input="inputChange" @change="handleMaxChange" />
+        <el-input
+          ref="de-number-range-max"
+          v-model="form.max"
+          :placeholder="$t(element.options.attrs.placeholder_max)"
+          :size="size"
+          @input="inputChange"
+          @change="handleMaxChange"
+        />
       </el-form-item>
     </div>
   </el-form>
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index 5afd67e53a..2d4079f2b0 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -30,7 +30,10 @@
       :label="item[element.options.attrs.label]"
       :value="item[element.options.attrs.value]"
     >
-      <span :title="item[element.options.attrs.label]" style="display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ item[element.options.attrs.label] }}</span>
+      <span
+        :title="item[element.options.attrs.label]"
+        style="display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
+      >{{ item[element.options.attrs.label] }}</span>
     </el-option>
   </component>
 
diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
index 7c8d782d95..a43db7df16 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div v-if="element.options!== null && element.options.attrs!==null && show" class="de-select-grid-class">
+  <div
+    v-if="element.options!== null && element.options.attrs!==null && show"
+    class="de-select-grid-class"
+  >
     <div class="de-select-grid-search">
       <el-input
         ref="de-select-grid"
@@ -13,18 +16,43 @@
     </div>
     <div class="list">
 
-      <div v-if="element.options.attrs.multiple" class="checkbox-group-container">
-        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
+      <div
+        v-if="element.options.attrs.multiple"
+        class="checkbox-group-container"
+      >
+        <el-checkbox
+          v-model="checkAll"
+          :indeterminate="isIndeterminate"
+          @change="handleCheckAllChange"
+        >
           {{ $t('commons.all') }}</el-checkbox>
 
-        <el-checkbox-group v-model="value" @change="handleCheckedChange">
-          <el-checkbox v-for="item in datas.filter(node => !keyWord || (node.id && node.id.includes(keyWord)))" :key="item.id" :label="item.id">{{ item.id }}</el-checkbox>
+        <el-checkbox-group
+          v-model="value"
+          @change="handleCheckedChange"
+        >
+          <el-checkbox
+            v-for="item in datas.filter(node => !keyWord || (node.id && node.id.includes(keyWord)))"
+            :key="item.id"
+            :label="item.id"
+          >{{ item.id }}</el-checkbox>
         </el-checkbox-group>
       </div>
 
-      <div v-else class="radio-group-container">
-        <el-radio-group v-model="value" @change="changeRadioBox">
-          <el-radio v-for="(item, index) in datas.filter(node => !keyWord || (node.id && node.id.includes(keyWord)))" :key="index" :label="item.id" @click.native.prevent="testChange(item)">
+      <div
+        v-else
+        class="radio-group-container"
+      >
+        <el-radio-group
+          v-model="value"
+          @change="changeRadioBox"
+        >
+          <el-radio
+            v-for="(item, index) in datas.filter(node => !keyWord || (node.id && node.id.includes(keyWord)))"
+            :key="index"
+            :label="item.id"
+            @click.native.prevent="testChange(item)"
+          >
             <span>{{ item.id }}</span>
           </el-radio>
         </el-radio-group>
diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
index 72e4286b82..12dea5b69b 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
@@ -60,6 +60,7 @@ export default {
       show: true,
       selectOptionWidth: 0,
       datas: [],
+      // eslint-disable-next-line
       value: this.isSingle ? '' : [],
       selectParams: {
         clearable: true,
diff --git a/frontend/src/components/widget/DeWidget/DeShowDate.vue b/frontend/src/components/widget/DeWidget/DeShowDate.vue
index d888839518..dfa8080144 100644
--- a/frontend/src/components/widget/DeWidget/DeShowDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeShowDate.vue
@@ -1,12 +1,28 @@
 <template>
   <div style="height: 100%">
-    <time-default v-if="element.formatInfo.openMode === '0'" :ref="element.id" :element="element" />
+    <time-default
+      v-if="element.formatInfo.openMode === '0'"
+      :ref="element.id"
+      :element="element"
+    />
 
-    <time-elec v-if="element.formatInfo.openMode === '1'" :ref="element.id" :element="element" />
+    <time-elec
+      v-if="element.formatInfo.openMode === '1'"
+      :ref="element.id"
+      :element="element"
+    />
 
-    <time-simple v-if="element.formatInfo.openMode === '2'" :ref="element.id" :element="element" />
+    <time-simple
+      v-if="element.formatInfo.openMode === '2'"
+      :ref="element.id"
+      :element="element"
+    />
 
-    <time-complex v-if="element.formatInfo.openMode === '3'" :ref="element.id" :element="element" />
+    <time-complex
+      v-if="element.formatInfo.openMode === '3'"
+      :ref="element.id"
+      :element="element"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
index 387f2a264a..81f480e970 100644
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -25,10 +25,19 @@
         <span slot="label">
           <span>{{ item.title }}</span>
 
-          <el-dropdown v-if="dropdownShow" slot="label" class="de-tab-drop" trigger="click" @command="handleCommand">
+          <el-dropdown
+            v-if="dropdownShow"
+            slot="label"
+            class="de-tab-drop"
+            trigger="click"
+            @command="handleCommand"
+          >
             <span class="el-dropdown-link">
 
-              <i v-if="isEdit" class="de-tab-i el-icon-arrow-down el-icon--right" />
+              <i
+                v-if="isEdit"
+                class="de-tab-i el-icon-arrow-down el-icon--right"
+              />
             </span>
 
             <el-dropdown-menu slot="dropdown">
@@ -102,9 +111,16 @@
         show-word-limit
         :placeholder="$t('dataset.input_content')"
       />
-      <span slot="footer" class="dialog-footer">
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button @click="dialogVisible = false">{{ $t('table.cancel') }}</el-button>
-        <el-button :disabled="!titleValid" type="primary" @click="sureCurTitle">{{ $t('table.confirm') }}</el-button>
+        <el-button
+          :disabled="!titleValid"
+          type="primary"
+          @click="sureCurTitle"
+        >{{ $t('table.confirm') }}</el-button>
       </span>
     </el-dialog>
 
@@ -119,12 +135,22 @@
       center
     >
       <div style="width: 100%;min-height: 250px; max-height: 300px; overflow-y: auto;">
-        <view-select v-if="viewDialogVisible" ref="viewSelect" :select-model="true" />
+        <view-select
+          v-if="viewDialogVisible"
+          ref="viewSelect"
+          :select-model="true"
+        />
       </div>
 
-      <span slot="footer" class="dialog-footer">
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button @click="viewDialogVisible = false">{{ $t('table.cancel') }}</el-button>
-        <el-button type="primary" @click="sureViewSelector">{{ $t('table.confirm') }}</el-button>
+        <el-button
+          type="primary"
+          @click="sureViewSelector"
+        >{{ $t('table.confirm') }}</el-button>
       </span>
     </el-dialog>
 
@@ -138,10 +164,19 @@
       :close-on-click-modal="false"
       center
     >
-      <tab-use-list v-if="otherComponentDialogVisible" ref="otherComponentSelect" />
-      <span slot="footer" class="dialog-footer">
+      <tab-use-list
+        v-if="otherComponentDialogVisible"
+        ref="otherComponentSelect"
+      />
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button @click="otherComponentDialogVisible = false">{{ $t('table.cancel') }}</el-button>
-        <el-button type="primary" @click="sureOtherComponentSelector">{{ $t('table.confirm') }}</el-button>
+        <el-button
+          type="primary"
+          @click="sureOtherComponentSelector"
+        >{{ $t('table.confirm') }}</el-button>
       </span>
     </el-dialog>
 
@@ -159,7 +194,7 @@ import { mapState } from 'vuex'
 import { chartCopy } from '@/api/chart/chart'
 import { buildFilterMap } from '@/utils/conditionUtil'
 import TabUseList from '@/views/panel/AssistComponent/tabUseList'
-import {findPanelElementInfo} from "@/api/panel/panel";
+import { findPanelElementInfo } from '@/api/panel/panel'
 
 export default {
   name: 'DeTabls',
@@ -308,7 +343,7 @@ export default {
   methods: {
     setContentThemeStyle() {
       this.element.options.tabList.forEach(tab => {
-        if(tab.content && tab.content.type === 'view') {
+        if (tab.content && tab.content.type === 'view') {
           tab.content.commonBackground = this.themeStyle ? JSON.parse(JSON.stringify(this.themeStyle)) : null
         }
       })
@@ -394,8 +429,7 @@ export default {
           component.propValue = propValue
           component.filters = []
           component.linkageFilters = []
-          if(this.themeStyle)
-          component.commonBackground = JSON.parse(JSON.stringify(this.themeStyle))
+          if (this.themeStyle) { component.commonBackground = JSON.parse(JSON.stringify(this.themeStyle)) }
         }
       })
       component.id = newComponentId
@@ -407,20 +441,19 @@ export default {
         this.curItem.name = newComponentId
         this.viewDialogVisible = false
         this.activeTabName = newComponentId
-        if(node.modelInnerType==='richTextView'){
-          findPanelElementInfo(node.innerId).then(viewElement =>{
-            if(viewElement.data){
+        if (node.modelInnerType === 'richTextView') {
+          findPanelElementInfo(node.innerId).then(viewElement => {
+            if (viewElement.data) {
               this.curItem.content.propValue.textValue = viewElement.data.propValue.textValue
             }
             this.$store.dispatch('chart/setViewId', component.propValue.viewId)
             this.styleChange()
           })
-        }else{
+        } else {
           this.$store.dispatch('chart/setViewId', component.propValue.viewId)
           this.styleChange()
         }
       })
-
     },
 
     setComponentInfo() {
diff --git a/frontend/src/components/widget/DeWidget/DeTreeSelect.vue b/frontend/src/components/widget/DeWidget/DeTreeSelect.vue
index 84beff7034..01203f379b 100644
--- a/frontend/src/components/widget/DeWidget/DeTreeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeTreeSelect.vue
@@ -1,6 +1,14 @@
 <template>
 
-  <el-select :size="size" v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" :popper-append-to-body="inScreen" @change="changeValue">
+  <el-select
+    v-if="options!== null && options.attrs!==null"
+    v-model="values"
+    :size="size"
+    :multiple="options.attrs.multiple"
+    :placeholder="options.attrs.placeholder"
+    :popper-append-to-body="inScreen"
+    @change="changeValue"
+  >
     <el-option
       v-for="item in options.attrs.datas"
       :key="item[options.attrs.key]"
diff --git a/frontend/src/components/widget/DeWidget/TabStyle.vue b/frontend/src/components/widget/DeWidget/TabStyle.vue
index 5a6687886c..5c21b2029b 100644
--- a/frontend/src/components/widget/DeWidget/TabStyle.vue
+++ b/frontend/src/components/widget/DeWidget/TabStyle.vue
@@ -4,54 +4,110 @@
     placement="right"
     trigger="click"
   >
-    <el-form ref="tabsStyleForm" :model="styleInfo" size="small" class="demo-form-inline">
-      <el-form-item label="头部字体颜色" prop="headFrontColor">
-        <div class="picker-color-div" @click="triggerTheme('headFontColor')">
+    <el-form
+      ref="tabsStyleForm"
+      :model="styleInfo"
+      size="small"
+      class="demo-form-inline"
+    >
+      <el-form-item
+        label="头部字体颜色"
+        prop="headFrontColor"
+      >
+        <div
+          class="picker-color-div"
+          @click="triggerTheme('headFontColor')"
+        >
           <el-input
             v-model="styleInfo.headFontColor"
             readonly
             class="theme-input"
           >
-            <el-color-picker ref="headFontColorPicker" slot="prefix" v-model="styleInfo.headFontColor" class="theme-picker" @change="styleChange" />
+            <el-color-picker
+              ref="headFontColorPicker"
+              slot="prefix"
+              v-model="styleInfo.headFontColor"
+              class="theme-picker"
+              @change="styleChange"
+            />
           </el-input>
         </div>
       </el-form-item>
-      <el-form-item label="头部字体选中颜色" prop="headFontActiveColor">
-        <div class="picker-color-div" @click="triggerTheme('headFontActiveColor')">
+      <el-form-item
+        label="头部字体选中颜色"
+        prop="headFontActiveColor"
+      >
+        <div
+          class="picker-color-div"
+          @click="triggerTheme('headFontActiveColor')"
+        >
           <el-input
             v-model="styleInfo.headFontActiveColor"
             readonly
             class="theme-input"
           >
-            <el-color-picker ref="headFontActiveColorPicker" slot="prefix" v-model="styleInfo.headFontActiveColor" class="theme-picker" @change="styleChange" />
+            <el-color-picker
+              ref="headFontActiveColorPicker"
+              slot="prefix"
+              v-model="styleInfo.headFontActiveColor"
+              class="theme-picker"
+              @change="styleChange"
+            />
           </el-input>
         </div>
       </el-form-item>
-      <el-form-item label="头部边框颜色" prop="headBorderColor">
-        <div class="picker-color-div" @click="triggerTheme('headBorderColor')">
+      <el-form-item
+        label="头部边框颜色"
+        prop="headBorderColor"
+      >
+        <div
+          class="picker-color-div"
+          @click="triggerTheme('headBorderColor')"
+        >
           <el-input
             v-model="styleInfo.headBorderColor"
             readonly
             class="theme-input"
           >
-            <el-color-picker ref="headBorderColorPicker" slot="prefix" v-model="styleInfo.headBorderColor" class="theme-picker" @change="styleChange" />
+            <el-color-picker
+              ref="headBorderColorPicker"
+              slot="prefix"
+              v-model="styleInfo.headBorderColor"
+              class="theme-picker"
+              @change="styleChange"
+            />
           </el-input>
         </div>
       </el-form-item>
-      <el-form-item label="头部边框选中颜色" prop="headBorderActiveColor">
-        <div class="picker-color-div" @click="triggerTheme('headBorderActiveColor')">
+      <el-form-item
+        label="头部边框选中颜色"
+        prop="headBorderActiveColor"
+      >
+        <div
+          class="picker-color-div"
+          @click="triggerTheme('headBorderActiveColor')"
+        >
           <el-input
             v-model="styleInfo.headBorderActiveColor"
             readonly
             class="theme-input"
           >
-            <el-color-picker ref="headBorderActiveColorPicker" slot="prefix" v-model="styleInfo.headBorderActiveColor" class="theme-picker" @change="styleChange" />
+            <el-color-picker
+              ref="headBorderActiveColorPicker"
+              slot="prefix"
+              v-model="styleInfo.headBorderActiveColor"
+              class="theme-picker"
+              @change="styleChange"
+            />
           </el-input>
         </div>
       </el-form-item>
     </el-form>
 
-    <i slot="reference" class="iconfont icon-tabs" />
+    <i
+      slot="reference"
+      class="iconfont icon-tabs"
+    />
   </el-popover>
 
 </template>
diff --git a/frontend/src/components/widget/DeWidget/TimeComplex.vue b/frontend/src/components/widget/DeWidget/TimeComplex.vue
index e7b95c1346..d3c0512850 100644
--- a/frontend/src/components/widget/DeWidget/TimeComplex.vue
+++ b/frontend/src/components/widget/DeWidget/TimeComplex.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <canvas :id="'complex_canvas'+element.id" width="500" height="500" />
+    <canvas
+      :id="'complex_canvas'+element.id"
+      width="500"
+      height="500"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/components/widget/DeWidget/TimeDefault.vue b/frontend/src/components/widget/DeWidget/TimeDefault.vue
index 5b59dcd0cc..06c00d4554 100644
--- a/frontend/src/components/widget/DeWidget/TimeDefault.vue
+++ b/frontend/src/components/widget/DeWidget/TimeDefault.vue
@@ -1,5 +1,8 @@
 <template>
-  <div style="display: flex;align-items: center;" :style="{ 'height': containerHeight, 'margin':timeMargin +'px'}">
+  <div
+    style="display: flex;align-items: center;"
+    :style="{ 'height': containerHeight, 'margin':timeMargin +'px'}"
+  >
 
     <p style="width:100%;margin:auto;">{{ nowDate }}</p>
 
diff --git a/frontend/src/components/widget/DeWidget/TimeElec.vue b/frontend/src/components/widget/DeWidget/TimeElec.vue
index 0270662399..a5d29f3a9d 100644
--- a/frontend/src/components/widget/DeWidget/TimeElec.vue
+++ b/frontend/src/components/widget/DeWidget/TimeElec.vue
@@ -1,7 +1,14 @@
 <template>
-  <div id="clock" :style="{'--varBg': varBg}">
+  <div
+    id="clock"
+    :style="{'--varBg': varBg}"
+  >
     <p class="date">{{ date }}</p>
-    <p v-if="time" class="time" :style="{'fontSize': (parseInt(element.style.fontSize) * 3) + 'px'}">{{ time }}</p>
+    <p
+      v-if="time"
+      class="time"
+      :style="{'fontSize': (parseInt(element.style.fontSize) * 3) + 'px'}"
+    >{{ time }}</p>
   </div>
 </template>
 
diff --git a/frontend/src/components/widget/DeWidget/TimeSimple.vue b/frontend/src/components/widget/DeWidget/TimeSimple.vue
index a33212b60e..705d9f1810 100644
--- a/frontend/src/components/widget/DeWidget/TimeSimple.vue
+++ b/frontend/src/components/widget/DeWidget/TimeSimple.vue
@@ -1,6 +1,11 @@
 <template>
   <div :style="{ 'height': containerHeight}">
-    <div ref="canvasContainer" class="time-s-class" style="height: calc(100% - 50px);" :style="{'margin':timeMargin +'px'}">
+    <div
+      ref="canvasContainer"
+      class="time-s-class"
+      style="height: calc(100% - 50px);"
+      :style="{'margin':timeMargin +'px'}"
+    >
       <canvas
         :id="'simple-canvas'+element.id"
         class="de-canvas"
@@ -9,7 +14,11 @@
       />
     </div>
     <div style="height: 50px;display: flex;align-items: center;">
-      <p :id="element.id + '_fulltime'" :style="{'fontSize': (parseInt(element.style.fontSize) * 1) + 'px', 'color':element.style.color}" style="width:100%;margin:auto;" />
+      <p
+        :id="element.id + '_fulltime'"
+        :style="{'fontSize': (parseInt(element.style.fontSize) * 1) + 'px', 'color':element.style.color}"
+        style="width:100%;margin:auto;"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/widget/DeWidget/TitlePostion.vue b/frontend/src/components/widget/DeWidget/TitlePostion.vue
index 9256b8d988..1af68342f3 100644
--- a/frontend/src/components/widget/DeWidget/TitlePostion.vue
+++ b/frontend/src/components/widget/DeWidget/TitlePostion.vue
@@ -5,25 +5,53 @@
     trigger="click"
   >
     <el-col>
-      <el-form ref="tabsStyleForm" :model="styleInfo" label-width="80px" size="mini" class="demo-form-inline">
-        <el-form-item :label="$t('chart.text_h_position')" class="form-item">
-          <el-radio-group v-model="styleInfo.horizontal" size="mini">
+      <el-form
+        ref="tabsStyleForm"
+        :model="styleInfo"
+        label-width="80px"
+        size="mini"
+        class="demo-form-inline"
+      >
+        <el-form-item
+          :label="$t('chart.text_h_position')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="styleInfo.horizontal"
+            size="mini"
+          >
             <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
-            <el-radio-button :disabled="styleInfo.vertical === 'center' && this.elementType !== 'de-select-grid'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+            <el-radio-button
+              :disabled="styleInfo.vertical === 'center' && elementType !== 'de-select-grid'"
+              label="center"
+            >{{ $t('chart.text_pos_center') }}</el-radio-button>
             <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-if="showVertical" :label="$t('chart.text_v_position')" class="form-item">
-          <el-radio-group v-model="styleInfo.vertical" size="mini">
+        <el-form-item
+          v-if="showVertical"
+          :label="$t('chart.text_v_position')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="styleInfo.vertical"
+            size="mini"
+          >
             <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
-            <el-radio-button :disabled="styleInfo.horizontal === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+            <el-radio-button
+              :disabled="styleInfo.horizontal === 'center'"
+              label="center"
+            >{{ $t('chart.text_pos_center') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
 
       </el-form>
     </el-col>
 
-    <i slot="reference" class="iconfont icon-tabs" />
+    <i
+      slot="reference"
+      class="iconfont icon-tabs"
+    />
   </el-popover>
 
 </template>
@@ -44,7 +72,7 @@ export default {
     elementType: {
       type: String,
       default: ''
-    },
+    }
   }
 
 }
diff --git a/frontend/src/components/widget/DeWidget/customInput.js b/frontend/src/components/widget/DeWidget/customInput.js
index b33449e1c9..be9bd6c8b5 100644
--- a/frontend/src/components/widget/DeWidget/customInput.js
+++ b/frontend/src/components/widget/DeWidget/customInput.js
@@ -27,7 +27,7 @@ export default {
         }
       },
       deep: true
-    },
+    }
   },
   computed: {
     cssArr() {
@@ -57,6 +57,6 @@ export default {
           document.documentElement.style.removeProperty(cssVar[index])
         }
       })
-    },
+    }
   }
 }
diff --git a/frontend/src/components/widget/DeWidget/serviceNameFn.js b/frontend/src/components/widget/DeWidget/serviceNameFn.js
index 15de69ee3b..c464fd9342 100644
--- a/frontend/src/components/widget/DeWidget/serviceNameFn.js
+++ b/frontend/src/components/widget/DeWidget/serviceNameFn.js
@@ -87,5 +87,5 @@ export {
   textSelectGridWidget,
   textSelectTreeWidget,
   textSelectWidget,
-  handlerInputStyle,
+  handlerInputStyle
 }
diff --git a/frontend/src/components/widget/DeWidget/sources/ElQuarter.vue b/frontend/src/components/widget/DeWidget/sources/ElQuarter.vue
index 5b187feb35..7b74ae004f 100644
--- a/frontend/src/components/widget/DeWidget/sources/ElQuarter.vue
+++ b/frontend/src/components/widget/DeWidget/sources/ElQuarter.vue
@@ -5,22 +5,37 @@
       style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
       @click.stop="showSeason=false"
     />
-    <el-input v-model="showValue" :placeholder="placeholder" style="width:138px;" @focus="showSeason=true">
-      <i slot="prefix" class="el-input__icon el-icon-date" />
+    <el-input
+      v-model="showValue"
+      :placeholder="placeholder"
+      style="width:138px;"
+      @focus="showSeason=true"
+    >
+      <i
+        slot="prefix"
+        class="el-input__icon el-icon-date"
+      />
     </el-input>
     <el-card
       v-show="showSeason"
       class="box-card"
       style="width:322px !important;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
     >
-      <div slot="header" class="clearfix" style="text-align:center;padding:0">
+      <div
+        slot="header"
+        class="clearfix"
+        style="text-align:center;padding:0"
+      >
         <button
           type="button"
           aria-label="前一年"
           class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
           @click="prev"
         />
-        <span role="button" class="el-date-picker__header-label">{{ year }}年</span>
+        <span
+          role="button"
+          class="el-date-picker__header-label"
+        >{{ year }}年</span>
         <button
           type="button"
           aria-label="后一年"
@@ -28,7 +43,10 @@
           @click="next"
         />
       </div>
-      <div class="text item" style="text-align:center;">
+      <div
+        class="text item"
+        style="text-align:center;"
+      >
         <el-button
           type="text"
           size="medium"
@@ -42,7 +60,10 @@
           @click="selectSeason(1)"
         >第二季度</el-button>
       </div>
-      <div class="text item" style="text-align:center;">
+      <div
+        class="text item"
+        style="text-align:center;"
+      >
         <el-button
           type="text"
           size="medium"
diff --git a/frontend/src/directive/index.js b/frontend/src/directive/index.js
index 7077bd0dec..a776fb09d1 100644
--- a/frontend/src/directive/index.js
+++ b/frontend/src/directive/index.js
@@ -64,10 +64,10 @@ export const bottom2TopDrag = {
   }
 }
 
-const closePress =  {
-  inserted: function (el) {
-    el.querySelector('.el-drawer__close-btn').onmousedown = function (e) {
-      e.currentTarget.style.setProperty('background', '#d2d3d4', 'important');
+const closePress = {
+  inserted: function(el) {
+    el.querySelector('.el-drawer__close-btn').onmousedown = function(e) {
+      e.currentTarget.style.setProperty('background', '#d2d3d4', 'important')
     }
     el.querySelector('.el-drawer__close-btn').onmouseup = function(e) {
       e.currentTarget.style.background = 'none'
@@ -83,7 +83,7 @@ const btnPress = {
     el.onmouseup = function(e) {
       e.currentTarget.style.background = 'none'
     }
-  },
+  }
 }
 
 const customStyle = {
@@ -96,7 +96,7 @@ const customStyle = {
       label.style.setProperty('color', binding.value.wordColor, 'important')
       label.setAttribute('data-color', binding.value.wordColor)
     }
-  },
+  }
 }
 
 export default {
diff --git a/frontend/src/icons/index.js b/frontend/src/icons/index.js
index 2c6b309c96..05d6e7e056 100644
--- a/frontend/src/icons/index.js
+++ b/frontend/src/icons/index.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import SvgIcon from '@/components/SvgIcon'// svg component
 
 // register globally
-Vue.component('svg-icon', SvgIcon)
+Vue.component('SvgIcon', SvgIcon)
 
 const req = require.context('./svg', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys().map(requireContext)
diff --git a/frontend/src/layout/components/AppMain.vue b/frontend/src/layout/components/AppMain.vue
index 1fe3409c83..f6f064801f 100644
--- a/frontend/src/layout/components/AppMain.vue
+++ b/frontend/src/layout/components/AppMain.vue
@@ -1,6 +1,9 @@
 <template>
   <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
+    <transition
+      name="fade-transform"
+      mode="out-in"
+    >
       <el-main class="ms-main-container">
         <router-view :key="key" />
       </el-main>
diff --git a/frontend/src/layout/components/Licbar.vue b/frontend/src/layout/components/Licbar.vue
index 57f9693174..dfcc15f1b6 100644
--- a/frontend/src/layout/components/Licbar.vue
+++ b/frontend/src/layout/components/Licbar.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-if="!licValidate && licStatus !== 'no_record'" class="lic">
+  <div
+    v-if="!licValidate && licStatus !== 'no_record'"
+    class="lic"
+  >
     <strong>{{ $t(licMsg) }}</strong>
   </div>
 </template>
diff --git a/frontend/src/layout/components/Sidebar/Logo.vue b/frontend/src/layout/components/Sidebar/Logo.vue
index d48754cfee..5d7b6c4f2c 100644
--- a/frontend/src/layout/components/Sidebar/Logo.vue
+++ b/frontend/src/layout/components/Sidebar/Logo.vue
@@ -1,12 +1,36 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+  <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
+        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">
+      <router-link
+        v-else
+        key="expand"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <img
+          v-if="logo"
+          :src="logo"
+          class="sidebar-logo"
+        >
 
         <!-- <svg-icon icon-class="system" class="sidebar-logo" /> -->
 
diff --git a/frontend/src/layout/components/Sidebar/SidebarItem.vue b/frontend/src/layout/components/Sidebar/SidebarItem.vue
index 1b3959d1d0..f891e9e8d7 100644
--- a/frontend/src/layout/components/Sidebar/SidebarItem.vue
+++ b/frontend/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,16 +1,35 @@
 <template>
   <div v-if="!item.hidden">
     <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="!isNest&&(onlyOneChild.meta.icon||(item.meta&&item.meta.icon))" :title="onlyOneChild.meta.title" />
+      <app-link
+        v-if="onlyOneChild.meta"
+        :to="resolvePath(onlyOneChild.path)"
+      >
+        <el-menu-item
+          :index="resolvePath(onlyOneChild.path)"
+          :class="{'submenu-title-noDropdown':!isNest}"
+        >
+          <item
+            :icon="!isNest&&(onlyOneChild.meta.icon||(item.meta&&item.meta.icon))"
+            :title="onlyOneChild.meta.title"
+          />
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-submenu :class="[{ 'submenu-is-collapse': isCollapse }]" v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+    <el-submenu
+      v-else
+      ref="subMenu"
+      :class="[{ 'submenu-is-collapse': isCollapse }]"
+      :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" />
+        <item
+          v-if="item.meta"
+          :icon="item.meta && item.meta.icon"
+          :title="item.meta.title"
+        />
       </template>
       <sidebar-item
         v-for="child in item.children"
diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index 2cf79107b9..2803d7986e 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -1,7 +1,13 @@
 <template>
   <!-- <div :class="{'has-logo':showLogo}" :style="{'--active-bg': activeBg, '--theme':$store.state.settings.theme , '--left-menu-hovor': variables.leftMenuHovor}"> -->
-  <div :class="{ 'has-logo': showLogo }" class="de-sidebar-container">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+  <div
+    :class="{ 'has-logo': showLogo }"
+    class="de-sidebar-container"
+  >
+    <logo
+      v-if="showLogo"
+      :collapse="isCollapse"
+    />
     <el-menu
       :default-active="activeMenu"
       :collapse="isCollapse"
@@ -12,8 +18,8 @@
     >
       <sidebar-item
         v-for="route in routes"
-        :isCollapse="isCollapse"
         :key="route.path"
+        :is-collapse="isCollapse"
         :item="route"
         :base-path="route.path"
       />
@@ -26,52 +32,50 @@
       <i
         :style="{ transform: isCollapse ? 'rotate(90deg)' : 'rotate(-90deg)' }"
         class="el-icon-upload2"
-      ></i>
+      />
       {{ isCollapse ? "" : "收起导航" }}
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters, mapState } from "vuex";
-import Logo from "./Logo";
-import SidebarItem from "./SidebarItem";
-import variables from "@/styles/variables.scss";
-import path from "path";
-import { isExternal } from "@/utils/validate";
+import { mapGetters, mapState } from 'vuex'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
 export default {
   components: { SidebarItem, Logo },
   computed: {
-    ...mapGetters(["sidebar"]),
+    ...mapGetters(['sidebar']),
     ...mapState({
-      isCollapse: state => state.isCollapse,
+      isCollapse: state => state.isCollapse
     }),
     routes() {
-      return this.$store.state.permission.currentRoutes.children;
+      return this.$store.state.permission.currentRoutes.children
     },
     activeMenu() {
-      const route = this.$route;
-      const { meta, path } = route;
+      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 meta.activeMenu
       }
-      return path;
+      return path
     },
     showLogo() {
-      return this.$store.state.settings.sidebarLogo;
+      return this.$store.state.settings.sidebarLogo
     },
     variables() {
-      return variables;
-    },
+      return variables
+    }
   },
   methods: {
     changeSideWidth() {
-      this.$store.commit('setIsCollapse', !this.isCollapse);
-      this.$emit("changeSideWidth", this.isCollapse ? "70px" : "");
-    },
-  },
-};
+      this.$store.commit('setIsCollapse', !this.isCollapse)
+      this.$emit('changeSideWidth', this.isCollapse ? '70px' : '')
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index f580b1a2c3..0154741c49 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -1,8 +1,21 @@
 <template>
   <div class="top-nav">
-    <div v-loading="!axiosFinished" class="log">
-      <svg-icon v-if="!logoUrl && axiosFinished" icon-class="DataEase" custom-class="top-nav-logo-icon" />
-      <img v-if="logoUrl && axiosFinished" :src="logoUrl" width="140" alt="" style="padding-top: 10px;">
+    <div
+      v-loading="!axiosFinished"
+      class="log"
+    >
+      <svg-icon
+        v-if="!logoUrl && axiosFinished"
+        icon-class="DataEase"
+        custom-class="top-nav-logo-icon"
+      />
+      <img
+        v-if="logoUrl && axiosFinished"
+        :src="logoUrl"
+        width="140"
+        alt=""
+        style="padding-top: 10px;"
+      >
     </div>
     <el-menu
       class="de-top-menu"
@@ -12,28 +25,39 @@
       :default-active="activeMenu"
       @select="handleSelect"
     >
-      <div v-for="item in permission_routes" :key="item.path" class="nav-item">
+      <div
+        v-for="item in permission_routes"
+        :key="item.path"
+        class="nav-item"
+      >
         <app-link :to="resolvePath(item)">
-          <el-menu-item v-if="!item.hidden" :index="item.path">
+          <el-menu-item
+            v-if="!item.hidden"
+            :index="item.path"
+          >
             {{ item.meta ? item.meta.title : item.children[0].meta.title }}</el-menu-item>
         </app-link>
       </div>
     </el-menu>
 
-    <div class="right-menu" style="color: var(--TopTextColor)">
-      <template>
-        <notification class="right-menu-item hover-effect" />
-        <lang-select class="right-menu-item hover-effect" />
-        <div style="height: 100%;padding: 0 8px;" class="right-menu-item hover-effect">
-          <a
-            :href="helpLink"
-            target="_blank"
-            style="display: flex;height: 100%;width: 100%;justify-content: center;align-items: center;"
-          >
-            <svg-icon icon-class="docs" />
-          </a>
-        </div>
-      </template>
+    <div
+      class="right-menu"
+      style="color: var(--TopTextColor)"
+    >
+      <notification class="right-menu-item hover-effect" />
+      <lang-select class="right-menu-item hover-effect" />
+      <div
+        style="height: 100%;padding: 0 8px;"
+        class="right-menu-item hover-effect"
+      >
+        <a
+          :href="helpLink"
+          target="_blank"
+          style="display: flex;height: 100%;width: 100%;justify-content: center;align-items: center;"
+        >
+          <svg-icon icon-class="docs" />
+        </a>
+      </div>
 
       <el-dropdown
         ref="my-drop"
@@ -41,7 +65,10 @@
         style="display: flex;align-items: center; width:100px;"
         trigger="click"
       >
-        <div class="el-dropdown-link" style="display: flex;color: var(--TopTextColor);font-size: 14px; width:100%;">
+        <div
+          class="el-dropdown-link"
+          style="display: flex;color: var(--TopTextColor);font-size: 14px; width:100%;"
+        >
           <span style="max-width:80px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ name }}</span>
           <span><i class="el-icon-arrow-down el-icon--right" /></span>
         </div>
@@ -50,7 +77,10 @@
             <el-dropdown-item>{{ $t('commons.personal_info') }}</el-dropdown-item>
           </router-link>
 
-          <router-link v-if="$store.getters.validate" to="/ukey/index">
+          <router-link
+            v-if="$store.getters.validate"
+            to="/ukey/index"
+          >
             <el-dropdown-item>{{ $t('commons.ukey_title') }}</el-dropdown-item>
           </router-link>
 
@@ -61,7 +91,10 @@
           <router-link to="/about/index">
             <el-dropdown-item>{{ $t('commons.about_us') }}</el-dropdown-item>
           </router-link>
-          <el-dropdown-item divided @click.native="logout">
+          <el-dropdown-item
+            divided
+            @click.native="logout"
+          >
             <span style="display:block;">{{ $t('commons.exit_system') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -76,7 +109,11 @@
       :fullscreen="true"
       append-to-body
     >
-      <template-market v-if="templateMarketShow" style="text-align: center" @closeDialog="changeTemplateMarketShow(false)" />
+      <template-market
+        v-if="templateMarketShow"
+        style="text-align: center"
+        @closeDialog="changeTemplateMarketShow(false)"
+      />
     </el-dialog>
   </div>
 
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 5b68500c6e..5794c2ee35 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -1,22 +1,52 @@
 <template>
-  <div :class="classObj" class="app-wrapper">
+  <div
+    :class="classObj"
+    class="app-wrapper"
+  >
     <licbar />
-    <topbar v-if="!fullHeightFlag && finishLoad" :show-tips="showTips" />
+    <topbar
+      v-if="!fullHeightFlag && finishLoad"
+      :show-tips="showTips"
+    />
 
     <de-container :style="mainStyle">
-      <de-aside-container v-if="!sidebar.hide" :isCollapseWidth="sideWidth" type="system" class="le-aside-container">
-        <sidebar @changeSideWidth="(side) => sideWidth = side"  class="sidebar-container" />
+      <de-aside-container
+        v-if="!sidebar.hide"
+        :is-collapse-width="sideWidth"
+        type="system"
+        class="le-aside-container"
+      >
+        <sidebar
+          class="sidebar-container"
+          @changeSideWidth="(side) => sideWidth = side"
+        />
       </de-aside-container>
 
-      <de-main-container class="la-main-container" :class="{'full-height':fullHeightFlag}">
+      <de-main-container
+        class="la-main-container"
+        :class="{'full-height':fullHeightFlag}"
+      >
         <app-main />
       </de-main-container>
     </de-container>
-    <div v-if="showTips" class="pwd-tips">
+    <div
+      v-if="showTips"
+      class="pwd-tips"
+    >
       <span>{{ $t('commons.first_login_tips') }}</span>
       <div style="text-align: right; margin-bottom: 10px;">
-        <el-button size="mini" :disabled="buttonDisable" style="padding-right: 65px;" type="text" @click="doNotNoti">{{ $t('commons.donot_noti') }}</el-button>
-        <el-button type="primary" size="mini" @click="showTips = false">{{ $t('commons.roger_that') }}</el-button>
+        <el-button
+          size="mini"
+          :disabled="buttonDisable"
+          style="padding-right: 65px;"
+          type="text"
+          @click="doNotNoti"
+        >{{ $t('commons.donot_noti') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="showTips = false"
+        >{{ $t('commons.roger_that') }}</el-button>
       </div>
       <div class="arrow" />
     </div>
@@ -52,7 +82,7 @@ export default {
       showTips: false,
       finishLoad: false,
       buttonDisable: false,
-      sideWidth: "",
+      sideWidth: ''
     }
   },
   computed: {
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 13658d299c..1d583ade25 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -35,7 +35,7 @@ import { GaodeMap } from '@antv/l7-maps'
 Vue.config.productionTip = false
 Vue.use(VueClipboard)
 Vue.use(widgets)
-Vue.component('draggable', draggable)
+Vue.component('Draggable', draggable)
 Vue.prototype.$api = api
 
 import * as echarts from 'echarts'
@@ -46,7 +46,6 @@ Vue.prototype.$gaodeMap = GaodeMap
 import UmyUi from 'umy-ui'
 Vue.use(UmyUi)
 
-
 // 全屏插件
 import fullscreen from 'vue-fullscreen'
 Vue.use(fullscreen)
@@ -93,7 +92,7 @@ Vue.component('DeComplexSelect', DeComplexSelect)
 Vue.component('DeViewSelect', DeViewSelect)
 Vue.component('RemarkEditor', RemarkEditor)
 Vue.component('TitleRemark', TitleRemark)
-Vue.component('deBtn', deBtn)
+Vue.component('DeBtn', deBtn)
 
 Vue.config.productionTip = false
 
diff --git a/frontend/src/plugins/Export2Excel.js b/frontend/src/plugins/Export2Excel.js
index 7acea69eb1..f0e998b019 100644
--- a/frontend/src/plugins/Export2Excel.js
+++ b/frontend/src/plugins/Export2Excel.js
@@ -16,7 +16,7 @@ function generateArray(table) {
       var colspan = cell.getAttribute('colspan')
       var rowspan = cell.getAttribute('rowspan')
       var cellValue = cell.innerText
-      if (cellValue !== '' && cellValue == +cellValue) cellValue = +cellValue
+      if (cellValue !== '' && cellValue === +cellValue) cellValue = +cellValue
 
       // Skip ranges
       ranges.forEach(function(range) {
@@ -52,20 +52,22 @@ function datenum(v, date1904) {
 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) {
+  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
+      if (cell.v === null) continue
+      // eslint-disable-next-line
       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'
+        // eslint-disable-next-line
         cell.z = XLSX.SSF._table[14]
         cell.v = datenum(cell.v)
       } else cell.t = 's'
@@ -73,6 +75,7 @@ function sheet_from_array_of_arrays(data, opts) {
       ws[cell_ref] = cell
     }
   }
+  // eslint-disable-next-line
   if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
   return ws
 }
@@ -86,7 +89,7 @@ function Workbook() {
 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
+  for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
   return buf
 }
 
@@ -108,15 +111,12 @@ export function export_table_to_excel(id) {
   /* add worksheet to workbook */
   wb.SheetNames.push(ws_name)
   wb.Sheets[ws_name] = ws
-
+  // eslint-disable-next-line
   var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
-
+  // eslint-disable-next-line
   saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'test.xlsx')
 }
 
-function formatJson(jsonData) {
-}
-
 export function export_json_to_excel(th, jsonData, defaultTitle) {
   /* original data */
 
@@ -129,8 +129,9 @@ export function export_json_to_excel(th, jsonData, defaultTitle) {
   /* add worksheet to workbook */
   wb.SheetNames.push(ws_name)
   wb.Sheets[ws_name] = ws
-
+  // eslint-disable-next-line
   var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
   var title = defaultTitle || '列表'
+  // eslint-disable-next-line
   saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), title + '.xlsx')
 }
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 983d62e34a..854bf30cc5 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -709,11 +709,11 @@ const data = {
     setInEditorStatus(state, status) {
       state.isInEditor = status
     },
-    adaptorStatusDisable(state,componentId) {
+    adaptorStatusDisable(state, componentId) {
       state.componentData.forEach(item => {
-       if(item.id === componentId){
-         item.needAdaptor = false
-       }
+        if (item.id === componentId) {
+          item.needAdaptor = false
+        }
       })
     }
   },
diff --git a/frontend/src/store/modules/permission.js b/frontend/src/store/modules/permission.js
index 0b8a18edd3..b31cab2efe 100644
--- a/frontend/src/store/modules/permission.js
+++ b/frontend/src/store/modules/permission.js
@@ -57,11 +57,11 @@ export const filterAsyncRouter = (routers) => { // 遍历后台传来的路由
       router.children = filterAsyncRouter(router.children)
     }
 
-    router.hasOwnProperty('id') && delete router.id
-    router.hasOwnProperty('type') && delete router.type
-    router.hasOwnProperty('pid') && delete router.pid
-    router.hasOwnProperty('children') && (!router['children'] || !router['children'].length) && delete router.children
-    router.hasOwnProperty('redirect') && !router['redirect'] && delete router.redirect
+    Object.prototype.hasOwnProperty.call(router, 'id') && delete router.id
+    Object.prototype.hasOwnProperty.call(router, 'type') && delete router.type
+    Object.prototype.hasOwnProperty.call(router, 'pid') && delete router.pid
+    Object.prototype.hasOwnProperty.call(router, 'children') && (!router['children'] || !router['children'].length) && delete router.children
+    Object.prototype.hasOwnProperty.call(router, 'redirect') && !router['redirect'] && delete router.redirect
     return router
   })
 }
diff --git a/frontend/src/store/modules/request.js b/frontend/src/store/modules/request.js
index b46b39ab20..f4beefcacb 100644
--- a/frontend/src/store/modules/request.js
+++ b/frontend/src/store/modules/request.js
@@ -8,7 +8,7 @@ const mutations = {
     state.loadingMap = value
   },
   ADD_LOADING: (state, key) => {
-    if (state.loadingMap.hasOwnProperty(key)) {
+    if (Object.prototype.hasOwnProperty.call(state.loadingMap, key)) {
       const map = state.loadingMap
       map[key] += 1
       state.loadingMap = map
diff --git a/frontend/src/store/modules/settings.js b/frontend/src/store/modules/settings.js
index 44d94d14e0..44ef9f0076 100644
--- a/frontend/src/store/modules/settings.js
+++ b/frontend/src/store/modules/settings.js
@@ -10,7 +10,7 @@ const state = {
 
 const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {
-    if (state.hasOwnProperty(key)) {
+    if (Object.prototype.hasOwnProperty.call(state, key)) {
       state[key] = value
     }
   }
diff --git a/frontend/src/styles/deicon/iconfont.js b/frontend/src/styles/deicon/iconfont.js
index f47e861587..7eebb5f8f7 100644
--- a/frontend/src/styles/deicon/iconfont.js
+++ b/frontend/src/styles/deicon/iconfont.js
@@ -1 +1 @@
-window._iconfont_svg_string_2459092='<svg><symbol id="icon-application" viewBox="0 0 1024 1024"><path d="M512 0l448 256v512l-448 256-448-256V256l448-256z m0 98.24l-362.88 207.36v412.8L512 925.76l362.88-207.36v-412.8L512 98.24z m224 200.448l64.64 37.312v74.688L736 448l-30.784-17.792-155.968 78.08v185.216l27.392 15.808v74.688L512 821.312l-64.64-37.312v-74.688l27.392-15.808V508.352L318.72 430.208 288 448l-64.64-37.312V336l64.64-37.312 64.64 37.312v27.712L512 443.52l159.36-79.872V336l64.64-37.312z" fill="#333333" ></path></symbol><symbol id="icon-datasource-select" viewBox="0 0 1024 1024"><path d="M512 42.666667C314.197333 42.666667 101.333333 102.314667 101.333333 233.344l0 557.312C101.333333 921.642667 314.197333 981.333333 512 981.333333c197.802667 0 410.666667-59.690667 410.666667-190.677333L922.666667 233.344C922.666667 102.314667 709.76 42.666667 512 42.666667zM864 790.656c0 72.874667-157.568 132.010667-352 132.010667-194.389333 0-352-59.136-352-132.010667l0-109.610667c60.629333 62.506667 206.762667 94.976 352 94.976 145.194667 0 291.370667-32.469333 352-94.976L864 790.656zM864 614.656l-0.128 0c0 0.256 0.128 0.682667 0.128 0.896 0 72.405333-157.568 131.072-352 131.072-194.389333 0-352-58.666667-352-131.072 0-0.256 0.128-0.682667 0.128-0.896L160 614.656l0-109.610667c60.629333 62.421333 206.762667 94.933333 352 94.933333 145.194667 0 291.370667-32.512 352-94.933333L864 614.656zM864 438.656l-0.128 0 0.128 0.896c0 72.405333-157.568 131.072-352 131.072-194.389333 0-352-58.666667-352-131.072l0.128-0.896L160 438.656 160 337.877333C236.885333 396.458667 377.770667 424.021333 512 424.021333c134.229333 0 275.114667-27.562667 352-86.101333L864 438.656zM512 365.312c-194.389333 0-352-59.136-352-132.010667 0-72.917333 157.610667-132.010667 352-132.010667 194.432 0 352 59.050667 352 132.010667C864 306.218667 706.432 365.312 512 365.312zM776.021333 776.021333c16.256 0 29.354667 13.098667 29.354667 29.354667s-13.098667 29.354667-29.354667 29.354667S746.666667 821.589333 746.666667 805.333333 759.765333 776.021333 776.021333 776.021333zM776.021333 599.978667c16.256 0 29.354667 13.098667 29.354667 29.354667s-13.098667 29.354667-29.354667 29.354667S746.666667 645.589333 746.666667 629.333333 759.765333 599.978667 776.021333 599.978667zM776.021333 424.021333c16.256 0 29.354667 13.098667 29.354667 29.354667s-13.098667 29.354667-29.354667 29.354667S746.666667 469.546667 746.666667 453.333333 759.765333 424.021333 776.021333 424.021333z"  ></path></symbol><symbol id="icon-zhongzhi2" viewBox="0 0 1024 1024"><path d="M874.24 874.24c-199.68 199.68-524.16 199.68-723.84 0s-199.68-524.16 0-723.84 524.16-199.68 723.84 0 199.68 524.16 0 723.84zM195.2 195.2a448.448 448.448 0 0 0 0 633.6 448.448 448.448 0 0 0 633.6 0 448.448 448.448 0 0 0 0-633.6 448.448 448.448 0 0 0-633.6 0z"  ></path><path d="M675.84 404.48l-271.36 271.36c-12.8 12.8-32.64 12.8-45.44 0-12.8-12.8-12.8-32.64 0-45.44l271.36-271.36c12.8-12.8 32.64-12.8 45.44 0 12.8 12.8 12.8 33.28 0 45.44z"  ></path><path d="M675.84 675.84c-12.8 12.8-32.64 12.8-45.44 0L359.04 404.48c-12.8-12.8-12.8-32.64 0-45.44 12.8-12.8 32.64-12.8 45.44 0l271.36 271.36c12.8 12.8 12.8 33.28 0 45.44z"  ></path></symbol><symbol id="icon-None_Select" viewBox="0 0 1024 1024"><path d="M0 0m512 0l0 0q512 0 512 512l0 0q0 512-512 512l0 0q-512 0-512-512l0 0q0-512 512-512Z" fill="#EBEBEB" ></path><path d="M562.405376 748.691456c-7.651328 20.02944-35.913728 20.250624-43.86816 0.352256L385.302528 415.9488c-7.692288-19.218432 11.38688-38.305792 30.613504-30.621696L748.99456 518.561792c19.8656 7.94624 19.70176 36.12672-0.262144 43.843584L613.5808 614.6048l-51.183616 134.10304v-0.016384z m-22.519808-73.097216l33.42336-87.57248a23.552 23.552 0 0 1 13.5168-13.55776l89.04704-34.398208-226.42688-90.570752 90.43968 226.0992z" fill="#8F959E" ></path><path d="M394.24 264.708096c70.270976 0 127.46752 55.95136 129.47456 125.730816l-50.601984-20.242432a82.436096 82.436096 0 1 0-103.05536 102.875136l20.258816 50.642944c-69.738496-2.072576-125.616128-59.244544-125.616128-129.47456 0-71.540736 57.99936-129.540096 129.540096-129.540096z" fill="#8F959E" ></path></symbol><symbol id="icon-button_right" viewBox="0 0 1024 1024"><path d="M-15.88624103 59.48859927h301.64928058c249.87872281 0 452.47392089 202.59519808 452.4739209 452.4739209S535.64176236 964.43644107 285.76303955 964.43644107H-15.88624103V59.48859927z" fill="#e6e6e6" ></path><path d="M285.76303955 97.19475935H-15.88624103v829.53552164h301.64928058c229.06492245 0 414.76776082-185.70283837 414.76776081-414.76776082S514.82796201 97.19475935 285.76303955 97.19475935zM-15.88624103 59.48859927v904.9478418h301.64928058c249.87872281 0 452.47392089-202.59519808 452.4739209-452.4739209S535.64176236 59.48859927 285.76303955 59.48859927H-15.88624103z" fill="#e3e3e3" ></path><path d="M113.40818187 377.31382255l134.46016681 134.46016682-134.46016681 134.42246066a9.42654002 9.42654002 0 0 0 0 13.34798068l13.31027449 13.3102745a9.42654002 9.42654002 0 0 0 13.34798065 0l147.8081475-147.77044133a18.85308003 18.85308003 0 0 0 0-26.65825517l-147.8081475-147.8081475a9.42654002 9.42654002 0 0 0-13.34798065 0l-13.31027449 13.34798069a9.42654002 9.42654002 0 0 0 0 13.34798065z" fill="#646A73" ></path><path d="M280.93665106 377.31382255l134.42246066 134.46016682-134.42246066 134.42246066a9.42654002 9.42654002 0 0 0 0 13.34798068l13.3102745 13.3102745a9.42654002 9.42654002 0 0 0 13.34798068 0l147.80814749-147.77044133a18.85308003 18.85308003 0 0 0 0-26.65825517l-147.80814749-147.8081475a9.42654002 9.42654002 0 0 0-13.34798068 0l-13.3102745 13.34798069a9.42654002 9.42654002 0 0 0 0 13.34798065z" fill="#646A73" ></path></symbol><symbol id="icon-icon-maybe" viewBox="0 0 1024 1024"><path d="M512 896A384 384 0 1 0 512 128a384 384 0 0 0 0 768z m0 85.312A469.312 469.312 0 1 1 512 42.688a469.312 469.312 0 0 1 0 938.624z m-21.312-298.624h42.624c11.776 0 21.376 9.536 21.376 21.312v42.688c0 11.776-9.6 21.312-21.376 21.312h-42.624a21.312 21.312 0 0 1-21.376-21.312V704c0-11.776 9.6-21.312 21.376-21.312z m-147.2-286.72a192 192 0 0 1 1.664-11.84c8.32-46.336 29.376-80.384 63.168-102.208 26.496-17.28 59.008-25.92 97.6-25.92 50.752 0 92.864 12.288 126.4 36.864 33.6 24.576 50.368 60.928 50.368 109.184 0 29.568-7.296 54.4-21.888 74.688-8.512 12.288-24.96 27.968-49.152 47.104l-23.936 18.752c-12.992 10.24-21.632 22.144-25.92 35.84a115.52 115.52 0 0 0-3.008 20.736 21.312 21.312 0 0 1-21.248 19.52h-47.808a21.312 21.312 0 0 1-21.248-23.296c2.752-29.696 5.76-48.512 8.832-56.384 5.824-14.72 20.864-31.552 45.12-50.688l24.576-19.456c8.064-6.144 49.728-35.456 49.728-61.44 0-25.92-4.48-35.456-17.6-49.664-12.992-14.272-42.368-18.88-68.8-18.88-26.048 0-48.32 6.912-59.2 24.448a123.328 123.328 0 0 0-12.16 25.6 89.28 89.28 0 0 0-3.072 13.12 21.312 21.312 0 0 1-20.992 17.728h-50.24a21.312 21.312 0 0 1-21.184-23.744z" fill="#646A73" ></path></symbol><symbol id="icon-icon_up-left_outlined" viewBox="0 0 1024 1024"><path d="M522.624 816.448L218.368 512.192l304.256-304.32a21.312 21.312 0 0 0 0-30.144l-30.144-30.208a21.312 21.312 0 0 0-30.144 0L127.872 481.984a42.688 42.688 0 0 0 0 60.352L462.336 876.8c8.32 8.32 21.76 8.32 30.144 0l30.144-30.208a21.312 21.312 0 0 0 0-30.144z" fill="#646A73" ></path><path d="M902.4 816.448L598.08 512.192 902.4 207.872a21.312 21.312 0 0 0 0-30.144l-30.144-30.208a21.312 21.312 0 0 0-30.208 0L507.584 481.984a42.688 42.688 0 0 0 0 60.352l334.464 334.464c8.32 8.32 21.824 8.32 30.208 0l30.08-30.208a21.312 21.312 0 0 0 0-30.144z" fill="#646A73" ></path></symbol><symbol id="icon-close" viewBox="0 0 1024 1024"><path d="M509.5424 447.0784l286.6176-286.6176a21.3504 21.3504 0 0 1 30.208 0l30.1568 30.208a21.3504 21.3504 0 0 1 0 30.1568L569.856 507.392l286.6176 286.6176a21.3504 21.3504 0 0 1 0 30.1568l-30.208 30.208a21.3504 21.3504 0 0 1-30.1568 0l-286.6176-286.6688-286.6176 286.6176a21.3504 21.3504 0 0 1-30.1568 0l-30.208-30.208a21.3504 21.3504 0 0 1 0-30.1056L449.28 507.392 162.6112 220.8256a21.3504 21.3504 0 0 1 0-30.208l30.208-30.1568a21.3504 21.3504 0 0 1 30.1056 0l286.6176 286.6176z" fill="#646A73" ></path></symbol><symbol id="icon-a-Frame3425" viewBox="0 0 1024 1024"><path d="M0 0m512 0l0 0q512 0 512 512l0 0q0 512-512 512l0 0q-512 0-512-512l0 0q0-512 512-512Z" fill="#EBEBEB" ></path><path d="M676.864 394.698752h-94.208V300.032h-235.52v423.936H464.896v47.104H323.584a23.552 23.552 0 0 1-23.552-23.552v-471.04a23.552 23.552 0 0 1 23.552-23.552h294.404096L723.959808 363.97056V464.896h-47.104v-70.197248z" fill="#8F959E" ></path><path d="M617.988096 747.52c24.264704 0 46.825472-7.340032 65.568768-19.931136l44.056576 44.064768a11.771904 11.771904 0 0 0 16.654336 0l19.98848-19.98848a11.780096 11.780096 0 0 0 0-16.654336l-45.047808-45.039616a117.211136 117.211136 0 0 0 16.539648-60.2112c0-65.04448-52.723712-117.76-117.768192-117.76-65.036288 0-117.751808 52.723712-117.751808 117.76 0 65.04448 52.71552 117.76 117.751808 117.76z m70.647808-117.76a70.656 70.656 0 1 1-141.312 0 70.656 70.656 0 0 1 141.312 0z" fill="#8F959E" ></path></symbol><symbol id="icon-icon-filter" viewBox="0 0 1024 1024"><path d="M682.688 487.68v429.632c0 11.776-9.6 21.376-21.376 21.376h-42.624a21.312 21.312 0 0 1-21.376-21.376v-448c0-6.272 1.344-12.16 3.84-17.536a40.96 40.96 0 0 1 17.024-19.968l235.136-140.352V170.688H170.688v122.24l228.032 136.32a42.688 42.688 0 0 1 27.968 40.064V768c0 11.776-9.6 21.312-21.376 21.312h-42.624A21.312 21.312 0 0 1 341.312 768V489.152L105.6 348.224a40.96 40.96 0 0 1-12.864-12.16A21.312 21.312 0 0 1 85.312 320V128c0-23.552 19.136-42.688 42.688-42.688h768a42.56 42.56 0 0 1 42.688 42.688v178.88a40.768 40.768 0 0 1 0 8.96V320a21.312 21.312 0 0 1-8.96 17.408 41.088 41.088 0 0 1-10.88 9.344l-236.16 140.992z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_Batch_outlined" viewBox="0 0 1024 1024"><path d="M149.312 554.688h277.376c23.552 0 42.624 19.072 42.624 42.624v277.376a42.688 42.688 0 0 1-42.624 42.624H149.312a42.688 42.688 0 0 1-42.624-42.624V597.312c0-23.552 19.072-42.624 42.624-42.624zM192 832h192v-192H192v192zM597.312 106.688h277.376c23.552 0 42.624 19.072 42.624 42.624v277.376a42.688 42.688 0 0 1-42.624 42.624H597.312a42.688 42.688 0 0 1-42.624-42.624V149.312c0-23.552 19.072-42.624 42.624-42.624zM640 384h192V192h-192v192zM597.312 554.688h277.376c23.552 0 42.624 19.072 42.624 42.624v277.376a42.688 42.688 0 0 1-42.624 42.624H597.312a42.688 42.688 0 0 1-42.624-42.624V597.312c0-23.552 19.072-42.624 42.624-42.624zM640 640v192h192v-192h-192z" fill="#1F2329" ></path><path d="M107.264 270.016a21.312 21.312 0 0 0 0 30.144l113.152 113.152a32 32 0 0 0 45.248 0l203.648-203.648a21.312 21.312 0 0 0 0-30.144l-30.144-30.208a21.312 21.312 0 0 0-30.208 0L243.072 315.264 167.616 239.872a21.312 21.312 0 0 0-30.144 0l-30.208 30.144z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_clear_outlined" viewBox="0 0 1024 1024"><path d="M384 384H192a64 64 0 0 0-64 64v490.688c0 23.552 19.072 42.624 42.688 42.624h682.624a42.688 42.688 0 0 0 42.688-42.624V448a64 64 0 0 0-64-64h-192V85.312a42.688 42.688 0 0 0-42.688-42.624H426.688A42.688 42.688 0 0 0 384 85.312V384z m85.312 85.312V128h85.376v341.312h256v128H213.312v-128h256z m-256 426.688v-213.312h597.376V896h-85.376v-85.312H640V896H554.688v-128H469.312v128H384v-85.312H298.688V896H213.312z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_dialpad_outlined" viewBox="0 0 1024 1024"><path d="M170.688 256a85.312 85.312 0 1 0 0-170.688 85.312 85.312 0 0 0 0 170.688zM170.688 597.312a85.312 85.312 0 1 0 0-170.624 85.312 85.312 0 0 0 0 170.624zM256 853.312a85.312 85.312 0 1 1-170.688 0 85.312 85.312 0 0 1 170.688 0zM512 256a85.312 85.312 0 1 0 0-170.688A85.312 85.312 0 0 0 512 256zM597.312 512a85.312 85.312 0 1 1-170.624 0 85.312 85.312 0 0 1 170.624 0zM512 938.688A85.312 85.312 0 1 0 512 768a85.312 85.312 0 0 0 0 170.688zM853.312 256a85.312 85.312 0 1 0 0-170.688 85.312 85.312 0 0 0 0 170.688zM938.688 512A85.312 85.312 0 1 1 768 512a85.312 85.312 0 0 1 170.688 0zM853.312 938.688a85.312 85.312 0 1 0 0-170.688 85.312 85.312 0 0 0 0 170.688z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_effects_outlined" viewBox="0 0 1024 1024"><path d="M124.7744 126.0544a42.6496 42.6496 0 0 1 40.2432-11.264l261.12 63.488L629.4016 45.056a42.6496 42.6496 0 0 1 66.048 34.4576l6.9632 245.0944 196.864 168.7552a42.6496 42.6496 0 0 1-12.1344 72.0896l-231.68 91.2384-91.2384 231.6288a42.6496 42.6496 0 0 1-72.0896 12.1344l-168.704-196.8128-245.0944-7.0144a42.6496 42.6496 0 0 1-34.5088-66.048l133.1712-203.264-63.488-261.0688a42.6496 42.6496 0 0 1 11.264-40.2432zM212.992 214.2208l51.3024 210.944a42.6496 42.6496 0 0 1-5.7856 33.4848l-101.4784 154.88 187.6992 5.376a42.7008 42.7008 0 0 1 31.232 14.848l134.8608 157.44 72.0896-182.9888a42.6496 42.6496 0 0 1 24.064-24.064l182.9376-72.0896-157.3888-134.8608a42.6496 42.6496 0 0 1-14.848-31.232l-5.376-187.648-154.88 101.4784a42.6496 42.6496 0 0 1-33.4848 5.7856L212.992 214.2208z" fill="#1F2329" ></path><path d="M698.7776 760.3712l195.328 195.328a21.3504 21.3504 0 0 0 30.208 0l30.1568-30.1568a21.3504 21.3504 0 0 0 0-30.1568l-195.3792-195.3792-43.264 17.1008-17.0496 43.264z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_magnify_outlined" viewBox="0 0 1024 1024"><path d="M366.1824 593.7664a21.3504 21.3504 0 0 1 30.208 0l30.1056 30.1568a21.3504 21.3504 0 0 1 0 30.208l-170.7008 170.6496h121.344c11.776 0 21.3504 9.5232 21.3504 21.2992v42.7008c0 11.776-9.5744 21.2992-21.3504 21.2992h-220.672a42.496 42.496 0 0 1-42.7008-42.6496v-220.16c0-11.776 9.5744-21.2992 21.3504-21.2992h42.6496c11.776 0 21.3504 9.5232 21.3504 21.2992v113.5104l167.0656-167.0144z m500.992-480a42.496 42.496 0 0 1 42.6496 42.6496v220.16c0 11.776-9.5232 21.3504-21.3504 21.3504h-42.6496a21.3504 21.3504 0 0 1-21.3504-21.3504V263.168L657.408 430.08a21.3504 21.3504 0 0 1-30.1568 0l-30.208-30.208a21.3504 21.3504 0 0 1 0-30.1568l170.752-170.6496h-121.344a21.3504 21.3504 0 0 1-21.3504-21.3504V135.168c0-11.776 9.5744-21.3504 21.3504-21.3504h220.672z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_moments-categories_outlined" viewBox="0 0 1024 1024"><path d="M523.456 113.92l429.568 273.408a21.312 21.312 0 0 1 0 36.032L523.52 696.704a21.312 21.312 0 0 1-22.912 0L70.976 423.36a21.312 21.312 0 0 1 0-36.032L500.48 113.984c7.04-4.48 15.936-4.48 22.912 0zM201.6 405.376L512 602.88l310.4-197.568L512 207.808 201.6 405.312z" fill="#1F2329" ></path><path d="M110.784 592.448a21.312 21.312 0 0 0-29.312 7.04l-22.336 36.416a21.312 21.312 0 0 0 7.04 29.312l390.592 239.488c27.456 16.832 61.696 16.832 89.088 0l390.656-239.488a21.312 21.312 0 0 0 7.04-29.312l-22.336-36.416a21.312 21.312 0 0 0-29.312-7.04L506.88 828.544a10.688 10.688 0 0 1-11.136 0L110.784 592.448z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_pc_outlined" viewBox="0 0 1024 1024"><path d="M917.312 85.312H106.688A42.688 42.688 0 0 0 64 128v597.312c0 23.552 19.072 42.688 42.688 42.688h810.624a42.688 42.688 0 0 0 42.688-42.688V128a42.688 42.688 0 0 0-42.688-42.688z m-768 469.376v-384h725.376v384H149.312z m0 85.312h725.376v42.688H149.312V640z m149.376 213.312h426.624v85.376H298.688v-85.376z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_phone_outlined" viewBox="0 0 1024 1024"><path d="M426.688 234.688h170.624V320H426.688V234.688zM576 704H448v85.312h128V704z" fill="#1F2329" ></path><path d="M213.312 64a42.688 42.688 0 0 0-42.624 42.688v810.624c0 23.552 19.072 42.688 42.624 42.688h597.376a42.688 42.688 0 0 0 42.624-42.688V106.688A42.688 42.688 0 0 0 810.688 64H213.312zM256 149.312h512v725.376H256V149.312z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_redo_outlined" viewBox="0 0 1024 1024"><path d="M704.256 115.648l209.152 209.152a22.784 22.784 0 0 1 0 32.192l-229.312 229.312a22.784 22.784 0 0 1-32.128 0l-28.16-28.16a22.784 22.784 0 0 1 0-32.192l156.096-156.16H412.416a213.312 213.312 0 1 0 0 426.688h162.176c12.544 0 22.72 10.176 22.72 22.72v39.808c0 12.608-10.176 22.784-22.72 22.784H398.208A299.2 299.2 0 0 1 113.792 583.04 298.688 298.688 0 0 1 398.272 284.8v-0.384h354.048L643.904 176a22.784 22.784 0 0 1 0-32.192l28.16-28.16a22.784 22.784 0 0 1 32.192 0z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_undo_outlined" viewBox="0 0 1024 1024"><path d="M329.6256 115.8656L120.4224 325.12a22.7328 22.7328 0 0 0 0 32.2048l229.3248 229.2736a22.784 22.784 0 0 0 32.1536 0l28.16-28.16a22.7328 22.7328 0 0 0 0-32.2048L253.952 369.9712l371.8656-0.2048v0.256a213.3504 213.3504 0 1 1 0 426.6496v-0.256l-166.5024 0.256c-12.5952 0-22.7328 10.1888-22.7328 22.7328v39.8336c0 11.008 7.7824 20.1728 18.176 22.272l4.608 0.512L614.4 881.664l11.3664 0.3072a298.6496 298.6496 0 1 0 0-597.3504v-0.2048L281.6 284.6208l108.3904-108.3904a22.7328 22.7328 0 0 0 0-32.2048l-28.16-28.16a22.7328 22.7328 0 0 0-32.1536 0z" fill="#1F2329" ></path></symbol><symbol id="icon-icon-more" viewBox="0 0 1024 1024"><path d="M768 448h85.3504a21.2992 21.2992 0 0 1 21.2992 21.3504v85.2992a21.2992 21.2992 0 0 1-21.2992 21.3504H768a21.3504 21.3504 0 0 1-21.3504-21.3504V469.3504A21.3504 21.3504 0 0 1 768 448z m-597.3504 0H256a21.3504 21.3504 0 0 1 21.3504 21.3504v85.2992A21.3504 21.3504 0 0 1 256 576H170.6496a21.3504 21.3504 0 0 1-21.2992-21.3504V469.3504a21.3504 21.3504 0 0 1 21.2992-21.3504z m298.7008 0h85.2992a21.3504 21.3504 0 0 1 21.3504 21.3504v85.2992a21.4016 21.4016 0 0 1-21.3504 21.3504H469.3504a21.3504 21.3504 0 0 1-21.3504-21.3504V469.3504a21.3504 21.3504 0 0 1 21.3504-21.3504z" fill="#1F2329" ></path></symbol><symbol id="icon-icon-quicksetting" viewBox="0 0 1024 1024"><path d="M704 725.3504h207.36c9.472 0 12.9024 1.024 16.384 2.816 3.4816 1.8944 6.1952 4.608 8.0896 8.0896 1.8432 3.4816 2.816 6.912 2.816 16.384v30.72c0 9.472-0.9728 12.9024-2.816 16.384a19.4048 19.4048 0 0 1-8.0896 8.0896c-3.4816 1.8432-6.912 2.816-16.384 2.816h-207.36V911.36c0 9.5232-1.024 12.9536-2.8672 16.4352a19.4048 19.4048 0 0 1-8.0384 8.0896c-3.4816 1.8432-6.912 2.816-16.4352 2.816h-30.6176c-9.5232 0-13.0048-0.9728-16.4864-2.816a19.4048 19.4048 0 0 1-8.0384-8.0896c-1.8432-3.4816-2.8672-6.912-2.8672-16.384v-100.7104H112.6912c-9.5232 0-12.9536-0.9728-16.4352-2.816a19.4048 19.4048 0 0 1-8.0896-8.0896c-1.8432-3.4816-2.816-6.912-2.816-16.384v-30.72c0-9.472 0.9728-12.9024 2.816-16.384a19.3536 19.3536 0 0 1 8.0896-8.0896c3.4816-1.8432 6.912-2.816 16.384-2.816h506.0096V624.64c0-9.5232 1.024-12.9536 2.8672-16.4352a19.3536 19.3536 0 0 1 8.0896-8.0896c3.4304-1.8432 6.912-2.816 16.384-2.816h30.6688c9.5232 0 12.9536 1.024 16.384 2.816 3.5328 1.8944 6.2464 4.608 8.0896 8.0896 1.8944 3.4816 2.8672 6.912 2.8672 16.384v100.7104z m-384-512V112.64c0-9.5232 1.024-12.9536 2.8672-16.4352a19.4048 19.4048 0 0 1 8.0384-8.0896c3.4816-1.8432 6.912-2.816 16.4352-2.816h30.6688c9.472 0 12.9536 1.024 16.384 2.816 3.4816 1.8944 6.2464 4.608 8.0896 8.0896 1.8432 3.4816 2.8672 6.912 2.8672 16.384v100.7104h505.9584c9.5232 0 12.9536 1.024 16.4352 2.816 3.4816 1.8944 6.1952 4.608 8.0896 8.0896 1.8432 3.4816 2.816 6.912 2.816 16.384v30.72c0 9.472-0.9728 12.9024-2.816 16.384a19.3536 19.3536 0 0 1-8.0896 8.0896c-3.4816 1.8432-6.912 2.816-16.384 2.816H405.2992V399.36c0 9.5232-1.024 12.9536-2.8672 16.4352a19.4048 19.4048 0 0 1-8.0384 8.0896c-3.4816 1.8432-6.9632 2.816-16.4352 2.816h-30.6688c-9.5232 0-12.9536-0.9728-16.384-2.816a19.4048 19.4048 0 0 1-8.0896-8.0896c-1.8944-3.4816-2.8672-6.912-2.8672-16.384V298.5984H112.64c-9.472 0-12.9024-0.9728-16.384-2.816a19.4048 19.4048 0 0 1-8.0896-8.0896c-1.8432-3.4816-2.816-6.912-2.816-16.384v-30.72c0-9.472 0.9728-12.9024 2.816-16.384a19.3536 19.3536 0 0 1 8.0896-8.0896c3.4816-1.8432 6.912-2.816 16.384-2.816h207.36z" fill="#1F2329" ></path></symbol><symbol id="icon-square-selected" viewBox="0 0 1024 1024"><path d="M832 96H192c-52.929 0-96 43.073-96 96.002v640C96 884.929 139.07 928 192 928h640c52.927 0 96-43.072 96-96V192c0-52.93-43.071-96-96-96zM727.231 438.433L471.008 697.44c-0.064 0.064-0.193 0.096-0.257 0.193-0.096 0.063-0.096 0.192-0.192 0.256-2.05 1.984-4.576 3.2-6.945 4.545-1.183 0.672-2.143 1.696-3.392 2.176-3.84 1.536-7.904 2.336-11.967 2.336-4.096 0-8.225-0.8-12.097-2.4-1.28-0.543-2.303-1.632-3.52-2.303-2.368-1.344-4.831-2.529-6.88-4.545-0.064-0.063-0.097-0.192-0.16-0.256-0.064-0.096-0.193-0.096-0.256-0.193L299.325 567.745c-12.32-12.673-12.033-32.928 0.64-45.248 12.673-12.288 32.895-12.064 45.248 0.64l103.263 106.112 233.28-235.809c12.417-12.576 32.705-12.672 45.248-0.256 12.516 12.448 12.644 32.705 0.227 45.248z"  ></path></symbol><symbol id="icon-italic" viewBox="0 0 1024 1024"><path d="M191.77728 949.728l9.728-48.576q12.576-4 35.136-9.44t41.152-10.848 34.016-13.44q16-20 23.424-57.728 0.576-4 35.424-165.152t65.152-310.56 29.728-169.44v-14.272q-13.728-7.424-31.136-10.56t-39.712-4.576-33.152-3.136l10.848-58.848q18.848 1.152 68.576 3.712t85.44 4 68.864 1.44q27.424 0 56.288-1.44t69.152-4 56.288-3.712q-2.848 22.272-10.848 50.848-17.152 5.728-58.016 16.288t-62.016 19.136q-4.576 10.848-8 24.288t-5.152 22.848-4.288 26.016-3.712 24q-15.424 84.576-50.016 239.712t-44.288 203.136l-7.424 33.152q-6.272 28-11.424 51.424t-9.152 47.712-3.424 32.864l0.576 10.272q9.728 2.272 105.728 17.728-1.728 25.152-9.152 56.576-6.272 0-18.56 0.864t-18.56 0.864q-16.576 0-49.728-5.728t-49.152-5.728q-78.848-1.152-117.728-1.152-29.152 0-81.728 5.152T191.77728 949.696z" fill="" ></path></symbol><symbol id="icon-jiantou" viewBox="0 0 1024 1024"><path d="M778.965749 128.759549l-383.064442 383.063419 388.097062 388.096039-0.070608 0.033769c12.709463 13.137205 20.529569 31.024597 20.529569 50.731428 0 40.376593-32.736589 73.112158-73.115228 73.112158-19.705807 0-37.591153-7.819083-50.730405-20.528546l-0.034792 0.035816L241.890654 564.622498l0.035816-0.035816c-13.779841-13.281491-22.3838-31.915897-22.3838-52.585659 0-0.071631 0-0.106424 0-0.178055 0-0.072655 0-0.10847 0-0.144286 0-20.669762 8.603959-39.341007 22.3838-52.622498l-0.035816-0.034792L680.573835 20.337187l0.180102 0.179079c13.139252-12.5662 30.950919-20.313651 50.587142-20.313651 40.378639 0 73.115228 32.736589 73.115228 73.114205C804.455283 95.485725 794.567076 115.334795 778.965749 128.759549z"  ></path></symbol><symbol id="icon-magic-line" viewBox="0 0 1024 1024"><path d="M648.490667 424.32a110.933333 110.933333 0 0 1-33.706667-66.176l-17.194667-131.541333-116.48 63.402666a110.933333 110.933333 0 0 1-73.386666 11.648L277.333333 277.333333l24.32 130.389334a110.933333 110.933333 0 0 1-11.648 73.386666l-63.402666 116.48 131.541333 17.194667a110.933333 110.933333 0 0 1 66.133333 33.706667l91.221334 96.298666 57.002666-119.765333a110.933333 110.933333 0 0 1 52.48-52.522667l119.808-57.002666-96.298666-91.178667z m1.066666 237.354667l-94.421333 198.4a25.6 25.6 0 0 1-41.685333 6.613333l-151.125334-159.530667a25.6 25.6 0 0 0-15.232-7.765333l-217.898666-28.501333a25.6 25.6 0 0 1-19.157334-37.589334l105.045334-193.024a25.6 25.6 0 0 0 2.645333-16.896L177.493333 207.36a25.6 25.6 0 0 1 29.866667-29.866667l216.021333 40.234667a25.6 25.6 0 0 0 16.896-2.645333l193.024-105.045334a25.6 25.6 0 0 1 37.589334 19.2l28.501333 217.856a25.6 25.6 0 0 0 7.765333 15.232l159.530667 151.125334a25.6 25.6 0 0 1-6.613333 41.685333l-198.4 94.421333a25.6 25.6 0 0 0-12.117334 12.117334z m34.005334 82.218666l60.330666-60.330666 181.034667 180.992-60.373333 60.373333-180.992-181.034667z"  ></path></symbol><symbol id="icon-gengduo" viewBox="0 0 1024 1024"><path d="M746.662019 512c0 51.835575 42.044582 93.865831 93.865831 93.865831 51.851948 0 93.865831-42.029232 93.865831-93.865831 0-51.836599-42.013883-93.865831-93.865831-93.865831C788.706601 418.135192 746.662019 460.163401 746.662019 512z"  ></path><path d="M89.604272 512c0 51.835575 42.043558 93.865831 93.864808 93.865831 51.822272 0 93.865831-42.029232 93.865831-93.865831 0-51.836599-42.043558-93.865831-93.865831-93.865831C131.648854 418.135192 89.604272 460.163401 89.604272 512z"  ></path><path d="M418.132634 512c0 51.835575 42.013883 93.865831 93.866854 93.865831 51.821249 0 93.864808-42.029232 93.864808-93.865831 0-51.836599-42.043558-93.865831-93.864808-93.865831C460.146517 418.135192 418.132634 460.163401 418.132634 512z"  ></path></symbol><symbol id="icon-qingkong" viewBox="0 0 1024 1024"><path d="M444.8 445.184H377.6V66.752C377.6 29.888 407.68 0 444.8 0h134.4c37.12 0 67.136 29.888 67.136 66.752v378.432h-67.2v-349.44a29.056 29.056 0 0 0-29.056-28.992h-76.16a28.992 28.992 0 0 0-29.12 28.992v349.44z m134.4 0h313.408c37.12 0 67.2 29.952 67.2 66.816v155.84H64.192V512c0-36.864 30.08-66.816 67.2-66.816H444.8V512H160.448a29.056 29.056 0 0 0-29.056 28.928v60.16h761.216v-60.16A28.992 28.992 0 0 0 863.552 512H579.2V445.184z m62.272 512h60.8V823.68h-60.8v133.568h-465.28a44.672 44.672 0 0 1-44.8-44.544v-155.84h761.216v155.84a44.672 44.672 0 0 1-44.8 44.544h-15.744V823.68h-62.592v133.568h-256 128z m-577.28 0c0 36.928 30.08 66.816 67.2 66.816h761.216c37.12 0 67.2-29.888 67.2-66.752v-267.136H64.192v267.136z"  ></path></symbol><symbol id="icon-chakan" viewBox="0 0 1024 1024"><path d="M747.7 288.2c0-17.6-14.4-32.1-32.1-32.1H306.4c-17.6 0-32.1 14.4-32.1 32.1 0 17.6 14.4 32.1 32.1 32.1h409.2c17.7 0 32.1-14.5 32.1-32.1zM306.4 448c-17.6 0-32.1 14.4-32.1 32.1 0 17.6 14.4 32.1 32.1 32.1h191.1c17.7 0 32.2-14.4 32.1-32.1 0-17.6-14.4-32.1-32.1-32.1H306.4zM766.6 776.8c-2.1-2.1-4.4-3.9-6.9-5.2 18.1-25.8 28.7-57.1 28.7-90.9 0-88.2-72.4-159.6-161.7-159.6S465 592.5 465 680.7s72.4 159.6 161.7 159.6c32.7 0 63.2-9.6 88.7-26.1 1.5 2.9 3.4 5.6 5.8 8l83.3 83.3c12.5 12.5 32.9 12.5 45.4 0s12.5-32.9 0-45.4l-83.3-83.3z m-139.9 0.6c-54.1 0-98-43.3-98-96.7s43.9-96.7 98-96.7 98 43.3 98 96.7c0 53.4-43.8 96.7-98 96.7z" fill="#4D4D4D" ></path><path d="M577.6 895.4H221.2c-35.2 0-64-28.8-64-64V192.8c0-35.2 28.8-64 64-64h547.3c35.2 0 64 28.8 64 64v318.4h0.3v0.1c0 17.7 14.4 32.1 32.2 32.1s32.2-14.4 32.2-32.1c0-1.2-0.1-2.3-0.2-3.5v-316c0-70.4-27.6-128-98-128H225c-70.4 0-128 57.6-128 128v639.8c0 70.4 57.6 128 128 128h352.2c17.8 0 32.2-14.4 32.2-32.1 0-17.6-14.2-31.9-31.8-32.1z" fill="#4D4D4D" ></path><path d="M832.7 639.3a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#4D4D4D" ></path></symbol><symbol id="icon-outline-redo" viewBox="0 0 1024 1024"><path d="M378.410667 813.226667a245.333333 245.333333 0 1 1 0-490.666667h469.333333a32.213333 32.213333 0 0 1 32 32 32.213333 32.213333 0 0 1-32 32h-469.333333a181.333333 181.333333 0 1 0 0 362.666667h341.333333a32 32 0 0 1 0 64z" fill="#292D32" ></path><path d="M727.04 483.925333a32.170667 32.170667 0 0 1 0-45.226666l86.613333-86.613334-86.613333-86.741333a32 32 0 0 1 45.184-45.184l109.226667 109.226667a32.170667 32.170667 0 0 1 0 45.226666l-109.226667 109.312a31.914667 31.914667 0 0 1-45.226667 0z" fill="#292D32" ></path></symbol><symbol id="icon-outline-undo" viewBox="0 0 1024 1024"><path d="M304.256 813.226667a32 32 0 0 1 0-64h341.333333a181.333333 181.333333 0 0 0 0-362.666667h-469.333333a32.213333 32.213333 0 0 1-32-32 32.213333 32.213333 0 0 1 32-32h469.333333a245.333333 245.333333 0 1 1 0 490.666667z" fill="#292D32" ></path><path d="M251.776 483.925333l-109.226667-109.354666a32.170667 32.170667 0 0 1 0-45.226667l109.226667-109.184a32 32 0 0 1 45.226667 45.226667l-86.613334 86.613333 86.613334 86.613333a32.170667 32.170667 0 0 1 0 45.226667 30.933333 30.933333 0 0 1-22.613334 9.386667 31.658667 31.658667 0 0 1-22.613333-9.301334z" fill="#292D32" ></path></symbol><symbol id="icon-dingwei" viewBox="0 0 1024 1024"><path d="M511.492567 260.820614q52.773043 0 98.949455 19.789891t80.681863 54.295342 54.295342 80.681863 19.789891 98.949455-19.789891 99.456888-54.295342 81.189296-80.681863 54.295342-98.949455 19.789891-98.949455-19.789891-80.681863-54.295342-54.295342-81.189296-19.789891-99.456888 19.789891-98.949455 54.295342-80.681863 80.681863-54.295342 98.949455-19.789891zM1018.925669 450.600595l0 127.873142-60.891972 0q-10.148662 75.100099-43.131814 141.066402t-84.233895 117.217047-116.709613 84.741328-140.558969 43.639247l0 58.86224-126.858276 0 0-58.86224q-75.100099-11.163528-140.051536-45.161546t-115.187314-84.741328-83.219029-116.20218-42.116947-140.558969l-64.951437 0 0-127.873142 65.966303 0q11.163528-73.070367 44.654113-136.499504t83.726462-113.157582 114.172448-82.204163 137.006938-43.639247l0-70.025768 126.858276 0 0 69.010902q74.085233 10.148662 138.529237 43.131814t115.187314 82.711596 84.233895 113.665015 44.654113 137.006938l62.921705 0zM511.492567 833.205154q65.966303 0 124.32111-24.864222t101.48662-68.503469 68.503469-101.994054 25.371655-124.32111-25.371655-124.32111-68.503469-101.48662-101.48662-68.503469-124.32111-25.371655-124.32111 25.371655-101.994054 68.503469-68.503469 101.48662-24.864222 124.32111 24.864222 124.32111 68.503469 101.994054 101.994054 68.503469 124.32111 24.864222z"  ></path></symbol><symbol id="icon-fuwenbenkuang" viewBox="0 0 1024 1024"><path d="M218.316 307.727h87.886v205.06h-29.297v29.295h117.179v-29.294H364.79V307.727h87.882v29.293h29.294v-87.882H189.022v87.882h29.294v-29.293z m322.242 58.59h292.945v58.588H540.558v-58.588z m0 117.177h292.945v58.588H540.558v-58.588z m-351.536 117.18h644.481v58.588h-644.48v-58.587z m0 117.176h644.481v58.588h-644.48V717.85z m351.536-468.713h292.945v58.589H540.558v-58.589z m420.923 713.13H61.045V63.309h900.436v898.958z m-864.62-35.816h828.804V99.125H96.861V926.45z"  ></path></symbol><symbol id="icon-unpublish" viewBox="0 0 1024 1024"><path d="M496.554728 396.587434c0.065492 0.064468 0.134053 0.130983 0.201591 0.196475 9.279341 9.019421 24.251334 8.931416 33.385365-0.196475l145.869229-145.894811c7.78122-7.779174 7.779174-20.392446 0-28.170596-7.78122-7.77815-20.394493-7.77815-28.172643 0.001023l-134.491087 134.509507-137.185452-137.204895c-3.889587-3.889587-8.987698-5.834892-14.086833-5.834892s-10.1952 1.944282-14.086833 5.833869c-7.78122 7.77815-7.78122 20.391423-0.002047 28.17162L496.554728 396.587434z"  ></path><path d="M515.341606 365.052207c11.002588 0 19.922748-8.918114 19.922748-19.919678l0-273.459139c0-11.002588-8.92016-19.920702-19.922748-19.920702s-19.922748 8.918114-19.922748 19.920702l0 273.459139C495.419881 356.135116 504.340041 365.052207 515.341606 365.052207z"  ></path><path d="M1021.511831 622.11798 1021.511831 622.11798c0-11.722996 0-23.447015-11.726066-35.167964l-5.859451-5.861498-189.18885-215.316927c-5.858428-5.862521-11.720949-11.721973-23.441898-11.721973l-103.45728 0c-17.58347 0-30.365588 6.424316-30.365588 24.009833 0 17.582447 12.782118 19.769252 30.365588 19.769252l105.507986 0 150.20907 174.151365-150.20907 0c-23.447015 0-46.89403 17.58654-52.753481 41.028439l-29.308513 85.307921c-5.861498 23.445992-29.306466 41.028439-52.753481 41.028439l-281.34576 0c-23.444968 0-53.248761-17.582447-59.111283-41.028439l-32.483832-89.546456c-11.722996-17.582447-6.372128-33.521464-49.078789-35.166941l-143.850246 0 143.850246-167.792541 99.645464 0c17.58347 0 29.305443-2.187829 29.305443-19.769252 0-17.585517-11.721973-25.072025-29.305443-25.072025l-98.156554 0c-5.862521 0-17.58654 5.862521-23.447015 11.725042l-194.48446 214.255759c0 0-17.585517 23.444968-17.585517 35.167964l0 0c0 0 0 0 0 5.861498l0 293.070802c0 29.306466 11.294231 51.197032 40.600697 51.197032l937.824315 0c29.306466 0 40.600697-21.89159 40.600697-51.197032L1021.508761 622.11798C1021.511831 627.979478 1021.511831 627.979478 1021.511831 622.11798L1021.511831 622.11798zM980.911134 927.405011l-937.824315 0 0-315.319525 202.962551 0 29.306466 93.782943c17.58654 46.889937 49.078789 76.762291 101.83227 76.762291l269.622764 0c52.755528 0 93.782943-24.009833 111.367437-76.762291l29.306466-93.782943 193.426361 0 0 308.963771L980.911134 927.405011z"  ></path><path d="M511.999488 627.979478 511.999488 627.979478 511.999488 627.979478Z"  ></path></symbol><symbol id="icon-publish" viewBox="0 0 1024 1024"><path d="M527.445272 58.661028c-0.065492-0.064468-0.134053-0.130983-0.201591-0.196475-9.279341-9.019421-24.251334-8.931416-33.385365 0.196475l-145.869229 145.894811c-7.78122 7.779174-7.779174 20.392446 0 28.170596 7.78122 7.77815 20.394493 7.77815 28.172643-0.001023l134.491087-134.509507 137.185452 137.204895c3.889587 3.889587 8.987698 5.834892 14.086833 5.834892s10.1952-1.944282 14.086833-5.833869c7.78122-7.77815 7.78122-20.391423 0.002047-28.17162L527.445272 58.661028z"  ></path><path d="M508.658394 90.196255c-11.002588 0-19.922748 8.918114-19.922748 19.919678l0 273.459139c0 11.002588 8.92016 19.920702 19.922748 19.920702s19.922748-8.918114 19.922748-19.920702l0-273.459139C528.580119 99.114368 519.660982 90.196255 508.658394 90.196255z"  ></path><path d="M1021.511831 622.11798 1021.511831 622.11798c0-11.722996 0-23.447015-11.726066-35.167964l-5.858428-5.861498-189.189873-215.316927c-5.858428-5.862521-11.719926-11.721973-23.441898-11.721973l-103.456257 0c-17.584494 0-30.365588 6.424316-30.365588 24.009833 0 17.582447 12.781094 19.769252 30.365588 19.769252l105.507986 0L943.557388 571.98007 793.349341 571.98007c-23.448038 0-46.89403 17.58654-52.754504 41.028439l-29.308513 85.307921c-5.860475 23.445992-29.306466 41.028439-52.752458 41.028439l-281.34576 0c-23.445992 0-53.249785-17.582447-59.112306-41.028439l-32.483832-89.546456c-11.722996-17.582447-6.372128-33.521464-49.078789-35.166941l-143.850246 0 143.850246-167.792541 99.646488 0c17.582447 0 29.30442-2.187829 29.30442-19.769252 0-17.585517-11.721973-25.072025-29.30442-25.072025l-98.157577 0c-5.862521 0-17.58654 5.862521-23.447015 11.725042l-194.48446 214.255759c0 0-17.585517 23.444968-17.585517 35.167964l0 0c0 0 0 0 0 5.861498l0 293.070802c0 29.306466 11.294231 51.197032 40.600697 51.197032L980.912158 972.247312c29.306466 0 40.600697-21.89159 40.600697-51.197032L1021.512854 622.11798C1021.511831 627.979478 1021.511831 627.979478 1021.511831 622.11798L1021.511831 622.11798zM980.912158 927.405011l-937.824315 0 0-315.319525 202.962551 0 29.306466 93.782943c17.58654 46.889937 49.078789 76.762291 101.833293 76.762291l269.622764 0c52.754504 0 93.78192-24.009833 111.366414-76.762291l29.306466-93.782943L980.912158 612.085486l0 308.963771L980.912158 927.405011z"  ></path><path d="M511.999488 627.979478 511.999488 627.979478 511.999488 627.979478Z"  ></path></symbol><symbol id="icon-fabu" viewBox="0 0 1024 1024"><path d="M945.93 130.759c-7.638-15.276-26.279-21.619-41.684-13.981L92.312 520.027c-15.276 7.638-21.619 26.279-13.981 41.684 1.683 3.365 3.884 6.343 6.473 8.803 3.365 3.237 7.378 5.696 12.169 7.249l273.148 85.828 41.943-52.041-222.919-70.035 611.539-303.957-327.131 395.999a22.868 22.868 0 0 0-2.071 2.848l-37.801 46.991v194.957c0 17.218 13.852 31.069 31.069 31.069s31.069-13.852 31.069-31.069v-175.54l297.097 93.206c3.495 1.036 6.991 1.553 10.485 1.423 15.017 0.388 28.609-10.227 31.457-25.502l113.79-621.507c0.388-2.071 0.517-4.272 0.517-6.343-0.13-4.402-1.036-9.062-3.237-13.333zM779.969 726.893l-240.396-75.472L866.314 255.81l-86.346 471.082z"  ></path></symbol><symbol id="icon-piliang-copy" viewBox="0 0 1024 1024"><path d="M494.22223282 163.02847099c-4.87200737-4.17291641-10.90581894-6.14118577-16.97825432-5.56028366-5.1176548 0.37387848-12.45308876 2.87824631-20.90938567 12.75821687l-178.74326707 208.76014709L162.55726051 279.26991653c-17.11575508-14.83926773-32.85264016-5.82292556-38.77830505 1.01348877-7.61120796 8.77532959-10.83011628 23.96221162 5.13001442 37.79880524L257.29374123 429.37594604c2.52290725 2.18688011 5.06280899 3.68239402 7.58957862 4.88591194 8.83944512 7.49456406 23.96993637 10.54198265 37.65666962-5.44441222l193.52305413-226.0180378c13.73694419-16.04587554 6.16127014-32.91675567-1.84081078-39.77093697zM434.14984893 540.95781517H162.50009727c-24.66284752 0-44.65762138 19.99168396-44.65762138 44.65221405V857.25823593c0 24.66207504 19.99477386 44.65684891 44.65684891 44.65684891h271.64666175c24.66207504 0 44.65684891-19.99091148 44.65684892-44.65684891V585.60925674c0-24.66130256-19.99091148-44.65221405-44.65298653-44.65221404z m4.54756737 286.11977577c0 19.18367386-15.55303574 34.73052979-34.73052978 34.73052979H192.68383217c-19.18367386 0-34.73052979-15.54840088-34.73052979-34.73052979V615.7945366c0-19.18290139 15.55149079-34.73052979 34.73052979-34.73052979h211.2815094c19.18212891 0 34.73052979 15.55149079 34.73052979 34.73052979V827.07759094z m423.7541771-707.5881958H590.80802155c-24.66284752 0-44.653759 19.99477386-44.65375901 44.65684891v271.64743424c0 24.66130256 19.99168396 44.65684891 44.653759 44.65684891h271.64588929c24.66207504 0 44.65684891-19.99554634 44.6568489-44.65684891V164.14624405c0-24.66284752-19.99168396-44.65762138-44.65839386-44.65762138z m4.55142975 286.1190033c0 19.18290139-15.54608345 34.73052979-34.73052979 34.73052979H620.99021149c-19.18212891 0-34.73052979-15.55149079-34.7305298-34.73052979V194.32920647c0-19.18212891 15.55226326-34.73052979 34.73052979-34.73052979h211.28305436c19.18367386 0 34.73052979 15.55226326 34.73052978 34.73052979v211.27841949z m-4.55142975 137.52548218H590.80802155c-24.66284752 0-44.653759 19.99013901-44.65375901 44.6568489V859.43661881c0 24.66207504 19.99168396 44.65221405 44.653759 44.65221405h271.64588929c24.66207504 0 44.65684891-19.99168396 44.6568489-44.65221405V587.78995705c0-24.6667099-19.99168396-44.65684891-44.65839386-44.65684891z m4.55142975 286.11745834c0 19.18367386-15.54608345 34.73130227-34.73052979 34.73130226H620.99021149c-19.18212891 0-34.73052979-15.55149079-34.7305298-34.73052979V617.9682846c0-19.18212891 15.55226326-34.72975731 34.73052979-34.7297573h211.28305436c19.18367386 0 34.73052979 15.55149079 34.73052978 34.73052978v211.2815094z"  ></path></symbol><symbol id="icon-tupian" viewBox="0 0 1024 1024"><path d="M869.54496 917.40672 357.52448 917.40672l-218.59328-0.41984c-0.63488-0.01536-1.26464-0.04096-1.8944-0.10752-25.9328-2.59584-49.92-14.67904-67.52256-34.01728-17.73568-19.48672-27.50464-44.73344-27.50464-71.08608L42.0096 262.02112c0-58.24512 47.39072-105.63584 105.63584-105.63584l721.89952 0c58.25024 0 105.63584 47.39072 105.63584 105.63584l0 235.38176c0 0.2816-0.01024 0.56832-0.02048 0.86016-0.0256 0.51712-2.05312 53.98528 16.15872 89.19552 4.9152 9.51808 1.19296 21.2224-8.32 26.14272s-21.22752 1.20832-26.14784-8.30464c-22.23104-42.9824-20.7104-101.91872-20.48-108.28288L936.3712 262.02112c0-36.84352-29.9776-66.82624-66.82624-66.82624L147.64544 195.19488c-36.84864 0-66.83136 29.98272-66.83136 66.82624l0 549.76c0 34.18624 25.38496 62.5664 59.20256 66.39616l217.54368 0.42496 511.98464 0c36.84864 0 66.83648-29.97248 66.83648-66.82112l-0.40448-97.78688c-0.10752-1.81248-1.65376-20.4032-20.4032-44.34944-0.0512-0.06656-0.09728-0.128-0.14848-0.19456l-22.67136-29.74208L770.4064 477.7984c-0.4352-0.56832-40.704-53.07392-90.05056-47.51872-40.00768 4.50048-79.27296 47.13984-113.54624 123.29984-18.38592 40.84736-36.16256 71.25504-54.35904 92.93312-18.3808 21.90336-37.23776 34.99008-57.66656 39.99744-45.32224 11.1104-84.59264-19.82464-126.17728-52.5824l-5.2736-4.1472c-48.59392-38.19008-71.76192-29.46048-165.25312 62.19776-7.6544 7.50592-19.93728 7.38304-27.43808-0.26624-7.5008-7.65952-7.37792-19.9424 0.27136-27.4432 48.69632-47.744 80.93184-75.904 111.7696-87.96672 34.816-13.62432 67.08736-6.53824 104.6272 22.95808l5.31456 4.18304c35.40992 27.88352 65.98656 51.97312 92.92288 45.3632 26.74176-6.5536 55.6288-43.9552 85.87776-111.17056 40.85248-90.7776 89.58976-139.88352 144.8704-145.96096 71.44448-7.84896 122.97216 59.90912 125.12768 62.80192l122.25024 161.76128 22.53824 29.57824c27.42784 35.09248 28.52864 64.3328 28.56448 67.5584 0 0.04096 0 0.09216 0 0.128l0.40448 98.16576C975.1808 870.016 927.7952 917.40672 869.54496 917.40672L869.54496 917.40672z"  ></path><path d="M305.05984 452.34176c-44.17536 0-80.11264-35.93728-80.11264-80.11264 0-44.17536 35.9424-80.11264 80.11264-80.11264S385.17248 328.04864 385.17248 372.224C385.17248 416.40448 349.23008 452.34176 305.05984 452.34176L305.05984 452.34176zM305.05984 330.91584c-22.77888 0-41.31328 18.52928-41.31328 41.30816 0 22.77376 18.5344 41.30816 41.31328 41.30816 22.77888 0 41.30816-18.5344 41.30816-41.30816C346.368 349.44512 327.8336 330.91584 305.05984 330.91584L305.05984 330.91584z"  ></path></symbol><symbol id="icon-chaolianjie1" viewBox="0 0 1024 1024"><path d="M869.361605 42.237952H153.67180642c-61.30933253 0-111.15768625 49.84835372-111.15768626 111.15768625v715.5517145c0 42.25372918 23.61237808 78.98409508 58.40956681 97.76353027 15.74158539 8.42312903 33.69251609 13.2560719 52.61003537 13.25607191h715.68979858c19.05560336 0 37.00653407-4.83294288 52.61003537-13.25607191 34.79718875-18.7794352 58.40956682-55.64788517 58.4095668-97.76353027V153.39563825c0.13808409-61.30933253-49.71026963-111.15768625-110.88151809-111.15768625zM97.74775309 153.39563825c0-30.79275037 25.13130297-55.92405333 55.92405333-55.92405333h715.5517145c30.79275037 0 55.92405333 25.13130297 55.92405333 55.92405333v715.5517145c0 15.46541722-6.2137837 29.41190953-16.43200579 39.49204755-10.08013802 10.08013802-24.02663031 16.43200579-39.49204754 16.43200578H153.67180642c-15.46541722 0-29.41190953-6.2137837-39.49204754-16.43200578-10.08013802-10.08013802-16.43200579-24.02663031-16.43200579-39.49204755V153.39563825z"  ></path><path d="M781.12587642 221.05683858c-28.30723687-28.30723687-66.00419135-43.91073817-106.1866593-43.91073816s-77.87942242 15.6035013-106.18665929 43.91073816l-131.45604636 131.31796228c-28.30723687 28.30723687-43.91073817 66.00419135-43.91073817 106.18665929s15.6035013 77.87942242 43.91073817 106.18665928l0.13808408 0.1380841c7.04228819 6.76612003 16.15583763 10.49439025 25.8217234 10.49439025 9.52780169 0 18.64135111-3.72827022 25.82172339-10.35630617l0.27616817-0.27616818c6.90420412-6.76612003 10.77055842-16.01775355 10.77055841-25.68363929 0-9.80396985-3.72827022-19.05560336-10.77055841-26.09789155-14.49882864-14.49882864-22.50770542-33.83060016-22.50770542-54.54321253s8.00887677-39.90629979 22.50770542-54.54321251l131.31796226-131.31796227c14.49882864-14.49882864 33.83060016-22.50770542 54.54321251-22.50770542s39.90629979 8.00887677 54.54321251 22.50770542c14.49882864 14.49882864 22.50770542 33.83060016 22.50770541 54.54321251 0 20.57452827-8.00887677 39.90629979-22.50770541 54.54321252L638.07076714 473.33645695c-6.90420412 6.76612003-10.77055842 16.01775355-10.7705584 25.68363932 0 9.80396985 3.72827022 19.05560336 10.63247432 25.95980746 6.76612003 6.90420412 16.01775355 10.77055842 25.68363931 10.77055842 9.80396985 0 19.05560336-3.72827022 26.09789155-10.77055842l91.54974658-91.54974656c28.30723687-28.30723687 43.91073817-66.00419135 43.91073817-106.1866593s-15.6035013-77.87942242-44.04882225-106.18665929z"  ></path><path d="M558.12008349 448.48132213h-0.13808408c-9.80396985 0-18.91751926 3.86635431-25.8217234 10.77055844-6.90420412 6.76612003-10.77055842 15.87966947-10.77055841 25.68363929 0 9.80396985 3.72827022 19.05560336 10.77055841 26.09789155 14.49882864 14.49882864 22.50770542 33.83060016 22.50770542 54.40512844 0 20.57452827-8.00887677 39.90629979-22.50770542 54.40512844l-131.45604635 131.31796226c-14.49882864 14.49882864-33.83060016 22.50770542-54.40512842 22.50770542-20.57452827 0-39.90629979-8.14696086-54.5432125-22.78387359-14.49882864-14.49882864-22.50770542-33.83060016-22.50770543-54.40512842 0-20.57452827 8.00887677-39.90629979 22.50770543-54.40512843l91.41166246-91.41166248c6.90420412-6.76612003 10.77055842-16.01775355 10.77055843-25.68363932 0-9.80396985-3.72827022-19.05560336-10.63247433-25.95980746-6.76612003-6.90420412-16.01775355-10.77055842-25.68363931-10.77055842h-0.13808409c-9.80396985 0-18.91751926 3.86635431-25.82172339 10.77055842L239.97435787 590.29367467c-28.30723687 28.30723687-43.91073817 66.00419135-43.91073817 106.18665929s15.6035013 77.87942242 43.91073817 106.18665929 66.00419135 43.91073817 106.18665928 43.91073816c40.04438386 0 77.74133834-15.46541722 106.1866593-43.63456999l131.31796227-131.31796228c28.30723687-28.30723687 43.91073817-66.00419135 43.91073817-106.18665929s-15.6035013-77.87942242-43.91073817-106.18665928c-6.76612003-6.90420412-15.87966947-10.77055842-25.54555523-10.77055844z"  ></path></symbol><symbol id="icon-com-jump" viewBox="0 0 1024 1024"><path d="M50.7987336 893.11206717h-8.28504495c-11.04629507-2.76125013-19.33134-16.57008987-19.33134001-27.61638495 0-5.52379481 35.90142989-469.48631135 544.0517158-513.67278619v-273.40648296c0-11.0475896 5.52250027-22.09388468 16.57008987-24.85513481 11.04629507-5.52379481 22.09259013-2.76254467 30.37763508 5.52250027L1009.1026963 451.2434353c11.04629507 11.04629507 11.04629507 27.61638495 0 38.66268002L614.18178939 884.82702222c-8.28504494 8.28504494-19.33134 11.04629507-30.37763508 5.52379481-11.0475896-5.52379481-16.57008987-13.80883973-16.57008987-24.85513481V597.61169952c-91.13549431 11.0475896-375.5895669 66.2803595-494.34144617 278.93027776-2.76125013 11.04629507-13.80883973 16.57008987-22.09388467 16.57008989zM594.85044939 539.61638495c8.28504494 0 13.80883973 2.76254467 19.33134 8.28504494 5.52379481 5.52379481 8.28504494 13.80883973 8.28504494 19.33263455v231.98125826l325.87929726-325.87929726-325.87929726-328.63925285v229.2187136c0 13.80883973-11.04629507 27.61767949-24.85513481 27.61767948-323.11675259 19.33134-447.39242667 212.64862373-491.57890149 345.20934274 179.50973851-185.03223877 472.24756148-207.12612347 488.81765136-207.12612346z m0-165.70089876z"  ></path></symbol><symbol id="icon-component-tiaozhuan" viewBox="0 0 1204 1024"><path d="M1204.705882 503.988706a50.838588 50.838588 0 0 0-13.914353-35.177412L715.414588 11.625412A40.357647 40.357647 0 0 0 687.525647 0a45.658353 45.658353 0 0 0-43.068235 48.188235v202.390589A784.504471 784.504471 0 0 0 0 994.966588 29.575529 29.575529 0 0 0 27.888941 1024a26.322824 26.322824 0 0 0 15.540706-5.180235 1450.465882 1450.465882 0 0 1 159.382588-111.49553 1127.905882 1127.905882 0 0 1 441.22353-134.26447v187.51247a45.598118 45.598118 0 0 0 43.068235 48.188236 39.996235 39.996235 0 0 0 26.744471-10.842353l475.376941-457.246118a50.055529 50.055529 0 0 0 15.119059-36.562824z m-474.051764 351.412706V669.214118l-46.320942 3.855058c-187.211294 15.480471-436.464941 76.197647-577.355294 188.476236a677.767529 677.767529 0 0 1 585.60753-521.818353l38.068706-5.059765V153.057882l365.025882 351.171765z m0 0" fill="#666666" ></path></symbol><symbol id="icon-wangge-open" viewBox="0 0 1024 1024"><path d="M870.196 333.36H691.25V154.415h178.946V333.36z m0 268.419H691.25V422.83h178.946v178.949z m0 268.415H691.25V691.249h178.946v178.945zM601.777 333.36H422.832V154.415h178.945V333.36z m0 268.419H422.832V422.83h178.945v178.949z m0 268.415H422.832V691.249h178.945v178.945zM333.359 333.36H154.413V154.415h178.946V333.36z m0 268.419H154.413V422.83h178.946v178.949z m0 268.415H154.413V691.249h178.946v178.945zM870.196 64.941H154.413c-49.21 0-89.472 40.262-89.472 89.474v715.779c0 49.212 40.262 89.474 89.472 89.474h715.783c49.21 0 89.472-40.262 89.472-89.474V154.415c0-49.212-40.262-89.474-89.472-89.474z" fill="" ></path></symbol><symbol id="icon-wangge-close" viewBox="0 0 1024 1024"><path d="M329.9555552 147.91111147v65.9911104l91.02222293 91.02222293V147.91111147h182.04444374v182.04444373h-157.01333334l91.02222294 91.02222293H603.02222187v65.9911104l91.02222293 91.02222294V420.97777813h182.04444373v182.04444374h-157.01333333l91.02222293 91.02222293H876.08888853v65.9911104l91.02222294 91.02222293V147.91111147c0-50.06222187-40.96-91.02222187-91.02222294-91.02222294H172.94222187l91.02222293 91.02222294H329.9555552z m364.0888896 0h182.04444373v182.04444373h-182.04444373V147.91111147zM23.66577813 23.66577813L-34.13333333 81.92l91.02222186 91.02222187V876.08888853c0 50.06222187 40.96 91.02222187 91.02222294 91.02222294h703.60177706l91.02222294 91.02222186 57.7991104-57.79911146L23.66577813 23.66577813zM420.97777813 537.03111147L486.96888853 603.02222187H420.97777813v-65.9911104z m-273.06666666-273.06666667L213.90222187 329.9555552H147.91111147V263.9644448zM329.9555552 876.08888853H147.91111147v-182.04444373h182.04444373v182.04444373z m0-273.06666666H147.91111147v-182.04444374h157.01333333l25.0311104 25.0311104V603.02222187z m273.06666667 273.06666666h-182.04444374v-182.04444373h157.01333334l25.0311104 24.576V876.08888853z m91.02222293 0v-66.44622186L760.49066667 876.08888853H694.0444448z"  ></path></symbol><symbol id="icon-a-liumeitimeitiliebiao" viewBox="0 0 1024 1024"><path d="M1023.853735 948.673618v75.25325H596.248536V948.673618zM511.926868 0.073132a511.926868 511.926868 0 0 1 511.926867 511.926868h-75.253249a436.600486 436.600486 0 1 0-436.600486 436.600486h5.119269v75.253249h-5.119269a511.926868 511.926868 0 1 1 0-1023.853735z m511.926867 803.505785v75.25325H596.248536v-75.180117zM362.590487 290.116269l192.11884 110.941866 192.11884 110.941865-192.11884 110.941865-192.11884 110.941866V290.189402zM1023.853735 658.484217v75.399514H596.248536V658.630481zM437.843737 420.438223v182.831024l79.202399-45.780888 79.2024-45.707756-79.2024-45.707756z"  ></path></symbol><symbol id="icon-iframe" viewBox="0 0 1024 1024"><path d="M761.32807111 571.51251342h237.44420978c1.86413511-16.45099235 2.56318578-33.27481173 2.56318578-50.51806151a440.12229973 440.12229973 0 0 0-59.46591005-221.55245796c39.10023395-103.92553245 37.748736-192.19232995-14.680064-244.90075022-49.77240747-49.53939058-183.38429155-41.47700622-334.42583893 25.35223752a448.65071787 448.65071787 0 0 0-33.83405227-1.2582912c-207.29182435 0-381.21563022 142.65293938-429.26371271 334.84526933C194.63099733 330.24682667 263.09135929 269.89545245 354.48058311 225.90186382c-8.29540125 7.78276409-56.80951751 55.97065671-64.91850524 64.12624783C48.529408 530.96757475-27.43409778 845.68018489 54.30822685 927.51571627c62.16890595 62.12230258 174.80927005 51.63654258 304.22685013-11.7440512a440.40192 440.40192 0 0 0 200.39452444 47.90827235c194.33608533 0 358.98581902-125.03686258 418.63814258-299.24028871h-239.30834489a194.80211911 194.80211911 0 0 1-171.26741333 102.06139734 194.80211911 194.80211911 0 0 1-171.22080996-102.06139734 195.73418667 195.73418667 0 0 1-23.068672-92.18148124v-0.74565405h388.57896391z m-388.25274026-116.74146133a186.41351111 186.41351111 0 0 1 185.85427057-175.64813084 186.46011449 186.46011449 0 0 1 185.94747733 175.69473422H373.02872747z m551.9704064-351.10984818c33.74084551 34.06706915 32.85538133 96.79521565 4.05449386 175.08889031a444.03698347 444.03698347 0 0 0-206.08013653-168.70422755c90.69017315-38.86721707 164.4167168-43.99358862 202.02564267-6.38466276zM116.71014969 911.99679147c-43.06152107-43.06152107-30.05917867-133.42547058 25.35223751-242.33756445a443.94377671 443.94377671 0 0 0 188.46405973 230.59351325c-96.00295822 43.57415822-174.57625315 50.93749191-213.81629724 11.7440512z" fill="#636161" ></path></symbol><symbol id="icon-canshu" viewBox="0 0 1024 1024"><path d="M 340.11 511.12 h -99.32 V 121.77 a 21.5 21.5 0 0 0 -43 0 v 389.35 H 98 a 21.51 21.51 0 0 0 -21.5 21.5 v 107.14 a 21.5 21.5 0 0 0 21.5 21.5 h 99.56 v 245.6 a 21.5 21.5 0 0 0 43 0 v -245.6 h 99.55 a 21.5 21.5 0 0 0 21.5 -21.5 V 532.62 a 21.51 21.51 0 0 0 -21.5 -21.5 Z m -21.5 107.14 H 119.5 v -64.14 h 199.11 Z M 633.09 270.12 h -99.32 V 121.77 a 21.5 21.5 0 1 0 -43 0 v 148.35 H 391 a 21.51 21.51 0 0 0 -21.5 21.5 v 107.14 a 21.5 21.5 0 0 0 21.5 21.5 h 99.56 v 486.6 a 21.5 21.5 0 0 0 43 0 v -486.6 h 99.55 a 21.5 21.5 0 0 0 21.5 -21.5 V 291.62 a 21.51 21.51 0 0 0 -21.52 -21.5 Z m -21.5 107.14 H 412.48 v -64.14 h 199.11 Z M 924.29 649.12 h -99.56 V 121.77 a 21.5 21.5 0 1 0 -43 0 v 527.35 h -99.55 a 21.51 21.51 0 0 0 -21.5 21.5 v 107.14 a 21.5 21.5 0 0 0 21.5 21.5 h 99.55 v 107.6 a 21.5 21.5 0 1 0 43 0 v -107.6 h 99.56 a 21.5 21.5 0 0 0 21.5 -21.5 V 670.62 a 21.51 21.51 0 0 0 -21.5 -21.5 Z m -21.5 107.14 H 703.68 v -64.14 h 199.11 Z"  ></path></symbol><symbol id="icon-genghuan" viewBox="0 0 1024 1024"><path d="M381.6 48H108.8C77.6 48 52 73.6 52 104.8v272.8c0 31.2 25.6 56.8 56.8 56.8h272.8c31.2 0 56.8-25.6 56.8-56.8v-272c0-32-25.6-57.6-56.8-57.6z m-12 318.4H120V116.8h249.6v249.6z m544 175.2h-320c-31.2 0-56.8 25.6-56.8 56.8v320c0 31.2 25.6 56.8 56.8 56.8h320c31.2 0 56.8-25.6 56.8-56.8v-320c0-31.2-25.6-56.8-56.8-56.8z m-12 365.6H604.8V610.4h297.6v296.8z m-530.4 0c-84.8 0-154.4-68.8-154.4-153.6v-76h94.4l-128.8-128-128.8 128H148v76c0 122.4 100 221.6 223.2 221.6 19.2 0 34.4-15.2 34.4-34.4s-15.2-33.6-34.4-33.6z m287.2-790.4c84.8 0 154.4 68.8 154.4 153.6v76h-93.6L848 475.2l128-128.8h-94.4v-76C881.6 148 781.6 48 658.4 48 639.2 48 624 63.2 624 82.4s16 34.4 34.4 34.4z"  ></path></symbol><symbol id="icon-fasongyoujian" viewBox="0 0 1044 1024"><path d="M16.384 157.696q-11.264-8.192-14.336-13.312t-3.072-14.336l0-9.216q0-26.624 13.312-41.984t46.08-15.36l843.776 1.024q33.792 0 47.104 14.336t13.312 39.936l1.024 11.264q0 9.216-2.048 12.8t-16.384 14.848l-418.816 251.904q-10.24 4.096-25.088 11.264t-19.968 8.192q-6.144 0-18.432-5.632t-27.648-14.848zM646.144 572.416q-21.504 0-34.816 9.216t-20.992 23.552-10.24 32.256-2.56 34.304l0 71.68 0 12.288q0 6.144 1.024 11.264l-141.312 0q-72.704 0-136.192-0.512t-111.616-0.512l-70.656 0q-36.864 0-60.416-9.728t-36.864-25.088-18.432-35.328-5.12-41.472l0-378.88q0-21.504 10.24-27.136t25.6 5.632q5.12 3.072 18.432 11.776t31.744 19.968 38.4 24.064 37.888 24.064 30.72 19.456 16.896 10.24q14.336 9.216 16.384 23.04t-3.072 24.064q-4.096 10.24-12.288 26.624t-17.408 33.28-17.92 32.256-11.776 23.552q-5.12 14.336 2.048 19.456t22.528-4.096q3.072-2.048 16.896-15.872t29.184-30.72 29.184-31.744 18.944-17.92q9.216-8.192 24.064-11.776t26.112 2.56q7.168 4.096 19.456 12.288t27.136 17.92 30.208 19.968l27.648 18.432q12.288 8.192 26.112 10.24t26.624 1.024 23.04-4.608 15.36-6.656 19.456-11.776 31.232-18.944 31.744-19.456 22.016-13.312l129.024-79.872q2.048-1.024 12.8-8.192t26.624-17.408 34.816-22.528 35.84-23.04 31.232-19.968 20.48-13.312q19.456-12.288 30.208-9.728t10.752 16.896l0 266.24q-28.672-23.552-55.808-44.032t-49.664-34.816q-22.528-15.36-39.424-10.752t-27.648 19.968-16.384 35.84-5.632 36.864q0 11.264-0.512 18.432t-0.512 12.288q-1.024 5.12-1.024 8.192l-15.36 0-104.448 0zM1028.096 679.936q13.312 10.24 13.824 28.672t-10.752 26.624q-15.36 12.288-35.84 29.184t-42.496 34.304-43.008 34.816-38.4 30.72q-21.504 17.408-30.208 18.432t-8.704-26.624l0-46.08q0-17.408-8.704-28.672t-23.04-11.264l-118.784 0q-14.336 0-28.16-10.24t-13.824-26.624l0-52.224q0-28.672 9.216-34.816t32.768-6.144l20.48 0q9.216 0 20.992 0.512t28.16 0.512l43.008 0q20.48 0 29.184-7.168t8.704-25.6l0-45.056q0-18.432 6.144-23.552t22.528 8.192q16.384 12.288 37.888 29.696t44.544 35.328 45.056 35.84 39.424 31.232z"  ></path></symbol><symbol id="icon-github" viewBox="0 0 1024 1024"><path d="M511.542857 14.057143C228.914286 13.942857 0 242.742857 0 525.142857 0 748.457143 143.2 938.285714 342.628571 1008c26.857143 6.742857 22.742857-12.342857 22.742858-25.371429v-88.571428c-155.085714 18.171429-161.371429-84.457143-171.771429-101.6C172.571429 756.571429 122.857143 747.428571 137.714286 730.285714c35.314286-18.171429 71.314286 4.571429 113.028571 66.171429 30.171429 44.685714 89.028571 37.142857 118.857143 29.714286 6.514286-26.857143 20.457143-50.857143 39.657143-69.485715-160.685714-28.8-227.657143-126.857143-227.657143-243.428571 0-56.571429 18.628571-108.571429 55.2-150.514286-23.314286-69.142857 2.171429-128.342857 5.6-137.142857 66.4-5.942857 135.428571 47.542857 140.8 51.771429 37.714286-10.171429 80.8-15.542857 129.028571-15.542858 48.457143 0 91.657143 5.6 129.714286 15.885715 12.914286-9.828571 76.914286-55.771429 138.628572-50.171429 3.314286 8.8 28.228571 66.628571 6.285714 134.857143 37.028571 42.057143 55.885714 94.514286 55.885714 151.2 0 116.8-67.428571 214.971429-228.571428 243.314286a145.714286 145.714286 0 0 1 43.542857 104v128.571428c0.914286 10.285714 0 20.457143 17.142857 20.457143 202.4-68.228571 348.114286-259.428571 348.114286-484.685714 0-282.514286-229.028571-511.2-511.428572-511.2z"  ></path></symbol><symbol id="icon-dianhua" viewBox="0 0 1024 1024"><path d="M617.094737 301.810526c51.2 16.168421 91.621053 59.284211 102.4 110.484211 2.694737 8.084211 10.778947 13.473684 18.863158 13.473684h5.389473c10.778947-2.694737 16.168421-13.473684 13.473685-21.557895-16.168421-64.673684-64.673684-118.568421-129.347369-137.431579-10.778947-2.694737-21.557895 2.694737-24.252631 13.473685-2.694737 8.084211 2.694737 18.863158 13.473684 21.557894zM617.094737 180.547368c115.873684 18.863158 207.494737 115.873684 223.663158 231.747369 0 10.778947 8.084211 16.168421 18.863158 16.168421h2.694736c10.778947 0 18.863158-10.778947 16.168422-21.557895-16.168421-134.736842-121.263158-242.526316-253.305264-266.778947-10.778947-2.694737-18.863158 5.389474-21.557894 16.168421-2.694737 10.778947 5.389474 21.557895 13.473684 24.252631z" fill="#101010" ></path><path d="M622.484211 29.642105c-10.778947 0-18.863158 5.389474-21.557895 16.168421s5.389474 18.863158 16.168421 21.557895c175.157895 21.557895 315.284211 164.378947 331.452631 342.231579 0 10.778947 8.084211 16.168421 18.863158 16.168421h2.694737c10.778947 0 18.863158-10.778947 16.168421-21.557895C970.105263 212.884211 816.505263 53.894737 622.484211 29.642105zM571.284211 662.905263c-13.473684 13.473684-26.947368 29.642105-35.031579 48.505263-45.810526-26.947368-88.926316-59.284211-123.957895-94.315789-35.031579-35.031579-67.368421-78.147368-94.31579-123.957895 18.863158-8.084211 35.031579-21.557895 48.505264-35.031579 75.452632-75.452632 75.452632-199.410526 0-274.863158C291.031579 107.789474 167.073684 107.789474 91.621053 183.242105c-35.031579 35.031579-53.894737 80.842105-56.589474 132.042106-2.694737 158.989474 70.063158 307.2 218.273684 458.105263 148.210526 148.210526 296.421053 218.273684 450.021053 218.273684h8.08421c48.505263-2.694737 97.010526-21.557895 132.042106-56.589474 75.452632-75.452632 75.452632-199.410526 0-274.863158-72.757895-72.757895-196.715789-72.757895-272.168421 2.694737z m247.915789 247.91579c-29.642105 29.642105-67.368421 45.810526-105.094737 45.810526h-5.389474c-145.515789 0-282.947368-67.368421-423.073684-207.494737-142.821053-142.821053-210.189474-282.947368-207.494737-431.157895 0-40.421053 16.168421-78.147368 45.810527-105.094736 24.252632-32.336842 64.673684-48.505263 105.094737-48.505264s80.842105 16.168421 110.48421 45.810527c61.978947 61.978947 61.978947 158.989474 0 220.968421-16.168421 16.168421-35.031579 26.947368-53.894737 35.031579l-2.694737 2.694737-2.694736 2.694736-2.694737 2.694737s0 2.694737-2.694737 2.694737v10.778947c29.642105 53.894737 67.368421 107.789474 110.48421 150.905264 43.115789 43.115789 97.010526 80.842105 150.905264 110.48421H544.336842c2.694737 0 5.389474 0 8.084211-2.694737h2.694736l5.389474-5.389473c8.084211-21.557895 18.863158-40.421053 35.031579-53.894737 61.978947-61.978947 158.989474-61.978947 220.968421 0 61.978947 61.978947 61.978947 161.684211 2.694737 223.663158z" fill="#101010" ></path></symbol><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M184.64768 836.34176c3.9936 3.9936 9.23648 5.98016 14.47936 5.98016 5.24288 0 10.48576-2.00704 14.49984-6.00064l292.70016-293.04832 292.70016 293.04832c3.9936 4.01408 9.23648 6.00064 14.49984 6.00064 5.24288 0 10.48576-2.00704 14.47936-5.98016 8.00768-7.9872 8.00768-20.95104 0.02048-28.95872L535.61344 514.64192 828.0064 221.92128c7.9872-8.00768 7.9872-20.97152-0.02048-28.95872-8.02816-8.00768-20.97152-8.00768-28.95872 0.02048L506.30656 486.03136 213.6064 192.98304c-8.00768-8.00768-20.97152-8.00768-28.95872-0.02048-8.00768 7.9872-8.00768 20.95104-0.02048 28.95872l292.37248 292.72064L184.6272 807.38304C176.64 815.37024 176.64 828.35456 184.64768 836.34176z" fill="" ></path></symbol><symbol id="icon-juxing1" viewBox="0 0 1024 1024"><path d="M889 1024H135C60.6 1024 0 963.4 0 889V135C0 60.6 60.6 0 135 0h754c74.4 0 135 60.6 135 135v754c0 74.4-60.6 135-135 135zM135 90c-24.8 0-45 20.2-45 45v754c0 24.8 20.2 45 45 45h754c24.8 0 45-20.2 45-45V135c0-24.8-20.2-45-45-45H135z"  ></path></symbol><symbol id="icon-yidongduan" viewBox="0 0 1024 1024"><path d="M778.778947 35.031579H245.221053C212.884211 35.031579 188.631579 61.978947 188.631579 94.315789v835.368422c0 32.336842 26.947368 59.284211 59.28421 59.28421h530.863158c32.336842 0 59.284211-26.947368 59.284211-59.28421v-835.368422c-2.694737-32.336842-26.947368-59.284211-59.284211-59.28421z m-180.547368 56.589474h-169.768421c-8.084211 0-16.168421-5.389474-16.168421-16.168421v-2.694737h199.410526v2.694737c0 8.084211-5.389474 16.168421-13.473684 16.168421z m199.410526 838.063158c0 10.778947-10.778947 21.557895-21.557894 21.557894H245.221053c-10.778947 0-21.557895-10.778947-21.557895-21.557894v-835.368422c0-10.778947 10.778947-21.557895 21.557895-21.557894h126.652631v2.694737c0 29.642105 24.252632 53.894737 53.894737 53.894736h169.768421c29.642105 0 53.894737-24.252632 53.894737-53.894736v-2.694737h126.652632c10.778947 0 21.557895 10.778947 21.557894 21.557894v835.368422z" fill="#101010" ></path><path d="M512 786.863158c-37.726316 0-70.063158 32.336842-70.063158 70.063158 0 37.726316 32.336842 70.063158 70.063158 70.063158s70.063158-32.336842 70.063158-70.063158c0-37.726316-32.336842-70.063158-70.063158-70.063158z m0 102.4c-18.863158 0-32.336842-13.473684-32.336842-32.336842s13.473684-32.336842 32.336842-32.336842 32.336842 13.473684 32.336842 32.336842S530.863158 889.263158 512 889.263158z" fill="#101010" ></path></symbol><symbol id="icon-video" viewBox="0 0 1024 1024"><path d="M221.63911147 385.93422187c103.88669653 0 188.38565973-84.48379307 188.38565866-188.3553184S325.52580693 9.20841493 221.63911147 9.20841493c-103.8563552 0-188.3553184 84.4989632-188.3553184 188.37048854 0 103.8715264 84.48379307 188.3553184 188.3553184 188.3553184z m0-316.04432534c70.42085973 0 127.70417813 57.2833184 127.70417706 127.68900694s-57.2833184 127.6738368-127.70417706 127.6738368c-70.40568853 0-127.6738368-57.26814827-127.67383787-127.6738368 0-70.42085973 57.26814827-127.68900693 127.67383787-127.68900694z" fill="" ></path><path d="M153.29659307 197.5940736l-0.0758528-4.05048853c-0.0606816-1.72942187-0.0606816-1.72942187 0.31857813-3.71674027a15.20071147 15.20071147 0 0 0-12.0452736-17.76450453 15.26139307 15.26139307 0 0 0-17.76450453 12.04527466 39.4429632 39.4429632 0 0 0-0.84954027 10.43721494l0.0606816 3.0340736a15.18554027 15.18554027 0 0 0 30.35591147 0.01517013zM152.2043264 166.28242987a15.14002987 15.14002987 0 0 0 12.6217472-6.7356448 68.2818368 68.2818368 0 0 1 56.81303787-30.34074027 15.17037013 15.17037013 0 1 0 0-30.34074133 98.5922368 98.5922368 0 0 0-82.02619307 43.79685973 15.18554027 15.18554027 0 0 0 12.591408 23.62026667zM646.39431147 385.93422187c103.90186667 0 188.38565973-84.48379307 188.38565866-188.3553184S750.29617813 9.20841493 646.39431147 9.20841493c-103.8563552 0-188.3553184 84.4989632-188.3553184 188.37048854 0.01517013 103.8715264 84.51413333 188.3553184 188.3553184 188.3553184z m0-316.04432534c70.43602987 0 127.70417813 57.2833184 127.70417706 127.68900694s-57.26814827 127.6738368-127.70417706 127.6738368c-70.40568853 0-127.6738368-57.26814827-127.67383787-127.6738368 0.01517013-70.42085973 57.2833184-127.68900693 127.67383787-127.68900694z" fill="" ></path><path d="M576.97469653 166.28242987a15.14002987 15.14002987 0 0 0 12.62174827-6.7356448 68.26666667 68.26666667 0 0 1 56.79786667-30.34074027c8.40438507 0 15.17037013-6.7811552 15.17037013-15.1703712 0-8.38921493-6.76598507-15.17037013-15.17037013-15.17037013a98.56189653 98.56189653 0 0 0-82.01102294 43.79685973 15.17037013 15.17037013 0 0 0 12.591408 23.62026667zM1010.40734827 453.16930347c-9.93659307-10.16414827-22.33078507-15.61031147-37.42530347-15.6103104-12.27282987 0-25.50139307 3.29197013-41.56681493 11.0592a19245.43525973 19245.43525973 0 0 1-160.53285974 84.6051552l0.74334827-11.37777814c0.0606816-0.74334827 0.09102187-2.97339307 0.09102187-3.7319104 0-59.02791147-47.17985173-110.13688853-105.16100694-110.1368896H103.1585184c-57.01025173 0-106.9662816 56.06968853-106.9662816 115.12794134V919.62785173c0 56.8130368 47.99905173 95.1485632 106.9662816 95.1485632h563.39721493c58.49694827 0 104.35697813-41.67300693 105.1003264-98.8956448-0.01517013 0.0606816-0.01517013 0.13653333-0.03034133 0.03034134l-1.5777184-25.24349654c40.3076736 20.20693333 102.9309632 52.6715264 161.00314027 83.254992 1.65357013 0.8798816 3.17060693 1.6384 4.9758816 2.21487467 15.7923552 4.8545184 28.36859307 8.192 40.4897184 8.26785173 21.61777813-0.1668736 34.74014827-10.74062187 41.11170453-19.55460693 7.5548448-10.4220448 10.16414827-23.90850347 10.16414827-42.15845973V512.91022187c0-12.09078507 1.54737813-40.53522987-17.3852448-59.7409184z m-41.4909632 468.8706368c-4.23253333-1.0012448-8.75330347-2.41208853-11.90874027-3.382992-204.07182187-107.4365632-211.1715552-107.61860693-220.18275627-107.618608-8.3588736 0-16.35365973 3.06441493-22.1032288 9.16290453-5.71922987 6.06814827-8.67745173 13.48645973-8.17682986 21.83016213l4.47525866 73.36391147c-0.43994027 23.49890347-19.8276736 38.69961493-44.47952533 38.69961493H103.1585184c-25.75928853 0-46.2848-10.92266667-46.2848-34.4670816V523.10471147c0-25.69860693 22.5886816-54.44645973 46.2848-54.44645974v-0.01517013h563.39721493c23.80231147 0 43.9485632 23.78714027 44.4643552 48.4996736l-4.4449184 65.52082987c-0.5916448 8.38921493 2.32106667 16.68740693 8.04029654 22.84657813 5.74957013 6.15917013 13.8050368 9.6635264 22.22459306 9.66352533 9.8910816 0 12.5307264-0.03034027 222.0487104-112.09386666 4.14151147-2.00248853 7.28177813-3.1554368 9.55733334-3.82293334 0.36408853 2.71549653 0.60681493 6.70530347 0.51579306 12.66725974l-0.04551146 410.115792z" fill="" ></path><path d="M771.64088853 915.89594027l0.04551147-0.925392c0 0.31857813-0.04551147 0.62198507-0.04551147 0.925392zM976.97185173 984.4508448l-0.45511146-0.03034133-0.47028054 0.03034133h0.925392zM771.6864 914.97054827l0.01517013-0.3489184-0.01517013 0.3489184zM271.06417813 498.98382187h-128.8571264c-30.44693333 0-54.99259307 37.54666667-54.992592 65.61185173v77.09582293a15.17037013 15.17037013 0 1 0 30.34074027-0.01517013v-77.09582293c0-14.12361493 13.56231147-35.24077013 24.65185173-35.24077014h128.8571264a15.17037013 15.17037013 0 1 0 0-30.35591146zM346.91602987 498.99899307h-15.17037014a15.17037013 15.17037013 0 1 0 0 30.34074026h15.17037014a15.17037013 15.17037013 0 1 0 0-30.34074026z" fill="" ></path></symbol><symbol id="icon-xuanfuanniufadongtai" viewBox="0 0 1024 1024"><path d="M924.3 338.3c-22.5-53.2-54.7-101-95.7-142s-88.8-73.2-142-95.7C631.5 77.3 573 65.5 512.7 65.5s-118.8 11.8-173.9 35.1c-23.8 10.1-46.5 22.1-68 35.9-9.1 5.9-14.5 16-14.5 26.8 0 25.3 28 40.6 49.3 26.9 61.2-39.5 132.5-60.7 207.1-60.7 102.2 0 198.3 39.8 270.6 112.1 67.6 67.6 106.8 156.1 111.6 251 5.8 114.9-40.5 226.7-125.8 303.8-70.4 63.7-160.7 98.6-256.4 98.6-102.2 0-198.3-39.8-270.6-112.1C169.8 710.6 130 614.4 130 512.2c0-74 20.9-144.8 59.8-205.7 13.6-21.3-1.7-49.2-27-49.2-11 0-21.2 5.7-27.1 14.9-13.3 20.9-24.9 43-34.7 66-23.2 55.2-35 113.7-35 174S77.8 631 101.1 686.1c22.5 53.2 54.7 101 95.7 142s88.8 73.2 142 95.7c55.1 23.3 113.6 35.1 173.9 35.1 60.3 0 118.8-11.8 173.9-35.1 53.2-22.5 101-54.7 142-95.7s73.2-88.8 95.7-142c23.3-55.1 35.1-113.6 35.1-173.9 0-60.3-11.8-118.8-35.1-173.9z"  ></path><path d="M727.1 414.4c-21.6 0-36.9 20.9-30.6 41.5 5.5 17.8 8.4 36.7 8.4 56.2 0 106-86.2 192.2-192.2 192.2-106.1 0-192.4-86.5-192.2-192.6 0.2-105.8 86.8-192 192.6-191.8 19.1 0 37.6 2.9 55 8.1 20.6 6.2 41.5-9.1 41.5-30.6 0-14.1-9.2-26.6-22.6-30.6-23.8-7.2-48.7-10.9-74.2-10.9-68.4 0-132.8 26.7-181.2 75-48.4 48.4-75 112.7-75 181.2 0 68.4 26.7 132.8 75 181.2 48.4 48.4 112.7 75 181.2 75 68 0 133.1-26.9 181.2-75 48.4-48.4 75-112.7 75-181.2 0-25.9-3.8-51.2-11.2-75.2-4.1-13.3-16.6-22.5-30.7-22.5z"  ></path><path d="M689 335m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"  ></path></symbol><symbol id="icon-xifuxuanze" viewBox="0 0 1024 1024"><path d="M486.1952 899.6352H209.1008c-50.0736 0-90.7264-39.2192-90.7264-87.552V206.08c0-48.3328 40.6528-87.552 90.7264-87.552v0.0512h595.5072c50.0224 0 90.624 39.3728 90.624 87.552v352.8704h67.1744V206.1824c0-85.3504-70.8608-154.7776-157.9008-154.7776H209.0496C122.0608 51.5072 51.2 120.832 51.2 206.1824v606.0032c0 85.248 70.7584 154.624 157.9008 154.624h277.0944v-67.1744z"  ></path><path d="M960.1536 660.4288l-482.4064-286.72c-17.7152-10.496-29.1328-2.56-25.344 17.6128l102.6048 554.5984c3.7888 20.1728 16.4352 22.9888 28.2112 6.144 0 0 65.536-93.7984 119.296-151.0912l109.056 162.0992c6.656 9.8816 20.1216 12.4928 29.9008 5.632l51.3536-35.4816a22.0672 22.0672 0 0 0 5.7344-30.4128l-108.8-161.8432c68.9664-28.5696 166.4-52.6336 166.4-52.6336 19.8144-4.9152 21.6576-17.5104 3.9936-27.904"  ></path></symbol><symbol id="icon-margin" viewBox="0 0 1024 1024"><path d="M810.666667 85.333333 213.333333 85.333333C187.733333 85.333333 170.666667 68.266667 170.666667 42.666667s17.066667-42.666667 42.666667-42.666667l597.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S836.266667 85.333333 810.666667 85.333333z"  ></path><path d="M810.666667 1024 213.333333 1024c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667l597.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S836.266667 1024 810.666667 1024z"  ></path><path d="M981.333333 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L938.666667 213.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 597.333333C1024 836.266667 1006.933333 853.333333 981.333333 853.333333z"  ></path><path d="M42.666667 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L0 213.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 597.333333C85.333333 836.266667 68.266667 853.333333 42.666667 853.333333z"  ></path><path d="M810.666667 853.333333 213.333333 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L170.666667 213.333333c0-25.6 17.066667-42.666667 42.666667-42.666667l597.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667l0 597.333333C853.333333 836.266667 836.266667 853.333333 810.666667 853.333333zM256 768l512 0L768 256 256 256 256 768z"  ></path></symbol><symbol id="icon-padding" viewBox="0 0 1024 1024"><path d="M682.666667 256 341.333333 256C315.733333 256 298.666667 238.933333 298.666667 213.333333s17.066667-42.666667 42.666667-42.666667l341.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S708.266667 256 682.666667 256z"  ></path><path d="M682.666667 853.333333 341.333333 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667l341.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S708.266667 853.333333 682.666667 853.333333z"  ></path><path d="M810.666667 725.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L768 341.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 341.333333C853.333333 708.266667 836.266667 725.333333 810.666667 725.333333z"  ></path><path d="M213.333333 725.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L170.666667 341.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 341.333333C256 708.266667 238.933333 725.333333 213.333333 725.333333z"  ></path><path d="M981.333333 1024 42.666667 1024c-25.6 0-42.666667-17.066667-42.666667-42.666667L0 42.666667c0-25.6 17.066667-42.666667 42.666667-42.666667l938.666667 0c25.6 0 42.666667 17.066667 42.666667 42.666667l0 938.666667C1024 1006.933333 1006.933333 1024 981.333333 1024zM85.333333 938.666667l853.333333 0L938.666667 85.333333 85.333333 85.333333 85.333333 938.666667z"  ></path></symbol><symbol id="icon-shijian" viewBox="0 0 1024 1024"><path d="M871.39110343 152.60889657C775.39381248 56.61160448 647.76146034 3.74329458 512 3.74329458c-135.75913131 0-263.39497643 52.86714595-359.39110343 148.86443691S3.74329458 376.24086869 3.74329458 512s52.86714595 263.39497643 148.86443691 359.39110343 223.63197213 148.86443691 359.39110342 148.86443691c135.76146034 0 263.39497643-52.86714595 359.39110344-148.86443691S1020.25554034 647.75913131 1020.25554034 512 967.38839552 248.60502357 871.39110343 152.60889657zM534.25084302 973.08063403l0-84.36132637c0-12.87477475-10.43906901-23.31500885-23.31500885-23.31500885-12.8759387 0-23.31500885 10.43906901-23.31500886 23.31500885l0 84.26352527C251.76375523 960.65178397 62.22932878 770.46302265 50.92169501 534.33932914l82.32031686 0c12.87477475 0 23.31500885-10.43906901 23.31500886-23.31500885 0-12.87477475-10.43906901-23.31500885-23.31500886-23.31500886l-82.2306668 0c12.25304064-235.22136519 201.40092302-424.39718912 436.61180928-436.69447338l0 82.314496c0 12.8759387 10.43906901 23.31500885 23.31500885 23.31500885 12.87477475 0 23.31500885-10.43790507 23.31500885-23.31500885L534.25317091 50.91820203c236.19471587 11.26571918 426.4475136 200.8630181 438.73781192 436.79227448l-84.35783339 0c-12.8759387 0-23.31500885 10.43906901-23.31500885 23.31500886 0 12.8759387 10.43906901 23.31500885 23.31500885 23.31500885l84.44632064 0C961.73574258 771.17207893 771.0952357 961.78347918 534.25084302 973.08063403z"  ></path><path d="M534.86791907 501.89508381L534.86791907 223.27811299c0-12.8759387-10.43906901-23.31500885-23.31500885-23.31500885-12.87477475 0-23.31500885 10.43790507-23.31500885 23.31500885l0 289.7534521c0 8.94178645 5.04023381 16.69948416 12.43001401 20.61035064L718.44697771 751.41981298c4.55355847 4.55122944 10.51940637 6.82859065 16.4864182 6.82859065s11.93285973-2.27736121 16.4864182-6.82859065c9.10478677-9.10478677 9.10478677-23.8680485 0-32.97283641L534.86791907 501.89508381z"  ></path></symbol><symbol id="icon-shijiangeshizhuanhuan" viewBox="0 0 1024 1024"><path d="M534.665794 821.401316c-23.671203 5.961898-48.25962 9.489648-73.694698 9.489648-170.884211 0-309.948117-143.050264-309.948117-318.908603s139.028629-318.908602 309.948117-318.908602c157.020154 0 286.841355 120.895993 306.914252 276.928377 31.643918 1.023048 61.841458 7.76105 89.393186 19.579013-11.42991-213.428877-184.783546-383.536983-396.307438-383.536983-218.896889 0-396.942433 182.102456-396.942433 405.938195S242.074207 917.920557 460.935818 917.920557c44.484928 0 87.205981-7.61994 127.175389-21.483998-22.224825-21.30761-40.392738-46.742688-53.445413-75.035243z m-73.729976-581.479037c-24.023978 0-43.497158 19.47318-43.497157 43.497158v228.562924c0 3.563028 0.56444 6.984945 1.340545 10.265753 3.95108 19.931788 21.554553 34.99528 42.650497 34.99528h109.219141c35.065835-41.309953 83.360733-71.048886 138.393634-82.443518-5.78551-2.8222-12.170738-4.550798-19.04985-4.550798H504.468254V283.454715c0-24.059255-19.47318-43.532435-43.532436-43.532436z m298.729873 277.351707c-110.630241 0-200.305646 89.675406-200.305647 200.305647s89.675406 200.305646 200.305647 200.305646c110.630241 0 200.305646-89.675406 200.305646-200.305646s-89.675406-200.305646-200.305646-200.305647z m-156.138217 132.361181h212.229442l-50.411548-54.997623 35.171668-32.208357 123.682916 134.901161h-320.6372v-47.695181z m312.276433 135.924209h-212.229442l50.411548 54.997623-35.13639 32.208357-123.682916-134.901161H915.803907v47.695181z" fill="#333333" ></path></symbol><symbol id="icon-chaolianjie" viewBox="0 0 1024 1024"><path d="M431.096389 550.97364l-17.896602 17.84646a99.137905 99.137905 0 0 1-70.112848 28.980032 99.148138 99.148138 0 0 1-70.072938-29.087479l-179.344645-179.345668a98.961896 98.961896 0 0 1-0.104377-140.234905L249.117754 93.524047a99.130741 99.130741 0 0 1 70.1415-29.006638 99.121532 99.121532 0 0 1 70.094428 29.111015l179.345668 179.350784c38.956244 38.95215 38.797631 101.541651 0.104377 140.235928l-17.896602 17.793248-51.90516-51.90516 7.319709-7.368828c19.478633-19.423375 19.478633-50.907437 0.26299-70.117964L352.715227 147.740856c-19.456121-19.287275-50.861388-19.170618-70.172199 0.267083L156.100244 274.554076c-19.410072 19.324114-19.527752 50.703799-0.260943 70.1722l153.86739 153.867389c19.183921 19.031449 50.070372 19.221784 69.485561 0.420579l51.955302 51.959396h-0.051165z m161.869644-77.907371l17.793248-17.847483a99.130741 99.130741 0 0 1 70.1415-29.006638 99.121532 99.121532 0 0 1 70.094428 29.111015l179.400926 179.350784c38.902008 38.95215 38.743396 101.541651 0.054236 140.235928L774.892479 930.461627a99.117438 99.117438 0 0 1-140.232858-0.103354L455.30986 751.008512a98.960873 98.960873 0 0 1-0.049119-140.235928l17.793248-17.793248 44.00626 43.958164c-18.768459 19.423375-18.583241 50.287313 0.420579 69.485561l153.817248 153.817248c19.452028 19.288299 50.857295 19.171642 70.168106-0.26606L867.962178 733.478254c19.478633-19.473517 19.478633-50.90232 0.262989-70.168106l-153.813154-153.818271c-19.442818-19.305695-50.848085-19.210527-70.1722 0.212847l-7.369851 7.368828-43.903929-44.007283zM419.200454 363.256304a39.570227 39.570227 0 0 0-38.19695-10.257621 39.563064 39.563064 0 0 0-27.982308 27.953655 39.563064 39.563064 0 0 0 10.219759 38.207184l215.617779 215.617779a39.558971 39.558971 0 0 0 38.20616 10.219759 39.553854 39.553854 0 0 0 17.698081-66.178235L419.200454 363.256304z m0 0"  ></path></symbol><symbol id="icon-kexuejishu" viewBox="0 0 1024 1024"><path d="M376.19 833.94c-32.09 0-58.67-9.64-77.79-28.75-33.37-33.38-37.85-89.48-12.62-158 23-62.54 68.69-129.94 128.54-189.79s127.25-105.46 189.79-128.5c68.49-25.24 124.59-20.76 158 12.62s37.85 89.47 12.62 158C751.65 562 706 629.42 646.15 689.27S518.9 794.76 456.37 817.8c-29.26 10.78-56.25 16.14-80.18 16.14z" fill="#E9F1FF" ></path><path d="M564.28 678.63a0.23 0.23 0 0 0-0.07 0.07zM437.9 188.9l-0.5-0.23zM834.78 588.25c-0.13-0.29-0.26-0.58-0.4-0.87 0.15 0.28 0.27 0.62 0.4 0.87z" fill="#2C5CCB" ></path><path d="M510.39 511.42m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#2C5CCB" ></path><path d="M827.17 828.2c-45.6 45.6-122.26 51.72-215.85 17.24a535.12 535.12 0 0 1-57.05-25.07 674.45 674.45 0 0 1-63-36.57q-9.58-6.25-19.15-12.9c-18.74-13-37.38-27.22-55.75-42.42-21.95-18.15-43.52-37.78-64.41-58.67-20.68-20.68-40.13-42-58.13-63.76q-22.65-27.3-42.15-55.25-5-7.09-9.7-14.22a687.09 687.09 0 0 1-37.38-62.86 538 538 0 0 1-28.27-63.24c-14.73-40-22.05-76.86-22.05-109.56 0-43.85 13.17-80.17 39.29-106.29 45.6-45.6 122.26-51.72 215.85-17.24q13.4 4.94 27 10.87l0.81 0.35 0.15 0.07 0.5 0.23a32 32 0 1 1-27.68 57.72q-11.54-5-22.89-9.19c-67.81-25-121.93-24.09-148.46 2.45s-27.43 80.65-2.45 148.46q4.5 12.22 10 24.67a551 551 0 0 0 33.06 63.26q5.06 8.37 10.48 16.77c11.89 18.42 25.07 36.84 39.39 55.08a855.21 855.21 0 0 0 67.94 76.42 854 854 0 0 0 78 69.2c18.38 14.36 36.94 27.55 55.49 39.44q10 6.38 19.92 12.26a535 535 0 0 0 63.5 32.31q9.69 4.11 19.25 7.63c67.81 25 121.93 24.09 148.46-2.45 13.7-13.69 20.57-34.74 20.57-61.23 0-24.82-6-54.42-18.12-87.23q-3.58-9.74-7.79-19.6a32 32 0 1 1 57.82-27.48c0.14 0.29 0.27 0.58 0.4 0.87s0.14 0.32 0.2 0.48q5.12 11.88 9.43 23.62c34.49 93.57 28.37 170.23-17.23 215.83z" fill="#2C5CCB" ></path><path d="M844.41 410.48C812.93 495.93 750.55 588 668.78 669.81c-20.14 20.14-40.9 39.1-62 56.71l-0.09 0.08-0.24 0.2a32 32 0 1 1-42.2-48.1 0.23 0.23 0 0 1 0.07-0.07l0.58-0.49c19.93-16.58 39.57-34.5 58.66-53.59 75.33-75.37 132.44-159.25 160.8-236.2 25-67.81 24.09-121.93-2.44-148.46-13.7-13.7-34.75-20.57-61.23-20.57-24.83 0-54.43 6-87.24 18.12-77 28.35-160.83 85.47-236.2 160.84A854.9 854.9 0 0 0 329.09 475c-14.31 18.24-27.47 36.67-39.36 55.1q-4.17 6.46-8.13 12.93a559.47 559.47 0 0 0-33.41 62.73q-6.54 14.5-11.78 28.75c-25 67.81-24.09 121.93 2.45 148.46s80.65 27.43 148.46 2.45q12.82-4.73 25.89-10.51h0.06A32 32 0 1 1 440 833q-15.37 6.86-30.52 12.43c-40 14.73-76.86 22-109.56 22-43.85 0-80.17-13.17-106.29-39.29-45.6-45.6-51.72-122.26-17.24-215.85a543.47 543.47 0 0 1 30.25-67A699.22 699.22 0 0 1 244.22 483q3.57-5.31 7.28-10.62 19.44-27.88 42.13-55.28c18.07-21.82 37.59-43.26 58.36-64 81.78-81.77 173.88-144.15 259.33-175.63 93.59-34.48 170.25-28.36 215.85 17.24s51.72 122.18 17.24 215.77z" fill="#2C5CCB" ></path></symbol><symbol id="icon-shujujuzhen" viewBox="0 0 1024 1024"><path d="M192 224h128v128H192z m0 448h128v128H192z m0-224h128v128H192z m-64-288h64V96H64v832h128v-64h-64z m576 64h128v128H704z m0 224h128v128H704z m128-288h64v704h-64v64h128V96H832z m-384 64h128v128H448z m256 448h128v128H704zM448 448h128v128H448z m0 224h128v128H448z" fill="#333333" ></path></symbol><symbol id="icon-shitujuzhen_o" viewBox="0 0 1024 1024"><path d="M213.333333 426.666667h170.666667v170.666666H213.333333v-170.666666z m42.666667 42.666666v85.333334h85.333333v-85.333334H256zM213.333333 213.333333h170.666667v170.666667H213.333333V213.333333z m42.666667 42.666667v85.333333h85.333333V256H256z m170.666667-42.666667h170.666666v170.666667h-170.666666V213.333333z m42.666666 42.666667v85.333333h85.333334V256h-85.333334z m-42.666666 170.666667h170.666666v170.666666h-170.666666v-170.666666z m42.666666 42.666666v85.333334h85.333334v-85.333334h-85.333334z m170.666667-256h170.666667v170.666667h-170.666667V213.333333z m42.666667 42.666667v85.333333h85.333333V256h-85.333333z m-42.666667 170.666667h170.666667v170.666666h-170.666667v-170.666666z m42.666667 42.666666v85.333334h85.333333v-85.333334h-85.333333z m-42.666667 170.666667h170.666667v170.666667h-170.666667v-170.666667z m42.666667 42.666667v85.333333h85.333333v-85.333333h-85.333333z m-256-42.666667h170.666666v170.666667h-170.666666v-170.666667z m42.666666 42.666667v85.333333h85.333334v-85.333333h-85.333334z m-256-42.666667h170.666667v170.666667H213.333333v-170.666667z m42.666667 42.666667v85.333333h85.333333v-85.333333H256z" fill="#444444" ></path></symbol><symbol id="icon-xuanfu1" viewBox="0 0 1024 1024"><path d="M768 256h102.4a102.4 102.4 0 0 1 102.4 102.4v512a102.4 102.4 0 0 1-102.4 102.4H358.4a102.4 102.4 0 0 1-102.4-102.4v-102.4H153.6a102.4 102.4 0 0 1-102.4-102.4V153.6a102.4 102.4 0 0 1 102.4-102.4h512a102.4 102.4 0 0 1 102.4 102.4v102.4z m-102.4-143.36H153.6a40.96 40.96 0 0 0-40.96 40.96v512a40.96 40.96 0 0 0 40.96 40.96h102.4V358.4a102.4 102.4 0 0 1 102.4-102.4h348.16V153.6a40.96 40.96 0 0 0-40.96-40.96z m-307.2 204.8a40.96 40.96 0 0 0-40.96 40.96v512a40.96 40.96 0 0 0 40.96 40.96h512a40.96 40.96 0 0 0 40.96-40.96V358.4a40.96 40.96 0 0 0-40.96-40.96H358.4z"  ></path></symbol><symbol id="icon-youxuanfu-copy" viewBox="0 0 1024 1024"><path d="M640 209.066667H349.866667c-46.933333 0-89.6 42.666667-89.6 93.866666v328.533334C260.266667 682.666667 298.666667 725.333333 349.866667 725.333333H640v25.6c0 38.4-29.866667 72.533333-68.266667 72.533334H217.6c-38.4 0-68.266667-29.866667-68.266667-72.533334V209.066667c0-38.4 29.866667-72.533333 68.266667-72.533334h354.133333c38.4 4.266667 68.266667 34.133333 68.266667 72.533334z m0 0" fill="#0A6ECB" ></path><path d="M366.933333 256h422.4c25.6 0 42.666667 21.333333 42.666667 46.933333v328.533334c0 25.6-21.333333 46.933333-42.666667 46.933333H366.933333c-25.6 0-42.666667-21.333333-42.666666-46.933333V302.933333c0-25.6 17.066667-46.933333 42.666666-46.933333z m0 0" fill="#0A6ECB" ></path></symbol><symbol id="icon-xuanfu" viewBox="0 0 1024 1024"><path d="M341.632 599.296l-113.152 59.776 270.336 142.912 270.336-142.912-113.152-59.776 68.48-36.224 128.128 67.712a32 32 0 0 1 0 56.576L513.792 866.56a32 32 0 0 1-29.952 0L145.024 687.36a32 32 0 0 1 0-56.576l128.128-67.712 68.48 36.224z" fill="#585858" ></path><path d="M498.816 260.224L228.48 403.072l270.336 142.912 270.336-142.912-270.336-142.848z m14.976-64.512l338.816 179.072a32 32 0 0 1 0 56.576L513.792 610.56a32 32 0 0 1-29.952 0L145.024 431.36a32 32 0 0 1 0-56.576L483.84 195.712a32 32 0 0 1 29.952 0z" fill="#407CD5" ></path></symbol><symbol id="icon-xuanfuanniu" viewBox="0 0 1024 1024"><path d="M977.066667 618.666667c0-4.266667-4.266667-8.533333-8.533334-8.533334l-59.733333-34.133333-396.8 230.4-396.8-230.4-59.733333 34.133333c-4.266667 0-8.533333 4.266667-8.533334 8.533334-4.266667 4.266667-4.266667 8.533333-4.266666 12.8 0 4.266667 0 8.533333 4.266666 12.8s4.266667 8.533333 8.533334 8.533333L512 917.333333l456.533333-264.533333c4.266667 0 8.533333-4.266667 8.533334-8.533333s4.266667-8.533333 4.266666-12.8c0-4.266667 0-8.533333-4.266666-12.8z" fill="#8DC5FF" ></path><path d="M977.066667 388.266667c0-4.266667-4.266667-8.533333-8.533334-8.533334L537.6 115.2c-8.533333-4.266667-17.066667-8.533333-25.6-8.533333s-17.066667 4.266667-25.6 8.533333L55.466667 379.733333c-4.266667 0-8.533333 4.266667-8.533334 8.533334-4.266667 4.266667-4.266667 8.533333-4.266666 12.8 0 4.266667 0 8.533333 4.266666 12.8 0 4.266667 4.266667 8.533333 8.533334 8.533333L512 704l456.533333-281.6c4.266667-4.266667 8.533333-4.266667 8.533334-8.533333 4.266667-4.266667 4.266667-8.533333 4.266666-12.8 0-4.266667 0-8.533333-4.266666-12.8z" fill="#2D8CF0" ></path></symbol><symbol id="icon-youxuanfu-copy-copy" viewBox="0 0 1024 1024"><path d="M640 209.066667H349.866667c-46.933333 0-89.6 42.666667-89.6 93.866666v328.533334C260.266667 682.666667 298.666667 725.333333 349.866667 725.333333H640v25.6c0 38.4-29.866667 72.533333-68.266667 72.533334H217.6c-38.4 0-68.266667-29.866667-68.266667-72.533334V209.066667c0-38.4 29.866667-72.533333 68.266667-72.533334h354.133333c38.4 4.266667 68.266667 34.133333 68.266667 72.533334z m0 0" fill="#8a8a8a" ></path><path d="M366.933333 256h422.4c25.6 0 42.666667 21.333333 42.666667 46.933333v328.533334c0 25.6-21.333333 46.933333-42.666667 46.933333H366.933333c-25.6 0-42.666667-21.333333-42.666666-46.933333V302.933333c0-25.6 17.066667-46.933333 42.666666-46.933333z m0 0" fill="#8a8a8a" ></path></symbol><symbol id="icon-tabs" viewBox="0 0 1024 1024"><path d="M950.95466667 390.03022222H574.464c-10.35377778 0-19.79733333-5.91644445-24.34844445-15.13244444L430.08 129.36533333H129.93422222c-35.15733333 0-63.71555555 28.55822222-63.71555555 63.71555556v637.26933333c0 35.15733333 28.55822222 63.71555555 63.71555555 63.71555556h764.70044445c35.15733333 0 63.71555555-28.55822222 63.71555555-63.71555556V397.53955555c0-4.096-3.29955555-7.50933333-7.39555555-7.50933333zM129.93422222 65.64977778h328.47644445c6.94044445 0 13.42577778 3.98222222 16.49777778 10.24l116.50844444 238.25066667c3.64088889 7.50933333 11.264 12.17422222 19.56977778 12.17422222h403.68355555c4.20977778 0 7.50933333 3.41333333 7.50933333 7.50933333v496.52622222c0 70.42844445-57.11644445 127.43111111-127.4311111 127.43111111H129.93422222c-70.42844445 0-127.43111111-57.11644445-127.43111111-127.43111111V193.08088889c0-70.42844445 57.11644445-127.43111111 127.43111111-127.43111111z m390.82666667 0h159.40266666c1.25155555 0 2.50311111 0.68266667 3.18577778 1.82044444l124.928 210.03377778c0.68266667 1.13777778-0.11377778 2.50311111-1.47911111 2.50311111H652.17422222c-7.73688889 0-14.90488889-4.096-18.77333333-10.69511111L513.47911111 69.29066667c-0.79644445-1.36533333 0.11377778-3.18577778 1.70666667-3.29955556l5.57511111-0.34133333z m209.80622222 0h164.18133334c70.42844445 0 127.43111111 57.11644445 127.4311111 127.43111111v82.03377778c0 2.73066667-2.16177778 4.89244445-4.89244444 4.89244444H861.184c-5.57511111 0-10.69511111-2.95822222-13.53955555-7.73688889L727.72266667 70.54222222c-0.45511111-0.79644445-0.56888889-1.82044445-0.22755556-2.73066667 0.34133333-1.36533333 1.59288889-2.16177778 3.072-2.16177777z"  ></path></symbol><symbol id="icon-xiyu" viewBox="0 0 1024 1024"><path d="M263.202133 470.254933H743.765333a75.093333 75.093333 0 0 1 73.864534 88.541867l-46.08 253.44a75.093333 75.093333 0 0 1-73.864534 61.6448H309.248a75.093333 75.093333 0 0 1-73.864533-61.6448l-46.08-253.44a75.093333 75.093333 0 0 1 73.864533-88.541867z" fill="#94B3FF" ></path><path d="M745.403733 470.357333l-1.706666-0.1024a75.093333 75.093333 0 0 1 73.898666 88.541867l-46.08 253.44a75.093333 75.093333 0 0 1-73.864533 61.6448H309.248a75.093333 75.093333 0 0 1-73.864533-61.6448l-2.184534-11.844267 2.6624 0.1024H624.298667a75.093333 75.093333 0 0 0 73.864533-61.6448l46.08-253.44a75.093333 75.093333 0 0 0 1.194667-15.086933z" fill="#6B91EF" ></path><path d="M745.7792 470.254933a73.386667 73.386667 0 0 1 72.192 86.528l-46.6944 256.853334a73.386667 73.386667 0 0 1-72.192 60.245333H307.848533a73.386667 73.386667 0 0 1-72.192-60.245333l-46.6944-256.853334a73.386667 73.386667 0 0 1 72.192-86.528H745.813333z m0 31.573334H261.12a41.847467 41.847467 0 0 0-41.710933 44.782933l0.546133 4.539733 46.728533 256.853334c3.310933 18.363733 18.3296 32.085333 36.522667 34.0992l4.608 0.238933h391.236267c18.6368 0 34.816-12.322133 40.072533-29.866667l1.058133-4.471466 46.728534-256.853334a41.847467 41.847467 0 0 0-36.625067-49.083733l-4.539733-0.238933z" fill="#333333" ></path><path d="M136.533333 433.5616m55.057067 0l623.752533 0q55.057067 0 55.057067 55.057067l0-0.034134q0 55.057067-55.057067 55.057067l-623.752533 0q-55.057067 0-55.057067-55.057067l0 0.034134q0-55.057067 55.057067-55.057067Z" fill="#94B3FF" ></path><path d="M754.346667 433.5616h60.996266a55.022933 55.022933 0 1 1 0 110.08h-81.7152l20.6848-110.08z" fill="#6B91EF" ></path><path d="M815.342933 433.5616a55.022933 55.022933 0 1 1 0 110.08H191.5904a55.057067 55.057067 0 0 1 0-110.08h623.752533z m0 31.573333H191.5904a23.483733 23.483733 0 0 0-3.4816 46.6944l3.4816 0.273067h623.752533a23.483733 23.483733 0 0 0 3.4816-46.728533l-3.4816-0.238934z" fill="#333333" ></path><path d="M283.306667 396.868267m56.32 0l34.133333 0q56.32 0 56.32 56.32l0 107.52q0 56.32-56.32 56.32l-34.133333 0q-56.32 0-56.32-56.32l0-107.52q0-56.32 56.32-56.32Z" fill="#FFFFFF" ></path><path d="M377.890133 397.038933l-4.130133-0.170666c31.095467 0 56.32 25.258667 56.32 56.32v107.52a56.32 56.32 0 0 1-56.32 56.32h-34.133333a56.32 56.32 0 0 1-52.224-35.1232l4.164266 0.170666h52.906667a37.546667 37.546667 0 0 0 37.546667-37.546666v-126.293334c0-7.509333-1.467733-14.677333-4.096-21.1968z" fill="#E7E7E7" ></path><path d="M375.022933 396.868267c30.4128 0 55.057067 24.644267 55.057067 55.057066v110.08c0 30.378667-24.644267 55.022933-55.022933 55.022934H338.3296c-30.378667 0-55.022933-24.644267-55.022933-55.022934V451.925333c0-30.378667 24.644267-55.057067 55.022933-55.057066h36.693333z m0 31.573333H338.3296a23.483733 23.483733 0 0 0-23.210667 20.002133l-0.273066 3.4816v110.08c0 11.776 8.704 21.538133 20.036266 23.210667l3.447467 0.273067h36.693333a23.483733 23.483733 0 0 0 23.2448-20.002134l0.273067-3.4816V451.925333a23.483733 23.483733 0 0 0-20.036267-23.210666l-3.4816-0.273067zM703.6928 102.4c72.635733 0 113.4592 32.768 116.292267 95.061333l0.136533 7.0656v240.913067h-31.5392V204.526933c0-48.264533-26.0096-70.5536-84.8896-70.5536-56.456533 0-82.705067 20.48-84.7872 64.648534l-0.136533 5.905066h-31.5392C587.229867 137.659733 628.3264 102.4 703.6928 102.4z" fill="#333333" ></path><path d="M601.4976 164.9664a58.026667 58.026667 0 0 0-39.3216 15.36l-14.677333 13.5168c-12.970667 11.946667-20.3776 28.808533-20.3776 46.4896 0 25.088 20.343467 45.397333 45.397333 45.397333h64.580267a45.397333 45.397333 0 0 0 45.397333-45.397333c0-18.568533-8.635733-36.078933-23.381333-47.377067l-19.899734-15.223466a62.088533 62.088533 0 0 0-37.717333-12.765867z m0 31.5392c5.358933 0 10.581333 1.4336 15.223467 4.096l3.310933 2.184533 19.933867 15.223467a28.0576 28.0576 0 0 1 10.990933 22.3232c0 6.690133-4.778667 12.288-11.0592 13.585067l-2.798933 0.273066h-64.546134a13.858133 13.858133 0 0 1-13.892266-13.858133c0-7.3728 2.594133-14.472533 7.168-20.0704l3.072-3.208533 14.677333-13.550934a26.487467 26.487467 0 0 1 17.92-6.997333z" fill="#333333" ></path><path d="M547.84 307.712a16.042667 16.042667 0 0 1 15.906133 12.970667l0.273067 2.798933v36.693333a15.9744 15.9744 0 0 1-16.145067 15.803734 16.042667 16.042667 0 0 1-15.906133-12.970667l-0.238933-2.833067V323.4816c0-8.704 7.236267-15.7696 16.145066-15.7696zM602.897067 307.712a16.042667 16.042667 0 0 1 15.906133 12.970667l0.238933 2.798933v36.693333a15.9744 15.9744 0 0 1-16.145066 15.803734 16.042667 16.042667 0 0 1-15.872-12.970667l-0.273067-2.833067V323.4816c0-8.704 7.236267-15.7696 16.145067-15.7696zM657.954133 307.712a16.042667 16.042667 0 0 1 15.872 12.970667l0.273067 2.798933v36.693333a15.9744 15.9744 0 0 1-16.145067 15.803734 16.042667 16.042667 0 0 1-15.906133-12.970667l-0.238933-2.833067V323.4816c0-8.704 7.236267-15.7696 16.145066-15.7696z" fill="#333333" ></path><path d="M271.36 601.531733a15.7696 15.7696 0 0 1 17.681067 9.8304l0.750933 2.730667 20.138667 105.915733a15.7696 15.7696 0 0 1-30.242134 8.6016l-0.785066-2.730666-20.104534-105.8816a15.7696 15.7696 0 0 1 12.561067-18.432z" fill="#A7C1FF" ></path><path d="M583.5776 203.502933l-14.677333 13.550934a31.6416 31.6416 0 0 0-10.24 23.278933c0 7.645867 6.212267 13.858133 13.892266 13.858133h64.546134a13.858133 13.858133 0 0 0 13.858133-13.858133 28.0576 28.0576 0 0 0-10.990933-22.3232l-19.933867-15.223467a30.5152 30.5152 0 0 0-18.5344-6.280533 26.487467 26.487467 0 0 0-17.92 6.997333z" fill="#F4BE59" ></path></symbol><symbol id="icon-quxiaoshangzuan" viewBox="0 0 1024 1024"><path d="M547.584 252.064l-35.584-20.48-30.016 17.28 0-53.696-93.632-0.96 125.792-124.8 121.536 127.232-88.096-0.896 0 56.32zM32.512 825.888l-31.776-55.552 226.976-129.792-155.52-89.504c-10.016-5.76-10.88-19.55200001-2.496-26.656l2.528-1.76 423.424-243.776c8.864-5.12 19.52-5.76 28.832-1.92l3.904 1.92 165.376 95.2 253.12-144.8 31.808 55.552-220.704 126.208 193.792 111.616a16.416 16.416 0 0 1 2.528 26.656l-2.528 1.76-423.392 243.776c-8.864 5.12-19.52 5.76-28.832 1.92l-3.904-1.92-203.68-117.28-259.456 148.352z m261.12-223.04l188.384-107.712 0-94.912 29.984-17.28 35.584 20.48L547.584 457.6l80.224-45.824L512 345.088l-333.024 191.744 114.656 66.016z m218.4 125.696L845.024 536.832l-152.99199999-88.096-144.41600001 82.592-0.032 138.88-35.584 20.48-30.016-17.28 0-104.576-124.096 70.976L512 728.54400001z m-30.048 226.04799999l0-129.79199999L512 842.07999999l35.584-20.47999999L547.584 954.56l-65.6 0z" fill="#979BA5" ></path></symbol><symbol id="icon-quxiaoxiazuan" viewBox="0 0 1024 1024"><path d="M476.416 771.936l35.584 20.48 30.016-17.28v53.696l93.632 0.96-125.792 124.8-121.536-127.232 88.096 0.896v-56.32zM991.488 198.112l31.776 55.552-226.976 129.792 155.52 89.504c10.016 5.76 10.88 19.552 2.496 26.656l-2.528 1.76-423.424 243.776c-8.864 5.12-19.52 5.76-28.832 1.92l-3.904-1.92-165.376-95.2-253.12 144.8-31.808-55.552 220.704-126.208-193.792-111.616a16.416 16.416 0 0 1-2.528-26.656l2.528-1.76 423.392-243.776c8.864-5.12 19.52-5.76 28.832-1.92l3.904 1.92 203.68 117.28 259.456-148.352z m-261.12 223.04l-188.384 107.712v94.912l-29.984 17.28-35.584-20.48V566.4l-80.224 45.824L512 678.912l333.024-191.744-114.656-66.016z m-218.4-125.696L178.976 487.168l152.992 88.096 144.416-82.592 0.032-138.88 35.584-20.48 30.016 17.28v104.576l124.096-70.976L512 295.456z m30.048-226.048v129.792L512 181.92l-35.584 20.48V69.44h65.6z" fill="#979BA5" ></path></symbol><symbol id="icon-linkage" viewBox="0 0 1024 1024"><path d="M 876.8 147.2 c -112 -112 -294.4 -112 -409.6 0 l -137.6 137.6 l 44.8 44.8 L 512 195.2 c 86.4 -86.4 230.4 -86.4 316.8 0 s 86.4 230.4 0 316.8 l -137.6 137.6 l 44.8 44.8 l 137.6 -137.6 c 115.2 -112 115.2 -294.4 3.2 -409.6 Z M 512 828.8 c -86.4 86.4 -230.4 86.4 -316.8 0 s -86.4 -230.4 0 -316.8 l 137.6 -137.6 L 288 329.6 l -137.6 137.6 c -112 112 -112 297.6 0 409.6 s 294.4 112 409.6 0 l 137.6 -137.6 l -44.8 -44.8 l -140.8 134.4 Z m 182.4 -454.4 l -44.8 -44.8 l -316.8 316.8 l 44.8 44.8 l 316.8 -316.8 Z"  ></path></symbol><symbol id="icon-xiazuan" viewBox="0 0 1024 1024"><path d="M506.88 546.133333c18.773333 0 34.133333-15.36 34.133333-34.133333V46.08c0-18.773333-15.36-34.133333-34.133333-34.133333s-34.133333 15.36-34.133333 34.133333V512c0 18.773333 15.36 34.133333 34.133333 34.133333z"  ></path><path d="M989.866667 464.213333l-336.213334-150.186666c-17.066667-8.533333-37.546667 0-44.373333 17.066666-8.533333 17.066667 0 37.546667 17.066667 44.373334l256 114.346666-373.76 121.173334-365.226667-129.706667L392.533333 373.76c17.066667-6.826667 25.6-27.306667 17.066667-44.373333-6.826667-17.066667-27.306667-25.6-44.373333-17.066667L37.546667 453.973333c-11.946667 5.12-20.48 17.066667-20.48 32.426667s8.533333 25.6 22.186666 30.72L494.933333 680.96c3.413333 1.706667 6.826667 1.706667 11.946667 1.706667 3.413333 0 6.826667 0 10.24-1.706667L986.453333 529.066667c13.653333-5.12 22.186667-17.066667 23.893334-30.72 0-15.36-8.533333-27.306667-20.48-34.133334zM590.506667 855.04L541.013333 904.533333v-134.826666c0-18.773333-15.36-34.133333-34.133333-34.133334s-34.133333 15.36-34.133333 34.133334v124.586666l-39.253334-39.253333c-13.653333-13.653333-34.133333-13.653333-47.786666 0s-13.653333 34.133333 0 47.786667l102.4 102.4c6.826667 6.826667 15.36 10.24 23.893333 10.24 8.533333 0 17.066667-3.413333 23.893333-10.24l102.4-102.4c13.653333-13.653333 13.653333-34.133333 0-47.786667-11.946667-13.653333-34.133333-13.653333-47.786666 0z"  ></path></symbol><symbol id="icon-shangzuan" viewBox="0 0 1024 1024"><path d="M520.533333 780.8c-19.2 0-34.133333 14.933333-34.133333 34.133333V981.333333c0 19.2 14.933333 34.133333 34.133333 34.133334 19.2 0 34.133333-14.933333 34.133334-34.133334v-166.4c0-19.2-14.933333-34.133333-34.133334-34.133333zM17.066667 533.333333c2.133333 12.8 10.666667 25.6 23.466666 29.866667l469.333334 151.466667c4.266667 2.133333 6.4 2.133333 10.666666 2.133333s8.533333 0 12.8-2.133333l456.533334-164.266667c12.8-4.266667 21.333333-14.933333 21.333333-29.866667s-8.533333-27.733333-21.333333-32L661.333333 347.733333c-17.066667-8.533333-38.4 0-44.8 17.066667-8.533333 17.066667 0 38.4 17.066667 44.8l249.6 106.666667-364.8 130.133333-373.333333-121.6 256-115.2c17.066667-6.4 25.6-27.733333 17.066666-44.8-6.4-17.066667-27.733333-25.6-44.8-17.066667l-337.066666 149.333334c-10.666667 10.666667-19.2 21.333333-19.2 36.266666zM437.333333 172.8l49.066667-49.066667v411.733334c0 19.2 14.933333 34.133333 34.133333 34.133333 19.2 0 34.133333-14.933333 34.133334-34.133333V132.266667L593.066667 170.666667c12.8 12.8 34.133333 12.8 46.933333 0s12.8-34.133333 0-46.933334L539.733333 21.333333c-6.4-6.4-14.933333-10.666667-23.466666-10.666666-8.533333 0-17.066667 4.266667-23.466667 10.666666l-102.4 102.4c-12.8 12.8-12.8 34.133333 0 46.933334 10.666667 14.933333 32 14.933333 46.933333 2.133333z"  ></path></symbol><symbol id="icon-quxiaoliandong" viewBox="0 0 1024 1024"><path d="M611.754667 710.613333a38.144 38.144 0 0 1 0 53.930667l-123.818667 123.818667c-95.530667 95.530667-256.341333 95.530667-351.872 0-95.488-95.488-95.488-256.341333 0-351.829334l123.818667-123.818666a38.144 38.144 0 1 1 53.973333 53.930666L190.037333 590.506667c-70.528 73.685333-74.069333 177.28-3.626666 247.637333 70.4 70.4 170.453333 72.234667 247.594666-3.669333l123.818667-123.818667a38.144 38.144 0 0 1 53.930667 0z m-199.509334-397.226666a38.144 38.144 0 0 1 0-53.930667l123.818667-123.818667c95.488-95.530667 256.341333-95.530667 351.872 0 95.488 95.488 95.488 256.341333 0 351.829334l-123.818667 123.818666a38.144 38.144 0 1 1-53.930666-53.930666l123.776-123.818667c70.528-73.685333 74.069333-177.28 3.669333-247.637333-70.357333-70.4-170.453333-72.234667-247.594667 3.669333l-123.861333 123.818667a38.144 38.144 0 0 1-53.930667 0z m232.362667 512.426666a32.682667 32.682667 0 0 1 65.408 0v65.450667a32.682667 32.682667 0 1 1-65.408 0v-65.408z m208.042667 27.434667a33.621333 33.621333 0 0 1-47.445334-0.554667l-45.482666-46.421333a33.28 33.28 0 0 1 47.36-46.890667l45.909333 45.994667a33.621333 33.621333 0 0 1-0.341333 47.872z m-55.466667-176.384c0-20.053333 16.298667-36.309333 36.352-36.309333H891.733333a36.352 36.352 0 0 1 0 72.661333h-58.154666a36.352 36.352 0 0 1-36.309334-36.352zM317.013333 130.773333a32.682667 32.682667 0 1 1 65.408 0v65.408a32.682667 32.682667 0 0 1-65.408 0V130.773333z m-142.677333 37.973334A33.621333 33.621333 0 0 1 221.866667 169.386667l45.482666 46.421333a33.28 33.28 0 0 1-47.36 46.848L173.994667 216.704a33.621333 33.621333 0 0 1 0.341333-47.914667zM98.986667 345.173333c0-20.053333 16.256-36.352 36.352-36.352h58.112a36.352 36.352 0 0 1 0 72.704H135.338667a36.352 36.352 0 0 1-36.352-36.352z"  ></path></symbol><symbol id="icon-edit-outline" viewBox="0 0 1026 1024"><path d="M307.933767 709.191401l55.608246-121.906912 70.215853 67.788777-125.824099 54.118135z m95.818675-171.645022l366.409348-352.874171 82.001279 80.116062-365.732025 352.095249-82.678602-79.33714z m550.042994-370.90226l-50.505744 48.372175-81.854525-80.116062 49.704244-47.593254c8.003704-7.958549 23.435387-6.513593 32.150281 2.144858l48.281866 46.182162c5.147657 5.03477 8.071436 11.559652 8.071436 18.039379 0.011289 5.046059-2.201301 9.36964-5.847558 12.970742zM313.792614 530.299019c-0.745056 0.767633-1.467534 1.478823-2.21259 2.889913L259.640613 717.217683c-2.923779 10.78073 0 22.340381 8.071436 30.310219 6.581325 5.779826 14.607607 9.290618 23.390233 9.290619 2.935068 0 5.113791-0.699901 8.03757-1.399802l190.147239-49.749399h0.79021a8.048859 8.048859 0 0 0 5.791115-2.178724l507.721574-489.208069c15.28493-14.40441 23.356366-33.888744 23.356367-55.551803 0-24.519105-10.927483-49.03821-29.215214-67.077588l-48.281865-46.182163c-19.010208-18.039378-43.935707-28.853974-69.572396-28.853974-22.577445 0-43.145497 7.935972-57.707948 23.074149L314.503803 528.109007c-0.71119 0.699901-0.71119 1.478823-0.711189 2.190012zM100.932466 0C45.358086 0 0 44.70334 0 99.555242V923.530372c0 54.806747 45.358086 99.555242 100.932466 99.555241h806.082505c55.57438 0 100.864734-44.748495 100.864734-99.555241V397.543645h-86.290994v451.729511c0 49.049498-40.221718 87.939147-89.214772 87.939147H175.539632c-49.004344 0-89.214772-38.889648-89.214773-87.939147V173.157711c0-48.338309 40.210429-88.040745 89.214773-88.040745h457.904443V0H100.932466z"  ></path></symbol><symbol id="icon-edit" viewBox="0 0 1026 1024"><path d="M307.933767 709.191401l55.608246-121.906912 70.215853 67.788777-125.824099 54.118135z m95.818675-171.645022l366.409348-352.874171 82.001279 80.116062-365.732025 352.095249-82.678602-79.33714z m550.042994-370.90226l-50.505744 48.372175-81.854525-80.116062 49.704244-47.593254c8.003704-7.958549 23.435387-6.513593 32.150281 2.144858l48.281866 46.182162c5.147657 5.03477 8.071436 11.559652 8.071436 18.039379 0.011289 5.046059-2.201301 9.36964-5.847558 12.970742zM313.792614 530.299019c-0.745056 0.767633-1.467534 1.478823-2.21259 2.889913L259.640613 717.217683c-2.923779 10.78073 0 22.340381 8.071436 30.310219 6.581325 5.779826 14.607607 9.290618 23.390233 9.290619 2.935068 0 5.113791-0.699901 8.03757-1.399802l190.147239-49.749399h0.79021a8.048859 8.048859 0 0 0 5.791115-2.178724l507.721574-489.208069c15.28493-14.40441 23.356366-33.888744 23.356367-55.551803 0-24.519105-10.927483-49.03821-29.215214-67.077588l-48.281865-46.182163c-19.010208-18.039378-43.935707-28.853974-69.572396-28.853974-22.577445 0-43.145497 7.935972-57.707948 23.074149L314.503803 528.109007c-0.71119 0.699901-0.71119 1.478823-0.711189 2.190012zM100.932466 0C45.358086 0 0 44.70334 0 99.555242V923.530372c0 54.806747 45.358086 99.555242 100.932466 99.555241h806.082505c55.57438 0 100.864734-44.748495 100.864734-99.555241V397.543645h-86.290994v451.729511c0 49.049498-40.221718 87.939147-89.214772 87.939147H175.539632c-49.004344 0-89.214772-38.889648-89.214773-87.939147V173.157711c0-48.338309 40.210429-88.040745 89.214773-88.040745h457.904443V0H100.932466z"  ></path></symbol><symbol id="icon-xiangqing1" viewBox="0 0 1024 1024"><path d="M449.024 896h-288c-17.92 0-32-14.72-32-32v-704c0-17.92 14.08-32 32-32h640c17.28 0 32 14.08 32 32V448a32 32 0 0 0 64 0V128c0-35.2-28.8-64-64-64h-704c-35.2 0-64 28.8-64 64v768c0 35.2 28.8 64 64 64h320a32 32 0 0 0 0-64zM946.176 901.824l-83.2-83.2c-6.4-6.4-12.8-6.4-19.2-6.4-19.2 0-32 12.8-32 32 0 6.4 0 12.8 6.4 19.2l83.2 83.2c6.4 6.4 12.8 12.8 25.6 12.8 19.2 0 32-12.8 32-32 0-6.4-6.4-19.2-12.8-25.6z"  ></path><path d="M703.936 510.592a192 192 0 1 0 0 384 192 192 0 0 0 0-384z m0 320a128 128 0 1 1-0.064-255.936 128 128 0 0 1 0.064 255.936zM736.384 319.36H223.36a31.552 31.552 0 0 1-31.488-31.488v-1.024c0-17.344 14.144-31.488 31.488-31.488h513.024c17.344 0 31.488 14.144 31.488 31.488v1.024c0 17.28-14.208 31.488-31.488 31.488zM734.336 447.36H221.376a31.552 31.552 0 0 1-31.488-31.488v-1.024c0-17.344 14.144-31.488 31.488-31.488h513.024c17.344 0 31.488 14.144 31.488 31.488v1.024c0 17.28-14.208 31.488-31.552 31.488zM416 575.04H223.04a31.552 31.552 0 0 1-31.488-31.488v-1.024c0-17.344 14.144-31.488 31.488-31.488H416c17.344 0 31.488 14.144 31.488 31.488v1.024a31.552 31.552 0 0 1-31.488 31.488z"  ></path></symbol><symbol id="icon-weibiaoti-1" viewBox="0 0 1024 1024"><path d="M512 19.413487C47.059275 19.413487 19.413487 47.059275 19.413487 512s27.645788 492.586513 492.586513 492.586513 492.586513-27.645788 492.586513-492.586513S976.940725 19.413487 512 19.413487z" fill="#1296db" ></path></symbol><symbol id="icon-weibiaoti-" viewBox="0 0 1036 1024"><path d="M512.072842 512m-505.929333 0a505.929334 505.929334 0 1 0 1011.858667 0 505.929334 505.929334 0 1 0-1011.858667 0Z" fill="#ffffff" ></path><path d="M512.072842 1024C28.726387 1024 0.072842 995.346455 0.072842 512S28.726387 0 512.072842 0s512 28.653545 512 512-28.653545 512-512 512z m0-1011.858667C35.525534 12.141333 12.214175 35.452691 12.214175 512s23.311359 499.858667 499.858667 499.858667 499.858667-23.311359 499.858667-499.858667S988.620151 12.141333 512.072842 12.141333z"  ></path></symbol><symbol id="icon-touming" viewBox="0 0 1024 1024"><path d="M0 819.2h204.8V1024H0zM0 0h204.8v204.8H0zM0 409.6h204.8v204.8H0z" fill="#999999" ></path><path d="M204.8 204.8h204.8v204.8H204.8zM204.8 614.4h204.8v204.8H204.8z" fill="#B7B7B7" ></path><path d="M409.6 0h204.8v204.8H409.6zM409.6 409.6h204.8v204.8H409.6z" fill="#C6C6C6" ></path><path d="M614.4 204.8h204.8v204.8h-204.8zM614.4 614.4h204.8v204.8h-204.8z" fill="#DDDDDD" ></path><path d="M409.6 819.2h204.8V1024H409.6z" fill="#C6C6C6" ></path><path d="M819.2 0H1024v204.8h-204.8zM819.2 409.6H1024v204.8h-204.8zM819.2 819.2H1024V1024h-204.8z" fill="#F4F4F4" ></path></symbol><symbol id="icon-fangxing-" viewBox="0 0 1024 1024"><path d="M293.047427 796.738991v-133.327352c0-217.759502 176.531539-394.289445 394.289445-394.289446h133.330542v-104.189607H652.839875c-256.250417 0-463.980461 207.730044-463.980461 463.977271v167.829134h104.188013z"  ></path></symbol><symbol id="icon-fangda" viewBox="0 0 1024 1024"><path d="M470.624 553.376a32 32 0 0 1 2.656 42.24l-2.656 3.008L269.28 800l145.984 0.032a32 32 0 0 1 31.776 28.256l0.224 3.744a32 32 0 0 1-28.288 31.776l-3.712 0.224H192l-2.4-0.096-4.032-0.544-3.552-0.96-3.552-1.408-3.136-1.664-3.072-2.144-2.88-2.56a32.32 32.32 0 0 1-3.104-3.584l-2.272-3.52-1.728-3.648-1.12-3.36-0.96-4.8L160 832V607.872a32 32 0 0 1 63.776-3.712l0.224 3.712-0.032 146.848 201.408-201.344a32 32 0 0 1 45.248 0zM608.736 160H832l2.4 0.096 4.032 0.544 3.552 0.96 3.552 1.408 3.136 1.664 3.072 2.144 2.88 2.56c1.152 1.12 2.176 2.336 3.104 3.584l2.272 3.52 1.728 3.648 1.12 3.36 0.96 4.8L864 192v224.128a32 32 0 0 1-63.776 3.712l-0.224-3.712v-146.88L598.624 470.624a32 32 0 0 1-47.904-42.24l2.656-3.008L754.688 224h-145.92a32 32 0 0 1-31.808-28.256l-0.224-3.744a32 32 0 0 1 28.288-31.776l3.712-0.224z"  ></path></symbol><symbol id="icon-shezhi" viewBox="0 0 1024 1024"><path d="M416.4 958h191.2V849.7c0-12.7 6.4-25.5 19.1-31.9 31.9-12.7 63.7-31.9 89.2-51 12.7-6.4 25.5-6.4 38.2 0l95.6 57.3 95.6-165.7-95.6-57.3C837 588.5 830.6 575.7 837 563c0-19.1 6.4-31.9 6.4-51s0-31.9-6.4-51c0-12.7 6.4-25.5 12.7-31.9l95.6-57.3-95.6-165.7-95.6 57.3c-12.7 6.4-25.5 6.4-38.2 0-25.5-19.1-57.3-38.2-89.2-51-12.7-12.7-19.1-25.5-19.1-38.2V66H416.4v108.3c0 12.7-6.4 25.5-19.1 31.9-31.9 12.7-63.7 31.9-89.2 51-12.7 6.4-25.5 6.4-38.2 0l-95.6-51-95.6 165.6 95.6 57.3c12.7 6.4 19.1 19.1 12.7 31.9 0 19.1-6.4 31.9-6.4 51s0 31.9 6.4 51c6.4 12.7 0 25.5-12.7 31.9l-95.6 57.3 95.6 165.7 95.6-57.3c12.7-6.4 25.5-6.4 38.2 0 25.5 19.1 57.3 38.2 89.2 51 12.7 6.4 19.1 19.1 19.1 31.9V958z m223 63.7H384.6c-19.1 0-31.9-12.7-31.9-31.9v-121c-25.5-12.7-51-25.5-70.1-38.2l-101.9 63.7c-12.7 6.4-31.9 6.4-44.6-12.7L8.6 658.6c-12.7-19.1-6.4-38.2 12.7-44.6l101.9-63.7v-76.5L21.4 410.1c-19.1-6.4-25.5-25.5-12.7-44.6l127.4-223c6.4-12.7 25.5-19.1 44.6-6.4l101.9 63.7c19.1-12.7 44.6-31.9 70.1-38.2V34.1c0-19.1 12.7-31.9 31.9-31.9h254.9c19.1 0 31.9 12.7 31.9 31.9v121.1c25.5 12.7 51 25.5 70.1 38.2l101.9-63.7c12.7-6.4 31.9-6.4 44.6 12.7l127.4 223c12.7 19.1 6.4 38.2-12.7 44.6l-101.9 63.7v76.5l101.9 63.7c12.7 6.4 19.1 25.5 12.7 44.6L888 881.5c-6.4 12.7-25.5 19.1-44.6 12.7l-101.9-63.7c-19.1 12.7-44.6 31.9-70.1 38.2v121.1c-0.1 19.2-12.8 31.9-32 31.9zM512 703.2c-108.3 0-191.2-82.8-191.2-191.2S403.7 320.8 512 320.8 703.2 403.7 703.2 512 620.3 703.2 512 703.2z m0-318.6c-70.1 0-127.4 57.3-127.4 127.4S441.9 639.4 512 639.4 639.4 582.1 639.4 512 582.1 384.6 512 384.6z"  ></path></symbol><symbol id="icon-quanping1" viewBox="0 0 1024 1024"><path d="M628.053333 628.053333a32 32 0 0 1 45.226667 0l158.72 158.634667V693.333333l0.298667-4.352A32 32 0 0 1 896 693.333333v181.333334l-0.341333 3.84a21.333333 21.333333 0 0 1-20.992 17.493333h-181.333334l-4.352-0.298667a32 32 0 0 1-27.648-31.701333l0.298667-4.352a32 32 0 0 1 31.701333-27.648h93.44l-158.72-158.72-3.114666-3.584a32 32 0 0 1 3.114666-41.642667z m-232.106666 0a32 32 0 0 1 3.114666 41.642667l-3.114666 3.584-158.72 158.72h93.44a32 32 0 0 1 31.701333 27.648l0.298667 4.352a32 32 0 0 1-27.648 31.701333L330.666667 896H149.333333a21.333333 21.333333 0 0 1-20.992-17.493333L128 874.666667v-181.333334a32 32 0 0 1 63.701333-4.352l0.298667 4.352v93.354667l158.72-158.634667a32 32 0 0 1 45.226667 0zM874.666667 128a21.333333 21.333333 0 0 1 20.992 17.493333L896 149.333333v181.333334a32 32 0 0 1-63.701333 4.352L832 330.666667V237.312L673.28 395.946667a32 32 0 0 1-48.341333-41.642667l3.114666-3.584 158.72-158.72h-93.44a32 32 0 0 1-31.701333-27.648L661.333333 160a32 32 0 0 1 27.648-31.701333L693.333333 128h181.333334zM330.666667 128l4.352 0.298667a32 32 0 0 1 27.648 31.701333l-0.298667 4.352a32 32 0 0 1-31.701333 27.648H237.226667l158.72 158.72 3.114666 3.584a32 32 0 0 1-48.341333 41.642667L192 237.312V330.666667l-0.298667 4.352A32 32 0 0 1 128 330.666667V149.333333l0.341333-3.84A21.333333 21.333333 0 0 1 149.333333 128h181.333334z"  ></path></symbol><symbol id="icon-font-weight-bold" viewBox="0 0 1024 1024"><path d="M148.945455 55.854545h409.6c102.4 0 186.181818 27.927273 242.036363 83.781819 37.236364 37.236364 65.163636 93.090909 65.163637 148.945454 0 111.709091-65.163636 167.563636-130.327273 204.8 102.4 37.236364 176.872727 102.4 176.872727 223.418182 0 167.563636-130.327273 251.345455-335.127273 251.345455h-418.909091v-912.29091z m549.236363 260.654546c0-74.472727-55.854545-111.709091-158.254545-111.709091h-232.727273v242.036364h223.418182c93.090909-9.309091 167.563636-46.545455 167.563636-130.327273z m-139.636363 260.654545h-251.345455v251.345455h269.963636c111.709091 0 176.872727-46.545455 176.872728-121.018182-9.309091-83.781818-65.163636-130.327273-195.490909-130.327273z"  ></path></symbol><symbol id="icon-letter_spacing" viewBox="0 0 1127 1024"><path d="M320.37397 751.711955a32.882959 32.882959 0 0 0 20.669289-6.81147 64.356648 64.356648 0 0 0 15.971723-18.555384 172.400656 172.400656 0 0 0 12.21367-25.601732q5.167322-13.857818 10.569522-28.890028L422.780899 549.012002h281.853933l57.075421 163.005524a67.175187 67.175187 0 0 0 16.44148 29.359785 35.936376 35.936376 0 0 0 29.124906 10.099766q27.480758 0 34.996863-17.615871a61.068352 61.068352 0 0 0 0-43.217603L617.729869 37.447114a52.142978 52.142978 0 0 0-19.02514-27.245881A59.189326 59.189326 0 0 0 563.707866 0.101467a54.961517 54.961517 0 0 0-35.231742 10.099766 53.082491 53.082491 0 0 0-18.555384 27.245881l-222.19485 651.317463q-11.743914 36.171255 0 49.559316a41.338577 41.338577 0 0 0 32.64808 13.388062zM563.707866 108.85011l125.190121 365.705478H438.517744zM1122.483287 906.731618l-132.471348-96.300094a11.743914 11.743914 0 0 0-18.555384 9.395131v61.068352H156.194054v-60.833473a11.743914 11.743914 0 0 0-18.555383-9.395132L4.932444 906.731618a11.743914 11.743914 0 0 0 0 19.02514l132.471348 96.065216a11.743914 11.743914 0 0 0 18.555384-9.395131v-61.068352h815.027622v60.833473a11.743914 11.743914 0 0 0 18.555384 9.395131l132.706227-96.065215a11.743914 11.743914 0 0 0 0.234878-18.790262z"  ></path></symbol><symbol id="icon-letter-spacing" viewBox="0 0 1152 1024"><path d="M1024 0h128v1024h-128zM0 0h128v1024H0z m657.92 128H494.08L186.24 864h138.88l64-160h368.64l64 160h138.88z m49.28 448H448l128-313.6z"  ></path></symbol><symbol id="icon-zimua" viewBox="0 0 1024 1024"><path d="M481.28 117.76h61.44c22.528 0 43.008 13.824 51.2 34.816l287.232 745.984c1.536 3.584-1.024 7.68-5.12 7.68h-117.248c-2.048 0-4.096-1.536-5.12-3.584l-70.144-192.512c-1.536-4.096-5.632-7.168-10.24-7.168H349.696c-4.608 0-8.704 3.072-10.24 7.168l-70.144 192.512c-1.024 2.048-3.072 3.584-5.12 3.584H147.968c-3.584 0-6.656-4.096-5.12-7.68L430.08 152.576c8.192-20.992 28.16-34.816 51.2-34.816z m-87.04 485.888h235.008c7.68 0 12.8-7.68 10.24-14.848l-124.928-342.016h-4.608L384 588.8c-3.072 7.168 2.56 14.848 10.24 14.848z"  ></path></symbol><symbol id="icon-format_letter_spacing_" viewBox="0 0 1024 1024"><path d="M682.666667 704l128 106.666667-128 106.666666v-85.333333H341.333333v85.333333L213.333333 810.666667l128-106.666667v85.333333h341.333334v-85.333333zM170.666667 170.666667v682.666666H85.333333V170.666667h85.333334z m768 0v682.666666h-85.333334V170.666667h85.333334z m-394.666667 0l202.666667 469.333333h-89.6l-38.4-93.866667h-213.333334L366.933333 640H277.333333l202.666667-469.333333h64zM512 255.146667L432.213333 469.333333h159.573334L512 255.146667z"  ></path></symbol><symbol id="icon-font_size" viewBox="0 0 1024 1024"><path d="M923.456 713.152V644.48h-68.608v205.76h68.608v68.544h-205.76v-68.544h68.608V644.48h-68.608v68.608h-68.544V644.48c0-37.824 30.72-68.544 68.544-68.544h205.76c37.824 0 68.544 30.72 68.544 68.544v68.608h-68.544zM512 233.152H443.456v548.544H580.48v137.152H169.152v-137.152h137.152V233.152H237.696c-75.712 0-137.152 61.44-137.152 137.152H32V164.48C32 126.72 62.72 96 100.544 96h548.608c37.888 0 68.544 30.72 68.544 68.544v205.76h-68.544c0-75.776-61.44-137.152-137.152-137.152z"  ></path></symbol><symbol id="icon-align-center" viewBox="0 0 1024 1024"><path d="M34.45333333 77.86666667h954.56v124.37333333H34.45333333zM213.76 327.25333333H809.6v124.37333334H213.76zM34.45333333 575.46666667h954.56v124.37333333H34.45333333zM213.76 824.74666667H809.6v124.37333333H213.76z"  ></path></symbol><symbol id="icon-juyou" viewBox="0 0 1024 1024"><path d="M53.355789 53.894737v108.328421H970.105263V53.894737H53.355789z m431.157895 377.802105H970.105263V323.368421H484.513684v108.328421z m-431.157895 269.473684H970.105263V592.842105H53.355789v108.328421z m431.157895 269.473685H970.105263V862.315789H484.513684v108.328422z"  ></path></symbol><symbol id="icon-juzuo" viewBox="0 0 1331 1024"><path d="M898.304 819.712v127.488H153.6v-127.488z m279.296-256v127.488H153.6v-127.488z m-279.296-256V435.2H153.6V307.2zM1177.6 51.2v127.488H153.6V51.2z"  ></path></symbol><symbol id="icon-solid_line" viewBox="0 0 1024 1024"><path d="M102.4 460.8h819.2v102.4H102.4z"  ></path></symbol><symbol id="icon-huabi" viewBox="0 0 1024 1024"><path d="M884.641557 138.571009C811.672662 65.565275 755.277234 56.513108 726.075145 85.715197l-79.284741 79.283718 211.422224 211.422224 79.31851-79.284741C966.698434 267.936355 957.646268 211.538881 884.641557 138.571009z"  ></path><path d="M144.589584 667.200758c-14.600533 14.564717-68.333318 226.898707-68.333318 226.898707-3.193739 8.709359-10.073426 42.179658 0 52.855812 7.039323 7.460925 25.424042 10.638291 52.855812 0 0 0 212.33399-53.730739 226.938616-68.333318l449.309192-449.345008L593.934592 217.85575 144.589584 667.200758zM132.177903 891.034662 185.764356 708.376553l129.110543 129.071657L132.177903 891.034662z"  ></path></symbol><symbol id="icon-dianxian" viewBox="0 0 1024 1024"><path d="M228.32 532.76h-6.92c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h6.92c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76zM712.65 532.76h-13.84c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h13.84c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76z m-96.87 0h-13.84c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h13.84c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z m-96.86 0h-13.84c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h13.84c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76z m-96.87 0h-13.84c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h13.84c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z m-96.86 0h-13.84c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h13.84c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76zM802.59 532.76h-6.92c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h6.92c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z"  ></path></symbol><symbol id="icon-xuxian" viewBox="0 0 1024 1024"><path d="M304.43 532.76H221.4c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h83.03c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76zM581.19 532.76H442.81c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h138.38c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76zM802.59 532.76h-83.03c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h83.03c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z"  ></path></symbol><symbol id="icon-beijingse1" viewBox="0 0 1024 1024"><path d="M882.980571 580.900571c0-25.6-9.289143-51.2-27.940571-67.437714L508.342857 166.692571 398.848 57.270857a33.718857 33.718857 0 0 0-48.932571 0 33.718857 33.718857 0 0 0 0 48.859429L436.150857 192.365714 114.980571 511.122286c-37.302857 37.229714-37.302857 100.059429 0 137.289143l300.178286 300.251428c18.651429 18.578286 44.251429 27.867429 67.510857 27.867429 25.6 0 48.859429-9.289143 67.510857-27.867429l300.178286-300.251428c20.992-18.651429 32.621714-41.910857 32.621714-67.510858zM163.84 559.981714l321.097143-318.902857 318.902857 318.902857c4.681143 4.681143 6.948571 11.629714 6.948571 18.578286h-653.897142c0-4.608 2.267429-11.629714 6.948571-18.578286z m709.778286 214.089143s-62.829714 83.821714-62.829715 118.710857c0 34.889143 27.940571 62.829714 62.902858 62.829715 34.889143 0 62.829714-27.940571 62.829714-62.902858 0-34.816-62.902857-118.637714-62.902857-118.637714z" fill="#606266" ></path></symbol><symbol id="icon-juxing" viewBox="0 0 1024 1024"><path d="M876.4664713541666 302.9680989583333H776.4029947916665V202.90462239583334c0-11.865234374999998-9.8876953125-21.7529296875-21.7529296875-21.7529296875s-21.7529296875 9.8876953125-21.7529296875 21.7529296875v100.0634765625H632.8336588541666c-11.865234374999998 0-21.7529296875 9.8876953125-21.7529296875 21.7529296875s9.8876953125 21.7529296875 21.7529296875 21.7529296875h100.0634765625v100.0634765625c0 11.865234374999998 9.8876953125 21.7529296875 21.7529296875 21.7529296875s21.7529296875-9.8876953125 21.7529296875-21.7529296875V346.4739583333333H876.4664713541666c11.865234374999998 0 21.7529296875-9.8876953125 21.7529296875-21.7529296875 0-12.2607421875-9.8876953125-21.7529296875-21.7529296875-21.7529296875zM146.75455729166666 386.0247395833333c11.07421875 0 19.775390625-8.701171874999998 19.775390625-19.775390625h0.7910156249999999v-21.7529296875h36.38671875c10.678710937499998 0 19.775390625-8.701171874999998 19.775390625-19.775390625s-9.0966796875-19.775390625-19.775390625-19.775390625l-56.953125-0.39550781249999994c-11.07421875 0-19.775390625 8.701171874999998-19.775390625 19.775390625v42.71484374999999c0 9.8876953125 8.701171874999998 18.984374999999996 19.775390625 18.984374999999996z m135.26367187500003-41.92382812499999h98.876953125c11.07421875 0 19.775390625-8.701171874999998 19.775390625-19.775390625s-8.701171874999998-19.775390625-19.775390625-19.775390625h-98.876953125c-11.07421875 0-19.775390625 9.0966796875-19.775390625 19.775390625 0 11.07421875 9.0966796875 19.775390625 19.775390625 19.775390625z m177.1875 0h98.876953125c11.07421875 0 19.775390625-8.701171874999998 19.775390625-19.775390625s-8.701171874999998-19.775390625-19.775390625-19.775390625h-98.876953125c-11.07421875 0-19.775390625 9.0966796875-19.775390625 19.775390625 0.7910156249999999 11.07421875 8.701171874999998 19.775390625 19.775390625 19.775390625zM774.8209635416665 560.8391927083335c0-11.07421875-8.701171874999998-19.775390625-19.775390625-19.775390625s-19.775390625 8.701171874999998-19.775390625 19.775390625v98.876953125c0 11.07421875 8.701171874999998 19.775390625 19.775390625 19.775390625s19.775390625-8.701171874999998 19.775390625-19.775390625v-98.876953125z m-19.775390625 157.41210937500003c-11.07421875 0-19.775390625 9.0966796875-19.775390625 19.775390625v64.072265625h-79.1015625v1.1865234374999998c-11.07421875 0-19.775390625 8.701171874999998-19.775390625 19.775390625s8.701171874999998 19.775390625 19.775390625 19.775390625h98.876953125c11.07421875 0 19.775390625-8.701171874999998 19.775390625-19.775390625V738.8177083333334c0-11.865234374999998-9.0966796875-20.56640625-19.775390625-20.56640625zM581.0221354166666 802.0989583333333L166.52994791666666 801.3079427083333V423.2024739583333h-0.7910156249999999c0-11.07421875-8.701171874999998-19.775390625-19.775390625-19.775390625s-19.775390625 8.701171874999998-19.775390625 19.775390625V821.8743489583334c0 11.07421875 8.701171874999998 19.775390625 19.775390625 19.775390625H579.8356119791666c11.07421875 0 19.775390625-9.0966796875 19.775390625-19.775390625 0-11.07421875-9.0966796875-19.775390625-18.5888671875-19.775390625z"  ></path></symbol><symbol id="icon-text" viewBox="0 0 1024 1024"><path d="M853.333333 1024 170.666667 1024c-93.866667 0-170.666667-76.8-170.666667-170.666667L0 170.666667c0-93.866667 76.8-170.666667 170.666667-170.666667l682.666667 0c93.866667 0 170.666667 76.8 170.666667 170.666667l0 682.666667C1024 947.2 947.2 1024 853.333333 1024zM170.666667 85.333333C123.733333 85.333333 85.333333 123.733333 85.333333 170.666667l0 682.666667c0 46.933333 38.4 85.333333 85.333333 85.333333l682.666667 0c46.933333 0 85.333333-38.4 85.333333-85.333333L938.666667 170.666667c0-46.933333-38.4-85.333333-85.333333-85.333333L170.666667 85.333333z"  ></path><path d="M725.333333 341.333333 298.666667 341.333333C273.066667 341.333333 256 324.266667 256 298.666667s17.066667-42.666667 42.666667-42.666667l426.666667 0c25.6 0 42.666667 17.066667 42.666667 42.666667S750.933333 341.333333 725.333333 341.333333z"  ></path><path d="M298.666667 384C273.066667 384 256 366.933333 256 341.333333L256 298.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 42.666667C341.333333 366.933333 324.266667 384 298.666667 384z"  ></path><path d="M725.333333 384c-25.6 0-42.666667-17.066667-42.666667-42.666667L682.666667 298.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 42.666667C768 366.933333 750.933333 384 725.333333 384z"  ></path><path d="M512 768c-25.6 0-42.666667-17.066667-42.666667-42.666667L469.333333 298.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 426.666667C554.666667 750.933333 537.6 768 512 768z"  ></path><path d="M554.666667 768l-85.333333 0c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667l85.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S580.266667 768 554.666667 768z"  ></path></symbol><symbol id="icon-picture" viewBox="0 0 1024 1024"><path d="M899.87602987 34.13333333H124.12397013A105.17617813 105.17617813 0 0 0 18.9629632 139.29434027v745.41131946a105.17617813 105.17617813 0 0 0 105.16100693 105.17617707h775.75205974a105.17617813 105.17617813 0 0 0 105.16100693-105.17617707h0.01517013V139.29434027A105.17617813 105.17617813 0 0 0 899.87602987 34.13333333zM79.6444448 884.70565973v-145.49902293l214.7972736-307.2455104c6.62945173-9.4814816 15.86820693-15.20071147 26.0323552-16.0957632 10.27034027-1.01641493 20.28278507 3.12509653 28.45961493 11.30192533l188.719408 188.70423787-233.19893333 313.3288288H124.12397013A44.49469653 44.49469653 0 0 1 79.6444448 884.70565973z m864.7262816 0a44.49469653 44.49469653 0 0 1-44.49469653 44.49469547H342.2587264l269.01617707-361.40373333c7.03905173-9.4208 16.86945173-15.14002987 27.7314368-16.09576214 10.95300693-0.92539307 21.5267552 2.95822187 30.05250453 11.02885867l165.9335104 156.5278816c6.06814827 5.74957013 15.6861632 5.4461632 21.45090453-0.62198507a15.20071147 15.20071147 0 0 0-0.62198613-21.45090346L689.90293333 540.65682987c-14.9276448-14.07810347-34.01197013-20.93511147-53.56657813-19.17534827-19.58494827 1.71425173-37.12189653 11.72669653-49.39472533 28.2017184l-30.9627264 41.5971552-185.57914027-185.56397013c-14.65457813-14.65457813-33.31413333-21.72397013-52.58050347-20.0704-19.26637013 1.68391147-36.40888853 11.96942187-48.24177813 28.92989653L79.6444448 686.2620448V139.29434027A44.4795264 44.4795264 0 0 1 124.12397013 94.81481493h775.75205974a44.4795264 44.4795264 0 0 1 44.47952533 44.47952534h0.0151712v745.41131946z" fill="" ></path><path d="M892.41220693 731.6669632a15.17037013 15.17037013 0 0 0-20.8289184 22.04254827l18.12859307 17.12734826a15.1552 15.1552 0 0 0 21.43573333-0.62198613 15.14002987 15.14002987 0 0 0-0.5916448-21.42056213l-18.1437632-17.12734827zM645.0593184 153.55448853c-72.30198507 0-131.10234027 58.8003552-131.10234027 131.0871712 0 72.28681493 58.8003552 131.10234027 131.10234027 131.10234027 72.2716448 0 131.10234027-58.8155264 131.10234133-131.10234027s-58.8155264-131.08717013-131.10234133-131.0871712z m0 231.86394134c-55.55389653 0-100.7616-45.19253333-100.7616-100.7616s45.19253333-100.74642987 100.7616-100.74642987 100.7616 45.1773632 100.7616 100.74642987-45.19253333 100.7616-100.7616 100.7616z" fill="" ></path></symbol><symbol id="icon-shuru" viewBox="0 0 1024 1024"><path d="M970.666667 204.8l-151.466667-151.466667L701.866667 170.666667H64c-12.8 0-21.333333 8.533333-21.333333 21.333333v768c0 12.8 8.533333 21.333333 21.333333 21.333333h576c6.4 0 10.666667-2.133333 14.933333-6.4l192-192c4.266667-4.266667 6.4-8.533333 6.4-14.933333V322.133333l117.333334-117.333333z m-529.066667 469.333333l-98.133333-85.333333L742.4 189.866667l91.733333 91.733333-392.533333 392.533333z m-123.733333-49.066666l89.6 76.8-121.6 34.133333 32-110.933333zM910.933333 204.8l-46.933333 46.933333-91.733333-91.733333 46.933333-46.933333 91.733333 91.733333zM661.333333 908.8V789.333333h119.466667L661.333333 908.8z m149.333334-162.133333h-170.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333v170.666667H85.333333V213.333333h573.866667l-128 128H170.666667v42.666667h317.866666l-128 128H170.666667v42.666667h147.2l-32 32-61.866667 213.333333 213.333333-61.866667 183.466667-183.466666H725.333333v-42.666667h-61.866666l147.2-147.2V746.666667z"  ></path></symbol><symbol id="icon-tree" viewBox="0 0 1024 1024"><path d="M448.84 880.29H175.37c-20.14 0-36.46-16.33-36.46-36.46 0-20.14 16.33-36.46 36.46-36.46h273.48c20.14 0 36.46 16.33 36.46 36.46 0 20.14-16.33 36.46-36.47 36.46zM448.84 588.58H175.37c-20.14 0-36.46-16.33-36.46-36.46 0-20.14 16.33-36.46 36.46-36.46h273.48c20.14 0 36.46 16.33 36.46 36.46 0 20.14-16.33 36.46-36.47 36.46z"  ></path><path d="M138.9 843.83V296.88c0-20.14 16.33-36.46 36.46-36.46 20.14 0 36.46 16.33 36.46 36.46v546.95c0 20.14-16.33 36.46-36.46 36.46-20.13 0-36.46-16.32-36.46-36.46z"  ></path><path d="M211.83 348.16H138.9c-40.11 0-72.93-32.82-72.93-72.93V202.3c0-40.11 32.82-72.93 72.93-72.93h72.93c40.11 0 72.93 32.82 72.93 72.93v72.93c0 40.11-32.82 72.93-72.93 72.93zM922.87 625.05H605.12c-20.05 0-36.46-16.41-36.46-36.46v-72.93c0-20.05 16.41-36.46 36.46-36.46h317.75c20.05 0 36.46 16.41 36.46 36.46v72.93c0 20.05-16.41 36.46-36.46 36.46zM921.67 311.69h-508.1c-20.71 0-37.66-16.95-37.66-37.66V203.5c0-20.71 16.95-37.66 37.66-37.66h508.1c20.71 0 37.66 16.95 37.66 37.66v70.54c0 20.71-16.94 37.65-37.66 37.65zM922.87 916.76H605.12c-20.05 0-36.46-16.41-36.46-36.46v-72.93c0-20.05 16.41-36.46 36.46-36.46h317.75c20.05 0 36.46 16.41 36.46 36.46v72.93c0 20.05-16.41 36.46-36.46 36.46z"  ></path></symbol><symbol id="icon-chaxunsousuo" viewBox="0 0 1024 1024"><path d="M724.173722 608.066299m33.939704 33.939705l203.638226 203.638225q33.939704 33.939704 0 67.879409l0 0q-33.939704 33.939704-67.879409 0l-203.638225-203.638226q-33.939704-33.939704 0-67.879408l0 0q33.939704-33.939704 67.879408 0Z"  ></path><path d="M48.436376 928.00402m47.99799 0l287.98794 0q47.99799 0 47.99799 47.99799l0 0q0 47.99799-47.99799 47.99799l-287.98794 0q-47.99799 0-47.99799-47.99799l0 0q0-47.99799 47.99799-47.99799Z"  ></path><path d="M464.418957 832.00804a415.982581 415.982581 0 1 1 293.747699-121.594909A415.342608 415.342608 0 0 1 464.418957 832.00804z m0-735.969182A319.986601 319.986601 0 1 0 688.409577 192.034839a319.986601 319.986601 0 0 0-223.99062-95.995981z"  ></path></symbol><symbol id="icon-jidu" viewBox="0 0 1024 1024"><path d="M153.850705 812.896572v-537.121614c0.409313-0.511642 0.920955-0.920955 0.920955-1.432598 1.330269-12.688718 6.856001-23.637854 15.144599-32.949735 13.609673-15.451584 31.005496-22.716898 51.573498-22.716898H284.626362v-5.62806-44.205856c0-1.637254 0.511642-3.376836 0.716298-5.01409 0.920955-6.037374 6.242031-7.469971 10.539822-9.925852h9.516539c10.130509 3.581493 12.688718 11.563106 12.381732 21.386629-0.409313 12.177076-0.102328 24.45648-0.102328 36.633557v6.446687h389.359448c0-14.4283 0.306985-28.549615-0.102328-42.67093-0.306985-10.02818 1.841911-18.112122 12.381733-21.898272h9.516538c8.902568 3.683821 12.074748 10.437494 11.460778 19.954032-0.61397 10.64215-0.204657 21.181973-0.204657 31.824124v13.098031h5.730389c19.851704 0 39.703408-0.102328 59.555111 0.102328 4.093135 0 8.18627 0.204657 12.177076 1.023284 20.874988 4.809433 37.145198 16.065554 46.559409 35.81493 2.353553 4.911762 3.990806 10.232837 5.935045 15.349255v546.740482c-0.61397 1.739582-1.330269 3.581493-1.944239 5.423403-7.879285 23.84251-23.740182 39.191766-48.401319 44.922155-2.353553 0.511642-4.604777 1.330269-6.856001 1.944239H211.973219c-0.306985-0.306985-0.511642-0.818627-0.920956-0.920955-9.209553-0.61397-17.498151-3.888478-25.377435-8.697912-12.074748-7.265314-21.181973-16.986509-26.298392-30.186869-2.148896-5.525732-3.683821-11.460777-5.525731-17.293495z m33.25672-397.955031V803.482362c0 18.419107 14.121315 33.359049 33.461377 33.359049 194.526232 0.102328 389.052463 0.102328 583.578695 0 19.237734 0 33.563705-14.325972 33.563705-33.666034 0.102328-127.603478 0.102328-255.206955 0.102329-382.810432v-5.321076c-217.038473-0.102328-433.565304-0.102328-650.706106-0.102328z m0-33.666034h650.501449c0.102328-0.920955 0.204657-1.534926 0.204657-2.148896 0-31.721795 0.102328-63.443589-0.102329-95.165384 0-2.762866-0.61397-5.62806-1.534925-8.186269-5.116419-15.963226-16.679524-23.126212-31.926452-23.637854-20.056361-0.511642-40.112721-0.204657-60.169082-0.102328-1.22794 0-2.455881 0.204657-3.888478 0.409313 0 17.088838 0.204657 33.870691-0.204656 50.754872-0.102328 3.172179-1.534926 6.856001-3.683822 9.209553-5.62806 6.037374-12.688718 6.549016-20.261017 3.581493-5.01409-1.944239-9.107225-8.18627-9.107225-14.632957-0.102328-13.302688 0-26.707705 0-40.010393v-8.800239H317.576097c0 15.758569 0.204657 31.107825-0.102329 46.45708-0.204657 10.64215-3.581493 16.679524-14.939942 18.726091-6.856001 1.22794-18.419107-3.78615-18.316778-14.4283 0.204657-15.246927 0.102328-30.391526 0.102328-45.740781v-5.321076H224.150295c-2.967523 0-5.832717 0.61397-8.902568 0.818627-17.805136 1.22794-28.754272 19.135405-28.549616 33.461377 0.409313 29.879884 0.102328 59.65744 0.102329 89.537324 0.306985 1.330269 0.306985 3.172179 0.306985 5.218747z m-33.25672 431.621065c1.841911 5.730389 3.479165 11.767763 5.62806 17.395823 5.116419 13.20036 14.223643 23.023883 26.298391 30.18687 7.879285 4.707105 16.167882 7.981613 25.377436 8.697911 0.306985 0 0.61397 0.511642 0.920955 0.920955h-58.122514c-0.102328-19.135405-0.102328-38.066154-0.102328-57.201559z m659.097032 57.201559c2.353553-0.61397 4.604777-1.432597 6.856-1.944239 24.661137-5.832717 40.419706-21.181973 48.401319-44.922154 0.61397-1.841911 1.330269-3.581493 1.944239-5.423404v52.392126c-19.135405-0.102328-38.168482-0.102328-57.201558-0.102329z" fill="" ></path><path d="M227.424803 623.179774l10.02818-2.353552c25.275107-6.242031 44.410513-13.81433 56.792245-22.921555 12.893375-9.004897 23.433197-17.191166 31.517138-24.763466h-30.08454c-13.81433 0-33.359049 0.511642-58.224843 1.944239 0.511642-3.376836 0.511642-6.242031 0.920955-8.083941s0.511642-3.78615 0.511642-5.730389-0.511642-6.242031-1.432597-13.302688c32.949735 1.432597 52.494454 1.944239 58.224843 1.944239h59.145797v-22.512241c-25.275107 1.432597-39.601079 1.944239-42.977915 1.944239l-26.707705 0.409313-13.405016 0.511642c-0.920955-3.78615-2.353553-7.674628-3.376836-10.949136-0.920955-3.376836-4.297792-8.595583-9.107225-15.758569l10.02818 0.920956c6.242031 0.920955 18.112122 0.920955 35.81493 0.920955 20.568002 0 45.331468-0.920955 74.495053-3.376836 29.061257-2.353553 50.140901-5.218747 63.44359-8.595583l9.516538-2.353553c5.218747 9.004897 10.949136 17.60048 17.191166 26.196063l-30.493854 2.353553-32.438094 2.865194-29.572898 2.353552v23.842511h54.438692c5.218747 0 25.275107-0.511642 60.169082-1.944239-0.920955 3.78615-1.432597 7.162986-1.432597 8.595583-0.511642 1.944239-0.511642 3.376836-0.511642 3.786149 0 0.920955 0.511642 5.218747 1.944239 13.302689-24.865794-1.432597-44.819826-1.944239-60.169082-1.944239h-26.298391c6.242031 6.651344 15.246927 14.325972 26.707705 23.330868 11.972419 9.004897 31.517138 15.758569 59.145798 20.05636l9.107225 1.432598c-5.218747 5.218747-8.595583 9.516538-10.949136 12.893374-2.353553 3.376836-4.809433 8.595583-6.651344 15.246927l-9.107225-3.786149c-30.493854-13.302688-50.550215-24.354152-61.090037-32.847407-10.02818-8.595583-17.191166-15.246927-20.977316-19.544719L382.452283 575.801739l-3.786149-4.809434h-1.944239v29.982213c0 3.78615 0.511642 10.949136 1.432597 21.488958-6.651344-0.920955-10.539822-0.920955-12.381733-0.920956-1.432597 0-5.730389 0.511642-12.893375 0.920956 0.920955-10.02818 1.944239-17.191166 1.944239-21.488958V570.787649c-4.297792 4.297792-9.107225 9.004897-14.837613 14.735285s-11.460777 11.460777-18.112122 17.60048c-6.651344 5.730389-18.623763 14.325972-36.224243 24.763465 10.949136 0.920955 20.977316 1.432597 29.572899 1.432597h95.47237c10.539822 0 22.921555-0.511642 36.735884-1.432597-18.112122 14.735285-30.493854 24.763466-37.65684 29.061257L378.666134 676.595183v0.511642h47.68502c15.246927 0 35.81493-0.511642 62.010992-1.944239-0.511642 4.297792-0.920955 7.162986-0.920955 9.004897 0 1.944239-0.511642 3.78615-0.511642 5.730388s0.511642 6.242031 1.432597 12.893375c-24.865794-1.432597-45.331468-2.353553-62.010992-2.353552H378.666134v33.359048c0 8.083941-1.432597 14.735285-4.297792 19.033077-2.865194 4.809433-17.191166 7.162986-43.387229 8.083941 0-3.78615-0.511642-7.162986-0.920955-9.004896-0.511642-2.353553-0.920955-4.297792-1.944239-6.242031-0.920955-2.353553-4.297792-8.083941-10.539822-17.191166 11.972419 2.353553 20.977316 3.376836 27.219346 2.865194 3.376836 0 5.730389-0.511642 7.162986-1.944239 1.432597-1.432597 1.944239-4.809433 1.944239-9.516538v-19.544719h-51.573498c-11.972419 0-31.926451 0.920955-60.169082 2.353553 0-3.376836 0.511642-7.162986 0.511642-10.437494s0.511642-6.242031 0.511642-7.674628l-0.920956-9.516538c25.275107 1.432597 45.331468 1.944239 60.169082 1.944239h50.550215v-6.242031l-0.511642-3.376836 3.78615-0.920955c7.674628-2.353553 18.112122-8.083941 31.926451-17.60048h-73.47177c-9.516538 0-20.056361 0.511642-31.005496 1.432597 0.511642-2.865194 0.920955-5.218747 0.920956-7.674628 0.511642-1.944239 0.511642-3.376836 0.511641-4.809433l-0.511641-2.865194-0.511642-7.674628c-9.516538 5.730389-18.623763 10.437494-26.707705 14.735285l-7.674628 3.78615c-3.376836-6.242031-5.730389-10.02818-7.674627-11.870091-1.330269-0.204657-6.549016-4.502448-14.632957-10.744479zM522.744479 740.448086l7.162986-10.949135c2.353553-3.78615 5.218747-9.516538 8.595583-16.167883s6.651344-16.167882 10.539822-28.549615c3.78615-11.870091 6.242031-28.140302 6.651344-48.094334 0.920955-20.056361 0.920955-34.791646 1.432597-44.819826V568.536425L555.182572 525.660837c18.112122 0.920955 28.651944 1.432597 32.438094 1.432598h71.629859c-2.353553-5.730389-5.218747-11.870091-8.595583-18.623764l-4.297792-7.674628c8.083941-1.432597 17.191166-4.297792 26.707705-8.595583l11.972419 35.303288h36.224243c10.02818 0 27.62866-0.511642 52.494454-1.944239-0.511642 3.376836-0.920955 5.730389-0.920956 7.674628v4.297791c0 0.920955 0.511642 4.809433 1.432598 10.949136-11.972419 0-22.409913-0.511642-32.438094-0.920955-10.02818-0.511642-16.679524-0.511642-20.568002-0.511642h-140.803837V578.87159h43.387229v-8.083941c0-3.78615 0-6.651344-0.511642-8.595583l-0.920956-9.004897c6.242031 0.920955 10.02818 1.432597 10.949136 1.432597s5.730389-0.511642 13.405016-1.432597c-0.920955 4.297792-0.920955 7.162986-1.432597 9.516538v15.758569h58.736485v-6.24203c0-5.218747 0-8.595583-0.511642-10.02818l-0.920955-9.004897c6.651344 0.920955 10.949136 1.432597 12.381732 1.432597 1.432597 0 5.730389-0.511642 12.893375-1.432597-0.920955 4.297792-0.920955 7.162986-1.432597 9.516538v15.758569h20.568002c9.516538 0 20.568002-0.511642 31.926452-1.432597-0.511642 3.376836-0.511642 5.730389-0.511642 7.162986 0 1.432597 0 3.376836-0.511642 4.809434-0.511642 1.432597 0 2.353553 0 2.865194l0.920955 7.674628c-11.460777-0.920955-22.0006-1.432597-31.926451-1.432598H726.582592V616.733087c0 6.651344 0 10.437494 0.511642 12.381733l0.920955 12.893374c-9.107225-0.920955-18.112122-1.432597-26.298391-1.432597h-53.006095c-8.083941 0-16.679524 0.511642-25.78675 1.432597 0.511642-5.218747 0.511642-9.516538 0.920956-12.893374 0-3.376836 0.511642-7.162986 0.511641-11.460778v-19.544719h-43.89887c0 6.242031-0.511642 12.381733-0.511642 18.623764s-0.920955 15.246927-1.944239 27.62866c-0.920955 11.870091-2.353553 22.409913-3.376836 31.005496-1.432597 8.595583-4.297792 20.056361-8.595584 34.280004-4.297792 14.325972-9.107225 26.707705-13.81433 36.224243l-5.218746 11.460777c-2.865194-2.865194-5.218747-5.218747-7.162986-6.651344-2.762866-2.148896-7.981613-5.525732-17.088838-10.232837z m53.517737-9.107225c23.433197 0 48.196662-5.218747 74.495054-15.758569-8.083941-8.083941-14.325972-14.735285-18.112122-19.544718-3.78615-5.218747-8.083941-12.893375-13.405016-22.409913l-23.433197 1.944239c0.511642-3.376836 0.511642-5.730389 0.511642-7.162986 0-1.432597 0-2.865194 0.511642-4.297792 0-1.432597 0-4.809433-0.920955-10.949135 12.381733 0.920955 24.354152 1.432597 35.303287 1.432597h79.202159c10.949136 0 22.409913-0.511642 34.382332-1.432597-4.809433 9.004897-10.02818 17.60048-15.758569 25.684421-5.730389 8.083941-17.702808 20.056361-34.791646 36.735884 15.758569 6.242031 28.140302 10.437494 37.65684 11.870091 9.107225 1.432597 16.679524 2.353553 22.921555 2.865195l16.679525 0.920955 8.083941 0.920955c-3.376836 3.376836-9.107225 10.437494-16.679524 20.465674l-3.78615 7.162986-9.107225-2.865194c-0.511642 0-8.083941-1.944239-22.921555-6.242031-14.837614-4.297792-32.438093-11.460777-53.415409-21.898271-27.62866 12.381733-53.927051 21.488958-79.202159 26.707705l-9.107225 1.944239c-1.944239-2.353553-3.376836-4.809433-4.809433-7.674628-1.432597-2.865194-2.353553-4.297792-2.865194-5.218747l-4.297792-5.730389-6.651344-8.083941h9.516538v0.61397z m126.887179-57.610872h-58.736484c2.865194 6.242031 6.242031 11.460777 10.02818 16.167882 3.78615 4.809433 9.516538 9.516538 16.679525 14.735286 5.218747-2.865194 10.02818-6.242031 14.837613-10.02818 4.809433-3.274508 10.539822-10.437494 17.191166-20.874988z m-56.792245-50.550215h58.736484v-25.275107h-58.736484v25.275107z" fill="" ></path></symbol><symbol id="icon-shuzishunxu" viewBox="0 0 1024 1024"><path d="M862.138182 252.16h-523.636364a34.909091 34.909091 0 0 1 0-69.818182h523.636364a34.909091 34.909091 0 0 1 0 69.818182z m0 290.909091h-523.636364a34.909091 34.909091 0 0 1 0-69.818182h523.636364a34.909091 34.909091 0 0 1 0 69.818182z m0 290.909091h-523.636364a34.909091 34.909091 0 0 1 0-69.818182h523.636364a34.909091 34.909091 0 0 1 0 69.818182zM149.178182 294.865455V139.636364h43.962182v155.229091h-43.985455z m76.776727 247.854545v44.916364H125.626182l50.059636-93.323637c2.304-4.352 3.490909-8.075636 3.490909-11.170909 0-5.748364-3.584-8.610909-10.682182-8.610909a10.100364 10.100364 0 0 0-10.496 10.24 12.334545 12.334545 0 0 0 3.956364 8.843636l-19.781818 35.374546C124.951273 517.818182 116.363636 502.458182 116.363636 482.909091c0-14.894545 5.236364-27.671273 15.685819-38.283636a51.688727 51.688727 0 0 1 38.260363-15.941819c15.383273 0 28.229818 5.376 38.562909 16.174546 10.309818 10.775273 15.453091 23.458909 15.453091 38.050909 0 8.541091-1.908364 16.523636-5.818182 23.970909L200.145455 542.72h25.809454z m-95.976727 177.431273h82.129454l-25.134545 59.810909c8.843636 6.050909 15.36 12.730182 19.549091 20.014545 4.189091 7.307636 6.283636 15.988364 6.283636 26.088728 0 15.499636-5.376 28.043636-16.174545 37.585454-10.775273 9.541818-24.692364 14.312727-41.774546 14.312727a92.858182 92.858182 0 0 1-25.367272-3.723636v-43.752727c6.842182 3.072 13.032727 4.608 18.618181 4.608 5.445818 0 9.658182-1.536 12.683637-4.724364 3.025455-3.165091 4.561455-7.726545 4.561454-13.637818a18.152727 18.152727 0 0 0-8.029091-15.36c-5.376-3.863273-12.520727-5.818182-21.527272-5.818182l11.380363-30.487273h-17.221818v-44.916363z" fill="#797979" ></path></symbol><symbol id="icon-Group-" viewBox="0 0 1024 1024"><path d="M160 352a32 32 0 0 1-32-32V192a32 32 0 0 1 32-32h128a32 32 0 0 1 32 32v128a32 32 0 0 1-32 32z m32-64h64V224H192zM416 288a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64zM160 608a32 32 0 0 1-32-32v-128a32 32 0 0 1 32-32h128a32 32 0 0 1 32 32v128a32 32 0 0 1-32 32z m32-64h64v-64H192zM416 544a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64zM160 864a32 32 0 0 1-32-32v-128a32 32 0 0 1 32-32h128a32 32 0 0 1 32 32v128a32 32 0 0 1-32 32z m32-64h64v-64H192zM416 800a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64z"  ></path></symbol><symbol id="icon-riqi" viewBox="0 0 1024 1024"><path d="M819.6 202.6H700.7v-63.8c0-17.6-14.3-31.9-31.9-31.9-17.6 0-31.9 14.3-31.9 31.9v63.8h-255v-63.8c0-17.6-14.3-31.9-31.9-31.9s-31.9 14.3-31.9 31.9v63.8H199.3C140.7 202.6 93 250.3 93 308.9v504.8C93 872.3 140.7 920 199.3 920h620.3c58.6 0 106.3-47.7 106.3-106.3V308.9c0-58.6-47.7-106.3-106.3-106.3z m42.5 611.1c0 23.4-19.1 42.5-42.5 42.5H199.3c-23.4 0-42.5-19.1-42.5-42.5V308.9c0-23.4 19.1-42.5 42.5-42.5h118.8v47.8c0 17.6 14.3 31.9 31.9 31.9s31.9-14.3 31.9-31.9v-47.8H637v47.8c0 17.6 14.3 31.9 31.9 31.9 17.6 0 31.9-14.3 31.9-31.9v-47.8h118.8c23.4 0 42.5 19.1 42.5 42.5v504.8z"  ></path><path d="M340.1 409.9H238c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4h102.1c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.5-23.4-23.4-23.4zM560.5 409.9H458.4c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4h102.1c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.5-23.4-23.4-23.4zM781 409.9H678.8c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4H781c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.6-23.4-23.4-23.4zM340.1 632.9H238c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4h102.1c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.5-23.4-23.4-23.4zM560.5 632.9H458.4c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4h102.1c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.5-23.4-23.4-23.4zM781 632.9H678.8c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4H781c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.6-23.4-23.4-23.4z"  ></path></symbol><symbol id="icon-zuoce-qujian" viewBox="0 0 1024 1024"><path d="M915.456 198.656c-49.3568 0-90.9312 32.768-104.0384 77.824h-195.1744c-13.312-45.056-54.8864-77.824-104.0384-77.824-49.3568 0-90.9312 32.768-104.0384 77.824H30.72c-16.9984 0-30.72 13.7216-30.72 30.72s13.7216 30.72 30.72 30.72h377.2416c13.312 45.056 54.8864 77.824 104.0384 77.824 49.3568 0 90.9312-32.768 104.0384-77.824h195.1744c13.312 45.056 54.8864 77.824 104.0384 77.824 60.0064 0 108.544-48.5376 108.544-108.544 0.2048-60.0064-48.3328-108.544-108.3392-108.544z m-403.456 155.648c-26.0096 0-47.104-21.0944-47.104-47.104s21.0944-47.104 47.104-47.104 47.104 21.0944 47.104 47.104-21.0944 47.104-47.104 47.104z m403.456 0c-26.0096 0-47.104-21.0944-47.104-47.104s21.0944-47.104 47.104-47.104 47.104 21.0944 47.104 47.104-21.0944 47.104-47.104 47.104zM993.28 686.08H616.0384c-13.312-45.056-54.8864-77.824-104.0384-77.824-49.3568 0-90.9312 32.768-104.0384 77.824h-193.1264c-13.312-45.056-54.8864-77.824-104.0384-77.824-55.7056 0-101.376 41.7792-107.7248 95.6416-1.8432 3.8912-2.8672 8.192-2.8672 12.9024s1.024 9.0112 2.8672 12.9024C9.216 783.5648 54.8864 825.344 110.592 825.344c49.3568 0 90.9312-32.768 104.0384-77.824h193.1264c13.312 45.056 54.8864 77.824 104.0384 77.824 49.3568 0 90.9312-32.768 104.0384-77.824H993.28c16.9984 0 30.72-13.7216 30.72-30.72s-13.7216-30.72-30.72-30.72zM110.592 763.904c-26.0096 0-47.104-21.0944-47.104-47.104s21.0944-47.104 47.104-47.104 47.104 21.0944 47.104 47.104-21.0944 47.104-47.104 47.104z m401.408 0c-26.0096 0-47.104-21.0944-47.104-47.104s21.0944-47.104 47.104-47.104 47.104 21.0944 47.104 47.104-21.0944 47.104-47.104 47.104z" fill="#646464" ></path></symbol><symbol id="icon-liebiao" viewBox="0 0 1024 1024"><path d="M92.5 573.1h179.4c16.5 0 29.9-13.4 29.9-29.9s-13.4-29.9-29.9-29.9H92.5c-16.5 0-29.9 13.4-29.9 29.9s13.4 29.9 29.9 29.9zM950.9 823L848 720c31.9-40.7 51.7-91.2 51.7-146.9 0-132.1-107.1-239.2-239.2-239.2S421.3 441 421.3 573.1s107.1 239.2 239.2 239.2c55.7 0 106.3-19.9 146.9-51.7l103 103c11.2 11.2 29.3 11.2 40.5 0 11.2-11.3 11.2-29.4 0-40.6zM788.7 698.3c-0.5 0.5-1.3 0.7-1.7 1.2-0.5 0.5-0.7 1.3-1.2 1.7-32.4 31.6-76.4 51.2-125.3 51.2-99.1 0-179.4-80.3-179.4-179.4 0-99.1 80.3-179.4 179.4-179.4S839.9 474 839.9 573.1c0.1 48.8-19.6 92.9-51.2 125.2z m-696.2-484h538.2c16.5 0 29.9-13.4 29.9-29.9s-13.4-29.9-29.9-29.9H92.5c-16.5 0-29.9 13.4-29.9 29.9s13.4 29.9 29.9 29.9z m239.2 119.6H92.5c-16.5 0-29.9 13.4-29.9 29.9s13.4 29.9 29.9 29.9h239.2c16.5 0 29.9-13.4 29.9-29.9s-13.4-29.9-29.9-29.9z m0 358.8H92.5c-16.5 0-29.9 13.4-29.9 29.9s13.4 29.9 29.9 29.9h239.2c16.5 0 29.9-13.4 29.9-29.9s-13.4-29.9-29.9-29.9z m0 0"  ></path></symbol><symbol id="icon-xialakuang" viewBox="0 0 1024 1024"><path d="M970.105263 404.210526H53.894737v-323.368421h916.210526v323.368421z m-862.315789-53.894737h808.421052v-215.578947H107.789474v215.578947z" fill="#444A5C" ></path><path d="M970.105263 943.157895H53.894737v-592.842106h916.210526v592.842106z m-862.315789-53.894737h808.421052v-485.052632H107.789474v485.052632zM754.526316 307.2L662.905263 215.578947l37.726316-37.726315 53.894737 53.894736 53.894737-53.894736 37.726315 37.726315z" fill="#444A5C" ></path><path d="M264.084211 781.473684h485.052631v-53.894737h-485.052631v53.894737z m0-107.789473h485.052631v-53.894737h-485.052631v53.894737z m0-161.684211v53.894737h485.052631v-53.894737h-485.052631z" fill="#444A5C" ></path></symbol><symbol id="icon-xialashu" viewBox="0 0 1024 1024"><path d="M970.105263 323.368421H53.894737V53.894737h916.210526v269.473684zM107.789474 269.473684h808.421052V107.789474H107.789474v161.68421zM215.578947 538.947368H53.894737V377.263158h161.68421v161.68421zM107.789474 485.052632h53.894737V431.157895H107.789474v53.894737z" fill="#444A5C" ></path><path d="M269.473684 431.157895h431.157895v53.894737H269.473684V431.157895zM538.947368 646.736842h431.157895v53.894737h-431.157895v-53.894737zM538.947368 862.315789h431.157895v53.894737h-431.157895v-53.894737zM107.789474 485.052632h53.894737v431.157894H107.789474V485.052632zM161.684211 700.631579v-53.894737h161.68421v53.894737H161.684211M161.684211 916.210526v-53.894737h161.68421v53.894737H161.684211" fill="#444A5C" ></path><path d="M485.052632 754.526316H323.368421v-161.684211h161.684211v161.684211z m-107.789474-53.894737h53.894737v-53.894737H377.263158v53.894737zM485.052632 970.105263H323.368421v-161.68421h161.684211v161.68421z m-107.789474-53.894737h53.894737v-53.894737H377.263158v53.894737z" fill="#444A5C" ></path><path d="M754.526316 161.684211h107.789473v53.894736h-107.789473V161.684211z" fill="#444A5C" ></path></symbol><symbol id="icon-zhongzhi" viewBox="0 0 1024 1024"><path d="M624.593455 23.272727a93.090909 93.090909 0 0 1 93.090909 93.090909v168.587637l143.406545 0.023272a116.363636 116.363636 0 0 1 116.247273 111.313455l0.116363 5.050182V861.090909a116.363636 116.363636 0 0 1-116.363636 116.363636H162.909091a116.363636 116.363636 0 0 1-116.363636-116.363636V401.338182a116.363636 116.363636 0 0 1 116.363636-116.363637l146.664727-0.023272V116.363636a93.090909 93.090909 0 0 1 88.459637-92.974545l4.654545-0.116364zM139.636364 581.818182v279.272727a23.272727 23.272727 0 0 0 23.272727 23.272727h302.545454v-162.909091a46.545455 46.545455 0 1 1 93.09091 0v162.909091h93.090909v-162.909091a46.545455 46.545455 0 1 1 93.090909 0v162.909091h116.363636a23.272727 23.272727 0 0 0 23.272727-23.272727V581.818182H139.636364z m0-93.090909h744.727272v-87.389091a23.272727 23.272727 0 0 0-23.272727-23.272727h-166.679273a69.818182 69.818182 0 0 1-69.818181-69.818182V116.363636h-221.905455v191.883637a69.818182 69.818182 0 0 1-69.818182 69.818182H162.909091a23.272727 23.272727 0 0 0-23.272727 23.272727V488.727273z"  ></path></symbol><symbol id="icon-ri" viewBox="0 0 1024 1024"><path d="M408.222897 789.115586v-35.345655h217.15862v34.886621h33.474207V388.378483h-283.68331v400.737103h33.050483z m217.15862-237.779862h-217.15862v-130.824827h217.15862v130.824827z m0 170.301793h-217.15862v-138.169379h217.15862v138.169379z"  ></path><path d="M917.645241 144.772414a70.62069 70.62069 0 0 1 70.62069 70.620689v681.489656a70.62069 70.62069 0 0 1-70.62069 70.620689H94.384552a70.62069 70.62069 0 0 1-70.62069-70.620689V215.393103a70.62069 70.62069 0 0 1 70.62069-70.620689h823.260689z m0 45.903448H94.384552a24.717241 24.717241 0 0 0-24.50538 21.362759l-0.211862 3.354482v681.489656a24.717241 24.717241 0 0 0 21.362759 24.505379l3.354483 0.211862h823.260689a24.717241 24.717241 0 0 0 24.50538-21.362759l0.211862-3.354482V215.393103a24.717241 24.717241 0 0 0-21.362759-24.505379l-3.354483-0.211862z"  ></path><path d="M312.214069 31.249655a22.951724 22.951724 0 0 1 22.704552 19.561931l0.247172 3.389793v180.824276a22.951724 22.951724 0 0 1-45.656276 3.389793l-0.247172-3.389793v-180.788965a22.951724 22.951724 0 0 1 22.951724-22.951724zM691.023448 31.249655a22.951724 22.951724 0 0 1 22.704552 19.561931l0.247172 3.389793v180.824276a22.951724 22.951724 0 0 1-45.656275 3.389793l-0.247173-3.389793v-180.788965a22.951724 22.951724 0 0 1 22.951724-22.951724z"  ></path></symbol><symbol id="icon-nian" viewBox="0 0 1024 1024"><path d="M715.702857 32.365714a23.771429 23.771429 0 0 1 23.515429 20.260572l0.256 3.510857V149.942857l210.944 0.036572a73.142857 73.142857 0 0 1 73.142857 73.142857v705.828571a73.142857 73.142857 0 0 1-73.142857 73.142857H97.755429a73.142857 73.142857 0 0 1-73.142858-73.142857V223.085714a73.142857 73.142857 0 0 1 73.142858-73.142857h201.837714V56.100571a23.771429 23.771429 0 0 1 47.286857-3.510857l0.256 3.510857V149.942857h344.795429V56.137143a23.771429 23.771429 0 0 1 23.771428-23.771429zM299.593143 197.485714l-201.874286 0.036572a25.6 25.6 0 0 0-25.344 22.125714l-0.219428 3.474286v705.828571a25.6 25.6 0 0 0 22.125714 25.380572l3.474286 0.219428h852.662857a25.6 25.6 0 0 0 25.380571-22.125714l0.219429-3.474286V223.085714a25.6 25.6 0 0 0-22.125715-25.380571l-3.474285-0.219429H739.474286v45.933715a23.771429 23.771429 0 0 1-47.286857 3.510857l-0.256-3.510857V197.485714H347.136v45.970286a23.771429 23.771429 0 0 1-47.286857 3.510857l-0.256-3.510857V197.485714z m112.274286 181.504l35.657142 6.656c-5.229714 18.066286-11.410286 34.706286-18.066285 50.870857h295.241143v33.28h-149.284572v76.068572h132.644572v32.804571h-132.644572v102.692572h164.498286v33.28h-164.498286v106.020571h-34.706286V714.605714H321.097143v-33.28h78.445714v-135.497143h141.202286v-76.068571h-127.890286a285.805714 285.805714 0 0 1-75.117714 84.626286l-22.820572-28.525715c48.018286-36.132571 80.347429-85.101714 96.987429-146.907428z m128.841142 199.68H433.737143v102.692572h106.971428v-102.692572z"  ></path></symbol><symbol id="icon-yue" viewBox="0 0 1024 1024"><path d="M371.959172 792.328828c29.837241-39.017931 47.315862-88.134621 52.788966-147.809104h197.843862v91.347862c0 13.312-5.508414 20.197517-16.066207 20.197517-17.44331 0-36.722759-0.918069-57.838345-1.836137l9.18069 32.591448h59.215448c25.705931 0 39.017931-13.312 39.017931-39.476966V388.378483h-263.026758v224.008827c-0.918069 63.346759-16.066207 115.67669-46.362483 156.989793l25.246896 22.951725z m250.632828-291.945931h-195.972414v-80.331035h195.972414v80.331035z m0 113.381517h-195.972414v-82.626207h195.972414v82.626207z"  ></path><path d="M917.645241 144.772414a70.62069 70.62069 0 0 1 70.62069 70.620689v681.489656a70.62069 70.62069 0 0 1-70.62069 70.620689H94.384552a70.62069 70.62069 0 0 1-70.62069-70.620689V215.393103a70.62069 70.62069 0 0 1 70.62069-70.620689h823.260689z m0 45.903448H94.384552a24.717241 24.717241 0 0 0-24.50538 21.362759l-0.211862 3.354482v681.489656a24.717241 24.717241 0 0 0 21.362759 24.505379l3.354483 0.211862h823.260689a24.717241 24.717241 0 0 0 24.50538-21.362759l0.211862-3.354482V215.393103a24.717241 24.717241 0 0 0-21.362759-24.505379l-3.354483-0.211862z"  ></path><path d="M312.214069 31.249655a22.951724 22.951724 0 0 1 22.704552 19.561931l0.247172 3.389793v180.824276a22.951724 22.951724 0 0 1-45.656276 3.389793l-0.247172-3.389793v-180.788965a22.951724 22.951724 0 0 1 22.951724-22.951724zM691.023448 31.249655a22.951724 22.951724 0 0 1 22.704552 19.561931l0.247172 3.389793v180.824276a22.951724 22.951724 0 0 1-45.656275 3.389793l-0.247173-3.389793v-180.788965a22.951724 22.951724 0 0 1 22.951724-22.951724z"  ></path></symbol></svg>',function(a){var l=(l=document.getElementsByTagName("script"))[l.length-1],c=l.getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var h,i,t,v,o,z=function(l,c){c.parentNode.insertBefore(l,c)};if(c&&!a.__iconfont__svg__cssinject__){a.__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)}}h=function(){var l,c=document.createElement("div");c.innerHTML=a._iconfont_svg_string_2459092,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(l=document.body).firstChild?z(c,l.firstChild):l.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),h()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(t=h,v=a.document,o=!1,p(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,m())})}function m(){o||(o=!0,t())}function p(){try{v.documentElement.doScroll("left")}catch(l){return void setTimeout(p,50)}m()}}(window);
\ No newline at end of file
+window._iconfont_svg_string_2459092 = '<svg><symbol id="icon-application" viewBox="0 0 1024 1024"><path d="M512 0l448 256v512l-448 256-448-256V256l448-256z m0 98.24l-362.88 207.36v412.8L512 925.76l362.88-207.36v-412.8L512 98.24z m224 200.448l64.64 37.312v74.688L736 448l-30.784-17.792-155.968 78.08v185.216l27.392 15.808v74.688L512 821.312l-64.64-37.312v-74.688l27.392-15.808V508.352L318.72 430.208 288 448l-64.64-37.312V336l64.64-37.312 64.64 37.312v27.712L512 443.52l159.36-79.872V336l64.64-37.312z" fill="#333333" ></path></symbol><symbol id="icon-datasource-select" viewBox="0 0 1024 1024"><path d="M512 42.666667C314.197333 42.666667 101.333333 102.314667 101.333333 233.344l0 557.312C101.333333 921.642667 314.197333 981.333333 512 981.333333c197.802667 0 410.666667-59.690667 410.666667-190.677333L922.666667 233.344C922.666667 102.314667 709.76 42.666667 512 42.666667zM864 790.656c0 72.874667-157.568 132.010667-352 132.010667-194.389333 0-352-59.136-352-132.010667l0-109.610667c60.629333 62.506667 206.762667 94.976 352 94.976 145.194667 0 291.370667-32.469333 352-94.976L864 790.656zM864 614.656l-0.128 0c0 0.256 0.128 0.682667 0.128 0.896 0 72.405333-157.568 131.072-352 131.072-194.389333 0-352-58.666667-352-131.072 0-0.256 0.128-0.682667 0.128-0.896L160 614.656l0-109.610667c60.629333 62.421333 206.762667 94.933333 352 94.933333 145.194667 0 291.370667-32.512 352-94.933333L864 614.656zM864 438.656l-0.128 0 0.128 0.896c0 72.405333-157.568 131.072-352 131.072-194.389333 0-352-58.666667-352-131.072l0.128-0.896L160 438.656 160 337.877333C236.885333 396.458667 377.770667 424.021333 512 424.021333c134.229333 0 275.114667-27.562667 352-86.101333L864 438.656zM512 365.312c-194.389333 0-352-59.136-352-132.010667 0-72.917333 157.610667-132.010667 352-132.010667 194.432 0 352 59.050667 352 132.010667C864 306.218667 706.432 365.312 512 365.312zM776.021333 776.021333c16.256 0 29.354667 13.098667 29.354667 29.354667s-13.098667 29.354667-29.354667 29.354667S746.666667 821.589333 746.666667 805.333333 759.765333 776.021333 776.021333 776.021333zM776.021333 599.978667c16.256 0 29.354667 13.098667 29.354667 29.354667s-13.098667 29.354667-29.354667 29.354667S746.666667 645.589333 746.666667 629.333333 759.765333 599.978667 776.021333 599.978667zM776.021333 424.021333c16.256 0 29.354667 13.098667 29.354667 29.354667s-13.098667 29.354667-29.354667 29.354667S746.666667 469.546667 746.666667 453.333333 759.765333 424.021333 776.021333 424.021333z"  ></path></symbol><symbol id="icon-zhongzhi2" viewBox="0 0 1024 1024"><path d="M874.24 874.24c-199.68 199.68-524.16 199.68-723.84 0s-199.68-524.16 0-723.84 524.16-199.68 723.84 0 199.68 524.16 0 723.84zM195.2 195.2a448.448 448.448 0 0 0 0 633.6 448.448 448.448 0 0 0 633.6 0 448.448 448.448 0 0 0 0-633.6 448.448 448.448 0 0 0-633.6 0z"  ></path><path d="M675.84 404.48l-271.36 271.36c-12.8 12.8-32.64 12.8-45.44 0-12.8-12.8-12.8-32.64 0-45.44l271.36-271.36c12.8-12.8 32.64-12.8 45.44 0 12.8 12.8 12.8 33.28 0 45.44z"  ></path><path d="M675.84 675.84c-12.8 12.8-32.64 12.8-45.44 0L359.04 404.48c-12.8-12.8-12.8-32.64 0-45.44 12.8-12.8 32.64-12.8 45.44 0l271.36 271.36c12.8 12.8 12.8 33.28 0 45.44z"  ></path></symbol><symbol id="icon-None_Select" viewBox="0 0 1024 1024"><path d="M0 0m512 0l0 0q512 0 512 512l0 0q0 512-512 512l0 0q-512 0-512-512l0 0q0-512 512-512Z" fill="#EBEBEB" ></path><path d="M562.405376 748.691456c-7.651328 20.02944-35.913728 20.250624-43.86816 0.352256L385.302528 415.9488c-7.692288-19.218432 11.38688-38.305792 30.613504-30.621696L748.99456 518.561792c19.8656 7.94624 19.70176 36.12672-0.262144 43.843584L613.5808 614.6048l-51.183616 134.10304v-0.016384z m-22.519808-73.097216l33.42336-87.57248a23.552 23.552 0 0 1 13.5168-13.55776l89.04704-34.398208-226.42688-90.570752 90.43968 226.0992z" fill="#8F959E" ></path><path d="M394.24 264.708096c70.270976 0 127.46752 55.95136 129.47456 125.730816l-50.601984-20.242432a82.436096 82.436096 0 1 0-103.05536 102.875136l20.258816 50.642944c-69.738496-2.072576-125.616128-59.244544-125.616128-129.47456 0-71.540736 57.99936-129.540096 129.540096-129.540096z" fill="#8F959E" ></path></symbol><symbol id="icon-button_right" viewBox="0 0 1024 1024"><path d="M-15.88624103 59.48859927h301.64928058c249.87872281 0 452.47392089 202.59519808 452.4739209 452.4739209S535.64176236 964.43644107 285.76303955 964.43644107H-15.88624103V59.48859927z" fill="#e6e6e6" ></path><path d="M285.76303955 97.19475935H-15.88624103v829.53552164h301.64928058c229.06492245 0 414.76776082-185.70283837 414.76776081-414.76776082S514.82796201 97.19475935 285.76303955 97.19475935zM-15.88624103 59.48859927v904.9478418h301.64928058c249.87872281 0 452.47392089-202.59519808 452.4739209-452.4739209S535.64176236 59.48859927 285.76303955 59.48859927H-15.88624103z" fill="#e3e3e3" ></path><path d="M113.40818187 377.31382255l134.46016681 134.46016682-134.46016681 134.42246066a9.42654002 9.42654002 0 0 0 0 13.34798068l13.31027449 13.3102745a9.42654002 9.42654002 0 0 0 13.34798065 0l147.8081475-147.77044133a18.85308003 18.85308003 0 0 0 0-26.65825517l-147.8081475-147.8081475a9.42654002 9.42654002 0 0 0-13.34798065 0l-13.31027449 13.34798069a9.42654002 9.42654002 0 0 0 0 13.34798065z" fill="#646A73" ></path><path d="M280.93665106 377.31382255l134.42246066 134.46016682-134.42246066 134.42246066a9.42654002 9.42654002 0 0 0 0 13.34798068l13.3102745 13.3102745a9.42654002 9.42654002 0 0 0 13.34798068 0l147.80814749-147.77044133a18.85308003 18.85308003 0 0 0 0-26.65825517l-147.80814749-147.8081475a9.42654002 9.42654002 0 0 0-13.34798068 0l-13.3102745 13.34798069a9.42654002 9.42654002 0 0 0 0 13.34798065z" fill="#646A73" ></path></symbol><symbol id="icon-icon-maybe" viewBox="0 0 1024 1024"><path d="M512 896A384 384 0 1 0 512 128a384 384 0 0 0 0 768z m0 85.312A469.312 469.312 0 1 1 512 42.688a469.312 469.312 0 0 1 0 938.624z m-21.312-298.624h42.624c11.776 0 21.376 9.536 21.376 21.312v42.688c0 11.776-9.6 21.312-21.376 21.312h-42.624a21.312 21.312 0 0 1-21.376-21.312V704c0-11.776 9.6-21.312 21.376-21.312z m-147.2-286.72a192 192 0 0 1 1.664-11.84c8.32-46.336 29.376-80.384 63.168-102.208 26.496-17.28 59.008-25.92 97.6-25.92 50.752 0 92.864 12.288 126.4 36.864 33.6 24.576 50.368 60.928 50.368 109.184 0 29.568-7.296 54.4-21.888 74.688-8.512 12.288-24.96 27.968-49.152 47.104l-23.936 18.752c-12.992 10.24-21.632 22.144-25.92 35.84a115.52 115.52 0 0 0-3.008 20.736 21.312 21.312 0 0 1-21.248 19.52h-47.808a21.312 21.312 0 0 1-21.248-23.296c2.752-29.696 5.76-48.512 8.832-56.384 5.824-14.72 20.864-31.552 45.12-50.688l24.576-19.456c8.064-6.144 49.728-35.456 49.728-61.44 0-25.92-4.48-35.456-17.6-49.664-12.992-14.272-42.368-18.88-68.8-18.88-26.048 0-48.32 6.912-59.2 24.448a123.328 123.328 0 0 0-12.16 25.6 89.28 89.28 0 0 0-3.072 13.12 21.312 21.312 0 0 1-20.992 17.728h-50.24a21.312 21.312 0 0 1-21.184-23.744z" fill="#646A73" ></path></symbol><symbol id="icon-icon_up-left_outlined" viewBox="0 0 1024 1024"><path d="M522.624 816.448L218.368 512.192l304.256-304.32a21.312 21.312 0 0 0 0-30.144l-30.144-30.208a21.312 21.312 0 0 0-30.144 0L127.872 481.984a42.688 42.688 0 0 0 0 60.352L462.336 876.8c8.32 8.32 21.76 8.32 30.144 0l30.144-30.208a21.312 21.312 0 0 0 0-30.144z" fill="#646A73" ></path><path d="M902.4 816.448L598.08 512.192 902.4 207.872a21.312 21.312 0 0 0 0-30.144l-30.144-30.208a21.312 21.312 0 0 0-30.208 0L507.584 481.984a42.688 42.688 0 0 0 0 60.352l334.464 334.464c8.32 8.32 21.824 8.32 30.208 0l30.08-30.208a21.312 21.312 0 0 0 0-30.144z" fill="#646A73" ></path></symbol><symbol id="icon-close" viewBox="0 0 1024 1024"><path d="M509.5424 447.0784l286.6176-286.6176a21.3504 21.3504 0 0 1 30.208 0l30.1568 30.208a21.3504 21.3504 0 0 1 0 30.1568L569.856 507.392l286.6176 286.6176a21.3504 21.3504 0 0 1 0 30.1568l-30.208 30.208a21.3504 21.3504 0 0 1-30.1568 0l-286.6176-286.6688-286.6176 286.6176a21.3504 21.3504 0 0 1-30.1568 0l-30.208-30.208a21.3504 21.3504 0 0 1 0-30.1056L449.28 507.392 162.6112 220.8256a21.3504 21.3504 0 0 1 0-30.208l30.208-30.1568a21.3504 21.3504 0 0 1 30.1056 0l286.6176 286.6176z" fill="#646A73" ></path></symbol><symbol id="icon-a-Frame3425" viewBox="0 0 1024 1024"><path d="M0 0m512 0l0 0q512 0 512 512l0 0q0 512-512 512l0 0q-512 0-512-512l0 0q0-512 512-512Z" fill="#EBEBEB" ></path><path d="M676.864 394.698752h-94.208V300.032h-235.52v423.936H464.896v47.104H323.584a23.552 23.552 0 0 1-23.552-23.552v-471.04a23.552 23.552 0 0 1 23.552-23.552h294.404096L723.959808 363.97056V464.896h-47.104v-70.197248z" fill="#8F959E" ></path><path d="M617.988096 747.52c24.264704 0 46.825472-7.340032 65.568768-19.931136l44.056576 44.064768a11.771904 11.771904 0 0 0 16.654336 0l19.98848-19.98848a11.780096 11.780096 0 0 0 0-16.654336l-45.047808-45.039616a117.211136 117.211136 0 0 0 16.539648-60.2112c0-65.04448-52.723712-117.76-117.768192-117.76-65.036288 0-117.751808 52.723712-117.751808 117.76 0 65.04448 52.71552 117.76 117.751808 117.76z m70.647808-117.76a70.656 70.656 0 1 1-141.312 0 70.656 70.656 0 0 1 141.312 0z" fill="#8F959E" ></path></symbol><symbol id="icon-icon-filter" viewBox="0 0 1024 1024"><path d="M682.688 487.68v429.632c0 11.776-9.6 21.376-21.376 21.376h-42.624a21.312 21.312 0 0 1-21.376-21.376v-448c0-6.272 1.344-12.16 3.84-17.536a40.96 40.96 0 0 1 17.024-19.968l235.136-140.352V170.688H170.688v122.24l228.032 136.32a42.688 42.688 0 0 1 27.968 40.064V768c0 11.776-9.6 21.312-21.376 21.312h-42.624A21.312 21.312 0 0 1 341.312 768V489.152L105.6 348.224a40.96 40.96 0 0 1-12.864-12.16A21.312 21.312 0 0 1 85.312 320V128c0-23.552 19.136-42.688 42.688-42.688h768a42.56 42.56 0 0 1 42.688 42.688v178.88a40.768 40.768 0 0 1 0 8.96V320a21.312 21.312 0 0 1-8.96 17.408 41.088 41.088 0 0 1-10.88 9.344l-236.16 140.992z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_Batch_outlined" viewBox="0 0 1024 1024"><path d="M149.312 554.688h277.376c23.552 0 42.624 19.072 42.624 42.624v277.376a42.688 42.688 0 0 1-42.624 42.624H149.312a42.688 42.688 0 0 1-42.624-42.624V597.312c0-23.552 19.072-42.624 42.624-42.624zM192 832h192v-192H192v192zM597.312 106.688h277.376c23.552 0 42.624 19.072 42.624 42.624v277.376a42.688 42.688 0 0 1-42.624 42.624H597.312a42.688 42.688 0 0 1-42.624-42.624V149.312c0-23.552 19.072-42.624 42.624-42.624zM640 384h192V192h-192v192zM597.312 554.688h277.376c23.552 0 42.624 19.072 42.624 42.624v277.376a42.688 42.688 0 0 1-42.624 42.624H597.312a42.688 42.688 0 0 1-42.624-42.624V597.312c0-23.552 19.072-42.624 42.624-42.624zM640 640v192h192v-192h-192z" fill="#1F2329" ></path><path d="M107.264 270.016a21.312 21.312 0 0 0 0 30.144l113.152 113.152a32 32 0 0 0 45.248 0l203.648-203.648a21.312 21.312 0 0 0 0-30.144l-30.144-30.208a21.312 21.312 0 0 0-30.208 0L243.072 315.264 167.616 239.872a21.312 21.312 0 0 0-30.144 0l-30.208 30.144z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_clear_outlined" viewBox="0 0 1024 1024"><path d="M384 384H192a64 64 0 0 0-64 64v490.688c0 23.552 19.072 42.624 42.688 42.624h682.624a42.688 42.688 0 0 0 42.688-42.624V448a64 64 0 0 0-64-64h-192V85.312a42.688 42.688 0 0 0-42.688-42.624H426.688A42.688 42.688 0 0 0 384 85.312V384z m85.312 85.312V128h85.376v341.312h256v128H213.312v-128h256z m-256 426.688v-213.312h597.376V896h-85.376v-85.312H640V896H554.688v-128H469.312v128H384v-85.312H298.688V896H213.312z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_dialpad_outlined" viewBox="0 0 1024 1024"><path d="M170.688 256a85.312 85.312 0 1 0 0-170.688 85.312 85.312 0 0 0 0 170.688zM170.688 597.312a85.312 85.312 0 1 0 0-170.624 85.312 85.312 0 0 0 0 170.624zM256 853.312a85.312 85.312 0 1 1-170.688 0 85.312 85.312 0 0 1 170.688 0zM512 256a85.312 85.312 0 1 0 0-170.688A85.312 85.312 0 0 0 512 256zM597.312 512a85.312 85.312 0 1 1-170.624 0 85.312 85.312 0 0 1 170.624 0zM512 938.688A85.312 85.312 0 1 0 512 768a85.312 85.312 0 0 0 0 170.688zM853.312 256a85.312 85.312 0 1 0 0-170.688 85.312 85.312 0 0 0 0 170.688zM938.688 512A85.312 85.312 0 1 1 768 512a85.312 85.312 0 0 1 170.688 0zM853.312 938.688a85.312 85.312 0 1 0 0-170.688 85.312 85.312 0 0 0 0 170.688z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_effects_outlined" viewBox="0 0 1024 1024"><path d="M124.7744 126.0544a42.6496 42.6496 0 0 1 40.2432-11.264l261.12 63.488L629.4016 45.056a42.6496 42.6496 0 0 1 66.048 34.4576l6.9632 245.0944 196.864 168.7552a42.6496 42.6496 0 0 1-12.1344 72.0896l-231.68 91.2384-91.2384 231.6288a42.6496 42.6496 0 0 1-72.0896 12.1344l-168.704-196.8128-245.0944-7.0144a42.6496 42.6496 0 0 1-34.5088-66.048l133.1712-203.264-63.488-261.0688a42.6496 42.6496 0 0 1 11.264-40.2432zM212.992 214.2208l51.3024 210.944a42.6496 42.6496 0 0 1-5.7856 33.4848l-101.4784 154.88 187.6992 5.376a42.7008 42.7008 0 0 1 31.232 14.848l134.8608 157.44 72.0896-182.9888a42.6496 42.6496 0 0 1 24.064-24.064l182.9376-72.0896-157.3888-134.8608a42.6496 42.6496 0 0 1-14.848-31.232l-5.376-187.648-154.88 101.4784a42.6496 42.6496 0 0 1-33.4848 5.7856L212.992 214.2208z" fill="#1F2329" ></path><path d="M698.7776 760.3712l195.328 195.328a21.3504 21.3504 0 0 0 30.208 0l30.1568-30.1568a21.3504 21.3504 0 0 0 0-30.1568l-195.3792-195.3792-43.264 17.1008-17.0496 43.264z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_magnify_outlined" viewBox="0 0 1024 1024"><path d="M366.1824 593.7664a21.3504 21.3504 0 0 1 30.208 0l30.1056 30.1568a21.3504 21.3504 0 0 1 0 30.208l-170.7008 170.6496h121.344c11.776 0 21.3504 9.5232 21.3504 21.2992v42.7008c0 11.776-9.5744 21.2992-21.3504 21.2992h-220.672a42.496 42.496 0 0 1-42.7008-42.6496v-220.16c0-11.776 9.5744-21.2992 21.3504-21.2992h42.6496c11.776 0 21.3504 9.5232 21.3504 21.2992v113.5104l167.0656-167.0144z m500.992-480a42.496 42.496 0 0 1 42.6496 42.6496v220.16c0 11.776-9.5232 21.3504-21.3504 21.3504h-42.6496a21.3504 21.3504 0 0 1-21.3504-21.3504V263.168L657.408 430.08a21.3504 21.3504 0 0 1-30.1568 0l-30.208-30.208a21.3504 21.3504 0 0 1 0-30.1568l170.752-170.6496h-121.344a21.3504 21.3504 0 0 1-21.3504-21.3504V135.168c0-11.776 9.5744-21.3504 21.3504-21.3504h220.672z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_moments-categories_outlined" viewBox="0 0 1024 1024"><path d="M523.456 113.92l429.568 273.408a21.312 21.312 0 0 1 0 36.032L523.52 696.704a21.312 21.312 0 0 1-22.912 0L70.976 423.36a21.312 21.312 0 0 1 0-36.032L500.48 113.984c7.04-4.48 15.936-4.48 22.912 0zM201.6 405.376L512 602.88l310.4-197.568L512 207.808 201.6 405.312z" fill="#1F2329" ></path><path d="M110.784 592.448a21.312 21.312 0 0 0-29.312 7.04l-22.336 36.416a21.312 21.312 0 0 0 7.04 29.312l390.592 239.488c27.456 16.832 61.696 16.832 89.088 0l390.656-239.488a21.312 21.312 0 0 0 7.04-29.312l-22.336-36.416a21.312 21.312 0 0 0-29.312-7.04L506.88 828.544a10.688 10.688 0 0 1-11.136 0L110.784 592.448z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_pc_outlined" viewBox="0 0 1024 1024"><path d="M917.312 85.312H106.688A42.688 42.688 0 0 0 64 128v597.312c0 23.552 19.072 42.688 42.688 42.688h810.624a42.688 42.688 0 0 0 42.688-42.688V128a42.688 42.688 0 0 0-42.688-42.688z m-768 469.376v-384h725.376v384H149.312z m0 85.312h725.376v42.688H149.312V640z m149.376 213.312h426.624v85.376H298.688v-85.376z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_phone_outlined" viewBox="0 0 1024 1024"><path d="M426.688 234.688h170.624V320H426.688V234.688zM576 704H448v85.312h128V704z" fill="#1F2329" ></path><path d="M213.312 64a42.688 42.688 0 0 0-42.624 42.688v810.624c0 23.552 19.072 42.688 42.624 42.688h597.376a42.688 42.688 0 0 0 42.624-42.688V106.688A42.688 42.688 0 0 0 810.688 64H213.312zM256 149.312h512v725.376H256V149.312z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_redo_outlined" viewBox="0 0 1024 1024"><path d="M704.256 115.648l209.152 209.152a22.784 22.784 0 0 1 0 32.192l-229.312 229.312a22.784 22.784 0 0 1-32.128 0l-28.16-28.16a22.784 22.784 0 0 1 0-32.192l156.096-156.16H412.416a213.312 213.312 0 1 0 0 426.688h162.176c12.544 0 22.72 10.176 22.72 22.72v39.808c0 12.608-10.176 22.784-22.72 22.784H398.208A299.2 299.2 0 0 1 113.792 583.04 298.688 298.688 0 0 1 398.272 284.8v-0.384h354.048L643.904 176a22.784 22.784 0 0 1 0-32.192l28.16-28.16a22.784 22.784 0 0 1 32.192 0z" fill="#1F2329" ></path></symbol><symbol id="icon-icon_undo_outlined" viewBox="0 0 1024 1024"><path d="M329.6256 115.8656L120.4224 325.12a22.7328 22.7328 0 0 0 0 32.2048l229.3248 229.2736a22.784 22.784 0 0 0 32.1536 0l28.16-28.16a22.7328 22.7328 0 0 0 0-32.2048L253.952 369.9712l371.8656-0.2048v0.256a213.3504 213.3504 0 1 1 0 426.6496v-0.256l-166.5024 0.256c-12.5952 0-22.7328 10.1888-22.7328 22.7328v39.8336c0 11.008 7.7824 20.1728 18.176 22.272l4.608 0.512L614.4 881.664l11.3664 0.3072a298.6496 298.6496 0 1 0 0-597.3504v-0.2048L281.6 284.6208l108.3904-108.3904a22.7328 22.7328 0 0 0 0-32.2048l-28.16-28.16a22.7328 22.7328 0 0 0-32.1536 0z" fill="#1F2329" ></path></symbol><symbol id="icon-icon-more" viewBox="0 0 1024 1024"><path d="M768 448h85.3504a21.2992 21.2992 0 0 1 21.2992 21.3504v85.2992a21.2992 21.2992 0 0 1-21.2992 21.3504H768a21.3504 21.3504 0 0 1-21.3504-21.3504V469.3504A21.3504 21.3504 0 0 1 768 448z m-597.3504 0H256a21.3504 21.3504 0 0 1 21.3504 21.3504v85.2992A21.3504 21.3504 0 0 1 256 576H170.6496a21.3504 21.3504 0 0 1-21.2992-21.3504V469.3504a21.3504 21.3504 0 0 1 21.2992-21.3504z m298.7008 0h85.2992a21.3504 21.3504 0 0 1 21.3504 21.3504v85.2992a21.4016 21.4016 0 0 1-21.3504 21.3504H469.3504a21.3504 21.3504 0 0 1-21.3504-21.3504V469.3504a21.3504 21.3504 0 0 1 21.3504-21.3504z" fill="#1F2329" ></path></symbol><symbol id="icon-icon-quicksetting" viewBox="0 0 1024 1024"><path d="M704 725.3504h207.36c9.472 0 12.9024 1.024 16.384 2.816 3.4816 1.8944 6.1952 4.608 8.0896 8.0896 1.8432 3.4816 2.816 6.912 2.816 16.384v30.72c0 9.472-0.9728 12.9024-2.816 16.384a19.4048 19.4048 0 0 1-8.0896 8.0896c-3.4816 1.8432-6.912 2.816-16.384 2.816h-207.36V911.36c0 9.5232-1.024 12.9536-2.8672 16.4352a19.4048 19.4048 0 0 1-8.0384 8.0896c-3.4816 1.8432-6.912 2.816-16.4352 2.816h-30.6176c-9.5232 0-13.0048-0.9728-16.4864-2.816a19.4048 19.4048 0 0 1-8.0384-8.0896c-1.8432-3.4816-2.8672-6.912-2.8672-16.384v-100.7104H112.6912c-9.5232 0-12.9536-0.9728-16.4352-2.816a19.4048 19.4048 0 0 1-8.0896-8.0896c-1.8432-3.4816-2.816-6.912-2.816-16.384v-30.72c0-9.472 0.9728-12.9024 2.816-16.384a19.3536 19.3536 0 0 1 8.0896-8.0896c3.4816-1.8432 6.912-2.816 16.384-2.816h506.0096V624.64c0-9.5232 1.024-12.9536 2.8672-16.4352a19.3536 19.3536 0 0 1 8.0896-8.0896c3.4304-1.8432 6.912-2.816 16.384-2.816h30.6688c9.5232 0 12.9536 1.024 16.384 2.816 3.5328 1.8944 6.2464 4.608 8.0896 8.0896 1.8944 3.4816 2.8672 6.912 2.8672 16.384v100.7104z m-384-512V112.64c0-9.5232 1.024-12.9536 2.8672-16.4352a19.4048 19.4048 0 0 1 8.0384-8.0896c3.4816-1.8432 6.912-2.816 16.4352-2.816h30.6688c9.472 0 12.9536 1.024 16.384 2.816 3.4816 1.8944 6.2464 4.608 8.0896 8.0896 1.8432 3.4816 2.8672 6.912 2.8672 16.384v100.7104h505.9584c9.5232 0 12.9536 1.024 16.4352 2.816 3.4816 1.8944 6.1952 4.608 8.0896 8.0896 1.8432 3.4816 2.816 6.912 2.816 16.384v30.72c0 9.472-0.9728 12.9024-2.816 16.384a19.3536 19.3536 0 0 1-8.0896 8.0896c-3.4816 1.8432-6.912 2.816-16.384 2.816H405.2992V399.36c0 9.5232-1.024 12.9536-2.8672 16.4352a19.4048 19.4048 0 0 1-8.0384 8.0896c-3.4816 1.8432-6.9632 2.816-16.4352 2.816h-30.6688c-9.5232 0-12.9536-0.9728-16.384-2.816a19.4048 19.4048 0 0 1-8.0896-8.0896c-1.8944-3.4816-2.8672-6.912-2.8672-16.384V298.5984H112.64c-9.472 0-12.9024-0.9728-16.384-2.816a19.4048 19.4048 0 0 1-8.0896-8.0896c-1.8432-3.4816-2.816-6.912-2.816-16.384v-30.72c0-9.472 0.9728-12.9024 2.816-16.384a19.3536 19.3536 0 0 1 8.0896-8.0896c3.4816-1.8432 6.912-2.816 16.384-2.816h207.36z" fill="#1F2329" ></path></symbol><symbol id="icon-square-selected" viewBox="0 0 1024 1024"><path d="M832 96H192c-52.929 0-96 43.073-96 96.002v640C96 884.929 139.07 928 192 928h640c52.927 0 96-43.072 96-96V192c0-52.93-43.071-96-96-96zM727.231 438.433L471.008 697.44c-0.064 0.064-0.193 0.096-0.257 0.193-0.096 0.063-0.096 0.192-0.192 0.256-2.05 1.984-4.576 3.2-6.945 4.545-1.183 0.672-2.143 1.696-3.392 2.176-3.84 1.536-7.904 2.336-11.967 2.336-4.096 0-8.225-0.8-12.097-2.4-1.28-0.543-2.303-1.632-3.52-2.303-2.368-1.344-4.831-2.529-6.88-4.545-0.064-0.063-0.097-0.192-0.16-0.256-0.064-0.096-0.193-0.096-0.256-0.193L299.325 567.745c-12.32-12.673-12.033-32.928 0.64-45.248 12.673-12.288 32.895-12.064 45.248 0.64l103.263 106.112 233.28-235.809c12.417-12.576 32.705-12.672 45.248-0.256 12.516 12.448 12.644 32.705 0.227 45.248z"  ></path></symbol><symbol id="icon-italic" viewBox="0 0 1024 1024"><path d="M191.77728 949.728l9.728-48.576q12.576-4 35.136-9.44t41.152-10.848 34.016-13.44q16-20 23.424-57.728 0.576-4 35.424-165.152t65.152-310.56 29.728-169.44v-14.272q-13.728-7.424-31.136-10.56t-39.712-4.576-33.152-3.136l10.848-58.848q18.848 1.152 68.576 3.712t85.44 4 68.864 1.44q27.424 0 56.288-1.44t69.152-4 56.288-3.712q-2.848 22.272-10.848 50.848-17.152 5.728-58.016 16.288t-62.016 19.136q-4.576 10.848-8 24.288t-5.152 22.848-4.288 26.016-3.712 24q-15.424 84.576-50.016 239.712t-44.288 203.136l-7.424 33.152q-6.272 28-11.424 51.424t-9.152 47.712-3.424 32.864l0.576 10.272q9.728 2.272 105.728 17.728-1.728 25.152-9.152 56.576-6.272 0-18.56 0.864t-18.56 0.864q-16.576 0-49.728-5.728t-49.152-5.728q-78.848-1.152-117.728-1.152-29.152 0-81.728 5.152T191.77728 949.696z" fill="" ></path></symbol><symbol id="icon-jiantou" viewBox="0 0 1024 1024"><path d="M778.965749 128.759549l-383.064442 383.063419 388.097062 388.096039-0.070608 0.033769c12.709463 13.137205 20.529569 31.024597 20.529569 50.731428 0 40.376593-32.736589 73.112158-73.115228 73.112158-19.705807 0-37.591153-7.819083-50.730405-20.528546l-0.034792 0.035816L241.890654 564.622498l0.035816-0.035816c-13.779841-13.281491-22.3838-31.915897-22.3838-52.585659 0-0.071631 0-0.106424 0-0.178055 0-0.072655 0-0.10847 0-0.144286 0-20.669762 8.603959-39.341007 22.3838-52.622498l-0.035816-0.034792L680.573835 20.337187l0.180102 0.179079c13.139252-12.5662 30.950919-20.313651 50.587142-20.313651 40.378639 0 73.115228 32.736589 73.115228 73.114205C804.455283 95.485725 794.567076 115.334795 778.965749 128.759549z"  ></path></symbol><symbol id="icon-magic-line" viewBox="0 0 1024 1024"><path d="M648.490667 424.32a110.933333 110.933333 0 0 1-33.706667-66.176l-17.194667-131.541333-116.48 63.402666a110.933333 110.933333 0 0 1-73.386666 11.648L277.333333 277.333333l24.32 130.389334a110.933333 110.933333 0 0 1-11.648 73.386666l-63.402666 116.48 131.541333 17.194667a110.933333 110.933333 0 0 1 66.133333 33.706667l91.221334 96.298666 57.002666-119.765333a110.933333 110.933333 0 0 1 52.48-52.522667l119.808-57.002666-96.298666-91.178667z m1.066666 237.354667l-94.421333 198.4a25.6 25.6 0 0 1-41.685333 6.613333l-151.125334-159.530667a25.6 25.6 0 0 0-15.232-7.765333l-217.898666-28.501333a25.6 25.6 0 0 1-19.157334-37.589334l105.045334-193.024a25.6 25.6 0 0 0 2.645333-16.896L177.493333 207.36a25.6 25.6 0 0 1 29.866667-29.866667l216.021333 40.234667a25.6 25.6 0 0 0 16.896-2.645333l193.024-105.045334a25.6 25.6 0 0 1 37.589334 19.2l28.501333 217.856a25.6 25.6 0 0 0 7.765333 15.232l159.530667 151.125334a25.6 25.6 0 0 1-6.613333 41.685333l-198.4 94.421333a25.6 25.6 0 0 0-12.117334 12.117334z m34.005334 82.218666l60.330666-60.330666 181.034667 180.992-60.373333 60.373333-180.992-181.034667z"  ></path></symbol><symbol id="icon-gengduo" viewBox="0 0 1024 1024"><path d="M746.662019 512c0 51.835575 42.044582 93.865831 93.865831 93.865831 51.851948 0 93.865831-42.029232 93.865831-93.865831 0-51.836599-42.013883-93.865831-93.865831-93.865831C788.706601 418.135192 746.662019 460.163401 746.662019 512z"  ></path><path d="M89.604272 512c0 51.835575 42.043558 93.865831 93.864808 93.865831 51.822272 0 93.865831-42.029232 93.865831-93.865831 0-51.836599-42.043558-93.865831-93.865831-93.865831C131.648854 418.135192 89.604272 460.163401 89.604272 512z"  ></path><path d="M418.132634 512c0 51.835575 42.013883 93.865831 93.866854 93.865831 51.821249 0 93.864808-42.029232 93.864808-93.865831 0-51.836599-42.043558-93.865831-93.864808-93.865831C460.146517 418.135192 418.132634 460.163401 418.132634 512z"  ></path></symbol><symbol id="icon-qingkong" viewBox="0 0 1024 1024"><path d="M444.8 445.184H377.6V66.752C377.6 29.888 407.68 0 444.8 0h134.4c37.12 0 67.136 29.888 67.136 66.752v378.432h-67.2v-349.44a29.056 29.056 0 0 0-29.056-28.992h-76.16a28.992 28.992 0 0 0-29.12 28.992v349.44z m134.4 0h313.408c37.12 0 67.2 29.952 67.2 66.816v155.84H64.192V512c0-36.864 30.08-66.816 67.2-66.816H444.8V512H160.448a29.056 29.056 0 0 0-29.056 28.928v60.16h761.216v-60.16A28.992 28.992 0 0 0 863.552 512H579.2V445.184z m62.272 512h60.8V823.68h-60.8v133.568h-465.28a44.672 44.672 0 0 1-44.8-44.544v-155.84h761.216v155.84a44.672 44.672 0 0 1-44.8 44.544h-15.744V823.68h-62.592v133.568h-256 128z m-577.28 0c0 36.928 30.08 66.816 67.2 66.816h761.216c37.12 0 67.2-29.888 67.2-66.752v-267.136H64.192v267.136z"  ></path></symbol><symbol id="icon-chakan" viewBox="0 0 1024 1024"><path d="M747.7 288.2c0-17.6-14.4-32.1-32.1-32.1H306.4c-17.6 0-32.1 14.4-32.1 32.1 0 17.6 14.4 32.1 32.1 32.1h409.2c17.7 0 32.1-14.5 32.1-32.1zM306.4 448c-17.6 0-32.1 14.4-32.1 32.1 0 17.6 14.4 32.1 32.1 32.1h191.1c17.7 0 32.2-14.4 32.1-32.1 0-17.6-14.4-32.1-32.1-32.1H306.4zM766.6 776.8c-2.1-2.1-4.4-3.9-6.9-5.2 18.1-25.8 28.7-57.1 28.7-90.9 0-88.2-72.4-159.6-161.7-159.6S465 592.5 465 680.7s72.4 159.6 161.7 159.6c32.7 0 63.2-9.6 88.7-26.1 1.5 2.9 3.4 5.6 5.8 8l83.3 83.3c12.5 12.5 32.9 12.5 45.4 0s12.5-32.9 0-45.4l-83.3-83.3z m-139.9 0.6c-54.1 0-98-43.3-98-96.7s43.9-96.7 98-96.7 98 43.3 98 96.7c0 53.4-43.8 96.7-98 96.7z" fill="#4D4D4D" ></path><path d="M577.6 895.4H221.2c-35.2 0-64-28.8-64-64V192.8c0-35.2 28.8-64 64-64h547.3c35.2 0 64 28.8 64 64v318.4h0.3v0.1c0 17.7 14.4 32.1 32.2 32.1s32.2-14.4 32.2-32.1c0-1.2-0.1-2.3-0.2-3.5v-316c0-70.4-27.6-128-98-128H225c-70.4 0-128 57.6-128 128v639.8c0 70.4 57.6 128 128 128h352.2c17.8 0 32.2-14.4 32.2-32.1 0-17.6-14.2-31.9-31.8-32.1z" fill="#4D4D4D" ></path><path d="M832.7 639.3a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#4D4D4D" ></path></symbol><symbol id="icon-outline-redo" viewBox="0 0 1024 1024"><path d="M378.410667 813.226667a245.333333 245.333333 0 1 1 0-490.666667h469.333333a32.213333 32.213333 0 0 1 32 32 32.213333 32.213333 0 0 1-32 32h-469.333333a181.333333 181.333333 0 1 0 0 362.666667h341.333333a32 32 0 0 1 0 64z" fill="#292D32" ></path><path d="M727.04 483.925333a32.170667 32.170667 0 0 1 0-45.226666l86.613333-86.613334-86.613333-86.741333a32 32 0 0 1 45.184-45.184l109.226667 109.226667a32.170667 32.170667 0 0 1 0 45.226666l-109.226667 109.312a31.914667 31.914667 0 0 1-45.226667 0z" fill="#292D32" ></path></symbol><symbol id="icon-outline-undo" viewBox="0 0 1024 1024"><path d="M304.256 813.226667a32 32 0 0 1 0-64h341.333333a181.333333 181.333333 0 0 0 0-362.666667h-469.333333a32.213333 32.213333 0 0 1-32-32 32.213333 32.213333 0 0 1 32-32h469.333333a245.333333 245.333333 0 1 1 0 490.666667z" fill="#292D32" ></path><path d="M251.776 483.925333l-109.226667-109.354666a32.170667 32.170667 0 0 1 0-45.226667l109.226667-109.184a32 32 0 0 1 45.226667 45.226667l-86.613334 86.613333 86.613334 86.613333a32.170667 32.170667 0 0 1 0 45.226667 30.933333 30.933333 0 0 1-22.613334 9.386667 31.658667 31.658667 0 0 1-22.613333-9.301334z" fill="#292D32" ></path></symbol><symbol id="icon-dingwei" viewBox="0 0 1024 1024"><path d="M511.492567 260.820614q52.773043 0 98.949455 19.789891t80.681863 54.295342 54.295342 80.681863 19.789891 98.949455-19.789891 99.456888-54.295342 81.189296-80.681863 54.295342-98.949455 19.789891-98.949455-19.789891-80.681863-54.295342-54.295342-81.189296-19.789891-99.456888 19.789891-98.949455 54.295342-80.681863 80.681863-54.295342 98.949455-19.789891zM1018.925669 450.600595l0 127.873142-60.891972 0q-10.148662 75.100099-43.131814 141.066402t-84.233895 117.217047-116.709613 84.741328-140.558969 43.639247l0 58.86224-126.858276 0 0-58.86224q-75.100099-11.163528-140.051536-45.161546t-115.187314-84.741328-83.219029-116.20218-42.116947-140.558969l-64.951437 0 0-127.873142 65.966303 0q11.163528-73.070367 44.654113-136.499504t83.726462-113.157582 114.172448-82.204163 137.006938-43.639247l0-70.025768 126.858276 0 0 69.010902q74.085233 10.148662 138.529237 43.131814t115.187314 82.711596 84.233895 113.665015 44.654113 137.006938l62.921705 0zM511.492567 833.205154q65.966303 0 124.32111-24.864222t101.48662-68.503469 68.503469-101.994054 25.371655-124.32111-25.371655-124.32111-68.503469-101.48662-101.48662-68.503469-124.32111-25.371655-124.32111 25.371655-101.994054 68.503469-68.503469 101.48662-24.864222 124.32111 24.864222 124.32111 68.503469 101.994054 101.994054 68.503469 124.32111 24.864222z"  ></path></symbol><symbol id="icon-fuwenbenkuang" viewBox="0 0 1024 1024"><path d="M218.316 307.727h87.886v205.06h-29.297v29.295h117.179v-29.294H364.79V307.727h87.882v29.293h29.294v-87.882H189.022v87.882h29.294v-29.293z m322.242 58.59h292.945v58.588H540.558v-58.588z m0 117.177h292.945v58.588H540.558v-58.588z m-351.536 117.18h644.481v58.588h-644.48v-58.587z m0 117.176h644.481v58.588h-644.48V717.85z m351.536-468.713h292.945v58.589H540.558v-58.589z m420.923 713.13H61.045V63.309h900.436v898.958z m-864.62-35.816h828.804V99.125H96.861V926.45z"  ></path></symbol><symbol id="icon-unpublish" viewBox="0 0 1024 1024"><path d="M496.554728 396.587434c0.065492 0.064468 0.134053 0.130983 0.201591 0.196475 9.279341 9.019421 24.251334 8.931416 33.385365-0.196475l145.869229-145.894811c7.78122-7.779174 7.779174-20.392446 0-28.170596-7.78122-7.77815-20.394493-7.77815-28.172643 0.001023l-134.491087 134.509507-137.185452-137.204895c-3.889587-3.889587-8.987698-5.834892-14.086833-5.834892s-10.1952 1.944282-14.086833 5.833869c-7.78122 7.77815-7.78122 20.391423-0.002047 28.17162L496.554728 396.587434z"  ></path><path d="M515.341606 365.052207c11.002588 0 19.922748-8.918114 19.922748-19.919678l0-273.459139c0-11.002588-8.92016-19.920702-19.922748-19.920702s-19.922748 8.918114-19.922748 19.920702l0 273.459139C495.419881 356.135116 504.340041 365.052207 515.341606 365.052207z"  ></path><path d="M1021.511831 622.11798 1021.511831 622.11798c0-11.722996 0-23.447015-11.726066-35.167964l-5.859451-5.861498-189.18885-215.316927c-5.858428-5.862521-11.720949-11.721973-23.441898-11.721973l-103.45728 0c-17.58347 0-30.365588 6.424316-30.365588 24.009833 0 17.582447 12.782118 19.769252 30.365588 19.769252l105.507986 0 150.20907 174.151365-150.20907 0c-23.447015 0-46.89403 17.58654-52.753481 41.028439l-29.308513 85.307921c-5.861498 23.445992-29.306466 41.028439-52.753481 41.028439l-281.34576 0c-23.444968 0-53.248761-17.582447-59.111283-41.028439l-32.483832-89.546456c-11.722996-17.582447-6.372128-33.521464-49.078789-35.166941l-143.850246 0 143.850246-167.792541 99.645464 0c17.58347 0 29.305443-2.187829 29.305443-19.769252 0-17.585517-11.721973-25.072025-29.305443-25.072025l-98.156554 0c-5.862521 0-17.58654 5.862521-23.447015 11.725042l-194.48446 214.255759c0 0-17.585517 23.444968-17.585517 35.167964l0 0c0 0 0 0 0 5.861498l0 293.070802c0 29.306466 11.294231 51.197032 40.600697 51.197032l937.824315 0c29.306466 0 40.600697-21.89159 40.600697-51.197032L1021.508761 622.11798C1021.511831 627.979478 1021.511831 627.979478 1021.511831 622.11798L1021.511831 622.11798zM980.911134 927.405011l-937.824315 0 0-315.319525 202.962551 0 29.306466 93.782943c17.58654 46.889937 49.078789 76.762291 101.83227 76.762291l269.622764 0c52.755528 0 93.782943-24.009833 111.367437-76.762291l29.306466-93.782943 193.426361 0 0 308.963771L980.911134 927.405011z"  ></path><path d="M511.999488 627.979478 511.999488 627.979478 511.999488 627.979478Z"  ></path></symbol><symbol id="icon-publish" viewBox="0 0 1024 1024"><path d="M527.445272 58.661028c-0.065492-0.064468-0.134053-0.130983-0.201591-0.196475-9.279341-9.019421-24.251334-8.931416-33.385365 0.196475l-145.869229 145.894811c-7.78122 7.779174-7.779174 20.392446 0 28.170596 7.78122 7.77815 20.394493 7.77815 28.172643-0.001023l134.491087-134.509507 137.185452 137.204895c3.889587 3.889587 8.987698 5.834892 14.086833 5.834892s10.1952-1.944282 14.086833-5.833869c7.78122-7.77815 7.78122-20.391423 0.002047-28.17162L527.445272 58.661028z"  ></path><path d="M508.658394 90.196255c-11.002588 0-19.922748 8.918114-19.922748 19.919678l0 273.459139c0 11.002588 8.92016 19.920702 19.922748 19.920702s19.922748-8.918114 19.922748-19.920702l0-273.459139C528.580119 99.114368 519.660982 90.196255 508.658394 90.196255z"  ></path><path d="M1021.511831 622.11798 1021.511831 622.11798c0-11.722996 0-23.447015-11.726066-35.167964l-5.858428-5.861498-189.189873-215.316927c-5.858428-5.862521-11.719926-11.721973-23.441898-11.721973l-103.456257 0c-17.584494 0-30.365588 6.424316-30.365588 24.009833 0 17.582447 12.781094 19.769252 30.365588 19.769252l105.507986 0L943.557388 571.98007 793.349341 571.98007c-23.448038 0-46.89403 17.58654-52.754504 41.028439l-29.308513 85.307921c-5.860475 23.445992-29.306466 41.028439-52.752458 41.028439l-281.34576 0c-23.445992 0-53.249785-17.582447-59.112306-41.028439l-32.483832-89.546456c-11.722996-17.582447-6.372128-33.521464-49.078789-35.166941l-143.850246 0 143.850246-167.792541 99.646488 0c17.582447 0 29.30442-2.187829 29.30442-19.769252 0-17.585517-11.721973-25.072025-29.30442-25.072025l-98.157577 0c-5.862521 0-17.58654 5.862521-23.447015 11.725042l-194.48446 214.255759c0 0-17.585517 23.444968-17.585517 35.167964l0 0c0 0 0 0 0 5.861498l0 293.070802c0 29.306466 11.294231 51.197032 40.600697 51.197032L980.912158 972.247312c29.306466 0 40.600697-21.89159 40.600697-51.197032L1021.512854 622.11798C1021.511831 627.979478 1021.511831 627.979478 1021.511831 622.11798L1021.511831 622.11798zM980.912158 927.405011l-937.824315 0 0-315.319525 202.962551 0 29.306466 93.782943c17.58654 46.889937 49.078789 76.762291 101.833293 76.762291l269.622764 0c52.754504 0 93.78192-24.009833 111.366414-76.762291l29.306466-93.782943L980.912158 612.085486l0 308.963771L980.912158 927.405011z"  ></path><path d="M511.999488 627.979478 511.999488 627.979478 511.999488 627.979478Z"  ></path></symbol><symbol id="icon-fabu" viewBox="0 0 1024 1024"><path d="M945.93 130.759c-7.638-15.276-26.279-21.619-41.684-13.981L92.312 520.027c-15.276 7.638-21.619 26.279-13.981 41.684 1.683 3.365 3.884 6.343 6.473 8.803 3.365 3.237 7.378 5.696 12.169 7.249l273.148 85.828 41.943-52.041-222.919-70.035 611.539-303.957-327.131 395.999a22.868 22.868 0 0 0-2.071 2.848l-37.801 46.991v194.957c0 17.218 13.852 31.069 31.069 31.069s31.069-13.852 31.069-31.069v-175.54l297.097 93.206c3.495 1.036 6.991 1.553 10.485 1.423 15.017 0.388 28.609-10.227 31.457-25.502l113.79-621.507c0.388-2.071 0.517-4.272 0.517-6.343-0.13-4.402-1.036-9.062-3.237-13.333zM779.969 726.893l-240.396-75.472L866.314 255.81l-86.346 471.082z"  ></path></symbol><symbol id="icon-piliang-copy" viewBox="0 0 1024 1024"><path d="M494.22223282 163.02847099c-4.87200737-4.17291641-10.90581894-6.14118577-16.97825432-5.56028366-5.1176548 0.37387848-12.45308876 2.87824631-20.90938567 12.75821687l-178.74326707 208.76014709L162.55726051 279.26991653c-17.11575508-14.83926773-32.85264016-5.82292556-38.77830505 1.01348877-7.61120796 8.77532959-10.83011628 23.96221162 5.13001442 37.79880524L257.29374123 429.37594604c2.52290725 2.18688011 5.06280899 3.68239402 7.58957862 4.88591194 8.83944512 7.49456406 23.96993637 10.54198265 37.65666962-5.44441222l193.52305413-226.0180378c13.73694419-16.04587554 6.16127014-32.91675567-1.84081078-39.77093697zM434.14984893 540.95781517H162.50009727c-24.66284752 0-44.65762138 19.99168396-44.65762138 44.65221405V857.25823593c0 24.66207504 19.99477386 44.65684891 44.65684891 44.65684891h271.64666175c24.66207504 0 44.65684891-19.99091148 44.65684892-44.65684891V585.60925674c0-24.66130256-19.99091148-44.65221405-44.65298653-44.65221404z m4.54756737 286.11977577c0 19.18367386-15.55303574 34.73052979-34.73052978 34.73052979H192.68383217c-19.18367386 0-34.73052979-15.54840088-34.73052979-34.73052979V615.7945366c0-19.18290139 15.55149079-34.73052979 34.73052979-34.73052979h211.2815094c19.18212891 0 34.73052979 15.55149079 34.73052979 34.73052979V827.07759094z m423.7541771-707.5881958H590.80802155c-24.66284752 0-44.653759 19.99477386-44.65375901 44.65684891v271.64743424c0 24.66130256 19.99168396 44.65684891 44.653759 44.65684891h271.64588929c24.66207504 0 44.65684891-19.99554634 44.6568489-44.65684891V164.14624405c0-24.66284752-19.99168396-44.65762138-44.65839386-44.65762138z m4.55142975 286.1190033c0 19.18290139-15.54608345 34.73052979-34.73052979 34.73052979H620.99021149c-19.18212891 0-34.73052979-15.55149079-34.7305298-34.73052979V194.32920647c0-19.18212891 15.55226326-34.73052979 34.73052979-34.73052979h211.28305436c19.18367386 0 34.73052979 15.55226326 34.73052978 34.73052979v211.27841949z m-4.55142975 137.52548218H590.80802155c-24.66284752 0-44.653759 19.99013901-44.65375901 44.6568489V859.43661881c0 24.66207504 19.99168396 44.65221405 44.653759 44.65221405h271.64588929c24.66207504 0 44.65684891-19.99168396 44.6568489-44.65221405V587.78995705c0-24.6667099-19.99168396-44.65684891-44.65839386-44.65684891z m4.55142975 286.11745834c0 19.18367386-15.54608345 34.73130227-34.73052979 34.73130226H620.99021149c-19.18212891 0-34.73052979-15.55149079-34.7305298-34.73052979V617.9682846c0-19.18212891 15.55226326-34.72975731 34.73052979-34.7297573h211.28305436c19.18367386 0 34.73052979 15.55149079 34.73052978 34.73052978v211.2815094z"  ></path></symbol><symbol id="icon-tupian" viewBox="0 0 1024 1024"><path d="M869.54496 917.40672 357.52448 917.40672l-218.59328-0.41984c-0.63488-0.01536-1.26464-0.04096-1.8944-0.10752-25.9328-2.59584-49.92-14.67904-67.52256-34.01728-17.73568-19.48672-27.50464-44.73344-27.50464-71.08608L42.0096 262.02112c0-58.24512 47.39072-105.63584 105.63584-105.63584l721.89952 0c58.25024 0 105.63584 47.39072 105.63584 105.63584l0 235.38176c0 0.2816-0.01024 0.56832-0.02048 0.86016-0.0256 0.51712-2.05312 53.98528 16.15872 89.19552 4.9152 9.51808 1.19296 21.2224-8.32 26.14272s-21.22752 1.20832-26.14784-8.30464c-22.23104-42.9824-20.7104-101.91872-20.48-108.28288L936.3712 262.02112c0-36.84352-29.9776-66.82624-66.82624-66.82624L147.64544 195.19488c-36.84864 0-66.83136 29.98272-66.83136 66.82624l0 549.76c0 34.18624 25.38496 62.5664 59.20256 66.39616l217.54368 0.42496 511.98464 0c36.84864 0 66.83648-29.97248 66.83648-66.82112l-0.40448-97.78688c-0.10752-1.81248-1.65376-20.4032-20.4032-44.34944-0.0512-0.06656-0.09728-0.128-0.14848-0.19456l-22.67136-29.74208L770.4064 477.7984c-0.4352-0.56832-40.704-53.07392-90.05056-47.51872-40.00768 4.50048-79.27296 47.13984-113.54624 123.29984-18.38592 40.84736-36.16256 71.25504-54.35904 92.93312-18.3808 21.90336-37.23776 34.99008-57.66656 39.99744-45.32224 11.1104-84.59264-19.82464-126.17728-52.5824l-5.2736-4.1472c-48.59392-38.19008-71.76192-29.46048-165.25312 62.19776-7.6544 7.50592-19.93728 7.38304-27.43808-0.26624-7.5008-7.65952-7.37792-19.9424 0.27136-27.4432 48.69632-47.744 80.93184-75.904 111.7696-87.96672 34.816-13.62432 67.08736-6.53824 104.6272 22.95808l5.31456 4.18304c35.40992 27.88352 65.98656 51.97312 92.92288 45.3632 26.74176-6.5536 55.6288-43.9552 85.87776-111.17056 40.85248-90.7776 89.58976-139.88352 144.8704-145.96096 71.44448-7.84896 122.97216 59.90912 125.12768 62.80192l122.25024 161.76128 22.53824 29.57824c27.42784 35.09248 28.52864 64.3328 28.56448 67.5584 0 0.04096 0 0.09216 0 0.128l0.40448 98.16576C975.1808 870.016 927.7952 917.40672 869.54496 917.40672L869.54496 917.40672z"  ></path><path d="M305.05984 452.34176c-44.17536 0-80.11264-35.93728-80.11264-80.11264 0-44.17536 35.9424-80.11264 80.11264-80.11264S385.17248 328.04864 385.17248 372.224C385.17248 416.40448 349.23008 452.34176 305.05984 452.34176L305.05984 452.34176zM305.05984 330.91584c-22.77888 0-41.31328 18.52928-41.31328 41.30816 0 22.77376 18.5344 41.30816 41.31328 41.30816 22.77888 0 41.30816-18.5344 41.30816-41.30816C346.368 349.44512 327.8336 330.91584 305.05984 330.91584L305.05984 330.91584z"  ></path></symbol><symbol id="icon-chaolianjie1" viewBox="0 0 1024 1024"><path d="M869.361605 42.237952H153.67180642c-61.30933253 0-111.15768625 49.84835372-111.15768626 111.15768625v715.5517145c0 42.25372918 23.61237808 78.98409508 58.40956681 97.76353027 15.74158539 8.42312903 33.69251609 13.2560719 52.61003537 13.25607191h715.68979858c19.05560336 0 37.00653407-4.83294288 52.61003537-13.25607191 34.79718875-18.7794352 58.40956682-55.64788517 58.4095668-97.76353027V153.39563825c0.13808409-61.30933253-49.71026963-111.15768625-110.88151809-111.15768625zM97.74775309 153.39563825c0-30.79275037 25.13130297-55.92405333 55.92405333-55.92405333h715.5517145c30.79275037 0 55.92405333 25.13130297 55.92405333 55.92405333v715.5517145c0 15.46541722-6.2137837 29.41190953-16.43200579 39.49204755-10.08013802 10.08013802-24.02663031 16.43200579-39.49204754 16.43200578H153.67180642c-15.46541722 0-29.41190953-6.2137837-39.49204754-16.43200578-10.08013802-10.08013802-16.43200579-24.02663031-16.43200579-39.49204755V153.39563825z"  ></path><path d="M781.12587642 221.05683858c-28.30723687-28.30723687-66.00419135-43.91073817-106.1866593-43.91073816s-77.87942242 15.6035013-106.18665929 43.91073816l-131.45604636 131.31796228c-28.30723687 28.30723687-43.91073817 66.00419135-43.91073817 106.18665929s15.6035013 77.87942242 43.91073817 106.18665928l0.13808408 0.1380841c7.04228819 6.76612003 16.15583763 10.49439025 25.8217234 10.49439025 9.52780169 0 18.64135111-3.72827022 25.82172339-10.35630617l0.27616817-0.27616818c6.90420412-6.76612003 10.77055842-16.01775355 10.77055841-25.68363929 0-9.80396985-3.72827022-19.05560336-10.77055841-26.09789155-14.49882864-14.49882864-22.50770542-33.83060016-22.50770542-54.54321253s8.00887677-39.90629979 22.50770542-54.54321251l131.31796226-131.31796227c14.49882864-14.49882864 33.83060016-22.50770542 54.54321251-22.50770542s39.90629979 8.00887677 54.54321251 22.50770542c14.49882864 14.49882864 22.50770542 33.83060016 22.50770541 54.54321251 0 20.57452827-8.00887677 39.90629979-22.50770541 54.54321252L638.07076714 473.33645695c-6.90420412 6.76612003-10.77055842 16.01775355-10.7705584 25.68363932 0 9.80396985 3.72827022 19.05560336 10.63247432 25.95980746 6.76612003 6.90420412 16.01775355 10.77055842 25.68363931 10.77055842 9.80396985 0 19.05560336-3.72827022 26.09789155-10.77055842l91.54974658-91.54974656c28.30723687-28.30723687 43.91073817-66.00419135 43.91073817-106.1866593s-15.6035013-77.87942242-44.04882225-106.18665929z"  ></path><path d="M558.12008349 448.48132213h-0.13808408c-9.80396985 0-18.91751926 3.86635431-25.8217234 10.77055844-6.90420412 6.76612003-10.77055842 15.87966947-10.77055841 25.68363929 0 9.80396985 3.72827022 19.05560336 10.77055841 26.09789155 14.49882864 14.49882864 22.50770542 33.83060016 22.50770542 54.40512844 0 20.57452827-8.00887677 39.90629979-22.50770542 54.40512844l-131.45604635 131.31796226c-14.49882864 14.49882864-33.83060016 22.50770542-54.40512842 22.50770542-20.57452827 0-39.90629979-8.14696086-54.5432125-22.78387359-14.49882864-14.49882864-22.50770542-33.83060016-22.50770543-54.40512842 0-20.57452827 8.00887677-39.90629979 22.50770543-54.40512843l91.41166246-91.41166248c6.90420412-6.76612003 10.77055842-16.01775355 10.77055843-25.68363932 0-9.80396985-3.72827022-19.05560336-10.63247433-25.95980746-6.76612003-6.90420412-16.01775355-10.77055842-25.68363931-10.77055842h-0.13808409c-9.80396985 0-18.91751926 3.86635431-25.82172339 10.77055842L239.97435787 590.29367467c-28.30723687 28.30723687-43.91073817 66.00419135-43.91073817 106.18665929s15.6035013 77.87942242 43.91073817 106.18665929 66.00419135 43.91073817 106.18665928 43.91073816c40.04438386 0 77.74133834-15.46541722 106.1866593-43.63456999l131.31796227-131.31796228c28.30723687-28.30723687 43.91073817-66.00419135 43.91073817-106.18665929s-15.6035013-77.87942242-43.91073817-106.18665928c-6.76612003-6.90420412-15.87966947-10.77055842-25.54555523-10.77055844z"  ></path></symbol><symbol id="icon-com-jump" viewBox="0 0 1024 1024"><path d="M50.7987336 893.11206717h-8.28504495c-11.04629507-2.76125013-19.33134-16.57008987-19.33134001-27.61638495 0-5.52379481 35.90142989-469.48631135 544.0517158-513.67278619v-273.40648296c0-11.0475896 5.52250027-22.09388468 16.57008987-24.85513481 11.04629507-5.52379481 22.09259013-2.76254467 30.37763508 5.52250027L1009.1026963 451.2434353c11.04629507 11.04629507 11.04629507 27.61638495 0 38.66268002L614.18178939 884.82702222c-8.28504494 8.28504494-19.33134 11.04629507-30.37763508 5.52379481-11.0475896-5.52379481-16.57008987-13.80883973-16.57008987-24.85513481V597.61169952c-91.13549431 11.0475896-375.5895669 66.2803595-494.34144617 278.93027776-2.76125013 11.04629507-13.80883973 16.57008987-22.09388467 16.57008989zM594.85044939 539.61638495c8.28504494 0 13.80883973 2.76254467 19.33134 8.28504494 5.52379481 5.52379481 8.28504494 13.80883973 8.28504494 19.33263455v231.98125826l325.87929726-325.87929726-325.87929726-328.63925285v229.2187136c0 13.80883973-11.04629507 27.61767949-24.85513481 27.61767948-323.11675259 19.33134-447.39242667 212.64862373-491.57890149 345.20934274 179.50973851-185.03223877 472.24756148-207.12612347 488.81765136-207.12612346z m0-165.70089876z"  ></path></symbol><symbol id="icon-component-tiaozhuan" viewBox="0 0 1204 1024"><path d="M1204.705882 503.988706a50.838588 50.838588 0 0 0-13.914353-35.177412L715.414588 11.625412A40.357647 40.357647 0 0 0 687.525647 0a45.658353 45.658353 0 0 0-43.068235 48.188235v202.390589A784.504471 784.504471 0 0 0 0 994.966588 29.575529 29.575529 0 0 0 27.888941 1024a26.322824 26.322824 0 0 0 15.540706-5.180235 1450.465882 1450.465882 0 0 1 159.382588-111.49553 1127.905882 1127.905882 0 0 1 441.22353-134.26447v187.51247a45.598118 45.598118 0 0 0 43.068235 48.188236 39.996235 39.996235 0 0 0 26.744471-10.842353l475.376941-457.246118a50.055529 50.055529 0 0 0 15.119059-36.562824z m-474.051764 351.412706V669.214118l-46.320942 3.855058c-187.211294 15.480471-436.464941 76.197647-577.355294 188.476236a677.767529 677.767529 0 0 1 585.60753-521.818353l38.068706-5.059765V153.057882l365.025882 351.171765z m0 0" fill="#666666" ></path></symbol><symbol id="icon-wangge-open" viewBox="0 0 1024 1024"><path d="M870.196 333.36H691.25V154.415h178.946V333.36z m0 268.419H691.25V422.83h178.946v178.949z m0 268.415H691.25V691.249h178.946v178.945zM601.777 333.36H422.832V154.415h178.945V333.36z m0 268.419H422.832V422.83h178.945v178.949z m0 268.415H422.832V691.249h178.945v178.945zM333.359 333.36H154.413V154.415h178.946V333.36z m0 268.419H154.413V422.83h178.946v178.949z m0 268.415H154.413V691.249h178.946v178.945zM870.196 64.941H154.413c-49.21 0-89.472 40.262-89.472 89.474v715.779c0 49.212 40.262 89.474 89.472 89.474h715.783c49.21 0 89.472-40.262 89.472-89.474V154.415c0-49.212-40.262-89.474-89.472-89.474z" fill="" ></path></symbol><symbol id="icon-wangge-close" viewBox="0 0 1024 1024"><path d="M329.9555552 147.91111147v65.9911104l91.02222293 91.02222293V147.91111147h182.04444374v182.04444373h-157.01333334l91.02222294 91.02222293H603.02222187v65.9911104l91.02222293 91.02222294V420.97777813h182.04444373v182.04444374h-157.01333333l91.02222293 91.02222293H876.08888853v65.9911104l91.02222294 91.02222293V147.91111147c0-50.06222187-40.96-91.02222187-91.02222294-91.02222294H172.94222187l91.02222293 91.02222294H329.9555552z m364.0888896 0h182.04444373v182.04444373h-182.04444373V147.91111147zM23.66577813 23.66577813L-34.13333333 81.92l91.02222186 91.02222187V876.08888853c0 50.06222187 40.96 91.02222187 91.02222294 91.02222294h703.60177706l91.02222294 91.02222186 57.7991104-57.79911146L23.66577813 23.66577813zM420.97777813 537.03111147L486.96888853 603.02222187H420.97777813v-65.9911104z m-273.06666666-273.06666667L213.90222187 329.9555552H147.91111147V263.9644448zM329.9555552 876.08888853H147.91111147v-182.04444373h182.04444373v182.04444373z m0-273.06666666H147.91111147v-182.04444374h157.01333333l25.0311104 25.0311104V603.02222187z m273.06666667 273.06666666h-182.04444374v-182.04444373h157.01333334l25.0311104 24.576V876.08888853z m91.02222293 0v-66.44622186L760.49066667 876.08888853H694.0444448z"  ></path></symbol><symbol id="icon-a-liumeitimeitiliebiao" viewBox="0 0 1024 1024"><path d="M1023.853735 948.673618v75.25325H596.248536V948.673618zM511.926868 0.073132a511.926868 511.926868 0 0 1 511.926867 511.926868h-75.253249a436.600486 436.600486 0 1 0-436.600486 436.600486h5.119269v75.253249h-5.119269a511.926868 511.926868 0 1 1 0-1023.853735z m511.926867 803.505785v75.25325H596.248536v-75.180117zM362.590487 290.116269l192.11884 110.941866 192.11884 110.941865-192.11884 110.941865-192.11884 110.941866V290.189402zM1023.853735 658.484217v75.399514H596.248536V658.630481zM437.843737 420.438223v182.831024l79.202399-45.780888 79.2024-45.707756-79.2024-45.707756z"  ></path></symbol><symbol id="icon-iframe" viewBox="0 0 1024 1024"><path d="M761.32807111 571.51251342h237.44420978c1.86413511-16.45099235 2.56318578-33.27481173 2.56318578-50.51806151a440.12229973 440.12229973 0 0 0-59.46591005-221.55245796c39.10023395-103.92553245 37.748736-192.19232995-14.680064-244.90075022-49.77240747-49.53939058-183.38429155-41.47700622-334.42583893 25.35223752a448.65071787 448.65071787 0 0 0-33.83405227-1.2582912c-207.29182435 0-381.21563022 142.65293938-429.26371271 334.84526933C194.63099733 330.24682667 263.09135929 269.89545245 354.48058311 225.90186382c-8.29540125 7.78276409-56.80951751 55.97065671-64.91850524 64.12624783C48.529408 530.96757475-27.43409778 845.68018489 54.30822685 927.51571627c62.16890595 62.12230258 174.80927005 51.63654258 304.22685013-11.7440512a440.40192 440.40192 0 0 0 200.39452444 47.90827235c194.33608533 0 358.98581902-125.03686258 418.63814258-299.24028871h-239.30834489a194.80211911 194.80211911 0 0 1-171.26741333 102.06139734 194.80211911 194.80211911 0 0 1-171.22080996-102.06139734 195.73418667 195.73418667 0 0 1-23.068672-92.18148124v-0.74565405h388.57896391z m-388.25274026-116.74146133a186.41351111 186.41351111 0 0 1 185.85427057-175.64813084 186.46011449 186.46011449 0 0 1 185.94747733 175.69473422H373.02872747z m551.9704064-351.10984818c33.74084551 34.06706915 32.85538133 96.79521565 4.05449386 175.08889031a444.03698347 444.03698347 0 0 0-206.08013653-168.70422755c90.69017315-38.86721707 164.4167168-43.99358862 202.02564267-6.38466276zM116.71014969 911.99679147c-43.06152107-43.06152107-30.05917867-133.42547058 25.35223751-242.33756445a443.94377671 443.94377671 0 0 0 188.46405973 230.59351325c-96.00295822 43.57415822-174.57625315 50.93749191-213.81629724 11.7440512z" fill="#636161" ></path></symbol><symbol id="icon-canshu" viewBox="0 0 1024 1024"><path d="M 340.11 511.12 h -99.32 V 121.77 a 21.5 21.5 0 0 0 -43 0 v 389.35 H 98 a 21.51 21.51 0 0 0 -21.5 21.5 v 107.14 a 21.5 21.5 0 0 0 21.5 21.5 h 99.56 v 245.6 a 21.5 21.5 0 0 0 43 0 v -245.6 h 99.55 a 21.5 21.5 0 0 0 21.5 -21.5 V 532.62 a 21.51 21.51 0 0 0 -21.5 -21.5 Z m -21.5 107.14 H 119.5 v -64.14 h 199.11 Z M 633.09 270.12 h -99.32 V 121.77 a 21.5 21.5 0 1 0 -43 0 v 148.35 H 391 a 21.51 21.51 0 0 0 -21.5 21.5 v 107.14 a 21.5 21.5 0 0 0 21.5 21.5 h 99.56 v 486.6 a 21.5 21.5 0 0 0 43 0 v -486.6 h 99.55 a 21.5 21.5 0 0 0 21.5 -21.5 V 291.62 a 21.51 21.51 0 0 0 -21.52 -21.5 Z m -21.5 107.14 H 412.48 v -64.14 h 199.11 Z M 924.29 649.12 h -99.56 V 121.77 a 21.5 21.5 0 1 0 -43 0 v 527.35 h -99.55 a 21.51 21.51 0 0 0 -21.5 21.5 v 107.14 a 21.5 21.5 0 0 0 21.5 21.5 h 99.55 v 107.6 a 21.5 21.5 0 1 0 43 0 v -107.6 h 99.56 a 21.5 21.5 0 0 0 21.5 -21.5 V 670.62 a 21.51 21.51 0 0 0 -21.5 -21.5 Z m -21.5 107.14 H 703.68 v -64.14 h 199.11 Z"  ></path></symbol><symbol id="icon-genghuan" viewBox="0 0 1024 1024"><path d="M381.6 48H108.8C77.6 48 52 73.6 52 104.8v272.8c0 31.2 25.6 56.8 56.8 56.8h272.8c31.2 0 56.8-25.6 56.8-56.8v-272c0-32-25.6-57.6-56.8-57.6z m-12 318.4H120V116.8h249.6v249.6z m544 175.2h-320c-31.2 0-56.8 25.6-56.8 56.8v320c0 31.2 25.6 56.8 56.8 56.8h320c31.2 0 56.8-25.6 56.8-56.8v-320c0-31.2-25.6-56.8-56.8-56.8z m-12 365.6H604.8V610.4h297.6v296.8z m-530.4 0c-84.8 0-154.4-68.8-154.4-153.6v-76h94.4l-128.8-128-128.8 128H148v76c0 122.4 100 221.6 223.2 221.6 19.2 0 34.4-15.2 34.4-34.4s-15.2-33.6-34.4-33.6z m287.2-790.4c84.8 0 154.4 68.8 154.4 153.6v76h-93.6L848 475.2l128-128.8h-94.4v-76C881.6 148 781.6 48 658.4 48 639.2 48 624 63.2 624 82.4s16 34.4 34.4 34.4z"  ></path></symbol><symbol id="icon-fasongyoujian" viewBox="0 0 1044 1024"><path d="M16.384 157.696q-11.264-8.192-14.336-13.312t-3.072-14.336l0-9.216q0-26.624 13.312-41.984t46.08-15.36l843.776 1.024q33.792 0 47.104 14.336t13.312 39.936l1.024 11.264q0 9.216-2.048 12.8t-16.384 14.848l-418.816 251.904q-10.24 4.096-25.088 11.264t-19.968 8.192q-6.144 0-18.432-5.632t-27.648-14.848zM646.144 572.416q-21.504 0-34.816 9.216t-20.992 23.552-10.24 32.256-2.56 34.304l0 71.68 0 12.288q0 6.144 1.024 11.264l-141.312 0q-72.704 0-136.192-0.512t-111.616-0.512l-70.656 0q-36.864 0-60.416-9.728t-36.864-25.088-18.432-35.328-5.12-41.472l0-378.88q0-21.504 10.24-27.136t25.6 5.632q5.12 3.072 18.432 11.776t31.744 19.968 38.4 24.064 37.888 24.064 30.72 19.456 16.896 10.24q14.336 9.216 16.384 23.04t-3.072 24.064q-4.096 10.24-12.288 26.624t-17.408 33.28-17.92 32.256-11.776 23.552q-5.12 14.336 2.048 19.456t22.528-4.096q3.072-2.048 16.896-15.872t29.184-30.72 29.184-31.744 18.944-17.92q9.216-8.192 24.064-11.776t26.112 2.56q7.168 4.096 19.456 12.288t27.136 17.92 30.208 19.968l27.648 18.432q12.288 8.192 26.112 10.24t26.624 1.024 23.04-4.608 15.36-6.656 19.456-11.776 31.232-18.944 31.744-19.456 22.016-13.312l129.024-79.872q2.048-1.024 12.8-8.192t26.624-17.408 34.816-22.528 35.84-23.04 31.232-19.968 20.48-13.312q19.456-12.288 30.208-9.728t10.752 16.896l0 266.24q-28.672-23.552-55.808-44.032t-49.664-34.816q-22.528-15.36-39.424-10.752t-27.648 19.968-16.384 35.84-5.632 36.864q0 11.264-0.512 18.432t-0.512 12.288q-1.024 5.12-1.024 8.192l-15.36 0-104.448 0zM1028.096 679.936q13.312 10.24 13.824 28.672t-10.752 26.624q-15.36 12.288-35.84 29.184t-42.496 34.304-43.008 34.816-38.4 30.72q-21.504 17.408-30.208 18.432t-8.704-26.624l0-46.08q0-17.408-8.704-28.672t-23.04-11.264l-118.784 0q-14.336 0-28.16-10.24t-13.824-26.624l0-52.224q0-28.672 9.216-34.816t32.768-6.144l20.48 0q9.216 0 20.992 0.512t28.16 0.512l43.008 0q20.48 0 29.184-7.168t8.704-25.6l0-45.056q0-18.432 6.144-23.552t22.528 8.192q16.384 12.288 37.888 29.696t44.544 35.328 45.056 35.84 39.424 31.232z"  ></path></symbol><symbol id="icon-github" viewBox="0 0 1024 1024"><path d="M511.542857 14.057143C228.914286 13.942857 0 242.742857 0 525.142857 0 748.457143 143.2 938.285714 342.628571 1008c26.857143 6.742857 22.742857-12.342857 22.742858-25.371429v-88.571428c-155.085714 18.171429-161.371429-84.457143-171.771429-101.6C172.571429 756.571429 122.857143 747.428571 137.714286 730.285714c35.314286-18.171429 71.314286 4.571429 113.028571 66.171429 30.171429 44.685714 89.028571 37.142857 118.857143 29.714286 6.514286-26.857143 20.457143-50.857143 39.657143-69.485715-160.685714-28.8-227.657143-126.857143-227.657143-243.428571 0-56.571429 18.628571-108.571429 55.2-150.514286-23.314286-69.142857 2.171429-128.342857 5.6-137.142857 66.4-5.942857 135.428571 47.542857 140.8 51.771429 37.714286-10.171429 80.8-15.542857 129.028571-15.542858 48.457143 0 91.657143 5.6 129.714286 15.885715 12.914286-9.828571 76.914286-55.771429 138.628572-50.171429 3.314286 8.8 28.228571 66.628571 6.285714 134.857143 37.028571 42.057143 55.885714 94.514286 55.885714 151.2 0 116.8-67.428571 214.971429-228.571428 243.314286a145.714286 145.714286 0 0 1 43.542857 104v128.571428c0.914286 10.285714 0 20.457143 17.142857 20.457143 202.4-68.228571 348.114286-259.428571 348.114286-484.685714 0-282.514286-229.028571-511.2-511.428572-511.2z"  ></path></symbol><symbol id="icon-dianhua" viewBox="0 0 1024 1024"><path d="M617.094737 301.810526c51.2 16.168421 91.621053 59.284211 102.4 110.484211 2.694737 8.084211 10.778947 13.473684 18.863158 13.473684h5.389473c10.778947-2.694737 16.168421-13.473684 13.473685-21.557895-16.168421-64.673684-64.673684-118.568421-129.347369-137.431579-10.778947-2.694737-21.557895 2.694737-24.252631 13.473685-2.694737 8.084211 2.694737 18.863158 13.473684 21.557894zM617.094737 180.547368c115.873684 18.863158 207.494737 115.873684 223.663158 231.747369 0 10.778947 8.084211 16.168421 18.863158 16.168421h2.694736c10.778947 0 18.863158-10.778947 16.168422-21.557895-16.168421-134.736842-121.263158-242.526316-253.305264-266.778947-10.778947-2.694737-18.863158 5.389474-21.557894 16.168421-2.694737 10.778947 5.389474 21.557895 13.473684 24.252631z" fill="#101010" ></path><path d="M622.484211 29.642105c-10.778947 0-18.863158 5.389474-21.557895 16.168421s5.389474 18.863158 16.168421 21.557895c175.157895 21.557895 315.284211 164.378947 331.452631 342.231579 0 10.778947 8.084211 16.168421 18.863158 16.168421h2.694737c10.778947 0 18.863158-10.778947 16.168421-21.557895C970.105263 212.884211 816.505263 53.894737 622.484211 29.642105zM571.284211 662.905263c-13.473684 13.473684-26.947368 29.642105-35.031579 48.505263-45.810526-26.947368-88.926316-59.284211-123.957895-94.315789-35.031579-35.031579-67.368421-78.147368-94.31579-123.957895 18.863158-8.084211 35.031579-21.557895 48.505264-35.031579 75.452632-75.452632 75.452632-199.410526 0-274.863158C291.031579 107.789474 167.073684 107.789474 91.621053 183.242105c-35.031579 35.031579-53.894737 80.842105-56.589474 132.042106-2.694737 158.989474 70.063158 307.2 218.273684 458.105263 148.210526 148.210526 296.421053 218.273684 450.021053 218.273684h8.08421c48.505263-2.694737 97.010526-21.557895 132.042106-56.589474 75.452632-75.452632 75.452632-199.410526 0-274.863158-72.757895-72.757895-196.715789-72.757895-272.168421 2.694737z m247.915789 247.91579c-29.642105 29.642105-67.368421 45.810526-105.094737 45.810526h-5.389474c-145.515789 0-282.947368-67.368421-423.073684-207.494737-142.821053-142.821053-210.189474-282.947368-207.494737-431.157895 0-40.421053 16.168421-78.147368 45.810527-105.094736 24.252632-32.336842 64.673684-48.505263 105.094737-48.505264s80.842105 16.168421 110.48421 45.810527c61.978947 61.978947 61.978947 158.989474 0 220.968421-16.168421 16.168421-35.031579 26.947368-53.894737 35.031579l-2.694737 2.694737-2.694736 2.694736-2.694737 2.694737s0 2.694737-2.694737 2.694737v10.778947c29.642105 53.894737 67.368421 107.789474 110.48421 150.905264 43.115789 43.115789 97.010526 80.842105 150.905264 110.48421H544.336842c2.694737 0 5.389474 0 8.084211-2.694737h2.694736l5.389474-5.389473c8.084211-21.557895 18.863158-40.421053 35.031579-53.894737 61.978947-61.978947 158.989474-61.978947 220.968421 0 61.978947 61.978947 61.978947 161.684211 2.694737 223.663158z" fill="#101010" ></path></symbol><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M184.64768 836.34176c3.9936 3.9936 9.23648 5.98016 14.47936 5.98016 5.24288 0 10.48576-2.00704 14.49984-6.00064l292.70016-293.04832 292.70016 293.04832c3.9936 4.01408 9.23648 6.00064 14.49984 6.00064 5.24288 0 10.48576-2.00704 14.47936-5.98016 8.00768-7.9872 8.00768-20.95104 0.02048-28.95872L535.61344 514.64192 828.0064 221.92128c7.9872-8.00768 7.9872-20.97152-0.02048-28.95872-8.02816-8.00768-20.97152-8.00768-28.95872 0.02048L506.30656 486.03136 213.6064 192.98304c-8.00768-8.00768-20.97152-8.00768-28.95872-0.02048-8.00768 7.9872-8.00768 20.95104-0.02048 28.95872l292.37248 292.72064L184.6272 807.38304C176.64 815.37024 176.64 828.35456 184.64768 836.34176z" fill="" ></path></symbol><symbol id="icon-juxing1" viewBox="0 0 1024 1024"><path d="M889 1024H135C60.6 1024 0 963.4 0 889V135C0 60.6 60.6 0 135 0h754c74.4 0 135 60.6 135 135v754c0 74.4-60.6 135-135 135zM135 90c-24.8 0-45 20.2-45 45v754c0 24.8 20.2 45 45 45h754c24.8 0 45-20.2 45-45V135c0-24.8-20.2-45-45-45H135z"  ></path></symbol><symbol id="icon-yidongduan" viewBox="0 0 1024 1024"><path d="M778.778947 35.031579H245.221053C212.884211 35.031579 188.631579 61.978947 188.631579 94.315789v835.368422c0 32.336842 26.947368 59.284211 59.28421 59.28421h530.863158c32.336842 0 59.284211-26.947368 59.284211-59.28421v-835.368422c-2.694737-32.336842-26.947368-59.284211-59.284211-59.28421z m-180.547368 56.589474h-169.768421c-8.084211 0-16.168421-5.389474-16.168421-16.168421v-2.694737h199.410526v2.694737c0 8.084211-5.389474 16.168421-13.473684 16.168421z m199.410526 838.063158c0 10.778947-10.778947 21.557895-21.557894 21.557894H245.221053c-10.778947 0-21.557895-10.778947-21.557895-21.557894v-835.368422c0-10.778947 10.778947-21.557895 21.557895-21.557894h126.652631v2.694737c0 29.642105 24.252632 53.894737 53.894737 53.894736h169.768421c29.642105 0 53.894737-24.252632 53.894737-53.894736v-2.694737h126.652632c10.778947 0 21.557895 10.778947 21.557894 21.557894v835.368422z" fill="#101010" ></path><path d="M512 786.863158c-37.726316 0-70.063158 32.336842-70.063158 70.063158 0 37.726316 32.336842 70.063158 70.063158 70.063158s70.063158-32.336842 70.063158-70.063158c0-37.726316-32.336842-70.063158-70.063158-70.063158z m0 102.4c-18.863158 0-32.336842-13.473684-32.336842-32.336842s13.473684-32.336842 32.336842-32.336842 32.336842 13.473684 32.336842 32.336842S530.863158 889.263158 512 889.263158z" fill="#101010" ></path></symbol><symbol id="icon-video" viewBox="0 0 1024 1024"><path d="M221.63911147 385.93422187c103.88669653 0 188.38565973-84.48379307 188.38565866-188.3553184S325.52580693 9.20841493 221.63911147 9.20841493c-103.8563552 0-188.3553184 84.4989632-188.3553184 188.37048854 0 103.8715264 84.48379307 188.3553184 188.3553184 188.3553184z m0-316.04432534c70.42085973 0 127.70417813 57.2833184 127.70417706 127.68900694s-57.2833184 127.6738368-127.70417706 127.6738368c-70.40568853 0-127.6738368-57.26814827-127.67383787-127.6738368 0-70.42085973 57.26814827-127.68900693 127.67383787-127.68900694z" fill="" ></path><path d="M153.29659307 197.5940736l-0.0758528-4.05048853c-0.0606816-1.72942187-0.0606816-1.72942187 0.31857813-3.71674027a15.20071147 15.20071147 0 0 0-12.0452736-17.76450453 15.26139307 15.26139307 0 0 0-17.76450453 12.04527466 39.4429632 39.4429632 0 0 0-0.84954027 10.43721494l0.0606816 3.0340736a15.18554027 15.18554027 0 0 0 30.35591147 0.01517013zM152.2043264 166.28242987a15.14002987 15.14002987 0 0 0 12.6217472-6.7356448 68.2818368 68.2818368 0 0 1 56.81303787-30.34074027 15.17037013 15.17037013 0 1 0 0-30.34074133 98.5922368 98.5922368 0 0 0-82.02619307 43.79685973 15.18554027 15.18554027 0 0 0 12.591408 23.62026667zM646.39431147 385.93422187c103.90186667 0 188.38565973-84.48379307 188.38565866-188.3553184S750.29617813 9.20841493 646.39431147 9.20841493c-103.8563552 0-188.3553184 84.4989632-188.3553184 188.37048854 0.01517013 103.8715264 84.51413333 188.3553184 188.3553184 188.3553184z m0-316.04432534c70.43602987 0 127.70417813 57.2833184 127.70417706 127.68900694s-57.26814827 127.6738368-127.70417706 127.6738368c-70.40568853 0-127.6738368-57.26814827-127.67383787-127.6738368 0.01517013-70.42085973 57.2833184-127.68900693 127.67383787-127.68900694z" fill="" ></path><path d="M576.97469653 166.28242987a15.14002987 15.14002987 0 0 0 12.62174827-6.7356448 68.26666667 68.26666667 0 0 1 56.79786667-30.34074027c8.40438507 0 15.17037013-6.7811552 15.17037013-15.1703712 0-8.38921493-6.76598507-15.17037013-15.17037013-15.17037013a98.56189653 98.56189653 0 0 0-82.01102294 43.79685973 15.17037013 15.17037013 0 0 0 12.591408 23.62026667zM1010.40734827 453.16930347c-9.93659307-10.16414827-22.33078507-15.61031147-37.42530347-15.6103104-12.27282987 0-25.50139307 3.29197013-41.56681493 11.0592a19245.43525973 19245.43525973 0 0 1-160.53285974 84.6051552l0.74334827-11.37777814c0.0606816-0.74334827 0.09102187-2.97339307 0.09102187-3.7319104 0-59.02791147-47.17985173-110.13688853-105.16100694-110.1368896H103.1585184c-57.01025173 0-106.9662816 56.06968853-106.9662816 115.12794134V919.62785173c0 56.8130368 47.99905173 95.1485632 106.9662816 95.1485632h563.39721493c58.49694827 0 104.35697813-41.67300693 105.1003264-98.8956448-0.01517013 0.0606816-0.01517013 0.13653333-0.03034133 0.03034134l-1.5777184-25.24349654c40.3076736 20.20693333 102.9309632 52.6715264 161.00314027 83.254992 1.65357013 0.8798816 3.17060693 1.6384 4.9758816 2.21487467 15.7923552 4.8545184 28.36859307 8.192 40.4897184 8.26785173 21.61777813-0.1668736 34.74014827-10.74062187 41.11170453-19.55460693 7.5548448-10.4220448 10.16414827-23.90850347 10.16414827-42.15845973V512.91022187c0-12.09078507 1.54737813-40.53522987-17.3852448-59.7409184z m-41.4909632 468.8706368c-4.23253333-1.0012448-8.75330347-2.41208853-11.90874027-3.382992-204.07182187-107.4365632-211.1715552-107.61860693-220.18275627-107.618608-8.3588736 0-16.35365973 3.06441493-22.1032288 9.16290453-5.71922987 6.06814827-8.67745173 13.48645973-8.17682986 21.83016213l4.47525866 73.36391147c-0.43994027 23.49890347-19.8276736 38.69961493-44.47952533 38.69961493H103.1585184c-25.75928853 0-46.2848-10.92266667-46.2848-34.4670816V523.10471147c0-25.69860693 22.5886816-54.44645973 46.2848-54.44645974v-0.01517013h563.39721493c23.80231147 0 43.9485632 23.78714027 44.4643552 48.4996736l-4.4449184 65.52082987c-0.5916448 8.38921493 2.32106667 16.68740693 8.04029654 22.84657813 5.74957013 6.15917013 13.8050368 9.6635264 22.22459306 9.66352533 9.8910816 0 12.5307264-0.03034027 222.0487104-112.09386666 4.14151147-2.00248853 7.28177813-3.1554368 9.55733334-3.82293334 0.36408853 2.71549653 0.60681493 6.70530347 0.51579306 12.66725974l-0.04551146 410.115792z" fill="" ></path><path d="M771.64088853 915.89594027l0.04551147-0.925392c0 0.31857813-0.04551147 0.62198507-0.04551147 0.925392zM976.97185173 984.4508448l-0.45511146-0.03034133-0.47028054 0.03034133h0.925392zM771.6864 914.97054827l0.01517013-0.3489184-0.01517013 0.3489184zM271.06417813 498.98382187h-128.8571264c-30.44693333 0-54.99259307 37.54666667-54.992592 65.61185173v77.09582293a15.17037013 15.17037013 0 1 0 30.34074027-0.01517013v-77.09582293c0-14.12361493 13.56231147-35.24077013 24.65185173-35.24077014h128.8571264a15.17037013 15.17037013 0 1 0 0-30.35591146zM346.91602987 498.99899307h-15.17037014a15.17037013 15.17037013 0 1 0 0 30.34074026h15.17037014a15.17037013 15.17037013 0 1 0 0-30.34074026z" fill="" ></path></symbol><symbol id="icon-xuanfuanniufadongtai" viewBox="0 0 1024 1024"><path d="M924.3 338.3c-22.5-53.2-54.7-101-95.7-142s-88.8-73.2-142-95.7C631.5 77.3 573 65.5 512.7 65.5s-118.8 11.8-173.9 35.1c-23.8 10.1-46.5 22.1-68 35.9-9.1 5.9-14.5 16-14.5 26.8 0 25.3 28 40.6 49.3 26.9 61.2-39.5 132.5-60.7 207.1-60.7 102.2 0 198.3 39.8 270.6 112.1 67.6 67.6 106.8 156.1 111.6 251 5.8 114.9-40.5 226.7-125.8 303.8-70.4 63.7-160.7 98.6-256.4 98.6-102.2 0-198.3-39.8-270.6-112.1C169.8 710.6 130 614.4 130 512.2c0-74 20.9-144.8 59.8-205.7 13.6-21.3-1.7-49.2-27-49.2-11 0-21.2 5.7-27.1 14.9-13.3 20.9-24.9 43-34.7 66-23.2 55.2-35 113.7-35 174S77.8 631 101.1 686.1c22.5 53.2 54.7 101 95.7 142s88.8 73.2 142 95.7c55.1 23.3 113.6 35.1 173.9 35.1 60.3 0 118.8-11.8 173.9-35.1 53.2-22.5 101-54.7 142-95.7s73.2-88.8 95.7-142c23.3-55.1 35.1-113.6 35.1-173.9 0-60.3-11.8-118.8-35.1-173.9z"  ></path><path d="M727.1 414.4c-21.6 0-36.9 20.9-30.6 41.5 5.5 17.8 8.4 36.7 8.4 56.2 0 106-86.2 192.2-192.2 192.2-106.1 0-192.4-86.5-192.2-192.6 0.2-105.8 86.8-192 192.6-191.8 19.1 0 37.6 2.9 55 8.1 20.6 6.2 41.5-9.1 41.5-30.6 0-14.1-9.2-26.6-22.6-30.6-23.8-7.2-48.7-10.9-74.2-10.9-68.4 0-132.8 26.7-181.2 75-48.4 48.4-75 112.7-75 181.2 0 68.4 26.7 132.8 75 181.2 48.4 48.4 112.7 75 181.2 75 68 0 133.1-26.9 181.2-75 48.4-48.4 75-112.7 75-181.2 0-25.9-3.8-51.2-11.2-75.2-4.1-13.3-16.6-22.5-30.7-22.5z"  ></path><path d="M689 335m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"  ></path></symbol><symbol id="icon-xifuxuanze" viewBox="0 0 1024 1024"><path d="M486.1952 899.6352H209.1008c-50.0736 0-90.7264-39.2192-90.7264-87.552V206.08c0-48.3328 40.6528-87.552 90.7264-87.552v0.0512h595.5072c50.0224 0 90.624 39.3728 90.624 87.552v352.8704h67.1744V206.1824c0-85.3504-70.8608-154.7776-157.9008-154.7776H209.0496C122.0608 51.5072 51.2 120.832 51.2 206.1824v606.0032c0 85.248 70.7584 154.624 157.9008 154.624h277.0944v-67.1744z"  ></path><path d="M960.1536 660.4288l-482.4064-286.72c-17.7152-10.496-29.1328-2.56-25.344 17.6128l102.6048 554.5984c3.7888 20.1728 16.4352 22.9888 28.2112 6.144 0 0 65.536-93.7984 119.296-151.0912l109.056 162.0992c6.656 9.8816 20.1216 12.4928 29.9008 5.632l51.3536-35.4816a22.0672 22.0672 0 0 0 5.7344-30.4128l-108.8-161.8432c68.9664-28.5696 166.4-52.6336 166.4-52.6336 19.8144-4.9152 21.6576-17.5104 3.9936-27.904"  ></path></symbol><symbol id="icon-margin" viewBox="0 0 1024 1024"><path d="M810.666667 85.333333 213.333333 85.333333C187.733333 85.333333 170.666667 68.266667 170.666667 42.666667s17.066667-42.666667 42.666667-42.666667l597.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S836.266667 85.333333 810.666667 85.333333z"  ></path><path d="M810.666667 1024 213.333333 1024c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667l597.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S836.266667 1024 810.666667 1024z"  ></path><path d="M981.333333 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L938.666667 213.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 597.333333C1024 836.266667 1006.933333 853.333333 981.333333 853.333333z"  ></path><path d="M42.666667 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L0 213.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 597.333333C85.333333 836.266667 68.266667 853.333333 42.666667 853.333333z"  ></path><path d="M810.666667 853.333333 213.333333 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L170.666667 213.333333c0-25.6 17.066667-42.666667 42.666667-42.666667l597.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667l0 597.333333C853.333333 836.266667 836.266667 853.333333 810.666667 853.333333zM256 768l512 0L768 256 256 256 256 768z"  ></path></symbol><symbol id="icon-padding" viewBox="0 0 1024 1024"><path d="M682.666667 256 341.333333 256C315.733333 256 298.666667 238.933333 298.666667 213.333333s17.066667-42.666667 42.666667-42.666667l341.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S708.266667 256 682.666667 256z"  ></path><path d="M682.666667 853.333333 341.333333 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667l341.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S708.266667 853.333333 682.666667 853.333333z"  ></path><path d="M810.666667 725.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L768 341.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 341.333333C853.333333 708.266667 836.266667 725.333333 810.666667 725.333333z"  ></path><path d="M213.333333 725.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L170.666667 341.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 341.333333C256 708.266667 238.933333 725.333333 213.333333 725.333333z"  ></path><path d="M981.333333 1024 42.666667 1024c-25.6 0-42.666667-17.066667-42.666667-42.666667L0 42.666667c0-25.6 17.066667-42.666667 42.666667-42.666667l938.666667 0c25.6 0 42.666667 17.066667 42.666667 42.666667l0 938.666667C1024 1006.933333 1006.933333 1024 981.333333 1024zM85.333333 938.666667l853.333333 0L938.666667 85.333333 85.333333 85.333333 85.333333 938.666667z"  ></path></symbol><symbol id="icon-shijian" viewBox="0 0 1024 1024"><path d="M871.39110343 152.60889657C775.39381248 56.61160448 647.76146034 3.74329458 512 3.74329458c-135.75913131 0-263.39497643 52.86714595-359.39110343 148.86443691S3.74329458 376.24086869 3.74329458 512s52.86714595 263.39497643 148.86443691 359.39110343 223.63197213 148.86443691 359.39110342 148.86443691c135.76146034 0 263.39497643-52.86714595 359.39110344-148.86443691S1020.25554034 647.75913131 1020.25554034 512 967.38839552 248.60502357 871.39110343 152.60889657zM534.25084302 973.08063403l0-84.36132637c0-12.87477475-10.43906901-23.31500885-23.31500885-23.31500885-12.8759387 0-23.31500885 10.43906901-23.31500886 23.31500885l0 84.26352527C251.76375523 960.65178397 62.22932878 770.46302265 50.92169501 534.33932914l82.32031686 0c12.87477475 0 23.31500885-10.43906901 23.31500886-23.31500885 0-12.87477475-10.43906901-23.31500885-23.31500886-23.31500886l-82.2306668 0c12.25304064-235.22136519 201.40092302-424.39718912 436.61180928-436.69447338l0 82.314496c0 12.8759387 10.43906901 23.31500885 23.31500885 23.31500885 12.87477475 0 23.31500885-10.43790507 23.31500885-23.31500885L534.25317091 50.91820203c236.19471587 11.26571918 426.4475136 200.8630181 438.73781192 436.79227448l-84.35783339 0c-12.8759387 0-23.31500885 10.43906901-23.31500885 23.31500886 0 12.8759387 10.43906901 23.31500885 23.31500885 23.31500885l84.44632064 0C961.73574258 771.17207893 771.0952357 961.78347918 534.25084302 973.08063403z"  ></path><path d="M534.86791907 501.89508381L534.86791907 223.27811299c0-12.8759387-10.43906901-23.31500885-23.31500885-23.31500885-12.87477475 0-23.31500885 10.43790507-23.31500885 23.31500885l0 289.7534521c0 8.94178645 5.04023381 16.69948416 12.43001401 20.61035064L718.44697771 751.41981298c4.55355847 4.55122944 10.51940637 6.82859065 16.4864182 6.82859065s11.93285973-2.27736121 16.4864182-6.82859065c9.10478677-9.10478677 9.10478677-23.8680485 0-32.97283641L534.86791907 501.89508381z"  ></path></symbol><symbol id="icon-shijiangeshizhuanhuan" viewBox="0 0 1024 1024"><path d="M534.665794 821.401316c-23.671203 5.961898-48.25962 9.489648-73.694698 9.489648-170.884211 0-309.948117-143.050264-309.948117-318.908603s139.028629-318.908602 309.948117-318.908602c157.020154 0 286.841355 120.895993 306.914252 276.928377 31.643918 1.023048 61.841458 7.76105 89.393186 19.579013-11.42991-213.428877-184.783546-383.536983-396.307438-383.536983-218.896889 0-396.942433 182.102456-396.942433 405.938195S242.074207 917.920557 460.935818 917.920557c44.484928 0 87.205981-7.61994 127.175389-21.483998-22.224825-21.30761-40.392738-46.742688-53.445413-75.035243z m-73.729976-581.479037c-24.023978 0-43.497158 19.47318-43.497157 43.497158v228.562924c0 3.563028 0.56444 6.984945 1.340545 10.265753 3.95108 19.931788 21.554553 34.99528 42.650497 34.99528h109.219141c35.065835-41.309953 83.360733-71.048886 138.393634-82.443518-5.78551-2.8222-12.170738-4.550798-19.04985-4.550798H504.468254V283.454715c0-24.059255-19.47318-43.532435-43.532436-43.532436z m298.729873 277.351707c-110.630241 0-200.305646 89.675406-200.305647 200.305647s89.675406 200.305646 200.305647 200.305646c110.630241 0 200.305646-89.675406 200.305646-200.305646s-89.675406-200.305646-200.305646-200.305647z m-156.138217 132.361181h212.229442l-50.411548-54.997623 35.171668-32.208357 123.682916 134.901161h-320.6372v-47.695181z m312.276433 135.924209h-212.229442l50.411548 54.997623-35.13639 32.208357-123.682916-134.901161H915.803907v47.695181z" fill="#333333" ></path></symbol><symbol id="icon-chaolianjie" viewBox="0 0 1024 1024"><path d="M431.096389 550.97364l-17.896602 17.84646a99.137905 99.137905 0 0 1-70.112848 28.980032 99.148138 99.148138 0 0 1-70.072938-29.087479l-179.344645-179.345668a98.961896 98.961896 0 0 1-0.104377-140.234905L249.117754 93.524047a99.130741 99.130741 0 0 1 70.1415-29.006638 99.121532 99.121532 0 0 1 70.094428 29.111015l179.345668 179.350784c38.956244 38.95215 38.797631 101.541651 0.104377 140.235928l-17.896602 17.793248-51.90516-51.90516 7.319709-7.368828c19.478633-19.423375 19.478633-50.907437 0.26299-70.117964L352.715227 147.740856c-19.456121-19.287275-50.861388-19.170618-70.172199 0.267083L156.100244 274.554076c-19.410072 19.324114-19.527752 50.703799-0.260943 70.1722l153.86739 153.867389c19.183921 19.031449 50.070372 19.221784 69.485561 0.420579l51.955302 51.959396h-0.051165z m161.869644-77.907371l17.793248-17.847483a99.130741 99.130741 0 0 1 70.1415-29.006638 99.121532 99.121532 0 0 1 70.094428 29.111015l179.400926 179.350784c38.902008 38.95215 38.743396 101.541651 0.054236 140.235928L774.892479 930.461627a99.117438 99.117438 0 0 1-140.232858-0.103354L455.30986 751.008512a98.960873 98.960873 0 0 1-0.049119-140.235928l17.793248-17.793248 44.00626 43.958164c-18.768459 19.423375-18.583241 50.287313 0.420579 69.485561l153.817248 153.817248c19.452028 19.288299 50.857295 19.171642 70.168106-0.26606L867.962178 733.478254c19.478633-19.473517 19.478633-50.90232 0.262989-70.168106l-153.813154-153.818271c-19.442818-19.305695-50.848085-19.210527-70.1722 0.212847l-7.369851 7.368828-43.903929-44.007283zM419.200454 363.256304a39.570227 39.570227 0 0 0-38.19695-10.257621 39.563064 39.563064 0 0 0-27.982308 27.953655 39.563064 39.563064 0 0 0 10.219759 38.207184l215.617779 215.617779a39.558971 39.558971 0 0 0 38.20616 10.219759 39.553854 39.553854 0 0 0 17.698081-66.178235L419.200454 363.256304z m0 0"  ></path></symbol><symbol id="icon-kexuejishu" viewBox="0 0 1024 1024"><path d="M376.19 833.94c-32.09 0-58.67-9.64-77.79-28.75-33.37-33.38-37.85-89.48-12.62-158 23-62.54 68.69-129.94 128.54-189.79s127.25-105.46 189.79-128.5c68.49-25.24 124.59-20.76 158 12.62s37.85 89.47 12.62 158C751.65 562 706 629.42 646.15 689.27S518.9 794.76 456.37 817.8c-29.26 10.78-56.25 16.14-80.18 16.14z" fill="#E9F1FF" ></path><path d="M564.28 678.63a0.23 0.23 0 0 0-0.07 0.07zM437.9 188.9l-0.5-0.23zM834.78 588.25c-0.13-0.29-0.26-0.58-0.4-0.87 0.15 0.28 0.27 0.62 0.4 0.87z" fill="#2C5CCB" ></path><path d="M510.39 511.42m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#2C5CCB" ></path><path d="M827.17 828.2c-45.6 45.6-122.26 51.72-215.85 17.24a535.12 535.12 0 0 1-57.05-25.07 674.45 674.45 0 0 1-63-36.57q-9.58-6.25-19.15-12.9c-18.74-13-37.38-27.22-55.75-42.42-21.95-18.15-43.52-37.78-64.41-58.67-20.68-20.68-40.13-42-58.13-63.76q-22.65-27.3-42.15-55.25-5-7.09-9.7-14.22a687.09 687.09 0 0 1-37.38-62.86 538 538 0 0 1-28.27-63.24c-14.73-40-22.05-76.86-22.05-109.56 0-43.85 13.17-80.17 39.29-106.29 45.6-45.6 122.26-51.72 215.85-17.24q13.4 4.94 27 10.87l0.81 0.35 0.15 0.07 0.5 0.23a32 32 0 1 1-27.68 57.72q-11.54-5-22.89-9.19c-67.81-25-121.93-24.09-148.46 2.45s-27.43 80.65-2.45 148.46q4.5 12.22 10 24.67a551 551 0 0 0 33.06 63.26q5.06 8.37 10.48 16.77c11.89 18.42 25.07 36.84 39.39 55.08a855.21 855.21 0 0 0 67.94 76.42 854 854 0 0 0 78 69.2c18.38 14.36 36.94 27.55 55.49 39.44q10 6.38 19.92 12.26a535 535 0 0 0 63.5 32.31q9.69 4.11 19.25 7.63c67.81 25 121.93 24.09 148.46-2.45 13.7-13.69 20.57-34.74 20.57-61.23 0-24.82-6-54.42-18.12-87.23q-3.58-9.74-7.79-19.6a32 32 0 1 1 57.82-27.48c0.14 0.29 0.27 0.58 0.4 0.87s0.14 0.32 0.2 0.48q5.12 11.88 9.43 23.62c34.49 93.57 28.37 170.23-17.23 215.83z" fill="#2C5CCB" ></path><path d="M844.41 410.48C812.93 495.93 750.55 588 668.78 669.81c-20.14 20.14-40.9 39.1-62 56.71l-0.09 0.08-0.24 0.2a32 32 0 1 1-42.2-48.1 0.23 0.23 0 0 1 0.07-0.07l0.58-0.49c19.93-16.58 39.57-34.5 58.66-53.59 75.33-75.37 132.44-159.25 160.8-236.2 25-67.81 24.09-121.93-2.44-148.46-13.7-13.7-34.75-20.57-61.23-20.57-24.83 0-54.43 6-87.24 18.12-77 28.35-160.83 85.47-236.2 160.84A854.9 854.9 0 0 0 329.09 475c-14.31 18.24-27.47 36.67-39.36 55.1q-4.17 6.46-8.13 12.93a559.47 559.47 0 0 0-33.41 62.73q-6.54 14.5-11.78 28.75c-25 67.81-24.09 121.93 2.45 148.46s80.65 27.43 148.46 2.45q12.82-4.73 25.89-10.51h0.06A32 32 0 1 1 440 833q-15.37 6.86-30.52 12.43c-40 14.73-76.86 22-109.56 22-43.85 0-80.17-13.17-106.29-39.29-45.6-45.6-51.72-122.26-17.24-215.85a543.47 543.47 0 0 1 30.25-67A699.22 699.22 0 0 1 244.22 483q3.57-5.31 7.28-10.62 19.44-27.88 42.13-55.28c18.07-21.82 37.59-43.26 58.36-64 81.78-81.77 173.88-144.15 259.33-175.63 93.59-34.48 170.25-28.36 215.85 17.24s51.72 122.18 17.24 215.77z" fill="#2C5CCB" ></path></symbol><symbol id="icon-shujujuzhen" viewBox="0 0 1024 1024"><path d="M192 224h128v128H192z m0 448h128v128H192z m0-224h128v128H192z m-64-288h64V96H64v832h128v-64h-64z m576 64h128v128H704z m0 224h128v128H704z m128-288h64v704h-64v64h128V96H832z m-384 64h128v128H448z m256 448h128v128H704zM448 448h128v128H448z m0 224h128v128H448z" fill="#333333" ></path></symbol><symbol id="icon-shitujuzhen_o" viewBox="0 0 1024 1024"><path d="M213.333333 426.666667h170.666667v170.666666H213.333333v-170.666666z m42.666667 42.666666v85.333334h85.333333v-85.333334H256zM213.333333 213.333333h170.666667v170.666667H213.333333V213.333333z m42.666667 42.666667v85.333333h85.333333V256H256z m170.666667-42.666667h170.666666v170.666667h-170.666666V213.333333z m42.666666 42.666667v85.333333h85.333334V256h-85.333334z m-42.666666 170.666667h170.666666v170.666666h-170.666666v-170.666666z m42.666666 42.666666v85.333334h85.333334v-85.333334h-85.333334z m170.666667-256h170.666667v170.666667h-170.666667V213.333333z m42.666667 42.666667v85.333333h85.333333V256h-85.333333z m-42.666667 170.666667h170.666667v170.666666h-170.666667v-170.666666z m42.666667 42.666666v85.333334h85.333333v-85.333334h-85.333333z m-42.666667 170.666667h170.666667v170.666667h-170.666667v-170.666667z m42.666667 42.666667v85.333333h85.333333v-85.333333h-85.333333z m-256-42.666667h170.666666v170.666667h-170.666666v-170.666667z m42.666666 42.666667v85.333333h85.333334v-85.333333h-85.333334z m-256-42.666667h170.666667v170.666667H213.333333v-170.666667z m42.666667 42.666667v85.333333h85.333333v-85.333333H256z" fill="#444444" ></path></symbol><symbol id="icon-xuanfu1" viewBox="0 0 1024 1024"><path d="M768 256h102.4a102.4 102.4 0 0 1 102.4 102.4v512a102.4 102.4 0 0 1-102.4 102.4H358.4a102.4 102.4 0 0 1-102.4-102.4v-102.4H153.6a102.4 102.4 0 0 1-102.4-102.4V153.6a102.4 102.4 0 0 1 102.4-102.4h512a102.4 102.4 0 0 1 102.4 102.4v102.4z m-102.4-143.36H153.6a40.96 40.96 0 0 0-40.96 40.96v512a40.96 40.96 0 0 0 40.96 40.96h102.4V358.4a102.4 102.4 0 0 1 102.4-102.4h348.16V153.6a40.96 40.96 0 0 0-40.96-40.96z m-307.2 204.8a40.96 40.96 0 0 0-40.96 40.96v512a40.96 40.96 0 0 0 40.96 40.96h512a40.96 40.96 0 0 0 40.96-40.96V358.4a40.96 40.96 0 0 0-40.96-40.96H358.4z"  ></path></symbol><symbol id="icon-youxuanfu-copy" viewBox="0 0 1024 1024"><path d="M640 209.066667H349.866667c-46.933333 0-89.6 42.666667-89.6 93.866666v328.533334C260.266667 682.666667 298.666667 725.333333 349.866667 725.333333H640v25.6c0 38.4-29.866667 72.533333-68.266667 72.533334H217.6c-38.4 0-68.266667-29.866667-68.266667-72.533334V209.066667c0-38.4 29.866667-72.533333 68.266667-72.533334h354.133333c38.4 4.266667 68.266667 34.133333 68.266667 72.533334z m0 0" fill="#0A6ECB" ></path><path d="M366.933333 256h422.4c25.6 0 42.666667 21.333333 42.666667 46.933333v328.533334c0 25.6-21.333333 46.933333-42.666667 46.933333H366.933333c-25.6 0-42.666667-21.333333-42.666666-46.933333V302.933333c0-25.6 17.066667-46.933333 42.666666-46.933333z m0 0" fill="#0A6ECB" ></path></symbol><symbol id="icon-xuanfu" viewBox="0 0 1024 1024"><path d="M341.632 599.296l-113.152 59.776 270.336 142.912 270.336-142.912-113.152-59.776 68.48-36.224 128.128 67.712a32 32 0 0 1 0 56.576L513.792 866.56a32 32 0 0 1-29.952 0L145.024 687.36a32 32 0 0 1 0-56.576l128.128-67.712 68.48 36.224z" fill="#585858" ></path><path d="M498.816 260.224L228.48 403.072l270.336 142.912 270.336-142.912-270.336-142.848z m14.976-64.512l338.816 179.072a32 32 0 0 1 0 56.576L513.792 610.56a32 32 0 0 1-29.952 0L145.024 431.36a32 32 0 0 1 0-56.576L483.84 195.712a32 32 0 0 1 29.952 0z" fill="#407CD5" ></path></symbol><symbol id="icon-xuanfuanniu" viewBox="0 0 1024 1024"><path d="M977.066667 618.666667c0-4.266667-4.266667-8.533333-8.533334-8.533334l-59.733333-34.133333-396.8 230.4-396.8-230.4-59.733333 34.133333c-4.266667 0-8.533333 4.266667-8.533334 8.533334-4.266667 4.266667-4.266667 8.533333-4.266666 12.8 0 4.266667 0 8.533333 4.266666 12.8s4.266667 8.533333 8.533334 8.533333L512 917.333333l456.533333-264.533333c4.266667 0 8.533333-4.266667 8.533334-8.533333s4.266667-8.533333 4.266666-12.8c0-4.266667 0-8.533333-4.266666-12.8z" fill="#8DC5FF" ></path><path d="M977.066667 388.266667c0-4.266667-4.266667-8.533333-8.533334-8.533334L537.6 115.2c-8.533333-4.266667-17.066667-8.533333-25.6-8.533333s-17.066667 4.266667-25.6 8.533333L55.466667 379.733333c-4.266667 0-8.533333 4.266667-8.533334 8.533334-4.266667 4.266667-4.266667 8.533333-4.266666 12.8 0 4.266667 0 8.533333 4.266666 12.8 0 4.266667 4.266667 8.533333 8.533334 8.533333L512 704l456.533333-281.6c4.266667-4.266667 8.533333-4.266667 8.533334-8.533333 4.266667-4.266667 4.266667-8.533333 4.266666-12.8 0-4.266667 0-8.533333-4.266666-12.8z" fill="#2D8CF0" ></path></symbol><symbol id="icon-youxuanfu-copy-copy" viewBox="0 0 1024 1024"><path d="M640 209.066667H349.866667c-46.933333 0-89.6 42.666667-89.6 93.866666v328.533334C260.266667 682.666667 298.666667 725.333333 349.866667 725.333333H640v25.6c0 38.4-29.866667 72.533333-68.266667 72.533334H217.6c-38.4 0-68.266667-29.866667-68.266667-72.533334V209.066667c0-38.4 29.866667-72.533333 68.266667-72.533334h354.133333c38.4 4.266667 68.266667 34.133333 68.266667 72.533334z m0 0" fill="#8a8a8a" ></path><path d="M366.933333 256h422.4c25.6 0 42.666667 21.333333 42.666667 46.933333v328.533334c0 25.6-21.333333 46.933333-42.666667 46.933333H366.933333c-25.6 0-42.666667-21.333333-42.666666-46.933333V302.933333c0-25.6 17.066667-46.933333 42.666666-46.933333z m0 0" fill="#8a8a8a" ></path></symbol><symbol id="icon-tabs" viewBox="0 0 1024 1024"><path d="M950.95466667 390.03022222H574.464c-10.35377778 0-19.79733333-5.91644445-24.34844445-15.13244444L430.08 129.36533333H129.93422222c-35.15733333 0-63.71555555 28.55822222-63.71555555 63.71555556v637.26933333c0 35.15733333 28.55822222 63.71555555 63.71555555 63.71555556h764.70044445c35.15733333 0 63.71555555-28.55822222 63.71555555-63.71555556V397.53955555c0-4.096-3.29955555-7.50933333-7.39555555-7.50933333zM129.93422222 65.64977778h328.47644445c6.94044445 0 13.42577778 3.98222222 16.49777778 10.24l116.50844444 238.25066667c3.64088889 7.50933333 11.264 12.17422222 19.56977778 12.17422222h403.68355555c4.20977778 0 7.50933333 3.41333333 7.50933333 7.50933333v496.52622222c0 70.42844445-57.11644445 127.43111111-127.4311111 127.43111111H129.93422222c-70.42844445 0-127.43111111-57.11644445-127.43111111-127.43111111V193.08088889c0-70.42844445 57.11644445-127.43111111 127.43111111-127.43111111z m390.82666667 0h159.40266666c1.25155555 0 2.50311111 0.68266667 3.18577778 1.82044444l124.928 210.03377778c0.68266667 1.13777778-0.11377778 2.50311111-1.47911111 2.50311111H652.17422222c-7.73688889 0-14.90488889-4.096-18.77333333-10.69511111L513.47911111 69.29066667c-0.79644445-1.36533333 0.11377778-3.18577778 1.70666667-3.29955556l5.57511111-0.34133333z m209.80622222 0h164.18133334c70.42844445 0 127.43111111 57.11644445 127.4311111 127.43111111v82.03377778c0 2.73066667-2.16177778 4.89244445-4.89244444 4.89244444H861.184c-5.57511111 0-10.69511111-2.95822222-13.53955555-7.73688889L727.72266667 70.54222222c-0.45511111-0.79644445-0.56888889-1.82044445-0.22755556-2.73066667 0.34133333-1.36533333 1.59288889-2.16177778 3.072-2.16177777z"  ></path></symbol><symbol id="icon-xiyu" viewBox="0 0 1024 1024"><path d="M263.202133 470.254933H743.765333a75.093333 75.093333 0 0 1 73.864534 88.541867l-46.08 253.44a75.093333 75.093333 0 0 1-73.864534 61.6448H309.248a75.093333 75.093333 0 0 1-73.864533-61.6448l-46.08-253.44a75.093333 75.093333 0 0 1 73.864533-88.541867z" fill="#94B3FF" ></path><path d="M745.403733 470.357333l-1.706666-0.1024a75.093333 75.093333 0 0 1 73.898666 88.541867l-46.08 253.44a75.093333 75.093333 0 0 1-73.864533 61.6448H309.248a75.093333 75.093333 0 0 1-73.864533-61.6448l-2.184534-11.844267 2.6624 0.1024H624.298667a75.093333 75.093333 0 0 0 73.864533-61.6448l46.08-253.44a75.093333 75.093333 0 0 0 1.194667-15.086933z" fill="#6B91EF" ></path><path d="M745.7792 470.254933a73.386667 73.386667 0 0 1 72.192 86.528l-46.6944 256.853334a73.386667 73.386667 0 0 1-72.192 60.245333H307.848533a73.386667 73.386667 0 0 1-72.192-60.245333l-46.6944-256.853334a73.386667 73.386667 0 0 1 72.192-86.528H745.813333z m0 31.573334H261.12a41.847467 41.847467 0 0 0-41.710933 44.782933l0.546133 4.539733 46.728533 256.853334c3.310933 18.363733 18.3296 32.085333 36.522667 34.0992l4.608 0.238933h391.236267c18.6368 0 34.816-12.322133 40.072533-29.866667l1.058133-4.471466 46.728534-256.853334a41.847467 41.847467 0 0 0-36.625067-49.083733l-4.539733-0.238933z" fill="#333333" ></path><path d="M136.533333 433.5616m55.057067 0l623.752533 0q55.057067 0 55.057067 55.057067l0-0.034134q0 55.057067-55.057067 55.057067l-623.752533 0q-55.057067 0-55.057067-55.057067l0 0.034134q0-55.057067 55.057067-55.057067Z" fill="#94B3FF" ></path><path d="M754.346667 433.5616h60.996266a55.022933 55.022933 0 1 1 0 110.08h-81.7152l20.6848-110.08z" fill="#6B91EF" ></path><path d="M815.342933 433.5616a55.022933 55.022933 0 1 1 0 110.08H191.5904a55.057067 55.057067 0 0 1 0-110.08h623.752533z m0 31.573333H191.5904a23.483733 23.483733 0 0 0-3.4816 46.6944l3.4816 0.273067h623.752533a23.483733 23.483733 0 0 0 3.4816-46.728533l-3.4816-0.238934z" fill="#333333" ></path><path d="M283.306667 396.868267m56.32 0l34.133333 0q56.32 0 56.32 56.32l0 107.52q0 56.32-56.32 56.32l-34.133333 0q-56.32 0-56.32-56.32l0-107.52q0-56.32 56.32-56.32Z" fill="#FFFFFF" ></path><path d="M377.890133 397.038933l-4.130133-0.170666c31.095467 0 56.32 25.258667 56.32 56.32v107.52a56.32 56.32 0 0 1-56.32 56.32h-34.133333a56.32 56.32 0 0 1-52.224-35.1232l4.164266 0.170666h52.906667a37.546667 37.546667 0 0 0 37.546667-37.546666v-126.293334c0-7.509333-1.467733-14.677333-4.096-21.1968z" fill="#E7E7E7" ></path><path d="M375.022933 396.868267c30.4128 0 55.057067 24.644267 55.057067 55.057066v110.08c0 30.378667-24.644267 55.022933-55.022933 55.022934H338.3296c-30.378667 0-55.022933-24.644267-55.022933-55.022934V451.925333c0-30.378667 24.644267-55.057067 55.022933-55.057066h36.693333z m0 31.573333H338.3296a23.483733 23.483733 0 0 0-23.210667 20.002133l-0.273066 3.4816v110.08c0 11.776 8.704 21.538133 20.036266 23.210667l3.447467 0.273067h36.693333a23.483733 23.483733 0 0 0 23.2448-20.002134l0.273067-3.4816V451.925333a23.483733 23.483733 0 0 0-20.036267-23.210666l-3.4816-0.273067zM703.6928 102.4c72.635733 0 113.4592 32.768 116.292267 95.061333l0.136533 7.0656v240.913067h-31.5392V204.526933c0-48.264533-26.0096-70.5536-84.8896-70.5536-56.456533 0-82.705067 20.48-84.7872 64.648534l-0.136533 5.905066h-31.5392C587.229867 137.659733 628.3264 102.4 703.6928 102.4z" fill="#333333" ></path><path d="M601.4976 164.9664a58.026667 58.026667 0 0 0-39.3216 15.36l-14.677333 13.5168c-12.970667 11.946667-20.3776 28.808533-20.3776 46.4896 0 25.088 20.343467 45.397333 45.397333 45.397333h64.580267a45.397333 45.397333 0 0 0 45.397333-45.397333c0-18.568533-8.635733-36.078933-23.381333-47.377067l-19.899734-15.223466a62.088533 62.088533 0 0 0-37.717333-12.765867z m0 31.5392c5.358933 0 10.581333 1.4336 15.223467 4.096l3.310933 2.184533 19.933867 15.223467a28.0576 28.0576 0 0 1 10.990933 22.3232c0 6.690133-4.778667 12.288-11.0592 13.585067l-2.798933 0.273066h-64.546134a13.858133 13.858133 0 0 1-13.892266-13.858133c0-7.3728 2.594133-14.472533 7.168-20.0704l3.072-3.208533 14.677333-13.550934a26.487467 26.487467 0 0 1 17.92-6.997333z" fill="#333333" ></path><path d="M547.84 307.712a16.042667 16.042667 0 0 1 15.906133 12.970667l0.273067 2.798933v36.693333a15.9744 15.9744 0 0 1-16.145067 15.803734 16.042667 16.042667 0 0 1-15.906133-12.970667l-0.238933-2.833067V323.4816c0-8.704 7.236267-15.7696 16.145066-15.7696zM602.897067 307.712a16.042667 16.042667 0 0 1 15.906133 12.970667l0.238933 2.798933v36.693333a15.9744 15.9744 0 0 1-16.145066 15.803734 16.042667 16.042667 0 0 1-15.872-12.970667l-0.273067-2.833067V323.4816c0-8.704 7.236267-15.7696 16.145067-15.7696zM657.954133 307.712a16.042667 16.042667 0 0 1 15.872 12.970667l0.273067 2.798933v36.693333a15.9744 15.9744 0 0 1-16.145067 15.803734 16.042667 16.042667 0 0 1-15.906133-12.970667l-0.238933-2.833067V323.4816c0-8.704 7.236267-15.7696 16.145066-15.7696z" fill="#333333" ></path><path d="M271.36 601.531733a15.7696 15.7696 0 0 1 17.681067 9.8304l0.750933 2.730667 20.138667 105.915733a15.7696 15.7696 0 0 1-30.242134 8.6016l-0.785066-2.730666-20.104534-105.8816a15.7696 15.7696 0 0 1 12.561067-18.432z" fill="#A7C1FF" ></path><path d="M583.5776 203.502933l-14.677333 13.550934a31.6416 31.6416 0 0 0-10.24 23.278933c0 7.645867 6.212267 13.858133 13.892266 13.858133h64.546134a13.858133 13.858133 0 0 0 13.858133-13.858133 28.0576 28.0576 0 0 0-10.990933-22.3232l-19.933867-15.223467a30.5152 30.5152 0 0 0-18.5344-6.280533 26.487467 26.487467 0 0 0-17.92 6.997333z" fill="#F4BE59" ></path></symbol><symbol id="icon-quxiaoshangzuan" viewBox="0 0 1024 1024"><path d="M547.584 252.064l-35.584-20.48-30.016 17.28 0-53.696-93.632-0.96 125.792-124.8 121.536 127.232-88.096-0.896 0 56.32zM32.512 825.888l-31.776-55.552 226.976-129.792-155.52-89.504c-10.016-5.76-10.88-19.55200001-2.496-26.656l2.528-1.76 423.424-243.776c8.864-5.12 19.52-5.76 28.832-1.92l3.904 1.92 165.376 95.2 253.12-144.8 31.808 55.552-220.704 126.208 193.792 111.616a16.416 16.416 0 0 1 2.528 26.656l-2.528 1.76-423.392 243.776c-8.864 5.12-19.52 5.76-28.832 1.92l-3.904-1.92-203.68-117.28-259.456 148.352z m261.12-223.04l188.384-107.712 0-94.912 29.984-17.28 35.584 20.48L547.584 457.6l80.224-45.824L512 345.088l-333.024 191.744 114.656 66.016z m218.4 125.696L845.024 536.832l-152.99199999-88.096-144.41600001 82.592-0.032 138.88-35.584 20.48-30.016-17.28 0-104.576-124.096 70.976L512 728.54400001z m-30.048 226.04799999l0-129.79199999L512 842.07999999l35.584-20.47999999L547.584 954.56l-65.6 0z" fill="#979BA5" ></path></symbol><symbol id="icon-quxiaoxiazuan" viewBox="0 0 1024 1024"><path d="M476.416 771.936l35.584 20.48 30.016-17.28v53.696l93.632 0.96-125.792 124.8-121.536-127.232 88.096 0.896v-56.32zM991.488 198.112l31.776 55.552-226.976 129.792 155.52 89.504c10.016 5.76 10.88 19.552 2.496 26.656l-2.528 1.76-423.424 243.776c-8.864 5.12-19.52 5.76-28.832 1.92l-3.904-1.92-165.376-95.2-253.12 144.8-31.808-55.552 220.704-126.208-193.792-111.616a16.416 16.416 0 0 1-2.528-26.656l2.528-1.76 423.392-243.776c8.864-5.12 19.52-5.76 28.832-1.92l3.904 1.92 203.68 117.28 259.456-148.352z m-261.12 223.04l-188.384 107.712v94.912l-29.984 17.28-35.584-20.48V566.4l-80.224 45.824L512 678.912l333.024-191.744-114.656-66.016z m-218.4-125.696L178.976 487.168l152.992 88.096 144.416-82.592 0.032-138.88 35.584-20.48 30.016 17.28v104.576l124.096-70.976L512 295.456z m30.048-226.048v129.792L512 181.92l-35.584 20.48V69.44h65.6z" fill="#979BA5" ></path></symbol><symbol id="icon-linkage" viewBox="0 0 1024 1024"><path d="M 876.8 147.2 c -112 -112 -294.4 -112 -409.6 0 l -137.6 137.6 l 44.8 44.8 L 512 195.2 c 86.4 -86.4 230.4 -86.4 316.8 0 s 86.4 230.4 0 316.8 l -137.6 137.6 l 44.8 44.8 l 137.6 -137.6 c 115.2 -112 115.2 -294.4 3.2 -409.6 Z M 512 828.8 c -86.4 86.4 -230.4 86.4 -316.8 0 s -86.4 -230.4 0 -316.8 l 137.6 -137.6 L 288 329.6 l -137.6 137.6 c -112 112 -112 297.6 0 409.6 s 294.4 112 409.6 0 l 137.6 -137.6 l -44.8 -44.8 l -140.8 134.4 Z m 182.4 -454.4 l -44.8 -44.8 l -316.8 316.8 l 44.8 44.8 l 316.8 -316.8 Z"  ></path></symbol><symbol id="icon-xiazuan" viewBox="0 0 1024 1024"><path d="M506.88 546.133333c18.773333 0 34.133333-15.36 34.133333-34.133333V46.08c0-18.773333-15.36-34.133333-34.133333-34.133333s-34.133333 15.36-34.133333 34.133333V512c0 18.773333 15.36 34.133333 34.133333 34.133333z"  ></path><path d="M989.866667 464.213333l-336.213334-150.186666c-17.066667-8.533333-37.546667 0-44.373333 17.066666-8.533333 17.066667 0 37.546667 17.066667 44.373334l256 114.346666-373.76 121.173334-365.226667-129.706667L392.533333 373.76c17.066667-6.826667 25.6-27.306667 17.066667-44.373333-6.826667-17.066667-27.306667-25.6-44.373333-17.066667L37.546667 453.973333c-11.946667 5.12-20.48 17.066667-20.48 32.426667s8.533333 25.6 22.186666 30.72L494.933333 680.96c3.413333 1.706667 6.826667 1.706667 11.946667 1.706667 3.413333 0 6.826667 0 10.24-1.706667L986.453333 529.066667c13.653333-5.12 22.186667-17.066667 23.893334-30.72 0-15.36-8.533333-27.306667-20.48-34.133334zM590.506667 855.04L541.013333 904.533333v-134.826666c0-18.773333-15.36-34.133333-34.133333-34.133334s-34.133333 15.36-34.133333 34.133334v124.586666l-39.253334-39.253333c-13.653333-13.653333-34.133333-13.653333-47.786666 0s-13.653333 34.133333 0 47.786667l102.4 102.4c6.826667 6.826667 15.36 10.24 23.893333 10.24 8.533333 0 17.066667-3.413333 23.893333-10.24l102.4-102.4c13.653333-13.653333 13.653333-34.133333 0-47.786667-11.946667-13.653333-34.133333-13.653333-47.786666 0z"  ></path></symbol><symbol id="icon-shangzuan" viewBox="0 0 1024 1024"><path d="M520.533333 780.8c-19.2 0-34.133333 14.933333-34.133333 34.133333V981.333333c0 19.2 14.933333 34.133333 34.133333 34.133334 19.2 0 34.133333-14.933333 34.133334-34.133334v-166.4c0-19.2-14.933333-34.133333-34.133334-34.133333zM17.066667 533.333333c2.133333 12.8 10.666667 25.6 23.466666 29.866667l469.333334 151.466667c4.266667 2.133333 6.4 2.133333 10.666666 2.133333s8.533333 0 12.8-2.133333l456.533334-164.266667c12.8-4.266667 21.333333-14.933333 21.333333-29.866667s-8.533333-27.733333-21.333333-32L661.333333 347.733333c-17.066667-8.533333-38.4 0-44.8 17.066667-8.533333 17.066667 0 38.4 17.066667 44.8l249.6 106.666667-364.8 130.133333-373.333333-121.6 256-115.2c17.066667-6.4 25.6-27.733333 17.066666-44.8-6.4-17.066667-27.733333-25.6-44.8-17.066667l-337.066666 149.333334c-10.666667 10.666667-19.2 21.333333-19.2 36.266666zM437.333333 172.8l49.066667-49.066667v411.733334c0 19.2 14.933333 34.133333 34.133333 34.133333 19.2 0 34.133333-14.933333 34.133334-34.133333V132.266667L593.066667 170.666667c12.8 12.8 34.133333 12.8 46.933333 0s12.8-34.133333 0-46.933334L539.733333 21.333333c-6.4-6.4-14.933333-10.666667-23.466666-10.666666-8.533333 0-17.066667 4.266667-23.466667 10.666666l-102.4 102.4c-12.8 12.8-12.8 34.133333 0 46.933334 10.666667 14.933333 32 14.933333 46.933333 2.133333z"  ></path></symbol><symbol id="icon-quxiaoliandong" viewBox="0 0 1024 1024"><path d="M611.754667 710.613333a38.144 38.144 0 0 1 0 53.930667l-123.818667 123.818667c-95.530667 95.530667-256.341333 95.530667-351.872 0-95.488-95.488-95.488-256.341333 0-351.829334l123.818667-123.818666a38.144 38.144 0 1 1 53.973333 53.930666L190.037333 590.506667c-70.528 73.685333-74.069333 177.28-3.626666 247.637333 70.4 70.4 170.453333 72.234667 247.594666-3.669333l123.818667-123.818667a38.144 38.144 0 0 1 53.930667 0z m-199.509334-397.226666a38.144 38.144 0 0 1 0-53.930667l123.818667-123.818667c95.488-95.530667 256.341333-95.530667 351.872 0 95.488 95.488 95.488 256.341333 0 351.829334l-123.818667 123.818666a38.144 38.144 0 1 1-53.930666-53.930666l123.776-123.818667c70.528-73.685333 74.069333-177.28 3.669333-247.637333-70.357333-70.4-170.453333-72.234667-247.594667 3.669333l-123.861333 123.818667a38.144 38.144 0 0 1-53.930667 0z m232.362667 512.426666a32.682667 32.682667 0 0 1 65.408 0v65.450667a32.682667 32.682667 0 1 1-65.408 0v-65.408z m208.042667 27.434667a33.621333 33.621333 0 0 1-47.445334-0.554667l-45.482666-46.421333a33.28 33.28 0 0 1 47.36-46.890667l45.909333 45.994667a33.621333 33.621333 0 0 1-0.341333 47.872z m-55.466667-176.384c0-20.053333 16.298667-36.309333 36.352-36.309333H891.733333a36.352 36.352 0 0 1 0 72.661333h-58.154666a36.352 36.352 0 0 1-36.309334-36.352zM317.013333 130.773333a32.682667 32.682667 0 1 1 65.408 0v65.408a32.682667 32.682667 0 0 1-65.408 0V130.773333z m-142.677333 37.973334A33.621333 33.621333 0 0 1 221.866667 169.386667l45.482666 46.421333a33.28 33.28 0 0 1-47.36 46.848L173.994667 216.704a33.621333 33.621333 0 0 1 0.341333-47.914667zM98.986667 345.173333c0-20.053333 16.256-36.352 36.352-36.352h58.112a36.352 36.352 0 0 1 0 72.704H135.338667a36.352 36.352 0 0 1-36.352-36.352z"  ></path></symbol><symbol id="icon-edit-outline" viewBox="0 0 1026 1024"><path d="M307.933767 709.191401l55.608246-121.906912 70.215853 67.788777-125.824099 54.118135z m95.818675-171.645022l366.409348-352.874171 82.001279 80.116062-365.732025 352.095249-82.678602-79.33714z m550.042994-370.90226l-50.505744 48.372175-81.854525-80.116062 49.704244-47.593254c8.003704-7.958549 23.435387-6.513593 32.150281 2.144858l48.281866 46.182162c5.147657 5.03477 8.071436 11.559652 8.071436 18.039379 0.011289 5.046059-2.201301 9.36964-5.847558 12.970742zM313.792614 530.299019c-0.745056 0.767633-1.467534 1.478823-2.21259 2.889913L259.640613 717.217683c-2.923779 10.78073 0 22.340381 8.071436 30.310219 6.581325 5.779826 14.607607 9.290618 23.390233 9.290619 2.935068 0 5.113791-0.699901 8.03757-1.399802l190.147239-49.749399h0.79021a8.048859 8.048859 0 0 0 5.791115-2.178724l507.721574-489.208069c15.28493-14.40441 23.356366-33.888744 23.356367-55.551803 0-24.519105-10.927483-49.03821-29.215214-67.077588l-48.281865-46.182163c-19.010208-18.039378-43.935707-28.853974-69.572396-28.853974-22.577445 0-43.145497 7.935972-57.707948 23.074149L314.503803 528.109007c-0.71119 0.699901-0.71119 1.478823-0.711189 2.190012zM100.932466 0C45.358086 0 0 44.70334 0 99.555242V923.530372c0 54.806747 45.358086 99.555242 100.932466 99.555241h806.082505c55.57438 0 100.864734-44.748495 100.864734-99.555241V397.543645h-86.290994v451.729511c0 49.049498-40.221718 87.939147-89.214772 87.939147H175.539632c-49.004344 0-89.214772-38.889648-89.214773-87.939147V173.157711c0-48.338309 40.210429-88.040745 89.214773-88.040745h457.904443V0H100.932466z"  ></path></symbol><symbol id="icon-edit" viewBox="0 0 1026 1024"><path d="M307.933767 709.191401l55.608246-121.906912 70.215853 67.788777-125.824099 54.118135z m95.818675-171.645022l366.409348-352.874171 82.001279 80.116062-365.732025 352.095249-82.678602-79.33714z m550.042994-370.90226l-50.505744 48.372175-81.854525-80.116062 49.704244-47.593254c8.003704-7.958549 23.435387-6.513593 32.150281 2.144858l48.281866 46.182162c5.147657 5.03477 8.071436 11.559652 8.071436 18.039379 0.011289 5.046059-2.201301 9.36964-5.847558 12.970742zM313.792614 530.299019c-0.745056 0.767633-1.467534 1.478823-2.21259 2.889913L259.640613 717.217683c-2.923779 10.78073 0 22.340381 8.071436 30.310219 6.581325 5.779826 14.607607 9.290618 23.390233 9.290619 2.935068 0 5.113791-0.699901 8.03757-1.399802l190.147239-49.749399h0.79021a8.048859 8.048859 0 0 0 5.791115-2.178724l507.721574-489.208069c15.28493-14.40441 23.356366-33.888744 23.356367-55.551803 0-24.519105-10.927483-49.03821-29.215214-67.077588l-48.281865-46.182163c-19.010208-18.039378-43.935707-28.853974-69.572396-28.853974-22.577445 0-43.145497 7.935972-57.707948 23.074149L314.503803 528.109007c-0.71119 0.699901-0.71119 1.478823-0.711189 2.190012zM100.932466 0C45.358086 0 0 44.70334 0 99.555242V923.530372c0 54.806747 45.358086 99.555242 100.932466 99.555241h806.082505c55.57438 0 100.864734-44.748495 100.864734-99.555241V397.543645h-86.290994v451.729511c0 49.049498-40.221718 87.939147-89.214772 87.939147H175.539632c-49.004344 0-89.214772-38.889648-89.214773-87.939147V173.157711c0-48.338309 40.210429-88.040745 89.214773-88.040745h457.904443V0H100.932466z"  ></path></symbol><symbol id="icon-xiangqing1" viewBox="0 0 1024 1024"><path d="M449.024 896h-288c-17.92 0-32-14.72-32-32v-704c0-17.92 14.08-32 32-32h640c17.28 0 32 14.08 32 32V448a32 32 0 0 0 64 0V128c0-35.2-28.8-64-64-64h-704c-35.2 0-64 28.8-64 64v768c0 35.2 28.8 64 64 64h320a32 32 0 0 0 0-64zM946.176 901.824l-83.2-83.2c-6.4-6.4-12.8-6.4-19.2-6.4-19.2 0-32 12.8-32 32 0 6.4 0 12.8 6.4 19.2l83.2 83.2c6.4 6.4 12.8 12.8 25.6 12.8 19.2 0 32-12.8 32-32 0-6.4-6.4-19.2-12.8-25.6z"  ></path><path d="M703.936 510.592a192 192 0 1 0 0 384 192 192 0 0 0 0-384z m0 320a128 128 0 1 1-0.064-255.936 128 128 0 0 1 0.064 255.936zM736.384 319.36H223.36a31.552 31.552 0 0 1-31.488-31.488v-1.024c0-17.344 14.144-31.488 31.488-31.488h513.024c17.344 0 31.488 14.144 31.488 31.488v1.024c0 17.28-14.208 31.488-31.488 31.488zM734.336 447.36H221.376a31.552 31.552 0 0 1-31.488-31.488v-1.024c0-17.344 14.144-31.488 31.488-31.488h513.024c17.344 0 31.488 14.144 31.488 31.488v1.024c0 17.28-14.208 31.488-31.552 31.488zM416 575.04H223.04a31.552 31.552 0 0 1-31.488-31.488v-1.024c0-17.344 14.144-31.488 31.488-31.488H416c17.344 0 31.488 14.144 31.488 31.488v1.024a31.552 31.552 0 0 1-31.488 31.488z"  ></path></symbol><symbol id="icon-weibiaoti-1" viewBox="0 0 1024 1024"><path d="M512 19.413487C47.059275 19.413487 19.413487 47.059275 19.413487 512s27.645788 492.586513 492.586513 492.586513 492.586513-27.645788 492.586513-492.586513S976.940725 19.413487 512 19.413487z" fill="#1296db" ></path></symbol><symbol id="icon-weibiaoti-" viewBox="0 0 1036 1024"><path d="M512.072842 512m-505.929333 0a505.929334 505.929334 0 1 0 1011.858667 0 505.929334 505.929334 0 1 0-1011.858667 0Z" fill="#ffffff" ></path><path d="M512.072842 1024C28.726387 1024 0.072842 995.346455 0.072842 512S28.726387 0 512.072842 0s512 28.653545 512 512-28.653545 512-512 512z m0-1011.858667C35.525534 12.141333 12.214175 35.452691 12.214175 512s23.311359 499.858667 499.858667 499.858667 499.858667-23.311359 499.858667-499.858667S988.620151 12.141333 512.072842 12.141333z"  ></path></symbol><symbol id="icon-touming" viewBox="0 0 1024 1024"><path d="M0 819.2h204.8V1024H0zM0 0h204.8v204.8H0zM0 409.6h204.8v204.8H0z" fill="#999999" ></path><path d="M204.8 204.8h204.8v204.8H204.8zM204.8 614.4h204.8v204.8H204.8z" fill="#B7B7B7" ></path><path d="M409.6 0h204.8v204.8H409.6zM409.6 409.6h204.8v204.8H409.6z" fill="#C6C6C6" ></path><path d="M614.4 204.8h204.8v204.8h-204.8zM614.4 614.4h204.8v204.8h-204.8z" fill="#DDDDDD" ></path><path d="M409.6 819.2h204.8V1024H409.6z" fill="#C6C6C6" ></path><path d="M819.2 0H1024v204.8h-204.8zM819.2 409.6H1024v204.8h-204.8zM819.2 819.2H1024V1024h-204.8z" fill="#F4F4F4" ></path></symbol><symbol id="icon-fangxing-" viewBox="0 0 1024 1024"><path d="M293.047427 796.738991v-133.327352c0-217.759502 176.531539-394.289445 394.289445-394.289446h133.330542v-104.189607H652.839875c-256.250417 0-463.980461 207.730044-463.980461 463.977271v167.829134h104.188013z"  ></path></symbol><symbol id="icon-fangda" viewBox="0 0 1024 1024"><path d="M470.624 553.376a32 32 0 0 1 2.656 42.24l-2.656 3.008L269.28 800l145.984 0.032a32 32 0 0 1 31.776 28.256l0.224 3.744a32 32 0 0 1-28.288 31.776l-3.712 0.224H192l-2.4-0.096-4.032-0.544-3.552-0.96-3.552-1.408-3.136-1.664-3.072-2.144-2.88-2.56a32.32 32.32 0 0 1-3.104-3.584l-2.272-3.52-1.728-3.648-1.12-3.36-0.96-4.8L160 832V607.872a32 32 0 0 1 63.776-3.712l0.224 3.712-0.032 146.848 201.408-201.344a32 32 0 0 1 45.248 0zM608.736 160H832l2.4 0.096 4.032 0.544 3.552 0.96 3.552 1.408 3.136 1.664 3.072 2.144 2.88 2.56c1.152 1.12 2.176 2.336 3.104 3.584l2.272 3.52 1.728 3.648 1.12 3.36 0.96 4.8L864 192v224.128a32 32 0 0 1-63.776 3.712l-0.224-3.712v-146.88L598.624 470.624a32 32 0 0 1-47.904-42.24l2.656-3.008L754.688 224h-145.92a32 32 0 0 1-31.808-28.256l-0.224-3.744a32 32 0 0 1 28.288-31.776l3.712-0.224z"  ></path></symbol><symbol id="icon-shezhi" viewBox="0 0 1024 1024"><path d="M416.4 958h191.2V849.7c0-12.7 6.4-25.5 19.1-31.9 31.9-12.7 63.7-31.9 89.2-51 12.7-6.4 25.5-6.4 38.2 0l95.6 57.3 95.6-165.7-95.6-57.3C837 588.5 830.6 575.7 837 563c0-19.1 6.4-31.9 6.4-51s0-31.9-6.4-51c0-12.7 6.4-25.5 12.7-31.9l95.6-57.3-95.6-165.7-95.6 57.3c-12.7 6.4-25.5 6.4-38.2 0-25.5-19.1-57.3-38.2-89.2-51-12.7-12.7-19.1-25.5-19.1-38.2V66H416.4v108.3c0 12.7-6.4 25.5-19.1 31.9-31.9 12.7-63.7 31.9-89.2 51-12.7 6.4-25.5 6.4-38.2 0l-95.6-51-95.6 165.6 95.6 57.3c12.7 6.4 19.1 19.1 12.7 31.9 0 19.1-6.4 31.9-6.4 51s0 31.9 6.4 51c6.4 12.7 0 25.5-12.7 31.9l-95.6 57.3 95.6 165.7 95.6-57.3c12.7-6.4 25.5-6.4 38.2 0 25.5 19.1 57.3 38.2 89.2 51 12.7 6.4 19.1 19.1 19.1 31.9V958z m223 63.7H384.6c-19.1 0-31.9-12.7-31.9-31.9v-121c-25.5-12.7-51-25.5-70.1-38.2l-101.9 63.7c-12.7 6.4-31.9 6.4-44.6-12.7L8.6 658.6c-12.7-19.1-6.4-38.2 12.7-44.6l101.9-63.7v-76.5L21.4 410.1c-19.1-6.4-25.5-25.5-12.7-44.6l127.4-223c6.4-12.7 25.5-19.1 44.6-6.4l101.9 63.7c19.1-12.7 44.6-31.9 70.1-38.2V34.1c0-19.1 12.7-31.9 31.9-31.9h254.9c19.1 0 31.9 12.7 31.9 31.9v121.1c25.5 12.7 51 25.5 70.1 38.2l101.9-63.7c12.7-6.4 31.9-6.4 44.6 12.7l127.4 223c12.7 19.1 6.4 38.2-12.7 44.6l-101.9 63.7v76.5l101.9 63.7c12.7 6.4 19.1 25.5 12.7 44.6L888 881.5c-6.4 12.7-25.5 19.1-44.6 12.7l-101.9-63.7c-19.1 12.7-44.6 31.9-70.1 38.2v121.1c-0.1 19.2-12.8 31.9-32 31.9zM512 703.2c-108.3 0-191.2-82.8-191.2-191.2S403.7 320.8 512 320.8 703.2 403.7 703.2 512 620.3 703.2 512 703.2z m0-318.6c-70.1 0-127.4 57.3-127.4 127.4S441.9 639.4 512 639.4 639.4 582.1 639.4 512 582.1 384.6 512 384.6z"  ></path></symbol><symbol id="icon-quanping1" viewBox="0 0 1024 1024"><path d="M628.053333 628.053333a32 32 0 0 1 45.226667 0l158.72 158.634667V693.333333l0.298667-4.352A32 32 0 0 1 896 693.333333v181.333334l-0.341333 3.84a21.333333 21.333333 0 0 1-20.992 17.493333h-181.333334l-4.352-0.298667a32 32 0 0 1-27.648-31.701333l0.298667-4.352a32 32 0 0 1 31.701333-27.648h93.44l-158.72-158.72-3.114666-3.584a32 32 0 0 1 3.114666-41.642667z m-232.106666 0a32 32 0 0 1 3.114666 41.642667l-3.114666 3.584-158.72 158.72h93.44a32 32 0 0 1 31.701333 27.648l0.298667 4.352a32 32 0 0 1-27.648 31.701333L330.666667 896H149.333333a21.333333 21.333333 0 0 1-20.992-17.493333L128 874.666667v-181.333334a32 32 0 0 1 63.701333-4.352l0.298667 4.352v93.354667l158.72-158.634667a32 32 0 0 1 45.226667 0zM874.666667 128a21.333333 21.333333 0 0 1 20.992 17.493333L896 149.333333v181.333334a32 32 0 0 1-63.701333 4.352L832 330.666667V237.312L673.28 395.946667a32 32 0 0 1-48.341333-41.642667l3.114666-3.584 158.72-158.72h-93.44a32 32 0 0 1-31.701333-27.648L661.333333 160a32 32 0 0 1 27.648-31.701333L693.333333 128h181.333334zM330.666667 128l4.352 0.298667a32 32 0 0 1 27.648 31.701333l-0.298667 4.352a32 32 0 0 1-31.701333 27.648H237.226667l158.72 158.72 3.114666 3.584a32 32 0 0 1-48.341333 41.642667L192 237.312V330.666667l-0.298667 4.352A32 32 0 0 1 128 330.666667V149.333333l0.341333-3.84A21.333333 21.333333 0 0 1 149.333333 128h181.333334z"  ></path></symbol><symbol id="icon-font-weight-bold" viewBox="0 0 1024 1024"><path d="M148.945455 55.854545h409.6c102.4 0 186.181818 27.927273 242.036363 83.781819 37.236364 37.236364 65.163636 93.090909 65.163637 148.945454 0 111.709091-65.163636 167.563636-130.327273 204.8 102.4 37.236364 176.872727 102.4 176.872727 223.418182 0 167.563636-130.327273 251.345455-335.127273 251.345455h-418.909091v-912.29091z m549.236363 260.654546c0-74.472727-55.854545-111.709091-158.254545-111.709091h-232.727273v242.036364h223.418182c93.090909-9.309091 167.563636-46.545455 167.563636-130.327273z m-139.636363 260.654545h-251.345455v251.345455h269.963636c111.709091 0 176.872727-46.545455 176.872728-121.018182-9.309091-83.781818-65.163636-130.327273-195.490909-130.327273z"  ></path></symbol><symbol id="icon-letter_spacing" viewBox="0 0 1127 1024"><path d="M320.37397 751.711955a32.882959 32.882959 0 0 0 20.669289-6.81147 64.356648 64.356648 0 0 0 15.971723-18.555384 172.400656 172.400656 0 0 0 12.21367-25.601732q5.167322-13.857818 10.569522-28.890028L422.780899 549.012002h281.853933l57.075421 163.005524a67.175187 67.175187 0 0 0 16.44148 29.359785 35.936376 35.936376 0 0 0 29.124906 10.099766q27.480758 0 34.996863-17.615871a61.068352 61.068352 0 0 0 0-43.217603L617.729869 37.447114a52.142978 52.142978 0 0 0-19.02514-27.245881A59.189326 59.189326 0 0 0 563.707866 0.101467a54.961517 54.961517 0 0 0-35.231742 10.099766 53.082491 53.082491 0 0 0-18.555384 27.245881l-222.19485 651.317463q-11.743914 36.171255 0 49.559316a41.338577 41.338577 0 0 0 32.64808 13.388062zM563.707866 108.85011l125.190121 365.705478H438.517744zM1122.483287 906.731618l-132.471348-96.300094a11.743914 11.743914 0 0 0-18.555384 9.395131v61.068352H156.194054v-60.833473a11.743914 11.743914 0 0 0-18.555383-9.395132L4.932444 906.731618a11.743914 11.743914 0 0 0 0 19.02514l132.471348 96.065216a11.743914 11.743914 0 0 0 18.555384-9.395131v-61.068352h815.027622v60.833473a11.743914 11.743914 0 0 0 18.555384 9.395131l132.706227-96.065215a11.743914 11.743914 0 0 0 0.234878-18.790262z"  ></path></symbol><symbol id="icon-letter-spacing" viewBox="0 0 1152 1024"><path d="M1024 0h128v1024h-128zM0 0h128v1024H0z m657.92 128H494.08L186.24 864h138.88l64-160h368.64l64 160h138.88z m49.28 448H448l128-313.6z"  ></path></symbol><symbol id="icon-zimua" viewBox="0 0 1024 1024"><path d="M481.28 117.76h61.44c22.528 0 43.008 13.824 51.2 34.816l287.232 745.984c1.536 3.584-1.024 7.68-5.12 7.68h-117.248c-2.048 0-4.096-1.536-5.12-3.584l-70.144-192.512c-1.536-4.096-5.632-7.168-10.24-7.168H349.696c-4.608 0-8.704 3.072-10.24 7.168l-70.144 192.512c-1.024 2.048-3.072 3.584-5.12 3.584H147.968c-3.584 0-6.656-4.096-5.12-7.68L430.08 152.576c8.192-20.992 28.16-34.816 51.2-34.816z m-87.04 485.888h235.008c7.68 0 12.8-7.68 10.24-14.848l-124.928-342.016h-4.608L384 588.8c-3.072 7.168 2.56 14.848 10.24 14.848z"  ></path></symbol><symbol id="icon-format_letter_spacing_" viewBox="0 0 1024 1024"><path d="M682.666667 704l128 106.666667-128 106.666666v-85.333333H341.333333v85.333333L213.333333 810.666667l128-106.666667v85.333333h341.333334v-85.333333zM170.666667 170.666667v682.666666H85.333333V170.666667h85.333334z m768 0v682.666666h-85.333334V170.666667h85.333334z m-394.666667 0l202.666667 469.333333h-89.6l-38.4-93.866667h-213.333334L366.933333 640H277.333333l202.666667-469.333333h64zM512 255.146667L432.213333 469.333333h159.573334L512 255.146667z"  ></path></symbol><symbol id="icon-font_size" viewBox="0 0 1024 1024"><path d="M923.456 713.152V644.48h-68.608v205.76h68.608v68.544h-205.76v-68.544h68.608V644.48h-68.608v68.608h-68.544V644.48c0-37.824 30.72-68.544 68.544-68.544h205.76c37.824 0 68.544 30.72 68.544 68.544v68.608h-68.544zM512 233.152H443.456v548.544H580.48v137.152H169.152v-137.152h137.152V233.152H237.696c-75.712 0-137.152 61.44-137.152 137.152H32V164.48C32 126.72 62.72 96 100.544 96h548.608c37.888 0 68.544 30.72 68.544 68.544v205.76h-68.544c0-75.776-61.44-137.152-137.152-137.152z"  ></path></symbol><symbol id="icon-align-center" viewBox="0 0 1024 1024"><path d="M34.45333333 77.86666667h954.56v124.37333333H34.45333333zM213.76 327.25333333H809.6v124.37333334H213.76zM34.45333333 575.46666667h954.56v124.37333333H34.45333333zM213.76 824.74666667H809.6v124.37333333H213.76z"  ></path></symbol><symbol id="icon-juyou" viewBox="0 0 1024 1024"><path d="M53.355789 53.894737v108.328421H970.105263V53.894737H53.355789z m431.157895 377.802105H970.105263V323.368421H484.513684v108.328421z m-431.157895 269.473684H970.105263V592.842105H53.355789v108.328421z m431.157895 269.473685H970.105263V862.315789H484.513684v108.328422z"  ></path></symbol><symbol id="icon-juzuo" viewBox="0 0 1331 1024"><path d="M898.304 819.712v127.488H153.6v-127.488z m279.296-256v127.488H153.6v-127.488z m-279.296-256V435.2H153.6V307.2zM1177.6 51.2v127.488H153.6V51.2z"  ></path></symbol><symbol id="icon-solid_line" viewBox="0 0 1024 1024"><path d="M102.4 460.8h819.2v102.4H102.4z"  ></path></symbol><symbol id="icon-huabi" viewBox="0 0 1024 1024"><path d="M884.641557 138.571009C811.672662 65.565275 755.277234 56.513108 726.075145 85.715197l-79.284741 79.283718 211.422224 211.422224 79.31851-79.284741C966.698434 267.936355 957.646268 211.538881 884.641557 138.571009z"  ></path><path d="M144.589584 667.200758c-14.600533 14.564717-68.333318 226.898707-68.333318 226.898707-3.193739 8.709359-10.073426 42.179658 0 52.855812 7.039323 7.460925 25.424042 10.638291 52.855812 0 0 0 212.33399-53.730739 226.938616-68.333318l449.309192-449.345008L593.934592 217.85575 144.589584 667.200758zM132.177903 891.034662 185.764356 708.376553l129.110543 129.071657L132.177903 891.034662z"  ></path></symbol><symbol id="icon-dianxian" viewBox="0 0 1024 1024"><path d="M228.32 532.76h-6.92c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h6.92c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76zM712.65 532.76h-13.84c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h13.84c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76z m-96.87 0h-13.84c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h13.84c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z m-96.86 0h-13.84c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h13.84c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76z m-96.87 0h-13.84c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h13.84c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z m-96.86 0h-13.84c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h13.84c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76zM802.59 532.76h-6.92c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h6.92c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z"  ></path></symbol><symbol id="icon-xuxian" viewBox="0 0 1024 1024"><path d="M304.43 532.76H221.4c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h83.03c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76zM581.19 532.76H442.81c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h138.38c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76zM802.59 532.76h-83.03c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h83.03c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z"  ></path></symbol><symbol id="icon-beijingse1" viewBox="0 0 1024 1024"><path d="M882.980571 580.900571c0-25.6-9.289143-51.2-27.940571-67.437714L508.342857 166.692571 398.848 57.270857a33.718857 33.718857 0 0 0-48.932571 0 33.718857 33.718857 0 0 0 0 48.859429L436.150857 192.365714 114.980571 511.122286c-37.302857 37.229714-37.302857 100.059429 0 137.289143l300.178286 300.251428c18.651429 18.578286 44.251429 27.867429 67.510857 27.867429 25.6 0 48.859429-9.289143 67.510857-27.867429l300.178286-300.251428c20.992-18.651429 32.621714-41.910857 32.621714-67.510858zM163.84 559.981714l321.097143-318.902857 318.902857 318.902857c4.681143 4.681143 6.948571 11.629714 6.948571 18.578286h-653.897142c0-4.608 2.267429-11.629714 6.948571-18.578286z m709.778286 214.089143s-62.829714 83.821714-62.829715 118.710857c0 34.889143 27.940571 62.829714 62.902858 62.829715 34.889143 0 62.829714-27.940571 62.829714-62.902858 0-34.816-62.902857-118.637714-62.902857-118.637714z" fill="#606266" ></path></symbol><symbol id="icon-juxing" viewBox="0 0 1024 1024"><path d="M876.4664713541666 302.9680989583333H776.4029947916665V202.90462239583334c0-11.865234374999998-9.8876953125-21.7529296875-21.7529296875-21.7529296875s-21.7529296875 9.8876953125-21.7529296875 21.7529296875v100.0634765625H632.8336588541666c-11.865234374999998 0-21.7529296875 9.8876953125-21.7529296875 21.7529296875s9.8876953125 21.7529296875 21.7529296875 21.7529296875h100.0634765625v100.0634765625c0 11.865234374999998 9.8876953125 21.7529296875 21.7529296875 21.7529296875s21.7529296875-9.8876953125 21.7529296875-21.7529296875V346.4739583333333H876.4664713541666c11.865234374999998 0 21.7529296875-9.8876953125 21.7529296875-21.7529296875 0-12.2607421875-9.8876953125-21.7529296875-21.7529296875-21.7529296875zM146.75455729166666 386.0247395833333c11.07421875 0 19.775390625-8.701171874999998 19.775390625-19.775390625h0.7910156249999999v-21.7529296875h36.38671875c10.678710937499998 0 19.775390625-8.701171874999998 19.775390625-19.775390625s-9.0966796875-19.775390625-19.775390625-19.775390625l-56.953125-0.39550781249999994c-11.07421875 0-19.775390625 8.701171874999998-19.775390625 19.775390625v42.71484374999999c0 9.8876953125 8.701171874999998 18.984374999999996 19.775390625 18.984374999999996z m135.26367187500003-41.92382812499999h98.876953125c11.07421875 0 19.775390625-8.701171874999998 19.775390625-19.775390625s-8.701171874999998-19.775390625-19.775390625-19.775390625h-98.876953125c-11.07421875 0-19.775390625 9.0966796875-19.775390625 19.775390625 0 11.07421875 9.0966796875 19.775390625 19.775390625 19.775390625z m177.1875 0h98.876953125c11.07421875 0 19.775390625-8.701171874999998 19.775390625-19.775390625s-8.701171874999998-19.775390625-19.775390625-19.775390625h-98.876953125c-11.07421875 0-19.775390625 9.0966796875-19.775390625 19.775390625 0.7910156249999999 11.07421875 8.701171874999998 19.775390625 19.775390625 19.775390625zM774.8209635416665 560.8391927083335c0-11.07421875-8.701171874999998-19.775390625-19.775390625-19.775390625s-19.775390625 8.701171874999998-19.775390625 19.775390625v98.876953125c0 11.07421875 8.701171874999998 19.775390625 19.775390625 19.775390625s19.775390625-8.701171874999998 19.775390625-19.775390625v-98.876953125z m-19.775390625 157.41210937500003c-11.07421875 0-19.775390625 9.0966796875-19.775390625 19.775390625v64.072265625h-79.1015625v1.1865234374999998c-11.07421875 0-19.775390625 8.701171874999998-19.775390625 19.775390625s8.701171874999998 19.775390625 19.775390625 19.775390625h98.876953125c11.07421875 0 19.775390625-8.701171874999998 19.775390625-19.775390625V738.8177083333334c0-11.865234374999998-9.0966796875-20.56640625-19.775390625-20.56640625zM581.0221354166666 802.0989583333333L166.52994791666666 801.3079427083333V423.2024739583333h-0.7910156249999999c0-11.07421875-8.701171874999998-19.775390625-19.775390625-19.775390625s-19.775390625 8.701171874999998-19.775390625 19.775390625V821.8743489583334c0 11.07421875 8.701171874999998 19.775390625 19.775390625 19.775390625H579.8356119791666c11.07421875 0 19.775390625-9.0966796875 19.775390625-19.775390625 0-11.07421875-9.0966796875-19.775390625-18.5888671875-19.775390625z"  ></path></symbol><symbol id="icon-text" viewBox="0 0 1024 1024"><path d="M853.333333 1024 170.666667 1024c-93.866667 0-170.666667-76.8-170.666667-170.666667L0 170.666667c0-93.866667 76.8-170.666667 170.666667-170.666667l682.666667 0c93.866667 0 170.666667 76.8 170.666667 170.666667l0 682.666667C1024 947.2 947.2 1024 853.333333 1024zM170.666667 85.333333C123.733333 85.333333 85.333333 123.733333 85.333333 170.666667l0 682.666667c0 46.933333 38.4 85.333333 85.333333 85.333333l682.666667 0c46.933333 0 85.333333-38.4 85.333333-85.333333L938.666667 170.666667c0-46.933333-38.4-85.333333-85.333333-85.333333L170.666667 85.333333z"  ></path><path d="M725.333333 341.333333 298.666667 341.333333C273.066667 341.333333 256 324.266667 256 298.666667s17.066667-42.666667 42.666667-42.666667l426.666667 0c25.6 0 42.666667 17.066667 42.666667 42.666667S750.933333 341.333333 725.333333 341.333333z"  ></path><path d="M298.666667 384C273.066667 384 256 366.933333 256 341.333333L256 298.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 42.666667C341.333333 366.933333 324.266667 384 298.666667 384z"  ></path><path d="M725.333333 384c-25.6 0-42.666667-17.066667-42.666667-42.666667L682.666667 298.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 42.666667C768 366.933333 750.933333 384 725.333333 384z"  ></path><path d="M512 768c-25.6 0-42.666667-17.066667-42.666667-42.666667L469.333333 298.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 426.666667C554.666667 750.933333 537.6 768 512 768z"  ></path><path d="M554.666667 768l-85.333333 0c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667l85.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S580.266667 768 554.666667 768z"  ></path></symbol><symbol id="icon-picture" viewBox="0 0 1024 1024"><path d="M899.87602987 34.13333333H124.12397013A105.17617813 105.17617813 0 0 0 18.9629632 139.29434027v745.41131946a105.17617813 105.17617813 0 0 0 105.16100693 105.17617707h775.75205974a105.17617813 105.17617813 0 0 0 105.16100693-105.17617707h0.01517013V139.29434027A105.17617813 105.17617813 0 0 0 899.87602987 34.13333333zM79.6444448 884.70565973v-145.49902293l214.7972736-307.2455104c6.62945173-9.4814816 15.86820693-15.20071147 26.0323552-16.0957632 10.27034027-1.01641493 20.28278507 3.12509653 28.45961493 11.30192533l188.719408 188.70423787-233.19893333 313.3288288H124.12397013A44.49469653 44.49469653 0 0 1 79.6444448 884.70565973z m864.7262816 0a44.49469653 44.49469653 0 0 1-44.49469653 44.49469547H342.2587264l269.01617707-361.40373333c7.03905173-9.4208 16.86945173-15.14002987 27.7314368-16.09576214 10.95300693-0.92539307 21.5267552 2.95822187 30.05250453 11.02885867l165.9335104 156.5278816c6.06814827 5.74957013 15.6861632 5.4461632 21.45090453-0.62198507a15.20071147 15.20071147 0 0 0-0.62198613-21.45090346L689.90293333 540.65682987c-14.9276448-14.07810347-34.01197013-20.93511147-53.56657813-19.17534827-19.58494827 1.71425173-37.12189653 11.72669653-49.39472533 28.2017184l-30.9627264 41.5971552-185.57914027-185.56397013c-14.65457813-14.65457813-33.31413333-21.72397013-52.58050347-20.0704-19.26637013 1.68391147-36.40888853 11.96942187-48.24177813 28.92989653L79.6444448 686.2620448V139.29434027A44.4795264 44.4795264 0 0 1 124.12397013 94.81481493h775.75205974a44.4795264 44.4795264 0 0 1 44.47952533 44.47952534h0.0151712v745.41131946z" fill="" ></path><path d="M892.41220693 731.6669632a15.17037013 15.17037013 0 0 0-20.8289184 22.04254827l18.12859307 17.12734826a15.1552 15.1552 0 0 0 21.43573333-0.62198613 15.14002987 15.14002987 0 0 0-0.5916448-21.42056213l-18.1437632-17.12734827zM645.0593184 153.55448853c-72.30198507 0-131.10234027 58.8003552-131.10234027 131.0871712 0 72.28681493 58.8003552 131.10234027 131.10234027 131.10234027 72.2716448 0 131.10234027-58.8155264 131.10234133-131.10234027s-58.8155264-131.08717013-131.10234133-131.0871712z m0 231.86394134c-55.55389653 0-100.7616-45.19253333-100.7616-100.7616s45.19253333-100.74642987 100.7616-100.74642987 100.7616 45.1773632 100.7616 100.74642987-45.19253333 100.7616-100.7616 100.7616z" fill="" ></path></symbol><symbol id="icon-shuru" viewBox="0 0 1024 1024"><path d="M970.666667 204.8l-151.466667-151.466667L701.866667 170.666667H64c-12.8 0-21.333333 8.533333-21.333333 21.333333v768c0 12.8 8.533333 21.333333 21.333333 21.333333h576c6.4 0 10.666667-2.133333 14.933333-6.4l192-192c4.266667-4.266667 6.4-8.533333 6.4-14.933333V322.133333l117.333334-117.333333z m-529.066667 469.333333l-98.133333-85.333333L742.4 189.866667l91.733333 91.733333-392.533333 392.533333z m-123.733333-49.066666l89.6 76.8-121.6 34.133333 32-110.933333zM910.933333 204.8l-46.933333 46.933333-91.733333-91.733333 46.933333-46.933333 91.733333 91.733333zM661.333333 908.8V789.333333h119.466667L661.333333 908.8z m149.333334-162.133333h-170.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333v170.666667H85.333333V213.333333h573.866667l-128 128H170.666667v42.666667h317.866666l-128 128H170.666667v42.666667h147.2l-32 32-61.866667 213.333333 213.333333-61.866667 183.466667-183.466666H725.333333v-42.666667h-61.866666l147.2-147.2V746.666667z"  ></path></symbol><symbol id="icon-tree" viewBox="0 0 1024 1024"><path d="M448.84 880.29H175.37c-20.14 0-36.46-16.33-36.46-36.46 0-20.14 16.33-36.46 36.46-36.46h273.48c20.14 0 36.46 16.33 36.46 36.46 0 20.14-16.33 36.46-36.47 36.46zM448.84 588.58H175.37c-20.14 0-36.46-16.33-36.46-36.46 0-20.14 16.33-36.46 36.46-36.46h273.48c20.14 0 36.46 16.33 36.46 36.46 0 20.14-16.33 36.46-36.47 36.46z"  ></path><path d="M138.9 843.83V296.88c0-20.14 16.33-36.46 36.46-36.46 20.14 0 36.46 16.33 36.46 36.46v546.95c0 20.14-16.33 36.46-36.46 36.46-20.13 0-36.46-16.32-36.46-36.46z"  ></path><path d="M211.83 348.16H138.9c-40.11 0-72.93-32.82-72.93-72.93V202.3c0-40.11 32.82-72.93 72.93-72.93h72.93c40.11 0 72.93 32.82 72.93 72.93v72.93c0 40.11-32.82 72.93-72.93 72.93zM922.87 625.05H605.12c-20.05 0-36.46-16.41-36.46-36.46v-72.93c0-20.05 16.41-36.46 36.46-36.46h317.75c20.05 0 36.46 16.41 36.46 36.46v72.93c0 20.05-16.41 36.46-36.46 36.46zM921.67 311.69h-508.1c-20.71 0-37.66-16.95-37.66-37.66V203.5c0-20.71 16.95-37.66 37.66-37.66h508.1c20.71 0 37.66 16.95 37.66 37.66v70.54c0 20.71-16.94 37.65-37.66 37.65zM922.87 916.76H605.12c-20.05 0-36.46-16.41-36.46-36.46v-72.93c0-20.05 16.41-36.46 36.46-36.46h317.75c20.05 0 36.46 16.41 36.46 36.46v72.93c0 20.05-16.41 36.46-36.46 36.46z"  ></path></symbol><symbol id="icon-chaxunsousuo" viewBox="0 0 1024 1024"><path d="M724.173722 608.066299m33.939704 33.939705l203.638226 203.638225q33.939704 33.939704 0 67.879409l0 0q-33.939704 33.939704-67.879409 0l-203.638225-203.638226q-33.939704-33.939704 0-67.879408l0 0q33.939704-33.939704 67.879408 0Z"  ></path><path d="M48.436376 928.00402m47.99799 0l287.98794 0q47.99799 0 47.99799 47.99799l0 0q0 47.99799-47.99799 47.99799l-287.98794 0q-47.99799 0-47.99799-47.99799l0 0q0-47.99799 47.99799-47.99799Z"  ></path><path d="M464.418957 832.00804a415.982581 415.982581 0 1 1 293.747699-121.594909A415.342608 415.342608 0 0 1 464.418957 832.00804z m0-735.969182A319.986601 319.986601 0 1 0 688.409577 192.034839a319.986601 319.986601 0 0 0-223.99062-95.995981z"  ></path></symbol><symbol id="icon-jidu" viewBox="0 0 1024 1024"><path d="M153.850705 812.896572v-537.121614c0.409313-0.511642 0.920955-0.920955 0.920955-1.432598 1.330269-12.688718 6.856001-23.637854 15.144599-32.949735 13.609673-15.451584 31.005496-22.716898 51.573498-22.716898H284.626362v-5.62806-44.205856c0-1.637254 0.511642-3.376836 0.716298-5.01409 0.920955-6.037374 6.242031-7.469971 10.539822-9.925852h9.516539c10.130509 3.581493 12.688718 11.563106 12.381732 21.386629-0.409313 12.177076-0.102328 24.45648-0.102328 36.633557v6.446687h389.359448c0-14.4283 0.306985-28.549615-0.102328-42.67093-0.306985-10.02818 1.841911-18.112122 12.381733-21.898272h9.516538c8.902568 3.683821 12.074748 10.437494 11.460778 19.954032-0.61397 10.64215-0.204657 21.181973-0.204657 31.824124v13.098031h5.730389c19.851704 0 39.703408-0.102328 59.555111 0.102328 4.093135 0 8.18627 0.204657 12.177076 1.023284 20.874988 4.809433 37.145198 16.065554 46.559409 35.81493 2.353553 4.911762 3.990806 10.232837 5.935045 15.349255v546.740482c-0.61397 1.739582-1.330269 3.581493-1.944239 5.423403-7.879285 23.84251-23.740182 39.191766-48.401319 44.922155-2.353553 0.511642-4.604777 1.330269-6.856001 1.944239H211.973219c-0.306985-0.306985-0.511642-0.818627-0.920956-0.920955-9.209553-0.61397-17.498151-3.888478-25.377435-8.697912-12.074748-7.265314-21.181973-16.986509-26.298392-30.186869-2.148896-5.525732-3.683821-11.460777-5.525731-17.293495z m33.25672-397.955031V803.482362c0 18.419107 14.121315 33.359049 33.461377 33.359049 194.526232 0.102328 389.052463 0.102328 583.578695 0 19.237734 0 33.563705-14.325972 33.563705-33.666034 0.102328-127.603478 0.102328-255.206955 0.102329-382.810432v-5.321076c-217.038473-0.102328-433.565304-0.102328-650.706106-0.102328z m0-33.666034h650.501449c0.102328-0.920955 0.204657-1.534926 0.204657-2.148896 0-31.721795 0.102328-63.443589-0.102329-95.165384 0-2.762866-0.61397-5.62806-1.534925-8.186269-5.116419-15.963226-16.679524-23.126212-31.926452-23.637854-20.056361-0.511642-40.112721-0.204657-60.169082-0.102328-1.22794 0-2.455881 0.204657-3.888478 0.409313 0 17.088838 0.204657 33.870691-0.204656 50.754872-0.102328 3.172179-1.534926 6.856001-3.683822 9.209553-5.62806 6.037374-12.688718 6.549016-20.261017 3.581493-5.01409-1.944239-9.107225-8.18627-9.107225-14.632957-0.102328-13.302688 0-26.707705 0-40.010393v-8.800239H317.576097c0 15.758569 0.204657 31.107825-0.102329 46.45708-0.204657 10.64215-3.581493 16.679524-14.939942 18.726091-6.856001 1.22794-18.419107-3.78615-18.316778-14.4283 0.204657-15.246927 0.102328-30.391526 0.102328-45.740781v-5.321076H224.150295c-2.967523 0-5.832717 0.61397-8.902568 0.818627-17.805136 1.22794-28.754272 19.135405-28.549616 33.461377 0.409313 29.879884 0.102328 59.65744 0.102329 89.537324 0.306985 1.330269 0.306985 3.172179 0.306985 5.218747z m-33.25672 431.621065c1.841911 5.730389 3.479165 11.767763 5.62806 17.395823 5.116419 13.20036 14.223643 23.023883 26.298391 30.18687 7.879285 4.707105 16.167882 7.981613 25.377436 8.697911 0.306985 0 0.61397 0.511642 0.920955 0.920955h-58.122514c-0.102328-19.135405-0.102328-38.066154-0.102328-57.201559z m659.097032 57.201559c2.353553-0.61397 4.604777-1.432597 6.856-1.944239 24.661137-5.832717 40.419706-21.181973 48.401319-44.922154 0.61397-1.841911 1.330269-3.581493 1.944239-5.423404v52.392126c-19.135405-0.102328-38.168482-0.102328-57.201558-0.102329z" fill="" ></path><path d="M227.424803 623.179774l10.02818-2.353552c25.275107-6.242031 44.410513-13.81433 56.792245-22.921555 12.893375-9.004897 23.433197-17.191166 31.517138-24.763466h-30.08454c-13.81433 0-33.359049 0.511642-58.224843 1.944239 0.511642-3.376836 0.511642-6.242031 0.920955-8.083941s0.511642-3.78615 0.511642-5.730389-0.511642-6.242031-1.432597-13.302688c32.949735 1.432597 52.494454 1.944239 58.224843 1.944239h59.145797v-22.512241c-25.275107 1.432597-39.601079 1.944239-42.977915 1.944239l-26.707705 0.409313-13.405016 0.511642c-0.920955-3.78615-2.353553-7.674628-3.376836-10.949136-0.920955-3.376836-4.297792-8.595583-9.107225-15.758569l10.02818 0.920956c6.242031 0.920955 18.112122 0.920955 35.81493 0.920955 20.568002 0 45.331468-0.920955 74.495053-3.376836 29.061257-2.353553 50.140901-5.218747 63.44359-8.595583l9.516538-2.353553c5.218747 9.004897 10.949136 17.60048 17.191166 26.196063l-30.493854 2.353553-32.438094 2.865194-29.572898 2.353552v23.842511h54.438692c5.218747 0 25.275107-0.511642 60.169082-1.944239-0.920955 3.78615-1.432597 7.162986-1.432597 8.595583-0.511642 1.944239-0.511642 3.376836-0.511642 3.786149 0 0.920955 0.511642 5.218747 1.944239 13.302689-24.865794-1.432597-44.819826-1.944239-60.169082-1.944239h-26.298391c6.242031 6.651344 15.246927 14.325972 26.707705 23.330868 11.972419 9.004897 31.517138 15.758569 59.145798 20.05636l9.107225 1.432598c-5.218747 5.218747-8.595583 9.516538-10.949136 12.893374-2.353553 3.376836-4.809433 8.595583-6.651344 15.246927l-9.107225-3.786149c-30.493854-13.302688-50.550215-24.354152-61.090037-32.847407-10.02818-8.595583-17.191166-15.246927-20.977316-19.544719L382.452283 575.801739l-3.786149-4.809434h-1.944239v29.982213c0 3.78615 0.511642 10.949136 1.432597 21.488958-6.651344-0.920955-10.539822-0.920955-12.381733-0.920956-1.432597 0-5.730389 0.511642-12.893375 0.920956 0.920955-10.02818 1.944239-17.191166 1.944239-21.488958V570.787649c-4.297792 4.297792-9.107225 9.004897-14.837613 14.735285s-11.460777 11.460777-18.112122 17.60048c-6.651344 5.730389-18.623763 14.325972-36.224243 24.763465 10.949136 0.920955 20.977316 1.432597 29.572899 1.432597h95.47237c10.539822 0 22.921555-0.511642 36.735884-1.432597-18.112122 14.735285-30.493854 24.763466-37.65684 29.061257L378.666134 676.595183v0.511642h47.68502c15.246927 0 35.81493-0.511642 62.010992-1.944239-0.511642 4.297792-0.920955 7.162986-0.920955 9.004897 0 1.944239-0.511642 3.78615-0.511642 5.730388s0.511642 6.242031 1.432597 12.893375c-24.865794-1.432597-45.331468-2.353553-62.010992-2.353552H378.666134v33.359048c0 8.083941-1.432597 14.735285-4.297792 19.033077-2.865194 4.809433-17.191166 7.162986-43.387229 8.083941 0-3.78615-0.511642-7.162986-0.920955-9.004896-0.511642-2.353553-0.920955-4.297792-1.944239-6.242031-0.920955-2.353553-4.297792-8.083941-10.539822-17.191166 11.972419 2.353553 20.977316 3.376836 27.219346 2.865194 3.376836 0 5.730389-0.511642 7.162986-1.944239 1.432597-1.432597 1.944239-4.809433 1.944239-9.516538v-19.544719h-51.573498c-11.972419 0-31.926451 0.920955-60.169082 2.353553 0-3.376836 0.511642-7.162986 0.511642-10.437494s0.511642-6.242031 0.511642-7.674628l-0.920956-9.516538c25.275107 1.432597 45.331468 1.944239 60.169082 1.944239h50.550215v-6.242031l-0.511642-3.376836 3.78615-0.920955c7.674628-2.353553 18.112122-8.083941 31.926451-17.60048h-73.47177c-9.516538 0-20.056361 0.511642-31.005496 1.432597 0.511642-2.865194 0.920955-5.218747 0.920956-7.674628 0.511642-1.944239 0.511642-3.376836 0.511641-4.809433l-0.511641-2.865194-0.511642-7.674628c-9.516538 5.730389-18.623763 10.437494-26.707705 14.735285l-7.674628 3.78615c-3.376836-6.242031-5.730389-10.02818-7.674627-11.870091-1.330269-0.204657-6.549016-4.502448-14.632957-10.744479zM522.744479 740.448086l7.162986-10.949135c2.353553-3.78615 5.218747-9.516538 8.595583-16.167883s6.651344-16.167882 10.539822-28.549615c3.78615-11.870091 6.242031-28.140302 6.651344-48.094334 0.920955-20.056361 0.920955-34.791646 1.432597-44.819826V568.536425L555.182572 525.660837c18.112122 0.920955 28.651944 1.432597 32.438094 1.432598h71.629859c-2.353553-5.730389-5.218747-11.870091-8.595583-18.623764l-4.297792-7.674628c8.083941-1.432597 17.191166-4.297792 26.707705-8.595583l11.972419 35.303288h36.224243c10.02818 0 27.62866-0.511642 52.494454-1.944239-0.511642 3.376836-0.920955 5.730389-0.920956 7.674628v4.297791c0 0.920955 0.511642 4.809433 1.432598 10.949136-11.972419 0-22.409913-0.511642-32.438094-0.920955-10.02818-0.511642-16.679524-0.511642-20.568002-0.511642h-140.803837V578.87159h43.387229v-8.083941c0-3.78615 0-6.651344-0.511642-8.595583l-0.920956-9.004897c6.242031 0.920955 10.02818 1.432597 10.949136 1.432597s5.730389-0.511642 13.405016-1.432597c-0.920955 4.297792-0.920955 7.162986-1.432597 9.516538v15.758569h58.736485v-6.24203c0-5.218747 0-8.595583-0.511642-10.02818l-0.920955-9.004897c6.651344 0.920955 10.949136 1.432597 12.381732 1.432597 1.432597 0 5.730389-0.511642 12.893375-1.432597-0.920955 4.297792-0.920955 7.162986-1.432597 9.516538v15.758569h20.568002c9.516538 0 20.568002-0.511642 31.926452-1.432597-0.511642 3.376836-0.511642 5.730389-0.511642 7.162986 0 1.432597 0 3.376836-0.511642 4.809434-0.511642 1.432597 0 2.353553 0 2.865194l0.920955 7.674628c-11.460777-0.920955-22.0006-1.432597-31.926451-1.432598H726.582592V616.733087c0 6.651344 0 10.437494 0.511642 12.381733l0.920955 12.893374c-9.107225-0.920955-18.112122-1.432597-26.298391-1.432597h-53.006095c-8.083941 0-16.679524 0.511642-25.78675 1.432597 0.511642-5.218747 0.511642-9.516538 0.920956-12.893374 0-3.376836 0.511642-7.162986 0.511641-11.460778v-19.544719h-43.89887c0 6.242031-0.511642 12.381733-0.511642 18.623764s-0.920955 15.246927-1.944239 27.62866c-0.920955 11.870091-2.353553 22.409913-3.376836 31.005496-1.432597 8.595583-4.297792 20.056361-8.595584 34.280004-4.297792 14.325972-9.107225 26.707705-13.81433 36.224243l-5.218746 11.460777c-2.865194-2.865194-5.218747-5.218747-7.162986-6.651344-2.762866-2.148896-7.981613-5.525732-17.088838-10.232837z m53.517737-9.107225c23.433197 0 48.196662-5.218747 74.495054-15.758569-8.083941-8.083941-14.325972-14.735285-18.112122-19.544718-3.78615-5.218747-8.083941-12.893375-13.405016-22.409913l-23.433197 1.944239c0.511642-3.376836 0.511642-5.730389 0.511642-7.162986 0-1.432597 0-2.865194 0.511642-4.297792 0-1.432597 0-4.809433-0.920955-10.949135 12.381733 0.920955 24.354152 1.432597 35.303287 1.432597h79.202159c10.949136 0 22.409913-0.511642 34.382332-1.432597-4.809433 9.004897-10.02818 17.60048-15.758569 25.684421-5.730389 8.083941-17.702808 20.056361-34.791646 36.735884 15.758569 6.242031 28.140302 10.437494 37.65684 11.870091 9.107225 1.432597 16.679524 2.353553 22.921555 2.865195l16.679525 0.920955 8.083941 0.920955c-3.376836 3.376836-9.107225 10.437494-16.679524 20.465674l-3.78615 7.162986-9.107225-2.865194c-0.511642 0-8.083941-1.944239-22.921555-6.242031-14.837614-4.297792-32.438093-11.460777-53.415409-21.898271-27.62866 12.381733-53.927051 21.488958-79.202159 26.707705l-9.107225 1.944239c-1.944239-2.353553-3.376836-4.809433-4.809433-7.674628-1.432597-2.865194-2.353553-4.297792-2.865194-5.218747l-4.297792-5.730389-6.651344-8.083941h9.516538v0.61397z m126.887179-57.610872h-58.736484c2.865194 6.242031 6.242031 11.460777 10.02818 16.167882 3.78615 4.809433 9.516538 9.516538 16.679525 14.735286 5.218747-2.865194 10.02818-6.242031 14.837613-10.02818 4.809433-3.274508 10.539822-10.437494 17.191166-20.874988z m-56.792245-50.550215h58.736484v-25.275107h-58.736484v25.275107z" fill="" ></path></symbol><symbol id="icon-shuzishunxu" viewBox="0 0 1024 1024"><path d="M862.138182 252.16h-523.636364a34.909091 34.909091 0 0 1 0-69.818182h523.636364a34.909091 34.909091 0 0 1 0 69.818182z m0 290.909091h-523.636364a34.909091 34.909091 0 0 1 0-69.818182h523.636364a34.909091 34.909091 0 0 1 0 69.818182z m0 290.909091h-523.636364a34.909091 34.909091 0 0 1 0-69.818182h523.636364a34.909091 34.909091 0 0 1 0 69.818182zM149.178182 294.865455V139.636364h43.962182v155.229091h-43.985455z m76.776727 247.854545v44.916364H125.626182l50.059636-93.323637c2.304-4.352 3.490909-8.075636 3.490909-11.170909 0-5.748364-3.584-8.610909-10.682182-8.610909a10.100364 10.100364 0 0 0-10.496 10.24 12.334545 12.334545 0 0 0 3.956364 8.843636l-19.781818 35.374546C124.951273 517.818182 116.363636 502.458182 116.363636 482.909091c0-14.894545 5.236364-27.671273 15.685819-38.283636a51.688727 51.688727 0 0 1 38.260363-15.941819c15.383273 0 28.229818 5.376 38.562909 16.174546 10.309818 10.775273 15.453091 23.458909 15.453091 38.050909 0 8.541091-1.908364 16.523636-5.818182 23.970909L200.145455 542.72h25.809454z m-95.976727 177.431273h82.129454l-25.134545 59.810909c8.843636 6.050909 15.36 12.730182 19.549091 20.014545 4.189091 7.307636 6.283636 15.988364 6.283636 26.088728 0 15.499636-5.376 28.043636-16.174545 37.585454-10.775273 9.541818-24.692364 14.312727-41.774546 14.312727a92.858182 92.858182 0 0 1-25.367272-3.723636v-43.752727c6.842182 3.072 13.032727 4.608 18.618181 4.608 5.445818 0 9.658182-1.536 12.683637-4.724364 3.025455-3.165091 4.561455-7.726545 4.561454-13.637818a18.152727 18.152727 0 0 0-8.029091-15.36c-5.376-3.863273-12.520727-5.818182-21.527272-5.818182l11.380363-30.487273h-17.221818v-44.916363z" fill="#797979" ></path></symbol><symbol id="icon-Group-" viewBox="0 0 1024 1024"><path d="M160 352a32 32 0 0 1-32-32V192a32 32 0 0 1 32-32h128a32 32 0 0 1 32 32v128a32 32 0 0 1-32 32z m32-64h64V224H192zM416 288a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64zM160 608a32 32 0 0 1-32-32v-128a32 32 0 0 1 32-32h128a32 32 0 0 1 32 32v128a32 32 0 0 1-32 32z m32-64h64v-64H192zM416 544a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64zM160 864a32 32 0 0 1-32-32v-128a32 32 0 0 1 32-32h128a32 32 0 0 1 32 32v128a32 32 0 0 1-32 32z m32-64h64v-64H192zM416 800a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64z"  ></path></symbol><symbol id="icon-riqi" viewBox="0 0 1024 1024"><path d="M819.6 202.6H700.7v-63.8c0-17.6-14.3-31.9-31.9-31.9-17.6 0-31.9 14.3-31.9 31.9v63.8h-255v-63.8c0-17.6-14.3-31.9-31.9-31.9s-31.9 14.3-31.9 31.9v63.8H199.3C140.7 202.6 93 250.3 93 308.9v504.8C93 872.3 140.7 920 199.3 920h620.3c58.6 0 106.3-47.7 106.3-106.3V308.9c0-58.6-47.7-106.3-106.3-106.3z m42.5 611.1c0 23.4-19.1 42.5-42.5 42.5H199.3c-23.4 0-42.5-19.1-42.5-42.5V308.9c0-23.4 19.1-42.5 42.5-42.5h118.8v47.8c0 17.6 14.3 31.9 31.9 31.9s31.9-14.3 31.9-31.9v-47.8H637v47.8c0 17.6 14.3 31.9 31.9 31.9 17.6 0 31.9-14.3 31.9-31.9v-47.8h118.8c23.4 0 42.5 19.1 42.5 42.5v504.8z"  ></path><path d="M340.1 409.9H238c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4h102.1c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.5-23.4-23.4-23.4zM560.5 409.9H458.4c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4h102.1c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.5-23.4-23.4-23.4zM781 409.9H678.8c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4H781c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.6-23.4-23.4-23.4zM340.1 632.9H238c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4h102.1c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.5-23.4-23.4-23.4zM560.5 632.9H458.4c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4h102.1c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.5-23.4-23.4-23.4zM781 632.9H678.8c-12.9 0-23.4 10.5-23.4 23.4v87.6c0 12.9 10.5 23.4 23.4 23.4H781c12.9 0 23.4-10.5 23.4-23.4v-87.6c0-12.9-10.6-23.4-23.4-23.4z"  ></path></symbol><symbol id="icon-zuoce-qujian" viewBox="0 0 1024 1024"><path d="M915.456 198.656c-49.3568 0-90.9312 32.768-104.0384 77.824h-195.1744c-13.312-45.056-54.8864-77.824-104.0384-77.824-49.3568 0-90.9312 32.768-104.0384 77.824H30.72c-16.9984 0-30.72 13.7216-30.72 30.72s13.7216 30.72 30.72 30.72h377.2416c13.312 45.056 54.8864 77.824 104.0384 77.824 49.3568 0 90.9312-32.768 104.0384-77.824h195.1744c13.312 45.056 54.8864 77.824 104.0384 77.824 60.0064 0 108.544-48.5376 108.544-108.544 0.2048-60.0064-48.3328-108.544-108.3392-108.544z m-403.456 155.648c-26.0096 0-47.104-21.0944-47.104-47.104s21.0944-47.104 47.104-47.104 47.104 21.0944 47.104 47.104-21.0944 47.104-47.104 47.104z m403.456 0c-26.0096 0-47.104-21.0944-47.104-47.104s21.0944-47.104 47.104-47.104 47.104 21.0944 47.104 47.104-21.0944 47.104-47.104 47.104zM993.28 686.08H616.0384c-13.312-45.056-54.8864-77.824-104.0384-77.824-49.3568 0-90.9312 32.768-104.0384 77.824h-193.1264c-13.312-45.056-54.8864-77.824-104.0384-77.824-55.7056 0-101.376 41.7792-107.7248 95.6416-1.8432 3.8912-2.8672 8.192-2.8672 12.9024s1.024 9.0112 2.8672 12.9024C9.216 783.5648 54.8864 825.344 110.592 825.344c49.3568 0 90.9312-32.768 104.0384-77.824h193.1264c13.312 45.056 54.8864 77.824 104.0384 77.824 49.3568 0 90.9312-32.768 104.0384-77.824H993.28c16.9984 0 30.72-13.7216 30.72-30.72s-13.7216-30.72-30.72-30.72zM110.592 763.904c-26.0096 0-47.104-21.0944-47.104-47.104s21.0944-47.104 47.104-47.104 47.104 21.0944 47.104 47.104-21.0944 47.104-47.104 47.104z m401.408 0c-26.0096 0-47.104-21.0944-47.104-47.104s21.0944-47.104 47.104-47.104 47.104 21.0944 47.104 47.104-21.0944 47.104-47.104 47.104z" fill="#646464" ></path></symbol><symbol id="icon-liebiao" viewBox="0 0 1024 1024"><path d="M92.5 573.1h179.4c16.5 0 29.9-13.4 29.9-29.9s-13.4-29.9-29.9-29.9H92.5c-16.5 0-29.9 13.4-29.9 29.9s13.4 29.9 29.9 29.9zM950.9 823L848 720c31.9-40.7 51.7-91.2 51.7-146.9 0-132.1-107.1-239.2-239.2-239.2S421.3 441 421.3 573.1s107.1 239.2 239.2 239.2c55.7 0 106.3-19.9 146.9-51.7l103 103c11.2 11.2 29.3 11.2 40.5 0 11.2-11.3 11.2-29.4 0-40.6zM788.7 698.3c-0.5 0.5-1.3 0.7-1.7 1.2-0.5 0.5-0.7 1.3-1.2 1.7-32.4 31.6-76.4 51.2-125.3 51.2-99.1 0-179.4-80.3-179.4-179.4 0-99.1 80.3-179.4 179.4-179.4S839.9 474 839.9 573.1c0.1 48.8-19.6 92.9-51.2 125.2z m-696.2-484h538.2c16.5 0 29.9-13.4 29.9-29.9s-13.4-29.9-29.9-29.9H92.5c-16.5 0-29.9 13.4-29.9 29.9s13.4 29.9 29.9 29.9z m239.2 119.6H92.5c-16.5 0-29.9 13.4-29.9 29.9s13.4 29.9 29.9 29.9h239.2c16.5 0 29.9-13.4 29.9-29.9s-13.4-29.9-29.9-29.9z m0 358.8H92.5c-16.5 0-29.9 13.4-29.9 29.9s13.4 29.9 29.9 29.9h239.2c16.5 0 29.9-13.4 29.9-29.9s-13.4-29.9-29.9-29.9z m0 0"  ></path></symbol><symbol id="icon-xialakuang" viewBox="0 0 1024 1024"><path d="M970.105263 404.210526H53.894737v-323.368421h916.210526v323.368421z m-862.315789-53.894737h808.421052v-215.578947H107.789474v215.578947z" fill="#444A5C" ></path><path d="M970.105263 943.157895H53.894737v-592.842106h916.210526v592.842106z m-862.315789-53.894737h808.421052v-485.052632H107.789474v485.052632zM754.526316 307.2L662.905263 215.578947l37.726316-37.726315 53.894737 53.894736 53.894737-53.894736 37.726315 37.726315z" fill="#444A5C" ></path><path d="M264.084211 781.473684h485.052631v-53.894737h-485.052631v53.894737z m0-107.789473h485.052631v-53.894737h-485.052631v53.894737z m0-161.684211v53.894737h485.052631v-53.894737h-485.052631z" fill="#444A5C" ></path></symbol><symbol id="icon-xialashu" viewBox="0 0 1024 1024"><path d="M970.105263 323.368421H53.894737V53.894737h916.210526v269.473684zM107.789474 269.473684h808.421052V107.789474H107.789474v161.68421zM215.578947 538.947368H53.894737V377.263158h161.68421v161.68421zM107.789474 485.052632h53.894737V431.157895H107.789474v53.894737z" fill="#444A5C" ></path><path d="M269.473684 431.157895h431.157895v53.894737H269.473684V431.157895zM538.947368 646.736842h431.157895v53.894737h-431.157895v-53.894737zM538.947368 862.315789h431.157895v53.894737h-431.157895v-53.894737zM107.789474 485.052632h53.894737v431.157894H107.789474V485.052632zM161.684211 700.631579v-53.894737h161.68421v53.894737H161.684211M161.684211 916.210526v-53.894737h161.68421v53.894737H161.684211" fill="#444A5C" ></path><path d="M485.052632 754.526316H323.368421v-161.684211h161.684211v161.684211z m-107.789474-53.894737h53.894737v-53.894737H377.263158v53.894737zM485.052632 970.105263H323.368421v-161.68421h161.684211v161.68421z m-107.789474-53.894737h53.894737v-53.894737H377.263158v53.894737z" fill="#444A5C" ></path><path d="M754.526316 161.684211h107.789473v53.894736h-107.789473V161.684211z" fill="#444A5C" ></path></symbol><symbol id="icon-zhongzhi" viewBox="0 0 1024 1024"><path d="M624.593455 23.272727a93.090909 93.090909 0 0 1 93.090909 93.090909v168.587637l143.406545 0.023272a116.363636 116.363636 0 0 1 116.247273 111.313455l0.116363 5.050182V861.090909a116.363636 116.363636 0 0 1-116.363636 116.363636H162.909091a116.363636 116.363636 0 0 1-116.363636-116.363636V401.338182a116.363636 116.363636 0 0 1 116.363636-116.363637l146.664727-0.023272V116.363636a93.090909 93.090909 0 0 1 88.459637-92.974545l4.654545-0.116364zM139.636364 581.818182v279.272727a23.272727 23.272727 0 0 0 23.272727 23.272727h302.545454v-162.909091a46.545455 46.545455 0 1 1 93.09091 0v162.909091h93.090909v-162.909091a46.545455 46.545455 0 1 1 93.090909 0v162.909091h116.363636a23.272727 23.272727 0 0 0 23.272727-23.272727V581.818182H139.636364z m0-93.090909h744.727272v-87.389091a23.272727 23.272727 0 0 0-23.272727-23.272727h-166.679273a69.818182 69.818182 0 0 1-69.818181-69.818182V116.363636h-221.905455v191.883637a69.818182 69.818182 0 0 1-69.818182 69.818182H162.909091a23.272727 23.272727 0 0 0-23.272727 23.272727V488.727273z"  ></path></symbol><symbol id="icon-ri" viewBox="0 0 1024 1024"><path d="M408.222897 789.115586v-35.345655h217.15862v34.886621h33.474207V388.378483h-283.68331v400.737103h33.050483z m217.15862-237.779862h-217.15862v-130.824827h217.15862v130.824827z m0 170.301793h-217.15862v-138.169379h217.15862v138.169379z"  ></path><path d="M917.645241 144.772414a70.62069 70.62069 0 0 1 70.62069 70.620689v681.489656a70.62069 70.62069 0 0 1-70.62069 70.620689H94.384552a70.62069 70.62069 0 0 1-70.62069-70.620689V215.393103a70.62069 70.62069 0 0 1 70.62069-70.620689h823.260689z m0 45.903448H94.384552a24.717241 24.717241 0 0 0-24.50538 21.362759l-0.211862 3.354482v681.489656a24.717241 24.717241 0 0 0 21.362759 24.505379l3.354483 0.211862h823.260689a24.717241 24.717241 0 0 0 24.50538-21.362759l0.211862-3.354482V215.393103a24.717241 24.717241 0 0 0-21.362759-24.505379l-3.354483-0.211862z"  ></path><path d="M312.214069 31.249655a22.951724 22.951724 0 0 1 22.704552 19.561931l0.247172 3.389793v180.824276a22.951724 22.951724 0 0 1-45.656276 3.389793l-0.247172-3.389793v-180.788965a22.951724 22.951724 0 0 1 22.951724-22.951724zM691.023448 31.249655a22.951724 22.951724 0 0 1 22.704552 19.561931l0.247172 3.389793v180.824276a22.951724 22.951724 0 0 1-45.656275 3.389793l-0.247173-3.389793v-180.788965a22.951724 22.951724 0 0 1 22.951724-22.951724z"  ></path></symbol><symbol id="icon-nian" viewBox="0 0 1024 1024"><path d="M715.702857 32.365714a23.771429 23.771429 0 0 1 23.515429 20.260572l0.256 3.510857V149.942857l210.944 0.036572a73.142857 73.142857 0 0 1 73.142857 73.142857v705.828571a73.142857 73.142857 0 0 1-73.142857 73.142857H97.755429a73.142857 73.142857 0 0 1-73.142858-73.142857V223.085714a73.142857 73.142857 0 0 1 73.142858-73.142857h201.837714V56.100571a23.771429 23.771429 0 0 1 47.286857-3.510857l0.256 3.510857V149.942857h344.795429V56.137143a23.771429 23.771429 0 0 1 23.771428-23.771429zM299.593143 197.485714l-201.874286 0.036572a25.6 25.6 0 0 0-25.344 22.125714l-0.219428 3.474286v705.828571a25.6 25.6 0 0 0 22.125714 25.380572l3.474286 0.219428h852.662857a25.6 25.6 0 0 0 25.380571-22.125714l0.219429-3.474286V223.085714a25.6 25.6 0 0 0-22.125715-25.380571l-3.474285-0.219429H739.474286v45.933715a23.771429 23.771429 0 0 1-47.286857 3.510857l-0.256-3.510857V197.485714H347.136v45.970286a23.771429 23.771429 0 0 1-47.286857 3.510857l-0.256-3.510857V197.485714z m112.274286 181.504l35.657142 6.656c-5.229714 18.066286-11.410286 34.706286-18.066285 50.870857h295.241143v33.28h-149.284572v76.068572h132.644572v32.804571h-132.644572v102.692572h164.498286v33.28h-164.498286v106.020571h-34.706286V714.605714H321.097143v-33.28h78.445714v-135.497143h141.202286v-76.068571h-127.890286a285.805714 285.805714 0 0 1-75.117714 84.626286l-22.820572-28.525715c48.018286-36.132571 80.347429-85.101714 96.987429-146.907428z m128.841142 199.68H433.737143v102.692572h106.971428v-102.692572z"  ></path></symbol><symbol id="icon-yue" viewBox="0 0 1024 1024"><path d="M371.959172 792.328828c29.837241-39.017931 47.315862-88.134621 52.788966-147.809104h197.843862v91.347862c0 13.312-5.508414 20.197517-16.066207 20.197517-17.44331 0-36.722759-0.918069-57.838345-1.836137l9.18069 32.591448h59.215448c25.705931 0 39.017931-13.312 39.017931-39.476966V388.378483h-263.026758v224.008827c-0.918069 63.346759-16.066207 115.67669-46.362483 156.989793l25.246896 22.951725z m250.632828-291.945931h-195.972414v-80.331035h195.972414v80.331035z m0 113.381517h-195.972414v-82.626207h195.972414v82.626207z"  ></path><path d="M917.645241 144.772414a70.62069 70.62069 0 0 1 70.62069 70.620689v681.489656a70.62069 70.62069 0 0 1-70.62069 70.620689H94.384552a70.62069 70.62069 0 0 1-70.62069-70.620689V215.393103a70.62069 70.62069 0 0 1 70.62069-70.620689h823.260689z m0 45.903448H94.384552a24.717241 24.717241 0 0 0-24.50538 21.362759l-0.211862 3.354482v681.489656a24.717241 24.717241 0 0 0 21.362759 24.505379l3.354483 0.211862h823.260689a24.717241 24.717241 0 0 0 24.50538-21.362759l0.211862-3.354482V215.393103a24.717241 24.717241 0 0 0-21.362759-24.505379l-3.354483-0.211862z"  ></path><path d="M312.214069 31.249655a22.951724 22.951724 0 0 1 22.704552 19.561931l0.247172 3.389793v180.824276a22.951724 22.951724 0 0 1-45.656276 3.389793l-0.247172-3.389793v-180.788965a22.951724 22.951724 0 0 1 22.951724-22.951724zM691.023448 31.249655a22.951724 22.951724 0 0 1 22.704552 19.561931l0.247172 3.389793v180.824276a22.951724 22.951724 0 0 1-45.656275 3.389793l-0.247173-3.389793v-180.788965a22.951724 22.951724 0 0 1 22.951724-22.951724z"  ></path></symbol></svg>', (function(a) { var l = (l = document.getElementsByTagName('script'))[l.length - 1]; var c = l.getAttribute('data-injectcss'); var l = l.getAttribute('data-disable-injectsvg'); if (!l) { var h; var i; var t; var v; var o; var z = function(l, c) { c.parentNode.insertBefore(l, c) }; if (c && !a.__iconfont__svg__cssinject__) { a.__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) } }h = function() { var l; var c = document.createElement('div'); c.innerHTML = a._iconfont_svg_string_2459092, (c = c.getElementsByTagName('svg')[0]) && (c.setAttribute('aria-hidden', 'true'), c.style.position = 'absolute', c.style.width = 0, c.style.height = 0, c.style.overflow = 'hidden', c = c, (l = document.body).firstChild ? z(c, l.firstChild) : l.appendChild(c)) }, document.addEventListener ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) ? setTimeout(h, 0) : (i = function() { document.removeEventListener('DOMContentLoaded', i, !1), h() }, document.addEventListener('DOMContentLoaded', i, !1)) : document.attachEvent && (t = h, v = a.document, o = !1, p(), v.onreadystatechange = function() { v.readyState == 'complete' && (v.onreadystatechange = null, m()) }) } function m() { o || (o = !0, t()) } function p() { try { v.documentElement.doScroll('left') } catch (l) { return void setTimeout(p, 50) }m() } }(window))
diff --git a/frontend/src/views/401.vue b/frontend/src/views/401.vue
index 75475d5eb6..28cb83b04d 100644
--- a/frontend/src/views/401.vue
+++ b/frontend/src/views/401.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="errPage-container">
-    <el-button icon="arrow-left" class="pan-back-btn" @click="back">
+    <el-button
+      icon="arrow-left"
+      class="pan-back-btn"
+      @click="back"
+    >
       返回
     </el-button>
     <el-row>
@@ -20,7 +24,12 @@
         </ul>
       </el-col>
       <el-col :span="12">
-        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
+        <img
+          :src="errGif"
+          width="313"
+          height="428"
+          alt="Girl has dropped her ice cream."
+        >
       </el-col>
     </el-row>
   </div>
@@ -28,7 +37,6 @@
 
 <script>
 import errGif from '@/assets/401_images/401.gif'
-
 export default {
   name: 'Page401',
   data() {
diff --git a/frontend/src/views/404.vue b/frontend/src/views/404.vue
index 1791f55a34..c1e0a495bb 100644
--- a/frontend/src/views/404.vue
+++ b/frontend/src/views/404.vue
@@ -2,19 +2,42 @@
   <div class="wscn-http404-container">
     <div class="wscn-http404">
       <div class="pic-404">
-        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
-        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img
+          class="pic-404__parent"
+          src="@/assets/404_images/404.png"
+          alt="404"
+        >
+        <img
+          class="pic-404__child left"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        >
+        <img
+          class="pic-404__child mid"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        >
+        <img
+          class="pic-404__child right"
+          src="@/assets/404_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>
+          <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>
+        <a
+          href=""
+          class="bullshit__return-home"
+        >Back to home</a>
       </div>
     </div>
   </div>
diff --git a/frontend/src/views/background/BackgroundItem.vue b/frontend/src/views/background/BackgroundItem.vue
index 7a71c59462..308a38f62b 100644
--- a/frontend/src/views/background/BackgroundItem.vue
+++ b/frontend/src/views/background/BackgroundItem.vue
@@ -9,7 +9,11 @@
       ]"
       @click.stop="setBoard"
     >
-      <svg-icon :style="{'color':this.curComponent.commonBackground.innerImageColor}" class="svg-background" :icon-class="mainIconClass" />
+      <svg-icon
+        :style="{'color':curComponent.commonBackground.innerImageColor}"
+        class="svg-background"
+        :icon-class="mainIconClass"
+      />
     </div>
     <span class="demonstration">{{ template.name }}</span>
   </div>
@@ -17,7 +21,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'BackgroundItem',
diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue
index 9474251b10..a8155447d7 100644
--- a/frontend/src/views/background/index.vue
+++ b/frontend/src/views/background/index.vue
@@ -5,14 +5,23 @@
         <span style="font-weight:600;margin-right: 20px;font-size: 14px">{{ $t('panel.component_style') }}</span>
       </el-col>
     </el-row>
-    <el-row class="main-content" disabled="!curComponent.commonBackground.enable">
+    <el-row
+      class="main-content"
+      disabled="!curComponent.commonBackground.enable"
+    >
 
       <el-row style="height: 50px;overflow: hidden">
         <el-col :span="3">
           <span class="params-title">{{ $t('panel.inner_padding') }}</span>
         </el-col>
         <el-col :span="15">
-          <el-slider v-model="curComponent.commonBackground.innerPadding" show-input :show-input-controls="false" input-size="mini" :max="50" />
+          <el-slider
+            v-model="curComponent.commonBackground.innerPadding"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :max="50"
+          />
         </el-col>
       </el-row>
       <el-row style="height: 50px;overflow: hidden">
@@ -20,27 +29,53 @@
           <span class="params-title">{{ $t('panel.board_radio') }}</span>
         </el-col>
         <el-col :span="15">
-          <el-slider v-model="curComponent.commonBackground.borderRadius" show-input :show-input-controls="false" input-size="mini" />
+          <el-slider
+            v-model="curComponent.commonBackground.borderRadius"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+          />
         </el-col>
       </el-row>
 
       <el-row style="height: 40px;overflow: hidden;">
-        <el-col :span="3" style="padding-left: 10px;padding-top: 5px">
+        <el-col
+          :span="3"
+          style="padding-left: 10px;padding-top: 5px"
+        >
           <el-checkbox v-model="curComponent.commonBackground.backgroundColorSelect">颜色</el-checkbox>
         </el-col>
-        <el-col :span="1" style="padding-top: 5px">
-          <el-color-picker v-model="curComponent.commonBackground.color" :disabled="!curComponent.commonBackground.backgroundColorSelect" size="mini" class="color-picker-style" :predefine="predefineColors" />
+        <el-col
+          :span="1"
+          style="padding-top: 5px"
+        >
+          <el-color-picker
+            v-model="curComponent.commonBackground.color"
+            :disabled="!curComponent.commonBackground.backgroundColorSelect"
+            size="mini"
+            class="color-picker-style"
+            :predefine="predefineColors"
+          />
         </el-col>
         <el-col :span="3">
           <span class="params-title-small">不透明度：</span>
         </el-col>
         <el-col :span="11">
-          <el-slider v-model="curComponent.commonBackground.alpha" :disabled="!curComponent.commonBackground.backgroundColorSelect" show-input :show-input-controls="false" input-size="mini" />
+          <el-slider
+            v-model="curComponent.commonBackground.alpha"
+            :disabled="!curComponent.commonBackground.backgroundColorSelect"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+          />
         </el-col>
       </el-row>
 
       <el-row style="height: 50px">
-        <el-col :span="3" style="padding-left: 10px;padding-top: 5px">
+        <el-col
+          :span="3"
+          style="padding-left: 10px;padding-top: 5px"
+        >
           <el-checkbox v-model="curComponent.commonBackground.enable">{{ $t('panel.background') }}</el-checkbox>
         </el-col>
         <el-col :span="21">
@@ -49,10 +84,20 @@
           </span>
         </el-col>
       </el-row>
-      <el-row v-if="curComponent.commonBackground.enable" style="padding-left: 10px">
+      <el-row
+        v-if="curComponent.commonBackground.enable"
+        style="padding-left: 10px"
+      >
         <el-row style="height: 80px;margin-top:10px;margin-bottom:20px;overflow: hidden">
-          <el-col :span="4" style="padding-left: 10px">
-            <el-radio v-model="curComponent.commonBackground.backgroundType" label="outerImage" @change="onChangeType">{{ $t('panel.photo') }}</el-radio>
+          <el-col
+            :span="4"
+            style="padding-left: 10px"
+          >
+            <el-radio
+              v-model="curComponent.commonBackground.backgroundType"
+              label="outerImage"
+              @change="onChangeType"
+            >{{ $t('panel.photo') }}</el-radio>
           </el-col>
           <el-col style="width: 130px!important;">
             <el-upload
@@ -68,18 +113,47 @@
             >
               <i class="el-icon-plus" />
             </el-upload>
-            <el-dialog top="25vh" width="600px" :append-to-body="true" :destroy-on-close="true" :visible.sync="dialogVisible">
-              <img width="100%" :src="dialogImageUrl">
+            <el-dialog
+              top="25vh"
+              width="600px"
+              :append-to-body="true"
+              :destroy-on-close="true"
+              :visible.sync="dialogVisible"
+            >
+              <img
+                width="100%"
+                :src="dialogImageUrl"
+              >
             </el-dialog>
           </el-col>
         </el-row>
         <el-row>
-          <el-col :span="4" style="padding-left: 10px;position: relative">
-            <el-radio v-model="curComponent.commonBackground.backgroundType" label="innerImage" @change="onChangeType">边框</el-radio>
-            <el-color-picker v-model="curComponent.commonBackground.innerImageColor" :title="'边框配色'" style="position: absolute;right:15px;top: -3px" size="mini" class="color-picker-style" :predefine="predefineColors" />
+          <el-col
+            :span="4"
+            style="padding-left: 10px;position: relative"
+          >
+            <el-radio
+              v-model="curComponent.commonBackground.backgroundType"
+              label="innerImage"
+              @change="onChangeType"
+            >边框</el-radio>
+            <el-color-picker
+              v-model="curComponent.commonBackground.innerImageColor"
+              :title="'边框配色'"
+              style="position: absolute;right:15px;top: -3px"
+              size="mini"
+              class="color-picker-style"
+              :predefine="predefineColors"
+            />
           </el-col>
-          <el-col :span="20" class="main-row">
-            <el-row v-for="(value, key) in BackgroundShowMap" :key="key">
+          <el-col
+            :span="20"
+            class="main-row"
+          >
+            <el-row
+              v-for="(value, key) in BackgroundShowMap"
+              :key="key"
+            >
 
               <el-col
                 v-for="item in value"
@@ -94,35 +168,81 @@
           </el-col>
         </el-row>
       </el-row>
-      <el-row v-if="isFilterComponent" style="height: 40px;overflow: hidden;">
-        <el-col :span="5" style="padding-left: 10px;padding-top: 8px">
+      <el-row
+        v-if="isFilterComponent"
+        style="height: 40px;overflow: hidden;"
+      >
+        <el-col
+          :span="5"
+          style="padding-left: 10px;padding-top: 8px"
+        >
           输入框样式(颜色):
         </el-col>
-        <el-col :span="2" style="padding-left: 10px;padding-top: 8px">
+        <el-col
+          :span="2"
+          style="padding-left: 10px;padding-top: 8px"
+        >
           边框
         </el-col>
-        <el-col :span="3" style="padding-top: 5px">
-          <el-color-picker v-model="curComponent.style.brColor" size="mini" class="color-picker-style" :predefine="predefineColors" />
+        <el-col
+          :span="3"
+          style="padding-top: 5px"
+        >
+          <el-color-picker
+            v-model="curComponent.style.brColor"
+            size="mini"
+            class="color-picker-style"
+            :predefine="predefineColors"
+          />
         </el-col>
-        <el-col :span="2" style="padding-left: 10px;padding-top: 8px">
+        <el-col
+          :span="2"
+          style="padding-left: 10px;padding-top: 8px"
+        >
           文字
         </el-col>
-        <el-col :span="3" style="padding-top: 5px">
-          <el-color-picker v-model="curComponent.style.wordColor" size="mini" class="color-picker-style" :predefine="predefineColors" />
+        <el-col
+          :span="3"
+          style="padding-top: 5px"
+        >
+          <el-color-picker
+            v-model="curComponent.style.wordColor"
+            size="mini"
+            class="color-picker-style"
+            :predefine="predefineColors"
+          />
         </el-col>
-        <el-col :span="2" style="padding-left: 10px;padding-top: 8px">
+        <el-col
+          :span="2"
+          style="padding-left: 10px;padding-top: 8px"
+        >
           背景
         </el-col>
-        <el-col :span="3" style="padding-top: 5px">
-          <el-color-picker v-model="curComponent.style.innerBgColor" size="mini" class="color-picker-style" :predefine="predefineColors" />
+        <el-col
+          :span="3"
+          style="padding-top: 5px"
+        >
+          <el-color-picker
+            v-model="curComponent.style.innerBgColor"
+            size="mini"
+            class="color-picker-style"
+            :predefine="predefineColors"
+          />
         </el-col>
       </el-row>
 
     </el-row>
     <el-row class="root-class">
       <el-col :span="24">
-        <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="save()">{{ $t('commons.confirm') }}</el-button>
+        <el-button
+          size="mini"
+          @click="cancel()"
+        >{{ $t('commons.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="save()"
+        >{{ $t('commons.confirm') }}</el-button>
       </el-col>
     </el-row>
   </el-row>
@@ -152,12 +272,6 @@ export default {
       panel: null,
       predefineColors: COLOR_PANEL
     }
-  },
-  created() {
-    this.init()
-  },
-  mounted() {
-
   },
   computed: {
     ...mapState([
@@ -168,6 +282,9 @@ export default {
       return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(this.curComponent.component)
     }
   },
+  created() {
+    this.init()
+  },
   methods: {
     init() {
       if (this.curComponent && this.curComponent.commonBackground && this.curComponent.commonBackground.outerImage && typeof (this.curComponent.commonBackground.outerImage) === 'string') {
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index c5ce49d975..1d543e5167 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -1,5 +1,5 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { DEFAULT_YAXIS_EXT_STYLE } from '@/views/chart/chart/chart'
+import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 
 let xAxisLabelFormatter = null
@@ -260,7 +260,6 @@ export function seniorCfg(chart_option, chart) {
           }
           const rgba = hexToRgba(senior.functionCfg.sliderFillBg, 0.2)
           chart_option.dataZoom[1].fillerColor = rgba
-          
         }
         if (senior.functionCfg.sliderTextClolor) {
           chart_option.dataZoom[1].textStyle = { color: senior.functionCfg.sliderTextClolor }
@@ -285,12 +284,18 @@ export function seniorCfg(chart_option, chart) {
     if (senior.assistLine && senior.assistLine.length > 0) {
       if (chart_option.series && chart_option.series.length > 0) {
         const customStyle = JSON.parse(chart.customStyle)
-        let xAxis, yAxis
+        let xAxis, yAxis, axisFormatterCfg
         if (customStyle.xAxis) {
           xAxis = JSON.parse(JSON.stringify(customStyle.xAxis))
+          if (chart.type.includes('horizontal')) {
+            axisFormatterCfg = xAxis.axisLabelFormatter ? xAxis.axisLabelFormatter : DEFAULT_XAXIS_STYLE.axisLabelFormatter
+          }
         }
         if (customStyle.yAxis) {
           yAxis = JSON.parse(JSON.stringify(customStyle.yAxis))
+          if (!chart.type.includes('horizontal')) {
+            axisFormatterCfg = yAxis.axisLabelFormatter ? yAxis.axisLabelFormatter : DEFAULT_YAXIS_STYLE.axisLabelFormatter
+          }
         }
 
         const fixedLines = senior.assistLine.filter(ele => ele.field === '0')
@@ -313,7 +318,7 @@ export function seniorCfg(chart_option, chart) {
                 fontSize: 10,
                 position: xAxis.position === 'bottom' ? 'insideStartTop' : 'insideEndTop',
                 formatter: function(param) {
-                  return ele.name + ' : ' + param.value
+                  return ele.name + ' : ' + valueFormatter(param.value, axisFormatterCfg)
                 }
               },
               tooltip: {
@@ -335,7 +340,7 @@ export function seniorCfg(chart_option, chart) {
                 fontSize: 10,
                 position: yAxis.position === 'left' ? 'insideStartTop' : 'insideEndTop',
                 formatter: function(param) {
-                  return ele.name + ' : ' + param.value
+                  return ele.name + ' : ' + valueFormatter(param.value, axisFormatterCfg)
                 }
               },
               tooltip: {
diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
index 33bf02c0fe..7afb4b3012 100644
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -1,5 +1,6 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
+import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart'
 
 export function getPadding(chart) {
   if (chart.drill) {
@@ -605,6 +606,21 @@ export function getYAxisExt(chart) {
           style: {
             fill: a.axisLabel.color,
             fontSize: parseInt(a.axisLabel.fontSize)
+          },
+          formatter: function(value) {
+            if (chart.type === 'waterfall') {
+              return value
+            } else {
+              if (!chart.type.includes('horizontal')) {
+                if (!a.axisLabelFormatter) {
+                  return valueFormatter(value, formatterItem)
+                } else {
+                  return valueFormatter(value, a.axisLabelFormatter)
+                }
+              } else {
+                return value
+              }
+            }
           }
         } : null
 
@@ -703,14 +719,20 @@ export function getAnalyse(chart) {
     senior = JSON.parse(chart.senior)
     if (senior.assistLine && senior.assistLine.length > 0) {
       const customStyle = JSON.parse(chart.customStyle)
-      let xAxisPosition, yAxisPosition
+      let xAxisPosition, yAxisPosition, axisFormatterCfg
       if (customStyle.xAxis) {
         const a = JSON.parse(JSON.stringify(customStyle.xAxis))
         xAxisPosition = transAxisPosition(chart, a)
+        if (chart.type.includes('horizontal')) {
+          axisFormatterCfg = a.axisLabelFormatter ? a.axisLabelFormatter : DEFAULT_XAXIS_STYLE.axisLabelFormatter
+        }
       }
       if (customStyle.yAxis) {
         const a = JSON.parse(JSON.stringify(customStyle.yAxis))
         yAxisPosition = transAxisPosition(chart, a)
+        if (!chart.type.includes('horizontal')) {
+          axisFormatterCfg = a.axisLabelFormatter ? a.axisLabelFormatter : DEFAULT_YAXIS_STYLE.axisLabelFormatter
+        }
       }
 
       const fixedLines = senior.assistLine.filter(ele => ele.field === '0')
@@ -718,11 +740,12 @@ export function getAnalyse(chart) {
       const lines = fixedLines.concat(dynamicLines)
 
       lines.forEach(ele => {
-        const content = ele.name + ' : ' + parseFloat(ele.value)
+        const value = parseFloat(ele.value)
+        const content = ele.name + ' : ' + valueFormatter(value, axisFormatterCfg)
         assistLine.push({
           type: 'line',
-          start: ['start', parseFloat(ele.value)],
-          end: ['end', parseFloat(ele.value)],
+          start: ['start', value],
+          end: ['end', value],
           style: {
             stroke: ele.color,
             lineDash: getLineDash(ele.lineType)
@@ -731,7 +754,7 @@ export function getAnalyse(chart) {
         if (!chart.type.includes('horizontal')) {
           assistLine.push({
             type: 'text',
-            position: [yAxisPosition === 'left' ? 'start' : 'end', parseFloat(ele.value)],
+            position: [yAxisPosition === 'left' ? 'start' : 'end', value],
             content: content,
             offsetY: -2,
             offsetX: yAxisPosition === 'left' ? 2 : -10 * (content.length - 2),
@@ -744,7 +767,7 @@ export function getAnalyse(chart) {
         } else {
           assistLine.push({
             type: 'text',
-            position: [xAxisPosition === 'left' ? 'start' : 'end', parseFloat(ele.value)],
+            position: [xAxisPosition === 'left' ? 'start' : 'end', value],
             content: content,
             offsetY: xAxisPosition === 'left' ? -2 : -10 * (content.length - 2),
             offsetX: 2,
diff --git a/frontend/src/views/chart/chart/funnel/funnel_antv.js b/frontend/src/views/chart/chart/funnel/funnel_antv.js
index 6d12901088..61168c5a53 100644
--- a/frontend/src/views/chart/chart/funnel/funnel_antv.js
+++ b/frontend/src/views/chart/chart/funnel/funnel_antv.js
@@ -43,14 +43,6 @@ export function baseFunnelOptionAntV(plot, container, chart, action) {
       }
     ]
   }
-  // size
-  let customAttr = {}
-  if (chart.customAttr) {
-    customAttr = JSON.parse(chart.customAttr)
-    if (customAttr.size) {
-      const s = JSON.parse(JSON.stringify(customAttr.size))
-    }
-  }
   // custom color
   options.color = antVCustomColor(chart)
 
diff --git a/frontend/src/views/chart/chart/liquid/liquid.js b/frontend/src/views/chart/chart/liquid/liquid.js
index e1b7435a14..2e228ca0f1 100644
--- a/frontend/src/views/chart/chart/liquid/liquid.js
+++ b/frontend/src/views/chart/chart/liquid/liquid.js
@@ -8,7 +8,7 @@ let labelFormatter = null
 export function baseLiquid(plot, container, chart) {
   let value = 0
   const colors = []
-  let max, radius, bgColor, shape, labelContent, title
+  let max, radius, bgColor, shape, labelContent
   if (chart.data) {
     if (chart.data.series.length > 0) {
       value = chart.data.series[0].data[0]
@@ -57,22 +57,6 @@ export function baseLiquid(plot, container, chart) {
     if (customStyle.background) {
       bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
     }
-    if (customStyle.text) {
-      const t = JSON.parse(JSON.stringify(customStyle.text))
-      if (t.show) {
-        title = {
-          formatter: () => { return chart.title },
-          style: ({ percent }) => ({
-            fontSize: parseInt(t.fontSize),
-            color: t.color,
-            fontWeight: t.isBolder ? 'bold' : 'normal',
-            fontStyle: t.isItalic ? 'italic' : 'normal'
-          })
-        }
-      } else {
-        title = false
-      }
-    }
   }
   // 开始渲染
   if (plot) {
@@ -91,7 +75,6 @@ export function baseLiquid(plot, container, chart) {
     radius: radius,
     shape: shape,
     statistic: {
-      // title: title,
       content: labelContent
     }
   })
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index a30bd8b8aa..9c928741c5 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -82,7 +82,6 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
         chart_option.visualMap.inRange.colorAlpha = customAttr.color.alpha / 100
       }
       if (themeStyle) {
-        
         chart_option.visualMap.textStyle = { color: themeStyle }
       }
       for (let i = 0; i < valueArr.length; i++) {
diff --git a/frontend/src/views/chart/chart/mix/mix_antv.js b/frontend/src/views/chart/chart/mix/mix_antv.js
index 89ae65d244..ca77bc3afc 100644
--- a/frontend/src/views/chart/chart/mix/mix_antv.js
+++ b/frontend/src/views/chart/chart/mix/mix_antv.js
@@ -93,7 +93,8 @@ export function baseMixOptionAntV(plot, container, chart, action) {
     appendPadding: getPadding(chart),
     syncViewPadding: true,
     plots: plots,
-    legend: legend
+    legend: legend,
+    tooltip: { shared: true }
   }
 
   // 开始渲染
diff --git a/frontend/src/views/chart/chart/treemap/treemap_antv.js b/frontend/src/views/chart/chart/treemap/treemap_antv.js
index ea695a290c..598609813e 100644
--- a/frontend/src/views/chart/chart/treemap/treemap_antv.js
+++ b/frontend/src/views/chart/chart/treemap/treemap_antv.js
@@ -43,15 +43,6 @@ export function baseTreemapOptionAntV(plot, container, chart, action) {
       }
     ]
   }
-  // size
-  let customAttr = {}
-  if (chart.customAttr) {
-    customAttr = JSON.parse(chart.customAttr)
-    if (customAttr.size) {
-      const s = JSON.parse(JSON.stringify(customAttr.size))
-    }
-  }
-
   // 开始渲染
   if (plot) {
     plot.destroy()
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 2f0335192d..ef6702181f 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -7,18 +7,43 @@
       :style="trackBarStyleTime"
       @trackClick="trackClick"
     />
-    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
-    <div v-if="chart.type === 'map'" class="map-zoom-box">
+    <div
+      :id="chartId"
+      style="width: 100%;height: 100%;overflow: hidden;"
+      :style="{ borderRadius: borderRadius}"
+    />
+    <div
+      v-if="chart.type === 'map'"
+      class="map-zoom-box"
+    >
       <div style="margin-bottom: 0.5em;">
-        <el-button :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}" size="mini" icon="el-icon-plus" circle @click="roamMap(true)" />
+        <el-button
+          :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
+          size="mini"
+          icon="el-icon-plus"
+          circle
+          @click="roamMap(true)"
+        />
       </div>
 
       <div style="margin-bottom: 0.5em;">
-        <el-button :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}" size="mini" icon="el-icon-refresh" circle @click="resetZoom()" />
+        <el-button
+          :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
+          size="mini"
+          icon="el-icon-refresh"
+          circle
+          @click="resetZoom()"
+        />
       </div>
 
       <div>
-        <el-button :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}" size="mini" icon="el-icon-minus" circle @click="roamMap(false)" />
+        <el-button
+          :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
+          size="mini"
+          icon="el-icon-minus"
+          circle
+          @click="roamMap(false)"
+        />
       </div>
 
     </div>
@@ -243,7 +268,7 @@ export default {
           } else {
             this.buttonTextColor = null
           }
-        } else if(this.canvasStyleData.openCommonStyle && this.canvasStyleData.panel.backgroundType === 'color') {
+        } else if (this.canvasStyleData.openCommonStyle && this.canvasStyleData.panel.backgroundType === 'color') {
           const panelColor = this.canvasStyleData.panel.color
           if (panelColor !== '#FFFFFF') {
             const reverseValue = reverseColor(panelColor)
@@ -344,7 +369,7 @@ export default {
           } else {
             this.buttonTextColor = null
           }
-        } else if(this.canvasStyleData.openCommonStyle && this.canvasStyleData.panel.backgroundType === 'color') {
+        } else if (this.canvasStyleData.openCommonStyle && this.canvasStyleData.panel.backgroundType === 'color') {
           const panelColor = this.canvasStyleData.panel.color
           if (panelColor !== '#FFFFFF') {
             const reverseValue = reverseColor(panelColor)
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 2cd132ed6c..d6f43b9a2f 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -1,13 +1,37 @@
 <template>
-  <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
-    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
-    <span v-if="chart.type && antVRenderStatus" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
+  <div
+    ref="chartContainer"
+    style="padding: 0;width: 100%;height: 100%;overflow: hidden;"
+    :style="bg_class"
+  >
+    <view-track-bar
+      ref="viewTrack"
+      :track-menu="trackMenu"
+      class="track-bar"
+      :style="trackBarStyleTime"
+      @trackClick="trackClick"
+    />
+    <span
+      v-if="chart.type && antVRenderStatus"
+      v-show="title_show"
+      ref="title"
+      :style="title_class"
+      style="cursor: default;display: block;"
+    >
       <div style="padding:6px 4px 0;margin: 0;">
         <p style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
+        <title-remark
+          v-if="remarkCfg.show"
+          style="text-shadow: none!important;"
+          :remark-cfg="remarkCfg"
+        />
       </div>
     </span>
-    <div :id="chartId" style="width: 100%;overflow: hidden;" :style="{height:chartHeight}" />
+    <div
+      :id="chartId"
+      style="width: 100%;overflow: hidden;"
+      :style="{height:chartHeight}"
+    />
   </div>
 </template>
 
@@ -28,6 +52,7 @@ import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall
 import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
 import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
 
 export default {
   name: 'ChartComponentG2',
@@ -226,6 +251,8 @@ export default {
         this.myChart = baseWaterfallOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'word-cloud') {
         this.myChart = baseWordCloudOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'chart-mix') {
+        this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else {
         if (this.myChart) {
           this.antVRenderStatus = false
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 0fbe29ac7b..ba1803bd19 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -1,17 +1,59 @@
 <template>
-  <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
-    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
-    <span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
+  <div
+    ref="chartContainer"
+    style="padding: 0;width: 100%;height: 100%;overflow: hidden;"
+    :style="bg_class"
+  >
+    <view-track-bar
+      ref="viewTrack"
+      :track-menu="trackMenu"
+      class="track-bar"
+      :style="trackBarStyleTime"
+      @trackClick="trackClick"
+    />
+    <span
+      v-if="chart.type"
+      v-show="title_show"
+      ref="title"
+      :style="title_class"
+      style="cursor: default;display: block;"
+    >
       <div style="padding:6px 4px 0;margin: 0;">
         <p style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
+        <title-remark
+          v-if="remarkCfg.show"
+          style="text-shadow: none!important;"
+          :remark-cfg="remarkCfg"
+        />
       </div>
     </span>
-    <div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}">
-      <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
-      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? (showPage ? 'table-dom-info-drill' : 'table-dom-info-drill-pull') : (showPage ? 'table-dom-info' : 'table-dom-info-pull')" />
-      <div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
-      <el-row v-show="showPage" class="table-page">
+    <div
+      ref="tableContainer"
+      style="width: 100%;overflow: hidden;"
+      :style="{background:container_bg_class.background}"
+    >
+      <div
+        v-if="chart.type === 'table-normal'"
+        :id="chartId"
+        style="width: 100%;overflow: hidden;"
+        :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'"
+      />
+      <div
+        v-if="chart.type === 'table-info'"
+        :id="chartId"
+        style="width: 100%;overflow: hidden;"
+        :class="chart.drill ? (showPage ? 'table-dom-info-drill' : 'table-dom-info-drill-pull') : (showPage ? 'table-dom-info' : 'table-dom-info-pull')"
+      />
+      <div
+        v-if="chart.type === 'table-pivot'"
+        :id="chartId"
+        style="width: 100%;overflow: hidden;"
+        class="table-dom-normal"
+      />
+      <el-row
+        v-show="showPage"
+        class="table-page"
+      >
         <span class="total-style">
           {{ $t('chart.total') }}
           <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
@@ -247,7 +289,7 @@ export default {
       }
       const dimensionList = []
       for (const key in rowData) {
-        if(meta.fieldValue === rowData[key]){
+        if (meta.fieldValue === rowData[key]) {
           dimensionList.push({ id: nameIdMap[key], value: rowData[key] })
         }
       }
@@ -256,7 +298,7 @@ export default {
         data: {
           dimensionList: dimensionList,
           quotaList: [],
-          name: meta.fieldValue||'null'
+          name: meta.fieldValue || 'null'
         }
       }
 
diff --git a/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue b/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
index 80be74c912..06c4ca90d8 100644
--- a/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
+++ b/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
@@ -7,12 +7,18 @@
       highlight-current
       @node-click="nodeClick"
     >
-      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
+      <span
+        slot-scope="{ node, data }"
+        :class="treeClass(data,node)"
+      >
         <span style="display: flex;flex: 1;width: 0;">
           <span v-if="data.type === 'scene'">
-            <svg-icon icon-class="scene"/>
+            <svg-icon icon-class="scene" />
           </span>
-          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+          <span
+            style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+            :title="data.name"
+          >{{ data.name }}</span>
         </span>
       </span>
     </el-tree>
diff --git a/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue b/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue
index 9b1b269f08..c38493e487 100644
--- a/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue
+++ b/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue
@@ -7,12 +7,18 @@
       highlight-current
       @node-click="nodeClick"
     >
-      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
+      <span
+        slot-scope="{ node, data }"
+        :class="treeClass(data,node)"
+      >
         <span style="display: flex;flex: 1;width: 0;">
           <span v-if="data.type === 'scene'">
-            <svg-icon icon-class="scene"/>
+            <svg-icon icon-class="scene" />
           </span>
-          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+          <span
+            style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+            :title="data.name"
+          >{{ data.name }}</span>
         </span>
       </span>
     </el-tree>
diff --git a/frontend/src/views/chart/components/TreeSelector/index.vue b/frontend/src/views/chart/components/TreeSelector/index.vue
index 6f31542b9f..ca90f18ba2 100644
--- a/frontend/src/views/chart/components/TreeSelector/index.vue
+++ b/frontend/src/views/chart/components/TreeSelector/index.vue
@@ -7,12 +7,18 @@
       highlight-current
       @node-click="nodeClick"
     >
-      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
+      <span
+        slot-scope="{ node, data }"
+        :class="treeClass(data,node)"
+      >
         <span style="display: flex;flex: 1;width: 0;">
           <span v-if="data.type === 'scene'">
-            <svg-icon icon-class="scene"/>
+            <svg-icon icon-class="scene" />
           </span>
-          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+          <span
+            style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+            :title="data.name"
+          >{{ data.name }}</span>
         </span>
       </span>
     </el-tree>
diff --git a/frontend/src/views/chart/components/compare/CompareEdit.vue b/frontend/src/views/chart/components/compare/CompareEdit.vue
index 325f1fc1e5..81966e5faf 100644
--- a/frontend/src/views/chart/components/compare/CompareEdit.vue
+++ b/frontend/src/views/chart/components/compare/CompareEdit.vue
@@ -1,15 +1,35 @@
 <template>
   <div>
-    <el-form ref="form" :model="compareItem.compareCalc" label-width="80px" size="mini" class="compare-form">
+    <el-form
+      ref="form"
+      :model="compareItem.compareCalc"
+      label-width="80px"
+      size="mini"
+      class="compare-form"
+    >
       <el-form-item :label="$t('chart.compare_date')">
-        <el-select v-model="compareItem.compareCalc.field" :placeholder="$t('chart.pls_select_field')" size="mini" @change="initCompareType">
-          <el-option v-for="field in fieldList" :key="field.id" :label="field.name + '(' + $t('chart.' + field.dateStyle) + ')'" :value="field.id" />
+        <el-select
+          v-model="compareItem.compareCalc.field"
+          :placeholder="$t('chart.pls_select_field')"
+          size="mini"
+          @change="initCompareType"
+        >
+          <el-option
+            v-for="field in fieldList"
+            :key="field.id"
+            :label="field.name + '(' + $t('chart.' + field.dateStyle) + ')'"
+            :value="field.id"
+          />
         </el-select>
       </el-form-item>
 
       <el-form-item :label="$t('chart.compare_type')">
         <el-radio-group v-model="compareItem.compareCalc.type">
-          <el-radio v-for="radio in compareList" :key="radio.value" :label="radio.value">{{ $t('chart.' + radio.value) }}</el-radio>
+          <el-radio
+            v-for="radio in compareList"
+            :key="radio.value"
+            :label="radio.value"
+          >{{ $t('chart.' + radio.value) }}</el-radio>
         </el-radio-group>
       </el-form-item>
 
@@ -21,8 +41,14 @@
       </el-form-item>
 
       <el-form-item :label="$t('chart.compare_calc_expression')">
-        <span v-if="compareItem.compareCalc.resultData === 'sub'" class="exp-style">本期数据 - 上期数据</span>
-        <span v-else-if="compareItem.compareCalc.resultData === 'percent'" class="exp-style">(本期数据 / 上期数据 - 1) * 100%</span>
+        <span
+          v-if="compareItem.compareCalc.resultData === 'sub'"
+          class="exp-style"
+        >本期数据 - 上期数据</span>
+        <span
+          v-else-if="compareItem.compareCalc.resultData === 'percent'"
+          class="exp-style"
+        >(本期数据 / 上期数据 - 1) * 100%</span>
       </el-form-item>
     </el-form>
   </div>
diff --git a/frontend/src/views/chart/components/compare/CustomSortEdit.vue b/frontend/src/views/chart/components/compare/CustomSortEdit.vue
index 3a073dcb2e..0eeb7b4f3d 100644
--- a/frontend/src/views/chart/components/compare/CustomSortEdit.vue
+++ b/frontend/src/views/chart/components/compare/CustomSortEdit.vue
@@ -9,8 +9,16 @@
       @update="onUpdate"
     >
       <transition-group class="draggable-group">
-        <span v-for="(item,index) in sortList" :key="index" class="item-dimension" :title="item">
-          <svg-icon icon-class="drag" class="item-icon" />
+        <span
+          v-for="(item) in sortList"
+          :key="item"
+          class="item-dimension"
+          :title="item"
+        >
+          <svg-icon
+            icon-class="drag"
+            class="item-icon"
+          />
           <span class="item-span">
             {{ item }}
           </span>
diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
index 71b877d43a..e60ce961ee 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -1,16 +1,47 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.color')" class="form-item">
-          <el-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeBackgroundStyle" />
+      <el-form
+        ref="colorForm"
+        :model="colorForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          :label="$t('chart.color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="colorForm.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeBackgroundStyle"
+          />
         </el-form-item>
-        <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
-          <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
+        <el-form-item
+          :label="$t('chart.not_alpha')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="colorForm.alpha"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBackgroundStyle"
+          />
         </el-form-item>
 
-        <el-form-item :label="$t('chart.border_radius')" class="form-item form-item-slider">
-          <el-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
+        <el-form-item
+          :label="$t('chart.border_radius')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="colorForm.borderRadius"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBackgroundStyle"
+          />
         </el-form-item>
       </el-form>
     </el-col>
diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index 9a4d404e00..2b2e2f2884 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -1,13 +1,33 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
-        <el-form-item  v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="legendForm.show" @change="changeLegendStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="legendForm"
+        :model="legendForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="legendForm.show"
+            @change="changeLegendStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="showProperty('show') && legendForm.show">
-          <el-form-item  v-show="showProperty('icon')" :label="$t('chart.icon')" class="form-item">
-            <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle('icon')">
+          <el-form-item
+            v-show="showProperty('icon')"
+            :label="$t('chart.icon')"
+            class="form-item"
+          >
+            <el-select
+              v-model="legendForm.icon"
+              :placeholder="$t('chart.icon')"
+              @change="changeLegendStyle('icon')"
+            >
               <el-option
                 v-for="item in iconSymbolOptions"
                 :key="item.value"
@@ -16,29 +36,76 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item  v-show="showProperty('orient')" :label="$t('chart.orient')" class="form-item">
-            <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle('orient')">
+          <el-form-item
+            v-show="showProperty('orient')"
+            :label="$t('chart.orient')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="legendForm.orient"
+              size="mini"
+              @change="changeLegendStyle('orient')"
+            >
               <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
               <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item  v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle('textStyle')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('textStyle')"
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="legendForm.textStyle.fontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeLegendStyle('textStyle')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item  v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle('textStyle')" />
+          <el-form-item
+            v-show="showProperty('textStyle')"
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="legendForm.textStyle.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeLegendStyle('textStyle')"
+            />
           </el-form-item>
-          <el-form-item  v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
-            <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle('hPosition')">
+          <el-form-item
+            v-show="showProperty('hPosition')"
+            :label="$t('chart.text_h_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="legendForm.hPosition"
+              size="mini"
+              @change="changeLegendStyle('hPosition')"
+            >
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item  v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
-            <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle('vPosition')">
+          <el-form-item
+            v-show="showProperty('vPosition')"
+            :label="$t('chart.text_v_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="legendForm.vPosition"
+              size="mini"
+              @change="changeLegendStyle('vPosition')"
+            >
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
diff --git a/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue b/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
index ebdd1d9659..60283bf7b1 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
@@ -1,13 +1,33 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="legendForm.show" @change="changeLegendStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="legendForm"
+        :model="legendForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="legendForm.show"
+            @change="changeLegendStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="legendForm.show">
-          <el-form-item v-show="showProperty('icon')" :label="$t('chart.icon')" class="form-item">
-            <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle('icon')">
+          <el-form-item
+            v-show="showProperty('icon')"
+            :label="$t('chart.icon')"
+            class="form-item"
+          >
+            <el-select
+              v-model="legendForm.icon"
+              :placeholder="$t('chart.icon')"
+              @change="changeLegendStyle('icon')"
+            >
               <el-option
                 v-for="item in iconSymbolOptions"
                 :key="item.value"
@@ -16,31 +36,84 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('orient')" :label="$t('chart.orient')" class="form-item">
-            <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle('orient')">
+          <el-form-item
+            v-show="showProperty('orient')"
+            :label="$t('chart.orient')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="legendForm.orient"
+              size="mini"
+              @change="changeLegendStyle('orient')"
+            >
               <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
               <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle('textStyle')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('textStyle')"
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="legendForm.textStyle.fontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeLegendStyle('textStyle')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle('textStyle')" />
+          <el-form-item
+            v-show="showProperty('textStyle')"
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="legendForm.textStyle.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeLegendStyle('textStyle')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
-            <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle('hPosition')">
+          <el-form-item
+            v-show="showProperty('hPosition')"
+            :label="$t('chart.text_h_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="legendForm.hPosition"
+              size="mini"
+              @change="changeLegendStyle('hPosition')"
+            >
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
-              <el-radio-button :disabled="legendForm.vPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button
+                :disabled="legendForm.vPosition === 'center'"
+                label="center"
+              >{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
-            <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle('vPosition')">
+          <el-form-item
+            v-show="showProperty('vPosition')"
+            :label="$t('chart.text_v_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="legendForm.vPosition"
+              size="mini"
+              @change="changeLegendStyle('vPosition')"
+            >
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
-              <el-radio-button :disabled="legendForm.hPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button
+                :disabled="legendForm.hPosition === 'center'"
+                label="center"
+              >{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
diff --git a/frontend/src/views/chart/components/component-style/MarginSelector.vue b/frontend/src/views/chart/components/component-style/MarginSelector.vue
index d3aa542f23..1d0b4fa5aa 100644
--- a/frontend/src/views/chart/components/component-style/MarginSelector.vue
+++ b/frontend/src/views/chart/components/component-style/MarginSelector.vue
@@ -1,36 +1,106 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="marginForm" :model="marginForm" label-width="80px" size="mini" :rules="rules">
-        <el-form-item v-show="showProperty('marginModel')" :label="$t('chart.margin_model')" class="form-item">
-          <el-radio-group v-model="marginForm.marginModel" size="mini" @change="changeMarginStyle(marginForm.marginModel, 'marginModel')">
+      <el-form
+        ref="marginForm"
+        :model="marginForm"
+        label-width="80px"
+        size="mini"
+        :rules="rules"
+      >
+        <el-form-item
+          v-show="showProperty('marginModel')"
+          :label="$t('chart.margin_model')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="marginForm.marginModel"
+            size="mini"
+            @change="changeMarginStyle(marginForm.marginModel, 'marginModel')"
+          >
             <el-radio-button label="auto">{{ $t('chart.margin_model_auto') }}</el-radio-button>
             <el-radio-button label="absolute">{{ $t('chart.margin_model_absolute') }}</el-radio-button>
             <el-radio-button label="relative">{{ $t('chart.margin_model_relative') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
         <div v-show="showProperty('marginModel') && marginForm.marginModel !== 'auto'">
-          <el-form-item v-show="showProperty('marginTop')" :label="$t('chart.text_pos_top')" class="form-item" prop="marginTop">
-            <el-input v-model="marginForm.marginTop" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
-              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+          <el-form-item
+            v-show="showProperty('marginTop')"
+            :label="$t('chart.text_pos_top')"
+            class="form-item"
+            prop="marginTop"
+          >
+            <el-input
+              v-model="marginForm.marginTop"
+              :placeholder="placeholder"
+              type="number"
+              class="hide-icon-number"
+              @change="changeMarginStyle(marginForm.marginTop, 'marginTop')"
+            >
+              <template
+                v-if="unitSuffix"
+                slot="append"
+              >{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
-          <el-form-item v-show="showProperty('marginBottom')" :label="$t('chart.text_pos_bottom')" class="form-item" prop="marginBottom">
-            <el-input v-model="marginForm.marginBottom" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
-              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+          <el-form-item
+            v-show="showProperty('marginBottom')"
+            :label="$t('chart.text_pos_bottom')"
+            class="form-item"
+            prop="marginBottom"
+          >
+            <el-input
+              v-model="marginForm.marginBottom"
+              :placeholder="placeholder"
+              type="number"
+              class="hide-icon-number"
+              @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')"
+            >
+              <template
+                v-if="unitSuffix"
+                slot="append"
+              >{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
-          <el-form-item v-show="showProperty('marginLeft')" :label="$t('chart.text_pos_left')" class="form-item" prop="marginLeft">
-            <el-input v-model="marginForm.marginLeft" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
-              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+          <el-form-item
+            v-show="showProperty('marginLeft')"
+            :label="$t('chart.text_pos_left')"
+            class="form-item"
+            prop="marginLeft"
+          >
+            <el-input
+              v-model="marginForm.marginLeft"
+              :placeholder="placeholder"
+              type="number"
+              class="hide-icon-number"
+              @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')"
+            >
+              <template
+                v-if="unitSuffix"
+                slot="append"
+              >{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
-          <el-form-item v-show="showProperty('marginRight')" :label="$t('chart.text_pos_right')" class="form-item" prop="marginRight">
-            <el-input v-model="marginForm.marginRight" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
-              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+          <el-form-item
+            v-show="showProperty('marginRight')"
+            :label="$t('chart.text_pos_right')"
+            class="form-item"
+            prop="marginRight"
+          >
+            <el-input
+              v-model="marginForm.marginRight"
+              :placeholder="placeholder"
+              type="number"
+              class="hide-icon-number"
+              @change="changeMarginStyle(marginForm.marginRight, 'marginRight')"
+            >
+              <template
+                v-if="unitSuffix"
+                slot="append"
+              >{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
diff --git a/frontend/src/views/chart/components/component-style/SplitSelector.vue b/frontend/src/views/chart/components/component-style/SplitSelector.vue
index 97ebbde9ad..e2a9081e12 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelector.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelector.vue
@@ -1,43 +1,145 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
-          <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle('name')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="splitForm"
+        :model="splitForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('name')"
+          :label="$t('chart.name')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="splitForm.name.show"
+            @change="changeSplitStyle('name')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('name')" :label="$t('chart.color')" class="form-item">
-          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('name')" />
+        <el-form-item
+          v-show="showProperty('name')"
+          :label="$t('chart.color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="splitForm.name.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeSplitStyle('name')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('name')" :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
-          <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle('name')">
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('name')"
+          :label="$t('chart.text_fontsize')"
+          class="form-item form-item-slider"
+        >
+          <el-select
+            v-model="splitForm.name.fontSize"
+            :placeholder="$t('chart.text_fontsize')"
+            @change="changeSplitStyle('name')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('axisLine')" :label="$t('chart.axis_line')" class="form-item">
-          <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle('axisLine')">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('axisLine')"
+          :label="$t('chart.axis_line')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="splitForm.axisLine.show"
+            @change="changeSplitStyle('axisLine')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('axisLine')" :label="$t('chart.axis_color')" class="form-item">
-          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLine')" />
+        <el-form-item
+          v-show="showProperty('axisLine')"
+          :label="$t('chart.axis_color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="splitForm.axisLine.lineStyle.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeSplitStyle('axisLine')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label')" class="form-item">
-          <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle('axisLabel')">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('axisLabel')"
+          :label="$t('chart.axis_label')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="splitForm.axisLabel.show"
+            @change="changeSplitStyle('axisLabel')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_color')" class="form-item">
-          <el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLabel')" />
+        <el-form-item
+          v-show="showProperty('axisLabel')"
+          :label="$t('chart.axis_label_color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="splitForm.axisLabel.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeSplitStyle('axisLabel')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
-          <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle('axisLabel')">
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('axisLabel')"
+          :label="$t('chart.label_fontsize')"
+          class="form-item form-item-slider"
+        >
+          <el-select
+            v-model="splitForm.axisLabel.fontSize"
+            :placeholder="$t('chart.label_fontsize')"
+            @change="changeSplitStyle('axisLabel')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.split_line')" class="form-item">
-          <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle('splitLine')">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('splitLine')"
+          :label="$t('chart.split_line')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="splitForm.splitLine.show"
+            @change="changeSplitStyle('splitLine')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.split_color')" class="form-item">
-          <el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('splitLine')" />
+        <el-form-item
+          v-show="showProperty('splitLine')"
+          :label="$t('chart.split_color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="splitForm.splitLine.lineStyle.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeSplitStyle('splitLine')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('splitArea')" :label="$t('chart.shadow')" class="form-item">
-          <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle('splitArea')">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('splitArea')"
+          :label="$t('chart.shadow')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="splitForm.splitArea.show"
+            @change="changeSplitStyle('splitArea')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
       </el-form>
     </el-col>
diff --git a/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue b/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
index b522fddab8..fc74ea5e81 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
@@ -1,20 +1,63 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
-          <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle('name')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="splitForm"
+        :model="splitForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('name')"
+          :label="$t('chart.name')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="splitForm.name.show"
+            @change="changeSplitStyle('name')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('name')" :label="$t('chart.color')" class="form-item">
-          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('name')" />
+        <el-form-item
+          v-show="showProperty('name')"
+          :label="$t('chart.color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="splitForm.name.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeSplitStyle('name')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('name')" :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
-          <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle('name')">
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('name')"
+          :label="$t('chart.text_fontsize')"
+          class="form-item form-item-slider"
+        >
+          <el-select
+            v-model="splitForm.name.fontSize"
+            :placeholder="$t('chart.text_fontsize')"
+            @change="changeSplitStyle('name')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('lineStyle')" :label="$t('chart.axis_color')" class="form-item">
-          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLine')" />
+        <el-form-item
+          v-show="showProperty('lineStyle')"
+          :label="$t('chart.axis_color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="splitForm.axisLine.lineStyle.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeSplitStyle('axisLine')"
+          />
         </el-form-item>
       </el-form>
     </el-col>
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index 4f815ff82e..d5691cc72e 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -1,12 +1,29 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="titleForm"
+        :model="titleForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="titleForm.show"
+            @change="changeTitleStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="showProperty('show') && titleForm.show">
-          <el-form-item v-show="showProperty('title')" v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
+          <el-form-item
+            v-show="showProperty('title')"
+            v-if="!batchOptStatus"
+            :label="$t('chart.title')"
+            class="form-item"
+          >
             <el-input
               v-model="titleForm.title"
               size="mini"
@@ -16,44 +33,128 @@
               @input="inputOnInput($event)"
             />
           </el-form-item>
-          <el-form-item v-show="showProperty('fontFamily')" :label="$t('chart.font_family')" class="form-item">
-            <el-select v-model="titleForm.fontFamily" :placeholder="$t('chart.font_family')" @change="changeTitleStyle('fontFamily')">
-              <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('fontFamily')"
+            :label="$t('chart.font_family')"
+            class="form-item"
+          >
+            <el-select
+              v-model="titleForm.fontFamily"
+              :placeholder="$t('chart.font_family')"
+              @change="changeTitleStyle('fontFamily')"
+            >
+              <el-option
+                v-for="option in fontFamily"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('fontSize')"
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="titleForm.fontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeTitleStyle('fontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('color')" />
+          <el-form-item
+            v-show="showProperty('color')"
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="titleForm.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeTitleStyle('color')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
-            <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
+          <el-form-item
+            v-show="showProperty('hPosition')"
+            :label="$t('chart.text_h_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="titleForm.hPosition"
+              size="mini"
+              @change="changeTitleStyle('hPosition')"
+            >
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
-            <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle('vPosition')">
+          <el-form-item
+            v-show="showProperty('vPosition')"
+            :label="$t('chart.text_v_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="titleForm.vPosition"
+              size="mini"
+              @change="changeTitleStyle('vPosition')"
+            >
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('isItalic') || showProperty('isBolder')" :label="$t('chart.text_style')" class="form-item">
-            <el-checkbox v-show="showProperty('isItalic')" v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
-            <el-checkbox v-show="showProperty('isBolder')" v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('isItalic') || showProperty('isBolder')"
+            :label="$t('chart.text_style')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-show="showProperty('isItalic')"
+              v-model="titleForm.isItalic"
+              @change="changeTitleStyle('isItalic')"
+            >{{ $t('chart.italic') }}</el-checkbox>
+            <el-checkbox
+              v-show="showProperty('isBolder')"
+              v-model="titleForm.isBolder"
+              @change="changeTitleStyle('isBolder')"
+            >{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
-          <el-form-item v-show="showProperty('letterSpace')" :label="$t('chart.letter_space')" class="form-item">
-            <el-select v-model="titleForm.letterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
-              <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('letterSpace')"
+            :label="$t('chart.letter_space')"
+            class="form-item"
+          >
+            <el-select
+              v-model="titleForm.letterSpace"
+              :placeholder="$t('chart.quota_letter_space')"
+              @change="changeTitleStyle('letterSpace')"
+            >
+              <el-option
+                v-for="option in fontLetterSpace"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('fontShadow')" :label="$t('chart.font_shadow')" class="form-item">
-            <el-checkbox v-model="titleForm.fontShadow" @change="changeTitleStyle('fontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('fontShadow')"
+            :label="$t('chart.font_shadow')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="titleForm.fontShadow"
+              @change="changeTitleStyle('fontShadow')"
+            >{{ $t('chart.font_shadow') }}</el-checkbox>
           </el-form-item>
         </div>
       </el-form>
@@ -95,6 +196,11 @@ export default {
       fontLetterSpace: CHART_FONT_LETTER_SPACE
     }
   },
+  computed: {
+    ...mapState([
+      'batchOptStatus'
+    ])
+  },
   watch: {
     'chart': {
       handler: function() {
@@ -102,11 +208,6 @@ export default {
       }
     }
   },
-  computed: {
-    ...mapState([
-      'batchOptStatus'
-    ])
-  },
   mounted() {
     this.init()
     this.initData()
diff --git a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
index 9721a4ff36..b9f97e75fc 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
@@ -1,12 +1,29 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="titleForm"
+        :model="titleForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="titleForm.show"
+            @change="changeTitleStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="showProperty('show') && titleForm.show">
-          <el-form-item v-show="showProperty('title')" v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
+          <el-form-item
+            v-show="showProperty('title')"
+            v-if="!batchOptStatus"
+            :label="$t('chart.title')"
+            class="form-item"
+          >
             <el-input
               v-model="titleForm.title"
               size="mini"
@@ -16,44 +33,129 @@
               @input="inputOnInput($event)"
             />
           </el-form-item>
-          <el-form-item v-show="showProperty('fontFamily')" :label="$t('chart.font_family')" class="form-item">
-            <el-select v-model="titleForm.fontFamily" :placeholder="$t('chart.font_family')" @change="changeTitleStyle('fontFamily')">
-              <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('fontFamily')"
+            :label="$t('chart.font_family')"
+            class="form-item"
+          >
+            <el-select
+              v-model="titleForm.fontFamily"
+              :placeholder="$t('chart.font_family')"
+              @change="changeTitleStyle('fontFamily')"
+            >
+              <el-option
+                v-for="option in fontFamily"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('fontSize')"
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="titleForm.fontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeTitleStyle('fontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('color')" />
+          <el-form-item
+            v-show="showProperty('color')"
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="titleForm.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeTitleStyle('color')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
-            <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
+          <el-form-item
+            v-show="showProperty('hPosition')"
+            :label="$t('chart.text_h_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="titleForm.hPosition"
+              size="mini"
+              @change="changeTitleStyle('hPosition')"
+            >
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('isItalic') || showProperty('isBolder') " :label="$t('chart.text_style')" class="form-item">
-            <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
-            <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('isItalic') || showProperty('isBolder') "
+            :label="$t('chart.text_style')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="titleForm.isItalic"
+              @change="changeTitleStyle('isItalic')"
+            >{{ $t('chart.italic') }}</el-checkbox>
+            <el-checkbox
+              v-model="titleForm.isBolder"
+              @change="changeTitleStyle('isBolder')"
+            >{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
-          <el-form-item v-show="showProperty('letterSpace')" :label="$t('chart.letter_space')" class="form-item">
-            <el-select v-model="titleForm.letterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
-              <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('letterSpace')"
+            :label="$t('chart.letter_space')"
+            class="form-item"
+          >
+            <el-select
+              v-model="titleForm.letterSpace"
+              :placeholder="$t('chart.quota_letter_space')"
+              @change="changeTitleStyle('letterSpace')"
+            >
+              <el-option
+                v-for="option in fontLetterSpace"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('fontShadow')" :label="$t('chart.font_shadow')" class="form-item">
-            <el-checkbox v-model="titleForm.fontShadow" @change="changeTitleStyle('fontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('fontShadow')"
+            :label="$t('chart.font_shadow')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="titleForm.fontShadow"
+              @change="changeTitleStyle('fontShadow')"
+            >{{ $t('chart.font_shadow') }}</el-checkbox>
           </el-form-item>
 
-          <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark')" class="form-item">
-            <el-checkbox v-model="titleForm.remarkShow" @change="changeTitleStyle('remarkShow')">{{ $t('chart.show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('remarkShow')"
+            :label="$t('chart.remark')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="titleForm.remarkShow"
+              @change="changeTitleStyle('remarkShow')"
+            >{{ $t('chart.show') }}</el-checkbox>
           </el-form-item>
           <span v-show="titleForm.remarkShow">
-            <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_edit')" class="form-item">
+            <el-form-item
+              v-show="showProperty('remarkShow')"
+              :label="$t('chart.remark_edit')"
+              class="form-item"
+            >
               <el-button
                 :title="$t('chart.edit')"
                 icon="el-icon-edit"
@@ -62,8 +164,17 @@
                 @click="editRemark"
               />
             </el-form-item>
-            <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_bg_color')" class="form-item">
-              <el-color-picker v-model="titleForm.remarkBackgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('remarkBackgroundColor')" />
+            <el-form-item
+              v-show="showProperty('remarkShow')"
+              :label="$t('chart.remark_bg_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="titleForm.remarkBackgroundColor"
+                class="color-picker-style"
+                :predefine="predefineColors"
+                @change="changeTitleStyle('remarkBackgroundColor')"
+              />
             </el-form-item>
           </span>
         </div>
@@ -81,10 +192,23 @@
       class="dialog-css"
       append-to-body
     >
-      <remark-editor :remark="titleForm.remark" @onRemarkChange="onRemarkChange" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeRemark">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="changeRemark">{{ $t('chart.confirm') }}</el-button>
+      <remark-editor
+        :remark="titleForm.remark"
+        @onRemarkChange="onRemarkChange"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeRemark"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="changeRemark"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
   </div>
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index f0882b1544..3ba18bca48 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -1,26 +1,76 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="axisForm"
+        :model="axisForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="axisForm.show"
+            @change="changeXAxisStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="axisForm.show">
-          <el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle('position')">
+          <el-form-item
+            v-show="showProperty('position')"
+            :label="$t('chart.position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="axisForm.position"
+              size="mini"
+              @change="changeXAxisStyle('position')"
+            >
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle('name')" />
+          <el-form-item
+            v-show="showProperty('name')"
+            :label="$t('chart.name')"
+            class="form-item"
+          >
+            <el-input
+              v-model="axisForm.name"
+              size="mini"
+              @blur="changeXAxisStyle('name')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle('nameTextStyle')" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="axisForm.nameTextStyle.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeXAxisStyle('nameTextStyle')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle('nameTextStyle')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="axisForm.nameTextStyle.fontSize"
+              :placeholder="$t('chart.axis_name_fontsize')"
+              @change="changeXAxisStyle('nameTextStyle')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
           <span v-show="showProperty('axisValue')">
@@ -29,54 +79,122 @@
               <span slot="label">
                 <span class="span-box">
                   <span>{{ $t('chart.axis_value') }}</span>
-                  <el-tooltip class="item" effect="dark" placement="bottom">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    placement="bottom"
+                  >
                     <div slot="content">
                       最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
                       <br>
                       请确保填写数值能正确计算，否则将无法正常显示轴值。
                     </div>
-                    <i class="el-icon-info" style="cursor: pointer;" />
+                    <i
+                      class="el-icon-info"
+                      style="cursor: pointer;"
+                    />
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox
+                v-model="axisForm.axisValue.auto"
+                @change="changeXAxisStyle('axisValue')"
+              >{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
-              <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_min')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.min"
+                  @blur="changeXAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_max')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.max"
+                  @blur="changeXAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_split')" class="form-item">
+              <el-form-item
+                :label="$t('chart.axis_value_split')"
+                class="form-item"
+              >
                 <span slot="label">
                   <span class="span-box">
                     <span>{{ $t('chart.axis_value_split_space') }}</span>
-                    <el-tooltip class="item" effect="dark" placement="bottom">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      placement="bottom"
+                    >
                       <div slot="content">
                         间隔表示两个刻度之间的单位长度。
                       </div>
-                      <i class="el-icon-info" style="cursor: pointer;" />
+                      <i
+                        class="el-icon-info"
+                        style="cursor: pointer;"
+                      />
                     </el-tooltip>
                   </span>
                 </span>
-                <el-input v-model="axisForm.axisValue.split" @blur="changeXAxisStyle('axisValue')" />
+                <el-input
+                  v-model="axisForm.axisValue.split"
+                  @blur="changeXAxisStyle('axisValue')"
+                />
               </el-form-item>
             </span>
           </span>
           <el-divider v-if="showProperty('splitLine')" />
-          <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('splitLine')"
+            :label="$t('chart.axis_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.splitLine.show"
+              @change="changeXAxisStyle('splitLine')"
+            >{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="showProperty('splitLine') && axisForm.splitLine.show">
-            <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('splitLine')" />
+            <el-form-item
+              :label="$t('chart.axis_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.splitLine.lineStyle.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeXAxisStyle('splitLine')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle('splitLine')" />
+            <el-form-item
+              :label="$t('chart.axis_width')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.splitLine.lineStyle.width"
+                :min="1"
+                :max="10"
+                show-input
+                :show-input-controls="false"
+                input-size="mini"
+                @change="changeXAxisStyle('splitLine')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_type')" class="form-item">
-              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle('splitLine')">
+            <el-form-item
+              :label="$t('chart.axis_type')"
+              class="form-item"
+            >
+              <el-radio-group
+                v-model="axisForm.splitLine.lineStyle.type"
+                size="mini"
+                @change="changeXAxisStyle('splitLine')"
+              >
                 <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
                 <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
                 <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
@@ -84,51 +202,149 @@
             </el-form-item>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
-          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('axisLabel')"
+            :label="$t('chart.axis_label_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.axisLabel.show"
+              @change="changeXAxisStyle('axisLabel')"
+            >{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
-            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('axisLabel')" />
+            <el-form-item
+              :label="$t('chart.axis_label_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.axisLabel.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeXAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle('axisLabel')" />
+            <el-form-item
+              :label="$t('chart.axis_label_rotate')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.axisLabel.rotate"
+                show-input
+                :show-input-controls="false"
+                :min="-90"
+                :max="90"
+                input-size="mini"
+                @change="changeXAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle('axisLabel')">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            <el-form-item
+              :label="$t('chart.axis_label_fontsize')"
+              class="form-item"
+            >
+              <el-select
+                v-model="axisForm.axisLabel.fontSize"
+                :placeholder="$t('chart.axis_label_fontsize')"
+                @change="changeXAxisStyle('axisLabel')"
+              >
+                <el-option
+                  v-for="option in fontSize"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
               </el-select>
             </el-form-item>
 
             <span v-show="chart.type && chart.type.includes('horizontal')">
-              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeXAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+              <el-form-item
+                :label="$t('chart.value_formatter_type')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.type"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="type in typeList"
+                    :key="type.value"
+                    :label="$t('chart.' + type.name)"
+                    :value="type.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
-                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeXAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'auto'"
+                :label="$t('chart.value_formatter_decimal_count')"
+                class="form-item"
+              >
+                <el-input-number
+                  v-model="axisForm.axisLabelFormatter.decimalCount"
+                  :precision="0"
+                  :min="0"
+                  :max="10"
+                  size="mini"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeXAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'percent'"
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  size="mini"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="item in unitList"
+                    :key="item.value"
+                    :label="$t('chart.' + item.name)"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
-                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeXAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisLabelFormatter.suffix"
+                  size="mini"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
-                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeXAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_thousand_separator')"
+                class="form-item"
+              >
+                <el-checkbox
+                  v-model="axisForm.axisLabelFormatter.thousandSeparator"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
             </span>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
-          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
-            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle('axisLabel')" />
+          <el-form-item
+            v-show="showProperty('axisLabel')"
+            :label="$t('chart.content_formatter')"
+            class="form-item"
+          >
+            <el-input
+              v-model="axisForm.axisLabel.formatter"
+              type="textarea"
+              :autosize="{ minRows: 4, maxRows: 4}"
+              @blur="changeXAxisStyle('axisLabel')"
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
index ca8088bc7e..e65026458b 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
@@ -1,26 +1,76 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="axisForm"
+        :model="axisForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="axisForm.show"
+            @change="changeXAxisStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="axisForm.show">
-          <el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle('position')">
+          <el-form-item
+            v-show="showProperty('position')"
+            :label="$t('chart.position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="axisForm.position"
+              size="mini"
+              @change="changeXAxisStyle('position')"
+            >
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle('name')" />
+          <el-form-item
+            v-show="showProperty('name')"
+            :label="$t('chart.name')"
+            class="form-item"
+          >
+            <el-input
+              v-model="axisForm.name"
+              size="mini"
+              @blur="changeXAxisStyle('name')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle('nameTextStyle')" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="axisForm.nameTextStyle.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeXAxisStyle('nameTextStyle')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle('nameTextStyle')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="axisForm.nameTextStyle.fontSize"
+              :placeholder="$t('chart.axis_name_fontsize')"
+              @change="changeXAxisStyle('nameTextStyle')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
           <span v-show="showProperty('axisValue')">
@@ -29,93 +79,243 @@
               <span slot="label">
                 <span class="span-box">
                   <span>{{ $t('chart.axis_value') }}</span>
-                  <el-tooltip class="item" effect="dark" placement="bottom">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    placement="bottom"
+                  >
                     <div slot="content">
                       最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
                       <br>
                       请确保填写数值能正确计算，否则将无法正常显示轴值。
                     </div>
-                    <i class="el-icon-info" style="cursor: pointer;" />
+                    <i
+                      class="el-icon-info"
+                      style="cursor: pointer;"
+                    />
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox
+                v-model="axisForm.axisValue.auto"
+                @change="changeXAxisStyle('axisValue')"
+              >{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
-              <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_min')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.min"
+                  @blur="changeXAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_max')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.max"
+                  @blur="changeXAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
+              <el-form-item
+                :label="$t('chart.axis_value_split_count')"
+                class="form-item"
+              >
                 <span slot="label">
                   <span class="span-box">
                     <span>{{ $t('chart.axis_value_split_count') }}</span>
-                    <el-tooltip class="item" effect="dark" placement="bottom">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      placement="bottom"
+                    >
                       <div slot="content">
                         期望的坐标轴刻度数量，非最终结果。
                       </div>
-                      <i class="el-icon-info" style="cursor: pointer;" />
+                      <i
+                        class="el-icon-info"
+                        style="cursor: pointer;"
+                      />
                     </el-tooltip>
                   </span>
                 </span>
-                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeXAxisStyle('axisValue')" />
+                <el-input
+                  v-model="axisForm.axisValue.splitCount"
+                  @blur="changeXAxisStyle('axisValue')"
+                />
               </el-form-item>
             </span>
           </span>
           <el-divider v-if="showProperty('splitLine')" />
-          <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('splitLine')"
+            :label="$t('chart.axis_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.splitLine.show"
+              @change="changeXAxisStyle('splitLine')"
+            >{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="showProperty('splitLine') && axisForm.splitLine.show">
-            <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('splitLine')" />
+            <el-form-item
+              :label="$t('chart.axis_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.splitLine.lineStyle.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeXAxisStyle('splitLine')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle('splitLine')" />
+            <el-form-item
+              :label="$t('chart.axis_width')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.splitLine.lineStyle.width"
+                :min="1"
+                :max="10"
+                show-input
+                :show-input-controls="false"
+                input-size="mini"
+                @change="changeXAxisStyle('splitLine')"
+              />
             </el-form-item>
           </span>
           <el-divider v-if="showProperty('axisForm')" />
-          <el-form-item v-show="showProperty('axisForm')" :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('axisForm')"
+            :label="$t('chart.axis_label_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.axisLabel.show"
+              @change="changeXAxisStyle('axisLabel')"
+            >{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
-            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('axisLabel')" />
+            <el-form-item
+              :label="$t('chart.axis_label_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.axisLabel.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeXAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle('axisLabel')" />
+            <el-form-item
+              :label="$t('chart.axis_label_rotate')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.axisLabel.rotate"
+                show-input
+                :show-input-controls="false"
+                :min="-90"
+                :max="90"
+                input-size="mini"
+                @change="changeXAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle('axisLabel')">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            <el-form-item
+              :label="$t('chart.axis_label_fontsize')"
+              class="form-item"
+            >
+              <el-select
+                v-model="axisForm.axisLabel.fontSize"
+                :placeholder="$t('chart.axis_label_fontsize')"
+                @change="changeXAxisStyle('axisLabel')"
+              >
+                <el-option
+                  v-for="option in fontSize"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
               </el-select>
             </el-form-item>
 
             <span v-show="chart.type && chart.type.includes('horizontal')">
-              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeXAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+              <el-form-item
+                :label="$t('chart.value_formatter_type')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.type"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="type in typeList"
+                    :key="type.value"
+                    :label="$t('chart.' + type.name)"
+                    :value="type.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
-                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeXAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'auto'"
+                :label="$t('chart.value_formatter_decimal_count')"
+                class="form-item"
+              >
+                <el-input-number
+                  v-model="axisForm.axisLabelFormatter.decimalCount"
+                  :precision="0"
+                  :min="0"
+                  :max="10"
+                  size="mini"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeXAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'percent'"
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  size="mini"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="item in unitList"
+                    :key="item.value"
+                    :label="$t('chart.' + item.name)"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
-                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeXAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisLabelFormatter.suffix"
+                  size="mini"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
-                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeXAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_thousand_separator')"
+                class="form-item"
+              >
+                <el-checkbox
+                  v-model="axisForm.axisLabelFormatter.thousandSeparator"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
             </span>
           </span>
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
index a59d0f859c..d3d1c07d5e 100644
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
@@ -1,82 +1,200 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')"  :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="axisForm"
+        :model="axisForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="axisForm.show"
+            @change="changeYAxisStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="showProperty('show') && axisForm.show">
-          <el-form-item   :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
+          <el-form-item
+            :label="$t('chart.position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="axisForm.position"
+              size="mini"
+              @change="changeYAxisStyle('position')"
+            >
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
+          <el-form-item
+            :label="$t('chart.name')"
+            class="form-item"
+          >
+            <el-input
+              v-model="axisForm.name"
+              size="mini"
+              @blur="changeYAxisStyle('name')"
+            />
           </el-form-item>
-          <el-form-item  :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
+          <el-form-item
+            :label="$t('chart.axis_name_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="axisForm.nameTextStyle.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeYAxisStyle('nameTextStyle')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')"  :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="axisForm.nameTextStyle.fontSize"
+              :placeholder="$t('chart.axis_name_fontsize')"
+              @change="changeYAxisStyle('nameTextStyle')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
           <span v-show="showProperty('axisValue')">
             <el-divider />
-            <el-form-item  class="form-item">
+            <el-form-item class="form-item">
               <span slot="label">
                 <span class="span-box">
                   <span>{{ $t('chart.axis_value') }}</span>
-                  <el-tooltip class="item" effect="dark" placement="bottom">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    placement="bottom"
+                  >
                     <div slot="content">
                       最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
                       <br>
                       请确保填写数值能正确计算，否则将无法正常显示轴值。
                     </div>
-                    <i class="el-icon-info" style="cursor: pointer;" />
+                    <i
+                      class="el-icon-info"
+                      style="cursor: pointer;"
+                    />
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox
+                v-model="axisForm.axisValue.auto"
+                @change="changeYAxisStyle('axisValue')"
+              >{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
-              <el-form-item  :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_min')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.min"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item  :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_max')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.max"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item  :label="$t('chart.axis_value_split')" class="form-item">
+              <el-form-item
+                :label="$t('chart.axis_value_split')"
+                class="form-item"
+              >
                 <span slot="label">
                   <span class="span-box">
                     <span>{{ $t('chart.axis_value_split_space') }}</span>
-                    <el-tooltip class="item" effect="dark" placement="bottom">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      placement="bottom"
+                    >
                       <div slot="content">
                         间隔表示两个刻度之间的单位长度。
                       </div>
-                      <i class="el-icon-info" style="cursor: pointer;" />
+                      <i
+                        class="el-icon-info"
+                        style="cursor: pointer;"
+                      />
                     </el-tooltip>
                   </span>
                 </span>
-                <el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle('axisValue')" />
+                <el-input
+                  v-model="axisForm.axisValue.split"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
             </span>
           </span>
-          <el-divider v-if="showProperty('splitLine')"   />
-          <el-form-item v-show="showProperty('splitLine')"  :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-divider v-if="showProperty('splitLine')" />
+          <el-form-item
+            v-show="showProperty('splitLine')"
+            :label="$t('chart.axis_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.splitLine.show"
+              @change="changeYAxisStyle('splitLine')"
+            >{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="axisForm.splitLine.show">
-            <el-form-item v-show="showProperty('splitLine')"  :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
+            <el-form-item
+              v-show="showProperty('splitLine')"
+              :label="$t('chart.axis_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.splitLine.lineStyle.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('splitLine')"
+              />
             </el-form-item>
-            <el-form-item v-show="showProperty('splitLine')"  :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
+            <el-form-item
+              v-show="showProperty('splitLine')"
+              :label="$t('chart.axis_width')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.splitLine.lineStyle.width"
+                :min="1"
+                :max="10"
+                show-input
+                :show-input-controls="false"
+                input-size="mini"
+                @change="changeYAxisStyle('splitLine')"
+              />
             </el-form-item>
-            <el-form-item v-show="showProperty('splitLine')"  :label="$t('chart.axis_type')" class="form-item">
-              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle('splitLine')">
+            <el-form-item
+              v-show="showProperty('splitLine')"
+              :label="$t('chart.axis_type')"
+              class="form-item"
+            >
+              <el-radio-group
+                v-model="axisForm.splitLine.lineStyle.type"
+                size="mini"
+                @change="changeYAxisStyle('splitLine')"
+              >
                 <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
                 <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
                 <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
@@ -84,45 +202,134 @@
             </el-form-item>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
-          <el-form-item v-show="showProperty('axisLabel')"  :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('axisLabel')"
+            :label="$t('chart.axis_label_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.axisLabel.show"
+              @change="changeYAxisStyle('axisLabel')"
+            >{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
-            <el-form-item  :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
+            <el-form-item
+              :label="$t('chart.axis_label_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.axisLabel.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
+            <el-form-item
+              :label="$t('chart.axis_label_rotate')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.axisLabel.rotate"
+                show-input
+                :show-input-controls="false"
+                :min="-90"
+                :max="90"
+                input-size="mini"
+                @change="changeYAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item  :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            <el-form-item
+              :label="$t('chart.axis_label_fontsize')"
+              class="form-item"
+            >
+              <el-select
+                v-model="axisForm.axisLabel.fontSize"
+                :placeholder="$t('chart.axis_label_fontsize')"
+                @change="changeYAxisStyle('axisLabel')"
+              >
+                <el-option
+                  v-for="option in fontSize"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
               </el-select>
             </el-form-item>
 
             <span v-show="chart.type && !chart.type.includes('horizontal')">
-              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+              <el-form-item
+                :label="$t('chart.value_formatter_type')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.type"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="type in typeList"
+                    :key="type.value"
+                    :label="$t('chart.' + type.name)"
+                    :value="type.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
-                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'auto'"
+                :label="$t('chart.value_formatter_decimal_count')"
+                class="form-item"
+              >
+                <el-input-number
+                  v-model="axisForm.axisLabelFormatter.decimalCount"
+                  :precision="0"
+                  :min="0"
+                  :max="10"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'percent'"
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="item in unitList"
+                    :key="item.value"
+                    :label="$t('chart.' + item.name)"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
-                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisLabelFormatter.suffix"
+                  size="mini"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
-                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_thousand_separator')"
+                class="form-item"
+              >
+                <el-checkbox
+                  v-model="axisForm.axisLabelFormatter.thousandSeparator"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
             </span>
           </span>
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
index a8e2ff1fa3..ec7908df5c 100644
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
@@ -1,26 +1,76 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="axisForm"
+        :model="axisForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="axisForm.show"
+            @change="changeYAxisStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="axisForm.show">
-          <el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
+          <el-form-item
+            v-show="showProperty('position')"
+            :label="$t('chart.position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="axisForm.position"
+              size="mini"
+              @change="changeYAxisStyle('position')"
+            >
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
+          <el-form-item
+            v-show="showProperty('name')"
+            :label="$t('chart.name')"
+            class="form-item"
+          >
+            <el-input
+              v-model="axisForm.name"
+              size="mini"
+              @blur="changeYAxisStyle('name')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="axisForm.nameTextStyle.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeYAxisStyle('nameTextStyle')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="axisForm.nameTextStyle.fontSize"
+              :placeholder="$t('chart.axis_name_fontsize')"
+              @change="changeYAxisStyle('nameTextStyle')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
           <span v-show="showProperty('axisValue')">
@@ -29,93 +79,243 @@
               <span slot="label">
                 <span class="span-box">
                   <span>{{ $t('chart.axis_value') }}</span>
-                  <el-tooltip class="item" effect="dark" placement="bottom">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    placement="bottom"
+                  >
                     <div slot="content">
                       最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
                       <br>
                       请确保填写数值能正确计算，否则将无法正常显示轴值。
                     </div>
-                    <i class="el-icon-info" style="cursor: pointer;" />
+                    <i
+                      class="el-icon-info"
+                      style="cursor: pointer;"
+                    />
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox
+                v-model="axisForm.axisValue.auto"
+                @change="changeYAxisStyle('axisValue')"
+              >{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
-              <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_min')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.min"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_max')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.max"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
+              <el-form-item
+                :label="$t('chart.axis_value_split_count')"
+                class="form-item"
+              >
                 <span slot="label">
                   <span class="span-box">
                     <span>{{ $t('chart.axis_value_split_count') }}</span>
-                    <el-tooltip class="item" effect="dark" placement="bottom">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      placement="bottom"
+                    >
                       <div slot="content">
                         期望的坐标轴刻度数量，非最终结果。
                       </div>
-                      <i class="el-icon-info" style="cursor: pointer;" />
+                      <i
+                        class="el-icon-info"
+                        style="cursor: pointer;"
+                      />
                     </el-tooltip>
                   </span>
                 </span>
-                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle('axisValue')" />
+                <el-input
+                  v-model="axisForm.axisValue.splitCount"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
             </span>
           </span>
           <el-divider v-if="showProperty('splitLine')" />
-          <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('splitLine')"
+            :label="$t('chart.axis_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.splitLine.show"
+              @change="changeYAxisStyle('splitLine')"
+            >{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="showProperty('splitLine') && axisForm.splitLine.show">
-            <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
+            <el-form-item
+              :label="$t('chart.axis_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.splitLine.lineStyle.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('splitLine')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('lineStyle')" />
+            <el-form-item
+              :label="$t('chart.axis_width')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.splitLine.lineStyle.width"
+                :min="1"
+                :max="10"
+                show-input
+                :show-input-controls="false"
+                input-size="mini"
+                @change="changeYAxisStyle('lineStyle')"
+              />
             </el-form-item>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
-          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('axisLabel')"
+            :label="$t('chart.axis_label_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.axisLabel.show"
+              @change="changeYAxisStyle('axisLabel')"
+            >{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
-            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
+            <el-form-item
+              :label="$t('chart.axis_label_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.axisLabel.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
+            <el-form-item
+              :label="$t('chart.axis_label_rotate')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.axisLabel.rotate"
+                show-input
+                :show-input-controls="false"
+                :min="-90"
+                :max="90"
+                input-size="mini"
+                @change="changeYAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            <el-form-item
+              :label="$t('chart.axis_label_fontsize')"
+              class="form-item"
+            >
+              <el-select
+                v-model="axisForm.axisLabel.fontSize"
+                :placeholder="$t('chart.axis_label_fontsize')"
+                @change="changeYAxisStyle('axisLabel')"
+              >
+                <el-option
+                  v-for="option in fontSize"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
               </el-select>
             </el-form-item>
 
             <span v-show="chart.type && !chart.type.includes('horizontal') && chart.type !== 'waterfall'">
-              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+              <el-form-item
+                :label="$t('chart.value_formatter_type')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.type"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="type in typeList"
+                    :key="type.value"
+                    :label="$t('chart.' + type.name)"
+                    :value="type.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
-                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'auto'"
+                :label="$t('chart.value_formatter_decimal_count')"
+                class="form-item"
+              >
+                <el-input-number
+                  v-model="axisForm.axisLabelFormatter.decimalCount"
+                  :precision="0"
+                  :min="0"
+                  :max="10"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'percent'"
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="item in unitList"
+                    :key="item.value"
+                    :label="$t('chart.' + item.name)"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
-                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisLabelFormatter.suffix"
+                  size="mini"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
-                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_thousand_separator')"
+                class="form-item"
+              >
+                <el-checkbox
+                  v-model="axisForm.axisLabelFormatter.thousandSeparator"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
             </span>
           </span>
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index 834f6cef73..c527e20d81 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -1,26 +1,76 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="axisForm"
+        :model="axisForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="axisForm.show"
+            @change="changeYAxisStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="showProperty('show') && axisForm.show">
-          <el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
+          <el-form-item
+            v-show="showProperty('position')"
+            :label="$t('chart.position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="axisForm.position"
+              size="mini"
+              @change="changeYAxisStyle('position')"
+            >
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
+          <el-form-item
+            v-show="showProperty('name')"
+            :label="$t('chart.name')"
+            class="form-item"
+          >
+            <el-input
+              v-model="axisForm.name"
+              size="mini"
+              @blur="changeYAxisStyle('name')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="axisForm.nameTextStyle.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeYAxisStyle('nameTextStyle')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="axisForm.nameTextStyle.fontSize"
+              :placeholder="$t('chart.axis_name_fontsize')"
+              @change="changeYAxisStyle('nameTextStyle')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
           <span v-show="showProperty('axisValue')">
@@ -29,54 +79,125 @@
               <span slot="label">
                 <span class="span-box">
                   <span>{{ $t('chart.axis_value') }}</span>
-                  <el-tooltip class="item" effect="dark" placement="bottom">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    placement="bottom"
+                  >
                     <div slot="content">
                       最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
                       <br>
                       请确保填写数值能正确计算，否则将无法正常显示轴值。
                     </div>
-                    <i class="el-icon-info" style="cursor: pointer;" />
+                    <i
+                      class="el-icon-info"
+                      style="cursor: pointer;"
+                    />
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox
+                v-model="axisForm.axisValue.auto"
+                @change="changeYAxisStyle('axisValue')"
+              >{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
-              <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_min')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.min"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_max')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.max"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_split')" class="form-item">
+              <el-form-item
+                :label="$t('chart.axis_value_split')"
+                class="form-item"
+              >
                 <span slot="label">
                   <span class="span-box">
                     <span>{{ $t('chart.axis_value_split_space') }}</span>
-                    <el-tooltip class="item" effect="dark" placement="bottom">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      placement="bottom"
+                    >
                       <div slot="content">
                         间隔表示两个刻度之间的单位长度。
                       </div>
-                      <i class="el-icon-info" style="cursor: pointer;" />
+                      <i
+                        class="el-icon-info"
+                        style="cursor: pointer;"
+                      />
                     </el-tooltip>
                   </span>
                 </span>
-                <el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle('axisValue')" />
+                <el-input
+                  v-model="axisForm.axisValue.split"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
             </span>
           </span>
           <el-divider v-if="showProperty('splitLine')" />
-          <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('splitLine')"
+            :label="$t('chart.axis_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.splitLine.show"
+              @change="changeYAxisStyle('splitLine')"
+            >{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="axisForm.splitLine.show">
-            <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
+            <el-form-item
+              v-show="showProperty('splitLine')"
+              :label="$t('chart.axis_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.splitLine.lineStyle.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('splitLine')"
+              />
             </el-form-item>
-            <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
+            <el-form-item
+              v-show="showProperty('splitLine')"
+              :label="$t('chart.axis_width')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.splitLine.lineStyle.width"
+                :min="1"
+                :max="10"
+                show-input
+                :show-input-controls="false"
+                input-size="mini"
+                @change="changeYAxisStyle('splitLine')"
+              />
             </el-form-item>
-            <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_type')" class="form-item">
-              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle('splitLine')">
+            <el-form-item
+              v-show="showProperty('splitLine')"
+              :label="$t('chart.axis_type')"
+              class="form-item"
+            >
+              <el-radio-group
+                v-model="axisForm.splitLine.lineStyle.type"
+                size="mini"
+                @change="changeYAxisStyle('splitLine')"
+              >
                 <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
                 <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
                 <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
@@ -84,45 +205,137 @@
             </el-form-item>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
-          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('axisLabel')"
+            :label="$t('chart.axis_label_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.axisLabel.show"
+              @change="changeYAxisStyle('axisLabel')"
+            >{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="axisForm.axisLabel.show">
-            <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
+            <el-form-item
+              v-show="showProperty('axisLabel')"
+              :label="$t('chart.axis_label_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.axisLabel.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
+            <el-form-item
+              v-show="showProperty('axisLabel')"
+              :label="$t('chart.axis_label_rotate')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.axisLabel.rotate"
+                show-input
+                :show-input-controls="false"
+                :min="-90"
+                :max="90"
+                input-size="mini"
+                @change="changeYAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            <el-form-item
+              v-show="showProperty('axisLabel')"
+              :label="$t('chart.axis_label_fontsize')"
+              class="form-item"
+            >
+              <el-select
+                v-model="axisForm.axisLabel.fontSize"
+                :placeholder="$t('chart.axis_label_fontsize')"
+                @change="changeYAxisStyle('axisLabel')"
+              >
+                <el-option
+                  v-for="option in fontSize"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
               </el-select>
             </el-form-item>
 
             <span v-show="chart.type && !chart.type.includes('horizontal')">
-              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+              <el-form-item
+                :label="$t('chart.value_formatter_type')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.type"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="type in typeList"
+                    :key="type.value"
+                    :label="$t('chart.' + type.name)"
+                    :value="type.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
-                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'auto'"
+                :label="$t('chart.value_formatter_decimal_count')"
+                class="form-item"
+              >
+                <el-input-number
+                  v-model="axisForm.axisLabelFormatter.decimalCount"
+                  :precision="0"
+                  :min="0"
+                  :max="10"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'percent'"
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="item in unitList"
+                    :key="item.value"
+                    :label="$t('chart.' + item.name)"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
-                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisLabelFormatter.suffix"
+                  size="mini"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
-                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_thousand_separator')"
+                class="form-item"
+              >
+                <el-checkbox
+                  v-model="axisForm.axisLabelFormatter.thousandSeparator"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
             </span>
           </span>
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
index d082c0a8ad..016cc2cade 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
@@ -1,26 +1,76 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="axisForm"
+        :model="axisForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="axisForm.show"
+            @change="changeYAxisStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="axisForm.show">
-          <el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
+          <el-form-item
+            v-show="showProperty('position')"
+            :label="$t('chart.position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="axisForm.position"
+              size="mini"
+              @change="changeYAxisStyle('position')"
+            >
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
+          <el-form-item
+            v-show="showProperty('name')"
+            :label="$t('chart.name')"
+            class="form-item"
+          >
+            <el-input
+              v-model="axisForm.name"
+              size="mini"
+              @blur="changeYAxisStyle('name')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="axisForm.nameTextStyle.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeYAxisStyle('nameTextStyle')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('nameTextStyle')"
+            :label="$t('chart.axis_name_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="axisForm.nameTextStyle.fontSize"
+              :placeholder="$t('chart.axis_name_fontsize')"
+              @change="changeYAxisStyle('nameTextStyle')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
           <span v-show="showProperty('axisValue')">
@@ -29,93 +79,240 @@
               <span slot="label">
                 <span class="span-box">
                   <span>{{ $t('chart.axis_value') }}</span>
-                  <el-tooltip class="item" effect="dark" placement="bottom">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    placement="bottom"
+                  >
                     <div slot="content">
                       最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
                       <br>
                       请确保填写数值能正确计算，否则将无法正常显示轴值。
                     </div>
-                    <i class="el-icon-info" style="cursor: pointer;" />
+                    <i
+                      class="el-icon-info"
+                      style="cursor: pointer;"
+                    />
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox
+                v-model="axisForm.axisValue.auto"
+                @change="changeYAxisStyle('axisValue')"
+              >{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
-              <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_min')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.min"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
+              <el-form-item
+                :label="$t('chart.axis_value_max')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.max"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
               <el-form-item class="form-item">
                 <span slot="label">
                   <span class="span-box">
                     <span>{{ $t('chart.axis_value_split_count') }}</span>
-                    <el-tooltip class="item" effect="dark" placement="bottom">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      placement="bottom"
+                    >
                       <div slot="content">
                         期望的坐标轴刻度数量，非最终结果。
                       </div>
-                      <i class="el-icon-info" style="cursor: pointer;" />
+                      <i
+                        class="el-icon-info"
+                        style="cursor: pointer;"
+                      />
                     </el-tooltip>
                   </span>
                 </span>
-                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle('axisValue')" />
+                <el-input
+                  v-model="axisForm.axisValue.splitCount"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
               </el-form-item>
             </span>
           </span>
           <el-divider v-if="showProperty('splitLine')" />
-          <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('splitLine')"
+            :label="$t('chart.axis_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.splitLine.show"
+              @change="changeYAxisStyle('splitLine')"
+            >{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="showProperty('splitLine') && axisForm.splitLine.show">
-            <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
+            <el-form-item
+              :label="$t('chart.axis_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.splitLine.lineStyle.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('splitLine')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
+            <el-form-item
+              :label="$t('chart.axis_width')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.splitLine.lineStyle.width"
+                :min="1"
+                :max="10"
+                show-input
+                :show-input-controls="false"
+                input-size="mini"
+                @change="changeYAxisStyle('splitLine')"
+              />
             </el-form-item>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
-          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('axisLabel')"
+            :label="$t('chart.axis_label_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.axisLabel.show"
+              @change="changeYAxisStyle('axisLabel')"
+            >{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
-            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
+            <el-form-item
+              :label="$t('chart.axis_label_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.axisLabel.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
+            <el-form-item
+              :label="$t('chart.axis_label_rotate')"
+              class="form-item form-item-slider"
+            >
+              <el-slider
+                v-model="axisForm.axisLabel.rotate"
+                show-input
+                :show-input-controls="false"
+                :min="-90"
+                :max="90"
+                input-size="mini"
+                @change="changeYAxisStyle('axisLabel')"
+              />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            <el-form-item
+              :label="$t('chart.axis_label_fontsize')"
+              class="form-item"
+            >
+              <el-select
+                v-model="axisForm.axisLabel.fontSize"
+                :placeholder="$t('chart.axis_label_fontsize')"
+                @change="changeYAxisStyle('axisLabel')"
+              >
+                <el-option
+                  v-for="option in fontSize"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
               </el-select>
             </el-form-item>
 
             <span v-show="chart.type && !chart.type.includes('horizontal') && chart.type !== 'waterfall'">
-              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+              <el-form-item
+                :label="$t('chart.value_formatter_type')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.type"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="type in typeList"
+                    :key="type.value"
+                    :label="$t('chart.' + type.name)"
+                    :value="type.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
-                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'auto'"
+                :label="$t('chart.value_formatter_decimal_count')"
+                class="form-item"
+              >
+                <el-input-number
+                  v-model="axisForm.axisLabelFormatter.decimalCount"
+                  :precision="0"
+                  :min="0"
+                  :max="10"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
-                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle('axisLabelFormatter')">
-                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+              <el-form-item
+                v-show="axisForm.axisLabelFormatter.type !== 'percent'"
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="item in unitList"
+                    :key="item.value"
+                    :label="$t('chart.' + item.name)"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
-                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisLabelFormatter.suffix"
+                  size="mini"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
 
-              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
-                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle('axisLabelFormatter')" />
+              <el-form-item
+                :label="$t('chart.value_formatter_thousand_separator')"
+                class="form-item"
+              >
+                <el-checkbox
+                  v-model="axisForm.axisLabelFormatter.thousandSeparator"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
               </el-form-item>
             </span>
           </span>
diff --git a/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue b/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
index 4902cbbfde..b9bf626e5f 100644
--- a/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
+++ b/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
@@ -68,15 +68,13 @@ export default {
       }
     }
   },
-  
+
   created() {
-    if(!this.showTable) {
+    if (!this.showTable) {
       this.init.plugins = this.init.plugins.replace(' table', '')
-      
     }
-    if(!this.showMedia) {
+    if (!this.showMedia) {
       this.init.plugins = this.init.plugins.replace(' media', '')
-      
     }
   },
   mounted() {
diff --git a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
index a7d2615426..2a473e317b 100644
--- a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
+++ b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
@@ -1,28 +1,81 @@
 <template>
   <span style="position: relative;display: inline-block;">
-    <i class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
+    <i
+      class="el-icon-arrow-down el-icon-delete"
+      style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;"
+      @click="removeItem"
+    />
+    <el-dropdown
+      trigger="click"
+      size="mini"
+      @command="clickItem"
+    >
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="tagType">
+        <el-tag
+          size="small"
+          class="item-axis"
+          :type="tagType"
+        >
           <span style="float: left">
-            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
-            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
-            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+            <svg-icon
+              v-if="item.deType === 0"
+              icon-class="field_text"
+              class="field-icon-text"
+            />
+            <svg-icon
+              v-if="item.deType === 1"
+              icon-class="field_time"
+              class="field-icon-time"
+            />
+            <svg-icon
+              v-if="item.deType === 2 || item.deType === 3"
+              icon-class="field_value"
+              class="field-icon-value"
+            />
+            <svg-icon
+              v-if="item.deType === 5"
+              icon-class="field_location"
+              class="field-icon-location"
+            />
+            <svg-icon
+              v-if="item.sort === 'asc'"
+              icon-class="sort-asc"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="item.sort === 'desc'"
+              icon-class="sort-desc"
+              class-name="field-icon-sort"
+            />
           </span>
-          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <span
+            class="item-span-style"
+            :title="item.name"
+          >{{ item.name }}</span>
           <field-error-tips v-if="tagType === 'danger'" />
-          <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
-          <span v-if="item.deType === 1" class="summary-span">
+          <span
+            v-if="item.summary"
+            class="summary-span"
+          >{{ $t('chart.'+item.summary) }}</span>
+          <span
+            v-if="item.deType === 1"
+            class="summary-span"
+          >
             {{ $t('chart.' + item.dateStyle) }}
           </span>
-          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+          <i
+            class="el-icon-arrow-down el-icon--right"
+            style="position: absolute;top: 6px;right: 10px;"
+          />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item v-show="conf && conf.includes('summary')">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="summary">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="summary"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-notebook-2" />
@@ -32,19 +85,45 @@
                 <i class="el-icon-arrow-right el-icon--right" />
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-if="item.id === 'count' || item.deType === 0 || item.deType === 1" :command="beforeSummary('count')">{{ $t('chart.count') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('stddev_pop')">{{ $t('chart.stddev_pop') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('var_pop')">{{ $t('chart.var_pop') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id === 'count' || item.deType === 0 || item.deType === 1"
+                  :command="beforeSummary('count')"
+                >{{ $t('chart.count') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1"
+                  :command="beforeSummary('sum')"
+                >{{ $t('chart.sum') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1"
+                  :command="beforeSummary('avg')"
+                >{{ $t('chart.avg') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1"
+                  :command="beforeSummary('max')"
+                >{{ $t('chart.max') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1"
+                  :command="beforeSummary('min')"
+                >{{ $t('chart.min') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1"
+                  :command="beforeSummary('stddev_pop')"
+                >{{ $t('chart.stddev_pop') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1"
+                  :command="beforeSummary('var_pop')"
+                >{{ $t('chart.var_pop') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
 
           <el-dropdown-item v-show="item.deType === 1">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="dateStyle"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-c-scale-to-original" />
@@ -64,7 +143,12 @@
             </el-dropdown>
           </el-dropdown-item>
           <el-dropdown-item v-show="item.deType === 1">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="datePattern">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="datePattern"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-timer" />
@@ -80,8 +164,16 @@
             </el-dropdown>
           </el-dropdown-item>
 
-          <el-dropdown-item v-show="conf && conf.includes('sort')" :divided="item.deType === 1">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
+          <el-dropdown-item
+            v-show="conf && conf.includes('sort')"
+            :divided="item.deType === 1"
+          >
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="sort"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-sort" />
@@ -94,11 +186,18 @@
                 <el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
-                <el-dropdown-item v-show="!item.chartId" :command="beforeSort('custom_sort')">{{ $t('chart.custom_sort') }}...</el-dropdown-item>
+                <el-dropdown-item
+                  v-show="!item.chartId"
+                  :command="beforeSort('custom_sort')"
+                >{{ $t('chart.custom_sort') }}...</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+          <el-dropdown-item
+            icon="el-icon-delete"
+            divided
+            :command="beforeClickItem('remove')"
+          >
             <span>{{ $t('chart.delete') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
diff --git a/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue b/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
index fb2b85c5cd..a3a9218d5b 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
@@ -1,27 +1,77 @@
 <template>
   <span style="position: relative;display: inline-block;">
-    <i class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
+    <i
+      class="el-icon-arrow-down el-icon-delete"
+      style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;"
+      @click="removeItem"
+    />
+    <el-dropdown
+      trigger="click"
+      size="mini"
+      @command="clickItem"
+    >
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="tagType">
+        <el-tag
+          size="small"
+          class="item-axis"
+          :type="tagType"
+        >
           <span style="float: left">
-            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
-            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
-            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+            <svg-icon
+              v-if="item.deType === 0"
+              icon-class="field_text"
+              class="field-icon-text"
+            />
+            <svg-icon
+              v-if="item.deType === 1"
+              icon-class="field_time"
+              class="field-icon-time"
+            />
+            <svg-icon
+              v-if="item.deType === 2 || item.deType === 3"
+              icon-class="field_value"
+              class="field-icon-value"
+            />
+            <svg-icon
+              v-if="item.deType === 5"
+              icon-class="field_location"
+              class="field-icon-location"
+            />
+            <svg-icon
+              v-if="item.sort === 'asc'"
+              icon-class="sort-asc"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="item.sort === 'desc'"
+              icon-class="sort-desc"
+              class-name="field-icon-sort"
+            />
           </span>
-          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <span
+            class="item-span-style"
+            :title="item.name"
+          >{{ item.name }}</span>
           <field-error-tips v-if="tagType === 'danger'" />
-          <span v-if="false && item.deType === 1" class="summary-span">
+          <span
+            v-if="false && item.deType === 1"
+            class="summary-span"
+          >
             {{ $t('chart.' + item.dateStyle) }}
           </span>
-          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+          <i
+            class="el-icon-arrow-down el-icon--right"
+            style="position: absolute;top: 6px;right: 10px;"
+          />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="sort"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-sort" />
@@ -38,8 +88,16 @@
             </el-dropdown>
           </el-dropdown-item>
 
-          <el-dropdown-item v-show="item.deType === 1" divided>
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">
+          <el-dropdown-item
+            v-show="item.deType === 1"
+            divided
+          >
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="dateStyle"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-c-scale-to-original" />
@@ -52,14 +110,22 @@
                 <el-dropdown-item :command="beforeDateStyle('y')">{{ $t('chart.y') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M')">{{ $t('chart.y_M') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M_d')">{{ $t('chart.y_M_d') }}</el-dropdown-item>
-                <el-dropdown-item :command="beforeDateStyle('H_m_s')" divided>{{ $t('chart.H_m_s') }}</el-dropdown-item>
+                <el-dropdown-item
+                  :command="beforeDateStyle('H_m_s')"
+                  divided
+                >{{ $t('chart.H_m_s') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M_d_H_m')">{{ $t('chart.y_M_d_H_m') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M_d_H_m_s')">{{ $t('chart.y_M_d_H_m_s') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
           <el-dropdown-item v-show="item.deType === 1">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="datePattern">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="datePattern"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-timer" />
@@ -75,10 +141,18 @@
             </el-dropdown>
           </el-dropdown-item>
 
-          <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
+          <el-dropdown-item
+            icon="el-icon-edit-outline"
+            divided
+            :command="beforeClickItem('rename')"
+          >
             <span>{{ $t('chart.show_name_set') }}</span>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+          <el-dropdown-item
+            icon="el-icon-delete"
+            divided
+            :command="beforeClickItem('remove')"
+          >
             <span>{{ $t('chart.delete') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
diff --git a/frontend/src/views/chart/components/drag-item/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
index 7d365dce4a..3c32926d1f 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
@@ -1,28 +1,82 @@
 <template>
   <span style="position: relative;display: inline-block;">
-    <i class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
+    <i
+      class="el-icon-arrow-down el-icon-delete"
+      style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;"
+      @click="removeItem"
+    />
+    <el-dropdown
+      trigger="click"
+      size="mini"
+      @command="clickItem"
+    >
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="tagType">
+        <el-tag
+          size="small"
+          class="item-axis"
+          :type="tagType"
+        >
           <span style="float: left">
-            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
-            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
-            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
-            <svg-icon v-if="item.sort === 'custom_sort'" icon-class="custom_sort" class-name="field-icon-sort" />
+            <svg-icon
+              v-if="item.deType === 0"
+              icon-class="field_text"
+              class="field-icon-text"
+            />
+            <svg-icon
+              v-if="item.deType === 1"
+              icon-class="field_time"
+              class="field-icon-time"
+            />
+            <svg-icon
+              v-if="item.deType === 2 || item.deType === 3"
+              icon-class="field_value"
+              class="field-icon-value"
+            />
+            <svg-icon
+              v-if="item.deType === 5"
+              icon-class="field_location"
+              class="field-icon-location"
+            />
+            <svg-icon
+              v-if="item.sort === 'asc'"
+              icon-class="sort-asc"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="item.sort === 'desc'"
+              icon-class="sort-desc"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="item.sort === 'custom_sort'"
+              icon-class="custom_sort"
+              class-name="field-icon-sort"
+            />
           </span>
-          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <span
+            class="item-span-style"
+            :title="item.name"
+          >{{ item.name }}</span>
           <field-error-tips v-if="tagType === 'danger'" />
-          <span v-if="false && item.deType === 1" class="summary-span">
+          <span
+            v-if="false && item.deType === 1"
+            class="summary-span"
+          >
             {{ $t('chart.' + item.dateStyle) }}
           </span>
-          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+          <i
+            class="el-icon-arrow-down el-icon--right"
+            style="position: absolute;top: 6px;right: 10px;"
+          />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="sort"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-sort" />
@@ -35,12 +89,23 @@
                 <el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
-                <el-dropdown-item v-show="!item.chartId && (item.deType === 0 || item.deType === 5)" :command="beforeSort('custom_sort')">{{ $t('chart.custom_sort') }}...</el-dropdown-item>
+                <el-dropdown-item
+                  v-show="!item.chartId && (item.deType === 0 || item.deType === 5)"
+                  :command="beforeSort('custom_sort')"
+                >{{ $t('chart.custom_sort') }}...</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item v-show="item.deType === 1" divided>
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">
+          <el-dropdown-item
+            v-show="item.deType === 1"
+            divided
+          >
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="dateStyle"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-c-scale-to-original" />
@@ -53,14 +118,22 @@
                 <el-dropdown-item :command="beforeDateStyle('y')">{{ $t('chart.y') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M')">{{ $t('chart.y_M') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M_d')">{{ $t('chart.y_M_d') }}</el-dropdown-item>
-                <el-dropdown-item :command="beforeDateStyle('H_m_s')" divided>{{ $t('chart.H_m_s') }}</el-dropdown-item>
+                <el-dropdown-item
+                  :command="beforeDateStyle('H_m_s')"
+                  divided
+                >{{ $t('chart.H_m_s') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M_d_H_m')">{{ $t('chart.y_M_d_H_m') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M_d_H_m_s')">{{ $t('chart.y_M_d_H_m_s') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
           <el-dropdown-item v-show="item.deType === 1">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="datePattern">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="datePattern"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-timer" />
@@ -76,13 +149,26 @@
             </el-dropdown>
           </el-dropdown-item>
 
-          <el-dropdown-item v-if="chart.render === 'antv' && chart.type.includes('table') && item.groupType === 'q'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
+          <el-dropdown-item
+            v-if="chart.render === 'antv' && chart.type.includes('table') && item.groupType === 'q'"
+            icon="el-icon-notebook-2"
+            divided
+            :command="beforeClickItem('formatter')"
+          >
             <span>{{ $t('chart.value_formatter') }}...</span>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
+          <el-dropdown-item
+            icon="el-icon-edit-outline"
+            divided
+            :command="beforeClickItem('rename')"
+          >
             <span>{{ $t('chart.show_name_set') }}</span>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+          <el-dropdown-item
+            icon="el-icon-delete"
+            divided
+            :command="beforeClickItem('remove')"
+          >
             <span>{{ $t('chart.delete') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
diff --git a/frontend/src/views/chart/components/drag-item/DrillItem.vue b/frontend/src/views/chart/components/drag-item/DrillItem.vue
index 191a765ede..ff67b12b26 100644
--- a/frontend/src/views/chart/components/drag-item/DrillItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DrillItem.vue
@@ -1,23 +1,68 @@
 <template>
   <span style="position: relative;display: inline-block;">
-    <i class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
+    <i
+      class="el-icon-arrow-down el-icon-delete"
+      style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;"
+      @click="removeItem"
+    />
+    <el-dropdown
+      trigger="click"
+      size="mini"
+      @command="clickItem"
+    >
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="tagType">
+        <el-tag
+          size="small"
+          class="item-axis"
+          :type="tagType"
+        >
           <span style="float: left">
-            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
-            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
-            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+            <svg-icon
+              v-if="item.deType === 0"
+              icon-class="field_text"
+              class="field-icon-text"
+            />
+            <svg-icon
+              v-if="item.deType === 1"
+              icon-class="field_time"
+              class="field-icon-time"
+            />
+            <svg-icon
+              v-if="item.deType === 2 || item.deType === 3"
+              icon-class="field_value"
+              class="field-icon-value"
+            />
+            <svg-icon
+              v-if="item.deType === 5"
+              icon-class="field_location"
+              class="field-icon-location"
+            />
+            <svg-icon
+              v-if="item.sort === 'asc'"
+              icon-class="sort-asc"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="item.sort === 'desc'"
+              icon-class="sort-desc"
+              class-name="field-icon-sort"
+            />
           </span>
-          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <span
+            class="item-span-style"
+            :title="item.name"
+          >{{ item.name }}</span>
           <field-error-tips v-if="tagType === 'danger'" />
-          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+          <i
+            class="el-icon-arrow-down el-icon--right"
+            style="position: absolute;top: 6px;right: 10px;"
+          />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-delete" :command="beforeClickItem('remove')">
+          <el-dropdown-item
+            icon="el-icon-delete"
+            :command="beforeClickItem('remove')"
+          >
             <span>{{ $t('chart.delete') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
diff --git a/frontend/src/views/chart/components/drag-item/FilterItem.vue b/frontend/src/views/chart/components/drag-item/FilterItem.vue
index 2c541e522f..cfea18e213 100644
--- a/frontend/src/views/chart/components/drag-item/FilterItem.vue
+++ b/frontend/src/views/chart/components/drag-item/FilterItem.vue
@@ -1,24 +1,65 @@
 <template>
   <span style="position: relative;display: inline-block;">
-    <i class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
+    <i
+      class="el-icon-arrow-down el-icon-delete"
+      style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;"
+      @click="removeItem"
+    />
+    <el-dropdown
+      trigger="click"
+      size="mini"
+      @command="clickItem"
+    >
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="tagType">
+        <el-tag
+          size="small"
+          class="item-axis"
+          :type="tagType"
+        >
           <span style="float: left">
-            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+            <svg-icon
+              v-if="item.deType === 0"
+              icon-class="field_text"
+              class="field-icon-text"
+            />
+            <svg-icon
+              v-if="item.deType === 1"
+              icon-class="field_time"
+              class="field-icon-time"
+            />
+            <svg-icon
+              v-if="item.deType === 2 || item.deType === 3"
+              icon-class="field_value"
+              class="field-icon-value"
+            />
+            <svg-icon
+              v-if="item.deType === 5"
+              icon-class="field_location"
+              class="field-icon-location"
+            />
           </span>
-          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <span
+            class="item-span-style"
+            :title="item.name"
+          >{{ item.name }}</span>
           <field-error-tips v-if="tagType === 'danger'" />
-          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+          <i
+            class="el-icon-arrow-down el-icon--right"
+            style="position: absolute;top: 6px;right: 10px;"
+          />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
+          <el-dropdown-item
+            icon="el-icon-files"
+            :command="beforeClickItem('filter')"
+          >
             <span>{{ $t('chart.filter') }}...</span>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+          <el-dropdown-item
+            icon="el-icon-delete"
+            divided
+            :command="beforeClickItem('remove')"
+          >
             <span>{{ $t('chart.delete') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
diff --git a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
index 2e5f75b78b..d1a8aa7b9e 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
@@ -1,30 +1,92 @@
 <template>
   <span style="position: relative;display: inline-block;">
-    <i class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
+    <i
+      class="el-icon-arrow-down el-icon-delete"
+      style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;"
+      @click="removeItem"
+    />
+    <el-dropdown
+      trigger="click"
+      size="mini"
+      @command="clickItem"
+    >
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="tagType">
+        <el-tag
+          size="small"
+          class="item-axis"
+          :type="tagType"
+        >
           <span style="float: left">
-            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
-            <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'bar'" icon-class="bar" class-name="field-icon-sort" />
-            <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'line'" icon-class="line" class-name="field-icon-sort" />
-            <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'scatter'" icon-class="scatter" class-name="field-icon-sort" />
-            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
-            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+            <svg-icon
+              v-if="item.deType === 0"
+              icon-class="field_text"
+              class="field-icon-text"
+            />
+            <svg-icon
+              v-if="item.deType === 1"
+              icon-class="field_time"
+              class="field-icon-time"
+            />
+            <svg-icon
+              v-if="item.deType === 2 || item.deType === 3"
+              icon-class="field_value"
+              class="field-icon-value"
+            />
+            <svg-icon
+              v-if="item.deType === 5"
+              icon-class="field_location"
+              class="field-icon-location"
+            />
+            <svg-icon
+              v-if="chart.type ==='chart-mix' && item.chartType === 'bar'"
+              icon-class="bar"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="chart.type ==='chart-mix' && item.chartType === 'line'"
+              icon-class="line"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="chart.type ==='chart-mix' && item.chartType === 'scatter'"
+              icon-class="scatter"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="item.sort === 'asc'"
+              icon-class="sort-asc"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="item.sort === 'desc'"
+              icon-class="sort-desc"
+              class-name="field-icon-sort"
+            />
           </span>
-          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <span
+            class="item-span-style"
+            :title="item.name"
+          >{{ item.name }}</span>
           <field-error-tips v-if="tagType === 'danger'" />
-          <span v-if="chart.type !== 'table-info' && item.summary && !item.chartId" class="summary-span">
+          <span
+            v-if="chart.type !== 'table-info' && item.summary && !item.chartId"
+            class="summary-span"
+          >
             {{ $t('chart.' + item.summary) }}<span v-if="false && item.compareCalc && item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
           </span>
-          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+          <i
+            class="el-icon-arrow-down el-icon--right"
+            style="position: absolute;top: 6px;right: 10px;"
+          />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item v-show="chart.type ==='chart-mix'">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="switchChartType">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="switchChartType"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-s-data" />
@@ -39,8 +101,16 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item v-show="!item.chartId && chart.type !== 'table-info'" :divided="chart.type === 'chart-mix'">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="summary">
+          <el-dropdown-item
+            v-show="!item.chartId && chart.type !== 'table-info'"
+            :divided="chart.type === 'chart-mix'"
+          >
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="summary"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-notebook-2" />
@@ -50,21 +120,47 @@
                 <i class="el-icon-arrow-right el-icon--right" />
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('stddev_pop')">{{ $t('chart.stddev_pop') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('var_pop')">{{ $t('chart.var_pop') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('sum')"
+                >{{ $t('chart.sum') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('avg')"
+                >{{ $t('chart.avg') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('max')"
+                >{{ $t('chart.max') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('min')"
+                >{{ $t('chart.min') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('stddev_pop')"
+                >{{ $t('chart.stddev_pop') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('var_pop')"
+                >{{ $t('chart.var_pop') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSummary('count')">{{ $t('chart.count') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count'" :command="beforeSummary('count_distinct')">{{ $t('chart.count_distinct') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count'"
+                  :command="beforeSummary('count_distinct')"
+                >{{ $t('chart.count_distinct') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
 
           <!--同比/环比-->
           <el-dropdown-item v-show="!item.chartId && chart.type !== 'table-info'">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="quickCalc">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="quickCalc"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-s-grid" />
@@ -75,13 +171,21 @@
               </span>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item :command="beforeQuickCalc('none')">{{ $t('chart.none') }}</el-dropdown-item>
-                <el-dropdown-item :disabled="disableEditCompare" :command="beforeQuickCalc('setting')">{{ $t('chart.yoy_label') }}...</el-dropdown-item>
+                <el-dropdown-item
+                  :disabled="disableEditCompare"
+                  :command="beforeQuickCalc('setting')"
+                >{{ $t('chart.yoy_label') }}...</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
 
           <el-dropdown-item :divided="!item.chartId && chart.type !== 'table-info'">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="sort"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-sort" />
@@ -97,16 +201,32 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
+          <el-dropdown-item
+            icon="el-icon-files"
+            :command="beforeClickItem('filter')"
+          >
             <span>{{ $t('chart.filter') }}...</span>
           </el-dropdown-item>
-          <el-dropdown-item v-if="chart.render === 'antv' && chart.type !== 'gauge' && chart.type !== 'liquid'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
+          <el-dropdown-item
+            v-if="chart.render === 'antv' && chart.type !== 'gauge' && chart.type !== 'liquid'"
+            icon="el-icon-notebook-2"
+            divided
+            :command="beforeClickItem('formatter')"
+          >
             <span>{{ $t('chart.value_formatter') }}...</span>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
+          <el-dropdown-item
+            icon="el-icon-edit-outline"
+            divided
+            :command="beforeClickItem('rename')"
+          >
             <span>{{ $t('chart.show_name_set') }}</span>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+          <el-dropdown-item
+            icon="el-icon-delete"
+            divided
+            :command="beforeClickItem('remove')"
+          >
             <span>{{ $t('chart.delete') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index a728c41dd1..e3eb1df735 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -1,30 +1,92 @@
 <template>
   <span style="position: relative;display: inline-block;">
-    <i class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
+    <i
+      class="el-icon-arrow-down el-icon-delete"
+      style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;"
+      @click="removeItem"
+    />
+    <el-dropdown
+      trigger="click"
+      size="mini"
+      @command="clickItem"
+    >
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="tagType">
+        <el-tag
+          size="small"
+          class="item-axis"
+          :type="tagType"
+        >
           <span style="float: left">
-            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
-            <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'bar'" icon-class="bar" class-name="field-icon-sort" />
-            <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'line'" icon-class="line" class-name="field-icon-sort" />
-            <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'scatter'" icon-class="scatter" class-name="field-icon-sort" />
-            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
-            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+            <svg-icon
+              v-if="item.deType === 0"
+              icon-class="field_text"
+              class="field-icon-text"
+            />
+            <svg-icon
+              v-if="item.deType === 1"
+              icon-class="field_time"
+              class="field-icon-time"
+            />
+            <svg-icon
+              v-if="item.deType === 2 || item.deType === 3"
+              icon-class="field_value"
+              class="field-icon-value"
+            />
+            <svg-icon
+              v-if="item.deType === 5"
+              icon-class="field_location"
+              class="field-icon-location"
+            />
+            <svg-icon
+              v-if="chart.type ==='chart-mix' && item.chartType === 'bar'"
+              icon-class="bar"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="chart.type ==='chart-mix' && item.chartType === 'line'"
+              icon-class="line"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="chart.type ==='chart-mix' && item.chartType === 'scatter'"
+              icon-class="scatter"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="item.sort === 'asc'"
+              icon-class="sort-asc"
+              class-name="field-icon-sort"
+            />
+            <svg-icon
+              v-if="item.sort === 'desc'"
+              icon-class="sort-desc"
+              class-name="field-icon-sort"
+            />
           </span>
-          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <span
+            class="item-span-style"
+            :title="item.name"
+          >{{ item.name }}</span>
           <field-error-tips v-if="tagType === 'danger'" />
-          <span v-if="chart.type !== 'table-info' && item.summary && !item.chartId" class="summary-span">
+          <span
+            v-if="chart.type !== 'table-info' && item.summary && !item.chartId"
+            class="summary-span"
+          >
             {{ $t('chart.' + item.summary) }}<span v-if="false && item.compareCalc && item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
           </span>
-          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+          <i
+            class="el-icon-arrow-down el-icon--right"
+            style="position: absolute;top: 6px;right: 10px;"
+          />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item v-show="chart.type ==='chart-mix'">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="switchChartType">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="switchChartType"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-s-data" />
@@ -39,8 +101,16 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item v-show="!item.chartId && chart.type !== 'table-info'" :divided="chart.type === 'chart-mix'">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="summary">
+          <el-dropdown-item
+            v-show="!item.chartId && chart.type !== 'table-info'"
+            :divided="chart.type === 'chart-mix'"
+          >
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="summary"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-notebook-2" />
@@ -50,21 +120,47 @@
                 <i class="el-icon-arrow-right el-icon--right" />
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('stddev_pop')">{{ $t('chart.stddev_pop') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5" :command="beforeSummary('var_pop')">{{ $t('chart.var_pop') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('sum')"
+                >{{ $t('chart.sum') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('avg')"
+                >{{ $t('chart.avg') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('max')"
+                >{{ $t('chart.max') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('min')"
+                >{{ $t('chart.min') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('stddev_pop')"
+                >{{ $t('chart.stddev_pop') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1 && item.deType !== 5"
+                  :command="beforeSummary('var_pop')"
+                >{{ $t('chart.var_pop') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSummary('count')">{{ $t('chart.count') }}</el-dropdown-item>
-                <el-dropdown-item v-if="item.id !== 'count'" :command="beforeSummary('count_distinct')">{{ $t('chart.count_distinct') }}</el-dropdown-item>
+                <el-dropdown-item
+                  v-if="item.id !== 'count'"
+                  :command="beforeSummary('count_distinct')"
+                >{{ $t('chart.count_distinct') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
 
           <!--同比/环比-->
           <el-dropdown-item v-show="!item.chartId && chart.type !== 'table-info'">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="quickCalc">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="quickCalc"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-s-grid" />
@@ -75,13 +171,21 @@
               </span>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item :command="beforeQuickCalc('none')">{{ $t('chart.none') }}</el-dropdown-item>
-                <el-dropdown-item :disabled="disableEditCompare" :command="beforeQuickCalc('setting')">{{ $t('chart.yoy_label') }}...</el-dropdown-item>
+                <el-dropdown-item
+                  :disabled="disableEditCompare"
+                  :command="beforeQuickCalc('setting')"
+                >{{ $t('chart.yoy_label') }}...</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
 
           <el-dropdown-item :divided="!item.chartId && chart.type !== 'table-info'">
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
+            <el-dropdown
+              placement="right-start"
+              size="mini"
+              style="width: 100%"
+              @command="sort"
+            >
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
                   <i class="el-icon-sort" />
@@ -97,16 +201,32 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
+          <el-dropdown-item
+            icon="el-icon-files"
+            :command="beforeClickItem('filter')"
+          >
             <span>{{ $t('chart.filter') }}...</span>
           </el-dropdown-item>
-          <el-dropdown-item v-if="chart.render === 'antv' && chart.type !== 'gauge' && chart.type !== 'liquid'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
+          <el-dropdown-item
+            v-if="chart.render === 'antv' && chart.type !== 'gauge' && chart.type !== 'liquid'"
+            icon="el-icon-notebook-2"
+            divided
+            :command="beforeClickItem('formatter')"
+          >
             <span>{{ $t('chart.value_formatter') }}...</span>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
+          <el-dropdown-item
+            icon="el-icon-edit-outline"
+            divided
+            :command="beforeClickItem('rename')"
+          >
             <span>{{ $t('chart.show_name_set') }}</span>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+          <el-dropdown-item
+            icon="el-icon-delete"
+            divided
+            :command="beforeClickItem('remove')"
+          >
             <span>{{ $t('chart.delete') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
diff --git a/frontend/src/views/chart/components/drag-item/components/FieldErrorTips.vue b/frontend/src/views/chart/components/drag-item/components/FieldErrorTips.vue
index 9d7b574721..8f184ef6bc 100644
--- a/frontend/src/views/chart/components/drag-item/components/FieldErrorTips.vue
+++ b/frontend/src/views/chart/components/drag-item/components/FieldErrorTips.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="tips-class">
-    <el-tooltip class="item" effect="dark" :content="$t('chart.field_error_tips')" placement="bottom">
+    <el-tooltip
+      class="item"
+      effect="dark"
+      :content="$t('chart.field_error_tips')"
+      placement="bottom"
+    >
       <span><i class="el-icon-warning" /></span>
     </el-tooltip>
   </div>
diff --git a/frontend/src/views/chart/components/filter/DimensionFilterEditor.vue b/frontend/src/views/chart/components/filter/DimensionFilterEditor.vue
index 305568457a..54b6ee99d3 100644
--- a/frontend/src/views/chart/components/filter/DimensionFilterEditor.vue
+++ b/frontend/src/views/chart/components/filter/DimensionFilterEditor.vue
@@ -1,13 +1,26 @@
 <template>
   <el-col>
-    <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
+    <el-button
+      icon="el-icon-plus"
+      circle
+      size="mini"
+      style="margin-bottom: 10px;"
+      @click="addFilter"
+    />
     <div style="max-height: 50vh;overflow-y: auto;">
-      <el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
+      <el-row
+        v-for="(f,index) in item.filter"
+        :key="index"
+        class="filter-item"
+      >
         <el-col :span="4">
           <span>{{ item.name }}</span>
         </el-col>
         <el-col :span="8">
-          <el-select v-model="f.term" size="mini">
+          <el-select
+            v-model="f.term"
+            size="mini"
+          >
             <el-option-group
               v-for="(group,idx) in options"
               :key="idx"
@@ -23,10 +36,23 @@
           </el-select>
         </el-col>
         <el-col :span="6">
-          <el-input v-show="!f.term.includes('null') && !f.term.includes('empty')" v-model="f.value" class="value-item" :placeholder="$t('chart.condition')" size="mini" clearable />
+          <el-input
+            v-show="!f.term.includes('null') && !f.term.includes('empty')"
+            v-model="f.value"
+            class="value-item"
+            :placeholder="$t('chart.condition')"
+            size="mini"
+            clearable
+          />
         </el-col>
         <el-col :span="6">
-          <el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeFilter(index)" />
+          <el-button
+            type="text"
+            icon="el-icon-delete"
+            circle
+            style="float: right"
+            @click="removeFilter(index)"
+          />
         </el-col>
       </el-row>
     </div>
diff --git a/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue b/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
index c5714a4c6a..14b037028b 100644
--- a/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
+++ b/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
@@ -1,7 +1,13 @@
 <template>
   <el-col>
     <div style="display: inline-block;">
-      <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
+      <el-button
+        icon="el-icon-plus"
+        circle
+        size="mini"
+        style="margin-bottom: 10px;"
+        @click="addFilter"
+      />
       <el-radio-group
         v-show="item.filter && item.filter.length > 1"
         v-model="logic"
@@ -15,7 +21,11 @@
     </div>
 
     <div style="max-height: 50vh;overflow-y: auto;">
-      <el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
+      <el-row
+        v-for="(f,index) in item.filter"
+        :key="index"
+        class="filter-item"
+      >
         <el-col :span="4">
           <span>
             {{ item.name }}
@@ -25,7 +35,10 @@
           </span>
         </el-col>
         <el-col :span="8">
-          <el-select v-model="f.term" size="mini">
+          <el-select
+            v-model="f.term"
+            size="mini"
+          >
             <el-option-group
               v-for="(group,idx) in options"
               :key="idx"
@@ -41,10 +54,23 @@
           </el-select>
         </el-col>
         <el-col :span="6">
-          <el-input v-show="!f.term.includes('null')" v-model="f.value" class="value-item" :placeholder="$t('chart.condition')" size="mini" clearable />
+          <el-input
+            v-show="!f.term.includes('null')"
+            v-model="f.value"
+            class="value-item"
+            :placeholder="$t('chart.condition')"
+            size="mini"
+            clearable
+          />
         </el-col>
         <el-col :span="6">
-          <el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeFilter(index)" />
+          <el-button
+            type="text"
+            icon="el-icon-delete"
+            circle
+            style="float: right"
+            @click="removeFilter(index)"
+          />
         </el-col>
       </el-row>
     </div>
diff --git a/frontend/src/views/chart/components/filter/ResultFilterEditor.vue b/frontend/src/views/chart/components/filter/ResultFilterEditor.vue
index 3f5912c5c4..e6f4824845 100644
--- a/frontend/src/views/chart/components/filter/ResultFilterEditor.vue
+++ b/frontend/src/views/chart/components/filter/ResultFilterEditor.vue
@@ -14,7 +14,13 @@
 
     <div v-if="((item.deType === 0 || item.deType === 5) && filterType === 'logic') || item.deType === 1 || item.deType === 2 || item.deType === 3">
       <div style="display: inline-block;">
-        <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
+        <el-button
+          icon="el-icon-plus"
+          circle
+          size="mini"
+          style="margin-bottom: 10px;"
+          @click="addFilter"
+        />
         <el-radio-group
           v-show="item.filter && item.filter.length > 1"
           v-model="logic"
@@ -27,12 +33,19 @@
         </el-radio-group>
       </div>
       <div style="max-height: 50vh;overflow-y: auto;">
-        <el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
+        <el-row
+          v-for="(f,index) in item.filter"
+          :key="index"
+          class="filter-item"
+        >
           <el-col :span="4">
             <span>{{ item.name }}</span>
           </el-col>
           <el-col :span="8">
-            <el-select v-model="f.term" size="mini">
+            <el-select
+              v-model="f.term"
+              size="mini"
+            >
               <el-option-group
                 v-for="(group,idx) in options"
                 :key="idx"
@@ -48,10 +61,23 @@
             </el-select>
           </el-col>
           <el-col :span="6">
-            <el-input v-show="!f.term.includes('null') && !f.term.includes('empty')" v-model="f.value" class="value-item" :placeholder="$t('chart.condition')" size="mini" clearable />
+            <el-input
+              v-show="!f.term.includes('null') && !f.term.includes('empty')"
+              v-model="f.value"
+              class="value-item"
+              :placeholder="$t('chart.condition')"
+              size="mini"
+              clearable
+            />
           </el-col>
           <el-col :span="6">
-            <el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeFilter(index)" />
+            <el-button
+              type="text"
+              icon="el-icon-delete"
+              circle
+              style="float: right"
+              @click="removeFilter(index)"
+            />
           </el-col>
         </el-row>
       </div>
@@ -239,7 +265,7 @@ export default {
     initEnumOptions() {
       // 查找枚举值
       if (this.item.deType === 0 || this.item.deType === 5) {
-        multFieldValues({fieldIds: [this.item.id]}).then(res => {
+        multFieldValues({ fieldIds: [this.item.id] }).then(res => {
           this.fieldOptions = this.optionDatas(res.data)
         })
       }
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index 7daac33deb..30aee75973 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -1,9 +1,22 @@
 <template>
-  <div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
-    <span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
+  <div
+    ref="tableContainer"
+    :style="bg_class"
+    style="padding: 8px;width: 100%;height: 100%;overflow: hidden;"
+  >
+    <span
+      v-show="title_show"
+      ref="title"
+      :style="title_class"
+      style="cursor: default;display: block;"
+    >
       <div>
         <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
+        <title-remark
+          v-if="chart.render && chart.render === 'antv' && remarkCfg.show"
+          style="text-shadow: none!important;"
+          :remark-cfg="remarkCfg"
+        />
       </div>
     </span>
     <div
@@ -16,7 +29,10 @@
           {{ result }}
         </p>
       </span>
-      <span v-if="dimensionShow" :style="label_space">
+      <span
+        v-if="dimensionShow"
+        :style="label_space"
+      >
         <p :style="label_class">
           {{ chart.data.series[0].name }}
         </p>
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
index e2332e7e12..4a1db6ac92 100644
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -1,10 +1,29 @@
 <template>
-  <div ref="tableContainer" :style="bg_class" style="width: 100%;height: 100%;overflow: hidden;">
-    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
-    <span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
+  <div
+    ref="tableContainer"
+    :style="bg_class"
+    style="width: 100%;height: 100%;overflow: hidden;"
+  >
+    <view-track-bar
+      ref="viewTrack"
+      :track-menu="trackMenu"
+      class="track-bar"
+      :style="trackBarStyleTime"
+      @trackClick="trackClick"
+    />
+    <span
+      v-show="title_show"
+      ref="title"
+      :style="title_class"
+      style="cursor: default;display: block;"
+    >
       <div>
         <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
+        <title-remark
+          v-if="chart.render && chart.render === 'antv' && remarkCfg.show"
+          style="text-shadow: none!important;"
+          :remark-cfg="remarkCfg"
+        />
       </div>
     </span>
     <div
@@ -13,11 +32,19 @@
       :style="content_class"
     >
       <span :style="label_class">
-        <p v-if="chart.data.series[0].data && chart.data.series[0].data.length > 0" ref="textData" :style="label_content_class" @click="textClick">
+        <p
+          v-if="chart.data.series[0].data && chart.data.series[0].data.length > 0"
+          ref="textData"
+          :style="label_content_class"
+          @click="textClick"
+        >
           {{ chart.data.series[0].data[0] }}
         </p>
       </span>
-      <span v-if="dimensionShow" :style="label_space">
+      <span
+        v-if="dimensionShow"
+        :style="label_space"
+      >
         <p :style="label_class">
           {{ chart.data.series[0].name }}
         </p>
diff --git a/frontend/src/views/chart/components/senior/AssistLine.vue b/frontend/src/views/chart/components/senior/AssistLine.vue
index e21665a93f..b0eef1e46a 100644
--- a/frontend/src/views/chart/components/senior/AssistLine.vue
+++ b/frontend/src/views/chart/components/senior/AssistLine.vue
@@ -10,18 +10,34 @@
         @click="editLine"
       />
       <el-col>
-        <el-row v-for="(item,index) in assistLine" :key="index" class="line-style">
+        <el-row
+          v-for="(item,index) in assistLine"
+          :key="index"
+          class="line-style"
+        >
           <el-col :span="8">
             <span :title="item.name">{{ item.name }}</span>
           </el-col>
           <el-col :span="8">
-            <span v-if="item.field === '0'" :title="$t('chart.field_fixed')">{{ $t('chart.field_fixed') }}</span>
-            <span v-if="item.field === '1'" :title="$t('chart.field_dynamic')">{{ $t('chart.field_dynamic') }}</span>
+            <span
+              v-if="item.field === '0'"
+              :title="$t('chart.field_fixed')"
+            >{{ $t('chart.field_fixed') }}</span>
+            <span
+              v-if="item.field === '1'"
+              :title="$t('chart.field_dynamic')"
+            >{{ $t('chart.field_dynamic') }}</span>
           </el-col>
-          <el-col v-if="item.field === '0'" :span="8">
+          <el-col
+            v-if="item.field === '0'"
+            :span="8"
+          >
             <span :title="item.value">{{ item.value }}</span>
           </el-col>
-          <el-col v-if="item.field === '1'" :span="8">
+          <el-col
+            v-if="item.field === '1'"
+            :span="8"
+          >
             <span :title="item.curField.name + '(' + $t('chart.' + item.summary) + ')'">{{ item.curField.name + '(' + $t('chart.' + item.summary) + ')' }}</span>
           </el-col>
         </el-row>
@@ -38,10 +54,24 @@
       width="70%"
       class="dialog-css"
     >
-      <assist-line-edit :line="assistLine" :quota-fields="quotaData" @onAssistLineChange="lineChange" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeEditLine">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="changeLine">{{ $t('chart.confirm') }}</el-button>
+      <assist-line-edit
+        :line="assistLine"
+        :quota-fields="quotaData"
+        @onAssistLineChange="lineChange"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeEditLine"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="changeLine"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
   </div>
diff --git a/frontend/src/views/chart/components/senior/FunctionCfg.vue b/frontend/src/views/chart/components/senior/FunctionCfg.vue
index b3f4920542..4c76c7159a 100644
--- a/frontend/src/views/chart/components/senior/FunctionCfg.vue
+++ b/frontend/src/views/chart/components/senior/FunctionCfg.vue
@@ -1,21 +1,71 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="functionForm" :model="functionForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.slider')" class="form-item">
-          <el-checkbox v-model="functionForm.sliderShow" @change="changeFunctionCfg">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="functionForm"
+        :model="functionForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          :label="$t('chart.slider')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="functionForm.sliderShow"
+            @change="changeFunctionCfg"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_range')+'(%)'" class="form-item form-item-slider">
-          <el-slider v-model="functionForm.sliderRange" style="width: 90%" :min="0" :max="100" input-size="mini" range @change="changeFunctionCfg" />
+        <el-form-item
+          v-show="functionForm.sliderShow"
+          :label="$t('chart.slider_range')+'(%)'"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="functionForm.sliderRange"
+            style="width: 90%"
+            :min="0"
+            :max="100"
+            input-size="mini"
+            range
+            @change="changeFunctionCfg"
+          />
         </el-form-item>
-        <el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_bg')" class="form-item">
-          <el-color-picker v-model="functionForm.sliderBg" class="color-picker-style" :predefine="predefineColors" @change="changeFunctionCfg" />
+        <el-form-item
+          v-show="functionForm.sliderShow"
+          :label="$t('chart.slider_bg')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="functionForm.sliderBg"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeFunctionCfg"
+          />
         </el-form-item>
-        <el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_fill_bg')" class="form-item">
-          <el-color-picker v-model="functionForm.sliderFillBg" class="color-picker-style" :predefine="predefineColors" @change="changeFunctionCfg" />
+        <el-form-item
+          v-show="functionForm.sliderShow"
+          :label="$t('chart.slider_fill_bg')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="functionForm.sliderFillBg"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeFunctionCfg"
+          />
         </el-form-item>
-        <el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_text_color')" class="form-item">
-          <el-color-picker v-model="functionForm.sliderTextClolor" class="color-picker-style" :predefine="predefineColors" @change="changeFunctionCfg" />
+        <el-form-item
+          v-show="functionForm.sliderShow"
+          :label="$t('chart.slider_text_color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="functionForm.sliderTextClolor"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeFunctionCfg"
+          />
         </el-form-item>
       </el-form>
     </el-col>
diff --git a/frontend/src/views/chart/components/senior/MapMapping.vue b/frontend/src/views/chart/components/senior/MapMapping.vue
index 6116d815cd..e8b0c535f6 100644
--- a/frontend/src/views/chart/components/senior/MapMapping.vue
+++ b/frontend/src/views/chart/components/senior/MapMapping.vue
@@ -27,10 +27,19 @@
             @keyup.enter.native="$event.target.blur()"
           >
 
-            <i slot="suffix" class="el-icon-success el-input__icon map-mapping-ok" @click="finishEdit(scope.row)" />
+            <i
+              slot="suffix"
+              class="el-icon-success el-input__icon map-mapping-ok"
+              @click="finishEdit(scope.row)"
+            />
           </el-input>
 
-          <el-button v-else size="mini" plain @click="triggerEdit(scope)">
+          <el-button
+            v-else
+            size="mini"
+            plain
+            @click="triggerEdit(scope)"
+          >
             <span class="mapping-span">{{ scope.row.attrArea }}</span>
             <i class="el-icon-edit el-icon--right" />
           </el-button>
@@ -39,7 +48,9 @@
       </el-table-column>
       <el-table-column align="right">
 
-        <template slot="header" slot-scope="scope">
+        <template
+          slot="header"
+        >
           <el-input
             v-model="keyWord"
             size="mini"
@@ -49,7 +60,10 @@
 
       </el-table-column>
 
-      <el-empty slot="empty" :description="!!currentAreaCode ? $t('map_mapping.empty'): $t('map_mapping.please_select_map')" />
+      <el-empty
+        slot="empty"
+        :description="!!currentAreaCode ? $t('map_mapping.empty'): $t('map_mapping.please_select_map')"
+      />
     </el-table>
     <div class="mapping-pagination">
       <el-pagination
@@ -215,7 +229,7 @@ export default {
         })
       }
       const cCode = this.currentAreaCode
-      if(!cCode) return
+      if (!cCode) return
       if (this.$store.getters.geoMap[cCode]) {
         const json = this.$store.getters.geoMap[cCode]
         json && innerCallBack(json, cCode)
diff --git a/frontend/src/views/chart/components/senior/ScrollCfg.vue b/frontend/src/views/chart/components/senior/ScrollCfg.vue
index 0e8edfb333..af513e6587 100644
--- a/frontend/src/views/chart/components/senior/ScrollCfg.vue
+++ b/frontend/src/views/chart/components/senior/ScrollCfg.vue
@@ -1,22 +1,60 @@
 <template>
   <div style="width: 100%;display: block;">
     <el-row class="scroll-style">
-      <el-form ref="scrollForm" :model="scrollForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.scroll')" class="form-item">
-          <el-checkbox v-model="scrollForm.open" @change="changeScrollCfg">{{ $t('chart.open') }}</el-checkbox>
-          <el-tooltip class="item" effect="dark" placement="bottom">
+      <el-form
+        ref="scrollForm"
+        :model="scrollForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          :label="$t('chart.scroll')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="scrollForm.open"
+            @change="changeScrollCfg"
+          >{{ $t('chart.open') }}</el-checkbox>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom"
+          >
             <div slot="content">
               明细表仅在分页模式为"下拉"时生效。
             </div>
-            <i class="el-icon-info" style="cursor: pointer;color: gray;font-size: 12px;" />
+            <i
+              class="el-icon-info"
+              style="cursor: pointer;color: gray;font-size: 12px;"
+            />
           </el-tooltip>
         </el-form-item>
         <span v-show="scrollForm.open">
-          <el-form-item :label="$t('chart.row')" class="form-item">
-            <el-input-number v-model="scrollForm.row" :min="1" :max="1000" :precision="0" size="mini" @change="changeScrollCfg" />
+          <el-form-item
+            :label="$t('chart.row')"
+            class="form-item"
+          >
+            <el-input-number
+              v-model="scrollForm.row"
+              :min="1"
+              :max="1000"
+              :precision="0"
+              size="mini"
+              @change="changeScrollCfg"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.interval') + '(ms)'" class="form-item">
-            <el-input-number v-model="scrollForm.interval" :min="500" :step="1000" :precision="0" size="mini" @change="changeScrollCfg" />
+          <el-form-item
+            :label="$t('chart.interval') + '(ms)'"
+            class="form-item"
+          >
+            <el-input-number
+              v-model="scrollForm.interval"
+              :min="500"
+              :step="1000"
+              :precision="0"
+              size="mini"
+              @change="changeScrollCfg"
+            />
           </el-form-item>
         </span>
       </el-form>
diff --git a/frontend/src/views/chart/components/senior/Threshold.vue b/frontend/src/views/chart/components/senior/Threshold.vue
index c3e0950d11..994b1c0153 100644
--- a/frontend/src/views/chart/components/senior/Threshold.vue
+++ b/frontend/src/views/chart/components/senior/Threshold.vue
@@ -2,18 +2,40 @@
   <div style="width: 100%">
     <!--仪表盘-->
     <el-col v-if="chart.type && chart.type === 'gauge'">
-      <el-form ref="thresholdForm" :model="thresholdForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.threshold_range')+'(%)'" class="form-item">
+      <el-form
+        ref="thresholdForm"
+        :model="thresholdForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          :label="$t('chart.threshold_range')+'(%)'"
+          class="form-item"
+        >
           <span>0,</span>
-          <el-input v-model="thresholdForm.gaugeThreshold" style="width: 100px;margin: 0 10px;" :placeholder="$t('chart.threshold_range')" size="mini" clearable @change="gaugeThresholdChange" />
+          <el-input
+            v-model="thresholdForm.gaugeThreshold"
+            style="width: 100px;margin: 0 10px;"
+            :placeholder="$t('chart.threshold_range')"
+            size="mini"
+            clearable
+            @change="gaugeThresholdChange"
+          />
           <span>,100</span>
-          <el-tooltip class="item" effect="dark" placement="bottom">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom"
+          >
             <div slot="content">
               阈值设置，决定仪表盘区间颜色，为空则不开启阈值，范围(0-100)，逐级递增
               <br>
               例如：输入 30,70；表示：分为3段，分别为[0,30],(30,70],(70,100]
             </div>
-            <i class="el-icon-info" style="cursor: pointer;margin-left: 10px;font-size: 12px;" />
+            <i
+              class="el-icon-info"
+              style="cursor: pointer;margin-left: 10px;font-size: 12px;"
+            />
           </el-tooltip>
         </el-form-item>
       </el-form>
@@ -31,18 +53,46 @@
           @click="editLabelThreshold"
         />
         <el-col style="padding: 0 18px;">
-          <el-row v-for="(item,index) in thresholdForm.labelThreshold" :key="index" class="line-style">
+          <el-row
+            v-for="(item,index) in thresholdForm.labelThreshold"
+            :key="index"
+            class="line-style"
+          >
             <el-col :span="6">
-              <span v-if="item.term === 'eq'" :title="$t('chart.filter_eq')">{{ $t('chart.filter_eq') }}</span>
-              <span v-else-if="item.term === 'not_eq'" :title="$t('chart.filter_not_eq')">{{ $t('chart.filter_not_eq') }}</span>
-              <span v-else-if="item.term === 'lt'" :title="$t('chart.filter_lt')">{{ $t('chart.filter_lt') }}</span>
-              <span v-else-if="item.term === 'gt'" :title="$t('chart.filter_gt')">{{ $t('chart.filter_gt') }}</span>
-              <span v-else-if="item.term === 'le'" :title="$t('chart.filter_le')">{{ $t('chart.filter_le') }}</span>
-              <span v-else-if="item.term === 'ge'" :title="$t('chart.filter_ge')">{{ $t('chart.filter_ge') }}</span>
-              <span v-else-if="item.term === 'between'" :title="$t('chart.filter_between')">{{ $t('chart.filter_between') }}</span>
+              <span
+                v-if="item.term === 'eq'"
+                :title="$t('chart.filter_eq')"
+              >{{ $t('chart.filter_eq') }}</span>
+              <span
+                v-else-if="item.term === 'not_eq'"
+                :title="$t('chart.filter_not_eq')"
+              >{{ $t('chart.filter_not_eq') }}</span>
+              <span
+                v-else-if="item.term === 'lt'"
+                :title="$t('chart.filter_lt')"
+              >{{ $t('chart.filter_lt') }}</span>
+              <span
+                v-else-if="item.term === 'gt'"
+                :title="$t('chart.filter_gt')"
+              >{{ $t('chart.filter_gt') }}</span>
+              <span
+                v-else-if="item.term === 'le'"
+                :title="$t('chart.filter_le')"
+              >{{ $t('chart.filter_le') }}</span>
+              <span
+                v-else-if="item.term === 'ge'"
+                :title="$t('chart.filter_ge')"
+              >{{ $t('chart.filter_ge') }}</span>
+              <span
+                v-else-if="item.term === 'between'"
+                :title="$t('chart.filter_between')"
+              >{{ $t('chart.filter_between') }}</span>
             </el-col>
             <el-col :span="12">
-              <span v-if="item.term !== 'between'" :title="item.value">{{ item.value }}</span>
+              <span
+                v-if="item.term !== 'between'"
+                :title="item.value"
+              >{{ item.value }}</span>
               <span v-if="item.term === 'between'">
                 {{ item.min }}&nbsp;≤{{ $t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
               </span>
@@ -67,44 +117,118 @@
           @click="editTableThreshold"
         />
         <el-col style="padding: 0 18px;max-height: 500px;overflow-y: auto;">
-          <el-row v-for="(fieldItem,fieldIndex) in thresholdForm.tableThreshold" :key="fieldIndex">
+          <el-row
+            v-for="(fieldItem,fieldIndex) in thresholdForm.tableThreshold"
+            :key="fieldIndex"
+          >
             <el-row class="field-style">
               <span>
-                <svg-icon v-if="fieldItem.field.deType === 0" icon-class="field_text" class="field-icon-text" />
-                <svg-icon v-if="fieldItem.field.deType === 1" icon-class="field_time" class="field-icon-time" />
-                <svg-icon v-if="fieldItem.field.deType === 2 || fieldItem.field.deType === 3" icon-class="field_value" class="field-icon-value" />
-                <svg-icon v-if="fieldItem.field.deType === 5" icon-class="field_location" class="field-icon-location" />
+                <svg-icon
+                  v-if="fieldItem.field.deType === 0"
+                  icon-class="field_text"
+                  class="field-icon-text"
+                />
+                <svg-icon
+                  v-if="fieldItem.field.deType === 1"
+                  icon-class="field_time"
+                  class="field-icon-time"
+                />
+                <svg-icon
+                  v-if="fieldItem.field.deType === 2 || fieldItem.field.deType === 3"
+                  icon-class="field_value"
+                  class="field-icon-value"
+                />
+                <svg-icon
+                  v-if="fieldItem.field.deType === 5"
+                  icon-class="field_location"
+                  class="field-icon-location"
+                />
               </span>
-              <span :title="fieldItem.field.name" class="field-text">{{ fieldItem.field.name }}</span>
+              <span
+                :title="fieldItem.field.name"
+                class="field-text"
+              >{{ fieldItem.field.name }}</span>
             </el-row>
-            <el-row v-for="(item,index) in fieldItem.conditions" :key="index" class="line-style">
+            <el-row
+              v-for="(item,index) in fieldItem.conditions"
+              :key="index"
+              class="line-style"
+            >
               <el-col :span="6">
-                <span v-if="item.term === 'eq'" :title="$t('chart.filter_eq')">{{ $t('chart.filter_eq') }}</span>
-                <span v-else-if="item.term === 'not_eq'" :title="$t('chart.filter_not_eq')">{{ $t('chart.filter_not_eq') }}</span>
-                <span v-else-if="item.term === 'lt'" :title="$t('chart.filter_lt')">{{ $t('chart.filter_lt') }}</span>
-                <span v-else-if="item.term === 'gt'" :title="$t('chart.filter_gt')">{{ $t('chart.filter_gt') }}</span>
-                <span v-else-if="item.term === 'le'" :title="$t('chart.filter_le')">{{ $t('chart.filter_le') }}</span>
-                <span v-else-if="item.term === 'ge'" :title="$t('chart.filter_ge')">{{ $t('chart.filter_ge') }}</span>
-                <span v-else-if="item.term === 'between'" :title="$t('chart.filter_between')">{{ $t('chart.filter_between') }}</span>
-                <span v-else-if="item.term === 'like'" :title="$t('chart.filter_like')">{{ $t('chart.filter_like') }}</span>
-                <span v-else-if="item.term === 'not like'" :title="$t('chart.filter_not_like')">{{ $t('chart.filter_not_like') }}</span>
-                <span v-else-if="item.term === 'null'" :title="$t('chart.filter_null')">{{ $t('chart.filter_null') }}</span>
-                <span v-else-if="item.term === 'not_null'" :title="$t('chart.filter_not_null')">{{ $t('chart.filter_not_null') }}</span>
-                <span v-else-if="item.term === 'empty'" :title="$t('chart.filter_empty')">{{ $t('chart.filter_empty') }}</span>
-                <span v-else-if="item.term === 'not_empty'" :title="$t('chart.filter_not_empty')">{{ $t('chart.filter_not_empty') }}</span>
+                <span
+                  v-if="item.term === 'eq'"
+                  :title="$t('chart.filter_eq')"
+                >{{ $t('chart.filter_eq') }}</span>
+                <span
+                  v-else-if="item.term === 'not_eq'"
+                  :title="$t('chart.filter_not_eq')"
+                >{{ $t('chart.filter_not_eq') }}</span>
+                <span
+                  v-else-if="item.term === 'lt'"
+                  :title="$t('chart.filter_lt')"
+                >{{ $t('chart.filter_lt') }}</span>
+                <span
+                  v-else-if="item.term === 'gt'"
+                  :title="$t('chart.filter_gt')"
+                >{{ $t('chart.filter_gt') }}</span>
+                <span
+                  v-else-if="item.term === 'le'"
+                  :title="$t('chart.filter_le')"
+                >{{ $t('chart.filter_le') }}</span>
+                <span
+                  v-else-if="item.term === 'ge'"
+                  :title="$t('chart.filter_ge')"
+                >{{ $t('chart.filter_ge') }}</span>
+                <span
+                  v-else-if="item.term === 'between'"
+                  :title="$t('chart.filter_between')"
+                >{{ $t('chart.filter_between') }}</span>
+                <span
+                  v-else-if="item.term === 'like'"
+                  :title="$t('chart.filter_like')"
+                >{{ $t('chart.filter_like') }}</span>
+                <span
+                  v-else-if="item.term === 'not like'"
+                  :title="$t('chart.filter_not_like')"
+                >{{ $t('chart.filter_not_like') }}</span>
+                <span
+                  v-else-if="item.term === 'null'"
+                  :title="$t('chart.filter_null')"
+                >{{ $t('chart.filter_null') }}</span>
+                <span
+                  v-else-if="item.term === 'not_null'"
+                  :title="$t('chart.filter_not_null')"
+                >{{ $t('chart.filter_not_null') }}</span>
+                <span
+                  v-else-if="item.term === 'empty'"
+                  :title="$t('chart.filter_empty')"
+                >{{ $t('chart.filter_empty') }}</span>
+                <span
+                  v-else-if="item.term === 'not_empty'"
+                  :title="$t('chart.filter_not_empty')"
+                >{{ $t('chart.filter_not_empty') }}</span>
               </el-col>
               <el-col :span="10">
-                <span v-if="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'" :title="item.value">{{ item.value }}</span>
+                <span
+                  v-if="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
+                  :title="item.value"
+                >{{ item.value }}</span>
                 <span v-else-if="!item.term.includes('null') && !item.term.includes('empty') && item.term === 'between'">
                   {{ item.min }}&nbsp;≤{{ $t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
                 </span>
                 <span v-else>&nbsp;</span>
               </el-col>
               <el-col :span="4">
-                <span :title="$t('chart.textColor')" :style="{width:'14px', height:'14px', backgroundColor: item.color, border: 'solid 1px #e1e4e8'}" />
+                <span
+                  :title="$t('chart.textColor')"
+                  :style="{width:'14px', height:'14px', backgroundColor: item.color, border: 'solid 1px #e1e4e8'}"
+                />
               </el-col>
               <el-col :span="4">
-                <span :title="$t('chart.backgroundColor')" :style="{width:'14px', height:'14px', backgroundColor: item.backgroundColor, border: 'solid 1px #e1e4e8'}" />
+                <span
+                  :title="$t('chart.backgroundColor')"
+                  :style="{width:'14px', height:'14px', backgroundColor: item.backgroundColor, border: 'solid 1px #e1e4e8'}"
+                />
               </el-col>
             </el-row>
           </el-row>
@@ -123,10 +247,23 @@
       class="dialog-css"
       append-to-body
     >
-      <text-threshold-edit :threshold="thresholdForm.labelThreshold" @onLabelThresholdChange="thresholdChange" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeLabelThreshold">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="changeLabelThreshold">{{ $t('chart.confirm') }}</el-button>
+      <text-threshold-edit
+        :threshold="thresholdForm.labelThreshold"
+        @onLabelThresholdChange="thresholdChange"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeLabelThreshold"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="changeLabelThreshold"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -141,10 +278,24 @@
       class="dialog-css"
       append-to-body
     >
-      <table-threshold-edit :threshold="thresholdForm.tableThreshold" :chart="chart" @onTableThresholdChange="tableThresholdChange" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeTableThreshold">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="changeTableThreshold">{{ $t('chart.confirm') }}</el-button>
+      <table-threshold-edit
+        :threshold="thresholdForm.tableThreshold"
+        :chart="chart"
+        @onTableThresholdChange="tableThresholdChange"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeTableThreshold"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="changeTableThreshold"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
diff --git a/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue b/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
index 6d8279a799..21e133f793 100644
--- a/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
@@ -1,13 +1,35 @@
 <template>
   <el-col>
-    <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addLine" />
+    <el-button
+      icon="el-icon-plus"
+      circle
+      size="mini"
+      style="margin-bottom: 10px;"
+      @click="addLine"
+    />
     <div style="max-height: 50vh;overflow-y: auto;">
-      <el-row v-for="(item,index) in lineArr" :key="index" class="line-item">
+      <el-row
+        v-for="(item,index) in lineArr"
+        :key="index"
+        class="line-item"
+      >
         <el-col :span="4">
-          <el-input v-model="item.name" class="value-item" :placeholder="$t('chart.name')" size="mini" clearable @change="changeAssistLine" />
+          <el-input
+            v-model="item.name"
+            class="value-item"
+            :placeholder="$t('chart.name')"
+            size="mini"
+            clearable
+            @change="changeAssistLine"
+          />
         </el-col>
         <el-col :span="4">
-          <el-select v-model="item.field" size="mini" class="select-item" @change="changeAssistLine">
+          <el-select
+            v-model="item.field"
+            size="mini"
+            class="select-item"
+            @change="changeAssistLine"
+          >
             <el-option
               v-for="opt in fieldOptions"
               :key="opt.value"
@@ -16,11 +38,30 @@
             />
           </el-select>
         </el-col>
-        <el-col v-if="item.field === '0'" :span="8">
-          <el-input v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeAssistLine" />
+        <el-col
+          v-if="item.field === '0'"
+          :span="8"
+        >
+          <el-input
+            v-model="item.value"
+            class="value-item"
+            :placeholder="$t('chart.drag_block_label_value')"
+            size="mini"
+            clearable
+            @change="changeAssistLine"
+          />
         </el-col>
-        <el-col v-if="item.field === '1'" :span="8">
-          <el-select v-model="item.fieldId" size="mini" class="select-item" :placeholder="$t('chart.field')" @change="changeAssistLineField(item)">
+        <el-col
+          v-if="item.field === '1'"
+          :span="8"
+        >
+          <el-select
+            v-model="item.fieldId"
+            size="mini"
+            class="select-item"
+            :placeholder="$t('chart.field')"
+            @change="changeAssistLineField(item)"
+          >
             <el-option
               v-for="quota in quotaData"
               :key="quota.id"
@@ -28,22 +69,61 @@
               :value="quota.id"
             >
               <span style="float: left">
-                <svg-icon v-if="quota.deType === 0" icon-class="field_text" class="field-icon-text" />
-                <svg-icon v-if="quota.deType === 1" icon-class="field_time" class="field-icon-time" />
-                <svg-icon v-if="quota.deType === 2 || quota.deType === 3" icon-class="field_value" class="field-icon-value" />
-                <svg-icon v-if="quota.deType === 5" icon-class="field_location" class="field-icon-location" />
+                <svg-icon
+                  v-if="quota.deType === 0"
+                  icon-class="field_text"
+                  class="field-icon-text"
+                />
+                <svg-icon
+                  v-if="quota.deType === 1"
+                  icon-class="field_time"
+                  class="field-icon-time"
+                />
+                <svg-icon
+                  v-if="quota.deType === 2 || quota.deType === 3"
+                  icon-class="field_value"
+                  class="field-icon-value"
+                />
+                <svg-icon
+                  v-if="quota.deType === 5"
+                  icon-class="field_location"
+                  class="field-icon-location"
+                />
               </span>
               <span style="float: left; color: #8492a6; font-size: 12px">{{ quota.name }}</span>
             </el-option>
           </el-select>
-          <el-select v-model="item.summary" size="mini" class="select-item" :placeholder="$t('chart.aggregation')" @change="changeAssistLine">
-            <el-option key="avg" value="avg" :label="$t('chart.avg')" />
-            <el-option key="max" value="max" :label="$t('chart.max')" />
-            <el-option key="min" value="min" :label="$t('chart.min')" />
+          <el-select
+            v-model="item.summary"
+            size="mini"
+            class="select-item"
+            :placeholder="$t('chart.aggregation')"
+            @change="changeAssistLine"
+          >
+            <el-option
+              key="avg"
+              value="avg"
+              :label="$t('chart.avg')"
+            />
+            <el-option
+              key="max"
+              value="max"
+              :label="$t('chart.max')"
+            />
+            <el-option
+              key="min"
+              value="min"
+              :label="$t('chart.min')"
+            />
           </el-select>
         </el-col>
         <el-col :span="4">
-          <el-select v-model="item.lineType" size="mini" class="select-item" @change="changeAssistLine">
+          <el-select
+            v-model="item.lineType"
+            size="mini"
+            class="select-item"
+            @change="changeAssistLine"
+          >
             <el-option
               v-for="opt in lineOptions"
               :key="opt.value"
@@ -52,11 +132,25 @@
             />
           </el-select>
         </el-col>
-        <el-col :span="2" style="text-align: center;">
-          <el-color-picker v-model="item.color" class="color-picker-style" :predefine="predefineColors" @change="changeAssistLine" />
+        <el-col
+          :span="2"
+          style="text-align: center;"
+        >
+          <el-color-picker
+            v-model="item.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeAssistLine"
+          />
         </el-col>
         <el-col :span="2">
-          <el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeLine(index)" />
+          <el-button
+            type="text"
+            icon="el-icon-delete"
+            circle
+            style="float: right"
+            @click="removeLine(index)"
+          />
         </el-col>
       </el-row>
     </div>
diff --git a/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue b/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
index c06b317fdb..073dfdee8b 100644
--- a/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
@@ -1,11 +1,25 @@
 <template>
   <el-col>
-    <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addThreshold" />
+    <el-button
+      icon="el-icon-plus"
+      circle
+      size="mini"
+      style="margin-bottom: 10px;"
+      @click="addThreshold"
+    />
     <div style="max-height: 50vh;overflow-y: auto;">
-      <div v-for="(fieldItem,fieldIndex) in thresholdArr" :key="fieldIndex" class="field-item">
+      <div
+        v-for="(fieldItem,fieldIndex) in thresholdArr"
+        :key="fieldIndex"
+        class="field-item"
+      >
         <el-row style="margin-top: 6px;">
           <span class="color-title">{{ $t('chart.field') }}</span>
-          <el-select v-model="fieldItem.fieldId" size="mini" @change="addField(fieldItem)">
+          <el-select
+            v-model="fieldItem.fieldId"
+            size="mini"
+            @change="addField(fieldItem)"
+          >
             <el-option
               v-for="fieldOption in fields"
               :key="fieldOption.id"
@@ -13,14 +27,26 @@
               :value="fieldOption.id"
             >
               <span style="float: left">
-                <svg-icon v-if="fieldOption.deType === 0" icon-class="field_text" class="field-icon-text" />
-                <svg-icon v-if="fieldOption.deType === 1" icon-class="field_time" class="field-icon-time" />
+                <svg-icon
+                  v-if="fieldOption.deType === 0"
+                  icon-class="field_text"
+                  class="field-icon-text"
+                />
+                <svg-icon
+                  v-if="fieldOption.deType === 1"
+                  icon-class="field_time"
+                  class="field-icon-time"
+                />
                 <svg-icon
                   v-if="fieldOption.deType === 2 || fieldOption.deType === 3"
                   icon-class="field_value"
                   class="field-icon-value"
                 />
-                <svg-icon v-if="fieldOption.deType === 5" icon-class="field_location" class="field-icon-location" />
+                <svg-icon
+                  v-if="fieldOption.deType === 5"
+                  icon-class="field_location"
+                  class="field-icon-location"
+                />
               </span>
               <span style="float: left; color: #8492a6; font-size: 12px">{{ fieldOption.name }}</span>
             </el-option>
@@ -41,9 +67,17 @@
             @click="removeThreshold(fieldIndex)"
           />
         </el-row>
-        <el-row v-for="(item,index) in fieldItem.conditions" :key="index" class="line-item">
+        <el-row
+          v-for="(item,index) in fieldItem.conditions"
+          :key="index"
+          class="line-item"
+        >
           <el-col :span="4">
-            <el-select v-model="item.term" size="mini" @change="changeThreshold">
+            <el-select
+              v-model="item.term"
+              size="mini"
+              @change="changeThreshold"
+            >
               <el-option-group
                 v-for="(group,idx) in fieldItem.options"
                 :key="idx"
@@ -58,7 +92,10 @@
               </el-option-group>
             </el-select>
           </el-col>
-          <el-col :span="10" style="text-align: center;">
+          <el-col
+            :span="10"
+            style="text-align: center;"
+          >
             <el-input
               v-show="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
               v-model="item.value"
@@ -69,12 +106,29 @@
               @change="changeThreshold"
             />
             <span v-if="item.term === 'between'">
-              <el-input v-model="item.min" class="between-item" :placeholder="$t('chart.axis_value_min')" size="mini" clearable @change="changeThreshold" />
+              <el-input
+                v-model="item.min"
+                class="between-item"
+                :placeholder="$t('chart.axis_value_min')"
+                size="mini"
+                clearable
+                @change="changeThreshold"
+              />
               <span style="margin: 0 4px;">≤{{ $t('chart.drag_block_label_value') }}≤</span>
-              <el-input v-model="item.max" class="between-item" :placeholder="$t('chart.axis_value_max')" size="mini" clearable @change="changeThreshold" />
+              <el-input
+                v-model="item.max"
+                class="between-item"
+                :placeholder="$t('chart.axis_value_max')"
+                size="mini"
+                clearable
+                @change="changeThreshold"
+              />
             </span>
           </el-col>
-          <el-col :span="4" style="display: flex;align-items: center;justify-content: center;">
+          <el-col
+            :span="4"
+            style="display: flex;align-items: center;justify-content: center;"
+          >
             <span class="color-title">{{ $t('chart.textColor') }}</span>
             <el-color-picker
               v-model="item.color"
@@ -84,7 +138,10 @@
               @change="changeThreshold"
             />
           </el-col>
-          <el-col :span="4" style="display: flex;align-items: center;justify-content: center;">
+          <el-col
+            :span="4"
+            style="display: flex;align-items: center;justify-content: center;"
+          >
             <span class="color-title">{{ $t('chart.backgroundColor') }}</span>
             <el-color-picker
               v-model="item.backgroundColor"
diff --git a/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue b/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue
index ca6ca5f715..f837e5749d 100644
--- a/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue
@@ -1,10 +1,24 @@
 <template>
   <el-col>
-    <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addThreshold" />
+    <el-button
+      icon="el-icon-plus"
+      circle
+      size="mini"
+      style="margin-bottom: 10px;"
+      @click="addThreshold"
+    />
     <div style="max-height: 50vh;overflow-y: auto;">
-      <el-row v-for="(item,index) in thresholdArr" :key="index" class="line-item">
+      <el-row
+        v-for="(item,index) in thresholdArr"
+        :key="index"
+        class="line-item"
+      >
         <el-col :span="6">
-          <el-select v-model="item.term" size="mini" @change="changeThreshold">
+          <el-select
+            v-model="item.term"
+            size="mini"
+            @change="changeThreshold"
+          >
             <el-option-group
               v-for="(group,idx) in valueOptions"
               :key="idx"
@@ -19,19 +33,59 @@
             </el-option-group>
           </el-select>
         </el-col>
-        <el-col :span="14" style="text-align: center;">
-          <el-input v-if="item.term !== 'between'" v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeThreshold" />
+        <el-col
+          :span="14"
+          style="text-align: center;"
+        >
+          <el-input
+            v-if="item.term !== 'between'"
+            v-model="item.value"
+            class="value-item"
+            :placeholder="$t('chart.drag_block_label_value')"
+            size="mini"
+            clearable
+            @change="changeThreshold"
+          />
           <span v-if="item.term === 'between'">
-            <el-input v-model="item.min" class="between-item" :placeholder="$t('chart.axis_value_min')" size="mini" clearable @change="changeThreshold" />
+            <el-input
+              v-model="item.min"
+              class="between-item"
+              :placeholder="$t('chart.axis_value_min')"
+              size="mini"
+              clearable
+              @change="changeThreshold"
+            />
             <span style="margin: 0 4px;">≤{{ $t('chart.drag_block_label_value') }}≤</span>
-            <el-input v-model="item.max" class="between-item" :placeholder="$t('chart.axis_value_max')" size="mini" clearable @change="changeThreshold" />
+            <el-input
+              v-model="item.max"
+              class="between-item"
+              :placeholder="$t('chart.axis_value_max')"
+              size="mini"
+              clearable
+              @change="changeThreshold"
+            />
           </span>
         </el-col>
-        <el-col :span="2" style="text-align: center;">
-          <el-color-picker v-model="item.color" show-alpha class="color-picker-style" :predefine="predefineColors" @change="changeThreshold" />
+        <el-col
+          :span="2"
+          style="text-align: center;"
+        >
+          <el-color-picker
+            v-model="item.color"
+            show-alpha
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeThreshold"
+          />
         </el-col>
         <el-col :span="2">
-          <el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeThreshold(index)" />
+          <el-button
+            type="text"
+            icon="el-icon-delete"
+            circle
+            style="float: right"
+            @click="removeThreshold(index)"
+          />
         </el-col>
       </el-row>
     </div>
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 884ace0398..a6a5e8166e 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -1,9 +1,18 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
+      <el-form
+        ref="colorForm"
+        :model="colorForm"
+        label-width="80px"
+        size="mini"
+      >
         <div>
-          <el-form-item v-show="showProperty('value')" :label="$t('chart.color_case')" class="form-item">
+          <el-form-item
+            v-show="showProperty('value')"
+            :label="$t('chart.color_case')"
+            class="form-item"
+          >
             <el-popover
               placement="bottom"
               width="400"
@@ -12,15 +21,35 @@
               <div style="padding: 6px 10px;">
                 <div>
                   <span class="color-label">{{ $t('chart.system_case') }}</span>
-                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')">
-                    <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
+                  <el-select
+                    v-model="colorForm.value"
+                    :placeholder="$t('chart.pls_slc_color_case')"
+                    size="mini"
+                    @change="changeColorOption('value')"
+                  >
+                    <el-option
+                      v-for="option in colorCases"
+                      :key="option.value"
+                      :label="option.name"
+                      :value="option.value"
+                      style="display: flex;align-items: center;"
+                    >
                       <div style="float: left">
-                        <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
+                        <span
+                          v-for="(c,index) in option.colors"
+                          :key="index"
+                          :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}"
+                        />
                       </div>
                       <span style="margin-left: 4px;">{{ option.name }}</span>
                     </el-option>
                   </el-select>
-                  <el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">{{ $t('commons.reset') }}</el-button>
+                  <el-button
+                    size="mini"
+                    type="text"
+                    style="margin-left: 2px;"
+                    @click="resetCustomColor"
+                  >{{ $t('commons.reset') }}</el-button>
                 </div>
                 <!--自定义配色方案-->
                 <div
@@ -29,8 +58,17 @@
                   <div style="display: flex;align-items: center;margin-top: 10px;">
                     <span class="color-label">{{ $t('chart.custom_case') }}</span>
                     <span>
-                      <el-radio-group v-model="customColor" class="color-type">
-                        <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
+                      <el-radio-group
+                        v-model="customColor"
+                        class="color-type"
+                      >
+                        <el-radio
+                          v-for="(c,index) in colorForm.colors"
+                          :key="index"
+                          :label="c"
+                          style="padding: 2px;"
+                          @change="switchColor(index)"
+                        >
                           <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
                         </el-radio>
                       </el-radio-group>
@@ -39,15 +77,27 @@
                   <div style="display: flex;align-items: center;margin-top: 10px;">
                     <span class="color-label" />
                     <span>
-                      <el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
+                      <el-color-picker
+                        v-model="customColor"
+                        class="color-picker-style"
+                        :predefine="predefineColors"
+                        @change="switchColorCase"
+                      />
                     </span>
                   </div>
                 </div>
                 <!--自定义系列或维度枚举值颜色-->
-                <div v-show="showProperty('colorPanel')" style="display: flex;align-items: center;margin-top: 10px;">
+                <div
+                  v-show="showProperty('colorPanel')"
+                  style="display: flex;align-items: center;margin-top: 10px;"
+                >
                   <span class="color-label" />
                   <span>
-                    <span v-for="(c,index) in colorForm.colors" :key="index" style="padding: 2px;">
+                    <span
+                      v-for="(c,index) in colorForm.colors"
+                      :key="index"
+                      style="padding: 2px;"
+                    >
                       <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
                     </span>
                   </span>
@@ -70,47 +120,139 @@
                     :predefine="predefineColors"
                     @change="switchCustomColor(index)"
                   />
-                  <span class="span-label" :title="item.name">{{ item.name }}</span>
+                  <span
+                    class="span-label"
+                    :title="item.name"
+                  >{{ item.name }}</span>
                 </div>
               </div>
 
-              <div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
-                <span v-for="(c,index) in colorForm.colors" :key="index" :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+              <div
+                slot="reference"
+                style="cursor: pointer;margin-top: 2px;width: 180px;"
+              >
+                <span
+                  v-for="(c,index) in colorForm.colors"
+                  :key="index"
+                  :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}"
+                />
               </div>
             </el-popover>
           </el-form-item>
 
-          <el-form-item v-show="showProperty('quotaColor')" :label="$t('chart.quota_color')" class="form-item">
-            <el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('quotaColor')" />
+          <el-form-item
+            v-show="showProperty('quotaColor')"
+            :label="$t('chart.quota_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.quotaColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('quotaColor')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('dimensionColor')" :label="$t('chart.dimension_color')" class="form-item">
-            <el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('dimensionColor')" />
+          <el-form-item
+            v-show="showProperty('dimensionColor')"
+            :label="$t('chart.dimension_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.dimensionColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('dimensionColor')"
+            />
           </el-form-item>
         </div>
         <div>
-          <el-form-item v-show="showProperty('tableHeaderBgColor')" :label="$t('chart.table_header_bg')" class="form-item">
-            <el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderBgColor')" />
+          <el-form-item
+            v-show="showProperty('tableHeaderBgColor')"
+            :label="$t('chart.table_header_bg')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableHeaderBgColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('tableHeaderBgColor')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('tableItemBgColor')" :label="$t('chart.table_item_bg')" class="form-item">
-            <el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableItemBgColor')" />
+          <el-form-item
+            v-show="showProperty('tableItemBgColor')"
+            :label="$t('chart.table_item_bg')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableItemBgColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('tableItemBgColor')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('tableHeaderFontColor')" :label="$t('chart.table_header_font_color')" class="form-item">
-            <el-color-picker v-model="colorForm.tableHeaderFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderFontColor')" />
+          <el-form-item
+            v-show="showProperty('tableHeaderFontColor')"
+            :label="$t('chart.table_header_font_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableHeaderFontColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('tableHeaderFontColor')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('tableFontColor')" :label="$t('chart.table_item_font_color')" class="form-item">
-            <el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableFontColor')" />
+          <el-form-item
+            v-show="showProperty('tableFontColor')"
+            :label="$t('chart.table_item_font_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableFontColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('tableFontColor')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('tableBorderColor')" :label="$t('chart.table_border_color')" class="form-item">
-            <el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableBorderColor')" />
+          <el-form-item
+            v-show="showProperty('tableBorderColor')"
+            :label="$t('chart.table_border_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableBorderColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('tableBorderColor')"
+            />
           </el-form-item>
         </div>
 
-        <el-form-item v-show="showProperty('alpha')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
-          <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase('alpha')" />
+        <el-form-item
+          v-show="showProperty('alpha')"
+          :label="$t('chart.not_alpha')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="colorForm.alpha"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeColorCase('alpha')"
+          />
         </el-form-item>
 
-        <el-form-item v-show="showProperty('area-border-color') " :label="$t('chart.area_border_color')" class="form-item">
-          <el-color-picker v-model="colorForm.areaBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('areaBorderColor')" />
+        <el-form-item
+          v-show="showProperty('area-border-color') "
+          :label="$t('chart.area_border_color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="colorForm.areaBorderColor"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeColorCase('areaBorderColor')"
+          />
         </el-form-item>
       </el-form>
     </el-col>
@@ -237,6 +379,12 @@ export default {
       predefineColors: COLOR_PANEL
     }
   },
+  computed: {
+    ...mapState([
+      'batchOptStatus',
+      'componentViewsData'
+    ])
+  },
   watch: {
     'chart.id': {
       handler: function() {
@@ -250,12 +398,6 @@ export default {
       }
     }
   },
-  computed: {
-    ...mapState([
-      'batchOptStatus',
-      'componentViewsData'
-    ])
-  },
   mounted() {
     this.init()
     bus.$on('prop-change-data', this.initCustomColor)
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue b/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue
index 24bf2fdd3e..ca9f6b43cd 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue
@@ -2,7 +2,12 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
+      <el-form
+        ref="colorForm"
+        :model="colorForm"
+        label-width="80px"
+        size="mini"
+      >
         <div>
           <el-form-item
             v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label'"
@@ -40,14 +45,23 @@
                       <span style="margin-left: 4px;">{{ option.name }}</span>
                     </el-option>
                   </el-select>
-                  <el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">
+                  <el-button
+                    size="mini"
+                    type="text"
+                    style="margin-left: 2px;"
+                    @click="resetCustomColor"
+                  >
                     {{ $t('commons.reset') }}
                   </el-button>
                 </div>
                 <div style="display: flex;align-items: center;margin-top: 10px;">
                   <span class="color-label" />
                   <span>
-                    <span v-for="(c,index) in colorForm.colors" :key="index" style="padding: 2px;">
+                    <span
+                      v-for="(c,index) in colorForm.colors"
+                      :key="index"
+                      style="padding: 2px;"
+                    >
                       <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
                     </span>
                   </span>
@@ -58,7 +72,10 @@
                     :key="index"
                     style="display: flex;align-items: center;margin: 2px 0;"
                   >
-                    <span class="span-label" :title="item.name">{{ item.name }}</span>
+                    <span
+                      class="span-label"
+                      :title="item.name"
+                    >{{ item.name }}</span>
                     <el-color-picker
                       v-model="item.color"
                       class="color-picker-style"
@@ -69,7 +86,10 @@
                 </div>
               </div>
 
-              <div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
+              <div
+                slot="reference"
+                style="cursor: pointer;margin-top: 2px;width: 180px;"
+              >
                 <span
                   v-for="(c,index) in colorForm.colors"
                   :key="index"
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index 7883e7606b..5e3db7c8c8 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -1,69 +1,198 @@
 <template>
   <div style="width: 100%;">
     <el-col>
-      <el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="labelForm.show" @change="changeLabelAttr('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="labelForm"
+        :model="labelForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="labelForm.show"
+            @change="changeLabelAttr('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="labelForm.show">
-          <el-form-item v-show="showProperty('labelLine')" :label="$t('chart.pie_label_line_show')" class="form-item">
-            <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr('labelLine')">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('labelLine')"
+            :label="$t('chart.pie_label_line_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="labelForm.labelLine.show"
+              @change="changeLabelAttr('labelLine')"
+            >{{ $t('chart.pie_label_line_show') }}</el-checkbox>
           </el-form-item>
-          <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr('fontSize')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('fontSize')"
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.fontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeLabelAttr('fontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
+          <el-form-item
+            v-show="showProperty('color')"
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="labelForm.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeLabelAttr('color')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('position-pie') " :label="$t('chart.label_position')" class="form-item">
-            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
-              <el-option v-for="option in labelPositionPie" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('position-pie') "
+            :label="$t('chart.label_position')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.position"
+              :placeholder="$t('chart.label_position')"
+              @change="changeLabelAttr('position')"
+            >
+              <el-option
+                v-for="option in labelPositionPie"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('position-h') " :label="$t('chart.label_position')" class="form-item">
-            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
-              <el-option v-for="option in labelPositionH" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('position-h') "
+            :label="$t('chart.label_position')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.position"
+              :placeholder="$t('chart.label_position')"
+              @change="changeLabelAttr('position')"
+            >
+              <el-option
+                v-for="option in labelPositionH"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('position-v') " :label="$t('chart.label_position')" class="form-item">
-            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
-              <el-option v-for="option in labelPositionV" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('position-v') "
+            :label="$t('chart.label_position')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.position"
+              :placeholder="$t('chart.label_position')"
+              @change="changeLabelAttr('position')"
+            >
+              <el-option
+                v-for="option in labelPositionV"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('label-bg') " :label="$t('chart.label_bg')" class="form-item">
-            <el-color-picker v-model="labelForm.bgColor" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('bgColor')" />
+          <el-form-item
+            v-show="showProperty('label-bg') "
+            :label="$t('chart.label_bg')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="labelForm.bgColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeLabelAttr('bgColor')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('label-show-shadow')" :label="$t('chart.label_shadow')" class="form-item">
-            <el-checkbox v-model="labelForm.showShadow" @change="changeLabelAttr('showShadow')">{{ $t('chart.show') }}</el-checkbox>
+          <el-form-item
+            v-show="showProperty('label-show-shadow')"
+            :label="$t('chart.label_shadow')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="labelForm.showShadow"
+              @change="changeLabelAttr('showShadow')"
+            >{{ $t('chart.show') }}</el-checkbox>
           </el-form-item>
-          <el-form-item v-show="showProperty('label-shadow-color') && labelForm.showShadow" :label="$t('chart.label_shadow_color')" class="form-item">
-            <el-color-picker v-model="labelForm.shadowColor" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('shadowColor')" />
+          <el-form-item
+            v-show="showProperty('label-shadow-color') && labelForm.showShadow"
+            :label="$t('chart.label_shadow_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="labelForm.shadowColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeLabelAttr('shadowColor')"
+            />
           </el-form-item>
 
-          <el-form-item v-show="showProperty('formatter')" class="form-item">
+          <el-form-item
+            v-show="showProperty('formatter')"
+            class="form-item"
+          >
             <span slot="label">
               <span class="span-box">
                 <span>{{ $t('chart.content_formatter') }}</span>
-                <el-tooltip class="item" effect="dark" placement="bottom">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  placement="bottom"
+                >
                   <div slot="content">
                     字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。
                   </div>
-                  <i class="el-icon-info" style="cursor: pointer;" />
+                  <i
+                    class="el-icon-info"
+                    style="cursor: pointer;"
+                  />
                 </el-tooltip>
               </span>
             </span>
-            <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr('formatter')" />
+            <el-input
+              v-model="labelForm.formatter"
+              type="textarea"
+              :autosize="{ minRows: 4, maxRows: 4}"
+              @blur="changeLabelAttr('formatter')"
+            />
           </el-form-item>
         </div>
-        <el-form-item v-show="showProperty('gaugeFormatter')" class="form-item">
+        <el-form-item
+          v-show="showProperty('gaugeFormatter')"
+          class="form-item"
+        >
           <span slot="label">
             <span class="span-box">
               <span>{{ $t('chart.content_formatter') }}</span>
             </span>
           </span>
-          <el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr('gaugeFormatter')" />
+          <el-input
+            v-model="labelForm.gaugeFormatter"
+            type="textarea"
+            :autosize="{ minRows: 4, maxRows: 4}"
+            @blur="changeLabelAttr('gaugeFormatter')"
+          />
         </el-form-item>
       </el-form>
     </el-col>
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
index d49c97bad9..a59b80c5ef 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
@@ -1,73 +1,243 @@
 <template>
   <div style="width: 100%;">
     <el-col>
-      <el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="labelForm.show" @change="changeLabelAttr('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="labelForm"
+        :model="labelForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="labelForm.show"
+            @change="changeLabelAttr('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="labelForm.show">
-          <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr('fontSize')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('fontSize')"
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.fontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeLabelAttr('fontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
+          <el-form-item
+            v-show="showProperty('color')"
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="labelForm.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeLabelAttr('color')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('position-v')" :label="$t('chart.label_position')" class="form-item">
-            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
-              <el-option v-for="option in labelPositionV" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('position-v')"
+            :label="$t('chart.label_position')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.position"
+              :placeholder="$t('chart.label_position')"
+              @change="changeLabelAttr('position')"
+            >
+              <el-option
+                v-for="option in labelPositionV"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('position-pie')" :label="$t('chart.label_position')" class="form-item">
-            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
-              <el-option v-for="option in labelPositionPie" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('position-pie')"
+            :label="$t('chart.label_position')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.position"
+              :placeholder="$t('chart.label_position')"
+              @change="changeLabelAttr('position')"
+            >
+              <el-option
+                v-for="option in labelPositionPie"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('position-h')" :label="$t('chart.label_position')" class="form-item">
-            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
-              <el-option v-for="option in labelPositionH" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('position-h')"
+            :label="$t('chart.label_position')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.position"
+              :placeholder="$t('chart.label_position')"
+              @change="changeLabelAttr('position')"
+            >
+              <el-option
+                v-for="option in labelPositionH"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('reserve-decimal-count')" :label="$t('chart.label_reserve_decimal_count')" class="form-item">
-            <el-radio-group v-model="labelForm.reserveDecimalCount" :label="$t('chart.label_reserve_decimal_count')" @change="changeLabelAttr('reserveDecimalCount')">
-              <el-radio v-for="option in reserveDecimalCountOptions" :key="option.value" :label="option.value">{{ option.name }}</el-radio>
+          <el-form-item
+            v-show="showProperty('reserve-decimal-count')"
+            :label="$t('chart.label_reserve_decimal_count')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="labelForm.reserveDecimalCount"
+              :label="$t('chart.label_reserve_decimal_count')"
+              @change="changeLabelAttr('reserveDecimalCount')"
+            >
+              <el-radio
+                v-for="option in reserveDecimalCountOptions"
+                :key="option.value"
+                :label="option.value"
+              >{{ option.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
         </div>
       </el-form>
 
-      <el-form v-show="showProperty('labelGauge') && chart.type && (chart.type.includes('gauge') || chart.type.includes('liquid'))" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        v-show="showProperty('labelGauge') && chart.type && (chart.type.includes('gauge') || chart.type.includes('liquid'))"
+        ref="labelForm"
+        :model="labelForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="labelForm.show"
+            @change="changeLabelAttr"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="labelForm.show">
-          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.fontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeLabelAttr"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
+          <el-form-item
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="labelForm.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeLabelAttr"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
-            <el-select v-model="labelForm.gaugeLabelFormatter.type" @change="changeLabelAttr">
-              <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+          <el-form-item
+            :label="$t('chart.value_formatter_type')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.gaugeLabelFormatter.type"
+              @change="changeLabelAttr"
+            >
+              <el-option
+                v-for="type in typeList"
+                :key="type.value"
+                :label="$t('chart.' + type.name)"
+                :value="type.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="labelForm.gaugeLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
-            <el-input-number v-model="labelForm.gaugeLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeLabelAttr" />
+          <el-form-item
+            v-show="labelForm.gaugeLabelFormatter.type !== 'auto'"
+            :label="$t('chart.value_formatter_decimal_count')"
+            class="form-item"
+          >
+            <el-input-number
+              v-model="labelForm.gaugeLabelFormatter.decimalCount"
+              :precision="0"
+              :min="0"
+              :max="10"
+              size="mini"
+              @change="changeLabelAttr"
+            />
           </el-form-item>
-          <el-form-item v-show="labelForm.gaugeLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
-            <el-select v-model="labelForm.gaugeLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeLabelAttr">
-              <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+          <el-form-item
+            v-show="labelForm.gaugeLabelFormatter.type !== 'percent'"
+            :label="$t('chart.value_formatter_unit')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.gaugeLabelFormatter.unit"
+              :placeholder="$t('chart.pls_select_field')"
+              size="mini"
+              @change="changeLabelAttr"
+            >
+              <el-option
+                v-for="item in unitList"
+                :key="item.value"
+                :label="$t('chart.' + item.name)"
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
-            <el-input v-model="labelForm.gaugeLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeLabelAttr" />
+          <el-form-item
+            :label="$t('chart.value_formatter_suffix')"
+            class="form-item"
+          >
+            <el-input
+              v-model="labelForm.gaugeLabelFormatter.suffix"
+              size="mini"
+              clearable
+              :placeholder="$t('commons.input_content')"
+              @change="changeLabelAttr"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
-            <el-checkbox v-model="labelForm.gaugeLabelFormatter.thousandSeparator" @change="changeLabelAttr" />
+          <el-form-item
+            :label="$t('chart.value_formatter_thousand_separator')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="labelForm.gaugeLabelFormatter.thousandSeparator"
+              @change="changeLabelAttr"
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index ae397614bd..f69def9aa9 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -1,31 +1,97 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
+      <el-form
+        ref="sizeFormBar"
+        :model="sizeForm"
+        label-width="80px"
+        size="mini"
+      >
         <!--bar-begin-->
-        <el-form-item v-show="showProperty('barDefault')" :label="$t('chart.adapt')" class="form-item">
-          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('barDefault')"
+          :label="$t('chart.adapt')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.barDefault"
+            @change="changeBarSizeCase('barDefault')"
+          >{{ $t('chart.adapt') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('barWidth')" :label="$t('chart.bar_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase('barWidth')" />
+        <el-form-item
+          v-show="showProperty('barWidth')"
+          :label="$t('chart.bar_width')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.barWidth"
+            :disabled="sizeForm.barDefault"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="1"
+            :max="80"
+            @change="changeBarSizeCase('barWidth')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase('barGap')" />
+        <el-form-item
+          v-show="showProperty('barGap')"
+          :label="$t('chart.bar_gap')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.barGap"
+            :disabled="sizeForm.barDefault"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="5"
+            :step="0.1"
+            @change="changeBarSizeCase('barGap')"
+          />
         </el-form-item>
         <!--bar-end-->
 
         <!--line-begin-->
-        <el-form-item v-show="showProperty('lineWidth')" :label="$t('chart.line_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('lineWidth')" />
+        <el-form-item
+          v-show="showProperty('lineWidth')"
+          :label="$t('chart.line_width')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.lineWidth"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="10"
+            @change="changeBarSizeCase('lineWidth')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('lineType')" :label="$t('chart.line_type')" class="form-item">
-          <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase('lineType')">
+        <el-form-item
+          v-show="showProperty('lineType')"
+          :label="$t('chart.line_type')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.lineType"
+            @change="changeBarSizeCase('lineType')"
+          >
             <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
             <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
-          <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
+        <el-form-item
+          v-show="showProperty('lineSymbol')"
+          :label="$t('chart.line_symbol')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.lineSymbol"
+            :placeholder="$t('chart.line_symbol')"
+            @change="changeBarSizeCase('lineSymbol')"
+          >
             <el-option
               v-for="item in lineSymbolOptions"
               :key="item.value"
@@ -34,62 +100,181 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('lineSymbolSize')" :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase('lineSymbolSize')" />
+        <el-form-item
+          v-show="showProperty('lineSymbolSize')"
+          :label="$t('chart.line_symbol_size')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.lineSymbolSize"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="20"
+            @change="changeBarSizeCase('lineSymbolSize')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('lineSmooth')" :label="$t('chart.line_smooth')" class="form-item">
-          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('lineSmooth')"
+          :label="$t('chart.line_smooth')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.lineSmooth"
+            @change="changeBarSizeCase('lineSmooth')"
+          >{{ $t('chart.line_smooth') }}</el-checkbox>
         </el-form-item>
 
         <!--line-end-->
         <!--pie-begin-->
-        <el-form-item v-show="showProperty('pieInnerRadius')" :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieInnerRadius')" />
+        <el-form-item
+          v-show="showProperty('pieInnerRadius')"
+          :label="$t('chart.pie_inner_radius')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.pieInnerRadius"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="100"
+            @change="changeBarSizeCase('pieInnerRadius')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('pieOuterRadius')" :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieOuterRadius')" />
+        <el-form-item
+          v-show="showProperty('pieOuterRadius')"
+          :label="$t('chart.pie_outer_radius')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.pieOuterRadius"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="100"
+            @change="changeBarSizeCase('pieOuterRadius')"
+          />
         </el-form-item>
 
         <span v-show="showProperty('pieRoseType') || showProperty('pieRoseRadius') ">
-          <el-form-item v-show="showProperty('pieRoseType')" :label="$t('chart.rose_type')" class="form-item">
-            <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase('pieRoseType')">
+          <el-form-item
+            v-show="showProperty('pieRoseType')"
+            :label="$t('chart.rose_type')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="sizeForm.pieRoseType"
+              size="mini"
+              @change="changeBarSizeCase('pieRoseType')"
+            >
               <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
               <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('pieRoseRadius')" :label="$t('chart.rose_radius')" class="form-item form-item-slider">
-            <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieRoseRadius')" />
+          <el-form-item
+            v-show="showProperty('pieRoseRadius')"
+            :label="$t('chart.rose_radius')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.pieRoseRadius"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              :min="0"
+              :max="100"
+              @change="changeBarSizeCase('pieRoseRadius')"
+            />
           </el-form-item>
         </span>
         <!--pie-end-->
         <!--funnel-begin-->
 
-        <el-form-item v-show="showProperty('funnelWidth')" :label="$t('chart.funnel_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('funnelWidth')" />
+        <el-form-item
+          v-show="showProperty('funnelWidth')"
+          :label="$t('chart.funnel_width')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.funnelWidth"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="100"
+            @change="changeBarSizeCase('funnelWidth')"
+          />
         </el-form-item>
 
         <!--funnel-end-->
         <!--radar-begin-->
-        <el-form-item v-show="showProperty('radarShape')" :label="$t('chart.shape')" class="form-item">
-          <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase('radarShape')">
+        <el-form-item
+          v-show="showProperty('radarShape')"
+          :label="$t('chart.shape')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.radarShape"
+            size="mini"
+            @change="changeBarSizeCase('radarShape')"
+          >
             <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
             <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-show="showProperty('radarSize')" :label="$t('chart.radar_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('radarSize')" />
+        <el-form-item
+          v-show="showProperty('radarSize')"
+          :label="$t('chart.radar_size')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.radarSize"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="100"
+            @change="changeBarSizeCase('radarSize')"
+          />
         </el-form-item>
         <!--radar-end-->
         <!--table-begin-->
 
-        <el-form-item v-show="showProperty('tablePageMode')" label-width="100px" :label="$t('chart.table_page_mode')" class="form-item">
-          <el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase('tablePageMode')">
-            <el-option :label="$t('chart.page_mode_page')" value="page" />
-            <el-option :label="$t('chart.page_mode_pull')" value="pull" />
+        <el-form-item
+          v-show="showProperty('tablePageMode')"
+          label-width="100px"
+          :label="$t('chart.table_page_mode')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tablePageMode"
+            :placeholder="$t('chart.table_page_mode')"
+            @change="changeBarSizeCase('tablePageMode')"
+          >
+            <el-option
+              :label="$t('chart.page_mode_page')"
+              value="page"
+            />
+            <el-option
+              :label="$t('chart.page_mode_pull')"
+              value="pull"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'" label-width="100px" :label="$t('chart.table_page_size')" class="form-item">
-          <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase('tablePageSize')">
+        <el-form-item
+          v-show="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'"
+          label-width="100px"
+          :label="$t('chart.table_page_size')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tablePageSize"
+            :placeholder="$t('chart.table_page_size')"
+            @change="changeBarSizeCase('tablePageSize')"
+          >
             <el-option
               v-for="item in pageSizeOptions"
               :key="item.value"
@@ -98,97 +283,340 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('tableTitleFontSize')" label-width="100px" :label="$t('chart.table_title_fontsize')" class="form-item">
-          <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase('tableTitleFontSize')">
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('tableTitleFontSize')"
+          label-width="100px"
+          :label="$t('chart.table_title_fontsize')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tableTitleFontSize"
+            :placeholder="$t('chart.table_title_fontsize')"
+            @change="changeBarSizeCase('tableTitleFontSize')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('tableItemFontSize')" label-width="100px" :label="$t('chart.table_item_fontsize')" class="form-item">
-          <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase('tableItemFontSize')">
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('tableItemFontSize')"
+          label-width="100px"
+          :label="$t('chart.table_item_fontsize')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tableItemFontSize"
+            :placeholder="$t('chart.table_item_fontsize')"
+            @change="changeBarSizeCase('tableItemFontSize')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('tableTitleHeight')" label-width="100px" :label="$t('chart.table_title_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableTitleHeight')" />
+        <el-form-item
+          v-show="showProperty('tableTitleHeight')"
+          label-width="100px"
+          :label="$t('chart.table_title_height')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.tableTitleHeight"
+            :min="36"
+            :max="100"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBarSizeCase('tableTitleHeight')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('tableItemHeight')" label-width="100px" :label="$t('chart.table_item_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableItemHeight')" />
+        <el-form-item
+          v-show="showProperty('tableItemHeight')"
+          label-width="100px"
+          :label="$t('chart.table_item_height')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.tableItemHeight"
+            :min="36"
+            :max="100"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBarSizeCase('tableItemHeight')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('tableColumnWidth')" label-width="100px" :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableColumnWidth')" />
+        <el-form-item
+          v-show="showProperty('tableColumnWidth')"
+          label-width="100px"
+          :label="$t('chart.table_column_width_config')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.tableColumnWidth"
+            :min="10"
+            :max="1000"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBarSizeCase('tableColumnWidth')"
+          />
         </el-form-item>
         <!--table-end-->
         <!--gauge-begin-->
-        <el-form-item v-show="showProperty('gaugeMin')" :label="$t('chart.min')" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase('gaugeMin')" />
+        <el-form-item
+          v-show="showProperty('gaugeMin')"
+          :label="$t('chart.min')"
+          class="form-item form-item-slider"
+        >
+          <el-input-number
+            v-model="sizeForm.gaugeMin"
+            size="mini"
+            @change="changeBarSizeCase('gaugeMin')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('gaugeMax')" :label="$t('chart.max')" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase('gaugeMax')" />
+        <el-form-item
+          v-show="showProperty('gaugeMax')"
+          :label="$t('chart.max')"
+          class="form-item form-item-slider"
+        >
+          <el-input-number
+            v-model="sizeForm.gaugeMax"
+            size="mini"
+            @change="changeBarSizeCase('gaugeMax')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('gaugeStartAngle')" :label="$t('chart.start_angle')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeStartAngle')" />
+        <el-form-item
+          v-show="showProperty('gaugeStartAngle')"
+          :label="$t('chart.start_angle')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.gaugeStartAngle"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="-360"
+            :max="360"
+            @change="changeBarSizeCase('gaugeStartAngle')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('gaugeEndAngle')" :label="$t('chart.end_angle')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeEndAngle')" />
+        <el-form-item
+          v-show="showProperty('gaugeEndAngle')"
+          :label="$t('chart.end_angle')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.gaugeEndAngle"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="-360"
+            :max="360"
+            @change="changeBarSizeCase('gaugeEndAngle')"
+          />
         </el-form-item>
         <!--gauge-end-->
         <!--text&label-start-->
-        <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
-          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('quotaFontSize')"
+          :label="$t('chart.quota_font_size')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaFontSize"
+            :placeholder="$t('chart.quota_font_size')"
+            @change="changeBarSizeCase('quotaFontSize')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('quotaFontFamily')" :label="$t('chart.quota_font_family')" class="form-item">
-          <el-select v-model="sizeForm.quotaFontFamily" :placeholder="$t('chart.quota_font_family')" @change="changeBarSizeCase('quotaFontFamily')">
-            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('quotaFontFamily')"
+          :label="$t('chart.quota_font_family')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaFontFamily"
+            :placeholder="$t('chart.quota_font_family')"
+            @change="changeBarSizeCase('quotaFontFamily')"
+          >
+            <el-option
+              v-for="option in fontFamily"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('quotaFontStyle')" :label="$t('chart.quota_text_style')" class="form-item">
-          <el-checkbox v-model="sizeForm.quotaFontIsItalic" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
-          <el-checkbox v-model="sizeForm.quotaFontIsBolder" @change="changeBarSizeCase('quotaFontIsBolder')">{{ $t('chart.bolder') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('quotaFontStyle')"
+          :label="$t('chart.quota_text_style')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.quotaFontIsItalic"
+            @change="changeBarSizeCase('quotaFontIsItalic')"
+          >{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox
+            v-model="sizeForm.quotaFontIsBolder"
+            @change="changeBarSizeCase('quotaFontIsBolder')"
+          >{{ $t('chart.bolder') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('quotaLetterSpace')" :label="$t('chart.quota_letter_space')" class="form-item">
-          <el-select v-model="sizeForm.quotaLetterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeBarSizeCase('quotaLetterSpace')">
-            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('quotaLetterSpace')"
+          :label="$t('chart.quota_letter_space')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaLetterSpace"
+            :placeholder="$t('chart.quota_letter_space')"
+            @change="changeBarSizeCase('quotaLetterSpace')"
+          >
+            <el-option
+              v-for="option in fontLetterSpace"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('quotaFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
-          <el-checkbox v-model="sizeForm.quotaFontShadow" @change="changeBarSizeCase('quotaFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('quotaFontShadow')"
+          :label="$t('chart.font_shadow')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.quotaFontShadow"
+            @change="changeBarSizeCase('quotaFontShadow')"
+          >{{ $t('chart.font_shadow') }}</el-checkbox>
         </el-form-item>
         <el-divider v-if="showProperty('dimensionShow')" />
-        <el-form-item v-show="showProperty('dimensionShow')" :label="$t('chart.dimension_show')" class="form-item">
-          <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('dimensionShow')"
+          :label="$t('chart.dimension_show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.dimensionShow"
+            @change="changeBarSizeCase('dimensionShow')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('dimensionFontSize')" :label="$t('chart.dimension_font_size')" class="form-item">
-          <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase('dimensionFontSize')">
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('dimensionFontSize')"
+          :label="$t('chart.dimension_font_size')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.dimensionFontSize"
+            :placeholder="$t('chart.dimension_font_size')"
+            @change="changeBarSizeCase('dimensionFontSize')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('dimensionFontFamily')" :label="$t('chart.dimension_font_family')" class="form-item">
-          <el-select v-model="sizeForm.dimensionFontFamily" :placeholder="$t('chart.dimension_font_family')" @change="changeBarSizeCase('dimensionFontFamily')">
-            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('dimensionFontFamily')"
+          :label="$t('chart.dimension_font_family')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.dimensionFontFamily"
+            :placeholder="$t('chart.dimension_font_family')"
+            @change="changeBarSizeCase('dimensionFontFamily')"
+          >
+            <el-option
+              v-for="option in fontFamily"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('dimensionFontStyle')" :label="$t('chart.dimension_text_style')" class="form-item">
-          <el-checkbox v-model="sizeForm.dimensionFontIsItalic" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
-          <el-checkbox v-model="sizeForm.dimensionFontIsBolder" @change="changeBarSizeCase('dimensionFontIsBolder')">{{ $t('chart.bolder') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('dimensionFontStyle')"
+          :label="$t('chart.dimension_text_style')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.dimensionFontIsItalic"
+            @change="changeBarSizeCase('dimensionFontIsItalic')"
+          >{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox
+            v-model="sizeForm.dimensionFontIsBolder"
+            @change="changeBarSizeCase('dimensionFontIsBolder')"
+          >{{ $t('chart.bolder') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('dimensionLetterSpace')" :label="$t('chart.dimension_letter_space')" class="form-item">
-          <el-select v-model="sizeForm.dimensionLetterSpace" :placeholder="$t('chart.dimension_letter_space')" @change="changeBarSizeCase('dimensionLetterSpace')">
-            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('dimensionLetterSpace')"
+          :label="$t('chart.dimension_letter_space')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.dimensionLetterSpace"
+            :placeholder="$t('chart.dimension_letter_space')"
+            @change="changeBarSizeCase('dimensionLetterSpace')"
+          >
+            <el-option
+              v-for="option in fontLetterSpace"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('dimensionFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
-          <el-checkbox v-model="sizeForm.dimensionFontShadow" @change="changeBarSizeCase('dimensionFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('dimensionFontShadow')"
+          :label="$t('chart.font_shadow')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.dimensionFontShadow"
+            @change="changeBarSizeCase('dimensionFontShadow')"
+          >{{ $t('chart.font_shadow') }}</el-checkbox>
         </el-form-item>
         <el-divider v-if="showProperty('spaceSplit')" />
-        <el-form-item v-show="showProperty('spaceSplit')" :label="$t('chart.space_split')" class="form-item">
-          <el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
+        <el-form-item
+          v-show="showProperty('spaceSplit')"
+          :label="$t('chart.space_split')"
+          class="form-item"
+        >
+          <el-input-number
+            v-model="sizeForm.spaceSplit"
+            :min="0"
+            size="mini"
+            @change="changeBarSizeCase('spaceSplit')"
+          />
         </el-form-item>
         <!--text&label-end-->
         <!--scatter-begin-->
-        <el-form-item v-show="showProperty('scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
-          <el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('scatterSymbol')">
+        <el-form-item
+          v-show="showProperty('scatterSymbol')"
+          :label="$t('chart.bubble_symbol')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.scatterSymbol"
+            :placeholder="$t('chart.line_symbol')"
+            @change="changeBarSizeCase('scatterSymbol')"
+          >
             <el-option
               v-for="item in lineSymbolOptions"
               :key="item.value"
@@ -197,43 +625,140 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('scatterSymbolSize')" :label="$t('chart.bubble_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase('scatterSymbolSize')" />
+        <el-form-item
+          v-show="showProperty('scatterSymbolSize')"
+          :label="$t('chart.bubble_size')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.scatterSymbolSize"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="1"
+            :max="40"
+            @change="changeBarSizeCase('scatterSymbolSize')"
+          />
         </el-form-item>
 
         <!--scatter-end-->
         <!--treemap-begin-->
-        <el-form-item v-show="showProperty('treemapWidth')" :label="$t('chart.width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('treemapWidth')" />
+        <el-form-item
+          v-show="showProperty('treemapWidth')"
+          :label="$t('chart.width')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.treemapWidth"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="100"
+            @change="changeBarSizeCase('treemapWidth')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('treemapHeight')" :label="$t('chart.height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('treemapHeight')" />
+        <el-form-item
+          v-show="showProperty('treemapHeight')"
+          :label="$t('chart.height')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.treemapHeight"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="100"
+            @change="changeBarSizeCase('treemapHeight')"
+          />
         </el-form-item>
         <!--treemap-end-->
         <!--chart-mix-start-->
         <span v-show="showProperty('mix')">
-          <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
-          <el-form-item :label="$t('chart.adapt')" class="form-item">
-            <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
+          <el-divider
+            content-position="center"
+            class="divider-style"
+          >{{ $t('chart.chart_bar') }}</el-divider>
+          <el-form-item
+            :label="$t('chart.adapt')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="sizeForm.barDefault"
+              @change="changeBarSizeCase('barDefault')"
+            >{{ $t('chart.adapt') }}</el-checkbox>
           </el-form-item>
-          <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
-            <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase('barWidth')" />
+          <el-form-item
+            :label="$t('chart.bar_width')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.barWidth"
+              :disabled="sizeForm.barDefault"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              :min="1"
+              :max="80"
+              @change="changeBarSizeCase('barWidth')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
-            <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase('barGap')" />
+          <el-form-item
+            :label="$t('chart.bar_gap')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.barGap"
+              :disabled="sizeForm.barDefault"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              :min="0"
+              :max="5"
+              :step="0.1"
+              @change="changeBarSizeCase('barGap')"
+            />
           </el-form-item>
-          <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
-          <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
-            <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('lineWidth')" />
+          <el-divider
+            content-position="center"
+            class="divider-style"
+          >{{ $t('chart.chart_line') }}</el-divider>
+          <el-form-item
+            :label="$t('chart.line_width')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.lineWidth"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              :min="0"
+              :max="10"
+              @change="changeBarSizeCase('lineWidth')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.line_type')" class="form-item">
-            <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase('lineType')">
+          <el-form-item
+            :label="$t('chart.line_type')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="sizeForm.lineType"
+              @change="changeBarSizeCase('lineType')"
+            >
               <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
               <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.line_symbol')" class="form-item">
-            <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
+          <el-form-item
+            :label="$t('chart.line_symbol')"
+            class="form-item"
+          >
+            <el-select
+              v-model="sizeForm.lineSymbol"
+              :placeholder="$t('chart.line_symbol')"
+              @change="changeBarSizeCase('lineSymbol')"
+            >
               <el-option
                 v-for="item in lineSymbolOptions"
                 :key="item.value"
@@ -242,15 +767,42 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
-            <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
+          <el-form-item
+            :label="$t('chart.line_symbol_size')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.lineSymbolSize"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              :min="0"
+              :max="20"
+              @change="changeBarSizeCase"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.line_smooth')" class="form-item">
-            <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}</el-checkbox>
+          <el-form-item
+            :label="$t('chart.line_smooth')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="sizeForm.lineSmooth"
+              @change="changeBarSizeCase('lineSmooth')"
+            >{{ $t('chart.line_smooth') }}</el-checkbox>
           </el-form-item>
-          <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
-          <el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
-            <el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('scatterSymbol')">
+          <el-divider
+            content-position="center"
+            class="divider-style"
+          >{{ $t('chart.chart_scatter') }}</el-divider>
+          <el-form-item
+            :label="$t('chart.bubble_symbol')"
+            class="form-item"
+          >
+            <el-select
+              v-model="sizeForm.scatterSymbol"
+              :placeholder="$t('chart.line_symbol')"
+              @change="changeBarSizeCase('scatterSymbol')"
+            >
               <el-option
                 v-for="item in lineSymbolOptions"
                 :key="item.value"
@@ -259,14 +811,33 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
-            <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase('scatterSymbolSize')" />
+          <el-form-item
+            :label="$t('chart.bubble_size')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.scatterSymbolSize"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              :min="1"
+              :max="40"
+              @change="changeBarSizeCase('scatterSymbolSize')"
+            />
           </el-form-item>
         </span>
         <!--chart-mix-end-->
         <!--liquid-begin-->
-        <el-form-item v-show="showProperty('liquidShape')" :label="$t('chart.liquid_shape')" class="form-item">
-          <el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase('liquidShape')">
+        <el-form-item
+          v-show="showProperty('liquidShape')"
+          :label="$t('chart.liquid_shape')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.liquidShape"
+            :placeholder="$t('chart.liquid_shape')"
+            @change="changeBarSizeCase('liquidShape')"
+          >
             <el-option
               v-for="item in liquidShapeOptions"
               :key="item.value"
@@ -275,23 +846,92 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('liquidMax')" :label="$t('chart.liquid_max')" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase('liquidMax')" />
+        <el-form-item
+          v-show="showProperty('liquidMax')"
+          :label="$t('chart.liquid_max')"
+          class="form-item form-item-slider"
+        >
+          <el-input-number
+            v-model="sizeForm.liquidMax"
+            :min="1"
+            size="mini"
+            @change="changeBarSizeCase('liquidMax')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('liquidSize')" :label="$t('chart.radar_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase('liquidSize')" />
+        <el-form-item
+          v-show="showProperty('liquidSize')"
+          :label="$t('chart.radar_size')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.liquidSize"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="1"
+            :max="100"
+            @change="changeBarSizeCase('liquidSize')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('liquidOutlineBorder')" :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase('liquidOutlineBorder')" />
+        <el-form-item
+          v-show="showProperty('liquidOutlineBorder')"
+          :label="$t('chart.liquid_outline_border')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.liquidOutlineBorder"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="1"
+            :max="20"
+            @change="changeBarSizeCase('liquidOutlineBorder')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('liquidOutlineDistance')" :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase('liquidOutlineDistance')" />
+        <el-form-item
+          v-show="showProperty('liquidOutlineDistance')"
+          :label="$t('chart.liquid_outline_distance')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.liquidOutlineDistance"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="20"
+            @change="changeBarSizeCase('liquidOutlineDistance')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('liquidWaveLength')" :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase('liquidWaveLength')" />
+        <el-form-item
+          v-show="showProperty('liquidWaveLength')"
+          :label="$t('chart.liquid_wave_length')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.liquidWaveLength"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="10"
+            :max="500"
+            @change="changeBarSizeCase('liquidWaveLength')"
+          />
         </el-form-item>
-        <el-form-item v-show="showProperty('liquidWaveCount')" :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase('liquidWaveCount')" />
+        <el-form-item
+          v-show="showProperty('liquidWaveCount')"
+          :label="$t('chart.liquid_wave_count')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.liquidWaveCount"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="2"
+            :max="10"
+            @change="changeBarSizeCase('liquidWaveCount')"
+          />
         </el-form-item>
 
         <!--liquid-end-->
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index 4d91ed5a9a..ea05c7c8b9 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -1,12 +1,28 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
+      <el-form
+        ref="sizeFormBar"
+        :model="sizeForm"
+        label-width="80px"
+        size="mini"
+      >
         <!--bar-begin-->
-        <el-form-item v-show="showProperty('barDefault')" :label="$t('chart.adapt')" class="form-item">
-          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('barDefault')"
+          :label="$t('chart.adapt')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.barDefault"
+            @change="changeBarSizeCase('barDefault')"
+          >{{ $t('chart.adapt') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
+        <el-form-item
+          v-show="showProperty('barGap')"
+          :label="$t('chart.bar_gap')"
+          class="form-item form-item-slider"
+        >
           <el-slider
             v-model="sizeForm.barGap"
             :disabled="sizeForm.barDefault"
@@ -36,8 +52,16 @@
             @change="changeBarSizeCase('lineWidth')"
           />
         </el-form-item>
-        <el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
-          <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
+        <el-form-item
+          v-show="showProperty('lineSymbol')"
+          :label="$t('chart.line_symbol')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.lineSymbol"
+            :placeholder="$t('chart.line_symbol')"
+            @change="changeBarSizeCase('lineSymbol')"
+          >
             <el-option
               v-for="item in lineSymbolOptions"
               :key="item.value"
@@ -61,8 +85,15 @@
             @change="changeBarSizeCase('lineSymbolSize')"
           />
         </el-form-item>
-        <el-form-item v-show="showProperty('lineSmooth')" :label="$t('chart.line_smooth')" class="form-item">
-          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}
+        <el-form-item
+          v-show="showProperty('lineSmooth')"
+          :label="$t('chart.line_smooth')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.lineSmooth"
+            @change="changeBarSizeCase('lineSmooth')"
+          >{{ $t('chart.line_smooth') }}
           </el-checkbox>
         </el-form-item>
         <!--line-end-->
@@ -100,8 +131,16 @@
         </el-form-item>
         <!--pie-end-->
         <!--radar-begin-->
-        <el-form-item v-show="showProperty('radarShape')" :label="$t('chart.shape')" class="form-item">
-          <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase('radarShape')">
+        <el-form-item
+          v-show="showProperty('radarShape')"
+          :label="$t('chart.shape')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.radarShape"
+            size="mini"
+            @change="changeBarSizeCase('radarShape')"
+          >
             <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
             <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
           </el-radio-group>
@@ -124,14 +163,25 @@
         <!--radar-end-->
         <!--table-begin-->
 
-        <el-form-item v-show="showProperty('tablePageMode')" label-width="100px" :label="$t('chart.table_page_mode')" class="form-item">
+        <el-form-item
+          v-show="showProperty('tablePageMode')"
+          label-width="100px"
+          :label="$t('chart.table_page_mode')"
+          class="form-item"
+        >
           <el-select
             v-model="sizeForm.tablePageMode"
             :placeholder="$t('chart.table_page_mode')"
             @change="changeBarSizeCase('tablePageMode')"
           >
-            <el-option :label="$t('chart.page_mode_page')" value="page" />
-            <el-option :label="$t('chart.page_mode_pull')" value="pull" />
+            <el-option
+              :label="$t('chart.page_mode_page')"
+              value="page"
+            />
+            <el-option
+              :label="$t('chart.page_mode_pull')"
+              value="pull"
+            />
           </el-select>
         </el-form-item>
         <el-form-item
@@ -164,7 +214,12 @@
             :placeholder="$t('chart.table_title_fontsize')"
             @change="changeBarSizeCase('tableTitleFontSize')"
           >
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
         <el-form-item
@@ -178,7 +233,12 @@
             :placeholder="$t('chart.table_item_fontsize')"
             @change="changeBarSizeCase('tableItemFontSize')"
           >
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
         <el-form-item
@@ -192,16 +252,31 @@
             :placeholder="$t('chart.table_header_align')"
             @change="changeBarSizeCase('tableHeaderAlign')"
           >
-            <el-option v-for="option in alignOptions" :key="option.value" :label="option.name" :value="option.value" />
+            <el-option
+              v-for="option in alignOptions"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('tableItemAlign')" label-width="100px" :label="$t('chart.table_item_align')" class="form-item">
+        <el-form-item
+          v-show="showProperty('tableItemAlign')"
+          label-width="100px"
+          :label="$t('chart.table_item_align')"
+          class="form-item"
+        >
           <el-select
             v-model="sizeForm.tableItemAlign"
             :placeholder="$t('chart.table_item_align')"
             @change="changeBarSizeCase('tableItemAlign')"
           >
-            <el-option v-for="option in alignOptions" :key="option.value" :label="option.name" :value="option.value" />
+            <el-option
+              v-for="option in alignOptions"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
         <el-form-item
@@ -242,19 +317,29 @@
           :label="$t('chart.table_column_width_config')"
           class="form-item"
         >
-          <el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase('tableColumnMode')">
+          <el-radio-group
+            v-model="sizeForm.tableColumnMode"
+            @change="changeBarSizeCase('tableColumnMode')"
+          >
             <el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
             <el-radio label="custom">
               <span>{{ $t('chart.table_column_custom') }}</span>
             </el-radio>
           </el-radio-group>
-          <el-tooltip class="item" effect="dark" placement="bottom">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom"
+          >
             <div slot="content">
               列宽并非任何时候都能生效。
               <br>
               容器宽度优先级高于列宽，即(表格容器宽度 / 列数 > 指定列宽)，则列宽优先取(容器宽度 / 列数)。
             </div>
-            <i class="el-icon-info" style="cursor: pointer;color: #606266;margin-left: 4px;" />
+            <i
+              class="el-icon-info"
+              style="cursor: pointer;color: #606266;margin-left: 4px;"
+            />
           </el-tooltip>
         </el-form-item>
         <el-form-item
@@ -273,22 +358,143 @@
             @change="changeBarSizeCase('tableColumnWidth')"
           />
         </el-form-item>
+
+        <!--chart-mix-start-->
+        <span v-show="showProperty('mix')">
+          <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
+          <el-form-item :label="$t('chart.adapt')" class="form-item">
+            <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
+          </el-form-item>
+          <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
+            <el-slider
+              v-model="sizeForm.barGap"
+              :disabled="sizeForm.barDefault"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              :min="0"
+              :max="5"
+              :step="0.1"
+              @change="changeBarSizeCase('barGap')"
+            />
+          </el-form-item>
+          <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
+          <el-form-item
+            :label="$t('chart.line_width')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.lineWidth"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              :min="0"
+              :max="10"
+              @change="changeBarSizeCase('lineWidth')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('chart.line_symbol')" class="form-item">
+            <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
+              <el-option
+                v-for="item in lineSymbolOptions"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            :label="$t('chart.line_symbol_size')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.lineSymbolSize"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              :min="0"
+              :max="20"
+              @change="changeBarSizeCase('lineSymbolSize')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('chart.line_smooth')" class="form-item">
+            <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}
+            </el-checkbox>
+          </el-form-item>
+          <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
+          <el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
+            <el-select
+              v-model="sizeForm.scatterSymbol"
+              :placeholder="$t('chart.line_symbol')"
+              @change="changeBarSizeCase('scatterSymbol')"
+            >
+              <el-option
+                v-for="item in lineSymbolOptions"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            :label="$t('chart.bubble_size')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.scatterSymbolSize"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              :min="1"
+              :max="40"
+              @change="changeBarSizeCase('scatterSymbolSize')"
+            />
+          </el-form-item>
+        </span>
+        <!--chart-mix-end-->
       </el-form>
       <!--table-end-->
 
       <!--gauge-begin-->
-      <el-form ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item v-show="showProperty('gaugeMin')" :label="$t('chart.min')" class="form-item">
-          <el-radio-group v-model="sizeForm.gaugeMinType" size="mini" @change="changeQuotaField('min')">
+      <el-form
+        ref="sizeFormGauge"
+        :model="sizeForm"
+        label-width="100px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('gaugeMin')"
+          :label="$t('chart.min')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.gaugeMinType"
+            size="mini"
+            @change="changeQuotaField('min')"
+          >
             <el-radio-button label="fix">{{ $t('chart.fix') }}</el-radio-button>
             <el-radio-button label="dynamic">{{ $t('chart.dynamic') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-if="showProperty('gaugeMin') && sizeForm.gaugeMinType === 'fix'" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase('gaugeMin')" />
+        <el-form-item
+          v-if="showProperty('gaugeMin') && sizeForm.gaugeMinType === 'fix'"
+          class="form-item form-item-slider"
+        >
+          <el-input-number
+            v-model="sizeForm.gaugeMin"
+            size="mini"
+            @change="changeBarSizeCase('gaugeMin')"
+          />
         </el-form-item>
-        <el-form-item v-if="showProperty('gaugeMin') && sizeForm.gaugeMinType === 'dynamic'" class="form-item form-flex">
-          <el-select v-model="sizeForm.gaugeMinField.id" :placeholder="$t('chart.field')" @change="changeQuotaField('min',true)">
+        <el-form-item
+          v-if="showProperty('gaugeMin') && sizeForm.gaugeMinType === 'dynamic'"
+          class="form-item form-flex"
+        >
+          <el-select
+            v-model="sizeForm.gaugeMinField.id"
+            :placeholder="$t('chart.field')"
+            @change="changeQuotaField('min',true)"
+          >
             <el-option
               v-for="item in quotaData"
               :key="item.id"
@@ -296,37 +502,118 @@
               :value="item.id"
             >
               <span style="float: left">
-                <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-                <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-                <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-                <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                <svg-icon
+                  v-if="item.deType === 0"
+                  icon-class="field_text"
+                  class="field-icon-text"
+                />
+                <svg-icon
+                  v-if="item.deType === 1"
+                  icon-class="field_time"
+                  class="field-icon-time"
+                />
+                <svg-icon
+                  v-if="item.deType === 2 || item.deType === 3"
+                  icon-class="field_value"
+                  class="field-icon-value"
+                />
+                <svg-icon
+                  v-if="item.deType === 5"
+                  icon-class="field_location"
+                  class="field-icon-location"
+                />
               </span>
               <span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
             </el-option>
           </el-select>
-          <el-select v-model="sizeForm.gaugeMinField.summary" :placeholder="$t('chart.summary')" @change="changeQuotaField('min')">
-            <el-option v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5" key="sum" value="sum" :label="$t('chart.sum')" />
-            <el-option v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5" key="avg" value="avg" :label="$t('chart.avg')" />
-            <el-option v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5" key="max" value="max" :label="$t('chart.max')" />
-            <el-option v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5" key="min" value="min" :label="$t('chart.min')" />
-            <el-option v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5" key="stddev_pop" value="stddev_pop" :label="$t('chart.stddev_pop')" />
-            <el-option v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5" key="var_pop" value="var_pop" :label="$t('chart.var_pop')" />
-            <el-option key="count" value="count" :label="$t('chart.count')" />
-            <el-option v-if="minField.id !== 'count'" key="count_distinct" value="count_distinct" :label="$t('chart.count_distinct')" />
+          <el-select
+            v-model="sizeForm.gaugeMinField.summary"
+            :placeholder="$t('chart.summary')"
+            @change="changeQuotaField('min')"
+          >
+            <el-option
+              v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5"
+              key="sum"
+              value="sum"
+              :label="$t('chart.sum')"
+            />
+            <el-option
+              v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5"
+              key="avg"
+              value="avg"
+              :label="$t('chart.avg')"
+            />
+            <el-option
+              v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5"
+              key="max"
+              value="max"
+              :label="$t('chart.max')"
+            />
+            <el-option
+              v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5"
+              key="min"
+              value="min"
+              :label="$t('chart.min')"
+            />
+            <el-option
+              v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5"
+              key="stddev_pop"
+              value="stddev_pop"
+              :label="$t('chart.stddev_pop')"
+            />
+            <el-option
+              v-if="minField.id !== 'count' && minField.deType !== 0 && minField.deType !== 1 && minField.deType !== 5"
+              key="var_pop"
+              value="var_pop"
+              :label="$t('chart.var_pop')"
+            />
+            <el-option
+              key="count"
+              value="count"
+              :label="$t('chart.count')"
+            />
+            <el-option
+              v-if="minField.id !== 'count'"
+              key="count_distinct"
+              value="count_distinct"
+              :label="$t('chart.count_distinct')"
+            />
           </el-select>
         </el-form-item>
 
-        <el-form-item v-show="showProperty('gaugeMax')" :label="$t('chart.max')" class="form-item">
-          <el-radio-group v-model="sizeForm.gaugeMaxType" size="mini" @change="changeQuotaField('max')">
+        <el-form-item
+          v-show="showProperty('gaugeMax')"
+          :label="$t('chart.max')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.gaugeMaxType"
+            size="mini"
+            @change="changeQuotaField('max')"
+          >
             <el-radio-button label="fix">{{ $t('chart.fix') }}</el-radio-button>
             <el-radio-button label="dynamic">{{ $t('chart.dynamic') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-if="showProperty('gaugeMax') && sizeForm.gaugeMaxType === 'fix'" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase('gaugeMax')" />
+        <el-form-item
+          v-if="showProperty('gaugeMax') && sizeForm.gaugeMaxType === 'fix'"
+          class="form-item form-item-slider"
+        >
+          <el-input-number
+            v-model="sizeForm.gaugeMax"
+            size="mini"
+            @change="changeBarSizeCase('gaugeMax')"
+          />
         </el-form-item>
-        <el-form-item v-if="showProperty('gaugeMax') && sizeForm.gaugeMaxType === 'dynamic'" class="form-item form-flex">
-          <el-select v-model="sizeForm.gaugeMaxField.id" :placeholder="$t('chart.field')" @change="changeQuotaField('max',true)">
+        <el-form-item
+          v-if="showProperty('gaugeMax') && sizeForm.gaugeMaxType === 'dynamic'"
+          class="form-item form-flex"
+        >
+          <el-select
+            v-model="sizeForm.gaugeMaxField.id"
+            :placeholder="$t('chart.field')"
+            @change="changeQuotaField('max',true)"
+          >
             <el-option
               v-for="item in quotaData"
               :key="item.id"
@@ -334,23 +621,82 @@
               :value="item.id"
             >
               <span style="float: left">
-                <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-                <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-                <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-                <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                <svg-icon
+                  v-if="item.deType === 0"
+                  icon-class="field_text"
+                  class="field-icon-text"
+                />
+                <svg-icon
+                  v-if="item.deType === 1"
+                  icon-class="field_time"
+                  class="field-icon-time"
+                />
+                <svg-icon
+                  v-if="item.deType === 2 || item.deType === 3"
+                  icon-class="field_value"
+                  class="field-icon-value"
+                />
+                <svg-icon
+                  v-if="item.deType === 5"
+                  icon-class="field_location"
+                  class="field-icon-location"
+                />
               </span>
               <span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
             </el-option>
           </el-select>
-          <el-select v-model="sizeForm.gaugeMaxField.summary" :placeholder="$t('chart.summary')" @change="changeQuotaField('max')">
-            <el-option v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5" key="sum" value="sum" :label="$t('chart.sum')" />
-            <el-option v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5" key="avg" value="avg" :label="$t('chart.avg')" />
-            <el-option v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5" key="max" value="max" :label="$t('chart.max')" />
-            <el-option v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5" key="min" value="min" :label="$t('chart.min')" />
-            <el-option v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5" key="stddev_pop" value="stddev_pop" :label="$t('chart.stddev_pop')" />
-            <el-option v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5" key="var_pop" value="var_pop" :label="$t('chart.var_pop')" />
-            <el-option key="count" value="count" :label="$t('chart.count')" />
-            <el-option v-if="maxField.id !== 'count'" key="count_distinct" value="count_distinct" :label="$t('chart.count_distinct')" />
+          <el-select
+            v-model="sizeForm.gaugeMaxField.summary"
+            :placeholder="$t('chart.summary')"
+            @change="changeQuotaField('max')"
+          >
+            <el-option
+              v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5"
+              key="sum"
+              value="sum"
+              :label="$t('chart.sum')"
+            />
+            <el-option
+              v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5"
+              key="avg"
+              value="avg"
+              :label="$t('chart.avg')"
+            />
+            <el-option
+              v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5"
+              key="max"
+              value="max"
+              :label="$t('chart.max')"
+            />
+            <el-option
+              v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5"
+              key="min"
+              value="min"
+              :label="$t('chart.min')"
+            />
+            <el-option
+              v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5"
+              key="stddev_pop"
+              value="stddev_pop"
+              :label="$t('chart.stddev_pop')"
+            />
+            <el-option
+              v-if="maxField.id !== 'count' && maxField.deType !== 0 && maxField.deType !== 1 && maxField.deType !== 5"
+              key="var_pop"
+              value="var_pop"
+              :label="$t('chart.var_pop')"
+            />
+            <el-option
+              key="count"
+              value="count"
+              :label="$t('chart.count')"
+            />
+            <el-option
+              v-if="maxField.id !== 'count'"
+              key="count_distinct"
+              value="count_distinct"
+              :label="$t('chart.count_distinct')"
+            />
           </el-select>
         </el-form-item>
 
@@ -384,35 +730,96 @@
             @change="changeBarSizeCase('gaugeEndAngle')"
           />
         </el-form-item>
-<!--        <el-form-item v-show="showProperty('gaugeTickCount')" :label="$t('chart.tick_count')" class="form-item form-item-slider">-->
-<!--          <el-input-number v-model="sizeForm.gaugeTickCount" :min="1" :step="1" :precision="0" size="mini" @change="changeBarSizeCase('gaugeTickCount')" />-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item v-show="showProperty('gaugeTickCount')" :label="$t('chart.tick_count')" class="form-item form-item-slider">-->
+        <!--          <el-input-number v-model="sizeForm.gaugeTickCount" :min="1" :step="1" :precision="0" size="mini" @change="changeBarSizeCase('gaugeTickCount')" />-->
+        <!--        </el-form-item>-->
       </el-form>
       <!--gauge-end-->
 
-      <el-form ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+      <el-form
+        ref="sizeFormPie"
+        :model="sizeForm"
+        label-width="100px"
+        size="mini"
+      >
         <!--text&label-start-->
-        <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
-          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('quotaFontSize')"
+          :label="$t('chart.quota_font_size')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaFontSize"
+            :placeholder="$t('chart.quota_font_size')"
+            @change="changeBarSizeCase('quotaFontSize')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('quotaFontFamily')" :label="$t('chart.quota_font_family')" class="form-item">
-          <el-select v-model="sizeForm.quotaFontFamily" :placeholder="$t('chart.quota_font_family')" @change="changeBarSizeCase('quotaFontFamily')">
-            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('quotaFontFamily')"
+          :label="$t('chart.quota_font_family')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaFontFamily"
+            :placeholder="$t('chart.quota_font_family')"
+            @change="changeBarSizeCase('quotaFontFamily')"
+          >
+            <el-option
+              v-for="option in fontFamily"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('quotaFontStyle')" :label="$t('chart.quota_text_style')" class="form-item">
-          <el-checkbox v-model="sizeForm.quotaFontIsItalic" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
-          <el-checkbox v-model="sizeForm.quotaFontIsBolder" @change="changeBarSizeCase('quotaFontIsBolder')">{{ $t('chart.bolder') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('quotaFontStyle')"
+          :label="$t('chart.quota_text_style')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.quotaFontIsItalic"
+            @change="changeBarSizeCase('quotaFontIsItalic')"
+          >{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox
+            v-model="sizeForm.quotaFontIsBolder"
+            @change="changeBarSizeCase('quotaFontIsBolder')"
+          >{{ $t('chart.bolder') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('quotaLetterSpace')" :label="$t('chart.quota_letter_space')" class="form-item">
-          <el-select v-model="sizeForm.quotaLetterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeBarSizeCase('quotaLetterSpace')">
-            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('quotaLetterSpace')"
+          :label="$t('chart.quota_letter_space')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaLetterSpace"
+            :placeholder="$t('chart.quota_letter_space')"
+            @change="changeBarSizeCase('quotaLetterSpace')"
+          >
+            <el-option
+              v-for="option in fontLetterSpace"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('quotaFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
-          <el-checkbox v-model="sizeForm.quotaFontShadow" @change="changeBarSizeCase('quotaFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('quotaFontShadow')"
+          :label="$t('chart.font_shadow')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.quotaFontShadow"
+            @change="changeBarSizeCase('quotaFontShadow')"
+          >{{ $t('chart.font_shadow') }}</el-checkbox>
         </el-form-item>
         <el-divider v-if="showProperty('dimensionShow')" />
         <el-form-item
@@ -420,7 +827,10 @@
           :label="$t('chart.dimension_show')"
           class="form-item"
         >
-          <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
+          <el-checkbox
+            v-model="sizeForm.dimensionShow"
+            @change="changeBarSizeCase('dimensionShow')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <el-form-item
           v-show="showProperty('dimensionFontSize')"
@@ -432,25 +842,73 @@
             :placeholder="$t('chart.dimension_font_size')"
             @change="changeBarSizeCase('dimensionFontSize')"
           >
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('dimensionFontFamily')" :label="$t('chart.dimension_font_family')" class="form-item">
-          <el-select v-model="sizeForm.dimensionFontFamily" :placeholder="$t('chart.dimension_font_family')" @change="changeBarSizeCase('dimensionFontFamily')">
-            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('dimensionFontFamily')"
+          :label="$t('chart.dimension_font_family')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.dimensionFontFamily"
+            :placeholder="$t('chart.dimension_font_family')"
+            @change="changeBarSizeCase('dimensionFontFamily')"
+          >
+            <el-option
+              v-for="option in fontFamily"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('dimensionFontStyle')" :label="$t('chart.dimension_text_style')" class="form-item">
-          <el-checkbox v-model="sizeForm.dimensionFontIsItalic" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
-          <el-checkbox v-model="sizeForm.dimensionFontIsBolder" @change="changeBarSizeCase('dimensionFontIsBolder')">{{ $t('chart.bolder') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('dimensionFontStyle')"
+          :label="$t('chart.dimension_text_style')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.dimensionFontIsItalic"
+            @change="changeBarSizeCase('dimensionFontIsItalic')"
+          >{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox
+            v-model="sizeForm.dimensionFontIsBolder"
+            @change="changeBarSizeCase('dimensionFontIsBolder')"
+          >{{ $t('chart.bolder') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="showProperty('dimensionLetterSpace')" :label="$t('chart.dimension_letter_space')" class="form-item">
-          <el-select v-model="sizeForm.dimensionLetterSpace" :placeholder="$t('chart.dimension_letter_space')" @change="changeBarSizeCase('dimensionLetterSpace')">
-            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+        <el-form-item
+          v-show="showProperty('dimensionLetterSpace')"
+          :label="$t('chart.dimension_letter_space')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.dimensionLetterSpace"
+            :placeholder="$t('chart.dimension_letter_space')"
+            @change="changeBarSizeCase('dimensionLetterSpace')"
+          >
+            <el-option
+              v-for="option in fontLetterSpace"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('dimensionFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
-          <el-checkbox v-model="sizeForm.dimensionFontShadow" @change="changeBarSizeCase('dimensionFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('dimensionFontShadow')"
+          :label="$t('chart.font_shadow')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.dimensionFontShadow"
+            @change="changeBarSizeCase('dimensionFontShadow')"
+          >{{ $t('chart.font_shadow') }}</el-checkbox>
         </el-form-item>
         <el-divider v-if="showProperty('spaceSplit')" />
         <el-form-item
@@ -458,11 +916,20 @@
           :label="$t('chart.space_split')"
           class="form-item"
         >
-          <el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
+          <el-input-number
+            v-model="sizeForm.spaceSplit"
+            :min="0"
+            size="mini"
+            @change="changeBarSizeCase('spaceSplit')"
+          />
         </el-form-item>
         <!--text&label-end-->
         <!--scatter-begin-->
-        <el-form-item v-show="showProperty('scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
+        <el-form-item
+          v-show="showProperty('scatterSymbol')"
+          :label="$t('chart.bubble_symbol')"
+          class="form-item"
+        >
           <el-select
             v-model="sizeForm.scatterSymbol"
             :placeholder="$t('chart.line_symbol')"
@@ -493,8 +960,16 @@
         </el-form-item>
         <!--scatter-end-->
         <!--liquid-begin-->
-        <el-form-item v-show="showProperty('liquidShape')" :label="$t('chart.liquid_shape')" class="form-item">
-          <el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase('liquidShape')">
+        <el-form-item
+          v-show="showProperty('liquidShape')"
+          :label="$t('chart.liquid_shape')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.liquidShape"
+            :placeholder="$t('chart.liquid_shape')"
+            @change="changeBarSizeCase('liquidShape')"
+          >
             <el-option
               v-for="item in liquidShapeOptions"
               :key="item.value"
@@ -508,7 +983,12 @@
           :label="$t('chart.liquid_max')"
           class="form-item form-item-slider"
         >
-          <el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase('liquidMax')" />
+          <el-input-number
+            v-model="sizeForm.liquidMax"
+            :min="1"
+            size="mini"
+            @change="changeBarSizeCase('liquidMax')"
+          />
         </el-form-item>
         <el-form-item
           v-show="showProperty('liquidSize')"
@@ -526,12 +1006,36 @@
           />
         </el-form-item>
         <!--liquid-end-->
-        <el-form-item v-if="showProperty('symbolOpacity')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.symbolOpacity" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('symbolOpacity')" />
+        <el-form-item
+          v-if="showProperty('symbolOpacity')"
+          :label="$t('chart.not_alpha')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.symbolOpacity"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="10"
+            @change="changeBarSizeCase('symbolOpacity')"
+          />
         </el-form-item>
 
-        <el-form-item v-if="showProperty('symbolStrokeWidth') && sizeForm.scatterSymbol && sizeForm.scatterSymbol !== 'marker'" :label="$t('plugin_style.border')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.symbolStrokeWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" @change="changeBarSizeCase('symbolStrokeWidth')" />
+        <el-form-item
+          v-if="showProperty('symbolStrokeWidth') && sizeForm.scatterSymbol && sizeForm.scatterSymbol !== 'marker'"
+          :label="$t('plugin_style.border')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.symbolStrokeWidth"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="5"
+            @change="changeBarSizeCase('symbolStrokeWidth')"
+          />
         </el-form-item>
       </el-form>
 
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorCommon.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorCommon.vue
index 460b97c369..4d48b9728a 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorCommon.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorCommon.vue
@@ -1,7 +1,5 @@
 <template>
-  <div style="width: 100%" >
-
-  </div>
+  <div style="width: 100%" />
 </template>
 
 <script>
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index 69ab214b83..3ba30fbab9 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -1,33 +1,92 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="tooltipForm"
+        :model="tooltipForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="tooltipForm.show"
+            @change="changeTooltipAttr('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="tooltipForm.show">
-          <el-form-item v-show="showProperty('trigger')" :label="$t('chart.trigger_position')" class="form-item">
-            <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr('trigger')">
+          <el-form-item
+            v-show="showProperty('trigger')"
+            :label="$t('chart.trigger_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="tooltipForm.trigger"
+              size="mini"
+              @change="changeTooltipAttr('trigger')"
+            >
               <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
               <el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr('textStyle')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('textStyle')"
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="tooltipForm.textStyle.fontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeTooltipAttr('textStyle')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
+          <el-form-item
+            v-show="showProperty('textStyle')"
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="tooltipForm.textStyle.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeTooltipAttr('textStyle')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.background')" class="form-item">
-            <el-color-picker v-model="tooltipForm.backgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('backgroundColor')" />
+          <el-form-item
+            v-show="showProperty('textStyle')"
+            :label="$t('chart.background')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="tooltipForm.backgroundColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeTooltipAttr('backgroundColor')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('formatter')" class="form-item">
+          <el-form-item
+            v-show="showProperty('formatter')"
+            class="form-item"
+          >
             <span slot="label">
               <span class="span-box">
                 <span>{{ $t('chart.content_formatter') }}</span>
-                <el-tooltip class="item" effect="dark" placement="bottom">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  placement="bottom"
+                >
                   <div slot="content">
                     模板变量有 {a}, {b}，{c}，{d}，分别表示系列名，数据名，数据值等。
                     <br>
@@ -39,11 +98,20 @@
                     <br>
                     饼图、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                   </div>
-                  <i class="el-icon-info" style="cursor: pointer;" />
+                  <i
+                    class="el-icon-info"
+                    style="cursor: pointer;"
+                  />
                 </el-tooltip>
               </span>
             </span>
-            <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr('formatter')" />
+            <el-input
+              v-model="tooltipForm.formatter"
+              type="textarea"
+              :autosize="{ minRows: 4, maxRows: 4}"
+              :placeholder="$t('chart.formatter_plc')"
+              @blur="changeTooltipAttr('formatter')"
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
index d5085ef5af..f13dda9dcc 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
@@ -1,21 +1,65 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
-        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="tooltipForm"
+        :model="tooltipForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="tooltipForm.show"
+            @change="changeTooltipAttr('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="tooltipForm.show">
-          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr('textStyle')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            v-show="showProperty('textStyle')"
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="tooltipForm.textStyle.fontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeTooltipAttr('textStyle')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
+          <el-form-item
+            v-show="showProperty('textStyle')"
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="tooltipForm.textStyle.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeTooltipAttr('textStyle')"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.background')" class="form-item">
-            <el-color-picker v-model="tooltipForm.backgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('backgroundColor')" />
+          <el-form-item
+            v-show="showProperty('textStyle')"
+            :label="$t('chart.background')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="tooltipForm.backgroundColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeTooltipAttr('backgroundColor')"
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/views/chart/components/shape-attr/TotalCfg.vue b/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
index b29c7b8e2c..146af8ba11 100644
--- a/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
+++ b/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
@@ -1,85 +1,254 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="totalForm" :model="totalForm" label-width="80px" size="mini">
-        <el-divider v-if="showProperty('row')" content-position="center" class="divider-style">{{ $t('chart.row_cfg') }}</el-divider>
-        <el-form-item v-show="showProperty('row')" :label="$t('chart.total_show')" class="form-item">
-          <el-checkbox v-model="totalForm.row.showGrandTotals" @change="changeTotalCfg('row')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="totalForm"
+        :model="totalForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-divider
+          v-if="showProperty('row')"
+          content-position="center"
+          class="divider-style"
+        >{{ $t('chart.row_cfg') }}</el-divider>
+        <el-form-item
+          v-show="showProperty('row')"
+          :label="$t('chart.total_show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="totalForm.row.showGrandTotals"
+            @change="changeTotalCfg('row')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="showProperty('row') && totalForm.row.showGrandTotals">
-          <el-form-item :label="$t('chart.total_position')" class="form-item">
-            <el-radio-group v-model="totalForm.row.reverseLayout" @change="changeTotalCfg('row')">
+          <el-form-item
+            :label="$t('chart.total_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="totalForm.row.reverseLayout"
+              @change="changeTotalCfg('row')"
+            >
               <el-radio :label="true">{{ $t('chart.total_pos_top') }}</el-radio>
               <el-radio :label="false">{{ $t('chart.total_pos_bottom') }}</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.total_label')" class="form-item">
-            <el-input v-model="totalForm.row.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('row')" />
+          <el-form-item
+            :label="$t('chart.total_label')"
+            class="form-item"
+          >
+            <el-input
+              v-model="totalForm.row.label"
+              style="width: 160px;"
+              :placeholder="$t('chart.total_label')"
+              size="mini"
+              clearable
+              @change="changeTotalCfg('row')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.aggregation')" class="form-item">
-            <el-select v-model="totalForm.row.calcTotals.aggregation" class="form-item-select" :placeholder="$t('chart.aggregation')" size="mini" @change="changeTotalCfg('row')">
-              <el-option v-for="option in aggregations" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            :label="$t('chart.aggregation')"
+            class="form-item"
+          >
+            <el-select
+              v-model="totalForm.row.calcTotals.aggregation"
+              class="form-item-select"
+              :placeholder="$t('chart.aggregation')"
+              size="mini"
+              @change="changeTotalCfg('row')"
+            >
+              <el-option
+                v-for="option in aggregations"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
         </div>
 
-        <el-form-item v-show="showProperty('row')" :label="$t('chart.sub_total_show')" class="form-item">
-          <el-checkbox v-model="totalForm.row.showSubTotals" :disabled="rowNum < 2" @change="changeTotalCfg('row')">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('row')"
+          :label="$t('chart.sub_total_show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="totalForm.row.showSubTotals"
+            :disabled="rowNum < 2"
+            @change="changeTotalCfg('row')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="showProperty('row') && totalForm.row.showSubTotals">
-          <el-form-item :label="$t('chart.total_position')" class="form-item">
-            <el-radio-group v-model="totalForm.row.reverseSubLayout" :disabled="rowNum < 2" @change="changeTotalCfg('row')">
+          <el-form-item
+            :label="$t('chart.total_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="totalForm.row.reverseSubLayout"
+              :disabled="rowNum < 2"
+              @change="changeTotalCfg('row')"
+            >
               <el-radio :label="true">{{ $t('chart.total_pos_top') }}</el-radio>
               <el-radio :label="false">{{ $t('chart.total_pos_bottom') }}</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.total_label')" class="form-item">
-            <el-input v-model="totalForm.row.subLabel" :disabled="rowNum < 2" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
+          <el-form-item
+            :label="$t('chart.total_label')"
+            class="form-item"
+          >
+            <el-input
+              v-model="totalForm.row.subLabel"
+              :disabled="rowNum < 2"
+              style="width: 160px;"
+              :placeholder="$t('chart.total_label')"
+              size="mini"
+              clearable
+              @change="changeTotalCfg"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.aggregation')" class="form-item">
-            <el-select v-model="totalForm.row.calcSubTotals.aggregation" :disabled="rowNum < 2" class="form-item-select" :placeholder="$t('chart.aggregation')" size="mini" @change="changeTotalCfg('row')">
-              <el-option v-for="option in aggregations" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            :label="$t('chart.aggregation')"
+            class="form-item"
+          >
+            <el-select
+              v-model="totalForm.row.calcSubTotals.aggregation"
+              :disabled="rowNum < 2"
+              class="form-item-select"
+              :placeholder="$t('chart.aggregation')"
+              size="mini"
+              @change="changeTotalCfg('row')"
+            >
+              <el-option
+                v-for="option in aggregations"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
         </div>
 
-        <el-divider v-if="showProperty('col')" content-position="center" class="divider-style">{{ $t('chart.col_cfg') }}</el-divider>
-        <el-form-item v-show="showProperty('col')" :label="$t('chart.total_show')" class="form-item">
-          <el-checkbox v-model="totalForm.col.showGrandTotals" @change="changeTotalCfg('col')">{{ $t('chart.show') }}</el-checkbox>
+        <el-divider
+          v-if="showProperty('col')"
+          content-position="center"
+          class="divider-style"
+        >{{ $t('chart.col_cfg') }}</el-divider>
+        <el-form-item
+          v-show="showProperty('col')"
+          :label="$t('chart.total_show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="totalForm.col.showGrandTotals"
+            @change="changeTotalCfg('col')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="showProperty('col') && totalForm.col.showGrandTotals">
-          <el-form-item :label="$t('chart.total_position')" class="form-item">
-            <el-radio-group v-model="totalForm.col.reverseLayout" @change="changeTotalCfg('col')">
+          <el-form-item
+            :label="$t('chart.total_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="totalForm.col.reverseLayout"
+              @change="changeTotalCfg('col')"
+            >
               <el-radio :label="true">{{ $t('chart.total_pos_left') }}</el-radio>
               <el-radio :label="false">{{ $t('chart.total_pos_right') }}</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.total_label')" class="form-item">
-            <el-input v-model="totalForm.col.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('col')" />
+          <el-form-item
+            :label="$t('chart.total_label')"
+            class="form-item"
+          >
+            <el-input
+              v-model="totalForm.col.label"
+              style="width: 160px;"
+              :placeholder="$t('chart.total_label')"
+              size="mini"
+              clearable
+              @change="changeTotalCfg('col')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.aggregation')" class="form-item">
-            <el-select v-model="totalForm.col.calcTotals.aggregation" class="form-item-select" :placeholder="$t('chart.aggregation')" size="mini" @change="changeTotalCfg('col')">
-              <el-option v-for="option in aggregations" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            :label="$t('chart.aggregation')"
+            class="form-item"
+          >
+            <el-select
+              v-model="totalForm.col.calcTotals.aggregation"
+              class="form-item-select"
+              :placeholder="$t('chart.aggregation')"
+              size="mini"
+              @change="changeTotalCfg('col')"
+            >
+              <el-option
+                v-for="option in aggregations"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
         </div>
 
-        <el-form-item v-show="showProperty('col')" :label="$t('chart.sub_total_show')" class="form-item">
-          <el-checkbox v-model="totalForm.col.showSubTotals" :disabled="colNum < 2" @change="changeTotalCfg('col')">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('col')"
+          :label="$t('chart.sub_total_show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="totalForm.col.showSubTotals"
+            :disabled="colNum < 2"
+            @change="changeTotalCfg('col')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="showProperty('col') && totalForm.col.showSubTotals">
-          <el-form-item :label="$t('chart.total_position')" class="form-item">
-            <el-radio-group v-model="totalForm.col.reverseSubLayout" :disabled="colNum < 2" @change="changeTotalCfg('col')">
+          <el-form-item
+            :label="$t('chart.total_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="totalForm.col.reverseSubLayout"
+              :disabled="colNum < 2"
+              @change="changeTotalCfg('col')"
+            >
               <el-radio :label="true">{{ $t('chart.total_pos_left') }}</el-radio>
               <el-radio :label="false">{{ $t('chart.total_pos_right') }}</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.total_label')" class="form-item">
-            <el-input v-model="totalForm.col.subLabel" :disabled="colNum < 2" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('col')" />
+          <el-form-item
+            :label="$t('chart.total_label')"
+            class="form-item"
+          >
+            <el-input
+              v-model="totalForm.col.subLabel"
+              :disabled="colNum < 2"
+              style="width: 160px;"
+              :placeholder="$t('chart.total_label')"
+              size="mini"
+              clearable
+              @change="changeTotalCfg('col')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.aggregation')" class="form-item">
-            <el-select v-model="totalForm.col.calcSubTotals.aggregation" :disabled="colNum < 2" class="form-item-select" :placeholder="$t('chart.aggregation')" size="mini" @change="changeTotalCfg('col')">
-              <el-option v-for="option in aggregations" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            :label="$t('chart.aggregation')"
+            class="form-item"
+          >
+            <el-select
+              v-model="totalForm.col.calcSubTotals.aggregation"
+              :disabled="colNum < 2"
+              class="form-item-select"
+              :placeholder="$t('chart.aggregation')"
+              size="mini"
+              @change="changeTotalCfg('col')"
+            >
+              <el-option
+                v-for="option in aggregations"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
         </div>
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 696918d516..85a8772457 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -1,7 +1,15 @@
 <template>
-  <div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
+  <div
+    ref="tableContainer"
+    :style="bg_class"
+    style="padding: 8px;width: 100%;height: 100%;overflow: hidden;"
+  >
     <el-row style="height: 100%;">
-      <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
+      <p
+        v-show="title_show"
+        ref="title"
+        :style="title_class"
+      >{{ chart.title }}</p>
       <ux-grid
         ref="plxTable"
         size="mini"
@@ -18,7 +26,7 @@
       >
         <ux-table-column
           v-for="field in fields"
-          :key="Math.random()"
+          :key="field.name"
           :field="field.dataeaseName"
           :resizable="true"
           sortable
@@ -27,7 +35,10 @@
         />
       </ux-grid>
 
-      <el-row v-show="showPage" class="table-page">
+      <el-row
+        v-show="showPage"
+        class="table-page"
+      >
         <span class="total-style">
           {{ $t('chart.total') }}
           <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
diff --git a/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue b/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue
index 77b650e2eb..9035b97d9a 100644
--- a/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue
+++ b/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue
@@ -1,28 +1,72 @@
 <template>
   <div>
-    <el-form ref="form" :model="formatterItem.formatterCfg" label-width="80px" size="mini" class="formatter-form">
+    <el-form
+      ref="form"
+      :model="formatterItem.formatterCfg"
+      label-width="80px"
+      size="mini"
+      class="formatter-form"
+    >
       <el-form-item :label="$t('chart.value_formatter_type')">
-        <el-radio-group v-model="formatterItem.formatterCfg.type" @change="getExampleValue">
-          <el-radio v-for="radio in typeList" :key="radio.value" :label="radio.value">{{ $t('chart.' + radio.name) }}</el-radio>
+        <el-radio-group
+          v-model="formatterItem.formatterCfg.type"
+          @change="getExampleValue"
+        >
+          <el-radio
+            v-for="radio in typeList"
+            :key="radio.value"
+            :label="radio.value"
+          >{{ $t('chart.' + radio.name) }}</el-radio>
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item v-show="formatterItem.formatterCfg.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')">
-        <el-input-number v-model="formatterItem.formatterCfg.decimalCount" :min="0" :max="10" size="mini" @change="getExampleValue" />
+      <el-form-item
+        v-show="formatterItem.formatterCfg.type !== 'auto'"
+        :label="$t('chart.value_formatter_decimal_count')"
+      >
+        <el-input-number
+          v-model="formatterItem.formatterCfg.decimalCount"
+          :min="0"
+          :max="10"
+          size="mini"
+          @change="getExampleValue"
+        />
       </el-form-item>
 
-      <el-form-item v-show="formatterItem.formatterCfg.type !== 'percent'" :label="$t('chart.value_formatter_unit')">
-        <el-select v-model="formatterItem.formatterCfg.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="getExampleValue">
-          <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+      <el-form-item
+        v-show="formatterItem.formatterCfg.type !== 'percent'"
+        :label="$t('chart.value_formatter_unit')"
+      >
+        <el-select
+          v-model="formatterItem.formatterCfg.unit"
+          :placeholder="$t('chart.pls_select_field')"
+          size="mini"
+          @change="getExampleValue"
+        >
+          <el-option
+            v-for="item in unitList"
+            :key="item.value"
+            :label="$t('chart.' + item.name)"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
 
       <el-form-item :label="$t('chart.value_formatter_suffix')">
-        <el-input v-model="formatterItem.formatterCfg.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="getExampleValue" />
+        <el-input
+          v-model="formatterItem.formatterCfg.suffix"
+          size="mini"
+          clearable
+          :placeholder="$t('commons.input_content')"
+          @change="getExampleValue"
+        />
       </el-form-item>
 
       <el-form-item :label="$t('chart.value_formatter_thousand_separator')">
-        <el-checkbox v-model="formatterItem.formatterCfg.thousandSeparator" @change="getExampleValue" />
+        <el-checkbox
+          v-model="formatterItem.formatterCfg.thousandSeparator"
+          @change="getExampleValue"
+        />
       </el-form-item>
 
       <el-form-item :label="$t('chart.value_formatter_example')">
diff --git a/frontend/src/views/chart/data/ChartHome.vue b/frontend/src/views/chart/data/ChartHome.vue
index be7abd4f7f..35489fd661 100644
--- a/frontend/src/views/chart/data/ChartHome.vue
+++ b/frontend/src/views/chart/data/ChartHome.vue
@@ -1,6 +1,9 @@
 <template>
   <el-col style="height: 100%;">
-    <el-row style="height: 100%;" class="custom-position">
+    <el-row
+      style="height: 100%;"
+      class="custom-position"
+    >
       {{ $t('chart.pls_slc_tbl_left') }}
     </el-row>
   </el-col>
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 87ae4acf4b..f9ad1fe73d 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -5,7 +5,13 @@
         <span class="title-text">
           {{ $t('chart.datalist') }}
         </span>
-        <el-button icon="el-icon-plus" type="text" size="mini" style="float: right;" @click="add('group')" />
+        <el-button
+          icon="el-icon-plus"
+          type="text"
+          size="mini"
+          style="float: right;"
+          @click="add('group')"
+        />
       </el-row>
       <el-divider />
       <el-row style="margin-bottom: 10px">
@@ -21,12 +27,15 @@
         </el-col>
         <el-col :span="8">
           <el-dropdown>
-            <el-button size="mini" type="primary">
+            <el-button
+              size="mini"
+              type="primary"
+            >
               {{ searchMap[searchType] }}<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item @click.native="searchTypeClick('all')">{{ $t('commons.all') }}</el-dropdown-item>
-              <el-dropdown-item @click.native="searchTypeClick('folder')">{{ this.$t('commons.folder') }}
+              <el-dropdown-item @click.native="searchTypeClick('folder')">{{ $t('commons.folder') }}
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -47,7 +56,11 @@
             @node-expand="nodeExpand"
             @node-collapse="nodeCollapse"
           >
-            <span v-if="data.modelInnerType ==='group'" slot-scope="{ node, data }" class="custom-tree-node father">
+            <span
+              v-if="data.modelInnerType ==='group'"
+              slot-scope="{ node, data }"
+              class="custom-tree-node father"
+            >
               <span style="display: flex;flex: 1;width: 0;">
                 <span>
                   <i class="el-icon-folder" />
@@ -57,9 +70,19 @@
                   :title="data.name"
                 >{{ data.name }}</span>
               </span>
-              <span v-if="hasDataPermission('manage',data.privileges)" class="child">
-                <span v-if="data.modelInnerType ==='group'" @click.stop>
-                  <el-dropdown trigger="click" size="small" @command="clickAdd">
+              <span
+                v-if="hasDataPermission('manage',data.privileges)"
+                class="child"
+              >
+                <span
+                  v-if="data.modelInnerType ==='group'"
+                  @click.stop
+                >
+                  <el-dropdown
+                    trigger="click"
+                    size="small"
+                    @command="clickAdd"
+                  >
                     <span class="el-dropdown-link">
                       <el-button
                         icon="el-icon-plus"
@@ -68,17 +91,30 @@
                       />
                     </span>
                     <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('group',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-folder-add"
+                        :command="beforeClickAdd('group',data,node)"
+                      >
                         {{ $t('chart.group') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('chart',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-circle-plus"
+                        :command="beforeClickAdd('chart',data,node)"
+                      >
                         {{ $t('chart.add_chart') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
                 </span>
-                <span style="margin-left: 12px;" @click.stop>
-                  <el-dropdown trigger="click" size="small" @command="clickMore">
+                <span
+                  style="margin-left: 12px;"
+                  @click.stop
+                >
+                  <el-dropdown
+                    trigger="click"
+                    size="small"
+                    @command="clickMore"
+                  >
                     <span class="el-dropdown-link">
                       <el-button
                         icon="el-icon-more"
@@ -87,13 +123,22 @@
                       />
                     </span>
                     <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-edit-outline"
+                        :command="beforeClickMore('rename',data,node)"
+                      >
                         {{ $t('chart.rename') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('move',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-right"
+                        :command="beforeClickMore('move',data,node)"
+                      >
                         {{ $t('dataset.move_to') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-delete"
+                        :command="beforeClickMore('delete',data,node)"
+                      >
                         {{ $t('chart.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
@@ -101,7 +146,11 @@
                 </span>
               </span>
             </span>
-            <span v-else slot-scope="{ node, data }" class="custom-tree-node-list father">
+            <span
+              v-else
+              slot-scope="{ node, data }"
+              class="custom-tree-node-list father"
+            >
               <span style="display: flex;flex: 1;width: 0;">
                 <span><svg-icon :icon-class="data.modelInnerType" /></span>
                 <span
@@ -109,9 +158,19 @@
                   :title="data.name"
                 >{{ data.name }}</span>
               </span>
-              <span v-if="hasDataPermission('manage',data.privileges)" class="child">
-                <span style="margin-left: 12px;" @click.stop>
-                  <el-dropdown trigger="click" size="small" @command="clickMore">
+              <span
+                v-if="hasDataPermission('manage',data.privileges)"
+                class="child"
+              >
+                <span
+                  style="margin-left: 12px;"
+                  @click.stop
+                >
+                  <el-dropdown
+                    trigger="click"
+                    size="small"
+                    @command="clickMore"
+                  >
                     <span class="el-dropdown-link">
                       <el-button
                         icon="el-icon-more"
@@ -120,13 +179,22 @@
                       />
                     </span>
                     <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-edit-outline"
+                        :command="beforeClickMore('renameChart',data,node)"
+                      >
                         {{ $t('chart.rename') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-right"
+                        :command="beforeClickMore('moveDs',data,node)"
+                      >
                         {{ $t('dataset.move_to') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-delete"
+                        :command="beforeClickMore('deleteChart',data,node)"
+                      >
                         {{ $t('chart.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
@@ -139,7 +207,13 @@
       </el-col>
 
       <!--group add/edit-->
-      <el-dialog v-dialogDrag :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
+      <el-dialog
+        v-dialogDrag
+        :title="dialogTitle"
+        :visible="editGroup"
+        :show-close="false"
+        width="30%"
+      >
         <el-form
           ref="groupForm"
           :model="groupForm"
@@ -147,27 +221,65 @@
           @keypress.enter.native="saveGroup(groupForm)"
           @submit.native.prevent
         >
-          <el-form-item :label="$t('commons.name')" prop="name">
+          <el-form-item
+            :label="$t('commons.name')"
+            prop="name"
+          >
             <el-input v-model="groupForm.name" />
           </el-form-item>
         </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="close()">{{ $t('chart.cancel') }}</el-button>
-          <el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('chart.confirm') }}</el-button>
+        <div
+          slot="footer"
+          class="dialog-footer"
+        >
+          <el-button
+            size="mini"
+            @click="close()"
+          >{{ $t('chart.cancel') }}</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="saveGroup(groupForm)"
+          >{{ $t('chart.confirm') }}</el-button>
         </div>
       </el-dialog>
     </el-col>
 
     <!--rename chart-->
-    <el-dialog v-dialogDrag :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
-      <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @submit.native.prevent @keypress.enter.native="saveTable(tableForm)">
-        <el-form-item :label="$t('commons.name')" prop="name">
+    <el-dialog
+      v-dialogDrag
+      :title="$t('chart.chart')"
+      :visible="editTable"
+      :show-close="false"
+      width="30%"
+    >
+      <el-form
+        ref="tableForm"
+        :model="tableForm"
+        :rules="tableFormRules"
+        @submit.native.prevent
+        @keypress.enter.native="saveTable(tableForm)"
+      >
+        <el-form-item
+          :label="$t('commons.name')"
+          prop="name"
+        >
           <el-input v-model="tableForm.name" />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeTable()">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('chart.confirm') }}</el-button>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeTable()"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="saveTable(tableForm)"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -182,27 +294,55 @@
       class="dialog-css"
     >
       <el-row style="width: 800px;">
-        <el-form ref="form" :model="table" label-width="80px" size="mini" class="form-item" @submit.native.prevent>
+        <el-form
+          ref="form"
+          :model="table"
+          label-width="80px"
+          size="mini"
+          class="form-item"
+          @submit.native.prevent
+        >
           <el-col :span="12">
             <el-form-item :label="$t('chart.view_name')">
-              <el-input v-model="chartName" style="height: 34px" size="mini" />
+              <el-input
+                v-model="chartName"
+                style="height: 34px"
+                size="mini"
+              />
             </el-form-item>
           </el-col>
         </el-form>
       </el-row>
 
-      <el-steps :active="createActive" align-center>
+      <el-steps
+        :active="createActive"
+        align-center
+      >
         <el-step :title="$t('chart.select_dataset')" />
         <el-step :title="$t('chart.select_chart_type')" />
       </el-steps>
 
-      <table-selector v-show="createActive === 1" @getTable="getTable" />
-      <el-row v-show="createActive === 2" style="padding: 0 20px;">
+      <table-selector
+        v-show="createActive === 1"
+        @getTable="getTable"
+      />
+      <el-row
+        v-show="createActive === 2"
+        style="padding: 0 20px;"
+      >
         <el-row class="chart-box">
           <span>
-            <span class="theme-border-class" style="font-size: 12px">{{ $t('chart.chart_type') }}</span>
+            <span
+              class="theme-border-class"
+              style="font-size: 12px"
+            >{{ $t('chart.chart_type') }}</span>
             <span style="float: right;">
-              <el-select v-model="view.render" class="render-select" style="width: 70px" size="mini">
+              <el-select
+                v-model="view.render"
+                class="render-select"
+                style="width: 70px"
+                size="mini"
+              >
                 <el-option
                   v-for="item in pluginRenderOptions"
                   :key="item.value"
@@ -218,19 +358,40 @@
                 v-model="view.type"
                 style="width: 100%"
               >
-                <chart-type ref="cu-chart-type" :chart="view" style="height: 350px;" />
+                <chart-type
+                  ref="cu-chart-type"
+                  :chart="view"
+                  style="height: 350px;"
+                />
               </el-radio-group>
             </div>
           </el-row>
         </el-row>
-        <el-row class="chart-box" style="text-align: center;">
-          <svg-icon :icon-class="view.isPlugin && view.type && view.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + view.type + '/svg') : view.type" class="chart-icon" />
+        <el-row
+          class="chart-box"
+          style="text-align: center;"
+        >
+          <svg-icon
+            :icon-class="view.isPlugin && view.type && view.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + view.type + '/svg') : view.type"
+            class="chart-icon"
+          />
         </el-row>
       </el-row>
 
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>
-        <el-button v-if="createActive === 2" type="primary" size="mini" @click="createPreview">{{ $t('chart.preview')
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeCreateChart"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          v-if="createActive === 2"
+          type="primary"
+          size="mini"
+          @click="createPreview"
+        >{{ $t('chart.preview')
         }}
         </el-button>
         <el-button
@@ -261,10 +422,24 @@
       width="30%"
       class="dialog-css"
     >
-      <group-move-selector :item="groupForm" @targetGroup="targetGroup" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeMoveGroup()">{{ $t('dataset.cancel') }}</el-button>
-        <el-button :disabled="groupMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveGroup(tGroup)">{{
+      <group-move-selector
+        :item="groupForm"
+        @targetGroup="targetGroup"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeMoveGroup()"
+        >{{ $t('dataset.cancel') }}</el-button>
+        <el-button
+          :disabled="groupMoveConfirmDisabled"
+          type="primary"
+          size="mini"
+          @click="saveMoveGroup(tGroup)"
+        >{{
           $t('dataset.confirm') }}
         </el-button>
       </div>
@@ -279,10 +454,24 @@
       width="30%"
       class="dialog-css"
     >
-      <chart-move-selector :item="dsForm" @targetDs="targetDs" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeMoveDs()">{{ $t('dataset.cancel') }}</el-button>
-        <el-button :disabled="dsMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveDs(tDs)">{{
+      <chart-move-selector
+        :item="dsForm"
+        @targetDs="targetDs"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeMoveDs()"
+        >{{ $t('dataset.cancel') }}</el-button>
+        <el-button
+          :disabled="dsMoveConfirmDisabled"
+          type="primary"
+          size="mini"
+          @click="saveMoveDs(tDs)"
+        >{{
           $t('dataset.confirm') }}
         </el-button>
       </div>
@@ -308,7 +497,6 @@ import {
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_STYLE,
   DEFAULT_YAXIS_EXT_STYLE,
-  DEFAULT_BACKGROUND_COLOR,
   DEFAULT_SPLIT,
   DEFAULT_FUNCTION_CFG,
   DEFAULT_THRESHOLD,
diff --git a/frontend/src/views/chart/index.vue b/frontend/src/views/chart/index.vue
index 665238e3e5..ec3059a4c2 100644
--- a/frontend/src/views/chart/index.vue
+++ b/frontend/src/views/chart/index.vue
@@ -2,11 +2,21 @@
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
 
     <de-aside-container>
-      <group ref="group" :save-status="saveStatus" @switchComponent="switchComponent" />
+      <group
+        ref="group"
+        :save-status="saveStatus"
+        @switchComponent="switchComponent"
+      />
     </de-aside-container>
 
     <de-main-container>
-      <component :is="component" :param="param" @switchComponent="switchComponent" @saveSuccess="saveSuccess" @typeChange="typeChange" />
+      <component
+        :is="component"
+        :param="param"
+        @switchComponent="switchComponent"
+        @saveSuccess="saveSuccess"
+        @typeChange="typeChange"
+      />
     </de-main-container>
   </de-container>
 </template>
diff --git a/frontend/src/views/chart/view/CalcChartFieldEdit.vue b/frontend/src/views/chart/view/CalcChartFieldEdit.vue
index e13ebae46c..6f8af6562a 100644
--- a/frontend/src/views/chart/view/CalcChartFieldEdit.vue
+++ b/frontend/src/views/chart/view/CalcChartFieldEdit.vue
@@ -1,25 +1,45 @@
 <template>
   <el-row>
-    <el-form ref="form" :model="fieldForm" size="mini" class="row-style">
+    <el-form
+      ref="form"
+      :model="fieldForm"
+      size="mini"
+      class="row-style"
+    >
       <el-form-item>
         <span style="width: 80px;font-size: 12px">{{ $t('dataset.field_edit_name') }}</span>
-        <el-input v-model="fieldForm.name" style="width: 80%;" size="mini" :placeholder="$t('dataset.input_edit_name')" />
+        <el-input
+          v-model="fieldForm.name"
+          style="width: 80%;"
+          size="mini"
+          :placeholder="$t('dataset.input_edit_name')"
+        />
       </el-form-item>
     </el-form>
 
     <el-row :style="mode === 'normal' ? {height: '420px'} : {height: '100px'}">
-      <el-col :span="14" style="height: 100%">
+      <el-col
+        :span="14"
+        style="height: 100%"
+      >
         <el-row>
           <el-row v-show="mode === 'normal'">
             <span>
               {{ $t('dataset.field_exp') }}
-              <el-tooltip class="item" effect="dark" placement="bottom">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                placement="bottom"
+              >
                 <div slot="content">
                   表达式语法请遵循该数据源对应的数据库语法。
                   <br>
                   字段类型将使用原始类型，如有需要，请在表达式中自行转换。
                 </div>
-                <i class="el-icon-info" style="cursor: pointer;" />
+                <i
+                  class="el-icon-info"
+                  style="cursor: pointer;"
+                />
               </el-tooltip>
             </span>
             <codemirror
@@ -33,25 +53,43 @@
             />
           </el-row>
           <el-row style="margin-top: 10px;">
-            <el-form ref="form" :model="fieldForm" size="mini" class="row-style">
+            <el-form
+              ref="form"
+              :model="fieldForm"
+              size="mini"
+              class="row-style"
+            >
               <el-form-item>
                 <span style="width: 80px;font-size: 12px">
                   {{ $t('dataset.data_type') }}
-                  <el-tooltip class="item" effect="dark" placement="bottom">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    placement="bottom"
+                  >
                     <div slot="content">
                       若字段表达式中使用聚合函数，则字段不能设置为维度使用。
                     </div>
-                    <i class="el-icon-info" style="cursor: pointer;" />
+                    <i
+                      class="el-icon-info"
+                      style="cursor: pointer;"
+                    />
                   </el-tooltip>
                 </span>
-                <el-radio-group v-model="fieldForm.groupType" size="mini">
+                <el-radio-group
+                  v-model="fieldForm.groupType"
+                  size="mini"
+                >
                   <el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
                   <el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
                 </el-radio-group>
               </el-form-item>
               <el-form-item>
                 <span style="width: 80px;font-size: 12px">{{ $t('dataset.field_type') }}</span>
-                <el-select v-model="fieldForm.deType" size="mini">
+                <el-select
+                  v-model="fieldForm.deType"
+                  size="mini"
+                >
                   <el-option
                     v-for="item in fields"
                     :key="item.value"
@@ -59,14 +97,26 @@
                     :value="item.value"
                   >
                     <span style="float: left">
-                      <svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />
-                      <svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />
+                      <svg-icon
+                        v-if="item.value === 0"
+                        icon-class="field_text"
+                        class="field-icon-text"
+                      />
+                      <svg-icon
+                        v-if="item.value === 1"
+                        icon-class="field_time"
+                        class="field-icon-time"
+                      />
                       <svg-icon
                         v-if="item.value === 2 || item.value === 3"
                         icon-class="field_value"
                         class="field-icon-value"
                       />
-                      <svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
+                      <svg-icon
+                        v-if="item.value === 5"
+                        icon-class="field_location"
+                        class="field-icon-location"
+                      />
                     </span>
                     <span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
                   </el-option>
@@ -76,11 +126,23 @@
           </el-row>
         </el-row>
       </el-col>
-      <el-col v-show="mode === 'normal'" :span="10" style="height: 100%;border-left: 1px solid #E6E6E6;">
-        <el-col :span="12" style="height: 100%" class="padding-lr">
+      <el-col
+        v-show="mode === 'normal'"
+        :span="10"
+        style="height: 100%;border-left: 1px solid #E6E6E6;"
+      >
+        <el-col
+          :span="12"
+          style="height: 100%"
+          class="padding-lr"
+        >
           <span>
             {{ $t('dataset.click_ref_field') }}
-            <el-tooltip class="item" effect="dark" placement="bottom">
+            <el-tooltip
+              class="item"
+              effect="dark"
+              placement="bottom"
+            >
               <div slot="content">
                 引用字段以 "[" 开始， "]" 结束
                 <br>
@@ -88,7 +150,10 @@
                 <br>
                 若输入与引用字段相同格式的内容，将被当作引用字段处理
               </div>
-              <i class="el-icon-info" style="cursor: pointer;" />
+              <i
+                class="el-icon-info"
+                style="cursor: pointer;"
+              />
             </el-tooltip>
           </span>
           <el-input
@@ -116,19 +181,34 @@
                   :title="item.name"
                   @click="insertFieldToCodeMirror('['+item.name+']')"
                 >
-                  <svg-icon v-if="item.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
-                  <svg-icon v-if="item.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
+                  <svg-icon
+                    v-if="item.deExtractType === 0"
+                    icon-class="field_text"
+                    class="field-icon-text"
+                  />
+                  <svg-icon
+                    v-if="item.deExtractType === 1"
+                    icon-class="field_time"
+                    class="field-icon-time"
+                  />
                   <svg-icon
                     v-if="item.deExtractType === 2 || item.deExtractType === 3"
                     icon-class="field_value"
                     class="field-icon-value"
                   />
-                  <svg-icon v-if="item.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
+                  <svg-icon
+                    v-if="item.deExtractType === 5"
+                    icon-class="field_location"
+                    class="field-icon-location"
+                  />
                   {{ item.name }}
                 </span>
               </transition-group>
             </draggable>
-            <div v-else class="class-na">{{ $t('dataset.na') }}</div>
+            <div
+              v-else
+              class="class-na"
+            >{{ $t('dataset.na') }}</div>
           </div>
           <div class="field-height">
             <span>{{ $t('chart.quota') }}</span>
@@ -148,25 +228,48 @@
                   :title="item.name"
                   @click="insertFieldToCodeMirror('['+item.name+']')"
                 >
-                  <svg-icon v-if="item.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
-                  <svg-icon v-if="item.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
+                  <svg-icon
+                    v-if="item.deExtractType === 0"
+                    icon-class="field_text"
+                    class="field-icon-text"
+                  />
+                  <svg-icon
+                    v-if="item.deExtractType === 1"
+                    icon-class="field_time"
+                    class="field-icon-time"
+                  />
                   <svg-icon
                     v-if="item.deExtractType === 2 || item.deExtractType === 3"
                     icon-class="field_value"
                     class="field-icon-value"
                   />
-                  <svg-icon v-if="item.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
+                  <svg-icon
+                    v-if="item.deExtractType === 5"
+                    icon-class="field_location"
+                    class="field-icon-location"
+                  />
                   <span>{{ item.name }}</span>
                 </span>
               </transition-group>
             </draggable>
-            <div v-else class="class-na">{{ $t('dataset.na') }}</div>
+            <div
+              v-else
+              class="class-na"
+            >{{ $t('dataset.na') }}</div>
           </div>
         </el-col>
-        <el-col :span="12" style="height: 100%" class="padding-lr">
+        <el-col
+          :span="12"
+          style="height: 100%"
+          class="padding-lr"
+        >
           <span>
             {{ $t('dataset.click_ref_function') }}
-            <el-tooltip class="item" effect="dark" placement="bottom">
+            <el-tooltip
+              class="item"
+              effect="dark"
+              placement="bottom"
+            >
               <div slot="content">
                 使用数据集对应数据库类型所支持的函数，语法同对应数据库
                 <br>
@@ -174,7 +277,10 @@
                 <br>
                 非直连模式数据集，使用Doris数据库函数，可参考Doris官网 https://doris.apache.org/zh-CN/
               </div>
-              <i class="el-icon-info" style="cursor: pointer;" />
+              <i
+                class="el-icon-info"
+                style="cursor: pointer;"
+              />
             </el-tooltip>
           </span>
           <el-input
@@ -197,7 +303,11 @@
               <p class="pop-title">{{ item.name }}</p>
               <p class="pop-info">{{ item.func }}</p>
               <p class="pop-info">{{ item.desc }}</p>
-              <span slot="reference" class="function-style" @click="insertParamToCodeMirror(item.func)">{{
+              <span
+                slot="reference"
+                class="function-style"
+                @click="insertParamToCodeMirror(item.func)"
+              >{{
                 item.func
               }}</span>
             </el-popover>
@@ -208,7 +318,10 @@
 
     <el-row>
       <div class="dialog-button">
-        <el-button size="mini" @click="closeCalcField">{{ $t('dataset.cancel') }}</el-button>
+        <el-button
+          size="mini"
+          @click="closeCalcField"
+        >{{ $t('dataset.cancel') }}</el-button>
         <el-button
           :disabled="!fieldForm.name || !fieldForm.originName"
           type="primary"
@@ -253,7 +366,7 @@ export default {
   name: 'CalcChartFieldEdit',
   components: { codemirror, draggable },
   props: {
-    param: {// chart
+    param: { // chart
       type: Object,
       required: true
     },
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 4b53171885..61593dea7d 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1,5 +1,8 @@
 <template>
-  <el-row v-loading="loading" style="height: 100%;overflow-y: hidden;width: 100%;border-left: 1px solid #E6E6E6">
+  <el-row
+    v-loading="loading"
+    style="height: 100%;overflow-y: hidden;width: 100%;border-left: 1px solid #E6E6E6"
+  >
     <el-tooltip :content="$t('chart.draw_back')">
       <el-button
         class="el-icon-d-arrow-right"
@@ -9,7 +12,10 @@
         @click="closePanelEdit"
       />
     </el-tooltip>
-    <el-row style="height: 40px;" class="padding-lr">
+    <el-row
+      style="height: 40px;"
+      class="padding-lr"
+    >
       <el-popover
         placement="right-start"
         width="400"
@@ -17,24 +23,48 @@
         @show="showTab"
         @hide="hideTab"
       >
-        <dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
+        <dataset-chart-detail
+          type="chart"
+          :data="view"
+          :tab-status="tabStatus"
+        />
         <i
           slot="reference"
           class="el-icon-warning icon-class"
           style="position:absolute; margin-left: 30px; top:14px;cursor: pointer;"
         />
       </el-popover>
-      <span class="title-text view-title-name" style="line-height: 40px;">{{ view.name }}</span>
+      <span
+        class="title-text view-title-name"
+        style="line-height: 40px;"
+      >{{ view.name }}</span>
       <span style="float: right;line-height: 40px;">
-        <el-button round size="mini" :disabled="!hasEdit" @click="reset">
+        <el-button
+          round
+          size="mini"
+          :disabled="!hasEdit"
+          @click="reset"
+        >
           {{ $t('chart.recover') }}
         </el-button>
       </span>
     </el-row>
     <el-row class="view-panel-row">
-      <el-tabs v-model="tabActive" :stretch="true" class="tab-header">
-        <el-tab-pane name="data" :label="$t('chart.chart_data')" class="padding-tab" style="width: 350px">
-          <div v-if="view.dataFrom==='template'" class="view-panel-Mask">
+      <el-tabs
+        v-model="tabActive"
+        :stretch="true"
+        class="tab-header"
+      >
+        <el-tab-pane
+          name="data"
+          :label="$t('chart.chart_data')"
+          class="padding-tab"
+          style="width: 350px"
+        >
+          <div
+            v-if="view.dataFrom==='template'"
+            class="view-panel-Mask"
+          >
             <span style="opacity: 1;">
               <el-button
                 style="opacity: 1!important;"
@@ -49,7 +79,11 @@
             </span>
           </div>
           <el-row class="view-panel">
-            <el-col class="theme-border-class" :span="11" style="border-right: 1px solid #E6E6E6;">
+            <el-col
+              class="theme-border-class"
+              :span="11"
+              style="border-right: 1px solid #E6E6E6;"
+            >
               <div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
                 <el-input
                   v-model="searchField"
@@ -59,7 +93,11 @@
                   clearable
                   class="main-area-input"
                 />
-                <el-dropdown trigger="click" size="mini" @command="fieldEdit">
+                <el-dropdown
+                  trigger="click"
+                  size="mini"
+                  @command="fieldEdit"
+                >
                   <span class="el-dropdown-link">
                     <el-button
                       :title="$t('dataset.field_manage')"
@@ -95,9 +133,15 @@
                 />
               </div>
 
-              <div v-if="fieldShow && tabActive === 'data'" class="field-split">
-                <fu-split-pane top="50%" direction="vertical">
-                  <template v-slot:top>
+              <div
+                v-if="fieldShow && tabActive === 'data'"
+                class="field-split"
+              >
+                <fu-split-pane
+                  top="50%"
+                  direction="vertical"
+                >
+                  <template #top>
                     <div class="padding-lr field-height">
                       <span>{{ $t('chart.dimension') }}</span>
                       <draggable
@@ -110,25 +154,58 @@
                         @add="moveToDimension"
                       >
                         <transition-group>
-                          <span v-for="item in dimensionData" :key="item.id" class="item-dimension father" :title="item.name">
-                            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-                            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+                          <span
+                            v-for="item in dimensionData"
+                            :key="item.id"
+                            class="item-dimension father"
+                            :title="item.name"
+                          >
+                            <svg-icon
+                              v-if="item.deType === 0"
+                              icon-class="field_text"
+                              class="field-icon-text"
+                            />
+                            <svg-icon
+                              v-if="item.deType === 1"
+                              icon-class="field_time"
+                              class="field-icon-time"
+                            />
                             <svg-icon
                               v-if="item.deType === 2 || item.deType === 3"
                               icon-class="field_value"
                               class="field-icon-value"
                             />
-                            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                            <svg-icon
+                              v-if="item.deType === 5"
+                              icon-class="field_location"
+                              class="field-icon-location"
+                            />
                             <span class="field-name">{{ item.name }}</span>
-                            <el-dropdown v-show="false" placement="right-start" trigger="click" size="mini" class="field-setting child" @command="chartFieldEdit">
+                            <el-dropdown
+                              v-show="false"
+                              placement="right-start"
+                              trigger="click"
+                              size="mini"
+                              class="field-setting child"
+                              @command="chartFieldEdit"
+                            >
                               <span class="el-dropdown-link">
                                 <i class="el-icon-s-tools" />
                               </span>
                               <el-dropdown-menu slot="dropdown">
-                                <el-dropdown-item :command="handleChartFieldEdit(item,'copy')" icon="el-icon-document-copy">{{ $t('commons.copy') }}</el-dropdown-item>
+                                <el-dropdown-item
+                                  :command="handleChartFieldEdit(item,'copy')"
+                                  icon="el-icon-document-copy"
+                                >{{ $t('commons.copy') }}</el-dropdown-item>
                                 <span v-if="item.chartId">
-                                  <el-dropdown-item :command="handleChartFieldEdit(item,'edit')" icon="el-icon-edit">{{ $t('commons.edit') }}</el-dropdown-item>
-                                  <el-dropdown-item :command="handleChartFieldEdit(item,'delete')" icon="el-icon-delete">{{ $t('commons.delete') }}</el-dropdown-item>
+                                  <el-dropdown-item
+                                    :command="handleChartFieldEdit(item,'edit')"
+                                    icon="el-icon-edit"
+                                  >{{ $t('commons.edit') }}</el-dropdown-item>
+                                  <el-dropdown-item
+                                    :command="handleChartFieldEdit(item,'delete')"
+                                    icon="el-icon-delete"
+                                  >{{ $t('commons.delete') }}</el-dropdown-item>
                                 </span>
                               </el-dropdown-menu>
                             </el-dropdown>
@@ -137,7 +214,7 @@
                       </draggable>
                     </div>
                   </template>
-                  <template v-slot:bottom>
+                  <template #bottom>
                     <div class="padding-lr field-height">
                       <span>{{ $t('chart.quota') }}</span>
                       <draggable
@@ -157,24 +234,53 @@
                             class="item-quota father"
                             :title="item.name"
                           >
-                            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-                            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+                            <svg-icon
+                              v-if="item.deType === 0"
+                              icon-class="field_text"
+                              class="field-icon-text"
+                            />
+                            <svg-icon
+                              v-if="item.deType === 1"
+                              icon-class="field_time"
+                              class="field-icon-time"
+                            />
                             <svg-icon
                               v-if="item.deType === 2 || item.deType === 3"
                               icon-class="field_value"
                               class="field-icon-value"
                             />
-                            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                            <svg-icon
+                              v-if="item.deType === 5"
+                              icon-class="field_location"
+                              class="field-icon-location"
+                            />
                             <span class="field-name">{{ item.name }}</span>
-                            <el-dropdown v-show="false" v-if="item.id !== 'count'" placement="right-start" trigger="click" size="mini" class="field-setting child" @command="chartFieldEdit">
+                            <el-dropdown
+                              v-show="false"
+                              v-if="item.id !== 'count'"
+                              placement="right-start"
+                              trigger="click"
+                              size="mini"
+                              class="field-setting child"
+                              @command="chartFieldEdit"
+                            >
                               <span class="el-dropdown-link">
                                 <i class="el-icon-s-tools" />
                               </span>
                               <el-dropdown-menu slot="dropdown">
-                                <el-dropdown-item :command="handleChartFieldEdit(item,'copy')" icon="el-icon-document-copy">{{ $t('commons.copy') }}</el-dropdown-item>
+                                <el-dropdown-item
+                                  :command="handleChartFieldEdit(item,'copy')"
+                                  icon="el-icon-document-copy"
+                                >{{ $t('commons.copy') }}</el-dropdown-item>
                                 <span v-if="item.chartId">
-                                  <el-dropdown-item :command="handleChartFieldEdit(item,'edit')" icon="el-icon-edit">{{ $t('commons.edit') }}</el-dropdown-item>
-                                  <el-dropdown-item :command="handleChartFieldEdit(item,'delete')" icon="el-icon-delete">{{ $t('commons.delete') }}</el-dropdown-item>
+                                  <el-dropdown-item
+                                    :command="handleChartFieldEdit(item,'edit')"
+                                    icon="el-icon-edit"
+                                  >{{ $t('commons.edit') }}</el-dropdown-item>
+                                  <el-dropdown-item
+                                    :command="handleChartFieldEdit(item,'delete')"
+                                    icon="el-icon-delete"
+                                  >{{ $t('commons.delete') }}</el-dropdown-item>
                                 </span>
                               </el-dropdown-menu>
                             </el-dropdown>
@@ -192,12 +298,18 @@
               style="height: 100%;border-right: 1px solid #E6E6E6;"
               class="theme-border-class"
             >
-              <div style="height: 60px;overflow:auto" class="padding-lr theme-border-class">
+              <div
+                style="height: 60px;overflow:auto"
+                class="padding-lr theme-border-class"
+              >
                 <span class="theme-border-class">
                   <span>{{ $t('chart.chart_type') }}</span>
                   <el-row style="padding: 4px 0 4px 10px;">
                     <span>
-                      <svg-icon :icon-class="view.isPlugin && view.type && view.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + view.type + '/svg') : view.type" class="chart-icon" />
+                      <svg-icon
+                        :icon-class="view.isPlugin && view.type && view.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + view.type + '/svg') : view.type"
+                        class="chart-icon"
+                      />
                     </span>
                     <span style="float: right;">
                       <el-popover
@@ -233,7 +345,11 @@
                                 style="width: 100%"
                                 @change="changeChartType()"
                               >
-                                <chart-type ref="cu-chart-type" :chart="view" style="height: 480px" />
+                                <chart-type
+                                  ref="cu-chart-type"
+                                  :chart="view"
+                                  style="height: 480px"
+                                />
                               </el-radio-group>
                             </div>
                           </el-row>
@@ -251,13 +367,22 @@
                   </el-row>
                 </span>
               </div>
-              <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style theme-border-class">
+              <div
+                style="overflow:auto;border-top: 1px solid #e6e6e6"
+                class="attr-style theme-border-class"
+              >
                 <el-row style="height: 100%;">
                   <el-row class="padding-lr">
-                    <span v-show="view.type==='richTextView'" style="color: #909399; font-size: 8px;width: 80px;text-align: right;">
+                    <span
+                      v-show="view.type==='richTextView'"
+                      style="color: #909399; font-size: 8px;width: 80px;text-align: right;"
+                    >
                       Tips:{{ $t('chart.rich_text_view_result_tips') }}
                     </span>
-                    <span v-show="view.type!=='richTextView'" style="width: 80px;text-align: right;">
+                    <span
+                      v-show="view.type!=='richTextView'"
+                      style="width: 80px;text-align: right;"
+                    >
                       {{ $t('chart.result_count') }}
                     </span>
                     <el-row v-show="view.type!=='richTextView'">
@@ -287,7 +412,10 @@
                   />
                   <div v-else>
 
-                    <el-row v-if="view.type ==='map'" class="padding-lr">
+                    <el-row
+                      v-if="view.type ==='map'"
+                      class="padding-lr"
+                    >
                       <span style="width: 80px;text-align: right;">
                         <span>{{ $t('chart.map_range') }}</span>
                       </span>
@@ -342,7 +470,10 @@
                           />
                         </transition-group>
                       </draggable>
-                      <div v-if="!view.xaxisExt || view.xaxisExt.length === 0" class="drag-placeholder-style">
+                      <div
+                        v-if="!view.xaxisExt || view.xaxisExt.length === 0"
+                        class="drag-placeholder-style"
+                      >
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
@@ -409,7 +540,10 @@
                           />
                         </transition-group>
                       </draggable>
-                      <div v-if="!view.xaxis || view.xaxis.length === 0" class="drag-placeholder-style">
+                      <div
+                        v-if="!view.xaxis || view.xaxis.length === 0"
+                        class="drag-placeholder-style"
+                      >
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
@@ -425,11 +559,18 @@
                         </span>
                         /
                         <span>{{ $t('chart.dimension') }}</span>
-                        <el-tooltip class="item" effect="dark" placement="bottom">
+                        <el-tooltip
+                          class="item"
+                          effect="dark"
+                          placement="bottom"
+                        >
                           <div slot="content">
                             该字段为必填项，且不应使用类别轴中字段，若无需该字段，请选择基础柱状图展示；否则展示结果不理想
                           </div>
-                          <i class="el-icon-info" style="cursor: pointer;color: #606266;" />
+                          <i
+                            class="el-icon-info"
+                            style="cursor: pointer;color: #606266;"
+                          />
                         </el-tooltip>
                       </span>
                       <draggable
@@ -457,7 +598,10 @@
                           />
                         </transition-group>
                       </draggable>
-                      <div v-if="!view.xaxisExt || view.xaxisExt.length === 0" class="drag-placeholder-style">
+                      <div
+                        v-if="!view.xaxisExt || view.xaxisExt.length === 0"
+                        class="drag-placeholder-style"
+                      >
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
@@ -533,12 +677,19 @@
                           />
                         </transition-group>
                       </draggable>
-                      <div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
+                      <div
+                        v-if="!view.yaxis || view.yaxis.length === 0"
+                        class="drag-placeholder-style"
+                      >
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
                     <!--yAxisExt-->
-                    <el-row v-if="view.type && view.type === 'chart-mix'" class="padding-lr" style="margin-top: 6px;">
+                    <el-row
+                      v-if="view.type && view.type === 'chart-mix'"
+                      class="padding-lr"
+                      style="margin-top: 6px;"
+                    >
                       <span style="width: 80px;text-align: right;">
                         <span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
                         /
@@ -571,12 +722,19 @@
                           />
                         </transition-group>
                       </draggable>
-                      <div v-if="!view.yaxisExt || view.yaxisExt.length === 0" class="drag-placeholder-style">
+                      <div
+                        v-if="!view.yaxisExt || view.yaxisExt.length === 0"
+                        class="drag-placeholder-style"
+                      >
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
                     <!--extStack-->
-                    <el-row v-if="view.type && view.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
+                    <el-row
+                      v-if="view.type && view.type.includes('stack')"
+                      class="padding-lr"
+                      style="margin-top: 6px;"
+                    >
                       <span style="width: 80px;text-align: right;">
                         <span>{{ $t('chart.stack_item') }}</span>
                         /
@@ -607,7 +765,10 @@
                           />
                         </transition-group>
                       </draggable>
-                      <div v-if="!view.extStack || view.extStack.length === 0" class="drag-placeholder-style">
+                      <div
+                        v-if="!view.extStack || view.extStack.length === 0"
+                        class="drag-placeholder-style"
+                      >
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
@@ -621,11 +782,18 @@
                         <span>{{ $t('chart.bubble_size') }}</span>
                         /
                         <span>{{ $t('chart.quota') }}</span>
-                        <el-tooltip class="item" effect="dark" placement="bottom">
+                        <el-tooltip
+                          class="item"
+                          effect="dark"
+                          placement="bottom"
+                        >
                           <div slot="content">
                             该指标生效时，样式大小中的气泡大小属性将失效
                           </div>
-                          <i class="el-icon-info" style="cursor: pointer;color: #606266;" />
+                          <i
+                            class="el-icon-info"
+                            style="cursor: pointer;color: #606266;"
+                          />
                         </el-tooltip>
                       </span>
                       <draggable
@@ -652,11 +820,17 @@
                           />
                         </transition-group>
                       </draggable>
-                      <div v-if="!view.extBubble || view.extBubble.length === 0" class="drag-placeholder-style">
+                      <div
+                        v-if="!view.extBubble || view.extBubble.length === 0"
+                        class="drag-placeholder-style"
+                      >
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
-                    <el-row class="padding-lr" style="margin-top: 6px;">
+                    <el-row
+                      class="padding-lr"
+                      style="margin-top: 6px;"
+                    >
                       <span>{{ $t('chart.result_filter') }}</span>
                       <draggable
                         v-model="view.customFilter"
@@ -682,7 +856,10 @@
                           />
                         </transition-group>
                       </draggable>
-                      <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
+                      <div
+                        v-if="!view.customFilter || view.customFilter.length === 0"
+                        class="drag-placeholder-style"
+                      >
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
@@ -695,11 +872,18 @@
                         <span>{{ $t('chart.drill') }}</span>
                         /
                         <span>{{ $t('chart.dimension') }}</span>
-                        <el-tooltip class="item" effect="dark" placement="bottom">
+                        <el-tooltip
+                          class="item"
+                          effect="dark"
+                          placement="bottom"
+                        >
                           <div slot="content">
                             钻取字段仅支持数据集中的字段
                           </div>
-                          <i class="el-icon-info" style="cursor: pointer;color: #606266;" />
+                          <i
+                            class="el-icon-info"
+                            style="cursor: pointer;color: #606266;"
+                          />
                         </el-tooltip>
                       </span>
                       <draggable
@@ -725,7 +909,10 @@
                           />
                         </transition-group>
                       </draggable>
-                      <div v-if="!view.drillFields || view.drillFields.length === 0" class="drag-placeholder-style">
+                      <div
+                        v-if="!view.drillFields || view.drillFields.length === 0"
+                        class="drag-placeholder-style"
+                      >
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
@@ -735,7 +922,12 @@
             </el-col>
           </el-row>
         </el-tab-pane>
-        <el-tab-pane name="style" :label="$t('chart.chart_style')" class="padding-tab" style="width: 350px">
+        <el-tab-pane
+          name="style"
+          :label="$t('chart.chart_style')"
+          class="padding-tab"
+          style="width: 350px"
+        >
           <chart-style
             v-if="chartProperties || view.isPlugin"
             :param="param"
@@ -761,7 +953,12 @@
             @onChangeBackgroundForm="onChangeBackgroundForm"
           />
         </el-tab-pane>
-        <el-tab-pane name="senior" :label="$t('chart.senior')" class="padding-tab" style="width: 350px;">
+        <el-tab-pane
+          name="senior"
+          :label="$t('chart.senior')"
+          class="padding-tab"
+          style="width: 350px;"
+        >
           <el-row class="view-panel">
             <div
               v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type.includes('table') || view.type === 'map' || view.type === 'buddle-map')"
@@ -772,8 +969,15 @@
                 v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type === 'table-normal' || view.type === 'table-info')"
               >
                 <span class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
-                <el-collapse v-model="attrActiveNames" class="style-collapse">
-                  <el-collapse-item v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix'))" name="function" :title="$t('chart.function_cfg')">
+                <el-collapse
+                  v-model="attrActiveNames"
+                  class="style-collapse"
+                >
+                  <el-collapse-item
+                    v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix'))"
+                    name="function"
+                    :title="$t('chart.function_cfg')"
+                  >
                     <function-cfg
                       :param="param"
                       class="attr-selector"
@@ -781,7 +985,11 @@
                       @onFunctionCfgChange="onFunctionCfgChange"
                     />
                   </el-collapse-item>
-                  <el-collapse-item v-if="view.type && (view.type === 'table-normal' || view.type === 'table-info')" name="scroll" :title="$t('chart.scroll_cfg')">
+                  <el-collapse-item
+                    v-if="view.type && (view.type === 'table-normal' || view.type === 'table-info')"
+                    name="scroll"
+                    :title="$t('chart.scroll_cfg')"
+                  >
                     <scroll-cfg
                       :param="param"
                       class="attr-selector"
@@ -795,7 +1003,10 @@
                 v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || (view.render === 'antv' && view.type.includes('table')))"
               >
                 <span class="padding-lr">{{ $t('chart.analyse_cfg') }}</span>
-                <el-collapse v-model="styleActiveNames" class="style-collapse">
+                <el-collapse
+                  v-model="styleActiveNames"
+                  class="style-collapse"
+                >
                   <el-collapse-item
                     v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix'))"
                     name="analyse"
@@ -826,10 +1037,19 @@
 
               <el-row v-if="view.type && (view.type === 'map' || view.type === 'buddle-map')">
 
-                <span v-if="false" class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
-                <el-collapse v-model="mapActiveNames" class="style-collapse">
+                <span
+                  v-if="false"
+                  class="padding-lr"
+                >{{ $t('chart.senior_cfg') }}</span>
+                <el-collapse
+                  v-model="mapActiveNames"
+                  class="style-collapse"
+                >
 
-                  <el-collapse-item title="地名映射" name="map-mapping">
+                  <el-collapse-item
+                    title="地名映射"
+                    name="map-mapping"
+                  >
                     <map-mapping
                       :param="param"
                       class="attr-selector"
@@ -844,16 +1064,28 @@
               </el-row>
 
             </div>
-            <div v-else class="no-senior">
+            <div
+              v-else
+              class="no-senior"
+            >
               {{ $t('chart.chart_no_senior') }}
             </div>
           </el-row>
         </el-tab-pane>
       </el-tabs>
 
-      <el-col v-if="editFrom==='view'" style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
-        <el-row style="width: 100%;height: 100%;" class="padding-lr">
-          <div ref="imageWrapper" style="height: 100%">
+      <el-col
+        v-if="editFrom==='view'"
+        style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;"
+      >
+        <el-row
+          style="width: 100%;height: 100%;"
+          class="padding-lr"
+        >
+          <div
+            ref="imageWrapper"
+            style="height: 100%"
+          >
             <plugin-com
               v-if="httpRequest.status && chart.type && view.isPlugin"
               ref="dynamicChart"
@@ -906,7 +1138,10 @@
               :chart="chart"
               class="table-class"
             />
-            <div v-if="!httpRequest.status" class="chart-error-class">
+            <div
+              v-if="!httpRequest.status"
+              class="chart-error-class"
+            >
               <div
                 style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;"
               >
@@ -917,25 +1152,60 @@
             </div>
           </div>
           <div style="position: absolute;left: 8px;bottom:8px;">
-            <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
+            <drill-path
+              :drill-filters="drillFilters"
+              @onDrillJump="drillJump"
+            />
           </div>
         </el-row>
       </el-col>
     </el-row>
 
     <!--显示名修改-->
-    <el-dialog v-dialogDrag :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
-      <el-form ref="itemForm" label-width="80px" :model="itemForm" :rules="itemFormRules">
-        <el-form-item :label="$t('dataset.field_origin_name')" class="form-item">
+    <el-dialog
+      v-dialogDrag
+      :title="$t('chart.show_name_set')"
+      :visible="renameItem"
+      :show-close="false"
+      width="30%"
+    >
+      <el-form
+        ref="itemForm"
+        label-width="80px"
+        :model="itemForm"
+        :rules="itemFormRules"
+      >
+        <el-form-item
+          :label="$t('dataset.field_origin_name')"
+          class="form-item"
+        >
           <span style="padding: 0 16px;">{{ itemForm.dsFieldName }}</span>
         </el-form-item>
-        <el-form-item :label="$t('chart.show_name')" class="form-item">
-          <el-input v-model="itemForm.name" style="width: 200px" size="mini" clearable />
+        <el-form-item
+          :label="$t('chart.show_name')"
+          class="form-item"
+        >
+          <el-input
+            v-model="itemForm.name"
+            style="width: 200px"
+            size="mini"
+            clearable
+          />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveRename">{{ $t('chart.confirm') }}</el-button>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeRename()"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="saveRename"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -950,9 +1220,19 @@
       class="dialog-css"
     >
       <quota-filter-editor :item="quotaItem" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeQuotaFilter">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveQuotaFilter">{{ $t('chart.confirm') }}</el-button>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeQuotaFilter"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="saveQuotaFilter"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
     <el-dialog
@@ -965,9 +1245,19 @@
       class="dialog-css"
     >
       <dimension-filter-editor :item="dimensionItem" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeDimensionFilter">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveDimensionFilter">{{ $t('chart.confirm') }}</el-button>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeDimensionFilter"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="saveDimensionFilter"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
     <el-dialog
@@ -979,10 +1269,23 @@
       width="800px"
       class="dialog-css"
     >
-      <result-filter-editor :chart="chartForFilter" :item="filterItem" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeResultFilter">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveResultFilter">{{ $t('chart.confirm') }}</el-button>
+      <result-filter-editor
+        :chart="chartForFilter"
+        :item="filterItem"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeResultFilter"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="saveResultFilter"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -996,11 +1299,25 @@
       width="70%"
       class="dialog-css"
     >
-      <table-selector :checked-table="table" @getTable="getTable" />
+      <table-selector
+        :checked-table="table"
+        @getTable="getTable"
+      />
       <p style="margin-top: 10px;color:#F56C6C;font-size: 12px;">{{ $t('chart.change_ds_tip') }}</p>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeChangeChart">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" :disabled="!changeTable || !changeTable.id" @click="changeChart">
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeChangeChart"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          :disabled="!changeTable || !changeTable.id"
+          @click="changeChart"
+        >
           {{ $t('chart.confirm') }}
         </el-button>
       </div>
@@ -1014,13 +1331,23 @@
       class="dialog-css"
       :fullscreen="true"
     >
-      <field-edit :param="table" :table="table" />
-      <div slot="title" class="dialog-footer title-text">
+      <field-edit
+        :param="table"
+        :table="table"
+      />
+      <div
+        slot="title"
+        class="dialog-footer title-text"
+      >
         <span style="font-size: 14px;">
           {{ $t('chart.ds_field_edit') }}
           <span v-if="table">[{{ table.name }}]</span>
         </span>
-        <el-button size="mini" style="float: right;" @click="closeEditDsField">{{ $t('chart.close') }}</el-button>
+        <el-button
+          size="mini"
+          style="float: right;"
+          @click="closeEditDsField"
+        >{{ $t('chart.close') }}</el-button>
       </div>
     </el-dialog>
 
@@ -1032,13 +1359,24 @@
       class="dialog-css"
       :fullscreen="true"
     >
-      <chart-field-edit :param="chart" :table="table" :chart="chart" />
-      <div slot="title" class="dialog-footer title-text">
+      <chart-field-edit
+        :param="chart"
+        :table="table"
+        :chart="chart"
+      />
+      <div
+        slot="title"
+        class="dialog-footer title-text"
+      >
         <span style="font-size: 14px;">
           {{ $t('chart.chart_field_edit') }}
           <span v-if="table">[{{ chart.title }}]</span>
         </span>
-        <el-button size="mini" style="float: right;" @click="closeEditChartField">{{ $t('chart.close') }}</el-button>
+        <el-button
+          size="mini"
+          style="float: right;"
+          @click="closeEditChartField"
+        >{{ $t('chart.close') }}</el-button>
       </div>
     </el-dialog>
 
@@ -1052,10 +1390,23 @@
       width="600px"
       class="dialog-css"
     >
-      <compare-edit :compare-item="quotaItemCompare" :chart="chart" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeQuotaEditCompare">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveQuotaEditCompare">{{ $t('chart.confirm') }}</el-button>
+      <compare-edit
+        :compare-item="quotaItemCompare"
+        :chart="chart"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeQuotaEditCompare"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="saveQuotaEditCompare"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -1069,10 +1420,23 @@
       width="600px"
       class="dialog-css"
     >
-      <value-formatter-edit :formatter-item="valueFormatterItem" :chart="chart" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeValueFormatter">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveValueFormatter">{{ $t('chart.confirm') }}</el-button>
+      <value-formatter-edit
+        :formatter-item="valueFormatterItem"
+        :chart="chart"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeValueFormatter"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="saveValueFormatter"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -1086,10 +1450,25 @@
       width="500px"
       class="dialog-css"
     >
-      <custom-sort-edit :chart="chart" field-type="xAxis" :field="customSortField" @onSortChange="customSortChange" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeCustomSort">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveCustomSort">{{ $t('chart.confirm') }}</el-button>
+      <custom-sort-edit
+        :chart="chart"
+        field-type="xAxis"
+        :field="customSortField"
+        @onSortChange="customSortChange"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeCustomSort"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="saveCustomSort"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -1103,10 +1482,25 @@
       width="500px"
       class="dialog-css"
     >
-      <custom-sort-edit :chart="chart" field-type="extStack" :field="customSortField" @onSortChange="customSortChange" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeStackCustomSort">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveStackCustomSort">{{ $t('chart.confirm') }}</el-button>
+      <custom-sort-edit
+        :chart="chart"
+        field-type="extStack"
+        :field="customSortField"
+        @onSortChange="customSortChange"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeStackCustomSort"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="saveStackCustomSort"
+        >{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -1460,7 +1854,7 @@ export default {
   },
 
   methods: {
-    resetChartData(){
+    resetChartData() {
       this.getChart(this.param.id)
     },
     setDynamicAreaCode(code) {
diff --git a/frontend/src/views/chart/view/ChartFieldEdit.vue b/frontend/src/views/chart/view/ChartFieldEdit.vue
index c8f8fed098..55287b9bd6 100644
--- a/frontend/src/views/chart/view/ChartFieldEdit.vue
+++ b/frontend/src/views/chart/view/ChartFieldEdit.vue
@@ -3,11 +3,18 @@
     <el-row>
       <el-form :inline="true">
         <el-form-item class="form-item">
-          <el-button size="mini" icon="el-icon-circle-plus-outline" @click="addCalcField">
+          <el-button
+            size="mini"
+            icon="el-icon-circle-plus-outline"
+            @click="addCalcField"
+          >
             {{ $t('dataset.add_calc_field') }}
           </el-button>
         </el-form-item>
-        <el-form-item class="form-item" style="float: right;margin-right: 0;">
+        <el-form-item
+          class="form-item"
+          style="float: right;margin-right: 0;"
+        >
           <el-input
             v-model="searchField"
             size="mini"
@@ -20,10 +27,23 @@
       </el-form>
     </el-row>
 
-    <el-collapse v-model="fieldActiveNames" class="style-collapse">
-      <el-collapse-item name="d" :title="$t('chart.dimension')">
-        <el-table :data="tableFields.dimensionListData" size="mini">
-          <el-table-column property="name" :label="$t('dataset.field_name')" width="180">
+    <el-collapse
+      v-model="fieldActiveNames"
+      class="style-collapse"
+    >
+      <el-collapse-item
+        name="d"
+        :title="$t('chart.dimension')"
+      >
+        <el-table
+          :data="tableFields.dimensionListData"
+          size="mini"
+        >
+          <el-table-column
+            property="name"
+            :label="$t('dataset.field_name')"
+            width="180"
+          >
             <template slot-scope="scope">
               <el-input
                 v-model="scope.row.name"
@@ -33,7 +53,11 @@
               />
             </template>
           </el-table-column>
-          <el-table-column property="deType" :label="$t('dataset.field_type')" width="140">
+          <el-table-column
+            property="deType"
+            :label="$t('dataset.field_type')"
+            width="140"
+          >
             <template slot-scope="scope">
               <el-select
                 v-model="scope.row.deType"
@@ -48,14 +72,26 @@
                   :value="item.value"
                 >
                   <span style="float: left">
-                    <svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />
-                    <svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />
+                    <svg-icon
+                      v-if="item.value === 0"
+                      icon-class="field_text"
+                      class="field-icon-text"
+                    />
+                    <svg-icon
+                      v-if="item.value === 1"
+                      icon-class="field_time"
+                      class="field-icon-time"
+                    />
                     <svg-icon
                       v-if="item.value === 2 || item.value === 3"
                       icon-class="field_value"
                       class="field-icon-value"
                     />
-                    <svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
+                    <svg-icon
+                      v-if="item.value === 5"
+                      icon-class="field_location"
+                      class="field-icon-location"
+                    />
                   </span>
                   <span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
                 </el-option>
@@ -70,7 +106,11 @@
                   <span class="field-class">{{ $t('dataset.text') }}</span>
                 </span>
                 <span v-if="scope.row.deType === 1">
-                  <svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
+                  <svg-icon
+                    v-if="scope.row.deType === 1"
+                    icon-class="field_time"
+                    class="field-icon-time"
+                  />
                   <span class="field-class">{{ $t('dataset.time') }}</span>
                 </span>
                 <span v-if="scope.row.deType === 2 || scope.row.deType === 3">
@@ -79,20 +119,31 @@
                     icon-class="field_value"
                     class="field-icon-value"
                   />
-                  <span v-if="scope.row.deType === 2" class="field-class">{{ $t('dataset.value') }}</span>
+                  <span
+                    v-if="scope.row.deType === 2"
+                    class="field-class"
+                  >{{ $t('dataset.value') }}</span>
                   <span
                     v-if="scope.row.deType === 3"
                     class="field-class"
                   >{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
                 </span>
                 <span v-if="scope.row.deType === 5">
-                  <svg-icon v-if="scope.row.deType === 5" icon-class="field_location" class="field-icon-location" />
+                  <svg-icon
+                    v-if="scope.row.deType === 5"
+                    icon-class="field_location"
+                    class="field-icon-location"
+                  />
                   <span class="field-class">{{ $t('dataset.location') }}</span>
                 </span>
               </span>
             </template>
           </el-table-column>
-          <el-table-column property="deExtractType" :label="$t('dataset.origin_field_type')" width="100">
+          <el-table-column
+            property="deExtractType"
+            :label="$t('dataset.origin_field_type')"
+            width="100"
+          >
             <template slot-scope="scope">
               <span>
                 <span v-if="scope.row.deExtractType === 0 || scope.row.deExtractType === 6">
@@ -104,7 +155,11 @@
                   <span class="field-class">{{ $t('dataset.text') }}</span>
                 </span>
                 <span v-if="scope.row.deExtractType === 1">
-                  <svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
+                  <svg-icon
+                    v-if="scope.row.deExtractType === 1"
+                    icon-class="field_time"
+                    class="field-icon-time"
+                  />
                   <span class="field-class">{{ $t('dataset.time') }}</span>
                 </span>
                 <span
@@ -135,21 +190,41 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column property="fromType" :label="$t('chart.form_type')" width="120">
+          <el-table-column
+            property="fromType"
+            :label="$t('chart.form_type')"
+            width="120"
+          >
             <template slot-scope="scope">
-              <span v-if="scope.row.extField === 1" class="from-type-span">{{ $t('chart.copy_field') }}</span>
-              <span v-if="scope.row.extField === 2" class="from-type-span">{{ $t('chart.calc_field') }}</span>
+              <span
+                v-if="scope.row.extField === 1"
+                class="from-type-span"
+              >{{ $t('chart.copy_field') }}</span>
+              <span
+                v-if="scope.row.extField === 2"
+                class="from-type-span"
+              >{{ $t('chart.calc_field') }}</span>
             </template>
           </el-table-column>
-          <el-table-column property="groupType" width="120">
+          <el-table-column
+            property="groupType"
+            width="120"
+          >
             <template slot="header">
               <span style="font-size: 12px;">
                 {{ $t('dataset.d_q_trans') }}
-                <el-tooltip class="item" effect="dark" placement="bottom">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  placement="bottom"
+                >
                   <div slot="content">
                     若字段表达式中使用聚合函数，则字段不能设置为维度使用。
                   </div>
-                  <i class="el-icon-info" style="cursor: pointer;" />
+                  <i
+                    class="el-icon-info"
+                    style="cursor: pointer;"
+                  />
                 </el-tooltip>
               </span>
             </template>
@@ -162,7 +237,10 @@
               />
             </template>
           </el-table-column>
-          <el-table-column property="" :label="$t('dataset.operator')">
+          <el-table-column
+            property=""
+            :label="$t('dataset.operator')"
+          >
             <template slot-scope="scope">
               <el-button
                 v-if="scope.row.extField !== 0"
@@ -183,9 +261,19 @@
         </el-table>
       </el-collapse-item>
 
-      <el-collapse-item name="q" :title="$t('chart.quota')">
-        <el-table :data="tableFields.quotaListData" size="mini">
-          <el-table-column property="name" :label="$t('dataset.field_name')" width="180">
+      <el-collapse-item
+        name="q"
+        :title="$t('chart.quota')"
+      >
+        <el-table
+          :data="tableFields.quotaListData"
+          size="mini"
+        >
+          <el-table-column
+            property="name"
+            :label="$t('dataset.field_name')"
+            width="180"
+          >
             <template slot-scope="scope">
               <el-input
                 v-model="scope.row.name"
@@ -195,7 +283,11 @@
               />
             </template>
           </el-table-column>
-          <el-table-column property="deType" :label="$t('dataset.field_type')" width="140">
+          <el-table-column
+            property="deType"
+            :label="$t('dataset.field_type')"
+            width="140"
+          >
             <template slot-scope="scope">
               <el-select
                 v-model="scope.row.deType"
@@ -210,25 +302,45 @@
                   :value="item.value"
                 >
                   <span style="float: left">
-                    <svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />
-                    <svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />
+                    <svg-icon
+                      v-if="item.value === 0"
+                      icon-class="field_text"
+                      class="field-icon-text"
+                    />
+                    <svg-icon
+                      v-if="item.value === 1"
+                      icon-class="field_time"
+                      class="field-icon-time"
+                    />
                     <svg-icon
                       v-if="item.value === 2 || item.value === 3"
                       icon-class="field_value"
                       class="field-icon-value"
                     />
-                    <svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
+                    <svg-icon
+                      v-if="item.value === 5"
+                      icon-class="field_location"
+                      class="field-icon-location"
+                    />
                   </span>
                   <span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
                 </el-option>
               </el-select>
               <span style="margin-left: 8px;">
                 <span v-if="scope.row.deType === 0">
-                  <svg-icon v-if="scope.row.deType === 0" icon-class="field_text" class="field-icon-text" />
+                  <svg-icon
+                    v-if="scope.row.deType === 0"
+                    icon-class="field_text"
+                    class="field-icon-text"
+                  />
                   <span class="field-class">{{ $t('dataset.text') }}</span>
                 </span>
                 <span v-if="scope.row.deType === 1">
-                  <svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
+                  <svg-icon
+                    v-if="scope.row.deType === 1"
+                    icon-class="field_time"
+                    class="field-icon-time"
+                  />
                   <span class="field-class">{{ $t('dataset.time') }}</span>
                 </span>
                 <span v-if="scope.row.deType === 2 || scope.row.deType === 3">
@@ -237,28 +349,47 @@
                     icon-class="field_value"
                     class="field-icon-value"
                   />
-                  <span v-if="scope.row.deType === 2" class="field-class">{{ $t('dataset.value') }}</span>
+                  <span
+                    v-if="scope.row.deType === 2"
+                    class="field-class"
+                  >{{ $t('dataset.value') }}</span>
                   <span
                     v-if="scope.row.deType === 3"
                     class="field-class"
                   >{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
                 </span>
                 <span v-if="scope.row.deType === 5">
-                  <svg-icon v-if="scope.row.deType === 5" icon-class="field_location" class="field-icon-location" />
+                  <svg-icon
+                    v-if="scope.row.deType === 5"
+                    icon-class="field_location"
+                    class="field-icon-location"
+                  />
                   <span class="field-class">{{ $t('dataset.location') }}</span>
                 </span>
               </span>
             </template>
           </el-table-column>
-          <el-table-column property="deExtractType" :label="$t('dataset.origin_field_type')" width="100">
+          <el-table-column
+            property="deExtractType"
+            :label="$t('dataset.origin_field_type')"
+            width="100"
+          >
             <template slot-scope="scope">
               <span>
                 <span v-if="scope.row.deExtractType === 0">
-                  <svg-icon v-if="scope.row.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
+                  <svg-icon
+                    v-if="scope.row.deExtractType === 0"
+                    icon-class="field_text"
+                    class="field-icon-text"
+                  />
                   <span class="field-class">{{ $t('dataset.text') }}</span>
                 </span>
                 <span v-if="scope.row.deExtractType === 1">
-                  <svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
+                  <svg-icon
+                    v-if="scope.row.deExtractType === 1"
+                    icon-class="field_time"
+                    class="field-icon-time"
+                  />
                   <span class="field-class">{{ $t('dataset.time') }}</span>
                 </span>
                 <span
@@ -289,21 +420,41 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column property="fromType" :label="$t('chart.form_type')" width="120">
+          <el-table-column
+            property="fromType"
+            :label="$t('chart.form_type')"
+            width="120"
+          >
             <template slot-scope="scope">
-              <span v-if="scope.row.extField === 1" class="from-type-span">{{ $t('chart.copy_field') }}</span>
-              <span v-if="scope.row.extField === 2" class="from-type-span">{{ $t('chart.calc_field') }}</span>
+              <span
+                v-if="scope.row.extField === 1"
+                class="from-type-span"
+              >{{ $t('chart.copy_field') }}</span>
+              <span
+                v-if="scope.row.extField === 2"
+                class="from-type-span"
+              >{{ $t('chart.calc_field') }}</span>
             </template>
           </el-table-column>
-          <el-table-column property="groupType" width="120">
+          <el-table-column
+            property="groupType"
+            width="120"
+          >
             <template slot="header">
               <span style="font-size: 12px;">
                 {{ $t('dataset.d_q_trans') }}
-                <el-tooltip class="item" effect="dark" placement="bottom">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  placement="bottom"
+                >
                   <div slot="content">
                     若字段表达式中使用聚合函数，则字段不能设置为维度使用。
                   </div>
-                  <i class="el-icon-info" style="cursor: pointer;" />
+                  <i
+                    class="el-icon-info"
+                    style="cursor: pointer;"
+                  />
                 </el-tooltip>
               </span>
             </template>
@@ -316,7 +467,10 @@
               />
             </template>
           </el-table-column>
-          <el-table-column property="" :label="$t('dataset.operator')">
+          <el-table-column
+            property=""
+            :label="$t('dataset.operator')"
+          >
             <template slot-scope="scope">
               <el-button
                 v-if="scope.row.extField !== 0"
diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue
index 8e41267a75..a69148f0e8 100644
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@@ -1,6 +1,9 @@
 <template>
   <el-row class="view-panel">
-    <div v-if="properties.length===0" class="no-properties">
+    <div
+      v-if="properties.length===0"
+      class="no-properties"
+    >
       {{ $t('chart.chart_no_properties') }}
     </div>
     <plugin-com
@@ -17,8 +20,15 @@
     >
       <el-row>
         <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
-        <el-collapse v-model="attrActiveNames" class="style-collapse">
-          <el-collapse-item v-show="showPropertiesCollapse(['color-selector'])" name="color" :title="$t('chart.color')">
+        <el-collapse
+          v-model="attrActiveNames"
+          class="style-collapse"
+        >
+          <el-collapse-item
+            v-show="showPropertiesCollapse(['color-selector'])"
+            name="color"
+            :title="$t('chart.color')"
+          >
             <color-selector
               :param="param"
               class="attr-selector"
@@ -115,7 +125,10 @@
       </el-row>
       <el-row>
         <span class="padding-lr">{{ $t('chart.module_style') }}</span>
-        <el-collapse v-model="styleActiveNames" class="style-collapse">
+        <el-collapse
+          v-model="styleActiveNames"
+          class="style-collapse"
+        >
           <el-collapse-item
             v-show="showPropertiesCollapse(['x-axis-selector','x-axis-selector-ant-v'])"
             name="xAxis"
diff --git a/frontend/src/views/chart/view/ChartStyleBatchSet.vue b/frontend/src/views/chart/view/ChartStyleBatchSet.vue
index bcf40f9d33..ea69d06fbb 100644
--- a/frontend/src/views/chart/view/ChartStyleBatchSet.vue
+++ b/frontend/src/views/chart/view/ChartStyleBatchSet.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="batch-opt-main">
     <el-row style="height: 40px">
-      <span class="title-text view-title-name" style="line-height: 40px;">{{ $t('panel.batch_opt') }}</span>
+      <span
+        class="title-text view-title-name"
+        style="line-height: 40px;"
+      >{{ $t('panel.batch_opt') }}</span>
     </el-row>
     <chart-style
       v-if="mixProperties&&batchOptChartInfo"
diff --git a/frontend/src/views/chart/view/ChartType.vue b/frontend/src/views/chart/view/ChartType.vue
index b270062578..56603cb2e7 100644
--- a/frontend/src/views/chart/view/ChartType.vue
+++ b/frontend/src/views/chart/view/ChartType.vue
@@ -1,16 +1,52 @@
 <template>
-  <div v-if="loadFinish" class="chart-type">
-    <div v-for="(renderItem, category) in renderMap[chart.render]" :key="category">
+  <div
+    v-if="loadFinish"
+    class="chart-type"
+  >
+    <div
+      v-for="(renderItem, category) in renderMap[chart.render]"
+      :key="category"
+    >
       <el-divider class="chart-type-divider">{{ $t(category) }}</el-divider>
 
-      <div v-for="(container, i) in renderItem" :key="i" style="display: block;">
+      <div
+        v-for="(container, i) in renderItem"
+        :key="i"
+        style="display: block;"
+      >
         <div class="radio-row">
-          <div v-for="(item, idx) in container" :key="idx" style="position: relative;display: block;" :style="{'top': item.isPlugin ? '5px' : '0'}">
-            <el-radio v-if="item.placeholder" value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-            <plugin-com v-else-if="item.isPlugin" :component-name="item.value + '-type'" />
-            <el-radio v-else :value="item.value" :label="item.value" border class="radio-style">
+          <div
+            v-for="(item, idx) in container"
+            :key="idx"
+            style="position: relative;display: block;"
+            :style="{'top': item.isPlugin ? '5px' : '0'}"
+          >
+            <el-radio
+              v-if="item.placeholder"
+              value=""
+              label=""
+              disabled
+              class="disabled-none-cursor"
+            ><svg-icon
+              icon-class=""
+              class="chart-icon"
+            /></el-radio>
+            <plugin-com
+              v-else-if="item.isPlugin"
+              :component-name="item.value + '-type'"
+            />
+            <el-radio
+              v-else
+              :value="item.value"
+              :label="item.value"
+              border
+              class="radio-style"
+            >
               <span :title="$t(item.title)">
-                <svg-icon :icon-class="item.icon" class="chart-icon" />
+                <svg-icon
+                  :icon-class="item.icon"
+                  class="chart-icon"
+                />
               </span>
               <p class="radio-label">{{ $t(item.title) }}</p>
             </el-radio>
diff --git a/frontend/src/views/chart/view/DrillPath.vue b/frontend/src/views/chart/view/DrillPath.vue
index 7dc900e6a6..053645ba59 100644
--- a/frontend/src/views/chart/view/DrillPath.vue
+++ b/frontend/src/views/chart/view/DrillPath.vue
@@ -1,10 +1,21 @@
 <template>
   <div v-if="drillFilters && drillFilters.length > 0">
-    <el-breadcrumb separator-class="el-icon-arrow-right" class="drill-style">
-      <el-breadcrumb-item class="drill-item" @click.native="drillJump(0)">
+    <el-breadcrumb
+      separator-class="el-icon-arrow-right"
+      class="drill-style"
+    >
+      <el-breadcrumb-item
+        class="drill-item"
+        @click.native="drillJump(0)"
+      >
         <span :style="{'color': textColor}">{{ $t('commons.all') }}</span>
       </el-breadcrumb-item>
-      <el-breadcrumb-item v-for="(filter,index) in drillFilters" :key="index" class="drill-item" @click.native="drillJump(index + 1)">
+      <el-breadcrumb-item
+        v-for="(filter,index) in drillFilters"
+        :key="index"
+        class="drill-item"
+        @click.native="drillJump(index + 1)"
+      >
         <span :style="{'color': textColor}">{{ filter.value[0] }}</span>
       </el-breadcrumb-item>
     </el-breadcrumb>
diff --git a/frontend/src/views/chart/view/TableSelector.vue b/frontend/src/views/chart/view/TableSelector.vue
index e08662af67..c2209d05ba 100644
--- a/frontend/src/views/chart/view/TableSelector.vue
+++ b/frontend/src/views/chart/view/TableSelector.vue
@@ -1,7 +1,16 @@
 <template>
   <de-container>
     <de-aside-container>
-      <dataset-group-selector-tree :checked-table="checkedTable" :privileges="privileges" :mode="mode" :clear-empty-dir="clearEmptyDir" :type="type" :custom-type="customType" :show-mode="showMode" @getTable="getTable" />
+      <dataset-group-selector-tree
+        :checked-table="checkedTable"
+        :privileges="privileges"
+        :mode="mode"
+        :clear-empty-dir="clearEmptyDir"
+        :type="type"
+        :custom-type="customType"
+        :show-mode="showMode"
+        @getTable="getTable"
+      />
     </de-aside-container>
     <de-main-container>
       <dataset-table-data :table="table" />
diff --git a/frontend/src/views/chart/view/TitleRemark.vue b/frontend/src/views/chart/view/TitleRemark.vue
index 409f13ba5a..433d4d4763 100644
--- a/frontend/src/views/chart/view/TitleRemark.vue
+++ b/frontend/src/views/chart/view/TitleRemark.vue
@@ -7,8 +7,16 @@
       popper-class="remark-pop"
       :visible-arrow="false"
     >
-      <div class="remark-style" :style="{backgroundColor:remarkCfg.bgFill}" v-html="remarkCfg.content" />
-      <i slot="reference" class="el-icon-info" style="cursor: pointer;color: gray;font-size: 12px;" />
+      <div
+        class="remark-style"
+        :style="{backgroundColor:remarkCfg.bgFill}"
+        v-html="remarkCfg.content"
+      />
+      <i
+        slot="reference"
+        class="el-icon-info"
+        style="cursor: pointer;color: gray;font-size: 12px;"
+      />
     </el-popover>
   </span>
 </template>
diff --git a/frontend/src/views/dataset/add/AddApi.vue b/frontend/src/views/dataset/add/AddApi.vue
index 3c28491a45..c0171cd5aa 100644
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/frontend/src/views/dataset/add/AddApi.vue
@@ -1,13 +1,33 @@
 <template>
-  <div class="dataset-api" @mouseup="mouseupDrag" v-loading="loading">
-    <p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
+  <div
+    v-loading="loading"
+    class="dataset-api"
+    @mouseup="mouseupDrag"
+  >
+    <p
+      v-show="!showLeft"
+      class="arrow-right"
+      @click="showLeft = true"
+    >
       <i class="el-icon-d-arrow-right" />
     </p>
-    <div v-show="showLeft" @mousedown="mousedownDrag" :style="{ left: LeftWidth + 'px' }" class="drag-left"></div>
-    <div v-show="showLeft" :style="{ width: LeftWidth + 'px' }" class="table-list">
+    <div
+      v-show="showLeft"
+      :style="{ left: LeftWidth + 'px' }"
+      class="drag-left"
+      @mousedown="mousedownDrag"
+    />
+    <div
+      v-show="showLeft"
+      :style="{ width: LeftWidth + 'px' }"
+      class="table-list"
+    >
       <p class="select-ds">
         {{ $t('deDataset.select_data_source') }}
-        <i class="el-icon-d-arrow-left" @click="showLeft = false" />
+        <i
+          class="el-icon-d-arrow-left"
+          @click="showLeft = false"
+        />
       </p>
       <el-select
         v-model="dataSource"
@@ -32,13 +52,26 @@
         prefix-icon="el-icon-search"
         clearable
       />
-      <div v-if="!tableData.length && searchTable !== ''" class="el-empty">
-        <div class="el-empty__description" style="margin-top: 80px;color: #5e6d82;">
+      <div
+        v-if="!tableData.length && searchTable !== ''"
+        class="el-empty"
+      >
+        <div
+          class="el-empty__description"
+          style="margin-top: 80px;color: #5e6d82;"
+        >
           没有找到相关内容
         </div>
       </div>
-      <div v-loading="dsLoading" class="table-checkbox-list" v-else>
-        <el-checkbox-group v-model="checkTableList" size="small">
+      <div
+        v-else
+        v-loading="dsLoading"
+        class="table-checkbox-list"
+      >
+        <el-checkbox-group
+          v-model="checkTableList"
+          size="small"
+        >
           <el-tooltip
             v-for="t in tableData"
             :key="t.name"
@@ -55,11 +88,24 @@
               :title="t.name"
               @click="setActiveName(t)"
             >
-              <svg-icon v-if="!t.enableCheck" icon-class="Checkbox" style="margin-right: 8px"/>
-              <el-checkbox :label="t.name" v-else />
+              <svg-icon
+                v-if="!t.enableCheck"
+                icon-class="Checkbox"
+                style="margin-right: 8px"
+              />
+              <el-checkbox
+                v-else
+                :label="t.name"
+              />
               <span class="label">{{ showTableNameWithComment(t) }}</span>
-              <span v-if="t.nameExsit" class="error-name-exsit">
-                <svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
+              <span
+                v-if="t.nameExsit"
+                class="error-name-exsit"
+              >
+                <svg-icon
+                  icon-class="exclamationmark"
+                  class="ds-icon-scene"
+                />
               </span>
             </div>
           </el-tooltip>
@@ -86,8 +132,14 @@
           :placeholder="$t('dataset.connect_mode')"
           size="small"
         >
-          <el-option :label="$t('dataset.sync_now')" value="sync_now" />
-          <el-option :label="$t('dataset.sync_latter')" value="sync_latter" />
+          <el-option
+            :label="$t('dataset.sync_now')"
+            value="sync_now"
+          />
+          <el-option
+            :label="$t('dataset.sync_latter')"
+            value="sync_latter"
+          />
         </el-select>
       </div>
       <el-empty
@@ -115,7 +167,10 @@
             {{ $t('deDataset.already_exists') }}
           </div>
         </div>
-        <div v-loading="tableLoading" class="data">
+        <div
+          v-loading="tableLoading"
+          class="data"
+        >
           <span class="result-num">{{
             `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
           }}</span>
@@ -318,7 +373,7 @@ export default {
     },
     calHeight() {
       const that = this
-      setTimeout(function () {
+      setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
         that.height = currentHeight - 56 - 64 - 75 - 32 - 24 - 16 - 10
       }, 10)
diff --git a/frontend/src/views/dataset/add/AddCustom.vue b/frontend/src/views/dataset/add/AddCustom.vue
index 44eafb981e..3d6a369874 100644
--- a/frontend/src/views/dataset/add/AddCustom.vue
+++ b/frontend/src/views/dataset/add/AddCustom.vue
@@ -1,14 +1,25 @@
 <template>
   <el-col>
-    <el-row style="height: 26px;" class="title-text">
+    <el-row
+      style="height: 26px;"
+      class="title-text"
+    >
       <span style="line-height: 26px;">
         {{ param.tableId?$t('dataset.edit_custom_table'):$t('dataset.add_custom_table') }}
       </span>
       <el-row style="float: right">
-        <el-button size="mini" @click="cancel">
+        <el-button
+          size="mini"
+          @click="cancel"
+        >
           {{ $t('dataset.cancel') }}
         </el-button>
-        <el-button :disabled="!name || checkedList.length === 0" size="mini" type="primary" @click="save">
+        <el-button
+          :disabled="!name || checkedList.length === 0"
+          size="mini"
+          type="primary"
+          @click="save"
+        >
           {{ $t('dataset.confirm') }}
         </el-button>
       </el-row>
@@ -16,21 +27,53 @@
     <el-divider />
     <el-row>
       <el-form :inline="true">
-        <el-form-item class="form-item" :label="$t('commons.name')">
-          <el-input v-model="name" size="mini" :placeholder="$t('commons.name')" />
+        <el-form-item
+          class="form-item"
+          :label="$t('commons.name')"
+        >
+          <el-input
+            v-model="name"
+            size="mini"
+            :placeholder="$t('commons.name')"
+          />
         </el-form-item>
       </el-form>
     </el-row>
     <el-col style="display: flex;flex-direction: row">
-      <el-col class="panel-height" style="width: 220px;border-right:solid 1px #dcdfe6;border-top:solid 1px #dcdfe6;padding-right: 15px;overflow-y: auto;">
-        <dataset-group-selector :custom-type="customType" :table="table" :checked-list="checkedList" :union-data="unionData" @getTable="getTable" />
+      <el-col
+        class="panel-height"
+        style="width: 220px;border-right:solid 1px #dcdfe6;border-top:solid 1px #dcdfe6;padding-right: 15px;overflow-y: auto;"
+      >
+        <dataset-group-selector
+          :custom-type="customType"
+          :table="table"
+          :checked-list="checkedList"
+          :union-data="unionData"
+          @getTable="getTable"
+        />
       </el-col>
-      <el-col class="panel-height" style="width: 235px;border-top:solid 1px #dcdfe6;padding: 0 15px;overflow-y: auto;">
-        <dataset-custom-field :table="table" :checked-list="checkedList" @getChecked="getChecked" />
+      <el-col
+        class="panel-height"
+        style="width: 235px;border-top:solid 1px #dcdfe6;padding: 0 15px;overflow-y: auto;"
+      >
+        <dataset-custom-field
+          :table="table"
+          :checked-list="checkedList"
+          @getChecked="getChecked"
+        />
       </el-col>
-      <el-col class="panel-height" style="flex: 1;overflow: hidden;">
-        <el-card class="box-card dataPreview" shadow="never">
-          <div slot="header" class="clearfix">
+      <el-col
+        class="panel-height"
+        style="flex: 1;overflow: hidden;"
+      >
+        <el-card
+          class="box-card dataPreview"
+          shadow="never"
+        >
+          <div
+            slot="header"
+            class="clearfix"
+          >
             <span style="font-size: 16px;">{{ $t('dataset.data_preview') }}</span>
           </div>
           <ux-grid
diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index 57f6a42239..8cbf9458c0 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -1,17 +1,37 @@
 <template>
-  <div class="dataset-db" @mouseup="mouseupDrag" v-loading="loading">
-    <p v-show="!showLeft" @click="showLeft = true" class="arrow-right">
-      <i class="el-icon-d-arrow-right"></i>
+  <div
+    v-loading="loading"
+    class="dataset-db"
+    @mouseup="mouseupDrag"
+  >
+    <p
+      v-show="!showLeft"
+      class="arrow-right"
+      @click="showLeft = true"
+    >
+      <i class="el-icon-d-arrow-right" />
     </p>
-    <div v-show="showLeft" @mousedown="mousedownDrag" :style="{ left: LeftWidth + 'px' }" class="drag-left"></div>
-    <div class="table-list" :style="{ width: LeftWidth + 'px' }" v-show="showLeft">
+    <div
+      v-show="showLeft"
+      :style="{ left: LeftWidth + 'px' }"
+      class="drag-left"
+      @mousedown="mousedownDrag"
+    />
+    <div
+      v-show="showLeft"
+      class="table-list"
+      :style="{ width: LeftWidth + 'px' }"
+    >
       <p class="select-ds">
         {{ $t('deDataset.select_data_source') }}
-        <i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
+        <i
+          class="el-icon-d-arrow-left"
+          @click="showLeft = false"
+        />
       </p>
       <el-select
-        class="ds-list"
         v-model="dataSource"
+        class="ds-list"
         filterable
         popper-class="db-select-pop"
         :placeholder="$t('dataset.pls_slc_data_source')"
@@ -33,18 +53,31 @@
         prefix-icon="el-icon-search"
         clearable
       />
-      <div v-if="!tableData.length && searchTable !== ''" class="el-empty">
-        <div class="el-empty__description" style="margin-top: 80px;color: #5e6d82;">
+      <div
+        v-if="!tableData.length && searchTable !== ''"
+        class="el-empty"
+      >
+        <div
+          class="el-empty__description"
+          style="margin-top: 80px;color: #5e6d82;"
+        >
           没有找到相关内容
         </div>
       </div>
-      <div v-loading="dsLoading" v-else class="table-checkbox-list">
-        <el-checkbox-group v-model="checkTableList" size="small">
+      <div
+        v-else
+        v-loading="dsLoading"
+        class="table-checkbox-list"
+      >
+        <el-checkbox-group
+          v-model="checkTableList"
+          size="small"
+        >
           <el-tooltip
-            :disabled="t.enableCheck"
-            effect="dark"
             v-for="t in tableData"
             :key="t.name"
+            :disabled="t.enableCheck"
+            effect="dark"
             :content="$t('dataset.table_already_add_to') + ': ' + t.datasetPath"
             placement="right"
           >
@@ -56,12 +89,25 @@
               :title="t.name"
               @click="setActiveName(t)"
             >
-              <svg-icon v-if="!t.enableCheck" icon-class="Checkbox" style="margin-right: 8px"/>
-              <el-checkbox v-else :label="t.name" :disabled="!t.enableCheck">
-              </el-checkbox>
+              <svg-icon
+                v-if="!t.enableCheck"
+                icon-class="Checkbox"
+                style="margin-right: 8px"
+              />
+              <el-checkbox
+                v-else
+                :label="t.name"
+                :disabled="!t.enableCheck"
+              />
               <span class="label">{{ showTableNameWithComment(t) }}</span>
-              <span class="error-name-exsit" v-if="t.nameExsit">
-                <svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
+              <span
+                v-if="t.nameExsit"
+                class="error-name-exsit"
+              >
+                <svg-icon
+                  icon-class="exclamationmark"
+                  class="ds-icon-scene"
+                />
               </span>
             </div>
           </el-tooltip>
@@ -76,7 +122,10 @@
           :placeholder="$t('dataset.connect_mode')"
           size="small"
         >
-          <el-option :label="$t('dataset.direct_connect')" value="0" />
+          <el-option
+            :label="$t('dataset.direct_connect')"
+            value="0"
+          />
           <el-option
             :label="$t('dataset.sync_data')"
             value="1"
@@ -90,26 +139,32 @@
           :placeholder="$t('dataset.connect_mode')"
           size="small"
         >
-          <el-option :label="$t('dataset.sync_now')" value="sync_now" />
-          <el-option :label="$t('dataset.sync_latter')" value="sync_latter" />
+          <el-option
+            :label="$t('dataset.sync_now')"
+            value="sync_now"
+          />
+          <el-option
+            :label="$t('dataset.sync_latter')"
+            value="sync_latter"
+          />
         </el-select>
       </div>
       <el-empty
+        v-if="!dataSource"
         style="padding-top: 160px"
         size="125"
-        v-if="!dataSource"
         :description="$t('dataset.pls_slc_data_source')"
         :image="noSelectTable"
-      ></el-empty>
+      />
       <template v-else-if="activeName">
         <div class="dataset">
           <span class="name">{{ $t('dataset.name') }}</span>
           <el-input
-            @change="validateName"
             v-if="activeIndex !== -1"
             v-model="tableData[activeIndex].datasetName"
             size="small"
             clearable
+            @change="validateName"
           />
           <div
             v-if="tableData[activeIndex].nameExsit"
@@ -119,7 +174,10 @@
             {{ $t('deDataset.already_exists') }}
           </div>
         </div>
-        <div class="data" v-loading="tableLoading">
+        <div
+          v-loading="tableLoading"
+          class="data"
+        >
           <span class="result-num">{{
             `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
           }}</span>
@@ -145,19 +203,19 @@
         </div>
       </template>
       <el-empty
+        v-else-if="avilibelTable"
         style="padding-top: 160px"
         size="125"
-        v-else-if="avilibelTable"
         :description="$t('deDataset.is_currently_available')"
         :image="noAvilibelTableImg"
-      ></el-empty>
+      />
       <el-empty
+        v-else-if="!activeName"
         style="padding-top: 160px"
         size="125"
-        v-else-if="!activeName"
         :description="$t('deDataset.left_to_edit')"
         :image="noSelectTable"
-      ></el-empty>
+      />
     </div>
   </div>
 </template>
@@ -169,7 +227,7 @@ import msgCfm from '@/components/msgCfm/index'
 import cancelMix from './cancelMix'
 export default {
   name: 'AddDB',
-  mixins: [ msgCfm, cancelMix],
+  mixins: [msgCfm, cancelMix],
   props: {
     param: {
       type: Object,
@@ -325,7 +383,7 @@ export default {
         if (this.checkDatasetName.includes(ele.datasetName)) {
           this.nameExsitValidator(index)
         } else {
-          ele.nameExsit = false;
+          ele.nameExsit = false
         }
       })
     },
@@ -344,7 +402,7 @@ export default {
     },
     calHeight() {
       const that = this
-      setTimeout(function () {
+      setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
         that.height = currentHeight - 56 - 64 - 75 - 32 - 24 - 16 - 10
       }, 10)
@@ -435,7 +493,6 @@ export default {
     cursor: col-resize;
   }
 
-
   .arrow-right {
     position: absolute;
     top: 15px;
@@ -610,4 +667,4 @@ export default {
     transform: rotate(45deg);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index d24901d0bc..b5ed0fe666 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -1,21 +1,36 @@
 <template>
-  <div v-loading="loading" class="dataset-excel">
-    <p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
+  <div
+    v-loading="loading"
+    class="dataset-excel"
+  >
+    <p
+      v-show="!showLeft"
+      class="arrow-right"
+      @click="showLeft = true"
+    >
       <i class="el-icon-d-arrow-right" />
     </p>
-    <div v-show="showLeft" class="table-list">
+    <div
+      v-show="showLeft"
+      class="table-list"
+    >
       <p class="select-ds">
-        <span
-          >{{ $t('deDataset.select_data_table ') }}
-          <el-tooltip class="item" effect="dark" placement="right">
+        <span>{{ $t('deDataset.select_data_table ') }}
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="right"
+          >
             <div slot="content">
-              {{ $t('dataset.excel_info_1') }}<br />
-              {{ $t('dataset.excel_info_2') }}<br />
+              {{ $t('dataset.excel_info_1') }}<br>
+              {{ $t('dataset.excel_info_2') }}<br>
               {{ $t('dataset.excel_info_3') }}
             </div>
-            <i class="el-icon-warning-outline" /> </el-tooltip
-        ></span>
-        <i class="el-icon-d-arrow-left" @click="showLeft = false" />
+            <i class="el-icon-warning-outline" /> </el-tooltip></span>
+        <i
+          class="el-icon-d-arrow-left"
+          @click="showLeft = false"
+        />
       </p>
       <el-upload
         :action="baseUrl + 'dataset/table/excel/upload'"
@@ -36,7 +51,7 @@
           :loading="uploading"
           secondary
           :disabled="uploading"
-          >{{ $t('deDataset.upload_data') }}
+        >{{ $t('deDataset.upload_data') }}
         </deBtn>
       </el-upload>
       <div class="table-checkbox-list">
@@ -54,20 +69,23 @@
           @check-change="handleCheckChange"
         >
           <span
-            :title="data.excelLable"
             slot-scope="{ data }"
+            :title="data.excelLable"
             class="custom-tree-node"
           >
             {{ data.excelLable }}
             <span
               v-if="
                 (data.nameExsit && !param.tableId) ||
-                data.empty ||
-                data.overLength
+                  data.empty ||
+                  data.overLength
               "
               class="error-name-exsit"
             >
-              <svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
+              <svg-icon
+                icon-class="exclamationmark"
+                class="ds-icon-scene"
+              />
             </span>
           </span>
         </el-tree>
@@ -93,8 +111,8 @@
           <div
             v-if="
               (sheetObj.nameExsit && !param.tableId) ||
-              sheetObj.empty ||
-              sheetObj.overLength
+                sheetObj.empty ||
+                sheetObj.overLength
             "
             style="left: 107px; top: 52px"
             class="el-form-item__error"
@@ -104,8 +122,8 @@
                 sheetObj.nameExsit
                   ? 'deDataset.already_exists'
                   : sheetObj.overLength
-                  ? 'dataset.char_can_not_more_50'
-                  : 'dataset.pls_input_name'
+                    ? 'dataset.char_can_not_more_50'
+                    : 'dataset.pls_input_name'
               )
             }}
           </div>
@@ -143,20 +161,22 @@
                     <svg-icon
                       v-if="field.fieldType === 'TEXT'"
                       icon-class="field_text"
-                      class="field-icon-text" />
+                      class="field-icon-text"
+                    />
                     <svg-icon
                       v-if="field.fieldType === 'DATETIME'"
                       icon-class="field_time"
-                      class="field-icon-time" />
+                      class="field-icon-time"
+                    />
                     <svg-icon
                       v-if="
                         field.fieldType === 'LONG' ||
-                        field.fieldType === 'DOUBLE'
+                          field.fieldType === 'DOUBLE'
                       "
                       icon-class="field_value"
-                      class="field-icon-value" />
-                    <i class="el-icon-arrow-down el-icon--right"
-                  /></span>
+                      class="field-icon-value"
+                    />
+                    <i class="el-icon-arrow-down el-icon--right" /></span>
                   <el-dropdown-menu
                     slot="dropdown"
                     style="width: 178px"
@@ -166,34 +186,32 @@
                       v-for="item in fieldOptions"
                       :key="item.value"
                       :command="item.value"
-                      ><span>
-                        <svg-icon
-                          v-if="item.value === 'TEXT'"
-                          icon-class="field_text"
-                          class="field-icon-text"
-                        />
-                        <svg-icon
-                          v-if="item.value === 'DATETIME'"
-                          icon-class="field_time"
-                          class="field-icon-time"
-                        />
-                        <svg-icon
-                          v-if="
-                            item.value === 'LONG' || item.value === 'DOUBLE'
-                          "
-                          icon-class="field_value"
-                          class="field-icon-value"
-                        />
-                      </span>
+                    ><span>
+                       <svg-icon
+                         v-if="item.value === 'TEXT'"
+                         icon-class="field_text"
+                         class="field-icon-text"
+                       />
+                       <svg-icon
+                         v-if="item.value === 'DATETIME'"
+                         icon-class="field_time"
+                         class="field-icon-time"
+                       />
+                       <svg-icon
+                         v-if="
+                           item.value === 'LONG' || item.value === 'DOUBLE'
+                         "
+                         icon-class="field_value"
+                         class="field-icon-value"
+                       />
+                     </span>
                       <span
                         style="
                           color: #8492a6;
                           font-size: 14px;
                           margin-left: 10px;
                         "
-                        >{{ item.label }}</span
-                      ></el-dropdown-item
-                    >
+                      >{{ item.label }}</span></el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
                 <span style="font-size: 14px; margin-left: 10px">
@@ -212,7 +230,7 @@
 import { post } from '@/api/dataset/dataset'
 import { getToken } from '@/utils/auth'
 import i18n from '@/lang'
-import { $alert, $confirm } from '@/utils/message'
+import { $alert } from '@/utils/message'
 import store from '@/store'
 import msgCfm from '@/components/msgCfm/index'
 import cancelMix from './cancelMix'
@@ -251,7 +269,6 @@ export default {
       errImg: require('@/assets/None_Select_ds.png'),
       sheetObj: { datasetName: ' ', fields: [] },
       sheets: [],
-      data: [],
       mode: '1',
       height: 600,
       fileList: [],
@@ -308,7 +325,7 @@ export default {
         this.handleNodeClick(data)
       } else {
         var index = this.defaultCheckedKeys.findIndex((id) => {
-          if (id == data.id) {
+          if (id === data.id) {
             return true
           }
         })
@@ -367,9 +384,9 @@ export default {
     },
     changeDatasetName() {
       for (var i = 0; i < this.excelData.length; i++) {
-        if (this.excelData[i].excelId == this.sheetObj.sheetExcelId) {
+        if (this.excelData[i].excelId === this.sheetObj.sheetExcelId) {
           for (var j = 0; j < this.excelData[i].sheets.length; j++) {
-            if (this.excelData[i].sheets[j].excelId == this.sheetObj.sheetId) {
+            if (this.excelData[i].sheets[j].excelId === this.sheetObj.sheetId) {
               this.excelData[i].sheets[j] = this.sheetObj
             }
           }
@@ -379,7 +396,7 @@ export default {
     },
     calHeight() {
       const that = this
-      setTimeout(function () {
+      setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
         that.height = currentHeight - 56 - 30 - 26 - 25 - 35 - 10 - 37 - 20 - 10
       }, 10)
@@ -414,9 +431,7 @@ export default {
       this.path = ''
       this.fields = []
       this.sheets = []
-      this.data = []
-      const datas = this.data
-      this.$refs.plxTable?.reloadData(datas)
+      this.$refs.plxTable?.reloadData([])
       this.fileList = []
       this.uploading = false
       this.$message({
@@ -469,7 +484,7 @@ export default {
           sheetFileMd5.push(selectNode[i].fieldsMd5)
         }
       }
-      if (selectedSheet.length == 0) {
+      if (!selectedSheet.length) {
         this.openMessageSuccess('dataset.ple_select_excel', 'error')
         return
       }
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 6fc632a98e..b044d5f267 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-loading="loading" class="dataset-sql" @mouseup="mouseupDrag">
+  <div
+    v-loading="loading"
+    class="dataset-sql"
+    @mouseup="mouseupDrag"
+  >
     <div class="sql-editer">
       <el-row>
         <el-col :span="12">
@@ -26,7 +30,10 @@
             :placeholder="$t('dataset.connect_mode')"
             size="small"
           >
-            <el-option :label="$t('dataset.direct_connect')" value="0" />
+            <el-option
+              :label="$t('dataset.direct_connect')"
+              value="0"
+            />
             <el-option
               :label="$t('dataset.sync_data')"
               value="1"
@@ -46,10 +53,16 @@
               value="sync_now"
               :disabled="engineMode === 'simple'"
             />
-            <el-option :label="$t('dataset.sync_latter')" value="sync_latter" />
+            <el-option
+              :label="$t('dataset.sync_latter')"
+              value="sync_latter"
+            />
           </el-select>
         </el-col>
-        <el-col style="text-align: right" :span="12">
+        <el-col
+          style="text-align: right"
+          :span="12"
+        >
           <el-button
             type="text"
             size="small"
@@ -83,7 +96,10 @@
       </el-row>
     </div>
     <div class="refrence-sql-table">
-      <div v-if="dataReference" class="data-reference">
+      <div
+        v-if="dataReference"
+        class="data-reference"
+      >
         <div class="table-database-name">
           <p>
             <span
@@ -105,7 +121,10 @@
               "
             />
           </p>
-          <p v-if="dataSource" style="margin-top: 16px">
+          <p
+            v-if="dataSource"
+            style="margin-top: 16px"
+          >
             <span>
               <svg-icon icon-class="db-de" />
               {{ (showTable && dataTable) || selectedDatasource.name }}
@@ -118,10 +137,17 @@
             </span>
           </p>
         </div>
-        <span v-if="!dataSource" class="no-select-datasource">{{
+        <span
+          v-if="!dataSource"
+          class="no-select-datasource"
+        >{{
           $t('deDataset.to_start_using')
         }}</span>
-        <div v-else-if="dataSource && !dataTable" v-loading="tableLoading" class="item-list">
+        <div
+          v-else-if="dataSource && !dataTable"
+          v-loading="tableLoading"
+          class="item-list"
+        >
           <div
             v-for="ele in tableData"
             :key="ele.name"
@@ -131,7 +157,10 @@
             {{ ele.name }}
           </div>
         </div>
-        <div v-else-if="dataSource && dataTable" class="item-list">
+        <div
+          v-else-if="dataSource && dataTable"
+          class="item-list"
+        >
           <div
             v-for="ele in fieldData"
             :key="ele.fieldName"
@@ -142,7 +171,10 @@
         </div>
       </div>
       <div class="sql-table">
-        <div class="code-container" :style="{ height: sqlHeight + 'px' }">
+        <div
+          class="code-container"
+          :style="{ height: sqlHeight + 'px' }"
+        >
           <codemirror
             ref="myCm"
             v-model="sql"
@@ -163,7 +195,10 @@
               )})`
             }}</span>
 
-            <span class="drag" @mousedown="mousedownDrag" />
+            <span
+              class="drag"
+              @mousedown="mousedownDrag"
+            />
           </div>
           <div class="table-sql">
             <el-empty
@@ -229,31 +264,31 @@
                     :options="fieldOptions"
                     @change="variableTypeChange(scope.row)"
                   >
-                  <template slot-scope="{ data }">
-                    <svg-icon
-                      v-if="data.value === 'TEXT'"
-                      icon-class="field_text"
-                      class="field-icon-text"
-                    />
-                    <svg-icon
-                      v-if="
-                        [
-                          'DATETIME-YEAR',
-                          'DATETIME-YEAR-MONTH',
-                          'DATETIME',
-                          'DATETIME-YEAR-MONTH-DAY'
-                        ].includes(data.value)
-                      "
-                      icon-class="field_time"
-                      class="field-icon-time"
-                    />
-                    <svg-icon
-                      v-if="['LONG', 'DOUBLE'].includes(data.value)"
-                      icon-class="field_value"
-                      class="field-icon-value"
-                    />
-                    <span>{{ data.label }}</span>
-                  </template>
+                    <template slot-scope="{ data }">
+                      <svg-icon
+                        v-if="data.value === 'TEXT'"
+                        icon-class="field_text"
+                        class="field-icon-text"
+                      />
+                      <svg-icon
+                        v-if="
+                          [
+                            'DATETIME-YEAR',
+                            'DATETIME-YEAR-MONTH',
+                            'DATETIME',
+                            'DATETIME-YEAR-MONTH-DAY'
+                          ].includes(data.value)
+                        "
+                        icon-class="field_time"
+                        class="field-icon-time"
+                      />
+                      <svg-icon
+                        v-if="['LONG', 'DOUBLE'].includes(data.value)"
+                        icon-class="field_value"
+                        class="field-icon-value"
+                      />
+                      <span>{{ data.label }}</span>
+                    </template>
                   </el-cascader>
                   <span class="select-svg-icon">
                     <svg-icon
@@ -347,10 +382,16 @@
               </el-table-column>
             </el-table>
             <div class="de-foot">
-              <deBtn secondary @click="closeVariableMgm">{{
+              <deBtn
+                secondary
+                @click="closeVariableMgm"
+              >{{
                 $t('dataset.cancel')
               }}</deBtn>
-              <deBtn type="primary" @click="saveVariable()">{{
+              <deBtn
+                type="primary"
+                @click="saveVariable()"
+              >{{
                 $t('dataset.confirm')
               }}</deBtn>
             </div>
@@ -428,7 +469,6 @@ export default {
           completeSingle: false // 当匹配只有一项的时候是否自动补全
         }
       },
-      data: [],
       errImg: require('@/assets/error.png'),
       initImg: require('@/assets/None.png'),
       sqlHeight: 248,
@@ -502,8 +542,7 @@ export default {
   computed: {
     codemirror() {
       return this.$refs.myCm.codemirror
-    },
-    dataSourceDetail() {}
+    }
   },
   watch: {
     sqlHeight: {
@@ -594,7 +633,7 @@ export default {
           this.tableLoading = false
         })
     },
-    calHeight: _.debounce(function () {
+    calHeight: _.debounce(function() {
       const sqlHeight = Math.max(this.sqlHeight, 248)
       const currentHeight = document.documentElement.clientHeight
       this.height = currentHeight - sqlHeight - 56 - 54 - 36 - 64
@@ -648,10 +687,8 @@ export default {
       }, true, 60000, true)
         .then((response) => {
           this.fields = response.data.fields
-          this.data = response.data.data
-          const datas = this.data
           this.$nextTick(() => {
-            this.$refs.plxTable?.reloadData(datas)
+            this.$refs.plxTable?.reloadData(response.data.data)
           })
         })
         .catch((err, msg) => {
@@ -724,6 +761,7 @@ export default {
           var name = match[index].substring(2, match[index].length - 1)
           if (names.indexOf(name) < 0) {
             names.push(name)
+            // eslint-disable-next-line
             var obj = undefined
             for (let i = 0; i < this.variables.length; i++) {
               if (this.variables[i].variableName === name) {
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
index cd70774ba6..0fdbf49928 100644
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -1,14 +1,30 @@
 <template>
-  <div v-loading="loading" class="dataset-union" @mouseup="mouseupDrag">
-    <div :style="{ height: unionHeight + 'px' }" class="unio-editer-container">
+  <div
+    v-loading="loading"
+    class="dataset-union"
+    @mouseup="mouseupDrag"
+  >
+    <div
+      :style="{ height: unionHeight + 'px' }"
+      class="unio-editer-container"
+    >
       <!--添加第一个数据集按钮-->
-      <div v-if="dataset.length === 0" style="padding: 24px">
-        <deBtn type="primary" @click="selectDs">
+      <div
+        v-if="dataset.length === 0"
+        style="padding: 24px"
+      >
+        <deBtn
+          type="primary"
+          @click="selectDs"
+        >
           {{ $t('chart.select_dataset') }}
         </deBtn>
       </div>
       <!--数据集关联树型结构-->
-      <div v-else class="union-container">
+      <div
+        v-else
+        class="union-container"
+      >
         <node-item
           :current-node="dataset[0]"
           :node-index="0"
@@ -39,7 +55,10 @@
         <span class="result-num">{{
           `(${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')})`
         }}</span>
-        <span class="drag" @mousedown="mousedownDrag" />
+        <span
+          class="drag"
+          @mousedown="mousedownDrag"
+        />
         <el-button
           class="de-text-btn posi-right"
           type="text"
@@ -73,7 +92,10 @@
         @getTable="firstDs"
       />
       <div class="de-foot">
-        <deBtn secondary @click="closeSelectDs()">{{
+        <deBtn
+          secondary
+          @click="closeSelectDs()"
+        >{{
           $t('dataset.cancel')
         }}</deBtn>
         <deBtn
@@ -100,10 +122,16 @@
     >
       <union-edit :union-param="unionParam" />
       <div class="de-foot">
-        <deBtn secondary @click="closeEditUnion()">{{
+        <deBtn
+          secondary
+          @click="closeEditUnion()"
+        >{{
           $t('dataset.cancel')
         }}</deBtn>
-        <deBtn type="primary" @click="confirmEditUnion()">{{
+        <deBtn
+          type="primary"
+          @click="confirmEditUnion()"
+        >{{
           $t('dataset.confirm')
         }}</deBtn>
       </div>
diff --git a/frontend/src/views/dataset/add/cancelMix.js b/frontend/src/views/dataset/add/cancelMix.js
index 7b70a200e4..218d896297 100644
--- a/frontend/src/views/dataset/add/cancelMix.js
+++ b/frontend/src/views/dataset/add/cancelMix.js
@@ -1,19 +1,19 @@
 export default {
-    methods: {
-        cancel(arr = []) {
-            if (arr.length === 1) {
-                const [dataset] = arr;
-                const { id, name } = dataset;
-                this.$router.push({
-                    name: 'dataset',
-                    params: {
-                        id,
-                        name
-                    }
-                })
-            } else {
-                this.$router.back()
-            }
-        }
+  methods: {
+    cancel(arr = []) {
+      if (arr.length === 1) {
+        const [dataset] = arr
+        const { id, name } = dataset
+        this.$router.push({
+          name: 'dataset',
+          params: {
+            id,
+            name
+          }
+        })
+      } else {
+        this.$router.back()
+      }
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/frontend/src/views/dataset/add/union/NodeItem.vue b/frontend/src/views/dataset/add/union/NodeItem.vue
index 5fb719eb9c..9e998010f2 100644
--- a/frontend/src/views/dataset/add/union/NodeItem.vue
+++ b/frontend/src/views/dataset/add/union/NodeItem.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="ds-node" @click="nodeClick">
+    <div
+      class="ds-node"
+      @click="nodeClick"
+    >
       <svg-icon
         v-if="currentNode.currentDs.modelInnerType === 'db'"
         icon-class="ds-db"
@@ -22,20 +25,34 @@
         class="ds-icon-api"
       />
 
-      <span class="node-name" :title="currentNode.currentDs.name">{{
+      <span
+        class="node-name"
+        :title="currentNode.currentDs.name"
+      >{{
         currentNode.currentDs.name
       }}</span>
 
-      <span class="node-menu" @click.stop>
-        <el-dropdown trigger="click" size="small" @command="nodeMenuClick">
+      <span
+        class="node-menu"
+        @click.stop
+      >
+        <el-dropdown
+          trigger="click"
+          size="small"
+          @command="nodeMenuClick"
+        >
           <span class="el-dropdown-link">
-            <el-button icon="el-icon-more" type="text" size="small" />
+            <el-button
+              icon="el-icon-more"
+              type="text"
+              size="small"
+            />
           </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item
               :disabled="
                 currentNode.currentDs.mode === 0 &&
-                currentNode.currentDs.modelInnerType === 'sql'
+                  currentNode.currentDs.modelInnerType === 'sql'
               "
               icon="el-icon-copy-document"
               :command="beforeNodeMenuClick('union', currentNode)"
@@ -62,11 +79,11 @@
     <!--选择数据集-->
     <el-drawer
       v-if="selectDsDialog"
+      v-closePress
       :title="$t('chart.select_dataset')"
       :visible.sync="selectDsDialog"
       custom-class="user-drawer sql-dataset-drawer"
       size="600px"
-      v-closePress
       direction="rtl"
     >
       <dataset-tree
@@ -78,15 +95,17 @@
         @getTable="firstDs"
       />
       <div class="de-foot">
-        <deBtn secondary @click="closeSelectDs()">{{
+        <deBtn
+          secondary
+          @click="closeSelectDs()"
+        >{{
           $t('dataset.cancel')
         }}</deBtn>
         <deBtn
           :disabled="!tempDs.id"
           type="primary"
           @click="confirmSelectDs()"
-          >{{ $t('dataset.confirm') }}</deBtn
-        >
+        >{{ $t('dataset.confirm') }}</deBtn>
       </div>
     </el-drawer>
 
@@ -120,11 +139,21 @@
       class="dialog-css"
     >
       <union-field-edit :node="currentNode" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeEditField()">{{
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeEditField()"
+        >{{
           $t('dataset.cancel')
         }}</el-button>
-        <el-button type="primary" size="mini" @click="confirmEditField()">{{
+        <el-button
+          type="primary"
+          size="mini"
+          @click="confirmEditField()"
+        >{{
           $t('dataset.confirm')
         }}</el-button>
       </div>
diff --git a/frontend/src/views/dataset/add/union/UnionEdit.vue b/frontend/src/views/dataset/add/union/UnionEdit.vue
index 92bd1b90da..4e8d829828 100644
--- a/frontend/src/views/dataset/add/union/UnionEdit.vue
+++ b/frontend/src/views/dataset/add/union/UnionEdit.vue
@@ -54,7 +54,7 @@ export default {
     }
   },
   watch: {
-    unionParam: function () {}
+    unionParam: function() {}
   },
   mounted() {
     this.getParentFieldList()
diff --git a/frontend/src/views/dataset/add/union/UnionFieldList.vue b/frontend/src/views/dataset/add/union/UnionFieldList.vue
index 7ddeb97d31..254807a00c 100644
--- a/frontend/src/views/dataset/add/union/UnionFieldList.vue
+++ b/frontend/src/views/dataset/add/union/UnionFieldList.vue
@@ -1,11 +1,9 @@
 <template>
   <div class="field-block-style">
     <div class="field-block-option">
-      <span class="option-field"
-        >{{ $t('dataset.field_select') }}({{ checkedFields.length }}/{{
-          fieldList.length
-        }})</span
-      >
+      <span class="option-field">{{ $t('dataset.field_select') }}({{ checkedFields.length }}/{{
+        fieldList.length
+      }})</span>
       <el-input
         v-model="search"
         size="small"
@@ -21,8 +19,7 @@
         :indeterminate="isIndeterminate"
         class="check-style"
         @change="handleCheckAllChange"
-        >&nbsp;</el-checkbox
-      >
+      >&nbsp;</el-checkbox>
       <span class="label-style">
         <span class="field-origin-style">{{ $t('panel.column_name') }}</span>
         <span class="field-style">{{ $t('deDataset.original_name') }}</span>
@@ -38,11 +35,15 @@
           :key="field.id"
           class="field-item-style"
         >
-          <el-checkbox :label="field.id" class="check-style"
-            >&nbsp;</el-checkbox
-          >
+          <el-checkbox
+            :label="field.id"
+            class="check-style"
+          >&nbsp;</el-checkbox>
           <span class="label-style">
-            <span class="field-origin-style value" :title="field.originName">
+            <span
+              class="field-origin-style value"
+              :title="field.originName"
+            >
               <span>
                 <svg-icon
                   v-if="field.deType === 0"
@@ -69,7 +70,10 @@
                 {{ field.originName }}
               </span>
             </span>
-            <span class="field-style value" :title="field.name">{{
+            <span
+              class="field-style value"
+              :title="field.name"
+            >{{
               field.name
             }}</span>
           </span>
@@ -102,11 +106,11 @@ export default {
     }
   },
   watch: {
-    fieldList: function () {
+    fieldList: function() {
       this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
       this.init()
     },
-    search: function (val) {
+    search: function(val) {
       if (val && val !== '') {
         this.fieldSearchList = JSON.parse(
           JSON.stringify(this.fieldList)
diff --git a/frontend/src/views/dataset/add/union/UnionItemEdit.vue b/frontend/src/views/dataset/add/union/UnionItemEdit.vue
index e691ce4f62..299dd6af9f 100644
--- a/frontend/src/views/dataset/add/union/UnionItemEdit.vue
+++ b/frontend/src/views/dataset/add/union/UnionItemEdit.vue
@@ -19,7 +19,11 @@
             icon-class="inner-join"
             class="join-icon"
           />
-          <svg-icon v-else icon-class="no-join" class="join-icon" />
+          <svg-icon
+            v-else
+            icon-class="no-join"
+            class="join-icon"
+          />
         </span>
         <el-select
           v-model="unionParam.node.unionToParent.unionType"
@@ -38,16 +42,21 @@
           icon="el-icon-plus"
           class="union-add"
           @click="addUnion"
-          >{{ $t('dataset.add_union_field') }}</deBtn
-        >
+        >{{ $t('dataset.add_union_field') }}</deBtn>
       </div>
     </div>
     <div class="union-body">
       <div class="union-body-header">
-        <span class="column" :title="unionParam.parent.currentDs.name">{{
+        <span
+          class="column"
+          :title="unionParam.parent.currentDs.name"
+        >{{
           unionParam.parent.currentDs.name
         }}</span>
-        <span class="column" :title="unionParam.node.currentDs.name">{{
+        <span
+          class="column"
+          :title="unionParam.node.currentDs.name"
+        >{{
           unionParam.node.currentDs.name
         }}</span>
         <span class="column-last">{{ $t('dataset.operator') }}</span>
@@ -110,7 +119,10 @@
               </el-option>
             </el-select>
           </span>
-          <svg-icon icon-class="join-join" class="join-icon" />
+          <svg-icon
+            icon-class="join-join"
+            class="join-icon"
+          />
           <!--右侧孩子field-->
           <span class="column">
             <el-select
@@ -168,7 +180,7 @@
             <el-button
               :disabled="
                 unionParam.node.unionToParent.unionFields &&
-                unionParam.node.unionToParent.unionFields.length === 1
+                  unionParam.node.unionToParent.unionFields.length === 1
               "
               type="text"
               icon="el-icon-delete"
diff --git a/frontend/src/views/dataset/add/union/UnionNode.vue b/frontend/src/views/dataset/add/union/UnionNode.vue
index b37ba3cb25..80bca5ae6a 100644
--- a/frontend/src/views/dataset/add/union/UnionNode.vue
+++ b/frontend/src/views/dataset/add/union/UnionNode.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="children-node node-container" :style="{ height: nodeHeight }">
+  <div
+    class="children-node node-container"
+    :style="{ height: nodeHeight }"
+  >
     <div class="node-line">
       <svg-icon
         v-if="childrenNode.unionToParent.unionType === 'left'"
@@ -27,7 +30,11 @@
       />
 
       <svg class="join-svg-container">
-        <path fill="none" stroke="#dcdfe6" :d="pathParam + lineLength" />
+        <path
+          fill="none"
+          stroke="#dcdfe6"
+          :d="pathParam + lineLength"
+        />
       </svg>
     </div>
 
@@ -58,6 +65,7 @@
     <!--编辑关联关系-->
     <el-drawer
       v-if="editUnion"
+      v-closePress
       :title="
         unionParam.type === 'add'
           ? $t('dataset.add_union_relation')
@@ -66,15 +74,20 @@
       :visible.sync="editUnion"
       custom-class="user-drawer union-dataset-drawer"
       size="840px"
-      v-closePress
       direction="rtl"
     >
       <union-edit :union-param="unionParam" />
       <div class="de-foot">
-        <deBtn secondary @click="closeEditUnion()">{{
+        <deBtn
+          secondary
+          @click="closeEditUnion()"
+        >{{
           $t('dataset.cancel')
         }}</deBtn>
-        <deBtn type="primary" @click="confirmEditUnion()">{{
+        <deBtn
+          type="primary"
+          @click="confirmEditUnion()"
+        >{{
           $t('dataset.confirm')
         }}</deBtn>
       </div>
@@ -128,15 +141,15 @@ export default {
     }
   },
   watch: {
-    'childrenNode.allChildCount': function () {
+    'childrenNode.allChildCount': function() {
       this.calcNodeHeight()
       this.nodeLineHeight()
     },
-    nodeIndex: function () {
+    nodeIndex: function() {
       this.calcNodeHeight()
       this.nodeLineHeight()
     },
-    childrenList: function () {
+    childrenList: function() {
       this.calcNodeHeight()
       this.nodeLineHeight()
     }
@@ -313,4 +326,4 @@ export default {
     padding: 24px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/dataset/add/union/UnionPreview.vue b/frontend/src/views/dataset/add/union/UnionPreview.vue
index ee944c51aa..336e5b3bbd 100644
--- a/frontend/src/views/dataset/add/union/UnionPreview.vue
+++ b/frontend/src/views/dataset/add/union/UnionPreview.vue
@@ -38,7 +38,7 @@ export default {
     unionHeight: {
       type: Number,
       default: 298
-    },
+    }
   },
   data() {
     return {
@@ -48,11 +48,11 @@ export default {
     }
   },
   watch: {
-    table: function () {
+    table: function() {
       this.initPreview()
     },
     unionHeight: {
-      handler: function () {
+      handler: function() {
         this.calHeight()
       }
     }
diff --git a/frontend/src/views/dataset/common/DatasetChartDetail.vue b/frontend/src/views/dataset/common/DatasetChartDetail.vue
index ab378d5f82..6939cfcf54 100644
--- a/frontend/src/views/dataset/common/DatasetChartDetail.vue
+++ b/frontend/src/views/dataset/common/DatasetChartDetail.vue
@@ -4,15 +4,26 @@
       <span style="font-weight: 500;">{{ $t('dataset.detail') }}</span>
     </el-row>
     <el-col>
-      <el-tabs v-if="tabStatus" v-model="tabActive" class="info-tab">
-        <el-tab-pane v-if="type === 'chart' && detail.chart" :label="$t('chart.datalist')" name="chart">
+      <el-tabs
+        v-if="tabStatus"
+        v-model="tabActive"
+        class="info-tab"
+      >
+        <el-tab-pane
+          v-if="type === 'chart' && detail.chart"
+          :label="$t('chart.datalist')"
+          name="chart"
+        >
           <el-col class="info-item">
             <p class="info-title">{{ $t('commons.name') }}</p>
             <p class="info-content">{{ detail.chart.name }}</p>
           </el-col>
           <el-col class="info-item">
             <p class="info-title">{{ $t('chart.chart_type') }}</p>
-            <svg-icon v-if="detail.chart.type" :icon-class="detail.chart.type" />
+            <svg-icon
+              v-if="detail.chart.type"
+              :icon-class="detail.chart.type"
+            />
           </el-col>
           <el-col class="info-item">
             <p class="info-title">{{ $t('chart.title') }}</p>
@@ -28,27 +39,58 @@
           </el-col>
         </el-tab-pane>
 
-        <el-tab-pane v-if="detail.table" :label="$t('dataset.datalist')" name="table">
+        <el-tab-pane
+          v-if="detail.table"
+          :label="$t('dataset.datalist')"
+          name="table"
+        >
           <el-col class="info-item">
             <p class="info-title">{{ $t('commons.name') }}</p>
             <p class="info-content">{{ detail.table.name }}</p>
           </el-col>
           <el-col class="info-item">
             <p class="info-title">{{ $t('dataset.type') }}</p>
-            <p v-if="detail.table.type === 'db'" class="info-content">{{ $t('dataset.db_data') }}</p>
-            <p v-if="detail.table.type === 'sql'" class="info-content">{{ $t('dataset.sql_data') }}</p>
-            <p v-if="detail.table.type === 'excel'" class="info-content">{{ $t('dataset.excel_data') }}</p>
-            <p v-if="detail.table.type === 'custom'" class="info-content">{{ $t('dataset.custom_data') }}</p>
-            <p v-if="detail.table.type === 'union'" class="info-content">{{ $t('dataset.union_data') }}</p>
+            <p
+              v-if="detail.table.type === 'db'"
+              class="info-content"
+            >{{ $t('dataset.db_data') }}</p>
+            <p
+              v-if="detail.table.type === 'sql'"
+              class="info-content"
+            >{{ $t('dataset.sql_data') }}</p>
+            <p
+              v-if="detail.table.type === 'excel'"
+              class="info-content"
+            >{{ $t('dataset.excel_data') }}</p>
+            <p
+              v-if="detail.table.type === 'custom'"
+              class="info-content"
+            >{{ $t('dataset.custom_data') }}</p>
+            <p
+              v-if="detail.table.type === 'union'"
+              class="info-content"
+            >{{ $t('dataset.union_data') }}</p>
           </el-col>
-          <el-col v-show="detail.table.type === 'db'" class="info-item">
+          <el-col
+            v-show="detail.table.type === 'db'"
+            class="info-item"
+          >
             <p class="info-title">{{ $t('dataset.table') }}</p>
             <p class="info-content">{{ info.table }}</p>
           </el-col>
-          <el-col v-if="detail.table.type === 'db' || detail.table.type === 'sql'" class="info-item">
+          <el-col
+            v-if="detail.table.type === 'db' || detail.table.type === 'sql'"
+            class="info-item"
+          >
             <p class="info-title">{{ $t('dataset.mode') }}</p>
-            <p v-if="detail.table.mode === 0" class="info-content">{{ $t('dataset.direct_connect') }}</p>
-            <p v-if="detail.table.mode === 1" class="info-content">{{ $t('dataset.sync_data') }}</p>
+            <p
+              v-if="detail.table.mode === 0"
+              class="info-content"
+            >{{ $t('dataset.direct_connect') }}</p>
+            <p
+              v-if="detail.table.mode === 1"
+              class="info-content"
+            >{{ $t('dataset.sync_data') }}</p>
           </el-col>
           <el-col class="info-item">
             <p class="info-title">{{ $t('dataset.create_by') }}</p>
@@ -60,7 +102,11 @@
           </el-col>
         </el-tab-pane>
 
-        <el-tab-pane v-if="detail.datasource" :label="$t('datasource.datasource')" name="datasource">
+        <el-tab-pane
+          v-if="detail.datasource"
+          :label="$t('datasource.datasource')"
+          name="datasource"
+        >
           <el-col class="info-item">
             <p class="info-title">{{ $t('commons.name') }}</p>
             <p class="info-content">{{ detail.datasource.name }}</p>
@@ -71,17 +117,50 @@
           </el-col>
           <el-col class="info-item">
             <p class="info-title">{{ $t('datasource.type') }}</p>
-            <p v-if="detail.datasource.type === 'mysql'" class="info-content">MySQL</p>
-            <p v-if="detail.datasource.type === 'sqlServer'" class="info-content">SQL Server</p>
-            <p v-if="detail.datasource.type === 'oracle'" class="info-content">Oracle</p>
-            <p v-if="detail.datasource.type === 'hive'" class="info-content">Apache Hive</p>
-            <p v-if="detail.datasource.type === 'pg'" class="info-content">PostgreSQL</p>
-            <p v-if="detail.datasource.type === 'es'" class="info-content">Elasticsearch</p>
-            <p v-if="detail.datasource.type === 'mariadb'" class="info-content">MariaDB</p>
-            <p v-if="detail.datasource.type === 'ds_doris'" class="info-content">Doris</p>
-            <p v-if="detail.datasource.type === 'ck'" class="info-content">ClickHouse</p>
-            <p v-if="detail.datasource.type === 'redshift'" class="info-content">AWS Redshift</p>
-            <p v-if="detail.datasource.type === 'mongo'" class="info-content">MongoDB</p>
+            <p
+              v-if="detail.datasource.type === 'mysql'"
+              class="info-content"
+            >MySQL</p>
+            <p
+              v-if="detail.datasource.type === 'sqlServer'"
+              class="info-content"
+            >SQL Server</p>
+            <p
+              v-if="detail.datasource.type === 'oracle'"
+              class="info-content"
+            >Oracle</p>
+            <p
+              v-if="detail.datasource.type === 'hive'"
+              class="info-content"
+            >Apache Hive</p>
+            <p
+              v-if="detail.datasource.type === 'pg'"
+              class="info-content"
+            >PostgreSQL</p>
+            <p
+              v-if="detail.datasource.type === 'es'"
+              class="info-content"
+            >Elasticsearch</p>
+            <p
+              v-if="detail.datasource.type === 'mariadb'"
+              class="info-content"
+            >MariaDB</p>
+            <p
+              v-if="detail.datasource.type === 'ds_doris'"
+              class="info-content"
+            >Doris</p>
+            <p
+              v-if="detail.datasource.type === 'ck'"
+              class="info-content"
+            >ClickHouse</p>
+            <p
+              v-if="detail.datasource.type === 'redshift'"
+              class="info-content"
+            >AWS Redshift</p>
+            <p
+              v-if="detail.datasource.type === 'mongo'"
+              class="info-content"
+            >MongoDB</p>
           </el-col>
           <el-col class="info-item">
             <p class="info-title">{{ $t('dataset.create_time') }}</p>
@@ -145,12 +224,12 @@ export default {
     init() {
       if (this.data.id) {
         if (this.type === 'dataset') {
-          post('/dataset/table/datasetDetail/' + this.data.id, null,false).then(res => {
+          post('/dataset/table/datasetDetail/' + this.data.id, null, false).then(res => {
             this.detail = res.data
             this.info = JSON.parse(res.data.table.info)
           })
         } else if (this.type === 'chart') {
-          post('/chart/view/chartDetail/' + this.data.id + '/' + this.panelInfo.id, null,false).then(res => {
+          post('/chart/view/chartDetail/' + this.data.id + '/' + this.panelInfo.id, null, false).then(res => {
             this.detail = res.data
             this.info = JSON.parse(res.data.table.info)
           })
diff --git a/frontend/src/views/dataset/common/DatasetCustomField.vue b/frontend/src/views/dataset/common/DatasetCustomField.vue
index f93831d808..71feeac45a 100644
--- a/frontend/src/views/dataset/common/DatasetCustomField.vue
+++ b/frontend/src/views/dataset/common/DatasetCustomField.vue
@@ -4,22 +4,52 @@
       <span class="table-name title-text">{{ table.name }}</span>
     </el-row>
     <el-divider />
-    <el-checkbox v-model="checkAll" :disabled="!(fields.length > 0)" :indeterminate="isIndeterminate" style="font-weight: 400;" @change="handleCheckAllChange">{{ $t('dataset.check_all') }}</el-checkbox>
-    <el-checkbox-group v-model="checkedFields" @change="handleCheckedFieldsChange">
-      <el-checkbox v-for="f in fields" :key="f.id" :label="f.id" style="display: block;margin-top: 4px;width: 100%;font-weight: 400;">
+    <el-checkbox
+      v-model="checkAll"
+      :disabled="!(fields.length > 0)"
+      :indeterminate="isIndeterminate"
+      style="font-weight: 400;"
+      @change="handleCheckAllChange"
+    >{{ $t('dataset.check_all') }}</el-checkbox>
+    <el-checkbox-group
+      v-model="checkedFields"
+      @change="handleCheckedFieldsChange"
+    >
+      <el-checkbox
+        v-for="f in fields"
+        :key="f.id"
+        :label="f.id"
+        style="display: block;margin-top: 4px;width: 100%;font-weight: 400;"
+      >
         <span style="display: flex;flex-direction: row;flex: 1;">
           <span>
             <span v-if="f.deType === 0">
-              <svg-icon v-if="f.deType === 0" icon-class="field_text" class="field-icon-text" />
+              <svg-icon
+                v-if="f.deType === 0"
+                icon-class="field_text"
+                class="field-icon-text"
+              />
             </span>
             <span v-if="f.deType === 1">
-              <svg-icon v-if="f.deType === 1" icon-class="field_time" class="field-icon-time" />
+              <svg-icon
+                v-if="f.deType === 1"
+                icon-class="field_time"
+                class="field-icon-time"
+              />
             </span>
             <span v-if="f.deType === 2 || f.deType === 3">
-              <svg-icon v-if="f.deType === 2 || f.deType === 3" icon-class="field_value" class="field-icon-value" />
+              <svg-icon
+                v-if="f.deType === 2 || f.deType === 3"
+                icon-class="field_value"
+                class="field-icon-value"
+              />
             </span>
             <span v-if="f.deType === 5">
-              <svg-icon v-if="f.deType === 5" icon-class="field_location" class="field-icon-location" />
+              <svg-icon
+                v-if="f.deType === 5"
+                icon-class="field_location"
+                class="field-icon-location"
+              />
             </span>
           </span>
           <span style="display: flex;flex: 1;width: 100%;">
diff --git a/frontend/src/views/dataset/common/DatasetDetail.vue b/frontend/src/views/dataset/common/DatasetDetail.vue
index 3f44d8bf66..d2415b5528 100644
--- a/frontend/src/views/dataset/common/DatasetDetail.vue
+++ b/frontend/src/views/dataset/common/DatasetDetail.vue
@@ -1,6 +1,12 @@
 <template>
-  <div v-if="tabStatus" class="info-tab">
-    <div v-if="type === 'chart' && detail.chart" class="info-card">
+  <div
+    v-if="tabStatus"
+    class="info-tab"
+  >
+    <div
+      v-if="type === 'chart' && detail.chart"
+      class="info-card"
+    >
       <div class="title-type">
         {{ $t('chart.datalist') }}
       </div>
@@ -12,7 +18,10 @@
       </div>
       <div class="info-item">
         <p class="info-title">{{ $t('chart.chart_type') }}</p>
-        <svg-icon v-if="detail.chart.type" :icon-class="detail.chart.type" />
+        <svg-icon
+          v-if="detail.chart.type"
+          :icon-class="detail.chart.type"
+        />
       </div>
       <div class="info-item">
         <p class="info-title">{{ $t('chart.title') }}</p>
@@ -30,7 +39,10 @@
       </div>
     </div>
 
-    <div v-if="detail.table" class="info-card">
+    <div
+      v-if="detail.table"
+      class="info-card"
+    >
       <div class="title-type">
         {{ $t('dataset.datalist') }}
       </div>
@@ -42,24 +54,45 @@
       </div>
       <div class="info-item">
         <p class="info-title">{{ $t('dataset.type') }}</p>
-        <p v-if="detail.table.type === 'db'" class="info-content">
+        <p
+          v-if="detail.table.type === 'db'"
+          class="info-content"
+        >
           {{ $t('dataset.db_data') }}
         </p>
-        <p v-if="detail.table.type === 'sql'" class="info-content">
+        <p
+          v-if="detail.table.type === 'sql'"
+          class="info-content"
+        >
           {{ $t('dataset.sql_data') }}
         </p>
-        <p v-if="detail.table.type === 'excel'" class="info-content">
+        <p
+          v-if="detail.table.type === 'excel'"
+          class="info-content"
+        >
           {{ $t('dataset.excel_data') }}
         </p>
-        <p v-if="detail.table.type === 'custom'" class="info-content">
+        <p
+          v-if="detail.table.type === 'custom'"
+          class="info-content"
+        >
           {{ $t('dataset.custom_data') }}
         </p>
-        <p v-if="detail.table.type === 'union'" class="info-content">
+        <p
+          v-if="detail.table.type === 'union'"
+          class="info-content"
+        >
           {{ $t('dataset.union_data') }}
         </p>
-        <p v-if="detail.table.type === 'api'" class="info-content">Api</p>
+        <p
+          v-if="detail.table.type === 'api'"
+          class="info-content"
+        >Api</p>
       </div>
-      <div v-show="detail.table.type === 'db'" class="info-item">
+      <div
+        v-show="detail.table.type === 'db'"
+        class="info-item"
+      >
         <p class="info-title">{{ $t('dataset.table') }}</p>
         <p class="info-content">{{ info.table }}</p>
       </div>
@@ -68,10 +101,16 @@
         class="info-item"
       >
         <p class="info-title">{{ $t('dataset.mode') }}</p>
-        <p v-if="detail.table.mode === 0" class="info-content">
+        <p
+          v-if="detail.table.mode === 0"
+          class="info-content"
+        >
           {{ $t('dataset.direct_connect') }}
         </p>
-        <p v-if="detail.table.mode === 1" class="info-content">
+        <p
+          v-if="detail.table.mode === 1"
+          class="info-content"
+        >
           {{ $t('dataset.sync_data') }}
         </p>
       </div>
@@ -87,7 +126,10 @@
       </div>
     </div>
 
-    <div v-if="detail.datasource" class="info-card">
+    <div
+      v-if="detail.datasource"
+      class="info-card"
+    >
       <div class="title-type">
         {{ $t('datasource.datasource') }}
       </div>
@@ -152,13 +194,13 @@ export default {
     }
   },
   watch: {
-    data: function () {
+    data: function() {
       this.init()
     },
-    type: function () {
+    type: function() {
       this.typeChange()
     },
-    tabStatus: function () {
+    tabStatus: function() {
       this.typeChange()
     }
   },
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelector.vue b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
index 30d9cddaf5..8ad9e78733 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelector.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
@@ -1,7 +1,10 @@
 <template>
   <el-col>
     <!-- group -->
-    <el-col v-if="!sceneMode" v-loading="dsLoading">
+    <el-col
+      v-if="!sceneMode"
+      v-loading="dsLoading"
+    >
       <el-row class="title-css">
         <span class="title-text">
           {{ $t('dataset.datalist') }}
@@ -24,11 +27,14 @@
       </el-row>
 
       <el-col class="custom-tree-container">
-        <div class="block" :style="treeStyle">
+        <div
+          class="block"
+          :style="treeStyle"
+        >
           <el-tree
             ref="tree"
             :default-expanded-keys="expandedArray"
-            :data="data"
+            :data="treeData"
             node-key="id"
             :expand-on-click-node="false"
             :filter-node-method="filterNode"
@@ -36,7 +42,10 @@
             @node-expand="nodeExpand"
             @node-collapse="nodeCollapse"
           >
-            <span slot-scope="{ node, data }" class="custom-tree-node">
+            <span
+              slot-scope="{ data }"
+              class="custom-tree-node"
+            >
               <span style="display: flex; flex: 1; width: 0">
                 <span v-if="data.type === 'scene'">
                   <!--                  <el-button-->
@@ -44,7 +53,7 @@
                   <!--                    type="text"-->
                   <!--                    size="mini"-->
                   <!--                  />-->
-                  <svg-icon icon-class="scene"/>
+                  <svg-icon icon-class="scene" />
                 </span>
                 <span
                   style="
@@ -54,8 +63,7 @@
                     text-overflow: ellipsis;
                   "
                   :title="data.name"
-                  >{{ data.name }}</span
-                >
+                >{{ data.name }}</span>
               </span>
             </span>
           </el-tree>
@@ -64,9 +72,15 @@
     </el-col>
 
     <!--scene-->
-    <el-col v-if="sceneMode" v-loading="dsLoading">
+    <el-col
+      v-if="sceneMode"
+      v-loading="dsLoading"
+    >
       <el-row class="title-css scene-title">
-        <span class="title-text scene-title-name" :title="currGroup.name">
+        <span
+          class="title-text scene-title-name"
+          :title="currGroup.name"
+        >
           {{ currGroup.name }}
         </span>
         <el-button
@@ -95,7 +109,10 @@
       </el-row>
 
       <el-col class="custom-tree-container">
-        <div class="block" :style="treeStyle">
+        <div
+          class="block"
+          :style="treeStyle"
+        >
           <el-tree
             :data="tableData"
             node-key="id"
@@ -104,8 +121,14 @@
             highlight-current
             @node-click="sceneClick"
           >
-            <span slot-scope="{ node, data }" class="custom-tree-node-list">
-              <span :id="data.id" style="display: flex; flex: 1; width: 0">
+            <span
+              slot-scope="{ data }"
+              class="custom-tree-node-list"
+            >
+              <span
+                :id="data.id"
+                style="display: flex; flex: 1; width: 0"
+              >
                 <span>
                   <svg-icon
                     v-if="data.type === 'db'"
@@ -139,12 +162,14 @@
                   />
                 </span>
                 <span v-if="data.type === 'db' || data.type === 'sql'">
-                  <span v-if="data.mode === 0" style="margin-left: 6px"
-                    ><i class="el-icon-s-operation"
-                  /></span>
-                  <span v-if="data.mode === 1" style="margin-left: 6px"
-                    ><i class="el-icon-alarm-clock"
-                  /></span>
+                  <span
+                    v-if="data.mode === 0"
+                    style="margin-left: 6px"
+                  ><i class="el-icon-s-operation" /></span>
+                  <span
+                    v-if="data.mode === 1"
+                    style="margin-left: 6px"
+                  ><i class="el-icon-alarm-clock" /></span>
                 </span>
                 <span
                   style="
@@ -154,8 +179,7 @@
                     text-overflow: ellipsis;
                   "
                   :title="data.name"
-                  >{{ data.name }}</span
-                >
+                >{{ data.name }}</span>
               </span>
             </span>
           </el-tree>
@@ -213,7 +237,7 @@ export default {
       kettleRunning: false,
       sceneMode: false,
       search: '',
-      data: [],
+      treeData: [],
       tableData: [],
       tables: [],
       currGroup: null,
@@ -233,25 +257,25 @@ export default {
       dsLoading: false,
       treeStyle: this.fixHeight
         ? {
-            height: '200px',
-            overflow: 'auto'
-          }
+          height: '200px',
+          overflow: 'auto'
+        }
         : {},
       filterText: ''
     }
   },
   computed: {},
   watch: {
-    unionData: function () {
+    unionData: function() {
       this.unionDataChange()
     },
-    table: function () {
+    table: function() {
       if (this.table && this.table.sceneId) {
         post('dataset/group/getScene/' + this.table.sceneId, {}, false).then(
           (response) => {
             this.currGroup = response.data
 
-            this.$nextTick(function () {
+            this.$nextTick(function() {
               this.sceneMode = true
               this.tableTree()
             })
@@ -320,7 +344,7 @@ export default {
     tree(group) {
       this.dsLoading = true
       post('/dataset/group/tree', group, false).then((response) => {
-        this.data = response.data
+        this.treeData = response.data
         this.dsLoading = false
       })
     },
@@ -354,7 +378,7 @@ export default {
             }
             this.tableData = JSON.parse(JSON.stringify(this.tables))
 
-            this.$nextTick(function () {
+            this.$nextTick(function() {
               this.unionDataChange()
             })
             this.dsLoading = false
@@ -403,7 +427,7 @@ export default {
           false
         ).then((response) => {
           if (response.data) {
-            this.$nextTick(function () {
+            this.$nextTick(function() {
               this.$emit('getTable', data)
             })
           } else {
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
index 8e7824e31e..dd0ca5e44c 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
@@ -22,7 +22,10 @@
         </el-col>
         <el-col :span="8">
           <el-dropdown>
-            <el-button size="mini" type="primary">
+            <el-button
+              size="mini"
+              type="primary"
+            >
               {{ searchMap[searchType]
               }}<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
@@ -30,8 +33,7 @@
               <el-dropdown-item @click.native="searchTypeClick('all')">{{
                 $t('commons.all')
               }}</el-dropdown-item>
-              <el-dropdown-item @click.native="searchTypeClick('folder')"
-                >{{ this.$t('commons.folder') }}
+              <el-dropdown-item @click.native="searchTypeClick('folder')">{{ $t('commons.folder') }}
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -39,12 +41,15 @@
       </el-row>
 
       <el-col class="custom-tree-container">
-        <div class="block" :style="treeStyle">
+        <div
+          class="block"
+          :style="treeStyle"
+        >
           <el-tree
             ref="datasetTreeRef"
             :current-node-key="checkedTable ? checkedTable.id : ''"
             :default-expanded-keys="expandedArray"
-            :data="data"
+            :data="treeData"
             node-key="id"
             highlight-current
             :expand-on-click-node="true"
@@ -53,12 +58,12 @@
           >
             <span
               v-if="data.modelInnerType === 'group'"
-              slot-scope="{ node, data }"
+              slot-scope="{ data }"
               class="custom-tree-node"
             >
               <span style="display: flex; flex: 1; width: 0">
                 <span v-if="data.modelInnerType === 'scene'">
-                  <svg-icon icon-class="scene"/>
+                  <svg-icon icon-class="scene" />
                 </span>
                 <span
                   style="
@@ -68,16 +73,18 @@
                     text-overflow: ellipsis;
                   "
                   :title="data.name"
-                  >{{ data.name }}</span
-                >
+                >{{ data.name }}</span>
               </span>
             </span>
             <span
               v-else
-              slot-scope="{ node, data }"
+              slot-scope="{ data }"
               class="custom-tree-node-list"
             >
-              <span :id="data.id" style="display: flex; flex: 1; width: 0">
+              <span
+                :id="data.id"
+                style="display: flex; flex: 1; width: 0"
+              >
                 <span>
                   <svg-icon
                     v-if="data.modelInnerType === 'db'"
@@ -113,15 +120,17 @@
                 <span
                   v-if="
                     data.modelInnerType === 'db' ||
-                    data.modelInnerType === 'sql'
+                      data.modelInnerType === 'sql'
                   "
                 >
-                  <span v-if="data.mode === 0" style="margin-left: 6px"
-                    ><i class="el-icon-s-operation"
-                  /></span>
-                  <span v-if="data.mode === 1" style="margin-left: 6px"
-                    ><i class="el-icon-alarm-clock"
-                  /></span>
+                  <span
+                    v-if="data.mode === 0"
+                    style="margin-left: 6px"
+                  ><i class="el-icon-s-operation" /></span>
+                  <span
+                    v-if="data.mode === 1"
+                    style="margin-left: 6px"
+                  ><i class="el-icon-alarm-clock" /></span>
                 </span>
                 <span
                   style="
@@ -131,8 +140,7 @@
                     text-overflow: ellipsis;
                   "
                   :title="data.name"
-                  >{{ data.name }}</span
-                >
+                >{{ data.name }}</span>
               </span>
             </span>
           </el-tree>
@@ -215,7 +223,7 @@ export default {
       },
       sceneMode: false,
       search: '',
-      data: [],
+      treeData: [],
       tableData: [],
       tables: [],
       currGroup: null,
@@ -243,18 +251,17 @@ export default {
       isTreeSearch: false,
       treeStyle: this.fixHeight
         ? {
-            height: '300px',
-            overflow: 'auto'
-          }
+          height: '300px',
+          overflow: 'auto'
+        }
         : {}
     }
   },
-  computed: {},
   watch: {
-    unionData: function () {
+    unionData: function() {
       this.unionDataChange()
     },
-    table: function () {
+    table: function() {
       this.treeNode()
     },
     filterText(val) {
@@ -298,7 +305,7 @@ export default {
       const modelInfo = localStorage.getItem('dataset-tree')
       const userCache = modelInfo && cache
       if (userCache) {
-        this.data = JSON.parse(modelInfo)
+        this.treeData = JSON.parse(modelInfo)
       }
       this.customType ? this.customType.push('group') : null
       queryAuthModel(
@@ -316,7 +323,7 @@ export default {
           localStorage.setItem('dataset-tree', JSON.stringify(res.data))
         }
         if (!userCache) {
-          this.data = res.data
+          this.treeData = res.data
         }
       })
     },
@@ -353,7 +360,7 @@ export default {
           false
         ).then((response) => {
           if (response.data) {
-            this.$nextTick(function () {
+            this.$nextTick(function() {
               this.$emit('getTable', data)
             })
           } else {
diff --git a/frontend/src/views/dataset/common/DatasetTableData.vue b/frontend/src/views/dataset/common/DatasetTableData.vue
index 73ea130e12..db0d33a7bf 100644
--- a/frontend/src/views/dataset/common/DatasetTableData.vue
+++ b/frontend/src/views/dataset/common/DatasetTableData.vue
@@ -46,7 +46,10 @@
         </template>
       </ux-table-column>
     </ux-grid>
-    <span v-if="table.name" style="font-size: 12px">{{
+    <span
+      v-if="table.name"
+      style="font-size: 12px"
+    >{{
       $t('chart.preview_100_data')
     }}</span>
   </el-col>
diff --git a/frontend/src/views/dataset/common/datasetTree.vue b/frontend/src/views/dataset/common/datasetTree.vue
index 9b64c71ff9..0ef6b5012c 100644
--- a/frontend/src/views/dataset/common/datasetTree.vue
+++ b/frontend/src/views/dataset/common/datasetTree.vue
@@ -9,13 +9,16 @@
       clearable
       class="main-area-input"
     />
-    <div class="tree" v-loading="loading">
+    <div
+      v-loading="loading"
+      class="tree"
+    >
       <el-tree
         ref="datasetTreeRef"
         class="de-tree"
         :current-node-key="checkedTable ? checkedTable.id : ''"
         :default-expanded-keys="expandedArray"
-        :data="data"
+        :data="treeData"
         node-key="id"
         highlight-current
         :expand-on-click-node="true"
@@ -29,7 +32,7 @@
         >
           <span style="display: flex; flex: 1; width: 0">
             <span v-if="data.modelInnerType === 'group'">
-              <svg-icon icon-class="scene"/>
+              <svg-icon icon-class="scene" />
             </span>
             <span
               style="
@@ -39,12 +42,18 @@
                 text-overflow: ellipsis;
               "
               :title="data.name"
-              >{{ data.name }}</span
-            >
+            >{{ data.name }}</span>
           </span>
         </span>
-        <span v-else slot-scope="{ data }" class="custom-tree-node-list">
-          <span :id="data.id" style="display: flex; flex: 1; width: 0">
+        <span
+          v-else
+          slot-scope="{ data }"
+          class="custom-tree-node-list"
+        >
+          <span
+            :id="data.id"
+            style="display: flex; flex: 1; width: 0"
+          >
             <span>
               <svg-icon
                 :icon-class="`ds-${data.modelInnerType}`"
@@ -59,8 +68,7 @@
                 text-overflow: ellipsis;
               "
               :title="data.name"
-              >{{ data.name }}</span
-            >
+            >{{ data.name }}</span>
           </span>
         </span>
       </el-tree>
@@ -142,7 +150,7 @@ export default {
       },
       sceneMode: false,
       search: '',
-      data: [],
+      treeData: [],
       tableData: [],
       tables: [],
       currGroup: null,
@@ -170,18 +178,18 @@ export default {
       isTreeSearch: false,
       treeStyle: this.fixHeight
         ? {
-            height: '300px',
-            overflow: 'auto'
-          }
+          height: '300px',
+          overflow: 'auto'
+        }
         : {}
     }
   },
   computed: {},
   watch: {
-    unionData: function () {
+    unionData: function() {
       this.unionDataChange()
     },
-    table: function () {
+    table: function() {
       this.treeNode()
     },
     filterText(val) {
@@ -225,10 +233,10 @@ export default {
       const modelInfo = localStorage.getItem('dataset-tree')
       const userCache = modelInfo && cache
       if (userCache) {
-        this.data = JSON.parse(modelInfo)
+        this.treeData = JSON.parse(modelInfo)
       }
       this.customType ? this.customType.push('group') : null
-      this.loading = true;
+      this.loading = true
       queryAuthModel(
         {
           modelType: 'dataset',
@@ -244,7 +252,7 @@ export default {
           localStorage.setItem('dataset-tree', JSON.stringify(res.data))
         }
         if (!userCache) {
-          this.data = res.data
+          this.treeData = res.data
         }
       }).finally(() => {
         this.loading = false
@@ -283,7 +291,7 @@ export default {
           false
         ).then((response) => {
           if (response.data) {
-            this.$nextTick(function () {
+            this.$nextTick(function() {
               this.$emit('getTable', data)
             })
           } else {
diff --git a/frontend/src/views/dataset/data/CalcFieldEdit.vue b/frontend/src/views/dataset/data/CalcFieldEdit.vue
index 0d3881ed9a..fa411a2b5c 100644
--- a/frontend/src/views/dataset/data/CalcFieldEdit.vue
+++ b/frontend/src/views/dataset/data/CalcFieldEdit.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="calcu-feild">
-    <el-form ref="form" :model="fieldForm" class="de-form-item">
+    <el-form
+      ref="form"
+      :model="fieldForm"
+      class="de-form-item"
+    >
       <el-form-item :label="$t('dataset.field_edit_name')">
         <el-input
           v-model="fieldForm.name"
@@ -10,19 +14,29 @@
       </el-form-item>
     </el-form>
 
-    <div class="calcu-cont" style="height: 544px">
+    <div
+      class="calcu-cont"
+      style="height: 544px"
+    >
       <div style="flex: 1">
         <el-row>
           <el-row>
             <span class="mb8">
               {{ $t('dataset.field_exp') }}
-              <el-tooltip class="item" effect="dark" placement="bottom">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                placement="bottom"
+              >
                 <div slot="content">
                   表达式语法请遵循该数据源对应的数据库语法。
                   <br>
                   数据集中不支持聚合运算。
                 </div>
-                <i class="el-icon-info" style="cursor: pointer" />
+                <i
+                  class="el-icon-info"
+                  style="cursor: pointer"
+                />
               </el-tooltip>
             </span>
             <codemirror
@@ -36,12 +50,22 @@
             />
           </el-row>
           <el-row style="margin-top: 28px">
-            <el-form ref="form" :model="fieldForm" class="de-form-item">
+            <el-form
+              ref="form"
+              :model="fieldForm"
+              class="de-form-item"
+            >
               <el-form-item :label="$t('dataset.data_type')">
-                <el-radio v-model="fieldForm.groupType" label="d">{{
+                <el-radio
+                  v-model="fieldForm.groupType"
+                  label="d"
+                >{{
                   $t('chart.dimension')
                 }}</el-radio>
-                <el-radio v-model="fieldForm.groupType" label="q">{{
+                <el-radio
+                  v-model="fieldForm.groupType"
+                  label="q"
+                >{{
                   $t('chart.quota')
                 }}</el-radio>
               </el-form-item>
@@ -60,7 +84,11 @@
       <div class="padding-lr">
         <span class="mb8">
           {{ $t('dataset.click_ref_field') }}
-          <el-tooltip class="item" effect="dark" placement="bottom">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom"
+          >
             <div slot="content">
               引用字段以 "[" 开始， "]" 结束
               <br>
@@ -68,7 +96,10 @@
               <br>
               若输入与引用字段相同格式的内容，将被当作引用字段处理
             </div>
-            <i class="el-icon-info" style="cursor: pointer" />
+            <i
+              class="el-icon-info"
+              style="cursor: pointer"
+            />
           </el-tooltip>
         </span>
         <el-input
@@ -121,7 +152,10 @@
               </span>
             </transition-group>
           </draggable>
-          <div v-else class="class-na">{{ $t('dataset.na') }}</div>
+          <div
+            v-else
+            class="class-na"
+          >{{ $t('dataset.na') }}</div>
         </div>
         <div class="field-height">
           <span>{{ $t('chart.quota') }}</span>
@@ -165,13 +199,20 @@
               </span>
             </transition-group>
           </draggable>
-          <div v-else class="class-na">{{ $t('dataset.na') }}</div>
+          <div
+            v-else
+            class="class-na"
+          >{{ $t('dataset.na') }}</div>
         </div>
       </div>
       <div class="padding-lr">
         <span class="mb8">
           {{ $t('dataset.click_ref_function') }}
-          <el-tooltip class="item" effect="dark" placement="bottom">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom"
+          >
             <div slot="content">
               使用数据集对应数据库类型所支持的函数，语法同对应数据库
               <br>
@@ -180,7 +221,10 @@
               非直连模式数据集，使用Doris数据库函数，可参考Doris官网
               https://doris.apache.org/zh-CN/
             </div>
-            <i class="el-icon-info" style="cursor: pointer" />
+            <i
+              class="el-icon-info"
+              style="cursor: pointer"
+            />
           </el-tooltip>
         </span>
         <el-input
@@ -215,7 +259,10 @@
     </div>
 
     <div class="de-foot">
-      <deBtn secondary @click="closeCalcField">{{
+      <deBtn
+        secondary
+        @click="closeCalcField"
+      >{{
         $t('dataset.cancel')
       }}</deBtn>
       <deBtn
diff --git a/frontend/src/views/dataset/data/DataHome.vue b/frontend/src/views/dataset/data/DataHome.vue
index 6b7811be7a..4fc42823cd 100644
--- a/frontend/src/views/dataset/data/DataHome.vue
+++ b/frontend/src/views/dataset/data/DataHome.vue
@@ -1,6 +1,9 @@
 <template>
   <el-col style="height: 100%;">
-    <el-row style="height: 100%;" class="custom-position">
+    <el-row
+      style="height: 100%;"
+      class="custom-position"
+    >
       {{ $t('dataset.pls_slc_tbl_left') }}
     </el-row>
   </el-col>
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index 93ef48423f..4869d794b7 100644
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@@ -3,27 +3,28 @@
     <el-row style="margin: 6px 0 16px 0">
       <el-col :span="12">
         <deBtn
-          secondary
           v-if="hasDataPermission('manage', param.privileges)"
+          secondary
           icon="el-icon-plus"
           @click="addCalcField"
-          >{{ $t('dataset.add_calc_field') }}</deBtn
-        >
+        >{{ $t('dataset.add_calc_field') }}</deBtn>
         <deBtn
-          secondary
           v-if="
             hasDataPermission('manage', param.privileges) &&
-            table.type !== 'excel' &&
-            table.type !== 'custom' &&
-            table.type !== 'union'
+              table.type !== 'excel' &&
+              table.type !== 'custom' &&
+              table.type !== 'union'
           "
+          secondary
           :loading="isSyncField"
           icon="el-icon-refresh-left"
           @click="syncField"
-          >{{ $t('dataset.sync_field') }}</deBtn
-        >
+        >{{ $t('dataset.sync_field') }}</deBtn>
       </el-col>
-      <el-col style="text-align: right" :span="12">
+      <el-col
+        style="text-align: right"
+        :span="12"
+      >
         <el-input
           v-model="searchField"
           size="small"
@@ -36,7 +37,10 @@
       </el-col>
     </el-row>
 
-    <el-collapse v-model="fieldActiveNames" class="style-collapse">
+    <el-collapse
+      v-model="fieldActiveNames"
+      class="style-collapse"
+    >
       <el-collapse-item
         class="dimension"
         name="d"
@@ -44,13 +48,18 @@
           tableFields.dimensionListData.length
         })`"
       >
-        <el-table :data="tableFields.dimensionListData" size="mini">
+        <el-table
+          :data="tableFields.dimensionListData"
+          size="mini"
+        >
           <el-table-column
             property="checked"
             :label="$t('dataset.field_check')"
             width="60"
           >
-            <template slot="header" slot-scope="scope">
+            <template
+              slot="header"
+            >
               <el-checkbox
                 v-model="dimensionChecked"
                 :indeterminate="dimensionIndeterminate"
@@ -211,13 +220,13 @@
                 <span
                   v-if="
                     scope.row.deExtractType === 0 ||
-                    scope.row.deExtractType === 6
+                      scope.row.deExtractType === 6
                   "
                 >
                   <svg-icon
                     v-if="
                       scope.row.deExtractType === 0 ||
-                      scope.row.deExtractType === 6
+                        scope.row.deExtractType === 6
                     "
                     icon-class="field_text"
                     class="field-icon-text field-icon-dimension"
@@ -235,15 +244,15 @@
                 <span
                   v-if="
                     scope.row.deExtractType === 2 ||
-                    scope.row.deExtractType === 3 ||
-                    scope.row.deExtractType === 4
+                      scope.row.deExtractType === 3 ||
+                      scope.row.deExtractType === 4
                   "
                 >
                   <svg-icon
                     v-if="
                       scope.row.deExtractType === 2 ||
-                      scope.row.deExtractType === 3 ||
-                      scope.row.deExtractType === 4
+                        scope.row.deExtractType === 3 ||
+                        scope.row.deExtractType === 4
                     "
                     icon-class="field_value"
                     class="field-icon-value field-icon-dimension"
@@ -251,18 +260,16 @@
                   <span
                     v-if="
                       scope.row.deExtractType === 2 ||
-                      scope.row.deExtractType === 4
+                        scope.row.deExtractType === 4
                     "
                     class="field-class"
-                    >{{ $t('dataset.value') }}</span
-                  >
+                  >{{ $t('dataset.value') }}</span>
                   <span
                     v-if="scope.row.deExtractType === 3"
                     class="field-class"
-                    >{{
-                      $t('dataset.value') + '(' + $t('dataset.float') + ')'
-                    }}</span
-                  >
+                  >{{
+                    $t('dataset.value') + '(' + $t('dataset.float') + ')'
+                  }}</span>
                 </span>
                 <span v-if="scope.row.deExtractType === 5">
                   <svg-icon
@@ -290,7 +297,10 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column min-width="182" :label="$t('dataset.operator')">
+          <el-table-column
+            min-width="182"
+            :label="$t('dataset.operator')"
+          >
             <template slot-scope="scope">
               <el-button
                 class="de-text-btn"
@@ -298,8 +308,7 @@
                 style="margin-left: -4px"
                 :disabled="!hasDataPermission('manage', param.privileges)"
                 @click="dqTrans(scope.row, 'd')"
-                >{{ $t('deDataset.convert_to_indicator') }}</el-button
-              >
+              >{{ $t('deDataset.convert_to_indicator') }}</el-button>
               <template v-if="scope.row.extField !== 0">
                 <el-button
                   :disabled="!hasDataPermission('manage', param.privileges)"
@@ -307,8 +316,7 @@
                   class="de-text-btn"
                   style="margin-left: 8px"
                   @click="editField(scope.row)"
-                  >{{ $t('dataset.edit') }}</el-button
-                >
+                >{{ $t('dataset.edit') }}</el-button>
                 <el-dropdown
                   size="medium"
                   trigger="click"
@@ -318,8 +326,11 @@
                     style="margin-left: 8px"
                     class="el-icon-more de-text-btn"
                     type="text"
-                  ></el-button>
-                  <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
+                  />
+                  <el-dropdown-menu
+                    slot="dropdown"
+                    class="de-card-dropdown"
+                  >
                     <slot>
                       <el-dropdown-item
                         :disabled="
@@ -327,7 +338,7 @@
                         "
                         command="copy"
                       >
-                        <i class="el-icon-document-copy"></i>
+                        <i class="el-icon-document-copy" />
                         {{ $t('dataset.copy') }}
                       </el-dropdown-item>
                       <el-dropdown-item
@@ -336,7 +347,7 @@
                         "
                         command="delete"
                       >
-                        <i class="el-icon-delete"></i>
+                        <i class="el-icon-delete" />
                         {{ $t('chart.delete') }}
                       </el-dropdown-item>
                     </slot>
@@ -350,8 +361,7 @@
                 style="margin-left: 8px"
                 class="de-text-btn"
                 @click="copyField(scope.row)"
-                >{{ $t('dataset.copy') }}</el-button
-              >
+              >{{ $t('dataset.copy') }}</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -362,13 +372,18 @@
         name="q"
         :title="`${$t('chart.quota')} (${tableFields.quotaListData.length})`"
       >
-        <el-table :data="tableFields.quotaListData" size="mini">
+        <el-table
+          :data="tableFields.quotaListData"
+          size="mini"
+        >
           <el-table-column
             property="checked"
             :label="$t('dataset.field_check')"
             width="60"
           >
-            <template slot="header" slot-scope="scope">
+            <template
+              slot="header"
+            >
               <el-checkbox
                 v-model="quotaChecked"
                 :indeterminate="quotaIndeterminate"
@@ -545,15 +560,15 @@
                 <span
                   v-if="
                     scope.row.deExtractType === 2 ||
-                    scope.row.deExtractType === 3 ||
-                    scope.row.deExtractType === 4
+                      scope.row.deExtractType === 3 ||
+                      scope.row.deExtractType === 4
                   "
                 >
                   <svg-icon
                     v-if="
                       scope.row.deExtractType === 2 ||
-                      scope.row.deExtractType === 3 ||
-                      scope.row.deExtractType === 4
+                        scope.row.deExtractType === 3 ||
+                        scope.row.deExtractType === 4
                     "
                     icon-class="field_value"
                     class="field-icon-value field-icon-quota"
@@ -561,18 +576,16 @@
                   <span
                     v-if="
                       scope.row.deExtractType === 2 ||
-                      scope.row.deExtractType === 4
+                        scope.row.deExtractType === 4
                     "
                     class="field-class"
-                    >{{ $t('dataset.value') }}</span
-                  >
+                  >{{ $t('dataset.value') }}</span>
                   <span
                     v-if="scope.row.deExtractType === 3"
                     class="field-class"
-                    >{{
-                      $t('dataset.value') + '(' + $t('dataset.float') + ')'
-                    }}</span
-                  >
+                  >{{
+                    $t('dataset.value') + '(' + $t('dataset.float') + ')'
+                  }}</span>
                 </span>
                 <span v-if="scope.row.deExtractType === 5">
                   <svg-icon
@@ -612,8 +625,7 @@
                 style="margin-left: -4px"
                 :disabled="!hasDataPermission('manage', param.privileges)"
                 @click="dqTrans(scope.row, 'q')"
-                >{{ $t('deDataset.convert_to_dimension') }}</el-button
-              >
+              >{{ $t('deDataset.convert_to_dimension') }}</el-button>
               <template v-if="scope.row.extField !== 0">
                 <el-button
                   :disabled="!hasDataPermission('manage', param.privileges)"
@@ -621,8 +633,7 @@
                   class="de-text-btn"
                   style="margin-left: 8px"
                   @click="editField(scope.row)"
-                  >{{ $t('dataset.edit') }}</el-button
-                >
+                >{{ $t('dataset.edit') }}</el-button>
                 <el-dropdown
                   size="medium"
                   trigger="click"
@@ -632,8 +643,11 @@
                     style="margin-left: 8px"
                     class="el-icon-more de-text-btn"
                     type="text"
-                  ></el-button>
-                  <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
+                  />
+                  <el-dropdown-menu
+                    slot="dropdown"
+                    class="de-card-dropdown"
+                  >
                     <slot>
                       <el-dropdown-item
                         :disabled="
@@ -641,7 +655,7 @@
                         "
                         command="copy"
                       >
-                        <i class="el-icon-document-copy"></i>
+                        <i class="el-icon-document-copy" />
                         {{ $t('dataset.copy') }}
                       </el-dropdown-item>
                       <el-dropdown-item
@@ -650,7 +664,7 @@
                         "
                         command="delete"
                       >
-                        <i class="el-icon-delete"></i>
+                        <i class="el-icon-delete" />
                         {{ $t('chart.delete') }}
                       </el-dropdown-item>
                     </slot>
@@ -664,8 +678,7 @@
                 style="margin-left: 8px"
                 class="de-text-btn"
                 @click="copyField(scope.row)"
-                >{{ $t('dataset.copy') }}</el-button
-              >
+              >{{ $t('dataset.copy') }}</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -744,7 +757,7 @@ export default {
     }
   },
   watch: {
-    param: function () {
+    param: function() {
       this.initField()
     },
     searchField(val) {
@@ -761,7 +774,7 @@ export default {
   methods: {
     calcHeight() {
       const that = this
-      setTimeout(function () {
+      setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
         that.maxHeight = currentHeight - 56 - 30 - 35 - 26 - 10 - 10 + 'px'
       }, 10)
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index c964b5875a..a2909b1a40 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -1,26 +1,39 @@
 <template>
   <el-col>
     <div class="table-count">
-      <span class="title-text" style="width: 100px"
-        >{{ $t('deDataset.display') }} {{ form.row }}
-        {{ $t('deDataset.row') }}</span
-      >
+      <span
+        class="title-text"
+        style="width: 100px"
+      >{{ $t('deDataset.display') }} {{ form.row }}
+        {{ $t('deDataset.row') }}</span>
       <el-popover
+        ref="setCount"
         popper-class="de-set-count de-card-dropdown"
         placement="right-start"
         width="306"
-        ref="setCount"
         trigger="click"
       >
         {{ $t('deDataset.show_rows') }}
-        <el-input size="small" v-model="rowNum"> </el-input>
+        <el-input
+          v-model="rowNum"
+          size="small"
+        />
         <div class="foot">
-          <deBtn @click="cancel" secondary>{{ $t('commons.cancel') }} </deBtn>
-          <deBtn type="primary" @click="searchRow">
+          <deBtn
+            secondary
+            @click="cancel"
+          >{{ $t('commons.cancel') }} </deBtn>
+          <deBtn
+            type="primary"
+            @click="searchRow"
+          >
             {{ $t('commons.confirm') }}
           </deBtn>
         </div>
-        <i slot="reference" class="el-icon-edit"></i>
+        <i
+          slot="reference"
+          class="el-icon-edit"
+        />
       </el-popover>
     </div>
     <ux-grid
@@ -135,7 +148,7 @@ export default {
     },
     calHeight() {
       const that = this
-      setTimeout(function () {
+      setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
         that.height = currentHeight - 215
       }, 10)
diff --git a/frontend/src/views/dataset/data/UnionView.vue b/frontend/src/views/dataset/data/UnionView.vue
index 720dc9827b..25054efafe 100644
--- a/frontend/src/views/dataset/data/UnionView.vue
+++ b/frontend/src/views/dataset/data/UnionView.vue
@@ -5,8 +5,7 @@
       size="mini"
       icon="el-icon-circle-plus-outline"
       @click="showUnionEdit"
-      >{{ $t('dataset.add_union') }}</el-button
-    >
+    >{{ $t('dataset.add_union') }}</el-button>
     <el-row>
       <el-table
         size="mini"
@@ -52,22 +51,23 @@
           prop="targetTableFieldName"
           :label="$t('dataset.target_field')"
         />
-        <el-table-column align="left" :label="$t('dataset.operate')">
+        <el-table-column
+          align="left"
+          :label="$t('dataset.operate')"
+        >
           <template slot-scope="scope">
             <el-button
               v-if="hasDataPermission('manage', param.privileges)"
               type="text"
               size="mini"
               @click="edit(scope.row)"
-              >{{ $t('dataset.edit') }}</el-button
-            >
+            >{{ $t('dataset.edit') }}</el-button>
             <el-button
               v-if="hasDataPermission('manage', param.privileges)"
               type="text"
               size="mini"
               @click="deleteUnion(scope.row)"
-              >{{ $t('dataset.delete') }}</el-button
-            >
+            >{{ $t('dataset.delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -85,7 +85,10 @@
         style="display: flex; align-items: center; justify-content: center"
       >
         <el-col :span="6">
-          <p class="table-name-css" :title="table.name">{{ table.name }}</p>
+          <p
+            class="table-name-css"
+            :title="table.name"
+          >{{ table.name }}</p>
           <el-select
             v-model="union.sourceTableFieldId"
             :placeholder="$t('dataset.pls_slc_union_field')"
@@ -142,13 +145,22 @@
             size="mini"
             style="display: block; width: 100%; text-align: center"
           >
-            <el-radio class="union-relation-css" label="1:N">{{
+            <el-radio
+              class="union-relation-css"
+              label="1:N"
+            >{{
               $t('dataset.left_join')
             }}</el-radio>
-            <el-radio class="union-relation-css" label="N:1">{{
+            <el-radio
+              class="union-relation-css"
+              label="N:1"
+            >{{
               $t('dataset.right_join')
             }}</el-radio>
-            <el-radio class="union-relation-css" label="1:1">{{
+            <el-radio
+              class="union-relation-css"
+              label="1:1"
+            >{{
               $t('dataset.inner_join')
             }}</el-radio>
             <!--            <el-radio class="union-relation-css" label="N:N">{{ $t('dataset.full_join') }}</el-radio>-->
@@ -170,7 +182,11 @@
               :mode="table.mode"
               @getTable="getTable"
             />
-            <el-button slot="reference" size="mini" style="width: 100%">
+            <el-button
+              slot="reference"
+              size="mini"
+              style="width: 100%"
+            >
               <p
                 class="table-name-css"
                 :title="targetTable.name || $t('dataset.pls_slc_union_table')"
@@ -231,11 +247,21 @@
         </el-col>
       </el-row>
 
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeUnion">{{
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeUnion"
+        >{{
           $t('dataset.cancel')
         }}</el-button>
-        <el-button type="primary" size="mini" @click="saveUnion">{{
+        <el-button
+          type="primary"
+          size="mini"
+          @click="saveUnion"
+        >{{
           $t('dataset.confirm')
         }}</el-button>
       </div>
@@ -281,7 +307,7 @@ export default {
     }
   },
   watch: {
-    table: function () {
+    table: function() {
       this.initUnion()
     }
   },
@@ -292,7 +318,7 @@ export default {
   methods: {
     calHeight() {
       const that = this
-      setTimeout(function () {
+      setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
         that.height = currentHeight - 56 - 30 - 26 - 25 - 55 - 38 - 28 - 10
       }, 10)
diff --git a/frontend/src/views/dataset/data/UpdateInfo.vue b/frontend/src/views/dataset/data/UpdateInfo.vue
index efcd92d53b..2db667f6bd 100644
--- a/frontend/src/views/dataset/data/UpdateInfo.vue
+++ b/frontend/src/views/dataset/data/UpdateInfo.vue
@@ -8,8 +8,15 @@
           @click="() => addTask()"
         >{{ $t('dataset.add_task') }}</deBtn>
       </el-col>
-      <el-col style="text-align: right" :span="12">
-        <el-button type="text" icon="el-icon-document" @click="showConfig">
+      <el-col
+        style="text-align: right"
+        :span="12"
+      >
+        <el-button
+          type="text"
+          icon="el-icon-document"
+          @click="showConfig"
+        >
           {{ $t('dataset.task.record') }}
         </el-button>
       </el-col>
@@ -141,7 +148,10 @@
                 class="el-icon-more de-text-btn"
                 type="text"
               />
-              <el-dropdown-menu slot="dropdown" class="de-card-dropdown">
+              <el-dropdown-menu
+                slot="dropdown"
+                class="de-card-dropdown"
+              >
                 <template
                   v-if="!['Stopped', 'Exec'].includes(scope.row.status)"
                 >
@@ -186,8 +196,14 @@
       class="de-dialog-form"
     >
       <span class="err-msg">{{ error_massage }} </span>
-      <span slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="show_error_massage = false">{{
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="show_error_massage = false"
+        >{{
           $t('dataset.close')
         }}</el-button>
       </span>
@@ -208,19 +224,31 @@
           :height="height"
           style="width: 100%"
         >
-          <el-table-column prop="name" :label="$t('dataset.task_name')" />
-          <el-table-column prop="startTime" :label="$t('dataset.start_time')">
+          <el-table-column
+            prop="name"
+            :label="$t('dataset.task_name')"
+          />
+          <el-table-column
+            prop="startTime"
+            :label="$t('dataset.start_time')"
+          >
             <template slot-scope="scope">
               <span>{{ scope.row.startTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
-          <el-table-column prop="endTime" :label="$t('dataset.end_time')">
+          <el-table-column
+            prop="endTime"
+            :label="$t('dataset.end_time')"
+          >
             <template slot-scope="scope">
               <span>{{ scope.row.endTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
 
-          <el-table-column prop="status" :label="$t('dataset.status')">
+          <el-table-column
+            prop="status"
+            :label="$t('dataset.status')"
+          >
             <template slot-scope="scope">
               <span
                 v-if="scope.row.status"
@@ -228,7 +256,13 @@
               >{{
                  $t(`dataset.${scope.row.status.toLocaleLowerCase()}`)
                }}
-                <svg-icon v-if="scope.row.status === 'Error'" style="cursor: pointer;" icon-class="icon-maybe" class="field-icon-location" @click="showErrorMassage(scope.row.info)" />
+                <svg-icon
+                  v-if="scope.row.status === 'Error'"
+                  style="cursor: pointer;"
+                  icon-class="icon-maybe"
+                  class="field-icon-location"
+                  @click="showErrorMassage(scope.row.info)"
+                />
               </span>
               <span v-else>-</span>
             </template>
@@ -264,21 +298,30 @@
         :disabled="disableForm"
         :rules="taskFormRules"
       >
-        <el-form-item :label="$t('dataset.task_name')" prop="name">
+        <el-form-item
+          :label="$t('dataset.task_name')"
+          prop="name"
+        >
           <el-input
             v-model="taskForm.name"
             size="small"
             :placeholder="$t('fu.search_bar.please_input') + $t('dataset.task_name')"
           />
         </el-form-item>
-        <el-form-item :label="$t('dataset.update_type')" prop="type">
+        <el-form-item
+          :label="$t('dataset.update_type')"
+          prop="type"
+        >
           <el-radio-group v-model="taskForm.type">
             <el-radio label="all_scope">{{ $t('dataset.all_scope') }}</el-radio>
             <el-radio label="add_scope">
               {{ $t('dataset.add_scope') }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <div v-if="taskForm.type === 'add_scope' && table.type !== 'api'" class="add-scope-cont">
+        <div
+          v-if="taskForm.type === 'add_scope' && table.type !== 'api'"
+          class="add-scope-cont"
+        >
           <el-form-item
             prop="type"
             :label="$t('dataset.incremental_update_type')"
@@ -324,8 +367,14 @@
           </el-form-item>
         </div>
 
-        <el-form-item :label="$t('dataset.execute_rate')" prop="rate">
-          <el-radio-group v-model="taskForm.rate" @change="onRateChange">
+        <el-form-item
+          :label="$t('dataset.execute_rate')"
+          prop="rate"
+        >
+          <el-radio-group
+            v-model="taskForm.rate"
+            @change="onRateChange"
+          >
             <el-radio label="SIMPLE">{{ $t('dataset.execute_once') }}</el-radio>
             <el-radio label="CRON">{{ $t('dataset.cron_config') }}</el-radio>
             <el-radio label="SIMPLE_CRON">{{
@@ -333,7 +382,10 @@
             }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <div v-if="taskForm.rate !== 'SIMPLE'" class="execute-rate-cont">
+        <div
+          v-if="taskForm.rate !== 'SIMPLE'"
+          class="execute-rate-cont"
+        >
           <el-form-item
             v-if="taskForm.rate === 'SIMPLE_CRON'"
             :label="$t('dataset.execute_rate')"
@@ -354,9 +406,18 @@
                 size="small"
                 @change="onSimpleCronChange()"
               >
-                <el-option :label="$t('components.minute')" value="minute" />
-                <el-option :label="$t('components.hour')" value="hour" />
-                <el-option :label="$t('components.day')" value="day" />
+                <el-option
+                  :label="$t('components.minute')"
+                  value="minute"
+                />
+                <el-option
+                  :label="$t('components.hour')"
+                  value="hour"
+                />
+                <el-option
+                  :label="$t('components.day')"
+                  value="day"
+                />
               </el-select>
               {{ $t('cron.every_exec') }}
             </div>
@@ -424,8 +485,15 @@
         </div>
       </el-form>
       <div class="de-foot">
-        <deBtn secondary @click="closeTask">{{ $t('dataset.cancel') }}</deBtn>
-        <deBtn v-if="!disableForm" type="primary" @click="saveTask(taskForm)">{{
+        <deBtn
+          secondary
+          @click="closeTask"
+        >{{ $t('dataset.cancel') }}</deBtn>
+        <deBtn
+          v-if="!disableForm"
+          type="primary"
+          @click="saveTask(taskForm)"
+        >{{
           $t('dataset.confirm')
         }}</deBtn>
       </div>
@@ -747,16 +815,14 @@ export default {
       switch (key) {
         case 'exec':
           this.execTask(row)
-          return
           break
         case 'delete':
           this.deleteTask(row)
-          return
           break
         default:
+          this.changeTaskStatus(row)
           break
       }
-      this.changeTaskStatus(row)
     },
     execTask(task) {
       this.$confirm(
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index 611e9116e6..2e0b46400a 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -1,15 +1,27 @@
 <template>
   <div class="view-table">
     <el-row>
-      <el-col class="de-dataset-name" :span="16">
-        <span class="title-text" style="line-height: 26px">
+      <el-col
+        class="de-dataset-name"
+        :span="16"
+      >
+        <span
+          class="title-text"
+          style="line-height: 26px"
+        >
           {{ table.name }}
         </span>
         <template v-if="['db', 'sql'].includes(param.modelInnerType)">
-          <span v-if="table.mode === 0" class="de-tag primary">{{
+          <span
+            v-if="table.mode === 0"
+            class="de-tag primary"
+          >{{
             $t('dataset.direct_connect')
           }}</span>
-          <span v-if="table.mode === 1" class="de-tag warning">{{
+          <span
+            v-if="table.mode === 1"
+            class="de-tag warning"
+          >{{
             $t('dataset.sync_data')
           }}</span>
         </template>
@@ -20,7 +32,7 @@
         >
           {{ $t('dataset.dataset_sync') }}
         </span>
-        <el-divider direction="vertical"></el-divider>
+        <el-divider direction="vertical" />
         <span class="create-by">{{ $t('dataset.create_by') }}</span>
         <span class="create-by">:{{ table.creatorName || 'N/A' }}</span>
         <el-popover
@@ -35,7 +47,10 @@
             :data="table"
             :tab-status="tabStatus"
           />
-          <i slot="reference" class="el-icon-warning-outline detail" />
+          <i
+            slot="reference"
+            class="el-icon-warning-outline detail"
+          />
         </el-popover>
       </el-col>
       <el-col
@@ -55,18 +70,18 @@
           </deBtn>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="0">
-              <svg-icon icon-class="icon_add-entry_outlined"> </svg-icon>
+              <svg-icon icon-class="icon_add-entry_outlined" />
               {{ $t('dataset.excel_replace') + $t('chart.chart_data') }}
             </el-dropdown-item>
             <el-dropdown-item command="1">
-              <svg-icon icon-class="icon_doc-replace_outlined"> </svg-icon>
+              <svg-icon icon-class="icon_doc-replace_outlined" />
               {{ $t('dataset.excel_add') + $t('chart.chart_data') }}
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
         <deBtn
-          type="primary"
           v-if="['sql', 'union'].includes(table.type)"
+          type="primary"
           @click="editDataset(table.type)"
         >
           {{
@@ -78,8 +93,15 @@
       </el-col>
     </el-row>
 
-    <el-tabs class="de-tabs" v-model="tabActive" @tab-click="tabClick">
-      <el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
+    <el-tabs
+      v-model="tabActive"
+      class="de-tabs"
+      @tab-click="tabClick"
+    >
+      <el-tab-pane
+        :label="$t('dataset.data_preview')"
+        name="dataPreview"
+      >
         <tab-data-preview
           :param="param"
           :table="table"
@@ -104,7 +126,7 @@
       <el-tab-pane
         v-if="
           table.mode === 1 &&
-          (table.type === 'db' || table.type === 'sql' || table.type === 'api')
+            (table.type === 'db' || table.type === 'sql' || table.type === 'api')
         "
         :label="$t('dataset.update_info')"
         name="updateInfo"
@@ -192,12 +214,12 @@ export default {
     }
   },
   computed: {
-    hideCustomDs: function () {
+    hideCustomDs: function() {
       return this.$store.getters.hideCustomDs
     }
   },
   watch: {
-    param: function () {
+    param: function() {
       this.tabActive = 'dataPreview'
       this.initTable(this.param.id)
     }
diff --git a/frontend/src/views/dataset/data/authConfig.vue b/frontend/src/views/dataset/data/authConfig.vue
index 87b45d61be..bb6157aff2 100644
--- a/frontend/src/views/dataset/data/authConfig.vue
+++ b/frontend/src/views/dataset/data/authConfig.vue
@@ -1,14 +1,41 @@
 <template>
   <de-container style="height: auto">
     <de-aside-container style="height: auto">
-      <el-button v-show="!showTargetSearchInput" class="de-icon" icon="el-icon-search" circle size="mini" @click="showTargetSearchWidget" />
-      <div v-show="showTargetSearchInput" class="de-input">
-        <el-input v-model="targetFilterText" class="main-area-input">
-          <el-button slot="append" icon="el-icon-close" @click="closeTargetSearchWidget" />
+      <el-button
+        v-show="!showTargetSearchInput"
+        class="de-icon"
+        icon="el-icon-search"
+        circle
+        size="mini"
+        @click="showTargetSearchWidget"
+      />
+      <div
+        v-show="showTargetSearchInput"
+        class="de-input"
+      >
+        <el-input
+          v-model="targetFilterText"
+          class="main-area-input"
+        >
+          <el-button
+            slot="append"
+            icon="el-icon-close"
+            @click="closeTargetSearchWidget"
+          />
         </el-input>
       </div>
-      <el-tabs v-model="targetActiveName" :class="{'de-search-header': showTargetSearchInput}" @tab-click="handleClick">
-        <el-tab-pane v-for="(targetInfo, index) in targetInfoArray" :key="index" :lazy="true" :label="targetInfo.tabName" :name="targetInfo.authType">
+      <el-tabs
+        v-model="targetActiveName"
+        :class="{'de-search-header': showTargetSearchInput}"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane
+          v-for="(targetInfo, index) in targetInfoArray"
+          :key="index"
+          :lazy="true"
+          :label="targetInfo.tabName"
+          :name="targetInfo.authType"
+        >
           <lazy-tree
             v-if="targetActiveName===targetInfo.authType"
             :active-name="targetActiveName"
@@ -22,14 +49,41 @@
       </el-tabs>
     </de-aside-container>
     <de-main-container class="de-main-container-auth">
-      <el-button v-show="!showSourceSearchInput" class="de-icon" icon="el-icon-search" circle size="mini" @click="showSourceSearchWidget" />
-      <div v-show="showSourceSearchInput" class="de-input">
-        <el-input v-model="sourceFilterText" class="main-area-input">
-          <el-button slot="append" icon="el-icon-close" @click="closeSourceSearchWidget" />
+      <el-button
+        v-show="!showSourceSearchInput"
+        class="de-icon"
+        icon="el-icon-search"
+        circle
+        size="mini"
+        @click="showSourceSearchWidget"
+      />
+      <div
+        v-show="showSourceSearchInput"
+        class="de-input"
+      >
+        <el-input
+          v-model="sourceFilterText"
+          class="main-area-input"
+        >
+          <el-button
+            slot="append"
+            icon="el-icon-close"
+            @click="closeSourceSearchWidget"
+          />
         </el-input>
       </div>
-      <el-tabs v-model="sourceActiveName" :class="{'de-search-header': showSourceSearchInput}" @tab-click="handleClick">
-        <el-tab-pane v-for="(sourceInfo, index) in sourceInfoTabs" :key="index" :lazy="true" :label="sourceInfo.tabName" :name="sourceInfo.authType">
+      <el-tabs
+        v-model="sourceActiveName"
+        :class="{'de-search-header': showSourceSearchInput}"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane
+          v-for="(sourceInfo, index) in sourceInfoTabs"
+          :key="index"
+          :lazy="true"
+          :label="sourceInfo.tabName"
+          :name="sourceInfo.authType"
+        >
           <lazy-tree
             v-if="authCondition"
             :active-name="sourceActiveName"
@@ -37,8 +91,8 @@
             :data-info="sourceInfo"
             show-extent
             :auth-condition="authCondition"
-            @execute-axios="executeAxios"
             :attach-active-name="targetActiveName"
+            @execute-axios="executeAxios"
           />
         </el-tab-pane>
       </el-tabs>
@@ -62,7 +116,7 @@ export default {
       default: null
     }
   },
-  data () {
+  data() {
     return {
       targetInfoArray:
         [
@@ -133,7 +187,7 @@ export default {
     }
   },
   computed: {
-    sourceInfoTabs () {
+    sourceInfoTabs() {
       const tabs = []
       this.sourceInfoArray.forEach(item => {
         if (item.authTargets.indexOf(this.targetActiveName) > -1) {
@@ -143,43 +197,43 @@ export default {
       return tabs
     }
   },
-  created () {
+  created() {
     this.targetActiveName = this.targetInfoArray[0].authType
     this.sourceActiveName = this.sourceInfoArray[0].authType
   },
 
   methods: {
-    executeAxios (param) {
+    executeAxios(param) {
       this.$emit('execute-axios', param)
     },
-    handleClick (tab, event) {
+    handleClick(tab, event) {
     },
-    showSourceSearchWidget () {
+    showSourceSearchWidget() {
       this.showSourceSearchInput = true
     },
-    closeSourceSearchWidget () {
+    closeSourceSearchWidget() {
       this.sourceFilterText = ''
       this.showSourceSearchInput = false
     },
-    showTargetSearchWidget () {
+    showTargetSearchWidget() {
       this.showTargetSearchInput = true
     },
-    closeTargetSearchWidget () {
+    closeTargetSearchWidget() {
       this.targetFilterText = ''
       this.showTargetSearchInput = false
     },
-    save () {
+    save() {
       this.$refs[this.activeName].save()
       this.$emit('close-grant', 0)
     },
-    cancel () {
+    cancel() {
       this.$refs[this.activeName].cancel()
       this.$emit('close-grant', 0)
     },
-    authNodeClick (val) {
+    authNodeClick(val) {
       this.authCondition = val
     },
-    clickAuth (auth) {
+    clickAuth(auth) {
     }
   }
 }
diff --git a/frontend/src/views/dataset/data/components/LazyTree.vue b/frontend/src/views/dataset/data/components/LazyTree.vue
index f507785c9e..42c6a0df6f 100644
--- a/frontend/src/views/dataset/data/components/LazyTree.vue
+++ b/frontend/src/views/dataset/data/components/LazyTree.vue
@@ -1,8 +1,18 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col v-loading="loading" class="tree-main">
-    <el-row v-if="showExtent" class="tree-head">
+  <el-col
+    v-loading="loading"
+    class="tree-main"
+  >
+    <el-row
+      v-if="showExtent"
+      class="tree-head"
+    >
       <span style="float: left;padding-left: 10px">{{ dataInfo.head }}</span>
-      <span v-for="auth in defaultAuthDetails" :key="auth.privilegeName" class="auth-span">
+      <span
+        v-for="auth in defaultAuthDetails"
+        :key="auth.privilegeName"
+        class="auth-span"
+      >
         {{ auth.privilegeName }}
       </span>
     </el-row>
@@ -17,24 +27,53 @@
         lazy
         @node-click="nodeClick"
       >
-        <span slot-scope="{ node, data }" class="custom-tree-node">
+        <span
+          slot-scope="{ data }"
+          class="custom-tree-node"
+        >
           <span>
-            <span style="margin-left: 6px" v-html="data.name" />
+            <span
+              style="margin-left: 6px"
+              v-html="data.name"
+            />
           </span>
-          <span v-if="showExtent" @click.stop>
+          <span
+            v-if="showExtent"
+            @click.stop
+          >
             <div v-if="authDetails[data.id]">
-              <span v-for="auth in authDetails[data.id]" :key="auth.privilegeType" class="auth-span">
+              <span
+                v-for="auth in authDetails[data.id]"
+                :key="auth.privilegeType"
+                class="auth-span"
+              >
                 <!-- 1-{{ auth.privilegeType }}-{{ auth.privilegeValue }}-->
-                <a href="javascript:;" @click="clickAuth(data.id,auth)">
-                  <svg-icon style="width: 25px;height: 25px" :icon-class="auth.privilegeValue===1?'lock_open':'lock_closed'" />
+                <a
+                  href="javascript:;"
+                  @click="clickAuth(data.id,auth)"
+                >
+                  <svg-icon
+                    style="width: 25px;height: 25px"
+                    :icon-class="auth.privilegeValue===1?'lock_open':'lock_closed'"
+                  />
                 </a>
               </span>
             </div>
             <div v-else>
-              <span v-for="auth in defaultAuthDetails" :key="auth.privilegeType" class="auth-span">
+              <span
+                v-for="auth in defaultAuthDetails"
+                :key="auth.privilegeType"
+                class="auth-span"
+              >
                 <!--2-{{ auth.privilegeType }}-{{ auth.privilegeValue }}-->
-                <a href="javascript:;" @click="clickAuth(data.id,auth)">
-                  <svg-icon style="width: 25px;height: 25px" :icon-class="auth.privilegeValue===1?'lock_open':'lock_closed'" />
+                <a
+                  href="javascript:;"
+                  @click="clickAuth(data.id,auth)"
+                >
+                  <svg-icon
+                    style="width: 25px;height: 25px"
+                    :icon-class="auth.privilegeValue===1?'lock_open':'lock_closed'"
+                  />
                 </a>
               </span>
             </div></span>
@@ -72,7 +111,7 @@ export default {
     defaultProps: {
       type: Object,
       required: false,
-      default: function () {
+      default: function() {
         return {
           children: 'children',
           label: 'name',
@@ -85,7 +124,7 @@ export default {
     showExtent: Boolean,
     highlightCurrent: Boolean
   },
-  data () {
+  data() {
     return {
       loading: false,
       treeData: [],
@@ -105,7 +144,7 @@ export default {
   computed: {
   },
   watch: {
-    filterText (val) {
+    filterText(val) {
       this.expandedKey = []
       if (val && val.length > 0) {
         this.searchStatus = true
@@ -118,25 +157,25 @@ export default {
       }
     },
     authCondition: {
-      handler (newVal, oldVla) {
+      handler(newVal, oldVla) {
         this.loadAuth()
       },
       deep: true
     },
     activeName: {
-      handler (newVal, oldVla) {
+      handler(newVal, oldVla) {
         this.loadAuth()
       },
       deep: true
     },
     attachActiveName: {
-      handler (newVal, oldVla) {
+      handler(newVal, oldVla) {
         this.authDetails = {}
       },
       deep: true
     }
   },
-  created () {
+  created() {
     // 初始化授权模板
     if (this.showExtent) {
       this.executeAxios('/plugin/auth/authDetailsModel/' + this.dataInfo.authType, 'get', {}, res => {
@@ -149,7 +188,7 @@ export default {
     }
   },
   methods: {
-    executeAxios (url, type, data, callBack) {
+    executeAxios(url, type, data, callBack) {
       const param = {
         url: url,
         type: type,
@@ -169,7 +208,7 @@ export default {
       //   })
       // }
     },
-    loadAuth () {
+    loadAuth() {
       if (this.authCondition && this.showExtent) {
         let authQueryCondition = {}
         if (this.dataInfo.direction === 'source') {
@@ -193,7 +232,7 @@ export default {
         // })
       }
     },
-    loadNodes (node, resolve) {
+    loadNodes(node, resolve) {
       if (!this.searchStatus) {
         if (node.level === 0) {
           const queryCondition = {
@@ -226,7 +265,7 @@ export default {
         resolve(node.data.children)
       }
     },
-    filterNode (index) {
+    filterNode(index) {
       this.timeMachine = setTimeout(() => {
         if (index === this.changeIndex) {
           const queryCondition = {
@@ -252,14 +291,14 @@ export default {
         this.destroyTimeMachine()
       }, 1500)
     },
-    nodeClick (data, node) {
+    nodeClick(data, node) {
       this.$emit('nodeClick', { id: data.id, type: this.dataInfo.authType })
     },
-    destroyTimeMachine () {
+    destroyTimeMachine() {
       this.timeMachine && clearTimeout(this.timeMachine)
       this.timeMachine = null
     },
-    buildTree (arrs) {
+    buildTree(arrs) {
       const idMapping = arrs.reduce((acc, el, i) => {
         acc[el[this.defaultProps.id]] = i
         return acc
@@ -284,7 +323,7 @@ export default {
       return roots
     },
     // 权限修改
-    clickAuth (dataId, auth) {
+    clickAuth(dataId, auth) {
       let authChangeCondition = {}
       if (this.dataInfo.direction === 'source') { // 当前为授权数据
         authChangeCondition = {
@@ -312,7 +351,7 @@ export default {
       })
     },
     // 高亮显示搜索内容
-    highlights (data) {
+    highlights(data) {
       if (data && this.filterText && this.filterText.length > 0) {
         const replaceReg = new RegExp(this.filterText, 'g')// 匹配关键字正则
         const replaceString = '<span style="color: #faaa39">' + this.filterText + '</span>' // 高亮替换v-html值
diff --git a/frontend/src/views/dataset/data/noSelect.vue b/frontend/src/views/dataset/data/noSelect.vue
index 5f7233d8c1..45e945e501 100644
--- a/frontend/src/views/dataset/data/noSelect.vue
+++ b/frontend/src/views/dataset/data/noSelect.vue
@@ -5,7 +5,7 @@
       :image-size="125"
       :image="errImg"
       :description="$t('deDataset.on_the_left')"
-    ></el-empty>
+    />
   </el-col>
 </template>
 
diff --git a/frontend/src/views/dataset/form.vue b/frontend/src/views/dataset/form.vue
index a5daa1dde1..c09fbe78f2 100644
--- a/frontend/src/views/dataset/form.vue
+++ b/frontend/src/views/dataset/form.vue
@@ -2,44 +2,56 @@
   <div class="de-dataset-form">
     <div class="top">
       <span class="name">
-        <i @click="logOutTips" class="el-icon-arrow-left"></i>
+        <i
+          class="el-icon-arrow-left"
+          @click="logOutTips"
+        />
         <svg-icon
           style="margin: 0 9.5px 0 16.2px"
           :icon-class="`de-${datasetType}-new`"
         />
         <template v-if="showInput">
-          <el-input @blur="nameBlur" v-model="table.name"></el-input>
-          <div v-if="nameExsit" style="left: 55px" class="el-form-item__error">
+          <el-input
+            v-model="table.name"
+            @blur="nameBlur"
+          />
+          <div
+            v-if="nameExsit"
+            style="left: 55px"
+            class="el-form-item__error"
+          >
             {{ $t('deDataset.already_exists') }}
           </div>
         </template>
         <span
-          :class="[{ 'show-point': ['sql', 'union'].includes(datasetType) }]"
           v-else
+          :class="[{ 'show-point': ['sql', 'union'].includes(datasetType) }]"
           @click="handleClick"
-          >{{ datasetName }}</span
-        >
+        >{{ datasetName }}</span>
       </span>
       <span class="oprate">
         <span
-          class="table-num"
           v-if="['db', 'excel', 'api'].includes(datasetType)"
-          >{{ $t('deDataset.selected') }} {{ tableNum }}
-          {{ ['excel'].includes(datasetType) ? $t('deDataset.table') : '项' }}</span
-        >
-        <deBtn :disabled="['db', 'excel', 'api'].includes(datasetType) && !tableNum" @click="datasetSave" type="primary">{{
+          class="table-num"
+        >{{ $t('deDataset.selected') }} {{ tableNum }}
+          {{ ['excel'].includes(datasetType) ? $t('deDataset.table') : '项' }}</span>
+        <deBtn
+          :disabled="['db', 'excel', 'api'].includes(datasetType) && !tableNum"
+          type="primary"
+          @click="datasetSave"
+        >{{
           $t('commons.save')
         }}</deBtn>
       </span>
     </div>
     <div class="container">
       <component
-        @setTableNum="(val) => (tableNum = val)"
-        :param="table"
         :is="component"
         ref="addDataset"
-        :originName="originName"
-        :nameList="nameList"
+        :param="table"
+        :origin-name="originName"
+        :name-list="nameList"
+        @setTableNum="(val) => (tableNum = val)"
       />
     </div>
   </div>
@@ -74,7 +86,7 @@ export default {
       nameList: [],
       datasetForm: {
         id: '',
-        name: '',
+        name: ''
       },
       datasetFormRules: {
         name: [
@@ -95,7 +107,7 @@ export default {
             required: true,
             message: this.$t('fu.search_bar.please_select'),
             trigger: 'blur'
-          },
+          }
         ]
       }
     }
@@ -115,13 +127,13 @@ export default {
   created() {
     const fromGroup = this.$route.params.fromGroup
     const routeInfo = fromGroup ? this.$route.params : this.$route.query
-    const { datasetType, sceneId, id, editType, name } =  routeInfo
+    const { datasetType, sceneId, id, editType, name: label } = routeInfo
     this.datasetType = datasetType
     this.editType = editType
     if (id) {
       this.initTable(id)
     } else {
-      const name = name || this.$t('commons.create') + this.$t(datasetTypeMap[datasetType]) + this.$t('auth.datasetAuth')
+      const name = label || this.$t('commons.create') + this.$t(datasetTypeMap[datasetType]) + this.$t('auth.datasetAuth')
       this.table = {
         name,
         id: sceneId
@@ -137,9 +149,9 @@ export default {
     logOutTips() {
       const options = {
         title: 'role.tips',
-          confirmButtonText: this.$t('commons.confirm'),
+        confirmButtonText: this.$t('commons.confirm'),
         content: 'system_parameter_setting.sure_to_exit',
-          type: 'primary',
+        type: 'primary',
         cb: () => {
           this.back()
         }
diff --git a/frontend/src/views/dataset/group/CreatDsGroup.vue b/frontend/src/views/dataset/group/CreatDsGroup.vue
index e363deb1aa..1047fd269a 100644
--- a/frontend/src/views/dataset/group/CreatDsGroup.vue
+++ b/frontend/src/views/dataset/group/CreatDsGroup.vue
@@ -1,10 +1,10 @@
 <template>
   <el-dialog
+    v-loading="loading"
     :title="dialogTitle"
     class="de-dialog-form"
     :visible.sync="createDataset"
     width="600px"
-    v-loading="loading"
     :before-close="resetForm"
   >
     <el-form
@@ -13,10 +13,17 @@
       :model="datasetForm"
       :rules="datasetFormRules"
     >
-      <el-form-item v-if="datasetFormRules.name" :label="$t('dataset.name')" prop="name">
+      <el-form-item
+        v-if="datasetFormRules.name"
+        :label="$t('dataset.name')"
+        prop="name"
+      >
         <el-input v-model="datasetForm.name" />
       </el-form-item>
-      <el-form-item :label="$t('deDataset.folder')" prop="id">
+      <el-form-item
+        :label="$t('deDataset.folder')"
+        prop="id"
+      >
         <el-popover
           placement="bottom"
           popper-class="user-popper dataset-filed"
@@ -24,8 +31,8 @@
           trigger="click"
         >
           <el-tree
-            :data="tData"
             ref="tree"
+            :data="tData"
             node-key="id"
             class="de-tree"
             :expand-on-click-node="false"
@@ -33,9 +40,12 @@
             :filter-node-method="filterNode"
             @node-click="nodeClick"
           >
-            <span slot-scope="{ data }" class="custom-tree-node-dataset">
+            <span
+              slot-scope="{ data }"
+              class="custom-tree-node-dataset"
+            >
               <span v-if="data.type === 'group'">
-                <svg-icon icon-class="scene"/>
+                <svg-icon icon-class="scene" />
               </span>
               <span
                 style="
@@ -45,13 +55,12 @@
                   text-overflow: ellipsis;
                 "
                 :title="data.name"
-                >{{ data.name }}</span
-              >
+              >{{ data.name }}</span>
             </span>
           </el-tree>
           <el-select
-            v-model="datasetForm.id"
             slot="reference"
+            v-model="datasetForm.id"
             filterable
             popper-class="tree-select-dataset"
             style="width: 100%"
@@ -68,10 +77,18 @@
         </el-popover>
       </el-form-item>
     </el-form>
-    <div slot="footer" class="dialog-footer">
-      <deBtn secondary @click="resetForm">{{ $t('dataset.cancel') }}</deBtn>
-      <deBtn type="primary" @click="saveDataset"
-        >{{ $t('dataset.confirm') }}
+    <div
+      slot="footer"
+      class="dialog-footer"
+    >
+      <deBtn
+        secondary
+        @click="resetForm"
+      >{{ $t('dataset.cancel') }}</deBtn>
+      <deBtn
+        type="primary"
+        @click="saveDataset"
+      >{{ $t('dataset.confirm') }}
       </deBtn>
     </div>
   </el-dialog>
@@ -227,4 +244,4 @@ export default {
 .tree-select-dataset {
   display: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 03edd709be..c9cde4c2e3 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -1,8 +1,11 @@
 <template>
-  <el-col class="tree-style de-dataset-search">
+  <el-col class="de-dataset-search">
     <!-- group -->
     <el-col>
-      <div style="margin: 6px 0 16px 0" class="title-css">
+      <div
+        style="margin: 6px 0 16px 0"
+        class="title-css"
+      >
         <span class="title-text">
           {{ $t('dataset.datalist') }}
         </span>
@@ -12,37 +15,61 @@
           @command="(type) => clickAddData(type)"
         >
           <span class="el-dropdown-link">
-            <i class="el-icon-plus" @click.stop />
+            <i
+              class="el-icon-plus"
+              @click.stop
+            />
           </span>
           <el-dropdown-menu
             slot="dropdown"
             class="de-dataset-dropdown de-card-dropdown"
           >
             <el-dropdown-item command="db">
-              <svg-icon icon-class="ds-db" class="ds-icon-db" />
+              <svg-icon
+                icon-class="ds-db"
+                class="ds-icon-db"
+              />
               {{ $t('dataset.db_data') }}
             </el-dropdown-item>
             <el-dropdown-item command="sql">
-              <svg-icon icon-class="ds-sql" class="ds-icon-sql" />
+              <svg-icon
+                icon-class="ds-sql"
+                class="ds-icon-sql"
+              />
               {{ $t('dataset.sql_data') }}
             </el-dropdown-item>
             <el-dropdown-item
               command="excel"
               :disabled="!kettleRunning && engineMode !== 'simple'"
             >
-              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
+              <svg-icon
+                icon-class="ds-excel"
+                class="ds-icon-excel"
+              />
               {{ $t('dataset.excel_data') }}
             </el-dropdown-item>
             <el-dropdown-item command="union">
-              <svg-icon icon-class="ds-union" class="ds-icon-union" />
+              <svg-icon
+                icon-class="ds-union"
+                class="ds-icon-union"
+              />
               {{ $t('dataset.union_data') }}
             </el-dropdown-item>
             <el-dropdown-item command="api">
-              <svg-icon icon-class="ds-api" class="ds-icon-api" />
+              <svg-icon
+                icon-class="ds-api"
+                class="ds-icon-api"
+              />
               {{ $t('dataset.api_data') }}
             </el-dropdown-item>
-            <el-dropdown-item class="de-top-border" command="group">
-              <svg-icon icon-class="scene" class="ds-icon-db" />
+            <el-dropdown-item
+              class="de-top-border"
+              command="group"
+            >
+              <svg-icon
+                icon-class="scene"
+                class="ds-icon-db"
+              />
               {{ $t('deDataset.new_folder') }}
             </el-dropdown-item>
           </el-dropdown-menu>
@@ -62,16 +89,28 @@
             v-model="searchType"
             :placeholder="searchMap[searchType]"
           >
-            <el-option :label="$t('commons.all')" value="all" />
-            <el-option :label="$t('commons.folder')" value="folder" />
+            <el-option
+              :label="$t('commons.all')"
+              value="all"
+            />
+            <el-option
+              :label="$t('commons.folder')"
+              value="folder"
+            />
           </el-select>
         </el-input>
       </el-row>
       <el-col class="custom-tree-container de-tree">
         <div class="block">
-          <div v-if="!tData.length && !treeLoading" class="no-tdata">
+          <div
+            v-if="!tData.length && !treeLoading"
+            class="no-tdata"
+          >
             {{ $t('deDataset.no_dataset_click') }}
-            <span class="no-tdata-new" @click="() => clickAdd()">{{
+            <span
+              class="no-tdata-new"
+              @click="() => clickAdd()"
+            >{{
               $t('deDataset.create')
             }}</span>
           </div>
@@ -111,50 +150,80 @@
                 v-if="hasDataPermission('manage', data.privileges)"
                 class="child"
               >
-                <span v-if="data.modelInnerType === 'group'" @click.stop>
+                <span
+                  v-if="data.modelInnerType === 'group'"
+                  @click.stop
+                >
                   <el-dropdown
                     size="small"
                     placement="bottom-start"
                     @command="(type) => clickAddData(type, data)"
                   >
                     <span class="el-dropdown-link">
-                      <i class="el-icon-plus" @click.stop />
+                      <i
+                        class="el-icon-plus"
+                        @click.stop
+                      />
                     </span>
                     <el-dropdown-menu
                       slot="dropdown"
                       class="de-dataset-dropdown de-card-dropdown"
                     >
                       <el-dropdown-item command="db">
-                        <svg-icon icon-class="ds-db" class="ds-icon-db" />
+                        <svg-icon
+                          icon-class="ds-db"
+                          class="ds-icon-db"
+                        />
                         {{ $t('dataset.db_data') }}
                       </el-dropdown-item>
                       <el-dropdown-item command="sql">
-                        <svg-icon icon-class="ds-sql" class="ds-icon-sql" />
+                        <svg-icon
+                          icon-class="ds-sql"
+                          class="ds-icon-sql"
+                        />
                         {{ $t('dataset.sql_data') }}
                       </el-dropdown-item>
                       <el-dropdown-item
                         command="excel"
                         :disabled="!kettleRunning && engineMode !== 'simple'"
                       >
-                        <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
+                        <svg-icon
+                          icon-class="ds-excel"
+                          class="ds-icon-excel"
+                        />
                         {{ $t('dataset.excel_data') }}
                       </el-dropdown-item>
                       <el-dropdown-item command="union">
-                        <svg-icon icon-class="ds-union" class="ds-icon-union" />
+                        <svg-icon
+                          icon-class="ds-union"
+                          class="ds-icon-union"
+                        />
                         {{ $t('dataset.union_data') }}
                       </el-dropdown-item>
                       <el-dropdown-item command="api">
-                        <svg-icon icon-class="ds-api" class="ds-icon-api" />
+                        <svg-icon
+                          icon-class="ds-api"
+                          class="ds-icon-api"
+                        />
                         {{ $t('dataset.api_data') }}
                       </el-dropdown-item>
-                      <el-dropdown-item class="de-top-border" command="group">
-                        <svg-icon icon-class="scene" class="ds-icon-db" />
+                      <el-dropdown-item
+                        class="de-top-border"
+                        command="group"
+                      >
+                        <svg-icon
+                          icon-class="scene"
+                          class="ds-icon-db"
+                        />
                         {{ $t('deDataset.new_folder') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
                 </span>
-                <span style="margin-left: 12px" @click.stop>
+                <span
+                  style="margin-left: 12px"
+                  @click.stop
+                >
                   <el-dropdown
                     trigger="click"
                     size="small"
@@ -162,9 +231,16 @@
                     @command="(type) => clickMore(type, data, node)"
                   >
                     <span class="el-dropdown-link">
-                      <el-button icon="el-icon-more" type="text" size="small" />
+                      <el-button
+                        icon="el-icon-more"
+                        type="text"
+                        size="small"
+                      />
                     </span>
-                    <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
+                    <el-dropdown-menu
+                      slot="dropdown"
+                      class="de-card-dropdown"
+                    >
                       <el-dropdown-item command="rename">
                         <svg-icon icon-class="de-ds-rename" />
                         {{ $t('dataset.rename') }}
@@ -255,7 +331,10 @@
                 v-if="hasDataPermission('manage', data.privileges)"
                 class="child"
               >
-                <span style="margin-left: 12px" @click.stop>
+                <span
+                  style="margin-left: 12px"
+                  @click.stop
+                >
                   <el-dropdown
                     trigger="click"
                     size="small"
@@ -263,9 +342,16 @@
                     @command="(type) => clickMore(type, data, node)"
                   >
                     <span class="el-dropdown-link">
-                      <el-button icon="el-icon-more" type="text" size="small" />
+                      <el-button
+                        icon="el-icon-more"
+                        type="text"
+                        size="small"
+                      />
                     </span>
-                    <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
+                    <el-dropdown-menu
+                      slot="dropdown"
+                      class="de-card-dropdown"
+                    >
                       <el-dropdown-item command="editTable">
                         <svg-icon icon-class="de-ds-rename" />
                         {{ $t('dataset.rename') }}
@@ -302,12 +388,24 @@
           @submit.native.prevent
           @keypress.enter.native="saveGroup(groupForm)"
         >
-          <el-form-item :label="$t('deDataset.folder_name')" prop="name">
-            <el-input v-model.trim="groupForm.name" placeholder="请输入文件夹名称" />
+          <el-form-item
+            :label="$t('deDataset.folder_name')"
+            prop="name"
+          >
+            <el-input
+              v-model.trim="groupForm.name"
+              placeholder="请输入文件夹名称"
+            />
           </el-form-item>
         </el-form>
-        <div slot="footer" class="dialog-footer">
-          <deBtn secondary @click="close()">{{ $t('dataset.cancel') }}</deBtn>
+        <div
+          slot="footer"
+          class="dialog-footer"
+        >
+          <deBtn
+            secondary
+            @click="close()"
+          >{{ $t('dataset.cancel') }}</deBtn>
           <deBtn
             type="primary"
             @click="saveGroup(groupForm)"
@@ -331,12 +429,21 @@
         @submit.native.prevent
         @keypress.enter.native="saveTable(tableForm)"
       >
-        <el-form-item :label="$t('dataset.name')" prop="name">
+        <el-form-item
+          :label="$t('dataset.name')"
+          prop="name"
+        >
           <el-input v-model="tableForm.name" />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <deBtn secondary @click="closeTable()">{{
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <deBtn
+          secondary
+          @click="closeTable()"
+        >{{
           $t('dataset.cancel')
         }}</deBtn>
         <deBtn
@@ -356,7 +463,10 @@
     >
       <template slot="title">
         {{ $t('dataset.m1') }}
-        <span :title="moveDialogTitle" class="text-overflow">{{
+        <span
+          :title="moveDialogTitle"
+          class="text-overflow"
+        >{{
           moveDialogTitle
         }}</span>
         {{ $t('dataset.m2') }}
@@ -367,7 +477,10 @@
         @targetGroup="targetGroup"
       />
       <div class="de-foot">
-        <deBtn secondary @click="closeMoveGroup()">{{
+        <deBtn
+          secondary
+          @click="closeMoveGroup()"
+        >{{
           $t('dataset.cancel')
         }}</deBtn>
         <deBtn
@@ -388,14 +501,23 @@
     >
       <template slot="title">
         {{ $t('dataset.m1') }}
-        <span :title="moveDialogTitle" class="text-overflow">{{
+        <span
+          :title="moveDialogTitle"
+          class="text-overflow"
+        >{{
           moveDialogTitle
         }}</span>
         {{ $t('dataset.m2') }}
       </template>
-      <group-move-selector :item="groupForm" @targetGroup="targetDs" />
+      <group-move-selector
+        :item="groupForm"
+        @targetGroup="targetDs"
+      />
       <div class="de-foot">
-        <deBtn secondary @click="closeMoveDs()">{{
+        <deBtn
+          secondary
+          @click="closeMoveDs()"
+        >{{
           $t('dataset.cancel')
         }}</deBtn>
         <deBtn
@@ -1119,14 +1241,12 @@ export default {
   align-items: center;
   width: 100%;
 }
-.tree-style {
-  padding: 10px 15px;
-  height: 100%;
-  overflow-y: auto;
-}
 </style>
 <style lang="scss">
 .de-dataset-search {
+  padding: 10px 24px;
+  height: 100%;
+  overflow-y: auto;
   .main-area-input {
     .el-input-group__append {
       width: 70px;
diff --git a/frontend/src/views/dataset/group/GroupMoveSelector.vue b/frontend/src/views/dataset/group/GroupMoveSelector.vue
index b839fad807..57d4e247d9 100644
--- a/frontend/src/views/dataset/group/GroupMoveSelector.vue
+++ b/frontend/src/views/dataset/group/GroupMoveSelector.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="ds-move-tree">
     <el-input
+      v-model="filterText"
       :placeholder="$t('deDataset.search_by_name')"
       clearable
       style="margin-bottom: 16px"
       size="small"
-      v-model="filterText"
     />
     <div class="tree">
       <el-tree
-        :data="tData"
         ref="tree"
+        :data="tData"
         node-key="id"
         class="de-tree"
         :expand-on-click-node="false"
@@ -18,10 +18,13 @@
         :filter-node-method="filterNode"
         @node-click="nodeClick"
       >
-        <span slot-scope="{ node, data }" :class="treeClass(data, node)">
+        <span
+          slot-scope="{ node, data }"
+          :class="treeClass(data, node)"
+        >
           <span style="display: flex; flex: 1; width: 0">
             <span v-if="data.type === 'group'">
-              <svg-icon icon-class="scene"/>
+              <svg-icon icon-class="scene" />
             </span>
             <span
               style="
@@ -30,9 +33,9 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
               "
-              v-html="highlights(data.name)"
               :title="data.name"
-            ></span>
+              v-html="highlights(data.name)"
+            />
           </span>
         </span>
       </el-tree>
@@ -72,7 +75,7 @@ export default {
     }
   },
   watch: {
-    item: function () {
+    item: function() {
       this.tree(this.groupForm)
     },
     filterText(val) {
diff --git a/frontend/src/views/dataset/group/options.js b/frontend/src/views/dataset/group/options.js
index 659e2c352d..853ed2bc3a 100644
--- a/frontend/src/views/dataset/group/options.js
+++ b/frontend/src/views/dataset/group/options.js
@@ -1,7 +1,7 @@
 export const datasetTypeMap = {
-    db: 'deDataset.database',
-    sql: 'SQL',
-    excel: 'EXCEL',
-    union: 'dataset.union',
-    api: 'API',
-}
\ No newline at end of file
+  db: 'deDataset.database',
+  sql: 'SQL',
+  excel: 'EXCEL',
+  union: 'dataset.union',
+  api: 'API'
+}
diff --git a/frontend/src/views/dataset/index.vue b/frontend/src/views/dataset/index.vue
index 789b208834..cede6394d4 100644
--- a/frontend/src/views/dataset/index.vue
+++ b/frontend/src/views/dataset/index.vue
@@ -3,17 +3,21 @@
     v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
   >
     <de-aside-container type="dataset">
-      <group :currentNodeId="currentNodeId" :save-status="saveStatus" @switchComponent="switchComponent" />
+      <group
+        :current-node-id="currentNodeId"
+        :save-status="saveStatus"
+        @switchComponent="switchComponent"
+      />
     </de-aside-container>
-      <de-main-container>
-        <component
-          :is="component"
-          ref="dynamic_component"
-          :param="param"
-          @switchComponent="switchComponent"
-          @saveSuccess="saveSuccess"
-        />
-      </de-main-container>
+    <de-main-container>
+      <component
+        :is="component"
+        ref="dynamic_component"
+        :param="param"
+        @switchComponent="switchComponent"
+        @saveSuccess="saveSuccess"
+      />
+    </de-main-container>
   </de-container>
 </template>
 
@@ -72,7 +76,6 @@ export default {
         case 'ViewTable':
           this.component = ViewTable
           break
-          break
         case 'FieldEdit':
           this.component = FieldEdit
           break
diff --git a/frontend/src/views/form/index.vue b/frontend/src/views/form/index.vue
index f4d66d3bdb..7a05e936f6 100644
--- a/frontend/src/views/form/index.vue
+++ b/frontend/src/views/form/index.vue
@@ -1,22 +1,48 @@
 <template>
   <div class="app-container">
-    <el-form ref="form" :model="form" label-width="120px">
+    <el-form
+      ref="form"
+      :model="form"
+      label-width="120px"
+    >
       <el-form-item label="Activity name">
         <el-input v-model="form.name" />
       </el-form-item>
       <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
+        <el-select
+          v-model="form.region"
+          placeholder="please select your zone"
+        >
+          <el-option
+            label="Zone one"
+            value="shanghai"
+          />
+          <el-option
+            label="Zone two"
+            value="beijing"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="Activity time">
         <el-col :span="11">
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
+          <el-date-picker
+            v-model="form.date1"
+            type="date"
+            placeholder="Pick a date"
+            style="width: 100%;"
+          />
         </el-col>
-        <el-col :span="2" class="line">-</el-col>
+        <el-col
+          :span="2"
+          class="line"
+        >-</el-col>
         <el-col :span="11">
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
+          <el-time-picker
+            v-model="form.date2"
+            type="fixed-time"
+            placeholder="Pick a time"
+            style="width: 100%;"
+          />
         </el-col>
       </el-form-item>
       <el-form-item label="Instant delivery">
@@ -24,10 +50,22 @@
       </el-form-item>
       <el-form-item label="Activity type">
         <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
+          <el-checkbox
+            label="Online activities"
+            name="type"
+          />
+          <el-checkbox
+            label="Promotion activities"
+            name="type"
+          />
+          <el-checkbox
+            label="Offline activities"
+            name="type"
+          />
+          <el-checkbox
+            label="Simple brand exposure"
+            name="type"
+          />
         </el-checkbox-group>
       </el-form-item>
       <el-form-item label="Resources">
@@ -37,10 +75,16 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
+        <el-input
+          v-model="form.desc"
+          type="textarea"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
+        <el-button
+          type="primary"
+          @click="onSubmit"
+        >Create</el-button>
         <el-button @click="onCancel">Cancel</el-button>
       </el-form-item>
     </el-form>
diff --git a/frontend/src/views/link/generate/index.vue b/frontend/src/views/link/generate/index.vue
index 864c26b205..0bdc5ae536 100644
--- a/frontend/src/views/link/generate/index.vue
+++ b/frontend/src/views/link/generate/index.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
-    <el-form ref="linkForm" inline :model="form" size="small" :rules="rules" label-width="80px">
+    <el-form
+      ref="linkForm"
+      inline
+      :model="form"
+      size="small"
+      :rules="rules"
+      label-width="80px"
+    >
 
       <el-form-item :label="$t('panel.link_share')">
         <el-switch
@@ -12,13 +19,28 @@
         />
       </el-form-item>
       <el-form-item label=" ">
-        <el-link class="de-link" style="width: 370px;" disabled>{{ $t('panel.link_share_desc') }}</el-link>
+        <el-link
+          class="de-link"
+          style="width: 370px;"
+          disabled
+        >{{ $t('panel.link_share_desc') }}</el-link>
       </el-form-item>
-      <el-form-item v-if="valid" :label="$t('panel.link')">
-        <el-input v-model.number="form.uri" disabled style="width: 370px;" />
+      <el-form-item
+        v-if="valid"
+        :label="$t('panel.link')"
+      >
+        <el-input
+          v-model.number="form.uri"
+          disabled
+          style="width: 370px;"
+        />
       </el-form-item>
 
-      <el-form-item v-if="valid" :label="$t('panel.over_time')" prop="overTime">
+      <el-form-item
+        v-if="valid"
+        :label="$t('panel.over_time')"
+        prop="overTime"
+      >
         <el-date-picker
           v-model="form.overTime"
           type="datetime"
@@ -32,16 +54,35 @@
         />
       </el-form-item>
 
-      <el-form-item v-if="valid" label=" ">
-        <el-checkbox v-model="form.enablePwd" @change="resetEnablePwd">{{ $t('panel.passwd_protect') }} </el-checkbox>
+      <el-form-item
+        v-if="valid"
+        label=" "
+      >
+        <el-checkbox
+          v-model="form.enablePwd"
+          @change="resetEnablePwd"
+        >{{ $t('panel.passwd_protect') }} </el-checkbox>
 
-        <span v-if="form.enablePwd" class="de-span">{{ form.pwd }}</span>
-        <span v-if="form.enablePwd" class="de-span" @click="resetPwd">
-          <el-link :underline="false" type="primary">{{ $t('commons.reset') }}</el-link>
+        <span
+          v-if="form.enablePwd"
+          class="de-span"
+        >{{ form.pwd }}</span>
+        <span
+          v-if="form.enablePwd"
+          class="de-span"
+          @click="resetPwd"
+        >
+          <el-link
+            :underline="false"
+            type="primary"
+          >{{ $t('commons.reset') }}</el-link>
         </span>
       </el-form-item>
 
-      <div v-if="valid" class="auth-root-class">
+      <div
+        v-if="valid"
+        class="auth-root-class"
+      >
         <span slot="footer">
 
           <el-button
diff --git a/frontend/src/views/link/index.vue b/frontend/src/views/link/index.vue
index 199b9dd857..88b55dff3d 100644
--- a/frontend/src/views/link/index.vue
+++ b/frontend/src/views/link/index.vue
@@ -1,9 +1,25 @@
 <template>
   <div style="height: 100%;">
-    <link-error v-if="showIndex===0" :resource-id="resourceId" />
-    <link-pwd v-if="showIndex===1" :resource-id="resourceId" :user="userId" @fresh-token="refreshToken" />
-    <link-view v-if="showIndex===2" :resource-id="resourceId" :user="userId"/>
-    <link-expire v-if="showIndex===3" :resource-id="resourceId" :user="userId"/>
+    <link-error
+      v-if="showIndex===0"
+      :resource-id="resourceId"
+    />
+    <link-pwd
+      v-if="showIndex===1"
+      :resource-id="resourceId"
+      :user="userId"
+      @fresh-token="refreshToken"
+    />
+    <link-view
+      v-if="showIndex===2"
+      :resource-id="resourceId"
+      :user="userId"
+    />
+    <link-expire
+      v-if="showIndex===3"
+      :resource-id="resourceId"
+      :user="userId"
+    />
   </div>
 </template>
 <script>
@@ -47,9 +63,9 @@ export default {
         this.showError()
         return
       }
-      let params = this.user ? { link: encodeURIComponent(this.link), user: encodeURIComponent(this.user)} : { link: encodeURIComponent(this.link)};
+      const params = this.user ? { link: encodeURIComponent(this.link), user: encodeURIComponent(this.user) } : { link: encodeURIComponent(this.link) }
       validate(params).then(res => {
-        const { resourceId, valid, enablePwd, passPwd, expire, userId} = res.data
+        const { resourceId, valid, enablePwd, passPwd, expire, userId } = res.data
         this.resourceId = resourceId
         this.userId = userId
         // 如果链接无效 直接显示无效页面
diff --git a/frontend/src/views/link/pwd/index.vue b/frontend/src/views/link/pwd/index.vue
index 41a060a4ac..6645518a46 100644
--- a/frontend/src/views/link/pwd/index.vue
+++ b/frontend/src/views/link/pwd/index.vue
@@ -13,9 +13,21 @@
         <div class="input-layout">
           <div class="input-main">
             <div class="div-input">
-              <el-form ref="pwdForm" :model="form" :rules="rule" size="small" @submit.native.prevent>
+              <el-form
+                ref="pwdForm"
+                :model="form"
+                :rules="rule"
+                size="small"
+                @submit.native.prevent
+              >
                 <el-form-item prop="password">
-                  <el-input v-model="form.password" maxlength="4" show-password class="real-input" :placeholder="$t('pblink.input_placeholder')" />
+                  <el-input
+                    v-model="form.password"
+                    maxlength="4"
+                    show-password
+                    class="real-input"
+                    :placeholder="$t('pblink.input_placeholder')"
+                  />
                 </el-form-item>
               </el-form>
             </div>
@@ -27,7 +39,11 @@
 
         <div class="auth-root-class">
           <span slot="footer">
-            <el-button size="mini" type="primary" @click="refresh">{{ $t('pblink.sure_bt') }}</el-button>
+            <el-button
+              size="mini"
+              type="primary"
+              @click="refresh"
+            >{{ $t('pblink.sure_bt') }}</el-button>
           </span>
         </div>
       </div>
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 5328240c46..bac3dee230 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -1,36 +1,89 @@
 <template>
   <div>
 
-    <div v-show="contentShow" class="login-background">
+    <div
+      v-show="contentShow"
+      class="login-background"
+    >
 
       <div class="login-container">
-        <el-row v-loading="loading" type="flex">
+        <el-row
+          v-loading="loading"
+          type="flex"
+        >
           <el-col :span="12">
-            <div v-show="qrTypes.length" :class="codeShow ? 'trans-pc' : 'trans'" @click="showQr">
-              <div v-show="imgAppShow" class="imgApp" />
+            <div
+              v-show="qrTypes.length"
+              :class="codeShow ? 'trans-pc' : 'trans'"
+              @click="showQr"
+            >
+              <div
+                v-show="imgAppShow"
+                class="imgApp"
+              />
             </div>
-            <el-form v-show="!codeShow" ref="loginForm" :model="loginForm" :rules="loginRules" size="default">
+            <el-form
+              v-show="!codeShow"
+              ref="loginForm"
+              :model="loginForm"
+              :rules="loginRules"
+              size="default"
+            >
 
               <div class="login-logo">
-                <svg-icon v-if="!loginLogoUrl && axiosFinished" icon-class="DataEase" custom-class="login-logo-icon" />
-                <img v-if="loginLogoUrl && axiosFinished" :src="loginLogoUrl" alt="">
+                <svg-icon
+                  v-if="!loginLogoUrl && axiosFinished"
+                  icon-class="DataEase"
+                  custom-class="login-logo-icon"
+                />
+                <img
+                  v-if="loginLogoUrl && axiosFinished"
+                  :src="loginLogoUrl"
+                  alt=""
+                >
               </div>
-              <div v-if="uiInfo && uiInfo['ui.loginTitle'] && uiInfo['ui.loginTitle'].paramValue" class="login-welcome">
+              <div
+                v-if="uiInfo && uiInfo['ui.loginTitle'] && uiInfo['ui.loginTitle'].paramValue"
+                class="login-welcome"
+              >
                 {{ uiInfo['ui.loginTitle'].paramValue }}
               </div>
-              <div v-else class="login-welcome">
+              <div
+                v-else
+                class="login-welcome"
+              >
                 {{ $t('login.welcome') + (uiInfo && uiInfo['ui.title'] && uiInfo['ui.title'].paramValue || ' DataEase') }}
               </div>
               <div class="login-form">
                 <el-form-item v-if="radioTypes.length > 1">
-                  <el-radio-group v-if="radioTypes.length > 1" v-model="loginForm.loginType" @change="changeLoginType">
-                    <el-radio :label="0" size="mini">{{ $t('login.default_login') }}</el-radio>
-                    <el-radio v-if="loginTypes.includes(1)" :label="1" size="mini">LDAP</el-radio>
-                    <el-radio v-if="loginTypes.includes(2)" :label="2" size="mini">OIDC</el-radio>
+                  <el-radio-group
+                    v-if="radioTypes.length > 1"
+                    v-model="loginForm.loginType"
+                    @change="changeLoginType"
+                  >
+                    <el-radio
+                      :label="0"
+                      size="mini"
+                    >{{ $t('login.default_login') }}</el-radio>
+                    <el-radio
+                      v-if="loginTypes.includes(1)"
+                      :label="1"
+                      size="mini"
+                    >LDAP</el-radio>
+                    <el-radio
+                      v-if="loginTypes.includes(2)"
+                      :label="2"
+                      size="mini"
+                    >OIDC</el-radio>
                   </el-radio-group>
                 </el-form-item>
                 <el-form-item prop="username">
-                  <el-input v-model="loginForm.username" placeholder="ID" autofocus :disabled="loginTypes.includes(2) && loginForm.loginType === 2" />
+                  <el-input
+                    v-model="loginForm.username"
+                    placeholder="ID"
+                    autofocus
+                    :disabled="loginTypes.includes(2) && loginForm.loginType === 2"
+                  />
                 </el-form-item>
                 <el-form-item prop="password">
                   <el-input
@@ -46,10 +99,19 @@
                 </el-form-item>
               </div>
               <div class="login-btn">
-                <el-button type="primary" class="submit" size="default" :disabled="loginTypes.includes(2) && loginForm.loginType === 2" @click.native.prevent="handleLogin">
+                <el-button
+                  type="primary"
+                  class="submit"
+                  size="default"
+                  :disabled="loginTypes.includes(2) && loginForm.loginType === 2"
+                  @click.native.prevent="handleLogin"
+                >
                   {{ $t('commons.login') }}
                 </el-button>
-                <div v-if="uiInfo && uiInfo['ui.demo.tips'] && uiInfo['ui.demo.tips'].paramValue" class="demo-tips">
+                <div
+                  v-if="uiInfo && uiInfo['ui.demo.tips'] && uiInfo['ui.demo.tips'].paramValue"
+                  class="demo-tips"
+                >
                   {{ uiInfo['ui.demo.tips'].paramValue }}
                 </div>
               </div>
@@ -57,32 +119,80 @@
                 {{ msg }}
               </div>
             </el-form>
-            <div v-show="codeShow" class="code">
+            <div
+              v-show="codeShow"
+              class="code"
+            >
               <el-row class="code-contaniner">
-                <plugin-com v-if="loginTypes.includes(4) && codeIndex === 4" ref="WecomQr" component-name="WecomQr" />
-                <plugin-com v-if="loginTypes.includes(5) && codeIndex === 5" ref="DingtalkQr" component-name="DingtalkQr" />
-                <plugin-com v-if="loginTypes.includes(6) && codeIndex === 6" ref="LarkQr" component-name="LarkQr" />
+                <plugin-com
+                  v-if="loginTypes.includes(4) && codeIndex === 4"
+                  ref="WecomQr"
+                  component-name="WecomQr"
+                />
+                <plugin-com
+                  v-if="loginTypes.includes(5) && codeIndex === 5"
+                  ref="DingtalkQr"
+                  component-name="DingtalkQr"
+                />
+                <plugin-com
+                  v-if="loginTypes.includes(6) && codeIndex === 6"
+                  ref="LarkQr"
+                  component-name="LarkQr"
+                />
               </el-row>
 
-              <div v-if="qrTypes.length > 1" class="login-third-items">
-                <span v-if="qrTypes.includes(4)" class="login-third-item login-third-wecom" @click="switchCodeIndex(4)" />
-                <span v-if="qrTypes.includes(5)" class="login-third-item login-third-dingtalk" @click="switchCodeIndex(5)" />
-                <span v-if="qrTypes.includes(6)" class="login-third-item login-third-lark" @click="switchCodeIndex(6)" />
+              <div
+                v-if="qrTypes.length > 1"
+                class="login-third-items"
+              >
+                <span
+                  v-if="qrTypes.includes(4)"
+                  class="login-third-item login-third-wecom"
+                  @click="switchCodeIndex(4)"
+                />
+                <span
+                  v-if="qrTypes.includes(5)"
+                  class="login-third-item login-third-dingtalk"
+                  @click="switchCodeIndex(5)"
+                />
+                <span
+                  v-if="qrTypes.includes(6)"
+                  class="login-third-item login-third-lark"
+                  @click="switchCodeIndex(6)"
+                />
               </div>
 
             </div>
           </el-col>
-          <el-col v-loading="!axiosFinished" :span="12">
-            <div v-if="!loginImageUrl && axiosFinished" class="login-image" />
-            <div v-if="loginImageUrl && axiosFinished" class="login-image-de" :style="{background:'url(' + loginImageUrl + ') no-repeat', 'backgroundSize':'contain'}" />
+          <el-col
+            v-loading="!axiosFinished"
+            :span="12"
+          >
+            <div
+              v-if="!loginImageUrl && axiosFinished"
+              class="login-image"
+            />
+            <div
+              v-if="loginImageUrl && axiosFinished"
+              class="login-image-de"
+              :style="{background:'url(' + loginImageUrl + ') no-repeat', 'backgroundSize':'contain'}"
+            />
           </el-col>
         </el-row>
 
       </div>
-      <plugin-com v-if="loginTypes.includes(2) && loginForm.loginType === 2" ref="SSOComponent" component-name="SSOComponent" />
+      <plugin-com
+        v-if="loginTypes.includes(2) && loginForm.loginType === 2"
+        ref="SSOComponent"
+        component-name="SSOComponent"
+      />
 
     </div>
-    <div v-if="showFoot" class="dynamic-login-foot" v-html="footContent" />
+    <div
+      v-if="showFoot"
+      class="dynamic-login-foot"
+      v-html="footContent"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/views/msg/all.vue b/frontend/src/views/msg/all.vue
index fe53a11a30..f2f7ec46c5 100644
--- a/frontend/src/views/msg/all.vue
+++ b/frontend/src/views/msg/all.vue
@@ -1,45 +1,61 @@
 <template>
   <de-layout-content
-  :header="$t('components.message_list')"
     v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    :header="$t('components.message_list')"
   >
     <div class="organization">
-      <el-tabs v-model="tabActive" @tab-click="changeTab">
-        <el-tab-pane :label="$t('components.unread_message')" name="unread"> </el-tab-pane>
-        <el-tab-pane :label="$t('components.read_message')" name="readed"> </el-tab-pane>
-        <el-tab-pane :label="$t('components.all_messages')" name="allMsg"> </el-tab-pane>
+      <el-tabs
+        v-model="tabActive"
+        @tab-click="changeTab"
+      >
+        <el-tab-pane
+          :label="$t('components.unread_message')"
+          name="unread"
+        />
+        <el-tab-pane
+          :label="$t('components.read_message')"
+          name="readed"
+        />
+        <el-tab-pane
+          :label="$t('components.all_messages')"
+          name="allMsg"
+        />
       </el-tabs>
       <div class="tabs-container">
         <div class="msg-cont">
           <el-row class="top-operate">
             <el-col :span="12">
               <template v-if="tabActive === 'unread'">
-                <deBtn secondary @click="allMarkReaded">{{
-                $t("webmsg.all_mark_readed")
-              }}</deBtn>
-              <deBtn
-                secondary
-                key="mark_readed"
-                :disabled="multipleSelection.length === 0"
-                @click="markReaded"
-                >{{ $t("webmsg.mark_readed") }}</deBtn
-              >
+                <deBtn
+                  secondary
+                  @click="allMarkReaded"
+                >{{
+                  $t("webmsg.all_mark_readed")
+                }}</deBtn>
+                <deBtn
+                  key="mark_readed"
+                  secondary
+                  :disabled="multipleSelection.length === 0"
+                  @click="markReaded"
+                >{{ $t("webmsg.mark_readed") }}</deBtn>
               </template>
-              
+
               <deBtn
                 v-if="tabActive === 'readed'"
-                secondary
                 key="delete"
+                secondary
                 :disabled="multipleSelection.length === 0"
                 @click="deleteBatch"
-                >{{ $t("commons.delete") }}</deBtn
-              >
+              >{{ $t("commons.delete") }}</deBtn>
               &nbsp;
             </el-col>
-            <el-col class="right-user" :span="12">
+            <el-col
+              class="right-user"
+              :span="12"
+            >
               <el-select
-                class="name-email-search"
                 v-model="selectType"
+                class="name-email-search"
                 size="small"
                 @change="typeChange"
               >
@@ -50,15 +66,18 @@
                   :key="index"
                   :label="$t('webmsg.' + item.typeName)"
                   :value="item.msgTypeId"
-                ></el-option>
+                />
               </el-select>
             </el-col>
           </el-row>
-          <div class="table-container" :key="tabActive">
+          <div
+            :key="tabActive"
+            class="table-container"
+          >
             <grid-table
               :key="tabActive"
-              :tableData="data"
-              :multipleSelection="multipleSelection"
+              :table-data="data"
+              :multiple-selection="multipleSelection"
               :columns="[]"
               :pagination="paginationConfig"
               @selection-change="handleSelectionChange"
@@ -66,9 +85,15 @@
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
             >
-              <el-table-column type="selection" width="55" />
+              <el-table-column
+                type="selection"
+                width="55"
+              />
 
-              <el-table-column prop="content" :label="$t('webmsg.content')">
+              <el-table-column
+                prop="content"
+                :label="$t('webmsg.content')"
+              >
                 <template slot-scope="scope">
                   <span style="display: flex; flex: 1">
                     <span>
@@ -77,7 +102,10 @@
                         icon-class="unread-msg"
                         style="color: red"
                       />
-                      <svg-icon v-else icon-class="readed-msg" />
+                      <svg-icon
+                        v-else
+                        icon-class="readed-msg"
+                      />
                     </span>
                     <span
                       style="margin-left: 6px"
@@ -120,30 +148,30 @@
 </template>
 
 <script>
-import DeLayoutContent from "@/components/business/DeLayoutContent";
-import GridTable from "@/components/gridTable/index.vue";
+import DeLayoutContent from '@/components/business/DeLayoutContent'
+import GridTable from '@/components/gridTable/index.vue'
 import { query, updateStatus, batchRead, allRead, batchDelete } from '@/api/system/msg'
-import { msgTypes, getTypeName, loadMsgTypes } from "@/utils/webMsg";
-import bus from "@/utils/bus";
-import { addOrder, formatOrders } from "@/utils/index";
-import msgCfm from "@/components/msgCfm/index";
-import { mapGetters } from "vuex";
+import { msgTypes, getTypeName, loadMsgTypes } from '@/utils/webMsg'
+import bus from '@/utils/bus'
+import { addOrder, formatOrders } from '@/utils/index'
+import msgCfm from '@/components/msgCfm/index'
+import { mapGetters } from 'vuex'
 export default {
   components: {
     DeLayoutContent,
-    GridTable,
+    GridTable
   },
   mixins: [msgCfm],
   data() {
     return {
       multipleSelection: [],
-      tabActive: "unread",
+      tabActive: 'unread',
       selectType: -1,
       msgTypes: msgTypes,
       data: [],
       allTypes: [
-        { name: "mysql", type: "jdbc" },
-        { name: "sqlServer", type: "jdbc" },
+        { name: 'mysql', type: 'jdbc' },
+        { name: 'sqlServer', type: 'jdbc' }
       ],
 
       columns: [],
@@ -151,43 +179,43 @@ export default {
       paginationConfig: {
         currentPage: 1,
         pageSize: 10,
-        total: 0,
+        total: 0
       },
-      orderConditions: [],
-    };
+      orderConditions: []
+    }
   },
   computed: {
-    ...mapGetters(["permission_routes"]),
+    ...mapGetters(['permission_routes'])
   },
   mounted() {
-    this.search();
+    this.search()
   },
   created() {
     // 先加载消息类型
-    loadMsgTypes();
+    loadMsgTypes()
   },
   methods: {
     changeTab(val) {
-      this.initSearch();
+      this.initSearch()
     },
     handleSelectionChange(val) {
-      this.multipleSelection = val;
+      this.multipleSelection = val
     },
     handleSizeChange(pageSize) {
-      this.paginationConfig.currentPage = 1;
-      this.paginationConfig.pageSize = pageSize;
-      this.search();
+      this.paginationConfig.currentPage = 1
+      this.paginationConfig.pageSize = pageSize
+      this.search()
     },
     handleCurrentChange(currentPage) {
-      this.paginationConfig.currentPage = currentPage;
-      this.search();
+      this.paginationConfig.currentPage = currentPage
+      this.search()
     },
     initSearch() {
-      this.handleCurrentChange(1);
+      this.handleCurrentChange(1)
     },
     allMarkReaded() {
       allRead().then(res => {
-        this.openMessageSuccess('components.all_read_successfully');
+        this.openMessageSuccess('components.all_read_successfully')
         bus.$emit('refresh-top-notification')
         this.initSearch()
       })
@@ -195,7 +223,7 @@ export default {
     markReaded() {
       const param = this.multipleSelection.map(item => item.msgId)
       batchRead(param).then(res => {
-        this.openMessageSuccess('webmsg.mark_success');
+        this.openMessageSuccess('webmsg.mark_success')
         bus.$emit('refresh-top-notification')
         this.initSearch()
       })
@@ -203,88 +231,87 @@ export default {
     deleteBatch() {
       const param = this.multipleSelection.map(item => item.msgId)
       batchDelete(param).then(res => {
-        this.openMessageSuccess('commons.delete_success');
+        this.openMessageSuccess('commons.delete_success')
         this.initSearch()
       })
     },
     search() {
-      const param = {};
+      const param = {}
 
       if (this.selectType >= 0) {
-        param.type = this.selectType;
+        param.type = this.selectType
       }
 
       if (this.orderConditions.length === 0) {
-        param.orders = ["create_time desc "];
+        param.orders = ['create_time desc ']
       } else {
-        param.orders = formatOrders(this.orderConditions);
+        param.orders = formatOrders(this.orderConditions)
       }
 
-      if (this.tabActive !== "allMsg") {
-        param.status = this.tabActive === "readed";
+      if (this.tabActive !== 'allMsg') {
+        param.status = this.tabActive === 'readed'
       }
 
-      const { currentPage, pageSize } = this.paginationConfig;
+      const { currentPage, pageSize } = this.paginationConfig
       query(currentPage, pageSize, param).then((response) => {
-        this.data = response.data.listObject;
-        this.paginationConfig.total = response.data.itemCount;
-      });
+        this.data = response.data.listObject
+        this.paginationConfig.total = response.data.itemCount
+      })
     },
     getTypeName(value) {
-      return this.$t("webmsg." + getTypeName(value));
+      return this.$t('webmsg.' + getTypeName(value))
     },
     typeChange() {
-      this.initSearch();
+      this.initSearch()
     },
     toDetail(row) {
       const param = {
         ...{
           msgNotification: true,
           msgType: row.typeId,
-          sourceParam: row.param,
-        },
-      };
-      if (this.hasPermissionRoute(row.router)) {
-        this.$router.push({ name: row.router, params: param });
-        row.status || this.setReaded(row);
-        return;
+          sourceParam: row.param
+        }
       }
-      this.$warning(this.$t("commons.no_target_permission"));
+      if (this.hasPermissionRoute(row.router)) {
+        this.$router.push({ name: row.router, params: param })
+        row.status || this.setReaded(row)
+        return
+      }
+      this.$warning(this.$t('commons.no_target_permission'))
     },
     hasPermissionRoute(name, permission_routes) {
-      permission_routes = permission_routes || this.permission_routes;
+      permission_routes = permission_routes || this.permission_routes
       for (let index = 0; index < permission_routes.length; index++) {
-        const route = permission_routes[index];
-        if (route.name && route.name === name) return true;
-        if (route.children && this.hasPermissionRoute(name, route.children))
-          return true;
+        const route = permission_routes[index]
+        if (route.name && route.name === name) return true
+        if (route.children && this.hasPermissionRoute(name, route.children)) { return true }
       }
-      return false;
+      return false
     },
     // 设置已读
     setReaded(row) {
       updateStatus(row.msgId).then((res) => {
-        bus.$emit("refresh-top-notification");
-        this.search();
-      });
+        bus.$emit('refresh-top-notification')
+        this.search()
+      })
     },
     sortChange({ column, prop, order }) {
-      this.orderConditions = [];
+      this.orderConditions = []
       if (!order) {
-        this.search();
-        return;
+        this.search()
+        return
       }
-      if (prop === "createTime") {
-        prop = "create_time";
+      if (prop === 'createTime') {
+        prop = 'create_time'
       }
-      if (prop === "typeId") {
-        prop = "type_id";
+      if (prop === 'typeId') {
+        prop = 'type_id'
       }
-      addOrder({ field: prop, value: order }, this.orderConditions);
-      this.search();
-    },
-  },
-};
+      addOrder({ field: prop, value: order }, this.orderConditions)
+      this.search()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -327,4 +354,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/msg/setting.vue b/frontend/src/views/msg/setting.vue
index af4b330567..4e22ce79ea 100644
--- a/frontend/src/views/msg/setting.vue
+++ b/frontend/src/views/msg/setting.vue
@@ -13,7 +13,10 @@
           {{ $t(channel.channelName) }}
         </span>
       </el-row>
-      <el-row class="msg-setting" style="margin-top: 5px">
+      <el-row
+        class="msg-setting"
+        style="margin-top: 5px"
+      >
         <el-tree
           :props="defaultProps"
           :data="treeData"
@@ -22,7 +25,10 @@
           :highlight-current="highlightCurrent"
           @node-click="nodeClick"
         >
-          <span slot-scope="{ node, data }" class="custom-tree-node">
+          <span
+            slot-scope="{ node, data }"
+            class="custom-tree-node"
+          >
             <span>
               <span style="margin-left: 6px">{{
                 $t("webmsg." + data.name)
@@ -48,8 +54,7 @@
                     v-model="data.check_map[channel.msgChannelId]"
                     @change="childBoxChange(node, channel)"
                   />
-                </span></div
-            ></span>
+                </span></div></span>
           </span>
         </el-tree>
       </el-row>
@@ -58,30 +63,30 @@
 </template>
 
 <script>
-import DeLayoutContent from "@/components/business/DeLayoutContent";
+import DeLayoutContent from '@/components/business/DeLayoutContent'
 import {
   treeList,
   channelList,
   settingList,
   updateSetting,
-  batchUpdate,
-} from "@/api/system/msg";
+  batchUpdate
+} from '@/api/system/msg'
 export default {
-  name: "LazyTree",
+  name: 'LazyTree',
   components: { DeLayoutContent },
   data() {
     return {
       treeData: [],
       defaultProps: {
-        children: "children",
-        label: "name",
-        id: "id",
+        children: 'children',
+        label: 'name',
+        id: 'id'
       },
       highlightCurrent: true,
 
       msg_channels: [],
-      setting_data: {},
-    };
+      setting_data: {}
+    }
   },
   computed: {},
   mounted() {},
@@ -89,166 +94,166 @@ export default {
     // this.loadChannelData()
 
     channelList().then((res) => {
-      this.msg_channels = res.data;
-    });
+      this.msg_channels = res.data
+    })
   },
   created() {
-    this.loadSettingData(this.loadTreeData);
+    this.loadSettingData(this.loadTreeData)
   },
 
   methods: {
     // 加载树节点数据
     loadTreeData() {
       treeList().then((res) => {
-        const datas = res.data;
-        datas.forEach((data) => this.formatTreeNode(data));
-        this.treeData = datas;
-      });
+        const datas = res.data
+        datas.forEach((data) => this.formatTreeNode(data))
+        this.treeData = datas
+      })
     },
     formatTreeNode(node) {
       if (node.children && node.children.length > 0) {
-        node.check_all_map = {};
-        node.indeterminate_map = {};
-        node.indeterminate_number_map = {};
-        const kidSize = node.children.length;
+        node.check_all_map = {}
+        node.indeterminate_map = {}
+        node.indeterminate_number_map = {}
+        const kidSize = node.children.length
         node.children.forEach((kid) => {
-          this.formatTreeNode(kid);
-          const isLeaf = !kid.children || kid.children.length === 0;
-          const tempMap = isLeaf ? kid.check_map : kid.indeterminate_map;
+          this.formatTreeNode(kid)
+          const isLeaf = !kid.children || kid.children.length === 0
+          const tempMap = isLeaf ? kid.check_map : kid.indeterminate_map
           for (const key in tempMap) {
             if (Object.hasOwnProperty.call(tempMap, key)) {
-              const element = tempMap[key];
+              const element = tempMap[key]
               node.indeterminate_number_map[key] =
-                node.indeterminate_number_map[key] || 0;
+                node.indeterminate_number_map[key] || 0
               if (element) {
-                node.indeterminate_number_map[key]++;
+                node.indeterminate_number_map[key]++
               }
 
               if (
                 node.indeterminate_number_map[key] === kidSize &&
                 (isLeaf || kid.check_all_map[key])
               ) {
-                node.check_all_map[key] = true;
-                node.indeterminate_map[key] = false;
+                node.check_all_map[key] = true
+                node.indeterminate_map[key] = false
               } else if (node.indeterminate_number_map[key] > 0) {
-                node.check_all_map[key] = false;
-                node.indeterminate_map[key] = true;
+                node.check_all_map[key] = false
+                node.indeterminate_map[key] = true
               }
             }
           }
-        });
+        })
       } else {
-        node.check_map = {};
+        node.check_map = {}
         this.msg_channels.forEach((channel) => {
           node.check_map[channel.msgChannelId] = this.checkBoxStatus(
             node,
             channel
-          );
-        });
+          )
+        })
         // this.checkBoxStatus(node, )
       }
     },
     // 加载消息渠道
     loadChannelData() {
       channelList().then((res) => {
-        this.msg_channels = res.data;
-      });
+        this.msg_channels = res.data
+      })
     },
     // 加载用户设置信息
     loadSettingData(callBack) {
       // this.setting_data = {}
-      const temp_setting_data = {};
+      const temp_setting_data = {}
       settingList().then((res) => {
-        const lists = res.data;
+        const lists = res.data
         lists.forEach((item) => {
-          const key = item.typeId + "";
+          const key = item.typeId + ''
           if (!Object.keys(temp_setting_data).includes(key)) {
-            temp_setting_data[key] = [];
+            temp_setting_data[key] = []
           }
-          temp_setting_data[key].push(item);
-        });
-        this.setting_data = temp_setting_data;
-        callBack && callBack();
-      });
+          temp_setting_data[key].push(item)
+        })
+        this.setting_data = temp_setting_data
+        callBack && callBack()
+      })
     },
     checkBoxStatus(node, channel) {
       // const nodeId = node.data.id
-      const nodeId = node.id;
+      const nodeId = node.id
       return (
         this.setting_data[nodeId] &&
         this.setting_data[nodeId].some(
           (item) => item.channelId === channel.msgChannelId && item.enable
         )
-      );
+      )
     },
 
     nodeClick(data, node) {},
     getAllKidId(node, ids) {
       if (node.children && node.children.length > 0) {
-        node.children.forEach((item) => this.getAllKidId(item, ids));
+        node.children.forEach((item) => this.getAllKidId(item, ids))
       } else {
-        ids.push(node.id);
+        ids.push(node.id)
       }
     },
     parentBoxChange(node, channel) {
-      const typeIds = [];
-      this.getAllKidId(node.data, typeIds);
-      const channelId = channel.msgChannelId;
+      const typeIds = []
+      this.getAllKidId(node.data, typeIds)
+      const channelId = channel.msgChannelId
 
-      const data = node.data;
-      const enable = data.check_all_map && data.check_all_map[channelId];
-      node.data.check_all_map[channelId] = enable;
-      node.data.indeterminate_map[channelId] = false;
+      const data = node.data
+      const enable = data.check_all_map && data.check_all_map[channelId]
+      node.data.check_all_map[channelId] = enable
+      node.data.indeterminate_map[channelId] = false
       node.data.children.forEach((item) => {
-        item.check_map = item.check_map || {};
-        item.check_map[channelId] = enable;
-      });
+        item.check_map = item.check_map || {}
+        item.check_map[channelId] = enable
+      })
 
       const param = {
         typeIds: typeIds,
         channelId: channelId,
-        enable,
-      };
+        enable
+      }
       batchUpdate(param).then((res) => {
-        this.loadSettingData(this.loadTreeData);
-      });
+        this.loadSettingData(this.loadTreeData)
+      })
     },
     childBoxChange(node, channel) {
-      const channelId = channel.msgChannelId;
-      const parent = node.parent;
+      const channelId = channel.msgChannelId
+      const parent = node.parent
       if (parent) {
-        const data = parent.data;
-        const kids = data.children;
-        const kidSize = kids.length;
-        let index = 0;
+        const data = parent.data
+        const kids = data.children
+        const kidSize = kids.length
+        let index = 0
         kids.forEach((kid) => {
           if (kid.check_map[channelId]) {
-            index++;
+            index++
           }
-        });
+        })
         if (index === kidSize) {
-          node.parent.data.check_all_map[channelId] = true;
-          node.parent.data.indeterminate_map[channelId] = false;
+          node.parent.data.check_all_map[channelId] = true
+          node.parent.data.indeterminate_map[channelId] = false
         } else if (index > 0) {
-          node.parent.data.check_all_map[channelId] = false;
-          node.parent.data.indeterminate_map[channelId] = true;
+          node.parent.data.check_all_map[channelId] = false
+          node.parent.data.indeterminate_map[channelId] = true
         } else {
-          node.parent.data.check_all_map[channelId] = false;
-          node.parent.data.indeterminate_map[channelId] = false;
+          node.parent.data.check_all_map[channelId] = false
+          node.parent.data.indeterminate_map[channelId] = false
         }
         // this.formatTreeNode(node.parent.data)
       }
 
       const param = {
         typeId: node.data.id,
-        channelId: channelId,
-      };
+        channelId: channelId
+      }
       updateSetting(param).then((res) => {
-        this.loadSettingData(this.loadTreeData);
-      });
-    },
-  },
-};
+        this.loadSettingData(this.loadTreeData)
+      })
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -301,4 +306,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/nested/menu1/index.vue b/frontend/src/views/nested/menu1/index.vue
index 30cb670118..20ed55ee85 100644
--- a/frontend/src/views/nested/menu1/index.vue
+++ b/frontend/src/views/nested/menu1/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1">
+    <el-alert
+      :closable="false"
+      title="menu 1"
+    >
       <router-view />
     </el-alert>
   </div>
diff --git a/frontend/src/views/nested/menu1/menu1-1/index.vue b/frontend/src/views/nested/menu1/menu1-1/index.vue
index 27e173a6b4..048a6a3bdb 100644
--- a/frontend/src/views/nested/menu1/menu1-1/index.vue
+++ b/frontend/src/views/nested/menu1/menu1-1/index.vue
@@ -1,6 +1,10 @@
 <template>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-1" type="success">
+    <el-alert
+      :closable="false"
+      title="menu 1-1"
+      type="success"
+    >
       <router-view />
     </el-alert>
   </div>
diff --git a/frontend/src/views/nested/menu1/menu1-2/index.vue b/frontend/src/views/nested/menu1/menu1-2/index.vue
index 0c86276e01..1daa1f720f 100644
--- a/frontend/src/views/nested/menu1/menu1-2/index.vue
+++ b/frontend/src/views/nested/menu1/menu1-2/index.vue
@@ -1,6 +1,10 @@
 <template>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2" type="success">
+    <el-alert
+      :closable="false"
+      title="menu 1-2"
+      type="success"
+    >
       <router-view />
     </el-alert>
   </div>
diff --git a/frontend/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/frontend/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
index f87d88f490..adc43988a1 100644
--- a/frontend/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
+++ b/frontend/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
@@ -1,5 +1,9 @@
 <template functional>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
+    <el-alert
+      :closable="false"
+      title="menu 1-2-1"
+      type="warning"
+    />
   </div>
 </template>
diff --git a/frontend/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/frontend/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
index d88789f205..37fdf19766 100644
--- a/frontend/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
+++ b/frontend/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
@@ -1,5 +1,9 @@
 <template functional>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
+    <el-alert
+      :closable="false"
+      title="menu 1-2-2"
+      type="warning"
+    />
   </div>
 </template>
diff --git a/frontend/src/views/nested/menu1/menu1-3/index.vue b/frontend/src/views/nested/menu1/menu1-3/index.vue
index f7cd0738f1..58565b9afc 100644
--- a/frontend/src/views/nested/menu1/menu1-3/index.vue
+++ b/frontend/src/views/nested/menu1/menu1-3/index.vue
@@ -1,5 +1,9 @@
 <template functional>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-3" type="success" />
+    <el-alert
+      :closable="false"
+      title="menu 1-3"
+      type="success"
+    />
   </div>
 </template>
diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue
index acb20d2a09..5bfa37cf75 100644
--- a/frontend/src/views/panel/AssistComponent/index.vue
+++ b/frontend/src/views/panel/AssistComponent/index.vue
@@ -1,6 +1,10 @@
 <template>
 
-  <div class="filter-container" @dragstart="handleDragStart" @dragend="handleDragEnd()">
+  <div
+    class="filter-container"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd()"
+  >
 
     <div class="widget-subject">
       <div class="filter-header">
@@ -72,7 +76,13 @@
       </div>
     </div>
 
-    <input id="input" ref="files" type="file" hidden @change="handleFileChange">
+    <input
+      id="input"
+      ref="files"
+      type="file"
+      hidden
+      @change="handleFileChange"
+    >
 
   </div>
 
diff --git a/frontend/src/views/panel/GrantAuth/ShareHead/index.vue b/frontend/src/views/panel/GrantAuth/ShareHead/index.vue
index 357a166d20..f59edf7de0 100644
--- a/frontend/src/views/panel/GrantAuth/ShareHead/index.vue
+++ b/frontend/src/views/panel/GrantAuth/ShareHead/index.vue
@@ -2,15 +2,24 @@
   <div>
     <el-col>
       <el-row>
-        <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
+        <el-col
+          :span="8"
+          style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px"
+        >
           <span>{{ $t('panel.who_share') + ': ' + $store.getters.user.nickName }}</span>
         </el-col>
 
-        <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
+        <el-col
+          :span="8"
+          style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px"
+        >
           <span>{{ $t('panel.when_share') + ': ' + (granterTime ? new Date(granterTime).format('yyyy-MM-dd hh:mm:ss') : '') }}</span>
         </el-col>
 
-        <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
+        <el-col
+          :span="8"
+          style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px"
+        >
           <!-- 分享维度提醒 先注释 因为后面有可能还是需要的 -->
           <!-- <el-link type="primary" disabled class="share-checked">
             {{ $t('panel.org') }}
@@ -41,8 +50,20 @@
             {{ tag.targetName }}
           </el-tag>
 
-          <el-tooltip class="item" effect="dark" :content="$t('commons.edit')" placement="bottom">
-            <el-button type="primary" circle icon="el-icon-edit" class="button-new-tag" size="mini" @click="showEditPage" />
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="$t('commons.edit')"
+            placement="bottom"
+          >
+            <el-button
+              type="primary"
+              circle
+              icon="el-icon-edit"
+              class="button-new-tag"
+              size="mini"
+              @click="showEditPage"
+            />
           </el-tooltip>
         </el-col>
       </el-row>
@@ -57,7 +78,11 @@
       width="800px"
       class="dialog-css"
     >
-      <grant-auth v-if="authVisible" :resource-id="authResourceId" @close-grant="closeGrant" />
+      <grant-auth
+        v-if="authVisible"
+        :resource-id="authResourceId"
+        @close-grant="closeGrant"
+      />
     </el-dialog>
   </div>
 
diff --git a/frontend/src/views/panel/GrantAuth/dept/index.vue b/frontend/src/views/panel/GrantAuth/dept/index.vue
index 0c36067e71..ba35e1f56a 100644
--- a/frontend/src/views/panel/GrantAuth/dept/index.vue
+++ b/frontend/src/views/panel/GrantAuth/dept/index.vue
@@ -8,7 +8,7 @@
 
       <el-tree
         ref="tree"
-        :data="data"
+        :data="treeData"
         lazy
         :load="loadTree"
         style="width: 100%"
@@ -16,7 +16,10 @@
         :default-expanded-keys="expandNodeIds"
         node-key="deptId"
       >
-        <span slot-scope="{ node, data }" class="custom-tree-node">
+        <span
+          slot-scope="{ node, data }"
+          class="custom-tree-node"
+        >
           <span>
             <span style="margin-left: 6px">{{ node.data.name }}</span>
           </span>
@@ -24,7 +27,10 @@
 
             <div>
               <span class="auth-span">
-                <el-checkbox v-model="data.checked" @change="nodeStatusChange(data)" />
+                <el-checkbox
+                  v-model="data.checked"
+                  @change="nodeStatusChange(data)"
+                />
               </span>
             </div>
           </span>
@@ -51,7 +57,7 @@ export default {
   },
   data() {
     return {
-      data: [],
+      treeData: [],
       defaultCondition: {
         field: 'pid',
         operator: 'eq',
@@ -119,7 +125,7 @@ export default {
 
     // 加载表格数据
     search(condition) {
-      this.data = []
+      this.treeData = []
       let param = {}
       if (condition && condition.value) {
         param = { conditions: [condition] }
@@ -149,12 +155,12 @@ export default {
         this.setCheckExpandNodes(data)
         this.expandNodeIds = []
         if (condition && condition.value) {
-          this.data = this.buildTree(data)
+          this.treeData = this.buildTree(data)
           this.$nextTick(() => {
-            this.expandResult(this.data)
+            this.expandResult(this.treeData)
           })
         } else {
-          this.data = data
+          this.treeData = data
         }
       })
     },
diff --git a/frontend/src/views/panel/GrantAuth/index.vue b/frontend/src/views/panel/GrantAuth/index.vue
index 8a263b8486..f6edc01ba0 100644
--- a/frontend/src/views/panel/GrantAuth/index.vue
+++ b/frontend/src/views/panel/GrantAuth/index.vue
@@ -1,21 +1,76 @@
 <template>
   <div>
-    <el-button v-show="!showSearchInput" class="de-icon" icon="el-icon-search" circle size="mini" @click="showSearchWidget" />
-    <div v-show="showSearchInput" class="de-input">
-      <el-input v-model="key" class="main-area-input">
-        <el-button slot="append" icon="el-icon-close" @click="closeSearchWidget" />
+    <el-button
+      v-show="!showSearchInput"
+      class="de-icon"
+      icon="el-icon-search"
+      circle
+      size="mini"
+      @click="showSearchWidget"
+    />
+    <div
+      v-show="showSearchInput"
+      class="de-input"
+    >
+      <el-input
+        v-model="key"
+        class="main-area-input"
+      >
+        <el-button
+          slot="append"
+          icon="el-icon-close"
+          @click="closeSearchWidget"
+        />
       </el-input>
     </div>
 
-    <el-tabs v-model="activeName" :class="{'de-search-header': showSearchInput}" @tab-click="handleClick">
-      <el-tab-pane :lazy="true" class="de-tab" :label="$t('commons.organization')" :name="tabNames[0]"><grant-dept :ref="tabNames[0]" :resource-id="resourceId" :key-word="key" /></el-tab-pane>
-      <el-tab-pane :lazy="true" class="de-tab" :label="$t('commons.role')" :name="tabNames[1]"><grant-role :ref="tabNames[1]" :resource-id="resourceId" :key-word="key" /></el-tab-pane>
-      <el-tab-pane :lazy="true" class="de-tab" :label="$t('commons.user')" :name="tabNames[2]"><grant-user :ref="tabNames[2]" :resource-id="resourceId" :key-word="key" /></el-tab-pane>
+    <el-tabs
+      v-model="activeName"
+      :class="{'de-search-header': showSearchInput}"
+      @tab-click="handleClick"
+    >
+      <el-tab-pane
+        :lazy="true"
+        class="de-tab"
+        :label="$t('commons.organization')"
+        :name="tabNames[0]"
+      ><grant-dept
+        :ref="tabNames[0]"
+        :resource-id="resourceId"
+        :key-word="key"
+      /></el-tab-pane>
+      <el-tab-pane
+        :lazy="true"
+        class="de-tab"
+        :label="$t('commons.role')"
+        :name="tabNames[1]"
+      ><grant-role
+        :ref="tabNames[1]"
+        :resource-id="resourceId"
+        :key-word="key"
+      /></el-tab-pane>
+      <el-tab-pane
+        :lazy="true"
+        class="de-tab"
+        :label="$t('commons.user')"
+        :name="tabNames[2]"
+      ><grant-user
+        :ref="tabNames[2]"
+        :resource-id="resourceId"
+        :key-word="key"
+      /></el-tab-pane>
     </el-tabs>
     <div class="auth-root-class">
       <span slot="footer">
-        <el-button size="mini" @click="cancel">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="save">{{ $t('commons.confirm') }}</el-button>
+        <el-button
+          size="mini"
+          @click="cancel"
+        >{{ $t('commons.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="save"
+        >{{ $t('commons.confirm') }}</el-button>
       </span>
     </div>
   </div>
diff --git a/frontend/src/views/panel/GrantAuth/role/index.vue b/frontend/src/views/panel/GrantAuth/role/index.vue
index 21e5490f33..7b79785240 100644
--- a/frontend/src/views/panel/GrantAuth/role/index.vue
+++ b/frontend/src/views/panel/GrantAuth/role/index.vue
@@ -9,8 +9,19 @@
       @select="selectOne"
       @select-all="selectAll"
     >
-      <el-table-column :column-key="fieldName" :label="columnLabel" :prop="fieldName" filter-placement="right-start" :filters="filter_options" :filter-multiple="false" :filter-method="filterHandler" />
-      <el-table-column type="selection" fixd />
+      <el-table-column
+        :column-key="fieldName"
+        :label="columnLabel"
+        :prop="fieldName"
+        filter-placement="right-start"
+        :filters="filter_options"
+        :filter-multiple="false"
+        :filter-method="filterHandler"
+      />
+      <el-table-column
+        type="selection"
+        fixd
+      />
     </el-table>
   </div>
 </template>
diff --git a/frontend/src/views/panel/GrantAuth/shareTree.vue b/frontend/src/views/panel/GrantAuth/shareTree.vue
index e601263560..1b07cc713d 100644
--- a/frontend/src/views/panel/GrantAuth/shareTree.vue
+++ b/frontend/src/views/panel/GrantAuth/shareTree.vue
@@ -2,7 +2,10 @@
   <el-col style="padding: 0 5px 0 5px;">
     <el-row>
       <span class="header-title">{{ $t('panel.share_in') }}</span>
-      <div class="block" style="margin-top:8px;">
+      <div
+        class="block"
+        style="margin-top:8px;"
+      >
         <el-tree
           ref="topTree"
           :data="datas"
@@ -12,10 +15,19 @@
           :default-expanded-keys="expandNodes"
           @node-click="handleNodeClick"
         >
-          <span slot-scope="{ data }" class="custom-tree-node father">
-            <span style="display: flex; flex: 1 1 0%; width: 0px;" :class="!!data.msgNode ? 'msg-node-class': ''">
+          <span
+            slot-scope="{ data }"
+            class="custom-tree-node father"
+          >
+            <span
+              style="display: flex; flex: 1 1 0%; width: 0px;"
+              :class="!!data.msgNode ? 'msg-node-class': ''"
+            >
               <span v-if="!!data.id">
-                <svg-icon :icon-class="'panel-'+data.status" class="ds-icon-scene" />
+                <svg-icon
+                  :icon-class="'panel-'+data.status"
+                  class="ds-icon-scene"
+                />
               </span>
               <span
                 :class="data.status"
@@ -30,7 +42,10 @@
 
     <el-row>
       <span class="header-title">{{ $t('panel.share_out') }}</span>
-      <div class="block" style="margin-top:8px;">
+      <div
+        class="block"
+        style="margin-top:8px;"
+      >
         <el-tree
           ref="botTree"
           :data="outDatas"
@@ -39,10 +54,19 @@
           node-key="name"
           :default-expand-all="true"
         >
-          <span slot-scope="{ data }" class="custom-tree-node father">
-            <span style="display: flex; flex: 1 1 0%; width: 0px;" @click="viewMyShare(data)">
+          <span
+            slot-scope="{ data }"
+            class="custom-tree-node father"
+          >
+            <span
+              style="display: flex; flex: 1 1 0%; width: 0px;"
+              @click="viewMyShare(data)"
+            >
               <span v-if="!!data.id">
-                <svg-icon :icon-class="'panel-'+data.status" class="ds-icon-scene" />
+                <svg-icon
+                  :icon-class="'panel-'+data.status"
+                  class="ds-icon-scene"
+                />
               </span>
               <span
                 :class="data.status"
diff --git a/frontend/src/views/panel/GrantAuth/user/index.vue b/frontend/src/views/panel/GrantAuth/user/index.vue
index 8b95ad7da3..94778295bc 100644
--- a/frontend/src/views/panel/GrantAuth/user/index.vue
+++ b/frontend/src/views/panel/GrantAuth/user/index.vue
@@ -18,7 +18,10 @@
         :filter-multiple="false"
         :filter-method="filterHandler"
       />
-      <el-table-column type="selection" fixd />
+      <el-table-column
+        type="selection"
+        fixd
+      />
     </el-table>
   </div>
 </template>
diff --git a/frontend/src/views/panel/LinkJumpSet/TemplateAllList.vue b/frontend/src/views/panel/LinkJumpSet/TemplateAllList.vue
index bfd345f072..eb2ce42943 100644
--- a/frontend/src/views/panel/LinkJumpSet/TemplateAllList.vue
+++ b/frontend/src/views/panel/LinkJumpSet/TemplateAllList.vue
@@ -21,10 +21,16 @@
           :highlight-current="true"
           @node-click="nodeClick"
         >
-          <span slot-scope="{ node, data }" class="custom-tree-node">
+          <span
+            slot-scope="{ data }"
+            class="custom-tree-node"
+          >
             <span style="display: flex; flex: 1 1 0%; width: 0px;">
               <span v-if="data.nodeType==='template'">
-                <svg-icon icon-class="panel" class="ds-icon-scene" />
+                <svg-icon
+                  icon-class="panel"
+                  class="ds-icon-scene"
+                />
               </span>
               <span v-if="data.nodeType==='folder'">
                 <i class="el-icon-folder" />
diff --git a/frontend/src/views/panel/LinkJumpSet/index.vue b/frontend/src/views/panel/LinkJumpSet/index.vue
index 62c567cce5..d42104e1a9 100644
--- a/frontend/src/views/panel/LinkJumpSet/index.vue
+++ b/frontend/src/views/panel/LinkJumpSet/index.vue
@@ -1,12 +1,19 @@
 <template>
-  <el-row v-if="linkJump" v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="height: 430px">
+  <el-row
+    v-if="linkJump"
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    style="height: 430px"
+  >
     <el-row>
       <span style="font-weight:600;margin-right: 20px">{{ $t('panel.jump_set') }}</span>
       <el-checkbox v-model="linkJump.checked">{{ $t('panel.enable_jump') }}</el-checkbox>
     </el-row>
     <el-row v-loading="loading">
       <el-row class="preview">
-        <el-col :span="8" style="height:100%;overflow-y: auto">
+        <el-col
+          :span="8"
+          style="height:100%;overflow-y: auto"
+        >
           <el-row class="tree-head">
             <span style="float: left;margin-left: 30px">{{ $t('panel.column_name') }}</span>
             <span style="float: right;margin-right: 10px">{{ $t('panel.enable_column') }}</span>
@@ -19,33 +26,51 @@
             :props="treeProp"
             @node-click="nodeClick"
           >
-            <span slot-scope="{ node, data }" class="custom-tree-node">
+            <span
+              slot-scope="{ data }"
+              class="custom-tree-node"
+            >
               <span>
                 <span style="margin-left: 6px">{{ data.sourceFieldName }}</span>
               </span>
               <span @click.stop>
                 <div>
                   <span class="auth-span">
-                    <el-checkbox v-model="data.checked" @change="sourceFieldCheckedChange(data)" />
+                    <el-checkbox
+                      v-model="data.checked"
+                      @change="sourceFieldCheckedChange(data)"
+                    />
                   </span>
                 </div>
               </span>
             </span>
           </el-tree>
         </el-col>
-        <el-col :span="16" class="preview-show">
+        <el-col
+          :span="16"
+          class="preview-show"
+        >
           <el-row v-if="linkJumpInfo">
             <el-row style="margin-top: 10px;height: 30px;">
-              <el-col :span="4" style="margin-left: 20px">
+              <el-col
+                :span="4"
+                style="margin-left: 20px"
+              >
                 {{ $t('panel.link_type') }}：
               </el-col>
               <el-col :span="10">
-                <el-radio-group v-model="linkJumpInfo.linkType" size="mini">
+                <el-radio-group
+                  v-model="linkJumpInfo.linkType"
+                  size="mini"
+                >
                   <el-radio label="outer">{{ $t('panel.link_outer') }}</el-radio>
                   <el-radio label="inner">{{ $t('panel.link_panel') }}</el-radio>
                 </el-radio-group>
               </el-col>
-              <el-col v-if="linkJumpInfo.linkType==='inner'" :span="9">
+              <el-col
+                v-if="linkJumpInfo.linkType==='inner'"
+                :span="9"
+              >
                 <treeselect
                   v-model="linkJumpInfo.targetPanelId"
                   :options="panelList"
@@ -62,17 +87,27 @@
               </el-col>
             </el-row>
             <el-row style="margin-top: 10px;height: 30px">
-              <el-col :span="4" style="margin-left: 20px">
+              <el-col
+                :span="4"
+                style="margin-left: 20px"
+              >
                 {{ $t('panel.open_model') }}：
               </el-col>
               <el-col :span="10">
-                <el-radio-group v-model="linkJumpInfo.jumpType" size="mini">
+                <el-radio-group
+                  v-model="linkJumpInfo.jumpType"
+                  size="mini"
+                >
                   <el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
                   <el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
                 </el-radio-group>
               </el-col>
             </el-row>
-            <el-row v-if="linkJumpInfo.linkType==='inner'" style="margin-top: 5px;" class="top_border">
+            <el-row
+              v-if="linkJumpInfo.linkType==='inner'"
+              style="margin-top: 5px;"
+              class="top_border"
+            >
               <el-row style="margin-top: 10px">
                 <el-col :span="11">
                   <div class="ellip">{{ $t('panel.link_view') }}</div>
@@ -82,21 +117,42 @@
                 </el-col>
               </el-row>
               <el-row style="height: 180px;overflow-y: auto">
-                <el-row v-for="(targetViewInfo,index) in linkJumpInfo.targetViewInfoList" :key="index">
+                <el-row
+                  v-for="(targetViewInfo,index) in linkJumpInfo.targetViewInfoList"
+                  :key="index"
+                >
                   <el-col :span="11">
                     <div class="select-filed">
-                      <el-select v-model="targetViewInfo.targetViewId" style="width: 100%" size="mini" :placeholder="$t('fu.search_bar.please_select')" @change="viewInfoOnChange(targetViewInfo)">
+                      <el-select
+                        v-model="targetViewInfo.targetViewId"
+                        style="width: 100%"
+                        size="mini"
+                        :placeholder="$t('fu.search_bar.please_select')"
+                        @change="viewInfoOnChange(targetViewInfo)"
+                      >
                         <el-option
                           v-for="item in currentLinkPanelViewArray"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id"
                         >
-                          <span v-if="item.isPlugin" style="float: left">
-                            <svg-icon :icon-class="item.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + item.type + '/svg') : item.type" style="width: 14px;height: 14px" />
+                          <span
+                            v-if="item.isPlugin"
+                            style="float: left"
+                          >
+                            <svg-icon
+                              :icon-class="item.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + item.type + '/svg') : item.type"
+                              style="width: 14px;height: 14px"
+                            />
                           </span>
-                          <span v-else style="float: left">
-                            <svg-icon :icon-class="item.type" style="width: 14px;height: 14px" />
+                          <span
+                            v-else
+                            style="float: left"
+                          >
+                            <svg-icon
+                              :icon-class="item.type"
+                              style="width: 14px;height: 14px"
+                            />
                           </span>
                           <span style="float: left; font-size: 12px">{{ item.name }}</span>
                         </el-option>
@@ -105,7 +161,12 @@
                   </el-col>
                   <el-col :span="11">
                     <div class="select-filed">
-                      <el-select v-model="targetViewInfo.targetFieldId" style="width: 100%" size="mini" :placeholder="$t('fu.search_bar.please_select')">
+                      <el-select
+                        v-model="targetViewInfo.targetFieldId"
+                        style="width: 100%"
+                        size="mini"
+                        :placeholder="$t('fu.search_bar.please_select')"
+                      >
                         <el-option
                           v-for="viewField in viewIdFieldArrayMap[targetViewInfo.targetViewId]"
                           :key="viewField.id"
@@ -113,10 +174,26 @@
                           :value="viewField.id"
                         >
                           <span style="float: left">
-                            <svg-icon v-if="viewField.deType === 0" icon-class="field_text" class="field-icon-text" />
-                            <svg-icon v-if="viewField.deType === 1" icon-class="field_time" class="field-icon-time" />
-                            <svg-icon v-if="viewField.deType === 2 || viewField.deType === 3" icon-class="field_value" class="field-icon-value" />
-                            <svg-icon v-if="viewField.deType === 5" icon-class="field_location" class="field-icon-location" />
+                            <svg-icon
+                              v-if="viewField.deType === 0"
+                              icon-class="field_text"
+                              class="field-icon-text"
+                            />
+                            <svg-icon
+                              v-if="viewField.deType === 1"
+                              icon-class="field_time"
+                              class="field-icon-time"
+                            />
+                            <svg-icon
+                              v-if="viewField.deType === 2 || viewField.deType === 3"
+                              icon-class="field_value"
+                              class="field-icon-value"
+                            />
+                            <svg-icon
+                              v-if="viewField.deType === 5"
+                              icon-class="field_location"
+                              class="field-icon-location"
+                            />
                           </span>
                           <span style="float: left;font-size: 12px">{{ viewField.name }}</span>
                         </el-option>
@@ -125,28 +202,57 @@
                   </el-col>
                   <el-col :span="2">
                     <div>
-                      <el-button icon="el-icon-delete" type="text" size="small" style="float: left" @click="deleteLinkJumpField(index)" />
+                      <el-button
+                        icon="el-icon-delete"
+                        type="text"
+                        size="small"
+                        style="float: left"
+                        @click="deleteLinkJumpField(index)"
+                      />
                     </div>
                   </el-col>
                 </el-row>
               </el-row>
 
               <el-row class="bottom">
-                <el-button :disabled="!linkJumpInfo.targetPanelId" size="mini" type="success" icon="el-icon-plus" round @click="addLinkJumpField">{{ $t('panel.add_jump_field') }}</el-button>
+                <el-button
+                  :disabled="!linkJumpInfo.targetPanelId"
+                  size="mini"
+                  type="success"
+                  icon="el-icon-plus"
+                  round
+                  @click="addLinkJumpField"
+                >{{ $t('panel.add_jump_field') }}</el-button>
               </el-row>
-              <i slot="reference" class="icon iconfont icon-edit slot-class" />
+              <i
+                slot="reference"
+                class="icon iconfont icon-edit slot-class"
+              />
             </el-row>
-            <el-row v-if="linkJumpInfo.linkType==='outer'" style="border-top: 1px solid #E6E6E6;padding:14px">
+            <el-row
+              v-if="linkJumpInfo.linkType==='outer'"
+              style="border-top: 1px solid #E6E6E6;padding:14px"
+            >
               <el-row style="height: 230px;border: 1px solid #E6E6E6">
-                <el-col :span="18" style="height: 100%">
+                <el-col
+                  :span="18"
+                  style="height: 100%"
+                >
                   <el-row>
                     <span>
                       {{ $t('panel.target_url') }}
-                      <el-tooltip class="item" effect="dark" placement="bottom">
+                      <el-tooltip
+                        class="item"
+                        effect="dark"
+                        placement="bottom"
+                      >
                         <div slot="content">
                           {{ $t('panel.target_url_tips') }}
                         </div>
-                        <i class="el-icon-info" style="cursor: pointer;" />
+                        <i
+                          class="el-icon-info"
+                          style="cursor: pointer;"
+                        />
                       </el-tooltip>
                     </span>
                     <codemirror
@@ -161,11 +267,22 @@
                     />
                   </el-row>
                 </el-col>
-                <el-col :span="6" style="height: 100%;border-left: 1px solid #E6E6E6;">
-                  <el-col :span="24" style="height: 100%" class="padding-lr">
+                <el-col
+                  :span="6"
+                  style="height: 100%;border-left: 1px solid #E6E6E6;"
+                >
+                  <el-col
+                    :span="24"
+                    style="height: 100%"
+                    class="padding-lr"
+                  >
                     <span>
                       {{ $t('panel.select_world') }}
-                      <el-tooltip class="item" effect="dark" placement="bottom">
+                      <el-tooltip
+                        class="item"
+                        effect="dark"
+                        placement="bottom"
+                      >
                         <div slot="content">
                           引用字段以 "[" 开始， "]" 结束
                           <br>
@@ -173,7 +290,10 @@
                           <br>
                           若输入与引用字段相同格式的内容，将被当作引用字段处理
                         </div>
-                        <i class="el-icon-info" style="cursor: pointer;" />
+                        <i
+                          class="el-icon-info"
+                          style="cursor: pointer;"
+                        />
                       </el-tooltip>
                     </span>
                     <el-input
@@ -200,14 +320,26 @@
                             :title="item.sourceFieldName"
                             @click="insertFieldToCodeMirror('['+item.sourceFieldName+']')"
                           >
-                            <svg-icon v-if="item.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
-                            <svg-icon v-if="item.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
+                            <svg-icon
+                              v-if="item.deExtractType === 0"
+                              icon-class="field_text"
+                              class="field-icon-text"
+                            />
+                            <svg-icon
+                              v-if="item.deExtractType === 1"
+                              icon-class="field_time"
+                              class="field-icon-time"
+                            />
                             <svg-icon
                               v-if="item.deExtractType === 2 || item.deExtractType === 3"
                               icon-class="field_value"
                               class="field-icon-value"
                             />
-                            <svg-icon v-if="item.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
+                            <svg-icon
+                              v-if="item.deExtractType === 5"
+                              icon-class="field_location"
+                              class="field-icon-location"
+                            />
                             {{ item.sourceFieldName }}
                           </span>
                         </transition-group>
@@ -218,15 +350,26 @@
               </el-row>
             </el-row>
           </el-row>
-          <el-row v-else style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
+          <el-row
+            v-else
+            style="height: 100%; background-color: var(--MainContentBG);"
+            class="custom-position"
+          >
             {{ $t('panel.select_dimension') }}
           </el-row>
         </el-col>
       </el-row>
     </el-row>
     <el-row class="root-class">
-      <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
-      <el-button type="primary" size="mini" @click="save()">{{ $t('commons.confirm') }}</el-button>
+      <el-button
+        size="mini"
+        @click="cancel()"
+      >{{ $t('commons.cancel') }}</el-button>
+      <el-button
+        type="primary"
+        size="mini"
+        @click="save()"
+      >{{ $t('commons.confirm') }}</el-button>
     </el-row>
   </el-row>
 </template>
@@ -261,7 +404,7 @@ import 'codemirror/keymap/emacs.js'
 import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/hint/sql-hint'
 import 'codemirror/addon/hint/show-hint'
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   components: { codemirror, draggable },
@@ -363,9 +506,9 @@ export default {
       let checkJumpStr
       if (chartDetails.type === 'table-pivot') {
         checkJumpStr = chartDetails.yaxis + chartDetails.yaxisExt + chartDetails.drillFields
-      }else if(chartDetails.type === 'table-info') {
+      } else if (chartDetails.type === 'table-info') {
         checkJumpStr = chartDetails.xaxis + chartDetails.drillFields
-      }else {
+      } else {
         checkJumpStr = checkAllAxisStr
       }
       // 获取可关联的仪表板
diff --git a/frontend/src/views/panel/OuterParamsSet/index.vue b/frontend/src/views/panel/OuterParamsSet/index.vue
index 1dfbb3f020..8927693ba0 100644
--- a/frontend/src/views/panel/OuterParamsSet/index.vue
+++ b/frontend/src/views/panel/OuterParamsSet/index.vue
@@ -1,12 +1,18 @@
 <template>
-  <el-row v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="height: 430px">
+  <el-row
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    style="height: 430px"
+  >
     <el-row>
       <span style="font-weight:600;margin-right: 20px">{{ $t('panel.outer_param_set') }}</span>
       <el-checkbox v-model="outerParams.checked">{{ $t('panel.enable_outer_param_set') }}</el-checkbox>
     </el-row>
     <el-row v-loading="loading">
       <el-row class="preview">
-        <el-col :span="8" style="height:100%;overflow-y: hidden">
+        <el-col
+          :span="8"
+          style="height:100%;overflow-y: hidden"
+        >
           <el-row class="tree-head">
             <span style="float: left;margin-left: 30px">{{ $t('panel.param_name') }}</span>
             <span style="float: right;margin-right: 10px">{{ $t('panel.enable_param') }}</span>
@@ -20,7 +26,10 @@
               :props="treeProp"
               @node-click="nodeClick"
             >
-              <span slot-scope="{ node, data }" class="custom-tree-node">
+              <span
+                slot-scope="{ node, data }"
+                class="custom-tree-node"
+              >
                 <span>
                   <span style="margin-left: 6px"><el-input
                     v-model="data.paramName"
@@ -50,10 +59,19 @@
             </el-tree>
           </el-row>
           <el-row class="tree-bottom">
-            <el-button size="mini" type="success" icon="el-icon-plus" round @click="addOuterParamsInfo">{{ $t('panel.add_param') }}</el-button>
+            <el-button
+              size="mini"
+              type="success"
+              icon="el-icon-plus"
+              round
+              @click="addOuterParamsInfo"
+            >{{ $t('panel.add_param') }}</el-button>
           </el-row>
         </el-col>
-        <el-col :span="16" class="preview-show">
+        <el-col
+          :span="16"
+          class="preview-show"
+        >
           <el-row v-if="outerParamsInfo">
             <el-row class="top_border">
               <el-row style="margin-top: 10px">
@@ -65,7 +83,10 @@
                 </el-col>
               </el-row>
               <el-row style="height: 266px;overflow-y: auto">
-                <el-row v-for="(targetViewInfo,index) in outerParamsInfo.targetViewInfoList" :key="index">
+                <el-row
+                  v-for="(targetViewInfo,index) in outerParamsInfo.targetViewInfoList"
+                  :key="index"
+                >
                   <el-col :span="11">
                     <div class="select-filed">
                       <el-select
@@ -81,11 +102,23 @@
                           :label="item.name"
                           :value="item.id"
                         >
-                          <span v-if="item.isPlugin" style="float: left">
-                            <svg-icon :icon-class="item.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + item.type + '/svg') : item.type" style="width: 14px;height: 14px" />
+                          <span
+                            v-if="item.isPlugin"
+                            style="float: left"
+                          >
+                            <svg-icon
+                              :icon-class="item.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + item.type + '/svg') : item.type"
+                              style="width: 14px;height: 14px"
+                            />
                           </span>
-                          <span v-else style="float: left">
-                            <svg-icon :icon-class="item.type" style="width: 14px;height: 14px" />
+                          <span
+                            v-else
+                            style="float: left"
+                          >
+                            <svg-icon
+                              :icon-class="item.type"
+                              style="width: 14px;height: 14px"
+                            />
                           </span>
                           <span style="float: left; font-size: 12px"> {{ item.name }}</span>
                         </el-option>
@@ -107,8 +140,16 @@
                           :value="viewField.id"
                         >
                           <span style="float: left">
-                            <svg-icon v-if="viewField.deType === 0" icon-class="field_text" class="field-icon-text" />
-                            <svg-icon v-if="viewField.deType === 1" icon-class="field_time" class="field-icon-time" />
+                            <svg-icon
+                              v-if="viewField.deType === 0"
+                              icon-class="field_text"
+                              class="field-icon-text"
+                            />
+                            <svg-icon
+                              v-if="viewField.deType === 1"
+                              icon-class="field_time"
+                              class="field-icon-time"
+                            />
                             <svg-icon
                               v-if="viewField.deType === 2 || viewField.deType === 3"
                               icon-class="field_value"
@@ -140,15 +181,27 @@
               </el-row>
 
               <el-row class="bottom">
-                <el-button size="mini" type="success" icon="el-icon-plus" round @click="addOuterParamsField">{{
+                <el-button
+                  size="mini"
+                  type="success"
+                  icon="el-icon-plus"
+                  round
+                  @click="addOuterParamsField"
+                >{{
                   $t('panel.add_param_link_field') }}
                 </el-button>
               </el-row>
 
               <!--    <el-button slot="reference">T</el-button>-->
-              <i slot="reference" class="icon iconfont icon-edit slot-class" />
+              <i
+                slot="reference"
+                class="icon iconfont icon-edit slot-class"
+              />
             </el-row>
-            <el-row v-if="outerParamsInfo.linkType==='outer'" style="height: 300px">
+            <el-row
+              v-if="outerParamsInfo.linkType==='outer'"
+              style="height: 300px"
+            >
               <el-input
                 v-model="outerParamsInfo.content"
                 :autosize="{ minRows: 14}"
@@ -157,15 +210,26 @@
               />
             </el-row>
           </el-row>
-          <el-row v-else style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
+          <el-row
+            v-else
+            style="height: 100%; background-color: var(--MainContentBG);"
+            class="custom-position"
+          >
             {{ $t('panel.select_param') }}
           </el-row>
         </el-col>
       </el-row>
     </el-row>
     <el-row class="root-class">
-      <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
-      <el-button type="primary" size="mini" @click="save()">{{ $t('commons.confirm') }}</el-button>
+      <el-button
+        size="mini"
+        @click="cancel()"
+      >{{ $t('commons.cancel') }}</el-button>
+      <el-button
+        type="primary"
+        size="mini"
+        @click="save()"
+      >{{ $t('commons.confirm') }}</el-button>
     </el-row>
   </el-row>
 </template>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
index 687d98a346..9e78ec1d31 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
@@ -1,16 +1,27 @@
 <template>
   <div style="width: 100%;margin-top: 12px">
-    <el-form ref="overallSettingForm" :model="overallSettingForm" size="mini">
+    <el-form
+      ref="overallSettingForm"
+      :model="overallSettingForm"
+      size="mini"
+    >
       <el-col>
         <span class="custom-item-text">{{ $t('panel.panel_background_item') }}</span>
       </el-col>
       <el-col>
-        <el-radio-group v-model="panel.backgroundType" size="mini" @change="onChangeType()">
+        <el-radio-group
+          v-model="panel.backgroundType"
+          size="mini"
+          @change="onChangeType()"
+        >
           <el-radio label="color">{{ $t('chart.color') }}</el-radio>
           <el-radio label="image">{{ $t('panel.photo') }}</el-radio>
         </el-radio-group>
       </el-col>
-      <el-col v-show="panel.backgroundType==='color'" :span="10">
+      <el-col
+        v-show="panel.backgroundType==='color'"
+        :span="10"
+      >
         <el-color-picker
           v-model="panel.color"
           :predefine="predefineColors"
@@ -19,7 +30,10 @@
           @change="onChangeType"
         />
       </el-col>
-      <el-col v-show="panel.backgroundType==='image'" span="10">
+      <el-col
+        v-show="panel.backgroundType==='image'"
+        span="10"
+      >
         <el-upload
           action=""
           accept=".jpeg,.jpg,.png,.gif"
@@ -33,15 +47,39 @@
         >
           <i class="el-icon-plus" />
         </el-upload>
-        <el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
-          <img width="100%" :src="dialogImageUrl" alt="">
+        <el-dialog
+          top="25vh"
+          width="600px"
+          :modal-append-to-body="false"
+          :visible.sync="dialogVisible"
+        >
+          <img
+            width="100%"
+            :src="dialogImageUrl"
+            alt=""
+          >
         </el-dialog>
       </el-col>
       <el-col v-show="panel.backgroundType==='image'">
-        <span v-show="!this.panel.imageUrl" class="image-hint">{{ $t('panel.panel_background_image_tips') }}</span>
-        <span v-show="this.panel.imageUrl" class="re-update-span" @click="goFile">{{ $t('panel.reUpload') }}</span>
+        <span
+          v-show="!panel.imageUrl"
+          class="image-hint"
+        >{{ $t('panel.panel_background_image_tips') }}</span>
+        <span
+          v-show="panel.imageUrl"
+          class="re-update-span"
+          @click="goFile"
+        >{{ $t('panel.reUpload') }}</span>
       </el-col>
-      <input id="input" ref="files" type="file" accept=".jpeg,.jpg,.png,.gif" hidden @click="e => {e.target.value = '';}" @change="reUpload">
+      <input
+        id="input"
+        ref="files"
+        type="file"
+        accept=".jpeg,.jpg,.png,.gif"
+        hidden
+        @click="e => {e.target.value = '';}"
+        @change="reUpload"
+      >
     </el-form>
   </div>
 </template>
@@ -52,8 +90,7 @@ import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import { uploadFileResult } from '@/api/staticResource/staticResource'
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
-
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'BackgroundSelector',
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
index c743cb7cac..5bb163e0e7 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
@@ -7,10 +7,22 @@
         trigger="click"
       >
         <el-col>
-          <el-radio v-model="panel.gap" label="yes" @change="onChangePanelStyle">{{ $t('panel.gap') }}</el-radio>
-          <el-radio v-model="panel.gap" label="no" @change="onChangePanelStyle">{{ $t('panel.no_gap') }}</el-radio>
+          <el-radio
+            v-model="panel.gap"
+            label="yes"
+            @change="onChangePanelStyle"
+          >{{ $t('panel.gap') }}</el-radio>
+          <el-radio
+            v-model="panel.gap"
+            label="no"
+            @change="onChangePanelStyle"
+          >{{ $t('panel.no_gap') }}</el-radio>
         </el-col>
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.component_gap') }} <i
+        <el-button
+          slot="reference"
+          size="mini"
+          class="shape-item"
+        >{{ $t('panel.component_gap') }} <i
           class="el-icon-setting el-icon--right"
         /></el-button>
       </el-popover>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
index 72090ff79e..6e7de0d7be 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
@@ -2,20 +2,55 @@
   <div style="width: 100%">
     <el-row>
       <el-col class="custom-item el-form-item">
-        <el-checkbox v-model="componentStyleForm.backgroundColorSelect" style="margin-right: 10px;float: right" @change="themeChange('backgroundColorSelect')">
+        <el-checkbox
+          v-model="componentStyleForm.backgroundColorSelect"
+          style="margin-right: 10px;float: right"
+          @change="themeChange('backgroundColorSelect')"
+        >
           <span style="font-size: 12px">{{ $t('panel.color') }}</span>
         </el-checkbox>
       </el-col>
       <el-col :span="10">
-        <el-color-picker v-model="componentStyleForm.color" :disabled="!componentStyleForm.backgroundColorSelect" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('color')" />
+        <el-color-picker
+          v-model="componentStyleForm.color"
+          :disabled="!componentStyleForm.backgroundColorSelect"
+          size="mini"
+          class="color-picker-style"
+          :predefine="predefineColors"
+          @change="themeChange('color')"
+        />
       </el-col>
     </el-row>
-    <el-form ref="componentStyleForm" :model="componentStyleForm" label-width="70px" size="mini">
-      <el-form-item :label="$t('panel.opacity')" class="form-item">
-        <el-slider v-model="componentStyleForm.alpha" :disabled="!componentStyleForm.backgroundColorSelect" show-input :show-input-controls="false" input-size="mini" @change="themeChange('alpha')" />
+    <el-form
+      ref="componentStyleForm"
+      :model="componentStyleForm"
+      label-width="70px"
+      size="mini"
+    >
+      <el-form-item
+        :label="$t('panel.opacity')"
+        class="form-item"
+      >
+        <el-slider
+          v-model="componentStyleForm.alpha"
+          :disabled="!componentStyleForm.backgroundColorSelect"
+          show-input
+          :show-input-controls="false"
+          input-size="mini"
+          @change="themeChange('alpha')"
+        />
       </el-form-item>
-      <el-form-item :label="$t('panel.board_radio')" class="form-item">
-        <el-slider v-model="componentStyleForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="themeChange('borderRadius')" />
+      <el-form-item
+        :label="$t('panel.board_radio')"
+        class="form-item"
+      >
+        <el-slider
+          v-model="componentStyleForm.borderRadius"
+          show-input
+          :show-input-controls="false"
+          input-size="mini"
+          @change="themeChange('borderRadius')"
+        />
       </el-form-item>
     </el-form>
   </div>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
index e97f9de547..7ae4b84cba 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
@@ -1,43 +1,112 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="filterForm" :model="filterForm" label-width="80px" size="mini">
+      <el-form
+        ref="filterForm"
+        :model="filterForm"
+        label-width="80px"
+        size="mini"
+      >
         <div>
-          <el-form-item :label="$t('chart.text_h_position')" class="form-item">
-            <el-radio-group v-model="filterForm.horizontal" size="mini" @change="themeChange('horizontal')">
+          <el-form-item
+            :label="$t('chart.text_h_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="filterForm.horizontal"
+              size="mini"
+              @change="themeChange('horizontal')"
+            >
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
-              <el-radio-button :disabled="filterForm.vertical === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button
+                :disabled="filterForm.vertical === 'center'"
+                label="center"
+              >{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_v_position')" class="form-item">
-            <el-radio-group v-model="filterForm.vertical" size="mini" @change="themeChange('vertical')">
+          <el-form-item
+            :label="$t('chart.text_v_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="filterForm.vertical"
+              size="mini"
+              @change="themeChange('vertical')"
+            >
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
-              <el-radio-button :disabled="filterForm.horizontal === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button
+                :disabled="filterForm.horizontal === 'center'"
+                label="center"
+              >{{ $t('chart.text_pos_center') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="'标题颜色'" class="form-item">
-            <el-color-picker v-model="filterForm.color" class="color-picker-style" :predefine="predefineColors" @change="themeChange('color')" />
+          <el-form-item
+            :label="'标题颜色'"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="filterForm.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="themeChange('color')"
+            />
           </el-form-item>
           <el-divider>输入框样式(颜色)</el-divider>
           <el-row style="height: 40px;overflow: hidden;">
-            <el-col :span="4" style="padding-left: 10px;padding-top: 8px">
+            <el-col
+              :span="4"
+              style="padding-left: 10px;padding-top: 8px"
+            >
               边框
             </el-col>
-            <el-col :span="4" style="padding-top: 5px">
-              <el-color-picker v-model="filterForm.brColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('brColor')" />
+            <el-col
+              :span="4"
+              style="padding-top: 5px"
+            >
+              <el-color-picker
+                v-model="filterForm.brColor"
+                size="mini"
+                class="color-picker-style"
+                :predefine="predefineColors"
+                @change="themeChange('brColor')"
+              />
             </el-col>
-            <el-col :span="4" style="padding-left: 10px;padding-top: 8px">
+            <el-col
+              :span="4"
+              style="padding-left: 10px;padding-top: 8px"
+            >
               文字
             </el-col>
-            <el-col :span="4" style="padding-top: 5px">
-              <el-color-picker v-model="filterForm.wordColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('wordColor')" />
+            <el-col
+              :span="4"
+              style="padding-top: 5px"
+            >
+              <el-color-picker
+                v-model="filterForm.wordColor"
+                size="mini"
+                class="color-picker-style"
+                :predefine="predefineColors"
+                @change="themeChange('wordColor')"
+              />
             </el-col>
-            <el-col :span="4" style="padding-left: 10px;padding-top: 8px">
+            <el-col
+              :span="4"
+              style="padding-left: 10px;padding-top: 8px"
+            >
               背景
             </el-col>
-            <el-col :span="4" style="padding-top: 5px">
-              <el-color-picker v-model="filterForm.innerBgColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('innerBgColor')" />
+            <el-col
+              :span="4"
+              style="padding-top: 5px"
+            >
+              <el-color-picker
+                v-model="filterForm.innerBgColor"
+                size="mini"
+                class="color-picker-style"
+                :predefine="predefineColors"
+                @change="themeChange('innerBgColor')"
+              />
             </el-col>
           </el-row>
         </div>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
index 252efc1ec5..62c73cee22 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
@@ -25,7 +25,11 @@
         <el-row class="custom-item-text-row"><span class="custom-item-text bl">{{ $t('panel.component_gap') }}</span>
         </el-row>
         <el-row class="function-area">
-          <el-radio-group v-model="overallSettingForm.panel.gap" size="mini" @change="themeChange()">
+          <el-radio-group
+            v-model="overallSettingForm.panel.gap"
+            size="mini"
+            @change="themeChange()"
+          >
             <el-radio label="yes">{{ $t('panel.gap') }}</el-radio>
             <el-radio label="no">{{ $t('panel.no_gap') }}</el-radio>
           </el-radio-group>
@@ -59,8 +63,14 @@
             size="mini"
             @change="themeChange"
           >
-            <el-option :label="$t('panel.minute')" :value="'minute'" />
-            <el-option :label="$t('panel.second')" :value="'second'" />
+            <el-option
+              :label="$t('panel.minute')"
+              :value="'minute'"
+            />
+            <el-option
+              :label="$t('panel.second')"
+              :value="'second'"
+            />
           </el-select>
         </el-row>
       </el-row>
@@ -69,11 +79,18 @@
           <span class="custom-item-text bl">
             {{ $t('panel.panel_view_result_show') }}
             <span>
-              <el-tooltip class="item" effect="dark" placement="bottom">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                placement="bottom"
+              >
                 <div slot="content">
                   {{ $t('panel.panel_view_result_tips') }}
                 </div>
-                <i class="el-icon-info" style="cursor: pointer;" />
+                <i
+                  class="el-icon-info"
+                  style="cursor: pointer;"
+                />
               </el-tooltip>
             </span>
           </span>
@@ -93,7 +110,10 @@
                 </el-radio>
               </el-radio-group>
             </el-col>
-            <el-col :span="8" class="slider-area">
+            <el-col
+              :span="8"
+              class="slider-area"
+            >
               <el-slider
                 v-model="overallSettingForm.panel.resultCount"
                 :disabled="overallSettingForm.panel.resultMode==='all'"
@@ -143,7 +163,6 @@ export default {
       overallSettingForm: {}
     }
   },
-  watch: {},
   computed: {
     ...mapState([
       'canvasStyleData'
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
index ef4fe8ea53..5e6be8eaa9 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
@@ -7,13 +7,28 @@
         trigger="click"
       >
         <el-col v-if="aidedDesign">
-          <el-form ref="aidedForm" label-width="110px" size="mini">
-            <el-form-item :label="'辅助网格'" class="form-item form-item-slider">
-              <el-checkbox v-model="aidedDesign.showGrid" size="mini" @change="onChangePanelStyle" />
+          <el-form
+            ref="aidedForm"
+            label-width="110px"
+            size="mini"
+          >
+            <el-form-item
+              :label="'辅助网格'"
+              class="form-item form-item-slider"
+            >
+              <el-checkbox
+                v-model="aidedDesign.showGrid"
+                size="mini"
+                @change="onChangePanelStyle"
+              />
             </el-form-item>
           </el-form>
         </el-col>
-        <el-button slot="reference" size="mini" class="shape-item">辅助设计 <i
+        <el-button
+          slot="reference"
+          size="mini"
+          class="shape-item"
+        >辅助设计 <i
           class="el-icon-setting el-icon--right"
         /></el-button>
       </el-popover>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue
index 8996820fcf..73596d7670 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue
@@ -6,8 +6,15 @@
         width="400"
         trigger="click"
       >
-        <background-color-selector :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon--right" /></el-button>
+        <background-color-selector
+          :chart="chart"
+          @onChangeBackgroundForm="onChangeBackgroundForm"
+        />
+        <el-button
+          slot="reference"
+          size="mini"
+          class="shape-item"
+        >{{ $t('chart.background') }}<i class="el-icon-setting el-icon--right" /></el-button>
       </el-popover>
     </div>
   </div>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
index 17cbe24635..421557c96c 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
@@ -1,9 +1,17 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
+      <el-form
+        ref="colorForm"
+        :model="colorForm"
+        label-width="80px"
+        size="mini"
+      >
         <div>
-          <el-form-item :label="$t('chart.color_case')" class="form-item">
+          <el-form-item
+            :label="$t('chart.color_case')"
+            class="form-item"
+          >
             <el-popover
               placement="bottom"
               width="400"
@@ -12,23 +20,52 @@
               <div style="padding: 6px 10px;">
                 <div>
                   <span class="color-label">{{ $t('chart.system_case') }}</span>
-                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')">
-                    <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
+                  <el-select
+                    v-model="colorForm.value"
+                    :placeholder="$t('chart.pls_slc_color_case')"
+                    size="mini"
+                    @change="changeColorOption('value')"
+                  >
+                    <el-option
+                      v-for="option in colorCases"
+                      :key="option.value"
+                      :label="option.name"
+                      :value="option.value"
+                      style="display: flex;align-items: center;"
+                    >
                       <div style="float: left">
-                        <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
+                        <span
+                          v-for="(c,index) in option.colors"
+                          :key="index"
+                          :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}"
+                        />
                       </div>
                       <span style="margin-left: 4px;">{{ option.name }}</span>
                     </el-option>
                   </el-select>
-                  <el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">{{ $t('commons.reset') }}</el-button>
+                  <el-button
+                    size="mini"
+                    type="text"
+                    style="margin-left: 2px;"
+                    @click="resetCustomColor"
+                  >{{ $t('commons.reset') }}</el-button>
                 </div>
                 <!--自定义配色方案-->
                 <div>
                   <div style="display: flex;align-items: center;margin-top: 10px;">
                     <span class="color-label">{{ $t('chart.custom_case') }}</span>
                     <span>
-                      <el-radio-group v-model="customColor" class="color-type">
-                        <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
+                      <el-radio-group
+                        v-model="customColor"
+                        class="color-type"
+                      >
+                        <el-radio
+                          v-for="(c,index) in colorForm.colors"
+                          :key="index"
+                          :label="c"
+                          style="padding: 2px;"
+                          @change="switchColor(index)"
+                        >
                           <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
                         </el-radio>
                       </el-radio-group>
@@ -37,44 +74,121 @@
                   <div style="display: flex;align-items: center;margin-top: 10px;">
                     <span class="color-label" />
                     <span>
-                      <el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
+                      <el-color-picker
+                        v-model="customColor"
+                        class="color-picker-style"
+                        :predefine="predefineColors"
+                        @change="switchColorCase"
+                      />
                     </span>
                   </div>
                 </div>
               </div>
 
-              <div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
-                <span v-for="(c,index) in colorForm.colors" :key="index" :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+              <div
+                slot="reference"
+                style="cursor: pointer;margin-top: 2px;width: 180px;"
+              >
+                <span
+                  v-for="(c,index) in colorForm.colors"
+                  :key="index"
+                  :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}"
+                />
               </div>
             </el-popover>
           </el-form-item>
-          <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
-            <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase('alpha')" />
+          <el-form-item
+            :label="$t('chart.not_alpha')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="colorForm.alpha"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              @change="changeColorCase('alpha')"
+            />
           </el-form-item>
           <el-divider>{{ $t('panel.card_color_matching') }}</el-divider>
-          <el-form-item :label="$t('chart.quota_color')" class="form-item">
-            <el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('quotaColor')" />
+          <el-form-item
+            :label="$t('chart.quota_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.quotaColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('quotaColor')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.dimension_color')" class="form-item">
-            <el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('dimensionColor')" />
+          <el-form-item
+            :label="$t('chart.dimension_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.dimensionColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('dimensionColor')"
+            />
           </el-form-item>
         </div>
         <el-divider>{{ $t('panel.table_color_matching') }}</el-divider>
         <div>
-          <el-form-item :label="$t('chart.table_header_bg')" class="form-item">
-            <el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderBgColor')" />
+          <el-form-item
+            :label="$t('chart.table_header_bg')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableHeaderBgColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('tableHeaderBgColor')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.table_item_bg')" class="form-item">
-            <el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableItemBgColor')" />
+          <el-form-item
+            :label="$t('chart.table_item_bg')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableItemBgColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('tableItemBgColor')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.table_header_font_color')" class="form-item">
-            <el-color-picker v-model="colorForm.tableHeaderFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderFontColor')" />
+          <el-form-item
+            :label="$t('chart.table_header_font_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableHeaderFontColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('tableHeaderFontColor')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.table_item_font_color')" class="form-item">
-            <el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableFontColor')" />
+          <el-form-item
+            :label="$t('chart.table_item_font_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableFontColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('tableFontColor')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.table_border_color')" class="form-item">
-            <el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableBorderColor')" />
+          <el-form-item
+            :label="$t('chart.table_border_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableBorderColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('tableBorderColor')"
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewAttribute.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewAttribute.vue
index 1ec75b1016..ca0fd5bc48 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewAttribute.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewAttribute.vue
@@ -1,11 +1,33 @@
 <template>
   <div style="width: 100%;">
-    <el-form ref="viewAttributeForm" :model="viewAttributeForm" label-width="70px" size="mini">background_color
-      <el-form-item :label="$t('panel.background_color')" class="form-item">
-        <el-color-picker v-model="viewAttributeForm.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="viewAttributeChange" />
+    <el-form
+      ref="viewAttributeForm"
+      :model="viewAttributeForm"
+      label-width="70px"
+      size="mini"
+    >background_color
+      <el-form-item
+        :label="$t('panel.background_color')"
+        class="form-item"
+      >
+        <el-color-picker
+          v-model="viewAttributeForm.color"
+          :predefine="predefineColors"
+          size="mini"
+          style="cursor: pointer;z-index: 1004;"
+          @change="viewAttributeChange"
+        />
       </el-form-item>
-      <el-form-item :label="$t('panel.opacity')" class="form-item">
-        <el-slider v-model="viewAttributeForm.alpha" show-input :show-input-controls="false" input-size="mini" />
+      <el-form-item
+        :label="$t('panel.opacity')"
+        class="form-item"
+      >
+        <el-slider
+          v-model="viewAttributeForm.alpha"
+          show-input
+          :show-input-controls="false"
+          input-size="mini"
+        />
       </el-form-item>
     </el-form>
   </div>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue
index be2283f76a..aedb4b4383 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue
@@ -3,14 +3,22 @@
     <div style="width: 100%;">
       <el-row>
         <el-col :span="16">
-          <el-radio-group v-model="panel.resultMode" class="radio-span" size="mini" @change="onChangePanelStyle">
+          <el-radio-group
+            v-model="panel.resultMode"
+            class="radio-span"
+            size="mini"
+            @change="onChangePanelStyle"
+          >
             <el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
             <el-radio label="custom">
               <span>{{ $t('panel.panel') }} </span>
             </el-radio>
           </el-radio-group>
         </el-col>
-        <el-col :span="8" class="slider-area">
+        <el-col
+          :span="8"
+          class="slider-area"
+        >
           <el-slider
             v-model="panel.resultCount"
             :disabled="panel.resultMode==='all'"
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
index 5180770753..9e874e140f 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
@@ -1,36 +1,91 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
+      <el-form
+        ref="titleForm"
+        :model="titleForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="titleForm.show"
+            @change="changeTitleStyle('show')"
+          >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="titleForm.show">
-          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
-              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          <el-form-item
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="titleForm.fontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeTitleStyle('fontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('color')" />
+          <el-form-item
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="titleForm.color"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeTitleStyle('color')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('chart.text_h_position')" class="form-item">
-            <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
+          <el-form-item
+            :label="$t('chart.text_h_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="titleForm.hPosition"
+              size="mini"
+              @change="changeTitleStyle('hPosition')"
+            >
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_v_position')" class="form-item">
-            <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle('vPosition')">
+          <el-form-item
+            :label="$t('chart.text_v_position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="titleForm.vPosition"
+              size="mini"
+              @change="changeTitleStyle('vPosition')"
+            >
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_style')" class="form-item">
-            <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
-            <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
+          <el-form-item
+            :label="$t('chart.text_style')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="titleForm.isItalic"
+              @change="changeTitleStyle('isItalic')"
+            >{{ $t('chart.italic') }}</el-checkbox>
+            <el-checkbox
+              v-model="titleForm.isBolder"
+              @change="changeTitleStyle('isBolder')"
+            >{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
         </div>
       </el-form>
@@ -60,10 +115,10 @@ export default {
   ]),
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange',this.initForm)
+    bus.$on('onThemeColorChange', this.initForm)
   },
   beforeDestroy() {
-    bus.$off('onThemeColorChange',this.initForm)
+    bus.$off('onThemeColorChange', this.initForm)
   },
   mounted() {
     this.init()
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
index d6940b92c5..ff37e749d6 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
@@ -3,8 +3,14 @@
     <el-row v-loading="slidersLoading">
       <div class="direction-left">
         <span>&nbsp;</span>
-        <ul v-show="currentIndex>1" class="direction">
-          <li class="left" @click="move(sliderWidth, 1, speed)">
+        <ul
+          v-show="currentIndex>1"
+          class="direction"
+        >
+          <li
+            class="left"
+            @click="move(sliderWidth, 1, speed)"
+          >
             <svg
               class="icon"
               width="15px"
@@ -24,7 +30,11 @@
       <el-col :span="24">
         <el-row id="slider">
           <div class="slider-window">
-            <ul v-if="!slidersLoading" class="container" :style="containerStyle">
+            <ul
+              v-if="!slidersLoading"
+              class="container"
+              :style="containerStyle"
+            >
               <li>
                 <div style="width:290px; height: 250px;overflow: hidden">
                   <subject-template-item
@@ -35,7 +45,10 @@
                   />
                 </div>
               </li>
-              <li v-for="(itemSlider, index) in sliders" :key="index">
+              <li
+                v-for="(itemSlider, index) in sliders"
+                :key="index"
+              >
                 <div style="width:290px; height: 250px;">
                   <subject-template-item
                     v-for="item in itemSlider"
@@ -61,8 +74,14 @@
       </el-col>
       <div class="direction-right">
         <span>&nbsp;</span>
-        <ul v-show="currentIndex<sliders.length" class="direction">
-          <li class="right" @click="move(sliderWidth, -1, speed)">
+        <ul
+          v-show="currentIndex<sliders.length"
+          class="direction"
+        >
+          <li
+            class="right"
+            @click="move(sliderWidth, -1, speed)"
+          >
             <svg
               class="icon"
               width="15px"
@@ -81,8 +100,14 @@
       </div>
     </el-row>
     <el-row>
-      <el-col :span="7" style="height: 30px" />
-      <el-col :span="10" style="height: 30px">
+      <el-col
+        :span="7"
+        style="height: 30px"
+      />
+      <el-col
+        :span="10"
+        style="height: 30px"
+      >
         <span hidden>B</span>
         <ul class="dots">
           <li
@@ -93,7 +118,10 @@
           />
         </ul>
       </el-col>
-      <el-col :span="7" style="margin: auto;height: 30px;font-size:12px;color:#3685f2">
+      <el-col
+        :span="7"
+        style="margin: auto;height: 30px;font-size:12px;color:#3685f2"
+      >
         <span><a @click="saveSelfSubject">{{ $t('commons.save') }}</a></span>
       </el-col>
     </el-row>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
index 91b7e4f354..52a78ce477 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
@@ -12,9 +12,15 @@
       @click.stop="subjectChange"
     >
       <!-- 背景-->
-      <div class="allBack common-background" :style="customBackground" />
+      <div
+        class="allBack common-background"
+        :style="customBackground"
+      />
       <!-- 视图组件 背景-->
-      <div style="inset: 17px 10px 10px; position: absolute;" :style="chartBackground" />
+      <div
+        style="inset: 17px 10px 10px; position: absolute;"
+        :style="chartBackground"
+      />
       <!-- 视图组件 主题-->
       <div style="inset: 20px 13px 15px; position: absolute;">
         <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
@@ -77,7 +83,10 @@
       </div>
 
       <!-- 表格表头颜色 -->
-      <div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
+      <div
+        style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;"
+        :style="tableHeadBackground"
+      />
 
       <!-- 字体颜色 -->
       <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
@@ -108,7 +117,10 @@
       </div>
 
     </div>
-    <div class="title-main" @dblclick="setEdit">
+    <div
+      class="title-main"
+      @dblclick="setEdit"
+    >
       <div class="title-area">
         <el-input
           v-if="canEdit"
@@ -124,7 +136,11 @@
         >{{ subjectItem.name }}</span>
       </div>
     </div>
-    <i v-if="subjectItem.type==='self' && !canEdit" class="el-icon-delete delete-icon" @click.stop="subjectDelete" />
+    <i
+      v-if="subjectItem.type==='self' && !canEdit"
+      class="el-icon-delete delete-icon"
+      @click.stop="subjectDelete"
+    />
   </div>
 </template>
 
@@ -133,7 +149,7 @@ import { chartTransStr2Object } from '@/views/panel/panel'
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { saveOrUpdateSubject } from '@/api/panel/panel'
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'StyleTemplateItem',
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItemback.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItemback.vue
index e091dfa1e7..95f9c20f11 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItemback.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItemback.vue
@@ -4,45 +4,105 @@
       <i class="el-icon-error" />
       <i class="el-icon-edit" />
       <!-- 背景-->
-      <div style="inset: 0px; position: absolute;" :style="customBackground" />
+      <div
+        style="inset: 0px; position: absolute;"
+        :style="customBackground"
+      />
       <!-- 视图组件 背景-->
       <div style="inset: 17px 10px 10px; position: absolute; background: 0% 0% / cover rgb(255, 255, 255);" />
       <!-- 视图组件 主题-->
       <div style="inset: 20px 13px 15px; position: absolute;">
         <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
           <!--柱形-->
-          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+          <div
+            style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
         </div>
       </div>
 
       <!-- 表格表头颜色 -->
-      <div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
+      <div
+        style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;"
+        :style="tableHeadBackground"
+      />
 
       <!-- 字体颜色 -->
       <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
       </div>
 
     </div>
@@ -56,7 +116,7 @@
 
 <script>
 import { chartTransStr2Object } from '@/views/panel/panel'
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 export default {
   name: 'StyleTemplateItem',
   props: {
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
index 390fc68563..28bf4915a8 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
@@ -3,16 +3,36 @@
     <el-row v-loading="slidersLoading">
       <el-col :span="2">
         <span>&nbsp;</span>
-        <ul v-show="currentIndex>1" class="direction">
-          <li class="left" @click="move(sliderWidth, 1, speed)">
-            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
+        <ul
+          v-show="currentIndex>1"
+          class="direction"
+        >
+          <li
+            class="left"
+            @click="move(sliderWidth, 1, speed)"
+          >
+            <svg
+              class="icon"
+              width="15px"
+              height="15.00px"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+            ><path
+              fill="#ffffff"
+              d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
+            /></svg>
           </li>
         </ul>
       </el-col>
       <el-col :span="20">
         <el-row id="slider">
           <div class="window">
-            <ul v-if="!slidersLoading" class="container" :style="containerStyle">
+            <ul
+              v-if="!slidersLoading"
+              class="container"
+              :style="containerStyle"
+            >
               <li>
                 <div style="width:240px; height: 208px;overflow: hidden">
                   <subject-template-item
@@ -23,7 +43,10 @@
                   />
                 </div>
               </li>
-              <li v-for="(itemSlider, index) in sliders" :key="index">
+              <li
+                v-for="(itemSlider, index) in sliders"
+                :key="index"
+              >
                 <div style="width:240px; height: 208px;">
                   <subject-template-item
                     v-for="item in itemSlider"
@@ -49,16 +72,38 @@
       </el-col>
       <el-col :span="2">
         <span>&nbsp;</span>
-        <ul v-show="currentIndex<sliders.length" class="direction">
-          <li class="right" @click="move(sliderWidth, -1, speed)">
-            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
+        <ul
+          v-show="currentIndex<sliders.length"
+          class="direction"
+        >
+          <li
+            class="right"
+            @click="move(sliderWidth, -1, speed)"
+          >
+            <svg
+              class="icon"
+              width="15px"
+              height="15.00px"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+            ><path
+              fill="#ffffff"
+              d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"
+            /></svg>
           </li>
         </ul>
       </el-col>
     </el-row>
     <el-row>
-      <el-col :span="7" style="height: 30px" />
-      <el-col :span="10" style="height: 30px">
+      <el-col
+        :span="7"
+        style="height: 30px"
+      />
+      <el-col
+        :span="10"
+        style="height: 30px"
+      >
         <span hidden>B</span>
         <ul class="dots">
           <li
@@ -69,7 +114,10 @@
           />
         </ul>
       </el-col>
-      <el-col :span="7" style="margin: auto;height: 30px;font-size:12px;color:#3685f2">
+      <el-col
+        :span="7"
+        style="margin: auto;height: 30px;font-size:12px;color:#3685f2"
+      >
         <span><a @click="saveSelfSubject">{{ $t('commons.save') }}</a></span>
       </el-col>
     </el-row>
@@ -84,7 +132,6 @@ import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { uuid } from 'vue-uuid'
 
-
 export default {
   name: 'Slider',
   components: {
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
index 8825cb186a..d4d8bcf7ff 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
@@ -9,52 +9,126 @@
       ]"
       @click.stop="subjectChange"
     >
-      <i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
-      <span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
+      <i
+        v-if="subjectItem.type==='self'"
+        class="el-icon-error"
+        @click.stop="subjectDelete"
+      />
+      <span
+        v-show="themeSelected"
+        class="el-icon-success theme-selected-icon"
+      />
       <!-- 背景-->
-      <div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
+      <div
+        class="allBack"
+        :style="customBackground"
+        style="inset: 1px; position: absolute;"
+      />
       <!-- 视图组件 背景-->
-      <div style="inset: 17px 10px 10px; position: absolute;" :style="chartBackground" />
+      <div
+        style="inset: 17px 10px 10px; position: absolute;"
+        :style="chartBackground"
+      />
       <!-- 视图组件 主题-->
       <div style="inset: 20px 13px 15px; position: absolute;">
         <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
           <!--柱形-->
-          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+          <div
+            style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
         </div>
       </div>
 
       <!-- 表格表头颜色 -->
-      <div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
+      <div
+        style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;"
+        :style="tableHeadBackground"
+      />
 
       <!-- 字体颜色 -->
       <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
       </div>
 
     </div>
-    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;" @dblclick="setEdit">
+    <div
+      style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;"
+      @dblclick="setEdit"
+    >
       <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;overflow: hidden">
         <el-input
           v-if="canEdit"
@@ -63,7 +137,11 @@
           size="mini"
           @blur="loseFocus()"
         />
-        <span v-if="!canEdit" style="margin-top: 8px" :title="subjectItem.name">{{ subjectItem.name }}</span>
+        <span
+          v-if="!canEdit"
+          style="margin-top: 8px"
+          :title="subjectItem.name"
+        >{{ subjectItem.name }}</span>
       </div>
     </div>
   </div>
@@ -74,8 +152,7 @@ import { chartTransStr2Object } from '@/views/panel/panel'
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { saveOrUpdateSubject } from '@/api/panel/panel'
-import { resetViewCacheCallBack } from '@/api/chart/chart'
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'StyleTemplateItem',
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
index e091dfa1e7..95f9c20f11 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
@@ -4,45 +4,105 @@
       <i class="el-icon-error" />
       <i class="el-icon-edit" />
       <!-- 背景-->
-      <div style="inset: 0px; position: absolute;" :style="customBackground" />
+      <div
+        style="inset: 0px; position: absolute;"
+        :style="customBackground"
+      />
       <!-- 视图组件 背景-->
       <div style="inset: 17px 10px 10px; position: absolute; background: 0% 0% / cover rgb(255, 255, 255);" />
       <!-- 视图组件 主题-->
       <div style="inset: 20px 13px 15px; position: absolute;">
         <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
           <!--柱形-->
-          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+          <div
+            style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
         </div>
       </div>
 
       <!-- 表格表头颜色 -->
-      <div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
+      <div
+        style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;"
+        :style="tableHeadBackground"
+      />
 
       <!-- 字体颜色 -->
       <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
       </div>
 
     </div>
@@ -56,7 +116,7 @@
 
 <script>
 import { chartTransStr2Object } from '@/views/panel/panel'
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 export default {
   name: 'StyleTemplateItem',
   props: {
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 8e77395680..02f51d4b9b 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -5,30 +5,57 @@
     </div>
     <div class="theme-slider-position" />
     <div>
-      <slider v-if="sliderShow" @reload="sliderReload" />
+      <slider
+        v-if="sliderShow"
+        @reload="sliderReload"
+      />
     </div>
     <!--折叠面板-->
-    <div v-if="collapseShow" style="margin: 12px;overflow-y: auto">
+    <div
+      v-if="collapseShow"
+      style="margin: 12px;overflow-y: auto"
+    >
       <div>
-        <el-collapse v-model="activeNames" @change="handleChange">
-          <el-collapse-item :title="'整体配置'" name="panel">
+        <el-collapse
+          v-model="activeNames"
+          @change="handleChange"
+        >
+          <el-collapse-item
+            :title="'整体配置'"
+            name="panel"
+          >
             <el-row class="selector-div">
               <overall-setting />
             </el-row>
           </el-collapse-item>
-          <el-collapse-item :title="'仪表板背景'" name="panelBackground">
+          <el-collapse-item
+            :title="'仪表板背景'"
+            name="panelBackground"
+          >
             <background-selector />
           </el-collapse-item>
-          <el-collapse-item :title="'组件样式'" name="componentStyle">
+          <el-collapse-item
+            :title="'组件样式'"
+            name="componentStyle"
+          >
             <component-style />
           </el-collapse-item>
-          <el-collapse-item :title="'组件配色'" name="graphical">
+          <el-collapse-item
+            :title="'组件配色'"
+            name="graphical"
+          >
             <panel-color-selector @onColorChange="onColorChange" />
           </el-collapse-item>
-          <el-collapse-item :title="'图表标题'" name="table">
+          <el-collapse-item
+            :title="'图表标题'"
+            name="table"
+          >
             <view-title @onTextChange="onTextChange" />
           </el-collapse-item>
-          <el-collapse-item :title="'过滤组件'" name="filterComponent">
+          <el-collapse-item
+            :title="'过滤组件'"
+            name="filterComponent"
+          >
             <FilterStyleSelector />
           </el-collapse-item>
         </el-collapse>
diff --git a/frontend/src/views/panel/ViewSelect/index-with-drag.vue b/frontend/src/views/panel/ViewSelect/index-with-drag.vue
index 045eb8e95e..d3cef7029d 100644
--- a/frontend/src/views/panel/ViewSelect/index-with-drag.vue
+++ b/frontend/src/views/panel/ViewSelect/index-with-drag.vue
@@ -17,7 +17,7 @@
           ref="templateTree"
           :default-expanded-keys="defaultExpandedKeys"
           :show-checkbox="selectModel"
-          :data="data"
+          :data="treeData"
           node-key="id"
           :props="defaultProps"
           draggable
@@ -30,7 +30,10 @@
           @check="checkChanged"
           @node-drag-end="dragEnd"
         >
-          <span slot-scope="{ node, data }" class="custom-tree-node-list father">
+          <span
+            slot-scope="{ node, data }"
+            class="custom-tree-node-list father"
+          >
             <span style="display: flex; flex: 1 1 0%; width: 0px;">
               <span v-if="data.modelInnerType==='history'">
                 <i class="el-icon-collection" />
@@ -39,14 +42,26 @@
                 <i class="el-icon-folder" />
               </span>
               <span v-else-if="data.modelType==='panel'&& data.nodeType === 'leaf'">
-                <svg-icon icon-class="panel" class="ds-icon-scene" />
+                <svg-icon
+                  icon-class="panel"
+                  class="ds-icon-scene"
+                />
               </span>
               <span v-else>
-                <svg-icon :icon-class="data.isPlugin && data.modelInnerType && data.modelInnerType !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + data.modelInnerType + '/svg') : data.modelInnerType" style="width: 14px;height: 14px" />
+                <svg-icon
+                  :icon-class="data.isPlugin && data.modelInnerType && data.modelInnerType !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + data.modelInnerType + '/svg') : data.modelInnerType"
+                  style="width: 14px;height: 14px"
+                />
               </span>
-              <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+              <span
+                style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                :title="data.name"
+              >{{ data.name }}</span>
             </span>
-            <span v-if="data.mode===1" class="child">
+            <span
+              v-if="data.mode===1"
+              class="child"
+            >
               <span @click.stop>
                 <el-button
                   icon="el-icon-delete"
@@ -90,7 +105,7 @@ export default {
         label: 'name',
         disabled: 'disabled'
       },
-      data: [],
+      treeData: [],
       showdetail: false,
       detailItem: null,
       loading: false,
@@ -135,7 +150,7 @@ export default {
         if (this.selectModel) {
           this.setParentDisable(nodeDatas)
         }
-        this.data = nodeDatas
+        this.treeData = nodeDatas
         this.loading = false
       })
     },
diff --git a/frontend/src/views/panel/ViewSelect/index.vue b/frontend/src/views/panel/ViewSelect/index.vue
index 14d8f58692..e049cba6d6 100644
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@@ -11,8 +11,16 @@
             prefix-icon="el-icon-search"
           />
         </el-col>
-        <el-col v-if="!selectModel" :span="7">
-          <el-button type="primary" size="mini" style="float: right" @click="newChart">新建 </el-button>
+        <el-col
+          v-if="!selectModel"
+          :span="7"
+        >
+          <el-button
+            type="primary"
+            size="mini"
+            style="float: right"
+            @click="newChart"
+          >新建 </el-button>
         </el-col>
 
       </el-row>
@@ -21,7 +29,7 @@
           ref="templateTree"
           :default-expanded-keys="defaultExpandedKeys"
           :show-checkbox="selectModel"
-          :data="data"
+          :data="treeData"
           node-key="id"
           :props="defaultProps"
           draggable
@@ -34,7 +42,10 @@
           @check="checkChanged"
           @node-drag-end="dragEnd"
         >
-          <span slot-scope="{ node, data }" class="custom-tree-node-list father">
+          <span
+            slot-scope="{ node, data }"
+            class="custom-tree-node-list father"
+          >
             <span style="display: flex; flex: 1 1 0%; width: 0px;">
               <span v-if="data.modelInnerType==='history'">
                 <i class="el-icon-collection" />
@@ -43,14 +54,26 @@
                 <i class="el-icon-folder" />
               </span>
               <span v-else-if="data.modelType==='panel'&& data.nodeType === 'leaf'">
-                <svg-icon icon-class="panel" class="ds-icon-scene" />
+                <svg-icon
+                  icon-class="panel"
+                  class="ds-icon-scene"
+                />
               </span>
               <span v-else>
-                <svg-icon :icon-class="data.isPlugin && data.modelInnerType && data.modelInnerType !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + data.modelInnerType + '/svg') : data.modelInnerType" style="width: 14px;height: 14px" />
+                <svg-icon
+                  :icon-class="data.isPlugin && data.modelInnerType && data.modelInnerType !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + data.modelInnerType + '/svg') : data.modelInnerType"
+                  style="width: 14px;height: 14px"
+                />
               </span>
-              <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+              <span
+                style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                :title="data.name"
+              >{{ data.name }}</span>
             </span>
-            <span v-if="data.mode===1" class="child">
+            <span
+              v-if="data.mode===1"
+              class="child"
+            >
               <span @click.stop>
                 <el-button
                   icon="el-icon-delete"
@@ -94,7 +117,7 @@ export default {
         label: 'name',
         disabled: 'disabled'
       },
-      data: [],
+      treeData: [],
       showdetail: false,
       detailItem: null,
       loading: false,
@@ -139,7 +162,7 @@ export default {
         if (this.selectModel) {
           this.setParentDisable(nodeDatas)
         }
-        this.data = nodeDatas
+        this.treeData = nodeDatas
         this.loading = false
       })
     },
diff --git a/frontend/src/views/panel/ViewSelect/multiplexing.vue b/frontend/src/views/panel/ViewSelect/multiplexing.vue
index dfe3dd6d93..23de8ede10 100644
--- a/frontend/src/views/panel/ViewSelect/multiplexing.vue
+++ b/frontend/src/views/panel/ViewSelect/multiplexing.vue
@@ -3,8 +3,15 @@
     v-loading="panelLoading"
     class="main-class"
   >
-    <de-aside-container v-loading="viewLoading" class="aside-class" type="panel">
-      <multiplexing-view :view-data="viewData" @showDetails="showDetails" />
+    <de-aside-container
+      v-loading="viewLoading"
+      class="aside-class"
+      type="panel"
+    >
+      <multiplexing-view
+        :view-data="viewData"
+        @showDetails="showDetails"
+      />
     </de-aside-container>
     <de-main-container>
       <Preview
@@ -14,8 +21,14 @@
         :panel-info="panelInfo"
         :show-position="showPosition"
       />
-      <el-col v-else style="height: 100%;">
-        <el-row style="height: 100%; background-color: var(--ContentBG);" class="custom-position">
+      <el-col
+        v-else
+        style="height: 100%;"
+      >
+        <el-row
+          style="height: 100%; background-color: var(--ContentBG);"
+          class="custom-position"
+        >
           {{ $t('panel.select_panel_from_left') }}
         </el-row>
       </el-col>
diff --git a/frontend/src/views/panel/ViewSelect/multiplexingView.vue b/frontend/src/views/panel/ViewSelect/multiplexingView.vue
index 3c3b3b0e12..32866c5fba 100644
--- a/frontend/src/views/panel/ViewSelect/multiplexingView.vue
+++ b/frontend/src/views/panel/ViewSelect/multiplexingView.vue
@@ -1,5 +1,8 @@
 <template>
-  <el-col v-loading="loading" style="height: 100%; overflow-y: auto">
+  <el-col
+    v-loading="loading"
+    style="height: 100%; overflow-y: auto"
+  >
     <el-row style="margin-top: 5px">
       <el-row style="margin-left: 5px;margin-right: 5px">
         <el-col>
@@ -23,7 +26,10 @@
           :highlight-current="true"
           @node-click="showDetails"
         >
-          <span slot-scope="{ node, data }" class="custom-tree-node-list father">
+          <span
+            slot-scope="{ node, data }"
+            class="custom-tree-node-list father"
+          >
             <span style="display: flex; flex: 1 1 0%; width: 0px;">
               <span v-if="data.modelInnerType==='history'">
                 <i class="el-icon-collection" />
@@ -32,14 +38,26 @@
                 <i class="el-icon-folder" />
               </span>
               <span v-else-if="data.modelType==='panel'&& data.nodeType === 'leaf'">
-                <svg-icon icon-class="panel" class="ds-icon-scene" />
+                <svg-icon
+                  icon-class="panel"
+                  class="ds-icon-scene"
+                />
               </span>
               <span v-else>
-                <svg-icon :icon-class="data.isPlugin && data.modelInnerType && data.modelInnerType !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + data.modelInnerType + '/svg') : data.modelInnerType" style="width: 14px;height: 14px" />
+                <svg-icon
+                  :icon-class="data.isPlugin && data.modelInnerType && data.modelInnerType !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + data.modelInnerType + '/svg') : data.modelInnerType"
+                  style="width: 14px;height: 14px"
+                />
               </span>
-              <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+              <span
+                style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                :title="data.name"
+              >{{ data.name }}</span>
             </span>
-            <span v-if="data.mode===1" class="child">
+            <span
+              v-if="data.mode===1"
+              class="child"
+            >
               <span @click.stop>
                 <el-button
                   icon="el-icon-delete"
@@ -80,7 +98,6 @@ export default {
         label: 'name',
         disabled: 'disabled'
       },
-      data: [],
       detailItem: null,
       loading: false,
       plugins: null
diff --git a/frontend/src/views/panel/appTemplate/component/TemplateImport.vue b/frontend/src/views/panel/appTemplate/component/TemplateImport.vue
index d0a8ba6977..fefb319acc 100644
--- a/frontend/src/views/panel/appTemplate/component/TemplateImport.vue
+++ b/frontend/src/views/panel/appTemplate/component/TemplateImport.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="template-import"
     v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    class="template-import"
   >
     <el-form
       ref="templateImportForm"
@@ -9,35 +9,50 @@
       :model="templateInfo"
       :rules="templateInfoRules"
     >
-      <el-form-item :label="$t('app_template.app_name')" prop="name">
+      <el-form-item
+        :label="$t('app_template.app_name')"
+        prop="name"
+      >
         <div class="flex-template">
-          <el-input v-model="templateInfo.name" clearable size="small" />
-            <deBtn
-              style="margin-left: 10px"
-              class="el-icon-upload2"
-              secondary
-              @click="goFile"
-              >
-              {{$t('app_template.app_upload')}}
-            </deBtn
-            >
-            <input
-              id="input"
-              ref="files"
-              type="file"
-              accept=".DEAPP"
-              hidden
-              @change="handleFileChange"
-            />
+          <el-input
+            v-model="templateInfo.name"
+            clearable
+            size="small"
+          />
+          <deBtn
+            style="margin-left: 10px"
+            class="el-icon-upload2"
+            secondary
+            @click="goFile"
+          >
+            {{ $t('app_template.app_upload') }}
+          </deBtn>
+          <input
+            id="input"
+            ref="files"
+            type="file"
+            accept=".DEAPP"
+            hidden
+            @change="handleFileChange"
+          >
         </div>
       </el-form-item>
     </el-form>
-    <el-row class="preview" :style="classBackground" />
+    <el-row
+      class="preview"
+      :style="classBackground"
+    />
     <el-row class="de-root-class">
-      <deBtn secondary @click="cancel()">{{
+      <deBtn
+        secondary
+        @click="cancel()"
+      >{{
         $t("commons.cancel")
       }}</deBtn>
-      <deBtn type="primary" @click="save()">{{
+      <deBtn
+        type="primary"
+        @click="save()"
+      >{{
         $t("commons.confirm")
       }}</deBtn>
     </el-row>
@@ -45,17 +60,17 @@
 </template>
 
 <script>
-import { save,update, nameCheck } from "@/api/system/appTemplate";
-import msgCfm from "@/components/msgCfm/index";
-import { find } from "@/api/system/template";
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { save, update, nameCheck } from '@/api/system/appTemplate'
+import msgCfm from '@/components/msgCfm/index'
+import { find } from '@/api/system/template'
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   mixins: [msgCfm],
   props: {
     pid: {
       type: String,
-      required: true,
+      required: true
     },
     optType: {
       type: String,
@@ -63,11 +78,51 @@ export default {
     },
     appTemplateInfo: {
       type: Object,
-      required: false,
-    },
+      required: false
+    }
+  },
+  data() {
+    return {
+      appResultInfo: {},
+      importTemplateInfo: {
+        snapshot: ''
+      },
+      templateInfoRules: {
+        name: [
+          {
+            required: true,
+            message: this.$t('commons.input_content'),
+            trigger: 'change'
+          }
+        ]
+      },
+      recover: false,
+      templateInfo: {
+        id: null,
+        level: '1',
+        pid: this.pid,
+        name: '',
+        templateStyle: null,
+        templateData: null,
+        dynamicData: null,
+        staticResource: null,
+        snapshot: ''
+      }
+    }
+  },
+  computed: {
+    classBackground() {
+      if (this.templateInfo.snapshot) {
+        return {
+          background: `url(${imgUrlTrans(this.templateInfo.snapshot)}) no-repeat`
+        }
+      } else {
+        return {}
+      }
+    }
   },
   mounted() {
-    if('update'===this.optType){
+    if (this.optType === 'update') {
       this.templateInfo.id = this.appTemplateInfo.id
       this.templateInfo.name = this.appTemplateInfo.name
       this.templateInfo.snapshot = this.appTemplateInfo.snapshot
@@ -75,87 +130,47 @@ export default {
       this.templateInfo.level = 1
     }
   },
-  data() {
-    return {
-      appResultInfo: {},
-      importTemplateInfo: {
-        snapshot: "",
-      },
-      templateInfoRules: {
-        name: [
-          {
-            required: true,
-            message: this.$t("commons.input_content"),
-            trigger: "change",
-          },
-        ],
-      },
-      recover: false,
-      templateInfo: {
-        id:null,
-        level: "1",
-        pid: this.pid,
-        name: "",
-        templateStyle: null,
-        templateData: null,
-        dynamicData: null,
-        staticResource: null,
-        snapshot: "",
-      },
-    };
-  },
-  computed: {
-    classBackground() {
-      if (this.templateInfo.snapshot) {
-        return {
-          background: `url(${imgUrlTrans(this.templateInfo.snapshot)}) no-repeat`,
-        };
-      } else {
-        return {};
-      }
-    },
-  },
   created() {
-    this.showCurrentTemplate(this.pid);
+    this.showCurrentTemplate(this.pid)
   },
   methods: {
     showCurrentTemplate(pid) {
       find({ pid }).then((response) => {
-        this.nameList = response.data;
-      });
+        this.nameList = response.data
+      })
     },
     cancel() {
-      this.$emit("closeEditTemplateDialog");
+      this.$emit('closeEditTemplateDialog')
     },
     save() {
       if (!this.templateInfo.name) {
-        this.$warning(this.$t("chart.name_can_not_empty"));
-        return false;
+        this.$warning(this.$t('chart.name_can_not_empty'))
+        return false
       }
-      if ('update'!==this.optType && !this.templateInfo.templateData) {
-        this.$warning(this.$t("chart.template_can_not_empty"));
-        return false;
+      if (this.optType !== 'update' && !this.templateInfo.templateData) {
+        this.$warning(this.$t('chart.template_can_not_empty'))
+        return false
       }
       const nameCheckRequest = {
         pid: this.templateInfo.pid,
         name: this.templateInfo.name,
-        optType: "insert",
-      };
-      if('update'===this.optType){
+        optType: 'insert'
+      }
+      if (this.optType === 'update') {
         nameCheckRequest.optType = 'update'
         nameCheckRequest['id'] = this.templateInfo.id
         this.appResultInfo['id'] = this.templateInfo.id
         this.appResultInfo['optType'] = 'update'
       }
-      this.appResultInfo['pid'] =this.templateInfo.pid
-      this.appResultInfo['level'] =this.templateInfo.level
-      this.appResultInfo['name'] =this.templateInfo.name,
-      this.appResultInfo['snapshot'] =this.templateInfo.snapshot
-      const method = 'update'===this.optType?update:save
-      const successMsg = 'update'===this.optType?'更新成功':this.$t('system_parameter_setting.import_succeeded')
+      this.appResultInfo['pid'] = this.templateInfo.pid
+      this.appResultInfo['level'] = this.templateInfo.level
+      this.appResultInfo['name'] = this.templateInfo.name
+      this.appResultInfo['snapshot'] = this.templateInfo.snapshot
+      const method = this.optType === 'update' ? update : save
+      const successMsg = this.optType === 'update' ? '更新成功' : this.$t('system_parameter_setting.import_succeeded')
       const _this = this
       nameCheck(nameCheckRequest).then((response) => {
-        if (response.data.indexOf("exist") > -1) {
+        if (response.data.indexOf('exist') > -1) {
           this.$message({
             message: '当前名称已经存在',
             type: 'error',
@@ -163,36 +178,36 @@ export default {
           })
         } else {
           method(_this.appResultInfo).then((response) => {
-            this.openMessageSuccess(successMsg);
-            this.$emit("refresh");
-            this.$emit("closeEditTemplateDialog");
-          });
+            this.openMessageSuccess(successMsg)
+            this.$emit('refresh')
+            this.$emit('closeEditTemplateDialog')
+          })
         }
-      });
+      })
     },
     handleFileChange(e) {
-      const file = e.target.files[0];
-      const reader = new FileReader();
+      const file = e.target.files[0]
+      const reader = new FileReader()
       const _this = this
       reader.onload = (res) => {
-        _this.appResultInfo = JSON.parse(res.target.result);
+        _this.appResultInfo = JSON.parse(res.target.result)
         _this.importTemplateInfo = JSON.parse(this.appResultInfo.panelInfo)
-        _this.templateInfo.name = this.importTemplateInfo.name;
-        _this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle;
-        _this.templateInfo.templateData = this.importTemplateInfo.panelData;
-        _this.templateInfo.snapshot = this.importTemplateInfo.snapshot;
-        _this.templateInfo.dynamicData = this.importTemplateInfo.dynamicData;
+        _this.templateInfo.name = this.importTemplateInfo.name
+        _this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle
+        _this.templateInfo.templateData = this.importTemplateInfo.panelData
+        _this.templateInfo.snapshot = this.importTemplateInfo.snapshot
+        _this.templateInfo.dynamicData = this.importTemplateInfo.dynamicData
         _this.templateInfo.staticResource =
-          _this.importTemplateInfo.staticResource;
-        _this.templateInfo.nodeType = "template";
-      };
-      reader.readAsText(file);
+          _this.importTemplateInfo.staticResource
+        _this.templateInfo.nodeType = 'template'
+      }
+      reader.readAsText(file)
     },
     goFile() {
-      this.$refs.files.click();
-    },
-  },
-};
+      this.$refs.files.click()
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/panel/appTemplate/component/TemplateItem.vue b/frontend/src/views/panel/appTemplate/component/TemplateItem.vue
index 588f91ca28..b86fbee65c 100644
--- a/frontend/src/views/panel/appTemplate/component/TemplateItem.vue
+++ b/frontend/src/views/panel/appTemplate/component/TemplateItem.vue
@@ -1,7 +1,16 @@
 <template>
-  <div :style="classBackground" class="de-card-model">
-    <div class="card-img-model" :style="classImg">
-      <img :src="model.snapshot" alt=""/>
+  <div
+    :style="classBackground"
+    class="de-card-model"
+  >
+    <div
+      class="card-img-model"
+      :style="classImg"
+    >
+      <img
+        :src="model.snapshot"
+        alt=""
+      >
     </div>
     <div class="card-info">
       <el-tooltip
@@ -12,16 +21,23 @@
       >
         <span class="de-model-text">{{ model.name }}</span>
       </el-tooltip>
-      <el-dropdown size="medium" trigger="click" @command="handleCommand">
-        <i class="el-icon-more"></i>
-        <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
+      <el-dropdown
+        size="medium"
+        trigger="click"
+        @command="handleCommand"
+      >
+        <i class="el-icon-more" />
+        <el-dropdown-menu
+          slot="dropdown"
+          class="de-card-dropdown"
+        >
           <slot>
             <el-dropdown-item command="update">
-              <i class="el-icon-edit"></i>
+              <i class="el-icon-edit" />
               {{ $t("commons.update") }}
             </el-dropdown-item>
             <el-dropdown-item command="delete">
-              <i class="el-icon-delete"></i>
+              <i class="el-icon-delete" />
               {{ $t("commons.uninstall") }}
             </el-dropdown-item>
           </slot>
@@ -37,7 +53,7 @@ export default {
     model: {
       type: Object,
       default: () => {
-      },
+      }
     },
     width: {
       type: Number
@@ -47,7 +63,7 @@ export default {
     classBackground() {
       return {
         width: this.width + 'px',
-        height: this.width * 0.714 + 'px',
+        height: this.width * 0.714 + 'px'
       }
     },
     classImg() {
@@ -55,14 +71,14 @@ export default {
         width: (this.width - 2) + 'px',
         height: this.width * 0.576 + 'px'
       }
-    },
+    }
   },
   methods: {
     handleCommand(key) {
-      this.$emit("command", key);
-    },
-  },
-};
+      this.$emit('command', key)
+    }
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/frontend/src/views/panel/appTemplate/component/TemplateList.vue b/frontend/src/views/panel/appTemplate/component/TemplateList.vue
index 0922f7ed18..b2dfe50280 100644
--- a/frontend/src/views/panel/appTemplate/component/TemplateList.vue
+++ b/frontend/src/views/panel/appTemplate/component/TemplateList.vue
@@ -7,44 +7,62 @@
       class="de-input-search"
       clearable
     >
-      <svg-icon slot="prefix" icon-class="de-search"></svg-icon>
+      <svg-icon
+        slot="prefix"
+        icon-class="de-search"
+      />
     </el-input>
     <el-empty
-      :image="noneImg"
       v-if="!templateListComputed.length && templateFilterText === ''"
+      :image="noneImg"
       :description="$t('components.no_classification')"
-    ></el-empty>
+    />
     <el-empty
-      :image="nothingImg"
       v-if="!templateListComputed.length && templateFilterText !== ''"
+      :image="nothingImg"
       :description="$t('components.relevant_content_found')"
-    ></el-empty>
+    />
     <ul>
       <li
-        :class="[{ select: activeTemplate === ele.id }]"
-        @click="nodeClick(ele)"
         v-for="ele in templateListComputed"
         :key="ele.name"
+        :class="[{ select: activeTemplate === ele.id }]"
+        @click="nodeClick(ele)"
       >
-        <svg-icon icon-class="scene"/>
+        <svg-icon icon-class="scene" />
         <span>{{ ele.name }}</span>
-        <span @click.stop class="more">
+        <span
+          class="more"
+          @click.stop
+        >
           <el-dropdown
             trigger="click"
             size="small"
             @command="(type) => clickMore(type, ele)"
           >
             <span class="el-dropdown-link">
-              <i class="el-icon-more"></i>
+              <i class="el-icon-more" />
             </span>
-            <el-dropdown-menu class="de-template-dropdown" slot="dropdown">
-              <el-dropdown-item icon="el-icon-upload2" command="import">
-               {{$t('app_template.app_upload')}}
+            <el-dropdown-menu
+              slot="dropdown"
+              class="de-template-dropdown"
+            >
+              <el-dropdown-item
+                icon="el-icon-upload2"
+                command="import"
+              >
+                {{ $t('app_template.app_upload') }}
               </el-dropdown-item>
-              <el-dropdown-item icon="el-icon-edit" command="edit">
+              <el-dropdown-item
+                icon="el-icon-edit"
+                command="edit"
+              >
                 {{ $t("commons.edit") }}
               </el-dropdown-item>
-              <el-dropdown-item icon="el-icon-delete" command="delete">
+              <el-dropdown-item
+                icon="el-icon-delete"
+                command="delete"
+              >
                 {{ $t("commons.delete") }}
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -65,31 +83,31 @@
 </template>
 
 <script>
-import msgCfm from "@/components/msgCfm/index";
+import msgCfm from '@/components/msgCfm/index'
 
 export default {
-  name: "TemplateList",
-  mixins: [msgCfm],
+  name: 'TemplateList',
   components: {},
+  mixins: [msgCfm],
   props: {
     templateType: {
       type: String,
-      default: "",
+      default: ''
     },
     templateList: {
       type: Array,
-      default: function () {
-        return [];
-      },
-    },
+      default: function() {
+        return []
+      }
+    }
   },
   data() {
     return {
-      templateFilterText: "",
-      activeTemplate: "",
-      noneImg: require("@/assets/None.png"),
-      nothingImg: require("@/assets/nothing.png"),
-    };
+      templateFilterText: '',
+      activeTemplate: '',
+      noneImg: require('@/assets/None.png'),
+      nothingImg: require('@/assets/nothing.png')
+    }
   },
   computed: {
     templateListComputed() {
@@ -100,50 +118,50 @@ export default {
       //     ...this.templateList,
       //     ...this.templateList,
       //   ];
-      if (!this.templateFilterText) return [...this.templateList];
+      if (!this.templateFilterText) return [...this.templateList]
       return this.templateList.filter((ele) =>
         ele.name.includes(this.templateFilterText)
-      );
-    },
+      )
+    }
   },
   methods: {
     clickMore(type, data) {
       switch (type) {
-        case "edit":
-          this.templateEdit(data);
-          break;
-        case "delete":
-          this.templateDelete(data);
-          break;
-        case "import":
-          this.templateImport(data);
-          break;
+        case 'edit':
+          this.templateEdit(data)
+          break
+        case 'delete':
+          this.templateDelete(data)
+          break
+        case 'import':
+          this.templateImport(data)
+          break
       }
     },
     nodeClick({ id, name }) {
-      this.activeTemplate = id;
-      this.$emit("showCurrentTemplate", id, name);
+      this.activeTemplate = id
+      this.$emit('showCurrentTemplate', id, name)
     },
     add() {
-      this.$emit("showTemplateEditDialog", "new");
+      this.$emit('showTemplateEditDialog', 'new')
     },
     templateDelete(template) {
       const options = {
         title: this.$('app_template.app_group_delete_tips'),
         content: this.$('app_template.app_group_delete_content'),
-        type: "primary",
-        cb: () => this.$emit("templateDelete", template.id),
-      };
-      this.handlerConfirm(options);
+        type: 'primary',
+        cb: () => this.$emit('templateDelete', template.id)
+      }
+      this.handlerConfirm(options)
     },
     templateEdit(template) {
-      this.$emit("templateEdit", template);
+      this.$emit('templateEdit', template)
     },
     templateImport(template) {
-      this.$emit("templateImport", template.id);
-    },
-  },
-};
+      this.$emit('templateImport', template.id)
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/views/panel/appTemplate/index.vue b/frontend/src/views/panel/appTemplate/index.vue
index 9333aa4572..f801ab89d3 100644
--- a/frontend/src/views/panel/appTemplate/index.vue
+++ b/frontend/src/views/panel/appTemplate/index.vue
@@ -2,8 +2,8 @@
   <de-layout-content>
     <div class="de-template">
       <div
-        class="tabs-container flex-tabs"
         v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+        class="tabs-container flex-tabs"
       >
         <div class="de-tabs-left">
           <template-list
@@ -18,26 +18,29 @@
           />
         </div>
         <div class="de-tabs-right">
-          <div v-if="currentTemplateLabel" class="active-template">
+          <div
+            v-if="currentTemplateLabel"
+            class="active-template"
+          >
             {{ currentTemplateLabel }}&nbsp;&nbsp;({{
               currentTemplateShowList.length
             }})
             <deBtn
               type="primary"
-              @click="templateImport(currentTemplateId)"
               icon="el-icon-upload2"
+              @click="templateImport(currentTemplateId)"
             >
-              {{$t('app_template.app_upload')}}
+              {{ $t('app_template.app_upload') }}
             </deBtn>
           </div>
           <el-empty
-            :image="noneImg"
             v-if="!currentTemplateShowList.length"
+            :image="noneImg"
             :description="$t('app_template.no_apps')"
-          ></el-empty>
+          />
           <div
-            id="template-box"
             v-show="currentTemplateId !== ''"
+            id="template-box"
             class="template-box"
           >
             <template-item
@@ -65,10 +68,16 @@
         :model="templateEditForm"
         :rules="templateEditFormRules"
       >
-        <el-form-item :label="dialogTitleLabel" prop="name">
-          <el-input v-model="templateEditForm.name"/>
+        <el-form-item
+          :label="dialogTitleLabel"
+          prop="name"
+        >
+          <el-input v-model="templateEditForm.name" />
         </el-form-item>
-        <el-form-item :label="$t('app_template.app_group_icon')" prop="icon">
+        <el-form-item
+          :label="$t('app_template.app_group_icon')"
+          prop="icon"
+        >
           <el-col style="width: 148px!important;height: 148px!important;overflow: hidden">
             <el-upload
               action=""
@@ -81,18 +90,34 @@
               :http-request="upload"
               :file-list="fileList"
             >
-              <i class="el-icon-plus"/>
+              <i class="el-icon-plus" />
             </el-upload>
-            <el-dialog top="25vh" width="600px" :append-to-body="true" :destroy-on-close="true"
-                       :visible.sync="dialogVisible">
-              <img width="100%" :src="dialogImageUrl">
+            <el-dialog
+              top="25vh"
+              width="600px"
+              :append-to-body="true"
+              :destroy-on-close="true"
+              :visible.sync="dialogVisible"
+            >
+              <img
+                width="100%"
+                :src="dialogImageUrl"
+              >
             </el-dialog>
           </el-col>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <deBtn secondary @click="close()">{{ $t("commons.cancel") }}</deBtn>
-        <deBtn type="primary" @click="saveTemplateEdit(templateEditForm)"
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <deBtn
+          secondary
+          @click="close()"
+        >{{ $t("commons.cancel") }}</deBtn>
+        <deBtn
+          type="primary"
+          @click="saveTemplateEdit(templateEditForm)"
         >{{ $t("commons.confirm") }}
         </deBtn>
       </div>
@@ -112,7 +137,7 @@
         :opt-type="templateOptType"
         :app-template-info="currentAppTemplateInfo"
         @refresh="showCurrentTemplate(currentTemplateId,
-        currentTemplateLabel)"
+                                      currentTemplateLabel)"
         @closeEditTemplateDialog="closeEditTemplateDialog"
       />
     </el-dialog>
@@ -120,24 +145,24 @@
 </template>
 
 <script>
-import DeLayoutContent from "@/components/business/DeLayoutContent";
-import TemplateList from "./component/TemplateList";
-import TemplateItem from "./component/TemplateItem";
-import TemplateImport from "./component/TemplateImport";
-import {save, update, templateDelete, find} from "@/api/system/appTemplate";
-import elementResizeDetectorMaker from "element-resize-detector";
-import msgCfm from "@/components/msgCfm/index";
-import {uploadFileResult} from "@/api/staticResource/staticResource";
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import DeLayoutContent from '@/components/business/DeLayoutContent'
+import TemplateList from './component/TemplateList'
+import TemplateItem from './component/TemplateItem'
+import TemplateImport from './component/TemplateImport'
+import { save, update, templateDelete, find } from '@/api/system/appTemplate'
+import elementResizeDetectorMaker from 'element-resize-detector'
+import msgCfm from '@/components/msgCfm/index'
+import { uploadFileResult } from '@/api/staticResource/staticResource'
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
-  name: "AppTemplate",
+  name: 'AppTemplate',
+  components: { DeLayoutContent, TemplateList, TemplateItem, TemplateImport },
   mixins: [msgCfm],
-  components: {DeLayoutContent, TemplateList, TemplateItem, TemplateImport},
   data() {
     return {
-      templateOptType:'add',
-      currentAppTemplateInfo:null,
+      templateOptType: 'add',
+      currentAppTemplateInfo: null,
       fileList: [],
       dialogImageUrl: '',
       dialogVisible: false,
@@ -145,268 +170,268 @@ export default {
       showShare: false,
       currentTemplateShowList: [],
       noneImg: require('@/assets/None.png'),
-      currentPid: "",
-      currentTemplateType: "self",
+      currentPid: '',
+      currentTemplateType: 'self',
       templateEditFormRules: {
         name: [
-          {required: true, trigger: "blur", validator: this.roleValidator},
+          { required: true, trigger: 'blur', validator: this.roleValidator },
           {
             required: true,
-            message: this.$t("commons.input_content"),
-            trigger: "blur",
+            message: this.$t('commons.input_content'),
+            trigger: 'blur'
           },
           {
             max: 50,
-            message: this.$t("commons.char_can_not_more_50"),
-            trigger: "change",
-          },
+            message: this.$t('commons.char_can_not_more_50'),
+            trigger: 'change'
+          }
         ],
         icon: [
           {
             required: true,
             message: '请选择文件',
-            trigger: "change",
-          },
-        ],
+            trigger: 'change'
+          }
+        ]
       },
       templateEditForm: {},
       editTemplate: false,
-      dialogTitle: "",
-      dialogTitleLabel: "",
-      currentTemplateLabel: "",
-      currentTemplateId: "",
+      dialogTitle: '',
+      dialogTitleLabel: '',
+      currentTemplateLabel: '',
+      currentTemplateId: '',
       templateList: [],
       templateMiniWidth: 286,
       templateCurWidth: 286,
-      formType: "",
-      originName: "",
+      formType: '',
+      originName: '',
       templateDialog: {
         title: '导入应用',
         visible: false,
-        pid: "",
-      },
-    };
+        pid: ''
+      }
+    }
   },
   computed: {
     nameList() {
-      const {nodeType} = this.templateEditForm || {};
-      if ("template" === nodeType) {
-        return this.currentTemplateShowList.map((ele) => ele.name);
+      const { nodeType } = this.templateEditForm || {}
+      if (nodeType === 'template') {
+        return this.currentTemplateShowList.map((ele) => ele.name)
       }
 
-      if ("folder" === nodeType) {
-        return this.templateList.map((ele) => ele.name);
+      if (nodeType === 'folder') {
+        return this.templateList.map((ele) => ele.name)
       }
-      return [];
-    },
+      return []
+    }
   },
   mounted() {
-    this.getTree();
-    const _this = this;
-    const erd = elementResizeDetectorMaker();
-    const templateMainDom = document.getElementById("template-box");
+    this.getTree()
+    const _this = this
+    const erd = elementResizeDetectorMaker()
+    const templateMainDom = document.getElementById('template-box')
     // 监听div变动事件
     erd.listenTo(templateMainDom, (element) => {
       _this.$nextTick(() => {
         const curSeparator = Math.trunc(
           templateMainDom.offsetWidth / _this.templateMiniWidth
-        );
+        )
         _this.templateCurWidth =
-          Math.trunc(templateMainDom.offsetWidth / curSeparator) - 24 - curSeparator;
-      });
-    });
+          Math.trunc(templateMainDom.offsetWidth / curSeparator) - 24 - curSeparator
+      })
+    })
   },
   methods: {
     roleValidator(rule, value, callback) {
       if (this.nameRepeat(value)) {
-        const {nodeType} = this.templateEditForm || {};
+        const { nodeType } = this.templateEditForm || {}
         callback(
           new Error(
             this.$t(
               `system_parameter_setting.${
-                "folder" === nodeType
-                  ? "name_already_exists_type"
-                  : "the_same_category"
+                nodeType === 'folder'
+                  ? 'name_already_exists_type'
+                  : 'the_same_category'
               }`
             )
           )
-        );
+        )
       } else {
-        callback();
+        callback()
       }
     },
     nameRepeat(value) {
       if (!this.nameList || this.nameList.length === 0) {
-        return false;
+        return false
       }
       // 编辑场景 不能 因为名称重复而报错
-      if (this.formType === "edit" && this.originName === value) {
-        return false;
+      if (this.formType === 'edit' && this.originName === value) {
+        return false
       }
-      return this.nameList.some((name) => name === value);
+      return this.nameList.some((name) => name === value)
     },
     handleCommand(key, data) {
       switch (key) {
-        case "rename":
-          this.templateEdit(data);
-          break;
-        case "delete":
-          this.templateDeleteConfirm(data);
-          break;
-        case "update":
-          this.updateAppTemplate(data);
-          break;
+        case 'rename':
+          this.templateEdit(data)
+          break
+        case 'delete':
+          this.templateDeleteConfirm(data)
+          break
+        case 'update':
+          this.updateAppTemplate(data)
+          break
         default:
-          break;
+          break
       }
     },
-    updateAppTemplate(data){
-      this.templateOptType='update';
+    updateAppTemplate(data) {
+      this.templateOptType = 'update'
       this.templateDialog.visible = true
       this.currentAppTemplateInfo = data
-      this.templateDialog.pid = data.pid;
+      this.templateDialog.pid = data.pid
     },
     templateDeleteConfirm(template) {
       const options = {
-        title: "是否卸载当前应用？",
-        type: "primary",
-        cb: () => this.templateDelete(template.id),
-      };
-      this.handlerConfirm(options,"卸载");
+        title: '是否卸载当前应用？',
+        type: 'primary',
+        cb: () => this.templateDelete(template.id)
+      }
+      this.handlerConfirm(options, '卸载')
     },
     handleClick(tab, event) {
-      this.getTree();
+      this.getTree()
     },
     showCurrentTemplate(pid, name) {
-      this.currentTemplateId = pid;
-      this.currentTemplateLabel = name;
+      this.currentTemplateId = pid
+      this.currentTemplateLabel = name
       if (this.currentTemplateId) {
-        find({pid: this.currentTemplateId}).then((response) => {
-          this.currentTemplateShowList = response.data;
-        });
+        find({ pid: this.currentTemplateId }).then((response) => {
+          this.currentTemplateShowList = response.data
+        })
       }
     },
     templateListDelete(id) {
       if (id) {
         templateDelete(id).then((response) => {
-          this.openMessageSuccess("commons.delete_success");
-          this.getTree();
-        });
+          this.openMessageSuccess('commons.delete_success')
+          this.getTree()
+        })
       }
     },
 
     templateDelete(id) {
       if (id) {
         templateDelete(id).then((response) => {
-          this.openMessageSuccess("commons.delete_success");
-          this.showCurrentTemplate(this.currentTemplateId, this.currentTemplateLabel);
-        });
+          this.openMessageSuccess('commons.delete_success')
+          this.showCurrentTemplate(this.currentTemplateId, this.currentTemplateLabel)
+        })
       }
     },
     showTemplateEditDialog(type, templateInfo) {
-      this.templateEditForm = null;
-      this.formType = type;
-      if (type === "edit") {
+      this.templateEditForm = null
+      this.formType = type
+      if (type === 'edit') {
         if (templateInfo.icon) {
-          this.fileList.push({url: imgUrlTrans(templateInfo.icon)})
+          this.fileList.push({ url: imgUrlTrans(templateInfo.icon) })
         }
-        this.templateEditForm = JSON.parse(JSON.stringify(templateInfo));
+        this.templateEditForm = JSON.parse(JSON.stringify(templateInfo))
         this.dialogTitle = this.$t(
           `system_parameter_setting.${
-            "folder" === this.templateEditForm.nodeType
-              ? "edit_classification"
-              : "edit_template"
+            this.templateEditForm.nodeType === 'folder'
+              ? 'edit_classification'
+              : 'edit_template'
           }`
-        );
-        this.originName = this.templateEditForm.label;
+        )
+        this.originName = this.templateEditForm.label
       } else {
         this.fileList = []
-        this.dialogTitle = this.$t("panel.add_app_category");
+        this.dialogTitle = this.$t('panel.add_app_category')
         this.templateEditForm = {
-          name: "",
-          nodeType: "folder",
+          name: '',
+          nodeType: 'folder',
           templateType: this.currentTemplateType,
-          icon: "",
+          icon: '',
           level: 0,
-          pid: 0,
-        };
+          pid: 0
+        }
       }
       this.dialogTitleLabel = this.$t(
         `system_parameter_setting.${
-          "folder" === this.templateEditForm.nodeType
-            ? "classification_name"
-            : "template_name"
+          this.templateEditForm.nodeType === 'folder'
+            ? 'classification_name'
+            : 'template_name'
         }`
-      );
-      this.editTemplate = true;
+      )
+      this.editTemplate = true
     },
     templateEdit(templateInfo) {
-      this.showTemplateEditDialog("edit", templateInfo);
+      this.showTemplateEditDialog('edit', templateInfo)
     },
     saveTemplateEdit(templateEditForm) {
-      this.$refs["templateEditForm"].validate((valid) => {
-          if (valid) {
-            const method = templateEditForm.id ? update : save
-            method(templateEditForm).then((response) => {
-              this.close();
-              this.openMessageSuccess(
-                `system_parameter_setting.${
-                  this.templateEditForm.id
-                    ? "rename_succeeded"
-                    : "added_successfully"
-                }`
-              );
-              this.getTree();
-            });
-          } else {
-            return false;
-          }
-      });
+      this.$refs['templateEditForm'].validate((valid) => {
+        if (valid) {
+          const method = templateEditForm.id ? update : save
+          method(templateEditForm).then((response) => {
+            this.close()
+            this.openMessageSuccess(
+              `system_parameter_setting.${
+                this.templateEditForm.id
+                  ? 'rename_succeeded'
+                  : 'added_successfully'
+              }`
+            )
+            this.getTree()
+          })
+        } else {
+          return false
+        }
+      })
     },
     close() {
-      this.$refs["templateEditForm"].resetFields();
-      this.editTemplate = false;
+      this.$refs['templateEditForm'].resetFields()
+      this.editTemplate = false
       this.handleRemove()
     },
     getTree() {
       const request = {
         templateType: this.currentTemplateType,
-        pid: "0",
-      };
+        pid: '0'
+      }
       find(request).then((res) => {
-        this.templateList = res.data;
-        this.showFirst();
-      });
+        this.templateList = res.data
+        this.showFirst()
+      })
     },
     showFirst() {
       // 判断是否默认点击第一条
       if (this.templateList && this.templateList.length > 0) {
-        let showFirst = true;
+        let showFirst = true
         this.templateList.forEach((template) => {
           if (template.id === this.currentTemplateId) {
-            showFirst = false;
+            showFirst = false
           }
-        });
+        })
         if (showFirst) {
           this.$nextTick().then(() => {
-            const [obj = {}] = this.templateList;
-            this.$refs.templateList.nodeClick(obj);
-          });
+            const [obj = {}] = this.templateList
+            this.$refs.templateList.nodeClick(obj)
+          })
         } else {
-          this.showCurrentTemplate(this.currentTemplateId, this.currentTemplateLabel);
+          this.showCurrentTemplate(this.currentTemplateId, this.currentTemplateLabel)
         }
       } else {
-        this.currentTemplateShowList = [];
+        this.currentTemplateShowList = []
       }
     },
     closeEditTemplateDialog() {
-      this.templateDialog.visible = false;
+      this.templateDialog.visible = false
     },
     templateImport(pid) {
-      this.templateOptType='new';
-      this.currentAppTemplateInfo = null;
-      this.templateDialog.visible = true;
-      this.templateDialog.pid = pid;
+      this.templateOptType = 'new'
+      this.currentAppTemplateInfo = null
+      this.templateDialog.visible = true
+      this.templateDialog.pid = pid
     },
     handleRemove(file, fileList) {
       this.uploadDisabled = false
@@ -423,8 +448,8 @@ export default {
         _this.templateEditForm.icon = fileUrl
       })
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/views/panel/appTemplateMarket/component/AppTemplateItem.vue b/frontend/src/views/panel/appTemplateMarket/component/AppTemplateItem.vue
index 10b8eec0f7..9b31cb262f 100644
--- a/frontend/src/views/panel/appTemplateMarket/component/AppTemplateItem.vue
+++ b/frontend/src/views/panel/appTemplateMarket/component/AppTemplateItem.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="testcase-template">
-    <div class="template-img" :style="classBackground" @click.stop="appPreview" />
+    <div
+      class="template-img"
+      :style="classBackground"
+      @click.stop="appPreview"
+    />
   </div>
 </template>
 
 <script>
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'AppTemplateItem',
diff --git a/frontend/src/views/panel/appTemplateMarket/component/MarketPreview.vue b/frontend/src/views/panel/appTemplateMarket/component/MarketPreview.vue
index 610e237754..17432057ff 100644
--- a/frontend/src/views/panel/appTemplateMarket/component/MarketPreview.vue
+++ b/frontend/src/views/panel/appTemplateMarket/component/MarketPreview.vue
@@ -1,16 +1,28 @@
 <template>
-  <el-row class="preview-outer-body market-main" v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
+  <el-row
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    class="preview-outer-body market-main"
+  >
     <el-row style="position: absolute;left: 5px;top: 5px">
-      <span class="icon iconfont icon-close icon20 insert" @click="closePreview()" />
+      <span
+        class="icon iconfont icon-close icon20 insert"
+        @click="closePreview()"
+      />
     </el-row>
     <el-row>
       <el-col span="12">
-        <span class="title-left">{{currentApp.name}}</span>
+        <span class="title-left">{{ currentApp.name }}</span>
       </el-col>
     </el-row>
-    <el-row v-if="currentTemplateShowList&&currentTemplateShowList.length>0" class="template-main-preview">
+    <el-row
+      v-if="currentTemplateShowList&&currentTemplateShowList.length>0"
+      class="template-main-preview"
+    >
       <el-row class="preview-slider">
-        <el-row class="top-list" :style="topSlideStyle">
+        <el-row
+          class="top-list"
+          :style="topSlideStyle"
+        >
           <template-market-preview-item
             v-for="(templateItem) in currentTemplateShowList"
             :key="templateItem.id"
@@ -18,9 +30,15 @@
             :active="active(templateItem)"
             @previewTemplate="previewTemplate"
           />
-          <el-row v-show="!hasResult" class="custom-position">
+          <el-row
+            v-show="!hasResult"
+            class="custom-position"
+          >
             <div style="text-align: center">
-              <svg-icon icon-class="no_result" style="font-size: 75px;margin-bottom: 16px" />
+              <svg-icon
+                icon-class="no_result"
+                style="font-size: 75px;margin-bottom: 16px"
+              />
               <br>
               <span>{{ $t('commons.no_result') }}</span>
             </div>
@@ -28,14 +46,22 @@
         </el-row>
       </el-row>
       <el-row style="margin-top: 24px">
-        <app-template-log :app-template-id="curTemplate.id" :position="'templateLog'" @applyNew="applyNew" class="log-area"></app-template-log>
+        <app-template-log
+          :app-template-id="curTemplate.id"
+          :position="'templateLog'"
+          class="log-area"
+          @applyNew="applyNew"
+        />
       </el-row>
     </el-row>
-    <el-row v-else class="template-main-preview">
+    <el-row
+      v-else
+      class="template-main-preview"
+    >
       <el-empty
         :image="noneImg"
         :description="$t('app_template.no_apps')"
-      ></el-empty>
+      />
     </el-row>
     <el-dialog
       v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
@@ -49,24 +75,31 @@
       :destroy-on-close="true"
     >
       <el-row class="ds-from-main">
-        <DsAppForm :params="dsParams" v-if="applyNewVisible" :t-data="this.tData" :ds-types="dsTypes" :opt-type="'appApply'" :attach-params="attachParams"></DsAppForm>
+        <DsAppForm
+          v-if="applyNewVisible"
+          :params="dsParams"
+          :t-data="tData"
+          :ds-types="dsTypes"
+          :opt-type="'appApply'"
+          :attach-params="attachParams"
+        />
       </el-row>
     </el-dialog>
   </el-row>
 </template>
 
 <script>
-import { searchAppTemplate, getCategories } from '@/api/appTemplateMarket'
+import { searchAppTemplate } from '@/api/appTemplateMarket'
 import { groupTree } from '@/api/panel/panel'
 import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
 import TemplateMarketPreviewItem from '@/views/panel/appTemplateMarket/component/TemplateMarketPreviewItem'
-import AppTemplateLog from "@/views/panel/appTemplateMarket/log";
-import {listDatasourceType} from "@/api/system/datasource";
-import DsAppForm from "@/views/system/datasource/DsAppForm";
+import AppTemplateLog from '@/views/panel/appTemplateMarket/log'
+import { listDatasourceType } from '@/api/system/datasource'
+import DsAppForm from '@/views/system/datasource/DsAppForm'
 
 export default {
   name: 'MarketPreview',
-  components: {DsAppForm, AppTemplateLog, TemplateMarketPreviewItem },
+  components: { DsAppForm, AppTemplateLog, TemplateMarketPreviewItem },
   props: {
     previewId: {
       type: String,
@@ -80,8 +113,8 @@ export default {
   data() {
     return {
       noneImg: require('@/assets/None.png'),
-      dsParams:{},
-      attachParams:{},
+      dsParams: {},
+      attachParams: {},
       tData: [],
       dsTypes: [],
       applyNewVisible: false,
@@ -113,9 +146,9 @@ export default {
     }
   },
   computed: {
-    topSlideStyle(){
+    topSlideStyle() {
       return {
-        width: (275*this.currentTemplateShowList.length +50)+'px'
+        width: (275 * this.currentTemplateShowList.length + 50) + 'px'
       }
     }
   },
@@ -146,18 +179,18 @@ export default {
         this.dsTypes = res.data
       })
     },
-    applyNew(){
+    applyNew() {
       this.applyNewVisible = true
-      this.attachParams={
-        appTemplateId:this.curTemplate.id,
-        name:this.curTemplate.name,
+      this.attachParams = {
+        appTemplateId: this.curTemplate.id,
+        name: this.curTemplate.name
       }
     },
     initMarketTemplate() {
-      searchAppTemplate({pid:this.previewId}).then(rsp => {
+      searchAppTemplate({ pid: this.previewId }).then(rsp => {
         this.currentTemplateShowList = rsp.data
-        if(rsp.data){
-          this.curTemplate=rsp.data[0]
+        if (rsp.data) {
+          this.curTemplate = rsp.data[0]
         }
         this.hasResult = true
       }).catch(() => {
diff --git a/frontend/src/views/panel/appTemplateMarket/component/TemplateMarketItem.vue b/frontend/src/views/panel/appTemplateMarket/component/TemplateMarketItem.vue
index 2ef56f02f9..29d0a67931 100644
--- a/frontend/src/views/panel/appTemplateMarket/component/TemplateMarketItem.vue
+++ b/frontend/src/views/panel/appTemplateMarket/component/TemplateMarketItem.vue
@@ -1,20 +1,32 @@
 <template>
   <div class="testcase-template">
-    <div class="template-img" :style="classBackground" @click.stop="templatePreview" />
+    <div
+      class="template-img"
+      :style="classBackground"
+      @click.stop="templatePreview"
+    />
     <el-row class="bottom-area">
       <el-row>
         <span class="demonstration">{{ template.title }}</span>
       </el-row>
     </el-row>
     <el-row class="template-button">
-      <el-button size="mini" style="width: 141px" @click="templatePreview">{{ $t('panel.preview') }}</el-button>
-      <el-button size="mini" style="width: 141px" type="primary" @click="apply">{{ $t('panel.apply') }}</el-button>
+      <el-button
+        size="mini"
+        style="width: 141px"
+        @click="templatePreview"
+      >{{ $t('panel.preview') }}</el-button>
+      <el-button
+        size="mini"
+        style="width: 141px"
+        type="primary"
+        @click="apply"
+      >{{ $t('panel.apply') }}</el-button>
     </el-row>
   </div>
 </template>
 
 <script>
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
 
 export default {
   name: 'TemplateMarketItem',
@@ -48,7 +60,7 @@ export default {
   },
   methods: {
 
-    init(){
+    init() {
 
     },
 
diff --git a/frontend/src/views/panel/appTemplateMarket/component/TemplateMarketPreviewItem.vue b/frontend/src/views/panel/appTemplateMarket/component/TemplateMarketPreviewItem.vue
index 40ebda677b..44411c0a6c 100644
--- a/frontend/src/views/panel/appTemplateMarket/component/TemplateMarketPreviewItem.vue
+++ b/frontend/src/views/panel/appTemplateMarket/component/TemplateMarketPreviewItem.vue
@@ -8,7 +8,10 @@
     ]"
     @click.stop="previewTemplate"
   >
-    <div class="template-item-img" :style="classBackground" />
+    <div
+      class="template-item-img"
+      :style="classBackground"
+    />
     <span class="demonstration">{{ template.name }}</span>
   </div>
 </template>
diff --git a/frontend/src/views/panel/appTemplateMarket/index.vue b/frontend/src/views/panel/appTemplateMarket/index.vue
index 44c7045b28..d259e822d7 100644
--- a/frontend/src/views/panel/appTemplateMarket/index.vue
+++ b/frontend/src/views/panel/appTemplateMarket/index.vue
@@ -1,21 +1,43 @@
 <template>
   <el-row class="outer-body">
     <!--预览模式-->
-    <MarketPreview v-if="previewModel" :preview-id="templatePreviewId" :current-app="currentApp" @closePreview="previewModel=false" @templateApply="templateApply" />
+    <MarketPreview
+      v-if="previewModel"
+      :preview-id="templatePreviewId"
+      :current-app="currentApp"
+      @closePreview="previewModel=false"
+      @templateApply="templateApply"
+    />
     <!--列表模式-->
-    <el-row v-show="!previewModel" class="market-main">
+    <el-row
+      v-show="!previewModel"
+      class="market-main"
+    >
       <el-row>
         <el-col span="12">
-          <span class="title-left">{{$t('app_template.app_manager')}}</span>
+          <span class="title-left">{{ $t('app_template.app_manager') }}</span>
         </el-col>
       </el-row>
       <el-row>
-        <el-tabs v-model="marketActiveTab" @tab-click="handleClick">
-          <el-tab-pane v-for="(tabItem,index) in marketTabs" :key="index" :label="tabItem.label" :name="tabItem.name" />
+        <el-tabs
+          v-model="marketActiveTab"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane
+            v-for="(tabItem,index) in marketTabs"
+            :key="index"
+            :label="tabItem.label"
+            :name="tabItem.name"
+          />
         </el-tabs>
       </el-row>
       <el-row v-show="marketActiveTab==='apps'">
-        <el-row v-show="hasResult" id="template-main" v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="template-main">
+        <el-row
+          v-show="hasResult"
+          id="template-main"
+          v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+          class="template-main"
+        >
           <el-col
             v-for="(templateItem) in currentAppShowList"
             :key="templateItem.id"
@@ -30,16 +52,25 @@
             />
           </el-col>
         </el-row>
-        <el-row v-show="!hasResult" class="custom-position template-main">
+        <el-row
+          v-show="!hasResult"
+          class="custom-position template-main"
+        >
           <div style="text-align: center">
-            <svg-icon icon-class="no_result" style="font-size: 75px;margin-bottom: 16px" />
+            <svg-icon
+              icon-class="no_result"
+              style="font-size: 75px;margin-bottom: 16px"
+            />
             <br>
             <span>{{ $t('commons.no_result') }}</span>
           </div>
         </el-row>
       </el-row>
-      <el-row v-show="marketActiveTab==='apply_logs'" class="main-log-area template-main">
-        <app-template-log class="log-area"></app-template-log>
+      <el-row
+        v-show="marketActiveTab==='apply_logs'"
+        class="main-log-area template-main"
+      >
+        <app-template-log class="log-area" />
       </el-row>
     </el-row>
 
@@ -53,11 +84,26 @@
       append-to-body="true"
       :destroy-on-close="true"
     >
-      <el-form ref="panelForm" :model="panelForm" :rules="rule" label-width="80px">
-        <el-form-item :label="$t('panel.name')" prop="name">
-          <el-input v-model="panelForm.name" :clearable="true" :placeholder="$t('panel.enter_name_tips')" />
+      <el-form
+        ref="panelForm"
+        :model="panelForm"
+        :rules="rule"
+        label-width="80px"
+      >
+        <el-form-item
+          :label="$t('panel.name')"
+          prop="name"
+        >
+          <el-input
+            v-model="panelForm.name"
+            :clearable="true"
+            :placeholder="$t('panel.enter_name_tips')"
+          />
         </el-form-item>
-        <el-form-item :label="$t('commons.folder')" prop="pid">
+        <el-form-item
+          :label="$t('commons.folder')"
+          prop="pid"
+        >
           <treeselect
             v-model="panelForm.pid"
             :clearable="false"
@@ -70,27 +116,37 @@
           />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer dialog-footer-self">
-        <el-button size="mini" @click="folderSelectShow=false">{{ $t('commons.cancel') }}</el-button>
-        <el-button size="mini" type="primary" :disabled="!panelForm.name || !panelForm.pid" @click="apply">{{ $t('commons.confirm') }}</el-button>
+      <div
+        slot="footer"
+        class="dialog-footer dialog-footer-self"
+      >
+        <el-button
+          size="mini"
+          @click="folderSelectShow=false"
+        >{{ $t('commons.cancel') }}</el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          :disabled="!panelForm.name || !panelForm.pid"
+          @click="apply"
+        >{{ $t('commons.confirm') }}</el-button>
       </div>
     </el-dialog>
   </el-row>
 </template>
 
 <script>
-import { searchAppTemplate, getCategories } from '@/api/appTemplateMarket'
-import TemplateMarketItem from '@/views/panel/appTemplateMarket/component/TemplateMarketItem'
+import { searchAppTemplate } from '@/api/appTemplateMarket'
 import { groupTree, panelSave } from '@/api/panel/panel'
 import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
 import MarketPreview from '@/views/panel/appTemplateMarket/component/MarketPreview'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import AppTemplateItem from "@/views/panel/appTemplateMarket/component/AppTemplateItem";
-import AppTemplateLog from "@/views/panel/appTemplateMarket/log";
+import AppTemplateItem from '@/views/panel/appTemplateMarket/component/AppTemplateItem'
+import AppTemplateLog from '@/views/panel/appTemplateMarket/log'
 
 export default {
-  name: 'appTemplateMarket',
-  components: {AppTemplateLog, AppTemplateItem, MarketPreview, TemplateMarketItem },
+  name: 'AppTemplateMarket',
+  components: { AppTemplateLog, AppTemplateItem, MarketPreview },
   data() {
     return {
       hasResult: true,
@@ -100,8 +156,8 @@ export default {
       previewModel: false,
       previewVisible: false,
       templatePreviewId: '',
-      currentApp:null,
-      marketTabs: [{label:'Apps',name:'apps'},{label:this.$t('app_template.apply_logs'),name:'apply_logs'}],
+      currentApp: null,
+      marketTabs: [{ label: 'Apps', name: 'apps' }, { label: this.$t('app_template.apply_logs'), name: 'apply_logs' }],
       marketActiveTab: 'apps',
       searchText: null,
       panelForm: {
@@ -160,7 +216,7 @@ export default {
   },
   methods: {
     initMarketTemplate() {
-      searchAppTemplate({nodeType:'folder'}).then(rsp => {
+      searchAppTemplate({ nodeType: 'folder' }).then(rsp => {
         this.currentAppShowList = rsp.data
       }).catch(() => {
         this.networkStatus = false
@@ -214,7 +270,7 @@ export default {
     newPanel() {
 
     },
-    appPreview(appTemplate){
+    appPreview(appTemplate) {
       this.templatePreviewId = appTemplate.id
       this.currentApp = appTemplate
       this.previewModel = true
diff --git a/frontend/src/views/panel/appTemplateMarket/log/filterUser.vue b/frontend/src/views/panel/appTemplateMarket/log/filterUser.vue
index 6e6ebe1700..8678e83424 100644
--- a/frontend/src/views/panel/appTemplateMarket/log/filterUser.vue
+++ b/frontend/src/views/panel/appTemplateMarket/log/filterUser.vue
@@ -1,25 +1,32 @@
 <template>
   <el-drawer
+    v-closePress
     :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
     custom-class="user-drawer-task"
     size="680px"
-    v-closePress
     direction="rtl"
   >
     <div class="el-drawer__body-cont">
       <div class="filter">
         <span>{{ $t("dedaterange.label") }}</span>
         <div class="filter-item">
-          <DeDatePick  v-model="dataRange"></DeDatePick>
+          <DeDatePick v-model="dataRange" />
         </div>
       </div>
     </div>
     <div class="foot">
-      <el-button class="btn normal" @click="reset">{{
+      <el-button
+        class="btn normal"
+        @click="reset"
+      >{{
         $t("commons.reset")
       }}</el-button>
-      <el-button type="primary" class="btn" @click="search">{{
+      <el-button
+        type="primary"
+        class="btn"
+        @click="search"
+      >{{
         $t("commons.adv_search.search")
       }}</el-button>
     </div>
@@ -27,9 +34,7 @@
 </template>
 
 <script>
-import { dateFormat } from "@/views/system/task/options.js";
-import { opTypes } from "@/api/system/log";
-import { post } from "@/api/dataset/dataset";
+import { dateFormat } from '@/views/system/task/options.js'
 import DeDatePick from '@/components/deCustomCm/deDatePick.vue'
 export default {
   components: {
@@ -42,8 +47,8 @@ export default {
       filterTextMap: [],
       dataRange: [],
       activeType: [],
-      userDrawer: false,
-    };
+      userDrawer: false
+    }
   },
   computed: {
   },
@@ -51,57 +56,56 @@ export default {
   },
   methods: {
     clearFilter() {
-      this.dataRange = [];
-      this.$emit("search", [], []);
+      this.dataRange = []
+      this.$emit('search', [], [])
     },
     clearOneFilter(index) {
       (this.filterTextMap[index] || []).forEach((ele) => {
-        this[ele] = [];
-      });
+        this[ele] = []
+      })
     },
     search() {
-      this.userDrawer = false;
-      this.$emit("search", this.formatCondition(), this.formatText());
+      this.userDrawer = false
+      this.$emit('search', this.formatCondition(), this.formatText())
     },
     formatText() {
-      this.filterTextMap = [];
-      const params = [];
+      this.filterTextMap = []
+      const params = []
       if (this.dataRange.length) {
         params.push(
-          `${this.$t("dedaterange.label")}:${this.dataRange
+          `${this.$t('dedaterange.label')}:${this.dataRange
             .map((ele) => {
-              return dateFormat("YYYY-mm-dd", ele);
+              return dateFormat('YYYY-mm-dd', ele)
             })
-            .join("-")}`
-        );
-        this.filterTextMap.push(["dataRange"]);
+            .join('-')}`
+        )
+        this.filterTextMap.push(['dataRange'])
       }
-      return params;
+      return params
     },
     formatCondition() {
-      const fildMap = {
-      };
-      const conditions = [];
-      let [min, max] = this.dataRange;
+      const conditions = []
+      // eslint-disable-next-line
+      let [min, max] = this.dataRange
       if (min && max) {
         if (+min === +max) {
-          max = +max + 24 * 3600 * 1000;
+          max = +max + 24 * 3600 * 1000
         }
         conditions.push({
-          field: "apply_time",
-          operator: "between",
-          value: [+min, +max],
-        });
+          field: 'apply_time',
+          operator: 'between',
+          value: [+min, +max]
+        })
       }
-      return conditions;
+      return conditions
     },
     init() {
-      this.userDrawer = true;
+      this.userDrawer = true
     },
     reset() {
-      this.clearFilter();
-      this.userDrawer = false;
-    },
-  },
-};
+      this.clearFilter()
+      this.userDrawer = false
+    }
+  }
+}
 </script>
diff --git a/frontend/src/views/panel/appTemplateMarket/log/index.vue b/frontend/src/views/panel/appTemplateMarket/log/index.vue
index 24bb969e13..795d645ea4 100644
--- a/frontend/src/views/panel/appTemplateMarket/log/index.vue
+++ b/frontend/src/views/panel/appTemplateMarket/log/index.vue
@@ -11,7 +11,10 @@
         >{{ $t('commons.create') }}</el-button>
         <span>&nbsp;</span>
       </el-col>
-      <el-col :span="12" class="right-user">
+      <el-col
+        :span="12"
+        class="right-user"
+      >
         <el-input
           ref="search"
           v-model="nickName"
@@ -35,7 +38,10 @@
         </deBtn>
       </el-col>
     </el-row>
-    <div v-if="filterTexts.length" class="filter-texts">
+    <div
+      v-if="filterTexts.length"
+      class="filter-texts"
+    >
       <span class="sum">{{ paginationConfig.total }}</span>
       <span class="title">{{ $t("user.result_one") }}</span>
       <el-divider direction="vertical" />
@@ -45,8 +51,15 @@
         @click="scrollPre"
       />
       <div class="filter-texts-container">
-        <p v-for="(ele, index) in filterTexts" :key="ele" class="text">
-          {{ ele }} <i class="el-icon-close" @click="clearOneFilter(index)" />
+        <p
+          v-for="(ele, index) in filterTexts"
+          :key="ele"
+          class="text"
+        >
+          {{ ele }} <i
+            class="el-icon-close"
+            @click="clearOneFilter(index)"
+          />
         </p>
       </div>
       <i
@@ -80,7 +93,7 @@
           prop="opType"
           :label="'数据源'"
         >
-          <template v-slot:default="{ row }">
+          <template #default="{ row }">
             <span>{{ row.datasourceName }}</span>
           </template>
         </el-table-column>
@@ -105,20 +118,22 @@
           sortable="custom"
           :label="'应用时间'"
         >
-          <template v-slot:default="scope">
+          <template #default="scope">
             <span>{{ scope.row.applyTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
       </grid-table>
     </div>
     <keep-alive>
-      <filterUser ref="filterUser" @search="filterDraw" />
+      <filterUser
+        ref="filterUser"
+        @search="filterDraw"
+      />
     </keep-alive>
   </el-row>
 </template>
 
 <script>
-import DeLayoutContent from '@/components/business/DeLayoutContent'
 import GridTable from '@/components/gridTable/index.vue'
 import filterUser from './filterUser'
 import _ from 'lodash'
@@ -130,7 +145,7 @@ import {
 import { logGrid } from '@/api/appTemplateMarket/log'
 export default {
   name: 'AppTemplateLog',
-  components: { GridTable, DeLayoutContent, filterUser },
+  components: { GridTable, filterUser },
   mixins: [keyEnter],
   props: {
     appTemplateId: {
diff --git a/frontend/src/views/panel/edit/ComponentWait.vue b/frontend/src/views/panel/edit/ComponentWait.vue
index c03ef8df86..cc7ace5ece 100644
--- a/frontend/src/views/panel/edit/ComponentWait.vue
+++ b/frontend/src/views/panel/edit/ComponentWait.vue
@@ -5,11 +5,11 @@
     </el-row>
     <el-row class="component-wait-main">
       <el-col
-        :span="8"
         v-for="(config) in pcComponentData"
         v-if="!config.mobileSelected"
         :id="'wait' + config.id"
         :key="config.id"
+        :span="8"
       >
         <component-wait-item
           :config="config"
diff --git a/frontend/src/views/panel/edit/ComponentWaitItem.vue b/frontend/src/views/panel/edit/ComponentWaitItem.vue
index 4c48c259c5..fad8a6f0ac 100644
--- a/frontend/src/views/panel/edit/ComponentWaitItem.vue
+++ b/frontend/src/views/panel/edit/ComponentWaitItem.vue
@@ -1,8 +1,19 @@
 <template>
   <div class="component-item">
-    <mobile-check-bar v-if="mobileCheckBarShow" :element="config" />
-    <div :style="commonStyle" class="inner-item">
-      <svg-icon v-if="svgInnerEnable" :style="{'color':this.config.commonBackground.innerImageColor}" class="svg-background" :icon-class="mainSlotSvgInner" />
+    <mobile-check-bar
+      v-if="mobileCheckBarShow"
+      :element="config"
+    />
+    <div
+      :style="commonStyle"
+      class="inner-item"
+    >
+      <svg-icon
+        v-if="svgInnerEnable"
+        :style="{'color':config.commonBackground.innerImageColor}"
+        class="svg-background"
+        :icon-class="mainSlotSvgInner"
+      />
       <de-out-widget
         v-if="config.type==='custom'"
         :id="'component' + config.id"
@@ -36,7 +47,7 @@ import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar
 import { getStyle } from '@/components/canvas/utils/style'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'ComponentWaitItem',
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index d037fc2db6..b52860b98a 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -16,7 +16,10 @@
     </el-header>
     <de-container>
       <de-aside-container class="ms-aside-container">
-        <div v-show="showAside" style="width: 60px; left: 0px; top: 0px; bottom: 0px;  position: absolute">
+        <div
+          v-show="showAside"
+          style="width: 60px; left: 0px; top: 0px; bottom: 0px;  position: absolute"
+        >
           <div
             style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px"
           >
@@ -25,9 +28,17 @@
               class="button-div-class"
               style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;"
             >
-              <el-button circle class="el-icon-circle-plus-outline" size="mini" @click="newChart()" />
+              <el-button
+                circle
+                class="el-icon-circle-plus-outline"
+                size="mini"
+                @click="newChart()"
+              />
             </div>
-            <div class="button-text" style="position: relative; margin: 18px auto 16px;">
+            <div
+              class="button-text"
+              style="position: relative; margin: 18px auto 16px;"
+            >
               <div
                 style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
               >
@@ -54,7 +65,10 @@
                 @click="showPanel(1)"
               />
             </div>
-            <div class="button-text" style=" position: relative; margin: 18px auto 16px;">
+            <div
+              class="button-text"
+              style=" position: relative; margin: 18px auto 16px;"
+            >
               <div
                 style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
               >
@@ -82,7 +96,10 @@
                 @click="showPanel(3)"
               />
             </div>
-            <div class="button-text" style=" position: relative; margin: 18px auto 16px;">
+            <div
+              class="button-text"
+              style=" position: relative; margin: 18px auto 16px;"
+            >
               <div
                 style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
               >
@@ -109,7 +126,10 @@
                 @click="showMultiplexing(true)"
               />
             </div>
-            <div class="button-text" style="position: relative; margin: 18px auto 16px;">
+            <div
+              class="button-text"
+              style="position: relative; margin: 18px auto 16px;"
+            >
               <div
                 style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
               >
@@ -160,11 +180,22 @@
         >
           <!-- 仪表板联动清除按钮-->
           <canvas-opt-bar />
-          <Editor ref="canvasEditor" :matrix-count="pcMatrixCountBase" :out-style="outStyle" :scroll-top="scrollTop" />
+          <Editor
+            ref="canvasEditor"
+            :matrix-count="pcMatrixCountBase"
+            :out-style="outStyle"
+            :scroll-top="scrollTop"
+          />
         </div>
         <!--移动端画布区域 保持宽高比2.5-->
-        <el-row v-if="mobileLayoutStatus" class="mobile_canvas_main">
-          <el-col :span="8" class="this_mobile_canvas_cell">
+        <el-row
+          v-if="mobileLayoutStatus"
+          class="mobile_canvas_main"
+        >
+          <el-col
+            :span="8"
+            class="this_mobile_canvas_cell"
+          >
             <div
               v-proportion="2.1"
               :style="customCanvasMobileStyle"
@@ -196,7 +227,12 @@
               </el-row>
               <el-row class="this_mobile_canvas_inner_bottom">
                 <el-col :span="12">
-                  <i v-if="!hasStar" class="el-icon-star-off" size="mini" @click="star" />
+                  <i
+                    v-if="!hasStar"
+                    class="el-icon-star-off"
+                    size="mini"
+                    @click="star"
+                  />
                   <i
                     v-if="hasStar"
                     class="el-icon-star-on"
@@ -205,22 +241,41 @@
                     @click="unstar"
                   />
                 </el-col>
-                <el-col :span="12" style="float: right">
-                  <i class="el-icon-refresh-right" size="mini" @click="mobileRefresh" />
+                <el-col
+                  :span="12"
+                  style="float: right"
+                >
+                  <i
+                    class="el-icon-refresh-right"
+                    size="mini"
+                    @click="mobileRefresh"
+                  />
                 </el-col>
               </el-row>
               <el-row class="this_mobile_canvas_bottom" />
             </div>
           </el-col>
-          <el-col :span="16" class="this_mobile_canvas_cell this_mobile_canvas_wait_cell" :style="mobileCanvasStyle">
+          <el-col
+            :span="16"
+            class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
+            :style="mobileCanvasStyle"
+          >
             <component-wait />
           </el-col>
         </el-row>
       </de-main-container>
 
-      <div v-show="!mobileLayoutStatus&&rightDrawOpen" class="tools-window-main">
+      <div
+        v-show="!mobileLayoutStatus&&rightDrawOpen"
+        class="tools-window-main"
+      >
         <div v-if="showViewToolsAside">
-          <chart-edit ref="chartEditRef" :edit-statue="showViewToolsAside&&!mobileLayoutStatus&&rightDrawOpen" :edit-from="'panel'" :param="chartEditParam" />
+          <chart-edit
+            ref="chartEditRef"
+            :edit-statue="showViewToolsAside&&!mobileLayoutStatus&&rightDrawOpen"
+            :edit-from="'panel'"
+            :param="chartEditParam"
+          />
         </div>
         <div v-if="showBatchViewToolsAside">
           <chart-style-batch-set />
@@ -228,7 +283,13 @@
         <div v-if="!showViewToolsAside&&!showBatchViewToolsAside">
           <el-row style="height: 40px">
             <el-tooltip :content="$t('chart.draw_back')">
-              <el-button class="el-icon-d-arrow-right" style="position:absolute;left: 4px;top: 5px;" size="mini" circle @click="changeRightDrawOpen(false)" />
+              <el-button
+                class="el-icon-d-arrow-right"
+                style="position:absolute;left: 4px;top: 5px;"
+                size="mini"
+                circle
+                @click="changeRightDrawOpen(false)"
+              />
             </el-tooltip>
           </el-row>
           <el-row>
@@ -284,13 +345,24 @@
       />
       <div style="text-align: end !important;margin: 0 15px 10px !important;">
         <span slot="footer">
-          <el-button size="mini" @click="cancelFilter">{{ $t('commons.cancel') }}</el-button>
-          <el-button :disabled="!enableSureButton" type="primary" size="mini" @click="sureFilter">{{ $t('commons.confirm') }}</el-button>
+          <el-button
+            size="mini"
+            @click="cancelFilter"
+          >{{ $t('commons.cancel') }}</el-button>
+          <el-button
+            :disabled="!enableSureButton"
+            type="primary"
+            size="mini"
+            @click="sureFilter"
+          >{{ $t('commons.confirm') }}</el-button>
         </span>
       </div>
     </el-dialog>
 
-    <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="previewVisible">
+    <fullscreen
+      style="height: 100%;background: #f7f8fa;overflow-y: auto"
+      :fullscreen.sync="previewVisible"
+    >
       <Preview
         v-if="previewVisible"
         :in-screen="!previewVisible"
@@ -312,7 +384,11 @@
     >
 
     <!--矩形样式组件-->
-    <TextAttr v-if="showAttr" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
+    <TextAttr
+      v-if="showAttr"
+      :scroll-left="scrollLeft"
+      :scroll-top="scrollTop"
+    />
     <!--复用ChartGroup组件 不做显示-->
     <ChartGroup
       ref="chartGroup"
@@ -332,7 +408,10 @@
       :destroy-on-close="true"
       :append-to-body="true"
     >
-      <OuterParamsSet v-if="outerParamsSetVisible" @outerParamsSetVisibleChange="outerParamsSetVisibleChange" />
+      <OuterParamsSet
+        v-if="outerParamsSetVisible"
+        @outerParamsSetVisibleChange="outerParamsSetVisibleChange"
+      />
     </el-dialog>
 
     <!--复用视图全屏显示框-->
@@ -342,14 +421,27 @@
       class="dialog-css"
       :fullscreen="true"
     >
-      <multiplexing v-if="multiplexingShow" :view-data="viewData" />
-      <div slot="title" class="dialog-footer title-text">
+      <multiplexing
+        v-if="multiplexingShow"
+        :view-data="viewData"
+      />
+      <div
+        slot="title"
+        class="dialog-footer title-text"
+      >
         <span style="font-size: 14px;">
           {{ $t('panel.multiplexing') }}
         </span>
         <span style="float: right;">
-          <el-button type="primary" size="mini" @click="saveMultiplexing()">{{ $t('commons.confirm') }}</el-button>
-          <el-button size="mini" @click="showMultiplexing(false)">{{ $t('commons.cancel') }}</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="saveMultiplexing()"
+          >{{ $t('commons.confirm') }}</el-button>
+          <el-button
+            size="mini"
+            @click="showMultiplexing(false)"
+          >{{ $t('commons.cancel') }}</el-button>
         </span>
       </div>
     </el-dialog>
@@ -363,15 +455,28 @@
     >
       <el-row style="height: 20px">
         <el-col :span="3">
-          <svg-icon icon-class="warn-tre" style="width: 20px;height: 20px;float: right" />
+          <svg-icon
+            icon-class="warn-tre"
+            style="width: 20px;height: 20px;float: right"
+          />
         </el-col>
         <el-col :span="21">
           <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.panel_cache_use_tips') }}</span>
         </el-col>
       </el-row>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="useCache(false)">{{ $t('panel.no') }}</el-button>
-        <el-button type="primary" size="mini" @click="useCache(true)">{{ $t('panel.yes') }}</el-button>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="useCache(false)"
+        >{{ $t('panel.no') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="useCache(true)"
+        >{{ $t('panel.yes') }}</el-button>
       </div>
     </el-dialog>
 
@@ -398,7 +503,6 @@ import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/canvas/components/Toolbar'
 import {
   checkUserCache,
-  findUserCache,
   initPanelData,
   initViewCache,
   queryPanelMultiplexingViewTree
diff --git a/frontend/src/views/panel/enshrine/index.vue b/frontend/src/views/panel/enshrine/index.vue
index c1ff91cb41..12cc332e5d 100644
--- a/frontend/src/views/panel/enshrine/index.vue
+++ b/frontend/src/views/panel/enshrine/index.vue
@@ -7,19 +7,30 @@
       :highlight-current-row="true"
       style="width: 100%"
     >
-      <el-table-column prop="name" :label="$t('commons.name')">
-        <template :id="scope.row.storeId" slot-scope="scope">
+      <el-table-column
+        prop="name"
+        :label="$t('commons.name')"
+      >
+        <template
+          slot-scope="scope"
+        >
           <div class="start-item">
             <div
               class="filter-db-row star-item-content"
               style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
               @click="showPanel(scope.row)"
             >
-              <svg-icon :icon-class="'panel-'+scope.row.status" class="ds-icon-scene" />
+              <svg-icon
+                :icon-class="'panel-'+scope.row.status"
+                class="ds-icon-scene"
+              />
               <span :class="scope.row.status"> {{ scope.row.name }}</span>
             </div>
             <div class="star-item-close">
-              <i class="el-icon-delete " @click="remove(scope.row)" />
+              <i
+                class="el-icon-delete "
+                @click="remove(scope.row)"
+              />
             </div>
           </div>
         </template>
diff --git a/frontend/src/views/panel/export/PDFExportTemplate.vue b/frontend/src/views/panel/export/PDFExportTemplate.vue
index d0d9a3b5fe..b5f182216a 100644
--- a/frontend/src/views/panel/export/PDFExportTemplate.vue
+++ b/frontend/src/views/panel/export/PDFExportTemplate.vue
@@ -3,7 +3,10 @@
     <div> 导出时间：$TIME$</div>
     <div contenteditable="true"> 可以输入内容</div>
     <div>
-      <img width="100%" src="$snapshot$">
+      <img
+        width="100%"
+        src="$snapshot$"
+      >
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/panel/export/PDFPreExport.vue b/frontend/src/views/panel/export/PDFPreExport.vue
index 6a3de08835..586b653d0a 100644
--- a/frontend/src/views/panel/export/PDFPreExport.vue
+++ b/frontend/src/views/panel/export/PDFPreExport.vue
@@ -7,13 +7,28 @@
     element-loading-background="rgba(220,220,220, 1)"
   >
     <el-row class="export_body_class">
-      <div id="exportPdf" ref="exportPdf" :style="mainCanvasStyle">
-        <div class="export_body_inner_class" :style="templateHtmlStyle" v-html="templateContentChange" />
+      <div
+        id="exportPdf"
+        ref="exportPdf"
+        :style="mainCanvasStyle"
+      >
+        <div
+          class="export_body_inner_class"
+          :style="templateHtmlStyle"
+          v-html="templateContentChange"
+        />
       </div>
     </el-row>
     <el-row class="root_class">
-      <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
-      <el-button type="primary" size="mini" @click="save()">{{ $t('panel.export_pdf') }}</el-button>
+      <el-button
+        size="mini"
+        @click="cancel()"
+      >{{ $t('commons.cancel') }}</el-button>
+      <el-button
+        type="primary"
+        size="mini"
+        @click="save()"
+      >{{ $t('panel.export_pdf') }}</el-button>
     </el-row>
   </el-row>
 </template>
diff --git a/frontend/src/views/panel/export/date.js b/frontend/src/views/panel/export/date.js
index 713cc7a4fe..7d01c288e2 100644
--- a/frontend/src/views/panel/export/date.js
+++ b/frontend/src/views/panel/export/date.js
@@ -3,6 +3,8 @@
 // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
 // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
 // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+
+// eslint-disable-next-line
 Date.prototype.Format = function(fmt) {
   var o = {
     'M+': this.getMonth() + 1, // 月份
diff --git a/frontend/src/views/panel/filter/ButtonDialog.vue b/frontend/src/views/panel/filter/ButtonDialog.vue
index 8e5d7d2d04..78b6070fa5 100644
--- a/frontend/src/views/panel/filter/ButtonDialog.vue
+++ b/frontend/src/views/panel/filter/ButtonDialog.vue
@@ -1,28 +1,71 @@
 <template>
   <div>
-    <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="80px">
-      <el-form-item :label="$t('desearchbutton.text')" prop="text">
-        <el-input v-model="currentElement.options.value" maxlength="10" show-word-limit />
+    <el-form
+      ref="form"
+      size="mini"
+      :rules="rules"
+      :model="form"
+      label-width="80px"
+    >
+      <el-form-item
+        :label="$t('desearchbutton.text')"
+        prop="text"
+      >
+        <el-input
+          v-model="currentElement.options.value"
+          maxlength="10"
+          show-word-limit
+        />
       </el-form-item>
 
       <el-form-item :label="$t('desearchbutton.auto_trigger')">
-        <el-switch v-model="myAttrs.autoTrigger" @change="autoTriggerChange" />
-        <el-link style="margin-left: 10px;" type="info" disabled>{{ $t('desearchbutton.auto_trigger_tip') }}</el-link>
+        <el-switch
+          v-model="myAttrs.autoTrigger"
+          @change="autoTriggerChange"
+        />
+        <el-link
+          style="margin-left: 10px;"
+          type="info"
+          disabled
+        >{{ $t('desearchbutton.auto_trigger_tip') }}</el-link>
       </el-form-item>
 
       <el-form-item :label="$t('desearchbutton.range')">
-        <el-switch v-model="myAttrs.customRange" @change="customRangeChange" />
-        <el-link style="margin-left: 10px;" type="warning" disabled>{{ $t('desearchbutton.range_tip') }}</el-link>
+        <el-switch
+          v-model="myAttrs.customRange"
+          @change="customRangeChange"
+        />
+        <el-link
+          style="margin-left: 10px;"
+          type="warning"
+          disabled
+        >{{ $t('desearchbutton.range_tip') }}</el-link>
       </el-form-item>
 
-      <el-form-item v-if="myAttrs.customRange" :label="$t('desearchbutton.relative')">
-        <el-select v-model="myAttrs.filterIds" style="width: 100%;" multiple clearable>
-          <el-option v-for="(filter, index) in filters" :key="filter.id + index" :label="filter.showName" :value="filter.id" />
+      <el-form-item
+        v-if="myAttrs.customRange"
+        :label="$t('desearchbutton.relative')"
+      >
+        <el-select
+          v-model="myAttrs.filterIds"
+          style="width: 100%;"
+          multiple
+          clearable
+        >
+          <el-option
+            v-for="(filter, index) in filters"
+            :key="filter.id + index"
+            :label="filter.showName"
+            :value="filter.id"
+          />
         </el-select>
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" @click="sure">{{ $t('commons.confirm') }}</el-button>
+        <el-button
+          type="primary"
+          @click="sure"
+        >{{ $t('commons.confirm') }}</el-button>
         <el-button @click="cancel">{{ $t('commons.cancel') }}</el-button>
       </el-form-item>
     </el-form>
diff --git a/frontend/src/views/panel/filter/ButtonResetDialog.vue b/frontend/src/views/panel/filter/ButtonResetDialog.vue
index b5dafd50bc..9d4fb9665b 100644
--- a/frontend/src/views/panel/filter/ButtonResetDialog.vue
+++ b/frontend/src/views/panel/filter/ButtonResetDialog.vue
@@ -1,12 +1,28 @@
 <template>
   <div>
-    <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="80px">
-      <el-form-item :label="$t('desresetbutton.text')" prop="text">
-        <el-input v-model="currentElement.options.value" maxlength="10" show-word-limit />
+    <el-form
+      ref="form"
+      size="mini"
+      :rules="rules"
+      :model="form"
+      label-width="80px"
+    >
+      <el-form-item
+        :label="$t('desresetbutton.text')"
+        prop="text"
+      >
+        <el-input
+          v-model="currentElement.options.value"
+          maxlength="10"
+          show-word-limit
+        />
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" @click="sure">{{ $t('commons.confirm') }}</el-button>
+        <el-button
+          type="primary"
+          @click="sure"
+        >{{ $t('commons.confirm') }}</el-button>
         <el-button @click="cancel">{{ $t('commons.cancel') }}</el-button>
       </el-form-item>
     </el-form>
diff --git a/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue b/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
index cd37800882..feb598b706 100644
--- a/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
+++ b/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
@@ -1,9 +1,20 @@
 <template>
-  <div v-if="element" class="default-value-div">
-    <el-form ref="form" :model="element.options.attrs.default" label-width="100px" size="mini">
+  <div
+    v-if="element"
+    class="default-value-div"
+  >
+    <el-form
+      ref="form"
+      :model="element.options.attrs.default"
+      label-width="100px"
+      size="mini"
+    >
 
       <el-form-item :label="$t('dynamic_time.set_default')">
-        <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
+        <el-radio-group
+          v-model="element.options.attrs.default.isDynamic"
+          @change="dynamicChange"
+        >
 
           <el-radio
             v-for="(item, index) in defaultSetting.radioOptions"
@@ -16,7 +27,10 @@
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.relative')">
+      <el-form-item
+        v-if="element.options.attrs.default.isDynamic"
+        :label="$t('dynamic_time.relative')"
+      >
 
         <el-select
           v-model="element.options.attrs.default.dkey"
@@ -86,14 +100,23 @@
             placeholder=""
             @change="dynamicSuffixChange"
           >
-            <el-option :label="$t('dynamic_time.before')" value="before" />
-            <el-option :label="$t('dynamic_time.after')" value="after" />
+            <el-option
+              :label="$t('dynamic_time.before')"
+              value="before"
+            />
+            <el-option
+              :label="$t('dynamic_time.after')"
+              value="after"
+            />
           </el-select>
         </el-form-item>
 
       </div>
 
-      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
+      <el-form-item
+        v-if="element.options.attrs.default.isDynamic"
+        :label="$t('dynamic_time.preview')"
+      >
         <el-date-picker
           v-model="dval"
           :type="componentType"
@@ -104,7 +127,10 @@
         />
       </el-form-item>
 
-      <el-form-item v-else :label="$t('dynamic_time.set')">
+      <el-form-item
+        v-else
+        :label="$t('dynamic_time.set')"
+      >
         <component
           :is="element.component"
           :id="'component' + element.id"
diff --git a/frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue b/frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue
index acebfc0a6a..a43ca1ea5a 100644
--- a/frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue
+++ b/frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue
@@ -1,15 +1,29 @@
 <template>
   <div v-if="element">
-    <el-form ref="form" :model="element.options.attrs.default" label-width="100px" size="mini">
+    <el-form
+      ref="form"
+      :model="element.options.attrs.default"
+      label-width="100px"
+      size="mini"
+    >
 
       <el-form-item :label="$t('dynamic_time.set_default')">
-        <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
+        <el-radio-group
+          v-model="element.options.attrs.default.isDynamic"
+          @change="dynamicChange"
+        >
           <el-radio :label="false">{{ $t('dynamic_time.fix') }}</el-radio>
-          <el-radio :label="true" :disabled="isTimeWidget && element.options.attrs.showTime">{{ $t('dynamic_time.dynamic') }}</el-radio>
+          <el-radio
+            :label="true"
+            :disabled="isTimeWidget && element.options.attrs.showTime"
+          >{{ $t('dynamic_time.dynamic') }}</el-radio>
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.relative')">
+      <el-form-item
+        v-if="element.options.attrs.default.isDynamic"
+        :label="$t('dynamic_time.relative')"
+      >
 
         <el-select
           v-model="element.options.attrs.default.dkey"
@@ -18,17 +32,44 @@
           popper-class="date-filter-poper"
           @change="dkeyChange"
         >
-          <el-option :label="$t('dynamic_time.cweek')" :value="0" />
-          <el-option :label="$t('dynamic_time.cmonth')" :value="1" />
-          <el-option :label="$t('dynamic_time.cquarter')" :value="2" />
-          <el-option :label="$t('dynamic_time.cyear')" :value="3" />
+          <el-option
+            :label="$t('dynamic_time.cweek')"
+            :value="0"
+          />
+          <el-option
+            :label="$t('dynamic_time.cmonth')"
+            :value="1"
+          />
+          <el-option
+            :label="$t('dynamic_time.cquarter')"
+            :value="2"
+          />
+          <el-option
+            :label="$t('dynamic_time.cyear')"
+            :value="3"
+          />
 
-          <el-option :label="$t('dynamic_time.lweek')" :value="5" />
-          <el-option :label="$t('dynamic_month.last')" :value="6" />
-          <el-option :label="$t('dynamic_time.lquarter')" :value="7" />
-          <el-option :label="$t('dynamic_year.last')" :value="8" />
+          <el-option
+            :label="$t('dynamic_time.lweek')"
+            :value="5"
+          />
+          <el-option
+            :label="$t('dynamic_month.last')"
+            :value="6"
+          />
+          <el-option
+            :label="$t('dynamic_time.lquarter')"
+            :value="7"
+          />
+          <el-option
+            :label="$t('dynamic_year.last')"
+            :value="8"
+          />
 
-          <el-option :label="$t('dynamic_time.custom')" :value="4" />
+          <el-option
+            :label="$t('dynamic_time.custom')"
+            :value="4"
+          />
         </el-select>
 
       </el-form-item>
@@ -60,10 +101,22 @@
             placeholder=""
             @change="dynamicInfillChange"
           >
-            <el-option :label="$t('dynamic_time.date')" value="day" />
-            <el-option :label="$t('dynamic_time.week')" value="week" />
-            <el-option :label="$t('dynamic_time.month')" value="month" />
-            <el-option :label="$t('dynamic_time.year')" value="year" />
+            <el-option
+              :label="$t('dynamic_time.date')"
+              value="day"
+            />
+            <el-option
+              :label="$t('dynamic_time.week')"
+              value="week"
+            />
+            <el-option
+              :label="$t('dynamic_time.month')"
+              value="month"
+            />
+            <el-option
+              :label="$t('dynamic_time.year')"
+              value="year"
+            />
           </el-select>
         </el-form-item>
 
@@ -79,8 +132,14 @@
             placeholder=""
             @change="dynamicSuffixChange"
           >
-            <el-option :label="$t('dynamic_time.before')" value="before" />
-            <el-option :label="$t('dynamic_time.after')" value="after" />
+            <el-option
+              :label="$t('dynamic_time.before')"
+              value="before"
+            />
+            <el-option
+              :label="$t('dynamic_time.after')"
+              value="after"
+            />
           </el-select>
         </el-form-item>
 
@@ -113,10 +172,22 @@
             placeholder=""
             @change="dynamicInfillChange"
           >
-            <el-option :label="$t('dynamic_time.date')" value="day" />
-            <el-option :label="$t('dynamic_time.week')" value="week" />
-            <el-option :label="$t('dynamic_time.month')" value="month" />
-            <el-option :label="$t('dynamic_time.year')" value="year" />
+            <el-option
+              :label="$t('dynamic_time.date')"
+              value="day"
+            />
+            <el-option
+              :label="$t('dynamic_time.week')"
+              value="week"
+            />
+            <el-option
+              :label="$t('dynamic_time.month')"
+              value="month"
+            />
+            <el-option
+              :label="$t('dynamic_time.year')"
+              value="year"
+            />
           </el-select>
         </el-form-item>
 
@@ -132,14 +203,23 @@
             placeholder=""
             @change="dynamicSuffixChange"
           >
-            <el-option :label="$t('dynamic_time.before')" value="before" />
-            <el-option :label="$t('dynamic_time.after')" value="after" />
+            <el-option
+              :label="$t('dynamic_time.before')"
+              value="before"
+            />
+            <el-option
+              :label="$t('dynamic_time.after')"
+              value="after"
+            />
           </el-select>
         </el-form-item>
 
       </div>
 
-      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
+      <el-form-item
+        v-if="element.options.attrs.default.isDynamic"
+        :label="$t('dynamic_time.preview')"
+      >
         <el-date-picker
           v-model="dval"
           :type="componentType"
@@ -150,7 +230,10 @@
         />
       </el-form-item>
 
-      <el-form-item v-else :label="$t('dynamic_time.set')">
+      <el-form-item
+        v-else
+        :label="$t('dynamic_time.set')"
+      >
         <component
           :is="element.component"
           :id="'component' + element.id"
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index 4439a10a58..47527c640f 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -1,13 +1,33 @@
 <template>
 
-  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="de-dialog-container">
-    <de-aside-container :show-drag-bar="false" class="ms-aside-container">
-      <el-tabs v-model="activeName" class="filter-dialog-tabs">
-        <el-tab-pane class="de-tab" :label="$t('panel.select_by_table')" name="dataset">
+  <de-container
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    class="de-dialog-container"
+  >
+    <de-aside-container
+      :show-drag-bar="false"
+      class="ms-aside-container"
+    >
+      <el-tabs
+        v-model="activeName"
+        class="filter-dialog-tabs"
+      >
+        <el-tab-pane
+          class="de-tab"
+          :label="$t('panel.select_by_table')"
+          name="dataset"
+        >
           <div class="component-header filter-common">
             <el-breadcrumb separator-class="el-icon-arrow-right">
-              <el-breadcrumb-item v-for="bread in dataSetBreads" :key="bread.label">
-                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)">
+              <el-breadcrumb-item
+                v-for="bread in dataSetBreads"
+                :key="bread.label"
+              >
+                <a
+                  v-if="bread.link"
+                  :class="{'link-text' : bread.link}"
+                  @click="backToLink(bread)"
+                >
                   {{ bread.label }}</a>
                 <span v-else>{{ bread.label }}</span>
               </el-breadcrumb-item>
@@ -38,21 +58,58 @@
 
                   @node-click="handleNodeClick"
                 >
-                  <span slot-scope="{ node, data }" style="display: flex;flex: 1;width: 0%;" class="custom-tree-node">
+                  <span
+                    slot-scope="{ node, data }"
+                    style="display: flex;flex: 1;width: 0%;"
+                    class="custom-tree-node"
+                  >
                     <span>
-                      <svg-icon v-if="data.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
-                      <svg-icon v-if="data.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
-                      <svg-icon v-if="data.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
-                      <svg-icon v-if="data.modelInnerType === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
-                      <svg-icon v-if="data.modelInnerType === 'union'" icon-class="ds-union" class="ds-icon-union" />
-                      <svg-icon v-if="data.modelInnerType === 'api'" icon-class="ds-api" class="ds-icon-api" />
+                      <svg-icon
+                        v-if="data.modelInnerType === 'db'"
+                        icon-class="ds-db"
+                        class="ds-icon-db"
+                      />
+                      <svg-icon
+                        v-if="data.modelInnerType === 'sql'"
+                        icon-class="ds-sql"
+                        class="ds-icon-sql"
+                      />
+                      <svg-icon
+                        v-if="data.modelInnerType === 'excel'"
+                        icon-class="ds-excel"
+                        class="ds-icon-excel"
+                      />
+                      <svg-icon
+                        v-if="data.modelInnerType === 'custom'"
+                        icon-class="ds-custom"
+                        class="ds-icon-custom"
+                      />
+                      <svg-icon
+                        v-if="data.modelInnerType === 'union'"
+                        icon-class="ds-union"
+                        class="ds-icon-union"
+                      />
+                      <svg-icon
+                        v-if="data.modelInnerType === 'api'"
+                        icon-class="ds-api"
+                        class="ds-icon-api"
+                      />
                     </span>
                     <span v-if="data.modelInnerType === 'db' || data.modelInnerType === 'sql'">
-                      <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
-                      <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
+                      <span
+                        v-if="data.mode === 0"
+                        style="margin-left: 6px"
+                      ><i class="el-icon-s-operation" /></span>
+                      <span
+                        v-if="data.mode === 1"
+                        style="margin-left: 6px"
+                      ><i class="el-icon-alarm-clock" /></span>
                     </span>
 
-                    <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="node.label">{{ node.label }}</span>
+                    <span
+                      style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                      :title="node.label"
+                    >{{ node.label }}</span>
 
                   </span>
                 </el-tree>
@@ -79,7 +136,10 @@
                             <i class="el-icon-s-data" />
                           </span>
 
-                          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="item.name">{{ item.name }}</span>
+                          <span
+                            style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                            :title="item.name"
+                          >{{ item.name }}</span>
                         </span>
                       </div>
                     </transition-group>
@@ -89,11 +149,22 @@
             </el-col>
           </div>
         </el-tab-pane>
-        <el-tab-pane class="de-tab" :label="$t('panel.select_by_module')" name="assembly">
+        <el-tab-pane
+          class="de-tab"
+          :label="$t('panel.select_by_module')"
+          name="assembly"
+        >
           <div class="component-header filter-common">
             <el-breadcrumb separator-class="el-icon-arrow-right">
-              <el-breadcrumb-item v-for="bread in componentSetBreads" :key="bread.label">
-                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="comBackLink(bread)">
+              <el-breadcrumb-item
+                v-for="bread in componentSetBreads"
+                :key="bread.label"
+              >
+                <a
+                  v-if="bread.link"
+                  :class="{'link-text' : bread.link}"
+                  @click="comBackLink(bread)"
+                >
                   {{ bread.label }}</a>
                 <span v-else>{{ bread.label }}</span>
               </el-breadcrumb-item>
@@ -126,17 +197,27 @@
                   :highlight-current-row="true"
                   style="width: 100%"
                 >
-                  <el-table-column prop="name" :label="$t('commons.name')">
-                    <template v-if="comShowDomType === 'view'" :id="scope.row.id" slot-scope="scope">
-                      <div class="filter-db-row" @click="comShowFieldDatas(scope.row)">
-                        <!-- <i class="el-icon-s-data" />
-                        <span> {{ scope.row.name }}</span> -->
+                  <el-table-column
+                    prop="name"
+                    :label="$t('commons.name')"
+                  >
+                    <template
+                      v-if="comShowDomType === 'view'"
+                      slot-scope="scope"
+                    >
+                      <div
+                        class="filter-db-row"
+                        @click="comShowFieldDatas(scope.row)"
+                      >
                         <span style="display: flex;flex: 1;">
                           <span>
                             <i class="el-icon-s-data" />
                           </span>
 
-                          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="scope.row.name">{{ scope.row.name }}</span>
+                          <span
+                            style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                            :title="scope.row.name"
+                          >{{ scope.row.name }}</span>
                         </span>
                       </div>
                     </template>
@@ -165,7 +246,10 @@
                             <i class="el-icon-s-data" />
                           </span>
 
-                          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="item.name">{{ item.name }}</span>
+                          <span
+                            style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                            :title="item.name"
+                          >{{ item.name }}</span>
                         </span>
 
                       </div>
@@ -181,9 +265,17 @@
 
     <de-main-container class="ms-main-container">
       <div v-if="currentElement.options && currentElement.options.attrs">
-        <filter-head :element="currentElement" :widget="widget" />
+        <filter-head
+          :element="currentElement"
+          :widget="widget"
+        />
 
-        <filter-control :element="currentElement" :widget="widget" :control-attrs="myAttrs" :child-views="childViews" />
+        <filter-control
+          :element="currentElement"
+          :widget="widget"
+          :control-attrs="myAttrs"
+          :child-views="childViews"
+        />
 
         <filter-foot :element="currentElement" />
 
@@ -481,10 +573,10 @@ export default {
         this.childViews.viewInfos = datas
       })
       var type = 'TEXT'
-      if(this.widgetInfo.name.indexOf('time') !== -1){
+      if (this.widgetInfo.name.indexOf('time') !== -1) {
         type = 'DATE'
       }
-      if(this.widgetInfo.name === 'numberSelectWidget'){
+      if (this.widgetInfo.name === 'numberSelectWidget') {
         type = 'NUM'
       }
       viewIds && viewIds.length > 0 && paramsWithIds(type, viewIds).then(res => {
diff --git a/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index 4370168890..721fa8e187 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -9,12 +9,23 @@
           @change="multipleChange"
         />
 
-        <span v-if="widget.isTimeWidget && widget.isTimeWidget()" style="padding-left: 10px;">
-          <el-checkbox v-model="attrs.showTime" @change="showTimeChange">
+        <span
+          v-if="widget.isTimeWidget && widget.isTimeWidget()"
+          style="padding-left: 10px;"
+        >
+          <el-checkbox
+            v-model="attrs.showTime"
+            @change="showTimeChange"
+          >
             <span>{{ $t('panel.show_time') }} </span>
           </el-checkbox>
 
-          <el-popover v-model="timePopovervisible" placement="bottom-end" :disabled="!attrs.showTime" width="140">
+          <el-popover
+            v-model="timePopovervisible"
+            placement="bottom-end"
+            :disabled="!attrs.showTime"
+            width="140"
+          >
             <div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
               <ul class="de-ul">
                 <li
@@ -46,9 +57,17 @@
     <el-col :span="16">
       <div class="filter-options-right">
         <span style="padding-right: 10px;">
-          <el-checkbox v-model="attrs.showTitle" @change="showTitleChange">{{ $t('panel.show_title') }}
+          <el-checkbox
+            v-model="attrs.showTitle"
+            @change="showTitleChange"
+          >{{ $t('panel.show_title') }}
           </el-checkbox>
-          <el-popover v-model="titlePopovervisible" placement="bottom-end" :disabled="!attrs.showTitle" width="200">
+          <el-popover
+            v-model="titlePopovervisible"
+            placement="bottom-end"
+            :disabled="!attrs.showTitle"
+            width="200"
+          >
             <div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
               <el-input
                 v-model="attrs.title"
@@ -67,12 +86,23 @@
           </el-popover>
         </span>
         <span style="padding-left: 10px;">
-          <el-checkbox v-model="attrs.enableRange" @change="enableRangeChange"><span>
+          <el-checkbox
+            v-model="attrs.enableRange"
+            @change="enableRangeChange"
+          ><span>
             {{ $t('panel.custom_scope') }} </span> </el-checkbox>
 
-          <el-popover v-model="popovervisible" placement="bottom-end" :disabled="!attrs.enableRange" width="200">
+          <el-popover
+            v-model="popovervisible"
+            placement="bottom-end"
+            :disabled="!attrs.enableRange"
+            width="200"
+          >
             <div class="view-container-class">
-              <el-checkbox-group v-model="attrs.viewIds" @change="checkedViewsChange">
+              <el-checkbox-group
+                v-model="attrs.viewIds"
+                @change="checkedViewsChange"
+              >
                 <el-checkbox
                   v-for="(item ) in childViews.viewInfos"
                   :key="item.id"
@@ -80,9 +110,21 @@
                   class="de-checkbox"
                 >
                   <div class="span-div">
-                    <svg-icon :icon-class="item.type" class="chart-icon" />
-                    <span v-if="item.name && item.name.length <= 7" style="margin-left: 6px">{{ item.name }}</span>
-                    <el-tooltip v-else class="item" effect="dark" :content="item.name" placement="left">
+                    <svg-icon
+                      :icon-class="item.type"
+                      class="chart-icon"
+                    />
+                    <span
+                      v-if="item.name && item.name.length <= 7"
+                      style="margin-left: 6px"
+                    >{{ item.name }}</span>
+                    <el-tooltip
+                      v-else
+                      class="item"
+                      effect="dark"
+                      :content="item.name"
+                      placement="left"
+                    >
                       <span style="margin-left: 6px">{{ item.name }}</span>
                     </el-tooltip>
                   </div>
@@ -98,11 +140,21 @@
             />
           </el-popover>
         </span>
-        <span v-if="showParams" style="padding-left: 10px;">
-          <el-checkbox v-model="attrs.enableParameters" @change="enableParametersChange"><span>
+        <span
+          v-if="showParams"
+          style="padding-left: 10px;"
+        >
+          <el-checkbox
+            v-model="attrs.enableParameters"
+            @change="enableParametersChange"
+          ><span>
             {{ $t('panel.binding_parameters') }} </span> </el-checkbox>
 
-          <el-popover placement="bottom-end" :disabled="!attrs.enableParameters" width="200">
+          <el-popover
+            placement="bottom-end"
+            :disabled="!attrs.enableParameters"
+            width="200"
+          >
             <div class="view-container-class">
               <el-checkbox-group v-model="attrs.parameters">
                 <el-checkbox
@@ -116,7 +168,13 @@
                       v-if="item.alias && item.alias.length <= 7"
                       style="margin-left: 6px"
                     >{{ item.alias }}</span>
-                    <el-tooltip v-else class="item" effect="dark" :content="item.alias" placement="left">
+                    <el-tooltip
+                      v-else
+                      class="item"
+                      effect="dark"
+                      :content="item.alias"
+                      placement="left"
+                    >
                       <span style="margin-left: 6px">{{ item.alias }}</span>
                     </el-tooltip>
                   </div>
diff --git a/frontend/src/views/panel/filter/filterMain/FilterFoot.vue b/frontend/src/views/panel/filter/filterMain/FilterFoot.vue
index e95451761c..515cd771dd 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterFoot.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterFoot.vue
@@ -22,11 +22,20 @@
 
         </el-card>
 
-        <el-card v-if="element.component && element.component === 'de-date' && element.serviceName && element.serviceName !== 'timeDateRangeWidget'" class="box-card">
-          <de-date-default v-if="element.component === 'de-date' && element.serviceName !== 'timeDateRangeWidget'" :element="element" />
+        <el-card
+          v-if="element.component && element.component === 'de-date' && element.serviceName && element.serviceName !== 'timeDateRangeWidget'"
+          class="box-card"
+        >
+          <de-date-default
+            v-if="element.component === 'de-date' && element.serviceName !== 'timeDateRangeWidget'"
+            :element="element"
+          />
         </el-card>
 
-        <el-card v-if="element.component && element.component === 'de-date' && element.serviceName && element.serviceName === 'timeDateRangeWidget'" class="box-card">
+        <el-card
+          v-if="element.component && element.component === 'de-date' && element.serviceName && element.serviceName === 'timeDateRangeWidget'"
+          class="box-card"
+        >
           <de-date-range-default
             v-if="element.component === 'de-date' && element.serviceName === 'timeDateRangeWidget'"
             :element="element"
diff --git a/frontend/src/views/panel/filter/filterMain/FilterHead.vue b/frontend/src/views/panel/filter/filterMain/FilterHead.vue
index 5ad4f90db3..fe65265515 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterHead.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterHead.vue
@@ -17,8 +17,20 @@
                 @end="end2"
               >
 
-                <v-flex v-for="(item,index) in element.options.attrs.dragItems" :key="item.id">
-                  <drag-item :key="item.id" :is-sort-widget="isSortWidget" :item="item" :index="index" :sort="element.options.attrs.sort" :all-fields="index ? [] : tableFields" @closeItem="closeItem" @sort-change="sortChange" />
+                <v-flex
+                  v-for="(item,index) in element.options.attrs.dragItems"
+                  :key="item.id"
+                >
+                  <drag-item
+                    :key="item.id"
+                    :is-sort-widget="isSortWidget"
+                    :item="item"
+                    :index="index"
+                    :sort="element.options.attrs.sort"
+                    :all-fields="index ? [] : tableFields"
+                    @closeItem="closeItem"
+                    @sort-change="sortChange"
+                  />
                 </v-flex>
 
                 <span solt="footer">{{ $t('panel.drag_here') }}</span>
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index 49e3f0bc5a..cc0a1ec8cf 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -1,6 +1,14 @@
 <template>
-  <div class="filter-container" @dragstart="handleDragStart" @dragend="handleDragEnd()">
-    <div v-for="(item, key) in widgetSubjects" :key="key" class="widget-subject">
+  <div
+    class="filter-container"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd()"
+  >
+    <div
+      v-for="(item, key) in widgetSubjects"
+      :key="key"
+      class="widget-subject"
+    >
       <div class="filter-header">
         <div class="filter-header-text"> {{ key }} </div>
       </div>
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index 61213ff6c1..134e3453e3 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -1,7 +1,13 @@
 <template>
-  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
+  <de-container
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    style="background-color: #f7f8fa"
+  >
     <de-main-container :class="{'full-height':fullHeightFlag}">
-      <panel-main v-show="componentName==='PanelMain'" ref="panel_main" />
+      <panel-main
+        v-show="componentName==='PanelMain'"
+        ref="panel_main"
+      />
       <panel-edit v-if="componentName==='PanelEdit'" />
     </de-main-container>
   </de-container>
@@ -17,6 +23,17 @@ import PanelEdit from '@/views/panel/edit'
 export default {
   name: 'Panel',
   components: { DeMainContainer, DeContainer, PanelMain, PanelEdit },
+  beforeRouteLeave(to, from, next) {
+    if (this.componentName === 'PanelEdit') {
+      next(false)
+      if (confirm(this.$t('panel.edit_leave_tips'))) {
+        bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
+        next()
+      }
+    } else {
+      next()
+    }
+  },
   data() {
     return {
       component: PanelMain,
@@ -30,17 +47,6 @@ export default {
       return this.$route.path.indexOf('panel') > -1 && (this.componentName === 'PanelEdit' || this.componentName === 'ChartEdit')
     }
   },
-  beforeRouteLeave(to, from, next) {
-    if (this.componentName === 'PanelEdit') {
-      next(false)
-      if (confirm(this.$t('panel.edit_leave_tips'))) {
-        bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
-        next()
-      }
-    } else {
-      next()
-    }
-  },
   watch: {
   },
   mounted() {
diff --git a/frontend/src/views/panel/list/EditPanel/TemplateAllList.vue b/frontend/src/views/panel/list/EditPanel/TemplateAllList.vue
index c23d9a35bf..deee3ee4ce 100644
--- a/frontend/src/views/panel/list/EditPanel/TemplateAllList.vue
+++ b/frontend/src/views/panel/list/EditPanel/TemplateAllList.vue
@@ -21,15 +21,24 @@
           :highlight-current="true"
           @node-click="nodeClick"
         >
-          <span slot-scope="{ node, data }" class="custom-tree-node">
+          <span
+            slot-scope="{ data }"
+            class="custom-tree-node"
+          >
             <span style="display: flex; flex: 1 1 0%; width: 0px;">
               <span v-if="data.nodeType==='template'">
-                <svg-icon icon-class="panel" class="ds-icon-scene" />
+                <svg-icon
+                  icon-class="panel"
+                  class="ds-icon-scene"
+                />
               </span>
               <span v-if="data.nodeType==='folder'">
                 <i class="el-icon-folder" />
               </span>
-              <span :title="data.name" style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+              <span
+                :title="data.name"
+                style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+              >{{ data.name }}</span>
             </span>
           </span>
         </el-tree>
diff --git a/frontend/src/views/panel/list/EditPanel/index.vue b/frontend/src/views/panel/list/EditPanel/index.vue
index 63955172b7..a6daca3789 100644
--- a/frontend/src/views/panel/list/EditPanel/index.vue
+++ b/frontend/src/views/panel/list/EditPanel/index.vue
@@ -1,32 +1,89 @@
 <template>
   <el-row v-loading="loading">
     <el-row v-if="editPanel.optType==='new' && editPanel.panelInfo.nodeType==='panel'">
-      <el-col :span="18" style="height: 40px">
-        <el-radio v-model="inputType" label="new"> {{ $t('panel.custom') }}</el-radio>
-        <el-radio v-model="inputType" label="new_outer_template">{{ $t('panel.import_template') }}  </el-radio>
-        <el-radio v-model="inputType" label="new_inner_template" @click.native="getTree">{{ $t('panel.copy_template') }}  </el-radio>
+      <el-col
+        :span="18"
+        style="height: 40px"
+      >
+        <el-radio
+          v-model="inputType"
+          label="new"
+        > {{ $t('panel.custom') }}</el-radio>
+        <el-radio
+          v-model="inputType"
+          label="new_outer_template"
+        >{{ $t('panel.import_template') }}  </el-radio>
+        <el-radio
+          v-model="inputType"
+          label="new_inner_template"
+          @click.native="getTree"
+        >{{ $t('panel.copy_template') }}  </el-radio>
       </el-col>
-      <el-col v-if="inputType==='new_outer_template'" :span="6">
-        <el-button class="el-icon-upload" size="small" type="primary" @click="goFile">{{ $t('panel.upload_template') }}</el-button>
-        <input id="input" ref="files" type="file" accept=".DET" hidden @change="handleFileChange">
+      <el-col
+        v-if="inputType==='new_outer_template'"
+        :span="6"
+      >
+        <el-button
+          class="el-icon-upload"
+          size="small"
+          type="primary"
+          @click="goFile"
+        >{{ $t('panel.upload_template') }}</el-button>
+        <input
+          id="input"
+          ref="files"
+          type="file"
+          accept=".DET"
+          hidden
+          @change="handleFileChange"
+        >
       </el-col>
     </el-row>
     <el-row style="margin-top: 5px">
       <el-col :span="4">{{ editPanel.titleSuf }}{{ $t('commons.name') }}</el-col>
       <el-col :span="20">
-        <el-input v-model="editPanel.panelInfo.name" clearable size="mini" />
+        <el-input
+          v-model="editPanel.panelInfo.name"
+          clearable
+          size="mini"
+        />
       </el-col>
     </el-row>
-    <el-row v-if="inputType==='new_inner_template'" class="preview">
-      <el-col :span="8" style="height:100%;overflow-y: auto">
-        <template-all-list :template-list="templateList" @showCurrentTemplateInfo="showCurrentTemplateInfo" />
+    <el-row
+      v-if="inputType==='new_inner_template'"
+      class="preview"
+    >
+      <el-col
+        :span="8"
+        style="height:100%;overflow-y: auto"
+      >
+        <template-all-list
+          :template-list="templateList"
+          @showCurrentTemplateInfo="showCurrentTemplateInfo"
+        />
       </el-col>
-      <el-col :span="16" :style="classBackground" class="preview-show" />
+      <el-col
+        :span="16"
+        :style="classBackground"
+        class="preview-show"
+      />
     </el-row>
-    <el-row v-if="inputType==='new_outer_template'" class="preview" :style="classBackground" />
+    <el-row
+      v-if="inputType==='new_outer_template'"
+      class="preview"
+      :style="classBackground"
+    />
     <el-row class="root-class">
-      <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
-      <el-button type="primary" size="mini" :disabled="!saveStatus" @click="save()">{{ $t('commons.confirm') }}</el-button>
+      <el-button
+        size="mini"
+        @click="cancel()"
+      >{{ $t('commons.cancel') }}</el-button>
+      <el-button
+        type="primary"
+        size="mini"
+        :disabled="!saveStatus"
+        @click="save()"
+      >{{ $t('commons.confirm') }}</el-button>
     </el-row>
   </el-row>
 </template>
@@ -35,7 +92,7 @@
 import { panelSave, panelUpdate } from '@/api/panel/panel'
 import { showTemplateList } from '@/api/system/template'
 import TemplateAllList from './TemplateAllList'
-import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
+import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   components: { TemplateAllList },
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 591cecf320..2bbe586aec 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -14,7 +14,10 @@
         </el-col>
         <el-col :span="8">
           <el-dropdown>
-            <el-button size="mini" type="primary">
+            <el-button
+              size="mini"
+              type="primary"
+            >
               {{ searchMap[searchType] }}<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
             <el-dropdown-menu slot="dropdown">
@@ -36,16 +39,39 @@
             :filter-node-method="filterNode"
             @node-click="nodeClick"
           >
-            <span slot-scope="{ node, data }" class="custom-tree-node father">
+            <span
+              slot-scope="{ node, data }"
+              class="custom-tree-node father"
+            >
               <span style="display: flex; flex: 1 1 0%; width: 0px;">
                 <span>
-                  <svg-icon v-if="!data.mobileLayout" :icon-class="'panel-'+data.status" class="ds-icon-scene" />
-                  <svg-icon v-if="data.mobileLayout" :icon-class="'panel-mobile-'+data.status" class="ds-icon-scene" />
+                  <svg-icon
+                    v-if="!data.mobileLayout"
+                    :icon-class="'panel-'+data.status"
+                    class="ds-icon-scene"
+                  />
+                  <svg-icon
+                    v-if="data.mobileLayout"
+                    :icon-class="'panel-mobile-'+data.status"
+                    class="ds-icon-scene"
+                  />
                 </span>
-                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+                <span
+                  style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                  :title="data.name"
+                >{{ data.name }}</span>
               </span>
-              <span style="margin-left: 12px;" class="child" @click.stop>
-                <el-dropdown v-if="hasDataPermission('manage',data.privileges)" trigger="click" size="small" @command="clickMore">
+              <span
+                style="margin-left: 12px;"
+                class="child"
+                @click.stop
+              >
+                <el-dropdown
+                  v-if="hasDataPermission('manage',data.privileges)"
+                  trigger="click"
+                  size="small"
+                  @command="clickMore"
+                >
                   <span class="el-dropdown-link">
                     <el-button
                       icon="el-icon-more"
@@ -54,10 +80,16 @@
                     />
                   </span>
                   <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
+                    <el-dropdown-item
+                      icon="el-icon-edit-outline"
+                      :command="beforeClickMore('rename',data,node)"
+                    >
                       {{ $t('panel.rename') }}
                     </el-dropdown-item>
-                    <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
+                    <el-dropdown-item
+                      icon="el-icon-delete"
+                      :command="beforeClickMore('delete',data,node)"
+                    >
                       {{ $t('panel.delete') }}
                     </el-dropdown-item>
                   </el-dropdown-menu>
@@ -71,7 +103,12 @@
       <el-row>
         <span class="header-title">
           {{ $t('panel.panel_list') }}
-          <el-button style="float: right;padding-right: 7px;margin-top: -8px" icon="el-icon-plus" type="text" @click="showEditPanel(newFolder)" />
+          <el-button
+            style="float: right;padding-right: 7px;margin-top: -8px"
+            icon="el-icon-plus"
+            type="text"
+            @click="showEditPanel(newFolder)"
+          />
         </span>
       </el-row>
       <el-col class="custom-tree-container">
@@ -88,20 +125,45 @@
             @node-collapse="nodeCollapse"
             @node-click="nodeClick"
           >
-            <span slot-scope="{ node, data }" class="custom-tree-node-list father">
+            <span
+              slot-scope="{ node, data }"
+              class="custom-tree-node-list father"
+            >
               <span style="display: flex; flex: 1 1 0%; width: 0px;">
                 <span v-if="data.nodeType === 'panel'">
-                  <svg-icon v-if="!data.mobileLayout" :icon-class="'panel-'+data.status" class="ds-icon-scene" />
-                  <svg-icon v-if="data.mobileLayout" :icon-class="'panel-mobile-'+data.status" class="ds-icon-scene" />
+                  <svg-icon
+                    v-if="!data.mobileLayout"
+                    :icon-class="'panel-'+data.status"
+                    class="ds-icon-scene"
+                  />
+                  <svg-icon
+                    v-if="data.mobileLayout"
+                    :icon-class="'panel-mobile-'+data.status"
+                    class="ds-icon-scene"
+                  />
                 </span>
                 <span v-if="data.nodeType === 'folder'">
                   <i class="el-icon-folder" />
                 </span>
-                <span :class="data.status" style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+                <span
+                  :class="data.status"
+                  style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                  :title="data.name"
+                >{{ data.name }}</span>
               </span>
-              <span v-if="hasDataPermission('manage',data.privileges)" class="child">
-                <span v-if="data.nodeType ==='folder'" @click.stop>
-                  <el-dropdown trigger="click" size="small" @command="showEditPanel">
+              <span
+                v-if="hasDataPermission('manage',data.privileges)"
+                class="child"
+              >
+                <span
+                  v-if="data.nodeType ==='folder'"
+                  @click.stop
+                >
+                  <el-dropdown
+                    trigger="click"
+                    size="small"
+                    @command="showEditPanel"
+                  >
                     <span class="el-dropdown-link">
                       <el-button
                         icon="el-icon-plus"
@@ -115,13 +177,19 @@
                         <span>{{ $t('panel.groupAdd') }}</span>
                       </el-dropdown-item>
                       <el-dropdown-item :command="beforeClickEdit('panel','new',data,node)">
-                        <svg-icon icon-class="panel" class="ds-icon-scene" />
+                        <svg-icon
+                          icon-class="panel"
+                          class="ds-icon-scene"
+                        />
                         <span>{{ $t('panel.panelAdd') }}</span>
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
                 </span>
-                <span v-if="data.nodeType==='panel'" @click.stop>
+                <span
+                  v-if="data.nodeType==='panel'"
+                  @click.stop
+                >
                   <el-button
                     icon="el-icon-edit"
                     type="text"
@@ -129,8 +197,15 @@
                     @click="edit(data, node)"
                   />
                 </span>
-                <span style="margin-left: 12px;" @click.stop>
-                  <el-dropdown trigger="click" size="small" @command="clickMore">
+                <span
+                  style="margin-left: 12px;"
+                  @click.stop
+                >
+                  <el-dropdown
+                    trigger="click"
+                    size="small"
+                    @command="clickMore"
+                  >
                     <span class="el-dropdown-link">
                       <el-button
                         icon="el-icon-more"
@@ -139,28 +214,58 @@
                       />
                     </span>
                     <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-edit" :command="beforeClickMore('edit',data,node)">
+                      <el-dropdown-item
+                        v-if="data.nodeType==='panel'"
+                        icon="el-icon-edit"
+                        :command="beforeClickMore('edit',data,node)"
+                      >
                         {{ $t('panel.edit') }}
                       </el-dropdown-item>
-                      <el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-share" :command="beforeClickMore('share',data,node)">
+                      <el-dropdown-item
+                        v-if="data.nodeType==='panel'"
+                        icon="el-icon-share"
+                        :command="beforeClickMore('share',data,node)"
+                      >
                         {{ $t('panel.share') }}
                       </el-dropdown-item>
-                      <el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-document-copy" :command="beforeClickMore('copy',data,node)">
+                      <el-dropdown-item
+                        v-if="data.nodeType==='panel'"
+                        icon="el-icon-document-copy"
+                        :command="beforeClickMore('copy',data,node)"
+                      >
                         {{ $t('panel.copy') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('move',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-right"
+                        :command="beforeClickMore('move',data,node)"
+                      >
                         {{ $t('dataset.move_to') }}
                       </el-dropdown-item>
-                      <el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-paperclip" :command="beforeClickMore('link',data,node)">
+                      <el-dropdown-item
+                        v-if="data.nodeType==='panel'"
+                        icon="el-icon-paperclip"
+                        :command="beforeClickMore('link',data,node)"
+                      >
                         {{ $t('panel.create_public_links') }}
                       </el-dropdown-item>
-                      <el-dropdown-item v-if="data.nodeType==='panel'" :disabled="data.isDefault" icon="el-icon-copy-document" :command="beforeClickMore('toDefaultPanel',data,node)">
+                      <el-dropdown-item
+                        v-if="data.nodeType==='panel'"
+                        :disabled="data.isDefault"
+                        icon="el-icon-copy-document"
+                        :command="beforeClickMore('toDefaultPanel',data,node)"
+                      >
                         {{ $t('panel.to_default_panel') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-edit-outline"
+                        :command="beforeClickMore('rename',data,node)"
+                      >
                         {{ $t('panel.rename') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
+                      <el-dropdown-item
+                        icon="el-icon-delete"
+                        :command="beforeClickMore('delete',data,node)"
+                      >
                         {{ $t('panel.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
@@ -172,15 +277,39 @@
         </div>
       </el-col>
 
-      <el-dialog v-dialogDrag :title="dialogTitle" :visible="editGroup" :show-close="false" width="500px">
-        <el-form ref="groupForm" :model="groupForm" :rules="groupFormRules" @keypress.enter.native="saveGroup(groupForm)">
-          <el-form-item :label="$t('commons.name')" prop="name">
+      <el-dialog
+        v-dialogDrag
+        :title="dialogTitle"
+        :visible="editGroup"
+        :show-close="false"
+        width="500px"
+      >
+        <el-form
+          ref="groupForm"
+          :model="groupForm"
+          :rules="groupFormRules"
+          @keypress.enter.native="saveGroup(groupForm)"
+        >
+          <el-form-item
+            :label="$t('commons.name')"
+            prop="name"
+          >
             <el-input v-model="groupForm.name" />
           </el-form-item>
         </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="close()">{{ $t('panel.cancel') }}</el-button>
-          <el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('panel.confirm') }}
+        <div
+          slot="footer"
+          class="dialog-footer"
+        >
+          <el-button
+            size="mini"
+            @click="close()"
+          >{{ $t('panel.cancel') }}</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="saveGroup(groupForm)"
+          >{{ $t('panel.confirm') }}
           </el-button>
         </div>
       </el-dialog>
@@ -192,7 +321,11 @@
         width="800px"
         class="dialog-css"
       >
-        <grant-auth v-if="authVisible" :resource-id="authResourceId" @close-grant="closeGrant" />
+        <grant-auth
+          v-if="authVisible"
+          :resource-id="authResourceId"
+          @close-grant="closeGrant"
+        />
       </el-dialog>
 
       <el-dialog
@@ -202,19 +335,56 @@
         width="500px"
         @closed="removeLink"
       >
-        <link-generate v-if="linkVisible" :resource-id="linkResourceId" />
+        <link-generate
+          v-if="linkVisible"
+          :resource-id="linkResourceId"
+        />
       </el-dialog>
       <!--新建仪表板dialog-->
-      <el-dialog v-dialogDrag :title="panelDialogTitle" :visible.sync="editPanel.visible" :show-close="true" width="600px">
-        <edit-panel v-if="editPanel.visible" :edit-panel-out="editPanel" @closeEditPanelDialog="closeEditPanelDialog" @newPanelSave="newPanelSave" />
+      <el-dialog
+        v-dialogDrag
+        :title="panelDialogTitle"
+        :visible.sync="editPanel.visible"
+        :show-close="true"
+        width="600px"
+      >
+        <edit-panel
+          v-if="editPanel.visible"
+          :edit-panel-out="editPanel"
+          @closeEditPanelDialog="closeEditPanelDialog"
+          @newPanelSave="newPanelSave"
+        />
       </el-dialog>
 
       <!--移动-->
-      <el-dialog v-if="moveGroup" v-dialogDrag :title="moveDialogTitle" :visible="moveGroup" :show-close="false" width="30%" class="dialog-css">
-        <tree-selector :item="moveInfo" :t-data="tGroupData" @targetGroup="targetGroup" />
-        <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="closeMoveGroup()">{{ $t('dataset.cancel') }}</el-button>
-          <el-button :disabled="groupMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveGroup(tGroup)">{{ $t('dataset.confirm') }}
+      <el-dialog
+        v-if="moveGroup"
+        v-dialogDrag
+        :title="moveDialogTitle"
+        :visible="moveGroup"
+        :show-close="false"
+        width="30%"
+        class="dialog-css"
+      >
+        <tree-selector
+          :item="moveInfo"
+          :t-data="tGroupData"
+          @targetGroup="targetGroup"
+        />
+        <div
+          slot="footer"
+          class="dialog-footer"
+        >
+          <el-button
+            size="mini"
+            @click="closeMoveGroup()"
+          >{{ $t('dataset.cancel') }}</el-button>
+          <el-button
+            :disabled="groupMoveConfirmDisabled"
+            type="primary"
+            size="mini"
+            @click="saveMoveGroup(tGroup)"
+          >{{ $t('dataset.confirm') }}
           </el-button>
         </div>
       </el-dialog>
@@ -241,7 +411,7 @@ export default {
   components: { GrantAuth, LinkGenerate, EditPanel, TreeSelector },
   data() {
     return {
-      responseSource:'panelQuery',
+      responseSource: 'panelQuery',
       clearLocalStorage: [
         'chart-tree',
         'dataset-tree'
@@ -383,11 +553,11 @@ export default {
     this.defaultTree(true)
     this.initCache()
     const routerParam = this.$router.currentRoute.params
-    if(routerParam && 'appApply'===routerParam.responseSource ){
+    if (routerParam && routerParam.responseSource === 'appApply') {
       this.responseSource = routerParam.responseSource
       this.lastActiveNode = routerParam
       this.tree()
-    }else if (routerParam && routerParam.nodeType === 'panel' && this.historyRequestId !== routerParam.requestId) {
+    } else if (routerParam && routerParam.nodeType === 'panel' && this.historyRequestId !== routerParam.requestId) {
       this.historyRequestId = routerParam.requestId
       this.tree()
       this.edit(routerParam, null)
@@ -396,12 +566,12 @@ export default {
     }
   },
   methods: {
-    fromAppActive(){
+    fromAppActive() {
       this.activeNodeAndClickOnly(this.lastActiveNode)
       this.clearLocalStorage.forEach(item => {
         localStorage.removeItem(item)
       })
-      this.responseSource='panelQuery'
+      this.responseSource = 'panelQuery'
     },
     newPanelFromMarket(panelInfo) {
       if (panelInfo) {
@@ -653,7 +823,7 @@ export default {
         if (!userCache) {
           this.tData = res.data
         }
-        if(this.responseSource==='appApply'){
+        if (this.responseSource === 'appApply') {
           this.fromAppActive()
         }
         if (this.filterText) {
diff --git a/frontend/src/views/panel/list/PanelMain.vue b/frontend/src/views/panel/list/PanelMain.vue
index 6db3d60ba8..315bbd02d0 100644
--- a/frontend/src/views/panel/list/PanelMain.vue
+++ b/frontend/src/views/panel/list/PanelMain.vue
@@ -1,23 +1,46 @@
 <template>
   <de-container>
     <de-aside-container type="panel">
-      <el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
+      <el-tabs
+        v-model="activeName"
+        class="tab-panel"
+        :stretch="true"
+        @tab-click="handleClick"
+      >
         <el-tab-pane name="PanelList">
           <span slot="label"><i class="el-icon-document tablepanel-i" />{{ $t('panel.panel_list') }}</span>
-          <panel-list v-show="activeName==='PanelList'" ref="panelList" />
+          <panel-list
+            v-show="activeName==='PanelList'"
+            ref="panelList"
+          />
         </el-tab-pane>
-        <el-tab-pane name="panels_star" :lazy="true">
+        <el-tab-pane
+          name="panels_star"
+          :lazy="true"
+        >
           <span slot="label"><i class="el-icon-star-off tablepanel-i" />{{ $t('panel.store') }}</span>
           <enshrine v-if="activeName==='panels_star'" />
         </el-tab-pane>
-        <el-tab-pane name="panels_share" :lazy="true">
+        <el-tab-pane
+          name="panels_share"
+          :lazy="true"
+        >
           <span slot="label"><i class="el-icon-share tablepanel-i" />{{ $t('panel.share') }}</span>
-          <share-tree v-if="showShare" ref="share_tree" :msg-panel-ids="msgPanelIds" />
+          <share-tree
+            v-if="showShare"
+            ref="share_tree"
+            :msg-panel-ids="msgPanelIds"
+          />
         </el-tab-pane>
       </el-tabs>
     </de-aside-container>
     <de-main-container>
-      <PanelViewShow v-if="mainActiveName==='PanelMain'" :active-tab="activeName" @editPanel="editPanel" @editPanelBashInfo="editPanelBashInfo" />
+      <PanelViewShow
+        v-if="mainActiveName==='PanelMain'"
+        :active-tab="activeName"
+        @editPanel="editPanel"
+        @editPanelBashInfo="editPanelBashInfo"
+      />
     </de-main-container>
   </de-container>
 </template>
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 1c539017d7..4aa8a8d006 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -6,20 +6,40 @@
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(220,220,220,1)"
   >
-    <el-col v-if="panelInfo.name.length>0" class="panel-design">
+    <el-col
+      v-if="panelInfo.name.length>0"
+      class="panel-design"
+    >
 
-      <el-row v-if="showType === 2" class="panel-design-head panel-share-head" style="border-bottom: 1px solid;border-bottom-color:#E6E6E6;">
+      <el-row
+        v-if="showType === 2"
+        class="panel-design-head panel-share-head"
+        style="border-bottom: 1px solid;border-bottom-color:#E6E6E6;"
+      >
         <div style="height: 100%;">
           <share-head />
         </div>
       </el-row>
-      <el-row v-else class="panel-design-head" style="border-bottom: 1px solid;border-bottom-color:#E6E6E6;">
+      <el-row
+        v-else
+        class="panel-design-head"
+        style="border-bottom: 1px solid;border-bottom-color:#E6E6E6;"
+      >
         <!--仪表板头部区域-->
         <div style="height: 100%;">
-          <el-col :span="12" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
+          <el-col
+            :span="12"
+            style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px"
+          >
             <span>{{ panelInfo.name || '测试仪表板' }}</span>
-            <span v-if="panelInfo.isDefault" style="color: green;font-size: 12px">({{ $t('panel.default_panel_name') }}:{{ panelInfo.defaultPanelName }})</span>
-            <span v-if="panelInfo.sourcePanelName" style="color: green;font-size: 12px">&nbsp;({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span>
+            <span
+              v-if="panelInfo.isDefault"
+              style="color: green;font-size: 12px"
+            >({{ $t('panel.default_panel_name') }}:{{ panelInfo.defaultPanelName }})</span>
+            <span
+              v-if="panelInfo.sourcePanelName"
+              style="color: green;font-size: 12px"
+            >&nbsp;({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span>
             <el-popover
               placement="right-start"
               width="400"
@@ -35,61 +55,136 @@
           </el-col>
           <el-col :span="12">
 
-            <span v-if="hasDataPermission('manage',panelInfo.privileges)&&activeTab==='PanelList'&&!panelInfo.sourcePanelName" style="float: right;margin-right: 10px">
-              <el-button size="mini" type="primary" @click="editPanel">
+            <span
+              v-if="hasDataPermission('manage',panelInfo.privileges)&&activeTab==='PanelList'&&!panelInfo.sourcePanelName"
+              style="float: right;margin-right: 10px"
+            >
+              <el-button
+                size="mini"
+                type="primary"
+                @click="editPanel"
+              >
                 {{ $t('commons.edit') }}
               </el-button>
             </span>
 
-            <span v-if="hasDataPermission('manage',panelInfo.privileges)&&activeTab==='PanelList'&&!panelInfo.sourcePanelName" style="float: right;margin-right: 10px">
-              <el-button size="mini" type="primary" @click="changePublishState">
+            <span
+              v-if="hasDataPermission('manage',panelInfo.privileges)&&activeTab==='PanelList'&&!panelInfo.sourcePanelName"
+              style="float: right;margin-right: 10px"
+            >
+              <el-button
+                size="mini"
+                type="primary"
+                @click="changePublishState"
+              >
                 <span v-if="panelInfo.status==='publish'">{{ $t('commons.unpublished') }}</span>
                 <span v-if="panelInfo.status!=='publish'">{{ $t('commons.publish') }}</span>
               </el-button>
             </span>
 
-            <span v-if="hasDataPermission('export',panelInfo.privileges)&&panelInfo.status==='publish'" style="float: right;margin-right: 10px">
+            <span
+              v-if="hasDataPermission('export',panelInfo.privileges)&&panelInfo.status==='publish'"
+              style="float: right;margin-right: 10px"
+            >
               <el-tooltip :content="$t('panel.save_to_panel')">
-                <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />
+                <el-button
+                  class="el-icon-folder-checked"
+                  size="mini"
+                  circle
+                  @click="saveToTemplate"
+                />
               </el-tooltip>
             </span>
-            <span v-if="hasDataPermission('export',panelInfo.privileges)&&panelInfo.status==='publish'" style="float: right;margin-right: 10px">
+            <span
+              v-if="hasDataPermission('export',panelInfo.privileges)&&panelInfo.status==='publish'"
+              style="float: right;margin-right: 10px"
+            >
               <el-dropdown>
-                <el-button size="mini" class="el-icon-download" circle />
+                <el-button
+                  size="mini"
+                  class="el-icon-download"
+                  circle
+                />
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item icon="el-icon-copy-document" @click.native="downloadToTemplate">{{ $t('panel.export_to_panel') }}</el-dropdown-item>
-                  <el-dropdown-item icon="el-icon-notebook-2" @click.native="downloadAsPDF">{{ $t('panel.export_to_pdf') }}</el-dropdown-item>
-                  <el-dropdown-item icon="el-icon-picture-outline" @click.native="downloadAsImage">{{ $t('panel.export_to_img') }}</el-dropdown-item>
+                  <el-dropdown-item
+                    icon="el-icon-copy-document"
+                    @click.native="downloadToTemplate"
+                  >{{ $t('panel.export_to_panel') }}</el-dropdown-item>
+                  <el-dropdown-item
+                    icon="el-icon-notebook-2"
+                    @click.native="downloadAsPDF"
+                  >{{ $t('panel.export_to_pdf') }}</el-dropdown-item>
+                  <el-dropdown-item
+                    icon="el-icon-picture-outline"
+                    @click.native="downloadAsImage"
+                  >{{ $t('panel.export_to_img') }}</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </span>
-            <span v-if="panelInfo.status==='publish'" style="float: right;margin-right: 10px">
+            <span
+              v-if="panelInfo.status==='publish'"
+              style="float: right;margin-right: 10px"
+            >
               <el-tooltip :content="$t('panel.fullscreen_preview')">
-                <el-button class="el-icon-view" size="mini" circle @click="clickFullscreen" />
+                <el-button
+                  class="el-icon-view"
+                  size="mini"
+                  circle
+                  @click="clickFullscreen"
+                />
               </el-tooltip>
             </span>
 
-            <span v-if="panelInfo.status==='publish'" style="float: right;margin-right: 10px">
+            <span
+              v-if="panelInfo.status==='publish'"
+              style="float: right;margin-right: 10px"
+            >
               <el-tooltip :content="$t('panel.new_tab_preview')">
-                <el-button class="el-icon-data-analysis" size="mini" circle @click="newTab" />
+                <el-button
+                  class="el-icon-data-analysis"
+                  size="mini"
+                  circle
+                  @click="newTab"
+                />
               </el-tooltip>
             </span>
 
-            <span v-if="!hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'" style="float: right;margin-right: 10px">
+            <span
+              v-if="!hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
+              style="float: right;margin-right: 10px"
+            >
               <el-tooltip :content="$t('panel.store')">
-                <el-button class="el-icon-star-off" size="mini" circle @click="star" />
+                <el-button
+                  class="el-icon-star-off"
+                  size="mini"
+                  circle
+                  @click="star"
+                />
               </el-tooltip>
             </span>
 
-            <span v-if="hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'" style="float: right;margin-right: 10px">
+            <span
+              v-if="hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
+              style="float: right;margin-right: 10px"
+            >
               <el-tooltip :content="$t('commons.cancel')">
-                <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
+                <el-button
+                  class="el-icon-star-on"
+                  size="mini"
+                  circle
+                  @click="unstar"
+                />
               </el-tooltip>
             </span>
 
             <span style="float: right;margin-right: 10px">
               <el-tooltip :content="$t('commons.refresh')">
-                <el-button class="el-icon-refresh" size="mini" circle @click="refreshPanel" />
+                <el-button
+                  class="el-icon-refresh"
+                  size="mini"
+                  circle
+                  @click="refreshPanel"
+                />
               </el-tooltip>
             </span>
 
@@ -99,8 +194,15 @@
       <!-- 仪表板预览区域-->
       <el-row class="panel-design-preview">
         <!--        <div id="imageWrapper" ref="imageWrapper" style="width: 4096px;height: 2160px">-->
-        <div id="imageWrapper" ref="imageWrapper" :style="imageWrapperStyle">
-          <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen">
+        <div
+          id="imageWrapper"
+          ref="imageWrapper"
+          :style="imageWrapperStyle"
+        >
+          <fullscreen
+            style="height: 100%;background: #f7f8fa;overflow-y: auto"
+            :fullscreen.sync="fullscreen"
+          >
             <Preview
               v-if="showMainFlag"
               :component-data="componentData"
@@ -115,8 +217,14 @@
         </div>
       </el-row>
     </el-col>
-    <el-col v-if="panelInfo.name.length===0" style="height: 100%;">
-      <el-row style="height: 100%; background-color: var(--ContentBG);" class="custom-position">
+    <el-col
+      v-if="panelInfo.name.length===0"
+      style="height: 100%;"
+    >
+      <el-row
+        style="height: 100%; background-color: var(--ContentBG);"
+        class="custom-position"
+      >
         {{ $t('panel.select_panel_from_left') }}
       </el-row>
     </el-col>
@@ -127,7 +235,10 @@
       :visible.sync="templateSaveShow"
       width="500px"
     >
-      <save-to-template :template-info="templateInfo" @closeSaveDialog="closeSaveDialog" />
+      <save-to-template
+        :template-info="templateInfo"
+        @closeSaveDialog="closeSaveDialog"
+      />
     </el-dialog>
     <el-dialog
       v-if="pdfExportShow"
@@ -139,8 +250,15 @@
       class="dialog-css2"
     >
       <span style="position: absolute;right: 70px;top:15px">
-        <svg-icon icon-class="PDF" class="ds-icon-pdf" />
-        <el-select v-model="pdfTemplateSelectedIndex" :placeholder="'切换PDF模板'" @change="changePdfTemplate()">
+        <svg-icon
+          icon-class="PDF"
+          class="ds-icon-pdf"
+        />
+        <el-select
+          v-model="pdfTemplateSelectedIndex"
+          :placeholder="'切换PDF模板'"
+          @change="changePdfTemplate()"
+        >
           <el-option
             v-for="(item, index) in pdfTemplateAll"
             :key="index"
@@ -149,7 +267,12 @@
           />
         </el-select>
       </span>
-      <PDFPreExport :snapshot="snapshotInfo" :panel-name="panelInfo.name" :template-content="pdfTemplateContent" @closePreExport="closePreExport" />
+      <PDFPreExport
+        :snapshot="snapshotInfo"
+        :panel-name="panelInfo.name"
+        :template-content="pdfTemplateContent"
+        @closePreExport="closePreExport"
+      />
     </el-dialog>
   </el-row>
 </template>
diff --git a/frontend/src/views/panel/list/SaveToTemplate.vue b/frontend/src/views/panel/list/SaveToTemplate.vue
index 38d1269137..e070afcb27 100644
--- a/frontend/src/views/panel/list/SaveToTemplate.vue
+++ b/frontend/src/views/panel/list/SaveToTemplate.vue
@@ -3,7 +3,11 @@
     <el-row style="display: flex;align-items: center;">
       <el-col :span="4"> {{ $t('panel.template_nale') }}</el-col>
       <el-col :span="20">
-        <el-input v-model="templateInfo.name" clearable size="mini" />
+        <el-input
+          v-model="templateInfo.name"
+          clearable
+          size="mini"
+        />
       </el-col>
     </el-row>
     <el-row class="de-tab">
@@ -16,18 +20,32 @@
           highlight-current-row
           @current-change="clickChange"
         >
-          <el-table-column :label="columnLabel" :column-key="fieldName" :prop="fieldName" />
+          <el-table-column
+            :label="columnLabel"
+            :column-key="fieldName"
+            :prop="fieldName"
+          />
           <el-table-column align="right">
             <template slot-scope="scope">
-              <el-radio v-model="tableRadio" :label="scope.row"><i /></el-radio>
+              <el-radio
+                v-model="tableRadio"
+                :label="scope.row"
+              ><i /></el-radio>
             </template>
           </el-table-column>
         </el-table>
       </div>
     </el-row>
     <el-row class="root-class">
-      <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
-      <el-button size="mini" type="primary" @click="save()">{{ $t('commons.save') }}</el-button>
+      <el-button
+        size="mini"
+        @click="cancel()"
+      >{{ $t('commons.cancel') }}</el-button>
+      <el-button
+        size="mini"
+        type="primary"
+        @click="save()"
+      >{{ $t('commons.save') }}</el-button>
     </el-row>
   </el-row>
 </template>
diff --git a/frontend/src/views/panel/list/common/PanelDetailInfo.vue b/frontend/src/views/panel/list/common/PanelDetailInfo.vue
index 437c62a750..97b73fc60e 100644
--- a/frontend/src/views/panel/list/common/PanelDetailInfo.vue
+++ b/frontend/src/views/panel/list/common/PanelDetailInfo.vue
@@ -14,8 +14,14 @@
     </el-col>
     <el-col class="info-item">
       <p class="info-title">{{ $t('panel.update_time') }}</p>
-      <p v-if="panelInfo.updateTime" class="info-content">{{ panelInfo.updateTime | timestampFormatDate }}</p>
-      <p v-if="!panelInfo.updateTime" class="info-content">N/A</p>
+      <p
+        v-if="panelInfo.updateTime"
+        class="info-content"
+      >{{ panelInfo.updateTime | timestampFormatDate }}</p>
+      <p
+        v-if="!panelInfo.updateTime"
+        class="info-content"
+      >N/A</p>
     </el-col>
   </el-row>
 </template>
diff --git a/frontend/src/views/panel/preview/index.vue b/frontend/src/views/panel/preview/index.vue
index e5cb5a7211..385f755f4a 100644
--- a/frontend/src/views/panel/preview/index.vue
+++ b/frontend/src/views/panel/preview/index.vue
@@ -2,7 +2,10 @@
   <el-container>
     <!-- <de-header>Header</de-header> -->
     <span style="line-height: 35px; position: absolute; top:10px;right: 10px">
-      <el-button size="mini" @click="toDir">
+      <el-button
+        size="mini"
+        @click="toDir"
+      >
         {{ $t('commons.close') }}
       </el-button>
     </span>
diff --git a/frontend/src/views/panel/template/component/TemplateImport.vue b/frontend/src/views/panel/template/component/TemplateImport.vue
index 6b438ac004..c5b95467d3 100644
--- a/frontend/src/views/panel/template/component/TemplateImport.vue
+++ b/frontend/src/views/panel/template/component/TemplateImport.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="template-import"
     v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    class="template-import"
   >
     <el-form
       ref="templateImportForm"
@@ -9,33 +9,48 @@
       :model="templateInfo"
       :rules="templateInfoRules"
     >
-      <el-form-item :label="$t('system_parameter_setting.template_name')" prop="name">
+      <el-form-item
+        :label="$t('system_parameter_setting.template_name')"
+        prop="name"
+      >
         <div class="flex-template">
-          <el-input v-model="templateInfo.name" clearable size="small" />
-            <deBtn
-              style="margin-left: 10px"
-              class="el-icon-upload2"
-              secondary
-              @click="goFile"
-              >{{ $t("panel.upload_template") }}</deBtn
-            >
-            <input
-              id="input"
-              ref="files"
-              type="file"
-              accept=".DET"
-              hidden
-              @change="handleFileChange"
-            />
+          <el-input
+            v-model="templateInfo.name"
+            clearable
+            size="small"
+          />
+          <deBtn
+            style="margin-left: 10px"
+            class="el-icon-upload2"
+            secondary
+            @click="goFile"
+          >{{ $t("panel.upload_template") }}</deBtn>
+          <input
+            id="input"
+            ref="files"
+            type="file"
+            accept=".DET"
+            hidden
+            @change="handleFileChange"
+          >
         </div>
       </el-form-item>
     </el-form>
-    <el-row class="preview" :style="classBackground" />
+    <el-row
+      class="preview"
+      :style="classBackground"
+    />
     <el-row class="de-root-class">
-      <deBtn secondary @click="cancel()">{{
+      <deBtn
+        secondary
+        @click="cancel()"
+      >{{
         $t("commons.cancel")
       }}</deBtn>
-      <deBtn type="primary" @click="save()">{{
+      <deBtn
+        type="primary"
+        @click="save()"
+      >{{
         $t("commons.confirm")
       }}</deBtn>
     </el-row>
@@ -43,59 +58,59 @@
 </template>
 
 <script>
-import { save, nameCheck } from "@/api/system/template";
-import msgCfm from "@/components/msgCfm/index";
-import { find } from "@/api/system/template";
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { save, nameCheck } from '@/api/system/template'
+import msgCfm from '@/components/msgCfm/index'
+import { find } from '@/api/system/template'
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   mixins: [msgCfm],
   props: {
     pid: {
       type: String,
-      required: true,
-    },
+      required: true
+    }
   },
   data() {
     return {
       importTemplateInfo: {
-        snapshot: "",
+        snapshot: ''
       },
       templateInfoRules: {
         name: [
           {
             required: true,
-            message: this.$t("commons.input_content"),
-            trigger: "change",
-          },
-        ],
+            message: this.$t('commons.input_content'),
+            trigger: 'change'
+          }
+        ]
       },
       recover: false,
       templateInfo: {
-        level: "1",
+        level: '1',
         pid: this.pid,
-        name: "",
+        name: '',
         templateStyle: null,
         templateData: null,
         dynamicData: null,
         staticResource: null,
-        snapshot: "",
-      },
-    };
+        snapshot: ''
+      }
+    }
   },
   computed: {
     classBackground() {
       if (this.importTemplateInfo.snapshot) {
         return {
-          background: `url(${imgUrlTrans(this.importTemplateInfo.snapshot)}) no-repeat`,
-        };
+          background: `url(${imgUrlTrans(this.importTemplateInfo.snapshot)}) no-repeat`
+        }
       } else {
-        return {};
+        return {}
       }
-    },
+    }
   },
   created() {
-    this.showCurrentTemplate(this.pid);
+    this.showCurrentTemplate(this.pid)
   },
   methods: {
     // selectRecover() {
@@ -113,8 +128,8 @@ export default {
     // },
     showCurrentTemplate(pid) {
       find({ pid }).then((response) => {
-        this.nameList = response.data;
-      });
+        this.nameList = response.data
+      })
     },
     // nameRepeat(value) {
     //   if (!this.nameList || this.nameList.length === 0 || this.recover) {
@@ -123,67 +138,67 @@ export default {
     //   return this.nameList.some((ele) => ele.name === value);
     // },
     cancel() {
-      this.$emit("closeEditTemplateDialog");
+      this.$emit('closeEditTemplateDialog')
     },
     save() {
       if (!this.templateInfo.name) {
-        this.$warning(this.$t("chart.name_can_not_empty"));
-        return false;
+        this.$warning(this.$t('chart.name_can_not_empty'))
+        return false
       }
       if (!this.templateInfo.templateData) {
-        this.$warning(this.$t("chart.template_can_not_empty"));
-        return false;
+        this.$warning(this.$t('chart.template_can_not_empty'))
+        return false
       }
       const nameCheckRequest = {
         pid: this.templateInfo.pid,
         name: this.templateInfo.name,
-        optType: "insert",
-      };
+        optType: 'insert'
+      }
       nameCheck(nameCheckRequest).then((response) => {
-        if (response.data.indexOf("exist") > -1) {
+        if (response.data.indexOf('exist') > -1) {
           const options = {
-          title: 'commons.prompt',
-          content: "system_parameter_setting.to_overwrite_them",
-          type: "primary",
-          cb: () => save(this.templateInfo).then((response) => {
-                this.openMessageSuccess("system_parameter_setting.import_succeeded");
-                this.$emit("refresh");
-                this.$emit("closeEditTemplateDialog");
-              }),
-          confirmButtonText: this.$t('template.override')
-        };
-        this.handlerConfirm(options);
+            title: 'commons.prompt',
+            content: 'system_parameter_setting.to_overwrite_them',
+            type: 'primary',
+            cb: () => save(this.templateInfo).then((response) => {
+              this.openMessageSuccess('system_parameter_setting.import_succeeded')
+              this.$emit('refresh')
+              this.$emit('closeEditTemplateDialog')
+            }),
+            confirmButtonText: this.$t('template.override')
+          }
+          this.handlerConfirm(options)
         } else {
           save(this.templateInfo).then((response) => {
-            this.openMessageSuccess("system_parameter_setting.import_succeeded");
-            this.$emit("refresh");
-            this.$emit("closeEditTemplateDialog");
-          });
+            this.openMessageSuccess('system_parameter_setting.import_succeeded')
+            this.$emit('refresh')
+            this.$emit('closeEditTemplateDialog')
+          })
         }
-      });
+      })
     },
     handleFileChange(e) {
-      const file = e.target.files[0];
-      const reader = new FileReader();
+      const file = e.target.files[0]
+      const reader = new FileReader()
       reader.onload = (res) => {
-        const result = res.target.result;
-        this.importTemplateInfo = JSON.parse(result);
-        this.templateInfo.name = this.importTemplateInfo.name;
-        this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle;
-        this.templateInfo.templateData = this.importTemplateInfo.panelData;
-        this.templateInfo.snapshot = this.importTemplateInfo.snapshot;
-        this.templateInfo.dynamicData = this.importTemplateInfo.dynamicData;
+        const result = res.target.result
+        this.importTemplateInfo = JSON.parse(result)
+        this.templateInfo.name = this.importTemplateInfo.name
+        this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle
+        this.templateInfo.templateData = this.importTemplateInfo.panelData
+        this.templateInfo.snapshot = this.importTemplateInfo.snapshot
+        this.templateInfo.dynamicData = this.importTemplateInfo.dynamicData
         this.templateInfo.staticResource =
-          this.importTemplateInfo.staticResource;
-        this.templateInfo.nodeType = "template";
-      };
-      reader.readAsText(file);
+          this.importTemplateInfo.staticResource
+        this.templateInfo.nodeType = 'template'
+      }
+      reader.readAsText(file)
     },
     goFile() {
-      this.$refs.files.click();
-    },
-  },
-};
+      this.$refs.files.click()
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/panel/template/component/TemplateItem.vue b/frontend/src/views/panel/template/component/TemplateItem.vue
index dd7de4be51..a4455949c3 100644
--- a/frontend/src/views/panel/template/component/TemplateItem.vue
+++ b/frontend/src/views/panel/template/component/TemplateItem.vue
@@ -1,7 +1,16 @@
 <template>
-  <div :style="classBackground" class="de-card-model">
-    <div class="card-img-model" :style="classImg">
-      <img :src="model.snapshot" alt="" />
+  <div
+    :style="classBackground"
+    class="de-card-model"
+  >
+    <div
+      class="card-img-model"
+      :style="classImg"
+    >
+      <img
+        :src="model.snapshot"
+        alt=""
+      >
     </div>
     <div class="card-info">
       <el-tooltip
@@ -12,17 +21,24 @@
       >
         <span class="de-model-text">{{ model.name }}</span>
       </el-tooltip>
-      <el-dropdown size="medium" trigger="click" @command="handleCommand">
-        <i class="el-icon-more"></i>
-        <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
+      <el-dropdown
+        size="medium"
+        trigger="click"
+        @command="handleCommand"
+      >
+        <i class="el-icon-more" />
+        <el-dropdown-menu
+          slot="dropdown"
+          class="de-card-dropdown"
+        >
           <slot>
             <el-dropdown-item command="rename">
-              <i class="el-icon-edit"></i>
-              {{ $t('chart.rename')}}
+              <i class="el-icon-edit" />
+              {{ $t('chart.rename') }}
             </el-dropdown-item>
             <el-dropdown-item command="delete">
-              <i class="el-icon-delete"></i>
-              {{ $t('chart.delete')}}
+              <i class="el-icon-delete" />
+              {{ $t('chart.delete') }}
             </el-dropdown-item>
           </slot>
         </el-dropdown-menu>
@@ -36,7 +52,7 @@ export default {
   props: {
     model: {
       type: Object,
-      default: () => {},
+      default: () => {}
     },
     width: {
       type: Number
@@ -46,24 +62,24 @@ export default {
     classBackground() {
       return {
         width: this.width + 'px',
-        height: this.width * 0.714 + 'px',
+        height: this.width * 0.714 + 'px'
       }
     },
     classImg() {
       return {
         width: this.width + 'px',
-        height: this.width * 0.576 + 'px',
+        height: this.width * 0.576 + 'px'
         // background: `url(${this.model.snapshot}) no-repeat`,
         // 'background-size': `100% 100%`
       }
-    },
+    }
   },
   methods: {
     handleCommand(key) {
-      this.$emit("command", key);
-    },
-  },
-};
+      this.$emit('command', key)
+    }
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/frontend/src/views/panel/template/component/TemplateList.vue b/frontend/src/views/panel/template/component/TemplateList.vue
index 5b82eb0292..c5f3f618ec 100644
--- a/frontend/src/views/panel/template/component/TemplateList.vue
+++ b/frontend/src/views/panel/template/component/TemplateList.vue
@@ -7,44 +7,68 @@
       class="de-input-search"
       clearable
     >
-      <svg-icon slot="prefix" icon-class="de-search"></svg-icon>
+      <svg-icon
+        slot="prefix"
+        icon-class="de-search"
+      />
     </el-input>
     <el-empty
-      :image="noneImg"
       v-if="!templateListComputed.length && templateFilterText === ''"
+      :image="noneImg"
       :description="$t('components.no_classification')"
-    ></el-empty>
+    />
     <el-empty
-      :image="nothingImg"
       v-if="!templateListComputed.length && templateFilterText !== ''"
+      :image="nothingImg"
       :description="$t('components.relevant_content_found')"
-    ></el-empty>
+    />
     <ul>
       <li
-        :class="[{ select: activeTemplate === ele.id }]"
-        @click="nodeClick(ele)"
         v-for="ele in templateListComputed"
         :key="ele.name"
+        :class="[{ select: activeTemplate === ele.id }]"
+        @click="nodeClick(ele)"
       >
-        <svg-icon icon-class="scene" class="de-icon-sence"/>
-        <span class="text-template-overflow" :title="ele.name">{{ ele.name }}</span>
-        <span @click.stop class="more">
+        <svg-icon
+          icon-class="scene"
+          class="de-icon-sence"
+        />
+        <span
+          class="text-template-overflow"
+          :title="ele.name"
+        >{{ ele.name }}</span>
+        <span
+          class="more"
+          @click.stop
+        >
           <el-dropdown
             trigger="click"
             size="small"
             @command="(type) => clickMore(type, ele)"
           >
             <span class="el-dropdown-link">
-              <i class="el-icon-more"></i>
+              <i class="el-icon-more" />
             </span>
-            <el-dropdown-menu class="de-template-dropdown" slot="dropdown">
-              <el-dropdown-item icon="el-icon-upload2" command="import">
+            <el-dropdown-menu
+              slot="dropdown"
+              class="de-template-dropdown"
+            >
+              <el-dropdown-item
+                icon="el-icon-upload2"
+                command="import"
+              >
                 {{ $t("panel.import") }}
               </el-dropdown-item>
-              <el-dropdown-item icon="el-icon-edit" command="edit">
+              <el-dropdown-item
+                icon="el-icon-edit"
+                command="edit"
+              >
                 {{ $t("panel.rename") }}
               </el-dropdown-item>
-              <el-dropdown-item icon="el-icon-delete" command="delete">
+              <el-dropdown-item
+                icon="el-icon-delete"
+                command="delete"
+              >
                 {{ $t("panel.delete") }}
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -65,31 +89,31 @@
 </template>
 
 <script>
-import msgCfm from "@/components/msgCfm/index";
+import msgCfm from '@/components/msgCfm/index'
 
 export default {
-  name: "TemplateList",
-  mixins: [msgCfm],
+  name: 'TemplateList',
   components: {},
+  mixins: [msgCfm],
   props: {
     templateType: {
       type: String,
-      default: "",
+      default: ''
     },
     templateList: {
       type: Array,
-      default: function () {
-        return [];
-      },
-    },
+      default: function() {
+        return []
+      }
+    }
   },
   data() {
     return {
-      templateFilterText: "",
-      activeTemplate: "",
-      noneImg: require("@/assets/None.png"),
-      nothingImg: require("@/assets/nothing.png"),
-    };
+      templateFilterText: '',
+      activeTemplate: '',
+      noneImg: require('@/assets/None.png'),
+      nothingImg: require('@/assets/nothing.png')
+    }
   },
   computed: {
     templateListComputed() {
@@ -100,50 +124,50 @@ export default {
       //     ...this.templateList,
       //     ...this.templateList,
       //   ];
-      if (!this.templateFilterText) return [...this.templateList];
+      if (!this.templateFilterText) return [...this.templateList]
       return this.templateList.filter((ele) =>
         ele.name.includes(this.templateFilterText)
-      );
-    },
+      )
+    }
   },
   methods: {
     clickMore(type, data) {
       switch (type) {
-        case "edit":
-          this.templateEdit(data);
-          break;
-        case "delete":
-          this.templateDelete(data);
-          break;
-        case "import":
-          this.templateImport(data);
-          break;
+        case 'edit':
+          this.templateEdit(data)
+          break
+        case 'delete':
+          this.templateDelete(data)
+          break
+        case 'import':
+          this.templateImport(data)
+          break
       }
     },
     nodeClick({ id, label }) {
-      this.activeTemplate = id;
-      this.$emit("showCurrentTemplate", id, label);
+      this.activeTemplate = id
+      this.$emit('showCurrentTemplate', id, label)
     },
     add() {
-      this.$emit("showTemplateEditDialog", "new");
+      this.$emit('showTemplateEditDialog', 'new')
     },
     templateDelete(template) {
       const options = {
-        title: "system_parameter_setting.delete_this_category",
-        content: "system_parameter_setting.also_be_deleted",
-        type: "primary",
-        cb: () => this.$emit("templateDelete", template.id),
-      };
-      this.handlerConfirm(options);
+        title: 'system_parameter_setting.delete_this_category',
+        content: 'system_parameter_setting.also_be_deleted',
+        type: 'primary',
+        cb: () => this.$emit('templateDelete', template.id)
+      }
+      this.handlerConfirm(options)
     },
     templateEdit(template) {
-      this.$emit("templateEdit", template);
+      this.$emit('templateEdit', template)
     },
     templateImport(template) {
-      this.$emit("templateImport", template.id);
-    },
-  },
-};
+      this.$emit('templateImport', template.id)
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/views/panel/template/index.vue b/frontend/src/views/panel/template/index.vue
index 15c99a174c..1047831fea 100644
--- a/frontend/src/views/panel/template/index.vue
+++ b/frontend/src/views/panel/template/index.vue
@@ -2,22 +2,27 @@
   <de-layout-content>
     <div class="de-template">
       <el-tabs
-        class="de-tabs"
         v-model="currentTemplateType"
+        class="de-tabs"
         @tab-click="handleClick"
       >
         <el-tab-pane name="self">
           <span slot="label">{{ $t("panel.user_template") }}</span>
         </el-tab-pane>
-        <el-tab-pane v-permission="['sys-template:read']" name="system">
-          <span slot="label" v-permission="['sys-template:read']">
-            {{ $t("panel.sys_template") }}</span
+        <el-tab-pane
+          v-permission="['sys-template:read']"
+          name="system"
+        >
+          <span
+            slot="label"
+            v-permission="['sys-template:read']"
           >
+            {{ $t("panel.sys_template") }}</span>
         </el-tab-pane>
       </el-tabs>
       <div
-        class="tabs-container flex-tabs"
         v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+        class="tabs-container flex-tabs"
       >
         <div class="de-tabs-left">
           <template-list
@@ -32,26 +37,29 @@
           />
         </div>
         <div class="de-tabs-right">
-          <div v-if="currentTemplateLabel" class="active-template">
+          <div
+            v-if="currentTemplateLabel"
+            class="active-template"
+          >
             {{ currentTemplateLabel }}&nbsp;&nbsp;({{
               currentTemplateShowList.length
             }})
             <deBtn
               type="primary"
-              @click="templateImport(currentTemplateId)"
               icon="el-icon-upload2"
+              @click="templateImport(currentTemplateId)"
             >
               {{ $t("panel.import") }}
             </deBtn>
           </div>
           <el-empty
-            :image="noneImg"
             v-if="!currentTemplateShowList.length"
+            :image="noneImg"
             :description="$t('components.no_template')"
-          ></el-empty>
+          />
           <div
-            id="template-box"
             v-show="currentTemplateId !== ''"
+            id="template-box"
             class="template-box"
           >
             <template-item
@@ -78,14 +86,25 @@
         :model="templateEditForm"
         :rules="templateEditFormRules"
       >
-        <el-form-item :label="dialogTitleLabel" prop="name">
+        <el-form-item
+          :label="dialogTitleLabel"
+          prop="name"
+        >
           <el-input v-model="templateEditForm.name" />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <deBtn secondary @click="close()">{{ $t("commons.cancel") }}</deBtn>
-        <deBtn type="primary" @click="saveTemplateEdit(templateEditForm)"
-          >{{ $t("commons.confirm") }}
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <deBtn
+          secondary
+          @click="close()"
+        >{{ $t("commons.cancel") }}</deBtn>
+        <deBtn
+          type="primary"
+          @click="saveTemplateEdit(templateEditForm)"
+        >{{ $t("commons.confirm") }}
         </deBtn>
       </div>
     </el-dialog>
@@ -102,7 +121,7 @@
         v-if="templateDialog.visible"
         :pid="templateDialog.pid"
         @refresh="showCurrentTemplate(currentTemplateId,
-        currentTemplateLabel)"
+                                      currentTemplateLabel)"
         @closeEditTemplateDialog="closeEditTemplateDialog"
       />
     </el-dialog>
@@ -110,262 +129,261 @@
 </template>
 
 <script>
-import DeLayoutContent from "@/components/business/DeLayoutContent";
-import TemplateList from "./component/TemplateList";
-import TemplateItem from "./component/TemplateItem";
-import TemplateImport from "./component/TemplateImport";
-import { save, templateDelete, find } from "@/api/system/template";
-import elementResizeDetectorMaker from "element-resize-detector";
+import DeLayoutContent from '@/components/business/DeLayoutContent'
+import TemplateList from './component/TemplateList'
+import TemplateItem from './component/TemplateItem'
+import TemplateImport from './component/TemplateImport'
+import { save, templateDelete, find } from '@/api/system/template'
+import elementResizeDetectorMaker from 'element-resize-detector'
 
-import msgCfm from "@/components/msgCfm/index";
-import { log } from "@antv/g2plot/lib/utils";
+import msgCfm from '@/components/msgCfm/index'
 export default {
-  name: "PanelMain",
-  mixins: [msgCfm],
+  name: 'PanelMain',
   components: { DeLayoutContent, TemplateList, TemplateItem, TemplateImport },
+  mixins: [msgCfm],
   data() {
     return {
       showShare: false,
       currentTemplateShowList: [],
       noneImg: require('@/assets/None.png'),
-      currentPid: "",
-      currentTemplateType: "self",
+      currentPid: '',
+      currentTemplateType: 'self',
       templateEditFormRules: {
         name: [
-          { required: true, trigger: "blur", validator: this.roleValidator },
+          { required: true, trigger: 'blur', validator: this.roleValidator },
           {
             required: true,
-            message: this.$t("commons.input_content"),
-            trigger: "blur",
+            message: this.$t('commons.input_content'),
+            trigger: 'blur'
           },
           {
             max: 50,
-            message: this.$t("commons.char_can_not_more_50"),
-            trigger: "change",
-          },
-        ],
+            message: this.$t('commons.char_can_not_more_50'),
+            trigger: 'change'
+          }
+        ]
       },
       templateEditForm: {},
       editTemplate: false,
-      dialogTitle: "",
-      dialogTitleLabel: "",
-      currentTemplateLabel: "",
-      currentTemplateId: "",
+      dialogTitle: '',
+      dialogTitleLabel: '',
+      currentTemplateLabel: '',
+      currentTemplateId: '',
       templateList: [],
       templateMiniWidth: 286,
       templateCurWidth: 286,
-      formType: "",
-      originName: "",
+      formType: '',
+      originName: '',
       templateDialog: {
-        title: this.$t("panel.import_template"),
+        title: this.$t('panel.import_template'),
         visible: false,
-        pid: "",
-      },
-    };
+        pid: ''
+      }
+    }
   },
   computed: {
     nameList() {
-      const { nodeType } = this.templateEditForm || {};
-      if ("template" === nodeType) {
-        return this.currentTemplateShowList.map((ele) => ele.label);
+      const { nodeType } = this.templateEditForm || {}
+      if (nodeType === 'template') {
+        return this.currentTemplateShowList.map((ele) => ele.label)
       }
 
-      if ("folder" === nodeType) {
-        return this.templateList.map((ele) => ele.label);
+      if (nodeType === 'folder') {
+        return this.templateList.map((ele) => ele.label)
       }
-      return [];
-    },
+      return []
+    }
   },
   mounted() {
-    this.getTree();
-    const _this = this;
-    const erd = elementResizeDetectorMaker();
-    const templateMainDom = document.getElementById("template-box");
+    this.getTree()
+    const _this = this
+    const erd = elementResizeDetectorMaker()
+    const templateMainDom = document.getElementById('template-box')
     // 监听div变动事件
     erd.listenTo(templateMainDom, (element) => {
       _this.$nextTick(() => {
         const curSeparator = Math.trunc(
           templateMainDom.offsetWidth / _this.templateMiniWidth
-        );
+        )
         _this.templateCurWidth =
-          Math.trunc(templateMainDom.offsetWidth / curSeparator) - 24 - curSeparator;
-      });
-    });
+          Math.trunc(templateMainDom.offsetWidth / curSeparator) - 24 - curSeparator
+      })
+    })
   },
   methods: {
     roleValidator(rule, value, callback) {
       if (this.nameRepeat(value)) {
-        const { nodeType } = this.templateEditForm || {};
+        const { nodeType } = this.templateEditForm || {}
         callback(
           new Error(
             this.$t(
               `system_parameter_setting.${
-                "folder" === nodeType
-                  ? "name_already_exists_type"
-                  : "the_same_category"
+                nodeType === 'folder'
+                  ? 'name_already_exists_type'
+                  : 'the_same_category'
               }`
             )
           )
-        );
+        )
       } else {
-        callback();
+        callback()
       }
     },
     nameRepeat(value) {
       if (!this.nameList || this.nameList.length === 0) {
-        return false;
+        return false
       }
       // 编辑场景 不能 因为名称重复而报错
-      if (this.formType === "edit" && this.originName === value) {
-        return false;
+      if (this.formType === 'edit' && this.originName === value) {
+        return false
       }
-      return this.nameList.some((name) => name === value);
+      return this.nameList.some((name) => name === value)
     },
     handleCommand(key, data) {
       switch (key) {
-        case "rename":
-          this.templateEdit(data);
-          break;
-        case "delete":
-          this.templateDeleteConfirm(data);
-          break;
+        case 'rename':
+          this.templateEdit(data)
+          break
+        case 'delete':
+          this.templateDeleteConfirm(data)
+          break
         default:
-          break;
+          break
       }
     },
     templateDeleteConfirm(template) {
       const options = {
-        title: "system_parameter_setting.delete_this_template",
-        type: "primary",
-        cb: () => this.templateDelete(template.id),
-      };
-      this.handlerConfirm(options);
+        title: 'system_parameter_setting.delete_this_template',
+        type: 'primary',
+        cb: () => this.templateDelete(template.id)
+      }
+      this.handlerConfirm(options)
     },
     handleClick(tab, event) {
-      this.getTree();
+      this.getTree()
     },
     showCurrentTemplate(pid, label) {
-      this.currentTemplateId = pid;
-      this.currentTemplateLabel = label;
+      this.currentTemplateId = pid
+      this.currentTemplateLabel = label
       if (this.currentTemplateId) {
         find({ pid: this.currentTemplateId }).then((response) => {
-          this.currentTemplateShowList = response.data;
-        });
+          this.currentTemplateShowList = response.data
+        })
       }
     },
     templateFolderDelete(id) {
       if (id) {
         templateDelete(id).then((response) => {
-          this.openMessageSuccess("commons.delete_success");
+          this.openMessageSuccess('commons.delete_success')
           this.getTree()
-        });
+        })
       }
     },
     templateDelete(id) {
       if (id) {
         templateDelete(id).then((response) => {
-          this.openMessageSuccess("commons.delete_success");
-          this.showCurrentTemplate(this.currentTemplateId, this.currentTemplateLabel);
-        });
+          this.openMessageSuccess('commons.delete_success')
+          this.showCurrentTemplate(this.currentTemplateId, this.currentTemplateLabel)
+        })
       }
     },
     showTemplateEditDialog(type, templateInfo) {
-      this.templateEditForm = null;
-      this.formType = type;
-      if (type === "edit") {
-        this.templateEditForm = JSON.parse(JSON.stringify(templateInfo));
+      this.templateEditForm = null
+      this.formType = type
+      if (type === 'edit') {
+        this.templateEditForm = JSON.parse(JSON.stringify(templateInfo))
         this.dialogTitle = this.$t(
           `system_parameter_setting.${
-            "folder" === this.templateEditForm.nodeType
-              ? "edit_classification"
-              : "edit_template"
+            this.templateEditForm.nodeType === 'folder'
+              ? 'edit_classification'
+              : 'edit_template'
           }`
-        );
-        this.originName = this.templateEditForm.label;
+        )
+        this.originName = this.templateEditForm.label
       } else {
-        this.dialogTitle = this.$t("panel.add_category");
+        this.dialogTitle = this.$t('panel.add_category')
         this.templateEditForm = {
-          name: "",
-          nodeType: "folder",
+          name: '',
+          nodeType: 'folder',
           templateType: this.currentTemplateType,
-          level: 0,
-        };
+          level: 0
+        }
       }
       this.dialogTitleLabel = this.$t(
         `system_parameter_setting.${
-          "folder" === this.templateEditForm.nodeType
-            ? "classification_name"
-            : "template_name"
+          this.templateEditForm.nodeType === 'folder'
+            ? 'classification_name'
+            : 'template_name'
         }`
-      );
-      this.editTemplate = true;
+      )
+      this.editTemplate = true
     },
     templateEdit(templateInfo) {
-      this.showTemplateEditDialog("edit", templateInfo);
+      this.showTemplateEditDialog('edit', templateInfo)
     },
     saveTemplateEdit(templateEditForm) {
-      this.$refs["templateEditForm"].validate((valid) => {
+      this.$refs['templateEditForm'].validate((valid) => {
         if (valid) {
           save(templateEditForm).then((response) => {
-            this.close();
+            this.close()
             this.openMessageSuccess(
               `system_parameter_setting.${
                 this.templateEditForm.id
-                  ? "rename_succeeded"
-                  : "added_successfully"
+                  ? 'rename_succeeded'
+                  : 'added_successfully'
               }`
-            );
-            this.getTree();
-          });
+            )
+            this.getTree()
+          })
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     close() {
-      this.$refs["templateEditForm"].resetFields();
-      this.editTemplate = false;
+      this.$refs['templateEditForm'].resetFields()
+      this.editTemplate = false
     },
     getTree() {
       const request = {
         templateType: this.currentTemplateType,
-        level: "0",
-      };
+        level: '0'
+      }
       find(request).then((res) => {
-        this.templateList = res.data;
-        this.showFirst();
-      });
+        this.templateList = res.data
+        this.showFirst()
+      })
     },
     showFirst() {
       // 判断是否默认点击第一条
       if (this.templateList && this.templateList.length > 0) {
-        let showFirst = true;
+        let showFirst = true
         this.templateList.forEach((template) => {
           if (template.id === this.currentTemplateId) {
-            showFirst = false;
+            showFirst = false
           }
-        });
+        })
         if (showFirst) {
           this.$nextTick().then(() => {
-            const [obj = {}] = this.templateList;
-            this.$refs.templateList.nodeClick(obj);
-          });
+            const [obj = {}] = this.templateList
+            this.$refs.templateList.nodeClick(obj)
+          })
         } else {
-          this.showCurrentTemplate(this.currentTemplateId, this.currentTemplateLabel);
+          this.showCurrentTemplate(this.currentTemplateId, this.currentTemplateLabel)
         }
       } else {
-        this.currentTemplateShowList = [];
+        this.currentTemplateShowList = []
       }
     },
     closeEditTemplateDialog() {
-      this.templateDialog.visible = false;
+      this.templateDialog.visible = false
     },
     templateImport(pid) {
-      this.templateDialog.visible = true;
-      this.templateDialog.pid = pid;
-    },
-  },
-};
+      this.templateDialog.visible = true
+      this.templateDialog.pid = pid
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/views/panel/templateMarket/component/MarketPreview.vue b/frontend/src/views/panel/templateMarket/component/MarketPreview.vue
index 6cee4cf5b8..33c01c44af 100644
--- a/frontend/src/views/panel/templateMarket/component/MarketPreview.vue
+++ b/frontend/src/views/panel/templateMarket/component/MarketPreview.vue
@@ -1,12 +1,27 @@
 <template>
   <el-row>
     <el-col :class="asideActive?'aside-active':'aside-inActive'">
-      <svg-icon v-show="!asideActive" icon-class="button_right" class="open-button" @click="asideActiveChange(true)" />
-      <el-row v-show="asideActive" style="padding: 12px 12px 0 12px ">
+      <svg-icon
+        v-show="!asideActive"
+        icon-class="button_right"
+        class="open-button"
+        @click="asideActiveChange(true)"
+      />
+      <el-row
+        v-show="asideActive"
+        style="padding: 12px 12px 0 12px "
+      >
         <el-row>
-          <span class="icon iconfont icon-close icon20 insert" @click="closePreview()" />
+          <span
+            class="icon iconfont icon-close icon20 insert"
+            @click="closePreview()"
+          />
           <span class="main-title">{{ $t('panel.template_preview') }}</span>
-          <span style="float: right" class="icon iconfont icon-icon_up-left_outlined insert icon20" @click="asideActiveChange(false)" />
+          <span
+            style="float: right"
+            class="icon iconfont icon-icon_up-left_outlined insert icon20"
+            @click="asideActiveChange(false)"
+          />
         </el-row>
         <el-row class="margin-top16 search-area">
           <el-input
@@ -17,10 +32,19 @@
             :placeholder="$t('panel.enter_template_name_tips')"
             clearable="true"
           />
-          <span class="icon iconfont icon-icon-filter insert-filter filter-icon-span" :class="extFilterActive?'filter-icon-active':''" @click="extFilterActiveChange()" />
+          <span
+            class="icon iconfont icon-icon-filter insert-filter filter-icon-span"
+            :class="extFilterActive?'filter-icon-active':''"
+            @click="extFilterActiveChange()"
+          />
         </el-row>
         <el-row v-show="extFilterActive">
-          <el-select v-model="marketActiveTab" class="margin-top16" size="small" placeholder="请选择">
+          <el-select
+            v-model="marketActiveTab"
+            class="margin-top16"
+            size="small"
+            placeholder="请选择"
+          >
             <el-option
               v-for="item in marketTabs"
               :key="item"
@@ -32,7 +56,11 @@
         <el-divider />
       </el-row>
 
-      <el-row v-show="asideActive" class="aside-list" :class="extFilterActive?'aside-list-filter-active':''">
+      <el-row
+        v-show="asideActive"
+        class="aside-list"
+        :class="extFilterActive?'aside-list-filter-active':''"
+      >
         <template-market-preview-item
           v-for="(templateItem) in currentMarketTemplateShowList"
           v-show="templateItem.showFlag"
@@ -42,22 +70,43 @@
           :active="active(templateItem)"
           @previewTemplate="previewTemplate"
         />
-        <el-row v-show="!hasResult" class="custom-position">
+        <el-row
+          v-show="!hasResult"
+          class="custom-position"
+        >
           <div style="text-align: center">
-            <svg-icon icon-class="no_result" style="font-size: 75px;margin-bottom: 16px" />
+            <svg-icon
+              icon-class="no_result"
+              style="font-size: 75px;margin-bottom: 16px"
+            />
             <br>
             <span>{{ $t('commons.no_result') }}</span>
           </div>
         </el-row>
       </el-row>
     </el-col>
-    <el-col class="main-area" :class="asideActive ? 'main-area-active': ''">
+    <el-col
+      class="main-area"
+      :class="asideActive ? 'main-area-active': ''"
+    >
       <el-row>
-        <span v-if="curTemplate" class="template-title">{{ curTemplate.title }}</span>
-        <el-button style="float: right" type="primary" size="small" @click="templateApply(curTemplate)">{{ $t('panel.apply_this_template') }}</el-button>
+        <span
+          v-if="curTemplate"
+          class="template-title"
+        >{{ curTemplate.title }}</span>
+        <el-button
+          style="float: right"
+          type="primary"
+          size="small"
+          @click="templateApply(curTemplate)"
+        >{{ $t('panel.apply_this_template') }}</el-button>
       </el-row>
       <el-row class="img-main">
-        <img height="100%" :src="templatePreviewUrl" alt="">
+        <img
+          height="100%"
+          :src="templatePreviewUrl"
+          alt=""
+        >
       </el-row>
     </el-col>
   </el-row>
diff --git a/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue b/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
index c6d34dfd41..7d8a86e3a7 100644
--- a/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
+++ b/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
@@ -1,20 +1,33 @@
 <template>
   <div class="testcase-template">
-    <div class="template-img" :style="classBackground" @click.stop="templatePreview" />
+    <div
+      class="template-img"
+      :style="classBackground"
+      @click.stop="templatePreview"
+    />
     <el-row class="bottom-area">
       <el-row>
         <span class="demonstration">{{ template.title }}</span>
       </el-row>
     </el-row>
     <el-row class="template-button">
-      <el-button size="mini" style="width: 141px" @click="templatePreview">{{ $t('panel.preview') }}</el-button>
-      <el-button size="mini" style="width: 141px" type="primary" @click="apply">{{ $t('panel.apply') }}</el-button>
+      <el-button
+        size="mini"
+        style="width: 141px"
+        @click="templatePreview"
+      >{{ $t('panel.preview') }}</el-button>
+      <el-button
+        size="mini"
+        style="width: 141px"
+        type="primary"
+        @click="apply"
+      >{{ $t('panel.apply') }}</el-button>
     </el-row>
   </div>
 </template>
 
 <script>
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'TemplateMarketItem',
diff --git a/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue b/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue
index 3b0e782d41..4428731c87 100644
--- a/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue
+++ b/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue
@@ -8,13 +8,16 @@
     ]"
     @click.stop="previewTemplate"
   >
-    <div class="template-item-img" :style="classBackground" />
+    <div
+      class="template-item-img"
+      :style="classBackground"
+    />
     <span class="demonstration">{{ template.title }}</span>
   </div>
 </template>
 
 <script>
-import {imgUrlTrans} from "@/components/canvas/utils/utils";
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'TemplateMarketPreviewItem',
diff --git a/frontend/src/views/panel/templateMarket/index.vue b/frontend/src/views/panel/templateMarket/index.vue
index 573666d355..a7bace1a49 100644
--- a/frontend/src/views/panel/templateMarket/index.vue
+++ b/frontend/src/views/panel/templateMarket/index.vue
@@ -1,23 +1,51 @@
 <template>
   <el-row class="outer-body">
     <!--预览模式-->
-    <MarketPreview v-show="previewModel" :preview-id="templatePreviewId" @closePreview="previewModel=false" @templateApply="templateApply" />
+    <MarketPreview
+      v-show="previewModel"
+      :preview-id="templatePreviewId"
+      @closePreview="previewModel=false"
+      @templateApply="templateApply"
+    />
     <!--列表模式-->
-    <el-row v-show="!previewModel" class="market-main">
+    <el-row
+      v-show="!previewModel"
+      class="market-main"
+    >
       <el-row>
         <el-col span="12">
           <span class="title-left">{{ $t('panel.template_market') }}</span>
         </el-col>
         <el-col span="12">
-          <el-input v-model="searchText" prefix-icon="el-icon-search" size="small" class="title-right" :placeholder="$t('panel.enter_template_name_tips')" clearable="true" />
+          <el-input
+            v-model="searchText"
+            prefix-icon="el-icon-search"
+            size="small"
+            class="title-right"
+            :placeholder="$t('panel.enter_template_name_tips')"
+            clearable="true"
+          />
         </el-col>
       </el-row>
       <el-row>
-        <el-tabs v-model="marketActiveTab" @tab-click="handleClick">
-          <el-tab-pane v-for="tabItem in marketTabs" :key="tabItem" :label="tabItem" :name="tabItem" />
+        <el-tabs
+          v-model="marketActiveTab"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane
+            v-for="tabItem in marketTabs"
+            :key="tabItem"
+            :label="tabItem"
+            :name="tabItem"
+          />
         </el-tabs>
       </el-row>
-      <el-row v-show="networkStatus && hasResult" id="template-main" v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="template-main">
+      <el-row
+        v-show="networkStatus && hasResult"
+        id="template-main"
+        v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+        class="template-main"
+      >
         <el-col
           v-for="(templateItem) in currentMarketTemplateShowList"
           v-show="templateItem.showFlag"
@@ -34,14 +62,23 @@
           />
         </el-col>
       </el-row>
-      <el-row v-show="networkStatus && !hasResult" class="custom-position template-main">
+      <el-row
+        v-show="networkStatus && !hasResult"
+        class="custom-position template-main"
+      >
         <div style="text-align: center">
-          <svg-icon icon-class="no_result" style="font-size: 75px;margin-bottom: 16px" />
+          <svg-icon
+            icon-class="no_result"
+            style="font-size: 75px;margin-bottom: 16px"
+          />
           <br>
           <span>{{ $t('commons.no_result') }}</span>
         </div>
       </el-row>
-      <el-row v-show="!networkStatus" class="custom-position template-main">
+      <el-row
+        v-show="!networkStatus"
+        class="custom-position template-main"
+      >
         {{ $t('panel.market_network_tips') }}
       </el-row>
     </el-row>
@@ -54,11 +91,26 @@
       append-to-body="true"
       :destroy-on-close="true"
     >
-      <el-form ref="panelForm" :model="panelForm" :rules="rule" label-width="80px">
-        <el-form-item :label="$t('panel.name')" prop="name">
-          <el-input v-model="panelForm.name" :clearable="true" :placeholder="$t('panel.enter_name_tips')" />
+      <el-form
+        ref="panelForm"
+        :model="panelForm"
+        :rules="rule"
+        label-width="80px"
+      >
+        <el-form-item
+          :label="$t('panel.name')"
+          prop="name"
+        >
+          <el-input
+            v-model="panelForm.name"
+            :clearable="true"
+            :placeholder="$t('panel.enter_name_tips')"
+          />
         </el-form-item>
-        <el-form-item :label="$t('commons.folder')" prop="pid">
+        <el-form-item
+          :label="$t('commons.folder')"
+          prop="pid"
+        >
           <treeselect
             v-model="panelForm.pid"
             :clearable="false"
@@ -71,9 +123,20 @@
           />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer dialog-footer-self">
-        <el-button size="mini" @click="folderSelectShow=false">{{ $t('commons.cancel') }}</el-button>
-        <el-button size="mini" type="primary" :disabled="!panelForm.name || !panelForm.pid" @click="apply">{{ $t('commons.confirm') }}</el-button>
+      <div
+        slot="footer"
+        class="dialog-footer dialog-footer-self"
+      >
+        <el-button
+          size="mini"
+          @click="folderSelectShow=false"
+        >{{ $t('commons.cancel') }}</el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          :disabled="!panelForm.name || !panelForm.pid"
+          @click="apply"
+        >{{ $t('commons.confirm') }}</el-button>
       </div>
     </el-dialog>
   </el-row>
diff --git a/frontend/src/views/panel/video/index.vue b/frontend/src/views/panel/video/index.vue
index 627a458736..3be6ca2e41 100644
--- a/frontend/src/views/panel/video/index.vue
+++ b/frontend/src/views/panel/video/index.vue
@@ -6,19 +6,7 @@
 
 import DeVideo from '@/components/canvas/custom-component/DeVideo'
 export default {
-  name: 'Video',
-  components: { DeVideo },
-  data() {
-    return {}
-  },
-  mounted() {
-  },
-  methods: {
-
-  }
+  name: 'VideoDe',
+  components: { DeVideo }
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/views/system/CreateBox.vue b/frontend/src/views/system/CreateBox.vue
index 4dbb2fc89f..11b49b923b 100644
--- a/frontend/src/views/system/CreateBox.vue
+++ b/frontend/src/views/system/CreateBox.vue
@@ -1,7 +1,17 @@
 <template>
   <span class="box">
-    <el-tooltip class="item" effect="dark" :content="tips" placement="right">
-      <el-button type="primary" size="mini" circle @click="exec()">
+    <el-tooltip
+      class="item"
+      effect="dark"
+      :content="tips"
+      placement="right"
+    >
+      <el-button
+        type="primary"
+        size="mini"
+        circle
+        @click="exec()"
+      >
         <font-awesome-icon :icon="['fas', 'plus']" />
       </el-button>
     </el-tooltip>
diff --git a/frontend/src/views/system/SysParam/BasicSetting.vue b/frontend/src/views/system/SysParam/BasicSetting.vue
index 4e0f1852d7..4d7b7bc4a2 100644
--- a/frontend/src/views/system/SysParam/BasicSetting.vue
+++ b/frontend/src/views/system/SysParam/BasicSetting.vue
@@ -1,13 +1,27 @@
 <template>
   <div>
     <operater title="system_parameter_setting.basic_setting">
-      <deBtn v-if="showEdit" type="primary" @click="edit">{{
+      <deBtn
+        v-if="showEdit"
+        type="primary"
+        @click="edit"
+      >{{
         $t("commons.edit")
       }}</deBtn>
-      <deBtn v-if="showCancel" secondary @click="cancel">{{
+      <deBtn
+        v-if="showCancel"
+        secondary
+        @click="cancel"
+      >{{
         $t("commons.cancel")
       }}</deBtn>
-      <deBtn v-if="showSave" type="primary" :disabled="disabledSave" size="small" @click="save('formInline')">
+      <deBtn
+        v-if="showSave"
+        type="primary"
+        :disabled="disabledSave"
+        size="small"
+        @click="save('formInline')"
+      >
         {{ $t("commons.save") }}
       </deBtn>
     </operater>
@@ -36,41 +50,93 @@
             <i class="el-icon-warning-outline tips" />
           </el-tooltip>
         </template>
-        <el-input v-model="formInline.frontTimeOut" :placeholder="$t('system_parameter_setting.empty_front')"><template
+        <el-input
+          v-model="formInline.frontTimeOut"
+          :placeholder="$t('system_parameter_setting.empty_front')"
+        ><template
           slot="append"
         >{{ $t("panel.second") }}</template></el-input>
       </el-form-item>
-      <el-form-item :label="$t('system_parameter_setting.message_retention_time')" prop="msgTimeOut">
-        <el-input v-model="formInline.msgTimeOut" :placeholder="$t('system_parameter_setting.empty_msg')"><template
+      <el-form-item
+        :label="$t('system_parameter_setting.message_retention_time')"
+        prop="msgTimeOut"
+      >
+        <el-input
+          v-model="formInline.msgTimeOut"
+          :placeholder="$t('system_parameter_setting.empty_msg')"
+        ><template
           slot="append"
         >{{ $t('components.day') }}</template></el-input>
       </el-form-item>
 
       <el-form-item :label="$t('system_parameter_setting.ds_check_time')">
-        <el-form :inline="true" :disabled="show" class="demo-form-inline-ds">
+        <el-form
+          :inline="true"
+          :disabled="show"
+          class="demo-form-inline-ds"
+        >
 
           <el-form-item>
-            <el-input v-model="formInline.dsCheckInterval" size="mini" type="number" min="1" @change="onSimpleCronChange()" />
+            <el-input
+              v-model="formInline.dsCheckInterval"
+              size="mini"
+              type="number"
+              min="1"
+              @change="onSimpleCronChange()"
+            />
           </el-form-item>
 
           <el-form-item class="form-item">
-            <el-select v-model="formInline.dsCheckIntervalType" filterable size="mini" @change="onSimpleCronChange()">
-              <el-option :label="$t('cron.minute_default')" value="minute" />
-              <el-option :label="$t('cron.hour_default')" value="hour" />
+            <el-select
+              v-model="formInline.dsCheckIntervalType"
+              filterable
+              size="mini"
+              @change="onSimpleCronChange()"
+            >
+              <el-option
+                :label="$t('cron.minute_default')"
+                value="minute"
+              />
+              <el-option
+                :label="$t('cron.hour_default')"
+                value="hour"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item class="form-item" :label="$t('cron.every_exec')" />
+          <el-form-item
+            class="form-item"
+            :label="$t('cron.every_exec')"
+          />
         </el-form>
       </el-form-item>
 
-      <el-form-item v-if="loginTypes.length > 1" :label="$t('system_parameter_setting.login_type')" prop="loginType">
+      <el-form-item
+        v-if="loginTypes.length > 1"
+        :label="$t('system_parameter_setting.login_type')"
+        prop="loginType"
+      >
         <el-radio-group v-model="formInline.loginType">
-          <el-radio :label="0" size="mini">{{
+          <el-radio
+            :label="0"
+            size="mini"
+          >{{
             $t("login.default_login")
           }}</el-radio>
-          <el-radio v-if="loginTypes.includes(1)" :label="1" size="mini">LDAP</el-radio>
-          <el-radio v-if="loginTypes.includes(2)" :label="2" size="mini">OIDC</el-radio>
-          <el-radio v-if="loginTypes.includes(3)" :label="3" size="mini">CAS</el-radio>
+          <el-radio
+            v-if="loginTypes.includes(1)"
+            :label="1"
+            size="mini"
+          >LDAP</el-radio>
+          <el-radio
+            v-if="loginTypes.includes(2)"
+            :label="2"
+            size="mini"
+          >OIDC</el-radio>
+          <el-radio
+            v-if="loginTypes.includes(3)"
+            :label="3"
+            size="mini"
+          >CAS</el-radio>
         </el-radio-group>
       </el-form-item>
 
@@ -78,7 +144,12 @@
         <el-button class="pwd-tips" type="text">{{ $t('system_parameter_setting.cas_reset') + '[/cas/reset/{adminAcount}/{adminPwd}]' }}</el-button>
       </el-row> -->
 
-      <plugin-com v-if="isPluginLoaded" ref="LoginLimitSetting" :form="formInline" component-name="LoginLimitSetting" />
+      <plugin-com
+        v-if="isPluginLoaded"
+        ref="LoginLimitSetting"
+        :form="formInline"
+        component-name="LoginLimitSetting"
+      />
 
       <el-form-item
         :label="
@@ -86,8 +157,14 @@
         "
       >
         <el-radio-group v-model="formInline.openMarketPage">
-          <el-radio label="true" size="mini">{{ $t("commons.yes") }}</el-radio>
-          <el-radio label="false" size="mini">{{ $t("commons.no") }}</el-radio>
+          <el-radio
+            label="true"
+            size="mini"
+          >{{ $t("commons.yes") }}</el-radio>
+          <el-radio
+            label="false"
+            size="mini"
+          >{{ $t("commons.no") }}</el-radio>
         </el-radio-group>
       </el-form-item>
 
@@ -98,8 +175,14 @@
         prop="openHomePage"
       >
         <el-radio-group v-model="formInline.openHomePage">
-          <el-radio label="true" size="mini">{{ $t("commons.yes") }}</el-radio>
-          <el-radio label="false" size="mini">{{ $t("commons.no") }}</el-radio>
+          <el-radio
+            label="true"
+            size="mini"
+          >{{ $t("commons.yes") }}</el-radio>
+          <el-radio
+            label="false"
+            size="mini"
+          >{{ $t("commons.no") }}</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
diff --git a/frontend/src/views/system/SysParam/ClusterModeSetting.vue b/frontend/src/views/system/SysParam/ClusterModeSetting.vue
index cc108c5b3c..85047f1575 100644
--- a/frontend/src/views/system/SysParam/ClusterModeSetting.vue
+++ b/frontend/src/views/system/SysParam/ClusterModeSetting.vue
@@ -1,16 +1,31 @@
 <template>
   <div>
     <operater title="system_parameter_setting.engine_mode_setting">
-      <deBtn v-if="showCancel" secondary @click="cancel">
+      <deBtn
+        v-if="showCancel"
+        secondary
+        @click="cancel"
+      >
         {{ $t("commons.cancel") }}
       </deBtn>
-      <deBtn secondary  @click="validaDatasource">
+      <deBtn
+        secondary
+        @click="validaDatasource"
+      >
         {{ $t("commons.validate") }}
       </deBtn>
-      <deBtn v-if="showEdit" type="primary" @click="edit">
+      <deBtn
+        v-if="showEdit"
+        type="primary"
+        @click="edit"
+      >
         {{ $t("commons.edit") }}
       </deBtn>
-      <deBtn v-if="showSave" type="primary"  @click="save">
+      <deBtn
+        v-if="showSave"
+        type="primary"
+        @click="save"
+      >
         {{ $t("commons.save") }}
       </deBtn>
     </operater>
@@ -41,15 +56,15 @@
         <el-input v-model="form.configuration.username" />
       </el-form-item>
       <el-form-item :label="$t('datasource.password')">
-        <dePwd v-model="form.configuration.password"/>
+        <dePwd v-model="form.configuration.password" />
       </el-form-item>
       <el-form-item
         :label="$t('datasource.query_port')"
         prop="configuration.port"
       >
         <el-input-number
-          controls-position="right"
           v-model="form.configuration.port"
+          controls-position="right"
           autocomplete="off"
           type="number"
           min="0"
@@ -60,19 +75,26 @@
         prop="configuration.httpPort"
       >
         <el-input-number
-          controls-position="right"
           v-model="form.configuration.httpPort"
+          controls-position="right"
           autocomplete="off"
           type="number"
           min="0"
         />
       </el-form-item>
 
-      <span @click="showPriority = !showPriority" class="de-expand"
-        >{{ $t("datasource.priority")
-        }}<i v-if="showPriority" class="el-icon-arrow-up"></i>
-        <i v-else class="el-icon-arrow-down"></i
-      ></span>
+      <span
+        class="de-expand"
+        @click="showPriority = !showPriority"
+      >{{ $t("datasource.priority")
+       }}<i
+         v-if="showPriority"
+         class="el-icon-arrow-up"
+       />
+        <i
+          v-else
+          class="el-icon-arrow-down"
+        /></span>
       <template v-if="showPriority">
         <el-row :gutter="24">
           <el-col :span="12">
@@ -81,8 +103,8 @@
               prop="configuration.replicationNum"
             >
               <el-input-number
-                controls-position="right"
                 v-model="form.configuration.replicationNum"
+                controls-position="right"
                 autocomplete="off"
                 type="number"
                 min="1"
@@ -95,8 +117,8 @@
               prop="configuration.bucketNum"
             >
               <el-input-number
-                controls-position="right"
                 v-model="form.configuration.bucketNum"
+                controls-position="right"
                 autocomplete="off"
                 type="number"
                 min="1"
@@ -112,8 +134,8 @@
               prop="configuration.initialPoolSize"
             >
               <el-input-number
-                controls-position="right"
                 v-model="form.configuration.initialPoolSize"
+                controls-position="right"
                 autocomplete="off"
                 type="number"
                 min="0"
@@ -127,8 +149,8 @@
               prop="configuration.minPoolSize"
             >
               <el-input-number
-                controls-position="right"
                 v-model="form.configuration.minPoolSize"
+                controls-position="right"
                 autocomplete="off"
                 type="number"
                 min="0"
@@ -143,8 +165,8 @@
               prop="configuration.maxPoolSize"
             >
               <el-input-number
-                controls-position="right"
                 v-model="form.configuration.maxPoolSize"
+                controls-position="right"
                 autocomplete="off"
                 type="number"
                 min="0"
@@ -158,55 +180,55 @@
 </template>
 
 <script>
-import { engineInfo, validate, save } from "@/api/system/engine";
-import i18n from "@/lang";
-import operater from "./operater";
+import { engineInfo, validate, save } from '@/api/system/engine'
+import i18n from '@/lang'
+import operater from './operater'
 import msgCfm from '@/components/msgCfm'
 import dePwd from '@/components/deCustomCm/dePwd.vue'
 export default {
-  name: "ClusterMode",
-  mixins: [msgCfm],
+  name: 'ClusterMode',
   components: {
     operater,
     dePwd
   },
+  mixins: [msgCfm],
   data() {
     return {
       showPriority: false,
       form: {
-        type: "engine_doris",
+        type: 'engine_doris',
         configuration: {
-          host: "",
-          dataBase: "",
-          username: "",
-          password: "",
-          port: "",
+          host: '',
+          dataBase: '',
+          username: '',
+          password: '',
+          port: '',
           httpPort: 8030,
           extraParams:
-            "characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull",
+            'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull',
           replicationNum: 1,
           bucketNum: 10,
           minPoolSize: 5,
           maxPoolSize: 50,
-          initialPoolSize: 5,
-        },
+          initialPoolSize: 5
+        }
       },
       originConfiguration: {
-        host: "",
-        dataBase: "",
-        username: "",
-        password: "",
-        port: "",
+        host: '',
+        dataBase: '',
+        username: '',
+        password: '',
+        port: '',
         httpPort: 8030,
         extraParams:
-          "characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull",
+          'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull',
         replicationNum: 1,
         bucketNum: 10,
         minPoolSize: 5,
         maxPoolSize: 50,
-        initialPoolSize: 5,
+        initialPoolSize: 5
       },
-      input: "",
+      input: '',
       visible: true,
       showEdit: true,
       showSave: false,
@@ -216,193 +238,193 @@ export default {
       disabledSave: false,
       loading: false,
       rules: {
-        "configuration.host": [
+        'configuration.host': [
           {
             required: true,
-            message: this.$t("datasource.please_input_host"),
-            trigger: ["change", "blur"],
-          },
+            message: this.$t('datasource.please_input_host'),
+            trigger: ['change', 'blur']
+          }
         ],
-        "configuration.port": [
+        'configuration.port': [
           {
             required: true,
-            message: this.$t("datasource.please_input_port"),
-            trigger: ["change", "blur"],
-          },
+            message: this.$t('datasource.please_input_port'),
+            trigger: ['change', 'blur']
+          }
         ],
-        "configuration.httpPort": [
+        'configuration.httpPort': [
           {
             required: true,
-            message: this.$t("datasource.please_input_port"),
-            trigger: ["change", "blur"],
-          },
+            message: this.$t('datasource.please_input_port'),
+            trigger: ['change', 'blur']
+          }
         ],
-        "configuration.dataBase": [
+        'configuration.dataBase': [
           {
             required: true,
-            message: this.$t("datasource.please_input_data_base"),
-            trigger: ["change", "blur"],
-          },
+            message: this.$t('datasource.please_input_data_base'),
+            trigger: ['change', 'blur']
+          }
         ],
-        "configuration.replicationNum": [
+        'configuration.replicationNum': [
           {
             required: true,
-            message: this.$t("datasource.please_input_replication_num"),
-            trigger: ["change", "blur"],
-          },
+            message: this.$t('datasource.please_input_replication_num'),
+            trigger: ['change', 'blur']
+          }
         ],
-        "configuration.bucketNum": [
+        'configuration.bucketNum': [
           {
             required: true,
-            message: this.$t("datasource.please_input_bucket_num"),
-            trigger: ["change", "blur"],
-          },
+            message: this.$t('datasource.please_input_bucket_num'),
+            trigger: ['change', 'blur']
+          }
         ],
-        "configuration.minPoolSize": [
+        'configuration.minPoolSize': [
           {
             required: true,
-            message: this.$t("datasource.commons.cannot_be_null"),
-            trigger: ["change", "blur"],
-          },
+            message: this.$t('datasource.commons.cannot_be_null'),
+            trigger: ['change', 'blur']
+          }
         ],
-        "configuration.initialPoolSize": [
+        'configuration.initialPoolSize': [
           {
             required: true,
-            message: this.$t("commons.cannot_be_null"),
-            trigger: ["change", "blur"],
-          },
+            message: this.$t('commons.cannot_be_null'),
+            trigger: ['change', 'blur']
+          }
         ],
-        "configuration.maxPoolSize": [
+        'configuration.maxPoolSize': [
           {
             required: true,
-            message: this.$t("datasource.commons.cannot_be_null"),
-            trigger: ["change", "blur"],
-          },
-        ],
+            message: this.$t('datasource.commons.cannot_be_null'),
+            trigger: ['change', 'blur']
+          }
+        ]
       },
       allTypes: [
         {
-          name: "engine_mysql",
-          label: "MySQL",
-          type: "jdbc",
+          name: 'engine_mysql',
+          label: 'MySQL',
+          type: 'jdbc',
           extraParams:
-            "characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true",
-        },
-      ],
-    };
+            'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
+        }
+      ]
+    }
   },
 
   created() {
-    this.query();
+    this.query()
   },
   methods: {
     query() {
       engineInfo().then((response) => {
         if (response.data.id) {
-          this.form = JSON.parse(JSON.stringify(response.data));
-          this.form.configuration = JSON.parse(this.form.configuration);
+          this.form = JSON.parse(JSON.stringify(response.data))
+          this.form.configuration = JSON.parse(this.form.configuration)
           this.originConfiguration = JSON.parse(
             JSON.stringify(this.form.configuration)
-          );
+          )
         }
         this.$nextTick(() => {
-          this.$refs.form.clearValidate();
-        });
-      });
+          this.$refs.form.clearValidate()
+        })
+      })
     },
     edit() {
-      this.showEdit = false;
-      this.showSave = true;
-      this.showCancel = true;
-      this.show = false;
+      this.showEdit = false
+      this.showSave = true
+      this.showCancel = true
+      this.show = false
     },
     save() {
       if (
-        this.form.configuration.dataSourceType === "jdbc" &&
+        this.form.configuration.dataSourceType === 'jdbc' &&
         (this.form.configuration.port <= 0 ||
           this.form.configuration.httpPort <= 0)
       ) {
-        this.$message.error(i18n.t("datasource.port_no_less_then_0"));
-        return;
+        this.$message.error(i18n.t('datasource.port_no_less_then_0'))
+        return
       }
       if (
         this.form.configuration.initialPoolSize < 0 ||
         this.form.configuration.minPoolSize < 0 ||
         this.form.configuration.maxPoolSize < 0
       ) {
-        this.$message.error(i18n.t("datasource.no_less_then_0"));
-        return;
+        this.$message.error(i18n.t('datasource.no_less_then_0'))
+        return
       }
       this.$refs.form.validate((valid) => {
         if (!valid) {
-          return false;
+          return false
         }
-        const form = JSON.parse(JSON.stringify(this.form));
-        form.configuration = JSON.stringify(form.configuration);
+        const form = JSON.parse(JSON.stringify(this.form))
+        form.configuration = JSON.stringify(form.configuration)
         save(form).then((res) => {
-          this.showEdit = true;
-          this.showCancel = false;
-          this.showSave = false;
-          this.show = true;
+          this.showEdit = true
+          this.showCancel = false
+          this.showSave = false
+          this.show = true
           this.originConfiguration = JSON.parse(
             JSON.stringify(this.form.configuration)
-          );
-          this.openMessageSuccess("commons.save_success");
-        });
-      });
+          )
+          this.openMessageSuccess('commons.save_success')
+        })
+      })
     },
     cancel() {
-      this.showEdit = true;
-      this.showCancel = false;
-      this.showSave = false;
-      this.show = true;
+      this.showEdit = true
+      this.showCancel = false
+      this.showSave = false
+      this.show = true
       this.form.configuration = JSON.parse(
         JSON.stringify(this.originConfiguration)
-      );
+      )
     },
     changeType() {
       for (let i = 0; i < this.allTypes.length; i++) {
         if (this.allTypes[i].name === this.form.type) {
-          this.form.configuration.dataSourceType = this.allTypes[i].type;
-          this.form.configuration.extraParams = this.allTypes[i].extraParams;
+          this.form.configuration.dataSourceType = this.allTypes[i].type
+          this.form.configuration.extraParams = this.allTypes[i].extraParams
         }
       }
     },
     validaDatasource() {
-      if (!this.form.configuration.schema && this.form.type === "oracle") {
-        this.$message.error(i18n.t("datasource.please_choose_schema"));
-        return;
+      if (!this.form.configuration.schema && this.form.type === 'oracle') {
+        this.$message.error(i18n.t('datasource.please_choose_schema'))
+        return
       }
       if (
-        this.form.configuration.dataSourceType === "jdbc" &&
+        this.form.configuration.dataSourceType === 'jdbc' &&
         (this.form.configuration.port <= 0 ||
           this.form.configuration.httpPort <= 0)
       ) {
-        this.$message.error(i18n.t("datasource.port_no_less_then_0"));
-        return;
+        this.$message.error(i18n.t('datasource.port_no_less_then_0'))
+        return
       }
       this.$refs.form.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form));
-          data.configuration = JSON.stringify(data.configuration);
+          const data = JSON.parse(JSON.stringify(this.form))
+          data.configuration = JSON.stringify(data.configuration)
           validate(data).then((res) => {
             if (res.success) {
-              this.openMessageSuccess("datasource.validate_success");
+              this.openMessageSuccess('datasource.validate_success')
             } else {
               if (res.message.length < 2500) {
-                this.$error(res.message);
+                this.$error(res.message)
               } else {
-                this.$error(res.message.substring(0, 2500) + "......");
+                this.$error(res.message.substring(0, 2500) + '......')
               }
             }
-          });
+          })
         } else {
-          return false;
+          return false
         }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .de-expand {
@@ -436,4 +458,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/system/SysParam/EmailSetting.vue b/frontend/src/views/system/SysParam/EmailSetting.vue
index 4bc042e0d2..74607ad699 100644
--- a/frontend/src/views/system/SysParam/EmailSetting.vue
+++ b/frontend/src/views/system/SysParam/EmailSetting.vue
@@ -1,7 +1,11 @@
 <template>
   <div>
     <operater title="system_parameter_setting.mailbox_service_settings">
-      <deBtn v-if="showCancel" secondary  @click="cancel">{{
+      <deBtn
+        v-if="showCancel"
+        secondary
+        @click="cancel"
+      >{{
         $t("commons.cancel")
       }}</deBtn>
       <deBtn
@@ -11,14 +15,18 @@
       >
         {{ $t("system_parameter_setting.test_connection") }}
       </deBtn>
-      <deBtn type="primary" v-if="showEdit"  @click="edit">{{
+      <deBtn
+        v-if="showEdit"
+        type="primary"
+        @click="edit"
+      >{{
         $t("commons.edit")
       }}</deBtn>
       <deBtn
         v-if="showSave"
         type="primary"
         :disabled="disabledSave"
-        
+
         @click="save('formInline')"
       >
         {{ $t("commons.save") }}
@@ -82,7 +90,7 @@
             :content="$t('system_parameter_setting.test_mail_recipient')"
             placement="top"
           >
-            <i class="el-icon-warning-outline tips-not-absolute"></i>
+            <i class="el-icon-warning-outline tips-not-absolute" />
           </el-tooltip>
         </template>
         <dePwd
@@ -91,15 +99,14 @@
         />
       </el-form-item>
       <el-form-item label="邮箱服务器配置">
-        <el-checkbox v-model="formInline.ssl"
-          >{{ $t('chart.open') }}SSL
+        <el-checkbox v-model="formInline.ssl">{{ $t('chart.open') }}SSL
           <el-tooltip
             class="item"
             effect="dark"
             :content="$t('system_parameter_setting.to_enable_ssl')"
             placement="top"
           >
-            <i class="el-icon-warning-outline tips-not-absolute"></i>
+            <i class="el-icon-warning-outline tips-not-absolute" />
           </el-tooltip>
         </el-checkbox>
 
@@ -111,32 +118,32 @@
             :content="$t('system_parameter_setting.to_enable_tsl')"
             placement="top"
           >
-            <i class="el-icon-warning-outline tips-not-absolute"></i>
+            <i class="el-icon-warning-outline tips-not-absolute" />
           </el-tooltip>
         </el-checkbox>
       </el-form-item>
       <!---->
-      <template v-slot:footer />
+      <template #footer />
     </el-form>
   </div>
 </template>
 
 <script>
-import { emailInfo, updateInfo, validate } from "@/api/system/email";
-import operater from "./operater";
+import { emailInfo, updateInfo, validate } from '@/api/system/email'
+import operater from './operater'
 import msgCfm from '@/components/msgCfm'
 import dePwd from '@/components/deCustomCm/dePwd.vue'
 export default {
-  name: "EmailSetting",
-  mixins: [msgCfm],
+  name: 'EmailSetting',
   components: {
     operater,
     dePwd
   },
+  mixins: [msgCfm],
   data() {
     return {
       formInline: {},
-      input: "",
+      input: '',
       visible: true,
       showEdit: true,
       showSave: false,
@@ -149,41 +156,41 @@ export default {
         host: [
           {
             required: true,
-            message: this.$t("system_parameter_setting.host"),
-            trigger: ["change", "blur"],
-          },
+            message: this.$t('system_parameter_setting.host'),
+            trigger: ['change', 'blur']
+          }
         ],
         port: [
           {
             required: true,
-            message: this.$t("system_parameter_setting.port"),
-            trigger: ["change", "blur"],
-          },
+            message: this.$t('system_parameter_setting.port'),
+            trigger: ['change', 'blur']
+          }
         ],
         account: [
           {
             required: true,
-            message: this.$t("system_parameter_setting.account"),
-            trigger: ["change", "blur"],
-          },
-        ],
-      },
-    };
+            message: this.$t('system_parameter_setting.account'),
+            trigger: ['change', 'blur']
+          }
+        ]
+      }
+    }
   },
 
   created() {
-    this.query();
+    this.query()
   },
   methods: {
     query() {
       emailInfo().then((response) => {
-        this.formInline = response.data;
-        this.formInline.ssl = this.formInline.ssl === "true";
-        this.formInline.tls = this.formInline.tls === "true";
+        this.formInline = response.data
+        this.formInline.ssl = this.formInline.ssl === 'true'
+        this.formInline.tls = this.formInline.tls === 'true'
         this.$nextTick(() => {
-          this.$refs.formInline.clearValidate();
-        });
-      });
+          this.$refs.formInline.clearValidate()
+        })
+      })
     },
     change() {
       if (
@@ -191,113 +198,113 @@ export default {
         !this.formInline.port ||
         !this.formInline.account
       ) {
-        this.disabledConnection = true;
-        this.disabledSave = true;
+        this.disabledConnection = true
+        this.disabledSave = true
       } else {
-        this.disabledConnection = false;
-        this.disabledSave = false;
+        this.disabledConnection = false
+        this.disabledSave = false
       }
     },
     testConnection(formInline) {
       const param = {
-        "smtp.host": this.formInline.host,
-        "smtp.port": this.formInline.port,
-        "smtp.account": this.formInline.account,
-        "smtp.password": this.formInline.password,
-        "smtp.ssl": this.formInline.ssl,
-        "smtp.tls": this.formInline.tls,
-        "smtp.recipient": this.formInline.recipient,
-      };
+        'smtp.host': this.formInline.host,
+        'smtp.port': this.formInline.port,
+        'smtp.account': this.formInline.account,
+        'smtp.password': this.formInline.password,
+        'smtp.ssl': this.formInline.ssl,
+        'smtp.tls': this.formInline.tls,
+        'smtp.recipient': this.formInline.recipient
+      }
       this.$refs[formInline].validate((valid) => {
         if (valid) {
           validate(param).then((response) => {
-          this.openMessageSuccess("commons.connection_successful");
-          });
+            this.openMessageSuccess('commons.connection_successful')
+          })
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     edit() {
-      this.showEdit = false;
-      this.showSave = true;
-      this.showCancel = true;
-      this.show = false;
+      this.showEdit = false
+      this.showSave = true
+      this.showCancel = true
+      this.show = false
     },
     save(formInline) {
-      this.showEdit = true;
-      this.showCancel = false;
-      this.showSave = false;
-      this.show = true;
+      this.showEdit = true
+      this.showCancel = false
+      this.showSave = false
+      this.show = true
       const param = [
         {
-          paramKey: "smtp.host",
+          paramKey: 'smtp.host',
           paramValue: this.formInline.host,
-          type: "text",
-          sort: 1,
+          type: 'text',
+          sort: 1
         },
         {
-          paramKey: "smtp.port",
+          paramKey: 'smtp.port',
           paramValue: this.formInline.port,
-          type: "text",
-          sort: 2,
+          type: 'text',
+          sort: 2
         },
         {
-          paramKey: "smtp.account",
+          paramKey: 'smtp.account',
           paramValue: this.formInline.account,
-          type: "text",
-          sort: 3,
+          type: 'text',
+          sort: 3
         },
         {
-          paramKey: "smtp.password",
+          paramKey: 'smtp.password',
           paramValue: this.formInline.password,
-          type: "password",
-          sort: 4,
+          type: 'password',
+          sort: 4
         },
         {
-          paramKey: "smtp.ssl",
+          paramKey: 'smtp.ssl',
           paramValue: this.formInline.ssl,
-          type: "text",
-          sort: 5,
+          type: 'text',
+          sort: 5
         },
         {
-          paramKey: "smtp.tls",
+          paramKey: 'smtp.tls',
           paramValue: this.formInline.tls,
-          type: "text",
-          sort: 6,
+          type: 'text',
+          sort: 6
         },
         {
-          paramKey: "smtp.recipient",
+          paramKey: 'smtp.recipient',
           paramValue: this.formInline.recipient,
-          type: "text",
-          sort: 8,
-        },
-      ];
+          type: 'text',
+          sort: 8
+        }
+      ]
 
       this.$refs[formInline].validate((valid) => {
         if (valid) {
           updateInfo(param).then((response) => {
-            const flag = response.success;
+            const flag = response.success
             if (flag) {
-              this.openMessageSuccess("commons.save_success");
+              this.openMessageSuccess('commons.save_success')
             } else {
-              this.$message.error(this.$t("commons.save_failed"));
+              this.$message.error(this.$t('commons.save_failed'))
             }
-          });
+          })
         } else {
           // this.result = false
         }
-      });
+      })
     },
     cancel() {
-      this.showEdit = true;
-      this.showCancel = false;
-      this.showSave = false;
-      this.show = true;
-      this.query();
-    },
-  },
-};
+      this.showEdit = true
+      this.showCancel = false
+      this.showSave = false
+      this.show = true
+      this.query()
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/system/SysParam/KettleSetting.vue b/frontend/src/views/system/SysParam/KettleSetting.vue
index c7d32330f2..6ac986693f 100644
--- a/frontend/src/views/system/SysParam/KettleSetting.vue
+++ b/frontend/src/views/system/SysParam/KettleSetting.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="kettle-setting">
-    <deBtn type="primary" icon="el-icon-plus" @click="create(undefined)">{{
+    <deBtn
+      type="primary"
+      icon="el-icon-plus"
+      @click="create(undefined)"
+    >{{
       $t("kettle.add")
     }}</deBtn>
     <div class="table-box">
       <grid-table
-        :tableData="data"
+        :table-data="data"
         :pagination="paginationConfig"
         @size-change="sizeChange"
         @current-change="currentChange"
@@ -14,21 +18,25 @@
           prop="configuration.carte"
           :label="$t('kettle.carte')"
         />
-        <el-table-column prop="configuration.port" :label="$t('kettle.port')" />
-        <el-table-column prop="status" :label="$t('kettle.status')">
+        <el-table-column
+          prop="configuration.port"
+          :label="$t('kettle.port')"
+        />
+        <el-table-column
+          prop="status"
+          :label="$t('kettle.status')"
+        >
           <template slot-scope="scope">
             <span
               v-if="scope.row.status === 'Error'"
               class="de-tag"
               style="color: #646a73; background: rgba(31, 35, 41, 0.1)"
-              >{{ $t("datasource.invalid") }}</span
-            >
+            >{{ $t("datasource.invalid") }}</span>
             <span
               v-if="scope.row.status === 'Success'"
               class="de-tag"
               style="color: green; background: rgba(52, 199, 36, 0.2)"
-              >{{ $t("datasource.valid") }}</span
-            >
+            >{{ $t("datasource.valid") }}</span>
           </template>
         </el-table-column>
         <el-table-column
@@ -39,18 +47,20 @@
         >
           <template slot-scope="scope">
             <el-button
+              class="text-btn"
+              type="text"
               @click="create(scope.row)"
-              class="text-btn"
-              type="text"
-              >{{ $t("commons.edit") }}</el-button
-            >
+            >{{ $t("commons.edit") }}</el-button>
             <el-button
-              @click="validateById(scope.row)"
               class="text-btn"
               type="text"
-              >{{ $t("commons.validate") }}</el-button
-            >
-            <el-button @click="del(scope.row)" class="text-btn" type="text">{{
+              @click="validateById(scope.row)"
+            >{{ $t("commons.validate") }}</el-button>
+            <el-button
+              class="text-btn"
+              type="text"
+              @click="del(scope.row)"
+            >{{
               $t("commons.delete")
             }}</el-button>
           </template>
@@ -69,42 +79,72 @@
     >
       <el-col>
         <el-form
-          class="de-form-item"
           ref="kettleform"
+          class="de-form-item"
           :form="form"
           :model="form"
           label-width="120px"
           :rules="rule"
         >
-          <el-form-item :label="$t('kettle.carte')" prop="configuration.carte">
-            <el-input v-model="form.configuration.carte" :placeholder="$t('components.enter_kettle_address')" />
+          <el-form-item
+            :label="$t('kettle.carte')"
+            prop="configuration.carte"
+          >
+            <el-input
+              v-model="form.configuration.carte"
+              :placeholder="$t('components.enter_kettle_address')"
+            />
           </el-form-item>
-          <el-form-item :label="$t('kettle.port')" prop="configuration.port">
+          <el-form-item
+            :label="$t('kettle.port')"
+            prop="configuration.port"
+          >
             <el-input-number
               v-model="form.configuration.port"
               controls-position="right"
               :placeholder="$t('components.enter_the_port')"
             />
           </el-form-item>
-          <el-form-item :label="$t('kettle.user')" prop="configuration.user">
-            <el-input :placeholder="$t('components.one_user_name')" v-model="form.configuration.user" />
+          <el-form-item
+            :label="$t('kettle.user')"
+            prop="configuration.user"
+          >
+            <el-input
+              v-model="form.configuration.user"
+              :placeholder="$t('components.one_user_name')"
+            />
           </el-form-item>
           <el-form-item
             :label="$t('kettle.passwd')"
             prop="configuration.passwd"
           >
-            <dePwd :placeholder="$t('components.input_a_password')" v-model="form.configuration.passwd"/>
+            <dePwd
+              v-model="form.configuration.passwd"
+              :placeholder="$t('components.input_a_password')"
+            />
           </el-form-item>
         </el-form>
       </el-col>
-      <div slot="footer" class="dialog-footer">
-        <deBtn secondary @click="closeDialog">
-        {{ $t("commons.cancel") }}
-      </deBtn>
-        <deBtn secondary @click="validate()">{{
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <deBtn
+          secondary
+          @click="closeDialog"
+        >
+          {{ $t("commons.cancel") }}
+        </deBtn>
+        <deBtn
+          secondary
+          @click="validate()"
+        >{{
           $t("commons.validate")
         }}</deBtn>
-        <deBtn type="primary"  @click="save()">{{
+        <deBtn
+          type="primary"
+          @click="save()"
+        >{{
           $t("commons.confirm")
         }}</deBtn>
       </div>
@@ -118,15 +158,14 @@ import {
   validate,
   save,
   pageList,
-  validateById,
-} from "@/api/system/kettle";
-import i18n from "@/lang";
-import GridTable from "@/components/gridTable/index.vue";
+  validateById
+} from '@/api/system/kettle'
+import GridTable from '@/components/gridTable/index.vue'
 import dePwd from '@/components/deCustomCm/dePwd.vue'
 import msgCfm from '@/components/msgCfm'
 
 export default {
-  name: "KettleSetting",
+  name: 'KettleSetting',
   components: { GridTable, dePwd },
   mixins: [msgCfm],
   data() {
@@ -134,120 +173,120 @@ export default {
       paginationConfig: {
         currentPage: 1,
         pageSize: 10,
-        total: 0,
+        total: 0
       },
       data: [],
       show_dialog: false,
-      edit_dialog_title: "",
+      edit_dialog_title: '',
       form: {
         configuration: {
-          carte: "",
-          port: "",
-          user: "",
-          passwd: "",
-        },
+          carte: '',
+          port: '',
+          user: '',
+          passwd: ''
+        }
       },
       rule: {
-        "configuration.carte": [
+        'configuration.carte': [
           {
             required: true,
-            message: this.$t("components.address_is_required"),
-            trigger: "blur",
-          },
+            message: this.$t('components.address_is_required'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.port": [
+        'configuration.port': [
           {
             required: true,
-            message: this.$t("components.port_is_required"),
-            trigger: "blur",
-          },
+            message: this.$t('components.port_is_required'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.user": [
+        'configuration.user': [
           {
             required: true,
-            message: this.$t("components.name_is_required"),
-            trigger: "blur",
-          },
+            message: this.$t('components.name_is_required'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.passwd": [
+        'configuration.passwd': [
           {
             required: true,
-            message: this.$t("components.password_is_required"),
-            trigger: "blur",
-          },
-        ],
-      },
-    };
+            message: this.$t('components.password_is_required'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
   },
 
   created() {
-    this.search();
+    this.search()
   },
   methods: {
     initSearch() {
-      this.currentChange(1);
+      this.currentChange(1)
     },
     currentChange(currentPage) {
-      this.paginationConfig.currentPage = currentPage;
-      this.search();
+      this.paginationConfig.currentPage = currentPage
+      this.search()
     },
     sizeChange(pageSize) {
-      this.paginationConfig.pageSize = pageSize;
-      this.paginationConfig.currentPage = 1;
-      this.search();
+      this.paginationConfig.pageSize = pageSize
+      this.paginationConfig.currentPage = 1
+      this.search()
     },
     search() {
-      const { currentPage, pageSize } = this.paginationConfig;
-      pageList("/kettle/pageList/" + currentPage + "/" + pageSize, {}).then(
+      const { currentPage, pageSize } = this.paginationConfig
+      pageList('/kettle/pageList/' + currentPage + '/' + pageSize, {}).then(
         (response) => {
-          this.data = response.data.listObject;
+          this.data = response.data.listObject
           this.data.forEach((item) => {
-            item.configuration = JSON.parse(item.configuration);
-          });
-          this.paginationConfig.total = response.data.itemCount;
+            item.configuration = JSON.parse(item.configuration)
+          })
+          this.paginationConfig.total = response.data.itemCount
         }
-      );
+      )
     },
     del(item) {
       deleteKettle(item.id).then((response) => {
-        this.initSearch();
-      });
+        this.initSearch()
+      })
     },
     create(item) {
       if (!item) {
-        this.targetObjs = [];
+        this.targetObjs = []
         this.form = {
-          configuration: { carte: "", port: "", user: "", passwd: "" },
-        };
-        this.edit_dialog_title = this.$t("kettle.add");
+          configuration: { carte: '', port: '', user: '', passwd: '' }
+        }
+        this.edit_dialog_title = this.$t('kettle.add')
       } else {
-        this.edit_dialog_title = this.$t("commons.edit");
-        this.form = JSON.parse(JSON.stringify(item));
+        this.edit_dialog_title = this.$t('commons.edit')
+        this.form = JSON.parse(JSON.stringify(item))
       }
-      this.show_dialog = true;
+      this.show_dialog = true
     },
 
     save() {
       this.$refs.kettleform.validate((valid) => {
         if (!valid) {
-          return false;
+          return false
         }
-        const form = JSON.parse(JSON.stringify(this.form));
-        form.configuration = JSON.stringify(form.configuration);
+        const form = JSON.parse(JSON.stringify(this.form))
+        form.configuration = JSON.stringify(form.configuration)
         save(form).then((res) => {
-          this.show_dialog = false;
-          this.openMessageSuccess("commons.save_success");
-          this.initSearch();
-        });
-      });
+          this.show_dialog = false
+          this.openMessageSuccess('commons.save_success')
+          this.initSearch()
+        })
+      })
     },
 
     closeDialog() {
-      this.$refs.kettleform.resetFields();
-      this.show_dialog = false;
+      this.$refs.kettleform.resetFields()
+      this.show_dialog = false
       this.form = {
-        configuration: { carte: "", port: "", user: "", passwd: "" },
-      };
+        configuration: { carte: '', port: '', user: '', passwd: '' }
+      }
     },
 
     validate() {
@@ -256,45 +295,45 @@ export default {
           validate(this.form.configuration)
             .then((res) => {
               if (res.success) {
-                this.openMessageSuccess("datasource.validate_success");
+                this.openMessageSuccess('datasource.validate_success')
               } else {
                 if (res.message.length < 2500) {
-                  this.$error(res.message);
+                  this.$error(res.message)
                 } else {
-                  this.$error(res.message.substring(0, 2500) + "......");
+                  this.$error(res.message.substring(0, 2500) + '......')
                 }
               }
             })
             .catch((res) => {
-              this.$error(res.message);
-            });
+              this.$error(res.message)
+            })
         } else {
-          return;
+          return
         }
-      });
+      })
     },
 
     validateById(item) {
       validateById(item.id)
         .then((res) => {
           if (res.success) {
-            item.status = res.data.status;
-            this.openMessageSuccess("datasource.validate_success");
+            item.status = res.data.status
+            this.openMessageSuccess('datasource.validate_success')
           } else {
-            item.status = "Error";
+            item.status = 'Error'
             if (res.message.length < 2500) {
-              this.$error(res.message);
+              this.$error(res.message)
             } else {
-              this.$error(res.message.substring(0, 2500) + "......");
+              this.$error(res.message.substring(0, 2500) + '......')
             }
           }
         })
         .catch((res) => {
-          this.$error(res.message);
-        });
-    },
-  },
-};
+          this.$error(res.message)
+        })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .kettle-setting {
@@ -343,4 +382,4 @@ export default {
   padding: 1px 6px;
   height: 24px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue b/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue
index 364ab15bde..668cfaaa96 100644
--- a/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue
+++ b/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue
@@ -29,12 +29,21 @@
             :default-expanded-keys="expandedKeys"
             @current-change="nodeClick"
           >
-            <span slot-scope="{ node, data }" class="custom-tree-node father">
+            <span
+              slot-scope="{ node, data }"
+              class="custom-tree-node father"
+            >
               <span style="display: flex;flex: 1;width: 0;">
 
-                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ node.data.name }}</span>
+                <span
+                  style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                  :title="data.name"
+                >{{ node.data.name }}</span>
               </span>
-              <span v-if="!isChina(data.code)" class="child">
+              <span
+                v-if="!isChina(data.code)"
+                class="child"
+              >
                 <span @click.stop>
                   <span class="el-dropdown-link">
                     <el-button
@@ -45,7 +54,11 @@
                     />
                   </span>
                 </span>
-                <span v-if="!isGlobal(data.code)" style="margin-left: 12px;" @click.stop>
+                <span
+                  v-if="!isGlobal(data.code)"
+                  style="margin-left: 12px;"
+                  @click.stop
+                >
                   <span class="el-dropdown-link">
                     <el-button
                       icon="el-icon-delete"
@@ -72,13 +85,13 @@ import { removeMap } from '@/api/map/map'
 import msgCfm from '@/components/msgCfm'
 export default {
   name: 'MapSettingLeft',
+  mixins: [msgCfm],
   props: {
     treeDatas: {
       type: Array,
       default: () => []
     }
   },
-  mixins: [msgCfm],
   data() {
     return {
       filterText: '',
@@ -87,7 +100,6 @@ export default {
         label: 'name',
         value: 'id'
       },
-      data: [],
       expandedKeys: []
     }
   },
@@ -156,7 +168,7 @@ export default {
             value: null
           }).then(() => {
             this.$emit('refresh-tree')
-            this.openMessageSuccess("commons.delete_success");
+            this.openMessageSuccess('commons.delete_success')
           })
         })
       }).catch(() => {
diff --git a/frontend/src/views/system/SysParam/MapSetting/MapSettingRight.vue b/frontend/src/views/system/SysParam/MapSetting/MapSettingRight.vue
index a814b1df64..243b7ef656 100644
--- a/frontend/src/views/system/SysParam/MapSetting/MapSettingRight.vue
+++ b/frontend/src/views/system/SysParam/MapSetting/MapSettingRight.vue
@@ -11,12 +11,18 @@
       class="demo-form-inline"
       size="small"
     >
-      <el-input v-show="false" v-model="formInline.pLevel" />
+      <el-input
+        v-show="false"
+        v-model="formInline.pLevel"
+      />
 
       <el-row>
         <el-row>
           <el-col>
-            <el-form-item :label="$t('map_setting.parent_area')" prop="pCode">
+            <el-form-item
+              :label="$t('map_setting.parent_area')"
+              prop="pCode"
+            >
               <el-tree-select
                 v-if="treeShow"
                 ref="deSelectTree"
@@ -37,16 +43,30 @@
         </el-row>
         <el-row>
           <el-col>
-            <el-form-item :label="$t('map_setting.area_code')" prop="code">
-              <el-input v-model="formInline.code" :placeholder="$t('map_setting.please_input')" />
+            <el-form-item
+              :label="$t('map_setting.area_code')"
+              prop="code"
+            >
+              <el-input
+                v-model="formInline.code"
+                :placeholder="$t('map_setting.please_input')"
+              />
             </el-form-item>
           </el-col>
         </el-row>
 
         <el-row>
           <el-col>
-            <el-form-item :label="$t('map_setting.area_name')" prop="name">
-              <el-input v-model="formInline.name" maxlength="30" show-word-limit :placeholder="$t('map_setting.please_input')" />
+            <el-form-item
+              :label="$t('map_setting.area_name')"
+              prop="name"
+            >
+              <el-input
+                v-model="formInline.name"
+                maxlength="30"
+                show-word-limit
+                :placeholder="$t('map_setting.please_input')"
+              />
 
             </el-form-item>
           </el-col>
@@ -68,7 +88,12 @@
               :file-list="filesTmp"
               :http-request="uploadMapFile"
             >
-              <el-button style="display: inline-block" size="mini" type="success" plain>
+              <el-button
+                style="display: inline-block"
+                size="mini"
+                type="success"
+                plain
+              >
                 {{ $t('commons.upload') }}
               </el-button>
             </el-upload>
@@ -90,13 +115,21 @@
       </el-row>
       <div>
 
-        <el-button type="success" size="small" @click="save('formInline')">
+        <el-button
+          type="success"
+          size="small"
+          @click="save('formInline')"
+        >
           {{ $t('commons.save') }}
         </el-button>
       </div>
     </el-form>
 
-    <el-descriptions v-else-if="status === 'read-only'" title="区域信息" :column="1">
+    <el-descriptions
+      v-else-if="status === 'read-only'"
+      title="区域信息"
+      :column="1"
+    >
 
       <el-descriptions-item :label="$t('map_setting.area_code')">{{ nodeInfo.code }}</el-descriptions-item>
 
@@ -109,7 +142,10 @@
       </el-descriptions-item>
     </el-descriptions>
 
-    <el-empty v-else-if="status === 'empty'" description="请在左侧选择区域" />
+    <el-empty
+      v-else-if="status === 'empty'"
+      description="请在左侧选择区域"
+    />
   </div>
 </template>
 
@@ -273,7 +309,7 @@ export default {
         const flag = response.success
         if (flag) {
           this.$emit('refresh-tree', param)
-          this.openMessageSuccess("commons.save_success");
+          this.openMessageSuccess('commons.save_success')
         } else {
           this.$message.error(this.$t('commons.save_failed'))
         }
diff --git a/frontend/src/views/system/SysParam/MapSetting/index.vue b/frontend/src/views/system/SysParam/MapSetting/index.vue
index e62cd3c75d..4bd7b5232d 100644
--- a/frontend/src/views/system/SysParam/MapSetting/index.vue
+++ b/frontend/src/views/system/SysParam/MapSetting/index.vue
@@ -1,12 +1,30 @@
 <template>
-  <de-container class="de-earth" v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="height: calc(100vh - 150px);">
+  <de-container
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+    class="de-earth"
+    style="height: calc(100vh - 150px);"
+  >
 
-    <de-aside-container type="mapset" style="height: 100%;">
-      <map-setting-left ref="map_setting_tree" :tree-datas="treeDatas" @emit-add="emitAdd" @refresh-tree="refreshTree" @show-node-info="loadForm" />
+    <de-aside-container
+      type="mapset"
+      style="height: 100%;"
+    >
+      <map-setting-left
+        ref="map_setting_tree"
+        :tree-datas="treeDatas"
+        @emit-add="emitAdd"
+        @refresh-tree="refreshTree"
+        @show-node-info="loadForm"
+      />
     </de-aside-container>
 
     <de-main-container style="height: 100%;">
-      <map-setting-right ref="map_setting_form" :tree-datas="treeDatas" :status="formStatus" @refresh-tree="refreshTree" />
+      <map-setting-right
+        ref="map_setting_form"
+        :tree-datas="treeDatas"
+        :status="formStatus"
+        @refresh-tree="refreshTree"
+      />
     </de-main-container>
   </de-container>
 </template>
diff --git a/frontend/src/views/system/SysParam/SimpleModeSetting.vue b/frontend/src/views/system/SysParam/SimpleModeSetting.vue
index e6a6fbf5b8..bfbc8c6ac4 100644
--- a/frontend/src/views/system/SysParam/SimpleModeSetting.vue
+++ b/frontend/src/views/system/SysParam/SimpleModeSetting.vue
@@ -1,23 +1,28 @@
 <template>
   <div>
-    <el-form ref="form" v-loading="loading"
-             :model="form"
-             :rules="rules"
-             class="demo-form-inline"
-             :disabled="show"
-             label-width="180px"
-             label-position="top"
-             size="small"
+    <el-form
+      ref="form"
+      v-loading="loading"
+      :model="form"
+      :rules="rules"
+      class="demo-form-inline"
+      :disabled="show"
+      label-width="180px"
+      label-position="top"
+      size="small"
     >
       <el-row>
         <el-col>
-          <el-form-item :label="$t('datasource.type')" prop="type">
+          <el-form-item
+            :label="$t('datasource.type')"
+            prop="type"
+          >
             <el-select
               v-model="form.type"
               :placeholder="$t('datasource.please_choose_type')"
 
-              @change="changeType()"
               filterable
+              @change="changeType()"
             >
               <el-option
                 v-for="item in allTypes"
@@ -31,58 +36,93 @@
       </el-row>
       <el-row>
         <el-col>
-          <el-form-item :label="$t('datasource.host')" prop="configuration.host">
-            <el-input v-model="form.configuration.host"/>
+          <el-form-item
+            :label="$t('datasource.host')"
+            prop="configuration.host"
+          >
+            <el-input v-model="form.configuration.host" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col>
-          <el-form-item :label="$t('datasource.data_base')" prop="configuration.dataBase">
-            <el-input v-model="form.configuration.dataBase"/>
+          <el-form-item
+            :label="$t('datasource.data_base')"
+            prop="configuration.dataBase"
+          >
+            <el-input v-model="form.configuration.dataBase" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col>
           <el-form-item :label="$t('datasource.user_name')">
-            <el-input v-model="form.configuration.username"/>
+            <el-input v-model="form.configuration.username" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col>
           <el-form-item :label="$t('datasource.password')">
-            <el-input v-model="form.configuration.password" show-password/>
+            <el-input
+              v-model="form.configuration.password"
+              show-password
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col>
-          <el-form-item :label="$t('datasource.port')" prop="configuration.port">
-            <el-input v-model="form.configuration.port" autocomplete="off" type="number" min="0"/>
+          <el-form-item
+            :label="$t('datasource.port')"
+            prop="configuration.port"
+          >
+            <el-input
+              v-model="form.configuration.port"
+              autocomplete="off"
+              type="number"
+              min="0"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col>
           <el-form-item :label="$t('datasource.extra_params')">
-            <el-input v-model="form.configuration.extraParams"/>
+            <el-input v-model="form.configuration.extraParams" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <div>
-      <el-button type="primary" size="small" @click="validaDatasource">
+      <el-button
+        type="primary"
+        size="small"
+        @click="validaDatasource"
+      >
         {{ $t('commons.validate') }}
       </el-button>
-      <el-button v-if="showEdit" size="small" @click="edit">
+      <el-button
+        v-if="showEdit"
+        size="small"
+        @click="edit"
+      >
         {{ $t('commons.edit') }}
       </el-button>
-      <el-button v-if="showSave" type="success" size="small" @click="save">
+      <el-button
+        v-if="showSave"
+        type="success"
+        size="small"
+        @click="save"
+      >
         {{ $t('commons.save') }}
       </el-button>
-      <el-button v-if="showCancel" type="info" size="small" @click="cancel">
+      <el-button
+        v-if="showCancel"
+        type="info"
+        size="small"
+        @click="cancel"
+      >
         {{ $t('commons.cancel') }}
       </el-button>
     </div>
@@ -91,8 +131,8 @@
 
 <script>
 
-import {engineInfo, validate, save} from '@/api/system/engine'
-import i18n from "@/lang";
+import { engineInfo, validate, save } from '@/api/system/engine'
+import i18n from '@/lang'
 import msgCfm from '@/components/msgCfm'
 
 export default {
@@ -206,7 +246,7 @@ export default {
           this.showSave = false
           this.show = true
           this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
-          this.openMessageSuccess("commons.save_success");
+          this.openMessageSuccess('commons.save_success')
         })
       })
     },
@@ -240,7 +280,7 @@ export default {
           data.configuration = JSON.stringify(data.configuration)
           validate(data).then(res => {
             if (res.success) {
-              this.openMessageSuccess("datasource.validate_success");
+              this.openMessageSuccess('datasource.validate_success')
             } else {
               if (res.message.length < 2500) {
                 this.$error(res.message)
@@ -253,7 +293,7 @@ export default {
           return false
         }
       })
-    },
+    }
   }
 }
 </script>
diff --git a/frontend/src/views/system/SysParam/index.vue b/frontend/src/views/system/SysParam/index.vue
index 3d79ce875a..e5781b584c 100644
--- a/frontend/src/views/system/SysParam/index.vue
+++ b/frontend/src/views/system/SysParam/index.vue
@@ -3,7 +3,10 @@
     v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
   >
     <div class="sys-setting">
-      <el-tabs v-model="activeName" class="de-tabs">
+      <el-tabs
+        v-model="activeName"
+        class="de-tabs"
+      >
         <el-tab-pane
           :lazy="true"
           :label="$t('system_parameter_setting.basic_setting')"
@@ -16,7 +19,11 @@
           name="first"
         />
 
-        <el-tab-pane :lazy="true" :label="$t('sysParams.map')" name="ten" />
+        <el-tab-pane
+          :lazy="true"
+          :label="$t('sysParams.map')"
+          name="ten"
+        />
 
         <el-tab-pane
           v-if="engineMode === 'simple'"
@@ -44,9 +51,15 @@
         :class="[activeName !== 'eight' ? 'is-center' : 'pad-center']"
       >
         <div class="min-w600">
-          <basic-setting v-if="activeName === 'zero'" :is-plugin-loaded="isPluginLoaded" />
+          <basic-setting
+            v-if="activeName === 'zero'"
+            :is-plugin-loaded="isPluginLoaded"
+          />
           <email-setting v-if="activeName === 'first'" />
-          <map-setting v-if="activeName === 'ten'" ref="mapSetting" />
+          <map-setting
+            v-if="activeName === 'ten'"
+            ref="mapSetting"
+          />
           <simple-mode v-if="activeName === 'six'" />
           <cluster-mode v-if="activeName === 'seven'" />
           <kettle-setting v-if="activeName === 'eight'" />
@@ -63,7 +76,6 @@ import SimpleMode from './SimpleModeSetting'
 import ClusterMode from './ClusterModeSetting'
 import KettleSetting from './KettleSetting'
 import DeLayoutContent from '@/components/business/DeLayoutContent'
-import PluginCom from '@/views/system/plugin/PluginCom'
 import { pluginLoaded } from '@/api/user'
 import { engineMode } from '@/api/system/engine'
 export default {
@@ -71,7 +83,6 @@ export default {
     BasicSetting,
     EmailSetting,
     DeLayoutContent,
-    PluginCom,
     SimpleMode,
     ClusterMode,
     KettleSetting,
diff --git a/frontend/src/views/system/SysParam/operater.vue b/frontend/src/views/system/SysParam/operater.vue
index 1cd7c85eda..d5b4811a22 100644
--- a/frontend/src/views/system/SysParam/operater.vue
+++ b/frontend/src/views/system/SysParam/operater.vue
@@ -2,7 +2,7 @@
   <div class="operater-bar">
     <p class="title">{{ $t(title) }}</p>
     <div class="btn-grounp">
-      <slot></slot>
+      <slot />
     </div>
   </div>
 </template>
@@ -12,10 +12,10 @@ export default {
   props: {
     title: {
       type: String,
-      default: "",
-    },
-  },
-};
+      default: ''
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -33,4 +33,4 @@ export default {
     color: #1f2329;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/system/about/index.vue b/frontend/src/views/system/about/index.vue
index c25af35880..7cf3676a0b 100644
--- a/frontend/src/views/system/about/index.vue
+++ b/frontend/src/views/system/about/index.vue
@@ -1,8 +1,15 @@
 <template>
   <div style="width: 100%;display: flex;justify-content: center;">
     <el-card class="box-card about-card">
-      <div slot="header" class="clearfix license-header">
-        <img src="@/assets/DataEase-white.png" alt="" width="300">
+      <div
+        slot="header"
+        class="clearfix license-header"
+      >
+        <img
+          src="@/assets/DataEase-white.png"
+          alt=""
+          width="300"
+        >
       </div>
       <div class="license-content">
         <div v-if="license.status === 'Fail'">{{ $t('about.invalid_license') }}</div>
@@ -15,7 +22,10 @@
             <tr>
               <th>{{ $t('about.expiration_time') }}</th>
               <td>
-                <label v-if="license.status === 'expired'" style="color: red">{{ license.expired }} {{ $t('about.expirationed') }}</label>
+                <label
+                  v-if="license.status === 'expired'"
+                  style="color: red"
+                >{{ license.expired }} {{ $t('about.expirationed') }}</label>
                 <label v-if="license.status === 'valid'">{{ license.expired }}</label>
               </td>
             </tr>
@@ -42,7 +52,12 @@
         </div>
 
         <div class="md-padding" />
-        <div v-if="user.isAdmin" layout="row" layout-align="space-between center" class="lic_rooter">
+        <div
+          v-if="user.isAdmin"
+          layout="row"
+          layout-align="space-between center"
+          class="lic_rooter"
+        >
           <el-upload
             action=""
             :multiple="false"
@@ -56,7 +71,10 @@
 
           </el-upload>
 
-          <a class="md-primary pointer" @click="support">{{ $t('about.suport') }}</a>
+          <a
+            class="md-primary pointer"
+            @click="support"
+          >{{ $t('about.suport') }}</a>
 
         </div>
       </div>
diff --git a/frontend/src/views/system/authority/authConfig.vue b/frontend/src/views/system/authority/authConfig.vue
index a9ef04b3d0..fb1805a711 100644
--- a/frontend/src/views/system/authority/authConfig.vue
+++ b/frontend/src/views/system/authority/authConfig.vue
@@ -1,14 +1,38 @@
 <template>
   <de-container style="height: auto">
     <de-aside-container style="height: auto">
-      <el-button v-show="!showTargetSearchInput" class="de-icon" icon="el-icon-search" circle size="mini" @click="showTargetSearchWidget" />
-      <div v-show="showTargetSearchInput" class="de-input">
+      <el-button
+        v-show="!showTargetSearchInput"
+        class="de-icon"
+        icon="el-icon-search"
+        circle
+        size="mini"
+        @click="showTargetSearchWidget"
+      />
+      <div
+        v-show="showTargetSearchInput"
+        class="de-input"
+      >
         <el-input v-model="targetFilterText">
-          <el-button slot="append" icon="el-icon-close" @click="closeTargetSearchWidget" />
+          <el-button
+            slot="append"
+            icon="el-icon-close"
+            @click="closeTargetSearchWidget"
+          />
         </el-input>
       </div>
-      <el-tabs v-model="targetActiveName" :class="{'de-search-header': showTargetSearchInput}" @tab-click="handleClick">
-        <el-tab-pane v-for="(targetInfo, index) in targetInfoArray" :key="index" :lazy="true" :label="targetInfo.tabName" :name="targetInfo.authType">
+      <el-tabs
+        v-model="targetActiveName"
+        :class="{'de-search-header': showTargetSearchInput}"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane
+          v-for="(targetInfo, index) in targetInfoArray"
+          :key="index"
+          :lazy="true"
+          :label="targetInfo.tabName"
+          :name="targetInfo.authType"
+        >
           <lazy-tree
             v-if="targetActiveName===targetInfo.authType"
             :active-name="targetActiveName"
@@ -21,14 +45,38 @@
       </el-tabs>
     </de-aside-container>
     <de-main-container class="de-main-container-auth">
-      <el-button v-show="!showSourceSearchInput" class="de-icon" icon="el-icon-search" circle size="mini" @click="showSourceSearchWidget" />
-      <div v-show="showSourceSearchInput" class="de-input">
+      <el-button
+        v-show="!showSourceSearchInput"
+        class="de-icon"
+        icon="el-icon-search"
+        circle
+        size="mini"
+        @click="showSourceSearchWidget"
+      />
+      <div
+        v-show="showSourceSearchInput"
+        class="de-input"
+      >
         <el-input v-model="sourceFilterText">
-          <el-button slot="append" icon="el-icon-close" @click="closeSourceSearchWidget" />
+          <el-button
+            slot="append"
+            icon="el-icon-close"
+            @click="closeSourceSearchWidget"
+          />
         </el-input>
       </div>
-      <el-tabs v-model="sourceActiveName" :class="{'de-search-header': showSourceSearchInput}" @tab-click="handleClick">
-        <el-tab-pane v-for="(sourceInfo, index) in sourceInfoTabs" :key="index" :lazy="true" :label="sourceInfo.tabName" :name="sourceInfo.authType">
+      <el-tabs
+        v-model="sourceActiveName"
+        :class="{'de-search-header': showSourceSearchInput}"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane
+          v-for="(sourceInfo, index) in sourceInfoTabs"
+          :key="index"
+          :lazy="true"
+          :label="sourceInfo.tabName"
+          :name="sourceInfo.authType"
+        >
           <lazy-tree
             v-if="authCondition"
             :active-name="sourceActiveName"
diff --git a/frontend/src/views/system/authority/components/LazyTree.vue b/frontend/src/views/system/authority/components/LazyTree.vue
index 1d27a30628..0ad557b2d9 100644
--- a/frontend/src/views/system/authority/components/LazyTree.vue
+++ b/frontend/src/views/system/authority/components/LazyTree.vue
@@ -1,8 +1,18 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col v-loading="loading" class="tree-main">
-    <el-row v-if="showExtent" class="tree-head">
+  <el-col
+    v-loading="loading"
+    class="tree-main"
+  >
+    <el-row
+      v-if="showExtent"
+      class="tree-head"
+    >
       <span style="float: left;padding-left: 10px">{{ dataInfo.head }}</span>
-      <span v-for="auth in defaultAuthDetails" :key="auth.privilegeName" class="auth-span">
+      <span
+        v-for="auth in defaultAuthDetails"
+        :key="auth.privilegeName"
+        class="auth-span"
+      >
         {{ auth.privilegeName }}
       </span>
     </el-row>
@@ -17,24 +27,53 @@
         lazy
         @node-click="nodeClick"
       >
-        <span slot-scope="{ node, data }" class="custom-tree-node">
+        <span
+          slot-scope="{ data }"
+          class="custom-tree-node"
+        >
           <span>
-            <span style="margin-left: 6px" v-html="data.name" />
+            <span
+              style="margin-left: 6px"
+              v-html="data.name"
+            />
           </span>
-          <span v-if="showExtent" @click.stop>
+          <span
+            v-if="showExtent"
+            @click.stop
+          >
             <div v-if="authDetails[data.id]">
-              <span v-for="auth in authDetails[data.id]" :key="auth.privilegeType" class="auth-span">
+              <span
+                v-for="auth in authDetails[data.id]"
+                :key="auth.privilegeType"
+                class="auth-span"
+              >
                 <!-- 1-{{ auth.privilegeType }}-{{ auth.privilegeValue }}-->
-                <a href="javascript:;" @click="clickAuth(data.id,auth)">
-                  <svg-icon style="width: 22px;height: 22px" :icon-class="auth.privilegeValue===1?'lock_open':'lock_closed'" />
+                <a
+                  href="javascript:;"
+                  @click="clickAuth(data.id,auth)"
+                >
+                  <svg-icon
+                    style="width: 22px;height: 22px"
+                    :icon-class="auth.privilegeValue===1?'lock_open':'lock_closed'"
+                  />
                 </a>
               </span>
             </div>
             <div v-else>
-              <span v-for="auth in defaultAuthDetails" :key="auth.privilegeType" class="auth-span">
+              <span
+                v-for="auth in defaultAuthDetails"
+                :key="auth.privilegeType"
+                class="auth-span"
+              >
                 <!--2-{{ auth.privilegeType }}-{{ auth.privilegeValue }}-->
-                <a href="javascript:;" @click="clickAuth(data.id,auth)">
-                  <svg-icon style="width: 22px;height: 22px" :icon-class="auth.privilegeValue===1?'lock_open':'lock_closed'" />
+                <a
+                  href="javascript:;"
+                  @click="clickAuth(data.id,auth)"
+                >
+                  <svg-icon
+                    style="width: 22px;height: 22px"
+                    :icon-class="auth.privilegeValue===1?'lock_open':'lock_closed'"
+                  />
                 </a>
               </span>
             </div></span>
diff --git a/frontend/src/views/system/authority/index.vue b/frontend/src/views/system/authority/index.vue
index db488194e1..aedbe47be9 100644
--- a/frontend/src/views/system/authority/index.vue
+++ b/frontend/src/views/system/authority/index.vue
@@ -1,6 +1,9 @@
 <template>
   <de-main-container style="height: calc(100vh - 56px)">
-    <el-tabs v-model="authorityType" @tab-click="handleClick">
+    <el-tabs
+      v-model="authorityType"
+      @tab-click="handleClick"
+    >
       <el-tab-pane name="authConfig">
         <span slot="label">{{ $t('auth.authConfig') }}</span>
         <auth-config />
diff --git a/frontend/src/views/system/datasource/ApiAuthConfig.vue b/frontend/src/views/system/datasource/ApiAuthConfig.vue
index 54fdeb040d..15a69b7a70 100644
--- a/frontend/src/views/system/datasource/ApiAuthConfig.vue
+++ b/frontend/src/views/system/datasource/ApiAuthConfig.vue
@@ -1,8 +1,8 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <el-form
+    ref="authConfig"
     :model="authConfig"
     :rules="rule"
-    ref="authConfig"
     label-position="right"
   >
     <el-form-item
@@ -11,52 +11,50 @@
     >
       <el-select
         v-model="authConfig.verification"
-        @change="change"
         :placeholder="$t('datasource.verification_method')"
         filterable
         size="small"
+        @change="change"
       >
         <el-option
           v-for="item in options"
           :key="item.name"
           :label="item.name"
           :value="item.name"
-        >
-        </el-option>
+        />
       </el-select>
     </el-form-item>
     <el-row :gutter="24">
       <el-col :span="12">
         <el-form-item
-          :label="$t('datasource.username')"
-          prop="username"
           v-if="
             authConfig.verification != undefined &&
-            authConfig.verification != 'No Auth'
+              authConfig.verification != 'No Auth'
           "
+          :label="$t('datasource.username')"
+          prop="username"
         >
           <el-input
-            :placeholder="$t('datasource.username')"
             v-model="authConfig.username"
+            :placeholder="$t('datasource.username')"
             class="ms-http-input"
             size="small"
-          >
-          </el-input>
+          />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item
-          :label="$t('datasource.password')"
-          prop="password"
           v-if="
             authConfig.verification != undefined &&
-            authConfig.verification != 'No Auth'
+              authConfig.verification != 'No Auth'
           "
+          :label="$t('datasource.password')"
+          prop="password"
         >
           <dePwd
-           v-model="authConfig.password"
-          :placeholder="$t('datasource.password')"
-        />
+            v-model="authConfig.password"
+            :placeholder="$t('datasource.password')"
+          />
         </el-form-item>
       </el-col>
     </el-row>
@@ -69,12 +67,23 @@ export default {
   name: 'ApiAuthConfig',
   components: { dePwd },
   props: {
-    request: {},
+    request: {
+      type: Object,
+      default: () => {}
+    },
     encryptShow: {
       type: Boolean,
       default: true
     }
   },
+  data() {
+    return {
+      options: [{ name: 'No Auth' }, { name: 'Basic Auth' }],
+      activeName: 'verified',
+      rule: {},
+      authConfig: {}
+    }
+  },
   watch: {
     request() {
       this.initData()
@@ -83,14 +92,6 @@ export default {
   created() {
     this.initData()
   },
-  data() {
-    return {
-      options: [{ name: 'No Auth' }, { name: 'Basic Auth' }],
-      activeName: 'verified',
-      rule: {},
-      authConfig: {}
-    }
-  },
   methods: {
     change() {
       if (this.authConfig.verification === 'Basic Auth') {
diff --git a/frontend/src/views/system/datasource/ApiBody.vue b/frontend/src/views/system/datasource/ApiBody.vue
index 8cfce4db2f..a13d98a17f 100644
--- a/frontend/src/views/system/datasource/ApiBody.vue
+++ b/frontend/src/views/system/datasource/ApiBody.vue
@@ -1,81 +1,117 @@
 <template>
   <div>
-    <el-radio-group v-model="body.type" size="mini">
-      <el-radio :disabled="isReadOnly" :label="type.FORM_DATA" @change="modeChange">
+    <el-radio-group
+      v-model="body.type"
+      size="mini"
+    >
+      <el-radio
+        :disabled="isReadOnly"
+        :label="type.FORM_DATA"
+        @change="modeChange"
+      >
         {{ $t('datasource.body_form_data') }}
       </el-radio>
 
-      <el-radio :disabled="isReadOnly" :label="type.WWW_FORM" @change="modeChange">
+      <el-radio
+        :disabled="isReadOnly"
+        :label="type.WWW_FORM"
+        @change="modeChange"
+      >
         {{ $t('datasource.body_x_www_from_urlencoded') }}
       </el-radio>
 
-      <el-radio :disabled="isReadOnly" :label="type.JSON" @change="modeChange">
+      <el-radio
+        :disabled="isReadOnly"
+        :label="type.JSON"
+        @change="modeChange"
+      >
         {{ $t('datasource.body_json') }}
       </el-radio>
 
-      <el-radio :disabled="isReadOnly" :label="type.XML" @change="modeChange">
+      <el-radio
+        :disabled="isReadOnly"
+        :label="type.XML"
+        @change="modeChange"
+      >
         {{ $t('datasource.body_xml') }}
       </el-radio>
 
-      <el-radio :disabled="isReadOnly" :label="type.RAW" @change="modeChange">
+      <el-radio
+        :disabled="isReadOnly"
+        :label="type.RAW"
+        @change="modeChange"
+      >
         {{ $t('datasource.body_raw') }}
       </el-radio>
 
     </el-radio-group>
-    <div style="min-width: 1200px;" v-if="body.type == 'Form_Data' || body.type == 'WWW_FORM'">
+    <div
+      v-if="body.type == 'Form_Data' || body.type == 'WWW_FORM'"
+      style="min-width: 1200px;"
+    >
       <api-variable
         :with-mor-setting="true"
         :is-read-only="isReadOnly"
         :parameters="body.kvs"
-        :isShowEnable="isShowEnable"
-        type="body"/>
+        :is-show-enable="isShowEnable"
+        type="body"
+      />
     </div>
     <div v-if="body.type == 'JSON'">
       <code-edit
+        ref="codeEdit"
         :read-only="isReadOnly"
         :data.sync="body.raw"
         :modes="modes"
         :mode="'json'"
         height="400px"
-        ref="codeEdit"/>
+      />
     </div>
 
-    <div class="ms-body" v-if="body.type == 'XML'">
+    <div
+      v-if="body.type == 'XML'"
+      class="ms-body"
+    >
       <code-edit
+        ref="codeEdit"
         :read-only="isReadOnly"
         :data.sync="body.raw"
         :modes="modes"
         :mode="'text'"
-        ref="codeEdit"/>
+      />
     </div>
 
-    <div class="ms-body" v-if="body.type == 'Raw'">
+    <div
+      v-if="body.type == 'Raw'"
+      class="ms-body"
+    >
       <code-edit
+        ref="codeEdit"
         :read-only="isReadOnly"
         :data.sync="body.raw"
         :modes="modes"
-        ref="codeEdit"/>
+      />
     </div>
   </div>
 </template>
 
 <script>
-import ApiKeyValue from "./ApiKeyValue";
-import {BODY_TYPE, KeyValue} from "./ApiTestModel";
-import CodeEdit from "./CodeEdit";
-import ApiVariable from "./ApiVariable";
-import Convert from "./convert";
-
+import { BODY_TYPE, KeyValue } from './ApiTestModel'
+import CodeEdit from './CodeEdit'
+import ApiVariable from './ApiVariable'
+import Convert from './convert'
 
 export default {
-  name: "ApiBody",
+  name: 'ApiBody',
   components: {
     ApiVariable,
-    CodeEdit,
-    ApiKeyValue
+    CodeEdit
   },
   props: {
-    body: {},
+    body: {
+      type: Object,
+      default: () => {}
+    },
     headers: Array,
     isReadOnly: {
       type: Boolean,
@@ -90,211 +126,210 @@ export default {
     return {
       type: BODY_TYPE,
       modes: ['text', 'json', 'xml', 'html'],
-      jsonSchema: "JSON",
+      jsonSchema: 'JSON',
       codeEditActive: true,
       hasOwnProperty: Object.prototype.hasOwnProperty,
       propIsEnumerable: Object.prototype.propertyIsEnumerable
-    };
+    }
   },
 
   watch: {
     'body.typeChange'() {
-      this.reloadCodeEdit();
+      this.reloadCodeEdit()
     },
     'body.raw'() {
       if (this.body.format !== 'JSON-SCHEMA' && this.body.raw) {
         try {
-          const MsConvert = new Convert();
-          let data = MsConvert.format(JSON.parse(this.body.raw));
+          const MsConvert = new Convert()
+          const data = MsConvert.format(JSON.parse(this.body.raw))
           if (this.body.jsonSchema) {
-            this.body.jsonSchema = this.deepAssign(data);
+            this.body.jsonSchema = this.deepAssign(data)
           } else {
-            this.body.jsonSchema = data;
+            this.body.jsonSchema = data
           }
         } catch (ex) {
-          this.body.jsonSchema = "";
+          this.body.jsonSchema = ''
         }
       }
-    },
+    }
+  },
+  created() {
+    if (!this.body.type) {
+      this.body.type = BODY_TYPE.FORM_DATA
+    }
+    if (this.body.kvs) {
+      this.body.kvs.forEach(param => {
+        if (!param.type) {
+          param.type = 'text'
+        }
+      })
+    }
   },
   methods: {
     isObj(x) {
-      let type = typeof x;
-      return x !== null && (type === 'object' || type === 'function');
+      const type = typeof x
+      return x !== null && (type === 'object' || type === 'function')
     },
 
     toObject(val) {
       if (val === null || val === undefined) {
-        return;
+        return
       }
-      return Object(val);
+      return Object(val)
     },
 
     assignKey(to, from, key) {
-      let val = from[key];
+      const val = from[key]
       if (val === undefined || val === null) {
-        return;
+        return
       }
 
       if (!this.hasOwnProperty.call(to, key) || !this.isObj(val)) {
-        to[key] = val;
+        to[key] = val
       } else {
-        to[key] = this.assign(Object(to[key]), from[key]);
+        to[key] = this.assign(Object(to[key]), from[key])
       }
     },
 
     assign(to, from) {
       if (to === from) {
-        return to;
+        return to
       }
-      from = Object(from);
-      for (let key in from) {
+      from = Object(from)
+      for (const key in from) {
         if (this.hasOwnProperty.call(from, key)) {
-          this.assignKey(to, from, key);
+          this.assignKey(to, from, key)
         }
       }
 
       if (Object.getOwnPropertySymbols) {
-        let symbols = Object.getOwnPropertySymbols(from);
+        const symbols = Object.getOwnPropertySymbols(from)
 
         for (let i = 0; i < symbols.length; i++) {
           if (this.propIsEnumerable.call(from, symbols[i])) {
-            this.assignKey(to, from, symbols[i]);
+            this.assignKey(to, from, symbols[i])
           }
         }
       }
 
-      return to;
+      return to
     },
 
     deepAssign(target) {
-      target = this.toObject(target);
+      target = this.toObject(target)
       for (let s = 1; s < arguments.length; s++) {
-        this.assign(target, arguments[s]);
+        this.assign(target, arguments[s])
       }
-      return target;
+      return target
     },
     reloadCodeEdit() {
-      this.codeEditActive = false;
+      this.codeEditActive = false
       this.$nextTick(() => {
-        this.codeEditActive = true;
-      });
+        this.codeEditActive = true
+      })
     },
     formatChange() {
-      const MsConvert = new Convert();
+      const MsConvert = new Convert()
 
       if (this.body.format === 'JSON-SCHEMA') {
         if (this.body.raw && !this.body.jsonSchema) {
-          this.body.jsonSchema = MsConvert.format(JSON.parse(this.body.raw));
+          this.body.jsonSchema = MsConvert.format(JSON.parse(this.body.raw))
         }
       } else {
         if (this.body.jsonSchema) {
           MsConvert.schemaToJsonStr(this.body.jsonSchema, (result) => {
-            this.$set(this.body, 'raw', result);
-            this.reloadCodeEdit();
-          });
+            this.$set(this.body, 'raw', result)
+            this.reloadCodeEdit()
+          })
         }
       }
     },
     modeChange(mode) {
       switch (this.body.type) {
-        case "JSON":
-          this.setContentType("application/json");
-          break;
-        case "XML":
-          this.setContentType("text/xml");
-          break;
-        case "WWW_FORM":
-          this.setContentType("application/x-www-form-urlencoded");
-          break;
-        case "BINARY":
-          this.setContentType("application/octet-stream");
-          break;
+        case 'JSON':
+          this.setContentType('application/json')
+          break
+        case 'XML':
+          this.setContentType('text/xml')
+          break
+        case 'WWW_FORM':
+          this.setContentType('application/x-www-form-urlencoded')
+          break
+        case 'BINARY':
+          this.setContentType('application/octet-stream')
+          break
         default:
-          this.removeContentType();
-          break;
+          this.removeContentType()
+          break
       }
     },
     setContentType(value) {
-      let isType = false;
+      let isType = false
       this.headers.forEach(item => {
-        if (item.name === "Content-Type") {
-          item.value = value;
-          isType = true;
+        if (item.name === 'Content-Type') {
+          item.value = value
+          isType = true
         }
       })
       if (!isType) {
-        this.headers.unshift(new KeyValue({name: "Content-Type", value: value}));
-        this.$emit('headersChange');
+        this.headers.unshift(new KeyValue({ name: 'Content-Type', value: value }))
+        this.$emit('headersChange')
       }
     },
     removeContentType() {
-      for (let index in this.headers) {
-        if (this.headers[index].name === "Content-Type") {
-          this.headers.splice(index, 1);
-          this.$emit('headersChange');
-          return;
+      for (const index in this.headers) {
+        if (this.headers[index].name === 'Content-Type') {
+          this.headers.splice(index, 1)
+          this.$emit('headersChange')
+          return
         }
       }
     },
     batchAdd() {
-      this.$refs.batchAddParameter.open();
+      this.$refs.batchAddParameter.open()
     },
     format(array, obj) {
       if (array) {
-        let isAdd = true;
-        for (let i in array) {
-          let item = array[i];
+        let isAdd = true
+        for (const i in array) {
+          const item = array[i]
           if (item.name === obj.name) {
-            item.value = obj.value;
-            isAdd = false;
+            item.value = obj.value
+            isAdd = false
           }
         }
         if (isAdd) {
-          this.body.kvs.unshift(obj);
+          this.body.kvs.unshift(obj)
         }
       }
     },
     batchSave(data) {
       if (data) {
-        let params = data.split("\n");
-        let keyValues = [];
+        const params = data.split('\n')
+        const keyValues = []
         params.forEach(item => {
-          let line = [];
-          line[0] = item.substring(0, item.indexOf(":"));
-          line[1] = item.substring(item.indexOf(":") + 1, item.length);
-          let required = false;
+          const line = []
+          line[0] = item.substring(0, item.indexOf(':'))
+          line[1] = item.substring(item.indexOf(':') + 1, item.length)
+          const required = false
           keyValues.unshift(new KeyValue({
             name: line[0],
             required: required,
             value: line[1],
             description: line[2],
-            type: "text",
+            type: 'text',
             valid: false,
             file: false,
             encode: true,
             enable: true,
-            contentType: "text/plain"
-          }));
+            contentType: 'text/plain'
+          }))
         })
         keyValues.forEach(item => {
-          this.format(this.body.kvs, item);
+          this.format(this.body.kvs, item)
         })
       }
-    },
-  },
-  created() {
-    if (!this.body.type) {
-      this.body.type = BODY_TYPE.FORM_DATA;
     }
-    if (this.body.kvs) {
-      this.body.kvs.forEach(param => {
-        if (!param.type) {
-          param.type = 'text';
-        }
-      });
-    }
-
   }
 }
 </script>
diff --git a/frontend/src/views/system/datasource/ApiHttpRequestForm.vue b/frontend/src/views/system/datasource/ApiHttpRequestForm.vue
index 6f47410375..2938b467cc 100644
--- a/frontend/src/views/system/datasource/ApiHttpRequestForm.vue
+++ b/frontend/src/views/system/datasource/ApiHttpRequestForm.vue
@@ -4,30 +4,68 @@
       <el-col :span="spanCount">
         <!-- HTTP 请求参数 -->
         <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100%">
-          <el-tabs v-model="activeName" class="request-tabs">
+          <el-tabs
+            v-model="activeName"
+            class="request-tabs"
+          >
             <!-- 请求头-->
-            <el-tab-pane :label="$t('datasource.headers')" name="headers">
-              <el-tooltip class="item-tabs" effect="dark" :content="$t('datasource.headers')" placement="top-start" slot="label">
-              <span>{{ $t('datasource.headers') }}
-                <div class="el-step__icon is-text ms-api-col ms-header" v-if="headers.length>1">
-                  <div class="el-step__icon-inner">{{ headers.length - 1 }}</div>
-                </div>
-              </span>
+            <el-tab-pane
+              :label="$t('datasource.headers')"
+              name="headers"
+            >
+              <el-tooltip
+                slot="label"
+                class="item-tabs"
+                effect="dark"
+                :content="$t('datasource.headers')"
+                placement="top-start"
+              >
+                <span>{{ $t('datasource.headers') }}
+                  <div
+                    v-if="headers.length>1"
+                    class="el-step__icon is-text ms-api-col ms-header"
+                  >
+                    <div class="el-step__icon-inner">{{ headers.length - 1 }}</div>
+                  </div>
+                </span>
               </el-tooltip>
-              <api-key-value :show-desc="true"  :suggestions="headerSuggestions" :items="headers"/>
+              <api-key-value
+                :show-desc="true"
+                :suggestions="headerSuggestions"
+                :items="headers"
+              />
             </el-tab-pane>
 
             <!--请求体-->
-            <el-tab-pane v-if="isBodyShow" :label="$t('datasource.request_body')" name="body" style="overflow: auto">
-              <api-body @headersChange="reloadBody" :isShowEnable="isShowEnable" :headers="headers" :body="request.body"/>
+            <el-tab-pane
+              v-if="isBodyShow"
+              :label="$t('datasource.request_body')"
+              name="body"
+              style="overflow: auto"
+            >
+              <api-body
+                :is-show-enable="isShowEnable"
+                :headers="headers"
+                :body="request.body"
+                @headersChange="reloadBody"
+              />
             </el-tab-pane>
 
             <!-- 认证配置 -->
-            <el-tab-pane :label="$t('datasource.auth_config')" name="authConfig">
-              <el-tooltip class="item-tabs" effect="dark" :content="$t('datasource.auth_config_info')" placement="top-start" slot="label">
+            <el-tab-pane
+              :label="$t('datasource.auth_config')"
+              name="authConfig"
+            >
+              <el-tooltip
+                slot="label"
+                class="item-tabs"
+                effect="dark"
+                :content="$t('datasource.auth_config_info')"
+                placement="top-start"
+              >
                 <span>{{ $t('datasource.auth_config') }}</span>
               </el-tooltip>
-              <api-auth-config :request="request"/>
+              <api-auth-config :request="request" />
             </el-tab-pane>
 
           </el-tabs>
@@ -38,14 +76,14 @@
 </template>
 
 <script>
-import ApiKeyValue from "@/views/system/datasource/ApiKeyValue";
-import ApiBody from "@/views/system/datasource/ApiBody";
-import ApiAuthConfig from "@/views/system/datasource/ApiAuthConfig";
-import {Body, KeyValue} from "@/views/system/datasource/ApiTestModel";
-import Convert from "@/views/system/datasource/convert";
+import ApiKeyValue from '@/views/system/datasource/ApiKeyValue'
+import ApiBody from '@/views/system/datasource/ApiBody'
+import ApiAuthConfig from '@/views/system/datasource/ApiAuthConfig'
+import { Body, KeyValue } from '@/views/system/datasource/ApiTestModel'
+import Convert from '@/views/system/datasource/convert'
 
 export default {
-  name: "ApiHttpRequestForm",
+  name: 'ApiHttpRequestForm',
   components: {
     ApiAuthConfig,
     ApiBody,
@@ -53,59 +91,61 @@ export default {
   },
   props: {
     method: String,
-    request: {},
-    response: {},
+    request: {
+      type: Object,
+      default: () => {}
+    },
     definitionTest: {
       type: Boolean,
       default() {
-        return false;
+        return false
       }
     },
     showScript: {
       type: Boolean,
-      default: true,
+      default: true
     },
     headers: {
       type: Array,
       default() {
-        return [];
+        return []
       }
     },
     referenced: {
       type: Boolean,
-      default: false,
+      default: false
     },
     isShowEnable: {
       type: Boolean,
-      default: false,
+      default: false
     },
     jsonPathList: Array,
     isReadOnly: {
       type: Boolean,
       default: false
     },
-    type: String,
+    type: String
   },
   data() {
-    let validateURL = (rule, value, callback) => {
+    const validateURL = (rule, value, callback) => {
       try {
-        new URL(this.addProtocol(this.request.url));
+        new URL(this.addProtocol(this.request.url))
       } catch (e) {
-        callback(this.$t('api_test.request.url_invalid'));
+        callback(this.$t('api_test.request.url_invalid'))
       }
-    };
+    }
     return {
       activeName: 'headers',
       rules: {
         name: [
-          {max: 300, message: this.$t('commons.input_limit', [1, 300]), trigger: 'blur'}
+          { max: 300, message: this.$t('commons.input_limit', [1, 300]), trigger: 'blur' }
         ],
         url: [
-          {max: 500, required: true, message: this.$t('commons.input_limit', [1, 500]), trigger: 'blur'},
-          {validator: validateURL, trigger: 'blur'}
+          { max: 500, required: true, message: this.$t('commons.input_limit', [1, 500]), trigger: 'blur' },
+          { validator: validateURL, trigger: 'blur' }
         ],
         path: [
-          {max: 500, message: this.$t('commons.input_limit', [0, 500]), trigger: 'blur'},
+          { max: 500, message: this.$t('commons.input_limit', [0, 500]), trigger: 'blur' }
         ]
       },
       spanCount: 21,
@@ -115,97 +155,96 @@ export default {
       hasOwnProperty: Object.prototype.hasOwnProperty,
       propIsEnumerable: Object.prototype.propertyIsEnumerable,
       headerSuggestions: [
-        {value: 'Accept'},
-        {value: 'Accept-Charset'},
-        {value: 'Accept-Language'},
-        {value: 'Accept-Datetime'},
-        {value: 'Authorization'},
-        {value: 'Cache-Control'},
-        {value: 'Connection'},
-        {value: 'Cookie'},
-        {value: 'Content-Length'},
-        {value: 'Content-MD5'},
-        {value: 'Content-Type'},
-        {value: 'Date'},
-        {value: 'Expect'},
-        {value: 'From'},
-        {value: 'Host'},
-        {value: 'If-Match'},
-        {value: 'If-Modified-Since'},
-        {value: 'If-None-Match'},
-        {value: 'If-Range'},
-        {value: 'If-Unmodified-Since'},
-        {value: 'Max-Forwards'},
-        {value: 'Origin'},
-        {value: 'Pragma'},
-        {value: 'Proxy-Authorization'},
-        {value: 'Range'},
-        {value: 'Referer'},
-        {value: 'TE'},
-        {value: 'User-Agent'},
-        {value: 'Upgrade'},
-        {value: 'Via'},
-        {value: 'Warning'}
+        { value: 'Accept' },
+        { value: 'Accept-Charset' },
+        { value: 'Accept-Language' },
+        { value: 'Accept-Datetime' },
+        { value: 'Authorization' },
+        { value: 'Cache-Control' },
+        { value: 'Connection' },
+        { value: 'Cookie' },
+        { value: 'Content-Length' },
+        { value: 'Content-MD5' },
+        { value: 'Content-Type' },
+        { value: 'Date' },
+        { value: 'Expect' },
+        { value: 'From' },
+        { value: 'Host' },
+        { value: 'If-Match' },
+        { value: 'If-Modified-Since' },
+        { value: 'If-None-Match' },
+        { value: 'If-Range' },
+        { value: 'If-Unmodified-Since' },
+        { value: 'Max-Forwards' },
+        { value: 'Origin' },
+        { value: 'Pragma' },
+        { value: 'Proxy-Authorization' },
+        { value: 'Range' },
+        { value: 'Referer' },
+        { value: 'TE' },
+        { value: 'User-Agent' },
+        { value: 'Upgrade' },
+        { value: 'Via' },
+        { value: 'Warning' }
       ]
 
     }
   },
-  created() {
-    if (!this.referenced && this.showScript) {
-      this.spanCount = 21;
-    } else {
-      this.spanCount = 24;
-    }
-    this.init();
-  },
   watch: {
     'request.changeId'() {
       if (this.request.headers && this.request.headers.length > 1) {
-        this.activeName = 'headers';
+        this.activeName = 'headers'
       }
       if (this.request.rest && this.request.rest.length > 1) {
-        this.activeName = 'rest';
+        this.activeName = 'rest'
       }
       if (this.request.arguments && this.request.arguments.length > 1) {
-        this.activeName = 'parameters';
+        this.activeName = 'parameters'
       }
-      if(this.request.body) {
-        this.request.body.typeChange = this.request.changeId;
+      if (this.request.body) {
+        this.request.body.typeChange = this.request.changeId
       }
-      this.reload();
+      this.reload()
     }
   },
+  created() {
+    if (!this.referenced && this.showScript) {
+      this.spanCount = 21
+    } else {
+      this.spanCount = 24
+    }
+    this.init()
+  },
   methods: {
     generate() {
       if (this.request.body && (this.request.body.jsonSchema || this.request.body.raw)) {
         if (!this.request.body.jsonSchema) {
-          const MsConvert = new Convert();
-          this.request.body.jsonSchema = MsConvert.format(JSON.parse(this.request.body.raw));
+          const MsConvert = new Convert()
+          this.request.body.jsonSchema = MsConvert.format(JSON.parse(this.request.body.raw))
         }
         this.$post('/api/test/data/generator', this.request.body.jsonSchema, response => {
           if (response.data) {
             if (this.request.body.format !== 'JSON-SCHEMA') {
-              this.request.body.raw = response.data;
+              this.request.body.raw = response.data
             } else {
-              const MsConvert = new Convert();
-              let data = MsConvert.format(JSON.parse(response.data));
-              this.request.body.jsonSchema = this.deepAssign(this.request.body.jsonSchema, data);
+              const MsConvert = new Convert()
+              const data = MsConvert.format(JSON.parse(response.data))
+              this.request.body.jsonSchema = this.deepAssign(this.request.body.jsonSchema, data)
             }
-            this.reloadBody();
+            this.reloadBody()
           }
-        });
+        })
       }
     },
     remove(row) {
-      let index = this.request.hashTree.indexOf(row);
-      this.request.hashTree.splice(index, 1);
-      this.reload();
+      const index = this.request.hashTree.indexOf(row)
+      this.request.hashTree.splice(index, 1)
+      this.reload()
     },
     copyRow(row) {
-      let obj = JSON.parse(JSON.stringify(row));
-      obj.id = getUUID();
-      this.request.hashTree.push(obj);
-      this.reload();
+      const obj = JSON.parse(JSON.stringify(row))
+      this.request.hashTree.push(obj)
+      this.reload()
     },
     reload() {
       this.isReloadData = true
@@ -215,153 +254,153 @@ export default {
     },
     init() {
       if (Object.prototype.toString.call(this.request).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
-        this.request = JSON.parse(this.request);
+        this.request = JSON.parse(this.request)
       }
       if (!this.request.body) {
-        this.request.body = new Body();
+        this.request.body = new Body()
       }
       if (!this.request.body.kvs) {
-        this.request.body.kvs = [];
+        this.request.body.kvs = []
       }
       if (!this.request.rest) {
-        this.request.rest = [];
+        this.request.rest = []
       }
       if (!this.request.arguments) {
-        this.request.arguments = [];
+        this.request.arguments = []
       }
     },
     reloadBody() {
       // 解决修改请求头后 body 显示错位
-      this.isBodyShow = false;
+      this.isBodyShow = false
       this.$nextTick(() => {
-        this.isBodyShow = true;
-      });
+        this.isBodyShow = true
+      })
     },
     batchAdd() {
-      this.$refs.batchAddParameter.open();
+      this.$refs.batchAddParameter.open()
     },
     format(array, obj) {
       if (array) {
-        let isAdd = true;
-        for (let i in array) {
-          let item = array[i];
+        let isAdd = true
+        for (const i in array) {
+          const item = array[i]
           if (item.name === obj.name) {
-            item.value = obj.value;
-            isAdd = false;
+            item.value = obj.value
+            isAdd = false
           }
         }
         if (isAdd) {
           switch (this.activeName) {
-            case "parameters":
-              this.request.arguments.unshift(obj);
-              break;
-            case "rest":
-              this.request.rest.unshift(obj);
-              break;
-            case "headers":
-              this.request.headers.unshift(obj);
-              break;
+            case 'parameters':
+              this.request.arguments.unshift(obj)
+              break
+            case 'rest':
+              this.request.rest.unshift(obj)
+              break
+            case 'headers':
+              this.request.headers.unshift(obj)
+              break
             default:
-              break;
+              break
           }
         }
       }
     },
     batchSave(data) {
       if (data) {
-        let params = data.split("\n");
-        let keyValues = [];
+        const params = data.split('\n')
+        const keyValues = []
         params.forEach(item => {
-          let line = item.split(/：|:/);
-          let required = false;
+          const line = item.split(/：|:/)
+          const required = false
           keyValues.unshift(new KeyValue({
             name: line[0],
             required: !required,
             value: line[1],
             description: line[2],
-            type: "text",
+            type: 'text',
             valid: false,
             file: false,
             encode: true,
             enable: true,
-            contentType: "text/plain"
-          }));
+            contentType: 'text/plain'
+          }))
         })
 
         keyValues.forEach(item => {
           switch (this.activeName) {
-            case "parameters":
-              this.format(this.request.arguments, item);
-              break;
-            case "rest":
-              this.format(this.request.rest, item);
-              break;
-            case "headers":
-              this.format(this.request.headers, item);
-              break;
+            case 'parameters':
+              this.format(this.request.arguments, item)
+              break
+            case 'rest':
+              this.format(this.request.rest, item)
+              break
+            case 'headers':
+              this.format(this.request.headers, item)
+              break
             default:
-              break;
+              break
           }
         })
       }
     },
 
     isObj(x) {
-      let type = typeof x;
-      return x !== null && (type === 'object' || type === 'function');
+      const type = typeof x
+      return x !== null && (type === 'object' || type === 'function')
     },
 
     toObject(val) {
       if (val === null || val === undefined) {
-        return;
+        return
       }
 
-      return Object(val);
+      return Object(val)
     },
 
     assignKey(to, from, key) {
-      let val = from[key];
+      const val = from[key]
 
       if (val === undefined || val === null) {
-        return;
+        return
       }
       if (!this.hasOwnProperty.call(to, key) || !this.isObj(val)) {
-        to[key] = val;
+        to[key] = val
       } else {
-        to[key] = this.assign(Object(to[key]), from[key]);
+        to[key] = this.assign(Object(to[key]), from[key])
       }
     },
 
     assign(to, from) {
       if (to === from) {
-        return to;
+        return to
       }
-      from = Object(from);
-      for (let key in from) {
+      from = Object(from)
+      for (const key in from) {
         if (this.hasOwnProperty.call(from, key)) {
-          this.assignKey(to, from, key);
+          this.assignKey(to, from, key)
         }
       }
 
       if (Object.getOwnPropertySymbols) {
-        let symbols = Object.getOwnPropertySymbols(from);
+        const symbols = Object.getOwnPropertySymbols(from)
 
         for (let i = 0; i < symbols.length; i++) {
           if (this.propIsEnumerable.call(from, symbols[i])) {
-            this.assignKey(to, from, symbols[i]);
+            this.assignKey(to, from, symbols[i])
           }
         }
       }
 
-      return to;
+      return to
     },
 
     deepAssign(target) {
-      target = this.toObject(target);
+      target = this.toObject(target)
       for (let s = 1; s < arguments.length; s++) {
-        this.assign(target, arguments[s]);
+        this.assign(target, arguments[s])
       }
-      return target;
+      return target
     }
   }
 }
diff --git a/frontend/src/views/system/datasource/ApiKeyValue.vue b/frontend/src/views/system/datasource/ApiKeyValue.vue
index a3251b2258..0733a095e0 100644
--- a/frontend/src/views/system/datasource/ApiKeyValue.vue
+++ b/frontend/src/views/system/datasource/ApiKeyValue.vue
@@ -1,36 +1,104 @@
 <template>
   <div v-loading="loading">
-    <div class="kv-row item" v-for="(item, index) in items" :key="index">
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="kv-row item"
+    >
 
-      <el-row type="flex" :gutter="20" justify="space-between" align="middle">
-        <span style="margin-left: 10px"></span>
-        <i class="el-icon-top" style="cursor:pointer" @click="moveTop(index)"/>
-        <i class="el-icon-bottom" style="cursor:pointer;" @click="moveBottom(index)"/>
+      <el-row
+        type="flex"
+        :gutter="20"
+        justify="space-between"
+        align="middle"
+      >
+        <span style="margin-left: 10px" />
+        <i
+          class="el-icon-top"
+          style="cursor:pointer"
+          @click="moveTop(index)"
+        />
+        <i
+          class="el-icon-bottom"
+          style="cursor:pointer;"
+          @click="moveBottom(index)"
+        />
 
-        <el-col class="item" v-if="unShowSelect===false">
-          <el-input v-if="!suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200"
-                    @change="change"
-                    :placeholder="keyText" show-word-limit/>
-          <el-autocomplete :disabled="isReadOnly" :maxlength="400" v-if="suggestions" v-model="item.name" size="small"
-                           :fetch-suggestions="querySearch" @change="change" :placeholder="keyText"
-                           show-word-limit/>
+        <el-col
+          v-if="unShowSelect===false"
+          class="item"
+        >
+          <el-input
+            v-if="!suggestions"
+            v-model="item.name"
+            :disabled="isReadOnly"
+            size="small"
+            maxlength="200"
+            :placeholder="keyText"
+            show-word-limit
+            @change="change"
+          />
+          <el-autocomplete
+            v-if="suggestions"
+            v-model="item.name"
+            :disabled="isReadOnly"
+            :maxlength="400"
+            size="small"
+            :fetch-suggestions="querySearch"
+            :placeholder="keyText"
+            show-word-limit
+            @change="change"
+          />
         </el-col>
 
-        <el-col class="item" v-if="unShowSelect===true">
-          <el-input v-if="suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200" :placeholder="keyText"  show-word-limit/>
+        <el-col
+          v-if="unShowSelect===true"
+          class="item"
+        >
+          <el-input
+            v-if="suggestions"
+            v-model="item.name"
+            :disabled="isReadOnly"
+            size="small"
+            maxlength="200"
+            :placeholder="keyText"
+            show-word-limit
+          />
         </el-col>
 
         <el-col class="item">
-          <el-input v-if="!needMock" :disabled="isReadOnly" v-model="item.value" size="small" @change="change"
-                    :placeholder="unShowSelect?$t('commons.description'):valueText" show-word-limit/>
+          <el-input
+            v-if="!needMock"
+            v-model="item.value"
+            :disabled="isReadOnly"
+            size="small"
+            :placeholder="unShowSelect?$t('commons.description'):valueText"
+            show-word-limit
+            @change="change"
+          />
         </el-col>
 
-        <el-col class="item" v-if="showDesc">
-          <el-input v-model="item.description" size="small" maxlength="200" :placeholder="$t('commons.description')" show-word-limit></el-input>
+        <el-col
+          v-if="showDesc"
+          class="item"
+        >
+          <el-input
+            v-model="item.description"
+            size="small"
+            maxlength="200"
+            :placeholder="$t('commons.description')"
+            show-word-limit
+          />
         </el-col>
 
         <el-col class="item kv-delete">
-          <el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)" :disabled="isDisable(index)"/>
+          <el-button
+            size="mini"
+            class="el-icon-delete-solid"
+            circle
+            :disabled="isDisable(index)"
+            @click="remove(index)"
+          />
         </el-col>
       </el-row>
     </div>
@@ -39,155 +107,149 @@
 </template>
 
 <script>
-  import {KeyValue} from "./ApiTestModel";
-  import Vue from 'vue';
+import { KeyValue } from './ApiTestModel'
+import Vue from 'vue'
 
-  export default {
-    name: "ApiKeyValue",
-    components: {},
-    props: {
-      keyPlaceholder: String,
-      valuePlaceholder: String,
-      isShowEnable: {
-        type: Boolean,
-        default: false
-      },
-      unShowSelect:{
-        type: Boolean,
-        default: false
-      },
-      description: String,
-      items: Array,
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
-      suggestions: Array,
-      needMock: {
-        type: Boolean,
-        default: false
-      },
-      showDesc: Boolean,
-      appendToBody: {
-        type: Boolean,
-        default() {
-          return false;
-        }
-      },
+export default {
+  name: 'ApiKeyValue',
+  components: {},
+  props: {
+    keyPlaceholder: String,
+    valuePlaceholder: String,
+    isShowEnable: {
+      type: Boolean,
+      default: false
     },
-    data() {
-      return {
-        keyValues: [],
-        loading: false,
-        currentItem: {},
-        isSelectAll: true
-      }
+    unShowSelect: {
+      type: Boolean,
+      default: false
     },
-    computed: {
-      keyText() {
-        return this.keyPlaceholder || this.$t("datasource.key");
-      },
-      valueText() {
-        return this.valuePlaceholder || this.$t("datasource.value");
-      }
+    description: String,
+    items: Array,
+    isReadOnly: {
+      type: Boolean,
+      default: false
     },
-    watch: {
-      isSelectAll: function (to, from) {
-        if (from == false && to == true) {
-          this.selectAll();
-        } else if (from == true && to == false) {
-          this.invertSelect();
-        }
-      }
+    suggestions: Array,
+    needMock: {
+      type: Boolean,
+      default: false
     },
-    methods: {
-      advanced(item) {
-        this.currentItem = item;
-        this.$refs.variableAdvance.open();
-      },
-      funcFilter(queryString) {
-        return (func) => {
-          return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
-        };
-      },
-      moveBottom(index) {
-        if (this.items.length < 2 || index === this.items.length - 2) {
-          return;
-        }
-        let thisRow = this.items[index];
-        let nextRow = this.items[index + 1];
-        Vue.set(this.items, index + 1, thisRow);
-        Vue.set(this.items, index, nextRow)
-      },
-      moveTop(index) {
-        if (index === 0) {
-          return;
-        }
-        let thisRow = this.items[index];
-        let lastRow = this.items[index - 1];
-        Vue.set(this.items, index - 1, thisRow);
-        Vue.set(this.items, index, lastRow)
-
-      },
-      reload() {
-        this.loading = true
-        this.$nextTick(() => {
-          this.loading = false
-        })
-      },
-      remove: function (index) {
-        // 移除整行输入控件及内容
-        this.items.splice(index, 1);
-        this.$emit('change', this.items);
-      },
-      change: function () {
-        let isNeedCreate = true;
-        let removeIndex = -1;
-        this.items.forEach((item, index) => {
-          if (!item.name && !item.value) {
-            // 多余的空行
-            if (index !== this.items.length - 1) {
-              removeIndex = index;
-            }
-            // 没有空行，需要创建空行
-            isNeedCreate = false;
-          }
-        });
-        if (isNeedCreate) {
-          this.items.push(new KeyValue({enable: true}));
-        }
-        this.$emit('change', this.items);
-      },
-      isDisable: function (index) {
-        return this.items.length - 1 === index;
-      },
-      querySearch(queryString, cb) {
-        let suggestions = this.suggestions;
-        let results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
-        cb(results);
-      },
-      createFilter(queryString) {
-        return (restaurant) => {
-          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      selectAll() {
-        this.items.forEach(item => {
-          item.enable = true;
-        });
-      },
-      invertSelect() {
-        this.items.forEach(item => {
-          item.enable = false;
-        });
-      },
-    },
-    created() {
-      if (this.items.length === 0 || this.items[this.items.length - 1].name) {
-        this.items.push(new KeyValue({enable: true, name: '', value: ''}));
+    showDesc: Boolean,
+    appendToBody: {
+      type: Boolean,
+      default() {
+        return false
       }
     }
+  },
+  data() {
+    return {
+      keyValues: [],
+      loading: false,
+      currentItem: {},
+      isSelectAll: true
+    }
+  },
+  computed: {
+    keyText() {
+      return this.keyPlaceholder || this.$t('datasource.key')
+    },
+    valueText() {
+      return this.valuePlaceholder || this.$t('datasource.value')
+    }
+  },
+  watch: {
+    isSelectAll: function(to, from) {
+      if (!from && to) {
+        this.selectAll()
+      } else if (from && !to) {
+        this.invertSelect()
+      }
+    }
+  },
+  created() {
+    if (this.items.length === 0 || this.items[this.items.length - 1].name) {
+      this.items.push(new KeyValue({ enable: true, name: '', value: '' }))
+    }
+  },
+  methods: {
+    advanced(item) {
+      this.currentItem = item
+      this.$refs.variableAdvance.open()
+    },
+    funcFilter(queryString) {
+      return (func) => {
+        return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
+      }
+    },
+    moveBottom(index) {
+      if (this.items.length < 2 || index === this.items.length - 2) {
+        return
+      }
+      const thisRow = this.items[index]
+      const nextRow = this.items[index + 1]
+      Vue.set(this.items, index + 1, thisRow)
+      Vue.set(this.items, index, nextRow)
+    },
+    moveTop(index) {
+      if (index === 0) {
+        return
+      }
+      const thisRow = this.items[index]
+      const lastRow = this.items[index - 1]
+      Vue.set(this.items, index - 1, thisRow)
+      Vue.set(this.items, index, lastRow)
+    },
+    reload() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    remove: function(index) {
+      // 移除整行输入控件及内容
+      this.items.splice(index, 1)
+      this.$emit('change', this.items)
+    },
+    change: function() {
+      let isNeedCreate = true
+      this.items.forEach((item, index) => {
+        if (!item.name && !item.value) {
+          // 没有空行，需要创建空行
+          isNeedCreate = false
+        }
+      })
+      if (isNeedCreate) {
+        this.items.push(new KeyValue({ enable: true }))
+      }
+      this.$emit('change', this.items)
+    },
+    isDisable: function(index) {
+      return this.items.length - 1 === index
+    },
+    querySearch(queryString, cb) {
+      const suggestions = this.suggestions
+      const results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions
+      cb(results)
+    },
+    createFilter(queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    selectAll() {
+      this.items.forEach(item => {
+        item.enable = true
+      })
+    },
+    invertSelect() {
+      this.items.forEach(item => {
+        item.enable = false
+      })
+    }
   }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/system/datasource/ApiTestModel.js b/frontend/src/views/system/datasource/ApiTestModel.js
index dd5c98f2d5..c634ad701b 100644
--- a/frontend/src/views/system/datasource/ApiTestModel.js
+++ b/frontend/src/views/system/datasource/ApiTestModel.js
@@ -2,7 +2,7 @@ export class BaseConfig {
   set(options, notUndefined) {
     options = this.initOptions(options)
     for (const name in options) {
-      if (options.hasOwnProperty(name)) {
+      if (Object.prototype.hasOwnProperty.call(options, name)) {
         if (!(this[name] instanceof Array)) {
           if (notUndefined === true) {
             this[name] = options[name] === undefined ? this[name] : options[name]
@@ -18,7 +18,7 @@ export class BaseConfig {
     options = this.initOptions(options)
     if (types) {
       for (const name in types) {
-        if (types.hasOwnProperty(name) && options.hasOwnProperty(name)) {
+        if (Object.prototype.hasOwnProperty.call(types, name) && Object.prototype.hasOwnProperty.call(options, name)) {
           options[name].forEach(o => {
             this[name].push(new types[name](o))
           })
@@ -88,15 +88,6 @@ export class Body extends BaseConfig {
   }
 }
 
-export const createComponent = function(name) {
-  const component = MODELS[name]
-  if (component) {
-    return new component()
-  } else {
-    return new UnsupportedComponent()
-  }
-}
-
 export const BODY_TYPE = {
   KV: 'KeyValue',
   FORM_DATA: 'Form_Data',
@@ -125,24 +116,17 @@ export class Scenario extends BaseConfig {
     this.set(options)
     this.sets({
       variables: KeyValue,
-      headers: KeyValue,
-      requests: RequestFactory,
-      databaseConfigs: DatabaseConfig
+      headers: KeyValue
     }, options)
   }
 
   initOptions(options = {}) {
-    options.id = options.id || uuid()
-    options.requests = options.requests || [new RequestFactory()]
     options.databaseConfigs = options.databaseConfigs || []
-    options.dubboConfig = new DubboConfig(options.dubboConfig)
-    options.tcpConfig = new TCPConfig(options.tcpConfig)
     return options
   }
 
   clone() {
     const clone = new Scenario(this)
-    clone.id = uuid()
     return clone
   }
 
diff --git a/frontend/src/views/system/datasource/ApiVariable.vue b/frontend/src/views/system/datasource/ApiVariable.vue
index 3e0f8a531b..8679e3bec8 100644
--- a/frontend/src/views/system/datasource/ApiVariable.vue
+++ b/frontend/src/views/system/datasource/ApiVariable.vue
@@ -1,54 +1,116 @@
 <template>
   <div style="margin-bottom: 20px">
-    <span class="kv-description" v-if="description">
+    <span
+      v-if="description"
+      class="kv-description"
+    >
       {{ description }}
     </span>
-    <div class="item kv-row" v-for="(item, index) in parameters" :key="index">
-      <el-row type="flex" :gutter="20" justify="space-between" align="middle">
-        <span style="margin-left: 10px"></span>
-        <i class="el-icon-top" style="cursor:pointer" @click="moveTop(index)"/>
-        <i class="el-icon-bottom" style="cursor:pointer;" @click="moveBottom(index)"/>
+    <div
+      v-for="(item, index) in parameters"
+      :key="index"
+      class="item kv-row"
+    >
+      <el-row
+        type="flex"
+        :gutter="20"
+        justify="space-between"
+        align="middle"
+      >
+        <span style="margin-left: 10px" />
+        <i
+          class="el-icon-top"
+          style="cursor:pointer"
+          @click="moveTop(index)"
+        />
+        <i
+          class="el-icon-bottom"
+          style="cursor:pointer;"
+          @click="moveBottom(index)"
+        />
 
         <el-col class="item">
-          <el-input v-if="!suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200"
-                    @change="change" :placeholder="keyText" show-word-limit>
-            <template v-slot:prepend>
-              <el-select v-if="type === 'body'" :disabled="isReadOnly" class="kv-type" v-model="item.type"
-                         @change="typeChange(item)">
-                <el-option value="text"/>
-                <el-option value="json"/>
+          <el-input
+            v-if="!suggestions"
+            v-model="item.name"
+            :disabled="isReadOnly"
+            size="small"
+            maxlength="200"
+            :placeholder="keyText"
+            show-word-limit
+            @change="change"
+          >
+            <template #prepend>
+              <el-select
+                v-if="type === 'body'"
+                v-model="item.type"
+                :disabled="isReadOnly"
+                class="kv-type"
+                @change="typeChange(item)"
+              >
+                <el-option value="text" />
+                <el-option value="json" />
               </el-select>
             </template>
           </el-input>
 
-          <el-autocomplete :disabled="isReadOnly" v-if="suggestions" v-model="item.name" size="small"
-                           :fetch-suggestions="querySearch" @change="change" :placeholder="keyText" show-word-limit/>
+          <el-autocomplete
+            v-if="suggestions"
+            v-model="item.name"
+            :disabled="isReadOnly"
+            size="small"
+            :fetch-suggestions="querySearch"
+            :placeholder="keyText"
+            show-word-limit
+            @change="change"
+          />
 
         </el-col>
 
-        <el-col class="item" v-if="isActive && item.type !== 'file'">
-          <el-input :disabled="isReadOnly"
-                    size="small"
-                    class="input-with-autocomplete"
-                    v-model="item.value"
-                    :placeholder="valueText"
-                    value-key="name"
-                    highlight-first-item
-                    @select="change">
-          </el-input>
+        <el-col
+          v-if="isActive && item.type !== 'file'"
+          class="item"
+        >
+          <el-input
+            v-model="item.value"
+            :disabled="isReadOnly"
+            size="small"
+            class="input-with-autocomplete"
+            :placeholder="valueText"
+            value-key="name"
+            highlight-first-item
+            @select="change"
+          />
         </el-col>
 
         <el-col class="item">
-          <el-input v-model="item.description" size="small" maxlength="200"
-                    :placeholder="$t('commons.description')" show-word-limit>
-          </el-input>
-          <el-autocomplete :disabled="isReadOnly" v-if="suggestions" v-model="item.name" size="small"
-                           :fetch-suggestions="querySearch" @change="change" :placeholder="keyText" show-word-limit/>
+          <el-input
+            v-model="item.description"
+            size="small"
+            maxlength="200"
+            :placeholder="$t('commons.description')"
+            show-word-limit
+          />
+          <el-autocomplete
+            v-if="suggestions"
+            v-model="item.name"
+            :disabled="isReadOnly"
+            size="small"
+            :fetch-suggestions="querySearch"
+            :placeholder="keyText"
+            show-word-limit
+            @change="change"
+          />
         </el-col>
 
         <el-col class="item kv-delete">
-          <el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"
-                     :disabled="isDisable(index) || isReadOnly"/>
+          <el-button
+            size="mini"
+            class="el-icon-delete-solid"
+            circle
+            :disabled="isDisable(index) || isReadOnly"
+            @click="remove(index)"
+          />
         </el-col>
 
       </el-row>
@@ -57,13 +119,13 @@
 </template>
 
 <script>
-import {KeyValue, Scenario} from "./ApiTestModel";
+import { KeyValue, Scenario } from './ApiTestModel'
 import { uuid } from 'vue-uuid'
 
-import Vue from 'vue';
+import Vue from 'vue'
 
 export default {
-  name: "ApiVariable",
+  name: 'ApiVariable',
   components: {},
   props: {
     keyPlaceholder: String,
@@ -80,7 +142,7 @@ export default {
     appendDialogToBody: {
       type: Boolean,
       default() {
-        return false;
+        return false
       }
     },
     isReadOnly: {
@@ -98,131 +160,24 @@ export default {
     return {
       currentItem: null,
       isSelectAll: true,
-      isActive: true,
+      isActive: true
     }
   },
-  watch: {
-    isSelectAll: function (to, from) {
-      if (from == false && to == true) {
-        this.selectAll();
-      } else if (from == true && to == false) {
-        this.invertSelect();
-      }
-    },
-  },
   computed: {
     keyText() {
-      return this.keyPlaceholder || this.$t("datasource.key");
+      return this.keyPlaceholder || this.$t('datasource.key')
     },
     valueText() {
-      return this.valuePlaceholder || this.$t("datasource.value");
+      return this.valuePlaceholder || this.$t('datasource.value')
     }
   },
-  methods: {
-    moveBottom(index) {
-      if (this.parameters.length < 2 || index === this.parameters.length - 2) {
-        return;
+  watch: {
+    isSelectAll: function(to, from) {
+      if (!from && to) {
+        this.selectAll()
+      } else if (from && !to) {
+        this.invertSelect()
       }
-      let thisRow = this.parameters[index];
-      let nextRow = this.parameters[index + 1];
-      Vue.set(this.parameters, index + 1, thisRow);
-      Vue.set(this.parameters, index, nextRow)
-    },
-    moveTop(index) {
-      if (index === 0) {
-        return;
-      }
-      let thisRow = this.parameters[index];
-      let lastRow = this.parameters[index - 1];
-      Vue.set(this.parameters, index - 1, thisRow);
-      Vue.set(this.parameters, index, lastRow)
-
-    },
-    remove: function (index) {
-      // 移除整行输入控件及内容
-      this.parameters.splice(index, 1);
-      this.$emit('change', this.parameters);
-    },
-    change: function () {
-      let isNeedCreate = true;
-      let removeIndex = -1;
-      this.parameters.forEach((item, index) => {
-        if (!item.name && !item.value) {
-          // 多余的空行
-          if (index !== this.parameters.length - 1) {
-            removeIndex = index;
-          }
-          // 没有空行，需要创建空行
-          isNeedCreate = false;
-        }
-      });
-      if (isNeedCreate) {
-        this.parameters.push(new KeyValue({
-          type: 'text',
-          enable: true,
-          uuid: uuid.v1(),
-          contentType: 'text/plain'
-        }));
-      }
-      this.$emit('change', this.parameters);
-    },
-    isDisable: function (index) {
-      return this.parameters.length - 1 == index;
-    },
-    querySearch(queryString, cb) {
-      let suggestions = this.suggestions;
-      let results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
-      cb(results);
-    },
-    createFilter(queryString) {
-      return (restaurant) => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-      };
-    },
-    funcFilter(queryString) {
-      return (func) => {
-        return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
-      };
-    },
-    advanced(item) {
-      if (item.type === 'json') {
-        this.$refs.variableJson.open(item);
-        this.currentItem = item;
-      } else {
-        this.$refs.variableAdvance.open();
-        this.currentItem = item;
-      }
-
-    },
-    typeChange(item) {
-      if (item.type === 'file') {
-        item.contentType = 'application/octet-stream';
-      } else if (item.type === 'text') {
-        item.contentType = 'text/plain';
-      } else {
-        item.contentType = 'application/json'
-      }
-      this.reload();
-    },
-    selectAll() {
-      this.parameters.forEach(item => {
-        item.enable = true;
-      });
-    },
-    invertSelect() {
-      this.parameters.forEach(item => {
-        item.enable = false;
-      });
-    },
-    reload() {
-      this.isActive = false;
-      this.$nextTick(() => {
-        this.isActive = true;
-      });
-    },
-    callback(item) {
-      this.currentItem.value = item;
-      this.currentItem = null;
     }
   },
   created() {
@@ -233,7 +188,107 @@ export default {
         required: true,
         uuid: uuid.v1,
         contentType: 'text/plain'
-      }));
+      }))
+    }
+  },
+  methods: {
+    moveBottom(index) {
+      if (this.parameters.length < 2 || index === this.parameters.length - 2) {
+        return
+      }
+      const thisRow = this.parameters[index]
+      const nextRow = this.parameters[index + 1]
+      Vue.set(this.parameters, index + 1, thisRow)
+      Vue.set(this.parameters, index, nextRow)
+    },
+    moveTop(index) {
+      if (index === 0) {
+        return
+      }
+      const thisRow = this.parameters[index]
+      const lastRow = this.parameters[index - 1]
+      Vue.set(this.parameters, index - 1, thisRow)
+      Vue.set(this.parameters, index, lastRow)
+    },
+    remove: function(index) {
+      // 移除整行输入控件及内容
+      this.parameters.splice(index, 1)
+      this.$emit('change', this.parameters)
+    },
+    change: function() {
+      let isNeedCreate = true
+      this.parameters.forEach((item, index) => {
+        if (!item.name && !item.value) {
+          // 没有空行，需要创建空行
+          isNeedCreate = false
+        }
+      })
+      if (isNeedCreate) {
+        this.parameters.push(new KeyValue({
+          type: 'text',
+          enable: true,
+          uuid: uuid.v1(),
+          contentType: 'text/plain'
+        }))
+      }
+      this.$emit('change', this.parameters)
+    },
+    isDisable: function(index) {
+      return this.parameters.length - 1 === index
+    },
+    querySearch(queryString, cb) {
+      const suggestions = this.suggestions
+      const results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions
+      cb(results)
+    },
+    createFilter(queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    funcFilter(queryString) {
+      return (func) => {
+        return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
+      }
+    },
+    advanced(item) {
+      if (item.type === 'json') {
+        this.$refs.variableJson.open(item)
+        this.currentItem = item
+      } else {
+        this.$refs.variableAdvance.open()
+        this.currentItem = item
+      }
+    },
+    typeChange(item) {
+      if (item.type === 'file') {
+        item.contentType = 'application/octet-stream'
+      } else if (item.type === 'text') {
+        item.contentType = 'text/plain'
+      } else {
+        item.contentType = 'application/json'
+      }
+      this.reload()
+    },
+    selectAll() {
+      this.parameters.forEach(item => {
+        item.enable = true
+      })
+    },
+    invertSelect() {
+      this.parameters.forEach(item => {
+        item.enable = false
+      })
+    },
+    reload() {
+      this.isActive = false
+      this.$nextTick(() => {
+        this.isActive = true
+      })
+    },
+    callback(item) {
+      this.currentItem.value = item
+      this.currentItem = null
     }
   }
 }
diff --git a/frontend/src/views/system/datasource/CodeEdit.vue b/frontend/src/views/system/datasource/CodeEdit.vue
index da46d707ed..00f0cc4004 100644
--- a/frontend/src/views/system/datasource/CodeEdit.vue
+++ b/frontend/src/views/system/datasource/CodeEdit.vue
@@ -1,106 +1,112 @@
 <template>
-    <editor v-model="formatData" :lang="mode" @init="editorInit" :theme="theme" :height="height"/>
+  <editor
+    v-model="formatData"
+    :lang="mode"
+    :theme="theme"
+    :height="height"
+    @init="editorInit"
+  />
 </template>
 
 <script>
-  import {formatJson, formatXml} from "./format-utils";
+import { formatJson, formatXml } from './format-utils'
 
-    export default {
-      name: "CodeEdit",
-      components: { editor: require('vue2-ace-editor')},
-      data() {
-        return {
-          formatData: ''
-        }
-      },
-      props: {
-        height: [String, Number],
-        data: {
-          type: String
-        },
-        theme: {
-          type: String,
-          default() {
-            return 'chrome'
-          }
-        },
-        init: {
-          type: Function
-        },
-        enableFormat: {
-          type: Boolean,
-          default() {
-            return true;
-          }
-        },
-        readOnly: {
-          type: Boolean,
-          default() {
-            return false;
-          }
-        },
-        mode: {
-          type: String,
-          default() {
-            return 'text';
-          }
-        },
-        modes: {
-          type: Array,
-          default() {
-            return ['text', 'json', 'xml'];
-          }
-        }
-      },
-      mounted() {
-        if (!this.data) {
-          this.formatData = "";
-        }
-        this.format();
-      },
-      watch: {
-        formatData() {
-          this.$emit('update:data', this.formatData);
-        },
-        mode() {
-          this.format();
-        }
-      },
-      methods: {
-        editorInit: function (editor) {
-          require('brace/ext/language_tools') //language extension prerequsite...
-          this.modes.forEach(mode => {
-            require('brace/mode/' + mode); //language
-          });
-          require('brace/theme/' + this.theme)
-          require('brace/snippets/javascript') //snippet
-          if (this.readOnly) {
-            editor.setReadOnly(true);
-          }
-          if (this.init) {
-            this.init(editor);
-          }
-        },
-        format() {
-          if (this.enableFormat) {
-            if (this.data) {
-              switch (this.mode) {
-                case 'json':
-                  this.formatData = formatJson(this.data);
-                  break;
-                case 'xml':
-                  this.formatData = formatXml(this.data);
-                  break;
-                default:
-                  this.formatData = this.data;
-              }
-            }
-          } else {
-            this.formatData = this.data;
-          }
-        }
+export default {
+  name: 'CodeEdit',
+  components: { editor: require('vue2-ace-editor') },
+  props: {
+    height: [String, Number],
+    data: {
+      type: String
+    },
+    theme: {
+      type: String,
+      default() {
+        return 'chrome'
+      }
+    },
+    init: {
+      type: Function
+    },
+    enableFormat: {
+      type: Boolean,
+      default() {
+        return true
+      }
+    },
+    readOnly: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    mode: {
+      type: String,
+      default() {
+        return 'text'
+      }
+    },
+    modes: {
+      type: Array,
+      default() {
+        return ['text', 'json', 'xml']
       }
     }
+  },
+  data() {
+    return {
+      formatData: ''
+    }
+  },
+  watch: {
+    formatData() {
+      this.$emit('update:data', this.formatData)
+    },
+    mode() {
+      this.format()
+    }
+  },
+  mounted() {
+    if (!this.data) {
+      this.formatData = ''
+    }
+    this.format()
+  },
+  methods: {
+    editorInit: function(editor) {
+      require('brace/ext/language_tools') // language extension prerequsite...
+      this.modes.forEach(mode => {
+        require('brace/mode/' + mode) // language
+      })
+      require('brace/theme/' + this.theme)
+      require('brace/snippets/javascript') // snippet
+      if (this.readOnly) {
+        editor.setReadOnly(true)
+      }
+      if (this.init) {
+        this.init(editor)
+      }
+    },
+    format() {
+      if (this.enableFormat) {
+        if (this.data) {
+          switch (this.mode) {
+            case 'json':
+              this.formatData = formatJson(this.data)
+              break
+            case 'xml':
+              this.formatData = formatXml(this.data)
+              break
+            default:
+              this.formatData = this.data
+          }
+        }
+      } else {
+        this.formatData = this.data
+      }
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/system/datasource/DataHome.vue b/frontend/src/views/system/datasource/DataHome.vue
index ce020ea00a..84c8a9fe96 100644
--- a/frontend/src/views/system/datasource/DataHome.vue
+++ b/frontend/src/views/system/datasource/DataHome.vue
@@ -1,6 +1,9 @@
 <template>
   <el-col style="height: 100%;">
-    <el-row style="height: 100%;" class="custom-position">
+    <el-row
+      style="height: 100%;"
+      class="custom-position"
+    >
       {{ $t('datasource.please_select_left') }}
     </el-row>
   </el-col>
diff --git a/frontend/src/views/system/datasource/DialogFooter.vue b/frontend/src/views/system/datasource/DialogFooter.vue
index 5195b4f6be..98583368bd 100644
--- a/frontend/src/views/system/datasource/DialogFooter.vue
+++ b/frontend/src/views/system/datasource/DialogFooter.vue
@@ -1,41 +1,54 @@
 <template>
 
   <div class="dialog-footer">
-    <el-button @click="cancel" :size="btnSize">{{$t('commons.cancel')}}</el-button>
-    <el-button type="primary" @click="confirm" @keydown.enter.native.prevent :size="btnSize">{{$t('commons.confirm')}}</el-button>
-    <el-button type="primary" v-if="isShow" @click="saveAsEdit" @keydown.enter.native.prevent>{{title}}</el-button>
+    <el-button
+      :size="btnSize"
+      @click="cancel"
+    >{{ $t('commons.cancel') }}</el-button>
+    <el-button
+      type="primary"
+      :size="btnSize"
+      @click="confirm"
+      @keydown.enter.native.prevent
+    >{{ $t('commons.confirm') }}</el-button>
+    <el-button
+      v-if="isShow"
+      type="primary"
+      @click="saveAsEdit"
+      @keydown.enter.native.prevent
+    >{{ title }}</el-button>
   </div>
 
 </template>
 
 <script>
-  export default {
-    name: "DialogFooter",
-    props: {
-      isShow: {
-        type: Boolean,
-        default: false,
-      },
-      title:String,
-      btnSize: {
-        type: String,
-        default() {
-          return '';
-        }
-      }
+export default {
+  name: 'DialogFooter',
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false
     },
-    methods: {
-      cancel() {
-        this.$emit("cancel");
-      },
-      confirm() {
-        this.$emit("confirm");
-      },
-      saveAsEdit() {
-        this.$emit("saveAsEdit");
+    title: String,
+    btnSize: {
+      type: String,
+      default() {
+        return ''
       }
     }
+  },
+  methods: {
+    cancel() {
+      this.$emit('cancel')
+    },
+    confirm() {
+      this.$emit('confirm')
+    },
+    saveAsEdit() {
+      this.$emit('saveAsEdit')
+    }
   }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/system/datasource/DriverForm.vue b/frontend/src/views/system/datasource/DriverForm.vue
index 966bc0c03e..22f1e2dd19 100644
--- a/frontend/src/views/system/datasource/DriverForm.vue
+++ b/frontend/src/views/system/datasource/DriverForm.vue
@@ -1,13 +1,29 @@
 <template>
   <layout-content>
-    <template v-slot:header>
-      <el-icon name="back" class="back-button" @click.native="backToList" />
+    <template #header>
+      <el-icon
+        name="back"
+        class="back-button"
+        @click.native="backToList"
+      />
       {{
         params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('driver.show_info') : $t('driver.modify')
       }}
-      <el-button v-if="canEdit" size="mini" style="float: right;"type="primary" @click="save">{{ $t('commons.save') }}
+      <el-button
+        v-if="canEdit"
+        size="mini"
+        style="float: right;"
+        type="primary"
+        @click="save"
+      >{{ $t('commons.save') }}
       </el-button>
-      <el-button v-else size="mini" style="float: right;" type="primary" @click="changeEdit">{{ $t('commons.edit') }}
+      <el-button
+        v-else
+        size="mini"
+        style="float: right;"
+        type="primary"
+        @click="changeEdit"
+      >{{ $t('commons.edit') }}
       </el-button>
 
     </template>
@@ -22,13 +38,25 @@
         label-width="180px"
         label-position="right"
       >
-        <el-form-item :label="$t('commons.name')" prop="name">
-          <el-input v-model="driverForm.name" autocomplete="off" />
+        <el-form-item
+          :label="$t('commons.name')"
+          prop="name"
+        >
+          <el-input
+            v-model="driverForm.name"
+            autocomplete="off"
+          />
         </el-form-item>
         <el-form-item :label="$t('commons.description')">
-          <el-input v-model="driverForm.desc" autocomplete="off" />
+          <el-input
+            v-model="driverForm.desc"
+            autocomplete="off"
+          />
         </el-form-item>
-        <el-form-item :label="$t('datasource.type')" prop="type">
+        <el-form-item
+          :label="$t('datasource.type')"
+          prop="type"
+        >
           <el-select
             v-model="driverForm.type"
             :placeholder="$t('datasource.please_choose_type')"
@@ -46,24 +74,14 @@
           </el-select>
         </el-form-item>
 
-        <!--        <el-form-item :label="$t('driver.driver')" >-->
-        <!--          <el-select-->
-        <!--            v-model="driverForm.driverClass"-->
-        <!--            :placeholder="$t('driver.please_choose_driver')"-->
-        <!--            class="select-width"-->
-        <!--            filterable-->
-        <!--          >-->
-        <!--            <el-option-->
-        <!--              v-for="item in driverClassList"-->
-        <!--              :key="item"-->
-        <!--              :label="item"-->
-        <!--              :value="item"-->
-        <!--            />-->
-        <!--          </el-select>-->
-        <!--        </el-form-item>-->
-
-        <el-form-item :label="$t('driver.driver')" prop="driverClass">
-          <el-input v-model="driverForm.driverClass" autocomplete="off" />
+        <el-form-item
+          :label="$t('driver.driver')"
+          prop="driverClass"
+        >
+          <el-input
+            v-model="driverForm.driverClass"
+            autocomplete="off"
+          />
         </el-form-item>
 
       </el-form>
@@ -82,15 +100,32 @@
         :headers="headers"
         style="float: right;"
       >
-        <el-button size="mini" type="primary" style="float: right;" :disabled="uploading">
-          <span v-if="!uploading" style="font-size: 12px;">{{ $t('dataset.upload_file') }}</span>
-          <span v-if="uploading" style="font-size: 12px;"><i class="el-icon-loading" /> {{ $t('dataset.uploading') }}</span>
+        <el-button
+          size="mini"
+          type="primary"
+          style="float: right;"
+          :disabled="uploading"
+        >
+          <span
+            v-if="!uploading"
+            style="font-size: 12px;"
+          >{{ $t('dataset.upload_file') }}</span>
+          <span
+            v-if="uploading"
+            style="font-size: 12px;"
+          ><i class="el-icon-loading" /> {{ $t('dataset.uploading') }}</span>
         </el-button>
       </el-upload>
       <fu-table :data="driverFiles">
-        <el-table-column prop="fileName" :label="$t('driver.file_name')" />
-        <!--      <el-table-column prop="version" :label="$t('driver.version')"/>-->
-        <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
+        <el-table-column
+          prop="fileName"
+          :label="$t('driver.file_name')"
+        />
+        <fu-table-operations
+          :buttons="buttons"
+          :label="$t('commons.operating')"
+          fix
+        />
       </fu-table>
 
     </div>
@@ -100,11 +135,7 @@
 <script>
 import LayoutContent from '@/components/business/LayoutContent'
 import i18n from '@/lang/index'
-import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
-import DsConfiguration from '@/views/system/datasource/DsConfiguration'
-import PluginCom from '@/views/system/plugin/PluginCom'
 import { deleteDriverFile, listDriverDetails, updateDriver } from '@/api/system/datasource'
-import { delUser } from '@/api/system/user'
 import { $alert } from '@/utils/message'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
@@ -114,10 +145,7 @@ const token = getToken()
 export default {
   name: 'DriverForm',
   components: {
-    DsConfiguration,
-    LayoutContent,
-    ApiHttpRequestForm,
-    PluginCom
+    LayoutContent
   },
   props: {
     params: {
@@ -175,9 +203,6 @@ export default {
     this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
     this.listDriverDetails()
   },
-  mounted() {
-  },
-
   methods: {
     beforeUpload(file) {
       this.uploading = true
@@ -247,21 +272,12 @@ export default {
       this.$emit('switch-component', {})
     },
     refreshType(form) {
-      this.$emit('refresh-type', DsForm)
-    },
-    handleClick(tab, event) {}
+      this.$emit('refresh-type', form)
+    }
   }
 }
 </script>
 <style scoped>
-/* .el-input {
-  width: 300px;
-}
-
-.el-select {
-  width: 300px;
-} */
-
 .ms-http-input {
   width: 500px;
   margin-top: 5px;
diff --git a/frontend/src/views/system/datasource/DriverFormDetail.vue b/frontend/src/views/system/datasource/DriverFormDetail.vue
index b32816a4c7..e76959f5f9 100644
--- a/frontend/src/views/system/datasource/DriverFormDetail.vue
+++ b/frontend/src/views/system/datasource/DriverFormDetail.vue
@@ -19,10 +19,13 @@
       label-width="180px"
       label-position="right"
     >
-      <el-form-item :label="$t('driver.driver')" prop="driverClass">
+      <el-form-item
+        :label="$t('driver.driver')"
+        prop="driverClass"
+      >
         <el-input
-          style="width: 600px"
           v-model="driverForm.driverClass"
+          style="width: 600px"
           autocomplete="off"
         />
       </el-form-item>
@@ -53,8 +56,15 @@
       {{ $t('datasource.can_be_uploaded') }}
     </p>
     <div class="jar-cont">
-      <div v-for="jar in driverFiles" :key="jar.id" class="jar-info">
-        <img :src="imgUrl" alt="" />
+      <div
+        v-for="jar in driverFiles"
+        :key="jar.id"
+        class="jar-info"
+      >
+        <img
+          :src="imgUrl"
+          alt=""
+        >
         <p class="name-descript">
           <span class="jar-name">
             {{ jar.fileName }}
@@ -69,19 +79,23 @@
           :content="$t('commons.delete')"
           placement="top"
         >
-          <i @click="deleteDriverFile(jar)" class="el-icon-delete"></i>
+          <i
+            class="el-icon-delete"
+            @click="deleteDriverFile(jar)"
+          />
         </el-tooltip>
       </div>
     </div>
     <div class="de-foot">
-      <deBtn type="primary" @click="save">{{ $t('commons.save') }}</deBtn>
+      <deBtn
+        type="primary"
+        @click="save"
+      >{{ $t('commons.save') }}</deBtn>
     </div>
   </div>
 </template>
 <script>
 import i18n from '@/lang/index'
-import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
-import DsConfiguration from '@/views/system/datasource/DsConfiguration'
 import {
   deleteDriverFile,
   listDriverDetails,
@@ -95,10 +109,6 @@ const token = getToken()
 
 export default {
   name: 'DriverForm',
-  components: {
-    DsConfiguration,
-    ApiHttpRequestForm
-  },
   props: {
     params: {
       type: Object,
@@ -271,9 +281,8 @@ export default {
       this.$emit('switch-component', {})
     },
     refreshType(form) {
-      this.$emit('refresh-type', DsForm)
-    },
-    handleClick(tab, event) {}
+      this.$emit('refresh-type', form)
+    }
   }
 }
 </script>
diff --git a/frontend/src/views/system/datasource/DsAppForm.vue b/frontend/src/views/system/datasource/DsAppForm.vue
index 49dc9ff906..87b16230c0 100644
--- a/frontend/src/views/system/datasource/DsAppForm.vue
+++ b/frontend/src/views/system/datasource/DsAppForm.vue
@@ -1,9 +1,16 @@
 <template>
   <layout-content :header="headName">
-    <template v-if="!optType" v-slot:header>
-      <el-icon name="back" class="back-button" @click.native="backToList" />
+    <template
+      v-if="!optType"
+      #header
+    >
+      <el-icon
+        name="back"
+        class="back-button"
+        @click.native="backToList"
+      />
       {{
-        params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('datasource.show_info') : formType == 'add' ? $t('datasource.create') : $t('datasource.modify')
+        params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('datasource.show_info') : formType === 'add' ? $t('datasource.create') : $t('datasource.modify')
       }}
     </template>
     <template v-if="optType==='appApply'">
@@ -18,22 +25,31 @@
         label-width="180px"
         label-position="right"
       >
-        <el-form-item :label="'仪表板位置'" prop="panelId">
-            <treeselect
-              v-model="attachForm.panelId"
-              :clearable="false"
-              :options="panelGroupList"
-              :normalizer="normalizer"
-              :placeholder="$t('chart.select_group')"
-              :no-children-text="$t('commons.treeselect.no_children_text')"
-              :no-options-text="$t('commons.treeselect.no_options_text')"
-              :no-results-text="$t('commons.treeselect.no_results_text')"
-            />
+        <el-form-item
+          :label="'仪表板位置'"
+          prop="panelId"
+        >
+          <treeselect
+            v-model="attachForm.panelId"
+            :clearable="false"
+            :options="panelGroupList"
+            :normalizer="normalizer"
+            :placeholder="$t('chart.select_group')"
+            :no-children-text="$t('commons.treeselect.no_children_text')"
+            :no-options-text="$t('commons.treeselect.no_options_text')"
+            :no-results-text="$t('commons.treeselect.no_results_text')"
+          />
         </el-form-item>
-        <el-form-item :label="'仪表板名称'" prop="panelName">
+        <el-form-item
+          :label="'仪表板名称'"
+          prop="panelName"
+        >
           <el-input v-model="attachForm.panelName" />
         </el-form-item>
-        <el-form-item :label="'数据集位置'" prop="desc">
+        <el-form-item
+          :label="'数据集位置'"
+          prop="desc"
+        >
           <treeselect
             v-model="attachForm.datasetGroupId"
             :clearable="false"
@@ -45,7 +61,10 @@
             :no-results-text="$t('commons.treeselect.no_results_text')"
           />
         </el-form-item>
-        <el-form-item :label="'数据集分组名称'" prop="datasetGroupName">
+        <el-form-item
+          :label="'数据集分组名称'"
+          prop="datasetGroupName"
+        >
           <el-input v-model="attachForm.datasetGroupName" />
         </el-form-item>
       </el-form>
@@ -64,19 +83,34 @@
         label-width="180px"
         label-position="right"
       >
-        <el-form-item :label="$t('commons.name')" prop="name">
-          <el-input v-model="form.name" autocomplete="off" />
+        <el-form-item
+          :label="$t('commons.name')"
+          prop="name"
+        >
+          <el-input
+            v-model="form.name"
+            autocomplete="off"
+          />
         </el-form-item>
-        <el-form-item :label="$t('commons.description')" prop="desc">
-          <el-input v-model="form.desc" autocomplete="off" />
+        <el-form-item
+          :label="$t('commons.description')"
+          prop="desc"
+        >
+          <el-input
+            v-model="form.desc"
+            autocomplete="off"
+          />
         </el-form-item>
-        <el-form-item :label="$t('datasource.type')" prop="type">
+        <el-form-item
+          :label="$t('datasource.type')"
+          prop="type"
+        >
           <el-select
             v-model="form.type"
             :placeholder="$t('datasource.please_choose_type')"
             class="select-width"
             style="width: 100%"
-            :disabled="formType=='modify' || (formType==='add' && params && !!params.type)"
+            :disabled="formType==='modify' || (formType==='add' && params && !!params.type)"
             filterable
             @change="changeType()"
           >
@@ -89,7 +123,10 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item v-if="datasourceType.isJdbc" :label="$t('driver.driver')">
+        <el-form-item
+          v-if="datasourceType.isJdbc"
+          :label="$t('driver.driver')"
+        >
           <el-select
             v-model="form.configuration.customDriver"
             :placeholder="$t('driver.please_choose_driver')"
@@ -107,12 +144,27 @@
           </el-select>
         </el-form-item>
 
-        <ds-configuration v-if="!datasourceType.isPlugin" ref="dsConfig" :datasource-type="datasourceType" :form="form" :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit" />
-        <plugin-com v-if="datasourceType.isPlugin" ref="pluginDsConfig" :component-name="datasourceType.type" :obj="{form, disabled }" />
+        <ds-configuration
+          v-if="!datasourceType.isPlugin"
+          ref="dsConfig"
+          :datasource-type="datasourceType"
+          :form="form"
+          :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit"
+        />
+        <plugin-com
+          v-if="datasourceType.isPlugin"
+          ref="pluginDsConfig"
+          :component-name="datasourceType.type"
+          :obj="{form, disabled }"
+        />
 
       </el-form>
 
-      <div v-if="canEdit" slot="footer" class="dialog-footer">
+      <div
+        v-if="canEdit"
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button
           v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
           @click="validaDatasource"
@@ -125,7 +177,11 @@
         >{{ $t('commons.save') }}
         </el-button>
       </div>
-      <div v-else slot="footer" class="dialog-footer">
+      <div
+        v-else
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button
           v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
           @click="validaDatasource"
@@ -155,10 +211,9 @@ import {
 } from '@/api/system/datasource'
 import { $confirm } from '@/utils/message'
 import i18n from '@/lang/index'
-import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
 import DsConfiguration from '@/views/system/datasource/DsConfiguration'
 import PluginCom from '@/views/system/plugin/PluginCom'
-import {groupTree,appApply} from "@/api/panel/panel";
+import { groupTree, appApply } from '@/api/panel/panel'
 import { dsGroupTree } from '@/api/dataset/dataset'
 import { deepCopy } from '@/components/canvas/utils/utils'
 export default {
@@ -166,7 +221,6 @@ export default {
   components: {
     DsConfiguration,
     LayoutContent,
-    ApiHttpRequestForm,
     PluginCom
   },
   props: {
@@ -186,7 +240,7 @@ export default {
       type: Object,
       default: null
     },
-    optType:{
+    optType: {
       type: String,
       default: null
     }
@@ -200,11 +254,11 @@ export default {
       },
       panelGroupList: [],
       datasetGroupList: [],
-      attachForm:{
-        appTemplateId:'',
-        panelId:'',
-        panelName:'',
-        datasetGroupId:'0',
+      attachForm: {
+        appTemplateId: '',
+        panelId: '',
+        panelName: '',
+        datasetGroupId: '0',
         datasetGroupName: ''
       },
       form: {
@@ -340,11 +394,11 @@ export default {
   },
   computed: {
     headName() {
-      if(this.optType==='appApply'){
+      if (this.optType === 'appApply') {
         return ''
-      }else if(this.formType==='add'){
+      } else if (this.formType === 'add') {
         return this.$t('datasource.create')
-      }else{
+      } else {
         return this.$t('datasource.modify')
       }
     }
@@ -364,7 +418,7 @@ export default {
     this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
   },
   mounted() {
-    if(this.optType==='appApply'){
+    if (this.optType === 'appApply') {
       this.getPanelGroupTree()
       this.getDatasetGroupTree()
       this.attachForm.appTemplateId = this.attachParams.appTemplateId
@@ -380,7 +434,7 @@ export default {
       }
     },
     getDatasetGroupTree() {
-      dsGroupTree({nodeType: 'group',}).then(res => {
+      dsGroupTree({ nodeType: 'group' }).then(res => {
         this.datasetGroupList = [{
           id: '0',
           name: this.$t('dataset.dataset_group'),
@@ -395,8 +449,8 @@ export default {
     getPanelGroupTree() {
       groupTree({ nodeType: 'folder' }).then(res => {
         this.panelGroupList = res.data
-        if(this.panelGroupList && this.panelGroupList.length>0){
-          this.attachForm.panelId =this.panelGroupList[0].id
+        if (this.panelGroupList && this.panelGroupList.length > 0) {
+          this.attachForm.panelId = this.panelGroupList[0].id
         }
       })
     },
@@ -458,7 +512,7 @@ export default {
       }
       let repeat = false
       const repeatDsName = []
-      if(!this.datasourceType.isPlugin){
+      if (!this.datasourceType.isPlugin) {
         this.tData.forEach(item => {
           if (item.id === this.form.type) {
             item.children.forEach(child => {
@@ -478,9 +532,8 @@ export default {
                 case 'ds_doris':
                 case 'ck':
                 case 'mongo':
-                case 'mariadb':
                 case 'impala':
-                  if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port) {
+                  if (configuration.host === this.form.configuration.host && configuration.dataBase === this.form.configuration.dataBase && configuration.port === this.form.configuration.port) {
                     repeat = true
                     repeatDsName.push(child.name)
                   }
@@ -490,13 +543,13 @@ export default {
                 case 'redshift':
                 case 'oracle':
                 case 'db2':
-                  if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port && configuration.schema == this.form.configuration.schema) {
+                  if (configuration.host === this.form.configuration.host && configuration.dataBase === this.form.configuration.dataBase && configuration.port === this.form.configuration.port && configuration.schema === this.form.configuration.schema) {
                     repeatDsName.push(child.name)
                     repeat = true
                   }
                   break
                 case 'es':
-                  if (configuration.url == this.form.configuration.url) {
+                  if (configuration.url === this.form.configuration.url) {
                     repeatDsName.push(child.name)
                     repeat = true
                   }
@@ -507,33 +560,33 @@ export default {
             })
           }
         })
-      }else {
-       if( this.datasourceType.isJdbc){
-         this.tData.forEach(item => {
-           if (item.id === this.form.type) {
-             item.children.forEach(child => {
-               if (this.formType === 'modify' && child.id === this.form.id) {
-                 return
-               }
-               const configuration = JSON.parse(child.configuration)
-               if (!configuration) {
-                 return
-               }
-               if(configuration.schema != null){
-                 if (configuration.schema == this.form.configuration.schema  && configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port) {
-                   repeat = true
-                   repeatDsName.push(child.name)
-                 }
-               }else {
-                 if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port) {
-                   repeat = true
-                   repeatDsName.push(child.name)
-                 }
-               }
-             })
-           }
-         })
-       }
+      } else {
+        if (this.datasourceType.isJdbc) {
+          this.tData.forEach(item => {
+            if (item.id === this.form.type) {
+              item.children.forEach(child => {
+                if (this.formType === 'modify' && child.id === this.form.id) {
+                  return
+                }
+                const configuration = JSON.parse(child.configuration)
+                if (!configuration) {
+                  return
+                }
+                if (configuration.schema !== null) {
+                  if (configuration.schema === this.form.configuration.schema && configuration.host === this.form.configuration.host && configuration.dataBase === this.form.configuration.dataBase && configuration.port === this.form.configuration.port) {
+                    repeat = true
+                    repeatDsName.push(child.name)
+                  }
+                } else {
+                  if (configuration.host === this.form.configuration.host && configuration.dataBase === this.form.configuration.dataBase && configuration.port === this.form.configuration.port) {
+                    repeat = true
+                    repeatDsName.push(child.name)
+                  }
+                }
+              })
+            }
+          })
+        }
       }
       let status = null
       if (this.datasourceType.isPlugin) {
@@ -546,12 +599,12 @@ export default {
       if (!status) {
         return
       }
-      if(this.optType==='appApply'){
+      if (this.optType === 'appApply') {
         this.$refs.attachParamsForm.validate(valid => {
-            if (!valid) {
-              return false
-            }
+          if (!valid) {
+            return false
           }
+        }
         )
       }
       this.$refs.dsForm.validate(valid => {
@@ -572,10 +625,10 @@ export default {
         } else {
           form.configuration = JSON.stringify(form.configuration)
         }
-        if(this.optType==='appApply'){
+        if (this.optType === 'appApply') {
           const appApplyForm = {
             ...this.attachForm,
-            datasourceList:[deepCopy(form)]
+            datasourceList: [deepCopy(form)]
           }
           appApply(appApplyForm).then(res => {
             this.$success(i18n.t('commons.save_success'))
@@ -798,26 +851,23 @@ export default {
       this.form.apiConfiguration.splice(this.form.apiConfiguration.indexOf(item), 1)
     },
     validateApi(item) {
-      if (undefined) {
-      } else {
-        this.$refs.apiItem.validate(valid => {
-          if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem))
-            data.request = JSON.stringify(data.request)
-            this.loading = true
-            checkApiDatasource(data).then(res => {
-              this.loading = false
-              this.$success(i18n.t('commons.success'))
-              this.apiItem.fields = res.data.fields
-              this.$refs.plxTable.reloadData(res.data.datas)
-            }).catch(res => {
-              this.loading = false
-            })
-          } else {
-            return false
-          }
-        })
-      }
+      this.$refs.apiItem.validate(valid => {
+        if (valid) {
+          const data = JSON.parse(JSON.stringify(this.apiItem))
+          data.request = JSON.stringify(data.request)
+          this.loading = true
+          checkApiDatasource(data).then(res => {
+            this.loading = false
+            this.$success(i18n.t('commons.success'))
+            this.apiItem.fields = res.data.fields
+            this.$refs.plxTable.reloadData(res.data.datas)
+          }).catch(res => {
+            this.loading = false
+          })
+        } else {
+          return false
+        }
+      })
     },
     handleClick(tab, event) {
     }
@@ -857,4 +907,4 @@ export default {
 .dialog-footer ::v-deep .el-dialog__footer {
   padding: 10px 10px 10px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/system/datasource/DsConfiguration.vue b/frontend/src/views/system/datasource/DsConfiguration.vue
index 9538885811..ecaa8dcd50 100644
--- a/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/frontend/src/views/system/datasource/DsConfiguration.vue
@@ -12,8 +12,14 @@
       <template v-if="form.type == 'api'">
         <div class="de-row-rules flex-space">
           <span>{{ $t('datasource.data_table') }}</span>
-           <el-button style="min-width: 80px;
-    font-size: 14px;padding: 8px 15px;" icon="el-icon-plus" size="small" @click="() => addApiItem()" type="primary">{{ $t('commons.add') }}</el-button>
+          <el-button
+            style="min-width: 80px;
+    font-size: 14px;padding: 8px 15px;"
+            icon="el-icon-plus"
+            size="small"
+            type="primary"
+            @click="() => addApiItem()"
+          >{{ $t('commons.add') }}</el-button>
         </div>
         <el-empty
           v-if="!form.apiConfiguration.length"
@@ -29,7 +35,10 @@
             @click="addApiItem(api)"
           >
             <el-row>
-              <el-col style="display: flex" :span="19">
+              <el-col
+                style="display: flex"
+                :span="19"
+              >
                 <span class="name">{{ api.name }}</span>
                 <span
                   v-if="api.status === 'Error'"
@@ -42,7 +51,10 @@
                   style="color: green; background: rgba(52, 199, 36, 0.2)"
                 >{{ $t('datasource.valid') }}</span>
               </el-col>
-              <el-col style="text-align: right" :span="5">
+              <el-col
+                style="text-align: right"
+                :span="5"
+              >
                 <svg-icon
                   icon-class="de-copy"
                   class="de-copy-icon"
@@ -62,7 +74,11 @@
                       {{ $t('datasource.delete_this_item') }}
                     </div>
                     <div class="foot">
-                      <deBtn class="small" secondary @click="cancelItem(api)">{{
+                      <deBtn
+                        class="small"
+                        secondary
+                        @click="cancelItem(api)"
+                      >{{
                         $t('fu.search_bar.cancel')
                       }}</deBtn>
                       <deBtn
@@ -150,7 +166,10 @@
         v-if="form.type == 'hive'"
         :label="$t('datasource.auth_method')"
       >
-        <el-select v-model="form.configuration.authMethod" class="de-select">
+        <el-select
+          v-model="form.configuration.authMethod"
+          class="de-select"
+        >
           <el-option
             v-for="item in authMethodList"
             :key="item.id"
@@ -166,7 +185,10 @@
         "
         :label="$t('datasource.client_principal')"
       >
-        <el-input v-model="form.configuration.username" autocomplete="off" />
+        <el-input
+          v-model="form.configuration.username"
+          autocomplete="off"
+        />
       </el-form-item>
 
       <el-form-item
@@ -243,7 +265,11 @@
         "
         :label="$t('datasource.extra_params')"
       >
-        <el-input v-model="form.configuration.extraParams" :placeholder="$t('fu.search_bar.please_input') + $t('datasource.extra_params')" autocomplete="off" />
+        <el-input
+          v-model="form.configuration.extraParams"
+          :placeholder="$t('fu.search_bar.please_input') + $t('datasource.extra_params')"
+          autocomplete="off"
+        />
       </el-form-item>
 
       <el-form-item
@@ -334,8 +360,14 @@
         class="de-expand de-mar0"
         @click="showPriority = !showPriority"
       >{{ $t('datasource.priority')
-       }}<i v-if="showPriority" class="el-icon-arrow-up" />
-        <i v-else class="el-icon-arrow-down" /></span>
+       }}<i
+         v-if="showPriority"
+         class="el-icon-arrow-up"
+       />
+        <i
+          v-else
+          class="el-icon-arrow-down"
+        /></span>
 
       <template v-if="showPriority">
         <el-row :gutter="24">
@@ -412,7 +444,11 @@
       :before-close="closeEditItem"
       direction="rtl"
     >
-      <el-steps :active="active" align-center :space="144">
+      <el-steps
+        :active="active"
+        align-center
+        :space="144"
+      >
         <el-step
           v-if="active === 1"
           :title="$t('datasource.api_step_1')"
@@ -437,11 +473,21 @@
           <div class="row-rules">
             <span>{{ $t('datasource.base_info') }}</span>
           </div>
-          <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="apiItem.name" :placeholder="$t('commons.input_name')" autocomplete="off" />
+          <el-form-item
+            :label="$t('commons.name')"
+            prop="name"
+          >
+            <el-input
+              v-model="apiItem.name"
+              :placeholder="$t('commons.input_name')"
+              autocomplete="off"
+            />
           </el-form-item>
 
-          <el-form-item :label="$t('datasource.request')" prop="url">
+          <el-form-item
+            :label="$t('datasource.request')"
+            prop="url"
+          >
             <el-input
               v-model="apiItem.url"
               :placeholder="$t('datasource.path_all_info')"
@@ -517,7 +563,10 @@
                   </el-checkbox>
                 </template>
               </el-table-column>
-              <el-table-column prop="name" :label="$t('dataset.field_rename')">
+              <el-table-column
+                prop="name"
+                :label="$t('dataset.field_rename')"
+              >
                 <template slot-scope="scope">
                   <el-input
                     v-model="scope.row.name"
@@ -638,7 +687,10 @@
         </el-form>
       </el-row>
       <div class="foot">
-        <el-button class="btn normal" @click="closeEditItem">{{
+        <el-button
+          class="btn normal"
+          @click="closeEditItem"
+        >{{
           $t('commons.cancel')
         }}</el-button>
         <el-button
@@ -689,9 +741,10 @@ export default {
       }
     },
     method: String,
-    request: {},
-    response: {},
-    datasourceType: {},
+    datasourceType: {
+      type: Object,
+      default: () => {}
+    },
     showScript: {
       type: Boolean,
       default: true
@@ -1045,8 +1098,8 @@ export default {
         this.$message.warning(i18n.t('datasource.api_field_not_empty'))
         return
       }
-      for (var i = 0; i < this.apiItem.fields.length - 1; i++) {
-        for (var j = i + 1; j < this.apiItem.fields.length; j++) {
+      for (let i = 0; i < this.apiItem.fields.length - 1; i++) {
+        for (let j = i + 1; j < this.apiItem.fields.length; j++) {
           if (this.apiItem.fields[i].name === this.apiItem.fields[j].name) {
             this.$message.error(
               this.apiItem.fields[i].name +
@@ -1060,7 +1113,7 @@ export default {
       this.active = 0
       this.edit_api_item = false
       if (!this.add_api_item) {
-        for (var i = 0; i < this.form.apiConfiguration.length; i++) {
+        for (let i = 0; i < this.form.apiConfiguration.length; i++) {
           if (
             this.form.apiConfiguration[i].serialNumber ===
             this.apiItem.serialNumber
@@ -1089,7 +1142,7 @@ export default {
             this.form.apiConfiguration[i].name.length + 5,
             match[0].length - 1
           )
-          if (parseInt(num) != NaN && parseInt(num) > number) {
+          if (!isNaN(parseInt(num)) && parseInt(num) > number) {
             number = parseInt(num)
           }
         }
@@ -1138,10 +1191,10 @@ export default {
       this.previewData()
       if (this.errMsg.length) {
         this.$message.error(
-                 [...new Set(this.errMsg)].join(',') +
+          [...new Set(this.errMsg)].join(',') +
                    ', ' +
                    i18n.t('datasource.has_repeat_field_name')
-               )
+        )
       }
     },
     handleFiledChange() {
diff --git a/frontend/src/views/system/datasource/DsForm.vue b/frontend/src/views/system/datasource/DsForm.vue
index 8e3988488e..78d7438e3b 100644
--- a/frontend/src/views/system/datasource/DsForm.vue
+++ b/frontend/src/views/system/datasource/DsForm.vue
@@ -1,8 +1,14 @@
 <template>
-  <div v-loading="formLoading" class="de-ds-form">
+  <div
+    v-loading="formLoading"
+    class="de-ds-form"
+  >
     <div class="de-ds-top">
       <span class="name">
-        <i class="el-icon-arrow-left" @click="logOutTips" />
+        <i
+          class="el-icon-arrow-left"
+          @click="logOutTips"
+        />
         {{
           params &&
             params.id &&
@@ -76,14 +82,20 @@
             <div class="de-row-rules">
               <span>{{ $t('datasource.basic_info') }}</span>
             </div>
-            <el-form-item :label="$t('datasource.display_name')" prop="name">
+            <el-form-item
+              :label="$t('datasource.display_name')"
+              prop="name"
+            >
               <el-input
                 v-model="form.name"
                 autocomplete="off"
                 :placeholder="$t('commons.input_name')"
               />
             </el-form-item>
-            <el-form-item :label="$t('commons.description')" prop="desc">
+            <el-form-item
+              :label="$t('commons.description')"
+              prop="desc"
+            >
               <deTextarea
                 v-model="form.desc"
                 class="w100-textarea"
@@ -138,7 +150,6 @@
 </template>
 
 <script>
-import LayoutContent from '@/components/business/LayoutContent'
 import {
   addDs,
   editDs,
@@ -151,7 +162,6 @@ import {
 } from '@/api/system/datasource'
 import { $confirm } from '@/utils/message'
 import i18n from '@/lang/index'
-import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
 import DsConfiguration from '@/views/system/datasource/DsConfiguration'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import { listDatasourceType, listDatasource } from '@/api/system/datasource'
@@ -161,8 +171,6 @@ export default {
   name: 'DsForm',
   components: {
     DsConfiguration,
-    LayoutContent,
-    ApiHttpRequestForm,
     PluginCom,
     deTextarea
   },
@@ -394,7 +402,7 @@ export default {
   async created() {
     await this.datasourceTypes()
     this.queryTreeDatas()
-    const { id, showModel, msgNodeId, type, name } = this.$route.query
+    const { id, showModel, type, name } = this.$route.query
     this.params = this.$route.query
     if (id) {
       await this.getDatasourceDetail(id, showModel)
@@ -466,7 +474,7 @@ export default {
         customDriver: 'default',
         queryTimeout: 30
       }
-      if (this.form.type == 'oracle') {
+      if (this.form.type === 'oracle') {
         this.$set(this.form.configuration, 'charset', 'Default')
         this.$set(this.form.configuration, 'targetCharset', 'Default')
       }
@@ -557,13 +565,12 @@ export default {
                 case 'ds_doris':
                 case 'ck':
                 case 'mongo':
-                case 'mariadb':
                 case 'impala':
                   if (
-                    configuration.host == this.form.configuration.host &&
-                    configuration.dataBase ==
+                    configuration.host === this.form.configuration.host &&
+                    configuration.dataBase ===
                       this.form.configuration.dataBase &&
-                    configuration.port == this.form.configuration.port
+                    configuration.port === this.form.configuration.port
                   ) {
                     repeat = true
                     repeatDsName.push(child.name)
@@ -575,18 +582,18 @@ export default {
                 case 'oracle':
                 case 'db2':
                   if (
-                    configuration.host == this.form.configuration.host &&
-                    configuration.dataBase ==
+                    configuration.host === this.form.configuration.host &&
+                    configuration.dataBase ===
                       this.form.configuration.dataBase &&
-                    configuration.port == this.form.configuration.port &&
-                    configuration.schema == this.form.configuration.schema
+                    configuration.port === this.form.configuration.port &&
+                    configuration.schema === this.form.configuration.schema
                   ) {
                     repeatDsName.push(child.name)
                     repeat = true
                   }
                   break
                 case 'es':
-                  if (configuration.url == this.form.configuration.url) {
+                  if (configuration.url === this.form.configuration.url) {
                     repeatDsName.push(child.name)
                     repeat = true
                   }
@@ -609,23 +616,23 @@ export default {
                 if (!configuration) {
                   return
                 }
-                if (configuration.schema != null) {
+                if (configuration.schema !== null) {
                   if (
-                    configuration.schema == this.form.configuration.schema &&
-                    configuration.host == this.form.configuration.host &&
-                    configuration.dataBase ==
+                    configuration.schema === this.form.configuration.schema &&
+                    configuration.host === this.form.configuration.host &&
+                    configuration.dataBase ===
                       this.form.configuration.dataBase &&
-                    configuration.port == this.form.configuration.port
+                    configuration.port === this.form.configuration.port
                   ) {
                     repeat = true
                     repeatDsName.push(child.name)
                   }
                 } else {
                   if (
-                    configuration.host == this.form.configuration.host &&
-                    configuration.dataBase ==
+                    configuration.host === this.form.configuration.host &&
+                    configuration.dataBase ===
                       this.form.configuration.dataBase &&
-                    configuration.port == this.form.configuration.port
+                    configuration.port === this.form.configuration.port
                   ) {
                     repeat = true
                     repeatDsName.push(child.name)
@@ -940,28 +947,25 @@ export default {
       )
     },
     validateApi(item) {
-      if (undefined) {
-      } else {
-        this.$refs.apiItem.validate((valid) => {
-          if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem))
-            data.request = JSON.stringify(data.request)
-            this.loading = true
-            checkApiDatasource(data)
-              .then((res) => {
-                this.loading = false
-                this.$success(i18n.t('commons.success'))
-                this.apiItem.fields = res.data.fields
-                this.$refs.plxTable.reloadData(res.data.datas)
-              })
-              .catch((res) => {
-                this.loading = false
-              })
-          } else {
-            return false
-          }
-        })
-      }
+      this.$refs.apiItem.validate((valid) => {
+        if (valid) {
+          const data = JSON.parse(JSON.stringify(this.apiItem))
+          data.request = JSON.stringify(data.request)
+          this.loading = true
+          checkApiDatasource(data)
+            .then((res) => {
+              this.loading = false
+              this.$success(i18n.t('commons.success'))
+              this.apiItem.fields = res.data.fields
+              this.$refs.plxTable.reloadData(res.data.datas)
+            })
+            .catch((res) => {
+              this.loading = false
+            })
+        } else {
+          return false
+        }
+      })
     },
     handleClick(tab, event) {}
   }
diff --git a/frontend/src/views/system/datasource/DsMain.vue b/frontend/src/views/system/datasource/DsMain.vue
index 4536794d99..6cb292ca3d 100644
--- a/frontend/src/views/system/datasource/DsMain.vue
+++ b/frontend/src/views/system/datasource/DsMain.vue
@@ -4,9 +4,15 @@
     class="de-ds-container"
     :class="[{ 'is-driver-mgm': currentMgm === 'driverMgm' }]"
   >
-    <div v-if="currentMgm === 'driverMgm'" class="dsr-route-title">
+    <div
+      v-if="currentMgm === 'driverMgm'"
+      class="dsr-route-title"
+    >
       <div>
-        <i class="el-icon-arrow-left back-button" @click="jump" />
+        <i
+          class="el-icon-arrow-left back-button"
+          @click="jump"
+        />
         <span>{{ $t('driver.mgm') }}</span>
       </div>
       <deBtn
@@ -32,13 +38,18 @@
         :is="component"
         v-if="!!component"
         :params="param"
-        @DataUpdate="dataUpdate"
         :t-data="tData"
         :ds-types="dsTypes"
+        @DataUpdate="dataUpdate"
         @refresh-type="refreshType"
         @switch-component="switchMain"
       />
-      <el-empty v-else :image-size="125" :description="$t(`datasource.${swTips}`)" :image="image" />
+      <el-empty
+        v-else
+        :image-size="125"
+        :description="$t(`datasource.${swTips}`)"
+        :image="image"
+      />
     </de-main-container>
   </div>
 </template>
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
index 9e8ff9bc4e..fafff41490 100644
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -1,11 +1,20 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
   <el-col class="tree-style">
     <el-col>
-      <el-row v-show="showView === 'Datasource'" class="title-css">
-        <el-col class="title-text" :span="12">
+      <el-row
+        v-show="showView === 'Datasource'"
+        class="title-css"
+      >
+        <el-col
+          class="title-text"
+          :span="12"
+        >
           {{ $t('commons.datasource') }}
         </el-col>
-        <el-col class="title-operate" :span="12">
+        <el-col
+          class="title-operate"
+          :span="12"
+        >
           <el-tooltip
             class="item"
             effect="dark"
@@ -24,7 +33,10 @@
             :content="$t('datasource.create')"
             placement="top"
           >
-            <i class="el-icon-plus" @click="addFolder" />
+            <i
+              class="el-icon-plus"
+              @click="addFolder"
+            />
           </el-tooltip>
         </el-col>
       </el-row>
@@ -40,9 +52,15 @@
 
       <el-col class="custom-tree-container de-tree">
         <div class="block">
-          <div v-if="!tData.length && !treeLoading" class="no-tdata">
+          <div
+            v-if="!tData.length && !treeLoading"
+            class="no-tdata"
+          >
             {{ showView === 'Driver' ? '暂无驱动' : '暂无数据源' }}
-            <span @click="() => createDriveOrDs()" class="no-tdata-new">{{
+            <span
+              class="no-tdata-new"
+              @click="() => createDriveOrDs()"
+            >{{
               $t('deDataset.create')
             }}</span>
           </div>
@@ -56,7 +74,10 @@
             :filter-node-method="filterNode"
             @node-click="nodeClick"
           >
-            <span slot-scope="{ data }" class="custom-tree-node-list">
+            <span
+              slot-scope="{ data }"
+              class="custom-tree-node-list"
+            >
               <span style="display: flex; width: calc(100% - 20px)">
                 <span
                   v-if="
@@ -82,7 +103,7 @@
                   />
                 </span>
                 <span v-if="data.type === 'folder'">
-                  <svg-icon icon-class="scene"/>
+                  <svg-icon icon-class="scene" />
                 </span>
                 <span
                   style="
@@ -139,8 +160,14 @@
                   trigger="click"
                   @command="(type) => handleCommand(type, data)"
                 >
-                  <i class="el-icon-more" @click.stop />
-                  <el-dropdown-menu slot="dropdown" class="de-card-dropdown">
+                  <i
+                    class="el-icon-more"
+                    @click.stop
+                  />
+                  <el-dropdown-menu
+                    slot="dropdown"
+                    class="de-card-dropdown"
+                  >
                     <slot>
                       <el-dropdown-item command="edit">
                         <i class="el-icon-edit" />
@@ -175,13 +202,19 @@
           size="small"
           :rules="rule"
         >
-          <el-form-item :label="$t('datasource.driver_name')" prop="name">
+          <el-form-item
+            :label="$t('datasource.driver_name')"
+            prop="name"
+          >
             <el-input
               v-model="driverForm.name"
               :placeholder="$t('fu.search_bar.please_input')"
             />
           </el-form-item>
-          <el-form-item :label="$t('datasource.drive_type')" prop="type">
+          <el-form-item
+            :label="$t('datasource.drive_type')"
+            prop="type"
+          >
             <el-select
               v-model="driverForm.type"
               :placeholder="$t('fu.search_bar.please_select')"
@@ -201,8 +234,14 @@
             <deTextarea v-model="driverForm.desc" />
           </el-form-item>
         </el-form>
-        <div slot="footer" class="dialog-footer">
-          <deBtn secondary @click="close()">{{ $t('commons.cancel') }}</deBtn>
+        <div
+          slot="footer"
+          class="dialog-footer"
+        >
+          <deBtn
+            secondary
+            @click="close()"
+          >{{ $t('commons.cancel') }}</deBtn>
           <deBtn
             type="primary"
             size="mini"
@@ -221,7 +260,10 @@
         append-to-body
       >
         <el-tabs v-model="tabActive">
-          <el-tab-pane :label="$t('datasource.all')" name="all" />
+          <el-tab-pane
+            :label="$t('datasource.all')"
+            name="all"
+          />
           <el-tab-pane
             :label="$t('datasource.relational_database')"
             name="RDBMS"
@@ -230,7 +272,10 @@
             :label="$t('datasource.non_relational_database')"
             name="NORDBMS"
           />
-          <el-tab-pane :label="$t('datasource.other')" name="OTHER" />
+          <el-tab-pane
+            :label="$t('datasource.other')"
+            name="OTHER"
+          />
         </el-tabs>
         <div class="db-container">
           <div
@@ -339,11 +384,6 @@ export default {
       }
     }
   },
-  watch: {
-    key(val) {
-      this.$refs.myDsTree.filter(val)
-    }
-  },
   computed: {
     ...mapGetters(['user']),
     databaseList() {
@@ -355,6 +395,11 @@ export default {
       )
     }
   },
+  watch: {
+    key(val) {
+      this.$refs.myDsTree.filter(val)
+    }
+  },
   created() {
     this.queryTreeDatas()
     this.datasourceTypes()
@@ -398,15 +443,15 @@ export default {
         listDatasource().then((res) => {
           this.tData = this.buildTree(res.data)
         }).finally(() => {
-        this.treeLoading = false
-      })
+          this.treeLoading = false
+        })
       }
       if (this.showView === 'Driver') {
         listDrivers().then((res) => {
           this.tData = this.buildTree(res.data)
         }).finally(() => {
-        this.treeLoading = false
-      })
+          this.treeLoading = false
+        })
       }
     },
     datasourceTypes() {
@@ -503,7 +548,7 @@ export default {
       this.queryTreeDatas()
     },
     addDb({ type }) {
-      const name = (this.dsTypes.find(ele => type === ele.type ) || {}).name
+      const name = (this.dsTypes.find(ele => type === ele.type) || {}).name
       this.$router.push({
         path: '/ds-form',
         query: { type, name }
@@ -515,7 +560,7 @@ export default {
         this.dialogTitle = this.$t('datasource.add_driver')
         this.editDriver = true
       } else {
-        const name = (this.dsTypes.find(ele => data.id === ele.type ) || {}).name
+        const name = (this.dsTypes.find(ele => data.id === ele.type) || {}).name
         this.$router.push({
           path: '/ds-form',
           query: { type: data.id, name }
@@ -572,7 +617,7 @@ export default {
       }
       this.editDriver = true
       this.dialogTitle = this.$t('datasource.edit_driver')
-      this.driverForm = {...row}
+      this.driverForm = { ...row }
     },
     _handleDelete(datasource) {
       const params = {
diff --git a/frontend/src/views/system/datasource/EditDialog.vue b/frontend/src/views/system/datasource/EditDialog.vue
index 4e6f8bb3de..3486dda1f8 100644
--- a/frontend/src/views/system/datasource/EditDialog.vue
+++ b/frontend/src/views/system/datasource/EditDialog.vue
@@ -1,22 +1,28 @@
 <template>
-  <el-dialog :close-on-click-modal="closeOnClickModal"
-             :title="title"
-             :width="width"
-             :visible="visible"
-             destroy-on-close
-             :append-to-body="appendToBody"
-             @close="handleClose">
+  <el-dialog
+    :close-on-click-modal="closeOnClickModal"
+    :title="title"
+    :width="width"
+    :visible="visible"
+    destroy-on-close
+    :append-to-body="appendToBody"
+    @close="handleClose"
+  >
 
-    <slot name="header"></slot>
+    <slot name="header" />
 
-    <slot></slot>
+    <slot />
 
-    <template v-slot:footer>
+    <template #footer>
       <slot name="footer">
-        <div v-if="withFooter" class="dialog-footer">
+        <div
+          v-if="withFooter"
+          class="dialog-footer"
+        >
           <ms-dialog-footer
             @cancel="handleCancel"
-            @confirm="handleConfirm"/>
+            @confirm="handleConfirm"
+          />
         </div>
       </slot>
     </template>
@@ -25,60 +31,58 @@
 </template>
 
 <script>
-import DialogFooter from "./DialogFooter";
 export default {
-  name: "EditDialog",
-  components: {DialogFooter},
+  name: 'EditDialog',
   props: {
     title: {
       type: String,
       default() {
-        return 'title';
+        return 'title'
       }
     },
     visible: {
       type: Boolean,
       default() {
-        return false;
+        return false
       }
     },
     appendToBody: {
       type: Boolean,
       default() {
-        return false;
+        return false
       }
     },
     width: {
       type: String,
       default() {
-        return "50%";
+        return '50%'
       }
     },
     withFooter: {
       type: Boolean,
       default() {
-        return true;
+        return true
       }
     },
     closeOnClickModal: {
       type: Boolean,
       default: false
-    },
+    }
   },
   methods: {
     handleConfirm() {
-      this.$emit('confirm');
+      this.$emit('confirm')
     },
     handleCancel() {
-      this.handleClose();
-      this.$emit('cancel');
+      this.handleClose()
+      this.$emit('cancel')
     },
     handleClose() {
-      this.$emit('update:visible', false);
-      this.$emit('close');
-    },
+      this.$emit('update:visible', false)
+      this.$emit('close')
+    }
   }
-};
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/system/datasource/convert.js b/frontend/src/views/system/datasource/convert.js
index 87ab7c8a4c..a6d9da3040 100644
--- a/frontend/src/views/system/datasource/convert.js
+++ b/frontend/src/views/system/datasource/convert.js
@@ -11,7 +11,7 @@ class Convert {
   constructor() {
     this._option = {
       $id: 'http://example.com/root.json',
-      $schema: 'http://json-schema.org/draft-07/schema#',
+      $schema: 'http://json-schema.org/draft-07/schema#'
     }
     this._object = null
   }
@@ -88,7 +88,7 @@ class Convert {
       return
     }
     // 处理当前路径$id
-    if (name === '' || name == undefined) {
+    if (name === '' || name === undefined) {
       name = '#'
     }
     const result = {}
@@ -100,7 +100,7 @@ class Convert {
     }
     // 遍历传入的对象
     for (const key in object) {
-      if (object.hasOwnProperty(key)) {
+      if (Object.prototype.hasOwnProperty.call(object, key)) {
         const element = object[key]
         // 如果只是undefined。跳过
         if (element === undefined) {
@@ -159,7 +159,7 @@ class Convert {
       title: `The ${key} Schema`,
       mock: {
         'mock': value
-      },
+      }
     }
 
     // 判断是否为初始化root数据
@@ -189,4 +189,4 @@ class Convert {
     return objectTemplate
   }
 }
-
+export default Convert
diff --git a/frontend/src/views/system/datasource/dsTable.vue b/frontend/src/views/system/datasource/dsTable.vue
index d8078571de..7291a14854 100644
--- a/frontend/src/views/system/datasource/dsTable.vue
+++ b/frontend/src/views/system/datasource/dsTable.vue
@@ -4,7 +4,10 @@
       <el-col :span="10">
         <span class="table-name-top">{{ params.name }}</span>
       </el-col>
-      <el-col :span="14" class="right-user">
+      <el-col
+        :span="14"
+        class="right-user"
+      >
         <el-input
           ref="search"
           v-model="nickName"
@@ -51,7 +54,10 @@
       class="de-dialog-form ds-table-drawer"
       width="840px"
     >
-      <el-row style="margin-top: 12px" :gutter="24">
+      <el-row
+        style="margin-top: 12px"
+        :gutter="24"
+      >
         <el-col :span="12">
           <p class="table-name">
             {{ $t("datasource.table_name") }}
@@ -108,7 +114,7 @@
 
 <script>
 import keyEnter from '@/components/msgCfm/keyEnter.js'
-import { dsTable, post } from '@/api/dataset/dataset'
+import { post } from '@/api/dataset/dataset'
 
 export default {
   mixins: [keyEnter],
diff --git a/frontend/src/views/system/datasource/form.vue b/frontend/src/views/system/datasource/form.vue
index 0eec277ed7..0cd2f7f697 100644
--- a/frontend/src/views/system/datasource/form.vue
+++ b/frontend/src/views/system/datasource/form.vue
@@ -8,4 +8,4 @@ export default {
 </script>
 
 <style>
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/system/datasource/format-utils.js b/frontend/src/views/system/datasource/format-utils.js
index ff957f2fe9..ec4622b689 100644
--- a/frontend/src/views/system/datasource/format-utils.js
+++ b/frontend/src/views/system/datasource/format-utils.js
@@ -11,7 +11,7 @@ export function formatJson(json) {
     currentChar = json.charAt(i)
     switch (currentChar) {
       case '{':
-        if (i != 0 && json.charAt(i - 1) === '$') {
+        if (i !== 0 && json.charAt(i - 1) === '$') {
           newJson += currentChar
           flag = true
         } else if (!inString) {
@@ -101,12 +101,12 @@ export function formatXml(text) {
   var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/mg
   var nodeStack = []
   var output = text.replace(rgx, function($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
-    var isClosed = (isCloseFull1 == '/') || (isCloseFull2 == '/') || (isFull1 == '/') || (isFull2 == '/')
+    var isClosed = (isCloseFull1 === '/') || (isCloseFull2 === '/') || (isFull1 === '/') || (isFull2 === '/')
     var prefix = ''
-    if (isBegin == '!') {
+    if (isBegin === '!') {
       prefix = getPrefix(nodeStack.length)
     } else {
-      if (isBegin != '/') {
+      if (isBegin !== '/') {
         prefix = getPrefix(nodeStack.length)
         if (!isClosed) {
           nodeStack.push(name)
@@ -119,11 +119,10 @@ export function formatXml(text) {
     var ret = '\n' + prefix + all
     return ret
   })
-  var prefixSpace = -1
   var outputText = output.substring(1)
   // 把注释还原并解码，调格式
   outputText = outputText.replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) {
-    if (prefix.charAt(0) == '\r') { prefix = prefix.substring(1) }
+    if (prefix.charAt(0) === '\r') { prefix = prefix.substring(1) }
     text = unescape(text).replace(/\r/g, '\n')
     var ret = '\n' + prefix + '<!--' + text.replace(/^\s*/mg, prefix) + '-->'
     return ret
diff --git a/frontend/src/views/system/datasource/index.vue b/frontend/src/views/system/datasource/index.vue
index bf8cae7581..3daa985089 100644
--- a/frontend/src/views/system/datasource/index.vue
+++ b/frontend/src/views/system/datasource/index.vue
@@ -7,35 +7,35 @@
 </template>
 
 <script>
-import DeContainer from "@/components/dataease/DeContainer";
-import DsMain from "./DsMain";
-import bus from "@/utils/bus";
+import DeContainer from '@/components/dataease/DeContainer'
+import DsMain from './DsMain'
+import bus from '@/utils/bus'
 
 export default {
-  name: "Panel",
+  name: 'Panel',
   components: { DeContainer, DsMain },
   data() {
     return {
       component: DsMain,
-      componentName: "DsMain",
-      param: {},
-    };
+      componentName: 'DsMain',
+      param: {}
+    }
   },
   mounted() {
-    bus.$on("to-msg-ds", this.toMsgDs);
+    bus.$on('to-msg-ds', this.toMsgDs)
   },
   beforeDestroy() {
-    bus.$off("to-msg-ds", this.toMsgDs);
+    bus.$off('to-msg-ds', this.toMsgDs)
   },
   created() {
-    this.$store.dispatch("app/toggleSideBarHide", true);
-    const routerParam = this.$router.currentRoute.params;
-    this.toMsgDs(routerParam);
+    this.$store.dispatch('app/toggleSideBarHide', true)
+    const routerParam = this.$router.currentRoute.params
+    this.toMsgDs(routerParam)
   },
   methods: {
     toMsgDs(routerParam) {
       if (routerParam !== null && routerParam.msgNotification) {
-        const panelShareTypeIds = [7, 8];
+        const panelShareTypeIds = [7, 8]
         // 说明是从消息通知跳转过来的
         if (panelShareTypeIds.includes(routerParam.msgType)) {
           // 是数据集同步
@@ -44,17 +44,17 @@ export default {
               this.$nextTick(() => {
                 this.$refs.dsMain &&
                   this.$refs.dsMain.msg2Current &&
-                  this.$refs.dsMain.msg2Current(routerParam.sourceParam);
-              });
+                  this.$refs.dsMain.msg2Current(routerParam.sourceParam)
+              })
             } catch (error) {
-              console.error(error);
+              console.error(error)
             }
           }
         }
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/system/log/filterUser.vue b/frontend/src/views/system/log/filterUser.vue
index f18eb05f4a..1ca62575f0 100644
--- a/frontend/src/views/system/log/filterUser.vue
+++ b/frontend/src/views/system/log/filterUser.vue
@@ -1,37 +1,35 @@
 <template>
   <el-drawer
+    v-closePress
     :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
     custom-class="user-drawer-task"
     size="680px"
-    v-closePress
     direction="rtl"
   >
     <div class="el-drawer__body-cont">
-    <div class="filter">
-      <span>{{ $t("log.optype") }}</span>
-      <div class="filter-item">
-        <span
-          class="item"
-          @click="statusChange(item.value)"
-          :class="[activeType.includes(item.value) ? 'active' : '']"
-          :key="item.label"
-          v-for="item in types"
-          >{{ $t(item.label) }}</span
-        >
+      <div class="filter">
+        <span>{{ $t("log.optype") }}</span>
+        <div class="filter-item">
+          <span
+            v-for="item in types"
+            :key="item.label"
+            class="item"
+            :class="[activeType.includes(item.value) ? 'active' : '']"
+            @click="statusChange(item.value)"
+          >{{ $t(item.label) }}</span>
+        </div>
       </div>
-    </div>
       <div class="filter">
         <span>{{ $t("log.user") }}</span>
         <div class="filter-item">
           <span
-            @click="activeUserChange(ele.id)"
+            v-for="ele in usersValueCopy"
+            :key="ele.id"
             class="item"
             :class="[activeUser.includes(ele.id) ? 'active' : '']"
-            :key="ele.id"
-            v-for="ele in usersValueCopy"
-            >{{ ele.username }}</span
-          >
+            @click="activeUserChange(ele.id)"
+          >{{ ele.username }}</span>
           <el-popover
             placement="bottom"
             popper-class="user-popper"
@@ -44,9 +42,9 @@
               multiple
               filterable
               :placeholder="$t('commons.please_select')"
+              value-key="id"
               @change="changeUser"
               @remove-tag="changeUser"
-              value-key="id"
             >
               <el-option
                 v-for="item in usersComputed"
@@ -55,22 +53,32 @@
                 :value="item"
               />
             </el-select>
-            <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
+            <span
+              slot="reference"
+              class="more"
+            >+ {{ $t("panel.more") }}</span>
           </el-popover>
         </div>
       </div>
       <div class="filter">
         <span>{{ $t("dedaterange.label") }}</span>
         <div class="filter-item">
-          <DeDatePick  v-model="dataRange"></DeDatePick>
+          <DeDatePick v-model="dataRange" />
         </div>
       </div>
     </div>
     <div class="foot">
-      <el-button class="btn normal" @click="reset">{{
+      <el-button
+        class="btn normal"
+        @click="reset"
+      >{{
         $t("commons.reset")
       }}</el-button>
-      <el-button type="primary" class="btn" @click="search">{{
+      <el-button
+        type="primary"
+        class="btn"
+        @click="search"
+      >{{
         $t("commons.adv_search.search")
       }}</el-button>
     </div>
@@ -78,9 +86,9 @@
 </template>
 
 <script>
-import { dateFormat } from "@/views/system/task/options.js";
-import { opTypes } from "@/api/system/log";
-import { post } from "@/api/dataset/dataset";
+import { dateFormat } from '@/views/system/task/options.js'
+import { opTypes } from '@/api/system/log'
+import { post } from '@/api/dataset/dataset'
 import DeDatePick from '@/components/deCustomCm/deDatePick.vue'
 export default {
   components: {
@@ -97,33 +105,33 @@ export default {
       users: [],
       userCahe: [],
       activeType: [],
-      userDrawer: false,
-    };
+      userDrawer: false
+    }
   },
   computed: {
     usersComputed() {
-      return this.users.filter((ele) => !this.activeUser.includes(ele.id));
+      return this.users.filter((ele) => !this.activeUser.includes(ele.id))
     },
     usersValueCopy() {
-      return this.userCahe.filter((ele) => this.activeUser.includes(ele.id));
-    },
+      return this.userCahe.filter((ele) => this.activeUser.includes(ele.id))
+    }
   },
   mounted() {
-    this.loadUsers();
-    this.loadType();
+    this.loadUsers()
+    this.loadType()
   },
   methods: {
     loadType() {
       opTypes().then((res) => {
         this.types = res.data.map((item) => {
-          return { label: item.name, value: item.id };
-        });
-      });
+          return { label: item.name, value: item.id }
+        })
+      })
     },
     loadUsers() {
-      post("/api/user/userLists", {}, false).then((res) => {
-        this.users = res.data;
-      });
+      post('/api/user/userLists', {}, false).then((res) => {
+        this.users = res.data
+      })
     },
     changeUser() {
       if (
@@ -135,8 +143,8 @@ export default {
             .map((ele) => ele.id)
             .concat(this.activeUser)
             .includes(ele.id)
-        );
-        return;
+        )
+        return
       }
       const userIdx = this.usersValue.findIndex(
         (ele) =>
@@ -144,124 +152,125 @@ export default {
             .map((ele) => ele.id)
             .concat(this.activeUser)
             .includes(ele.id)
-      );
-      if (userIdx === -1) return;
-      this.activeUser.push(this.usersValue[userIdx].id);
-      this.userCahe.push(this.usersValue[userIdx]);
-      this.usersValue.splice(userIdx, 1);
+      )
+      if (userIdx === -1) return
+      this.activeUser.push(this.usersValue[userIdx].id)
+      this.userCahe.push(this.usersValue[userIdx])
+      this.usersValue.splice(userIdx, 1)
     },
     activeUserChange(id) {
-      const userIndex = this.activeUser.findIndex((ele) => ele === id);
+      const userIndex = this.activeUser.findIndex((ele) => ele === id)
       if (userIndex === -1) {
-        this.activeUser.push(id);
-        this.usersValue = this.usersValue.filter((ele) => ele.id !== id);
+        this.activeUser.push(id)
+        this.usersValue = this.usersValue.filter((ele) => ele.id !== id)
       } else {
-        this.activeUser.splice(userIndex, 1);
-        const user = this.userCahe.find((ele) => ele.id === id);
-        this.usersValue.push(user);
+        this.activeUser.splice(userIndex, 1)
+        const user = this.userCahe.find((ele) => ele.id === id)
+        this.usersValue.push(user)
       }
     },
     clearFilter() {
-      this.dataRange = [];
-      this.usersValue = [];
-      this.activeUser = [];
-      this.activeType = [];
-      this.userCahe = [];
-      this.$emit("search", [], []);
+      this.dataRange = []
+      this.usersValue = []
+      this.activeUser = []
+      this.activeType = []
+      this.userCahe = []
+      this.$emit('search', [], [])
     },
     clearOneFilter(index) {
       (this.filterTextMap[index] || []).forEach((ele) => {
-        this[ele] = [];
-      });
+        this[ele] = []
+      })
     },
     statusChange(value, type) {
-      const statusIndex = this.activeType.findIndex((ele) => ele === value);
+      const statusIndex = this.activeType.findIndex((ele) => ele === value)
       if (statusIndex === -1) {
-        this.activeType.push(value);
+        this.activeType.push(value)
       } else {
-        this.activeType.splice(statusIndex, 1);
+        this.activeType.splice(statusIndex, 1)
       }
     },
     search() {
-      this.userDrawer = false;
-      this.$emit("search", this.formatCondition(), this.formatText());
+      this.userDrawer = false
+      this.$emit('search', this.formatCondition(), this.formatText())
     },
     formatText() {
-      this.filterTextMap = [];
-      const params = [];
+      this.filterTextMap = []
+      const params = []
       if (this.activeType.length) {
-          params.push(
-            `${this.$t('log.optype')}:${this.activeType
-              .map((item) =>
-                this.types.find((itx) => itx.value === item).label
-              )
-              .join("、")}`
-          );
-          this.filterTextMap.push([`activeType`]);
-        }
+        params.push(
+          `${this.$t('log.optype')}:${this.activeType
+            .map((item) =>
+              this.types.find((itx) => itx.value === item).label
+            )
+            .join('、')}`
+        )
+        this.filterTextMap.push([`activeType`])
+      }
       if (this.activeUser.length) {
-        let str = `${this.$t("log.user")}:${this.activeUser.reduce(
+        const str = `${this.$t('log.user')}:${this.activeUser.reduce(
           (pre, next) =>
             (this.users.find((ele) => ele.id === next) || {}).username +
-            "、" +
+            '、' +
             pre,
-          ""
-        )}`;
-        params.push(str.slice(0, str.length - 1));
+          ''
+        )}`
+        params.push(str.slice(0, str.length - 1))
         this.filterTextMap.push([
-          "usersValue",
-          "activeUser",
-          "userCahe",
-        ]);
+          'usersValue',
+          'activeUser',
+          'userCahe'
+        ])
       }
-      
+
       if (this.dataRange.length) {
         params.push(
-          `${this.$t("dedaterange.label")}:${this.dataRange
+          `${this.$t('dedaterange.label')}:${this.dataRange
             .map((ele) => {
-              return dateFormat("YYYY-mm-dd", ele);
+              return dateFormat('YYYY-mm-dd', ele)
             })
-            .join("-")}`
-        );
-        this.filterTextMap.push(["dataRange"]);
+            .join('-')}`
+        )
+        this.filterTextMap.push(['dataRange'])
       }
-      return params;
+      return params
     },
     formatCondition() {
       const fildMap = {
         optype: this.activeType,
-        "user_id": this.activeUser,
-      };
-      const conditions = [];
+        'user_id': this.activeUser
+      }
+      const conditions = []
       Object.keys(fildMap).forEach((ele) => {
         if (fildMap[ele].length) {
           conditions.push({
             field: ele,
-            operator: "in",
-            value: fildMap[ele],
-          });
+            operator: 'in',
+            value: fildMap[ele]
+          })
         }
-      });
-      let [min, max] = this.dataRange;
+      })
+      // eslint-disable-next-line
+      let [min, max] = this.dataRange
       if (min && max) {
         if (+min === +max) {
-          max = +max + 24 * 3600 * 1000;
+          max = +max + 24 * 3600 * 1000
         }
         conditions.push({
-          field: "time",
-          operator: "between",
-          value: [+min, +max],
-        });
+          field: 'time',
+          operator: 'between',
+          value: [+min, +max]
+        })
       }
-      return conditions;
+      return conditions
     },
     init() {
-      this.userDrawer = true;
+      this.userDrawer = true
     },
     reset() {
-      this.clearFilter();
-      this.userDrawer = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
+      this.clearFilter()
+      this.userDrawer = false
+    }
+  }
+}
+</script>
diff --git a/frontend/src/views/system/log/index.vue b/frontend/src/views/system/log/index.vue
index 5335fb9118..23b665fd3f 100644
--- a/frontend/src/views/system/log/index.vue
+++ b/frontend/src/views/system/log/index.vue
@@ -2,12 +2,19 @@
   <de-layout-content :header="$t('log.title')">
     <el-row class="top-operate">
       <el-col :span="12">
-        <deBtn v-permission="['log:export']" secondary @click="exportConfirm">{{
+        <deBtn
+          v-permission="['log:export']"
+          secondary
+          @click="exportConfirm"
+        >{{
           $t("zip.export")
         }}</deBtn>
         &nbsp; &nbsp;
       </el-col>
-      <el-col :span="12" class="right-user">
+      <el-col
+        :span="12"
+        class="right-user"
+      >
         <el-input
           ref="search"
           v-model="nickName"
@@ -31,7 +38,10 @@
         </deBtn>
       </el-col>
     </el-row>
-    <div v-if="filterTexts.length" class="filter-texts">
+    <div
+      v-if="filterTexts.length"
+      class="filter-texts"
+    >
       <span class="sum">{{ paginationConfig.total }}</span>
       <span class="title">{{ $t("user.result_one") }}</span>
       <el-divider direction="vertical" />
@@ -41,8 +51,15 @@
         @click="scrollPre"
       />
       <div class="filter-texts-container">
-        <p v-for="(ele, index) in filterTexts" :key="ele" class="text">
-          {{ ele }} <i class="el-icon-close" @click="clearOneFilter(index)" />
+        <p
+          v-for="(ele, index) in filterTexts"
+          :key="ele"
+          class="text"
+        >
+          {{ ele }} <i
+            class="el-icon-close"
+            @click="clearOneFilter(index)"
+          />
         </p>
       </div>
       <i
@@ -77,7 +94,7 @@
           :label="$t('log.optype')"
           width="140"
         >
-          <template v-slot:default="{ row }">
+          <template #default="{ row }">
             <span>{{ row.opType + row.sourceType }}</span>
           </template>
         </el-table-column>
@@ -99,14 +116,17 @@
           :label="$t('log.time')"
           width="180"
         >
-          <template v-slot:default="scope">
+          <template #default="scope">
             <span>{{ scope.row.time | timestampFormatDate }}</span>
           </template>
         </el-table-column>
       </grid-table>
     </div>
     <keep-alive>
-      <filterUser ref="filterUser" @search="filterDraw" />
+      <filterUser
+        ref="filterUser"
+        @search="filterDraw"
+      />
     </keep-alive>
   </de-layout-content>
 </template>
diff --git a/frontend/src/views/system/map/index.vue b/frontend/src/views/system/map/index.vue
index 4f0377cdd6..afe36a9e5d 100644
--- a/frontend/src/views/system/map/index.vue
+++ b/frontend/src/views/system/map/index.vue
@@ -1,6 +1,9 @@
 <template>
   <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-    <div id="maptest" style="width: 100%;height:100%;" />
+    <div
+      id="maptest"
+      style="width: 100%;height:100%;"
+    />
   </layout-content>
 </template>
 
diff --git a/frontend/src/views/system/menu/form.vue b/frontend/src/views/system/menu/form.vue
index e8907f6538..569ff05786 100644
--- a/frontend/src/views/system/menu/form.vue
+++ b/frontend/src/views/system/menu/form.vue
@@ -1,38 +1,103 @@
 <template>
-  <layout-content :header="formType=='add' ? $t('menu.create') : $t('menu.modify')" back-name="system-menu">
-    <el-form ref="menuForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
-      <el-form-item :label="$t('menu.menu_type')" prop="type">
-        <el-radio-group v-model="form.type" size="mini" :disabled="formType!=='add'">
+  <layout-content
+    :header="formType=='add' ? $t('menu.create') : $t('menu.modify')"
+    back-name="system-menu"
+  >
+    <el-form
+      ref="menuForm"
+      :model="form"
+      :rules="rule"
+      size="small"
+      label-width="auto"
+      label-position="right"
+    >
+      <el-form-item
+        :label="$t('menu.menu_type')"
+        prop="type"
+      >
+        <el-radio-group
+          v-model="form.type"
+          size="mini"
+          :disabled="formType!=='add'"
+        >
           <el-radio-button label="0">{{ $t('commons.catalogue') }}</el-radio-button>
           <el-radio-button label="1">{{ $t('commons.menu') }}</el-radio-button>
           <el-radio-button label="2">{{ $t('commons.button') }}</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item v-if="form.type=== 1 && form.icon" :label="$t('commons.icon')" prop="icon">
+      <el-form-item
+        v-if="form.type=== 1 && form.icon"
+        :label="$t('commons.icon')"
+        prop="icon"
+      >
         <el-popover
           placement="bottom-start"
           width="425"
           trigger="click"
           @show="$refs['iconSelect'].reset()"
         >
-          <IconSelect ref="iconSelect" @selected="selected" />
-          <el-input slot="reference" v-model="form.icon" :placeholder="$t('menu.select_icon')" readonly>
-            <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
-            <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+          <IconSelect
+            ref="iconSelect"
+            @selected="selected"
+          />
+          <el-input
+            slot="reference"
+            v-model="form.icon"
+            :placeholder="$t('menu.select_icon')"
+            readonly
+          >
+            <svg-icon
+              v-if="form.icon"
+              slot="prefix"
+              :icon-class="form.icon"
+              class="el-input__icon"
+              style="height: 32px;width: 16px;"
+            />
+            <i
+              v-else
+              slot="prefix"
+              class="el-icon-search el-input__icon"
+            />
           </el-input>
         </el-popover>
       </el-form-item>
 
-      <el-form-item v-if="form.type !== 2" :label="$t('menu.tile')" prop="title">
-        <el-input v-model="form.title" :placeholder="$t('menu.tile')" />
+      <el-form-item
+        v-if="form.type !== 2"
+        :label="$t('menu.tile')"
+        prop="title"
+      >
+        <el-input
+          v-model="form.title"
+          :placeholder="$t('menu.tile')"
+        />
       </el-form-item>
-      <el-form-item v-if="form.type === 2" :label="$t('menu.button_name')" prop="title">
-        <el-input v-model="form.title" :placeholder="$t('menu.button_name')" />
+      <el-form-item
+        v-if="form.type === 2"
+        :label="$t('menu.button_name')"
+        prop="title"
+      >
+        <el-input
+          v-model="form.title"
+          :placeholder="$t('menu.button_name')"
+        />
       </el-form-item>
-      <el-form-item v-if="form.type !== 2" :label="$t('menu.menu_sort')" prop="menuSort">
-        <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" />
+      <el-form-item
+        v-if="form.type !== 2"
+        :label="$t('menu.menu_sort')"
+        prop="menuSort"
+      >
+        <el-input-number
+          v-model.number="form.menuSort"
+          :min="0"
+          :max="999"
+          controls-position="right"
+        />
       </el-form-item>
-      <el-form-item :label="$t('menu.parent_category')" prop="pid">
+      <el-form-item
+        :label="$t('menu.parent_category')"
+        prop="pid"
+      >
         <treeselect
           v-model="form.pid"
           :disabled="formType!=='add'"
@@ -42,7 +107,10 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="save">{{ $t('commons.reset') }}</el-button>
+        <el-button
+          type="primary"
+          @click="save"
+        >{{ $t('commons.reset') }}</el-button>
         <el-button @click="reset">{{ $t('commons.confirm') }}</el-button>
       </el-form-item>
     </el-form>
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index a44d5ebe21..7be7298c0d 100644
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@@ -6,7 +6,12 @@
       @search="search"
     >
       <template #toolbar>
-        <fu-table-button v-permission="['menu:add']" icon="el-icon-circle-plus-outline" :label="$t('menu.create')" @click="create" />
+        <fu-table-button
+          v-permission="['menu:add']"
+          icon="el-icon-circle-plus-outline"
+          :label="$t('menu.create')"
+          @click="create"
+        />
       </template>
 
       <el-table
@@ -19,19 +24,34 @@
       >
 
         <!-- <el-table-column type="selection" fix /> -->
-        <el-table-column :show-overflow-tooltip="true" :label="$t('menu.tile')" prop="title" />
-        <el-table-column prop="icon" :label="$t('commons.icon')" align="center">
+        <el-table-column
+          :show-overflow-tooltip="true"
+          :label="$t('menu.tile')"
+          prop="title"
+        />
+        <el-table-column
+          prop="icon"
+          :label="$t('commons.icon')"
+          align="center"
+        >
           <template slot-scope="scope">
             <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
           </template>
         </el-table-column>
-        <el-table-column prop="createTime" :label="$t('menu.create_time')">
-          <template v-slot:default="scope">
+        <el-table-column
+          prop="createTime"
+          :label="$t('menu.create_time')"
+        >
+          <template #default="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
 
-        <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
+        <fu-table-operations
+          :buttons="buttons"
+          :label="$t('commons.operating')"
+          fix
+        />
       </el-table>
     </tree-table>
 
@@ -43,52 +63,154 @@
       :destroy-on-close="true"
       @closed="closeFunc"
     >
-      <el-form ref="menuForm" inline :model="form" :rules="rule" size="small" label-width="80px">
+      <el-form
+        ref="menuForm"
+        inline
+        :model="form"
+        :rules="rule"
+        size="small"
+        label-width="80px"
+      >
 
-        <el-form-item label="菜单类型" prop="type">
-          <el-radio-group v-model="form.type" size="mini" :disabled="formType!=='add'" style="width: 179px">
+        <el-form-item
+          label="菜单类型"
+          prop="type"
+        >
+          <el-radio-group
+            v-model="form.type"
+            size="mini"
+            :disabled="formType!=='add'"
+            style="width: 179px"
+          >
             <el-radio-button label="0">{{ $t('commons.catalogue') }} </el-radio-button>
             <el-radio-button label="1">{{ $t('commons.menu') }} </el-radio-button>
             <el-radio-button label="2">{{ $t('commons.button') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-show="form.type!== 2" :label="$t('commons.icon')" prop="icon">
+        <el-form-item
+          v-show="form.type!== 2"
+          :label="$t('commons.icon')"
+          prop="icon"
+        >
           <el-popover
             placement="bottom-start"
             width="425"
             trigger="click"
             @show="$refs['iconSelect'].reset()"
           >
-            <IconSelect ref="iconSelect" @selected="selected" />
-            <el-input slot="reference" v-model="form.icon" style="width: 450px;" :placeholder="$t('menu.select_icon')" readonly>
-              <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
-              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+            <IconSelect
+              ref="iconSelect"
+              @selected="selected"
+            />
+            <el-input
+              slot="reference"
+              v-model="form.icon"
+              style="width: 450px;"
+              :placeholder="$t('menu.select_icon')"
+              readonly
+            >
+              <svg-icon
+                v-if="form.icon"
+                slot="prefix"
+                :icon-class="form.icon"
+                class="el-input__icon"
+                style="height: 32px;width: 16px;"
+              />
+              <i
+                v-else
+                slot="prefix"
+                class="el-icon-search el-input__icon"
+              />
             </el-input>
           </el-popover>
         </el-form-item>
 
-        <el-form-item v-if="form.type !== 2" :label="$t('menu.tile')" prop="title">
-          <el-input v-model="form.title" :style=" form.type === '0' ? 'width: 450px' : 'width: 179px'" :placeholder="$t('menu.tile')" />
+        <el-form-item
+          v-if="form.type !== 2"
+          :label="$t('menu.tile')"
+          prop="title"
+        >
+          <el-input
+            v-model="form.title"
+            :style=" form.type === '0' ? 'width: 450px' : 'width: 179px'"
+            :placeholder="$t('menu.tile')"
+          />
         </el-form-item>
-        <el-form-item v-if="form.type === 2" :label="$t('menu.button_name')" prop="title">
-          <el-input v-model="form.title" :placeholder="$t('menu.button_name')" style="width: 179px;" />
+        <el-form-item
+          v-if="form.type === 2"
+          :label="$t('menu.button_name')"
+          prop="title"
+        >
+          <el-input
+            v-model="form.title"
+            :placeholder="$t('menu.button_name')"
+            style="width: 179px;"
+          />
         </el-form-item>
-        <el-form-item v-show="form.type !== 0" :label="$t('menu.authority_identification')" prop="permission">
-          <el-input v-model="form.permission" :disabled="form.iframe || formType!=='add'" :placeholder="$t('menu.authority_identification')" style="width: 179px;" />
+        <el-form-item
+          v-show="form.type !== 0"
+          :label="$t('menu.authority_identification')"
+          prop="permission"
+        >
+          <el-input
+            v-model="form.permission"
+            :disabled="form.iframe || formType!=='add'"
+            :placeholder="$t('menu.authority_identification')"
+            style="width: 179px;"
+          />
         </el-form-item>
-        <el-form-item v-if="form.type !== 2" label="$t('menu.route_addr')" prop="path">
-          <el-input v-model="form.path" :placeholder="$t('menu.route_addr')" :disabled="formType!=='add'" style="width: 179px;" />
+        <el-form-item
+          v-if="form.type !== 2"
+          label="$t('menu.route_addr')"
+          prop="path"
+        >
+          <el-input
+            v-model="form.path"
+            :placeholder="$t('menu.route_addr')"
+            :disabled="formType!=='add'"
+            style="width: 179px;"
+          />
         </el-form-item>
-        <el-form-item :label="$t('menu.menu_sort')" prop="menuSort">
-          <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 179px;" />
+        <el-form-item
+          :label="$t('menu.menu_sort')"
+          prop="menuSort"
+        >
+          <el-input-number
+            v-model.number="form.menuSort"
+            :min="0"
+            :max="999"
+            controls-position="right"
+            style="width: 179px;"
+          />
         </el-form-item>
-        <el-form-item v-show="!form.iframe && form.type === 1" :label="$t('menu.module_name')" prop="componentName">
-          <el-input v-model="form.componentName" :disabled="formType!=='add'" style="width: 179px;" placeholder="匹配组件内Name字段" />
+        <el-form-item
+          v-show="!form.iframe && form.type === 1"
+          :label="$t('menu.module_name')"
+          prop="componentName"
+        >
+          <el-input
+            v-model="form.componentName"
+            :disabled="formType!=='add'"
+            style="width: 179px;"
+            placeholder="匹配组件内Name字段"
+          />
         </el-form-item>
-        <el-form-item v-show="!form.iframe && form.type === 1" label="$t('menu.path')" prop="component">
-          <el-input v-model="form.component" :disabled="formType!=='add'" style="width: 179px;" :placeholder="$t('menu.path')" />
+        <el-form-item
+          v-show="!form.iframe && form.type === 1"
+          label="$t('menu.path')"
+          prop="component"
+        >
+          <el-input
+            v-model="form.component"
+            :disabled="formType!=='add'"
+            style="width: 179px;"
+            :placeholder="$t('menu.path')"
+          />
         </el-form-item>
-        <el-form-item :label="$t('menu.parent_category')" prop="pid">
+        <el-form-item
+          :label="$t('menu.parent_category')"
+          prop="pid"
+        >
           <treeselect
             v-model="form.pid"
             :disabled="formType!=='add'"
@@ -96,15 +218,24 @@
             :load-options="loadMenus"
             style="width: 450px;"
             :placeholder="$t('menu.parent_category')"
-            :noChildrenText="$t('commons.treeselect.no_children_text')"
-            :noOptionsText="$t('commons.treeselect.no_options_text')"
-            :noResultsText="$t('commons.treeselect.no_results_text')"
+            :no-children-text="$t('commons.treeselect.no_children_text')"
+            :no-options-text="$t('commons.treeselect.no_options_text')"
+            :no-results-text="$t('commons.treeselect.no_results_text')"
           />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" @click="createMenu('menuForm')">{{ $t('commons.confirm') }}</el-button>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          type="text"
+          @click="dialogVisible = false"
+        >{{ $t('commons.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          @click="createMenu('menuForm')"
+        >{{ $t('commons.confirm') }}</el-button>
       </div>
 
     </el-dialog>
@@ -289,7 +420,7 @@ export default {
       const result = []
 
       this.maps.forEach((value, key) => {
-        if (value.hasOwnProperty('row')) {
+        if (Object.prototype.hasOwnProperty.call(value, 'row')) {
           result.push(this.editNormalizer(value.row))
         }
       })
diff --git a/frontend/src/views/system/plugin/PluginCom.vue b/frontend/src/views/system/plugin/PluginCom.vue
index fddd1c2463..6640e45b68 100644
--- a/frontend/src/views/system/plugin/PluginCom.vue
+++ b/frontend/src/views/system/plugin/PluginCom.vue
@@ -47,17 +47,8 @@ export default {
       refId: null
     }
   },
-  created() {
-    this.refId = uuid.v1
-    if (this.componentName) {
-      this.showAsync = true
-      this.url = this.baseUrl + this.componentName
-    } else {
-      this.showAsync = false
-    }
-  },
   watch: {
-    'componentName': function () {
+    'componentName': function() {
       this.refId = uuid.v1
       if (this.componentName) {
         this.showAsync = true
@@ -67,6 +58,15 @@ export default {
       }
     }
   },
+  created() {
+    this.refId = uuid.v1
+    if (this.componentName) {
+      this.showAsync = true
+      this.url = this.baseUrl + this.componentName
+    } else {
+      this.showAsync = false
+    }
+  },
   methods: {
     // hasLicense
     executeAxios(options) {
diff --git a/frontend/src/views/system/plugin/dynamic.vue b/frontend/src/views/system/plugin/dynamic.vue
index afdc2252a6..6f315218d8 100644
--- a/frontend/src/views/system/plugin/dynamic.vue
+++ b/frontend/src/views/system/plugin/dynamic.vue
@@ -1,18 +1,44 @@
 <template>
-  <de-layout-content v-if="!noLayout && menuid !== 740" v-loading="jsname && !innerLoadingNames.includes(jsname) && $store.getters.loadingMap[$store.getters.currentPath]" :header="header" :back-name="backName">
-    <async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
+  <de-layout-content
+    v-if="!noLayout && menuid !== 740"
+    v-loading="jsname && !innerLoadingNames.includes(jsname) && $store.getters.loadingMap[$store.getters.currentPath]"
+    :header="header"
+    :back-name="backName"
+  >
+    <async-component
+      v-if="showAsync"
+      :url="url"
+      @execute-axios="executeAxios"
+      @on-add-languanges="addLanguages"
+      @on-plugin-layout="setLayoutInfo"
+      @plugin-call-back="pluginCallBack"
+    />
     <div v-else>
       <h1>未知组件无法展示</h1>
     </div>
   </de-layout-content>
   <div v-else-if="menuid === 740">
-    <async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
+    <async-component
+      v-if="showAsync"
+      :url="url"
+      @execute-axios="executeAxios"
+      @on-add-languanges="addLanguages"
+      @on-plugin-layout="setLayoutInfo"
+      @plugin-call-back="pluginCallBack"
+    />
     <div v-else>
       <h1>未知组件无法展示</h1>
     </div>
   </div>
   <div v-else>
-    <async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
+    <async-component
+      v-if="showAsync"
+      :url="url"
+      @execute-axios="executeAxios"
+      @on-add-languanges="addLanguages"
+      @on-plugin-layout="setLayoutInfo"
+      @plugin-call-back="pluginCallBack"
+    />
     <div v-else>
       <h1>未知组件无法展示</h1>
     </div>
@@ -25,7 +51,7 @@ import DeLayoutContent from '@/components/business/DeLayoutContent'
 import AsyncComponent from '@/components/AsyncComponent'
 import i18n from '@/lang'
 import bus from '@/utils/bus'
-import { execute, get } from '@/api/system/dynamic'
+import { execute } from '@/api/system/dynamic'
 export default {
   name: 'Dynamic',
   components: {
@@ -57,12 +83,12 @@ export default {
     }
   },
   watch: {
-    'menuid' : function() {
+    'menuid': function() {
       this.init()
     }
   },
   created() {
-   this.init()
+    this.init()
   },
 
   methods: {
diff --git a/frontend/src/views/system/plugin/index.vue b/frontend/src/views/system/plugin/index.vue
index acb687e30a..f4418f052a 100644
--- a/frontend/src/views/system/plugin/index.vue
+++ b/frontend/src/views/system/plugin/index.vue
@@ -4,14 +4,13 @@
   >
     <div class="top-install">
       <el-input
+        v-model="name"
         :placeholder="$t('components.by_plugin_name')"
         size="small"
         prefix-icon="el-icon-search"
-        v-model="name"
         clearable
         @blur="search"
-      >
-      </el-input>
+      />
       <el-upload
         v-permission="['plugin:upload']"
         :action="baseUrl + 'api/plugin/upload'"
@@ -34,18 +33,34 @@
         </deBtn>
       </el-upload>
     </div>
-    <div v-if="!data.length" class="plugin-cont">
-      <el-empty style="width: 100%" description="没有找到相关内容"></el-empty>
+    <div
+      v-if="!data.length"
+      class="plugin-cont"
+    >
+      <el-empty
+        style="width: 100%"
+        description="没有找到相关内容"
+      />
     </div>
-    <div v-else class="plugin-cont">
-      <div v-for="ele in data" :key="ele.pluginId" class="de-card-plugin">
+    <div
+      v-else
+      class="plugin-cont"
+    >
+      <div
+        v-for="ele in data"
+        :key="ele.pluginId"
+        class="de-card-plugin"
+      >
         <div class="card-info">
           <div class="info-top">
             <el-image
               :src="`/api/pluginCommon/staticInfo/${ele.moduleName}/svg`"
             >
-              <div slot="error" class="image-slot">
-                <img  :src="imgDefault"/>
+              <div
+                slot="error"
+                class="image-slot"
+              >
+                <img :src="imgDefault">
               </div>
             </el-image>
             <p class="title">{{ ele.descript }}</p>
@@ -59,14 +74,25 @@
             </el-tooltip>
           </div>
           <div class="info-left">
-            <p class="list name" v-for="item in listName" :key="item">
+            <p
+              v-for="item in listName"
+              :key="item"
+              class="list name"
+            >
               {{ $t(`components.${item}`) }}
             </p>
           </div>
           <div class="info-right">
-            <p class="list value" v-for="item in listValue" :key="item">
+            <p
+              v-for="item in listValue"
+              :key="item"
+              class="list value"
+            >
               <template v-if="item === 'cost' && !ele.cost">
-                <el-tag size="mini" type="success">{{ $t('components.free')}}</el-tag>
+                <el-tag
+                  size="mini"
+                  type="success"
+                >{{ $t('components.free') }}</el-tag>
               </template>
               <template v-else>
                 {{ ele[item] }}
@@ -74,7 +100,10 @@
             </p>
           </div>
         </div>
-        <div class="card-method" :class="`btn-${numPlugin}`">
+        <div
+          class="card-method"
+          :class="`btn-${numPlugin}`"
+        >
           <el-upload
             v-permission="['plugin:upload']"
             :action="baseUrl + 'api/plugin/update/' + ele.pluginId"
@@ -89,10 +118,13 @@
             :headers="headers"
           >
             <div class="btn-plugin update">
-              <i class="el-icon-more"></i>{{ $t('dataset.update')}}
+              <i class="el-icon-more" />{{ $t('dataset.update') }}
             </div>
           </el-upload>
-          <el-divider v-if="numPlugin === 2" direction="vertical"></el-divider>
+          <el-divider
+            v-if="numPlugin === 2"
+            direction="vertical"
+          />
           <el-tooltip
             class="item"
             effect="dark"
@@ -100,21 +132,21 @@
             placement="top"
           >
             <div
-              :class="[{ 'is-disable': btnDisabled(ele) }]"
               v-if="checkPermission(['plugin:uninstall']) && btnDisabled(ele)"
-              @click="del(ele)"
+              :class="[{ 'is-disable': btnDisabled(ele) }]"
               class="btn-plugin uninstall"
+              @click="del(ele)"
             >
-              <i class="el-icon-more"></i> {{$t('components.uninstall')}}
+              <i class="el-icon-more" /> {{ $t('components.uninstall') }}
             </div>
           </el-tooltip>
           <div
-            :class="[{ 'is-disable': btnDisabled(ele) }]"
             v-if="checkPermission(['plugin:uninstall']) && !btnDisabled(ele)"
-            @click="del(ele)"
+            :class="[{ 'is-disable': btnDisabled(ele) }]"
             class="btn-plugin uninstall"
+            @click="del(ele)"
           >
-            <i class="el-icon-more"></i>{{$t('components.uninstall')}}
+            <i class="el-icon-more" />{{ $t('components.uninstall') }}
           </div>
         </div>
       </div>
@@ -123,126 +155,124 @@
 </template>
 
 <script>
-import DeLayoutContent from "@/components/business/DeLayoutContent";
+import DeLayoutContent from '@/components/business/DeLayoutContent'
 
-import { checkPermission } from "@/utils/permission";
-import { formatCondition, formatQuickCondition } from "@/utils/index";
-import { pluginLists, uninstall } from "@/api/system/plugin";
-import { getToken } from "@/utils/auth";
-import msgCfm from "@/components/msgCfm/index";
-import { log } from '@antv/g2plot/lib/utils';
+import { checkPermission } from '@/utils/permission'
+import { pluginLists, uninstall } from '@/api/system/plugin'
+import { getToken } from '@/utils/auth'
+import msgCfm from '@/components/msgCfm/index'
 export default {
   components: { DeLayoutContent },
   mixins: [msgCfm],
   data() {
     return {
-      listName: ["cost", "developer", "edition", "installation_time"],
-      name: "",
-      listValue: ["cost", "creator", "version", "installTime"],
+      listName: ['cost', 'developer', 'edition', 'installation_time'],
+      name: '',
+      listValue: ['cost', 'creator', 'version', 'installTime'],
       data: [],
       imgDefault: require('@/assets/icon_nopicture_filled.png'),
       uploading: false,
       baseUrl: process.env.VUE_APP_BASE_API,
       fileList: [],
       numPlugin: 0,
-      headers: { Authorization: getToken() },
-    };
+      headers: { Authorization: getToken() }
+    }
   },
   mounted() {
-    this.search();
-    this.bindKey();
+    this.search()
+    this.bindKey()
     this.authValidate()
   },
   destroyed() {
-    this.unBindKey();
+    this.unBindKey()
   },
   methods: {
     authValidate() {
       this.numPlugin = Number(checkPermission(['plugin:uninstall'])) + Number(checkPermission(['plugin:upload']))
     },
     entryKey(event) {
-      const keyCode = event.keyCode;
+      const keyCode = event.keyCode
       if (keyCode === 13) {
-        this.search();
+        this.search()
       }
     },
     bindKey() {
-      document.addEventListener("keypress", this.entryKey);
+      document.addEventListener('keypress', this.entryKey)
     },
     unBindKey() {
-      document.removeEventListener("keypress", this.entryKey);
+      document.removeEventListener('keypress', this.entryKey)
     },
     search() {
-      const param = {};
+      const param = {}
       if (this.name) {
         param.conditions = [
           {
-            field: "name",
-            operator: "like",
-            value: this.name,
-          },
-        ];
+            field: 'name',
+            operator: 'like',
+            value: this.name
+          }
+        ]
       }
       pluginLists(0, 0, param).then((response) => {
-        this.data = response.data.listObject;
+        this.data = response.data.listObject
         this.data.forEach((ele) => {
           if (ele.cost) {
-            ele.cost = ele.cost.toLocaleString();
+            ele.cost = ele.cost.toLocaleString()
           }
           ele.installTime = ele.installTime
-            ? new Date(ele.installTime).format("yyyy-MM-dd hh:mm:ss")
-            : "-";
-        });
-      });
+            ? new Date(ele.installTime).format('yyyy-MM-dd hh:mm:ss')
+            : '-'
+        })
+      })
     },
     beforeUpload(file) {
-      this.uploading = true;
+      this.uploading = true
     },
     uploadFail(response, file, fileList) {
-      const msg = (response && response.message) || "安装失败";
+      const msg = (response && response.message) || '安装失败'
       try {
-        const result = JSON.parse(msg);
+        const result = JSON.parse(msg)
         if (result && result.message) {
-          this.$error(result.message);
-          this.uploading = false;
+          this.$error(result.message)
+          this.uploading = false
         }
-        return;
+        return
       } catch (e) {
-        console.error(e);
+        console.error(e)
       }
-      this.$error(msg);
-      this.uploading = false;
+      this.$error(msg)
+      this.uploading = false
     },
     uploadSuccess(response, file, fileList) {
-      this.uploading = false;
-      this.search();
+      this.uploading = false
+      this.search()
     },
 
     del(row) {
-      if (row.pluginId < 4) return;
+      if (row.pluginId < 4) return
       const options = {
-        title: "components.uninstall_the_plugin",
-        content: "components.it_takes_effect",
-        confirmButtonText: this.$t("components.uninstall"),
-        type: "primary",
+        title: 'components.uninstall_the_plugin',
+        content: 'components.it_takes_effect',
+        confirmButtonText: this.$t('components.uninstall'),
+        type: 'primary',
         cb: () => {
           uninstall(row.pluginId)
             .then((res) => {
-              this.search();
-              this.openMessageSuccess("plugin.un_install_success");
+              this.search()
+              this.openMessageSuccess('plugin.un_install_success')
             })
             .catch(() => {
-              this.$error(this.$t("plugin.un_install_error"));
-            });
-        },
-      };
-      this.handlerConfirm(options);
+              this.$error(this.$t('plugin.un_install_error'))
+            })
+        }
+      }
+      this.handlerConfirm(options)
     },
     btnDisabled(row) {
-      return row.pluginId < 4;
-    },
-  },
-};
+      return row.pluginId < 4
+    }
+  }
+}
 </script>
 <style lang="scss">
 .top-install {
diff --git a/frontend/src/views/system/task/DatasetTaskList.vue b/frontend/src/views/system/task/DatasetTaskList.vue
index 8f06ec7d61..17bcfb3d88 100644
--- a/frontend/src/views/system/task/DatasetTaskList.vue
+++ b/frontend/src/views/system/task/DatasetTaskList.vue
@@ -13,7 +13,10 @@
           @click="confirmDelete"
         >{{ $t("organization.delete") }}</deBtn>
       </el-col>
-      <el-col :span="14" class="right-user">
+      <el-col
+        :span="14"
+        class="right-user"
+      >
         <el-input
           ref="search"
           v-model="nickName"
@@ -35,9 +38,18 @@
           ({{ filterTexts.length }})
         </template>
         </deBtn>
-        <el-dropdown trigger="click" :hide-on-click="false">
-          <deBtn secondary icon="el-icon-setting">{{ $t("user.list") }}</deBtn>
-          <el-dropdown-menu slot="dropdown" class="list-colums-slect">
+        <el-dropdown
+          trigger="click"
+          :hide-on-click="false"
+        >
+          <deBtn
+            secondary
+            icon="el-icon-setting"
+          >{{ $t("user.list") }}</deBtn>
+          <el-dropdown-menu
+            slot="dropdown"
+            class="list-colums-slect"
+          >
             <p class="title">{{ $t("user.list_info") }}</p>
             <el-checkbox
               v-model="checkAll"
@@ -58,7 +70,10 @@
         </el-dropdown>
       </el-col>
     </el-row>
-    <div v-if="filterTexts.length" class="filter-texts">
+    <div
+      v-if="filterTexts.length"
+      class="filter-texts"
+    >
       <span class="sum">{{ paginationConfig.total }}</span>
       <span class="title">{{ $t("user.result_one") }}</span>
       <el-divider direction="vertical" />
@@ -68,8 +83,15 @@
         @click="scrollPre"
       />
       <div class="filter-texts-container">
-        <p v-for="(ele, index) in filterTexts" :key="ele" class="text">
-          {{ ele }} <i class="el-icon-close" @click="clearOneFilter(index)" />
+        <p
+          v-for="(ele, index) in filterTexts"
+          :key="ele"
+          class="text"
+        >
+          {{ ele }} <i
+            class="el-icon-close"
+            @click="clearOneFilter(index)"
+          />
         </p>
       </div>
       <i
@@ -100,7 +122,10 @@
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       >
-        <el-table-column type="selection" width="55" />
+        <el-table-column
+          type="selection"
+          width="55"
+        />
         <el-table-column
           key="name"
           min-width="178"
@@ -166,7 +191,13 @@
             >{{
                $t(`dataset.${scope.row.lastExecStatus.toLocaleLowerCase()}`)
              }}
-              <svg-icon v-if="scope.row.lastExecStatus === 'Error'" style="cursor: pointer;" icon-class="icon-maybe" class="field-icon-location" @click="showErrorMassage(scope.row.msg)" />
+              <svg-icon
+                v-if="scope.row.lastExecStatus === 'Error'"
+                style="cursor: pointer;"
+                icon-class="icon-maybe"
+                class="field-icon-location"
+                @click="showErrorMassage(scope.row.msg)"
+              />
             </span>
             <span v-else>-</span>
           </template>
@@ -228,8 +259,14 @@
               trigger="click"
               @command="(type) => handleCommand(type, scope.row)"
             >
-              <i class="el-icon-more" @click.stop />
-              <el-dropdown-menu slot="dropdown" class="de-card-dropdown">
+              <i
+                class="el-icon-more"
+                @click.stop
+              />
+              <el-dropdown-menu
+                slot="dropdown"
+                class="de-card-dropdown"
+              >
                 <template
                   v-if="!['Stopped', 'Exec'].includes(scope.row.status)"
                 >
@@ -266,7 +303,10 @@
     </div>
 
     <keep-alive>
-      <filterUser ref="filterUser" @search="filterDraw" />
+      <filterUser
+        ref="filterUser"
+        @search="filterDraw"
+      />
     </keep-alive>
 
     <el-dialog
@@ -277,8 +317,14 @@
       class="de-dialog-form"
     >
       <span class="err-msg">{{ error_massage }}</span>
-      <span slot="footer" class="dialog-footer">
-        <deBtn secondary @click="show_error_massage = false">{{
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <deBtn
+          secondary
+          @click="show_error_massage = false"
+        >{{
           $t("dataset.close")
         }}</deBtn>
       </span>
@@ -319,8 +365,6 @@ const columnOptions = [
 ]
 import { formatOrders } from '@/utils/index'
 import { datasetTaskList, post } from '@/api/dataset/dataset'
-import cron from '@/components/cron/cron'
-import TableSelector from '@/views/chart/view/TableSelector'
 import { hasDataPermission } from '@/utils/permission'
 import GridTable from '@/components/gridTable/index.vue'
 import filterUser from './filterUser.vue'
@@ -330,7 +374,7 @@ import keyEnter from '@/components/msgCfm/keyEnter.js'
 
 export default {
   name: 'DatasetTaskList',
-  components: { GridTable, cron, filterUser, TableSelector },
+  components: { GridTable, filterUser },
   mixins: [msgCfm, keyEnter],
   props: {
     transCondition: {
@@ -440,16 +484,14 @@ export default {
       switch (key) {
         case 'exec':
           this.execTask(row)
-          return
           break
         case 'delete':
           this.deleteTask(row)
-          return
           break
         default:
+          this.changeTaskStatus(row)
           break
       }
-      this.changeTaskStatus(row)
     },
     handleSelectionChange(val) {
       this.multipleSelection = val
diff --git a/frontend/src/views/system/task/TableSelector.vue b/frontend/src/views/system/task/TableSelector.vue
index 42ea122dc1..b34663b749 100644
--- a/frontend/src/views/system/task/TableSelector.vue
+++ b/frontend/src/views/system/task/TableSelector.vue
@@ -15,7 +15,10 @@
           prefix-icon="el-icon-search"
           clearable
         />
-        <div class="tree" v-loading="treeLoading">
+        <div
+          v-loading="treeLoading"
+          class="tree"
+        >
           <el-tree
             ref="datasetTreeRef"
             current-node-key="id"
@@ -26,9 +29,12 @@
             :filter-node-method="filterNode"
             @node-click="nodeClick"
           >
-            <span slot-scope="{ data }" class="custom-tree-node">
+            <span
+              slot-scope="{ data }"
+              class="custom-tree-node"
+            >
               <span v-if="data.modelInnerType === 'group'">
-                <svg-icon icon-class="scene"/>
+                <svg-icon icon-class="scene" />
                 <span
                   style="
                     margin-left: 6px;
@@ -37,8 +43,7 @@
                     text-overflow: ellipsis;
                   "
                   :title="data.name"
-                  >{{ data.name }}</span
-                >
+                >{{ data.name }}</span>
               </span>
               <span v-else>
                 <span>
@@ -55,18 +60,28 @@
                     text-overflow: ellipsis;
                   "
                   :title="data.name"
-                  >{{ data.name }}</span
-                >
+                >{{ data.name }}</span>
               </span>
             </span>
           </el-tree>
         </div>
       </div>
-      <div v-loading="dataLoading" class="dataset-tree-table">
-        <p v-if="tableName" class="table-name">
+      <div
+        v-loading="dataLoading"
+        class="dataset-tree-table"
+      >
+        <p
+          v-if="tableName"
+          class="table-name"
+        >
           {{ tableName }} <span>{{ $t("chart.preview_100_data") }}</span>
         </p>
-        <el-table border v-if="table.length" style="width: 100%" :data="table">
+        <el-table
+          v-if="table.length"
+          border
+          style="width: 100%"
+          :data="table"
+        >
           <el-table-column
             v-for="field in fields"
             :key="field.dataeaseName"
@@ -83,14 +98,27 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-empty v-else :description="$t('暂无数据')"></el-empty>
+        <el-empty
+          v-else
+          :description="$t('暂无数据')"
+        />
       </div>
     </div>
-    <div slot="footer" class="dialog-footer">
-      <deBtn secondary @click="selectDatasetFlag = false">{{
+    <div
+      slot="footer"
+      class="dialog-footer"
+    >
+      <deBtn
+        secondary
+        @click="selectDatasetFlag = false"
+      >{{
         $t("chart.cancel")
       }}</deBtn>
-      <deBtn @click="setIdName" :disabled="!tableName" type="primary">{{
+      <deBtn
+        :disabled="!tableName"
+        type="primary"
+        @click="setIdName"
+      >{{
         $t("fu.table.ok")
       }}</deBtn>
     </div>
@@ -98,117 +126,117 @@
 </template>
 
 <script>
-import { queryAuthModel } from "@/api/authModel/authModel";
-import { post } from "@/api/dataset/dataset";
+import { queryAuthModel } from '@/api/authModel/authModel'
+import { post } from '@/api/dataset/dataset'
 
 export default {
   props: {
     customType: {
       type: Array,
       required: false,
-      default: null,
+      default: null
     },
     mode: {
       type: Number,
       required: false,
-      default: -1,
+      default: -1
     },
     privileges: {
       type: String,
       required: false,
-      default: "use",
+      default: 'use'
     },
     clearEmptyDir: {
       type: Boolean,
       required: false,
-      default: false,
-    },
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.datasetTreeRef.filter(val);
-    },
+      default: false
+    }
   },
   data() {
     return {
       selectDatasetFlag: false,
-      tableName: "",
-      tableId: "",
+      tableName: '',
+      tableId: '',
       treeData: [],
       table: [],
-      filterText: "",
+      filterText: '',
       fields: [],
       dataLoading: false,
-      treeLoading: false,
-    };
+      treeLoading: false
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.datasetTreeRef.filter(val)
+    }
   },
   mounted() {
-    this.treeNode();
+    this.treeNode()
   },
   methods: {
     iconFormate(deType) {
-      const val = ["text", "time", "value", "value", "location"][deType];
+      const val = ['text', 'time', 'value', 'value', 'location'][deType]
       return {
         class: `field-icon-${val}`,
-        iconClass: `field_${val}`,
-      };
+        iconClass: `field_${val}`
+      }
     },
     treeNode() {
-      this.treeLoading = true;
+      this.treeLoading = true
       const modelInnerTypeArray = Array.isArray(this.customType)
-        ? [...this.customType, "group"]
-        : null;
+        ? [...this.customType, 'group']
+        : null
       queryAuthModel(
         {
-          modelType: "dataset",
+          modelType: 'dataset',
           privileges: this.privileges,
           datasetMode: this.mode,
           clearEmptyDir: this.clearEmptyDir,
           mode: this.mode < 0 ? null : this.mode,
-          modelInnerTypeArray,
+          modelInnerTypeArray
         },
         true
       )
         .then((res) => {
-          this.treeData = res.data;
+          this.treeData = res.data
         })
         .finally(() => {
-          this.treeLoading = false;
-        });
+          this.treeLoading = false
+        })
     },
     filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     },
     initData(table) {
-      this.dataLoading = true;
-      table.row = 100;
+      this.dataLoading = true
+      table.row = 100
       table.previewForTask = true
-      post("/dataset/table/getPreviewData/1/100", table, false, 30000)
+      post('/dataset/table/getPreviewData/1/100', table, false, 30000)
         .then((response) => {
-          this.fields = response.data.fields;
-          this.table = response.data.data;
+          this.fields = response.data.fields
+          this.table = response.data.data
         })
         .finally((res) => {
-          this.dataLoading = false;
-        });
+          this.dataLoading = false
+        })
     },
     init() {
-      this.selectDatasetFlag = true;
+      this.selectDatasetFlag = true
     },
     setIdName() {
-      this.$emit("getTableId", this.tableId, this.tableName);
-      this.selectDatasetFlag = false;
+      this.$emit('getTableId', this.tableId, this.tableName)
+      this.selectDatasetFlag = false
     },
     nodeClick(data) {
-      const { id, name, modelInnerType: type } = data;
-      if (type === "group") return;
-      this.tableName = name;
-      this.tableId = id;
-      this.initData(data);
-    },
-  },
-};
+      const { id, name, modelInnerType: type } = data
+      if (type === 'group') return
+      this.tableName = name
+      this.tableId = id
+      this.initData(data)
+    }
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/frontend/src/views/system/task/TaskRecord.vue b/frontend/src/views/system/task/TaskRecord.vue
index da9aa30d64..1dab58a3aa 100644
--- a/frontend/src/views/system/task/TaskRecord.vue
+++ b/frontend/src/views/system/task/TaskRecord.vue
@@ -2,9 +2,15 @@
   <div class="dataset-on-time">
     <el-row class="top-operate">
       <el-col :span="10">
-        <deBtn secondary @click="exportConfirm">{{ $t("zip.export") }}</deBtn>
+        <deBtn
+          secondary
+          @click="exportConfirm"
+        >{{ $t("zip.export") }}</deBtn>
       </el-col>
-      <el-col :span="14" class="right-user">
+      <el-col
+        :span="14"
+        class="right-user"
+      >
         <el-input
           ref="search"
           v-model="nickName"
@@ -28,7 +34,10 @@
         </deBtn>
       </el-col>
     </el-row>
-    <div v-if="filterTexts.length" class="filter-texts">
+    <div
+      v-if="filterTexts.length"
+      class="filter-texts"
+    >
       <span class="sum">{{ paginationConfig.total }}</span>
       <span class="title">{{ $t("user.result_one") }}</span>
       <el-divider direction="vertical" />
@@ -38,8 +47,15 @@
         @click="scrollPre"
       />
       <div class="filter-texts-container">
-        <p v-for="(ele, index) in filterTexts" :key="ele" class="text">
-          {{ ele }} <i class="el-icon-close" @click="clearOneFilter(index)" />
+        <p
+          v-for="(ele, index) in filterTexts"
+          :key="ele"
+          class="text"
+        >
+          {{ ele }} <i
+            class="el-icon-close"
+            @click="clearOneFilter(index)"
+          />
         </p>
       </div>
       <i
@@ -54,7 +70,10 @@
         @click="clearFilter"
       >{{ $t("user.clear_filter") }}</el-button>
     </div>
-    <div id="resize-for-filter" class="table-container">
+    <div
+      id="resize-for-filter"
+      class="table-container"
+    >
       <grid-table
         v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
         :table-data="data"
@@ -63,7 +82,10 @@
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       >
-        <el-table-column prop="name" :label="$t('dataset.task_name')">
+        <el-table-column
+          prop="name"
+          :label="$t('dataset.task_name')"
+        >
           <template slot-scope="scope">
             <span>
               <el-link
@@ -80,31 +102,49 @@
           prop="datasetName"
           :label="$t('dataset.task.dataset')"
         />
-        <el-table-column prop="startTime" :label="$t('dataset.start_time')">
+        <el-table-column
+          prop="startTime"
+          :label="$t('dataset.start_time')"
+        >
           <template slot-scope="scope">
             <span>{{ scope.row.startTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="endTime" :label="$t('dataset.end_time')">
+        <el-table-column
+          prop="endTime"
+          :label="$t('dataset.end_time')"
+        >
           <template slot-scope="scope">
             <span>{{ scope.row.endTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column prop="status" :label="$t('dataset.status')">
+        <el-table-column
+          prop="status"
+          :label="$t('dataset.status')"
+        >
           <template slot-scope="scope">
             <span
               v-if="scope.row.status"
               :class="[`de-${scope.row.status}-pre`, 'de-status']"
-              >{{ $t(`dataset.${scope.row.status.toLocaleLowerCase()}`) }}
-            <svg-icon style="cursor: pointer;" v-if="scope.row.status === 'Error'"  @click="showErrorMassage(scope.row.info)" icon-class="icon-maybe" class="field-icon-location" />
+            >{{ $t(`dataset.${scope.row.status.toLocaleLowerCase()}`) }}
+              <svg-icon
+                v-if="scope.row.status === 'Error'"
+                style="cursor: pointer;"
+                icon-class="icon-maybe"
+                class="field-icon-location"
+                @click="showErrorMassage(scope.row.info)"
+              />
             </span>
             <span v-else>-</span>
           </template>
         </el-table-column>
       </grid-table>
       <keep-alive>
-        <filterUser ref="filterUser" @search="filterDraw" />
+        <filterUser
+          ref="filterUser"
+          @search="filterDraw"
+        />
       </keep-alive>
     </div>
     <el-dialog
@@ -115,8 +155,14 @@
       class="de-dialog-form"
     >
       <span class="err-msg">{{ error_massage }}</span>
-      <span slot="footer" class="dialog-footer">
-        <deBtn secondary @click="show_error_massage = false">{{
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <deBtn
+          secondary
+          @click="show_error_massage = false"
+        >{{
           $t("dataset.close")
         }}</deBtn>
       </span>
@@ -126,9 +172,7 @@
 
 <script>
 import {
-  formatCondition,
-  formatOrders,
-  formatQuickCondition
+  formatOrders
 } from '@/utils/index'
 import { exportExcel, post } from '@/api/dataset/dataset'
 import GridTable from '@/components/gridTable/index.vue'
diff --git a/frontend/src/views/system/task/dataset.vue b/frontend/src/views/system/task/dataset.vue
index 62a590e1ec..de05f7101a 100644
--- a/frontend/src/views/system/task/dataset.vue
+++ b/frontend/src/views/system/task/dataset.vue
@@ -1,11 +1,18 @@
 <template>
   <de-layout-content>
-    <div class="organization">
-      <el-tabs v-model="tabActive" @tab-click="changeTab">
-        <el-tab-pane :label="$t('dataset.task.list')" name="DatasetTaskList">
-        </el-tab-pane>
-        <el-tab-pane :label="$t('dataset.task.record')" name="TaskRecord">
-        </el-tab-pane>
+    <div class="de-task-record">
+      <el-tabs
+        v-model="tabActive"
+        @tab-click="changeTab"
+      >
+        <el-tab-pane
+          :label="$t('dataset.task.list')"
+          name="DatasetTaskList"
+        />
+        <el-tab-pane
+          :label="$t('dataset.task.record')"
+          name="TaskRecord"
+        />
       </el-tabs>
       <div class="tabs-container">
         <dataset-task-list
@@ -27,118 +34,94 @@
 </template>
 
 <script>
-import DeLayoutContent from "@/components/business/DeLayoutContent";
+import DeLayoutContent from '@/components/business/DeLayoutContent'
 
-import DatasetTaskList from "@/views/system/task/DatasetTaskList";
-import TaskRecord from "@/views/system/task/TaskRecord";
+import DatasetTaskList from '@/views/system/task/DatasetTaskList'
+import TaskRecord from '@/views/system/task/TaskRecord'
 
-import bus from "@/utils/bus";
-import { mapGetters } from "vuex";
+import bus from '@/utils/bus'
+import { mapGetters } from 'vuex'
 export default {
   components: { DeLayoutContent, DatasetTaskList, TaskRecord },
   data() {
     return {
-      tabActive: "DatasetTaskList",
+      tabActive: 'DatasetTaskList',
       transCondition: {},
-      task: null,
-    };
+      task: null
+    }
   },
   computed: {
-    ...mapGetters(["permission_routes"]),
+    ...mapGetters(['permission_routes'])
   },
   mounted() {
-    bus.$on("to-msg-dataset", this.toMsgShare);
+    bus.$on('to-msg-dataset', this.toMsgShare)
   },
   beforeDestroy() {
-    bus.$off("to-msg-dataset", this.toMsgShare);
+    bus.$off('to-msg-dataset', this.toMsgShare)
   },
   created() {
-    this.$store.dispatch("app/toggleSideBarHide", false);
-    const routerParam = this.$router.currentRoute.params;
+    this.$store.dispatch('app/toggleSideBarHide', false)
+    const routerParam = this.$router.currentRoute.params
     routerParam &&
       this.$nextTick(() => {
-        this.toMsgShare(routerParam);
-      });
+        this.toMsgShare(routerParam)
+      })
   },
   methods: {
     changeTab() {
-      this.task = null;
-      this.transCondition = {};
+      this.task = null
+      this.transCondition = {}
     },
-    jumpTaskRecord({ id: taskId, name}) {
-      this.transCondition = { taskId, name };
-      this.tabActive = "TaskRecord";
+    jumpTaskRecord({ id: taskId, name }) {
+      this.transCondition = { taskId, name }
+      this.tabActive = 'TaskRecord'
     },
     jumpTask({ taskId, name }) {
-      this.transCondition = { taskId, name };
-      this.tabActive = "DatasetTaskList";
+      this.transCondition = { taskId, name }
+      this.tabActive = 'DatasetTaskList'
     },
     toMsgShare(routerParam) {
       if (routerParam !== null && routerParam.msgNotification) {
-        const panelShareTypeIds = [4, 5, 6];
+        const panelShareTypeIds = [4, 5, 6]
         // 说明是从消息通知跳转过来的
         if (panelShareTypeIds.includes(routerParam.msgType)) {
           // 是数据集同步
           if (routerParam.sourceParam) {
-            this.openSystem();
+            this.openSystem()
             try {
-              const msgParam = JSON.parse(routerParam.sourceParam);
+              const msgParam = JSON.parse(routerParam.sourceParam)
               // this.param = msgParam.tableId
 
               this.$nextTick(() => {
                 // 目标组件存在定时器 这种方式会被定时器阻塞
                 // this.$refs.task_record && this.$refs.task_record.msg2Current && this.$refs.task_record.msg2Current(msgParam)
-                this.task = msgParam;
-                this.tabActive = "TaskRecord";
-              });
+                this.task = msgParam
+                this.tabActive = 'TaskRecord'
+              })
             } catch (error) {
-              console.error(error);
+              console.error(error)
             }
           }
         }
       }
     },
     openSystem() {
-      const path = "/system";
+      const path = '/system'
       let route = this.permission_routes.find(
-        (item) => item.path === "/" + path.split("/")[1]
-      );
+        (item) => item.path === '/' + path.split('/')[1]
+      )
       // 如果找不到这个路由，说明是首页
       if (!route) {
-        route = this.permission_routes.find((item) => item.path === "/");
+        route = this.permission_routes.find((item) => item.path === '/')
       }
-      this.$store.commit("permission/SET_CURRENT_ROUTES", route);
+      this.$store.commit('permission/SET_CURRENT_ROUTES', route)
       // this.setSidebarHide(route)
-    },
-  },
-};
+    }
+  }
+}
 </script>
-
-<style lang="scss" scoped>
-.de-msg-radio-class {
-  padding: 0 5px;
-  ::v-deep .el-radio-button__inner {
-    border-radius: 4px 4px 4px 4px !important;
-    border-left: 1px solid #dcdfe6 !important;
-    padding: 10px 10px;
-  }
-
-  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-    color: #fff;
-    background-color: #0a7be0;
-    border-color: #0a7be0;
-    -webkit-box-shadow: 0px 0 0 0 #0a7be0;
-    box-shadow: 0px 0 0 0 #0a7be0;
-  }
-}
-.de-msg-a:hover {
-  text-decoration: underline !important;
-  color: #0a7be0 !important;
-  cursor: pointer !important;
-}
-</style>
 <style scoped lang="scss">
-.organization {
+.de-task-record {
   height: 100%;
   background-color: var(--MainBG, #f5f6f7);
 
@@ -148,11 +131,11 @@ export default {
     overflow-x: auto;
   }
 
-  >>> .el-tabs__header {
+  ::v-deep.el-tabs__header {
     margin: 0 0 12px;
   }
 
-  >>> .el-tabs__item {
+  ::v-deep.el-tabs__item {
     height: 24px;
     line-height: 24px;
     margin-bottom: 9px;
diff --git a/frontend/src/views/system/task/filterUser.vue b/frontend/src/views/system/task/filterUser.vue
index 42a221dba8..0aba1d4ae3 100644
--- a/frontend/src/views/system/task/filterUser.vue
+++ b/frontend/src/views/system/task/filterUser.vue
@@ -1,129 +1,142 @@
 <template>
   <el-drawer
+    v-closePress
     :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
     custom-class="user-drawer-task"
     size="680px"
-    v-closePress
     direction="rtl"
   >
-  <div class="el-drawer__body-cont">
-    <div class="filter">
-      <span>{{ $t("dataset.datalist") }}</span>
-      <div class="filter-item">
-        <span
-          class="item"
-          @click="activeDatasetChange(ele.id)"
-          :class="[activeDataset.includes(ele.id) ? 'active' : '']"
-          :key="ele.id"
-          v-for="ele in selectDatasetsCahe"
-          >{{ ele.name }}</span
-        >
-        <el-popover
-          placement="bottom"
-          popper-class="user-popper"
-          width="200"
-          trigger="click"
-        >
+    <div class="el-drawer__body-cont">
+      <div class="filter">
+        <span>{{ $t("dataset.datalist") }}</span>
+        <div class="filter-item">
+          <span
+            v-for="ele in selectDatasetsCahe"
+            :key="ele.id"
+            class="item"
+            :class="[activeDataset.includes(ele.id) ? 'active' : '']"
+            @click="activeDatasetChange(ele.id)"
+          >{{ ele.name }}</span>
           <el-popover
             placement="bottom"
-            popper-class="user-popper dept"
+            popper-class="user-popper"
             width="200"
             trigger="click"
-            v-loading="treeLoading"
           >
-            <el-tree
-              ref="datasetTreeRef"
-              current-node-key="id"
-              :data="treeData"
-              node-key="id"
-              highlight-current
-              :filter-node-method="filterNode"
-              :expand-on-click-node="true"
-              @node-click="nodeClick"
+            <el-popover
+              v-loading="treeLoading"
+              placement="bottom"
+              popper-class="user-popper dept"
+              width="200"
+              trigger="click"
             >
-              <span slot-scope="{ data }" class="custom-tree-node">
-                <span v-if="data.modelInnerType === 'group'">
-                  <svg-icon icon-class="scene"/>
-                  <span
-                    style="
+              <el-tree
+                ref="datasetTreeRef"
+                current-node-key="id"
+                :data="treeData"
+                node-key="id"
+                highlight-current
+                :filter-node-method="filterNode"
+                :expand-on-click-node="true"
+                @node-click="nodeClick"
+              >
+                <span
+                  slot-scope="{ data }"
+                  class="custom-tree-node"
+                >
+                  <span v-if="data.modelInnerType === 'group'">
+                    <svg-icon icon-class="scene" />
+                    <span
+                      style="
                       margin-left: 6px;
                       white-space: nowrap;
                       overflow: hidden;
                       text-overflow: ellipsis;
                     "
-                    :title="data.name"
-                    >{{ data.name }}</span
-                  >
-                </span>
-                <span v-else>
-                  <span>
-                    <svg-icon
-                      :icon-class="`ds-${data.modelInnerType}`"
-                      :class="`ds-icon-${data.modelInnerType}`"
-                    />
+                      :title="data.name"
+                    >{{ data.name }}</span>
                   </span>
-                  <span
-                    style="
+                  <span v-else>
+                    <span>
+                      <svg-icon
+                        :icon-class="`ds-${data.modelInnerType}`"
+                        :class="`ds-icon-${data.modelInnerType}`"
+                      />
+                    </span>
+                    <span
+                      style="
                       margin-left: 6px;
                       white-space: nowrap;
                       overflow: hidden;
                       text-overflow: ellipsis;
                     "
-                    :title="data.name"
-                    >{{ data.name }}</span
-                  >
+                      :title="data.name"
+                    >{{ data.name }}</span>
+                  </span>
                 </span>
-              </span>
-            </el-tree>
+              </el-tree>
 
-            <el-select
-              ref="datasetSelect"
-              v-model="selectDatasets"
+              <el-select
+                ref="datasetSelect"
+                slot="reference"
+                v-model="selectDatasets"
+                popper-class="tree-select"
+                multiple
+                :placeholder="$t('commons.please_select')"
+                value-key="id"
+              >
+                <el-option
+                  v-for="item in selectDatasets"
+                  :key="item.name"
+                  :label="item.name"
+                  :value="item"
+                />
+              </el-select>
+            </el-popover>
+            <span
               slot="reference"
-              popper-class="tree-select"
-              multiple
-              :placeholder="$t('commons.please_select')"
-              value-key="id"
-            >
-              <el-option
-                v-for="item in selectDatasets"
-                :key="item.name"
-                :label="item.name"
-                :value="item"
-              />
-            </el-select>
+              class="more"
+            >+ {{ $t("panel.more") }}</span>
           </el-popover>
-          <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
-        </el-popover>
+        </div>
       </div>
-    </div>
-    <div v-for="ele in filterDataset" :key="ele.name" class="filter">
-      <span>{{ $t(ele.name) }}</span>
-      <div class="filter-item">
-        <span
-          class="item"
-          @click="statusChange(item.value, ele.activeType)"
-          :class="[active[ele.activeType].includes(item.value) ? 'active' : '']"
-          :key="item.name"
-          v-for="item in ele.list"
-          >{{ $t(item.name) }}</span
-        >
+      <div
+        v-for="ele in filterDataset"
+        :key="ele.name"
+        class="filter"
+      >
+        <span>{{ $t(ele.name) }}</span>
+        <div class="filter-item">
+          <span
+            v-for="item in ele.list"
+            :key="item.name"
+            class="item"
+            :class="[active[ele.activeType].includes(item.value) ? 'active' : '']"
+            @click="statusChange(item.value, ele.activeType)"
+          >{{ $t(item.name) }}</span>
+        </div>
       </div>
-    </div>
 
-    <div class="filter">
-      <span>{{ $t("dedaterange.label") }}</span>
-      <div class="filter-item">
-        <DeDatePick  v-model="dataRange"></DeDatePick>
+      <div class="filter">
+        <span>{{ $t("dedaterange.label") }}</span>
+        <div class="filter-item">
+          <DeDatePick v-model="dataRange" />
+        </div>
       </div>
     </div>
-    </div>
     <div class="foot">
-      <el-button class="btn normal" @click="reset">{{
+      <el-button
+        class="btn normal"
+        @click="reset"
+      >{{
         $t("commons.reset")
       }}</el-button>
-      <el-button type="primary" class="btn" @click="search">{{
+      <el-button
+        type="primary"
+        class="btn"
+        @click="search"
+      >{{
         $t("commons.adv_search.search")
       }}</el-button>
     </div>
@@ -131,10 +144,8 @@
 </template>
 
 <script>
-import { filterDataset, dateFormat } from "./options";
-import { allRoles } from "@/api/system/user";
-import { getDatasetTree, treeByDatasetId } from "@/api/system/dept";
-import { queryAuthModel } from "@/api/authModel/authModel";
+import { filterDataset, dateFormat } from './options'
+import { queryAuthModel } from '@/api/authModel/authModel'
 import DeDatePick from '@/components/deCustomCm/deDatePick.vue'
 
 export default {
@@ -154,190 +165,191 @@ export default {
       active: {
         execStatus: [],
         status: [],
-        rate: [],
+        rate: []
       },
-      userDrawer: false,
-    };
+      userDrawer: false
+    }
   },
   mounted() {
-    this.treeNode();
+    this.treeNode()
   },
   methods: {
     treeNode() {
-      this.treeLoading = true;
+      this.treeLoading = true
       queryAuthModel(
         {
-          modelType: "dataset",
-          privileges: "manage",
+          modelType: 'dataset',
+          privileges: 'manage',
           datasetMode: 1,
           clearEmptyDir: true,
           mode: 1,
-          modelInnerTypeArray: ["db", "sql", "api", "group"],
+          modelInnerTypeArray: ['db', 'sql', 'api', 'group']
         },
         true
       )
         .then((res) => {
-          this.treeData = res.data;
+          this.treeData = res.data
         })
         .finally(() => {
-          this.treeLoading = false;
-        });
+          this.treeLoading = false
+        })
     },
     nodeClick(data) {
-      const { id, name, modelInnerType: type } = data;
-      if (type === "group") return;
-      this.handleNodeClick(id, name);
+      const { id, name, modelInnerType: type } = data
+      if (type === 'group') return
+      this.handleNodeClick(id, name)
     },
     filterNode(value, data) {
-      if (!value) return true;
-      return !this.activeDataset.includes(data.id);
+      if (!value) return true
+      return !this.activeDataset.includes(data.id)
     },
     clearFilter() {
       this.active = {
         execStatus: [],
         status: [],
-        rate: [],
-      };
-      this.dataRange = [];
-      this.activeDataset = [];
-      this.selectDatasets = [];
-      this.datasetCahe = [];
-      this.selectDatasetsCahe = [];
-      this.$refs.datasetTreeRef.filter();
-      this.$emit("search", [], []);
+        rate: []
+      }
+      this.dataRange = []
+      this.activeDataset = []
+      this.selectDatasets = []
+      this.datasetCahe = []
+      this.selectDatasetsCahe = []
+      this.$refs.datasetTreeRef.filter()
+      this.$emit('search', [], [])
     },
     clearOneFilter(index) {
       (this.filterTextMap[index] || []).forEach((ele) => {
-        const eleKey = ele.split(".");
+        const eleKey = ele.split('.')
         if (eleKey.length === 2) {
-          const [p, c] = eleKey;
-          this[p][c] = [];
+          const [p, c] = eleKey
+          this[p][c] = []
         } else {
-          this[ele] = [];
+          this[ele] = []
         }
         if (ele === 'activeDataset') {
-          this.$refs.datasetTreeRef.filter();
+          this.$refs.datasetTreeRef.filter()
         }
-      });
+      })
     },
     statusChange(value, type) {
-      const statusIndex = this.active[type].findIndex((ele) => ele === value);
+      const statusIndex = this.active[type].findIndex((ele) => ele === value)
       if (statusIndex === -1) {
-        this.active[type].push(value);
+        this.active[type].push(value)
       } else {
-        this.active[type].splice(statusIndex, 1);
+        this.active[type].splice(statusIndex, 1)
       }
     },
     handleNodeClick(id, name) {
-      const datasetIdx = this.selectDatasets.findIndex((ele) => ele.id === id);
+      const datasetIdx = this.selectDatasets.findIndex((ele) => ele.id === id)
       if (datasetIdx !== -1) {
-        this.selectDatasets.splice(datasetIdx, 1);
+        this.selectDatasets.splice(datasetIdx, 1)
       }
-      this.activeDataset.push(id);
-      this.selectDatasetsCahe.push({ id, name });
-      this.datasetCahe.push({ id, name });
-      this.$refs.datasetTreeRef.filter(id);
+      this.activeDataset.push(id)
+      this.selectDatasetsCahe.push({ id, name })
+      this.datasetCahe.push({ id, name })
+      this.$refs.datasetTreeRef.filter(id)
     },
     activeDatasetChange(id) {
-      const dataset = this.datasetCahe.find((ele) => ele.id === id);
-      this.selectDatasets.push(dataset);
-      this.activeDataset = this.activeDataset.filter((ele) => ele !== id);
+      const dataset = this.datasetCahe.find((ele) => ele.id === id)
+      this.selectDatasets.push(dataset)
+      this.activeDataset = this.activeDataset.filter((ele) => ele !== id)
       this.datasetCahe = this.datasetCahe.filter(
         (ele) => ele.id !== id
-      );
+      )
       this.selectDatasetsCahe = this.selectDatasetsCahe.filter(
         (ele) => ele.id !== id
-      );
-      this.$refs.datasetTreeRef.filter(true);
+      )
+      this.$refs.datasetTreeRef.filter(true)
     },
     search() {
-      this.userDrawer = false;
-      this.$emit("search", this.formatCondition(), this.formatText());
+      this.userDrawer = false
+      this.$emit('search', this.formatCondition(), this.formatText())
     },
     formatText() {
-      this.filterTextMap = [];
-      const params = [];
+      this.filterTextMap = []
+      const params = []
       if (this.activeDataset.length) {
-        let str = `${this.$t("dataset.datalist")}:${this.activeDataset.reduce(
+        const str = `${this.$t('dataset.datalist')}:${this.activeDataset.reduce(
           (pre, next) =>
             (this.datasetCahe.find((ele) => ele.id === next) || {}).name +
-            "、" +
+            '、' +
             pre,
-          ""
-        )}`;
-        params.push(str.slice(0, str.length - 1));
+          ''
+        )}`
+        params.push(str.slice(0, str.length - 1))
         this.filterTextMap.push([
-          "activeDataset",
-          "selectDatasets",
-          "selectDatasetsCahe",
-          "datasetCahe",
-        ]);
+          'activeDataset',
+          'selectDatasets',
+          'selectDatasetsCahe',
+          'datasetCahe'
+        ])
       }
       [
-        "dataset.execute_rate",
-        "dataset.task.task_status",
-        "dataset.task.last_exec_status",
+        'dataset.execute_rate',
+        'dataset.task.task_status',
+        'dataset.task.last_exec_status'
       ].forEach((ele, index) => {
         const { activeType: type, list } =
-          this.filterDataset[index];
+          this.filterDataset[index]
         if (this.active[type].length) {
           params.push(
             `${this.$t(ele)}:${this.active[type]
               .map((item) => this.$t(list.find((itx) => itx.value === item).name))
-              .join("、")}`
-          );
-          this.filterTextMap.push([`active.${type}`]);
+              .join('、')}`
+          )
+          this.filterTextMap.push([`active.${type}`])
         }
-      });
+      })
       if (this.dataRange.length) {
         params.push(
-          `${this.$t("dedaterange.label")}:${this.dataRange
+          `${this.$t('dedaterange.label')}:${this.dataRange
             .map((ele) => {
-              return dateFormat("YYYY-mm-dd", ele);
+              return dateFormat('YYYY-mm-dd', ele)
             })
-            .join("-")}`
-        );
-        this.filterTextMap.push(["dataRange"]);
+            .join('-')}`
+        )
+        this.filterTextMap.push(['dataRange'])
       }
-      return params;
+      return params
     },
     formatCondition() {
       const fildMap = {
-        "dataset_table_task.rate": this.active.rate,
-        "dataset_table_task.status": this.active.status,
-        "dataset_table_task.last_exec_status": this.active.execStatus,
-        "dataset_table.id": this.activeDataset,
-      };
-      const conditions = [];
+        'dataset_table_task.rate': this.active.rate,
+        'dataset_table_task.status': this.active.status,
+        'dataset_table_task.last_exec_status': this.active.execStatus,
+        'dataset_table.id': this.activeDataset
+      }
+      const conditions = []
       Object.keys(fildMap).forEach((ele) => {
         if (fildMap[ele].length) {
           conditions.push({
             field: ele,
-            operator: "in",
-            value: fildMap[ele],
-          });
+            operator: 'in',
+            value: fildMap[ele]
+          })
         }
-      });
-      let [min, max] = this.dataRange;
+      })
+      // eslint-disable-next-line
+      let [min, max] = this.dataRange
       if (min && max) {
         if (+min === +max) {
-          max = +max + 24 * 3600 * 1000;
+          max = +max + 24 * 3600 * 1000
         }
         conditions.push({
-          field: "dataset_table_task.last_exec_time",
-          operator: "between",
-          value: [+min, +max],
-        });
+          field: 'dataset_table_task.last_exec_time',
+          operator: 'between',
+          value: [+min, +max]
+        })
       }
-      return conditions;
+      return conditions
     },
     init() {
-      this.userDrawer = true;
+      this.userDrawer = true
     },
     reset() {
-      this.clearFilter();
-      this.userDrawer = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
+      this.clearFilter()
+      this.userDrawer = false
+    }
+  }
+}
+</script>
diff --git a/frontend/src/views/system/task/filterUserRecord.vue b/frontend/src/views/system/task/filterUserRecord.vue
index eb84cfe5b8..f5059bbcd6 100644
--- a/frontend/src/views/system/task/filterUserRecord.vue
+++ b/frontend/src/views/system/task/filterUserRecord.vue
@@ -1,10 +1,10 @@
 <template>
   <el-drawer
+    v-closePress
     :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
     custom-class="user-drawer-task"
     size="680px"
-    v-closePress
     direction="rtl"
   >
     <div class="el-drawer__body-cont">
@@ -12,13 +12,12 @@
         <span>{{ $t("dataset.datalist") }}</span>
         <div class="filter-item">
           <span
-            class="item"
-            @click="activeDatasetChange(ele.id)"
-            :class="[activeDataset.includes(ele.id) ? 'active' : '']"
-            :key="ele.id"
             v-for="ele in selectDatasetsCahe"
-            >{{ ele.name }}</span
-          >
+            :key="ele.id"
+            class="item"
+            :class="[activeDataset.includes(ele.id) ? 'active' : '']"
+            @click="activeDatasetChange(ele.id)"
+          >{{ ele.name }}</span>
           <el-popover
             placement="bottom"
             popper-class="user-popper"
@@ -26,11 +25,11 @@
             trigger="click"
           >
             <el-popover
+              v-loading="treeLoading"
               placement="bottom"
               popper-class="user-popper dept"
               width="200"
               trigger="click"
-              v-loading="treeLoading"
             >
               <el-tree
                 ref="datasetTreeRef"
@@ -42,9 +41,12 @@
                 :expand-on-click-node="true"
                 @node-click="nodeClick"
               >
-                <span slot-scope="{ data }" class="custom-tree-node">
+                <span
+                  slot-scope="{ data }"
+                  class="custom-tree-node"
+                >
                   <span v-if="data.modelInnerType === 'group'">
-                    <svg-icon icon-class="scene"/>
+                    <svg-icon icon-class="scene" />
                     <span
                       style="
                         margin-left: 6px;
@@ -53,8 +55,7 @@
                         text-overflow: ellipsis;
                       "
                       :title="data.name"
-                      >{{ data.name }}</span
-                    >
+                    >{{ data.name }}</span>
                   </span>
                   <span v-else>
                     <span>
@@ -71,16 +72,15 @@
                         text-overflow: ellipsis;
                       "
                       :title="data.name"
-                      >{{ data.name }}</span
-                    >
+                    >{{ data.name }}</span>
                   </span>
                 </span>
               </el-tree>
 
               <el-select
                 ref="datasetSelect"
-                v-model="selectDatasets"
                 slot="reference"
+                v-model="selectDatasets"
                 popper-class="tree-select"
                 multiple
                 :placeholder="$t('commons.please_select')"
@@ -94,38 +94,51 @@
                 />
               </el-select>
             </el-popover>
-            <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
+            <span
+              slot="reference"
+              class="more"
+            >+ {{ $t("panel.more") }}</span>
           </el-popover>
         </div>
       </div>
-      <div v-for="ele in filterDataset" :key="ele.name" class="filter">
+      <div
+        v-for="ele in filterDataset"
+        :key="ele.name"
+        class="filter"
+      >
         <span>{{ $t(ele.name) }}</span>
         <div class="filter-item">
           <span
+            v-for="item in ele.list"
+            :key="item.name"
             class="item"
-            @click="statusChange(item.value, ele.activeType)"
             :class="[
               active[ele.activeType].includes(item.value) ? 'active' : '',
             ]"
-            :key="item.name"
-            v-for="item in ele.list"
-            >{{ $t(item.name) }}</span
-          >
+            @click="statusChange(item.value, ele.activeType)"
+          >{{ $t(item.name) }}</span>
         </div>
       </div>
 
       <div class="filter">
         <span>{{ $t("dedaterange.label") }}</span>
         <div class="filter-item">
-          <DeDatePick v-model="dataRange"></DeDatePick>
+          <DeDatePick v-model="dataRange" />
         </div>
       </div>
     </div>
     <div class="foot">
-      <el-button class="btn normal" @click="reset">{{
+      <el-button
+        class="btn normal"
+        @click="reset"
+      >{{
         $t("commons.reset")
       }}</el-button>
-      <el-button type="primary" class="btn" @click="search">{{
+      <el-button
+        type="primary"
+        class="btn"
+        @click="search"
+      >{{
         $t("commons.adv_search.search")
       }}</el-button>
     </div>
@@ -133,13 +146,13 @@
 </template>
 
 <script>
-import { filterDatasetRecord, dateFormat } from "./options";
-import { queryAuthModel } from "@/api/authModel/authModel";
-import DeDatePick from "@/components/deCustomCm/deDatePick.vue";
+import { filterDatasetRecord, dateFormat } from './options'
+import { queryAuthModel } from '@/api/authModel/authModel'
+import DeDatePick from '@/components/deCustomCm/deDatePick.vue'
 
 export default {
   components: {
-    DeDatePick,
+    DeDatePick
   },
   data() {
     return {
@@ -153,183 +166,184 @@ export default {
       treeData: [],
       filterDataset: [filterDatasetRecord],
       active: {
-        execStatus: [],
+        execStatus: []
       },
-      userDrawer: false,
-    };
+      userDrawer: false
+    }
   },
   mounted() {
-    this.treeNode();
+    this.treeNode()
   },
   methods: {
     treeNode() {
-      this.treeLoading = true;
+      this.treeLoading = true
       queryAuthModel(
         {
-          modelType: "dataset",
-          privileges: "manage",
+          modelType: 'dataset',
+          privileges: 'manage',
           datasetMode: 1,
           clearEmptyDir: true,
           mode: 1,
-          modelInnerTypeArray: ["db", "sql", "api", "group"],
+          modelInnerTypeArray: ['db', 'sql', 'api', 'group']
         },
         true
       )
         .then((res) => {
-          this.treeData = res.data;
+          this.treeData = res.data
         })
         .finally(() => {
-          this.treeLoading = false;
-        });
+          this.treeLoading = false
+        })
     },
     nodeClick(data) {
-      const { id, name, modelInnerType: type } = data;
-      if (type === "group") return;
-      this.handleNodeClick(id, name);
+      const { id, name, modelInnerType: type } = data
+      if (type === 'group') return
+      this.handleNodeClick(id, name)
     },
     filterNode(value, data) {
-      if (!value) return true;
-      return !this.activeDataset.includes(data.id);
+      if (!value) return true
+      return !this.activeDataset.includes(data.id)
     },
     clearFilter() {
       this.active = {
-        execStatus: [],
-      };
-      this.dataRange = [];
-      this.activeDataset = [];
-      this.selectDatasets = [];
-      this.datasetCahe = [];
-      this.selectDatasetsCahe = [];
-      this.$refs.datasetTreeRef.filter();
-      this.$emit("search", [], []);
+        execStatus: []
+      }
+      this.dataRange = []
+      this.activeDataset = []
+      this.selectDatasets = []
+      this.datasetCahe = []
+      this.selectDatasetsCahe = []
+      this.$refs.datasetTreeRef.filter()
+      this.$emit('search', [], [])
     },
     clearOneFilter(index) {
       (this.filterTextMap[index] || []).forEach((ele) => {
-        const eleKey = ele.split(".");
+        const eleKey = ele.split('.')
         if (eleKey.length === 2) {
-          const [p, c] = eleKey;
-          this[p][c] = [];
+          const [p, c] = eleKey
+          this[p][c] = []
         } else {
-          this[ele] = [];
+          this[ele] = []
         }
         if (ele === 'activeDataset') {
-          this.$refs.datasetTreeRef.filter();
+          this.$refs.datasetTreeRef.filter()
         }
-      });
+      })
     },
     statusChange(value, type) {
-      const statusIndex = this.active[type].findIndex((ele) => ele === value);
+      const statusIndex = this.active[type].findIndex((ele) => ele === value)
       if (statusIndex === -1) {
-        this.active[type].push(value);
+        this.active[type].push(value)
       } else {
-        this.active[type].splice(statusIndex, 1);
+        this.active[type].splice(statusIndex, 1)
       }
     },
     handleNodeClick(id, name) {
-      const datasetIdx = this.selectDatasets.findIndex((ele) => ele.id === id);
+      const datasetIdx = this.selectDatasets.findIndex((ele) => ele.id === id)
       if (datasetIdx !== -1) {
-        this.selectDatasets.splice(datasetIdx, 1);
+        this.selectDatasets.splice(datasetIdx, 1)
       }
-      this.activeDataset.push(id);
-      this.selectDatasetsCahe.push({ id, name });
-      this.datasetCahe.push({ id, name });
-      this.$refs.datasetTreeRef.filter(id);
+      this.activeDataset.push(id)
+      this.selectDatasetsCahe.push({ id, name })
+      this.datasetCahe.push({ id, name })
+      this.$refs.datasetTreeRef.filter(id)
     },
     activeDatasetChange(id) {
-      const dataset = this.datasetCahe.find((ele) => ele.id === id);
-      this.selectDatasets.push(dataset);
-      this.activeDataset = this.activeDataset.filter((ele) => ele !== id);
+      const dataset = this.datasetCahe.find((ele) => ele.id === id)
+      this.selectDatasets.push(dataset)
+      this.activeDataset = this.activeDataset.filter((ele) => ele !== id)
       this.datasetCahe = this.datasetCahe.filter(
         (ele) => ele.id !== id
-      );
+      )
       this.selectDatasetsCahe = this.selectDatasetsCahe.filter(
         (ele) => ele.id !== id
-      );
-      this.$refs.datasetTreeRef.filter(true);
+      )
+      this.$refs.datasetTreeRef.filter(true)
     },
     search() {
-      this.userDrawer = false;
-      this.$emit("search", this.formatCondition(), this.formatText());
+      this.userDrawer = false
+      this.$emit('search', this.formatCondition(), this.formatText())
     },
     formatText() {
-      this.filterTextMap = [];
-      const params = [];
+      this.filterTextMap = []
+      const params = []
       if (this.activeDataset.length) {
-        let str = `${this.$t("dataset.datalist")}:${this.activeDataset.reduce(
+        const str = `${this.$t('dataset.datalist')}:${this.activeDataset.reduce(
           (pre, next) =>
             (this.datasetCahe.find((ele) => ele.id === next) || {}).name +
-            "、" +
+            '、' +
             pre,
-          ""
-        )}`;
-        params.push(str.slice(0, str.length - 1));
+          ''
+        )}`
+        params.push(str.slice(0, str.length - 1))
         this.filterTextMap.push([
-          "activeDataset",
-          "selectDatasets",
-          "selectDatasetsCahe",
-          "datasetCahe",
-        ]);
+          'activeDataset',
+          'selectDatasets',
+          'selectDatasetsCahe',
+          'datasetCahe'
+        ])
       }
-      ["dataset.task.last_exec_status"].forEach((ele, index) => {
-        const { activeType: type, list } = this.filterDataset[index];
+      ['dataset.task.last_exec_status'].forEach((ele, index) => {
+        const { activeType: type, list } = this.filterDataset[index]
         if (this.active[type].length) {
           params.push(
             `${this.$t(ele)}:${this.active[type]
               .map((item) =>
                 this.$t(list.find((itx) => itx.value === item).name)
               )
-              .join("、")}`
-          );
-          this.filterTextMap.push([`active.${type}`]);
+              .join('、')}`
+          )
+          this.filterTextMap.push([`active.${type}`])
         }
-      });
+      })
       if (this.dataRange.length) {
         params.push(
-          `${this.$t("dedaterange.label")}:${this.dataRange
+          `${this.$t('dedaterange.label')}:${this.dataRange
             .map((ele) => {
-              return dateFormat("YYYY-mm-dd", ele);
+              return dateFormat('YYYY-mm-dd', ele)
             })
-            .join("-")}`
-        );
-        this.filterTextMap.push(["dataRange"]);
+            .join('-')}`
+        )
+        this.filterTextMap.push(['dataRange'])
       }
-      return params;
+      return params
     },
     formatCondition() {
       const fildMap = {
-        "dataset_table_task.last_exec_status": this.active.execStatus,
-        "dataset_table.id": this.activeDataset,
-      };
-      const conditions = [];
+        'dataset_table_task.last_exec_status': this.active.execStatus,
+        'dataset_table.id': this.activeDataset
+      }
+      const conditions = []
       Object.keys(fildMap).forEach((ele) => {
         if (fildMap[ele].length) {
           conditions.push({
             field: ele,
-            operator: "in",
-            value: fildMap[ele],
-          });
+            operator: 'in',
+            value: fildMap[ele]
+          })
         }
-      });
-      let [min, max] = this.dataRange;
+      })
+      // eslint-disable-next-line
+      let [min, max] = this.dataRange
       if (min && max) {
         if (+min === +max) {
-          max = +max + 24 * 3600 * 1000;
+          max = +max + 24 * 3600 * 1000
         }
         conditions.push({
-          field: "dataset_table_task.last_exec_time",
-          operator: "between",
-          value: [+min, +max],
-        });
+          field: 'dataset_table_task.last_exec_time',
+          operator: 'between',
+          value: [+min, +max]
+        })
       }
-      return conditions;
+      return conditions
     },
     init() {
-      this.userDrawer = true;
+      this.userDrawer = true
     },
     reset() {
-      this.clearFilter();
-      this.userDrawer = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
+      this.clearFilter()
+      this.userDrawer = false
+    }
+  }
+}
+</script>
diff --git a/frontend/src/views/system/task/form.vue b/frontend/src/views/system/task/form.vue
index b04ea26ef1..1d2f8234e2 100644
--- a/frontend/src/views/system/task/form.vue
+++ b/frontend/src/views/system/task/form.vue
@@ -1,5 +1,8 @@
 <template>
-  <de-layout-content :header="header" back-path="/system/system-task/dataset">
+  <de-layout-content
+    :header="header"
+    back-path="/system/system-task/dataset"
+  >
     <div class="dataset-editer-form">
       <div class="w600">
         <el-form
@@ -24,14 +27,20 @@
               :placeholder="$t('dataset.task_name')"
             />
           </el-form-item>
-          <el-form-item :label="$t('dataset.task_name')" prop="name">
+          <el-form-item
+            :label="$t('dataset.task_name')"
+            prop="name"
+          >
             <el-input
               v-model="taskForm.name"
               size="small"
               :placeholder="$t('dataset.task_name')"
             />
           </el-form-item>
-          <el-form-item :label="$t('dataset.update_type')" prop="type">
+          <el-form-item
+            :label="$t('dataset.update_type')"
+            prop="type"
+          >
             <el-radio-group v-model="taskForm.type">
               <el-radio label="all_scope">{{
                 $t("dataset.all_scope")
@@ -40,7 +49,10 @@
                 {{ $t("dataset.add_scope") }}</el-radio>
             </el-radio-group>
           </el-form-item>
-          <div v-if="taskForm.type === 'add_scope'" class="add-scope-cont">
+          <div
+            v-if="taskForm.type === 'add_scope'"
+            class="add-scope-cont"
+          >
             <el-form-item
               prop="type"
               :label="$t('dataset.incremental_update_type')"
@@ -88,8 +100,14 @@
             </el-form-item>
           </div>
 
-          <el-form-item :label="$t('dataset.execute_rate')" prop="rate">
-            <el-radio-group v-model="taskForm.rate" @change="onRateChange">
+          <el-form-item
+            :label="$t('dataset.execute_rate')"
+            prop="rate"
+          >
+            <el-radio-group
+              v-model="taskForm.rate"
+              @change="onRateChange"
+            >
               <el-radio label="SIMPLE">{{
                 $t("dataset.execute_once")
               }}</el-radio>
@@ -99,7 +117,10 @@
               }}</el-radio>
             </el-radio-group>
           </el-form-item>
-          <div v-if="taskForm.rate !== 'SIMPLE'" class="execute-rate-cont">
+          <div
+            v-if="taskForm.rate !== 'SIMPLE'"
+            class="execute-rate-cont"
+          >
             <el-form-item
               v-if="taskForm.rate === 'SIMPLE_CRON'"
               :label="$t('dataset.execute_rate')"
@@ -120,9 +141,18 @@
                   size="small"
                   @change="onSimpleCronChange()"
                 >
-                  <el-option :label="$t('components.minute')" value="minute" />
-                  <el-option :label="$t('components.hour')" value="hour" />
-                  <el-option :label="$t('components.day')" value="day" />
+                  <el-option
+                    :label="$t('components.minute')"
+                    value="minute"
+                  />
+                  <el-option
+                    :label="$t('components.hour')"
+                    value="hour"
+                  />
+                  <el-option
+                    :label="$t('components.day')"
+                    value="day"
+                  />
                 </el-select>
                 {{ $t("cron.every_exec") }}
               </div>
@@ -159,7 +189,10 @@
                 :placeholder="$t('dataset.start_time')"
                 size="small"
               />
-              <svg-icon icon-class="icon_calendar_outlined" class="icon-calendar-outlined" />
+              <svg-icon
+                icon-class="icon_calendar_outlined"
+                class="icon-calendar-outlined"
+              />
             </el-form-item>
             <el-form-item
               v-if="taskForm.rate !== 'SIMPLE'"
@@ -178,7 +211,11 @@
                 :placeholder="$t('dataset.end_time')"
                 size="small"
               />
-              <svg-icon v-if="taskForm.end === '1'" icon-class="icon_calendar_outlined" class="icon-calendar-outlined" />
+              <svg-icon
+                v-if="taskForm.end === '1'"
+                icon-class="icon_calendar_outlined"
+                class="icon-calendar-outlined"
+              />
             </el-form-item>
           </div>
         </el-form>
@@ -193,10 +230,19 @@
           @getTableId="getTableId"
         />
       </div>
-      <div v-if="!disableForm" class="de-foot-layout">
+      <div
+        v-if="!disableForm"
+        class="de-foot-layout"
+      >
         <div class="cont">
-          <deBtn secondary @click="closeTask">{{ $t("dataset.cancel") }}</deBtn>
-          <deBtn type="primary" @click="saveTask(taskForm)">{{
+          <deBtn
+            secondary
+            @click="closeTask"
+          >{{ $t("dataset.cancel") }}</deBtn>
+          <deBtn
+            type="primary"
+            @click="saveTask(taskForm)"
+          >{{
             $t("dataset.confirm")
           }}</deBtn>
         </div>
diff --git a/frontend/src/views/system/task/options.js b/frontend/src/views/system/task/options.js
index 753031ef95..843f876409 100644
--- a/frontend/src/views/system/task/options.js
+++ b/frontend/src/views/system/task/options.js
@@ -1,80 +1,79 @@
 const filterDatasetRecord = {
-    name: 'dataset.task.last_exec_status',
-    type: 'dataset_table_task.last_exec_status',
-    activeType: 'execStatus',
-    list: [{
-        name: 'xpacktask.success',
-        value: 'Completed',
-    }, {
-        name: 'dataset.task.exec',
-        value: 'Underway',
-    },
-    {
-        name: 'xpacktask.error',
-        value: 'Error',
-    }]
+  name: 'dataset.task.last_exec_status',
+  type: 'dataset_table_task.last_exec_status',
+  activeType: 'execStatus',
+  list: [{
+    name: 'xpacktask.success',
+    value: 'Completed'
+  }, {
+    name: 'dataset.task.exec',
+    value: 'Underway'
+  },
+  {
+    name: 'xpacktask.error',
+    value: 'Error'
+  }]
 }
 const filterDataset = [{
-    name: 'dataset.execute_rate',
-    type: 'dataset_table_task.rate',
-    activeType: 'rate',
-    list: [{
-        name: 'dataset.execute_once',
-        value: 'SIMPLE',
-    }, {
-        name: 'dataset.cron_config',
-        value: 'CRON',
-    },
-    {
-        name: 'dataset.simple_cron',
-        value: 'SIMPLE_CRON',
-    }]
+  name: 'dataset.execute_rate',
+  type: 'dataset_table_task.rate',
+  activeType: 'rate',
+  list: [{
+    name: 'dataset.execute_once',
+    value: 'SIMPLE'
+  }, {
+    name: 'dataset.cron_config',
+    value: 'CRON'
+  },
+  {
+    name: 'dataset.simple_cron',
+    value: 'SIMPLE_CRON'
+  }]
 }, {
-    name: 'dataset.task.task_status',
-    type: 'dataset_table_task.status',
-    activeType: 'status',
-    list: [{
-        name: 'dataset.task.underway',
-        value: 'Underway',
-    }, {
-        name: 'dataset.task.exec',
-        value: 'Exec',
-    },
-    {
-        name: 'dataset.task.pending',
-        value: 'Pending',
-    }, {
-        name: 'dataset.task.stopped',
-        value: 'Stopped',
-    }]
+  name: 'dataset.task.task_status',
+  type: 'dataset_table_task.status',
+  activeType: 'status',
+  list: [{
+    name: 'dataset.task.underway',
+    value: 'Underway'
+  }, {
+    name: 'dataset.task.exec',
+    value: 'Exec'
+  },
+  {
+    name: 'dataset.task.pending',
+    value: 'Pending'
+  }, {
+    name: 'dataset.task.stopped',
+    value: 'Stopped'
+  }]
 }, {
-    ...filterDatasetRecord
+  ...filterDatasetRecord
 }]
 
-
 // 入参 fmt-格式 date-日期
 function dateFormat(fmt, date) {
-    let ret;
-    const opt = {
-        "Y+": date.getFullYear().toString(),        // 年
-        "m+": (date.getMonth() + 1).toString(),     // 月
-        "d+": date.getDate().toString(),            // 日
-        "H+": date.getHours().toString(),           // 时
-        "M+": date.getMinutes().toString(),         // 分
-        "S+": date.getSeconds().toString()          // 秒
-        // 有其他格式化字符需求可以继续添加，必须转化成字符串
-    };
-    for (let k in opt) {
-        ret = new RegExp("(" + k + ")").exec(fmt);
-        if (ret) {
-            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
-        };
-    };
-    return fmt;
+  let ret
+  const opt = {
+    'Y+': date.getFullYear().toString(), // 年
+    'm+': (date.getMonth() + 1).toString(), // 月
+    'd+': date.getDate().toString(), // 日
+    'H+': date.getHours().toString(), // 时
+    'M+': date.getMinutes().toString(), // 分
+    'S+': date.getSeconds().toString() // 秒
+    // 有其他格式化字符需求可以继续添加，必须转化成字符串
+  }
+  for (const k in opt) {
+    ret = new RegExp('(' + k + ')').exec(fmt)
+    if (ret) {
+      fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
+    }
+  }
+  return fmt
 }
 
 export {
-    filterDataset,
-    dateFormat,
-    filterDatasetRecord
-}
\ No newline at end of file
+  filterDataset,
+  dateFormat,
+  filterDatasetRecord
+}
diff --git a/frontend/src/views/system/user/CustomCondtion.vue b/frontend/src/views/system/user/CustomCondtion.vue
index 056cd3b94c..7d7d848a13 100644
--- a/frontend/src/views/system/user/CustomCondtion.vue
+++ b/frontend/src/views/system/user/CustomCondtion.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <el-switch v-model="value" active-text="当前用户" />
+    <el-switch
+      v-model="value"
+      active-text="当前用户"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/views/system/user/filterUser.vue b/frontend/src/views/system/user/filterUser.vue
index ed8ac0d243..d851f170a6 100644
--- a/frontend/src/views/system/user/filterUser.vue
+++ b/frontend/src/views/system/user/filterUser.vue
@@ -1,10 +1,10 @@
 <template>
   <el-drawer
+    v-closePress
     :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
     custom-class="user-drawer"
     size="680px"
-    v-closePress
     direction="rtl"
   >
     <div class="el-drawer__body-cont">
@@ -12,26 +12,24 @@
         <span>{{ $t("commons.status") }}</span>
         <div class="filter-item">
           <span
-            class="item"
-            @click="statusChange(ele.id)"
-            :class="[activeStatus.includes(ele.id) ? 'active' : '']"
-            :key="ele.id"
             v-for="ele in status"
-            >{{ $t(ele.label) }}</span
-          >
+            :key="ele.id"
+            class="item"
+            :class="[activeStatus.includes(ele.id) ? 'active' : '']"
+            @click="statusChange(ele.id)"
+          >{{ $t(ele.label) }}</span>
         </div>
       </div>
       <div class="filter">
         <span>{{ $t("commons.organization") }}</span>
         <div class="filter-item">
           <span
-            class="item"
-            @click="activeDeptChange(ele.id)"
-            :class="[activeDept.includes(ele.id) ? 'active' : '']"
-            :key="ele.id"
             v-for="ele in selectDeptsCahe"
-            >{{ ele.label }}</span
-          >
+            :key="ele.id"
+            class="item"
+            :class="[activeDept.includes(ele.id) ? 'active' : '']"
+            @click="activeDeptChange(ele.id)"
+          >{{ ele.label }}</span>
           <el-popover
             placement="bottom"
             popper-class="user-popper"
@@ -51,12 +49,12 @@
                 :data="deptsComputed"
                 :props="defaultProps"
                 @node-click="handleNodeClick"
-              ></el-tree>
+              />
 
               <el-select
                 ref="roleSelect"
-                v-model="selectDepts"
                 slot="reference"
+                v-model="selectDepts"
                 popper-class="tree-select"
                 multiple
                 :placeholder="$t('commons.please_select')"
@@ -70,7 +68,10 @@
                 />
               </el-select>
             </el-popover>
-            <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
+            <span
+              slot="reference"
+              class="more"
+            >+ {{ $t("panel.more") }}</span>
           </el-popover>
         </div>
       </div>
@@ -78,13 +79,12 @@
         <span>{{ $t("panel.role") }}</span>
         <div class="filter-item">
           <span
-            @click="activeRoleChange(ele.id)"
+            v-for="ele in rolesValueCopy"
+            :key="ele.id"
             class="item"
             :class="[activeRole.includes(ele.id) ? 'active' : '']"
-            :key="ele.id"
-            v-for="ele in rolesValueCopy"
-            >{{ ele.name }}</span
-          >
+            @click="activeRoleChange(ele.id)"
+          >{{ ele.name }}</span>
           <el-popover
             placement="bottom"
             popper-class="user-popper"
@@ -96,9 +96,9 @@
               v-model="rolesValue"
               multiple
               :placeholder="$t('commons.please_select')"
+              value-key="id"
               @change="changeRole"
               @remove-tag="changeRole"
-              value-key="id"
             >
               <el-option
                 v-for="item in rolesComputed"
@@ -107,16 +107,26 @@
                 :value="item"
               />
             </el-select>
-            <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
+            <span
+              slot="reference"
+              class="more"
+            >+ {{ $t("panel.more") }}</span>
           </el-popover>
         </div>
       </div>
     </div>
     <div class="foot">
-      <el-button class="btn normal" @click="reset">{{
+      <el-button
+        class="btn normal"
+        @click="reset"
+      >{{
         $t("commons.reset")
       }}</el-button>
-      <el-button type="primary" class="btn" @click="search">{{
+      <el-button
+        type="primary"
+        class="btn"
+        @click="search"
+      >{{
         $t("commons.adv_search.search")
       }}</el-button>
     </div>
@@ -125,8 +135,8 @@
 
 <script>
 // import bus from '@/utils/bus'
-import { allRoles } from "@/api/system/user";
-import { getDeptTree, treeByDeptId } from "@/api/system/dept";
+import { allRoles } from '@/api/system/user'
+import { getDeptTree, treeByDeptId } from '@/api/system/dept'
 
 export default {
   data() {
@@ -138,12 +148,12 @@ export default {
       status: [
         {
           id: 1,
-          label: "commons.enable",
+          label: 'commons.enable'
         },
         {
           id: 0,
-          label: "commons.disable",
-        },
+          label: 'commons.disable'
+        }
       ],
       activeStatus: [],
       rolesValue: [],
@@ -153,40 +163,40 @@ export default {
       selectDeptsCahe: [],
       activeDept: [],
       defaultProps: {
-        children: "children",
-        label: "label",
-        isLeaf: "leaf",
+        children: 'children',
+        label: 'label',
+        isLeaf: 'leaf'
       },
-      userDrawer: false,
-    };
+      userDrawer: false
+    }
   },
   computed: {
     rolesComputed() {
-      return this.roles.filter((ele) => !this.activeRole.includes(ele.id));
+      return this.roles.filter((ele) => !this.activeRole.includes(ele.id))
     },
     rolesValueCopy() {
-      return this.roleCahe.filter((ele) => this.activeRole.includes(ele.id));
+      return this.roleCahe.filter((ele) => this.activeRole.includes(ele.id))
     },
     deptsComputed() {
-      return this.depts.filter((ele) => !this.activeDept.includes(ele.id));
-    },
+      return this.depts.filter((ele) => !this.activeDept.includes(ele.id))
+    }
   },
   mounted() {
-    this.initRoles();
+    this.initRoles()
   },
   methods: {
     clearFilter() {
       Array(3)
         .fill(1)
         .forEach((_, index) => {
-          this.clearOneFilter(index);
-        });
-      this.$emit("search", [], []);
+          this.clearOneFilter(index)
+        })
+      this.$emit('search', [], [])
     },
     clearOneFilter(index) {
       (this.filterTextMap[index] || []).forEach((ele) => {
-        this[ele] = [];
-      });
+        this[ele] = []
+      })
     },
     // 获取弹窗内部门数据
     treeByDeptId() {
@@ -194,10 +204,10 @@ export default {
         this.depts = (res.data || []).map((ele) => {
           return {
             ...ele,
-            leaf: !ele.hasChildren,
-          };
-        });
-      });
+            leaf: !ele.hasChildren
+          }
+        })
+      })
     },
     changeRole() {
       if (
@@ -209,8 +219,8 @@ export default {
             .map((ele) => ele.id)
             .concat(this.activeRole)
             .includes(ele.id)
-        );
-        return;
+        )
+        return
       }
       const roleIdx = this.rolesValue.findIndex(
         (ele) =>
@@ -218,151 +228,151 @@ export default {
             .map((ele) => ele.id)
             .concat(this.activeRole)
             .includes(ele.id)
-      );
-      if (roleIdx === -1) return;
-      this.activeRole.push(this.rolesValue[roleIdx].id);
-      this.roleCahe.push(this.rolesValue[roleIdx]);
-      this.rolesValue.splice(roleIdx, 1);
+      )
+      if (roleIdx === -1) return
+      this.activeRole.push(this.rolesValue[roleIdx].id)
+      this.roleCahe.push(this.rolesValue[roleIdx])
+      this.rolesValue.splice(roleIdx, 1)
     },
     activeRoleChange(id) {
-      const roleIndex = this.activeRole.findIndex((ele) => ele === id);
+      const roleIndex = this.activeRole.findIndex((ele) => ele === id)
       if (roleIndex === -1) {
-        this.activeRole.push(id);
-        this.rolesValue = this.rolesValue.filter((ele) => ele.id !== id);
+        this.activeRole.push(id)
+        this.rolesValue = this.rolesValue.filter((ele) => ele.id !== id)
       } else {
-        this.activeRole.splice(roleIndex, 1);
-        const role = this.roleCahe.find((ele) => ele.id === id);
-        this.rolesValue.push(role);
+        this.activeRole.splice(roleIndex, 1)
+        const role = this.roleCahe.find((ele) => ele.id === id)
+        this.rolesValue.push(role)
       }
     },
     handleNodeClick({ id, label }) {
-      const deptIdx = this.selectDepts.findIndex((ele) => ele.id === id);
+      const deptIdx = this.selectDepts.findIndex((ele) => ele.id === id)
       if (deptIdx !== -1) {
-        this.selectDepts.splice(deptIdx, 1);
+        this.selectDepts.splice(deptIdx, 1)
         this.selectDeptsCahe = this.selectDeptsCahe.filter(
           (ele) => ele.id !== id
-        );
-        this.deptCahe = this.deptCahe.filter((ele) => ele.id !== id);
-        return;
+        )
+        this.deptCahe = this.deptCahe.filter((ele) => ele.id !== id)
+        return
       }
-      this.activeDept.push(id);
-      this.selectDeptsCahe.push({ id, label });
-      this.deptCahe.push({ id, label });
+      this.activeDept.push(id)
+      this.selectDeptsCahe.push({ id, label })
+      this.deptCahe.push({ id, label })
     },
     activeDeptChange(id) {
-      const dept = this.deptCahe.find((ele) => ele.id === id);
-      this.selectDepts.push(dept);
-      this.activeDept = this.activeDept.filter((ele) => ele !== id);
+      const dept = this.deptCahe.find((ele) => ele.id === id)
+      this.selectDepts.push(dept)
+      this.activeDept = this.activeDept.filter((ele) => ele !== id)
       this.selectDeptsCahe = this.selectDeptsCahe.filter(
         (ele) => ele.id !== id
-      );
+      )
     },
     statusChange(id) {
-      const statusIndex = this.activeStatus.findIndex((ele) => ele === id);
+      const statusIndex = this.activeStatus.findIndex((ele) => ele === id)
       if (statusIndex === -1) {
-        this.activeStatus.push(id);
+        this.activeStatus.push(id)
       } else {
-        this.activeStatus.splice(statusIndex, 1);
+        this.activeStatus.splice(statusIndex, 1)
       }
     },
     changeDepts() {
-      const depts = this.selectDepts.map((item) => item.id);
-      this.activeDept = this.activeDept.filter((ele) => depts.includes(ele));
+      const depts = this.selectDepts.map((item) => item.id)
+      this.activeDept = this.activeDept.filter((ele) => depts.includes(ele))
     },
     loadNode(node, resolve) {
       if (!this.depts.length) {
-        this.treeByDeptId();
-        return;
+        this.treeByDeptId()
+        return
       }
       getDeptTree(node.data.id).then((res) => {
         const filterDept = (res.data || []).filter(
           (ele) => !this.activeDept.includes(ele.deptId)
-        );
+        )
         resolve(
           filterDept.map((dept) => {
-            return this.normalizer(dept);
+            return this.normalizer(dept)
           })
-        );
-      });
+        )
+      })
     },
     normalizer(node) {
       return {
         id: node.deptId,
         label: node.name,
-        leaf: !node.hasChildren,
-      };
+        leaf: !node.hasChildren
+      }
     },
     initRoles() {
       allRoles().then((res) => {
-        this.roles = res.data;
-      });
+        this.roles = res.data
+      })
     },
     search() {
-      this.userDrawer = false;
-      this.$emit("search", this.formatCondition(), this.formatText());
+      this.userDrawer = false
+      this.$emit('search', this.formatCondition(), this.formatText())
     },
     formatText() {
-      this.filterTextMap = [];
-      const params = [];
+      this.filterTextMap = []
+      const params = []
       if (this.activeStatus.length) {
-        let str = `${this.$t("kettle.status")}:${this.activeStatus.reduce(
+        const str = `${this.$t('kettle.status')}:${this.activeStatus.reduce(
           (pre, next) =>
             this.$t((this.status.find((ele) => ele.id === next) || {}).label) +
-            "、" +
+            '、' +
             pre,
-          ""
-        )}`;
-        params.push(str.slice(0, str.length - 1));
-        this.filterTextMap.push(["activeStatus"]);
+          ''
+        )}`
+        params.push(str.slice(0, str.length - 1))
+        this.filterTextMap.push(['activeStatus'])
       }
       if (this.activeDept.length) {
         params.push(
-          `${this.$t("panel.org")}:${this.selectDeptsCahe
+          `${this.$t('panel.org')}:${this.selectDeptsCahe
             .map((ele) => ele.label)
-            .join("、")}`
-        );
+            .join('、')}`
+        )
         this.filterTextMap.push([
-          "activeDept",
-          "selectDepts",
-          "selectDeptsCahe",
-          "deptCahe",
-        ]);
+          'activeDept',
+          'selectDepts',
+          'selectDeptsCahe',
+          'deptCahe'
+        ])
       }
       if (this.activeRole.length) {
         params.push(
-          `${this.$t("panel.role")}:${this.rolesValueCopy
+          `${this.$t('panel.role')}:${this.rolesValueCopy
             .map((ele) => ele.name)
-            .join("、")}`
-        );
-        this.filterTextMap.push(["rolesValue", "activeRole", "roleCahe"]);
+            .join('、')}`
+        )
+        this.filterTextMap.push(['rolesValue', 'activeRole', 'roleCahe'])
       }
-      return params;
+      return params
     },
     formatCondition() {
       const fildMap = {
-        "r.role_id": this.activeRole,
-        "d.dept_id": this.activeDept,
-        "u.enabled": this.activeStatus,
-      };
-      const conditions = [];
+        'r.role_id': this.activeRole,
+        'd.dept_id': this.activeDept,
+        'u.enabled': this.activeStatus
+      }
+      const conditions = []
       Object.keys(fildMap).forEach((ele) => {
         if (fildMap[ele].length) {
           conditions.push({
             field: ele,
-            operator: "in",
-            value: fildMap[ele],
-          });
+            operator: 'in',
+            value: fildMap[ele]
+          })
         }
-      });
-      return conditions;
+      })
+      return conditions
     },
     init() {
-      this.userDrawer = true;
+      this.userDrawer = true
     },
     reset() {
-      this.userDrawer = false;
-      this.clearFilter();
-    },
-  },
-};
-</script>
\ No newline at end of file
+      this.userDrawer = false
+      this.clearFilter()
+    }
+  }
+}
+</script>
diff --git a/frontend/src/views/system/user/imp-ldap.vue b/frontend/src/views/system/user/imp-ldap.vue
index cf98d47030..de077f627e 100644
--- a/frontend/src/views/system/user/imp-ldap.vue
+++ b/frontend/src/views/system/user/imp-ldap.vue
@@ -1,8 +1,21 @@
 <template>
-  <layout-content :header="$t('user.import_ldap') " back-name="system-user">
-    <el-form ref="importUserForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
+  <layout-content
+    :header="$t('user.import_ldap') "
+    back-name="system-user"
+  >
+    <el-form
+      ref="importUserForm"
+      :model="form"
+      :rules="rule"
+      size="small"
+      label-width="auto"
+      label-position="right"
+    >
 
-      <el-form-item :label="$t('commons.user')" prop="userIds">
+      <el-form-item
+        :label="$t('commons.user')"
+        prop="userIds"
+      >
         <el-select
           ref="userSelect"
           v-model="form.userIds"
@@ -26,7 +39,10 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item :label="$t('commons.organization')" prop="deptId">
+      <el-form-item
+        :label="$t('commons.organization')"
+        prop="deptId"
+      >
         <treeselect
           ref="deptTreeSelect"
           v-model="form.deptId"
@@ -34,13 +50,16 @@
           :load-options="loadDepts"
           :auto-load-root-options="false"
           :placeholder="$t('user.choose_org')"
-          :noChildrenText="$t('commons.treeselect.no_children_text')"
-          :noOptionsText="$t('commons.treeselect.no_options_text')"
-          :noResultsText="$t('commons.treeselect.no_results_text')"
+          :no-children-text="$t('commons.treeselect.no_children_text')"
+          :no-options-text="$t('commons.treeselect.no_options_text')"
+          :no-results-text="$t('commons.treeselect.no_results_text')"
           @open="filterData"
         />
       </el-form-item>
-      <el-form-item :label="$t('commons.role')" prop="roleIds">
+      <el-form-item
+        :label="$t('commons.role')"
+        prop="roleIds"
+      >
         <el-select
           ref="roleSelect"
           v-model="form.roleIds"
@@ -61,15 +80,24 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item :label="$t('commons.status')" prop="enabled">
-        <el-radio-group v-model="form.enabled" style="width: 140px">
+      <el-form-item
+        :label="$t('commons.status')"
+        prop="enabled"
+      >
+        <el-radio-group
+          v-model="form.enabled"
+          style="width: 140px"
+        >
           <el-radio :label="1">{{ $t('commons.enable') }}</el-radio>
           <el-radio :label="0">{{ $t('commons.disable') }}</el-radio>
         </el-radio-group>
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" @click="save">{{ $t('commons.confirm') }}</el-button>
+        <el-button
+          type="primary"
+          @click="save"
+        >{{ $t('commons.confirm') }}</el-button>
         <el-button @click="cancel">{{ $t('commons.cancel') }}</el-button>
       </el-form-item>
     </el-form>
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index fcd920f8d0..9a60366e0e 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -10,10 +10,17 @@
           @click="create"
         >{{ $t("user.create") }}</el-button>
 
-        <plugin-com v-if="isPluginLoaded" ref="ImportUserCom" component-name="ImportUser" />
+        <plugin-com
+          v-if="isPluginLoaded"
+          ref="ImportUserCom"
+          component-name="ImportUser"
+        />
 
       </el-col>
-      <el-col :span="12" class="right-user">
+      <el-col
+        :span="12"
+        class="right-user"
+      >
         <el-input
           ref="search"
           v-model="nickName"
@@ -35,13 +42,19 @@
           ({{ filterTexts.length }})
         </template>
         </el-button>
-        <el-dropdown trigger="click" :hide-on-click="false">
+        <el-dropdown
+          trigger="click"
+          :hide-on-click="false"
+        >
           <el-button
             v-btnPress
             class="normal btn filter-zero"
             icon="el-icon-setting"
           >{{ $t('user.list') }}</el-button>
-          <el-dropdown-menu slot="dropdown" class="list-colums-slect">
+          <el-dropdown-menu
+            slot="dropdown"
+            class="list-colums-slect"
+          >
             <p class="title">{{ $t('user.list_info') }}</p>
             <el-checkbox
               v-model="checkAll"
@@ -62,17 +75,35 @@
         </el-dropdown>
       </el-col>
     </el-row>
-    <div v-if="filterTexts.length" class="filter-texts">
+    <div
+      v-if="filterTexts.length"
+      class="filter-texts"
+    >
       <span class="sum">{{ paginationConfig.total }}</span>
       <span class="title">{{ $t('user.result_one') }}</span>
       <el-divider direction="vertical" />
-      <i v-if="showScroll" class="el-icon-arrow-left arrow-filter" @click="scrollPre" />
+      <i
+        v-if="showScroll"
+        class="el-icon-arrow-left arrow-filter"
+        @click="scrollPre"
+      />
       <div class="filter-texts-container">
-        <p v-for="(ele, index) in filterTexts" :key="ele" class="text">
-          {{ ele }} <i class="el-icon-close" @click="clearOneFilter(index)" />
+        <p
+          v-for="(ele, index) in filterTexts"
+          :key="ele"
+          class="text"
+        >
+          {{ ele }} <i
+            class="el-icon-close"
+            @click="clearOneFilter(index)"
+          />
         </p>
       </div>
-      <i v-if="showScroll" class="el-icon-arrow-right arrow-filter" @click="scrollNext" />
+      <i
+        v-if="showScroll"
+        class="el-icon-arrow-right arrow-filter"
+        @click="scrollNext"
+      />
       <el-button
         type="text"
         class="clear-btn"
@@ -95,7 +126,10 @@
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       >
-        <el-table-column prop="username" label="ID" />
+        <el-table-column
+          prop="username"
+          label="ID"
+        />
         <el-table-column
           key="nickName"
           show-overflow-tooltip
@@ -104,7 +138,11 @@
           :label="$t('commons.nick_name')"
         />
         <!-- <el-table-column prop="gender" :label="$t('commons.gender')" width="60" /> -->
-        <el-table-column prop="from" :label="$t('user.source')" width="80">
+        <el-table-column
+          prop="from"
+          :label="$t('user.source')"
+          width="80"
+        >
           <template slot-scope="scope">
             <div>
               {{
@@ -152,9 +190,17 @@
           :label="$t('commons.role')"
         >
           <template slot-scope="scope">
-            <el-tooltip popper-class="de-table-tooltips" class="item" effect="dark" placement="top">
+            <el-tooltip
+              popper-class="de-table-tooltips"
+              class="item"
+              effect="dark"
+              placement="top"
+            >
               <!-- // {{}}会将数据解释为普通文本，而非 HTML 代码。 -->
-              <div slot="content" v-html="filterRoles(scope.row.roles)" />
+              <div
+                slot="content"
+                v-html="filterRoles(scope.row.roles)"
+              />
               <div class="de-one-line">{{ filterRoles(scope.row.roles) }}</div>
             </el-tooltip>
           </template>
@@ -167,7 +213,7 @@
           :label="$t('commons.status')"
           width="80"
         >
-          <template v-slot:default="scope">
+          <template #default="scope">
             <el-switch
               v-model="scope.row.enabled"
               :active-value="1"
@@ -186,7 +232,7 @@
           :label="$t('commons.create_time')"
           width="180"
         >
-          <template v-slot:default="scope">
+          <template #default="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
@@ -214,7 +260,10 @@
               <i class="el-icon-warning" />
               <div class="tips">{{ $t('user.recover_pwd') }}</div>
               <div class="editer-form-title">
-                <span class="pwd" type="text">{{
+                <span
+                  class="pwd"
+                  type="text"
+                >{{
                   $t("commons.default_pwd") + "：" + defaultPWD
                 }}</span>
                 <el-button
@@ -264,9 +313,15 @@
       </grid-table>
     </div>
     <keep-alive>
-      <filterUser ref="filterUser" @search="filterDraw" />
+      <filterUser
+        ref="filterUser"
+        @search="filterDraw"
+      />
     </keep-alive>
-    <user-editer ref="userEditer" @saved="search" />
+    <user-editer
+      ref="userEditer"
+      @saved="search"
+    />
   </de-layout-content>
 </template>
 
diff --git a/frontend/src/views/system/user/personPwd.vue b/frontend/src/views/system/user/personPwd.vue
index 30ab9f697a..eb0203848d 100644
--- a/frontend/src/views/system/user/personPwd.vue
+++ b/frontend/src/views/system/user/personPwd.vue
@@ -5,24 +5,43 @@
         <div class="form-header">
           <span>{{ $t('user.change_password') }}</span>
         </div>
-        <el-form ref="createUserForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
-          <el-form-item :label="$t('user.origin_passwd')" prop="oldPwd">
+        <el-form
+          ref="createUserForm"
+          :model="form"
+          :rules="rule"
+          size="small"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item
+            :label="$t('user.origin_passwd')"
+            prop="oldPwd"
+          >
             <dePwd
               v-model="form.oldPwd"
             />
           </el-form-item>
-          <el-form-item :label="$t('user.new_passwd')" prop="newPwd">
+          <el-form-item
+            :label="$t('user.new_passwd')"
+            prop="newPwd"
+          >
             <dePwd
               v-model="form.newPwd"
             />
           </el-form-item>
-          <el-form-item :label="$t('user.confirm_passwd')" prop="repeatPwd">
+          <el-form-item
+            :label="$t('user.confirm_passwd')"
+            prop="repeatPwd"
+          >
             <dePwd
               v-model="form.repeatPwd"
             />
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="save">{{ $t('commons.confirm') }}</el-button>
+            <el-button
+              type="primary"
+              @click="save"
+            >{{ $t('commons.confirm') }}</el-button>
           </el-form-item>
         </el-form>
       </el-card>
diff --git a/frontend/src/views/system/user/privateForm.vue b/frontend/src/views/system/user/privateForm.vue
index a41ebc3924..38b61c6a85 100644
--- a/frontend/src/views/system/user/privateForm.vue
+++ b/frontend/src/views/system/user/privateForm.vue
@@ -5,27 +5,66 @@
         <div class="form-header">
           <span>{{ $t('commons.personal_info') }}</span>
         </div>
-        <el-form ref="createUserForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
-          <el-form-item label="ID" prop="username">
-            <el-input v-model="form.username" disabled />
+        <el-form
+          ref="createUserForm"
+          :model="form"
+          :rules="rule"
+          size="small"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item
+            label="ID"
+            prop="username"
+          >
+            <el-input
+              v-model="form.username"
+              disabled
+            />
           </el-form-item>
-          <el-form-item :label="$t('commons.phone')" prop="phone">
-            <el-input v-model="form.phone" :disabled="formType!=='modify'" />
+          <el-form-item
+            :label="$t('commons.phone')"
+            prop="phone"
+          >
+            <el-input
+              v-model="form.phone"
+              :disabled="formType!=='modify'"
+            />
           </el-form-item>
-          <el-form-item :label="$t('commons.nick_name')" prop="nickName">
-            <el-input v-model="form.nickName" :disabled="formType!=='modify'" />
+          <el-form-item
+            :label="$t('commons.nick_name')"
+            prop="nickName"
+          >
+            <el-input
+              v-model="form.nickName"
+              :disabled="formType!=='modify'"
+            />
           </el-form-item>
-          <el-form-item :label="$t('commons.email')" prop="email">
-            <el-input v-model="form.email" :disabled="formType!=='modify'" />
+          <el-form-item
+            :label="$t('commons.email')"
+            prop="email"
+          >
+            <el-input
+              v-model="form.email"
+              :disabled="formType!=='modify'"
+            />
           </el-form-item>
 
           <el-form-item :label="$t('commons.status')">
-            <el-radio-group v-model="form.enabled" disabled style="width: 140px">
+            <el-radio-group
+              v-model="form.enabled"
+              disabled
+              style="width: 140px"
+            >
               <el-radio :label="1">{{ $t('commons.enable') }}</el-radio>
               <el-radio :label="0">{{ $t('commons.disable') }}</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item disabled :label="$t('commons.organization')" prop="dept">
+          <el-form-item
+            disabled
+            :label="$t('commons.organization')"
+            prop="dept"
+          >
             <treeselect
               v-model="form.deptId"
               disabled
@@ -38,7 +77,10 @@
               :no-results-text="$t('commons.treeselect.no_results_text')"
             />
           </el-form-item>
-          <el-form-item :label="$t('commons.role')" prop="roleIds">
+          <el-form-item
+            :label="$t('commons.role')"
+            prop="roleIds"
+          >
             <el-select
               v-model="form.roleIds"
               disabled
@@ -57,22 +99,51 @@
             </el-select>
           </el-form-item>
 
-          <plugin-com v-if="isPluginLoaded" ref="AuthenticationBind" :user-id="form.userId" :form-type="formType" component-name="AuthenticationBind" />
+          <plugin-com
+            v-if="isPluginLoaded"
+            ref="AuthenticationBind"
+            :user-id="form.userId"
+            :form-type="formType"
+            component-name="AuthenticationBind"
+          />
 
           <!--提供修改个人电话，邮箱和昵称的功能-->
           <el-form-item v-if="formType!=='modify'">
             <el-button @click="formType = 'modify'">修改个人信息</el-button>
           </el-form-item>
           <el-form-item v-else>
-            <el-button v-if="formType==='modify'" type="primary" @click="save">保存</el-button>
-            <el-button v-if="formType==='modify'" @click="reset">取消</el-button>
+            <el-button
+              v-if="formType==='modify'"
+              type="primary"
+              @click="save"
+            >保存</el-button>
+            <el-button
+              v-if="formType==='modify'"
+              @click="reset"
+            >取消</el-button>
           </el-form-item>
         </el-form>
 
-        <div slot="footer" style="margin-left: 30px;" class="dialog-footer">
-          <el-button v-if="formType==='modify'" type="text" @click="reset">{{ $t('commons.cancel') }}</el-button>
-          <el-button v-if="formType==='modify'" type="primary" @click="save">{{ $t('commons.confirm') }}</el-button>
-          <el-button v-if="formType!=='modify'" type="primary" @click="edit">{{ $t('commons.edit') }}</el-button>
+        <div
+          slot="footer"
+          style="margin-left: 30px;"
+          class="dialog-footer"
+        >
+          <el-button
+            v-if="formType==='modify'"
+            type="text"
+            @click="reset"
+          >{{ $t('commons.cancel') }}</el-button>
+          <el-button
+            v-if="formType==='modify'"
+            type="primary"
+            @click="save"
+          >{{ $t('commons.confirm') }}</el-button>
+          <el-button
+            v-if="formType!=='modify'"
+            type="primary"
+            @click="edit"
+          >{{ $t('commons.edit') }}</el-button>
         </div>
       </el-card>
     </div>
diff --git a/frontend/src/views/system/user/userEditer.vue b/frontend/src/views/system/user/userEditer.vue
index b01ac3dfa8..b0d1c25015 100644
--- a/frontend/src/views/system/user/userEditer.vue
+++ b/frontend/src/views/system/user/userEditer.vue
@@ -8,9 +8,15 @@
     width="840px"
     :before-close="reset"
   >
-    <div v-if="formType === 'add'" class="editer-form-title">
+    <div
+      v-if="formType === 'add'"
+      class="editer-form-title"
+    >
       <i class="el-icon-info" />
-      <span class="pwd" type="text">{{
+      <span
+        class="pwd"
+        type="text"
+      >{{
         $t("commons.default_pwd") + "：" + defaultPWD
       }}</span>
       <el-button
@@ -34,7 +40,10 @@
     >
       <el-row :gutter="24">
         <el-col :span="12">
-          <el-form-item :label="$t('commons.nick_name')" prop="nickName">
+          <el-form-item
+            :label="$t('commons.nick_name')"
+            prop="nickName"
+          >
             <el-input
               v-model="form.nickName"
               :placeholder="$t('user.input_name')"
@@ -42,7 +51,10 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="ID" prop="username">
+          <el-form-item
+            label="ID"
+            prop="username"
+          >
             <el-input
               v-model="form.username"
               :placeholder="$t('user.input_id')"
@@ -53,7 +65,10 @@
       </el-row>
       <el-row :gutter="24">
         <el-col :span="12">
-          <el-form-item :label="$t('commons.email')" prop="email">
+          <el-form-item
+            :label="$t('commons.email')"
+            prop="email"
+          >
             <el-input
               v-model="form.email"
               :placeholder="$t('user.input_email')"
@@ -61,7 +76,10 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item :label="$t('commons.mobile_phone_number')" prop="phone">
+          <el-form-item
+            :label="$t('commons.mobile_phone_number')"
+            prop="phone"
+          >
             <el-input
               v-model="form.phone"
               :placeholder="$t('commons.mobile_phone')"
@@ -72,7 +90,10 @@
                 v-model="form.phonePrefix"
                 :placeholder="$t('fu.search_bar.please_select')"
               >
-                <el-option label="+86" value="+86" />
+                <el-option
+                  label="+86"
+                  value="+86"
+                />
               </el-select>
             </el-input>
           </el-form-item>
@@ -80,15 +101,27 @@
       </el-row>
       <el-row :gutter="24">
         <el-col :span="12">
-          <el-form-item :label="$t('commons.gender')" prop="gender">
+          <el-form-item
+            :label="$t('commons.gender')"
+            prop="gender"
+          >
             <el-select
               v-model="form.gender"
               class="form-gender-select"
               :placeholder="$t('user.select_gender')"
             >
-              <el-option :label="$t('commons.man')" value="男" />
-              <el-option :label="$t('commons.woman')" value="女" />
-              <el-option :label="$t('commons.keep_secret')" value="保密" />
+              <el-option
+                :label="$t('commons.man')"
+                value="男"
+              />
+              <el-option
+                :label="$t('commons.woman')"
+                value="女"
+              />
+              <el-option
+                :label="$t('commons.keep_secret')"
+                value="保密"
+              />
             </el-select>
           </el-form-item>
         </el-col>
@@ -165,7 +198,10 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item :label="$t('commons.status')" prop="enabled">
+      <el-form-item
+        :label="$t('commons.status')"
+        prop="enabled"
+      >
         <el-switch
           v-model="form.enabled"
           :disabled="formType !== 'add' && form.isAdmin"
@@ -174,11 +210,21 @@
         />
       </el-form-item>
     </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button class="btn normal" @click="reset">{{
+    <span
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button
+        class="btn normal"
+        @click="reset"
+      >{{
         $t("commons.cancel")
       }}</el-button>
-      <el-button class="btn" type="primary" @click="save">{{
+      <el-button
+        class="btn"
+        type="primary"
+        @click="save"
+      >{{
         $t("commons.confirm")
       }}</el-button>
     </span>
diff --git a/frontend/src/views/table/index.vue b/frontend/src/views/table/index.vue
index 9d72557fc4..5d99aef107 100644
--- a/frontend/src/views/table/index.vue
+++ b/frontend/src/views/table/index.vue
@@ -8,7 +8,11 @@
       fit
       highlight-current-row
     >
-      <el-table-column align="center" label="ID" width="95">
+      <el-table-column
+        align="center"
+        label="ID"
+        width="95"
+      >
         <template slot-scope="scope">
           {{ scope.$index }}
         </template>
@@ -18,22 +22,41 @@
           {{ scope.row.title }}
         </template>
       </el-table-column>
-      <el-table-column v-permission="['menu:del']" label="Author" width="110" align="center">
+      <el-table-column
+        v-permission="['menu:del']"
+        label="Author"
+        width="110"
+        align="center"
+      >
         <template slot-scope="scope">
           <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Pageviews" width="110" align="center">
+      <el-table-column
+        label="Pageviews"
+        width="110"
+        align="center"
+      >
         <template slot-scope="scope">
           {{ scope.row.pageviews }}
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="Status" width="110" align="center">
+      <el-table-column
+        class-name="status-col"
+        label="Status"
+        width="110"
+        align="center"
+      >
         <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
+      <el-table-column
+        align="center"
+        prop="created_at"
+        label="Display_time"
+        width="200"
+      >
         <template slot-scope="scope">
           <i class="el-icon-time" />
           <span>{{ scope.row.display_time }}</span>
diff --git a/frontend/src/views/tree/index.vue b/frontend/src/views/tree/index.vue
index 89c6b01de2..084619e05a 100644
--- a/frontend/src/views/tree/index.vue
+++ b/frontend/src/views/tree/index.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="app-container">
-    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
+    <el-input
+      v-model="filterText"
+      placeholder="Filter keyword"
+      style="margin-bottom:30px;"
+    />
 
     <el-tree
       ref="tree2"
diff --git a/frontend/src/views/wizard/card.vue b/frontend/src/views/wizard/card.vue
index d5d81bd750..fb1fe239e0 100644
--- a/frontend/src/views/wizard/card.vue
+++ b/frontend/src/views/wizard/card.vue
@@ -1,10 +1,19 @@
 <template>
-  <el-col :span="8" class="card_main">
+  <el-col
+    :span="8"
+    class="card_main"
+  >
     <el-row>
-      <el-col :span="8" class="card_head">
+      <el-col
+        :span="8"
+        class="card_head"
+      >
         <span>{{ headInfo }}</span>
       </el-col>
-      <el-col :span="1" class="triangle" />
+      <el-col
+        :span="1"
+        class="triangle"
+      />
     </el-row>
     <el-row class="card_content">
       <slot />
diff --git a/frontend/src/views/wizard/details/CardDetail.vue b/frontend/src/views/wizard/details/CardDetail.vue
index c4b8adadda..7699033021 100644
--- a/frontend/src/views/wizard/details/CardDetail.vue
+++ b/frontend/src/views/wizard/details/CardDetail.vue
@@ -3,7 +3,10 @@
     class="demo_main"
   >
     <div class="demo_title">
-      <a target="_blank" :href="details.href">
+      <a
+        target="_blank"
+        :href="details.href"
+      >
         <img
           :src="require('../../../assets/DataEase-' +imgIndex + '.jpg')"
           height="100%"
diff --git a/frontend/src/views/wizard/details/ContactUs.vue b/frontend/src/views/wizard/details/ContactUs.vue
index 7b17a8fdcc..37b439705a 100644
--- a/frontend/src/views/wizard/details/ContactUs.vue
+++ b/frontend/src/views/wizard/details/ContactUs.vue
@@ -1,6 +1,9 @@
 <template>
   <el-row class="demo_main">
-    <el-row style="margin-top: 5%" class="demo_content">
+    <el-row
+      style="margin-top: 5%"
+      class="demo_content"
+    >
       <span class="icon iconfont icon-fasongyoujian" />
       <span style="margin-left: 10px">dataease@fit2cloud.com</span>
     </el-row>
@@ -10,7 +13,10 @@
     </el-row>
     <el-row class="demo_content">
       <span class="icon iconfont icon-github" />
-      <span class="demo_git"><a href="https://github.com/dataease/dataease/issues" target="_blank">{{ $t('wizard.open_source_community') }}</a></span>
+      <span class="demo_git"><a
+        href="https://github.com/dataease/dataease/issues"
+        target="_blank"
+      >{{ $t('wizard.open_source_community') }}</a></span>
     </el-row>
   </el-row>
 </template>
diff --git a/frontend/src/views/wizard/details/DemoVideo.vue b/frontend/src/views/wizard/details/DemoVideo.vue
index c7fc575916..2ad1121e49 100644
--- a/frontend/src/views/wizard/details/DemoVideo.vue
+++ b/frontend/src/views/wizard/details/DemoVideo.vue
@@ -2,7 +2,10 @@
   <el-row class="demo_main">
     <div class="demo_title" />
     <div class="demo_content">
-      <a href="https://www.bilibili.com/video/BV1i34y1v7hq/" target="_blank">{{ $t('wizard.demo_video_hint') }}</a>
+      <a
+        href="https://www.bilibili.com/video/BV1i34y1v7hq/"
+        target="_blank"
+      >{{ $t('wizard.demo_video_hint') }}</a>
     </div>
   </el-row>
 </template>
diff --git a/frontend/src/views/wizard/details/EnterpriseEdition.vue b/frontend/src/views/wizard/details/EnterpriseEdition.vue
index e2c024f087..40befacca9 100644
--- a/frontend/src/views/wizard/details/EnterpriseEdition.vue
+++ b/frontend/src/views/wizard/details/EnterpriseEdition.vue
@@ -6,15 +6,18 @@
       </span>
       <br>
       <span>
-         {{ $t('wizard.enterprise_edition_hint2') }}
+        {{ $t('wizard.enterprise_edition_hint2') }}
       </span>
       <br>
       <span>
-         {{ $t('wizard.enterprise_edition_hint3') }}
+        {{ $t('wizard.enterprise_edition_hint3') }}
       </span>
     </el-row>
     <el-row class="demo_bottom">
-      <a href="https://jinshuju.net/f/TK5TTd" target="_blank"> {{ $t('wizard.click_inner') }}</a>
+      <a
+        href="https://jinshuju.net/f/TK5TTd"
+        target="_blank"
+      > {{ $t('wizard.click_inner') }}</a>
     </el-row>
   </el-row>
 </template>
diff --git a/frontend/src/views/wizard/details/LatestDevelopments.vue b/frontend/src/views/wizard/details/LatestDevelopments.vue
index 3e1d05d21d..8873f51aa0 100644
--- a/frontend/src/views/wizard/details/LatestDevelopments.vue
+++ b/frontend/src/views/wizard/details/LatestDevelopments.vue
@@ -3,7 +3,10 @@
     class="demo_main"
   >
     <div class="demo_title">
-      <a target="_blank" :href="details.href">
+      <a
+        target="_blank"
+        :href="details.href"
+      >
         <img
           :src="require('../../../assets/DataEase-' +imgIndex + '.jpg')"
           height="100%"
diff --git a/frontend/src/views/wizard/details/LatestDevelopmentsBack.vue b/frontend/src/views/wizard/details/LatestDevelopmentsBack.vue
index 1778310334..c373896688 100644
--- a/frontend/src/views/wizard/details/LatestDevelopmentsBack.vue
+++ b/frontend/src/views/wizard/details/LatestDevelopmentsBack.vue
@@ -1,14 +1,23 @@
 <template>
   <el-row class="demo_main">
     <el-row class="demo_content">
-      <el-row v-for="(details,index) in blogsInfo" :key="index">
-        <a :href="details.href" target="_blank">{{ details.title }}</a>
+      <el-row
+        v-for="(details,index) in blogsInfo"
+        :key="index"
+      >
+        <a
+          :href="details.href"
+          target="_blank"
+        >{{ details.title }}</a>
         <br>
         <span style="color: lightgray">{{ details.time }}</span>
       </el-row>
     </el-row>
     <el-row class="demo_bottom">
-      <a href="https://blog.fit2cloud.com/?cat=321" target="_blank">{{ $t('wizard.show_more') }}</a>
+      <a
+        href="https://blog.fit2cloud.com/?cat=321"
+        target="_blank"
+      >{{ $t('wizard.show_more') }}</a>
     </el-row>
   </el-row>
 </template>
diff --git a/frontend/src/views/wizard/details/OnlineDocument.vue b/frontend/src/views/wizard/details/OnlineDocument.vue
index ee4a31ef09..c369a32c2c 100644
--- a/frontend/src/views/wizard/details/OnlineDocument.vue
+++ b/frontend/src/views/wizard/details/OnlineDocument.vue
@@ -4,7 +4,10 @@
       <span>{{ $t('wizard.online_document_hint') }}</span>
     </el-row>
     <el-row class="demo_bottom">
-      <a href="https://dataease.io/docs/dev_manual/dev_manual/" target="_blank">{{ $t('wizard.click_show') }}</a>
+      <a
+        href="https://dataease.io/docs/dev_manual/dev_manual/"
+        target="_blank"
+      >{{ $t('wizard.click_show') }}</a>
     </el-row>
   </el-row>
 </template>
diff --git a/frontend/src/views/wizard/details/TeachingVideo.vue b/frontend/src/views/wizard/details/TeachingVideo.vue
index 6c5d879ce9..0fe550810e 100644
--- a/frontend/src/views/wizard/details/TeachingVideo.vue
+++ b/frontend/src/views/wizard/details/TeachingVideo.vue
@@ -2,15 +2,24 @@
   <el-row class="demo_main">
     <el-row class="demo_content">
       <span class="title">
-        <a href="https://live.vhall.com/v3/lives/subscribe/533874762" target="_blank">40分钟带你玩转 DataEase </a>
+        <a
+          href="https://live.vhall.com/v3/lives/subscribe/533874762"
+          target="_blank"
+        >40分钟带你玩转 DataEase </a>
       </span>
       <br>
       <span class="title">
-        <a href="https://live.vhall.com/v3/lives/subscribe/903960272" target="_blank">用DataEase开源工具可视化 ClickHouse数据 </a>
+        <a
+          href="https://live.vhall.com/v3/lives/subscribe/903960272"
+          target="_blank"
+        >用DataEase开源工具可视化 ClickHouse数据 </a>
       </span>
     </el-row>
     <el-row class="demo_bottom">
-      <span style="color: black">{{ $t('wizard.teaching_video_bottom_hint') }}</span><a href="https://e.vhall.com/v3/user/home/45637107" target="_blank">{{ $t('wizard.click_inner') }}</a>
+      <span style="color: black">{{ $t('wizard.teaching_video_bottom_hint') }}</span><a
+        href="https://e.vhall.com/v3/user/home/45637107"
+        target="_blank"
+      >{{ $t('wizard.click_inner') }}</a>
     </el-row>
   </el-row>
 </template>
diff --git a/frontend/src/views/wizard/index.vue b/frontend/src/views/wizard/index.vue
index 0e94e5f8be..a4dbd9fcea 100644
--- a/frontend/src/views/wizard/index.vue
+++ b/frontend/src/views/wizard/index.vue
@@ -6,9 +6,17 @@
     class="main_outer"
   />
   <div v-else-if="homeLink">
-    <iframe id="mobsf" :src="homeLink" frameborder="0" style="position:absolute;top:55px;width: 100%;height: calc(100% - 55px);" />
+    <iframe
+      id="mobsf"
+      :src="homeLink"
+      frameborder="0"
+      style="position:absolute;top:55px;width: 100%;height: calc(100% - 55px);"
+    />
   </div>
-  <el-row v-else class="main_container_outer">
+  <el-row
+    v-else
+    class="main_container_outer"
+  >
     <el-row class="main_container">
       <el-row class="main_content">
         <el-row class="content_top_banner">
@@ -16,33 +24,57 @@
             <div class="hint_head">{{ $t('wizard.welcome_title') }}</div>
             <div class="hint_content">{{ $t('wizard.welcome_hint') }}</div>
           </div>
-          <svg-icon class="top_banner_img"  icon-class="wizard_main_bg_inner"></svg-icon>
+          <svg-icon
+            class="top_banner_img"
+            icon-class="wizard_main_bg_inner"
+          />
         </el-row>
         <el-row class="top_banner_card">
-          <wizard-card :details="cardList[0]"></wizard-card>
-          <wizard-card :details="cardList[1]" style="margin:0 24px 0 24px"></wizard-card>
-          <wizard-card-enterprise :details="cardList[2]"></wizard-card-enterprise>
+          <wizard-card :details="cardList[0]" />
+          <wizard-card
+            :details="cardList[1]"
+            style="margin:0 24px 0 24px"
+          />
+          <wizard-card-enterprise :details="cardList[2]" />
         </el-row>
         <el-row class="content_middle">
           <div class="content_middle_left">
             <el-row>
               <span class="content_middle_title">{{ $t('wizard.teaching_video') }}</span>
-              <div class="content_middle_more"><a target="_blank" href="https://space.bilibili.com/510493147/channel/collectiondetail?sid=262774">{{ $t('wizard.more') }}<i class="el-icon-arrow-right" /></a></div>
+              <div class="content_middle_more"><a
+                target="_blank"
+                href="https://space.bilibili.com/510493147/channel/collectiondetail?sid=262774"
+              >{{ $t('wizard.more') }}<i class="el-icon-arrow-right" /></a></div>
             </el-row>
             <el-row style="margin-top: 12px">
-              <video-card :details="videoList[0]"></video-card>
-              <video-card style="margin:0 12px 0 12px" :details="videoList[1]"></video-card>
-              <video-card :details="videoList[2]"></video-card>
+              <video-card :details="videoList[0]" />
+              <video-card
+                style="margin:0 12px 0 12px"
+                :details="videoList[1]"
+              />
+              <video-card :details="videoList[2]" />
             </el-row>
           </div>
           <div class="content_middle_right">
             <el-row>
               <span class="content_middle_title">{{ $t('wizard.latest_developments') }}</span>
-              <div class="content_middle_more"><a target="_blank" href="https://blog.fit2cloud.com/?cat=321">{{ $t('wizard.more') }}<i class="el-icon-arrow-right" /></a></div>
+              <div class="content_middle_more"><a
+                target="_blank"
+                href="https://blog.fit2cloud.com/?cat=321"
+              >{{ $t('wizard.more') }}<i class="el-icon-arrow-right" /></a></div>
             </el-row>
-            <el-row >
+            <el-row>
               <ul class="ul-custom">
-                <li class="li-custom" v-for="blogItem in blogsInfo"><a target="_blank" class="li-a" :href="blogItem.href" :title="blogItem.title" >{{blogItem.title}}</a></li>
+                <li
+                  v-for="blogItem in blogsInfo"
+                  :key="blogItem.title"
+                  class="li-custom"
+                ><a
+                  target="_blank"
+                  class="li-a"
+                  :href="blogItem.href"
+                  :title="blogItem.title"
+                >{{ blogItem.title }}</a></li>
               </ul>
             </el-row>
           </div>
@@ -51,27 +83,37 @@
         <el-row class="content_bottom">
           <div class="content_bottom_contact">
             <el-row class="contact_title">
-              <span>{{$t('wizard.contact_us')}}</span>
+              <span>{{ $t('wizard.contact_us') }}</span>
             </el-row>
             <el-row class="contact_content">
-              <span>{{$t('wizard.email')}}dataease@fit2cloud.com</span>
+              <span>{{ $t('wizard.email') }}dataease@fit2cloud.com</span>
             </el-row>
             <el-row class="contact_content">
-              <span>{{$t('wizard.tel')}}400-052-0755</span>
+              <span>{{ $t('wizard.tel') }}400-052-0755</span>
             </el-row>
             <el-row class="contact_content">
-              {{$t('wizard.web')}}<a style="text-decoration:underline;" target="_blank" href="https://www.dataease.io">www.dataease.io</a>
+              {{ $t('wizard.web') }}<a
+                style="text-decoration:underline;"
+                target="_blank"
+                href="https://www.dataease.io"
+              >www.dataease.io</a>
             </el-row>
           </div>
 
           <div class="content_bottom_qr_code">
             <div class="contact_wechat_official">
               <div class="contact_title_qr">微信公众号</div>
-              <img class="contact_wechat_official_img" src="@/assets/wizard_wechat-official.jpeg"></img>
+              <img
+                class="contact_wechat_official_img"
+                src="@/assets/wizard_wechat-official.jpeg"
+              >
             </div>
             <div class="contact_wechat_group">
               <div class="contact_title_qr">技术交流群</div>
-              <img class="contact_wechat_group_img"  src="@/assets/wizard_wechat-group.png"></img>
+              <img
+                class="contact_wechat_group_img"
+                src="@/assets/wizard_wechat-group.png"
+              >
             </div>
           </div>
         </el-row>
@@ -79,35 +121,26 @@
       </el-row>
     </el-row>
 
-
   </el-row>
 </template>
 
 <script>
 
-import Card from '@/views/wizard/card'
-import DemoVideo from '@/views/wizard/details/DemoVideo'
-import OnlineDocument from '@/views/wizard/details/OnlineDocument'
-import LatestDevelopments from '@/views/wizard/details/LatestDevelopments'
-import TeachingVideo from '@/views/wizard/details/TeachingVideo'
-import EnterpriseEdition from '@/views/wizard/details/EnterpriseEdition'
-import ContactUs from '@/views/wizard/details/ContactUs'
-import InfoCard from '@/views/wizard/infoCard'
-import CardDetail from '@/views/wizard/details/CardDetail'
 import { blogLastActive } from '@/api/wizard/wizard'
-import WizardCard from "@/views/wizard/wizardCard";
-import VideoCard from "@/views/wizard/videoCard";
-import WizardCardEnterprise from "@/views/wizard/wizardCardEnterprise";
+import WizardCard from '@/views/wizard/wizardCard'
+import VideoCard from '@/views/wizard/videoCard'
+import WizardCardEnterprise from '@/views/wizard/wizardCardEnterprise'
 
 export default {
   name: 'Wizard',
   components: {
     WizardCardEnterprise,
     VideoCard,
-    WizardCard, InfoCard, Card, DemoVideo, OnlineDocument, LatestDevelopments, TeachingVideo, EnterpriseEdition, ContactUs, CardDetail },
+    WizardCard
+  },
   data() {
     return {
-      blogsInfo:[],
+      blogsInfo: [],
       cardList: [
         {
           head: this.$t('wizard.quick_start'),
@@ -121,15 +154,15 @@ export default {
           content: this.$t('wizard.online_document_hint'),
           img: 'wizard_help',
           bgColor: '#F3F2FF',
-          href: 'https://dataease.io/docs/index.html',
+          href: 'https://dataease.io/docs/index.html'
         },
         {
           head: this.$t('wizard.enterprise_edition'),
           content: this.$t('wizard.enterprise_edition_hint1') + '<br>' + this.$t('wizard.enterprise_edition_hint2') + '<br>' + this.$t('wizard.enterprise_edition_hint3'),
           img: 'wizard_enterprise',
           bgColor: '#FFFAF0',
-          href: 'https://jinshuju.net/f/TK5TTd',
-        },
+          href: 'https://jinshuju.net/f/TK5TTd'
+        }
       ],
       videoList: [
         {
diff --git a/frontend/src/views/wizard/index_back.vue b/frontend/src/views/wizard/index_back.vue
index fc5d8d632f..d3c2875307 100644
--- a/frontend/src/views/wizard/index_back.vue
+++ b/frontend/src/views/wizard/index_back.vue
@@ -5,16 +5,31 @@
     style="position:absolute;top:55px;width: 100%;height: calc(100% - 55px);"
   />
   <div v-else-if="homeLink">
-    <iframe id="mobsf" :src="homeLink" frameborder="0" style="position:absolute;top:55px;width: 100%;height: calc(100% - 55px);" />
+    <iframe
+      id="mobsf"
+      :src="homeLink"
+      frameborder="0"
+      style="position:absolute;top:55px;width: 100%;height: calc(100% - 55px);"
+    />
   </div>
-  <el-row v-else class="main_container">
+  <el-row
+    v-else
+    class="main_container"
+  >
     <el-row class="head">
       <span class="hint_head">{{ $t('wizard.welcome_title') }}</span> <br>
       <span class="hint_content">{{ $t('wizard.welcome_hint') }}</span>
     </el-row>
     <el-row class="card_container">
-      <info-card v-for="(cardDetail,index) in cardList" :key="index">
-        <component :is="cardDetail.component" :img-index="index" :details="cardDetail" />
+      <info-card
+        v-for="(cardDetail,index) in cardList"
+        :key="index"
+      >
+        <component
+          :is="cardDetail.component"
+          :img-index="index"
+          :details="cardDetail"
+        />
       </info-card>
     </el-row>
   </el-row>
@@ -117,8 +132,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .main_container {
-  }
   .head {
     text-align: center;
     color: white;
diff --git a/frontend/src/views/wizard/infoCard.vue b/frontend/src/views/wizard/infoCard.vue
index ccecdbb681..fed6427369 100644
--- a/frontend/src/views/wizard/infoCard.vue
+++ b/frontend/src/views/wizard/infoCard.vue
@@ -1,5 +1,8 @@
 <template>
-  <el-col :span="8" class="card_main">
+  <el-col
+    :span="8"
+    class="card_main"
+  >
     <el-row class="card_content">
       <slot />
     </el-row>
diff --git a/frontend/src/views/wizard/videoCard.vue b/frontend/src/views/wizard/videoCard.vue
index 85b9f70c67..c61096feb5 100644
--- a/frontend/src/views/wizard/videoCard.vue
+++ b/frontend/src/views/wizard/videoCard.vue
@@ -1,14 +1,26 @@
 <template>
   <el-row class="video_main">
-    <div class="video_top" >
-      <a :href="details.href" target="_blank">
-        <img :src="require('@/assets/'+details.img)" alt="404">
-        <svg-icon class="play-icon" icon-class="round_play"></svg-icon>
+    <div class="video_top">
+      <a
+        :href="details.href"
+        target="_blank"
+      >
+        <img
+          :src="require('@/assets/'+details.img)"
+          alt="404"
+        >
+        <svg-icon
+          class="play-icon"
+          icon-class="round_play"
+        />
       </a>
     </div>
     <div class="video_content">
-      <a :href="details.href" target="_blank">
-        {{details.content}}
+      <a
+        :href="details.href"
+        target="_blank"
+      >
+        {{ details.content }}
       </a>
     </div>
   </el-row>
diff --git a/frontend/src/views/wizard/wizardCard.vue b/frontend/src/views/wizard/wizardCard.vue
index ad7e2914fb..ca795e4dd6 100644
--- a/frontend/src/views/wizard/wizardCard.vue
+++ b/frontend/src/views/wizard/wizardCard.vue
@@ -1,25 +1,32 @@
 <template>
-  <div :style='{background:details.bgColor}' class="card_main"  @click.stop="goToWeb">
+  <div
+    :style="{background:details.bgColor}"
+    class="card_main"
+    @click.stop="goToWeb"
+  >
     <el-col style="width: 200px">
       <el-row class="card_head">
-        {{details.head}}
+        {{ details.head }}
       </el-row>
-      <el-row  class="card_content">
-        <span v-html="details.content"></span>
+      <el-row class="card_content">
+        <span v-html="details.content" />
       </el-row>
       <el-row class="card_bottom">
-          {{$t('wizard.click_show') }}
-          <i class="el-icon-arrow-right" />
-      </el-row >
+        {{ $t('wizard.click_show') }}
+        <i class="el-icon-arrow-right" />
+      </el-row>
     </el-col>
-    <svg-icon class="img-position" :icon-class="details.img"></svg-icon>
+    <svg-icon
+      class="img-position"
+      :icon-class="details.img"
+    />
   </div>
 </template>
 
 <script>
 
 export default {
-  name: 'wizardCard',
+  name: 'WizardCard',
   props: {
     details: {
       type: Object,
@@ -29,11 +36,11 @@ export default {
   data() {
     return {}
   },
-  computed:{
+  computed: {
   },
-  methods:{
-    goToWeb(){
-      window.open(this.details.href,'_blank')
+  methods: {
+    goToWeb() {
+      window.open(this.details.href, '_blank')
     }
   }
 }
diff --git a/frontend/src/views/wizard/wizardCardEnterprise.vue b/frontend/src/views/wizard/wizardCardEnterprise.vue
index f536f0948c..8f1d344436 100644
--- a/frontend/src/views/wizard/wizardCardEnterprise.vue
+++ b/frontend/src/views/wizard/wizardCardEnterprise.vue
@@ -1,18 +1,25 @@
 <template>
-  <div :style='{background:details.bgColor}' class="card_main"  @click.stop="goToWeb">
+  <div
+    :style="{background:details.bgColor}"
+    class="card_main"
+    @click.stop="goToWeb"
+  >
     <el-col style="width: 230px">
       <el-row class="card_head">
-        {{details.head}}
+        {{ details.head }}
       </el-row>
-      <el-row  class="card_content">
-        <span v-html="details.content"></span>
+      <el-row class="card_content">
+        <span v-html="details.content" />
       </el-row>
       <el-row class="card_bottom">
-          {{$t('wizard.apply') }}
-          <i class="el-icon-arrow-right" />
-      </el-row >
+        {{ $t('wizard.apply') }}
+        <i class="el-icon-arrow-right" />
+      </el-row>
     </el-col>
-    <svg-icon class="img-position" :icon-class="details.img"></svg-icon>
+    <svg-icon
+      class="img-position"
+      :icon-class="details.img"
+    />
   </div>
 </template>
 
@@ -29,11 +36,11 @@ export default {
   data() {
     return {}
   },
-  computed:{
+  computed: {
   },
-  methods:{
-    goToWeb(){
-      window.open(this.details.href,'_blank')
+  methods: {
+    goToWeb() {
+      window.open(this.details.href, '_blank')
     }
   }
 }
diff --git a/mobile/package.json b/mobile/package.json
index dbf3645e3a..7dfb130271 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dataease-mobile",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "private": true,
   "scripts": {
     "serve": "npm run dev:h5",
diff --git a/mobile/pom.xml b/mobile/pom.xml
index c7bc8f1d80..d171907ce1 100644
--- a/mobile/pom.xml
+++ b/mobile/pom.xml
@@ -6,7 +6,7 @@
     <parent>
         <artifactId>dataease-server</artifactId>
         <groupId>io.dataease</groupId>
-        <version>1.15.0</version>
+        <version>1.16.0</version>
     </parent>
 
     <modelVersion>4.0.0</modelVersion>
diff --git a/pom.xml b/pom.xml
index 7797515123..2f824748d7 100644
--- a/pom.xml
+++ b/pom.xml
@@ -5,7 +5,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>io.dataease</groupId>
     <artifactId>dataease-server</artifactId>
-    <version>1.15.0</version>
+    <version>1.16.0</version>
     <packaging>pom</packaging>
 
     <parent>