diff --git a/nezha-fronted/build/build.js b/nezha-fronted/build/build.js
index 8f2ad8ad4..a18b6744d 100644
--- a/nezha-fronted/build/build.js
+++ b/nezha-fronted/build/build.js
@@ -1,7 +1,9 @@
 'use strict'
 require('./check-versions')()
 
-process.env.NODE_ENV = 'production'
+let arg = process.argv.splice(2)[0];
+process.env.NODE_ENV = arg == 'dev' ? 'development' : 'production'
+process.env.BUILD_MODE = arg
 
 const ora = require('ora')
 const rm = require('rimraf')
diff --git a/nezha-fronted/build/webpack.prod.conf.js b/nezha-fronted/build/webpack.prod.conf.js
index 9c28608a5..3b10ea9ea 100644
--- a/nezha-fronted/build/webpack.prod.conf.js
+++ b/nezha-fronted/build/webpack.prod.conf.js
@@ -145,11 +145,51 @@ const webpackConfig = merge(baseWebpackConfig, {
         ignore: ['*']
       }
     ]),
+  ]
+})
+
+if(process.env.NODE_ENV == 'development'){
+  webpackConfig.plugins.push(
+    new fileManagerPlugin({
+      onStart:[
+        {
+          delete:[path.join(__dirname,'../dist/') ]
+        }
+      ],
+      onEnd: [
+        {
+          move:[
+            { source: path.join(__dirname,'../dist','/static/config.json'), destination: path.join(__dirname,'../dist/config.json') },
+            { source: path.join(__dirname,'../dist','/static'), destination: path.join(__dirname,'../dist','/nezha') }
+          ],
+          mkdir:[
+            path.join(__dirname,'../dist','/static')
+          ],
+          copy:[
+            { source: path.join(__dirname,'../dist','/config.json'), destination: path.join(__dirname,'../dist','/static/config.json') }
+          ],
+        },
+        {
+          delete:[
+            path.join(__dirname,'../dist','/config.json')
+          ]
+        },
+        {
+          archive:[
+            { source: path.join(__dirname,'../dist'), destination: path.join(__dirname,'../dist','/nz-gui.zip') }
+          ]
+        }
+      ]
+    }),
+
+  )
+}else{
+  webpackConfig.plugins.push(
     new WebpackZipPlugin({
       initialFile: './dist',
       endPath: './dist',
       zipName: 'nz-gui.zip',
-      behindShell: 'cd '+path.join(__dirname,'../dist/')+";md5=`md5sum nz-gui.zip |awk '{print $1}'|cut -c 1-8`;mv nz-gui.zip nz-gui-${md5}.zip;"+(env.BUILD_MODE=='"all"'?'mkdir -p ./dist/static;echo "start add map picture to zip file,it will table a few moment,please wait...";cp -r ../static/Tiles dist/static/;zip -gr nz-gui-${md5}.zip dist/static/Tiles>/dev/null;rm -rf dist;':'')
+      behindShell: 'cd '+path.join(__dirname,'../dist/')+";md5=`md5sum nz-gui.zip |awk '{print $1}'|cut -c 1-8`;mv nz-gui.zip nz-gui-${md5}.zip;"+(process.env.BUILD_MODE=='all'?'mkdir -p ./dist/static;echo "start add map picture to zip file,it will take a few moment,please wait...";cp -r ../static/Tiles dist/static/;zip -gr nz-gui-${md5}.zip dist/static/Tiles>/dev/null;rm -rf dist;':'')
     }),
     new fileManagerPlugin({
       onStart:[
@@ -157,16 +197,9 @@ const webpackConfig = merge(baseWebpackConfig, {
           delete:[path.join(__dirname,'../dist/') ]
         }
       ],
-      // onEnd: [
-      //   {
-      //     move:[
-      //       { source: path.join(__dirname,'../dist','/nz-gui.zip'), destination: path.join(__dirname,'../dist','/nz-gui-[chunkhash].zip') }
-      //     ]
-      //   }
-      // ]
     })
-  ]
-})
+  )
+}
 
 if (config.build.productionGzip) {
   const CompressionWebpackPlugin = require('compression-webpack-plugin')
diff --git a/nezha-fronted/config/prod.env.js b/nezha-fronted/config/prod.env.js
index c7fa355d9..1aa0fbce9 100644
--- a/nezha-fronted/config/prod.env.js
+++ b/nezha-fronted/config/prod.env.js
@@ -1,6 +1,4 @@
 'use strict'
-let BUILD_MODE=process.argv.splice(2)[0] || 'prod';
 module.exports = {
   NODE_ENV: '"production"',
-  BUILD_MODE:'"'+BUILD_MODE+'"'
 }
diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index dcfb2152a..5b52219f9 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -318,6 +318,9 @@ export default {
         handler(n,o){
           this.panelIdInner=n
         }
+      },
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
       }
     },
     methods: {
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index b7bfc11eb..94368a21c 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -47,7 +47,7 @@
   }
 </style>
 <template>
-  <div class="list-width"  id="listContainer"><!--v-drag-->
+  <div class="list-width"  id="listContainer" ref="listContainer"><!--v-drag-->
 
     <span class="temp-dom"></span>
 
@@ -66,7 +66,7 @@
                  animation: 150,
                  handle: '.chart-title'
                }"  >
-      <div v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title" :class="{'drag-disabled': !draggable,'chartBox':true}" v-show="!item.isHide">
+      <div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-' + item.id" :key="item.id" :name="item.title" :ref="'chart' + item.id" :style="{marginBottom: extraMarginBottom}" v-for="(item, index) in dataList" v-show="!item.isHide">
         <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
                           :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
                           @on-refresh-data="refreshChart"
@@ -77,6 +77,7 @@
                           :panel-id="filter.panelId"
                           :is-lock="panelLock"
                           :chart-index="index"
+                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                           :chart-data="item"></line-chart-block>
 
         <chart-single-stat  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'singleStat'"
@@ -89,6 +90,7 @@
                      :chart-data="item"
                      :is-lock="panelLock"
                      :panel-id="filter.panelId"
+                     @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                      :chart-index="index"></chart-single-stat>
 
         <chart-table  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'table'"
@@ -101,6 +103,7 @@
                       :is-lock="panelLock"
                       :panel-id="filter.panelId"
                       :chart-data="item"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                       :chart-index="index"></chart-table>
 
         <chart-url  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'url'"
@@ -113,6 +116,7 @@
                      @on-edit-chart-block="editData"
                      :panel-id="filter.panelId"
                      :chart-data="item"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                      :chart-index="index"></chart-url>
 
         <chart-detail  v-if="item.type === 'assetInfo' || item.type == 'projectInfo' || item.type == 'endpointInfo' || item.type == 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
@@ -121,6 +125,7 @@
                           @on-refresh-data="refreshChart"
                           :is-lock="panelLock"
                           :chart-data="item"
+                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                           :editChartId="'editChartId' + item.id"
         ></chart-detail>
 
@@ -130,6 +135,7 @@
                     @on-duplicate-chart-block="duplicateChart"
                     @on-drag-chart="editChartForDrag"
                     @on-edit-chart-block="editData"
+                    @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                     :is-lock="panelLock"
                     :panel-id="filter.panelId"
                     :chart-data="item"
@@ -149,6 +155,7 @@
                           @on-duplicate-chart-block="duplicateChart"
                           @on-drag-chart="editChartForDrag"
                           @on-edit-chart-block="editData"
+                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
         ></chart-alert-list>
       </div>
    </draggable>
@@ -201,6 +208,7 @@
           start: '',
           end: '',
         },
+        extraMarginBottom: 0, //dom额外的margin
         panelId: '',
         timer: null,
         dataTotalList:[],//懒加载：总记录数
