emsfront/src/views/ems/dzjk/home/ClInfo.vue

<template>
  <el-card
    shadow="always"
    class="common-card-container common-card-container-body-no-padding"
  >
    <div slot="header">
      <span class="card-title">策略信息</span>
    </div>
    <!-- <el-empty :image-size="100" ></el-empty> -->
    <div
      style="
        box-sizing: border-box;
        height: 250px;
        padding: 20px 15px;
        overflow-y: auto;
      "
    >
      <el-descriptions class="home-normal-info" :column="2">
        <el-descriptions-item size="mini" label="模板名称">{{
          info.mainStrategyName || "-"
        }}</el-descriptions-item>
        <el-descriptions-item size="mini" label="SOC限制">{{
          mainInfo.sdcLimit === 1 ? "开" : mainInfo.sdcLimit === 0 ? "关" : "-"
        }}</el-descriptions-item>
        <el-descriptions-item size="mini" label="SOC下限（%）">{{
          formatNumber(mainInfo.sdcDown)
        }}</el-descriptions-item>
        <el-descriptions-item size="mini" label="SOC上限（%）">{{
          formatNumber(mainInfo.sdcUp)
        }}</el-descriptions-item>
      </el-descriptions>
      <el-table
        :data="info.siteMonitorDataVo || []"
        border
        size="mini"
        style="width: 100%; margin-top: 15px"
      >
        <el-table-column prop="startTime" label="开始时间"> </el-table-column>
        <el-table-column prop="endTime" label="结束时间"> </el-table-column>
        <el-table-column prop="chargeDischargePower" label="充放功率（kW）">
        </el-table-column>
        <el-table-column prop="chargeStatus" label="充电状态">
          <template slot-scope="scope">
            {{ chargeStatusOptions[scope.row.chargeStatus] }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>
<script>
import { mapState } from "vuex";
import { formatNumber } from "@/filters/ems";
export default {
  props: {
    info: {
      require: true,
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    ...mapState({
      chargeStatusOptions: (state) => state?.ems?.chargeStatusOptions || {},
    }),
    mainInfo() {
      return this.info?.siteMonitorDataVo?.length > 0
        ? this.info.siteMonitorDataVo[0]
        : {};
    },
  },
  data() {
    return {};
  },
  methods: {
    formatNumber,
  },
};
</script>
<style lang="scss" scoped></style>