LiLongLong
/
disinfector_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix:消毒中不能修改时间; 修改时间后提示重启设备

master
guoapeng 7 hours ago
parent
1b2c75c3f8
commit
4c57eecd46
2 changed files with 79 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      src/components/common/DatePicker/index.vue
  2. 18
      src/components/setting/SystemDate.vue

94
src/components/common/DatePicker/index.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { computed, defineEmits, defineProps, onMounted, onUnmounted, ref, watch } from 'vue'
const props = defineProps({
@ -14,6 +15,10 @@ const props = defineProps({
type: [String, Date],
default: null,
},
disabled: {
type: Boolean,
default: false,
},
format: {
type: String,
default: 'YYYY-MM-DD HH:mm:ss',
@ -105,22 +110,26 @@ onMounted(() => {
})
// 监听props变化
watch(() => props.modelValue, (newVal) => {
if (newVal) {
const date = new Date(Number(newVal))
if (!Number.isNaN(date.getTime())) {
selectedDate.value = date
currentYear.value = date.getFullYear()
currentMonth.value = date.getMonth()
selectedHour.value = date.getHours().toString().padStart(2, '0')
selectedMinute.value = date.getMinutes().toString().padStart(2, '0')
selectedSecond.value = date.getSeconds().toString().padStart(2, '0')
watch(
() => props.modelValue,
(newVal) => {
if (newVal) {
const date = new Date(Number(newVal))
if (!Number.isNaN(date.getTime())) {
selectedDate.value = date
currentYear.value = date.getFullYear()
currentMonth.value = date.getMonth()
selectedHour.value = date.getHours().toString().padStart(2, '0')
selectedMinute.value = date.getMinutes().toString().padStart(2, '0')
selectedSecond.value = date.getSeconds().toString().padStart(2, '0')
}
}
}
else {
selectedDate.value = null
}
}, { deep: true })
else {
selectedDate.value = null
}
},
{ deep: true },
)
// 日期操作
const prevMonth = () => {
@ -233,6 +242,10 @@ const toggleDropdown = (event?: MouseEvent) => {
if (event) {
event.stopPropagation()
}
if (props.disabled) {
ElMessage.error('请在消毒结束后再试')
return
}
isDropdownVisible.value = !isDropdownVisible.value
}
@ -242,7 +255,9 @@ const isSameDay = (date1: Date, date2: Date | null) => {
return false
}
return (
date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate()
date1.getFullYear() === date2.getFullYear()
&& date1.getMonth() === date2.getMonth()
&& date1.getDate() === date2.getDate()
)
}
@ -253,10 +268,7 @@ const isDateInRange = (date: Date) => {
if (min && date < min) {
return false
}
if (max && date > max) {
return false
}
return true
return !(max && date > max)
}
// 点击外部关闭下拉框
@ -307,9 +319,7 @@ onUnmounted(() => {
<button class="nav-btn" @click="prevMonth">
<el-icon><ArrowLeft /></el-icon>
</button>
<span class="current-date">
{{ currentYear }}年 {{ currentMonth + 1 }}月
</span>
<span class="current-date"> {{ currentYear }}年 {{ currentMonth + 1 }}月 </span>
<button class="nav-btn" @click="nextMonth">
<el-icon><ArrowRight /></el-icon>
</button>
@ -343,19 +353,34 @@ onUnmounted(() => {
时间:
</div>
<el-select v-model="selectedHour" class="time-select" @change="updateTime">
<el-option v-for="i in hoursOptions" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;">
<el-option
v-for="i in hoursOptions"
:key="i"
:value="i.toString().padStart(2, '0')"
style="font-size: 20px; line-height: 2px; height: 5rem; display: flex; align-items: center"
>
{{ i.toString().padStart(2, '0') }}
</el-option>
</el-select>
<span class="time-separator">:</span>
<el-select v-model="selectedMinute" class="time-select" @change="updateTime">
<el-option v-for="i in minuteOptions" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;">
<el-option
v-for="i in minuteOptions"
:key="i"
:value="i.toString().padStart(2, '0')"
style="font-size: 20px; line-height: 2px; height: 5rem; display: flex; align-items: center"
>
{{ i.toString().padStart(2, '0') }}
</el-option>
</el-select>
<span class="time-separator">:</span>
<el-select v-model="selectedSecond" class="time-select" @change="updateTime">
<el-option v-for="i in secondOptions" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;">
<el-option
v-for="i in secondOptions"
:key="i"
:value="i.toString().padStart(2, '0')"
style="font-size: 20px; line-height: 2px; height: 5rem; display: flex; align-items: center"
>
{{ i.toString().padStart(2, '0') }}
</el-option>
</el-select>
@ -420,7 +445,9 @@ $fontSize: 1.5rem;
background-color: white;
border: 1px solid #e2e8f0;
border-radius: 4px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
z-index: 100;
padding: 12px;
}
@ -535,7 +562,7 @@ select option {
width: 5rem;
}
.select-option{
.select-option {
max-height: 3rem;
}
@ -562,7 +589,8 @@ select {
gap: 10px;
}
.confirm-btn, .cancel-btn {
.confirm-btn,
.cancel-btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
@ -589,15 +617,17 @@ select {
background-color: #e2e8f0;
}
.fade-enter-active, .fade-leave-active {
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s;
}
.fade-enter-from, .fade-leave-to {
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
// 修改选择框本身的宽高
:deep(.el-select__wrapper){
:deep(.el-select__wrapper) {
height: 3rem;
font-size: 20px;
}

18
src/components/setting/SystemDate.vue
View File

@ -1,5 +1,7 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useHomeStore } from 'stores/homeStore'
import { computed, onMounted, ref } from 'vue'
import { syncSendCmd } from '@/apis/system'
import DatePicker from '@/components/common/DatePicker/index.vue'
@ -7,6 +9,7 @@ import { FtMessage } from '@/libs/message'
import { useSystemStore } from '@/stores/systemStore'
const systemStore = useSystemStore()
const homeStore = useHomeStore()
const systemTime = ref<string>(`${systemStore.systemTime}`)
const onChangeDate = async (value: string) => {
if (value) {
@ -45,6 +48,14 @@ const onChangeDate = async (value: string) => {
if (res.ackcode === 0) {
FtMessage.success('日期设置成功')
systemStore.getSystemTime()
ElMessageBox.confirm('日期和时间已变更, 请重启设备!', '提示', {
confirmButtonText: '确认',
showClose: false,
showCancelButton: false,
closeOnClickModal: false,
closeOnPressEscape: false,
type: 'warning',
})
}
})
}
@ -54,6 +65,10 @@ onMounted(() => {
systemStore.getSystemTime()
console.log('systemTime--', systemTime.value)
})
const operationState = computed(() => {
return homeStore.disinfectionState.state === 'idle' || homeStore.disinfectionState.state === 'finished'
})
</script>
<template>
@ -64,6 +79,7 @@ onMounted(() => {
<DatePicker
:key="systemTime"
v-model="systemTime"
:disabled="!operationState"
format="YYYY-MM-DD HH:mm:ss"
@change="val => onChangeDate(val)"
/>

Write Preview
Loading…
Cancel
Save