feat：刷新组件 以及时间组件的样式调整

src/components/common/TimeRange/DateTimeRange.vue

@@ -8,14 +8,15 @@
                 <div class="calendar-popover-text">{{dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
             </div>
             <div class="calendar-popover-text" v-else>
-                {{dateRangeArr.find(item=>item.value == dateRangeValue).name}}
+                {{showDetail}}
             </div>
-            <div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down"></i></div>
+            <div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down" :class="dropdownFlag ? 'cn-icon-arrow-down-active' : ''"></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">
+                <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'
@@ -25,32 +26,39 @@
                             :popper-class="'myDatePicker'"
                             class="panel-time-picker-hidden"
                             :size="'small'"
-                            :align="'left'"
                             placement="left-start"
                             style="position: absolute"
                             @change="timeArrChange"
                     />
-                    From
+                    <div class="content-title">From</div>
-                    <div @click="myDatePickerShow">{{dayJs.tz(myStartTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
+                    <div @click="myDatePickerShow" tabindex="1" class="content-input">{{dayJs.tz(myStartTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
-                    To
+                    <div class="content-title">To</div>
-                    <div @click="myDatePickerShow">{{dayJs.tz(myEndTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
+                    <div @click="myDatePickerShow" tabindex="2" class="content-input">{{dayJs.tz(myEndTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
-                    <el-button @click="timeRange" type="primary">Apply time range</el-button>
+                    <div><el-button @click="timeRange" type="primary" size="mini">Apply time range</el-button></div>
-                </el-col>
+                    <div class="date-range-title" style="padding-left: 0">Recently used absolute ranges </div>
-                <el-col :span="8">
+                    <div class="date-range-history">
-                    <div>
+                        <div v-for="(item, index) in rangeHistoryArr" :key="index" class="date-range-history-item" @click="historyChange(item)">
-                        <div>Relatime time ranges</div>
+                            {{dayJs.tz(item.start).format('YYYY-MM-DD HH:mm:ss')}}
-                        <ul class="date-range-item">
+                            —
-                            <li v-for="item in dateRangeArr" @click="quickChange(item.value)" :class="item.value==dateRangeValue?'active':''" :key="item.value">
+                            {{dayJs.tz(item.end).format('YYYY-MM-DD HH:mm:ss')}}
-                                {{item.name}}
+                        </div>
-                            <i v-if="item.value==dateRangeValue" class="cn-icon cn-icon-check"></i>
-                            </li>
-                        </ul>
                     </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);">
+                    <div class="date-range-title">Relatime time ranges</div>
+                    <ul class="date-range-item">
+                        <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">
+                                {{item.name}}
+                                <i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)" class="cn-icon cn-icon-check"></i>
+                            </span>
+                        </li>
+                    </ul>
+                </el-col>
             </el-row>
-            <el-row class="date-range-panel-bottom">
+            <el-row class="date-range-panel-bottom" style="">
                 <el-col :span="12">{{address}}</el-col>
-                <el-col :span="12">{{utcStr}}</el-col>
+                <el-col :span="12" class="utc-str">{{utcStr}}</el-col>
             </el-row>
         </div>
         </transition>
@@ -58,7 +66,7 @@
 </template>
 
 <script>
-import { ref, watch, computed } from 'vue'
+import { ref, computed } from 'vue'
 import MyDatePicker from '../MyDatePicker'
 export default {
   name: 'DateTimeRange',
@@ -71,6 +79,14 @@ export default {
       type: Number,
       default: window.$dayJs.tz().valueOf()
     }
+    /* useRefresh: {
+      type: Boolean,
+      default: true
+    },
+    useDateRange: {
+      type: Boolean,
+      default: true
+    } */
   },
   emits: ['change'],
   components: {
@@ -83,9 +99,11 @@ export default {
     const timeArr = ref([myStartTime.value, myEndTime.value])
     const address = localStorage.getItem('cn-sys-timezone')
     const utc = localStorage.getItem('timezone-offset')
+    const rangeHistory = ref(localStorage.getItem('date-range-history') ? JSON.parse(localStorage.getItem('date-range-history')) : [])
     const dateRangeValue = ref(60)
+    dateRangeValue.value = 60
     const isCustom = ref(false)
-    const dateRangeArr = ref([
+    const dateRangeArr = [
       {
         value: 5,
         name: 'last 5 Min'
@@ -122,16 +140,15 @@ export default {
         value: 2880,
         name: 'last 2 days'
       }
-    ])
+    ]
-    console.log(utc)
     const dropdownFlag = ref(false)
     // computed
     const utcStr = computed(() => {
-      let str = 'UTC'
+      let str = 'UTC '
       if (utc < 0) {
-        str += '-'
+        str += '- '
       } else {
-        str += '+'
+        str += '+ '
       }
       const abs = Math.abs(utc)
       if (abs > 10) {
@@ -139,9 +156,19 @@ export default {
       } else {
         str += '0' + (abs + '')
       }
-      str += ':00'
+      str += ':00 '
       return str
     })
+    const showDetail = computed(() => {
+      let str = ''
+      if (dateRangeValue.value !== -1) {
+        str = dateRangeArr.find(item => item.value === dateRangeValue.value).name
+      }
+      return str
+    })
+    const rangeHistoryArr = computed(() => {
+      return rangeHistory.value.slice(0, 4)
+    })
     // refs
     const myDatePicker = ref(null)
     // methods
@@ -154,7 +181,6 @@ export default {
       }
     }
     const changeDropdown = () => {
-      console.log(123123123)
       if (dropdownFlag.value) {
         dropdownFlag.value = false
       }
@@ -167,7 +193,6 @@ export default {
       myDatePicker.value.pickerVisible = true
     }
     const timeArrChange = (val) => {
-      console.log(val)
       myStartTime.value = val[0]
       myEndTime.value = val[1]
     }
@@ -176,8 +201,14 @@ export default {
       dateRangeValue.value = -1
       returnValue()
     }
+    const historyChange = (item) => {
+      myStartTime.value = item.start
+      myEndTime.value = item.end
+      isCustom.value = true
+      dateRangeValue.value = -1
+      returnValue()
+    }
     const quickChange = (value) => {
-      console.log(value)
       dateRangeValue.value = value
       isCustom.value = false
       myEndTime.value = window.$dayJs.tz().valueOf()
@@ -185,14 +216,14 @@ export default {
       returnValue()
     }
     const returnValue = () => {
+      rangeHistory.value.unshift({
+        start: myStartTime.value,
+        end: myEndTime.value
+      })
+      localStorage.setItem('date-range-history', JSON.stringify(rangeHistory.value))
       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,
@@ -204,13 +235,17 @@ export default {
       isCustom,
       timeArr,
       myDatePicker,
+      showDetail,
+      rangeHistory,
+      rangeHistoryArr,
       myDatePickerShow,
       showDropdown,
       changeDropdown,
       timeArrChange,
       returnValue,
       quickChange,
-      timeRange
+      timeRange,
+      historyChange
     }
   }
 }
@@ -219,6 +254,11 @@ export default {
 <style scoped lang="scss">
 .date-range-box{
     font-size: 14px;
+    border-radius: 2px;
+    display: flex;
+    .date-range-refresh{
+        margin-left: 10px;
+    }
 }
 .date-range-item{
     list-style-type:none;
@@ -243,9 +283,24 @@ export default {
     box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
     border-radius: 2px;
     line-height: 26px;
+    transition: width .3s;
     .cn-icon{
         font-size: 14px;
     }
+    .cn-icon-arrow-down{
+        transition: all .3s;
+        display: inline-block;
+    }
+    .cn-icon-arrow-down-active{
+        transform: rotate(180deg);
+    }
+}
+.date-range-title{
+    font-family: Roboto-Black;
+    font-size: 14px;
+    color: #666666;
+    font-weight: 600;
+    padding: 14px 0px 7px 8px;
 }
 .calendar-popover-text{
     white-space: nowrap;
@@ -260,12 +315,86 @@ export default {
 }
 .date-range-panel{
     height: 410px;
-    width: 476px;
+    width: 500px;
     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;
+    top: 34px;
     z-index: 1;
+    .date-range-panel-content-left{
+        padding-left: 10px;
+        display: flex;
+        flex-direction: column;
+        .content-title{
+            font-size: 14px;
+            color: #666666;
+            font-weight: 400;
+            margin-bottom: 12px;
+        }
+        .content-input{
+            border: 1px solid #E7EAED;
+            border-radius: 2px;
+            width: 230px;
+            padding: 0 8px;
+            height: 30px;
+            line-height: 30px;
+            margin-bottom: 12px;
+            outline: #169AFF;
+        }
+        .content-input:focus{
+            border: 1px solid #169AFF;
+        }
+        .date-range-history{
+            flex: 1;
+            overflow-y: auto;
+            .date-range-history-item{
+                padding: 5px 0;
+                cursor: pointer;
+            }
+            .date-range-history-item:hover{
+                /*font-weight: 600;*/
+                background: #f9f9f9;
+            }
+        }
+    }
+    .date-range-panel-content-right{
+        display: flex;
+        flex-direction: column;
+        ul{
+            flex: 1;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            margin: 0;
+            li{
+                width: 100%;
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                color: #333333;
+                font-weight: 400;
+                font-family: Roboto-Regular;
+                padding: 0 10px;
+                cursor: pointer;
+            }
+            li.active{
+                background: #F2F9FF;
+                color: #0091FF;
+                font-weight: 400;
+                .cn-icon-check{
+                    color: #0091FF;
+                    position: absolute;
+                    right: 7px;
+                }
+            }
+            li:hover{
+                background: #F2F9FF;
+                color: #0091FF;
+            }
+        }
+    }
 }
 .date-range-panel-top{
     height: 364px;
@@ -273,5 +402,13 @@ export default {
 .date-range-panel-bottom{
     height: 44px;
     line-height: 44px;
+    border-top: 1px solid rgba(0,0,0,0.09);
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    .utc-str{
+        text-align: right;
+    }
 }
 </style>

src/components/common/TimeRange/TimeRefresh.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="cn-refresh-box" v-ele-click-outside="dropdownShowFalse">
+        <span>
+            <el-button-group size="mini">
+              <el-button size="mini" @click="$emit('change')"><i class="cn-icon cn-icon-refresh"></i></el-button>
+              <el-button size="mini" @click="showRefreshList">
+                  {{interLabel}}
+                  <i class="cn-icon cn-icon-dropdown" :class="dropdownShow?'active' : ''"></i>
+              </el-button>
+            </el-button-group>
+        </span>
+        <transition name="el-zoom-in-top">
+            <div v-if="dropdownShow" class="refresh-list">
+                <div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
+                    {{item.label}}
+                    <i v-if="item.value==interval" class="cn-icon cn-icon-check"></i>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+// import { ref } from 'vue'
+export default {
+  name: 'TimeRefresh',
+  props: {
+    endTime: {
+      type: Number
+    }
+  },
+  data () {
+    return {
+      searchTime: [],
+      lastRefreshTime: '',
+      intervalTimer: null,
+      interval: -1,
+      unit: 2,
+      dropdownShow: false,
+      interLabel: '',
+      refreshArr: [
+        { value: -1, label: 'off' },
+        { value: 30, label: '30s' },
+        { value: 60, label: '1m' },
+        { value: 300, label: '5m' },
+        { value: 900, label: '15m' },
+        { value: 1800, label: '30m' }
+      ]
+    }
+  },
+  setup (props, ctx) {
+
+  },
+  methods: {
+    setRefresh (val) {
+      this.interval = val.value
+      this.interLabel = val.value == -1 ? '' : val.label
+      this.dropdownShow = false
+      const now = window.$dayJs.tz().valueOf()
+      if (val && val.value != -1) {
+        // 设置定时器
+        this.intervalTimer = setInterval(() => {
+          this.$emit('change')
+        }, val.value * 1000)
+        // 设置定时器 比上次刷新间隔大于30s 立马刷新一次
+        if ((now - this.endTime) / 1000 > 30) {
+          this.$emit('change')
+        }
+        return
+      }
+      if (val && val.value == -1) {
+        // 清除定时器
+        clearInterval(this.intervalTimer)
+      }
+    },
+    showRefreshList () {
+      this.dropdownShow = !this.dropdownShow
+    },
+    dropdownShowFalse () {
+      this.dropdownShow = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.cn-refresh-box{
+    position: relative;
+    font-size: 14px;
+    .cn-icon-refresh{
+        font-size: 14px;
+    }
+    .cn-icon-dropdown{
+        font-size: 14px;
+        transition: all .3s;
+        display: inline-block;
+    }
+    .cn-icon-dropdown.active{
+       transform: rotate(180deg);
+    }
+    .refresh-list{
+        position: absolute;
+        z-index: 1;
+        background: #FFFFFF;
+        box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.77);
+        border-radius: 2px;
+        top: 30px;
+        right: 0;
+        .refresh-list-item{
+            width: 82px;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            color: #333333;
+            font-weight: 400;
+            font-family: Roboto-Regular;
+            padding: 0 10px;
+            cursor: pointer;
+            position: relative;
+            padding: 8px 0 8px 12px;
+        }
+        .refresh-list-item.active{
+            background: #F2F9FF;
+            color: #0091FF;
+            font-weight: 400;
+            .cn-icon-check{
+                color: #0091FF;
+                position: absolute;
+                right: 7px;
+            }
+        }
+        .refresh-list-item:hover{
+            background: #F2F9FF;
+            color: #0091FF;
+        }
+    }
+}
+/deep/ .el-button--mini{
+    padding: 4px 6px !important;
+    min-height: 26px !important;
+}
+</style>

src/views/charts/Panel.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <div class="panel-header">
-      <DateTimeRange :start-time="startTime" :end-time="endTime" ref="dateTimeRange" @change="dateTimeRangeChange"/>
+      <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="endTime"/>
+      <DateTimeRange class="date-time-range" :start-time="startTime" :end-time="endTime" ref="dateTimeRange" @change="reload"/>
     </div>
     <div class="cn-panel">
       <chart v-for="(chart, index) in chartList" :key="index" :chart="chart"></chart>
@@ -35,20 +36,20 @@ import { api, getPanelList, getChartList } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
 import Chart from './Chart'
 import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
+import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 
 export default {
   name: 'Panel',
   components: {
     Chart,
-    DateTimeRange
+    DateTimeRange,
+    TimeRefresh
   },
   data () {
     return {
 
     }
   },
-  methods: {
-  },
   async mounted () {
     const panels = await getPanelList({ type: this.panelType })
     if (panels && panels.length > 0) {
@@ -97,13 +98,50 @@ export default {
       api,
       dateTimeRangeChange
     }
+  },
+  methods: {
+    async init () {
+      // const panels = await getPanelList({ type: this.panelType })
+      // if (panels && panels.length > 0) {
+      //   this.panel = panels[0]
+      // }
+      // if (this.panel.id) {
+      //   this.chartList = (await getChartList({ panelId: this.panel.id })).map(chart => {
+      //     chart.i = chart.id
+      //     return chart
+      //   })
+      // }
+    },
+    timeRefreshChange () {
+      if (!this.$refs.dateTimeRange) {
+        this.init()
+        return
+      }
+      console.log(this.$refs.dateTimeRange.isCustom)
+      if (this.$refs.dateTimeRange.isCustom) {
+        this.init()
+      } else {
+        const value = this.dateRangeValue.value || this.dateRangeValue
+        this.$refs.dateTimeRange.quickChange(value)
+      }
+    },
+    reload (s, e, v) {
+      this.dateTimeRangeChange(s, e, v)
+      this.init()
+    }
   }
 }
 </script>
 <style lang="scss">
 @import '~@/components/charts/panel.scss';
   .panel-header{
-    display: flex;
+    /*overflow: hidden;*/
-    justify-content: flex-end;
+    display: inline-block;
+    width: 100%;
+    padding: 20px 20px 0px 20px;
+    .date-time-range{
+      float: right;
+      margin-left: 10px;
+    }
   }
 </style>