hldy_app/pages/Warehouse/Warehouse.vue

<template>
	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`" v-show="isShow">
		<view class="wareaitem">
			<view class="wareaitem-item">
				<view class="tp" :class="'itemact'+(index+1)" v-for="(item,index) in animArray" :key='index'
					@click.stop="housactive(index)">
					<!-- <image :src="'/static/index/warehouse/active/w'+index+'.png'" mode="aspectFill"
						v-if="housedex!=index"></image> -->


					<donghua :width="item.width" :height="item.height" :links="item.url" :playing="index == housedex" />

					<!-- <image :src="'/static/index/warehouse/active/i'+index+'.png'" mode="aspectFill" v-if="housedex==index"></image> -->
				</view>

				<view class="tp" :class="'wareitem'+index" v-for="(item,index) in 12" :key='index'>
					<image :src="'/static/index/warehouse/w'+index+'.png'" mode="aspectFill"></image>
				</view>
				<view class="tp ys">
					<image :src="'/static/index/warehouse/i7.png'" mode="aspectFill"></image>
				</view>
				<view class="tp gifs">
					<image src="/static/index/warehouse/ys.gif" mode="aspectFill"></image>
				</view>
				<view class="tp wclik" @click.stop="housactive(1)">
					<!-- 采购增加层级高度方便点击 -->
				</view>
			</view>
			<view class="annotation" :class="'annotation'+(i+1)" v-for="(v,i) in ['付款','采购','拣货','结账','护理单元','监控室']"
				:key='i' @click="onlyjump(i)">
				<view> </view>
				<view class="tp">
					<text>{{v}}</text>
					<image src="/static/index/warehouse/y1.png" mode="aspectFill"></image>
				</view>
				<view class="tp">
					<image src="/static/index/warehouse/y0.png" mode="aspectFill"></image>
				</view>
			</view>
			<view @click="onlyjump(5)" class="zhanwei"></view>

			<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" />
			<view class="operationbtn">
				<view v-for="(v,i) in ['请领出库','退货入库','库存盘点','实时监控']" @tap="onTap(i)"
					:class="beblue === i ? 'click-box-target' : 'click-box'">
					<image
						:src="beblue === i?'/static/index/warehouse/ku/rq'+i+'.png':'/static/index/warehouse/ku/rs'+i+'.png'"
						mode="aspectFill"></image>
					{{v}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps } from 'vue';
	const darkFans = ref(false);
	const getblue = ref(false);
	const props = defineProps({
		isShow: {
			type: Boolean,
			required: true,
		},
	});
	const housedex = ref(-1);
	
	const housactive = (index : number) => {
		if (index > 5) { return }
		housedex.value = index;
		console.log("index", index)
		// 只有中心的四个有动画.....所以点不到监控室
		if (index === 5) {
			uni.navigateTo({
				url: "/pages/watch/full"
			})
		}
	}
	onMounted(()=>{
		housedex.value = 1
	})
	const navurl = ref('');
	const movecard = (type : number) => {
		// console.log(type,housedex.value)
		switch (type) {
			case 0:
				// 上
				housedex.value > 0 ? housedex.value-- : housedex.value = 3
				break;
			case 1:
				housedex.value > 2 ? housedex.value = 0 : housedex.value++
				// →
				break;
			case 2:
				housedex.value > 2 ? housedex.value = 0 : housedex.value++
				// 下
				break;
			case 3:
				housedex.value > 0 ? housedex.value-- : housedex.value = 3
				// ←
				break;
			case 4:
				// 确定
				console.log('选中' + housedex.value)
				if (housedex.value == 1) {
					navurl.value = 'pages/Warehouse/procurement'
				}
				if (housedex.value == 3) {
					navurl.value = 'pages/Warehouse/purchaseorder'
				}
				uni.navigateTo({
					url: '/' + navurl.value
				})
				break;
			case 5:
				// 返回
				uni.navigateBack()
				break;

			default:
				break;
		}
	}
	const onlyjump = (index : number) => {
		console.log("点击了哪个图标", index)
		if (index > 5) { return }
		if(index<4){
			housedex.value = index;
		}
		
		if (index === 5) {
			uni.navigateTo({
				url: "/pages/watch/full"
			})
		}
	}
	const beblue = ref<number>(-1);
	let clickResetTimer : ReturnType<typeof setTimeout> | null = null;
	// 单击（或短按）
	function onTap(dir : number) {
		clearClickResetTimer()
		console.log("?????",dir)
		beblue.value = dir
		clickResetTimer = setTimeout(() => {
			beblue.value = -1
			clickResetTimer = null
		}, 500)
		switch (dir) {
			case 0:

				break
			case 1:

				break
			case 2:

				
				break
			case 3:
				uni.navigateTo({
					url: "/pages/watch/full"
				})
				break
		}
	}
	function clearClickResetTimer() {
		if (clickResetTimer) {
			clearTimeout(clickResetTimer)
			clickResetTimer = null
		}
	}

	// 通用的生成函数
	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}`
		})
	}
	const animArray = ref([
		{
			url: genPaths(
				'/static/index/warehouse/animation',
				'remit0',
				5,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			width: '29vw',
			height: '21vw'
		},
		{
			url: genPaths(
				'/static/index/warehouse/animation',
				'buy0',
				5,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			width: '26vw',
			height: '16vw'
		},
		{
			url: genPaths(
				'/static/index/warehouse/animation',
				'Pick0',
				4,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			width: '17vw',
			height: '13vw'
		},
		{
			url: genPaths(
				'/static/index/warehouse/animation',
				'checkout0',
				5,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			width: '24vw',
			height: '16vw'
		},
		
	])
</script>

<style lang="less" scoped>
	.wareaitem {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: url('/static/index/warehouse/bg.png')no-repeat;
		background-size: cover cover;

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

		.operationbtn {
			width: 22vw;
			height: 10vw;
			position: absolute;
			right: 1.5vw;
			bottom: 2vw;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			>view {
				width: 10vw;
				height: 4vw;
				border-radius: 1vw;
				border: 2rpx solid #D9DADC;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 1.3vw;
				color: #888D99;
				margin: 0 0.3vw;
				transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease;
				-webkit-tap-highlight-color: transparent;

				image {
					width: 1.6vw;
					height: 1.6vw;
					margin-right: .2vw;
				}
			}

			.click-box {
				color: #888d99;
				background: rgba(255, 255, 255, 0.43);
			}

			.click-box-target {
				background: #FFFFFF;
				box-shadow: 0px 0px 3vw 0px rgba(12, 102, 209, 0.33) inset;
				// box-shadow: 0rpx 0rpx 3vw 0rpx rgba(38,137,255,0.44) inset;
				color: rgba(108, 132, 160, 1) !important;
				animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
				transform-origin: center center;
			}

			.grad-text {
				background: linear-gradient(90deg, #5b8bb3, #87a1bd);
				background-size: 200% 100%;
				background-position: 0% 50%;
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				transition: background-position 0.8s linear;
			}

			@keyframes scalePulse {
				0% {
					transform: scale(1);
				}

				25% {
					transform: scale(0.94);
				}

				65% {
					transform: scale(1.08);
				}

				100% {
					transform: scale(1);
				}
			}
		}

		.wareaitem-item {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: -2vw;

			.itemact1 {
				width: 29vw;
				height: 21vw;
				top: 23vw;
				left: 6vw;
				z-index: 31;
			}

			.itemact2 {
				width: 26vw;
				height: 16vw;
				top: 15vw;
				left: 41vw;
				z-index: 27;
			}

			.itemact4 {
				width: 24vw;
				height: 16vw;
				top: 28vw;
				left: 46vw;
				z-index: 55;
			}

			.itemact3{
				width: 17vw;
				height: 13vw;
				top: 22vw;
				left: 67vw;
				z-index: 36;
			}


			.wclik {
				width: 22vw;
				height: 14vw;
				top: 16vw;
				left: 44vw;
				z-index: 47;
			}

			.gifs {
				width: 41vw;
				height: 20vw;
				top: 21.6vw;
				left: 27.5vw;
				z-index: 29;
			}

			.ys {
				width: 11vw;
				height: 8vw;
				top: 24.2vw;
				left: 57.9vw;
				z-index: 28;
			}

			.wareitem1 {
				width: 86vw;
				height: 44vw;
				top: 1vw;
				left: 10.5vw;
				z-index: 15;
			}

			.wareitem4 {
				width: 11vw;
				height: 7vw;
				top: 30.9vw;
				left: 60vw;
			}

			.wareitem6 {
				width: 17vw;
				height: 12vw;
				top: 28vw;
				right: -2vw;
				z-index: 35;
			}

			.wareitem5 {
				width: 18vw;
				height: 15vw;
				top: 37vw;
				left: 73vw;
				z-index: 35;
			}

			.wareitem8 {
				width: 26vw;
				height: 8vw;
				top: 29.7vw;
				left: 21.8vw;
			}

			.wareitem11 {
				width: 3vw;
				height: 3vw;
				top: 24.5vw;
				left: 60vw;
				z-index: 35;
			}

			.wareitem10 {
				width: 55vw;
				height: 27vw;
				top: 38vw;
				left: 20vw;
				z-index: 36;
			}

			>view {
				position: absolute;
			}

		}

		.annotation1 {
			top: 21.5vw;
			left: 19.5vw;
		}

		.annotation2 {
			top: 13vw;
			left: 47vw;
		}

		.annotation3 {
			top: 18vw;
			left: 70vw;
		}

		.annotation4 {
			
			top: 24vw;
			left: 49.3vw;
		}

		.annotation5 {
			top: 34vw;
			left: 74vw;
		}

		.annotation6 {
			top: 24vw;
			right: 6vw;
		}

		// title
		.annotation {
			width: 7vw;
			height: 8vw;
			z-index: 20;
			position: fixed;


			>view {
				position: relative;

				&:nth-child(2) {
					width: 6.5vw;
					height: 3.2vw;
					z-index: 2;
					margin: -2rpx auto 0;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						position: absolute;
						top: 0;
						left: 0;
					}

					text {
						position: relative;
						font-weight: 400;
						font-size: 1.1vw;
						color: #fff;
						z-index: 3;
						margin-top: -0.5vw;
					}
				}

				&:nth-child(3) {
					width: 3vw;
					height: 5vw;
					z-index: 1;
					margin: -1vw auto 0;
				}
			}
		}

	}

	.backgroundContainer {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100vw;
		height: 100vh;
		background-image: url('/static/index/lightbgcnew.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}

	//暗黑模式
	.darkbackgroundContainer {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		background-image: url('/static/index/background.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}

	.zhanwei {
		position: absolute;
		top: 40vh;
		right: 3vw;
		width: 13vw;
		height: 13vw;
	}
</style>