diff --git a/nezha-fronted/.babelrc b/nezha-fronted/.babelrc
index 3a280ba34..01be98850 100644
--- a/nezha-fronted/.babelrc
+++ b/nezha-fronted/.babelrc
@@ -8,5 +8,32 @@
     }],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "utils": {
+      "presets": [
+        [
+          "env",
+          {
+            "loose": true,
+            "modules": "commonjs",
+            "targets": {
+              "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+            }
+          }
+        ],
+      ],
+      "plugins": [
+        ["module-resolver", {
+          "root": ["element-ui"],
+          "alias": {
+            "element-ui/src": "element-ui/lib"
+          }
+        }]
+      ]
+    },
+    "test": {
+      "plugins": ["istanbul"]
+    }
+  }
 }
diff --git a/nezha-fronted/build/webpack.base.conf.js b/nezha-fronted/build/webpack.base.conf.js
index a07e68360..88adc5d03 100644
--- a/nezha-fronted/build/webpack.base.conf.js
+++ b/nezha-fronted/build/webpack.base.conf.js
@@ -8,8 +8,6 @@ function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
-
-
 module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
@@ -25,8 +23,8 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
+      vue$: 'vue/dist/vue.esm.js',
+      '@': resolve('src')
     }
   },
   module: {
@@ -37,9 +35,22 @@ module.exports = {
         options: vueLoaderConfig
       },
       {
-        test: /\.js$/,
+        test: /\.(js)$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/element-ui/packages/scrollbar')],
+        exclude: '/node_modules/',
+        options: {
+          presets: [
+            ['env', {
+              modules: false,
+              targets: {
+                browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
+              }
+            }],
+            'stage-2'
+          ],
+          plugins: ['transform-vue-jsx', 'transform-runtime']
+        }
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 562ee896a..9073baa7a 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
+    "babel-core": "^6.26.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 52ad24118..12707512b 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -85,3 +85,35 @@
 .orange-bg {
   background-color: var(--theme-color) !important;
 }
+.timezone-area{
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  font-size: 14px;
+  float: left;
+  margin-left: 10px;
+  font-family: PingFangSC-Regular;
+  color: #333333;
+  line-height: 20px;
+  font-weight: 400;
+  margin-top: 3px;
+}
+.timezone-offset{
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  font-size: 14px;
+  margin-right: 10px;
+  font-family: PingFangSC-Regular;
+  color: #333333;
+  line-height: 20px;
+  font-weight: 400;
+}
+.active-icon{
+  margin-top:0px;
+  width:10px;
+  height:10px;
+  border-radius:50%;
+  display: inline-block;
+  margin-right: 5px;
+}
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index bdbd25c5e..9d9d4f978 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -96,6 +96,8 @@
     }
     .top-tool-btn--dropdown {
       position: relative;
+      width: auto;
+      min-width: 36px;
     }
   }
   .top-tools--sub {
diff --git a/nezha-fronted/src/assets/css/theme.scss b/nezha-fronted/src/assets/css/theme.scss
index a7648e7c1..2f855868c 100644
--- a/nezha-fronted/src/assets/css/theme.scss
+++ b/nezha-fronted/src/assets/css/theme.scss
@@ -43,7 +43,11 @@ $--warning-color: var(--theme-color); //全局警告橙色
 $--suspended-color: #9e9c98; //全局停用色灰色
 
 :export {
-  themeColor: $--theme-color
+  themeColor: $--theme-color;
+  dangerColor: $--danger-color;
+  successColor: $--success-color;
+  warningColor: var(--theme-color);
+  suspendedColor: $--suspended-color;
 }
 /* element-ui变量覆盖 */
 /*$--color-primary: red; // 覆盖element-ui的主题色
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 3ab0311c3..336820f7f 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1690,7 +1690,7 @@ li{
 }
 /*列表中状态字段 的小圆点*/
 .active-icon{
-  margin-top:15px;
+  margin-top:0px;
   width:8px;
   height:8px;
   border-radius:50%;
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index f656ecdca..16367c439 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -60,7 +60,7 @@
 <!--          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange" v-if="chart.type !='text'"></time-picker>-->
           <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="chart-preview"></pick-time>
           <!--
-          <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
+          <my-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
                           format="yyyy/MM/dd HH:mm"
                           @change="dateChange"
                           v-model="searchTime"
@@ -70,7 +70,7 @@
                           :start-placeholder="$t('dashboard.panel.startTime')"
                           :end-placeholder="$t('dashboard.panel.endTime')"
                           align="right">
-          </el-date-picker>-->
+          </my-date-picker>-->
         </div>
       </div>
 
diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue
index fed8532d4..97a0b2d13 100644
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -360,7 +360,7 @@ export default {
       },
       customConnect: {
         host: '',
-        port: '',
+        port: 22,
         authType: 1,
         authUsername: '',
         authPin: '',
@@ -377,19 +377,19 @@ export default {
         {
           title: 'Type',
           data: (row) => {
-            return row.type.name
+            return row.type ? row.type.name : ''
           }
         },
         {
           title: 'Model',
           data: (row) => {
-            return row.model.name
+            return row.model ? row.model.name : ''
           }
         },
         {
           title: 'Datacenter',
           data: (row) => {
-            return row.dc.name
+            return row.dc ? row.dc.name : ''
           }
         }
       ],
@@ -878,9 +878,10 @@ export default {
       if (this.customConnect.authProtocol === 1) {
         this.customConnect.authUserTip = ''
         this.customConnect.authPinTip = ''
+        this.customConnect.port = 22
       } else {
         this.customConnect.authPriKey = ''
-        this.customConnect.authPriKey = 1
+        this.customConnect.port = 23
       }
     },
     authTypeChange () {
diff --git a/nezha-fronted/src/components/common/alert/alertLabel2.vue b/nezha-fronted/src/components/common/alert/alertLabel2.vue
index 654bfe8da..711687920 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel2.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel2.vue
@@ -3,125 +3,117 @@
     <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">SN</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.sn:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.sn ? alertLabelData.sn:'--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Host</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.host:'--'}}</div>
+        <div class="alert-label-title">IP</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">State</div>
-        <div class="alert-label-value">{{alertLabelData?(alertStateStr(alertLabelData.state)):'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Ping</div>
         <div class="alert-label-value">
-          <div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div>
-          <span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':'--'}}</span>
+          <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.status === 1,'red-bg': alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.status === 0}" class="active-icon"></div>
+          <span v-if="alertLabelData">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.rtt ? alertLabelData.pingInfo.rtt + 'ms':'--'}}</span>
         </div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Asset Type</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Vendor</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:'--'}}</div>
+        <div class="alert-label-title">Brand</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Model</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.model:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">PingLastReply</div>
-        <div class="alert-label-value">{{(alertLabelData&&alertLabelData.pingLastReply)?alertLabelData.pingLastReply:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? alertLabelData.pingInfo.lastUpdate : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Alert</div>
         <div class="alert-label-value">
-          <span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span>
+          <span v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'danger' : 'success'">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
         </div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">DC</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:'--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Endpoint</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:'--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Administrator</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.principal:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div>
       </div>
     </div>
 
     <div class="alert-label-info" v-if="type==='module'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Name</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Project</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Description</div>
-        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '-'}}</div>
       </div>
     </div>
 
     <div class="alert-label-info" v-if="type==='project'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Name</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Description</div>
-        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
       </div>
     </div>
 
     <div class="alert-label-info" v-if="type==='endpoint'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Project</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Module</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.module.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Labels</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.labels:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.labels ? alertLabelData.labels : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Host</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.host:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.host ? alertLabelData.host : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Port</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.port:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.port ? alertLabelData.port : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Path</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.path:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.path ? alertLabelData.path : '--'}}</div>
       </div>
     </div>
   </div>
@@ -240,40 +232,40 @@ export default {
     init () {
       this.loading = true
       if (this.type === 'asset') {
-        this.$get('/asset/info?id=' + this.id).then((res) => {
+        this.$get('asset/asset/' + this.id).then((res) => {
           if (res.msg === 'success') {
             this.loading = false
-            this.alertLabelData = res.data.Basic
+            this.alertLabelData = res.data
           } else {
             this.$message.error(res.msg)
           }
         })
       }
       if (this.type === 'project') {
-        this.$get('/project?id=' + this.id).then((res) => {
+        this.$get('monitor/project/' + this.id).then((res) => {
           if (res.msg === 'success') {
             this.loading = false
-            this.alertLabelData = res.data.list[0]
+            this.alertLabelData = res.data
           } else {
             this.$message.error(res.msg)
           }
         })
       }
       if (this.type === 'module') {
-        this.$get('/module?id=' + this.id).then((res) => {
+        this.$get('monitor/module/' + this.id).then((res) => {
           if (res.msg === 'success') {
             this.loading = false
-            this.alertLabelData = res.data.list[0]
+            this.alertLabelData = res.data
           } else {
             this.$message.error(res.msg)
           }
         })
       }
       if (this.type === 'endpoint') {
-        this.$get('/endpoint?id=' + this.id).then((res) => {
+        this.$get('monitor/endpoint/' + this.id).then((res) => {
           if (res.msg === 'success') {
             this.loading = false
-            this.alertLabelData = res.data.list[0]
+            this.alertLabelData = res.data
           } else {
             this.$message.error(res.msg)
           }
@@ -392,13 +384,13 @@ export default {
     word-break: break-all;
   }
   .danger{
-    background-color: #d64f40;
+    background-color: $--danger-color;
     color: white;
     padding: 2px 5px;
     border-radius: 4px;
   }
   .success{
-    background-color: #50d050;
+    background-color: $--success-color;
     color: white;
     padding: 2px 5px;
     border-radius: 4px;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
index 376c3a1df..edd8814be 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
@@ -19,7 +19,7 @@
             </el-input>
           </div>
           <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
-            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><el-date-picker
+            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
             v-model="formatTime"
             type="datetime"
             size="mini"
@@ -29,7 +29,7 @@
             placeholder="Moment"
             value-format="yyyy-MM-dd HH:mm:ss"
           >
-          </el-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
+          </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
           </div>
           <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
             <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 891063900..409482a05 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -32,7 +32,7 @@
           </el-input>
         </div>
         <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
-          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><el-date-picker
+          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
           v-model="formatTime"
           type="datetime"
           size="mini"
@@ -43,7 +43,7 @@
           value-format="yyyy-MM-dd HH:mm:ss"
           @change="pickTime"
         >
-          </el-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
+          </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
         </div>
         <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
           <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
diff --git a/nezha-fronted/src/components/common/elementSet.vue b/nezha-fronted/src/components/common/elementSet.vue
index e1053958d..84978c413 100644
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -54,13 +54,6 @@ export default {
   created () {
     const localStorageTitle = JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
     if (localStorageTitle) {
-      for (const title of this.originalTableTitle) {
-        for (const lsTitle of localStorageTitle) {
-          if (lsTitle.prop === title.prop) {
-            lsTitle.label = title.label
-          }
-        }
-      }
       localStorage.setItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId, JSON.stringify(localStorageTitle))
     }
   },
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index f745b600d..4977d22ea 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -1149,7 +1149,7 @@ const cn = {
       alerts: 'Alerts',
       privpin: '隐私密码',
       asset: 'Asset',
-      editEndpoint: '编辑 endpoint',
+      editEndpoint: '编辑 Endpoint',
       createEndpoint: '新增Endpoint',
       batchEndpoint: '批量 Endpoint',
       endpointName: 'Endpoint name'
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index c7e9b5458..2282bc971 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -1178,7 +1178,7 @@ const en = {
       privpin: 'Priv password',
       alerts: 'Alerts',
       asset: 'Asset',
-      editEndpoint: 'edit endpoint',
+      editEndpoint: 'Edit endpoint',
       createEndpoint: 'Created endpoint',
       batchEndpoint: 'Batch Endpoint',
       endpointName: 'Endpoint name',
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 17c5ad550..ced938448 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -50,6 +50,7 @@
 
 <script>
 import { mapActions } from 'vuex'
+import moment from 'moment-timezone'
 export default {
   name: 'login',
   data () {
diff --git a/nezha-fronted/src/components/common/multipleTime.vue b/nezha-fronted/src/components/common/multipleTime.vue
index eb18c71e5..60e6be6e2 100644
--- a/nezha-fronted/src/components/common/multipleTime.vue
+++ b/nezha-fronted/src/components/common/multipleTime.vue
@@ -116,11 +116,11 @@
 <!--    name="multiple-time-datepicker"-->
     <transition>
       <div v-show="showDropdown" id="panel-calender" class="calendar">
-        <el-date-picker prefix-icon=" " size="mini" ref="calendar"
+        <my-date-picker prefix-icon=" " size="mini" ref="calendar"
                         format="yyyy/MM/dd HH:mm:ss" class="panel-time-picker-hidden" @change="dateChange" v-model="startTime" type="datetime"
                         popper-class="panel-time-picker-popper"
                         align="right">
-        </el-date-picker>
+        </my-date-picker>
         <!--
         <button type="button" style="border-radius: 1px 1px 1px 1px" @click="right()" v-show="isCustom"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-right-button" >
@@ -373,6 +373,7 @@ export default {
           } else {
             this.isCustom = true
             this.$refs.calendar.focus()
+            this.$refs.calendar.pickerVisible = true
           }
         } else {
           this.isCustom = false
diff --git a/nezha-fronted/src/components/common/myDatePicker/index.js b/nezha-fronted/src/components/common/myDatePicker/index.js
index 4615b9d73..db27250cf 100644
--- a/nezha-fronted/src/components/common/myDatePicker/index.js
+++ b/nezha-fronted/src/components/common/myDatePicker/index.js
@@ -1,7 +1,14 @@
 import DatePicker from './src/picker/date-picker'
-
+import localeEn from 'element-ui/lib/locale/lang/en'
+import localeCn from 'element-ui/lib/locale/lang/zh-CN'
+import { use } from 'element-ui/src/locale/'
 /* istanbul ignore next */
 DatePicker.install = function install (Vue) {
+  if (localStorage.getItem('nz-language') === 'cn') {
+    use(localeCn)
+  } else {
+    use(localeEn)
+  }
   Vue.component(DatePicker.name, DatePicker)
 }
 
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue b/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue
index c2447a01c..442a0f3c8 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue
@@ -32,6 +32,7 @@
 </template>
 
 <script>
+import bus from '@/libs/bus'
 import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, prevDate, nextDate, isDate, clearTime as _clearTime } from 'element-ui/src/utils/date-util'
 import Locale from 'element-ui/src/mixins/locale'
 import { arrayFindIndex, arrayFind, coerceTruthyValueToArray } from 'element-ui/src/utils/util'
@@ -54,11 +55,14 @@ const removeFromArray = function (arr, pred) {
   const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred)
   return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr
 }
-
 export default {
   mixins: [Locale],
 
   props: {
+    timezone: {
+      type: String,
+      default: localStorage.getItem('nz-sys-timezone') // 没有传则使用本地的时区
+    },
     firstDayOfWeek: {
       default: 7,
       type: Number,
@@ -144,7 +148,9 @@ export default {
       const disabledDate = this.disabledDate
       const cellClassName = this.cellClassName
       const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : []
-      const now = getDateTimestamp(new Date())
+      const now = getDateTimestamp(
+        new Date(bus.computeTimezoneTime(new Date()))
+      )
 
       for (let i = 0; i < 6; i++) {
         const row = rows[i]
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
index 3a07320da..7a72e17a8 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
@@ -111,6 +111,7 @@
               <div>{{ leftLabel }}</div>
             </div>
             <date-table
+              :timezone="timezone"
               selection-mode="range"
               :date="leftDate"
               :default-value="defaultValue"
@@ -151,6 +152,7 @@
               <div>{{ rightLabel }}</div>
             </div>
             <date-table
+              :timezone="timezone"
               selection-mode="range"
               :date="rightDate"
               :default-value="defaultValue"
@@ -167,13 +169,15 @@
         </div>
       </div>
       <div class="el-picker-panel__footer" v-if="showTime">
-        <el-button
-          size="mini"
-          type="text"
-          class="el-picker-panel__link-btn"
-          @click="handleClear">
-          {{ t('el.datepicker.clear') }}
-        </el-button>
+        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-offset">{{timezoneOffset}}</span>
+<!--        <el-button-->
+<!--          size="mini"-->
+<!--          type="text"-->
+<!--          class="el-picker-panel__link-btn"-->
+<!--          @click="handleClear">-->
+<!--          {{ t('el.datepicker.clear') }}-->
+<!--        </el-button>-->
         <el-button
           plain
           size="mini"
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue
index 10b75b170..91afe30eb 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue
@@ -89,6 +89,7 @@
 
           <div class="el-picker-panel__content">
             <date-table
+              :timezone="timezone"
               v-show="currentView === 'date'"
               @pick="handleDatePick"
               :selection-mode="selectionMode"
@@ -122,6 +123,8 @@
       <div
         class="el-picker-panel__footer"
         v-show="footerVisible && currentView === 'date'">
+        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-offset">{{timezoneOffset}}</span>
         <el-button
           size="mini"
           type="text"
@@ -170,7 +173,7 @@ import TimePicker from './time'
 import YearTable from '../basic/year-table'
 import MonthTable from '../basic/month-table'
 import DateTable from '../basic/date-table'
-
+import bus from '@/libs/bus'
 export default {
   mixins: [Locale],
 
@@ -370,7 +373,7 @@ export default {
       // NOTE: not a permanent solution
       //       consider disable "now" button in the future
       if ((!this.disabledDate || !this.disabledDate(new Date())) && this.checkDateWithinRange(new Date())) {
-        this.date = new Date()
+        this.date = new Date(bus.computeTimezoneTime(new Date()))
         this.emit(this.date)
       }
     },
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue
index d6d334124..4cbeeca60 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue
@@ -72,6 +72,10 @@
             </month-table>
           </div>
         </div>
+        <div class="el-picker-panel__footer" v-if="showTime">
+          <span class="timezone-area">{{timezone}}</span>
+          <span class="timezone-offset">{{timezoneOffset}}</span>
+        </div>
       </div>
     </div>
   </transition>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue
index 7272937b1..8208a781a 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue
@@ -41,6 +41,8 @@
         </div>
       </div>
       <div class="el-time-panel__footer">
+        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-offset">{{timezoneOffset}}</span>
         <button
           type="button"
           class="el-time-panel__btn cancel"
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue
index cbff80b50..ae68ebcc0 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue
@@ -16,6 +16,8 @@
         </time-spinner>
       </div>
       <div class="el-time-panel__footer">
+<!--        <span class="timezone-area">{{timezone}}</span>-->
+<!--        <span class="timezone-offset">{{timezoneOffset}}</span>-->
         <button
           type="button"
           class="el-time-panel__btn cancel"
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/picker.vue b/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
index 56fc84eb9..89a82eed3 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
@@ -91,7 +91,7 @@ import Popper from 'element-ui/src/utils/vue-popper'
 import Emitter from 'element-ui/src/mixins/emitter'
 import ElInput from 'element-ui/packages/input'
 import merge from 'element-ui/src/utils/merge'
-
+import moment from 'moment-timezone'
 const NewPopper = {
   props: {
     appendToBody: Popper.props.appendToBody,
@@ -343,6 +343,10 @@ export default {
   },
 
   props: {
+    timezone: {
+      type: String,
+      default: localStorage.getItem('nz-sys-timezone') // 没有传则使用本地的时区
+    },
     size: String,
     format: String,
     valueFormat: String,
@@ -821,6 +825,14 @@ export default {
     },
 
     mountPicker () {
+      const tempFun = this.panel.data
+      this.panel.data = () => {
+        return {
+          timezone: localStorage.getItem('nz-sys-timezone'), // add timezone to panel component
+          timezoneOffset: localStorage.getItem('timezoneOffset'),
+          ...tempFun()
+        }
+      }
       this.picker = new Vue(this.panel).$mount()
       this.picker.defaultValue = this.defaultValue
       this.picker.defaultTime = this.defaultTime
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js b/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js
index cf6ad5004..17d40763d 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js
+++ b/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js
@@ -15,7 +15,7 @@ const getPanel = function (type) {
 export default {
   mixins: [Picker],
 
-  name: 'ElDatePicker',
+  name: 'myDatePicker',
 
   props: {
     type: {
diff --git a/nezha-fronted/src/components/common/overView/messageAsset.vue b/nezha-fronted/src/components/common/overView/messageAsset.vue
index 6bc2a3782..04d2ef7d7 100644
--- a/nezha-fronted/src/components/common/overView/messageAsset.vue
+++ b/nezha-fronted/src/components/common/overView/messageAsset.vue
@@ -252,7 +252,7 @@ export default {
         clearTimeout(this.timer)
       }
       this.assetData.id = data
-      const boxWidth = document.getElementsByClassName('content-right')[0].offsetWidth
+      const boxWidth = document.getElementsByClassName('list-page')[0].offsetWidth
       this.boxWidth = boxWidth
       // this.assetData.rate=window.screen.height/1297;
       this.$nextTick(() => {
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 1b4685eb6..e06d57bb3 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -9,7 +9,7 @@
         <span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
       </button>
       <button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)">
-        <span class="select-refresh-time" v-if="interval !== -1">{{interLabel}}</span>
+        <span class="select-refresh-time-label" v-if="interval !== -1">{{interLabel}}</span>
         <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
         <transition name="el-zoom-in-top">
           <ul v-show="dropdownShow" class="el-dropdown-menu el-popper el-dropdown-menu--mini nz-dropdown">
@@ -98,7 +98,7 @@ export default {
     selectInterval (val) {
       this.visible = false
       this.interval = val.value
-      this.interLabel = val.value
+      this.interLabel = val.label
       console.info(this.interval, val)
       if (!this.showTimePicker && val && val.value != -1) {
         this.intervalTimer = setInterval(() => {
@@ -170,4 +170,7 @@ export default {
 .interval-refresh {
   display: flex;
 }
+  .select-refresh-time-label{
+    margin-left: 5px;
+  }
 </style>
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 4575750b9..c72146259 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -54,6 +54,7 @@
               :styleType="2"
               :metricOptionsParent="metricOptions"
               @change="expressionChange"
+              :from-father-data="true"
               @removeExpression="removeExpression"
             ></promql-input>
             <el-row>
@@ -1128,7 +1129,7 @@ export default {
     })
   },
   mounted () {
-    this.queryMetrics()
+    // this.queryMetrics()
     // this.topologyData.data.grid= !!dataOption.grid;
     // this.topologyData.data.rule= !!dataOption.rule;
     // this.topologyData.data.projectInfo= !!dataOption.projectInfo;
diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
index b84bb661f..6918097ac 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -180,7 +180,7 @@ export const imageTemp = {
       width: 100,
       height: 100
     },
-    imageRatio: false,
+    imageRatio: true,
     lineWidth: 0,
     rotate: 0,
     offsetRotate: 0,
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 8a67e37ca..5af73549e 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -1549,7 +1549,6 @@ export default {
     upload () {
       const form = new FormData()
       form.append('file', this.file)
-      console.log(this.file)
       if (this.uploadPic.name) {
         form.append('name', this.uploadPic.name)
       } else {
@@ -1562,7 +1561,7 @@ export default {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           this.uploadPicShow = false
-          this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data) => {
+          this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data,header) => {
             const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
             if (group) {
               group.children.push({
@@ -1621,7 +1620,7 @@ export default {
             promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
             imgArr.push({ ...item })
           })
-          Promise.all(promiseArr).then((res2) => {
+          Promise.all(promiseArr).then((res2,header) => {
             this.iconArray = [...res.data.list]
             this.iconArray.forEach((item, index) => {
               item.image = res2[index]
@@ -1688,15 +1687,14 @@ export default {
       if (url) {
         return new Promise((resolve, reject) => {
           this.$axios
-            .get(url, {
-              responseType: 'arraybuffer'
-            })
-            .then(res => {
-              console.log(res.data)
-              return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
+            .get(url)
+            .then((res) => {
+              return {
+                data: ('data:image/jpeg;base64,' + res.data),
+              }
             })
             .then(data => {
-              resolve(data)
+              resolve(data.data, data.header)
               // changeImage(data,(img)=>{
               //   resolve(img)
               // })
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
index 0a39307ea..82ef0ceab 100644
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -313,7 +313,7 @@
            </button>
 
               <button @click="imgUpload" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
-                      v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                      v-has="'topo_icon_save'" :disabled="prevent_opt.save"
                       :class="{'nz-btn-disabled':prevent_opt.save}"
                       style="margin-right: 20px">
              {{$t('project.topology.save')}}
@@ -477,6 +477,8 @@ export default {
       penToolTipScale: 1,
       oldScale: 1,
       uploadPicShow: false,
+      imgWidth: 0,
+      imgHeight: 0,
       uploadPic: {
         name: '',
         unit: ''
@@ -1484,22 +1486,24 @@ export default {
     beforeAvatarUpload (file, fileList) {
       const this_ = this
       const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
-
+      const isLt2M = file.size / 1024 / 1024 < 2
       if (!isJPG) {
         this.$message.error(this_.$t('project.topology.imgFormat'))
         return false
       }
-      // if (!isLt2M) {
-      //   this.$message.error( this_.$t('project.topology.imgSize'));
-      //   return false;
-      // }
+      if (!isLt2M) {
+        this.$message.error(this_.$t('project.topology.imgSize'))
+        return false
+      }
       const isSize = new Promise(function (resolve, reject) {
-        const width = 100
-        const height = 100
+        const width = 0
+        const height = 0
         const _URL = window.URL || window.webkitURL
         const img = new Image()
         img.onload = function () {
           const valid = img.width > width && img.height > height
+          this_.imgWidth = img.width
+          this_.imgHeight = img.height
           valid ? resolve() : reject()
         }
         img.src = _URL.createObjectURL(file.raw)
@@ -1551,11 +1555,13 @@ export default {
         form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
       }
       form.append('unit', this.uploadPic.unit)
+      form.append('width', this.imgWidth)
+      form.append('height', this.imgHeight)
       this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           this.uploadPicShow = false
-          this.dealImg(`monitor/project/topo/icon/${res.data.id}`).then((data) => {
+          this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data, header) => {
             const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
             if (group) {
               group.children.push({
@@ -1611,10 +1617,10 @@ export default {
           res.data.list.forEach((item, index) => {
             item.imageName = item.name
             delete item.name
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
             imgArr.push({ ...item })
           })
-          Promise.all(promiseArr).then((res2) => {
+          Promise.all(promiseArr).then((res2, header) => {
             this.iconArray = [...res.data.list]
             this.iconArray.forEach((item, index) => {
               item.image = res2[index]
@@ -1655,7 +1661,7 @@ export default {
         const promiseArr = []
         imgidList.forEach((item, index) => {
           if (item.data.imageId) {
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
           } else {
             promiseArr.push('')
           }
@@ -1681,14 +1687,14 @@ export default {
       if (url) {
         return new Promise((resolve, reject) => {
           this.$axios
-            .get(url, {
-              responseType: 'arraybuffer'
-            })
-            .then(res => {
-              return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
+            .get(url)
+            .then((res) => {
+              return {
+                data: ('data:image/jpeg;base64,' + res.data)
+              }
             })
             .then(data => {
-              resolve(data)
+              resolve(data.data, data.header)
               // changeImage(data,(img)=>{
               //   resolve(img)
               // })
diff --git a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
index 6b8c4ea7e..1830a7054 100644
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -35,29 +35,27 @@
           <div class="datepicker">
             <div class="datepicker-box">
               <span class="datepicker-title">start time</span>
-              <el-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+              <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'startAt')}" v-model="editAlertSilence.startAt"
-                              :picker-options="optionsStartAt"
                               type="datetime"
                               :clearable="false"
                               popper-class="panel-time-picker-popper"
                               :placeholder="$t('dashboard.panel.startTime')"
                               align="right"
               >
-              </el-date-picker>
+              </my-date-picker>
             </div>
             <div class="datepicker-box">
               <span class="datepicker-title">end time</span>
-              <el-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+              <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'endAt')}" v-model="editAlertSilence.endAt"
-                              :picker-options="optionsEndAt"
                               type="datetime"
                               :clearable="false"
                               popper-class="panel-time-picker-popper"
                               :placeholder="$t('dashboard.panel.startTime')"
                               align="right"
               >
-              </el-date-picker>
+              </my-date-picker>
             </div>
             <!--( :range-separator="")-->
           </div>
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
index 9715fe2e6..59a2cc0f7 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
@@ -125,17 +125,17 @@
                     </template>
                     <template v-else>
                       <template v-if="label.interval">
-                        <el-date-picker
+                        <my-date-picker
                           id="asset-box-input-purchase-date"
                           v-model="label.value[0]"
                           :type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'dateRange' : 'datetimerange'"
                           placeholder=""
                           size="small"
                           style="width: 100%">
-                        </el-date-picker>
+                        </my-date-picker>
                       </template>
                       <template v-else>
-                        <el-date-picker
+                        <my-date-picker
                           id="asset-box-input-parchase-date"
                           v-model="label.value[0]"
                           :type="JSON.parse(label.param).subType"
@@ -143,7 +143,7 @@
                           size="small"
                           style="width: 100%"
                           value-format="yyyy-MM-dd">
-                        </el-date-picker>
+                        </my-date-picker>
                       </template>
                     </template>
                   </template>
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
index e0c083a0c..6eae779cd 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
@@ -62,7 +62,7 @@
             <el-input v-else v-model="lockLocationInputValue" disabled size="small"></el-input>
           </el-form-item>
           <el-form-item :label="$t('asset.purchaseDate')" prop="purchaseDate">
-            <el-date-picker
+            <my-date-picker
               id="asset-box-input-parchase-date"
               v-model="editAsset.purchaseDate"
               placeholder=""
@@ -70,7 +70,7 @@
               style="width: 100%"
               type="date"
               value-format="yyyy-MM-dd">
-            </el-date-picker>
+            </my-date-picker>
           </el-form-item>
           <!-- labels -->
           <div class="form__sub-title">{{$t('overall.labels')}}</div>
@@ -128,17 +128,17 @@
                   </template>
                   <template v-else>
                     <template v-if="label.interval">
-                      <el-date-picker
+                      <my-date-picker
                         id="asset-box-input-purchase-date"
                         v-model="label.value[0]"
                         :type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'dateRange' : 'datetimerange'"
                         placeholder=""
                         size="small"
                         style="width: 100%">
-                      </el-date-picker>
+                      </my-date-picker>
                     </template>
                     <template v-else>
-                      <el-date-picker
+                      <my-date-picker
                         id="asset-box-input-parchase-date"
                         v-model="label.value[0]"
                         :type="JSON.parse(label.param).subType"
@@ -146,7 +146,7 @@
                         size="small"
                         style="width: 100%"
                         value-format="yyyy-MM-dd">
-                      </el-date-picker>
+                      </my-date-picker>
                     </template>
                   </template>
                 </template>
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index 9696a9f79..8c4a9b348 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -66,7 +66,7 @@
         </el-form-item>
         <el-form-item :label="$t('asset.purchaseDate')">
           <div class="select-style">
-            <el-date-picker
+            <my-date-picker
               id="asset-box-input-parchase-date"
               size="small"
               v-model="editAsset.purchaseDate"
@@ -74,7 +74,7 @@
               type="date"
               style="width: 100%"
               placeholder="">
-            </el-date-picker>
+            </my-date-picker>
           </div>
         </el-form-item>
         <el-form-item :label="$t('asset.location')" class="required-marker" prop="locationInfo" :rules="[{validator:locationValidator, trigger:'blur'}]">
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index 465c57692..5b17088c3 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -4,7 +4,7 @@
       <!-- begin--标题-->
       <div class="right-box-title">
       <span v-if="optionType === 'edit'">
-       {{ $t("project.module.editEndpoint")}}
+       {{ $t("project.module.editEndpoint")}} {{editEndpoint.id}}
       </span>
         <span v-if="optionType === 'batch'">
        {{ $t("project.module.batchEndpoint")}}
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index 07d584fbf..7c53b8f8c 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -162,7 +162,7 @@
                             </ul>
                           </div>
                         </div>
-                        <el-date-picker
+                        <my-date-picker
                                 v-model="timeFrame"
                                 type="datetimerange"
                                 range-separator="To"
@@ -172,7 +172,7 @@
                                 :class="dataBackG?'':'dataBackG'"
                                 v-if="ind==sreach_num&&val.id==7"
                         >
-                        </el-date-picker>
+                        </my-date-picker>
                     </li>
 <!-- 最开始的input框-->
                     <li class="select_input" v-if="change_sreach_show">
diff --git a/nezha-fronted/src/components/common/table/nzDataList.vue b/nezha-fronted/src/components/common/table/nzDataList.vue
index d8627fc34..d467372c4 100644
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -36,7 +36,7 @@
       <transition name="el-zoom-in-top">
         <element-set
           v-if="tools.showCustomTableTitle"
-          :tableId="tableId"
+          :tableId="$parent.tableId"
           ref="customTableTitle"
           :custom-table-title="customTableTitle"
           :original-table-title="tableTitle"
@@ -88,10 +88,6 @@ export default {
     searchMsg: {
       type: Object
     },
-    tableId: {
-      type: String,
-      default: ''
-    },
     hasSearch: {
       type: Boolean,
       default: false
diff --git a/nezha-fronted/src/components/common/table/settings/agentTable.vue b/nezha-fronted/src/components/common/table/settings/agentTable.vue
index afc83aaef..786e35d36 100644
--- a/nezha-fronted/src/components/common/table/settings/agentTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/agentTable.vue
@@ -42,7 +42,7 @@
         <span v-else-if="item.prop === 'status'">
           <el-popover :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))" placement="right" trigger="hover" width="200">
             <div slot="reference" style="width: 20px">
-              <div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
+              <div :class="{'active-icon green-bg':scope.row[item.prop] == '1','active-icon red-bg':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
             </div>
           </el-popover>
         </span>
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index 2812a1170..e7cf8501e 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -72,13 +72,13 @@
             </div>
             <div slot="reference" style="width: 100px">
               <div v-if="scope.row[item.prop]===0">
-                <div class="active-icon red inline-block"></div> down
+                <div class="active-icon red-bg inline-block"></div> down
               </div>
               <div v-else-if="scope.row[item.prop]===1">
-                <div class="active-icon green inline-block"></div> up
+                <div class="active-icon green-bg inline-block"></div> up
               </div>
               <div v-else-if="scope.row[item.prop]">
-                <div class="active-icon gray inline-block"></div> suspended
+                <div class="active-icon gray-bg inline-block"></div> suspended
               </div>
             </div>
           </el-popover>
@@ -183,16 +183,16 @@ export default {
       let str = ''
       arr.forEach((item, index) => {
         if (index === 0) {
-          str += `<div>DC <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+          str += `<div>DC <div class="active-icon inline-block ${item == '0' ? 'red-bg' : 'green-bg'}"></div></div>`
         }
         if (index === 1) {
-          str += `<div>ASSET <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+          str += `<div>ASSET <div class="active-icon inline-block ${item == '0' ? 'red-bg' : 'green-bg'}"></div></div>`
         }
         if (index === 2) {
-          str += `<div>ENDPOINT <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+          str += `<div>ENDPOINT <div class="active-icon inline-block ${item == '0' ? 'red-bg' : 'green-bg'}"></div></div>`
         }
         if (index === 3) {
-          str += `<div>PROMETHEUS <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+          str += `<div>PROMETHEUS <div class="active-icon inline-block ${item == '0' ? 'red-bg' : 'green-bg'}"></div></div>`
         }
       })
       return str
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index ded9bfd79..28347788e 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -88,13 +88,13 @@
 </style>
 <template>
   <div id="panel-calender" :class="{'calendar--small': size === 'small'}" class="calendar">
-    <el-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+    <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
                     format="yyyy/MM/dd HH:mm:ss" @change="dateChange" v-model="searchTime" type="datetimerange"
                     popper-class="panel-time-picker-popper"
                     :range-separator="$t('dashboard.panel.to')"
                     :start-placeholder="$t('dashboard.panel.startTime')"
                     :end-placeholder="$t('dashboard.panel.endTime')" align="right">
-    </el-date-picker>
+    </my-date-picker>
     <!--
     <button type="button" style="border-radius: 1px 1px 1px 1px" @click="right()" v-show="isCustom"
             class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-right-button" >
@@ -335,6 +335,8 @@ export default {
           } else {
             this.isCustom = true
             this.$refs.calendar.focus()
+            this.$refs.calendar.pickerVisible = true
+            console.log(this.$refs.calendar)
           }
         } else {
           this.isCustom = false
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 7cf111205..54e7b816f 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -5,25 +5,21 @@
     </el-breadcrumb>
     <div class="header-menu">
       <el-dropdown>
-        <div class="header-menu&#45;&#45;item"><i class="nz-icon nz-icon-more-app"></i></div>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item v-for="(item, index) in linkData" :key="index" :index="'0-' + index">
-            <span class="link-title"><a :href='item.url' :title="item.name" rel="noopener norefferrer" target="_blank">{{item.name}}</a></span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
+        <div class="header-menu__item"><i class="nz-icon nz-icon-more-app"></i></div>
+        <el-dropdown-menu></el-dropdown-menu>
       </el-dropdown>
       <el-dropdown>
-        <el-dropdown-menu slot="dropdown"></el-dropdown-menu>
+        <el-dropdown-menu></el-dropdown-menu>
         <div id="header-open-cli" @click="cli">
-          <div class="header-menu&#45;&#45;item"><i class="nz-icon nz-icon-terminal"></i></div>
+          <div class="header-menu__item"><i class="nz-icon nz-icon-terminal"></i></div>
           <span v-show="$store.state.consoleCount>0" class="right-tip">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</span>
         </div>
       </el-dropdown>
       <el-dropdown>
-        <div class="header-menu&#45;&#45;item"><i class="nz-icon nz-icon-create-square"></i></div>
+        <div class="header-menu__item"><i class="nz-icon nz-icon-create-square"></i></div>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item v-for="(item, createIndex) in createMenu" :key="createIndex" v-has="item.permission" :index="`${createIndex}`">
-            <div :id="'create-box-'+createIndex" @click="createBox(item)">
+            <div :id="'create-box-'+createIndex">
               <span>{{item.label}}</span>
             </div>
           </el-dropdown-item>
@@ -38,10 +34,10 @@
         </div>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
-            <div id="header-to-english" :style="language=='en'?'color:#f90':''" @click="changeLocal('en')"><i class="nz-icon nz-icon-lang-en"></i>English</div>
+            <div id="header-to-english" :style="language === 'en'?'color:#f90':''" @click="changeLocal('en')"><i class="nz-icon nz-icon-lang-en"></i>English</div>
           </el-dropdown-item>
           <el-dropdown-item>
-            <div id="header-to-chinese" :style="language=='cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>中文</div>
+            <div id="header-to-chinese" :style="language === 'cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>中文</div>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -57,38 +53,18 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-    <transition name="right-box">
-      <project-box v-if="rightBox.project.show" ref="projectBox" :project="editProject" @close="closeProjectRightBox"></project-box>
-    </transition>
-    <transition name="right-box">
-      <module-box v-if="rightBox.module.show" ref="moduleBox" :currentProject="currentProject" :module="editModule" @close="closeModuleRightBox"></module-box>
-    </transition>
-    <transition name="right-box">
-      <add-endpoint-box v-if="rightBox.endpoint.show" ref="addEndpointBox" :currentModule="currentModule" :currentProject="currentProject" @close="closeEndpointRightBox"></add-endpoint-box>
-    </transition>
-    <transition name="right-box">
-      <asset-box v-if="rightBox.asset.show" ref="assetAddUnit" :asset="editAsset" @close="closeAssetRightBox"></asset-box>
-    </transition>
-    <transition name="right-box">
-      <alert-config-box v-if="rightBox.alertRule.show" ref="alertConfigBox" :alert-rule="editAlertRule" @close="closeAlertRuleRightBox"></alert-config-box>
-    </transition>
-    <transition name="right-box">
-      <dc-box v-if="rightBox.dc.show" :dc="dc" :user-data="userData" @close="closeDcBox" @reload="getAssetData"></dc-box>
-    </transition>
     <change-password :cur-user="username" :show-dialog="showChangePin" @click="showPinDialog" @dialogClosed="dialogClosed"></change-password>
   </div>
 </template>
 
 <script>
 import bus from '../../libs/bus'
-import dcBox from '../common/rightBox/dcBox' // dc弹框
 import { mapActions } from 'vuex'
 import changePin from '../page/config/changePin'
 export default {
   name: 'Header',
   components: {
     'change-password': changePin,
-    'dc-box': dcBox
   },
   data () {
     return {
@@ -96,81 +72,6 @@ export default {
       language: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en',
 
       // 顶部菜单相关
-      /* activeIndex: '', */
-      activeItemIndex: '',
-      activeItemIndexes: [],
-      hoverItemIndex: '',
-      dc: {
-        id: '',
-        name: '',
-        location: '',
-        tel: '',
-        principal: '',
-        area: {
-          id: 0,
-          name: ''
-        }
-      },
-      userData: [],
-      assetData: [], // 顶部菜单asset的下拉内容
-
-      // add侧滑相关
-      rightBox: {
-        project: { show: false },
-        module: { show: false },
-        endpoint: { show: false },
-        asset: { show: false },
-        alertRule: { show: false },
-        dc: { show: false }
-      },
-      projectData: [], // 顶部菜单project列表中的数据
-      editProject: { id: '', name: '', remark: '' }, // 新增/编辑的project
-      currentProject: { id: '', name: '', remark: '' }, // module/endpoint弹框用来回显project
-      editModule: { type: 'http', name: '', project: {}, port: 9100, path: '', param: '', paramObj: [], labelModule: [], labels: '' }, // 新增/编辑的module
-      currentModule: { id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], labels: '', labelModule: [] }, // endpoint弹框用来回显module，此处固定为空对象
-      editEndpoint: { // 新增/编辑的endpoint
-        id: '',
-        host: '',
-        port: '',
-        param: '',
-        path: '',
-        asset: { id: '', name: '', host: '' },
-        project: { id: '', name: '' },
-        module: { id: '', name: '', param: '', paramObj: {}, projectId: '', labelModule: [], labels: '' },
-        moduleId: '',
-        assetId: '',
-        labelModule: []
-      },
-      editAsset: {
-        id: '',
-        sn: '',
-        host: '',
-        state: 1,
-        purchaseDate: '',
-        idcId: '',
-        cabinetId: '',
-        modelId: '',
-        model: { type: { code: '' } },
-        assetType: '',
-        impi: {
-          host: '',
-          port: ''
-        },
-        tags: [],
-        accounts: []
-      },
-      editAlertRule: {
-        id: '',
-        alertName: '',
-        linkObject: { id: '', name: '' },
-        expr: '',
-        unit: 2,
-        operator: '>',
-        last: 60,
-        severity: 'P2',
-        summary: '',
-        description: ''
-      },
       createMenu: [ // 新增按钮内容
         {
           label: this.$t('project.project.project'),
@@ -217,9 +118,6 @@ export default {
        * @param parentMenu 菜单大类
        * */
     jumpTo (route) {
-      if (route != 'asset') {
-        this.activeItemIndexes = []
-      }
       this.$router.push({
         path: route,
         query: {
@@ -227,88 +125,6 @@ export default {
         }
       })
     },
-    getLinkData () {
-      /* this.$get('link').then(response => {
-        this.$store.commit('setLinkData', response.data)
-      }) */
-    },
-    createBox (item) {
-      if (item.type == 1) {
-        this.rightBox.project.show = true
-        this.editProject = { id: '', name: '', remark: '' }
-      } else if (item.type == 2) {
-        this.rightBox.module.show = true
-        this.editModule = {
-          name: '',
-          project: {},
-          port: 9100,
-          path: '',
-          param: '',
-          labels: '',
-          type: 'http',
-          paramObj: [],
-          snmpParam: '',
-          labelModule: [],
-          // snmp setting 下划线命名是因为业务需求
-          walk: [],
-          version: 2, // 2/3
-          max_repetitions: 25,
-          retries: 3,
-          timeout: 10, // s
-          community: 'public',
-          username: '',
-          security_level: 'noAuthNoPriv', // noAuthNoPriv/authNoPriv/authPriv
-          pin: '',
-          auth_protocol: 'MD5', // MD5/SHA
-          priv_protocol: 'DES', // DES/AES
-          priv_pin: '',
-          context_name: ''
-        }
-      } else if (item.type == 3) {
-        this.rightBox.endpoint.show = true
-      } else if (item.type == 4) {
-        this.rightBox.asset.show = true
-      } else if (item.type == 5) {
-        this.rightBox.alertRule.show = true
-      } else if (item.type == 6) {
-        this.rightBox.dc.show = true
-      }
-    },
-    jumpToAsset (dc) {
-      if (dc) {
-        this.activeItemIndex = dc.id
-        this.$store.commit('setCurrentDc', dc.id)
-        bus.$emit('header-dc-change', dc.id) // 发送给leftMenu，顶部dc条件改变了
-      } else {
-        this.activeItemIndex = ''
-        this.$store.commit('setCurrentDc', '')
-        bus.$emit('clear-asset-filter') // 清除leftMenu左侧菜单过滤条件
-      }
-      this.jumpTo('/asset')
-    },
-    jumpToProject (p) {
-      if (!this.hasButton('project_view')) {
-        return
-      }
-      this.currentProject = p
-      if (p.id !== this.$store.state.currentProject.id) {
-        bus.$emit('project-page-type', 'project')
-      }
-      this.$store.commit('currentProjectChange', p)
-      this.activeItemIndex = p.id
-      this.jumpTo('/project')
-    },
-    getAssetData () {
-      this.$get('idc', { pageSize: -1 }).then(response => {
-        if (response.code == 200) {
-          this.assetData = response.data.list
-          this.assetData.forEach(item => {
-            this.$set(item, item.name, false)
-          })
-          this.$store.commit('setIdcArr', this.assetData)
-        }
-      })
-    },
     changeLocal (lang) {
       if (lang != localStorage.getItem('nz-language')) {
         localStorage.setItem('nz-language', lang)
@@ -316,85 +132,11 @@ export default {
         window.location.reload()
       }
     },
-    getProjectList () {
-      this.$get('monitor/project', { pageSize: -1 }).then(response => {
-        if (response.code == 200) {
-          this.projectData = response.data.list
-          let flag = false
-          // 如果currentProject不在新取到的数据里，说明它被删了
-          for (let i = 0; i < this.projectData.length; i++) {
-            if (this.projectData[i].id == this.currentProject.id) {
-              flag = true
-              break
-            }
-          }
-          if (!flag && this.projectData.length > 0) {
-            this.currentProject = this.projectData[0]
-            this.activeItemIndex = this.currentProject.id
-            this.$store.commit('currentProjectChange', this.currentProject)
-          }
-        }
-      })
-    },
-    getUserData () {
-      return new Promise(resolve => {
-        this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
-          if (response.code === 200) {
-            this.userData = response.data.list
-          }
-          resolve()
-        })
-      })
-    },
-    closeProjectRightBox (refresh) {
-      this.rightBox.project.show = false
-      if (refresh) {
-        this.getProjectList()
-        bus.$emit('project-list-change')
-      }
-    },
-    closeModuleRightBox (refresh) {
-      this.rightBox.module.show = false
-      if (refresh) {
-        bus.$emit('module-list-change')
-      }
-    },
-    closeEndpointRightBox (refresh) {
-      this.rightBox.endpoint.show = false
-      if (refresh) {
-        bus.$emit('endpoint-list-change')
-      }
-    },
-    closeAssetRightBox (refresh) {
-      this.rightBox.asset.show = false
-      if (refresh) {
-        bus.$emit('asset-list-change')
-      }
-    },
-    closeAlertRuleRightBox (refresh) {
-      this.rightBox.alertRule.show = false
-      if (refresh) {
-        bus.$emit('alert-rule-list-change')
-      }
-    },
-    closeDcBox (refresh) {
-      this.rightBox.dc.show = false
-      if (refresh) {
-        this.getAssetData()
-        bus.$emit('dc-list-change')
-      }
-    },
-    toEditProject (p) {
-      this.editProject = Object.assign({}, p)
-      this.rightBox.project.show = true
-    },
     logout () {
       this.$get('logout').then(() => {
         this.logoutSuccess()
         document.location.href = '/'
       })
-
-      // this.jumpTo('/login');
     },
     refreshLang () {
       this.language = localStorage.getItem('nz-language')
@@ -418,13 +160,6 @@ export default {
         this.username = sessionStorage.getItem('nz-username')
         this.refreshLang()
       })
-      bus.$on('dc-list-change', () => { // dc.vue增删改dc时刷新顶部菜单dc列表
-        this.getAssetData()
-      })
-      bus.$on('current-project-change', project => {
-        this.currentProject = project
-        this.activeItemIndex = project.id
-      })
       if (window.history && window.history.pushState) {
         history.pushState(null, null, document.URL)
         window.addEventListener('popstate', this.cancel, false)
@@ -435,45 +170,12 @@ export default {
     this.$i18n.locale = this.language
     if (sessionStorage.getItem('nz-token')) {
       this.initEvent()
-      this.getAssetData()
-      this.getUserData()
-      this.getProjectList()
-      this.getLinkData()
     }
-    // 刷新后有高亮
-    /* let activePath = this.$route.path.slice(1);
-      this.activeIndex = activePath; */
   },
   computed: {
-    linkData () {
-      return this.$store.getters.getLinkData
-    },
     route () {
       return this.$route.path
     },
-    overViewProject () {
-      return this.$store.getters.getOverViewProject
-    },
-    menuIsActive () {
-      return function (menu, isParent) {
-        if (isParent) {
-          const isCurrent = menu.children.some(sub => {
-            return sub.route == this.route
-          })
-          if (isCurrent) {
-            return 'menu-active'
-          } else {
-            return ''
-          }
-        } else {
-          if (menu.route == this.route) {
-            return 'menu-item-active'
-          } else {
-            return ''
-          }
-        }
-      }
-    },
     breadcrumb () {
       const vm = this
       const menuList = this.$store.getters.menuList
@@ -495,17 +197,8 @@ export default {
       return breadcrumb
     }
   },
-  watch: {
-    overViewProject (n) {
-      if (n) {
-        this.jumpToProject(n)
-      }
-    }
-  },
   beforeDestroy () {
     bus.$off('login')
-    bus.$off('dc-list-change')
-    bus.$off('current-project-change')
   },
   destroyed () {
     window.removeEventListener('popstate', this.cancel, false)
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 73a620031..2543f874f 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -4,7 +4,6 @@
       ref="dataList"
       :api="url"
       :custom-table-title.sync="tools.customTableTitle"
-      :from="fromRoute.asset"
       :has-search="true"
       :layout="['searchInput', 'elementSet', 'clickSearch']"
       :search-msg="searchMsg">
diff --git a/nezha-fronted/src/components/page/asset/components/assetTagEx.vue b/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
index a9fef8da8..879a7969a 100644
--- a/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
+++ b/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
@@ -46,7 +46,7 @@
     </div>
     <div v-else-if="type==='datetime'">
       <div v-if="param.subType==='date'">
-        <el-date-picker
+        <my-date-picker
           size="small"
           :type="param.interval?'daterange':'date'"
           :range-separator="$t('dashboard.panel.to')"
@@ -54,7 +54,7 @@
           :start-placeholder="$t('dashboard.panel.startTime')"
           :end-placeholder="$t('dashboard.panel.endTime')"
         >
-        </el-date-picker>
+        </my-date-picker>
       </div>
       <div v-if="param.subType==='time'">
         <el-time-picker
@@ -68,14 +68,14 @@
         </el-time-picker>
       </div>
       <div v-if="param.subType==='datetime'">
-        <el-date-picker
+        <my-date-picker
           size="small"
           :type="param.interval?'datetimerange':'datetime'"
           :range-separator="$t('dashboard.panel.to')"
           :placeholder="$t('alert.silence.selectTime')"
           :start-placeholder="$t('dashboard.panel.startTime')"
           :end-placeholder="$t('dashboard.panel.endTime')">
-        </el-date-picker>
+        </my-date-picker>
       </div>
     </div>
     <div v-else-if="type==='email'" :class="emailError?'emailError':''">
diff --git a/nezha-fronted/src/components/page/config/about.vue b/nezha-fronted/src/components/page/config/about.vue
index 15cbe2b21..800e4ad75 100644
--- a/nezha-fronted/src/components/page/config/about.vue
+++ b/nezha-fronted/src/components/page/config/about.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="about">
     <div class="app-header">
-      <div class="header-logo"><img width="70" height="70" src="../../../assets/img/logo1-2.png"></div>
+      <div class="header-logo"><img width="88" height="88" src="../../../assets/img/logo1-2.png"></div>
       <div class="header-title">
         <div class="app-name">{{version.nezha.name}}</div>
         <div class="app-version"><span class="about-label">{{$t("overall.version")}}&nbsp;&nbsp;&nbsp;</span><span>{{version.nezha.version}}</span></div>
@@ -49,6 +49,8 @@ export default {
     justify-content: center;
     height: 100%;
     background-color: white;
+    border: 10px solid #eee;
+    box-sizing: border-box;
 
     .about-label {
       color: #999;
@@ -56,7 +58,7 @@ export default {
 
     .app-header {
       display: flex;
-      min-width: 325px;
+      min-width: 360px;
 
       .header-logo {
         font-size: 0;
@@ -72,24 +74,30 @@ export default {
 
         .app-name {
           font-weight: bold;
-          font-size: 18px;
           line-height: 50px;
+          font-family: Roboto-Bold;
+          font-size: 20px;
+          color: #333333;
+          font-weight: 700;
         }
 
         .app-version {
-          font-size: 12px;
+          font-family: Roboto-Regular;
+          font-size: 14px;
+          color: #333333;
+          font-weight: 400;
         }
       }
     }
 
     .app-component {
-      width: 325px;
+      width: 360px;
       margin-top: 35px;
 
       .component-title {
         color: #999;
         height: 30px;
-        font-size: 12px;
+        font-size: 14px;
         line-height: 30px;
         border-bottom: 1px solid #999;
       }
@@ -103,6 +111,9 @@ export default {
         display: flex;
         color: #333;
         font-size: 14px;
+        font-family: Roboto-Regular;
+        font-size: 16px;
+        font-weight: 400;
         justify-content: space-between;
       }
     }
diff --git a/nezha-fronted/src/components/page/config/setup.vue b/nezha-fronted/src/components/page/config/setup.vue
index 77f6f29c2..355d9eeb6 100644
--- a/nezha-fronted/src/components/page/config/setup.vue
+++ b/nezha-fronted/src/components/page/config/setup.vue
@@ -1,12 +1,34 @@
 <template>
   <div class="setup">
     <div class="logo-header">
-     <img height="100px" src="../../../assets/img/logo-big.png">
+      <img height="30px" style="vertical-align: bottom; margin-top: 10px" src="../../../assets/img/logo1-2.png"/>
+      <span class="logo-header-text">One-stop monitoring system</span>
+      <div class="language-select">
+      <el-dropdown :hide-on-click="false" >
+        <span class="el-dropdown-link">
+          <i class="nz-icon nz-icon-language-change" style="color: #e6eaed; font-size: 14px"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown" >
+          <el-dropdown-item>
+            <div :style="language == 'en' ? 'color:#f90' : ''" @click="changeLocal('en')" id="header-to-english">
+              <i class="nz-icon nz-icon-lang-en"></i>
+              English
+            </div>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <div :style="language == 'cn' ? 'color:#f90' : ''" @click="changeLocal('cn')" id="header-to-chinese">
+              <i class="nz-icon nz-icon-lang-zh"></i>
+              中文
+            </div>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      </div>
     </div>
-    <div style="display: flex">
+    <div style="display: flex" class="flex-box">
       <div class="step-box">
         <div class="step-inner">
-          <el-steps direction="vertical" :active="step" finish-status="success">
+          <el-steps direction="vertical" space=0 :active="step" finish-status="success">
             <el-step :title="$t('setup.step0')" ></el-step>
             <el-step :title="$t('setup.step1')" ></el-step>
             <el-step :title="$t('setup.step2')"></el-step>
@@ -15,108 +37,124 @@
         </div>
       </div>
       <div class="setup-box">
-        <div style="position: relative; height: 50px">
-          <el-menu mode="horizontal" class="language-select">
-            <el-submenu index="1">
-              <template slot="title">{{$t('setup.language')}}</template>
-              <el-menu-item index="1">
-                <div :style="language=='en'?'color:#f90':''" @click="changeLocal('en')" id="header-to-english">English</div>
-              </el-menu-item>
-              <el-menu-item index="2">
-                <div :style="language=='cn'?'color:#f90':''" @click="changeLocal('cn')" id="header-to-chinese">中文</div>
-              </el-menu-item>
-            </el-submenu>
-          </el-menu>
-        </div>
-        <div class="setup-inner">
+        <div class="setup-inner" >
           <template v-if="activeStep == 0">
             <div class="welcome">
               <div class="wel-header">
                 <!--Welcome to Nezha setup wizard!-->
-                {{$t('setup.welcome.header')}}
+                {{ $t("setup.welcome.header") }}
               </div>
-              <div class="content-divider"/>
+              <div class="content-divider" />
               <div class="wel-wizard">
-                <div class="wizard-header"><!--What will the wizard do for you?-->{{$t('setup.welcome.guid')}}</div>
+                <div class="wizard-header">
+                  <!--What will the wizard do for you?-->{{
+                    $t("setup.welcome.guid")
+                  }}
+                </div>
                 <ul>
-                  <li><!--Create a basic, single site configuration-->{{$t('setup.welcome.guid_1')}}</li>
-                  <li><!--Tries to find problems within your Database and Redis setup-->{{$t('setup.welcome.guid_2')}}</li>
+                  <li>
+                    <!--Create a basic, single site configuration-->{{
+                      $t("setup.welcome.guid_1")
+                    }}
+                  </li>
+                  <li>
+                    <!--Tries to find problems within your Database and Redis setup-->{{
+                      $t("setup.welcome.guid_2")
+                    }}
+                  </li>
                 </ul>
               </div>
-              <div class="content-divider"/>
+              <div class="content-divider" />
               <div class="wel-continue">
-                <div class="wizard-header"><!--To continue-->{{$t('setup.welcome.toContinue')}}:</div>
-                <div>
-                  <!--For security reasons you need to authenticate for the installation by creating the file-->{{$t('setup.welcome.creatFile')}} '/opt/nezha/nz-web/tmp/nezha.auth'.<br/><!--This can be done by executing the following command-->{{$t('setup.welcome.createFileTip')}}:
+                <div class="wizard-header">
+                  <!--To continue-->{{ $t("setup.welcome.toContinue") }}:
+                </div>
+                <div>
+                  <!--For security reasons you need to authenticate for the installation by creating the file-->{{
+                    $t("setup.welcome.creatFile")
+                  }}
+                  '/opt/nezha/nz-web/tmp/nezha.auth'.<br /><!--This can be done by executing the following command-->{{
+                    $t("setup.welcome.createFileTip")
+                  }}:
+                </div>
+                <pre>echo -n {{ validateCode }} > /opt/nezha/nz-web/tmp/nezha.auth</pre>
+                <div>
+                  <!--Click the 'Next' button when you've finished.-->{{
+                    $t("setup.welcome.next")
+                  }}
                 </div>
-                <pre>echo -n {{validateCode}} > /opt/nezha/nz-web/tmp/nezha.auth</pre>
-                <div><!--Click the 'Next' button when you've finished.-->{{$t('setup.welcome.next')}}</div>
               </div>
             </div>
           </template>
           <template v-if="activeStep == 1">
             <div class="setup-config">
-              <el-form ref="db-form" :model="database" label-width="80px" :rules="dbRules" label-position="top" size="small" style="width: 600px" :validate-on-rule-change="false">
-                <el-form-item :label="$t('setup.host')" prop="host" key="dbhost">
+              <el-form ref="db-form" :model="database" label-width="80px" :rules="dbRules" label-position="top" size="small" style="width: 600px" :validate-on-rule-change="false" >
+                <el-form-item :label="$t('setup.host')" prop="host" key="dbhost" >
                   <el-input v-model="database.host"></el-input>
                 </el-form-item>
-                <el-form-item :label="$t('setup.port')" prop="port" key="dbport">
+                <el-form-item :label="$t('setup.port')" prop="port" key="dbport" >
                   <el-input v-model="database.port"></el-input>
                 </el-form-item>
-                <el-form-item :label="$t('setup.name')" prop="name" key="dbname">
+                <el-form-item :label="$t('setup.name')" prop="name" key="dbname" >
                   <el-input v-model="database.name"></el-input>
                 </el-form-item>
-                <el-form-item :label="$t('setup.username')" prop="username" key="dbusername">
+                <el-form-item :label="$t('setup.username')" prop="username" key="dbusername" >
                   <el-input v-model="database.username"></el-input>
                 </el-form-item>
-                <el-form-item :label="$t('setup.pin')"  prop="pin" key="dbpassword">
-                  <el-input v-model="database.pin" type="password" show-password></el-input>
+                <el-form-item :label="$t('setup.pin')" prop="pin" key="dbpassword" >
+                  <el-input v-model="database.pin" type="password" show-password ></el-input>
                 </el-form-item>
               </el-form>
               <div class="setup-help">
                 <div class="help-header">
-                  {{$t('setup.database.configTitle')}}
+                  {{ $t("setup.database.configTitle") }}
                 </div>
                 <div class="help-body">
-                  {{$t('setup.database.configTip')}}
+                  {{ $t("setup.database.configTip") }}
                 </div>
               </div>
             </div>
           </template>
           <template v-if="activeStep == 2">
             <div class="setup-config">
-              <el-form ref="redis-form" :model="redis" label-width="80px" :rules="redisRules" label-position="top" size="small" style="width: 600px" :validate-on-rule-change="false">
-                <el-form-item :label="$t('setup.host')" prop="host" key="rdhost">
+              <el-form ref="redis-form" :model="redis" label-width="80px" :rules="redisRules" label-position="top" size="small" style="width: 600px" :validate-on-rule-change="false" >
+                <el-form-item :label="$t('setup.host')" prop="host" key="rdhost" >
                   <el-input v-model="redis.host"></el-input>
                 </el-form-item>
-                <el-form-item :label="$t('setup.port')" prop="port" key="rdport">
+                <el-form-item :label="$t('setup.port')" prop="port" key="rdport" >
                   <el-input v-model="redis.port"></el-input>
                 </el-form-item>
-                <el-form-item :label="$t('setup.pin')"  prop="pin" key="rdpassword">
-                  <el-input v-model="redis.pin" type="password" show-password></el-input>
+                <el-form-item :label="$t('setup.pin')" prop="pin" key="rdpassword" >
+                  <el-input v-model="redis.pin" type="password" show-password ></el-input>
                 </el-form-item>
               </el-form>
               <div class="setup-help">
                 <div class="help-header">
-                  {{$t('setup.redis.configTitle')}}
+                  {{ $t("setup.redis.configTitle") }}
                 </div>
                 <div class="help-body">
-                  {{$t('setup.redis.configTip')}}
+                  {{ $t("setup.redis.configTip") }}
                 </div>
               </div>
             </div>
           </template>
           <template v-if="activeStep == 3">
             <div class="setup-config">
-              <el-form ref="sys-form" :model="system" label-width="80px" :rules="sysRules" label-position="top" size="small" style="width: 600px" :validate-on-rule-change="false">
-                <el-form-item :label="$t('setup.username')" prop="host" key="syshost">
+              <el-form ref="sys-form" :model="system" label-width="80px" :rules="sysRules" label-position="top" size="small" style="width: 640px" :validate-on-rule-change="false" >
+                <el-form-item :label="$t('setup.username')" prop="host" key="syshost" >
                   <el-input v-model="system.username"></el-input>
                 </el-form-item>
-                <el-form-item :label="$t('setup.pin')"  prop="pin" key="syspassword">
-                  <el-input v-model="system.pin" type="password" show-password></el-input>
+                <el-form-item :label="$t('setup.pin')" prop="pin" key="syspassword" >
+                  <el-input v-model="system.pin" type="password" show-password ></el-input>
                 </el-form-item>
-                <el-form-item :label="$t('setup.alertPath')"  prop="alertPath" key="sysalertPath">
-                  <el-input v-model="system.alertPath" ></el-input>
+                <el-form-item :label="$t('setup.alertPath')" prop="alertPath" key="sysalertPath" >
+                  <el-input v-model="system.alertPath"></el-input>
+                </el-form-item>
+                <el-form-item :label="$t('setup.promentheusFederationEnabled')" prop="prometheusFederationEnabled" key="sysprometheusFederationEnabled" >
+                  <el-select v-model="system.prometheusFederationEnabled"  style="width: 100%" placeholder="Enable">
+                    <el-option label="Enable" value="1"></el-option>
+                    <el-option label="Close"  value="0"></el-option>
+                  </el-select>
                 </el-form-item>
                <!-- <el-form-item :label="$t('setup.alertPrefix')"  prop="alertPrefix" key="sysalertPrefix">
                   <el-input v-model="system.alertPrefix" ></el-input>
@@ -141,7 +179,7 @@
           </template>
           <div class="setup-bottom-btn">
 
-            <button @click="preStep" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-if="activeStep != 0">
+            <button @click="preStep" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-if="activeStep != 0" style="background-color:#fff;color:#333;border:1px solid rgba(0,0,0,0.15);">
               <span>{{$t('setup.back')}}</span>
             </button>
             <button @click="nextStep"  class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" :disabled="prevent_next" v-if="activeStep != 3" :class="{'nz-btn-disabled':prevent_next}">
@@ -170,16 +208,20 @@ export default {
       step: 0,
       activeStep: 0,
       database: {
-        host: '',
+        host: "",
         port: 3306,
-        name: 'nz',
-        username: '',
-        pin: ''
+        name: "nz",
+        username: "",
+        pin: "",
       },
       dbRules: {
         host: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: host, trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+          { validator: host, trigger: "blur" },
         ],
         port: [{ validator: port, trigger: 'blur' }],
         name: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
@@ -187,14 +229,18 @@ export default {
         pin: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
       },
       redis: {
-        host: '',
+        host: "",
         port: 6379,
-        pin: ''
+        pin: "",
       },
       redisRules: {
         host: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: host, trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+          { validator: host, trigger: "blur" },
         ],
         port: [{ validator: port, trigger: 'blur' }]
       },
@@ -204,13 +250,15 @@ export default {
         alertPath: '',
         alertPrefix: '',
         haMode: 1,
-        haVip: ''
+        haVip: '',
+        prometheusFederationEnabled:'',
       },
       sysRules: {
         username: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
         pin: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
         alertPath: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
-        haVip: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+        haVip: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        prometheusFederationEnabled: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
       },
       reloadTime: 5000,
       reloadTimeout: null,
@@ -421,113 +469,197 @@ export default {
 </script>
 
 <style scoped>
-  .setup{
-    /*display: flex;*/
-    width: 1250px;
-    height: 100%;
-    margin: 0 auto;
-  }
-  .logo-header{
-    padding-left: 20px;
-    width: 100%;
-    height: 100px;
-  }
-  .language-select{
-    position: absolute;
-    right: 20px;
-    height: 50px;
-    z-index: 2;
-  }
-  .setup .step-box{
-    width: 200px;
-    height: 100%;
-  }
-  .setup .setup-box{
-    width: calc(100% - 200px);
-    height: 100%;
-  }
-  .step-box .step-inner{
-    height: 600px;
-    padding:20px;
-  }
-  .setup-box .setup-inner{
-    position: relative;
-    width: calc(100% - 42px);
-    height: 600px;
-    padding: 20px;
-    border: 1px solid #EEEEEE;
-  }
-  .setup-inner .setup-config{
-    position: relative;
-  }
-  .setup-inner .setup-help{
-    width: calc(100% - 640px);
-    height: 500px;
-    position: absolute;
-    top: 20px;
-    right: 0px;
-    border-left: 1px solid #ddd;
-    padding-left: 10px;
-  }
-  .setup .setup-help .help-header{
-     font-weight: 800;
-     font-size: 30px;
-   }
-  .setup .setup-help .help-body{
-    line-height: 35px;
-    font-size: 16px;
-  }
-  .welcome{
-    line-height: 35px;
-    font-size: 16px;
-  }
-  .welcome .wel-header{
-    font-weight: 800;
-    font-size: 30px;
+.setup {
+  /*display: flex;*/
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+.logo-header {
+  padding-left: 20px;
+  width: 100%;
+  height: 50px;
+  background-color: #202f3f;
+  position: relative;
+}
+.logo-header-text {
+  font-family: Verdand;
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: 0;
+  color: #dedede;
+}
+.language-select {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  z-index: 2;
+  margin-top: 15px;
+  margin-right: 20px;
+}
+.flex-box{
+  height: calc(100% - 50px);
+}
+.setup .step-box {
+  width: 240px;
+  height: 100%;
+}
+.setup .setup-box {
+  width: calc(100% - 240px);
+  height: 100%;
+}
+.step-box .step-inner {
+  height: 100%;
+  padding: 20px;
+  padding-left: 0;
+  box-sizing: border-box;
+}
 
-  }
- .wizard-header{
-    font-weight: 600;
-    font-size: 20px;
-  }
-  .welcome ul li{
-    list-style: inside !important;
-  }
-  .welcome pre{
-    border: 1px solid #ddd;
-    border-left: 4px solid #e6522c;
-    border-radius: 0;
-    font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-    background-color: #f5f5f5;
-    color: #333;
-    padding: 15px;
-  }
-  .welcome .content-divider{
-    height: 1px;
-    width: 100%;
-    border-bottom: 2px solid #C0C4CC;
-    margin: 5px 0px;
-  }
-  .setup-bottom-btn{
-    width: 100%;
-    height: 49px;
-    position: absolute;
-    bottom: 0;
-    right: 20px;
-    padding-top: 20px;
-    text-align: right;
-  }
+.setup-box .setup-inner {
+  position: relative;
+  height: 100%;
+  padding: 40px 30px 0 30px;
+  border: 10px solid #eeeeee;
+  box-sizing: border-box;
+}
+.setup-inner .setup-config {
+  position: relative;
+  height: 100%;
+}
+.setup-inner .setup-help {
+  width: calc(100% - 710px);;
+  height:calc(100% - 50px);
+  position: absolute;
+  top: 20px;
+  right: 0px;
+  border-left: 1px solid #E7EAED;
+  padding-left: 30px;
+}
+.setup .setup-help .help-header {
+  font-family: Roboto-Medium;
+  font-size: 22px;
+  color: #333333;
+  font-weight: 500;
+  margin-bottom: 20px;
+}
+.setup .setup-help .help-body {
+  font-family: Roboto-Regular;
+  font-size: 16px;
+  color: #333333;
+  line-height: 28px;
+  font-weight: 400;
+}
+.welcome {
+  line-height: 35px;
+  font-size: 16px;
+}
+.welcome .wel-header {
+  font-family: Roboto-Medium;
+  font-size: 26px;
+  color: #333333;
+  font-weight: 500;
+}
+.wizard-header {
+  font-family: Roboto-Bold;
+  font-size: 14px;
+  color: #333333;
+  font-weight: 700;
+}
+.welcome ul li {
+  list-style: inside !important;
+  font-family: Roboto-Regular;
+  font-size: 14px;
+  color: #333333;
+  font-weight: 400;
+}
+.welcome pre {
+  border: 1px solid #eae7ed;
+  border-left: 4px solid #fa901c;
+  border-radius: 0;
+  font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
+  font-size: 14px;
+  background-color: #f9f9f9;
+  color: #333;
+  padding: 15px;
+  height: 48px;
+  line-height: 16px;
+  box-sizing: border-box;
+}
+.welcome .content-divider {
+  height: 1px;
+  width: 100%;
+  border-bottom: 1px solid #eae7ed;
+  margin: 5px 0px;
+}
+.setup-bottom-btn {
+  width: 100%;
+  height: 49px;
+  position: absolute;
+  bottom: 0;
+  right: 20px;
+  padding-top: 20px;
+  text-align: right;
+}
+/* 步骤条样式 */
+/deep/ .el-step{
+  height: 46px ;
+  /* height: 46px !important; */
+}
+/deep/ .el-step .el-step__head{
+  /* display: none !important; */
+  display: none ;
+}
+ /deep/ .el-step .el-step__main{
+  padding-left: 20px ;
+  height: 46px ;
+  line-height: 46px;
+  /* padding-left: 20px !important;
+  height: 46px !important; */
+} 
+/deep/ .el-step .el-step__main .el-step__title{
+  padding: 0 0 0 20px  ;
+  font-family: Roboto-Medium;
+  font-size: 16px;
+  color: #999;
+  letter-spacing: 0;
+  font-weight: 400;
+  padding-left: 20px;
+  margin-top: 11px;
+  /* padding: 0 0 0 20px  !important; */
+}
+/deep/ .el-step .el-step__main .el-step__title.is-process{
+  border-left:2px solid #fa901c ;
+  color: #333333;
+  font-weight: 500;
+  padding-left: 18px;
+  /* border-left:2px solid #fa901c !important; */
+  /* padding-left: 18px !important; */
+}
+/deep/ .el-step .el-step__main .el-step__title.is-success{
+  color: #333333;
+  font-weight: 500;
+}
+/deep/ .el-step .el-step__main .el-step__description{
+  /* display: none !important; */
+  display: none ;
+}
+.el-select-dropdown__item.selected{
+  font-weight: 400;
+}
+/* .el-select-dropdown__item.hover{
+  font-weight: 700;
+} */
 </style>
 <style>
-  .setup .el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
-    border-bottom: unset !important;
-    color: #303133;
-    background-color:transparent;
-  }
-  .language-select .el-submenu__title{
-    height: 50px !important;
-  }
-  .language-select .el-submenu{
-    height: 50px !important;
-  }
+.setup .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  border-bottom: unset !important;
+  color: #303133;
+  background-color: transparent;
+}
+.language-select .el-submenu__title {
+  height: 50px !important;
+}
+.language-select .el-submenu {
+  height: 50px !important;
+}
 </style>
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index fb044a14b..1c6e46e52 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -250,6 +250,7 @@ import draggable from 'vuedraggable'
 import notifyMethod from './system/notifyMethodTab'
 import linkTab from './system/linkTab'
 import apiKeyTab from './system/apiKeyTab'
+import moment from 'moment-timezone'
 export default {
   name: 'system',
   components: { draggable, latlngPicker, notifyMethod, linkTab, apiKeyTab },
@@ -459,6 +460,10 @@ export default {
             if (response.code == 200) {
               this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
               // this.resetForm(formName);
+              if (type == 'basic') {
+                localStorage.setItem('nz-sys-timezone', param.timezone)
+                localStorage.setItem('timezoneOffset', moment.tz(param.timezone).format('Z'))
+              }
               setTimeout(() => {
                 this.querySetInfo(type)
               }, 200)
diff --git a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
index d33dad418..872ec2ebc 100644
--- a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
+++ b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
@@ -50,7 +50,7 @@
             </template>
             <template v-if="item.prop == 'expireAt'">
 <!--              <el-popover :content="rules.expireAt.message" placement="top" trigger="manual" v-model="rules.expireAt.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.expireAt)">-->
-                <el-date-picker
+                <my-date-picker
                   slot="reference"
                   style="width: 100%;"
                   v-model="scope.row[item.prop]"
@@ -60,7 +60,7 @@
                   type="datetime"
                   :picker-options="pickerOptions"
                   :placeholder="$t('el.datepicker.selectTime')">
-                </el-date-picker>
+                </my-date-picker>
 <!--              </el-popover>-->
             </template>
           </template>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 2ed72a03a..199e58ebd 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -10,7 +10,7 @@
               <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric
                 &nbsp;<i class="nz-icon nz-icon-arrow-down"></i></el-button>
               <el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-model="cascaderValue" v-clickoutside="closeDropdown"
-                                 slot="dropdown" ref="metricSelector" :props="{emitPath:false,}"
+                                 slot="dropdown" ref="metricSelector" :props="{emitPath:false,}" :loading="loading"
                                  :options="metricOptions" @change="metricChange">
 
                 <template slot-scope="{ node, data }">
@@ -178,6 +178,10 @@ export default {
     typeContentLoading: {
       type: Boolean,
       default: false
+    },
+    fromFatherData: {
+      type: Boolean,
+      default: false
     }
     // metricOptions: {type: Array},
     // metricStore: {type: Array}
@@ -204,11 +208,14 @@ export default {
       datacenterOption: [],
       projectOption: [],
       filterSilence: '',
-      tempBoxId: {}
+      tempBoxId: {},
+      loading: false
     }
   },
-  created () {
-    this.queryMetrics()
+  mounted () {
+    if (!this.fromFatherData) {
+      this.queryMetrics()
+    }
   },
   methods: {
     closeDropdown () {
@@ -229,8 +236,15 @@ export default {
     },
     toggleDropdown () {
       this.dropDownVisible = !this.dropDownVisible
+      this.getMetricOptions()
+    },
+    getMetricOptions () {
+      if (!this.metricOptions.length) {
+        this.queryMetrics()
+      }
     },
     queryMetrics: function () {
+      this.loading = true
       this.$get('prom/api/v1/label/__name__/values').then(response => {
         if (response.status == 'success') {
           const metrics = response.data.sort()
@@ -300,6 +314,7 @@ export default {
     },
     getExprTemp () {
       this.$get('/expression/tmpl/gname').then(res => {
+        this.loading = false
         if (res.code === 200) {
           res.data.list.forEach(item => {
             this.metricOptions.unshift({
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index 358e978a6..4f4b8e175 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -17,7 +17,7 @@
 
           <!--<div class="top-tools">
               <div class="float-right mr-10">
-                <el-date-picker size="mini" ref="calendar"
+                <my-date-picker size="mini" ref="calendar"
                                 format="yyyy/MM/dd HH:mm"
                                 @change="dateChange"
                                 v-model="searchTime"
@@ -27,7 +27,7 @@
                                 :start-placeholder="$t('dashboard.panel.startTime')"
                                 :end-placeholder="$t('dashboard.panel.endTime')"
                                 align="right">
-                </el-date-picker>
+                </my-date-picker>
               </div>
             </div>-->
             <div class="table-list" >
@@ -38,7 +38,7 @@
                   </el-col>
                   <el-col :span="0.5" ><div>&nbsp;</div></el-col>
                   <el-col :span="13" class="chart-preview-area" >
-                    <el-date-picker size="mini" ref="calendar"
+                    <my-date-picker size="mini" ref="calendar"
                                     format="yyyy/MM/dd HH:mm"
                                     @change="dateChange"
                                     v-model="searchTime"
@@ -49,7 +49,7 @@
                                     :end-placeholder="$t('dashboard.panel.endTime')"
                                     style="position:absolute; right: 10px"
                                     align="right">
-                    </el-date-picker>
+                    </my-date-picker>
                     <el-row class="border-area" v-show="chartCount === 'single'" style="margin-top: 40px;">
                       <div class="chartBox">
                         <line-chart-block
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
new file mode 100644
index 000000000..abcee4709
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -0,0 +1,1263 @@
+<template>
+  <div class="overview list-page">
+    <!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
+    <div :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}" class="my-pane"></div>
+    <!--标题-->
+    <div class="overview-content-header">
+      <div :class="{'hide-div':!isFullScreen}" class="header-title">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
+      <div class="header-tool">
+        <div class="overview-loading"><loading ref="overviewLoading" ></loading></div>
+        <div class="tool-container top-tools">
+          <div class="time">{{sysTime}}</div>
+          <div class="date">
+            <div class="week">{{sysWeek}}</div>
+            <div class="sys-date">{{sysDate}}</div>
+          </div>
+          <pick-time id="overview-search" ref="pickTime" v-model="searchTime" :refresh-data-func="setFreshDataTimer" :showTimePicker="false" :use-chart-unit="false" class="float-right pickTime margin-l-5"></pick-time>
+          <div id="overview-full-screen" class="operation" @click="switchFullScreen"><span ><i :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}" class="nz-icon screen-icon"></i></span></div>
+        </div>
+      </div>
+    </div>
+    <!--内容-->
+    <div class="overview-content">
+      <!--第一行-->
+      <div class="content-row-box">
+        <div class="content-col-box">
+          <div id="overview-to-asset" v-loading="assetLoading" class="content-col-content clickable" @click="jumpTo('asset')">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="`${assetData.length}`" class="item" effect="light" placement="top">
+                <div class="content-col-content-num">
+                  <vue-count-up :decimals="assetData.length < 1000 ? 0 : 1" :duration="1" :end-value="assetData.length | numberFormat"
+                               :start-value="0"></vue-count-up>
+                  <span class="overview-row-unit">{{assetData.length| unitFormat}}</span>
+                  <span v-if="assetData.length > 1000 " class="over-num">+</span>
+                </div>
+              </el-tooltip>
+              <div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div v-loading="projectLoading" class="content-col-content">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-project"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="`${projectData.total}`" class="item" effect="light" placement="top">
+                <div class="content-col-content-num">
+                  <vue-count-up :decimals="projectData.total < 1000 ? 0 : 1" :duration="1" :end-value="projectData.total | numberFormat" :start-value="0"></vue-count-up>
+                  <span class="overview-row-unit">{{projectData.total | unitFormat}}</span>
+                  <span v-if="projectData.total > 1000 " class="over-num">+</span>
+                </div>
+              </el-tooltip>
+              <div class="content-col-content-title">{{$t("dashboard.overview.project.project")}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div v-loading="moduleLoading" class="content-col-content">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="`${moduleData.total}`" class="item" effect="light" placement="top">
+                <div class="content-col-content-num">
+                  <vue-count-up :decimals="moduleData.total < 1000 ? 0 : 1" :duration="1" :end-value="moduleData.total | numberFormat" :start-value="0"></vue-count-up>
+                  <span class="overview-row-unit">{{moduleData.total | unitFormat}}</span>
+                  <span v-if="moduleData.total > 1000 " class="over-num">+</span>
+                </div>
+              </el-tooltip>
+              <div class="content-col-content-title">{{$t("dashboard.overview.module.module")}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div v-loading="endpointLoading" class="content-col-content">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="`${endpointData.num}`" class="item" effect="light" placement="top">
+                <div class="content-col-content-num">
+                  <vue-count-up :decimals="endpointData.num < 1000 ? 0 : 1" :duration="1" :end-value="endpointData.num | numberFormat" :start-value="0"></vue-count-up>
+                  <span class="overview-row-unit">{{endpointData.num | unitFormat}}</span>
+                  <span v-if="endpointData.num > 1000 " class="over-num">+</span>
+                </div>
+              </el-tooltip>
+              <div class="content-col-content-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div id="overview-to-alertlist" v-loading="alertMessageLoading" class="content-col-content clickable" @click="jumpTo('alertList')" >
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="`${alertMessageData.num}`" class="item" effect="light" placement="top">
+                <div class="content-col-content-num">
+                  <vue-count-up :decimals="alertMessageData.num < 1000 ? 0 : 1" :duration="1" :end-value="alertMessageData.num | numberFormat" :start-value="0"></vue-count-up>
+                  <span class="overview-row-unit">{{alertMessageData.num | unitFormat}}</span>
+                  <span v-if="alertMessageData.num > 1000 " class="over-num">+</span>
+                </div>
+              </el-tooltip>
+              <div class="content-col-content-title">{{$t("overall.alert")}}</div>
+            </div>
+            <div class="content-alert-num">{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</div>
+          </div>
+        </div>
+      </div>
+      <!--第二行-->
+      <div class="content-row-box">
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>{{$t("dashboard.overview.projectTopoLogy")}}</span>
+          </div>
+          <div v-loading="topologyLoading"  class="content-col-content">
+            <transition name = "el-zoom-in-center">
+              <div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative">
+                <el-carousel :interval="5000" :trigger="'click'" arrow="hover">
+                  <el-carousel-item v-for="(item,index) in allProject" :key="index">
+                    <div class="maskLayer" @click="toProject(item)"></div>
+                    <span class="project-name">{{item.name}}</span>
+                    <topology
+                      :fromOverView="true"
+                      :obj="item"
+                      :topologyIndexF="index"
+                    />
+                  </el-carousel-item>
+                </el-carousel>
+              </div>
+            </transition>
+            <div v-if="allProject.length===0" class="chart-no-data">No Data</div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
+          <div class="content-col-content">
+            <div id="map" style="height: 100%; width: 100%"></div>
+          </div>
+        </div>
+      </div>
+      <!--第三行-->
+      <div class="content-row-box content-bottom-box">
+        <!--第一个图-->
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>{{$t("dashboard.overview.asset.assetType")}}</span>
+          </div>
+          <div class="content-col-content">
+            <chart-box ref="assetTypePie" :show-toolbox="false" :tooltip-formatter="assetTypeFormatter" chart-type="pie" name="assetTypePie" @is-loading="(isLoading)=>{this.assetTypeLoading = isLoading}"></chart-box>
+            <div v-if="!assetTypeLoading && (!assetTypeData || assetTypeData.length === 0)" class="chart-no-data">No Data</div>
+          </div>
+        </div>
+
+        <!--第二个图-->
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>
+              <span v-if="alertMessageShow === 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
+              <span v-if="alertMessageShow === 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
+            </span>
+          </div>
+          <div class="content-col-content" style="overflow: hidden">
+            <messageAsset v-show="messageAssetData.length>0" ref="assetHexagon" :col="col" :data="messageAssetData" :from="'asset'" :from-type="'asset'" :hexagonSvgID="'hexagonSvg1'" :length="length" :show-tooltip="true"/>
+            <div v-if="messageAssetData.length===0" class="chart-no-data">No Data</div>
+          </div>
+        </div>
+        <!--第三个图-->
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>{{$t("dashboard.overview.alert.moduleTopN")}}</span>
+          </div>
+          <div class="content-col-content" style="overflow: hidden">
+            <messageAsset v-show="messageModuleData.length>0" ref="moduleHexagon" :col="col" :data="messageModuleData" :from="'module'" :from-type="'module'" :hexagonSvgID="'hexagonSvg2'" :length="length" :show-tooltip="true"/>
+            <div v-if="messageModuleData.length===0" class="chart-no-data">No Data</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="axis-tooltip el-popover yAxis-text-style"></div>
+    <!--用于assetType饼图label-->
+    <img id="upPic" src='../../../../assets/img/up.png' style="display: none;">
+    <img id="downPic" src='../../../../assets/img/down.png' style="display: none;">
+  </div>
+</template>
+
+<script>
+import chart from './chart'
+import i18n from '@/components/common/i18n'
+import axios from 'axios'
+import bus from '@/libs/bus'
+import VueCountUp from 'vue-countupjs'
+import 'leaflet/dist/leaflet.css'
+// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
+import * as L from 'leaflet'
+import icon from 'leaflet/dist/images/marker-icon.png'
+import iconShadow from 'leaflet/dist/images/marker-shadow.png'
+import * as echarts from 'echarts'
+import chartConfig from './chartConfig'
+import overViewTopology from '../../../common/project/topologyL5'
+import messageAsset from '../../../common/overView/messageAsset'
+
+let tooltipEndpointChart
+let tooltipPrometheusChart
+const regNum = /^[0-9]+.?[0-9]*/
+export default {
+  name: 'overview',
+  data () {
+    return {
+      // top tool
+      isFullScreen: false,
+      sysTime: '',
+      sysDate: '',
+      sysWeek: '',
+      systemName: localStorage.getItem('nz-sys-name'),
+      topologyLoading: true,
+
+      // data
+      assetLoading: false,
+      assetData: [], // asset总数
+      assetTypeLoading: false, // 第三行第一个图
+      assetTypeData: [],
+      assetStateData: [],
+      projectLoading: false,
+      projectData: { total: 0 },
+      moduleLoading: false,
+      moduleData: { total: 0 },
+      endpointLoading: false,
+      endpointData: { num: 0 },
+      alertMessageLoading: false,
+      alertMessageData: { num: 0 },
+      alertRuleData: [],
+      map: null,
+      allProject: [],
+
+      alertMessageShow: 'asset', // asset/module
+
+      topFilter: {
+        optionals: [10, 20, 50],
+        rule: 10,
+        asset: 48,
+        module: 48
+      },
+      system_server_time: null,
+      freshDateTimer: null,
+      freshDataTimer: null,
+
+      tooltip: {
+        x: 0,
+        y: 0
+      },
+      searchTime: bus.getTimezontDateRange(),
+      messageAssetData: [],
+      col: 10,
+      length: 9,
+      messageModuleData: []
+    }
+  },
+  components: {
+    'chart-box': chart,
+    VueCountUp,
+    topology: overViewTopology,
+    messageAsset
+  },
+  filters: {
+    numberFormat (num) {
+      const fixed = 1
+      if (num) {
+        try {
+          num = parseFloat(num)
+          if (num < 1000) {
+            return num
+          } else if (num < 1000000) {
+            num = num / 1000
+            num = num.toString()
+            const index = num.indexOf('.')
+            if (index !== -1) {
+              num = num.substring(0, fixed + index + 1)
+            } else {
+              num = num.substring(0)
+            }
+            return parseFloat(num).toFixed(fixed)
+          } else if (num < 1000000000) {
+            num = num / 1000000
+            num = num.toString()
+            const index = num.indexOf('.')
+            if (index !== -1) {
+              num = num.substring(0, fixed + index + 1)
+            } else {
+              num = num.substring(0)
+            }
+            return parseFloat(num).toFixed(fixed)
+          }
+        } catch (err) {
+          return 0
+        }
+      }
+      return 0
+    },
+    unitFormat (num) {
+      if (num) {
+        try {
+          num = parseFloat(num)
+          if (num < 1000) {
+            return ''
+          } else if (num < 1000000) {
+            return ' K'
+          } else if (num < 1000000000) {
+            return ' M'
+          }
+        } catch (err) {
+          return ''
+        }
+      }
+      return ''
+    }
+  },
+  methods: {
+    /* 初始化数据 start */
+    initData () {
+      return [
+        this.querySystemState(),
+        this.queryAssetData(),
+        this.queryAssetTypeData(),
+        this.queryProjectData(),
+        this.queryModuleData(),
+        this.queryEndpointData(),
+        this.queryAlertMessageData(),
+        this.queryAlertRuleData(),
+        this.initMap(),
+        this.queryAlertStatByModule(), // 新的3-3
+        this.queryAllProjectData()
+      ]
+    },
+    setFreshDataTimer () {
+      Promise.all(this.initData()).then(() => {
+        if (this.$refs.overviewLoading) {
+          this.$refs.overviewLoading.endLoading()
+        }
+      })
+    },
+    querySystemState () {
+      return new Promise(resolve => {
+        this.$get('/healthy').then(response => {
+          if (response.code == 200) {
+            if (response.time) {
+              this.system_server_time = this.utcTimeToTimezone(response.time)
+            } else {
+              this.system_server_time = bus.computeTimezone(new Date().getTime())
+            }
+          } else {
+            this.system_server_time = bus.computeTimezone(new Date().getTime())
+          }
+          resolve()
+        })
+      })
+    },
+    queryAllProjectData () {
+      this.$get('/project', { pageSize: -1 }).then(res => {
+        this.topologyLoading = true
+        const axiosAll = []
+        const temp = []
+        if (res.data.list.length === 0) {
+          this.topologyLoading = false
+        }
+        res.data.list.forEach((item) => {
+          axiosAll.push(axios.get(`monitor/project/topo?projectId=${item.id}`))
+        })
+        axios.all(axiosAll).then(res2 => {
+          res2 = res2.map((item, index) => {
+            return { ...item.data.data, ...res.data.list[index] }
+          })
+          res2 = res2.filter((item) => item.topo && item.topo.pens && item.topo.pens.length)
+          if (res2.length == 0) {
+            this.topologyLoading = false
+          }
+          res2.forEach(item => {
+            temp.push(item)
+          })
+          this.allProject = temp
+          this.topologyLoading = false
+        })
+      })
+    },
+
+    formatNodesArr (arr) {
+      return new Promise(resolve => {
+        const promiseArr = []
+        arr.forEach((item, index) => {
+          item.shape = 'image'
+          item.id = item.moduleId
+          this.$get('/module/stat', { id: item.id }).then(res => {
+            item.state = res.data
+          })
+          promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.iconId}`))
+        })
+        Promise.all(promiseArr).then(res => {
+          arr.forEach((item, index) => {
+            item.image = res[index]
+          })
+          resolve(arr)
+        })
+      })
+    },
+    formatEdgesArr (arr) {
+      arr.forEach((item) => {
+        item.from = item.source
+        item.to = item.target
+        item.label = ''
+        item.title = 'title'
+        item.smooth.roundness = 0.4
+      })
+      return arr
+    },
+    dealImg (url) {
+      // 处理后端传过来的图片流乱码问题
+      if (url) {
+        return new Promise((resolve) => {
+          this.$axios
+            .get(url, {
+              responseType: 'arraybuffer'
+            })
+            .then(res => {
+              return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
+            })
+            .then(data => {
+              resolve(data)
+            })
+            .catch(err => {
+              console.error(err)
+            })
+        })
+      }
+    },
+    toProject (projectInfo) { // 跳转对应project页面
+      this.$store.commit('setOverViewProject', projectInfo)
+    },
+    queryAssetData () {
+      return new Promise(resolve => {
+        this.assetLoading = true
+        this.$refs.assetHexagon.startLoading()
+        this.$get('asset/asset', { pageSize: -1 }).then(response => {
+          this.assetLoading = false
+          this.$refs.assetHexagon.endLoading()
+          if (response.code === 200) {
+            this.assetData = response.data.list.sort((a, b) => b.alertNum - a.alertNum)
+            const alertTopAssets = this.assetData.slice(0, 20)
+            const requests = alertTopAssets.map(a => axios.get(`stat/alertMessage/severity?assetId=${a.id}`))
+            const assetStateData = []
+            axios.all(requests).then(result => {
+              result.forEach((alert, i) => {
+                const severityData = {}
+                alert.data.data.list && alert.data.data.list.forEach(a => {
+                  severityData[a.name] = a.num
+                })
+                !severityData.P1 && (severityData.P1 = 0)
+                !severityData.P2 && (severityData.P2 = 0)
+                !severityData.P3 && (severityData.P3 = 0)
+                assetStateData.push({ ...alertTopAssets[i], alert: [severityData] })
+              })
+              console.info(assetStateData)
+              this.messageAssetData = assetStateData
+            })
+          }
+          resolve()
+        })
+      })
+    },
+    queryAssetTypeData () {
+      return new Promise(resolve => {
+        this.assetTypeLoading = true
+        this.$get('stat/asset/type').then(response => {
+          this.assetTypeLoading = false
+          if (response.code === 200) {
+            this.assetTypeData = response.data
+            /* 饼图 */
+            const legendData = []
+            const typeSeriesData = []
+
+            const vm = this
+            const assetTotalCount = (function () {
+              let count = 0
+              vm.assetTypeData.forEach(item => {
+                count += item.num
+              })
+              return count
+            }())
+            this.assetTypeData.forEach(item => {
+              legendData.push([item.name, (item.num * 100 / assetTotalCount).toFixed(2)])
+              typeSeriesData.push({ name: item.name, value: item.num })
+            })
+            const series = [{
+              name: 'Type',
+              data: typeSeriesData.sort((a, b) => { return a.value > b.value ? -1 : 1 }),
+              type: 'pie',
+              radius: ['43%', '55%'],
+              center: ['40%', '50%'],
+              minAngle: 15,
+              itemStyle: {
+                borderColor: '#fff',
+                borderWidth: 1
+              },
+              tooltip: {
+                backgroundColor: 'rgba(255, 255, 255, 0.66)',
+                extraCssText: 'box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);',
+                textStyle: { color: '#333333' },
+                renderMode: 'html'
+              },
+              label: {
+                normal: {
+                  show: false,
+                  position: 'center',
+                  formatter: function (param) { // 设置圆饼图中间文字排版
+                    return ['{name|' + param.name + '}',
+                      '{percent|(' + param.percent + '%)}']
+                      .join('\n')
+                  },
+                  rich: {
+                    name: {
+                      textAlign: 'center',
+                      color: '#333',
+                      fontSize: 19,
+                      padding: 10
+                    },
+                    percent: {
+                      textAlign: 'center',
+                      color: '#333',
+                      fontSize: 12,
+                      padding: 10
+                    }
+                  }
+                },
+                emphasis: {
+                  show: true // 文字至于中间时，这里需为true
+                }
+              }
+            }]
+            const legend = {
+              show: true,
+              orient: 'vertical',
+              top: '30%',
+              right: 25,
+              icon: 'circle'
+            }
+            if (typeSeriesData.length === 0 || !this.assetTypeData.length === 0) {
+              legend.show = false
+            }
+            this.assetTypeData.length !== 0 && this.$refs.assetTypePie.setSeries(series, legend, legendData)
+            this.$refs.assetTypePie.endLoading()
+            /* const requests = this.assetTypeData.map(t => axios.get(`stat/asset/ping?typeId=${t.id}`))
+            this.assetStateData = []
+            axios.all(requests).then(result => {
+              result.forEach((r, i) => {
+                this.assetStateData.push({ typeId: this.assetTypeData[i].id, data: r.data.list })
+                this.$set(this.assetTypeData[i], 'up', result.find(r2 => r2.name === 'up'))
+                this.$set(this.assetTypeData[i], 'down', result.find(r2 => r2.name === 'down'))
+              })
+            }) */
+          }
+          resolve()
+        })
+      })
+    },
+    queryProjectData () {
+      return new Promise(resolve => {
+        this.projectLoading = true
+        this.$get('stat/project/total').then(response => {
+          this.projectLoading = false
+          if (response.code === 200) {
+            this.projectData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryModuleData () {
+      return new Promise(resolve => {
+        this.moduleLoading = true
+        this.$get('stat/module/total').then(response => {
+          this.moduleLoading = false
+          if (response.code === 200) {
+            this.moduleData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryEndpointData () {
+      return new Promise(resolve => {
+        this.endpointLoading = true
+        this.$get('stat/endpoint/total').then(response => {
+          this.endpointLoading = false
+          if (response.code === 200) {
+            this.endpointData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertMessageData () {
+      return new Promise(resolve => {
+        this.alertMessageLoading = true
+        this.$get('stat/alertMessage/total').then(response => {
+          this.alertMessageLoading = false
+          if (response.code === 200) {
+            this.alertMessageData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertRuleData () {
+      return new Promise(resolve => {
+        this.$get('stat/alertRule/total').then(response => {
+          if (response.code === 200) {
+            this.alertRuleData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    initMap () {
+      let loadPromise
+      this.loadMapConfig().then((mapConfig) => {
+        if (mapConfig && this.map) {
+          loadPromise = this.loadDataCenterMapData()
+        }
+      })
+      return loadPromise
+    },
+    initTooltipChart (param) {
+      const vm = this
+      setTimeout(() => {
+        const data = param.tooltip.options.data
+        // console.info(tooltipEndpointChart);
+        tooltipEndpointChart = echarts.init(document.querySelector('#tooltip-chart--endpoint'))
+        tooltipPrometheusChart = echarts.init(document.querySelector('#tooltip-chart--prometheus'))
+        const endpointOption = chartConfig.getOption('tooltipPie')
+        const prometheusOption = chartConfig.getOption('tooltipPie')
+        endpointOption.series[0].label.formatter = data.endpointTotal + ''
+        endpointOption.series[0].data = [
+          { name: vm.$t('dashboard.overview.asset.pingUp'), value: data.endpointUp ? data.endpointUp : 0 },
+          { name: vm.$t('dashboard.overview.asset.pingDown'), value: data.endpointDown ? data.endpointDown : 0 },
+          { name: vm.$t('asset.suspended'), value: data.endpointSuspended ? data.endpointSuspended : 0 }
+        ]
+        endpointOption.title.text = vm.$t('project.endpoint.endpoint')
+        endpointOption.legend.data = [vm.$t('dashboard.overview.asset.pingUp'), vm.$t('dashboard.overview.asset.pingDown'), vm.$t('asset.suspended')]
+        prometheusOption.series[0].label.formatter = data.promTotal + ''
+        prometheusOption.series[0].data = [
+          { name: vm.$t('dashboard.overview.asset.pingUp'), value: data.promUp ? data.promUp : 0 },
+          { name: vm.$t('dashboard.overview.asset.pingDown'), value: data.promDown ? data.promDown : 0 }
+        ]
+        prometheusOption.title.text = 'Prometheus'
+        prometheusOption.legend.data = [vm.$t('dashboard.overview.asset.pingUp'), vm.$t('dashboard.overview.asset.pingDown')]
+        tooltipEndpointChart.setOption(endpointOption, true)
+        tooltipPrometheusChart.setOption(prometheusOption, true)
+      }, 100)
+      /* setTimeout(function() {
+          tooltipEndpointChart.setOption(endpointOption);
+          tooltipPrometheusChart.setOption(prometheusOption);
+        }, 100); */
+    },
+    loadMapConfig () {
+      const vm = this
+      return new Promise(resolve => {
+        const DefaultIcon = L.icon({
+          iconUrl: icon,
+          shadowUrl: iconShadow
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        const param = { paramKey: 'map_center_config' }
+        this.$get('sysConfig', param).then(response => {
+          if (response.code == 200) {
+            const mapConfig = JSON.parse(response.data.paramKey.map_center_config)
+            if (this.map) {
+              this.map.remove()
+              this.map = null
+            }
+            const map = L.map('map', {
+              minZoom: mapConfig.minZoom,
+              maxZoom: mapConfig.maxZoom,
+              attributionControl: false,
+              zoomControl: false,
+              maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
+            }).setView([mapConfig.latitude, mapConfig.longitude], mapConfig.zoom)
+            map.createPane('myPane', document.querySelector('.my-pane'))
+            map.on('tooltipopen', function (param) {
+              setTimeout(() => {
+                vm.initTooltipChart(param)
+              }, 100)
+            })
+            map.on('tooltipclose', function (param) {
+              tooltipEndpointChart && tooltipEndpointChart.clear()
+              tooltipPrometheusChart && tooltipPrometheusChart.clear()
+            })
+            this.map = map
+
+            L.tileLayer(
+              '/static/Tiles/{z}/{x}/{y}.png',
+              { noWrap: true }
+            ).addTo(map)
+
+            const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
+            attribution.addAttribution(' © OpenStreetMap contributors')
+            attribution.addTo(map)
+
+            L.control.zoom({
+              position: 'bottomright',
+              zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
+              zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
+              zoomInTitle: '',
+              zoomOutTitle: ''
+            }).addTo(map)
+
+            resolve(mapConfig)
+          }
+        })
+      })
+    },
+    loadDataCenterMapData () {
+      const testData = [
+        {
+          name: 'insert-dfda321cb4cb482aa0c3787887c81a0f',
+          color: 2,
+          asset: {
+            total: 27,
+            ok: 26,
+            alarm: 1
+          },
+          agent: {
+            up: 27,
+            down: 0
+          },
+          alert: {
+            P1: 4,
+            P2: 10,
+            P3: 2
+          }
+        },
+        {
+          name: 'insert-a6662a7c321143e3b8fb33c832e11805',
+          color: 1,
+          asset: {
+            total: 14,
+            ok: 14,
+            alarm: 0
+          },
+          agent: {
+            up: 14,
+            down: 0
+          },
+          alert: {
+            P1: 0,
+            P2: 0,
+            P3: 0
+          }
+        },
+        {
+          name: 'JBXXG',
+          color: 3,
+          asset: {
+            total: 7,
+            ok: 0,
+            alarm: 0
+          },
+          agent: {
+            up: 0,
+            down: 7
+          },
+          alert: {
+            P1: 0,
+            P2: 0,
+            P3: 0
+          }
+        }
+      ]
+      return new Promise(resolve => {
+        const requests = [axios.get('dc?pageSize=-1')/* , axios.get('stat/overview/map') */]
+        axios.all(requests).then(result => {
+          const dcInfos = result[0].data.data.list
+          const dcStats = testData
+          dcStats.sort((a, b) => {
+            return a.asset.total - b.asset.total
+          })
+          dcStats.forEach(s => {
+            const dc = dcInfos.find(i => i.name === s.name)
+            dc && (s = { ...s, latitude: dc.latitude, longitude: dc.longitude })
+          })
+          const bigScatter = 10
+          const mediumScatter = 8
+          const smallScatter = 6
+          const maxAssetTotal = dcInfos[dcInfos.length - 1].assetNum // 获取asset数量最大值
+
+          const bigBoundary = Number.parseInt(maxAssetTotal / 3 * 2) // 根据最大值定下大图标、中图标的阈值
+          const mediumBoundary = Number.parseInt(maxAssetTotal / 3)
+          dcStats.forEach(dcStat => {
+            if (regNum.test(dcStat.latitude) && regNum.test(dcStat.longitude)) {
+              let symbolSize
+              if (dcStat.asset.total >= bigBoundary) {
+                symbolSize = bigScatter
+              } else if (dcStat.asset.total < bigBoundary && dcStat.asset.total >= mediumBoundary) {
+                symbolSize = mediumScatter
+              } else {
+                symbolSize = smallScatter
+              }
+              let shadowMarker
+              let marker
+              if (dcStat.color === 1) {
+                shadowMarker = L.circleMarker([dcStat.latitude, dcStat.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                marker = L.circleMarker([dcStat.latitude, dcStat.longitude], { interactive: false, color: this.theme.successColor, opacity: 0.42, fillColor: this.theme.successColor, fillOpacity: 0.5, radius: symbolSize, className: 'real-marker' })
+              } else if (dcStat.color === 2) {
+                shadowMarker = L.circleMarker([dcStat.latitude, dcStat.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                marker = L.circleMarker([dcStat.latitude, dcStat.longitude], { interactive: false, color: this.theme.dangerColor, opacity: 0.42, fillColor: this.theme.dangerColor, fillOpacity: 0.5, radius: symbolSize, className: 'real-marker error-item' })
+              } else if (dcStat.color === 3) {
+                shadowMarker = L.circleMarker([dcStat.latitude, dcStat.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                marker = L.circleMarker([dcStat.latitude, dcStat.longitude], { interactive: false, color: this.theme.suspendedColor, opacity: 0.42, fillColor: this.theme.suspendedColor, fillOpacity: 0.5, radius: symbolSize, className: 'real-marker' })
+              }
+              shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+              shadowMarker.on('mouseover', (param) => {
+                const point = param.containerPoint
+                const event = param.originalEvent
+                this.tooltip.x = event.clientX + point.x - event.layerX - 5
+                this.tooltip.y = event.clientY + point.y - event.layerY
+              })
+              shadowMarker.addTo(this.map)
+              marker.addTo(this.map)
+            }
+          })
+        })
+      })
+
+      /* new Promise(resolve => {
+        const requests = [axios.get('dc?pageSize=-1'), axios.get('stat/dc/state')]
+        axios.all(requests).then((result) => {
+          if (result) {
+            let dcInfos = null
+            let dcStats = null
+            if (result[0].data && result[0].data.code == 200) {
+              dcInfos = result[0].data.data.list
+            }
+            if (result[1].data && result[1].data.code == 200) {
+              dcStats = result[1].data.data
+            }
+            if (dcInfos && dcStats) {
+              dcInfos.sort((a, b) => {
+                return a.assetNum - b.assetNum
+              })
+              const bigScatter = 10
+              const mediumScatter = 8
+              const smallScatter = 6
+              const maxAssetTotal = dcInfos[dcInfos.length - 1].assetNum // 获取asset数量最大值
+
+              const bigBoundary = Number.parseInt(maxAssetTotal / 3 * 2) // 根据最大值定下大图标、中图标的阈值
+              const mediumBoundary = Number.parseInt(maxAssetTotal / 3)
+              dcInfos.forEach(dcInfo => {
+                if (regNum.test(dcInfo.latitude) && regNum.test(dcInfo.longitude)) {
+                  let symbolSize
+                  if (dcInfo.assetNum >= bigBoundary) {
+                    symbolSize = bigScatter
+                  } else if (dcInfo.assetNum < bigBoundary && dcInfo.assetNum >= mediumBoundary) {
+                    symbolSize = mediumScatter
+                  } else {
+                    symbolSize = smallScatter
+                  }
+                  let shadowMarker = null
+                  let marker = null
+                  if (dcInfo.state === 'ON') {
+                    const hasAlert = dcStat.alertP1 != 0 || dcStat.alertP2 != 0 || dcStat.alertP3 != 0 || dcStat.assetPingDown != 0 || dcStat.endpointDown != 0 || dcStat.promDown != 0
+                    shadowMarker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                    marker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { interactive: false, color: hasAlert ? '#DE5D3F' : '#23BF9A', opacity: 0.42, fillColor: hasAlert ? '#DE5D3F' : '#23BF9A', fillOpacity: 0.5, radius: symbolSize, className: hasAlert ? 'real-marker error-item' : 'real-marker ' })
+                    shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+                  } else {
+                    shadowMarker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                    marker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { interactive: false, color: '#010101', opacity: 0.35, fillColor: '#010101', fillOpacity: 0.35, radius: symbolSize, className: 'real-marker' })
+                    shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+                  }
+                  shadowMarker.on('mouseover', (param) => {
+                    // console.info(param);
+                    const point = param.containerPoint
+                    const event = param.originalEvent
+                    this.tooltip.x = event.clientX + point.x - event.layerX - 5
+                    this.tooltip.y = event.clientY + point.y - event.layerY
+                  })
+                  shadowMarker.addTo(this.map)
+                  marker.addTo(this.map)
+                }
+              })
+            }
+            /!* if (dcInfos && dcStats) {
+              const dcStatsCopy = Object.assign([], dcStats)
+              dcStatsCopy.sort((a, b) => {
+                return a.assetTotal - b.assetTotal
+              })
+              const bigScatter = 10
+              const mediumScatter = 8
+              const smallScatter = 6
+              const maxAssetTotal = dcStatsCopy[dcStatsCopy.length - 1].assetTotal
+
+              const bigBoundary = Number.parseInt(maxAssetTotal / 3 * 2)
+              const mediumBoundary = Number.parseInt(maxAssetTotal / 3)
+              for (const dcStat of dcStats) {
+                const dcId = dcStat.id
+                const dcInfo = dcInfos.find((item) => {
+                  return item.id == dcId
+                })
+                if (regNum.test(dcInfo.latitude) && regNum.test(dcInfo.longitude)) {
+                  let symbolSize = mediumScatter
+                  if (dcStat.assetTotal >= bigBoundary) {
+                    symbolSize = bigScatter
+                  } else if (dcStat.assetTotal < bigBoundary && dcStat.assetTotal >= mediumBoundary) {
+                    symbolSize = mediumScatter
+                  } else {
+                    symbolSize = smallScatter
+                  }
+                  let shadowMarker = null
+                  let marker = null
+                  if (dcInfo.state === 'ON') {
+                    const hasAlert = dcStat.alertP1 != 0 || dcStat.alertP2 != 0 || dcStat.alertP3 != 0 || dcStat.assetPingDown != 0 || dcStat.endpointDown != 0 || dcStat.promDown != 0
+                    shadowMarker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                    marker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { interactive: false, color: hasAlert ? '#DE5D3F' : '#23BF9A', opacity: 0.42, fillColor: hasAlert ? '#DE5D3F' : '#23BF9A', fillOpacity: 0.5, radius: symbolSize, className: hasAlert ? 'real-marker error-item' : 'real-marker ' })
+                    shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+                  } else {
+                    shadowMarker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                    marker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { interactive: false, color: '#010101', opacity: 0.35, fillColor: '#010101', fillOpacity: 0.35, radius: symbolSize, className: 'real-marker' })
+                    shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+                  }
+                  shadowMarker.on('mouseover', (param) => {
+                    // console.info(param);
+                    const point = param.containerPoint
+                    const event = param.originalEvent
+                    this.tooltip.x = event.clientX + point.x - event.layerX - 5
+                    this.tooltip.y = event.clientY + point.y - event.layerY
+                  })
+                  shadowMarker.addTo(this.map)
+                  marker.addTo(this.map)
+                }
+              }
+            } *!/
+          }
+          resolve()
+        })
+      }) */
+    },
+    queryAlertStatByModule () {
+      return new Promise(resolve => {
+        this.$refs.moduleHexagon.startLoading()
+        this.$get('monitor/module', { pageSize: -1 }).then(response => {
+          this.$refs.moduleHexagon.endLoading()
+          if (response.code === 200) {
+            const moduleData = response.data.list
+            moduleData.sort((a, b) => b.alertNum - a.alertNum)
+            const alertTopModules = moduleData.slice(0, 20)
+            const requests = alertTopModules.map(a => axios.get(`stat/alertMessage/severity?moduleId=${a.id}`))
+            const moduleStateData = []
+            axios.all(requests).then(result => {
+              result.forEach((alert, i) => {
+                const severityData = {}
+                alert.data.data.list && alert.data.data.list.forEach(a => {
+                  severityData[a.name] = a.num
+                })
+                !severityData.P1 && (severityData.P1 = 0)
+                !severityData.P2 && (severityData.P2 = 0)
+                !severityData.P3 && (severityData.P3 = 0)
+                moduleStateData.push({ ...alertTopModules[i], alert: [severityData] })
+              })
+              this.messageModuleData = moduleStateData
+            })
+          }
+          resolve()
+        })
+      })
+    },
+    convertTrafficData (data) {
+      const result = []
+      data.forEach(item => {
+        const hasDc = result.some(dc => { // dc去重
+          return item.idc && dc.label == item.idc.name
+        })
+        if (item.idc && !hasDc) {
+          result.push({ label: item.idc.name, value: '$dc$::' + item.idc.name, level: 1 })
+        }
+      })
+      return result
+    },
+    mapTooltipFormatter (dcStat) {
+      return `<div class="tooltip">
+          <div class="tooltip--title">${dcStat.name}</div>
+          <div class="tooltip--row">
+            <div class="tooltip-asset">
+              <div class="tooltip-asset--title"><span>${this.$t('asset.asset')}</span><span>Total：${dcStat.assetTotal}</span></div>
+              <div class="tooltip-asset--row">
+                <div>${this.$t('asset.state')}</div>
+                <div class="tooltip-asset--sub-rows">
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t('asset.inStock')}</div>
+                    <div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetInStock}</span></div>
+                  </div>
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t('asset.notInStock')}</div>
+                    <div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetOutStock}</span></div>
+                  </div>
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t('asset.suspended')}</div>
+                    <div class="sub-row--value"><div class="sign gray-sign"></div><span>${dcStat.assetSuspended}</span></div>
+                  </div>
+                </div>
+              </div>
+              <div class="tooltip-asset--row tooltip-asset--ping ">
+                <div style="line-height: 50px">${this.$t('asset.left.ping')}</div>
+                <div class="tooltip-asset--sub-rows">
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t('dashboard.overview.asset.pingUp')}</div>
+                    <div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetPingUp}</span></div>
+                  </div>
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t('dashboard.overview.asset.pingDown')}</div>
+                    <div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetPingDown}</span></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="tooltip-alert">
+              <div class="tooltip-alert--title"><span>${this.$t('dashboard.overview.asset.alert')}</span><span>${dcStat.alertTotal}</span></div>
+              <div class="tooltip-alert--row">
+                <div class="row--label row--label__p1">P1</div><div class="row--value row--value__p1">${dcStat.alertP1}</div>
+              </div>
+              <div class="tooltip-alert--row">
+                <div class="row--label row--label__p2">P2</div><div class="row--value row--value__p2">${dcStat.alertP2}</div>
+              </div>
+              <div class="tooltip-alert--row">
+                <div class="row--label row--label__p3">P3</div><div class="row--value row--value__p3">${dcStat.alertP3}</div>
+              </div>
+            </div>
+          </div>
+          <div class="tooltip--row">
+            <div class="legend-value">
+              <div>${dcStat.endpointUp}</div>
+              <div>${dcStat.endpointDown}</div>
+              <div>${dcStat.endpointSuspended}</div>
+            </div>
+            <div class="legend-value">
+              <div>${dcStat.promUp}</div>
+              <div>${dcStat.promDown}</div>
+            </div>
+            <div class="tooltip-chart" id="tooltip-chart--endpoint"></div>
+            <div class="tooltip-chart" id="tooltip-chart--prometheus"></div>
+          </div>
+        </div>`
+
+      // return tooltip;
+    },
+    simpleFormatter (params) {
+      return `<div class="tooltip" style="min-width: unset;">${params.value}</div>`
+    },
+    assetTypeFormatter (params) {
+      return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`
+    },
+    switchFullScreen () {
+      this.isFullScreen = this.judgeFullScreen()
+      if (this.isFullScreen) {
+        this.exitFullScreen()
+      } else {
+        this.fullScreen()
+      }
+    },
+    judgeFullScreen () {
+      return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
+    },
+    fullScreen () {
+      const container = document.querySelector('.overview')
+      const fullScreenFunc = container.requestFullscreen || container.mozRequestFullScreen || container.webkitRequestFullscreen || container.msRequestFullscreen
+      fullScreenFunc.call(container)
+      this.isFullScreen = true
+    },
+    exitFullScreen () {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      }
+      this.isFullScreen = false
+    },
+    /* header 时间处理 start */
+    initDate () {
+      this.sysTime = this.getTime(0)
+      this.sysDate = this.getDate(0)
+      this.sysWeek = this.getWeek(0)
+      this.freshTime()
+    },
+    freshTime () {
+      const $temp = this
+      let counter = 0
+      this.freshDateTimer = setInterval(function () {
+        counter++
+        $temp.sysTime = $temp.getTime(counter)
+        $temp.sysDate = $temp.getDate(counter)
+        $temp.sysWeek = $temp.getWeek(counter)
+      }, 1000)
+    },
+    getTime (counter) {
+      const date = new Date(this.system_server_time)
+      date.setSeconds(date.getSeconds() + counter)
+      const hours = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
+      const minutes = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
+      const seconds = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
+      return hours + ':' + minutes + ':' + seconds
+    },
+    getDate (counter) {
+      const date = new Date(this.system_server_time)
+      date.setSeconds(date.getSeconds() + counter)
+      const years = date.getFullYear()
+      const months = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
+      const days = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
+      return years + '-' + months + '-' + days
+    },
+    getWeek (counter) {
+      const weeks = [i18n.t('date.week.seven'), i18n.t('date.week.one'), i18n.t('date.week.two'), i18n.t('date.week.three'), i18n.t('date.week.four'), i18n.t('date.week.five'), i18n.t('date.week.six')]
+      const date = new Date(this.system_server_time)
+      date.setSeconds(date.getSeconds() + counter)
+      const day = date.getDay()
+      return weeks[day]
+    },
+    dateFormat (fmt, date) {
+      let ret
+      const opt = {
+        'y+': date.getFullYear().toString(), // 年
+        'm+': (date.getMonth() + 1).toString(), // 月
+        'd+': date.getDate().toString(), // 日
+        'H+': date.getHours().toString(), // 时
+        'M+': date.getMinutes().toString(), // 分
+        'S+': date.getSeconds().toString() // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+      }
+      for (const k in opt) {
+        ret = new RegExp('(' + k + ')').exec(fmt)
+        if (ret) {
+          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
+        };
+      };
+      return fmt
+    },
+    /* header 时间处理end */
+    jumpTo (data, id) {
+      if (data == 'asset') {
+        bus.$emit('clear-asset-filter') // 清除leftMenu左侧菜单过滤条件
+        // if(this.$store.getters.getIdcArr.length===0){return}//如果不存在idc 则不跳转
+      }
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    zoomMap (val) {
+      const geo = this.$refs.dataCenterMap.getOption().geo
+      if (geo && geo.length > 0) {
+        const zoom = geo[0].zoom
+        const limit = geo[0].scaleLimit
+        const value = zoom + val
+        if (value <= limit.max && value >= limit.min) {
+          this.$refs.dataCenterMap.setOption({ geo: { zoom: value } })
+        }
+      }
+    }
+  },
+  mounted () {
+    this.initData()
+    this.querySystemState().then(() => {
+      this.initDate()
+    })
+  },
+  beforeDestroy () {
+    this.allProject = []
+  },
+  destroyed () {
+    clearInterval(this.freshDataTimer)
+    clearInterval(this.freshDateTimer)
+    this.allProject = null
+  }
+}
+</script>
+
+<style lang="scss">
+@import './overview2.scss';
+@import '@/assets/css/common/tableCommon.scss';
+.leaflet-control-zoom{
+  border: 1px solid #E7EAED !important;
+  box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77) !important;
+  .leaflet-control-zoom-out,.leaflet-control-zoom-in{
+    opacity: .7;
+    background: #FFF;
+  }
+}
+.leaflet-control-attribution{
+  background-color: unset !important;
+  color: rgba(178, 178, 178, 0.77);
+}
+@keyframes error-animation{
+  0% {fill-opacity:.5}
+  50% {fill-opacity:0.75}
+  100% {fill-opacity:1}
+}
+.error-item{
+  color: #FADED7 ;
+  animation: error-animation 1s infinite ease-in-out;
+  animation-direction:normal;
+}
+.real-marker{
+  pointer-events: none;
+}
+.error-color{
+
+}
+.my-pane {
+  position: fixed;
+  width: 1px;
+  z-index: 99999;
+  height: 1px;
+  background-color: transparent;
+}
+.leaflet-bottom{
+  z-index: 409;
+}
+.el-carousel--horizontal{
+  height: 100%;
+}
+.el-carousel__container{
+  height: calc(100% - 36px);
+}
+.el-carousel__item .project-name {
+  font-size: 18px;
+  margin: 0;
+  position: absolute;
+  z-index: 1;
+}
+
+.el-carousel__item:nth-child(2n) {
+  /*background-color: #99a9bf;*/
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  /*background-color: #d3dce6;*/
+}
+</style>
+<style lang="scss" scoped>
+.maskLayer{
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  cursor: pointer;
+}
+/deep/ .el-carousel__indicator--horizontal .el-carousel__button{
+  background-color: #C0C4CC;
+  opacity: .24;
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+}
+/deep/ .el-carousel__indicator--horizontal.is-active .el-carousel__button{
+  opacity: 1;
+}
+
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index 2347e4094..3473bf3ab 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -1,5 +1,6 @@
 .overview {
   height: 100%;
+  padding: 0 10px;
   background-color: #f6f6f6;
 }
 .overview-content-header{
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 2865f053b..e9feab385 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -57,7 +57,7 @@
                 </template>
                 <template v-slot:after>
                   <el-dropdown-item v-has="'panel_chart_add'">
-                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add template</div>
+                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add by template</div>
                   </el-dropdown-item>
                 </template>
               </top-tool-more-options>
@@ -65,7 +65,7 @@
           </template>
         </div>
         <div id="tableList" class="table-list">
-          <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
+          <div ref="dashboardScrollbar" style="height: calc(100% - 1px); overflow: auto;" :class="overScroll10?'border-t-1-de':'border-t-1-tr'">
             <div class="box-content">
               <chart-list ref="chartList" :class="{'show-top':showTopBtn}" :from="$CONSTANTS.fromRoute.panel" :panel-lock="panelLock" @on-edit-chart="editChart" @on-refresh-time="refreshTime"  @on-remove-chart="delChart" @on-add-group-item-chart="addGroupItem"></chart-list>
             </div>
@@ -102,6 +102,7 @@ export default {
   name: 'panel',
   data () {
     return {
+      overScroll10: false,
       panelLock: true,
       showTopBtn: false, // top按钮
       visible: false,
@@ -571,6 +572,7 @@ export default {
       const _self = this
       this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
         _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
+        _self.overScroll10 = _self.scrollbarWrap.scrollTop > 50
         _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
       }, 300))
     },
@@ -783,6 +785,12 @@ export default {
 }
 </script>
 <style lang="scss">
+  .border-t-1-de{
+    border-top: 1px solid #dedede;
+  }
+  .border-t-1-tr{
+    border-top: 1px solid transparent;
+  }
   .panel {
     height: 100%;
     display: flex;
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index e9b290cfa..70199a742 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -65,7 +65,7 @@
       <addEndpointBox v-if="rightBox.show" :endpoint="object" @close="closeRightBox"></addEndpointBox>
     </transition>
     <transition name="right-box">
-      <edit-endpoint-box-new v-if="rightBox.editShow" :module="object" @close="closeRightEditBox" :disabled="true" :type="'edit'"></edit-endpoint-box-new>
+      <edit-endpoint-box-new v-if="rightBox.editShow" :module="object" @close="closeRightEditBox" :disabled="true" :optionType="'edit'"></edit-endpoint-box-new>
     </transition>
     <transition name="right-box">
       <batchModifyEndpoint v-if="rightBox.batchModify" :module="object" @close="closeRightBatchModify" :selectEndpointList="batchDeleteObjs" :disabled="true" :type="'edit'"></batchModifyEndpoint>
diff --git a/nezha-fronted/src/http.js b/nezha-fronted/src/http.js
index d7db8162a..8c042466a 100644
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -28,7 +28,7 @@ export function get (url, params) {
     axios.get(url, {
       params: params
     }).then(response => {
-      resolve(response.data, response)
+      resolve(response.data)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
diff --git a/nezha-fronted/src/libs/bus.js b/nezha-fronted/src/libs/bus.js
index 16d94d825..72cd8ea68 100644
--- a/nezha-fronted/src/libs/bus.js
+++ b/nezha-fronted/src/libs/bus.js
@@ -272,6 +272,20 @@ export default new Vue({
         return sourceTime
       }
     },
+    // 将本地时区转为系统配置的时区
+    computeTimezoneTime: function (sourceTime) {
+      let offset = localStorage.getItem('nz-sys-timezone')
+      offset = moment.tz(offset).format('Z')
+      if (offset && offset !== 'undefined') {
+        offset = Number.parseInt(offset)
+        const date = new Date(sourceTime)
+        const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
+        const utcTime = date.getTime() + localOffset
+        return utcTime + (offset * 60 * 60 * 1000)
+      } else {
+        return sourceTime
+      }
+    },
     getTimezontDateRange: function (offset = -1) {
       return [
         new Date(new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)),
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index b331092d9..59a157162 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -31,15 +31,16 @@ import loading from '@/components/common/loading'
 import pickTime from '@/components/common/pickTime'
 import bus from '@/libs/bus'
 import theme from '@/assets/css/theme.scss'
-
+import myDatePicker from '@/components/common/myDatePicker'
 import vSelectPage from 'v-selectpage'
 Vue.use(vSelectPage)
-
+Vue.use(myDatePicker)
 Vue.component('Pagination', Pagination)
 Vue.component('searchInput', searchInput)
 Vue.component('element-set', elementSet)
 Vue.component('loading', loading)
 Vue.component('pick-time', pickTime)
+Vue.component('myDatePicker', myDatePicker)
 
 Vue.prototype.$axios = axios
 Vue.prototype.$post = post
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index fb542779a..c7a78873a 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -31,7 +31,7 @@ export default new Router({
         },
         {
           path: 'overview',
-          component: resolve => require(['../components/page/dashboard/overview/overview2.vue'], resolve)
+          component: resolve => require(['../components/page/dashboard/overview/overview.vue'], resolve)
         },
         {
           path: '/monitor/project',
diff --git a/nezha-fronted/src/store/user.js b/nezha-fronted/src/store/user.js
index 3e03307d9..120374328 100644
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -2,6 +2,7 @@ import { post } from '../http'
 import router from '../router'
 import bus from '../libs/bus'
 import { sortByOrderNum } from '../permission'
+import moment from 'moment-timezone'
 
 const user = {
   state: {
@@ -44,6 +45,7 @@ const user = {
         localStorage.setItem('nz-sys-logo', res.data.systemLogo)
       }
       localStorage.setItem('nz-sys-timezone', res.data.timezone)
+      localStorage.setItem('timezoneOffset', moment.tz(res.data.timezone).format('Z'))
       localStorage.setItem('nz-sys-default-cabinet-usize', res.data.defaultCabinetUsize)
       localStorage.setItem('nz-sys-max-terminal-num', res.data.maxTerminalNum)
       localStorage.setItem('nz-sys-asset-ping-switch', res.data.assetPingSwitch)
@@ -56,7 +58,7 @@ const user = {
 
         bus.$emit('login')
         router.push({
-          path: menuList.find(menu => { return menu.route && menu.route != '/header' }).route,
+          path: 'overview',
           query: {
             t: +new Date()
           }