From 5f3eb415712eb84beb6acbac4c0f5895179a2f1a Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Wed, 19 Jul 2023 17:20:15 +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

---
 src/components/changeTheme/index.vue          |   2 +
 .../largeScreen/largeScreenOne/index.vue      |   2 +-
 .../largeScreen/largeScreenTwo/index.vue      |   2 +-
 .../investmentPayment/index.vue               |   2 +-
 .../progressManagement/index.vue              |   2 +-
 .../qualityControl/index.vue                  |   2 +-
 .../safetyManagement/index.vue                |   2 +-
 .../environmentalMonitoring/index.vue         |   2 +-
 .../largeScreen/largeScreenOne/index.vue      | 305 +++++-------------
 .../progressManagement/ganttChart/index.vue   |   3 +
 10 files changed, 99 insertions(+), 225 deletions(-)

diff --git a/src/components/changeTheme/index.vue b/src/components/changeTheme/index.vue
index 314ec10..0f814f4 100644
--- a/src/components/changeTheme/index.vue
+++ b/src/components/changeTheme/index.vue
@@ -9,12 +9,14 @@
 <script setup lang="tsx" name="ProjectSupervisionRecord">
 import { ref, reactive, nextTick, computed } from "vue";
 import { useTheme } from "@/hooks/useTheme";
+import { sendIframeMessage } from "@/utils/util";
 const { changePrimary } = useTheme();
 const changePrimaryVal = (val: string) => {
 	// const body = document.body as HTMLElement;
 	// body.setAttribute("style", `filter: opacity(0.7);background-color: ${val};`);
 	// body.setAttribute("style", "filter: invert(80%)");
 	changePrimary(val);
+	sendIframeMessage({ isTheme: val }, 2, undefined);
 };
 </script>
 <style scoped lang="scss">
diff --git a/src/views/goverment/huizhou/largeScreen/largeScreenOne/index.vue b/src/views/goverment/huizhou/largeScreen/largeScreenOne/index.vue
index 82c518b..925c0d9 100644
--- a/src/views/goverment/huizhou/largeScreen/largeScreenOne/index.vue
+++ b/src/views/goverment/huizhou/largeScreen/largeScreenOne/index.vue
@@ -74,7 +74,7 @@ const getProjectList = async () => {
 };
 onMounted(async () => {
 	await getProjectList();
-	await sendIframeMessage({ path: globalStore.path, moduleId: globalStore.moduleId }, 2, undefined);
+	await sendIframeMessage({ obj: { path: globalStore.path, moduleId: globalStore.moduleId } }, 2, undefined);
 });
 </script>
 
diff --git a/src/views/goverment/huizhou/largeScreen/largeScreenTwo/index.vue b/src/views/goverment/huizhou/largeScreen/largeScreenTwo/index.vue
index 98c8722..7a72288 100644
--- a/src/views/goverment/huizhou/largeScreen/largeScreenTwo/index.vue
+++ b/src/views/goverment/huizhou/largeScreen/largeScreenTwo/index.vue
@@ -34,7 +34,7 @@ const changeScreen = async () => {
 	// screenValue.value = screenValue.value == 0 ? 1 : 0;
 };
 onMounted(async () => {
-	await sendIframeMessage({ path: globalStore.path, moduleId: globalStore.moduleId }, 2, undefined);
+	await sendIframeMessage({ obj: { path: globalStore.path, moduleId: globalStore.moduleId } }, 2, undefined);
 });
 </script>
 <style scoped lang="scss">
diff --git a/src/views/goverment/huizhou/progressManagement/investmentPayment/index.vue b/src/views/goverment/huizhou/progressManagement/investmentPayment/index.vue
index 97e617f..4b505ab 100644
--- a/src/views/goverment/huizhou/progressManagement/investmentPayment/index.vue
+++ b/src/views/goverment/huizhou/progressManagement/investmentPayment/index.vue
@@ -441,7 +441,7 @@ onMounted(async () => {
 	onSearch(records.value[0]);
 	searchSn.value = records.value[0].projectSn;
 	searchName.value = records.value[0].projectName;
-	await sendIframeMessage({ path: store.path, moduleId: store.moduleId }, 2, undefined);
+	await sendIframeMessage({ obj: { path: store.path, moduleId: store.moduleId } }, 2, undefined);
 });
 </script>
 
