zhgdyun/src/views/projectAdmin/fourEngin/security/centerTop.vue

<template>
  <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>
        </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>
        </div>
      </div>
    </div>
  </Card>
</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";
export default {
  components: { Card, JBarChart },
  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);
    },
  },
};
</script>

<style lang="less" scoped>
.containerBox {
  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%;
      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;
      }
    }
    .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%;
      }
      .rightChart {
        width: 100%;
        height: 100%;
      }
      .nodata{
        text-align: center;
        margin-top: 20%;
      }
    }
  }
}
::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>