zhgdlarge/src/views/sevenLargeScreen/newLaborManagement/videoSurveillance.vue

<template>
	<div class="videoManage">
		<div class="right">
			<div class="videoPlayerBig">
				<Card title="视频监控">
					<div class="rightHeader">
						<div class="search-item">
							<el-cascader
								v-model="workTicketInfo.typeId"
								:options="filterTreeData"
								filterable
								placeholder="请选择"
                                size="small"
								:show-all-levels="false"
								@change="handleUnfold"
								:props="{
									emitPath: false,
									value: 'id',
									label: 'name',
									children: 'list'
								}"
							></el-cascader>
						</div>
					</div>
					<!-- 萤石云播放 -->
					<!-- <div ref="playWndBox" style="width: 100%; height: 100%; margin: 0 5% 2% 5%" v-if="videoType === 1">
						<ysyPlayAndPlayback :ref="'ysy'" :ysyParams="ysyParams"></ysyPlayAndPlayback>
					</div> -->
					<div class="ysy-player-container" v-if="videoType === 1">
						<ysyPlayer :isCardVideo="true" ref="ysy"></ysyPlayer>
					</div>
					<DHPlayer :devList="dhVideoList" v-else-if="videoType === 4" ref="dhplayer"></DHPlayer>
					<!-- 播放海康 -->
					<div ref="playWndBox" style="width: 100%; height: 100%">
						<div id="playWnd" class="playWnd" style="width: 100%; height: 100%"></div>
						<!-- :style="{
							height: playWndHeight + 'px',
							width: playWndWidth + 'xp'
						}"-->
					</div>
				</Card>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
// import ysyPlayAndPlayback from "@/components/ysyPlayAndPlayback.vue";
import ysyPlayer from "@/views/sevenLargeScreen/videoManagement/ysy-player.vue";
import DHPlayer from "@/views/sevenLargeScreen/videoManagement/dhPlayer.vue";

import { Fold, Expand, Search } from "@element-plus/icons-vue";
import { ref, onMounted, onBeforeUnmount, computed, Ref, onBeforeMount, watch } from "vue";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
import { selectProjectVideoListApi, selectProjectVideoGroupApi, getSafeHatSessionApi } from "@/api/modules/video";
import { COMPANY } from "@/config/config";
import emitter from "@/views/sevenLargeScreen/videoManagement/mitt";
const defaultProps = {
	children: "children",
	label: (data: any, node: any) => node.data.name
};
let videoType = ref("") as any;
let ysyParams = ref({} as any);
let select = ref(1) as any;
// 修改布局选项配置
const layoutOptions = [
	{
		value: 1,
		label: "单屏",
		icon: new URL("@/assets/images/monitor/video_1.png", import.meta.url).href,
		activeIcon: new URL("@/assets/images/monitor/video_1_active.png", import.meta.url).href
	},
	{
		value: 2,
		label: "四分屏",
		icon: new URL("@/assets/images/monitor/video_2.png", import.meta.url).href,
		activeIcon: new URL("@/assets/images/monitor/video_2_active.png", import.meta.url).href
	},
	// {
	// 	value: 4,
	// 	label: "六宫格",
	// 	icon: new URL("@/assets/images/monitor/video_4.png", import.meta.url).href,
	// 	activeIcon: new URL("@/assets/images/monitor/video_4_active.png", import.meta.url).href
	// },
	{
		value: 3,
		label: "九分屏",
		icon: new URL("@/assets/images/monitor/video_3.png", import.meta.url).href,
		activeIcon: new URL("@/assets/images/monitor/video_3_active.png", import.meta.url).href
	}
];

const filterTreeData = computed(() => {
	if (!treeBtnActive.value) return shipinList.value;
	return shipinList.value.map((item: any) => {
		let list = [];
		if (item.list && Array.isArray(item.list)) {
			list = item.list.filter((i: any) => i.deviceState === treeBtnActive.value);
		}
		return {
			...item,
			list
		};
	});
});

