153 lines
4.2 KiB
Vue
153 lines
4.2 KiB
Vue
|
||
<template>
|
||
<div v-loading="loading">
|
||
<el-card shadow="always" class="common-card-container" :class="info.emsCommunicationStatus === '0' ? 'cnb-common-card-container' : 'zb-common-card-container'">
|
||
<div slot="header">
|
||
<span class="large-title">1#总表</span>
|
||
<div class="status">
|
||
<div>{{$store.state.ems.communicationStatusOptions[info.emsCommunicationStatus]}}</div>
|
||
<div>数据更新时间：{{info.dataUpdateTime}}</div>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
class="common-table"
|
||
:data="info.ammeterDataDetailInfos"
|
||
stripe
|
||
style="width: 100%;">
|
||
<el-table-column
|
||
prop="category"
|
||
label="类别">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="totalKwh"
|
||
label="总/kWh"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="sharpKwh"
|
||
label="尖/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="peakKwh"
|
||
label="峰/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="flatKwh"
|
||
label="平/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="valleyKwh"
|
||
label="谷/kWh">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<!-- 储能表返回值待定-->
|
||
<el-card shadow="always" class="common-card-container cnb-common-card-container">
|
||
<div slot="header">
|
||
<span class="large-title">2#储能表</span>
|
||
<div class="status">
|
||
<div>通信正常</div>
|
||
<div>数据更新时间：2024-10-11 12:00:00</div>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
class="common-table"
|
||
:data="cnbTableData"
|
||
stripe
|
||
style="width: 100%;">
|
||
<el-table-column
|
||
prop="name"
|
||
label="类别">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="zong"
|
||
label="总/kWh"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="jian"
|
||
label="尖/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="feng"
|
||
label="峰/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="ping"
|
||
label="平/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="gu"
|
||
label="谷/kWh">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||
import {getAmmeterDataList} from '@/api/ems/dzjk'
|
||
export default {
|
||
name:'DzjkSbjkDb',
|
||
mixins:[getQuerySiteId],
|
||
data() {
|
||
return {
|
||
loading:false,
|
||
info:{},
|
||
cnbTableData:[
|
||
{name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
{name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
{name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
{name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
],
|
||
}
|
||
},
|
||
methods:{
|
||
init(){
|
||
this.loading = true
|
||
getAmmeterDataList(this.siteId).then(response => {
|
||
// todo 返回数据等待确认，是数组吗?
|
||
this.info =JSON.parse(JSON.stringify(response?.data[0] || {}));
|
||
}).finally(() => {this.loading = false})
|
||
}
|
||
},
|
||
mounted(){
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.zb-common-card-container,.cnb-common-card-container{
|
||
::v-deep{
|
||
.el-card__header{
|
||
padding:10px 14px;
|
||
background-color: #FC6B69;
|
||
color:#ffffff;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
.cnb-common-card-container{
|
||
margin-top:25px;
|
||
::v-deep{
|
||
.el-card__header{
|
||
background-color: #05AEA3;
|
||
}
|
||
}
|
||
}
|
||
.status{
|
||
position: absolute;
|
||
right:14px;
|
||
top:50%;
|
||
transform: translateY(-50%);
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
}
|
||
|
||
|
||
</style>
|