hb_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";
import api from "@api/cockpit/matrix/index.js";
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.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 data = {
        id: this.wpId,
      };
      api.findInfo(subUrl, data).then((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],
            });
          });
        });

        this.$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>