kyj-yanglao-bigscreen-web/src/views/index/components/Toast.vue

<script setup>
	import { onMounted, ref, defineProps, onUnmounted } from 'vue';
	import { message } from 'ant-design-vue';
	import 'ezuikit-flv/style.css'; // @since 2.0.1
	import EzuikitFlv from 'ezuikit-flv';
	import fetchApp from '@/axios/fetchApp.js';

	const dateType = ref(0);
	const player = ref(null);
	const props = defineProps(['pageinfo']);
	console.log('props.pageinfo', props.pageinfo);
	// top类型切换
	const selectType = type => {
		console.log(type);
		dateType.value = type;
		if (type == 2) {
			initPlayer();
		}
	};

	// 初始化直播
	const initPlayer = () => {
		if (!props.pageinfo.tenantList || !props.pageinfo.tenantList?.length || !props.pageinfo.tenantList[0].tenantId) return message.error('暂无监控资源！');
		try {
			fetchApp.get('/v2/api/screen/getCameraAddress?organizationId=' + props.pageinfo.tenantList[0].tenantId).then(res => {
				if (res.code == 200) {
					const videoUrl = res.data.data.url;
					if (!videoUrl) return message.error('暂无监控资源！');
					setTimeout(() => {
						player.value = new EzuikitFlv({
							url: videoUrl,
							id: 'video_content',
							decoder: '/decoder.js', // 自定义解码库加载地址， 默认放置在服务器根目录下
							autoPlay: true
						});
					}, 500);
				}
			});
		} catch (error) {
			console.log('error', error);
			message.error('暂无监控资源！');
		}
	};

	onUnmounted(() => {
		if (player.value) {
			player.value.destroy();
		}
	});
</script>

<template>
	<div class="the-box9">
		<div class="change-num">
			<div class="change-num-item" :class="{ isActive: dateType === 0 }" @click="selectType(0)">
				<img v-if="dateType === 0" class="btn" src="@/assets/img/index/box8/button-bg.png" alt="" />
				<img v-if="dateType === 0" class="icon" src="@/assets/img/index/box8/button-icon-select.png" alt="" />
				<img v-else class="icon" src="@/assets/img/index/box8/button-icon.png" alt="" />
				<div class="text">本周菜品</div>
			</div>

			<div class="change-num-item" :class="{ isActive: dateType === 1 }" @click="selectType(1)">
				<img v-if="dateType === 1" class="btn" src="@/assets/img/index/box8/button-bg.png" alt="" />
				<img v-if="dateType === 1" class="icon" src="@/assets/img/index/box8/button-icon-select.png" alt="" />
				<img v-else class="icon" src="@/assets/img/index/box8/button-icon.png" alt="" />
				<div class="text">本周活动</div>
			</div>
			<div class="change-num-item" :class="{ isActive: dateType === 2 }" @click="selectType(2)">
				<img v-if="dateType === 2" class="btn" src="@/assets/img/index/box8/button-bg.png" alt="" />
				<img v-if="dateType === 2" class="icon" src="@/assets/img/index/box8/button-icon-select.png" alt="" />
				<img v-else class="icon" src="@/assets/img/index/box8/button-icon.png" alt="" />
				<div class="text">监控视频</div>
			</div>
		</div>
		<div class="info_contenbox">
			<div class="activebox" v-if="dateType == 0">
				<div class="scollrcontent" v-if="pageinfo.weekDishes">
					<div class="list_dishe" v-for="(item, index) in pageinfo.weekDishes" :key="index">
						<p class="week_name">{{ item[0] }}</p>
						<p class="valuetext" v-html="item[1]"></p>
						<p class="valuetext" v-html="item[2]"></p>
						<p class="valuetext" v-html="item[3]"></p>
					</div>
				</div>
			</div>
			<div class="activebox" v-if="dateType == 1">
				<div class="headoinfo">
					<p class="time_name">上午</p>
					<p class="time_text1">08:00-09:00</p>
					<p class="time_text2"></p>
					<p class="time_name">下午</p>
					<p class="time_text1">16:00-17:00</p>
					<!-- <p class="time_text2">16:00-17:00</p> -->
				</div>
				<div class="scollrcontent">
					<div class="list_detial" v-for="(item, index) in pageinfo.weekActivity" :key="index">
						<p class="time_name">{{ item.weekday }}</p>
						<div class="time_text1">
							<p>{{ item.morning }}</p>
						</div>

						<div class="time_text1">
							<p>{{ item.afternoon }}</p>
						</div>
					</div>
				</div>
			</div>
			<div id="video_content" style="width: 430px !important; height: 280px !important; margin-left: -15px !important" v-if="dateType == 2"></div>

			<!-- <div class="video_content" v-if="dateType == 2">
				<video autoplay muted :src="pageinfo && pageinfo.monitoringVideo ? pageinfo.monitoringVideo : '../../../assets//img/index/video.mp4'"></video>
			</div> -->
		</div>
	</div>
