refactor(record): 重构视频播放组件

- 移除了 OldVideoPlayer.vue 中未使用的导入和注释代码

- 添加注释

ruoyi-ui/src/views/record/recordInspectionCabinet/OldVideoPlayer.vue

@@ -97,7 +97,6 @@ video {
 
 
 
-
 <template>
   <div class="video-container">
     <h1>视频播放页面</h1>
@@ -115,9 +114,6 @@ video {
 
 
 <script>
-import {getThermalVideo, getVisibleVideo} from "@/api/record/recordInspectionCabinet";
-import axios from 'axios';
-
 
 export default {
   data() {
@@ -147,10 +143,6 @@ export default {
                 this.thermalVideoUrl = thermalResponse;
                 const visibleResponse = `/prod-api/record/recordInspectionCabinet/getVisibleVideo/${filePath}`;
                 this.visibleVideoUrl = visibleResponse;*/
-        /*        const thermalResponse =  getThermalVideo(filePath);
-                this.thermalVideoUrl = thermalResponse;
-                const visibleResponse=  getVisibleVideo(filePath);
-                this.visibleVideoUrl = visibleResponse;*/
 
         this.playVideo();
       } catch (error) {
@@ -185,5 +177,4 @@ video {
 .video-container video {
   margin-bottom: 20px; /* 在每个视频下方添加20px的间隔 */
 }
-
 </style>

ruoyi-ui/src/views/record/recordInspectionCabinet/VideoPlayer.vue

@@ -27,8 +27,8 @@ export default {
       const filePath = this.$route.query.filePath;
       try {
 
-/*        TODO:修改为实际接口地址
-        const thermalResponse = `/dev-api/record/recordInspectionCabinet/getThermalVideo/${filePath}`;
+        //TODO:修改为实际接口地址
+/*        const thermalResponse = `/dev-api/record/recordInspectionCabinet/getThermalVideo/${filePath}`;
         this.thermalVideoUrl = thermalResponse;
         const visibleResponse = `/dev-api/record/recordInspectionCabinet/getVisibleVideo/${filePath}`;
         this.visibleVideoUrl = visibleResponse;*/
@@ -36,10 +36,6 @@ export default {
         this.thermalVideoUrl = thermalResponse;
         const visibleResponse = `/prod-api/record/recordInspectionCabinet/getVisibleVideo/${filePath}`;
         this.visibleVideoUrl = visibleResponse;
-        /*        const thermalResponse =  getThermalVideo(filePath);
-                this.thermalVideoUrl = thermalResponse;
-                const visibleResponse=  getVisibleVideo(filePath);
-                this.visibleVideoUrl = visibleResponse;*/
 
         this.playVideo();
       } catch (error) {
@@ -48,25 +44,43 @@ export default {
     },
 
     playVideo() {
+      // 销毁热成像播放器实例，如果存在的话
       if (this.thermalPlayer) {
         this.thermalPlayer.destroy();
       }
+
+      // 销毁可见光播放器实例，如果存在的话
       if (this.visiblePlayer) {
         this.visiblePlayer.destroy();
       }
 
+      // 初始化红外视频播放器实例
       this.thermalPlayer = new DPlayer({
+        // 指定视频播放器的容器
         container: this.$refs.thermalPlayerContainer,
+        // 启用截图功能
         screenshot: true,
+        // 配置视频源
         video: {
+          // 设置视频的URL
           url: this.thermalVideoUrl,
+          // 自动检测视频类型
           type: 'auto'
         },
+
+        // 定义一个数组，用于在组件中动态生成上下文菜单
         contextmenu: [
+          // 创建一个菜单项对象
           {
+            // 菜单项的文本内容
             text: '下载视频',
+            // 菜单项的链接地址，绑定到当前组件的 thermalVideoUrl 属性
             link: this.thermalVideoUrl,
+            // 菜单项的点击事件处理函数
             click: () => {
+              // 调用 downloadVideo 方法下载视频
+              // 参数1: 视频的URL，来自当前组件的 thermalVideoUrl 属性
+              // 参数2: 下载后的文件名
               this.downloadVideo(this.thermalVideoUrl, 'thermal-video.mp4');
             }
           }
@@ -92,7 +106,15 @@ export default {
       });
     },
 
+    /**
+     * 下载视频文件
+     * 该函数通过fetch API从给定的URL获取视频内容，并将其保存到本地，文件名由用户指定
+     *
+     * @param {string} url - 视频内容的URL地址，用于fetch API获取数据
+     * @param {string} filename - 保存到本地时使用的文件名
+     */
     downloadVideo(url, filename) {
+      // 使用fetch API从指定URL获取视频内容
       fetch(url)
         .then(response => response.blob())
         .then(blob => saveAs(blob, filename))
@@ -114,9 +136,13 @@ export default {
 
 <style scoped>
 .video-container {
+  /* 使用Flexbox布局来优化组件内部元素的排列 */
   display: flex;
+  /* 设置主轴方向为垂直，使子元素沿柱状轴线排列 */
   flex-direction: column;
+  /* 指定交叉轴上的对齐方式，使子元素在水平方向居中对齐 */
   align-items: center;
+  /* 指定主轴上的对齐方式，使子元素在垂直方向居中对齐 */
   justify-content: center;
   min-height: 100vh; /* 使容器至少与视口一样高 */
 }
@@ -126,6 +152,7 @@ export default {
   max-width: 640px; /* 限制最大宽度 */
   margin: 10px 0;
   aspect-ratio: 16 / 9; /* 设置宽高比为16:9 */
+/*使用Flexbox布局使内容居中显示*/
   display: flex;
   justify-content: center;
   align-items: center;