hldy_app_mini/pages/login/animationpage.vue

<!-- 动画页 -->
<template>
	<view @click="morerule=false" >
		<view class="home">
			<image class="all-home" src="/static/index/warehouse/newhome/backpage.jpg" mode="aspectFit"></image>
		</view>
		<!-- <view class="right-title">
			<image class="title-imge" src="/static/home.png" mode="aspectFit"></image>
			<view class="title-font">
				{{ uni.getStorageSync('nuName') }}
			</view>
		</view> -->
		<view class="paizi tp">
			<donghua width="15vw" height="15vw" :interval="300" :links="paiziarray" :playing="playall" :loop="true" />
		</view>
		<view class="jiankong tp" @click="housactive(3)">
			<donghua width="15vw" height="15vw" :interval="150" :links="jiankongarray" :playing="playall"
				:loop="true" />
		</view>
		<view class="jiankongtag tp" @click="housactive(3)">
			<view class="blue-bgc">
				中控室
				<view class="triangle-middle"></view>
			</view>
			<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
		</view>
		<view class="wanjie tp" @click="housactive(4)">
			<donghua width="17vw" height="17vw" :interval="300" :links="wanjiearray" :playing="playall" :loop="true" />
		</view>
		<view class="wanjietag tp" @click="housactive(4)">
			<view class="blue-bgc">
				库房
				<view class="triangle-middle"></view>
			</view>
			<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
		</view>
		<view class="juzhen tp" @click.stop="morerule=true">
			<donghua width="17vw" height="17vw" :interval="300" :links="juzhenarray" :playing="playall" :loop="true" />
		</view>
		<view class="juzhentag tp" @click.stop="morerule= true">
			<view class="blue-bgc" style="background: #7BC2FF;width: 7vw;">
				指令矩阵
				<view class="triangle-middle" style="border-top: 0.5vw solid #7BC2FF"></view>
			</view>
			<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
		</view>
		<view class="openmore" v-show="morerule" @click.stop>
			<div class="triangle-left"></div>
			<view class="openmore-title">
				指令矩阵
			</view>
			<view class="openmore-gray">
				一体化行政调度，驱动高效运营，智能统筹护理资源，提升照护效率。
			</view>
			<view class="openmore-button">
				<view class="one-button">
					<image class="small-imge" src="/static/index/warehouse/t1.png" mode=""></image>
					护理矩阵
				</view>
				<view class="one-button">
					<image class="small-imge" src="/static/index/warehouse/t2.png" mode=""></image>
					医疗矩阵 
				</view>
				<view class="one-button">
					<image class="small-imge" src="/static/index/warehouse/t5.png" mode=""></image>
					库房矩阵 
				</view>
			</view>
			<view class="openmore-button">
				<view class="one-button">
					<image class="small-imge" src="/static/index/warehouse/t3.png" mode=""></image>
					行政矩阵
				</view>
				<view class="one-button">
					<image class="small-imge" src="/static/index/warehouse/t4.png" mode=""></image>
					请领矩阵
				</view>
			</view>
		</view>
		<view class="exittag tp" @click="exitshow=true">
			<view class="blue-bgc" style="background: #7BC2FF;width: 7vw;">
				退出
				<view class="triangle-middle" style="border-top: 0.5vw solid #7BC2FF"></view>
			</view>
			<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
		</view>
		<view class="caigou tp" @click="housactive(0)">
			<donghua width="16vw" height="16vw" :interval="150" :links="caigouarray" :playing="playall" :loop="true" />
		</view>
		<view class="caigoutag tp" @click="housactive(0)">
			<view class="blue-bgc" style="width: 7vw;">
				服务大厅
				<view class="triangle-middle"></view>
			</view>
			<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
		</view>
		<view class="ruku tp">
			<donghua width="11vw" height="11vw" :interval="300" :links="rukuarray" :playing="playall" :loop="true" />
		</view>
		<view class="chuku tp">
			<donghua width="11vw" height="11vw" :interval="300" :links="rukuarray" :playing="playall" :loop="true" />
		</view>
		<view class="jianhuo tp" @click="housactive(0)">
			<donghua width="34vw" height="34vw" :interval="150" :links="jianhuoarray" :playing="playall" :loop="true" />
		</view>
		<view class="jianhuotag tp" @click="housactive(0)">
			<view class="blue-bgc" style="width: 7vw;">
				护理单元
				<view class="triangle-middle"></view>
			</view>
			<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
		</view>
		<view class="pandan tp" @click="housactive(5)">
			<image src="/static/index/warehouse/newhome/count.png" mode="widthFix"></image>
		</view>

		<!-- <view class="pandantag tp" @click="housactive(5)">
			<view class="gray-bgc">
				库存盘点
				<view class="triangle-left"></view>
				<view class="triangle-left-bgc"></view>
			</view>
		</view> -->
		<view class="return tp" @click="housactive(8)">
			<image src="/static/index/warehouse/newhome/return.png" mode="widthFix"></image>
		</view>
		<view class="leadtag tp" @click="housactive(8)">
			<view class="gray-bgc">
				长者标签
				<view class="triangle-left"></view>
				<view class="triangle-left-bgc"></view>
			</view>
		</view>
		<view class="settingtag tp" @click="housactive(6)">
			<view class="gray-bgc">
				设置
				<view class="triangle-left"></view>
				<view class="triangle-left-bgc"></view>
			</view>
		</view>
		<view class="lead tp" @click="housactive(7)">
			<image src="/static/index/warehouse/newhome/lead.png" mode="widthFix"></image>
		</view>
		<view class="returntag tp" @click="housactive(7)">
			<view class="gray-bgc">
				行政办公室
				<view class="triangle-left"></view>
				<view class="triangle-left-bgc"></view>
			</view>
		</view>

		<view class="picking tp" @click="housactive(2)">
			<image src="/static/index/warehouse/newhome/picking.png" mode="widthFix"></image>
		</view>
		<!-- <view class="pickingtag tp" @click="housactive(2)">
			<view class="blue-bgc">
				拣货

				<view class="triangle-left-bgc"></view>
			</view>
		</view> -->
		<view :style="moverStyle">
			<image style="width: 100%;height: 100%;" :src="cararray[cartarget]" mode="widthFix"></image>
		</view>
		<exit :show="exitshow" @close="exitshow=false" />
		<!-- 自动更新组件  -->
		<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
			:appstoreflag="true" :autocheckupdate="true"></zy-update>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick } from 'vue';
	import { onBackPress, onShow } from "@dcloudio/uni-app"
	import { queryPadPageList } from '@/pages/watch/api/lunpan.js'
	import ZyUpdate from '@/component/zy-upgrade/zy-upgrade.vue'
	import exit from "@/component/public/exit.vue"

	onBackPress(() => {
		return true; // 禁止返回手势返回
	})
	const zyupgrade = ref(null);
	const leftMenuArray = ref([])
	const exitshow = ref(false);
	const morerule = ref(false)
	// 生命周期钩子
	onShow(() => {
		zyupgrade.value?.check_update();
		queryPadPageList().then((res => {
			leftMenuArray.value = res.result.records;

		}))
	});
	const filteredMenu = (index : number) => {
		return leftMenuArray.value.filter(item => Number(item.areaFlag) - 1 == index);
	}
	const juzhenarray =
		genPaths(
			'/static/index/warehouse/newhome/',
			'matrix',
			5,    // 张数
			'png',
			0,     // 起始索引为 1
			false  // 不补零
		)
	const cararray =
		genPaths(
			'/static/index/warehouse/newhome/',
			'train',
			10,    // 张数
			'png',
			1,     // 起始索引为 1
			false  // 不补零
		)
	const cartarget = ref(0)
	const paiziarray =
		genPaths(
			'/static/index/warehouse/newhome/',
			'logo',
			3,    // 张数
			'png',
			1,     // 起始索引为 1
			false  // 不补零
		)
	const jiankongarray =
		genPaths(
			'/static/index/warehouse/newhome/',
			'monitor',
			8,    // 张数
			'png',
			0,     // 起始索引为 1
			false  // 不补零
		)
	const wanjiearray =
		genPaths(
			'/static/index/warehouse/newhome/',
			'end',
			6,    // 张数
			'png',
			0,     // 起始索引为 1
			false  // 不补零
		)
	const caigouarray = genPaths(
		'/static/index/warehouse/newhome/',
		'purchase',
		8,    // 张数
		'png',
		0,     // 起始索引为 1
		false  // 不补零
	)
	const rukuarray = genPaths(
		'/static/index/warehouse/newhome/',
		'unit1-',
		5,    // 张数
		'png',
		0,     // 起始索引为 1
		false  // 不补零
	)
	const jianhuoarray = genPaths(
		'/static/index/warehouse/newhome/',
		'Warehouse',
		8,    // 张数
		'png',
		1,     // 起始索引为 1
		false  // 不补零
	)
	const playall = ref(false);

	onMounted(() => {
		playall.value = true;
		ceshi()

	})

	const housedex = ref(0);
	const navurl = ref('')
	const housactive = (index : number) => {

		

		housedex.value = index;
		if (index == 0) {
			let data = filteredMenu(0)[0]
			uni.setStorageSync('nuId', data.nuId);
			uni.setStorageSync('nuName', data.nuName);
			uni.setStorageSync('elderId', data.elderInfo ? data.elderInfo?.id : null);
			uni.setStorageSync('NUall', data);
			uni.navigateTo({
				url: '/pages/NursingNew/index'
			})
		}
		// if (index == 1) {
		// 	navurl.value = 'pages/Warehouse/paymoney'
		// 	uni.navigateTo({
		// 		url: '/' + navurl.value
		// 	})
		// }

		// if (index == 2) {
		// 	navurl.value = 'pages/Warehouse/picking'
		// 	uni.navigateTo({
		// 		url: '/' + navurl.value
		// 	})
		// }

		if (index === 3) {
			uni.navigateTo({
				url: "/pages/controlroom/index"
			})
		}
		if (index == 4) {
			let data = filteredMenu(2)[0]
			uni.setStorageSync('nuId', data.nuId);
			uni.setStorageSync('nuName', data.nuName);
			uni.setStorageSync('elderId', data.elderInfo ? data.elderInfo?.id : null);
			uni.setStorageSync('NUall', data);
			// uni.navigateTo({
			// 	url: '/pages/Warehouse/warehome',
			// })
			uni.navigateTo({
				url: '/pages/Warehouse/index/index',
			})
		}
		if (index == 6) {
			uni.navigateTo({
				url: '/pages/watch/settings/settings',
			})
		}
		// if (index == 7) {
		// 	navurl.value = 'pages/procurement/outbound?code=1'
		// 	uni.navigateTo({
		// 		url: '/' + navurl.value
		// 	})
		// }
		// if (index == 8) {
		// 	navurl.value = 'pages/procurement/retstock'
		// 	uni.navigateTo({
		// 		url: '/' + navurl.value
		// 	})
		// }


	}


	function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
		return Array.from({ length: count }, (_, i) => {
			const idx = pad
				? String(i + startIndex).padStart(2, '0')
				: i + startIndex
			return `${base}/${prefix}${idx}.${ext}`
		})
	}
	// 当前坐标（px）
	const x = ref(77)
	const y = ref(60)
	// 默认过渡时长（s）
	const duration = ref(0.7)
	const easing = 'linear' // 柔和的 easing

	// 样式绑定：translate3d + transition（GPU 加速）
	const moverStyle = computed(() => {
		return {
			position: 'fixed',
			left: '0',
			top: '0',
			width: '7vw',       // 图片宽高按需改
			height: '7vw',
			transform: `translate3d(${x.value}vw, ${y.value}vw, 0)`,
			transition: `transform ${duration.value}s ${easing}`,
			willChange: 'transform'
		}
	})

	// 调用函数：moveTo(pxX, pxY, seconds)
	function moveTo(pxX, pxY, seconds = 0.6) {
		// 设置时长（秒），然后直接改坐标
		duration.value = seconds
		x.value = pxX
		y.value = pxY
	}

	const ceshi = () => {
		moveTo(23, 40.5, 3);
		cartarget.value = 0
		setTimeout(() => {
			cartarget.value = 1
			moveTo(24.5, 38, 0.5); // 6 秒后执行这个
		}, 3000);
		setTimeout(() => {
			cartarget.value = 2
			moveTo(35, 32, 2); // 6 秒后执行这
		}, 3500);
		setTimeout(() => {
			cartarget.value = 3
			moveTo(38, 29.5, 0.5); // 6 秒后执行这个
		}, 5500);
		setTimeout(() => {
			cartarget.value = 4
			moveTo(63.5, 37.8, 3); // 6 秒后执行这
		}, 6000);
		setTimeout(() => {
			cartarget.value = 5
			moveTo(91, 21, 3); // 6 秒后执行这个
		}, 9000);
		setTimeout(() => {
			cartarget.value = 6
			moveTo(90, 19, 0.5); // 6 秒后执行这个
		}, 12000);
		setTimeout(() => {
			cartarget.value = 7
			moveTo(89, 17, 0.5); // 6 秒后执行这个
		}, 12500);
		setTimeout(() => {
			cartarget.value = 8
			moveTo(48, 4, 3); // 6 秒后执行这个
		}, 13000);
		setTimeout(() => {
			cartarget.value = 9
			moveTo(-11, 37.5, 4); // 6 秒后执行这个
		}, 16000);
		setTimeout(() => {
			cartarget.value = 0
			moveTo(77, 60, 0.0001);
		}, 20000);
		setTimeout(() => {
			ceshi()
		}, 21000);
	}