@@ -218,6 +226,21 @@
       };
     },
     methods: {
+      dropmenuChange(id, show) {
+        if (show) {
+          let chart = this.$refs["chart" + id][0];
+          let container = this.$refs.listContainer;
+          let heightDifference = container.offsetHeight - chart.offsetTop;
+          if (heightDifference < 235) {
+            this.extraMarginBottom = 235-heightDifference;
+            this.$nextTick(() => {
+              container.scrollTop = container.offsetHeight;
+            });
+          }
+        } else {
+          this.extraMarginBottom = 0;
+        }
+      },
       tempDomInit() {
         let span = document.querySelector(".temp-dom");
         this.tempDom.width = span.offsetWidth;
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index 987f3581e..7e194167e 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/nezha-fronted/src/components/charts/chart-single-stat.vue
@@ -143,7 +143,11 @@ export default {
   created() {
   },
   computed: {},
-    watch: {},
+    watch: {
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
+      }
+    },
     methods: {
       startResize(e) {
         let vm = this;
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index 60a549ff6..0cb2d9a67 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -225,7 +225,11 @@
       this.screenPageObj.pageSize = this.pageSizes[0];
     },
     computed: {},
-    watch: {},
+    watch: {
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
+      }
+    },
     methods: {
       pageNo(val) {
         this.pageObj.pageNo = val;
diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue
index cf94d8d08..56d4d55ed 100644
--- a/nezha-fronted/src/components/charts/chart-url.vue
+++ b/nezha-fronted/src/components/charts/chart-url.vue
@@ -291,6 +291,11 @@ export default {
       });
     },
   },
+  watch: {
+    dropdownMenuShow(n) {
+      this.$emit("dropmenu-change", n);
+    }
+  },
   mounted() {
     this.firstLoad = false;
   },
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index f5a018892..311747015 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -299,7 +299,11 @@
         screenLegendOptions:[],*/
       };
     },
-    watch: {},
+    watch: {
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
+      }
+    },
     methods: {
       startResize(e) {
         let vm = this;
diff --git a/nezha-fronted/src/components/charts/text-chart.vue b/nezha-fronted/src/components/charts/text-chart.vue
index 9b85226a6..e0abb2952 100644
--- a/nezha-fronted/src/components/charts/text-chart.vue
+++ b/nezha-fronted/src/components/charts/text-chart.vue
@@ -108,7 +108,11 @@
     created() {
     },
     computed: {},
-    watch: {},
+    watch: {
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
+      }
+    },
     methods: {
       startResize(e) {
         let vm = this;
diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index 35697aae3..ea2eab376 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -348,6 +348,7 @@
     width: 150px;
     color: #1a1a1a;
     padding: 0 3px 0 13px;
+    word-break: break-all;
   }
   .danger{
     background-color: #d64f40;
diff --git a/nezha-fronted/src/components/common/alert/alertLabel2.vue b/nezha-fronted/src/components/common/alert/alertLabel2.vue
new file mode 100644
index 000000000..698e36f56
--- /dev/null
+++ b/nezha-fronted/src/components/common/alert/alertLabel2.vue
@@ -0,0 +1,399 @@
+<template>
+  <div :class="['alert-labelUp',LRTriangle?'left-triangle':'right-triangle']" :style="{top:that.position.top+'px',left:that.position.left+'px','--mt': that.position.mt+'px',}" ref="alertLabels">
+    <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">SN</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.sn:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Host</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">State</div>
+        <div class="alert-label-value">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Ping</div>
+        <div class="alert-label-value">
+          <div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div>
+          <span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Asset Type</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Vendor</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Model</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.model:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">PingLastReply</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.pingLastReply:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Alert</div>
+        <div class="alert-label-value">
+          <span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">DC</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Endpoint</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Administrator</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
+      </div>
+    </div>
+
+    <div class="alert-label-info" v-if="type==='module'" v-loading="loading">
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Name</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Project</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Description</div>
+        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
+      </div>
+    </div>
+
+    <div class="alert-label-info" v-if="type==='project'" v-loading="loading">
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Name</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Description</div>
+        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
+      </div>
+    </div>
+
+    <div class="alert-label-info" v-if="type==='endpoint'" v-loading="loading">
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Project</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Module</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.module.name:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Labels</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.labels:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Host</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Port</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.port:''}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Path</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.path:''}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name:"alertLabel",
+    props:{
+      id:{},
+      type:{},
+      //labelLoading:{},
+      that:{},
+      LRTriangle:{}
+    },
+    watch:{
+      // labelLoading: {
+      //   immediate: true,
+      //   handler(n) {
+      //     if(this.type==='asset'){
+      //       this.$get('/asset/info?id='+this.id).then((res)=>{
+      //         if(res.msg==='success'){
+      //           this.loading=false;
+      //           this.alertLabelData=res.data.Basic;
+      //         } else{
+      //           this.$message.error(res.msg);
+      //         }
+      //       })
+      //     }
+      //     if(this.type==='project'){
+      //       this.$get('/project/info?id='+this.id).then((res)=>{
+      //         if(res.msg==='success'){
+      //           this.loading=false;
+      //           this.alertLabelData=res.data.basic;
+      //         } else{
+      //           this.$message.error(res.msg);
+      //         }
+      //       })
+      //     }
+      //     if(this.type==='module'){
+      //       this.$get('/module?id='+this.id).then((res)=>{
+      //         if(res.msg==='success'){
+      //           this.loading=false;
+      //           this.alertLabelData=res.data.list[0];
+      //         } else{
+      //           this.$message.error(res.msg);
+      //         }
+      //       })
+      //     }
+      //   }
+      // }
+      that:{
+        immediate: true,
+        deep:true,
+        handler(n){
+
+        }
+      },
+      LRTriangle:{
+        immediate: true,
+        deep:true,
+        handler(n){
+
+        }
+      }
+    },
+    data() {
+      return {
+        alertLabelData:null,
+        loading: true
+      }
+    },
+    components:{
+
+    },
+    computed: {
+      calcPosition() {
+        let self=this;
+        return function(position) {
+          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
+          let elHeight=self.type==='asset'?318:(self.type==='project'?70:70);
+          if(position.top+elHeight>clientHeight){
+            return {
+              left: `${position.left + position.width + 20}px`,
+              top: `${position.top -elHeight- 20}px`,
+            }
+          }else{
+            return {
+              left: `${position.left + position.width + 20}px`,
+              top: `${position.top - 20}px`,
+            }
+          }
+        }
+      },
+      calcHeight(){
+        let self=this;
+        return function(position) {
+          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
+          let elHeight=self.type==='asset'?318:(self.type==='project'?70:70);
+          if(position.top+elHeight>clientHeight){
+            return 'alert-labelUp'
+          }else{
+            return 'alert-label'
+          }
+
+        }
+      }
+    },
+    methods:{
+      alertActiveStr(){
+        return this.$t('overall.active');
+      },
+      alertStateStr(num){
+        if( num == 1){
+          return this.$t('asset.inStock')
+        } else {
+          return this.$t('asset.notInStock')
+        }
+      },
+    },
+    mounted(){
+      if(this.type==='asset'){
+        this.$get('/asset/info?id='+this.id).then((res)=>{
+          if(res.msg==='success'){
+            this.loading=false;
+            this.alertLabelData=res.data.Basic;
+          } else{
+            this.$message.error(res.msg);
+          }
+        })
+      }
+      if(this.type==='project'){
+        this.$get('/project?id='+this.id).then((res)=>{
+          if(res.msg==='success'){
+            this.loading=false;
+            this.alertLabelData=res.data.list[0];
+          } else{
+            this.$message.error(res.msg);
+          }
+        })
+      }
+      if(this.type==='module'){
+        this.$get('/module?id='+this.id).then((res)=>{
+          if(res.msg==='success'){
+            this.loading=false;
+            this.alertLabelData=res.data.list[0];
+          } else{
+            this.$message.error(res.msg);
+          }
+        })
+      }
+      if(this.type==='endpoint'){
+        this.$get('/endpoint?id='+this.id).then((res)=>{
+          if(res.msg==='success'){
+            this.loading=false;
+            this.alertLabelData=res.data.list[0];
+          } else{
+            this.$message.error(res.msg);
+          }
+        })
+      }
+    },
+    beforeDestroy(){
+
+    }
+  }
+
+</script>
+
+<style lang="scss" scoped>
+  .alert-label {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-labelUp {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-label::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed solid dashed dashed;
+    border-color: transparent #fff transparent transparent;
+    position: absolute;
+    top: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .left-triangle::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed solid dashed dashed;
+    border-color: transparent #fff transparent transparent;
+    position: absolute;
+    top: var(--mt);
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .right-triangle::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed dashed dashed solid;
+    border-color: transparent transparent transparent #fff;
+    position: absolute;
+    top: var(--mt);
+    right: 0;
+    transform: translate(100%, -50%);
+  }
+  .alert-label-info{
+    border: 1px solid #ebeef5;
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+  }
+  .alert-label-box{
+    display: flex;
+    justify-content:space-between;
+    border-bottom: 1px solid #ebeef5;
+  }
+  .alert-label-title{
+    text-align: left;
+    width: 110px;
+    border-right: 1px solid #ebeef5;
+    color: #666;
+    padding: 0 3px 0 13px;
+  }
+  .alert-label-value{
+    text-align: left;
+    width: 150px;
+    color: #1a1a1a;
+    padding: 0 3px 0 13px;
+    word-break: break-all;
+  }
+  .danger{
+    background-color: #d64f40;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .success{
+    background-color: #50d050;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  /deep/.active-icon{
+    margin-top: 0;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/exportXLSX.vue b/nezha-fronted/src/components/common/exportXLSX.vue
index 86eacbecf..9f6d69a33 100644
--- a/nezha-fronted/src/components/common/exportXLSX.vue
+++ b/nezha-fronted/src/components/common/exportXLSX.vue
@@ -245,9 +245,9 @@
         if (this.importUrl.indexOf('panel') > -1){
           delete params.panelId
         }
-        if (this.importUrl.indexOf('endpoint') > -1){
-          delete params.moduleId
-        }
+        // if (this.importUrl.indexOf('endpoint') > -1){
+        //   delete params.moduleId
+        // }
         params.language=localStorage.getItem('nz-language') || 'en';
 
         this.exportExcel(this.exportUrl,params,this.exportFileName+'-'+this.getTimeString()+'.xlsx');
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index db1a20340..652f48873 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -365,6 +365,9 @@
           return;
         }
         this.currentProject = p;
+        if(p.id!==this.$store.state.currentProject.id){
+          bus.$emit("project-page-type", "project");
+        }
         this.$store.commit("currentProjectChange", p);
         this.activeItemIndex = p.id;
         this.jumpTo('/project');
diff --git a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
index f03785e57..ba3d3d906 100644
--- a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
+++ b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="box" class="box-hexagon" v-clickoutside="hexagonSvgClearScale" v-if="boxhexagonShow">
+  <div ref="box" class="box-hexagon" v-clickoutside="{obj:{},func:hexagonSvgClearScale}" v-if="boxhexagonShow">
     <!--<div class="hexagon-text" :style="{top:hexagonTextPos.top,left:hexagonTextPos.left}" v-show="hexagonTextPos.show">-->
     <!--<span v-if="hexagonTextPos.data">-->
     <!--{{hexagonTextPos.data?hexagonTextPos.data.alertName:''}}-->
@@ -108,7 +108,7 @@
       hexData:{},//数据
       hexagonSvgID:{//在同一个页面创建多个实例时 需要通过id区分
         type:String,
-        default:'hexagonSvg',
+        required:true,
       },
       col:{},//列数
       colorFrom:{//通过什么决定颜色
@@ -142,6 +142,10 @@
         type:Boolean,
         default:true,
       },
+      showTooltip:{
+        type:Boolean,
+        default:false,
+      },
       isPanning:{ // 是否支持移动
         type:Boolean,
         default:true,
@@ -223,6 +227,7 @@
         hexagonEdge:JSON.stringify(this.hexagonEdgeProp),
         fontSize:14,
         maskShow:true,
+        windowRate:1,
       }
     },
     computed:{
@@ -234,7 +239,7 @@
     },
     mounted(){
       // this.init()
-
+      window.addEventListener("visibilitychange",this.reload);
     },
     methods:{
       init(){ //创建svg实例
@@ -260,9 +265,11 @@
               .attr('viewBox',`0 0 ${this.$refs.box.offsetWidth} ${this.$refs.box.offsetHeight}`); //svg实例
             hexagonSvg.on('click',this.hexagonSvgClearScale);
             hexagonSvg.on('panStart',this.hexagonSvgPanStart);
+            hexagonSvg.on('mousemove',this.hexagonMove);
             hexagonSvg.on('panEnd',this.hexagonSvgPanEnd);
             let Rate=(this.$refs.box.offsetWidth/this.defaultBoxWidth);
             Rate=(Rate>0.2?Rate:0.2);
+            this.windowRate=Rate;
             this.hexagonEdge=(this.hexagonEdge/this.defaultRate)*Rate;
             this.fontSize=(this.fontSize/this.defaultRate)*Rate;
             setHexagon(this.hexagonSvgID,{
@@ -287,6 +294,11 @@
           })
         });
       },
