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
            filterable
            remote
            :remote-method="handleCourseSearch"
            :loading="courseLoading"
            placeholder="请输入关键词搜索营期课程"
            style="width: 400px"
            @visible-change="handleCourseDropdownVisible"
          >
            <el-option
              v-for="item in courseOptions"
              :key="item.videoId"
              :label="item.videoName"
              :value="item.videoId"
            />
            <!-- 分页加载更多选项 -->
            <el-option v-if="hasMoreCourses" key="load-more" disabled class="load-more-option">
              <div class="load-more" @click="loadMoreCourses">
                <span>加载更多</span>
                <i class="el-icon-loading" v-if="loadingMore"></i>
              </div>
            </el-option>
          </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-button type="info" :loading="exportLoading" @click="exportHandle">导出</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,exportInfo} from "@/api/course/userCoursePeriod";

export default {
  name: "CourseStatistics",
  props: {
    periodId: {
      type: [String, Number],
      default: ''
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      exportLoading: false,
      // 遮罩层
      loading: false,
      courseLoading: false,
      loadingMore: false,
      // 总条数
      total: 0,
      // 课程选项
      courseOptions: [],
      courseTotal: 0,
      courseQueryParams: {
        pageNum: 1,
        pageSize: 10, // 默认每页10条
        videoName: '',
        periodId: ''
      },
      hasMoreCourses: false,
      companyOptions: [],
      // 统计数据
      statistics: {
        courseCompleteNum: 0,
        courseWatchNum: 0,
        completeRate: '0%',
        courseWatchTimes: 0,
        answerTimes: 0,
        answerRightTimes: 0,
        redPacketAmount: 0
      },
      // 列表数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        videoIdList: [],
        companyId: '',
        periodId: ''
      },
      // 是否已初始化
      initialized: false
    };
  },
  watch: {
    periodId: {
      handler(newVal) {
        this.queryParams.periodId = newVal;
        this.courseQueryParams.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.getCompanyOptions();
      this.initialized = true;
    },

    getCompanyOptions() {
      getPeriodCompanyList({
        periodId: this.periodId
      }).then(response => {
        this.companyOptions = response.data || [];
      });
    },

    /** 获取课程选项 */
    getCourseOptions(isLoadMore = false) {
      if (!isLoadMore) {
        this.courseLoading = true;
        this.courseQueryParams.pageNum = 1; // 重置页码
      } else {
        this.loadingMore = true;
      }

      getDays(this.courseQueryParams).then(r => {
        if (r.code === 200) {
          if (isLoadMore) {
            // 加载更多时，追加数据
            this.courseOptions = [...this.courseOptions, ...r.rows];
          } else {
            // 首次加载或搜索时，替换数据
            this.courseOptions = r.rows;
          }

          this.courseTotal = r.total || 0;

          // 计算是否还有更多数据
          const loadedCount = this.courseOptions.length;
          this.hasMoreCourses = loadedCount < this.courseTotal;

          this.courseLoading = false;
          this.loadingMore = false;
        } else {
          this.$message.error(r.msg || '获取数据失败');
          this.courseLoading = false;
          this.loadingMore = false;
        }
      }).catch(() => {
        this.courseLoading = false;
        this.loadingMore = false;
      });
    },

    /** 加载更多课程 */
    loadMoreCourses() {
      if (this.loadingMore) return;

      this.courseQueryParams.pageNum += 1;
      this.getCourseOptions(true);
    },

    /** 处理下拉框显示/隐藏 */
    handleCourseDropdownVisible(visible) {
      if (visible && this.courseOptions.length === 0) {
        // 当下拉框显示且没有数据时，加载初始数据
        this.getCourseOptions();
      }
    },

    /** 营期课程搜索 */
    handleCourseSearch(query) {
      this.courseQueryParams.videoName = query;
      this.courseQueryParams.pageNum = 1; // 搜索时重置页码
      this.getCourseOptions();
    },

    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getCountList();
    },

    /** 导出 */
    exportHandle(){
      this.$confirm('是否确认导出所有课程统计信息数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportInfo(this.queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },

    /** 获取列表数据 */
    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;
      });

      // 计算完播率
      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;
}

/* 加载更多选项样式 */
.load-more-option {
  text-align: center;
  padding: 8px 0;
}

.load-more {
  color: #409EFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.load-more:hover {
  color: #66b1ff;
}

:deep(.el-select-dropdown__list) {
  padding-bottom: 0 !important;
}
</style>