YZProjectCloud/yanzhu-ui-vue3/src/views/index.vue

<template>
  <div class="app-container home" :key="mainKey">
    <el-card class="nav-top">
      <nav-top-unit />
      <nav-top-att-worker-count :attInfo="attInfo" :key="elKey" />
      <nav-top-att-online-count :attInfo="attInfo" :key="elKey" />
      <nav-top-att-mgr-count :attInfo="attInfo" :key="elKey" />
      <nav-top-att-real-count :attInfo="attInfo" :key="elKey" />
    </el-card>

    <el-card class="nav-body" style="margin-top: 20px">
      <el-row>
        <el-col :span="8">
          <nav-attendance-rate :attInfo="attInfo" :key="elKey" />
        </el-col>
        <el-col :span="8">
          <nav-att-laborer-rate :attInfo="attInfo" :key="elKey" />
        </el-col>
        <el-col :span="8">
          <nav-att-manager-rate :attInfo="attInfo" :key="elKey" />
        </el-col>
        <el-col :span="8">
          <nav-att-laborer-trend />
        </el-col>
        <el-col :span="8">
          <nav-att-woker-prop :attInfo="attInfo" :key="elKey" />
        </el-col>
        <el-col :span="8">
          <nav-att-job-type-group />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import navTopAttMgrCount from "./indexCompents/navTopAttMgrCount.vue";
import navTopAttWokerProp from "./indexCompents/navAttWokerProp.vue";
import navTopAttRealCount from "./indexCompents/navTopAttRealCount.vue";
import navTopAttWorkerCount from "./indexCompents/navTopAttWorkerCount.vue";
import navTopUnit from "./indexCompents/navTopUnit.vue";

import navAttendanceRate from "./indexCompents/navAttendanceRate.vue";
import navAttLaborerRate from "./indexCompents/navAttLaborerRate.vue";
import navAttManagerRate from "./indexCompents/navAttManagerRate.vue";

