修改视频播放、文档阅读的学习记录

oa-back/ruoyi-system/src/main/resources/mapper/oa/CmcStudyMapper.xml

@@ -47,7 +47,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="resourceId != null "> and s.resource_id = #{resourceId}</if>
             <if test="userId != null "> and s.user_id = #{userId}</if>
             <if test="lastPoint != null  and lastPoint != ''"> and s.last_point = #{lastPoint}</if>
-            <if test="lastTime != null "> and s.last_time = #{lastTime}</if>
+            <if test="lastTime != null "> and YEAR(s.last_time) = YEAR(#{lastTime})</if>
             <if test="getHours != null "> and s.get_hours = #{getHours}</if>
         </where>
     </select>

oa-ui/package.json

@@ -61,6 +61,7 @@
     "jsencrypt": "3.0.0-rc.1",
     "nprogress": "0.2.0",
     "ol": "^7.1.0",
+    "pdfjs-dist": "^2.0.943",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",

oa-ui/src/views/oa/study/components/pdfStudy.vue

@@ -0,0 +1,254 @@
+<!--
+ * @Author: ysh
+ * @Date: 2025-03-06 14:38:35
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-03-11 16:16:33
+-->
+<template>
+  <div>
+    <div class="return-btn">
+      <div>
+        <el-button type="primary" size="mini" icon="el-icon-d-arrow-left"
+          @click="$router.push({ path: '/oa/study/myStudy' })">返回我的学习</el-button>
+      </div>
+      <div class="mt20">
+        学习进度：
+        <el-progress :text-inside="true" :status="formatStatus(percentage)" text-color="#fff" :stroke-width="26"
+          :percentage="percentage"></el-progress>
+      </div>
+      <div class="mt20" style="color:#E23D28;font-size:12px;line-height:30px;">
+        tips:鼠标滚动过快将导致进度计算失败，请隔2秒滚动一次页面。若一直未到100%，请返回我的学习重新进入课程。
+      </div>
+    </div>
+    <div id="pdf-container">
+
+      <div id="viewer" class="pdfViewer"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listStudy, getStudy, delStudy, addStudy, updateStudy } from "@/api/oa/study/myStudy";
+import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/build/pdf'
+import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer'
+// 设置 PDF.js 的 Web Worker 路径
+GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min');
+export default {
+  async mounted() {
+    await this.getData();
+    this.initPDFViewer()
+  },
+  data() {
+    return {
+      baseUrl: process.env.VUE_APP_BASE_API,
+      studyId: '',
+      pdfPath: '',
+      pdfViewer: null,
+      resource: {},
+      totalPages: 0, //总页数
+      readPages: [], //已阅读页数
+      lastPoint: 0,
+      debounceTimer: null,
+      observers: new Map(),
+      isComplete: false,
+      percentage: 0,
+    }
+  },
+  methods: {
+    async getData() {
+      this.studyId = this.$route.params.id;
+      let resData = await getStudy(this.studyId);
+      let data = resData.data;
+      this.pdfPath = data.resource.sourcePath;
+      this.lastPoint = parseFloat(data.lastPoint);
+      this.resource = data.resource;
+      if (Number(this.lastPoint) == 100) {
+        this.isComplete = true;
+        this.$message.success('文档已阅读完毕')
+      }
+    },
+    // 初始化查看器
+    async initPDFViewer() {
+      this.pdfViewer = new PDFViewer({
+        container: document.getElementById('pdf-container'),
+        enhanceTextSelection: true,
+        textLayerMode: 1
+      })
+      // 先绑定监听页面变化事件
+      this.setupViewerEvents();
+      // 加载文档
+      const loadingTask = getDocument({
+        url: `/dev-api/profile/upload/${this.pdfPath}`,
+        cMapPacked: true
+      })
+      try {
+        const pdfDocument = await loadingTask.promise
+        this.pdfViewer.setDocument(pdfDocument);
+        this.totalPages = pdfDocument.numPages;
+        this.readPages = new Array(this.totalPages).fill(false);
+        let curProgress = Math.round((this.lastPoint / 100) * this.totalPages);
+        this.percentage = Math.round(curProgress / this.totalPages) * 100;
+        for (let i = 0; i < curProgress; i++) {
+          this.readPages[i] = true
+        }
+        this.$nextTick(() => {
+          this.setupPageObservers();
+        });
+      } catch (err) {
+        console.error('PDF加载失败:', err)
+      }
+      // 添加窗口缩放监听
+      window.addEventListener("resize", this.handleResize);
+    },
+    handleResize() {
+      if (this.pdfViewer) {
+        this.pdfViewer.update();
+      }
+    },
+    setupViewerEvents() {
+      const eventBus = this.pdfViewer.eventBus;
+      // 新增 pagesloaded 事件监听
+      eventBus.on('pagesloaded', () => {
+        this.scrollToLastPosition();
+        this.setupPageObservers()
+      });
+    },
+    scrollToLastPosition() {
+      if (!this.lastPoint || !this.totalPages) return
+      // 计算目标页码（向上取整）
+      const pageNumber = Math.min(
+        Math.ceil((this.lastPoint / 100) * this.totalPages),
+        this.totalPages
+      )
+      // 查找对应的页面元素
+      const pageElement = document.querySelector(
+        `.page[data-page-number="${pageNumber}"]`
+      )
+      if (pageElement) {
+        // 获取页面元素的垂直位置
+        const pageTop = pageElement.offsetTop
+        // 设置滚动位置（带20px顶部留白）
+        document.getElementById('pdf-container').scrollTo({
+          top: pageTop - 20,
+          behavior: 'auto'
+        })
+      }
+    },
+    setupPageObservers() {
+      // 清理旧观察者
+      this.observers.forEach((observer, page) => {
+        observer.disconnect();
+        delete page.dataset.timer;
+      });
+      this.observers.clear();
+      const pages = document.querySelectorAll('.page');
+      pages.forEach(page => {
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach(entry => {
+            const pageNumber = parseInt(page.dataset.pageNumber);
+            if (entry.isIntersecting) {
+              page.dataset.enterTime = Date.now();
+              page.dataset.timer = setTimeout(() => {
+                if (!this.readPages[pageNumber - 1]) {
+                  this.$set(this.readPages, pageNumber - 1, true);
+                  this.updateProgress();
+                }
+              }, 2000);
+            } else {
+              clearTimeout(page.dataset.timer);
+              delete page.dataset.enterTime;
+            }
+          });
+        }, { threshold: 0.5, root: this.pdfViewer.container });
+
+        this.observers.set(page, observer);
+        observer.observe(page);
+      });
+    },
+    updateProgress() {
+      if (!this.isComplete) {
+        const readCount = this.readPages.filter(Boolean).length;
+        const progress = Math.round(readCount / this.totalPages * 100);
+        this.percentage = progress;
+        // 防抖保存
+        if (!this.debounceTimer) {
+          this.debounceTimer = setTimeout(() => {
+            this.saveProgress(progress);
+            this.debounceTimer = null;
+          }, 2000);
+        }
+      }
+    },
+    async saveProgress(progress) {
+      try {
+        if (parseFloat(progress) == 100) {
+          this.$message.success('文档已阅读完毕！学时+' + this.resource.hours)
+          progress = 100
+        }
+        await updateStudy(
+          {
+            studyId: this.studyId,
+            lastPoint: progress,
+            getHours: Math.round((this.resource.hours * progress) / 100),
+            lastTime: this.parseTime(new Date(), '{y}-{m}-{d}')
+          });
+      } catch (error) {
+        console.error('保存进度失败:', error);
+      }
+    },
+    formatStatus(row) {
+      if (!row) {
+        row = 0
+        return 'exception'
+      }
+      if (row <= 20) {
+        return 'exception'
+      } else if (row > 20 && row <= 50) {
+        return 'warning'
+      } else if (row > 50 && row <= 80) {
+        return null
+      } else {
+        return 'success'
+      }
+    },
+  },
+  beforeDestroy() {
+    // 清理观察者和定时器
+    this.observers.forEach((observer, page) => {
+      observer.disconnect();
+      clearTimeout(page.dataset.timer);
+    });
+    window.removeEventListener("resize", this.handleResize);
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~pdfjs-dist/web/pdf_viewer.css';
+
+/* 修改后 */
+#pdf-container {
+  position: relative;
+  /* 改为相对定位，避免脱离文档流 */
+  width: 100%;
+  height: calc(100vh - 88px);
+  /* 根据实际布局调整高度 */
+  overflow: auto;
+  background-color: #cdcdcd;
+}
+
+.pdfViewer .page {
+  margin: 1em auto;
+  border: 1px solid #ddd;
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
+}
+
+.return-btn {
+  position: absolute;
+  left: 20px;
+  top: 100px;
+  z-index: 9999;
+  width: 230px;
+}
+</style>

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

