<template>
|
<el-card shadow="never" class="aui-card--fill">
|
<div class="mod-app">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form-item>
|
<span>时间：</span>
|
<el-date-picker
|
v-model="dataForm.startTime"
|
type="date"
|
:clearable="true"
|
value-format="yyyy-MM-dd"
|
placeholder="请选择">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<span>至</span>
|
</el-form-item>
|
<el-form-item>
|
<el-date-picker
|
v-model="dataForm.endTime"
|
type="date"
|
:clearable="true"
|
value-format="yyyy-MM-dd"
|
placeholder="请选择">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="exportExcel()">导出</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table
|
ref="table"
|
id="listTable"
|
v-loading="dataListLoading"
|
:data="dataList"
|
border
|
style="width: 100%;"
|
show-summary
|
:summary-method="getSummaries">
|
<el-table-column type="index" header-align="center" align="center" min-width="50" label="序号"></el-table-column>
|
<el-table-column prop="lsh" header-align="center" align="center" label="流水号" min-width="250"></el-table-column>
|
<el-table-column prop="rq" header-align="center" align="center" label="日期" min-width="200"></el-table-column>
|
<el-table-column prop="xtName" header-align="center" align="center" label="系统" min-width="300"></el-table-column>
|
<el-table-column prop="nbdrl" header-align="center" align="center" label="电耗" min-width="200">
|
<template slot-scope="scope">
|
<span v-if="Number(scope.row.nbdrl) === Number('-2')" style="color: red;">电耗通讯中断</span>
|
<span v-else>{{ scope.row.nbdrl }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="160">
|
<template slot-scope="scope">
|
<el-button type="text" size="small"
|
@click="showDet(scope.row)">电耗明细</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
:current-page="page"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="limit"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="pageSizeChangeHandle"
|
@current-change="pageCurrentChangeHandle">
|
</el-pagination>
|
|
<!--电耗明细-->
|
<Form v-if="detListVisible" ref="formRef"></det-list>
|
</div>
|
</el-card>
|
</template>
|
|
<script>
|
import mixinViewModule from '@/mixins/view-module'
|
import {getStartDate, getEndDate} from "@/utils/dateUtils";
|
import {exportByDom} from "@/utils/exportUtil";
|
import DetList from "./det"
|
export default {
|
mixins: [mixinViewModule],
|
data () {
|
return {
|
mixinViewModuleOptions: {
|
getDataListURL: '/iailab-iems-coal-proddisp/consume/power/selectList',
|
getDataListIsPage: true
|
},
|
detListVisible: false,
|
dataForm: {
|
startTime: getStartDate(),
|
endTime: getEndDate()
|
}
|
}
|
},
|
components: {
|
DetList
|
},
|
methods: {
|
showDet (row) {
|
this.detListVisible = true
|
this.$nextTick(() => {
|
this.$refs.detList.init(row)
|
})
|
},
|
getSummaries(param) {
|
const { columns, data } = param;
|
const sums = [];
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '合计';
|
return;
|
}
|
if (index === 1 || index === 2 || index === 3 || index === 4 || index === 6) {
|
sums[index] = '';
|
return;
|
}
|
const values = data.map(item => Number(item[column.property]));
|
if (!values.every(value => isNaN(value))) {
|
sums[index] = values.reduce((prev, curr) => {
|
const value = Number(curr);
|
if (!isNaN(value)) {
|
return prev + curr;
|
} else {
|
return prev;
|
}
|
}, 0);
|
} else {
|
sums[index] = '';
|
}
|
});
|
|
return sums;
|
},
|
exportExcel () {
|
let dom = this.$refs.table
|
exportByDom(dom, undefined, '电耗统计')
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
/deep/ .el-table__footer-wrapper tbody td,
|
.el-table__header-wrapper tbody td {
|
background-color: #e3f3ff !important;
|
}
|
/deep/ .el-table__footer-wrapper .is-leaf {
|
background-color: #e3f3ff !important;
|
}
|
/deep/ .el-table__fixed-footer-wrapper tbody td {
|
border-top: 1px solid #ebeef5;
|
background-color: #e3f3ff;
|
font-weight: bold;
|
color: #f50b0b;
|
text-align: center !important;
|
}
|
/deep/ .has-gutter tr td .cell {
|
text-align: center;
|
font-weight: bold;
|
color: blue;
|
}
|
</style>
|
