From f6b81e61145ba8ee743164c496a48ced20c90e53 Mon Sep 17 00:00:00 2001
From: yjl <1490736767@qq.com>
Date: Mon, 17 Oct 2022 23:04:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80=E5=A4=A7?=
 =?UTF-8?q?=E5=B1=8F=EF=BC=88=E5=AE=89=E5=85=A8=E7=AE=A1=E7=90=86=EF=BC=89?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fourEngin/components/Card.vue             |   2 +-
 .../fourEngin/security/centerTop.vue          | 543 ++++++++----------
 .../projectAdmin/fourEngin/security/index.vue |  15 +-
 .../fourEngin/security/rightBottom.vue        | 214 +++++++
 4 files changed, 457 insertions(+), 317 deletions(-)
 create mode 100644 src/views/projectAdmin/fourEngin/security/rightBottom.vue

diff --git a/src/views/projectAdmin/fourEngin/components/Card.vue b/src/views/projectAdmin/fourEngin/components/Card.vue
index f69efe8f..a0cf7faf 100644
--- a/src/views/projectAdmin/fourEngin/components/Card.vue
+++ b/src/views/projectAdmin/fourEngin/components/Card.vue
@@ -26,7 +26,7 @@ export default {
     height: 34px;
     line-height: 28px;
     text-align: center;
-    font-size: 18px;
+    font-size: 20px;
     color: #ffffff;
     background-image: url('../assets/images/common/bg-card.png');
     background-size: 100% 100%;
diff --git a/src/views/projectAdmin/fourEngin/security/centerTop.vue b/src/views/projectAdmin/fourEngin/security/centerTop.vue
index 0dd72bb5..2ea1a90d 100644
--- a/src/views/projectAdmin/fourEngin/security/centerTop.vue
+++ b/src/views/projectAdmin/fourEngin/security/centerTop.vue
@@ -1,79 +1,118 @@
 <template>
-  <Card title="人员管理">
+  <Card title="安全教育">
     <div class="containerBox">
-      <div class="topbox">
-        <div class="item">
-          <span>总人数</span>
-          <p>{{ WorkerNum.sumNumber }}</p>
-        </div>
-        <div class="item">
-          <span>实际出勤人数</span>
-          <p>{{ WorkerNum.attendanceNumber }}</p>
-        </div>
-        <div class="item">
-          <span>未出勤人数</span>
-          <p>{{ WorkerNum.noAttendanceNumber }}</p>
-        </div>
-        <div class="item">
-          <span>实名制人数</span>
-          <p>{{ WorkerNum.realNameNumber }}</p>
-        </div>
-        <div class="item margin">
-          <span>入职培训人数</span>
-          <p>{{ WorkerNum.inductionTrainingNumber }}</p>
-        </div>
-        <div class="item margin">
-          <span>特殊工种人数</span>
-          <p>{{ WorkerNum.specialNumber }}</p>
-        </div>
-        <div class="item margin">
-          <span>普通工种人数</span>
-          <p>{{ WorkerNum.commonNumber }}</p>
-        </div>
-        <div class="item margin">
-          <span>管理人员人数</span>
-          <p>{{ WorkerNum.managerNumber }}</p>
-        </div>
-      </div>
-      <div class="bunbox">
-        <div class="left">
-          <span>员工申报年龄段</span>
-          <el-date-picker
-            v-model="time1"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            value-format="yyyy-MM-dd"
-            @change="getTime1"
-          ></el-date-picker>
-          <JBarChart
-            :tooltip="{}"
-            :xData="xData"
-            :series="series"
-            :grid="grid"
-            v-if="series[0].data.length != 0"
-          />
-          <div class="nodata" v-else>
-            <img src="@/assets/images/noData3.png" alt srcset />
-            <p>暂无数据</p>
+      <div class="centerLeft">
+        <div class="text">入场<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">三级</span>交底</div>
+
+        <div class="textDivBox">
+          <div class="textDiv">
+            <span>67</span>
+            <p>项目总人数</p>
+          </div>
+          <div class="textDiv">
+            <span>51</span>
+            <p>项目培训人数</p>
+          </div>
+          <div class="textDiv">
+            <span>46.79%</span>
+            <p>项目培训率</p>
           </div>
         </div>
-        <div class="right">
-          <span>人员增长趋势</span>
-          <el-date-picker
-            v-model="time2"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            value-format="yyyy-MM-dd"
-            @change="getTime2"
-          ></el-date-picker>
-          <div v-if="xdata2.length != 0" class="rightChart" ref="rightChart"></div>
-          <div class="nodata" v-else>
-            <img src="@/assets/images/noData3.png" alt srcset />
-            <p>暂无数据</p>
+
+        <div class="tableDiv">
+          <div class="tableSon">
+            <div class="row">培训主题</div>
+            <div class="row">培训人</div>
+            <div class="row">培训课时(h)</div>
+            <div class="row">培训时间</div>
+          </div>
+          <div class="tbody">
+            <vue-scroll>
+              <div class="row" v-for="i in 20" :key="i">
+                <div class="td">每日安全交底</div>
+                <div class="td">缪维彪</div>
+                <div class="td">45</div>
+                <div class="td">2022-09-28</div>
+              </div>
+            </vue-scroll>
+          </div>
+        </div>
+      </div>
+      <div class="centerC">
+        <div class="text">每日<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">班前</span>喊话</div>
+
+        <div class="textDivBox">
+          <div class="textDiv">
+            <span>3次</span>
+            <p>今日班前喊话次数</p>
+          </div>
+          <div class="textDiv">
+            <span>12</span>
+            <p>班前喊话次数</p>
+          </div>
+        </div>
+
+        <div class="tableDiv">
+          <div class="tableSon">
+            <div class="row">时间</div>
+            <div class="row">负责人</div>
+            <div class="row">班组</div>
+            <div class="row">照片</div>
+          </div>
+          <div class="tbody">
+            <vue-scroll>
+              <div class="row" v-for="i in 20" :key="i">
+                <div class="td">2022-09-28</div>
+                <div class="td">缪维彪</div>
+                <div class="td">钢筋班组</div>
+                <div class="td"><img :src="src" /></div>
+              </div>
+            </vue-scroll>
+          </div>
+        </div>
+      </div>
+      <div class="centerRight">
+        <div class="text">
+     <!-- <div class="text">每日<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">班前</span>喊话</div> -->
+
+          安<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">全交</span>底
+        </div>
+
+        <div class="textDivBox">
+          <div class="textDiv">
+            <span>67次</span>
+            <p>培训次数</p>
+          </div>
+          <div class="textDiv">
+            <span>23次</span>
+            <p>特种作业</p>
+          </div>
+          <div class="textDiv">
+            <span>11次</span>
+            <p>雨季交底</p>
+          </div>
+          <div class="textDiv">
+            <span>26次</span>
+            <p>用电交底</p>
+          </div>
+        </div>
+
+        <div class="tableDiv">
+          <div class="tableSon">
+            <div class="row">交底主题</div>
+            <div class="row">类型</div>
+            <div class="row">负责人</div>
+            <div class="row">交底时间</div>
+          </div>
+          <div class="tbody">
+            <vue-scroll>
+              <div class="row" v-for="i in 20" :key="i">
+                <div class="td">每日安全交底</div>
+                <div class="td">钢筋交底</div>
+                <div class="td">缪维彪</div>
+                <div class="td">2022-09-28</div>
+              </div>
+            </vue-scroll>
           </div>
         </div>
       </div>
@@ -82,184 +121,17 @@
 </template>
 
 <script>
-import Card from "../components/Card.vue";
-import JBarChart from "../../common/jChart/bar/JBarChart.vue";
-import {
-  getWorkerNumApi,
-  getWorkerGrowthApi,
-  getDeclareAgeApi
-} from "@/assets/js/api/zhongjianFourth";
-import echarts from "echarts4";
+import Card from '../components/Card.vue'
 export default {
-  components: { Card, JBarChart },
+  components: {
+    Card
+  },
   data() {
     return {
-      WorkerNum: {},
-      time1:["2022-08-19","2022-09-19"],
-      time2: ["2022-08-19","2022-09-19"],
-      xData: ["18-24", "25-34", "34-49", "50-55", "未登记"],
-      grid: ["10%", "2%", "18%", "10%"],
-      series: [
-        {
-          // "2200", "4000", "8000", "3000", "8000"
-          data: [],
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: "#DE5F2A" },
-              { offset: 1, color: "#DE5F2A24" },
-            ]),
-          },
-        },
-      ],
-      xdata2: [],
-      ydata2: [],
-    };
-  },
-  created(){
-    this.time1 = this.getDefaultTime();
-    this.time2 = this.getDefaultTime();
-  },
-  mounted() {
-    this.getData();
-    this.getAgeData();
-    this.getYearData();
-  },
-  watch: {
-    time1: {
-      handler(oldVal, newVal) {
-        if (oldVal != newVal) {
-          this.getAgeData();
-        }
-      },
-      immediate:true,
-    },
-    time2: {
-      handler(oldVal, newVal) {
-        if (oldVal != newVal) {
-          this.getYearData();
-        }
-      },
-      immediate:true,
-    },
-  },
-  methods: {
-    getDefaultTime () {
-      const start = new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)
-        .toISOString()
-        .replace('T', ' ')
-        .split('.')[0].split(' ')[0] //默认开始时间30天前
-      const end = new Date(new Date().getTime())
-        .toISOString()
-        .replace('T', ' ')
-        .split('.')[0].split(' ')[0]//默认结束时间当天日期
-      return [start, end]
-    },
-    getData() {
-      getWorkerNumApi({ projectSn: this.$store.state.projectSn }).then(
-        (res) => {
-          this.WorkerNum = res.result;
-        }
-      );
-    },
-    getTime1(val) {
-      this.time1 = val;
-    },
-    getTime2(val) {
-      this.time2 = val;
-    },
-    getAgeData(){
-      let data = {}
-      data.projectSn = this.$store.state.projectSn;
-      if (this.time1 != null) {
-        data.startDate = this.time1[0];
-        data.endDate = this.time1[1];
-      getDeclareAgeApi(data).then((res)=>{
-        if(JSON.stringify(res.result) != "{}"){
-          this.series[0].data = Object.values(res.result)
-        }
-      })
-     }
-    },
-    getYearData() {
-      let data = {};
-      data.projectSn = this.$store.state.projectSn;
-      if (this.time2 != null) {
-        data.startDate = this.time2[0];
-        data.endDate = this.time2[1];
-        getWorkerGrowthApi(data).then((res) => {
-          // console.log('---趋势--',res)
-          if (res.reult != null) {
-            this.xdata2 = result.map((item) => {
-              return item.date;
-            });
-            this.ydata2 = result.map((item) => {
-              return item.count;
-            });
-            this.createChart();
-          }
-        });
-      }
-    },
-    createChart() {
-      let myChart = echarts.init(this.$refs.rightChart);
-      const option = {
-        tooltip: {
-          trigger: "axis",
-        },
-        grid: {
-          top: "10%",
-          right: "2%",
-          bottom: "18%",
-          left: "2%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: this.xdata2,
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: "#fff",
-            },
-          },
-        },
-        yAxis: {
-          type: "value",
-          color: "#60c5d1",
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: "dashed",
-              color: "#777f8a",
-            },
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: "#fff",
-            },
-          },
-        },
-        series: [
-          {
-            name: "人员数",
-            data: this.ydata2,
-            type: "line",
-            color: "#62c2ce",
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: "rgba(194, 92, 50,1)" },
-                { offset: 1, color: "rgba(99, 193, 204,1)" },
-              ]),
-            },
-          },
-        ],
-      };
-      myChart.setOption(option);
-    },
-  },
-};
+      src: require('../assets/images/common/bg_redCar.png')
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -267,84 +139,127 @@ export default {
   width: 100%;
   height: 100%;
   margin-top: 2%;
-  .topbox {
-    height: 27%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    .item {
-      flex-shrink: 0;
-      width: 14%;
-      height: 70px;
-      margin-right: 5%;
-      margin-left: 5%;
+  display: flex;
+  justify-content: space-between;
+  .centerLeft,
+  .centerC,
+  .centerRight {
+    width: 340px;
+    height: 95%;
+    .text {
       text-align: center;
-      background-image: url(../assets/images/common/num_bg.png);
-      background-repeat: no-repeat;
-      background-size: 100%;
-      span {
-        display: block;
-        color: #6ee4f0;
-        text-align: center;
-        font-size: 14px;
-        margin-top: 10%;
-      }
-      p {
-        font-size: 26px;
+      margin-bottom: 20px;
+      font-size: 14px;
+      .el-icon-minus {
       }
     }
-    .item.margin {
-      margin-top: 1%;
-    }
-  }
-  .bunbox {
-    height: 60%;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    .left,
-    .right {
-      width: 50%;
-      height: 90%;
-      margin-top: 5%;
-      span {
-        color: #6ee4f0;
-        font-size: 16px;
-        margin: 4% 20% 0% 6%;
+    .textDivBox {
+      width: 340px;
+      height: 8%;
+      display: flex;
+      justify-content: space-between;
+      .textDiv {
+        background: rgba(111, 202, 226, 0.65);
+        border-radius: 2px 2px 2px 2px;
+        opacity: 1;
+        font-size: 12px;
+        width: 100px;
+        height: 41px;
+        //  background-color: #6fcae2;
+        div {
+          text-align: center;
+        }
+        span {
+          display: block;
+          text-align: center;
+          margin-top: 5px;
+        }
+        p {
+          text-align: center;
+        }
       }
-      .rightChart {
+    }
+    .tableDiv {
+      margin-top: 12px;
+      width: 100%;
+      height: calc(85%);
+      .tableSon {
         width: 100%;
-        height: 100%;
+        background: rgba(111, 202, 226, 0.3);
+        border-radius: 0px 0px 0px 0px;
+        opacity: 1;
+        height: 27px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 12px;
+        // opacity: 0.2;
+        .row {
+          color: #fff !important;
+        }
       }
-      .nodata{
+      .tbody {
+        width: 100%;
+        height: calc(100% - 60px);
+        font-size: 12px;
+        margin-right: 5px;
+      }
+      .tableSon .row,
+      .tbody .row {
+        display: flex;
         text-align: center;
-        margin-top: 20%;
+        justify-content: left;
+        //height: 40px;
+        line-height: 38px;
+        .td {
+          color: #fff;
+          opacity: 0.5;
+          &:nth-child(1) {
+            flex: 1;
+          }
+          &:nth-child(2) {
+            flex: 1;
+          }
+          &:nth-child(3) {
+            flex: 1;
+          }
+          &:nth-child(4) {
+            flex: 1;
+            margin-right: 15px;
+          }
+        }
       }
     }
   }
-}
-::v-deep .el-date-editor--daterange.el-input__inner {
-  width: 230px;
-  height: 30px;
-  background-color: #182337;
-  border: 1px solid #264b5e;
-}
-::v-deep .el-range-input {
-  background-color: #182337;
-  color: #6ee4f0;
-}
-::v-deep .el-date-editor {
-  .el-range__icon {
-    line-height: 23px;
-    color: #6ee4f0;
+  .centerC {
+    .textDiv {
+      flex: 1;
+      &:nth-child(2) {
+        margin-left: 20px;
+      }
+    }
+    img {
+      width: 48px;
+      height: 26px;
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      margin-top: 5px;
+    }
   }
-  .el-range-separator {
-    line-height: 23px;
-    color: #757d88;
-  }
-  .el-range__close-icon {
-    color: #757d88;
-    line-height: 23px;
+  .centerRight {
+    .textDivBox {
+      width: 360px;
+      height: 8%;
+      display: flex;
+      justify-content: space-between;
+      .textDiv {
+        margin-right: 20px;
+        font-size: 12px;
+        width: 100px;
+        height: 41px;
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/projectAdmin/fourEngin/security/index.vue b/src/views/projectAdmin/fourEngin/security/index.vue
index 0df59911..884a96ad 100644
--- a/src/views/projectAdmin/fourEngin/security/index.vue
+++ b/src/views/projectAdmin/fourEngin/security/index.vue
@@ -8,7 +8,10 @@
       <div class="top"><CenterTop /></div>
       <div class="bottom"><CenterBottom /></div>
     </div>
-    <div class="right"><RightTop /></div>
+    <div class="right">
+      <div class="rightTop"> <RightTop />  </div>
+      <div class="rightbottom"> <RightBottom />  </div>
+      </div>
   </div>
 </template>
 
@@ -18,8 +21,9 @@ import LeftBottom from './leftBottom.vue'
 import CenterTop from './centerTop.vue'
 import CenterBottom from './centerBottom.vue'
 import RightTop from './rightTop.vue'
+import RightBottom from './rightBottom.vue'
 export default {
-  components: { LeftTop, LeftBottom, CenterTop, CenterBottom, RightTop }
+  components: { LeftTop, LeftBottom, CenterTop, CenterBottom, RightTop,RightBottom }
 }
 </script>
 
@@ -54,6 +58,13 @@ export default {
   .right {
     width: 20%;
     height: 100%;
+    .rightTop{
+       height: 65%;
+
+    }
+    .rightbottom{
+       height: 35%;
+    }
   }
 }
 
diff --git a/src/views/projectAdmin/fourEngin/security/rightBottom.vue b/src/views/projectAdmin/fourEngin/security/rightBottom.vue
new file mode 100644
index 00000000..43b61965
--- /dev/null
+++ b/src/views/projectAdmin/fourEngin/security/rightBottom.vue
@@ -0,0 +1,214 @@
+<template>
+  <Card title="人员管理" id="text">
+    <div class="table">
+      <!-- 出勤数据结构 -->
+      <div class="topbox">
+        <div>
+          <span>总人数</span>
+          <p class="item">{{ WorkerNum.sumNumber }}</p>
+        </div>
+        <div>
+          <span>实际出勤人数</span>
+          <p class="item">{{ WorkerNum.attendanceNumber }}</p>
+        </div>
+        <div>
+          <span>未出勤人数</span>
+          <p class="item">{{ WorkerNum.noAttendanceNumber }}</p>
+        </div>
+        <div>
+          <span>实名制人数</span>
+          <p class="item">{{ WorkerNum.realNameNumber }}</p>
+        </div>
+        <div>
+          <span>入职培训人数</span>
+          <p class="item">{{ WorkerNum.inductionTrainingNumber }}</p>
+        </div>
+
+        <div class=" margin">
+          <span>管理人员人数</span>
+          <p class="item">{{ WorkerNum.managerNumber }}</p>
+        </div>
+      </div>
+      <!-- 出勤横向柱状图结构 -->
+      <div id="main">
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script>
+import echarts from 'echarts4'
+import Card from '../components/Card.vue'
+import { getWorkerNumApi } from '@/assets/js/api/zhongjianFourth'
+export default {
+  components: {
+    Card
+  },
+  data() {
+    return {
+      WorkerNum: {} //出勤数据
+    }
+  },
+  mounted() {
+    this.getData()
+    this.AttendanceData()
+  },
+  methods: {
+    //出勤人员数据
+    getData() {
+      getWorkerNumApi({ projectSn: this.$store.state.projectSn }).then(res => {
+        this.WorkerNum = res.result
+      })
+    },
+    AttendanceData() {
+      let myChart = echarts.init(document.getElementById('main'))
+      //初始化数据
+      var category = ['中建四局出勤人数', '中建四局出勤人数', '中建四局出勤人数', '中建四局出勤人数', '中建四局出勤人数']
+      var barData = [5, 5, 4, 6, 5]
+
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '1%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          axisLine: { show: false },
+          axisTick: { show: false },
+          splitArea: { show: false },
+          type: 'category',
+          data: category,
+          max: 3.5,
+          boundaryGap: [5, 5],
+          axisLine: {
+            show:false,
+            lineStyle: {
+              color: '#6EE4F0'
+            }
+          },
+          // splitLine: { show: false },
+
+          offset: 0,
+          
+          nameTextStyle: {
+            fontSize: 30
+          }
+        },
+        itemStyle: {
+          //   emphasis: {
+          //     barBorderRadius: 7
+          //   },
+          normal: {
+            barBorderRadius: 7,
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: '#3977E6' },
+              { offset: 1, color: '#37BBF8' }
+            ])
+          }
+        },
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            data: barData,
+            barWidth: 15,
+            barGap: 10,
+            smooth: true,
+            barCategoryGap: 20,
+            label: {
+              normal: {
+                show: false,
+                position: 'right',
+                offset: [5, 5],
+                // textStyle: {
+                // //   color: '#F68300',
+                //   fontSize: 13
+                // }
+              }
+            },
+            itemStyle: {
+              emphasis: {
+                barBorderRadius: 7
+              },
+              normal: {
+                barBorderRadius: 7,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  { offset: 0, color: '#E7622A' },
+                  { offset: 1, color: '#162235' }
+                ])
+              }
+            }
+          }
+        ]
+      }
+      myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+#text{
+    font-size: 20px ;
+    z-index: 999;
+}
+.table {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+
+  .topbox {
+    margin-top: 10px;
+    height: 27%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .item {
+        margin-top: 5px;
+     // padding-top: 15px;
+      width: 100px;
+      height: 44px;
+      text-align: center;
+      background-image: url(../assets/images/common/num_bg.png);
+      background-repeat: no-repeat;
+      background-size: 100%;
+      font-size: 16px;
+      margin-bottom: 20px;
+      line-height: 44px;
+    }
+    span {
+      display: block;
+      color: #6ee4f0;
+      text-align: center;
+      font-size: 12px;
+      height: 10px;
+    }
+  }
+  #main {
+    margin-top: 55px;
+    width: 100%;
+    height: 50%;
+  }
+}
+</style>