CN-746: 更换时间选择器实现方案

src/assets/css/components/components/common/TimeRange/date-time-range.scss

@@ -122,7 +122,8 @@
       }
 
       .date-range-history {
-        height: 116px;
+        height: 140px;
+        line-height: 24px;
         overflow-y: auto;
 
         .date-range-history-item {

src/components/common/TimeRange/DateTimeRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-ele-click-outside="changeDropdown" style="position: relative" class="date-range-box">
+  <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 99" class="date-range-box">
     <div @click="showDropdown" class="date-range-text">
       <div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
       <div class="calendar-popover-text" style="display: flex" v-if="isCustom">
@@ -19,17 +19,13 @@
         <el-row class="date-range-panel-top" style="position: relative">
           <el-col :span="16" class="date-range-panel-content date-range-panel-content-left">
             <div class="date-range-title" style="padding-left: 0">Absolute time range</div>
-            <MyDatePicker
+            <el-date-picker
-                :clearable='false'
+                v-model="newDateValue"
-                :editable='false'
+                ref="newDatePicker"
-                v-model="timeArr"
+                class="date_style"
+                style="position: absolute;top: -53px;left: -536px;"
+                :clearable="false"
                 type="datetimerange"
-                ref="myDatePicker"
-                :popper-class="'myDatePicker'"
-                class="panel-time-picker-hidden"
-                :size="'small'"
-                placement="left-start"
-                style="position: absolute"
                 @change="timeArrChange"
             />
             <div class="content-title">From</div>
@@ -40,9 +36,7 @@
             <div @click="myDatePickerShow" tabindex="2" class="content-input">
               {{ dateFormatByAppearance(getMillisecond(myEndTime)) }}
             </div>
-            <div>
+
-              <el-button @click="timeRange" type="primary" size="mini">Apply time range</el-button>
-            </div>
             <div class="date-range-title" style="padding-left: 0">Recently used absolute ranges</div>
             <div class="date-range-history">
               <div v-for="(item, index) in rangeHistoryArr" :key="index" class="date-range-history-item"
@@ -53,11 +47,14 @@
               </div>
             </div>
           </el-col>
-          <el-col :span="8" class="date-range-panel-content date-range-panel-content-right"
+          <el-col
-                  style="border-left: 1px solid rgba(0,0,0,0.09);">
+              :span="8"
+              class="date-range-panel-content date-range-panel-content-right"
+              style="border-left: 1px solid rgba(0,0,0,0.09);">
             <div class="date-range-title">Relatime time ranges</div>
             <ul class="date-range-item">
-              <li v-for="item in dateRangeArr" @click="quickChange(item.value)"
+              <li v-for="item in dateRangeArr"
+                  @click="quickChange(item.value)"
                   :class="(item.value==dateRangeValue.value || item.value==dateRangeValue)?'active':''"
                   :key="item.value">
                 <span style="position: relative">
@@ -69,7 +66,7 @@
             </ul>
           </el-col>
         </el-row>
-        <el-row class="date-range-panel-bottom" style="">
+        <el-row class="date-range-panel-bottom">
           <el-col :span="12">{{ address }}</el-col>
           <el-col :span="12" class="utc-str">{{ utcStr }}</el-col>
         </el-row>
@@ -82,7 +79,7 @@
 import { ref, computed } from 'vue'
 import MyDatePicker from '../MyDatePicker'
 import { storageKey } from '@/utils/constants'
-import { getMillisecond } from '@/utils/date-util'
+import { getMillisecond, timestampToList } from '@/utils/date-util'
 import { useStore } from 'vuex'
 
 export default {
@@ -99,14 +96,6 @@ export default {
     dateRange: {
       type: Number
     }
-    /* useRefresh: {
-      type: Boolean,
-      default: true
-    },
-    useDateRange: {
-      type: Boolean,
-      default: true
-    } */
   },
   emits: ['change'],
   components: {
@@ -117,51 +106,32 @@ export default {
     const store = useStore()
     const myStartTime = ref(props.startTime)
     const myEndTime = ref(props.endTime)
-    const timeArr = ref([myStartTime.value, myEndTime.value])
+    // 时间选择器绑定的值
+    const newDateValue = ref([
+      new Date(...timestampToList(myStartTime.value)),
+      new Date(...timestampToList(myEndTime.value))
+    ])
+    // 时区地址
     const address = localStorage.getItem(storageKey.sysTimezone)
+    // 当前所在时区
     const utc = localStorage.getItem(storageKey.timezoneOffset)
+    // 历史选择时间
     const rangeHistory = ref(localStorage.getItem(storageKey.dataRangeHistory) ? JSON.parse(localStorage.getItem(storageKey.dataRangeHistory)) : [])
     const dateRangeValue = props.dateRange ? ref(props.dateRange) : ref(60)
     const isCustom = ref(dateRangeValue.value === -1)
     const dateRangeArr = [
-      {
+      { value: 5, name: 'last 5 Min' },
-        value: 5,
+      { value: 15, name: 'last 15 Min' },
-        name: 'last 5 Min'
+      { value: 30, name: 'last 30 Min' },
-      },
+      { value: 60, name: 'last 1 hour' },
-      {
+      { value: 180, name: 'last 3 hour' },
-        value: 15,
+      { value: 360, name: 'last 6 hour' },
-        name: 'last 15 Min'
+      { value: 720, name: 'last 12 hour' },
-      },
+      { value: 1440, name: 'last 1 days' },
-      {
+      { value: 2880, name: 'last 2 days' }
-        value: 30,
-        name: 'last 30 Min'
-      },
-      {
-        value: 60,
-        name: 'last 1 hour'
-      },
-      {
-        value: 180,
-        name: 'last 3 hour'
-      },
-      {
-        value: 360,
-        name: 'last 6 hour'
-      },
-      {
-        value: 720,
-        name: 'last 12 hour'
-      },
-      {
-        value: 1440,
-        name: 'last 1 days'
-      },
-      {
-        value: 2880,
-        name: 'last 2 days'
-      }
     ]
     const dropdownFlag = ref(false)
+
     // computed
     const utcStr = computed(() => {
       let str = 'UTC '
@@ -186,20 +156,25 @@ export default {
       }
       return str
     })
-    const rangeHistoryArr = computed(() => {
+    const rangeHistoryArr = rangeHistory
-      return rangeHistory.value.slice(0, 4)
+
-    })
     // refs
-    const myDatePicker = ref(null)
+    const newDatePicker = ref(null)
+
     // methods
+    /**
+     * 打开/关闭时间面板
+     */
     const showDropdown = () => {
       dropdownFlag.value = !dropdownFlag.value
       if (dropdownFlag.value) {
         myStartTime.value = props.startTime
         myEndTime.value = props.endTime
-        timeArr.value = [getMillisecond(myStartTime.value), getMillisecond(myEndTime.value)]
       }
     }
+    /**
+     * 点击空白处隐藏时间面板
+     */
     const changeDropdown = () => {
       if (dropdownFlag.value) {
         dropdownFlag.value = false
@@ -208,19 +183,31 @@ export default {
         dropdownFlag.value = false
       }
     }
+    /**
+     * 打开时间选择器，从时间面板的“开始时间”、“结束时间”调用
+     */
     const myDatePickerShow = () => {
-      myDatePicker.value.focus()
+      newDateValue.value = [
-      myDatePicker.value.pickerVisible = true
+        new Date(...timestampToList(myStartTime.value)),
+        new Date(...timestampToList(myEndTime.value))
+      ]
+      newDatePicker.value.focus()
     }
+    /**
+     * 时间选择器，选择时间，点击OK后的回调
+     * @param val，开始/结束时间数组
+     */
     const timeArrChange = (val) => {
       myStartTime.value = getMillisecond(val[0])
       myEndTime.value = getMillisecond(val[1])
-    }
-    const timeRange = () => {
       isCustom.value = true
       dateRangeValue.value = -1
       returnValue()
     }
+    /**
+     * 历史时间列表中点击一项，对时间进行赋值
+     * @param item
+     */
     const historyChange = (item) => {
       myStartTime.value = item.start
       myEndTime.value = item.end
@@ -235,19 +222,27 @@ export default {
       myStartTime.value = myEndTime.value - value * 60 * 1000
       returnValue()
     }
+    /**
+     * 重置时间，将时间存入缓存，并触发方法请求接口刷新界面
+     */
     const returnValue = () => {
       cancelHttp()
       rangeHistory.value.unshift({
         start: myStartTime.value,
         end: myEndTime.value
       })
+      if (rangeHistory.value.length > 4) {
+        rangeHistory.value.splice(4, rangeHistory.value.length - 1)
+      }
       localStorage.setItem(storageKey.dataRangeHistory, JSON.stringify(rangeHistory.value))
       ctx.emit('change', myStartTime.value, myEndTime.value, dateRangeValue)
       dropdownFlag.value = false
     }
+    /**
+     * 终止http请求
+     */
     const cancelHttp = () => {
       const cancelList = store.state.panel.httpCancel
-      // console.log('DateTimeRange.vue------cancelHttp------查看终止数量', cancelList, cancelList.length)
       if (cancelList.length > 0) {
         cancelList.forEach((cancel, index) => {
           cancel()
@@ -265,8 +260,8 @@ export default {
       dateRangeArr,
       dateRangeValue,
       isCustom,
-      timeArr,
+      newDateValue,
-      myDatePicker,
+      newDatePicker,
       showDetail,
       rangeHistory,
       rangeHistoryArr,
@@ -276,9 +271,20 @@ export default {
       timeArrChange,
       returnValue,
       quickChange,
-      timeRange,
       historyChange
     }
   }
 }
 </script>
+
+<style scoped>
+/deep/.el-input__inner {
+  visibility: hidden !important;
+}
+/deep/.el-popper__arrow {
+  border: 1px red solid !important;
+}
+.date_style /deep/.el-popper__arrow::before {
+  border: 1px red solid !important;
+}
+</style>

src/utils/date-util.js

@@ -69,3 +69,26 @@ export function dateFormatToUTC (date, format = 'YYYY-MM-DD HH:mm:ss') {
   d = window.$dayJs(d).tz().format(format)
   return d
 }
+
+/**
+ * 时间戳转年月日时分秒，置于数组中，配合el-date-picker使用
+ * @param time
+ * @returns {number[]}
+ */
+export function timestampToList (time) {
+  // 根据地址获取当前时区
+  const newTimezone = window.$dayJs.tz().utcOffset() / 60
+  // 缓存的本地时区
+  const localTimezone = parseInt(localStorage.getItem(storageKey.timezoneLocalOffset))
+  const date = new Date(getMillisecond(time + (newTimezone - localTimezone) * 3600))
+
+  const Y = date.getFullYear()
+  const M = date.getMonth()
+  const D = date.getDate()
+  const H = date.getHours()
+  const m = date.getMinutes()
+  const s = date.getSeconds()
+
+  const arr = [Y, M, D, H, m, s]
+  return arr
+}