EMS_client/src/views/module_ems/energyAnalyse/components/commonSearch.vue

<template>
  <div class="table-page-search-wrapper">
    <a-form :model="queryParams" ref="queryForm" layout="inline">
      <a-row :gutter="24">
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-form-item label="区域" prop="spaceId">
            <j-tree-select
              ref="treeSelect"
              placeholder="请选择上级"
              v-model="queryParams.spaceId"
              dict="base_space,name,id"
              pidField="parentid"
              pidValue="0"
              hasChildField="has_child"
            >
            </j-tree-select>
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="type !== 'nodate'">
          <a-form-item label="日期" prop="date">
            <a-range-picker
              v-if="type === 'daterange'"
              v-model="queryParams.date"
              format="YYYY-MM"
              :placeholder="['开始月份', '结束月份']"
            >
            </a-range-picker>
            <a-date-picker
              v-if="type === 'month'"
              v-model="queryParams.yearMonth"
              :editable="false"
              :clearable="false"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月"
            >
            </a-date-picker>
            <a-date-picker
              v-if="type === 'day'"
              v-model="queryParams.day"
              :editable="false"
              :clearable="false"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            >
            </a-date-picker>
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-button type="primary" icon="search" @click="handleQuery">搜索</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
export default {
  name: '',
  props: {
    type: {
      type: String,
      default: null,
    },
    hasAreaSearch: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showSearch: false,
      queryParams: {
        spaceId: '288348631531521',
        beginTime: null, // 只有能耗总览不需要
        endTime: null, // 只有能耗总览不需要
        date: [],
        yearMonth: null, // 节能分析
        day: null, // 分项能耗
      },
      params: {
        column: 'createTime',
        order: 'desc',
        hasQuery: 'false',
        field: 'id,parentid,name',
        pageNo: '1',
        pageSize: '100',
      },
      url: {},
    }
  },
  created() {
    this.getNowDate()
  },
  mounted() {},
  methods: {
    /**
     * 查询当天日期
     */
    getNowDate() {
      const nowTime = new Date()
      const year = nowTime.getFullYear()
      let month = nowTime.getMonth() + 1
      let day = nowTime.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      // const NOW_MONTHS_AGO = `${year}-${month}`
      this.queryParams.beginTime = `${year}-01`
      this.queryParams.endTime = `${year}-${month}`
      this.queryParams.date = [`${year}-01`, `${year}-${month}`]
      this.queryParams.yearMonth = `${year}-${month}`
      this.queryParams.day = `${year}-${month}-${day}`
    },
    changeShow() {
      this.showSearch = !this.showSearch
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // console.log(this.queryParams)
      this.queryParams.beginTime = this.queryParams.date[0]
      this.queryParams.endTime = this.queryParams.date[1]
      this.$emit('search', this.queryParams)
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.date = []
      this.handleQuery()
    },
  },
}
</script>

<style lang="less" scoped>
.search-compoments {
  position: relative;
  .search-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #fff;
    background-color: #1890ff;
  }
  .search-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding-top: 12px;
    margin-bottom: 10px;
    .a-form-item--small.a-form-item {
      margin-bottom: 14px;
    }
  }
  .item-echarts {
    min-height: calc(100vh - 174px);
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
}
</style>