hldy_app_mini/pages/controlroom/component/changemenu.vue

<template>
	<view class="right-top">
		<view class="top-title">
			切换机构
		</view>
		<scroll-view class="top-list" scroll-y>
			<view class="list-view" :style="menutarget===index?{borderColor:`#8DD6FF`,backgroundColor:`#F7F7F9`}:{}"
				v-for="(item,index) in leftMenuArray" :key="index" @click="clickmenu(index)">
				<image class="list-img" v-show="item.areaFlag==1"
					:src="`/static/index/newindex/leftmenu/NU${item.elderInfo?.name?`blue`:`white`}.png`" />
				<image class="list-img" v-show="item.areaFlag==3"
					:src="`/static/index/newindex/leftmenu/ware${item.elderInfo?.name?`blue`:`white`}.png`" />
				<view class="" v-show="item.areaFlag==1">
					<view class="first-line">
						<view style="font-size: 1.2vw;">
							{{ item.nuName }}
						</view>
						<view class="first-line-second">
							{{ item.elderInfo?.name?`入住`:`空闲` }}
						</view>
					</view>
					<view class="second-line">
						NUID：{{ item.nuId }}
					</view>
				</view>
				<view class="" v-show="item.areaFlag==3">
					<view class="first-line">
						<view style="font-size: 1.2vw;">
							{{ item.nuName }}
						</view>
						<view class="first-line-second">
							{{ item.elderInfo?.name?`盘点`:`正常` }}
						</view>
					</view>
					<view class="second-line">
						NUID：{{ item.nuId }}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		computed,
		nextTick,
		watch
	} from 'vue';
	import {
		queryPadPageList
	} from '@/pages/watch/api/lunpan.js'
	const menutarget = ref(-1)
	// 1️⃣ 定义 emit 事件（推荐写法）
	const emit = defineEmits(['change'])
	const clickmenu = (index) => {
		if(menutarget.value == index){
			return
		}
		menutarget.value = index
		let data = leftMenuArray.value[index]
		uni.setStorageSync('nuId', data.nuId);
		uni.setStorageSync('nuName', data.nuName);
		uni.setStorageSync('elderId', data.elderInfo ? data.elderInfo?.id : null);
		uni.setStorageSync('NUall', data);
		emit('change')
		uni.$emit('fullmonitor:killView');
		if (data?.cameraInfo !== null && data?.cameraInfo[0].deviceName) {
			uni.$emit('fullmonitor:isshow', true);
		
			// 加点延迟吧
			setTimeout(() => {
				uni.$emit('fullmonitor:changeinit', data?.cameraInfo[0].deviceIndex);
			}, 100)
		
		} else {
			uni.$emit('fullmonitor:isshow', false)
		}
	}
	const leftMenuArray = ref([]);
	onMounted(() => {
		queryPadPageList().then((res => {
			leftMenuArray.value = res.result.records;
			clickmenu(0)
		}))
	})
</script>

<style scoped lang="less">
	.right-top {
		margin-top: 80rpx;
		width: 100%;
		height: 50vh;
		background-color: #fff;
		border-radius: 4vh;

		.top-title {
			width: 100%;
			height: 7vh;
			display: flex;
			align-items: center;
			margin-left: 2vw;
			font-size: 1.4vw;
			font-weight: 600;
		}

		.top-list {
			width: 100%;
			height: 41vh;

			.list-view {
				width: 86%;
				margin-left: 7%;
				height: 8vh;
				border: 2rpx solid transparent;
				border-radius: 7vw;
				margin-bottom: 0.6vh;
				display: flex;
				align-items: center;

				.list-img {
					width: 4vw;
					height: 4vw;
					margin-left: 0.5vw;
					margin-right: 0.5vw;
				}

				.first-line {
					display: flex;

					.first-line-second {
						background-color: #E5E5E5;
						color: #555555;
						width: 3.2vw;
						height: 1.5vw;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 0.9vw;
						border-radius: 0.5vw;
						margin-left: 0.5vw;
					}
				}

				.second-line {
					color: #999999;
					margin-top: 0.2vw;
					font-size: 1vw;
				}
			}

		}
	}
</style>