CN-930: detection顶部柱状图改为x轴时间轴模式

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

src/views/charts/charts/tools.js

@@ -514,3 +514,24 @@ export function appStackedLineTooltipFormatter (params) {
   str += '</div>'
   return str
 }
+
+export function detectionTooltipFormatter (params) {
+  let str = '<div>'
+  const tData = params.data[0]
+  str += '<div style="margin-bottom: 5px">'
+  str += dateFormatByAppearance(tData)
+  str += '</div>'
+  str += '<div class="cn-chart-tooltip">'
+  str += '<span class="cn-chart-tooltip-box">'
+  str += params.marker
+  str += `<span class="cn-chart-tooltip-content"> 
+      ${params.seriesName}
+  </span>`
+  str += '</span>'
+  str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color" style="position: absolute;right: 10px">
+      ${params.data[1]}
+  </span>`
+  str += '</div>'
+  str += '</div>'
+  return str
+}

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)

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: [
     ]