hldy_app_mini/pages/login/newanimationpage.vue

719 lines
16 KiB
Vue

<!-- 动画页 -->
<template>
<view>
<!-- <view class="ceshi">
<image class="all-home" src="/static/ceshi.png" mode="aspectFit"></image>
</view> -->
<view class="home">
<image class="all-home" src="/static/index/warehouse/newindexhome/backdro.jpg" mode="scaleToFill"></image>
</view>
<view class="store tp" @click="housactive(4)">
<image class="all-home" src="/static/index/warehouse/newindexhome/store.png" mode="aspectFit"></image>
</view>
<view class="store-font" @click="housactive(4)">
库房
<view class="font-ball">
<view class="ball-ball">
<view class="fin-ball"></view>
</view>
</view>
</view>
<view class="unit-font" @click="housactive(0)">
护理单元
<view class="font-ball">
<view class="ball-ball">
<view class="fin-ball"></view>
</view>
</view>
</view>
<view class="back-font">
后勤
<view class="font-ball">
<view class="ball-ball">
<view class="fin-ball"></view>
</view>
</view>
</view>
<view class="office-font" @click="housactive(1)">
行政办公室
<view class="font-ball">
<view class="ball-ball">
<view class="fin-ball"></view>
</view>
</view>
</view>
<view class="fontroom-font">
服务大厅
<view class="font-ball">
<view class="ball-ball">
<view class="fin-ball"></view>
</view>
</view>
</view>
<view class="storeman tp">
<donghua width="4vw" height="7vw" :interval="250" :links="storemanLooparray" :playing="playall"
:loop="true" />
</view>
<view class="worker tp">
<donghua width="4.5vw" height="6vw" :interval="250" :links="workerLoopArray" :playing="playall"
:loop="true" />
</view>
<view class="line tp">
<donghua width="100vw" height="100vh" :interval="500" :links="lamparray" :playing="playall" :loop="true" />
</view>
<view class="unit" @click="housactive(0)">
<image class="all-home" src="/static/index/warehouse/newindexhome/un.png" mode="aspectFit"></image>
</view>
<view class="unit-text" :style="{ fontSize: fontSize }">
{{ fontnumber }}
</view>
<view class="unit-image">
<image class="all-home" :src="fonturl?fonturl:'/static/index/indeximage.png'" mode="aspectFit"></image>
</view>
<view class="office" @click="housactive(1)">
<image class="all-home" src="/static/index/warehouse/newindexhome/office.png" mode="aspectFit"></image>
</view>
<view class="officer tp" @click="housactive(1)">
<donghua width="14vw" height="13vw" :interval="250" :links="officerarray" :playing="playall" :loop="true" />
</view>
<view class="Print tp">
<donghua width="5vw" height="5vw" :interval="300" :links="Printarray" :playing="playall" :loop="true" />
</view>
<view class="fontend tp">
<image class="all-home" src="/static/index/warehouse/newindexhome/reception.png" mode="aspectFit"></image>
</view>
<view class="fontendtable tp">
<image class="all-home" src="/static/index/warehouse/newindexhome/reception2.png" mode="aspectFit"></image>
</view>
<view class="peopleleft tp">
<donghua width="7vw" height="8vw" :interval="550" :links="peopleleftarray" :playing="playall"
:loop="true" />
</view>
<view class="peopleright tp">
<donghua width="7vw" height="8vw" :interval="600" :links="peoplerightarray" :playing="playall"
:loop="true" />
</view>
<view class="door tp">
<donghua width="17vw" height="16vw" :interval="200" :links="[...doorarray, ...doorarray.slice().reverse()]"
:playing="playall" :loop="true" />
</view>
<view class="ondoor tp">
<donghua width="5vw" height="6vw" :interval="300" :links="ondoorarray" :playing="playall" :loop="true" />
</view>
<view class="fontroom tp">
<image class="all-home" src="/static/index/warehouse/newindexhome/receive.png" mode="aspectFit"></image>
</view>
<view class="button-setting" @click="housactive(7)">
<image class="button-img" src="/static/index/setting.png" mode="aspectFit"></image>
</view>
<view class="button-back" @click="housactive(8)">
<image class="button-img" src="/static/index/back.png" mode="aspectFit"></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 { getServiceTree0, getServiceTree1, getServiceTree2 } from '@/pages/NursingNew/component/nurse/api.js'
import { onBackPress, onShow, onHide } from "@dcloudio/uni-app"
import { queryPadPageList, queryDepartTreeSync } 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 playall = ref(false);
const zyupgrade = ref(null);
const leftMenuArray = ref([])
const exitshow = ref(false);
const morerule = ref(false)
const fontnumber = ref("")
const fonturl = ref("")
const fontSize = computed(() => {
const len = (fontnumber.value || '').length
if (len === 10) return '1.3vw' // 恰好10字
if (len < 10) return '1.5vw' // 少于10字
if (len <= 15) return '1.1vw' // 11~15字
return '0.9vw' // 超过15字
})
onHide(() => {
playall.value = false;
})
// 生命周期钩子
onShow(() => {
setTimeout(()=>{
playall.value = true;
},200)
zyupgrade.value?.check_update();
queryPadPageList().then((res => {
leftMenuArray.value = res.result.records;
// console.log("????", res)
}))
fontnumber.value = uni.getStorageSync('orgListName');
queryDepartTreeSync().then(res => {
if (res.result[0].picUrl) {
fonturl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/' + res.result[0].picUrl
} else {
fonturl.value = '';
}
})
});
const filteredMenu = (index : number) => {
return leftMenuArray.value.filter(item => Number(item.areaFlag) - 1 == index);
}
const ondoorarray =
genPaths(
'/static/index/warehouse/newindexhome/',
'gate',
5, // 张数
'png',
0, // 起始索引为 1
false // 不补零
)
const doorarray =
genPaths(
'/static/index/warehouse/newindexhome/',
'door',
11, // 张数
'png',
0, // 起始索引为 1
false // 不补零
)
const peopleleftarray =
genPaths(
'/static/index/warehouse/newindexhome/',
'Front',
2, // 张数
'png',
1, // 起始索引为 1
false // 不补零
)
const peoplerightarray =
genPaths(
'/static/index/warehouse/newindexhome/',
'Front',
2, // 张数
'png',
3, // 起始索引为 1
false // 不补零
)
const storemanarray =
genPaths(
'/static/index/warehouse/newindexhome/',
'Operator',
8, // 张数
'png',
1, // 起始索引为 1
false // 不补零
)
const storemanLooparray = [
...storemanarray,
...storemanarray.slice(0, -1).reverse()
]
const lamparray =
genPaths(
'/static/index/warehouse/newindexhome/',
'lamp',
2, // 张数
'png',
1, // 起始索引为 1
false // 不补零
)
const workerarray =
genPaths(
'/static/index/warehouse/newindexhome/',
'service',
8, // 张数
'png',
0, // 起始索引为 1
false // 不补零
)
const workerLoopArray = [
...workerarray,
...workerarray.slice(0, -1).reverse()
]
const officerarray =
genPaths(
'/static/index/warehouse/newindexhome/cler',
'cler1-',
24, // 张数
'png',
1, // 起始索引为 1
false // 不补零
)
const Printarray =
genPaths(
'/static/index/warehouse/newindexhome/',
'printer',
13, // 张数
'png',
1, // 起始索引为 1
false // 不补零
)
onMounted(() => {
// console.log("ceshi")
// playall.value = true;
// 矩阵的菜单大量数据
getServiceTree0().then((res : any) => {
//缓存护嘱菜单
uni.setStorageSync("saveTree0", res)
// console.log("????0", res)
getServiceTree1().then((res : any) => {
//缓存护嘱菜单
uni.setStorageSync("saveTree1", res)
// console.log("????1", res)
})
getServiceTree2().then((res : any) => {
//缓存护嘱菜单
uni.setStorageSync("saveTree2", res)
// console.log("????2", res)
})
})
})
const housedex = ref(0);
const navurl = ref('')
const housactive = (index : number) => {
housedex.value = index;
if (index == 0) {
let data = filteredMenu(0)[0]
if (!data) {
uni.showToast({
title: '暂无单元数据', // 文案要短
icon: 'error', // 不要用 success 的勾,错误要用 none
duration: 1500
});
return
}
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) {
uni.navigateTo({
url: '/pages/recording/recorder'
})
}
// 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]
if (!data) {
uni.showToast({
title: '暂无库房数据', // 文案要短
icon: 'error', // 不要用 success 的勾,错误要用 none
duration: 1500
});
return
}
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) {
uni.navigateTo({
url: '/pages/watch/settings/settings',
})
}
if (index == 8) {
exitshow.value = true;
}
}
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}`
})
}
</script>
<style scoped lang="less">
.home {
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
z-index: 0;
}
.line {
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
z-index: 0;
top: 10vw;
left: 0;
}
.all-home {
width: 100%;
height: 100%;
}
.store {
width: 50vw;
height: 30vw;
position: fixed;
top: -4vw;
left: -3vw;
z-index: 2;
}
.unit-font {
width: 9vw;
height: 3vw;
position: fixed;
top: 7.5vw;
left: 60vw;
display: flex;
justify-content: center;
align-items: center;
background: rgba(71, 188, 255, 0.2);
font-size: 1.5vw;
color: #0089FE;
border-radius: 2vw;
position: relative;
z-index: 3;
border: 2rpx solid rgba(255, 255, 255, 0.6);
}
.office-font {
width: 10vw;
height: 3vw;
position: fixed;
top: 22vw;
left: 75.5vw;
display: flex;
justify-content: center;
align-items: center;
background: rgba(71, 188, 255, 0.2);
font-size: 1.5vw;
color: #0089FE;
border-radius: 2vw;
position: relative;
z-index: 3;
border: 2rpx solid rgba(255, 255, 255, 0.6);
}
.fontroom-font {
width: 9vw;
height: 3vw;
position: fixed;
top: 30.8vw;
left: 49vw;
display: flex;
justify-content: center;
align-items: center;
background: rgba(71, 188, 255, 0.2);
font-size: 1.5vw;
color: #0089FE;
border-radius: 2vw;
position: relative;
z-index: 3;
border: 2rpx solid rgba(255, 255, 255, 0.6);
}
.back-font {
width: 7vw;
height: 3vw;
position: fixed;
top: 1vw;
left: 81vw;
display: flex;
justify-content: center;
align-items: center;
background: rgba(71, 188, 255, 0.2);
font-size: 1.5vw;
color: #0089FE;
border-radius: 2vw;
position: relative;
z-index: 3;
border: 2rpx solid rgba(255, 255, 255, 0.6);
}
.store-font {
width: 7vw;
height: 3vw;
position: fixed;
top: 4vw;
left: 20vw;
display: flex;
justify-content: center;
align-items: center;
background: rgba(71, 188, 255, 0.2);
font-size: 1.5vw;
color: #0089FE;
border-radius: 2vw;
position: relative;
z-index: 3;
border: 2rpx solid rgba(255, 255, 255, 0.6);
}
.font-ball {
position: absolute;
bottom: -2.8vw;
left: 50%;
transform: translateX(-50%);
width: 2vw;
height: 2vw;
background-color: #C5DDF9;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.ball-ball {
width: 1vw;
height: 1vw;
border-radius: 50%;
background-color: #43A0FD;
display: flex;
justify-content: center;
align-items: center;
.fin-ball {
width: 0.5vw;
height: 0.5vw;
border-radius: 50%;
background-color: #fff;
}
}
}
.fontend {
width: 43vw;
height: 43vw;
position: fixed;
bottom: 5vw;
left: -1.5vw;
}
.fontendtable {
width: 30vw;
height: 30vw;
position: fixed;
bottom: 1.5vw;
left: 0vw;
z-index: 10;
}
.peopleleft {
width: 7vw;
height: 8vw;
position: fixed;
bottom: 11vw;
left: 16vw;
}
.peopleright {
width: 7vw;
height: 8vw;
position: fixed;
bottom: 14vw;
left: 10.5vw;
}
.fontroom {
width: 40vw;
height: 28vw;
position: fixed;
bottom: -7vw;
right: 26vw;
}
.storeman {
width: 3.8vw;
height: 6.5vw;
position: fixed;
top: 12vw;
left: 19vw;
z-index: 3;
}
.worker {
width: 4.5vw;
height: 6vw;
position: fixed;
top: 13.5vw;
right: 5vw;
z-index: 1;
}
.unit {
width: 53vw;
height: 53vw;
position: fixed;
top: -4vw;
left: 30vw;
z-index: 2;
}
.unit-text {
position: fixed;
bottom: 28.5vw;
left: 18vw;
z-index: 12;
display: inline-block;
transform-origin: left top;
/* 关键:左上角 */
transform: skewX(29deg) rotate(35deg) scaleY(1.2);
letter-spacing: -2px;
/* 负值 = 缩小 */
font-size: 1.2vw;
color: #0089FE;
}
.unit-image {
position: fixed;
bottom: 29.3vw;
left: 15.5vw;
z-index: 12;
display: inline-block;
transform-origin: left top;
/* 关键:左上角 */
transform: skewX(29deg) rotate(35deg) scaleY(1.2);
letter-spacing: -2px;
width: 2vw;
height: 2vw;
/* 负值 = 缩小 */
color: #0089FE;
}
.office {
width: 50vw;
height: 50vw;
position: fixed;
top: 18vw;
right: -15vw;
}
.officer {
width: 14vw;
height: 13vw;
position: fixed;
bottom: 16vw;
right: 2vw;
z-index: 2;
}
.Print {
width: 5vw;
height: 5vw;
position: fixed;
bottom: 22vw;
right: 13vw;
z-index: 1;
}
.button-setting {
width: 5vw;
height: 5vw;
border-radius: 50%;
border: 1rpx solid #A3B2CF;
position: fixed;
bottom: 2vw;
right: 9vw;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #E9EEF8, #D4DBE8);
z-index: 10;
}
.button-back {
width: 5vw;
height: 5vw;
border-radius: 50%;
border: 1rpx solid #A3B2CF;
position: fixed;
bottom: 2vw;
right: 3vw;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #E9EEF8, #D4DBE8);
z-index: 10;
}
.button-img {
width: 50%;
height: 50%;
}
.door {
width: 17vw;
height: 16vw;
position: fixed;
bottom: 0vw;
left: 0vw;
}
.ondoor {
width: 5vw;
height: 6vw;
position: fixed;
bottom: -0.5vw;
left: 9vw;
}
.ceshi {
position: fixed;
top: 0rpx;
left: 0;
// background-color: red;
z-index: 9999;
width: 2139rpx;
height: 1337rpx;
}
</style>