emsfront/src/views/ems/dzjk/sbjk/pcs/index.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="{
          'timing-card-container':!['0','2'].includes(pcsItem.workStatus),
          'warning-card-container':pcsItem.workStatus === '2',
          'running-card-container':pcsItem.workStatus === '0'
        }"
          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 === '1' ? '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},
  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: "&#8451;",
          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: "&#8451;",
          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>