yudao-dev/src/views/energy/analysis/contrastAnalysis/components/searchArea.vue

<template>
  <div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }">
    <el-form :inline="true" class="demo-form-inline">
      <span class="blue-block"></span>
      <el-form-item label="能源类型" required>
        <el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;" size="small">
          <el-option
            v-for="item in energyTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间维度" required>
        <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;" size="small">
          <el-option
            v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围" required>
        <div v-show="queryParams.timeDim === '1'">
          <el-date-picker
            v-model="timeValue"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm"
            value-format="timestamp"
            :picker-options="pickerOptions"
            popper-class="noneMinute"
            @change="timeSelect"
            size="small"
            style='width:350px;'
            :clearable="false"
            >
          </el-date-picker>
        </div>
        <div v-show="queryParams.timeDim === '2'">
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            :picker-options="pickerOptions"
            :clearable="false"
            size="small"
            style='width:350px;'
            @change="timeSelect"
            >
          </el-date-picker>
        </div>
        <div v-show="queryParams.timeDim === '3'">
          <el-date-picker
            v-model="weekValue1"
            type="week"
            format="yyyy 第 WW 周"
            style='width:170px;'
            :picker-options="pickerOptionsWeek"
            @change="startWeek"
            :clearable="false"
            size="small"
            placeholder="选择周">
          </el-date-picker>-
          <el-date-picker
            v-model="weekValue2"
            type="week"
            format="yyyy 第 WW 周"
            :picker-options="pickerOptionsWeek"
            style='width:170px;'
            @change="endWeek"
            :clearable="false"
            size="small"
            placeholder="选择周">
          </el-date-picker>
        </div>
        <div v-show="queryParams.timeDim === '4'">
          <el-date-picker
            v-model="monthValue"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            :clearable="false"
            :picker-options="pickerOptions"
            size="small"
            style='width:350px;'
            @change="timeSelect"
            >
          </el-date-picker>
        </div>
        <div v-show="queryParams.timeDim === '5'">
          <el-date-picker
            style='width:170px;'
            v-model="yearValue1"
            type="year"
            :picker-options="pickerOptions"
            value-format="timestamp"
            placeholder="选择年"
            @change="startYear"
            size="small"
            :clearable="false"
          >
          </el-date-picker>-
          <el-date-picker
            style='width:170px;'
            v-model="yearValue2"
            type="year"
            :picker-options="pickerOptions"
            value-format="timestamp"
            placeholder="选择年"
            @change="endYear"
            size="small"
            :clearable="false"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="对象维度" required>
        <el-select v-model="queryParams.objType" placeholder="请选择" style="width: 80px;" @change="selectObjs" size="small">
          <el-option
            v-for="item in getDictDatas(this.DICT_TYPE.OBJECT_TYPE)"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="对象选择" required>
        <el-select v-model="queryParams.objIds" placeholder="请选择" multiple :multiple-limit='5' collapse-tags style="width: 200px;" size="small">
          <el-option
            v-for="item in objectList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="search">查询</el-button>
        <span class="separateStyle"></span>
        <el-button size="small" @click="resetBtn">重置</el-button>
      </el-form-item>
    </el-form>
    <span v-if="isFold" class="foldClass" @click='switchMode'>
      {{ isExpand ? '收起' : '展开' }}
      <svg-icon :icon-class="isExpand ? 'upward' : 'downward'" />
    </span>
  </div>
