diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 79283f1b3..3efab2bc9 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -7,8 +7,7 @@
     "@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
-      "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
-      "dev": true
+      "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow=="
     },
     "@types/q": {
       "version": "1.5.2",
@@ -340,9 +339,9 @@
       "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.0.tgz",
-      "integrity": "sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A=="
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
+      "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
     "axios": {
       "version": "0.19.0",
@@ -1590,7 +1589,6 @@
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz",
       "integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=",
-      "dev": true,
       "requires": {
         "clone-response": "1.0.2",
         "get-stream": "3.0.0",
@@ -1604,14 +1602,12 @@
         "lowercase-keys": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
-          "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=",
-          "dev": true
+          "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY="
         },
         "normalize-url": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz",
           "integrity": "sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==",
-          "dev": true,
           "requires": {
             "prepend-http": "^2.0.0",
             "query-string": "^5.0.1",
@@ -1621,14 +1617,12 @@
         "prepend-http": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-          "dev": true
+          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
         },
         "query-string": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
           "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
-          "dev": true,
           "requires": {
             "decode-uri-component": "^0.2.0",
             "object-assign": "^4.1.0",
@@ -1639,7 +1633,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
           "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
-          "dev": true,
           "requires": {
             "is-plain-obj": "^1.0.0"
           }
@@ -1929,7 +1922,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
       "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
-      "dev": true,
       "requires": {
         "mimic-response": "^1.0.0"
       }
@@ -3218,14 +3210,12 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
     "decompress-response": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
       "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
-      "dev": true,
       "requires": {
         "mimic-response": "^1.0.0"
       }
@@ -3516,8 +3506,7 @@
     "duplexer3": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
-      "dev": true
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
     },
     "duplexify": {
       "version": "3.7.1",
@@ -4349,7 +4338,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
       "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
-      "dev": true,
       "requires": {
         "inherits": "^2.0.1",
         "readable-stream": "^2.0.0"
@@ -4999,8 +4987,7 @@
     "get-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-      "dev": true
+      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
     },
     "get-value": {
       "version": "2.0.6",
@@ -5084,7 +5071,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
       "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==",
-      "dev": true,
       "requires": {
         "@sindresorhus/is": "^0.7.0",
         "cacheable-request": "^2.1.1",
@@ -5147,20 +5133,20 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "6.10.2",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
-          "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
+          "version": "6.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz",
+          "integrity": "sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==",
           "requires": {
-            "fast-deep-equal": "^2.0.1",
+            "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
             "json-schema-traverse": "^0.4.1",
             "uri-js": "^4.2.2"
           }
         },
         "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
+          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -5195,8 +5181,7 @@
     "has-symbol-support-x": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
-      "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw==",
-      "dev": true
+      "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw=="
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -5208,7 +5193,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
       "integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==",
-      "dev": true,
       "requires": {
         "has-symbol-support-x": "^1.4.1"
       }
@@ -5435,8 +5419,7 @@
     "http-cache-semantics": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-      "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
-      "dev": true
+      "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w=="
     },
     "http-deceiver": {
       "version": "1.2.7",
@@ -5648,7 +5631,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
       "integrity": "sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=",
-      "dev": true,
       "requires": {
         "from2": "^2.1.1",
         "p-is-promise": "^1.1.0"
@@ -5833,8 +5815,7 @@
     "is-object": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz",
-      "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA=",
-      "dev": true
+      "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA="
     },
     "is-path-cwd": {
       "version": "1.0.0",
@@ -5863,8 +5844,7 @@
     "is-plain-obj": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-      "dev": true
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
     },
     "is-plain-object": {
       "version": "2.0.4",
@@ -5893,8 +5873,7 @@
     "is-retry-allowed": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
-      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==",
-      "dev": true
+      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
     },
     "is-stream": {
       "version": "1.1.0",
@@ -5967,7 +5946,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isurl/-/isurl-1.0.0.tgz",
       "integrity": "sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==",
-      "dev": true,
       "requires": {
         "has-to-string-tag-x": "^1.2.0",
         "is-object": "^1.0.1"
@@ -6008,8 +5986,7 @@
     "json-buffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
-      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
-      "dev": true
+      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
     },
     "json-loader": {
       "version": "0.5.7",
@@ -6066,7 +6043,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
       "integrity": "sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==",
-      "dev": true,
       "requires": {
         "json-buffer": "3.0.0"
       }
@@ -6254,8 +6230,7 @@
     "lowercase-keys": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
-      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
-      "dev": true
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
     },
     "lru-cache": {
       "version": "4.1.5",
@@ -6525,8 +6500,7 @@
     "mimic-response": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
-      "dev": true
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
     },
     "minimalistic-assert": {
       "version": "1.0.1",
@@ -6796,9 +6770,9 @@
       }
     },
     "node-sass": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz",
-      "integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==",
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
+      "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
       "requires": {
         "async-foreach": "^0.1.3",
         "chalk": "^1.1.1",
@@ -7187,20 +7161,17 @@
     "p-cancelable": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
-      "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
-      "dev": true
+      "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ=="
     },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
     },
     "p-is-promise": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
-      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
-      "dev": true
+      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4="
     },
     "p-limit": {
       "version": "1.3.0",
@@ -7230,7 +7201,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz",
       "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==",
-      "dev": true,
       "requires": {
         "p-finally": "^1.0.0"
       }
@@ -7379,8 +7349,7 @@
     "pify": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-      "dev": true
+      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
     },
     "pinkie": {
       "version": "2.0.4",
@@ -10269,7 +10238,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
       "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
-      "dev": true,
       "requires": {
         "lowercase-keys": "^1.0.0"
       }
@@ -11292,8 +11260,7 @@
     "strict-uri-encode": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
-      "dev": true
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
     "string-width": {
       "version": "2.1.1",
@@ -11500,8 +11467,7 @@
     "timed-out": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
-      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=",
-      "dev": true
+      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
     },
     "timers-browserify": {
       "version": "2.0.11",
@@ -11918,7 +11884,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
       "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
-      "dev": true,
       "requires": {
         "prepend-http": "^2.0.0"
       },
@@ -11926,16 +11891,14 @@
         "prepend-http": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-          "dev": true
+          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
         }
       }
     },
     "url-to-options": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",
-      "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=",
-      "dev": true
+      "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k="
     },
     "use": {
       "version": "3.1.1",
@@ -12114,7 +12077,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/vue-resource/-/vue-resource-1.5.1.tgz",
       "integrity": "sha512-o6V4wNgeqP+9v9b2bPXrr20CGNQPEXjpbUWdZWq9GJhqVeAGcYoeTtn/D4q059ZiyN0DIrDv/ADrQUmlUQcsmg==",
-      "dev": true,
       "requires": {
         "got": "^8.0.3"
       }
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 418d08572..11668b183 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -13,7 +13,7 @@
     "axios": "^0.19.0",
     "echarts": "^4.6.0",
     "element-ui": "^2.13.0",
-    "node-sass": "^4.13.0",
+    "node-sass": "^4.13.1",
     "vue": "^2.5.2",
     "vue-i18n": "^8.15.1",
     "vue-resource": "^1.5.1",
diff --git a/nezha-fronted/src/assets/stylus/index.scss b/nezha-fronted/src/assets/stylus/index.scss
index 50efc86ef..1e8607b40 100644
--- a/nezha-fronted/src/assets/stylus/index.scss
+++ b/nezha-fronted/src/assets/stylus/index.scss
@@ -1,5 +1,7 @@
 $global-text-color-active: #ee9d3f; // 全局文字active字色
 
+$content-right-background-color: #fcfcfc; //右侧背景色
+
 $header-text-color: #e5e5e5; // header默认字色
 $header-text-color-active: #fff; // header高亮字色
 $header-text-color-hover: #444; //header hover字色
@@ -20,4 +22,6 @@ $box-title-color: #333; //弹框标题字体颜色
 
 $content-left-text-color: #666; //左侧菜单默认字色
 
+$dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色
+
 @import './main.scss';
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 8d771e5fd..c979642ae 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -93,7 +93,7 @@ li{
 }
 /* begin--按钮组件*/
 .nz-btn-min-width-35 {
-  min-width: 35px;
+  min-width: 45px;
 }
 .nz-btn-min-width-60 {
   min-width: 60px;
@@ -267,6 +267,7 @@ li{
   position: absolute;
   right: 8px;
   color: #666;
+  top: 0;
 }
 /* end--el-input扩展 */
 
@@ -324,7 +325,7 @@ li{
   float: left;
   width: 256px;
   height: 100%;
-  border-right: 1px solid #cccccc;
+  border-right: 1px solid #eeeeee;
   padding: 0 25px 0 15px;
   box-sizing: border-box;
 }
@@ -382,9 +383,10 @@ li{
 
 /* begin--右侧内容*/
 .content-right {
-  height: calc(100% - 131px);
+  height: 100%;
   margin-left: 256px;
   padding: 0 20px 0 20px;
+  background-color: $content-right-background-color;
 }
 .content-right-option {
   cursor: pointer;
@@ -406,8 +408,10 @@ li{
 }
 /* begin--顶部工具栏*/
 .top-tools {
-  margin: 26px 0 41px 0;
-  height: 1px;
+  display: flex;
+  height: 68px;
+  align-items : center;
+  justify-content: space-between
 }
 .top-tools .top-tool-search {
   width: 260px;
@@ -435,7 +439,6 @@ li{
   font-size: 14px;
   border-left: 1px solid white;
   border-bottom: 1px solid #d4d4d4;
-
 }
 .nz-table.el-table .el-table__header th:first-of-type {
   border-left: none;
@@ -446,13 +449,28 @@ li{
 .nz-table.el-table--border td, .el-table--border th, .nz-table .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
   border-right: none;
 }
+.chart-table .nz-table.el-table td {
+  background-color: white;
+}
 .nz-table.el-table td {
   padding: 0;
+  background-color: $content-right-background-color;
 }
 .nz-table.el-table th {
   padding: 0;
 }
-
+.nz-table.el-table th:last-of-type {
+  background-color: $content-right-background-color;
+}
+.nz-table .el-table__body-wrapper {
+  background-color: $content-right-background-color;
+}
+.chart-table .nz-table.el-table th:last-of-type {
+  background-color: white;
+}
+.chart-table .nz-table .el-table__body-wrapper {
+  background-color: white;
+}
 //小信息栏边框
 .nz-table.el-table th .cell{
   height: 36px;
@@ -734,6 +752,11 @@ li{
   font-size: 16px;
   color: black;
 }
+.right-box-form .el-form-item.metric-title-position .el-form-item__label {
+  padding: 0;
+  font-size: 14px;
+  color: #666;
+}
 .pop-item-wider .right-box-form .el-form-item .el-form-item__label {
   font-size: 14px;
   line-height: 32px;
@@ -888,8 +911,11 @@ li{
 
 
 /* begin--自定义可编辑的el-select下拉框样式*/
+.el-select-dropdown__wrap.el-scrollbar__wrap {
+  margin-bottom: 0 !important;
+}
 .config-dropdown { /* 若宽度不合适，自行增加新类覆盖宽度 */
-  width: 500px;
+  width: 490px;
 }
 .asset-dropdown {
   width: 400px;
@@ -939,3 +965,24 @@ li{
   color: #BA3939;
 }
 
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover,
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover,
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+  color:$global-text-color-active !important;
+  background-color: $dropdown-hover-background-color !important;
+}
+
+.el-button--text,
+.el-button--text:focus,
+.el-button--text:hover,
+.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path,
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
+.el-select-dropdown__item.selected,
+.el-date-table td.today span {
+  color: $global-text-color-active !important;
+}
+
+.el-date-table td.end-date span, .el-date-table td.start-date span {
+  background-color: $global-text-color-active !important;
+}
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index fca04778f..98e4bfe68 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1,8 +1,8 @@
 <style scoped>
   .chartBox {
     box-sizing: border-box;
-    padding-bottom: 10px;
     float:left;
+    padding: 0 10px 10px 10px;
   }
   .noData{
     text-align: center
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 6e14471ff..457e6b144 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -58,7 +58,7 @@
           <el-menu-item :index="'3-' + index">
             <div @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">
               <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
-              <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
+              <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData">
                 <template v-slot:optionZone>
                   <div @click="closeAllPop" class="menu-edit">
                     <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
diff --git a/nezha-fronted/src/components/common/pagination.vue b/nezha-fronted/src/components/common/pagination.vue
index 1ec293b15..74bda1a24 100644
--- a/nezha-fronted/src/components/common/pagination.vue
+++ b/nezha-fronted/src/components/common/pagination.vue
@@ -60,7 +60,7 @@ export default {
     float: left;
   }
   .pagination {
-    padding-top: 12px;
+    padding-top: 16px;
     text-align: center;
   }
 
@@ -84,11 +84,21 @@ export default {
   .el-pagination .el-pager .more::before {
     line-height: 20px;
   }
+  .el-pagination .el-pager .more {
+    background-color: $content-right-background-color;
+  }
+  .btn-next, .btn-prev {
+    background-color: $content-right-background-color !important;
+  }
+  .pagination input {
+    background-color: $content-right-background-color !important;
+  }
   .el-pager li.number{
     font-family: NotoSansSC-Regular;
     color: #666666;
     letter-spacing: 0;
     font-weight:normal;
+    background-color: $content-right-background-color;
   }
   .el-pager li.number.active{
     font-family: NotoSansSC-Regular;
diff --git a/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue b/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
index 538ca35e0..d0df9668d 100644
--- a/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
@@ -61,9 +61,9 @@
     props: {
       chartInfo: Object,
       elementTarget:Object,
-      seriesData:Object,
-      chartCount:Object,
-      series:Object
+      seriesData:Array,
+      chartCount:String,
+      series:Array
     },
     data() {
       return {
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index ef1106568..9ac4e17e9 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -1200,7 +1200,7 @@
     }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
     .new-search{
         display: flex;
@@ -1216,7 +1216,7 @@
     }
     .new-search .search-input-all{
         width: 240px;
-        background: #fff;
+        background-color: $content-right-background-color;
         color: rgba(0,0,0,.55);
         height: 24px;
         line-height: 24px;
@@ -1226,6 +1226,9 @@
         position: relative;
 
     }
+    input {
+        background-color: $content-right-background-color;
+    }
     .search-input-all .btn-retract{
         padding: 0px 4px;
         text-align: center;
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index e95152894..ec82d3d3b 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -22,14 +22,19 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
-        <button id="alert-add" @click="toAdd"
-                class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
+        <div>
+
+        </div>
+        <div>
+          <button id="alert-add" @click="toAdd"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
                     <span class="top-tool-btn-txt">
                       <i class="nz-icon-create-square nz-icon"></i>
                       {{$t('overall.add')}}</span>
-        </button>
-        <div class="top-tool-search float-right">
-          <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </button>
+          <div class="top-tool-search float-right">
+            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </div>
         </div>
       </div>
       <el-table
@@ -37,7 +42,7 @@
         :data="tableData"
         border
         tooltip-effect="light"
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;">
         <el-table-column
           :resizable="false"
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 63db5f515..0c2e213df 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -16,6 +16,7 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
+        <div></div>
         <div class="top-tool-search float-right">
           <search-input :searchMsg="searchMsg" @search="search"></search-input>
         </div>
@@ -25,7 +26,7 @@
         :data="tableData"
         border
         tooltip-effect="light"
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;">
         <el-table-column
           :resizable="false"
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 9fc91f181..e6fe6f3f4 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -31,18 +31,21 @@
 
     <div class="content-right">
       <div class="top-tools">
-        <button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-add">
-          <span class="top-tool-btn-txt">
-             <i class="nz-icon-create-square nz-icon"></i>
-            {{$t('overall.add')}}</span>
-          <!-- ADD按钮 -->
-        </button>
-        <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
+        <div></div>
+        <div>
+          <button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-add">
+            <span class="top-tool-btn-txt">
+               <i class="nz-icon-create-square nz-icon"></i>
+              {{$t('overall.add')}}</span>
+            <!-- ADD按钮 -->
+          </button>
+          <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
+        </div>
       </div>
 
       <el-table
         class="nz-table"
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;"
         :data="tableData"
         border
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 9dd5606c5..86306bc62 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -22,21 +22,24 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
-        <button type="button" @click="toAdd"
-                class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="account-add">
+        <div></div>
+        <div>
+          <button type="button" @click="toAdd"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="account-add">
                 <span class="top-tool-btn-txt">
                   <i class="nz-icon-create-square nz-icon"></i>
                   {{$t('overall.add')}}</span>
-        </button>
-        <div class="top-tool-search float-right">
-          <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </button>
+          <div class="top-tool-search float-right">
+            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </div>
         </div>
       </div>
       <el-table
         class="nz-table"
         :data="tableData"
         border
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;">
         <el-table-column
           :resizable="false"
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 0e26df01f..d1fa09499 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -2,581 +2,608 @@
   .prom {
     height: 100%;
   }
-  .top-tools .top-tool-btn-txt .nz-icon{
+
+  .top-tools .top-tool-btn-txt .nz-icon {
     display: inline-block;
     font-size: 12px;
-    margin-right:6px;
+    margin-right: 6px;
   }
 </style>
 <template>
-    <div class="prom">
-        <div class="content-left">
-            <div class="sidebar-title">{{$t('config.config')}}</div>
-            <div class="sidebar-info">
-                <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">{{$t('config.account.account')}}</div>
-                <div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div>
-            </div>
+  <div class="prom">
+    <div class="content-left">
+      <div class="sidebar-title">{{$t('config.config')}}</div>
+      <div class="sidebar-info">
+        <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
+          {{$t('config.account.account')}}
         </div>
-        <div class="content-right">
-            <div class="top-tools">
-              <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="prom-add">
-                <span class="top-tool-btn-txt">
-                  <i class="nz-icon-create-square nz-icon"></i>
-                  {{$t('overall.add')}}</span>
-              </button>
-              <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
-            </div>
-            <el-table :data="tableData" border height="calc(100% - 65px)" style="width: 100%;" class="nz-table">
-                <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :key="`col-${index}`" :label="item.label">
-                    <template slot="header" slot-scope="scope">
-                        <template v-if="index==0">
+        <div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div>
+      </div>
+    </div>
+    <div class="content-right">
+      <div class="top-tools">
+        <div></div>
+        <div>
+          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82"
+                  id="prom-add">
+                  <span class="top-tool-btn-txt">
+                    <i class="nz-icon-create-square nz-icon"></i>
+                    {{$t('overall.add')}}</span>
+          </button>
+          <div class="top-tool-search float-right">
+            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </div>
+        </div>
+      </div>
+      <el-table :data="tableData" border height="calc(100% - 195px)" style="width: 100%;" class="nz-table">
+        <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
+                         :key="`col-${index}`" :label="item.label">
+          <template slot="header" slot-scope="scope">
+            <template v-if="index==0">
                             <span @click.stop="elementsetShow('shezhi',$event)" id="prom-tab-set" class="nz-table-gear">
                                 <i class="nz-icon nz-icon-gear"></i>
                             </span>
-                            <span class="nz-table-txt">{{item.label}}</span>
-                        </template>
-                        <div v-else>
-                            <span>{{item.label}}</span>
-                        </div>
-                    </template>
-                    <template slot-scope="scope" :column="item">
-                      <idc-config-box v-if="item.prop == 'idc'" ref="idcConfigBox" :post-idc="JSON.parse(JSON.stringify(scope.row[item.prop]))" :is-edit="false" placement="left" @after="getIdcData" :button-class="'checkbox-edit'">
-                        <template v-slot:optionZone>
-                          <span  class="link" @click="closeAllPop">{{scope.row[item.prop].name}}</span>
-                        </template>
-                      </idc-config-box>
+              <span class="nz-table-txt">{{item.label}}</span>
+            </template>
+            <div v-else>
+              <span>{{item.label}}</span>
+            </div>
+          </template>
+          <template slot-scope="scope" :column="item">
+            <idc-config-box v-if="item.prop == 'idc'" ref="idcConfigBox"
+                            :post-idc="JSON.parse(JSON.stringify(scope.row[item.prop]))" :is-edit="false"
+                            placement="left" @after="getIdcData" :button-class="'checkbox-edit'">
+              <template v-slot:optionZone>
+                <span class="link" @click="closeAllPop">{{scope.row[item.prop].name}}</span>
+              </template>
+            </idc-config-box>
 
 
-                        <span v-else-if="item.prop == 'type'">
+            <span v-else-if="item.prop == 'type'">
                             {{scope.row[item.prop] == '1' ? 'Global' : ''}}
                             {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
                         </span>
-                        <div v-else-if="item.prop == 'option'" class="content-right-options">
+            <div v-else-if="item.prop == 'option'" class="content-right-options">
                           <span @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i
                             class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
-                          &nbsp;&nbsp;&nbsp;
-                          <span @click="toEdit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i
-                            class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
-                          &nbsp;&nbsp;&nbsp;
-                          <span @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i
-                            class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
-                        </div>
-                        <span v-else>{{scope.row[item.prop]}}</span>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-        </div>
-
-        <transition name="right-box">
-            <div class="right-box right-box-prom" v-if="rightBox.show">
-                <!-- begin--顶部按钮-->
-              <div class="right-box-top-btns">
-                <button type="button" v-if="rightBox.isEdit && promServer.id != ''" @click="del(promServer)" id="prom-edit-del"
-                        class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-                  <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
-                  <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-                </button>
-                <button v-if="!rightBox.isEdit" type="button" @click="saveOrToEdit"
-                        class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82" id="prom-edit-save">
-                  <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
-                  <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
-                </button>
-              </div>
-                <!-- end--顶部按钮-->
-
-                <!-- begin--标题-->
-                <div class="right-box-title">{{rightBox.title}}</div>
-                <!-- end--标题-->
-
-                <!-- begin--表单-->
-              <el-scrollbar class="right-box-form-box">
-                <el-form class="right-box-form" :model="promServer" label-position="top" label-width="80px" :rules="rules" ref="promServerForm">
-                  <!--DC start-->
-                  <el-form-item label="DC"  prop="idc.name">
-                    <div class="right-box-form-content">
-                    <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
-                      <el-option @click.native="blurEditIdc()" v-for="item in idcData" :key="item.id" :label="item.name" :value="item" :id="'prom-edit-idc-op-'+item.id">
-                        <span class="config-dropdown-label-txt">{{item.name}}</span>
-                        <idc-config-box :post-idc="item" placement="left" @after="getIdcData" :button-class="'config-dropdown-btn'">
-                          <template v-slot:optionZone>
-                            <i class="el-icon-edit-outline"></i>
-                          </template>
-                        </idc-config-box>
-                        <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)" :id="'prom-edit-idc-op-del-'+item.id"><i class="el-icon-delete"></i></span>
-                      </el-option>
-                    </el-select>
-
-
-                    <div class="right-box-row-btn" v-if="rightBox.isEdit">
-                      <idc-config-box placement="left" @after="getIdcData"></idc-config-box>
-                    </div>
-                    <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
-                    </div>
-                  </el-form-item>
-                  <!--DC end-->
-
-                  <!--host-->
-                  <el-form-item label="Host" prop="host">
-                    <el-input type="text" v-if="rightBox.isEdit" placeholder="" v-model="promServer.host" size="small"></el-input>
-                    <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.host}}</div>
-                  </el-form-item>
-                  <!--Port-->
-                  <el-form-item label="Port" prop="port">
-                    <el-input type="text" v-if="rightBox.isEdit" placeholder="" v-model.number="promServer.port" size="small"></el-input>
-                    <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.port}}</div>
-                  </el-form-item>
-                  <!--type-->
-                  <el-form-item :label="$t('config.promServer.type')" prop="type">
-                    <el-select popper-class="config-dropdown" v-model="promServer.type" placeholder="" v-if="rightBox.isEdit" size="small">
-                      <el-option v-for="item in typeData" :key="item.key" :label="item.value" :value="item.key" :id="'prom-edit-type-op-'+item.key"></el-option>
-                    </el-select>
-                    <div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == promServer.type" :id="'prom-edit-type-op-del-'+item.key" class="right-box-form-content-txt">{{item.value}}</div>
-                  </el-form-item>
-                </el-form>
-              </el-scrollbar>
-              <!-- end--表单-->
-
-              <!--底部按钮-->
-              <div class="right-box-bottom-btns">
-                <button @click="esc" id="prom-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
-                  <span>{{$t('overall.cancel')}}</span>
-                </button>
-                <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="prom-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
-                  <span>{{$t('overall.save')}}</span>
-                </button>
-              </div>
+              &nbsp;&nbsp;&nbsp;
+              <span @click="toEdit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i
+                class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
+              &nbsp;&nbsp;&nbsp;
+              <span @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i
+                class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
             </div>
-        </transition>
-        <element-set
-          v-clickoutside="elementsetHide"
-          :table-title="tableTitle"
-          :dropCol="dropCol"
-          @tablelable="tablelabelEmit"
-          ref="elementset"
-        ></element-set>
+            <span v-else>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
     </div>
 
+    <transition name="right-box">
+      <div class="right-box right-box-prom" v-if="rightBox.show">
+        <!-- begin--顶部按钮-->
+        <div class="right-box-top-btns">
+          <button type="button" v-if="rightBox.isEdit && promServer.id != ''" @click="del(promServer)"
+                  id="prom-edit-del"
+                  class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+            <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+            <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+          </button>
+          <button v-if="!rightBox.isEdit" type="button" @click="saveOrToEdit"
+                  class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82"
+                  id="prom-edit-save">
+            <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
+            <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
+          </button>
+        </div>
+        <!-- end--顶部按钮-->
+
+        <!-- begin--标题-->
+        <div class="right-box-title">{{rightBox.title}}</div>
+        <!-- end--标题-->
+
+        <!-- begin--表单-->
+        <el-scrollbar class="right-box-form-box">
+          <el-form class="right-box-form" :model="promServer" label-position="top" label-width="80px" :rules="rules"
+                   ref="promServerForm">
+            <!--DC start-->
+            <el-form-item label="DC" prop="idc.name">
+              <div class="right-box-form-content">
+                <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown"
+                           v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
+                  <el-option @click.native="blurEditIdc()" v-for="item in idcData" :key="item.id" :label="item.name"
+                             :value="item" :id="'prom-edit-idc-op-'+item.id">
+                    <span class="config-dropdown-label-txt">{{item.name}}</span>
+                    <idc-config-box :post-idc="item" placement="left" @after="getIdcData"
+                                    :button-class="'config-dropdown-btn'">
+                      <template v-slot:optionZone>
+                        <i class="el-icon-edit-outline"></i>
+                      </template>
+                    </idc-config-box>
+                    <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"
+                          :id="'prom-edit-idc-op-del-'+item.id"><i class="el-icon-delete"></i></span>
+                  </el-option>
+                </el-select>
+
+
+                <div class="right-box-row-btn" v-if="rightBox.isEdit">
+                  <idc-config-box placement="left" @after="getIdcData"></idc-config-box>
+                </div>
+                <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
+              </div>
+            </el-form-item>
+            <!--DC end-->
+
+            <!--host-->
+            <el-form-item label="Host" prop="host">
+              <el-input type="text" v-if="rightBox.isEdit" placeholder="" v-model="promServer.host"
+                        size="small"></el-input>
+              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.host}}</div>
+            </el-form-item>
+            <!--Port-->
+            <el-form-item label="Port" prop="port">
+              <el-input type="text" v-if="rightBox.isEdit" placeholder="" v-model.number="promServer.port"
+                        size="small"></el-input>
+              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.port}}</div>
+            </el-form-item>
+            <!--type-->
+            <el-form-item :label="$t('config.promServer.type')" prop="type">
+              <el-select popper-class="config-dropdown" v-model="promServer.type" placeholder="" v-if="rightBox.isEdit"
+                         size="small">
+                <el-option v-for="item in typeData" :key="item.key" :label="item.value" :value="item.key"
+                           :id="'prom-edit-type-op-'+item.key"></el-option>
+              </el-select>
+              <div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == promServer.type"
+                   :id="'prom-edit-type-op-del-'+item.key" class="right-box-form-content-txt">{{item.value}}
+              </div>
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <!-- end--表单-->
+
+        <!--底部按钮-->
+        <div class="right-box-bottom-btns">
+          <button @click="esc" id="prom-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
+            <span>{{$t('overall.cancel')}}</span>
+          </button>
+          <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="prom-save"
+                  class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
+            <span>{{$t('overall.save')}}</span>
+          </button>
+        </div>
+      </div>
+    </transition>
+    <element-set
+      v-clickoutside="elementsetHide"
+      :table-title="tableTitle"
+      :dropCol="dropCol"
+      @tablelable="tablelabelEmit"
+      ref="elementset"
+    ></element-set>
+  </div>
+
 </template>
 <script>
   import {host} from '../../common/js/validate';
   import {port} from '../../common/js/validate';
-export default {
 
-  name: "prom",
-  data() {
-    return {
-      rightBox: { //弹出框相关
-        show: false,
-        isEdit: false, //false查看，true编辑
-        title: ''
-      },
-      promServer: {
-        id: '',
-        host: '',
-        port:9090,
-        idc: {id: '', name: '', location: ''}
-      },
-      rules:{
-        'idc.name':[
-          {required:true,message:this.$t('validate.required'),trigger:'change'}
-        ],
-        host:[
-          {required:true,message:this.$t('validate.required'),trigger: 'blur'},
-          { validator: host, trigger: 'blur'}
-        ],
-        port:[
-          { validator: port, trigger: 'blur'},
-          {required:true,message:this.$t('validate.required')}
-        ],
-        type:[
-          {required:true,message:this.$t('validate.required'),trigger:'change'},
-        ]
-      },
-      pageObj: {
-        pageNo: 1,
-        pageSize: 20,
-        total:0
-      },
-      tableTitle: [
-        {
-          label: 'ID',
-          prop: 'id',
-          show: true,
-          width: 80
-        }, {
-          label: 'DC',
-          prop: 'idc',
-          show: true,
-        }, {
-          label: 'Host',
-          prop: 'host',
-          show: true,
-        }, {
-          label: 'Port',
-          prop: 'port',
-          show: true,
-        }, {
-          label: this.$t("config.promServer.type"),
-          prop: 'type',
-          show: true,
-        }, {
-          label: this.$t('config.account.option'),
-          prop: 'option',
-          show: true,
-          width: 230
-        }
-      ],
-      tablelable: [],
-      dropCol: [],
-      tableData: [],
-      idcData: [],
-      typeData: [
-        {
-          key: 1,
-          value: 'Global'
-        }, {
-          key: 2,
-          value: 'Per-Datacenter'
-        }
-      ],
-      searchMsg: { //给搜索框子组件传递的信息
-        zheze_none: true,
-        searchLabelList: [{
-          id: 1,
-          name: 'ID',
-          type: 'input',
-          label: 'id',
-          disabled: false
-        },{
-          id: 5,
-          name: 'DC',
-          type: 'dc',
-          label: 'dc',
-          disabled: false
-        },{
-          id: 6,
-          name: this.$t('config.promServer.type'),
-          type: 'select',
-          label: 'promType',
-          disabled: false
-        },{
-          id: 8,
-          name: this.$t('project.endpoint.host'),
-          type: 'input',
-          label: 'host',
-          disabled: false
-        },{
-          id: 9,
-          name: this.$t('project.endpoint.port'),
-          type: 'input',
-          label: 'port',
-          disabled: false
-        }],
-      },
-      searchLabel: {}, //搜索参数
-      idcSelectedData: {
-        id: '',
-        name: '',
-        location: '',
-        principal: '',
-        tel: ''
-      },
-      addIdcData: {
-        id: '',
-        name: '',
-        location: '',
-        principal: '',
-        tel: ''
-      },
-      popIdcData: {
-        id: '',
-        name: '',
-        location: '',
-        principal: '',
-        tel: ''
-      },
-      idcUserData: '',
-    }
-  },
-  methods: {
-    elementsetShow(s, e) {
-      var eventfixed = {
-        shezhi: 0,
-        screen: 0
-      };
-      eventfixed[s] = 1;
-      e.preventDefault();
-      this.$store.commit('setHeaderTable', this.tablelable);
-      this.$store.commit('setEventfixed', eventfixed);
-      const h = document.documentElement.clientHeight;
-      const w = document.documentElement.clientWidth;
-      const dw = this.$refs.elementset.$el.offsetWidth;
-      const dh = this.$refs.elementset.$el.offsetHeight;
-      let positionx =
-        e.clientX + dw <= w - 10 ? e.clientX - 250 : e.clientX - 250 - dw;
-      let positiony =
-        e.clientY + dh <= h - 10
-          ? e.clientY - 70
-          : e.clientY - 70 - (e.clientY + dh - h);
-      this.$store.commit('setPosition', { positionx, positiony });
-    },
-    elementsetHide() {
-      //悬浮点击空白隐藏
-      this.$refs.elementset.elementsetHide();
-    },
-    tablelabelEmit(data) {
-      //获取子组件传过来的参数
-      this.$store.commit('setHeaderTable', data);
-      this.tablelable = data;
-    },
-    toEdit: function(u) {
-      this.promServer = Object.assign({}, u);
-      this.rightBox.isEdit = true;
-      this.rightBox.title = this.$t("config.promServer.editProm") + "  ID：" + u.id;
-      this.rightBox.show = true;
-    },
-    del: function(u) {
-      this.$confirm(this.$t("tip.confirmDelete"), {
-        confirmButtonText: this.$t("tip.yes"),
-        cancelButtonText: this.$t("tip.no"),
-        type: 'warning'
-      }).then(() => {
-        this.$delete("promServer?ids=" + u.id).then(response => {
-          if (response.code === 200) {
-            this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-            this.getTableData();
-            this.rightBox.show = false;
-          } else {
-            this.$message.error(response.msg);
+  export default {
+
+    name: "prom",
+    data() {
+      return {
+        rightBox: { //弹出框相关
+          show: false,
+          isEdit: false, //false查看，true编辑
+          title: ''
+        },
+        promServer: {
+          id: '',
+          host: '',
+          port: 9090,
+          idc: {id: '', name: '', location: ''}
+        },
+        rules: {
+          'idc.name': [
+            {required: true, message: this.$t('validate.required'), trigger: 'change'}
+          ],
+          host: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
+            {validator: host, trigger: 'blur'}
+          ],
+          port: [
+            {validator: port, trigger: 'blur'},
+            {required: true, message: this.$t('validate.required')}
+          ],
+          type: [
+            {required: true, message: this.$t('validate.required'), trigger: 'change'},
+          ]
+        },
+        pageObj: {
+          pageNo: 1,
+          pageSize: 20,
+          total: 0
+        },
+        tableTitle: [
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true,
+            width: 80
+          }, {
+            label: 'DC',
+            prop: 'idc',
+            show: true,
+          }, {
+            label: 'Host',
+            prop: 'host',
+            show: true,
+          }, {
+            label: 'Port',
+            prop: 'port',
+            show: true,
+          }, {
+            label: this.$t("config.promServer.type"),
+            prop: 'type',
+            show: true,
+          }, {
+            label: this.$t('config.account.option'),
+            prop: 'option',
+            show: true,
+            width: 230
           }
-        })
-      });
-    },
-    detail: function(u) {
-      this.promServer = Object.assign({}, u);
-      this.rightBox.isEdit = false;
-      this.rightBox.title = "Prometheus Server ID：" + u.id;
-      this.rightBox.show = true;
-    },
-    toAdd: function() {
-      this.cleanPromServer();
-      this.rightBox.isEdit = true;
-      this.rightBox.title = this.$t("config.promServer.createProm");
-      this.rightBox.show = true;
-    },
-    save: function() {
-      this.$refs.promServerForm.validate((valid => {
-        if(valid){
-          if (this.promServer.id) {
-            this.$put('promServer', this.promServer).then(response => {
-              if (response.code === 200) {
-                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.getTableData();
-                this.rightBox.isEdit = false;
-                this.esc();
-              } else {
-                this.$message.error(response.msg);
-              }
-            });
-          } else {
-            this.$post('promServer', this.promServer).then(response => {
-              if (response.code === 200) {
-                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.getTableData();
-                this.rightBox.isEdit = false;
-                this.esc();
-              } else {
-                this.$message.error(response.msg);
-              }
-            });
+        ],
+        tablelable: [],
+        dropCol: [],
+        tableData: [],
+        idcData: [],
+        typeData: [
+          {
+            key: 1,
+            value: 'Global'
+          }, {
+            key: 2,
+            value: 'Per-Datacenter'
           }
-        }else{
-          return false;
-        }
-      }))
-    },
-    saveOrToEdit: function() {
-      if (!this.rightBox.isEdit) {
-        this.toEdit(this.promServer);
-      } else {
-        this.save();
+        ],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 1,
+            name: 'ID',
+            type: 'input',
+            label: 'id',
+            disabled: false
+          }, {
+            id: 5,
+            name: 'DC',
+            type: 'dc',
+            label: 'dc',
+            disabled: false
+          }, {
+            id: 6,
+            name: this.$t('config.promServer.type'),
+            type: 'select',
+            label: 'promType',
+            disabled: false
+          }, {
+            id: 8,
+            name: this.$t('project.endpoint.host'),
+            type: 'input',
+            label: 'host',
+            disabled: false
+          }, {
+            id: 9,
+            name: this.$t('project.endpoint.port'),
+            type: 'input',
+            label: 'port',
+            disabled: false
+          }],
+        },
+        searchLabel: {}, //搜索参数
+        idcSelectedData: {
+          id: '',
+          name: '',
+          location: '',
+          principal: '',
+          tel: ''
+        },
+        addIdcData: {
+          id: '',
+          name: '',
+          location: '',
+          principal: '',
+          tel: ''
+        },
+        popIdcData: {
+          id: '',
+          name: '',
+          location: '',
+          principal: '',
+          tel: ''
+        },
+        idcUserData: '',
       }
     },
-    toEditIdc: function(item) {
-      if (!item.isEdit) {
-        //如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
-        this.blurEditIdc();
-        item.isEdit = true;
-      } else {
-        //如果已在编辑状态，判断name是否有变更，有变更则发请求
-        if (item.name != item.oldName) {
-          this.$put('idc', item).then(response => {
+    methods: {
+      elementsetShow(s, e) {
+        var eventfixed = {
+          shezhi: 0,
+          screen: 0
+        };
+        eventfixed[s] = 1;
+        e.preventDefault();
+        this.$store.commit('setHeaderTable', this.tablelable);
+        this.$store.commit('setEventfixed', eventfixed);
+        const h = document.documentElement.clientHeight;
+        const w = document.documentElement.clientWidth;
+        const dw = this.$refs.elementset.$el.offsetWidth;
+        const dh = this.$refs.elementset.$el.offsetHeight;
+        let positionx =
+          e.clientX + dw <= w - 10 ? e.clientX - 250 : e.clientX - 250 - dw;
+        let positiony =
+          e.clientY + dh <= h - 10
+            ? e.clientY - 70
+            : e.clientY - 70 - (e.clientY + dh - h);
+        this.$store.commit('setPosition', {positionx, positiony});
+      },
+      elementsetHide() {
+        //悬浮点击空白隐藏
+        this.$refs.elementset.elementsetHide();
+      },
+      tablelabelEmit(data) {
+        //获取子组件传过来的参数
+        this.$store.commit('setHeaderTable', data);
+        this.tablelable = data;
+      },
+      toEdit: function (u) {
+        this.promServer = Object.assign({}, u);
+        this.rightBox.isEdit = true;
+        this.rightBox.title = this.$t("config.promServer.editProm") + "  ID：" + u.id;
+        this.rightBox.show = true;
+      },
+      del: function (u) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("promServer?ids=" + u.id).then(response => {
             if (response.code === 200) {
-              item.errorMessage = '';
-              item.oldName = item.name;
-              item.isEdit = false;
-              this.getIdcData();
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();
+              this.rightBox.show = false;
             } else {
-              this.$set(item, 'errorMessage', response.msg);
+              this.$message.error(response.msg);
             }
           })
-        } else {
-          item.errorMessage = '';
-          item.isEdit = false;
-        }
-      }
-    },
-    blurEditIdc: function() {
-      for (var i = 0; i < this.idcData.length; i++) {
-        if (this.idcData[i].isEdit) {
-          this.idcData[i].name = this.idcData[i].oldName;
-          this.idcData[i].isEdit = false;
-
-          this.idcData[i].errorMessage = '';
-          break;
-        }
-      }
-    },
-    toDelIdc: function(item) {
-      this.blurEditIdc();
-      this.$confirm(this.$t("tip.confirmDelete"), {
-        confirmButtonText: this.$t("tip.yes"),
-        cancelButtonText: this.$t("tip.no"),
-        type: 'warning'
-      }).then(() => {
-        this.$delete("idc?ids=" + item.id).then(response => {
-          if (response.code === 200) {
-            this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-            this.getTableData();
-            this.getIdcData();
-          } else {
-            this.$message.error(response.msg);
-          }
         });
-      });
-    },
-    getIdcData: function() {
-      this.$get('idc', this.pageObj).then(response => {
-        if (response.code === 200) {
-          this.idcData = response.data.list;
-          for (var i = 0; i < this.idcData.length; i++) {
-            this.$set(this.idcData[i], 'oldName', this.idcData[i].name);
-            this.$set(this.idcData[i], 'isEdit', false);
-            this.$set(this.idcData[i], this.idcData[i].name, false)
-          }
-          this.getTableData();
-        }
-      })
-
-    },
-    esc: function() {
-      this.rightBox.show = false;
-    },
-    jumpTo(data,id) {
-      this.$store.state.assetData.moduleData = data
-      this.$store.state.assetData.selectedData = id
-      this.$router.push({
-        path: "/" + data,
-        query: {
-          t: +new Date()
-        }
-      });
-    },
-    getTableData: function() {
-      this.tableData=[];
-      this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-      this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-      this.$get('promServer', this.searchLabel).then(response => {
-        if (response.code === 200) {
-          for (var i = 0; i < response.data.list.length; i++) {
-            for (var j = 0; j < this.idcData.length; j++) {
-              if (response.data.list[i].idcId == this.idcData[j].id) {
-                response.data.list[i].idc = Object.assign({}, this.idcData[j]);
-                break;
-              }
+      },
+      detail: function (u) {
+        this.promServer = Object.assign({}, u);
+        this.rightBox.isEdit = false;
+        this.rightBox.title = "Prometheus Server ID：" + u.id;
+        this.rightBox.show = true;
+      },
+      toAdd: function () {
+        this.cleanPromServer();
+        this.rightBox.isEdit = true;
+        this.rightBox.title = this.$t("config.promServer.createProm");
+        this.rightBox.show = true;
+      },
+      save: function () {
+        this.$refs.promServerForm.validate((valid => {
+          if (valid) {
+            if (this.promServer.id) {
+              this.$put('promServer', this.promServer).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.getTableData();
+                  this.rightBox.isEdit = false;
+                  this.esc();
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            } else {
+              this.$post('promServer', this.promServer).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.getTableData();
+                  this.rightBox.isEdit = false;
+                  this.esc();
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
             }
+          } else {
+            return false;
           }
-          this.tableData = response.data.list;
-          this.pageObj.total = response.data.total
+        }))
+      },
+      saveOrToEdit: function () {
+        if (!this.rightBox.isEdit) {
+          this.toEdit(this.promServer);
+        } else {
+          this.save();
         }
-      })
-    },
-    cleanPromServer: function() {
-      this.promServer = {
-        id: '',
-        host: '',
-        port:9090,
-        idcId: '',
-        idc: {id: '', name: '', location: ''}
-      }
-    },
-    pageNo(val) {
-      this.pageObj.pageNo = val;
-      this.getTableData();
-    },
-    pageSize(val) {
-      this.pageObj.pageSize = val;
-      this.getTableData();
-    },
-    search: function(searchObj) {
-      this.pageObj.pageNo = 1;
-      this.searchLabel = {};
-      for (let item in searchObj) {
-        if (searchObj[item]) {
-          this.$set(this.searchLabel, item, searchObj[item]);
+      },
+      toEditIdc: function (item) {
+        if (!item.isEdit) {
+          //如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
+          this.blurEditIdc();
+          item.isEdit = true;
+        } else {
+          //如果已在编辑状态，判断name是否有变更，有变更则发请求
+          if (item.name != item.oldName) {
+            this.$put('idc', item).then(response => {
+              if (response.code === 200) {
+                item.errorMessage = '';
+                item.oldName = item.name;
+                item.isEdit = false;
+                this.getIdcData();
+              } else {
+                this.$set(item, 'errorMessage', response.msg);
+              }
+            })
+          } else {
+            item.errorMessage = '';
+            item.isEdit = false;
+          }
         }
-      }
-      this.getTableData();
-    },
-    addNewData(type) {
-      if (type === 'IDC') {
-        this.$post('idc', this.addIdcData).then(res => {
-          if (res.code === 200) {
-            const h = this.$createElement;
-            this.$notify({
-              message: h('i', {style: 'color: teal'}, '添加成功'),
-              duration: 2000
-            });
-            this.getIdcData()
-          }else{
-            const h = this.$createElement;
-            this.$notify({
-              message: h('i', {style: 'color: teal'}, res.msg),
-              duration: 2000
-            });
+      },
+      blurEditIdc: function () {
+        for (var i = 0; i < this.idcData.length; i++) {
+          if (this.idcData[i].isEdit) {
+            this.idcData[i].name = this.idcData[i].oldName;
+            this.idcData[i].isEdit = false;
+
+            this.idcData[i].errorMessage = '';
+            break;
+          }
+        }
+      },
+      toDelIdc: function (item) {
+        this.blurEditIdc();
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("idc?ids=" + item.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();
+              this.getIdcData();
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
+      getIdcData: function () {
+        this.$get('idc', this.pageObj).then(response => {
+          if (response.code === 200) {
+            this.idcData = response.data.list;
+            for (var i = 0; i < this.idcData.length; i++) {
+              this.$set(this.idcData[i], 'oldName', this.idcData[i].name);
+              this.$set(this.idcData[i], 'isEdit', false);
+              this.$set(this.idcData[i], this.idcData[i].name, false)
+            }
+            this.getTableData();
           }
         })
-      }
-    },
-    getSingleIDCData(data, item) {
-      if (item !== 'edit') {
-        this.idcSelectedData = '';
-        this.idcData.forEach(item => {
-          if (item.id === data) {
-            this.idcSelectedData = item
-          }
-        });
-      } else {
-        this.idcData.forEach(item => {
-          if (item.id === data) {
-            this.popIdcData.name = item.name
-            this.popIdcData.location = item.location
-            this.popIdcData.principal = item.principal
-            this.popIdcData.tel = item.tel
-          }
-        });
-      }
-    },
-    getUserData() {
-      this.$get('sys/user/list').then(response => {
 
-        if (response.code === 200) {
-          this.idcUserData = response.data.list
+      },
+      esc: function () {
+        this.rightBox.show = false;
+      },
+      jumpTo(data, id) {
+        this.$store.state.assetData.moduleData = data
+        this.$store.state.assetData.selectedData = id
+        this.$router.push({
+          path: "/" + data,
+          query: {
+            t: +new Date()
+          }
+        });
+      },
+      getTableData: function () {
+        this.tableData = [];
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.$get('promServer', this.searchLabel).then(response => {
+          if (response.code === 200) {
+            for (var i = 0; i < response.data.list.length; i++) {
+              for (var j = 0; j < this.idcData.length; j++) {
+                if (response.data.list[i].idcId == this.idcData[j].id) {
+                  response.data.list[i].idc = Object.assign({}, this.idcData[j]);
+                  break;
+                }
+              }
+            }
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total
+          }
+        })
+      },
+      cleanPromServer: function () {
+        this.promServer = {
+          id: '',
+          host: '',
+          port: 9090,
+          idcId: '',
+          idc: {id: '', name: '', location: ''}
         }
-      })
-    },
-    editData(data, id, item) {
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        this.getTableData();
+      },
+      search: function (searchObj) {
+        this.pageObj.pageNo = 1;
+        this.searchLabel = {};
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        this.getTableData();
+      },
+      addNewData(type) {
+        if (type === 'IDC') {
+          this.$post('idc', this.addIdcData).then(res => {
+            if (res.code === 200) {
+              const h = this.$createElement;
+              this.$notify({
+                message: h('i', {style: 'color: teal'}, '添加成功'),
+                duration: 2000
+              });
+              this.getIdcData()
+            } else {
+              const h = this.$createElement;
+              this.$notify({
+                message: h('i', {style: 'color: teal'}, res.msg),
+                duration: 2000
+              });
+            }
+          })
+        }
+      },
+      getSingleIDCData(data, item) {
+        if (item !== 'edit') {
+          this.idcSelectedData = '';
+          this.idcData.forEach(item => {
+            if (item.id === data) {
+              this.idcSelectedData = item
+            }
+          });
+        } else {
+          this.idcData.forEach(item => {
+            if (item.id === data) {
+              this.popIdcData.name = item.name
+              this.popIdcData.location = item.location
+              this.popIdcData.principal = item.principal
+              this.popIdcData.tel = item.tel
+            }
+          });
+        }
+      },
+      getUserData() {
+        this.$get('sys/user/list').then(response => {
+
+          if (response.code === 200) {
+            this.idcUserData = response.data.list
+          }
+        })
+      },
+      editData(data, id, item) {
         item.id = id;
         this.$put(data, item).then(res => {
           if (res.code === 200) {
@@ -585,7 +612,7 @@ export default {
               message: h('i', {style: 'color: teal'}, '修改成功'),
               duration: 2000
             })
-          }else{
+          } else {
             const h = this.$createElement;
             this.$notify({
               message: h('i', {style: 'color: teal'}, res.msg),
@@ -593,27 +620,27 @@ export default {
             })
           }
         })
+      },
+      closeAllPop: function () {
+        this.$refs.idcConfigBox.forEach((item) => {
+          item.show(false)
+        })
+      },
     },
-    closeAllPop:function(){
-      this.$refs.idcConfigBox.forEach((item)=>{
-        item.show(false)
-      })
+    mounted: function () {
+      this.getIdcData();
+      this.getUserData();
+      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
+        : this.tableTitle;
+      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
+        : this.tableTitle;
     },
-  },
-  mounted: function() {
-    this.getIdcData();
-    this.getUserData();
-    this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-      ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-      : this.tableTitle;
-    this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-      ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-      : this.tableTitle;
-  },
-  watch: {
-    'promServer.idc': function(n, o) {
-      this.promServer.idcId = n.id;
+    watch: {
+      'promServer.idc': function (n, o) {
+        this.promServer.idcId = n.id;
+      }
     }
   }
-}
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index 47e3b0430..074ac9bf3 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -92,7 +92,7 @@
     width: 100px;
   }
   .li-list-part-label-val-list .el-select--mini {
-    width: calc(100% - 45px);
+    width: calc(100% - 45px) !important;
   }
   .nz-tab-chart-item-box{
     padding:0;
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
index 42991e919..192e72cd7 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
@@ -143,7 +143,7 @@
 <style>
   .li-list-part-label-val-list .metric-title-position .el-form-item__label {
     font-size: 14px;
-    height: 10px;
+    height: 15px;
     color: #666;
     line-height: 14px;
     text-align: left;
@@ -163,11 +163,11 @@
 <template>
   <el-form :model="elementInfo" ref="elementInfo"   >
     <el-row >
-      <el-col span="16">
+      <el-col :span="16">
         <!-- <span  class="star-red">*</span>&nbsp; -->
         {{$t('dashboard.panel.chartForm.metric')}}
       </el-col>
-      <el-col span="8" style="text-align: right;">
+      <el-col :span="8" style="text-align: right;">
         <div class="nz-tab-item-box"  v-show="tableShow == 1">
         <!-- <div class="nz-btn-group float-left"  v-show="tableShow == 2"> -->
           <div @click="" class="nz-tab-style nz-tab-style-light">
@@ -202,15 +202,15 @@
       </el-col>
     </el-row>
     <el-row  v-if="tableShow == 2">
-      <el-col span="24" class="mt1">
+      <el-col :span="24" class="mt1">
         <el-form-item prop="expression" :rules="{ required: true,  message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
           <el-input size="mini" @input="changeExpression" class="full-width" ref="metricExpression" type="textarea" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
         </el-form-item>
       </el-col>
     </el-row>
     <el-row  v-if="tableShow == 1">
-      <el-col span="24" >
-        <el-form-item :label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
+      <el-col :span="24" >
+        <el-form-item label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
               <!--
               <el-select  ref="metricSelect" class="full-width"  filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric"  @change="selectMetric">
                 <el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
@@ -229,7 +229,7 @@
     </el-row>
     <!--create chart组件显示框  -->
     <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
-      <el-col span="9" style="margin-bottom: 20px;">
+      <el-col :span="9" style="margin-bottom: 20px;">
         <div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
         <div class="li-list-part">
           <el-scrollbar style="height: 100%">
@@ -243,12 +243,12 @@
         </div>
       </el-col>
 
-      <el-col span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
+      <el-col :span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
 
-      <el-col span="14">
+      <el-col :span="14">
         <div class="li-list-part-label-val-list" >
           <el-scrollbar style="height: 100%">
-            <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
+            <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
               <el-select  v-model="item.value" ref="tagSelect" size="mini"
                           placeholder=""
                           collapse-tags
@@ -264,48 +264,6 @@
       </el-col>
 
     </el-row>
-<!-- create chart组件显示框 -->
-    <!-- <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
-      <!-- <el-col span="12">
-        <div class="metric-title-label">{{elementInfo.metric}}</div>
-        <div class="li-list-part">
-          <ul class="no-list-style">
-            <li class="li-cursor" v-if="!item.isSelect"
-                v-for="(item,index) in elementInfo.tagList"
-                @click="getLidata(index,item)"
-                :key="index">
-              <div>
-                <span >{{ item.name }}</span>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </el-col>
-      <el-col span="12">
-        <div class="li-list-part-label-val-list" >
-          <el-form-item class="metric-title-position"   v-for="(item, index) in elementInfo.selectedTagList" :key="index"  :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
-            <el-row >{{item.name}}</el-row>
-            <el-row class="metric-title-row-position" > -->
-              
-            <!--多选列表 -->
-              <!-- <el-col span="20" >
-                <el-select  v-model="item.value" ref="tagSelect" size="small"
-                            placeholder=""
-                            collapse-tags
-                            filterable
-                            @change="changeTag"
-                            multiple>
-                  <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
-                </el-select>
-              </el-col>
-              <el-col span="4" >
-                &nbsp;&nbsp;<button type="button"  @click="deleteMetricLabel(item,index)"  class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square nz-btn-style-higher"><span class="top-tool-btn-txt"><i class="el-icon-close"></i></span></button>
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </div>
-      </el-col> -->
-    <!-- </el-row>  -->
   </el-form>
 </template>
 <script>
@@ -324,7 +282,7 @@ export default {
       type: Array,
       default: () => [],
     },
-    metricCascaderList:[],
+    metricCascaderList:Array,
     countTotal: {
       type: Number,
       default: 1,
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.scss b/nezha-fronted/src/components/page/dashboard/metricPreview.scss
index 49ff228b0..9c791c76a 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.scss
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.scss
@@ -37,7 +37,12 @@
     font-weight: bold;
     padding-left:5px;
   }
-
+  input {
+    background-color: $content-right-background-color;
+  }
+  .el-input__inner {
+    background-color: $content-right-background-color;
+  }
 }
 
 /*
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index 0879e55f6..4ae6db5ce 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -33,10 +33,11 @@
             <div class="table-list" >
               <div class="box-content" >
                 <el-row :gutter="20"  class="row-width" style="height: calc(100% - 65px);">
-                  <el-col :span="12" >
+                  <el-col :span="10" >
                       <metric-set ref="metricSet" @on-view-chart="getChartParam"></metric-set>
                   </el-col>
-                  <el-col :span="12" style="height: calc(100% - 10px);overflow-y: auto;overflow-x: hidden;">
+                  <el-col :span="0.5"><div>&nbsp;</div></el-col>
+                  <el-col :span="13" style="height: calc(100% - 180px);overflow-y: auto;overflow-x: hidden;">
                     <el-row class="border-area" v-show="chartCount === 'single'">
                       <div class="chartBox">
                         <line-chart-block
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.vue b/nezha-fronted/src/components/page/dashboard/metricSet.vue
index 078aeac35..4c76842cc 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.vue
@@ -44,9 +44,9 @@
 
       <el-row class="operate-area">
 
-        <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal">{{$t('dashboard.metric.previewChart')}}</button>
-        <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')"
-                :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-light' : !(saveDisabled || loading)}"
+        <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-large nz-btn-style-normal">{{$t('dashboard.metric.previewChart')}}</button>
+        <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" class="margin-l-10"
+                :class="{'nz-btn nz-btn-disabled nz-btn-size-large nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-large nz-btn-style-light' : !(saveDisabled || loading)}"
         >{{chartSwitchWord}}</button>
         
         <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
@@ -70,11 +70,11 @@
 
       </el-row>
 <!-- options -->
-      <el-row class="mt-10">
-        <el-checkbox-button :disabled="saveDisabled" v-model="isSave" checked >Options</el-checkbox-button>
+      <el-row class="mt-10 margin-b-10">
+        <div>Options</div>
         <!-- <el-checkbox :disabled="saveDisabled" v-model="isSave" checked >options</el-checkbox> -->
       </el-row>
-      <el-form :model="chartInfo" ref="chartInfo" v-show="isSave">
+      <el-form :model="chartInfo" ref="chartInfo">
         <el-row>
           <div class="common-float-left">
             <el-form-item  label-width="80px" :label="$t('dashboard.panel.chartForm.width')" prop="span"
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index b04df81e4..d8929c399 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -1,686 +1,667 @@
-
 <template>
-<div class="panel">
+  <div class="panel">
     <div class="content-left">
-        <div class="sidebar-title">{{$t('dashboard.title')}}</div>
-        <div class="sidebar-info">
-            <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('dashboard.panel.title')}}</div>
-            <div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
-        </div>
+      <div class="sidebar-title">{{$t('dashboard.title')}}</div>
+      <div class="sidebar-info">
+        <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('dashboard.panel.title')}}</div>
+        <div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
+      </div>
     </div>
     <div class="content-right">
-        <div class="top-tools">
-            <button @click="toAddChart" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
-                <span class="top-tool-btn-txt">
-                    <i class="nz-icon-create-square nz-icon"></i>
-                    {{$t('overall.add')}}</span>
+      <div class="top-tools">
+        <div>
+          <el-dropdown @command="panelChange" trigger="click">
+                  <span class="el-dropdown-link">
+                      {{showPanel.name}}<i class="el-icon-arrow-down el-icon--right"></i>
+                  </span>
+            <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
+              <el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
+              <el-dropdown-item v-for="item in panelData" :key="item.id+1"
+                                :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">{{item.name}}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <div>
+        <button @click="toAddChart"
+                class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
+                    <span class="top-tool-btn-txt">
+                        <i class="nz-icon-create-square nz-icon"></i>
+                        {{$t('overall.add')}}</span>
+        </button>
+        <div class="top-tool-search float-right">
+          <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>
+        </div>
+
+        <div class="nz-btn-group nz-btn-group-light float-right margin-r-20">
+          <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
+            <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
+          </button><el-popover
+          v-model="visible" placement="bottom-start" width="200" trigger="click">
+            <ul class="popover_ul">
+              <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
+                  @click="selectInterval(i.value)">
+                {{i.name}}
+              </li>
+            </ul>
+            <button type="button" style="border-radius: 0 4px 4px 0"
+                    class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
+              <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
             </button>
-            <div class="top-tool-search float-right">
-                <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>
-            </div>
-            <!-- <el-select class="panel-select-width" popper-class="" v-model="showPanel.id" placeholder=""  size="small" @change="panelChange">
-          <el-option  >
-            <span class="panel-dropdown-btn-create" @click.stop="toAdd" >{{$t('dashboard.panel.createPanelTitleSec')}}</span>
-          </el-option>
-          <el-option
-            @click.native=""
-            v-for="item in panelData"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-            <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-            <span class="panel-dropdown-btn" @click.stop="toEdit(item)">
-                                        <i class="el-icon-edit-outline" ></i>
-                                    </span>
-            <span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span>
-          </el-option>
-        </el-select> -->
-            <el-dropdown @command="panelChange" trigger="click">
-                <span class="el-dropdown-link">
-                    {{showPanel.name}}<i class="el-icon-arrow-down el-icon--right"></i>
-                </span>
-                <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
-                    <el-dropdown-item >{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
-                    <el-dropdown-item v-for="item in panelData" :key="item.id+1" :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">{{item.name}}</el-dropdown-item>
-                </el-dropdown-menu>
-            </el-dropdown>
-          <div class="nz-btn-group nz-btn-group-light float-right margin-r-20">
-            <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
-              <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
-            </button><el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
-              <ul class="popover_ul">
-                <li v-for="i in intervalList"  :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i.value)">
-                  {{i.name}}
-                </li>
-              </ul>
-              <button type="button" style="border-radius: 0 4px 4px 0" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
-                <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down" ></i>
-              </button>
-            </el-popover>
+          </el-popover>
+        </div>
+        <div class="panel-calendar margin-r-20">
+          <div class="block">
+            <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
+                            format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
+                            :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
+                            :start-placeholder="$t('dashboard.panel.startTime')"
+                            :end-placeholder="$t('dashboard.panel.endTime')" align="right">
+            </el-date-picker>
           </div>
-            <!--<div class="panel-refresh-interval">
-                <div class="block">
-                    &lt;!&ndash; 刷新 &ndash;&gt;
-                    <div class="refresh">
-                        <span style="cursor:pointer;" class="nz-dashboard-refresh">
-                            <i class="nz-icon nz-icon-refresh" @click="Refresh()"></i>
-                        </span>
-                        <el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
-                            <ul class="popover_ul">
-                                <li v-for="i in intervalList"  :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i.value)">
-                                    {{i.name}}
-                                </li>
-                            </ul>
-                            <div style="cursor:pointer" slot="reference">
-                                &lt;!&ndash; {{interval}} &ndash;&gt;
-                                <i class="nz-icon nz-icon-arrow-down" ></i>
-                            </div>
-                        </el-popover>
-                        
-                    </div>
-                </div>
-            </div>-->
-            <div class="panel-calendar margin-r-20">
-                <div class="block">
-                    <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar" format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange" :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')" :start-placeholder="$t('dashboard.panel.startTime')" :end-placeholder="$t('dashboard.panel.endTime')" align="right">
-                    </el-date-picker>
-                </div>
-            </div>
         </div>
-      <div class="table-list" @scroll="onScroll"  id="tableList">
-            <div class="box-content">
-                <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" ref="chartList"></chart-list>
-            </div>
         </div>
+      </div>
+      <div class="table-list" @scroll="onScroll" id="tableList">
+        <div class="box-content">
+          <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
+                      ref="chartList"></chart-list>
+        </div>
+      </div>
     </div>
 
     <panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
     <chart-box ref="addChartModal" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
-</div>
+  </div>
 </template>
 
 <script>
-import ChartBox from "./chartBox";
-import ChartList from '../../charts/chart-list';
-import bus from '../../../libs/bus';
+  import ChartBox from "./chartBox";
+  import ChartList from '../../charts/chart-list';
+  import bus from '../../../libs/bus';
 
-export default {
+  export default {
     name: "panel",
     data() {
-        return {
-            visible: false,
-            rightBox: { //面板弹出框相关
-                show: false,
-                title: this.$t('dashboard.panel.createPanelTitle')
-            },
-            pickerOptions: {
-                shortcuts: [{
-                    text: this.$t("dashboard.panel.recOne"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setHours(start.getHours() - 1);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.recFour"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setHours(start.getHours() - 4);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.recOneDay"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setDate(start.getDate() - 1);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.yesterday"),
-                    onClick(picker) {
-                        const start = new Date();
-                        const end = new Date();
-                        start.setDate(start.getDate() - 1);
-                        start.setHours(0);
-                        start.setMinutes(0);
-                        start.setSeconds(0);
-                        end.setDate(end.getDate() - 1);
-                        end.setHours(23);
-                        end.setMinutes(59);
-                        end.setSeconds(59);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.recSevenDay"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setDate(start.getDate() - 7);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.recOneMonth"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setDate(start.getDate() - 30);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.curMonth"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setDate(1);
-                        start.setHours(0);
-                        start.setMinutes(0);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.lastMonth"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setDate(1);
-                        start.setMonth(start.getMonth() - 1);
-                        end.setDate(0);
-                        start.setStart();
-                        end.setEnd();
-                        picker.$emit('pick', [start, end]);
-                    }
-                }]
-            },
-            searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-            intervalTimer: null,
-            intervalList: [{
-                value: 0,
-                name: this.$t("dashboard.panel.refreshInterval.never"),
-            }, {
-                value: 60,
-                name: this.$t("dashboard.panel.refreshInterval.oneMinute"),
-            }, {
-                value: 180,
-                name: this.$t("dashboard.panel.refreshInterval.threeMinutes"),
-            }, {
-                value: 300,
-                name: this.$t("dashboard.panel.refreshInterval.fiveMinutes"),
-            }, {
-                value: 600,
-                name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
-            }],
-            interval: 0,
-            showPanel: { //panel下拉列表
-                id: '',
-                name: ''
-            },
-            panel: { //新增panel
-                id: '',
-                name: ''
-            },
-            chart: {
-                id: '',
-                title: '',
-                type: 'line',
-                span: 12,
-                height: 400,
-                elements: {
-                    id: '',
-                    expression: '',
-                    type: ''
-                }
-            },
-            pageObj: {
-                pageNo: 1,
-                pageSize: -1, //此处获取所有数据，所以设置一个较大的值
-                total: 0
-            },
-            chartsData: [], //中间部分图表相关数据
-            panelData: [],
-            searchMsg: { //给搜索框子组件传递的信息
-                zheze_none: true,
-                searchLabelList: [
-                    /*
-                                {
-                                id: 1,
-                                name: this.$t("dashboard.panel.searchItem.name"),
-                                type: 'input',
-                                label: 'name',
-                                disabled: false
-                              }*/
-                ],
-            },
-            searchLabel: {}, //搜索参数
-            //---图表相关参数--start
-            dataList: [], // 数据列表
-            //searchName: '', //  搜索名称
-            filter: { // 过滤条件
-                //productId: 0,
-                panelId: 0,
-                start_time: '',
-                end_time: '',
-                searchName: ''
-            },
-            panelId: 0,
-            //removeModal: false, // 删除弹出
-            //deleteObj: {}, // 删除对象
-            //---图表相关参数--end
-        }
+      return {
+        visible: false,
+        rightBox: { //面板弹出框相关
+          show: false,
+          title: this.$t('dashboard.panel.createPanelTitle')
+        },
+        pickerOptions: {
+          shortcuts: [{
+            text: this.$t("dashboard.panel.recOne"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setHours(start.getHours() - 1);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: this.$t("dashboard.panel.recFour"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setHours(start.getHours() - 4);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: this.$t("dashboard.panel.recOneDay"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(start.getDate() - 1);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: this.$t("dashboard.panel.yesterday"),
+            onClick(picker) {
+              const start = new Date();
+              const end = new Date();
+              start.setDate(start.getDate() - 1);
+              start.setHours(0);
+              start.setMinutes(0);
+              start.setSeconds(0);
+              end.setDate(end.getDate() - 1);
+              end.setHours(23);
+              end.setMinutes(59);
+              end.setSeconds(59);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: this.$t("dashboard.panel.recSevenDay"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(start.getDate() - 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: this.$t("dashboard.panel.recOneMonth"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(start.getDate() - 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: this.$t("dashboard.panel.curMonth"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(1);
+              start.setHours(0);
+              start.setMinutes(0);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: this.$t("dashboard.panel.lastMonth"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(1);
+              start.setMonth(start.getMonth() - 1);
+              end.setDate(0);
+              start.setStart();
+              end.setEnd();
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+        intervalTimer: null,
+        intervalList: [{
+          value: 0,
+          name: this.$t("dashboard.panel.refreshInterval.never"),
+        }, {
+          value: 60,
+          name: this.$t("dashboard.panel.refreshInterval.oneMinute"),
+        }, {
+          value: 180,
+          name: this.$t("dashboard.panel.refreshInterval.threeMinutes"),
+        }, {
+          value: 300,
+          name: this.$t("dashboard.panel.refreshInterval.fiveMinutes"),
+        }, {
+          value: 600,
+          name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
+        }],
+        interval: 0,
+        showPanel: { //panel下拉列表
+          id: '',
+          name: ''
+        },
+        panel: { //新增panel
+          id: '',
+          name: ''
+        },
+        chart: {
+          id: '',
+          title: '',
+          type: 'line',
+          span: 12,
+          height: 400,
+          elements: {
+            id: '',
+            expression: '',
+            type: ''
+          }
+        },
+        pageObj: {
+          pageNo: 1,
+          pageSize: -1, //此处获取所有数据，所以设置一个较大的值
+          total: 0
+        },
+        chartsData: [], //中间部分图表相关数据
+        panelData: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [
+            /*
+                        {
+                        id: 1,
+                        name: this.$t("dashboard.panel.searchItem.name"),
+                        type: 'input',
+                        label: 'name',
+                        disabled: false
+                      }*/
+          ],
+        },
+        searchLabel: {}, //搜索参数
+        //---图表相关参数--start
+        dataList: [], // 数据列表
+        //searchName: '', //  搜索名称
+        filter: { // 过滤条件
+          //productId: 0,
+          panelId: 0,
+          start_time: '',
+          end_time: '',
+          searchName: ''
+        },
+        panelId: 0,
+        //removeModal: false, // 删除弹出
+        //deleteObj: {}, // 删除对象
+        //---图表相关参数--end
+      }
     },
     components: {
-        'chart-box': ChartBox,
-        'chart-list': ChartList
+      'chart-box': ChartBox,
+      'chart-list': ChartList
     },
     methods: {
       //刷新
-      Refresh(){
+      Refresh() {
         this.getTableData();
       },
-        //面板相关操作
-        panelChange(val) {
-            if(!val){
-                this.toAdd();
-                return false;
-            }
-            //this.$refs.searchInput.select();
-            this.showPanel = val
-            this.filter.panelId = this.showPanel.id;
-            this.$refs.chartList.initCurrentRecordNum();
-            this.$refs.chartList.cleanData();
-            this.getData(this.filter);
-            
-        },
-        del: function (u) {
-            this.$confirm(this.$t("tip.confirmDelete"), {
-                confirmButtonText: this.$t("tip.yes"),
-                cancelButtonText: this.$t("tip.no"),
-                type: 'warning'
-            }).then(() => {
-                this.$delete("panel?ids=" + u.id).then(response => {
-                    if (response.code === 200) {
-                        this.$message({
-                            duration: 1000,
-                            type: 'success',
-                            message: this.$t("tip.deleteSuccess")
-                        });
-                        if (this.showPanel.id === u.id) {
-                            this.showPanel.id = '';
-                        }
-                        this.getTableData();
-                        this.rightBox.show = false;
-                    } else {
-                        this.$message.error(response.msg);
-                    }
-                })
-            });
-        },
-        toEdit: function (u) {
-            this.panel = Object.assign({}, u);
-            this.$refs.panelBox.setTitle(this.$t("dashboard.panel.editPanelTitle"));
-            this.$refs.panelBox.show(true);
-        },
-        toAdd: function () {
-            this.$refs.panelBox.show(true);
-            this.panel = {
-                id: '',
-                name: ''
-            };
-            this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
-        },
-        panelReload() {
-            this.getTableData();
-        },
-        refreshTime(st, et) {
-            const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm');
-            const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm');
-            this.searchTime = [startTime, endTime];
-        },
-        panelReloadForDel: function () {
-            if (this.showPanel.id === this.panel.id) {
-                this.showPanel.id = '';
-            }
-            this.getTableData();
-        },
-        /*图表相关操作--start*/
-        toAddChart: function () {
-            this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
-            this.$refs.addChartModal.show(true);
-            this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
-        },
-
-        // 编辑图表信息,打开编辑弹窗
-        editData(data) {
-            this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
-            this.$refs.addChartModal.show(true);
-            this.$refs.addChartModal.editData(data, this.showPanel.id);
-        },
-        // 移除图表:弹出确认框询问
-        removeData(data) {
-            this.$confirm(this.$t("tip.confirmDelete"), {
-                confirmButtonText: this.$t("tip.yes"),
-                cancelButtonText: this.$t("tip.no"),
-                type: 'warning'
-            }).then(() => {
-                this.$delete("panel/" + data.panelId + "/charts?ids=" + data.id).then(response => {
-                    if (response.code === 200) {
-                        this.$message({
-                            duration: 1000,
-                            type: 'success',
-                            message: this.$t("tip.deleteSuccess")
-                        });
-                        this.getTableData(); //删除相关图表后，刷新面板数据
-                    } else {
-                        this.$message.error(response.msg);
-                    }
-                })
-            });
-        },
-        delChartOk() {
-            this.filter.panelId = this.showPanel.id;
-            this.getData(this.filter);
-        },
-        // 图表创建成功，回调panel页面，进行图表的刷新
-        createSuccess(msg, data, params) {
-            /*
-       if (data && data.code === 200) {
-
-         if (msg === 'create') {
-           //this.$message.success('添加成功');
-         } else {
-           //this.$message.success('编辑成功');
-         }
+      //面板相关操作
+      panelChange(val) {
+        if (!val) {
+          this.toAdd();
+          return false;
         }
-         */
-            this.filter.panelId = this.showPanel.id;
-            this.getData(this.filter);
-        },
-        // 获取数据,用在子页面
-        getData(params) {
-            if (params.start_time === '' || params.end_time === '') {
-                let now = new Date();
-                let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
-                let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss');
-                params.start_time = startTimeTmp;
-                params.end_time = endTimeTmp;
-            }
-            this.$refs.chartList.initData(params);
-        },
+        //this.$refs.searchInput.select();
+        this.showPanel = val
+        this.filter.panelId = this.showPanel.id;
+        this.$refs.chartList.initCurrentRecordNum();
+        this.$refs.chartList.cleanData();
+        this.getData(this.filter);
 
-        /*图表相关操作--end*/
-        /*时间条件查询--start*/
-        // 选择日期变化
-        dateChange() {
-            //this.$refs.searchInput.select();
-            this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-            this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-            this.filter.panelId = this.showPanel.id;
-            this.getData(this.filter);
-        },
-        /*时间条件查询--end*/
-        //公用操作
-        jumpTo(data, id) {
-            //this.$store.state.assetData.moduleData = data
-            //this.$store.state.assetData.selectedData = id
-            this.$router.push({
-                path: "/" + data,
-                query: {
-                    t: +new Date()
-                }
-            });
-        },
-        getTableData: function () {
-            this.$get('panel?pageNo=1&pageSize=-1').then(response => {
-                if (response.code === 200) {
-                    this.panelData = response.data.list;
-                    if (response.data.list.length > 0) {
-                        if (this.$store.state.showPanel.id !== 0 && this.$store.state.showPanel.name !== '') {
-                            this.showPanel.name = this.$store.state.showPanel.name;
-                            this.showPanel.id = this.$store.state.showPanel.id;
-                        }
-                        
-                        if (this.showPanel.id === '') {
-                            this.showPanel.id = response.data.list[0].id;
-                            this.showPanel.name = response.data.list[0].name;
-                            this.filter.panelId = this.showPanel.id;
-                            this.getData(this.filter);
-                        }
-                        this.filter.panelId = this.showPanel.id;
-                    } else {
-                        this.showPanel.id = '';
-                        this.filter.panelId = '';
-                    }
-                    this.pageObj.total = response.data.total;
-                    if (this.panel.id === '' || this.panel.id === this.showPanel.id) {
-                        this.getData(this.filter);
-                    }
-                    this.$store.state.showPanel.id = 0;
-                    this.$store.state.showPanel.name = '';
-                }
+      },
+      del: function (u) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("panel?ids=" + u.id).then(response => {
+            if (response.code === 200) {
+              this.$message({
+                duration: 1000,
+                type: 'success',
+                message: this.$t("tip.deleteSuccess")
+              });
+              if (this.showPanel.id === u.id) {
+                this.showPanel.id = '';
+              }
+              this.getTableData();
+              this.rightBox.show = false;
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      toEdit: function (u) {
+        this.panel = Object.assign({}, u);
+        this.$refs.panelBox.setTitle(this.$t("dashboard.panel.editPanelTitle"));
+        this.$refs.panelBox.show(true);
+      },
+      toAdd: function () {
+        this.$refs.panelBox.show(true);
+        this.panel = {
+          id: '',
+          name: ''
+        };
+        this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
+      },
+      panelReload() {
+        this.getTableData();
+      },
+      refreshTime(st, et) {
+        const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm');
+        const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm');
+        this.searchTime = [startTime, endTime];
+      },
+      panelReloadForDel: function () {
+        if (this.showPanel.id === this.panel.id) {
+          this.showPanel.id = '';
+        }
+        this.getTableData();
+      },
+      /*图表相关操作--start*/
+      toAddChart: function () {
+        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
+        this.$refs.addChartModal.show(true);
+        this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
+      },
 
-            })
-        },
-        //定期刷新
-        selectInterval(val) {
-          
-          this.visible=false;
-            clearInterval(this.intervalTimer);
-            if (val) {
-                this.interval = val;
-                const start = new Date(this.searchTime[1]);
-                const now = new Date();
-                const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
-                if (interval >= 60) { //如果结束时间到现在超过1分钟，则
-                    this.getIntervalData(interval);
-                }
-                this.intervalTimer = setInterval(() => {
-                    this.getIntervalData(this.interval);
-                }, val * 1000);
+      // 编辑图表信息,打开编辑弹窗
+      editData(data) {
+        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
+        this.$refs.addChartModal.show(true);
+        this.$refs.addChartModal.editData(data, this.showPanel.id);
+      },
+      // 移除图表:弹出确认框询问
+      removeData(data) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("panel/" + data.panelId + "/charts?ids=" + data.id).then(response => {
+            if (response.code === 200) {
+              this.$message({
+                duration: 1000,
+                type: 'success',
+                message: this.$t("tip.deleteSuccess")
+              });
+              this.getTableData(); //删除相关图表后，刷新面板数据
+            } else {
+              this.$message.error(response.msg);
             }
-        },
-        getIntervalData(interval) { //interval:结束时间到现在的秒数
-            const start = new Date(this.searchTime[0]);
-            const end = new Date(this.searchTime[1]);
-            start.setSeconds(start.getSeconds() + interval);
-            end.setSeconds(end.getSeconds() + interval);
-            const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm');
-            const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm');
-            this.searchTime = [startTime, endTime];
-            //刷新数据
-            this.dateChange();
-        },
-        pageNo(val) {
-            this.pageObj.pageNo = val;
-            this.getTableData();
-        },
-        pageSize(val) {
-            this.pageObj.pageSize = val;
-            this.getTableData();
-        },
-        search: function (searchObj) {
-            this.searchLabel = {};
-            let containTitle = false;
-            for (let item in searchObj) {
-                if (searchObj[item]) {
-                    this.$set(this.searchLabel, item, searchObj[item]);
-                    if (item === 'name') {
-                        this.filter.searchName = searchObj[item]; //此处就一个条件
-                        containTitle = true;
-                    }
-                }
-            }
-            if (!containTitle) {
-                this.filter.searchName = '';
-            }
-            this.filter.panelId = this.showPanel.id;
-            this.getData(this.filter);
-        },
-        // 滚动事件触发下拉加载
-        onScroll () {
-          let dom = document.getElementById('tableList');
-          let scrollHeight = dom.scrollHeight;//整个可滑动区域高度
-          let clientHeight = dom.clientHeight;//可视高度
-          let scrollTop = dom.scrollTop;//滚动条顶部与整个scrollHeight顶部的距离
-          if (scrollHeight - clientHeight - scrollTop <= 20) {//滚动到底部，才加载新数据
-            this.$refs.chartList.pageDataList(true,this.showPanel.id);
+          })
+        });
+      },
+      delChartOk() {
+        this.filter.panelId = this.showPanel.id;
+        this.getData(this.filter);
+      },
+      // 图表创建成功，回调panel页面，进行图表的刷新
+      createSuccess(msg, data, params) {
+        /*
+   if (data && data.code === 200) {
+
+     if (msg === 'create') {
+       //this.$message.success('添加成功');
+     } else {
+       //this.$message.success('编辑成功');
+     }
+    }
+     */
+        this.filter.panelId = this.showPanel.id;
+        this.getData(this.filter);
+      },
+      // 获取数据,用在子页面
+      getData(params) {
+        if (params.start_time === '' || params.end_time === '') {
+          let now = new Date();
+          let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+          let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss');
+          params.start_time = startTimeTmp;
+          params.end_time = endTimeTmp;
+        }
+        this.$refs.chartList.initData(params);
+      },
+
+      /*图表相关操作--end*/
+      /*时间条件查询--start*/
+      // 选择日期变化
+      dateChange() {
+        //this.$refs.searchInput.select();
+        this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+        this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+        this.filter.panelId = this.showPanel.id;
+        this.getData(this.filter);
+      },
+      /*时间条件查询--end*/
+      //公用操作
+      jumpTo(data, id) {
+        //this.$store.state.assetData.moduleData = data
+        //this.$store.state.assetData.selectedData = id
+        this.$router.push({
+          path: "/" + data,
+          query: {
+            t: +new Date()
           }
-        },
+        });
+      },
+      getTableData: function () {
+        this.$get('panel?pageNo=1&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.panelData = response.data.list;
+            if (response.data.list.length > 0) {
+              if (this.$store.state.showPanel.id !== 0 && this.$store.state.showPanel.name !== '') {
+                this.showPanel.name = this.$store.state.showPanel.name;
+                this.showPanel.id = this.$store.state.showPanel.id;
+              }
+
+              if (this.showPanel.id === '') {
+                this.showPanel.id = response.data.list[0].id;
+                this.showPanel.name = response.data.list[0].name;
+                this.filter.panelId = this.showPanel.id;
+                this.getData(this.filter);
+              }
+              this.filter.panelId = this.showPanel.id;
+            } else {
+              this.showPanel.id = '';
+              this.filter.panelId = '';
+            }
+            this.pageObj.total = response.data.total;
+            if (this.panel.id === '' || this.panel.id === this.showPanel.id) {
+              this.getData(this.filter);
+            }
+            this.$store.state.showPanel.id = 0;
+            this.$store.state.showPanel.name = '';
+          }
+
+        })
+      },
+      //定期刷新
+      selectInterval(val) {
+
+        this.visible = false;
+        clearInterval(this.intervalTimer);
+        if (val) {
+          this.interval = val;
+          const start = new Date(this.searchTime[1]);
+          const now = new Date();
+          const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
+          if (interval >= 60) { //如果结束时间到现在超过1分钟，则
+            this.getIntervalData(interval);
+          }
+          this.intervalTimer = setInterval(() => {
+            this.getIntervalData(this.interval);
+          }, val * 1000);
+        }
+      },
+      getIntervalData(interval) { //interval:结束时间到现在的秒数
+        const start = new Date(this.searchTime[0]);
+        const end = new Date(this.searchTime[1]);
+        start.setSeconds(start.getSeconds() + interval);
+        end.setSeconds(end.getSeconds() + interval);
+        const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm');
+        const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm');
+        this.searchTime = [startTime, endTime];
+        //刷新数据
+        this.dateChange();
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        this.getTableData();
+      },
+      search: function (searchObj) {
+        this.searchLabel = {};
+        let containTitle = false;
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+            if (item === 'name') {
+              this.filter.searchName = searchObj[item]; //此处就一个条件
+              containTitle = true;
+            }
+          }
+        }
+        if (!containTitle) {
+          this.filter.searchName = '';
+        }
+        this.filter.panelId = this.showPanel.id;
+        this.getData(this.filter);
+      },
+      // 滚动事件触发下拉加载
+      onScroll() {
+        let dom = document.getElementById('tableList');
+        let scrollHeight = dom.scrollHeight;//整个可滑动区域高度
+        let clientHeight = dom.clientHeight;//可视高度
+        let scrollTop = dom.scrollTop;//滚动条顶部与整个scrollHeight顶部的距离
+        if (scrollHeight - clientHeight - scrollTop <= 20) {//滚动到底部，才加载新数据
+          this.$refs.chartList.pageDataList(true, this.showPanel.id);
+        }
+      },
     },
     created() {
-        this.getTableData();
+      this.getTableData();
+    },
+    mounted: function () {
     },
-    mounted: function () {},
     computed: {
-        refreshPanel() {
-            return this.$store.state.panelListReload;
-        }
+      refreshPanel() {
+        return this.$store.state.panelListReload;
+      }
     },
     watch: {
-        refreshPanel(n, o) {
-            if (n) {
-                this.getTableData();
-                this.$store.commit('panelListChange', false);
-            }
+      refreshPanel(n, o) {
+        if (n) {
+          this.getTableData();
+          this.$store.commit('panelListChange', false);
         }
+      }
     }
-}
+  }
 </script>
 <style scoped lang="scss">
-.panel {
+  .panel {
     height: 100%;
-    background: #FCFCFC;
-}
+  }
 
-.panel .el-table {
+  .panel .el-table {
     border-radius: 5px;
-}
+  }
 
-.content-right-option {
+  .content-right-option {
     cursor: pointer;
     display: inline-block;
     margin-right: 6px;
-}
+  }
 
-.content-right-option .el-icon-delete {
+  .content-right-option .el-icon-delete {
     color: #F98D9A;
-}
+  }
 
-.content-right-option .el-icon-delete:hover {
+  .content-right-option .el-icon-delete:hover {
     color: #D96D7A;
-}
+  }
 
-.content-right-option .el-icon-view {
+  .content-right-option .el-icon-view {
     color: #60BEFF;
-}
+  }
 
-.content-right-option .el-icon-view:hover {
+  .content-right-option .el-icon-view:hover {
     color: #409EFF;
-}
+  }
 
-/* begin-chart list*/
-.table-list {
+  /* begin-chart list*/
+  .table-list {
     margin-top: 10px;
     overflow-y: auto;
-    height: 100%;
-}
+    height: calc(100% - 150px);
+  }
 
-.box-content {
+  .box-content {
     position: relative;
-}
+  }
 
-/* end-chart list*/
-/* begin--Panel-自定义可编辑的el-select下拉框样式*/
-.panel-dropdown-btn {
+  /* end-chart list*/
+  /* begin--Panel-自定义可编辑的el-select下拉框样式*/
+  .panel-dropdown-btn {
     display: inline-block;
     margin-left: 7px;
     float: right;
     color: #60BEFF;
     font-size: 13px
-}
+  }
 
-.panel-dropdown-btn:hover {
+  .panel-dropdown-btn:hover {
     color: #409EFF;
-}
+  }
 
-.panel-dropdown-btn-create {
+  .panel-dropdown-btn-create {
     display: inline-block;
     float: left;
     font-size: 13px;
     color: #F98D9A;
     width: 100%;
-}
+  }
 
-.panel-dropdown-btn-create:hover {
+  .panel-dropdown-btn-create:hover {
     color: #D96D7A;
-}
+  }
 
-.panel-dropdown-btn-delete {
+  .panel-dropdown-btn-delete {
     color: #F98D9A;
     font-size: 13px
-}
+  }
 
-.panel-dropdown-btn-delete:hover {
+  .panel-dropdown-btn-delete:hover {
     color: #D96D7A;
-}
+  }
 
-.panel-dropdown-error-message {
+  .panel-dropdown-error-message {
     color: #F98D9A;
-}
+  }
 
-/* end--Panel-自定义可编辑的el-select下拉框样式*/
-.panel-select-width {
+  /* end--Panel-自定义可编辑的el-select下拉框样式*/
+  .panel-select-width {
     width: 150px;
-}
+  }
 
-.panel-refresh-interval {
+  .panel-refresh-interval {
     margin-right: 5px;
     float: right;
-}
+  }
 
-.panel-refresh-interval-select {
+  .panel-refresh-interval-select {
     width: 95px;
-}
+  }
 
-.panel-calendar {
+  .panel-calendar {
     float: right;
     margin-right: 1px;
-}
+  }
 
-.top-tools .top-tool-btn-txt .nz-icon {
+  .top-tools .top-tool-btn-txt .nz-icon {
     display: inline-block;
     font-size: 12px;
     margin-right: 6px;
-}
+  }
 
-.top-tools{
-  button{
-    background:  $btn-light-background-color;
-    outline: none;
-    border: 1px solid #ccc;
-  }
-  button:hover{
+  .top-tools {
+    button {
+      background: $btn-light-background-color;
+      outline: none;
+      border: 1px solid #ccc;
+    }
+
+    button:hover {
       background: $btn-light-background-color-hover;
+    }
   }
-}
-.nz-dashboard-dropdown {
+
+  .nz-dashboard-dropdown {
     height: 300px;
     overflow-y: auto;
-    li{
-        padding: 0 20px !important;
+
+    li {
+      padding: 0 20px !important;
 
     }
-}
+  }
 
-.nz-dashboard-dropdown-bg {
-    background: #409EFF;
+  .nz-dashboard-dropdown-bg {
+    background: $global-text-color-active;
     color: #fff;
-}
+  }
 
-.el-dropdown-link {
+  .el-dropdown-link {
     cursor: pointer;
-}
-.refresh {
+  }
+
+  .refresh {
     display: flex;
     background: #fff;
     border-radius: 4px;
@@ -689,40 +670,57 @@ export default {
     margin: 0 10px;
     border: 1px solid #ccc;
     background: $btn-light-background-color;
-    span{
+
+    span {
       display: inline-block;
       padding: 1px 8px;
     }
-}
-.popover_ul li{
+  }
+
+  .popover_ul li {
     padding: 10px 3px;
     cursor: pointer;
-}
-.popover_ul li:hover{
-        background: #f5f7fa;
-}
-.nz-dashboard-refresh{
-  border-right:1px solid #ccc;
-  color: #F0BF84;
-}
-.nz-dashboard-picker {}
+  }
+
+  .popover_ul li:hover {
+    background: $dropdown-hover-background-color !important;
+    color: $global-text-color-active !important;
+  }
+
+  .nz-dashboard-refresh {
+    border-right: 1px solid #ccc;
+    color: #F0BF84;
+  }
+
+  .nz-dashboard-picker {
+  }
 
 
 </style>
 <style lang="scss">
-  .panel-calendar .el-range-editor--mini.el-input__inner{
+  .panel .panel-calendar input {
+    background-color: $content-right-background-color;
+  }
+  .panel .panel-calendar  .el-input__inner {
+    background-color: $content-right-background-color;
+  }
+  .panel-calendar .el-range-editor--mini.el-input__inner {
     height: 25px !important;
     border-color: #d8d8d8;
   }
+
   .panel-calendar .el-range-editor--mini .el-range__close-icon {
     line-height: 18px;
   }
+
   .panel-calendar .el-range-editor--mini .el-range__icon {
     display: none;
   }
+
   .panel-calendar .el-range-editor--mini .el-range-separator {
     line-height: 17px;
   }
+
   .panel-calendar .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
     width: 310px;
     padding-right: 0;
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 8221e7a0c..d780af684 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -24,7 +24,7 @@
     <!--metrics-->
     <div class="content-right" v-show="tableShow == 2">
       <div class="top-tools">
-        <div class="nz-tab float-left">
+        <div class="nz-tab">
           <div @click="tableShow = 1" class="nz-tab-item-box">
             <div class="nz-tab-item">{{$t('project.endpoint.endpoint')}}</div>
           </div>
@@ -32,13 +32,13 @@
             <div class="nz-tab-item nz-tab-item-active">{{$t('project.metrics.metrics')}}</div>
           </div>
         </div>
-        <div class="top-tool-search float-right"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
+        <div class="top-tool-search"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
       </div>
       <el-table
         :data="metricsTableData"
         class="nz-table"
         border
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;">
         <el-table-column
           :resizable="false"
@@ -60,7 +60,7 @@
     <!--endpoint-->
     <div class="content-right" v-show="tableShow == 1">
       <div class="top-tools">
-        <div class="nz-tab float-left">
+        <div class="nz-tab">
           <div class="nz-tab-item-box">
             <div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div>
           </div>
@@ -68,18 +68,20 @@
             <div class="nz-tab-item">{{$t('project.metrics.metrics')}}</div>
           </div>
         </div>
-        <button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="project-add-ep">
-          <span class='top-tool-btn-txt'>
-            <i class="nz-icon-create-square nz-icon"></i>
-            {{$t('overall.add')}}</span>
-        </button>
-        <div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
+        <div>
+          <button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="project-add-ep">
+            <span class='top-tool-btn-txt'>
+              <i class="nz-icon-create-square nz-icon"></i>
+              {{$t('overall.add')}}</span>
+          </button>
+          <div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
+        </div>
       </div>
       <el-table
         :data="endpointTableData"
         border
         class="nz-table"
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;">
         <el-table-column
           :resizable="false"