中建四局(安全管理):人员管理模块

src/views/projectAdmin/zjsj/security/centerTop.vue

@@ -37,10 +37,26 @@
       </div>
       <div class="bunbox">
         <div class="left">
-
+          <span>员工申报年龄段</span>
+          <el-date-picker
+            v-model="value1"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+          <JBarChart :tooltip="{}" :xData="xData" :series="series" :grid="grid" />
         </div>
         <div class="right">
-          
+          <span>人员增长趋势</span>
+          <el-date-picker
+            v-model="value2"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+          <div class="rightChart" ref="rightChart"></div>
         </div>
       </div>
     </div>
@@ -49,8 +65,85 @@
 
 <script>
 import Card from "../components/Card.vue";
+import JBarChart from "../../common/jChart/bar/JBarChart.vue";
+import echarts from "echarts4";
 export default {
-  components: { Card }
+  components: { Card, JBarChart },
+  data() {
+    return {
+      value1: "",
+      value2: "",
+      xData: ["18-24", "25-34", "34-49", "50-55", "未登记"],
+      grid: ["15%", "1%", "10%", "7%"],
+      series: [
+        {
+          data: ["2200", "4000", "8000", "3000", "8000"],
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "#DE5F2A" },
+              { offset: 1, color: "#DE5F2A24" }
+            ])
+          }
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.createChart();
+  },
+  methods: {
+    createChart() {
+      let myChart = echarts.init(this.$refs.rightChart);
+      const option = {
+        tooltip: {
+          trigger: "axis"
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["05月", "06月", "07月", "08月", "09月", "10月", "11月"],
+           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: [70, 65, 60, 65, 70, 75, 80, 85],
+            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);
+    }
+  }
 };
 </script>
 
@@ -60,6 +153,7 @@ export default {
   height: 100%;
   margin-top: 2%;
   .topbox {
+    height: 27%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -85,5 +179,50 @@ export default {
       margin-top: 2%;
     }
   }
+  .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%;
+      }
+      .rightChart {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+::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;
+  }
+  .el-range-separator {
+    line-height: 23px;
+    color: #757d88;
+  }
+  .el-range__close-icon {
+    color: #757d88;
+    line-height: 23px;
+  }
 }
 </style>

src/views/projectAdmin/zjsj/security/index.vue

@@ -45,10 +45,10 @@ export default {
     width: calc(60% - 40px);
     height: 100%;
     .top {
-      height: 65%;
+      height: 60%;
     }
     .bottom {
-      height: 35%;
+      height: 40%;
     }
   }
   .right {
@@ -56,4 +56,5 @@ export default {
     height: 100%;
   }
 }
+
 </style>