diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 2a3b22db0..cbc35821c 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -517,6 +517,231 @@
         }
       }
     },
+    "@codemirror/autocomplete": {
+      "version": "0.19.15",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-0.19.15.tgz",
+      "integrity": "sha512-GQWzvvuXxNUyaEk+5gawbAD8s51/v2Chb++nx0e2eGWrphWk42isBtzOMdc3DxrxrZtPZ55q2ldNp+6G8KJLIQ==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.4",
+        "@codemirror/text": "^0.19.2",
+        "@codemirror/tooltip": "^0.19.12",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0"
+      }
+    },
+    "@codemirror/basic-setup": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/basic-setup/-/basic-setup-0.19.3.tgz",
+      "integrity": "sha512-2hfO+QDk/HTpQzeYk1NyL1G9D5L7Sj78dtaQP8xBU42DKU9+OBPF5MdjLYnxP0jKzm6IfQfsLd89fnqW3rBVfQ==",
+      "requires": {
+        "@codemirror/autocomplete": "^0.19.0",
+        "@codemirror/closebrackets": "^0.19.0",
+        "@codemirror/commands": "^0.19.0",
+        "@codemirror/comment": "^0.19.0",
+        "@codemirror/fold": "^0.19.0",
+        "@codemirror/gutter": "^0.19.0",
+        "@codemirror/highlight": "^0.19.0",
+        "@codemirror/history": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/lint": "^0.19.0",
+        "@codemirror/matchbrackets": "^0.19.0",
+        "@codemirror/rectangular-selection": "^0.19.2",
+        "@codemirror/search": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.31"
+      }
+    },
+    "@codemirror/closebrackets": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/closebrackets/-/closebrackets-0.19.2.tgz",
+      "integrity": "sha512-ClMPzPcPP0eQiDcVjtVPl6OLxgdtZSYDazsvT0AKl70V1OJva0eHgl4/6kCW3RZ0pb2n34i9nJz4eXCmK+TYDA==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.2",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.44"
+      }
+    },
+    "@codemirror/commands": {
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-0.19.8.tgz",
+      "integrity": "sha512-65LIMSGUGGpY3oH6mzV46YWRrgao6NmfJ+AuC7jNz3K5NPnH6GCV1H5I6SwOFyVbkiygGyd0EFwrWqywTBD1aw==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/matchbrackets": "^0.19.0",
+        "@codemirror/state": "^0.19.2",
+        "@codemirror/text": "^0.19.6",
+        "@codemirror/view": "^0.19.22",
+        "@lezer/common": "^0.15.0"
+      }
+    },
+    "@codemirror/comment": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/comment/-/comment-0.19.1.tgz",
+      "integrity": "sha512-uGKteBuVWAC6fW+Yt8u27DOnXMT/xV4Ekk2Z5mRsiADCZDqYvryrJd6PLL5+8t64BVyocwQwNfz1UswYS2CtFQ==",
+      "requires": {
+        "@codemirror/state": "^0.19.9",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/fold": {
+      "version": "0.19.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/fold/-/fold-0.19.4.tgz",
+      "integrity": "sha512-0SNSkRSOa6gymD6GauHa3sxiysjPhUC0SRVyTlvL52o0gz9GHdc8kNqNQskm3fBtGGOiSriGwF/kAsajRiGhVw==",
+      "requires": {
+        "@codemirror/gutter": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.22"
+      }
+    },
+    "@codemirror/gutter": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/gutter/-/gutter-0.19.9.tgz",
+      "integrity": "sha512-PFrtmilahin1g6uL27aG5tM/rqR9DZzZYZsIrCXA5Uc2OFTFqx4owuhoU9hqfYxHp5ovfvBwQ+txFzqS4vog6Q==",
+      "requires": {
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.23"
+      }
+    },
+    "@codemirror/highlight": {
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@codemirror/highlight/-/highlight-0.19.8.tgz",
+      "integrity": "sha512-v/lzuHjrYR8MN2mEJcUD6fHSTXXli9C1XGYpr+ElV6fLBIUhMTNKR3qThp611xuWfXfwDxeL7ppcbkM/MzPV3A==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.3",
+        "@codemirror/view": "^0.19.39",
+        "@lezer/common": "^0.15.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "@codemirror/history": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/history/-/history-0.19.2.tgz",
+      "integrity": "sha512-unhP4t3N2smzmHoo/Yio6ueWi+il8gm9VKrvi6wlcdGH5fOfVDNkmjHQ495SiR+EdOG35+3iNebSPYww0vN7ow==",
+      "requires": {
+        "@codemirror/state": "^0.19.2",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/language": {
+      "version": "0.19.10",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.19.10.tgz",
+      "integrity": "sha512-yA0DZ3RYn2CqAAGW62VrU8c4YxscMQn45y/I9sjBlqB1e2OTQLg4CCkMBuMSLXk4xaqjlsgazeOQWaJQOKfV8Q==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.5",
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@codemirror/lint": {
+      "version": "0.19.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-0.19.6.tgz",
+      "integrity": "sha512-Pbw1Y5kHVs2J+itQ0uez3dI4qY9ApYVap7eNfV81x1/3/BXgBkKfadaw0gqJ4h4FDG7OnJwb0VbPsjJQllHjaA==",
+      "requires": {
+        "@codemirror/gutter": "^0.19.4",
+        "@codemirror/panel": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.1",
+        "@codemirror/state": "^0.19.4",
+        "@codemirror/tooltip": "^0.19.16",
+        "@codemirror/view": "^0.19.22",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/matchbrackets": {
+      "version": "0.19.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/matchbrackets/-/matchbrackets-0.19.4.tgz",
+      "integrity": "sha512-VFkaOKPNudAA5sGP1zikRHCEKU0hjYmkKpr04pybUpQvfTvNJXlReCyP0rvH/1iEwAGPL990ZTT+QrLdu4MeEA==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0"
+      }
+    },
+    "@codemirror/panel": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/panel/-/panel-0.19.1.tgz",
+      "integrity": "sha512-sYeOCMA3KRYxZYJYn5PNlt9yNsjy3zTNTrbYSfVgjgL9QomIVgOJWPO5hZ2sTN8lufO6lw0vTBsIPL9MSidmBg==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/rangeset": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/rangeset/-/rangeset-0.19.9.tgz",
+      "integrity": "sha512-V8YUuOvK+ew87Xem+71nKcqu1SXd5QROMRLMS/ljT5/3MCxtgrRie1Cvild0G/Z2f1fpWxzX78V0U4jjXBorBQ==",
+      "requires": {
+        "@codemirror/state": "^0.19.0"
+      }
+    },
+    "@codemirror/rectangular-selection": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/rectangular-selection/-/rectangular-selection-0.19.2.tgz",
+      "integrity": "sha512-AXK/p5eGwFJ9GJcLfntqN4dgY+XiIF7eHfXNQJX5HhQLSped2wJE6WuC1rMEaOlcpOqlb9mrNi/ZdUjSIj9mbA==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.4",
+        "@codemirror/view": "^0.19.48"
+      }
+    },
+    "@codemirror/search": {
+      "version": "0.19.10",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-0.19.10.tgz",
+      "integrity": "sha512-qjubm69HJixPBWzI6HeEghTWOOD8NXiHOTRNvdizqs8xWRuFChq9zkjD3XiAJ7GXSTzCuQJnAP9DBBGCLq4ZIA==",
+      "requires": {
+        "@codemirror/panel": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.3",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.34",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/state": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
+      "integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
+      "requires": {
+        "@codemirror/text": "^0.19.0"
+      }
+    },
+    "@codemirror/text": {
+      "version": "0.19.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.6.tgz",
+      "integrity": "sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA=="
+    },
+    "@codemirror/tooltip": {
+      "version": "0.19.16",
+      "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.19.16.tgz",
+      "integrity": "sha512-zxKDHryUV5/RS45AQL+wOeN+i7/l81wK56OMnUPoTSzCWNITfxHn7BToDsjtrRKbzHqUxKYmBnn/4hPjpZ4WJQ==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/view": {
+      "version": "0.19.48",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.48.tgz",
+      "integrity": "sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==",
+      "requires": {
+        "@codemirror/rangeset": "^0.19.5",
+        "@codemirror/state": "^0.19.3",
+        "@codemirror/text": "^0.19.0",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "@eslint/eslintrc": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
@@ -1161,6 +1386,19 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@lezer/common": {
+      "version": "0.15.12",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
+      "integrity": "sha512-edfwCxNLnzq5pBA/yaIhwJ3U3Kz8VAUOTRg0hhxaizaI1N+qxV7EXDv/kLCkLeq2RzSFvxexlaj5Mzfn2kY0Ig=="
+    },
+    "@lezer/lr": {
+      "version": "0.15.8",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.15.8.tgz",
+      "integrity": "sha512-bM6oE6VQZ6hIFxDNKk8bKPa14hqFrV07J/vHGOeiAbJReIaQXmkVb6xQu4MR+JBTLa5arGRyAAjJe1qaQt3Uvg==",
+      "requires": {
+        "@lezer/common": "^0.15.0"
+      }
+    },
     "@riophae/vue-treeselect": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
@@ -3820,6 +4058,29 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "codemirror-promql": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/codemirror-promql/-/codemirror-promql-0.19.0.tgz",
+      "integrity": "sha512-SUomAfs8S2+UihtCYMEG7e+5DYCDJTJiTOJjqSXSAylHacgyx5z/V20vA4KA7uSe+KHgKXxjM6R9ZOfkz4SJPg==",
+      "requires": {
+        "lru-cache": "^6.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
     "codepage": {
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
@@ -4429,6 +4690,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "crelt": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
+      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
+    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -16907,6 +17173,11 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "style-mod": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
+      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -18394,6 +18665,11 @@
         "browser-process-hrtime": "^1.0.0"
       }
     },
+    "w3c-keyname": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
+      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
+    },
     "walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue
index 01d9408b8..c1c80f0cd 100644
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -1,4 +1,4 @@
- 
+
  <template>
   <div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" >
     <loading :loading="loading"></loading>
diff --git a/nezha-fronted/src/components/chart/chart/chartAutotopology.vue b/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
index a65e93c8d..0b96e814e 100644
--- a/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
+++ b/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
@@ -8,6 +8,7 @@
 <!--            <span class="project-name">{{item.name}}</span>-->
             <topology
               :fromOverView="true"
+              :from-chart="true"
               :obj="item"
               :ref="'topology' + index"
               :topologyIndexF="isFullscreen?('screen'+chartInfo.id+'-'+index):(chartInfo.id+'-'+index)"
@@ -46,7 +47,7 @@ export default {
       this.$get('monitor/project', { pageSize: -1 }).then(res => {
         this.topologyLoading = true
         const axiosAll = []
-        const temp = []
+        let temp = []
         if (res.data.list.length === 0) {
           this.topologyLoading = false
         }
@@ -64,7 +65,8 @@ export default {
           res2.forEach(item => {
             temp.push(item)
           })
-          this.allProject = temp
+          this.allProject = JSON.parse(JSON.stringify(temp))
+          temp = null
           this.topologyLoading = false
         })
       })
@@ -98,7 +100,7 @@ export default {
     }
   },
   mounted () {
-    this.queryAllProjectData()
+
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/chart/chart/chartMap.vue b/nezha-fronted/src/components/chart/chart/chartMap.vue
index fd2223aec..fa20e8d9a 100644
--- a/nezha-fronted/src/components/chart/chart/chartMap.vue
+++ b/nezha-fronted/src/components/chart/chart/chartMap.vue
@@ -16,12 +16,7 @@ import axios from 'axios'
 import icon from 'leaflet/dist/images/marker-icon.png'
 import iconShadow from 'leaflet/dist/images/marker-shadow.png'
 import 'leaflet/dist/leaflet.css'
-import * as echarts from 'echarts'
-import chartConfig from '@/components/page/dashboard/overview/chartConfig'
-// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
 
-let tooltipEndpointChart
-let tooltipPrometheusChart
 const regNum = /^[0-9]+.?[0-9]*/
 export default {
   name: 'chartMap',
@@ -61,7 +56,6 @@ export default {
       }, 500)
     },
     loadMapConfig () {
-      const vm = this
       return new Promise(resolve => {
         const DefaultIcon = L.icon({
           iconUrl: icon,
@@ -85,13 +79,13 @@ export default {
               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-' + this.chartId))
-            map.on('tooltipopen', function (param) {
-              // setTimeout(() => {
-              //   vm.initTooltipChart(param)
-              // }, 100)
-            })
-            map.on('tooltipclose', function (param) {
-            })
+            // map.on('tooltipopen', function (param) {
+            //   // setTimeout(() => {
+            //   //   vm.initTooltipChart(param)
+            //   // }, 100)
+            // })
+            // map.on('tooltipclose', function (param) {
+            // })
             this.map = map
 
             L.tileLayer(
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index 62274d9af..00a4a294b 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -221,7 +221,7 @@ export default {
       // this.$refs['chart' + i][0].resize()
     },
     showFullscreen (show, chartInfo) {
-      this.fullscreen.chartInfo = chartInfo
+      this.fullscreen.chartInfo = JSON.parse(JSON.stringify(chartInfo))
       this.fullscreen.visible = show
     },
     changeGroupHeight (copyList, group, flag) {
@@ -429,7 +429,7 @@ export default {
   watch: {
     dataList: {
       deep: true,
-      handler (n, o) {
+      handler (n) {
         this.gridLayoutShow = false
         this.firstInit = true
         this.gridLayoutLoading = true
@@ -438,11 +438,11 @@ export default {
           const position = getLayoutPosition(n)
           this.$store.commit('setChartLastPosition', position)
         }
-        const tempList = n.map(item => {
+        let tempList = n.map(item => {
           let param = ''
           let height = ''
           if (item.param) {
-            param = item.param
+            param = JSON.parse(JSON.stringify(item.param))
             // try {
             //   param = JSON.parse(item.param)
             // } catch (e) {
@@ -487,6 +487,7 @@ export default {
         }
         this.$nextTick(() => {
           this.copyDataList = JSON.parse(JSON.stringify(tempList))
+          tempList = null
           setTimeout(() => {
             this.gridLayoutShow = true
             if (!this.isGroup) {
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index 652f2e75f..ade2ed351 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -296,7 +296,8 @@ export default {
     this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
   },
   beforeDestroy () {
-    getChart(this.chartId) && getChart(this.chartId).dispose()
-    setChart(this.chartId, null)
+    // getChart(this.chartId) && getChart(this.chartId).dispose()
+    // setChart(this.chartId, null)
+    getChart(this.chartId) && setChart(this.chartId, null)
   }
 }
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 20b016860..60059b762 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -266,7 +266,7 @@ export default {
                   }
                 }
               })
-              this.chartData = chartData
+              this.chartData = JSON.parse(JSON.stringify(chartData))
               if (this.chartInfo.type === 'log') {
                 this.logChartDataFormat()
               }
@@ -310,6 +310,7 @@ export default {
             }
             const chartData = []
             const params = {
+              t: this.chartInfo.id,
               q: encodeURIComponent(JSON.stringify(q)),
               stat: startTime,
               end: endTime,
@@ -322,9 +323,19 @@ export default {
                 chartData.push({ error: res.msg || res.error || res })
                 this.isError = true
               }
-              this.chartData = chartData
+              this.chartData = JSON.parse(JSON.stringify(chartData))
               this.loading = false
             })
+            // this.sendAjax('/stat', params).then(res => {
+            //   if (res.code === 200) {
+            //     chartData.push(res.data.result)
+            //   } else {
+            //     chartData.push({ error: res.msg || res.error || res })
+            //     this.isError = true
+            //   }
+            //   this.chartData = chartData
+            //   this.loading = false
+            // })
             break
           }
           case 'misc': {
@@ -334,7 +345,7 @@ export default {
             })
             if (this.chartInfo.type === 'hexagon') {
               this.getHexagonFigureData().then(res => {
-                this.chartData = res
+                this.chartData = JSON.parse(JSON.stringify(res))
               }).finally(() => {
                 this.loading = false
               })
@@ -388,7 +399,7 @@ export default {
               res.data.links.forEach(item => {
                 item.id = item.source + '-' + item.target
               })
-              this.chartData = [res.data]
+              this.chartData = JSON.parse(JSON.stringify([res.data]))
             })
             break
           }
@@ -530,6 +541,41 @@ export default {
         color = '#23bf9a'
       }
       return color
+    },
+    sendAjax (url, params) {
+      // 构造表单数据
+      return new Promise(resolve => {
+        let nowUrl = url
+        Object.keys(params).forEach((key, index) => {
+          if (index == 0) {
+            nowUrl += '?' + key + '=' + params[key]
+          } else {
+            nowUrl += '&' + key + '=' + params[key]
+          }
+        })
+        const formData = new FormData()
+        formData.append('username', 'johndoe')
+        formData.append('id', 123456)
+        // 创建xhr对象
+        const xhr = new XMLHttpRequest()
+        // 设置xhr请求的超时时间
+        xhr.timeout = 3000
+        // 设置响应返回的数据格式
+        xhr.responseType = ''
+        // 创建一个 post 请求，采用异步
+        xhr.open('get', 'http://192.168.44.100/' + nowUrl, true)
+        xhr.setRequestHeader('Authorization', localStorage.getItem('nz-token'));
+        // 注册相关事件回调处理函数
+        xhr.onload = function (e) {
+          if (this.status == 200 || this.status == 304) {
+            // alert(this.responseText)
+            resolve(JSON.parse(this.responseText))
+          }
+        }
+        xhr.onerror = function(e) { console.log(e) };
+        // 发送数据
+        xhr.send()
+      })
     }
   },
   watch: {
diff --git a/nezha-fronted/src/components/common/alert/alertDaysInfo.vue b/nezha-fronted/src/components/common/alert/alertDaysInfo.vue
index 36d7cab25..abf89a970 100644
--- a/nezha-fronted/src/components/common/alert/alertDaysInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertDaysInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="alert-days-info">
-<!--    {{timestampStr(item.time, 'YYYY-MM-DD')}} {{item.P1+' '+item.P2+' '+item.P3}}-->
+<!--    {{utcTimeToTimezoneStr(item.time, 'YYYY-MM-DD')}} {{item.P1+' '+item.P2+' '+item.P3}}-->
     <div v-for="item in alertDaysData" :key="item.time" :style="showPriority(item)" @mouseenter="tooltipHover(item,true, $event)" @mouseleave="tooltipHover(item,false, $event)">
       <div v-if="item.tooltipShow" class="alert-days-info-tooltip" :style="{left: item.position.left + 'px',top:item.position.top + 'px'}">
-        <div class="tooltip-title severity-time">{{timestampStr(item.time, dateFormatStr)}}</div>
+        <div class="tooltip-title severity-time">{{utcTimeToTimezoneStr(item.time, dateFormatStr)}}</div>
         <div v-for="(severity,index) in severityDataWeight" :key="index" class="severity-info">
           <div class="severity-block" :style="{background: severity.color}"></div>
           <div class="severity-name">{{severity.name}}</div>
diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index 5e19aea6c..0440bb3f7 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -43,6 +43,10 @@
           }}
         </div>
       </div>
+      <div class="alert-label-box name-label">
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
+      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{ $t("overall.type") }}</div>
         <div class="alert-label-value">
@@ -672,11 +676,19 @@ export default {
           if (!dialog) {
             dialog = document.querySelector("#viewGraphDialog .el-dialog");
           }
+<<<<<<< HEAD
           const dialogHeight = dialog.getBoundingClientRect();
           leftOffSet = leftOffSet - dialogHeight.x;
           leftOffSetView = dialogHeight.x;
           topOffSet = topOffSet - dialogHeight.y;
           topOffSetView = topOffSet;
+=======
+          const dialogHeight = dialog.getBoundingClientRect()
+          leftOffSet = leftOffSet - 3 * dialogHeight.x
+          leftOffSetView = dialogHeight.x
+          topOffSet = topOffSet - dialogHeight.y
+          topOffSetView = topOffSet
+>>>>>>> 367c493975c4bbf015cdbba1e145e67964759399
         }
         if (position.top > clientHeight / 2) {
           labelPosition = {
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue
index 88c08cbfc..3fcf17396 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue
@@ -30,6 +30,7 @@
       :id="alertLabelId"
       :that="alertLabelObj"
       :type="alertLabelType"
+      :alertTableDialog="true"
     ></alertLabel>
   </div>
 </template>
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
index 3f85f7652..e50b10ad7 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
@@ -153,8 +153,7 @@ export default {
 }
 </script>
 
+
 <style scoped>
-.alert .name-labe{
-  display: block;
-}
+
 </style>
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
index 93ed04ce1..1482d6b64 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%; width: 100%" id="alert">
+  <div style="height: 100%; width: 100%" id="alert" class="message-time-line">
     <div class="time-line-header">
       <span>{{ $t("alert.relatedAlerts") }}</span>
       <div class="scope-icon-box">
@@ -54,7 +54,7 @@
           <div class="alert-message-summary">{{ item.summary }}</div>
           <div class="alert-message-startAt">
             <span>Start time:</span>
-            <span>{{item.startTime.split(" ")[1]}}</span>
+            <span>{{utcTimeToTimezoneStr(item.startTime)}}</span>
             <span>Duration:</span>
             <span>{{getDuration(item)}}</span>
           </div>
@@ -114,7 +114,6 @@ import { alertMessage as alertMessageConstant } from "@/components/common/js/con
 import alertMessageLabelMixin from "@/components/common/alert/alertMessageLabelMixin";
 import alertLabelMixin from "@/components/common/mixin/alertLabelMixin";
 import { calcDurationByStringTimeB } from '@/components/common/js/tools.js'
-
 export default {
   name: "alertMessageInfoTimeLine",
   props: {
@@ -144,6 +143,7 @@ export default {
       handler(n) {
         if (n && n.length) {
           this.pageNo = 1;
+          this.lastDataTime = ''
           this.getTimeLineData();
         }
       },
@@ -268,7 +268,7 @@ export default {
     disposeTime(pageNo) {
       let i = (pageNo - 1) * this.pageSize;
       for (i; i < this.timeLineData.length; i++) {
-        const lastDataTime = this.timestampStr(
+        const lastDataTime = this.utcTimeToTimezoneStr(
           this.timeLineData[i].startAt,
           this.dateFormatStr
         );
@@ -322,6 +322,7 @@ export default {
       }
       this.scopeChangeTimer = setTimeout(() => {
         this.pageNo = 1;
+        this.lastDataTime = ''
         this.getTimeLineData();
       }, 100);
     },
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index b94cf882c..7e18df206 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -762,7 +762,6 @@ export default {
               document.body.style.height = 'auto'
               // document.getElementsByTagName('html')[0].style.overflow = 'visible'
               const position = dom.getBoundingClientRect()
-              console.log(position)
               this.getPdf(dom, -1 * position.left, -1 * position.top,this.searchTime)
               // this.getPdf(dom, 0, 0)
             }, 2000)
diff --git a/nezha-fronted/src/components/common/js/htmlToPdf.js b/nezha-fronted/src/components/common/js/htmlToPdf.js
index 49d2af70a..237a30e01 100644
--- a/nezha-fronted/src/components/common/js/htmlToPdf.js
+++ b/nezha-fronted/src/components/common/js/htmlToPdf.js
@@ -31,7 +31,6 @@ export default {
         // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
         const imgWidth = 595.28
         const imgHeight = 592.28 / contentWidth * contentHeight
-        console.log(canvas)
         // canvas.paddingTop = '30px'
         const pageDataImg = canvas.toDataURL('image/jpeg', 1.0)
         const img = new Image()
diff --git a/nezha-fronted/src/components/common/mixin/mainMixinFun.js b/nezha-fronted/src/components/common/mixin/mainMixinFun.js
new file mode 100644
index 000000000..635e2da5b
--- /dev/null
+++ b/nezha-fronted/src/components/common/mixin/mainMixinFun.js
@@ -0,0 +1,87 @@
+import bus from '@/libs/bus'
+import { hasButton } from '@/permission'
+import i18n from '@/components/common/i18n'
+export default {
+  methods: {
+    utcTimeToTimezone: function (time) { // 将utc时间 转为系统设者的时间  返回时间戳
+      if (time) {
+        return bus.UTCTimeToConfigTimezone(time)
+      }
+    },
+    utcTimeToTimezoneStr: function (time, fmt) { // 将utc时间 转为系统设者的时间  返回String
+      if (!fmt) {
+        fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
+      }
+      if (time) {
+        return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), fmt)
+      } else {
+        return '-'
+      }
+    },
+    timezoneToUtcTime: function (time) { // 将系统设者的时间 转为utc时间 返回时间戳
+      if (time) {
+        return bus.configTimezoneToUTCTime(time)
+      }
+    },
+    timezoneToUtcTimeStr: function (time, fmt) { // 将系统设者的时间 转为utc时间 返回String
+      if (!fmt) {
+        fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
+      }
+      if (time) {
+        return bus.timeFormate(this.timezoneToUtcTime(time), fmt)
+      }
+    },
+    timeFormate (time) {
+      return bus.timeFormate(time)
+    },
+    hasButton (code) {
+      return hasButton(this.$store.getters.buttonList, code)
+    },
+    numberWithEConvent (num) {
+      if (num) {
+        if ((('' + num).indexOf('E') !== -1) || (('' + num).indexOf('e') !== -1)) {
+          const regExp = /'^((\\d+.?\\d+)[Ee]{1}(\\d+))$', 'ig'/
+          let result = regExp.exec(num)
+          let resultValue = ''
+          let power
+          if (result != null) {
+            resultValue = result[2]
+            power = result[3]
+            result = regExp.exec(num)
+          }
+
+          if (resultValue) {
+            if (power) {
+              const powVer = Math.pow(10, power)
+              resultValue = resultValue * powVer
+              return resultValue
+            }
+          }
+        } else {
+          return num
+        }
+      }
+      return 0
+    },
+    translation (key) {
+      return i18n.t(key)
+    },
+    timeFormatStrToDatePickFormat (str, flag) {
+      if (flag) {
+        const reg = /Y/g
+        str = str.replace(reg, 'y')
+        const reg1 = /D/g
+        str = str.replace(reg1, 'd')
+        const reg2 = /[H,m,s,:]/g
+        str = str.replace(reg2, '')
+        return str
+      } else {
+        const reg = /Y/g
+        str = str.replace(reg, 'y')
+        const reg1 = /D/g
+        str = str.replace(reg1, 'd')
+        return str
+      }
+    },
+  }
+}
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index a6df94c41..10648cb2c 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -67,7 +67,7 @@ export default {
     defaultPick: Number,
     showEmpty: { type: Boolean, default: false },
     id: String,
-    sign:[Number,String]
+    sign: [Number, String]
   },
   data () {
     return {
@@ -168,6 +168,12 @@ export default {
         this.$emit('unitChange', n)
       }
     }
+  },
+  beforeDestroy () {
+    if (this.intervalTimer) {
+      clearInterval(this.intervalTimer)
+      this.intervalTimer = null
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index e644f8a20..58d3d3df3 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -157,7 +157,7 @@
             <!--画布部分-->
             <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full" @contextmenu="onContextMenu($event)"></div>
             <!--设置属性-->
-            <div v-if="editTopologyFlag&&toolShow.attr" class="props">
+            <div v-if="editTopologyFlag&&toolShow.attr && !fromOverView" class="props">
               <canvas-props ref="CanvasProps"
                             :index="topologyIndex"
                             :imgArr = 'tools'
@@ -170,7 +170,7 @@
                             @notModuleIDArrChange="notModuleIDArrChange">
               </canvas-props>
             </div>
-            <div class="context-menu" v-if="contextmenu.left && editTopologyFlag && 0" :style="this.contextmenu">
+            <div class="context-menu" v-if="contextmenu.left && editTopologyFlag && 0 && !fromOverView" :style="this.contextmenu">
               <CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu>
             </div>
             <!--所有节点上的小图标-->
@@ -439,6 +439,7 @@ export default {
       timer: null, // 处理project短时间呢频繁变更的定时器
       timer2: null, // 处理平移画布显示iconState的定时器
       timer3: null, // 处理tooltip的显示定时器
+      timer4: null,
       nodesArr: [],
       notModuleIDArr: [],
       popData: [
@@ -660,12 +661,11 @@ export default {
       this.chartGetData = []
       const axiosArr = []
       const promiseArr = []
-      const self = this
-      const pensPromise = (pen, arr, index) => {
-        return new Promise(function (resolve, reject) {
+      let pensPromise = (pen, arr, index) => {
+        return new Promise((resolve, reject) => {
           Promise.all(arr).then((res) => {
-            self.chartGetData[index].res = self.computeData(res, pen.data.aggregation, pen)
-            self.setAnimation(pen, self.chartGetData[index].res)
+            this.chartGetData[index].res = JSON.parse(JSON.stringify(this.computeData(res, pen.data.aggregation, pen)))
+            this.setAnimation(pen, this.chartGetData[index].res)
             resolve()
           })
         })
@@ -735,6 +735,7 @@ export default {
         // getTopology(this.topologyIndex).fitView();
         this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
         this.getNodesArr()
+        pensPromise = null
       })
     },
     dateChange () {
@@ -774,9 +775,10 @@ export default {
           return
         }
         if (!getTopology(this.topologyIndex)) {
-          const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
+          let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
           canvas.open(data)
           setTopology(this.topologyIndex, canvas)
+          canvas = null
         } else {
           getTopology(this.topologyIndex).open(data)
         }
@@ -801,7 +803,7 @@ export default {
           if (!res.data) {
             return
           }
-          let data = res.data.topo
+          let data = JSON.parse(JSON.stringify(res.data.topo))
           if (!res.data.topo || !res.data.topo.pens.length) {
             this.showNoData = true
           } else {
@@ -821,9 +823,10 @@ export default {
             }
             this.projectInfoShow = true
             this.projectAlertShow = true
-            this.saveData = { ...data }
+            this.saveData = JSON.parse(JSON.stringify(data))
             this.topologyInfo.name = this.obj.name
             resolve(data)
+            data = null
           } else {
             if (data.data) {
               this.topologyInfo = {
@@ -846,12 +849,11 @@ export default {
               const arr = data.pens.filter(item => !item.type)
               this.addNodeInit(arr)
             }
-            const timer = setInterval(() => {
+            this.timer4 = setInterval(() => {
               if (!this.imgInit) {
                 return
               }
-              const promiseArr = [this.$get('stat/module/abnormal', { projectId: this.obj.id })]
-              const self = this
+              const promiseArr = []
               for (let i = 0; i < data.pens.length; i++) {
                 const line = data.pens[i]
                 if (line.type === 1) {
@@ -914,15 +916,17 @@ export default {
                     }
                   }
                 })
-                self.saveData = { ...data }
+                this.saveData = JSON.parse(JSON.stringify(data))
                 resolve(data)
-                clearInterval(timer)
+                clearInterval(this.timer4)
+                this.timer4 = null
               }).catch(res => {
-                self.saveData = { ...data }
+                this.saveData = JSON.parse(JSON.stringify(data))
                 resolve(data)
-                clearInterval(timer)
+                clearInterval(this.timer4)
+                this.timer4 = null
               })
-            }, 100)
+            }, 2000)
           }
         })
       })
@@ -1055,18 +1059,18 @@ export default {
       this.$get('/monitor/module?pageSize=-1&projectIds=' + this.obj.id).then(response => {
         if (response.code === 200) {
           this.projectInfo.loading = false
-          this.allModules = response.data.list
+          this.allModules = JSON.parse(JSON.stringify(response.data.list))
           this.modulesDiff()
         }
       })
     },
 
     getNodesArr () {
-      const arr = []
       if (!getTopology(this.topologyIndex)) return
+      let arr = []
       this.offsetX = getTopology(this.topologyIndex).data.x
       this.offsetY = getTopology(this.topologyIndex).data.y
-      this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
+      arr = getTopology(this.topologyIndex).data.pens.filter(item => {
         if (!item.data) {
           item.data = {
             moduleId: '',
@@ -1081,7 +1085,14 @@ export default {
         return item.type === 0
       })
       // 打开动画 是否更新顶部图标
+      this.nodesArr = arr.map(item => {
+        return {
+          rect: item.rect,
+          data: item.data
+        }
+      })
       this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
+      arr = null
     },
 
     modelTopClick (item, index) {
@@ -1288,9 +1299,9 @@ export default {
           this.tooltipPosition.show = false
           setTimeout(() => {
             this.tooltipPosition.show = true
-            const ePosition = window.ePosition
-            const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
-            const boxHeight = document.getElementsByClassName('page')[0].offsetHeight
+            let ePosition = window.ePosition
+            let boxWidth = document.getElementsByClassName('page')[0].offsetWidth
+            let boxHeight = document.getElementsByClassName('page')[0].offsetHeight
             this.tooltipPosition.left = ePosition.layerX + 20
             this.tooltipPosition.top = ePosition.layerY
             this.$nextTick(() => {
@@ -1306,6 +1317,9 @@ export default {
                   this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
                 }
               }
+              ePosition = null
+              boxWidth = null
+              boxHeight = null
             })
           }, 100)
           break
@@ -1432,22 +1446,26 @@ export default {
             }
             break
           case 'resize': {
-            const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-            const domRect = dom ? dom.getBoundingClientRect() : {}
+            let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
+            let domRect = dom ? dom.getBoundingClientRect() : {}
             if (getTopology(this.topologyIndex)) {
               getTopology(this.topologyIndex).canvasPos = domRect
             }
+            dom = null
+            domRect = null
             break
           }
           case 'scale': {
             if (this.$refs.topTool) {
               this.$refs.topTool.scaleNum = parseInt(data * 100)
             }
-            const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-            const domRect = dom ? dom.getBoundingClientRect() : {}
+            let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
+            let domRect = dom ? dom.getBoundingClientRect() : {}
             if (getTopology(this.topologyIndex)) {
               getTopology(this.topologyIndex).canvasPos = domRect
             }
+            dom = null
+            domRect = null
             break
           }
           case 'locked': {
@@ -1556,7 +1574,7 @@ export default {
         fileList = fileList.splice(fileList.length - 1, 1)
         return false
       }
-      const isSize = new Promise(function (resolve, reject) {
+      new Promise(function (resolve, reject) {
         const width = 0
         const height = 0
         const _URL = window.URL || window.webkitURL
@@ -1718,8 +1736,8 @@ export default {
         this.$get('monitor/project/topo/icon').then(res => {
           this.imgageLoading = true
           this.tools = [...Tools]
-          const imgArr = []
-          const promiseArr = []
+          let imgArr = []
+          let promiseArr = []
           res.data.list.forEach((item, index) => {
             item.imageName = item.name
             delete item.name
@@ -1733,7 +1751,6 @@ export default {
           Promise.all(promiseArr).then((res2, header) => {
             this.iconArray = [...res.data.list]
             this.iconArray.forEach((item, index) => {
-              console.log(res2[index])
               item.image = res2[index].data || res2[index]
               if (!getTopologyImg(item.id)) {
                 setTopologyImg(item.id, item.image)
@@ -1777,12 +1794,14 @@ export default {
 
             this.imgInit = true
             this.imgageLoading = false
+            imgArr = null
+            promiseArr = null
           })
         })
       } else {
         this.imgageLoading = true
         this.$get('monitor/project/topo/icon').then((imageAllId) => {
-          const promiseArr = []
+          let promiseArr = []
           if (!imageAllId || !imageAllId.data) {
             return
           }
@@ -1815,6 +1834,8 @@ export default {
             })
             this.imgInit = true
             this.imgageLoading = false
+            imgidList = null
+            promiseArr = null
           })
         })
       }
@@ -1854,8 +1875,7 @@ export default {
               //   resolve(img)
               // })
             })
-            .catch(err => {
-            })
+            .catch()
         })
       }
     },
@@ -2053,10 +2073,12 @@ export default {
       this.editTopologyFlag = false
       this.$nextTick(() => {
         getTopology(this.topologyIndex).lock(1)
-        const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-        const domRect = dom ? dom.getBoundingClientRect() : {}
+        let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
+        let domRect = dom ? dom.getBoundingClientRect() : {}
         getTopology(this.topologyIndex).canvasPos = domRect
         this.$store.commit('setShowTopoScreen', this.topoScreenState)
+        dom = null
+        domRect = null
       })
       this.reload()
     },
@@ -2128,7 +2150,7 @@ export default {
 
     winResize () {
       setTimeout(() => {
-        const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
+        let domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
         getTopology(this.topologyIndex).canvasPos = domRect
         if (this.fromOverView) {
           getTopology(this.topologyIndex).open(this.oldTopologyData)
@@ -2151,6 +2173,7 @@ export default {
         getTopology(this.topologyIndex).resize()
         getTopology(this.topologyIndex).centerView()
         this.getNodesArr()
+        domRect = null
       }, 500)
     },
     contextmenuNone () {
@@ -2199,18 +2222,6 @@ export default {
       }
       return flag
     },
-    modelPopError (pen, state) {
-      if (item.id === 'asset' && this.activeModelItem.assetError) {
-        return true
-      }
-      if (item.id === 'alert' && this.activeModelItem.alertError) {
-        return true
-      }
-      if (item.id === 'endpoint' && this.activeModelItem.endpointError) {
-        return true
-      }
-      return false
-    },
     redoIndexChange (index) {
       this.redoIndex = index
     },
@@ -2265,20 +2276,32 @@ export default {
       }
     }
   },
-  destroyed () {
+  beforeDestroy () {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+    if (this.timer4) {
+      clearInterval(this.timer4)
+      this.timer4 = null
+    }
     if (getTopology(this.topologyIndex)) {
-      getTopology(this.topologyIndex).destroy()
-      setTopology(this.topologyIndex, null)
       window.topology = null
       window.Le5leTopologyPoint = null
       window.topologyPoint = null
       window.topologyRect = null
+      getTopology(this.topologyIndex).off('contextmenu', this.onContextMenu)
+      getTopology(this.topologyIndex).destroy()
+      Object.keys(getTopology(this.topologyIndex)).forEach(key => {
+        getTopology(this.topologyIndex)[key] = null
+      })
+      setTopology(this.topologyIndex, null)
     }
     if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
       document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
     }
     window.removeEventListener('resize', this.winResize)
-    window.removeEventListener('resize', this.contextmenuNone)
+    window.removeEventListener('click', this.contextmenuNone)
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index b8f742494..e803c0c28 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -643,7 +643,6 @@ export default {
       handler (n, o) {
         this.isEdit = true
         this.editAlertRule = JSON.parse(JSON.stringify(n))
-        console.log(this.editAlertRule)
         if (this.editAlertRule.id || this.editAlertRule.name) {
           this.expressions = [this.editAlertRule.expr]
           this.showTypeSelect = true // 当 edit 时禁用 type下拉框
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleEvalLogTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleEvalLogTable.vue
index 25e4f6ff2..aff6ea989 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleEvalLogTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleEvalLogTable.vue
@@ -48,13 +48,13 @@
           <el-tooltip :disabled="!scope.row.etts" effect="light" placement="right">
             <div slot="content">
               {{$t('config.terminallog.endTime')}}<br/>
-              {{timestampStr(scope.row.etts)}}
+              {{utcTimeToTimezoneStr(scope.row.etts)}}
             </div>
             <span>{{getDuration(scope.row)}}</span>
           </el-tooltip>
         </template>
         <template v-else-if="item.prop === 'stts'">
-          {{timestampStr(scope.row[item.prop])}}
+          {{utcTimeToTimezoneStr(scope.row[item.prop])}}
         </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <template v-else>-</template>
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 5f9692afe..222fb4d9b 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -18,7 +18,7 @@
         <button id="asset-filter" :class="[dataListLayout.indexOf('clickSearch') > -1?'is-focus':'' ]" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
           <i class="nz-icon nz-icon-funnel"></i>
         </button>
-        <pick-time v-model="searchTime" :sign="sign?sign:'message'" :default-pick="10" :refresh-data-func="getTableData" :show-empty="false" :use-chart-unit="false" :use-refresh="false"></pick-time>
+        <pick-time v-model="searchTime" sign="message" :default-pick="10" :refresh-data-func="getTableData" :show-empty="false" :use-chart-unit="false" :use-refresh="false"></pick-time>
         <button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-r-10"
                 type="button" @click="showExportDialog">
           <i class="nz-icon-download1 nz-icon"></i>
@@ -399,6 +399,7 @@ export default {
       pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
       pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
       orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
+      sign: '',
       ids: {
         target: this.searchLabel,
         isSearchInput: true,
@@ -578,7 +579,7 @@ export default {
       })
     },
     messageDetail (row) {
-      this.sign = Number(row.alertRule.id)
+      // this.sign = Number(row.alertRule.id)
       this.$get('/alert/rule/' + row.alertRule.id).then(res => {
         this.currentMsg = { ...row, alertRule: { ...res.data } }
         this.$nextTick(() => {
diff --git a/nezha-fronted/src/components/page/alert/alertSilence.vue b/nezha-fronted/src/components/page/alert/alertSilence.vue
index 3d286c4df..5ff505b63 100644
--- a/nezha-fronted/src/components/page/alert/alertSilence.vue
+++ b/nezha-fronted/src/components/page/alert/alertSilence.vue
@@ -169,7 +169,6 @@ export default {
   },
   methods: {
     queryMessage(alertRule) {
-      console.log(alertRule);
       this.$refs.dataList.showBottomBox('alertRuleAlertMessage', alertRule)
     },
     closeRightBox(refresh) {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 0d4f4be44..cf7bc5cfd 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -394,24 +394,24 @@
 </template>
 
 <script>
-import selectAlertSilence from '../../../common/alert/selectAlertSilence';
-        import { get } from '@/http';
-import { PromQLExtension } from 'codemirror-promql';
-import { basicSetup } from '@codemirror/basic-setup';
+import selectAlertSilence from '../../../common/alert/selectAlertSilence'
+import { get } from '@/http'
+import { PromQLExtension } from 'codemirror-promql'
+import { basicSetup } from '@codemirror/basic-setup'
 // import { EditorState } from '@codemirror/state';
-import { highlightSelectionMatches } from '@codemirror/search';
-import { EditorState, Prec, Compartment } from '@codemirror/state';
-import { indentOnInput, syntaxTree } from '@codemirror/language';
-import { EditorView , highlightSpecialChars, keymap, ViewUpdate, placeholder} from '@codemirror/view';
-import { history, historyKeymap } from '@codemirror/history';
-import { bracketMatching } from '@codemirror/matchbrackets';
-import { defaultKeymap, insertNewlineAndIndent } from '@codemirror/commands';
-import { commentKeymap } from '@codemirror/comment';
-import { lintKeymap } from '@codemirror/lint';
-import { baseTheme, lightTheme, darkTheme, promqlHighlighter } from './CMTheme.tsx';
-import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
-import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
-      
+import { highlightSelectionMatches } from '@codemirror/search'
+import { EditorState, Prec, Compartment } from '@codemirror/state'
+import { indentOnInput, syntaxTree } from '@codemirror/language'
+import { EditorView, highlightSpecialChars, keymap, ViewUpdate, placeholder } from '@codemirror/view'
+import { history, historyKeymap } from '@codemirror/history'
+import { bracketMatching } from '@codemirror/matchbrackets'
+import { defaultKeymap, insertNewlineAndIndent } from '@codemirror/commands'
+import { commentKeymap } from '@codemirror/comment'
+import { lintKeymap } from '@codemirror/lint'
+import { baseTheme, promqlHighlighter } from './CMTheme.tsx'
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets'
+import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete'
+
 export default {
   name: 'promqlInput',
   components: {
@@ -450,6 +450,7 @@ export default {
   },
   data () {
     return {
+      a: 'a',
       dropDownVisible: false,
       // metricStore:[],
       metricOptions: [],
@@ -515,43 +516,104 @@ export default {
     }
   },
   mounted () {
-    
-    let promQL = new PromQLExtension().setComplete(
-      // { 
-      //   remote: { url: 'https://prometheus.land' } 
-      //   }
-        )
-// const dynamicConfigCompartment = new Compartment();
-
-      new EditorView({
-      state: EditorState.create({
-          extensions: [
-            baseTheme,
-          highlightSpecialChars(),
-          history(),
-          indentOnInput(),
-          bracketMatching(),
-          closeBrackets(),
-          autocompletion(),
-          highlightSelectionMatches(),
-            keymap.of([
-            ...closeBracketsKeymap,
-            ...defaultKeymap,
-            ...historyKeymap,
-            ...commentKeymap,
-            ...completionKeymap,
-            ...lintKeymap,
-          ]),
-          placeholder('Expression (press Shift+Enter for newlines)'),
-            basicSetup, promQL.asExtension()],
-      }),
+    const self = this
+    const promQL = new PromQLExtension().setComplete(
+      {
+        remote: {
+          cache: {
+            initialMetricList: [
+              'ALERTS',
+              'ALERTS_FOR_STATE',
+              'alertmanager_alerts',
+              'alertmanager_alerts_invalid_total',
+              'alertmanager_alerts_received_total',
+              'nz-agent'
+            ]
+          }
+        }
+      }
+    )
+    const dynamicConfigCompartment = new Compartment()
+    const dynamicConfig = [
+      promqlHighlighter,
+      promQL.asExtension(),
+      baseTheme
+    ]
+    // const dynamicConfigCompartment = new Compartment();
+    const EditorViewstate = EditorState.create({
+      extensions: [
+        baseTheme,
+        highlightSpecialChars(),
+        history(),
+        EditorState.allowMultipleSelections.of(true),
+        indentOnInput(),
+        bracketMatching(),
+        closeBrackets(),
+        autocompletion(),
+        highlightSelectionMatches(),
+        EditorView.lineWrapping,
+        keymap.of([
+          ...closeBracketsKeymap,
+          ...defaultKeymap,
+          ...historyKeymap,
+          ...commentKeymap,
+          ...completionKeymap,
+          ...lintKeymap
+        ]),
+        placeholder('Expression (press Shift+Enter for newlines)'),
+        dynamicConfigCompartment.of(dynamicConfig),
+        // This keymap is added without precedence so that closing the autocomplete dropdown
+        // via Escape works without blurring the editor.
+        keymap.of([
+          {
+            key: 'Escape',
+            run: (v) => {
+              v.contentDOM.blur()
+              return false
+            }
+          }
+        ]),
+        Prec.override(
+          keymap.of([
+            {
+              key: 'Enter',
+              run: (v) => {
+                self.newChange()
+                return true
+              }
+            },
+            {
+              key: 'Shift-Enter',
+              run: insertNewlineAndIndent
+            }
+          ])
+        ),
+        EditorView.updateListener.of((update) => {
+          self.newChange(update.state.doc.toString())
+        })
+      ],
+      doc: self.a,
+      editorState: {
+        changeByRange: self.newChange(),
+        changes: self.newDoc(),
+        facet: self.newChange()
+      }
+    })
+    new EditorView({
+      state: EditorViewstate,
       parent: document.getElementById('editor')
-  });
+    })
     if (!this.fromFatherData && this.type !== 'logs') {
       this.queryMetrics()
     }
   },
   methods: {
+    newChange (val) {
+      console.log(val)
+    },
+    newDoc (val) {
+      console.log(val)
+    },
     closeDropdown () {
       this.dropDownVisible = false
     },
@@ -648,13 +710,11 @@ export default {
       this.cascaderValue = ''
     },
     metricKeyDown (val) {
-      console.log(val);
       if (this.required) {
         this.metricChange(val)
       }
     },
     expressionChange: function () {
-      console.log('expressionChange');
       this.$emit('change')
     },
     setError: function (errMsg) {
@@ -916,6 +976,9 @@ export default {
         }
       }
     },
+    a () {
+      console.log(this.a)
+    },
     metricOptionsParent: {
       deep: true,
       immediate: true,
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 6406de60d..fd97ed842 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -31,23 +31,12 @@ import chartList from '@/components/chart/chartList.vue' // 全局引入 chartLi
 
 import loading from '@/components/common/loading'
 import pickTime from '@/components/common/pickTime'
-import bus from '@/libs/bus'
 import myDatePicker from '@/components/common/myDatePicker'
 import vSelectPage from '@/components/common/v-selectpagenew'
 import nzDataList from '@/components/common/table/nzDataList'
 import htmlToPdf from '@/components/common/js/htmlToPdf'
-import { registerNode } from '@topology/core'
-import {
-  myAnchors,
-  myCubeAnchors,
-  myCubec,
-  myIconRect,
-  myShape,
-  myTextRect
-} from '@/components/common/project/L5/services/canvas'
-// 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
-registerNode('myCube', myCubec, myCubeAnchors, null, null)
+import mainMixin from '@/components/common/mixin/mainMixinFun'
+
 Vue.use(htmlToPdf)
 Vue.use(vSelectPage, {
   dataLoad: function (vue, url, params) {
@@ -111,127 +100,6 @@ Vue.mixin({
       }
     }
   },
-  methods: {
-    utcTimeToTimezone: function (time) { // 将utc时间 转为系统设者的时间  返回时间戳
-      if (time) {
-        return bus.UTCTimeToConfigTimezone(time)
-      }
-    },
-    utcTimeToTimezoneStr: function (time) { // 将utc时间 转为系统设者的时间  返回String
-      if (time) {
-        return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss')
-      } else {
-        return '-'
-      }
-    },
-    timezoneToUtcTime: function (time) { // 将系统设者的时间 转为utc时间 返回时间戳
-      if (time) {
-        return bus.configTimezoneToUTCTime(time)
-      }
-    },
-    timezoneToUtcTimeStr: function (time, fmt) { // 将系统设者的时间 转为utc时间 返回String
-      if (!fmt) {
-        fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
-      }
-      if (time) {
-        return bus.timeFormate(this.timezoneToUtcTime(time), fmt)
-      }
-    },
-    timestampStr: function (time, fmt) { // 将utc时间 转为系统设者的时间  返回String
-      const date = new Date(time)
-      const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
-      const dateStr = new Date(time).getTime() + localOffset
-      if (!fmt) {
-        fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
-      }
-      if (time) {
-        return bus.timeFormate(bus.UTCTimeToConfigTimezone(dateStr), fmt)
-      } else {
-        return '-'
-      }
-    },
-    timeFormate (time) {
-      return bus.timeFormate(time)
-    },
-    hasButton (code) {
-      return hasButton(this.$store.getters.buttonList, code)
-    },
-    numberWithEConvent (num) {
-      if (num) {
-        if ((('' + num).indexOf('E') !== -1) || (('' + num).indexOf('e') !== -1)) {
-          const regExp = /'^((\\d+.?\\d+)[Ee]{1}(\\d+))$', 'ig'/
-          let result = regExp.exec(num)
-          let resultValue = ''
-          let power
-          if (result != null) {
-            resultValue = result[2]
-            power = result[3]
-            result = regExp.exec(num)
-          }
-
-          if (resultValue) {
-            if (power) {
-              const powVer = Math.pow(10, power)
-              resultValue = resultValue * powVer
-              return resultValue
-            }
-          }
-        } else {
-          return num
-        }
-      }
-      return 0
-    },
-    translation (key) {
-      return i18n.t(key)
-    },
-    timeFormatStrToDatePickFormat (str, flag) {
-      if (flag) {
-        const reg = /Y/g
-        str = str.replace(reg, 'y')
-        const reg1 = /D/g
-        str = str.replace(reg1, 'd')
-        const reg2 = /[H,m,s,:]/g
-        str = str.replace(reg2, '')
-        return str
-      } else {
-        const reg = /Y/g
-        str = str.replace(reg, 'y')
-        const reg1 = /D/g
-        str = str.replace(reg1, 'd')
-        return str
-      }
-    },
-    copyRow (row, rightBoxValKey, idKey = 'id', show = false, format, callback) {
-      /*
-      row 表格当前行
-      rightBoxValKey 右侧弹窗绑定的 data
-      idKey 当前数据的唯一标识
-      show 打开对应的弹窗 函数
-      format 是否需要对当前行进行处理
-      callBack 回调
-      */
-      let rowCopy = { ...row }
-      if (rowCopy.name) {
-        rowCopy.name = 'Copy from ' + rowCopy.name
-      }
-      if (format) {
-        rowCopy = format(rowCopy)
-      }
-      delete rowCopy[idKey]
-      this[rightBoxValKey] = rowCopy
-      if (typeof show === 'function') {
-        show()
-      } else if (typeof show === 'string') {
-        this[show] = true
-      } else {
-        this.rightBox.show = true
-      }
-      if (callback) {
-        callback()
-      }
-    }
-  },
   computed: {
     timeFormatMain () {
       return this.$store.getters.getTimeFormatMain
@@ -245,7 +113,8 @@ Vue.mixin({
     $routePath () {
       return this.$route.path
     }
-  }
+  },
+  ...mainMixin
 })
 
 Vue.config.productionTip = false
diff --git a/nezha-fronted/test/unit/__mocks__/fileMock.js b/nezha-fronted/test/unit/__mocks__/fileMock.js
index d922057e7..89b3cab1b 100644
--- a/nezha-fronted/test/unit/__mocks__/fileMock.js
+++ b/nezha-fronted/test/unit/__mocks__/fileMock.js
@@ -1,5 +1,10 @@
 module.exports = {
   'test-file-stub': 'test-file-stub',
+  $store:{
+    getters: {
+      buttonList: ['main_add']
+    },
+  },
   getters: {},
   commit: ()=>{}
 }
diff --git a/nezha-fronted/test/unit/__mocks__/i18nMock.js b/nezha-fronted/test/unit/__mocks__/i18nMock.js
index 24441e55d..e5c18ca5b 100644
--- a/nezha-fronted/test/unit/__mocks__/i18nMock.js
+++ b/nezha-fronted/test/unit/__mocks__/i18nMock.js
@@ -1,3 +1,14 @@
 module.exports = {
-  t: () => { return 'i18n' }
+  local: 'en',
+  obj: {
+    en: {
+      'overall.all': 'All'
+    },
+    zh: {
+      'overall.all': '全部'
+    }
+  },
+  t (code) {
+    return this.obj[this.local][code] || code
+  }
 }
diff --git a/nezha-fronted/test/unit/jest.conf.js b/nezha-fronted/test/unit/jest.conf.js
index 4c96ce234..3c3d0c999 100644
--- a/nezha-fronted/test/unit/jest.conf.js
+++ b/nezha-fronted/test/unit/jest.conf.js
@@ -20,7 +20,8 @@ module.exports = {
     'store/*': '<rootDir>/test/unit/__mocks__/fileMock.js',
     'elSelect/MyElSelect': '<rootDir>/test/unit/__mocks__/fileMock.js',
     '/chartList': '<rootDir>/test/unit/__mocks__/fileMock.js',
-    '/myDatePicker/': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '/myDatePicker': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '/promqlInput': '<rootDir>/test/unit/__mocks__/fileMock.js',
     'v-selectpage/': '<rootDir>/test/unit/__mocks__/fileMock.js',
     '@topology/': '<rootDir>/test/unit/__mocks__/fileMock.js',
     '/diagram': '<rootDir>/test/unit/__mocks__/fileMock.js',
@@ -55,7 +56,7 @@ module.exports = {
     // 'test/unit/specs/*.(js)',
     'src/components/common/js/example.js',
     'src/libs/bus.js',
-    'src/main.js',
+    'src/components/common/mixin/*.js',
     // 'src/components/common/js/tools.js',
     // '!src/*.(js)',
     '!src/http.js',
diff --git a/nezha-fronted/test/unit/specs/main.spec.js b/nezha-fronted/test/unit/specs/main.spec.js
index 724c5e39a..1f4808b06 100644
--- a/nezha-fronted/test/unit/specs/main.spec.js
+++ b/nezha-fronted/test/unit/specs/main.spec.js
@@ -1,17 +1,90 @@
-import main from '@/main'
-import bus from '@/libs/bus'
+import mainMixin from '@/components/common/mixin/mainMixinFun'
+import i18n from '@/components/common/i18n'
 describe('时间函数', () => {
-  // 测试代码可读性最好
-  // 分组
-  // const str = 'node_load1{module="node-exporter",endpoint_id="69",project="Common",datacenter="xin_xi_gang_DC",asset_id="11",endpoint="node-exporter-192.168.44.18",module_id="165",nz_agent_id="75",project_id="17",olap="node_exporter_nacos",asset="Bifang-CM-Server2",datacenter_id="4"} '
-  // it('正常替换一个', () => {
-  //   expect(dealLegendAlias(str, '{{module}}')).toBe('node-exporter')
-  // })
-
-  it('正常替换一个', () => {
-    expect(main.utcTimeToTimezone(1650006960000)).toBe(1650006960000)
+  localStorage.setItem('nz-sys-timezone', 'Asia/Shanghai')
+  it('utc时间转系统时间 返回时间戳', () => {
+    expect(mainMixin.methods.utcTimeToTimezone(1650006960000)).toBe(1650035760000)
   })
-  it('2', () => {
-    expect(main.utcTimeToTimezone('2022-04-15 15:16:00')).toBe(1650006960000)
+  it('utc时间转系统时间 返回时间戳', () => {
+    expect(mainMixin.methods.utcTimeToTimezone('2022-04-15 15:16:00')).toBe(1650035760000)
+  })
+  it('utc时间转系统时间 返回时间字符串', () => {
+    expect(mainMixin.methods.utcTimeToTimezoneStr(1650006960000)).toBe('2022-04-15 23:16:00')
+  })
+  it('utc时间转系统时间 返回时间字符串', () => {
+    expect(mainMixin.methods.utcTimeToTimezoneStr('2022-04-15 15:16:00')).toBe('2022-04-15 23:16:00')
+  })
+  it('utc时间转系统时间 返回时间字符串 指定时间格式', () => {
+    expect(mainMixin.methods.utcTimeToTimezoneStr('2022-04-15 15:16:00', 'DD/MM/YYYY')).toBe('15/04/2022')
+  })
+
+  it('系统时间转utc时间转 返回时间戳', () => {
+    expect(mainMixin.methods.timezoneToUtcTime(1650006960000)).toBe(1649978160000)
+  })
+  it('系统时间转utc时间转 返回时间戳', () => {
+    expect(mainMixin.methods.timezoneToUtcTime('2022-04-15 15:16:00')).toBe(1649978160000)
+  })
+  it('系统时间转utc时间转  返回时间字符串', () => {
+    expect(mainMixin.methods.timezoneToUtcTimeStr(1650006960000)).toBe('2022-04-15 07:16:00')
+  })
+  it('系统时间转utc时间转  返回时间字符串', () => {
+    expect(mainMixin.methods.timezoneToUtcTimeStr('2022-04-15 15:16:00')).toBe('2022-04-15 07:16:00')
+  })
+  it('系统时间转utc时间转 返回时间字符串 指定时间格式', () => {
+    expect(mainMixin.methods.timezoneToUtcTimeStr('2022-04-15 15:16:00', 'DD/MM/YYYY')).toBe('15/04/2022')
+  })
+  it('使用bus提供的 时间函数', () => {
+    expect(mainMixin.methods.timeFormate('2022-04-15 15:16:00')).toBe('2022-04-15 15:16:00')
+  })
+})
+describe('是否含有指数', () => {
+  it('测试正常数字是否是指数显示', () => {
+    expect(mainMixin.methods.numberWithEConvent(10)).toBe(10)
+  })
+  it('测试小数是否是指数显示', () => {
+    expect(mainMixin.methods.numberWithEConvent(0.1)).toBe(0.1)
+  })
+  it('测试较小数字是否是指数显示', () => {
+    expect(mainMixin.methods.numberWithEConvent(1.0000000000000004e-8)).toBe(0)
+  })
+  it('测试较大的数字是否是指数显示', () => {
+    expect(mainMixin.methods.numberWithEConvent(1e+23)).toBe(0)
+  })
+})
+
+describe('是否含有Button的权限', () => {
+  const obj = {
+    $store: {
+      getters: {
+        buttonList: ['main_add']
+      }
+    }
+  }
+  it('有', () => {
+    expect(mainMixin.methods.hasButton.bind(obj)('main_add')).toBeTruthy()
+  })
+  it('无', () => {
+    expect(mainMixin.methods.hasButton.bind(obj)('main_qwe')).toBeFalsy()
+  })
+})
+describe('i18n的使用', () => {
+  it('正常使用 匹配英文', () => {
+    expect(mainMixin.methods.translation('overall.all')).toBe('All')
+  })
+  it('正常使用 匹配中文', () => {
+    i18n.local = 'zh'
+    expect(mainMixin.methods.translation('overall.all')).toBe('全部')
+  })
+  it('未匹配到', () => {
+    expect(mainMixin.methods.translation('overall.asd')).toBe('overall.asd')
+  })
+})
+describe('替换 moment 跟 elementui的时间格式', () => {
+  // timeFormatStrToDatePickFormat
+  it('正常替换', () => {
+    expect(mainMixin.methods.timeFormatStrToDatePickFormat('YYYY-DD-MM HH:mm:ss')).toBe('yyyy-dd-MM HH:mm:ss')
+  })
+  it('不包含时分秒', () => {
+    expect(mainMixin.methods.timeFormatStrToDatePickFormat('YYYY-DD-MM HH:mm:ss', true)).toBe('yyyy-dd-MM ')
   })
 })