diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 9564f5e7d..b98bfa449 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -4,6 +4,40 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+      "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.10.4"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
+      "dev": true
+    },
+    "@babel/highlight": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.13.10.tgz",
+      "integrity": "sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "dependencies": {
+        "js-tokens": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+          "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+          "dev": true
+        }
+      }
+    },
     "@babel/runtime": {
       "version": "7.12.5",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
@@ -19,6 +53,119 @@
         }
       }
     },
+    "@eslint/eslintrc": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
+      "integrity": "sha512-2ZPCc+uNbjV5ERJr+aKSPRwZgKd2z11x0EgLvb1PURmUrn9QNRXFqje0Ldq454PfAVyaJYyrDvvIKSFP4NnBog==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.1.1",
+        "espree": "^7.3.0",
+        "globals": "^12.1.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^3.13.1",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "esprima": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+          "dev": true
+        },
+        "globals": {
+          "version": "12.4.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.8.1"
+          }
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "dev": true,
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
+    "@johmun/vue-tags-input": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@johmun/vue-tags-input/-/vue-tags-input-2.1.0.tgz",
+      "integrity": "sha512-Fdwfss/TqCqMJbGAkmlzKbcG/ia1MstYjhqPBj+zG7h/166tIcE1TIftUxhT9LZ+RWjRSG0EFA1UyaHQSr3k3Q==",
+      "requires": {
+        "vue": "^2.6.10"
+      }
+    },
     "@riophae/vue-treeselect": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
@@ -91,6 +238,12 @@
       "resolved": "https://registry.npmjs.org/@topology/sequence-diagram/-/sequence-diagram-0.3.0.tgz",
       "integrity": "sha512-qSLXKd//lW5jb/e7nMRwxRWz/bXmkourVHBmZ2cRulZPe0KTeLiE/LkYJ+ffDFNDdCIYedHBC+CeQc3PULCqRQ=="
     },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
@@ -135,6 +288,12 @@
         }
       }
     },
+    "acorn-jsx": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
+      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
+      "dev": true
+    },
     "adler-32": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
@@ -184,6 +343,12 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "ansi-colors": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
+      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
+      "dev": true
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -199,7 +364,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -354,6 +518,71 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
+    "array.prototype.flat": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz",
+      "integrity": "sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.1"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.0",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
+          "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.2",
+            "is-string": "^1.0.5",
+            "object-inspect": "^1.9.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.0"
+          }
+        },
+        "has-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+          "dev": true
+        },
+        "is-callable": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
+          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
+          "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "object-inspect": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.2.tgz",
+          "integrity": "sha512-gz58rdPpadwztRrPjZE9DZLOABUpTGdcANUgOwBFO1C+HZZhePoP83M65WGDmbpwFYJSWqavbl4SgDn4k8RYTA==",
+          "dev": true
+        }
+      }
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -411,6 +640,12 @@
       "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
       "dev": true
     },
+    "astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true
+    },
     "async": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
@@ -476,9 +711,9 @@
       "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
-      "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
+      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
     "axios": {
       "version": "0.19.0",
@@ -1816,6 +2051,16 @@
         }
       }
     },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
     "caller-callsite": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
@@ -1987,6 +2232,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "clamp": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
+      "integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ="
+    },
     "clap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz",
@@ -2175,7 +2425,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -2183,8 +2432,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "0.3.0",
@@ -2330,6 +2578,12 @@
       "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=",
       "dev": true
     },
+    "contains-path": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
+      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=",
+      "dev": true
+    },
     "content-disposition": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
@@ -3661,6 +3915,12 @@
         "regexp.prototype.flags": "^1.2.0"
       }
     },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
+    },
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
@@ -3856,6 +4116,15 @@
         "buffer-indexof": "^1.0.0"
       }
     },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -4020,6 +4289,11 @@
       "resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz",
       "integrity": "sha1-Bl4tvtaVm/RwZ57avq95gdEAOrY="
     },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+    },
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
@@ -4053,6 +4327,15 @@
         "tapable": "^0.2.7"
       }
     },
+    "enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^4.1.1"
+      }
+    },
     "entities": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
@@ -4220,12 +4503,617 @@
         "estraverse": "^4.1.1"
       }
     },
+    "eslint": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.25.0.tgz",
+      "integrity": "sha512-TVpSovpvCNpLURIScDRB6g5CYu/ZFq9GfX2hLNIV4dSBKxIWojeDODvYl3t0k0VtMxYeR8OXPCFE5+oHMlGfhw==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.12.11",
+        "@eslint/eslintrc": "^0.4.0",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.0.1",
+        "doctrine": "^3.0.0",
+        "enquirer": "^2.3.5",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^2.0.0",
+        "espree": "^7.3.1",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^5.0.0",
+        "globals": "^13.6.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^3.13.1",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash": "^4.17.21",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "progress": "^2.0.0",
+        "regexpp": "^3.1.0",
+        "semver": "^7.2.1",
+        "strip-ansi": "^6.0.0",
+        "strip-json-comments": "^3.1.0",
+        "table": "^6.0.4",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "esprima": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+          "dev": true
+        },
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "globals": {
+          "version": "13.8.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.8.0.tgz",
+          "integrity": "sha512-rHtdA6+PDBIjeEvA91rpqzEvk/k3/i7EeNQiryiWuJH0Hw9cpyJMAt2jtbAwUaRdhD+573X4vWw6IcjKPasi9Q==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "dev": true,
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+          "dev": true
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-config-standard": {
+      "version": "16.0.2",
+      "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-16.0.2.tgz",
+      "integrity": "sha512-fx3f1rJDsl9bY7qzyX8SAtP8GBSk6MfXFaTfaGgk12aAYW4gJSyRm7dM790L6cbXv63fvjY4XeSzXnb4WM+SKw==",
+      "dev": true
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
+      "integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==",
+      "dev": true,
+      "requires": {
+        "debug": "^2.6.9",
+        "resolve": "^1.13.1"
+      }
+    },
+    "eslint-module-utils": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz",
+      "integrity": "sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==",
+      "dev": true,
+      "requires": {
+        "debug": "^2.6.9",
+        "pkg-dir": "^2.0.0"
+      }
+    },
+    "eslint-plugin-es": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz",
+      "integrity": "sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==",
+      "dev": true,
+      "requires": {
+        "eslint-utils": "^2.0.0",
+        "regexpp": "^3.0.0"
+      }
+    },
+    "eslint-plugin-import": {
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz",
+      "integrity": "sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.1",
+        "array.prototype.flat": "^1.2.3",
+        "contains-path": "^0.1.0",
+        "debug": "^2.6.9",
+        "doctrine": "1.5.0",
+        "eslint-import-resolver-node": "^0.3.4",
+        "eslint-module-utils": "^2.6.0",
+        "has": "^1.0.3",
+        "minimatch": "^3.0.4",
+        "object.values": "^1.1.1",
+        "read-pkg-up": "^2.0.0",
+        "resolve": "^1.17.0",
+        "tsconfig-paths": "^3.9.0"
+      },
+      "dependencies": {
+        "array-includes": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
+          "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3",
+            "es-abstract": "^1.18.0-next.2",
+            "get-intrinsic": "^1.1.1",
+            "is-string": "^1.0.5"
+          }
+        },
+        "doctrine": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
+          "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "isarray": "^1.0.0"
+          }
+        },
+        "es-abstract": {
+          "version": "1.18.0",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
+          "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.2",
+            "is-string": "^1.0.5",
+            "object-inspect": "^1.9.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.0"
+          }
+        },
+        "has-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+          "dev": true
+        },
+        "is-callable": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
+          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
+          "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "object-inspect": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.2.tgz",
+          "integrity": "sha512-gz58rdPpadwztRrPjZE9DZLOABUpTGdcANUgOwBFO1C+HZZhePoP83M65WGDmbpwFYJSWqavbl4SgDn4k8RYTA==",
+          "dev": true
+        },
+        "object.values": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.3.tgz",
+          "integrity": "sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3",
+            "es-abstract": "^1.18.0-next.2",
+            "has": "^1.0.3"
+          }
+        },
+        "resolve": {
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+          "dev": true,
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
+    "eslint-plugin-node": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz",
+      "integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==",
+      "dev": true,
+      "requires": {
+        "eslint-plugin-es": "^3.0.0",
+        "eslint-utils": "^2.0.0",
+        "ignore": "^5.1.1",
+        "minimatch": "^3.0.4",
+        "resolve": "^1.10.1",
+        "semver": "^6.1.0"
+      },
+      "dependencies": {
+        "ignore": {
+          "version": "5.1.8",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-promise": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.3.1.tgz",
+      "integrity": "sha512-bY2sGqyptzFBDLh/GMbAxfdJC+b0f23ME63FOE4+Jao0oZ3E1LEwFtWJX/1pGMJLiTtrSSern2CRM/g+dfc0eQ==",
+      "dev": true
+    },
+    "eslint-plugin-vue": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.9.0.tgz",
+      "integrity": "sha512-2Q0qQp5+5h+pZvJKCbG1/jCRUYrdgAz5BYKGyTlp2NU8mx09u3Hp7PsH6d5qef6ojuPoCXMnrbbDxeoplihrSw==",
+      "dev": true,
+      "requires": {
+        "eslint-utils": "^2.1.0",
+        "natural-compare": "^1.4.0",
+        "semver": "^7.3.2",
+        "vue-eslint-parser": "^7.6.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "dependencies": {
+        "esrecurse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+          "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+          "dev": true,
+          "requires": {
+            "estraverse": "^5.2.0"
+          },
+          "dependencies": {
+            "estraverse": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+              "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+              "dev": true
+            }
+          }
+        }
+      }
+    },
+    "eslint-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^1.1.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz",
+      "integrity": "sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==",
+      "dev": true
+    },
+    "espree": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
+      "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.4.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^1.3.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        },
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "dev": true
+        }
+      }
+    },
     "esprima": {
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
       "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=",
       "dev": true
     },
+    "esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        }
+      }
+    },
     "esrecurse": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
@@ -4576,6 +5464,12 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
       "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
     },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
     "fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -4600,6 +5494,15 @@
         "escape-string-regexp": "^1.0.5"
       }
     },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
     "file-loader": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
@@ -4741,6 +5644,33 @@
         "locate-path": "^2.0.0"
       }
     },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "flatted": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.1.tgz",
+      "integrity": "sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==",
+      "dev": true
+    },
     "flatten": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
@@ -5484,6 +6414,12 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
     "fuzzysearch": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
@@ -5541,7 +6477,19 @@
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
+      "dev": true
+    },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
     },
     "get-stdin": {
       "version": "4.0.1",
@@ -5673,9 +6621,9 @@
       }
     },
     "globule": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.0.tgz",
-      "integrity": "sha512-YlD4kdMqRCQHrhVdonet4TdRtv1/sZKepvoxNT4Nrhrp5HI8XFfc8kFlGlBn2myBo80aGp8Eft259mbcUJhgSg==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
+      "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
       "requires": {
         "glob": "~7.1.1",
         "lodash": "~4.17.10",
@@ -5744,18 +6692,18 @@
       "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
     },
     "har-validator": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
-      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
       "requires": {
-        "ajv": "^6.5.5",
+        "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
       },
       "dependencies": {
         "ajv": {
-          "version": "6.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz",
-          "integrity": "sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==",
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
@@ -5764,9 +6712,9 @@
           }
         },
         "fast-deep-equal": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -5791,6 +6739,12 @@
         "ansi-regex": "^2.0.0"
       }
     },
+    "has-bigints": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
+      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
+      "dev": true
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -6204,9 +7158,9 @@
       "dev": true
     },
     "in-publish": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
+      "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ=="
     },
     "indent-string": {
       "version": "2.1.0",
@@ -6272,7 +7226,8 @@
     "invert-kv": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
+      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
+      "dev": true
     },
     "ip": {
       "version": "1.1.5",
@@ -6311,6 +7266,12 @@
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
+    "is-bigint": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.1.tgz",
+      "integrity": "sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==",
+      "dev": true
+    },
     "is-binary-path": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
@@ -6320,6 +7281,15 @@
         "binary-extensions": "^1.0.0"
       }
     },
+    "is-boolean-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.0.tgz",
+      "integrity": "sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0"
+      }
+    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -6346,6 +7316,15 @@
         "rgba-regex": "^1.0.0"
       }
     },
+    "is-core-module": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz",
+      "integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
     "is-data-descriptor": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
@@ -6434,6 +7413,12 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-negative-zero": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
+      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==",
+      "dev": true
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -6443,6 +7428,12 @@
         "kind-of": "^3.0.2"
       }
     },
+    "is-number-object": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz",
+      "integrity": "sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==",
+      "dev": true
+    },
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
@@ -6534,6 +7525,12 @@
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
       "dev": true
     },
+    "is-string": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
+      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==",
+      "dev": true
+    },
     "is-svg": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-2.1.0.tgz",
@@ -6664,6 +7661,12 @@
       "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
       "dev": true
     },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -6758,6 +7761,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
       "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+      "dev": true,
       "requires": {
         "invert-kv": "^1.0.0"
       }
@@ -6772,6 +7776,16 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
       "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
     },
+    "levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      }
+    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -6856,6 +7870,12 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -6891,6 +7911,17 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
+      "dev": true
+    },
     "lodash.union": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
@@ -7316,6 +8347,14 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
       "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
     },
+    "moment-timezone": {
+      "version": "0.5.33",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.33.tgz",
+      "integrity": "sha512-PTc2vcT8K9J5/9rDEPe5czSIKgLoGsH8UNpA4qZTVw0Vd/Uz19geE9abbIOQKaAQFcnQ3v5YEXrbSc5BpshH+w==",
+      "requires": {
+        "moment": ">= 2.9.0"
+      }
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -7418,6 +8457,12 @@
         }
       }
     },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
     "ncp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
@@ -7553,9 +8598,9 @@
       }
     },
     "node-sass": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
-      "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
       "requires": {
         "async-foreach": "^0.1.3",
         "chalk": "^1.1.1",
@@ -7571,7 +8616,7 @@
         "node-gyp": "^3.8.0",
         "npmlog": "^4.0.0",
         "request": "^2.88.0",
-        "sass-graph": "^2.2.4",
+        "sass-graph": "2.2.5",
         "stdout-stream": "^1.4.0",
         "true-case-path": "^1.0.2"
       },
@@ -7764,6 +8809,18 @@
         "isobject": "^3.0.0"
       }
     },
+    "object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      }
+    },
     "object.getownpropertydescriptors": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
@@ -7902,6 +8959,20 @@
         }
       }
     },
+    "optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "requires": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      }
+    },
     "ora": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/ora/-/ora-1.4.0.tgz",
@@ -8043,6 +9114,23 @@
       "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
       "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
     },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      },
+      "dependencies": {
+        "callsites": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+          "dev": true
+        }
+      }
+    },
     "parse-asn1": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz",
@@ -8123,8 +9211,7 @@
     "path-exists": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-      "dev": true
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
     },
     "path-is-absolute": {
       "version": "1.0.1",
@@ -10570,6 +11657,12 @@
         }
       }
     },
+    "prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true
+    },
     "prepend-http": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
@@ -10620,6 +11713,12 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -10656,9 +11755,9 @@
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
     },
     "psl": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.7.0.tgz",
-      "integrity": "sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
     },
     "public-encrypt": {
       "version": "4.0.3",
@@ -11012,6 +12111,12 @@
         "define-properties": "^1.1.2"
       }
     },
+    "regexpp": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
+      "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==",
+      "dev": true
+    },
     "regexpu-core": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
@@ -11092,9 +12197,9 @@
       }
     },
     "request": {
-      "version": "2.88.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
-      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+      "version": "2.88.2",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -11103,7 +12208,7 @@
         "extend": "~3.0.2",
         "forever-agent": "~0.6.1",
         "form-data": "~2.3.2",
-        "har-validator": "~5.1.0",
+        "har-validator": "~5.1.3",
         "http-signature": "~1.2.0",
         "is-typedarray": "~1.0.0",
         "isstream": "~0.1.2",
@@ -11113,7 +12218,7 @@
         "performance-now": "^2.1.0",
         "qs": "~6.5.2",
         "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.4.3",
+        "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
       },
@@ -11139,7 +12244,8 @@
     "require-main-filename": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
+      "dev": true
     },
     "requires-port": {
       "version": "1.0.0",
@@ -11273,172 +12379,136 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass-graph": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
       "requires": {
         "glob": "^7.0.0",
         "lodash": "^4.0.0",
         "scss-tokenizer": "^0.2.3",
-        "yargs": "^7.0.0"
+        "yargs": "^13.3.2"
       },
       "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
         "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
         },
         "cliui": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
-          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
           "requires": {
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wrap-ansi": "^2.0.0"
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
           }
         },
         "find-up": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
           "requires": {
-            "path-exists": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
+            "locate-path": "^3.0.0"
           }
         },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
           "requires": {
-            "number-is-nan": "^1.0.0"
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
           }
         },
-        "load-json-file": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "parse-json": "^2.2.0",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0",
-            "strip-bom": "^2.0.0"
-          }
-        },
-        "os-locale": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
-          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-          "requires": {
-            "lcid": "^1.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "path-type": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "pify": {
+        "p-limit": {
           "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
-        },
-        "read-pkg": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
           "requires": {
-            "load-json-file": "^1.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^1.0.0"
+            "p-try": "^2.0.0"
           }
         },
-        "read-pkg-up": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
           "requires": {
-            "find-up": "^1.0.0",
-            "read-pkg": "^1.0.0"
+            "p-limit": "^2.0.0"
           }
         },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+        },
         "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
           }
         },
-        "strip-bom": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "requires": {
-            "is-utf8": "^0.2.0"
+            "ansi-regex": "^4.1.0"
           }
         },
-        "which-module": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
-        },
-        "y18n": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
         },
         "yargs": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
-          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
           "requires": {
-            "camelcase": "^3.0.0",
-            "cliui": "^3.2.0",
-            "decamelize": "^1.1.1",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^1.4.0",
-            "read-pkg-up": "^1.0.1",
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
             "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
+            "require-main-filename": "^2.0.0",
             "set-blocking": "^2.0.0",
-            "string-width": "^1.0.2",
-            "which-module": "^1.0.0",
-            "y18n": "^3.2.1",
-            "yargs-parser": "^5.0.0"
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
           }
         },
         "yargs-parser": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
           "requires": {
-            "camelcase": "^3.0.0"
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
           }
         }
       }
@@ -11784,6 +12854,49 @@
       "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
       "dev": true
     },
+    "slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        }
+      }
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -12252,6 +13365,16 @@
         }
       }
     },
+    "string.prototype.trimend": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
     "string.prototype.trimleft": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz",
@@ -12272,6 +13395,16 @@
         "function-bind": "^1.1.1"
       }
     },
+    "string.prototype.trimstart": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -12308,6 +13441,12 @@
         "get-stdin": "^4.0.1"
       }
     },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -12404,6 +13543,91 @@
         "whet.extend": "~0.9.9"
       }
     },
+    "table": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.6.0.tgz",
+      "integrity": "sha512-iZMtp5tUvcnAdtHpZTWLPF0M7AgiQsURR2DwmxnJwSy8I3+cY+ozzVvYha3BOLG2TB+L0CqjIz+91htuj6yCXg==",
+      "dev": true,
+      "requires": {
+        "ajv": "^8.0.1",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.1.0.tgz",
+          "integrity": "sha512-B/Sk2Ix7A36fs/ZkuGLIR86EdjbgR6fsAcbx9lOP/QBSXujDNbVmIS/U4Itz5k8fPFDeVZl/zQ/gJW4Jrq6XjQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "require-from-string": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+          "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.9.tgz",
@@ -12446,6 +13670,12 @@
         }
       }
     },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
     "throttle-debounce": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
@@ -12493,6 +13723,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -12549,19 +13784,12 @@
       "dev": true
     },
     "tough-cookie": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
-      "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
       "requires": {
-        "psl": "^1.1.24",
-        "punycode": "^1.4.1"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
-        }
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
       }
     },
     "trim-newlines": {
@@ -12589,6 +13817,35 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
       "dev": true
     },
+    "tsconfig-paths": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz",
+      "integrity": "sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==",
+      "dev": true,
+      "requires": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.1",
+        "minimist": "^1.2.0",
+        "strip-bom": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        }
+      }
+    },
     "tslib": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
@@ -12619,6 +13876,21 @@
       "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
       "dev": true
     },
+    "type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1"
+      }
+    },
+    "type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true
+    },
     "type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -12728,6 +14000,26 @@
         }
       }
     },
+    "unbox-primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
+      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has-bigints": "^1.0.1",
+        "has-symbols": "^1.0.2",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "dependencies": {
+        "has-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+          "dev": true
+        }
+      }
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -12975,6 +14267,25 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
       "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ=="
     },
+    "v-dropdown": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/v-dropdown/-/v-dropdown-2.1.1.tgz",
+      "integrity": "sha512-Rc+LairgIJENvLQCBpl4QAcen8h0EIffKaLeb+W5G2dPrW8HbPLDqQhxKOdXPQB4dcCIePie/Os6TN4K5i0a0Q=="
+    },
+    "v-selectpage": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/v-selectpage/-/v-selectpage-2.1.4.tgz",
+      "integrity": "sha512-053BnHFDpxcOEznRmoIdpJumolgAjJJXR6Bsd02ALI5NRDnpJUsSMRVdYx8ZVuAMNIsHmI/Xl4xRMFxQE0M34A==",
+      "requires": {
+        "v-dropdown": "^2.1.0"
+      }
+    },
+    "v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -13034,6 +14345,17 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-color": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
+      "integrity": "sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==",
+      "requires": {
+        "clamp": "^1.0.1",
+        "lodash.throttle": "^4.0.0",
+        "material-colors": "^1.0.0",
+        "tinycolor2": "^1.1.2"
+      }
+    },
     "vue-countupjs": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/vue-countupjs/-/vue-countupjs-1.0.0.tgz",
@@ -13048,6 +14370,60 @@
       "resolved": "https://registry.npmjs.org/vue-draggable-resizable/-/vue-draggable-resizable-2.3.0.tgz",
       "integrity": "sha512-77CLRj1TPwB30pwsjOf3pkd1UzYanCdKXbqhILJ0Oo5QQl50lvBfyQCXxMFzwWwTc3sbBbQH3FfWSV+BkoSElA=="
     },
+    "vue-eslint-parser": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",
+      "integrity": "sha512-QXxqH8ZevBrtiZMZK0LpwaMfevQi9UL7lY6Kcp+ogWHC88AuwUPwwCIzkOUc1LR4XsYAt/F9yHXAB/QoD17QXA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "eslint-scope": "^5.0.0",
+        "eslint-visitor-keys": "^1.1.0",
+        "espree": "^6.2.1",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.15"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "dev": true
+        },
+        "espree": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+          "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+          "dev": true,
+          "requires": {
+            "acorn": "^7.1.1",
+            "acorn-jsx": "^5.2.0",
+            "eslint-visitor-keys": "^1.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -13643,11 +15019,23 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-      "dev": true
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
     "wide-align": {
       "version": "1.1.3",
@@ -13668,6 +15056,12 @@
       "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
       "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
     },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true
+    },
     "wordwrap": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
@@ -13687,6 +15081,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+      "dev": true,
       "requires": {
         "string-width": "^1.0.1",
         "strip-ansi": "^3.0.1"
@@ -13696,6 +15091,7 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -13704,6 +15100,7 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -13770,8 +15167,7 @@
     "y18n": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
-      "dev": true
+      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
     },
     "yallist": {
       "version": "2.1.2",
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 223f2619d..689b549ed 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -28,6 +28,7 @@
     "element-ui": "^2.13.0",
     "file-saver": "^2.0.2",
     "leaflet": "^1.7.1",
+    "moment-timezone": "^0.5.33",
     "node-sass": "^4.14.1",
     "pl-table": "^2.5.8",
     "quill": "^1.3.7",
diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index 857d15336..96804dc6b 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -192,7 +192,7 @@
 .right-box-select-dropdown {
   width: 625px;
 }
-.limit-height {
+.limit-height .el-cascader-menu {
   max-height: 200px;
   overflow: auto;
 }
diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
index 03a458296..325393ee6 100644
--- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue
+++ b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
@@ -21,7 +21,6 @@
             </span>
           </el-popover>
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
               <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
diff --git a/nezha-fronted/src/components/charts/chart-group.vue b/nezha-fronted/src/components/charts/chart-group.vue
index 6f8128234..8da7137ae 100644
--- a/nezha-fronted/src/components/charts/chart-group.vue
+++ b/nezha-fronted/src/components/charts/chart-group.vue
@@ -263,14 +263,12 @@ export default {
           iframe.attachEvent('onload', function () {
             // iframe加载完毕以后执行操作
             that.firstShow = true
-            // console.log('iframe已加载完毕');
             that.endLoading('screen')
           })
         } else {
           iframe.onload = function () {
             // iframe加载完毕以后执行操作
             that.firstShow = true
-            // console.log('iframe已加载完毕');
             that.endLoading('screen')
           }
         }
diff --git a/nezha-fronted/src/components/charts/chart-list-group.vue b/nezha-fronted/src/components/charts/chart-list-group.vue
index 7df6cfac8..741c7422a 100644
--- a/nezha-fronted/src/components/charts/chart-list-group.vue
+++ b/nezha-fronted/src/components/charts/chart-list-group.vue
@@ -203,7 +203,7 @@ import textChart from './text-chart'
 import chartPie from './chart-pie'
 import chartBarStatis from './chart-bar-statistics'
 import chartTempData from '@/components/charts/chartTempData'
-import {fromRoute} from "@/components/common/js/constants";
+import { fromRoute } from '@/components/common/js/constants'
 // import visNetwork from './visNetwork'
 export default {
   name: 'chartList',
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index d58d41d88..4f9c26796 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1,7 +1,7 @@
 <style lang="scss" scoped>
   .chartBox {
     float:left;
-    padding: 0 0 10px 0;
+    padding: 0 10px 10px 0;
     position:relative;
     box-sizing: border-box;
   }
@@ -361,18 +361,13 @@ export default {
       chartTitle.style.background = '#d8dce1'
     },
     clone (event) {
-      // console.log('clone',event );
       const canvas = event.item.querySelector('canvas')
-      // console.log('clone-canvas',canvas);
       const canvasclone = event.clone.querySelector('canvas')
       canvasclone.style.border = 'solid 1px yellow'
-      // console.log('clone-canvasclone',canvasclone);
       if (canvas && canvasclone) {
         const image = new Image()
         image.src = canvas.toDataURL()
-        // console.log('clone-image',image);
         const ctxClone = canvasclone.getContext('2d')
-        // ctxClone.drawImage(image,0,0);
         image.onload = function () {
           ctxClone.drawImage(image, 0, 0)
         }
@@ -662,7 +657,7 @@ export default {
         })
         return
       }
-      if (param.from == fromRoute.chartTemp) {
+      if (param.from == fromRoute.chartTemp) { // 模板列表
         this.dataList = this.panelDataList
         this.$nextTick(() => {
           this.dataList.forEach((item, index) => {
@@ -679,13 +674,12 @@ export default {
       }
       if (!param.query) delete param.query
       // 根据panelId获得panel下的所有图表
-      this.$get('visual/panel/chart?panelId=' + params.panelId + '&pageSize=-1').then(response => {
+      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0').then(response => {
         if (response.code === 200) {
           response.data.list.forEach((item, index) => {
             item.isLoaded = false
           })
           // response.data.list = response.data.list.filter((item) => item.groupId === -1 || !item.groupId) // 处理外层存在的groupItem
-          // console.log(response.data.list)
           if (response.data.list) {
             this.dataTotalListBak = response.data.list
           } else {
diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue
index 71ab63c8a..547bf82b3 100644
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -16,8 +16,8 @@
     <div class="sub-list" style='position: relative;'>
       <!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦-->
       <input style='width: 0;height: 0;opacity: 0;display: inherit;' />
-      <el-menu  @select="handleSelect" mode="horizontal" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'>
-        <el-submenu index="1"  popper-class="fontSizeBox" style="width:40px;">
+      <el-menu  @select="handleSelect" mode="horizontal" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;' class="horizontal">
+        <el-submenu index="1"  popper-class="horizontal" style="width:40px;">
           <template slot="title" ><i class="nz-icon nz-icon-728bianjiqi_zitidaxiao" style="position: absolute;left: 10px;top: 4px;"></i></template>
           <!--<el-submenu index="1-1">-->
           <!--<template slot="title">文字大小</template>-->
@@ -32,7 +32,7 @@
           <!--<el-menu-item index="1-2-2">Courier New</el-menu-item>-->
           <!--</el-submenu>-->
         </el-submenu>
-<!--        <el-submenu index="2" style="width:50px;">-->
+<!--        <el-submenu index="2" style="width:50px;" popper-class="horizontal">-->
 <!--          <template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template>-->
 <!--          <el-menu-item @click="showUploadBox" index="2-1">-->
 <!--            <div>{{$t('webshell.upload')}}</div>-->
@@ -65,7 +65,7 @@
               :popper-class="'popover-webshell'"
             >
             <div>
-             {{item.uuid.slice(0,7)}}
+             Session ID : {{item.uuid.slice(0,7).toLocaleUpperCase()}}
             </div>
             <span slot="reference"> <i class="nz-icon nz-icon-about" /></span>
           </el-popover>
@@ -978,4 +978,10 @@ export default {
   div.sp-header{
     display: none;
   }
+  /deep/ .horizontal .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
+    border: none;
+  }
+  /deep/ .horizontal .el-menu--popup .el-menu-item.is-active{
+    background: #fff;
+  }
 </style>
diff --git a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
index 46a07c04f..1f253f021 100644
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
@@ -37,7 +37,7 @@
       <div :class="targetTab === 'panel' ? 'bottom-panel' : 'nz-table2'">
         <slot></slot>
       </div>
-      <div class="pagination-bottom">
+      <div class="pagination-bottom" v-if="showPagination">
         <slot name="pagination"></slot>
       </div>
     </div>
@@ -76,6 +76,10 @@ export default {
     customTool: {
       type: Boolean,
       default: false
+    },
+    showPagination: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
@@ -131,6 +135,7 @@ export default {
   padding: 10px;
   height: 100%;
   background-color: #f6f6f6;
+  overflow-y: auto;
   &>div {
     background-color: white;
   }
@@ -180,6 +185,7 @@ export default {
 .bottom-panel {
   padding-top: 15px;
   background-color: white;
+  padding-bottom: 50px;
 }
 
 .resize-modal {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
index 8968c79d8..b073c939f 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
@@ -50,8 +50,8 @@
 import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
-import assetTable from "@/components/common/table/asset/assetTable";
-import assetBox from "@/components/common/rightBox/asset/assetBox";
+import assetTable from '@/components/common/table/asset/assetTable'
+import assetBox from '@/components/common/rightBox/asset/assetBox'
 export default {
   name: 'assetTab',
   mixins: [dataListMixin, subDataListMixin],
@@ -184,16 +184,16 @@ export default {
           resolve()
         })
       })
-    },
+    }
 
   },
-  watch:{
-    obj:{
-      immediate:true,
-      deep:true,
-      handler(n,o){
-        this.searchLabel.dcIds=n.id;
-        this.getTableData();
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.searchLabel.dcIds = n.id
+        this.getTableData()
       }
     }
   },
@@ -204,6 +204,6 @@ export default {
     this.getDcData()
     this.getSnmpCredentialData()
     this.getFieldGroupData()
-  },
+  }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
index 0c1417639..4bd25c2a3 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
@@ -41,7 +41,7 @@ import deleteButton from '../../deleteButton'
 import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
-import cabinetTable from "@/components/common/table/settings/cabinetTable";
+import cabinetTable from '@/components/common/table/settings/cabinetTable'
 export default {
   name: 'cabinetTab',
   mixins: [dataListMixin, subDataListMixin],
@@ -56,8 +56,8 @@ export default {
   },
   data () {
     return {
-      url:'/cabinet',
-      tableId:'cabinetTable',
+      url: '/cabinet',
+      tableId: 'cabinetTable',
       blankObject: {
         id: '',
         idcId: '',
@@ -89,14 +89,14 @@ export default {
             disabled: false
           }
         ]
-      },
+      }
     }
   },
   methods: {
     // 切换tab
     changeTab (tab) {
       this.$emit('changeTab', tab)
-    },
+    }
   },
   watch: {
     obj: {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index fb6233772..7d924652b 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -6,11 +6,17 @@
       :targetTab="targetTab"
       @changeTab="changeTab"
       class="full-width-height"
+      :showPagination="false"
     >
       <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
       <template v-if="from === fromRoute.asset" v-slot:top-tool-right>
+        <div class="top-tool-search margin-r-20">
+          <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive"  clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
+            <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
+          </el-input>
+        </div>
         <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
-        <export-excel
+<!--        <export-excel
           id="asset-list"
           :params="searchLabel"
           :permissions="{import: 'panel_chart_add', export: 'panel_view'}"
@@ -24,7 +30,21 @@
             <button id="asset-create-asset" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="addChart">
               <i class="nz-icon nz-icon-create-square"></i></button>
           </template>
-        </export-excel>
+        </export-excel>-->
+        <button id="asset-create-asset" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn margin-r-10" @click.stop="addChart">
+          <i class="nz-icon nz-icon-create-square"></i>
+        </button>
+        <top-tool-more-options
+          id="asset-list"
+          :params="searchLabel"
+          :permissions="{import: 'panel_chart_add', export: 'panel_view'}"
+          class="top-tool-export margin-r-10"
+          export-file-name="asset-charts"
+          export-url="visual/panel/export"
+          import-url="visual/panel/import"
+          @afterImport="getTableData"
+        >
+        </top-tool-more-options>
       </template>
       <template v-slot>
         <div class="panel">
@@ -51,11 +71,10 @@
 import chartBox from '../../../page/dashboard/chartBox'
 import chartList from '../../../charts/chart-list'
 import bus from '../../../../libs/bus'
-import exportXLSX from '@/components/common/exportXLSX'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import { fromRoute } from '@/components/common/js/constants'
-
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 export default {
   name: 'panelTabNew',
   mixins: [subDataListMixin],
@@ -139,7 +158,7 @@ export default {
     chartBox,
     chartList,
     nzBottomDataList,
-    'export-excel': exportXLSX
+    topToolMoreOptions
   },
   methods: {
     // 刷新
@@ -256,14 +275,17 @@ export default {
         this.getData(this.filter)
       } else {
         if (this.from == this.$CONSTANTS.fromRoute.chartTemp) {
-          console.log(this.obj)
-          this.panelDataList = [this.obj]
-          console.log(this.panelData)
           if (this.obj.type === 'group') {
-            this.$get('/visual/panel/chart', { ids: this.obj.id,pageSize: -1 }).then(res => {
-              console.log(res)
+            this.$get('/visual/panel/chart', { ids: this.obj.id,groupId:0}).then(res => {
+              this.panelDataList = res.data.list
+              if (this.panelDataList.length > 0) {
+                this.showPanel.id = this.filter.panelId = 0
+                this.getData(this.filter)
+              }
             })
+            return
           }
+          this.panelDataList = [this.obj]
           if (this.panelDataList.length > 0) {
             this.showPanel.id = this.filter.panelId = 0
             this.getData(this.filter)
@@ -333,7 +355,7 @@ export default {
       this.pageObj.pageSize = val
       this.getTableData(this.obj.id)
     },
-    search: function () {
+    search () {
       if (this.$refs.chartList) {
         this.$refs.chartList.searchCharts(this.filter.searchName)
       }
@@ -346,13 +368,13 @@ export default {
         _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
       }, 300))
     },
-    focusInput: function () {
+    focusInput () {
       let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
       classVal = classVal.replace('query-input-inactive', 'query-input-active')
       document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
       this.$refs.queryPanel.focus()
     },
-    blurInput: function () {
+    blurInput () {
       if (!this.filter.searchName || this.filter.searchName == '') {
         setTimeout(function () {
           let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
@@ -361,10 +383,10 @@ export default {
         }, 100)
       }
     },
-    clearInput: function () {
+    clearInput () {
       this.$refs.queryPanel.focus()
     },
-    syncChart: function () {
+    syncChart () {
       if (this.from == this.fromRoute.asset || this.from == this.fromRoute.model) {
         this.$confirm(this.$t('tip.syncTip'), {
           confirmButtonText: this.$t('tip.yes'),
@@ -408,14 +430,14 @@ export default {
       this.tableHover = false
     }
   },
-  mounted: function () {
+  mounted () {
     this.scrollbarWrap = this.$refs.dashboardScrollbar
     this.onScroll()
     document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
     document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
   },
   watch: {
-    'filter.searchName': function (n, o) {
+    'filter.searchName' (n, o) {
       const temp = this
       setTimeout(function () {
         temp.search()
@@ -651,12 +673,6 @@ export default {
   .nz-dashboard-dropdown {
     z-index: 3001 !important;
   }
-  .panel .top-tools input {
-    background-color: $content-right-background-color;
-  }
-  .panel .top-tools  .el-input__inner {
-    background-color: $content-right-background-color;
-  }
   .panel-calendar .el-range-editor--mini.el-input__inner {
     height: 25px !important;
     border-color: #d8d8d8;
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 7891e0b86..f33a5ab4f 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -127,7 +127,7 @@
             <div style="height: 1px; width: 100%; background-color: #cccccc;"></div>
           </el-menu-item>
           <el-menu-item index="101-3">
-            <div @click="showPwdDialog" id="header-to-changepwd">{{$t('overall.changePwd')}}</div>
+            <div @click="showPinDialog" id="header-to-changepin">{{$t('overall.changePin')}}</div>
           </el-menu-item>
           <el-menu-item index="101-4">
             <div @click="logout" id="header-to-logout">{{$t('overall.signOut')}}</div>
@@ -154,7 +154,7 @@
     <transition name="right-box">
       <dc-box @close="closeDcBox" :dc="dc" :user-data="userData" @reload="getAssetData" v-if="rightBox.dc.show"></dc-box>
     </transition>
-    <change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
+    <change-password :cur-user="username" :show-dialog="showChangePin" @click="showPinDialog" @dialogClosed="dialogClosed"></change-password>
   </div>
 </template>
 
@@ -162,11 +162,11 @@
 import bus from '../../libs/bus'
 import dcBox from './rightBox/dcBox' // dc弹框
 import { mapActions } from 'vuex'
-import changePwd from '../page/config/changePwd'
+import changePin from '../page/config/changePin'
 export default {
   name: 'Header',
   components: {
-    'change-password': changePwd,
+    'change-password': changePin,
     'dc-box': dcBox
   },
   data () {
@@ -283,7 +283,7 @@ export default {
           permission: 'header_add_rule'
         }
       ],
-      showChangePwd: false
+      showChangePin: false
     }
   },
   methods: {
@@ -338,10 +338,10 @@ export default {
           community: 'public',
           username: '',
           security_level: 'noAuthNoPriv', // noAuthNoPriv/authNoPriv/authPriv
-          password: '',
+          pinrd: '',
           auth_protocol: 'MD5', // MD5/SHA
           priv_protocol: 'DES', // DES/AES
-          priv_password: '',
+          priv_pin: '',
           context_name: ''
         }
       } else if (item.type == 3) {
@@ -483,11 +483,11 @@ export default {
         window.location.reload()
       })
     },
-    showPwdDialog () {
-      this.showChangePwd = true
+    showPinDialog () {
+      this.showChangePin = true
     },
     dialogClosed () {
-      this.showChangePwd = false
+      this.showChangePin = false
     },
     cancel () {
       this.jumpTo(this.$route.path.slice(1, this.$route.path.length))
diff --git a/nezha-fronted/src/components/common/labelFilter/clickSearch.vue b/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
index 2a3be38ec..cfada4f3b 100644
--- a/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
+++ b/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
@@ -1,23 +1,24 @@
 <template>
   <div :style="{'height': height + 'px'}" class="search-box__container">
-    <div v-for="(data, type, index) in titleSearchListCopy" v-if="data.show" :key="index" ref="searchContentBox" class="search-content-box">
+    <div v-for="(data, type, index) in titleSearchListCopy" v-cloak v-if="data.show" :key="index" ref="searchContentBox" class="search-content-box">
       <label class="search-title">{{data.label}}:</label>
       <el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValueOut[data.key]">
         <template v-for="(item, j) in data.children">
-          <el-checkbox v-show="!data.showMore || j < data.index" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
+          <el-checkbox v-if="!data.showMore || j < data.index" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
         </template>
       </el-checkbox-group>
-      <dropdown
-        v-for="(item, j) in data.children"
-        v-else-if="data.type === 'dropdownCheckBox'"
-        :key="j"
-        :ref="`${type}_cascader`"
-        :collapse-tags="true"
-        :item="item"
-        @blur="casFocus"
-        @change="casChange(type, data.key)"
-        @focus="casFocus"
-      ></dropdown>
+      <template v-for="(item, j) in data.children" v-else-if="data.type === 'dropdownCheckBox'">
+        <dropdown
+          v-if="!data.showMore || j < data.index"
+          :key="j"
+          :ref="`${type}_cascader`"
+          :collapse-tags="true"
+          :item="item"
+          @blur="casFocus"
+          @change="casChange(type, data.key)"
+          @focus="casFocus"
+        ></dropdown>
+      </template>
       <span v-show="contentWidth <= data.width" class="search-more" @click="changShowMore(type)">更多 <i :class="data.showMore?'el-icon-arrow-down':'el-icon-arrow-up'"/></span>
     </div>
   </div>
@@ -100,6 +101,7 @@ export default {
       immediate: true,
       deep: true,
       handler (n) {
+        console.log(n)
         this.$emit('reload', n)
       }
     }
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 719ae977f..f745b600d 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -59,7 +59,7 @@ const cn = {
     active: '活跃',
     type: '类别',
     detail: '详细信息',
-    changePwd: '修改密码',
+    changePin: '修改密码',
     createCabinet: '创建机柜',
     createModel: '创建型号',
     createModule: '创建模块',
@@ -145,8 +145,8 @@ const cn = {
     finish: '完成',
     invalidDb: '数据库配置可能存在一些错误',
     invalidRedis: 'Redis的配置可能有一些错误',
-    invalidpin: 'Redis的密码可能错误',
-    requirepin: 'Redis可能需要密码',
+    invalidPin: 'Redis的密码可能错误',
+    requirePin: 'Redis可能需要密码',
     wait: '配置已保存，请耐心等待生效',
     reloadTimeout: '重新启动服务器花了太多时间，安装可能有一些问题',
     hadConfig: '已经有人开始配置系统',
@@ -538,8 +538,8 @@ const cn = {
     userTip: '用户名提示',
     pinTip: '密码提示',
     reloginpinTip: 'RELOGIN提示',
-    userPwdIntroduce: '请指定用户名和密码提示以便TELNET登录过程可自动运行',
-    reLoginPwdIntroduce: '请指定密码提示以便RELOGIN登录过程可自动运行',
+    userPinIntroduce: '请指定用户名和密码提示以便TELNET登录过程可自动运行',
+    reLoginPinIntroduce: '请指定密码提示以便RELOGIN登录过程可自动运行',
     username: '用户名',
     port: '端口',
     upload: '上传',
@@ -616,15 +616,15 @@ const cn = {
       editUser: '编辑用户',
       notCurrentlySupport: '暂不支持',
       pin: '密码',
-      oldPwd: '旧密码',
-      inputOldPwd: '请输入旧密码',
-      newPwd: '新密码',
-      inputNewPwd: '请输入新密码',
-      confirmPwd: '确认密码',
-      inputConfirmPwd: '请再次输入密码',
-      invalidPwd: '无效的密码，最少6个字符',
-      confirmPwdErr: '两次密码输入不一致',
-      reinputPwd: '请再次输入密码',
+      oldPin: '旧密码',
+      inputOldPin: '请输入旧密码',
+      newPin: '新密码',
+      inputNewPin: '请输入新密码',
+      confirmPin: '确认密码',
+      inputConfirmPin: '请再次输入密码',
+      invalidPin: '无效的密码，最少6个字符',
+      confirmPinErr: '两次密码输入不一致',
+      reinputPin: '请再次输入密码',
       notification: '通知',
       mobile: '电话'
     },
@@ -866,14 +866,14 @@ const cn = {
         smtpHost: 'SMTP主机',
         smtpPort: 'SMTP端口',
         smtpAccount: 'SMTP账号',
-        smtpPwd: 'SMTP密码',
+        smtpPin: 'SMTP密码',
         sendAccount: '发送账号',
         timeout: '超时时间',
         testAccount: '测试账号',
         useSSL: 'SSL',
         useTLS: 'TLS',
         testConnection: '测试连接',
-        pwdTip: '提示：一些邮件提供商需要输入的是Token',
+        pinTip: '提示：一些邮件提供商需要输入的是Token',
         sendAccountTip: '提示：发送邮件账号，默认使用SMTP账号作为发送账号',
         testAccountTip: '提示：仅用来作为测试邮件收件人',
         sslTip: '如果SMTP端口是465，通常需要启用SSL',
@@ -892,7 +892,7 @@ const cn = {
         ldap: 'LDAP',
         address: 'LDAP地址',
         dn: 'Bind DN',
-        pwd: '密码',
+        pin: '密码',
         ou: '用户OU',
         ouTip: '使用符号 "|" 分隔OU',
         filter: '用户过滤器',
@@ -932,11 +932,11 @@ const cn = {
       reset: {
         reset: '重置',
         type: '类型',
-        pwd: '密码',
+        pin: '密码',
         metric: '指标',
         alert: '告警',
         sysConfig: '系统设置',
-        pwdTip: '请输入密码',
+        pinTip: '请输入密码',
         promptTitle: '确认密码',
         yes: '是',
         no: '否'
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 86a6aec84..0209afe2b 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -51,7 +51,7 @@ const en = {
     back: 'Back', // 返回
     unavailable: 'Unavailable',
     available: 'Available',
-    changePwd: 'Change password', // 修改密码
+    changePin: 'Change password', // 修改密码
     createChart: 'Create chart',
     createProject: 'Create project',
     createEndpoint: 'Create endpoint',
@@ -153,8 +153,8 @@ const en = {
     finish: 'Finish',
     invalidDb: 'There may be some errors in the configuration of the database',
     invalidRedis: 'There may be some errors in the configuration of the Redis',
-    invalidpin: "Redis's password may be wrong",
-    requirepin: 'The password may be required by the Redis',
+    invalidPin: "Redis's password may be wrong",
+    requirePin: 'The password may be required by the Redis',
     wait: 'The configuration has been saved, please wait patiently for it to take effect',
     reloadTimeout: 'It took too much time to restart the server, there may be some problems when you install',
     hadConfig: 'Someone has started to configure the system',
@@ -182,7 +182,7 @@ const en = {
     authPin: 'Password',
     authUserTip: 'Username prompt',
     authPinTip: 'Password prompt',
-    authPriKey: 'Key',
+    authPriKey: 'Key'
   },
   login: {
     username: 'Username',
@@ -542,9 +542,9 @@ const en = {
     telnetProtocol: 'Telnet',
     userTip: 'User tip', // 用户名提示
     pinTip: 'Password tip', // 密码提示
-    reloginpinTip: 'Relogin tip', // 密码提示
-    userPwdIntroduce: 'Please specify a user name and password so that the telenet login process can automatically log in',
-    reLoginPwdIntroduce: 'Please specify the password prompt so that the login process can run automatically',
+    reloginPinTip: 'Relogin tip', // 密码提示
+    userPinIntroduce: 'Please specify a user name and password so that the telenet login process can automatically log in',
+    reLoginPinIntroduce: 'Please specify the password prompt so that the login process can run automatically',
     username: 'Username', // '用户名'
     port: 'Port', // '端口'
     upload: 'Upload', // '上传'
@@ -600,7 +600,7 @@ const en = {
     option: 'Operation', // "操作"
     name: 'Name',
     dc: 'DataCenter',
-    type: 'Types',
+    type: 'Types'
   },
   config: {
     config: 'Settings', // "设置"
@@ -625,15 +625,15 @@ const en = {
       editUser: 'Edit user', // "编辑用户"
       notCurrentlySupport: 'Not available', // '暂不支持'
       pin: 'Password', // '密码'
-      oldPwd: 'Old password',
-      inputOldPwd: 'Please input old password',
-      newPwd: 'New password',
-      inputNewPwd: 'Please input new password',
-      confirmPwd: 'Confirm password',
-      inputConfirmPwd: 'Please input confirm password',
-      invalidPwd: 'invalide password,the length at least 6',
-      confirmPwdErr: 'The two passwords are inconsistent',
-      reinputPwd: 'Enter password again',
+      oldPin: 'Old password',
+      inputOldPin: 'Please input old password',
+      newPin: 'New password',
+      inputNewPin: 'Please input new password',
+      confirmPin: 'Confirm password',
+      inputConfirmPin: 'Please input confirm password',
+      invalidPin: 'invalide password,the length at least 6',
+      confirmPinErr: 'The two passwords are inconsistent',
+      reinputPin: 'Enter password again',
       notification: 'Notification',
       mobile: 'Mobile'
     },
@@ -883,14 +883,14 @@ const en = {
         smtpHost: 'SMTP host',
         smtpPort: 'SMTP port',
         smtpAccount: 'SMTP account',
-        smtpPwd: 'SMTP password',
+        smtpPin: 'SMTP password',
         sendAccount: 'Send account',
         timeout: 'Timeout',
         testAccount: 'Test account',
         useSSL: 'SSL',
         useTLS: 'TLS',
         testConnection: 'Test connection',
-        pwdTip: 'Tip:Some email providers need to enter token',
+        pinTip: 'Tip:Some email providers need to enter token',
         sendAccountTip: 'Tip:The SMTP account is used as the sending account by default',
         testAccountTip: 'Tip:Used only as test mail recipient',
         sslTip: 'If the SMTP port is 465, you usually need to enable SSL',
@@ -909,7 +909,7 @@ const en = {
         ldap: 'LDAP',
         address: 'LDAP address',
         dn: 'Bind DN',
-        pwd: 'Password',
+        pin: 'Password',
         ou: 'User OU',
         ouTip: 'Use the "|" symbol to separate OU',
         filter: 'User filter',
@@ -952,11 +952,11 @@ const en = {
       reset: {
         reset: 'Reset',
         type: 'Type',
-        pwd: 'Password',
+        pin: 'Password',
         metric: 'Metric',
         alert: 'Alert',
         sysConfig: 'System config',
-        pwdTip: 'Please input your password',
+        pinTip: 'Please input your password',
         promptTitle: 'Confirm',
         yes: 'Yes',
         no: 'No'
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 5d735ffc1..17c5ad550 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -85,6 +85,7 @@ export default {
             // 登录成功，记录用户名、token和lang
             sessionStorage.setItem('nz-username', this.loginData.username)
             localStorage.setItem('nz-username', this.loginData.username)
+            localStorage.setItem('nz-prometheus-federation-enabled', res.data.prometheusFederationEnabled)
             localStorage.setItem('nz-language', this.lang)
             this.$i18n.locale = this.lang
             this.loginSuccess(res)
diff --git a/nezha-fronted/src/components/common/myDatePicker/index.js b/nezha-fronted/src/components/common/myDatePicker/index.js
new file mode 100644
index 000000000..4615b9d73
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/index.js
@@ -0,0 +1,8 @@
+import DatePicker from './src/picker/date-picker'
+
+/* istanbul ignore next */
+DatePicker.install = function install (Vue) {
+  Vue.component(DatePicker.name, DatePicker)
+}
+
+export default DatePicker
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue b/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue
new file mode 100644
index 000000000..c2447a01c
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue
@@ -0,0 +1,441 @@
+<template>
+  <table
+    cellspacing="0"
+    cellpadding="0"
+    class="el-date-table"
+    @click="handleClick"
+    @mousemove="handleMouseMove"
+    :class="{ 'is-week-mode': selectionMode === 'week' }">
+    <tbody>
+    <tr>
+      <th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>
+      <th v-for="(week, key) in WEEKS" :key="key">{{ t('el.datepicker.weeks.' + week) }}</th>
+    </tr>
+    <tr
+      class="el-date-table__row"
+      v-for="(row, key) in rows"
+      :class="{ current: isWeekActive(row[1]) }"
+      :key="key">
+      <td
+        v-for="(cell, key) in row"
+        :class="getCellClasses(cell)"
+        :key="key">
+        <div>
+          <span>
+            {{ cell.text }}
+          </span>
+        </div>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, prevDate, nextDate, isDate, clearTime as _clearTime } from 'element-ui/src/utils/date-util'
+import Locale from 'element-ui/src/mixins/locale'
+import { arrayFindIndex, arrayFind, coerceTruthyValueToArray } from 'element-ui/src/utils/util'
+
+const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
+const getDateTimestamp = function (time) {
+  if (typeof time === 'number' || typeof time === 'string') {
+    return _clearTime(new Date(time)).getTime()
+  } else if (time instanceof Date) {
+    return _clearTime(time).getTime()
+  } else {
+    return NaN
+  }
+}
+
+// remove the first element that satisfies `pred` from arr
+// return a new array if modification occurs
+// return the original array otherwise
+const removeFromArray = function (arr, pred) {
+  const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred)
+  return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr
+}
+
+export default {
+  mixins: [Locale],
+
+  props: {
+    firstDayOfWeek: {
+      default: 7,
+      type: Number,
+      validator: val => val >= 1 && val <= 7
+    },
+
+    value: {},
+
+    defaultValue: {
+      validator (val) {
+        // either: null, valid Date object, Array of valid Date objects
+        return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate))
+      }
+    },
+
+    date: {},
+
+    selectionMode: {
+      default: 'day'
+    },
+
+    showWeekNumber: {
+      type: Boolean,
+      default: false
+    },
+
+    disabledDate: {},
+
+    cellClassName: {},
+
+    minDate: {},
+
+    maxDate: {},
+
+    rangeState: {
+      default () {
+        return {
+          endDate: null,
+          selecting: false
+        }
+      }
+    }
+  },
+
+  computed: {
+    offsetDay () {
+      const week = this.firstDayOfWeek
+      // 周日为界限，左右偏移的天数，3217654 例如周一就是 -1，目的是调整前两行日期的位置
+      return week > 3 ? 7 - week : -week
+    },
+
+    WEEKS () {
+      const week = this.firstDayOfWeek
+      return WEEKS.concat(WEEKS).slice(week, week + 7)
+    },
+
+    year () {
+      return this.date.getFullYear()
+    },
+
+    month () {
+      return this.date.getMonth()
+    },
+
+    startDate () {
+      return getStartDateOfMonth(this.year, this.month)
+    },
+
+    rows () {
+      // TODO: refactory rows / getCellClasses
+      const date = new Date(this.year, this.month, 1)
+      let day = getFirstDayOfMonth(date) // day of first day
+      const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth())
+      const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1))
+
+      day = (day === 0 ? 7 : day)
+
+      const offset = this.offsetDay
+      const rows = this.tableRows
+      let count = 1
+
+      const startDate = this.startDate
+      const disabledDate = this.disabledDate
+      const cellClassName = this.cellClassName
+      const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : []
+      const now = getDateTimestamp(new Date())
+
+      for (let i = 0; i < 6; i++) {
+        const row = rows[i]
+
+        if (this.showWeekNumber) {
+          if (!row[0]) {
+            row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) }
+          }
+        }
+
+        for (let j = 0; j < 7; j++) {
+          let cell = row[this.showWeekNumber ? j + 1 : j]
+          if (!cell) {
+            cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false }
+          }
+
+          cell.type = 'normal'
+
+          const index = i * 7 + j
+          const time = nextDate(startDate, index - offset).getTime()
+          cell.inRange = time >= getDateTimestamp(this.minDate) && time <= getDateTimestamp(this.maxDate)
+          cell.start = this.minDate && time === getDateTimestamp(this.minDate)
+          cell.end = this.maxDate && time === getDateTimestamp(this.maxDate)
+          const isToday = time === now
+
+          if (isToday) {
+            cell.type = 'today'
+          }
+
+          if (i >= 0 && i <= 1) {
+            const numberOfDaysFromPreviousMonth = day + offset < 0 ? 7 + day + offset : day + offset
+
+            if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
+              cell.text = count++
+            } else {
+              cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7
+              cell.type = 'prev-month'
+            }
+          } else {
+            if (count <= dateCountOfMonth) {
+              cell.text = count++
+            } else {
+              cell.text = count++ - dateCountOfMonth
+              cell.type = 'next-month'
+            }
+          }
+
+          const cellDate = new Date(time)
+          cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate)
+          cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime())
+          cell.customClass = typeof cellClassName === 'function' && cellClassName(cellDate)
+          this.$set(row, this.showWeekNumber ? j + 1 : j, cell)
+        }
+
+        if (this.selectionMode === 'week') {
+          const start = this.showWeekNumber ? 1 : 0
+          const end = this.showWeekNumber ? 7 : 6
+          const isWeekActive = this.isWeekActive(row[start + 1])
+
+          row[start].inRange = isWeekActive
+          row[start].start = isWeekActive
+          row[end].inRange = isWeekActive
+          row[end].end = isWeekActive
+        }
+      }
+
+      return rows
+    }
+  },
+
+  watch: {
+    'rangeState.endDate' (newVal) {
+      this.markRange(this.minDate, newVal)
+    },
+
+    minDate (newVal, oldVal) {
+      if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
+        this.markRange(this.minDate, this.maxDate)
+      }
+    },
+
+    maxDate (newVal, oldVal) {
+      if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
+        this.markRange(this.minDate, this.maxDate)
+      }
+    }
+  },
+
+  data () {
+    return {
+      tableRows: [[], [], [], [], [], []],
+      lastRow: null,
+      lastColumn: null
+    }
+  },
+
+  methods: {
+    cellMatchesDate (cell, date) {
+      const value = new Date(date)
+      return this.year === value.getFullYear() &&
+          this.month === value.getMonth() &&
+          Number(cell.text) === value.getDate()
+    },
+
+    getCellClasses (cell) {
+      const selectionMode = this.selectionMode
+      const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : []
+
+      const classes = []
+      if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {
+        classes.push('available')
+        if (cell.type === 'today') {
+          classes.push('today')
+        }
+      } else {
+        classes.push(cell.type)
+      }
+
+      if (cell.type === 'normal' && defaultValue.some(date => this.cellMatchesDate(cell, date))) {
+        classes.push('default')
+      }
+
+      if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && this.cellMatchesDate(cell, this.value)) {
+        classes.push('current')
+      }
+
+      if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || this.selectionMode === 'week')) {
+        classes.push('in-range')
+
+        if (cell.start) {
+          classes.push('start-date')
+        }
+
+        if (cell.end) {
+          classes.push('end-date')
+        }
+      }
+
+      if (cell.disabled) {
+        classes.push('disabled')
+      }
+
+      if (cell.selected) {
+        classes.push('selected')
+      }
+
+      if (cell.customClass) {
+        classes.push(cell.customClass)
+      }
+
+      return classes.join(' ')
+    },
+
+    getDateOfCell (row, column) {
+      const offsetFromStart = row * 7 + (column - (this.showWeekNumber ? 1 : 0)) - this.offsetDay
+      return nextDate(this.startDate, offsetFromStart)
+    },
+
+    isWeekActive (cell) {
+      if (this.selectionMode !== 'week') return false
+      const newDate = new Date(this.year, this.month, 1)
+      const year = newDate.getFullYear()
+      const month = newDate.getMonth()
+
+      if (cell.type === 'prev-month') {
+        newDate.setMonth(month === 0 ? 11 : month - 1)
+        newDate.setFullYear(month === 0 ? year - 1 : year)
+      }
+
+      if (cell.type === 'next-month') {
+        newDate.setMonth(month === 11 ? 0 : month + 1)
+        newDate.setFullYear(month === 11 ? year + 1 : year)
+      }
+
+      newDate.setDate(parseInt(cell.text, 10))
+
+      if (isDate(this.value)) {
+        const dayOffset = (this.value.getDay() - this.firstDayOfWeek + 7) % 7 - 1
+        const weekDate = prevDate(this.value, dayOffset)
+        return weekDate.getTime() === newDate.getTime()
+      }
+      return false
+    },
+
+    markRange (minDate, maxDate) {
+      minDate = getDateTimestamp(minDate)
+      maxDate = getDateTimestamp(maxDate) || minDate;
+      [minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)]
+
+      const startDate = this.startDate
+      const rows = this.rows
+      for (let i = 0, k = rows.length; i < k; i++) {
+        const row = rows[i]
+        for (let j = 0, l = row.length; j < l; j++) {
+          if (this.showWeekNumber && j === 0) continue
+
+          const cell = row[j]
+          const index = i * 7 + j + (this.showWeekNumber ? -1 : 0)
+          const time = nextDate(startDate, index - this.offsetDay).getTime()
+
+          cell.inRange = minDate && time >= minDate && time <= maxDate
+          cell.start = minDate && time === minDate
+          cell.end = maxDate && time === maxDate
+        }
+      }
+    },
+
+    handleMouseMove (event) {
+      if (!this.rangeState.selecting) return
+
+      let target = event.target
+      if (target.tagName === 'SPAN') {
+        target = target.parentNode.parentNode
+      }
+      if (target.tagName === 'DIV') {
+        target = target.parentNode
+      }
+      if (target.tagName !== 'TD') return
+
+      const row = target.parentNode.rowIndex - 1
+      const column = target.cellIndex
+
+      // can not select disabled date
+      if (this.rows[row][column].disabled) return
+
+      // only update rangeState when mouse moves to a new cell
+      // this avoids frequent Date object creation and improves performance
+      if (row !== this.lastRow || column !== this.lastColumn) {
+        this.lastRow = row
+        this.lastColumn = column
+        this.$emit('changerange', {
+          minDate: this.minDate,
+          maxDate: this.maxDate,
+          rangeState: {
+            selecting: true,
+            endDate: this.getDateOfCell(row, column)
+          }
+        })
+      }
+    },
+
+    handleClick (event) {
+      let target = event.target
+      if (target.tagName === 'SPAN') {
+        target = target.parentNode.parentNode
+      }
+      if (target.tagName === 'DIV') {
+        target = target.parentNode
+      }
+
+      if (target.tagName !== 'TD') return
+
+      const row = target.parentNode.rowIndex - 1
+      const column = this.selectionMode === 'week' ? 1 : target.cellIndex
+      const cell = this.rows[row][column]
+
+      if (cell.disabled || cell.type === 'week') return
+
+      const newDate = this.getDateOfCell(row, column)
+
+      if (this.selectionMode === 'range') {
+        if (!this.rangeState.selecting) {
+          this.$emit('pick', { minDate: newDate, maxDate: null })
+          this.rangeState.selecting = true
+        } else {
+          if (newDate >= this.minDate) {
+            this.$emit('pick', { minDate: this.minDate, maxDate: newDate })
+          } else {
+            this.$emit('pick', { minDate: newDate, maxDate: this.minDate })
+          }
+          this.rangeState.selecting = false
+        }
+      } else if (this.selectionMode === 'day') {
+        this.$emit('pick', newDate)
+      } else if (this.selectionMode === 'week') {
+        const weekNumber = getWeekNumber(newDate)
+        const value = newDate.getFullYear() + 'w' + weekNumber
+        this.$emit('pick', {
+          year: newDate.getFullYear(),
+          week: weekNumber,
+          value: value,
+          date: newDate
+        })
+      } else if (this.selectionMode === 'dates') {
+        const value = this.value || []
+        const newValue = cell.selected
+          ? removeFromArray(value, date => date.getTime() === newDate.getTime())
+          : [...value, newDate]
+        this.$emit('pick', newValue)
+      }
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/basic/month-table.vue b/nezha-fronted/src/components/common/myDatePicker/src/basic/month-table.vue
new file mode 100644
index 000000000..f5f8c08db
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/basic/month-table.vue
@@ -0,0 +1,253 @@
+<template>
+  <table @click="handleMonthTableClick" @mousemove="handleMouseMove" class="el-month-table">
+    <tbody>
+    <tr v-for="(row, key) in rows" :key="key">
+      <td :class="getCellStyle(cell)" v-for="(cell, key) in row" :key="key">
+        <div>
+          <a class="cell">{{ t('el.datepicker.months.' + months[cell.text]) }}</a>
+        </div>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script type="text/babel">
+import Locale from 'element-ui/src/mixins/locale'
+import { isDate, range, getDayCountOfMonth, nextDate } from 'element-ui/src/utils/date-util'
+import { hasClass } from 'element-ui/src/utils/dom'
+import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from 'element-ui/src/utils/util'
+
+const datesInMonth = (year, month) => {
+  const numOfDays = getDayCountOfMonth(year, month)
+  const firstDay = new Date(year, month, 1)
+  return range(numOfDays).map(n => nextDate(firstDay, n))
+}
+
+const clearDate = (date) => {
+  return new Date(date.getFullYear(), date.getMonth())
+}
+
+const getMonthTimestamp = function (time) {
+  if (typeof time === 'number' || typeof time === 'string') {
+    return clearDate(new Date(time)).getTime()
+  } else if (time instanceof Date) {
+    return clearDate(time).getTime()
+  } else {
+    return NaN
+  }
+}
+export default {
+  props: {
+    disabledDate: {},
+    value: {},
+    selectionMode: {
+      default: 'month'
+    },
+    minDate: {},
+
+    maxDate: {},
+    defaultValue: {
+      validator (val) {
+        // null or valid Date Object
+        return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate))
+      }
+    },
+    date: {},
+    rangeState: {
+      default () {
+        return {
+          endDate: null,
+          selecting: false
+        }
+      }
+    }
+  },
+
+  mixins: [Locale],
+
+  watch: {
+    'rangeState.endDate' (newVal) {
+      this.markRange(this.minDate, newVal)
+    },
+
+    minDate (newVal, oldVal) {
+      if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
+        this.markRange(this.minDate, this.maxDate)
+      }
+    },
+
+    maxDate (newVal, oldVal) {
+      if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
+        this.markRange(this.minDate, this.maxDate)
+      }
+    }
+  },
+
+  data () {
+    return {
+      months: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
+      tableRows: [[], [], []],
+      lastRow: null,
+      lastColumn: null
+    }
+  },
+
+  methods: {
+    cellMatchesDate (cell, date) {
+      const value = new Date(date)
+      return this.date.getFullYear() === value.getFullYear() && Number(cell.text) === value.getMonth()
+    },
+    getCellStyle (cell) {
+      const style = {}
+      const year = this.date.getFullYear()
+      const today = new Date()
+      const month = cell.text
+      const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : []
+      style.disabled = typeof this.disabledDate === 'function'
+        ? datesInMonth(year, month).every(this.disabledDate)
+        : false
+      style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year && date.getMonth() === month) >= 0
+      style.today = today.getFullYear() === year && today.getMonth() === month
+      style.default = defaultValue.some(date => this.cellMatchesDate(cell, date))
+
+      if (cell.inRange) {
+        style['in-range'] = true
+
+        if (cell.start) {
+          style['start-date'] = true
+        }
+
+        if (cell.end) {
+          style['end-date'] = true
+        }
+      }
+      return style
+    },
+    getMonthOfCell (month) {
+      const year = this.date.getFullYear()
+      return new Date(year, month, 1)
+    },
+    markRange (minDate, maxDate) {
+      minDate = getMonthTimestamp(minDate)
+      maxDate = getMonthTimestamp(maxDate) || minDate;
+      [minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)]
+      const rows = this.rows
+      for (let i = 0, k = rows.length; i < k; i++) {
+        const row = rows[i]
+        for (let j = 0, l = row.length; j < l; j++) {
+          const cell = row[j]
+          const index = i * 4 + j
+          const time = new Date(this.date.getFullYear(), index).getTime()
+
+          cell.inRange = minDate && time >= minDate && time <= maxDate
+          cell.start = minDate && time === minDate
+          cell.end = maxDate && time === maxDate
+        }
+      }
+    },
+    handleMouseMove (event) {
+      if (!this.rangeState.selecting) return
+
+      let target = event.target
+      if (target.tagName === 'A') {
+        target = target.parentNode.parentNode
+      }
+      if (target.tagName === 'DIV') {
+        target = target.parentNode
+      }
+      if (target.tagName !== 'TD') return
+
+      const row = target.parentNode.rowIndex
+      const column = target.cellIndex
+      // can not select disabled date
+      if (this.rows[row][column].disabled) return
+
+      // only update rangeState when mouse moves to a new cell
+      // this avoids frequent Date object creation and improves performance
+      if (row !== this.lastRow || column !== this.lastColumn) {
+        this.lastRow = row
+        this.lastColumn = column
+        this.$emit('changerange', {
+          minDate: this.minDate,
+          maxDate: this.maxDate,
+          rangeState: {
+            selecting: true,
+            endDate: this.getMonthOfCell(row * 4 + column)
+          }
+        })
+      }
+    },
+    handleMonthTableClick (event) {
+      let target = event.target
+      if (target.tagName === 'A') {
+        target = target.parentNode.parentNode
+      }
+      if (target.tagName === 'DIV') {
+        target = target.parentNode
+      }
+      if (target.tagName !== 'TD') return
+      if (hasClass(target, 'disabled')) return
+      const column = target.cellIndex
+      const row = target.parentNode.rowIndex
+      const month = row * 4 + column
+      const newDate = this.getMonthOfCell(month)
+      if (this.selectionMode === 'range') {
+        if (!this.rangeState.selecting) {
+          this.$emit('pick', { minDate: newDate, maxDate: null })
+          this.rangeState.selecting = true
+        } else {
+          if (newDate >= this.minDate) {
+            this.$emit('pick', { minDate: this.minDate, maxDate: newDate })
+          } else {
+            this.$emit('pick', { minDate: newDate, maxDate: this.minDate })
+          }
+          this.rangeState.selecting = false
+        }
+      } else {
+        this.$emit('pick', month)
+      }
+    }
+  },
+
+  computed: {
+    rows () {
+      // TODO: refactory rows / getCellClasses
+      const rows = this.tableRows
+      const disabledDate = this.disabledDate
+      const selectedDate = []
+      const now = getMonthTimestamp(new Date())
+
+      for (let i = 0; i < 3; i++) {
+        const row = rows[i]
+        for (let j = 0; j < 4; j++) {
+          let cell = row[j]
+          if (!cell) {
+            cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false }
+          }
+
+          cell.type = 'normal'
+
+          const index = i * 4 + j
+          const time = new Date(this.date.getFullYear(), index).getTime()
+          cell.inRange = time >= getMonthTimestamp(this.minDate) && time <= getMonthTimestamp(this.maxDate)
+          cell.start = this.minDate && time === getMonthTimestamp(this.minDate)
+          cell.end = this.maxDate && time === getMonthTimestamp(this.maxDate)
+          const isToday = time === now
+
+          if (isToday) {
+            cell.type = 'today'
+          }
+          cell.text = index
+          const cellDate = new Date(time)
+          cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate)
+          cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime())
+
+          this.$set(row, j, cell)
+        }
+      }
+      return rows
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/basic/time-spinner.vue b/nezha-fronted/src/components/common/myDatePicker/src/basic/time-spinner.vue
new file mode 100644
index 000000000..5d7a273ec
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/basic/time-spinner.vue
@@ -0,0 +1,304 @@
+<template>
+  <div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
+    <template v-if="!arrowControl">
+      <el-scrollbar
+        @mouseenter.native="emitSelectRange('hours')"
+        @mousemove.native="adjustCurrentSpinner('hours')"
+        class="el-time-spinner__wrapper"
+        wrap-style="max-height: inherit;"
+        view-class="el-time-spinner__list"
+        noresize
+        tag="ul"
+        ref="hours">
+        <li
+          @click="handleClick('hours', { value: hour, disabled: disabled })"
+          v-for="(disabled, hour) in hoursList"
+          class="el-time-spinner__item"
+          :key="hour"
+          :class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) }}{{ amPm(hour) }}</li>
+      </el-scrollbar>
+      <el-scrollbar
+        @mouseenter.native="emitSelectRange('minutes')"
+        @mousemove.native="adjustCurrentSpinner('minutes')"
+        class="el-time-spinner__wrapper"
+        wrap-style="max-height: inherit;"
+        view-class="el-time-spinner__list"
+        noresize
+        tag="ul"
+        ref="minutes">
+        <li
+          @click="handleClick('minutes', { value: key, disabled: false })"
+          v-for="(enabled, key) in minutesList"
+          :key="key"
+          class="el-time-spinner__item"
+          :class="{ 'active': key === minutes, disabled: !enabled }">{{ ('0' + key).slice(-2) }}</li>
+      </el-scrollbar>
+      <el-scrollbar
+        v-show="showSeconds"
+        @mouseenter.native="emitSelectRange('seconds')"
+        @mousemove.native="adjustCurrentSpinner('seconds')"
+        class="el-time-spinner__wrapper"
+        wrap-style="max-height: inherit;"
+        view-class="el-time-spinner__list"
+        noresize
+        tag="ul"
+        ref="seconds">
+        <li
+          @click="handleClick('seconds', { value: key, disabled: false })"
+          v-for="(second, key) in 60"
+          class="el-time-spinner__item"
+          :class="{ 'active': key === seconds }"
+          :key="key">{{ ('0' + key).slice(-2) }}</li>
+      </el-scrollbar>
+    </template>
+    <template v-if="arrowControl">
+      <div
+        @mouseenter="emitSelectRange('hours')"
+        class="el-time-spinner__wrapper is-arrow">
+        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
+        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
+        <ul class="el-time-spinner__list" ref="hours">
+          <li
+            class="el-time-spinner__item"
+            :class="{ 'active': hour === hours, 'disabled': hoursList[hour] }"
+            v-for="(hour, key) in arrowHourList"
+            :key="key">{{ hour === undefined ? '' : ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) + amPm(hour) }}</li>
+        </ul>
+      </div>
+      <div
+        @mouseenter="emitSelectRange('minutes')"
+        class="el-time-spinner__wrapper is-arrow">
+        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
+        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
+        <ul class="el-time-spinner__list" ref="minutes">
+          <li
+            class="el-time-spinner__item"
+            :class="{ 'active': minute === minutes }"
+            v-for="(minute, key) in arrowMinuteList"
+            :key="key">
+            {{ minute === undefined ? '' : ('0' + minute).slice(-2) }}
+          </li>
+        </ul>
+      </div>
+      <div
+        @mouseenter="emitSelectRange('seconds')"
+        class="el-time-spinner__wrapper is-arrow"
+        v-if="showSeconds">
+        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
+        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
+        <ul class="el-time-spinner__list" ref="seconds">
+          <li
+            v-for="(second, key) in arrowSecondList"
+            class="el-time-spinner__item"
+            :class="{ 'active': second === seconds }"
+            :key="key">
+            {{ second === undefined ? '' : ('0' + second).slice(-2) }}
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script type="text/babel">
+import { getRangeHours, getRangeMinutes, modifyTime } from 'element-ui/src/utils/date-util'
+import ElScrollbar from 'element-ui/packages/scrollbar'
+import RepeatClick from 'element-ui/src/directives/repeat-click'
+
+export default {
+  components: { ElScrollbar },
+
+  directives: {
+    repeatClick: RepeatClick
+  },
+
+  props: {
+    date: {},
+    defaultValue: {}, // reserved for future use
+    showSeconds: {
+      type: Boolean,
+      default: true
+    },
+    arrowControl: Boolean,
+    amPmMode: {
+      type: String,
+      default: '' // 'a': am/pm; 'A': AM/PM
+    }
+  },
+
+  computed: {
+    hours () {
+      return this.date.getHours()
+    },
+    minutes () {
+      return this.date.getMinutes()
+    },
+    seconds () {
+      return this.date.getSeconds()
+    },
+    hoursList () {
+      return getRangeHours(this.selectableRange)
+    },
+    minutesList () {
+      return getRangeMinutes(this.selectableRange, this.hours)
+    },
+    arrowHourList () {
+      const hours = this.hours
+      return [
+        hours > 0 ? hours - 1 : undefined,
+        hours,
+        hours < 23 ? hours + 1 : undefined
+      ]
+    },
+    arrowMinuteList () {
+      const minutes = this.minutes
+      return [
+        minutes > 0 ? minutes - 1 : undefined,
+        minutes,
+        minutes < 59 ? minutes + 1 : undefined
+      ]
+    },
+    arrowSecondList () {
+      const seconds = this.seconds
+      return [
+        seconds > 0 ? seconds - 1 : undefined,
+        seconds,
+        seconds < 59 ? seconds + 1 : undefined
+      ]
+    }
+  },
+
+  data () {
+    return {
+      selectableRange: [],
+      currentScrollbar: null
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      !this.arrowControl && this.bindScrollEvent()
+    })
+  },
+
+  methods: {
+    increase () {
+      this.scrollDown(1)
+    },
+
+    decrease () {
+      this.scrollDown(-1)
+    },
+
+    modifyDateField (type, value) {
+      switch (type) {
+        case 'hours': this.$emit('change', modifyTime(this.date, value, this.minutes, this.seconds)); break
+        case 'minutes': this.$emit('change', modifyTime(this.date, this.hours, value, this.seconds)); break
+        case 'seconds': this.$emit('change', modifyTime(this.date, this.hours, this.minutes, value)); break
+      }
+    },
+
+    handleClick (type, { value, disabled }) {
+      if (!disabled) {
+        this.modifyDateField(type, value)
+        this.emitSelectRange(type)
+        this.adjustSpinner(type, value)
+      }
+    },
+
+    emitSelectRange (type) {
+      if (type === 'hours') {
+        this.$emit('select-range', 0, 2)
+      } else if (type === 'minutes') {
+        this.$emit('select-range', 3, 5)
+      } else if (type === 'seconds') {
+        this.$emit('select-range', 6, 8)
+      }
+      this.currentScrollbar = type
+    },
+
+    bindScrollEvent () {
+      const bindFuntion = (type) => {
+        this.$refs[type].wrap.onscroll = (e) => {
+          // TODO: scroll is emitted when set scrollTop programatically
+          // should find better solutions in the future!
+          this.handleScroll(type, e)
+        }
+      }
+      bindFuntion('hours')
+      bindFuntion('minutes')
+      bindFuntion('seconds')
+    },
+
+    handleScroll (type) {
+      const value = Math.min(Math.round((this.$refs[type].wrap.scrollTop - (this.scrollBarHeight(type) * 0.5 - 10) / this.typeItemHeight(type) + 3) / this.typeItemHeight(type)), (type === 'hours' ? 23 : 59))
+      this.modifyDateField(type, value)
+    },
+
+    // NOTE: used by datetime / date-range panel
+    //       renamed from adjustScrollTop
+    //       should try to refactory it
+    adjustSpinners () {
+      this.adjustSpinner('hours', this.hours)
+      this.adjustSpinner('minutes', this.minutes)
+      this.adjustSpinner('seconds', this.seconds)
+    },
+
+    adjustCurrentSpinner (type) {
+      this.adjustSpinner(type, this[type])
+    },
+
+    adjustSpinner (type, value) {
+      if (this.arrowControl) return
+      const el = this.$refs[type].wrap
+      if (el) {
+        el.scrollTop = Math.max(0, value * this.typeItemHeight(type))
+      }
+    },
+
+    scrollDown (step) {
+      if (!this.currentScrollbar) {
+        this.emitSelectRange('hours')
+      }
+
+      const label = this.currentScrollbar
+      const hoursList = this.hoursList
+      let now = this[label]
+
+      if (this.currentScrollbar === 'hours') {
+        let total = Math.abs(step)
+        step = step > 0 ? 1 : -1
+        let length = hoursList.length
+        while (length-- && total) {
+          now = (now + step + hoursList.length) % hoursList.length
+          if (hoursList[now]) {
+            continue
+          }
+          total--
+        }
+        if (hoursList[now]) return
+      } else {
+        now = (now + step + 60) % 60
+      }
+
+      this.modifyDateField(label, now)
+      this.adjustSpinner(label, now)
+      this.$nextTick(() => this.emitSelectRange(this.currentScrollbar))
+    },
+    amPm (hour) {
+      const shouldShowAmPm = this.amPmMode.toLowerCase() === 'a'
+      if (!shouldShowAmPm) return ''
+      const isCapital = this.amPmMode === 'A'
+      let content = (hour < 12) ? ' am' : ' pm'
+      if (isCapital) content = content.toUpperCase()
+      return content
+    },
+    typeItemHeight (type) {
+      return this.$refs[type].$el.querySelector('li').offsetHeight
+    },
+    scrollBarHeight (type) {
+      return this.$refs[type].$el.offsetHeight
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/basic/year-table.vue b/nezha-fronted/src/components/common/myDatePicker/src/basic/year-table.vue
new file mode 100644
index 000000000..920ae83c9
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/basic/year-table.vue
@@ -0,0 +1,101 @@
+<template>
+  <table @click="handleYearTableClick" class="el-year-table">
+    <tbody>
+    <tr>
+      <td class="available" :class="getCellStyle(startYear + 0)">
+        <a class="cell">{{ startYear }}</a>
+      </td>
+      <td class="available" :class="getCellStyle(startYear + 1)">
+        <a class="cell">{{ startYear + 1 }}</a>
+      </td>
+      <td class="available" :class="getCellStyle(startYear + 2)">
+        <a class="cell">{{ startYear + 2 }}</a>
+      </td>
+      <td class="available" :class="getCellStyle(startYear + 3)">
+        <a class="cell">{{ startYear + 3 }}</a>
+      </td>
+    </tr>
+    <tr>
+      <td class="available" :class="getCellStyle(startYear + 4)">
+        <a class="cell">{{ startYear + 4 }}</a>
+      </td>
+      <td class="available" :class="getCellStyle(startYear + 5)">
+        <a class="cell">{{ startYear + 5 }}</a>
+      </td>
+      <td class="available" :class="getCellStyle(startYear + 6)">
+        <a class="cell">{{ startYear + 6 }}</a>
+      </td>
+      <td class="available" :class="getCellStyle(startYear + 7)">
+        <a class="cell">{{ startYear + 7 }}</a>
+      </td>
+    </tr>
+    <tr>
+      <td class="available" :class="getCellStyle(startYear + 8)">
+        <a class="cell">{{ startYear + 8 }}</a>
+      </td>
+      <td class="available" :class="getCellStyle(startYear + 9)">
+        <a class="cell">{{ startYear + 9 }}</a>
+      </td>
+      <td></td>
+      <td></td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script type="text/babel">
+import { hasClass } from 'element-ui/src/utils/dom'
+import { isDate, range, nextDate, getDayCountOfYear } from 'element-ui/src/utils/date-util'
+import { arrayFindIndex, coerceTruthyValueToArray } from 'element-ui/src/utils/util'
+
+const datesInYear = year => {
+  const numOfDays = getDayCountOfYear(year)
+  const firstDay = new Date(year, 0, 1)
+  return range(numOfDays).map(n => nextDate(firstDay, n))
+}
+
+export default {
+  props: {
+    disabledDate: {},
+    value: {},
+    defaultValue: {
+      validator (val) {
+        // null or valid Date Object
+        return val === null || (val instanceof Date && isDate(val))
+      }
+    },
+    date: {}
+  },
+
+  computed: {
+    startYear () {
+      return Math.floor(this.date.getFullYear() / 10) * 10
+    }
+  },
+
+  methods: {
+    getCellStyle (year) {
+      const style = {}
+      const today = new Date()
+
+      style.disabled = typeof this.disabledDate === 'function'
+        ? datesInYear(year).every(this.disabledDate)
+        : false
+      style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year) >= 0
+      style.today = today.getFullYear() === year
+      style.default = this.defaultValue && this.defaultValue.getFullYear() === year
+
+      return style
+    },
+
+    handleYearTableClick (event) {
+      const target = event.target
+      if (target.tagName === 'A') {
+        if (hasClass(target.parentNode, 'disabled')) return
+        const year = target.textContent || target.innerText
+        this.$emit('pick', Number(year))
+      }
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
new file mode 100644
index 000000000..3a07320da
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
@@ -0,0 +1,680 @@
+<template>
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
+    <div
+      v-show="visible"
+      class="el-picker-panel el-date-range-picker el-popper"
+      :class="[{
+        'has-sidebar': $slots.sidebar || shortcuts,
+        'has-time': showTime
+      }, popperClass]">
+      <div class="el-picker-panel__body-wrapper">
+        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
+        <div class="el-picker-panel__sidebar" v-if="shortcuts">
+          <button
+            type="button"
+            class="el-picker-panel__shortcut"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
+            @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
+        </div>
+        <div class="el-picker-panel__body">
+          <div class="el-date-range-picker__time-header" v-if="showTime">
+            <span class="el-date-range-picker__editors-wrap">
+              <span class="el-date-range-picker__time-picker-wrap">
+                <el-input
+                  size="small"
+                  :disabled="rangeState.selecting"
+                  ref="minInput"
+                  :placeholder="t('el.datepicker.startDate')"
+                  class="el-date-range-picker__editor"
+                  :value="minVisibleDate"
+                  @input="val => handleDateInput(val, 'min')"
+                  @change="val => handleDateChange(val, 'min')" />
+              </span>
+              <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="handleMinTimeClose">
+                <el-input
+                  size="small"
+                  class="el-date-range-picker__editor"
+                  :disabled="rangeState.selecting"
+                  :placeholder="t('el.datepicker.startTime')"
+                  :value="minVisibleTime"
+                  @focus="minTimePickerVisible = true"
+                  @input="val => handleTimeInput(val, 'min')"
+                  @change="val => handleTimeChange(val, 'min')" />
+                <time-picker
+                  ref="minTimePicker"
+                  @pick="handleMinTimePick"
+                  :time-arrow-control="arrowControl"
+                  :visible="minTimePickerVisible"
+                  @mounted="$refs.minTimePicker.format=timeFormat">
+                </time-picker>
+              </span>
+            </span>
+            <span class="el-icon-arrow-right"></span>
+            <span class="el-date-range-picker__editors-wrap is-right">
+              <span class="el-date-range-picker__time-picker-wrap">
+                <el-input
+                  size="small"
+                  class="el-date-range-picker__editor"
+                  :disabled="rangeState.selecting"
+                  :placeholder="t('el.datepicker.endDate')"
+                  :value="maxVisibleDate"
+                  :readonly="!minDate"
+                  @input="val => handleDateInput(val, 'max')"
+                  @change="val => handleDateChange(val, 'max')" />
+              </span>
+              <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="handleMaxTimeClose">
+                <el-input
+                  size="small"
+                  class="el-date-range-picker__editor"
+                  :disabled="rangeState.selecting"
+                  :placeholder="t('el.datepicker.endTime')"
+                  :value="maxVisibleTime"
+                  :readonly="!minDate"
+                  @focus="minDate && (maxTimePickerVisible = true)"
+                  @input="val => handleTimeInput(val, 'max')"
+                  @change="val => handleTimeChange(val, 'max')" />
+                <time-picker
+                  ref="maxTimePicker"
+                  @pick="handleMaxTimePick"
+                  :time-arrow-control="arrowControl"
+                  :visible="maxTimePickerVisible"
+                  @mounted="$refs.maxTimePicker.format=timeFormat">
+                </time-picker>
+              </span>
+            </span>
+          </div>
+          <div class="el-picker-panel__content el-date-range-picker__content is-left">
+            <div class="el-date-range-picker__header">
+              <button
+                type="button"
+                @click="leftPrevYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                type="button"
+                @click="leftPrevMonth"
+                class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
+              <button
+                type="button"
+                @click="leftNextYear"
+                v-if="unlinkPanels"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <button
+                type="button"
+                @click="leftNextMonth"
+                v-if="unlinkPanels"
+                :disabled="!enableMonthArrow"
+                :class="{ 'is-disabled': !enableMonthArrow }"
+                class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
+              <div>{{ leftLabel }}</div>
+            </div>
+            <date-table
+              selection-mode="range"
+              :date="leftDate"
+              :default-value="defaultValue"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              :disabled-date="disabledDate"
+              :cell-class-name="cellClassName"
+              @changerange="handleChangeRange"
+              :first-day-of-week="firstDayOfWeek"
+              @pick="handleRangePick">
+            </date-table>
+          </div>
+          <div class="el-picker-panel__content el-date-range-picker__content is-right">
+            <div class="el-date-range-picker__header">
+              <button
+                type="button"
+                @click="rightPrevYear"
+                v-if="unlinkPanels"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                type="button"
+                @click="rightPrevMonth"
+                v-if="unlinkPanels"
+                :disabled="!enableMonthArrow"
+                :class="{ 'is-disabled': !enableMonthArrow }"
+                class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
+              <button
+                type="button"
+                @click="rightNextYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <button
+                type="button"
+                @click="rightNextMonth"
+                class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
+              <div>{{ rightLabel }}</div>
+            </div>
+            <date-table
+              selection-mode="range"
+              :date="rightDate"
+              :default-value="defaultValue"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              :disabled-date="disabledDate"
+              :cell-class-name="cellClassName"
+              @changerange="handleChangeRange"
+              :first-day-of-week="firstDayOfWeek"
+              @pick="handleRangePick">
+            </date-table>
+          </div>
+        </div>
+      </div>
+      <div class="el-picker-panel__footer" v-if="showTime">
+        <el-button
+          size="mini"
+          type="text"
+          class="el-picker-panel__link-btn"
+          @click="handleClear">
+          {{ t('el.datepicker.clear') }}
+        </el-button>
+        <el-button
+          plain
+          size="mini"
+          class="el-picker-panel__link-btn"
+          :disabled="btnDisabled"
+          @click="handleConfirm(false)">
+          {{ t('el.datepicker.confirm') }}
+        </el-button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import {
+  formatDate,
+  parseDate,
+  isDate,
+  modifyDate,
+  modifyTime,
+  modifyWithTimeString,
+  prevYear,
+  nextYear,
+  prevMonth,
+  nextMonth,
+  nextDate,
+  extractDateFormat,
+  extractTimeFormat
+} from 'element-ui/src/utils/date-util'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
+import Locale from 'element-ui/src/mixins/locale'
+import TimePicker from './time'
+import DateTable from '../basic/date-table'
+import ElInput from 'element-ui/packages/input'
+import ElButton from 'element-ui/packages/button'
+
+const calcDefaultValue = (defaultValue) => {
+  if (Array.isArray(defaultValue)) {
+    return [new Date(defaultValue[0]), new Date(defaultValue[1])]
+  } else if (defaultValue) {
+    return [new Date(defaultValue), nextDate(new Date(defaultValue), 1)]
+  } else {
+    return [new Date(), nextDate(new Date(), 1)]
+  }
+}
+
+export default {
+  mixins: [Locale],
+
+  directives: { Clickoutside },
+
+  computed: {
+    btnDisabled () {
+      return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]))
+    },
+
+    leftLabel () {
+      return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${this.leftDate.getMonth() + 1}`)
+    },
+
+    rightLabel () {
+      return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${this.rightDate.getMonth() + 1}`)
+    },
+
+    leftYear () {
+      return this.leftDate.getFullYear()
+    },
+
+    leftMonth () {
+      return this.leftDate.getMonth()
+    },
+
+    leftMonthDate () {
+      return this.leftDate.getDate()
+    },
+
+    rightYear () {
+      return this.rightDate.getFullYear()
+    },
+
+    rightMonth () {
+      return this.rightDate.getMonth()
+    },
+
+    rightMonthDate () {
+      return this.rightDate.getDate()
+    },
+
+    minVisibleDate () {
+      if (this.dateUserInput.min !== null) return this.dateUserInput.min
+      if (this.minDate) return formatDate(this.minDate, this.dateFormat)
+      return ''
+    },
+
+    maxVisibleDate () {
+      if (this.dateUserInput.max !== null) return this.dateUserInput.max
+      if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.dateFormat)
+      return ''
+    },
+
+    minVisibleTime () {
+      if (this.timeUserInput.min !== null) return this.timeUserInput.min
+      if (this.minDate) return formatDate(this.minDate, this.timeFormat)
+      return ''
+    },
+
+    maxVisibleTime () {
+      if (this.timeUserInput.max !== null) return this.timeUserInput.max
+      if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.timeFormat)
+      return ''
+    },
+
+    timeFormat () {
+      if (this.format) {
+        return extractTimeFormat(this.format)
+      } else {
+        return 'HH:mm:ss'
+      }
+    },
+
+    dateFormat () {
+      if (this.format) {
+        return extractDateFormat(this.format)
+      } else {
+        return 'yyyy-MM-dd'
+      }
+    },
+
+    enableMonthArrow () {
+      const nextMonth = (this.leftMonth + 1) % 12
+      const yearOffset = this.leftMonth + 1 >= 12 ? 1 : 0
+      return this.unlinkPanels && new Date(this.leftYear + yearOffset, nextMonth) < new Date(this.rightYear, this.rightMonth)
+    },
+
+    enableYearArrow () {
+      return this.unlinkPanels && this.rightYear * 12 + this.rightMonth - (this.leftYear * 12 + this.leftMonth + 1) >= 12
+    }
+  },
+
+  data () {
+    return {
+      popperClass: '',
+      value: [],
+      defaultValue: null,
+      defaultTime: null,
+      minDate: '',
+      maxDate: '',
+      leftDate: new Date(),
+      rightDate: nextMonth(new Date()),
+      rangeState: {
+        endDate: null,
+        selecting: false,
+        row: null,
+        column: null
+      },
+      showTime: false,
+      shortcuts: '',
+      visible: '',
+      disabledDate: '',
+      cellClassName: '',
+      firstDayOfWeek: 7,
+      minTimePickerVisible: false,
+      maxTimePickerVisible: false,
+      format: '',
+      arrowControl: false,
+      unlinkPanels: false,
+      dateUserInput: {
+        min: null,
+        max: null
+      },
+      timeUserInput: {
+        min: null,
+        max: null
+      }
+    }
+  },
+
+  watch: {
+    minDate (val) {
+      this.dateUserInput.min = null
+      this.timeUserInput.min = null
+      this.$nextTick(() => {
+        if (this.$refs.maxTimePicker && this.maxDate && this.maxDate < this.minDate) {
+          const format = 'HH:mm:ss'
+          this.$refs.maxTimePicker.selectableRange = [
+            [
+              parseDate(formatDate(this.minDate, format), format),
+              parseDate('23:59:59', format)
+            ]
+          ]
+        }
+      })
+      if (val && this.$refs.minTimePicker) {
+        this.$refs.minTimePicker.date = val
+        this.$refs.minTimePicker.value = val
+      }
+    },
+
+    maxDate (val) {
+      this.dateUserInput.max = null
+      this.timeUserInput.max = null
+      if (val && this.$refs.maxTimePicker) {
+        this.$refs.maxTimePicker.date = val
+        this.$refs.maxTimePicker.value = val
+      }
+    },
+
+    minTimePickerVisible (val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.$refs.minTimePicker.date = this.minDate
+          this.$refs.minTimePicker.value = this.minDate
+          this.$refs.minTimePicker.adjustSpinners()
+        })
+      }
+    },
+
+    maxTimePickerVisible (val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.$refs.maxTimePicker.date = this.maxDate
+          this.$refs.maxTimePicker.value = this.maxDate
+          this.$refs.maxTimePicker.adjustSpinners()
+        })
+      }
+    },
+
+    value (newVal) {
+      if (!newVal) {
+        this.minDate = null
+        this.maxDate = null
+      } else if (Array.isArray(newVal)) {
+        this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null
+        this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null
+        if (this.minDate) {
+          this.leftDate = this.minDate
+          if (this.unlinkPanels && this.maxDate) {
+            const minDateYear = this.minDate.getFullYear()
+            const minDateMonth = this.minDate.getMonth()
+            const maxDateYear = this.maxDate.getFullYear()
+            const maxDateMonth = this.maxDate.getMonth()
+            this.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth
+              ? nextMonth(this.maxDate)
+              : this.maxDate
+          } else {
+            this.rightDate = nextMonth(this.leftDate)
+          }
+        } else {
+          this.leftDate = calcDefaultValue(this.defaultValue)[0]
+          this.rightDate = nextMonth(this.leftDate)
+        }
+      }
+    },
+
+    defaultValue (val) {
+      if (!Array.isArray(this.value)) {
+        const [left, right] = calcDefaultValue(val)
+        this.leftDate = left
+        this.rightDate = val && val[1] && this.unlinkPanels
+          ? right
+          : nextMonth(this.leftDate)
+      }
+    }
+  },
+
+  methods: {
+    handleClear () {
+      this.minDate = null
+      this.maxDate = null
+      this.leftDate = calcDefaultValue(this.defaultValue)[0]
+      this.rightDate = nextMonth(this.leftDate)
+      this.$emit('pick', null)
+    },
+
+    handleChangeRange (val) {
+      this.minDate = val.minDate
+      this.maxDate = val.maxDate
+      this.rangeState = val.rangeState
+    },
+
+    handleDateInput (value, type) {
+      this.dateUserInput[type] = value
+      if (value.length !== this.dateFormat.length) return
+      const parsedValue = parseDate(value, this.dateFormat)
+
+      if (parsedValue) {
+        if (typeof this.disabledDate === 'function' &&
+            this.disabledDate(new Date(parsedValue))) {
+          return
+        }
+        if (type === 'min') {
+          this.minDate = modifyDate(this.minDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate())
+          this.leftDate = new Date(parsedValue)
+          if (!this.unlinkPanels) {
+            this.rightDate = nextMonth(this.leftDate)
+          }
+        } else {
+          this.maxDate = modifyDate(this.maxDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate())
+          this.rightDate = new Date(parsedValue)
+          if (!this.unlinkPanels) {
+            this.leftDate = prevMonth(parsedValue)
+          }
+        }
+      }
+    },
+
+    handleDateChange (value, type) {
+      const parsedValue = parseDate(value, this.dateFormat)
+      if (parsedValue) {
+        if (type === 'min') {
+          this.minDate = modifyDate(this.minDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate())
+          if (this.minDate > this.maxDate) {
+            this.maxDate = this.minDate
+          }
+        } else {
+          this.maxDate = modifyDate(this.maxDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate())
+          if (this.maxDate < this.minDate) {
+            this.minDate = this.maxDate
+          }
+        }
+      }
+    },
+
+    handleTimeInput (value, type) {
+      this.timeUserInput[type] = value
+      if (value.length !== this.timeFormat.length) return
+      const parsedValue = parseDate(value, this.timeFormat)
+
+      if (parsedValue) {
+        if (type === 'min') {
+          this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds())
+          this.$nextTick(_ => this.$refs.minTimePicker.adjustSpinners())
+        } else {
+          this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds())
+          this.$nextTick(_ => this.$refs.maxTimePicker.adjustSpinners())
+        }
+      }
+    },
+
+    handleTimeChange (value, type) {
+      const parsedValue = parseDate(value, this.timeFormat)
+      if (parsedValue) {
+        if (type === 'min') {
+          this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds())
+          if (this.minDate > this.maxDate) {
+            this.maxDate = this.minDate
+          }
+          this.$refs.minTimePicker.value = this.minDate
+          this.minTimePickerVisible = false
+        } else {
+          this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds())
+          if (this.maxDate < this.minDate) {
+            this.minDate = this.maxDate
+          }
+          this.$refs.maxTimePicker.value = this.minDate
+          this.maxTimePickerVisible = false
+        }
+      }
+    },
+
+    handleRangePick (val, close = true) {
+      const defaultTime = this.defaultTime || []
+      const minDate = modifyWithTimeString(val.minDate, defaultTime[0])
+      const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1])
+
+      if (this.maxDate === maxDate && this.minDate === minDate) {
+        return
+      }
+      this.onPick && this.onPick(val)
+      this.maxDate = maxDate
+      this.minDate = minDate
+
+      // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
+      setTimeout(() => {
+        this.maxDate = maxDate
+        this.minDate = minDate
+      }, 10)
+      if (!close || this.showTime) return
+      this.handleConfirm()
+    },
+
+    handleShortcutClick (shortcut) {
+      if (shortcut.onClick) {
+        shortcut.onClick(this)
+      }
+    },
+
+    handleMinTimePick (value, visible, first) {
+      this.minDate = this.minDate || new Date()
+      if (value) {
+        this.minDate = modifyTime(this.minDate, value.getHours(), value.getMinutes(), value.getSeconds())
+      }
+
+      if (!first) {
+        this.minTimePickerVisible = visible
+      }
+
+      if (!this.maxDate || this.maxDate && this.maxDate.getTime() < this.minDate.getTime()) {
+        this.maxDate = new Date(this.minDate)
+      }
+    },
+
+    handleMinTimeClose () {
+      this.minTimePickerVisible = false
+    },
+
+    handleMaxTimePick (value, visible, first) {
+      if (this.maxDate && value) {
+        this.maxDate = modifyTime(this.maxDate, value.getHours(), value.getMinutes(), value.getSeconds())
+      }
+
+      if (!first) {
+        this.maxTimePickerVisible = visible
+      }
+
+      if (this.maxDate && this.minDate && this.minDate.getTime() > this.maxDate.getTime()) {
+        this.minDate = new Date(this.maxDate)
+      }
+    },
+
+    handleMaxTimeClose () {
+      this.maxTimePickerVisible = false
+    },
+
+    // leftPrev*, rightNext* need to take care of `unlinkPanels`
+    leftPrevYear () {
+      this.leftDate = prevYear(this.leftDate)
+      if (!this.unlinkPanels) {
+        this.rightDate = nextMonth(this.leftDate)
+      }
+    },
+
+    leftPrevMonth () {
+      this.leftDate = prevMonth(this.leftDate)
+      if (!this.unlinkPanels) {
+        this.rightDate = nextMonth(this.leftDate)
+      }
+    },
+
+    rightNextYear () {
+      if (!this.unlinkPanels) {
+        this.leftDate = nextYear(this.leftDate)
+        this.rightDate = nextMonth(this.leftDate)
+      } else {
+        this.rightDate = nextYear(this.rightDate)
+      }
+    },
+
+    rightNextMonth () {
+      if (!this.unlinkPanels) {
+        this.leftDate = nextMonth(this.leftDate)
+        this.rightDate = nextMonth(this.leftDate)
+      } else {
+        this.rightDate = nextMonth(this.rightDate)
+      }
+    },
+
+    // leftNext*, rightPrev* are called when `unlinkPanels` is true
+    leftNextYear () {
+      this.leftDate = nextYear(this.leftDate)
+    },
+
+    leftNextMonth () {
+      this.leftDate = nextMonth(this.leftDate)
+    },
+
+    rightPrevYear () {
+      this.rightDate = prevYear(this.rightDate)
+    },
+
+    rightPrevMonth () {
+      this.rightDate = prevMonth(this.rightDate)
+    },
+
+    handleConfirm (visible = false) {
+      if (this.isValidValue([this.minDate, this.maxDate])) {
+        this.$emit('pick', [this.minDate, this.maxDate], visible)
+      }
+    },
+
+    isValidValue (value) {
+      return Array.isArray(value) &&
+          value && value[0] && value[1] &&
+          isDate(value[0]) && isDate(value[1]) &&
+          value[0].getTime() <= value[1].getTime() && (
+        typeof this.disabledDate === 'function'
+          ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
+          : true
+      )
+    },
+
+    resetView () {
+      // NOTE: this is a hack to reset {min, max}Date on picker open.
+      // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
+      //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
+      if (this.minDate && this.maxDate == null) this.rangeState.selecting = false
+      this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null
+      this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null
+    }
+  },
+
+  components: { TimePicker, DateTable, ElInput, ElButton }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue
new file mode 100644
index 000000000..10b75b170
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue
@@ -0,0 +1,597 @@
+<template>
+  <transition name="el-zoom-in-top" @after-enter="handleEnter" @after-leave="handleLeave">
+    <div
+      v-show="visible"
+      class="el-picker-panel el-date-picker el-popper"
+      :class="[{
+        'has-sidebar': $slots.sidebar || shortcuts,
+        'has-time': showTime
+      }, popperClass]">
+      <div class="el-picker-panel__body-wrapper">
+        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
+        <div class="el-picker-panel__sidebar" v-if="shortcuts">
+          <button
+            type="button"
+            class="el-picker-panel__shortcut"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
+            @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
+        </div>
+        <div class="el-picker-panel__body">
+          <div class="el-date-picker__time-header" v-if="showTime">
+            <span class="el-date-picker__editor-wrap">
+              <el-input
+                :placeholder="t('el.datepicker.selectDate')"
+                :value="visibleDate"
+                size="small"
+                @input="val => userInputDate = val"
+                @change="handleVisibleDateChange" />
+            </span>
+            <span class="el-date-picker__editor-wrap" v-clickoutside="handleTimePickClose">
+              <el-input
+                ref="input"
+                @focus="timePickerVisible = true"
+                :placeholder="t('el.datepicker.selectTime')"
+                :value="visibleTime"
+                size="small"
+                @input="val => userInputTime = val"
+                @change="handleVisibleTimeChange" />
+              <time-picker
+                ref="timepicker"
+                :time-arrow-control="arrowControl"
+                @pick="handleTimePick"
+                :visible="timePickerVisible"
+                @mounted="proxyTimePickerDataProperties">
+              </time-picker>
+            </span>
+          </div>
+          <div
+            class="el-date-picker__header"
+            :class="{ 'el-date-picker__header--bordered': currentView === 'year' || currentView === 'month' }"
+            v-show="currentView !== 'time'">
+            <button
+              type="button"
+              @click="prevYear"
+              :aria-label="t(`el.datepicker.prevYear`)"
+              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
+            </button>
+            <button
+              type="button"
+              @click="prevMonth"
+              v-show="currentView === 'date'"
+              :aria-label="t(`el.datepicker.prevMonth`)"
+              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
+            </button>
+            <span
+              @click="showYearPicker"
+              role="button"
+              class="el-date-picker__header-label">{{ yearLabel }}</span>
+            <span
+              @click="showMonthPicker"
+              v-show="currentView === 'date'"
+              role="button"
+              class="el-date-picker__header-label"
+              :class="{ active: currentView === 'month' }">{{t(`el.datepicker.month${ month + 1 }`)}}</span>
+            <button
+              type="button"
+              @click="nextYear"
+              :aria-label="t(`el.datepicker.nextYear`)"
+              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
+            </button>
+            <button
+              type="button"
+              @click="nextMonth"
+              v-show="currentView === 'date'"
+              :aria-label="t(`el.datepicker.nextMonth`)"
+              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
+            </button>
+          </div>
+
+          <div class="el-picker-panel__content">
+            <date-table
+              v-show="currentView === 'date'"
+              @pick="handleDatePick"
+              :selection-mode="selectionMode"
+              :first-day-of-week="firstDayOfWeek"
+              :value="value"
+              :default-value="defaultValue ? new Date(defaultValue) : null"
+              :date="date"
+              :cell-class-name="cellClassName"
+              :disabled-date="disabledDate">
+            </date-table>
+            <year-table
+              v-show="currentView === 'year'"
+              @pick="handleYearPick"
+              :value="value"
+              :default-value="defaultValue ? new Date(defaultValue) : null"
+              :date="date"
+              :disabled-date="disabledDate">
+            </year-table>
+            <month-table
+              v-show="currentView === 'month'"
+              @pick="handleMonthPick"
+              :value="value"
+              :default-value="defaultValue ? new Date(defaultValue) : null"
+              :date="date"
+              :disabled-date="disabledDate">
+            </month-table>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="el-picker-panel__footer"
+        v-show="footerVisible && currentView === 'date'">
+        <el-button
+          size="mini"
+          type="text"
+          class="el-picker-panel__link-btn"
+          @click="changeToNow"
+          v-show="selectionMode !== 'dates'">
+          {{ t('el.datepicker.now') }}
+        </el-button>
+        <el-button
+          plain
+          size="mini"
+          class="el-picker-panel__link-btn"
+          @click="confirm">
+          {{ t('el.datepicker.confirm') }}
+        </el-button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import {
+  formatDate,
+  parseDate,
+  getWeekNumber,
+  isDate,
+  modifyDate,
+  modifyTime,
+  modifyWithTimeString,
+  clearMilliseconds,
+  clearTime,
+  prevYear,
+  nextYear,
+  prevMonth,
+  nextMonth,
+  changeYearMonthAndClampDate,
+  extractDateFormat,
+  extractTimeFormat,
+  timeWithinRange
+} from 'element-ui/src/utils/date-util'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
+import Locale from 'element-ui/src/mixins/locale'
+import ElInput from 'element-ui/packages/input'
+import ElButton from 'element-ui/packages/button'
+import TimePicker from './time'
+import YearTable from '../basic/year-table'
+import MonthTable from '../basic/month-table'
+import DateTable from '../basic/date-table'
+
+export default {
+  mixins: [Locale],
+
+  directives: { Clickoutside },
+
+  watch: {
+    showTime (val) {
+      /* istanbul ignore if */
+      if (!val) return
+      this.$nextTick(_ => {
+        const inputElm = this.$refs.input.$el
+        if (inputElm) {
+          this.pickerWidth = inputElm.getBoundingClientRect().width + 10
+        }
+      })
+    },
+
+    value (val) {
+      if (this.selectionMode === 'dates' && this.value) return
+      if (isDate(val)) {
+        this.date = new Date(val)
+      } else {
+        this.date = this.getDefaultValue()
+      }
+    },
+
+    defaultValue (val) {
+      if (!isDate(this.value)) {
+        this.date = val ? new Date(val) : new Date()
+      }
+    },
+
+    timePickerVisible (val) {
+      if (val) this.$nextTick(() => this.$refs.timepicker.adjustSpinners())
+    },
+
+    selectionMode (newVal) {
+      if (newVal === 'month') {
+        /* istanbul ignore next */
+        if (this.currentView !== 'year' || this.currentView !== 'month') {
+          this.currentView = 'month'
+        }
+      } else if (newVal === 'dates') {
+        this.currentView = 'date'
+      }
+    }
+  },
+
+  methods: {
+    proxyTimePickerDataProperties () {
+      const format = timeFormat => { this.$refs.timepicker.format = timeFormat }
+      const value = value => { this.$refs.timepicker.value = value }
+      const date = date => { this.$refs.timepicker.date = date }
+      const selectableRange = selectableRange => { this.$refs.timepicker.selectableRange = selectableRange }
+
+      this.$watch('value', value)
+      this.$watch('date', date)
+      this.$watch('selectableRange', selectableRange)
+
+      format(this.timeFormat)
+      value(this.value)
+      date(this.date)
+      selectableRange(this.selectableRange)
+    },
+
+    handleClear () {
+      this.date = this.getDefaultValue()
+      this.$emit('pick', null)
+    },
+
+    emit (value, ...args) {
+      if (!value) {
+        this.$emit('pick', value, ...args)
+      } else if (Array.isArray(value)) {
+        const dates = value.map(date => this.showTime ? clearMilliseconds(date) : clearTime(date))
+        this.$emit('pick', dates, ...args)
+      } else {
+        this.$emit('pick', this.showTime ? clearMilliseconds(value) : clearTime(value), ...args)
+      }
+      this.userInputDate = null
+      this.userInputTime = null
+    },
+
+    // resetDate() {
+    //   this.date = new Date(this.date);
+    // },
+
+    showMonthPicker () {
+      this.currentView = 'month'
+    },
+
+    showYearPicker () {
+      this.currentView = 'year'
+    },
+
+    // XXX: 没用到
+    // handleLabelClick() {
+    //   if (this.currentView === 'date') {
+    //     this.showMonthPicker();
+    //   } else if (this.currentView === 'month') {
+    //     this.showYearPicker();
+    //   }
+    // },
+
+    prevMonth () {
+      this.date = prevMonth(this.date)
+    },
+
+    nextMonth () {
+      this.date = nextMonth(this.date)
+    },
+
+    prevYear () {
+      if (this.currentView === 'year') {
+        this.date = prevYear(this.date, 10)
+      } else {
+        this.date = prevYear(this.date)
+      }
+    },
+
+    nextYear () {
+      if (this.currentView === 'year') {
+        this.date = nextYear(this.date, 10)
+      } else {
+        this.date = nextYear(this.date)
+      }
+    },
+
+    handleShortcutClick (shortcut) {
+      if (shortcut.onClick) {
+        shortcut.onClick(this)
+      }
+    },
+
+    handleTimePick (value, visible, first) {
+      if (isDate(value)) {
+        const newDate = this.value
+          ? modifyTime(this.value, value.getHours(), value.getMinutes(), value.getSeconds())
+          : modifyWithTimeString(this.getDefaultValue(), this.defaultTime)
+        this.date = newDate
+        this.emit(this.date, true)
+      } else {
+        this.emit(value, true)
+      }
+      if (!first) {
+        this.timePickerVisible = visible
+      }
+    },
+
+    handleTimePickClose () {
+      this.timePickerVisible = false
+    },
+
+    handleMonthPick (month) {
+      if (this.selectionMode === 'month') {
+        this.date = modifyDate(this.date, this.year, month, 1)
+        this.emit(this.date)
+      } else {
+        this.date = changeYearMonthAndClampDate(this.date, this.year, month)
+        // TODO: should emit intermediate value ??
+        // this.emit(this.date);
+        this.currentView = 'date'
+      }
+    },
+
+    handleDatePick (value) {
+      if (this.selectionMode === 'day') {
+        let newDate = this.value
+          ? modifyDate(this.value, value.getFullYear(), value.getMonth(), value.getDate())
+          : modifyWithTimeString(value, this.defaultTime)
+          // change default time while out of selectableRange
+        if (!this.checkDateWithinRange(newDate)) {
+          newDate = modifyDate(this.selectableRange[0][0], value.getFullYear(), value.getMonth(), value.getDate())
+        }
+        this.date = newDate
+        this.emit(this.date, this.showTime)
+      } else if (this.selectionMode === 'week') {
+        this.emit(value.date)
+      } else if (this.selectionMode === 'dates') {
+        this.emit(value, true) // set false to keep panel open
+      }
+    },
+
+    handleYearPick (year) {
+      if (this.selectionMode === 'year') {
+        this.date = modifyDate(this.date, year, 0, 1)
+        this.emit(this.date)
+      } else {
+        this.date = changeYearMonthAndClampDate(this.date, year, this.month)
+        // TODO: should emit intermediate value ??
+        // this.emit(this.date, true);
+        this.currentView = 'month'
+      }
+    },
+
+    changeToNow () {
+      // NOTE: not a permanent solution
+      //       consider disable "now" button in the future
+      if ((!this.disabledDate || !this.disabledDate(new Date())) && this.checkDateWithinRange(new Date())) {
+        this.date = new Date()
+        this.emit(this.date)
+      }
+    },
+
+    confirm () {
+      if (this.selectionMode === 'dates') {
+        this.emit(this.value)
+      } else {
+        // value were emitted in handle{Date,Time}Pick, nothing to update here
+        // deal with the scenario where: user opens the picker, then confirm without doing anything
+        const value = this.value
+          ? this.value
+          : modifyWithTimeString(this.getDefaultValue(), this.defaultTime)
+        this.date = new Date(value) // refresh date
+        this.emit(value)
+      }
+    },
+
+    resetView () {
+      if (this.selectionMode === 'month') {
+        this.currentView = 'month'
+      } else if (this.selectionMode === 'year') {
+        this.currentView = 'year'
+      } else {
+        this.currentView = 'date'
+      }
+    },
+
+    handleEnter () {
+      document.body.addEventListener('keydown', this.handleKeydown)
+    },
+
+    handleLeave () {
+      this.$emit('dodestroy')
+      document.body.removeEventListener('keydown', this.handleKeydown)
+    },
+
+    handleKeydown (event) {
+      const keyCode = event.keyCode
+      const list = [38, 40, 37, 39]
+      if (this.visible && !this.timePickerVisible) {
+        if (list.indexOf(keyCode) !== -1) {
+          this.handleKeyControl(keyCode)
+          event.stopPropagation()
+          event.preventDefault()
+        }
+        if (keyCode === 13 && this.userInputDate === null && this.userInputTime === null) { // Enter
+          this.emit(this.date, false)
+        }
+      }
+    },
+
+    handleKeyControl (keyCode) {
+      const mapping = {
+        year: {
+          38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setFullYear(date.getFullYear() + step)
+        },
+        month: {
+          38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setMonth(date.getMonth() + step)
+        },
+        week: {
+          38: -1, 40: 1, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step * 7)
+        },
+        day: {
+          38: -7, 40: 7, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step)
+        }
+      }
+      const mode = this.selectionMode
+      const year = 3.1536e10
+      const now = this.date.getTime()
+      const newDate = new Date(this.date.getTime())
+      while (Math.abs(now - newDate.getTime()) <= year) {
+        const map = mapping[mode]
+        map.offset(newDate, map[keyCode])
+        if (typeof this.disabledDate === 'function' && this.disabledDate(newDate)) {
+          continue
+        }
+        this.date = newDate
+        this.$emit('pick', newDate, true)
+        break
+      }
+    },
+
+    handleVisibleTimeChange (value) {
+      const time = parseDate(value, this.timeFormat)
+      if (time && this.checkDateWithinRange(time)) {
+        this.date = modifyDate(time, this.year, this.month, this.monthDate)
+        this.userInputTime = null
+        this.$refs.timepicker.value = this.date
+        this.timePickerVisible = false
+        this.emit(this.date, true)
+      }
+    },
+
+    handleVisibleDateChange (value) {
+      const date = parseDate(value, this.dateFormat)
+      if (date) {
+        if (typeof this.disabledDate === 'function' && this.disabledDate(date)) {
+          return
+        }
+        this.date = modifyTime(date, this.date.getHours(), this.date.getMinutes(), this.date.getSeconds())
+        this.userInputDate = null
+        this.resetView()
+        this.emit(this.date, true)
+      }
+    },
+
+    isValidValue (value) {
+      return value && !isNaN(value) && (
+        typeof this.disabledDate === 'function'
+          ? !this.disabledDate(value)
+          : true
+      ) && this.checkDateWithinRange(value)
+    },
+
+    getDefaultValue () {
+      // if default-value is set, return it
+      // otherwise, return now (the moment this method gets called)
+      return this.defaultValue ? new Date(this.defaultValue) : new Date()
+    },
+
+    checkDateWithinRange (date) {
+      return this.selectableRange.length > 0
+        ? timeWithinRange(date, this.selectableRange, this.format || 'HH:mm:ss')
+        : true
+    }
+  },
+
+  components: {
+    TimePicker, YearTable, MonthTable, DateTable, ElInput, ElButton
+  },
+
+  data () {
+    return {
+      popperClass: '',
+      date: new Date(),
+      value: '',
+      defaultValue: null, // use getDefaultValue() for time computation
+      defaultTime: null,
+      showTime: false,
+      selectionMode: 'day',
+      shortcuts: '',
+      visible: false,
+      currentView: 'date',
+      disabledDate: '',
+      cellClassName: '',
+      selectableRange: [],
+      firstDayOfWeek: 7,
+      showWeekNumber: false,
+      timePickerVisible: false,
+      format: '',
+      arrowControl: false,
+      userInputDate: null,
+      userInputTime: null
+    }
+  },
+
+  computed: {
+    year () {
+      return this.date.getFullYear()
+    },
+
+    month () {
+      return this.date.getMonth()
+    },
+
+    week () {
+      return getWeekNumber(this.date)
+    },
+
+    monthDate () {
+      return this.date.getDate()
+    },
+
+    footerVisible () {
+      return this.showTime || this.selectionMode === 'dates'
+    },
+
+    visibleTime () {
+      if (this.userInputTime !== null) {
+        return this.userInputTime
+      } else {
+        return formatDate(this.value || this.defaultValue, this.timeFormat)
+      }
+    },
+
+    visibleDate () {
+      if (this.userInputDate !== null) {
+        return this.userInputDate
+      } else {
+        return formatDate(this.value || this.defaultValue, this.dateFormat)
+      }
+    },
+
+    yearLabel () {
+      const yearTranslation = this.t('el.datepicker.year')
+      if (this.currentView === 'year') {
+        const startYear = Math.floor(this.year / 10) * 10
+        if (yearTranslation) {
+          return startYear + ' ' + yearTranslation + ' - ' + (startYear + 9) + ' ' + yearTranslation
+        }
+        return startYear + ' - ' + (startYear + 9)
+      }
+      return this.year + ' ' + yearTranslation
+    },
+
+    timeFormat () {
+      if (this.format) {
+        return extractTimeFormat(this.format)
+      } else {
+        return 'HH:mm:ss'
+      }
+    },
+
+    dateFormat () {
+      if (this.format) {
+        return extractDateFormat(this.format)
+      } else {
+        return 'yyyy-MM-dd'
+      }
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue
new file mode 100644
index 000000000..d6d334124
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue
@@ -0,0 +1,289 @@
+<template>
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
+    <div
+      v-show="visible"
+      class="el-picker-panel el-date-range-picker el-popper"
+      :class="[{
+        'has-sidebar': $slots.sidebar || shortcuts
+      }, popperClass]">
+      <div class="el-picker-panel__body-wrapper">
+        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
+        <div class="el-picker-panel__sidebar" v-if="shortcuts">
+          <button
+            type="button"
+            class="el-picker-panel__shortcut"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
+            @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
+        </div>
+        <div class="el-picker-panel__body">
+          <div class="el-picker-panel__content el-date-range-picker__content is-left">
+            <div class="el-date-range-picker__header">
+              <button
+                type="button"
+                @click="leftPrevYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                type="button"
+                v-if="unlinkPanels"
+                @click="leftNextYear"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <div>{{ leftLabel }}</div>
+            </div>
+            <month-table
+              selection-mode="range"
+              :date="leftDate"
+              :default-value="defaultValue"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              :disabled-date="disabledDate"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick">
+            </month-table>
+          </div>
+          <div class="el-picker-panel__content el-date-range-picker__content is-right">
+            <div class="el-date-range-picker__header">
+              <button
+                type="button"
+                v-if="unlinkPanels"
+                @click="rightPrevYear"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                type="button"
+                @click="rightNextYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <div>{{ rightLabel }}</div>
+            </div>
+            <month-table
+              selection-mode="range"
+              :date="rightDate"
+              :default-value="defaultValue"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              :disabled-date="disabledDate"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick">
+            </month-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import {
+  isDate,
+  modifyWithTimeString,
+  prevYear,
+  nextYear,
+  nextMonth
+} from 'element-ui/src/utils/date-util'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
+import Locale from 'element-ui/src/mixins/locale'
+import MonthTable from '../basic/month-table'
+import ElInput from 'element-ui/packages/input'
+import ElButton from 'element-ui/packages/button'
+
+const calcDefaultValue = (defaultValue) => {
+  if (Array.isArray(defaultValue)) {
+    return [new Date(defaultValue[0]), new Date(defaultValue[1])]
+  } else if (defaultValue) {
+    return [new Date(defaultValue), nextMonth(new Date(defaultValue))]
+  } else {
+    return [new Date(), nextMonth(new Date())]
+  }
+}
+export default {
+  mixins: [Locale],
+
+  directives: { Clickoutside },
+
+  computed: {
+    btnDisabled () {
+      return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]))
+    },
+
+    leftLabel () {
+      return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year')
+    },
+
+    rightLabel () {
+      return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year')
+    },
+
+    leftYear () {
+      return this.leftDate.getFullYear()
+    },
+
+    rightYear () {
+      return this.rightDate.getFullYear() === this.leftDate.getFullYear() ? this.leftDate.getFullYear() + 1 : this.rightDate.getFullYear()
+    },
+
+    enableYearArrow () {
+      return this.unlinkPanels && this.rightYear > this.leftYear + 1
+    }
+  },
+
+  data () {
+    return {
+      popperClass: '',
+      value: [],
+      defaultValue: null,
+      defaultTime: null,
+      minDate: '',
+      maxDate: '',
+      leftDate: new Date(),
+      rightDate: nextYear(new Date()),
+      rangeState: {
+        endDate: null,
+        selecting: false,
+        row: null,
+        column: null
+      },
+      shortcuts: '',
+      visible: '',
+      disabledDate: '',
+      format: '',
+      arrowControl: false,
+      unlinkPanels: false
+    }
+  },
+
+  watch: {
+    value (newVal) {
+      if (!newVal) {
+        this.minDate = null
+        this.maxDate = null
+      } else if (Array.isArray(newVal)) {
+        this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null
+        this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null
+        if (this.minDate) {
+          this.leftDate = this.minDate
+          if (this.unlinkPanels && this.maxDate) {
+            const minDateYear = this.minDate.getFullYear()
+            const maxDateYear = this.maxDate.getFullYear()
+            this.rightDate = minDateYear === maxDateYear
+              ? nextYear(this.maxDate)
+              : this.maxDate
+          } else {
+            this.rightDate = nextYear(this.leftDate)
+          }
+        } else {
+          this.leftDate = calcDefaultValue(this.defaultValue)[0]
+          this.rightDate = nextYear(this.leftDate)
+        }
+      }
+    },
+
+    defaultValue (val) {
+      if (!Array.isArray(this.value)) {
+        const [left, right] = calcDefaultValue(val)
+        this.leftDate = left
+        this.rightDate = val && val[1] && left.getFullYear() !== right.getFullYear() && this.unlinkPanels
+          ? right
+          : nextYear(this.leftDate)
+      }
+    }
+  },
+
+  methods: {
+    handleClear () {
+      this.minDate = null
+      this.maxDate = null
+      this.leftDate = calcDefaultValue(this.defaultValue)[0]
+      this.rightDate = nextYear(this.leftDate)
+      this.$emit('pick', null)
+    },
+
+    handleChangeRange (val) {
+      this.minDate = val.minDate
+      this.maxDate = val.maxDate
+      this.rangeState = val.rangeState
+    },
+
+    handleRangePick (val, close = true) {
+      const defaultTime = this.defaultTime || []
+      const minDate = modifyWithTimeString(val.minDate, defaultTime[0])
+      const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1])
+      if (this.maxDate === maxDate && this.minDate === minDate) {
+        return
+      }
+      this.onPick && this.onPick(val)
+      this.maxDate = maxDate
+      this.minDate = minDate
+
+      // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
+      setTimeout(() => {
+        this.maxDate = maxDate
+        this.minDate = minDate
+      }, 10)
+      if (!close) return
+      this.handleConfirm()
+    },
+
+    handleShortcutClick (shortcut) {
+      if (shortcut.onClick) {
+        shortcut.onClick(this)
+      }
+    },
+
+    // leftPrev*, rightNext* need to take care of `unlinkPanels`
+    leftPrevYear () {
+      this.leftDate = prevYear(this.leftDate)
+      if (!this.unlinkPanels) {
+        this.rightDate = prevYear(this.rightDate)
+      }
+    },
+
+    rightNextYear () {
+      if (!this.unlinkPanels) {
+        this.leftDate = nextYear(this.leftDate)
+      }
+      this.rightDate = nextYear(this.rightDate)
+    },
+
+    // leftNext*, rightPrev* are called when `unlinkPanels` is true
+    leftNextYear () {
+      this.leftDate = nextYear(this.leftDate)
+    },
+
+    rightPrevYear () {
+      this.rightDate = prevYear(this.rightDate)
+    },
+
+    handleConfirm (visible = false) {
+      if (this.isValidValue([this.minDate, this.maxDate])) {
+        this.$emit('pick', [this.minDate, this.maxDate], visible)
+      }
+    },
+
+    isValidValue (value) {
+      return Array.isArray(value) &&
+          value && value[0] && value[1] &&
+          isDate(value[0]) && isDate(value[1]) &&
+          value[0].getTime() <= value[1].getTime() && (
+        typeof this.disabledDate === 'function'
+          ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
+          : true
+      )
+    },
+
+    resetView () {
+      // NOTE: this is a hack to reset {min, max}Date on picker open.
+      // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
+      //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
+      this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null
+      this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null
+    }
+  },
+
+  components: { MonthTable, ElInput, ElButton }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue
new file mode 100644
index 000000000..7272937b1
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue
@@ -0,0 +1,247 @@
+<template>
+  <transition
+    name="el-zoom-in-top"
+    @after-leave="$emit('dodestroy')">
+    <div
+      v-show="visible"
+      class="el-time-range-picker el-picker-panel el-popper"
+      :class="popperClass">
+      <div class="el-time-range-picker__content">
+        <div class="el-time-range-picker__cell">
+          <div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div>
+          <div
+            :class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
+            class="el-time-range-picker__body el-time-panel__content">
+            <time-spinner
+              ref="minSpinner"
+              :show-seconds="showSeconds"
+              :am-pm-mode="amPmMode"
+              @change="handleMinChange"
+              :arrow-control="arrowControl"
+              @select-range="setMinSelectionRange"
+              :date="minDate">
+            </time-spinner>
+          </div>
+        </div>
+        <div class="el-time-range-picker__cell">
+          <div class="el-time-range-picker__header">{{ t('el.datepicker.endTime') }}</div>
+          <div
+            :class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
+            class="el-time-range-picker__body el-time-panel__content">
+            <time-spinner
+              ref="maxSpinner"
+              :show-seconds="showSeconds"
+              :am-pm-mode="amPmMode"
+              @change="handleMaxChange"
+              :arrow-control="arrowControl"
+              @select-range="setMaxSelectionRange"
+              :date="maxDate">
+            </time-spinner>
+          </div>
+        </div>
+      </div>
+      <div class="el-time-panel__footer">
+        <button
+          type="button"
+          class="el-time-panel__btn cancel"
+          @click="handleCancel()">{{ t('el.datepicker.cancel') }}</button>
+        <button
+          type="button"
+          class="el-time-panel__btn confirm"
+          @click="handleConfirm()"
+          :disabled="btnDisabled">{{ t('el.datepicker.confirm') }}</button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import {
+  parseDate,
+  limitTimeRange,
+  modifyDate,
+  clearMilliseconds,
+  timeWithinRange
+} from 'element-ui/src/utils/date-util'
+import Locale from 'element-ui/src/mixins/locale'
+import TimeSpinner from '../basic/time-spinner'
+
+const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss')
+const MAX_TIME = parseDate('23:59:59', 'HH:mm:ss')
+
+const minTimeOfDay = function (date) {
+  return modifyDate(MIN_TIME, date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+const maxTimeOfDay = function (date) {
+  return modifyDate(MAX_TIME, date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+// increase time by amount of milliseconds, but within the range of day
+const advanceTime = function (date, amount) {
+  return new Date(Math.min(date.getTime() + amount, maxTimeOfDay(date).getTime()))
+}
+
+export default {
+  mixins: [Locale],
+
+  components: { TimeSpinner },
+
+  computed: {
+    showSeconds () {
+      return (this.format || '').indexOf('ss') !== -1
+    },
+
+    offset () {
+      return this.showSeconds ? 11 : 8
+    },
+
+    spinner () {
+      return this.selectionRange[0] < this.offset ? this.$refs.minSpinner : this.$refs.maxSpinner
+    },
+
+    btnDisabled () {
+      return this.minDate.getTime() > this.maxDate.getTime()
+    },
+    amPmMode () {
+      if ((this.format || '').indexOf('A') !== -1) return 'A'
+      if ((this.format || '').indexOf('a') !== -1) return 'a'
+      return ''
+    }
+  },
+
+  data () {
+    return {
+      popperClass: '',
+      minDate: new Date(),
+      maxDate: new Date(),
+      value: [],
+      oldValue: [new Date(), new Date()],
+      defaultValue: null,
+      format: 'HH:mm:ss',
+      visible: false,
+      selectionRange: [0, 2],
+      arrowControl: false
+    }
+  },
+
+  watch: {
+    value (value) {
+      if (Array.isArray(value)) {
+        this.minDate = new Date(value[0])
+        this.maxDate = new Date(value[1])
+      } else {
+        if (Array.isArray(this.defaultValue)) {
+          this.minDate = new Date(this.defaultValue[0])
+          this.maxDate = new Date(this.defaultValue[1])
+        } else if (this.defaultValue) {
+          this.minDate = new Date(this.defaultValue)
+          this.maxDate = advanceTime(new Date(this.defaultValue), 60 * 60 * 1000)
+        } else {
+          this.minDate = new Date()
+          this.maxDate = advanceTime(new Date(), 60 * 60 * 1000)
+        }
+      }
+    },
+
+    visible (val) {
+      if (val) {
+        this.oldValue = this.value
+        this.$nextTick(() => this.$refs.minSpinner.emitSelectRange('hours'))
+      }
+    }
+  },
+
+  methods: {
+    handleClear () {
+      this.$emit('pick', null)
+    },
+
+    handleCancel () {
+      this.$emit('pick', this.oldValue)
+    },
+
+    handleMinChange (date) {
+      this.minDate = clearMilliseconds(date)
+      this.handleChange()
+    },
+
+    handleMaxChange (date) {
+      this.maxDate = clearMilliseconds(date)
+      this.handleChange()
+    },
+
+    handleChange () {
+      if (this.isValidValue([this.minDate, this.maxDate])) {
+        this.$refs.minSpinner.selectableRange = [[minTimeOfDay(this.minDate), this.maxDate]]
+        this.$refs.maxSpinner.selectableRange = [[this.minDate, maxTimeOfDay(this.maxDate)]]
+        this.$emit('pick', [this.minDate, this.maxDate], true)
+      }
+    },
+
+    setMinSelectionRange (start, end) {
+      this.$emit('select-range', start, end, 'min')
+      this.selectionRange = [start, end]
+    },
+
+    setMaxSelectionRange (start, end) {
+      this.$emit('select-range', start, end, 'max')
+      this.selectionRange = [start + this.offset, end + this.offset]
+    },
+
+    handleConfirm (visible = false) {
+      const minSelectableRange = this.$refs.minSpinner.selectableRange
+      const maxSelectableRange = this.$refs.maxSpinner.selectableRange
+
+      this.minDate = limitTimeRange(this.minDate, minSelectableRange, this.format)
+      this.maxDate = limitTimeRange(this.maxDate, maxSelectableRange, this.format)
+
+      this.$emit('pick', [this.minDate, this.maxDate], visible)
+    },
+
+    adjustSpinners () {
+      this.$refs.minSpinner.adjustSpinners()
+      this.$refs.maxSpinner.adjustSpinners()
+    },
+
+    changeSelectionRange (step) {
+      const list = this.showSeconds ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11]
+      const mapping = ['hours', 'minutes'].concat(this.showSeconds ? ['seconds'] : [])
+      const index = list.indexOf(this.selectionRange[0])
+      const next = (index + step + list.length) % list.length
+      const half = list.length / 2
+      if (next < half) {
+        this.$refs.minSpinner.emitSelectRange(mapping[next])
+      } else {
+        this.$refs.maxSpinner.emitSelectRange(mapping[next - half])
+      }
+    },
+
+    isValidValue (date) {
+      return Array.isArray(date) &&
+          timeWithinRange(this.minDate, this.$refs.minSpinner.selectableRange) &&
+          timeWithinRange(this.maxDate, this.$refs.maxSpinner.selectableRange)
+    },
+
+    handleKeydown (event) {
+      const keyCode = event.keyCode
+      const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 }
+
+      // Left or Right
+      if (keyCode === 37 || keyCode === 39) {
+        const step = mapping[keyCode]
+        this.changeSelectionRange(step)
+        event.preventDefault()
+        return
+      }
+
+      // Up or Down
+      if (keyCode === 38 || keyCode === 40) {
+        const step = mapping[keyCode]
+        this.spinner.scrollDown(step)
+        event.preventDefault()
+      }
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/time-select.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/time-select.vue
new file mode 100644
index 000000000..b8e7b4a09
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/time-select.vue
@@ -0,0 +1,177 @@
+<template>
+  <transition name="el-zoom-in-top" @before-enter="handleMenuEnter" @after-leave="$emit('dodestroy')">
+    <div
+      ref="popper"
+      v-show="visible"
+      :style="{ width: width + 'px' }"
+      :class="popperClass"
+      class="el-picker-panel time-select el-popper">
+      <el-scrollbar noresize wrap-class="el-picker-panel__content">
+        <div class="time-select-item"
+          v-for="item in items"
+          :class="{ selected: value === item.value, disabled: item.disabled, default: item.value === defaultValue }"
+          :disabled="item.disabled"
+          :key="item.value"
+          @click="handleClick(item)">{{ item.value }}</div>
+      </el-scrollbar>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import ElScrollbar from 'element-ui/packages/scrollbar'
+import scrollIntoView from 'element-ui/src/utils/scroll-into-view'
+
+const parseTime = function (time) {
+  const values = (time || '').split(':')
+  if (values.length >= 2) {
+    const hours = parseInt(values[0], 10)
+    const minutes = parseInt(values[1], 10)
+
+    return {
+      hours,
+      minutes
+    }
+  }
+  /* istanbul ignore next */
+  return null
+}
+
+const compareTime = function (time1, time2) {
+  const value1 = parseTime(time1)
+  const value2 = parseTime(time2)
+
+  const minutes1 = value1.minutes + value1.hours * 60
+  const minutes2 = value2.minutes + value2.hours * 60
+
+  if (minutes1 === minutes2) {
+    return 0
+  }
+
+  return minutes1 > minutes2 ? 1 : -1
+}
+
+const formatTime = function (time) {
+  return (time.hours < 10 ? '0' + time.hours : time.hours) + ':' + (time.minutes < 10 ? '0' + time.minutes : time.minutes)
+}
+
+const nextTime = function (time, step) {
+  const timeValue = parseTime(time)
+  const stepValue = parseTime(step)
+
+  const next = {
+    hours: timeValue.hours,
+    minutes: timeValue.minutes
+  }
+
+  next.minutes += stepValue.minutes
+  next.hours += stepValue.hours
+
+  next.hours += Math.floor(next.minutes / 60)
+  next.minutes = next.minutes % 60
+
+  return formatTime(next)
+}
+
+export default {
+  components: { ElScrollbar },
+
+  watch: {
+    value (val) {
+      if (!val) return
+      this.$nextTick(() => this.scrollToOption())
+    }
+  },
+
+  methods: {
+    handleClick (item) {
+      if (!item.disabled) {
+        this.$emit('pick', item.value)
+      }
+    },
+
+    handleClear () {
+      this.$emit('pick', null)
+    },
+
+    scrollToOption (selector = '.selected') {
+      const menu = this.$refs.popper.querySelector('.el-picker-panel__content')
+      scrollIntoView(menu, menu.querySelector(selector))
+    },
+
+    handleMenuEnter () {
+      const selected = this.items.map(item => item.value).indexOf(this.value) !== -1
+      const hasDefault = this.items.map(item => item.value).indexOf(this.defaultValue) !== -1
+      const option = (selected && '.selected') || (hasDefault && '.default') || '.time-select-item:not(.disabled)'
+      this.$nextTick(() => this.scrollToOption(option))
+    },
+
+    scrollDown (step) {
+      const items = this.items
+      const length = items.length
+      let total = items.length
+      let index = items.map(item => item.value).indexOf(this.value)
+      while (total--) {
+        index = (index + step + length) % length
+        if (!items[index].disabled) {
+          this.$emit('pick', items[index].value, true)
+          return
+        }
+      }
+    },
+
+    isValidValue (date) {
+      return this.items.filter(item => !item.disabled).map(item => item.value).indexOf(date) !== -1
+    },
+
+    handleKeydown (event) {
+      const keyCode = event.keyCode
+      if (keyCode === 38 || keyCode === 40) {
+        const mapping = { 40: 1, 38: -1 }
+        const offset = mapping[keyCode.toString()]
+        this.scrollDown(offset)
+        event.stopPropagation()
+      }
+    }
+  },
+
+  data () {
+    return {
+      popperClass: '',
+      start: '09:00',
+      end: '18:00',
+      step: '00:30',
+      value: '',
+      defaultValue: '',
+      visible: false,
+      minTime: '',
+      maxTime: '',
+      width: 0
+    }
+  },
+
+  computed: {
+    items () {
+      const start = this.start
+      const end = this.end
+      const step = this.step
+
+      const result = []
+
+      if (start && end && step) {
+        let current = start
+        while (compareTime(current, end) <= 0) {
+          result.push({
+            value: current,
+            disabled: compareTime(current, this.minTime || '-1:-1') <= 0 ||
+                compareTime(current, this.maxTime || '100:100') >= 0
+          })
+          current = nextTime(current, step)
+        }
+      }
+
+      return result
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue
new file mode 100644
index 000000000..cbff80b50
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue
@@ -0,0 +1,185 @@
+<template>
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
+    <div
+      v-show="visible"
+      class="el-time-panel el-popper"
+      :class="popperClass">
+      <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
+        <time-spinner
+          ref="spinner"
+          @change="handleChange"
+          :arrow-control="useArrow"
+          :show-seconds="showSeconds"
+          :am-pm-mode="amPmMode"
+          @select-range="setSelectionRange"
+          :date="date">
+        </time-spinner>
+      </div>
+      <div class="el-time-panel__footer">
+        <button
+          type="button"
+          class="el-time-panel__btn cancel"
+          @click="handleCancel">{{ t('el.datepicker.cancel') }}</button>
+        <button
+          type="button"
+          class="el-time-panel__btn"
+          :class="{confirm: !disabled}"
+          @click="handleConfirm()">{{ t('el.datepicker.confirm') }}</button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import { limitTimeRange, isDate, clearMilliseconds, timeWithinRange } from 'element-ui/src/utils/date-util'
+import Locale from 'element-ui/src/mixins/locale'
+import TimeSpinner from '../basic/time-spinner'
+
+export default {
+  mixins: [Locale],
+
+  components: {
+    TimeSpinner
+  },
+
+  props: {
+    visible: Boolean,
+    timeArrowControl: Boolean
+  },
+
+  watch: {
+    visible (val) {
+      if (val) {
+        this.oldValue = this.value
+        this.$nextTick(() => this.$refs.spinner.emitSelectRange('hours'))
+      } else {
+        this.needInitAdjust = true
+      }
+    },
+
+    value (newVal) {
+      let date
+      if (newVal instanceof Date) {
+        date = limitTimeRange(newVal, this.selectableRange, this.format)
+      } else if (!newVal) {
+        date = this.defaultValue ? new Date(this.defaultValue) : new Date()
+      }
+
+      this.date = date
+      if (this.visible && this.needInitAdjust) {
+        this.$nextTick(_ => this.adjustSpinners())
+        this.needInitAdjust = false
+      }
+    },
+
+    selectableRange (val) {
+      this.$refs.spinner.selectableRange = val
+    },
+
+    defaultValue (val) {
+      if (!isDate(this.value)) {
+        this.date = val ? new Date(val) : new Date()
+      }
+    }
+  },
+
+  data () {
+    return {
+      popperClass: '',
+      format: 'HH:mm:ss',
+      value: '',
+      defaultValue: null,
+      date: new Date(),
+      oldValue: new Date(),
+      selectableRange: [],
+      selectionRange: [0, 2],
+      disabled: false,
+      arrowControl: false,
+      needInitAdjust: true
+    }
+  },
+
+  computed: {
+    showSeconds () {
+      return (this.format || '').indexOf('ss') !== -1
+    },
+    useArrow () {
+      return this.arrowControl || this.timeArrowControl || false
+    },
+    amPmMode () {
+      if ((this.format || '').indexOf('A') !== -1) return 'A'
+      if ((this.format || '').indexOf('a') !== -1) return 'a'
+      return ''
+    }
+  },
+
+  methods: {
+    handleCancel () {
+      this.$emit('pick', this.oldValue, false)
+    },
+
+    handleChange (date) {
+      // this.visible avoids edge cases, when use scrolls during panel closing animation
+      if (this.visible) {
+        this.date = clearMilliseconds(date)
+        // if date is out of range, do not emit
+        if (this.isValidValue(this.date)) {
+          this.$emit('pick', this.date, true)
+        }
+      }
+    },
+
+    setSelectionRange (start, end) {
+      this.$emit('select-range', start, end)
+      this.selectionRange = [start, end]
+    },
+
+    handleConfirm (visible = false, first) {
+      if (first) return
+      const date = clearMilliseconds(limitTimeRange(this.date, this.selectableRange, this.format))
+      this.$emit('pick', date, visible, first)
+    },
+
+    handleKeydown (event) {
+      const keyCode = event.keyCode
+      const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 }
+
+      // Left or Right
+      if (keyCode === 37 || keyCode === 39) {
+        const step = mapping[keyCode]
+        this.changeSelectionRange(step)
+        event.preventDefault()
+        return
+      }
+
+      // Up or Down
+      if (keyCode === 38 || keyCode === 40) {
+        const step = mapping[keyCode]
+        this.$refs.spinner.scrollDown(step)
+        event.preventDefault()
+      }
+    },
+
+    isValidValue (date) {
+      return timeWithinRange(date, this.selectableRange, this.format)
+    },
+
+    adjustSpinners () {
+      return this.$refs.spinner.adjustSpinners()
+    },
+
+    changeSelectionRange (step) {
+      const list = [0, 3].concat(this.showSeconds ? [6] : [])
+      const mapping = ['hours', 'minutes'].concat(this.showSeconds ? ['seconds'] : [])
+      const index = list.indexOf(this.selectionRange[0])
+      const next = (index + step + list.length) % list.length
+      this.$refs.spinner.emitSelectRange(mapping[next])
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => this.handleConfirm(true, true))
+    this.$emit('mounted')
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/picker.vue b/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
new file mode 100644
index 000000000..56fc84eb9
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
@@ -0,0 +1,929 @@
+<template>
+  <el-input
+    class="el-date-editor"
+    :class="'el-date-editor--' + type"
+    :readonly="!editable || readonly || type === 'dates' || type === 'week'"
+    :disabled="pickerDisabled"
+    :size="pickerSize"
+    :name="name"
+    v-bind="firstInputId"
+    v-if="!ranged"
+    v-clickoutside="handleClose"
+    :placeholder="placeholder"
+    @focus="handleFocus"
+    @keydown.native="handleKeydown"
+    :value="displayValue"
+    @input="value => userInput = value"
+    @change="handleChange"
+    @mouseenter.native="handleMouseEnter"
+    @mouseleave.native="showClose = false"
+    :validateEvent="false"
+    ref="reference">
+    <i slot="prefix"
+      class="el-input__icon"
+      :class="triggerClass"
+      @click="handleFocus">
+    </i>
+    <i slot="suffix"
+      class="el-input__icon"
+      @click="handleClickIcon"
+      :class="[showClose ? '' + clearIcon : '']"
+      v-if="haveTrigger">
+    </i>
+  </el-input>
+  <div
+    class="el-date-editor el-range-editor el-input__inner"
+    :class="[
+      'el-date-editor--' + type,
+      pickerSize ? `el-range-editor--${ pickerSize }` : '',
+      pickerDisabled ? 'is-disabled' : '',
+      pickerVisible ? 'is-active' : ''
+    ]"
+    @click="handleRangeClick"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="showClose = false"
+    @keydown="handleKeydown"
+    ref="reference"
+    v-clickoutside="handleClose"
+    v-else>
+    <i :class="['el-input__icon', 'el-range__icon', triggerClass]"></i>
+    <input
+      autocomplete="off"
+      :placeholder="startPlaceholder"
+      :value="displayValue && displayValue[0]"
+      :disabled="pickerDisabled"
+      v-bind="firstInputId"
+      :readonly="!editable || readonly"
+      :name="name && name[0]"
+      @input="handleStartInput"
+      @change="handleStartChange"
+      @focus="handleFocus"
+      class="el-range-input">
+    <slot name="range-separator">
+      <span class="el-range-separator">{{ rangeSeparator }}</span>
+    </slot>
+    <input
+      autocomplete="off"
+      :placeholder="endPlaceholder"
+      :value="displayValue && displayValue[1]"
+      :disabled="pickerDisabled"
+      v-bind="secondInputId"
+      :readonly="!editable || readonly"
+      :name="name && name[1]"
+      @input="handleEndInput"
+      @change="handleEndChange"
+      @focus="handleFocus"
+      class="el-range-input">
+    <i
+      @click="handleClickIcon"
+      v-if="haveTrigger"
+      :class="[showClose ? '' + clearIcon : '']"
+      class="el-input__icon el-range__close-icon">
+    </i>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
+import { formatDate, parseDate, isDateObject, getWeekNumber } from 'element-ui/src/utils/date-util'
+import Popper from 'element-ui/src/utils/vue-popper'
+import Emitter from 'element-ui/src/mixins/emitter'
+import ElInput from 'element-ui/packages/input'
+import merge from 'element-ui/src/utils/merge'
+
+const NewPopper = {
+  props: {
+    appendToBody: Popper.props.appendToBody,
+    offset: Popper.props.offset,
+    boundariesPadding: Popper.props.boundariesPadding,
+    arrowOffset: Popper.props.arrowOffset
+  },
+  methods: Popper.methods,
+  data () {
+    return merge({ visibleArrow: true }, Popper.data)
+  },
+  beforeDestroy: Popper.beforeDestroy
+}
+
+const DEFAULT_FORMATS = {
+  date: 'yyyy-MM-dd',
+  month: 'yyyy-MM',
+  datetime: 'yyyy-MM-dd HH:mm:ss',
+  time: 'HH:mm:ss',
+  week: 'yyyywWW',
+  timerange: 'HH:mm:ss',
+  daterange: 'yyyy-MM-dd',
+  monthrange: 'yyyy-MM',
+  datetimerange: 'yyyy-MM-dd HH:mm:ss',
+  year: 'yyyy'
+}
+const HAVE_TRIGGER_TYPES = [
+  'date',
+  'datetime',
+  'time',
+  'time-select',
+  'week',
+  'month',
+  'year',
+  'daterange',
+  'monthrange',
+  'timerange',
+  'datetimerange',
+  'dates'
+]
+const DATE_FORMATTER = function (value, format) {
+  if (format === 'timestamp') return value.getTime()
+  return formatDate(value, format)
+}
+const DATE_PARSER = function (text, format) {
+  if (format === 'timestamp') return new Date(Number(text))
+  return parseDate(text, format)
+}
+const RANGE_FORMATTER = function (value, format) {
+  if (Array.isArray(value) && value.length === 2) {
+    const start = value[0]
+    const end = value[1]
+
+    if (start && end) {
+      return [DATE_FORMATTER(start, format), DATE_FORMATTER(end, format)]
+    }
+  }
+  return ''
+}
+const RANGE_PARSER = function (array, format, separator) {
+  if (!Array.isArray(array)) {
+    array = array.split(separator)
+  }
+  if (array.length === 2) {
+    const range1 = array[0]
+    const range2 = array[1]
+
+    return [DATE_PARSER(range1, format), DATE_PARSER(range2, format)]
+  }
+  return []
+}
+const TYPE_VALUE_RESOLVER_MAP = {
+  default: {
+    formatter (value) {
+      if (!value) return ''
+      return '' + value
+    },
+    parser (text) {
+      if (text === undefined || text === '') return null
+      return text
+    }
+  },
+  week: {
+    formatter (value, format) {
+      const week = getWeekNumber(value)
+      const month = value.getMonth()
+      const trueDate = new Date(value)
+      if (week === 1 && month === 11) {
+        trueDate.setHours(0, 0, 0, 0)
+        trueDate.setDate(trueDate.getDate() + 3 - (trueDate.getDay() + 6) % 7)
+      }
+      let date = formatDate(trueDate, format)
+
+      date = /WW/.test(date)
+        ? date.replace(/WW/, week < 10 ? '0' + week : week)
+        : date.replace(/W/, week)
+      return date
+    },
+    parser (text, format) {
+      // parse as if a normal date
+      return TYPE_VALUE_RESOLVER_MAP.date.parser(text, format)
+    }
+  },
+  date: {
+    formatter: DATE_FORMATTER,
+    parser: DATE_PARSER
+  },
+  datetime: {
+    formatter: DATE_FORMATTER,
+    parser: DATE_PARSER
+  },
+  daterange: {
+    formatter: RANGE_FORMATTER,
+    parser: RANGE_PARSER
+  },
+  monthrange: {
+    formatter: RANGE_FORMATTER,
+    parser: RANGE_PARSER
+  },
+  datetimerange: {
+    formatter: RANGE_FORMATTER,
+    parser: RANGE_PARSER
+  },
+  timerange: {
+    formatter: RANGE_FORMATTER,
+    parser: RANGE_PARSER
+  },
+  time: {
+    formatter: DATE_FORMATTER,
+    parser: DATE_PARSER
+  },
+  month: {
+    formatter: DATE_FORMATTER,
+    parser: DATE_PARSER
+  },
+  year: {
+    formatter: DATE_FORMATTER,
+    parser: DATE_PARSER
+  },
+  number: {
+    formatter (value) {
+      if (!value) return ''
+      return '' + value
+    },
+    parser (text) {
+      const result = Number(text)
+
+      if (!isNaN(text)) {
+        return result
+      } else {
+        return null
+      }
+    }
+  },
+  dates: {
+    formatter (value, format) {
+      return value.map(date => DATE_FORMATTER(date, format))
+    },
+    parser (value, format) {
+      return (typeof value === 'string' ? value.split(', ') : value)
+        .map(date => date instanceof Date ? date : DATE_PARSER(date, format))
+    }
+  }
+}
+const PLACEMENT_MAP = {
+  left: 'bottom-start',
+  center: 'bottom',
+  right: 'bottom-end'
+}
+
+const parseAsFormatAndType = (value, customFormat, type, rangeSeparator = '-') => {
+  if (!value) return null
+  const parser = (
+    TYPE_VALUE_RESOLVER_MAP[type] ||
+    TYPE_VALUE_RESOLVER_MAP.default
+  ).parser
+  const format = customFormat || DEFAULT_FORMATS[type]
+  return parser(value, format, rangeSeparator)
+}
+
+const formatAsFormatAndType = (value, customFormat, type) => {
+  if (!value) return null
+  const formatter = (
+    TYPE_VALUE_RESOLVER_MAP[type] ||
+    TYPE_VALUE_RESOLVER_MAP.default
+  ).formatter
+  const format = customFormat || DEFAULT_FORMATS[type]
+  return formatter(value, format)
+}
+
+/*
+ * Considers:
+ *   1. Date object
+ *   2. date string
+ *   3. array of 1 or 2
+ */
+const valueEquals = function (a, b) {
+  // considers Date object and string
+  const dateEquals = function (a, b) {
+    const aIsDate = a instanceof Date
+    const bIsDate = b instanceof Date
+    if (aIsDate && bIsDate) {
+      return a.getTime() === b.getTime()
+    }
+    if (!aIsDate && !bIsDate) {
+      return a === b
+    }
+    return false
+  }
+
+  const aIsArray = a instanceof Array
+  const bIsArray = b instanceof Array
+  if (aIsArray && bIsArray) {
+    if (a.length !== b.length) {
+      return false
+    }
+    return a.every((item, index) => dateEquals(item, b[index]))
+  }
+  if (!aIsArray && !bIsArray) {
+    return dateEquals(a, b)
+  }
+  return false
+}
+
+const isString = function (val) {
+  return typeof val === 'string' || val instanceof String
+}
+
+const validator = function (val) {
+  // either: String, Array of String, null / undefined
+  return (
+    val === null ||
+    val === undefined ||
+    isString(val) ||
+    (Array.isArray(val) && val.length === 2 && val.every(isString))
+  )
+}
+
+export default {
+  mixins: [Emitter, NewPopper],
+
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
+  props: {
+    size: String,
+    format: String,
+    valueFormat: String,
+    readonly: Boolean,
+    placeholder: String,
+    startPlaceholder: String,
+    endPlaceholder: String,
+    prefixIcon: String,
+    clearIcon: {
+      type: String,
+      default: 'el-icon-circle-close'
+    },
+    name: {
+      default: '',
+      validator
+    },
+    disabled: Boolean,
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    id: {
+      default: '',
+      validator
+    },
+    popperClass: String,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    align: {
+      type: String,
+      default: 'left'
+    },
+    value: {},
+    defaultValue: {},
+    defaultTime: {},
+    rangeSeparator: {
+      default: '-'
+    },
+    pickerOptions: {},
+    unlinkPanels: Boolean,
+    validateEvent: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  components: { ElInput },
+
+  directives: { Clickoutside },
+
+  data () {
+    return {
+      pickerVisible: false,
+      showClose: false,
+      userInput: null,
+      valueOnOpen: null, // value when picker opens, used to determine whether to emit change
+      unwatchPickerOptions: null
+    }
+  },
+
+  watch: {
+    pickerVisible (val) {
+      if (this.readonly || this.pickerDisabled) return
+      if (val) {
+        this.showPicker()
+        this.valueOnOpen = Array.isArray(this.value) ? [...this.value] : this.value
+      } else {
+        this.hidePicker()
+        this.emitChange(this.value)
+        this.userInput = null
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.blur')
+        }
+        this.$emit('blur', this)
+        this.blur()
+      }
+    },
+    parsedValue: {
+      immediate: true,
+      handler (val) {
+        if (this.picker) {
+          this.picker.value = val
+        }
+      }
+    },
+    defaultValue (val) {
+      // NOTE: should eventually move to jsx style picker + panel ?
+      if (this.picker) {
+        this.picker.defaultValue = val
+      }
+    },
+    value (val, oldVal) {
+      if (!valueEquals(val, oldVal) && !this.pickerVisible && this.validateEvent) {
+        this.dispatch('ElFormItem', 'el.form.change', val)
+      }
+    }
+  },
+
+  computed: {
+    ranged () {
+      return this.type.indexOf('range') > -1
+    },
+
+    reference () {
+      const reference = this.$refs.reference
+      return reference.$el || reference
+    },
+
+    refInput () {
+      if (this.reference) {
+        return [].slice.call(this.reference.querySelectorAll('input'))
+      }
+      return []
+    },
+
+    valueIsEmpty () {
+      const val = this.value
+      if (Array.isArray(val)) {
+        for (let i = 0, len = val.length; i < len; i++) {
+          if (val[i]) {
+            return false
+          }
+        }
+      } else {
+        if (val) {
+          return false
+        }
+      }
+      return true
+    },
+
+    triggerClass () {
+      return this.prefixIcon || (this.type.indexOf('time') !== -1 ? 'el-icon-time' : 'el-icon-date')
+    },
+
+    selectionMode () {
+      if (this.type === 'week') {
+        return 'week'
+      } else if (this.type === 'month') {
+        return 'month'
+      } else if (this.type === 'year') {
+        return 'year'
+      } else if (this.type === 'dates') {
+        return 'dates'
+      }
+
+      return 'day'
+    },
+
+    haveTrigger () {
+      if (typeof this.showTrigger !== 'undefined') {
+        return this.showTrigger
+      }
+      return HAVE_TRIGGER_TYPES.indexOf(this.type) !== -1
+    },
+
+    displayValue () {
+      const formattedValue = formatAsFormatAndType(this.parsedValue, this.format, this.type, this.rangeSeparator)
+      if (Array.isArray(this.userInput)) {
+        return [
+          this.userInput[0] || (formattedValue && formattedValue[0]) || '',
+          this.userInput[1] || (formattedValue && formattedValue[1]) || ''
+        ]
+      } else if (this.userInput !== null) {
+        return this.userInput
+      } else if (formattedValue) {
+        return this.type === 'dates'
+          ? formattedValue.join(', ')
+          : formattedValue
+      } else {
+        return ''
+      }
+    },
+
+    parsedValue () {
+      if (!this.value) return this.value // component value is not set
+      if (this.type === 'time-select') return this.value // time-select does not require parsing, this might change in next major version
+
+      const valueIsDateObject = isDateObject(this.value) || (Array.isArray(this.value) && this.value.every(isDateObject))
+      if (valueIsDateObject) {
+        return this.value
+      }
+
+      if (this.valueFormat) {
+        return parseAsFormatAndType(this.value, this.valueFormat, this.type, this.rangeSeparator) || this.value
+      }
+
+      // NOTE: deal with common but incorrect usage, should remove in next major version
+      // user might provide string / timestamp without value-format, coerce them into date (or array of date)
+      return Array.isArray(this.value) ? this.value.map(val => new Date(val)) : new Date(this.value)
+    },
+
+    _elFormItemSize () {
+      return (this.elFormItem || {}).elFormItemSize
+    },
+
+    pickerSize () {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
+    },
+
+    pickerDisabled () {
+      return this.disabled || (this.elForm || {}).disabled
+    },
+
+    firstInputId () {
+      const obj = {}
+      let id
+      if (this.ranged) {
+        id = this.id && this.id[0]
+      } else {
+        id = this.id
+      }
+      if (id) obj.id = id
+      return obj
+    },
+
+    secondInputId () {
+      const obj = {}
+      let id
+      if (this.ranged) {
+        id = this.id && this.id[1]
+      }
+      if (id) obj.id = id
+      return obj
+    }
+  },
+
+  created () {
+    // vue-popper
+    this.popperOptions = {
+      boundariesPadding: 0,
+      gpuAcceleration: false
+    }
+    this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left
+
+    this.$on('fieldReset', this.handleFieldReset)
+  },
+
+  methods: {
+    focus () {
+      if (!this.ranged) {
+        this.$refs.reference.focus()
+      } else {
+        this.handleFocus()
+      }
+    },
+
+    blur () {
+      this.refInput.forEach(input => input.blur())
+    },
+
+    // {parse, formatTo} Value deals maps component value with internal Date
+    parseValue (value) {
+      const isParsed = isDateObject(value) || (Array.isArray(value) && value.every(isDateObject))
+      if (this.valueFormat && !isParsed) {
+        return parseAsFormatAndType(value, this.valueFormat, this.type, this.rangeSeparator) || value
+      } else {
+        return value
+      }
+    },
+
+    formatToValue (date) {
+      const isFormattable = isDateObject(date) || (Array.isArray(date) && date.every(isDateObject))
+      if (this.valueFormat && isFormattable) {
+        return formatAsFormatAndType(date, this.valueFormat, this.type, this.rangeSeparator)
+      } else {
+        return date
+      }
+    },
+
+    // {parse, formatTo} String deals with user input
+    parseString (value) {
+      const type = Array.isArray(value) ? this.type : this.type.replace('range', '')
+      return parseAsFormatAndType(value, this.format, type)
+    },
+
+    formatToString (value) {
+      const type = Array.isArray(value) ? this.type : this.type.replace('range', '')
+      return formatAsFormatAndType(value, this.format, type)
+    },
+
+    handleMouseEnter () {
+      if (this.readonly || this.pickerDisabled) return
+      if (!this.valueIsEmpty && this.clearable) {
+        this.showClose = true
+      }
+    },
+
+    handleChange () {
+      if (this.userInput) {
+        const value = this.parseString(this.displayValue)
+        if (value) {
+          this.picker.value = value
+          if (this.isValidValue(value)) {
+            this.emitInput(value)
+            this.userInput = null
+          }
+        }
+      }
+      if (this.userInput === '') {
+        this.emitInput(null)
+        this.emitChange(null)
+        this.userInput = null
+      }
+    },
+
+    handleStartInput (event) {
+      if (this.userInput) {
+        this.userInput = [event.target.value, this.userInput[1]]
+      } else {
+        this.userInput = [event.target.value, null]
+      }
+    },
+
+    handleEndInput (event) {
+      if (this.userInput) {
+        this.userInput = [this.userInput[0], event.target.value]
+      } else {
+        this.userInput = [null, event.target.value]
+      }
+    },
+
+    handleStartChange (event) {
+      const value = this.parseString(this.userInput && this.userInput[0])
+      if (value) {
+        this.userInput = [this.formatToString(value), this.displayValue[1]]
+        const newValue = [value, this.picker.value && this.picker.value[1]]
+        this.picker.value = newValue
+        if (this.isValidValue(newValue)) {
+          this.emitInput(newValue)
+          this.userInput = null
+        }
+      }
+    },
+
+    handleEndChange (event) {
+      const value = this.parseString(this.userInput && this.userInput[1])
+      if (value) {
+        this.userInput = [this.displayValue[0], this.formatToString(value)]
+        const newValue = [this.picker.value && this.picker.value[0], value]
+        this.picker.value = newValue
+        if (this.isValidValue(newValue)) {
+          this.emitInput(newValue)
+          this.userInput = null
+        }
+      }
+    },
+
+    handleClickIcon (event) {
+      if (this.readonly || this.pickerDisabled) return
+      if (this.showClose) {
+        this.valueOnOpen = this.value
+        event.stopPropagation()
+        this.emitInput(null)
+        this.emitChange(null)
+        this.showClose = false
+        if (this.picker && typeof this.picker.handleClear === 'function') {
+          this.picker.handleClear()
+        }
+      } else {
+        this.pickerVisible = !this.pickerVisible
+      }
+    },
+
+    handleClose () {
+      if (!this.pickerVisible) return
+      this.pickerVisible = false
+
+      if (this.type === 'dates') {
+        // restore to former value
+        const oldValue = parseAsFormatAndType(this.valueOnOpen, this.valueFormat, this.type, this.rangeSeparator) || this.valueOnOpen
+        this.emitInput(oldValue)
+      }
+    },
+
+    handleFieldReset (initialValue) {
+      this.userInput = initialValue === '' ? null : initialValue
+    },
+
+    handleFocus () {
+      const type = this.type
+
+      if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {
+        this.pickerVisible = true
+      }
+      this.$emit('focus', this)
+    },
+
+    handleKeydown (event) {
+      const keyCode = event.keyCode
+
+      // ESC
+      if (keyCode === 27) {
+        this.pickerVisible = false
+        event.stopPropagation()
+        return
+      }
+
+      // Tab
+      if (keyCode === 9) {
+        if (!this.ranged) {
+          this.handleChange()
+          this.pickerVisible = this.picker.visible = false
+          this.blur()
+          event.stopPropagation()
+        } else {
+          // user may change focus between two input
+          setTimeout(() => {
+            if (this.refInput.indexOf(document.activeElement) === -1) {
+              this.pickerVisible = false
+              this.blur()
+              event.stopPropagation()
+            }
+          }, 0)
+        }
+        return
+      }
+
+      // Enter
+      if (keyCode === 13) {
+        if (this.userInput === '' || this.isValidValue(this.parseString(this.displayValue))) {
+          this.handleChange()
+          this.pickerVisible = this.picker.visible = false
+          this.blur()
+        }
+        event.stopPropagation()
+        return
+      }
+
+      // if user is typing, do not let picker handle key input
+      if (this.userInput) {
+        event.stopPropagation()
+        return
+      }
+
+      // delegate other keys to panel
+      if (this.picker && this.picker.handleKeydown) {
+        this.picker.handleKeydown(event)
+      }
+    },
+
+    handleRangeClick () {
+      const type = this.type
+
+      if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {
+        this.pickerVisible = true
+      }
+      this.$emit('focus', this)
+    },
+
+    hidePicker () {
+      if (this.picker) {
+        this.picker.resetView && this.picker.resetView()
+        this.pickerVisible = this.picker.visible = false
+        this.destroyPopper()
+      }
+    },
+
+    showPicker () {
+      if (this.$isServer) return
+      if (!this.picker) {
+        this.mountPicker()
+      }
+      this.pickerVisible = this.picker.visible = true
+
+      this.updatePopper()
+
+      this.picker.value = this.parsedValue
+      this.picker.resetView && this.picker.resetView()
+
+      this.$nextTick(() => {
+        this.picker.adjustSpinners && this.picker.adjustSpinners()
+      })
+    },
+
+    mountPicker () {
+      this.picker = new Vue(this.panel).$mount()
+      this.picker.defaultValue = this.defaultValue
+      this.picker.defaultTime = this.defaultTime
+      this.picker.popperClass = this.popperClass
+      this.popperElm = this.picker.$el
+      this.picker.width = this.reference.getBoundingClientRect().width
+      this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange'
+      this.picker.selectionMode = this.selectionMode
+      this.picker.unlinkPanels = this.unlinkPanels
+      this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false
+      this.$watch('format', (format) => {
+        this.picker.format = format
+      })
+
+      const updateOptions = () => {
+        const options = this.pickerOptions
+
+        if (options && options.selectableRange) {
+          let ranges = options.selectableRange
+          const parser = TYPE_VALUE_RESOLVER_MAP.datetimerange.parser
+          const format = DEFAULT_FORMATS.timerange
+
+          ranges = Array.isArray(ranges) ? ranges : [ranges]
+          this.picker.selectableRange = ranges.map(range => parser(range, format, this.rangeSeparator))
+        }
+
+        for (const option in options) {
+          if (options.hasOwnProperty(option) &&
+              // 忽略 time-picker 的该配置项
+              option !== 'selectableRange') {
+            this.picker[option] = options[option]
+          }
+        }
+
+        // main format must prevail over undocumented pickerOptions.format
+        if (this.format) {
+          this.picker.format = this.format
+        }
+      }
+      updateOptions()
+      this.unwatchPickerOptions = this.$watch('pickerOptions', () => updateOptions(), { deep: true })
+      this.$el.appendChild(this.picker.$el)
+      this.picker.resetView && this.picker.resetView()
+
+      this.picker.$on('dodestroy', this.doDestroy)
+      this.picker.$on('pick', (date = '', visible = false) => {
+        this.userInput = null
+        this.pickerVisible = this.picker.visible = visible
+        this.emitInput(date)
+        this.picker.resetView && this.picker.resetView()
+      })
+
+      this.picker.$on('select-range', (start, end, pos) => {
+        if (this.refInput.length === 0) return
+        if (!pos || pos === 'min') {
+          this.refInput[0].setSelectionRange(start, end)
+          this.refInput[0].focus()
+        } else if (pos === 'max') {
+          this.refInput[1].setSelectionRange(start, end)
+          this.refInput[1].focus()
+        }
+      })
+    },
+
+    unmountPicker () {
+      if (this.picker) {
+        this.picker.$destroy()
+        this.picker.$off()
+        if (typeof this.unwatchPickerOptions === 'function') {
+          this.unwatchPickerOptions()
+        }
+        this.picker.$el.parentNode.removeChild(this.picker.$el)
+      }
+    },
+
+    emitChange (val) {
+      // determine user real change only
+      if (!valueEquals(val, this.valueOnOpen)) {
+        this.$emit('change', val)
+        this.valueOnOpen = val
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.change', val)
+        }
+      }
+    },
+
+    emitInput (val) {
+      const formatted = this.formatToValue(val)
+      if (!valueEquals(this.value, formatted)) {
+        this.$emit('input', formatted)
+      }
+    },
+
+    isValidValue (value) {
+      if (!this.picker) {
+        this.mountPicker()
+      }
+      if (this.picker.isValidValue) {
+        return value && this.picker.isValidValue(value)
+      } else {
+        return true
+      }
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js b/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js
new file mode 100644
index 000000000..cf6ad5004
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js
@@ -0,0 +1,43 @@
+import Picker from '../picker'
+import DatePanel from '../panel/date'
+import DateRangePanel from '../panel/date-range'
+import MonthRangePanel from '../panel/month-range'
+
+const getPanel = function (type) {
+  if (type === 'daterange' || type === 'datetimerange') {
+    return DateRangePanel
+  } else if (type === 'monthrange') {
+    return MonthRangePanel
+  }
+  return DatePanel
+}
+
+export default {
+  mixins: [Picker],
+
+  name: 'ElDatePicker',
+
+  props: {
+    type: {
+      type: String,
+      default: 'date'
+    },
+    timeArrowControl: Boolean
+  },
+
+  watch: {
+    type (type) {
+      if (this.picker) {
+        this.unmountPicker()
+        this.panel = getPanel(type)
+        this.mountPicker()
+      } else {
+        this.panel = getPanel(type)
+      }
+    }
+  },
+
+  created () {
+    this.panel = getPanel(this.type)
+  }
+}
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/picker/time-picker.js b/nezha-fronted/src/components/common/myDatePicker/src/picker/time-picker.js
new file mode 100644
index 000000000..1d2dbc04f
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/picker/time-picker.js
@@ -0,0 +1,39 @@
+import Picker from '../picker'
+import TimePanel from '../panel/time'
+import TimeRangePanel from '../panel/time-range'
+
+export default {
+  mixins: [Picker],
+
+  name: 'ElTimePicker',
+
+  props: {
+    isRange: Boolean,
+    arrowControl: Boolean
+  },
+
+  data () {
+    return {
+      type: ''
+    }
+  },
+
+  watch: {
+    isRange (isRange) {
+      if (this.picker) {
+        this.unmountPicker()
+        this.type = isRange ? 'timerange' : 'time'
+        this.panel = isRange ? TimeRangePanel : TimePanel
+        this.mountPicker()
+      } else {
+        this.type = isRange ? 'timerange' : 'time'
+        this.panel = isRange ? TimeRangePanel : TimePanel
+      }
+    }
+  },
+
+  created () {
+    this.type = this.isRange ? 'timerange' : 'time'
+    this.panel = this.isRange ? TimeRangePanel : TimePanel
+  }
+}
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/picker/time-select.js b/nezha-fronted/src/components/common/myDatePicker/src/picker/time-select.js
new file mode 100644
index 000000000..a781d4742
--- /dev/null
+++ b/nezha-fronted/src/components/common/myDatePicker/src/picker/time-select.js
@@ -0,0 +1,21 @@
+import Picker from '../picker'
+import Panel from '../panel/time-select'
+
+export default {
+  mixins: [Picker],
+
+  name: 'ElTimeSelect',
+
+  componentName: 'ElTimeSelect',
+
+  props: {
+    type: {
+      type: String,
+      default: 'time-select'
+    }
+  },
+
+  beforeCreate () {
+    this.panel = Panel
+  }
+}
diff --git a/nezha-fronted/src/components/common/nzTransfer.vue b/nezha-fronted/src/components/common/nzTransfer.vue
index 7f3268b60..f580d3a1b 100644
--- a/nezha-fronted/src/components/common/nzTransfer.vue
+++ b/nezha-fronted/src/components/common/nzTransfer.vue
@@ -129,7 +129,7 @@ export default {
       type: Object
     },
     tableTitle: {
-      type: Array,
+      type: Array
     }
   },
   data () {
diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
new file mode 100644
index 000000000..88a7ad46b
--- /dev/null
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -0,0 +1,344 @@
+<template>
+  <el-dropdown :size="size">
+    <button id="more" :class="triggerButtonClass" title="more...">
+      <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
+    </button>
+    <el-dropdown-menu slot="dropdown">
+<!--      <el-dropdown-item>
+        <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>{{panelLock ? 'Locked' : 'Unlocked'}}</div>
+      </el-dropdown-item>-->
+      <slot name="before"></slot>
+      <el-dropdown-item v-if="importUrl">
+        <div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
+      </el-dropdown-item>
+      <el-dropdown-item v-if="exportUrl">
+        <div id="chart-export"@click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div>
+      </el-dropdown-item>
+      <slot name="after"></slot>
+<!--      <el-dropdown-item v-has="'panel_chart_add'">
+        <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add template</div>
+      </el-dropdown-item>-->
+    </el-dropdown-menu>
+
+    <el-dialog :close-on-click-modal="importBox.type!=3" :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
+      <div v-if="importBox.type == 1">
+        <div class="upload-body">
+          <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls"  action="" class="upload-demo" drag>
+            <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
+            <i class="nz-icon nz-icon-upload"></i>
+            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+            <!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+              <span class="top-tool-btn-txt" >{{$t('overall.upload')}}</span>
+            </button>-->
+          </el-upload>
+        </div>
+        <div slot="footer" class="footer">
+          <div class="el-message-box__btns" style="text-align: right;">
+            <button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
+              <span>{{$t('overall.template')}}</span>
+            </button>
+            <button  :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
+              <span>{{$t('overall.importExcel')}}</span>
+            </button>
+            <button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
+              <span>{{$t('overall.cancel')}}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-if="importBox.type == 2">
+        <div class="upload-body">
+          <button :id="id+'-xlsx-export-current'"  class="el-button el-button--default el-button--small" @click="exportCur">
+            <span>{{$t('overall.exportCur')}}</span>
+          </button>
+          <button  :id="id+'-xlsx-export-all'"  class="el-button el-button--default el-button--small" @click="exportAll">
+            <span>{{$t('overall.exportAll')}}</span>
+          </button>
+        </div>
+        <div slot="footer" class="footer">
+        </div>
+      </div>
+      <div v-if="importBox.type==3">
+        <div class="upload-body result-body">
+          <div>
+            <span class="result-title">{{$t('overall.result.total')}}:</span>
+            <span>{{importResult&&importResult.totalNum?importResult.totalNum:0}}</span>
+          </div>
+          <div>
+            <span class="result-title">{{$t('overall.result.failed')}}:</span>
+            <span>{{importResult&&importResult.failNum?importResult.failNum:0}}</span>
+            <span class="result-title">{{$t('overall.result.success')}}:</span>
+            <span>{{importResult&&importResult.successNum?importResult.successNum:0}}</span>
+          </div>
+          <div>
+            <div class="result-title">{{$t('overall.result.failedDetail')}}:</div>
+            <div v-if="importResult&&importResult.failDetail" class="result-detail">
+              <div style="height: 100%; overflow: auto;">
+                <!-- <ul>
+                   <li v-for="(item,index) in importResult.failDetail"><span>{{item.lineNo}}</span>:<span>{{item.errorMsg}}</span> </li>
+                 </ul>-->
+                <template v-for="(item, index) in importResult.failDetail">
+                  <div :key="index" class="import-result-block">
+                    <div class="import-result-item">
+                      <div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
+                      <div>{{item.errorMsg}}</div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div slot="footer" class="footer">
+          <div class="el-message-box__btns">
+            <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" @click="rollbackImport">
+              <span>{{$t('overall.rollbackImport')}}</span>
+            </button>
+            <!--<button  @click="closeDialog"  class="el-button el-button&#45;&#45;default el-button&#45;&#45;small">-->
+            <!--<span>{{$t('overall.cancel')}}</span>-->
+            <!--</button>-->
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </el-dropdown>
+</template>
+
+<script>
+import axios from 'axios'
+let timeout
+export default {
+  name: 'topToolMoreOptions',
+  props: {
+    size: {
+      type: String,
+      default: 'small'
+    },
+    exportUrl: { type: String, default: '' },
+    params: { type: Object },
+    exportFileName: { type: String },
+    importUrl: { type: String, default: '' }, // 为空时不显示导入按钮
+    link: { type: Object }, // 为空时不显示导出按钮
+    permissions: { type: Object },
+    showCur: { type: Boolean, default: true },
+    id: { type: String, default: 'export' },
+    triggerButtonClass: { // 触发下拉事件的按钮的class
+      type: String,
+      default: 'top-tool-btn'
+    }
+  },
+  data () {
+    return {
+      importBox: { show: false, title: this.$t('overall.importExcel'), type: 1 },
+      importFile: null,
+      importFileList: [],
+      importResult: null,
+      exportShow: false,
+      paramsType: ''
+    }
+  },
+  mounted () {
+    this.getParamsType()
+  },
+  methods: {
+    importChange (file, fileList) {
+      if (fileList.length > 0) {
+        this.importFileList = [fileList[fileList.length - 1]]
+      }
+      this.importFile = this.importFileList[0]
+      this.validateFile()
+    },
+    validateFile () {
+
+    },
+    rollbackImport () {
+      let url
+      if (this.importUrl.indexOf('asset') > -1) {
+        url = '/asset/cancelImport'
+      } else if (this.importUrl.indexOf('endpoint') > -1) {
+        url = '/monitor/endpoint/cancelImport'
+      } else if (this.importUrl.indexOf('rule') > -1) {
+        url = '/alert/rule/cancelImport'
+      } else if (this.importUrl.indexOf('panel') > -1) {
+        url = '/panel/cancelImport'
+      } else if (this.importUrl.indexOf('tmpl') > -1) {
+        url = '/expression/tmpl/cancelImport'
+      }
+      this.$delete(url + '?seq=' + this.importResult.seq).then(response => {
+        if (response.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.$emit('afterImport')
+        } else {
+          this.$message.error(response.msg)
+        }
+        this.closeDialog()
+      })
+    },
+    importExcel () {
+      if (this.importFile && this.importFile.raw) {
+        this.prevent_opt.import = true
+        const form = new FormData()
+        form.append('excelFile', this.importFile.raw)
+        if (this.paramsType) {
+          form.append('type', this.paramsType)
+          if (this.paramsType === 'asset' || this.paramsType === 'model') {
+            form.append('linkId', this.link ? this.link.id : '')
+          }
+        }
+        form.append('language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+        this.$post(this.importUrl, form, { 'Content-Type': 'multipart/form-data' }).then(response => {
+          if (response.code == 200 && response.msg == 'success') {
+            this.importResult = response.data
+            this.$emit('afterImport')
+            this.importBox.type = 3
+            this.importBox.width = '600px'
+          } else {
+            this.$message.error(response.msg)
+          }
+          this.prevent_opt.import = false
+        })
+      } else {
+        this.$message.error(this.$t('tip.noImportFile'))
+      }
+    },
+    exportMenuHandler (show) {
+      if (show) {
+        clearTimeout(timeout)
+        this.exportShow = true
+      } else {
+        timeout = setTimeout(() => {
+          this.exportShow = false
+        }, 700)
+      }
+    },
+    closeDialog () {
+      this.importBox.show = false
+      this.importResult = null
+      this.importFileList = []
+      this.importFile = null
+    },
+    downloadTemplate () {
+      const language = localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
+      const fileName = this.exportFileName + '-' + this.$t('overall.template') + '-' + this.getTimeString() + '.xlsx'
+
+      let url = null
+      if (this.importUrl.indexOf('asset') > -1) {
+        url = '/asset/template'
+      } else if (this.importUrl.indexOf('rule') > -1) {
+        url = '/alert/rule/template'
+      } else if (this.importUrl.indexOf('panel') > -1) {
+        url = '/panel/template'
+      } else if (this.importUrl.indexOf('endpoint') > -1) {
+        url = '/monitor/endpoint/template'
+      } else if (this.importUrl.indexOf('tmpl') > -1) {
+        url = '/expression/tmpl/template'
+      }
+
+      const param = { language: language }
+      if (!url) {
+        console.error('no interface support')
+      }
+      this.exportExcel(url, param, fileName)
+    },
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    exportCur () {
+      const params = Object.assign({}, this.params)
+      params.language = localStorage.getItem('nz-language') || 'en'
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.closeDialog()
+    },
+    exportAll () {
+      const params = JSON.parse(JSON.stringify(this.params))
+      params.pageSize = -1
+      if (this.importUrl.indexOf('panel') > -1) {
+        delete params.panelId
+      }
+      // if (this.importUrl.indexOf('endpoint') > -1){
+      //   delete params.moduleId
+      // }
+      params.language = localStorage.getItem('nz-language') || 'en'
+
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.closeDialog()
+    },
+    exportExcel (url, params, fileName) {
+      if (this.paramsType) {
+        params.type = this.paramsType
+      }
+      axios.get(url, { responseType: 'blob', params: params }).then(res => {
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
+      })
+    },
+    showImportBox (type) {
+      this.importBox.show = true
+      this.importBox.type = type
+      if (type == 2 && (!this.showCur)) {
+        this.exportCur()
+        return
+      }
+      if (type == 1) { // import
+        this.importBox.title = this.$t('overall.importExcel')
+        this.importBox.width = '600px'
+      } else if (type == 2) { // export
+        this.importBox.title = this.$t('overall.exportExcel')
+        this.importBox.width = '300px'
+      }
+    },
+    getTimeString () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum (num) {
+      return num > 9 ? num : '0' + num
+    },
+    getParamsType () {
+      const path = this.$route.path
+      switch (path) {
+        case '/panel': this.paramsType = 'dashboard'; break
+        case '/asset': this.paramsType = 'asset'; break
+        case '/model': this.paramsType = 'model'; break
+        default: this.paramsType = ''; break
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index d42943d93..8a67e37ca 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -1562,7 +1562,7 @@ export default {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           this.uploadPicShow = false
-          this.dealImg(`monitor/project/topo/icon/${res.data.id}`).then((data) => {
+          this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data) => {
             const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
             if (group) {
               group.children.push({
@@ -1618,7 +1618,7 @@ export default {
           res.data.list.forEach((item, index) => {
             item.imageName = item.name
             delete item.name
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
             imgArr.push({ ...item })
           })
           Promise.all(promiseArr).then((res2) => {
@@ -1662,7 +1662,7 @@ export default {
         const promiseArr = []
         imgidList.forEach((item, index) => {
           if (item.data.imageId) {
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
           } else {
             promiseArr.push('')
           }
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
index a06410478..0a39307ea 100644
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -330,1468 +330,1016 @@
 </template>
 
 <script>
-  import { Topology, registerNode } from '@topology/core'
-  import {
-    Tools,
-    canvasRegister,
-    imageTemp,
-    myShape,
-    myAnchors,
-    myIconRect,
-    myTextRect,
-    onChangeAnimate,
-    onChangeAnimateLine,
-    myCubec,
-    myCubeAnchors
-  } from './L5/services/canvas.js'
-  import { getTopology, setTopology } from '../js/common'
-  import CanvasProps from './L5/CanvasProps'
-  import topologyTopTool from './L5//topologyTopTool'
-  import popDataMain from './popData/Main'
-  import popDataInfo from './popData/Info'
-  import alertTable from './popData/alertTable'
-  import assetTable from './popData/assetTable'
-  import endpointTable from './popData/endpointTable'
-  import topoTooltip from './L5/topoTooltip'
-  import { getMetricTypeValue } from '../js/tools'
-  import bus from '../../../libs/bus'
-  import topologyPrev from './topologyPrev'
-  // 注册到画布
-  registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
-  registerNode('myCube', myCubec, myCubeAnchors, null, null)
+import { Topology, registerNode } from '@topology/core'
+import {
+  Tools,
+  canvasRegister,
+  imageTemp,
+  myShape,
+  myAnchors,
+  myIconRect,
+  myTextRect,
+  onChangeAnimate,
+  onChangeAnimateLine,
+  myCubec,
+  myCubeAnchors
+} from './L5/services/canvas.js'
+import { getTopology, setTopology } from '../js/common'
+import CanvasProps from './L5/CanvasProps'
+import topologyTopTool from './L5//topologyTopTool'
+import popDataMain from './popData/Main'
+import popDataInfo from './popData/Info'
+import alertTable from './popData/alertTable'
+import assetTable from './popData/assetTable'
+import endpointTable from './popData/endpointTable'
+import topoTooltip from './L5/topoTooltip'
+import { getMetricTypeValue } from '../js/tools'
+import bus from '../../../libs/bus'
+import topologyPrev from './topologyPrev'
+// 注册到画布
+registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
-  const canvasOptions = {
-    rotateCursor: '/img/rotate.cur',
-    translateKey: 'None',
-    disableEmptyLine: true,
-    autoExpandDistance: 0,
-    minScale: 0.01
-  }
-  export default {
-    name: 'topologyL5',
-    data () {
-      return {
-        objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
-        chartDataInfo: {},
-        topoPrevData: {}, // 预览数据
-        imgInit: false, // 判断图片是否加载完成
-        toolGroup: '基本形状',
-        editFlag: true,
-        tools: Tools,
-        props: {},
-        topologyLoading: false,
-        contextmenu: {
+const canvasOptions = {
+  rotateCursor: '/img/rotate.cur',
+  translateKey: 'None',
+  disableEmptyLine: true,
+  autoExpandDistance: 0,
+  minScale: 0.01
+}
+export default {
+  name: 'topologyL5',
+  data () {
+    return {
+      objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
+      chartDataInfo: {},
+      topoPrevData: {}, // 预览数据
+      imgInit: false, // 判断图片是否加载完成
+      toolGroup: '基本形状',
+      editFlag: true,
+      tools: Tools,
+      props: {},
+      topologyLoading: false,
+      contextmenu: {
+        left: null,
+        top: null,
+        bottom: null
+      },
+      filterTime: [
+        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
+        bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
+      ],
+      topologyInfo: {
+        fontSize: 14,
+        align: 'left',
+        fontColor: '#000000',
+        opacity: 1,
+        name: ''
+      },
+      saveData: {},
+      oldTopologyData: '',
+      redoIndex: 0,
+      dataLength: 0,
+      editTopologyFlag: false,
+      searchTime: bus.getTimezontDateRange(),
+      activeNames: [],
+      topologyIndex: 0,
+      iconArray: [],
+      imgageLoading: false,
+      toolShow: {
+        node: true,
+        attr: true,
+        topTool: true,
+        nodeCord: [0, 0],
+        attrCord: [0, 0],
+        height: 500
+      },
+      dragFlag: true,
+      modules: [],
+      allModules: [],
+      projectInfo: {
+        title: '',
+        id: '',
+        remark: '',
+        alertStat: [1, 2, 3],
+        moduleMum: 6,
+        loading: true
+      },
+      timer: null, // 处理project短时间呢频繁变更的定时器
+      timer2: null, // 处理平移画布显示iconState的定时器
+      timer3: null, // 处理tooltip的显示定时器
+      nodesArr: [],
+      notModuleIDArr: [],
+      popData: [
+        {
+          top: '-40px',
+          left: '-21px',
+          className: 'nz-icon-endpoint',
+          id: 'endpoint',
+          title: this.$t('project.topology.endpoint')
+        },
+        { top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('project.topology.asset') },
+        { top: '-4px', left: '40px', className: '', id: 'other', title: '' },
+        { top: '30px', left: '19px', className: '', id: 'other', title: '' },
+        { top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
+        { top: '-4px', left: '-40px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') }
+      ],
+      popDataShow: {
+        endpoint: false,
+        asset: false,
+        total: false,
+        other: false,
+        info: false,
+        alert: false,
+        main: false
+      },
+      moduleId: '',
+      tooltipPosition: {
+        top: 0,
+        left: 0,
+        show: false,
+        height: 400
+      },
+      chartData: {},
+      chartGetData: [],
+      penLineType: [
+        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
+        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
+        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
+        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+      ],
+      lineName: 'curve',
+      cachesIndex: 0,
+      projectInfoShow: false,
+      projectAlertShow: false,
+      previewShow: false,
+      penId: undefined,
+      penToolTipScale: 1,
+      oldScale: 1,
+      uploadPicShow: false,
+      uploadPic: {
+        name: '',
+        unit: ''
+      },
+      unitArr: [],
+      topoScreenState: '' // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
+    }
+  },
+  components: {
+    CanvasProps,
+    topologyTopTool,
+    popDataMain,
+    popDataInfo,
+    alertTable,
+    assetTable,
+    endpointTable,
+    topoTooltip,
+    topologyPrev
+  },
+  props: {
+    topologyIndexF: {
+      type: Number,
+      default: 0
+    },
+    obj: {},
+    showTopTools: {
+      type: Boolean,
+      default: true
+    },
+    fromOverView: {
+      type: Boolean,
+      default: false
+    },
+    fromPrev: {
+      type: Boolean,
+      default: false
+    },
+    topoPrevDataS: {
+
+    }
+  },
+  watch: {
+    topologyIndexF: {
+      immediate: true,
+      handler (n) {
+        this.topologyIndex = n
+      }
+    },
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        if (n && n.id) {
+          if (getTopology(this.topologyIndex)) {
+            getTopology(this.topologyIndex).destroy()
+            setTopology(this.topologyIndex, null)
+          }
+          if (!this.objChange) {
+            this.editTopologyFlag = false
+            this.topologyLoading = true
+            this.projectInfoShow = false
+            this.projectAlertShow = false
+            if (n.id) {
+              this.getProjectData(n)
+            }
+            this.topologyLoading = true
+            this.init()
+            this.timer = null
+            this.objChange = true
+          } else {
+            if (!this.timer) {
+              this.timer = setInterval(() => {
+                if (this.objChange) { return }
+                this.editTopologyFlag = false
+                this.topologyLoading = true
+                this.projectInfoShow = false
+                this.projectAlertShow = false
+                if (n.id) {
+                  this.getProjectData(n)
+                }
+                clearTimeout(this.timer)
+                this.timer = null
+                this.objChange = true
+                this.topologyLoading = true
+                this.init()
+              }, 100)
+            } else {
+              clearTimeout(this.timer)
+              this.timer = setInterval(() => {
+                if (this.objChange) { return }
+                this.editTopologyFlag = false
+                this.topologyLoading = true
+                this.projectInfoShow = false
+                this.projectAlertShow = false
+                if (n.id) {
+                  this.getProjectData(n)
+                }
+                clearTimeout(this.timer)
+                this.timer = null
+                this.objChange = true
+                this.topologyLoading = true
+                this.init()
+              }, 100)
+            }
+          }
+        }
+      }
+    },
+    topoScreen (n) {
+      getTopology(this.topologyIndex).resize()
+      getTopology(this.topologyIndex).centerView(20)
+    }
+  },
+  computed: {
+    topoScreen () {
+      return this.$store.getters.getShowTopoScreen
+    }
+  },
+  created () {
+    canvasRegister()
+    if (process.client) {
+      document.onclick = event => {
+        this.contextmenu = {
           left: null,
           top: null,
           bottom: null
-        },
-        filterTime: [
-          bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
-          bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
-        ],
-        topologyInfo: {
-          fontSize: 14,
-          align: 'left',
-          fontColor: '#000000',
-          opacity: 1,
-          name: ''
-        },
-        saveData: {},
-        oldTopologyData: '',
-        redoIndex: 0,
-        dataLength: 0,
-        editTopologyFlag: false,
-        searchTime: bus.getTimezontDateRange(),
-        activeNames: [],
-        topologyIndex: 0,
-        iconArray: [],
-        imgageLoading: false,
-        toolShow: {
-          node: true,
-          attr: true,
-          topTool: true,
-          nodeCord: [0, 0],
-          attrCord: [0, 0],
-          height: 500
-        },
-        dragFlag: true,
-        modules: [],
-        allModules: [],
-        projectInfo: {
-          title: '',
-          id: '',
-          remark: '',
-          alertStat: [1, 2, 3],
-          moduleMum: 6,
-          loading: true
-        },
-        timer: null, // 处理project短时间呢频繁变更的定时器
-        timer2: null, // 处理平移画布显示iconState的定时器
-        timer3: null, // 处理tooltip的显示定时器
-        nodesArr: [],
-        notModuleIDArr: [],
-        popData: [
-          {
-            top: '-40px',
-            left: '-21px',
-            className: 'nz-icon-endpoint',
-            id: 'endpoint',
-            title: this.$t('project.topology.endpoint')
-          },
-          { top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('project.topology.asset') },
-          { top: '-4px', left: '40px', className: '', id: 'other', title: '' },
-          { top: '30px', left: '19px', className: '', id: 'other', title: '' },
-          { top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
-          { top: '-4px', left: '-40px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') }
-        ],
-        popDataShow: {
-          endpoint: false,
-          asset: false,
-          total: false,
-          other: false,
-          info: false,
-          alert: false,
-          main: false
-        },
-        moduleId: '',
-        tooltipPosition: {
-          top: 0,
-          left: 0,
-          show: false,
-          height: 400
-        },
-        chartData: {},
-        chartGetData: [],
-        penLineType: [
-          { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
-          { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
-          { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
-          // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
-        ],
-        lineName: 'curve',
-        cachesIndex: 0,
-        projectInfoShow: false,
-        projectAlertShow: false,
-        previewShow: false,
-        penId: undefined,
-        penToolTipScale: 1,
-        oldScale: 1,
-        uploadPicShow: false,
-        uploadPic: {
-          name: '',
-          unit: ''
-        },
-        unitArr: [],
-        topoScreenState: '' // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
+        }
       }
+    }
+  },
+  mounted () {
+    if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
+      this.addNodeInit()
+    }
+    document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
+    window.addEventListener('resize', this.winResize)
+  },
+  methods: {
+    init () {
+      canvasOptions.on = this.onMessage
+      this.reload()
     },
-    components: {
-      CanvasProps,
-      topologyTopTool,
-      popDataMain,
-      popDataInfo,
-      alertTable,
-      assetTable,
-      endpointTable,
-      topoTooltip,
-      topologyPrev
-    },
-    props: {
-      topologyIndexF: {
-        type: Number,
-        default: 0
-      },
-      obj: {},
-      showTopTools: {
-        type: Boolean,
-        default: true
-      },
-      fromOverView: {
-        type: Boolean,
-        default: false
-      },
-      fromPrev: {
-        type: Boolean,
-        default: false
-      },
-      topoPrevDataS: {
 
-      }
-    },
-    watch: {
-      topologyIndexF: {
-        immediate: true,
-        handler (n) {
-          this.topologyIndex = n
-        }
-      },
-      obj: {
-        deep: true,
-        immediate: true,
-        handler (n) {
-          if (n && n.id) {
-            if (getTopology(this.topologyIndex)) {
-              getTopology(this.topologyIndex).destroy()
-              setTopology(this.topologyIndex, null)
-            }
-            if (!this.objChange) {
-              this.editTopologyFlag = false
-              this.topologyLoading = true
-              this.projectInfoShow = false
-              this.projectAlertShow = false
-              if (n.id) {
-                this.getProjectData(n)
-              }
-              this.topologyLoading = true
-              this.init()
-              this.timer = null
-              this.objChange = true
-            } else {
-              if (!this.timer) {
-                this.timer = setInterval(() => {
-                  if (this.objChange) { return }
-                  this.editTopologyFlag = false
-                  this.topologyLoading = true
-                  this.projectInfoShow = false
-                  this.projectAlertShow = false
-                  if (n.id) {
-                    this.getProjectData(n)
-                  }
-                  clearTimeout(this.timer)
-                  this.timer = null
-                  this.objChange = true
-                  this.topologyLoading = true
-                  this.init()
-                }, 100)
-              } else {
-                clearTimeout(this.timer)
-                this.timer = setInterval(() => {
-                  if (this.objChange) { return }
-                  this.editTopologyFlag = false
-                  this.topologyLoading = true
-                  this.projectInfoShow = false
-                  this.projectAlertShow = false
-                  if (n.id) {
-                    this.getProjectData(n)
-                  }
-                  clearTimeout(this.timer)
-                  this.timer = null
-                  this.objChange = true
-                  this.topologyLoading = true
-                  this.init()
-                }, 100)
-              }
-            }
+    reload () {
+      this.topologyLoading = true
+      this.getTopologyData().then((data) => {
+        this.openTopologyData(data).then(() => {
+          // 获取对应的值 给节点 连线添加对应动画
+          this.lineName = data.lineName ? data.lineName : this.lineName
+          this.chartGetData = []
+          const axiosArr = []
+          const promiseArr = []
+          const self = this
+          const pensPromise = (pen, arr, index) => {
+            return new Promise(function (resolve, reject) {
+              Promise.all(arr).then((res) => {
+                self.chartGetData[index].res = self.computeData(res, pen.data.aggregation, pen)
+                self.setAnimation(pen, self.chartGetData[index].res)
+                resolve()
+              })
+            })
           }
-        }
-      },
-      topoScreen (n) {
-        getTopology(this.topologyIndex).resize()
-        getTopology(this.topologyIndex).centerView(20)
-      }
-    },
-    computed: {
-      topoScreen () {
-        return this.$store.getters.getShowTopoScreen
-      }
-    },
-    created () {
-      canvasRegister()
-      if (process.client) {
-        document.onclick = event => {
-          this.contextmenu = {
-            left: null,
-            top: null,
-            bottom: null
-          }
-        }
-      }
-    },
-    mounted () {
-      if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
-        this.addNodeInit()
-      }
-      document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
-      window.addEventListener('resize', this.winResize)
-    },
-    methods: {
-      init () {
-        canvasOptions.on = this.onMessage
-        this.reload()
-      },
-
-      reload () {
-        this.topologyLoading = true
-        this.getTopologyData().then((data) => {
-          this.openTopologyData(data).then(() => {
-            // 获取对应的值 给节点 连线添加对应动画
-            this.lineName = data.lineName ? data.lineName : this.lineName
-            this.chartGetData = []
-            const axiosArr = []
-            const promiseArr = []
-            const self = this
-            const pensPromise = (pen, arr, index) => {
-              return new Promise(function (resolve, reject) {
-                Promise.all(arr).then((res) => {
-                  self.chartGetData[index].res = self.computeData(res, pen.data.aggregation, pen)
-                  self.setAnimation(pen, self.chartGetData[index].res)
-                  resolve()
+          const endTime = this.filterTime[1]
+          const startTime = this.filterTime[0]
+          const step = bus.getStep(startTime, endTime)
+          data.pens && data.pens.forEach((item, index) => {
+            this.chartGetData.push({ id: item.id, res: [] })
+            const arr = item.data.expressArr.map((ele) => {
+              let query = encodeURIComponent(ele)
+              if (!query) {
+                return new Promise(resolve => {
+                  resolve({ data: '', status: 'no query' })
                 })
-              })
-            }
-            const endTime = this.filterTime[1]
-            const startTime = this.filterTime[0]
-            const step = bus.getStep(startTime, endTime)
-            data.pens && data.pens.forEach((item, index) => {
-              this.chartGetData.push({ id: item.id, res: [] })
-              const arr = item.data.expressArr.map((ele) => {
-                let query = encodeURIComponent(ele)
-                if (!query) {
-                  return new Promise(resolve => {
-                    resolve({ data: '', status: 'no query' })
-                  })
-                }
-                query += '&nullType=' + 'connected'
-                return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
-              })
-              axiosArr.push({ item, arr })
-              promiseArr.push(pensPromise(item, arr, index))
-            })
-            Promise.all(promiseArr).then((res) => {
-              getTopology(this.topologyIndex).open(data)
-              getTopology(this.topologyIndex).lock(1)
-              this.objChange = false
-              let flag = false
-              const position = {
-                x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
-                y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
               }
-              this.oldScale = getTopology(this.topologyIndex).data.scale
-              getTopology(this.topologyIndex).data.pens.forEach(item => {
-                if (flag) {
-                  return
-                }
-                if (item.rect.ex > position.x || item.rect.ey > position.y) {
-                  getTopology(this.topologyIndex).fitView(20)
-                  flag = true
-                }
-              })
-              getTopology(this.topologyIndex).centerView(20)
-              this.penToolTipScale = getTopology(this.topologyIndex).data.scale
-              setTimeout(() => {
-                getTopology(this.topologyIndex).data.pens.forEach(item => {
-                  if (item.animatePlay) {
-                    item.stopAnimate()
-                    setTimeout(() => {
-                      item.startAnimate()
-                    })
-                  }
-                }, 100)
-              })
-              // if(this.fromPrev){
-              //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
-              // }
-              // getTopology(this.topologyIndex).fitView();
-              this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
-              this.getNodesArr()
+              query += '&nullType=' + 'connected'
+              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
             })
+            axiosArr.push({ item, arr })
+            promiseArr.push(pensPromise(item, arr, index))
           })
-        })
-      },
-
-      dateChange () {
-        // const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-        // this.setSearchTime(nowTimeType.type, nowTimeType.value)
-        this.searchTime = bus.getTimezontDateRange()
-        this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
-        this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
-        this.reload()
-      },
-      setSearchTime (type, val) { // 设置searchTime
-        if (type === 'minute') {
-          const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
-          const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
-          this.$set(this.searchTime, 0, startTime)
-          this.$set(this.searchTime, 1, endTime)
-          this.$set(this.searchTime, 2, val + 'm')
-        } else if (type === 'hour') {
-          const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
-          const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
-          this.$set(this.searchTime, 0, startTime)
-          this.$set(this.searchTime, 1, endTime)
-          this.$set(this.searchTime, 2, val + 'h')
-        } else if (type === 'date') {
-          const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
-          const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
-          this.$set(this.searchTime, 0, startTime)
-          this.$set(this.searchTime, 1, endTime)
-          this.$set(this.searchTime, 2, val + 'd')
-        }
-        this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
-      },
-      // 打开topology数据
-      openTopologyData (data) {
-        return new Promise(resolve => {
-          if (!getTopology(this.topologyIndex)) {
-            const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
-            canvas.open(data)
-            setTopology(this.topologyIndex, canvas)
-          } else {
+          Promise.all(promiseArr).then((res) => {
             getTopology(this.topologyIndex).open(data)
-          }
-          this.topologyLoading = false
-          if (!getTopology(this.topologyIndex).data.name) {
-            getTopology(this.topologyIndex).data.name = this.obj.name
-          }
-          getTopology(this.topologyIndex).data.projectId = this.obj.id
-          getTopology(this.topologyIndex).lock(1)
-
-          this.getModule()// 获取module
-          resolve()
-        })
-      },
-      // 获取topology数据
-      getTopologyData () {
-        return new Promise(resolve => {
-          if (this.fromPrev) {
-            resolve(this.topoPrevDataS)
-          }
-          this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
-            let data = res.data.topo
-            if (!res.data.topo || !data.pens) {
-              data = {
-                bkColor: '#FFFFFF',
-                gridSize: 10,
-                gridColor: '#ededed',
-                lineWidth: 1,
-                ruleColor: '#4e4e4e'
+            getTopology(this.topologyIndex).lock(1)
+            this.objChange = false
+            let flag = false
+            const position = {
+              x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
+              y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
+            }
+            this.oldScale = getTopology(this.topologyIndex).data.scale
+            getTopology(this.topologyIndex).data.pens.forEach(item => {
+              if (flag) {
+                return
               }
-              this.projectInfoShow = true
-              this.projectAlertShow = true
-              this.saveData = { ...data }
-              this.topologyInfo.name = this.obj.name
-              resolve(data)
-            } else {
-              this.topologyInfo = {
-                fontSize: data.data.fontSize,
-                align: data.data.align,
-                fontColor: data.data.fontColor,
-                opacity: data.data.opacity,
-                name: data.name
+              if (item.rect.ex > position.x || item.rect.ey > position.y) {
+                getTopology(this.topologyIndex).fitView(20)
+                flag = true
               }
-              if (this.fromOverView) { // 优化从首页来的加载速度
-                const arr = data.pens.filter(item => !item.type)
-                this.addNodeInit(arr)
-              }
-              const timer = setInterval(() => {
-                if (!this.imgInit) {
-                  return
-                }
-                clearInterval(timer)
-                const promiseArr = []
-                const self = this
-                for (let i = 0; i < data.pens.length; i++) {
-                  const line = data.pens[i]
-                  if (line.type === 1) {
-                    if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
-                      data.pens.splice(i, 1)
-                      i--
-                    }
-                  }
-                }
-                data.pens.forEach(item => {
-                  if (item.type === 0 && item.data.imageId) {
-                    item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
-                  }
-                  if (item.type === 0) {
-                    // promiseArr.push(this.$get('/monitor/module/stat', { id: item.data.moduleId }))
-                    item.data.state = {}
-                    item.data.state.asset = false
-                    item.data.state.endpoint = false
-                    item.data.state.alert = false
-                  } else {
-                    // promiseArr.push({ type: 1 })
-                    item.data.state = {}
-                    item.data.state.asset = false
-                    item.data.state.endpoint = false
-                    item.data.state.alert = false
-                  }
-                })
-
-                if (!data.data) {
-                  this.projectInfoShow = true
-                  this.projectAlertShow = true
-                } else if (!JSON.stringify(data.data.projectInfo)) {
-                  this.projectInfoShow = true
-                  this.projectAlertShow = true
-                } else {
-                  this.projectInfoShow = data.data.projectInfo
-                  this.projectAlertShow = data.data.alertInfo
-                }
-                if (!data.bkImage) {
-                  data.bkImage = undefined
-                }
-                Promise.all(promiseArr).then(res => {
-                  res.forEach((response, index) => {
-                    const item = data.pens[index]
-                    if (item.type === 0) {
-                      item.data.state = response.data
-                      item.data.state.asset = false
-                      item.data.state.endpoint = false
-                      item.data.state.alert = false
-                      if (item.data.state.assetStat.down > 0) {
-                        item.data.state.asset = true
-                      }
-                      if (item.data.state.endpointStat.down > 0) {
-                        item.data.state.endpoint = true
-                      }
-                      if (item.data.state.alertStat.P1 > 0 || item.data.state.alertStat.P3 > 0 || item.data.state.alertStat.P2 > 0) {
-                        item.data.state.alert = true
-                      }
-                      item.data.state.error = item.data.state.asset || item.data.state.endpoint || item.data.state.alert
-                    }
-                  })
-                  self.saveData = { ...data }
-                  resolve(data)
-                })
-              }, 100)
-            }
-          })
-        })
-      },
-      // 赋值动画
-      setAnimation (pen, res) { // 根据所有res的状态 赋值动画
-        let maxLevel = 0
-        if (res.length > 0) {
-          res.forEach((response, innerPos) => {
-            if (response.status !== 'success') {
-              return
-            }
-            if (response.data.result) {
-              response.data.result.forEach((queryItem, resIndex) => {
-                pen.data.valueMapping.forEach((item, index) => {
-                  if (item.value === 'base') { return }
-                  if (queryItem.showValue > item.value) {
-                    queryItem.level = item.level
-                    if (maxLevel < item.level) {
-                      maxLevel = item.level
-                    }
-                  }
-                })
-              })
-            }
-          })
-        }
-        if (maxLevel !== 0) {
-          if (pen.type === 0) { // 判断valueMapping 给相应的状态
-            const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
-            if (selLevel) {
-              pen.fontColor = selLevel.color.text
-              pen.fillStyle = selLevel.color.fill
-              pen.strokeStyle = selLevel.color.line
-              pen.bkType = 0
-            }
-            onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
-          } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
-            const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
-            if (selLevel) {
-              pen.animateColor = selLevel.color.fill
-              pen.strokeStyle = selLevel.color.line
-              pen.animateType = selLevel.animateType
-              pen.fontColor = selLevel.color.text
-            }
-            onChangeAnimateLine(pen, pen.animateType)
-          }
-        } else {
-          if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-            onChangeAnimate(pen, pen.animateType)
-          } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-            onChangeAnimateLine(pen, pen.animateType)
-          }
-        }
-      },
-      computeData (res, type, pen) { // 处理别名 以及 根据type显示对应的值
-        if (res.length > 0) {
-          res.forEach((response, innerPos) => {
-            if (response.status !== 'success') {
-              return
-            }
-
-            if (response.data.result) {
-              response.data.result.forEach((queryItem, resIndex) => {
-                // 图表中每条线的名字,后半部分
-                let host = ''// up,
-                if (queryItem.metric.__name__) {
-                  host = `${queryItem.metric.__name__}{`// up,
-                }
-                const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-                // 设置时间-数据格式对
-                let dpsArr = []
-                dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                dpsArr = dpsArr.map(item => {
-                  return [item[0], [item[1][0], Number(item[1][1])]]
-                })
-                // 判断是否有数据, && tagsArr.length > 0
-                if (dpsArr.length) {
-                  tagsArr.forEach((tag, i) => {
-                    if (tag !== '__name__') {
-                      host += `${tag}="${queryItem.metric[tag]}",`
-                    }
-                  })
-                  if (host.endsWith(',')) {
-                    host = host.substr(0, host.length - 1)
-                  }
-                  if (queryItem.metric.__name__) {
-                    host += '}'
-                  }
-                  if (!host || host === '') {
-                    host = pen.data.expressArr[innerPos]
-                  }
-                  // 处理legend别名
-                  let alias = this.dealLegendAlias(host, pen.data.legends[innerPos])
-                  if (!alias || alias === '') {
-                    alias = host
-                  }
-                  queryItem.legend = { name: host + '-' + pen.data.legends[innerPos] + '-' + resIndex, alias: alias }
-                  queryItem.showValue = getMetricTypeValue(queryItem.values, type)
-                  // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                }
-              })
-            }
-          })
-        }
-        return res
-      },
-      dealLegendAlias: function (legend, expression) {
-        if (/\{\{.+\}\}/.test(expression)) {
-          const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
-            const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
-            const reg = new RegExp(label + '=".+?"')
-            let value = null
-            if (reg.test(legend)) {
-              const find = legend.match(reg)[0]
-              value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
-            }
-            return value || label
-          })
-          return labelValue
-        } else {
-          return expression
-        }
-      },
-      // 获取project Info
-      getProjectData (n) {
-        // 获取projectInfo
-        this.projectInfo.loading = true
-        this.$get('monitor/project/' + n.id).then(response => {
-          if (response.code === 200) {
-            this.projectInfo.loading = false
-            this.projectInfo = { ...this.projectInfo, ...response.data }
-            this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
-            if (!this.projectInfo.total) {
-              this.projectInfo.total = 0
-            }
-          }
-        })
-      },
-      // Severity Label
-      returnSeverityLabel (key) {
-        return this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label
-      },
-      // 获取module
-      getModule () {
-        this.projectInfo.loading = true
-        this.$get('/monitor/module?pageSize=-1&projectIds=' + this.obj.id).then(response => {
-          if (response.code === 200) {
-            this.projectInfo.loading = false
-            this.allModules = response.data.list
-            this.modulesDiff()
-          }
-        })
-      },
-
-      getNodesArr () {
-        if (!getTopology(this.topologyIndex)) return
-        this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
-          if (!item.data) {
-            item.data = {
-              moduleId: '',
-              moduleName: '',
-              show: false,
-              error: false,
-              expressArr: []
-            }
-          }
-          return item.type === 0
-        })
-        // this.nodesArr=this.nodesArr.map(item=>{
-        //   if(!item.data){
-        //     item.data={
-        //       moduleId:'',
-        //       moduleName:'',
-        //       show:false,
-        //       error:false,
-        //       expressArr:[],
-        //     }
-        //   }
-        //   return {
-        //     rect:item.rect,
-        //     data:item.data
-        //   }
-        // });
-        // 打开动画 是否更新顶部图标
-        this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
-      },
-
-      modelTopClick (item, index) {
-
-      },
-      // 摘除已选择的module
-      modulesDiff (data) {
-        this.modules = this.allModules
-        if (getTopology(this.topologyIndex).data.pens) {
-          getTopology(this.topologyIndex).data.pens.forEach(item => {
-            if (item.type == 0) {
-              this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
-            }
-          })
-        }
-        if (data && data.data && data.data.moduleId) {
-          this.modules.unshift({ id: data.data.moduleId, name: data.data.moduleName })
-        }
-      },
-
-      // 显示module的工具
-      showNodeTools (index, pen) {
-        this.nodesArr.forEach((item, i) => {
-          item.data.show = i === index
-        })
-      },
-
-      // 具体内容点击
-      nodeTools (node, tool) {
-        this.moduleId = node.data.moduleId
-        if (tool.id === 'total') {
-          this.popDataShowUpdate('', false, node)
-          return
-        }
-        setTimeout(() => {
-          this.popDataShowUpdate(tool.id, false, node)
-        }, 100)
-      },
-
-      popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏
-        this.popDataShow = {
-          endpoint: false,
-          asset: false,
-          total: false,
-          other: false,
-          info: false,
-          alert: false,
-          main: false
-        }
-        if (key === 'total') {
-          this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) }
-        }
-        this.$nextTick(() => {
-          this.popDataShow[key] = true
-        })
-        if (flag) { // 处理关闭后 缩放后显示工具按钮的问题
-          this.moduleId = ''
-          this.showNodeTools('')
-        }
-        if (key === 'asset' || key === 'alert' || key === 'endpoint') {
-          this.showNodeTools('')
-        }
-      },
-
-      /* topology 方法 */
-      onDrag (event, node) {
-        this.dragFlag = false
-        setTimeout(() => {
-          this.dragFlag = true
-        }, 100)
-        event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
-      },
-      dragFlagChange (node) {
-        getTopology(this.topologyIndex).addNode(
-          {
-            ...node.data,
-            rect: {
-              ...node.data.rect,
-              x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
-              y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50
-            },
-            data: { imageId: node.data.imageId }
-          })
-        setTimeout(() => {
-          this.dragFlag = true
-        }, 100)
-      },
-
-      onMessage (event, data, e) {
-        // console.log('onMessage', event, data)
-        // console.log(getTopology(this.topologyIndex))
-        // this.notModuleIDArr=[];
-        this.toolShow.attr = false
-        this.toolShow.topTool = false
-        this.$nextTick(() => {
-          this.toolShow.attr = true
-          this.toolShow.topTool = true
-        })
-        if (data) {
-          this.notModuleIDArr.forEach(item => {
-            if (item.id === data.id) {
-              item.rect = data.rect
-            }
-          })
-        }
-        if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
-          if (data.type === 0 && !data.data.moduleId) {
-            data.data = {
-              ...data.data,
-              moduleId: '',
-              moduleName: '',
-              show: false,
-              error: false,
-              animatePlay: false,
-              fillStyle: data.fillStyle,
-              strokeStyle: data.strokeStyle,
-              gradientColor: '#bae7ff',
-              gradientType: 0,
-              lineWidth: this.nodeDefaultWidth(data.name),
-              iconToolState: true,
-              // chart 配置项
-              valueMapping: [{
-                color: {
-                  line: '#000000',
-                  fill: '#ffffff',
-                  text: '#000000'
-                },
-                value: 'base',
-                animateType: 'base',
-                level: 0,
-                base: true
-              }],
-              valueMappingSort: 'asc',
-              expressArr: [''],
-              legends: [''],
-              tooltipShow: true,
-              panelName: 'topologyName',
-              unit: 2,
-              type: 'line',
-              displayChart: true,
-              aggregation: 'last',
-              title: '',
-              url: ''
-            }
-          } else if (data.type == 1 && !data.data) {
-            // 连线是否自动计算锚点
-            // data.manualCps=true;
-            data.animateColor = '#FA901C'
-            data.data = {
-              animatePlay: false,
-              strokeStyle: data.strokeStyle,
-              animateColor: data.animateColor,
-              arrowColor: '#000000',
-              fromArrowColor: '#000000',
-              toArrowColor: '#000000',
-              lineWidth: 1,
-              // chart 配置项
-              valueMapping: [{
-                color: {
-                  line: '#000000',
-                  fill: '#ffffff',
-                  text: '#000000'
-                },
-                value: 'base',
-                animateType: 'base',
-                level: 0,
-                base: true
-              }],
-              valueMappingSort: 'asc', /* desc */
-              expressArr: [''],
-              legends: [''],
-              tooltipShow: true,
-              panelName: 'topologyName',
-              unit: 2,
-              type: 'line',
-              displayChart: true,
-              aggregation: 'last',
-              title: '',
-              moduleName: '',
-              url: ''
-            }
-          }
-          if (data.type === 0 || data.type === 1) {
-            data.lineWidth = data.data.lineWidth
-          }
-        }
-
-        switch (event) {
-          case 'moveInNode':
-          case 'moveInLine':
-            if (this.timer3) {
-              clearTimeout(this.timer3)
-              this.timer3 = null
-            }
-            this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
-            this.tooltipPosition.show = false
+            })
+            getTopology(this.topologyIndex).centerView(20)
+            this.penToolTipScale = getTopology(this.topologyIndex).data.scale
             setTimeout(() => {
-              this.tooltipPosition.show = true
-              const ePosition = window.ePosition
-              const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
-              const boxHeight = document.getElementsByClassName('page')[0].offsetHeight
-              this.tooltipPosition.left = ePosition.layerX + 20
-              this.tooltipPosition.top = ePosition.layerY
-              this.$nextTick(() => {
-                if (this.$refs.topoTooltip) {
-                  if ((boxWidth / 2) > ePosition.layerX) {
-                    this.tooltipPosition.left = ePosition.layerX + 20
-                  } else {
-                    this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
-                  }
-                  if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
-                    this.tooltipPosition.top = ePosition.layerY
-                  } else {
-                    this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
+              getTopology(this.topologyIndex).data.pens.forEach(item => {
+                if (item.animatePlay) {
+                  item.stopAnimate()
+                  setTimeout(() => {
+                    item.startAnimate()
+                  })
+                }
+              }, 100)
+            })
+            // if(this.fromPrev){
+            //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
+            // }
+            // getTopology(this.topologyIndex).fitView();
+            this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
+            this.getNodesArr()
+          })
+        })
+      })
+    },
+
+    dateChange () {
+      // const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      // this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.searchTime = bus.getTimezontDateRange()
+      this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.reload()
+    },
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    },
+    // 打开topology数据
+    openTopologyData (data) {
+      return new Promise(resolve => {
+        if (!getTopology(this.topologyIndex)) {
+          const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
+          canvas.open(data)
+          setTopology(this.topologyIndex, canvas)
+        } else {
+          getTopology(this.topologyIndex).open(data)
+        }
+        this.topologyLoading = false
+        if (!getTopology(this.topologyIndex).data.name) {
+          getTopology(this.topologyIndex).data.name = this.obj.name
+        }
+        getTopology(this.topologyIndex).data.projectId = this.obj.id
+        getTopology(this.topologyIndex).lock(1)
+
+        this.getModule()// 获取module
+        resolve()
+      })
+    },
+    // 获取topology数据
+    getTopologyData () {
+      return new Promise(resolve => {
+        if (this.fromPrev) {
+          resolve(this.topoPrevDataS)
+        }
+        this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
+          let data = res.data.topo
+          if (!res.data.topo || !data.pens) {
+            data = {
+              bkColor: '#FFFFFF',
+              gridSize: 10,
+              gridColor: '#ededed',
+              lineWidth: 1,
+              ruleColor: '#4e4e4e'
+            }
+            this.projectInfoShow = true
+            this.projectAlertShow = true
+            this.saveData = { ...data }
+            this.topologyInfo.name = this.obj.name
+            resolve(data)
+          } else {
+            this.topologyInfo = {
+              fontSize: data.data.fontSize,
+              align: data.data.align,
+              fontColor: data.data.fontColor,
+              opacity: data.data.opacity,
+              name: data.name
+            }
+            if (this.fromOverView) { // 优化从首页来的加载速度
+              const arr = data.pens.filter(item => !item.type)
+              this.addNodeInit(arr)
+            }
+            const timer = setInterval(() => {
+              if (!this.imgInit) {
+                return
+              }
+              clearInterval(timer)
+              const promiseArr = []
+              const self = this
+              for (let i = 0; i < data.pens.length; i++) {
+                const line = data.pens[i]
+                if (line.type === 1) {
+                  if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
+                    data.pens.splice(i, 1)
+                    i--
                   }
                 }
+              }
+              data.pens.forEach(item => {
+                if (item.type === 0 && item.data.imageId) {
+                  item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
+                }
+                if (item.type === 0) {
+                  // promiseArr.push(this.$get('/monitor/module/stat', { id: item.data.moduleId }))
+                  item.data.state = {}
+                  item.data.state.asset = false
+                  item.data.state.endpoint = false
+                  item.data.state.alert = false
+                } else {
+                  // promiseArr.push({ type: 1 })
+                  item.data.state = {}
+                  item.data.state.asset = false
+                  item.data.state.endpoint = false
+                  item.data.state.alert = false
+                }
+              })
+
+              if (!data.data) {
+                this.projectInfoShow = true
+                this.projectAlertShow = true
+              } else if (!JSON.stringify(data.data.projectInfo)) {
+                this.projectInfoShow = true
+                this.projectAlertShow = true
+              } else {
+                this.projectInfoShow = data.data.projectInfo
+                this.projectAlertShow = data.data.alertInfo
+              }
+              if (!data.bkImage) {
+                data.bkImage = undefined
+              }
+              Promise.all(promiseArr).then(res => {
+                res.forEach((response, index) => {
+                  const item = data.pens[index]
+                  if (item.type === 0) {
+                    item.data.state = response.data
+                    item.data.state.asset = false
+                    item.data.state.endpoint = false
+                    item.data.state.alert = false
+                    if (item.data.state.assetStat.down > 0) {
+                      item.data.state.asset = true
+                    }
+                    if (item.data.state.endpointStat.down > 0) {
+                      item.data.state.endpoint = true
+                    }
+                    if (item.data.state.alertStat.P1 > 0 || item.data.state.alertStat.P3 > 0 || item.data.state.alertStat.P2 > 0) {
+                      item.data.state.alert = true
+                    }
+                    item.data.state.error = item.data.state.asset || item.data.state.endpoint || item.data.state.alert
+                  }
+                })
+                self.saveData = { ...data }
+                resolve(data)
               })
             }, 100)
-            break
-          case 'moveOutNode':
-          case 'moveOutLine':
-            // this.tooltipPosition.show=false;
-            // return
-            if (!this.timer3) {
-              this.timer3 = setTimeout(() => {
-                this.tooltipPosition.show = false
-                this.timer3 = null
-              }, 50)
-            } else {
-              clearTimeout(this.timer3)
-              this.timer3 = setTimeout(() => {
-                this.tooltipPosition.show = false
-                this.timer3 = null
-              }, 50)
-            }
-            break
-        }
-        // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
-        setTimeout(() => {
-          switch (event) {
-            case 'node':
-            case 'addNode':
-              this.modulesDiff(data)
-              if (data.data.expressArr.length === 0 && event !== 'node') {
-                data.data.expressArr.push('')
-                data.data.legends.push('')
-              }
-              this.props = {
-                node: data,
-                line: null,
-                multi: false,
-                expand: this.props.expand,
-                nodes: null,
-                locked: data.locked,
-                pen: data,
-                pens: null
-              }
-              this.$nextTick(() => {
-                if (this.$refs.CanvasProps) {
-                  if (this.penId !== data.id) {
-                    this.$refs.CanvasProps.tab = '1'
+          }
+        })
+      })
+    },
+    // 赋值动画
+    setAnimation (pen, res) { // 根据所有res的状态 赋值动画
+      let maxLevel = 0
+      if (res.length > 0) {
+        res.forEach((response, innerPos) => {
+          if (response.status !== 'success') {
+            return
+          }
+          if (response.data.result) {
+            response.data.result.forEach((queryItem, resIndex) => {
+              pen.data.valueMapping.forEach((item, index) => {
+                if (item.value === 'base') { return }
+                if (queryItem.showValue > item.value) {
+                  queryItem.level = item.level
+                  if (maxLevel < item.level) {
+                    maxLevel = item.level
                   }
-                  this.penId = data.id
                 }
               })
-              break
-            case 'line':
-            case 'addLine':
-              this.props = {
-                node: null,
-                line: data,
-                multi: false,
-                nodes: null,
-                locked: data.locked,
-                pen: data,
-                pens: null
+            })
+          }
+        })
+      }
+      if (maxLevel !== 0) {
+        if (pen.type === 0) { // 判断valueMapping 给相应的状态
+          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
+          if (selLevel) {
+            pen.fontColor = selLevel.color.text
+            pen.fillStyle = selLevel.color.fill
+            pen.strokeStyle = selLevel.color.line
+            pen.bkType = 0
+          }
+          onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
+        } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
+          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
+          if (selLevel) {
+            pen.animateColor = selLevel.color.fill
+            pen.strokeStyle = selLevel.color.line
+            pen.animateType = selLevel.animateType
+            pen.fontColor = selLevel.color.text
+          }
+          onChangeAnimateLine(pen, pen.animateType)
+        }
+      } else {
+        if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
+          onChangeAnimate(pen, pen.animateType)
+        } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
+          onChangeAnimateLine(pen, pen.animateType)
+        }
+      }
+    },
+    computeData (res, type, pen) { // 处理别名 以及 根据type显示对应的值
+      if (res.length > 0) {
+        res.forEach((response, innerPos) => {
+          if (response.status !== 'success') {
+            return
+          }
+
+          if (response.data.result) {
+            response.data.result.forEach((queryItem, resIndex) => {
+              // 图表中每条线的名字,后半部分
+              let host = ''// up,
+              if (queryItem.metric.__name__) {
+                host = `${queryItem.metric.__name__}{`// up,
               }
-              this.$nextTick(() => {
-                if (this.$refs.CanvasProps) {
-                  if (this.penId !== data.id) {
-                    this.$refs.CanvasProps.tab = '1'
-                  }
-                  this.penId = data.id
-                }
+              const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+              // 设置时间-数据格式对
+              let dpsArr = []
+              dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+              dpsArr = dpsArr.map(item => {
+                return [item[0], [item[1][0], Number(item[1][1])]]
               })
-              break
-            case 'multi':
-              this.props = {
-                node: null,
-                line: null,
-                multi: true,
-                nodes: data.length > 1 ? data : null,
-                locked: this.getLocked({ nodes: data }),
-                pen: null,
-                pens: data.length > 1 ? data : null
-              }
-              break
-            case 'space':
-              this.penId = undefined
-              this.props = {
-                node: null,
-                line: null,
-                multi: false,
-                nodes: null,
-                locked: false,
-                pen: null,
-                pens: null
-              }
-              break
-            case 'moveOut':
-              break
-            case 'moveNodes':
-            case 'resizeNodes':
-              if (data.length > 1) {
-                this.props = {
-                  node: null,
-                  line: null,
-                  multi: true,
-                  nodes: data,
-                  locked: this.getLocked({ nodes: data }),
-                  pen: null,
-                  pens: null
-                }
-              } else {
-                this.props = {
-                  node: data[0],
-                  line: null,
-                  multi: false,
-                  nodes: null,
-                  locked: false,
-                  pen: data[0],
-                  pens: null
-                }
-              }
-              break
-            case 'resize': {
-              const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
-              if (getTopology(this.topologyIndex)) {
-                getTopology(this.topologyIndex).canvasPos = domRect
-              }
-              break
-            }
-            case 'scale': {
-              if (this.$refs.topTool) {
-                this.$refs.topTool.scaleNum = parseInt(data * 100)
-              }
-              break
-            }
-            case 'locked': {
-              this.props = {
-                node: null,
-                line: null,
-                multi: false,
-                nodes: null,
-                locked: false,
-                pen: null,
-                pens: null
-              }
-              break
-            }
-            case 'delete': {
-              this.props = {
-                node: null,
-                line: null,
-                multi: false,
-                nodes: null,
-                locked: false,
-                pen: null,
-                pens: null
-              }
-              break
-            }
-          }
-          switch (event) {
-            case 'node':
-            case 'line':
-            case 'space':
-            case 'scale':
-            case 'translate':
-              this.moduleId = ''
-              this.showNodeTools('')
-              this.popDataShowUpdate('', false)
-              if (!this.editTopologyFlag) {
-                getTopology(this.topologyIndex)
-              }
-              break
-          }
-          switch (event) {
-            case 'space':
-            case 'scale':
-            case 'translate':
-              this.getNodesArr()
-              // if(!this.timer2){
-              //   this.timer2=setTimeout(()=>{
-              //     this.getNodesArr();
-              //     this.timer2=null
-              //   },300)
-              // }else{
-              //   clearTimeout(this.timer2);
-              //   this.timer2=setTimeout(()=>{
-              //     this.getNodesArr();
-              //     this.timer2=null
-              //   },300)
-              // }
-              break
-          }
-        }, 0)
-      },
-
-      getLocked (data) {
-        let locked = true
-        if (data.nodes && data.nodes.length) {
-          for (const item of data.nodes) {
-            if (!item.locked) {
-              locked = false
-              break
-            }
-          }
-        }
-        if (locked && data.lines) {
-          for (const item of data.lines) {
-            if (!item.locked) {
-              locked = false
-              break
-            }
-          }
-        }
-
-        return locked
-      },
-
-      onUpdateProps (node) {
-        // 如果是node属性改变，需要传入node，重新计算node相关属性值
-        // 如果是line属性改变，无需传参
-        getTopology(this.topologyIndex).updateProps(node)
-      },
-
-      handleAvatarSuccess () {
-
-      },
-      beforeAvatarUpload (file, fileList) {
-        const this_ = this
-        const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
-
-        if (!isJPG) {
-          this.$message.error(this_.$t('project.topology.imgFormat'))
-          return false
-        }
-        // if (!isLt2M) {
-        //   this.$message.error( this_.$t('project.topology.imgSize'));
-        //   return false;
-        // }
-        const isSize = new Promise(function (resolve, reject) {
-          const width = 100
-          const height = 100
-          const _URL = window.URL || window.webkitURL
-          const img = new Image()
-          img.onload = function () {
-            const valid = img.width > width && img.height > height
-            valid ? resolve() : reject()
-          }
-          img.src = _URL.createObjectURL(file.raw)
-        }).then(() => {
-          if (isJPG) {
-            this.file = file.raw
-          }
-          return file.raw
-        }, () => {
-          this.$message.error(this_.$t('project.topology.imgMeasure'))
-          return Promise.reject()
-        })
-        return false
-      },
-
-      toolShowChange (attr) {
-        this.toolShow[attr] = !this.toolShow[attr]
-      },
-      /* topology 方法 */
-      end (v) {
-
-      },
-      /* tools 方法 */
-
-      imgUpload () {
-        const this_ = this
-        if (!this.uploadPic.unit) {
-          this.$message({
-            message: this_.$t('project.topology.unitError'),
-            type: 'error'
-          })
-          return
-        }
-        if (!this.file) {
-          this.$message({
-            message: this_.$t('project.topology.imgError'),
-            type: 'error'
-          })
-          return
-        }
-        this.upload()
-      },
-      upload () {
-        const form = new FormData()
-        form.append('file', this.file)
-        if (this.uploadPic.name) {
-          form.append('name', this.uploadPic.name)
-        } else {
-          form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
-        }
-        form.append('unit', this.uploadPic.unit)
-        this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
-          if (res.code == 200) {
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-            this.uploadPicShow = false
-            this.dealImg(`monitor/project/topo/icon/${res.data.id}`).then((data) => {
-              const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
-              if (group) {
-                group.children.push({
-                  ...imageTemp,
-                  data: {
-                    ...imageTemp.data,
-                    text: res.data.imageName,
-                    image: data,
-                    imageId: res.data.id,
-                    unit: this.uploadPic.unit
+              // 判断是否有数据, && tagsArr.length > 0
+              if (dpsArr.length) {
+                tagsArr.forEach((tag, i) => {
+                  if (tag !== '__name__') {
+                    host += `${tag}="${queryItem.metric[tag]}",`
                   }
                 })
-              } else {
-                this.tools.push({
-                  group: this.uploadPic.unit,
-                  children: [{
-                    ...imageTemp,
-                    data: {
-                      ...imageTemp.data,
-                      text: res.data.imageName,
-                      image: data,
-                      imageId: res.data.id,
-                      unit: this.uploadPic.unit
-                    }
-                  }]
-                })
+                if (host.endsWith(',')) {
+                  host = host.substr(0, host.length - 1)
+                }
+                if (queryItem.metric.__name__) {
+                  host += '}'
+                }
+                if (!host || host === '') {
+                  host = pen.data.expressArr[innerPos]
+                }
+                // 处理legend别名
+                let alias = this.dealLegendAlias(host, pen.data.legends[innerPos])
+                if (!alias || alias === '') {
+                  alias = host
+                }
+                queryItem.legend = { name: host + '-' + pen.data.legends[innerPos] + '-' + resIndex, alias: alias }
+                queryItem.showValue = getMetricTypeValue(queryItem.values, type)
+                // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
               }
             })
-          } else {
-            this.$message.error(res.msg)
           }
         })
-      },
+      }
+      return res
+    },
+    dealLegendAlias: function (legend, expression) {
+      if (/\{\{.+\}\}/.test(expression)) {
+        const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          const reg = new RegExp(label + '=".+?"')
+          let value = null
+          if (reg.test(legend)) {
+            const find = legend.match(reg)[0]
+            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+          }
+          return value || label
+        })
+        return labelValue
+      } else {
+        return expression
+      }
+    },
+    // 获取project Info
+    getProjectData (n) {
+      // 获取projectInfo
+      this.projectInfo.loading = true
+      this.$get('monitor/project/' + n.id).then(response => {
+        if (response.code === 200) {
+          this.projectInfo.loading = false
+          this.projectInfo = { ...this.projectInfo, ...response.data }
+          this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
+          if (!this.projectInfo.total) {
+            this.projectInfo.total = 0
+          }
+        }
+      })
+    },
+    // Severity Label
+    returnSeverityLabel (key) {
+      return this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label
+    },
+    // 获取module
+    getModule () {
+      this.projectInfo.loading = true
+      this.$get('/monitor/module?pageSize=-1&projectIds=' + this.obj.id).then(response => {
+        if (response.code === 200) {
+          this.projectInfo.loading = false
+          this.allModules = response.data.list
+          this.modulesDiff()
+        }
+      })
+    },
 
-      delImg (item) {
-        this.$delete('monitor/project/topo/icon?ids=' + item.data.imageId).then(res => {
-          if (res.code == 200) {
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.addNodeInit()
-          } else {
-            this.$message.error(res.msg)
+    getNodesArr () {
+      if (!getTopology(this.topologyIndex)) return
+      this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
+        if (!item.data) {
+          item.data = {
+            moduleId: '',
+            moduleName: '',
+            show: false,
+            error: false,
+            expressArr: []
+          }
+        }
+        return item.type === 0
+      })
+      // this.nodesArr=this.nodesArr.map(item=>{
+      //   if(!item.data){
+      //     item.data={
+      //       moduleId:'',
+      //       moduleName:'',
+      //       show:false,
+      //       error:false,
+      //       expressArr:[],
+      //     }
+      //   }
+      //   return {
+      //     rect:item.rect,
+      //     data:item.data
+      //   }
+      // });
+      // 打开动画 是否更新顶部图标
+      this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
+    },
+
+    modelTopClick (item, index) {
+
+    },
+    // 摘除已选择的module
+    modulesDiff (data) {
+      this.modules = this.allModules
+      if (getTopology(this.topologyIndex).data.pens) {
+        getTopology(this.topologyIndex).data.pens.forEach(item => {
+          if (item.type == 0) {
+            this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
           }
         })
-      },
+      }
+      if (data && data.data && data.data.moduleId) {
+        this.modules.unshift({ id: data.data.moduleId, name: data.data.moduleName })
+      }
+    },
 
-      addNodeInit (imgidList) {
-        if (!this.fromOverView) {
-          this.$get('monitor/project/topo/icon').then(res => {
-            this.imgageLoading = true
-            // this.tools[1].children=[];
-            const imgArr = []
-            const promiseArr = []
-            res.data.list.forEach((item, index) => {
-              item.imageName = item.name
-              delete item.name
-              promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}`))
-              imgArr.push({ ...item })
-            })
-            Promise.all(promiseArr).then((res2) => {
-              this.iconArray = [...res.data.list]
-              this.iconArray.forEach((item, index) => {
-                item.image = res2[index]
-                const group = this.tools.find(tool => tool.group === item.unit)
-                if (group) {
-                  group.children.push({
-                    ...imageTemp,
-                    data: {
-                      ...imageTemp.data,
-                      text: item.imageName,
-                      image: res2[index],
-                      imageId: item.id,
-                      unit: item.unit
-                    }
-                  })
+    // 显示module的工具
+    showNodeTools (index, pen) {
+      this.nodesArr.forEach((item, i) => {
+        item.data.show = i === index
+      })
+    },
+
+    // 具体内容点击
+    nodeTools (node, tool) {
+      this.moduleId = node.data.moduleId
+      if (tool.id === 'total') {
+        this.popDataShowUpdate('', false, node)
+        return
+      }
+      setTimeout(() => {
+        this.popDataShowUpdate(tool.id, false, node)
+      }, 100)
+    },
+
+    popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏
+      this.popDataShow = {
+        endpoint: false,
+        asset: false,
+        total: false,
+        other: false,
+        info: false,
+        alert: false,
+        main: false
+      }
+      if (key === 'total') {
+        this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) }
+      }
+      this.$nextTick(() => {
+        this.popDataShow[key] = true
+      })
+      if (flag) { // 处理关闭后 缩放后显示工具按钮的问题
+        this.moduleId = ''
+        this.showNodeTools('')
+      }
+      if (key === 'asset' || key === 'alert' || key === 'endpoint') {
+        this.showNodeTools('')
+      }
+    },
+
+    /* topology 方法 */
+    onDrag (event, node) {
+      this.dragFlag = false
+      setTimeout(() => {
+        this.dragFlag = true
+      }, 100)
+      event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
+    },
+    dragFlagChange (node) {
+      getTopology(this.topologyIndex).addNode(
+        {
+          ...node.data,
+          rect: {
+            ...node.data.rect,
+            x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
+            y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50
+          },
+          data: { imageId: node.data.imageId }
+        })
+      setTimeout(() => {
+        this.dragFlag = true
+      }, 100)
+    },
+
+    onMessage (event, data, e) {
+      // console.log('onMessage', event, data)
+      // console.log(getTopology(this.topologyIndex))
+      // this.notModuleIDArr=[];
+      this.toolShow.attr = false
+      this.toolShow.topTool = false
+      this.$nextTick(() => {
+        this.toolShow.attr = true
+        this.toolShow.topTool = true
+      })
+      if (data) {
+        this.notModuleIDArr.forEach(item => {
+          if (item.id === data.id) {
+            item.rect = data.rect
+          }
+        })
+      }
+      if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
+        if (data.type === 0 && !data.data.moduleId) {
+          data.data = {
+            ...data.data,
+            moduleId: '',
+            moduleName: '',
+            show: false,
+            error: false,
+            animatePlay: false,
+            fillStyle: data.fillStyle,
+            strokeStyle: data.strokeStyle,
+            gradientColor: '#bae7ff',
+            gradientType: 0,
+            lineWidth: this.nodeDefaultWidth(data.name),
+            iconToolState: true,
+            // chart 配置项
+            valueMapping: [{
+              color: {
+                line: '#000000',
+                fill: '#ffffff',
+                text: '#000000'
+              },
+              value: 'base',
+              animateType: 'base',
+              level: 0,
+              base: true
+            }],
+            valueMappingSort: 'asc',
+            expressArr: [''],
+            legends: [''],
+            tooltipShow: true,
+            panelName: 'topologyName',
+            unit: 2,
+            type: 'line',
+            displayChart: true,
+            aggregation: 'last',
+            title: '',
+            url: ''
+          }
+        } else if (data.type == 1 && !data.data) {
+          // 连线是否自动计算锚点
+          // data.manualCps=true;
+          data.animateColor = '#FA901C'
+          data.data = {
+            animatePlay: false,
+            strokeStyle: data.strokeStyle,
+            animateColor: data.animateColor,
+            arrowColor: '#000000',
+            fromArrowColor: '#000000',
+            toArrowColor: '#000000',
+            lineWidth: 1,
+            // chart 配置项
+            valueMapping: [{
+              color: {
+                line: '#000000',
+                fill: '#ffffff',
+                text: '#000000'
+              },
+              value: 'base',
+              animateType: 'base',
+              level: 0,
+              base: true
+            }],
+            valueMappingSort: 'asc', /* desc */
+            expressArr: [''],
+            legends: [''],
+            tooltipShow: true,
+            panelName: 'topologyName',
+            unit: 2,
+            type: 'line',
+            displayChart: true,
+            aggregation: 'last',
+            title: '',
+            moduleName: '',
+            url: ''
+          }
+        }
+        if (data.type === 0 || data.type === 1) {
+          data.lineWidth = data.data.lineWidth
+        }
+      }
+
+      switch (event) {
+        case 'moveInNode':
+        case 'moveInLine':
+          if (this.timer3) {
+            clearTimeout(this.timer3)
+            this.timer3 = null
+          }
+          this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
+          this.tooltipPosition.show = false
+          setTimeout(() => {
+            this.tooltipPosition.show = true
+            const ePosition = window.ePosition
+            const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
+            const boxHeight = document.getElementsByClassName('page')[0].offsetHeight
+            this.tooltipPosition.left = ePosition.layerX + 20
+            this.tooltipPosition.top = ePosition.layerY
+            this.$nextTick(() => {
+              if (this.$refs.topoTooltip) {
+                if ((boxWidth / 2) > ePosition.layerX) {
+                  this.tooltipPosition.left = ePosition.layerX + 20
                 } else {
-                  this.tools.push({
-                    group: item.unit,
-                    children: [{
-                      ...imageTemp,
-                      data: {
-                        ...imageTemp.data,
-                        text: item.imageName,
-                        image: res2[index],
-                        imageId: item.id,
-                        unit: item.unit
-                      }
-                    }]
-                  })
+                  this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
+                }
+                if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
+                  this.tooltipPosition.top = ePosition.layerY
+                } else {
+                  this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
                 }
-              })
-
-              this.imgInit = true
-            })
-          })
-        } else {
-          this.imgageLoading = true
-          const promiseArr = []
-          imgidList.forEach((item, index) => {
-            if (item.data.imageId) {
-              promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}`))
-            } else {
-              promiseArr.push('')
-            }
-          })
-          Promise.all(promiseArr).then(res2 => {
-            this.iconArray = imgidList.map(item => {
-              return {
-                id: item.data.imageId
               }
             })
-            this.iconArray.forEach((item, index) => {
-              if (item.id) {
-                item.image = res2[index]
-              }
-            })
-            this.imgInit = true
-          })
-        }
-      },
-
-      dealImg (url) {
-        // 处理后端传过来的图片流乱码问题
-        if (url) {
-          return new Promise((resolve, reject) => {
-            this.$axios
-              .get(url, {
-                responseType: 'arraybuffer'
-              })
-              .then(res => {
-                return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
-              })
-              .then(data => {
-                resolve(data)
-                // changeImage(data,(img)=>{
-                //   resolve(img)
-                // })
-              })
-              .catch(err => {
-              })
-          })
-        }
-      },
-
-      delPen (obj) { // 删除元素
-        getTopology(this.topologyIndex).delete(obj)
-        this.props = {
-          node: null,
-          line: null,
-          multi: false,
-          nodes: null,
-          locked: false,
-          pen: null,
-          pens: null
-        }
-      },
-
-      editTopology (val) {
-        this.editTopologyFlag = true
-        this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
-        this.$store.commit('setShowTopoScreen', true)
-        setTimeout(() => {
-          getTopology(this.topologyIndex).lock(0)
-          getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
-            if (item.animatePlay) {
-              item.stopAnimate()
-            }
-            if (!item.data.expressArr.length) {
-              item.data.expressArr = ['']
-              item.data.legends = ['']
-            }
-            item.animateType = item.data.animateType
-            if (item.type === 0) {
-              item.fillStyle = item.data.fillStyle
-              item.strokeStyle = item.data.strokeStyle
-              item.animatePlay = false
-              item.fontColor = '#000000'
-              item.gradientType = item.data.gradientType ? item.data.gradientType : 0
-              if (!item.data.gradientColor) {
-                item.data.gradientType = 0
-                item.data.gradientColor = '#bae7ff'
-              }
-              if (item.data.gradientType === 0) {
-                item.bkType = 0
-              } else {
-                item.bkType = 1
-              }
-            } else if (item.type === 1) {
-              item.animateColor = item.data.animateColor
-              item.strokeStyle = item.data.strokeStyle
-              item.arrowColor = item.data.arrowColor
-              item.fromArrowColor = item.data.arrowColor
-              item.toArrowColor = item.data.arrowColor
-              item.animatePlay = false
-              item.fontColor = '#000000'
-            }
-          })
-          getTopology(this.topologyIndex).caches = {
-            index: 0,
-            list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
+          }, 100)
+          break
+        case 'moveOutNode':
+        case 'moveOutLine':
+          // this.tooltipPosition.show=false;
+          // return
+          if (!this.timer3) {
+            this.timer3 = setTimeout(() => {
+              this.tooltipPosition.show = false
+              this.timer3 = null
+            }, 50)
+          } else {
+            clearTimeout(this.timer3)
+            this.timer3 = setTimeout(() => {
+              this.tooltipPosition.show = false
+              this.timer3 = null
+            }, 50)
           }
-        })
-      },
-
-      animateCanvas () {
-        getTopology(this.topologyIndex).render()
-        getTopology(this.topologyIndex).animate()
-      },
-
-      refreshTopology () {
-        // canvas.open()
-      },
-
-      dropdownClick () {
-
-      },
-
-      changeTopologyOpt (val, key) {
-        // this.topologyData.data[key]=this.colorRGBtoHex(val);
-        // getTopology(this.index).data[key]=val;
-        // getTopology(this.index).render();
-        const dataOption = getTopology(this.topologyIndex).data
-        dataOption[key] = this.lineName
-        getTopology(this.topologyIndex).render()
-      },
-      notModuleIDArrChange (id) {
-        this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
-      },
-      // 保存
-      saveTopology () {
-        const topologyData = getTopology(this.topologyIndex).pureData()
-        let flag = true
-        const arr = []
-        this.notModuleIDArr = []
-        topologyData.pens.forEach(item => {
-          if (item.type === 0 && ((!item.data) || (item.data && !item.data.moduleId))) {
-            arr.push(item)
+          break
+      }
+      // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
+      setTimeout(() => {
+        switch (event) {
+          case 'node':
+          case 'addNode':
+            this.modulesDiff(data)
+            if (data.data.expressArr.length === 0 && event !== 'node') {
+              data.data.expressArr.push('')
+              data.data.legends.push('')
+            }
+            this.props = {
+              node: data,
+              line: null,
+              multi: false,
+              expand: this.props.expand,
+              nodes: null,
+              locked: data.locked,
+              pen: data,
+              pens: null
+            }
+            this.$nextTick(() => {
+              if (this.$refs.CanvasProps) {
+                if (this.penId !== data.id) {
+                  this.$refs.CanvasProps.tab = '1'
+                }
+                this.penId = data.id
+              }
+            })
+            break
+          case 'line':
+          case 'addLine':
+            this.props = {
+              node: null,
+              line: data,
+              multi: false,
+              nodes: null,
+              locked: data.locked,
+              pen: data,
+              pens: null
+            }
+            this.$nextTick(() => {
+              if (this.$refs.CanvasProps) {
+                if (this.penId !== data.id) {
+                  this.$refs.CanvasProps.tab = '1'
+                }
+                this.penId = data.id
+              }
+            })
+            break
+          case 'multi':
+            this.props = {
+              node: null,
+              line: null,
+              multi: true,
+              nodes: data.length > 1 ? data : null,
+              locked: this.getLocked({ nodes: data }),
+              pen: null,
+              pens: data.length > 1 ? data : null
+            }
+            break
+          case 'space':
+            this.penId = undefined
             this.props = {
               node: null,
               line: null,
@@ -1801,231 +1349,683 @@
               pen: null,
               pens: null
             }
-            flag = false
-          }
-        })
-        if (!flag) {
-          this.notModuleIDArr = arr
-        }
-        if (flag) {
-          this.editTopologyFlag = false
-          topologyData.rule = false
-          topologyData.grid = false
-          topologyData.gridSize = 10
-          topologyData.pens.forEach(item => {
-            item.animatePlay = item.data.animatePlay
-            item.data.animateType = item.animateType
-            if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-              item.image = ''
-              item.animateFrames = []
-              item.animateReady = null
-              delete item.img
-              delete item.lastImage
-            }
-            item.data.expressArr = item.data.expressArr.filter((expression, i) => {
-              if (!expression) {
-                item.data.legends.splice(i, 1)
-                return false
-              } else {
-                return true
+            break
+          case 'moveOut':
+            break
+          case 'moveNodes':
+          case 'resizeNodes':
+            if (data.length > 1) {
+              this.props = {
+                node: null,
+                line: null,
+                multi: true,
+                nodes: data,
+                locked: this.getLocked({ nodes: data }),
+                pen: null,
+                pens: null
               }
-            })
-          })
-          if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
-            getTopology(this.topologyIndex).data.scale = this.oldScale
+            } else {
+              this.props = {
+                node: data[0],
+                line: null,
+                multi: false,
+                nodes: null,
+                locked: false,
+                pen: data[0],
+                pens: null
+              }
+            }
+            break
+          case 'resize': {
+            const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).canvasPos = domRect
+            }
+            break
           }
-          this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
-            this.prevent_opt.save = false
-            if (res.code === 200) {
-              this.$message({
-                message: this.$t('tip.saveSuccess'),
-                type: 'success'
+          case 'scale': {
+            if (this.$refs.topTool) {
+              this.$refs.topTool.scaleNum = parseInt(data * 100)
+            }
+            break
+          }
+          case 'locked': {
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+          }
+          case 'delete': {
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+          }
+        }
+        switch (event) {
+          case 'node':
+          case 'line':
+          case 'space':
+          case 'scale':
+          case 'translate':
+            this.moduleId = ''
+            this.showNodeTools('')
+            this.popDataShowUpdate('', false)
+            if (!this.editTopologyFlag) {
+              getTopology(this.topologyIndex)
+            }
+            break
+        }
+        switch (event) {
+          case 'space':
+          case 'scale':
+          case 'translate':
+            this.getNodesArr()
+            // if(!this.timer2){
+            //   this.timer2=setTimeout(()=>{
+            //     this.getNodesArr();
+            //     this.timer2=null
+            //   },300)
+            // }else{
+            //   clearTimeout(this.timer2);
+            //   this.timer2=setTimeout(()=>{
+            //     this.getNodesArr();
+            //     this.timer2=null
+            //   },300)
+            // }
+            break
+        }
+      }, 0)
+    },
+
+    getLocked (data) {
+      let locked = true
+      if (data.nodes && data.nodes.length) {
+        for (const item of data.nodes) {
+          if (!item.locked) {
+            locked = false
+            break
+          }
+        }
+      }
+      if (locked && data.lines) {
+        for (const item of data.lines) {
+          if (!item.locked) {
+            locked = false
+            break
+          }
+        }
+      }
+
+      return locked
+    },
+
+    onUpdateProps (node) {
+      // 如果是node属性改变，需要传入node，重新计算node相关属性值
+      // 如果是line属性改变，无需传参
+      getTopology(this.topologyIndex).updateProps(node)
+    },
+
+    handleAvatarSuccess () {
+
+    },
+    beforeAvatarUpload (file, fileList) {
+      const this_ = this
+      const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
+
+      if (!isJPG) {
+        this.$message.error(this_.$t('project.topology.imgFormat'))
+        return false
+      }
+      // if (!isLt2M) {
+      //   this.$message.error( this_.$t('project.topology.imgSize'));
+      //   return false;
+      // }
+      const isSize = new Promise(function (resolve, reject) {
+        const width = 100
+        const height = 100
+        const _URL = window.URL || window.webkitURL
+        const img = new Image()
+        img.onload = function () {
+          const valid = img.width > width && img.height > height
+          valid ? resolve() : reject()
+        }
+        img.src = _URL.createObjectURL(file.raw)
+      }).then(() => {
+        if (isJPG) {
+          this.file = file.raw
+        }
+        return file.raw
+      }, () => {
+        this.$message.error(this_.$t('project.topology.imgMeasure'))
+        return Promise.reject()
+      })
+      return false
+    },
+
+    toolShowChange (attr) {
+      this.toolShow[attr] = !this.toolShow[attr]
+    },
+    /* topology 方法 */
+    end (v) {
+
+    },
+    /* tools 方法 */
+
+    imgUpload () {
+      const this_ = this
+      if (!this.uploadPic.unit) {
+        this.$message({
+          message: this_.$t('project.topology.unitError'),
+          type: 'error'
+        })
+        return
+      }
+      if (!this.file) {
+        this.$message({
+          message: this_.$t('project.topology.imgError'),
+          type: 'error'
+        })
+        return
+      }
+      this.upload()
+    },
+    upload () {
+      const form = new FormData()
+      form.append('file', this.file)
+      if (this.uploadPic.name) {
+        form.append('name', this.uploadPic.name)
+      } else {
+        form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
+      }
+      form.append('unit', this.uploadPic.unit)
+      this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.uploadPicShow = false
+          this.dealImg(`monitor/project/topo/icon/${res.data.id}`).then((data) => {
+            const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
+            if (group) {
+              group.children.push({
+                ...imageTemp,
+                data: {
+                  ...imageTemp.data,
+                  text: res.data.imageName,
+                  image: data,
+                  imageId: res.data.id,
+                  unit: this.uploadPic.unit
+                }
               })
-              this.$store.commit('setShowTopoScreen', this.topoScreenState)
-              this.$nextTick(() => {
-                getTopology(this.topologyIndex).lock(1)
-                const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
-                getTopology(this.topologyIndex).canvasPos = domRect
-                this.reload()
+            } else {
+              this.tools.push({
+                group: this.uploadPic.unit,
+                children: [{
+                  ...imageTemp,
+                  data: {
+                    ...imageTemp.data,
+                    text: res.data.imageName,
+                    image: data,
+                    imageId: res.data.id,
+                    unit: this.uploadPic.unit
+                  }
+                }]
               })
             }
-          }).catch(res => {
-            this.prevent_opt.save = false
-            this.$message({
-              message: res.msg,
-              type: 'error'
-            })
           })
         } else {
-          this.$message({
-            showClose: true,
-            message: this.$t('project.topology.selMod'),
-            type: 'warning'
+          this.$message.error(res.msg)
+        }
+      })
+    },
+
+    delImg (item) {
+      this.$delete('monitor/project/topo/icon?ids=' + item.data.imageId).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          this.addNodeInit()
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+
+    addNodeInit (imgidList) {
+      if (!this.fromOverView) {
+        this.$get('monitor/project/topo/icon').then(res => {
+          this.imgageLoading = true
+          // this.tools[1].children=[];
+          const imgArr = []
+          const promiseArr = []
+          res.data.list.forEach((item, index) => {
+            item.imageName = item.name
+            delete item.name
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}`))
+            imgArr.push({ ...item })
           })
-        }
-      },
-      // 取消
-      cancelTopology () {
-        this.editTopologyFlag = false
-        this.$nextTick(() => {
-          getTopology(this.topologyIndex).lock(1)
-          const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
-          getTopology(this.topologyIndex).canvasPos = domRect
-          this.$store.commit('setShowTopoScreen', this.topoScreenState)
-        })
-        this.reload()
-      },
-      // 预览
-      previewTopology () {
-        const data = JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))
-        data.pens.forEach((item) => {
-          item.animatePlay = item.data.animatePlay
-        })
-        this.topoPrevData = JSON.parse(JSON.stringify(data))
-        this.topoPrevData.rule = false
-        this.topoPrevData.grid = false
-        this.previewShow = true
-      },
-
-      // 联动 project
-      changeProjectTitle () {
-        const data = getTopology(this.topologyIndex).data
-        this.topologyInfo = {
-          fontSize: data.data.fontSize,
-          align: data.data.align,
-          fontColor: data.data.fontColor,
-          opacity: data.data.opacity,
-          name: data.name
-        }
-      },
-      /* tools 方法 */
-
-      winResize () {
-        setTimeout(() => {
-          const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
-          getTopology(this.topologyIndex).canvasPos = domRect
-          if (this.fromOverView) {
-            getTopology(this.topologyIndex).open(this.oldTopologyData)
-          }
-          let flag = false
-
-          const position = {
-            x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
-            y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
-          }
-          getTopology(this.topologyIndex).data.pens.forEach(item => {
-            if (flag) {
-              return
-            }
-            if (item.rect.ex > position.x || item.rect.ey > position.y) {
-              getTopology(this.topologyIndex).fitView(20)
-              flag = true
-            }
-          })
-          getTopology(this.topologyIndex).centerView(20)
-          this.getNodesArr()
-        }, 100)
-      },
-      canvasMove (e) { // 画布上的移动 确定tooltip的位置
-        if (this.tooltipPosition.show) {
-          return
-        }
-        window.ePosition = e
-      },
-      tooltipOver () {
-        clearTimeout(this.timer3)
-        this.timer3 = null
-      },
-      tooltipOut () {
-        this.timer3 = setTimeout(() => {
-          this.tooltipPosition.show = false
-          this.timer3 = null
-        }, 50)
-      },
-      nodeDefaultWidth (nodeName) {
-        switch (nodeName) {
-          case 'myCube':
-          case 'rectangleImg':
-            return 0
-          default:
-            return 1
-        }
-      },
-      previewBeforeClose (done) {
-        this.$emit('changeTopologyIndexF')
-        done()
-      },
-      selpopIs (pen, state) { // 判断是否有图表
-        let flag = true
-        if (state.id === 'other') {
-          flag = false
-        }
-        if (state.id === 'total' && pen.data.expressArr.length === 0) {
-          flag = false
-        }
-        return flag
-      },
-      modelPopError (pen, state) {
-        if (item.id === 'asset' && this.activeModelItem.assetError) {
-          return true
-        }
-        if (item.id === 'alert' && this.activeModelItem.alertError) {
-          return true
-        }
-        if (item.id === 'endpoint' && this.activeModelItem.endpointError) {
-          return true
-        }
-        return false
-      },
-      redoIndexChange (index) {
-        this.redoIndex = index
-      },
-      querySearch (queryString, cb) {
-        const restaurants = this.unitArr
-        const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
-        // 调用 callback 返回建议列表的数据
-        cb(results)
-      },
-      createFilter (queryString) {
-        return (restaurant) => {
-          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
-        }
-      },
-      uploadPicChange () {
-        this.unitArr = []
-        this.tools.forEach((item, index) => {
-          if (index > 0) {
-            this.unitArr.push({
-              value: item.group
+          Promise.all(promiseArr).then((res2) => {
+            this.iconArray = [...res.data.list]
+            this.iconArray.forEach((item, index) => {
+              item.image = res2[index]
+              const group = this.tools.find(tool => tool.group === item.unit)
+              if (group) {
+                group.children.push({
+                  ...imageTemp,
+                  data: {
+                    ...imageTemp.data,
+                    text: item.imageName,
+                    image: res2[index],
+                    imageId: item.id,
+                    unit: item.unit
+                  }
+                })
+              } else {
+                this.tools.push({
+                  group: item.unit,
+                  children: [{
+                    ...imageTemp,
+                    data: {
+                      ...imageTemp.data,
+                      text: item.imageName,
+                      image: res2[index],
+                      imageId: item.id,
+                      unit: item.unit
+                    }
+                  }]
+                })
+              }
             })
+
+            this.imgInit = true
+          })
+        })
+      } else {
+        this.imgageLoading = true
+        const promiseArr = []
+        imgidList.forEach((item, index) => {
+          if (item.data.imageId) {
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}`))
+          } else {
+            promiseArr.push('')
           }
         })
-        this.uploadPic.name = ''
-        this.uploadPic.unit = ''
-        this.file = null
-        this.uploadPicShow = true
-      },
-      zoomMap (num) {
-        getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
-      },
-      penToBottom () {
-        getTopology(this.topologyIndex).bottom()
-      },
-      changeScreen () {
-        this.$store.commit('setShowTopoScreen', !this.topoScreen)
+        Promise.all(promiseArr).then(res2 => {
+          this.iconArray = imgidList.map(item => {
+            return {
+              id: item.data.imageId
+            }
+          })
+          this.iconArray.forEach((item, index) => {
+            if (item.id) {
+              item.image = res2[index]
+            }
+          })
+          this.imgInit = true
+        })
       }
     },
-    destroyed () {
-      if (getTopology(this.topologyIndex)) {
-        getTopology(this.topologyIndex).destroy()
-        setTopology(this.topologyIndex, null)
+
+    dealImg (url) {
+      // 处理后端传过来的图片流乱码问题
+      if (url) {
+        return new Promise((resolve, reject) => {
+          this.$axios
+            .get(url, {
+              responseType: 'arraybuffer'
+            })
+            .then(res => {
+              return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
+            })
+            .then(data => {
+              resolve(data)
+              // changeImage(data,(img)=>{
+              //   resolve(img)
+              // })
+            })
+            .catch(err => {
+            })
+        })
       }
-      if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
-        document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
+    },
+
+    delPen (obj) { // 删除元素
+      getTopology(this.topologyIndex).delete(obj)
+      this.props = {
+        node: null,
+        line: null,
+        multi: false,
+        nodes: null,
+        locked: false,
+        pen: null,
+        pens: null
       }
-      window.removeEventListener('resize', this.winResize)
+    },
+
+    editTopology (val) {
+      this.editTopologyFlag = true
+      this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
+      this.$store.commit('setShowTopoScreen', true)
+      setTimeout(() => {
+        getTopology(this.topologyIndex).lock(0)
+        getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
+          if (item.animatePlay) {
+            item.stopAnimate()
+          }
+          if (!item.data.expressArr.length) {
+            item.data.expressArr = ['']
+            item.data.legends = ['']
+          }
+          item.animateType = item.data.animateType
+          if (item.type === 0) {
+            item.fillStyle = item.data.fillStyle
+            item.strokeStyle = item.data.strokeStyle
+            item.animatePlay = false
+            item.fontColor = '#000000'
+            item.gradientType = item.data.gradientType ? item.data.gradientType : 0
+            if (!item.data.gradientColor) {
+              item.data.gradientType = 0
+              item.data.gradientColor = '#bae7ff'
+            }
+            if (item.data.gradientType === 0) {
+              item.bkType = 0
+            } else {
+              item.bkType = 1
+            }
+          } else if (item.type === 1) {
+            item.animateColor = item.data.animateColor
+            item.strokeStyle = item.data.strokeStyle
+            item.arrowColor = item.data.arrowColor
+            item.fromArrowColor = item.data.arrowColor
+            item.toArrowColor = item.data.arrowColor
+            item.animatePlay = false
+            item.fontColor = '#000000'
+          }
+        })
+        getTopology(this.topologyIndex).caches = {
+          index: 0,
+          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
+        }
+      })
+    },
+
+    animateCanvas () {
+      getTopology(this.topologyIndex).render()
+      getTopology(this.topologyIndex).animate()
+    },
+
+    refreshTopology () {
+      // canvas.open()
+    },
+
+    dropdownClick () {
+
+    },
+
+    changeTopologyOpt (val, key) {
+      // this.topologyData.data[key]=this.colorRGBtoHex(val);
+      // getTopology(this.index).data[key]=val;
+      // getTopology(this.index).render();
+      const dataOption = getTopology(this.topologyIndex).data
+      dataOption[key] = this.lineName
+      getTopology(this.topologyIndex).render()
+    },
+    notModuleIDArrChange (id) {
+      this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
+    },
+    // 保存
+    saveTopology () {
+      const topologyData = getTopology(this.topologyIndex).pureData()
+      let flag = true
+      const arr = []
+      this.notModuleIDArr = []
+      topologyData.pens.forEach(item => {
+        if (item.type === 0 && ((!item.data) || (item.data && !item.data.moduleId))) {
+          arr.push(item)
+          this.props = {
+            node: null,
+            line: null,
+            multi: false,
+            nodes: null,
+            locked: false,
+            pen: null,
+            pens: null
+          }
+          flag = false
+        }
+      })
+      if (!flag) {
+        this.notModuleIDArr = arr
+      }
+      if (flag) {
+        this.editTopologyFlag = false
+        topologyData.rule = false
+        topologyData.grid = false
+        topologyData.gridSize = 10
+        topologyData.pens.forEach(item => {
+          item.animatePlay = item.data.animatePlay
+          item.data.animateType = item.animateType
+          if (item.type === 0 && JSON.stringify(item.data.imageId)) {
+            item.image = ''
+            item.animateFrames = []
+            item.animateReady = null
+            delete item.img
+            delete item.lastImage
+          }
+          item.data.expressArr = item.data.expressArr.filter((expression, i) => {
+            if (!expression) {
+              item.data.legends.splice(i, 1)
+              return false
+            } else {
+              return true
+            }
+          })
+        })
+        if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
+          getTopology(this.topologyIndex).data.scale = this.oldScale
+        }
+        this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
+          this.prevent_opt.save = false
+          if (res.code === 200) {
+            this.$message({
+              message: this.$t('tip.saveSuccess'),
+              type: 'success'
+            })
+            this.$store.commit('setShowTopoScreen', this.topoScreenState)
+            this.$nextTick(() => {
+              getTopology(this.topologyIndex).lock(1)
+              const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+              getTopology(this.topologyIndex).canvasPos = domRect
+              this.reload()
+            })
+          }
+        }).catch(res => {
+          this.prevent_opt.save = false
+          this.$message({
+            message: res.msg,
+            type: 'error'
+          })
+        })
+      } else {
+        this.$message({
+          showClose: true,
+          message: this.$t('project.topology.selMod'),
+          type: 'warning'
+        })
+      }
+    },
+    // 取消
+    cancelTopology () {
+      this.editTopologyFlag = false
+      this.$nextTick(() => {
+        getTopology(this.topologyIndex).lock(1)
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+        getTopology(this.topologyIndex).canvasPos = domRect
+        this.$store.commit('setShowTopoScreen', this.topoScreenState)
+      })
+      this.reload()
+    },
+    // 预览
+    previewTopology () {
+      const data = JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))
+      data.pens.forEach((item) => {
+        item.animatePlay = item.data.animatePlay
+      })
+      this.topoPrevData = JSON.parse(JSON.stringify(data))
+      this.topoPrevData.rule = false
+      this.topoPrevData.grid = false
+      this.previewShow = true
+    },
+
+    // 联动 project
+    changeProjectTitle () {
+      const data = getTopology(this.topologyIndex).data
+      this.topologyInfo = {
+        fontSize: data.data.fontSize,
+        align: data.data.align,
+        fontColor: data.data.fontColor,
+        opacity: data.data.opacity,
+        name: data.name
+      }
+    },
+    /* tools 方法 */
+
+    winResize () {
+      setTimeout(() => {
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
+        getTopology(this.topologyIndex).canvasPos = domRect
+        if (this.fromOverView) {
+          getTopology(this.topologyIndex).open(this.oldTopologyData)
+        }
+        let flag = false
+
+        const position = {
+          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
+          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
+        }
+        getTopology(this.topologyIndex).data.pens.forEach(item => {
+          if (flag) {
+            return
+          }
+          if (item.rect.ex > position.x || item.rect.ey > position.y) {
+            getTopology(this.topologyIndex).fitView(20)
+            flag = true
+          }
+        })
+        getTopology(this.topologyIndex).centerView(20)
+        this.getNodesArr()
+      }, 100)
+    },
+    canvasMove (e) { // 画布上的移动 确定tooltip的位置
+      if (this.tooltipPosition.show) {
+        return
+      }
+      window.ePosition = e
+    },
+    tooltipOver () {
+      clearTimeout(this.timer3)
+      this.timer3 = null
+    },
+    tooltipOut () {
+      this.timer3 = setTimeout(() => {
+        this.tooltipPosition.show = false
+        this.timer3 = null
+      }, 50)
+    },
+    nodeDefaultWidth (nodeName) {
+      switch (nodeName) {
+        case 'myCube':
+        case 'rectangleImg':
+          return 0
+        default:
+          return 1
+      }
+    },
+    previewBeforeClose (done) {
+      this.$emit('changeTopologyIndexF')
+      done()
+    },
+    selpopIs (pen, state) { // 判断是否有图表
+      let flag = true
+      if (state.id === 'other') {
+        flag = false
+      }
+      if (state.id === 'total' && pen.data.expressArr.length === 0) {
+        flag = false
+      }
+      return flag
+    },
+    modelPopError (pen, state) {
+      if (item.id === 'asset' && this.activeModelItem.assetError) {
+        return true
+      }
+      if (item.id === 'alert' && this.activeModelItem.alertError) {
+        return true
+      }
+      if (item.id === 'endpoint' && this.activeModelItem.endpointError) {
+        return true
+      }
+      return false
+    },
+    redoIndexChange (index) {
+      this.redoIndex = index
+    },
+    querySearch (queryString, cb) {
+      const restaurants = this.unitArr
+      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    uploadPicChange () {
+      this.unitArr = []
+      this.tools.forEach((item, index) => {
+        if (index > 0) {
+          this.unitArr.push({
+            value: item.group
+          })
+        }
+      })
+      this.uploadPic.name = ''
+      this.uploadPic.unit = ''
+      this.file = null
+      this.uploadPicShow = true
+    },
+    zoomMap (num) {
+      getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
+    },
+    penToBottom () {
+      getTopology(this.topologyIndex).bottom()
+    },
+    changeScreen () {
+      this.$store.commit('setShowTopoScreen', !this.topoScreen)
     }
+  },
+  destroyed () {
+    if (getTopology(this.topologyIndex)) {
+      getTopology(this.topologyIndex).destroy()
+      setTopology(this.topologyIndex, null)
+    }
+    if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
+      document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
+    }
+    window.removeEventListener('resize', this.winResize)
   }
+}
 </script>
 <style lang="scss">
   .el-dropdown-menu {
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index f4723c7bc..d3e9d5c74 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -65,6 +65,7 @@
                 :sort-orders="['ascending', 'descending']"
                 :width="`${item.width}`"
                 class="data-column"
+
               >
                 <template slot="header">
                   <span>{{item.label}}</span>
@@ -75,19 +76,19 @@
                     <span>{{scope.row[item.prop].name}}</span>
                   </template>
                   <template v-else-if="item.prop == 'model'">
-                    <span>{{scope.row[item.prop].name}}</span>
+                    <span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
                   </template>
                   <template v-else-if="item.prop == 'dc'">
-                    <span>{{scope.row[item.prop].name}}</span>
+                    <span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
                   </template>
                    <template v-else-if="item.prop == 'cabinet'">
-                    <span>{{scope.row[item.prop].name}}</span>
+                     <span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
                   </template>
                   <template v-else-if="item.prop == 'type'">
-                    <span>{{scope.row[item.prop].name}}</span>
+                    <span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
                   </template>
                   <template v-else-if="item.prop == 'state'">
-                    <span>{{scope.row[item.prop].name}}</span>
+                    <span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
                   </template>
                   <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
                 </template>
@@ -264,7 +265,7 @@ export default {
           labelModule: [],
           basic_auth: {
             username: '',
-            password: ''
+            pin: ''
           },
           bearer_token: ''
         },
@@ -754,13 +755,13 @@ export default {
     currentModuleCopy: {
       immediate: true,
       handler (n, o) {
-        if (n.type && n.type.toLowerCase() == 'snmp') {
-          this.endpointTableTitle[4].show = false
-          this.endpointTableTitle[5].show = false
-        } else {
-          this.endpointTableTitle[4].show = true
-          this.endpointTableTitle[5].show = true
-        }
+        // if (n.type && n.type.toLowerCase() == 'snmp') {
+        //   this.endpointTableTitle[4].show = false
+        //   this.endpointTableTitle[5].show = false
+        // } else {
+        //   this.endpointTableTitle[4].show = true
+        //   this.endpointTableTitle[5].show = true
+        // }
       }
     }
   }
@@ -1130,7 +1131,7 @@ export default {
   .add-endpoint{
     display: inline-block;
     background: #F9F9F9;
-    border: 1px solid $--primary-border-color;
+    border: 1px solid #dedede;
     border-radius: 2px;
     width: 28px;
     height: 28px;
@@ -1141,7 +1142,7 @@ export default {
   .top-tool-btn{
     height: 32px;
     width: 32px;
-    border: 1px solid $--primary-border-color;
+    border: 1px solid #dedede;
     outline: none;
     border-radius: 2px;
     background-color: #F9F9F9;
diff --git a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue b/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
index eba462bc9..e872e0c32 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
@@ -25,16 +25,16 @@
           </el-form-item>
           <!-- ChartTemplate -->
           <el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate">
-            <v-selectpage 
-            :data="chartlList" 
-            :tb-columns="ChartSearchShowFields" 
-            :max-select-limit="3" 
+            <v-selectpage
+            :data="chartlList"
+            :tb-columns="ChartSearchShowFields"
+            :max-select-limit="3"
             :multiple="true"
             title="ChartSearch"
             placeholder="Please select item"
             key-field="id"
-            v-model="editModel.chartIds" 
-            show-field="name" 
+            v-model="editModel.chartIds"
+            show-field="name"
             class="form-control"
             @values="(data) => {editModel.chartIds = data.map(d => d.id).join(',')}"
           ></v-selectpage>
@@ -59,7 +59,7 @@ import selectWalk from '../../popBox/selectWalk'
 export default {
   name: 'modelBox',
   components: {
-    'select-walk': selectWalk,
+    'select-walk': selectWalk
   },
   props: {
     obj: {
@@ -75,27 +75,27 @@ export default {
   },
   data () {
     return {
-      editModel: {}, 
+      editModel: {},
       brandList: [], // brand 列表数据
-      editModule: {}, 
+      editModule: {},
       chartlList: [], // chart 列表数据
       ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
-        {title: 'id',data: 'id'},
-        {title: 'name',data: 'name'},
-        {title: 'desc',data: 'type'},
-        {title: 'Description',data: 'Description'}
+        { title: 'id', data: 'id' },
+        { title: 'name', data: 'name' },
+        { title: 'desc', data: 'type' },
+        { title: 'Description', data: 'Description' }
       ],
       url: 'asset/model',
       brandUrl: 'asset/brand',
       rightBox: { model: { show: false } },
       roles: [],
       rules: {
-          model: [
-            { required: true, message: '必填', trigger: 'blur' }
-          ],
-          brandId: [
-            { required: true, message: this.$t('validate.required'), trigger: 'change' }
-          ]
+        model: [
+          { required: true, message: '必填', trigger: 'blur' }
+        ],
+        brandId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
       }
     }
   },
@@ -125,7 +125,7 @@ export default {
       this.$refs.modelForm.validate((valid) => {
         if (valid) {
           if (this.editModel.id) {
-            console.log(this.editModel);
+            console.log(this.editModel)
             this.$put(this.url, this.editModel).then(res => {
               this.prevent_opt.save = false
               if (res.code === 200) {
@@ -154,7 +154,7 @@ export default {
     },
     save () {
       if (typeof this.editModel.brandId === 'string') { // 判断是否是新增的
-        this.$post(this.brandUrl, {name: this.editModel.brandId}).then(res => {
+        this.$post(this.brandUrl, { name: this.editModel.brandId }).then(res => {
           if (res.code === 200) { // 新增成功
             this.getBrandList().then(res2 => { // 新增成功后，重新调用getBrandList，刷新brandList
               const newBrand = this.brandList.find(b => b.name === this.editModel.brandId) // 取出刚新增的brand对象
@@ -168,10 +168,9 @@ export default {
       } else {
         this.saveModel()
       }
-      
     },
     selectWalk (walk) {
-      console.log(walk);
+      console.log(walk)
       if (this.editModule.walk.indexOf(walk) != -1) {
         this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
       } else {
@@ -191,8 +190,8 @@ export default {
     },
     /* 获取chart列表数据 */
     ChartTemplateList () {
-      this.$get('visual/panel/chart',{pageSize : -1 , varType : 1, panelId: 0}).then(res => {
-        console.log(res);
+      this.$get('visual/panel/chart', { pageSize: -1, varType: 1, panelId: 0 }).then(res => {
+        console.log(res)
         this.chartlList = res.data.list
       })
     }
diff --git a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
index cda66c7b5..fe5a570de 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
@@ -22,11 +22,11 @@
           <!--password-->
           <el-form-item :label="$t('config.user.pin')" prop="pin">
             <el-input id="account-input-password" v-model="editUser.pin"  maxlength="16" placeholder=""
-                      show-word-limit size="small" type="password" @blur="passwordBlur"></el-input>
+                      show-word-limit size="small" type="password" @blur="pinBlur"></el-input>
           </el-form-item>
-          <!--passwordChange-->
-          <el-form-item :label="$t('config.user.confirmPwd')" label-width="200px" prop="pinChange">
-            <el-input id="account-input-passwordChange" v-model="editUser.pinChange"  maxlength="16" placeholder=""
+          <!--pinChange-->
+          <el-form-item :label="$t('config.user.confirmPin')" label-width="200px" prop="pinChange">
+            <el-input id="account-input-pinChange" v-model="editUser.pinChange"  maxlength="16" placeholder=""
                       show-word-limit size="small" type="password"></el-input>
           </el-form-item>
           <!--email-->
@@ -90,11 +90,11 @@ export default {
   },
   data () {
     const vm = this
-    const validatePassword = (rule, value, callback) => { // 确认密码的二次校验
+    const validatePin = (rule, value, callback) => { // 确认密码的二次校验
       if (value === '' && this.editUser.pin) {
-        callback(new Error(this.$t('config.user.inputConfirmPwd')))
+        callback(new Error(this.$t('config.user.inputConfirmPin')))
       } else if (value !== this.editUser.pin) {
-        callback(new Error(this.$t('config.user.confirmPwdErr')))
+        callback(new Error(this.$t('config.user.confirmPinErr')))
       } else {
         callback()
       }
@@ -114,7 +114,7 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         pinChange: [
-          { validator: validatePassword, trigger: 'blur' },
+          { validator: validatePin, trigger: 'blur' },
           { required: true, message: '', trigger: 'blur' }
         ],
         roleIds: [
@@ -129,7 +129,7 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         pinChange: [
-          { validator: validatePassword, trigger: 'blur' }
+          { validator: validatePin, trigger: 'blur' }
         ],
         roleIds: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -166,9 +166,9 @@ export default {
       this.$emit('close', refresh)
     },
     /* 密码失去焦点 检验确认密码 */
-    passwordBlur () {
+    pinBlur () {
       if (this.editUser.pin && this.editUser.pinChange) {
-        this.$refs.accountForm.validateField('passwordChange')
+        this.$refs.accountForm.validateField('pinChange')
       }
     },
     getRoles () {
diff --git a/nezha-fronted/src/components/common/rightBox/agentBox.vue b/nezha-fronted/src/components/common/rightBox/agentBox.vue
index 67b7f0ef9..5b9d08361 100644
--- a/nezha-fronted/src/components/common/rightBox/agentBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/agentBox.vue
@@ -86,6 +86,7 @@ export default {
   data () {
     return {
       agent2: agent2,
+      agentPrometheusEnabled: localStorage.getItem('nz-prometheus-federation-enabled'),
       rules: {
         'dc.name': [
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index 7e10d3ce1..9696a9f79 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -395,10 +395,10 @@ export default {
           port: 22,
           params: {
             user: '',
-            method: 'password',
-            password: '',
+            method: 'pin',
+            pin: '',
             key: '',
-            keyPassword: ''
+            keyPin: ''
           }
         })
       } else if (type == 'TELNET') {
@@ -407,9 +407,9 @@ export default {
           port: 23,
           params: {
             user: '',
-            password: '',
+            pin: '',
             userTip: '',
-            passwordTip: '',
+            pinTip: '',
             reloginTip: ''
           }
         })
@@ -422,8 +422,8 @@ export default {
             community: 'public',
             securityName: '',
             securityLevel: '',
-            password: '',
-            privPassword: '',
+            pin: '',
+            privPin: '',
             authProtocol: '',
             privProtocol: '',
             contextName: ''
diff --git a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
index 09047fe45..105f5519a 100644
--- a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
@@ -544,10 +544,10 @@ export default {
           port: 22,
           params: {
             user: '',
-            method: 'password',
-            password: '',
+            method: 'pin',
+            pin: '',
             key: '',
-            passwordKey: ''
+            pinKey: ''
           }
         })
       } else if (type == 'TELNET') {
@@ -556,9 +556,9 @@ export default {
           port: 23,
           params: {
             user: '',
-            password: '',
+            pin: '',
             userTip: '',
-            passwordTip: '',
+            pinTip: '',
             reloginTip: ''
           }
         })
@@ -571,8 +571,8 @@ export default {
             community: 'public',
             securityName: '',
             securityLevel: '',
-            password: '',
-            privPassword: '',
+            pin: '',
+            privPin: '',
             authProtocol: '',
             privProtocol: '',
             contextName: ''
diff --git a/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
index 7c2aa58f6..55bf823c4 100644
--- a/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
@@ -178,7 +178,7 @@ export default {
           labelModule: [],
           basic_auth: {
             username: '',
-            password: ''
+            pin: ''
           },
           bearer_token: ''
         },
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index e018a4c2c..9572876c1 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -84,7 +84,7 @@ export default {
       editDc: {},
       rules: {
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         state: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index 3405503f5..465c57692 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -117,7 +117,7 @@
             </el-form-item>
             <!--host-->
             <el-form-item :label='$t("project.endpoint.host")' prop="host">
-              <el-input placeholder="" v-model.number="editEndpoint.configs.host" size="small" id="module-box-input-host"></el-input>
+              <el-input placeholder="" v-model="editEndpoint.configs.host" size="small" id="module-box-input-host"></el-input>
             </el-form-item>
             <transition name="el-zoom-in-top">
               <div v-show="showAllBasicOption" >
@@ -226,7 +226,7 @@
             </el-form-item>
 
             <el-form-item :label='$t("project.endpoint.pin")' prop="authtype" v-if="authType === 1" class="half-form-item">
-              <el-input placeholder='' v-model.number="editEndpoint.configs.basic_auth.password" size="small" id="module-box-input-password"></el-input>
+              <el-input placeholder='' v-model.number="editEndpoint.configs.basic_auth.pin" size="small" id="module-box-input-password"></el-input>
             </el-form-item>
 
             <!--authtype 2-->
@@ -454,7 +454,7 @@ export default {
       params.configs = JSON.stringify(params.configs)
       if (this.authType === 2 && !this.editEndpoint.configs.bearer_token) {
         this.$message.error("'token' is required")
-      } else if (this.authType === 1 && !(this.editEndpoint.configs.basic_auth.username && this.editEndpoint.configs.basic_auth.password)) {
+      } else if (this.authType === 1 && !(this.editEndpoint.configs.basic_auth.username && this.editEndpoint.configs.basic_auth.pin)) {
         this.$message.error("'username' and 'password' is required")
       } else {
         this.authType = 0
@@ -608,7 +608,7 @@ export default {
       this.editEndpoint.configs.bearer_token = ''
       this.editEndpoint.configs.basic_auth = {
         username: '',
-        password: ''
+        pin: ''
       }
     },
     copyValue () {
@@ -717,7 +717,7 @@ export default {
           if (params.basic_auth && !params.basic_auth.username) {
             delete params.basic_auth
           }
-          if (params.basic_auth && !params.basic_auth.password) {
+          if (params.basic_auth && !params.basic_auth.pin) {
             delete params.basic_auth
           }
           if (params.param && !Object.keys(params.param).length) {
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index c3d10a74e..049535ef2 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -109,7 +109,7 @@
             </el-form-item>
             <!--host-->
             <el-form-item :label='$t("project.endpoint.host")' prop="host">
-              <el-input placeholder="" v-model.number="editModule.configs.host" size="small" id="module-box-input-host"></el-input>
+              <el-input placeholder="" v-model="editModule.configs.host" size="small" id="module-box-input-host"></el-input>
             </el-form-item>
             <transition name="el-zoom-in-top">
               <div v-show="showAllBasicOption" >
@@ -292,10 +292,10 @@ export default {
         username: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        password: [
+        pin: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        priv_password: [
+        priv_pin: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         max_repetitions: [
@@ -448,7 +448,7 @@ export default {
       params.configs = JSON.stringify(params.configs)
       if (this.authType === 2 && !this.editModule.configs.bearer_token) {
         this.$message.error("'token' is required")
-      } else if (this.authType === 1 && !(this.editModule.configs.basic_auth.username && this.editModule.configs.basic_auth.password)) {
+      } else if (this.authType === 1 && !(this.editModule.configs.basic_auth.username && this.editModule.configs.basic_auth.pin)) {
         this.$message.error("'username' and 'password' is required")
       } else {
         this.authType = 0
@@ -588,7 +588,7 @@ export default {
       this.editModule.configs.bearer_token = ''
       this.editModule.configs.basic_auth = {
         username: '',
-        password: ''
+        pin: ''
       }
     },
     copyValue () {
@@ -696,7 +696,7 @@ export default {
           if (params.basic_auth && !params.basic_auth.username) {
             delete params.basic_auth
           }
-          if (params.basic_auth && !params.basic_auth.password) {
+          if (params.basic_auth && !params.basic_auth.pin) {
             delete params.basic_auth
           }
           if (params.param && !Object.keys(params.param).length) {
diff --git a/nezha-fronted/src/components/common/rightBox/setting/cabinetBox.vue b/nezha-fronted/src/components/common/rightBox/setting/cabinetBox.vue
index 09c6e2af9..33ba9a665 100644
--- a/nezha-fronted/src/components/common/rightBox/setting/cabinetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/setting/cabinetBox.vue
@@ -36,101 +36,101 @@
 </template>
 
 <script>
-  export default {
-    name: "cabinetBox",
-    props: {
-      obj: { type: Object },
-      currentDc: { type: Object }
-    },
-    data () {
-      return {
-        editCabinet: {},
-        rules: {
-          name: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          uSize: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-            { type: 'number', min: 1, max: 47, message: this.$t('validate.uSize'), trigger: 'blur' }
-          ]
-        }
+export default {
+  name: 'cabinetBox',
+  props: {
+    obj: { type: Object },
+    currentDc: { type: Object }
+  },
+  data () {
+    return {
+      editCabinet: {},
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        uSize: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { type: 'number', min: 1, max: 47, message: this.$t('validate.uSize'), trigger: 'blur' }
+        ]
       }
+    }
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
     },
-    methods: {
-      clickOutside () {
-        this.esc(false)
-      },
-      esc (refresh) {
-        this.prevent_opt.save = false
-        this.$emit('close', refresh)
-      },
-      save () {
-        if (this.prevent_opt.save) { return } ;
-        this.prevent_opt.save = true
-        this.$refs.cabinetForm.validate(valid => {
-          if (valid) {
-            this.editCabinet.idcId = this.currentDc.id
-            if (this.editCabinet.id) {
-              this.$put('cabinet', this.editCabinet).then(res => {
-                this.prevent_opt.save = false
-                if (res.code === 200) {
-                  this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-                  this.esc(true)
-                } else {
-                  this.$message.error(res.msg)
-                }
-              })
-            } else {
-              this.$post('cabinet', this.editCabinet).then(res => {
-                this.prevent_opt.save = false
-                if (res.code === 200) {
-                  this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-                  this.esc(true)
-                } else {
-                  this.$message.error(res.msg)
-                }
-              })
-            }
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs.cabinetForm.validate(valid => {
+        if (valid) {
+          this.editCabinet.idcId = this.currentDc.id
+          if (this.editCabinet.id) {
+            this.$put('cabinet', this.editCabinet).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
           } else {
-            this.prevent_opt.save = false
-            return false
+            this.$post('cabinet', this.editCabinet).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
           }
-        })
-      },
-      del () {
-        if (this.prevent_opt.save) { return } ;
-        this.prevent_opt.save = true
-        this.$confirm(this.$t('tip.confirmDelete'), {
-          confirmButtonText: this.$t('tip.yes'),
-          cancelButtonText: this.$t('tip.no'),
-          type: 'warning'
-        }).then(() => {
-          this.$delete('/cabinet?ids=' + this.editCabinet.id).then(response => {
-            this.prevent_opt.save = false
-            if (response.code == 200) {
-              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.esc(true)
-            } else {
-              this.$message.error(response.msg)
-            }
-          })
-        }).catch(() => {
+        } else {
           this.prevent_opt.save = false
-        })
-      }
+          return false
+        }
+      })
     },
-    watch: {
-      obj: {
-        deep: true,
-        immediate: true,
-        handler: function (n, o) {
-          if (n) {
-            this.editCabinet = JSON.parse(JSON.stringify(n))
+    del () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/cabinet?ids=' + this.editCabinet.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code == 200) {
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
           }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    }
+  },
+  watch: {
+    obj: {
+      deep: true,
+      immediate: true,
+      handler: function (n, o) {
+        if (n) {
+          this.editCabinet = JSON.parse(JSON.stringify(n))
         }
       }
     }
   }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
index 9e63fc8a5..d33ce182b 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -61,7 +61,7 @@ export default {
               securityLevel: '',
               authProtocol: '',
               privProtocol: '',
-              privPassword: ''
+              privPin: ''
             },
             configs: [
               {
@@ -92,7 +92,7 @@ export default {
             securityLevel: '',
             authProtocol: '',
             privProtocol: '',
-            privPassword: ''
+            privPin: ''
           },
           configs: [
             {
@@ -117,7 +117,7 @@ export default {
           securityLevel: '',
           authProtocol: '',
           privProtocol: '',
-          privPassword: ''
+          privPin: ''
         },
         configs: [
           {
@@ -240,7 +240,7 @@ export default {
                   securityLevel: '',
                   authProtocol: '',
                   privProtocol: '',
-                  privPassword: ''
+                  privPin: ''
                 }
               }
               configs.forEach(item => {
@@ -269,7 +269,7 @@ export default {
                     securityLevel: '',
                     authProtocol: '',
                     privProtocol: '',
-                    privPassword: ''
+                    privPin: ''
                   },
                   configs: [
                     {
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
index f120f3439..83314b802 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
@@ -71,7 +71,7 @@
                   <div class="mib-browser-ad-search-label">{{$t('login.pin')}}</div>
                 </el-col>
                 <el-col :span="17">
-                  <el-input class="input-x-mini-24" v-model.trim="assetSetting.auth.password" id="traffic-setting-password"></el-input>
+                  <el-input class="input-x-mini-24" v-model.trim="assetSetting.auth.pin" id="traffic-setting-password"></el-input>
                 </el-col>
               </el-row>
 
@@ -101,10 +101,10 @@
 
               <el-row class="mib-browser-ad-search-item" v-if="assetSetting.auth.securityLevel == 'authPriv'">
                 <el-col :span="6">
-                  <div class="mib-browser-ad-search-label">{{$t('project.module.privPassword')}}</div>
+                  <div class="mib-browser-ad-search-label">{{$t('project.module.privPin')}}</div>
                 </el-col>
                 <el-col :span="17">
-                  <el-input class="input-x-mini-24" v-model.trim="assetSetting.auth.privPassword" id="traffic-setting-privPassword"></el-input>
+                  <el-input class="input-x-mini-24" v-model.trim="assetSetting.auth.privPin" id="traffic-setting-privPassword"></el-input>
                 </el-col>
               </el-row>
             </template>
diff --git a/nezha-fronted/src/components/common/rightBox/userBox.vue b/nezha-fronted/src/components/common/rightBox/userBox.vue
index b63e4ee23..289a5b5e3 100644
--- a/nezha-fronted/src/components/common/rightBox/userBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/userBox.vue
@@ -26,11 +26,11 @@
         <!--password-->
         <el-form-item :label="$t('config.account.pin')" prop="pin">
           <el-input id="account-input-password" v-model="editUser.pin" autocomplete="new-password" maxlength="16" placeholder=""
-                    show-word-limit size="small" type="password" @blur="passwordBlur"></el-input>
+                    show-word-limit size="small" type="password" @blur="pinBlur"></el-input>
         </el-form-item>
-        <!--passwordChange-->
-        <el-form-item :label="$t('config.account.confirmPwd')" label-width="200px" prop="passwordChange">
-          <el-input id="account-input-passwordChange" v-model="editUser.pinChange" autocomplete="new-password" maxlength="16" placeholder=""
+        <!--pinChange-->
+        <el-form-item :label="$t('config.account.confirmPin')" label-width="200px" prop="pinChange">
+          <el-input id="account-input-pinChange" v-model="editUser.pinChange" autocomplete="new-password" maxlength="16" placeholder=""
                     show-word-limit size="small" type="password"></el-input>
         </el-form-item>
         <!--email-->
@@ -109,11 +109,11 @@ export default {
     }
   },
   data () {
-    const validatePassword = (rule, value, callback) => { // 确认密码的二次校验
+    const validatepin = (rule, value, callback) => { // 确认密码的二次校验
       if (value === '' && this.editUser.pin) {
-        callback(new Error(this.$t('config.account.inputConfirmPwd')))
+        callback(new Error(this.$t('config.account.inputConfirmPin')))
       } else if (value !== this.editUser.pin) {
-        callback(new Error(this.$t('config.account.confirmPwdErr')))
+        callback(new Error(this.$t('config.account.confirmPinErr')))
       } else {
         callback()
       }
@@ -128,7 +128,7 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         pinChange: [
-          { validator: validatePassword, trigger: 'blur' },
+          { validator: validatepin, trigger: 'blur' },
           { required: true, message: '', trigger: 'blur' }
         ],
         roleIds: [
@@ -143,7 +143,7 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         pinChange: [
-          { validator: validatePassword, trigger: 'blur' }
+          { validator: validatepin, trigger: 'blur' }
         ],
         roleIds: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -228,9 +228,9 @@ export default {
       })
     },
     /* 密码失去焦点 检验确认密码 */
-    passwordBlur () {
+    pinBlur () {
       if (this.editUser.pin && this.editUser.pinChange) {
-        this.$refs.accountForm.validateField('passwordChange')
+        this.$refs.accountForm.validateField('pinChange')
       }
     },
     getScripts () {
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index 7c3f0257b..07d584fbf 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -772,7 +772,7 @@ export default {
             objectInfo[val.label] = val.val
           }
         }
-        console.log('search obj',objectInfo)
+        console.log('search obj', objectInfo)
       })
       this.getHeight()
       // 搜索完成后存储在本地历史记录中
diff --git a/nezha-fronted/src/components/common/searchSelectInfo.vue b/nezha-fronted/src/components/common/searchSelectInfo.vue
index 849c7c121..1fffa07d6 100644
--- a/nezha-fronted/src/components/common/searchSelectInfo.vue
+++ b/nezha-fronted/src/components/common/searchSelectInfo.vue
@@ -142,23 +142,23 @@ const searchSelectInfo = { // value: 传给后台的值；label：显示给用
       label: i18n.t('overall.result.failed')
     }
   ],
-  terminalStatus:[
+  terminalStatus: [
     {
       value: 0,
       label: i18n.t('config.terminallog.statusItem.connecting')
-    },{
+    }, {
       value: 1,
       label: i18n.t('config.terminallog.statusItem.connectionFailed')
-    },{
+    }, {
       value: 2,
       label: i18n.t('config.terminallog.statusItem.over')
-    },{
+    }, {
       value: 3,
       label: i18n.t('config.terminallog.statusItem.kickedOut')
-    },{
+    }, {
       value: 4,
       label: i18n.t('config.terminallog.statusItem.unknownError')
-    },
+    }
   ]
 }
 export default searchSelectInfo
diff --git a/nezha-fronted/src/components/common/table/settings/cabinetTable.vue b/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
index 86a1e2e84..e25584c59 100644
--- a/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
@@ -77,54 +77,54 @@
 </template>
 
 <script>
-  import table from '@/components/common/mixin/table'
-  export default {
-    name: "cabinet Table",
-    mixins: [table],
-    data(){
-      return{
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          },
-          {
-            label: this.$t('overall.name'),
-            prop: 'name',
-            show: true
-          },
-          {
-            label: this.$t('asset.uSize'),
-            prop: 'uSize',
-            show: true
-          },
-          {
-            label: this.$t('config.dc.assets'),
-            prop: 'assetStat',
-            show: true
-          },
-          {
-            label: this.$t('alert.alert'),
-            prop: 'alertStat',
-            show: true
-          },
-          {
-            label: this.$t('config.dc.remark'),
-            prop: 'remark',
-            show: true
-          },
-          {
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            width: 120
-          }
-        ],
-      }
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'cabinet Table',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        },
+        {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        },
+        {
+          label: this.$t('asset.uSize'),
+          prop: 'uSize',
+          show: true
+        },
+        {
+          label: this.$t('config.dc.assets'),
+          prop: 'assetStat',
+          show: true
+        },
+        {
+          label: this.$t('alert.alert'),
+          prop: 'alertStat',
+          show: true
+        },
+        {
+          label: this.$t('config.dc.remark'),
+          prop: 'remark',
+          show: true
+        },
+        {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ]
     }
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
index ea21c3732..53738a280 100644
--- a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
@@ -136,7 +136,7 @@ export default {
           name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
         }
 
-      ],
+      ]
     }
   },
   methods: {
@@ -144,37 +144,37 @@ export default {
       let str = 'nz-icon '
       switch (row.type) {
         case 'line':
-          str += 'nz-icon-LinkChart'
+          str += 'nz-icon-link-chart'
           break
         case 'bar':
-          str += 'nz-icon-barchart'
+          str += 'nz-icon-bar-chart'
           break
         case 'stackArea':
-          str += 'nz-icon-StackArea'
+          str += 'nz-icon-stack-area'
           break
         case 'singleStat':
-          str += 'nz-icon-SingleValue'
+          str += 'nz-icon-single-value'
           break
         case 'pie':
-          str += 'nz-icon-Piechart'
+          str += 'nz-icon-pie-chart'
           break
         case 'table':
-          str += 'nz-icon-Table1'
+          str += 'nz-icon-table1'
           break
         case 'alertList':
-          str += 'nz-icon-alertlist'
+          str += 'nz-icon-alert-list'
           break
         case 'text':
-          str += 'nz-icon-Text1'
+          str += 'nz-icon-text1'
           break
         case 'url':
-          str += 'nz-icon-URL'
+          str += 'nz-icon-url'
           break
         case 'group':
-          str += 'nz-icon-Group'
+          str += 'nz-icon-group'
           break
         default :
-          str += 'nz-icon-Table1'
+          str += 'nz-icon-table1'
           break
       }
       return str
diff --git a/nezha-fronted/src/components/common/table/settings/dcTable.vue b/nezha-fronted/src/components/common/table/settings/dcTable.vue
index ac77c8079..e753b0f65 100644
--- a/nezha-fronted/src/components/common/table/settings/dcTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/dcTable.vue
@@ -133,7 +133,7 @@ export default {
           label: this.$t('config.dc.assets'),
           prop: 'assetNum',
           show: true
-        },{
+        }, {
           label: this.$t('config.dc.alert'),
           prop: 'alertNum',
           show: true
@@ -162,7 +162,8 @@ export default {
     }
   },
   methods: {
-    showTableTooltip, hideTableTooltip,
+    showTableTooltip,
+    hideTableTooltip,
     regNumTest (val) { // 校验是否是数字
       return this.regNum.test(val)
     },
@@ -186,7 +187,7 @@ export default {
         }
       }
       return ''
-    },
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index 82fc1f27e..2812a1170 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -77,7 +77,7 @@
               <div v-else-if="scope.row[item.prop]===1">
                 <div class="active-icon green inline-block"></div> up
               </div>
-              <div v-else>
+              <div v-else-if="scope.row[item.prop]">
                 <div class="active-icon gray inline-block"></div> suspended
               </div>
             </div>
@@ -174,6 +174,7 @@ export default {
       this.$message.success(this.$t('overall.copySuccess'))
     },
     suspendedStr (status) { // 10进制转为2进制 分别给对应的状态
+      if (!status || status === 1 || status == 0) { return '' }
       const arr = status.toString(2).split('')
       while (arr.length < 5) {
         arr.unshift('0')
diff --git a/nezha-fronted/src/components/common/table/settings/modelTable.vue b/nezha-fronted/src/components/common/table/settings/modelTable.vue
index e5706eee3..aa3cc3622 100644
--- a/nezha-fronted/src/components/common/table/settings/modelTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/modelTable.vue
@@ -95,11 +95,11 @@ export default {
           label: this.$t('config.model.remark'),
           prop: 'remark',
           show: true
-        },{
+        }, {
           label: this.$t('config.model.assetNum'),
           prop: 'assetNum',
           show: true,
-          width:200
+          width: 200
         }
       ]
     }
diff --git a/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue b/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
index 858b2a7f9..da5de2fb2 100644
--- a/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
@@ -53,7 +53,7 @@
           </el-tooltip>
         </template>
         <template v-else-if="item.prop === 'authType'">
-          <span v-if="scope.row.authType == 1">{{$t('config.terminallog.password')}}</span>
+          <span v-if="scope.row.authType == 1">{{$t('config.terminallog.pin')}}</span>
           <span v-else-if="scope.row.authType == 2">{{$t('config.terminallog.key')}}</span>
         </template>
         <span v-else>{{scope.row[item.prop]}}</span>
diff --git a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
index 60e84f236..d80c897e3 100644
--- a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
@@ -465,7 +465,7 @@ export default {
       this.graphShow = false
     },
     saveChart () { // 新增chart
-      this.getPanelData().then(()=>{
+      this.getPanelData().then(() => {
         const chart = {
           title: '',
           type: 'line',
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 9b7fda728..7cf111205 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -12,7 +12,8 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-      <el-dropdown >
+      <el-dropdown>
+        <el-dropdown-menu slot="dropdown"></el-dropdown-menu>
         <div id="header-open-cli" @click="cli">
           <div class="header-menu&#45;&#45;item"><i class="nz-icon nz-icon-terminal"></i></div>
           <span v-show="$store.state.consoleCount>0" class="right-tip">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</span>
@@ -48,7 +49,7 @@
         <div class='login-user header-menu--item'>{{username}}&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
-            <div id="header-to-changepwd" @click="showPwdDialog">{{$t('overall.changePwd')}}</div>
+            <div id="header-to-changepin" @click="showPinDialog">{{$t('overall.changePin')}}</div>
           </el-dropdown-item>
           <el-dropdown-item>
             <div id="header-to-logout" @click="logout">{{$t('overall.signOut')}}</div>
@@ -74,7 +75,7 @@
     <transition name="right-box">
       <dc-box v-if="rightBox.dc.show" :dc="dc" :user-data="userData" @close="closeDcBox" @reload="getAssetData"></dc-box>
     </transition>
-    <change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
+    <change-password :cur-user="username" :show-dialog="showChangePin" @click="showPinDialog" @dialogClosed="dialogClosed"></change-password>
   </div>
 </template>
 
@@ -82,11 +83,11 @@
 import bus from '../../libs/bus'
 import dcBox from '../common/rightBox/dcBox' // dc弹框
 import { mapActions } from 'vuex'
-import changePwd from '../page/config/changePwd'
+import changePin from '../page/config/changePin'
 export default {
   name: 'Header',
   components: {
-    'change-password': changePwd,
+    'change-password': changePin,
     'dc-box': dcBox
   },
   data () {
@@ -202,7 +203,7 @@ export default {
           permission: 'header_add_rule'
         }
       ],
-      showChangePwd: false
+      showChangePin: false
     }
   },
   methods: {
@@ -257,10 +258,10 @@ export default {
           community: 'public',
           username: '',
           security_level: 'noAuthNoPriv', // noAuthNoPriv/authNoPriv/authPriv
-          password: '',
+          pin: '',
           auth_protocol: 'MD5', // MD5/SHA
           priv_protocol: 'DES', // DES/AES
-          priv_password: '',
+          priv_pin: '',
           context_name: ''
         }
       } else if (item.type == 3) {
@@ -402,11 +403,11 @@ export default {
         window.location.reload()
       })
     },
-    showPwdDialog () {
-      this.showChangePwd = true
+    showPinDialog () {
+      this.showChangePin = true
     },
     dialogClosed () {
-      this.showChangePwd = false
+      this.showChangePin = false
     },
     cancel () {
       this.jumpTo(this.$route.path.slice(1, this.$route.path.length))
diff --git a/nezha-fronted/src/components/page/asset/accountConfig.vue b/nezha-fronted/src/components/page/asset/accountConfig.vue
index 24ed820e4..2af5d7de7 100644
--- a/nezha-fronted/src/components/page/asset/accountConfig.vue
+++ b/nezha-fronted/src/components/page/asset/accountConfig.vue
@@ -11,13 +11,13 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item :label="$t('asset.pin')" v-if="account.params.method == 'password'">
-        <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password" id="ssh-account-password"/>
+        <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.pin" id="ssh-account-password"/>
       </el-form-item>
       <el-form-item :label="$t('asset.ssh')" v-if="account.params.method == 'key'" prop="file">
         <el-input rows="4" type="textarea" placeholder="" v-model="account.params.key" size="small" id="ssh-account-key"></el-input>
       </el-form-item>
       <el-form-item :label="$t('asset.pin')" v-if="account.params.method == 'key'">
-        <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.keyPassword" id="ssh-account-keyPassword"/>
+        <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.keyPin" id="ssh-account-keyPin"/>
       </el-form-item>
       <el-form-item :label="$t('asset.port')" prop="port" style="display: inline-block">
         <el-input size="small" v-model.number="account.port" id="ssh-account-port"/>
@@ -31,12 +31,12 @@
         <el-input autocomplete="new-password" size="small" v-model="account.params.userTip" id="telnet-account-userTip"/>
       </el-form-item>
       <el-form-item :label="$t('asset.pin')">
-        <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password" id="telnet-account-password"/>
+        <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.pin" id="telnet-account-pin"/>
       </el-form-item>
       <el-form-item :label="this.$t('asset.pinTip')">
-        <el-input size="small" v-model="account.params.passwordTip" id="telnet-account-passwordTip"/>
+        <el-input size="small" v-model="account.params.pinTip" id="telnet-account-pinTip"/>
       </el-form-item>
-      <el-form-item :label="$t('asset.reloginpinTip')" prop="reloginTip">
+      <el-form-item :label="$t('asset.reloginPinTip')" prop="reloginTip">
         <el-input size="small" v-model="account.params.reloginTip" id="telnet-account-reloginTip"/>
       </el-form-item>
       <el-form-item :label="$t('asset.port')" prop="port" style="display: inline-block">
@@ -71,8 +71,8 @@
             <el-radio-button label="authPriv"></el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :label="$t('login.pin')" prop="params.password" v-if="account.params.securityLevel == 'authNoPriv' || account.params.securityLevel == 'authPriv'">
-          <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password" id="snmp-account-password"/>
+        <el-form-item :label="$t('login.pin')" prop="params.pin" v-if="account.params.securityLevel == 'authNoPriv' || account.params.securityLevel == 'authPriv'">
+          <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.pin" id="snmp-account-password"/>
         </el-form-item>
         <el-form-item :label="$t('project.module.authProtocol')" prop="params.authProtocol" v-if="account.params.securityLevel == 'authNoPriv' || account.params.securityLevel == 'authPriv'">
           <el-radio-group v-model="account.params.authProtocol" size="small" id="snmp-account-authProtocol">
@@ -86,8 +86,8 @@
             <el-radio-button label="AES"></el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :label="$t('project.module.privpin')" prop="params.privPassword" v-if="account.params.securityLevel == 'authPriv'">
-          <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.privPassword" id="snmp-account-privPassword"/>
+        <el-form-item :label="$t('project.module.privPin')" prop="params.privPin" v-if="account.params.securityLevel == 'authPriv'">
+          <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.privPin" id="snmp-account-privPin"/>
         </el-form-item>
       </template>
     </template>
@@ -123,24 +123,24 @@ export default {
         user: '',
         authType: 1,
         protocol: 'SSH',
-        pwd: '',
+        pin: '',
         port: null,
         privateKey: null,
         userTip: '',
-        passwordTip: '',
-        reloginPasswordTip: ''
+        pinTip: '',
+        reloginPinTip: ''
       }
     },
     isShowTelnetOption () {
       this.showTelnetOption = !this.showTelnetOption
       if (!this.showTelnetOption) {
         this.account.userTip = ''
-        this.account.passwordTip = ''
-        this.account.reloginPasswordTip = ''
+        this.account.pinTip = ''
+        this.account.reloginPinTip = ''
       }
     },
     telnetOptionState () {
-      if (this.account.userTip != '' || this.account.passwordTip != '' || this.account.reloginPasswordTip != '') {
+      if (this.account.userTip != '' || this.account.pinTip != '' || this.account.reloginPinTip != '') {
         this.showTelnetOption = true
       }
     },
@@ -155,8 +155,8 @@ export default {
     },
     clearTelnetOptions () {
       this.account.userTip = ''
-      this.account.passwordTip = ''
-      this.account.reloginPasswordTip = ''
+      this.account.pinTip = ''
+      this.account.reloginPinTip = ''
     },
     handleChange (file, fileList) {
       if (fileList.length > 0) {
@@ -182,7 +182,7 @@ export default {
           this.clearPrivateKey()
         }
         if (n.authType == 2) { // 公钥登录
-          this.account.pwd = ''
+          this.account.pin = ''
         }
         if (n.protocol == 'SSH') {
           this.showTelnetOption = false
diff --git a/nezha-fronted/src/components/page/config/changePwd.vue b/nezha-fronted/src/components/page/config/changePin.vue
similarity index 63%
rename from nezha-fronted/src/components/page/config/changePwd.vue
rename to nezha-fronted/src/components/page/config/changePin.vue
index ed661ebe7..ea8530fb6 100644
--- a/nezha-fronted/src/components/page/config/changePwd.vue
+++ b/nezha-fronted/src/components/page/config/changePin.vue
@@ -1,28 +1,28 @@
 <template>
   <div>
-    <el-dialog class="nz-dialog" :title="$t('overall.changePwd')" :visible.sync="visible"  @open="dialogOpened"  :modal-append-to-body='false' @closed="dialogClosed" width="600px" :show-close="false" >
-      <el-form :model="user" label-position = "top" label-width="150px" :rules="rules" ref="changePwdForm" size="mini">
+    <el-dialog class="nz-dialog" :title="$t('overall.changePin')" :visible.sync="visible"  @open="dialogOpened"  :modal-append-to-body='false' @closed="dialogClosed" width="600px" :show-close="false" >
+      <el-form :model="user" label-position = "top" label-width="150px" :rules="rules" ref="changePinForm" size="mini">
         <el-form-item :label="$t('config.user.account')" prop="username" v-show="curUser != sysUser">
-          <el-input type="text" autocomplete="false" v-model="user.username" disabled id="change-pwd-username"></el-input>
+          <el-input type="text" autocomplete="false" v-model="user.username" disabled id="change-pin-username"></el-input>
         </el-form-item>
-        <el-form-item :label="$t('config.user.oldPwd')" prop="pwd">
-          <el-input type="password" autocomplete="false" :show-password="true" v-model="user.pwd" maxlength="20" :placeholder="$t('config.user.inputOldPwd')" id="change-pwd-pwd"></el-input>
+        <el-form-item :label="$t('config.user.oldPin')" prop="pin">
+          <el-input type="password" autocomplete="false" :show-password="true" v-model="user.pin" maxlength="20" :placeholder="$t('config.user.inputOldPin')" id="change-pin-pin"></el-input>
         </el-form-item>
-        <el-form-item :label="$t('config.user.newPwd')" prop="newPwd">
-          <el-input type="password" autocomplete="false" :show-password="true" v-model="user.newPwd" maxlength="20" :placeholder="$t('config.user.inputNewPwd')" id="change-pwd-newPwd"></el-input>
+        <el-form-item :label="$t('config.user.newPin')" prop="newPin">
+          <el-input type="password" autocomplete="false" :show-password="true" v-model="user.newPin" maxlength="20" :placeholder="$t('config.user.inputNewPin')" id="change-pin-newPin"></el-input>
         </el-form-item>
-        <el-form-item :label="$t('config.user.confirmPwd')" prop="confirmPwd">
-          <el-input type="password" autocomplete="false"  :show-password="true" v-model="user.confirmPwd" maxlength="20" :placeholder="$t('config.user.inputConfirmPwd')" id="change-pwd-confirmPwd"></el-input>
+        <el-form-item :label="$t('config.user.confirmPin')" prop="confirmPin">
+          <el-input type="password" autocomplete="false"  :show-password="true" v-model="user.confirmPin" maxlength="20" :placeholder="$t('config.user.inputConfirmPin')" id="change-pin-confirmPin"></el-input>
         </el-form-item>
       </el-form>
       <!--底部按钮-->
       <template slot="footer">
         <div class="right-box-bottom-btns" >
-          <button @click="close" id="change-pwd-esc"
+          <button @click="close" id="change-pin-esc"
                   class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
             <span>{{$t('overall.cancel')}}</span>
           </button>
-          <button  @click="changePwd" id="change-pwd-save"
+          <button  @click="changePin" id="change-pin-save"
                    class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
             <span>{{$t('overall.save')}}</span>
           </button>
@@ -35,7 +35,7 @@
 
 <script>
 export default {
-  name: 'changePwd',
+  name: 'changePin',
   props: {
     curUser: { type: String },
     showDialog: { type: Boolean, default: false }
@@ -46,28 +46,28 @@ export default {
       if (value && value != '') {
         callback()
       } else {
-        callback(new Error(temp.$t('config.user.invalidPwd')))
+        callback(new Error(temp.$t('config.user.invalidPin')))
       }
     }
     const validateConfirmPass = (rule, value, callback) => {
-      if (value && value != '' && value == temp.user.newPwd) {
+      if (value && value != '' && value == temp.user.newPin) {
         callback()
       } else {
-        callback(new Error(temp.$t('config.user.confirmPwdErr')))
+        callback(new Error(temp.$t('config.user.confirmPinErr')))
       }
     }
     return {
       user: {
         username: '',
-        pwd: '',
-        newPwd: '',
-        confirmPwd: ''
+        pin: '',
+        newPin: '',
+        confirmPin: ''
       },
       sysUser: sessionStorage.getItem('nz-username'),
       rules: {
-        pwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
-        newPwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: validatePass, trigger: 'blur' }],
-        confirmPwd: [{ required: true, message: this.$t('config.user.reinputPwd'), trigger: 'blur' }, { validator: validateConfirmPass, trigger: 'blur' }]
+        pin: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        newPin: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: validatePass, trigger: 'blur' }],
+        confirmPin: [{ required: true, message: this.$t('config.user.reinputPin'), trigger: 'blur' }, { validator: validateConfirmPass, trigger: 'blur' }]
       },
       visible: false
     }
@@ -77,8 +77,8 @@ export default {
   },
   methods: {
     dialogOpened: function () {
-      if (this.$refs.changePwdForm) {
-        this.$refs.changePwdForm.resetFields()
+      if (this.$refs.changePinForm) {
+        this.$refs.changePinForm.resetFields()
       }
     },
     dialogClosed: function () {
@@ -87,12 +87,12 @@ export default {
     close: function () {
       this.visible = false
     },
-    changePwd: function () {
-      this.$refs.changePwdForm.validate((valid) => {
+    changePin: function () {
+      this.$refs.changePinForm.validate((valid) => {
         if (valid) {
           const paramObj = {
-            pin: this.user.pwd,
-            newPin: this.user.newPwd
+            pin: this.user.pin,
+            newPin: this.user.newPin
           }
           this.$get('/sys/user/pin?oldPin=' + paramObj.pin + '&newPin=' + paramObj.newPin).then(response => {
             if (response && response.code == 200) {
diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue
index fcc7048c7..9ad8aeeb7 100644
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -88,7 +88,7 @@
                     <div class="mib-browser-ad-search-label">{{$t('login.pin')}}</div>
                   </el-col>
                   <el-col :span="17">
-                    <el-input type="password" class="input-x-mini-24" v-model.trim="searchParamPop.auth.password" id="mib-browser-password"></el-input>
+                    <el-input type="password" class="input-x-mini-24" v-model.trim="searchParamPop.auth.pin" id="mib-browser-pin"></el-input>
                   </el-col>
                 </el-row>
 
@@ -118,10 +118,10 @@
 
                 <el-row class="mib-browser-ad-search-item" v-if="searchParamPop.auth.securityLevel == 'authPriv'">
                   <el-col :span="6">
-                    <div class="mib-browser-ad-search-label">{{$t('project.module.privpin')}}</div>
+                    <div class="mib-browser-ad-search-label">{{$t('project.module.privPin')}}</div>
                   </el-col>
                   <el-col :span="17">
-                    <el-input type="password" class="input-x-mini-24" v-model.trim="searchParamPop.auth.privPassword" id="mib-browser-privPassword"></el-input>
+                    <el-input type="password" class="input-x-mini-24" v-model.trim="searchParamPop.auth.privPin" id="mib-browser-privPassword"></el-input>
                   </el-col>
                 </el-row>
               </template>
@@ -285,11 +285,11 @@ export default {
         community: 'public',
         auth: {
           username: '',
-          password: '',
+          pin: '',
           securityLevel: '',
           authProtocol: '',
           privProtocol: '',
-          privPassword: ''
+          privPin: ''
         },
         type: '',
         value: ''
@@ -303,11 +303,11 @@ export default {
         community: 'public',
         auth: {
           username: '',
-          password: '',
+          pin: '',
           securityLevel: '',
           authProtocol: '',
           privProtocol: '',
-          privPassword: ''
+          privPin: ''
         }
       },
       operationData: ['get', 'walk', 'getnext', 'set'],
@@ -453,11 +453,11 @@ export default {
         community: 'public',
         auth: {
           username: '',
-          password: '',
+          pin: '',
           securityLevel: '',
           authProtocol: '',
           privProtocol: '',
-          privPassword: ''
+          privPin: ''
         }
       }
     },
@@ -481,10 +481,10 @@ export default {
             if (this.searchParamPop.version == 3) {
               this.searchParamPop.auth.username = snmpAccount.params.username
               this.searchParamPop.auth.securityLevel = snmpAccount.params.securityLevel
-              this.searchParamPop.auth.password = snmpAccount.params.password
+              this.searchParamPop.auth.pin = snmpAccount.params.pin
               this.searchParamPop.auth.authProtocol = snmpAccount.params.authProtocol
               if (this.searchParamPop.auth.securityLevel == 'authPriv') { this.searchParamPop.auth.privProtocol = snmpAccount.params.privProtocol }
-              this.searchParamPop.auth.privPassword = snmpAccount.params.privPassword
+              this.searchParamPop.auth.privPin = snmpAccount.params.privPin
             }
           }
         }
diff --git a/nezha-fronted/src/components/page/config/setup.vue b/nezha-fronted/src/components/page/config/setup.vue
index 932e4b3ad..77f6f29c2 100644
--- a/nezha-fronted/src/components/page/config/setup.vue
+++ b/nezha-fronted/src/components/page/config/setup.vue
@@ -312,9 +312,9 @@ export default {
                     this.activeStep = 2
                     this.step = 2
                     if (response.code == 574004) { // 密码无效
-                      this.$alert(this.$t('setup.invalidpin'), { type: 'warning' })
+                      this.$alert(this.$t('setup.invalidPin'), { type: 'warning' })
                     } else if (response.code == 574005) {
-                      this.$alert(this.$t('setup.requirepin'), { type: 'warning' })
+                      this.$alert(this.$t('setup.requirePin'), { type: 'warning' })
                     } else if (response.code == 574002) {
                       this.$alert(this.$t('setup.invalidCode', { page: this.$t('setup.welcomePage') }), { type: 'warning' })
                     } else {
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index 0a7b7e9f0..fb044a14b 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -106,9 +106,9 @@
             <el-form-item :label="$t('config.system.email.smtpAccount')" prop="email_auth_account">
               <el-input  v-model="email.email_auth_account" :disabled="email.email_enable == 'off'" id="system-email-email_smtp_account"> autocomplete="off"</el-input>
             </el-form-item>
-            <el-form-item :label="$t('config.system.email.smtpPwd')" class="has-tip" prop="email_auth_password">
-              <el-input v-model="email.email_auth_password" type="password" :show-password="false" :disabled="email.email_enable == 'off'"  autocomplete="off" id="system-email-email_smtp_password"></el-input>
-              <div class="el-form-item__tip">{{$t("config.system.email.pwdTip")}}</div>
+            <el-form-item :label="$t('config.system.email.smtpPin')" class="has-tip" prop="email_auth_pin">
+              <el-input v-model="email.email_auth_pin" type="password" :show-password="false" :disabled="email.email_enable == 'off'"  autocomplete="off" id="system-email-email_smtp_password"></el-input>
+              <div class="el-form-item__tip">{{$t("config.system.email.pinTip")}}</div>
             </el-form-item>
             <el-form-item :label="$t('config.system.email.sendAccount')" class="has-tip" prop="email_send_account">
               <el-input v-model="email.email_send_account" :disabled="email.email_enable == 'off'" id="system-email-email_send_account"></el-input>
@@ -170,8 +170,8 @@
             <el-form-item :label="$t('config.system.ldap.dn')" prop="ldap_dn">
               <el-input v-model="ldap.ldap_dn" id="system-ldap-ldap_dn"></el-input>
             </el-form-item>
-            <el-form-item :label="$t('config.system.ldap.pwd')" prop="ldap_password">
-              <el-input v-model="ldap.ldap_password" type="password" id="system-ldap-ldap_password"></el-input>
+            <el-form-item :label="$t('config.system.ldap.pin')" prop="ldap_pin">
+              <el-input v-model="ldap.ldap_pin" type="password" id="system-ldap-ldap_pin"></el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.ldap.ou')" class="has-tip" prop="ldap_ou">
               <el-input v-model="ldap.ldap_ou" id="system-ldap-ldap_ou"></el-input>
@@ -229,8 +229,8 @@
                 </template>
               </el-select>
             </el-form-item>
-            <el-form-item :label="$t('config.system.reset.pwd')" prop="password">
-              <el-input id="system-reset-password" v-model="reset.password" type="password"></el-input>
+            <el-form-item :label="$t('config.system.reset.pin')" prop="pin">
+              <el-input id="system-reset-pin" v-model="reset.pin" type="password"></el-input>
             </el-form-item>
             <el-form-item>
               <button @click="resetSys()" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_reset_reset'"  :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.reset')}}</button>
@@ -259,7 +259,7 @@ export default {
       basic: {
         alert_api: '',
         asset_ping_interval: '300', // 检查周期，单位：s
-        session_timeout:'30',
+        session_timeout: '30',
         storage_local_retention: 15 * 24,
         system_name: '',
         system_logo: '',
@@ -294,7 +294,7 @@ export default {
         email_port: 25,
         email_timeout: 10,
         email_auth_account: '',
-        email_auth_password: '',
+        email_auth_pin: '',
         email_send_account: '',
         email_test_account: '',
         email_security_type: 'NONE'
@@ -330,7 +330,7 @@ export default {
       ldap: {
         ldap_address: '',
         ldap_dn: '',
-        ldap_password: '',
+        ldap_pin: '',
         ldap_ou: '',
         ldap_user_filter: '',
         ldap_mapping: '',
@@ -346,7 +346,7 @@ export default {
       },
       reset: {
         type: [],
-        password: ''
+        pin: ''
       },
       linkTemp: {
         name: '', url: ''
@@ -376,7 +376,7 @@ export default {
       },
       resetRules: {
         type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
-        password: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+        pin: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
       },
       resetOptions: [
         {
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index 3b210cee1..eb57f8a99 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -460,7 +460,7 @@ export default {
           this.$get('/module/stat', { id: item.id }).then(res => {
             item.state = res.data
           })
-          promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.iconId}`))
+          promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.iconId}/1`))
         })
         Promise.all(promiseArr).then(res => {
           arr.forEach((item, index) => {
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index d5b41bc5b..2865f053b 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -22,48 +22,6 @@
                   </el-input>
                 </template>
               </select-panel>
-              <!--<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" >
-                <el-row  :gutter="10" class="el-dropdown-link" style="padding-right: 5px">
-                  <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
-                  <el-col :span="3" style="padding-left:0px !important;"><i class="nz-icon nz-icon-arrow-down"></i></el-col>
-                </el-row>
-                <el-dropdown-menu class="nz-dashboard-dropdown panel-dropdown-title-space" slot="dropdown"  >
-                  &lt;!&ndash;<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>&ndash;&gt;
-                  <div ref="dashboardScrollbar" style="height: 100%; overflow: auto">
-                    <el-dropdown-item >
-                      <el-row class="panel-list-width" :gutter="10" >
-                        <el-col :span="21"><el-input :placeholder="$t('overall.search')" @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable size="mini" v-model="filterPanel"></el-input></el-col>
-                        <el-col :span="3"><span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" v-has="'panel_toAdd'"><i class="nz-icon nz-icon-plus"></i></span></el-col>
-                      </el-row>
-                    </el-dropdown-item>
-                    <draggable v-model="panelData" @start="start" @end="end" :move="move" :key
-                               :scroll-sensitivity="150"
-                               :options="{
-                                   group:{name:'chartGroup',pull:'false'},
-                                   dragClass:'drag-chart-class',
-                                   fallbackClass:'fallback-class',
-                                   forceFallback:true,
-                                   ghostClass:'chart-ghost',
-                                   chosenClass:'choose-class',
-                                   scroll:true,
-                                   scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
-                                   animation:150,
-                                   handle:'.panelContent',
-                                 }"  >
-                      <el-dropdown-item v-for="item in showPanelList" :key="item.id+1" class="panel-title-li"
-                                        :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
-                        <el-row  :gutter="10" class="panel-list-width" >
-                          <el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-sort4"></i></el-col>
-                          <el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
-                          <el-col :span="1"><span @click.stop="del(item)" class="panel-dropdown-btn panel-dropdown-btn-delete" v-has="'panel_delete'"><i class="nz-icon nz-icon-delete"></i></span></el-col>
-                          <el-col :span="1">&nbsp;</el-col>
-                          <el-col :span="1"><span @click.stop="edit(item)" class="panel-dropdown-btn" v-has="'panel_toEdit'"><i class="nz-icon nz-icon-edit"></i></span></el-col>
-                        </el-row>
-                      </el-dropdown-item>
-                    </draggable>
-                  </div>
-                </el-dropdown-menu>
-              </el-dropdown>-->
             </div>
             <div class="top-tool-right">
               <div class="top-tool-search margin-r-20">
@@ -73,7 +31,13 @@
               </div>
 
               <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
-              <export-excel
+
+              <button id="panel-add-chart" v-has="'panel_chart_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
+                      type="button" @click="addChart">
+                <i class="nz-icon-create-square nz-icon"></i>
+              </button>
+
+              <top-tool-more-options
                 id="panel"
                 :params="filter"
                 :permissions="{
@@ -86,15 +50,17 @@
                 import-url="/visual/panel/import"
                 @afterImport="dateChange"
               >
-                <template slot="optionZone">
-                  <button id="panel-add-chart" v-has="'panel_chart_add'" :title="$t('overall.createChart')"
-                          class="top-tool-btn" @click="addChart">
-                    <i class="nz-icon-create-square nz-icon"></i>
-                  </button>
+                <template v-slot:before>
+                  <el-dropdown-item>
+                    <div id="panel-lock" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>{{panelLock ? 'Locked' : 'Unlocked'}}</div>
+                  </el-dropdown-item>
                 </template>
-              </export-excel>
-              <button id="chart-temp-add" class="top-tool-btn margin-l-10" type="button" @click="addChartByTemp"><i class='nz-icon nz-icon-lock'></i></button>
-              <button id="panel-lock" class="top-tool-btn margin-l-10" type="button" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
+                <template v-slot:after>
+                  <el-dropdown-item v-has="'panel_chart_add'">
+                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add template</div>
+                  </el-dropdown-item>
+                </template>
+              </top-tool-more-options>
             </div>
           </template>
         </div>
@@ -127,11 +93,11 @@ import ChartBox from './chartBox'
 import ChartList from '../../charts/chart-list'
 import bus from '../../../libs/bus'
 import pickTime from '../../common/pickTime'
-import exportXLSX from '../../common/exportXLSX'
 import selectPanel from '../../common/popBox/selectPanel'
 import panelBox from '@/components/common/rightBox/panelBox'
 import chartTempBox from '@/components/common/rightBox/chartTempBox'
-
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import Template from '@/components/page/config/template'
 export default {
   name: 'panel',
   data () {
@@ -216,12 +182,13 @@ export default {
     }
   },
   components: {
+    Template,
     'chart-box': ChartBox,
     'chart-list': ChartList,
     'pick-time': pickTime,
-    'export-excel': exportXLSX,
-    selectPanel,
     'panel-box': panelBox,
+    topToolMoreOptions,
+    selectPanel,
     chartTempBox
   },
   methods: {
@@ -309,7 +276,7 @@ export default {
       this.rightBox.chart.show = true
     },
     addChartByTemp () {
-      this.chart = Object.assign({},this.blankChartTemp)
+      this.chart = Object.assign({}, this.blankChartTemp)
       this.chart.panelId = this.showPanel.id
       this.rightBox.chartTemp.show = true
     },
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 5476f9a33..e9b290cfa 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -133,7 +133,7 @@ export default {
           type: 'query',
           label: 'query',
           disabled: false
-        },{
+        }, {
           id: 34,
           name: this.$t('project.project.project'),
           // name: this.$t('asset.asset'),
@@ -278,6 +278,9 @@ export default {
     },
     reloadTable (obj) {
       Object.keys(obj).forEach(key => {
+        if (key === 'change') {
+          return
+        }
         this.searchCheckBox[key] = obj[key].join(',')
       })
       console.log(obj, this.searchCheckBox)
diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
index 2587d123a..95a8ce0d5 100644
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -99,7 +99,7 @@ export default {
           labels: '',
           basic_auth: {
             username: '',
-            password: ''
+            pin: ''
           },
           bearer_token: ''
         },
diff --git a/nezha-fronted/src/components/page/monitor/project/project.vue b/nezha-fronted/src/components/page/monitor/project/project.vue
index c33092ad3..96e449b04 100644
--- a/nezha-fronted/src/components/page/monitor/project/project.vue
+++ b/nezha-fronted/src/components/page/monitor/project/project.vue
@@ -64,7 +64,7 @@ import topologyL5 from '@/components/common/project/topologyL5'
 export default {
   name: 'project2',
   components: {
-    topologyL5,
+    topologyL5
   },
   data () {
     return {
diff --git a/nezha-fronted/src/libs/bus.js b/nezha-fronted/src/libs/bus.js
index 4ca45fa0a..21839d398 100644
--- a/nezha-fronted/src/libs/bus.js
+++ b/nezha-fronted/src/libs/bus.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-
+import moment from 'moment-timezone'
 Date.prototype.setStart = function () {
   this.setHours(0)
   this.setMinutes(0)
@@ -261,6 +261,7 @@ export default new Vue({
     // 将本地时区转为系统配置的时区
     computeTimezone: function (sourceTime) {
       let offset = localStorage.getItem('nz-sys-timezone')
+      offset = moment.tz(offset).zoneAbbr()
       if (offset && offset !== 'undefined') {
         offset = Number.parseInt(offset)
         const date = new Date(sourceTime)
@@ -296,6 +297,7 @@ export default new Vue({
     },
     UTCTimeToConfigTimezone (utcTime) {
       let offset = localStorage.getItem('nz-sys-timezone')
+      offset = moment.tz(offset).zoneAbbr()
       if (offset && offset !== 'undefined') {
         let time = utcTime
         if (typeof time === 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)) {
@@ -310,6 +312,7 @@ export default new Vue({
     },
     configTimezoneToUTCTime: function (configTime) {
       let offset = localStorage.getItem('nz-sys-timezone')
+      offset = moment.tz(offset).zoneAbbr()
       if (offset && offset !== 'undefined') {
         let time = configTime
         if (typeof time === 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)) {
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 65eb044f5..b331092d9 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -32,8 +32,8 @@ import pickTime from '@/components/common/pickTime'
 import bus from '@/libs/bus'
 import theme from '@/assets/css/theme.scss'
 
-import vSelectPage from 'v-selectpage';
-Vue.use(vSelectPage);
+import vSelectPage from 'v-selectpage'
+Vue.use(vSelectPage)
 
 Vue.component('Pagination', Pagination)
 Vue.component('searchInput', searchInput)