NEZ-1778 NEZ-1779 feat: 系统备份页面开发

2022-04-08 14:14:10 +08:00
parent d287509948 f32fb779da
commit 576a267137
34 changed files with 920 additions and 62 deletions
--- a/nezha-fronted/config/index.js
+++ b/nezha-fronted/config/index.js
@@ -15,18 +15,18 @@ module.exports = {
        changeOrigin: true,
        pathRewrite: {
          '^/apis': '/' // 这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
-        },
+        }
      }
    },
    // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
    port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

-
    /**
     * Source Maps
     */
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -377,6 +377,12 @@
      "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
      "dev": true
    },
+    "@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
    "abbrev": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -815,8 +821,7 @@
    "atob": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
    },
    "autoprefixer": {
      "version": "7.2.6",
@@ -1771,6 +1776,11 @@
        }
      }
    },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
    "base64-js": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
@@ -2050,6 +2060,11 @@
        "electron-to-chromium": "^1.3.30"
      }
    },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
    "buffer": {
      "version": "4.9.2",
      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -2299,6 +2314,36 @@
      "integrity": "sha512-7RR4Uh04t9K1uYRWzOJmzplgEOAXbfK72oVNokCdMzA67trrhPzy93ahKk1AWHiA0c58tD2P+NHqxrA8FZ+Trg==",
      "dev": true
    },
+    "canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.21.1",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz",
+          "integrity": "sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==",
+          "optional": true
+        },
+        "regenerator-runtime": {
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+          "optional": true
+        }
+      }
+    },
    "caseless": {
      "version": "0.12.0",
      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -3175,6 +3220,14 @@
        }
      }
    },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
    "css-loader": {
      "version": "0.28.11",
      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz",
@@ -4635,6 +4688,12 @@
        "domelementtype": "1"
      }
    },
+    "dompurify": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.6.tgz",
+      "integrity": "sha512-OFP2u/3T1R5CEgWCEONuJ1a5+MFKnOYpkywpUSxv/dj1LeBT1erK+JwM7zK0ROy2BRhqVCf0LRw/kHqKuMkVGg==",
+      "optional": true
+    },
    "domutils": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
@@ -5948,6 +6007,11 @@
        "websocket-driver": ">=0.5.1"
      }
    },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
    "figures": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -6915,6 +6979,15 @@
        }
      }
    },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
    "htmlparser2": {
      "version": "3.10.1",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -7682,6 +7755,42 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.17.9",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
+          "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "core-js": {
+          "version": "3.21.1",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz",
+          "integrity": "sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==",
+          "optional": true
+        },
+        "regenerator-runtime": {
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+        }
+      }
+    },
    "jsprim": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -11965,6 +12074,15 @@
        "fast-diff": "1.1.2"
      }
    },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
    "randomatic": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
@@ -12418,6 +12536,12 @@
      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
      "dev": true
    },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0=",
+      "optional": true
+    },
    "right-align": {
      "version": "0.1.3",
      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
@@ -13438,6 +13562,12 @@
      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
      "dev": true
    },
+    "stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true
+    },
    "stackframe": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.1.0.tgz",
@@ -13709,6 +13839,12 @@
        "has-flag": "^3.0.0"
      }
    },
+    "svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
+    },
    "svgo": {
      "version": "0.7.2",
      "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",
@@ -13851,6 +13987,14 @@
        }
      }
    },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
    "text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -14473,6 +14617,14 @@
      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
      "dev": true
    },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
    "uuid": {
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -30,6 +30,8 @@
    "echarts": "^5.2.2",
    "element-ui": "^2.15.3",
    "file-saver": "^2.0.2",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1",
    "leaflet": "^1.7.1",
    "moment-timezone": "^0.5.33",
    "mqtt": "4.2.6",
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -367,6 +367,12 @@ td .nz-icon-gear:before{
    }
  }
 }
