From b1e67452a5fa194a0e3c7f2d25b05e01a9bad8da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com> Date: Mon, 13 Mar 2023 15:16:59 +0800 Subject: [PATCH] =?UTF-8?q?CN-930:=20detection=E9=A1=B6=E9=83=A8=E6=9F=B1?= =?UTF-8?q?=E7=8A=B6=E5=9B=BE=E6=94=B9=E4=B8=BAx=E8=BD=B4=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E8=BD=B4=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/date-util.js | 4 ++ src/views/charts/charts/tools.js | 21 ++++++++++ src/views/detections/Index.vue | 40 ++++++++++++++----- .../detections/options/detectionOptions.js | 7 +++- 4 files changed, 62 insertions(+), 10 deletions(-) diff --git a/src/utils/date-util.js b/src/utils/date-util.js index f35aa284..39d0c102 100644 --- a/src/utils/date-util.js +++ b/src/utils/date-util.js @@ -41,6 +41,10 @@ export function getNowTime (interval) { export function rTime (date) { return window.$dayJs.tz(new Date(date)).format('MM-DD HH:mm') } +// 日期转换为时间戳 +export function toTime (date) { + return new Date(date).getTime() +} // 时间格式转换 export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') { let d = date diff --git a/src/views/charts/charts/tools.js b/src/views/charts/charts/tools.js index c8bfdca9..12f90261 100644 --- a/src/views/charts/charts/tools.js +++ b/src/views/charts/charts/tools.js @@ -514,3 +514,24 @@ export function appStackedLineTooltipFormatter (params) { str += '' return str } + +export function detectionTooltipFormatter (params) { + let str = '
' + const tData = params.data[0] + str += '
' + str += dateFormatByAppearance(tData) + str += '
' + str += '
' + str += '' + str += params.marker + str += ` + ${params.seriesName} + ` + str += '' + str += ` + ${params.data[1]} + ` + str += '
' + str += '
' + return str +} diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue index 3c30171e..d6fa1975 100644 --- a/src/views/detections/Index.vue +++ b/src/views/detections/Index.vue @@ -124,12 +124,18 @@ import DetectionFilter from '@/views/detections/DetectionFilter' import DetectionList from '@/views/detections/DetectionList' import Pagination from '@/components/common/Pagination' import { defaultPageSize, detectionPageType } from '@/utils/constants' -import { getNowTime, getSecond, rTime } from '@/utils/date-util' +import { getNowTime, getSecond, toTime } from '@/utils/date-util' import { ref, shallowRef } from 'vue' import * as echarts from 'echarts' -import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor } from '@/views/detections/options/detectionOptions' +import { + activeAttackBar, + getAttackColor, + getSeverityColor, + multipleBarOption, + pieForSeverity +} from '@/views/detections/options/detectionOptions' import { api, getData } from '@/utils/api' -import { reverseSortBy, extensionEchartY } from '@/utils/tools' +import { extensionEchartY, reverseSortBy } from '@/utils/tools' import { useRoute } from 'vue-router' import Loading from '@/components/common/Loading' import ChartTabs from '@/components/common/ChartTabs' @@ -283,10 +289,14 @@ export default { data.forEach(item => { if (item.eventSeverity) { if (!dataMap.has(item.eventSeverity)) { - const count = [[rTime(item.statTime), item.count]] + // todo 暂时保留原来的，后续若使用新版，则删除该注释 + // const count = [[rTime(item.statTime), item.count]] + const count = [[toTime(item.statTime), item.count]] dataMap.set(item.eventSeverity, count) } else { - dataMap.get(item.eventSeverity).push([rTime(item.statTime), item.count]) + // 原来的 + // dataMap.get(item.eventSeverity).push([rTime(item.statTime), item.count]) + dataMap.get(item.eventSeverity).push([toTime(item.statTime), item.count]) } } }) @@ -303,6 +313,7 @@ export default { } }) }) + eventSeverityTrendOption.series.forEach(serie => { const seriesData = [] xData.forEach(item => { @@ -311,22 +322,33 @@ export default { // eslint-disable-next-line array-callback-return const hasX = dataMap.get(serie.name).some(function (v) { if (item === v[0]) { - seriesData.push(Number(v[1])) + // 原来的 + // seriesData.push(Number(v[1])) + seriesData.push([item, Number(v[1])]) return true } }) if (!hasX) { - seriesData.push(0) + // 原来的 + // seriesData.push(0) + seriesData.push([item, 0]) } } else { - seriesData.push(0) + // 原来的 + // seriesData.push(0) + seriesData.push([item, 0]) } }) serie.data = seriesData }) // eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0])) - eventSeverityTrendOption.xAxis.data = xData + // 原来的 + // eventSeverityTrendOption.xAxis.data = xData + eventSeverityTrendOption.xAxis = [{ + type: 'time', + splitNumber: 8 + }] let detectionChart = echarts.getInstanceByDom(chartDom) if (detectionChart) { echarts.dispose(detectionChart) diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js index b608b4eb..a796cf87 100644 --- a/src/views/detections/options/detectionOptions.js +++ b/src/views/detections/options/detectionOptions.js @@ -1,4 +1,5 @@ import { + detectionTooltipFormatter, tooLongFormatter } from '@/views/charts/charts/tools' import unitConvert from '@/utils/unit-convert' @@ -57,7 +58,11 @@ export const multipleBarOption = { itemWidth: 10, // 设置宽度 itemHeight: 10 // 设置高度 }, - tooltip: {}, + tooltip: { + formatter: function (params) { + return detectionTooltipFormatter(params) + } + }, dataset: { source: [ ]