yudao-dev/src/views/energy/analysis/yoyAnalysis/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"
        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 || queryParams.type === 2">
        <el-date-picker
          v-model="yearValue"
          type="year"
          :picker-options="pickerOptions"
          @change="selectTime"
          :clearable="false"
          size="small"
          placeholder="选择年">
        </el-date-picker>
      </div>
      <div v-show="queryParams.type === 3">
        <el-date-picker
          v-model="yearMonth"
          type="month"
          :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, // 1季度2月3日
        searchTime: null,
        objId: null
      },
      timeType: [
        {id: 1, name: '季度'},
        {id: 2, name: '月'},
        {id: 3, name: '日'}
      ],
      yearValue: '',
      yearMonth: '',
      objArr: [],
      objList: [],
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now()
        }
      }
    }
  },
  mounted() {
    this.getObjTree()
  },
  methods: {
    getObjTree() {
      getTree().then(res => {
        this.objList = res.data || []
      })
    },
    selectTime() {
      if (this.queryParams.type === 3) {
        this.queryParams.searchTime = this.yearMonth
      } else {
        this.queryParams.searchTime = this.yearValue
      }
    },
    // 查询
    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
      }
      if (this.queryParams.type === 3) {
        this.queryParams.searchTime = this.transformTime(this.yearMonth) + ''
      } else {
        this.queryParams.searchTime = this.transformYear(this.yearValue) + ''
      }
      this.$emit('submit', this.queryParams)
    },
    exportData() {
      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
      }
      if (this.queryParams.type === 3) {
        this.queryParams.searchTime = this.transformTime(this.yearMonth) + ''
      } else {
        this.queryParams.searchTime = this.transformYear(this.yearValue) + ''
      }
      this.$emit('exportD', this.queryParams)
    },
    // 递归取对象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
    },
    transformYear(timeStamp) {// 本年最后一天
      let year = moment(timeStamp).format('YYYY')
      let newData = year+'-12-31 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>
.demo-form-inline {
  .blue-block {
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #0B58FF;
    border-radius: 1px;
    margin-right: 8px;
    margin-top: 10px;
  }
}
.separateStyle {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: #E8E8E8;
  vertical-align: middle;
}
</style>