From 190e7669b2aba8fb0890e03bce3ec5f61d1488d0 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 19 May 2021 23:17:24 +0800
Subject: [PATCH 1/3] =?UTF-8?q?NEZ-601=20feat:=20=E4=BD=BF=E7=94=A8temp?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-detail.vue    |  53 +--
 .../src/components/charts/chart-list.vue      |   2 +-
 .../components/common/bottomBox/bottomBox.vue |   4 +-
 .../common/bottomBox/tabs/panelTabNew.vue     | 115 ++++--
 .../src/components/common/mixin/table.js      |  22 +-
 .../common/popBox/topToolMoreOptions.vue      |  14 +-
 .../rightBox/administration/userBox.vue       |  13 +-
 .../common/rightBox/chartTempBox.vue          | 128 ++++---
 .../components/common/rightBox/userBox.vue    | 342 ------------------
 .../common/table/settings/endpointTable.vue   |   3 +-
 .../src/components/page/dashboard/panel.vue   |   2 +-
 11 files changed, 193 insertions(+), 505 deletions(-)
 delete mode 100644 nezha-fronted/src/components/common/rightBox/userBox.vue

diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index 4db3ad90a..67d3d5732 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -76,7 +76,7 @@
                       </div>
                     </div>
                     <!-- endpoint-detail、asset、model的assetInfo的feature-->
-                    <div v-if="(data.from == $CONSTANTS.fromRoute.endpoint || data.from == $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'attribute'" :key="i" class="content-item">
+                    <div v-if="(data.from === $CONSTANTS.fromRoute.endpoint || data.from === $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'attribute'" :key="i" class="content-item">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">{{key}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
@@ -119,57 +119,8 @@
                       </div>
                     </div>
 
