sis_zhfx/src/views/Home/components/power-review.vue

<template>
  <div class="power-review">
    <Row type="flex" justify="center" :align="'middle'">
      <!-- 功率复核 PowerLoad -->
      <Col v-for="item in PowerLoad" :key="item" :span="6">
        <dash-pie-chart
          :title="item.title"
          :value="item.value"
          :max="item.max"
          height="10vh"
          @click="
            openDialog(
              item.dialogTitle,
              item.subUrl,
              item.targetName,
              item.dialogType
            )
          "
        />
      </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";

export default {
  components: {
    Row,
    Col,
    DashPieChart,
  },

  data() {
    return {
      // 功率复核数据
      PowerLoad: [],
      wpId: "",
    };
  },

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

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

  methods: {
    openDialog(dialogTitle, subUrl, targetName, dialogType) {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl,
        data: {
          id: that.wpId,
          targetName,
        },
        success(res) {
          let powerLineChartData = {
            // 图表所用单位
            units: [""],
            value: [],
          };

          res.data.forEach((pEle, pIndex) => {
            powerLineChartData.value.push({
              title: pEle[0].name,
              yAxisIndex: 0,
              smooth: true,
              value: [],
            });

            pEle.forEach((cEle) => {
              powerLineChartData.value[pIndex].value.push({
                text: new Date(cEle.time).formatDate("hh:mm:ss"),
                value: cEle.value1,
              });
            });
          });

          // let powerLineChartData = [];

          // res.data.forEach((pEle, pIndex) => {
          //   powerLineChartData.push({
          //     title: pEle[0].name,
          //     smooth: true,
          //     value: [],
          //   });

          //   pEle.forEach((cEle) => {
          //     powerLineChartData[pIndex].value.push({
          //       text: new Date(cEle.time).formatDate("hh:mm:ss"),
          //       value: cEle.value1,
          //     });
          //   });
          // });

          that.$emit("chartClick", {
            dialogTitle,
            dialogType,
            data: powerLineChartData,
          });
        },
      });
    },
  },

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

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