Home.vue

<template>
  <div class="page page-home">
    <!-- 欢迎你，{{userData}} -->
    <el-row type="flex" align="top" justify="space-between" :gutter="40">
      <el-col :span="6" :xs="12">
        <el-card>
          <div class="data_left">
            <div class="title" style="margin-bottom:40px">昨日数据洞察</div>
            <div class="cell1">
              <div class="title">人事数据</div>
              <div
                class="datas flex flex-align-center flex-pack-justify flex_warp"
              >
                <div class="item">
                  <div>总人数</div>
                  <div>{{ homeStat.totalPersonNum }}</div>
                </div>
                <div class="item">
                  <div>部门数量</div>
                  <div>{{ homeStat.totalDeptNum }}</div>
                </div>
              </div>
            </div>
            <div class="cell1">
              <div class="title">考勤数据</div>
              <div
                class="datas flex flex-align-center flex-pack-justify flex_warp"
              >
                <div class="item">
                  <div>打卡人数</div>
                  <div>{{ homeStat.attendPersonNum }}</div>
                </div>
                <div class="item">
                  <div>出勤率</div>
                  <div>{{ homeStat.attendRadio }}</div>
                </div>
                <div class="item">
                  <div>请假人数</div>
                  <div>{{ homeStat.levealPersonNum }}</div>
                </div>
                <div class="item">
                  <div>迟到人数</div>
                  <div>{{ homeStat.latePersonNum }}</div>
                </div>
                <div class="item">
                  <div>早退人数</div>
                  <div>{{ homeStat.leftEarlyPersonNum }}</div>
                </div>
                <div class="item">
                  <div>缺卡人数</div>
                  <div>{{ homeStat.missCardPersonNum }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="12">
        <el-card class="right_card">
          <div class="data_right">
            <div class="title">科学化、精细化、以人为本知行合一的管理理念</div>
            <div class="textWord">
              坚持政治性与人民性的根本遵循、制度化与规范化的根本依托、考人与考事的相互结合<br />
              创新性与技术性的重要支撑以及效能性与发展性的不懈追求
            </div>
            <div
              class="selectBars flex flex-align-center flex-pack-justify flex_warp"
            >
              <div
                class="Bar_item"
                v-for="(item, index) in barList"
                :key="index"
                @click="tabChildren(item.barName)"
              >
                <div class="icon">
                  <img :src="item.icon" />
                </div>
                <div class="barnam">{{ item.barName }}</div>
                <div class="des" v-html="item.desc"></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  computed: {
    userData() {
      return this.$store.state.userData;
    },
    menu() {
      return this.mapMenu(this.userData.barList);
    },
  },
  data() {
    return {
      // 数据洞察
      homeStat: {
        totalPersonNum: 0, //总人数
        totalDeptNum: 0, //部门数
        attendPersonNum: 0, //考勤人数
        attendRadio: 0, //出勤率
        levealPersonNum: 0, //请假人数
        latePersonNum: 0, //迟到人数
        leftEarlyPersonNum: 0, //早退人数
        missCardPersonNum: 0, //缺卡人数
      },
      barList: [
        {
          icon: require("@/assets/images/u148.png"),
          barName: "智能人事",
          desc:
            "提供包括组织管理、职位管理、人事管理、人事<br>统计报表等相关功能",
          navList: [],
        },
        {
          icon: require("@/assets/images/u153.png"),
          barName: "考勤打卡",
          desc:
            "提供包括组织管理、职位管理、人事管理、人事<br>统计报表等相关功能",
          navList: [],
        },
        {
          icon: require("@/assets/images/u158.png"),
          barName: "绩效管理",
          desc:
            "根据部门/个人承担的目标和任务完成情况以及工作<br>评价结果、加减分纪实现考核结果自动生成。",
          navList: [],
        },
        // {
        //     icon: require('@/assets/images/u167.png'),
        //     barName: 'OA审批',
        //     desc: '无纸化审批流程，轻松完成打卡请假、移动审批等<br>操作，审批资料查找方便',
        //     navList: []
        // },
        // {
        //     icon: require('@/assets/images/u172.png'),
        //     barName: '数据分析',
        //     desc: '完整团队经营状态的数字化，人财物事数据分析<br>展示，为管理提供智能决策依据',
        //     navList: []
        // },
        {
          icon: require("@/assets/images/u177.png"),
          barName: "系统设置",
          desc:
            "提供包括RBAC用户-角色-权限管理、版本管理、<br>操作及登录日志管理等功能",
          navList: [],
        },
      ],
    };
  },
  created() {
    this.$store.commit("setHeadBar", []);
    this.$store.commit("setCurrentParentName", "");
    this.$store.commit("setCurrentThirdArr", []);
    this.$store.commit("setCurrentSecondPath", "");
    this.$store.commit("setThirdPath", "");
    this.$nextTick(() => {
      this.homeNum();
    });
  },
  methods: {
    tabChildren(name) {
      this.$store.commit("setCurrentParentName", name); //存储选择路由
      let result = this.menu.find((item) => item.name === name);
      this.$store.commit("setHeadBar", result);

      if (result) {
        // 路由跳转
        if (result.children.length > 0) {
          this.$store.commit("setCurrentThirdArr", result.children[0].children);
          this.$store.commit("setCurrentSecondPath", result.children[0].path);
          this.$store.commit("setThirdPath", result.children[0].path);
          this.$router.push({ path: result.children[0].path });
        } else {
          this.$message.error("暂未完成添加");
        }
      } else {
        this.$message.error("暂无权限");
      }
    },
    mapMenu(arr) {
      console.log(arr);
      if (arr.length === 0) return [];
      let result = arr.map((item) => {
        const url = item.url
          ? item.url
          : item.childList[0]
          ? item.childList[0].url || ""
          : "";
        return {
          name: item.name,
          path: url,
          id: item.id,
          icon: item.imgPath,
          children:
            item.childList.length === 0 ? [] : this.mapMenu(item.childList),
        };
      });
      return result;
    },
    // 查询统计数据
    async homeNum() {
      await this.$post("/login/index").then((res) => {
        const { code, data } = res;
        if (code == 1) {
          this.homeStat = Object.assign({}, this.homeStat, data.homeStat);
          this.$store.commit("setUserData", data);
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.page-home {
  width: 100%;
  min-width: 1400px;
  height: 100vh;
  box-sizing: border-box;
  // padding: 2% 5%;
  background-color: #f3f2f2;

  .data_left {
    padding: 50px 20px 0 20px;

    .cell1 {
      font-size: 16px;

      .title {
        color: #409eff;
        margin-bottom: 20px;
      }

      .item {
        text-align: left;
        width: 50%;
        margin-bottom: 20px;
      }

      .item div:first-child {
        color: gray;
        margin-bottom: 20px;
      }

      border-bottom: 1px solid rgb(245, 245, 245);
      padding: 10px 0;
    }

    .cell1:last-child {
      border: none;
    }
  }

  // 数据标题
  .data_left > .title,
  .data_right > .title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
  }

  .right_card {
    background-image: url("~@/assets/images/u162.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom;
  }

  // 导航栏
  .data_right {
    padding-top: 40px;
    .textWord {
      text-align: center;
      margin-top: 30px;
      font-size: 16px;
      line-height: 1.5em;
    }
  }

  .selectBars {
    padding: 0 20px;
  }

  .Bar_item {
    width: 30%;
    margin-top: 50px;
    border-radius: 10px;
    padding: 20px 0;
    text-align: center;
    background: linear-gradient(
      90deg,
      rgba(187, 193, 255, 0.3),
      rgb(235, 235, 235)
    );
    cursor: pointer;

    .icon img {
      width: 40px;
      height: 40px;
    }

    .barnam {
      font-size: 18px;
      margin-top: 10px;
    }

    .des {
      font-size: 14px;
      color: #666;
      margin-top: 15px;
    }
  }
}

::v-deep .el-row,
::v-deep .el-col {
  height: 100%;
}

::v-deep .el-card {
  height: 100%;
}
</style>