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="{
          '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"
            >{{ pcsIndex + 1 }}#{{ pcsItem.deviceName }}</span
          >
          <div class="info">
            <div>
              {{
                $store.state.ems.communicationStatusOptions[
                  pcsItem.communicationStatus
                ]
              }}
            </div>
            <div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
          </div>
          <div class="alarm">
            <el-badge :value="pcsItem.alarmNum || 0" class="item">
              <i
                class="el-icon-message-solid"
                style="font-size: 26px; color: #fff; display: block"
              ></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 === '0' ? '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 || '', 'PCS', 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('直流功率', 'PCS分支设备', item.deviceId)"
                >{{ item.dcPower }}kW</span
              >
            </el-descriptions-item>
            <el-descriptions-item
              :span="1"
              contentClassName="descriptions-direction"
              label="直流电压"
              labelClassName="descriptions-label"
            >
              <span
                class="pointer"
                @click="showChart('直流电压', 'PCS分支设备', item.deviceId)"
                >{{ item.dcVoltage }}V</span
              >
            </el-descriptions-item>
            <el-descriptions-item
              :span="1"
              contentClassName="descriptions-direction"
              label="直流电流"
              labelClassName="descriptions-label"
            >
              <span
                class="pointer"
                @click="showChart('直流电流', 'PCS分支设备', item.deviceId)"
                >{{ 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>
    <!--    电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
    <point-chart ref="pointChart" :site-id="siteId" />
  </div>
</template>

<script>
import pointChart from "./../PointChart.vue";
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getRunningHeadInfo, getPcsDetailInfo } from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
  name: "DzjkSbjkPcs",
  components: { RealTimeBaseInfo, pointChart },
  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: {
    showChart(pointName, categoryName, deviceId) {
      console.log("点击查询图表", pointName, categoryName, deviceId);
      pointName &&
        this.$refs.pointChart.showChart({ pointName, categoryName, 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>