zhgdlarge/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue

<template>
	<div class="leftTop">
		<Card title="项目展示">
			<div class="top-tab">
				<div
					class="tab-box"
					:style="boxStyle(item)"
					v-for="(item, index) in topText"
					:key="item.id"
					@click="activeBtn(item, index)"
				>
					{{ item.title }}
				</div>
			</div>
			
			<div class="href-content" v-if="showVideo == 1">
				<el-carousel indicator-position="none" height="450px" style="width: 76%;">
					<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">
				<el-upload
					:action="BASEURL + '/upload/image'"
					:on-success="file => handleSuccessTwo(file, 1)"
					:on-error="file => handleError(file, 1)"
					:beforeUpload="file => handleBeforeUploadVideo(file, 1)"
					name="files"
					:show-file-list="false"
				>
					<!-- 更换视频 -->
					<span class="change-video" v-if="showChangeVideo">更换视频</span>
				</el-upload>
				<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
			</div>
			<div class="imgBox" v-if="showVideo == 3">
				<div class="imgs" @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false">
					<el-upload
						:action="BASEURL + '/upload/image'"
						:on-success="file => handleSuccess(file, 1)"
						:on-error="file => handleError(file, 1)"
						:beforeUpload="file => handleBeforeUploadPic(file, 1)"
						name="files"
						:show-file-list="false"
					>
						<!-- 更换图片 -->
						<span class="change-video" v-if="showChangeImg">更换图片</span>
					</el-upload>
					<img :src="BASEURL + '/image/' + picUrl" alt="" />
				</div>
			</div>
		</Card>
	</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 { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview";
import { selectLiveVideoListApi } from "@/api/modules/video";
import ckplayerComp from "./ckplayerComp.vue";

const store = GlobalStore();
const videoList = ref([] as any);
// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: {}
});
// 项目信息
const projectData = ref({} as any);

watch(
	() => props.projectData,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			projectData.value = newVal;
		}
	}
);
//效果图
const picUrl = ref("" as any);

const BASEURL = import.meta.env.VITE_API_URL;
// 显示视频
const showVideo = ref(1 as any);

// 显示更换图片
const showChangeImg = ref(false as any);

// 显示更换视频
const showChangeVideo = ref(false as any);

let topText = ref([
	{ id: 1, title: "现场视频", isActive: true },
	{ id: 2, title: "宣传视频", isActive: false },
	{ id: 3, title: "效果图", isActive: false }
]);
const getVideoList = async () => {
	let res: any = await selectLiveVideoListApi({
		projectSn: store.sn
	});
		console.log(res,'445566')
	if(res.result && res.result.extend1){
		videoList.value = JSON.parse(res.result.extend1).result.videoList;
		console.log(videoList.value,'112233')
		// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
		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);
	}
};

function boxStyle(item: any) {
	if (item.isActive) {
		let choiseStyle = {
			color: "#fff"
		};
		return choiseStyle;
	}
	return {};
}
let tabIndex = ref(1 as any);
function activeBtn(item: any) {
	let currentState = item.isActive;
	if (!currentState) {
		topText.value.forEach(el => {
			el.isActive = false;
		});
		item.isActive = !currentState;
		tabIndex.value = item.id;
	}
	showVideo.value = item.id;
	console.log(showVideo.value)
}

const uploadFail = () => {
	ElMessage({
		showClose: true,
		message: "上传失败，请重试",
		type: "warning"
	});
};

const fileTypeFail = (text: any) => {
	ElMessage({
		showClose: true,
		message: text,
		type: "warning"
	});
};

const uploadSuccess = () => {
	ElMessage({
		showClose: true,
		message: "上传成功",
		type: "success"
	});
};

// 视频文件上传 之前
function handleBeforeUploadVideo(file: any) {
	console.log(file, "上传之前");
	let fileType = file.type.split("/")[0];
	if (fileType == "video") {
		return true;
	} else {
		fileTypeFail("请选择正确的视频文件"); //"请选择正确的文件"
		return false;
	}
}

// 图片文件上传 之前
function handleBeforeUploadPic(file: any) {
	console.log(file, "上传之前");
	let fileType = file.type.split("/")[0];
	if (fileType == "image") {
		return true;
	} else {
		fileTypeFail("请选择正确的图片文件"); //"请选择正确的文件"
		return false;
	}
}

//上传失败
function handleError(file: any) {
	console.log(file, "上传失败");
	uploadFail(); //"上传失败，请重试"
}
// 效果图上传成功
function handleSuccess(file: any) {
	console.log("效果图上传成功", file);
	if (file.code == 200 || file.status == "SUCCESS") {
		console.log(file);
		let url = file.data[0].imageUrl;
		saveEffectData(url);
	}
}

// 视频上传成功
function handleSuccessTwo(file: any) {
	if (file.code == 200 || file.status == "SUCCESS") {
		console.log(file, "上传成功");
		let url = file.data[0].imageUrl;
		// this.imgUrl = url;
		saveOrDeleteVideo(url);
	}
}
//效果图 保存
function saveEffectData(url: any) {
	// let configValue = JSON.stringify(url);
	let data = {
		projectSn: store.sn,
		showType: 3,
		showTitle: "效果图", //'效果图'
		configValue: url
	};
	eidtProjectShowConfig(data).then((res: any) => {
		if (res.code == 200) {
			getQueryBySnData();
		}
	});
}

// 查询效果图
function getQueryBySnData() {
	queryBySnData({
		projectSn: store.sn,
		showType: 3
	}).then((res: any) => {
		console.log(res, "效果图");
		if (res.result) {
			picUrl.value = res.result.configValue;
		}
	});
}
// //保存或删除宣传视频
function saveOrDeleteVideo(url) {
	editProjectInfo({
		projectSn: store.sn,
		videoUrl: url
	}).then(res => {
		console.log("保存成功", res);
		uploadSuccess(); //"上传成功"
		projectData.value.videoUrl = url;
	});
}
//将方法暴露给父组件
defineExpose({
	getQueryBySnData
})
onMounted(async () => {
	await getVideoList();
	getQueryBySnData();
});
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	position: relative;
	.videoBox {
		width: 100%;
		height: 92%;
		margin-top: 8%;
		background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
		background-size: 100% 100%;
		.videos {
			width: 78%;
			height: 90%;
			margin-left: 11%;
			margin-top: 1%;
		}
	}
	.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>