import navAttLaborerTrend from "./indexCompents/navAttLaborerTrend.vue";
import navAttWokerProp from "./indexCompents/navAttWokerProp.vue";
import navAttJobTypeGroup from "./indexCompents/navAttJobTypeGroup.vue";
import NavTopAttOnlineCount from "./indexCompents/navTopAttOnlineCount.vue";
import useUserStore from "@/store/modules/user";
import { groupByComany, groupAllByComany, groupByCraftType, groupByCraftTypeByAttendance, getEduCompletedCount } from "@/api/manage/labor.js";
export default {
  components: {
    navTopAttMgrCount,
    navTopAttWokerProp,
    navTopAttRealCount,
    navTopAttWorkerCount,
    navTopUnit,
    navAttendanceRate,
    navAttLaborerRate,
    navAttManagerRate,
    navAttLaborerTrend,
    navAttWokerProp,
    navAttJobTypeGroup,
    NavTopAttOnlineCount,
  },
  data() {
    return {
      userStore:null,
      currentPrjId: null,
      currentComId: null,
      vendorsCode: "",
      attInfo: null,
      elKey: 0,
      mainKey: 0,
    };
  },
  mounted() {
    this.userStore = useUserStore();
    this.currentPrjId = this.userStore.currentPrjId;
    this.currentComId = this.userStore.currentComId;
    this.vendorsCode = this.userStore.vendorsCode;
    if (this.vendorsCode == "jgw") {
      this.vendorsCode = "uni";
    }
    this.loadAttInfo(); //加载考勤人员信息
  },
  methods: {
    loadAttInfo() {
      if (this.vendorsCode != "uni") {
        this.loadJhAttendanceData();
      } else {
        this.loadUniAttendanceData();
      }
      setTimeout(() => {
        this.loadAttInfo();
        this.mainKey++;
      }, 1000 * 60 * 5);
    },
    loadUniAttendanceData() {
      let data = {
        comId: this.currentComId,
        projectId: this.currentPrjId,
      };
      let ajax = [];
      ajax.push(groupByCraftTypeByAttendance({ ...data, createTime: this.$dt(new Date()).format("YYYY-MM-DD") }));
      ajax.push(groupByCraftType(data));
      ajax.push(getEduCompletedCount(this.vendorsCode, this.currentPrjId));
      Promise.all(ajax).then((res) => {
        let tmps = res[0].data || [];
        let obj = {
          job: {
            //在岗
            total: 0,
            mgr: 0,
            worker: 0,
          },
          att: {
            //今日出勤
            total: 0,
            mgr: 0,
            worker: 0,
          },
          edu: 0,
        };
        tmps.forEach((d) => {
          let cnt = (d.id || 0) * 1;
          obj.att.total += cnt;
          if (d.createBy == "管理人员") {
            obj.att.mgr += cnt;
          } else {
            obj.att.worker += cnt;
          }
        });
        tmps = res[1].data || [];
        tmps.forEach((d) => {
          let cnt = (d.id || 0) * 1;
          obj.job.total += cnt;
          if (d.createBy == "管理人员") {
            obj.job.mgr += cnt;
          } else {
            obj.job.worker += cnt;
          }
        });
        obj.edu = res[2].data || 0;
        this.attInfo = obj;
        this.elKey++;
      });
    },
    loadJhAttendanceData() {
      let ajax = [];
      let data = {
        projectId: this.currentPrjId,
        attendanceTime: this.$dt(new Date()).format("YYYY-MM-DD"),
      };
      ajax.push(groupByComany({ ...data, id: 1 }));
      ajax.push(groupAllByComany({ ...data, id: 0 }));
      Promise.all(ajax).then((res) => {
        let tmps = res[0].data || [];
        let obj = {
          job: {
            //在岗
            total: 0,
            mgr: 0,
            worker: 0,
          },
          att: {
            //今日出勤
            total: 0,
            mgr: 0,
            worker: 0,
          },
          edu:0
        };
        tmps.forEach((d) => {
          let cnt = d.id * 1;
          obj.att.total += cnt;
          if (["1"].includes(d.companyTypeId)) {
            obj.att.mgr += cnt;
          } else {
            obj.att.worker += cnt;
          }
        });
        tmps = res[1].data || [];
        tmps.forEach((d) => {
          let cnt = d.id * 1;
          obj.job.total += cnt;
          if (["1"].includes(d.companyTypeId)) {
            obj.job.mgr += cnt;
          } else {
            obj.job.worker += cnt;
          }
        });
        this.attInfo = obj;
        this.elKey++;
      });
    },
  },
};
</script>

<style lang="scss">
.home {
  .el-card__body {
    padding: 10px !important;
  }
  .nav-top {
    .index-nav-top {
      display: inline-flex;
      width: calc(20% - 20px);
      margin: 10px;
      height: 100px;
      background-color: #f0f3f8;
      align-items: center;
      border-radius: 5px;
      max-width: 300px;
      min-width: 220px;
      .top-icon {
        margin-left: 30px;
        .svg-icon {
          width: 40px;
          height: 40px;
          fill: #6bc1da;
        }
      }
      .top-data {
        margin-left: 10px;
        width: calc(100% - 60px);
        .data-title {
          text-align: center;
          color: #999;
        }
        .data-number {
          line-height: 40px;
          height: 40px;
          text-align: center;
          font-size: 20px;
        }
      }
    }
  }
  .nav-body {
    .index-nav-body {
      height: 400px;
      background-color: #f0f3f8;
      margin: 10px;
      border-radius: 5px;
      .index-nav-body-title {
        line-height: 30px;
        font-weight: bold;
        padding: 6px 0px 0px 10px;
      }
      .chart-content {
        height: calc(100% - 50px);
        display: flex;
        align-items: center;
        justify-content: center;
        .my-chart {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .no-data {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .svg-icon {
          width: 100px;
          height: 100px;
          fill: #999;
        }
        div {
          color: #999;
          font-size: 14px;
        }
      }
    }
  }
}
</style>