<template> <div class="app-container" id="energyReportBox"> <!-- 搜索工作栏 --> <search-bar :formConfigs="formConfig" ref="searchBarForm" :isFold="isFold" @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 { getEnergyTypeListAll } from '@/api/base/energyType'; import { publicFormatter } from '@/utils/dict'; import { parseTime } from '@/utils/ruoyi'; const tableProps = [ { prop: 'statisticType', label: '统计类型', filter: publicFormatter('statistic_type'), }, { prop: 'startTime', label: '开始时间', filter: parseTime, minWidth: 160, }, { prop: 'endTime', label: '结束时间', filter: parseTime, minWidth: 160, }, { prop: 'statisticName', label: '统计方案', }, { prop: 'energyType', label: '能源类型', filter: publicFormatter('energy_type'), }, { prop: 'startNum', label: '抄表数(起始)', }, { prop: 'endNum', label: '抄表数(结束)', }, { prop: 'useNum', label: '消耗量', }, ]; export default { name: 'EnergyLimit', data() { return { isFold: false, formConfig: [ { type: 'select', label: '能源类型', labelField: 'labelName', selectOptions: [], param: 'energyTypeId', filterable: true, }, { 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: 'timestamp', rangeSeparator: '-', startPlaceholder: '开始时间', endPlaceholder: '结束时间', param: 'timeVal', defaultSelect: [], width: 350, }, { type: 'button', btnName: '查询', name: 'search', color: 'primary', }, { type: 'separate', }, { type: this.$auth.hasPermi('monitoring:energy-report:export') ? 'button' : '', btnName: '导出', name: 'add', color: 'primary', plain: true, }, ], tableProps, tableH: this.tableHeight(260), // 总条数 total: 0, // 班次基础信息列表 list: [], // 查询参数 queryParams: { pageNo: 1, pageSize: 20, energyTypeId: null, statisticType: null, startTime: null, endTime: null, }, }; }, created() { window.addEventListener('resize', this._eventListeners); this.getList(); this.getTypeList(); }, mounted() { this.isFold = this.searchBarWidth('energyReportBox', 1198); }, destroyed() { window.removeEventListener('resize', this._eventListeners); }, methods: { _eventListeners() { this.tableH = this.tableHeight(260); this.isFold = this.searchBarWidth('energyReportBox', 1198); }, 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] : null; this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null; this.getList(); break; default: this.$modal .confirm('是否确认导出') .then(() => { return energyReportPageExportAuto({ ...this.queryParams }); }) .then((response) => { this.$download.excel(response, '能源统计报表.xls'); }) .catch(() => {}); } }, /** 查询列表 */ getList() { energyReportPageAuto(this.queryParams).then((response) => { this.list = response.data.list || []; this.total = response.data.total; }); }, }, }; </script>