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

866 lines
32 KiB
Vue
Raw Normal View History

2025.3.7
2025-03-07 17:26:02 +08:00
<!-- 主页 -->
3.5
2025-03-05 17:29:32 +08:00
<template>
<view class="right-container" :style="isshow?{opacity: `1`}:{opacity: `0`}">
<view class="right-container-title-nav">
<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
ID：12345678
</text>
<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
名称：未命名01
</text>
<view class="right-icons">
<image class="right-icons-img" :src="`/static/index/undericons/man.png`" />
<view :class="darkFans?`right-icons-font-dark`: `right-icons-font` ">王金福</view>
<image class="right-icons-img-icon"
:src="darkFans?`/static/index/undericons/face.png`:`/static/index/undericons/facelight.png`" />
<image class="right-icons-img-icon"
:src="darkFans?`/static/index/undericons/hand.png`:`/static/index/undericons/handlight.png`" />
<image class="right-icons-img-icon"
:src="darkFans?`/static/index/undericons/out.png`:`/static/index/undericons/outlight.png`" />
</view>
<view class="right-container-title-class-anhei-button" @click="darkFanschange()" v-show="!darkFans">
<text class="right-container-title-class-anhei">
切换到暗黑模式
</text>
</view>
<view class="right-container-title-class-anhei-button" :style="darkFans ? { backgroundColor:'#fff' } : {}"
@click="darkFanschange()" v-show="darkFans">
<text class="right-container-title-class-anhei" :style="darkFans ? { color: 'black' } : {}">
取消暗黑模式
</text>
</view>
</view>
<view class="right-container-fir">
3.26
2025-03-26 17:34:08 +08:00
<view :class="isPopupVisible ?`right-container-big`:`right-container-small`"
:style="isPopupVisiblefiropen || isPopupVisible?{zIndex:999}:{zIndex:998}"
class="right-container-fir-left-nav">
3.5
2025-03-05 17:29:32 +08:00
<view :class="darkFans?`right-container-fir-left-card-dark`:`right-container-fir-left-card`">
<image class="right-container-fir-left-card-hulilei" :src="`/static/index/hulilei.png`" />
<div class="right-container-fir-left-card-hulilei-font" @click="showPopup">护理类</div>
<image v-if="darkFans" class="card-upfaguang" :src="`/static/index/cardbgc/uplight.png`" />
<view class="right-container-fir-left-carousel">
<view class="carousel">
<view class="dots">
<span v-for="(item, index) in [1, 2, 3]" :key="index" :class="darkFans?`dot-dark`:`dot`"
:style="index===firstcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
</view>
</view>
</view>
<view class="right-container-fir-left-card-main">
<swiper :current="firstcurrentIndexup" class="swiper savehundred" circular
:indicator-dots="false" :vertical="true" :interval="4000" :duration="500"
@change="onSwiperChange">
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
<view class="right-container-fir-left-card-flex">
<view class="uni-margin-wrap-fir">
<swiper :current="firstcurrentIndex" class="swiper" circular
:indicator-dots="false" :interval="4000" :duration="500">
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]"
:key="index">
<view class="right-container-fir-left-card-card">
<view class="right-container-fir-left-card-zhixing">
<div class="right-container-fir-left-card-zhixing-font">待执行
</div>
</view>
<image class="right-container-fir-left-card-img"
:src="`/static/index/teeth.png`" @click="showPopup" />
<view class="right-container-fir-left-card-main-laba-video">
<image class="right-container-fir-left-card-main-laba"
:src="darkFans?`/static/index/darkicon/labadark.png`:`/static/index/laba.png`" />
<text
:class="darkFans?`right-container-fir-left-card-main-font-dark`:`right-container-fir-left-card-main-font`">
准备洁具（口腔）
</text>
<image class="right-container-fir-left-card-main-video"
:src="darkFans?`/static/index/indexvideo.png`:`/static/index/indexvideo.png`" />
</view>
</view>
<view class="split-line">
</view>
<view class="time-tra-fir">
<view :class="darkFans?`time-font-dark`:`time-font`">
10:00 - 10:10
</view>
<view :class="darkFans?`time-text-dark`:`time-text`">
为老人提供口腔清洁器具，牙膏、牙刷及水杯，看护完成
</view>
<view class="time-people-two">
<view class="time-people-fir">
<image class="time-people-img"
:src="darkFans?`/static/index/darkicon/zhixingpeopledark.png`:`/static/index/cardicons/zhixing.png`" />
<text
:class="darkFans?`time-people-font-dark`:`time-people-font`">
单人执行
</text>
</view>
<view class="time-people-sec">
<image class="time-people-img"
:src="darkFans?`/static/index/medium/dopeopledark.png`:`/static/index/cardicons/zhifa.png`" />
<text
:class="darkFans?`time-people-font-dark`:`time-people-font`">
--
</text>
</view>
</view>
<view class="time-button-view">
<view class="time-button-start">
开始服务
</view>
<view
:class="darkFans?`time-button-end-dark`:`time-button-end`">
服务结束
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="split-line-white-right-left"
:style="darkFans ? `background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #386997 50%, rgba(0, 0, 0, 0) 100%);`:``">
<image v-if="darkFans" class="split-line-white-img"
:src="`/static/index/cardbgc/leftlight.png`" />
</view>
</view>
</swiper-item>
</swiper>
<view class="right-huli-sec">
<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
<scroll-view v-if="!darkFans" :show-scrollbar="false" scroll-y="true"
class="right-huli-view">
3.27
2025-03-27 17:32:12 +08:00
<view v-for="(item,index) in huliList" :key="index" class="right-huli-view-dis"
@click="openhuliList(index)">
3.5
2025-03-05 17:29:32 +08:00
<image class="right-huli-img" :src="item.url" />
<text class="right-huli-text">{{item.name}}</text>
</view>
</scroll-view>
<!-- 暗黑模式 -->
<scroll-view v-if="darkFans" :show-scrollbar="false" scroll-y="true"
class="right-huli-view">
<view v-for="(item,index) in huliListDark" :key="index" class="right-huli-view-dis">
<image class="right-huli-img" :src="item.url" />
<text class="right-huli-text-dark">{{item.name}}</text>
</view>
</scroll-view>
<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
</view>
</view>
</view>
</view>
<view :class="darkFans?`right-container-fir-right-dark`:`right-container-fir-right`">
<view class="right-container-card">
<view class="right-container-card-right">
<view class="" v-for="(item,index) in [1,2,3,4]" :key="index">
<image class="right-container-card-right-img" src="/static/index/customer.png" />
</view>
</view>
<text :class="darkFans?`right-container-title-dark`:`right-container-title`">
{{ currentTime }}
</text>
<text :class="darkFans?`right-container-date-dark`:`right-container-date`">
{{ fullDate }}
</text>
<text :class="darkFans?`right-container-day-dark`:`right-container-day`">
{{ weekDay }}
</text>
<view class="right-container-tem">
<image class="right-container-tem-img"
:src="darkFans?`/static/index/darkicon/wendudark.png`:`/static/index/roomicons/wendu.png`" />
<text :class="darkFans?`right-container-tem-text-dark`:`right-container-tem-text`">23°C</text>
<image class="right-container-tem-img"
:src="darkFans?`/static/index/roomicons/shidu.png`:`/static/index/darkicon/shidudark.png`" />
<text :class="darkFans?`right-container-tem-text-dark`:`right-container-tem-text`">39%</text>
</view>
<!-- 分割线 -->
<view class="right-container-fenge"></view>
<view class="right-container-button" v-if="!darkFans">
<view v-for="(item,index) in roomBtttonList" :key="index" class="right-container-button-any">
<image v-show="roomTar.includes(index)" class="right-container-button-ray"
:src="`/static/index/cardicons/ray2.png`" />
<image class="right-container-button-img"
:src="roomTar.includes(index)?item.targetUrl : item.url" @click="saveItem(index)" />
<text class="right-container-button-text"
:style="roomTar.includes(index)?{color: '#167ED7'}:{}">{{item.name}}</text>
</view>
</view>
<!-- 暗黑模式 -->
<view class="right-container-button" v-if="darkFans">
<view v-for="(item,index) in roomBtttonListdark" :key="index"
class="right-container-button-any">
<image v-show="roomTar.includes(index)" class="right-container-button-ray"
:src="`/static/index/cardicons/ray2.png`" />
<image class="right-container-button-img"
:src="roomTar.includes(index)?item.targetUrl : item.url" @click="saveItem(index)" />
<text class="right-container-button-text"
:style="roomTar.includes(index)?{color: '#167ED7'}:{color: '#fff'}">{{item.name}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="right-container-sec">
3.26
2025-03-26 17:34:08 +08:00
<view :class="isPopupVisiblesec ?`right-container-left-big`:`right-container-left-small`"
:style="isPopupVisiblefiropensec || isPopupVisiblesec?{zIndex:999}:{zIndex:0}">
<view :class="darkFans?`right-container-left-dark`:`right-container-left`">
<image class="right-container-left-type" :src="`/static/index/yiliao/yiliaolei.png`" />
<div class="right-container-left-font" @click="showPopupsec">医疗类</div>
<view class="right-container-fir-left-carousel">
<view class="carousel">
<view class="dots">
<span v-for="(item, index) in [1, 2, 3]" :key="index" :class="darkFans?`dot-dark`:`dot`"
:style="index===secondcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
</view>
3.5
2025-03-05 17:29:32 +08:00
</view>
</view>
3.26
2025-03-26 17:34:08 +08:00
<image v-if="darkFans" class="card-upfaguang-down" :src="`/static/index/cardbgc/uplight.png`" />
<swiper :current="secondcurrentIndexup" class="swiper savehundred" circular :indicator-dots="false"
:vertical="true" :interval="4000" :duration="500" @change="onSwiperChangesec">
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
<div class="right-container-fir-left-card-flex-sec">
<view class="uni-margin-wrap">
<swiper :current="secondcurrentIndex" class="swiper" circular
:indicator-dots="false" :autoplay="false" :interval="4000" :duration="500">
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]"
:key="index">
<div class="right-container-left-font-spec">进行中
</div>
<view class="time-tra-sec">
<view :class="darkFans?`time-font-dark`:`time-font`">
10:00 - 10:10
3.5
2025-03-05 17:29:32 +08:00
</view>
3.26
2025-03-26 17:34:08 +08:00
<view class="time-people-thi">
<image class="time-people-img"
:src="darkFans?`/static/index/medium/doctorsaydark.png`:`/static/index/medium/doctorsay.png`" />
<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
医嘱类型:药品
</text>
3.5
2025-03-05 17:29:32 +08:00
</view>
3.26
2025-03-26 17:34:08 +08:00
<view class="time-people-thi">
<image class="time-people-img"
:src="darkFans?`/static/index/medium/howtododark.png`:`/static/index/medium/howtodo.png`" />
<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
处置方式:肌肉注射
</text>
</view>
<view class="time-people-thi">
<image class="time-people-img"
:src="darkFans?`/static/index/medium/useMed.png`:`/static/index/medium/yongyao.png`" />
<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
用药类型:抗生素类
</text>
</view>
<view class="time-people-thi">
<image class="time-people-img"
:src="darkFans?`/static/index/medium/domanydark.png`:`/static/index/medium/domany.png`" />
<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
执行方式:周期一日执行一次
</text>
</view>
<view class="time-people-thi">
<image class="time-people-img"
:src="darkFans?`/static/index/darkicon/zhixingpeopledark.png`:`/static/index/cardicons/zhixing.png`" />
<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
单人执行
</text>
<image class="time-people-img"
:src="darkFans?`/static/index/medium/dopeopledark.png`:`/static/index/cardicons/zhifa.png`" />
<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
赵宇
</text>
</view>
<view class="time-button-view">
<view class="time-button-start">
开始服务
</view>
<view :class="darkFans?`time-button-end-dark`:`time-button-end`">
服务结束
2025.3.7
2025-03-07 17:26:02 +08:00
</view>
3.5
2025-03-05 17:29:32 +08:00
</view>
2025.3.7
2025-03-07 17:26:02 +08:00
</view>
3.26
2025-03-26 17:34:08 +08:00
<view class="right-container-photo">
<image class="right-container-photo-img"
:src="`/static/index/yiliao/project2.png`" @click="showPopupsec" />
<text
:class="darkFans?`right-container-photo-text-dark`:`right-container-photo-text`">
脑膜炎(1/2)
</text>
2025.3.7
2025-03-07 17:26:02 +08:00
</view>
3.26
2025-03-26 17:34:08 +08:00
</swiper-item>
</swiper>
3.5
2025-03-05 17:29:32 +08:00
</view>
3.26
2025-03-26 17:34:08 +08:00
</div>
</swiper-item>
</swiper>
<view class="split-line-white-sec"
:style="darkFans ? `background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #386997 50%, rgba(0, 0, 0, 0) 100%);`:``">
<image v-if="darkFans" class="split-line-white-img"
:src="`/static/index/cardbgc/leftlight.png`" />
3.5
2025-03-05 17:29:32 +08:00
</view>
3.26
2025-03-26 17:34:08 +08:00
<view class="right-huli-fir">
<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
<scroll-view v-if="!darkFans" :show-scrollbar="false" scroll-y="true" class="right-huli-view">
<view v-for="(item,index) in mediumList" :key="index" class="right-huli-view-dis">
<image class="right-huli-img" :src="item.url" />
<text class="right-huli-text">{{item.name}}</text>
<div class="progress-bar-container" v-show="item.number !== 0">
<div :style="{width:`${item.number}%`}" class="progress-bar"></div>
3.5
2025-03-05 17:29:32 +08:00
</div>
</view>
3.26
2025-03-26 17:34:08 +08:00
</scroll-view>
<scroll-view v-if="darkFans" :show-scrollbar="false" scroll-y="true" class="right-huli-view">
<view v-for="(item,index) in mediumListdark" :key="index" class="right-huli-view-dis">
<image class="right-huli-img" :src="item.url" />
<text class="right-huli-text-dark">{{item.name}}</text>
<div class="progress-bar-container" v-show="item.number !== 0">
<div :style="{width:`${item.number}%`}" class="progress-bar"></div>
</div>
</view>
</scroll-view>
<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
3.5
2025-03-05 17:29:32 +08:00
</view>
</view>
</view>
3.26
2025-03-26 17:34:08 +08:00
<view :style="isPopupVisiblefiropenthi || isPopupVisiblethi?{zIndex:999}:{zIndex:0}"
:class="[ isPopupVisiblethi ? 'right-container-right-big' : 'right-container-right-small',]">
<view :class="[ darkFans ? 'right-container-right-father-dark' : 'right-container-right-father']">
<view class="right-container-right-down-father">
3.5
2025-03-05 17:29:32 +08:00
<div class="right-container-fir-left-card-flex-sec">
<image class="right-container-fir-left-card-flex-sec-img"
:src="`/static/index/baojielei.png`" />
3.26
2025-03-26 17:34:08 +08:00
<div class="right-container-fir-left-card-flex-sec-font" @click="showPopupthi">保洁类</div>
<image class="right-container-fir-left-card-flex-sec-imgright-fir"
:src="`/static/index/baojieleft.png`" />
<image class="right-container-fir-left-card-flex-sec-imgright-sec"
:src="`/static/index/baojieright.png`" />
2025.3.7
2025-03-07 17:26:02 +08:00
<view class="uni-margin-wrap">
3.26
2025-03-26 17:34:08 +08:00
<swiper :current="secondcurrentIndex" class="swiper" circular :indicator-dots="false"
:autoplay="false" :interval="4000" :duration="500">
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
<view class="time-tra-thi">
3.5
2025-03-05 17:29:32 +08:00
<view class="time-tra-thi-zhixing">
3.26
2025-03-26 17:34:08 +08:00
<div class="time-tra-thi-zhixing-font">待执行
3.5
2025-03-05 17:29:32 +08:00
</div>
</view>
2025.3.7
2025-03-07 17:26:02 +08:00
<view :class="darkFans?`time-font-dark`:`time-font`">
3.5
2025-03-05 17:29:32 +08:00
10:00 - 10:10
</view>
2025.3.7
2025-03-07 17:26:02 +08:00
<view :class="darkFans?`time-text-dark`:`time-text`">
3.5
2025-03-05 17:29:32 +08:00
为老人提供口腔清洁器具，牙膏、牙刷及水杯，看护完成
</view>
2025.3.7
2025-03-07 17:26:02 +08:00
<view class="time-people-two">
3.5
2025-03-05 17:29:32 +08:00
<image class="time-people-img"
:src="darkFans?`/static/index/darkicon/zhixingpeopledark.png`:`/static/index/cardicons/zhixing.png`" />
2025.3.7
2025-03-07 17:26:02 +08:00
<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
3.5
2025-03-05 17:29:32 +08:00
单人执行
</text>
<image class="time-people-img"
:src="darkFans?`/static/index/medium/dopeopledark.png`:`/static/index/cardicons/zhifa.png`" />
2025.3.7
2025-03-07 17:26:02 +08:00
<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
3.5
2025-03-05 17:29:32 +08:00
王金福 / 李贵田
</text>
</view>
<view class="time-button-view">
2025.3.7
2025-03-07 17:26:02 +08:00
<view class="time-button-start">
3.5
2025-03-05 17:29:32 +08:00
开始服务
</view>
2025.3.7
2025-03-07 17:26:02 +08:00
<view :class="darkFans?`time-button-end-dark`:`time-button-end`">
3.5
2025-03-05 17:29:32 +08:00
服务结束
</view>
</view>
</view>
3.26
2025-03-26 17:34:08 +08:00
<view class="time-tra-thi-photo">
<image class="time-tra-thi-photo-img" :src="`/static/index/project3.png`"
@click="showPopupthi" />
3.5
2025-03-05 17:29:32 +08:00
<text
:class="darkFans?`time-tra-thi-photo-font-dark`:`time-tra-thi-photo-font`">
更换纸尿裤
</text>
</view>
3.26
2025-03-26 17:34:08 +08:00
</swiper-item>
</swiper>
3.5
2025-03-05 17:29:32 +08:00
</view>
</div>
</view>
</view>
</view>
3.26
2025-03-26 17:34:08 +08:00
<view class="under-father">
<view class="under-father-view" v-for="(item,index) in undericonList" :key="index"
@click="changeMenuUnder(index)">
<image class="under-father-light" src="/static/index/undericons/upguang.png"
v-show="index === undermenuIndex" />
<image class="under-father-img" :src="index === undermenuIndex ? item.targetUrl : item.url" />
<view :class="darkFans? `under-father-img-font-dark`:`under-father-img-font`">
{{ item.name }}
</view>
</view>
</view>
3.5
2025-03-05 17:29:32 +08:00
</view>
3.27
2025-03-27 17:32:12 +08:00
<Drawer ref="drawer">
<view class="draw-all">
<view class="draw-title">
<view class="draw-title-gun"></view>
<view class="draw-title-font">转单执行</view>
</view>
<view class="draw-contain">
<view class="container-father">
<view class="draw-contain-white-sha"></view>
<view class="container">
<div class="line" :style="{width: lineWidth}"></div>
<div class="line-gray"></div>
<template v-for="(item, index) in circles" :key="index">
<div :class="circlesNumber>=index? `outer-circle-target`:`outer-circle`"
@click="circlesNumber=index">
<div :class="circlesNumber>=index? `inner-circle-target`:`inner-circle`">
<span>{{ item.label }}</span>
</div>
</div>
</template>
</view>
<view class="draw-contain-gray"></view>
<view class="draw-contain-white"></view>
</view>
</view>
</view>
</Drawer>
3.5
2025-03-05 17:29:32 +08:00
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits } from 'vue';
2025.3.7
2025-03-07 17:26:02 +08:00
import type { huliListType, medType, roomBtttonType } from "./index";
3.27
2025-03-27 17:32:12 +08:00
import Drawer from '../public/Drawer.vue';
//抽屉开启
const drawer = ref(null);
const circles = [
{ label: '指令' },
{ label: '转单' },
{ label: '完成' }
];
// 计算宽度
const lineWidth = computed(() => {
switch (circlesNumber.value) {
case 0:
return '0';
case 1:
return 'calc(100% - 600rpx)';
case 2:
return 'calc(100% - 120rpx)';
default:
return '100%';
}
});
const circlesNumber = ref(0);
3.5
2025-03-05 17:29:32 +08:00
const props = defineProps({
isshow: {
type: Boolean,
required: true,
},
darkFans: {
type: Boolean,
required: true,
},
});
//点击后动画效果（左上角）
const isPopupVisible = ref(false);
const isPopupVisiblefiropen = ref(false);
//点击后动画效果（左下角）
const isPopupVisiblesec = ref(false);
const isPopupVisiblefiropensec = ref(false);
//点击后动画效果（右下角）
const isPopupVisiblethi = ref(false);
const isPopupVisiblefiropenthi = ref(false);
// 定义响应式数据现在时间
const currentTime = ref('');
const fullDate = ref('');
const weekDay = ref('');
// 初始化下面侧单列表
const undericonList = ref<roomBtttonType[]>([
{ url: '/static/index/undericons/alarm.png', targetUrl: '/static/index/undericons/alarmdark.png', name: '服务考核' },
{ url: '/static/index/undericons/linshitime.png', targetUrl: '/static/index/undericons/linshitimedark.png', name: '护理流程' },
{ url: '/static/index/darkicon/zhaomingdark.png', targetUrl: '/static/index/roomicons/zhaomingtar.png', name: '电子医嘱' },
{ url: '/static/index/darkicon/kontiaodark.png', targetUrl: '/static/index/roomicons/kongtiaotar.png', name: '进销存' },
{ url: '/static/index/darkicon/nuanfengdark.png', targetUrl: '/static/index/roomicons/nuanfengtar.png', name: '实时监控' },
{ url: '/static/index/darkicon/dianqidark.png', targetUrl: '/static/index/roomicons/dianqitar.png', name: '我的指令' },
]);
// 初始化第一个卡片列表
const huliList = ref<huliListType[]>([
{ url: '/static/index/hulilist/zhuandan.png', name: "转单执行" },
{ url: '/static/index/hulilist/xiezhu.png', name: "协助执行" },
{ url: '/static/index/hulilist/zhongdian.png', name: "重点追踪" },
]);
// 初始化第一个卡片列表 暗黑模式
const huliListDark = ref<huliListType[]>([
{ url: '/static/index/darkicon/zhuandandark.png', name: "转单执行" },
{ url: '/static/index/darkicon/xiezhudark.png', name: "协助执行" },
{ url: '/static/index/darkicon/zhongdiandark.png', name: "重点追踪" },
]);
// 初始化第二排第一个卡片列表
const mediumList = ref<medType[]>([
{ url: '/static/index/medium/yaopin.png', name: "药品信息", number: 0 },
{ url: '/static/index/medium/qingling.png', name: "请领指令", number: 60 },
{ url: '/static/index/medium/peiyao.png', name: "配药指令", number: 100 },
{ url: '/static/index/medium/xinxi.png', name: "信息反馈", number: 0 },
{ url: '/static/index/medium/xinxi.png', name: "信息反馈2", number: 0 },
]);
// 初始化第二排第一个卡片列表 暗黑模式
const mediumListdark = ref<medType[]>([
{ url: '/static/index/darkicon/yaopindark.png', name: "药品信息", number: 55 },
{ url: '/static/index/darkicon/qinglingdark.png', name: "请领指令", number: 10 },
{ url: '/static/index/darkicon/peiyaodark.png', name: "配药指令", number: 100 },
{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈", number: 15 },
{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈2", number: 20 },
]);
// 初始化第二个卡片列表
const roomBtttonList = ref<roomBtttonType[]>([
{ url: '/static/index/roomicons/zhaoming.png', targetUrl: '/static/index/roomicons/zhaomingtar.png', name: "照明" },
{ url: '/static/index/roomicons/kongtiao.png', targetUrl: '/static/index/roomicons/kongtiaotar.png', name: "空调" },
{ url: '/static/index/roomicons/nuanfeng.png', targetUrl: '/static/index/roomicons/nuanfengtar.png', name: "暖风" },
{ url: '/static/index/roomicons/dianqi.png', targetUrl: '/static/index/roomicons/dianqitar.png', name: "电器" },
]);
// 初始化第二个卡片列表 暗黑模式
const roomBtttonListdark = ref<roomBtttonType[]>([
{ url: '/static/index/darkicon/zhaomingdark.png', targetUrl: '/static/index/roomicons/zhaomingtar.png', name: "照明" },
{ url: '/static/index/darkicon/kontiaodark.png', targetUrl: '/static/index/roomicons/kongtiaotar.png', name: "空调" },
{ url: '/static/index/darkicon/nuanfengdark.png', targetUrl: '/static/index/roomicons/nuanfengtar.png', name: "暖风" },
{ url: '/static/index/darkicon/dianqidark.png', targetUrl: '/static/index/roomicons/dianqitar.png', name: "电器" },
]);
// 当前选中的菜单索引
const menuIndex = ref<number>(0);
const undermenuIndex = ref<number>(0);
// 暗黑模式
// const darkFans = ref<boolean>(false);
const underFans = ref<boolean>(false);
// 当前选中的菜单索引
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 emit = defineEmits(['darkchange']);
// 暗黑模式改变
const darkFanschange = () => {
emit('darkchange', !props.darkFans);
}
// 变更菜单
const changeMenu = (index : number) => {
menuIndex.value = index;
};
// 变更底部菜单
const changeMenuUnder = (index : number) => {
undermenuIndex.value = index;
};
const saveItem = (index : number) => {
if (roomTar.value.includes(index)) {
let array = []
roomTar.value.forEach((res : number) => {
if (res !== index) {
array.push(res)
}
})
roomTar.value = array
} else {
roomTar.value.push(index)
}
}
// 更新时间、日期和星期的方法
const updateTime = () => {
const now = new Date();
// 获取当前时间的时分
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
currentTime.value = `${hours}:${minutes}`;
// 获取完整的日期（年/月/日）
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
fullDate.value = `${year}年${month}月${day}日`;
// 获取星期几
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const week = weekDays[now.getDay()];
weekDay.value = week;
};
//给轮播图用的
const onSwiperChange = (event : any) => {
firstcurrentIndexup.value = event.detail.current;
};
const onSwiperChangesec = (event : any) => {
secondcurrentIndexup.value = event.detail.current;
};
const jumpTonew = (path : string) => {
const pages = getCurrentPages(); // 获取当前页面栈
if (pages.length === 0) return; // 确保有页面
const currentPage = pages[pages.length - 1]; // 获取当前页面
const currentPath = '/' + currentPage.route; // 获取当前页面路径（带前缀 /）
if ((currentPath !== path) && path) {
uni.redirectTo({
url: path
});
}
}
//动画的点击触发（左上角）
const showPopup = () => {
3.26
2025-03-26 17:34:08 +08:00
isPopupVisible.value = !isPopupVisible.value
isPopupVisiblefiropen.value = true;
isPopupVisiblesec.value = false;
isPopupVisiblethi.value = false;
3.5
2025-03-05 17:29:32 +08:00
setTimeout(() => {
3.26
2025-03-26 17:34:08 +08:00
isPopupVisiblefiropen.value = false;
}, 500)
3.5
2025-03-05 17:29:32 +08:00
}
//动画的点击触发（左下角）
const showPopupsec = () => {
3.26
2025-03-26 17:34:08 +08:00
isPopupVisiblesec.value = !isPopupVisiblesec.value;
isPopupVisible.value = false;
isPopupVisiblethi.value = false;
isPopupVisiblefiropensec.value = true;
2025.3.7
2025-03-07 17:26:02 +08:00
setTimeout(() => {
3.26
2025-03-26 17:34:08 +08:00
isPopupVisiblefiropensec.value = false;
}, 500)
3.5
2025-03-05 17:29:32 +08:00
}
3.26
2025-03-26 17:34:08 +08:00
3.5
2025-03-05 17:29:32 +08:00
//动画的点击触发（右下角）
const showPopupthi = () => {
3.26
2025-03-26 17:34:08 +08:00
isPopupVisiblethi.value = !isPopupVisiblethi.value;
isPopupVisiblefiropenthi.value = true;
isPopupVisible.value = false;
isPopupVisiblesec.value = false;
2025.3.7
2025-03-07 17:26:02 +08:00
setTimeout(() => {
3.26
2025-03-26 17:34:08 +08:00
isPopupVisiblefiropenthi.value = false;
}, 500)
3.5
2025-03-05 17:29:32 +08:00
}
let timerId = null;
3.27
2025-03-27 17:32:12 +08:00
//点击左上角卡片的右侧菜单
const openhuliList = (index : number) => {
// console.log("????", index,drawer.value)
drawer.value.openDrawer();
}
3.5
2025-03-05 17:29:32 +08:00
// 生命周期钩子
onMounted(() => {
timerId = updateTime();
// 每秒更新一次时间
setInterval(updateTime, 1000);
});
// 在组件销毁时清除定时器
onBeforeUnmount(() => {
clearInterval(timerId);
});
</script>
<style lang="less" scoped>
3.27
2025-03-27 17:32:12 +08:00
// 主页的css
@import './index';
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
// 抽屉的css
.draw-all {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
border-top-left-radius: 80rpx;
overflow: hidden;
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.draw-title {
3.5
2025-03-05 17:29:32 +08:00
width: 100%;
3.27
2025-03-27 17:32:12 +08:00
height: 170rpx;
background: linear-gradient(to bottom, #dfecfa, #c9dbee);
3.5
2025-03-05 17:29:32 +08:00
display: flex;
3.27
2025-03-27 17:32:12 +08:00
.draw-title-gun {
margin-top: 70rpx;
margin-left: 40rpx;
margin-right: 20rpx;
width: 13rpx;
height: 50rpx;
background: linear-gradient(to bottom, #04BCED, #0160CE);
border-radius: 10rpx;
3.5
2025-03-05 17:29:32 +08:00
}
3.27
2025-03-27 17:32:12 +08:00
.draw-title-font {
margin-top: 68rpx;
font-size: 40rpx;
font-weight: 700;
3.5
2025-03-05 17:29:32 +08:00
}
3.27
2025-03-27 17:32:12 +08:00
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.draw-contain {
width: 100%;
height: calc(100vh - 170rpx);
background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
background-blend-mode: screen;
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.draw-contain-jindu {
3.26
2025-03-26 17:34:08 +08:00
width: 100%;
3.27
2025-03-27 17:32:12 +08:00
height: 250rpx;
// background-color: red;
3.5
2025-03-05 17:29:32 +08:00
display: flex;
justify-content: center;
align-items: center;
}
3.27
2025-03-27 17:32:12 +08:00
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.container {
display: flex;
align-items: center;
justify-content: space-between;
width: 1000rpx;
height: 200rpx;
margin: 0 auto;
position: relative;
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.outer-circle-target {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: rgba(2, 136, 217, 0.2);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.outer-circle {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
// background: rgba(2, 136, 217, 0.2);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.inner-circle-target {
width: 95rpx;
height: 95rpx;
border-radius: 50%;
background: #0288D9;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
position: absolute;
z-index: 3;
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.inner-circle {
width: 95rpx;
height: 95rpx;
border-radius: 50%;
background: #dfecfa;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
position: absolute;
z-index: 3;
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.inner-circle-target span {
color: #fff;
font-size: 26rpx;
font-family: Arial, sans-serif;
z-index: 4;
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.inner-circle span {
// color: #fff;
font-size: 26rpx;
font-family: Arial, sans-serif;
z-index: 4;
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.line {
width: calc(100% - 120rpx);
height: 15rpx;
background: linear-gradient(to right, #0288D1, #0288D1);
position: absolute;
top: 50%;
left: 60rpx;
z-index: 1;
border-radius: 5rpx;
box-shadow:
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8),
/* 内部高光 */
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.4),
/* 内部阴影 */
0 0 8rpx rgba(2, 136, 209, 0.8);
/* 外部发光 */
filter: brightness(1.2);
z-index: 1;
transition: width 0.5s ease; /* 设置宽度变化的过渡效果 */
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.line-gray {
width: calc(100% - 120rpx);
height: 15rpx;
background: #c9dbee;
position: absolute;
top: 50%;
left: 60rpx;
z-index: 0;
border-radius: 5rpx;
/* 外部发光 */
filter: brightness(1.2);
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.container-father {
width: 100%;
height: 200rpx;
background-color: rgba(187, 203, 236, 0.6);
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.draw-contain-white-sha {
width: 100%;
height: 1rpx;
background-color: #fff;
box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
3.5
2025-03-05 17:29:32 +08:00
}
3.27
2025-03-27 17:32:12 +08:00
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.draw-contain-gray {
width: 100%;
height: 3rpx;
background-color: #d0e0ef;
}
3.5
2025-03-05 17:29:32 +08:00
3.27
2025-03-27 17:32:12 +08:00
.draw-contain-white {
width: 100%;
height: 1rpx;
background-color: #fff;
}
3.5
2025-03-05 17:29:32 +08:00
3.24
2025-03-24 17:37:51 +08:00
}
3.5
2025-03-05 17:29:32 +08:00
</style>