From 9ff0686fc881ef6fa66f666295d7771cf6a4baef Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 20 May 2021 16:27:46 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-601=20perf:=20endpoint-detail=E5=92=8Cadd-c?=
 =?UTF-8?q?hart-by-template?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-detail.vue    |  57 +++---
 .../src/components/charts/chart-list.vue      | 169 +++---------------
 .../components/common/bottomBox/bottomBox.vue |  14 +-
 .../bottomBox/tabs/alertMessageTabNew.vue     |   2 +-
 .../common/bottomBox/tabs/panelTabNew.vue     |   5 +-
 .../src/components/common/language/en.js      |   2 +-
 .../common/table/alert/alertMessageTable.vue  |  12 +-
 .../components/page/alert/alertMessage.vue    |  56 +++---
 8 files changed, 79 insertions(+), 238 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index 67d3d5732..aab93e483 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -27,7 +27,7 @@
           <div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;">
             <div v-for="(item, index) in detail" :key="index" class="chart-sub">
               <div class="chart-sub-title" @click="hideElement(index)">
-                <span><i :class="{'nz-icon nz-icon-caret-right': show.indexOf(index) == -1,'nz-icon nz-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
+                <span><i :class="{'nz-icon nz-icon-caret-right': show.indexOf(index) === -1,'nz-icon nz-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
                 <span>{{item.title}}</span>
               </div>
               <el-collapse-transition>
@@ -35,18 +35,18 @@
                   <template v-for="(value, key, i) in item.data">
 
                     <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
-                    <div v-if="(data.from == $CONSTANTS.fromRoute.endpoint || data.from == $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]" :key="i" class="content-item">
+                    <div v-if="(data.from === fromRoute.endpoint || data.from === fromRoute.asset || data.from === fromRoute.model) && data.type === 'assetInfo' && item.type === 'basic' && assetKey[key]" :key="i" class="content-item">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">{{assetKey[key]}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
                       </div>
 
                       <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                        <span v-if="key == 'state'">
+                        <span v-if="key === 'state'">
                           {{value}}
                         </span>
-                        <span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
-                        <div v-else-if="key == 'tags'" class="no-overflow" style="padding-bottom: 5px;">
+                        <span v-else-if="key === 'alert'" :class="{'success': value <= 0, 'danger': value > 0}" class="as-button">{{value + ' ' + $t('overall.active')}}</span>
+                        <div v-else-if="key === 'tags'" class="no-overflow" style="padding-bottom: 5px;">
                           <template v-if="value && value.length > 0">
                             <nz-alert-tag :label="tagItem.name" type="normal" style="margin: 5px 5px 0 0; vertical-align: middle;"
                                           :cursor-point="false"
@@ -59,12 +59,12 @@
                           </template>
                           <template v-else>&nbsp;</template>
                         </div>
-                        <template v-else-if="key == 'cabinet'">
+                        <template v-else-if="key === 'cabinet'">
                           <span v-if="value&&item.data.cabinetStart&&item.data.cabinetEnd">{{value + '['+item.data.cabinetStart+'-'+item.data.cabinetEnd+']'}}</span>
                           <span v-else-if="value&&!(item.data.cabinetStart||item.data.cabinetEnd)">{{value}}</span>
                           <span v-else></span>
                         </template>
-                        <template v-else-if="key == 'pingRtt'">
+                        <template v-else-if="key === 'pingRtt'">
                           <div class="active-icon" :class="{'green-bg': item.data.pingStatus == 1, 'red-bg': item.data.pingStatus == 1 != 1}"></div>
                           <span>{{value ? value + 'ms' : ''}}</span>
                         </template>
@@ -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 === fromRoute.endpoint || data.from === fromRoute.asset || data.from === 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>
@@ -120,33 +120,19 @@
                     </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 === fromRoute.endpoint && data.type === 'endpointInfo'" :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>
                       </div>
                       <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                        <template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 26px; width: 100px;" @click="preview"></div></template>