</template>

<style scoped lang="scss">
	.the-box9 {
		box-sizing: border-box;
		padding: 17px 27px;
		height: 100%;

		.change-num {
			position: absolute;
			top: 5px;
			right: 0;
			display: flex;
			align-content: center;

			.change-num-item {
				width: 100px;
				white-space: nowrap;
				height: 27px;
				font-size: 0;
				margin-right: 6px;
				position: relative;

				&:hover {
					cursor: pointer;
				}

				.btn {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
				}

				.icon {
					width: 25px;
					height: 25px;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 12px;
					margin: auto;
					z-index: 20;
				}

				.text {
					color: #d7e1e1;
					font-size: 14px;
					position: absolute;
					left: 36px;
					top: 0;
					bottom: 0;
					margin: auto;
					height: fit-content;
					z-index: 30;
				}
			}

			.isActive {
				.text {
					color: #00feff;
				}
			}
		}
		.info_contenbox {
			// border: 1px solid red;

			height: 330px;
			.activebox {
				width: 100%;
				height: 100%;

				.disheshead {
					display: flex;
					height: 30px;
					.head_text {
						width: 28%;
						display: block;
						color: #ffffff;
						font-size: 12px;
						text-align: center;
						white-space: nowrap;
					}
					.head_textnull {
						width: 10%;
						display: block;
					}
				}

				.headoinfo {
					width: 100%; // 473px
					height: 30px;
					// border: 1px solid red;
					display: flex;

					.time_name {
						width: 90px;
						text-align: right;
						font-size: 12px;
						color: #ffffff;
						//   border: 1px solid red;
					}
					.time_text1 {
						width: 90px;
						color: #ffffff;
						font-size: 12px;
						white-space: nowrap;
					}
					.time_text2 {
						width: 90px;
						color: #ffffff;
						font-size: 12px;
						white-space: nowrap;
					}
				}

				.scollrcontent {
					width: 100%;
					height: 300px;
					overflow-y: scroll;

					.list_dishe {
						display: flex;
						width: 100%;
						.week_name {
							width: 10%;
							text-align: left;
							font-size: 12px;
							color: #ffffff;
							display: block;
							white-space: nowrap;
						}
						.valuetext {
							width: 29%;
							display: block;
							font-size: 12px;
							color: #ffffff;
							line-height: 1.3;
							text-align: center;
						}
					}

					.list_detial {
						display: flex;
						.time_name {
							width: 56px;
							text-align: left;
							font-size: 12px;
							color: #ffffff;
							//   border: 1px solid red;
						}
						.time_text1 {
							width: 50%;
							p {
								color: #ffffff;
								font-size: 12px;
								text-align: center;
							}
						}
						.time_text2 {
							width: 90px;
							p {
								color: #ffffff;
								font-size: 12px;
								text-align: center;
							}
						}
					}
				}
			}
			.my-play {
				position: absolute;
				top: 50px;
				z-index: 10;
				left: 8px;
				color: white;
			}

			.video_content {
				width: 100%;
				height: 100%;
				img {
					width: 100%;
					height: 100%;
				}
				video {
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}
			}
		}
	}

	/* 设置滚动条的样式 */
	.toady_activebox::-webkit-scrollbar,
	.scollrcontent::-webkit-scrollbar {
		width: 8px;
		height: 0px;
	}
	/* 滚动槽 */
	.toady_activebox::-webkit-scrollbar-track,
	.scollrcontent::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 10px;
	}
	/* 滚动条滑块 */
	.toady_activebox::-webkit-scrollbar-thumb,
	.scollrcontent::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}
	.toady_activebox::-webkit-scrollbar-thumb:window-inactive,
	.scollrcontent::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(0, 13, 94, 0.1);
	}
</style>