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

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

@@ -21,7 +21,7 @@
         <span>总人数</span>
       </div>
     </div>
-   <div class="mychart">
+    <div class="mychart">
       <JBarChart :xData="xData" :series="series" :color="color" :grid="grid" />
     </div>
   </Card>
@@ -29,10 +29,10 @@
 
 <script>
 import Card from "../components/Card.vue";
-import JBarChart from '../jChart/bar/JBarChart.vue'
-import { selectProjectWorkerTypeTotalListApi,} from "@/assets/js/api/dataBoard.js";
+import JBarChart from "../jChart/bar/JBarChart.vue";
+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: ['中建一局', '中建一局', '中建一局', '中建一局','中建一局', '中建一局', '中建一局', '中建一局'],
-      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%']
+      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%"]
     };
   },
-  created(){
+  created() {
     this.getWokerType();
   },
-  methods:{
+  methods: {
     //获取工种出勤统计
     getWokerType() {
       selectProjectWorkerTypeTotalListApi({
-        projectSn: this.$store.state.projectSn,
-      }).then((res) => {
+        projectSn: this.$store.state.projectSn
+      }).then(res => {
         console.log(res);
         this.workerTypeList = res.result;
       });
-    },
+    }
   }
 };
 </script>
@@ -92,30 +104,30 @@ export default {
     margin-top: 2%;
     overflow: auto;
 
-  .outBox {
-    width: 33%;
-    height: 33%;
-    margin-bottom: 10px;
-    .name {
-      display: inline-block;
-      height: 50px;
-      width: 35%;
-      line-height: 40px;
-      margin-right: 35px;
-      text-align: right;
+    .outBox {
+      width: 33%;
+      height: 33%;
+      margin-bottom: 10px;
+      .name {
+        display: inline-block;
+        height: 50px;
+        width: 35%;
+        line-height: 40px;
+        margin-right: 35px;
+        text-align: right;
+      }
+      .num {
+        display: inline-block;
+        width: 30%;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        color: #4fc5d9;
+        background-image: url(~@/assets/images/projectImg/numBgc.png);
+        background-size: 100%;
+        background-repeat: no-repeat;
+      }
     }
-    .num {
-      display: inline-block;
-      width: 30%;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      color: #4fc5d9;
-      background-image: url(~@/assets/images/projectImg/numBgc.png);
-      background-size: 100%;
-      background-repeat: no-repeat;
-    }
-   }
   }
   .botBox {
     margin-top: 20px;
@@ -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>