zhgdlarge/src/views/agjtLiveScreen/liveScreen/centerTop.vue

<template>
	<div class="leftTop">
		<Card title="安全教育">
			<div class="video-config" @click="openPeopleCountDialog" v-if="store.accountType == 10">
				<el-icon class="config-icon" color="#57BCE8" size="24"><Setting /></el-icon>
			</div>
			<!-- <div class="href-content" v-if="showVideo == 1">
				<el-carousel indicator-position="none" height="450px" style="width: 100%">
					<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
						<ckplayerComp
							:name="index"
							:poster="''"
							:deviceIp="`http://${item.account}:${item.password}`"
							:videoUrls="item.serialNumber"
							:autoPlay="true"
						></ckplayerComp>
					</el-carousel-item>
				</el-carousel>
			</div> -->
			<div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
				<video id="myVideo" :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
			</div>
		</Card>
		<setVideoDialog ref="partyBuildRef" @updateConfig="updateConfig"></setVideoDialog>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue";
import { GlobalStore } from "@/stores";
import { ElMessage } from "element-plus";
// import { selectLiveVideoListApi } from "@/api/modules/video";
import ckplayerComp from "./ckplayerComp.vue";
import { COMPANY } from "@/config/config";
import setVideoDialog from "@/components/setVideoDialog.vue";
// import { configWeekVideoListApi } from "@/api/modules/agjtCommandApi";
//引入现场大屏API
import { configWeekVideoListApi } from "@/api/modules/agjtLiveApi";
import moment from "moment";
const store = GlobalStore();
const BASEURL = import.meta.env.VITE_API_URL
const videoList = ref([] as any);
// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: {}
});
// 项目信息
const projectData = ref({} as any);
// 弹窗
const partyBuildRef = ref();
const openPeopleCountDialog = () => {
	partyBuildRef.value.openDialog({
		title: "配置视频"
	});
};
watch(
	() => props.projectData,
	newVal => {
		if (newVal) {
			// props.xData = newVal;
			projectData.value = newVal;
		}
	}
);

// const BASEURL = import.meta.env.VITE_API_URL;
// 显示视频
// const showVideo = ref(1 as any);
const showVideo = ref(2 as any);
// 显示更换视频
const showChangeVideo = ref(false as any);
// 修改了视频配置
const updateConfig = () => {
	configWeekVideoListFn();
};
// 获取一周的配置视频数据
const configWeekVideoListFn = async () => {
	let data = {
		projectSn: store.sn,
		type: 3
	}
	const res: any = await configWeekVideoListApi(data, true);
	if (res.result) {
		// 星期参数
		const today = moment().format("d");
		// const weekParamsKey = ["sun", "mon", "tues", "wed", "thur", "fri", "sat"];
		// projectData.value.videoUrl = res.result[0][weekParamsKey[+today]];
		if(res.result.length != 0 && today == 0) projectData.value.videoUrl = res.result[0].sun
		if(res.result.length != 0 && today == 1) projectData.value.videoUrl = res.result[0].mon
		if(res.result.length != 0 && today == 2) projectData.value.videoUrl = res.result[0].tues
		if(res.result.length != 0 && today == 3) projectData.value.videoUrl = res.result[0].wed
		if(res.result.length != 0 && today == 4) projectData.value.videoUrl = res.result[0].thur
		if(res.result.length != 0 && today == 5) projectData.value.videoUrl = res.result[0].fri
		if(res.result.length != 0 && today == 6) projectData.value.videoUrl = res.result[0].sat
	}
};
function playVideo(){
	let video: any = document.getElementById("myVideo");
  video.play();
}
// const getVideoList = async () => {
// 	let res: any = await selectLiveVideoListApi({
// 		projectSn: store.sn
// 	});
// 	if (res.result && res.result.extend1) {
// 		videoList.value = JSON.parse(res.result.extend1).result.videoList;
// 		// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
// 		setTimeout(() => {
// 			// 获取所有的 video 元素
// 			var videos = document.querySelectorAll(".href-content 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%";
// 			}
// 		}, 2000);
// 	}
// };

//测试方法，对接口时改成相应的方法注释
const centerTopMethod = async () => {
	
}
//将方法暴露给父组件
defineExpose({
	centerTopMethod
})

onMounted(async () => {
	// if (COMPANY !== "agjt") showVideo.value = 2;
	// await getVideoList();
	await configWeekVideoListFn(); 
	// playVideo()
});
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	position: relative;
	.video-config {
		position: absolute;
		top: 1.5%;
		right: 1%;
		.config-icon {
			cursor: pointer;
		}
	}
	.videoBox {
		width: 100%;
		height: 103.255%;
		transform: translateY(-11px);
		.videos {
			width: 100%;
			height: 100%;
			object-fit: fill;
		}
	}
	.imgBox {
		width: 100%;
		height: 92%;
		margin-top: 8%;
		background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
		background-size: 100% 100%;
		.imgs {
			width: 78%;
			height: 82%;
			margin: 3% 11%;
			img {
				width: 100%;
				height: 100%;
				margin-top: 5%;
			}
		}
	}
	.href-content {
		width: 100%;
		height: 92%;
		margin-top: 8%;
		background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

// .href-content {
// 	width: 95%;
// 	height: 92%;
// 	margin: 0 auto;
// 	margin-top: 8%;
// }

.change-video {
	position: absolute;
	background: url("@/assets/images/cardImg.png") no-repeat;
	background-size: 100% 100%;
	color: #fff;
	padding: 1% 2%;
	font-size: 16px;
	left: 45%;
	top: 55%;
	z-index: 10;
}

.top-tab {
	position: absolute;
	top: 12%;
	width: 100%;
	box-sizing: border-box;
	padding: 0 30%;
	display: flex;
	justify-content: space-around;
	.tab-box {
		font-size: 16px;
		color: rgba(255, 255, 255, 0.3);
		cursor: pointer;
	}
}

::v-deep .h-card .content {
	background: none;
}
</style>