diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 559a81218..6a3aa2aee 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1447,7 +1447,10 @@ export default {
         const arr = []
         arr.push(this.$get(`/asset/asset/${assetId}`))
         arr.push(this.$get(`/asset/asset/feature/${assetId}`))
-        this.$refs['editChart' + chartInfo.id][0].showLoad()
+        console.log(this.$refs['editChart' + chartInfo.id][0])
+        if (this.$refs['editChart' + chartInfo.id][0]) {
+          this.$refs['editChart' + chartInfo.id][0].showLoad()
+        }
 
         // this.$get('/asset/info?id=' + assetId).then(response => {
         //   if (response.code == 200) {
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 8791c5e59..31bef095c 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -465,6 +465,26 @@ export default {
                         if (chartItem.type === 'endpointInfo') {
                           seriesItem.theData.type = 'line'
                         }
+                        if ((chartItem.type === 'line' || chartItem.type === 'stackArea' || chartItem.type === 'bar') && chartItem.param && chartItem.param.threshold) {
+                          seriesItem.theData.markLine = {
+                            silent: true,
+                            symbol: ['circle', 'circle'],
+                            label: {
+                              distance: this.computeDistance(chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(chartItem.param.threshold)),
+                              formatter (params) {
+                                return chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(params.value)
+                              }
+                            },
+                            lineStyle: {
+                              color: '#d64f40',
+                              width: 2,
+                              type: 'dotted'
+                            },
+                            data: [{
+                              yAxis: Number(chartItem.param.threshold)
+                            }]
+                          }
+                        }
                         // 图表中每条线的名字,后半部分
                         let host = ''// up,
                         if (queryItem.metric.__name__) {
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index 11d560be4..b73628fb6 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -1253,19 +1253,19 @@ export default {
             const ePosition = window.ePosition
             const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
             const boxHeight = document.getElementsByClassName('page')[0].offsetHeight
-            this.tooltipPosition.left = ePosition.layerX + 20
-            this.tooltipPosition.top = ePosition.layerY
+            this.tooltipPosition.left = ePosition.offsetX + 20
+            this.tooltipPosition.top = ePosition.offsetY
             this.$nextTick(() => {
               if (this.$refs.topoTooltip) {
-                if ((boxWidth / 2) > ePosition.layerX) {
-                  this.tooltipPosition.left = ePosition.layerX + 20
+                if ((boxWidth / 2) > ePosition.offsetX) {
+                  this.tooltipPosition.left = ePosition.offsetX + 20
                 } else {
-                  this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
+                  this.tooltipPosition.left = ePosition.offsetX - 20 - this.$refs.topoTooltip.offsetWidth
                 }
-                if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
-                  this.tooltipPosition.top = ePosition.layerY
+                if (boxHeight > (ePosition.offsetY + this.$refs.topoTooltip.offsetHeight)) {
+                  this.tooltipPosition.top = ePosition.offsetY
                 } else {
-                  this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
+                  this.tooltipPosition.top = ePosition.offsetY - this.$refs.topoTooltip.offsetHeight
                 }
               }
               if (this.isScreen) {
@@ -1408,6 +1408,10 @@ export default {
             if (this.$refs.topTool) {
               this.$refs.topTool.scaleNum = parseInt(data * 100)
             }
+            const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).canvasPos = domRect
+            }
             break
           }
           case 'locked': {
@@ -1924,6 +1928,7 @@ export default {
         }
         const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
         getTopology(this.topologyIndex).canvasPos = domRect
+        getTopology(this.topologyIndex).resize()
       }, 100)
     },
 
@@ -2015,7 +2020,6 @@ export default {
         item.animatePlay = item.data.animatePlay
         item.data.animateType = item.animateType
         if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-          item.image = ''
           item.animateFrames = []
           item.animateReady = null
           delete item.img
diff --git a/nezha-fronted/src/components/common/alert/nzTooltip.vue b/nezha-fronted/src/components/common/alert/nzTooltip.vue
new file mode 100644
index 000000000..54623b3a1
--- /dev/null
+++ b/nezha-fronted/src/components/common/alert/nzTooltip.vue
@@ -0,0 +1,187 @@
+<template>
+  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels"
+       @mouseenter="tooltipHover(true)"
+       @mouseleave="tooltipHover(false)">
+    <slot name="default"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'nzTooltip',
+  props: {
+    id: {},
+    type: {},
+    // labelLoading:{},
+    that: {},
+    detailList: Boolean,
+    alertTableDialog: Boolean
+  },
+  data () {
+    return {
+      alertLabelData: null,
+      loading: true,
+      heightList: 0
+    }
+  },
+  computed: {
+    calcPosition () {
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const leftOffSetView = this.detailList ? -80 : 10
+        const leftOffSet = this.detailList ? -80 : 10
+        const topOffSet = this.detailList ? 60 : 22
+        if (position.top + this.heightList > clientHeight) {
+          return {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top - this.heightList + topOffSet}px`
+          }
+        } else if (this.alertTableDialog) {
+          const dialog = document.querySelector('#dialog-alert-massage .el-dialog')
+          const dialogHeight = dialog.getBoundingClientRect()
+          if (dialogHeight) {
+            return {
+              left: `${position.left + position.width + 10 - dialogHeight.x}px`,
+              top: `${position.top - dialogHeight.y}px`
+            }
+          }
+        } else {
+          return {
+            left: `${position.left + position.width + leftOffSetView}px`,
+            top: `${position.top}px`
+          }
+        }
+      }
+    },
+    calcHeight () {
+      const self = this
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
+        if (position.top + elHeight > clientHeight) {
+          return 'alert-labelUp'
+        } else {
+          return 'alert-label'
+        }
+      }
+    }
+  },
+  methods: {
+    tooltipHover (show) {
+      if (show) {
+        clearTimeout(this.that.timeout)
+        this.that.timeout = null
+      } else {
+        this.that.loading = false
+      }
+    }
+  },
+  mounted () {
+    this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+  }
+}
+</script>
+
+<style scoped>
+  .alert-label {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 8px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-label__border {
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+    border-radius: 3px 3px 3px 3px 0 0;
+  }
+  .alert-labelUp {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-label::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    /*border: 5px;*/
+    /*border-style: dashed solid dashed dashed;*/
+    /*border-color: transparent #fff transparent transparent;*/
+    position: absolute;
+    top: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .alert-labelUp::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    /*border: 5px;*/
+    /*border-style: dashed solid dashed dashed;*/
+    /*border-color: transparent #fff transparent transparent;*/
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .alert-label-info{
+    /*border: 1px solid #ebeef5;*/
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+  }
+  .alert-label-box{
+    display: flex;
+    flex-direction: row;
+    /*border-bottom: 1px solid #ebeef5;*/
+  }
+  .alert-label-title{
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    line-height: 26px;
+    min-width: 110px;
+    padding: 0 3px 0 13px;
+  }
+  .alert-label-value{
+    word-wrap: break-word;
+    white-space: normal;
+    overflow: hidden;
+    max-width: 200px;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+    line-height: 26px;
+  }
+  .danger{
+    background-color: #d64f40;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .success{
+    background-color: #50d050;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  /deep/.active-icon{
+    margin-top: 0;
+  }
+  .colorFA901C{
+    color: #fa901c;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/i18n.js b/nezha-fronted/src/components/common/i18n.js
index c018835e2..1165394f8 100644
--- a/nezha-fronted/src/components/common/i18n.js
+++ b/nezha-fronted/src/components/common/i18n.js
@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
+import { get } from '@/http'
+import messages from './language'
 Vue.use(VueI18n)
 // 从localStorage获取语言选择。
 const i18n = new VueI18n({
-  locale: localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
-  // messages
+  locale: localStorage.getItem('nz-language') || 'en', // 初始未选择默认 en 英文
+  messages
 })
 locale.i18n((key, value) => i18n.t(key, value)) // 兼容element
 
diff --git a/nezha-fronted/src/components/common/language/index.js b/nezha-fronted/src/components/common/language/index.js
index dfbf6e068..d367c582e 100644
--- a/nezha-fronted/src/components/common/language/index.js
+++ b/nezha-fronted/src/components/common/language/index.js
@@ -1,6 +1,6 @@
-import en from './en'
-import cn from './cn'
+import newen from './newen'
+import newcn from './newcn'
 export default {
-  en: en,
-  cn: cn
+  en: newen,
+  cn: newcn
 }
diff --git a/nezha-fronted/src/components/common/language/newcn.js b/nezha-fronted/src/components/common/language/newcn.js
new file mode 100644
index 000000000..05751a780
--- /dev/null
+++ b/nezha-fronted/src/components/common/language/newcn.js
@@ -0,0 +1,70 @@
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包
+const newcn = {
+  setup: {
+    step0: '欢迎',
+    step1: '数据库',
+    step2: 'Redis',
+    step3: '系统',
+    host: 'Host',
+    port: '端口',
+    language: '语言',
+    welcome: {
+      header: '欢迎使用哪吒安装向导！',
+      guid: '向导将为您做什么?',
+      guid_1: '创建基本的配置',
+      guid_2: '尝试在数据库和Redis设置中查找问题',
+      toContinue: '继续',
+      creatFile: '出于安全原因，您需要通过创建文件来验证安装',
+      createFileTip: '这可以通过执行以下命令来完成',
+      next: '完成后单击“下一步”按钮.'
+    },
+    database: {
+      configTitle: '配置数据库连接',
+      configTip: '请手动创建数据库，并设置连接到此数据库的配置参数，完成后按“下一步”按钮'
+    },
+    redis: {
+      configTitle: '配置Redis连接',
+      configTip: '请设置连接到此redis的配置参数，完成后按“下一步”按钮'
+    },
+    system: {
+      configTitle: '系统配置',
+      configTip: '请输入管理员的用户名和密码，并设置Nezha WEB模块的安装信息，如IP:port',
+      federation: '联邦',
+      federationEnable: '可用',
+      federationDisable: '不可用'
+    },
+    name: '数据库名称',
+    username: '用户名',
+    pin: '密码',
+    alertPath: '网站URL',
+    alertPrefix: '警报前缀',
+    haMode: 'HA 模式',
+    haVip: '虚拟的 IP',
+    next: '下一步',
+    back: '返回',
+    finish: '完成',
+    invalidDb: '数据库配置可能存在一些错误',
+    invalidRedis: 'Redis的配置可能有一些错误',
+    invalidPin: 'Redis的密码可能错误',
+    requirePin: 'Redis可能需要密码',
+    wait: '配置已保存，请耐心等待生效',
+    reloadTimeout: '重新启动服务器花了太多时间，安装可能有一些问题',
+    hadConfig: '已经有人开始配置系统',
+    invalidCode: '身份验证无效，请按照{page}中的描述继续',
+    welcomePage: '欢迎页面',
+    inited: '系统已经被初始化'
+  },
+  login: {
+    username: '登录名',
+    pin: '密码',
+    login: '登录',
+    verify: '验证',
+    verifyDialogTitle: '双因子认证设置',
+    verifyTitle: '双因子认证',
+    verifyContent: '在您的移动设备上输入来自双因子应用程序的代码。 如果您丢失了设备，您可以输入您的恢复代码之一。',
+    verifyPlaceholder: '验证码',
+    bindFail: '绑定失败'
+  },
+  ...zhLocale
+}
+export default newcn
diff --git a/nezha-fronted/src/components/common/language/newen.js b/nezha-fronted/src/components/common/language/newen.js
new file mode 100644
index 000000000..ee37c67d4
--- /dev/null
+++ b/nezha-fronted/src/components/common/language/newen.js
@@ -0,0 +1,79 @@
+import enLocale from 'element-ui/lib/locale/lang/en' // 引入element语言包
+const newen = {
+// 命名原则
+// 创建使用New
+// 表示创建状态用Created，如创建时间Created Time
+// 告警使用Alert，而不是Alarm
+// 账号用Account，username、password等都属于account的一部分
+// A user is the person who uses the account, the account is an inanimate object that is merely registered to an e-mail address.
+  setup: {
+    step0: 'Welcome',
+    step1: 'Database',
+    step2: 'Redis',
+    step3: 'System',
+    host: 'Host',
+    port: 'Port',
+    language: 'Language',
+    welcome: {
+      header: 'Welcome to Nezha setup wizard!',
+      guid: 'What will the wizard do for you?',
+      guid_1: 'Create a basic configuration',
+      guid_2: 'Tries to find problems within your Database and Redis setup',
+      toContinue: 'To continue',
+      creatFile: 'For security reasons you need to authenticate for the installation by creating the file',
+      createFileTip: 'This can be done by executing the following command',
+      next: "Click the 'Next' button when you've finished."
+    },
+    database: {
+      configTitle: 'Configure DB connection',
+      configTip: "Please create database manually,and set the configuration parameters for connection to this database,Press 'Next' button when done"
+    },
+    redis: {
+      configTitle: 'Configure Redis connection',
+      configTip: "Please set the configuration parameters for connection to this redis,Press 'Next' button when done"
+    },
+    system: {
+      configTitle: 'System configuration',
+      configTip: 'Please enter username and password for administrator ,and set the Nezha WEB module install information,like IP:port',
+      federation: 'Federation',
+      federationEnable: 'Enable',
+      federationDisable: 'Disable'
+
+    },
+    name: 'Database name',
+    username: 'Username',
+    pin: 'Password',
+    alertPath: 'Site URL',
+    alertPrefix: 'Alert prefix',
+    haMode: 'HA mode',
+    haVip: 'Virtual IP',
+    next: 'Next',
+    back: 'Back',
+    finish: 'Finish',
+    invalidDb: 'There may be some errors in the configuration of the database',
+    invalidRedis: 'There may be some errors in the configuration of the Redis',
+    invalidPin: "Redis's password may be wrong",
+    requirePin: 'The password may be required by the Redis',
+    wait: 'The configuration has been saved, please wait patiently for it to take effect',
+    reloadTimeout: 'It took too much time to restart the server, there may be some problems when you install',
+    hadConfig: 'Someone has started to configure the system',
+    invalidCode: "The authentication is invalid ,please follow the description in {page} 'To continue'",
+    welcomePage: 'Welcome page',
+    inited: 'The system has been initialized'
+  },
+  login: {
+    username: 'Username',
+    pin: 'Password',
+    login: 'Login',
+    upload: 'Upload license',
+    verify: 'Verify code',
+    verifyDialogTitle: 'Two Factor Authentication Set Up',
+    verifyTitle: 'Two-Factor Authentication',
+    verifyContent: 'Enter the code from the two -factor app on your mobile device. If you\' ve lost your device, you may enter one of your recovery codes.',
+    verifyPlaceholder: 'verify code',
+    bindFail: 'Binding failure'
+  },
+  ...enLocale
+}
+
+export default newen
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 20d57784f..e85ffe84d 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -127,7 +127,7 @@ export default {
       license: {
         warnInfo: '',
         token: '',
-        valid: false
+        valid: true
       },
       uploadFileList: [],
       uploadFile: { file: '', path: '', uuid: '' },
@@ -148,7 +148,7 @@ export default {
   methods: {
     ...mapActions(['loginSuccess']),
     login () {
-      if (this.loading || !this.license.valid) {
+      if (this.loading || !this.license.valid || !this.license.token) {
         return
       }
       if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
@@ -214,6 +214,9 @@ export default {
           localStorage.setItem('nz-username', this.loginData.username)
           localStorage.setItem('nz-prometheus-federation-enabled', res.data.prometheusFederationEnabled)
           localStorage.setItem('nz-language', this.lang)
+          res.data.user = {
+            lang: this.lang
+          }
           this.loginSuccess(res)
         } else {
           this.authToken = res.data.authToken
diff --git a/nezha-fronted/src/components/common/pagination.vue b/nezha-fronted/src/components/common/pagination.vue
index 8356a46c0..7ee78e7c7 100644
--- a/nezha-fronted/src/components/common/pagination.vue
+++ b/nezha-fronted/src/components/common/pagination.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="pagination">
-    <el-pagination
-      ref="page"
-      :current-page="pageObj.pageNo"
-      :page-size="Number(pageObj.pageSize)"
-      :page-sizes="pageSizes?pageSizes:[20, 50, 100]"
-      :total="this.pageObj.total"
-      layout="total, prev, pager, next, slot"
-      @size-change="size"
-      @prev-click="prev"
-      @next-click="next"
-      @current-change="current"
-    >
-      <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" :popper-append-to-body="appendToBody"  :popper-class="popClass" class="pagination-size-select" size="mini" @change="size" @visible-change="popperVisible">
-        <el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
-      </el-select>
-    </el-pagination>
+      <el-pagination
+        ref="page"
+        @size-change="size"
+        @prev-click="prev"
+        @next-click="next"
+        @current-change="current"
+        :current-page="pageObj.pageNo"
+        :page-sizes="pageSizes?pageSizes:[20, 50, 100]"
+        :page-size="Number(pageObj.pageSize)"
+        layout="total, prev, pager, next, slot"
+        :total="this.pageObj.total"
+      >
+        <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"  :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size" :popper-class="popClass" @visible-change="popperVisible">
+          <el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+      </el-pagination>
   </div>
 </template>
 
@@ -101,6 +101,7 @@ export default {
         wraps.forEach(wrap => {
           if (wrap) {
             wrap.scrollTop = 0
+            wrap.scrollLeft = 0
           }
         })
       })
diff --git a/nezha-fronted/src/components/common/project/popData/alertTable.vue b/nezha-fronted/src/components/common/project/popData/alertTable.vue
index 71604e665..51fd15fcb 100644
--- a/nezha-fronted/src/components/common/project/popData/alertTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/alertTable.vue
@@ -13,7 +13,7 @@
         v-loading="tools.loading"
       >
         <template v-slot:top-tool-right>
-          <el-select v-model="state" size="small" value-key="value" @change="getTableData">
+          <el-select v-model="state" size="small" value-key="value" popper-class="right-box-select-top right-public-box-dropdown-top" @change="getTableData">
             <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
           </el-select>
         </template>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 8da2db9e9..5c7f06025 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -1448,6 +1448,10 @@ export default {
             if (this.$refs.topTool) {
               this.$refs.topTool.scaleNum = parseInt(data * 100)
             }
+            const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).canvasPos = domRect
+            }
             break
           }
           case 'locked': {
@@ -2052,7 +2056,6 @@ export default {
         item.animatePlay = item.data.animatePlay
         item.data.animateType = item.animateType
         if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-          item.image = ''
           item.animateFrames = []
           item.animateReady = null
           delete item.img
diff --git a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
index 1dc4fb1c0..d5d9a82a7 100644
--- a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
@@ -102,7 +102,7 @@
                   <span class="datetime-header">{{$t('config.assetLabel.interval')}}: </span>
                   <el-switch
                     v-model="editAssetMeta.param.interval"
-                    @change="$forceUpdate"
+                    @change="$forceUpdate()"
                     active-color="#ee9d3f">
                   </el-switch>
                 </el-row>
@@ -110,7 +110,7 @@
               <div v-if="editAssetMeta.type.toUpperCase()==='DOUBLE'">
                 <el-row>
                   <span class="datetime-header">{{$t('config.assetLabel.decimals')}}: </span>
-                  <el-input-number v-model="editAssetMeta.param.decimals" @change="$forceUpdate" :min="0" :max="10" :controls="false" size="small"></el-input-number>
+                  <el-input-number v-model="editAssetMeta.param.decimals" @change="$forceUpdate()" :min="0" :max="10" :controls="false" size="small"></el-input-number>
                 </el-row>
               </div>
             </el-form-item>
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index deabbf850..af195fc7b 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -14,7 +14,8 @@
                             <li v-for="(val,ind) in history_once" @click="select_history(ind,$event)" :key="ind" :id="'search-history-pick-'+ind">
                                 <span v-for="(item,key) in val" :key="key">
                                     <span class="name">{{item.name}}: </span>
-                                    <span class="value">{{item.val+' '}}</span>
+                                    <span class="value" v-if="item.val">{{item.val+' '}}</span>
+                                    <span class="value" v-else>{{' '}}</span>
                                 </span>
                             </li>
                         </ul>
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index 9603037b0..b4ea4f7ed 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -110,8 +110,8 @@
       fixed="right">
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
-        <button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown v-has="['alertMessage_expired']" size="medium" trigger="click" @command="tableOperation">
+        <button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)" :disabled="scope.row.alertRule.type !== 1" :class="{'table-operation-item--disable': scope.row.alertRule.type !== 1}"><i class="nz-icon nz-icon-view1"></i></button>
+        <el-dropdown v-has="['alertMessage_expired', 'alertSilence_add']" size="medium" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index 1d31fd720..85591894b 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -95,64 +95,61 @@
           </span>
         </template>
         <template v-else-if="item.prop === 'configs'">
-<!--          <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable">-->
-<!--            <span class="configs-endpoint metrics">{ Metrics }</span>-->
-<!--            <div class="endpointConfigsTips" slot="content">-->
-<!--              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[0].config)"></i></span>-->
-<!--              <pre >{{JSON.stringify(scope.row.configs[0].config,null,2)}}</pre>-->
-<!--            </div>-->
-<!--          </el-tooltip>-->
-<!--          <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[1].enable">-->
-<!--            <span class="configs-endpoint logs">{ Logs }</span>-->
-<!--            <div class="endpointConfigsTips" slot="content">-->
-<!--              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[1].config)"></i></span>-->
-<!--              <pre >{{JSON.stringify(scope.row.configs[1].config,null,2)}}</pre>-->
-<!--            </div>-->
-<!--          </el-tooltip>-->
-
-          <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable || scope.row.configs[1].enable">
-            <span class="configs-endpoint metrics">[{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]</span>
-            <div class="endpointConfigsTips" slot="content">
+          <span class="configs-endpoint metrics"
+                @mouseenter="labelHover(scope.row, item.prop, true, $event)"
+                @mouseleave="labelHover(scope.row, item.prop, false, $event, true)">
+            [{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]
+          </span>
+          <nz-tooltip :that="scope.row[item.prop]" class="data-column__" v-if="scope.row[item.prop] && scope.row[item.prop].loading" :type="item.prop">
+            <div name="default">
               <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(clConfigs(scope.row))"></i></span>
               <pre class="copy-value-content__pre">{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
             </div>
-          </el-tooltip>
+          </nz-tooltip>
         </template>
+
         <template v-else-if="item.prop === 'state'">
-          <el-popover placement="left" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[0].state<2">
-            <div>
+          <!--          metrics-->
+          <span style="width: auto;display: inline-block;cursor: pointer"
+                @mouseenter="labelHoverConfigs(scope.row, 0, true, $event)"
+                @mouseleave="labelHoverConfigs(scope.row, 0, false, $event)"
+          >
+            <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+            <span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state">
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span v-else-if="scope.row.configs[0].state===1">
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="scope.row.configs[0].state">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+          <nz-tooltip :that="scope.row.configs[0]"  v-if="scope.row.configs[0] && scope.row.configs[0].loading && scope.row.configs[0].state  > 1" :type="'configs[0]'">
+            <div name="default">
               <div v-html="suspendedStr(scope.row.configs[0].state)"></div>
             </div>
-            <span slot="reference" style="width: auto">
-              <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
-              <span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state">
-                <span class="active-icon red-bg inline-block"></span>
-              </span>
-              <span v-else-if="scope.row.configs[0].state===1">
-                <span class="active-icon green-bg inline-block"></span>
-              </span>
-              <span v-else-if="scope.row.configs[0].state">
-                <span class="active-icon gray-bg inline-block"></span>
-              </span>
-            </span>
-          </el-popover>
-          <el-popover placement="right" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[1].state<2">
-            <div>
+          </nz-tooltip>
+          <!--          logs-->
+         <span style="width: auto;display: inline-block;cursor: pointer"
+               @mouseenter="labelHoverConfigs(scope.row, 1, true, $event)"
+               @mouseleave="labelHoverConfigs(scope.row, 1, false, $event)">
+           <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
+           <span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state">
+             <span class="active-icon red-bg inline-block"></span>
+           </span>
+           <span v-else-if="scope.row.configs[1].state===1">
+             <span class="active-icon green-bg inline-block"></span>
+           </span>
+           <span v-else-if="scope.row.configs[1].state">
+             <span class="active-icon gray-bg inline-block"></span>
+           </span>
+         </span>
+          <nz-tooltip :that="scope.row.configs[1]"  v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'">
+            <div name="default">
               <div v-html="suspendedStr(scope.row.configs[1].state)"></div>
             </div>
-            <span slot="reference" style="width: auto">
-              <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
-              <span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state">
-                <span class="active-icon red-bg inline-block"></span>
-              </span>
-              <span v-else-if="scope.row.configs[1].state===1">
-                <span class="active-icon green-bg inline-block"></span>
-              </span>
-              <span v-else-if="scope.row.configs[1].state">
-                <span class="active-icon gray-bg inline-block"></span>
-              </span>
-            </span>
-          </el-popover>
+          </nz-tooltip>
         </template>
         <template v-else-if="item.prop === 'enabled'">
           <span v-if="scope.row[item.prop] === 1">{{$t('project.endpoint.enable')}}</span>
@@ -199,10 +196,12 @@
 <script>
 import table from '@/components/common/mixin/table'
 import alertLabel from '../../alert/alertLabel'
+import nzTooltip from '../../alert/nzTooltip'
 export default {
   name: 'endpointTable',
   components: {
-    alertLabel
+    alertLabel,
+    nzTooltip
   },
   mixins: [table],
   props: {
@@ -313,13 +312,38 @@ export default {
       return str
     },
     // label 鼠标划入
-    labelHover (item, type, loading, e) {
+    labelHover (item, type, loading, e, slow) {
       if (e) {
         const dom = e.currentTarget
         const position = dom.getBoundingClientRect()
         this.$set(item[type], 'position', position)
       }
-      this.$set(item[type], 'loading', loading)
+      if (slow) {
+        item[type].timeout = setTimeout(() => {
+          this.$set(item[type], 'loading', loading)
+        }, 200)
+      } else {
+        if (item[type].timeout) {
+          clearTimeout(item[type].timeout)
+          item[type].timeout = null
+        }
+        this.$set(item[type], 'loading', loading)
+      }
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    labelHoverConfigs (item, type, loading, e, slow) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item.configs[type], 'position', position)
+      }
+      if (slow) {
+        item.configs[type].timeout = setTimeout(() => {
+          this.$set(item.configs[type], 'loading', loading)
+        }, 200)
+      } else {
+        this.$set(item.configs[type], 'loading', loading)
+      }
       // this.$set(this.tableData,index,item);// 调用父组件
     },
     clConfigs (item) {
@@ -349,6 +373,9 @@ export default {
     border-radius: 4px;
     padding: 2px 7px;
     color: #3C92F1;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
   }
   .configs-endpoint.metrics{
     color: #3C92F1;
@@ -371,16 +398,10 @@ export default {
   .endpoint-cell-left{
     margin-right: 5px;
   }
-</style>
-<style>
-  .endpointConfigsTips{
-    min-width: 150px;
-    padding:3px 3px 0 8px ;
-  }
   .copy-value-content{
     position: absolute;
-    right: 6px;
-    top: 6px;
+    right: 8px;
+    top: 4px;
   }
   .copy-value-content__pre {
     height: 200px;
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 4a64f04ac..39b130d9c 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -450,7 +450,11 @@ export default {
       }
       this.$get('/alert/rule/' + row.alertRule.id).then(res => {
         this.currentMsg = { ...row, alertRule: { ...res.data } }
-        this.graphShow = true
+        if (row.alertRule.type !== 1) {
+          this.graphShow = false
+        } else {
+          this.graphShow = true
+        }
         this.$nextTick(() => {
           this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
           this.queryDate()
@@ -819,6 +823,7 @@ export default {
       })
     },
     reloadTable (obj) {
+      this.pageObj.pageNo = 1
       const params = JSON.parse(JSON.stringify(obj))
       if (this.detailType === 'view') {
         const obj = {}
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index b4ae6cbfa..6429abadc 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -485,6 +485,7 @@ export default {
       })
     },
     reloadTable (obj) {
+      this.pageObj.pageNo = 1
       const params = JSON.parse(JSON.stringify(obj))
       if (this.detailType === 'view') {
         const obj = {}
diff --git a/nezha-fronted/src/components/page/config/profileChangePin.vue b/nezha-fronted/src/components/page/config/profileChangePin.vue
index 41534b0f6..6a189bcf7 100644
--- a/nezha-fronted/src/components/page/config/profileChangePin.vue
+++ b/nezha-fronted/src/components/page/config/profileChangePin.vue
@@ -90,13 +90,12 @@ export default {
             pin: this.user.pin,
             newPin: this.user.newPin
           }
-          this.$get('/sys/user/pin?oldPin=' + paramObj.pin + '&newPin=' + paramObj.newPin).then(response => {
+          this.$put('/sys/user/pin?oldPin=' + paramObj.pin + '&newPin=' + paramObj.newPin).then(response => {
             if (response && response.code == 200) {
               this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
               this.user.pin = ''
               this.user.newPin = ''
               this.user.confirmPin = ''
-              this.close()
             } else {
               this.$message.error(response.msg)
             }
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index 469e69f1c..6b730ff7e 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -17,7 +17,7 @@
               <el-input v-model.number="basic.default_cabinet_usize" id="system-baisc-default_cabinet_usize"></el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.timezone')" prop="timezone">
-              <el-select v-model="basic.timezone" id="system-baisc-timezone" filterable popper-class="right-box-select-top">
+              <el-select v-model="basic.timezone" id="system-baisc-timezone" filterable popper-class="right-box-select-top right-public-box-dropdown-top">
                 <el-option v-for="(item,index) in timezoneOption" :key="index" :label="item.name" :value="item.name" >
                   <div style="display: flex;justify-content: space-between;padding: 5px;">
                     <div >{{item.name}}</div>
@@ -75,7 +75,7 @@
               </el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.monitor.asset_ping_from')" prop="asset_ping_from">
-              <el-select v-model="monitor.asset_ping_from" popper-class="right-box-select-top">
+              <el-select v-model="monitor.asset_ping_from" popper-class="right-box-select-top right-public-box-dropdown-top">
                 <el-option label="Global" value="1"></el-option>
                 <el-option label="Per-datacenter" value="2"></el-option>
               </el-select>
@@ -88,7 +88,7 @@
               </el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="metrics_storage_type">
-              <el-select v-model="monitor.metrics_storage_type" popper-class="right-box-select-top">
+              <el-select v-model="monitor.metrics_storage_type" popper-class="right-box-select-top right-public-box-dropdown-top">
                 <el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
                 <el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>
               </el-select>
@@ -125,7 +125,7 @@
               </el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.monitor.logs_storage_type')" prop="logs_storage_type">
-              <el-select v-model="monitor.logs_storage_type" popper-class="right-box-select-top">
+              <el-select v-model="monitor.logs_storage_type" popper-class="right-box-select-top right-public-box-dropdown-top">
                 <el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
                 <el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>
               </el-select>
@@ -198,7 +198,7 @@
               <div class="el-form-item__tip">{{$t("config.system.email.testAccountTip")}}</div>
             </el-form-item>
             <el-form-item :label="$t('config.system.email.securityType')" prop="email_security_type">
-              <el-select v-model="email.email_security_type" :disabled="email.email_enable == 'off'" popper-class="right-box-select-top">
+              <el-select v-model="email.email_security_type" :disabled="email.email_enable == 'off'" popper-class="right-box-select-top right-public-box-dropdown-top">
                 <el-option label="None" value="NONE"></el-option>
                 <el-option label="SSL" value="SSL"></el-option>
                 <el-option label="TLS" value="TLS"></el-option>
@@ -294,7 +294,7 @@
           <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="reset"  label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
             <el-form-item  prop="type" :label="$t('config.system.reset.type')">
-              <el-select v-model="reset.type" :placeholder="$t('el.select.placeholder')" multiple popper-class="right-box-select-top">
+              <el-select v-model="reset.type" :placeholder="$t('el.select.placeholder')" multiple popper-class="right-box-select-top right-public-box-dropdown-top">
                 <template v-for="item in resetOptions" >
                   <el-option :label="item.label" :value="item.value" :key="item.label"></el-option>
                 </template>
diff --git a/nezha-fronted/src/components/page/config/template/chartTemp.vue b/nezha-fronted/src/components/page/config/template/chartTemp.vue
index 3a391c9a8..28bc2d820 100644
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -117,6 +117,7 @@ export default {
     return {
       url: 'visual/panel/chart',
       tableId: 'chartTemp',
+      orderBy: 'id',
       /* 搜素相关 */
       searchMsg: { // 给搜索框子组件传递的信息
         searchLabelList: [
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index c04b2f0fb..c53fc3e62 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -121,7 +121,7 @@
             </el-form-item>-->
             <!--lock-->
             <el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.lock')" class="form-item--half-width" prop="lock">
-              <el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate">
+              <el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate()">
                 <el-option v-for="item in lockList" :key="item.value" :label="$t(item.label)" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
                 </el-option>
@@ -149,7 +149,7 @@
             </el-form-item>
 
             <el-form-item v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' || editChart.type == 'bar'" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
-              <el-select id="chart-box-statistics" v-model="editChart.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate">
+              <el-select id="chart-box-statistics" v-model="editChart.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate()">
                 <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
                 </el-option>
@@ -274,11 +274,11 @@
             </el-radio-group>
           </el-form-item>
           <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'" id="chart-box-valueMapping-type1">
-            <template  v-for="(mapping, index) in editChart.param.valueMapping.mapping">
-              <el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.value')" class="form-item--half-width-other" prop="span" >
+            <div  v-for="(mapping, index) in editChart.param.valueMapping.mapping" :key="index">
+              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" class="form-item--half-width-other" prop="span" >
                 <el-input v-model="mapping.value" size="small" style="display: inline-block;;" type="input"></el-input>
               </el-form-item>
-              <el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other  form-item--half-width-other-two" prop="span">
+              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other  form-item--half-width-other-two" prop="span">
                 <el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input"></el-input>
                 <!--颜色选择器 start-->
                 <div class="color-show">
@@ -287,11 +287,11 @@
                 <!--颜色选择器 end-->
                 <span  class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
               </el-form-item>
-            </template>
+            </div>
           </template>
           <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'" id="chart-box-valueMapping-type2">
-            <template v-for="(mapping, index) in editChart.param.valueMapping.mapping">
-              <div :key="index" class="form-item--half-width-other" style="display: inline-block;margin-left: 15px">
+            <div v-for="(mapping, index) in editChart.param.valueMapping.mapping" :key="index">
+              <div class="form-item--half-width-other" style="display: inline-block;margin-left: 15px">
                 <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" class="one-third-form-item-left" prop="span" >
                   <el-input v-model="mapping.from" size="small" type="input"></el-input>
                 </el-form-item>
@@ -299,17 +299,16 @@
                   <el-input v-model="mapping.to" size="small" type="input"></el-input>
                 </el-form-item>
               </div>
-              <el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other-two range" prop="span">
+              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other-two range" prop="span">
                 <el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input" ></el-input>
                 <!--颜色选择器 start-->
                 <div class="color-show">
                   <nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/>
                 </div>
-
                 <!--颜色选择器 end-->
                 <span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus"  style="color: #EC7F66"></i></span>
               </el-form-item>
-            </template>
+            </div>
           </template>
 
           <!--value mapping end-->
@@ -1545,6 +1544,7 @@ export default {
       })
     },
     valueMappingChange: function (value) {
+      console.log(this.editChart.param.valueMapping.type)
       if (this.editChart.param.valueMapping.type == 'value') {
         this.editChart.param.valueMapping.mapping = [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
         this.showPicker = [{ bac: false, text: false }]
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
index d0a6cc1c2..3009a14ba 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -427,7 +427,8 @@ export default {
       }
     },
     toProject (projectInfo) { // 跳转对应project页面
-      this.$store.commit('setOverViewProject', projectInfo)
+      this.$store.commit('currentProjectChange', projectInfo)
+      this.jumpTo('project')
     },
     queryAssetData () {
       return new Promise(resolve => {
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
new file mode 100644
index 000000000..3d2f4622d
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -0,0 +1,1654 @@
+<template>
+  <div class="overview">
+    <!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
+    <div class="my-pane" :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}"></div>
+    <!--标题-->
+    <div class="overview-content-header">
+      <div class="header-title" :class="{'hide-div':!isFullScreen}">{{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">
+          <div class="time">{{sysTime}}</div>
+          <div class="date">
+            <div class="week">{{sysWeek}}</div>
+            <div class="sys-date">{{sysDate}}</div>
+          </div>
+          <pick-time :refresh-data-func="setFreshDataTimer" :showTimePicker="false" :use-chart-unit="false" class="float-right pickTime margin-l-5" ref="pickTime" v-model="searchTime" id="overview-search"></pick-time>
+          <div class="operation" @click="switchFullScreen" id="overview-full-screen"><span ><i class="nz-icon screen-icon" :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}"></i></span></div>
+        </div>
+      </div>
+    </div>
+    <!--内容-->
+    <div class="overview-content">
+      <!--第一行-->
+      <div class="content-row-box">
+        <div class="content-col-box">
+          <div class="content-col-content clickable" v-loading="assetLoading" @click="jumpTo('asset')" id="overview-to-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 ? assetData.totalStat.total  + '' : ''" class="item" effect="light" placement="top">
+              <div class="content-col-content-num">
+                <vue-countup :decimals="(assetData ? assetData.totalStat.total  : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(assetData ? assetData.totalStat.total  : '') | numberFormat"
+                             :start-value="0"></vue-countup>
+                <span class="overview-row-unit">{{(assetData ? assetData.totalStat.total  : '') | unitFormat}}</span>
+                <span class="over-num" v-if="(assetData ? assetData.totalStat.total  : 0) > 1000 ">+</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 class="content-col-content" v-loading="projectLoading">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-project"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="projectData ? projectData.projectStat.length + '' : ''" class="item" effect="light" placement="top">
+              <div class="content-col-content-num">
+                <vue-countup :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :start-value="0"></vue-countup>
+                <span class="overview-row-unit">{{(projectData ? projectData.projectStat.length  : '') | unitFormat}}</span>
+                <span class="over-num" v-if="(projectData ? projectData.projectStat.length : 0) > 1000 ">+</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 class="content-col-content" v-loading="moduleLoading">
+            <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 ? moduleData.moduleStat.length + '' : ''" class="item" effect="light" placement="top">
+              <div class="content-col-content-num">
+                <vue-countup :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :start-value="0"></vue-countup>
+                <span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length  : '') | unitFormat}}</span>
+                <span class="over-num" v-if="(moduleData ? moduleData.moduleStat.length : 0) > 1000 ">+</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 class="content-col-content" v-loading="endpointLoading">
+            <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 ? endpointData.total + '' : ''" class="item" effect="light" placement="top">
+              <div class="content-col-content-num">
+                <vue-countup :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :start-value="0"></vue-countup>
+                <span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
+                <span class="over-num" v-if="(endpointData ? endpointData.total : 0) > 1000 ">+</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 class="content-col-content clickable" v-loading="alertMessageLoading" @click="jumpTo('alertList')" id="overview-to-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 ? alertMessageData.alertMessageTotal + '' : ''" class="item" effect="light" placement="top">
+              <div class="content-col-content-num">
+                <vue-countup :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :start-value="0"></vue-countup>
+                <span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
+                <span class="over-num" v-if="(alertMessageData ? alertMessageData.alertMessageTotal : 0) > 1000 ">+</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>
+            <!--<span class="content-col-title-tools">-->
+              <!--<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>-->
+              <!--<span class="content-col-title-tool">-->
+                <!--<div class="diy-content">-->
+                  <!--<span>{{$t("dashboard.overview.dataCenter.dataCenter")}}</span>-->
+                  <!--<i class="el-input__icon nz-icon nz-icon-arrow-down"></i>-->
+                <!--</div>-->
+                <!--<el-cascader-->
+                  <!--:options="trafficData"-->
+                  <!--:props="{multiple: true}"-->
+                  <!--clearable-->
+                  <!--collapse-tags-->
+                  <!--placeholder=""-->
+                  <!--popper-class="trend-cascader"-->
+                  <!--v-model="trendSearchParam.select"-->
+                <!--&gt;</el-cascader>-->
+              <!--</span>-->
+            <!--</span>-->
+          </div>
+          <div class="content-col-content"  v-loading="topologyLoading">
+            <transition name = "el-zoom-in-center">
+              <div style="width: 100%;height: 100%;position: relative" v-if="allProject&&allProject.length>0">
+                <el-carousel :interval="5000"  arrow="hover" :trigger="'click'">
+                  <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
+                      :obj="item"
+                      :fromOverView="true"
+                      :topologyIndexF="index"
+                    />
+                  </el-carousel-item>
+                </el-carousel>
+              </div>
+            </transition>
+            <div class="chart-no-data" v-if="allProject.length===0">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">
+            <!--<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>-->
+            <div id="map" style="height: 100%; width: 100%"></div>
+
+            <!--<div class="right-bottom-zoom">
+              <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
+              <div class="zoom-option" @click="zoomMap(-1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
+              <div></div>
+            </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 chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" @is-loading="(isLoading)=>{this.assetTypeLoading = isLoading}"></chart-box>
+            <!--                <div class="no-data-tip" v-if="!assetTypeLoading && assetData.typeStat && assetData.typeStat.length == 0">N/A</div>-->
+            <div v-if="!assetTypeLoading && (!assetData.typeStat || assetData.typeStat.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 class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
+                <i class="nz-icon nz-icon-arrow-down"></i>
+                <transition name="el-zoom-in-top">
+                  <ul class="el-dropdown-menu el-popper el-dropdown-menu&#45;&#45;mini" v-if="bottom3DropdownShow">
+                    <li @click="alertMessageChange('asset')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.asset.title")}}</li>
+                    <li @click="alertMessageChange('module')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.module.module")}}</li>
+                  </ul>
+                </transition>
+              </span>-->
+            </span>
+          </div>
+          <div class="content-col-content" style="overflow: hidden">
+            <!--<chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="ruleBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>-->
+            <!--<chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>-->
+            <messageAsset v-show="messageAssetData.length>0" :data="messageAssetData" :col="col" :length="length" ref="assetHexagon" :from="'asset'" :hexagonSvgID="'hexagonSvg1'" :show-tooltip="true" :from-type="'asset'"/>
+            <div class="chart-no-data" v-if="messageAssetData.length===0">No Data</div>
+          </div>
+        </div>
+        <!--第三个图-->
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>{{$t("dashboard.overview.alert.moduleTopN")}}</span>
+            <!--<span> <el-input v-model="col"  size="small"/></span>-->
+            <!--<span> <el-input v-model="length" size="small"/></span>-->
+            <!--<el-dropdown trigger="click" :show-timeout="0" size="small">
+              <span>Top&nbsp;{{topFilter.rule}}<i class="nz-icon nz-icon-arrow-down el-icon&#45;&#45;right"></i></span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('rule', item)">{{item}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>-->
+          </div>
+          <div class="content-col-content" style="overflow: hidden">
+            <!--<chart-box axis-tooltip="y" chart-type="ruleBar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>-->
+            <!--                <div class="no-data-tip" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">N/A</div>-->
+            <messageAsset v-show="messageModuleData.length>0" :data="messageModuleData" :col="col" :length="length" ref="moduleHexagon" :from="'module'" :hexagonSvgID="'hexagonSvg2'" :show-tooltip="true" :from-type="'module'"/>
+            <div class="chart-no-data" v-if="messageModuleData.length===0">No Data</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="axis-tooltip el-popover yAxis-text-style"></div>
+    <!--用于assetType饼图label-->
+    <img src='../../../../assets/img/up.png' id="upPic" style="display: none;">
+    <img src='../../../../assets/img/down.png' id="downPic" 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 timeout // 第三行第三个图的dropdown下拉菜单timeout
+
+let tooltipEndpointChart
+let tooltipPrometheusChart
+const regNum = /^[0-9]+.?[0-9]*/
+export default {
+  name: 'overview2',
+  components: {
+    'chart-box': chart,
+    'vue-countup': VueCountUp,
+    topology: overViewTopology,
+    messageAsset
+  },
+  data () {
+    return {
+      // top tool
+      isFullScreen: false,
+      sysTime: '',
+      sysDate: '',
+      sysWeek: '',
+      systemName: localStorage.getItem('nz-sys-name'),
+      topologyLoading: true,
+      // data
+      assetLoading: false,
+      assetTypeLoading: false, // 第三行第一个图
+      assetData: '',
+      projectLoading: false,
+      projectData: '',
+      moduleLoading: false,
+      moduleData: '',
+      endpointLoading: false,
+      endpointData: '',
+      alertMessageLoading: false,
+      alertMessageData: '',
+      alertRuleData: '',
+      map: null,
+      mapLoading: false,
+      chartSeries: [],
+      trendLoading: false,
+      assetTypeSeries: [],
+      messageByRuleSeries: [],
+      ruleMessageLoading: false, // 第三行第二个图
+      messageByAssetSeries: [],
+      assetMessageLoading: false, // 第三行第三个图
+      messageByModuleSeries: [],
+      moduleMessageLoading: false, // 第三行第三个图
+      alertRuleStatData: {},
+      dataCenterMapSeries: [],
+      trafficDatacenterData: [],
+      trafficTagData: [],
+      trafficData: [],
+      allProject: [],
+      trendSearchParam: { start: '', end: '', dc: [], tag: [], select: [], watch: true },
+
+      alertMessageShow: 'asset', // asset/module
+      bottom3DropdownShow: false, // 最底部行第三列的下拉选择框
+
+      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: []
+    }
+  },
+  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.queryProjectData(),
+        this.queryModuleData(),
+        this.queryEndpointData(),
+        this.queryAlertMessageData(),
+        this.queryAlertRuleData(),
+        // this.queryAlertTrendData(),
+        this.initMap(),
+        this.queryAlertStatByRule(), // 3-3
+        this.queryAlertStatByAsset(), // 3-2 新的也是这个 3-2
+        this.queryAlertStatByModule(), // 新的3-3
+        this.getDcTrafficData(),
+        this.queryAllProjectData()
+      ]
+    },
+    setFreshDataTimer: function () {
+      // this.freshDataTimer=setInterval(()=>{
+      //   if(this.$refs.overviewLoading){
+      //     this.$refs.overviewLoading.startLoading();
+      //   }
+      //   Promise.all(this.initData()).then(()=>{
+      //     if(this.$refs.overviewLoading){
+      //       this.$refs.overviewLoading.endLoading();
+      //     }
+      //   })
+      // },5*60*1000)
+      Promise.all(this.initData()).then(() => {
+        if (this.$refs.overviewLoading) {
+          this.$refs.overviewLoading.endLoading()
+        }
+      })
+    },
+    querySystemState: function () {
+      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}/1`))
+        })
+        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('currentProjectChange', projectInfo)
+      this.jumpTo('project')
+    },
+    queryAssetData () {
+      return new Promise(resolve => {
+        this.assetLoading = true
+        this.$refs.assetTypePie.startLoading()
+        this.$get('overview/assetStat').then(response => {
+          this.assetLoading = false
+          if (response.code === 200) {
+            this.assetData = response.data
+
+            /* 饼图 */
+            const legendData = []
+            const typeSeriesData = []
+
+            const vm = this
+            const assetTotalCount = (function () {
+              let count = 0
+              vm.assetData.typeStat && vm.assetData.typeStat.forEach(item => {
+                count += item.total
+              })
+              return count
+            }())
+
+            vm.assetData.typeStat && this.assetData.typeStat.forEach(item => {
+              legendData.push([item.name, (item.total * 100 / assetTotalCount).toFixed(2)])
+              typeSeriesData.push({ name: item.name, value: item.total, up: item.pingUp, down: item.pingDown })
+            })
+            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',
+                formatter: function (params) {
+                  return `
+                  <div class="overview-tooltip-box">
+                    <div class="tooltip-item"><div class="item-status red"></div>${params.data.down}</div>
+                    <div class="tooltip-item"><div class="item-status green"></div>${params.data.up}</div>
+                  </div>`
+                }
+              },
+              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 || !vm.assetData.typeStat || vm.assetData.typeStat.length == 0) {
+              legend.show = false
+            }
+            this.assetData.typeStat && this.assetData.typeStat.length !== 0 && this.$refs.assetTypePie.setSeries(series, legend, legendData)
+            this.$refs.assetTypePie.endLoading()
+          }
+          resolve()
+        })
+      })
+    },
+    queryProjectData () {
+      return new Promise(resolve => {
+        this.projectLoading = true
+        this.$get('overview/projectStat').then(response => {
+          this.projectLoading = false
+          if (response.code === 200) {
+            this.projectData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryModuleData () {
+      return new Promise(resolve => {
+        this.moduleLoading = true
+        this.$get('overview/moduleStat').then(response => {
+          this.moduleLoading = false
+          if (response.code === 200) {
+            this.moduleData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryEndpointData () {
+      return new Promise(resolve => {
+        this.endpointLoading = true
+        this.$get('overview/endpointStat').then(response => {
+          this.endpointLoading = false
+          if (response.code === 200) {
+            this.endpointData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertMessageData () {
+      return new Promise(resolve => {
+        this.alertMessageLoading = true
+        this.$get('overview/alertMessageStat').then(response => {
+          this.alertMessageLoading = false
+          if (response.code === 200) {
+            this.alertMessageData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertRuleData () {
+      return new Promise(resolve => {
+        this.$get('overview/alertRuleStat').then(response => {
+          if (response.code === 200) {
+            this.alertRuleData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertTrendData () {
+      return new Promise(() => {
+        this.$refs.chartbox.startLoading()
+        this.chartSeries = []
+        const rxPromise = new Promise((resolve, reject) => {
+          this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response => {
+            if (response.status == 'success') {
+              if (response.data.result) {
+                const series = {
+                  name: 'RX',
+                  symbol: 'none', // 去掉点
+                  smooth: 0.2, // 曲线变平滑
+                  data: [],
+                  type: 'line',
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
+                  }
+                }
+                if (response.data.result.length > 0) {
+                  series.data = response.data.result[0].values.map((item) => {
+                    return [item[0] * 1000, item[1]]
+                  })
+                }
+                this.chartSeries.push(series)
+                if (this.chartSeries.length == 2) {
+                  this.$refs.chartbox.modifyOption('tooltip', 'backgroundColor', 'rgba(255, 255, 255, 0.66)')
+                  this.$refs.chartbox.modifyOption('tooltip', 'extraCssText', 'box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);')
+                  this.$refs.chartbox.modifyOption('tooltip', 'textStyle', { color: '#000' })
+                  this.$refs.chartbox.modifyOption('grid', 'top', 40)
+                  this.$refs.chartbox.modifyOption('grid', 'left', 10)
+                  this.$refs.chartbox.modifyOption('grid', 'right', 40)
+                  this.$refs.chartbox.modifyOption('grid', 'bottom', 18)
+                  this.$refs.chartbox.modifyOption('grid', 'containLabel', true)
+                  this.$refs.chartbox.setSeries(this.chartSeries)
+                }
+              }
+              resolve(true)
+            } else {
+              console.error(response)
+              resolve(false)
+            }
+          })
+        })
+        const txPromise = new Promise((resolve, reject) => {
+          this.$get('/prom/api/v1/query_range', this.trendParamHandle('tx')).then(response => {
+            if (response.status == 'success') {
+              if (response.data.result) {
+                const series = {
+                  name: 'TX',
+                  symbol: 'none', // 去掉点
+                  smooth: 0.2, // 曲线变平滑
+                  data: [],
+                  type: 'line',
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
+                  }
+                }
+                if (response.data.result.length > 0) {
+                  series.data = response.data.result[0].values.map((item) => {
+                    return [item[0] * 1000, item[1]]
+                  })
+                }
+                this.chartSeries.push(series)
+                if (this.chartSeries.length == 2) {
+                  this.$refs.chartbox.modifyOption('tooltip', 'backgroundColor', 'rgba(255, 255, 255, 0.66)')
+                  this.$refs.chartbox.modifyOption('tooltip', 'extraCssText', 'box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);')
+                  this.$refs.chartbox.modifyOption('tooltip', 'textStyle', { color: '#000' })
+                  this.$refs.chartbox.modifyOption('grid', 'top', 40)
+                  this.$refs.chartbox.modifyOption('grid', 'left', 10)
+                  this.$refs.chartbox.modifyOption('grid', 'right', 40)
+                  this.$refs.chartbox.modifyOption('grid', 'bottom', 18)
+                  this.$refs.chartbox.setSeries(this.chartSeries)
+                }
+              }
+              resolve(true)
+            } else {
+              console.error(response)
+              resolve(false)
+            }
+          })
+        })
+        Promise.all([rxPromise, txPromise]).then(resolve => {
+          this.$refs.chartbox.endLoading()
+          resolve()
+        }, reject => {
+          this.$refs.chartbox.endLoading()
+          reject()
+        })
+      })
+    },
+    trendParamHandle (t) {
+      let before
+      let end
+      if (this.trendSearchParam.start) {
+        before = this.trendSearchParam.start
+      } else {
+        before = new Date()
+        before.setHours(new Date().getHours() - 1)
+        before = this.dateFormat('yyyy-mm-dd HH:MM:SS', before)
+      }
+      if (this.trendSearchParam.end) {
+        end = this.trendSearchParam.end
+      } else {
+        end = new Date()
+        end = this.dateFormat('yyyy-mm-dd HH:MM:SS', end)
+      }
+      let metric
+      let rule
+      if (t == 'rx') {
+        metric = { rx: '"1"' }
+        rule = 'ifInOctets'
+      } else if (t == 'tx') {
+        metric = { tx: '"1"' }
+        rule = 'ifOutOctets'
+      }
+      if (this.trendSearchParam.select.length > 0) {
+        const dc = []
+        const tags = []
+        this.trendSearchParam.select.forEach(select => {
+          const item = select[select.length - 1]
+          const type = item.split('::')[0]
+          const value = item.split('::')[1]
+          if (type == '$dc$') {
+            dc.push(value)
+          } else if (type == '$key$') {
+            /* let hasDc = dc.some(d => {
+                if (d == select[0].split("::")[1]) {
+                  return true;
+                }
+                return false;
+              });
+              if (!hasDc) {
+                dc.push(select[0].split("::")[1]);
+              }
+              let hasKey = tags.some(tag => {
+                if (tag.key == value) {
+                  //选择所有这个tag的value
+                  first: for (let i = 0; i < this.trafficData.length; i++) {
+                    for (let j = 0; j < this.trafficData[i].children.length; j++) {
+                      let originalTag = this.trafficData[i].children[j];
+                      if (originalTag.label == tag.key) {
+                        tag.value = [];
+                        for (let k = 0; k < originalTag.children.length; k++) {
+                          tag.value.push(originalTag.children[k].label);
+                        }
+                        break first;
+                      }
+                    }
+                  }
+                }
+                return false;
+              });
+              if (!hasKey) {
+                //选择所有这个tag的value
+                let tag = {key: value, value: []};
+                first: for (let i = 0; i < this.trafficData.length; i++) {
+                  for (let j = 0; j < this.trafficData[i].children.length; j++) {
+                    let originalTag = this.trafficData[i].children[j];
+                    if (originalTag.label == tag.key) {
+                      for (let k = 0; k < originalTag.children.length; k++) {
+                        tag.value.push(originalTag.children[k].label);
+                      }
+                      break first;
+                    }
+                  }
+                }
+                tags.push(tag);
+              } */
+          } else {
+            const dcIndex = dc.indexOf(select[0].split('::')[1])
+            if (dcIndex == -1) {
+              dc.push(select[0].split('::')[1])
+            }
+            const key = select[1].split('::')[1]
+            const hasKey = tags.some(tag => {
+              if (tag.key == key) {
+                const hasValue = tag.value.some(v => {
+                  return v == value
+                })
+                if (!hasValue) {
+                  tag.value.push(value)
+                }
+                return true
+              }
+              return false
+            })
+            if (!hasKey) {
+              tags.push({ key: key, value: [value] })
+            }
+          }
+        })
+        if (dc.length == 1) {
+          metric.datacenter = '"' + dc[0] + '"'
+        } else if (dc.length > 1) {
+          metric.datacenter = '~"' + dc.join('|') + '"'
+        }
+        tags.forEach(item => {
+          if (item.value.length == 1) {
+            metric[item.key] = '"' + item.value[0] + '"'
+            // eval('metric.' + item.key + '="' + item.value[0] + '"');
+          } else if (item.value.length > 1) {
+            metric[item.key] = '~"' + item.value.join('|') + '"'
+            // eval('metric.' + item.key + '="~' + item.value.join("|") + '"');
+          }
+        })
+      }
+      let metricString = '{'
+      for (const key in metric) {
+        metricString += key + '=' + metric[key] + ','
+      }
+      metricString = metricString.substring(0, metricString.length - 1)
+      metricString += '}'
+      const params = {
+        start: this.$stringTimeParseToUnix(before),
+        end: this.$stringTimeParseToUnix(end),
+        step: bus.getStep(before, end),
+        query: 'sum(irate(' + rule + metricString + '[' + (this.trendSearchParam.timeRange ? this.trendSearchParam.timeRange : '1h') + ']))'
+      }
+      return params
+    },
+    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
+        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: function () {
+      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: function () {
+      return new Promise(resolve => {
+        const requests = [axios.get('/idc?pageSize=-1'), axios.get('/overview/datacenterStat')]
+        axios.all(requests).then((result) => {
+          if (result) {
+            let idcInfos = null
+            let dcStats = null
+            if (result[0].data && result[0].data.code == 200) {
+              idcInfos = result[0].data.data.list
+            }
+            if (result[1].data && result[1].data.code == 200) {
+              dcStats = result[1].data.data.dcStat
+            }
+            if (idcInfos && 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 = idcInfos.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) => {
+                    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()
+        })
+      })
+    },
+    queryDataCenterMapData () {
+      const language = localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en'
+      const requests = [axios.get('/idc?pageSize=-1'), axios.get('/overview/datacenterStat')]
+      axios.all(requests).then((result) => {
+        if (result) {
+          const seriesDatas = []
+          this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries)
+          let idcInfos = null
+          let dcStats = null
+          if (result[0].data && result[0].data.code == 200) {
+            idcInfos = result[0].data.data.list
+          }
+          if (result[1].data && result[1].data.code == 200) {
+            dcStats = result[1].data.data.dcStat
+          }
+          if (idcInfos && dcStats) {
+            const dcStatsCopy = Object.assign([], dcStats)
+            dcStatsCopy.sort((a, b) => {
+              return a.assetTotal - b.assetTotal
+            })
+            const bigScatter = 25
+            const mediumScatter = 20
+            const smallScatter = 15
+            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 = idcInfos.find((item) => {
+                return item.id == dcId
+              })
+              const areaInfo = dcInfo
+              if (regNum.test(dcInfo.latitude) && regNum.test(dcInfo.longitude)) {
+                let areaName = ''
+                if (areaInfo.i18n) {
+                  areaName = JSON.parse(areaInfo.i18n)[language]
+                } else {
+                  areaName = areaInfo.name
+                }
+                let symbolSize = mediumScatter
+                if (dcStat.assetTotal >= bigBoundary) {
+                  symbolSize = bigScatter
+                } else if (dcStat.assetTotal < bigBoundary && dcStat.assetTotal >= mediumBoundary) {
+                  symbolSize = mediumScatter
+                } else {
+                  symbolSize = smallScatter
+                }
+
+                seriesDatas.push({
+                  name: areaName,
+                  value: [dcInfo.longitude, dcInfo.latitude, dcStat],
+                  symbolSize: symbolSize
+                })
+              }
+            }
+          }
+          this.$refs.dataCenterMap.modifyOption('tooltip', 'formatter', this.mapTooltipFormatter)
+          this.$refs.dataCenterMap.modifyOption('tooltip', 'borderColor', 'rgba(221,228,237,1)')
+          this.dataCenterMapSeries = [{
+            name: 'DataCenter',
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            label: {
+              formatter: '{b}',
+              position: 'right',
+              show: false
+            },
+            itemStyle: {
+              color: 'orange'
+            },
+            emphasis: {
+              label: {
+                show: true
+              }
+            },
+            data: seriesDatas
+          }]
+          this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries)
+          this.$refs.dataCenterMap.endLoading()
+        }
+      })
+    },
+    queryAlertStatByRule () {
+      return new Promise(resolve => {
+        // this.$refs.ruleMessage.startLoading();
+        this.$get('overview/alertStatByRule', { top: this.topFilter.rule }).then(response => {
+          if (response.code === 200) {
+            const seriesData = []
+            const categoryData = []
+            response.data.list.forEach(item => {
+              seriesData.splice(0, 0, item.nums)
+              categoryData.splice(0, 0, item.alertName)
+            })
+            this.messageByRuleSeries = {
+              name: 'alertStatByRule',
+              data: seriesData,
+              type: 'bar',
+              barMaxWidth: 15,
+              itemStyle: {
+                color: function (params) {
+                  const colorList = ['#FAd4ab', '#d0e8d0']
+                  if (params.dataIndex % 2 == 0) {
+                    return colorList[0]
+                  } else {
+                    return colorList[1]
+                  }
+                }
+              },
+              category: categoryData // 自定义，用来判断N/A是否显示
+            }
+            // this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
+            // this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
+            // this.$refs.ruleMessage.endLoading();
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertStatByAsset () {
+      return new Promise(resolve => {
+        this.$refs.assetHexagon.startLoading()
+        this.$get('overview/alertStatByAsset', { top: this.topFilter.asset }).then(response => {
+          if (response.code === 200) {
+            this.messageAssetData = response.data.list
+            this.$refs.assetHexagon.endLoading()
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertStatByModule () {
+      return new Promise(resolve => {
+        this.$refs.moduleHexagon.startLoading()
+        this.$get('overview/alertStatByModule', { top: this.topFilter.module }).then(response => {
+          if (response.code === 200) {
+            this.messageModuleData = response.data.list
+            this.$refs.moduleHexagon.endLoading()
+          }
+          resolve()
+        })
+      })
+    },
+    getDcTrafficData () {
+      this.$get('idc/trafficSetting', { pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.trafficData = this.convertTrafficData(response.data.list)
+        }
+      })
+    },
+    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
+    },
+    /* 初始化数据 end */
+    dateChange (val) {
+      this.trendSearchParam.start = val[0]
+      this.trendSearchParam.end = val[1]
+      this.trendSearchParam.timeRange = val[2]
+      this.queryAlertTrendData()
+    },
+    topNChange (type, top) {
+      this.topFilter[type] = top
+      if (type == 'asset') {
+        this.queryAlertStatByAsset()
+      } else if (type == 'module') {
+        this.queryAlertStatByModule()
+      } else if (type == 'rule') {
+        this.queryAlertStatByRule()
+      }
+    },
+    alertMessageChange (type) {
+      this.bottom3DropdownShow = false
+      this.alertMessageShow = type
+      this.$nextTick(() => {
+        if (type == 'asset') {
+          this.queryAlertStatByAsset()
+        } else if (type == 'module') {
+          this.queryAlertStatByModule()
+        }
+      })
+    },
+
+    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: function () {
+      this.isFullScreen = this.judgeFullScreen()
+      if (this.isFullScreen) {
+        this.exitFullScreen()
+      } else {
+        this.fullScreen()
+      }
+    },
+    judgeFullScreen: function () {
+      return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
+    },
+    fullScreen: function () {
+      const container = document.querySelector('.overview')
+      const fullScreenFunc = container.requestFullscreen || container.mozRequestFullScreen || container.webkitRequestFullscreen || container.msRequestFullscreen
+      fullScreenFunc.call(container)
+      this.isFullScreen = true
+    },
+    exitFullScreen: function () {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      }
+      this.isFullScreen = false
+    },
+    alertMessageDropdownHandler (show) {
+      if (show) {
+        clearTimeout(timeout)
+        this.bottom3DropdownShow = true
+      } else {
+        timeout = setTimeout(() => {
+          this.bottom3DropdownShow = false
+        }, 700)
+      }
+    },
+    /* header 时间处理 start */
+    initDate: function () {
+      this.sysTime = this.getTime(0)
+      this.sysDate = this.getDate(0)
+      this.sysWeek = this.getWeek(0)
+      this.freshTime()
+    },
+    freshTime: function () {
+      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: function (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: function (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: function (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: function (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: function (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 } })
+        }
+      }
+    },
+    trendTool (type, param1, param2, param3) {
+      if (type == 'difference') { // 两个数组的差集
+        return trendSelectDifference(param1, param2)
+      } else if (type == 'containArray') {
+        return containArray(param1, param2, param3)
+      } else if (type == 'sameLevelActive') {
+        return sameLevelActive(param1, param2, param3)
+      } else if (type == 'sameLevel') {
+        return sameLevel(param1, param2, param3)
+      } else if (type == 'active') {
+        return active(param1, param2, param3)
+      }
+      function trendSelectDifference (short, long) {
+        const difference = []
+        // eslint-disable-next-line no-labels
+        first: for (let i = 0; i < long.length; i++) {
+          if (i == short.length) {
+            difference.push([long[i], i])
+            break
+          }
+          if (short[i].length != long[i].length) {
+            difference.push([long[i], i])
+            break
+          }
+          for (let j = 0; j < long[i].length; j++) {
+            if (long[i][j] != short[i][j]) {
+              difference.push([long[i], i])
+              // eslint-disable-next-line no-labels
+              break first
+            }
+          }
+        }
+        return difference
+      }
+      function containArray (item, arr, level) { // return [index, levelIndex];
+        let index = -1; let levelIndex = 0
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].length == level) {
+            let flag = 0
+            for (let j = 0; j < level; j++) {
+              if (arr[i][j] == item[j]) {
+                flag++
+              }
+            }
+            if (flag == level) {
+              index = i
+              break
+            } else {
+              levelIndex++
+            }
+          }
+        }
+        return [index, levelIndex]
+      }
+      function sameLevelActive (item, arr, level) { // 已选中的同级项的index
+        const indexes = []
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].length == level) {
+            let flag = true
+            for (let j = 0; j < level - 1; j++) {
+              if (arr[i][j] != item[j]) {
+                flag = false
+              }
+            }
+            if (flag) {
+              indexes.push(i)
+            }
+          }
+        }
+        return indexes
+      }
+      function sameLevel (item, arr, level) { // 所有3级的同级项data（从原始数据trafficData查）
+        const result = []
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].value == item[0] && arr[i].children) {
+            for (let j = 0; j < arr[i].children.length; j++) {
+              if (arr[i].children[j].value == item[1]) {
+                const temp = arr[i].children[j].children
+                if (temp) {
+                  for (let k = 0; k < temp.length; k++) {
+                    result.push([item[0], item[1], temp[k].value])
+                  }
+                }
+                return result
+              }
+            }
+          }
+        }
+        return result
+      }
+      function active (level, index, isActive) {
+        const levels = document.querySelectorAll('.trend-cascader .el-cascader-panel .el-cascader-menu')
+        if (levels.length >= level) {
+          const items = levels[level - 1].querySelectorAll('li')
+          if (items.length >= index) {
+            if (isActive) {
+              items[index].classList.add('is-active')
+              items[index].querySelector('label').classList.add('is-checked')
+              items[index].querySelector('label>.el-checkbox__input').classList.add('is-checked')
+            } else {
+              items[index].classList.remove('is-active')
+              items[index].querySelector('label').classList.remove('is-checked')
+              items[index].querySelector('label>.el-checkbox__input').classList.remove('is-checked')
+            }
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    'trendSearchParam.select': function (n, o) {
+      this.queryAlertTrendData()
+    }
+  },
+  mounted () {
+    this.initData()
+    this.querySystemState().then(() => {
+      this.initDate()
+      // this.setFreshDataTimer();
+    })
+
+    // window.onresize = () => {
+    //   let vm = this;
+    //   setTimeout(() => {
+    //     //vm.map.
+    //   }, 500);
+    // };
+  },
+  beforeDestroy () {
+    this.allProject = []
+  },
+  destroyed () {
+    clearInterval(this.freshDataTimer)
+    clearInterval(this.freshDateTimer)
+    this.allProject = null
+  }
+}
+</script>
+
+<style lang="scss">
+  @import "./overview2.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 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/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 2fa6b8b91..05dff1223 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -624,6 +624,7 @@ export default {
       })
     },
     reloadTable (obj) {
+      this.pageObj.pageNo = 1
       const params = JSON.parse(JSON.stringify(obj))
       delete this.searchCheckBox.metricsStates
       delete this.searchCheckBox.logsStates