yangjun
/
hldy_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
hldy_app/pages/NursingNew/index.vue

762 lines
19 KiB
Vue
Raw Normal View History

11
2025-07-31 17:26:06 +08:00
<template>
<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`" @touchmove="getxy" @touchend="cleanall">
<!-- 这些东西是为了拖动模式来设计的 -->
<view class="move-font" v-show="savename && clientX" :animation="animationData">
{{savename}}
</view>
<view v-show="saveruler.cycleType"
:class="saveruler.cycleType=='日常' ? `title-time-border-yellow`:`title-time-border-pouple`"
:animation="animationData" style="font-size: 30rpx;overflow: hidden;">
<view class="title-time" v-show="saveruler.startTime" style="margin-top: 5rpx;">
<view class="title-time-time" style="font-size: 30rpx;">
{{saveruler.startTime + `-` + saveruler.endTime}}
</view>
<image class="title-time-button"
:src="saveruler.cycleType=='日常'?`/static/index/yellowbian.png`:`/static/index/puoplebian.png`" />
<view class="title-time-font">
{{saveruler.cycleType}}
</view>
</view>
<view style="margin-top: 20rpx;font-weight: 700;">
{{splitString(saveruler.directiveName)[0]}}
</view>
<view class="down-icons" :style="saveruler.cycleType!='日常'?{backgroundColor:`rgb(212,203,255)`}:{}"
v-show="splitString(saveruler.directiveName)[1]">
<view class="" v-for="(item,index) in splitString(saveruler.directiveName).slice(1)" :key="index">
<view class="icon" :style="saveruler.cycleType!='日常'?{backgroundColor:`rgb(123,97,255)`}:{}">
{{splitString(saveruler.directiveName)[1]}}
</view>
</view>
</view>
</view>
<view class="left-container">
<view class="left-head">
<image class="left-head-img" src="/static/index/oldman.png" />
<text :class="darkFans?`left-head-font-dark`:`left-head-font`">
王金福
</text>
</view>
<view class="menus-father">
1
2025-08-13 17:19:40 +08:00
<view v-for="(item,index) in leftMenuArray" :key="index" class="menu"
999999
2025-08-21 16:51:53 +08:00
:class="targetIndex===index?'target':''" :style="targetIndex === index ? { backgroundColor: '#ddf0ff' }: (index === menuIndex ? { backgroundColor: '#fff' } : {})" @click="changeMenu(index)">
11
2025-07-31 17:26:06 +08:00
<!-- <image class="menu-img" :src="item.url" /> -->
<donghua :width="`65rpx`" :height="`65rpx`" :links="item.url" :playing="index === menuIndex" />
1
2025-08-13 17:19:40 +08:00
<text style="font-size: 31rpx;margin-left: 15rpx;">
11
2025-07-31 17:26:06 +08:00
{{item.name}}
</text>
</view>
</view>
<!-- <view class="left-img-container">
<view v-for="(item,index) in iconList" :key="index" class="blue-circle-pos">
<view class="blue-circle" v-show="index === menuIndex">
<image class="blue-circle-size" :src="`/static/index/ray.png`" />
</view>
<image class="left-img" :src="index === menuIndex ? item.targetUrl : item.url"
@click="changeMenu(index)" />
</view>
</view> -->
</view>
<!-- 主页 -->
999999
2025-08-21 16:51:53 +08:00
<index :isShow="menuIndexshow" v-if="!menuIndex" :propsmove="propsmove" :isMain="isMain" @back="movecard(5)" />
1
2025-08-13 17:19:40 +08:00
999999
2025-08-21 16:51:53 +08:00
<nurse :isold="isOld===2" :liang="indexNumber" :isshow="menuIndexshowsecond" v-if="menuIndex==1&&isOld===2"
:propsmove="propsmove" :isMain="isMain" @vip="canmoveit" />
<arrowkeys @movecard="movecard" />
11
2025-07-31 17:26:06 +08:00
<!-- 超凶表格 -->
<!-- 旧表格 -->
<!-- <rightItemssecond ref="ruler" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
:darkFans="darkFans" v-show="menuIndex==1&&!isOld" @darkchange="darkchange" @savename="openname"
@saveruler="openruler" @changefangkuang="changefangkuang" @cleanname="closename" @changeold="isOldchange" /> -->
<!-- 新表格 -->
<!-- <specialruler ref="rulernew" :isold="isOld===1" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
:darkFans="darkFans" v-show="menuIndex==1&&isOld===1" @darkchange="darkchange" @savename="openname"
@saveruler="openruler" @changefangkuang="changefangkuang" @cleanname="closename" @changeold="isOldchange" /> -->
<!-- 新表格 -->
<!-- <rightItemssecondrelnew ref="rulernew" :isold="isOld===2" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
:darkFans="darkFans" v-show="menuIndex==1&&isOld===2" @darkchange="darkchange" @savename="openname"
@saveruler="openruler" @changefangkuang="changefangkuang" @cleanname="closename" @changeold="isOldchange" /> -->
</view>
</template>
<script setup lang="ts">
1
2025-08-13 17:19:40 +08:00
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
11
2025-07-31 17:26:06 +08:00
import type { Link } from "./index";
import index from "./component/index.vue"
import nurse from "./component/nurse/index.vue"
import { onShow } from '@dcloudio/uni-app';
onMounted(() => {
1
2025-08-13 17:19:40 +08:00
menuIndex.value = -1;
nextTick(() => menuIndex.value = 0)
11
2025-07-31 17:26:06 +08:00
isOld.value = 2;
uni.getSystemInfoSync(); // 确保 global 注入生效
uni.pageScrollTo; // 避免某些平台热更新惊群
// 被动监听提升拖拽性能
name.value = uni.getStorageSync('realname')
})
const name = ref("");
// 通用的生成函数
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 leftMenuArray = ref([
{
url: genPaths(
'/static/index/newindex/curve',
'home_',
5, // 张数
'png',
1, // 起始索引为 1
false // 不补零
1
2025-08-13 17:19:40 +08:00
), name: '首页'
11
2025-07-31 17:26:06 +08:00
},
{
url: genPaths(
'/static/index/newindex/curve',
'nurse_',
8, // 张数
'png',
1, // 起始索引为 1
false // 不补零
1
2025-08-13 17:19:40 +08:00
), name: '护嘱'
11
2025-07-31 17:26:06 +08:00
},
{
url: genPaths(
'/static/index/newindex/curve',
'doctor_',
6, // 张数
'png',
1, // 起始索引为 1
false // 不补零
1
2025-08-13 17:19:40 +08:00
), name: '医嘱'
11
2025-07-31 17:26:06 +08:00
},
{
url: genPaths(
'/static/index/newindex/curve',
'lead_',
12, // 张数
'png',
1, // 起始索引为 1
false // 不补零
1
2025-08-13 17:19:40 +08:00
), name: '请领'
11
2025-07-31 17:26:06 +08:00
},
{
url: genPaths(
'/static/index/newindex/curve',
'device_',
7, // 张数
'png',
1, // 起始索引为 1
false // 不补零
1
2025-08-13 17:19:40 +08:00
), name: '设备'
11
2025-07-31 17:26:06 +08:00
},
999999
2025-08-21 16:51:53 +08:00
// {
// url: genPaths(
// '/static/index/newindex/curve',
// 'return_',
// 8, // 张数
// 'png',
// 1, // 起始索引为 1
// false // 不补零
// ), name: '返回'
// },
11
2025-07-31 17:26:06 +08:00
])
const menuArray = ref([
1
2025-08-13 17:19:40 +08:00
{ url: '/static/index/lefticon/index.png', name: '首页' },
{ url: '/static/index/lefticon/nurse.png', name: '护嘱' },
{ url: '/static/index/lefticon/doctor.png', name: '医嘱' },
{ url: '/static/index/lefticon/give.png', name: '请领' },
{ url: '/static/index/lefticon/wifi.png', name: '设备' },
{ url: '/static/index/lefticon/back.png', name: '返回' }
11
2025-07-31 17:26:06 +08:00
])
1
2025-08-13 17:19:40 +08:00
11
2025-07-31 17:26:06 +08:00
// 初始化左侧菜单列表
const iconList = ref<Link[]>([
{ url: '/static/index/lefticon/index.png', targetUrl: '/static/index/lefticontarget/blueindex.png' },
{ url: '/static/index/lefticon/nurse.png', targetUrl: '/static/index/lefticontarget/bluenurse.png' },
{ url: '/static/index/lefticon/doctor.png', targetUrl: '/static/index/lefticontarget/bluedoctor.png' },
{ url: '/static/index/lefticon/give.png', targetUrl: '/static/index/lefticontarget/givedark.png' },
{ url: '/static/index/lefticon/wifi.png', targetUrl: '/static/index/lefticontarget/bluewifi.png' },
{ url: '/static/index/lefticon/back.png', targetUrl: '/static/index/lefticontarget/blueback.png' }
]);
// 当前选中的菜单索引
const menuIndex = ref<number>(-1);
const menuIndexshow = ref<boolean>(false);
const menuIndexshowsecond = ref<boolean>(false);
// 暗黑模式
const darkFans = ref<boolean>(false);
//旧表格还是新表格
const isOld = ref(-1);
// 当前选中的菜单索引
const roomTar = ref<number[]>([]);
//滑块按钮
const firstcurrentIndex = ref<number>(0);
const firstcurrentIndexup = ref<number>(0);
const secondcurrentIndexup = ref<number>(0);
const secondcurrentIndex = ref<number>(0);
const thirdcurrentIndex = ref<number>(0);
// 暗黑模式改变
const darkchange = (res : boolean) => {
darkFans.value = res
}
//切换表格新旧
const isOldchange = (res : number) => {
isOld.value = res;
}
999999
2025-08-21 16:51:53 +08:00
const changesdonghua = (index : number) => {
if (menuIndex.value === index) {
return
}
menuIndex.value = index;
menuIndexshow.value = false
menuIndexshowsecond.value = false
setTimeout(() => {
switch (index) {
case 0:
menuIndexshow.value = true
break;
case 1:
menuIndexshowsecond.value = true
break;
default:
}
}, 50)
}
11
2025-07-31 17:26:06 +08:00
// 变更菜单
const changeMenu = (index : number) => {
999999
2025-08-21 16:51:53 +08:00
// if (menuIndex.value === index) {
11
2025-07-31 17:26:06 +08:00
// return
// }
999999
2025-08-21 16:51:53 +08:00
isMain.value = true;
targetIndex.value = index
11
2025-07-31 17:26:06 +08:00
menuIndex.value = index;
menuIndexshow.value = false
menuIndexshowsecond.value = false
if (index === 5) {
uni.navigateBack()
return
}
setTimeout(() => {
switch (index) {
case 0:
menuIndexshow.value = true
break;
case 1:
menuIndexshowsecond.value = true
break;
default:
}
}, 50)
};
const clientX = ref(0);
const clientY = ref(0);
const savename = ref("")
const canmove = ref(true)
const indexNumber = ref({
index0: 999,
index1: 999,
})
//翻页计时器
const canTrigger = ref(true);
//全局获得x轴和y轴
const animation = uni.createAnimation({
duration: 0,
timingFunction: 'linear',
delay: 0
});
const animationData = ref({});
let ticking = false;
let handle = null;
const getxyrel = (event) => {
const touch = event.touches[0];
clientX.value = 2 * (Math.floor(touch.clientX) - 100);
clientY.value = 2 * (Math.floor(touch.clientY) - 55);
animation.translate3d(clientX.value / 2, clientY.value / 2, 0).step({ duration: 0 });
animationData.value = animation.export();
// 遍历数组，找到点击区域所在的对
const translateX = Math.floor(touch.clientX) - 50;
const translateY = Math.floor(touch.clientY) - 25;
const clickedItem = fangkuaiValue.value.find(item => {
return translateX >= Math.floor(item.left) && translateX <= Math.floor(item.right) &&
translateY >= Math.floor(item.top) && translateY <= Math.floor(item.bottom);
});
if (clickedItem) {
const { index0, index1 } = clickedItem.dataset;
indexNumber.value.index0 = index0
indexNumber.value.index1 = index1
if (clientX.value < 200 && canTrigger.value && !isOld.value) {
ruler.value?.nextItems();
canTrigger.value = false;
setTimeout(() => {
canTrigger.value = true;
}, 1000);
}
// if (clientX.value < 350 && canTrigger.value && isOld.value===1) {
// rulernew.value?.nextItems();
// canTrigger.value = false;
// setTimeout(() => {
// canTrigger.value = true;
// }, 1000);
// }
} else {
indexNumber.value.index0 = 999
indexNumber.value.index1 = 999
}
}
//节流
const getxy = throttle(getxyrel, 40);
const fangkuaiValue = ref([])
//所有适合的方块
const openname = (res : string, fangkuai : any) => {
savename.value = res;
canmove.value = false;
fangkuaiValue.value = fangkuai
}
const changefangkuang = (fangkuang : any) => {
fangkuaiValue.value = fangkuang
}
//移动方块
const saveruler = ref({
directiveName: "",
cycleType: "",
positioningLong: "0",
typeName: "",
startTime: "",
id: "",
endTime: "",
tagName: null
})
const openruler = (res : any, fangkuai : any) => {
saveruler.value = res
canmove.value = false;
fangkuaiValue.value = fangkuai
}
//解决拖动bug
const closename = () => {
savename.value = "";
canmove.value = true;
}
const ruler = ref(null)
const rulernew = ref(null)
//结束、禁止滑动
const cleanall = () => {
clientX.value = 9999;
clientY.value = 9999;
animation.translate3d(clientX.value / 2, clientY.value / 2, 0).step({ duration: 0 });
animationData.value = animation.export();
canmove.value = true;
indexNumber.value = {
index0: 999,
index1: 999,
};
if (savename.value) {
if (!isOld.value) {
ruler.value?.rulerEnd(savename.value);
} else {
}
} else if (saveruler.value.typeName) {
1
2025-08-13 17:19:40 +08:00
if (isOld.value === 0) {
11
2025-07-31 17:26:06 +08:00
ruler.value?.rulerMoveEnd(saveruler.value);
} else {
rulernew.value?.rulerMoveEnd(saveruler.value);
}
}
savename.value = "";
saveruler.value = {
directiveName: "",
cycleType: "",
positioningLong: "0",
typeName: "",
startTime: "",
id: "",
endTime: "",
tagName: null
};
}
//节流函数
function throttle(fn, delay) {
let lastExecutionTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastExecutionTime >= delay) {
lastExecutionTime = now;
fn.apply(this, args);
}
};
}
function splitString(str) {
// 使用正则表达式找到所有括号的内容
let result = [];
let remainingStr = str;
// 正则匹配最外层括号（支持全角和半角）
let regex = /([^（(]*)[（(]([^）)]+)[）)]/;
while (regex.test(remainingStr)) {
let match = remainingStr.match(regex);
if (match) {
// 添加括号前的部分（去掉空白）
if (match[1].trim()) {
result.push(match[1].trim());
}
// 添加括号内的内容
if (match[2].trim()) {
result.push(match[2].trim());
}
// 更新剩余的字符串
remainingStr = remainingStr.replace(match[0], '').trim();
}
}
// 如果最后还有剩余部分，也加入结果
if (remainingStr.trim()) {
result.push(remainingStr.trim());
}
return result;
}
// 生命周期钩子
onShow(() => {
//首次加载和跳转回来需要重新做个动画
setTimeout(() => {
changeMenu(menuIndex.value)
}, 50)
1
2025-08-13 17:19:40 +08:00
menuIndexshow.value = false
setTimeout(() => {
menuIndexshow.value = true
}, 50)
11
2025-07-31 17:26:06 +08:00
});
999999
2025-08-21 16:51:53 +08:00
//切换为主要模式
const isMain = ref(true);
//切换为右侧模式
// const isright = ref(false);
const targetIndex = ref(0);
const propsmove = ref(-1);
const canback = ref(false);
const canmoveit = (boolean:boolean) => {
canback.value = boolean
}
const movecard = (where : number) => {
if (where === 5) {
if(canback.value){
propsmove.value = -1
nextTick(() => propsmove.value = where)
return
}else{
if(!isMain.value){
isMain.value = true;
targetIndex.value = menuIndex.value
}else{
uni.navigateBack()
}
return
}
}
if (isMain.value) {
switch (where) {
case 0:
if (targetIndex.value) {
targetIndex.value--
changesdonghua(targetIndex.value)
}
break
case 1:
isMain.value = false;
targetIndex.value = -1;
break
case 2:
if (targetIndex.value < leftMenuArray.value.length - 1) {
targetIndex.value++
changesdonghua(targetIndex.value)
}
break
case 3:
break
case 4:
if (targetIndex.value === 5) {
uni.navigateBack()
}
changesdonghua(targetIndex.value)
break
}
} else {
propsmove.value = -1
nextTick(() => propsmove.value = where)
}
}
11
2025-07-31 17:26:06 +08:00
</script>
<style lang="less" scoped>
1
2025-08-13 17:19:40 +08:00
.menus-father {
11
2025-07-31 17:26:06 +08:00
margin-top: 50rpx;
width: 100%;
1
2025-08-13 17:19:40 +08:00
.menu {
11
2025-07-31 17:26:06 +08:00
height: 110rpx;
1
2025-08-13 17:19:40 +08:00
width: 280rpx;
11
2025-07-31 17:26:06 +08:00
border-radius: 60rpx;
1
2025-08-13 17:19:40 +08:00
margin: 45rpx 0;
11
2025-07-31 17:26:06 +08:00
display: flex;
justify-content: center;
align-items: center;
1
2025-08-13 17:19:40 +08:00
margin-left: 30rpx;
11
2025-07-31 17:26:06 +08:00
// .menu-img{
// width: 65rpx;
// height: 65rpx;
// margin-right: 15rpx;
// }
}
}
1
2025-08-13 17:19:40 +08:00
11
2025-07-31 17:26:06 +08:00
.backgroundContainer {
display: flex;
position: relative;
width: 100%;
height: 100vh;
// background-image: url('/static/index/lightbgcnew.png');
// background-size: cover;
// background-position: center center;
background-color: #eff0f4;
overflow: hidden;
z-index: 12;
}
//暗黑模式
.darkbackgroundContainer {
display: flex;
position: relative;
width: 100%;
height: 100vh;
background-image: url('/static/index/background.png');
background-size: cover;
background-position: center center;
overflow: hidden;
z-index: 11;
}
.move-font {
position: absolute;
z-index: 10;
pointer-events: none;
background-color: rgb(201, 232, 255);
border-radius: 20rpx;
border: 2rpx solid #fff;
width: 220rpx;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 40rpx;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
will-change: transform;
}
.left-container {
999999
2025-08-21 16:51:53 +08:00
width: 420rpx;
11
2025-07-31 17:26:06 +08:00
height: 100%;
.blue-circle-pos {
position: relative;
.blue-circle {
position: absolute;
top: -50rpx;
left: -68rpx;
.blue-circle-size {
width: 170rpx;
height: 250rpx;
}
}
}
.left-head {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.left-head-img {
width: 120rpx;
height: 120rpx;
margin-top: 80rpx;
}
.left-head-font {
font-weight: 700;
font-size: 32rpx;
}
.left-head-font-dark {
font-weight: 700;
font-size: 40rpx;
background: linear-gradient(to right, #EBF4FF, #ADC4E0);
-webkit-background-clip: text;
color: transparent;
}
}
.left-img-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.left-img {
width: 93rpx;
height: 93rpx;
margin: 50rpx 0;
z-index: 100;
}
}
}
.title-time-border-yellow {
width: 255rpx;
height: 189rpx;
margin: 10rpx;
border: 1rpx solid #dae8fa;
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
border-radius: 20rpx;
display: flex;
align-items: center;
flex-direction: column;
position: absolute;
z-index: 10;
}
.title-time-border-pouple {
width: 255rpx;
height: 189rpx;
margin: 10rpx;
border: 1rpx solid #dae8fa;
background: linear-gradient(to bottom, #f1eeff, #e3deff);
border-radius: 20rpx;
display: flex;
align-items: center;
flex-direction: column;
position: absolute;
z-index: 10;
}
.title-time {
display: flex;
width: 100%;
position: relative;
.title-time-time {
font-size: 32rpx;
margin-left: 27rpx;
margin-top: 12rpx;
}
.title-time-button {
position: absolute;
top: -5rpx;
right: 0rpx;
width: 70rpx;
height: 70rpx;
}
.title-time-font {
position: absolute;
top: 7rpx;
right: 5rpx;
font-size: 23rpx;
color: #fff;
}
}
.down-icons {
margin-top: 20rpx;
width: 100%;
height: 50rpx;
background-color: rgb(255, 216, 126);
display: flex;
justify-content: center;
align-items: center;
.icon {
margin: 0 5rpx;
font-size: 20rpx;
padding: 5rpx 10rpx;
background-color: rgb(255, 138, 0);
color: #fff;
border-radius: 5rpx;
}
}
999999
2025-08-21 16:51:53 +08:00
.target {
--color: #99C9FD;
--thick: 2px;
--radius: 60rpx;
--outline-offset: 0rpx;
/* 外扩多少 */
/* 内层虚线（你现在用的） */
border-radius: var(--radius);
background-color: white;
/* 内部背景 */
animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
/* 外层虚线：放在 outline（不会影响元素尺寸） */
outline: var(--thick) dashed var(--color);
outline-offset: var(--outline-offset);
/* 保证文本 / 子元素在最上层 */
position: relative;
z-index: 0;
}
@keyframes scalePulse {
0% {
transform: scale(1);
}
25% {
/* 先收缩一点点 */
transform: scale(0.94);
}
65% {
/* 再放大到略超出的感觉 */
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
11
2025-07-31 17:26:06 +08:00
</style>