diff --git a/src/assets/css/components/views/detections/detection-overview.scss b/src/assets/css/components/views/detections/detection-overview.scss index c4a565a2..7c980467 100644 --- a/src/assets/css/components/views/detections/detection-overview.scss +++ b/src/assets/css/components/views/detections/detection-overview.scss @@ -119,6 +119,26 @@ $color-regular: var(--el-text-color-regular); font-size: 14px; margin-right: 7px; } + + .row__mark__line { + display: flex; + flex-wrap: wrap; + margin-bottom: 12px; + + .mark__line__text { + font-size: 12px; + color: var(--el-text-color-regular); + } + + .mark__line__block { + width: 20px; + height: 12px; + border-radius: 4px; + margin-left: 6px; + margin-right: 12px; + cursor: pointer; + } + } } .row__content { width: calc(100% - 176px); @@ -129,12 +149,15 @@ $color-regular: var(--el-text-color-regular); padding-right: 50px; .charts__visual__map { - width: 490px; + width: 550px; height: 32px; - margin: 12px 0 10px 60px; - background: linear-gradient(to right, #d7c668, #ffdd4a, #ffb65a, #ff9a79, #d84c4c); + margin: 12px 0 10px 30px; } } + + .row__display { + display: flex; + } } .overview__row__display { diff --git a/src/views/detections/DetectionFilter.vue b/src/views/detections/DetectionFilter.vue index d314513f..1c68048a 100644 --- a/src/views/detections/DetectionFilter.vue +++ b/src/views/detections/DetectionFilter.vue @@ -9,13 +9,17 @@
{{ i+1 }}
- - + + + {{ data.values }} {{ data.label }} diff --git a/src/views/detections/DetectionList.vue b/src/views/detections/DetectionList.vue index fa1d2c14..8d9c75d4 100644 --- a/src/views/detections/DetectionList.vue +++ b/src/views/detections/DetectionList.vue @@ -16,7 +16,7 @@ :pageObj="pageObj" :eventFlag="eventFlag" :ref="`detectionRow${index}`" - :index="data.eventId" + :index="index" @switchCollapse="switchCollapse" :q="q" > diff --git a/src/views/detections/DetectionRowEvents.vue b/src/views/detections/DetectionRowEvents.vue index 2f00afa7..011480a8 100644 --- a/src/views/detections/DetectionRowEvents.vue +++ b/src/views/detections/DetectionRowEvents.vue @@ -35,7 +35,7 @@
{{$t('detection.lastTime')}} :   - {{dateFormatByAppearance(detection.startTime) || '-'}} + {{dateFormatByAppearance(detection.endTime) || '-'}}
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue index ebc99a66..8921101b 100644 --- a/src/views/detections/Index.vue +++ b/src/views/detections/Index.vue @@ -431,8 +431,18 @@ export default { count: r.count, fields: r.keyFields, values: r.keyValues, - unDisabled: true + unDisabled: true, + tooltip: '' })) + this.filterData[2].data.forEach(item => { + const valueList = item.values.split(',') + const fieldList = item.fields.split(',') + let tooltip = '' + fieldList.forEach((ite, ind) => { + tooltip += `${ite}: ${valueList[ind]}
` + }) + item.tooltip = tooltip + }) this.isCheckFilterByQ(params, 2) const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[2].data) this.filterData[2].showMore = showMore @@ -450,7 +460,7 @@ export default { data.sort(reverseSortBy('count')) data = data.slice(0, 5) offenderIpOption.series[0].data = data.map(d => { - return [d.count, `${d.keyValues},${d.keyFields}`, d.keyValues, d.keyFields] + return [d.count, `${d.keyValues}`, d.keyValues, d.keyFields] }).reverse() detectionChart.setOption(offenderIpOption) diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js index dda87ddc..ebd50099 100644 --- a/src/views/detections/options/detectionOptions.js +++ b/src/views/detections/options/detectionOptions.js @@ -306,7 +306,13 @@ export const activeAttackBar = { overflow: 'truncate' }, formatter: function (param, index, callback) { - return `${param.value[3]},${param.value[2]}: ${unitConvert(param.value[0], 'number').join(' ')}` + const valueList = param.value[2].split(',') + const fieldList = param.value[3].split(',') + let tooltip = '' + fieldList.forEach((ite, ind) => { + tooltip += `${ite}: ${valueList[ind]}
` + }) + return tooltip }, show: true, className: 'nz-chart-tooltip', @@ -457,7 +463,7 @@ export const metricOption = { width: 1, type: 'dashed' }, - color: '#ec836c', + color: '#E48F3E', data: [], showSymbol: false } diff --git a/src/views/detections/overview/EventsTimeline.vue b/src/views/detections/overview/EventsTimeline.vue index 93a43c01..26cec300 100644 --- a/src/views/detections/overview/EventsTimeline.vue +++ b/src/views/detections/overview/EventsTimeline.vue @@ -40,14 +40,7 @@ export default { data () { return { timeLine: [], - myTimeData: [ - { eventId: '1111111', lastTime: 1722391500, startTime: 1722391500 }, - { eventId: '2222222', lastTime: 1722391920, startTime: 1722391920 }, - { eventId: '3333333', lastTime: 1722391920, startTime: 1722391920 }, - { eventId: '444', lastTime: 1722392340, startTime: 1722392340 }, - { eventId: '555', lastTime: 1722392580, startTime: 1722392580 }, - { eventId: '666', lastTime: 1722392880, startTime: 1722392880 } - ], + myTimeData: [], activeCircle: 0, lineWidth: 520, // 时间轴宽度 isTransform: false // 时间轴label是否旋转标识，文字高度超出16即为换行，将文字旋转角度 @@ -109,11 +102,7 @@ export default { myTimeRange.push({ time: obj.time, time1: obj.time1, stamp: new Date(obj.time1).getTime(), lastStamp: new Date(obj.time1).getTime() - showTimeInterval * 60 * 1000, showFlag: obj.showFlag, isYear: obj.isYear }) } } - this.timeLine = myTimeRange - // if (e === 'init') { - // this.$emit('change', timeObj) - // } }, // 按时间间隔格式化时间 formatTime (timestamp, showTimeInterval, timeInterval) { @@ -121,7 +110,6 @@ export default { const minute = date.getMinutes() // const remainder = minute % showTimeInterval const remainder1 = minute % timeInterval - // if (remainder === 0) { // 零点，显示年月日 if (date.getHours() === 0 && minute === 0) { const month = date.getMonth() + 1 @@ -148,7 +136,6 @@ export default { } return obj } - // } }, // 获取间隔时间，如一小时最小间隔时间1分钟，3小时间隔2分钟 getTimeInterval (timeFilter) { @@ -261,11 +248,12 @@ export default { if (index === 0) { let marginLeft = this.lineWidth - ((item.itemDiffTime / item.diffTime) * this.lineWidth) - marginLeft = Math.round(marginLeft) + 38 + 'px' // 30px的左边距+小球半径8px + marginLeft = Math.round(marginLeft) + 27 + 'px' // 20px的左边距+小球半径7px item.marginLeft = marginLeft } else { + // 从第二个开始计算距离上一个球的距离，并减去上一个球的直径 let marginLeft = ((this.myTimeData[index - 1].itemDiffTime - item.itemDiffTime) / item.diffTime) * this.lineWidth - marginLeft = (Math.round(marginLeft) - 43) + 'px' + marginLeft = (Math.round(marginLeft) - 14) + 'px' item.marginLeft = marginLeft } }) diff --git a/src/views/detections/overview/ThresholdOverview.vue b/src/views/detections/overview/ThresholdOverview.vue index bfcbf9f7..70be72cb 100644 --- a/src/views/detections/overview/ThresholdOverview.vue +++ b/src/views/detections/overview/ThresholdOverview.vue @@ -9,11 +9,17 @@
{{ $t('overall.summary') }}
+
+
+
{{ item.label }}: {{ item.yAxis }}
+
+
+
-
+
diff --git a/src/views/detections/overview/detectionDetailMixin.js b/src/views/detections/overview/detectionDetailMixin.js index 660c4b80..2cefed92 100644 --- a/src/views/detections/overview/detectionDetailMixin.js +++ b/src/views/detections/overview/detectionDetailMixin.js @@ -1,4 +1,4 @@ -import { detectionEventType, detectionRuleType, EN, storageKey, unitTypes, ZH } from '@/utils/constants' +import { detectionEventType, detectionRuleType, EN, storageKey, ZH } from '@/utils/constants' import { getMillisecond, getSecond } from '@/utils/date-util' import axios from 'axios' import { api } from '@/utils/api' @@ -23,7 +23,9 @@ export default { isGroup: 0, myChart: null, lineOption: lineOption, - seriesDataNum: 0 + seriesDataNum: 0, + mapColor: '', + markLineData: [] } }, computed: { @@ -79,7 +81,9 @@ export default { } axios.get(api.detection.event.detailTimeDistribution, { params: timeParams }).then(res => { if (res.status === 200) { - this.timeData = res.data.data.result + const timeData = res.data.data.result + timeData.sort((a, b) => a.statTime - b.statTime) + this.timeData = timeData } }).catch(e => { this.$message.error(this.errorMsgHandler(e)) @@ -102,6 +106,11 @@ export default { if (this.detection.ruleType === detectionRuleType.threshold.key) { const data = res.data.data.result if (data && data.length > 0) { + this.mapColor = '' + data.forEach(item => { + this.mapColor += getSeverityNumberColor(item.severity) + ',' + }) + this.mapColor = this.mapColor.slice(0, -1) this.handleLineChart(data) } } else { @@ -164,11 +173,13 @@ export default { itemStyle: { color: getSeverityNumberColor(item.severity) }, label: getSeverityByCode(item.severity) }) + this.markLineData = markLineData this.lineOption.series[0].markLine = { silent: true, symbol: 'none', data: markLineData, label: { + show: false, position: 'insideStartTop', color: '#999', formatter (params) { @@ -179,7 +190,6 @@ export default { } }) this.lineOption.series[0].data = seriesData - this.lineOption.series[0].color = getSeverityNumberColor(data[0].severity) || '#ff9a79' this.seriesDataNum = seriesData.length if (this.seriesDataNum <= 1) { @@ -190,6 +200,21 @@ export default { } this.myChart = markRaw(echarts.init(document.getElementById('myChart' + this.detection.eventId))) this.myChart.setOption(this.lineOption) + }, + /** 高亮markLine */ + highLightMarkLine (index) { + // this.myChart.dispatchAction({ + // type: 'highlight', + // seriesName: 'markLine', // 系列索引，根据实际情况修改 + // dataIndex: index // 数据索引，表示哪一条markLine会被高亮 + // }) + + // // 如果之后需要取消高亮，可以使用下面的代码 + // myChart.dispatchAction({ + // type: 'downplay', + // seriesIndex: 0, // 系列索引，根据实际情况修改 + // dataIndex: dataIndex // 数据索引，表示哪一条markLine的高亮状态将被取消 + // }); } } }