-                    <!-- project的projectInfo的project详情-->
-                    <div v-else-if="data.from == $CONSTANTS.fromRoute.project && data.type == 'projectInfo' && projectKey[key]" :key="i" class="content-item">
-                      <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                        <span class="content-text">{{projectKey[key]}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
-                      </div>
-                      <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                        <template v-if="key == 'alertStat'">
-                          <div class="active-icon dark-red"></div>
-                          <span>{{value[0]}}</span>&nbsp;&nbsp;
-                          <div class="active-icon red"></div>
-                          <span>{{value[1]}}</span>&nbsp;&nbsp;
-                          <div class="active-icon orange"></div>
-                          <span>{{value[2]}}</span>
-                        </template>
-                        <template v-else-if="projectKey[key]">
-                          <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                          <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
-                        </template>
-                      </div>
-                    </div>
-                    <!-- project的projectInfo的module详情-->
-                    <div v-else-if="data.from == $CONSTANTS.fromRoute.project && data.type == 'projectInfo' && moduleKey[key]" :key="i" class="content-item">
-                      <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                        <span class="content-text">{{moduleKey[key]}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
-                      </div>
-                      <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                        <template v-if="key == 'alertStat'">
-                          <div class="active-icon dark-red"></div>
-                          <span>{{value[0]}}</span>&nbsp;&nbsp;
-                          <div class="active-icon red"></div>
-                          <span>{{value[1]}}</span>&nbsp;&nbsp;
-                          <div class="active-icon orange"></div>
-                          <span>{{value[2]}}</span>
-                        </template>
-                        <template v-else-if="key == 'endpointStat'">
-                          <img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
-                          <span>{{value[0]}}</span>&nbsp;&nbsp;
-                          <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
-                          <span>{{value[1]}}</span>&nbsp;&nbsp;
-                        </template>
-                        <template v-else-if="moduleKey[key]">
-                          <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                          <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
-                        </template>
-                      </div>
-                    </div>
-
                     <!-- endpoint-detail的endpointInfo的endpoint详情-->
-                    <div v-else-if="data.from == $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && endpointKey[key]" :key="i" class="content-item">
+                    <div v-else-if="data.from === $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && endpointKey[key]" :key="i" class="content-item">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">{{endpointKey[key]}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 4aaec8440..438d1c177 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -116,7 +116,7 @@
                       @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"
+        <chart-detail  v-if="item.type === 'assetInfo' || item.type === 'projectInfo' || item.type === 'endpointInfo' || item.type === 'alertRuleInfo'" :key="'inner' + item.id" :ref="'editChart'+item.id"
                           :from="from" :panel-id="filter.panelId"
                           :chart-index="index"
                           @on-refresh-data="refreshChart"
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index a1754d9ad..52a15c072 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -51,9 +51,9 @@
         <alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
         <panel-tab-new v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
         <!--endpoint列表的tab-->
+        <panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
         <endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery>
         <alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
-        <panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.endpoint.endpointTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
         <!--chartTemp的Tab-->
         <panel-tab-new v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.chartTemp.chartTempTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
         <!--alertRule Tab-->
@@ -164,7 +164,7 @@ export default {
         },
         endpoint: {
           endpointTabTitle: [
-            // { prop: 'panel', name: 'Detail' },
+            { prop: 'panelTab', name: this.$t('overall.detail') },
             { prop: 'endpointQuery', name: 'Query' },
             { prop: 'endpointAlertMessage', name: this.$t('overall.alert') }
           ]
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index ec2d29a91..7a6557f3d 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -10,28 +10,13 @@
     >
       <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
       <template v-slot:top-tool-right>
-        <div v-if="from === fromRoute.asset" style="display: flex" >
+        <div v-if="from === fromRoute.asset" style="display: flex">
           <div class="top-tool-search margin-r-20">
-          <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive"  clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
-            <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
-          </el-input>
-        </div>
+            <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive"  clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
+              <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
+            </el-input>
+          </div>
           <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
-            <!--        <export-excel
-                      id="asset-list"
-                      :params="searchLabel"
-                      :permissions="{import: 'panel_chart_add', export: 'panel_view'}"
-                      class="top-tool-export margin-r-10"
-                      export-file-name="asset-charts"
-                      export-url="visual/panel/export"
-                      import-url="visual/panel/import"
-                      @afterImport="getTableData"
-                    >
-                      <template slot="optionZone">
-                        <button id="asset-create-asset" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="addChart">
-                          <i class="nz-icon nz-icon-create-square"></i></button>
-                      </template>
-                    </export-excel>-->
           <button id="asset-create-asset" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn margin-r-10" @click.stop="addChart">
             <i class="nz-icon nz-icon-create-square"></i>
           </button>
@@ -49,9 +34,45 @@
             :showLock="from === fromRoute.asset"
             @panelLockChange="panelLockChange"
           >
+            <template v-slot:after>
+              <el-dropdown-item v-has="'panel_chart_add'">
+                <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
+              </el-dropdown-item>
+            </template>
           </top-tool-more-options>
         </div>
-        <div v-else> <button  @click="panelLock=!panelLock" id="panel-lock"  :title='panelLock ? $t("overall.locked") : $t("overall.unlocked")' class="top-tool-btn margin-r-10"
+        <div v-else-if="from === fromRoute.endpoint" style="display: flex">
+          <div class="top-tool-search margin-r-20">
+            <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive"  clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
+              <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
+            </el-input>
+          </div>
+          <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
+          <button id="endpoint-create-chart" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn margin-r-10" @click.stop="addChart">
+            <i class="nz-icon nz-icon-create-square"></i>
+          </button>
+          <top-tool-more-options
+            id="asset-list"
+            :link="obj"
+            :params="filter"
+            :permissions="{import: 'panel_chart_add', export: 'panel_view'}"
+            :showCur="false"
+            :showLock="from === fromRoute.endpoint"
+            class="top-tool-export margin-r-10"
+            export-file-name="endpoint-charts"
+            export-url="visual/panel/export"
+            import-url="visual/panel/import"
+            @afterImport="getTableData"
+            @panelLockChange="panelLockChange"
+          >
+            <template v-slot:after>
+              <el-dropdown-item v-has="'panel_chart_add'">
+                <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
+              </el-dropdown-item>
+            </template>
+          </top-tool-more-options>
+        </div>
+        <div v-else> <button id="panel-lock" :title='panelLock ? $t("overall.locked") : $t("overall.unlocked")'  class="top-tool-btn margin-r-10" @click="panelLock=!panelLock"
                                type="button">
           <i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>
         </button></div>
@@ -69,12 +90,15 @@
             </div>
           </div>
           <button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
-          <transition name="right-box">
-            <chart-box :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" ref="addChartModal" v-if="rightBox.show"></chart-box>
-          </transition>
         </div>
       </template>
     </nz-bottom-data-list>
+    <transition name="right-box">
+      <chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+    </transition>
+    <transition name="right-box">
+      <chart-temp-box v-if="rightBox.chartTemp.show" :from="from" :obj="chart" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @on-create-success="createSuccess"></chart-temp-box>
+    </transition>
   </div>
 </template>
 
@@ -85,6 +109,7 @@ import bus from '../../../../libs/bus'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import { fromRoute } from '@/components/common/js/constants'
+import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 export default {
   name: 'panelTabNew',
@@ -102,7 +127,12 @@ export default {
       showTopBtn: false, // top按钮
       visible: false,
       rightBox: { // 面板弹出框相关
-        show: false
+        chart: {
+          show: false
+        },
+        chartTemp: {
+          show: false
+        }
       },
       tableHover: false,
       searchTime: bus.getTimezontDateRange(),
@@ -156,7 +186,13 @@ export default {
       showPanel: {
         name: '',
         type: this.from,
-        id: ''
+        id: null
+      },
+      blankChartTemp: {
+        varType: 1,
+        pid: '',
+        panelId: null,
+        varIds: []
       },
       // removeModal: false, // 删除弹出
       // deleteObj: {}, // 删除对象
@@ -169,7 +205,8 @@ export default {
     chartBox,
     chartList,
     nzBottomDataList,
-    topToolMoreOptions
+    topToolMoreOptions,
+    chartTempBox
   },
   methods: {
     // 刷新
@@ -187,7 +224,18 @@ export default {
     /* 图表相关操作--start */
     addChart () {
       this.chart = this.newChart()
-      this.rightBox.show = true
+      this.rightBox.chart.show = true
+    },
+    addChartByTemp () {
+      this.chart = Object.assign({}, this.blankChartTemp)
+      this.chart.panelId = this.showPanel.id
+      if (this.from === fromRoute.endpoint) {
+        this.chart.varType = 2
+      }
+      if (this.from === fromRoute.asset || this.from === fromRoute.endpoint) {
+        this.chart.varIds.push(this.obj.id)
+      }
+      this.rightBox.chartTemp.show = true
     },
     newChart () {
       return JSON.parse(JSON.stringify(this.blankChart))
@@ -197,7 +245,8 @@ export default {
       this.$emit('changeTab', tab)
     },
     closeRightBox (refresh) {
-      this.rightBox.show = false
+      this.rightBox.chart.show = false
+      this.rightBox.chartTemp.show = false
       if (refresh) {
         this.refresh()
         if (this.from === fromRoute.chartTemp) {
@@ -222,7 +271,7 @@ export default {
         data.param = { url: '', threshold: '' }
       }
       this.chart = JSON.parse(JSON.stringify(data))
-      this.rightBox.show = true
+      this.rightBox.chart.show = true
     },
     // 移除图表:弹出确认框询问
     delChart (data, from) {
@@ -251,7 +300,7 @@ export default {
       this.chart.panelId = this.showPanel.id
       this.chart.panelName = this.showPanel.name
       this.chart.isGroup = true
-      this.rightBox.show = true
+      this.rightBox.chart.show = true
     },
     delChartOk () {
       this.getData(this.filter)
@@ -317,10 +366,10 @@ export default {
     },
     // 公用操作
     getTableData (linkId) {
-      if (this.from === this.fromRoute.alertRule || this.from === this.fromRoute.endpoint) {
+      if (this.from === this.fromRoute.alertRule) {
         this.getData(this.filter)
       } else {
-        if (this.from == this.$CONSTANTS.fromRoute.chartTemp) {
+        if (this.from === this.fromRoute.chartTemp) {
           if (this.obj.type === 'group') {
             this.$get('/visual/panel/chart', { ids: this.obj.id, groupId: 0 }).then(res => {
               res.data.list.forEach(item => {
diff --git a/nezha-fronted/src/components/common/mixin/table.js b/nezha-fronted/src/components/common/mixin/table.js
index e4fa7b5a3..fddf9282c 100644
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -25,10 +25,6 @@ export default {
   methods: {
     tableOperation ([command, row, param]) {
       switch (command) {
-        case 'edit': {
-          this.$emit('edit', row)
-          break
-        }
         case 'delete': {
           this.$emit('del', row)
           break
@@ -37,24 +33,12 @@ export default {
           this.$emit('showBottomBox', 'recordTab', row)
           break
         }
-        case 'cli': {
-          this.$emit('cli', row)
-          break
-        }
-        case 'duplicate': {
-          this.$emit('duplicate', row)
-          break
-        }
-        case 'copy': {
-          this.$emit('copy', row)
-          break
-        }
-        case 'shutdown': {
-          // this.$emit('copy', row)
-          this.$emit('shutdown', row)
+        case 'endpointQuery': {
+          this.$emit('showBottomBox', 'endpointQuery', row)
           break
         }
         default:
+          this.$emit(command, row)
           break
       }
     },
diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
index 653684db7..ba1ec45ca 100644
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -7,6 +7,7 @@
       <el-dropdown-item v-if="showLock">
         <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>{{panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
       </el-dropdown-item>
+      <!-- import、export之前的内容 -->
       <slot name="before"></slot>
       <el-dropdown-item v-if="importUrl">
         <div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
@@ -14,10 +15,8 @@
       <el-dropdown-item v-if="exportUrl">
         <div id="chart-export"@click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div>
       </el-dropdown-item>
+      <!-- import、export之后的内容 -->
       <slot name="after"></slot>
-<!--      <el-dropdown-item v-has="'panel_chart_add'">
-        <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add template</div>
-      </el-dropdown-item>-->
     </el-dropdown-menu>
 
     <el-dialog :close-on-click-modal="importBox.type!=3" :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
@@ -27,9 +26,6 @@
             <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
             <i class="nz-icon nz-icon-upload"></i>
             <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-            <!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-              <span class="top-tool-btn-txt" >{{$t('overall.upload')}}</span>
-            </button>-->
           </el-upload>
         </div>
         <div slot="footer" class="footer">
@@ -74,9 +70,6 @@
             <div class="result-title">{{$t('overall.result.failedDetail')}}:</div>
             <div v-if="importResult&&importResult.failDetail" class="result-detail">
               <div style="height: 100%; overflow: auto;">
-                <!-- <ul>
-                   <li v-for="(item,index) in importResult.failDetail"><span>{{item.lineNo}}</span>:<span>{{item.errorMsg}}</span> </li>
-                 </ul>-->
                 <template v-for="(item, index) in importResult.failDetail">
                   <div :key="index" class="import-result-block">
                     <div class="import-result-item">
@@ -94,9 +87,6 @@
             <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" @click="rollbackImport">
               <span>{{$t('overall.rollbackImport')}}</span>
             </button>
-            <!--<button  @click="closeDialog"  class="el-button el-button&#45;&#45;default el-button&#45;&#45;small">-->
-            <!--<span>{{$t('overall.cancel')}}</span>-->
-            <!--</button>-->
           </div>
         </div>
       </div>
diff --git a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
index 8608b6cf2..e1f09ca8a 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="right-box__container">
       <div class="container__form">
-        <el-form ref="userForm" :model="editUser" :rules="editUser.id ? rules2 : rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
+        <el-form ref="userForm" :model="editUser" :rules="editUser.id ? rules2 : rules" label-position="top" label-width="120px">
           <!--name-->
           <el-form-item :label="$t('config.user.name')" prop="name">
             <el-input id="account-input-name" v-model="editUser.name" :disabled="editUser.username==='admin' && editUser.id==1"
@@ -39,7 +39,16 @@
           </el-form-item>
           <!--roles-->
           <el-form-item :label="$t('config.user.roles')" prop="roleIds">
-            <el-select id="account-input-roleIds" v-model="editUser.roleIds" :disabled="(editUser.username==='admin') && editUser.id==1"  clearable collapse-tags placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="()=>{this.$forceUpdate()}">
+            <el-select id="account-input-roleIds"
+                       v-model="editUser.roleIds"
+                       :disabled="(editUser.username==='admin') && editUser.id==1"
+                       class="right-box__select"
+                       clearable
+                       collapse-tags
+                       placeholder=""
+                       popper-class="right-box-select-dropdown prevent-clickoutside"
+                       size="small"
+                       @change="()=>{this.$forceUpdate()}">
               <template v-for="role in roles">
 <!--                <el-option :key="role.id" :label="role.i18n?$t(role.i18n+''):role.name" :value="role.id"></el-option>-->
                 <el-option :key="role.id" :label="role.name" :value="role.id"></el-option>
diff --git a/nezha-fronted/src/components/common/rightBox/chartTempBox.vue b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
index 15a470dca..73451d71c 100644
--- a/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
@@ -8,10 +8,18 @@
     </div>
     <div class="right-box__container">
       <div class="container__form">
-        <el-form ref="userForm" :model="editChartTemp" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
+        <el-form ref="userForm" :model="editChartTemp" :rules="rules" label-position="top" label-width="120px">
           <!--type-->
-          <el-form-item :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
-            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group" @change="varTypeChange">
+          <el-form-item v-if="from !== fromRoute.endpoint" :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
+            <el-select id="chart-box-group"
+                       v-model="editChartTemp.varType"
+                       class="right-box__select"
+                       clearable
+                       placeholder=""
+                       popper-class="right-box-select-dropdown prevent-clickoutside"
+                       size="small"
+                       value-key="chartType"
+                       @change="varTypeChange">
               <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
                 <span class="panel-dropdown-label-txt" >{{item.name}}</span>
               </el-option>
@@ -19,7 +27,13 @@
           </el-form-item>
           <!--chartTemp list-->
           <el-form-item :label="$t('dashboard.panel.chartForm.pid')" prop="pid">
-            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group" >
+            <el-select id="chart-box-group"
+                       v-model="editChartTemp.pid"
+                       class="right-box__select" clearable
+                       placeholder=""
+                       popper-class="right-box-select-dropdown prevent-clickoutside"
+                       size="small"
+                       value-key="chartType" >
               <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
                 <span class="panel-dropdown-label-txt" >{{item.name}}</span>
               </el-option>
@@ -27,18 +41,21 @@
           </el-form-item>
 
           <!-- 选择资产，穿梭框 -->
-          <div class="form__sub-title">{{editChartTemp.varType === 1 ? 'Asset' : 'Endpoint'}}</div>
-          <nz-transfer ref="transfer"
-                       :page-obj="transfer.pageObj"
-                       :search-msg="transfer.searchMsg"
-                       :table-data="transfer.tableData"
-                       style="margin-bottom: 20px;"
-                       :tableTitle="transferTableTitle"
-                       @leftToRight="addAsset"
-                       @search="search"
-                       @rightToLeft="removeAsset">
-            <template v-slot:title>Selected</template>
-          </nz-transfer>
+          <template v-if="showTransfer">
+            <div class="form__sub-title">{{editChartTemp.varType === 1 ? 'Asset' : 'Endpoint'}}</div>
+            <nz-transfer ref="transfer"
+                         :from="from"
+                         :page-obj="transfer.pageObj"
+                         :search-msg="transfer.searchMsg"
+                         :table-data="transfer.tableData"
+                         :tableTitle="transferTableTitle"
+                         style="margin-bottom: 20px;"
+                         @leftToRight="addAsset"
+                         @rightToLeft="removeAsset"
+                         @search="search">
+              <template v-slot:title>Selected</template>
+            </nz-transfer>
+          </template>
         </el-form>
       </div>
     </div>
@@ -55,6 +72,7 @@
 
 <script>
 import nzTransfer from '@/components/common/nzTransfer'
+import { fromRoute } from '@/components/common/js/constants'
 export default {
   name: 'chartTemp',
   components: {
@@ -63,20 +81,14 @@ export default {
   props: {
     obj: {
       type: Object
-    }
-  },
-  computed: {
-    isCurrentUser () {
-      return function (username) {
-        return localStorage.getItem('nz-username') == username
-      }
-    }
+    },
+    from: String
   },
   data () {
     return {
+      fromRoute,
       editChartTemp: {},
       url: 'visual/panel/chart/fromTmpl',
-      rightBox: { model: { show: false } },
       rules: { // 表单校验规则
         varType: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -171,6 +183,16 @@ export default {
     this.getChartTempData()
     this.getTableData()
   },
+  computed: {
+    showTransfer () {
+      if (this.from === fromRoute.endpoint) {
+        return false
+      } else if (this.from === fromRoute.asset && this.editChartTemp.varType === 1) {
+        return false
+      }
+      return true
+    }
+  },
   methods: {
     clickOutside () {
       this.esc(false)
@@ -185,14 +207,24 @@ export default {
       this.prevent_opt.save = true
       if (!this.transfer.selectedData.length) {
         this.prevent_opt.save = false
-        if (this.editChartTemp.varType === 1) {
-          this.$message.error(this.$t('dashboard.panel.chartForm.selectAsset'))
-        } else {
-          this.$message.error(this.$t('dashboard.panel.chartForm.selectEndpoint'))
+        if (this.from !== fromRoute.endpoint) { // 来自endpoint时不校验
+          if (this.editChartTemp.varType === 1) {
+            if (this.from !== fromRoute.asset) { // 来自asset且type=1时不校验
+              this.$message.error(this.$t('dashboard.panel.chartForm.selectAsset'))
+            }
+          } else {
+            this.$message.error(this.$t('dashboard.panel.chartForm.selectEndpoint'))
+          }
+          return
         }
-        return
       }
-      this.editChartTemp.varIds = this.transfer.selectedData.map(item => item.id)
+      if (this.from === fromRoute.asset && this.editChartTemp.varType === 1) { // 来自asset时取assetId
+        this.editChartTemp.varIds = this.obj.varIds
+      } else if (this.from === fromRoute.endpoint) { // 来自endpoint时取endpointId
+        this.editChartTemp.varIds = this.obj.varIds
+      } else {
+        this.editChartTemp.varIds = this.transfer.selectedData.map(item => item.id)
+      }
       this.$refs.userForm.validate((valid) => {
         if (valid) {
           if (this.editChartTemp.id) {
@@ -267,7 +299,11 @@ export default {
     },
     getEndpointData () {
       this.$refs.transfer.startLoading()
-      this.$get('monitor/endpoint', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
+      const idFilter = {}
+      if (this.from === fromRoute.asset) {
+        idFilter.assetIds = this.obj.varIds[0]
+      }
+      this.$get('monitor/endpoint', { ...this.transfer.searchLabel, ...this.transfer.pageObj, ...idFilter }).then(response => {
         this.$refs.transfer.endLoading()
         if (response.code === 200) {
           this.transfer.tableData = response.data.list
@@ -278,8 +314,12 @@ export default {
     varTypeChange () {
       this.getChartTempData()
       this.editChartTemp.pid = ''
-      this.transfer.selectedData = []
-      this.$refs.transfer.selectedData = []
+      // 从asset详情页进来的，varType=1时不显示asset列表，varId默认为asset的id; 从endpoint详情页进来的，varId默认为endpoint的id
+      if ((this.from === fromRoute.asset && this.editChartTemp.varType === 1) || this.from === fromRoute.endpoint) {
+        this.transfer.selectedData = this.obj.varIds
+      } else {
+        this.transfer.selectedData = []
+      }
       if (this.editChartTemp.varType === 1) {
         this.transferTableTitle = [
           {
@@ -365,12 +405,6 @@ export default {
             type: 'input',
             label: 'id',
             disabled: false
-          }, {
-            id: 14,
-            name: this.$t('asset.asset'),
-            type: 'query',
-            label: 'query',
-            disabled: false
           }, {
             id: 34,
             name: this.$t('project.project.projectName'),
@@ -386,8 +420,20 @@ export default {
             label: 'moduleName',
             disabled: false
           }]
+        if (this.from !== fromRoute.asset) {
+          this.transfer.searchMsg.searchLabelList.push({
+            id: 14,
+            name: this.$t('asset.asset'),
+            type: 'query',
+            label: 'query',
+            disabled: false
+          })
+        }
       }
-      this.getTableData()
+      this.$nextTick(() => {
+        this.$refs.transfer.selectedData = []
+        this.getTableData()
+      })
     }
   }
 }
diff --git a/nezha-fronted/src/components/common/rightBox/userBox.vue b/nezha-fronted/src/components/common/rightBox/userBox.vue
deleted file mode 100644
index 0c9923b0b..000000000
--- a/nezha-fronted/src/components/common/rightBox/userBox.vue
+++ /dev/null
@@ -1,342 +0,0 @@
-<template>
-  <div v-clickoutside="{obj:editUser,func:clickOutside}" class="right-box right-box-account">
-    <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns right-box-form-delete">
-      <button v-if="editUser.id&&editUser.id!==1" id="account-edit-del" v-has="'account_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien"
-              type="button"
-              @click="del">
-        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-      </button>
-    </div>
-    <!-- end--顶部按钮-->
-
-    <!-- begin--标题-->
-    <div class="right-box-title">{{editUser.id ? ($t("config.account.editAccount")) : $t("config.account.createAccount")}}</div>
-    <!-- end--标题-->
-
-    <!-- begin--表单-->
-    <div class="right-box-form-box">
-      <el-form ref="accountForm" :model="editUser" :rules="editUser.id ? rules2 : rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px">
-        <!--username-->
-        <el-form-item :label="$t('config.account.account')" prop="username">
-          <el-input id="account-input-username" v-model="editUser.username" :disabled="editUser.username==='admin' && editUser.id==1" autocomplete="new-password"
-                    maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
-        </el-form-item>
-        <!--password-->
-        <el-form-item :label="$t('config.account.pin')" prop="pin">
-          <el-input id="account-input-password" v-model="editUser.pin" autocomplete="new-password" maxlength="16" placeholder=""
-                    show-word-limit size="small" type="password" @blur="pinBlur"></el-input>
-        </el-form-item>
-        <!--pinChange-->
-        <el-form-item :label="$t('config.account.confirmPin')" label-width="200px" prop="pinChange">
-          <el-input id="account-input-pinChange" v-model="editUser.pinChange" autocomplete="new-password" maxlength="16" placeholder=""
-                    show-word-limit size="small" type="password"></el-input>
-        </el-form-item>
-        <!--email-->
-        <el-form-item label="E-mail" prop="email">
-          <el-input id="account-input-email" v-model="editUser.email" placeholder="" size="small" type="text"></el-input>
-        </el-form-item>
-        <!--enable-->
-        <el-form-item :label="$t('config.account.enable')">
-          <el-switch id="account-input-status" v-model="editUser.status" :disabled="isCurrentUser(editUser.username) || (editUser.username==='admin' && editUser.id==1) " active-color="#ee9d3f" active-value="1"
-                     inactive-value="0">
-          </el-switch>
-        </el-form-item>
-        <!--roles-->
-        <el-form-item :label="$t('config.account.roles')" prop="roleIds">
-          <el-select id="account-input-roleIds" v-model="editUser.roleIds" :disabled="(editUser.username==='admin') && editUser.id==1" clearable collapse-tags placeholder="" popper-class="config-dropdown" size="small" @change="()=>{this.$forceUpdate()}">
-            <template v-for="role in roles">
-              <el-option :key="role.id" :label="role.i18n?$t(role.i18n):role.name" :value="role.id"></el-option>
-            </template>
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="editUser.id" :label="$t('config.account.createTime')">
-          <div class="right-box-form-content-txt">{{editUser.createTime}}</div>
-        </el-form-item>
-
-        <div class="right-box-sub-title">{{$t('config.account.notification')}}
-          <button id="add-notification" :disabled="addDisabled" class="float-right" type="button" @click="addNotification">
-            <span><i class="nz-icon nz-icon-create-square"></i></span>
-          </button>
-        </div>
-
-        <div class="right-box-line"></div>
-        <div id="account-input-box">
-          <el-form-item v-for="(notification, index) in editUser.notifications" :key="index" class="notification-item">
-            <el-select v-model="notification.scriptId" placeholder="" popper-class="no-style-class" size="small" style="display: inline-block;width: 100px;margin-left: 15px">
-              <el-option v-for="(item, i) in selectableScripts" :key="i" :disabled="item.disabled" :label="item.name" :value="item.id"></el-option>
-            </el-select>
-            <el-input v-model="notification.account" placeholder="" size="small" style="width: calc(100% - 157px);"></el-input>
-            <span style="padding-left: 5px;" @click="removeNotification(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
-          </el-form-item>
-        </div>
-      </el-form>
-    </div>
-    <!-- end--表单-->
-    <!--底部按钮-->
-    <div class="right-box__footer">
-      <button id="account-esc" v-cancel="{obj:editUser,func:esc}"
-              class="footer__btn">
-        <span>{{$t('overall.cancel')}}</span>
-      </button>
-      <button id="account-save" :class="{'nz-btn-disabled':prevent_opt.save}"
-              :disabled="prevent_opt.save"
-              class="footer__btn" @click="save"
-      >
-        <span>{{$t('overall.save')}}</span>
-      </button>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'accountBox',
-  props: {
-    obj: Object
-  },
-  computed: {
-    isCurrentUser () {
-      return function (username) {
-        return localStorage.getItem('nz-username') == username
-      }
-    },
-    addDisabled () {
-      const enabled = this.selectableScripts.filter(item => {
-        return !item.disabled
-      })
-      return enabled.length === 0
-    }
-  },
-  data () {
-    const validatepin = (rule, value, callback) => { // 确认密码的二次校验
-      if (value === '' && this.editUser.pin) {
-        callback(new Error(this.$t('config.account.inputConfirmPin')))
-      } else if (value !== this.editUser.pin) {
-        callback(new Error(this.$t('config.account.confirmPinErr')))
-      } else {
-        callback()
-      }
-    }
-    return {
-      scriptIds: [],
-      rules: { // 表单校验规则
-        username: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        pin: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        pinChange: [
-          { validator: validatepin, 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' }
-        ],
-        pinChange: [
-          { validator: validatepin, trigger: 'blur' }
-        ],
-        roleIds: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        email: [
-          { type: 'email', message: this.$t('validate.email') }
-        ]
-      },
-      editUser: {},
-      scripts: [],
-      selectableScripts: [],
-      pinChange: '',
-      roles: []
-    }
-  },
-  methods: {
-    /* 关闭弹框 */
-    esc (refresh) {
-      this.prevent_opt.save = false
-      console.log('cancel function ')
-      this.$emit('close', refresh)
-    },
-    clickOutside () {
-      this.esc(false)
-    },
-    /* 保存 */
-    save () {
-      if (this.prevent_opt.save) { return } ;
-      this.prevent_opt.save = true
-      this.$refs.accountForm.validate(valid => {
-        if (valid) {
-          const editUser = JSON.parse(JSON.stringify(this.editUser))
-          editUser.roleIds = [editUser.roleIds]
-          if (this.editUser.id) {
-            this.$put('sys/user', editUser).then(response => {
-              this.prevent_opt.save = false
-              if (response.code === 200) {
-                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-                this.esc(true)
-              } else {
-                this.$message.error(response.msg)
-              }
-            })
-          } else {
-            editUser.roleIds = this.roles.find(t => t.name == 'common').id
-            this.$post('sys/user', editUser).then(response => {
-              this.prevent_opt.save = false
-              if (response.code === 200) {
-                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-                this.esc(true)
-              } else {
-                this.$message.error(response.msg)
-              }
-            })
-          }
-        } else {
-          this.prevent_opt.save = false
-          return false
-        }
-      })
-    },
-    /* 删除 */
-    del () {
-      if (this.prevent_opt.save) { return }
-      this.prevent_opt.save = true
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete('sys/user?ids=' + this.editUser.id).then(response => {
-          if (response.code === 200) {
-            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.esc(true)
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-        this.prevent_opt.save = false
-      }).catch(() => {
-        this.prevent_opt.save = false
-      })
-    },
-    /* 密码失去焦点 检验确认密码 */
-    pinBlur () {
-      if (this.editUser.pin && this.editUser.pinChange) {
-        this.$refs.accountForm.validateField('pinChange')
-      }
-    },
-    getScripts () {
-      this.$get('/alert/script?pageNo=1&pageSize=-1').then(response => {
-        this.scripts = response.data.list
-        this.getSelectableScripts()
-      })
-    },
-
-    getSelectableScripts () {
-      const userNotifications = this.editUser.notifications
-      if (userNotifications) {
-        this.selectableScripts = this.scripts.map(item => {
-          const exist = this.editUser.notifications.some(n => {
-            return item.id === n.scriptId
-          })
-          if (exist) {
-            this.$set(item, 'disabled', true)
-          } else {
-            this.$set(item, 'disabled', false)
-          }
-          return item
-        })
-      } else {
-        this.selectableScripts = this.scripts.map(item => {
-          this.$set(item, 'disabled', false)
-          return item
-        })
-      }
-    },
-    addNotification () {
-      const scripts = this.selectableScripts.find(item => {
-        return item.disabled === false
-      })
-      if (scripts) {
-        if (!this.editUser.notifications) {
-          this.editUser.notifications = []
-        }
-        this.editUser.notifications.push({ scriptId: scripts.id, account: '' })
-      }
-    },
-    getRoles () {
-      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')
-        }
-      })
-    },
-    removeNotification (index) {
-      this.editUser.notifications.splice(index, 1)
-    }
-  },
-  mounted () {
-    this.getScripts()
-    this.getRoles()
-  },
-  watch: {
-    // 将prop里的user转为组件内部对象
-    obj: {
-      immediate: true,
-      deep: true,
-      handler (n) {
-        this.editUser = JSON.parse(JSON.stringify(n))
-        this.editUser.roleIds = n.roles && n.roles.map(t => t.id)[0]
-      }
-    },
-    'editUser.notifications': {
-      deep: true,
-      immediate: true,
-      handler (n) {
-        this.getSelectableScripts()
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-@import '@/assets/css/common/rightBoxCommon.scss';
-  .right-box-account {
-    .right-box-sub-title {
-      #add-notification {
-        border: none;
-        outline: none;
-        cursor: pointer;
-
-        i {
-          font-size: 17px;
-          background-color: #f6f6f6;
-        }
-      }
-    }
-  }
-
-  .notification-item {
-    .el-select {
-      width: 100px;
-
-    }
-  }
-</style>
-<style scoped>
-  .form-item-title{
-    position: absolute;
-    left: -120px;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index 349c752a4..8eb82d66d 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -94,12 +94,13 @@
       fixed="right">
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
-        <button class="table-operation-item"  @click="showBottomBox('endpointQuery', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+        <button class="table-operation-item"  @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
         <el-dropdown size="medium" v-has="['monitor_endpoint_edit','monitor_endpoint_delete']" trigger="hover" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
           </div>
           <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index e8116dde1..842322c25 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -57,7 +57,7 @@
                 </template>
                 <template v-slot:after>
                   <el-dropdown-item v-has="'panel_chart_add'">
-                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
+                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{$t('overall.AddByTemplate')}}</div>
                   </el-dropdown-item>
                 </template>
               </top-tool-more-options>

From 8676ce648bc52dacfe0412c9f9f51e26d2d35e92 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 20 May 2021 09:18:05 +0800
Subject: [PATCH 2/3] =?UTF-8?q?NEZ-641=20fix:=20alert-msg=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E5=A2=9E=E5=8A=A0=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bottomBox/tabs/alertMessageTabNew.vue      | 18 ++++++++++++++++++
 .../src/components/page/alert/alertMessage.vue | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
index a11a6f90c..a40307952 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -285,6 +285,24 @@ export default {
         })
       }
     },
+    del (row) {
+      const self = this
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete(this.url + '?ids=' + row.id + '&state=3').then(response => {
+          if (response.code === 200) {
+            self.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            self.getTableData()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
     getTableData (state) {
       if (state) {
         this.state = state
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 4dce6eb2a..ed3bbaecc 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -227,6 +227,24 @@ export default {
         this.queryChartDate()
       })
     },
+    del (row) {
+      const self = this
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete(this.url + '?ids=' + row.id + '&state=3').then(response => {
+          if (response.code === 200) {
+            self.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            self.getTableData()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
     messageDetail (row) {
       this.$get('/alert/rule/' + row.alertRule.id).then(res => {
         this.currentMsg = { ...row, alertRule: { ...res.data } }

From 9488eef644cc5b2b330af959a0502c9105c329ae Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 20 May 2021 11:39:12 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E6=90=9C=E7=B4=A2=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=9B=BD=E9=99=85=E5=8C=96=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/common/language/cn.js        | 7 +++++--
 nezha-fronted/src/components/common/language/en.js        | 5 ++++-
 nezha-fronted/src/components/page/alert/alertMessage.vue  | 2 +-
 nezha-fronted/src/components/page/asset/asset.vue         | 2 +-
 nezha-fronted/src/components/page/config/agent.vue        | 4 ++--
 nezha-fronted/src/components/page/config/assetMeta.vue    | 8 ++++----
 nezha-fronted/src/components/page/config/credentials.vue  | 2 +-
 nezha-fronted/src/components/page/config/model.vue        | 2 +-
 .../src/components/page/monitor/endpoint/endpointList.vue | 4 ++--
 .../src/components/page/monitor/module/moduleList.vue     | 4 ++--
 .../src/components/page/monitor/project/projectList.vue   | 4 ++--
 11 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 490b24853..11edd5899 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -14,6 +14,9 @@ const cn = {
     twoDay: '2 天',
     week: '1 周',
     folder: '文件夹',
+    key: '键名',
+    state: '状态',
+    projectName: '系统名称',
     startTime: '开始时间',
     endTime: '结束时间',
     metric: '指标',
@@ -76,7 +79,7 @@ const cn = {
     createPrometheusServer: '新增Agent',
     createDatacenter: '新增数据中心',
     active: '活跃',
-    type: '类别',
+    type: '类型',
     detail: '详细信息',
     changePin: '修改密码',
     createCabinet: '新增机柜',
@@ -630,7 +633,7 @@ const cn = {
     assetPing: 'Ping',
     lastReply: 'Ping最后应答',
     vendor: '厂商',
-    name: 'Name',
+    name: '名称',
     dc: '数据中心',
     type: '主机地址',
     pingInfo: 'Ping'
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 7688a3760..7e0abb12b 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -20,6 +20,9 @@ const en = {
     twoDay: '2 days',
     week: '1 week',
     folder: 'Folder',
+    key: 'Key',
+    state: 'State',
+    projectName: 'project name',
     startTime: 'Start time',
     endTime: 'End time',
     metric: 'Metric',
@@ -126,7 +129,7 @@ const en = {
     copySuccess: 'Copy success',
     parent: 'Parent',
     dc: 'Data center',
-    labels: 'Labels',
+    labels: 'Label',
     moreOption: 'More option',
     copy: 'Copy',
     silence: 'Silence',
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index ed3bbaecc..ff71e0ec7 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -168,7 +168,7 @@ export default {
             label: 'summary',
             disabled: false
           }, {
-            name: 'Labels',
+            name: this.$t('overall.labels'),
             type: 'input',
             label: 'labels',
             disabled: false
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index c4c6d6143..967e278da 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -158,7 +158,7 @@ export default {
           label: 'ids',
           disabled: false
         }, {
-          name: 'Name',
+          name: this.$t('overall.name'),
           type: 'input',
           label: 'name',
           disabled: false
diff --git a/nezha-fronted/src/components/page/config/agent.vue b/nezha-fronted/src/components/page/config/agent.vue
index bd69c1be0..d74e801fb 100644
--- a/nezha-fronted/src/components/page/config/agent.vue
+++ b/nezha-fronted/src/components/page/config/agent.vue
@@ -139,7 +139,7 @@ export default {
           label: 'ids',
           disabled: false
         }, {
-          name: this.$t('config.agent.dataCenter'),
+          name: this.$t('dashboard.overview.dataCenter.dataCenter'),
           type: 'dc',
           label: 'dc',
           disabled: false
@@ -149,7 +149,7 @@ export default {
           label: 'promType',
           disabled: false
         }, {
-          name: this.$t('state.state'),
+          name: this.$t('overall.state'),
           type: 'select',
           label: 'promState',
           disabled: false
diff --git a/nezha-fronted/src/components/page/config/assetMeta.vue b/nezha-fronted/src/components/page/config/assetMeta.vue
index 19d8becd0..b56ebeb9c 100644
--- a/nezha-fronted/src/components/page/config/assetMeta.vue
+++ b/nezha-fronted/src/components/page/config/assetMeta.vue
@@ -108,22 +108,22 @@ export default {
         zheze_none: true,
         searchLabelList: [
           {
-            name: 'Id',
+            name: 'ID',
             type: 'input',
             label: 'ids',
             disabled: false
           }, {
-            name: 'Name',
+            name: this.$t('overall.name'),
             type: 'input',
             label: 'name',
             disabled: false
           }, {
-            name: 'Key',
+            name: this.$t('overall.key'),
             type: 'input',
             label: 'key',
             disabled: false
           }, {
-            name: 'Group',
+            name: this.$t('config.assetLabel.group'),
             type: 'group',
             label: 'group',
             disabled: false
diff --git a/nezha-fronted/src/components/page/config/credentials.vue b/nezha-fronted/src/components/page/config/credentials.vue
index ea00ccfe0..b79f3a8df 100644
--- a/nezha-fronted/src/components/page/config/credentials.vue
+++ b/nezha-fronted/src/components/page/config/credentials.vue
@@ -97,7 +97,7 @@ export default {
           label: 'name',
           disabled: false
         }, {
-          name: 'Type',
+          name: this.$t('overall.type'),
           type: 'select',
           label: 'credentialType',
           disabled: false
diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue
index 7d86f7b17..1ab234221 100644
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -73,7 +73,7 @@ export default {
           label: 'ids',
           disabled: false
         }, {
-          name: 'Name',
+          name: this.$t('overall.name'),
           type: 'input',
           label: 'name',
           disabled: false
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 1917e24ef..fe58a89e9 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -123,13 +123,13 @@ export default {
             label: 'ids',
             disabled: false
           }, {
-            name: 'Name',
+            name: this.$t('overall.name'),
             type: 'input',
             label: 'name',
             disabled: false
           },
           {
-            name: this.$t('asset.asset'),
+            name: this.$t('overall.asset'),
             type: 'input',
             label: 'assetName',
             disabled: false
diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
index 441a3a3c3..e0b75263b 100644
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -126,13 +126,13 @@ export default {
             label: 'ids',
             disabled: false
           }, {
-            name: 'Name',
+            name: this.$t('overall.name'),
             type: 'input',
             label: 'name',
             disabled: false
           },
           {
-            name: 'Project name',
+            name: this.$t('overall.projectName'),
             type: 'project',
             label: 'projectIds',
             disabled: false
diff --git a/nezha-fronted/src/components/page/monitor/project/projectList.vue b/nezha-fronted/src/components/page/monitor/project/projectList.vue
index bf0ed08e8..f5388bd53 100644
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -77,13 +77,13 @@ export default {
         zheze_none: true,
         searchLabelList: [
           {
-            name: 'Id',
+            name: 'ID',
             type: 'input',
             label: 'ids',
             disabled: false
           },
           {
-            name: 'Name',
+            name: this.$t('overall.name'),
             type: 'input',
             label: 'name',
             disabled: false