diff --git a/nezha-fronted/src/assets/css/theme.scss b/nezha-fronted/src/assets/css/theme.scss
index a7648e7c1..2f855868c 100644
--- a/nezha-fronted/src/assets/css/theme.scss
+++ b/nezha-fronted/src/assets/css/theme.scss
@@ -43,7 +43,11 @@ $--warning-color: var(--theme-color); //全局警告橙色
 $--suspended-color: #9e9c98; //全局停用色灰色
 
 :export {
-  themeColor: $--theme-color
+  themeColor: $--theme-color;
+  dangerColor: $--danger-color;
+  successColor: $--success-color;
+  warningColor: var(--theme-color);
+  suspendedColor: $--suspended-color;
 }
 /* element-ui变量覆盖 */
 /*$--color-primary: red; // 覆盖element-ui的主题色
diff --git a/nezha-fronted/src/components/common/alert/alertLabel2.vue b/nezha-fronted/src/components/common/alert/alertLabel2.vue
index 654bfe8da..711687920 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel2.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel2.vue
@@ -3,125 +3,117 @@
     <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">SN</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.sn:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.sn ? alertLabelData.sn:'--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Host</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.host:'--'}}</div>
+        <div class="alert-label-title">IP</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">State</div>
-        <div class="alert-label-value">{{alertLabelData?(alertStateStr(alertLabelData.state)):'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Ping</div>
         <div class="alert-label-value">
-          <div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div>
-          <span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':'--'}}</span>
+          <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.status === 1,'red-bg': alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.status === 0}" class="active-icon"></div>
+          <span v-if="alertLabelData">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.rtt ? alertLabelData.pingInfo.rtt + 'ms':'--'}}</span>
         </div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Asset Type</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Vendor</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:'--'}}</div>
+        <div class="alert-label-title">Brand</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Model</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.model:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">PingLastReply</div>
-        <div class="alert-label-value">{{(alertLabelData&&alertLabelData.pingLastReply)?alertLabelData.pingLastReply:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? alertLabelData.pingInfo.lastUpdate : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Alert</div>
         <div class="alert-label-value">
-          <span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span>
+          <span v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'danger' : 'success'">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
         </div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">DC</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:'--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Endpoint</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:'--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Administrator</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.principal:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div>
       </div>
     </div>
 
     <div class="alert-label-info" v-if="type==='module'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Name</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Project</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Description</div>
-        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '-'}}</div>
       </div>
     </div>
 
     <div class="alert-label-info" v-if="type==='project'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Name</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Description</div>
-        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
       </div>
     </div>
 
     <div class="alert-label-info" v-if="type==='endpoint'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Project</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Module</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.module.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Labels</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.labels:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.labels ? alertLabelData.labels : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Host</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.host:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.host ? alertLabelData.host : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Port</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.port:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.port ? alertLabelData.port : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Path</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.path:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.path ? alertLabelData.path : '--'}}</div>
       </div>
     </div>
   </div>
@@ -240,40 +232,40 @@ export default {
     init () {
       this.loading = true
       if (this.type === 'asset') {
-        this.$get('/asset/info?id=' + this.id).then((res) => {
+        this.$get('asset/asset/' + this.id).then((res) => {
           if (res.msg === 'success') {
             this.loading = false
-            this.alertLabelData = res.data.Basic
+            this.alertLabelData = res.data
           } else {
             this.$message.error(res.msg)
           }
         })
       }
       if (this.type === 'project') {
-        this.$get('/project?id=' + this.id).then((res) => {
+        this.$get('monitor/project/' + this.id).then((res) => {
           if (res.msg === 'success') {
             this.loading = false
-            this.alertLabelData = res.data.list[0]
+            this.alertLabelData = res.data
           } else {
             this.$message.error(res.msg)
           }
         })
       }
       if (this.type === 'module') {
-        this.$get('/module?id=' + this.id).then((res) => {
+        this.$get('monitor/module/' + this.id).then((res) => {
           if (res.msg === 'success') {
             this.loading = false
-            this.alertLabelData = res.data.list[0]
+            this.alertLabelData = res.data
           } else {
             this.$message.error(res.msg)
           }
         })
       }
       if (this.type === 'endpoint') {
-        this.$get('/endpoint?id=' + this.id).then((res) => {
+        this.$get('monitor/endpoint/' + this.id).then((res) => {
           if (res.msg === 'success') {
             this.loading = false
-            this.alertLabelData = res.data.list[0]
+            this.alertLabelData = res.data
           } else {
             this.$message.error(res.msg)
           }
@@ -392,13 +384,13 @@ export default {
     word-break: break-all;
   }
   .danger{
-    background-color: #d64f40;
+    background-color: $--danger-color;
     color: white;
     padding: 2px 5px;
     border-radius: 4px;
   }
   .success{
-    background-color: #50d050;
+    background-color: $--success-color;
     color: white;
     padding: 2px 5px;
     border-radius: 4px;
diff --git a/nezha-fronted/src/components/common/elementSet.vue b/nezha-fronted/src/components/common/elementSet.vue
index e1053958d..84978c413 100644
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -54,13 +54,6 @@ export default {
   created () {
     const localStorageTitle = JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
     if (localStorageTitle) {
-      for (const title of this.originalTableTitle) {
-        for (const lsTitle of localStorageTitle) {
-          if (lsTitle.prop === title.prop) {
-            lsTitle.label = title.label
-          }
-        }
-      }
       localStorage.setItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId, JSON.stringify(localStorageTitle))
     }
   },
diff --git a/nezha-fronted/src/components/common/overView/messageAsset.vue b/nezha-fronted/src/components/common/overView/messageAsset.vue
index 6bc2a3782..04d2ef7d7 100644
--- a/nezha-fronted/src/components/common/overView/messageAsset.vue
+++ b/nezha-fronted/src/components/common/overView/messageAsset.vue
@@ -252,7 +252,7 @@ export default {
         clearTimeout(this.timer)
       }
       this.assetData.id = data
-      const boxWidth = document.getElementsByClassName('content-right')[0].offsetWidth
+      const boxWidth = document.getElementsByClassName('list-page')[0].offsetWidth
       this.boxWidth = boxWidth
       // this.assetData.rate=window.screen.height/1297;
       this.$nextTick(() => {
diff --git a/nezha-fronted/src/components/common/table/nzDataList.vue b/nezha-fronted/src/components/common/table/nzDataList.vue
index d8627fc34..d467372c4 100644
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -36,7 +36,7 @@
       <transition name="el-zoom-in-top">
         <element-set
           v-if="tools.showCustomTableTitle"
-          :tableId="tableId"
+          :tableId="$parent.tableId"
           ref="customTableTitle"
           :custom-table-title="customTableTitle"
           :original-table-title="tableTitle"
@@ -88,10 +88,6 @@ export default {
     searchMsg: {
       type: Object
     },
-    tableId: {
-      type: String,
-      default: ''
-    },
     hasSearch: {
       type: Boolean,
       default: false
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 7cf111205..54e7b816f 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -5,25 +5,21 @@
     </el-breadcrumb>
     <div class="header-menu">
       <el-dropdown>
-        <div class="header-menu&#45;&#45;item"><i class="nz-icon nz-icon-more-app"></i></div>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item v-for="(item, index) in linkData" :key="index" :index="'0-' + index">
-            <span class="link-title"><a :href='item.url' :title="item.name" rel="noopener norefferrer" target="_blank">{{item.name}}</a></span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
+        <div class="header-menu__item"><i class="nz-icon nz-icon-more-app"></i></div>
+        <el-dropdown-menu></el-dropdown-menu>
       </el-dropdown>
       <el-dropdown>
-        <el-dropdown-menu slot="dropdown"></el-dropdown-menu>
+        <el-dropdown-menu></el-dropdown-menu>
         <div id="header-open-cli" @click="cli">
-          <div class="header-menu&#45;&#45;item"><i class="nz-icon nz-icon-terminal"></i></div>
+          <div class="header-menu__item"><i class="nz-icon nz-icon-terminal"></i></div>
           <span v-show="$store.state.consoleCount>0" class="right-tip">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</span>
         </div>
       </el-dropdown>
       <el-dropdown>
-        <div class="header-menu&#45;&#45;item"><i class="nz-icon nz-icon-create-square"></i></div>
+        <div class="header-menu__item"><i class="nz-icon nz-icon-create-square"></i></div>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item v-for="(item, createIndex) in createMenu" :key="createIndex" v-has="item.permission" :index="`${createIndex}`">
-            <div :id="'create-box-'+createIndex" @click="createBox(item)">
+            <div :id="'create-box-'+createIndex">
               <span>{{item.label}}</span>
             </div>
           </el-dropdown-item>
@@ -38,10 +34,10 @@
         </div>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
-            <div id="header-to-english" :style="language=='en'?'color:#f90':''" @click="changeLocal('en')"><i class="nz-icon nz-icon-lang-en"></i>English</div>
+            <div id="header-to-english" :style="language === 'en'?'color:#f90':''" @click="changeLocal('en')"><i class="nz-icon nz-icon-lang-en"></i>English</div>
           </el-dropdown-item>
           <el-dropdown-item>
-            <div id="header-to-chinese" :style="language=='cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>中文</div>
+            <div id="header-to-chinese" :style="language === 'cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>中文</div>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -57,38 +53,18 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-    <transition name="right-box">
-      <project-box v-if="rightBox.project.show" ref="projectBox" :project="editProject" @close="closeProjectRightBox"></project-box>
-    </transition>
-    <transition name="right-box">
-      <module-box v-if="rightBox.module.show" ref="moduleBox" :currentProject="currentProject" :module="editModule" @close="closeModuleRightBox"></module-box>
-    </transition>
-    <transition name="right-box">
-      <add-endpoint-box v-if="rightBox.endpoint.show" ref="addEndpointBox" :currentModule="currentModule" :currentProject="currentProject" @close="closeEndpointRightBox"></add-endpoint-box>
-    </transition>
-    <transition name="right-box">
-      <asset-box v-if="rightBox.asset.show" ref="assetAddUnit" :asset="editAsset" @close="closeAssetRightBox"></asset-box>
-    </transition>
-    <transition name="right-box">
-      <alert-config-box v-if="rightBox.alertRule.show" ref="alertConfigBox" :alert-rule="editAlertRule" @close="closeAlertRuleRightBox"></alert-config-box>
-    </transition>
-    <transition name="right-box">
-      <dc-box v-if="rightBox.dc.show" :dc="dc" :user-data="userData" @close="closeDcBox" @reload="getAssetData"></dc-box>
-    </transition>
     <change-password :cur-user="username" :show-dialog="showChangePin" @click="showPinDialog" @dialogClosed="dialogClosed"></change-password>
   </div>
 </template>
 
 <script>
 import bus from '../../libs/bus'
-import dcBox from '../common/rightBox/dcBox' // dc弹框
 import { mapActions } from 'vuex'
 import changePin from '../page/config/changePin'
 export default {
   name: 'Header',
   components: {
     'change-password': changePin,
-    'dc-box': dcBox
   },
   data () {
     return {
@@ -96,81 +72,6 @@ export default {
       language: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en',
 
       // 顶部菜单相关
-      /* activeIndex: '', */
-      activeItemIndex: '',
-      activeItemIndexes: [],
-      hoverItemIndex: '',
-      dc: {
-        id: '',
-        name: '',
-        location: '',
-        tel: '',
-        principal: '',
-        area: {
-          id: 0,
-          name: ''
-        }
-      },
-      userData: [],
-      assetData: [], // 顶部菜单asset的下拉内容
-
-      // add侧滑相关
-      rightBox: {
-        project: { show: false },
-        module: { show: false },
-        endpoint: { show: false },
-        asset: { show: false },
-        alertRule: { show: false },
-        dc: { show: false }
-      },
-      projectData: [], // 顶部菜单project列表中的数据
-      editProject: { id: '', name: '', remark: '' }, // 新增/编辑的project
-      currentProject: { id: '', name: '', remark: '' }, // module/endpoint弹框用来回显project
-      editModule: { type: 'http', name: '', project: {}, port: 9100, path: '', param: '', paramObj: [], labelModule: [], labels: '' }, // 新增/编辑的module
-      currentModule: { id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], labels: '', labelModule: [] }, // endpoint弹框用来回显module，此处固定为空对象
-      editEndpoint: { // 新增/编辑的endpoint
-        id: '',
-        host: '',
-        port: '',
-        param: '',
-        path: '',
-        asset: { id: '', name: '', host: '' },
-        project: { id: '', name: '' },
-        module: { id: '', name: '', param: '', paramObj: {}, projectId: '', labelModule: [], labels: '' },
-        moduleId: '',
-        assetId: '',
-        labelModule: []
-      },
-      editAsset: {
-        id: '',
-        sn: '',
-        host: '',
-        state: 1,
-        purchaseDate: '',
-        idcId: '',
-        cabinetId: '',
-        modelId: '',
-        model: { type: { code: '' } },
-        assetType: '',
-        impi: {
-          host: '',
-          port: ''
-        },
-        tags: [],
-        accounts: []
-      },
-      editAlertRule: {
-        id: '',
-        alertName: '',
-        linkObject: { id: '', name: '' },
-        expr: '',
-        unit: 2,
-        operator: '>',
-        last: 60,
-        severity: 'P2',
-        summary: '',
-        description: ''
-      },
       createMenu: [ // 新增按钮内容
         {
           label: this.$t('project.project.project'),
@@ -217,9 +118,6 @@ export default {
        * @param parentMenu 菜单大类
        * */
     jumpTo (route) {
-      if (route != 'asset') {
-        this.activeItemIndexes = []
-      }
       this.$router.push({
         path: route,
         query: {
@@ -227,88 +125,6 @@ export default {
         }
       })
     },
-    getLinkData () {
-      /* this.$get('link').then(response => {
-        this.$store.commit('setLinkData', response.data)
-      }) */
-    },
-    createBox (item) {
-      if (item.type == 1) {
-        this.rightBox.project.show = true
-        this.editProject = { id: '', name: '', remark: '' }
-      } else if (item.type == 2) {
-        this.rightBox.module.show = true
-        this.editModule = {
-          name: '',
-          project: {},
-          port: 9100,
-          path: '',
-          param: '',
-          labels: '',
-          type: 'http',
-          paramObj: [],
-          snmpParam: '',
-          labelModule: [],
-          // snmp setting 下划线命名是因为业务需求
-          walk: [],
-          version: 2, // 2/3
-          max_repetitions: 25,
-          retries: 3,
-          timeout: 10, // s
-          community: 'public',
-          username: '',
-          security_level: 'noAuthNoPriv', // noAuthNoPriv/authNoPriv/authPriv
-          pin: '',
-          auth_protocol: 'MD5', // MD5/SHA
-          priv_protocol: 'DES', // DES/AES
-          priv_pin: '',
-          context_name: ''
-        }
-      } else if (item.type == 3) {
-        this.rightBox.endpoint.show = true
-      } else if (item.type == 4) {
-        this.rightBox.asset.show = true
-      } else if (item.type == 5) {
-        this.rightBox.alertRule.show = true
-      } else if (item.type == 6) {
-        this.rightBox.dc.show = true
-      }
-    },
-    jumpToAsset (dc) {
-      if (dc) {
-        this.activeItemIndex = dc.id
-        this.$store.commit('setCurrentDc', dc.id)
-        bus.$emit('header-dc-change', dc.id) // 发送给leftMenu，顶部dc条件改变了
-      } else {
-        this.activeItemIndex = ''
-        this.$store.commit('setCurrentDc', '')
-        bus.$emit('clear-asset-filter') // 清除leftMenu左侧菜单过滤条件
-      }
-      this.jumpTo('/asset')
-    },
-    jumpToProject (p) {
-      if (!this.hasButton('project_view')) {
-        return
-      }
-      this.currentProject = p
-      if (p.id !== this.$store.state.currentProject.id) {
-        bus.$emit('project-page-type', 'project')
-      }
-      this.$store.commit('currentProjectChange', p)
-      this.activeItemIndex = p.id
-      this.jumpTo('/project')
-    },
-    getAssetData () {
-      this.$get('idc', { pageSize: -1 }).then(response => {
-        if (response.code == 200) {
-          this.assetData = response.data.list
-          this.assetData.forEach(item => {
-            this.$set(item, item.name, false)
-          })
-          this.$store.commit('setIdcArr', this.assetData)
-        }
-      })
-    },
     changeLocal (lang) {
       if (lang != localStorage.getItem('nz-language')) {
         localStorage.setItem('nz-language', lang)
@@ -316,85 +132,11 @@ export default {
         window.location.reload()
       }
     },
-    getProjectList () {
-      this.$get('monitor/project', { pageSize: -1 }).then(response => {
-        if (response.code == 200) {
-          this.projectData = response.data.list
-          let flag = false
-          // 如果currentProject不在新取到的数据里，说明它被删了
-          for (let i = 0; i < this.projectData.length; i++) {
-            if (this.projectData[i].id == this.currentProject.id) {
-              flag = true
-              break
-            }
-          }
-          if (!flag && this.projectData.length > 0) {
-            this.currentProject = this.projectData[0]
-            this.activeItemIndex = this.currentProject.id
-            this.$store.commit('currentProjectChange', this.currentProject)
-          }
-        }
-      })
-    },
-    getUserData () {
-      return new Promise(resolve => {
-        this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
-          if (response.code === 200) {
-            this.userData = response.data.list
-          }
-          resolve()
-        })
-      })
-    },
-    closeProjectRightBox (refresh) {
-      this.rightBox.project.show = false
-      if (refresh) {
-        this.getProjectList()
-        bus.$emit('project-list-change')
-      }
-    },
-    closeModuleRightBox (refresh) {
-      this.rightBox.module.show = false
-      if (refresh) {
-        bus.$emit('module-list-change')
-      }
-    },
-    closeEndpointRightBox (refresh) {
-      this.rightBox.endpoint.show = false
-      if (refresh) {
-        bus.$emit('endpoint-list-change')
-      }
-    },
-    closeAssetRightBox (refresh) {
-      this.rightBox.asset.show = false
-      if (refresh) {
-        bus.$emit('asset-list-change')
-      }
-    },
-    closeAlertRuleRightBox (refresh) {
-      this.rightBox.alertRule.show = false
-      if (refresh) {
-        bus.$emit('alert-rule-list-change')
-      }
-    },
-    closeDcBox (refresh) {
-      this.rightBox.dc.show = false
-      if (refresh) {
-        this.getAssetData()
-        bus.$emit('dc-list-change')
-      }
-    },
-    toEditProject (p) {
-      this.editProject = Object.assign({}, p)
-      this.rightBox.project.show = true
-    },
     logout () {
       this.$get('logout').then(() => {
         this.logoutSuccess()
         document.location.href = '/'
       })
-
-      // this.jumpTo('/login');
     },
     refreshLang () {
       this.language = localStorage.getItem('nz-language')
@@ -418,13 +160,6 @@ export default {
         this.username = sessionStorage.getItem('nz-username')
         this.refreshLang()
       })
-      bus.$on('dc-list-change', () => { // dc.vue增删改dc时刷新顶部菜单dc列表
-        this.getAssetData()
-      })
-      bus.$on('current-project-change', project => {
-        this.currentProject = project
-        this.activeItemIndex = project.id
-      })
       if (window.history && window.history.pushState) {
         history.pushState(null, null, document.URL)
         window.addEventListener('popstate', this.cancel, false)
@@ -435,45 +170,12 @@ export default {
     this.$i18n.locale = this.language
     if (sessionStorage.getItem('nz-token')) {
       this.initEvent()
-      this.getAssetData()
-      this.getUserData()
-      this.getProjectList()
-      this.getLinkData()
     }
-    // 刷新后有高亮
-    /* let activePath = this.$route.path.slice(1);
-      this.activeIndex = activePath; */
   },
   computed: {
-    linkData () {
-      return this.$store.getters.getLinkData
-    },
     route () {
       return this.$route.path
     },
-    overViewProject () {
-      return this.$store.getters.getOverViewProject
-    },
-    menuIsActive () {
-      return function (menu, isParent) {
-        if (isParent) {
-          const isCurrent = menu.children.some(sub => {
-            return sub.route == this.route
-          })
-          if (isCurrent) {
-            return 'menu-active'
-          } else {
-            return ''
-          }
-        } else {
-          if (menu.route == this.route) {
-            return 'menu-item-active'
-          } else {
-            return ''
-          }
-        }
-      }
-    },
     breadcrumb () {
       const vm = this
       const menuList = this.$store.getters.menuList
@@ -495,17 +197,8 @@ export default {
       return breadcrumb
     }
   },
-  watch: {
-    overViewProject (n) {
-      if (n) {
-        this.jumpToProject(n)
-      }
-    }
-  },
   beforeDestroy () {
     bus.$off('login')
-    bus.$off('dc-list-change')
-    bus.$off('current-project-change')
   },
   destroyed () {
     window.removeEventListener('popstate', this.cancel, false)
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 73a620031..2543f874f 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -4,7 +4,6 @@
       ref="dataList"
       :api="url"
       :custom-table-title.sync="tools.customTableTitle"
-      :from="fromRoute.asset"
       :has-search="true"
       :layout="['searchInput', 'elementSet', 'clickSearch']"
       :search-msg="searchMsg">
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
new file mode 100644
index 000000000..abcee4709
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -0,0 +1,1263 @@
+<template>
+  <div class="overview list-page">
+    <!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
+    <div :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}" class="my-pane"></div>
+    <!--标题-->
+    <div class="overview-content-header">
+      <div :class="{'hide-div':!isFullScreen}" class="header-title">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
+      <div class="header-tool">
+        <div class="overview-loading"><loading ref="overviewLoading" ></loading></div>
+        <div class="tool-container top-tools">
+          <div class="time">{{sysTime}}</div>
+          <div class="date">
+            <div class="week">{{sysWeek}}</div>
+            <div class="sys-date">{{sysDate}}</div>
+          </div>
+          <pick-time id="overview-search" ref="pickTime" v-model="searchTime" :refresh-data-func="setFreshDataTimer" :showTimePicker="false" :use-chart-unit="false" class="float-right pickTime margin-l-5"></pick-time>
+          <div id="overview-full-screen" class="operation" @click="switchFullScreen"><span ><i :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}" class="nz-icon screen-icon"></i></span></div>
+        </div>
+      </div>
+    </div>
+    <!--内容-->
+    <div class="overview-content">
+      <!--第一行-->
+      <div class="content-row-box">
+        <div class="content-col-box">
+          <div id="overview-to-asset" v-loading="assetLoading" class="content-col-content clickable" @click="jumpTo('asset')">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="`${assetData.length}`" class="item" effect="light" placement="top">
+                <div class="content-col-content-num">
+                  <vue-count-up :decimals="assetData.length < 1000 ? 0 : 1" :duration="1" :end-value="assetData.length | numberFormat"
+                               :start-value="0"></vue-count-up>
+                  <span class="overview-row-unit">{{assetData.length| unitFormat}}</span>
+                  <span v-if="assetData.length > 1000 " class="over-num">+</span>
+                </div>
+              </el-tooltip>
+              <div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div v-loading="projectLoading" class="content-col-content">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-project"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="`${projectData.total}`" class="item" effect="light" placement="top">
+                <div class="content-col-content-num">
+                  <vue-count-up :decimals="projectData.total < 1000 ? 0 : 1" :duration="1" :end-value="projectData.total | numberFormat" :start-value="0"></vue-count-up>
+                  <span class="overview-row-unit">{{projectData.total | unitFormat}}</span>
+                  <span v-if="projectData.total > 1000 " class="over-num">+</span>
+                </div>
+              </el-tooltip>
+              <div class="content-col-content-title">{{$t("dashboard.overview.project.project")}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div v-loading="moduleLoading" class="content-col-content">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="`${moduleData.total}`" class="item" effect="light" placement="top">
+                <div class="content-col-content-num">
+                  <vue-count-up :decimals="moduleData.total < 1000 ? 0 : 1" :duration="1" :end-value="moduleData.total | numberFormat" :start-value="0"></vue-count-up>
+                  <span class="overview-row-unit">{{moduleData.total | unitFormat}}</span>
+                  <span v-if="moduleData.total > 1000 " class="over-num">+</span>
+                </div>
+              </el-tooltip>
+              <div class="content-col-content-title">{{$t("dashboard.overview.module.module")}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div v-loading="endpointLoading" class="content-col-content">
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="`${endpointData.num}`" class="item" effect="light" placement="top">
+                <div class="content-col-content-num">
+                  <vue-count-up :decimals="endpointData.num < 1000 ? 0 : 1" :duration="1" :end-value="endpointData.num | numberFormat" :start-value="0"></vue-count-up>
+                  <span class="overview-row-unit">{{endpointData.num | unitFormat}}</span>
+                  <span v-if="endpointData.num > 1000 " class="over-num">+</span>
+                </div>
+              </el-tooltip>
+              <div class="content-col-content-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div id="overview-to-alertlist" v-loading="alertMessageLoading" class="content-col-content clickable" @click="jumpTo('alertList')" >
+            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div>
+            <div class="content-num-box">
+              <el-tooltip :content="`${alertMessageData.num}`" class="item" effect="light" placement="top">
+                <div class="content-col-content-num">
+                  <vue-count-up :decimals="alertMessageData.num < 1000 ? 0 : 1" :duration="1" :end-value="alertMessageData.num | numberFormat" :start-value="0"></vue-count-up>
+                  <span class="overview-row-unit">{{alertMessageData.num | unitFormat}}</span>
+                  <span v-if="alertMessageData.num > 1000 " class="over-num">+</span>
+                </div>
+              </el-tooltip>
+              <div class="content-col-content-title">{{$t("overall.alert")}}</div>
+            </div>
+            <div class="content-alert-num">{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</div>
+          </div>
+        </div>
+      </div>
+      <!--第二行-->
+      <div class="content-row-box">
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>{{$t("dashboard.overview.projectTopoLogy")}}</span>
+          </div>
+          <div v-loading="topologyLoading"  class="content-col-content">
+            <transition name = "el-zoom-in-center">
+              <div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative">
+                <el-carousel :interval="5000" :trigger="'click'" arrow="hover">
+                  <el-carousel-item v-for="(item,index) in allProject" :key="index">
+                    <div class="maskLayer" @click="toProject(item)"></div>
+                    <span class="project-name">{{item.name}}</span>
+                    <topology
+                      :fromOverView="true"
+                      :obj="item"
+                      :topologyIndexF="index"
+                    />
+                  </el-carousel-item>
+                </el-carousel>
+              </div>
+            </transition>
+            <div v-if="allProject.length===0" class="chart-no-data">No Data</div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
+          <div class="content-col-content">
+            <div id="map" style="height: 100%; width: 100%"></div>
+          </div>
+        </div>
+      </div>
+      <!--第三行-->
+      <div class="content-row-box content-bottom-box">
+        <!--第一个图-->
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>{{$t("dashboard.overview.asset.assetType")}}</span>
+          </div>
+          <div class="content-col-content">
+            <chart-box ref="assetTypePie" :show-toolbox="false" :tooltip-formatter="assetTypeFormatter" chart-type="pie" name="assetTypePie" @is-loading="(isLoading)=>{this.assetTypeLoading = isLoading}"></chart-box>
+            <div v-if="!assetTypeLoading && (!assetTypeData || assetTypeData.length === 0)" class="chart-no-data">No Data</div>
+          </div>
+        </div>
+
+        <!--第二个图-->
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>
+              <span v-if="alertMessageShow === 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
+              <span v-if="alertMessageShow === 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
+            </span>
+          </div>
+          <div class="content-col-content" style="overflow: hidden">
+            <messageAsset v-show="messageAssetData.length>0" ref="assetHexagon" :col="col" :data="messageAssetData" :from="'asset'" :from-type="'asset'" :hexagonSvgID="'hexagonSvg1'" :length="length" :show-tooltip="true"/>
+            <div v-if="messageAssetData.length===0" class="chart-no-data">No Data</div>
+          </div>
+        </div>
+        <!--第三个图-->
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>{{$t("dashboard.overview.alert.moduleTopN")}}</span>
+          </div>
+          <div class="content-col-content" style="overflow: hidden">
+            <messageAsset v-show="messageModuleData.length>0" ref="moduleHexagon" :col="col" :data="messageModuleData" :from="'module'" :from-type="'module'" :hexagonSvgID="'hexagonSvg2'" :length="length" :show-tooltip="true"/>
+            <div v-if="messageModuleData.length===0" class="chart-no-data">No Data</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="axis-tooltip el-popover yAxis-text-style"></div>
+    <!--用于assetType饼图label-->
+    <img id="upPic" src='../../../../assets/img/up.png' style="display: none;">
+    <img id="downPic" src='../../../../assets/img/down.png' style="display: none;">
+  </div>
+</template>
+
+<script>
+import chart from './chart'
+import i18n from '@/components/common/i18n'
+import axios from 'axios'
+import bus from '@/libs/bus'
+import VueCountUp from 'vue-countupjs'
+import 'leaflet/dist/leaflet.css'
+// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
+import * as L from 'leaflet'
+import icon from 'leaflet/dist/images/marker-icon.png'
+import iconShadow from 'leaflet/dist/images/marker-shadow.png'
+import * as echarts from 'echarts'
+import chartConfig from './chartConfig'
+import overViewTopology from '../../../common/project/topologyL5'
+import messageAsset from '../../../common/overView/messageAsset'
+
+let tooltipEndpointChart
+let tooltipPrometheusChart
+const regNum = /^[0-9]+.?[0-9]*/
+export default {
+  name: 'overview',
+  data () {
+    return {
+      // top tool
+      isFullScreen: false,
+      sysTime: '',
+      sysDate: '',
+      sysWeek: '',
+      systemName: localStorage.getItem('nz-sys-name'),
+      topologyLoading: true,
+
+      // data
+      assetLoading: false,
+      assetData: [], // asset总数
+      assetTypeLoading: false, // 第三行第一个图
+      assetTypeData: [],
+      assetStateData: [],
+      projectLoading: false,
+      projectData: { total: 0 },
+      moduleLoading: false,
+      moduleData: { total: 0 },
+      endpointLoading: false,
+      endpointData: { num: 0 },
+      alertMessageLoading: false,
+      alertMessageData: { num: 0 },
+      alertRuleData: [],
+      map: null,
+      allProject: [],
+
+      alertMessageShow: 'asset', // asset/module
+
+      topFilter: {
+        optionals: [10, 20, 50],
+        rule: 10,
+        asset: 48,
+        module: 48
+      },
+      system_server_time: null,
+      freshDateTimer: null,
+      freshDataTimer: null,
+
+      tooltip: {
+        x: 0,
+        y: 0
+      },
+      searchTime: bus.getTimezontDateRange(),
+      messageAssetData: [],
+      col: 10,
+      length: 9,
+      messageModuleData: []
+    }
+  },
+  components: {
+    'chart-box': chart,
+    VueCountUp,
+    topology: overViewTopology,
+    messageAsset
+  },
+  filters: {
+    numberFormat (num) {
+      const fixed = 1
+      if (num) {
+        try {
+          num = parseFloat(num)
+          if (num < 1000) {
+            return num
+          } else if (num < 1000000) {
+            num = num / 1000
+            num = num.toString()
+            const index = num.indexOf('.')
+            if (index !== -1) {
+              num = num.substring(0, fixed + index + 1)
+            } else {
+              num = num.substring(0)
+            }
+            return parseFloat(num).toFixed(fixed)
+          } else if (num < 1000000000) {
+            num = num / 1000000
+            num = num.toString()
+            const index = num.indexOf('.')
+            if (index !== -1) {
+              num = num.substring(0, fixed + index + 1)
+            } else {
+              num = num.substring(0)
+            }
+            return parseFloat(num).toFixed(fixed)
+          }
+        } catch (err) {
+          return 0
+        }
+      }
+      return 0
+    },
+    unitFormat (num) {
+      if (num) {
+        try {
+          num = parseFloat(num)
+          if (num < 1000) {
+            return ''
+          } else if (num < 1000000) {
+            return ' K'
+          } else if (num < 1000000000) {
+            return ' M'
+          }
+        } catch (err) {
+          return ''
+        }
+      }
+      return ''
+    }
+  },
+  methods: {
+    /* 初始化数据 start */
+    initData () {
+      return [
+        this.querySystemState(),
+        this.queryAssetData(),
+        this.queryAssetTypeData(),
+        this.queryProjectData(),
+        this.queryModuleData(),
+        this.queryEndpointData(),
+        this.queryAlertMessageData(),
+        this.queryAlertRuleData(),
+        this.initMap(),
+        this.queryAlertStatByModule(), // 新的3-3
+        this.queryAllProjectData()
+      ]
+    },
+    setFreshDataTimer () {
+      Promise.all(this.initData()).then(() => {
+        if (this.$refs.overviewLoading) {
+          this.$refs.overviewLoading.endLoading()
+        }
+      })
+    },
+    querySystemState () {
+      return new Promise(resolve => {
+        this.$get('/healthy').then(response => {
+          if (response.code == 200) {
+            if (response.time) {
+              this.system_server_time = this.utcTimeToTimezone(response.time)
+            } else {
+              this.system_server_time = bus.computeTimezone(new Date().getTime())
+            }
+          } else {
+            this.system_server_time = bus.computeTimezone(new Date().getTime())
+          }
+          resolve()
+        })
+      })
+    },
+    queryAllProjectData () {
+      this.$get('/project', { pageSize: -1 }).then(res => {
+        this.topologyLoading = true
+        const axiosAll = []
+        const temp = []
+        if (res.data.list.length === 0) {
+          this.topologyLoading = false
+        }
+        res.data.list.forEach((item) => {
+          axiosAll.push(axios.get(`monitor/project/topo?projectId=${item.id}`))
+        })
+        axios.all(axiosAll).then(res2 => {
+          res2 = res2.map((item, index) => {
+            return { ...item.data.data, ...res.data.list[index] }
+          })
+          res2 = res2.filter((item) => item.topo && item.topo.pens && item.topo.pens.length)
+          if (res2.length == 0) {
+            this.topologyLoading = false
+          }
+          res2.forEach(item => {
+            temp.push(item)
+          })
+          this.allProject = temp
+          this.topologyLoading = false
+        })
+      })
+    },
+
+    formatNodesArr (arr) {
+      return new Promise(resolve => {
+        const promiseArr = []
+        arr.forEach((item, index) => {
+          item.shape = 'image'
+          item.id = item.moduleId
+          this.$get('/module/stat', { id: item.id }).then(res => {
+            item.state = res.data
+          })
+          promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.iconId}`))
+        })
+        Promise.all(promiseArr).then(res => {
+          arr.forEach((item, index) => {
+            item.image = res[index]
+          })
+          resolve(arr)
+        })
+      })
+    },
+    formatEdgesArr (arr) {
+      arr.forEach((item) => {
+        item.from = item.source
+        item.to = item.target
+        item.label = ''
+        item.title = 'title'
+        item.smooth.roundness = 0.4
+      })
+      return arr
+    },
+    dealImg (url) {
+      // 处理后端传过来的图片流乱码问题
+      if (url) {
+        return new Promise((resolve) => {
+          this.$axios
+            .get(url, {
+              responseType: 'arraybuffer'
+            })
+            .then(res => {
+              return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
+            })
+            .then(data => {
+              resolve(data)
+            })
+            .catch(err => {
+              console.error(err)
+            })
+        })
+      }
+    },
+    toProject (projectInfo) { // 跳转对应project页面
+      this.$store.commit('setOverViewProject', projectInfo)
+    },
+    queryAssetData () {
+      return new Promise(resolve => {
+        this.assetLoading = true
+        this.$refs.assetHexagon.startLoading()
+        this.$get('asset/asset', { pageSize: -1 }).then(response => {
+          this.assetLoading = false
+          this.$refs.assetHexagon.endLoading()
+          if (response.code === 200) {
+            this.assetData = response.data.list.sort((a, b) => b.alertNum - a.alertNum)
+            const alertTopAssets = this.assetData.slice(0, 20)
+            const requests = alertTopAssets.map(a => axios.get(`stat/alertMessage/severity?assetId=${a.id}`))
+            const assetStateData = []
+            axios.all(requests).then(result => {
+              result.forEach((alert, i) => {
+                const severityData = {}
+                alert.data.data.list && alert.data.data.list.forEach(a => {
+                  severityData[a.name] = a.num
+                })
+                !severityData.P1 && (severityData.P1 = 0)
+                !severityData.P2 && (severityData.P2 = 0)
+                !severityData.P3 && (severityData.P3 = 0)
+                assetStateData.push({ ...alertTopAssets[i], alert: [severityData] })
+              })
+              console.info(assetStateData)
+              this.messageAssetData = assetStateData
+            })
+          }
+          resolve()
+        })
+      })
+    },
+    queryAssetTypeData () {
+      return new Promise(resolve => {
+        this.assetTypeLoading = true
+        this.$get('stat/asset/type').then(response => {
+          this.assetTypeLoading = false
+          if (response.code === 200) {
+            this.assetTypeData = response.data
+            /* 饼图 */
+            const legendData = []
+            const typeSeriesData = []
+
+            const vm = this
+            const assetTotalCount = (function () {
+              let count = 0
+              vm.assetTypeData.forEach(item => {
+                count += item.num
+              })
+              return count
+            }())
+            this.assetTypeData.forEach(item => {
+              legendData.push([item.name, (item.num * 100 / assetTotalCount).toFixed(2)])
+              typeSeriesData.push({ name: item.name, value: item.num })
+            })
+            const series = [{
+              name: 'Type',
+              data: typeSeriesData.sort((a, b) => { return a.value > b.value ? -1 : 1 }),
+              type: 'pie',
+              radius: ['43%', '55%'],
+              center: ['40%', '50%'],
+              minAngle: 15,
+              itemStyle: {
+                borderColor: '#fff',
+                borderWidth: 1
+              },
+              tooltip: {
+                backgroundColor: 'rgba(255, 255, 255, 0.66)',
+                extraCssText: 'box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);',
+                textStyle: { color: '#333333' },
+                renderMode: 'html'
+              },
+              label: {
+                normal: {
+                  show: false,
+                  position: 'center',
+                  formatter: function (param) { // 设置圆饼图中间文字排版
+                    return ['{name|' + param.name + '}',
+                      '{percent|(' + param.percent + '%)}']
+                      .join('\n')
+                  },
+                  rich: {
+                    name: {
+                      textAlign: 'center',
+                      color: '#333',
+                      fontSize: 19,
+                      padding: 10
+                    },
+                    percent: {
+                      textAlign: 'center',
+                      color: '#333',
+                      fontSize: 12,
+                      padding: 10
+                    }
+                  }
+                },
+                emphasis: {
+                  show: true // 文字至于中间时，这里需为true
+                }
+              }
+            }]
+            const legend = {
+              show: true,
+              orient: 'vertical',
+              top: '30%',
+              right: 25,
+              icon: 'circle'
+            }
+            if (typeSeriesData.length === 0 || !this.assetTypeData.length === 0) {
+              legend.show = false
+            }
+            this.assetTypeData.length !== 0 && this.$refs.assetTypePie.setSeries(series, legend, legendData)
+            this.$refs.assetTypePie.endLoading()
+            /* const requests = this.assetTypeData.map(t => axios.get(`stat/asset/ping?typeId=${t.id}`))
+            this.assetStateData = []
+            axios.all(requests).then(result => {
+              result.forEach((r, i) => {
+                this.assetStateData.push({ typeId: this.assetTypeData[i].id, data: r.data.list })
+                this.$set(this.assetTypeData[i], 'up', result.find(r2 => r2.name === 'up'))
+                this.$set(this.assetTypeData[i], 'down', result.find(r2 => r2.name === 'down'))
+              })
+            }) */
+          }
+          resolve()
+        })
+      })
+    },
+    queryProjectData () {
+      return new Promise(resolve => {
+        this.projectLoading = true
+        this.$get('stat/project/total').then(response => {
+          this.projectLoading = false
+          if (response.code === 200) {
+            this.projectData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryModuleData () {
+      return new Promise(resolve => {
+        this.moduleLoading = true
+        this.$get('stat/module/total').then(response => {
+          this.moduleLoading = false
+          if (response.code === 200) {
+            this.moduleData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryEndpointData () {
+      return new Promise(resolve => {
+        this.endpointLoading = true
+        this.$get('stat/endpoint/total').then(response => {
+          this.endpointLoading = false
+          if (response.code === 200) {
+            this.endpointData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertMessageData () {
+      return new Promise(resolve => {
+        this.alertMessageLoading = true
+        this.$get('stat/alertMessage/total').then(response => {
+          this.alertMessageLoading = false
+          if (response.code === 200) {
+            this.alertMessageData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertRuleData () {
+      return new Promise(resolve => {
+        this.$get('stat/alertRule/total').then(response => {
+          if (response.code === 200) {
+            this.alertRuleData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    initMap () {
+      let loadPromise
+      this.loadMapConfig().then((mapConfig) => {
+        if (mapConfig && this.map) {
+          loadPromise = this.loadDataCenterMapData()
+        }
+      })
+      return loadPromise
+    },
+    initTooltipChart (param) {
+      const vm = this
+      setTimeout(() => {
+        const data = param.tooltip.options.data
+        // console.info(tooltipEndpointChart);
+        tooltipEndpointChart = echarts.init(document.querySelector('#tooltip-chart--endpoint'))
+        tooltipPrometheusChart = echarts.init(document.querySelector('#tooltip-chart--prometheus'))
+        const endpointOption = chartConfig.getOption('tooltipPie')
+        const prometheusOption = chartConfig.getOption('tooltipPie')
+        endpointOption.series[0].label.formatter = data.endpointTotal + ''
+        endpointOption.series[0].data = [
+          { name: vm.$t('dashboard.overview.asset.pingUp'), value: data.endpointUp ? data.endpointUp : 0 },
+          { name: vm.$t('dashboard.overview.asset.pingDown'), value: data.endpointDown ? data.endpointDown : 0 },
+          { name: vm.$t('asset.suspended'), value: data.endpointSuspended ? data.endpointSuspended : 0 }
+        ]
+        endpointOption.title.text = vm.$t('project.endpoint.endpoint')
+        endpointOption.legend.data = [vm.$t('dashboard.overview.asset.pingUp'), vm.$t('dashboard.overview.asset.pingDown'), vm.$t('asset.suspended')]
+        prometheusOption.series[0].label.formatter = data.promTotal + ''
+        prometheusOption.series[0].data = [
+          { name: vm.$t('dashboard.overview.asset.pingUp'), value: data.promUp ? data.promUp : 0 },
+          { name: vm.$t('dashboard.overview.asset.pingDown'), value: data.promDown ? data.promDown : 0 }
+        ]
+        prometheusOption.title.text = 'Prometheus'
+        prometheusOption.legend.data = [vm.$t('dashboard.overview.asset.pingUp'), vm.$t('dashboard.overview.asset.pingDown')]
+        tooltipEndpointChart.setOption(endpointOption, true)
+        tooltipPrometheusChart.setOption(prometheusOption, true)
+      }, 100)
+      /* setTimeout(function() {
+          tooltipEndpointChart.setOption(endpointOption);
+          tooltipPrometheusChart.setOption(prometheusOption);
+        }, 100); */
+    },
+    loadMapConfig () {
+      const vm = this
+      return new Promise(resolve => {
+        const DefaultIcon = L.icon({
+          iconUrl: icon,
+          shadowUrl: iconShadow
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        const param = { paramKey: 'map_center_config' }
+        this.$get('sysConfig', param).then(response => {
+          if (response.code == 200) {
+            const mapConfig = JSON.parse(response.data.paramKey.map_center_config)
+            if (this.map) {
+              this.map.remove()
+              this.map = null
+            }
+            const map = L.map('map', {
+              minZoom: mapConfig.minZoom,
+              maxZoom: mapConfig.maxZoom,
+              attributionControl: false,
+              zoomControl: false,
+              maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
+            }).setView([mapConfig.latitude, mapConfig.longitude], mapConfig.zoom)
+            map.createPane('myPane', document.querySelector('.my-pane'))
+            map.on('tooltipopen', function (param) {
+              setTimeout(() => {
+                vm.initTooltipChart(param)
+              }, 100)
+            })
+            map.on('tooltipclose', function (param) {
+              tooltipEndpointChart && tooltipEndpointChart.clear()
+              tooltipPrometheusChart && tooltipPrometheusChart.clear()
+            })
+            this.map = map
+
+            L.tileLayer(
+              '/static/Tiles/{z}/{x}/{y}.png',
+              { noWrap: true }
+            ).addTo(map)
+
+            const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
+            attribution.addAttribution(' © OpenStreetMap contributors')
+            attribution.addTo(map)
+
+            L.control.zoom({
+              position: 'bottomright',
+              zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
+              zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
+              zoomInTitle: '',
+              zoomOutTitle: ''
+            }).addTo(map)
+
+            resolve(mapConfig)
+          }
+        })
+      })
+    },
+    loadDataCenterMapData () {
+      const testData = [
+        {
+          name: 'insert-dfda321cb4cb482aa0c3787887c81a0f',
+          color: 2,
+          asset: {
+            total: 27,
+            ok: 26,
+            alarm: 1
+          },
+          agent: {
+            up: 27,
+            down: 0
+          },
+          alert: {
+            P1: 4,
+            P2: 10,
+            P3: 2
+          }
+        },
+        {
+          name: 'insert-a6662a7c321143e3b8fb33c832e11805',
+          color: 1,
+          asset: {
+            total: 14,
+            ok: 14,
+            alarm: 0
+          },
+          agent: {
+            up: 14,
+            down: 0
+          },
+          alert: {
+            P1: 0,
+            P2: 0,
+            P3: 0
+          }
+        },
+        {
+          name: 'JBXXG',
+          color: 3,
+          asset: {
+            total: 7,
+            ok: 0,
+            alarm: 0
+          },
+          agent: {
+            up: 0,
+            down: 7
+          },
+          alert: {
+            P1: 0,
+            P2: 0,
+            P3: 0
+          }
+        }
+      ]
+      return new Promise(resolve => {
+        const requests = [axios.get('dc?pageSize=-1')/* , axios.get('stat/overview/map') */]
+        axios.all(requests).then(result => {
+          const dcInfos = result[0].data.data.list
+          const dcStats = testData
+          dcStats.sort((a, b) => {
+            return a.asset.total - b.asset.total
+          })
+          dcStats.forEach(s => {
+            const dc = dcInfos.find(i => i.name === s.name)
+            dc && (s = { ...s, latitude: dc.latitude, longitude: dc.longitude })
+          })
+          const bigScatter = 10
+          const mediumScatter = 8
+          const smallScatter = 6
+          const maxAssetTotal = dcInfos[dcInfos.length - 1].assetNum // 获取asset数量最大值
+
+          const bigBoundary = Number.parseInt(maxAssetTotal / 3 * 2) // 根据最大值定下大图标、中图标的阈值
+          const mediumBoundary = Number.parseInt(maxAssetTotal / 3)
+          dcStats.forEach(dcStat => {
+            if (regNum.test(dcStat.latitude) && regNum.test(dcStat.longitude)) {
+              let symbolSize
+              if (dcStat.asset.total >= bigBoundary) {
+                symbolSize = bigScatter
+              } else if (dcStat.asset.total < bigBoundary && dcStat.asset.total >= mediumBoundary) {
+                symbolSize = mediumScatter
+              } else {
+                symbolSize = smallScatter
+              }
+              let shadowMarker
+              let marker
+              if (dcStat.color === 1) {
+                shadowMarker = L.circleMarker([dcStat.latitude, dcStat.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                marker = L.circleMarker([dcStat.latitude, dcStat.longitude], { interactive: false, color: this.theme.successColor, opacity: 0.42, fillColor: this.theme.successColor, fillOpacity: 0.5, radius: symbolSize, className: 'real-marker' })
+              } else if (dcStat.color === 2) {
+                shadowMarker = L.circleMarker([dcStat.latitude, dcStat.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                marker = L.circleMarker([dcStat.latitude, dcStat.longitude], { interactive: false, color: this.theme.dangerColor, opacity: 0.42, fillColor: this.theme.dangerColor, fillOpacity: 0.5, radius: symbolSize, className: 'real-marker error-item' })
+              } else if (dcStat.color === 3) {
+                shadowMarker = L.circleMarker([dcStat.latitude, dcStat.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                marker = L.circleMarker([dcStat.latitude, dcStat.longitude], { interactive: false, color: this.theme.suspendedColor, opacity: 0.42, fillColor: this.theme.suspendedColor, fillOpacity: 0.5, radius: symbolSize, className: 'real-marker' })
+              }
+              shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+              shadowMarker.on('mouseover', (param) => {
+                const point = param.containerPoint
+                const event = param.originalEvent
+                this.tooltip.x = event.clientX + point.x - event.layerX - 5
+                this.tooltip.y = event.clientY + point.y - event.layerY
+              })
+              shadowMarker.addTo(this.map)
+              marker.addTo(this.map)
+            }
+          })
+        })
+      })
+
+      /* new Promise(resolve => {
+        const requests = [axios.get('dc?pageSize=-1'), axios.get('stat/dc/state')]
+        axios.all(requests).then((result) => {
+          if (result) {
+            let dcInfos = null
+            let dcStats = null
+            if (result[0].data && result[0].data.code == 200) {
+              dcInfos = result[0].data.data.list
+            }
+            if (result[1].data && result[1].data.code == 200) {
+              dcStats = result[1].data.data
+            }
+            if (dcInfos && dcStats) {
+              dcInfos.sort((a, b) => {
+                return a.assetNum - b.assetNum
+              })
+              const bigScatter = 10
+              const mediumScatter = 8
+              const smallScatter = 6
+              const maxAssetTotal = dcInfos[dcInfos.length - 1].assetNum // 获取asset数量最大值
+
+              const bigBoundary = Number.parseInt(maxAssetTotal / 3 * 2) // 根据最大值定下大图标、中图标的阈值
+              const mediumBoundary = Number.parseInt(maxAssetTotal / 3)
+              dcInfos.forEach(dcInfo => {
+                if (regNum.test(dcInfo.latitude) && regNum.test(dcInfo.longitude)) {
+                  let symbolSize
+                  if (dcInfo.assetNum >= bigBoundary) {
+                    symbolSize = bigScatter
+                  } else if (dcInfo.assetNum < bigBoundary && dcInfo.assetNum >= mediumBoundary) {
+                    symbolSize = mediumScatter
+                  } else {
+                    symbolSize = smallScatter
+                  }
+                  let shadowMarker = null
+                  let marker = null
+                  if (dcInfo.state === 'ON') {
+                    const hasAlert = dcStat.alertP1 != 0 || dcStat.alertP2 != 0 || dcStat.alertP3 != 0 || dcStat.assetPingDown != 0 || dcStat.endpointDown != 0 || dcStat.promDown != 0
+                    shadowMarker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                    marker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { interactive: false, color: hasAlert ? '#DE5D3F' : '#23BF9A', opacity: 0.42, fillColor: hasAlert ? '#DE5D3F' : '#23BF9A', fillOpacity: 0.5, radius: symbolSize, className: hasAlert ? 'real-marker error-item' : 'real-marker ' })
+                    shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+                  } else {
+                    shadowMarker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                    marker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { interactive: false, color: '#010101', opacity: 0.35, fillColor: '#010101', fillOpacity: 0.35, radius: symbolSize, className: 'real-marker' })
+                    shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+                  }
+                  shadowMarker.on('mouseover', (param) => {
+                    // console.info(param);
+                    const point = param.containerPoint
+                    const event = param.originalEvent
+                    this.tooltip.x = event.clientX + point.x - event.layerX - 5
+                    this.tooltip.y = event.clientY + point.y - event.layerY
+                  })
+                  shadowMarker.addTo(this.map)
+                  marker.addTo(this.map)
+                }
+              })
+            }
+            /!* if (dcInfos && dcStats) {
+              const dcStatsCopy = Object.assign([], dcStats)
+              dcStatsCopy.sort((a, b) => {
+                return a.assetTotal - b.assetTotal
+              })
+              const bigScatter = 10
+              const mediumScatter = 8
+              const smallScatter = 6
+              const maxAssetTotal = dcStatsCopy[dcStatsCopy.length - 1].assetTotal
+
+              const bigBoundary = Number.parseInt(maxAssetTotal / 3 * 2)
+              const mediumBoundary = Number.parseInt(maxAssetTotal / 3)
+              for (const dcStat of dcStats) {
+                const dcId = dcStat.id
+                const dcInfo = dcInfos.find((item) => {
+                  return item.id == dcId
+                })
+                if (regNum.test(dcInfo.latitude) && regNum.test(dcInfo.longitude)) {
+                  let symbolSize = mediumScatter
+                  if (dcStat.assetTotal >= bigBoundary) {
+                    symbolSize = bigScatter
+                  } else if (dcStat.assetTotal < bigBoundary && dcStat.assetTotal >= mediumBoundary) {
+                    symbolSize = mediumScatter
+                  } else {
+                    symbolSize = smallScatter
+                  }
+                  let shadowMarker = null
+                  let marker = null
+                  if (dcInfo.state === 'ON') {
+                    const hasAlert = dcStat.alertP1 != 0 || dcStat.alertP2 != 0 || dcStat.alertP3 != 0 || dcStat.assetPingDown != 0 || dcStat.endpointDown != 0 || dcStat.promDown != 0
+                    shadowMarker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                    marker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { interactive: false, color: hasAlert ? '#DE5D3F' : '#23BF9A', opacity: 0.42, fillColor: hasAlert ? '#DE5D3F' : '#23BF9A', fillOpacity: 0.5, radius: symbolSize, className: hasAlert ? 'real-marker error-item' : 'real-marker ' })
+                    shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+                  } else {
+                    shadowMarker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                    marker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { interactive: false, color: '#010101', opacity: 0.35, fillColor: '#010101', fillOpacity: 0.35, radius: symbolSize, className: 'real-marker' })
+                    shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+                  }
+                  shadowMarker.on('mouseover', (param) => {
+                    // console.info(param);
+                    const point = param.containerPoint
+                    const event = param.originalEvent
+                    this.tooltip.x = event.clientX + point.x - event.layerX - 5
+                    this.tooltip.y = event.clientY + point.y - event.layerY
+                  })
+                  shadowMarker.addTo(this.map)
+                  marker.addTo(this.map)
+                }
+              }
+            } *!/
+          }
+          resolve()
+        })
+      }) */
+    },
+    queryAlertStatByModule () {
+      return new Promise(resolve => {
+        this.$refs.moduleHexagon.startLoading()
+        this.$get('monitor/module', { pageSize: -1 }).then(response => {
+          this.$refs.moduleHexagon.endLoading()
+          if (response.code === 200) {
+            const moduleData = response.data.list
+            moduleData.sort((a, b) => b.alertNum - a.alertNum)
+            const alertTopModules = moduleData.slice(0, 20)
+            const requests = alertTopModules.map(a => axios.get(`stat/alertMessage/severity?moduleId=${a.id}`))
+            const moduleStateData = []
+            axios.all(requests).then(result => {
+              result.forEach((alert, i) => {
+                const severityData = {}
+                alert.data.data.list && alert.data.data.list.forEach(a => {
+                  severityData[a.name] = a.num
+                })
+                !severityData.P1 && (severityData.P1 = 0)
+                !severityData.P2 && (severityData.P2 = 0)
+                !severityData.P3 && (severityData.P3 = 0)
+                moduleStateData.push({ ...alertTopModules[i], alert: [severityData] })
+              })
+              this.messageModuleData = moduleStateData
+            })
+          }
+          resolve()
+        })
+      })
+    },
+    convertTrafficData (data) {
+      const result = []
+      data.forEach(item => {
+        const hasDc = result.some(dc => { // dc去重
+          return item.idc && dc.label == item.idc.name
+        })
+        if (item.idc && !hasDc) {
+          result.push({ label: item.idc.name, value: '$dc$::' + item.idc.name, level: 1 })
+        }
+      })
+      return result
+    },
+    mapTooltipFormatter (dcStat) {
+      return `<div class="tooltip">
+          <div class="tooltip--title">${dcStat.name}</div>
+          <div class="tooltip--row">
+            <div class="tooltip-asset">
+              <div class="tooltip-asset--title"><span>${this.$t('asset.asset')}</span><span>Total：${dcStat.assetTotal}</span></div>
+              <div class="tooltip-asset--row">
+                <div>${this.$t('asset.state')}</div>
+                <div class="tooltip-asset--sub-rows">
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t('asset.inStock')}</div>
+                    <div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetInStock}</span></div>
+                  </div>
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t('asset.notInStock')}</div>
+                    <div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetOutStock}</span></div>
+                  </div>
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t('asset.suspended')}</div>
+                    <div class="sub-row--value"><div class="sign gray-sign"></div><span>${dcStat.assetSuspended}</span></div>
+                  </div>
+                </div>
+              </div>
+              <div class="tooltip-asset--row tooltip-asset--ping ">
+                <div style="line-height: 50px">${this.$t('asset.left.ping')}</div>
+                <div class="tooltip-asset--sub-rows">
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t('dashboard.overview.asset.pingUp')}</div>
+                    <div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetPingUp}</span></div>
+                  </div>
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t('dashboard.overview.asset.pingDown')}</div>
+                    <div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetPingDown}</span></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="tooltip-alert">
+              <div class="tooltip-alert--title"><span>${this.$t('dashboard.overview.asset.alert')}</span><span>${dcStat.alertTotal}</span></div>
+              <div class="tooltip-alert--row">
+                <div class="row--label row--label__p1">P1</div><div class="row--value row--value__p1">${dcStat.alertP1}</div>
+              </div>
+              <div class="tooltip-alert--row">
+                <div class="row--label row--label__p2">P2</div><div class="row--value row--value__p2">${dcStat.alertP2}</div>
+              </div>
+              <div class="tooltip-alert--row">
+                <div class="row--label row--label__p3">P3</div><div class="row--value row--value__p3">${dcStat.alertP3}</div>
+              </div>
+            </div>
+          </div>
+          <div class="tooltip--row">
+            <div class="legend-value">
+              <div>${dcStat.endpointUp}</div>
+              <div>${dcStat.endpointDown}</div>
+              <div>${dcStat.endpointSuspended}</div>
+            </div>
+            <div class="legend-value">
+              <div>${dcStat.promUp}</div>
+              <div>${dcStat.promDown}</div>
+            </div>
+            <div class="tooltip-chart" id="tooltip-chart--endpoint"></div>
+            <div class="tooltip-chart" id="tooltip-chart--prometheus"></div>
+          </div>
+        </div>`
+
+      // return tooltip;
+    },
+    simpleFormatter (params) {
+      return `<div class="tooltip" style="min-width: unset;">${params.value}</div>`
+    },
+    assetTypeFormatter (params) {
+      return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`
+    },
+    switchFullScreen () {
+      this.isFullScreen = this.judgeFullScreen()
+      if (this.isFullScreen) {
+        this.exitFullScreen()
+      } else {
+        this.fullScreen()
+      }
+    },
+    judgeFullScreen () {
+      return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
+    },
+    fullScreen () {
+      const container = document.querySelector('.overview')
+      const fullScreenFunc = container.requestFullscreen || container.mozRequestFullScreen || container.webkitRequestFullscreen || container.msRequestFullscreen
+      fullScreenFunc.call(container)
+      this.isFullScreen = true
+    },
+    exitFullScreen () {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      }
+      this.isFullScreen = false
+    },
+    /* header 时间处理 start */
+    initDate () {
+      this.sysTime = this.getTime(0)
+      this.sysDate = this.getDate(0)
+      this.sysWeek = this.getWeek(0)
+      this.freshTime()
+    },
+    freshTime () {
+      const $temp = this
+      let counter = 0
+      this.freshDateTimer = setInterval(function () {
+        counter++
+        $temp.sysTime = $temp.getTime(counter)
+        $temp.sysDate = $temp.getDate(counter)
+        $temp.sysWeek = $temp.getWeek(counter)
+      }, 1000)
+    },
+    getTime (counter) {
+      const date = new Date(this.system_server_time)
+      date.setSeconds(date.getSeconds() + counter)
+      const hours = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
+      const minutes = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
+      const seconds = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
+      return hours + ':' + minutes + ':' + seconds
+    },
+    getDate (counter) {
+      const date = new Date(this.system_server_time)
+      date.setSeconds(date.getSeconds() + counter)
+      const years = date.getFullYear()
+      const months = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
+      const days = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
+      return years + '-' + months + '-' + days
+    },
+    getWeek (counter) {
+      const weeks = [i18n.t('date.week.seven'), i18n.t('date.week.one'), i18n.t('date.week.two'), i18n.t('date.week.three'), i18n.t('date.week.four'), i18n.t('date.week.five'), i18n.t('date.week.six')]
+      const date = new Date(this.system_server_time)
+      date.setSeconds(date.getSeconds() + counter)
+      const day = date.getDay()
+      return weeks[day]
+    },
+    dateFormat (fmt, date) {
+      let ret
+      const opt = {
+        'y+': date.getFullYear().toString(), // 年
+        'm+': (date.getMonth() + 1).toString(), // 月
+        'd+': date.getDate().toString(), // 日
+        'H+': date.getHours().toString(), // 时
+        'M+': date.getMinutes().toString(), // 分
+        'S+': date.getSeconds().toString() // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+      }
+      for (const k in opt) {
+        ret = new RegExp('(' + k + ')').exec(fmt)
+        if (ret) {
+          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
+        };
+      };
+      return fmt
+    },
+    /* header 时间处理end */
+    jumpTo (data, id) {
+      if (data == 'asset') {
+        bus.$emit('clear-asset-filter') // 清除leftMenu左侧菜单过滤条件
+        // if(this.$store.getters.getIdcArr.length===0){return}//如果不存在idc 则不跳转
+      }
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    zoomMap (val) {
+      const geo = this.$refs.dataCenterMap.getOption().geo
+      if (geo && geo.length > 0) {
+        const zoom = geo[0].zoom
+        const limit = geo[0].scaleLimit
+        const value = zoom + val
+        if (value <= limit.max && value >= limit.min) {
+          this.$refs.dataCenterMap.setOption({ geo: { zoom: value } })
+        }
+      }
+    }
+  },
+  mounted () {
+    this.initData()
+    this.querySystemState().then(() => {
+      this.initDate()
+    })
+  },
+  beforeDestroy () {
+    this.allProject = []
+  },
+  destroyed () {
+    clearInterval(this.freshDataTimer)
+    clearInterval(this.freshDateTimer)
+    this.allProject = null
+  }
+}
+</script>
+
+<style lang="scss">
+@import './overview2.scss';
+@import '@/assets/css/common/tableCommon.scss';
+.leaflet-control-zoom{
+  border: 1px solid #E7EAED !important;
+  box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77) !important;
+  .leaflet-control-zoom-out,.leaflet-control-zoom-in{
+    opacity: .7;
+    background: #FFF;
+  }
+}
+.leaflet-control-attribution{
+  background-color: unset !important;
+  color: rgba(178, 178, 178, 0.77);
+}
+@keyframes error-animation{
+  0% {fill-opacity:.5}
+  50% {fill-opacity:0.75}
+  100% {fill-opacity:1}
+}
+.error-item{
+  color: #FADED7 ;
+  animation: error-animation 1s infinite ease-in-out;
+  animation-direction:normal;
+}
+.real-marker{
+  pointer-events: none;
+}
+.error-color{
+
+}
+.my-pane {
+  position: fixed;
+  width: 1px;
+  z-index: 99999;
+  height: 1px;
+  background-color: transparent;
+}
+.leaflet-bottom{
+  z-index: 409;
+}
+.el-carousel--horizontal{
+  height: 100%;
+}
+.el-carousel__container{
+  height: calc(100% - 36px);
+}
+.el-carousel__item .project-name {
+  font-size: 18px;
+  margin: 0;
+  position: absolute;
+  z-index: 1;
+}
+
+.el-carousel__item:nth-child(2n) {
+  /*background-color: #99a9bf;*/
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  /*background-color: #d3dce6;*/
+}
+</style>
+<style lang="scss" scoped>
+.maskLayer{
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  cursor: pointer;
+}
+/deep/ .el-carousel__indicator--horizontal .el-carousel__button{
+  background-color: #C0C4CC;
+  opacity: .24;
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+}
+/deep/ .el-carousel__indicator--horizontal.is-active .el-carousel__button{
+  opacity: 1;
+}
+
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index 2347e4094..3473bf3ab 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -1,5 +1,6 @@
 .overview {
   height: 100%;
+  padding: 0 10px;
   background-color: #f6f6f6;
 }
 .overview-content-header{
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index fb542779a..c7a78873a 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -31,7 +31,7 @@ export default new Router({
         },
         {
           path: 'overview',
-          component: resolve => require(['../components/page/dashboard/overview/overview2.vue'], resolve)
+          component: resolve => require(['../components/page/dashboard/overview/overview.vue'], resolve)
         },
         {
           path: '/monitor/project',