jn_sis_zhfx/src/views/Home/components/home/gjzb-pie-chart.vue

<template>
  <!-- 功率复核 PowerLoad -->
  <div
    v-for="item in PowerLoad"
    :key="item"
    style="width: 30%; height: 100%"
    class="power-item"
  >
    <dash-pie-chart
      :title="item.title"
      :unit="item.unit"
      :value="item.value"
      :max="item.max"
      height="100%"
      width="100%"
      :color="type == 0 || type == -1 ? 'green' : 'orange'"
      @click="openDialog(item.dialogTitle, item.unit)"
    />
    <div class="title"></div>
  </div>
</template>

<script>
import Col from "@/components/coms/grid/col.vue";
// import Row from "../../../components/coms/grid/row.vue";
import DashPieChart from "@/views/Home/components/home/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(item.time).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-item {
  flex: 1;
}
.power-item + .power-item {
  margin-left: 0.3vw; //10px
}
.power-review {
  padding: 15px 10px 10px 10px;
}
.col + .col {
  margin-left: 0px;
}
</style>