+      reload(){
+        if(!document.hidden){
+          this.init();
+        }
+      },
       getPadding(){//确定到上方和下方的距离 保持居中
         return new Promise(resolve=>{
           let hexagonWidth=this.MathSqrt3*this.hexagonEdge+this.interspace;
@@ -419,7 +431,7 @@
         that.parent().find('polyline').stroke({color:'#909090'});
         let hover=that.parent().find('.hoverRect');
 
-        if(this.isShowHover&&hover&&this.from){
+        if(this.isShowHover&&hover&&this.from&&!this.showTooltip){//不显示气泡 显示基本信息
           let center=that.first().data('center');
           let str=this.from==='asset'?that.first().data('host'):that.first().data('module');
           str+='';
@@ -444,6 +456,15 @@
             }
           ).fill({ color: `rgba(0,0,0,0.3)`}).size((str.length*20+30),72).attr({ rx:"10",ry:"10"});
         }
+        if(this.isShowHover&&this.showTooltip){//显示气泡
+          this.$emit('changeAsset',that.first().data('id'),e)
+        }
+      },
+      hexagonMove(e){//六边形内移动
+        if(this.showTooltip){//显示气泡
+          this.$emit('assetMove',e)
+        }
+        // this.$emit('assetMove',e)
       },
       hexagonOut(that){// 移出六边形
         let color=that.first().data('color');
@@ -453,9 +474,12 @@
         that.animate(100).transform({scale:1});
         that.parent().find('polyline').stroke({color:'#DADADA'});
         let hover=that.parent().find('.hoverRect');
-        if(hover){
+        if(hover&&!this.showTooltip){//不显示气泡 显示基本信息
           hover.hide();
         }
+        if(this.showTooltip){//显示气泡
+          this.$emit('closeAsset')
+        }
       },
       changeScale(center,item1,data,group,e){
         window.event? window.event.cancelBubble = true:e.stopPropagation();
@@ -468,6 +492,7 @@
       },
       hexagonSvgScale(center,item1,data,group,e){
         window.event? window.event.cancelBubble = true:e.stopPropagation();
+        this.$emit('closeAsset');
         if(this.timer){
           clearTimeout(this.timer);
           this.timer=null;
@@ -804,6 +829,7 @@
           this.allHexagon=[];
           this.hexagonData=[];
           getHexagon(this.hexagonSvgID).hexagonSvg.off('click',this.hexagonSvgClearScale);
+          getHexagon(this.hexagonSvgID).hexagonSvg.off('mouseover',this.hexagonMove);
           getHexagon(this.hexagonSvgID).hexagonSvg.off('panStart',this.hexagonSvgPanStart);
           getHexagon(this.hexagonSvgID).hexagonSvg.off('panEnd',this.hexagonSvgPanEnd);
           getHexagon(this.hexagonSvgID).hexagonSvg=null;  //Svg的实例
@@ -822,6 +848,7 @@
         getHexagon(this.hexagonSvgID).allHexagonRect=null;//文本框
         getHexagon(this.hexagonSvgID).allHexagonText=null;// 文本内容
       }
+      window.removeEventListener("visibilitychange",this.reload);
       // clearTimeout(this.timer)
     }
   }
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 1f86116ad..fffca3ccd 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -1,11 +1,14 @@
 import PerfectScrollbar from "perfect-scrollbar";
 import {getChart} from "./common";
-
+import MessageBox from "element-ui/packages/message-box/src/main";
+import i18n from "../i18n";
 /*弹窗点击外部后关闭*/
 const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box','nz-dashboard-dropdown', "el-autocomplete-suggestion"]; //clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
   // 初始化指令
   bind(el, binding, vnode) {
+    if(!binding.value||!binding.value.obj) return;
+    let oldValue = JSON.parse(JSON.stringify(binding.value.obj));
     function documentHandler(e) {
       if (el.contains(e.target)) {
         return false;
@@ -23,18 +26,21 @@ export const clickoutside = {
         if (!flag) {
           return false;
         }
-      }
-      // 判断指令中是否绑定了函数
-      if (binding.expression) {
-        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
-        if (binding.arg) {
-          binding.value(e, binding.arg);
-        } else {
-          if(binding.value){
-            binding.value(e);
-          }
-        }
 
+        let newValue = JSON.parse(JSON.stringify(binding.value.obj));
+        if(!isEqual(oldValue,newValue)){
+          MessageBox.confirm(i18n.t("tip.confirmCancel"), {
+            confirmButtonText: i18n.t("tip.yes"),
+            cancelButtonText: i18n.t("tip.no"),
+            type: 'warning'
+          }).then(() => {
+            if(binding.value.func){
+              binding.value.func();
+            }
+          })
+        }else{
+          binding.value.func();
+        }
       }
     }
 
@@ -48,7 +54,63 @@ export const clickoutside = {
     delete el.__vueClickOutside__;
   },
 };
+function isEqual (o1, o2) {
+  console.log(o1,o2)
+  var isEqualForInner = function (obj1, obj2) {
+    var o1 = obj1 instanceof Object;
+    var o2 = obj2 instanceof Object;
+    if (!o1 || !o2) {
+      return obj1 === obj2;
+    }
+    if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+      return false;
+    }
 
+    for (var attr of Object.keys(obj1)) {
+
+      var t1 = obj1[attr] instanceof Object;
+      var t2 = obj2[attr] instanceof Object;
+      if (t1 && t2) {
+        if(!isEqualForInner(obj1[attr], obj2[attr])){
+          return false;
+        }
+      } else if (obj1[attr] !== obj2[attr]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return isEqualForInner(o1, o2);
+}
+export const cancelWithChange={
+  bind:function(el,binding){
+    if(!binding.value||!binding.value.obj) return;
+    let oldValue = JSON.parse(JSON.stringify(binding.value.obj));
+    function domClick(e){
+      let newValue = JSON.parse(JSON.stringify(binding.value.obj));
+      if(!isEqual(oldValue,newValue)){
+        MessageBox.confirm(i18n.t("tip.confirmCancel"), {
+          confirmButtonText: i18n.t("tip.yes"),
+          cancelButtonText: i18n.t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          if(binding.value.func){
+            binding.value.func();
+          }
+        })
+      }else{
+        binding.value.func();
+      }
+    }
+    el.__vueDomClick__ = domClick
+    el.addEventListener('click',domClick)
+  },
+  unbind:function(el,binding){
+// 解除事件监听
+    document.removeEventListener('click', el.__vueDomClick__);
+    delete el.__vueDomClick__;
+  }
+}
 // 底部上滑框窗口控制
 export const bottomBoxWindow = {
   // 鼠标拖动二级列表
@@ -233,7 +295,7 @@ export const chartResizeTool = {
   chartBlankHeight: 12, //图表空白占位高度(padding-top + border)
   chartTableBlankHeight: 6, //表格型图表额外空白占位高度
   chartBlankWidth: 10, //图表空白占位宽度
-  containerBlankWidth: 25, //容器空白占位宽度（#listContainer的padding）
+  containerBlankWidth: 15, //容器空白占位宽度（#listContainer的padding）
   titleHeight: 28, //标题dom高度
   stepHeight: 50, //单元高度
   timeouter:null,
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index af5dbfdea..e95a9c99d 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -405,7 +405,8 @@ const cn = {
     syncTip:"此操作可能造成原有数据或图表被覆盖，确认同步吗？",
     noImportFile:'没有可导入的文件',
     noAccess: "无访问权限",
-    confirmDuplicate:"确认复制吗？"
+    confirmDuplicate:"确认复制吗？",
+    confirmCancel:'您所做的修改将不会被保存？',
   },
   asset: {
     asset: "资产",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 71a75c323..2007c740a 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -56,7 +56,7 @@ const en = {
     createAccount:'Create account',
     createRole: 'Create role',
     createPrometheusServer:'Create prometheus server',
-    createDatacenter:'Create Data Center',
+    createDatacenter:'Create Data center',
     createCabinet:'Create cabinet',
     createModel:'Create model',
     createModule: 'Create module',
@@ -408,7 +408,8 @@ const en = {
     syncTip:'This operation may cause the original data or chart to be overwritten. Are you sure to synchronize?',
     noImportFile:'No import file found',
     noAccess: "No access",
-    confirmDuplicate:"Are you sure to duplicate this chart?"
+    confirmDuplicate:"Are you sure to duplicate this chart?",
+    confirmCancel:'Changes you made are not saved?',
   },
   asset:{
     asset: 'Asset',
@@ -482,18 +483,18 @@ const en = {
       },
       purchaseDate:'Purchase date',//'购买日期'
       dataSelectTip:'Please select date',//'请选择日期'
-      dc:'DC',
-      dcName:'DC name',//'DC名称'
+      dc:'Data center',
+      dcName:'Data center name',//'DC名称'
       AddIdcTab:{
-        title:'New Data Center',//'新增DC'
-        dcName:'DC name',//'DC名称'
+        title:'New Data center',//'新增DC'
+        dcName:'Data center name',//'DC名称'
         location:'Location',//'地区'
         principal:'Administrator',//'负责人'
         tel:'Telephone'//'电话'
       },
       editIdcTab:{
-        title:'Edit DC',//'编辑DC'
-        dcName:'DC name',//'DC名称'
+        title:'Edit Data center',//'编辑DC'
+        dcName:'Data center name',//'DC名称'
         location:'Location',//'地区'
         principal:'Administrator',//'负责人'
         tel:'Telephone'//'电话'
@@ -507,14 +508,14 @@ const en = {
         name:'Name',//'名称'
         uSize:'U size',//'U位'
         remark:'Description',//'描述'
-        DC:'DC',//DC
+        DC:'Data center',//DC
       },
       editCabinetTab:{
         title:'Edit cabinet',//'编辑机柜'
         name:'Name',//'名称'
         uSize:'U size',//'U位'
         remark:'Description',//'描述'
-        DC:'DC',//DC
+        DC:'Data center',//DC
       },
       uSize:'U size',//'U位'
       remark:'Description',//'描述'
@@ -621,12 +622,12 @@ const en = {
       editProm: 'Edit prometheus server',//"修改Prometheus Server"
       type: 'Type',//"类别"
       checkTime: 'Check time',
-      dataCenter:'Data Center',
+      dataCenter:'Data center',
     },
     dc: {
       dc: 'Data center',
       area: "Area",
-      dcName: 'DC name',
+      dcName: 'Data center name',
       selectArea: 'Select area',
       cabinetNum: "Cabinet number",
       assets: "Assets",
diff --git a/nezha-fronted/src/components/common/leftMenu.vue b/nezha-fronted/src/components/common/leftMenu.vue
index 68f18efb2..1959e0556 100644
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -4,7 +4,7 @@
       <div class="sidebar-title too-long-split">{{$t(parentMenu.i18n)}}</div>
       <div class="sidebar-info" style="height: 90%; overflow: auto;">
         <template v-if="parentMenu == '/project'">
-          <el-collapse accordion class="left-menu-bg" ref="projectLeft" style="padding-top: 0;">
+          <el-collapse v-model="projectChoose" accordion class="left-menu-bg" ref="projectLeft" style="padding-top: 0;">
             <el-collapse-item :key="item.id" :name="item.id + ''" v-for="(item, index) in projectList">
               <template slot="title">
                 <div :class="{'sidebar-info-item-active': item.id == currentProject.id}" :id="'project-module-'+item.id" @click="detailProject(item)" class="sidebar-info-item-project sidebar-info-item">
@@ -172,6 +172,7 @@
           lastCheckSize:0,
           assetPingSwitch:true,
           isRouterAlive: true,
+          projectChoose:[],
         }
       },
       computed: {
@@ -217,6 +218,7 @@
               this.currentProject = n;
               if (this.currentProject && this.currentProject.id && this.showProjectPanel) {
                 this.detailProject(this.currentProject);
+                // this.projectChoose=[];
               }
               this.changeCurrentModule('');
             }
diff --git a/nezha-fronted/src/components/common/overView/messageAsset.vue b/nezha-fronted/src/components/common/overView/messageAsset.vue
index 65ba126e8..df2934f1a 100644
--- a/nezha-fronted/src/components/common/overView/messageAsset.vue
+++ b/nezha-fronted/src/components/common/overView/messageAsset.vue
@@ -1,6 +1,7 @@
 <template>
   <div style="width: 100%;height: 100%" v-loading="loading">
     <hexagonBox
+      ref="hexagonBox"
       :hexData="data"
       :col="col"
       :length="length"
@@ -12,12 +13,30 @@
       :hexagonEdge="hexagonEdge"
       :from="from"
       :hexagonSvgID="hexagonSvgID"
+      :showTooltip="showTooltip"
+      @changeAsset="changeAsset"
+      @assetMove="assetMove"
+      @closeAsset="closeAsset"
     />
+    <alertLabel
+      v-if="showTooltip&&assetData.show"
+      v-loading="assetData.loading"
+      ref="alertLabel"
+      :id="assetData.id"
+      :that="assetData"
+      :type="'asset'"
+      :LRTriangle="LRTriangle"
+      :style="{
+        'transform-origin': `0px 300px`,
+        transform:`scale(${assetData.rate})`
+      }"
+    ></alertLabel>
   </div>
 </template>
 
 <script>
   import hexagonBox from '../honeycomb/hexagonFigureSvg'
+  import alertLabel from '../alert/alertLabel2'
   function textMouseDown(e){
     window.event? window.event.cancelBubble = true : e.stopPropagation();
   }
@@ -30,7 +49,8 @@
 	export default {
 		name:"messageAsset",
     components:{
-      hexagonBox
+      hexagonBox,
+      alertLabel
     },
     props:{
       data:{},
@@ -40,7 +60,11 @@
       hexagonSvgID:{
         type:String,
         default:'hexagonSvg'
-      }
+      },
+      showTooltip:{
+        type:Boolean,
+        default:false,
+      },
     },
     watch:{
       data:{
@@ -66,7 +90,20 @@
     data(){
 		  return{
         hexagonEdge:90,
-        loading:true,
+        loading:false,
+        assetData:{
+          id:'',
+          loading:false,
+          show:false,
+          rate:1,
+          position:{
+            top:0,
+            left:0,
+            mt:0,
+          },
+        },
+        boxWidth:'',
+        LRTriangle:true,//true 左三角 false 右
       }
     },
     methods:{
@@ -211,6 +248,45 @@
           item.fill({ opacity:0}).hide();
         });
       },
+      changeAsset(data,e){
+        this.assetData.id=data;
+        let boxWidth=document.getElementsByClassName('content-right')[0].offsetWidth;
+        console.log(boxWidth);
+        this.boxWidth=boxWidth;
+        // this.assetData.rate=window.screen.height/1297;
+        this.$nextTick(()=>{
+          this.assetData.show=true;
+          this.$nextTick(()=>{
+            this.calcPosition(e)
+          })
+        })
+      },
+      assetMove(e){
+        if(!this.assetData.show){return}
+        this.calcPosition(e)
+      },
+      calcPosition(e){
+        let boxWidth=this.boxWidth;
+        let minus=(e.pageY-300)+this.$refs.alertLabel.$el.offsetHeight-window.innerHeight;
+        // window.innerHeight
+        if(minus<=0){
+          this.assetData.position.top=e.pageY-300;
+          this.assetData.position.mt=300;
+        } else if(minus>0){
+          this.assetData.position.top=window.innerHeight-this.$refs.alertLabel.$el.offsetHeight;
+          this.assetData.position.mt=e.pageY-(window.innerHeight-this.$refs.alertLabel.$el.offsetHeight);
+        }
+        if(boxWidth/2>e.pageX-200){
+          this.assetData.position.left=e.pageX + 35;
+          this.LRTriangle=true;
+        }else{
+          this.assetData.position.left=e.pageX - 35 - this.$refs.alertLabel.$el.offsetWidth;
+          this.LRTriangle=false
+        }
+      },
+      closeAsset(){
+        this.assetData.show=false
+      },
       endLoading(){
         this.loading=false;
       },
diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
index c15d18b20..5a4502a29 100644
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -12,7 +12,6 @@
             :expand-on-click-node="false"
             :filter-node-method="filterNode"
             :props="{label: 'name', children: 'children'}"
-            @check-change="clearOthers"
             @node-click="selectPanel"
             @node-drop="nodeDrop"
             check-on-click-node
@@ -50,7 +49,7 @@
         filterPanel: {type: String},
       },
       mounted() {
-        this.$refs.panelTree.setCurrentKey(this.showPanel);
+        this.$refs.panelTree.setCurrentKey(this.panel);
       },
       watch: {
         filterPanel: {
@@ -62,16 +61,23 @@
         showPanel: {
           immediate: true,
           handler(n) {
-            if (n && n.id) {
-              this.$refs.panelTree.setCurrentKey(this.showPanel);
+            this.panel = JSON.parse(JSON.stringify(n));
+          }
+        },
+        /*panel: {
+          immediate: true,
+          handler(n) {
+            if (this.$refs.panelTree) {
+              console.info(n.id, n.name)
+              this.$refs.panelTree.setCurrentKey(n);
             }
           }
-        }
+        }*/
       },
       data(){
         return {
           popBox: {show: false},
-          panel: {id: '', name: ''}
+          panel: {id: 0, name: ""},
         }
       },
       methods:{
@@ -115,35 +121,25 @@
         editPanel(data) {
           this.$emit("editPanel", data);
         },
-        openBox(panel){
-          if (panel) {
-            this.panel = panel;
-            this.$refs.panelTree.setChecked(this.panel.id, true, false);
-          }
-        },
         esc(){
           this.popBox.show = false;
         },
         //确认选择某个节点，与父组件交互
         selectPanel(data, checked, child) {
-          this.panel = data;
-          this.$emit('selectPanel', this.panel);
-          this.$refs.panelTree.setCurrentKey(this.panel);
+          this.$emit('selectPanel', data);
+          this.$refs.panelTree.setCurrentKey(data);
           this.esc();
         },
         //tree设为单选
-        clearOthers(data, checked, child) {
+        /*clearOthers(data, checked, child) {
           if (checked) {
             this.panel = data;
             this.$refs.panelTree.setCheckedKeys([data.id]);
           } else {
             this.panel = {id: '', name: ''};
           }
-        }
+        }*/
       },
-      beforeDestroy(){
-
-      }
     }
 </script>
 
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index 21c36b488..79fbd0fd8 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -13,7 +13,7 @@
       </span>
       <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
         <button @click="saveTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new" v-has="'project_topo_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('project.topology.save')}}</button>
-        <button @click="cancelTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new">{{$t('project.topology.cancel')}}</button>
+        <button v-cancel="{obj:{nodes:nodes,edges:edges},func:cancelTopology}" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new">{{$t('project.topology.cancel')}}</button>
       </span>
       <span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork"> {{$t('project.topology.selTwoNode')}} <span class="edit-topologyCancel" @click="closeAddLine">{{$t('project.topology.cancel')}}</span></span>
     </div>
@@ -492,6 +492,10 @@
             this_.arrayDiff();
             this_.popDataShowUpdate();
           })
+        }else{
+          this.$nextTick(()=>{
+            this.modelTopUpdate();
+          })
         }
       },
       addModel(model){ // 添加model
@@ -499,11 +503,19 @@
         if(!model){return}
         let nodesArray=[...this.nodesArray];
         if(!this.isNodeAdd){
-          model={...nodesArray.find(item=>item.id===model.id),...model};
-          nodesArray=nodesArray.filter(item=>item.id!==model.id);
+          model={...nodesArray.find(item=>item.id===this.selNodeId),...model};
+          nodesArray=nodesArray.filter(item=>item.id!==this.selNodeId);
         }else{
           model={...model,...this.network.DOMtoCanvas({x:80,y:100})};
         }
+        this.edgesArray.forEach(item=>{
+          if(item.from===this.selNodeId){
+            item.from=model.id;
+          }
+          if(item.to===this.selNodeId){
+            item.to=model.id;
+          }
+        })
         this.$get('/module/stat',{id:model.id}).then(res=>{
           model.state=res.data;
           nodesArray.push(model);
@@ -587,10 +599,10 @@
         }
         this.NodeArr=[...this.NodeArr]
       },
-      networkPopClose(){//关闭节点工具栏
+      networkPopClose(flag){//关闭节点工具栏
         this.networkPopShow=false;
         // this.selNodeId=''
-        if(this.network){
+        if(this.network&&!flag){
           this.network.unselectAll();
         }
       },
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
index 49717cf59..a3342b406 100644
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ b/nezha-fronted/src/components/common/project/visNetwork.vue
@@ -340,6 +340,7 @@
         this.editVisNetwork=flag;
         if(flag){
           this.$refs.topology.popDataShowUpdate('',true);
+          this.$refs.topology.networkPopClose(true);
         }
         if(!flag){
           // this.reload();
diff --git a/nezha-fronted/src/components/common/rightBox/accountBox.vue b/nezha-fronted/src/components/common/rightBox/accountBox.vue
index 330bd0c14..3a946dc94 100644
--- a/nezha-fronted/src/components/common/rightBox/accountBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/accountBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-account" v-clickoutside="clickOutside">
+  <div class="right-box right-box-account" v-clickoutside="{obj:editUser,func:clickOutside}">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
       <button @click="del" type="button" v-has="'account_delete'" v-if="editUser.userId&&editUser.userId!==1"
@@ -17,19 +17,19 @@
 
     <!-- begin--表单-->
     <div class="right-box-form-box">
-      <el-form class="right-box-form right-box-form-left" :model="editUser" :rules="rules" ref="accountForm" label-position="right" label-width="120px">
+      <el-form :model="editUser" :rules="editUser.userId ? rules2 : rules" class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="accountForm">
         <!--username-->
         <el-form-item :label="$t('config.account.account')" prop="username">
           <el-input autocomplete="new-password" type="text" placeholder=""
                     v-model="editUser.username" maxlength="64" show-word-limit size="small" :disabled="editUser.username==='admin' && editUser.userId==1"></el-input>
         </el-form-item>
         <!--password-->
-        <el-form-item :label="$t('config.account.password')" prop="password" v-if="!editUser.userId">
+        <el-form-item :label="$t('config.account.password')" prop="password">
           <el-input autocomplete="new-password" type="password" placeholder="" v-model="editUser.password"
                     maxlength="16" show-word-limit size="small" @blur="passwordBlur"></el-input>
         </el-form-item>
         <!--passwordChange-->
-        <el-form-item :label="$t('config.account.confirmPwd')" prop="passwordChange" v-if="!editUser.userId" class="passwordChange" label-width="160px">
+        <el-form-item :label="$t('config.account.confirmPwd')" class="passwordChange" label-width="160px" prop="passwordChange">
           <el-input autocomplete="new-password" type="password" placeholder="" v-model="editUser.passwordChange"
                     maxlength="16" show-word-limit size="small"></el-input>
         </el-form-item>
@@ -75,7 +75,7 @@
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="account-esc"
+      <button id="account-esc" v-cancel="{obj:editUser,func:esc}"
               class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
@@ -92,7 +92,8 @@
   export default {
     name: "accountBox",
     props: {
-      user: Object
+      user: Object,
+      roles:Array
     },
     computed: {
       isCurrentUser() {
@@ -112,10 +113,7 @@
     },
     data() {
       let validatePassword = (rule, value, callback) => { // 确认密码的二次校验
-        console.log(value);
-        if (value === ''&& !this.editUser.password) {
-          callback(new Error(this.$t('validate.required')));
-        }else if(value === ''&&this.editUser.password){
+        if(value === '' && this.editUser.password){
           callback(new Error(this.$t('config.account.inputConfirmPwd')));
         }else if (value !== this.editUser.password) {
           callback(new Error(this.$t('config.account.confirmPwdErr')));
@@ -134,7 +132,21 @@
           ],
           passwordChange: [
             { validator: validatePassword, trigger: 'blur' },
-            {required: true, message:'', trigger: 'blur'},
+            {required: true, message: '', trigger: 'blur'},
+          ],
+          roleIds: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          email: [
+            {type: 'email', message: this.$t('validate.email')}
+          ]
+        },
+        rules2: { //表单校验规则
+          username: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          passwordChange: [
+            { validator: validatePassword, trigger: 'blur' },
           ],
           roleIds: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -154,6 +166,7 @@
       /*关闭弹框*/
       esc(refresh) {
         this.prevent_opt.save=false;
+        console.log('cancel function ')
         this.$emit("close", refresh);
       },
       clickOutside() {
@@ -258,19 +271,6 @@
           });
         }
       },
-      getRoles:function(){
-        this.roles = [];
-        this.$get("sys/role?pageSize=-1").then(response=>{
-          if (response.code  == 200){
-            this.roles = response.data.list;
-            if(!this.editUser.userId){
-              this.editUser.roleIds = this.roles.find(t=>t.name == 'common').id;
-            }
-          }else{
-            this.$message.error("load roles faild")
-          }
-        })
-      },
       addNotification() {
         let scripts = this.selectableScripts.find(item => {
           return item.disabled === false;
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index fb43364c6..4d5e14a5f 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" @mousedown="()=>{showEditParamBox(false);showEditLabelsBox(false)}" v-clickoutside="clickOutside">
+  <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" @mousedown="()=>{showEditParamBox(false);showEditLabelsBox(false)}" v-clickoutside="{obj:endpoint,func:clickOutside}">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns"></div>
     <!-- end--顶部按钮-->
@@ -291,7 +291,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:endpoint,func:esc}" id="ep-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="ep-add" v-has="['asset_endpoint_save', 'project_endpoint_save']">
diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index b7d9ab88c..b20304119 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-alert-config" v-clickoutside="clickOutside">
+  <div class="right-box right-box-alert-config" v-clickoutside="{obj:editAlertRule,func:clickOutside}">
     <!-- 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="alert-box-del" type="button" v-has="'rule_delete'" v-if="alertRule.id">
@@ -108,7 +108,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" id="alert-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editAlertRule,func:esc}" id="alert-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="alert-box-save" v-has="'rule_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index 6a60178aa..f963241b0 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-asset" v-clickoutside="clickOutside">
+  <div class="right-box right-box-asset" v-clickoutside="{obj:editAsset,func:clickOutside}">
     <!--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
       <button @click="del" id="asset-edit-del" type="button" v-has="'asset_delete'" v-if="editAsset.id"
@@ -151,7 +151,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
+      <button v-cancel="{obj:editAsset,func:esc}" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="asset-edit-save" v-has="'asset_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
index 72da7d4cd..ae750e008 100644
--- a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-asset" v-clickoutside="clickOutside">
+  <div class="right-box right-box-asset" v-clickoutside="{obj:editAsset,func:clickOutside}">
     <!--顶部按钮-->
     <!--<div class="right-box-top-btns right-box-form-delete">-->
     <!--<button v-if="editAsset.id" type="button" @click="del" id="asset-edit-del"-->
@@ -247,7 +247,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
+      <button v-cancel="{obj:editAsset,func:esc}" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="asset-edit-save" v-has="'asset_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
index 21bfb3c2a..017ebc4d9 100644
--- a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-cabinet" v-clickoutside="clickOutside">
+  <div class="right-box right-box-cabinet" v-clickoutside="{obj:editCabinet,func:clickOutside}">
     <!-- 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="cab-del" type="button" v-has="'dc_cabinet_delete'" v-if="!editCabinet.id">
@@ -33,7 +33,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="cab-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editCabinet,func:esc}" id="cab-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="cab-box-save" v-has="'dc_cabinet_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index c6c930eaf..3a1496eff 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-dc" v-clickoutside="clickOutside">
+  <div class="right-box right-box-dc" v-clickoutside="{obj:editDc,func:clickOutside}">
       <!-- 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="dc-del" type="button" v-has="'dc_delete'" v-if="editDc.id">
@@ -79,7 +79,7 @@
 
       <!--底部按钮-->
       <div class="right-box-bottom-btns">
-        <button @click="esc" id="dc-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+        <button v-cancel="{obj:editDc,func:esc}" id="dc-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
           <span>{{$t('overall.cancel')}}</span>
         </button>
         <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="dc-box-save" v-has="'dc_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 9456afe93..83262f694 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
+  <div class="right-box right-box-edit-endpoint" v-clickoutside="{obj:editEndpoint,func:clickOutside}">
     <!-- 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="edit-ep-del" type="button" v-has="['project_endpoint_delete', 'asset_endpoint_delete']" v-if="editEndpoint.id">
@@ -124,7 +124,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editEndpoint,func:esc}" id="ep-edit-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="ep-edit-save" v-has="['asset_endpoint_save', 'project_endpoint_save']" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/menuBox.vue b/nezha-fronted/src/components/common/rightBox/menuBox.vue
index a99b26cda..81de3b9b9 100644
--- a/nezha-fronted/src/components/common/rightBox/menuBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/menuBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-menu" v-clickoutside="clickOutside">
+  <div class="right-box right-box-menu" v-clickoutside="{obj:editMenu,func:clickOutside}">
     <!-- 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="menus-edit-del"
@@ -64,7 +64,7 @@
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+      <button v-cancel="{obj:editMenu,func:esc}" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
               id="menus-esc">
         <span>{{$t('overall.cancel')}}</span>
       </button>
diff --git a/nezha-fronted/src/components/common/rightBox/mibBox.vue b/nezha-fronted/src/components/common/rightBox/mibBox.vue
index e0e83b3d6..68fcd7d6e 100644
--- a/nezha-fronted/src/components/common/rightBox/mibBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/mibBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-mib" v-clickoutside="clickOutside" >
+  <div class="right-box right-box-mib" v-clickoutside="{obj:editMib,func:clickOutside}" >
     <!-- 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="mib-del" type="button" v-has="'snmp_file_delete'" v-if="editMib.id">
@@ -48,7 +48,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editMib,func:esc}" id="model-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="model-box-save" v-has="'snmp_file_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/modelBox.vue b/nezha-fronted/src/components/common/rightBox/modelBox.vue
index bbed611c7..ee8cdd8d7 100644
--- a/nezha-fronted/src/components/common/rightBox/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/modelBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-model" v-clickoutside="clickOutside" @click="inputHandler">
+  <div class="right-box right-box-model" v-clickoutside="{obj:editModel,func:clickOutside}" @click="inputHandler">
     <!-- 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="model-del" type="button" v-has="'model_delete'" v-if="editModel.id">
@@ -73,7 +73,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editModel,func:esc}" id="model-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="model-box-save" v-has="['model_save', 'asset_vendor_save']" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 092481a30..7adf24ff6 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-module" v-clickoutside="clickOutside">
+  <div class="right-box right-box-module" v-clickoutside="{obj:editModule,func:clickOutside}">
     <!-- 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="module-del" type="button" v-has="'project_module_delete'" v-if="editModule.id">
@@ -305,7 +305,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editModule,func:esc}" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="module-box-save" v-has="'project_module_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 4da68889c..8a5433bc2 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -1,6 +1,6 @@
 <template key="panelBox">
   <transition name="right-box-580">
-    <div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="clickos">
+    <div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="{obj:panel,func:clickos}">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns right-box-form-delete">
         <button @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82" type="button" v-has="'panel_delete'" v-if="panel.id != ''">
@@ -26,7 +26,7 @@
 
       <!-- begin--底部按钮-->
       <div class="right-box-bottom-btns">
-        <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+        <button v-cancel="{obj:panel,func:esc}" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
           <span>{{$t('overall.cancel')}}</span>
         </button>
         <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="module-box-save" v-has="'panel_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index b3f0778e3..138ccd618 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-project" v-clickoutside="clickOutside">
+  <div class="right-box right-box-project" v-clickoutside="{obj:editProject,func:clickOutside}">
     <!-- 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">
@@ -25,7 +25,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editProject,func:esc}" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="project-save" v-has="'project_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/promServerBox.vue b/nezha-fronted/src/components/common/rightBox/promServerBox.vue
index 914541ddd..f624630fc 100644
--- a/nezha-fronted/src/components/common/rightBox/promServerBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/promServerBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-prom" v-clickoutside="clickOutside">
+  <div class="right-box right-box-prom" v-clickoutside="{obj:editPromServer,func:clickOutside}">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
       <button @click="del" type="button" v-has="'prom_delete'" v-if="editPromServer.id"
@@ -53,7 +53,7 @@
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="prom-esc"
+      <button v-cancel="{obj:editPromServer,func:esc}" id="prom-esc"
               class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
diff --git a/nezha-fronted/src/components/common/rightBox/roleBox.vue b/nezha-fronted/src/components/common/rightBox/roleBox.vue
index 25741fc24..613c5449f 100644
--- a/nezha-fronted/src/components/common/rightBox/roleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/roleBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-role" v-clickoutside="clickOutside">
+  <div class="right-box right-box-role" v-clickoutside="{obj:editRole,func:clickOutside}">
     <!-- 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="roles-edit-del"
@@ -47,7 +47,7 @@
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns" v-if="!detail">
-      <button @click="esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+      <button v-cancel="{obj:editRole,func:esc}" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
               id="roles-esc">
         <span>{{$t('overall.cancel')}}</span>
       </button>
@@ -138,27 +138,15 @@
       },
       getMenus:function(){
         this.menus = [];
-        if(this.editRole.id){
-          this.$get("sys/role/menu/"+this.editRole.id).then(response=>{
-            if(response.code == 200){
-              this.menus = response.data.menus;
-              this.editRole.menuIds = response.data.selectedIds;
-              if(this.$refs.menuTree){
-                this.$refs.menuTree.setCheckedKeys(this.editRole.menuIds,true);
-              }
-            }else{
-              this.$message.error("load menu faild")
-            }
-          })
-        }else{
-          this.$get("sys/menu").then(response=>{
-            if (response.code  == 200){
-              this.menus = response.data.list;
-            }else{
-              this.$message.error("load menu faild")
-            }
-          })
-        }
+
+        this.$get("sys/menu").then(response=>{
+          if (response.code  == 200){
+            this.menus = response.data.list;
+          }else{
+            this.$message.error("load menu faild")
+          }
+        })
+
       },
       labelFormatter:function(data,node){
         return data&&data.i18n?this.$t(data.i18n):data.name;
@@ -188,8 +176,11 @@
         }
       }
     },
-    mounted() {
+    created() {
       this.getMenus();
+    },
+    mounted() {
+
     },
     watch: {
       //将prop里的user转为组件内部对象
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
index 9e19007bf..e80d23dc7 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-project" v-clickoutside="clickOutside" >
+  <div class="right-box right-box-project" v-clickoutside="{obj:traffic,func:clickOutside}" >
 
     <!-- begin--标题-->
     <div class="right-box-title">{{$t('config.dc.traffic.title')}}</div>
@@ -16,7 +16,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button type="button" @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button type="button" v-cancel="{obj:traffic,func:esc}" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="project-save" type="button" v-has="'dc_trafficSetting_save'">
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 04813944d..63b7058f1 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -594,6 +594,13 @@
       },
       add() {
         this.asset = this.newAsset();
+        this.$get('sys/dict/all?type=assetType&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            if(this.asset.model&&!this.asset.model.type.code){
+              this.asset.model.type.code=response.data[0].code;
+            }
+          }
+        });
         this.rightBox.show = true;
       },
       batchEdit(){
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 9fff39d79..2f8f4739c 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -138,7 +138,7 @@
                   @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
     </transition>
     <transition name="right-box">
-      <account-box v-if="rightBox.show" :user="user" @close="closeRightBox"></account-box>
+      <account-box v-if="rightBox.show" :user="user" :roles="roles" @close="closeRightBox"></account-box>
     </transition>
   </div>
 </template>
@@ -251,6 +251,7 @@
         searchLabel: {}, //搜索参数
         scrollbarWrap: null,
         delFlag:false,
+        roles:[],
       }
     },
     methods: {
@@ -288,6 +289,9 @@
       },
       edit(u) {
         this.user = JSON.parse(JSON.stringify(u));
+        if(!this.user.userId){
+          this.user.roleIds = this.roles.find(t=>t.name == 'common').id;
+        }
         this.rightBox.show = true;
       },
       detail(u) {
@@ -340,6 +344,9 @@
       },
       add() {
         this.user = this.newUser();
+        if(!this.user.userId){
+          this.user.roleIds = this.roles.find(t=>t.name == 'common').id;
+        }
         this.rightBox.show = true;
       },
       statusChange(user) {
@@ -362,6 +369,16 @@
       newUser() {
         return JSON.parse(JSON.stringify(this.blankUser));
       },
+      getRoles:function(){
+        this.roles = [];
+        this.$get("sys/role?pageSize=-1").then(response=>{
+          if (response.code  == 200){
+            this.roles = response.data.list;
+          }else{
+            this.$message.error("load roles faild")
+          }
+        })
+      },
       pageNo(val) {
         this.pageObj.pageNo = val;
         this.getTableData();
@@ -480,6 +497,7 @@
       if (pageSize != 'undefined' && pageSize != null) {
         this.pageObj.pageSize = pageSize
       }
+      this.getRoles();
     },
     mounted() {
       //初始化表头
diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue
index 9998e950b..7b7b015c3 100644
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -196,7 +196,7 @@
             disabled: false
           }, {
             id: 5,
-            name: 'DC',
+            name: this.$t('config.promServer.dataCenter'),
             type: 'dc',
             label: 'dc',
             disabled: false
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index b6f484524..b1a76d01f 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -197,7 +197,7 @@
             disabled: false
           }, {
             id: 5,
-            name: 'DC',
+            name: this.$t('config.promServer.dataCenter'),
             type: 'dc',
             label: 'dc',
             disabled: false
@@ -317,7 +317,6 @@
           this.$message.error(this.$t("tip.noAccess"));
           return;
         }
-        this.tableData = [];
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
         this.loading = true;
@@ -347,6 +346,7 @@
         return JSON.parse(JSON.stringify(this.blankPromServer));
       },
       pageNo(val) {
+        console.log('page',val)
         this.pageObj.pageNo = val;
         this.getTableData();
       },
diff --git a/nezha-fronted/src/components/page/config/roles.vue b/nezha-fronted/src/components/page/config/roles.vue
index df406aad4..f9ada3953 100644
--- a/nezha-fronted/src/components/page/config/roles.vue
+++ b/nezha-fronted/src/components/page/config/roles.vue
@@ -176,7 +176,7 @@
             id: 10,
             name: this.$t('config.roles.name'),
             type: 'input',
-            label: this.$t('config.roles.name'),
+            label: 'name',
             disabled: false
           }],
         },