</template>
<script>
import { getEnergyTypeListAll } from "@/api/base/energyType"
import { getLineAll } from "@/api/base/productionLine"
import { getWorkShopAll } from "@/api/base/workshopSection"
import { getEquipmentAll } from "@/api/base/equipment"
import moment from 'moment'
export default {
  name: 'searchArea',
  props: {
    isFold: {// 多行模式（默认否）
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isExpand: false, // 展开收起
      // 查询参数
      queryParams: {
        energyTypeId: null,
        objIds: [],
        objType: '',
        timeDim: null,
        startTime: null,
        endTime: null
      },
      timeValue: [],// 最大7天只能整点
      dateValue: [],// 最大30天
      weekValue1: null,//最多24周
      weekValue2: null,
      monthValue: [],//最多24月
      yearValue1: null,//最多10年
      yearValue2: null,
      energyTypeList: [],
      objectList: [],
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now()
        }
      },
      pickerOptionsWeek: {
        disabledDate(time) {
          let day = Date.now()
          let limitTime = moment(day).day(-1)
          return time.getTime() > new Date(limitTime).getTime()
        }
      }
    }
  },
  mounted() {
    this.getTypeList()
    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
  },
  methods: {
    getTypeList() {
      getEnergyTypeListAll().then((res) => {
        this.energyTypeList = res.data || []
      })
    },
    // 范围选择器
    timeSelect() {
      switch (this.queryParams.timeDim) {
        case '1':
          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
            this.$modal.msgError('最大时间范围为7天，请重新选择')
            this.timeValue = []
          }
          break
        case '2':
          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
            this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
            this.dateValue = []
          }
          break
        case '4':
          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
            this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
            this.monthValue = []
          }
          break
          default:
      }
    },
    // 年选择器
    startYear() {
      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
        this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
        this.yearValue1 = null
        return false
      }
      if (this.yearValue1 && this.yearValue2) {
        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
          this.$modal.msgError('最大时间范围为10年，请重新选择')
          this.yearValue1 = null
          return false
        }
      }
    },
    endYear() {
      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
        this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
        this.yearValue2 = null
        return false
      }
      if (this.yearValue1 && this.yearValue2) {
        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
          this.$modal.msgError('最大时间范围为10年，请重新选择')
          this.yearValue2 = null
          return false
        }
      }
    },
    // 周选择器
    startWeek() {
      if (this.weekValue1 && this.weekValue2) {
        let a = new Date(this.weekValue1).getTime()
        let b = new Date(this.weekValue2).getTime()
        if (a > b) {
          this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
          this.weekValue1 = null
          return false
        }
        if (b - a > 167*24*3600000) {
          this.$modal.msgError('最大时间范围为24周，请重新选择')
          this.weekValue1 = null
          return false
        }
      }
    },
    endWeek() {
      if (this.weekValue1 && this.weekValue2) {
        let a = new Date(this.weekValue1).getTime()
        let b = new Date(this.weekValue2).getTime()
        if (a > b) {
          this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
          this.weekValue2 = null
          return false
        }
        if (b - a > 167*24*3600000) {
          this.$modal.msgError('最大时间范围为24周，请重新选择')
          this.weekValue2 = null
          return false
        }
      }
    },
    // 对象维度
    selectObjs(val) {
      console.log(val)
      switch (val) {
        case '1':
          getLineAll().then(res => {
            this.objectList = res.data || []
            this.queryParams.objIds = []
          })
          break;
        case '2':
          getWorkShopAll().then(res => {
            this.objectList = res.data || []
            this.queryParams.objIds = []
          })
          break;
        default:
          getEquipmentAll().then(res => {
            this.objectList = res.data || []
            this.queryParams.objIds = []
          })
      }
    },
    // 查询
    search() {
      if (!this.queryParams.energyTypeId) {
        this.$modal.msgError('请选择能源类型')
        return false
      }
      if (!this.queryParams.timeDim) {
        this.$modal.msgError('请选择时间维度')
        return false
      }
      switch (this.queryParams.timeDim) {
        case '1':
          if (this.timeValue.length > 0) {
            this.queryParams.startTime = this.timeValue[0]
            this.queryParams.endTime = this.timeValue[1] // 不用转
          } else {
            this.$modal.msgError('时间范围不能为空')
            return false
          }
          break
        case '2':
          if (this.dateValue.length > 0) {
            this.queryParams.startTime = this.dateValue[0]
            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
          } else {
            this.$modal.msgError('日范围不能为空')
            return false
          }
          break
        case '3':
          if (this.weekValue1 && this.weekValue2) {
            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
            let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
            this.queryParams.startTime = new Date(a).getTime()
            this.queryParams.endTime = new Date(b).getTime()
          } else {
            this.$modal.msgError('周范围不能为空')
            return false
          }
          break
        case '4':// 转为本月最后一天的最后一秒
          if (this.monthValue.length > 0) {
            this.queryParams.startTime = this.monthValue[0]
            this.queryParams.endTime = this.transformTime(this.monthValue[1])
          } else {
            this.$modal.msgError('月范围不能为空')
            return false
          }
          break
        default://本年最后一天
          if (this.yearValue1 && this.yearValue2) {
            if (this.yearValue2 < this.yearValue1) {
              this.$modal.msgError('结束时间不能早于开始时间')
              return false
            } else {
              this.queryParams.startTime = this.yearValue1
              this.queryParams.endTime = this.transformYear(this.yearValue2)
            }
          } else {
            this.$modal.msgError('年范围不能为空')
            return false
          }
      }
      if (!this.queryParams.objType) {
        this.$modal.msgError('请选择对象维度')
        return false
      }
      if (this.queryParams.objIds.length === 0) {
        this.$modal.msgError('请选择对象')
        return false
      }
      this.queryParams.startTime = this.queryParams.startTime + ''
      this.queryParams.endTime = this.queryParams.endTime + ''
      console.log(this.queryParams)
      this.$emit('submit', this.queryParams)
    },
    resetBtn() {
      this.queryParams.energyTypeId = null
      this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
      this.queryParams.objIds = []
      this.queryParams.objType = ''
      this.timeValue = []
      this.dateValue = []
      this.weekValue1 = null
      this.weekValue2 = null
      this.monthValue = []
      this.yearValue1 = null
      this.yearValue2 = null
    },
    transformTime(timeStamp) {// 本月最后一天
      let year = moment(timeStamp).format('YYYY')
      let month = moment(timeStamp).format('MM')
      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
      let value = new Date(newData).getTime()
      return value
    },
    transformYear(timeStamp) {// 本年最后一天
      let year = moment(timeStamp).format('YYYY')
      let newData = year+'-12-31 23:59:59'
      let value = new Date(newData).getTime()
      return value
    },
    switchMode() {// 展开和收起切换
      this.isExpand = !this.isExpand
      const element = this.$refs.searchBarRef
      if (this.isExpand) {
        element.classList.remove('divHeight')
      } else {
        element.classList.add('divHeight')
      }
    }
  }
}
</script>
<style lang='scss'>
/* 时间整点 */
.noneMinute .el-time-spinner__wrapper {
  width: 100%;
}
.noneMinute .el-scrollbar:nth-of-type(2) {
  display: none;
}
.demo-form-inline {
  .el-date-editor .el-range__icon {
    font-size: 16px;
    color: #0B58FF;
  }
  .el-input__prefix .el-icon-date {
    font-size: 16px;
    color: #0B58FF;
  }
}
</style>
<style lang="scss" scoped>
.demo-form-inline {
  .blue-block {
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #0B58FF;
    border-radius: 1px;
    margin-right: 8px;
    margin-top: 12px;
  }
}
.searchBarBox .foldClass {
  position: absolute;
  top: 14px;
  right: 0;
  cursor: pointer;
  font-size: 12px;
  color:#0B58FF;
}
.searchBarBox .foldClass .iconfont {
  font-size: 14px;
}
.divHeight {
  height: 45px;
  overflow: hidden;
}
.separateStyle {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: #E8E8E8;
  vertical-align: middle;
  margin: 0 10px;
}
</style>