+.el-dropdown-menu-link .el-dropdown-menu__item{
+  padding: 0;
+  .link-title {
+    padding: 0 20px;
+  }
+}
 .chart-bar,.chart-gauge,.chart-time-series,.chart-treemap,.chart-pie,.chart-canvas-tooltip,.line-chart-block-Zindex,.alert-label,.alert-labelUp,.alert-days-info-tooltip,.nz-tooltip-bac{
  background-color: $--tooltip-background-color !important;
  border: 2px solid $--tooltip-border-color !important;
--- a/nezha-fronted/src/assets/css/common/checkbox.scss
+++ b/nezha-fronted/src/assets/css/common/checkbox.scss
@@ -10,7 +10,7 @@
 .el-checkbox__inner {
  width: 16px !important;
  height: 16px !important;
-  background-color: $--checkbox-background-color !important;
+  // background-color: $--checkbox-background-color !important;
 }
 .el-checkbox__inner::after {
  top: 2px;
--- a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
@@ -2,14 +2,42 @@
  position: fixed;
  background-color: $--background-color-empty;
  z-index: 3000;
-  padding: 10px;
  border-radius: 4px;
  box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color;
-
+  .alert-label-header-title {
+    padding: 10px 15px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    font-size: 16px;
+    color: $--color-text-primary;
+    letter-spacing: 0;
+    width: 100%;
+    border-bottom: 1px solid $--border-color-light;
+    //line-height: 23px;
+    font-weight: 600;
+    .alert-label-header-circle {
+      height: 24px;
+      width: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 12px;
+      background: #23bf9a;
+      margin-right: 8px;
+    }
+    .nz-icon {
+      font-weight: 400;
+      font-size: 14px;
+      color: $--background-color-empty;
+    }
+  }
  .alert-label-info{
    border-bottom: none;
    font-size: 13px;
    line-height: 26px;
+    padding: 0 10px 10px 5px;
    .active {
      color: $--color-primary;
      border-bottom: none;
--- a/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
@@ -64,6 +64,7 @@
  border-bottom: none;
  font-size: 13px;
  line-height: 26px;
+  padding: 0 10px 10px 5px;
 }
 .alert-rule-box{
  display: flex;
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -101,6 +101,7 @@
@import './page/dashboard/chartBox.scss';
@import './page/dashboard/panel.scss';
@import './page/monitor/project/project.scss';
+@import './page/tool/ping.scss';

@import './common/v-selectpagenew/selectpage.scss';
@import './common/paramBpx/paramBox.scss';
--- a/nezha-fronted/src/assets/css/components/layout/header.scss
+++ b/nezha-fronted/src/assets/css/components/layout/header.scss
@@ -115,10 +115,13 @@
  .left-menu--pin-reverse{
  }
 }
-.link-title a {
-  color: inherit;
+a.link-title {
+  color: $--color-text-regular !important;
  text-decoration: none;
 }
+a.link-title:hover{
+  color: $--color-primary !important;
+}
 .nz-breakcrumb {
  padding-left: 15px;
  line-height: 50px;
--- a/nezha-fronted/src/assets/css/components/page/tool/ping.scss
+++ b/nezha-fronted/src/assets/css/components/page/tool/ping.scss
@@ -0,0 +1,125 @@
+.ping{
+  .choose{
+    width: 50px !important;
+    height: 36px !important;
+    line-height: 36px !important;
+    padding: 0 !important;
+    border-radius: 2px 0px 0px 2px !important;
+    border-right: none !important;
+    span{
+      display: flex;
+      align-content: center;
+      justify-content: center;
+    }
+    i{
+      font-size: 20px !important;
+    }
+  }
+  .btn{
+    width: 50px !important;
+    height: 36px !important;
+    line-height: 36px !important;
+    padding: 0 !important;
+    border-radius: 0px 2px 2px 0px !important;
+    span{
+      display: flex;
+      align-content: center;
+      justify-content: center;
+    }
+    i{
+      font-size: 22px !important;
+      color: $--color-primary !important;
+    }
+    i.quadrate{
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: $--color-primary;
+    }
+  }
+
+  .nz-table2{
+    height: calc(100% - 64px) !important;
+    .empty{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .el-steps{
+        width: 620px;
+      }
+      .el-step__icon{
+        width: 64px;
+        height: 64px;
+        border: 1px solid $--border-color-light;
+        background-color: $--background-color-empty;
+      }
+      .el-step__line{
+        top: 32px;
+        height: 1px;
+      }
+      span{
+        color: #BEBEBE;
+      }
+      .nz-icon-edit{
+        font-size: 26px;
+      } 
+      .el-icon-more{
+        font-size: 22px;
+      }
+      .msg{
+        font-size: 18px;
+      }
+      .txt{
+        color: $--color-text-regular;
+      }
+    }
+    .data-wrap{
+      height: 100%;
+      .data-top{
+        width: 100%;
+        padding-left: 15px;
+        box-sizing: border-box;
+        height: 36px;
+        line-height: 36px;
+        border: 1px solid $--border-color-light;
+        margin-bottom: 14px;
+        span{
+          color: $--color-text-primary;
+          margin-right: 30px;
+          font-size: 14px;
+          font-weight: 500;
+          font-weight: bold;
+        }
+      }
+      .data-bottom{
+        height: calc(100% - 50px) !important;
+        .details{
+          padding: 20px;
+        }
+      }
+    }
+  }
+}
+
+.wrap{
+  .el-input,.el-input__inner{
+    height: 100%;
+  }
+  .el-input-group__append{
+    color: $--color-text-primary;
+  }
+}
+.pop-tit{
+  font-size: 14px;
+  color: $--color-text-primary;
+  line-height: 40px;
+}
+.pop-list-wrap{
+  border: 1px solid $--button-light-border-color !important;
+}
+.pop-list{
+  max-height: 144px;
+  overflow-y: auto;
+}
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -168,6 +168,7 @@ export default {
          obj[column.title + 'mapping'] = ''
          if (this.chartInfo.param.enable && this.chartInfo.param.enable.valueMapping) {
            valueMapping[column.title].forEach(item => {
+              // const rowValue = row.display[column.title + 'display']
              const rowValue = row.display[column.title + 'display']
              if (item.type === 'value') {
                if (rowValue == item.value) {
@@ -208,7 +209,7 @@ export default {
                value = chartDataFormat.getUnit(column.unit ? column.unit : 2).compute(value, null, -1, 2)
              }
            }
-            return value || label
+            return value || ''
          })
          obj[column.title + 'display'] = labelValue
        } else {
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -71,6 +71,9 @@ export default {
  },
  methods: {
    initChart (chartOptions = this.chartOption) {
+      try {
+        this.isStack = this.chartInfo.param.stack
+      } catch (e) {}
      const chartOption = lodash.cloneDeep(chartOptions)
      if (this.chartInfo.isAlertMessage) {
        chartOption.title = {
--- a/nezha-fronted/src/components/chart/chart/chartTopology.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTopology.vue
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -3,6 +3,7 @@
    <grid-layout
      ref="layout"
      v-if="gridLayoutShow"
+      class="pdfDom"
      :class="firstInit ? 'no-animation' : ''"
      :col-num="12"
      :is-draggable="!panelLock"
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -297,3 +297,4 @@ export default {
    setChart(this.chartId, null)
  }
 }
+ 
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -1,14 +1,18 @@
 <template>
  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels">
+    <div class="alert-label-header-title">
+      <div class="alert-label-header-circle" :style="`background: ${alertColor}`">
+        <i  class="nz-icon" :class="selectIcon(type)"></i>
+      </div>
+      <div class="alert-label-header-name">
+        {{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}
+      </div>
+    </div>
    <div class="alert-label-info" v-if="type==='asset'" v-my-loading="loading">
      <div class="alert-label-box">
        <div class="alert-label-title">ID</div>
        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.name')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
-      </div>
      <div class="alert-label-box">
        <div class="alert-label-title">{{$t('overall.manageIp')}}</div>
        <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
@@ -74,10 +78,6 @@
        <div class="alert-label-title">ID</div>
        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.name')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
-      </div>
      <div class="alert-label-box">
        <div class="alert-label-title">{{$t('overall.project')}}</div>
        <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
@@ -123,10 +123,6 @@
        <div class="alert-label-title">ID</div>
        <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.name')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div>
-      </div>
      <div class="alert-label-box">
        <div class="alert-label-title">{{$t('overall.module')}}</div>
        <div class="alert-label-value">
@@ -175,10 +171,6 @@
        <div class="alert-label-title">ID</div>
        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.name')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
-      </div>
      <div class="alert-label-box">
        <div class="alert-label-title">{{$t('overall.project')}}</div>
        <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
@@ -250,10 +242,6 @@
        <div class="alert-label-title">ID</div>
        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.name')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
-      </div>
      <div class="alert-label-box">
        <div class="alert-label-title">{{$t('overall.location')}}</div>
        <div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
@@ -303,6 +291,7 @@

 <script>
 import trendMixin from './trendMixins'
+
 export default {
  name: 'alertLabel',
  mixins: [trendMixin],
@@ -319,7 +308,9 @@ export default {
      alertLabelData: null,
      loading: true,
      heightList: 0,
-      boxWidth: 0
+      boxWidth: 0,
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      alertColor: '#23bf9a'
    }
  },
  watch: {
@@ -364,7 +355,6 @@ export default {
            dialog = document.querySelector('#viewGraphDialog .el-dialog')
          }
          const dialogHeight = dialog.getBoundingClientRect()
-          console.log(dialogHeight, 'dialogHeight')
          leftOffSet = leftOffSet - dialogHeight.x
          leftOffSetView = dialogHeight.x
          topOffSet = topOffSet - dialogHeight.y
@@ -410,6 +400,7 @@ export default {
          if (res.msg === 'success') {
            this.loading = false
            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
          } else {
            this.$message.error(res.msg)
          }
@@ -420,6 +411,7 @@ export default {
          if (res.msg === 'success') {
            this.loading = false
            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
          } else {
            this.$message.error(res.msg)
          }
@@ -430,6 +422,7 @@ export default {
          if (res.msg === 'success') {
            this.loading = false
            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
          } else {
            this.$message.error(res.msg)
          }
@@ -440,6 +433,7 @@ export default {
          if (res.msg === 'success') {
            this.loading = false
            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
          } else {
            this.$message.error(res.msg)
          }
@@ -450,6 +444,7 @@ export default {
          if (res.msg === 'success') {
            this.loading = false
            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
          } else {
            this.$message.error(res.msg)
          }
@@ -498,6 +493,34 @@ export default {
      } else {
        return this.$t('asset.notInStock')
      }
+    },
+    selectIcon (type) {
+      switch (type) {
+        case 'asset' : return 'nz-icon-overview-project'
+        case 'dc' : return 'nz-icon-Datacenter2'
+        case 'project' : return 'nz-icon-project'
+        case 'module' : return 'nz-icon-overview-module'
+        case 'endpoint' : return 'nz-icon-overview-endpoint'
+        case 'alertrule' : return 'nz-icon-Alertrule'
+      }
+      return 'nz-icon-module5'
+    },
+    returnColor (obj) {
+      let color = ''
+      if (!obj) {
+        return '#23bf9a'
+      } else {
+        this.severityDataWeight.forEach(severity => {
+          const num = obj.find(alert => alert.priority === severity.name)
+          if (num && !color && num.num > 0) {
+            color = severity.color
+          }
+        })
+        if (!color) {
+          color = '#23bf9a'
+        }
+        return color
+      }
    }
  },
  mounted () {
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
@@ -45,7 +45,7 @@
      </el-timeline-item>
      <div  v-if="timeLineData.length >= total" style="text-align: center">{{$t('overall.noMoreData')}}</div>
      <div v-else class="load-more-box">
-        <el-button size="small" @click="getTimeLineData()" :loading="loading">{{$t('overall.loadMore')}}}</el-button>
+        <el-button size="small" @click="getTimeLineData()" :loading="loading">{{$t('overall.loadMore')}}</el-button>
      </div>
    </el-timeline>
    <div class="table-no-data" v-else>
@@ -221,7 +221,7 @@ export default {
          item.isSelect = false
        })
        scope.isSelect = !scope.isSelect
-      } else if (isSelectArr.length === 1 && isSelectArr[0].type === scope.type) {
+      } else if (isSelectArr.length === 1 && isSelectArr[0].key === scope.key) {
        this.scopeList.forEach(item => {
          item.isSelect = true
        })
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -1,14 +1,22 @@
 <template>
  <div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-my-loading="loading" ref="alertLabels">
+    <div class="alert-label-header-title">
+      <div class="alert-label-header-circle" :style="`background: ${alertColor}`">
+        <i  class="nz-icon nz-icon-Alertrule"></i>
+      </div>
+      <div class="alert-label-header-name">
+        {{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
+      </div>
+    </div>
    <div class="alert-rule-info" >
      <div class="alert-rule-box">
        <div class="alert-rule-title">ID</div>
        <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
      </div>
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('alert.name')}}</div>
-        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
-      </div>
+<!--      <div class="alert-rule-box">-->
+<!--        <div class="alert-rule-title">{{$t('alert.name')}}</div>-->
+<!--        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
+<!--      </div>-->
      <div class="alert-rule-box">
        <div class="alert-rule-title">{{$t('alert.type')}}</div>
        <div class="alert-rule-value">
@@ -85,7 +93,9 @@ export default {
    return {
      loading: true,
      alertRuleData: '',
-      severityColor: ''
+      severityColor: '',
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      alertColor: '#23bf9a'
    }
  },
  components: {
@@ -135,6 +145,23 @@ export default {
      this.severityData.map(item => {
        this.severityColor = item.color
      })
+    },
+    returnColor (obj) {
+      let color = '#23bf9a'
+      if (!obj) {
+        return color
+      } else {
+        this.severityDataWeight.forEach(severity => {
+          const num = obj.find(alert => alert.priority === severity.name)
+          if (num && !color && num.num > 0) {
+            color = severity.color
+          }
+        })
+        if (!color) {
+          color = '#23bf9a'
+        }
+        return color
+      }
    }
  },
  mounted () {
@@ -143,6 +170,7 @@ export default {
        this.loading = false
        this.severityDataColor()
        this.alertRuleData = res.data
+        this.alertColor = this.returnColor(res.data.alert)
        const weekDays = this.getWeeksTime()
        if (this.trendTimer) {
          clearTimeout(this.trendTimer)
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
--- a/nezha-fronted/src/components/common/js/htmlToPdf.js
+++ b/nezha-fronted/src/components/common/js/htmlToPdf.js
@@ -0,0 +1,68 @@
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+import { Loading } from 'element-ui' // 此处根据你实际使用的框架的loading进行引入
+let loading
+export default {
+  install (Vue, options) {
+    Vue.prototype.getPdf = function (dom, x, y) { // 传入需要导出的 dom
+      const title = this.htmlTitle || 'pdf'
+      // html2Canvas(document.querySelector('#pdfDom'), { //这是在界面上设置一个id
+      // 只下载id为pdfDom的内容
+      html2Canvas(dom, { // body是下载整个界面
+        useCORS: true, // 是否尝试使用CORS从服务器加载图像
+        allowTaint: true,
+        dpi: 300, // 解决生产图片模糊
+        // width: 490, //canvas宽度
+        // height: 240, //canvas高度
+        x: x || 0, // x坐标 需要计算
+        y: y || 0, // y坐标 需要计算
+        async: false, // 是否异步解析和呈现元素
+        foreignObjectRendering: true // 是否在浏览器支持的情况下使用ForeignObject渲染
+      }).then(function (canvas) {
+        loading.close()
+        document.body.style.height = '100%'
+        document.getElementsByTagName('html')[0].style.overflow = 'hidden'
+        const contentWidth = canvas.width
+        const contentHeight = canvas.height
+        const pageHeight = contentWidth / 592.28 * 841.89 // 一页pdf显示html页面生成的canvas高度;
+        let leftHeight = contentHeight // 未生成pdf的html页面高度
+        let position = 0 // pdf页面偏移
+        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+        const imgWidth = 595.28
+        const imgHeight = 592.28 / contentWidth * contentHeight
+        const pageData = canvas.toDataURL('image/jpeg', 1.0)
+        const PDF = new JsPDF('', 'pt', 'a4')
+        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+        // 当内容未超过pdf一页显示的范围，无需分页
+        if (leftHeight < pageHeight) {
+          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+        } else {
+          while (leftHeight > 0) {
+            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+            leftHeight -= pageHeight
+            position -= 841.89
+            if (leftHeight > 0) {
+              PDF.addPage()
+            }
+          }
+        }
+        PDF.save(title + '.pdf')
+      })
+    }
+    Vue.prototype.showScreenLoading = function (flag) {
+      if (flag) {
+        loading = Loading.service({
+          lock: true,
+          text: '正在下载pdf...',
+          background: 'rgba(0,500,200,.5)'
+        })
+      } else {
+        if (loading) {
+          loading.close()
+          document.body.style.height = '100%'
+          document.getElementsByTagName('html')[0].style.overflow = 'hidden'
+        }
+      }
+    }
+  }
+}
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -346,6 +346,7 @@ export default {
      }
    }
  },
+
  created () {
    let path = ''
    if (this.$route.fullPath.match(/\/(\S*)\?/)) {
--- a/nezha-fronted/src/components/common/mixin/htmlToPdfMixin.js
+++ b/nezha-fronted/src/components/common/mixin/htmlToPdfMixin.js
@@ -0,0 +1,13 @@
+export default {
+  methods: {
+    htmlToPdf () {
+      const dom = document.getElementsByClassName(this.pdfId)[0]
+      if (dom) {
+        this.showScreenLoading(true)
+        this.getPdf(dom)
+      } else {
+        this.showScreenLoading(false)
+      }
+    }
+  }
+}
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
@@ -78,7 +78,7 @@
            </my-date-picker>
          </el-form-item>
          <!-- labels -->
-          <div class="form__sub-title">{{$t('overall.labels')}}</div>
+          <div class="form__sub-title">{{$t('config.assetLabel.assetLabel')}}</div>
          <div v-for="(label, i) in editAsset.fields" :key="i" class="form__dotted-item">
            <el-form-item :prop="'fields.' + i + '.value'">
              <template v-slot:label>
--- a/nezha-fronted/src/components/common/rightBox/profileBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/profileBox.vue
@@ -37,7 +37,7 @@
              <el-option v-for="item in langList" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
-          <el-form-item label="Theme" prop="theme" style="display: none">
+          <el-form-item label="Theme" prop="theme">
            <el-select id="account-input-language"
                       class="right-box__select"
                       v-model="editProfile.theme"
--- a/nezha-fronted/src/components/common/table/settings/pingTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/pingTable.vue
@@ -0,0 +1,94 @@
+<template>
+  <el-table
+      id="pingTable"
+      ref="dataTable"
+      :height="height"
+      :data="tableData"
+      border
+      @header-dragend="dragend"
+    >
+    <el-table-column type="expand">
+      <template slot-scope="{ row }">
+        <div class="details">
+          <pre>{{row.raw}}</pre>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      :key="`col-${index}`"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'state'">
+          <div class="active-icon green-bg inline-block" v-if="scope.row.state===1"></div>
+          <div class="active-icon gray-bg inline-block" v-else-if="scope.row.state===0"></div>
+        </template>
+        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+        <span v-else>-</span>
+      </template>
+    </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'pingTable',
+  mixins: [table],
+  props: {
+    loading: Boolean
+  },
+  data () {
+    return {
+      tableTitle: [ // 原table列
+        {
+          label: this.$t('overall.dc'),
+          prop: 'dataCenter'
+        }, {
+          label: this.$t('ping.sourceIp'),
+          prop: 'source'
+        }, {
+          label: this.$t('ping.targetIp'),
+          prop: 'ip'
+        }, {
+          label: this.$t('overall.state'),
+          prop: 'state'
+        }, {
+          label: this.$t('ping.packetLossRate'),
+          prop: 'rate'
+        }, {
+          label: this.$t('ping.rttAverage'),
+          prop: 'avg'
+        }, {
+          label: this.$t('ping.rttMinimum'),
+          prop: 'min'
+        }, {
+          label: this.$t('ping.rttMaximum'),
+          prop: 'max'
+        }
+      ]
+    }
+  },
+  methods: {
+  }
+}
+</script>
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -13,12 +13,12 @@
      </el-dropdown>
      <el-dropdown trigger="click">
        <div class="header-menu__item"><i class="nz-icon nz-icon-more-app"></i></div>
-        <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+        <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top el-dropdown-menu-link">
          <el-dropdown-item v-for="(item, index) in linkData" :key="index" :index="'0-' + index" v-if="linkData.length">
-            <span class="link-title">
+            <a :href='item.url' rel="noopener noreferrer" :title="item.name" target="_blank" class="link-title nz-  a">
              <i class="nz-icon nz-icon-link"></i>
-              <a :href='item.url' rel="noopener noreferrer" :title="item.name"  class="nz-  a" target="_blank">{{item.name}}</a>
-            </span>
+              <span class="nz-  a">{{item.name}}</span>
+            </a>
          </el-dropdown-item>
          <div v-if="!linkData.length" class="header-link-nodata">
            {{$t('overall.noData')}}
--- a/nezha-fronted/src/components/page/config/basic.vue
+++ b/nezha-fronted/src/components/page/config/basic.vue
@@ -28,7 +28,7 @@
            </el-option>
          </el-select>
        </el-form-item>
-        <el-form-item :label="$t('config.system.basic.defTheme')" prop="defTheme" style="display: none">
+        <el-form-item :label="$t('config.system.basic.defTheme')" prop="defTheme">
          <el-select id="account-input-language"
                     class="right-box__select"
                     v-model="basic.theme"
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -58,7 +58,7 @@
        <el-table-column
          v-if="time"
          prop="date"
-          width="140"
+          width="160"
        >
          <template slot-scope="{ row }">{{utcTimeToTimezoneStr(row.date)}}</template>
        </el-table-column>
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -74,6 +74,9 @@
                  <el-dropdown-item v-has="'panel_view'">
                    <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
                  </el-dropdown-item>
+                  <el-dropdown-item v-has="'main_add'">
+                    <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
+                  </el-dropdown-item>
                </template>
              </top-tool-more-options>
            </div>
@@ -159,14 +162,17 @@ import { fromRoute } from '@/components/common/js/constants'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import { lineChartMove } from '@/components/common/js/common'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
+import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 // import chartData from './testData'

 export default {
  name: 'panel',
-  mixins: [routerPathParams],
+  mixins: [routerPathParams, htmlToPdfMixin],
  data () {
    return {
      fromRoute,
+      pdfId: 'pdfDom',
+      htmlTitle: 'panel',
      panelTabLoading: false,
      overScroll10: false,
      isLoading: true,
@@ -824,6 +830,42 @@ export default {
    afterImport () {
      this.dateChange()
      this.panelReloadOnlyPanel()
+    },
+    htmlToPdf () {
+      let dom = document.getElementsByClassName(this.pdfId)[0]
+      if (dom) {
+        // dom = dom.getElementsByClassName('vue-grid-layout')[0]
+        this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
+        this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
+        let flag = true
+        this.showScreenLoading(true)
+        let timer = setInterval(() => {
+          flag = true
+          this.$refs.chartList.copyDataList.forEach(chart => {
+            if (chart.type !== 'group') {
+              flag = flag && chart.loaded
+            } else if (chart.collapse) {
+              chart.children.forEach(groupChart => {
+                flag = flag && groupChart.loaded
+              })
+            }
+          })
+          if (flag) {
+            clearInterval(timer)
+            timer = null
+            setTimeout(() => {
+              document.body.style.height = 'auto'
+              // document.getElementsByTagName('html')[0].style.overflow = 'visible'
+              const position = dom.getBoundingClientRect()
+              console.log(position)
+              this.getPdf(dom, -1 * position.left, -1 * position.top)
+              // this.getPdf(dom, 0, 0)
+            }, 2000)
+          }
+        }, 200)
+      } else {
+        this.showScreenLoading(false)
+      }
    }
  },
  created () {
--- a/nezha-fronted/src/components/page/tool/ping.vue
+++ b/nezha-fronted/src/components/page/tool/ping.vue
@@ -0,0 +1,256 @@
+<template>
+    <nz-data-list
+      ref="dataList"
+      :layout="[]"
+      :from="fromRoute.ping"
+    >
+    <template v-slot:top-tool-left>
+      <el-input v-model="ip" @focus="ipFocus=true" size='medium' style="width:250px" :placeholder="$t('overall.placeHolder')+' IP/Hostname'"></el-input>
+      <el-popover
+        placement="bottom"
+        width="220"
+        trigger="manual"
+        v-model="visible"
+        v-clickoutside="close"
+        popper-class="no-style-class"
+        >
+        <el-form size="small" ref="ruleForm" label-position="top" :model="ruleForm" :rules="formRules">
+          <el-form-item style="margin-bottom:0px">
+            <p class="pop-tit">{{$t('overall.dc')}}</p>
+            <ul class="pop-list-wrap">
+              <li class="el-dropdown-menu__item">
+                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange">{{$t('overall.all')}}</el-checkbox>
+              </li>
+              <ul class="pop-list">
+                <el-checkbox-group v-model="checked" @change="checkedChange">
+                  <li class="el-dropdown-menu__item" v-for="item in dataCenter" :key="item.id">
+                    <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
+                  </li>
+                </el-checkbox-group>
+              </ul>
+            </ul>
+          </el-form-item>
+          <el-form-item prop="timeout" style="margin-bottom:10px">
+            <div class="pop-tit">{{$t('ping.timeOut')}}</div>
+            <div class="wrap" style="height:32px">
+              <el-input v-model.number="ruleForm.timeout" placeholder="" >
+                <template slot="append">{{$t('config.system.basic.second')}}</template>
+              </el-input>
+            </div>
+          </el-form-item>
+        </el-form>
+        <el-button slot="reference" class="top-tool-btn margin-l-10 choose" @click="triggerVisible">
+          <i class="el-icon-more"></i>
+        </el-button>
+      </el-popover>
+
+      <el-button class="top-tool-btn btn" v-if="!flag" @click="startTask">
+        <i class="el-icon-caret-right"></i>
+      </el-button>
+      <el-button class="top-tool-btn btn" v-else @click="clearTask">
+        <i class="quadrate"></i>
+      </el-button>
+    </template>
+
+    <template v-slot:default>
+      <!-- 初始展示的内容 ip输入框聚焦后消失 -->
+      <div class="empty" v-if="!ipFocus">
+        <el-steps align-center>
+          <el-step>
+            <span class="nz-icon nz-icon-edit" slot="icon"></span>
+            <p class="txt" slot="title">{{$t('overall.placeHolder')}} IP/Hostname</p>
+          </el-step>
+          <el-step>
+            <span class="el-icon-more" slot="icon"></span>
+            <p class="txt" slot="title">{{$t('ping.filter')}}</p>
+          </el-step>
+          <el-step>
+            <span class="msg" slot="icon">Ping</span>
+            <p class="txt" slot="title">Ping {{$t('config.terminallog.cmd.cmd')}}</p>
+          </el-step>
+        </el-steps>
+      </div>
+      <!-- 存在任务id时展示表格 -->
+      <div class="data-wrap" v-show="tid">
+        <div class="data-top">
+          <span>IP {{$t('ping.total')}}:{{total}}</span>
+          <span>{{$t('ping.done')}}:{{tableData.length}}</span>
+          <span>{{$t('ping.progress')}}:{{parseInt(tableData.length/total*100)}}%</span>
+        </div>
+        <div class="data-bottom">
+          <ping-table
+            ref="dataTable"
+            :loading="loading"
+            v-my-loading="loading"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            >
+          </ping-table>
+        </div>
+      </div>
+    </template>
+  </nz-data-list>
+</template>
+
+<script>
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import pingTable from '@/components/common/table/settings/pingTable'
+import { positiveInteger } from '../../common/js/validate'
+export default {
+  mixins: [dataListMixin],
+  components: {
+    nzDataList,
+    pingTable
+  },
+  data () {
+    return {
+      loading: false,
+      // 弹出框是否显示
+      visible: false,
+      ip: '',
+      // ip输入框是否聚焦
+      ipFocus: false,
+      // 是否全选
+      checkAll: true,
+      isIndeterminate: false,
+      // 数据中心
+      dataCenter: [],
+      // 复选框选中的值
+      checked: [],
+      // 是否正在请求数据
+      flag: false,
+      // 定时器id
+      timer: null,
+      // 任务id
+      tid: 0,
+      // 表格总数据
+      total: 0,
+      // 表格数据
+      tableData: [],
+      ruleForm: {
+        // 超时时间
+        timeout: ''
+      },
+      formRules: {
+        timeout: [{ validator: positiveInteger, trigger: 'blur' }]
+      }
+    }
+  },
+  created () {
+    this.getDataCenter()
+  },
+  methods: {
+    close () {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.visible = false
+        }
+      })
+    },
+    // 切换弹框显示隐藏
+    triggerVisible () {
+      if (!this.visible) {
+        this.visible = true
+      } else {
+        this.close()
+      }
+    },
+    // 点击全选
+    checkAllChange (value) {
+      const allId = this.dataCenter.map(item => {
+        return item.id
+      })
+      this.checked = value ? allId : []
+      this.isIndeterminate = false
+    },
+    // 点击单个选中
+    checkedChange (value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.dataCenter.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataCenter.length
+    },
+    // 开始任务
+    startTask () {
+      const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
+      const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
+      if (!ipv4.test(this.ip) && !ipv6.test(this.ip)) {
+        return this.$message.error(this.$t('validate.host'))
+      }
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+      // 标记正在请求中
+      this.flag = true
+      this.getId()
+    },
+    // 请求dataCenter
+    getDataCenter () {
+      this.$get('/dc?pageSize=-1').then(response => {
+        this.dataCenter = response.data.list
+        // 默认全选
+        this.checked = this.dataCenter.map(item => {
+          return item.id
+        })
+      })
+    },
+    // 请求任务id
+    async getId () {
+      this.tableData = []
+      const params = {
+        ip: this.ip,
+        dcIds: this.checked.join(','),
+        timeout: this.ruleForm.timeout
+      }
+      this.$get('/tool/ping', params).then(response => {
+        // this.tid = response.data
+        this.tid = 111
+        this.total = 30
+        this.timer = setInterval(() => {
+          if (this.tableData.length < this.total) {
+            this.getData()
+          } else {
+            this.clearTask()
+          }
+        }, 1000)
+      })
+    },
+    // 请求表格数据
+    getData () {
+      this.$get('/tool/ping/result/' + this.tid).then(response => {
+        this.tableData.push({
+          dataCenter: '数据中心',
+          source: '192.168.40.1',
+          ip: '192.168.40.2',
+          state: 1,
+          rate: 20.0,
+          avg: 30,
+          min: 23,
+          max: 44,
+          raw: '正在 Ping 127.0.0.1 具有 32 字节的数据:\r\n来自 127.0.0.1 的回复: 字节=32 时间<1ms TTL=64\r\n来自 127.0.0.1 的回复: 字节=32 时间<1ms TTL=64\r\n来自 127.0.0.1 的回复: 字节=32 时间<1ms TTL=64\r\n来自 127.0.0.1 的回复: 字节=32 时间<1ms TTL=64\r\n\r\n127.0.0.1 的 Ping 统计信息:\r\n    数据包: 已发送 = 4，已接收 = 4，丢失 = 0 (0% 丢失)，\r\n往返行程的估计时间(以毫秒为单位):\r\n    最短 = 0ms，最长 = 0ms，平均 = 0ms'
+        })
+      })
+    },
+    // 清除任务
+    async clearTask () {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+      await this.$get('/tool/ping/cancel/' + this.tid)
+      this.flag = false
+    }
+  },
+  // 离开页面的时候触发
+  async beforeRouteLeave (to, from, next) {
+    await this.clearTask()
+    next()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -35,6 +35,8 @@ import bus from '@/libs/bus'
 import myDatePicker from '@/components/common/myDatePicker'
 import vSelectPage from '@/components/common/v-selectpagenew'
 import nzDataList from '@/components/common/table/nzDataList'
+import htmlToPdf from '@/components/common/js/htmlToPdf'
+Vue.use(htmlToPdf)
 Vue.use(vSelectPage, {
  dataLoad: function (vue, url, params) {
    if (params.pageNumber) {
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -198,6 +198,10 @@ export default new Router({
          path: '/backup',
          component: resolve => require(['../components/page/config/backups.vue'], resolve)
        },
+        {
+          path: '/ping',
+          component: resolve => require(['../components/page/tool/ping.vue'], resolve)
+        }
      ]
    }
  ]
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -71,7 +71,6 @@ const user = {
  },
  actions: {
    loginSuccess (store, res) {
-
      const defaultAppearance = {
        system_name: localStorage.getItem('nz-sys-name'),
        system_logo: localStorage.getItem('nz-sys-logo'),