yudao-dev/src/views/energy/monitoring/energyReport/index.vue

<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <!-- 列表 -->
    <base-table
      :page="queryParams.pageNo"
      :limit="queryParams.pageSize"
      :table-props="tableProps"
      :table-data="list"
      :max-height="tableH"
    />
    <pagination
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { energyReportPageAuto, energyReportPageExportAuto } from "@/api/monitoring/energyReport";
import { parseTime } from '@/utils/ruoyi'
import { getEnergyTypeListAll } from "@/api/base/energyType";
// import { getTree } from '@/api/base/factory'
import { publicFormatter } from '@/utils/dict'
const tableProps = [
  {
    prop: 'statisticType',
    label: '统计类型',
    filter: publicFormatter('statistic_type')
  },
  {
    prop: 'startTime',
    label: '开始时间',
    filter: parseTime,
    minWidth: 150
  },
  {
    prop: 'endTime',
    label: '结束时间',
    filter: parseTime,
    minWidth: 150
  },
  {
    prop: 'statisticName',
    label: '统计方案'
  },
  {
    prop: 'energyType',
    label: '能源类型'
  },
  {
    prop: 'startNum',
    label: '抄表数(起始)'
  },
  {
    prop: 'endNum',
    label: '抄表数(结束)'
  },
  {
    prop: 'useNum',
    label: '消耗量'
  }
]
export default {
  name: "EnergyReportSearch",
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '能源类型',
          selectOptions: [],
          param: 'energyTypeId'
        },
        {
          type: 'select',
          label: '统计类型',
          selectOptions: this.getDictDatas(this.DICT_TYPE.STATISTIC_TYPE),
          labelField: 'label',
          valueField: 'value',
          param: 'statisticType'
        },
        {
          type: 'datePicker',
          label: '时间',
          dateType: 'datetimerange',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: "yyyy-MM-ddTHH:mm:ss",
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          param: 'timeVal',
          defaultSelect: [],
          width: 350
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'separate'
        },
        {
          type: this.$auth.hasPermi('monitoring:energy-limit:create') ? 'button' : '',
          btnName: '导出',
          name: 'add',
          color: 'primary',
          plain: true
        }
      ],
      tableProps,
      tableH: this.tableHeight(260),
      // 总条数
      total: 0,
      // 班次基础信息列表
      list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 20,
        energyTypeId: null,
        startTime: null,
        endTime: null,
        statisticType: null
      },
      energyTypeList: [],
      typeList: [
        {label: '合并', value: '1'},
        {label: '详细', value: '2'}
      ],
      objList: []
    };
  },
  created() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
    })
    this.getList();
    this.getTypeList()
  },
  methods: {
    getTypeList() {
      getEnergyTypeListAll().then((res) => {
        this.formConfig[0].selectOptions = res.data || []
        // this.energyTypeList = res.data || []
      })
    },
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.queryParams.pageNo = 1;
          this.queryParams.energyTypeId = val.energyTypeId
          this.queryParams.statisticType = val.statisticType
          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : nul
          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : nul
          this.getList()
          break
        default:
          this.addOrEditTitle = '新增'
          this.centervisible = true
          this.$nextTick(() => {
            this.$refs.energyLimit.init()
          })
      }
    },
    /** 查询列表 */
    getList() {
      energyReportPageAuto({...this.queryParams}).then(response => {
        let arr = response.data.list || [];
        // arr&&arr.map(item => {
        //   this.typeList.map(i => {
        //     if (item.type === i.value) {
        //       item.type = i.label
        //     }
        //   })
        // })
        this.list = arr
        this.total = response.data.total;
      });
    }
  }
};
</script>