505 lines
14 KiB
Vue
505 lines
14 KiB
Vue
<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="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>
|
||
<!-- 主页 -->
|
||
<rightItemsfirst :isshow="menuIndexshow" :darkFans="darkFans" v-show="!menuIndex" @darkchange="darkchange" />
|
||
<!-- 超凶表格 -->
|
||
<!-- 旧表格 -->
|
||
<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" />
|
||
<!-- 新表格 -->
|
||
<rightItemssecondnew 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">
|
||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||
import type { Link } from "./index";
|
||
import rightItemsfirst from "../../component/rightItemsindex/index.vue"
|
||
import rightItemssecond from "../../component/rightItemssecond/index.vue"
|
||
import rightItemssecondnew from "../../component/rightItemssecondnew/index.vue"
|
||
import rightItemssecondrelnew from "../../component/rightItemssecondrelnew/index.vue"
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
|
||
onMounted(() => {
|
||
isOld.value = 2;
|
||
uni.getSystemInfoSync(); // 确保 global 注入生效
|
||
uni.pageScrollTo; // 避免某些平台热更新惊群
|
||
// 被动监听提升拖拽性能
|
||
})
|
||
|
||
// 初始化左侧菜单列表
|
||
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>(0);
|
||
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;
|
||
}
|
||
// 变更菜单
|
||
const changeMenu = (index : number) => {
|
||
if (index === 3) {
|
||
menuIndexshow.value = false;
|
||
menuIndexshowsecond.value = false;
|
||
uni.navigateTo({
|
||
url: `/pages/somethingmove/index?darkFans=${darkFans.value}`,
|
||
animationType: 'slide-in-right',
|
||
animationDuration: 400// 设置动画时长为300毫秒, // 动画持续时间，单位为毫秒
|
||
});
|
||
return
|
||
}
|
||
else if (index === 5) {
|
||
uni.navigateBack()
|
||
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)
|
||
};
|
||
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) {
|
||
if (isOld.value===0) {
|
||
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)
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.backgroundContainer {
|
||
display: flex;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-image: url('/static/index/lightbgcnew.png');
|
||
background-size: cover;
|
||
background-position: center center;
|
||
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 {
|
||
width: 235rpx;
|
||
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: 150rpx;
|
||
height: 150rpx;
|
||
margin-top: 60rpx;
|
||
}
|
||
|
||
.left-head-font {
|
||
font-weight: 700;
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
</style> |