328 lines
11 KiB
Vue
328 lines
11 KiB
Vue
<template>
|
||
<div v-loading="loading" class="pcs-ems-dashboard-editor-container">
|
||
<!-- 顶部六个方块-->
|
||
<real-time-base-info :data="runningHeadData"/>
|
||
<div
|
||
v-for="(pcsItem, pcsIndex) in pcsList"
|
||
:key="pcsIndex + 'PcsHome'"
|
||
style="margin-bottom: 25px"
|
||
>
|
||
<el-card
|
||
:class="{
|
||
'warning-card-container': pcsItem.workStatus === '1',
|
||
'timing-card-container': pcsItem.workStatus === '2',
|
||
'running-card-container': !['1', '2'].includes(pcsItem.workStatus),
|
||
}"
|
||
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||
shadow="always"
|
||
>
|
||
<div slot="header">
|
||
<span class="large-title"
|
||
>{{ pcsItem.deviceName }}</span
|
||
>
|
||
<div class="info">
|
||
<div>
|
||
{{
|
||
$store.state.ems.communicationStatusOptions[
|
||
pcsItem.communicationStatus
|
||
]
|
||
}}
|
||
</div>
|
||
<div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
|
||
</div>
|
||
<div class="alarm">
|
||
<pcs-switch style="margin-right:10px;"
|
||
:round="true"
|
||
size="small"
|
||
type="danger"
|
||
:data="pcsItem"
|
||
@updateSuccess="init"/>
|
||
<el-button type="primary" round size="small" style="margin-right:20px;"
|
||
@click="pointDetail(pcsItem,'point')">
|
||
详细
|
||
</el-button>
|
||
<el-badge :value="pcsItem.alarmNum || 0" class="item">
|
||
<i
|
||
class="el-icon-message-solid alarm-icon"
|
||
@click="pointDetail(pcsItem,'alarmPoint')"
|
||
></i>
|
||
</el-badge>
|
||
</div>
|
||
</div>
|
||
<div class="descriptions-main">
|
||
<el-descriptions :colon="false" :column="4" direction="vertical">
|
||
<el-descriptions-item
|
||
:contentClassName="`descriptions-direction ${
|
||
pcsItem.workStatus === '0' ? 'save' : 'danger'
|
||
}`"
|
||
:span="1"
|
||
label="工作状态"
|
||
labelClassName="descriptions-label"
|
||
>{{
|
||
$store.state.ems.workStatusOptions[pcsItem.workStatus]
|
||
}}
|
||
</el-descriptions-item
|
||
>
|
||
<el-descriptions-item
|
||
:span="1"
|
||
contentClassName="descriptions-direction"
|
||
label="并网状态"
|
||
labelClassName="descriptions-label"
|
||
>{{
|
||
$store.state.ems.gridStatusOptions[pcsItem.gridStatus]
|
||
}}
|
||
</el-descriptions-item
|
||
>
|
||
<el-descriptions-item
|
||
:contentClassName="`descriptions-direction ${
|
||
pcsItem.deviceStatus === '2' ? 'save' : 'danger'
|
||
}`"
|
||
:span="1"
|
||
label="设备状态"
|
||
labelClassName="descriptions-label"
|
||
>{{
|
||
$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]
|
||
}}
|
||
</el-descriptions-item
|
||
>
|
||
<el-descriptions-item
|
||
:span="1"
|
||
contentClassName="descriptions-direction"
|
||
label="控制模式"
|
||
labelClassName="descriptions-label"
|
||
>{{
|
||
$store.state.ems.controlModeOptions[pcsItem.controlMode]
|
||
}}
|
||
</el-descriptions-item
|
||
>
|
||
</el-descriptions>
|
||
</div>
|
||
<div class="descriptions-main descriptions-main-bg-color">
|
||
<el-descriptions
|
||
:colon="false"
|
||
:column="4"
|
||
contentClassName="descriptions-direction"
|
||
direction="vertical"
|
||
labelClassName="descriptions-label"
|
||
>
|
||
<el-descriptions-item
|
||
v-for="(item, index) in infoData"
|
||
:key="index + 'pcsInfoData'"
|
||
:label="item.label"
|
||
:span="1"
|
||
>
|
||
<span
|
||
class="pointer"
|
||
@click="
|
||
showChart(item.pointName || '', pcsItem.deviceId)
|
||
"
|
||
>
|
||
{{ pcsItem[item.attr] | formatNumber }}
|
||
<span v-if="item.unit" v-html="item.unit"></span>
|
||
</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div
|
||
v-for="(item, index) in pcsItem.pcsBranchInfoList"
|
||
:key="index + 'pcsBranchInfoList'"
|
||
class="descriptions-main"
|
||
>
|
||
<el-descriptions
|
||
:colon="false"
|
||
:column="4"
|
||
contentClassName="descriptions-direction keep"
|
||
direction="vertical"
|
||
labelClassName="descriptions-label"
|
||
>
|
||
<el-descriptions-item
|
||
:label="'支路' + (index + 1)"
|
||
:span="4"
|
||
contentClassName="descriptions-direction keep"
|
||
labelClassName="descriptions-label"
|
||
>{{ item.dischargeStatus }}
|
||
</el-descriptions-item
|
||
>
|
||
<el-descriptions-item
|
||
:span="1"
|
||
contentClassName="descriptions-direction"
|
||
label="直流功率"
|
||
labelClassName="descriptions-label"
|
||
>
|
||
<span
|
||
class="pointer"
|
||
@click="showChart('直流功率', item.deviceId,true)"
|
||
>{{ item.dcPower }}kW</span
|
||
>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
:span="1"
|
||
contentClassName="descriptions-direction"
|
||
label="直流电压"
|
||
labelClassName="descriptions-label"
|
||
>
|
||
<span
|
||
class="pointer"
|
||
@click="showChart('直流电压', item.deviceId,true)"
|
||
>{{ item.dcVoltage }}V</span
|
||
>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
:span="1"
|
||
contentClassName="descriptions-direction"
|
||
label="直流电流"
|
||
labelClassName="descriptions-label"
|
||
>
|
||
<span
|
||
class="pointer"
|
||
@click="showChart('直流电流', item.deviceId,true)"
|
||
>{{ item.dcCurrent }}A</span
|
||
>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<el-empty v-show="pcsList.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 RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||
import {getPcsDetailInfo, getRunningHeadInfo} from "@/api/ems/dzjk";
|
||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||
import PcsSwitch from "@/views/ems/site/sblb/PcsSwitch.vue";
|
||
|
||
export default {
|
||
name: "DzjkSbjkPcs",
|
||
components: {RealTimeBaseInfo, pointChart, PointTable, PcsSwitch},
|
||
mixins: [getQuerySiteId, intervalUpdate],
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
runningHeadData: {}, //运行信息
|
||
pcsList: [],
|
||
infoData: [
|
||
{
|
||
label: "总交流有功电率",
|
||
attr: "totalActivePower",
|
||
unit: "kW",
|
||
pointName: "总交流有功电率",
|
||
},
|
||
{
|
||
label: "当天交流充电量",
|
||
attr: "dailyAcChargeEnergy",
|
||
unit: "kWh",
|
||
pointName: "当天交流充电量 (kWh)",
|
||
},
|
||
{label: "A相电压", attr: "aPhaseVoltage", unit: "V", pointName: ""},
|
||
{
|
||
label: "A相电流",
|
||
attr: "aPhaseCurrent",
|
||
unit: "A",
|
||
pointName: "A相电流",
|
||
},
|
||
{
|
||
label: "总交流无功电率",
|
||
attr: "totalReactivePower",
|
||
unit: "kVar",
|
||
pointName: "总交流无功电率",
|
||
},
|
||
{
|
||
label: "当天交流放电量",
|
||
attr: "dailyAcDischargeEnergy",
|
||
unit: "kWh",
|
||
pointName: "当天交流放电量 (kWh)",
|
||
},
|
||
{label: "B相电压", attr: "bPhaseVoltage", unit: "V", pointName: ""},
|
||
{
|
||
label: "B相电流",
|
||
attr: "bPhaseCurrent",
|
||
unit: "A",
|
||
pointName: "B相电流",
|
||
},
|
||
{
|
||
label: "总交流视在功率",
|
||
attr: "totalApparentPower",
|
||
unit: "kVA",
|
||
pointName: "总交流视在功率",
|
||
},
|
||
{
|
||
label: "PCS模块温度",
|
||
attr: "pcsModuleTemperature",
|
||
unit: "℃",
|
||
pointName: "",
|
||
},
|
||
{label: "C相电压", attr: "cPhaseVoltage", unit: "V", pointName: ""},
|
||
{
|
||
label: "C相电流",
|
||
attr: "cPhaseCurrent",
|
||
unit: "A",
|
||
pointName: "C相电流",
|
||
},
|
||
{
|
||
label: "总交流功率因数",
|
||
attr: "totalPowerFactor",
|
||
unit: "",
|
||
pointName: "总交流功率因数",
|
||
},
|
||
{
|
||
label: "PCS环境温度",
|
||
attr: "pcsEnvironmentTemperature",
|
||
unit: "℃",
|
||
pointName: "",
|
||
},
|
||
{
|
||
label: "交流频率",
|
||
attr: "acFrequency",
|
||
unit: "Hz",
|
||
pointName: "交流频率",
|
||
},
|
||
],
|
||
pcsBranchList: [], //pcs的支路列表
|
||
};
|
||
},
|
||
methods: {
|
||
// 查看设备电位表格
|
||
pointDetail(row, dataType) {
|
||
const {deviceId} = row
|
||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'PCS'}, dataType)
|
||
},
|
||
showChart(pointName, deviceId, isBranch = false) {
|
||
pointName &&
|
||
this.$refs.pointChart.showChart({pointName, deviceCategory: isBranch ? 'BRANCH' : 'PCS', deviceId});
|
||
},
|
||
//6个方块数据
|
||
getRunningHeadData() {
|
||
getRunningHeadInfo(this.siteId).then((response) => {
|
||
this.runningHeadData = response?.data || {};
|
||
});
|
||
},
|
||
getPcsList() {
|
||
this.loading = true;
|
||
getPcsDetailInfo(this.siteId)
|
||
.then((response) => {
|
||
const data = response?.data || {};
|
||
this.pcsList = JSON.parse(JSON.stringify(data));
|
||
})
|
||
.finally(() => (this.loading = false));
|
||
},
|
||
updateData() {
|
||
this.getRunningHeadData();
|
||
this.getPcsList();
|
||
},
|
||
init() {
|
||
this.updateData();
|
||
this.updateInterval(this.updateData);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|