CN-928 fix: 调整时区方案

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()

src/utils/date-util.js

@@ -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'
+  }
 }

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,

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 })
 

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 {

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

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 })
 

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 {