fix: BUG修改

src/api/modules/goverment.ts

@@ -416,3 +416,8 @@ export const getDevicePage = (params: {}) => {
 export const bigEntItemAll = (params: any) => {
 	return http.post(BASEURL + `/ent/projectSubItem/list`, params);
 };
+
+// 视频监控摄像头调整方向
+export const cameraAdjust = (params: any) => {
+	return http.post(BASEURL + `/xmgl/video/controlling`, params);
+};

src/layouts/LayoutClassic/index.vue

@@ -1,10 +1,10 @@
 <!-- 经典布局 -->
 <template>
 	<el-container class="layout">
-		<el-container class="classic-main">
+		<!-- <el-container class="classic-main">
 			<Main />
-		</el-container>
+		</el-container> -->
-		<!-- <el-header>
+		<el-header>
 			<div class="header-lf">
 				<div @click="goHome" class="logo flx-center">
 					<img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
@@ -15,10 +15,10 @@
 				<ToolBarLeft />
 			</div>
 			<ToolBarRight />
-		</el-header> -->
+		</el-header>
-		<!-- <el-container class="classic-content">
+		<el-container class="classic-content">
 			<el-aside>
-				<div class="menu" :style="{ width: isCollapse ? '65px' : '210px' }">  根据屏幕自动收缩
+				<!-- <div class="menu" :style="{ width: isCollapse ? '65px' : '210px' }">  根据屏幕自动收缩 -->
 				<div class="menu">
 					<el-scrollbar>
 						<el-menu
@@ -39,7 +39,7 @@
 			<el-container class="classic-main">
 				<Main />
 			</el-container>
-		</el-container> -->
+		</el-container>
 	</el-container>
 </template>
 

src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.scss

@@ -28,17 +28,40 @@
 				margin-left: 10px;
 			}
 		}
-		.main {
+		.player-list {
-			// position: fixed;
+			display: flex;
-			// top: 50%;
+			// display: grid;
-			// left: 30%;
+			// grid-template-columns: repeat(4, 1fr);
-			// transform: translateY(-50%);
+			// grid-template-columns: repeat(auto-fit, minmax(530px, 0fr));
-			// margin: 0 20px;
+			// grid-gap: 20px;
-			border-radius: 8px;
+			.player-box {
-			flex: 1;
+				width: 25%;
-			height: 80vh;
+				max-width: 345px;
-			// margin: auto;
+				height: 280px;
-			// background-color: rgba(255, 192, 203, 0.4);
+				position: relative;
+				.main {
+					width: 100% !important;
+					height: 100% !important;
+					:deep() {
+						.sub-wnd {
+							width: 100% !important;
+							height: 100% !important;
+						}
+					}
+				}
+				.close-btn {
+					cursor: pointer;
+					position: absolute;
+					top: 0;
+					right: 0;
+				}
+				.full-btn {
+					cursor: pointer;
+					position: absolute;
+					bottom: 0;
+					right: 0;
+				}
+			}
 		}
 	}
 	// .right-form {
@@ -217,3 +240,54 @@
 		background-color: #092945;
 	}
 }
