ylrz_his_scrm_adminUI/src/views/course/userCoursePeriod/statistics.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.videoIdList"
            multiple
            placeholder="请选择营期课程"
            style="width: 400px"
          >
            <el-option
              v-for="item in courseOptions"
              :key="item.videoId"
              :label="item.videoName"
              :value="item.videoId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="公司">
          <el-select
            v-model="queryParams.companyId"
            placeholder="请选择公司"
            clearable
            style="width: 400px"
          >
            <el-option
              v-for="item in companyOptions"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            />
          </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="3">
          <div class="statistics-item">
            <div class="statistics-title">完播人数</div>
            <div class="statistics-value">{{ statistics.courseCompleteNum || 0 }}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="statistics-item">
            <div class="statistics-title">观看人数</div>
            <div class="statistics-value">{{ statistics.courseWatchNum || 0 }}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="statistics-item">
            <div class="statistics-title">完播率</div>
            <div class="statistics-value">{{ statistics.completeRate || '0%' }}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="statistics-item">
            <div class="statistics-title">观看总次数</div>
            <div class="statistics-value">{{ statistics.courseWatchTimes || 0 }}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="statistics-item">
            <div class="statistics-title">答题总次数</div>
            <div class="statistics-value">{{ statistics.answerTimes || 0 }}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="statistics-item">
            <div class="statistics-title">答题正确总次数</div>
            <div class="statistics-value">{{ statistics.answerRightTimes || 0 }}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <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" border height="calc(100vh - 450px)">
        <el-table-column type="index" label="序号" width="50" align="center" fixed/>
        <el-table-column prop="title" label="课程名称" align="center" min-width="250" fixed/>
        <el-table-column prop="dayDate" label="营期日期" align="center" min-width="120" fixed/>
        <el-table-column prop="countDetailsVO.courseWatchTimes" label="观看次数" align="center" min-width="100"/>
        <el-table-column prop="countDetailsVO.courseCompleteTimes" label="完播次数" align="center" min-width="100"/>
        <el-table-column prop="countDetailsVO.courseWatchNum" label="观看人数" align="center" min-width="100"/>
        <el-table-column prop="countDetailsVO.courseCompleteNum" label="完播人数" align="center" min-width="100"/>
        <el-table-column prop="countDetailsVO.completeRate" label="完播率" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.countDetailsVO.completeRate || 0 }}%
          </template>
        </el-table-column>
        <el-table-column prop="countDetailsVO.answerTimes" label="答题次数" align="center" min-width="100"/>
        <el-table-column prop="countDetailsVO.answerNum" label="答题人数" align="center" min-width="100"/>
        <el-table-column prop="countDetailsVO.answerRightNum" label="正确人数" align="center" min-width="100"/>
        <el-table-column prop="countDetailsVO.answerRightRate" label="正确率" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.countDetailsVO.answerRightRate || 0 }}%
          </template>
        </el-table-column>
        <el-table-column prop="countDetailsVO.redPacketNum" label="答题红包个数" align="center" min-width="120"/>
        <el-table-column prop="countDetailsVO.redPacketAmount" label="答题红包金额（元）" align="center" min-width="150"/>
      </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 {getDays, periodCountSelect, getPeriodCompanyList} from "@/api/course/userCoursePeriod";

export default {
  name: "CourseStatistics",
  props: {
    periodId: {
      type: [String, Number],
      default: ''
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 课程选项
      courseOptions: [],
      companyOptions: [],
      // 统计数据
      statistics: {
        courseCompleteNum: 0,
        courseWatchNum: 0,
        completeRate: '0%',
        courseWatchTimes: 0,
        answerTimes: 0,
        answerRightTimes: 0,
        redPacketAmount: 0
      },
      // 列表数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        videoIdList: [],
        // videoId: '',
        periodId: ''
      },
      // 是否已初始化
      initialized: false
    };
  },
  watch: {
    periodId: {
      handler(newVal) {
        this.queryParams.periodId = newVal;
        if (this.active && !this.initialized) {
          this.initializeData();
        }
      },
      immediate: true
    },
    active: {
      handler(newVal) {
        if (newVal && !this.initialized) {
          this.initializeData();
        }
      },
      immediate: true
    }
  },
  methods: {
    /** 初始化数据 */
    initializeData() {
      this.getCourseOptions();
      this.getCountList();
      this.getCompanyOptions()
      this.initialized = true;
    },
    getCompanyOptions() {
      getPeriodCompanyList({
        periodId: this.periodId
      }).then(response => {
        this.companyOptions = response.data || [];
      });
    },
    /** 获取课程选项 */
    getCourseOptions() {
      this.loading = true;
      getDays(this.queryParams).then(r => {
        if (r.code === 200) {
          this.courseOptions = r.rows;
          this.loading = false;
        } else {
          this.$message.error(r.msg || '获取数据失败');
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getCountList();
    },
    /** 课程选择变化 */
    handleCourseChange() {
    },
    /** 获取列表数据 */
    getCountList() {
      this.loading = true;
      periodCountSelect(this.queryParams).then(response => {
        if (response.code === 200) {
          // 设置列表数据
          this.list = response.rows;
          this.total = response.total || 0;

          // 计算总统计数据
          this.calculateTotalStatistics();

          console.log('列表数据:', this.list);
        } else {
          this.$message.error(response.msg || '获取数据失败');
        }
        this.loading = false;
      }).catch(error => {
        console.error('获取数据失败:', error);
        this.$message.error('获取数据失败');
        this.loading = false;
      });
    },
    /** 计算总统计数据 */
    calculateTotalStatistics() {
      // 初始化统计数据
      this.statistics = {
        courseCompleteNum: 0,
        courseWatchNum: 0,
        completeRate: '0%',
        courseWatchTimes: 0,
        answerTimes: 0,
        answerRightTimes: 0,
        redPacketAmount: 0
      };

      // 如果没有数据，直接返回
      if (!this.list || this.list.length === 0) {
        return;
      }

      // 遍历列表数据，累加各项统计数据
      this.list.forEach(item => {
        const details = item.countDetailsVO || {};

        // 累加各项数据
        this.statistics.courseCompleteNum += details.courseCompleteNum || 0;
        this.statistics.courseWatchNum += details.courseWatchNum || 0;
        this.statistics.courseWatchTimes += details.courseWatchTimes || 0;
        this.statistics.answerTimes += details.answerTimes || 0;
        this.statistics.answerRightTimes += details.answerRightNum || 0;
      //  this.statistics.redPacketAmount += details.redPacketAmount || 0;
        // 累加时：先转整数计算
        this.statistics.redPacketAmount = (Math.round(this.statistics.redPacketAmount * 100) +  // 现有金额转分
          Math.round((details.redPacketAmount || 0) * 100)     // 新增金额转分
        ) / 100;  // 最后转回元
      });

      // 计算完播率
      if (this.statistics.courseWatchNum > 0) {
        const rate = (this.statistics.courseCompleteNum / this.statistics.courseWatchNum * 100).toFixed(2);
        this.statistics.completeRate = rate + '%';
      }
    }
  }
};
</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>