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 @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>