-                        <template v-else-if="endpointKey[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的alert详情-->
-                    <div v-else-if="data.from == $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && item.title == $t('overall.alert')" :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>
-                      </div>
-                      <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                        <span class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span>
                         <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
                       </div>
                     </div>
 
                     <!-- alertRule-detail的详情-->
-                    <div v-else-if="data.from == $CONSTANTS.fromRoute.rule && data.type == 'alertRuleInfo' && key != '_module_'" :key="i" class="content-item" @click="showDeep(`deep-${index}-${i}`)">
+                    <div v-else-if="data.from == fromRoute.rule && data.type == 'alertRuleInfo' && key != '_module_'" :key="i" class="content-item" @click="showDeep(`deep-${index}-${i}`)">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">
                           <span><i v-if="item.data._module_[key]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}`) > -1}"></i></span>
@@ -217,7 +203,7 @@ import chartPreview from './chartPreview'
 import * as echarts from 'echarts'
 import nzAlertTag from '../page/alert/nzAlertTag'
 import bus from '../../libs/bus'
-
+import { fromRoute } from '@/components/common/js/constants'
 export default {
   name: 'chartDetail',
   components: {
@@ -243,6 +229,7 @@ export default {
   },
   data () {
     return {
+      fromRoute,
       ready: false,
       data: {}, // 该图表信息,chartItem
       detail: [], // 展示的详情
@@ -303,13 +290,12 @@ export default {
       },
       endpointKey: {
         id: 'ID',
-        host: this.$t('project.endpoint.host'),
-        port: this.$t('project.endpoint.port'),
-        path: this.$t('project.endpoint.path'),
-        param: this.$t('project.endpoint.param'),
-        state: this.$t('alert.list.state'),
-        project: this.$t('project.project.projectName'),
-        module: this.$t('project.module.module')
+        name: this.$t('overall.name'),
+        type: this.$t('overall.type'),
+        project: this.$t('overall.project'),
+        module: this.$t('project.module.module'),
+        alerts: this.$t('project.endpoint.alerts'),
+        state: this.$t('project.endpoint.state')
       }
     }
   },
@@ -424,11 +410,12 @@ export default {
       this.panelIdInner = panelId
       this.data = chartItem
       this.detail = detail
-      if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表
+      console.info(this.data, this.detail)
+      /* if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表
         this.$nextTick(() => {
           this.initChart(this.detail[0].data.stateSeries)
         })
-      }
+      } */
       this.endLoading()
     },
     initChart (series) {
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 438d1c177..757151a1c 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -228,11 +228,12 @@ import { chartResizeTool } from '@/components/common/js/tools'
 export default {
   name: 'chartList',
   props: {
+    fromRoute,
     isModel: { type: Boolean, default: false },
     additionalInfo: {},
     draggable: { type: Boolean, default: true },
-    detail: Object,
     from: { type: String },
+    obj: Object,
     panelLock: { type: Boolean, default: false },
     hasGroup: { type: Boolean, default: true },
     panelDataList: Array
@@ -552,7 +553,7 @@ export default {
         from: params.from
       }
       // alert-rule单独处理
-      if (param.from == fromRoute.alertRule) {
+      if (param.from === fromRoute.alertRule) {
         this.dataList = []
         this.dataList.push({
           id: -10,
@@ -581,7 +582,7 @@ export default {
           buildIn: 1,
           elements: [{
             id: '',
-            expression: `nz_alert_nums{id="${this.detail.id}"}`,
+            expression: `nz_alert_nums{id="${this.obj.id}"}`,
             type: ''
           }]
         })
@@ -600,68 +601,6 @@ export default {
         })
         return
       }
-      // endpoint单独处理
-      if (param.from == fromRoute.endpoint) {
-        this.dataList = []
-        // this.dataList.push({
-        //   id: -8,
-        //   panelId: 0,
-        //   title: this.$t("alert.alertList"),
-        //   span: 8,
-        //   height: 700,
-        //   type: "alertList",
-        //   prev: -9,
-        //   next: -1,
-        //   buildIn: 1,
-        //   draggable: false,
-        //   resizable: false,
-        //   editable: false,
-        // });
-        this.dataList.push({
-          id: -10,
-          panelId: 0,
-          dataId: this.additionalInfo.id,
-          title: this.$t('project.chart.endpointInfo'),
-          span: 6,
-          height: 4,
-          type: 'endpointInfo',
-          prev: 0,
-          next: -9,
-          buildIn: 1,
-          elements: [{
-            expression: `up{endpoint="${this.additionalInfo.id}"}`
-          }],
-          draggable: false,
-          resizable: false,
-          editable: false
-        })
-        this.dataList.push({
-          id: -9,
-          panelId: 0,
-          title: this.$t('asset.assetInfo'),
-          span: 6,
-          height: 4,
-          type: 'assetInfo',
-          prev: -10,
-          next: -8,
-          buildIn: 1,
-          draggable: false,
-          resizable: false,
-          editable: false
-        })
-        this.$nextTick(() => {
-          this.dataList.forEach((item, index) => {
-            this.$set(item, 'from', params.from)
-            this.setChartSize(item, index)// 设置该图表宽度
-            const chartBox = document.getElementById('chart-' + item.id)
-            this.handleElementInViewport(chartBox, 0, item, index)
-            if (item.type === 'group') {
-              this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
-            }
-          })
-        })
-        return
-      }
       if (param.from == fromRoute.chartTemp) { // 模板列表
         this.panelDataList[0].children.forEach((item1, i) => {
           item1.chartIndex = i
@@ -894,7 +833,7 @@ export default {
         this.modelStaticData(chartInfo, filterType)
       } else {
         // 没有数据的设置提示信息暂无数据-针对每一个图
-        const len = chartItem.elements.length
+        const len = chartItem.elements ? chartItem.elements.length : 0
         if (len === 0) {
           this.$nextTick(() => {
             if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
@@ -1389,82 +1328,24 @@ export default {
       const detail = []
       this.$refs['editChart' + chartInfo.id][0].showLoad()
       chartInfo.name = this.$t('project.chart.endpointInfo')
-
-      const basicInfo = JSON.parse(JSON.stringify(this.detail))
-      const basicInfoReq = new Promise((resolve, reject) => {
-        const now = new Date()
-        const startTime = bus.timeFormate(new Date(now).setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
-        // const step = bus.getStep(startTime, endTime)
-        this.$nextTick(() => {
-          let query = chartInfo.elements[0].expression
-          if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea') && chartInfo.param) {
-            chartInfo.param.nullType = chartInfo.param.nullType || 'null'
-            query += '&nullType=' + chartInfo.param.nullType
-          }
-          this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => {
-            if (response.status === 'success') {
-              if (response.data.result) {
-                const series = {
-                  name: '',
-                  symbol: 'emptyCircle', // 去掉点
-                  symbolSize: 4,
-                  smooth: 0.2, // 曲线变平滑
-                  showSymbol: false,
-                  data: [],
-                  type: 'line',
-                  lineStyle: {
-                    width: 1,
-                    opacity: 0.9
-                  },
-                  itemStyle: {
-                    color (params) {
-                      if (params.data[1] == '1') {
-                        return '#50d050'
-                      } else {
-                        return '#d64f40'
-                      }
-                    }
-                  }
-                }
-                response.data.result.forEach((queryItem, resInnerPos) => {
-                  // 将秒改为毫秒
-                  series.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                    return [dpsItem[0] * 1000, dpsItem[1]]
-                  })
-                })
-                basicInfo.stateSeries = [series]
-                basicInfo.state = ''
-                resolve({ title: this.$t('project.chart.basicTitle'), data: basicInfo, type: 'endpointInfo' })
-              }
-            }
-          })
-        })
-      })
-
-      const endpointId = this.additionalInfo.id
-      const alertMsg = new Promise((resolve, reject) => {
-        this.$get('/alert/message?endpointId=' + endpointId + '&state=1&pageSize=-1').then(response => {
-          if (response.code == 200) {
-            const alerts = {}
-            if (response.data) {
-              response.data.list.forEach(t => {
-                const alertRule = t.alertRule.alertName
-                if (alerts[alertRule]) {
-                  alerts[alertRule]++
-                } else {
-                  alerts[alertRule] = 1
-                }
-              })
-            }
-            resolve({ title: this.$t('overall.alert'), data: alerts })
-          }
-        })
-      })
-      Promise.all([basicInfoReq, alertMsg]).then(resolves => {
-        resolves.forEach(t => detail.push(t))
-        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
-      })
+      chartInfo.from = fromRoute.endpoint
+      const basicInfo = JSON.parse(JSON.stringify(this.obj))
+      detail.push(
+        {
+          data: {
+            id: basicInfo.id,
+            name: basicInfo.name,
+            type: basicInfo.module.type,
+            project: basicInfo.project.name,
+            module: basicInfo.module.name,
+            alerts: basicInfo.alertNum,
+            state: basicInfo.state === 1 ? 'up' : 'down'
+          },
+          type: 'endpointInfo',
+          title: this.$t('project.chart.basicTitle')
+        }
+      )
+      this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
     },
     getAssetInfoChartData (chartInfo) {
       const vm = this
@@ -1830,7 +1711,9 @@ export default {
     },
     resize () {
       this.init()
-      this.$parent.dateChange()
+      this.$nextTick(() => {
+        this.$parent.$parent.dateChange()
+      })
     },
     init () {
       this.stepWidth = this.chartResizeTool.stepWidth(document.getElementById('listContainer').offsetWidth - 14)
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 52a15c072..9438049ab 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -25,12 +25,6 @@
         <alert-message-tab v-if="((from === fromRoute.alertRule || from === fromRoute.asset || from === fromRoute.endpoint || from === fromRoute.project ) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
         <!--asset页的endpoint列表-->
         <endpoint-tab v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
-        <!--endpoint-query-->
-<!--        <endpoint-query-tab v-if="(from === fromRoute.endpoint && targetTab === 'endpointQuery')" v-show="subResizeShow" ref="endpointQuery" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>-->
-
-        <!-- model-panel/asset-detail/project-overview的panel-->
-<!--        <panel-tab v-if="(from === fromRoute.model || from === fromRoute.asset || from === fromRoute.project || from === fromRoute.rule || from === fromRoute.endpoint) && targetTab === 'panel'" v-show="subResizeShow" ref="panelTab" :detail="detail" :from="from"-->
-<!--                   :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab>-->
 
         <!--terminal-log的记录和回放-->
         <terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmdTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.cmd" @changeTab="changeTab"></terminal-log-cmd-tab>
@@ -49,13 +43,13 @@
         <!--module列表的tab-->
         <endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
         <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>
+        <panel-tab-new v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :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>
         <!--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>
+        <panel-tab-new v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.chartTemp.chartTempTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
         <!--alertRule Tab-->
         <alertMessageTabNew v-if="from === fromRoute.alertRule && targetTab === 'alertRuleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
         <!--model 下滑-->
@@ -105,10 +99,6 @@ export default {
     from: String, // 来自哪个页面
     tabList: Array, // 动态页签列表
     targetTab: String, // 展示哪个页签
-    detail: Object, // 对象详情内容
-    detailList: Array, // 多个对象详情内容
-
-    assetDetail: Object // endpoint页的asset详情
   },
   data () {
     return {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
index a40307952..8e05e008d 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -292,7 +292,7 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete(this.url + '?ids=' + row.id + '&state=3').then(response => {
+        this.$delete(this.url + '?ids=' + row.id + '&state=' + this.state).then(response => {
           if (response.code === 200) {
             self.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index 7a6557f3d..1f672de3a 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -83,7 +83,7 @@
           <div class="table-list" id="tableList">
             <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
               <div class="box-content">
-                <chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
+                <chart-list :additional-info="obj" :draggable="draggable" :from="from" :is-model="from === fromRoute.model" :obj="obj" @on-edit-chart="editChart"
                             @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelDataList"
                             @on-add-group-item-chart="addGroupItem"></chart-list>
               </div>
@@ -117,8 +117,7 @@ export default {
   props: {
     from: String,
     obj: Object,
-    draggable: { type: Boolean, default: true },
-    detail: Object
+    draggable: { type: Boolean, default: true }
   },
   data () {
     return {
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 7e0abb12b..31286586a 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -1222,7 +1222,7 @@ const en = {
         list: 'List',
         delete: 'Delete',
         save: 'Save',
-        info: 'Info',
+        info: 'Info'
       }
     },
     project: {
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index 71f6a7ced..328f13021 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -13,7 +13,7 @@
       border
       @header-dragend="dragend"
       @sort-change="tableDataSort"
-      @selection-change="selectChange"
+      @selection-change="selectionChange"
     >
       <el-table-column
         :resizable="false"
@@ -488,14 +488,8 @@ export default {
     toDeleteMessage (obj) {
       this.$emit('toDelete', obj)
     },
-    selectChange (s) {
-      const ids = []
-      this.deleteBox.ids = ''
-      s.forEach(item => {
-        ids.push(item.id)
-      })
-      this.deleteBox.ids = ids.join(',')
-      this.$emit('select-change', s)
+    selectionChange (objs) {
+      this.$emit('selectionChange', objs)
     },
     closeDialog () {
       this.importBox.show = false
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index ff71e0ec7..57a8de893 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -22,7 +22,7 @@
                 type="button" @click="showExportDialog">
           <i class="nz-icon-download1 nz-icon"></i>
         </button>
-        <delete-button id="alert-msg-batch-delete" v-has="'message_delete'" :api="url" :clickFunction="openDelMessageBox" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button id="alert-msg-batch-delete" v-has="'alertMessage_expired'" :api="url" :clickFunction="batchDel" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
       <template v-slot:default="slotProps">
         <alert-message-table
@@ -227,18 +227,34 @@ export default {
         this.queryChartDate()
       })
     },
-    del (row) {
-      const self = this
+    batchDel () {
       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 => {
+        this.$delete(this.url + '?ids=' + this.batchDeleteObjs.map(m => m.id).join(',') + '&state=' + this.state).then(response => {
           if (response.code === 200) {
-            self.delFlag = true
+            this.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            self.getTableData()
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    del (row) {
+      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=' + this.state).then(response => {
+          if (response.code === 200) {
+            this.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
           } else {
             this.$message.error(response.msg)
           }
@@ -468,34 +484,6 @@ export default {
     openedDialog () {
       this.$refs.remarkForm.clearValidate()
     },
-    openDelMessageBox () {
-      if (this.batchDeleteObjs.length < 1) return
-      if (this.$refs.dataTable) {
-        this.$refs.dataTable.toDeleteMessage(false)
-      }
-    },
-    toDeleteMessage (obj) {
-      if (obj) {
-        this.deleteBox.ids = obj.id + ''
-      }
-      this.deleteBox.show = true
-    },
-    deleteMessage () {
-      this.$refs.remarkForm.validate(valid => {
-        if (valid) {
-          this.$put(this.url, this.deleteBox).then(res => {
-            if (res.code === 200) {
-              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-              this.deleteBox.ids = []
-              this.deleteBox.show = false
-              this.getTableData()
-            } else {
-              this.$message.error(res.msg)
-            }
-          })
-        }
-      })
-    },
     showExportDialog () {
       this.importBox.show = true
     },