@@ -198,8 +198,13 @@
           return ;
         }
         this.role = JSON.parse(JSON.stringify(u));
-        this.rightBox.show = true;
-        this.rightBox.detail=false;
+        this.$get("sys/role/menu/"+this.role.id).then(response=>{
+          if(response.code == 200){
+            this.role.menuIds = response.data.selectedIds;
+            this.rightBox.show = true;
+            this.rightBox.detail=false;
+          }
+        })
       },
       del(u) {
         if(u.buildIn == 1){
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index e1f269638..c74504306 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -64,7 +64,7 @@
     height: 100vh;
     top: 0;
     left: 0;
-    z-index: 2100;
+    /*z-index: 2100;*/
   }
   /deep/ .el-color-picker{
     position: absolute;
@@ -145,8 +145,8 @@
 
 </style>
 <template key="chartBox">
-  <div @click.self="clickOutside" class="mc">
-    <div :class="boxClass" class="right-box right-box-add-chart z-top right-box-chart">
+  <div  class="mc">
+    <div :class="boxClass" class="right-box right-box-add-chart z-top right-box-chart" v-clickoutside="{obj:editChart,func:clickOutside}">
       <transition name="right-box">
         <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
       </transition>
@@ -477,7 +477,7 @@
       </div>
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" id="chart-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editChart,func:esc}" id="chart-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="SyncSave" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="chart-box-Sync" v-has:all="[`${from}_chart_save`, `${from}_chart_sync`]" v-if="showPanel.type && showPanel.type == 'model'">
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index 71e6d1701..9b5b28c93 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -191,7 +191,7 @@
           <div class="content-col-content" style="overflow: hidden">
             <!--<chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="ruleBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>-->
             <!--<chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>-->
-            <messageAsset v-show="messageAssetData.length>0" :data="messageAssetData" :col="col" :length="length" ref="assetHexagon" :from="'asset'" :hexagonSvgID="'hexagonSvg1'"/>
+            <messageAsset v-show="messageAssetData.length>0" :data="messageAssetData" :col="col" :length="length" ref="assetHexagon" :from="'asset'" :hexagonSvgID="'hexagonSvg1'" :show-tooltip="true"/>
             <div class="chart-no-data" v-if="messageAssetData.length===0">No Data</div>
           </div>
         </div>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 6e9ccea86..43d2dda69 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -6,7 +6,7 @@
       </div>
       <template v-else>
         <div class="top-tool-main-left">
-          <select-panel :current-panel="showPanel" :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'" :show-panel="showPanel"
+          <select-panel :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'" :show-panel="showPanel"
                         @deletePanel="del" @editPanel="edit" @selectPanel="panelChange" ref="selectPanel" style="width: 300px;">
             <template v-slot:header>
               <div class="panel-select-header">
@@ -171,7 +171,6 @@
         chartsData: [], //中间部分图表相关数据
         panelData: [],
         panelDataDragTmp:[],
-        dataTotalListBak:[],
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
           searchLabelList: [
@@ -196,7 +195,6 @@
         },
         panelId: 0,
         filterPanel:'',
-        showPanelList:[],
         //---图表相关参数--end
         scrollbarWrap: null,
       }
