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

2022-10-26 18:59:53 +08:00
parent 04e4371ac1
commit c2c3898d5b
3 changed files with 108 additions and 78 deletions
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/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 {
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/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
-                :clearable='false'
-                :editable='false'
-                v-model="timeArr"
+            <el-date-picker
+                v-model="newDateValue"
+                ref="newDatePicker"
+                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"
-                  style="border-left: 1px solid rgba(0,0,0,0.09);">
+          <el-col
+              :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: 15,
-        name: 'last 15 Min'
-      },
-      {
-        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'
-      }
+      { value: 5, name: 'last 5 Min' },
+      { value: 15, name: 'last 15 Min' },
+      { 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(() => {
-      return rangeHistory.value.slice(0, 4)
-    })
+    const rangeHistoryArr = rangeHistory
+
    // 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()
-      myDatePicker.value.pickerVisible = true
+      newDateValue.value = [
+        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,
-      myDatePicker,
+      newDateValue,
+      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>
--- a/src/utils/date-util.js
+++ b/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
+}