From d65c0ed30bc84778162b5d30157310fb969ccc33 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 20 Apr 2021 15:31:57 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Amodule=E4=B8=8A=E6=BB=91=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=20message=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/bottomBox/bottomBox.vue |  28 +-
 .../common/bottomBox/nzBottomDataList.vue     |   5 +-
 .../bottomBox/tabs/alertMessageTabNew.vue     | 576 ++++++++++++++++++
 .../common/bottomBox/tabs/endpointTabNew.vue  |   1 +
 .../components/common/mixin/subDataList.js    |   3 +-
 5 files changed, 604 insertions(+), 9 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue

diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index cb0e87f26..29e482838 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -41,8 +41,13 @@
         <operation-log-tab v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" :tabs="tabs.user.operationLog" @changeTab="changeTab"></operation-log-tab>
         <terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab"></terminal-log-tab>
 
-        <!--module列表的两个日志-->
-        <endpointTabNew v-if="from === fromRoute.module && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.user.moduleTabTitle" @changeTab="changeTab"></endpointTabNew>
+        <!--module列表的tab-->
+        <endpointTabNew v-if="from === fromRoute.module && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></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>
+
+        <!--endpoint列表的tab-->
+        <endpointTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointTabNew>
+        <alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
       </div>
     </div>
   </div>
@@ -51,6 +56,7 @@
 <script>
 import cabinetTab from './tabs/cabinetTab'
 import alertMessageTab from './tabs/alertMessageTab'
+import alertMessageTabNew from './tabs/alertMessageTabNew'
 import endpointQueryTab from './tabs/endpointQueryTab'
 import endpointTab from './tabs/endpointTab'
 import endpointTabNew from './tabs/endpointTabNew'
@@ -75,7 +81,8 @@ export default {
     operationLogTab,
     terminalLogTab,
     'terminal-log-cmd-tab': terminalLogCMDTab,
-    endpointTabNew
+    endpointTabNew,
+    alertMessageTabNew
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -101,10 +108,19 @@ export default {
           terminalLog: [
             { prop: 'operationLogTab', name: this.$t('config.operationlog.operationlog'), active: false },
             { prop: 'terminalLogTab', name: this.$t('config.terminallog.terminallog'), active: true }
-          ],
+          ]
+          // module tab
+        },
+        module: {
           moduleTabTitle: [
-            { prop: 'endpoint', name: this.$t('asset.tableTitle.endpoint'), active: true },
-            { prop: 'alertMessage', name: 'alertMessage', active: false }
+            { prop: 'endpoint', name: this.$t('asset.tableTitle.endpoint') },
+            { prop: 'moduleAlertMessage', name: 'alertMessage' }
+          ]
+        },
+        endpoint: {
+          endpointTabTitle: [
+            { prop: 'endpoint', name: this.$t('asset.tableTitle.endpoint') },
+            { prop: 'moduleAlertMessage', name: 'alertMessage' }
           ]
         }
       }
diff --git a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
index 696ad8ef3..e70c05278 100644
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
@@ -4,7 +4,7 @@
       <div class="top-tool-left">
         <div class="sub-list-title">Name：<slot name="title"></slot></div>
         <div class="sub-list-tabs">
-          <div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active}" class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
+          <div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop=== targetTab}" class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
         </div>
       </div>
       <div class="top-tool-right">