@@ -249,10 +247,7 @@
                 type: 'success',
                 message: this.$t("tip.deleteSuccess")
               });
-              if (this.showPanel.id === u.id) {
-                this.showPanel.id = '';
-              }
-              this.getTableData();
+              this.getTableData(true);
             } else {
               this.$message.error(response.msg);
             }
@@ -395,11 +390,12 @@
       /*时间条件查询--start*/
       // 选择日期变化
       dateChange(val) {
-        let nowTimeType=this.$refs.pickTime.$refs.timePicker.nowTimeType;
+        let 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.getTableData();
         this.getData(this.filter);
       },
       setSearchTime(type,val){//设置searchTime
@@ -442,7 +438,6 @@
         this.$get('panel').then(response => {
           if (response.code === 200) {
             this.panelData = response.data.list;
-            this.showPanelList = this.panelData;
             for (let i = 0; i < this.panelData.length; i++) {
               if (this.panelData[i].id == this.showPanel.id) {
                 this.showPanel.name = this.panelData[i].name;
@@ -454,11 +449,11 @@
       },
 
       getTableData(clearShowPanel) {
+        let vm = this;
+
         this.$get('panel?type=dashboard').then(response => {
           if (response.code === 200) {
             this.panelData = response.data.list;
-            this.showPanelList = this.panelData;
-            this.dataTotalListBak = [...response.data.list];
             let isInitData = false;
             if (response.data.list.length > 0) {
               if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
@@ -474,8 +469,11 @@
                 isInitData = true;
               }else{
                 handler(response.data.list);
+                this.filter.panelId = this.showPanel.id;
               }
-              this.filter.panelId = this.showPanel.id;
+              this.$nextTick(() => {
+                this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel);
+              });
             } else {
               this.showPanel.id = '';
               this.filter.panelId = '';
@@ -504,8 +502,6 @@
           }
         });
 
-        let vm = this;
-
         function handler(panelData) {
           panelData.forEach(panel => {
             if (panel.id == vm.showPanel.id) {
@@ -586,7 +582,7 @@
       clearInput() {
         this.$refs.queryPanel.focus();
       },
-      start (event) {
+      /*start (event) {
         // console.log('start', event, this.panelData);
 
         event.item.querySelector('.panelContent').style.background = '#d8dce1';
@@ -728,7 +724,7 @@
         let panelContent = dragClass.querySelector('.panelContent');
         panelContent.style.background = '#d8dce1';
 
-      },
+      },*/
       /*filterPanelFocus:function(e){
         e.stopPropagation();
       },
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index d3648303d..44e93d708 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -856,14 +856,6 @@
           }
         }
       },
-      currentProject: {
-        handler(n, o) {
-          console.log(n);
-          if (n && o.id != this.currentProject.id) {
-            this.pageType='project';
-          }
-        },
-      },
     },
     beforeDestroy() {
       bus.$off("project-page-type");
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 6170d34d8..5e6eca972 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -47,6 +47,7 @@ import mibBox from "./components/common/rightBox/mibBox";
 import leftMenu from "./components/common/leftMenu";
 import pickTime from "./components/common/pickTime";
 import bus from "./libs/bus";
+import {cancelWithChange} from "./components/common/js/tools";
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -203,6 +204,7 @@ Vue.use(plTable);
 Vue.use(hasPermission);
 
 /*指令*/
+Vue.directive('cancel',cancelWithChange)
 Vue.directive('clickoutside', clickoutside);
 window.resizing = false;
 window.vm = new Vue({