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

<template>
  <el-form :inline="true" class="demo-form-inline">
    <span class="blue-block"></span>
    <el-form-item label="对象选择" required>
      <el-cascader
        v-model="objArr"
        :options="objList"
        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
        popper-class="cascaderParent"
        size="small"
        style="width: 250px;"
        clearable></el-cascader>
    </el-form-item>
    <el-form-item label="时间维度" required>
      <el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;" size="small">
        <el-option
          v-for="item in timeType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          :clearable="false">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="时间" required>
      <div v-show="queryParams.type === 1">
        <el-date-picker
          v-model="monthValue"
          type="month"
          :picker-options="pickerOptions"
          @change="selectTime"
          :clearable="false"
          size="small"
          placeholder="选择月">
        </el-date-picker>
      </div>
      <div v-show="queryParams.type === 2">
        <el-date-picker
          v-model="weekValue"
          type="week"
          format="yyyy 第 WW 周"
          :picker-options="pickerOptionsWeek"
          @change="selectTime"
          :clearable="false"
          size="small"
          placeholder="选择周">
        </el-date-picker>
      </div>
      <div v-show="queryParams.type === 3">
        <el-date-picker
          v-model="dateValue"
          type="date"
          :picker-options="pickerOptions"
          @change="selectTime"
          :clearable="false"
          size="small"
          placeholder="选择日">
        </el-date-picker>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="search">查询</el-button>
    </el-form-item>
    <el-form-item>
      <span class="separateStyle"></span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="exportData" plain>导出</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { getTree } from '@/api/base/factory'
import moment from 'moment'
export default {
  name: 'searchArea',
  data() {
    return {
      // 查询参数
      queryParams: {
        type: 1,
        searchTime: null,
        objId: null
      },
      timeType: [
        {id: 1, name: '月'},
        {id: 2, name: '周'},
        {id: 3, name: '日'}
      ],
      monthValue: '',
      weekValue: '',
      dateValue: '',
      objArr: [],
      objList: [],
      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.getObjTree()
  },
  methods: {
    getObjTree() {
      getTree().then(res => {
        this.objList = res.data || []
      })
    },
    selectTime() {
      switch (this.queryParams.type) {
        case 1:
          this.queryParams.searchTime = this.monthValue
          break;
        case 2:
          this.queryParams.searchTime = this.weekValue
          break;
        default:
          this.queryParams.searchTime = this.dateValue
      }
    },
    // 查询
    search() {
      if (this.objArr.length === 0) {
        this.$modal.msgError('请选择对象')
        return false
      } else {
        this.queryParams.objId = this.objArr[this.objArr.length-1]
      }
      if (!this.queryParams.type) {
        this.$modal.msgError('请选择时间维度')
        return false
      }
      if (!this.queryParams.searchTime) {
        this.$modal.msgError('请选择时间')
        return false
      }
      switch (this.queryParams.type) {
        case 1:
          this.queryParams.searchTime = this.transformTime(this.monthValue)
          break;
        case 2:
          let value = moment(this.weekValue).day(6).format('YYYY-MM-DD') + ' 23:59:59'
          this.queryParams.searchTime = new Date(value).getTime()
          break;
        default:
           let value2 = moment(this.dateValue).format('YYYY-MM-DD') + ' 23:59:59'
           this.queryParams.searchTime = new Date(value2).getTime()
      }
      this.$emit('submit', this.queryParams)
    },
    exportData() {
      let name
      if (this.queryParams.objId) {
        name = this.getObjName(this.objList, this.queryParams.objId)
      } else {
        this.$modal.msgWarning("对象不能为空")
        return false
      }
      this.$emit('exportD', {name: name})
    },
    // 递归取对象name
    getObjName(list, id) {
      let _this = this
      for (let i = 0; i < list.length; i++) {
        let a = list[i]
        if (a.id === id) {
          return a.name
        } else {
          if (a.children && a.children.length > 0) {
            let res = _this.getObjName(a.children, id)
            if (res) {
              return res
            }
          }
        }
      }
    },
    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
    }
  }
}
</script>
<style lang='scss'>
/* 级联选择器 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
  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>
.separateStyle {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: #E8E8E8;
  vertical-align: middle;
}
.demo-form-inline {
  .blue-block {
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #0B58FF;
    border-radius: 1px;
    margin-right: 8px;
    margin-top: 10px;
  }
}
</style>