let filterText = ref("");
let treeRef = ref(null);
// 0全部 1在线 2离线
let treeBtnActive = ref(0);
const isExpand = ref(true);
const ysyPlayMode = ref(0);
let shipinList = ref([] as any);
let allVideoList = ref([] as any);
const store = GlobalStore();
const playWndBox = ref(null);
let playWndHeight = ref("");
let playWndWidth = ref("");
let pubKey = ref("");
let initCount = ref(0);
let oWebControl: any = null;
let cameraIndexCode = ref<Array<string>>([]);
const dhVideoList = ref([] as any);
// let objData = ref({
// 	appkey: "23914849", //海康提供的appkey
// 	ip: "221.12.137.200", //海康提供的ip
// 	// ip: "182.101.141.23", //本地IP
// 	secret: "UV4xyujBtOGA4D0kvXG7", //海康提供的secret
// 	port: 444,
// 	playMode: 0, // 0 预览 1回放
// 	layout: "1x1" //页面展示的模块数【16】
// });
const workTicketInfo = ref({} as any);

const goToSafeHelmet = async () => {
	const res: any = await getSafeHatSessionApi({ projectSn: store.sn });
	if (res.result) {
		console.log(res, "安全帽");
		let url = "https://caps.runde.pro/login#token=" + res.result.token + "&user_name=" + res.result.userName + "&target=home";
		// let url = 'https://caps.runde.pro/login#token='+ res.result.token + '&user_name=' + res.result.userName + '&target=home'
		window.open(url);
	}
};

const handleChangeExpand = () => {
	isExpand.value = !isExpand.value;
	emitter.emit("expand", isExpand.value);
};

const handleYsyPlayModeChange = (value: number) => {
	if (ysyPlayMode.value === value) return;
	ysyPlayMode.value = value;
	emitter.emit("playBack", ysyPlayMode.value);
};

const handleChangeSelect = (value: number) => {
	if (select.value === value) return;
	select.value = value;
	emitter.emit("changeLayout", value);
};

const handlePlayAll = () => {
	let videoList = allVideoList.value.filter((item: any) => item.videoType === 1);
	let sliceNum = 0;
	if (select.value === 1) {
		sliceNum = 1;
	} else if (select.value === 2) {
		sliceNum = 4;
	} else if (select.value === 3) {
		sliceNum = 9;
	}
	videoList = videoList.slice(0, sliceNum);
	console.log(videoList, "videoList", select.value);
	emitter.emit("playAll", videoList);
};

const handleCloseAll = () => {
	emitter.emit("closeAll");
};

const filterNode = (value: string, data: any) => {
	if (!value) return true;
	return data.name.includes(value);
};

watch(filterText, val => {
	treeRef.value!.filter(val);
});

// let objData = ref({
// 	// appkey: "24017757", //海康提供的appkey
// 	appkey: "23071374", //anjt的appkey
// 	// appkey: "", //anjt的appkey
// 	// ip: "182.101.141.23", //海康提供的ip
// 	ip: "10.168.1.100", //anjt的ip
// 	// ip: "", //anjt的ip
// 	// secret: "VJz0FbzmE6drPQ7egsBi", //海康提供的secret
// 	secret: "skaSIHSYPRIynnxz7o57", //anjt的secret
// 	// secret: "", //anjt的secret
// 	// port: 18443,
// 	port: 443,//anjt的端口
// 	// port: '',//anjt的端口
// 	playMode: 0, // 0 预览 1回放
// 	layout: "1x1" //页面展示的模块数【16】
// });
// let objData = ref({
// 	appkey: "24017757", //海康提供的appkey
// 	ip: "182.101.141.23", //海康提供的ip
// 	secret: "VJz0FbzmE6drPQ7egsBi", //海康提供的secret
// 	port: 18443,
// 	playMode: 0, // 0 预览 1回放
// 	layout: "1x1" //页面展示的模块数【16】
// });
let objData = ref({
	appkey: "", //海康提供的appkey
	ip: "", //海康提供的ip
	secret: "", //海康提供的secret
	port: 443,
	playMode: 0, // 0 预览 1回放
	layout: "1x1" //页面展示的模块数【16】
});
const handleUnfold = (rowId: any) => {
    let expandedItem = {};
	// 递归 筛选出节点的id
	const recursion = (dataList: [], itemId: any) => {
		dataList.forEach((item: any) => {
			if(item.id === itemId) {
                expandedItem = item;
            }
			if (item.list && item.list.length) {
				recursion(item.list, itemId);
			}
		});
	};
	recursion(shipinList.value, rowId);
    console.log(rowId,shipinList.value,expandedItem, 2222)
    checkVideo(expandedItem);
};
//设备列表的点击操作
const checkVideo = async (item: any) => {
	// 避免点击父节点导致无法出现视频
	if (item.serialNumber) {
		ysyParams.value = item;
		cameraIndexCode.value = item.serialNumber;
		dhVideoList.value = [item];

		if (videoType.value !== 1 && videoType.value !== 4) {
			previewVideo(cameraIndexCode.value);
		}
		if (videoType.value === 1) {
			emitter.emit("selectMonitor", item);
		}
	}
};
// 定义个变量保存播放ID
// let firstVideoId = ref("" as any);
//获取视频列表
const getVideoList = async () => {
	let res: any = await selectProjectVideoListApi({
		projectSn: store.sn
		// all: 1
		// all=1查全部
	});
	shipinList.value = res.result.videoList;
	allVideoList.value = shipinList.value.reduce((acc: any[], item: any) => {
		if (item.serialNumber) {
			acc.push(item);
		}
		if (item.list && Array.isArray(item.list)) {
			acc.push(...item.list.filter((subItem: any) => subItem.serialNumber));
		}
		return acc;
	}, []);
	let arr = findVideoByTree(res.result.videoList, []);
	if (arr.length > 0) {
		handleVideoConfig(arr[0]);
	}
	console.log("objData", objData.value);
};

