综合查询

src/views/ems/search/DateTimeSelect.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="time-range">
+        <el-date-picker
+            v-model="dateRange"
+            :type="type"
+            range-separator="至"
+            start-placeholder="开始时间"
+            :format="valueFormat"
+            :value-format="valueFormat"
+            :clearable="false"
+            :picker-options="pickerOptions"
+            end-placeholder="结束时间">
+            </el-date-picker>
+            <el-button size="mini" style="margin-left: 10px;" :loading="loading" @click="reset">重置</el-button>
+            <el-button type="primary" size="mini" :loading="loading" @click="search">搜索</el-button>
+            <el-button type="primary" size="mini" :loading="loading" @click="timeLine('before')">上一时段</el-button>
+            <el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">下一时段</el-button>
+        </div>
+</template>
+
+<script>
+import {formatDate} from '@/filters/ems'
+export default {
+  props:{
+    dataUnit:{
+      type:Number,
+      default:1
+    }
+  },
+  computed:{
+    type(){
+      return this.dataUnit === 3 ? 'daterange' : 'datetimerange'
+    },
+    valueFormat(){
+      return this.dataUnit === 3 ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm'
+    },
+    disabledNextBtn(){
+      if(this.dateRange && this.dateRange.length ===2){
+        return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
+      }else{
+        return true
+      }
+
+    }
+  },
+  watch:{
+    dataUnit:{
+      handler(newVal,oldVal){
+        console.log('wacth到了dataUnit的变化',newVal,oldVal)
+        newVal && newVal!==oldVal && this.init()
+      },
+      immediate: true,
+    }
+  },
+  data() {
+    return {
+      loading:false,
+      dateRange:[],
+      defaultDateRange:[],
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+    }
+  },
+  methods: {
+    init(){
+      const {dataUnit} = this
+        const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
+        const now = new Date(),formatNow = formatDate(now.getTime(),dataUnit !== 3 );
+        const timeAgo = formatDate(new Date(now.getTime() - timeDis),dataUnit !== 3)
+        this.dateRange = [timeAgo, formatNow];
+        this.defaultDateRange=[timeAgo, formatNow];
+        console.log('init',timeAgo,formatNow)
+        this.$emit('updateDate',this.dateRange || [])
+    },
+    showBtnLoading(status){
+        this.loading = status
+    },
+    // 切换分、时、天 重置时间可选范围
+    resetDate(){
+      this.dateRange = this.defaultDateRange
+    },
+    //重置 设置时间范围为初始化时间段
+    reset(){
+        this.resetDate()
+        this.$emit('updateDate',this.dateRange || [])
+    },
+    // 搜索
+    search(){
+      if(this.dateRange && this.dateRange.length>0){
+        const {dataUnit} = this
+        const [start,end] = this.dateRange
+        const startTime = new Date(start),endTime=new Date(end)
+        const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
+        if(endTime - startTime > timeDis){
+          this.$message.error(`时间范围不能超过${dataUnit === 3 ? '30天' : dataUnit === 2 ? '24小时' : '1小时'}`)
+        }
+      }else{
+        this.$emit('updateDate',this.dateRange || [])
+      }
+    },
+    timeLine(type){
+      if(!this.dateRange) return
+      //baseTime,maxTime 毫秒数
+      const baseTimes= this.dataUnit === 3 ? 24 * 60 * 60 * 1000 :this.dataUnit === 2 ? 60 * 60 * 1000 : 60 * 1000
+      const baseDis = this.dataUnit === 3 ? 30 :this.dataUnit === 2 ? 24 : 60
+      let baseTime = type === 'before' ? new Date(this.dateRange[0]).getTime() - baseTimes :new Date(this.dateRange[1]).getTime() + baseTimes  ,
+        maxTime = new Date(this.defaultDateRange[1]).getTime()
+      //updateTime 毫秒数
+      let updateTime = type === 'before' ? baseTime - baseDis * baseTimes : baseTime + baseDis * baseTimes
+      if(type === 'next' && updateTime >= maxTime) updateTime = maxTime
+      const start = formatDate(type === 'before' ? updateTime : baseTime,this.dataUnit !== 3)
+      const end = formatDate(type === 'before' ? baseTime : updateTime,this.dataUnit !== 3)
+      this.dateRange = [start,end]
+      this.$emit('updateDate',this.dateRange || [])
+    },
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.time-range{
+    display: flex;
+    ::v-deep {
+        .el-range-editor--medium .el-range__icon, .el-range-editor--medium .el-range__close-icon{
+          line-height: 22px;
+        }
+        .el-range-editor--medium.el-input__inner{
+            height: 30px;
+        }
+        .el-range-editor--medium .el-range-separator{
+            line-height: 24px;
+        }
+        .el-button--mini{
+            padding:3px 10px;
+        }
+    }
+
+}
+</style>