observe-front/src/layout/components/TimeRange.vue

<template>
  <div class="timebox">
      <div style="display:flex;">
        <div>
          <el-date-picker 
              v-model="value" 
              type="datetimerange" 
              range-separator="至" 
              start-placeholder="开始日期" 
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              style="width:100%;max-width: 300px;margin-top: 12px;" 
              value-format="timestamp" 
              v-if="timeType=='range'"
              size='mini'
              @change='selectTime'
              :pickerOptions="pickerOptions"
              >
            </el-date-picker>
        </div>
        <div>
          <el-button-group>
            <el-button :type="timeType=='range'?'primary':''" icon="el-icon-date" size='mini' @click="timeChange('range')"></el-button>
            <!-- <el-button :type="timeType=='real'?'primary':''" size='mini' @click="timeChange('real')">REAL TIME</el-button> -->
            <el-button :type="timeType=='5m'?'primary':''" size='mini' @click="timeChange('5m')">Last 5m</el-button>
            <el-button :type="timeType=='20m'?'primary':''" size='mini' @click="timeChange('20m')">20m</el-button>
            <el-button :type="timeType=='1h'?'primary':''" size='mini' @click="timeChange('1h')">1h</el-button>
            <!-- <el-button :type="timeType=='3h'?'primary':''" size='mini' @click="timeChange('3h')">3h</el-button> -->
            <el-button :type="timeType=='6h'?'primary':''" size='mini' @click="timeChange('6h')">6h</el-button>
            <el-button :type="timeType=='12h'?'primary':''" size='mini' @click="timeChange('12h')">12h</el-button>
            <el-button :type="timeType=='1d'?'primary':''" size='mini' @click="timeChange('1d')">1d</el-button>
            <!-- <el-button :type="timeType=='2d'?'primary':''" size='mini' @click="timeChange('2d')">2d</el-button> -->
          </el-button-group>
        </div>
        <div style="margin-left:12px" class='box'>
          <!-- <el-button-group> -->
            <!-- <i class="el-icon-refresh" @click="changeTimeout('refresh')"></i> -->
             <!-- <el-button type="primary" icon="el-icon-refresh" size="mini" style="margin-top: 11px;border-top-left-radius: 3px;
              border-bottom-left-radius: 3px;" @click="Refresh()">
              </el-button> -->
          <el-dropdown size="mini" split-button type="primary">
              <!-- <span>
                <el-button type="primary" icon="el-icon-refresh" size="mini" style="margin-top: 11px;border-top-left-radius: 3px;
              border-bottom-left-radius: 3px;" @click="Refresh()">
              </el-button>
              </span> -->
              <!-- <i class="el-icon-refresh" @click="Refresh()"></i>
              <span>{{showValue}}</span> -->

              <span class="el-dropdown-link">
                <!-- <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh()">
                </el-button>
                <el-button type="primary" size="mini">{{showValue}}</el-button> -->
                <i class="el-icon-refresh" @click="Refresh()"></i>
                <span style="margin-left:8px; border-left:1px solid  rgba(255, 255, 255, 0.5);padding:2px 5px 1px 7px;">{{showValue}}</span>
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- {{this.timeObj.timeOut/1000}}s -->
                <el-dropdown-item @click.native="changeTimeout('off')">关</el-dropdown-item>
                <el-dropdown-item @click.native="changeTimeout('5s')">5s</el-dropdown-item>
                <el-dropdown-item @click.native="changeTimeout('10s')">10s</el-dropdown-item>
                <el-dropdown-item @click.native="changeTimeout('20s')">20s</el-dropdown-item>
                <el-dropdown-item @click.native="changeTimeout('30s')">30s</el-dropdown-item>
                <el-dropdown-item @click.native="changeTimeout('1m')">1m</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          <!-- </el-button-group> -->
        </div>
      </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data(){
    return {
      timeType:'5m',
      value:'',
      times:'',
      timeObj:{
        interval:60,
        // startTime:Math.round((new Date().getTime())/1000 - (5*60)),//5分钟
        startTime:Math.round((new Date().getTime())/1000 - (1*60*60)), //1小时
        endTime:Math.round(new Date().getTime()/1000),
        timeOut:1,   //默认是5000毫秒也就是5s
      },
      showValue:'关',
      choiceDate: null,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime();
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = "";
        },
        disabledDate: (time) => {
          // 如何选择了一个日期
          if (this.choiceDate) {
            // 7天的时间戳
            const one = 1 * 24 * 3600 * 1000;
            // 当前日期 - one = 7天之前
            const minTime = this.choiceDate - one;
            // 当前日期 + one = 7天之后
            const maxTime = this.choiceDate + one;
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime
              // 限制不能选择今天及以后
              // || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
            );
          } else {
            // 如果没有选择日期，就要限制不能选择今天及以后
            // return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
          }
        },
      },
    }
  },
  created(){
    this.$store.commit('time/setTimes',this.timeObj)
  },
  computed: {
    ...mapGetters([
      'timesFlag'
    ])
  },
  // watch: {
  //   '$store.state.time.globalTime': {
  //       handler(newValue, oldValue) {
  //           console.log(newValue,'newValue',oldValue,'oldValue')
  //           this.$store.commit('time/changeGlobalTime',newValue)
  //       },
  //       immediate: true,
  //       deep: true
  //   }
  // },
  methods:{
    timeChange(val){
      console.log(val,'时间改变')
      this.timeType = val; 
      let startTime,endTime;
      switch(val){
        case 'range':
          
          break;
        case 'real':
          //当前时间的时间戳
          // this.times = Math.round((new Date().getTime())/1000);
          // this.$store.commit('time/changeGlobalTime',this.times)
          break;
        case '5m':
            startTime = Math.round((new Date().getTime())/1000 - (5*60));
            endTime= Math.round(new Date().getTime()/1000);
          //   interval = endTime-startTime;
          //   this.timeObj={
          //   interval:interval,
          //   startTime:startTime,
          //   endTime:endTime,
          // }
          // this.$store.commit('time/setTimes',this.timeObj)
          this.parseTime(startTime,endTime);
          break;
        case '20m':
            startTime = Math.round((new Date().getTime())/1000 - (20*60));
            endTime= Math.round(new Date().getTime()/1000);
            this.parseTime(startTime,endTime);
          break;
        case '1h':
            startTime = Math.round((new Date().getTime())/1000 - (1*60*60));
            endTime= Math.round(new Date().getTime()/1000);
             this.parseTime(startTime,endTime);
          break;
        case '3h':
            startTime = Math.round((new Date().getTime())/1000 - (3*60*60));
            endTime= Math.round(new Date().getTime()/1000);
             this.parseTime(startTime,endTime);
          break;
        case '6h':
            startTime = Math.round((new Date().getTime())/1000 - (6*60*60));
            endTime= Math.round(new Date().getTime()/1000);
             this.parseTime(startTime,endTime);
          break;
        case '12h':
            startTime = Math.round((new Date().getTime())/1000 - (12*60*60));
            endTime= Math.round(new Date().getTime()/1000);
             this.parseTime(startTime,endTime);
          break;
        case '1d':
            startTime = Math.round((new Date().getTime())/1000 - (24*60*60));
            endTime= Math.round(new Date().getTime()/1000);
            this.parseTime(startTime,endTime);
          break;
        case '2d':
            startTime = Math.round((new Date().getTime())/1000 - (48*60*60));
            endTime= Math.round(new Date().getTime()/1000);
            this.parseTime(startTime,endTime);
          break;
      }
    },
    selectTime(val){
      console.log(val) 
      this.times = val
      console.log(this.times,'this.times')
      let a = Math.round(this.times[1]/1000/60) - Math.round(this.times[0]/1000/60);
          console.log(a,'range')
          this.timeObj={
            interval:a,
            startTime:this.times[0],
            endTime:this.times[1]
          }
          this.$store.commit('time/setTimes',this.timeObj)
    },
    parseTime(startTime,endTime){
      let interval = (endTime - startTime)/60;
        this.timeObj={
        interval:interval,
        startTime:startTime,
        endTime:endTime,
      }
      console.log(this.timeObj)
      this.$store.commit('time/setTimes',this.timeObj)
    },
    changeTimeout(val){
      console.log(val,'下拉选择时间');
      if(val == 'refresh'){
        // this.timeObj.timeOut = 0;
        // this.showValue = 
      }else if(val == 'off'){
        this.timeObj.timeOut = 1;
        this.showValue = '关'
      }else if(val == '1s'){
        this.timeObj.timeOut = 1*1000;
        this.showValue = '1s'
      }else if(val == "5s"){
        this.timeObj.timeOut = 5*1000;
        this.showValue = '5s'
      }else if(val == '10s'){
        this.timeObj.timeOut = 10*1000;
        this.showValue = '10s'
      }else if(val == '20s'){
        this.timeObj.timeOut = 20*1000;
        this.showValue = '20s'
      }else if(val == '30s'){
        this.timeObj.timeOut = 30*1000;
        this.showValue = '30s'
      }else if(val == '1m'){
        this.timeObj.timeOut = 60*1000;
        this.showValue = '1m'
      }
      this.$store.commit('time/setTimes',this.timeObj)
    },
    Refresh(){
      location.reload()
    }
  },

}
</script>

<style lang="scss" scoped>
.timebox{
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  // box-shadow: 0 1px 4px rgba(0,21,41,.08);
  // margin-top:50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding:0 20px;
  display: inline-block;
}
// .box  ::v-deep .el-button-group > .el-button:first-child {
//     border-top-right-radius: 0;
//     border-bottom-right-radius: 0;
//     border-top-left-radius: 0;
//     border-bottom-left-radius: 0;
// }el-button el-button--primary 
.box ::v-deep .el-dropdown .el-button-group>.el-button.el-button--mini:first-child {
      // padding: 7px 7px;
          padding: 7px 3px 7px 7px;
}
</style>