diff --git a/src/views/goverment/huizhou/projectMonitoring/progressManagement/index.vue b/src/views/goverment/huizhou/projectMonitoring/progressManagement/index.vue
index 976f2a6..d60534f 100644
--- a/src/views/goverment/huizhou/projectMonitoring/progressManagement/index.vue
+++ b/src/views/goverment/huizhou/projectMonitoring/progressManagement/index.vue
@@ -411,7 +411,7 @@ onMounted(async () => {
 	onSearch(records.value[0]);
 	searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
 	searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
-	await sendIframeMessage({ path: store.path, moduleId: store.moduleId }, 2, undefined);
+	await sendIframeMessage({ obj: { path: store.path, moduleId: store.moduleId } }, 2, undefined);
 });
 </script>
 
diff --git a/src/views/goverment/huizhou/projectMonitoring/qualityControl/index.vue b/src/views/goverment/huizhou/projectMonitoring/qualityControl/index.vue
index 9bdb726..45d0fcb 100644
--- a/src/views/goverment/huizhou/projectMonitoring/qualityControl/index.vue
+++ b/src/views/goverment/huizhou/projectMonitoring/qualityControl/index.vue
@@ -327,7 +327,7 @@ onMounted(async () => {
 	onSearch(records.value[0]);
 	searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
 	searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
-	await sendIframeMessage({ path: store.path, moduleId: store.moduleId }, 2, undefined);
+	await sendIframeMessage({ obj: { path: store.path, moduleId: store.moduleId } }, 2, undefined);
 });
 </script>
 <style scoped lang="scss">
diff --git a/src/views/goverment/huizhou/projectMonitoring/safetyManagement/index.vue b/src/views/goverment/huizhou/projectMonitoring/safetyManagement/index.vue
index 96dd6e8..1aee85b 100644
--- a/src/views/goverment/huizhou/projectMonitoring/safetyManagement/index.vue
+++ b/src/views/goverment/huizhou/projectMonitoring/safetyManagement/index.vue
@@ -295,7 +295,7 @@ onMounted(async () => {
 	onSearch(records.value[0]);
 	searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
 	searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
-	await sendIframeMessage({ path: store.path, moduleId: store.moduleId }, 2, undefined);
+	await sendIframeMessage({ obj: { path: store.path, moduleId: store.moduleId } }, 2, undefined);
 });
 </script>
 <style scoped lang="scss">
diff --git a/src/views/goverment/huizhou/siteSupervision/environmentalMonitoring/index.vue b/src/views/goverment/huizhou/siteSupervision/environmentalMonitoring/index.vue
index 553aa75..cc2352b 100644
--- a/src/views/goverment/huizhou/siteSupervision/environmentalMonitoring/index.vue
+++ b/src/views/goverment/huizhou/siteSupervision/environmentalMonitoring/index.vue
@@ -296,7 +296,7 @@ onMounted(async () => {
 	onSearch(records.value[0]);
 	searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
 	searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
-	await sendIframeMessage({ path: store.path, moduleId: store.moduleId }, 2, undefined);
+	await sendIframeMessage({ obj: { path: store.path, moduleId: store.moduleId } }, 2, undefined);
 });
 </script>
 
diff --git a/src/views/hz-project/largeScreen/largeScreenOne/index.vue b/src/views/hz-project/largeScreen/largeScreenOne/index.vue
index 0f831fb..2dc59d1 100644
--- a/src/views/hz-project/largeScreen/largeScreenOne/index.vue
+++ b/src/views/hz-project/largeScreen/largeScreenOne/index.vue
@@ -68,8 +68,9 @@
 				</div>
 				<div class="blockContent" style="height: 260px">
 					<!-- <img src="@/assets/images/hzImg/xm/video.png" alt="" width="100%" height="100%" /> -->
