141 lines
3.6 KiB
Vue
141 lines
3.6 KiB
Vue
<template>
|
||
<div v-loading="loading">
|
||
<el-card
|
||
shadow="always"
|
||
class="common-card-container"
|
||
:class="
|
||
zbInfo.emsCommunicationStatus !== '0'
|
||
? '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"
|
||
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>
|
||
|
||
<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>
|