@@ -2,7 +2,7 @@
  * @Author: ysh
  * @Date: 2025-03-05 14:19:02
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2025-03-06 14:26:32
+ * @LastEditTime: 2025-03-11 17:00:41
 -->
 <template>
   <div class="head-bg">
@@ -31,12 +31,29 @@
 </template>
 
 <script>
+import { listStudy, getStudy, delStudy, addStudy, updateStudy } from "@/api/oa/study/myStudy";
+
 export default {
   data() {
     return {
       hours: 0,
     }
   },
+  created() {
+    this.getYearHours();
+  },
+  methods: {
+    getYearHours() {
+      let lastTime = new Date().getFullYear() + '-01-01'
+      listStudy({ userId: this.$store.getters.userId, lastTime: lastTime }).then(res => {
+        console.log(res);
+        if (res.total > 0) {
+          this.hours = res.rows.reduce((sum, item) => sum + Number(item.getHours), 0)
+        }
+
+      })
+    }
+  },
 }
 </script>
 
@@ -93,7 +110,7 @@ export default {
       font-family: 'puhuiti';
       line-height: 28px;
       margin-top: 52px;
-      margin-left:20px;
+      margin-left: 20px;
     }
 
     .user-study {

oa-ui/src/views/oa/study/components/studyLeft.vue

@@ -2,7 +2,7 @@
  * @Author: ysh
  * @Date: 2025-03-05 15:01:52
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2025-03-07 15:03:55
+ * @LastEditTime: 2025-03-11 16:47:24
 -->
 <template>
   <div>
@@ -30,6 +30,9 @@
         </template>
       </el-table-column>
     </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+      :layout="'total, prev, pager, next,jumper'" :limit.sync="queryParams.pageSize" :autoScroll="false"
+      @pagination="getRecordsList" />
   </div>
 </template>
 
@@ -42,7 +45,10 @@ export default {
       loading: true,
       studyList: [],
       total: 0,
-      queryParams: {}
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10
+      }
     }
   },
   created() {
@@ -60,7 +66,6 @@ export default {
     },
     startStudy(record) {
       const routeName = record.resource.type === '视频' ? 'VideoStudy' : 'PdfStudy';
-      console.log(record);
       this.$router.push({
         name: routeName,
         params: { id: record.studyId }

oa-ui/src/views/oa/study/components/studyRight.vue

@@ -2,25 +2,10 @@
  * @Author: ysh
  * @Date: 2025-03-05 15:36:17
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2025-03-06 16:00:55
+ * @LastEditTime: 2025-03-11 16:48:55
 -->
 <template>
   <div class="right-box">
-    <!-- <div class="material-list">
-      <el-card v-for="item in resourceList" :key="item.id" class="material-item">
-        <div class="material-content">
-          <i :class="item.type === '视频' ? 'el-icon-video-camera' : 'el-icon-document'"
-            style="font-size: 24px;margin-right: 15px" />
-          <div class="material-info">
-            <h4>名称：{{ item.title }}</h4>
-            <span>学时：{{ item.hours }}个学时</span>
-          </div>
-          <el-button type="primary" size="mini" @click="addToStudy(item)">
-            添加
-          </el-button>
-        </div>
-      </el-card>
-    </div> -->
     <div class="video">
       <el-tabs v-model="videoTab" type="card">
         <el-tab-pane label="视频" name="video">
@@ -103,7 +88,6 @@ export default {
       });
     },
     addToStudy(row) {
-      console.log(row);
       this.$modal.confirm('是否添加资料名称为"' + row.title + '"到我的学习记录？').then(res => {
         let obj = {
           resourceId: row.resourceId,

oa-ui/src/views/oa/study/components/videoStudy.vue

@@ -1,8 +1,19 @@
 <template>
   <div class="video-container">
-    <el-button type="primary" @click="$router.push({ path: '/oa/study/myStudy' })">返回我的学习</el-button>
-    <video ref="videoPlayer" class="video-js vjs-big-play-centered" @play="handlePlay" @pause="handlePause"
-      @ended="handleEnd">
+    <div class="return-btn">
+      <el-button type="primary" size="mini" icon="el-icon-d-arrow-left"
+        @click="$router.push({ path: '/oa/study/myStudy' })">返回我的学习</el-button>
+      <div class="mt20">
+        学习进度：
+        <el-progress :text-inside="true" :status="formatStatus(percentage)" text-color="#fff" :stroke-width="26"
+          :percentage="percentage"></el-progress>
+      </div>
+      <div class="mt20" style="color:#E23D28;font-size:12px;line-height:30px;">
+        tips:视频不可拖动进度条，每隔30秒会自动保存，暂停也会保存视频进度，若出现学习进度一直不到100%，请退出后重新进入课程。
+      </div>
+    </div>
+    <video ref="videoPlayer" width="1300" height="750" class="custom-video video-js vjs-big-play-centered"
+      @play="handlePlay" @pause="handlePause" @ended="handleEnd">
     </video>
     <el-alert v-if="showProgressTip" type="info" :closable="false" class="progress-alert">
       已为您定位到上次播放位置：{{ formatTime(lastPosition) }}
@@ -27,6 +38,7 @@ export default {
       getHours: '', //可获得的学时
       isComplete: false, //是否已经看完
       showProgressTip: false,
+      resource: {},
       // 禁用功能配置
       disabledControls: [
         'progressControl', // 隐藏进度条
@@ -35,6 +47,7 @@ export default {
         'playbackRateMenuButton'
       ],
       videoDuration: undefined,
+      percentage: 0,
     };
   },
   watch: {
@@ -67,14 +80,17 @@ export default {
   methods: {
     async getData() {
       let studyId = this.$route.params.id;
-      let resData = await getStudy(studyId)
+      let resData = await getStudy(studyId);
       let data = resData.data
+      this.resource = data.resource;
       this.videoPath = data.resource.sourcePath;
+      this.percentage = Number(data.lastPoint);
+      if (Number(data.lastPoint) > 0 && Number(data.lastPoint) < 100) {
+        this.showProgressTip = true;
+      }
       if (Number(data.lastPoint) == 100) {
         this.isComplete = true;
         this.getHours = data.resource.hours;
-        console.log(data.resource);
-
         this.$message.warning('视频已学习完毕，若要再次学习，请在学习记录里重新添加该课程。')
       }
     },
@@ -110,10 +126,10 @@ export default {
         }
       });
 
-      // 节流保存（每10秒保存一次）
+      // 节流保存（每30秒保存一次）
       this.player.on('timeupdate', _.throttle(() => {
         this.saveCurrentPosition();
-      }, 10000));
+      }, 30000));
     },
     // 加载上次播放位置
     async loadLastPosition() {
@@ -155,8 +171,14 @@ export default {
     },
 
     // 处理视频结束
-    handleEnd() {
-      this.saveCurrentPosition(true);
+    async handleEnd() {
+      this.$message.warning('视频已学习完毕，若要再次学习，请在学习记录里重新添加该课程。')
+      await updateStudy({
+        studyId: this.videoId,
+        lastPoint: 100,
+        getHours: this.resource.hours,
+        lastTime: this.parseTime(new Date(), '{y}-{m}-{d}')
+      });
     },
     // 保存当前进度
     async saveCurrentPosition(isEnd = false) {
@@ -166,18 +188,17 @@ export default {
       if (isNaN(percentage)) {
         return
       }
+      this.percentage = Number(percentage)
       try {
-        if (!this.isComplete) {
-          await updateStudy({
-            studyId: this.videoId,
-            lastPoint: percentage
-          });
-        } else {
-          await updateStudy({
-            studyId: this.videoId,
-            getHours: this.getHours
-          });
+        if (Number(percentage) == 100) {
+          return
         }
+        await updateStudy({
+          studyId: this.videoId,
+          lastPoint: percentage,
+          getHours: Math.round((this.resource.hours * percentage) / 100),
+          lastTime: this.parseTime(new Date(), '{y}-{m}-{d}')
+        });
         // 始终更新 lastPosition（即使播放结束）
         this.lastPosition = currentTime;
       } catch (error) {
@@ -191,6 +212,21 @@ export default {
       date.setSeconds(seconds);
       return date.toISOString().substr(11, 8);
     },
+    formatStatus(row) {
+      if (!row) {
+        row = 0
+        return 'exception'
+      }
+      if (row <= 20) {
+        return 'exception'
+      } else if (row > 20 && row <= 50) {
+        return 'warning'
+      } else if (row > 50 && row <= 80) {
+        return null
+      } else {
+        return 'success'
+      }
+    },
   },
   beforeDestroy() {
     if (this.player) {
@@ -203,8 +239,20 @@ export default {
 <style lang="scss" scoped>
 .video-container {
   position: relative;
-  width: 1000px;
-  // margin: 0 auto;
+
+  .return-btn {
+    position: absolute;
+    left: 20px;
+    top: 30px;
+    width: 130px;
+  }
+
+  .custom-video {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, 0%);
+  }
 
   .progress-alert {
     position: absolute;