From 665d2eca0974cb11a7b110b98ee6c621daf2d904 Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Thu, 14 Nov 2024 18:07:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(ruoyi-ui):=20=E6=B7=BB=E5=8A=A0=E6=96=B0?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE=E5=99=A8=E5=B9=B6=E9=9B=86?=
 =?UTF-8?q?=E6=88=90=20DPlayer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 router 中引入 OldVideoPlayer 组件
- 在 package.json 中添加 dplayer 依赖
- 新增 VidepPlayer.vue 组件，实现双视频播放功能
- 使用 DPlayer 库进行视频播放，支持截图功能
- 优化视频播放页面布局和样式
---
 ruoyi-ui/package.json                         |  1 +
 ruoyi-ui/src/router/index.js                  |  2 +-
 .../{VideoPlayer.vue => OldVideoPlayer.vue}   |  0
 .../recordInspectionCabinet/VidepPlayer.vue   | 99 +++++++++++++++++++
 4 files changed, 101 insertions(+), 1 deletion(-)
 rename ruoyi-ui/src/views/record/recordInspectionCabinet/{VideoPlayer.vue => OldVideoPlayer.vue} (100%)
 create mode 100644 ruoyi-ui/src/views/record/recordInspectionCabinet/VidepPlayer.vue

diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index dc085cb..431f62a 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -40,6 +40,7 @@
     "axios": "0.28.1",
     "clipboard": "2.0.8",
     "core-js": "3.37.1",
+    "dplayer": "^1.27.1",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 012dceb..e8a3912 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -7,7 +7,7 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 import VideoPlayer from "@/views/record/recordInspectionCabinet/VideoPlayer.vue";
-
+import OldVideoPlayer from "@/views/record/recordInspectionCabinet/OldVideoPlayer.vue";
 /**
  * Note: 路由配置项
  *
diff --git a/ruoyi-ui/src/views/record/recordInspectionCabinet/VideoPlayer.vue b/ruoyi-ui/src/views/record/recordInspectionCabinet/OldVideoPlayer.vue
similarity index 100%
rename from ruoyi-ui/src/views/record/recordInspectionCabinet/VideoPlayer.vue
rename to ruoyi-ui/src/views/record/recordInspectionCabinet/OldVideoPlayer.vue
diff --git a/ruoyi-ui/src/views/record/recordInspectionCabinet/VidepPlayer.vue b/ruoyi-ui/src/views/record/recordInspectionCabinet/VidepPlayer.vue
new file mode 100644
index 0000000..dd906cf
--- /dev/null
+++ b/ruoyi-ui/src/views/record/recordInspectionCabinet/VidepPlayer.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="video-container">
+    <h1>视频播放页面</h1>
+    <div ref="thermalPlayerContainer" class="player-container"></div>
+    <div ref="visiblePlayerContainer" class="player-container"></div>
+  </div>
+</template>
+
+<script>
+import DPlayer from 'dplayer';
+
+export default {
+  data() {
+    return {
+      thermalVideoUrl: '',
+      visibleVideoUrl: '',
+      thermalPlayer: null,
+      visiblePlayer: null
+    };
+  },
+  mounted() {
+    this.loadVideoPaths();
+  },
+  methods: {
+    async loadVideoPaths() {
+      const filePath = this.$route.query.filePath;
+      try {
+        // TODO: 修改为实际接口地址
+        const thermalResponse = `/dev-api/record/recordInspectionCabinet/getThermalVideo/${filePath}`;
+        this.thermalVideoUrl = thermalResponse;
+        const visibleResponse = `/dev-api/record/recordInspectionCabinet/getVisibleVideo/${filePath}`;
+        this.visibleVideoUrl = visibleResponse;
+
+        this.playVideo();
+      } catch (error) {
+        console.log(error);
+      }
+    },
+
+    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: this.thermalVideoUrl,
+          type: 'auto'
+        }
+      });
+
+      this.visiblePlayer = new DPlayer({
+        container: this.$refs.visiblePlayerContainer,
+        screenshot: true,
+        video: {
+          url: this.visibleVideoUrl,
+          type: 'auto'
+        }
+      });
+    }
+  },
+
+  beforeDestroy() {
+    if (this.thermalPlayer) {
+      this.thermalPlayer.destroy();
+    }
+    if (this.visiblePlayer) {
+      this.visiblePlayer.destroy();
+    }
+  }
+};
+
+</script>
+
+<style scoped>
+.video-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh; /* 使容器至少与视口一样高 */
+}
+
+.player-container {
+  width: 100%; /* 或者你可以设置一个固定宽度 */
+  max-width: 640px; /* 限制最大宽度 */
+  margin: 10px 0;
+  aspect-ratio: 16 / 9; /* 设置宽高比为16:9 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: black; /* 背景色，可根据需要调整 */
+}
+</style>