ems、收益报表
This commit is contained in:
白菜
257
src/views/ems/dzjk/sbjk/ems/index.vue
Normal file
257
src/views/ems/dzjk/sbjk/ems/index.vue
Normal file
@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="ems">
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
:key="index + 'PcsHome'"
|
||||
style="margin-bottom: 25px"
|
||||
>
|
||||
<el-card
|
||||
:class="{
|
||||
'warning-card-container': item.workStatus === '1',
|
||||
'timing-card-container': item.workStatus === '2',
|
||||
'running-card-container': !['1', '2'].includes(item.workStatus),
|
||||
}"
|
||||
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||
shadow="always"
|
||||
>
|
||||
<!-- 标题-->
|
||||
<div slot="header">
|
||||
<span class="large-title"
|
||||
>{{ item.deviceName }}</span
|
||||
>
|
||||
<div class="info">
|
||||
<div>
|
||||
{{
|
||||
$store.state.ems.workStatusOptions[item.workStatus]
|
||||
}}
|
||||
</div>
|
||||
<div>数据更新时间：{{ item.dataUpdateTime }}</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
|
||||
详细
|
||||
</el-button>
|
||||
<el-badge :value="item.alarmNum || 0" class="item">
|
||||
<i
|
||||
class="el-icon-message-solid alarm-icon"
|
||||
@click="pointDetail(item,'alarmPoint')"
|
||||
></i>
|
||||
</el-badge>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 工作状态-->
|
||||
<div class="descriptions-main">
|
||||
<el-descriptions :colon="false" :column="5" direction="vertical">
|
||||
<el-descriptions-item
|
||||
:contentClassName="`descriptions-direction ${
|
||||
item.workStatus === '0' ? 'save' : 'danger'
|
||||
}`"
|
||||
:span="1"
|
||||
label="工作状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
$store.state.ems.workStatusOptions[item.workStatus]
|
||||
}}
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="工作模式"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
todo 手动/自动
|
||||
{{
|
||||
$store.state.ems.gridStatusOptions[item.gridStatus]
|
||||
}}
|
||||
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="并网状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
$store.state.ems.gridStatusOptions[item.gridStatus]
|
||||
}}
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="告警状态"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
todo
|
||||
<!--
|
||||
{{
|
||||
$store.state.ems.warnOptions[item.warnMode]
|
||||
}}-->
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:contentClassName="`descriptions-direction ${
|
||||
item.deviceStatus === '2' ? 'save' : 'danger'
|
||||
}`"
|
||||
:span="1"
|
||||
label="设备状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
$store.state.ems.deviceStatusOptions[item.deviceStatus]
|
||||
}}
|
||||
</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<!-- 用电量-->
|
||||
<div class="descriptions-main descriptions-main-bg-color">
|
||||
<el-descriptions :colon="false" :column="5" direction="vertical">
|
||||
<el-descriptions-item
|
||||
:span="5"
|
||||
contentClassName="descriptions-direction"
|
||||
label="当日用电量："
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="电网用电量"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="储能放电量"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="储能充电量"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
</el-descriptions-item
|
||||
>
|
||||
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="负荷用电量"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="光伏发电量"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<!-- 表格-->
|
||||
<el-table
|
||||
class="common-table"
|
||||
stripe
|
||||
style="width: 100%;margin-top:25px;">
|
||||
<el-table-column
|
||||
label="功率"
|
||||
prop="type">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="电网"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer"
|
||||
@click="showChart('簇电压',scope.row.clusterId)">{{ scope.row.clusterVoltage }} V</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="储能">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer"
|
||||
@click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="负荷">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer"
|
||||
@click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="光伏">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer"
|
||||
@click="showChart('当前SOC',scope.row.clusterId)">{{ scope.row.currentSoc }} %</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 图表-->
|
||||
<div id="emsChart" style="height: 350px"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-empty v-show="list.length <= 0" :image-size="200"></el-empty>
|
||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||
<point-table ref="pointTable"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import {getPcsDetailInfo} from "@/api/ems/dzjk";
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
|
||||
export default {
|
||||
name: "DzjkSbjkEms",
|
||||
components: {pointChart, PointTable},
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row, dataType) {
|
||||
const {deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'PCS'}, dataType)
|
||||
},
|
||||
showChart(pointName, deviceId, isBranch = false) {
|
||||
pointName &&
|
||||
this.$refs.pointChart.showChart({pointName, deviceCategory: isBranch ? 'BRANCH' : 'PCS', deviceId});
|
||||
},
|
||||
getPcsList() {
|
||||
this.loading = true;
|
||||
getPcsDetailInfo(this.siteId)
|
||||
.then((response) => {
|
||||
const data = response?.data || {};
|
||||
this.list = JSON.parse(JSON.stringify(data));
|
||||
})
|
||||
.finally(() => (this.loading = false));
|
||||
},
|
||||
updateData() {
|
||||
this.getPcsList();
|
||||
},
|
||||
init() {
|
||||
this.updateData();
|
||||
this.updateInterval(this.updateData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
<template>
|
||||
<div style="width:100%" v-loading="loading">
|
||||
<!-- 搜索栏-->
|
||||
@ -25,169 +24,171 @@
|
||||
</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>
|
||||
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="activePeakPrice"
|
||||
label="尖">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="activeHighPrice"
|
||||
label="峰">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="activeFlatPrice"
|
||||
label="平">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="activeValleyPrice"
|
||||
label="谷">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="activeTotalPrice"
|
||||
label="总">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<!--充电量列-->
|
||||
<el-table-column label="放电价格" align="center">
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="reActivePeakPrice"
|
||||
label="尖">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="reActiveHighPrice"
|
||||
label="峰">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="reActiveFlatPrice"
|
||||
label="平">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="reActiveValleyPrice"
|
||||
label="谷">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="reActiveTotalPrice"
|
||||
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 {getAmmeterRevenueData} from '@/api/ems/dzjk'
|
||||
import {formatDate} from "@/filters/ems";
|
||||
|
||||
export default {
|
||||
name:'DzjkTjbbSybb',
|
||||
name: 'DzjkTjbbSybb',
|
||||
mixins: [getQuerySiteId],
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
pickerOptions:{
|
||||
loading: false,
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
defaultDateRange:[],//默认展示的时间
|
||||
dateRange:[],
|
||||
tableData:[],
|
||||
pageSize:10,//分页栏当前每个数据总数
|
||||
pageNum:1,//分页栏当前页数
|
||||
totalSize:0,//table表格数据总数
|
||||
defaultDateRange: [],//默认展示的时间
|
||||
dateRange: [],
|
||||
tableData: [],
|
||||
pageSize: 10,//分页栏当前每个数据总数
|
||||
pageNum: 1,//分页栏当前页数
|
||||
totalSize: 0,//table表格数据总数
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 搜索
|
||||
onSearch(){
|
||||
this.pageNum =1//每次搜索从1开始搜索
|
||||
onSearch() {
|
||||
this.pageNum = 1//每次搜索从1开始搜索
|
||||
this.getData()
|
||||
},
|
||||
// 重置
|
||||
onReset(){
|
||||
this.dateRange=this.defaultDateRange
|
||||
this.pageNum =1//每次搜索从1开始搜索
|
||||
onReset() {
|
||||
this.dateRange = this.defaultDateRange
|
||||
this.pageNum = 1//每次搜索从1开始搜索
|
||||
this.getData()
|
||||
},
|
||||
// 分页
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.$nextTick(()=>{
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pageNum = val
|
||||
this.$nextTick(()=>{
|
||||
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 || [];
|
||||
getData() {
|
||||
this.loading = true
|
||||
const {siteId, pageNum, pageSize} = this
|
||||
const [startTime = '', endTime = ''] = (this.dateRange || [])
|
||||
//http://localhost:8089/ems/statsReport/getAmmeterRevenueData?siteId=021_DDS_01&startTime=2025-10-14&endTime=2025-10-15&pageSize=10&pageNum=1
|
||||
getAmmeterRevenueData({siteId: siteId, startTime, endTime, pageSize, pageNum}).then(response => {
|
||||
this.tableData = response?.rows || [];
|
||||
this.totalSize = response?.total || 0
|
||||
}).finally(()=> {
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
init(){
|
||||
this.dateRange=[]
|
||||
this.tableData=[]
|
||||
this.totalSize=0
|
||||
this.pageSize=10
|
||||
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();
|
||||
const lastMonth = new Date(now - 30 * 24 * 60 * 60 * 1000).getTime();
|
||||
this.defaultDateRange = [formatDate(lastMonth), formatDate(now)];
|
||||
this.dateRange=[formatDate(lastMonth), formatDate(now)];
|
||||
this.dateRange = [formatDate(lastMonth), formatDate(now)];
|
||||
this.getData()
|
||||
},
|
||||
},
|
||||
@ -195,8 +196,8 @@ export default {
|
||||
</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{
|
||||
::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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user