From a6d0abba8c936b90797027872dacadf8154ea4f4 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期五, 25 七月 2025 15:55:14 +0800
Subject: [PATCH] ID1825-优化定时任务loading显示效果
---
src/views/mobile/bedsideAuxiliaryScreen/components/ScheduledTask.vue | 153 +++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 135 insertions(+), 18 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/ScheduledTask.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/ScheduledTask.vue
index f284fa8..8111fe6 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/ScheduledTask.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/ScheduledTask.vue
@@ -6,6 +6,10 @@
title="定时任务"
width="80%"
:show-close="false"
+ class="scheduled-task-dialog"
+ top="0"
+ :destroy-on-close="true"
+ :close-on-click-modal="false"
>
<template #header>
<div class="scheduled-task-header">
@@ -18,16 +22,25 @@
/>
</div>
</template>
- <div class="scheduled-task-content">
+ <div class="scheduled-task-content" v-loading="loading">
<div class="content-left">
<div class="content-left-date">
<TimePicker v-model="timeValue" />
- <div class="date-btn"></div>
+ <div class="date-btn">
+ <div
+ v-for="(item, index) in dateOptions"
+ :key="index"
+ class="my-button date"
+ @click="onAddMinutesClick(item)"
+ >
+ {{ item.label }}
+ </div>
+ </div>
</div>
<div class="content-left-stereotyped-writing">
<div class="stereotyped-writing">
<input
- v-model="taskName"
+ v-model.trim="taskName"
type="text"
:disabled="isInpDisabled"
class="stereotyped-writing-input"
@@ -51,7 +64,13 @@
</div>
<template #footer>
<div class="my-button cancel" @click="handleCancel">取消</div>
- <div class="my-button confirm" @click="handleConfirm">确认</div>
+ <div
+ class="my-button confirm"
+ :class="loading ? 'cancel' : ''"
+ @click="handleConfirm"
+ >
+ 确认
+ </div>
</template>
</el-dialog>
</div>
@@ -59,8 +78,12 @@
<script lang="ts" setup>
import { computed, ref } from "vue";
+import dayjs from "dayjs";
+import { setTimeoutAlert } from "@/utils/httpApi";
+import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
+
// @ts-ignore
-import TimePicker from './TimePicker.vue'
+import TimePicker from "./TimePicker.vue";
import closeImg from "@/img/close.png";
import alertbaojin from "@/assets/alert.wav";
@@ -70,6 +93,7 @@
import tdddbaojing from "@/assets/tzddd.mp3";
import tzxllbaojing from "@/assets/tzxll.mp3";
import cgbaojing from "@/assets/cg.mp3";
+import { ElMessage } from "element-plus";
interface TaskItem {
label: string;
@@ -79,18 +103,22 @@
}
interface DateItem {
- label: string;
- value: number;
+ label: string;
+ value: number;
}
+
+const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
const isShow = ref(false);
const taskName = ref(""); // 任务名称
const isInpDisabled = ref(false); // 输入框是否禁用
-const timeValue = ref('19:16');
+const timeValue = ref("");
const detaCheck = ref<number | null>(); // 这个是判断时间按钮的
+
+const loading = ref(false);
const taskOptions = ref<TaskItem[]>([
{
@@ -131,12 +159,11 @@
},
]);
-
const dateOptions = ref<DateItem[]>([
- { label: '15分钟', value: 15 },
- { label: '30分钟', value: 30 },
- { label: '45分钟', value: 45 },
- { label: '60分钟', value: 60 },
+ { label: "15分钟", value: 15 },
+ { label: "30分钟", value: 30 },
+ { label: "45分钟", value: 45 },
+ { label: "60分钟", value: 60 },
]);
const taskItemCheck = computed(() => {
@@ -145,6 +172,8 @@
const openDialog = () => {
isShow.value = true;
+ const time = dayjs();
+ timeValue.value = time.format("HH:mm");
};
const onStereotypedWritingClick = (item: TaskItem) => {
@@ -157,11 +186,72 @@
}
};
+const onAddMinutesClick = (item: DateItem) => {
+ // if (detaCheck.value === item.value) {
+ // detaCheck.value = null;
+ // timeValue.value = addMinutes(timeValue.value, -item.value)
+ // } else {
+ detaCheck.value = item.value;
+ timeValue.value = addMinutes(timeValue.value, item.value);
+ // console.log('addMinutes(timeValue.value, item.value): ', addMinutes(timeValue.value, item.value))
+ // }
+};
+
+const addMinutes = (time: string, delta: number): string => {
+ const [hours, minutes] = time.split(":").map(Number);
+ const totalMinutes = hours * 60 + minutes + delta;
+
+ // 处理负数和超过 1440（一天分钟数）情况
+ const normalized = (totalMinutes + 1440) % 1440;
+
+ const newHours = Math.floor(normalized / 60);
+ const newMinutes = normalized % 60;
+
+ return `${newHours.toString().padStart(2, "0")}:${newMinutes
+ .toString()
+ .padStart(2, "0")}`;
+};
+
const handleCancel = () => {
+ if (loading.value) return;
isShow.value = false;
};
-const handleConfirm = () => {};
+const handleConfirm = async () => {
+ if (loading.value) return;
+ const today = dayjs().format("YYYY-MM-DD");
+ const fullDateTime = dayjs(`${today} ${timeValue.value}`)
+ .second(0)
+ .millisecond(0); // 秒和毫秒都去掉，要不然间隔短了就是0分钟
+
+ const now = dayjs().second(0).millisecond(0); // 秒和毫秒都去掉
+ if (!fullDateTime.isAfter(now))
+ return ElMessage.warning("任务提醒时间不能早于或等于当前时间");
+ if (!taskName.value) return ElMessage.warning("任务内容不能为空");
+ loading.value = true;
+ try {
+ const diffMinutes = fullDateTime.diff(now, "minute");
+ const params = {
+ deviceCode: bedsideAuxiliaryScreenStore.deviceData.deviceCode,
+ minutes: diffMinutes,
+ alertText: taskName.value,
+ };
+ const recordCode = bedsideAuxiliaryScreenStore.deviceData.recordCode;
+ const { data, message } = await setTimeoutAlert(params);
+ if (data !== "OK") return ElMessage.warning(message);
+ ElMessage.success("操作成功");
+ bedsideAuxiliaryScreenStore.setSyncTask({
+ deviceCode: params.deviceCode,
+ recordCode: recordCode,
+ taskDate: dayjs(fullDateTime).format("YYYY-MM-DD HH:mm"),
+ taskName: params.alertText,
+ overdue: false,
+ });
+ handleCancel();
+ } finally {
+ loading.value = false;
+ }
+};
defineExpose({
openDialog,
@@ -237,7 +327,26 @@
padding-right: 12px;
.content-left-date {
border-bottom: 1px solid #d8d8d8;
-
+ display: flex;
+
+ .date-btn {
+ flex: 1;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 9px;
+ margin-left: 5px;
+ justify-content: flex-end;
+ .date {
+ margin-left: 0;
+ padding: 0;
+ width: 44px;
+ height: 18px;
+ line-height: 18px;
+ text-align: center;
+ font-size: 11px;
+ background-color: #769aff;
+ }
+ }
}
.content-left-stereotyped-writing {
.stereotyped-writing {
@@ -320,15 +429,23 @@
&:not(:first-child) {
margin-left: 6px;
}
- &.cancel {
- background: #bbc6dd;
- }
+
&.confirm {
background: #769aff;
+ }
+ &.cancel {
+ background: #bbc6dd;
}
&.refresh {
background: #e6a23c;
}
}
}
+</style>
+<style>
+.scheduled-task-dialog {
+ margin: 0 auto;
+ top: 50% !important;
+ transform: translateY(-50%) !important;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0