const findVideoByTree = (treeData: any, videoList: any) => {
	treeData.forEach((item: any) => {
		if (item.list instanceof Array && item.list.length > 0) {
			findVideoByTree(item.list, videoList);
		} else {
			if (item.serialNumber) {
				videoList.push(item);
			}
		}
	});
	return videoList;
};

// 处理视频配置的公共方法
const handleVideoConfig = (videoData: any) => {
	const config = {
		appkey: videoData.appId,
		ip: videoData.outip || videoData.account,
		secret: videoData.appSecret,
		port: +(videoData.outip ? videoData.outport : videoData.password)
	};

	Object.assign(objData.value, config);
	cameraIndexCode.value = videoData.serialNumber;
	ysyParams.value = videoData;
	videoType.value = videoData.videoType;

	if (videoData.videoType === 1) {
		if (oWebControl) {
			oWebControl.JS_HideWnd();
			oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
			oWebControl.JS_Disconnect();
		}
		// emitter.emit("selectMonitor", videoData);
	} else if (videoData.videoType === 4) {
		dhVideoList.value = [videoData];
	} else {
		initPlugin();
	}
};
onBeforeMount(() => {
	getVideoList();
});
onMounted(async () => {
	// initPlugin();
	// setTimeout(() => {
	// }, 2500);
	// 获取页面的实例对象 ee
	// const pageInstance = getCurrentInstance();
	// // 获取dom节点对象
	// const tagDomObj = pageInstance?.refs.playWndBox;
	const tagDomObj = document.querySelector(".videoPlayerBig .content");
	const htmlFontSize = getComputedStyle(window.document.documentElement)["font-size"];
	const htmlFontSizeNumber = +htmlFontSize.slice(0, htmlFontSize.indexOf("px"));
	console.log(htmlFontSizeNumber, tagDomObj?.clientWidth, tagDomObj?.clientHeight / 12);
	// playWndHeight.value = tagDomObj?.clientHeight / 1.2;
	// playWndWidth.value = tagDomObj?.clientWidth / 1.2;
	// playWndHeight.value = tagDomObj?.clientHeight / 1.05;
	// playWndWidth.value = tagDomObj?.clientWidth / 1.05;
	playWndHeight.value = tagDomObj?.clientHeight;
	playWndWidth.value = tagDomObj?.clientWidth;
	console.log(playWndHeight.value, playWndWidth.value, tagDomObj?.offsetHeight, tagDomObj?.offsetWidth, tagDomObj);

	// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
	window.addEventListener("scroll", () => {
		if (oWebControl == undefined) {
			setTimeout(function () {
				oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
			}, 200);
		}
	});

	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
	window.addEventListener("resize", e => {
		console.log("resize", e, playWndWidth.value, playWndHeight.value);
		if (oWebControl == undefined) {
			setTimeout(function () {
				oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
			}, 200);
		}
		// if (oWebControl == undefined) {
		// 	// console.log("wwwww", e);
		// 	oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
		// 	// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
		// 	// setWndCover();
		// }
	});
	// await initPlugin();
	// 初始化播放器插件
	// nextTick(async () => {
	// });
});

