feat：alertMessage 添加组合筛选
This commit is contained in:
zhangyu
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user