Merge branch 'dev-3.3' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.3

2022-04-20 17:31:00 +08:00
parent 5f4f8f0e3d 367c493975
commit 9b553f4fbb
27 changed files with 768 additions and 300 deletions
--- 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",
--- 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>
--- 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(
--- 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) {
--- 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)
  }
 }
--- 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: {
--- 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>
--- 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 = {
--- 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>
--- 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>
--- 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);
    },
--- 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)
--- 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()
--- a/nezha-fronted/src/components/common/mixin/mainMixinFun.js
+++ 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
+      }
+    },
+  }
+}
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -168,6 +168,12 @@ export default {
        this.$emit('unitChange', n)
      }
    }
+  },
+  beforeDestroy () {
+    if (this.intervalTimer) {
+      clearInterval(this.intervalTimer)
+      this.intervalTimer = null
+    }
  }
 }
 </script>
--- 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>
--- 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下拉框
--- 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>
--- 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(() => {
--- 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) {
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -394,23 +394,23 @@
 </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',
@@ -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 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();
-
-      new EditorView({
-      state: EditorState.create({
+    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,
+          ...lintKeymap
        ]),
        placeholder('Expression (press Shift+Enter for newlines)'),
-            basicSetup, promQL.asExtension()],
-      }),
+        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,
--- 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
--- 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: ()=>{}
 }
--- 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
+  }
 }
--- 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',
--- 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')
-  // })
+  localStorage.setItem('nz-sys-timezone', 'Asia/Shanghai')
+  it('utc时间转系统时间 返回时间戳', () => {
+    expect(mainMixin.methods.utcTimeToTimezone(1650006960000)).toBe(1650035760000)
+  })
+  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('正常替换一个', () => {
-    expect(main.utcTimeToTimezone(1650006960000)).toBe(1650006960000)
+  it('系统时间转utc时间转 返回时间戳', () => {
+    expect(mainMixin.methods.timezoneToUtcTime(1650006960000)).toBe(1649978160000)
  })
-  it('2', () => {
-    expect(main.utcTimeToTimezone('2022-04-15 15:16:00')).toBe(1650006960000)
+  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 ')
  })
 })