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

<template>
  <div class="power-plan">
    <tab @select="selectionItemClick" :data="tabs" class="power-plan-tab" />
    <row>
      <Col :span="12">
      <percent-card-2 :title="'月完成率' + parseInt((planData.yfdl / planData.yfdljh * 100)) + '%'" 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" />
      </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: {},
      // tab项
      tabs: [
        {
          id: "1",
          text: "风电"
        }
      ],
      // 月计划完成率
      monthPlan: {
        plan: 100,
        actual: 40,
      },
      // 年计划完成率
      yearPlan: {
        plan: 100,
        actual: 25,
      },
    };
  },

  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },

  mounted () {
    this.planData = this.data;
  },

  methods: {
    selectionItemClick (item) {
      // 点击tab选项 模拟数据变化
      // 动态改变子组件数据变化
      this.monthPlan = {
        plan: 100,
        actual: 25,
      };
      this.yearPlan = {
        plan: 100,
        actual: 45,
      };
    },
  },

  watch: {
    data (res) {
      this.planData = res;
    }
  }
};
</script>

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