563 lines
11 KiB
Vue
563 lines
11 KiB
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)">
|
|
<donghua :width="item.width" :height="item.height" :links="item.url" :playing="index == housedex" />
|
|
</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/y2.png" mode="aspectFill" v-if="i==4"></image>
|
|
<image src="/static/index/warehouse/y1.png" mode="aspectFill" v-if="i!=4"></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'
|
|
uni.navigateTo({
|
|
url: '/' + navurl.value
|
|
})
|
|
}
|
|
if (housedex.value == 2) {
|
|
navurl.value = 'pages/Warehouse/purchaseorder'
|
|
uni.navigateTo({
|
|
url: '/' + navurl.value
|
|
})
|
|
}
|
|
// 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:
|
|
uni.navigateTo({
|
|
url: "/pages/watch/full"
|
|
})
|
|
break
|
|
case 3:
|
|
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;
|
|
border-radius: 0.8vw 0.8vw 1.5vw 1.5vw;
|
|
overflow: hidden;
|
|
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> |