cmc-oa/oa-ui/src/views/oa/study/components/studyHead.vue

<!--
 * @Author: ysh
 * @Date: 2025-03-05 14:19:02
 * @LastEditors: wrh
 * @LastEditTime: 2026-01-04 11:30:16
-->
<template>
  <div class="head-bg">
    <div class="user-info">
      <div class="user-pic" data-is-fans="0" data-is-follows="">
        <div class="user-pic-bg">
          <img class="img" :src="$store.getters.avatar">
        </div>
      </div>
      <div class="user-name">
        {{ $store.getters.name }}
      </div>
      <div class="user-dept">
        {{ getDeptName($store.getters.deptId) }}
      </div>
      <div class="user-study">
        <div class="user-item">
          <div class="u-info-learn" style="cursor:pointer;">
            <em>{{ hours }}h</em>
            <span>{{new Date().getFullYear()+"学时"}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listStudy, getStudy, delStudy, addStudy, updateStudy } from "@/api/oa/study/myStudy";
import { listTrainApproval, getTrainApproval, delTrainApproval, addTrainApproval, updateTrainApproval } from "@/api/oa/study/trainApproval";

export default {
  data() {
    return {
      hours: 0,
    }
  },
  created() {
    this.getYearHours();
  },
  methods: {
    async getYearHours() {
      let lastTime = new Date().getFullYear() + '-01-01';
      let studyHours = 0, approvalHours = 0;
      let studyRes = await listStudy({ userId: this.$store.getters.userId, lastTime: lastTime })
      if (studyRes.total > 0) {
        studyHours = studyRes.rows.reduce((sum, item) => sum + Number(item.getHours), 0)
      }
      let approvalRes = await listTrainApproval({ userId: this.$store.getters.userId, reportTime: lastTime })
      if (approvalRes.total > 0) {
        approvalHours = approvalRes.rows.reduce((sum, item) => {
          if (item.deptTime) {
            return sum + Number(item.hours)
          } else {
            return sum + 0
          }
        }, 0)
      }
      console.log(approvalHours);
      this.hours = (studyHours + approvalHours).toFixed(1);
    }
  },
}
</script>

<style lang="scss" scoped>
.head-bg {
  background: url('~@/assets/images/temp1.png') no-repeat center top #000;
  background-size: cover;
  height: 100px;

  .user-info {
    display: flex;
    position: relative;
    width: 1200px;
    margin: 0 auto;

    .user-pic {
      float: left;
      width: 148px;
      height: 148px;

      .user-pic-bg {
        border: 4px solid #fff;
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, .1);
        width: 120px;
        height: 120px;
        position: relative;
        border-radius: 50%;
        background: #fff;
        top: 24px;

        img {
          text-align: center;
          width: 115px;
          height: 115px;
          border-radius: 50%;
        }
      }
    }

    .user-name {
      font-weight: 600;
      text-align: left;
      font-size: 24px;
      color: #fff;
      line-height: 28px;
      margin-top: 48px;
    }

    .user-dept {
      font-weight: 600;
      text-align: left;
      font-size: 16px;
      color: #ebe7e7;
      font-family: 'puhuiti';
      line-height: 28px;
      margin-top: 52px;
      margin-left: 20px;
    }

    .user-study {
      position: absolute;
      top: 31px;
      right: 185px;
      min-width: 200px;
      text-align: right;

      .user-item {
        line-height: 48px;
        vertical-align: middle;
        height: 48px;
        float: left;

        em {
          display: block;
          text-align: center;
          font-weight: 700;
          font-size: 24px;
          color: rgba(255, 255, 255, .8);
          line-height: 28px;
        }

        span {
          display: block;
          text-align: center;
          font-size: 14px;
          color: rgba(255, 255, 255, .8);
          line-height: 20px;
          margin-top: 4px;
        }
      }
    }
  }

}
</style>