</script>

<style scoped lang="less">
	.home {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		z-index: 0;

		.all-home {
			width: 100%;
			height: 100%;

		}
	}

	.tp {
		image {
			width: 100%;
			height: 100%;
		}
	}

	.paizi {
		width: 15vw;
		height: 15vw;
		position: fixed;
		bottom: 3.3vw;
		left: 14.8vw;
	}

	.jiankong {
		width: 14vw;
		height: 14vw;
		position: fixed;
		top: 7vw;
		left: 12vw;
		z-index: 50;
	}

	.wanjie {
		width: 17vw;
		height: 17vw;
		position: fixed;
		top: 9vw;
		left: 34vw;
		z-index: 50;
	}

	.pandan {
		width: 9vw;
		height: 9vw;
		position: fixed;
		top: 20.5vw;
		left: 38vw;
		z-index: 50;
	}

	.caigou {
		width: 16vw;
		height: 16vw;
		position: fixed;
		top: 34vw;
		left: 39vw;
		z-index: 50;
	}

	.ruku {
		width: 11vw;
		height: 11vw;
		position: fixed;
		bottom: 10.5vw;
		right: 19vw;
		z-index: 50;
	}

	.chuku {
		width: 11vw;
		height: 11vw;
		position: fixed;
		bottom: 20vw;
		right: 6vw;
		z-index: 50;
	}

	.return {
		width: 6.5vw;
		height: 6.5vw;
		position: fixed;
		bottom: 10.5vw;
		right: 26vw;
		z-index: 50;
	}

	.lead {
		width: 7vw;
		height: 7vw;
		position: fixed;
		bottom: 19vw;
		right: 14vw;
		z-index: 50;
	}

	.jianhuo {
		width: 34vw;
		height: 34vw;
		position: fixed;
		top: 8vw;
		right: 19vw;
		z-index: 50;
	}

	.picking {
		width: 10vw;
		height: 10vw;
		position: fixed;
		top: 28.8vw;
		right: 28vw;
		z-index: 50;
	}

	.blue-bgc {
		background: linear-gradient(to right, #0385fa, #0195f3);
		border: 1rpx solid #fff;
		width: 6.5vw;
		height: 2.8vw;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 2vw;
		color: #fff;
		position: relative;

		.triangle-middle {
			position: absolute;
			top: 2.6vw;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 0.5vw solid transparent;
			border-right: 0.5vw solid transparent;
			border-top: 0.5vw solid #0385fa;
		}

		.triangle-left-bgc {
			position: absolute;
			top: 2.68vw;
			left: 1.17vw;
			width: 0;
			height: 0;

			/* 左上是直角的三角形 —— 只要两个边有颜色 */
			border-top: 0.45vw solid #0385fa;
			/* 上边  */
			border-left: 0.55vw solid #0385fa;
			/* 左边  */

			/* 另外两个边透明（保持三角形形状） */
			border-right: 0.55vw solid transparent;
			border-bottom: 0.55vw solid transparent;
		}
	}

	.juzhen {
		width: 17vw;
		height: 17vw;
		position: fixed;
		top: 20vw;
		left: 19vw;
		z-index: 50;
	}

	.exittag {
		position: fixed;
		top: 6vw;
		right: 10.5vw;
		z-index: 51;

		.blue-imge {
			position: absolute;
			top: 2.2vw;
			left: 50%;
			transform: translateX(-50%);
			width: 3vw;
			height: 5vw;
		}
	}

	.juzhentag {
		position: fixed;
		top: 20vw;
		left: 24vw;
		z-index: 51;

		.blue-imge {
			position: absolute;
			top: 2.2vw;
			left: 50%;
			transform: translateX(-50%);
			width: 3vw;
			height: 5vw;
		}
	}

	.gray-bgc {
		background: #e4efff;
		border: 1rpx solid #60a1ff;
		width: 8vw;
		height: 2.8vw;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 2vw;
		color: #0385fa;
		position: relative;


		.triangle-left-bgc {
			position: absolute;
			top: 2.68vw;
			left: 1.17vw;
			width: 0;
			height: 0;

			/* 左上是直角的三角形 —— 只要两个边有颜色 */
			border-top: 0.45vw solid #60a1ff;
			/* 上边  */
			border-left: 0.55vw solid #60a1ff;
			/* 左边  */

			/* 另外两个边透明（保持三角形形状） */
			border-right: 0.55vw solid transparent;
			border-bottom: 0.55vw solid transparent;
		}

		.triangle-left {
			position: absolute;
			top: 2.68vw;
			left: 1.2vw;
			width: 0;
			height: 0;

			/* 左上是直角的三角形 —— 只要两个边有颜色 */
			border-top: 0.4vw solid #e4efff;
			/* 上边  */
			border-left: 0.5vw solid #e4efff;
			/* 左边  */

			/* 另外两个边透明（保持三角形形状） */
			border-right: 0.5vw solid transparent;
			border-bottom: 0.5vw solid transparent;
			z-index: 1;
		}
	}

	.jiankongtag {
		position: fixed;
		top: 8vw;
		left: 16vw;
		z-index: 51;

		.blue-imge {
			position: absolute;
			top: 2.2vw;
			left: 50%;
			transform: translateX(-50%);
			width: 3vw;
			height: 5vw;
		}
	}

	.pickingtag {
		position: fixed;
		top: 28vw;
		left: 67vw;
		z-index: 51;

		.blue-imge {
			position: absolute;
			top: 2.2vw;
			left: 50%;
			transform: translateX(-50%);
			width: 3vw;
			height: 5vw;
		}
	}

	.jianhuotag {
		position: fixed;
		top: 11vw;
		left: 58vw;
		z-index: 51;

		.blue-imge {
			position: absolute;
			top: 2.2vw;
			left: 50%;
			transform: translateX(-50%);
			width: 3vw;
			height: 5vw;
		}
	}

	.wanjietag {
		position: fixed;
		top: 11vw;
		left: 38.5vw;
		z-index: 51;

		.blue-imge {
			position: absolute;
			top: 2.2vw;
			left: 50%;
			transform: translateX(-50%);
			width: 3vw;
			height: 5vw;
		}
	}

	.caigoutag {
		position: fixed;
		top: 35vw;
		left: 43vw;
		z-index: 51;

		.blue-imge {
			position: absolute;
			top: 2.2vw;
			left: 50%;
			transform: translateX(-50%);
			width: 3vw;
			height: 5vw;
		}
	}

	.pandantag {
		position: fixed;
		top: 21vw;
		left: 44vw;
		z-index: 51;
	}

	.returntag {
		position: fixed;
		top: 34vw;
		left: 81vw;
		z-index: 51;
	}

	.leadtag {
		position: fixed;
		top: 44vw;
		left: 72vw;
		z-index: 51;
	}

	.settingtag {
		position: fixed;
		top: 52vw;
		right: 15vw;
		z-index: 51;
	}

	.right-title {
		position: fixed;
		right: 2vw;
		top: 3vw;
		display: flex;
		align-items: center;

		.title-imge {
			width: 1.8vw;
			height: 1.8vw;
			margin-right: 0.5vw;
			// margin-top: -0.3vw;
		}

		.title-font {
			font-size: 32rpx;
			// margin-left: 3vw;
			font-weight: 600;

		}
	}

	.openmore {
		position: fixed;
		top: 30vh;
		left: 33.5vw;
		width: 27.7vw;
		height: 22.5vh;
		background-color: #fff;
		z-index: 53;
		border-radius: 0.5vw;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
		padding: 1.5vw 2vw;
		.openmore-title{
			font-size: 1.5vw;
			font-weight: 600;
		}
		.openmore-gray{
			font-size: 1vw;
			color: #999;
			margin-top: 0.5vw;
		}
		.triangle-left {
			position: absolute;
			left: -1vw;
			top: 3vh;
			width: 0;
			height: 0;
			border-top: 1vw solid transparent;
			border-bottom: 1vw solid transparent;
			border-right: 1.2vw solid #fff;
		}
		.openmore-button{
			display: flex;
			margin-top: 1.5vw;
			width: 100%;
			// height: 3vw;
			// background-color: red;
			.one-button{
				display: flex;
				// justify-content: center;
				align-items: center;
				height: 1vw;
				width: 8vw;
				font-size: 1.2vw;
				.small-imge{
					width: 1.5vw;
					height: 1.5vw;
					margin-right: 0.4vw;
				}
			}
		}
	}
</style>