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

<template>
  <Card title="人员管理" id="text">
    <div class="table">
      <!-- 出勤数据结构 -->
      <div class="topbox">
        <div>
          <span>总人数</span>
          <p class="item">{{ WorkerNum.sumNumber || 0 }}</p>
        </div>
        <div>
          <span>实际出勤人数</span>
          <p class="item">{{ WorkerNum.attendanceNumber || 0 }}</p>
        </div>
        <div>
          <span>未出勤人数</span>
          <p class="item">
            {{ WorkerNum.sumNumber - WorkerNum.attendanceNumber || 0 }}
          </p>
        </div>
        <div>
          <span>实名制人数</span>
          <p class="item">{{ WorkerNum.realNameNumber || 0 }}</p>
        </div>
        <div>
          <span>入职培训人数</span>
          <p  class="item">{{dataList.lwNumber|| 0 }}</p>
        </div>

        <div class="margin">
          <span>管理人员人数</span>
          <p class="item">{{ WorkerNum.managerNumber || 0 }}</p>
        </div>
      </div>
      <!-- 出勤横向柱状图结构 -->
      <div id="main"></div>
    </div>
  </Card>
</template>

<script>
import echarts from "echarts4";
import Card from "../components/Card.vue";
import {
  getWorkerNumTwoApi,
  getPersonnelNumApi
} from "@/assets/js/api/zhongjianFourth";
export default {
  components: {
    Card,
  },
  data() {
    return {
      WorkerNum: {}, //出勤数据
      categoryList: [],
      dataList:{
        lwNumber:0,
      },//入场培训人数
    }
    
  },
  mounted() {
    this.getData();
    this.getWorkerStatisticsCount()
    setTimeout(() => {
      this.AttendanceData();
    }, 1000);
  },
  methods: {
    //出勤人员数据
    getData() {
      getWorkerNumTwoApi({ projectSn: this.$store.state.projectSn }).then(
        (res) => {
          this.WorkerNum = res.result;
          this.categoryList.push(Number(res.result.managerNumber));
          this.categoryList.push(Number(this.dataList.lwNumber))
          this.categoryList.push(Number(res.result.realNameNumber));
          this.categoryList.push(
            Number(res.result.sumNumber - res.result.attendanceNumber)
          );
          this.categoryList.push(Number(res.result.attendanceNumber));
          console.log(this.WorkerNum, "出勤人数this.WorkerNum");
        }
      );
    },
    AttendanceData() {
      let myChart = echarts.init(document.getElementById("main"));
      //初始化数据
      var category = [
        "管理人员人数",
        "入职培训人数",
        "实名制人数",
        "未出勤人数",
        "实际出勤人数",
      ];
      var barData = this.categoryList;

      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);
    },
    //入职培训人数
    getWorkerStatisticsCount() {
      getPersonnelNumApi({ projectSn: this.$store.state.projectSn }).then((res) => {
     this.dataList=res.result
         console.log('this.lwNumberData',this.lwNumberData,);
      });
    },
  },
};
</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>