feat:时间选择组件开发 （60%）

src/assets/css/common.scss

@@ -12,4 +12,13 @@ body {
   margin: 0 !important;
   padding: 0 !important;
   cursor: default !important;
-}
+}
+
+.myDatePicker .el-picker-panel__footer{
+  .el-button{
+    display: none;
+  }
+  .is-plain{
+    display: inline-block;
+  }
+}

src/components/common/MyDatePicker/index.js

@@ -25,6 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 const dayjs__default = /* #__PURE__ */_interopDefaultLegacy(window.$dayJs)
 console.log(window.$dayJs.tz().format('YYYY-MM-DD HH:mm:ss'))
+console.log(window.$dayJs.tz.guess())
 const ElInput__default = /* #__PURE__ */_interopDefaultLegacy(ElInput)
 const ElButton__default = /* #__PURE__ */_interopDefaultLegacy(ElButton)
 const customParseFormat__default = /* #__PURE__ */_interopDefaultLegacy(customParseFormat)

src/components/common/TimeRange/DateTimeRange.vue

@@ -1,25 +1,68 @@
 <template>
-    <div v-click-outside="{object: {a:1}, func: changeDropdown}">
+    <div v-ele-click-outside="changeDropdown" style="position: relative" class="date-range-box">
-        <el-row @click="showDropdown">
+        <div @click="showDropdown" class="date-range-text">
-            <el-col :span="10" class="calendar-popover-text">{{dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss')}}</el-col>
+            <div class="calendar-popover-text"><i class="cn-icon cn-icon-add"></i></div>
-            <el-col :span="4"> = </el-col>
+            <div class="calendar-popover-text" style="display: flex" v-if="isCustom">
-            <el-col :span="10" class="calendar-popover-text">{{dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss')}}</el-col>
+                <div class="calendar-popover-text">{{dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
-        </el-row>
+                <div class="calendar-popover-text"> - </div>
-        <div v-if="dropdownFlag" >
+                <div class="calendar-popover-text">{{dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
-            123123123123123123
+            </div>
+            <div class="calendar-popover-text" v-else>
+                {{dateRangeArr.find(item=>item.value === dateRangeValue).name}}
+            </div>
+            <div class="calendar-popover-text"><i class="cn-icon cn-icon-add"></i></div>
         </div>
+        <transition name="el-zoom-in-top">
+            <div v-if="dropdownFlag" class="date-range-panel">
+            <el-row class="date-range-panel-top" style="position: relative">
+                <el-col :span="16">
+                    <MyDatePicker
+                            :clearable='false'
+                            :editable='false'
+                            v-model="timeArr"
+                            type="datetimerange"
+                            ref="myDatePicker"
+                            :popper-class="'myDatePicker'"
+                            class="panel-time-picker-hidden"
+                            :size="'small'"
+                            :align="'left'"
+                            placement="left-start"
+                            style="position: absolute"
+                            @change="timeArrChange"
+                    />
+                    From
+                    <div @click="myDatePickerShow">{{dayJs.tz(myStartTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
+                    To
+                    <div @click="myDatePickerShow">{{dayJs.tz(myEndTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
+                    <el-button @click="timeRange" type="primary">Apply time range</el-button>
+                </el-col>
+                <el-col :span="8">
+                    <div>
+                        <div>Relatime time ranges</div>
+                        <ul class="date-range-item">
+                            <li v-for="item in dateRangeArr" @click="quickChange(item.value)" :class="item.value==dateRangeValue?'active':''" :key="item.value">{{item.name}}</li>
+                        </ul>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row class="date-range-panel-bottom">
+                <el-col :span="12">{{address}}</el-col>
+                <el-col :span="12">{{utcStr}}</el-col>
+            </el-row>
+        </div>
+        </transition>
     </div>
 </template>
 
 <script>
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import MyDatePicker from '../MyDatePicker'
 export default {
   name: 'DateTimeRange',
   props: {
     startTime: {
       type: Number,
-      default: window.$dayJs.tz().valueOf() - 60 * 60 * 1000
+      default: window.$dayJs.tz().valueOf() - 1 * 60 * 60 * 1000
     },
     endTime: {
       type: Number,
@@ -33,30 +76,197 @@ export default {
   setup (props, ctx) {
     // data
     const myStartTime = ref(props.startTime)
+    const myEndTime = ref(props.endTime)
+    const timeArr = ref([myStartTime.value, myEndTime.value])
+    const address = localStorage.getItem('cn-sys-timezone')
+    const utc = localStorage.getItem('timezone-offset')
+    const dateRangeValue = ref(60)
+    const isCustom = ref(false)
+    const dateRangeArr = ref([
+      {
+        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'
+      }
+    ])
+    console.log(utc)
     const dropdownFlag = ref(false)
+    // computed
+    const utcStr = computed(() => {
+      let str = 'UTC'
+      if (utc < 0) {
+        str += '-'
+      } else {
+        str += '+'
+      }
+      const abs = Math.abs(utc)
+      if (abs > 10) {
+        str += abs + ''
+      } else {
+        str += '0' + (abs + '')
+      }
+      str += ':00'
+      return str
+    })
+    // refs
+    const myDatePicker = ref(null)
     // methods
     const showDropdown = () => {
       dropdownFlag.value = !dropdownFlag.value
+      if (dropdownFlag.value) {
+        myStartTime.value = props.startTime
+        myEndTime.value = props.endTime
+        timeArr.value = [myStartTime.value, myEndTime.value]
+      }
     }
     const changeDropdown = () => {
       console.log(123123123)
-      if (dropdownFlag.value){
+      if (dropdownFlag.value) {
+        dropdownFlag.value = false
+      }
+      if (dropdownFlag.value) {
         dropdownFlag.value = false
       }
     }
+    const myDatePickerShow = () => {
+      myDatePicker.value.focus()
+      myDatePicker.value.pickerVisible = true
+    }
+    const timeArrChange = (val) => {
+      console.log(val)
+      myStartTime.value = val[0]
+      myEndTime.value = val[1]
+    }
+    const timeRange = () => {
+      isCustom.value = true
+      returnValue()
+    }
+    const quickChange = (value) => {
+      isCustom.value = false
+      myEndTime.value = window.$dayJs.tz().valueOf()
+      myStartTime.value = myEndTime.value - value * 60 * 1000
+      dateRangeValue.value = value
+      returnValue()
+    }
+    const returnValue = () => {
+      ctx.emit('change', myStartTime.value, myEndTime.value, dateRangeValue)
+      dropdownFlag.value = false
+    }
+    // watch
     watch(myStartTime, (newValue, oldValue) => {
       console.log('The new counter value is: ' + myStartTime.value)
+      console.log('The new counter value is: ' + myEndTime.value)
     })
     return {
       myStartTime,
+      myEndTime,
       dropdownFlag,
+      utcStr,
+      address,
+      dateRangeArr,
+      dateRangeValue,
+      isCustom,
+      timeArr,
+      myDatePicker,
+      myDatePickerShow,
       showDropdown,
-      changeDropdown
+      changeDropdown,
+      timeArrChange,
+      returnValue,
+      quickChange,
+      timeRange
     }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-
+.date-range-box{
+    font-size: 14px;
+}
+.date-range-item{
+    list-style-type:none;
+}
+/deep/ .panel-time-picker-hidden{
+    visibility: hidden !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.date-range-text{
+    font-size: 14px;
+    min-width:150px;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-around;
+    height: 26px;
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    border-radius: 2px;
+    line-height: 26px;
+    .cn-icon{
+        font-size: 14px;
+    }
+}
+.calendar-popover-text{
+    white-space: nowrap;
+    display: inline-block;
+    margin: 0 5px;
+}
+.calendar-popover-text:first-of-type{
+    margin-left: 0;
+}
+.calendar-popover-text:last-of-type{
+    margin-right: 0;
+}
+.date-range-panel{
+    height: 410px;
+    width: 476px;
+    background: #FFFFFF;
+    box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
+    position: absolute;
+    right: 0;
+    z-index: 1;
+}
+.date-range-panel-top{
+    height: 364px;
+}
+.date-range-panel-bottom{
+    height: 44px;
+    line-height: 44px;
+}
 </style>

src/components/table/CnDataList.vue

@@ -74,8 +74,7 @@ export default {
       tools: {
         showCustomTableTitle: false // 自定义列弹框是否显示
       },
-      showLayout: [],
+      showLayout: []
-      value1: 1623997984000
     }
   },
   methods: {

src/main.js

@@ -6,6 +6,7 @@ import App from '@/App.vue'
 import { hasPermission } from '@/permission'
 import commonMixin from '@/mixins/common'
 import { cancelWithChange, clickOutside } from '@/utils/tools'
+import { ClickOutside } from 'element-plus/lib/directives'
 import i18n from '@/i18n'
 import '@/assets/css/main.scss' // 样式入口
 // import VueGridLayout from 'vue-grid-layout'
@@ -32,6 +33,7 @@ app.use(_)
 
 app.directive('has', hasPermission) // 注册指令
 app.directive('click-outside', clickOutside)
+app.directive('ele-click-outside', ClickOutside)
 app.directive('cancel', cancelWithChange)
 
 app.mixin(commonMixin)

src/store/modules/user.js

@@ -43,7 +43,7 @@ const user = {
   },
   actions: {
     loginSuccess (store, res) {
-      // res.data.timezone = 'America/New_York'
+      res.data.timezone = 'America/New_York'
       window.$dayJs.tz.setDefault(res.data.timezone)
       sessionStorage.setItem('cn-token', res.data.token)
       localStorage.setItem('cn-sys-name', res.data.systemName)

src/utils/date-util.js

@@ -48,8 +48,6 @@ export function formatDate (date, type) {
 }
 export function timeFormate (date, fmt = 'yyyy-MM-dd hh:mm:ss') {
   const time = new Date(date)
-  let fm = fmt
-  // fmt 自定义格式,如：yy-MM-dd
   let week = ''
   switch (time.getDay()) {
     case 0:
@@ -74,62 +72,10 @@ export function timeFormate (date, fmt = 'yyyy-MM-dd hh:mm:ss') {
       week = '周六'
       break
     default:
+      // eslint-disable-next-line no-unused-vars
       week = ''
       break
   }
-  const o = {
-    'M+': time.getMonth() + 1, // 月份
-    'd+': time.getDate(), // 日
-    hh: time.getHours(), // 小时
-    'm+': time.getMinutes(), // 分
-    's+': time.getSeconds(), // 秒
-    'q+': Math.floor((time.getMonth() + 3) / 3), // 季度
-    S: time.getMilliseconds(), // 毫秒
-    w: week
-  }
-  if (/(y+)/.test(fm)) {
-    fm = fm.replace(RegExp.$1, (time.getFullYear().toString()).substr(4 - RegExp.$1.length))
-  }
-  Object.keys(o).forEach((k) => {
-    if (new RegExp(`(${k})`).test(fm)) {
-      fm = fm.replace(RegExp.$1, (RegExp.$1.length === 1)
-        ? (o[k])
-        : ((`00${o[k]}`).substr((`${o[k]}`).length)))
-    }
-  })
-  return fm
-}
-// 格式化tag为字符串表达式
-export function tagsToString (metric, arr) {
-  let str = metric
-  let sepStr = ''
-  arr.forEach((item, index) => {
-    if (index === 0) {
-      str += '{'
-      if (item.value.length === 1) {
-        str += `${item.name}='${item.value.join('|')}'`
-        sepStr = ','
-      } else if (item.value.length > 1) {
-        str += `${item.name}=~'${item.value.join('|')}'`
-        sepStr = ','
-      }
-    } else {
-      if (item.value.length === 1) {
-        str += sepStr + `${item.name}='${item.value.join('|')}'`
-        sepStr = ','
-      } else if (item.value.length > 1) {
-        str += sepStr + `${item.name}=~'${item.value.join('|')}'`
-        sepStr = ','
-      }
-    }
-  })
-  if (str.indexOf('{') > -1) {
-    str += '}'
-  }
-  if (str.endsWith('{}')) {
-    str = str.substring(0, str.indexOf('{'))
-  }
-  return str
 }
 export function getStep (startTime, endTime) {
   const start = new Date(startTime)
@@ -150,24 +96,6 @@ export function getStep (startTime, endTime) {
   }
   return step
 }
-export function isEmptyObject (obj) {
-  if (obj) {
-    let name = ''
-    // eslint-disable-next-line
-    for (name in obj) { return false; }
-    return true
-  }
-  return true
-}
-export function validateEmail (rule, value, callback) {
-  if (value === '') {
-    callback(new Error('请输入邮箱'))
-  } else if (!this.emailReg.test(value)) {
-    callback(new Error('邮箱格式不正确'))
-  } else {
-    callback()
-  }
-}
 export function getNumStr (num) {
   if (num >= 1000) {
     const kbNum = num / 1000
@@ -191,43 +119,6 @@ export function getNumStr (num) {
   }
   return num.toFixed(2)
 }
-// 将本地时区转为系统配置的时区
-export function computeTimezone (sourceTime) {
-  let offset = localStorage.getItem('cn-sys-timezone')
-  offset = moment.tz(offset).format('Z')
-  if (offset && offset !== 'undefined') {
-    offset = Number.parseInt(offset)
-    const date = new Date(sourceTime)
-    const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
-    const utcTime = sourceTime + localOffset
-    return utcTime + (offset * 60 * 60 * 1000)
-  } else {
-    return sourceTime
-  }
-}
-// 将本地时区转为系统配置的时区
-export function computeTimezoneTime (sourceTime) {
-  let offset = localStorage.getItem('cn-sys-timezone')
-  offset = moment.tz(offset).format('Z')
-  if (offset && offset !== 'undefined') {
-    offset = Number.parseInt(offset)
-    const date = new Date(sourceTime)
-    const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
-    const utcTime = date.getTime() + localOffset
-    return utcTime + (offset * 60 * 60 * 1000)
-  } else {
-    return sourceTime
-  }
-}
-export function getTimezontDateRange (offset = -1) {
-  return [
-    new Date(new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)),
-    new Date(this.computeTimezone(new Date().getTime()))
-  ]
-}
-export function getOffsetTimezoneData (offset = 0) {
-  return new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)
-}
 export function debounce (fn, delay) {
   // 记录上一次的延时器
   let timer = null
@@ -242,33 +133,11 @@ export function debounce (fn, delay) {
     }, delay)
   }
 }
-export function UTCTimeToConfigTimezone (utcTime) {
+export function getNowTime (interval) {
-  let offset = localStorage.getItem('cn-sys-timezone')
+  const endTime = window.$dayJs.tz().valueOf();
-  offset = moment.tz(offset).format('Z')
+  const startTime = endTime - interval * 60 * 1000
-  if (offset && offset !== 'undefined') {
+  return {
-    let time = utcTime
+    startTime,
-    if (typeof time === 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)) {
+    endTime
-      time = new Date(time).getTime()
-    }
-    offset = Number.parseInt(offset)
-    time += offset * 60 * 60 * 1000
-    return time
-  } else {
-    return utcTime
-  }
-}
-export function configTimezoneToUTCTime (configTime) {
-  let offset = localStorage.getItem('cn-sys-timezone')
-  offset = moment.tz(offset).format('Z')
-  if (offset && offset !== 'undefined') {
-    let time = configTime
-    if (typeof time === 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)) {
-      time = new Date(time).getTime()
-    }
-    offset = Number.parseInt(offset)
-    time -= offset * 60 * 60 * 1000
-    return time
-  } else {
-    return configTime
   }
 }

src/views/charts/Panel.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <DateTimeRange />
+    <div class="panel-header">
+      <DateTimeRange :start-time="startTime" :end-time="endTime" ref="dateTimeRange" @change="dateTimeRangeChange"/>
+    </div>
     <div class="cn-panel">
       <chart v-for="(chart, index) in chartList" :key="index" :chart="chart"></chart>
       <!--    <grid-layout v-model:layout="chartList"
@@ -27,9 +29,10 @@
 
 <script>
 import { useRoute } from 'vue-router'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { api, getPanelList, getChartList } from '@/utils/api'
+import { getNowTime } from '@/utils/date-util'
 import Chart from './Chart'
 import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
 
@@ -58,21 +61,49 @@ export default {
       })
     }
   },
-  setup () {
+  setup (props, ctx) {
+    // data
     const chartList = ref([])
+    const dateRangeValue = ref(60)
+    const now = getNowTime(dateRangeValue.value)
+    const startTime = ref(now.startTime)
+    const endTime = ref(now.endTime)
     const panel = ref({})
     let panelType = 1 // 取得panel的type
     const { params } = useRoute()
+    // refs
+    const dateTimeRange = ref(null)
+
     panelTypeAndRouteMapping[params.typeName] && (panelType = panelTypeAndRouteMapping[params.typeName])
+    // onMounted
+    onMounted(() => {
+      dateTimeRange.value.isCustom = false
+      dateTimeRange.value.dateRangeValue = dateRangeValue
+    })
+    // methods
+    const dateTimeRangeChange = (s, e, v) => {
+      startTime.value = s
+      endTime.value = e
+      dateRangeValue.value = v
+    }
     return {
       panelType,
       chartList,
       panel,
-      api
+      startTime,
+      endTime,
+      dateRangeValue,
+      dateTimeRange,
+      api,
+      dateTimeRangeChange
     }
   }
 }
 </script>
 <style lang="scss">
 @import '~@/components/charts/panel.scss';
+  .panel-header{
+    display: flex;
+    justify-content: flex-end;
+  }
 </style>