diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 6ea3c0064..8e57fa1d6 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1290,11 +1290,11 @@ li{
 }
 .right-box-form .one-third-form-item-left{
   display: inline-block;
-  width: 170px;
+  width: calc(50% - 5px);
 }
 .right-box-form .one-third-form-item-right{
   display: inline-block;
-  width: 170px;
+  width: calc(50% - 5px);
   .el-form-item__label{
     width: 20px !important;
   }
@@ -2169,13 +2169,13 @@ li{
   height: 70px;
   justify-content: space-around;
 }
-.right-box-form>.el-form-item.half-form-item-other{
+.right-box-form .half-form-item-other{
   display: inline-block;
-  width: calc(50% - 15px);
+  width: calc(50% - 30px);
 }
-.right-box-form>.el-form-item.half-form-item-other-two{
+.right-box-form .half-form-item-other-two{
   display: inline-block;
-  width: calc(50% - 15px);
+  width: calc(50% - 30px);
   margin-left: 0;
 }
 .right-box .right-box-form-add,.right-box  .right-box-form-minus-box{
diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index a19ab3f6f..9dc39422c 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -24,7 +24,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
index b40abc3f8..03a458296 100644
--- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue
+++ b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
@@ -24,7 +24,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index d07a35dfb..3054b35ee 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -319,23 +319,23 @@ export default {
       oldSearchTime: [],
 
       assetKey: {
-        host: this.$t('asset.tableTitle.host'),
+        host: this.$t('asset.host'),
         id: 'Id',
-        assetType: this.$t('asset.tableTitle.assetType'),
-        sn: this.$t('asset.tableTitle.device'),
-        state: this.$t('asset.tableTitle.assetState'),
-        pingRtt: this.$t('asset.tableTitle.assetPing'),
-        dataCenter: this.$t('asset.tableTitle.dataCenter'),
-        cabinet: this.$t('asset.tableTitle.cabinet'),
-        model: this.$t('asset.tableTitle.model'),
-        vendor: this.$t('asset.tableTitle.vendor'),
-        purchaseDate: this.$t('asset.tableTitle.procurementDate'),
-        principal: this.$t('asset.tableTitle.principal'),
-        tel: this.$t('asset.tableTitle.principalTel'),
-        pingStatus: this.$t('asset.tableTitle.assetPing'),
-        pingLastReply: this.$t('asset.tableTitle.lastReply'),
-        endpoint: this.$t('asset.tableTitle.modules'),
-        alert: this.$t('asset.tableTitle.alerts'),
+        assetType: this.$t('asset.assetType'),
+        sn: this.$t('asset.device'),
+        state: this.$t('asset.assetState'),
+        pingRtt: this.$t('asset.assetPing'),
+        dataCenter: this.$t('asset.dataCenter'),
+        cabinet: this.$t('asset.cabinet'),
+        model: this.$t('asset.model'),
+        vendor: this.$t('asset.vendor'),
+        purchaseDate: this.$t('asset.procurementDate'),
+        principal: this.$t('asset.principal'),
+        tel: this.$t('asset.principalTel'),
+        pingStatus: this.$t('asset.assetPing'),
+        pingLastReply: this.$t('asset.lastReply'),
+        endpoint: this.$t('asset.modules'),
+        alert: this.$t('asset.alerts'),
         tags: this.$t('overall.tag')
       },
       projectKey: {
diff --git a/nezha-fronted/src/components/charts/chart-group.vue b/nezha-fronted/src/components/charts/chart-group.vue
index 446417008..333994f7a 100644
--- a/nezha-fronted/src/components/charts/chart-group.vue
+++ b/nezha-fronted/src/components/charts/chart-group.vue
@@ -18,7 +18,7 @@
                 {{chartData.name}}
                 <span v-show="!showList" class="collapse-content">({{chartData.children.length}} charts)</span>
               </span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 7d0be3dfa..6252aeb86 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -230,6 +230,8 @@ import textChart from './text-chart'
 import chartPie from './chart-pie'
 import chartBarStatis from './chart-bar-statistics'
 import chartGroup from './chart-group'
+import { fromRoute } from '@/components/common/js/constants'
+import chartTempData from "@/components/charts/chartTempData";
 // import visNetwork from './visNetwork'
 export default {
   name: 'chartList',
@@ -240,7 +242,8 @@ export default {
     detail: Object,
     from: { type: String },
     panelLock: { type: Boolean, default: false },
-    hasGroup: { type: Boolean, default: true }
+    hasGroup: { type: Boolean, default: true },
+    panelDataList: Array
   },
 
   components: {
@@ -283,6 +286,11 @@ export default {
       // showShadow:false,
     }
   },
+  watch: {
+    panelDataList (n) {
+      this.getData(this.filter)
+    }
+  },
   methods: {
     dropmenuChange (id, show) {
       if (show) {
@@ -662,9 +670,24 @@ export default {
         })
         return
       }
+      if (param.from == this.$CONSTANTS.fromRoute.chartTemp) {
+        this.dataList = this.panelDataList
+        this.$nextTick(() => {
+          this.dataList.forEach((item, index) => {
+            this.$set(item, 'from', params.from)
+            this.setChartSize(item, index)// 设置该图表宽度
+            const chartBox = document.getElementById('chart-' + item.id)
+            this.handleElementInViewport(chartBox, 0, item, index)
+            if (item.type === 'group') {
+              this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
+            }
+          })
+        })
+        return
+      }
       if (!param.query) delete param.query
       // 根据panelId获得panel下的所有图表
-      this.$get('visual/panel/chart?panelId=' + params.panelId).then(response => {
+      this.$get('visual/panel/chart?panelId=' + params.panelId + '&pageSize=-1').then(response => {
         if (response.code === 200) {
           response.data.list.forEach((item, index) => {
             item.isLoaded = false
@@ -737,7 +760,6 @@ export default {
       })
     },
     loadChartData (scrollTop) {
-      console.log(scrollTop)
       if (this.dataList.length > 0) {
         this.dataList.forEach((item, index) => {
           if (!item.isLoaded) {
@@ -918,6 +940,9 @@ export default {
               // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
               //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
               // }
+              if (this.from === fromRoute.chartTemp) {
+                return chartTempData
+              }
               return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
             })
             // 一个图表的所有element单独获取数据
@@ -1723,7 +1748,6 @@ export default {
     },
     // 懒加载，判断网页区域，加载可见区的prom数据
     handleElementInViewport (ele, scrollTop, item, index, isSearch) {
-      console.log(ele, scrollTop, item, index)
       /*
         网页被卷去的高：document.body.scrollTop
         网页正文全文高：document.body.scrollHeight
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index 2fd9878ce..e6f22092d 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -24,7 +24,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index 46a7808a8..fdfaa2b84 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/nezha-fronted/src/components/charts/chart-single-stat.vue
@@ -24,7 +24,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index a07150099..5f7a4022d 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -25,7 +25,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue
index 86ec47e23..a59d4010c 100644
--- a/nezha-fronted/src/components/charts/chart-url.vue
+++ b/nezha-fronted/src/components/charts/chart-url.vue
@@ -12,7 +12,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
diff --git a/nezha-fronted/src/components/charts/chartTempData.js b/nezha-fronted/src/components/charts/chartTempData.js
new file mode 100644
index 000000000..cec3ca506
--- /dev/null
+++ b/nezha-fronted/src/components/charts/chartTempData.js
@@ -0,0 +1,980 @@
+const chartTempData = {
+  data: {
+    result: [
+      {
+        metric: {
+
+        },
+        values: [
+          [
+            1619326641,
+            '67234.52306889734'
+          ],
+          [
+            1619326656,
+            '84768.45245026101'
+          ],
+          [
+            1619326671,
+            '129634.01007646995'
+          ],
+          [
+            1619326686,
+            '156542.62882642742'
+          ],
+          [
+            1619326701,
+            '135705.9448148899'
+          ],
+          [
+            1619326716,
+            '115572.40233875904'
+          ],
+          [
+            1619326731,
+            '97737.31879742522'
+          ],
+          [
+            1619326746,
+            '83827.90092416394'
+          ],
+          [
+            1619326761,
+            '99792.76711425022'
+          ],
+          [
+            1619326776,
+            '141957.65742923907'
+          ],
+          [
+            1619326791,
+            '169193.0479737079'
+          ],
+          [
+            1619326806,
+            '155332.39710062867'
+          ],
+          [
+            1619326821,
+            '129349.45882305052'
+          ],
+          [
+            1619326836,
+            '108301.37872333173'
+          ],
+          [
+            1619326851,
+            '90034.99368171557'
+          ],
+          [
+            1619326866,
+            '80273.24280781174'
+          ],
+          [
+            1619326881,
+            '71427.56847681744'
+          ],
+          [
+            1619326896,
+            '65009.655216768355'
+          ],
+          [
+            1619326911,
+            '56202.051900505874'
+          ],
+          [
+            1619326926,
+            '49175.99200440523'
+          ],
+          [
+            1619326941,
+            '51675.252768933875'
+          ],
+          [
+            1619326956,
+            '60142.6817538732'
+          ],
+          [
+            1619326971,
+            '58492.28986291914'
+          ],
+          [
+            1619326986,
+            '88647.97630420537'
+          ],
+          [
+            1619327001,
+            '129227.8284375646'
+          ],
+          [
+            1619327016,
+            '119235.93213991504'
+          ],
+          [
+            1619327031,
+            '101160.05700432547'
+          ],
+          [
+            1619327046,
+            '87795.44901362302'
+          ],
+          [
+            1619327061,
+            '87315.15463300308'
+          ],
+          [
+            1619327076,
+            '92489.18937959624'
+          ],
+          [
+            1619327091,
+            '93086.80666954032'
+          ],
+          [
+            1619327106,
+            '112996.24939570608'
+          ],
+          [
+            1619327121,
+            '125622.50409516145'
+          ],
+          [
+            1619327136,
+            '124043.75671756931'
+          ],
+          [
+            1619327151,
+            '125915.23892405373'
+          ],
+          [
+            1619327166,
+            '131860.94148401526'
+          ],
+          [
+            1619327181,
+            '131323.512587253'
+          ],
+          [
+            1619327196,
+            '130202.84054319662'
+          ],
+          [
+            1619327211,
+            '131137.2998550472'
+          ],
+          [
+            1619327226,
+            '140011.84069068846'
+          ],
+          [
+            1619327241,
+            '144761.03094652962'
+          ],
+          [
+            1619327256,
+            '140896.2234628107'
+          ],
+          [
+            1619327271,
+            '144939.9521471322'
+          ],
+          [
+            1619327286,
+            '146854.00264563446'
+          ],
+          [
+            1619327301,
+            '143528.7608647803'
+          ],
+          [
+            1619327316,
+            '136391.16570184118'
+          ],
+          [
+            1619327331,
+            '134939.63766213963'
+          ],
+          [
+            1619327346,
+            '130734.90194389559'
+          ],
+          [
+            1619327361,
+            '136434.88336788653'
+          ],
+          [
+            1619327376,
+            '145092.16210718406'
+          ],
+          [
+            1619327391,
+            '152065.04153079912'
+          ],
+          [
+            1619327406,
+            '156798.09185927216'
+          ],
+          [
+            1619327421,
+            '158674.77766447523'
+          ],
+          [
+            1619327436,
+            '161096.58445758978'
+          ],
+          [
+            1619327451,
+            '158761.11021276534'
+          ],
+          [
+            1619327466,
+            '163004.29606041766'
+          ],
+          [
+            1619327481,
+            '167314.9710412085'
+          ],
+          [
+            1619327496,
+            '165583.65723135485'
+          ],
+          [
+            1619327511,
+            '150599.88881636693'
+          ],
+          [
+            1619327526,
+            '136263.16856828984'
+          ],
+          [
+            1619327541,
+            '127531.12022245591'
+          ],
+          [
+            1619327556,
+            '112626.2854714918'
+          ],
+          [
+            1619327571,
+            '109748.6926587426'
+          ],
+          [
+            1619327586,
+            '103216.89749119896'
+          ],
+          [
+            1619327601,
+            '120054.0931496599'
+          ],
+          [
+            1619327616,
+            '124397.01189137285'
+          ],
+          [
+            1619327631,
+            '121693.36886313172'
+          ],
+          [
+            1619327646,
+            '124263.5185058619'
+          ],
+          [
+            1619327661,
+            '129370.31776538865'
+          ],
+          [
+            1619327676,
+            '133191.73551700043'
+          ],
+          [
+            1619327691,
+            '144078.4064984659'
+          ],
+          [
+            1619327706,
+            '139893.47544839772'
+          ],
+          [
+            1619327721,
+            '139218.28627794381'
+          ],
+          [
+            1619327736,
+            '135077.997911198'
+          ],
+          [
+            1619327751,
+            '137188.8500959387'
+          ],
+          [
+            1619327766,
+            '136302.6625400467'
+          ],
+          [
+            1619327781,
+            '135333.82845756598'
+          ],
+          [
+            1619327796,
+            '141334.01284001715'
+          ],
+          [
+            1619327811,
+            '137118.18506250918'
+          ],
+          [
+            1619327826,
+            '131834.77580904771'
+          ],
+          [
+            1619327841,
+            '125440.56107015046'
+          ],
+          [
+            1619327856,
+            '129950.61479606191'
+          ],
+          [
+            1619327871,
+            '132228.4300026117'
+          ],
+          [
+            1619327886,
+            '126695.44097770381'
+          ],
+          [
+            1619327901,
+            '140958.99289731166'
+          ],
+          [
+            1619327916,
+            '145497.2801943425'
+          ],
+          [
+            1619327931,
+            '132973.074348475'
+          ],
+          [
+            1619327946,
+            '137179.44736553708'
+          ],
+          [
+            1619327961,
+            '143180.66659914295'
+          ],
+          [
+            1619327976,
+            '137765.40360422112'
+          ],
+          [
+            1619327991,
+            '129042.39839074464'
+          ],
+          [
+            1619328006,
+            '121699.96972642104'
+          ],
+          [
+            1619328021,
+            '126221.42670726098'
+          ],
+          [
+            1619328036,
+            '129724.29089390681'
+          ],
+          [
+            1619328051,
+            '136616.86970395234'
+          ],
+          [
+            1619328066,
+            '139008.3170592644'
+          ],
+          [
+            1619328081,
+            '147551.30851143942'
+          ],
+          [
+            1619328096,
+            '155084.9733920894'
+          ],
+          [
+            1619328111,
+            '161961.05584908125'
+          ],
+          [
+            1619328126,
+            '162768.42434900918'
+          ],
+          [
+            1619328141,
+            '156259.98260298115'
+          ],
+          [
+            1619328156,
+            '154439.53586441962'
+          ],
+          [
+            1619328171,
+            '156135.37586396653'
+          ],
+          [
+            1619328186,
+            '155884.24195870038'
+          ],
+          [
+            1619328201,
+            '158386.6374126683'
+          ],
+          [
+            1619328216,
+            '153855.1064273622'
+          ],
+          [
+            1619328231,
+            '154296.20722794015'
+          ],
+          [
+            1619328246,
+            '156068.06042940164'
+          ],
+          [
+            1619328261,
+            '152266.96251924452'
+          ],
+          [
+            1619328276,
+            '158288.5803709968'
+          ],
+          [
+            1619328291,
+            '162867.9908155629'
+          ],
+          [
+            1619328306,
+            '170007.72483388087'
+          ],
+          [
+            1619328321,
+            '170739.98543400207'
+          ],
+          [
+            1619328336,
+            '165015.94268824425'
+          ],
+          [
+            1619328351,
+            '164295.23424811324'
+          ],
+          [
+            1619328366,
+            '167809.8241459832'
+          ],
+          [
+            1619328381,
+            '163713.7187657755'
+          ],
+          [
+            1619328396,
+            '170231.75566899288'
+          ],
+          [
+            1619328411,
+            '169801.47429921135'
+          ],
+          [
+            1619328426,
+            '168025.86124235595'
+          ],
+          [
+            1619328441,
+            '173188.72482130752'
+          ],
+          [
+            1619328456,
+            '174727.4231324348'
+          ],
+          [
+            1619328471,
+            '175981.6730451862'
+          ],
+          [
+            1619328486,
+            '159560.41549215658'
+          ],
+          [
+            1619328501,
+            '147907.8587575518'
+          ],
+          [
+            1619328516,
+            '135063.16044782364'
+          ],
+          [
+            1619328531,
+            '125265.4855367947'
+          ],
+          [
+            1619328546,
+            '131484.32374593205'
+          ],
+          [
+            1619328561,
+            '128506.35314877935'
+          ],
+          [
+            1619328576,
+            '135645.2532736919'
+          ],
+          [
+            1619328591,
+            '144056.59948014285'
+          ],
+          [
+            1619328606,
+            '154336.59859408153'
+          ],
+          [
+            1619328621,
+            '166894.53898574616'
+          ],
+          [
+            1619328636,
+            '169942.55611799294'
+          ],
+          [
+            1619328651,
+            '162718.33839203947'
+          ],
+          [
+            1619328666,
+            '166353.4185642925'
+          ],
+          [
+            1619328681,
+            '154666.30677592353'
+          ],
+          [
+            1619328696,
+            '151539.86711566127'
+          ],
+          [
+            1619328711,
+            '147111.77171292162'
+          ],
+          [
+            1619328726,
+            '145664.07148119409'
+          ],
+          [
+            1619328741,
+            '148277.06701275433'
+          ],
+          [
+            1619328756,
+            '148253.63143962697'
+          ],
+          [
+            1619328771,
+            '152678.93662904084'
+          ],
+          [
+            1619328786,
+            '149142.12352995639'
+          ],
+          [
+            1619328801,
+            '146774.93188005552'
+          ],
+          [
+            1619328816,
+            '150737.78019044892'
+          ],
+          [
+            1619328831,
+            '151467.35529243143'
+          ],
+          [
+            1619328846,
+            '186328.82006624647'
+          ],
+          [
+            1619328861,
+            '222879.0034326688'
+          ],
+          [
+            1619328876,
+            '211274.86995717912'
+          ],
+          [
+            1619328891,
+            '195136.61403361673'
+          ],
+          [
+            1619328906,
+            '192917.71153120717'
+          ],
+          [
+            1619328921,
+            '200290.90163374666'
+          ],
+          [
+            1619328936,
+            '246708.293331658'
+          ],
+          [
+            1619328951,
+            '263882.25419267954'
+          ],
+          [
+            1619328966,
+            '245958.13180563593'
+          ],
+          [
+            1619328981,
+            '233169.2019982923'
+          ],
+          [
+            1619328996,
+            '223366.11067840818'
+          ],
+          [
+            1619329011,
+            '215535.62372111296'
+          ],
+          [
+            1619329026,
+            '211956.30837713985'
+          ],
+          [
+            1619329041,
+            '206075.45873981708'
+          ],
+          [
+            1619329056,
+            '194453.3574888578'
+          ],
+          [
+            1619329071,
+            '190628.31905188566'
+          ],
+          [
+            1619329086,
+            '176952.97563925944'
+          ],
+          [
+            1619329101,
+            '161969.5509223355'
+          ],
+          [
+            1619329116,
+            '163276.4684482879'
+          ],
+          [
+            1619329131,
+            '157353.2552160069'
+          ],
+          [
+            1619329146,
+            '146882.99531941232'
+          ],
+          [
+            1619329161,
+            '152258.4560985092'
+          ],
+          [
+            1619329176,
+            '156959.18525475552'
+          ],
+          [
+            1619329191,
+            '159649.51546564006'
+          ],
+          [
+            1619329206,
+            '167908.55714451114'
+          ],
+          [
+            1619329221,
+            '172948.33807402014'
+          ],
+          [
+            1619329236,
+            '182685.45218821947'
+          ],
+          [
+            1619329251,
+            '187030.35202671902'
+          ],
+          [
+            1619329266,
+            '190079.30323855148'
+          ],
+          [
+            1619329281,
+            '192971.9526461216'
+          ],
+          [
+            1619329296,
+            '196336.89160028717'
+          ],
+          [
+            1619329311,
+            '198904.32225845434'
+          ],
+          [
+            1619329326,
+            '217357.3580010716'
+          ],
+          [
+            1619329341,
+            '234419.8015930916'
+          ],
+          [
+            1619329356,
+            '211699.108503841'
+          ],
+          [
+            1619329371,
+            '194296.97437986446'
+          ],
+          [
+            1619329386,
+            '177526.51953365305'
+          ],
+          [
+            1619329401,
+            '174123.3153590256'
+          ],
+          [
+            1619329416,
+            '174236.0884374152'
+          ],
+          [
+            1619329431,
+            '175881.42654414504'
+          ],
+          [
+            1619329446,
+            '181180.89650041307'
+          ],
+          [
+            1619329461,
+            '179659.1297273033'
+          ],
+          [
+            1619329476,
+            '166824.4538851082'
+          ],
+          [
+            1619329491,
+            '167211.34500916823'
+          ],
+          [
+            1619329506,
+            '157478.16192696424'
+          ],
+          [
+            1619329521,
+            '166798.5784502148'
+          ],
+          [
+            1619329536,
+            '158308.49615751408'
+          ],
+          [
+            1619329551,
+            '157600.86333199075'
+          ],
+          [
+            1619329566,
+            '143876.78396160837'
+          ],
+          [
+            1619329581,
+            '142125.21240294934'
+          ],
+          [
+            1619329596,
+            '134845.72705098847'
+          ],
+          [
+            1619329611,
+            '136348.216869971'
+          ],
+          [
+            1619329626,
+            '128227.58563619448'
+          ],
+          [
+            1619329641,
+            '127366.85129458207'
+          ],
+          [
+            1619329656,
+            '144952.86329025935'
+          ],
+          [
+            1619329671,
+            '146120.8645811903'
+          ],
+          [
+            1619329686,
+            '138372.3693190331'
+          ],
+          [
+            1619329701,
+            '137356.03166965354'
+          ],
+          [
+            1619329716,
+            '135886.32810594278'
+          ],
+          [
+            1619329731,
+            '137777.51698661354'
+          ],
+          [
+            1619329746,
+            '139546.60952125024'
+          ],
+          [
+            1619329761,
+            '143152.12746029842'
+          ],
+          [
+            1619329776,
+            '132632.79505347987'
+          ],
+          [
+            1619329791,
+            '132902.87719231608'
+          ],
+          [
+            1619329806,
+            '121644.84048351011'
+          ],
+          [
+            1619329821,
+            '127381.36242802144'
+          ],
+          [
+            1619329836,
+            '133454.34768905598'
+          ],
+          [
+            1619329851,
+            '118548.5648224194'
+          ],
+          [
+            1619329866,
+            '103759.37104672648'
+          ],
+          [
+            1619329881,
+            '92858.28975097225'
+          ],
+          [
+            1619329896,
+            '79393.33731962508'
+          ],
+          [
+            1619329911,
+            '68176.01390834473'
+          ],
+          [
+            1619329926,
+            '83274.89339599916'
+          ],
+          [
+            1619329941,
+            '105078.4121009993'
+          ],
+          [
+            1619329956,
+            '121687.38734146685'
+          ],
+          [
+            1619329971,
+            '173787.31134659174'
+          ],
+          [
+            1619329986,
+            '218940.57387272274'
+          ],
+          [
+            1619330001,
+            '252832.37563365034'
+          ],
+          [
+            1619330016,
+            '250250.00475681957'
+          ],
+          [
+            1619330031,
+            '222391.40952185704'
+          ],
+          [
+            1619330046,
+            '201470.72138033944'
+          ],
+          [
+            1619330061,
+            '188387.77045423904'
+          ],
+          [
+            1619330076,
+            '173486.26445006474'
+          ],
+          [
+            1619330091,
+            '176695.15924696584'
+          ],
+          [
+            1619330106,
+            '161362.67228012058'
+          ],
+          [
+            1619330121,
+            '156280.2942065875'
+          ],
+          [
+            1619330136,
+            '147856.53518165532'
+          ],
+          [
+            1619330151,
+            '142447.18670247635'
+          ],
+          [
+            1619330166,
+            '147411.2790305058'
+          ],
+          [
+            1619330181,
+            '154897.85213886894'
+          ],
+          [
+            1619330196,
+            '165502.40762979828'
+          ],
+          [
+            1619330211,
+            '186345.75300514325'
+          ],
+          [
+            1619330226,
+            '225214.8040061793'
+          ],
+          [
+            1619330241,
+            '212569.63634406356'
+          ]
+        ]
+      }
+    ],
+    resultType: 'matrix'
+  },
+  status: 'success'
+}
+export default chartTempData
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 421b67d2a..ab1cd9ae5 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -38,7 +38,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
diff --git a/nezha-fronted/src/components/charts/text-chart.vue b/nezha-fronted/src/components/charts/text-chart.vue
index b2cc884d5..bf57174f1 100644
--- a/nezha-fronted/src/components/charts/text-chart.vue
+++ b/nezha-fronted/src/components/charts/text-chart.vue
@@ -12,7 +12,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index a2cbc2c86..d201561ed 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -51,6 +51,8 @@
         <endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery>
         <alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
         <panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.endpoint.endpointTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
+        <!--chartTemp的Tab-->
+        <panel-tab-new v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.chartTemp.chartTempTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
       </div>
     </div>
   </div>
@@ -70,7 +72,7 @@ import terminalLogMonitorTab from './tabs/terminalLogMonitorTab'
 import terminalLogCMDTab from './tabs/terminalLogCMDTab'
 import operationLogTab from './tabs/operationLogTab'
 import terminalLogTab from './tabs/terminalLogTab'
-import assetTab from "@/components/common/bottomBox/tabs/assetTab";
+import assetTab from '@/components/common/bottomBox/tabs/assetTab'
 import { fromRoute } from '@/components/common/js/constants'
 
 export default {
@@ -120,7 +122,7 @@ export default {
         },
         module: {
           moduleTabTitle: [
-            { prop: 'endpoint', name: this.$t('asset.tableTitle.endpoint') },
+            { prop: 'endpoint', name: this.$t('asset.endpoint') },
             { prop: 'moduleAlertMessage', name: 'Alerts' },
             { prop: 'panel', name: 'Detail' }
           ]
@@ -132,12 +134,17 @@ export default {
             { prop: 'endpointAlertMessage', name: 'Alerts' }
           ]
         },
+        chartTemp: {
+          chartTempTabTitle: [
+            { prop: 'panel', name: 'Template preview' }
+          ]
+        },
         dc: {
           cabinet: [
             { prop: 'asset', name: this.$t('asset.assets'), active: false },
             { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true }
           ],
-          asset:[
+          asset: [
             { prop: 'asset', name: this.$t('asset.assets'), active: true },
             { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false }
           ]
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 58151e96a..db493664b 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -3,8 +3,8 @@
     <div class="sub-top-tools">
       <div class="sub-list-tabs" v-if="from===fromRoute.module">
         <div class="sub-list-tab-title">{{obj.name}}</div>
-        <div @click="changeTab('endpoint')" class="sub-list-tab" id="endpoint-tab-change-endpoint">{{$t("asset.tableTitle.modules")}}</div>
-        <div class="sub-list-tab sub-list-tab-active" >{{$t("asset.tableTitle.alerts")}}</div>
+        <div @click="changeTab('endpoint')" class="sub-list-tab" id="endpoint-tab-change-endpoint">{{$t("asset.modules")}}</div>
+        <div class="sub-list-tab sub-list-tab-active" >{{$t("asset.alerts")}}</div>
       </div>
       <div class="sub-list-tabs" v-else>
         <div class="sub-list-tab-title">
@@ -13,8 +13,8 @@
           <template v-if="from == $CONSTANTS.fromRoute.endpoint"><div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{obj ? obj.id : ''}}</div></template>
         </div><div :id="from+'-change-panelordetail'"
         @click="changeTab(from == $CONSTANTS.fromRoute.asset || from == $CONSTANTS.fromRoute.rule || from == $CONSTANTS.fromRoute.endpoint? 'panel' : 'detail')" class="sub-list-tab">{{$t("overall.detail")}}</div><div
-        class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.alerts")}}</div><div v-if="from == $CONSTANTS.fromRoute.asset" :id="from+'-change-modules'"
-        @click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'">{{$t("asset.tableTitle.modules")}}</div>
+        class="sub-list-tab sub-list-tab-active">{{$t("asset.alerts")}}</div><div v-if="from == $CONSTANTS.fromRoute.asset" :id="from+'-change-modules'"
+        @click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'">{{$t("asset.modules")}}</div>
         <div @click="changeTab('endpointQuery')" class="sub-list-tab" v-has="'project_endpoint_query_chart_view'" v-if="from == $CONSTANTS.fromRoute.endpoint" :id="from+'-change-endpoint'">{{$t("overall.query")}}</div>
       </div>
       <div class="top-tool-right">
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
index d592839cb..8968c79d8 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
@@ -98,7 +98,7 @@ export default {
           disabled: false
         }, {
           id: 23,
-          name: this.$t('asset.tableTitle.cabinet'),
+          name: this.$t('asset.cabinet'),
           type: 'input',
           label: 'cabinetName',
           disabled: false
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/chartTempPreview.vue b/nezha-fronted/src/components/common/bottomBox/tabs/chartTempPreview.vue
new file mode 100644
index 000000000..89550a9c8
--- /dev/null
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/chartTempPreview.vue
@@ -0,0 +1,622 @@
+<template>
+  <div class="full-width-height">
+    <nz-bottom-data-list
+      :layout="[]"
+      :tabs="tabs"
+      :targetTab="targetTab"
+      @changeTab="changeTab"
+      class="full-width-height"
+    >
+      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot>
+        <div class="panel">
+          <!--图表-->
+          <div class="table-list" id="tableList">
+            <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
+              <div class="box-content">
+                <chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
+                            @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
+              </div>
+            </div>
+          </div>
+          <button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
+          <transition name="right-box">
+            <chart-box :chart="chart" :from="from" :panel-data="panelData" :panel-data-list="panelDataList" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" ref="addChartModal" v-if="rightBox.show"></chart-box>
+          </transition>
+        </div>
+      </template>
+    </nz-bottom-data-list>
+  </div>
+</template>
+
+<script>
+import ChartBox from '../../../page/dashboard/chartBox'
+import ChartList from '../../../charts/chart-list'
+import bus from '../../../../libs/bus'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+
+export default {
+  name: 'chartTempPreview',
+  mixins: [subDataListMixin],
+  props: {
+    from: String,
+    obj: Object,
+    draggable: { type: Boolean, default: true },
+    detail: Object
+  },
+  data () {
+    return {
+      panelLock: true,
+      showTopBtn: false, // top按钮
+      visible: false,
+      rightBox: { // 面板弹出框相关
+        show: false
+      },
+      tableHover: false,
+      searchTime: bus.getTimezontDateRange(),
+      intervalTimer: null,
+      interval: 0,
+      panel: { // 新增panel
+        id: '',
+        name: ''
+      },
+      chart: {},
+      blankChart: {
+        id: '',
+        title: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: 2,
+        param: {
+          url: '',
+          threshold: ''
+        },
+        elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
+        panel: '',
+        sync: 0
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: -1, // 此处获取所有数据，所以设置一个较大的值
+        total: 0
+      },
+      chartsData: [], // 中间部分图表相关数据
+      panelData: [],
+      panelDataList: [], // chartTemp列表
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
+        ]
+      },
+      searchLabel: {}, // 搜索参数
+      // ---图表相关参数--start
+      dataList: [], // 数据列表
+      // searchName: '', //  搜索名称
+      filter: { // 过滤条件
+        // productId: 0,
+        panelId: 0,
+        start_time: '',
+        end_time: '',
+        searchName: ''
+      },
+      showPanel: {
+        name: '',
+        type: this.from,
+        id: ''
+      },
+      // removeModal: false, // 删除弹出
+      // deleteObj: {}, // 删除对象
+      // ---图表相关参数--end
+      scrollbarWrap: null
+    }
+  },
+  components: {
+    'chart-box': ChartBox,
+    'chart-list': ChartList,
+    nzBottomDataList
+  },
+  methods: {
+    // 刷新
+    refresh () {
+      this.getTableData(this.obj.id)
+    },
+    refreshTime (st, et) {
+      const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
+      this.searchTime = [startTime, endTime]
+    },
+    panelReloadForDel () {
+      this.getTableData(this.obj.id)
+    },
+    /* 图表相关操作--start */
+    addChart () {
+      this.chart = this.newChart()
+      this.rightBox.show = true
+    },
+    newChart () {
+      return JSON.parse(JSON.stringify(this.blankChart))
+    },
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.refresh()
+      }
+    },
+    // 编辑图表信息,打开编辑弹窗
+    editChart (data) {
+      if (!data.param) {
+        data.param = { url: '', threshold: '' }
+      }
+      this.chart = JSON.parse(JSON.stringify(data))
+      this.rightBox.show = true
+    },
+    // 移除图表:弹出确认框询问
+    delChart (data, from) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {})
+    },
+    delChartOk () {
+      this.getData(this.filter)
+    },
+    // 图表创建成功，回调panel页面，进行图表的刷新
+    createSuccess (msg, data, params) {
+      this.getData(this.filter)
+    },
+    // 获取数据,用在子页面
+    getData (params) {
+      if (params.start_time === '' || params.end_time === '') {
+        const now = bus.getTimezontDateRange()
+        const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        params.start_time = startTimeTmp
+        params.end_time = endTimeTmp
+        params.from = this.from
+      }
+      if (this.$refs.chartList) {
+        this.$refs.chartList.initData(params)
+      }
+    },
+
+    /* 图表相关操作--end */
+    /* 时间条件查询--start */
+    // 选择日期变化
+    dateChange (val) {
+      // this.searchTime = [...val];
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.panelId = this.showPanel.id
+      this.getData(this.filter)
+    },
+    /* 时间条件查询--end */
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    },
+    // 公用操作
+    getTableData (linkId) {
+      if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
+        this.getData(this.filter)
+      } else {
+        this.panelData = [this.obj]
+        if (this.panelData.length > 0) {
+          this.showPanel.id = this.filter.panelId = this.panelData[0].id
+          this.getData(this.filter)
+        }
+      }
+    },
+    // 定期刷新
+    selectInterval (val) {
+      this.visible = false
+      clearInterval(this.intervalTimer)
+      if (val) {
+        this.interval = val
+        const start = new Date(this.searchTime[1])
+        const now = new Date()
+        const interval = Math.floor((now.getTime() - start.getTime()) / 1000) // 计算当前结束时间到现在的间隔（秒）
+        if (interval >= 60) { // 如果结束时间到现在超过1分钟，则
+          this.getIntervalData(interval)
+        }
+        this.intervalTimer = setInterval(() => {
+          this.getIntervalData(this.interval)
+        }, val * 1000)
+      }
+    },
+    getIntervalData (interval) { // interval:结束时间到现在的秒数
+      const start = new Date(this.searchTime[0])
+      const end = new Date(this.searchTime[1])
+      start.setSeconds(start.getSeconds() + interval)
+      end.setSeconds(end.getSeconds() + interval)
+      const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm')
+      this.searchTime = [startTime, endTime]
+      // 刷新数据
+      this.dateChange()
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData(this.obj.id)
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      this.getTableData(this.obj.id)
+    },
+    search: function () {
+      if (this.$refs.chartList) {
+        this.$refs.chartList.searchCharts(this.filter.searchName)
+      }
+    },
+    // 滚动事件触发下拉加载
+    onScroll () {
+      const _self = this
+      this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
+        _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
+        _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
+      }, 300))
+    },
+    focusInput: function () {
+      let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
+      classVal = classVal.replace('query-input-inactive', 'query-input-active')
+      document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
+      this.$refs.queryPanel.focus()
+    },
+    blurInput: function () {
+      if (!this.filter.searchName || this.filter.searchName == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
+          classVal = classVal.replace('query-input-active', 'query-input-inactive')
+          document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    clearInput: function () {
+      this.$refs.queryPanel.focus()
+    },
+    syncChart: function () {
+      if (this.from == this.$CONSTANTS.fromRoute.asset || this.from == this.$CONSTANTS.fromRoute.model) {
+        this.$confirm(this.$t('tip.syncTip'), {
+          confirmButtonText: this.$t('tip.yes'),
+          cancelButtonText: this.$t('tip.no'),
+          type: 'warning'
+        }).then(() => {
+          const param = {
+            modelId: this.from == this.$CONSTANTS.fromRoute.model ? this.obj.id : null,
+            assetId: this.from == this.$CONSTANTS.fromRoute.asset ? this.obj.id : null
+          }
+          this.$put('/model/syncChart', param).then(response => {
+            if (response.code == 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.syncSuccess') })
+              if (this.from == this.$CONSTANTS.fromRoute.asset) {
+                this.refresh()
+              }
+            } else {
+              console.error(response.msg)
+              this.$message.error(response.msg)
+            }
+          })
+        })
+      }
+    },
+    toTop (wrap) {
+      let currentTop = wrap.scrollTop
+      const interval = currentTop / 10
+      const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
+        if (currentTop === 0) {
+          clearInterval(intervalFunc)
+        } else {
+          currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
+          wrap.scrollTop = currentTop
+        }
+      }, 20)
+    },
+    tableListEnter () {
+      this.tableHover = true
+    },
+    tableListLeave () {
+      this.tableHover = false
+    }
+  },
+  mounted: function () {
+    this.scrollbarWrap = this.$refs.dashboardScrollbar
+    this.onScroll()
+    document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
+    document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
+  },
+  watch: {
+    'filter.searchName': function (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.search()
+      }, 1000)
+    },
+    obj: {
+      immediate: true,
+      handler (n, o) {
+        setTimeout(() => {
+          if (n && n.id) {
+            this.getTableData(n.id)
+          }
+        }, 500)
+      }
+    }
+  },
+  beforeDestroy () {
+    document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
+    document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
+  }
+}
+</script>
+<style scoped lang="scss">
+  .panel {
+    height: 100%;
+  }
+
+  .panel .el-table {
+    border-radius: 5px;
+  }
+
+  .panel-list-width {
+    width:240px;
+  }
+
+  .panel-dropdown-title {
+    line-height:24px;
+    padding-left:5px;
+    margin-left:10px;
+    margin-top: 3px;
+    text-align:left;
+    border-radius:4px;
+    width:120px;
+    height:24px;
+    border:solid 1px  #d8dce1;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+  .panel-list-title {
+    min-height:24px;
+    width:100px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .panel-list-item {
+    width:190px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .content-right-option {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 6px;
+  }
+
+  .content-right-option .nz-icon-delete {
+    color: #F98D9A;
+  }
+
+  .content-right-option .nz-icon-delete:hover {
+    color: #D96D7A;
+  }
+
+  .content-right-option .nz-icon-view {
+    color: #60BEFF;
+  }
+
+  .content-right-option .nz-icon-view:hover {
+    color: #409EFF;
+  }
+
+  /* begin-chart list*/
+  .table-list {
+    margin-top: 6px;
+    overflow-y: auto;
+    height: calc(100% - 56px);
+  }
+
+  .box-content {
+    position: relative;
+  }
+
+  /* end-chart list*/
+  /* begin--Panel-自定义可编辑的el-select下拉框样式*/
+  .panel-dropdown-btn {
+    display: inline-block;
+    margin-left: 7px;
+    float: right;
+    color: #60BEFF;
+    font-size: 13px
+  }
+
+  .panel-dropdown-btn:hover {
+    color: #409EFF;
+  }
+
+  .panel-dropdown-btn-create {
+    display: inline-block;
+    float: left;
+    font-size: 13px;
+    color: #F98D9A;
+    width: 100%;
+  }
+
+  .panel-dropdown-btn-create:hover {
+    color: #D96D7A;
+  }
+
+  .panel-dropdown-btn-delete {
+    color: #F98D9A;
+    font-size: 13px
+  }
+
+  .panel-dropdown-btn-delete:hover {
+    color: #D96D7A;
+  }
+
+  .panel-dropdown-error-message {
+    color: #F98D9A;
+  }
+
+  /* end--Panel-自定义可编辑的el-select下拉框样式*/
+  .panel-select-width {
+    width: 150px;
+  }
+
+  .panel-refresh-interval {
+    margin-right: 5px;
+    float: right;
+  }
+
+  .panel-refresh-interval-select {
+    width: 95px;
+  }
+
+  .panel-calendar {
+    float: right;
+    margin-right: 1px;
+  }
+
+  .top-tools {
+    button {
+      background: $btn-light-background-color;
+      outline: none;
+      border: 1px solid #ccc;
+    }
+
+    button:hover {
+      background: $btn-light-background-color-hover;
+    }
+  }
+
+  .nz-dashboard-dropdown {
+    height: 300px;
+    overflow-y: auto;
+    li {
+      /*padding: 0 20px !important;*/
+      padding-left:20px !important;
+      padding-right:0px !important;
+      width:240px;
+      white-space:nowrap;
+      overflow-x:hidden;
+      text-overflow:ellipsis;
+    }
+  }
+
+  .nz-dashboard-dropdown-bg {
+    background: $global-text-color-active;
+    color: #fff;
+  }
+
+  .el-dropdown-link {
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  .refresh {
+    display: flex;
+    background: #fff;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    margin: 0 10px;
+    border: 1px solid #ccc;
+    background: $btn-light-background-color;
+
+    span {
+      display: inline-block;
+      padding: 1px 8px;
+    }
+  }
+
+  .popover_ul li {
+    padding: 10px 3px;
+    cursor: pointer;
+  }
+
+  .popover_ul li:hover {
+    background: $dropdown-hover-background-color !important;
+    color: $global-text-color-active !important;
+  }
+
+  .nz-dashboard-refresh {
+    border-right: 1px solid #ccc;
+    color: #F0BF84;
+  }
+
+  .nz-dashboard-picker {
+  }
+  .full-width-height{
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<style lang="scss">
+  .nz-dashboard-dropdown {
+    z-index: 3001 !important;
+  }
+  .panel .top-tools input {
+    background-color: $content-right-background-color;
+  }
+  .panel .top-tools  .el-input__inner {
+    background-color: $content-right-background-color;
+  }
+  .panel-calendar .el-range-editor--mini.el-input__inner {
+    height: 25px !important;
+    border-color: #d8d8d8;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range__close-icon {
+    line-height: 18px;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range__icon {
+    display: none;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range-separator {
+    line-height: 17px;
+  }
+
+  .panel-calendar .el-date-editor--datetimerange.el-input, .panel-calendar .el-date-editor--datetimerange.el-input__inner {
+    padding-right: 0;
+    vertical-align: top;
+  }
+
+  .nz-dashboard-dropdown .nz-icon-edit {
+    font-size: 12px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 2982b1950..891063900 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -22,7 +22,7 @@
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
         class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
-        <div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.tableTitle.alerts")}}</div>
+        <div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.alerts")}}</div>
         <div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
       </div>
       <div class="top-tool-right">
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
index bb00172e6..f3730dc9f 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
@@ -4,13 +4,13 @@
       <div class="sub-list-tabs" v-if="from===fromRoute.asset">
         <div class="sub-list-tab-title">{{obj.host}}</div>
         <div class="sub-list-tab" @click="changeTab('panel')" id="endpoint-tab-change-panel">{{$t("overall.detail")}}</div>
-        <div @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="endpoint-tab-change-alertmsg">{{$t("asset.tableTitle.alerts")}}</div>
-        <div class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.modules")}}</div>
+        <div @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="endpoint-tab-change-alertmsg">{{$t("asset.alerts")}}</div>
+        <div class="sub-list-tab sub-list-tab-active">{{$t("asset.modules")}}</div>
       </div>
       <div class="sub-list-tabs" v-if="from===fromRoute.module">
         <div class="sub-list-tab-title">{{obj.name}}</div>
-        <div class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.modules")}}</div>
-        <div @click="changeTab('alertMessage')" class="sub-list-tab" id="endpoint-tab-change-alertmsg">{{$t("asset.tableTitle.alerts")}}</div>
+        <div class="sub-list-tab sub-list-tab-active">{{$t("asset.modules")}}</div>
+        <div @click="changeTab('alertMessage')" class="sub-list-tab" id="endpoint-tab-change-alertmsg">{{$t("asset.alerts")}}</div>
       </div>
       <div class="top-tool-right">
         <div class="top-tool-search">
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
index 2a185d4ff..b5d6918b5 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
@@ -10,14 +10,14 @@
           <template v-else-if="from == $CONSTANTS.fromRoute.endpoint">{{$t("project.endpoint.endpointId")}}: {{obj.id}}</template>
         </div><div class="sub-list-tab sub-list-tab-active" v-if="from == $CONSTANTS.fromRoute.model">{{$t("dashboard.panel.title")}}</div><template v-if="from == $CONSTANTS.fromRoute.asset"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
-          @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="panel-tab-change-asset-alertmsg">{{$t("asset.tableTitle.alerts")}}</div><div
-          @click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'" id="panel-tab-change-endpoint">{{$t("asset.tableTitle.modules")}}</div>
+          @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="panel-tab-change-asset-alertmsg">{{$t("asset.alerts")}}</div><div
+          @click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'" id="panel-tab-change-endpoint">{{$t("asset.modules")}}</div>
         </template><template v-if="from == $CONSTANTS.fromRoute.rule"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
-          @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'rule_alerts_view'" id="panel-tab-change-rule-alertmsg">{{$t("asset.tableTitle.alerts")}}</div>
+          @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'rule_alerts_view'" id="panel-tab-change-rule-alertmsg">{{$t("asset.alerts")}}</div>
         </template><template v-if="from == $CONSTANTS.fromRoute.endpoint"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
-          @click="changeTab('alertMessage')" class="sub-list-tab " v-has="'project_endpoint_alerts_view'">{{$t("asset.tableTitle.alerts")}}</div><div
+          @click="changeTab('alertMessage')" class="sub-list-tab " v-has="'project_endpoint_alerts_view'">{{$t("asset.alerts")}}</div><div
           @click="changeTab('endpointQuery')" class="sub-list-tab" v-has="'project_endpoint_query_chart_view'">{{$t("overall.query")}}</div>
         </template>
       </div>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index f647f9b9f..c5d8a11c8 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -15,7 +15,7 @@
             <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
               <div class="box-content">
                 <chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
-                            @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
+                            @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelData"></chart-list>
               </div>
             </div>
           </div>
@@ -161,47 +161,7 @@ export default {
         confirmButtonText: this.$t('tip.yes'),
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
-      }).then(() => {
-        this.$delete('panel/' + this.showPanel.id + '/charts?ids=' + data.id).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.deleteSuccess')
-            })
-            this.rightBox.show = false
-            const chartList = this.$refs.chartList.dataList
-            let nextChart = null; let prevChart = null
-            for (let i = 0; i < chartList.length; i++) {
-              if (chartList[i].id === data.id) {
-                chartList.splice(i, 1)
-              }
-              if (data.next != -1) {
-                if (chartList[i].id === data.next) {
-                  nextChart = chartList[i]
-                }
-              }
-              if (data.prev != 0) {
-                if (chartList[i].id === data.prev) {
-                  prevChart = chartList[i]
-                }
-              }
-            }
-            this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
-            if (nextChart && prevChart) { // 删除图表为中间位置
-              prevChart.next = nextChart.id
-              nextChart.prev = prevChart.id
-            } else {
-              if (!nextChart) prevChart.next = -1
-              if (!prevChart) nextChart.prev = 0
-            }
-            // this.getTableData(this.obj.id); //删除相关图表后，刷新面板数据
-          } else {
-            console.error(response.msg)
-            this.$message.error(response.msg)
-          }
-        })
-      })
+      }).then(() => {})
     },
     delChartOk () {
       this.getData(this.filter)
@@ -265,31 +225,41 @@ export default {
       if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
         this.getData(this.filter)
       } else {
-        this.$get('panel', { type: this.from, link: linkId }).then(response => {
-          if (response.code === 200) {
-            this.panelData = response.data.list
-            if (this.panelData.length > 0) {
-              this.showPanel.id = this.filter.panelId = this.panelData[0].id
-              this.getData(this.filter)
-            }
-          } else {
-            if (response.msg) {
-              console.error(response.msg)
-              this.$message.error(response.msg)
-            } else if (response.error) {
-              console.error(response.error)
-              this.$message.error(response.error)
+        if (this.from == this.$CONSTANTS.fromRoute.chartTemp) {
+          console.log(this.obj)
+          this.panelData = [this.obj]
+          console.log(this.panelData)
+          if (this.panelData.length > 0) {
+            this.showPanel.id = this.filter.panelId = this.panelData[0].id
+            this.getData(this.filter)
+          }
+        } else {
+          this.$get('panel', { type: this.from, link: linkId }).then(response => {
+            if (response.code === 200) {
+              this.panelData = response.data.list
+              if (this.panelData.length > 0) {
+                this.showPanel.id = this.filter.panelId = this.panelData[0].id
+                this.getData(this.filter)
+              }
             } else {
-              console.error(response)
-              this.$message.error(response)
+              if (response.msg) {
+                console.error(response.msg)
+                this.$message.error(response.msg)
+              } else if (response.error) {
+                console.error(response.error)
+                this.$message.error(response.error)
+              } else {
+                console.error(response)
+                this.$message.error(response)
+              }
             }
-          }
-        }).catch((error) => {
-          if (error) {
-            console.error(error)
-            this.$message.error(error.toString())
-          }
-        })
+          }).catch((error) => {
+            if (error) {
+              console.error(error)
+              this.$message.error(error.toString())
+            }
+          })
+        }
       }
     },
     // 定期刷新
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 1bf74d5d5..5a1200a2f 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -230,5 +230,6 @@ export const fromRoute = {
   menus: 'menus',
   notify: 'notify',
   link: 'link',
-  apiKey: 'apiKey'
+  apiKey: 'apiKey',
+  chartTemp: 'chartTemp'
 }
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 00b6c7f92..7e06b0621 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -278,7 +278,11 @@ const cn = {
         content: '内容',
         tooltip: 'Tooltip',
         displayChart: '图表',
-        aggregation: 'Aggregation'
+        aggregation: 'Aggregation',
+        varType: 'Vartype',
+        pid: 'Chart 模板',
+        selectAsset: '请选择Asset',
+        selectEndpoint: '请选择Endpoint'
       },
       chartTableColumn: {
         metric: '指标',
@@ -336,7 +340,8 @@ const cn = {
       moreTitle: '仅显示 20 个时间序列。',
       moreTitleOther: '仅显示 10 条数据。',
       showAll: '全部显示 ',
-      showAllOther: '全部数据 '
+      showAllOther: '全部数据 ',
+      addChartTemp: 'addChartTemp'
     },
     metric: {
       name: '指标名称',
@@ -545,6 +550,7 @@ const cn = {
     principal: '负责人',
     tel: '电话',
     featureTitle: '属性',
+    endpoint: 'Endpoint',
     endpointUpNum: '代表正常的数量',
     endpointNum: '代表总的数量',
     active: '存活', // "存活",
@@ -562,7 +568,23 @@ const cn = {
     usernamePrompt: '用户名提示',
     passwordPrompt: '密码提示',
     snmpCredential: 'SNMP凭证',
-    authProtocol: '认证协议'
+    authProtocol: '认证协议',
+    id: 'ID',
+    device: 'SN',
+    assetState: '状态',
+    modules: 'Endpoint',
+    alerts: '告警信息',
+    dataCenter: '数据中心',
+    manufacturer: '厂商',
+    procurementDate: '购买日期',
+    principalTel: '电话',
+    option: '操作',
+    assetPing: 'Ping',
+    lastReply: 'Ping最后应答',
+    vendor: '厂商',
+    name: 'Name',
+    dc: '数据中心',
+    type: '主机地址'
   },
   config: {
     config: '设置',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index d55c9ab60..d8e6c61cf 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -250,7 +250,7 @@ const en = {
             label: 'Text'
           },
           group: {
-            label: 'group'
+            label: 'Group'
           }
         },
         statisticsVal: {
@@ -288,7 +288,11 @@ const en = {
         content: 'Content',
         tooltip: 'Tooltip',
         displayChart: 'Display chart',
-        aggregation: 'Aggregation'
+        aggregation: 'Aggregation',
+        varType: 'Vartype',
+        pid: 'Chart template',
+        selectAsset: 'Please select the Asset',
+        selectEndpoint: 'Please select the Endpoint'
       },
       chartTableColumn: {
         metric: 'Metric', // '指标'
@@ -345,7 +349,8 @@ const en = {
       moreTitle: 'Showing only 20 time series. ',
       moreTitleOther: 'Showing only 10 the data. ',
       showAll: 'Show all ',
-      showAllOther: 'All Data'
+      showAllOther: 'All Data',
+      addChartTemp: 'addChartTemp'
     },
     metric: {
       name: 'Metric name', // "指标名称"
@@ -552,6 +557,7 @@ const en = {
     principal: 'Administrator', // '负责人'
     tel: 'Telephone', // '电话'
     featureTitle: 'Attribute',
+    endpoint: 'Endpoint',
     endpointUpNum: 'It\'s a normal number',
     endpointNum: 'Represents the total quantity',
     active: 'Alive', // "存活",
@@ -570,7 +576,22 @@ const en = {
     usernamePrompt: 'Username prompt',
     passwordPrompt: 'Password prompt',
     snmpCredential: 'SNMP credential',
-    authProtocol: 'Auth protocol'
+    authProtocol: 'Auth protocol',
+    id: 'ID', // ID
+    device: 'SN', // SN
+    assetState: 'State', // '状态'
+    assetPing: 'Ping',
+    lastReply: 'Ping last reply',
+    modules: 'Endpoint', // '组件'
+    alerts: 'Alerts', // '告警信息'
+    dataCenter: 'Data center', // DC
+    vendor: 'Vendor', // '厂商'
+    procurementDate: 'Purchase date', // '购买日期'
+    principalTel: 'Telephone', // '电话'
+    option: 'Operation', // "操作"
+    name: 'Name',
+    dc: 'DataCenter',
+    type: 'Types',
   },
   config: {
     config: 'Settings', // "设置"
@@ -681,9 +702,9 @@ const en = {
       latitude: 'Latitude',
       lnglat: 'Coordinate'
     },
-    cabinet:{
-      editCabinet:'Edit Cabinet',
-      createCabinet:'Create Cabinet',
+    cabinet: {
+      editCabinet: 'Edit Cabinet',
+      createCabinet: 'Create Cabinet'
     },
     model: {
       model: 'Asset model',
@@ -753,11 +774,11 @@ const en = {
         replay: 'Replay',
         skipTip: 'Skip no operation time'
       },
-      loginHost:'Login host',
-      loginUser:'Login user',
-      sourceIp:'Source IP',
-      sourceUser:'Source user',
-      SessionId:'Session ID',
+      loginHost: 'Login host',
+      loginUser: 'Login user',
+      sourceIp: 'Source IP',
+      sourceUser: 'Source user',
+      SessionId: 'Session ID'
     },
     operationlog: {
       operationlog: 'Operation log',
@@ -832,8 +853,8 @@ const en = {
         defaultCabinetUsize: 'Cabinet U size',
         second: 'second',
         day: 'day',
-        sessionTimeout:'Session timeout',
-        minute:'minute',
+        sessionTimeout: 'Session timeout',
+        minute: 'minute',
         maxSeries: 'Query max series',
         unsaved: 'Unsaved prompt',
         mapConfig: 'Map center',
@@ -1017,7 +1038,7 @@ const en = {
       expressionError: 'Please fill in the "expression" value'
     },
     chartTemp: {
-      chartTemp: 'Chart template',
+      chartTemp: 'Chart template'
     }
   },
   alert: {
diff --git a/nezha-fronted/src/components/common/mixin/dataList.js b/nezha-fronted/src/components/common/mixin/dataList.js
index 6a3778cb2..e565280bc 100644
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -20,6 +20,7 @@ export default {
         customTableTitle: [] // 自定义列工具的数据
       },
       mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      searchTableHeight: this.$tableHeight.search, // 主列表table高度
       batchDeleteObjs: [],
       object: {},
 
diff --git a/nezha-fronted/src/components/common/nzTransfer.vue b/nezha-fronted/src/components/common/nzTransfer.vue
index 2ada5bea8..7f3268b60 100644
--- a/nezha-fronted/src/components/common/nzTransfer.vue
+++ b/nezha-fronted/src/components/common/nzTransfer.vue
@@ -28,14 +28,12 @@
             width="36">
           </el-table-column>
           <el-table-column
-            :label="$t('overall.name')"
+            :label="item.label"
+            v-for="(item,index) in tableTitle"
+            :key="index"
           >
-           <template slot-scope="scope">{{scope.row.name}}</template>
-          </el-table-column>
-          <el-table-column
-            :label="$t('asset.host')"
-          >
-            <template slot-scope="scope">{{scope.row.manageIp}}</template>
+            <template slot-scope="scope" v-if="!item.slot">{{scope.row[item.prop]}}</template>
+            <slot :name="item.prop" v-else></slot>
           </el-table-column>
         </el-table>
       </div>
@@ -79,14 +77,12 @@
             width="36">
           </el-table-column>
           <el-table-column
-            :label="$t('overall.name')"
+            :label="item.label"
+            v-for="(item,index) in tableTitle"
+            :key="index"
           >
-            <template slot-scope="scope">{{scope.row.name}}</template>
-          </el-table-column>
-          <el-table-column
-            :label="$t('asset.host')"
-          >
-            <template slot-scope="scope">{{scope.row.host}}</template>
+            <template slot-scope="scope" v-if="!item.slot">{{scope.row[item.prop]}}</template>
+            <slot :name="item.prop" v-else></slot>
           </el-table-column>
         </el-table>
       </div>
@@ -131,6 +127,9 @@ export default {
     },
     pageObj: {
       type: Object
+    },
+    tableTitle: {
+      type: Array,
     }
   },
   data () {
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 0be120aa2..2ee8b2805 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -9,6 +9,7 @@
         <span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
       </button>
       <button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)">
+        <span class="select-refresh-time" v-if="interval !== -1">{{interLabel}}</span>
         <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
         <transition name="el-zoom-in-top">
           <ul v-show="dropdownShow" class="el-dropdown-menu el-popper el-dropdown-menu--mini nz-dropdown">
@@ -85,7 +86,8 @@ export default {
       intervalTimer: null,
       interval: -1,
       unit: 2,
-      dropdownShow: false
+      dropdownShow: false,
+      interLabel: ''
     }
   },
   created () {
@@ -96,6 +98,7 @@ export default {
     selectInterval (val) {
       this.visible = false
       this.interval = val.value
+      this.interLabel = val.value
       console.info(this.interval, val)
       if (!this.showTimePicker && val && val.value != -1) {
         this.intervalTimer = setInterval(() => {
diff --git a/nezha-fronted/src/components/common/project/popData/assetTable.vue b/nezha-fronted/src/components/common/project/popData/assetTable.vue
index 917943f08..76a3bb474 100644
--- a/nezha-fronted/src/components/common/project/popData/assetTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/assetTable.vue
@@ -151,32 +151,32 @@ export default {
       mainTableHeight: '100%',
       tableTitle: [
         {
-          label: this.$t('asset.tableTitle.host'),
+          label: this.$t('asset.host'),
           prop: 'HOST',
           show: true,
           width: 130,
           fixed: 'left'
         },
         {
-          label: this.$t('asset.tableTitle.device'),
+          label: this.$t('asset.device'),
           prop: 'SN',
           show: true,
           width: 130
         },
         {
-          label: this.$t('asset.tableTitle.assetType'),
+          label: this.$t('asset.assetType'),
           prop: 'assetType',
           show: true
         }, {
-          label: this.$t('asset.tableTitle.assetState'),
+          label: this.$t('asset.assetState'),
           prop: 'state',
           show: true
         }, {
-          label: this.$t('asset.tableTitle.assetPing'),
+          label: this.$t('asset.assetPing'),
           prop: 'pingStatus',
           show: true
         }, {
-          label: this.$t('asset.tableTitle.alerts'),
+          label: this.$t('asset.alerts'),
           prop: 'Alert',
           show: true,
           width: 100
@@ -287,7 +287,7 @@ export default {
       this.esc(false)
     },
     messageStyle (e) {
-      if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.tableTitle.alerts')) {
+      if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.alerts')) {
         if (e.row.alertNum > 0) {
           return 'danger'
         } else {
diff --git a/nezha-fronted/src/components/common/project/popData/endpointTable.vue b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
index a92de3799..05bafcf18 100644
--- a/nezha-fronted/src/components/common/project/popData/endpointTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
@@ -261,7 +261,7 @@ export default {
       this.esc(false)
     },
     messageStyle (e) {
-      if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.tableTitle.alerts')) {
+      if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.alerts')) {
         if (e.row.alertNum > 0) {
           return 'danger'
         } else {
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index d680b5c1a..8f51f0862 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -313,7 +313,7 @@
            </button>
 
               <button @click="imgUpload" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
-                      v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                      v-has="'topo_icon_save'" :disabled="prevent_opt.save"
                       :class="{'nz-btn-disabled':prevent_opt.save}"
                       style="margin-right: 20px">
              {{$t('project.topology.save')}}
@@ -477,6 +477,8 @@ export default {
       penToolTipScale: 1,
       oldScale: 1,
       uploadPicShow: false,
+      imgWidth: 0,
+      imgHeight: 0,
       uploadPic: {
         name: '',
         unit: ''
@@ -529,7 +531,7 @@ export default {
       deep: true,
       immediate: true,
       handler (n) {
-        if (n.id) {
+        if (n && n.id) {
           if (getTopology(this.topologyIndex)) {
             getTopology(this.topologyIndex).destroy()
             setTopology(this.topologyIndex, null)
@@ -1484,22 +1486,24 @@ export default {
     beforeAvatarUpload (file, fileList) {
       const this_ = this
       const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
-
+      const isLt2M = file.size / 1024 / 1024 < 2
       if (!isJPG) {
         this.$message.error(this_.$t('project.topology.imgFormat'))
         return false
       }
-      // if (!isLt2M) {
-      //   this.$message.error( this_.$t('project.topology.imgSize'));
-      //   return false;
-      // }
+      if (!isLt2M) {
+        this.$message.error(this_.$t('project.topology.imgSize'))
+        return false
+      }
       const isSize = new Promise(function (resolve, reject) {
-        const width = 100
-        const height = 100
+        const width = 0
+        const height = 0
         const _URL = window.URL || window.webkitURL
         const img = new Image()
         img.onload = function () {
           const valid = img.width > width && img.height > height
+          this_.imgWidth = img.width
+          this_.imgHeight = img.height
           valid ? resolve() : reject()
         }
         img.src = _URL.createObjectURL(file.raw)
@@ -1545,12 +1549,15 @@ export default {
     upload () {
       const form = new FormData()
       form.append('file', this.file)
+      console.log(this.file)
       if (this.uploadPic.name) {
         form.append('name', this.uploadPic.name)
       } else {
         form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
       }
       form.append('unit', this.uploadPic.unit)
+      form.append('width', this.imgWidth)
+      form.append('height', this.imgHeight)
       this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -1685,6 +1692,7 @@ export default {
               responseType: 'arraybuffer'
             })
             .then(res => {
+              console.log(res.data)
               return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
             })
             .then(data => {
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
index 6a3fe3843..586a29ad4 100644
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -3,13 +3,13 @@
   @import "./L5/css/props.css";
 </style>
 <template>
-  <div class="project-box list-page" v-loading="topologyLoading">
+  <div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
     <!--project主要信息-->
     <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
       <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
         <!--工具栏-->
         <span class="project-topology-tool">
-          <el-dropdown trigger="click" size="small" placement="bottom-start">
+          <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
             <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
               class="nz-icon nz-icon-arrow-down"></i></span>
             <el-dropdown-menu slot="dropdown" @click="dropdownClick">
@@ -37,7 +37,7 @@
                   </el-collapse-item>
                 </el-collapse>
               </el-card>
-                <div class="upload-pic-box" @click="uploadPicChange">
+                <div class="upload-pic-box" @click="uploadPicChange" v-has="'topo_icon_save'">
                   <i class="el-icon-plus"></i>
                   <span>
                      Upload custom picture
@@ -119,7 +119,7 @@
                   <i class="nz-icon" :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'"></i>
         </button>
         <button @click="editTopology" class="top-tool-btn float-right"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
+                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button" v-has="'project_topo_update'"
         >
                   <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
         </button>
@@ -330,1248 +330,1235 @@
 </template>
 
 <script>
-import { Topology, registerNode } from '@topology/core'
-import {
-  Tools,
-  canvasRegister,
-  imageTemp,
-  myShape,
-  myAnchors,
-  myIconRect,
-  myTextRect,
-  onChangeAnimate,
-  onChangeAnimateLine,
-  myCubec,
-  myCubeAnchors
-} from './L5/services/canvas.js'
-import { getTopology, setTopology } from '../js/common'
-import CanvasProps from './L5/CanvasProps'
-import topologyTopTool from './L5//topologyTopTool'
-import popDataMain from './popData/Main'
-import popDataInfo from './popData/Info'
-import alertTable from './popData/alertTable'
-import assetTable from './popData/assetTable'
-import endpointTable from './popData/endpointTable'
-import topoTooltip from './L5/topoTooltip'
-import { getMetricTypeValue } from '../js/tools'
-import bus from '../../../libs/bus'
-import topologyPrev from './topologyPrev'
-// 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
-registerNode('myCube', myCubec, myCubeAnchors, null, null)
+  import { Topology, registerNode } from '@topology/core'
+  import {
+    Tools,
+    canvasRegister,
+    imageTemp,
+    myShape,
+    myAnchors,
+    myIconRect,
+    myTextRect,
+    onChangeAnimate,
+    onChangeAnimateLine,
+    myCubec,
+    myCubeAnchors
+  } from './L5/services/canvas.js'
+  import { getTopology, setTopology } from '../js/common'
+  import CanvasProps from './L5/CanvasProps'
+  import topologyTopTool from './L5//topologyTopTool'
+  import popDataMain from './popData/Main'
+  import popDataInfo from './popData/Info'
+  import alertTable from './popData/alertTable'
+  import assetTable from './popData/assetTable'
+  import endpointTable from './popData/endpointTable'
+  import topoTooltip from './L5/topoTooltip'
+  import { getMetricTypeValue } from '../js/tools'
+  import bus from '../../../libs/bus'
+  import topologyPrev from './topologyPrev'
+  // 注册到画布
+  registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+  registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
-const canvasOptions = {
-  rotateCursor: '/img/rotate.cur',
-  translateKey: 'None',
-  disableEmptyLine: true,
-  autoExpandDistance: 0,
-  minScale: 0.01
-}
-export default {
-  name: 'topologyL5',
-  data () {
-    return {
-      objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
-      chartDataInfo: {},
-      topoPrevData: {}, // 预览数据
-      imgInit: false, // 判断图片是否加载完成
-      toolGroup: '基本形状',
-      editFlag: true,
-      tools: Tools,
-      props: {},
-      topologyLoading: false,
-      contextmenu: {
-        left: null,
-        top: null,
-        bottom: null
-      },
-      filterTime: [
-        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
-        bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
-      ],
-      topologyInfo: {
-        fontSize: 14,
-        align: 'left',
-        fontColor: '#000000',
-        opacity: 1,
-        name: ''
-      },
-      saveData: {},
-      oldTopologyData: '',
-      redoIndex: 0,
-      dataLength: 0,
-      editTopologyFlag: false,
-      searchTime: bus.getTimezontDateRange(),
-      activeNames: [],
-      topologyIndex: 0,
-      iconArray: [],
-      imgageLoading: false,
-      toolShow: {
-        node: true,
-        attr: true,
-        topTool: true,
-        nodeCord: [0, 0],
-        attrCord: [0, 0],
-        height: 500
-      },
-      dragFlag: true,
-      modules: [],
-      allModules: [],
-      projectInfo: {
-        title: '',
-        id: '',
-        remark: '',
-        alertStat: [1, 2, 3],
-        moduleMum: 6,
-        loading: true
-      },
-      timer: null, // 处理project短时间呢频繁变更的定时器
-      timer2: null, // 处理平移画布显示iconState的定时器
-      timer3: null, // 处理tooltip的显示定时器
-      nodesArr: [],
-      notModuleIDArr: [],
-      popData: [
-        {
-          top: '-40px',
-          left: '-21px',
-          className: 'nz-icon-endpoint',
-          id: 'endpoint',
-          title: this.$t('project.topology.endpoint')
-        },
-        { top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('project.topology.asset') },
-        { top: '-4px', left: '40px', className: '', id: 'other', title: '' },
-        { top: '30px', left: '19px', className: '', id: 'other', title: '' },
-        { top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
-        { top: '-4px', left: '-40px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') }
-      ],
-      popDataShow: {
-        endpoint: false,
-        asset: false,
-        total: false,
-        other: false,
-        info: false,
-        alert: false,
-        main: false
-      },
-      moduleId: '',
-      tooltipPosition: {
-        top: 0,
-        left: 0,
-        show: false,
-        height: 400
-      },
-      chartData: {},
-      chartGetData: [],
-      penLineType: [
-        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
-        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
-        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
-        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
-      ],
-      lineName: 'curve',
-      cachesIndex: 0,
-      projectInfoShow: false,
-      projectAlertShow: false,
-      previewShow: false,
-      penId: undefined,
-      penToolTipScale: 1,
-      oldScale: 1,
-      uploadPicShow: false,
-      uploadPic: {
-        name: '',
-        unit: ''
-      },
-      unitArr: [],
-      topoScreenState: '' // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
-    }
-  },
-  components: {
-    CanvasProps,
-    topologyTopTool,
-    popDataMain,
-    popDataInfo,
-    alertTable,
-    assetTable,
-    endpointTable,
-    topoTooltip,
-    topologyPrev
-  },
-  props: {
-    topologyIndexF: {
-      type: Number,
-      default: 0
-    },
-    obj: {},
-    showTopTools: {
-      type: Boolean,
-      default: true
-    },
-    fromOverView: {
-      type: Boolean,
-      default: false
-    },
-    fromPrev: {
-      type: Boolean,
-      default: false
-    },
-    topoPrevDataS: {
-
-    }
-  },
-  watch: {
-    topologyIndexF: {
-      immediate: true,
-      handler (n) {
-        this.topologyIndex = n
-      }
-    },
-    obj: {
-      deep: true,
-      immediate: true,
-      handler (n) {
-        if (n.id) {
-          if (getTopology(this.topologyIndex)) {
-            getTopology(this.topologyIndex).destroy()
-            setTopology(this.topologyIndex, null)
-          }
-          if (!this.objChange) {
-            this.editTopologyFlag = false
-            this.topologyLoading = true
-            this.projectInfoShow = false
-            this.projectAlertShow = false
-            if (n.id) {
-              this.getProjectData(n)
-            }
-            this.topologyLoading = true
-            this.init()
-            this.timer = null
-            this.objChange = true
-          } else {
-            if (!this.timer) {
-              this.timer = setInterval(() => {
-                if (this.objChange) { return }
-                this.editTopologyFlag = false
-                this.topologyLoading = true
-                this.projectInfoShow = false
-                this.projectAlertShow = false
-                if (n.id) {
-                  this.getProjectData(n)
-                }
-                clearTimeout(this.timer)
-                this.timer = null
-                this.objChange = true
-                this.topologyLoading = true
-                this.init()
-              }, 100)
-            } else {
-              clearTimeout(this.timer)
-              this.timer = setInterval(() => {
-                if (this.objChange) { return }
-                this.editTopologyFlag = false
-                this.topologyLoading = true
-                this.projectInfoShow = false
-                this.projectAlertShow = false
-                if (n.id) {
-                  this.getProjectData(n)
-                }
-                clearTimeout(this.timer)
-                this.timer = null
-                this.objChange = true
-                this.topologyLoading = true
-                this.init()
-              }, 100)
-            }
-          }
-        }
-      }
-    },
-    topoScreen (n) {
-      getTopology(this.topologyIndex).resize()
-      getTopology(this.topologyIndex).centerView(20)
-    }
-  },
-  computed: {
-    topoScreen () {
-      return this.$store.getters.getShowTopoScreen
-    }
-  },
-  created () {
-    canvasRegister()
-    if (process.client) {
-      document.onclick = event => {
-        this.contextmenu = {
+  const canvasOptions = {
+    rotateCursor: '/img/rotate.cur',
+    translateKey: 'None',
+    disableEmptyLine: true,
+    autoExpandDistance: 0,
+    minScale: 0.01
+  }
+  export default {
+    name: 'topologyL5',
+    data () {
+      return {
+        objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
+        chartDataInfo: {},
+        topoPrevData: {}, // 预览数据
+        imgInit: false, // 判断图片是否加载完成
+        toolGroup: '基本形状',
+        editFlag: true,
+        tools: Tools,
+        props: {},
+        topologyLoading: false,
+        contextmenu: {
           left: null,
           top: null,
           bottom: null
+        },
+        filterTime: [
+          bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
+          bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
+        ],
+        topologyInfo: {
+          fontSize: 14,
+          align: 'left',
+          fontColor: '#000000',
+          opacity: 1,
+          name: ''
+        },
+        saveData: {},
+        oldTopologyData: '',
+        redoIndex: 0,
+        dataLength: 0,
+        editTopologyFlag: false,
+        searchTime: bus.getTimezontDateRange(),
+        activeNames: [],
+        topologyIndex: 0,
+        iconArray: [],
+        imgageLoading: false,
+        toolShow: {
+          node: true,
+          attr: true,
+          topTool: true,
+          nodeCord: [0, 0],
+          attrCord: [0, 0],
+          height: 500
+        },
+        dragFlag: true,
+        modules: [],
+        allModules: [],
+        projectInfo: {
+          title: '',
+          id: '',
+          remark: '',
+          alertStat: [1, 2, 3],
+          moduleMum: 6,
+          loading: true
+        },
+        timer: null, // 处理project短时间呢频繁变更的定时器
+        timer2: null, // 处理平移画布显示iconState的定时器
+        timer3: null, // 处理tooltip的显示定时器
+        nodesArr: [],
+        notModuleIDArr: [],
+        popData: [
+          {
+            top: '-40px',
+            left: '-21px',
+            className: 'nz-icon-endpoint',
+            id: 'endpoint',
+            title: this.$t('project.topology.endpoint')
+          },
+          { top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('project.topology.asset') },
+          { top: '-4px', left: '40px', className: '', id: 'other', title: '' },
+          { top: '30px', left: '19px', className: '', id: 'other', title: '' },
+          { top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
+          { top: '-4px', left: '-40px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') }
+        ],
+        popDataShow: {
+          endpoint: false,
+          asset: false,
+          total: false,
+          other: false,
+          info: false,
+          alert: false,
+          main: false
+        },
+        moduleId: '',
+        tooltipPosition: {
+          top: 0,
+          left: 0,
+          show: false,
+          height: 400
+        },
+        chartData: {},
+        chartGetData: [],
+        penLineType: [
+          { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
+          { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
+          { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
+          // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+        ],
+        lineName: 'curve',
+        cachesIndex: 0,
+        projectInfoShow: false,
+        projectAlertShow: false,
+        previewShow: false,
+        penId: undefined,
+        penToolTipScale: 1,
+        oldScale: 1,
+        uploadPicShow: false,
+        uploadPic: {
+          name: '',
+          unit: ''
+        },
+        unitArr: [],
+        topoScreenState: '' // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
+      }
+    },
+    components: {
+      CanvasProps,
+      topologyTopTool,
+      popDataMain,
+      popDataInfo,
+      alertTable,
+      assetTable,
+      endpointTable,
+      topoTooltip,
+      topologyPrev
+    },
+    props: {
+      topologyIndexF: {
+        type: Number,
+        default: 0
+      },
+      obj: {},
+      showTopTools: {
+        type: Boolean,
+        default: true
+      },
+      fromOverView: {
+        type: Boolean,
+        default: false
+      },
+      fromPrev: {
+        type: Boolean,
+        default: false
+      },
+      topoPrevDataS: {
+
+      }
+    },
+    watch: {
+      topologyIndexF: {
+        immediate: true,
+        handler (n) {
+          this.topologyIndex = n
+        }
+      },
+      obj: {
+        deep: true,
+        immediate: true,
+        handler (n) {
+          if (n && n.id) {
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).destroy()
+              setTopology(this.topologyIndex, null)
+            }
+            if (!this.objChange) {
+              this.editTopologyFlag = false
+              this.topologyLoading = true
+              this.projectInfoShow = false
+              this.projectAlertShow = false
+              if (n.id) {
+                this.getProjectData(n)
+              }
+              this.topologyLoading = true
+              this.init()
+              this.timer = null
+              this.objChange = true
+            } else {
+              if (!this.timer) {
+                this.timer = setInterval(() => {
+                  if (this.objChange) { return }
+                  this.editTopologyFlag = false
+                  this.topologyLoading = true
+                  this.projectInfoShow = false
+                  this.projectAlertShow = false
+                  if (n.id) {
+                    this.getProjectData(n)
+                  }
+                  clearTimeout(this.timer)
+                  this.timer = null
+                  this.objChange = true
+                  this.topologyLoading = true
+                  this.init()
+                }, 100)
+              } else {
+                clearTimeout(this.timer)
+                this.timer = setInterval(() => {
+                  if (this.objChange) { return }
+                  this.editTopologyFlag = false
+                  this.topologyLoading = true
+                  this.projectInfoShow = false
+                  this.projectAlertShow = false
+                  if (n.id) {
+                    this.getProjectData(n)
+                  }
+                  clearTimeout(this.timer)
+                  this.timer = null
+                  this.objChange = true
+                  this.topologyLoading = true
+                  this.init()
+                }, 100)
+              }
+            }
+          }
+        }
+      },
+      topoScreen (n) {
+        getTopology(this.topologyIndex).resize()
+        getTopology(this.topologyIndex).centerView(20)
+      }
+    },
+    computed: {
+      topoScreen () {
+        return this.$store.getters.getShowTopoScreen
+      }
+    },
+    created () {
+      canvasRegister()
+      if (process.client) {
+        document.onclick = event => {
+          this.contextmenu = {
+            left: null,
+            top: null,
+            bottom: null
+          }
         }
       }
-    }
-  },
-  mounted () {
-    if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
-      this.addNodeInit()
-    }
-    document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
-    window.addEventListener('resize', this.winResize)
-  },
-  methods: {
-    init () {
-      canvasOptions.on = this.onMessage
-      this.reload()
     },
+    mounted () {
+      if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
+        this.addNodeInit()
+      }
+      document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
+      window.addEventListener('resize', this.winResize)
+    },
+    methods: {
+      init () {
+        canvasOptions.on = this.onMessage
+        this.reload()
+      },
 
-    reload () {
-      this.topologyLoading = true
-      this.getTopologyData().then((data) => {
-        this.openTopologyData(data).then(() => {
-          // 获取对应的值 给节点 连线添加对应动画
-          this.lineName = data.lineName ? data.lineName : this.lineName
-          this.chartGetData = []
-          const axiosArr = []
-          const promiseArr = []
-          const self = this
-          const pensPromise = (pen, arr, index) => {
-            return new Promise(function (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)
-                resolve()
-              })
-            })
-          }
-          const endTime = this.filterTime[1]
-          const startTime = this.filterTime[0]
-          const step = bus.getStep(startTime, endTime)
-          data.pens && data.pens.forEach((item, index) => {
-            this.chartGetData.push({ id: item.id, res: [] })
-            const arr = item.data.expressArr.map((ele) => {
-              let query = encodeURIComponent(ele)
-              if (!query) {
-                return new Promise(resolve => {
-                  resolve({ data: '', status: 'no query' })
+      reload () {
+        this.topologyLoading = true
+        this.getTopologyData().then((data) => {
+          this.openTopologyData(data).then(() => {
+            // 获取对应的值 给节点 连线添加对应动画
+            this.lineName = data.lineName ? data.lineName : this.lineName
+            this.chartGetData = []
+            const axiosArr = []
+            const promiseArr = []
+            const self = this
+            const pensPromise = (pen, arr, index) => {
+              return new Promise(function (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)
+                  resolve()
                 })
-              }
-              query += '&nullType=' + 'connected'
-              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
-            })
-            axiosArr.push({ item, arr })
-            promiseArr.push(pensPromise(item, arr, index))
-          })
-          Promise.all(promiseArr).then((res) => {
-            getTopology(this.topologyIndex).open(data)
-            getTopology(this.topologyIndex).lock(1)
-            this.objChange = false
-            let flag = false
-            const position = {
-              x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
-              y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
+              })
             }
-            this.oldScale = getTopology(this.topologyIndex).data.scale
-            getTopology(this.topologyIndex).data.pens.forEach(item => {
-              if (flag) {
-                return
-              }
-              if (item.rect.ex > position.x || item.rect.ey > position.y) {
-                getTopology(this.topologyIndex).fitView(20)
-                flag = true
-              }
-            })
-            getTopology(this.topologyIndex).centerView(20)
-            this.penToolTipScale = getTopology(this.topologyIndex).data.scale
-            setTimeout(() => {
-              getTopology(this.topologyIndex).data.pens.forEach(item => {
-                if (item.animatePlay) {
-                  item.stopAnimate()
-                  setTimeout(() => {
-                    item.startAnimate()
+            const endTime = this.filterTime[1]
+            const startTime = this.filterTime[0]
+            const step = bus.getStep(startTime, endTime)
+            data.pens && data.pens.forEach((item, index) => {
+              this.chartGetData.push({ id: item.id, res: [] })
+              const arr = item.data.expressArr.map((ele) => {
+                let query = encodeURIComponent(ele)
+                if (!query) {
+                  return new Promise(resolve => {
+                    resolve({ data: '', status: 'no query' })
                   })
                 }
-              }, 100)
+                query += '&nullType=' + 'connected'
+                return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+              })
+              axiosArr.push({ item, arr })
+              promiseArr.push(pensPromise(item, arr, index))
             })
-            // if(this.fromPrev){
-            //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
-            // }
-            // getTopology(this.topologyIndex).fitView();
-            this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
-            this.getNodesArr()
-          })
-        })
-      })
-    },
-
-    dateChange () {
-      // const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-      // this.setSearchTime(nowTimeType.type, nowTimeType.value)
-      this.searchTime = bus.getTimezontDateRange()
-      this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
-      this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
-      this.reload()
-    },
-    setSearchTime (type, val) { // 设置searchTime
-      if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'm')
-      } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'h')
-      } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'd')
-      }
-      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
-    },
-    // 打开topology数据
-    openTopologyData (data) {
-      return new Promise(resolve => {
-        if (!getTopology(this.topologyIndex)) {
-          const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
-          canvas.open(data)
-          setTopology(this.topologyIndex, canvas)
-        } else {
-          getTopology(this.topologyIndex).open(data)
-        }
-        this.topologyLoading = false
-        if (!getTopology(this.topologyIndex).data.name) {
-          getTopology(this.topologyIndex).data.name = this.obj.name
-        }
-        getTopology(this.topologyIndex).data.projectId = this.obj.id
-        getTopology(this.topologyIndex).lock(1)
-
-        this.getModule()// 获取module
-        resolve()
-      })
-    },
-    // 获取topology数据
-    getTopologyData () {
-      return new Promise(resolve => {
-        if (this.fromPrev) {
-          resolve(this.topoPrevDataS)
-        }
-        this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
-          let data = res.data.topo
-          if (!res.data.topo || !data.pens) {
-            data = {
-              bkColor: '#FFFFFF',
-              gridSize: 10,
-              gridColor: '#ededed',
-              lineWidth: 1,
-              ruleColor: '#4e4e4e'
-            }
-            this.projectInfoShow = true
-            this.projectAlertShow = true
-            this.saveData = { ...data }
-            this.topologyInfo.name = this.obj.name
-            resolve(data)
-          } else {
-            this.topologyInfo = {
-              fontSize: data.data.fontSize,
-              align: data.data.align,
-              fontColor: data.data.fontColor,
-              opacity: data.data.opacity,
-              name: data.name
-            }
-            if (this.fromOverView) { // 优化从首页来的加载速度
-              const arr = data.pens.filter(item => !item.type)
-              this.addNodeInit(arr)
-            }
-            const timer = setInterval(() => {
-              if (!this.imgInit) {
-                return
+            Promise.all(promiseArr).then((res) => {
+              getTopology(this.topologyIndex).open(data)
+              getTopology(this.topologyIndex).lock(1)
+              this.objChange = false
+              let flag = false
+              const position = {
+                x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
+                y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
               }
-              clearInterval(timer)
-              const promiseArr = []
-              const self = this
-              for (let i = 0; i < data.pens.length; i++) {
-                const line = data.pens[i]
-                if (line.type === 1) {
-                  if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
-                    data.pens.splice(i, 1)
-                    i--
-                  }
+              this.oldScale = getTopology(this.topologyIndex).data.scale
+              getTopology(this.topologyIndex).data.pens.forEach(item => {
+                if (flag) {
+                  return
                 }
-              }
-              data.pens.forEach(item => {
-                if (item.type === 0 && item.data.imageId) {
-                  item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
-                }
-                if (item.type === 0) {
-                  // promiseArr.push(this.$get('/monitor/module/stat', { id: item.data.moduleId }))
-                  item.data.state = {}
-                  item.data.state.asset = false
-                  item.data.state.endpoint = false
-                  item.data.state.alert = false
-                } else {
-                  // promiseArr.push({ type: 1 })
-                  item.data.state = {}
-                  item.data.state.asset = false
-                  item.data.state.endpoint = false
-                  item.data.state.alert = false
+                if (item.rect.ex > position.x || item.rect.ey > position.y) {
+                  getTopology(this.topologyIndex).fitView(20)
+                  flag = true
                 }
               })
+              getTopology(this.topologyIndex).centerView(20)
+              this.penToolTipScale = getTopology(this.topologyIndex).data.scale
+              setTimeout(() => {
+                getTopology(this.topologyIndex).data.pens.forEach(item => {
+                  if (item.animatePlay) {
+                    item.stopAnimate()
+                    setTimeout(() => {
+                      item.startAnimate()
+                    })
+                  }
+                }, 100)
+              })
+              // if(this.fromPrev){
+              //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
+              // }
+              // getTopology(this.topologyIndex).fitView();
+              this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
+              this.getNodesArr()
+            })
+          })
+        })
+      },
 
-              if (!data.data) {
-                this.projectInfoShow = true
-                this.projectAlertShow = true
-              } else if (!JSON.stringify(data.data.projectInfo)) {
-                this.projectInfoShow = true
-                this.projectAlertShow = true
-              } else {
-                this.projectInfoShow = data.data.projectInfo
-                this.projectAlertShow = data.data.alertInfo
+      dateChange () {
+        // const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+        // this.setSearchTime(nowTimeType.type, nowTimeType.value)
+        this.searchTime = bus.getTimezontDateRange()
+        this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+        this.reload()
+      },
+      setSearchTime (type, val) { // 设置searchTime
+        if (type === 'minute') {
+          const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+          const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+          this.$set(this.searchTime, 0, startTime)
+          this.$set(this.searchTime, 1, endTime)
+          this.$set(this.searchTime, 2, val + 'm')
+        } else if (type === 'hour') {
+          const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+          const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+          this.$set(this.searchTime, 0, startTime)
+          this.$set(this.searchTime, 1, endTime)
+          this.$set(this.searchTime, 2, val + 'h')
+        } else if (type === 'date') {
+          const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+          const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+          this.$set(this.searchTime, 0, startTime)
+          this.$set(this.searchTime, 1, endTime)
+          this.$set(this.searchTime, 2, val + 'd')
+        }
+        this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+      },
+      // 打开topology数据
+      openTopologyData (data) {
+        return new Promise(resolve => {
+          if (!getTopology(this.topologyIndex)) {
+            const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
+            canvas.open(data)
+            setTopology(this.topologyIndex, canvas)
+          } else {
+            getTopology(this.topologyIndex).open(data)
+          }
+          this.topologyLoading = false
+          if (!getTopology(this.topologyIndex).data.name) {
+            getTopology(this.topologyIndex).data.name = this.obj.name
+          }
+          getTopology(this.topologyIndex).data.projectId = this.obj.id
+          getTopology(this.topologyIndex).lock(1)
+
+          this.getModule()// 获取module
+          resolve()
+        })
+      },
+      // 获取topology数据
+      getTopologyData () {
+        return new Promise(resolve => {
+          if (this.fromPrev) {
+            resolve(this.topoPrevDataS)
+          }
+          this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
+            let data = res.data.topo
+            if (!res.data.topo || !data.pens) {
+              data = {
+                bkColor: '#FFFFFF',
+                gridSize: 10,
+                gridColor: '#ededed',
+                lineWidth: 1,
+                ruleColor: '#4e4e4e'
               }
-              if (!data.bkImage) {
-                data.bkImage = undefined
+              this.projectInfoShow = true
+              this.projectAlertShow = true
+              this.saveData = { ...data }
+              this.topologyInfo.name = this.obj.name
+              resolve(data)
+            } else {
+              this.topologyInfo = {
+                fontSize: data.data.fontSize,
+                align: data.data.align,
+                fontColor: data.data.fontColor,
+                opacity: data.data.opacity,
+                name: data.name
               }
-              Promise.all(promiseArr).then(res => {
-                res.forEach((response, index) => {
-                  const item = data.pens[index]
+              if (this.fromOverView) { // 优化从首页来的加载速度
+                const arr = data.pens.filter(item => !item.type)
+                this.addNodeInit(arr)
+              }
+              const timer = setInterval(() => {
+                if (!this.imgInit) {
+                  return
+                }
+                clearInterval(timer)
+                const promiseArr = []
+                const self = this
+                for (let i = 0; i < data.pens.length; i++) {
+                  const line = data.pens[i]
+                  if (line.type === 1) {
+                    if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
+                      data.pens.splice(i, 1)
+                      i--
+                    }
+                  }
+                }
+                data.pens.forEach(item => {
+                  if (item.type === 0 && item.data.imageId) {
+                    item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
+                  }
                   if (item.type === 0) {
-                    item.data.state = response.data
+                    // promiseArr.push(this.$get('/monitor/module/stat', { id: item.data.moduleId }))
+                    item.data.state = {}
+                    item.data.state.asset = false
+                    item.data.state.endpoint = false
+                    item.data.state.alert = false
+                  } else {
+                    // promiseArr.push({ type: 1 })
+                    item.data.state = {}
                     item.data.state.asset = false
                     item.data.state.endpoint = false
                     item.data.state.alert = false
-                    if (item.data.state.assetStat.down > 0) {
-                      item.data.state.asset = true
-                    }
-                    if (item.data.state.endpointStat.down > 0) {
-                      item.data.state.endpoint = true
-                    }
-                    if (item.data.state.alertStat.P1 > 0 || item.data.state.alertStat.P3 > 0 || item.data.state.alertStat.P2 > 0) {
-                      item.data.state.alert = true
-                    }
-                    item.data.state.error = item.data.state.asset || item.data.state.endpoint || item.data.state.alert
                   }
                 })
-                self.saveData = { ...data }
-                resolve(data)
+
+                if (!data.data) {
+                  this.projectInfoShow = true
+                  this.projectAlertShow = true
+                } else if (!JSON.stringify(data.data.projectInfo)) {
+                  this.projectInfoShow = true
+                  this.projectAlertShow = true
+                } else {
+                  this.projectInfoShow = data.data.projectInfo
+                  this.projectAlertShow = data.data.alertInfo
+                }
+                if (!data.bkImage) {
+                  data.bkImage = undefined
+                }
+                Promise.all(promiseArr).then(res => {
+                  res.forEach((response, index) => {
+                    const item = data.pens[index]
+                    if (item.type === 0) {
+                      item.data.state = response.data
+                      item.data.state.asset = false
+                      item.data.state.endpoint = false
+                      item.data.state.alert = false
+                      if (item.data.state.assetStat.down > 0) {
+                        item.data.state.asset = true
+                      }
+                      if (item.data.state.endpointStat.down > 0) {
+                        item.data.state.endpoint = true
+                      }
+                      if (item.data.state.alertStat.P1 > 0 || item.data.state.alertStat.P3 > 0 || item.data.state.alertStat.P2 > 0) {
+                        item.data.state.alert = true
+                      }
+                      item.data.state.error = item.data.state.asset || item.data.state.endpoint || item.data.state.alert
+                    }
+                  })
+                  self.saveData = { ...data }
+                  resolve(data)
+                })
+              }, 100)
+            }
+          })
+        })
+      },
+      // 赋值动画
+      setAnimation (pen, res) { // 根据所有res的状态 赋值动画
+        let maxLevel = 0
+        if (res.length > 0) {
+          res.forEach((response, innerPos) => {
+            if (response.status !== 'success') {
+              return
+            }
+            if (response.data.result) {
+              response.data.result.forEach((queryItem, resIndex) => {
+                pen.data.valueMapping.forEach((item, index) => {
+                  if (item.value === 'base') { return }
+                  if (queryItem.showValue > item.value) {
+                    queryItem.level = item.level
+                    if (maxLevel < item.level) {
+                      maxLevel = item.level
+                    }
+                  }
+                })
+              })
+            }
+          })
+        }
+        if (maxLevel !== 0) {
+          if (pen.type === 0) { // 判断valueMapping 给相应的状态
+            const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
+            if (selLevel) {
+              pen.fontColor = selLevel.color.text
+              pen.fillStyle = selLevel.color.fill
+              pen.strokeStyle = selLevel.color.line
+              pen.bkType = 0
+            }
+            onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
+          } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
+            const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
+            if (selLevel) {
+              pen.animateColor = selLevel.color.fill
+              pen.strokeStyle = selLevel.color.line
+              pen.animateType = selLevel.animateType
+              pen.fontColor = selLevel.color.text
+            }
+            onChangeAnimateLine(pen, pen.animateType)
+          }
+        } else {
+          if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
+            onChangeAnimate(pen, pen.animateType)
+          } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
+            onChangeAnimateLine(pen, pen.animateType)
+          }
+        }
+      },
+      computeData (res, type, pen) { // 处理别名 以及 根据type显示对应的值
+        if (res.length > 0) {
+          res.forEach((response, innerPos) => {
+            if (response.status !== 'success') {
+              return
+            }
+
+            if (response.data.result) {
+              response.data.result.forEach((queryItem, resIndex) => {
+                // 图表中每条线的名字,后半部分
+                let host = ''// up,
+                if (queryItem.metric.__name__) {
+                  host = `${queryItem.metric.__name__}{`// up,
+                }
+                const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                // 设置时间-数据格式对
+                let dpsArr = []
+                dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                dpsArr = dpsArr.map(item => {
+                  return [item[0], [item[1][0], Number(item[1][1])]]
+                })
+                // 判断是否有数据, && tagsArr.length > 0
+                if (dpsArr.length) {
+                  tagsArr.forEach((tag, i) => {
+                    if (tag !== '__name__') {
+                      host += `${tag}="${queryItem.metric[tag]}",`
+                    }
+                  })
+                  if (host.endsWith(',')) {
+                    host = host.substr(0, host.length - 1)
+                  }
+                  if (queryItem.metric.__name__) {
+                    host += '}'
+                  }
+                  if (!host || host === '') {
+                    host = pen.data.expressArr[innerPos]
+                  }
+                  // 处理legend别名
+                  let alias = this.dealLegendAlias(host, pen.data.legends[innerPos])
+                  if (!alias || alias === '') {
+                    alias = host
+                  }
+                  queryItem.legend = { name: host + '-' + pen.data.legends[innerPos] + '-' + resIndex, alias: alias }
+                  queryItem.showValue = getMetricTypeValue(queryItem.values, type)
+                  // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                }
+              })
+            }
+          })
+        }
+        return res
+      },
+      dealLegendAlias: function (legend, expression) {
+        if (/\{\{.+\}\}/.test(expression)) {
+          const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
+            const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+            const reg = new RegExp(label + '=".+?"')
+            let value = null
+            if (reg.test(legend)) {
+              const find = legend.match(reg)[0]
+              value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+            }
+            return value || label
+          })
+          return labelValue
+        } else {
+          return expression
+        }
+      },
+      // 获取project Info
+      getProjectData (n) {
+        // 获取projectInfo
+        this.projectInfo.loading = true
+        this.$get('monitor/project/' + n.id).then(response => {
+          if (response.code === 200) {
+            this.projectInfo.loading = false
+            this.projectInfo = { ...this.projectInfo, ...response.data }
+            this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
+            if (!this.projectInfo.total) {
+              this.projectInfo.total = 0
+            }
+          }
+        })
+      },
+      // Severity Label
+      returnSeverityLabel (key) {
+        return this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label
+      },
+      // 获取module
+      getModule () {
+        this.projectInfo.loading = true
+        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.modulesDiff()
+          }
+        })
+      },
+
+      getNodesArr () {
+        if (!getTopology(this.topologyIndex)) return
+        this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
+          if (!item.data) {
+            item.data = {
+              moduleId: '',
+              moduleName: '',
+              show: false,
+              error: false,
+              expressArr: []
+            }
+          }
+          return item.type === 0
+        })
+        // this.nodesArr=this.nodesArr.map(item=>{
+        //   if(!item.data){
+        //     item.data={
+        //       moduleId:'',
+        //       moduleName:'',
+        //       show:false,
+        //       error:false,
+        //       expressArr:[],
+        //     }
+        //   }
+        //   return {
+        //     rect:item.rect,
+        //     data:item.data
+        //   }
+        // });
+        // 打开动画 是否更新顶部图标
+        this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
+      },
+
+      modelTopClick (item, index) {
+
+      },
+      // 摘除已选择的module
+      modulesDiff (data) {
+        this.modules = this.allModules
+        if (getTopology(this.topologyIndex).data.pens) {
+          getTopology(this.topologyIndex).data.pens.forEach(item => {
+            if (item.type == 0) {
+              this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
+            }
+          })
+        }
+        if (data && data.data && data.data.moduleId) {
+          this.modules.unshift({ id: data.data.moduleId, name: data.data.moduleName })
+        }
+      },
+
+      // 显示module的工具
+      showNodeTools (index, pen) {
+        this.nodesArr.forEach((item, i) => {
+          item.data.show = i === index
+        })
+      },
+
+      // 具体内容点击
+      nodeTools (node, tool) {
+        this.moduleId = node.data.moduleId
+        if (tool.id === 'total') {
+          this.popDataShowUpdate('', false, node)
+          return
+        }
+        setTimeout(() => {
+          this.popDataShowUpdate(tool.id, false, node)
+        }, 100)
+      },
+
+      popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏
+        this.popDataShow = {
+          endpoint: false,
+          asset: false,
+          total: false,
+          other: false,
+          info: false,
+          alert: false,
+          main: false
+        }
+        if (key === 'total') {
+          this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) }
+        }
+        this.$nextTick(() => {
+          this.popDataShow[key] = true
+        })
+        if (flag) { // 处理关闭后 缩放后显示工具按钮的问题
+          this.moduleId = ''
+          this.showNodeTools('')
+        }
+        if (key === 'asset' || key === 'alert' || key === 'endpoint') {
+          this.showNodeTools('')
+        }
+      },
+
+      /* topology 方法 */
+      onDrag (event, node) {
+        this.dragFlag = false
+        setTimeout(() => {
+          this.dragFlag = true
+        }, 100)
+        event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
+      },
+      dragFlagChange (node) {
+        getTopology(this.topologyIndex).addNode(
+          {
+            ...node.data,
+            rect: {
+              ...node.data.rect,
+              x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
+              y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50
+            },
+            data: { imageId: node.data.imageId }
+          })
+        setTimeout(() => {
+          this.dragFlag = true
+        }, 100)
+      },
+
+      onMessage (event, data, e) {
+        // console.log('onMessage', event, data)
+        // console.log(getTopology(this.topologyIndex))
+        // this.notModuleIDArr=[];
+        this.toolShow.attr = false
+        this.toolShow.topTool = false
+        this.$nextTick(() => {
+          this.toolShow.attr = true
+          this.toolShow.topTool = true
+        })
+        if (data) {
+          this.notModuleIDArr.forEach(item => {
+            if (item.id === data.id) {
+              item.rect = data.rect
+            }
+          })
+        }
+        if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
+          if (data.type === 0 && !data.data.moduleId) {
+            data.data = {
+              ...data.data,
+              moduleId: '',
+              moduleName: '',
+              show: false,
+              error: false,
+              animatePlay: false,
+              fillStyle: data.fillStyle,
+              strokeStyle: data.strokeStyle,
+              gradientColor: '#bae7ff',
+              gradientType: 0,
+              lineWidth: this.nodeDefaultWidth(data.name),
+              iconToolState: true,
+              // chart 配置项
+              valueMapping: [{
+                color: {
+                  line: '#000000',
+                  fill: '#ffffff',
+                  text: '#000000'
+                },
+                value: 'base',
+                animateType: 'base',
+                level: 0,
+                base: true
+              }],
+              valueMappingSort: 'asc',
+              expressArr: [''],
+              legends: [''],
+              tooltipShow: true,
+              panelName: 'topologyName',
+              unit: 2,
+              type: 'line',
+              displayChart: true,
+              aggregation: 'last',
+              title: '',
+              url: ''
+            }
+          } else if (data.type == 1 && !data.data) {
+            // 连线是否自动计算锚点
+            // data.manualCps=true;
+            data.animateColor = '#FA901C'
+            data.data = {
+              animatePlay: false,
+              strokeStyle: data.strokeStyle,
+              animateColor: data.animateColor,
+              arrowColor: '#000000',
+              fromArrowColor: '#000000',
+              toArrowColor: '#000000',
+              lineWidth: 1,
+              // chart 配置项
+              valueMapping: [{
+                color: {
+                  line: '#000000',
+                  fill: '#ffffff',
+                  text: '#000000'
+                },
+                value: 'base',
+                animateType: 'base',
+                level: 0,
+                base: true
+              }],
+              valueMappingSort: 'asc', /* desc */
+              expressArr: [''],
+              legends: [''],
+              tooltipShow: true,
+              panelName: 'topologyName',
+              unit: 2,
+              type: 'line',
+              displayChart: true,
+              aggregation: 'last',
+              title: '',
+              moduleName: '',
+              url: ''
+            }
+          }
+          if (data.type === 0 || data.type === 1) {
+            data.lineWidth = data.data.lineWidth
+          }
+        }
+
+        switch (event) {
+          case 'moveInNode':
+          case 'moveInLine':
+            if (this.timer3) {
+              clearTimeout(this.timer3)
+              this.timer3 = null
+            }
+            this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
+            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
+              this.tooltipPosition.left = ePosition.layerX + 20
+              this.tooltipPosition.top = ePosition.layerY
+              this.$nextTick(() => {
+                if (this.$refs.topoTooltip) {
+                  if ((boxWidth / 2) > ePosition.layerX) {
+                    this.tooltipPosition.left = ePosition.layerX + 20
+                  } else {
+                    this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
+                  }
+                  if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
+                    this.tooltipPosition.top = ePosition.layerY
+                  } else {
+                    this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
+                  }
+                }
               })
             }, 100)
-          }
-        })
-      })
-    },
-    // 赋值动画
-    setAnimation (pen, res) { // 根据所有res的状态 赋值动画
-      let maxLevel = 0
-      if (res.length > 0) {
-        res.forEach((response, innerPos) => {
-          if (response.status !== 'success') {
-            return
-          }
-          if (response.data.result) {
-            response.data.result.forEach((queryItem, resIndex) => {
-              pen.data.valueMapping.forEach((item, index) => {
-                if (item.value === 'base') { return }
-                if (queryItem.showValue > item.value) {
-                  queryItem.level = item.level
-                  if (maxLevel < item.level) {
-                    maxLevel = item.level
+            break
+          case 'moveOutNode':
+          case 'moveOutLine':
+            // this.tooltipPosition.show=false;
+            // return
+            if (!this.timer3) {
+              this.timer3 = setTimeout(() => {
+                this.tooltipPosition.show = false
+                this.timer3 = null
+              }, 50)
+            } else {
+              clearTimeout(this.timer3)
+              this.timer3 = setTimeout(() => {
+                this.tooltipPosition.show = false
+                this.timer3 = null
+              }, 50)
+            }
+            break
+        }
+        // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
+        setTimeout(() => {
+          switch (event) {
+            case 'node':
+            case 'addNode':
+              this.modulesDiff(data)
+              if (data.data.expressArr.length === 0 && event !== 'node') {
+                data.data.expressArr.push('')
+                data.data.legends.push('')
+              }
+              this.props = {
+                node: data,
+                line: null,
+                multi: false,
+                expand: this.props.expand,
+                nodes: null,
+                locked: data.locked,
+                pen: data,
+                pens: null
+              }
+              this.$nextTick(() => {
+                if (this.$refs.CanvasProps) {
+                  if (this.penId !== data.id) {
+                    this.$refs.CanvasProps.tab = '1'
                   }
+                  this.penId = data.id
                 }
               })
-            })
-          }
-        })
-      }
-      if (maxLevel !== 0) {
-        if (pen.type === 0) { // 判断valueMapping 给相应的状态
-          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
-          if (selLevel) {
-            pen.fontColor = selLevel.color.text
-            pen.fillStyle = selLevel.color.fill
-            pen.strokeStyle = selLevel.color.line
-            pen.bkType = 0
-          }
-          onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
-        } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
-          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
-          if (selLevel) {
-            pen.animateColor = selLevel.color.fill
-            pen.strokeStyle = selLevel.color.line
-            pen.animateType = selLevel.animateType
-            pen.fontColor = selLevel.color.text
-          }
-          onChangeAnimateLine(pen, pen.animateType)
-        }
-      } else {
-        if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimate(pen, pen.animateType)
-        } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimateLine(pen, pen.animateType)
-        }
-      }
-    },
-    computeData (res, type, pen) { // 处理别名 以及 根据type显示对应的值
-      if (res.length > 0) {
-        res.forEach((response, innerPos) => {
-          if (response.status !== 'success') {
-            return
-          }
-
-          if (response.data.result) {
-            response.data.result.forEach((queryItem, resIndex) => {
-              // 图表中每条线的名字,后半部分
-              let host = ''// up,
-              if (queryItem.metric.__name__) {
-                host = `${queryItem.metric.__name__}{`// up,
+              break
+            case 'line':
+            case 'addLine':
+              this.props = {
+                node: null,
+                line: data,
+                multi: false,
+                nodes: null,
+                locked: data.locked,
+                pen: data,
+                pens: null
               }
-              const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-              // 设置时间-数据格式对
-              let dpsArr = []
-              dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-              dpsArr = dpsArr.map(item => {
-                return [item[0], [item[1][0], Number(item[1][1])]]
-              })
-              // 判断是否有数据, && tagsArr.length > 0
-              if (dpsArr.length) {
-                tagsArr.forEach((tag, i) => {
-                  if (tag !== '__name__') {
-                    host += `${tag}="${queryItem.metric[tag]}",`
+              this.$nextTick(() => {
+                if (this.$refs.CanvasProps) {
+                  if (this.penId !== data.id) {
+                    this.$refs.CanvasProps.tab = '1'
                   }
-                })
-                if (host.endsWith(',')) {
-                  host = host.substr(0, host.length - 1)
+                  this.penId = data.id
                 }
-                if (queryItem.metric.__name__) {
-                  host += '}'
-                }
-                if (!host || host === '') {
-                  host = pen.data.expressArr[innerPos]
-                }
-                // 处理legend别名
-                let alias = this.dealLegendAlias(host, pen.data.legends[innerPos])
-                if (!alias || alias === '') {
-                  alias = host
-                }
-                queryItem.legend = { name: host + '-' + pen.data.legends[innerPos] + '-' + resIndex, alias: alias }
-                queryItem.showValue = getMetricTypeValue(queryItem.values, type)
-                // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-              }
-            })
-          }
-        })
-      }
-      return res
-    },
-    dealLegendAlias: function (legend, expression) {
-      if (/\{\{.+\}\}/.test(expression)) {
-        const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
-          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
-          const reg = new RegExp(label + '=".+?"')
-          let value = null
-          if (reg.test(legend)) {
-            const find = legend.match(reg)[0]
-            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
-          }
-          return value || label
-        })
-        return labelValue
-      } else {
-        return expression
-      }
-    },
-    // 获取project Info
-    getProjectData (n) {
-      // 获取projectInfo
-      this.projectInfo.loading = true
-      this.$get('monitor/project/' + n.id).then(response => {
-        if (response.code === 200) {
-          this.projectInfo.loading = false
-          this.projectInfo = { ...this.projectInfo, ...response.data }
-          this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
-          if (!this.projectInfo.total) {
-            this.projectInfo.total = 0
-          }
-        }
-      })
-    },
-    // Severity Label
-    returnSeverityLabel (key) {
-      return this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label
-    },
-    // 获取module
-    getModule () {
-      this.projectInfo.loading = true
-      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.modulesDiff()
-        }
-      })
-    },
-
-    getNodesArr () {
-      if (!getTopology(this.topologyIndex)) return
-      this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
-        if (!item.data) {
-          item.data = {
-            moduleId: '',
-            moduleName: '',
-            show: false,
-            error: false,
-            expressArr: []
-          }
-        }
-        return item.type === 0
-      })
-      // this.nodesArr=this.nodesArr.map(item=>{
-      //   if(!item.data){
-      //     item.data={
-      //       moduleId:'',
-      //       moduleName:'',
-      //       show:false,
-      //       error:false,
-      //       expressArr:[],
-      //     }
-      //   }
-      //   return {
-      //     rect:item.rect,
-      //     data:item.data
-      //   }
-      // });
-      // 打开动画 是否更新顶部图标
-      this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
-    },
-
-    modelTopClick (item, index) {
-
-    },
-    // 摘除已选择的module
-    modulesDiff (data) {
-      this.modules = this.allModules
-      if (getTopology(this.topologyIndex).data.pens) {
-        getTopology(this.topologyIndex).data.pens.forEach(item => {
-          if (item.type == 0) {
-            this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
-          }
-        })
-      }
-      if (data && data.data && data.data.moduleId) {
-        this.modules.unshift({ id: data.data.moduleId, name: data.data.moduleName })
-      }
-    },
-
-    // 显示module的工具
-    showNodeTools (index, pen) {
-      this.nodesArr.forEach((item, i) => {
-        item.data.show = i === index
-      })
-    },
-
-    // 具体内容点击
-    nodeTools (node, tool) {
-      this.moduleId = node.data.moduleId
-      if (tool.id === 'total') {
-        this.popDataShowUpdate('', false, node)
-        return
-      }
-      setTimeout(() => {
-        this.popDataShowUpdate(tool.id, false, node)
-      }, 100)
-    },
-
-    popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏
-      this.popDataShow = {
-        endpoint: false,
-        asset: false,
-        total: false,
-        other: false,
-        info: false,
-        alert: false,
-        main: false
-      }
-      if (key === 'total') {
-        this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) }
-      }
-      this.$nextTick(() => {
-        this.popDataShow[key] = true
-      })
-      if (flag) { // 处理关闭后 缩放后显示工具按钮的问题
-        this.moduleId = ''
-        this.showNodeTools('')
-      }
-      if (key === 'asset' || key === 'alert' || key === 'endpoint') {
-        this.showNodeTools('')
-      }
-    },
-
-    /* topology 方法 */
-    onDrag (event, node) {
-      this.dragFlag = false
-      setTimeout(() => {
-        this.dragFlag = true
-      }, 100)
-      event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
-    },
-    dragFlagChange (node) {
-      getTopology(this.topologyIndex).addNode(
-        {
-          ...node.data,
-          rect: {
-            ...node.data.rect,
-            x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
-            y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50
-          },
-          data: { imageId: node.data.imageId }
-        })
-      setTimeout(() => {
-        this.dragFlag = true
-      }, 100)
-    },
-
-    onMessage (event, data, e) {
-      // console.log('onMessage', event, data)
-      // console.log(getTopology(this.topologyIndex))
-      // this.notModuleIDArr=[];
-      this.toolShow.attr = false
-      this.toolShow.topTool = false
-      this.$nextTick(() => {
-        this.toolShow.attr = true
-        this.toolShow.topTool = true
-      })
-      if (data) {
-        this.notModuleIDArr.forEach(item => {
-          if (item.id === data.id) {
-            item.rect = data.rect
-          }
-        })
-      }
-      if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
-        if (data.type === 0 && !data.data.moduleId) {
-          data.data = {
-            ...data.data,
-            moduleId: '',
-            moduleName: '',
-            show: false,
-            error: false,
-            animatePlay: false,
-            fillStyle: data.fillStyle,
-            strokeStyle: data.strokeStyle,
-            gradientColor: '#bae7ff',
-            gradientType: 0,
-            lineWidth: this.nodeDefaultWidth(data.name),
-            iconToolState: true,
-            // chart 配置项
-            valueMapping: [{
-              color: {
-                line: '#000000',
-                fill: '#ffffff',
-                text: '#000000'
-              },
-              value: 'base',
-              animateType: 'base',
-              level: 0,
-              base: true
-            }],
-            valueMappingSort: 'asc',
-            expressArr: [''],
-            legends: [''],
-            tooltipShow: true,
-            panelName: 'topologyName',
-            unit: 2,
-            type: 'line',
-            displayChart: true,
-            aggregation: 'last',
-            title: '',
-            url: ''
-          }
-        } else if (data.type == 1 && !data.data) {
-          // 连线是否自动计算锚点
-          // data.manualCps=true;
-          data.animateColor = '#FA901C'
-          data.data = {
-            animatePlay: false,
-            strokeStyle: data.strokeStyle,
-            animateColor: data.animateColor,
-            arrowColor: '#000000',
-            fromArrowColor: '#000000',
-            toArrowColor: '#000000',
-            lineWidth: 1,
-            // chart 配置项
-            valueMapping: [{
-              color: {
-                line: '#000000',
-                fill: '#ffffff',
-                text: '#000000'
-              },
-              value: 'base',
-              animateType: 'base',
-              level: 0,
-              base: true
-            }],
-            valueMappingSort: 'asc', /* desc */
-            expressArr: [''],
-            legends: [''],
-            tooltipShow: true,
-            panelName: 'topologyName',
-            unit: 2,
-            type: 'line',
-            displayChart: true,
-            aggregation: 'last',
-            title: '',
-            moduleName: '',
-            url: ''
-          }
-        }
-        if (data.type === 0 || data.type === 1) {
-          data.lineWidth = data.data.lineWidth
-        }
-      }
-
-      switch (event) {
-        case 'moveInNode':
-        case 'moveInLine':
-          if (this.timer3) {
-            clearTimeout(this.timer3)
-            this.timer3 = null
-          }
-          this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
-          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
-            this.tooltipPosition.left = ePosition.layerX + 20
-            this.tooltipPosition.top = ePosition.layerY
-            this.$nextTick(() => {
-              if (this.$refs.topoTooltip) {
-                if ((boxWidth / 2) > ePosition.layerX) {
-                  this.tooltipPosition.left = ePosition.layerX + 20
-                } else {
-                  this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
-                }
-                if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
-                  this.tooltipPosition.top = ePosition.layerY
-                } else {
-                  this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
-                }
-              }
-            })
-          }, 100)
-          break
-        case 'moveOutNode':
-        case 'moveOutLine':
-          // this.tooltipPosition.show=false;
-          // return
-          if (!this.timer3) {
-            this.timer3 = setTimeout(() => {
-              this.tooltipPosition.show = false
-              this.timer3 = null
-            }, 50)
-          } else {
-            clearTimeout(this.timer3)
-            this.timer3 = setTimeout(() => {
-              this.tooltipPosition.show = false
-              this.timer3 = null
-            }, 50)
-          }
-          break
-      }
-      // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
-      setTimeout(() => {
-        switch (event) {
-          case 'node':
-          case 'addNode':
-            this.modulesDiff(data)
-            if (data.data.expressArr.length === 0 && event !== 'node') {
-              data.data.expressArr.push('')
-              data.data.legends.push('')
-            }
-            this.props = {
-              node: data,
-              line: null,
-              multi: false,
-              expand: this.props.expand,
-              nodes: null,
-              locked: data.locked,
-              pen: data,
-              pens: null
-            }
-            this.$nextTick(() => {
-              if (this.$refs.CanvasProps) {
-                if (this.penId !== data.id) {
-                  this.$refs.CanvasProps.tab = '1'
-                }
-                this.penId = data.id
-              }
-            })
-            break
-          case 'line':
-          case 'addLine':
-            this.props = {
-              node: null,
-              line: data,
-              multi: false,
-              nodes: null,
-              locked: data.locked,
-              pen: data,
-              pens: null
-            }
-            this.$nextTick(() => {
-              if (this.$refs.CanvasProps) {
-                if (this.penId !== data.id) {
-                  this.$refs.CanvasProps.tab = '1'
-                }
-                this.penId = data.id
-              }
-            })
-            break
-          case 'multi':
-            this.props = {
-              node: null,
-              line: null,
-              multi: true,
-              nodes: data.length > 1 ? data : null,
-              locked: this.getLocked({ nodes: data }),
-              pen: null,
-              pens: data.length > 1 ? data : null
-            }
-            break
-          case 'space':
-            this.penId = undefined
-            this.props = {
-              node: null,
-              line: null,
-              multi: false,
-              nodes: null,
-              locked: false,
-              pen: null,
-              pens: null
-            }
-            break
-          case 'moveOut':
-            break
-          case 'moveNodes':
-          case 'resizeNodes':
-            if (data.length > 1) {
+              })
+              break
+            case 'multi':
               this.props = {
                 node: null,
                 line: null,
                 multi: true,
-                nodes: data,
+                nodes: data.length > 1 ? data : null,
                 locked: this.getLocked({ nodes: data }),
                 pen: null,
-                pens: null
+                pens: data.length > 1 ? data : null
               }
-            } else {
+              break
+            case 'space':
+              this.penId = undefined
               this.props = {
-                node: data[0],
+                node: null,
                 line: null,
                 multi: false,
                 nodes: null,
                 locked: false,
-                pen: data[0],
+                pen: null,
                 pens: null
               }
-            }
-            break
-          case 'resize': {
-            const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
-            if (getTopology(this.topologyIndex)) {
-              getTopology(this.topologyIndex).canvasPos = domRect
-            }
-            break
-          }
-          case 'scale': {
-            if (this.$refs.topTool) {
-              this.$refs.topTool.scaleNum = parseInt(data * 100)
-            }
-            break
-          }
-          case 'locked': {
-            this.props = {
-              node: null,
-              line: null,
-              multi: false,
-              nodes: null,
-              locked: false,
-              pen: null,
-              pens: null
-            }
-            break
-          }
-          case 'delete': {
-            this.props = {
-              node: null,
-              line: null,
-              multi: false,
-              nodes: null,
-              locked: false,
-              pen: null,
-              pens: null
-            }
-            break
-          }
-        }
-        switch (event) {
-          case 'node':
-          case 'line':
-          case 'space':
-          case 'scale':
-          case 'translate':
-            this.moduleId = ''
-            this.showNodeTools('')
-            this.popDataShowUpdate('', false)
-            if (!this.editTopologyFlag) {
-              getTopology(this.topologyIndex)
-            }
-            break
-        }
-        switch (event) {
-          case 'space':
-          case 'scale':
-          case 'translate':
-            this.getNodesArr()
-            // if(!this.timer2){
-            //   this.timer2=setTimeout(()=>{
-            //     this.getNodesArr();
-            //     this.timer2=null
-            //   },300)
-            // }else{
-            //   clearTimeout(this.timer2);
-            //   this.timer2=setTimeout(()=>{
-            //     this.getNodesArr();
-            //     this.timer2=null
-            //   },300)
-            // }
-            break
-        }
-      }, 0)
-    },
-
-    getLocked (data) {
-      let locked = true
-      if (data.nodes && data.nodes.length) {
-        for (const item of data.nodes) {
-          if (!item.locked) {
-            locked = false
-            break
-          }
-        }
-      }
-      if (locked && data.lines) {
-        for (const item of data.lines) {
-          if (!item.locked) {
-            locked = false
-            break
-          }
-        }
-      }
-
-      return locked
-    },
-
-    onUpdateProps (node) {
-      // 如果是node属性改变，需要传入node，重新计算node相关属性值
-      // 如果是line属性改变，无需传参
-      getTopology(this.topologyIndex).updateProps(node)
-    },
-
-    handleAvatarSuccess () {
-
-    },
-    beforeAvatarUpload (file, fileList) {
-      const this_ = this
-      const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
-
-      if (!isJPG) {
-        this.$message.error(this_.$t('project.topology.imgFormat'))
-        return false
-      }
-      // if (!isLt2M) {
-      //   this.$message.error( this_.$t('project.topology.imgSize'));
-      //   return false;
-      // }
-      const isSize = new Promise(function (resolve, reject) {
-        const width = 100
-        const height = 100
-        const _URL = window.URL || window.webkitURL
-        const img = new Image()
-        img.onload = function () {
-          const valid = img.width > width && img.height > height
-          valid ? resolve() : reject()
-        }
-        img.src = _URL.createObjectURL(file.raw)
-      }).then(() => {
-        if (isJPG) {
-          this.file = file.raw
-        }
-        return file.raw
-      }, () => {
-        this.$message.error(this_.$t('project.topology.imgMeasure'))
-        return Promise.reject()
-      })
-      return false
-    },
-
-    toolShowChange (attr) {
-      this.toolShow[attr] = !this.toolShow[attr]
-    },
-    /* topology 方法 */
-    end (v) {
-
-    },
-    /* tools 方法 */
-
-    imgUpload () {
-      const this_ = this
-      if (!this.uploadPic.unit) {
-        this.$message({
-          message: this_.$t('project.topology.unitError'),
-          type: 'error'
-        })
-        return
-      }
-      if (!this.file) {
-        this.$message({
-          message: this_.$t('project.topology.imgError'),
-          type: 'error'
-        })
-        return
-      }
-      this.upload()
-    },
-    upload () {
-      const form = new FormData()
-      form.append('file', this.file)
-      if (this.uploadPic.name) {
-        form.append('name', this.uploadPic.name)
-      } else {
-        form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
-      }
-      form.append('unit', this.uploadPic.unit)
-      this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-          this.uploadPicShow = false
-          this.dealImg(`monitor/project/topo/icon/${res.data.id}`).then((data) => {
-            const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
-            if (group) {
-              group.children.push({
-                ...imageTemp,
-                data: {
-                  ...imageTemp.data,
-                  text: res.data.imageName,
-                  image: data,
-                  imageId: res.data.id,
-                  unit: this.uploadPic.unit
+              break
+            case 'moveOut':
+              break
+            case 'moveNodes':
+            case 'resizeNodes':
+              if (data.length > 1) {
+                this.props = {
+                  node: null,
+                  line: null,
+                  multi: true,
+                  nodes: data,
+                  locked: this.getLocked({ nodes: data }),
+                  pen: null,
+                  pens: null
                 }
-              })
-            } else {
-              this.tools.push({
-                group: this.uploadPic.unit,
-                children: [{
+              } else {
+                this.props = {
+                  node: data[0],
+                  line: null,
+                  multi: false,
+                  nodes: null,
+                  locked: false,
+                  pen: data[0],
+                  pens: null
+                }
+              }
+              break
+            case 'resize': {
+              const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+              if (getTopology(this.topologyIndex)) {
+                getTopology(this.topologyIndex).canvasPos = domRect
+              }
+              break
+            }
+            case 'scale': {
+              if (this.$refs.topTool) {
+                this.$refs.topTool.scaleNum = parseInt(data * 100)
+              }
+              break
+            }
+            case 'locked': {
+              this.props = {
+                node: null,
+                line: null,
+                multi: false,
+                nodes: null,
+                locked: false,
+                pen: null,
+                pens: null
+              }
+              break
+            }
+            case 'delete': {
+              this.props = {
+                node: null,
+                line: null,
+                multi: false,
+                nodes: null,
+                locked: false,
+                pen: null,
+                pens: null
+              }
+              break
+            }
+          }
+          switch (event) {
+            case 'node':
+            case 'line':
+            case 'space':
+            case 'scale':
+            case 'translate':
+              this.moduleId = ''
+              this.showNodeTools('')
+              this.popDataShowUpdate('', false)
+              if (!this.editTopologyFlag) {
+                getTopology(this.topologyIndex)
+              }
+              break
+          }
+          switch (event) {
+            case 'space':
+            case 'scale':
+            case 'translate':
+              this.getNodesArr()
+              // if(!this.timer2){
+              //   this.timer2=setTimeout(()=>{
+              //     this.getNodesArr();
+              //     this.timer2=null
+              //   },300)
+              // }else{
+              //   clearTimeout(this.timer2);
+              //   this.timer2=setTimeout(()=>{
+              //     this.getNodesArr();
+              //     this.timer2=null
+              //   },300)
+              // }
+              break
+          }
+        }, 0)
+      },
+
+      getLocked (data) {
+        let locked = true
+        if (data.nodes && data.nodes.length) {
+          for (const item of data.nodes) {
+            if (!item.locked) {
+              locked = false
+              break
+            }
+          }
+        }
+        if (locked && data.lines) {
+          for (const item of data.lines) {
+            if (!item.locked) {
+              locked = false
+              break
+            }
+          }
+        }
+
+        return locked
+      },
+
+      onUpdateProps (node) {
+        // 如果是node属性改变，需要传入node，重新计算node相关属性值
+        // 如果是line属性改变，无需传参
+        getTopology(this.topologyIndex).updateProps(node)
+      },
+
+      handleAvatarSuccess () {
+
+      },
+      beforeAvatarUpload (file, fileList) {
+        const this_ = this
+        const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
+
+        if (!isJPG) {
+          this.$message.error(this_.$t('project.topology.imgFormat'))
+          return false
+        }
+        // if (!isLt2M) {
+        //   this.$message.error( this_.$t('project.topology.imgSize'));
+        //   return false;
+        // }
+        const isSize = new Promise(function (resolve, reject) {
+          const width = 100
+          const height = 100
+          const _URL = window.URL || window.webkitURL
+          const img = new Image()
+          img.onload = function () {
+            const valid = img.width > width && img.height > height
+            valid ? resolve() : reject()
+          }
+          img.src = _URL.createObjectURL(file.raw)
+        }).then(() => {
+          if (isJPG) {
+            this.file = file.raw
+          }
+          return file.raw
+        }, () => {
+          this.$message.error(this_.$t('project.topology.imgMeasure'))
+          return Promise.reject()
+        })
+        return false
+      },
+
+      toolShowChange (attr) {
+        this.toolShow[attr] = !this.toolShow[attr]
+      },
+      /* topology 方法 */
+      end (v) {
+
+      },
+      /* tools 方法 */
+
+      imgUpload () {
+        const this_ = this
+        if (!this.uploadPic.unit) {
+          this.$message({
+            message: this_.$t('project.topology.unitError'),
+            type: 'error'
+          })
+          return
+        }
+        if (!this.file) {
+          this.$message({
+            message: this_.$t('project.topology.imgError'),
+            type: 'error'
+          })
+          return
+        }
+        this.upload()
+      },
+      upload () {
+        const form = new FormData()
+        form.append('file', this.file)
+        if (this.uploadPic.name) {
+          form.append('name', this.uploadPic.name)
+        } else {
+          form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
+        }
+        form.append('unit', this.uploadPic.unit)
+        this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
+          if (res.code == 200) {
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+            this.uploadPicShow = false
+            this.dealImg(`monitor/project/topo/icon/${res.data.id}`).then((data) => {
+              const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
+              if (group) {
+                group.children.push({
                   ...imageTemp,
                   data: {
                     ...imageTemp.data,
@@ -1580,60 +1567,60 @@ export default {
                     imageId: res.data.id,
                     unit: this.uploadPic.unit
                   }
-                }]
-              })
-            }
-          })
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-
-    delImg (item) {
-      this.$delete('monitor/project/topo/icon?ids=' + item.data.imageId).then(res => {
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-          this.addNodeInit()
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-
-    addNodeInit (imgidList) {
-      if (!this.fromOverView) {
-        this.$get('monitor/project/topo/icon').then(res => {
-          this.imgageLoading = true
-          // this.tools[1].children=[];
-          const imgArr = []
-          const promiseArr = []
-          res.data.list.forEach((item, index) => {
-            item.imageName = item.name
-            delete item.name
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}`))
-            imgArr.push({ ...item })
-          })
-          Promise.all(promiseArr).then((res2) => {
-            this.iconArray = [...res.data.list]
-            this.iconArray.forEach((item, index) => {
-              item.image = res2[index]
-              const group = this.tools.find(tool => tool.group === item.unit)
-              if (group) {
-                group.children.push({
-                  ...imageTemp,
-                  data: {
-                    ...imageTemp.data,
-                    text: item.imageName,
-                    image: res2[index],
-                    imageId: item.id,
-                    unit: item.unit
-                  }
                 })
               } else {
                 this.tools.push({
-                  group: item.unit,
+                  group: this.uploadPic.unit,
                   children: [{
+                    ...imageTemp,
+                    data: {
+                      ...imageTemp.data,
+                      text: res.data.imageName,
+                      image: data,
+                      imageId: res.data.id,
+                      unit: this.uploadPic.unit
+                    }
+                  }]
+                })
+              }
+            })
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      },
+
+      delImg (item) {
+        this.$delete('monitor/project/topo/icon?ids=' + item.data.imageId).then(res => {
+          if (res.code == 200) {
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.addNodeInit()
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      },
+
+      addNodeInit (imgidList) {
+        if (!this.fromOverView) {
+          this.$get('monitor/project/topo/icon').then(res => {
+            this.imgageLoading = true
+            // this.tools[1].children=[];
+            const imgArr = []
+            const promiseArr = []
+            res.data.list.forEach((item, index) => {
+              item.imageName = item.name
+              delete item.name
+              promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}`))
+              imgArr.push({ ...item })
+            })
+            Promise.all(promiseArr).then((res2) => {
+              this.iconArray = [...res.data.list]
+              this.iconArray.forEach((item, index) => {
+                item.image = res2[index]
+                const group = this.tools.find(tool => tool.group === item.unit)
+                if (group) {
+                  group.children.push({
                     ...imageTemp,
                     data: {
                       ...imageTemp.data,
@@ -1642,390 +1629,403 @@ export default {
                       imageId: item.id,
                       unit: item.unit
                     }
-                  }]
-                })
+                  })
+                } else {
+                  this.tools.push({
+                    group: item.unit,
+                    children: [{
+                      ...imageTemp,
+                      data: {
+                        ...imageTemp.data,
+                        text: item.imageName,
+                        image: res2[index],
+                        imageId: item.id,
+                        unit: item.unit
+                      }
+                    }]
+                  })
+                }
+              })
+
+              this.imgInit = true
+            })
+          })
+        } else {
+          this.imgageLoading = true
+          const promiseArr = []
+          imgidList.forEach((item, index) => {
+            if (item.data.imageId) {
+              promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}`))
+            } else {
+              promiseArr.push('')
+            }
+          })
+          Promise.all(promiseArr).then(res2 => {
+            this.iconArray = imgidList.map(item => {
+              return {
+                id: item.data.imageId
+              }
+            })
+            this.iconArray.forEach((item, index) => {
+              if (item.id) {
+                item.image = res2[index]
               }
             })
-
             this.imgInit = true
           })
-        })
-      } else {
-        this.imgageLoading = true
-        const promiseArr = []
-        imgidList.forEach((item, index) => {
-          if (item.data.imageId) {
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}`))
-          } else {
-            promiseArr.push('')
-          }
-        })
-        Promise.all(promiseArr).then(res2 => {
-          this.iconArray = imgidList.map(item => {
-            return {
-              id: item.data.imageId
-            }
-          })
-          this.iconArray.forEach((item, index) => {
-            if (item.id) {
-              item.image = res2[index]
-            }
-          })
-          this.imgInit = true
-        })
-      }
-    },
-
-    dealImg (url) {
-      // 处理后端传过来的图片流乱码问题
-      if (url) {
-        return new Promise((resolve, reject) => {
-          this.$axios
-            .get(url, {
-              responseType: 'arraybuffer'
-            })
-            .then(res => {
-              return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
-            })
-            .then(data => {
-              resolve(data)
-              // changeImage(data,(img)=>{
-              //   resolve(img)
-              // })
-            })
-            .catch(err => {
-            })
-        })
-      }
-    },
-
-    delPen (obj) { // 删除元素
-      getTopology(this.topologyIndex).delete(obj)
-      this.props = {
-        node: null,
-        line: null,
-        multi: false,
-        nodes: null,
-        locked: false,
-        pen: null,
-        pens: null
-      }
-    },
-
-    editTopology (val) {
-      this.editTopologyFlag = true
-      this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
-      this.$store.commit('setShowTopoScreen', true)
-      setTimeout(() => {
-        getTopology(this.topologyIndex).lock(0)
-        getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
-          if (item.animatePlay) {
-            item.stopAnimate()
-          }
-          if (!item.data.expressArr.length) {
-            item.data.expressArr = ['']
-            item.data.legends = ['']
-          }
-          item.animateType = item.data.animateType
-          if (item.type === 0) {
-            item.fillStyle = item.data.fillStyle
-            item.strokeStyle = item.data.strokeStyle
-            item.animatePlay = false
-            item.fontColor = '#000000'
-            item.gradientType = item.data.gradientType ? item.data.gradientType : 0
-            if (!item.data.gradientColor) {
-              item.data.gradientType = 0
-              item.data.gradientColor = '#bae7ff'
-            }
-            if (item.data.gradientType === 0) {
-              item.bkType = 0
-            } else {
-              item.bkType = 1
-            }
-          } else if (item.type === 1) {
-            item.animateColor = item.data.animateColor
-            item.strokeStyle = item.data.strokeStyle
-            item.arrowColor = item.data.arrowColor
-            item.fromArrowColor = item.data.arrowColor
-            item.toArrowColor = item.data.arrowColor
-            item.animatePlay = false
-            item.fontColor = '#000000'
-          }
-        })
-        getTopology(this.topologyIndex).caches = {
-          index: 0,
-          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
         }
-      })
-    },
+      },
 
-    animateCanvas () {
-      getTopology(this.topologyIndex).render()
-      getTopology(this.topologyIndex).animate()
-    },
+      dealImg (url) {
+        // 处理后端传过来的图片流乱码问题
+        if (url) {
+          return new Promise((resolve, reject) => {
+            this.$axios
+              .get(url, {
+                responseType: 'arraybuffer'
+              })
+              .then(res => {
+                return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
+              })
+              .then(data => {
+                resolve(data)
+                // changeImage(data,(img)=>{
+                //   resolve(img)
+                // })
+              })
+              .catch(err => {
+              })
+          })
+        }
+      },
 
-    refreshTopology () {
-      // canvas.open()
-    },
+      delPen (obj) { // 删除元素
+        getTopology(this.topologyIndex).delete(obj)
+        this.props = {
+          node: null,
+          line: null,
+          multi: false,
+          nodes: null,
+          locked: false,
+          pen: null,
+          pens: null
+        }
+      },
 
-    dropdownClick () {
-
-    },
-
-    changeTopologyOpt (val, key) {
-      // this.topologyData.data[key]=this.colorRGBtoHex(val);
-      // getTopology(this.index).data[key]=val;
-      // getTopology(this.index).render();
-      const dataOption = getTopology(this.topologyIndex).data
-      dataOption[key] = this.lineName
-      getTopology(this.topologyIndex).render()
-    },
-    notModuleIDArrChange (id) {
-      this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
-    },
-    // 保存
-    saveTopology () {
-      const topologyData = getTopology(this.topologyIndex).pureData()
-      let flag = true
-      const arr = []
-      this.notModuleIDArr = []
-      topologyData.pens.forEach(item => {
-        if (item.type === 0 && ((!item.data) || (item.data && !item.data.moduleId))) {
-          arr.push(item)
-          this.props = {
-            node: null,
-            line: null,
-            multi: false,
-            nodes: null,
-            locked: false,
-            pen: null,
-            pens: null
+      editTopology (val) {
+        this.editTopologyFlag = true
+        this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
+        this.$store.commit('setShowTopoScreen', true)
+        setTimeout(() => {
+          getTopology(this.topologyIndex).lock(0)
+          getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
+            if (item.animatePlay) {
+              item.stopAnimate()
+            }
+            if (!item.data.expressArr.length) {
+              item.data.expressArr = ['']
+              item.data.legends = ['']
+            }
+            item.animateType = item.data.animateType
+            if (item.type === 0) {
+              item.fillStyle = item.data.fillStyle
+              item.strokeStyle = item.data.strokeStyle
+              item.animatePlay = false
+              item.fontColor = '#000000'
+              item.gradientType = item.data.gradientType ? item.data.gradientType : 0
+              if (!item.data.gradientColor) {
+                item.data.gradientType = 0
+                item.data.gradientColor = '#bae7ff'
+              }
+              if (item.data.gradientType === 0) {
+                item.bkType = 0
+              } else {
+                item.bkType = 1
+              }
+            } else if (item.type === 1) {
+              item.animateColor = item.data.animateColor
+              item.strokeStyle = item.data.strokeStyle
+              item.arrowColor = item.data.arrowColor
+              item.fromArrowColor = item.data.arrowColor
+              item.toArrowColor = item.data.arrowColor
+              item.animatePlay = false
+              item.fontColor = '#000000'
+            }
+          })
+          getTopology(this.topologyIndex).caches = {
+            index: 0,
+            list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
           }
+        })
+      },
+
+      animateCanvas () {
+        getTopology(this.topologyIndex).render()
+        getTopology(this.topologyIndex).animate()
+      },
+
+      refreshTopology () {
+        // canvas.open()
+      },
+
+      dropdownClick () {
+
+      },
+
+      changeTopologyOpt (val, key) {
+        // this.topologyData.data[key]=this.colorRGBtoHex(val);
+        // getTopology(this.index).data[key]=val;
+        // getTopology(this.index).render();
+        const dataOption = getTopology(this.topologyIndex).data
+        dataOption[key] = this.lineName
+        getTopology(this.topologyIndex).render()
+      },
+      notModuleIDArrChange (id) {
+        this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
+      },
+      // 保存
+      saveTopology () {
+        const topologyData = getTopology(this.topologyIndex).pureData()
+        let flag = true
+        const arr = []
+        this.notModuleIDArr = []
+        topologyData.pens.forEach(item => {
+          if (item.type === 0 && ((!item.data) || (item.data && !item.data.moduleId))) {
+            arr.push(item)
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            flag = false
+          }
+        })
+        if (!flag) {
+          this.notModuleIDArr = arr
+        }
+        if (flag) {
+          this.editTopologyFlag = false
+          topologyData.rule = false
+          topologyData.grid = false
+          topologyData.gridSize = 10
+          topologyData.pens.forEach(item => {
+            item.animatePlay = item.data.animatePlay
+            item.data.animateType = item.animateType
+            if (item.type === 0 && JSON.stringify(item.data.imageId)) {
+              item.image = ''
+              item.animateFrames = []
+              item.animateReady = null
+              delete item.img
+              delete item.lastImage
+            }
+            item.data.expressArr = item.data.expressArr.filter((expression, i) => {
+              if (!expression) {
+                item.data.legends.splice(i, 1)
+                return false
+              } else {
+                return true
+              }
+            })
+          })
+          if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
+            getTopology(this.topologyIndex).data.scale = this.oldScale
+          }
+          this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
+            this.prevent_opt.save = false
+            if (res.code === 200) {
+              this.$message({
+                message: this.$t('tip.saveSuccess'),
+                type: 'success'
+              })
+              this.$store.commit('setShowTopoScreen', this.topoScreenState)
+              this.$nextTick(() => {
+                getTopology(this.topologyIndex).lock(1)
+                const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+                getTopology(this.topologyIndex).canvasPos = domRect
+                this.reload()
+              })
+            }
+          }).catch(res => {
+            this.prevent_opt.save = false
+            this.$message({
+              message: res.msg,
+              type: 'error'
+            })
+          })
+        } else {
+          this.$message({
+            showClose: true,
+            message: this.$t('project.topology.selMod'),
+            type: 'warning'
+          })
+        }
+      },
+      // 取消
+      cancelTopology () {
+        this.editTopologyFlag = false
+        this.$nextTick(() => {
+          getTopology(this.topologyIndex).lock(1)
+          const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+          getTopology(this.topologyIndex).canvasPos = domRect
+          this.$store.commit('setShowTopoScreen', this.topoScreenState)
+        })
+        this.reload()
+      },
+      // 预览
+      previewTopology () {
+        const data = JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))
+        data.pens.forEach((item) => {
+          item.animatePlay = item.data.animatePlay
+        })
+        this.topoPrevData = JSON.parse(JSON.stringify(data))
+        this.topoPrevData.rule = false
+        this.topoPrevData.grid = false
+        this.previewShow = true
+      },
+
+      // 联动 project
+      changeProjectTitle () {
+        const data = getTopology(this.topologyIndex).data
+        this.topologyInfo = {
+          fontSize: data.data.fontSize,
+          align: data.data.align,
+          fontColor: data.data.fontColor,
+          opacity: data.data.opacity,
+          name: data.name
+        }
+      },
+      /* tools 方法 */
+
+      winResize () {
+        setTimeout(() => {
+          const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
+          getTopology(this.topologyIndex).canvasPos = domRect
+          if (this.fromOverView) {
+            getTopology(this.topologyIndex).open(this.oldTopologyData)
+          }
+          let flag = false
+
+          const position = {
+            x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
+            y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
+          }
+          getTopology(this.topologyIndex).data.pens.forEach(item => {
+            if (flag) {
+              return
+            }
+            if (item.rect.ex > position.x || item.rect.ey > position.y) {
+              getTopology(this.topologyIndex).fitView(20)
+              flag = true
+            }
+          })
+          getTopology(this.topologyIndex).centerView(20)
+          this.getNodesArr()
+        }, 100)
+      },
+      canvasMove (e) { // 画布上的移动 确定tooltip的位置
+        if (this.tooltipPosition.show) {
+          return
+        }
+        window.ePosition = e
+      },
+      tooltipOver () {
+        clearTimeout(this.timer3)
+        this.timer3 = null
+      },
+      tooltipOut () {
+        this.timer3 = setTimeout(() => {
+          this.tooltipPosition.show = false
+          this.timer3 = null
+        }, 50)
+      },
+      nodeDefaultWidth (nodeName) {
+        switch (nodeName) {
+          case 'myCube':
+          case 'rectangleImg':
+            return 0
+          default:
+            return 1
+        }
+      },
+      previewBeforeClose (done) {
+        this.$emit('changeTopologyIndexF')
+        done()
+      },
+      selpopIs (pen, state) { // 判断是否有图表
+        let flag = true
+        if (state.id === 'other') {
           flag = false
         }
-      })
-      if (!flag) {
-        this.notModuleIDArr = arr
-      }
-      if (flag) {
-        this.editTopologyFlag = false
-        topologyData.rule = false
-        topologyData.grid = false
-        topologyData.gridSize = 10
-        topologyData.pens.forEach(item => {
-          item.animatePlay = item.data.animatePlay
-          item.data.animateType = item.animateType
-          if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-            item.image = ''
-            item.animateFrames = []
-            item.animateReady = null
-            delete item.img
-            delete item.lastImage
-          }
-          item.data.expressArr = item.data.expressArr.filter((expression, i) => {
-            if (!expression) {
-              item.data.legends.splice(i, 1)
-              return false
-            } else {
-              return true
-            }
-          })
-        })
-        if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
-          getTopology(this.topologyIndex).data.scale = this.oldScale
+        if (state.id === 'total' && pen.data.expressArr.length === 0) {
+          flag = false
         }
-        this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
-          this.prevent_opt.save = false
-          if (res.code === 200) {
-            this.$message({
-              message: this.$t('tip.saveSuccess'),
-              type: 'success'
-            })
-            this.$store.commit('setShowTopoScreen', this.topoScreenState)
-            this.$nextTick(() => {
-              getTopology(this.topologyIndex).lock(1)
-              const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
-              getTopology(this.topologyIndex).canvasPos = domRect
-              this.reload()
+        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
+      },
+      querySearch (queryString, cb) {
+        const restaurants = this.unitArr
+        const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+        // 调用 callback 返回建议列表的数据
+        cb(results)
+      },
+      createFilter (queryString) {
+        return (restaurant) => {
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+        }
+      },
+      uploadPicChange () {
+        this.unitArr = []
+        this.tools.forEach((item, index) => {
+          if (index > 0) {
+            this.unitArr.push({
+              value: item.group
             })
           }
-        }).catch(res => {
-          this.prevent_opt.save = false
-          this.$message({
-            message: res.msg,
-            type: 'error'
-          })
-        })
-      } else {
-        this.$message({
-          showClose: true,
-          message: this.$t('project.topology.selMod'),
-          type: 'warning'
         })
+        this.uploadPic.name = ''
+        this.uploadPic.unit = ''
+        this.file = null
+        this.uploadPicShow = true
+      },
+      zoomMap (num) {
+        getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
+      },
+      penToBottom () {
+        getTopology(this.topologyIndex).bottom()
+      },
+      changeScreen () {
+        this.$store.commit('setShowTopoScreen', !this.topoScreen)
       }
     },
-    // 取消
-    cancelTopology () {
-      this.editTopologyFlag = false
-      this.$nextTick(() => {
-        getTopology(this.topologyIndex).lock(1)
-        const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
-        getTopology(this.topologyIndex).canvasPos = domRect
-        this.$store.commit('setShowTopoScreen', this.topoScreenState)
-      })
-      this.reload()
-    },
-    // 预览
-    previewTopology () {
-      const data = JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))
-      data.pens.forEach((item) => {
-        item.animatePlay = item.data.animatePlay
-      })
-      this.topoPrevData = JSON.parse(JSON.stringify(data))
-      this.topoPrevData.rule = false
-      this.topoPrevData.grid = false
-      this.previewShow = true
-    },
-
-    // 联动 project
-    changeProjectTitle () {
-      const data = getTopology(this.topologyIndex).data
-      this.topologyInfo = {
-        fontSize: data.data.fontSize,
-        align: data.data.align,
-        fontColor: data.data.fontColor,
-        opacity: data.data.opacity,
-        name: data.name
+    destroyed () {
+      if (getTopology(this.topologyIndex)) {
+        getTopology(this.topologyIndex).destroy()
+        setTopology(this.topologyIndex, null)
       }
-    },
-    /* tools 方法 */
-
-    winResize () {
-      setTimeout(() => {
-        const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
-        getTopology(this.topologyIndex).canvasPos = domRect
-        if (this.fromOverView) {
-          getTopology(this.topologyIndex).open(this.oldTopologyData)
-        }
-        let flag = false
-
-        const position = {
-          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
-          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
-        }
-        getTopology(this.topologyIndex).data.pens.forEach(item => {
-          if (flag) {
-            return
-          }
-          if (item.rect.ex > position.x || item.rect.ey > position.y) {
-            getTopology(this.topologyIndex).fitView(20)
-            flag = true
-          }
-        })
-        getTopology(this.topologyIndex).centerView(20)
-        this.getNodesArr()
-      }, 100)
-    },
-    canvasMove (e) { // 画布上的移动 确定tooltip的位置
-      if (this.tooltipPosition.show) {
-        return
+      if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
+        document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
       }
-      window.ePosition = e
-    },
-    tooltipOver () {
-      clearTimeout(this.timer3)
-      this.timer3 = null
-    },
-    tooltipOut () {
-      this.timer3 = setTimeout(() => {
-        this.tooltipPosition.show = false
-        this.timer3 = null
-      }, 50)
-    },
-    nodeDefaultWidth (nodeName) {
-      switch (nodeName) {
-        case 'myCube':
-        case 'rectangleImg':
-          return 0
-        default:
-          return 1
-      }
-    },
-    previewBeforeClose (done) {
-      this.$emit('changeTopologyIndexF')
-      done()
-    },
-    selpopIs (pen, state) { // 判断是否有图表
-      let flag = true
-      if (state.id === 'other') {
-        flag = false
-      }
-      if (state.id === 'total' && pen.data.expressArr.length === 0) {
-        flag = false
-      }
-      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
-    },
-    querySearch (queryString, cb) {
-      const restaurants = this.unitArr
-      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
-      // 调用 callback 返回建议列表的数据
-      cb(results)
-    },
-    createFilter (queryString) {
-      return (restaurant) => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
-      }
-    },
-    uploadPicChange () {
-      this.unitArr = []
-      this.tools.forEach((item, index) => {
-        if (index > 0) {
-          this.unitArr.push({
-            value: item.group
-          })
-        }
-      })
-      this.uploadPic.name = ''
-      this.uploadPic.unit = ''
-      this.file = null
-      this.uploadPicShow = true
-    },
-    zoomMap (num) {
-      getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
-    },
-    penToBottom () {
-      getTopology(this.topologyIndex).bottom()
-    },
-    changeScreen () {
-      this.$store.commit('setShowTopoScreen', !this.topoScreen)
+      window.removeEventListener('resize', this.winResize)
     }
-  },
-  destroyed () {
-    if (getTopology(this.topologyIndex)) {
-      getTopology(this.topologyIndex).destroy()
-      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)
   }
-}
 </script>
 <style lang="scss">
   .el-dropdown-menu {
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index fd974ef6c..847c3415b 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -4,9 +4,9 @@
       <!-- begin--标题-->
       <div class="right-box-title">{{$t("overall.createEndpoint")}}</div>
       <!-- end--标题-->
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns"></div>
-      <!-- end--顶部按钮-->
+      <div class="header__operation">
+        <span v-cancel="{obj: object, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
     </div>
 
     <!-- begin--表单-->
@@ -310,50 +310,50 @@ export default {
       assetListHalf: false,
       assetTableTitle: [
         {
-          label: this.$t('asset.tableTitle.name'),
+          label: this.$t('asset.name'),
           prop: 'name',
           show: false,
           allowed: true,
           minWidth: '200'
         },
         {
-          label: this.$t('asset.tableTitle.sn'),
+          label: this.$t('asset.sn'),
           prop: 'sn',
           show: true,
           minWidth: '200'
         },
         {
-          label: this.$t('asset.tableTitle.manageIp'),
+          label: this.$t('asset.manageIp'),
           prop: 'manageIp',
           show: true,
           minWidth: '200'
         }, {
-          label: this.$t('asset.tableTitle.brand'),
+          label: this.$t('asset.brand'),
           prop: 'brand',
           show: true,
           minWidth: '100'
         }, {
-          label: this.$t('asset.tableTitle.model'),
+          label: this.$t('asset.model'),
           prop: 'model',
           show: true,
           minWidth: '100'
         }, {
-          label: this.$t('asset.tableTitle.dc'),
+          label: this.$t('asset.dc'),
           prop: 'dc',
           show: true,
           minWidth: '100'
         }, {
-          label: this.$t('asset.tableTitle.cabinet'),
+          label: this.$t('asset.cabinet'),
           prop: 'cabinet',
           show: true,
           minWidth: '100'
         }, {
-          label: this.$t('asset.tableTitle.type'),
+          label: this.$t('asset.type'),
           prop: 'type',
           show: true,
           minWidth: '100'
         }, {
-          label: this.$t('asset.tableTitle.state'),
+          label: this.$t('asset.state'),
           prop: 'state',
           show: true,
           minWidth: '100'
@@ -371,63 +371,63 @@ export default {
         zheze_none: true,
         searchLabelList: [{
           id: 10,
-          name: this.$t('asset.tableTitle.sn'),
+          name: this.$t('asset.sn'),
           type: 'input',
           label: 'sn',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.name'),
+          name: this.$t('asset.name'),
           type: 'input',
           label: 'name',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.manageIp'),
+          name: this.$t('asset.manageIp'),
           type: 'input',
           label: 'manageIp',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.brand'),
+          name: this.$t('asset.brand'),
           type: 'input',
           label: 'brand',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.model'),
+          name: this.$t('asset.model'),
           type: 'input',
           label: 'model',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.dc'),
+          name: this.$t('asset.dc'),
           type: 'input',
           label: 'dc',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.cabinet'),
+          name: this.$t('asset.cabinet'),
           type: 'input',
           label: 'cabinet',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.type'),
+          name: this.$t('asset.type'),
           type: 'input',
           label: 'type',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.state'),
+          name: this.$t('asset.state'),
           type: 'input',
           label: 'state',
           disabled: false
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
index 03baca0ac..a97a9c253 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
@@ -193,6 +193,7 @@
                        :search-msg="transfer.searchMsg"
                        :table-data="transfer.tableData"
                        style="margin-bottom: 20px;"
+                       :tableTitle="transfer.tableTitle"
                        @leftToRight="addAsset"
                        @rightToLeft="removeAsset">
             <template v-slot:title>Selected</template>
@@ -302,13 +303,25 @@ export default {
               disabled: false
             }, {
               id: 23,
-              name: this.$t('asset.tableTitle.cabinet'),
+              name: this.$t('asset.cabinet'),
               type: 'input',
               label: 'cabinetName',
               disabled: false
             }
           ]
         },
+        tableTitle: [
+          {
+            label: this.$t('overall.name'),
+            prop: 'name',
+            show: true
+          },
+          {
+            label: this.$t('asset.host'),
+            prop: 'host',
+            show: true
+          }
+        ],
         pageObj: {
           pageNo: 1,
           pageSize: 10,
diff --git a/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
index 9940f4a29..e038c9157 100644
--- a/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
@@ -4,9 +4,9 @@
       <!-- begin--标题-->
       <div class="right-box-title">{{$t("overall.batchEndpoint")}}</div>
       <!-- end--标题-->
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns"></div>
-      <!-- end--顶部按钮-->
+      <div class="header__operation">
+        <span v-cancel="{obj: endpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
     </div>
 
     <!-- begin--表单-->
diff --git a/nezha-fronted/src/components/common/rightBox/chartTempBox.vue b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
new file mode 100644
index 000000000..cc939d7e7
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
@@ -0,0 +1,317 @@
+<template>
+  <div v-clickoutside="{obj: editChartTemp, func: esc}" class="right-box right-box-asset">
+    <div class="right-box__header">
+      <div class="header__title">{{editChartTemp.id ? $t('config.user.editChartTemp') : $t('config.user.createUser')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editChartTemp, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="userForm" :model="editChartTemp" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
+          <!--type-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
+            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group" @change="varTypeChange">
+              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
+                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!--chartTemp list-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.pid')" prop="pid">
+            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group" >
+              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
+                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- 选择资产，穿梭框 -->
+          <div class="form__sub-title">{{editChartTemp.varType === 1 ? 'Asset' : 'Endpoint'}}</div>
+          <nz-transfer ref="transfer"
+                       :page-obj="transfer.pageObj"
+                       :search-msg="transfer.searchMsg"
+                       :table-data="transfer.tableData"
+                       style="margin-bottom: 20px;"
+                       :tableTitle="transferTableTitle"
+                       @leftToRight="addAsset"
+                       @search="search"
+                       @rightToLeft="removeAsset">
+            <template v-slot:title>Selected</template>
+          </nz-transfer>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{obj: editChartTemp, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import nzTransfer from '@/components/common/nzTransfer'
+export default {
+  name: 'chartTemp',
+  components: {
+    nzTransfer
+  },
+  props: {
+    obj: {
+      type: Object
+    }
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') == username
+      }
+    }
+  },
+  data () {
+    return {
+      editChartTemp: {},
+      url: 'visual/panel/chart/fromTmpl',
+      rightBox: { model: { show: false } },
+      rules: { // 表单校验规则
+        varType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        pid: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      varTypeArr: [
+        { name: 'Asset', id: 1 },
+        { name: 'Endpoint', id: 2 }
+      ],
+      chartTempArr: [],
+      tableData: [],
+      transfer: {
+        tableData: [],
+        selectedData: [],
+        searchLabel: {},
+        searchMsg: { // 给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [
+            {
+              id: 1,
+              name: 'ID',
+              type: 'input',
+              label: 'id',
+              disabled: false
+            }, {
+              id: 20,
+              name: 'SN',
+              type: 'input',
+              label: 'sn',
+              disabled: false
+            }, {
+              id: 21,
+              name: 'Host',
+              type: 'input',
+              label: 'host',
+              disabled: false
+            }, {
+              id: 22,
+              name: this.$t('asset.state'),
+              type: 'select',
+              label: 'assetState',
+              disabled: false
+            }, {
+              id: 23,
+              name: 'pingStatus',
+              type: 'select',
+              label: 'pingStatus',
+              disabled: false
+            }, {
+              id: 23,
+              name: this.$t('asset.cabinet'),
+              type: 'input',
+              label: 'cabinetName',
+              disabled: false
+            }
+          ]
+        },
+        pageObj: {
+          pageNo: 1,
+          pageSize: 10,
+          pages: 1,
+          total: 0
+        }
+      },
+      transferTableTitle: [
+        {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        },
+        {
+          label: this.$t('asset.host'),
+          prop: 'manageIp',
+          show: true
+        }
+      ]
+    }
+  },
+  watch: {
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.editChartTemp = JSON.parse(JSON.stringify(n))
+      }
+    }
+  },
+  mounted () {
+    this.getChartTempData()
+    this.getTableData()
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      if (!this.transfer.selectedData.length) {
+        this.prevent_opt.save = false
+        if (this.editChartTemp.varType === 1) {
+          this.$message.error(this.$t('dashboard.panel.chartForm.selectAsset'))
+        } else {
+          this.$message.error(this.$t('dashboard.panel.chartForm.selectEndpoint'))
+        }
+        return
+      }
+      this.editChartTemp.varIds = this.transfer.selectedData.map(item => item.id)
+      this.$refs.userForm.validate((valid) => {
+        if (valid) {
+          if (this.editChartTemp.id) {
+            this.$put(this.url, this.editChartTemp).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$emit('on-create-success')
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            this.$post(this.url, this.editChartTemp).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    search (searchLabel, page) {
+      this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
+      this.transfer.pageObj = JSON.parse(JSON.stringify(page))
+      this.getTableData()
+    },
+    addAsset (toAdd) {
+      this.transfer.selectedData = toAdd
+      this.transfer.tableData.forEach(d => {
+        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
+      })
+    },
+    removeAsset (toRemove) {
+      this.transfer.selectedData = this.transfer.selectedData.filter(d => !toRemove.find(s => d.id === s.id))
+      this.transfer.tableData.forEach(d => {
+        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
+      })
+      // dc, brand, model, type
+    },
+    getChartTempData () {
+      this.$get('visual/panel/chart', { pageSize: -1, panelId: 0, returnChildren: 0, varType: this.editChartTemp.varType }).then(response => {
+        if (response.code === 200) {
+          this.chartTempArr = response.data.list
+        }
+      })
+    },
+    getTableData () {
+      if (this.editChartTemp.varType === 1) {
+        this.getAssetData()
+      } else {
+        this.getEndpointData()
+      }
+    },
+    getAssetData () {
+      this.$refs.transfer.startLoading()
+      this.$get('asset/asset', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
+        this.$refs.transfer.endLoading()
+        if (response.code === 200) {
+          this.transfer.tableData = response.data.list
+          this.transfer.pageObj.total = response.data.total
+        }
+      })
+    },
+    getEndpointData () {
+      this.$refs.transfer.startLoading()
+      this.$get('monitor/endpoint', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
+        this.$refs.transfer.endLoading()
+        if (response.code === 200) {
+          this.transfer.tableData = response.data.list
+          this.transfer.pageObj.total = response.data.total
+        }
+      })
+    },
+    varTypeChange () {
+      this.getChartTempData()
+      this.editChartTemp.pid = ''
+      this.transfer.selectedData = []
+      this.$refs.transfer.selectedData = []
+      if (this.editChartTemp.varType === 1) {
+        this.transferTableTitle = [
+          {
+            label: this.$t('overall.name'),
+            prop: 'name',
+            show: true
+          },
+          {
+            label: this.$t('asset.host'),
+            prop: 'manageIp',
+            show: true
+          }
+        ]
+      } else {
+        this.transferTableTitle = [
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true
+          },
+          {
+            label: this.$t('project.endpoint.name'),
+            prop: 'name',
+            show: true
+          }
+        ]
+      }
+      this.getTableData()
+    }
+  }
+}
+</script>
+<style lang="scss">
+  @import '@/assets/css/common/rightBoxCommon.scss';
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index 9b54e8d24..66627e049 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -14,14 +14,9 @@
       </span>
       </div>
       <!-- end--标题-->
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns right-box-form-delete" v-if="optionType === 'edit'">
-        <button v-if="editEndpoint.id" id="module-del" v-has="'monitor_endpoint_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
+      <div class="header__operation">
+        <span v-cancel="{obj: editEndpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
-      <!-- end--顶部按钮-->
     </div>
 
     <!-- begin--表单-->
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 7d7c267b5..50396bf50 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -4,14 +4,9 @@
       <!-- begin--标题-->
       <div class="right-box-title">{{editModule.id ? $t("project.module.editModule") + "  ID：" + editModule.id : $t("project.module.createModule")}}</div>
       <!-- end--标题-->
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns right-box-form-delete">
-        <button v-if="editModule.id" id="module-del" v-has="'monitor_module_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
+      <div class="header__operation">
+        <span v-cancel="{obj: editModule, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
-      <!-- end--顶部按钮-->
     </div>
 
     <!-- begin--表单-->
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index 52af4aa2c..db1fd9839 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -5,14 +5,9 @@
       <div class="right-box-title">{{editProject.id ? $t("project.project.editProject") + "  ID：" + editProject.id : $t("overall.createProject")}}</div>
       <!-- end--标题-->
 
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns right-box-form-delete">
-        <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="project-del" type="button" v-has="'project_delete'" v-if="project.id">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
+      <div class="header__operation">
+        <span v-cancel="{obj: editProject, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
-      <!-- end--顶部按钮-->
 
     </div>
     <div class="right-box-form-box right-box__container">
diff --git a/nezha-fronted/src/components/common/table/nzDataList.vue b/nezha-fronted/src/components/common/table/nzDataList.vue
index 53423e8a4..795f4e1f4 100644
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -6,7 +6,7 @@
       <div class="main-modal"></div>
       <div class="main-container">
         <div v-show="bottomBox.mainResizeShow" class="top-tools">
-          <div class="top-tool-left" style="width: 300px">
+          <div class="top-tool-left" style="min-width: 300px">
             <slot name="top-tool-left"></slot>
           </div>
           <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">
diff --git a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
index a090996d9..14c15a506 100644
--- a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
@@ -34,6 +34,9 @@
       </template>
       <template slot-scope="scope" :column="item">
         <span v-if="item.prop==='varType'">{{scope.row[item.prop]===1?'Asset':'endpoint'}}</span>
+        <span v-else-if="item.prop==='type'" :class="typeIcon(scope.row)">
+        {{chartTypeList.find(title=>title.id == scope.row[item.prop]).name}}
+        </span>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
       </template>
@@ -76,6 +79,10 @@ export default {
           label: this.$t('config.exprTemp.name'),
           prop: 'name',
           show: true
+        }, {
+          label: this.$t('config.exprTemp.type'),
+          prop: 'type',
+          show: true
         }, {
           label: this.$t('config.exprTemp.varType'),
           prop: 'varType',
@@ -85,7 +92,64 @@ export default {
           prop: 'remark',
           show: true
         }
-      ]
+      ],
+      chartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        },
+        {
+          id: 'alertList',
+          name: this.$t('dashboard.panel.chartForm.typeVal.alertList.label')
+        },
+        {
+          id: 'text',
+          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
+        },
+        {
+          id: 'url',
+          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
+        },
+        {
+          id: 'group',
+          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
+        }
+
+      ],
+    }
+  },
+  methods: {
+    typeIcon (row) {
+      let str = 'nz-icon'
+      switch (row.type) {
+        case 'line':
+          str += 'nz-icon-multitext'
+          break
+        default :
+          str += 'nz-icon-multitext'
+          break
+      }
+      return str
     }
   }
 }
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index 3db1251e5..82fc1f27e 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -66,7 +66,22 @@
           </el-tooltip>
         </template>
         <template v-else-if="item.prop === 'state'">
-          {{scope.row[item.prop]}}
+          <el-popover placement="right" trigger="hover" width="200" :popper-class="''" :disabled="scope.row[item.prop]<2">
+            <div>
+              <div v-html="suspendedStr(scope.row[item.prop])"></div>
+            </div>
+            <div slot="reference" style="width: 100px">
+              <div v-if="scope.row[item.prop]===0">
+                <div class="active-icon red inline-block"></div> down
+              </div>
+              <div v-else-if="scope.row[item.prop]===1">
+                <div class="active-icon green inline-block"></div> up
+              </div>
+              <div v-else>
+                <div class="active-icon gray inline-block"></div> suspended
+              </div>
+            </div>
+          </el-popover>
         </template>
         <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
       </template>
@@ -157,6 +172,29 @@ export default {
       const creatDom = document.getElementById('creatDom')
       creatDom.parentNode.removeChild(creatDom)
       this.$message.success(this.$t('overall.copySuccess'))
+    },
+    suspendedStr (status) { // 10进制转为2进制 分别给对应的状态
+      const arr = status.toString(2).split('')
+      while (arr.length < 5) {
+        arr.unshift('0')
+      }
+      arr.pop()
+      let str = ''
+      arr.forEach((item, index) => {
+        if (index === 0) {
+          str += `<div>DC <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+        if (index === 1) {
+          str += `<div>ASSET <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+        if (index === 2) {
+          str += `<div>ENDPOINT <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+        if (index === 3) {
+          str += `<div>PROMETHEUS <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+      })
+      return str
     }
   },
   computed: {}
@@ -190,6 +228,9 @@ export default {
   .endpoint-num, .alert-num{
     cursor: pointer;
   }
+  .inline-block{
+    display: inline-block;
+  }
 </style>
 <style>
   .endpointConfigsTips{
diff --git a/nezha-fronted/src/components/common/table/settings/moduleTable.vue b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
index c8c296478..9547edf49 100644
--- a/nezha-fronted/src/components/common/table/settings/moduleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
@@ -44,7 +44,7 @@
         </template>
         <template v-else-if="item.prop === 'endpointNum'">
           <span class="endpoint-num"  @click="showBottomBox('endpoint', scope.row)">
-             <i class="nz-icon nz-icon-endpoint" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
+             <i class="nz-icon nz-icon-overview-endpoint color969dea"/>
           {{scope.row[item.prop]}}
           </span>
         </template>
@@ -146,6 +146,9 @@ export default {
   .color23BF9A{
     color: #23BF9A;
   }
+  .color969dea{
+    color: #969dea;
+  }
   .endpoint-num, .alert-num{
     cursor: pointer;
   }
diff --git a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
index d140dc2dc..60e84f236 100644
--- a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
@@ -169,10 +169,13 @@ export default {
       }
     },
     getPanelData () { // 获取panel数据
-      this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.panelData = response.data.list
-        }
+      return new Promise((resolve, reject) => {
+        this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.panelData = response.data.list
+            resolve()
+          }
+        })
       })
     },
     handlerTableData (results) {
@@ -462,27 +465,29 @@ export default {
       this.graphShow = false
     },
     saveChart () { // 新增chart
-      const chart = {
-        title: '',
-        type: 'line',
-        span: 12,
-        height: '400',
-        unit: this.chartUnit,
-        param: {
-          url: '',
-          threshold: ''
-        },
-        elements: [],
-        panel: '',
-        sync: 0
-      }
-      for (let i = 0; i < this.batchDeleteObjs.length; i++) {
-        if (this.batchDeleteObjs[i] && this.batchDeleteObjs[i].element !== '') {
-          chart.elements.push({ chartId: '', expression: this.batchDeleteObjs[i].element, type: 'expert' })
+      this.getPanelData().then(()=>{
+        const chart = {
+          title: '',
+          type: 'line',
+          span: 12,
+          height: '400',
+          unit: this.chartUnit,
+          param: {
+            url: '',
+            threshold: ''
+          },
+          elements: [],
+          panel: '',
+          sync: 0
         }
-      }
-      this.chart = chart
-      this.rightBox.show = true
+        for (let i = 0; i < this.batchDeleteObjs.length; i++) {
+          if (this.batchDeleteObjs[i] && this.batchDeleteObjs[i].element !== '') {
+            chart.elements.push({ chartId: '', expression: this.batchDeleteObjs[i].element, type: 'expert' })
+          }
+        }
+        this.chart = chart
+        this.rightBox.show = true
+      })
     },
     createSuccess (type, response, param, panel) {
       this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
@@ -505,7 +510,7 @@ export default {
   computed: {
   },
   created () {
-    this.getPanelData()
+    // this.getPanelData()
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 1cde5cd54..7e7828f2b 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -170,7 +170,7 @@ export default {
           disabled: false
         }, {
           id: 23,
-          name: this.$t('asset.tableTitle.cabinet'),
+          name: this.$t('asset.cabinet'),
           type: 'input',
           label: 'cabinetName',
           disabled: false
diff --git a/nezha-fronted/src/components/page/config/template/chartTemp.vue b/nezha-fronted/src/components/page/config/template/chartTemp.vue
index ab3085349..afcfeec84 100644
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -5,7 +5,7 @@
       :api="url"
       :layout="['searchInput', 'elementSet']"
       :custom-table-title.sync="tools.customTableTitle"
-      :from="fromRoute.expressionTemplate"
+      :from="fromRoute.chartTemp"
       :search-msg="searchMsg">
       <template v-slot:top-tool-left>
         <div id="module-type-1"  class="nz-tab-item-box" @click="clickTab([],'exprTemp')"><!--v-has="'snmp_browser_view'"-->
@@ -142,6 +142,15 @@ export default {
       this.object.panelName = 'template'
       this.rightBox.show = true
     },
+    edit (u) {
+      if (!u.param) {
+        u.param = { url: '', threshold: '' }
+      }
+      this.object = JSON.parse(JSON.stringify(u))
+      this.object.panelId = this.showPanel.id
+      this.object.panelName = this.showPanel.name
+      this.rightBox.show = true
+    },
     getTableData (params) {
       if (params && Object.keys(params).length > 0) {
         for (const key in params) {
@@ -156,6 +165,9 @@ export default {
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + ''
+            if (response.data.list[i].type === 'group') {
+              response.data.list[i].children = []
+            }
           }
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 71f0e4445..ee584312f 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -642,7 +642,7 @@ export default {
       this.panelName = panel.name
       this.panelId = panel.id
       this.editChart.groupId = ''
-      this.$get('visual/panel/chart?panelId=' + this.panelId).then(response => {
+      this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
         if (response.code === 200) {
           this.groupArr = []
           response.data.list.forEach((item, index) => {
@@ -1784,7 +1784,7 @@ export default {
         if (this.showPanel.id || this.from === 'temp') {
           this.panelId = this.showPanel.id
         }
-        this.$get('visual/panel/chart?panelId=' + this.panelId).then(response => {
+        this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
           if (response.code === 200) {
             this.groupArr = []
             response.data.list.forEach((item, index) => {
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index d182c6e0e..c90a8a4a7 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -91,6 +91,7 @@
               </button>
             </template>
           </export-excel>
+          <button id="chart-temp-add" class="top-tool-btn margin-l-10" type="button" @click="addChartByTemp"><i class='nz-icon nz-icon-lock'></i></button>
           <button id="panel-lock" class="top-tool-btn margin-l-10" type="button" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
         </div>
       </template>
@@ -107,6 +108,9 @@
     <transition name="right-box">
       <chart-box :chart="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.chart.show"></chart-box>
     </transition>
+    <transition name="right-box">
+      <chart-temp-box :obj="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartTempBox" @on-create-success="createSuccess" v-if="rightBox.chartTemp.show"></chart-temp-box>
+    </transition>
     <transition name="right-box">
       <panel-box v-if="closePanelBox" :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
     </transition>
@@ -121,6 +125,7 @@ import pickTime from '../../common/pickTime'
 import exportXLSX from '../../common/exportXLSX'
 import selectPanel from '../../common/popBox/selectPanel'
 import panelBox from '@/components/common/rightBox/panelBox'
+import chartTempBox from '@/components/common/rightBox/chartTempBox'
 
 export default {
   name: 'panel',
@@ -131,6 +136,7 @@ export default {
       visible: false,
       rightBox: { // 面板弹出框相关
         chart: { show: false },
+        chartTemp: { show: false },
         panel: { show: false }
       },
       tableHover: false,
@@ -166,6 +172,12 @@ export default {
         pageSize: -1, // 此处获取所有数据，所以设置一个较大的值
         total: 0
       },
+      blankChartTemp: {
+        varType: 1,
+        pid: '',
+        panelId: '',
+        varIds: []
+      },
       chartsData: [], // 中间部分图表相关数据
       panelData: [],
       panelDataDragTmp: [],
@@ -204,7 +216,8 @@ export default {
     'pick-time': pickTime,
     'export-excel': exportXLSX,
     selectPanel,
-    'panel-box': panelBox
+    'panel-box': panelBox,
+    chartTempBox
   },
   methods: {
     // 刷新
@@ -290,6 +303,11 @@ export default {
       this.chart.panelName = this.showPanel.name
       this.rightBox.chart.show = true
     },
+    addChartByTemp () {
+      this.chart = Object.assign({},this.blankChartTemp)
+      this.chart.panelId = this.showPanel.id
+      this.rightBox.chartTemp.show = true
+    },
     addGroupItem (groupId) {
       this.chart = this.newChart()
       this.chart.groupId = groupId
@@ -317,6 +335,12 @@ export default {
 
       } */
     },
+    closeChartTempBox () {
+      this.rightBox.chartTemp.show = false
+      /* if (refresh) {
+
+      } */
+    },
     closePanelBox (refresh) {
       this.rightBox.panel.show = false
       /* if (refresh) {
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 81666cfa8..0a4d8384d 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -9,6 +9,7 @@
       :from="fromRoute.endpoint"
       :layout="['searchInput', 'elementSet']"
       :hasSearch="true"
+      @search="search"
       :search-msg="searchMsg">
       <template v-slot:top-tool-right>
         <export-excel
@@ -44,7 +45,7 @@
           v-loading="slotProps.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
+          :height="searchTableHeight"
           :table-data="tableData"
           :tableId="tableId"
           @del="del"
@@ -126,6 +127,26 @@ export default {
           type: 'input',
           label: 'id',
           disabled: false
+        }, {
+          id: 14,
+          name: this.$t('asset.asset'),
+          type: 'query',
+          label: 'query',
+          disabled: false
+        },{
+          id: 34,
+          name: this.$t('project.project.project'),
+          // name: this.$t('asset.asset'),
+          type: 'input',
+          label: 'projectName',
+          disabled: false
+        }, {
+          id: 35,
+          name: this.$t('project.module.module'),
+          // name: this.$t('asset.asset'),
+          type: 'input',
+          label: 'moduleName',
+          disabled: false
         }]
       },
       roles: [],
@@ -222,17 +243,23 @@ export default {
     getTableData () {
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      const params = {
+        ...this.searchLabel,
+        ...this.searchCheckBox
+      }
       if (this.searchLabel.projectIds) {
         localStorage.setItem('endpointProjectId', this.searchLabel.projectIds)
+        if (params.projectIds) {
+          params.projectIds += ',' + this.searchLabel.projectIds
+        } else {
+          params.projectIds = this.searchLabel.projectIds
+        }
       } else {
         localStorage.removeItem('endpointProjectId')
       }
-      const params = {
-        ...this.searchLabel,
-        ...this.titleSearch
-      }
+      console.log()
       this.tools.loading = true
-      this.$get(this.url, { ...params, ...this.searchCheckBox }).then(response => {
+      this.$get(this.url, params).then(response => {
         this.tools.loading = false
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {
diff --git a/nezha-fronted/src/components/page/monitor/project/project.vue b/nezha-fronted/src/components/page/monitor/project/project.vue
index 489840e78..8e2dbbd65 100644
--- a/nezha-fronted/src/components/page/monitor/project/project.vue
+++ b/nezha-fronted/src/components/page/monitor/project/project.vue
@@ -58,17 +58,13 @@
 </template>
 
 <script>
-import exportXLSX from '@/components/common/exportXLSX'
 import bus from '@/libs/bus'
 import topologyL5 from '@/components/common/project/topologyL5'
-import deleteButton from '@/components/common/deleteButton'
 
 export default {
   name: 'project2',
   components: {
     topologyL5,
-    'export-excel': exportXLSX,
-    'delete-button': deleteButton
   },
   data () {
     return {
@@ -624,7 +620,6 @@ export default {
       this.endpointPageObj.pageSize = pageSize
     }
     this.getUserData()
-    this.getProjectList()
   },
   mounted () {
     // 初始化表头
diff --git a/nezha-fronted/src/components/page/monitor/project/projectList.vue b/nezha-fronted/src/components/page/monitor/project/projectList.vue
index b982d3007..81332b1bd 100644
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -89,10 +89,49 @@ export default {
     }
   },
   methods: {
+    getTableData (params) {
+      if (params && Object.keys(params).length > 0) {
+        for (const key in params) {
+          this.$set(this.searchLabel, key, params[key])
+        }
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            response.data.list[i].status = response.data.list[i].status + ''
+          }
+          if (!this.$store.state.currentProject.id) {
+            this.$store.commit('currentProjectChange', response.data.list[0])
+          }
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    }
   },
   computed: {
   },
+  created () {
+    console.log(this.$store.state.currentProject)
+  },
   mounted () {
+  },
+  destroyed () {
+    this.$store.commit('currentProjectChange', {
+      id: '',
+      name: '',
+      remark: ''
+    })
   }
 }
 </script>
diff --git a/nezha-fronted/src/http.js b/nezha-fronted/src/http.js
index 1f867b1bc..d7db8162a 100644
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -28,7 +28,7 @@ export function get (url, params) {
     axios.get(url, {
       params: params
     }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
@@ -42,7 +42,7 @@ export function get (url, params) {
 export function post (url, params, headers) {
   return new Promise(resolve => {
     axios.post(url, params, { headers: headers }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
@@ -56,7 +56,7 @@ export function post (url, params, headers) {
 export function put (url, params, headers) {
   return new Promise((resolve) => {
     axios.put(url, params, { headers: headers }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
@@ -70,7 +70,7 @@ export function put (url, params, headers) {
 export function del (url, params) {
   return new Promise((resolve) => {
     axios.delete(url, params).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 7c83886a9..65eb044f5 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -55,6 +55,7 @@ Vue.prototype.$chartResizeTool = chartResizeTool
 Vue.prototype.$tableSet = tableSet
 Vue.prototype.$tableHeight = { // 列表页表格的高度
   normal: 'calc(100% - 48px)', // 常规高度，特例在下方定义
+  search: 'calc(100% - 240px)', // 常规高度，特例在下方定义
   openSubList: { // 打开二级列表后的高度
     mainList: 'calc(100% - 60px)',
     subList: 'calc(100% - 38px)',