-					<video style="width: 100%; height: 100%; object-fit: fill" controls :src="videoData.videoUrl"></video>
+					<!-- <video style="width: 100%; height: 100%; object-fit: fill" controls :src="videoData.videoUrl"></video> -->
 					<!-- <div id="playWnd" class="playWnd"></div> -->
+					<div id="play_window" ref="playWndBox" class="main" style="width: 100%; height: 100%"></div>
 				</div>
 			</div>
 		</div>
@@ -169,58 +170,23 @@ import { getpreviewURL, getConfigInfo } from "@/api/modules/common";
 import { GlobalStore } from "@/stores";
 
 const store = GlobalStore();
+const playWndBox = ref(null);
 //获取项目信息
 const projectData = ref({
 	latitude: "",
 	longitude: "",
 	totalDay: ""
 });
-const playWndBox = ref(null);
 let playWndHeight = ref("");
 let playWndWidth = ref("");
-let oWebControl = ref(null);
-let pubKey = ref("");
-let objData = ref({
-	appkey: "29560841", //海康提供的appkey
-	ip: "120.236.122.37:442", //海康提供的ip
-	secret: "8RPzFJX4h0POasG5v9AU", //海康提供的secret
-	port: 18443,
-	playMode: 0, // 0 预览 1回放
-	layout: "4x6" //页面展示的模块数【16】
-});
-let cameraIndexCode = ref<Array<string>>([]);
+let myPlugin = ref("");
+let cameraIndexCode = ref<string>("");
+let playUrl = ref("");
+let playIndex = ref(0);
 const getProjectData = (data: any) => {
 	projectData.value = data;
 };
-const videoData = ref({
-	videoUrl: ""
-});
 const dataObj = ref({});
