ylrz_his_scrm_adminUI/src/views/his/user/userStaticAll.vue

<template>
  <div class="statistics-container">
    <!-- 营期课程选择 -->
    <div class="fixed-header">
      <!-- 统计数据展示 -->
      <el-row :gutter="20" class="statistics-row">
        <el-col :span="4">
          <div class="statistics-item">
            <div class="statistics-title">到课数</div>
            <div class="statistics-value">{{ statistics.courseCompleteNum || 0 }}次</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="statistics-item">
            <div class="statistics-title">总学习时长</div>
            <div class="statistics-value">{{ statistics.courseWatchNum || 0 }}分钟</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="statistics-item">
            <div class="statistics-title">正确答题数</div>
            <div class="statistics-value">{{ statistics.correctAnswerNum || 0 }}次</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="statistics-item">
            <div class="statistics-title">获得红包数</div>
            <div class="statistics-value">{{ statistics.redPacketCount || 0 }}次</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="statistics-item">
            <div class="statistics-title">红包总金额</div>
            <div class="statistics-value">{{ statistics.redPacketAmount || 0 }}元</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 列表统计展示 -->
    <div class="table-wrapper">
      <el-table v-loading="loading" :data="list">
        <el-table-column type="index" label="序号" width="50" align="center" fixed/>
        <el-table-column prop="courseName" label="课程名称" align="center" min-width="100" fixed/>
        <el-table-column prop="videoName" label="课节名称" align="center" min-width="100" fixed/>
        <el-table-column label="记录类型" align="center" prop="logType">
          <template slot-scope="scope">
            <el-tag prop="type" v-for="(item, index) in typeOptions" v-if="scope.row.logType==item.dictValue">{{item.dictLabel}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="duration" label="播放时长" align="center" min-width="100"/>
        <el-table-column prop="finishTime" label="完课时间" align="center" min-width="120"/>
      </el-table>

      <!-- 分页 -->
      <div class="custom-pagination-container">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getCountList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {periodCourseStatisticCount} from "@/api/course/userCoursePeriod";
import { listBytrainingCampId } from "@/api/course/qw/courseWatchLog";


export default {
  name: "userStaticAll",
  props: {
    periodId: {
      type: [String, Number],
      default: ''
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      typeOptions: [],
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 统计数据
      statistics: {
        courseCompleteNum: 0,
        courseWatchNum: 0,
        redPacketCount: 0,
        correctAnswerNum: 0,
        redPacketAmount: 0
      },
      // 列表数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // videoId: '',
        periodId: '',
        trainingCampId:null,
        userId:null,
      },
    };
  },
  created() {
    this.getDicts("sys_course_watch_log_type").then((response) => {
      this.typeOptions = response.data;
    });
  },
  methods: {
    getDetails(camp,userid) {
    this.queryParams.trainingCampId = camp.trainingCampId;
      this.camp = camp;
      this.userId=userid;
      this.queryParams.userId=userid;
      this.user=null;
      if (this.queryParams.trainingCampId){
        this.getCountList();
        this.calculateTotalStatistics();
      }

    },
    /** 获取列表数据 */
    getCountList() {
      this.loading = true;
      if (!this.queryParams.trainingCampId || !this.queryParams.userId){
        return
      }
      listBytrainingCampId(this.queryParams).then(response => {
        if (response.code === 200) {
          // 设置列表数据
          this.list = response.rows;
          this.total = response.total || 0;


        } else {
          this.$message.error(response.msg || '获取数据失败');
        }
        this.loading = false;
      }).catch(error => {
        console.error('获取数据失败:', error);
        this.$message.error('获取数据失败');
        this.loading = false;
      });
    },
    /** 计算总统计数据 */
    calculateTotalStatistics() {

      console.log("this.queryParams:",this.queryParams)
      periodCourseStatisticCount(this.queryParams).then(response => {
        if (response.code === 200) {
          // 设置列表数据
          this.statistics.courseCompleteNum = response.data.courseCompleteNum || 0;
          this.statistics.courseWatchNum = response.data.courseWatchNum || 0;
          this.statistics.courseWatchTimes = response.data.courseWatchTimes || 0;
          this.statistics.redPacketCount = response.data.redPacketCount || 0;
          this.statistics.correctAnswerNum = response.data.correctAnswerNum || 0;
          this.statistics.redPacketAmount = response.data.redPacketAmount || 0;

        } else {
          this.$message.error(response.msg || '获取数据失败');
        }
        this.loading = false;
      }).catch(error => {
        console.error('获取数据失败:', error);
        this.$message.error('获取数据失败');
        this.loading = false;
      });

    }
  }
};
</script>

<style scoped>
.statistics-container {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.fixed-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  padding: 10px 0;
  border-bottom: 1px solid #EBEEF5;
}

.table-wrapper {
  height: calc(100% - 220px);
  overflow: visible;
  position: relative;
}

.custom-pagination-container {
  padding: 10px 0 12px 0;
  text-align: right;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

/* 覆盖原有的pagination-container样式 */
:deep(.pagination-container) {
  height: auto !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

.statistics-row {
  margin: 20px 0;
}

.statistics-item {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 15px;
  text-align: center;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.statistics-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}

.statistics-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}
</style>