湖里大屏(进度计划):统计计划模块 接口对接

src/views/projectAdmin/jlw/planProgress/leftCenter.vue

@@ -1,16 +1,16 @@
 <template>
-<!-- 状态统计 -->
-<div class="containerBox">
+  <!-- 状态统计 -->
+  <div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
     <div class="mychart">
       <JBarChart :xData="xData" :yData="yData" :color="color" :grid="grid" :title="{ text: '全部' }" />
     </div>
-
-</div>
+  </div>
 </template>
 
 <script>
-import JBarChart from '../jChart/bar/JBarChart.vue'
+import JBarChart from "../jChart/bar/JBarChart.vue";
+import { selectProgressItemStatisticsApi } from "@/assets/js/api/dataBoard.js";
 export default {
   components: { JBarChart },
 
@@ -22,39 +22,52 @@ export default {
   },
   data() {
     return {
-      xData:['未开始','进行中','已完成','延期'],
-      yData:[
-        {
-          value: 170,
-          itemStyle: {
-            color: '#a9adb6'
-          }
-        },
-        {
-          value: 320,
-          itemStyle: {
-            color: '#557dee'
-          }
-        },
-        {
-          value: 270,
-          itemStyle: {
-            color: '#43d7b5'
-          }
-        },
-        {
-          value: 310,
-          itemStyle: {
-            color: '#ff6c7f'
-          }
-        }],
-      color:['#a9adb6','#557dee','#43d7b5','#ff6c7f'],
-      grid:['10%','5%','7%','5%']
+      xData: ["未开始", "进行中", "已完成", "延期"],
+      yData:[],
+      color: ["#a9adb6", "#557dee", "#43d7b5", "#ff6c7f"],
+      grid: ["10%", "5%", "7%", "5%"]
     };
   },
-
-
-}
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData() {
+      let data = {
+        projectSn: this.$store.state.projectSn
+      };
+      selectProgressItemStatisticsApi(data).then(res => {
+        console.log("res", res);
+        this.yData = [
+            {
+          value: res.result.notStartNum,
+          itemStyle: {
+            color: "#a9adb6"
+          }
+        },
+        {
+          value: res.result.executingNum,
+          itemStyle: {
+            color: "#557dee"
+          }
+        },
+        {
+          value: res.result.completeNum,
+          itemStyle: {
+            color: "#43d7b5"
+          }
+        },
+        {
+          value: res.result.overdueNum,
+          itemStyle: {
+            color: "#ff6c7f"
+          }
+        }
+        ]
+      });
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
@@ -69,7 +82,7 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
-  .mychart{
+  .mychart {
     width: 100%;
     height: 95%;
   }