湖里大屏(质量管理):质量问题接口对接

src/views/projectAdmin/jlw/laborManage/centerTop.vue

@@ -29,10 +29,10 @@
 
 <script>
 import Card from "../components/Card.vue";
-import JBarChart from '../jChart/bar/JBarChart.vue'
+import JBarChart from "../jChart/bar/JBarChart.vue";
-import { selectProjectWorkerTypeTotalListApi,} from "@/assets/js/api/dataBoard.js";
+import { selectProjectWorkerTypeTotalListApi } from "@/assets/js/api/dataBoard.js";
 export default {
-  components: { Card,JBarChart },
+  components: { Card, JBarChart },
   props: {
     title: {
       type: String,
@@ -42,25 +42,37 @@ export default {
   data() {
     return {
       workerTypeList: [],
-      xData: ['中建一局', '中建一局', '中建一局', '中建一局','中建一局', '中建一局', '中建一局', '中建一局'],
+      xData: [
-      series: [{ data: [170, 180,90,70,60,50,50,50,] }, { data: [220,280,190,180,300,200,200,200,] }],
+        "中建一局",
-      color: ['#5be2f6', '#5281f7'],
+        "中建一局",
-      grid: ['10%', '5%', '15%', '5%']
+        "中建一局",
+        "中建一局",
+        "中建一局",
+        "中建一局",
+        "中建一局",
+        "中建一局"
+      ],
+      series: [
+        { data: [170, 180, 90, 70, 60, 50, 50, 50] },
+        { data: [220, 280, 190, 180, 300, 200, 200, 200] }
+      ],
+      color: ["#5be2f6", "#5281f7"],
+      grid: ["10%", "5%", "15%", "5%"]
     };
   },
-  created(){
+  created() {
     this.getWokerType();
   },
-  methods:{
+  methods: {
     //获取工种出勤统计
     getWokerType() {
       selectProjectWorkerTypeTotalListApi({
-        projectSn: this.$store.state.projectSn,
+        projectSn: this.$store.state.projectSn
-      }).then((res) => {
+      }).then(res => {
         console.log(res);
         this.workerTypeList = res.result;
       });
-    },
+    }
   }
 };
 </script>
@@ -140,7 +152,8 @@ export default {
   }
 }
 ::-webkit-scrollbar {
-width:3px;
+  width: 3px;
+  color: #636364;
 }
 .mychart {
   width: 100%;

src/views/projectAdmin/jlw/qualityManage/rightTop.vue

@@ -4,17 +4,17 @@
     <div class="title">{{ title }}</div>
     <div class="charts">
       <div class="chart">
-        <JRingChart :title="{ text: 45, subTitle: '问题总数' }" :color="['#3CABFD']" />
+        <JRingChart :title="{ text: total.totalNum, subTitle: '问题总数' }" :color="['#3CABFD']" />
       </div>
       <div class="chart">
-        <JRingChart :title="{ text: 45, subTitle: '未闭合问题' }" :color="['#557DEE']" />
+        <JRingChart :title="{ text: total.notCloseNum, subTitle: '未闭合问题' }" :color="['#557DEE']" />
       </div>
       <div class="chart">
-        <JRingChart :title="{ text: 45, subTitle: '未整改问题' }" :color="['#FE6C7F']" />
+        <JRingChart :title="{ text: total.rectificationNum, subTitle: '未整改问题' }" :color="['#FE6C7F']" />
       </div>
       <div class="chart">
         <JRingChart
-          :title="{ text: '90%', subTitle: '即时整改问题' }"
+          :title="{ text: total.ratioNum, subTitle: '即时整改问题' }"
           :color="['#557DEE', '#43D7B5']"
           :data="[
             { value: 1, name: '' },
@@ -28,6 +28,7 @@
 
 <script>
 import JRingChart from '../jChart/pie/JRingChart.vue'
+import { selectQualityStatisticsApi } from '@/assets/js/api/dataBoard'
 export default {
   components: { JRingChart },
   props: {
@@ -37,7 +38,34 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      total: {
+        totalNum: 0,
+        notCloseNum: 0,
+        closeNum: 0,
+        rectificationNum:0,
+        ratioNum:0,
+      },
+      
+    }
+  },
+  created(){
+    this.getData()
+  },
+  methods:{
+   //获取数据
+    getData() {
+      let data = {
+        projectSn: this.projectSn
+      }
+      selectQualityStatisticsApi(data).then(res => {
+        console.log('-------',res)
+        this.total = res.result.total
+        let ratio = this.total.totalNum ? ((this.total.closeNum / this.total.totalNum) * 100).toFixed(2) : 0 
+        this.total.ratioNum = ratio + '%'
+        console.log('------------',this.ratioNum)
+      })
+    }
   }
 }
 </script>