优化

2025-08-11 21:50:38 +08:00
parent 9db3b4f9f7
commit d203ca541a
19 changed files with 62 additions and 71 deletions
--- a/src/components/Ems/DateRangeSelect/index.vue
+++ b/src/components/Ems/DateRangeSelect/index.vue
@ -0,0 +1,98 @@
+<template>
+    <div class="time-range">
+        <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            value-format="yyyy-MM-dd"
+            :clearable="false"
+            :picker-options="pickerOptions"
+            end-placeholder="结束时间">
+            </el-date-picker>
+            <el-button type="default" 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 {
+  computed:{
+    disabledNextBtn(){
+      return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
+    }
+  },
+  data() {
+    return {
+      loading:false,
+      dateRange:[],
+      defaultDateRange:[],
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+    }
+  },
+  methods: {
+    init(){
+        const now = new Date(),formatNow = formatDate(now);
+        const weekAgo = formatDate(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000))
+        this.dateRange = [weekAgo, formatNow];
+        this.defaultDateRange=[weekAgo, 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(){
+      this.$emit('updateDate',this.dateRange)
+    },
+    timeLine(type){
+      //baseTime,maxTime 毫秒数
+      let baseTime = type === 'before' ? new Date(this.dateRange[0]).getTime() - ( 24 * 60 * 60 * 1000) :new Date(this.dateRange[1]).getTime() + ( 24 * 60 * 60 * 1000)  ,
+        maxTime = new Date(this.defaultDateRange[1]).getTime()
+      //updateTime 毫秒数
+      let updateTime = type === 'before' ? baseTime - 7 * 24 * 60 * 60 * 1000 : baseTime + 7 * 24 * 60 * 60 * 1000
+      if(type === 'next' && updateTime >= maxTime) updateTime = maxTime
+      const start = formatDate(type === 'before' ? updateTime : baseTime)
+      const end = formatDate(type === 'before' ? baseTime : updateTime)
+      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>