onBeforeUnmount(() => {
	if (oWebControl) {
		// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
		oWebControl.JS_HideWnd();
		// 销毁当前播放的视频
		oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
		// 断开与插件服务连接
		oWebControl.JS_Disconnect();
	}
});

const initPlugin = () => {
	oWebControl = new WebControl({
		szPluginContainer: "playWnd", // 指定容器id
		iServicePortStart: 15900, // 指定起止端口号，建议使用该值
		iServicePortEnd: 15900,
		szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
		cbConnectSuccess: () => {
			// 创建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 () {
			// 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
			// console.log(0);
			// 程序未启动时执行error函数，采用wakeup来启动程序
			window.WebControl.JS_WakeUp("VideoWebPlugin://");
			initCount.value++;
			if (initCount.value < 3) {
				setTimeout(function () {
					initPlugin();
				}, 3000);
			}
			// else {
			// 	setTimeout(function () {
			// 		setTimeout(function () {
			// 			router.push("/home");
			// 		}, 4000);
			// 	}, 4000);
			// }
			if (initCount.value < 2) {
				oWebControl = null;
				ElMessage.warning("插件未启动，正在尝试启动，请稍候...");
				// 程序未启动时执行error函数，采用wakeup来启动程序
				window.WebControl.JS_WakeUp("VideoWebPlugin://");
				setTimeout(() => {
					initPlugin();
				}, 3000);
				initCount.value++;
			}
			//  else {
			// 	window.location.href = this.videoWebPluginUrl;
			// }
			// console.log(oWebControl);
		},
		cbConnectClose: () => {
			// 异常断开：bNormalClose = false
			// JS_Disconnect正常断开：bNormalClose = true
			// console.log("cbConnectClose");
			oWebControl = null;
		}
	});
	// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
};

// 初始化
const init = (callback: (() => void) | undefined) => {
	console.log(objData.value, "我的视频服务器");
	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 + ":" + port, //API网关IP地址
					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 * store.globalScale, playWndHeight.value * store.globalScale); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题

				if (callback) {
					callback();
				}
				// 隐藏
				// oWebControl.JS_HideWnd()
			});
	});
};

// 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({});
		});
};
</script>

<style lang="scss" scoped>
.rightHeader {
	display: flex;
	position: absolute;
	z-index: 99;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	// width: 20%;
	// left: 80%;
	// top: 79%;
	width: 100%;
	top: -15%;
	display: flex;
	justify-content: flex-end;
}
.videoManage {
	width: 100%;
	height: 100%;
	display: flex;
	.left {
		width: 17%;
		height: 100%;
		margin-right: 1%;
		&.hide {
			display: none;
		}
		.videoListBig {
			width: 100%;
			height: 100%;
			.tree-search-input {
				width: 100%;
				margin-bottom: 10px;
				::v-deep .el-input__wrapper {
					background: #2758c0;
					background: rgba(39, 88, 192, 0.4);
					border: 1px solid #2758c0;
					.el-input__inner {
						color: #fff;
					}
				}
			}
			.tree-scrollbar {
				height: calc(100% - 80px);
			}
		}
		.decivList {
			width: 100%;
			height: 70%;
			.menuDev {
				height: 6%;
				background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
				background-size: 100% 100%;
				color: #fff;
				display: flex;
				line-height: 35px;
				font-size: calc(100vw * 14 / 1920);
				margin: 2% 3%;
				cursor: pointer;
				.decName {
					width: 30%;
					span {
						margin-left: 10%;
					}
				}
				.status {
					margin-left: 56%;
				}
			}
			.menuDev:hover {
				height: 6%;
				background: url("@/assets/images/dustNoise/devImg.png") no-repeat;
				background-size: 100% 100%;
			}
		}
		.online {
			.status {
				color: #65d7f9;
			}
		}
		.offline {
			.status {
				color: #ec6266;
			}
		}
	}
	.right {
		flex: 1;
		height: 100%;

		.videoPlayerBig {
			width: 100%;
			height: 100%;
			position: relative;
		}
	}
	.notoDta {
		top: 50%;
		width: 80%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
		img {
			width: 40%;
			margin: 5% 30%;
		}
		p {
			color: #fff;
			font-size: calc(100vw * 14 / 1920);
			margin: -6% 37%;
			text-align: center;
		}
	}
}
::v-deep .h-card .content {
	// background: none;
	position: relative;
	margin-top: 1%;
	height: 88%;
    padding: 5px;
}
::v-deep .h-card .title .titltText {
	margin-bottom: 0%;
}

