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

<template>
  <div class="power-plan">
    <!-- <tab @select="selectionItemClick" :data="currTabs" class="power-plan-tab" /> -->
    <row
      style="margin-top: 47px"
      @click="
        openDialog(
          '计划电量完成详情',
          'genreset/findProjectPlanPower',
          'doneLineChart'
        )
      "
    >
      <Col :span="12">
        <!-- <percent-card-2 :title="'月完成率' + parseInt((planData.yfdl / planData.yfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl" :ActualValue="planData.yfdljh" :percent="planData.ywcl" /> -->
        <percent-card-2
          :title="''"
          TotalText="月实际"
          ActualText="月计划"
          :TotalValue="planData.yfdl"
          :ActualValue="planData.yfdljh"
          :percent="planData.ywcl"
        />
      </Col>
      <Col :span="12">
        <!-- <percent-card-2 :title="'年完成率' + parseInt((planData.nfdl / planData.nfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl" :ActualValue="planData.nfdljh" :percent="planData.nwcl" /> -->
        <percent-card-2
          :title="''"
          TotalText="年实际"
          ActualText="年计划"
          :TotalValue="planData.nfdl"
          :ActualValue="planData.nfdljh"
          :percent="planData.nwcl"
        />
      </Col>
    </row>
  </div>
</template>

<script>
import Col from "@/components/coms/grid/col.vue";
import Row from "@/components/coms/grid/row.vue";
import Tab from "@/components/coms/tabs/tab.vue";
import PercentCard2 from "../../../components/coms/cards/percent-card-2.vue";
export default {
  components: { Row, Col, Tab, PercentCard2 },
  data() {
    return {
      planData: {},
      wpId: "",
      showTitle: "",
      // tab项
      tabs: [
        {
          id: "1",
          text: "",
        },
      ],
      // 月计划完成率
      monthPlan: {
        plan: 100,
        actual: 40,
      },
      // 年计划完成率
      yearPlan: {
        plan: 100,
        actual: 25,
      },
    };
  },
  props: {
    showSingle: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {},
    },
    id: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  computed: {
    currTabs() {
      if (this.showSingle) {
        return [
          {
            id: "1",
            text: "风电",
          },
        ];
      } else return this.tabs;
    },
  },
  mounted() {
    this.planData = this.data;
    this.wpId = this.id;
    this.tabs[0].text = this.title;
  },
  methods: {
    selectionItemClick(item) {
      // 点击tab选项 模拟数据变化
      // 动态改变子组件数据变化
      this.monthPlan = {
        plan: 100,
        actual: 25,
      };
      this.yearPlan = {
        plan: 100,
        actual: 45,
      };
    },

    openDialog(dialogTitle, subUrl, dialogType) {
      let that = this;
      
      that.API.requestData({
        method: "POST",
        subUrl,
        data: {
          id: that.wpId,
        },
        success(res) {
          let key = [
            {
              key: "value1",
              title: "月计划发电量",
            },
            {
              key: "value2",
              title: "年计划发电量",
            },
            {
              key: "value3",
              title: "月发电量",
            },
            {
              key: "value4",
              title: "年发电量",
            },
          ];

          let doneLineChartData = {
            // 图表所用单位
            units: [""],
            value: [],
          };

          key.forEach((keyEle, keyIndex) => {
            doneLineChartData.value.push({
              title: keyEle.title,
              yAxisIndex: 0, // 使用单位
              value: [],
            });

            res.data.forEach((ele) => {
              doneLineChartData.value[keyIndex].value.push({
                text: ele.name,
                value: ele[keyEle.key],
              });
            });
          });

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

  watch: {
    data(res) {
      this.planData = res;
    },
    id(res) {
      this.wpId = res;
    },
    title(res) {
      this.tabs[0].text = res;
    },
  },
};
</script>

<style lang="less">
.power-plan {
  padding: 0 1.481vh;
  .power-plan-tab {
    margin-bottom: 2.222vh;
  }
}
</style>