From f4a8ef68c01ce77d52446cecd38de2909ea6a197 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 13 Mar 2023 16:48:37 +0800
Subject: [PATCH] =?UTF-8?q?CN-928=20fix:=20=E8=B0=83=E6=95=B4=E6=97=B6?=
 =?UTF-8?q?=E5=8C=BA=E6=96=B9=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/TimeRange/DateTimeRange.vue        |  7 +--
 src/utils/date-util.js                        | 49 +++++++++++++++++--
 src/views/charts/ChartHeader.vue              |  9 +---
 src/views/charts/Panel.vue                    |  5 +-
 src/views/charts2/Panel.vue                   |  7 +--
 .../charts2/charts/options/echartOption.js    | 15 +++---
 src/views/detections/Index.vue                |  2 +-
 src/views/entityExplorer/EntityExplorer.vue   |  2 +-
 8 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue
index 2832f4f8..fe0c789d 100644
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -79,7 +79,7 @@
 <script>
 import { ref, computed, watch, reactive } from 'vue'
 import { storageKey } from '@/utils/constants'
-import { getMillisecond, timestampToList } from '@/utils/date-util'
+import { getMillisecond, millTimestampDiffFromTz, timestampToList } from '@/utils/date-util'
 import { useStore } from 'vuex'
 
 export default {
@@ -220,8 +220,9 @@ export default {
      * @param val，开始/结束时间数组
      */
     const timeArrChange = (val) => {
-      myStartTime.value = getMillisecond(val[0])
-      myEndTime.value = getMillisecond(val[1])
+      // 按服务器时区修正时间戳
+      myStartTime.value = getMillisecond(val[0]) + millTimestampDiffFromTz()
+      myEndTime.value = getMillisecond(val[1]) + millTimestampDiffFromTz()
       isCustom.value = true
       dateRangeValue.value = -1
       returnValue()
diff --git a/src/utils/date-util.js b/src/utils/date-util.js
index 39d0c102..73e53976 100644
--- a/src/utils/date-util.js
+++ b/src/utils/date-util.js
@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { storageKey } from '@/utils/constants'
+import {storageKey} from '@/utils/constants'
 
 // 将时间转化为秒
 export function getSecond (time) {
@@ -47,7 +47,7 @@ export function toTime (date) {
 }
 // 时间格式转换
 export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {
-  let d = date
+  let d
   // date不是数字，则视为utc时区的时间字符串，例如2022-02-22 22:22
   if (isNaN(date)) {
     d = window.$dayJs(date).valueOf() + parseInt(localStorage.getItem(storageKey.timezoneLocalOffset)) * 3600000
@@ -93,6 +93,47 @@ export function timestampToList (time) {
   const m = date.getMinutes()
   const s = date.getSeconds()
 
-  const arr = [Y, M, D, H, m, s]
-  return arr
+  return [Y, M, D, H, m, s]
+}
+/**
+ * 返回浏览器本地时区和服务器时区的毫秒差
+ * @returns {number}
+ */
+export function millTimestampDiffFromTz () {
+  return parseInt(localStorage.getItem(storageKey.timezoneLocalOffset)) * 3600 * 1000 - window.$dayJs.tz().utcOffset() * 60 * 1000
+}
+/**
+ * echarts时间类型横坐标formatter
+ * @returns {String}
+ */
+export function xAxisTimeFormatter (value) {
+  const date = new Date(value - millTimestampDiffFromTz())
+  const dayStart = new Date(value - millTimestampDiffFromTz())
+  dayStart.setHours(0)
+  dayStart.setMinutes(0)
+  dayStart.setSeconds(0)
+  dayStart.setMilliseconds(0)
+  const hourStart = new Date(value - millTimestampDiffFromTz())
+  hourStart.setMinutes(0)
+  hourStart.setSeconds(0)
+  hourStart.setMilliseconds(0)
+  const HHmm = (date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()) +
+    ':' +
+    (date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes())
+  // 如果是一天的开始
+  if (date.getTime() === dayStart.getTime()) {
+    return '{day|' + dayStart.getDate() + '}'
+  } else if (date.getTime() === hourStart.getTime()) {
+    return '{hour|' + HHmm + '}'
+  } else {
+    return HHmm
+  }
+}
+export const xAxisTimeRich = {
+  day: {
+    fontWeight: 'bold'
+  },
+  hour: {
+    fontWeight: 'bold'
+  }
 }
diff --git a/src/views/charts/ChartHeader.vue b/src/views/charts/ChartHeader.vue
index d0dcd6b4..3d2a0592 100644
--- a/src/views/charts/ChartHeader.vue
+++ b/src/views/charts/ChartHeader.vue
@@ -370,17 +370,12 @@ export default {
     }
   },
   setup (props) {
-    const { currentRoute } = useRouter()
-
-    function isEntityDetail (r) {
-      return r.indexOf('entityDetail') > -1
-    }
-    const dateRangeValue = isEntityDetail(currentRoute.value.path) ? 60 * 24 : 60
+    const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     // entity详情内的chart时间工具不是公共的，需要单独定义
     const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
     // 复制一份prop中需要被组件v-model的内容，避免报错
-    const copyOrderPieTable = props.orderPieTable
+    const copyOrderPieTable = ref(props.orderPieTable)
     return {
       chartTimeFilter,
       chartTableTopOptions,
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index 81249852..e052f617 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -107,11 +107,8 @@ export default {
     const { params } = useRoute()
     panelType = props.entity ? props.entity.type : panelTypeAndRouteMapping[params.typeName]
 
-    function isEntityDetail (t) {
-      return [4, 5, 6].indexOf(t) > -1
-    }
     // date
-    const dateRangeValue = isEntityDetail(panelType) ? 60 * 24 : 60
+    const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     const timeFilter = ref({ startTime, endTime, dateRangeValue })
 
diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index a4cf975e..4e8cfca2 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -239,19 +239,16 @@ export default {
       panelType = props.entity ? props.entity.type : panelTypeAndRouteMapping[params.typeName]
     }
 
-    function isEntityDetail (t) {
-      return [4, 5, 6].indexOf(t) > -1
-    }
     // 获取url携带的range、startTime、endTime
     const rangeParam = query.range
     const startTimeParam = query.startTime
     const endTimeParam = query.endTime
     // 若url携带了，使用携带的值，否则使用默认值。
 
-    const dateRangeValue = rangeParam ? parseInt(query.range) : (isEntityDetail(panelType) ? 60 * 24 : 60)
+    const dateRangeValue = rangeParam ? parseInt(query.range) : 60
     const timeFilter = ref({ dateRangeValue })
     if (!startTimeParam || !endTimeParam) {
-      const { startTime, endTime } = getNowTime(isEntityDetail(panelType) ? 60 * 24 : 60)
+      const { startTime, endTime } = getNowTime(60)
       timeFilter.value.startTime = startTime
       timeFilter.value.endTime = endTime
     } else {
diff --git a/src/views/charts2/charts/options/echartOption.js b/src/views/charts2/charts/options/echartOption.js
index 6d6a8788..a7e6a44a 100644
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -8,6 +8,7 @@ import {
 } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import { axisFormatter } from '@/views/charts/charts/tools'
+import { xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
 
 export const pieChartOption1 = {
   tooltip: {
@@ -185,15 +186,11 @@ export const stackedLineChartOption = {
   xAxis: [
     {
       type: 'time',
-      splitNumber: 8
-      // axisLabel: {
-      //   formatter: function (value) {
-      //     const data = new Date(value)
-      //     const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
-      //     const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
-      //     return h + ':' + m
-      //   }
-      // }
+      splitNumber: 8,
+      axisLabel: {
+        formatter: xAxisTimeFormatter,
+        rich: xAxisTimeRich
+      }
     }
   ],
   yAxis: [
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index d6fa1975..8592a649 100644
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -864,7 +864,7 @@ export default {
   setup () {
     const { params } = useRoute()
     const pageType = params.typeName
-    const dateRangeValue = 60 * 24
+    const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     const timeFilter = ref({ startTime, endTime, dateRangeValue })
 
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index d5cced72..a469d896 100644
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -717,7 +717,7 @@ export default {
     }
   },
   setup () {
-    const dateRangeValue = 60 * 24
+    const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     const timeFilter = ref({ startTime, endTime, dateRangeValue })
     return {