From 9aedf25dd253ac03d9ea182ef99f5529a1c4331d Mon Sep 17 00:00:00 2001 From: hyx Date: Wed, 9 Mar 2022 15:05:46 +0800 Subject: [PATCH 1/4] =?UTF-8?q?CN-342=20=E5=9B=BE=E8=A1=A8=E4=BC=98?= =?UTF-8?q?=E5=8C=96=201.type=3D11=E7=9A=84=E6=8A=98=E7=BA=BF=E5=9B=BE?= =?UTF-8?q?=EF=BC=8CY=E8=BD=B4=E6=9C=80=E5=B0=8F=E9=97=B4=E9=9A=94?= =?UTF-8?q?=E6=98=AF1=EF=BC=8C=E9=9C=80=E8=A6=81=E5=B0=86=E5=85=B6?= =?UTF-8?q?=E6=94=BE=E5=BC=80=E4=B8=BA=E5=8C=85=E5=90=AB=E5=B0=8F=E6=95=B0?= =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E6=9B=B2=E7=BA=BF=E5=8F=AF=E4=BB=A5=E5=85=85?= =?UTF-8?q?=E6=BB=A1=E5=9B=BE=E8=A1=A8=202.detection=E9=A1=B6=E9=83=A8?= =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=E4=BC=98=E5=8C=96=E8=B0=83=E6=95=B4?= =?UTF-8?q?=EF=BC=9A=20=20=20=20=20(1).=E4=B8=8D=E5=90=8C=E4=B8=A5?= =?UTF-8?q?=E9=87=8D=E7=A8=8B=E5=BA=A6=E7=9A=84=E6=9F=B1=E4=BD=93=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E4=BB=8E=E5=B9=B6=E6=8E=92=E6=94=B9=E4=B8=BA=E5=A0=86?= =?UTF-8?q?=E5=8F=A0=20=20=20=20=20(2).x=E8=BD=B4=E6=97=B6=E9=97=B4?= =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E7=B2=BE=E7=AE=80=E4=B8=BAmm:ss=EF=BC=8C?= =?UTF-8?q?=E4=B8=94=E6=95=B0=E9=87=8F=E8=BF=87=E5=A4=9A=E5=AF=BC=E8=87=B4?= =?UTF-8?q?x=E8=BD=B4label=E9=87=8D=E5=8F=A0=E6=97=B6=EF=BC=8C=E9=9A=90?= =?UTF-8?q?=E8=97=8F=E4=B8=80=E9=83=A8=E5=88=86label?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/date-util.js | 2 +- src/views/charts/charts/ChartEchart.vue | 9 ++ src/views/charts/charts/options/line.js | 3 +- src/views/detections/Index.vue | 103 +++++++----------- .../detections/options/detectionOptions.js | 24 +++- 5 files changed, 75 insertions(+), 66 deletions(-) diff --git a/src/utils/date-util.js b/src/utils/date-util.js index 85c6c3f5..9538bd3e 100644 --- a/src/utils/date-util.js +++ b/src/utils/date-util.js @@ -42,5 +42,5 @@ export function getNowTime (interval) { } // 日期格式转换 export function rTime (date) { - return window.$dayJs.tz(new Date(date)).format('YYYY-MM-DD HH:mm:ss') + return window.$dayJs.tz(new Date(date)).format('mm:ss') } diff --git a/src/views/charts/charts/ChartEchart.vue b/src/views/charts/charts/ChartEchart.vue index 562e8ecc..69fde3a3 100644 --- a/src/views/charts/charts/ChartEchart.vue +++ b/src/views/charts/charts/ChartEchart.vue @@ -100,6 +100,15 @@ export default { unitType: chartParams.unitType ? chartParams.unitType : 'number' } }) + }else { + this.chartOption.series[0].data = this.chartData.map(d => { + return { + name: lineToSpace(d.name), + data: d, + value: parseInt(d.num), + unitType: chartParams.unitType ? chartParams.unitType : 'number' + } + }) } } else { const seriesTemplate = this.chartOption.series[0] diff --git a/src/views/charts/charts/options/line.js b/src/views/charts/charts/options/line.js index 29473013..84c81908 100644 --- a/src/views/charts/charts/options/line.js +++ b/src/views/charts/charts/options/line.js @@ -24,8 +24,7 @@ export const line = { formatter: function (value, index, a, b) { return unitConvert(value, unitTypes.number).join(' ') } - }, - minInterval: 1 + } }, animation: false, grid: { diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue index 4e90c372..28bf6705 100644 --- a/src/views/detections/Index.vue +++ b/src/views/detections/Index.vue @@ -235,118 +235,99 @@ export default { initEventSeverityTrendData (params) { this.loading = true getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => { - /* data = [ + /*data = [ { - "stat_time": "2022-01-01T10:07:03.008Z", - "event_severity": "critical", + "statTime": "2022-01-01T10:07:03.008Z", + "eventSeverity": "critical", "count": 5 }, { - "stat_time": "2022-01-02T10:07:03.008Z", - "event_severity": "critical", + "statTime": "2022-01-02T10:07:03.008Z", + "eventSeverity": "critical", "count": 15 },{ - "stat_time": "2022-01-03T10:07:03.008Z", - "event_severity": "critical", + "statTime": "2022-01-03T10:07:03.008Z", + "eventSeverity": "critical", "count": 25 }, { - "stat_time": "2022-01-04T10:07:03.008Z", - "event_severity": "critical", + "statTime": "2022-01-04T10:07:03.008Z", + "eventSeverity": "critical", "count": 7 },{ - "stat_time": "2022-01-01T10:07:03.008Z", - "event_severity": "high", + "statTime": "2022-01-01T10:07:03.008Z", + "eventSeverity": "high", "count": 8 }, { - "stat_time": "2022-01-02T10:07:03.008Z", - "event_severity": "high", + "statTime": "2022-01-02T10:07:03.008Z", + "eventSeverity": "high", "count": 2 },{ - "stat_time": "2022-01-03T10:07:03.008Z", - "event_severity": "high", + "statTime": "2022-01-03T10:07:03.008Z", + "eventSeverity": "high", "count": 25 }, { - "stat_time": "2022-01-04T10:07:03.008Z", - "event_severity": "high", + "statTime": "2022-01-04T10:07:03.008Z", + "eventSeverity": "high", "count": 7 },{ - "stat_time": "2022-01-01T10:07:03.008Z", - "event_severity": "medium", + "statTime": "2022-01-01T10:07:03.008Z", + "eventSeverity": "medium", "count": 9 }, { - "stat_time": "2022-01-02T10:07:03.008Z", - "event_severity": "medium", + "statTime": "2022-01-02T10:07:03.008Z", + "eventSeverity": "medium", "count": 15 },{ - "stat_time": "2022-01-03T10:07:03.008Z", - "event_severity": "medium", + "statTime": "2022-01-03T10:07:03.008Z", + "eventSeverity": "medium", "count": 35 }, { - "stat_time": "2022-01-04T10:07:03.008Z", - "event_severity": "medium", + "statTime": "2022-01-04T10:07:03.008Z", + "eventSeverity": "medium", "count": 7 },{ - "stat_time": "2022-01-01T10:07:03.008Z", - "event_severity": "low", + "statTime": "2022-01-01T10:07:03.008Z", + "eventSeverity": "low", "count": 5 }, { - "stat_time": "2022-01-02T10:07:03.008Z", - "event_severity": "low", + "statTime": "2022-01-02T10:07:03.008Z", + "eventSeverity": "low", "count": 1 },{ - "stat_time": "2022-01-03T10:07:03.008Z", - "event_severity": "low", + "statTime": "2022-01-03T10:07:03.008Z", + "eventSeverity": "low", "count": 25 }, { - "stat_time": "2022-01-04T10:07:03.008Z", - "event_severity": "low", + "statTime": "2022-01-04T10:07:03.008Z", + "eventSeverity": "low", "count": 17 },{ - "stat_time": "2022-01-01T10:07:03.008Z", - "event_severity": "info", + "statTime": "2022-01-01T10:07:03.008Z", + "eventSeverity": "info", "count": 5 }, { - "stat_time": "2022-01-02T10:07:03.008Z", - "event_severity": "info", + "statTime": "2022-01-02T10:07:03.008Z", + "eventSeverity": "info", "count": 15 },{ - "stat_time": "2022-01-03T10:07:03.008Z", - "event_severity": "info", + "statTime": "2022-01-03T10:07:03.008Z", + "eventSeverity": "info", "count": 25 }, { - "stat_time": "2022-01-04T10:07:03.008Z", - "event_severity": "info", + "statTime": "2022-01-04T10:07:03.008Z", + "eventSeverity": "info", "count": 27 }, - ] */ - /* data2 = [ - { - legend: 'critical', - values: [[1435781430781, '999'], [1435781431781, '222'], [1435781432781, '11'], [1435781433781, '3']] - }, - { - legend: 'high', - values: [[1435781430781, '2'], [1435781431781, '3'], [1435781432781, '6'], [1435781433781, '4']] - }, { - legend: 'medium', - values: [[1435781430781, '4'], [1435781431781, '1'], [1435781432781, '5'], [1435781433781, '3']] - }, { - legend: 'low', - values: [[1435781430781, '1'], [1435781431781, '4'], [1435781432781, '1'], [1435781433781, '3']] - }, { - legend: 'info', - values: [[1435781430781, '5'], [1435781431781, '7'], [1435781432781, '5'], [1435781433781, '8']] - } - ] */ + ]*/ this.eventSeverityData = data if (!this.$_.isEmpty(data)) { const dataMap = new Map() diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js index 42b2ab7d..31019555 100644 --- a/src/views/detections/options/detectionOptions.js +++ b/src/views/detections/options/detectionOptions.js @@ -52,7 +52,7 @@ export const multipleBarOption = { legend: { icon: 'circle', top: 10, - right: 10, + right: 30, itemWidth: 10, // 设置宽度 itemHeight: 10 // 设置高度 }, @@ -72,7 +72,7 @@ export const multipleBarOption = { }, axisLabel: { color: '#737373', - interval: 0 + interval: 'auto' }, splitLine: { show: false @@ -104,6 +104,10 @@ export const multipleBarOption = { { name: 'critical', type: 'bar', + stack:'eventSeverityTrend', + emphasis: { + focus: 'series' + }, barWidth: 15, seriesLayoutBy: 'row', itemStyle: { @@ -113,6 +117,10 @@ export const multipleBarOption = { { name: 'high', type: 'bar', + stack:'eventSeverityTrend', + emphasis: { + focus: 'series' + }, barWidth: 15, seriesLayoutBy: 'row', itemStyle: { @@ -122,6 +130,10 @@ export const multipleBarOption = { { name: 'medium', type: 'bar', + stack:'eventSeverityTrend', + emphasis: { + focus: 'series' + }, barWidth: 15, seriesLayoutBy: 'row', itemStyle: { @@ -131,6 +143,10 @@ export const multipleBarOption = { { name: 'low', type: 'bar', + stack:'eventSeverityTrend', + emphasis: { + focus: 'series' + }, barWidth: 15, seriesLayoutBy: 'row', itemStyle: { @@ -140,6 +156,10 @@ export const multipleBarOption = { { name: 'info', type: 'bar', + stack:'eventSeverityTrend', + emphasis: { + focus: 'series' + }, barWidth: 15, seriesLayoutBy: 'row', itemStyle: { From ee5fc2c16ef1b83f2371a6e03e295dc102c41d3e Mon Sep 17 00:00:00 2001 From: hyx Date: Wed, 9 Mar 2022 18:58:36 +0800 Subject: [PATCH 2/4] =?UTF-8?q?CN-342=20=E5=9B=BE=E8=A1=A8=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/date-util.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/date-util.js b/src/utils/date-util.js index 9538bd3e..7be09ecd 100644 --- a/src/utils/date-util.js +++ b/src/utils/date-util.js @@ -42,5 +42,5 @@ export function getNowTime (interval) { } // 日期格式转换 export function rTime (date) { - return window.$dayJs.tz(new Date(date)).format('mm:ss') + return window.$dayJs.tz(new Date(date)).format('MM-DD HH:mm') } From 32c3c47f736823a6772cc55f3ac9017d271f24bf Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Wed, 9 Mar 2022 20:10:28 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E5=B0=9D=E8=AF=95=E8=A7=A3=E5=86=B3?= =?UTF-8?q?=E5=AE=89=E5=85=A8=E4=BA=8B=E4=BB=B6=E6=97=A0=E6=B3=95=E4=B8=8B?= =?UTF-8?q?=E6=8B=89=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../detections/overview/DetectionSecurityEventOverview.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/detections/overview/DetectionSecurityEventOverview.vue b/src/views/detections/overview/DetectionSecurityEventOverview.vue index f0661068..1183ed26 100644 --- a/src/views/detections/overview/DetectionSecurityEventOverview.vue +++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue @@ -172,13 +172,14 @@ export default { }, computed: { formatT0 () { + const vm = this return function (event) { const diffSeconds = event.diffSeconds if (diffSeconds === 0) { return 'T0' } const eventStartTime = event.startTime - const entityStartTime = this.detection.startTime + const entityStartTime = vm.detection.startTime if (_.isNumber(diffSeconds) && _.isNumber(eventStartTime) && _.isNumber(entityStartTime)) { const suffix = unitConvert(diffSeconds, unitTypes.time, 's', null, 0).join('') From b02d6adac6c8815981ee81f9ea2910418db66d2b Mon Sep 17 00:00:00 2001 From: hyx Date: Thu, 10 Mar 2022 13:54:09 +0800 Subject: [PATCH 4/4] =?UTF-8?q?CN-365=20Detection--=E6=9C=8D=E5=8A=A1?= =?UTF-8?q?=E8=B4=A8=E9=87=8F=E4=BA=8B=E4=BB=B6=E9=A1=B6=E9=83=A8=E5=9B=BE?= =?UTF-8?q?=E8=A1=A8=E4=B8=8D=E5=88=B7=E6=96=B0=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/detections/Index.vue | 37 ++++++++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue index 28bf6705..c2c0f5e8 100644 --- a/src/views/detections/Index.vue +++ b/src/views/detections/Index.vue @@ -334,19 +334,48 @@ export default { data.forEach(item => { if (item.eventSeverity) { if (!dataMap.has(item.eventSeverity)) { - const count = [[item.statTime, item.count]] + const count = [[rTime(item.statTime), item.count]] dataMap.set(item.eventSeverity, count) } else { - dataMap.get(item.eventSeverity).push([item.statTime, item.count]) + dataMap.get(item.eventSeverity).push([rTime(item.statTime), item.count]) } } }) + const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`) const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption) + + let xData = [] dataMap.forEach(function (value, key) { - eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1])) + //eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1])) + value.forEach(item => { + if(xData.indexOf(item[0]) < 0){ + xData.push(item[0]) + } + }) }) - eventSeverityTrendOption.xAxis.data = dataMap.get('critical').map(v => rTime(v[0])) + eventSeverityTrendOption.series.forEach(serie => { + let seriesData = [] + xData.forEach(item => { + if(dataMap.has(serie.name)){ + let hasX = dataMap.get(serie.name).some(function(v) { + if (item == v[0]) { + seriesData.push(Number(v[1])) + return true; + } + }) + if(!hasX){ + seriesData.push(0) + } + }else { + seriesData.push(0) + } + }) + serie.data = seriesData + }) + + //eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0])) + eventSeverityTrendOption.xAxis.data = xData const detectionChart = echarts.init(chartDom) detectionChart.setOption(eventSeverityTrendOption) // this.isEventSeverityNoData = false