134 lines
4.1 KiB
Vue
134 lines
4.1 KiB
Vue
<template>
|
||
<div v-loading="loading" class="ems">
|
||
<el-card
|
||
v-for="(item,index) in list"
|
||
:key="index+'emsList'"
|
||
class="sbjk-card-container list running-card-container"
|
||
shadow="always"
|
||
>
|
||
<div slot="header">
|
||
<span class="large-title">{{ item.deviceName }}</span>
|
||
<div class="info">
|
||
<div>
|
||
EMS控制模式: {{
|
||
item.emsStatus === 0 ? '自动' : '手动'
|
||
}}
|
||
</div>
|
||
<div>数据更新时间：{{ item.dataUpdateTime }}</div>
|
||
</div>
|
||
<div class="alarm">
|
||
<el-button size="small" round style="margin-right:20px;" type="primary" @click="pointDetail(item,'point')">详细
|
||
</el-button>
|
||
<el-badge :hidden="!item.alarmNum" :value="item.alarmNum || 0" class="item">
|
||
<i
|
||
class="el-icon-message-solid alarm-icon"
|
||
@click="pointDetail(item,'alarmPoint')"
|
||
></i>
|
||
</el-badge>
|
||
</div>
|
||
</div>
|
||
<el-row class="device-info-row">
|
||
<el-col v-for="(tempDataItem,tempDataIndex) in bmsDataList" :key="tempDataIndex+'bmsTempData'"
|
||
:span="6" class="device-info-col">
|
||
<span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
|
||
<span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
|
||
v-html="tempDataItem.unit"></span></span>
|
||
</span>
|
||
</el-col>
|
||
<el-col v-for="(tempDataItem,tempDataIndex) in pcsDataList" :key="tempDataIndex+'pcsTempData'"
|
||
:span="6" class="device-info-col">
|
||
<span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
|
||
<span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
|
||
v-html="tempDataItem.unit"></span></span>
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<el-empty v-show="list.length <= 0" :image-size="200"></el-empty>
|
||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||
<point-table ref="pointTable"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import pointChart from "./../PointChart.vue";
|
||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||
import {getEmsDataList} from "@/api/ems/dzjk";
|
||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||
|
||
export default {
|
||
name: "DzjkSbjkEms",
|
||
components: {pointChart, PointTable},
|
||
mixins: [getQuerySiteId, intervalUpdate],
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
list: [],
|
||
bmsDataList: [{
|
||
name: 'BMS1SOC',
|
||
attr: 'bms1Soc'
|
||
},
|
||
{
|
||
name: 'BMS2SOC',
|
||
attr: 'bms2Soc'
|
||
},
|
||
{
|
||
name: 'BMS3SOC',
|
||
attr: 'bms3Soc'
|
||
},
|
||
{
|
||
name: 'BMS4SOC',
|
||
attr: 'bms4Soc'
|
||
}],
|
||
pcsDataList: [{
|
||
name: 'PCS-1有功功率',
|
||
attr: 'pcs1Yggl'
|
||
},
|
||
{
|
||
name: 'PCS-2有功功率',
|
||
attr: 'pcs2Yggl'
|
||
},
|
||
{
|
||
name: 'PCS-3有功功率',
|
||
attr: 'pcs3Yggl'
|
||
},
|
||
{
|
||
name: 'PCS-4有功功率',
|
||
attr: 'pcs4Yggl'
|
||
}]
|
||
};
|
||
},
|
||
methods: {
|
||
// 查看设备电位表格
|
||
pointDetail(row, dataType) {
|
||
const {deviceId} = row
|
||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'EMS'}, dataType)
|
||
},
|
||
showChart(pointName, deviceId) {
|
||
pointName &&
|
||
this.$refs.pointChart.showChart({pointName, deviceCategory: 'EMS', deviceId});
|
||
},
|
||
getData() {
|
||
this.loading = true;
|
||
getEmsDataList(this.siteId)
|
||
.then((response) => {
|
||
const data = response?.data || {};
|
||
this.list = JSON.parse(JSON.stringify(data));
|
||
})
|
||
.finally(() => (this.loading = false));
|
||
},
|
||
updateData() {
|
||
this.getData();
|
||
},
|
||
init() {
|
||
this.updateData();
|
||
this.updateInterval(this.updateData);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|