flx：h5监控新增执行状态

.env.development

@@ -53,11 +53,13 @@ VITE_API_URL = 'http://192.168.34.221:8111' #雄哥本地
 # VITE_API_URL = 'http://jxj.zhgdyun.com:18000'
 # 大连金笔
 # VITE_API_URL = 'http://101.43.164.214:11126'
+# 青海中水北方
+# VITE_API_URL = 'https://221.207.19.203:19098'
+# VITE_API_URL = 'https://125.72.229.30:19098'
 # 测试
 # VITE_API_URL = 'http://jxj.zhgdyun.com:9500'
 # VITE_API_URL = 'http://192.168.34.221:19112'
-# VITE_API_URL = 'https://125.72.229.30:19098'
-# VITE_API_URL = 'http://gszhdz.crpower.com.cn:9809'
+VITE_API_URL = 'http://gszhdz.crpower.com.cn:9809'
 # 上传
 VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='
 

src/views/sevenLargeScreen/videoManagement/index.vue

@@ -34,7 +34,7 @@
 										<span class="overflow-nowrap">
 											{{ data.name }}
 										</span>
-										<span> ({{ data.children.length || 0 }} / {{ data.children.length || 0 }}) </span>
+										<span> ({{ (treeBtnActive == 0 ? data.totalNum : treeBtnActive == 1 ? data.onlineNum : data.totalNum - data.onlineNum) || 0 }} / {{ data.totalNum || 0 }}) </span>
 									</span>
 									<span class="overflow-nowrap" :title="data.name" v-else>{{ data.name }}</span>
 								</span>

src/views/sevenLargeScreen/videoManagement/isc_plugin_h5.vue

@@ -62,6 +62,8 @@ import moment from "moment";
 import dayjs from "dayjs";
 import { reactive, watch, onMounted } from "vue";
 import { ElMessage } from "element-plus";
+import loadingGif from "@/assets/images/iscImage/loading.gif";
+import errorPng from "@/assets/images/iscImage/text-to-image.png";
 const props = defineProps({
 	devList: {
 		type: Array,
@@ -99,7 +101,9 @@ const stopAllPlay = () => {
 				const wnd = document.querySelector(`#player #player-container-${index}`);
 				if (wnd) {
 					const controls = document.getElementById(`controls-${index + 1}`);
-					wnd.removeChild(controls);
+					if (controls) {
+						controls.classList.remove("video-controls_flex");
+					}
 				}
 			});
 			videoInfo.devH5List = [];
@@ -110,7 +114,7 @@ const stopAllPlay = () => {
 	);
 };
 //  关闭单个
-const stopPlay = currentWindowIndex => {
+const stopPlay = (currentWindowIndex, type) => {
 	videoInfo.player.JS_Stop(currentWindowIndex - 1).then(
 		() => {
 			videoInfo.playback.rate = 0;
@@ -118,7 +122,10 @@ const stopPlay = currentWindowIndex => {
 			const wnd = document.querySelector(`#player #player-container-${currentWindowIndex - 1}`);
 			if (wnd) {
 				const controls = document.getElementById(`controls-${currentWindowIndex}`);
-				wnd.removeChild(controls);
+				if (controls) {
+					controls.classList.remove("video-controls_flex");
+				}
+				if (type == "delete") return;
 				videoInfo.devH5List.splice(currentWindowIndex - 1, 1);
 			}
 		},
@@ -362,7 +369,7 @@ const getPreviewUrl = row => {
 	const param = {
 		cameraIndexCode: tempCode,
 		streamType: row.defaultStreamType == 2 ? 0 : row.defaultStreamType,
-		type: "ws",
+		type: window.location.protocol.includes("https") ? "wss" : "ws",
 		transmode: 1,
 		itemId: row.itemId
 	};
@@ -373,13 +380,37 @@ const getPreviewUrl = row => {
  * 播放
  */
 const play = (row, index) => {
+	stopPlay(index + 1, 'delete');
 	getPreviewUrl({
 		...row
 	}).then(res => {
-		if (res.code !== 200) {
+		if (res.code !== 200 && !res.result.videoInfo) {
 			ElMessage.warning("获取视频流失败！");
 			return;
 		}
+		// 视频添加加载中图片
+		const id = "player-container-" + index;
+		var d1 = document.getElementById(id); //获取div元素
+		d1.childNodes.forEach(item => {
+			if (item.nodeName == "" || item.nodeName == "IMG") {
+				d1.removeChild(item);
+			}
+		});
+		var im = document.createElement("img"); //创建图片
+		im.src = loadingGif;
+		//图片设置成和div一样大小
+		const divHeightNum = d1.style.height.slice(0, d1.style.height.length - 2);
+		// const imgHeightNum = divHeightNum * 0.2
+		const imgHeightNum = 256;
+		im.style.width = imgHeightNum + "px";
+		im.style.height = imgHeightNum + "px";
+		im.style.position = "absolute";
+		im.style.top = "50%";
+		im.style.left = "50%";
+		const positionNum = imgHeightNum / 2 - imgHeightNum;
+		im.style.marginLeft = positionNum + "px";
+		im.style.marginTop = positionNum + "px";
+		d1.appendChild(im); //图片挂载到div上
 		let preUrl = res.result.videoInfo.url;
 		const param = {
 			playURL: preUrl,
@@ -393,10 +424,20 @@ const play = (row, index) => {
 		videoInfo.player.JS_Play(preUrl, param, index).then(
 			() => {
 				// 播放成功回调
+				d1.removeChild(d1.childNodes[d1.childNodes.length - 1]);
 				console.log("播放成功");
 			},
 			err => {
 				console.log("播放失败");
+				im.src = errorPng;
+				const imgHeightNum = 20;
+				const imgWidthNum = 150;
+				im.style.width = imgWidthNum + "px";
+				im.style.height = imgHeightNum + "px";
+				const positionNum = imgHeightNum / 2 - imgHeightNum;
+				const positionWidthNum = imgWidthNum / 2 - imgWidthNum;
+				im.style.marginLeft = positionWidthNum + "px";
+				im.style.marginTop = positionNum + "px";
 			}
 		);
 	});
@@ -433,7 +474,7 @@ watch(
 				play(item, videoInfo.index);
 			}
 		});
-    videoInfo.devH5List = a;
+		videoInfo.devH5List = a;
 	},
 	{ deep: true }
 );