hldy_app_mini/pages/login/animationpage.vue

759 lines
16 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 动画页 -->
<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: 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="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="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);
// 生命周期钩子
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) => {
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);
housedex.value = index;
if (index == 0) {
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/watch/full"
// })
// }
if (index == 4) {
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 + transitionGPU 加速)
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;
}
.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;
}
}
</style>