xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

电表状态显示

Browse Source
This commit is contained in:
baicai
2025-08-15 14:13:54 +08:00
parent 15196f8d71
commit 0299d32a52
1 changed files with 111 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
src/views/ems/dzjk/sbjk/db/index.vue
View File

@ -1,134 +1,140 @@
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-card shadow="always" class="common-card-container" :class="zbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'"> <el-card
<div slot="header"> shadow="always"
<span class="large-title">1#{{zbInfo.deviceName}}</span> class="common-card-container"
<div class="status"> :class="
<div>{{$store.state.ems.communicationStatusOptions[zbInfo.emsCommunicationStatus]}}</div> zbInfo.emsCommunicationStatus !== '0'
<div>数据更新时间：{{zbInfo.dataUpdateTime}}</div> ? 'zb-common-card-container'
</div> : '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>
<el-table <div>数据更新时间：{{ zbInfo.dataUpdateTime }}</div>
class="common-table" </div>
: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" style="margin-top:20px" :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> </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"
style="margin-top: 20px"
:class="
cnbInfo.emsCommunicationStatus !== '0'
? '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> </template>
<script> <script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getAmmeterDataList} from '@/api/ems/dzjk' import { getAmmeterDataList } from "@/api/ems/dzjk";
export default { export default {
name:'DzjkSbjkDb', name: "DzjkSbjkDb",
mixins:[getQuerySiteId], mixins: [getQuerySiteId],
data() { data() {
return { return {
loading:false, loading: false,
zbInfo:{}, zbInfo: {},
cnbInfo:{}, cnbInfo: {},
} };
}, },
methods:{ methods: {
init(){ init() {
this.loading = true this.loading = true;
getAmmeterDataList(this.siteId).then(response => { getAmmeterDataList(this.siteId)
this.zbInfo =JSON.parse(JSON.stringify(response?.data?.ammeterLoadData || {})); .then((response) => {
this.cnbInfo =JSON.parse(JSON.stringify(response?.data?.ammeterMeteData || {})); this.zbInfo = JSON.parse(
}).finally(() => {this.loading = false}) JSON.stringify(response?.data?.ammeterLoadData || {})
} );
this.cnbInfo = JSON.parse(
JSON.stringify(response?.data?.ammeterMeteData || {})
);
})
.finally(() => {
this.loading = false;
});
},
}, },
mounted(){ mounted() {},
};
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.zb-common-card-container,.cnb-common-card-container{ .zb-common-card-container,
::v-deep{ .cnb-common-card-container {
.el-card__header{ ::v-deep {
padding:10px 14px; .el-card__header {
background-color: #FC6B69; padding: 10px 14px;
color:#ffffff; background-color: #fc6b69;
color: #ffffff;
position: relative; position: relative;
} }
} }
} }
.cnb-common-card-container{ .cnb-common-card-container {
margin-top:25px; margin-top: 25px;
::v-deep{ ::v-deep {
.el-card__header{ .el-card__header {
background-color: #05AEA3; background-color: #05aea3;
} }
} }
} }
.status{ .status {
position: absolute; position: absolute;
right:14px; right: 14px;
top:50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: #ffffff; color: #ffffff;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
} }
</style> </style>