From 828ddce74801f2ffddd3ff5dc49764cc9185acb4 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Tue, 5 Mar 2024 19:45:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../newProjectOverView/centerTop.vue          | 98 ++++++++++---------
 .../videoManagement/ckplayerComp.vue          |  4 +-
 2 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/src/views/sevenLargeScreen/newProjectOverView/centerTop.vue b/src/views/sevenLargeScreen/newProjectOverView/centerTop.vue
index 7b91e11..cd97e82 100644
--- a/src/views/sevenLargeScreen/newProjectOverView/centerTop.vue
+++ b/src/views/sevenLargeScreen/newProjectOverView/centerTop.vue
@@ -4,70 +4,80 @@
 			<i>实时数据</i>
 		</div>
 		<div class="tab-select">
-			<span :class="activeTab == 0?'active-span':''" @click="changeActive(0)">实时监控</span>
-			<span :class="activeTab == 1?'active-span':''" @click="changeActive(1)">3D模型</span>
+			<span :class="activeTab == 0 ? 'active-span' : ''" @click="changeActive(0)">实时监控</span>
+			<span :class="activeTab == 1 ? 'active-span' : ''" @click="changeActive(1)">3D模型</span>
 		</div>
 		<div class="href-content" v-if="activeTab == 0">
 			<el-carousel indicator-position="none" height="450px">
-				<el-carousel-item v-for="(item,index) in videoList" :key="index">
-					<video
-						style="height: 100%; width: 100%"
-						:id="'videoItem' + index"
-						muted
-						autoplay
-					/>
+				<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
+					<div style="width: 100%;height: 100%;">
+						<ckplayerComp
+							:name="index"
+							:poster="''"
+							:deviceIp="`http://${item.account}:${item.password}`"
+							:videoUrls="item.serialNumber"
+							:autoPlay="true"
+						></ckplayerComp>
+					</div>
 				</el-carousel-item>
-		</el-carousel>
+			</el-carousel>
 		</div>
 		<div class="href-content" v-if="activeTab == 1">
-			<iframe :src="iframeUrl" frameborder="0" style="width: 100%;height: 100%;"></iframe>
+			<iframe :src="iframeUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { GlobalStore } from "@/stores";
-import { ref, watch, onMounted, onBeforeUnmount } from "vue";
-import Srs from "@/assets/js/srs.sdk";
+import { ref, watch, onMounted, getCurrentInstance } from "vue";
 import { selectProjectVideoListApi } from "@/api/modules/video";
-const emits = defineEmits(["openDialog"])
+import ckplayerComp from "../videoManagement/ckplayerComp.vue";
+const emits = defineEmits(["openDialog"]);
 const store = GlobalStore();
 const rtcPlayer = ref();
 const videoList = ref([] as any);
-const activeTab = ref(0)
-const iframeUrl = ref('http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html')
+const activeTab = ref(0);
+const iframeUrl = ref("http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html");
 const getVideoList = async () => {
 	let res: any = await selectProjectVideoListApi({
 		projectSn: store.sn,
 		all: 1
 		// all=1查全部
 	});
-	videoList.value = res.result.videoList
+	videoList.value = res.result.videoList;
+	// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
+	setTimeout(() => {
+		// 获取所有的 video 元素
+		var videos = document.getElementsByTagName('video');
+		
+		// 遍历所有的 video 元素
+		for (var i = 0; i < videos.length; i++) {
+			// 修改视频元素的样式
+			videos[i].style.width = '99.9%';
+			videos[i].style.height = '99.9%';
+		}
+	}, 1000);
 };
-const changeActive = (activeIndex:any) => {
+const changeActive = (activeIndex: any) => {
 	activeTab.value = activeIndex;
-	iframeUrl.value = activeIndex == 0?'http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html':'http://jxjzw.zhgdyun.com:8082/rt-3dmx'
-}
-watch(() => activeTab.value, (newVal) => {
-	if(newVal == 0){
-		for (let i = 0; i < videoList.value.length; i++) {
-          let player:any = document.getElementById("videoItem" + i);
-          //方法一：使用srs.sdk.js
-          rtcPlayer.value = new Srs.SrsRtcWhipWhepAsync();
-          rtcPlayer.value.play(videoList.value[i].videoUrl);
-          // video标签
-          player.srcObject = rtcPlayer.value.stream;
-          // 方法二：使用jswebrtc.min.js
-          // new JSWebrtc.Player(this.url, { video: player, autoplay: true, });
-        }
-	}
-})
+	iframeUrl.value =
+		activeIndex == 0 ? "http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html" : "http://jxjzw.zhgdyun.com:8082/rt-3dmx";
+};
+// watch(
+// 	() => activeTab.value,
+// 	newVal => {
+// 		if (newVal == 0) {
+// 			getVideoList();
+// 		}
+// 	},
+// 	{
+// 		immediate: true
+// 	}
+// );
 onMounted(() => {
-	getVideoList()
-})
-onBeforeUnmount(() => {
-	rtcPlayer.value?.close();
-})
+	getVideoList();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -91,25 +101,25 @@ onBeforeUnmount(() => {
 			margin-right: auto;
 		}
 	}
-	.tab-select{
+	.tab-select {
 		width: 35%;
 		margin: 0 auto;
 		margin-top: 20px;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		span{
+		span {
 			cursor: pointer;
-			color: #7C859C;
+			color: #7c859c;
 			font-size: 15px;
 			transition: all 0.5s;
 		}
-		.active-span{
+		.active-span {
 			color: #fff;
 			font-size: 18px;
 		}
 	}
-	.href-content{
+	.href-content {
 		width: 95%;
 		height: 490px;
 		margin: 0 auto;
diff --git a/src/views/sevenLargeScreen/videoManagement/ckplayerComp.vue b/src/views/sevenLargeScreen/videoManagement/ckplayerComp.vue
index baa8c28..8cc8777 100644
--- a/src/views/sevenLargeScreen/videoManagement/ckplayerComp.vue
+++ b/src/views/sevenLargeScreen/videoManagement/ckplayerComp.vue
@@ -1,7 +1,7 @@
 <!--ckplayer 视频播放-->
 <template>
-	<div style="height: 100%">
-		<video :id="'videoItem' + name" controls autoplay style="width: 100%; height: 100%; object-fit: fill" />
+	<div style="width: 100%;height: 100%">
+		<video :id="'videoItem' + name" muted controls autoplay style="width: 100%;height: 100%;object-fit: fill;" />
 	</div>
 </template>