205 lines
5.9 KiB
Vue
205 lines
5.9 KiB
Vue
|
|
||
|
|
<template>
|
||
|
|
<div style="width:100%" v-loading="loading">
|
||
|
|
<!-- 搜索栏-->
|
||
|
|
<el-form :inline="true" class="select-container">
|
||
|
|
<el-form-item label="时间选择">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="dateRange"
|
||
|
|
type="daterange"
|
||
|
|
range-separator="至"
|
||
|
|
start-placeholder="开始日期"
|
||
|
|
end-placeholder="结束日期"
|
||
|
|
value-format="yyyy-MM-dd"
|
||
|
|
:clearable="false"
|
||
|
|
:picker-options="pickerOptions"
|
||
|
|
:default-value="defaultDateRange"
|
||
|
|
></el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button @click="onReset" native-type="button">重置</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<!--表格-->
|
||
|
|
<el-table
|
||
|
|
class="common-table"
|
||
|
|
:data="tableData"
|
||
|
|
stripe
|
||
|
|
style="width: 100%;margin-top:25px;">
|
||
|
|
<!-- 汇总列-->
|
||
|
|
<el-table-column label="汇总">
|
||
|
|
<el-table-column
|
||
|
|
prop="dataTime"
|
||
|
|
label="日期"
|
||
|
|
width="120">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<!--充电量列-->
|
||
|
|
<el-table-column label="充电价格" align="center">
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="activePeakKwh"
|
||
|
|
label="尖">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="activeHighKwh"
|
||
|
|
label="峰">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="activeFlatKwh"
|
||
|
|
label="平">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="activeValleyKwh"
|
||
|
|
label="谷">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="activeTotalKwh"
|
||
|
|
label="总">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<!--充电量列-->
|
||
|
|
<el-table-column label="放电价格" align="center">
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="reActivePeakKwh"
|
||
|
|
label="尖">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="reActiveHighKwh"
|
||
|
|
label="峰">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="reActiveFlatKwh"
|
||
|
|
label="平">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="reActiveValleyKwh"
|
||
|
|
label="谷">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="reActiveTotalKwh"
|
||
|
|
label="总">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<!-- 效率-->
|
||
|
|
<!-- <el-table-column label="效率(%)" align="center">-->
|
||
|
|
<!-- <el-table-column-->
|
||
|
|
<!-- align="center"-->
|
||
|
|
<!-- prop="effect">-->
|
||
|
|
<!-- </el-table-column>-->
|
||
|
|
<!-- </el-table-column>-->
|
||
|
|
</el-table>
|
||
|
|
<el-pagination
|
||
|
|
v-show="tableData.length>0"
|
||
|
|
background
|
||
|
|
@size-change="handleSizeChange"
|
||
|
|
@current-change="handleCurrentChange"
|
||
|
|
:current-page="pageNum"
|
||
|
|
:page-size="pageSize"
|
||
|
|
:page-sizes="[10, 20, 30, 40]"
|
||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
||
|
|
:total="totalSize"
|
||
|
|
style="margin-top:15px;text-align: center"
|
||
|
|
>
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||
|
|
import { getAmmeterData} from '@/api/ems/dzjk'
|
||
|
|
import {formatDate} from "@/filters/ems";
|
||
|
|
export default {
|
||
|
|
name:'DzjkTjbbSybb',
|
||
|
|
mixins: [getQuerySiteId],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loading:false,
|
||
|
|
pickerOptions:{
|
||
|
|
disabledDate(time) {
|
||
|
|
return time.getTime() > Date.now();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
defaultDateRange:[],//默认展示的时间
|
||
|
|
dateRange:[],
|
||
|
|
tableData:[],
|
||
|
|
pageSize:10,//分页栏当前每个数据总数
|
||
|
|
pageNum:1,//分页栏当前页数
|
||
|
|
totalSize:0,//table表格数据总数
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
// 搜索
|
||
|
|
onSearch(){
|
||
|
|
this.pageNum =1//每次搜索从1开始搜索
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
// 重置
|
||
|
|
onReset(){
|
||
|
|
this.dateRange=this.defaultDateRange
|
||
|
|
this.pageNum =1//每次搜索从1开始搜索
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
// 分页
|
||
|
|
handleSizeChange(val) {
|
||
|
|
this.pageSize = val;
|
||
|
|
this.$nextTick(()=>{
|
||
|
|
this.getData()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleCurrentChange(val) {
|
||
|
|
this.pageNum = val
|
||
|
|
this.$nextTick(()=>{
|
||
|
|
this.getData()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取数据
|
||
|
|
getData(){
|
||
|
|
this.loading=true
|
||
|
|
const {siteId,pageNum,pageSize} =this
|
||
|
|
const [startTime='',endTime='']=(this.dateRange || [])
|
||
|
|
getAmmeterData({siteId:siteId,startTime,endTime,pageSize,pageNum}).then(response=>{
|
||
|
|
this.tableData=response?.rows || [];
|
||
|
|
this.totalSize = response?.total || 0
|
||
|
|
}).finally(()=> {
|
||
|
|
this.loading = false
|
||
|
|
})
|
||
|
|
},
|
||
|
|
init(){
|
||
|
|
this.dateRange=[]
|
||
|
|
this.tableData=[]
|
||
|
|
this.totalSize=0
|
||
|
|
this.pageSize=10
|
||
|
|
this.pageNum = 1
|
||
|
|
const now = new Date().getTime();
|
||
|
|
const lastMonth = new Date(now-30 * 24 * 60 * 60 * 1000).getTime();
|
||
|
|
this.defaultDateRange = [formatDate(lastMonth), formatDate(now)];
|
||
|
|
this.dateRange=[formatDate(lastMonth), formatDate(now)];
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
::v-deep{
|
||
|
|
.common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th{
|
||
|
|
border-bottom: 1px solid #dfe6ec;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|