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