.select-right {
	width: 20%;
	display: flex;
	position: absolute;
	z-index: 10;
	color: #fff;
	font-size: 14px;
	text-align: center;
	line-height: 30px;
	right: -15%;
	top: 1%;
	.safe-helmet {
		padding: 0 6%;
		z-index: 99;
		cursor: pointer;
		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
		background-size: 100% 100%;
	}
}
// element-plus组件样式
:deep() {
	.el-tree {
		background-color: transparent;
	}
	.el-tree > .el-tree-node:focus > .el-tree-node__content {
		// background-color: #141E2B;
		// background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
		background-size: 100% 100%;
		background-color: transparent;
		span {
			color: #537cce;
		}
	}
	.el-tree > .el-tree-node > .el-tree-node__content {
		// background-color: #141E2B;
		// background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
		background-size: 100% 100%;
		background-color: transparent;
		position: relative;
		z-index: 10;
		height: 32px;
		span {
			color: #537cce;
		}
	}
	.el-tree-node__children .el-tree-node__content {
		background-color: transparent;
		height: 32px;
	}
	.el-tree-node__children .el-tree-node {
		// margin-top: 3%;
	}
	.el-tree > .el-tree-node > .el-tree-node__content:hover {
		// background-color: #141E2B;
		// background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
		background-color: transparent;
		background-size: 100% 100%;
	}
	.el-tree-node__label {
		color: white;
		font-size: 16px;
		margin-bottom: 1px;
	}
	.el-tree > .el-tree-node > .el-tree-node__content .el-tree-node__children .el-tree-node__label {
		margin-left: 8%;
	}
	.el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__expand-icon {
		color: #537cce;
		font-size: 16px;
	}
}
// 树形样式
.custom-tree-node {
	display: flex;
	align-items: center;
	span {
		// margin-left: 8%;
		color: white;
		font-size: 16px;
	}
	img {
		margin-right: 8px;
		width: 16px;
		height: 16px;
	}
}
.btn-group {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	.btn-item {
		cursor: pointer;
		flex: 1;
		background: rgba(39, 88, 192, 0.2);
		border-radius: 0px 0px 0px 0px;
		border: 1px solid #405e97;
		font-size: 16px;
		color: rgba(255, 255, 255, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		height: 26px;
		&.active {
			background: #2758c0;
			color: #ffffff;
		}
	}
}
.ysy-player-container {
	width: 100%;
	height: 100%;
	.ysy-player-toolbar {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
		.ysy-player-toolbar-left {
			display: flex;
			align-items: center;
			gap: 12px;
		}
		.ysy-player-toolbar-right {
			display: flex;
			align-items: center;
			gap: 12px;
			.btn-box-container {
				display: flex;
				gap: 14px;
				.btn-box {
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 24px;
					background: rgba(39, 88, 192, 0.2);
					border: 1px solid #405e97;
					padding: 0 4px;
					&.active {
						background: #2758c0;
					}
					.rect {
						width: auto;
						height: 16px;
					}
				}
			}
		}
	}
}
</style>
<style lang="scss">
.customPopover {
	// .el-popper.is-light {
	background: rgba(7, 28, 49, 0.9) !important;
	border: 1px solid #405e97 !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	color: #ffffff !important;
	// }
	.el-popper__arrow::before {
		border: 1px solid #405e97 !important;
		background: rgba(7, 28, 49, 0.9) !important;
	}
}
</style>