feat：alertMessage 添加组合筛选

nezha-fronted/src/components/common/labelFilter/clickSearch.vue

@@ -6,7 +6,7 @@
         <template>
           <el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValue[data.key]" @change="selectValue.change === 0 && selectValue.change++">
             <template v-for="(item, j) in data.children">
-              <el-checkbox v-show="j < data.index || data.showMore" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
+              <el-checkbox v-show="j < data.index || data.showMore" :key="j" :label="item.value" :title="item.key || item.name || item.label">{{item.key || item.name || item.label}}</el-checkbox>
             </template>
           </el-checkbox-group>
         </template>
@@ -89,7 +89,7 @@ export default {
         let top
         switch (type) {
           case 'checkBox': {
-            top = 4
+            top = 8
             break
           }
           case 'dropdownCheckBox': {
@@ -317,7 +317,7 @@ export default {
       this.$set(item, 'isFocus', isFocus)
     },
     needMore (type, item, expand) {
-      const contentWidth = this.$refs.searchContentBox[0].offsetWidth - 210
+      const contentWidth = this.$refs.searchContentBox[0].offsetWidth - 240
       // 窗口尺寸没改变，则只重排当前type
       if (type && contentWidth === this.contentWidth) {
         this.titleSearchListCopy[type].width = 0
@@ -367,6 +367,7 @@ export default {
     changShowMore (type) {
       // this.changeMoreNum = 0
       this.titleSearchListCopy[type].showMore = !this.titleSearchListCopy[type].showMore
+      // this.needMore()
       // this.$nextTick(() => {
       //   this.changeMoreNum++
       // })

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -8,7 +8,7 @@
       :api="url"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.alertMessage"
-      :layout="['searchInput', 'elementSet', 'pagination']"
+      :layout="['searchInput', 'elementSet', 'clickSearch', 'pagination']"
       :search-msg="searchMsg"
       @search="search"
       v-loading="tools.loading"
@@ -24,6 +24,9 @@
         </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:search >
+        <click-search ref="clickSearch" :select-value.sync="selectValue" :title-search-list="titleSearchList" @reload="reloadTable"/>
+      </template>
       <template v-slot:default="slotProps">
         <alert-message-table
           ref="dataTable"
@@ -132,7 +135,8 @@ import chartDataFormat from '@/components/charts/chartDataFormat'
 import chart from '@/components/page/dashboard/overview/chart'
 import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
-import logsTempData from '@/components/charts/logsTempData'
+import clickSearch from '@/components/common/labelFilter/clickSearch'
+
 export default {
   name: 'alertMessage',
   components: {
@@ -141,7 +145,8 @@ export default {
     chart,
     nzDataList,
     deleteButton,
-    alertSilenceBox
+    alertSilenceBox,
+    clickSearch
   },
   mixins: [dataListMixin],
   data () {
@@ -223,7 +228,98 @@ export default {
       viewAssetState: false,
       nowTime: '',
       logData: [],
-      resultType: ''
+      resultType: '',
+      titleSearchList: {
+        project: {
+          label: this.$t('dashboard.overview.project.project'),
+          key: 'projectIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        module: {
+          label: this.$t('dashboard.overview.project.module'),
+          key: 'moduleIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        dc: {
+          label: this.$t('overall.dc'),
+          key: 'dcIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        severity: {
+          label: this.$t('alert.severity'),
+          key: 'severityIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        }
+      },
+      selectValue: {
+        dcIds: [],
+        projectIds: [],
+        moduleIds: [],
+        modelIds: [],
+        severityIds: []
+      },
+      detailSearchList: {
+        project: {
+          label: this.$t('dashboard.overview.project.project'),
+          key: 'projectIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        module: {
+          label: this.$t('dashboard.overview.project.module'),
+          key: 'moduleIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        dc: {
+          label: this.$t('overall.dc'),
+          key: 'dcIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        severity: {
+          label: this.$t('alert.severity'),
+          key: 'severityIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        }
+      }
     }
   },
   computed: {
@@ -608,16 +704,24 @@ export default {
         delete this.searchLabel.startAt
         delete this.searchLabel.endAt
       }
+      if (this.$route.path === '/alertMessage') {
+        this.$set(this.searchLabel, 'statistics', 1)
+      }/* else {
+        delete this.searchLabel.statistics
+      } */
       this.tools.loading = true
       if (state) {
         delete this.searchLabel.startAt
         delete this.searchLabel.endAt
       }
-      this.$get(this.url, this.searchLabel).then(response => {
+      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
         this.tools.loading = false
         if (response.code == 200) {
           this.nowTime = this.utcTimeToTimezoneStr(response.time)
           this.tableData = response.data.list
+          if (response.statistics && this.$route.path === '/alertMessage') {
+            this.setSearchData(response.statistics)
+          }
           /* const axiosAll = []
             this.$nextTick(() => {
               this.tableData.forEach((item) => {
@@ -654,6 +758,64 @@ export default {
         }
       })
     },
+    setSearchData (statistics) {
+      Object.keys(this.titleSearchList).forEach(key => {
+        const keys = key === 'assetLabel' ? 'meta' : key
+        this.titleSearchList[key].children = statistics[keys].map(d => { return { ...d, value: d.id } })
+        this.detailSearchList[key].children = statistics[keys].map(d => { return { ...d, value: d.id } })
+        if (this.titleSearchList[key].children.length === 0) {
+          // delete this.titleSearchList[key]
+          // delete this.detailSearchList[key]
+        } else {
+          this.titleSearchList[key].show = true
+          this.detailSearchList[key].show = true
+        }
+        this.titleSearchList[key].show = true
+        this.detailSearchList[key].show = true
+      })
+    },
+    reloadTable (obj) {
+      const params = JSON.parse(JSON.stringify(obj))
+      if (this.detailType === 'view') {
+        const obj = {}
+        params.modelIds = params.modelIdsDetail
+        params.fieldsDetail.forEach(item => {
+          const arr = item.split('-')
+          if (obj[arr[0]]) {
+            obj[arr[0]].push(arr[1])
+          } else {
+            obj[arr[0]] = [arr[1]]
+          }
+        })
+        params.fields = JSON.stringify(obj)
+        if (params.fields === '{}') {
+          params.fields = ''
+        }
+        delete params.modelIdsDetail
+        delete params.fieldsDetail
+      }
+      Object.keys(params).forEach(key => {
+        if (typeof params[key] === 'string') {
+          this.searchCheckBox[key] = params[key] ? params[key] : null
+        } else {
+          params[key] && params[key].length > 0 ? this.searchCheckBox[key] = params[key].join(',') : this.searchCheckBox[key] = null
+        }
+      })
+      if (!this.timer) {
+        this.timer = setTimeout(() => {
+          this.getTableData()
+          clearTimeout(this.timer)
+          this.timer = ''
+        }, 1000)
+      } else {
+        clearTimeout(this.timer)
+        this.timer = setTimeout(() => {
+          this.getTableData()
+          clearTimeout(this.timer)
+          this.timer = ''
+        }, 1000)
+      }
+    },
     promQueryParamConvert (alert) {
       const obj = { ...alert }
       let r = '(' + obj.alertRule.expr.replace(/\"/g, '\'') + ')'
@@ -834,4 +996,11 @@ export default {
     cursor: default;
     font-weight: bold;
   }
+  .list-page /deep/ .main-container{
+    display: flex;
+    flex-direction: column;
+    /deep/ .nz-table2{
+      flex: 1;
+    }
+  }
 </style>