yudao-dev/src/views/energy/base/energyQuantityRealtime/index.vue
2023-11-23 16:56:08 +08:00

208 lines
4.9 KiB
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"
:selectWidth="55"
:max-height="tableH"
@selection-change="selectChange"
/>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
</div>
</template>
<script>
import { getEnergyQuantityRealtimePage } from "@/api/base/energyQuantityRealtime"
import { getEnergyTypeListAll } from "@/api/base/energyType"
// import { publicFormatter } from '@/utils/dict'
import FileSaver from "file-saver"
import * as XLSX from 'xlsx/xlsx.mjs'
const tableProps = [
{
prop: 'objName',
label: '统计对象'
},
{
prop: 'objCode',
label: '对象编码'
},
{
prop: 'energyTypeName',
label: '能源类型'
},
{
prop: 'startValue',
label: '初始值'
},
{
prop: 'endValue',
label: '当前值'
},
{
prop: 'diffValue',
label: '差值'
},
{
prop: 'amount',
label: '金额'
}
]
export default {
name: "EnergyPlc",
data() {
return {
formConfig: [
{
type: 'select',
label: '能源类型',
selectOptions: [],
param: 'energyTypeId'
},
{
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('base:energy-quantity-realtime:export') ? 'button' : '',
btnName: '导出',
name: 'export',
color: 'primary',
plain: true
}
],
tableProps,
tableH: this.tableHeight(260),
// 总条数
total: 0,
// 班次基础信息列表
list: [],
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 20,
energyTypeId: '',
startTime: null,
endTime: null
},
energyTypeList: [],
exportList: []
};
},
created() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(260)
})
this.getList();
this.getTypeList()
},
methods: {
buttonClick(val) {
this.queryParams.pageNo = 1;
this.queryParams.energyTypeId = val.energyTypeId
this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
switch (val.btnName) {
case 'search':
this.getList()
break
default:
this.exportTable()
}
},
/** 查询列表 */
getList() {
getEnergyQuantityRealtimePage(this.queryParams).then(response => {
let arr = response.data.list || []
arr && arr.map(item => {
item.amount = item.amount ? (!isNaN(parseFloat(item.amount)) && isFinite(item.amount) ? item.amount.toFixed(2) : '') : ''
})
this.list = arr
this.total = response.data.total;
this.exportList = []
});
},
getTypeList() {
getEnergyTypeListAll().then((res) => {
this.formConfig[0].selectOptions = res.data || []
this.energyTypeList = res.data || []
})
},
selectChange(val) {
console.log(val)
this.exportList = val
},
// 勾选导出
exportTable() {
if (this.exportList.length > 0) {
let body = this.exportList.map((x) => [
x.objName,
x.objRemark,
x.energyTypeName,
x.startValue,
x.endValue,
x.diffValue,
x.amount
])
let header = []
this.tableProps.map((y) => {
header.push(y.label)
})
body.unshift(header)
console.log(body)
const filename = '能源抄表.xlsx'
const ws_name = 'Sheet1'
const wb = XLSX.utils.book_new()
const ws = XLSX.utils.aoa_to_sheet(body)
XLSX.utils.book_append_sheet(wb, ws, ws_name)
let wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: false,
type: 'array'
})
FileSaver.saveAs(
new Blob([wbout], {
type: 'application/octet-stream'
}),
filename
)
} else {
this.$modal.msgWarning('请勾选需要导出的数据')
}
}
}
};
</script>