135 lines
3.8 KiB
Vue
135 lines
3.8 KiB
Vue
|
||
<template>
|
||
<div v-loading="loading">
|
||
<el-card shadow="always" class="common-card-container" :class="zbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
|
||
<div slot="header">
|
||
<span class="large-title">1#{{zbInfo.deviceName}}</span>
|
||
<div class="status">
|
||
<div>{{$store.state.ems.communicationStatusOptions[zbInfo.emsCommunicationStatus]}}</div>
|
||
<div>数据更新时间：{{zbInfo.dataUpdateTime}}</div>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
class="common-table"
|
||
:data="zbInfo.loadDataDetailInfo"
|
||
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="peakKwh"
|
||
label="尖/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="highKwh"
|
||
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" :class="cnbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
|
||
<div slot="header">
|
||
<span class="large-title">2#{{cnbInfo.deviceName}}</span>
|
||
<div class="status">
|
||
<div>{{$store.state.ems.communicationStatusOptions[cnbInfo.emsCommunicationStatus]}}</div>
|
||
<div>数据更新时间：{{cnbInfo.dataUpdateTime}}</div>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
class="common-table"
|
||
:data="cnbInfo.meteDataDetailInfo"
|
||
stripe
|
||
style="width: 100%;">
|
||
<el-table-column
|
||
prop="category"
|
||
label="类别">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="activePower"
|
||
label="有功功率"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="reactivePower"
|
||
label="无功功率">
|
||
</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,
|
||
zbInfo:{},
|
||
cnbInfo:{},
|
||
}
|
||
},
|
||
methods:{
|
||
init(){
|
||
this.loading = true
|
||
getAmmeterDataList(this.siteId).then(response => {
|
||
this.zbInfo =JSON.parse(JSON.stringify(response?.data?.ammeterLoadData || {}));
|
||
this.cnbInfo =JSON.parse(JSON.stringify(response?.data?.ammeterMeteData || {}));
|
||
}).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>
|