diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index 4e9480621..b66e76bf4 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -364,7 +364,7 @@ td .nz-icon-gear:before{ } } } -.chart-bar,.chart-gauge,.chart-time-series,.chart-treemap,.chart-pie,.chart-canvas-tooltip,.line-chart-block-Zindex,.alert-label,.alert-labelUp,.nz-tooltip-bac{ +.chart-bar,.chart-gauge,.chart-time-series,.chart-treemap,.chart-pie,.chart-canvas-tooltip,.line-chart-block-Zindex,.alert-label,.alert-labelUp,.alert-days-info-tooltip,.nz-tooltip-bac{ background-color: $--tooltip-background-color !important; border: 2px solid $--tooltip-border-color !important; border-color: $--tooltip-border-color !important; diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertDaysInfo.scss b/nezha-fronted/src/assets/css/components/common/alert/alertDaysInfo.scss index 79d33fd06..6e266aa29 100644 --- a/nezha-fronted/src/assets/css/components/common/alert/alertDaysInfo.scss +++ b/nezha-fronted/src/assets/css/components/common/alert/alertDaysInfo.scss @@ -1,13 +1,46 @@ .alert-days-info{ - display: flex; + display: block; height: 100%; width: 100%; > div{ + display: inline-block; width: 14px; - height: 24px; + height: 12px; margin-right: 5px; border-radius: 2px; background-color:$--color-success; cursor: pointer; + position: relative; + } + .alert-days-info-tooltip{ + position: fixed; + z-index: 1; + padding: 5px 10px 5px 10px; + line-height: 20px; + min-width: 120px; + width: auto; + .severity-time { + margin-bottom: 5px; + } + .severity-info { + display: flex; + align-items: center + } + .severity-block{ + display: inline-block; + width: 18px; + height: 10px; + border: 1px solid $--border-color-base; + margin-right: 5px; + } + .severity-name { + margin-right: 30px; + color: $--color-text-primary; + font-size: 12px; + } + .severity-value { + color: $--color-text-regular; + font-size: 12px; + } } } diff --git a/nezha-fronted/src/components/common/alert/alertDaysInfo.vue b/nezha-fronted/src/components/common/alert/alertDaysInfo.vue index f2237bdb8..7d3b36281 100644 --- a/nezha-fronted/src/components/common/alert/alertDaysInfo.vue +++ b/nezha-fronted/src/components/common/alert/alertDaysInfo.vue @@ -1,8 +1,15 @@ @@ -20,51 +27,44 @@ export default { severityDataWeight: this.$store.getters.severityDataWeight } }, - watch: { - alertDaysData: { - immediate: true, - handler () { - this.getWeeksTime() - } - } - }, + // watch: { + // alertDaysData: { + // immediate: true, + // handler () { + // this.getWeeksTime() + // } + // } + // }, methods: { - getWeeksTime () { - const localOffset = new Date().getTimezoneOffset() // 默认 显示时区偏移的结果 单位分钟 - const now = new Date(new Date().toLocaleDateString()).getTime() - localOffset * 60 * 1000 - const arr = [] - for (let i = 0; i < 7; i++) { - const obj = { - time: now - i * 24 * 60 * 60 * 1000 - } - this.severityDataWeight.forEach(item => { - obj[item.name] = 0 - }) - console.log(obj) - arr.unshift(obj) - } - this.alertDaysData.forEach(item => { - item.values.forEach(time => { - const findItem = arr.find(days => days.time == time[0]) - // console.log(item) - if (findItem) { - findItem[item.metric.priority] = time[1] - } - }) - }) - this.daysData = arr - }, showPriority (daysData) { - let style = '' + let style = {} + let sum = 0 this.severityDataWeight.forEach(item => { - if (daysData[item.name] && !style) { + sum += Number(daysData[item.name]) + console.log(daysData[item.name]) + if (daysData[item.name] && !style.background) { style = { background: item.color } } }) - console.log(daysData,style) + const height = sum > 0 ? (sum < 10 ? 20 : 24) : 16 + console.log(sum, height) + style.height = (height + 'px') return style + }, + tooltipHover (item, flag, e) { + if (e) { + const dom = e.currentTarget + const position = dom.getBoundingClientRect() + item.position.left = position.left + if (position.top > window.innerHeight / 2) { + item.position.top = position.top - 100 + } else { + item.position.top = position.top + 30 + } + } + item.tooltipShow = flag } } } diff --git a/nezha-fronted/src/components/common/filterSearch/filterSearch.vue b/nezha-fronted/src/components/common/filterSearch/filterSearch.vue index d6277826e..c98be7b00 100644 --- a/nezha-fronted/src/components/common/filterSearch/filterSearch.vue +++ b/nezha-fronted/src/components/common/filterSearch/filterSearch.vue @@ -114,14 +114,12 @@ export default { } } // 不是首个condition时,先增加一个connection,再增加一个新condition - console.log(meta) if (meta) { this.metaList.push(meta) this.$emit('metaList') } else { let self = this const newCondition = Object.assign({}, self.meta) - console.log(newCondition) newCondition.nameIsEditing = true this.metaList.push(newCondition) this.$forceUpdate() diff --git a/nezha-fronted/src/components/common/mixin/table.js b/nezha-fronted/src/components/common/mixin/table.js index 7e1c966e7..d8141975c 100644 --- a/nezha-fronted/src/components/common/mixin/table.js +++ b/nezha-fronted/src/components/common/mixin/table.js @@ -21,7 +21,8 @@ export default { data () { return { operationWidth: '165', // 操作列宽 - orderBy: {} + orderBy: {}, + severityDataWeight: this.$store.getters.severityDataWeight } }, methods: { @@ -81,6 +82,27 @@ export default { orderBy = '-' + str } this.$emit('orderBy', orderBy) + }, + getWeeksTime () { + const localOffset = new Date().getTimezoneOffset() // 默认 显示时区偏移的结果 单位分钟 + const now = new Date(new Date().toLocaleDateString()).getTime() - localOffset * 60 * 1000 + const arr = [] + for (let i = 0; i < 7; i++) { + const obj = { + time: now - i * 24 * 60 * 60 * 1000, + tooltipShow: false, + position: { + left: 0, + top: 0 + } + } + this.severityDataWeight.forEach(item => { + obj[item.name] = 0 + obj[item.name + 'Color'] = item.color + }) + arr.unshift(obj) + } + return arr } }, watch: { @@ -110,6 +132,61 @@ export default { } }, 500) } + if (this.needAlertDaysData) { + const weekDays = this.getWeeksTime() + n.forEach(item => { + const params = { + type: 'total', + dimension: 'priority', + step: 'd' + } + params[this.trendKey] = item.id + setTimeout(() => { + this.$get('/stat/alertMessage/trend', params).then((res) => { + // res = { + // msg: 'success', + // code: 200, + // data: { + // result: [ + // { + // values: [ + // { + // metric: { priority: 'P1' }, + // values: [] + // }, { + // metric: { priority: 'P2' }, + // values: [ + // [1645142400000, 0], [1645228800000, 3], [1645315200000, 20], [1645401600000, 0], [1645488000000, 0], [1645574400000, 3], [1645660800000, 20] + // ] + // }, { + // metric: { priority: 'P3' }, + // values: [ + // [1645142400000, 1], [1645228800000, 3], [1645315200000, 20], [1645401600000, 0], [1645488000000, 0], [1645574400000, 3], [1645660800000, 20] + // ] + // }] + // }], + // resultType: 'matrix' + // }, + // time: '2022-02-24 08:41:35' + // } + const alertDaysData = res.data.result ? res.data.result[0].values : [] + const newWeekDays = JSON.parse(JSON.stringify(weekDays)) + alertDaysData.forEach(item => { + item.values.forEach(time => { + const findItem = newWeekDays.find(days => days.time == time[0]) + if (findItem) { + findItem[item.metric.priority] = time[1] + } + }) + }) + setTimeout(() => { + item.alertDaysData = newWeekDays + item.trendLoading = false + }) + }) + }) + }) + } } } } diff --git a/nezha-fronted/src/components/common/table/asset/assetTable.vue b/nezha-fronted/src/components/common/table/asset/assetTable.vue index 34e491f52..4acd83a14 100644 --- a/nezha-fronted/src/components/common/table/asset/assetTable.vue +++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue @@ -43,10 +43,11 @@ {{scope.row.endpointNum ? scope.row.endpointNum : 0}}