湖里大屏(劳务管理):人员类型安全培训

src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftBottom.vue

@@ -1,13 +1,25 @@
 <template>
-<!-- 年龄结构 -->
-<div class="container">
+  <!-- 年龄结构 -->
+  <div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-
-</div>
+    <div class="topTit">
+      <div class="blue"></div><span>在场</span>
+      <div class="purple"></div><span>在职</span>
+      <div class="topright">
+        <p>在职平均年龄： <a>42</a></p>
+        <p>在场平均年龄： <a>42</a></p>
+      </div>
+    </div>
+    <div class="mychart">
+      <JBarChart :xData="xData" :yData="yData" :color="color" :grid="grid"  />
+    </div>
+  </div>
 </template>
 
 <script>
+import JBarChart from "../jChart/bar/JBarChart.vue";
 export default {
+  components: { JBarChart },
 
   props: {
     title: {
@@ -17,16 +29,42 @@ export default {
   },
   data() {
     return {
-
+      xData: ["18岁及下", "18-45岁", "45-59岁", "60岁以上"],
+      yData: [
+        {
+          value: 170,
+          itemStyle: {
+            color: "#a9adb6"
+          }
+        },
+        {
+          value: 320,
+          itemStyle: {
+            color: "#557dee"
+          }
+        },
+        {
+          value: 270,
+          itemStyle: {
+            color: "#43d7b5"
+          }
+        },
+        {
+          value: 310,
+          itemStyle: {
+            color: "#ff6c7f"
+          }
+        }
+      ],
+      color: ["#5be2f6", "#5281f7"],
+      grid: ["10%", "5%", "15%", "5%"]
     };
-  },
-
-
-}
+  }
+};
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +75,38 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .topTit{
+     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;
+    }
+    // span{
+    //   margin-right: 30px;
+    //   height: 15px;
+    //   line-height: 15px;
+    // }
+  }
+  .topright{
+    display: inline-block;
+    p {
+      margin-left: 110px;
+    }
+  }
+  .mychart {
+    width: 100%;
+    height: 90%;
+  }
 }
 </style>
 
+

src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightCenter.vue

@@ -1,42 +1,101 @@
 <template>
-<!-- 安全培训 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <!-- 安全培训 -->
+  <div class="containerBox">
+    <div class="title">{{ title }}</div>
+    <div class="content">
+      <div class="chart">
+        <JRingChart
+          :title="{ text: 3214, subTitle: '总人数' }"
+          :color="['#557DEE', '#43D7B5']"
+          :data="[{ value: 2314 }, { value: 987 }]"
+          :radius="['55%', '80%']"
+        />
+      </div>
+      <div class="count">
+        <div class="count-item">
+          <div class="label">已培训人数</div>
+          <div class="num">2314</div>
+        </div>
+        <div class="count-item">
+          <div class="label">为培训人数</div>
+          <div class="num">987</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import JRingChart from '../jChart/pie/JRingChart.vue'
 export default {
-
+  components: { JRingChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
-    return {
-
-    };
-  },
-
-
+    return {}
+  }
 }
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
-
-  .titleTxt {
+  .title {
+    padding-left: 6px;
+    height: 30px;
+    line-height: 30px;
     font-size: 18px;
     color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
+  }
+  .content {
+    height: calc(100% - 30px);
+    display: flex;
+    .chart {
+      width: 55%;
+      height: 100%;
+    }
+    .count {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .count-item {
+        position: relative;
+        &::before {
+          position: absolute;
+          left: -16px;
+          top: 10px;
+          content: '';
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+        }
+        &:first-child {
+          margin-bottom: 20px;
+        }
+        &:first-child::before {
+          background-color: #557dee;
+        }
+        &:last-child::before {
+          background-color: #43d7b5;
+        }
+        .label {
+          margin-bottom: 8px;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.7);
+        }
+        .num {
+          font-size: 18px;
+        }
+      }
+    }
   }
 }
 </style>
-

src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightTop.vue

@@ -1,14 +1,14 @@
 <template>
-<!-- 人员类型 -->
-<div class="container">
+  <!-- 人员类型 -->
+  <div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-
-</div>
+    <div class="myChart" ref="myChart"></div>
+  </div>
 </template>
 
 <script>
+import echarts from "echarts4";
 export default {
-
   props: {
     title: {
       type: String,
@@ -16,17 +16,59 @@ export default {
     }
   },
   data() {
-    return {
-
-    };
+    return {};
   },
-
-
-}
+  created() {
+    this.initMyChart();
+  },
+  methods: {
+    initMyChart() {
+      const myChart = echarts.init(this.$refs.myChart);
+      const option = {
+        series: [
+          {
+            type: "pie",
+            roseType: "radius",
+            radius: [30, 60],
+            // top: 50,
+            left: "center",
+            width: 350,
+            label: {
+              alignTo: "edge",
+              formatter: "{name|{b}}\n{time|{c} 人}",
+              minMargin: 5,
+              edgeDistance: 10,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 12,
+                  color: "#999"
+                }
+              }
+            },
+            labelLine: {
+              length: 15,
+              length2: 0,
+              maxSurfaceAngle: 80
+            },
+            data: [
+              { name: "项目管理人员", value: 210 },
+              { name: "特种作业人员", value: 103 },
+              { name: "临时工", value: 52 },
+              { name: "外包工", value: 123 },
+              { name: "一般作用人员", value: 80 }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +79,10 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .myChart {
+    width: 100%;
+    height: 90%;
+  }
 }
 </style>