|
|
|
|
@ -1,94 +1,188 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="main_content_hei">
|
|
|
|
|
<h1>电能监控</h1>
|
|
|
|
|
<div>
|
|
|
|
|
<a-card>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col
|
|
|
|
|
v-for="(item, index) in dataSource"
|
|
|
|
|
:span="6"
|
|
|
|
|
:key="index"
|
|
|
|
|
style="text-align: center"
|
|
|
|
|
<div class="title">
|
|
|
|
|
<div class="iconzz"></div>
|
|
|
|
|
<div style="margin-left: 10px">
|
|
|
|
|
<span style="font-weight: 700; font-size: medium; margin-top: 20px"
|
|
|
|
|
>充电机直流表</span
|
|
|
|
|
>
|
|
|
|
|
<a-card>
|
|
|
|
|
<p>{{ item.f_EqmCode == null? '空': item.f_EqmCode }}</p>
|
|
|
|
|
<div style="position: relative">
|
|
|
|
|
<img src="@/assets/img/ammeter.png" />
|
|
|
|
|
<span class="power_value">{{ item.f_ShowEnergy }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <p style="margin-top: 10px">
|
|
|
|
|
电表值：<label style="font-weight: bold; color: #1890ff">{{
|
|
|
|
|
item
|
|
|
|
|
}}</label>
|
|
|
|
|
</p> -->
|
|
|
|
|
</a-card>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-card>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// import { index } from "@/services/electricity/direct_current";
|
|
|
|
|
import { handle_GetElecMeterParamValue } from "@/services/electricity/alternating_current";
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
title: "序号",
|
|
|
|
|
dataIndex: "id",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "位置",
|
|
|
|
|
dataIndex: "position",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "电表值",
|
|
|
|
|
dataIndex: "value",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "ElectricityDirectCurrentIndex",
|
|
|
|
|
components: {},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
columns: columns,
|
|
|
|
|
dataSource: [],
|
|
|
|
|
selectedRows: [],
|
|
|
|
|
};
|
|
|
|
|
<div style="margin-top: 20px" class="batter_table">
|
|
|
|
|
<div v-for="(item, index) in dataSource" :key="index">
|
|
|
|
|
<div class="posi_title">#{{ index + 1 }}仓电流表</div>
|
|
|
|
|
<div class="imgs_item" style="margin-top: 35px">
|
|
|
|
|
<img src="@/assets/img/ammeter.png" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 35px">
|
|
|
|
|
<div class="pub_flex">
|
|
|
|
|
<span>有功功率:</span>
|
|
|
|
|
<span>{{ item.f_TotalActivePower }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pub_flex">
|
|
|
|
|
<span>有功电能:</span>
|
|
|
|
|
<span>{{ item.f_TotalActiveEnergy }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pub_flex">
|
|
|
|
|
<span>有功电能二次侧:</span>
|
|
|
|
|
<span>{{ item.f_ShowEnergy }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// import { index } from "@/services/electricity/direct_current";
|
|
|
|
|
import { handle_GetElecMeterParamValue } from "@/services/electricity/alternating_current";
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
title: "序号",
|
|
|
|
|
dataIndex: "id",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "位置",
|
|
|
|
|
dataIndex: "position",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "电表值",
|
|
|
|
|
dataIndex: "value",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "ElectricityDirectCurrentIndex",
|
|
|
|
|
components: {},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
columns: columns,
|
|
|
|
|
dataSource: [],
|
|
|
|
|
selectedRows: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.loadData();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
loadData() {
|
|
|
|
|
// index().then(res => {
|
|
|
|
|
// this.dataSource = res.data.data
|
|
|
|
|
// })
|
|
|
|
|
handle_GetElecMeterParamValue().then((res) => {
|
|
|
|
|
// const DataInfo = JSON.parse(res.data.msg);
|
|
|
|
|
this.dataSource = res.data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
created() {},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.loadData();
|
|
|
|
|
handle_label(data) {
|
|
|
|
|
switch (data) {
|
|
|
|
|
case "M001":
|
|
|
|
|
return "1#箱变";
|
|
|
|
|
case "M002":
|
|
|
|
|
return "3#箱变";
|
|
|
|
|
case "M003":
|
|
|
|
|
return "4#箱变";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
loadData() {
|
|
|
|
|
// index().then(res => {
|
|
|
|
|
// this.dataSource = res.data.data
|
|
|
|
|
// })
|
|
|
|
|
handle_GetElecMeterParamValue().then((res) => {
|
|
|
|
|
// const DataInfo = JSON.parse(res.data.msg);
|
|
|
|
|
this.dataSource = res.data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handle_label(data) {
|
|
|
|
|
switch (data) {
|
|
|
|
|
case "M001":
|
|
|
|
|
return "1#箱变";
|
|
|
|
|
case "M002":
|
|
|
|
|
return "3#箱变";
|
|
|
|
|
case "M003":
|
|
|
|
|
return "4#箱变";
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.main_content_hei {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
.power_value {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 60px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
h1 {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
.iconzz {
|
|
|
|
|
height: 23px;
|
|
|
|
|
width: 5px;
|
|
|
|
|
background-color: #191d24;
|
|
|
|
|
// margin-left: -15px;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 60px;
|
|
|
|
|
height: 76px;
|
|
|
|
|
}
|
|
|
|
|
.batter_table {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
> div {
|
|
|
|
|
margin: 15px;
|
|
|
|
|
width: 23%;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
// border-bottom-right-radius: 5px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.posi_title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
background: #d2d2d9;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #191d24;
|
|
|
|
|
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
|
|
|
|
|
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
.imgs_item {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
background: #b5bcce;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
> div:last-child {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
> div {
|
|
|
|
|
flex: 1;
|
|
|
|
|
> span {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #191d24;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.power_value {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 60px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.pub_flex {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
