湖里大屏(首页):出勤统计接口对接

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

@@ -6,9 +6,9 @@
         <div class="point"></div>
         <span class="smallTit">工种出勤统计</span>
         <div class="box">
-          <div class="outBox" v-for="(item,index) in dataList" :key="index">
-            <span class="name">{{item.name}}</span>
-            <p class="num">{{item.num}}</p>
+          <div class="outBox" v-for="(item,index) in workerTypeList" :key="index">
+            <span class="name">{{item.typeName}}</span>
+            <p class="num">{{item.workerNum}}</p>
           </div>
         </div>
       </div>
@@ -30,6 +30,7 @@
 <script>
 import Card from "../components/Card.vue";
 import JBarChart from '../jChart/bar/JBarChart.vue'
+import { selectProjectWorkerTypeTotalListApi,} from "@/assets/js/api/dataBoard.js";
 export default {
   components: { Card,JBarChart },
   props: {
@@ -40,22 +41,26 @@ export default {
   },
   data() {
     return {
-      dataList: [
-        { name: "钢筋工", num: "679" },
-        { name: "钢筋工", num: "679" },
-        { name: "钢筋工", num: "679" },
-        { name: "钢筋工", num: "679" },
-        { name: "钢筋工", num: "679" },
-        { name: "钢筋工", num: "679" },
-        { name: "钢筋工", num: "679" },
-        { name: "钢筋工", num: "679" },
-        { name: "钢筋工", num: "679" }
-      ],
+      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%']
     };
+  },
+  created(){
+    this.getWokerType();
+  },
+  methods:{
+    //获取工种出勤统计
+    getWokerType() {
+      selectProjectWorkerTypeTotalListApi({
+        projectSn: this.$store.state.projectSn,
+      }).then((res) => {
+        console.log(res);
+        this.workerTypeList = res.result;
+      });
+    },
   }
 };
 </script>
@@ -79,22 +84,25 @@ export default {
   .box {
     display: flex;
     flex-flow: wrap;
-    justify-content: center;
+    justify-content: left;
     align-items: center;
     width: 95%;
-    height: 40%;
-    margin-left: 6%;
+    height: 170px;
+    margin-left: 3%;
     margin-top: 2%;
-  }
+    overflow: auto;
+
   .outBox {
     width: 33%;
     height: 33%;
     margin-bottom: 10px;
     .name {
+      display: inline-block;
       height: 50px;
-      width: 50%;
+      width: 35%;
       line-height: 40px;
       margin-right: 35px;
+      text-align: right;
     }
     .num {
       display: inline-block;
@@ -107,6 +115,7 @@ export default {
       background-size: 100%;
       background-repeat: no-repeat;
     }
+   }
   }
   .botBox {
     margin-top: 20px;
@@ -130,6 +139,9 @@ export default {
     }
   }
 }
+::-webkit-scrollbar {
+width:3px;
+}
 .mychart {
   width: 100%;
   height: 40%;