@@ -68,7 +68,8 @@ export default {
     },
     tabs: {
       type: Array
-    }
+    },
+    targetTab: String
   },
   data () {
     return {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
new file mode 100644
index 000000000..3008a6e56
--- /dev/null
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -0,0 +1,576 @@
+<template>
+  <div class="full-width-height">
+    <nz-bottom-data-list
+      :api="url"
+      :custom-table-title.sync="tools.customTableTitle"
+      :layout="['searchInput', 'elementSet']"
+      :search-msg="searchMsg"
+      :tabs="tabs"
+      :targetTab="targetTab"
+      @changeTab="changeTab"
+      class="full-width-height"
+    >
+      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot>
+        <alertMessageTable
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :now-time="nowTime"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
+          @toDelete="toDeleteMessage"
+        ></alertMessageTable>
+      </template>
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nz-bottom-data-list>
+    <transition name="right-box">
+      <edit-endpoint-box-new v-if="rightBox.editShow" :module="object" @close="closeRightEditBox" :disabled="true" :type="'edit'"></edit-endpoint-box-new>
+    </transition>
+  </div>
+</template>
+
+<script>
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
+import axios from 'axios'
+import bus from '@/libs/bus'
+import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
+// import {getTime} from "@/components/common/js/tools";
+// import chartDataFormat from "@/components/charts/chartDataFormat";
+
+export default {
+  name: 'alertMessageTab',
+  mixins: [dataListMixin, subDataListMixin],
+  components: {
+    nzBottomDataList,
+    EditEndpointBoxNew,
+    alertMessageTable
+  },
+  props: {
+    from: String
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      handler (n) {
+        console.log(n)
+        if (n) {
+          this.getTableData()
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      url: 'alert/message',
+      tableId: 'alertMessageModule', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 2,
+          name: this.$t('alert.alertName'),
+          type: 'input',
+          label: 'alertName',
+          disabled: false
+        }, {
+          id: 20,
+          name: this.$t('project.project.project'),
+          type: 'project',
+          label: 'project',
+          disabled: false
+        }, {
+          id: 21,
+          name: this.$t('project.module.module'),
+          type: 'module',
+          label: 'module',
+          disabled: false
+        }, {
+          id: 22,
+          name: this.$t('project.endpoint.endpoint'),
+          type: 'input',
+          label: 'endpointId',
+          disabled: false
+        }, {
+          id: 4,
+          name: this.$t('alert.severity'),
+          type: 'selectString',
+          label: 'severity',
+          disabled: false
+        }, {
+          id: 11,
+          name: this.$t('asset.asset'),
+          type: 'asset',
+          label: 'asset',
+          disabled: false
+        }, {
+          id: 12,
+          name: this.$t('alert.list.state'),
+          type: 'select',
+          label: 'alertMessageState',
+          disabled: false
+        },
+        {
+          id: 26,
+          name: this.$t('alert.list.id'),
+          type: 'id',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 27,
+          name: this.$t('config.dc.dc'),
+          type: 'idc',
+          label: 'idcId',
+          disabled: false,
+          readonly: true
+        }]
+      },
+      rightBox: {
+        editShow: false,
+        show: false
+      },
+      fromBottom: true,
+      // 导出相关
+      importBox: { show: false, title: this.$t('overall.exportExcel') },
+      deleteBox: { show: false, ids: '', remark: '', state: 2 },
+      // 详情相关
+      graphShow: false,
+      chartDatas: [],
+      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
+      legend: [],
+      searchTime: [],
+      searchTimeSelect: bus.getTimezontDateRange(),
+      currentMsg: {},
+      chartUnit: 5,
+      requestIndex: 0,
+      viewAssetState: false,
+      nowTime: ''
+    }
+  },
+  methods: {
+    labelsSort (obj) {
+      const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter']
+      const labels = JSON.parse(JSON.stringify(obj))
+      const result = []
+      for (const key of buildIn) {
+        if (key in labels) {
+          result.push({ label: key, value: labels[key] })
+          delete labels[key]
+        }
+      }
+      Object.keys(labels).sort().forEach(key => {
+        result.push({ label: key, value: labels[key] })
+      })
+      return result
+    },
+    chartUnitChange (unit) {
+      this.chartUnit = unit
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
+    },
+    queryChartDate () {
+      const $temp = this
+      const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h')
+      const end = this.searchTime[1] ? this.searchTime[1] : getTime(0, 'h')
+      this.searchTime = [start, end]
+      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
+      let step = '15s'
+      if (timeDiff < 1) {
+        step = '15s'
+      } else if (timeDiff < 7) {
+        step = '5m'
+      } else if (timeDiff < 30) {
+        step = '10m'
+      } else {
+        step = '30m'
+      }
+      if (this.$refs.messageChart) {
+        this.$refs.messageChart.startLoading()
+        const axiosArr = []
+        const paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg))
+        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '') + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
+        this.legend = []
+        this.chartDatas = []
+        axios.all(axiosArr).then(res => {
+          try {
+            res.forEach((response, promIndex) => {
+              if (response.status == 200) {
+                if (response.data.status == 'success') {
+                  const queryData = response.data.data.result[0]
+                  if (queryData) {
+                    const chartData = {
+                      type: 'line',
+                      symbol: 'none', // 去掉点
+                      smooth: 0.2, // 曲线变平滑
+                      name: '',
+                      lineStyle: {
+                        width: 1,
+                        opacity: 0.9
+                      },
+                      markLine: {
+                        silent: true,
+                        symbol: ['circle', 'circle'],
+                        label: {
+                          distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
+                          formatter (params) {
+                            return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
+                          }
+                        },
+                        lineStyle: {
+                          color: '#d64f40',
+                          width: 2,
+                          type: 'dotted'
+                        },
+                        data: [{
+                          yAxis: Number(this.currentMsg.alertRule.threshold)
+                        }]
+                      },
+                      markArea: {
+                        itemStyle: {
+                          color: '#d64f40',
+                          opacity: 0.1
+                        },
+                        data: [this.returnMarkArea()]
+                      }
+                    }
+                    if (this.currentMsg.alertRule.operator == '==' || this.currentMsg.alertRule.operator == '!=') {
+                      delete chartData.markArea
+                    }
+                    let alias = chartData.name
+                    chartData.name += '{'
+                    alias += '{'
+                    Object.keys(queryData.metric).forEach((item, index) => {
+                      const label = item
+                      const value = queryData.metric[label]
+                      chartData.name += label + "='" + value + "',"
+                    })
+                    chartData.name = chartData.name.charAt(chartData.name.length - 1) == ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
+                    chartData.name += '}'
+                    const legend = {
+                      name: chartData.name,
+                      alias: alias,
+                      isGray: false
+                    }
+                    this.legend.push(legend)
+                    chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
+                      return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(2)]
+                    })
+                    this.chartDatas.push(chartData)
+                  }
+                } else {
+                  this.$message.error(response.data.error)
+                }
+              }
+            })
+            this.$nextTick(() => {
+              this.$refs.messageChart.setRandomColors(this.chartDatas.length)
+              this.$refs.messageChart.setLegend(this.legend)
+              this.$refs.messageChart.setSeries(this.chartDatas)
+              this.$refs.messageChart.endLoading()
+            })
+          } catch (err) {
+            this.$message.error(err)
+            this.$refs.messageChart.endLoading()
+          }
+        })
+      }
+    },
+    getTableData () {
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      if (this.searchTime && this.searchTime.length > 1) {
+        this.$set(this.searchLabel, 'startAt', this.timezoneToUtcTimeStr(this.searchTime[0]))
+        this.$set(this.searchLabel, 'endAt', this.timezoneToUtcTimeStr(this.searchTime[1]))
+      } else {
+        delete this.searchLabel.startAt
+        delete this.searchLabel.endAt
+      }
+      this.tools.loading = true
+      this.searchLabel.moduleIds = this.obj.id
+      this.$get(this.url, this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code == 200) {
+          this.nowTime = this.utcTimeToTimezoneStr(response.time)
+          this.tableData = response.data.list
+          const axiosAll = []
+          this.$nextTick(() => {
+            this.tableData.forEach((item) => {
+              item.labels = JSON.parse(item.labels)
+              if (!this.isBuildIn(item.alertRule)) {
+                const paramStr = JSON.stringify(this.promQueryParamConvert(item))
+                axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
+              } else {
+                axiosAll.push('')
+              }
+            })
+            axios.all(axiosAll).then(res => {
+              res.forEach((item, index) => {
+                let current = []
+                const response2 = item.data
+                if (response2.data && response2.data.result && response2.data.result.length > 0) {
+                  current = response2.data.result[0].value.map((item, i) => {
+                    if (i == 0) {
+                      return bus.computeTimezone(item)
+                    } else {
+                      return parseFloat(item).toFixed(2)
+                    }
+                  })
+                } else {
+                  current = [null, null]
+                }
+                this.tableData[index].current = current
+              })
+              this.$set(this.tableData, [...this.tableData])
+            })
+          })
+          this.deleteBox.ids = ''
+          this.pageObj.total = response.data.total
+        }
+      })
+    },
+    promQueryParamConvert (obj) {
+      let r = '(' + obj.alertRule.expr + ')'
+      let intoLabels = false
+      if (Object.keys(obj.labels).length > 0) {
+        r += (function () {
+          let group = ' and ' + '(group({'
+          let by = ' by ('
+
+          for (const k in obj.labels) {
+            if (k != 'alertname' && k != 'severity') {
+              intoLabels = true
+              group += k
+              group += '='
+              group += ("'" + obj.labels[k] + "',")
+              by += k
+              by += ','
+            }
+          }
+          if (intoLabels) {
+            group = group.substring(0, group.length - 1)
+            by = by.substring(0, by.length - 1)
+            group += '})'
+            by += ')'
+            return group + by + ')'
+          } else {
+            return ''
+          }
+        }())
+      }
+      return r
+    },
+    // asset弹框控制
+    tabControl (data) {
+      if (data === 'close') {
+        this.viewAssetState = false
+        this.$refs.assetEditUnit.tabView = false
+      }
+    },
+    openedDialog () {
+      this.$refs.remarkForm.clearValidate()
+    },
+    openDelMessageBox () {
+      if (this.batchDeleteObjs.length < 1) return
+      if (this.$refs.alertMessageTable) {
+        this.$refs.alertMessageTable.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)
+            }
+          })
+        }
+      })
+    },
+    selectChange (s) {
+      const ids = []
+      this.deleteBox.ids = ''
+      s.forEach(item => {
+        ids.push(item.id)
+      })
+      this.deleteBox.ids = ids.join(',')
+    },
+    showExportDialog () {
+      this.importBox.show = true
+    },
+    closeDialog () {
+      this.importBox.show = false
+      this.deleteBox.show = false
+    },
+    dialogClose () {
+      this.graphShow = false
+    },
+    exportCur () {
+      const searchLabel = Object.assign({}, this.searchLabel)
+      this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(searchLabel)
+      this.closeDialog()
+    },
+    exportAll () {
+      const temp = JSON.parse(JSON.stringify(this.searchLabel))
+      temp.pageSize = -1
+      this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(temp)
+      this.closeDialog()
+    },
+    getTimeString () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum (num) {
+      return num > 9 ? num : '0' + num
+    },
+    exportExcel (params) {
+      for (const item in params) {
+        if (params[item]) {
+          if (item === 'alertMessageState') {
+            this.$set(params, 'state', params[item])
+          } else {
+            this.$set(params, item, params[item])
+          }
+        }
+      }
+      const temp = this
+      if (!params) {
+        params = temp.params
+      }
+      axios.get('alert/message/export', { responseType: 'blob', params: params }).then(res => {
+        const fileName = 'alert-message-' + temp.getTimeString() + '.xlsx'
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
+      })
+    },
+    showTagDetail (data, key) {
+      let open = false
+      if (key == 'asset' || key == 'project' || key == 'module' || key == 'endpoint' || key == 'datacenter') {
+        open = true
+      }
+      if (open) {
+        const labelList = []
+        const detailList = []
+        for (const item in data) {
+          if (item == 'asset' || item == 'project' || item == 'module' || item == 'endpoint' || item == 'dc') {
+            labelList.push(item)
+            detailList.push(data[item])
+          }
+        }
+        this.bottomBox.showSubList = true
+        this.tabList = labelList
+      }
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          if (item == 'alertMessageState') {
+            this.$set(this.searchLabel, 'state', searchObj[item])
+          } else {
+            this.$set(this.searchLabel, item, searchObj[item])
+          }
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      this.$refs.alertMessageTable.$refs.alertListTable.bodyWrapper.scrollTop = 0
+      this.getTableData()
+    },
+    fillProject (module) {
+      this.$get('project', { id: module.projectId }).then(response => {
+        if (response.code == 200) {
+          module.project = response.data.list[0]
+        }
+      })
+    },
+    closeViews () {
+      this.$refs.alertConfigBox.show(false, false)
+      this.$refs.projectBox.show(false, false)
+      this.$refs.moduleBox.show(false, false)
+      this.viewAssetState = false
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.pageObj.orderBy = orderBy
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    }
+  }
+}
+</script>
+<style scoped>
+  .full-width-height{
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
index d112e6122..8d31de1e3 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
@@ -6,6 +6,7 @@
       :layout="['searchInput', 'elementSet']"
       :search-msg="searchMsg"
       :tabs="tabs"
+      :targetTab="targetTab"
       @changeTab="changeTab"
       class="full-width-height"
     >
diff --git a/nezha-fronted/src/components/common/mixin/subDataList.js b/nezha-fronted/src/components/common/mixin/subDataList.js
index 4338c1a9a..374b5ec2b 100644
--- a/nezha-fronted/src/components/common/mixin/subDataList.js
+++ b/nezha-fronted/src/components/common/mixin/subDataList.js
@@ -3,7 +3,8 @@ export default {
     obj: Object, // 关联的实体对象
     tabs: {
       type: Array
-    }
+    },
+    targetTab: String
   },
   data () {
     return {