From 9aedf25dd253ac03d9ea182ef99f5529a1c4331d Mon Sep 17 00:00:00 2001 From: hyx Date: Wed, 9 Mar 2022 15:05:46 +0800 Subject: [PATCH] =?UTF-8?q?CN-342=20=E5=9B=BE=E8=A1=A8=E4=BC=98=E5=8C=96?= =?UTF-8?q?=201.type=3D11=E7=9A=84=E6=8A=98=E7=BA=BF=E5=9B=BE=EF=BC=8CY?= =?UTF-8?q?=E8=BD=B4=E6=9C=80=E5=B0=8F=E9=97=B4=E9=9A=94=E6=98=AF1?= =?UTF-8?q?=EF=BC=8C=E9=9C=80=E8=A6=81=E5=B0=86=E5=85=B6=E6=94=BE=E5=BC=80?= =?UTF-8?q?=E4=B8=BA=E5=8C=85=E5=90=AB=E5=B0=8F=E6=95=B0=EF=BC=8C=E4=BD=BF?= =?UTF-8?q?=E6=9B=B2=E7=BA=BF=E5=8F=AF=E4=BB=A5=E5=85=85=E6=BB=A1=E5=9B=BE?= =?UTF-8?q?=E8=A1=A8=202.detection=E9=A1=B6=E9=83=A8=E6=9F=B1=E7=8A=B6?= =?UTF-8?q?=E5=9B=BE=E4=BC=98=E5=8C=96=E8=B0=83=E6=95=B4=EF=BC=9A=20=20=20?= =?UTF-8?q?=20=20(1).=E4=B8=8D=E5=90=8C=E4=B8=A5=E9=87=8D=E7=A8=8B?= =?UTF-8?q?=E5=BA=A6=E7=9A=84=E6=9F=B1=E4=BD=93=E5=B1=95=E7=A4=BA=E4=BB=8E?= =?UTF-8?q?=E5=B9=B6=E6=8E=92=E6=94=B9=E4=B8=BA=E5=A0=86=E5=8F=A0=20=20=20?= =?UTF-8?q?=20=20(2).x=E8=BD=B4=E6=97=B6=E9=97=B4=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E7=B2=BE=E7=AE=80=E4=B8=BAmm:ss=EF=BC=8C=E4=B8=94=E6=95=B0?= =?UTF-8?q?=E9=87=8F=E8=BF=87=E5=A4=9A=E5=AF=BC=E8=87=B4x=E8=BD=B4label?= =?UTF-8?q?=E9=87=8D=E5=8F=A0=E6=97=B6=EF=BC=8C=E9=9A=90=E8=97=8F=E4=B8=80?= =?UTF-8?q?=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: {