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

<template>
  <div class="statistics-container">
    <!-- 营期课程选择 -->
    <div class="fixed-header">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="营期课程">
          <el-select
            v-model="queryParams.periodId"
            placeholder="请选择营期课程"
            style="width: 400px"
            clearable
          >
            <el-option
              v-for="item in courseOptions"
              :key="item.periodId"
              :label="item.periodName"
              :value="item.periodId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 统计数据展示 -->
      <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>
</template>

<script>
import {getDays, periodCourseStatisticCount,periodList} from "@/api/course/userCoursePeriod";

export default {
  name: "userCoursePeriodDetails",
  props: {
    periodId: {
      type: [String, Number],
      default: ''
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 课程选项
      courseOptions: [],
      // 统计数据
      statistics: {
        courseCompleteNum: 0,
        courseWatchNum: 0,
        redPacketCount: 0,
        correctAnswerNum: 0,
        redPacketAmount: 0
      },
      // 列表数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // videoId: '',
        periodId: '',
        trainingCampId:null,
        userId:null,
      },
      // 是否已初始化
      initialized: false
    };
  },
  created() {
  },
  methods: {
    getDetails(camp,userid) {
      this.queryParams.trainingCampId = camp.trainingCampId;
      this.camp = camp;
      this.userId=userid;
      this.queryParams.userId=userid;
      this.user=null;
      this.courseOptions = []
      this.queryParams.periodId = null;
      this.getCourseOptions();
      this.calculateTotalStatistics();
    },
    /** 查询按钮操作 */
    handleQuery() {
      this.calculateTotalStatistics();
    },
    /** 获取课程选项 */
    getCourseOptions() {

      this.loading = true;
      periodList(this.queryParams).then(r => {
        if (r.code === 200) {
          this.courseOptions = r.data;
          this.loading = false;
        } else {
          this.$message.error(r.msg || '获取数据失败');
        }
        this.loading = false;
      }).catch(() => {
        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;
}
/* 覆盖原有的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>