-const videoPlay = () => {
-	console.log(666);
-	// 视频播放
-	getVideo();
-	previewVideo("33ab35b2724b49b4936060c39858d795");
-};
-// 获取视频流
-const getVideo = async () => {
-	// await sendRequest({ code: cameraIndexCode.value });
-	await getpreviewURL({ cameraIndexCode: cameraIndexCode.value });
-};
-// 获取视频配置信息
-const getVideoConfig = async () => {
-	// await sendRequest({ code: cameraIndexCode.value });
-	const res = await getConfigInfo({});
-	objData.value = reactive({
-		appkey: res.result.appKey, //海康提供的appkey
-		ip: res.result.ip + ":" + res.result.port, //海康提供的ip
-		secret: res.result.appSecret, //海康提供的secret
-		port: 18443,
-		playMode: 0, // 0 预览 1回放
-		layout: "4x6" //页面展示的模块数【16】
-	});
-	console.log(objData.value);
-};
 const getPayMentData = async () => {
 	const res = await screenPayment({});
 	console.log(res);
@@ -307,190 +273,93 @@ const getInspect = async () => {
 // 		oWebControl.JS_Disconnect();
 // 	}
 // });
+// 播放视频流
+const playVideo = async () => {
+	let url = playUrl.value;
+	let newMyplugin = myPlugin.value;
+	console.log(url);
+	console.log(playIndex.value);
+	newMyplugin
+		.JS_Play(
+			url,
+			{
+				playURL: url, // 流媒体播放时必传
+				mode: 1 // 解码类型：0=普通模式; 1=高级模式 默认为0
+				// 设置直连时的认证参数等
+				// ...
+			},
+			playIndex.value //当前窗口下标
+		)
+		.then(
+			() => {
+				console.info("JS_Play success");
+				playIndex.value += 1;
+				// do you want...
+			},
+			() => {
+				console.info("JS_Play failed:");
+				// playIndex.value += 1;
+				// do you want...
+			}
+		);
+};
+// 获取视频流
+const getVideo = async () => {
+	// await sendRequest({ code: cameraIndexCode.value });
+	const res = await getpreviewURL({ cameraIndexCode: "a4badb0f00d2443d9bcf270654c8efc1", protocol: "ws" });
+	playUrl.value = res.result;
+	playVideo();
+	console.log(res);
+};
+const BeginPlayer = () => {
+	console.log(666, "-----------------");
+	// 初始化插件
+	myPlugin.value = new JSPlugin({
+		szId: "play_window", //需要英文字母开头 必填
+		szBasePath: "/public/h5player", // 必填,引用H5player.min.js的js相对路径
+		// szBasePath: "/h5player", // 打包后的地址
+		// szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
+		iWidth: playWndWidth.value + "px",
+		iHeight: playWndHeight.value + "px",
+		iMaxSplit: 4,
+		iCurrentSplit: 1,
+		openDebug: true
+	});
+};
 onMounted(async () => {
 	await getInspect();
 	await getPayMentData();
-	// 获取视频插件配置信息
-	await getVideoConfig();
-	// 初始化播放器插件
-	nextTick(() => {
-		initPlugin();
-	});
-});
-const initPlugin = () => {
-	console.log(666);
-	oWebControl = new WebControl({
-		szPluginContainer: "playWnd", // 指定容器id
-		iServicePortStart: 15900, // 指定起止端口号，建议使用该值
-		iServicePortEnd: 15900,
-		szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
-		cbConnectSuccess: () => {
-			console.log(666, "=======成功");
-			// 创建WebControl实例成功
-			oWebControl
-				.JS_StartService("window", {
-					// WebControl实例创建成功后需要启动服务
-					// 值"./VideoPluginConnect.dll"写死
-					dllPath: "./VideoPluginConnect.dll"
-				})
-				.then(
-					function () {
-						// 设置消息回调
-						oWebControl.JS_SetWindowControlCallback({
-							// cbIntegrationCallBack: cbIntegrationCallBack,
-						});
-						//JS_CreateWnd创建视频播放窗口，宽高可设定
-						oWebControl
-							.JS_CreateWnd("playWnd", 1000, 600, { bEmbed: true }) //这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
-							.then(function () {
-								// 创建播放实例成功后初始化
-								init();
-							});
-					},
-					function () {
-						// 启动插件服务失败
-					}
-				);
-		},
-		// 创建WebControl实例失败
-		cbConnectError: function () {
-			console.log(666, "=======失败");
-			// console.log(0);
-			// oWebControl.value = null;
-			// // 程序未启动时执行error函数，采用wakeup来启动程序
-			// window.WebControl.JS_WakeUp("VideoWebPlugin://");
-			// initCount++;
-			// if (initCount < 3) {
-			//   setTimeout(function () {
-			//     initPlugin();
-			//   }, 3000);
-			// } else {
-			//   setTimeout(function () {
-			//     setTimeout(function () {
-			//       $router.push('/home/PlugDown')
-			//     }, 4000)
-			//   }, 4000)
-			// }
-			// if (initCount.value < 2) {
-			// 	oWebControl.value = null;
-			// 	ElMessage.warning("插件未启动，正在尝试启动，请稍候...");
-			// 	// 程序未启动时执行error函数，采用wakeup来启动程序
-			// 	window.WebControl.JS_WakeUp("VideoWebPlugin://");
-			// 	setTimeout(() => {
-			// 		initPlugin();
-			// 	}, 3000);
-			// 	initCount.value++;
-			// } else {
-			// 	window.location.href = this.videoWebPluginUrl;
-			// }
-		},
-		cbConnectClose: () => {
-			console.log(666, "=======断开");
-			// 异常断开：bNormalClose = false
-			// JS_Disconnect正常断开：bNormalClose = true
-			// console.log("cbConnectClose");
-			oWebControl.value = null;
+	await BeginPlayer();
+	// 获取页面的实例对象 ee
+	const pageInstance = getCurrentInstance();
+	// 获取dom节点对象
+	const tagDomObj = pageInstance?.refs.playWndBox;
+	playWndHeight.value = tagDomObj?.clientHeight;
+	playWndWidth.value = tagDomObj?.clientWidth;
+
+	// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
+	window.addEventListener("scroll", () => {
+		if (myPlugin.value == undefined) {
+			setTimeout(function () {
+				myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
+			}, 500);
+			// setWndCover();
 		}
 	});
-	oWebControl.JS_ShowWnd();
-	console.log(777);
-	// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
-};
 
-// 初始化
-const init = (callback: (() => void) | undefined) => {
-	console.log(objData.value, "6666666");
-	getPubKey(() => {
-		let appkey = objData.value.appkey; //综合安防管理平台提供的appkey，必填
-		let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
-		let ip = objData.value.ip; //综合安防管理平台IP地址，必填
-		let playMode = objData.value.playMode; //初始播放模式：0-预览，1-回放
-		let port = objData.value.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
-		let snapDir = "D:\\SnapDir"; //抓图存储路径
-		let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
-		let layout = objData.value.layout; //playMode指定模式的布局
-		let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
-		let encryptedFields = "secret"; //加密字段，默认加密领域为secret
-		let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
-		let showSmart = 0; //是否显示移动框线框，0-不显示，非0-显示
-		let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
-		// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
-		oWebControl
-			.JS_RequestInterface({
-				funcName: "init",
-				argument: JSON.stringify({
-					appkey: appkey, //API网关提供的appkey
-					secret: secret, //API网关提供的secret
-					ip: ip, //API网关IP地址
-					playMode: playMode, //播放模式（决定显示预览还是回放界面）
-					port: port, //端口
-					snapDir: snapDir, //抓图存储路径
-					videoDir: videoDir, //紧急录像或录像剪辑存储路径
-					layout: layout, //布局
-					enableHTTPS: enableHTTPS, //是否启用HTTPS协议
-					encryptedFields: encryptedFields, //加密字段
-					showToolbar: showToolbar, //是否显示工具栏
-					showSmart: showSmart, //是否显示智能信息
-					buttonIDs //自定义工具条按钮
-				})
-			})
-			.then(function (oData: any) {
-				oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
-
-				if (callback) {
-					callback();
-				}
-				// 隐藏
-				// oWebControl.JS_HideWnd()
-			});
+	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+	window.addEventListener("resize", e => {
+		if (myPlugin.value == undefined) {
+			// console.log("wwwww", e);
+			setTimeout(function () {
+				myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
+			}, 500);
+			// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
+			// setWndCover();
+		}
 	});
-};
-// RSA 加密
-let setEncrypt = (value: string) => {
-	let encrypt = new window.JSEncrypt();
-	encrypt.setPublicKey(pubKey);
-	return encrypt.encrypt(value);
-};
-// 获取公钥
-const getPubKey = (callback: { (): void; (): void }) => {
-	oWebControl
-		.JS_RequestInterface({
-			funcName: "getRSAPubKey",
-			argument: JSON.stringify({
-				keyLength: 1024
-			})
-		})
-		.then(function (oData: { responseMsg: { data: Ref<string> } }) {
-			if (oData.responseMsg.data) {
-				pubKey = oData.responseMsg.data;
-				callback();
-			}
-		});
-};
-// 调用这个函数可进行视频播放
-// 视频预览功能
-const previewVideo = (data: string | null) => {
-	let cameraIndexCode = data; // 获取输入的监控点编号值，必填
-	let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
-	let transMode = 1; // 传输协议：0-UDP，1-TCP
-	let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
-	let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）
-
-	oWebControl
-		.JS_RequestInterface({
-			funcName: "startPreview",
-			argument: JSON.stringify({
-				cameraIndexCode: cameraIndexCode, // 监控点编号
-				streamMode: streamMode, // 主子码流标识
-				transMode: transMode, // 传输协议
-				gpuMode: gpuMode, // 是否开启GPU硬解
-				wndId: wndId // 可指定播放窗口
-			})
-		})
-		.then(function () {
-			oWebControl.JS_SetWindowControlCallback({});
-		});
-};
+	getVideo();
+});
 </script>
 <style scoped lang="scss">
 @import url("./style.scss");
diff --git a/src/views/hz-project/progressManagement/ganttChart/index.vue b/src/views/hz-project/progressManagement/ganttChart/index.vue
index 96c5eda..cb9621a 100644
--- a/src/views/hz-project/progressManagement/ganttChart/index.vue
+++ b/src/views/hz-project/progressManagement/ganttChart/index.vue
@@ -367,6 +367,9 @@ const handleOpen = (index: any) => {
 	} else {
 		openedIndex.value = index;
 	}
+	setTimeout(function () {
+		setGantts();
+	}, 300);
 };
 
 const handleScroll = (e: any) => {