696 lines
14 KiB
Vue
696 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<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="housactive(6)">
|
||
<donghua width="17vw" height="17vw" :interval="300" :links="juzhenarray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="juzhentag tp" @click="housactive(6)">
|
||
<view class="blue-bgc" style="background: #7BC2FF;width: 8vw;">
|
||
库房矩阵
|
||
<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">
|
||
采购
|
||
<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">
|
||
<donghua width="34vw" height="34vw" :interval="150" :links="jianhuoarray" :playing="playall" :loop="true" />
|
||
</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="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>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick } from 'vue';
|
||
|
||
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);
|
||
let clickAudio
|
||
onMounted(() => {
|
||
playall.value = true;
|
||
ceshi()
|
||
clickAudio = uni.createInnerAudioContext()
|
||
clickAudio.src = '/static/click.mp3'
|
||
clickAudio.volume = 0.4
|
||
})
|
||
|
||
const housedex = ref(0);
|
||
const navurl = ref('')
|
||
const housactive = (index : number) => {
|
||
clickAudio.stop() // 防止叠音（Galgame 必备）
|
||
clickAudio.play()
|
||
// console.log(index)
|
||
housedex.value = index;
|
||
if (index == 0) {
|
||
navurl.value = 'pages/procurement/material'
|
||
uni.navigateTo({
|
||
url: '/' + navurl.value
|
||
})
|
||
}
|
||
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/watch/full"
|
||
})
|
||
}
|
||
if (index == 4) {
|
||
navurl.value = 'pages/Warehouse/finish'
|
||
uni.navigateTo({
|
||
url: '/' + navurl.value
|
||
})
|
||
}
|
||
if (index == 5) {
|
||
navurl.value = 'pages/procurement/inventory'
|
||
uni.navigateTo({
|
||
url: '/' + navurl.value
|
||
})
|
||
}
|
||
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.2vw;
|
||
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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
|
||
}
|
||
}
|
||
|
||
// <view class="right-title">
|
||
// <image class="title-imge" src="/static/index/indeximage.png" mode="aspectFit"></image>
|
||
// <view class="title-font">
|
||
// {{ uni.getStorageSync('nuName') }}
|
||
// </view>
|
||
// </view>
|
||
</style> |