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="11.1111vh" @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,
                value: [],
              });

              pEle.forEach(cEle=>{
                powerLineChartData.value[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>