jn_sis_zhfx/src/views/Home/components/power-review-home.vue

<template>
  <div class="power-review">
    <Row type="flex" justify="space-between" :align="'middle'">
      <!-- 功率复核 PowerLoad -->
      <Col v-for="item in PowerLoad" :key="item" :span="6">
        <dash-pie-chart
          :title="item.title"
          :unit="item.unit"
          :value="item.value"
          :max="item.max"
          height="98px"
          width="100%"
          :color="type == 0 || type == -1 ? 'green' : 'orange'"
          @click="openDialog(item.dialogTitle, item.unit)"
        />
      </Col>
    </Row>
  </div>
</template>

<script>
import Col from "@/components/coms/grid/col.vue";
import Row from "../../../components/coms/grid/row.vue";
import DashPieChart from "@/components/chart/pie/dash-pie-chart.vue";
import { FindGroupRealtime } from "@/api/home/home.js";
import dayjs from "dayjs";
export default {
  components: {
    Row,
    Col,
    DashPieChart,
  },

  data() {
    return {
      // 功率复核数据
      PowerLoad: [],
      valuelist: [
        {
          value: "SSZGL",
          name: "清洁能源实时功率详情",
          code: "value1",
          sign: 1,
        },
        {
          value: "SSZGL",
          name: "风电实时功率详情",
          code: "value2",
          sign: 1,
        },
        {
          value: "SSZGL",
          name: "光伏实时功率详情",
          code: "value3",
          sign: 1,
        },
        {
          value: "SSPJFS",
          name: "实时风速",
          code: "value4",
        },
        {
          value: "RPJGZD",
          name: "光照强度",
          code: "value6",
        },
        {
          value: "SSZGL",
          name: "实际功率",
          code: "value1",
        },
        {
          value: "FNLYL",
          name: "风能利用率",
          code: "value7",
        },
        {
          value: "FNLYL",
          name: "光能利用率",
          code: "value7",
        },
      ],
      wpId: "",
    };
  },

  props: {
    type: {
      type: Number,
      default: 0,
    },
    data: {
      type: Array,
      default: () => [],
    },
    id: {
      type: String,
      defaylt: "",
    },
  },

  mounted() {
    this.PowerLoad = this.data;
    this.wpId = this.id;
  },

  methods: {
    openDialog(dialogTitle, unit) {
      let obj = this.valuelist.find((item) => item.name == dialogTitle);
      let params = {
        wpId: this.wpId,
        uniformCode: obj.value,
      };

      FindGroupRealtime(params).then(({ data }) => {
        this.$emit("chartClick", {
          dialogTitle,
          //   dialogType,
          data: data.map((item) => {
            return {
              dateTime: dayjs()
                .startOf("date")
                .add(item.hours, "hour")
                .format("MM-DD HH:mm"),
              value: item[obj.code],
            };
          }),
          chartName: obj.sign ? "实际功率" : obj.dialogTitle,
          unit,
        });
      });
    },
  },

  watch: {
    data(res) {
      this.PowerLoad = res;
    },
    id(res) {
      this.wpId = res;
    },
  },
};
</script>

<style lang="less" scoped>
.power-review {
  padding: 15px 10px 10px 10px;
}
.col + .col {
  margin-left: 0px;
}
</style>