|
|
|
@ -5,91 +5,186 @@ |
|
|
|
<span class="value">{{ formattedDate }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- <div class="setting-item"> |
|
|
|
<span class="label">时间</span> |
|
|
|
<span class="value">{{ time }}</span> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<div class="setting-item"> |
|
|
|
<span class="label">日期格式</span> |
|
|
|
<span class="label">语言</span> |
|
|
|
<div class="options"> |
|
|
|
<button v-for="format in dateFormats" :key="format" :class="{ active: selectedDateFormat === format }" |
|
|
|
@click="setDateFormat(format)"> |
|
|
|
{{ format }} |
|
|
|
<button |
|
|
|
v-for="lang in languages" |
|
|
|
:key="lang.value" |
|
|
|
:class="{ active: settings.language === lang.value }" |
|
|
|
@click="updateSetting('language', lang.value)" |
|
|
|
:disabled="lang.value == 'ko_KR'" |
|
|
|
> |
|
|
|
{{ lang.label }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="setting-item"> |
|
|
|
<span class="label">时间</span> |
|
|
|
<span class="value">{{ time }}</span> |
|
|
|
<span class="label">孵育温度</span> |
|
|
|
<div class="options"> |
|
|
|
<button |
|
|
|
v-for="t in temperatures" |
|
|
|
:key="t" |
|
|
|
:class="{ active: settings.temperature === t }" |
|
|
|
@click="updateSetting('temperature', t)" |
|
|
|
> |
|
|
|
{{ t }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="setting-item"> |
|
|
|
<span class="label">语言</span> |
|
|
|
<span class="label">DHCP</span> |
|
|
|
<div class="options"> |
|
|
|
<button v-for="lang in languages" :key="lang.value" :class="{ active: settings.language === lang.value }" |
|
|
|
@click="updateSetting('language', lang.value)" :disabled="lang.value == 'ko_KR'"> |
|
|
|
{{ lang.label }} |
|
|
|
<button |
|
|
|
:class="{ |
|
|
|
active: settings.DHCP, |
|
|
|
}" |
|
|
|
@click="updateSetting('DHCP', true)" |
|
|
|
> |
|
|
|
开启 |
|
|
|
</button> |
|
|
|
<button |
|
|
|
:class="{ |
|
|
|
active: !settings.DHCP, |
|
|
|
}" |
|
|
|
@click="updateSetting('DHCP', false)" |
|
|
|
> |
|
|
|
关闭 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="!settings.DHCP" class="setting-item"> |
|
|
|
<span class="label">Local IP</span> |
|
|
|
<div class="options"> |
|
|
|
<input |
|
|
|
style="min-width: 250px" |
|
|
|
v-model="settings.localIp" |
|
|
|
type="text" |
|
|
|
@focus="showKeyboard()" |
|
|
|
readonly |
|
|
|
/> |
|
|
|
<button @click="updateSetting('localIP', settings.localIp)"> |
|
|
|
设置 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="setting-item"> |
|
|
|
<span class="label">打印</span> |
|
|
|
<div class="options"> |
|
|
|
<button v-for="(mode, index) in printModes" :key="index" :class="{ active: settings.autoPrint === mode.value }" |
|
|
|
@click="updateSetting('autoPrint', mode.value)"> |
|
|
|
<button |
|
|
|
v-for="(mode, index) in printModes" |
|
|
|
:key="index" |
|
|
|
:class="{ active: settings.autoPrint === mode.value }" |
|
|
|
@click="updateSetting('autoPrint', mode.value)" |
|
|
|
> |
|
|
|
{{ mode.label }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="setting-item"> |
|
|
|
<span class="label">注销时间</span> |
|
|
|
<span class="label">自动登出</span> |
|
|
|
<div class="options"> |
|
|
|
<button v-for="time in logoutTimes" :key="time.value" |
|
|
|
:class="{ active: settings.autoLogout && settings.logoutTime === time.value }" |
|
|
|
@click="handleLogoutTime(time.value)"> |
|
|
|
<button |
|
|
|
:class="{ |
|
|
|
active: settings.autoLogout, |
|
|
|
}" |
|
|
|
@click="updateSetting('autoLogout', true)" |
|
|
|
> |
|
|
|
开启 |
|
|
|
</button> |
|
|
|
<button |
|
|
|
:class="{ |
|
|
|
active: !settings.autoLogout, |
|
|
|
}" |
|
|
|
@click="updateSetting('autoLogout', false)" |
|
|
|
> |
|
|
|
关闭 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="settings.autoLogout" class="setting-item"> |
|
|
|
<span class="label">登出时间</span> |
|
|
|
<div class="options"> |
|
|
|
<button |
|
|
|
v-for="time in logoutTimes" |
|
|
|
:key="time.value" |
|
|
|
:class="{ active: settings.autoLogoutTimeout === time.value }" |
|
|
|
@click="updateSetting('autoLogoutTimeout', time.value)" |
|
|
|
> |
|
|
|
{{ time.label }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 键盘 --> |
|
|
|
<transition name="slide-up"> |
|
|
|
<div class="keyboard" v-if="keyboardVisible"> |
|
|
|
<SimpleKeyboard |
|
|
|
:input="currentInputValue" |
|
|
|
@onChange="handleKeyboardInput" |
|
|
|
@onKeyPress="handleKeyPress" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</transition> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref, computed, onMounted } from 'vue' |
|
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue' |
|
|
|
import { format } from 'date-fns' |
|
|
|
import { getSystemSettings, setLanguage, setAutoPrint, setAutoLogout } from '../../../services/Index/settings/settings' |
|
|
|
import { eMessage } from '../utils'; |
|
|
|
import { |
|
|
|
getSystemSettings, |
|
|
|
setLanguage, |
|
|
|
setAutoPrint, |
|
|
|
setAutoLogout, |
|
|
|
getTemperatureRange, |
|
|
|
setTemperature, |
|
|
|
setDHCP, |
|
|
|
setLocalIP, |
|
|
|
setAutoLogoutTime, |
|
|
|
} from '../../../services/Index/settings/settings' |
|
|
|
import { eMessage } from '../utils' |
|
|
|
|
|
|
|
// 系统设置状态 |
|
|
|
interface Settings { |
|
|
|
language: string; |
|
|
|
autoPrint: boolean; |
|
|
|
autoLogout: boolean; |
|
|
|
logoutTime: number; |
|
|
|
language: string |
|
|
|
autoPrint: boolean |
|
|
|
autoLogout: boolean |
|
|
|
autoLogoutTimeout: number |
|
|
|
temperature: number |
|
|
|
DHCP: boolean |
|
|
|
localIp: string |
|
|
|
} |
|
|
|
|
|
|
|
const settings = ref<Settings>({ |
|
|
|
language: 'zh-CN', |
|
|
|
autoPrint: true, |
|
|
|
autoLogout: false, |
|
|
|
logoutTime: 3600, |
|
|
|
autoLogoutTimeout: 10, |
|
|
|
temperature: 0, |
|
|
|
DHCP: true, |
|
|
|
localIp: '', |
|
|
|
}) |
|
|
|
|
|
|
|
// 日期和时间 |
|
|
|
const currentDate = ref(new Date()) |
|
|
|
const time = ref('00:00:00') |
|
|
|
const dateFormats = ['MM.dd.yyyy', 'dd.MM.yyyy', 'yyyy.MM.dd'] |
|
|
|
const selectedDateFormat = ref(dateFormats[0]) |
|
|
|
// const dateFormats = ['MM.dd.yyyy', 'dd.MM.yyyy', 'yyyy.MM.dd'] |
|
|
|
// const selectedDateFormat = ref(dateFormats[2]) |
|
|
|
|
|
|
|
// 选项配置 |
|
|
|
const languages = [ |
|
|
|
{ label: '한국어', value: 'ko_KR' }, |
|
|
|
{ label: 'English', value: 'en_US' }, |
|
|
|
{ label: '简体中文', value: 'zh_CN' }, |
|
|
|
] |
|
|
|
|
|
|
|
interface PrintMode { |
|
|
|
label: string; |
|
|
|
value: boolean; |
|
|
|
label: string |
|
|
|
value: boolean |
|
|
|
} |
|
|
|
|
|
|
|
const printModes: PrintMode[] = [ |
|
|
|
@ -98,17 +193,15 @@ const printModes: PrintMode[] = [ |
|
|
|
] |
|
|
|
|
|
|
|
const logoutTimes = [ |
|
|
|
{ label: '00:00', value: 0 }, |
|
|
|
{ label: '00:10', value: 600 }, |
|
|
|
{ label: '00:30', value: 1800 }, |
|
|
|
{ label: '01:00', value: 3600 }, |
|
|
|
{ label: '02:00', value: 7200 }, |
|
|
|
{ label: '03:00', value: 10800 }, |
|
|
|
{ label: '10分钟', value: 10 }, |
|
|
|
{ label: '30分钟', value: 30 }, |
|
|
|
{ label: '1小时', value: 60 }, |
|
|
|
{ label: '2小时', value: 120 }, |
|
|
|
] |
|
|
|
|
|
|
|
// 格式化日期显示 |
|
|
|
const formattedDate = computed(() => |
|
|
|
format(currentDate.value, selectedDateFormat.value) |
|
|
|
format(currentDate.value, 'yyyy.MM.dd HH:mm:ss'), |
|
|
|
) |
|
|
|
|
|
|
|
// 获取系统设置 |
|
|
|
@ -116,13 +209,7 @@ const fetchSettings = async () => { |
|
|
|
try { |
|
|
|
const res = await getSystemSettings() |
|
|
|
if (res.success) { |
|
|
|
settings.value = { |
|
|
|
language: res.data.language, |
|
|
|
autoPrint: res.data.autoPrint, |
|
|
|
autoLogout: res.data.autoLogout, |
|
|
|
logoutTime: res.data.logoutTime, |
|
|
|
} |
|
|
|
console.log('Current language:', settings.value.language) |
|
|
|
settings.value = res.data |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
eMessage.error('获取系统设置失败') |
|
|
|
@ -143,46 +230,30 @@ const updateSetting = async (key: string, value: any) => { |
|
|
|
case 'autoLogout': |
|
|
|
res = await setAutoLogout(value) |
|
|
|
break |
|
|
|
case 'autoLogoutTimeout': |
|
|
|
res = await setAutoLogoutTime(value) |
|
|
|
break |
|
|
|
case 'temperature': |
|
|
|
res = await setTemperature(value) |
|
|
|
break |
|
|
|
case 'DHCP': |
|
|
|
res = await setDHCP(value) |
|
|
|
break |
|
|
|
case 'localIP': |
|
|
|
hideKeyboard() |
|
|
|
res = await setLocalIP(value) |
|
|
|
break |
|
|
|
} |
|
|
|
|
|
|
|
if (res?.success) { |
|
|
|
settings.value = { ...settings.value, [key]: value } |
|
|
|
eMessage.success('设置更新成功') |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
eMessage.error('设置更新失败') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 设置日期格式 |
|
|
|
const setDateFormat = (format: string) => { |
|
|
|
selectedDateFormat.value = format |
|
|
|
} |
|
|
|
|
|
|
|
// 处理注销时间选择 |
|
|
|
const handleLogoutTime = async (time: number) => { |
|
|
|
try { |
|
|
|
if (settings.value.autoLogout && settings.value.logoutTime === time) { |
|
|
|
// 取消选择 |
|
|
|
const res = await setAutoLogout(false) |
|
|
|
if (res?.success) { |
|
|
|
settings.value.autoLogout = false |
|
|
|
settings.value.logoutTime = 0 |
|
|
|
eMessage.success('设置更新成功') |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 选择新时间 |
|
|
|
const res = await setAutoLogout(true) |
|
|
|
if (res?.success) { |
|
|
|
settings.value.autoLogout = true |
|
|
|
settings.value.logoutTime = time |
|
|
|
eMessage.success('设置更新成功') |
|
|
|
} |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
eMessage.error('设置更新失败') |
|
|
|
} |
|
|
|
} |
|
|
|
const temperatures = ref<number[]>([]) |
|
|
|
|
|
|
|
// 初始化 |
|
|
|
onMounted(async () => { |
|
|
|
@ -194,6 +265,56 @@ onMounted(async () => { |
|
|
|
currentDate.value = now |
|
|
|
time.value = now.toLocaleTimeString() |
|
|
|
}, 1000) |
|
|
|
|
|
|
|
const res = await getTemperatureRange() |
|
|
|
if (res && res.success) { |
|
|
|
temperatures.value = res.data |
|
|
|
} else { |
|
|
|
res && res.data && res.data.info && eMessage.error(res.data.info) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
// 键盘相关状态 |
|
|
|
const keyboardVisible = ref(false) |
|
|
|
const currentInputValue = ref('') |
|
|
|
|
|
|
|
// 显示键盘 |
|
|
|
const showKeyboard = () => { |
|
|
|
// 清空当前输入值，避免累加 |
|
|
|
currentInputValue.value = settings.value.localIp |
|
|
|
keyboardVisible.value = true |
|
|
|
} |
|
|
|
|
|
|
|
// 处理键盘输入 |
|
|
|
const handleKeyboardInput = (value: string) => { |
|
|
|
// 更新当前输入值 |
|
|
|
currentInputValue.value = value |
|
|
|
settings.value.localIp = value |
|
|
|
} |
|
|
|
|
|
|
|
// 处理键盘按键 |
|
|
|
const handleKeyPress = (button: string) => { |
|
|
|
if (button === '{enter}') { |
|
|
|
hideKeyboard() |
|
|
|
} else if (button === '{bksp}') { |
|
|
|
// 处理退格键 |
|
|
|
const value = currentInputValue.value |
|
|
|
if (value.length > 0) { |
|
|
|
const newValue = value.slice(0, -1) |
|
|
|
handleKeyboardInput(newValue) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 隐藏键盘 |
|
|
|
const hideKeyboard = () => { |
|
|
|
keyboardVisible.value = false |
|
|
|
currentInputValue.value = '' |
|
|
|
} |
|
|
|
|
|
|
|
// 在组件卸载时清理状态 |
|
|
|
onUnmounted(() => { |
|
|
|
hideKeyboard() |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
@ -218,11 +339,6 @@ onMounted(async () => { |
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
transform: translateY(-2px); |
|
|
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08); |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
font-size: 28px; |
|
|
|
font-weight: 500; |
|
|
|
@ -233,6 +349,14 @@ onMounted(async () => { |
|
|
|
font-size: 28px; |
|
|
|
color: #606266; |
|
|
|
} |
|
|
|
input { |
|
|
|
padding: 8px; |
|
|
|
border: 1px solid #ccc; |
|
|
|
border-radius: 4px; |
|
|
|
font-size: 30px; |
|
|
|
transition: box-shadow 0.2s ease; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.options { |
|
|
|
display: flex; |
|
|
|
@ -254,72 +378,35 @@ onMounted(async () => { |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: #409eff; |
|
|
|
border-color: #c6e2ff; |
|
|
|
background-color: #ecf5ff; |
|
|
|
} |
|
|
|
|
|
|
|
&.active { |
|
|
|
color: #fff; |
|
|
|
background-color: #409eff; |
|
|
|
border-color: #409eff; |
|
|
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3); |
|
|
|
|
|
|
|
&:hover { |
|
|
|
background-color: #66b1ff; |
|
|
|
border-color: #66b1ff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 针对日期格式按钮的特殊样式 |
|
|
|
&:nth-child(2) { |
|
|
|
.options button { |
|
|
|
min-width: 160px; |
|
|
|
font-family: monospace; |
|
|
|
letter-spacing: 1px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 针对语言按钮的特殊样式 |
|
|
|
&:nth-child(4) { |
|
|
|
.options button { |
|
|
|
min-width: 140px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 针对打印按钮的特殊样式 |
|
|
|
&:nth-child(5) { |
|
|
|
.options button { |
|
|
|
min-width: 100px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 针对注销时间按钮的特殊样式 |
|
|
|
&:nth-child(6) { |
|
|
|
.options button { |
|
|
|
min-width: 100px; |
|
|
|
font-family: monospace; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 添加响应式设计 |
|
|
|
@media screen and (max-width: 768px) { |
|
|
|
.device-management { |
|
|
|
.setting-item { |
|
|
|
flex-direction: column; |
|
|
|
align-items: flex-start; |
|
|
|
gap: 16px; |
|
|
|
|
|
|
|
.options { |
|
|
|
width: 100%; |
|
|
|
justify-content: flex-start; |
|
|
|
} |
|
|
|
} |
|
|
|
.keyboard { |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 300px; |
|
|
|
background-color: #f5f7fa; |
|
|
|
border-top-left-radius: 16px; |
|
|
|
border-top-right-radius: 16px; |
|
|
|
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1); |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
// 键盘动画 |
|
|
|
.slide-up-enter-active, |
|
|
|
.slide-up-leave-active { |
|
|
|
transition: transform 0.3s ease; |
|
|
|
} |
|
|
|
.slide-up-enter-from, |
|
|
|
.slide-up-leave-to { |
|
|
|
transform: translateY(100%); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
zhangjiming
7 months ago