From 86161ef9429e9e061b855ce391ee146cb934b6d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Fri, 5 Aug 2022 10:42:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(=E5=8A=B3?=
 =?UTF-8?q?=E5=8A=A1=E7=AE=A1=E7=90=86):=E5=87=BA=E5=8B=A4=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../laborManage/centerBottom.vue              |  14 +-
 .../projectHuScreen/laborManage/centerTop.vue | 136 +++++++++++++++---
 2 files changed, 123 insertions(+), 27 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/centerBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/centerBottom.vue
index dbef0866..943536da 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/centerBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/centerBottom.vue
@@ -50,18 +50,18 @@ components: { Card },
 .contents{
   display: flex;
   flex-flow: wrap;
-  justify-content: space-between;
-  height: 110px;
+  justify-content: center;
+  height: 48%;
   .smallBox{
     background: linear-gradient(to top, #173b51, #132f44, #0e2135);
     border-radius: 5px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    margin-left: 7px;
+    margin-top: 2%;
+    margin-bottom: 1%;
+    margin-left: 15px;
     width: 18%;
     .left{
-      width: 50px;
-      height: 70px;
+      width: 30%;
+      height: 90%;
       margin:5px;
       background-color: #fff;
     }
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/centerTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/centerTop.vue
index c061003c..530faada 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/centerTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/centerTop.vue
@@ -1,14 +1,37 @@
 <template>
-<!-- 出勤统计 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <!-- 出勤统计 -->
+  <Card :title="title">
+    <div class="contents">
+      <div>
+        <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>
+        </div>
+      </div>
+      <div class="point botBox"></div>
+      <span class="smallTit">企业出勤排名</span>
+      <div class="topTit">
+        <div class="blue"></div>
+        <span>在场</span>
+        <div class="purple"></div>
+        <span>总人数</span>
+      </div>
+    </div>
+   <div class="mychart">
+      <JBarChart :xData="xData" :series="series" :color="color" :grid="grid" />
+    </div>
+  </Card>
 </template>
 
 <script>
+import Card from "../components/Card.vue";
+import JBarChart from '../jChart/bar/JBarChart.vue'
 export default {
-
+  components: { Card,JBarChart },
   props: {
     title: {
       type: String,
@@ -17,26 +40,99 @@ 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" }
+      ],
+      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%']
     };
-  },
-
-
-}
+  }
+};
 </script>
 
 <style lang="less" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
+.contents {
+  margin: 20px 0px 20px 30px;
 
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
+  .point {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #5be1f5;
+    display: inline-block;
   }
+  .smallTit {
+    color: #51cadd;
+    font-size: 12px;
+    margin-left: 15px;
+  }
+  .box {
+    display: flex;
+    flex-flow: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 95%;
+    height: 40%;
+    margin-left: 6%;
+    margin-top: 2%;
+  }
+  .outBox {
+    width: 33%;
+    height: 33%;
+    margin-bottom: 10px;
+    .name {
+      height: 50px;
+      width: 50%;
+      line-height: 40px;
+      margin-right: 35px;
+    }
+    .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;
+  }
+  .topTit {
+    margin-top: 20px;
+    font-size: 12px;
+    color: #5d6674;
+    .blue,
+    .purple {
+      display: inline-block;
+      width: 15px;
+      height: 5px;
+      border-radius: 10px;
+      margin-left: 30px;
+      margin-right: 5px;
+      background-color: #5be2f6;
+    }
+    .purple {
+      background-color: #5181f7;
+    }
+  }
+}
+.mychart {
+  width: 100%;
+  height: 40%;
 }
 </style>