zhgdlarge/src/components/setVideoDialog.vue

<template>
	<div class="setvideodialog" v-if="dialogInfo.showDialog">
		<div class="listdetail">
			<div class="dialog-content-more">
				<div class="dialog-title">
					<img src="@/assets/images/titleIcon.png" alt="" />
					<div class="title-text">
						<i>{{ dialogInfo.postData?.title }}</i>
					</div>
					<div class="close-icon" @click="closeDialog">
						<el-icon>
							<Close />
						</el-icon>
					</div>
				</div>
				<div class="contont-video" style="color: #fff; font-size: 24px">
					<div class="video-list" v-for="(item, index) in dialogInfo.videoUploadList" :key="item.id">
						<div>{{ item.title }}：</div>
						<el-upload
							ref="upload"
							class="upload-demo"
							:action="BASEURL + '/upload/image'"
							:on-success="(file: any) => handleSuccess(file, index)"
							:beforeUpload="handleBeforeUploadVideo"
							:on-error="handleError"
							name="files"
							:show-file-list="false"
						>
							<template #trigger>
								<el-button type="primary">
									<span class="videoupload">上传</span>
									<el-icon color="#fff" :size="24" class="no-inherit">
										<UploadFilled />
									</el-icon>
								</el-button>
							</template>
						</el-upload>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import type { UploadInstance } from "element-plus";
import { showFullScreenLoading, tryHideFullScreenLoading } from "@/config/serviceLoading";
import { configWeekVideoSaveApi, configWeekVideoListApi } from "@/api/modules/agjtCommandApi";
import { GlobalStore } from "@/stores";
import moment from "moment";
import { COMPANY } from "@/config/config";
const store = GlobalStore();
const BASEURL = import.meta.env.VITE_API_URL;
const emits = defineEmits(["updateConfig"]);
const videoConfigData = ref();
const dialogInfo = reactive({
	showDialog: false,
	postData: {} as any,
	videoUploadList: [
		{
			id: 1,
			title: "周一"
		},
		{
			id: 2,
			title: "周二"
		},
		{
			id: 3,
			title: "周三"
		},
		{
			id: 4,
			title: "周四"
		},
		{
			id: 5,
			title: "周五"
		},
		{
			id: 6,
			title: "周六"
		},
		{
			id: 7,
			title: "周日"
		}
	]
});
// 获取一周的配置视频数据
const configWeekVideoListFn = async (showLoading: boolean) => {
	const res: any = await configWeekVideoListApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		videoConfigData.value = res.result;
	}
};
// 修改一周内某一天的视频
const configWeekVideoEditFn = async (showLoading: boolean, url: any, weekIndex: number) => {
	console.log(url);
	let requestData: any = {
		projectSn: store.sn
	};
	// 星期参数
	const today = weekIndex == 6 ? 0 : weekIndex + 1;
	const weekParamsKey = ["sun", "mon", "tues", "wed", "thur", "fri", "sat"];
	requestData[weekParamsKey[+today]] = url;
	// type参数
	if (COMPANY == "agjtProjectKanban") {
		requestData.type = 1;
	} else if (COMPANY == "agjtOverviewScreen") {
		requestData.type = 2;
	} else if (COMPANY == "agjtLive") {
		requestData.type = 3;
	}
	// id参数
	if (videoConfigData.value && videoConfigData.value.length) {
		requestData.id = videoConfigData.value[0].id;
	}
	const res: any = await configWeekVideoSaveApi(requestData, showLoading);
	if (res.success) {
		console.log("修改成功", res);
		ElMessage({
			showClose: true,
			message: "上传成功",
			type: "success"
		});
		configWeekVideoListFn(true);
		emits("updateConfig");
	}
};
// 视频文件上传 之前
function handleBeforeUploadVideo(file: any) {
	console.log(file, "上传之前");
	let fileType = file.type.split("/")[0];
	if (fileType == "video") {
		showFullScreenLoading();
		return true;
	} else {
		ElMessage({
			showClose: true,
			message: "请选择正确的视频文件",
			type: "warning"
		});
		return false;
	}
}
// 视频上传成功
function handleSuccess(file: any, index: number) {
	if (file.code == 200 || file.status == "SUCCESS") {
		console.log(file, "上传成功");
		tryHideFullScreenLoading();
		let url = file.data[0].imageUrl;
		// this.imgUrl = url;
		configWeekVideoEditFn(true, url, index);
	}
}
// 视频上传成功
function handleError() {
	tryHideFullScreenLoading();
}

const closeDialog = () => {
	dialogInfo.showDialog = false;
	dialogInfo.postData = {};
};
function openDialog(obj: any) {
	dialogInfo.postData = obj;
	dialogInfo.showDialog = true;
}

const upload = ref<UploadInstance>();

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
	openDialog
});
onMounted(async () => {
	configWeekVideoListFn(true);
});
</script>

<style lang="scss" scoped>
.setvideodialog {
	position: absolute;
	width: 70%;
	height: 60%;
	right: 3%;
	top: 5%;
	background: rgba(7, 28, 49, 0.5);
	z-index: 100;

	.dialog-content {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 21%;
		width: 70%;
		height: 60%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}

	.dialog-content-show {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 1%;
		width: 70%;
		height: 98%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}

	.listdetail {
		position: absolute;
		// box-sizing: border-box;
		// padding: 1%;
		// right: 3%;
		// top: 5%;
		width: 100%;
		height: 100%;
		background: rgba(8, 31, 63, 0.7);
		z-index: 21;

		.dialog-content-more {
			// position: absolute;
			// box-sizing: border-box;
			// padding: 1%;
			// left: 15%;
			// top: 21%;
			width: 100%;
			height: 100%;
			background: url("@/assets/images/overviewScreen/card-content.png") no-repeat;
			background-size: 100% 100%;
			z-index: 21;
		}

		.contont-video {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10px;
			.video-list {
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 15px;
				margin-top: 30px;
				font-weight: bold;
				.no-inherit {
					margin-left: 8px;
				}
				.upload-demo {
					width: 45%;
				}
				:deep(.el-upload-list),
				:deep(.el-upload-list__item) {
					margin: 0;
				}
				:deep(.el-upload-list__item-info) {
					width: 100%;
				}
				:deep(.el-button.el-button--primary.el-button--default) {
					padding: 10px 15px;
					height: 40px;
				}

				:deep(.videoupload) {
					font-size: 20px;
				}
			}
		}
	}

	.dialog-content,
	.dialog-content-show,
	.dialog-content-more {
		position: relative;

		.political-outlook {
			height: 100%;
		}

		.dialog-article {
			height: 95%;
		}

		.close-icon {
			// position: absolute;
			// right: 3%;
			// top: 3%;
			cursor: pointer;
			color: #ffffff;
			font-size: 18px;
		}

		.dialog-title {
			color: #ffffff;
			font-weight: bold;
			font-size: 18px;
			font-family: "OPPOSans-Bold";
			display: flex;
			align-items: center;
			margin: 0 20px;
			padding-top: 10px;

			.title-time {
				font-size: 30px;
				color: #f34234;
				position: absolute;
				top: 3%;
				left: 50%;
				transform: translateX(-50%);
			}

			.title-img {
				width: 3%;
				height: 3%;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.title-text {
				margin-left: 1%;
				margin-right: auto;
			}
		}
	}
}

.notoDta {
	top: 73%;
	width: 12%;
	left: 44%;
	position: absolute;

	img {
		width: 40%;
		margin: 5% 30%;
	}

	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
</style>