power-plan.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <template>
  2. <div class="power-plan">
  3. <tab @select="selectionItemClick" :data="currTabs" class="power-plan-tab" />
  4. <row @click="openDialog('计划电量完成详情', 'genreset/findProjectPlanPower', 'doneLineChart')">
  5. <Col :span="12">
  6. <!-- <percent-card-2 :title="'月完成率' + parseInt((planData.yfdl / planData.yfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl" :ActualValue="planData.yfdljh" :percent="planData.ywcl" /> -->
  7. <percent-card-2 :title="''" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl" :ActualValue="planData.yfdljh" :percent="planData.ywcl" />
  8. </Col>
  9. <Col :span="12">
  10. <!-- <percent-card-2 :title="'年完成率' + parseInt((planData.nfdl / planData.nfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl" :ActualValue="planData.nfdljh" :percent="planData.nwcl" /> -->
  11. <percent-card-2 :title="''" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl" :ActualValue="planData.nfdljh" :percent="planData.nwcl" />
  12. </Col>
  13. </row>
  14. </div>
  15. </template>
  16. <script>
  17. import Col from "@/components/coms/grid/col.vue";
  18. import Row from "@/components/coms/grid/row.vue";
  19. import Tab from "@/components/coms/tabs/tab.vue";
  20. import PercentCard2 from "../../../components/coms/cards/percent-card-2.vue";
  21. export default {
  22. components: { Row, Col, Tab, PercentCard2 },
  23. data () {
  24. return {
  25. planData: {},
  26. wpId: "",
  27. showTitle:"",
  28. // tab项
  29. tabs: [
  30. {
  31. id: "1",
  32. text: ""
  33. }
  34. ],
  35. // 月计划完成率
  36. monthPlan: {
  37. plan: 100,
  38. actual: 40,
  39. },
  40. // 年计划完成率
  41. yearPlan: {
  42. plan: 100,
  43. actual: 25,
  44. },
  45. };
  46. },
  47. props: {
  48. showSingle: {
  49. type: Boolean,
  50. default: false,
  51. },
  52. data: {
  53. type: Object,
  54. default: () => { }
  55. },
  56. id:{
  57. type: String,
  58. default: ""
  59. },
  60. title:{
  61. type: String,
  62. default: ""
  63. }
  64. },
  65. computed: {
  66. currTabs() {
  67. if (this.showSingle) {
  68. return [
  69. {
  70. id: "1",
  71. text: "风电",
  72. },
  73. ];
  74. } else return this.tabs;
  75. },
  76. },
  77. mounted() {
  78. this.planData = this.data;
  79. this.wpId = this.id;
  80. this.tabs[0].text = this.title;
  81. },
  82. methods: {
  83. selectionItemClick (item) {
  84. // 点击tab选项 模拟数据变化
  85. // 动态改变子组件数据变化
  86. this.monthPlan = {
  87. plan: 100,
  88. actual: 25,
  89. };
  90. this.yearPlan = {
  91. plan: 100,
  92. actual: 45,
  93. };
  94. },
  95. openDialog(dialogTitle, subUrl, dialogType){
  96. let that = this;
  97. that.API.requestData({
  98. method: "POST",
  99. subUrl,
  100. data: {
  101. id:that.wpId
  102. },
  103. success (res) {
  104. let key = [{
  105. key:"value1",
  106. title:"月计划发电量"
  107. }, {
  108. key:"value2",
  109. title:"年计划发电量"
  110. }, {
  111. key:"value3",
  112. title:"月发电量"
  113. }, {
  114. key:"value4",
  115. title:"年发电量"
  116. }];
  117. let doneLineChartData = {
  118. // 图表所用单位
  119. units: [""],
  120. value: [],
  121. };
  122. key.forEach((keyEle, keyIndex)=>{
  123. doneLineChartData.value.push({
  124. title: keyEle.title,
  125. yAxisIndex: 0, // 使用单位
  126. value: []
  127. });
  128. res.data.forEach(ele => {
  129. doneLineChartData.value[keyIndex].value.push({
  130. text: ele.name,
  131. value: ele[keyEle.key]
  132. });
  133. });
  134. });
  135. that.$emit("chartClick", { dialogTitle, dialogType, data: doneLineChartData });
  136. }
  137. });
  138. },
  139. },
  140. watch: {
  141. data (res) {
  142. this.planData = res;
  143. },
  144. id(res){
  145. this.wpId = res;
  146. },
  147. title(res){
  148. this.tabs[0].text = res;
  149. }
  150. }
  151. };
  152. </script>
  153. <style lang="less">
  154. .power-plan {
  155. padding: 0 1.481vh;
  156. .power-plan-tab {
  157. margin-bottom: 2.222vh;
  158. }
  159. }
  160. </style>