+// 实时画面弹框
+.video-relative {
+	display: flex;
+	&-left {
+		width: 170px;
+		margin-right: auto;
+		display: flex;
+		flex-direction: column;
+		.left-title {
+			background-image: -webkit-linear-gradient(bottom, #1dfcff, #189bff);
+			background-clip: text;
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+			font-size: 22px;
+		}
+		.direction-control {
+			width: 170px;
+			margin-top: 40px;
+			.control-top,
+			.control-bottom {
+				display: flex;
+				justify-content: center;
+			}
+			.control-center {
+				display: flex;
+				justify-content: space-between;
+				margin: 10px 0px;
+			}
+		}
+		.img-photo {
+			display: flex;
+			justify-content: center;
+			margin-top: 40px;
+		}
+	}
+	&-right {
+		position: relative;
+		width: calc(100% - 200px);
+		margin-left: 30px;
+		.main {
+			width: 100%;
+			height: 300px;
+		}
+		.full-btn {
+			cursor: pointer;
+			position: absolute;
+			bottom: 0;
+			right: 0;
+		}
+	}
+}

src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.vue

@@ -24,12 +24,45 @@
 					<h3>实时视频</h3>
 					<!-- <span>-</span>
 					<h3>{{ childTitle }}</h3> -->
-					<img @click="onPhoto" src="@/assets/images/AIwaring/抓拍.png" alt="" />
+				</div>
+				<div class="player-list">
+					<div class="player-box" v-for="(item, index) in videoList" :key="item.id">
+						<div :id="item.id" ref="playWndBox" class="main" @click="openDialog(item)"></div>
+						<el-icon class="close-btn" size="18" color="#fff" @click="closePlayer(index)"><CircleClose /></el-icon>
+						<el-icon class="full-btn" size="18" color="#fff" @click="fullPlayer(item)"><FullScreen /></el-icon>
+					</div>
 				</div>
 				<!-- 视频数据站位 -->
-				<div id="play_window" ref="playWndBox" class="main" style="width: 100%; height: calc(100% - 76px)"></div>
+				<!-- <div id="play_window" ref="playWndBox" class="main" style="width: 100%; height: calc(100% - 76px)"></div> -->
 			</div>
 		</div>
+		<!-- 实时画面弹框 -->
+		<el-dialog title="实时画面" width="40%" v-model="videoVisible" show-close @close="clearData">
+			<div class="video-relative">
+				<div class="video-relative-left">
+					<div class="left-title">视频操作</div>
+					<div class="direction-control">
+						<div class="control-top">
+							<el-button type="primary" :icon="ArrowUpBold" @click="adjust('UP')" />
+						</div>
+						<div class="control-center">
+							<el-button type="primary" :icon="ArrowLeftBold" @click="adjust('LEFT')" />
+							<el-button type="primary" :icon="ArrowRightBold" @click="adjust('RIGHT')" />
+						</div>
+						<div class="control-bottom">
+							<el-button type="primary" :icon="ArrowDownBold" @click="adjust('DOWN')" />
+						</div>
+					</div>
+					<!-- <div class="img-photo">
+						<el-button type="primary" @click="imageGet(videoData)">图片抓拍</el-button>
+					</div> -->
+				</div>
+				<div class="video-relative-right">
+					<div :id="videoData.id + '-0'" ref="playWndBox" class="main"></div>
+					<el-icon class="full-btn" size="18" color="#fff" @click="fullDialogPlayer(videoData)"><FullScreen /></el-icon>
+				</div>
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
@@ -37,10 +70,12 @@
 import { ref, reactive, onMounted, getCurrentInstance } from "vue";
 import { ElMessage } from "element-plus";
 
-import { getVideoQuestionPage, getvideoProTreeList, getvideoEngTreeList } from "@/api/modules/goverment";
+import { getVideoQuestionPage, getvideoProTreeList, getvideoEngTreeList, cameraAdjust } from "@/api/modules/goverment";
 import { getpreviewURL, getmanualCaptureL } from "@/api/modules/common";
 import TreeFilter from "@/components/TreeFilter/index.vue";
-
+import { ArrowUpBold, ArrowLeftBold, ArrowRightBold, ArrowDownBold } from "@element-plus/icons-vue";
+const videoVisible = ref(false);
+const videoList = ref<any>([]);
 interface rightFormList {
 	createTime: string;
 	projectName: string;
@@ -66,13 +101,6 @@ const rightForm = ref<rightFormList>({
 	questionDesc: "",
 	showForm: false
 });
-const photoList = ref({
-	url: "",
-	questionDesc: "",
-	createBy: "",
-	image: ""
-});
-const showInitiate = ref(false);
 const proTree = ref();
 const engTree = ref();
 const playWndBox = ref(null);
@@ -82,12 +110,130 @@ let myPlugin = ref("");
 let cameraIndexCode = ref<string>("");
 let playUrl = ref("");
 let playIndex = ref(0);
+let dataIndex = ref(0);
+const videoData = ref<any>({});
+const directionValue = ref("");
+// 关闭弹框时
+const clearData = () => {
+	videoData.value = {}; // 清空一下videoData数据，因为里面携带着播放plugin
+};
+// 方向调整
+const adjust = async (params: any) => {
+	let requestData = {
+		cameraIndexCode: cameraIndexCode.value,
+		action: directionValue.value == params ? 1 : 0,
+		command: params,
+		speed: 20
+	};
+	const { result } = await cameraAdjust(requestData);
+	console.log(result);
+	if (result && result.msg == "success") {
+		ElMessage.success("操作成功");
+	}
+	if (directionValue.value == params) {
+		directionValue.value = "";
+	} else {
+		directionValue.value = params;
+	}
+};
+// 图片抓拍
+const imageGet = async (item: any) => {
+	let Plugin = item.dialogPlugin;
+	if (!cameraIndexCode.value) {
+		ElMessage.error("请先选择要抓拍的监控");
+	} else {
+		const { result } = await getmanualCaptureL({ monitorCode: cameraIndexCode.value });
+		console.log(result);
+		window.open(result.url);
+		// let link = document.createElement("a");
+		// link.href = result.url;
+		// link.download = "抓拍图片";
+		// link.click();
+		// link.remove();
+	}
+};
+// 点击弹框里的全屏
+const fullDialogPlayer = (item: any) => {
+	let Plugin = item.dialogPlugin;
+	Plugin.JS_FullScreenDisplay(true).then(
+		() => {
+			console.info("JS_FullScreenDisplay success");
+			// do you want...
+		},
+		(err: any) => {
+			console.info("JS_FullScreenDisplay failed");
+			// do you want...
+		}
+	);
+};
+// 打开弹框
+const openDialog = (item: any) => {
+	videoData.value = item;
+	console.log(item);
+	setTimeout(function () {
+		let url = item.videoUrl;
+		let newMyplugin = new JSPlugin({
+			szId: item.id + "-0", //需要英文字母开头 必填
+			// szBasePath: "/public/h5player", // 必填,引用H5player.min.js的js相对路径
+			szBasePath: "/h5player", // 打包后的地址
+			// szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
+			// iWidth: playWndWidth.value + "px",
+			// iHeight: playWndHeight.value + "px",
+			// iWidth: "300px",
+			// iHeight: "300px",
+			iMaxSplit: 1,
+			iCurrentSplit: 1,
+			openDebug: true
+		});
+		newMyplugin
+			.JS_Play(
+				url,
+				{
+					playURL: url, // 流媒体播放时必传
+					mode: 1 // 解码类型：0=普通模式; 1=高级模式 默认为0
+					// 设置直连时的认证参数等
+					// ...
+				},
+				0 //当前窗口下标
+			)
+			.then(
+				() => {
+					console.info("JS_Play success");
+					// do you want...
+				},
+				() => {
+					console.info("JS_Play failed:");
+					// playIndex.value += 1;
+					// do you want...
+				}
+			);
+		videoData.value.dialogPlugin = newMyplugin;
+	}, 200);
+	videoVisible.value = true;
+};
+// 全屏播放器
+const fullPlayer = (item: any) => {
+	let Plugin = item.pluginValue;
+	console.log(Plugin);
+	Plugin.JS_FullScreenDisplay(true).then(
+		() => {
+			console.info("JS_FullScreenDisplay success");
+			// do you want...
+		},
+		(err: any) => {
+			console.info("JS_FullScreenDisplay failed");
+			// do you want...
+		}
+	);
+};
+// 关闭播放器
+const closePlayer = (index: number) => {
+	videoList.value.splice(index, 1);
+};
 // 播放视频流
 const playVideo = async () => {
 	let url = playUrl.value;
 	let newMyplugin = myPlugin.value;
-	console.log(url);
-	console.log(playIndex.value);
 	newMyplugin
 		.JS_Play(
 			url,
@@ -115,24 +261,40 @@ const playVideo = async () => {
 // 获取视频流
 const getVideo = async () => {
 	// await sendRequest({ code: cameraIndexCode.value });
+	videoList.value.push({
+		id: "play_window-" + dataIndex.value,
+		ref: "playWndBox",
+		pluginValue: "",
+		videoUrl: ""
+	});
+	setTimeout(function () {
+		BeginPlayer("play_window-" + dataIndex.value);
+	}, 200);
 	const res = await getpreviewURL({ cameraIndexCode: cameraIndexCode.value, protocol: "ws" });
 	playUrl.value = res.result;
-	playVideo();
+	await playVideo();
+	let changeVal = dataIndex.value - 1; // 由于上一个方法已经对dataIndex.value + 1，所以需要-1
+	videoList.value[changeVal].videoUrl = res.result;
 	console.log(res);
 };
-const BeginPlayer = () => {
+const BeginPlayer = (id: any) => {
+	console.log(id);
 	// 初始化插件
 	myPlugin.value = new JSPlugin({
-		szId: "play_window", //需要英文字母开头 必填
+		szId: id, //需要英文字母开头 必填
 		// szBasePath: "/public/h5player", // 必填,引用H5player.min.js的js相对路径
 		szBasePath: "/h5player", // 打包后的地址
 		// szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
-		iWidth: playWndWidth.value + "px",
+		// iWidth: playWndWidth.value + "px",
-		iHeight: playWndHeight.value + "px",
+		// iHeight: playWndHeight.value + "px",
-		iMaxSplit: 4,
+		// iWidth: "300px",
-		iCurrentSplit: 4,
+		// iHeight: "300px",
+		iMaxSplit: 1,
+		iCurrentSplit: 1,
 		openDebug: true
 	});
+	videoList.value[dataIndex.value].pluginValue = myPlugin.value;
+	dataIndex.value++;
 };
 const changeTreeFilter = async (item: {
 	data: { code: string | null; title: any; children: any[] };
@@ -189,48 +351,34 @@ const engApi = async () => {
 	const { result } = await getvideoEngTreeList({});
 	engTree.value.treeAllData = result;
 };
-// 拍照的按钮
-const onPhoto = async () => {
-	if (cameraIndexCode.value.length !== 1) {
-		ElMessage.error("请先选择要抓拍的监控");
-	} else {
-		console.log(cameraIndexCode.value.length);
-
-		const { result } = await getmanualCaptureL({ monitorCode: cameraIndexCode.value });
-		photoList.value.url = result.url;
-		photoList.value.image = photoList.value.url;
-		showInitiate.value = true;
-	}
-};
 
 onMounted(async () => {
-	await BeginPlayer();
+	// await BeginPlayer();
-	const pageInstance = getCurrentInstance();
+	// const pageInstance = getCurrentInstance();
-	// 获取dom节点对象
+	// // 获取dom节点对象
-	const tagDomObj = pageInstance?.refs.playWndBox;
+	// const tagDomObj = pageInstance?.refs.playWndBox;
-	playWndHeight.value = tagDomObj?.clientHeight;
+	// playWndHeight.value = tagDomObj?.clientHeight;
-	playWndWidth.value = tagDomObj?.clientWidth;
+	// playWndWidth.value = tagDomObj?.clientWidth;
-	// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
+	// // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
-	window.addEventListener("scroll", () => {
+	// window.addEventListener("scroll", () => {
-		if (myPlugin.value == undefined) {
+	// 	if (myPlugin.value == undefined) {
-			setTimeout(function () {
+	// 		setTimeout(function () {
-				myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
+	// 			myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
-			}, 500);
+	// 		}, 500);
-			// setWndCover();
+	// 		// setWndCover();
-		}
+	// 	}
-	});
+	// });
-
+	// // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
-	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+	// window.addEventListener("resize", e => {
-	window.addEventListener("resize", e => {
+	// 	if (myPlugin.value == undefined) {
-		if (myPlugin.value == undefined) {
+	// 		// console.log("wwwww", e);
-			// console.log("wwwww", e);
+	// 		setTimeout(function () {
-			setTimeout(function () {
+	// 			myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
-				myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
+	// 		}, 500);
-			}, 500);
+	// 		// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
-			// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
+	// 		// setWndCover();
-			// setWndCover();
+	// 	}
-		}
+	// });
-	});
 });
 </script>