Browse Source

fix: 消毒液虚拟键盘替换

master
guoapeng 2 weeks ago
parent
commit
f19bbeff84
  1. 50
      src/components/formula/HomeFormulaConfig.vue
  2. 33
      src/components/formula/RunFormulaConfig.vue
  3. 14
      src/components/home/HomeLogLevel.vue
  4. 61
      src/views/liquid/index.vue

50
src/components/formula/HomeFormulaConfig.vue

@ -33,7 +33,10 @@ const labelUnitMap: Record<string, any> = formulaStore.labelUnitMap
* 监听事件 * 监听事件
*/ */
watchEffect(() => { watchEffect(() => {
formData.value = formulaStore.selectedFormulaInfo !== null ? convertValuesToInt(formulaStore.selectedFormulaInfo) : convertValuesToInt(formulaStore.defaultFormulaInfo as Record<string, any>)
formData.value
= formulaStore.selectedFormulaInfo !== null
? convertValuesToInt(formulaStore.selectedFormulaInfo)
: convertValuesToInt(formulaStore.defaultFormulaInfo as Record<string, any>)
}) })
/** /**
* 配方配置列表 * 配方配置列表
@ -44,73 +47,48 @@ const size = 'default'
<template> <template>
<div class="formula-form"> <div class="formula-form">
<el-form
:model="formData"
label-width="auto"
label-position="right"
:size="size"
inline
>
<el-form-item label="配方名称" style="width: 93%">
<el-input
v-model="formData.name"
v-prevent-keyboard
name="name"
placeholder="配方名称"
:disabled="true"
/>
<el-form :model="formData" disabled label-width="auto" label-position="right" :size="size" inline>
<el-form-item label="配方名称" style="width: 93%">
<ft-input v-model="formData.name" name="name" placeholder="配方名称" />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-for="item in formulaConfigList.filter((data) => data.is_visible_in_rt_page)"
v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
:key="item.setting_id" :key="item.setting_id"
:label="formulaNameMap[item.setting_id]" :label="formulaNameMap[item.setting_id]"
style="width: 50%" style="width: 50%"
:prop="item.setting_id" :prop="item.setting_id"
> >
<template v-if="item.val_type === 'int'"> <template v-if="item.val_type === 'int'">
<el-input
<ft-input
v-model.number="formData[item.setting_id]" v-model.number="formData[item.setting_id]"
v-prevent-keyboard
style="width: 80%" style="width: 80%"
type="number"
:name="item.setting_id" :name="item.setting_id"
:controls="false" :controls="false"
:disabled="true"
> >
<template v-if="labelUnitMap[item.setting_id]" #append> <template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }} {{ labelUnitMap[item.setting_id] }}
</template> </template>
</el-input>
</ft-input>
</template> </template>
<template v-if="item.val_type === 'float'"> <template v-if="item.val_type === 'float'">
<el-input
<ft-input
v-model.number="formData[item.setting_id]" v-model.number="formData[item.setting_id]"
v-prevent-keyboard
style="width: 80%" style="width: 80%"
type="number"
:name="item.setting_id" :name="item.setting_id"
:controls="false" :controls="false"
:disabled="true"
> >
<template v-if="labelUnitMap[item.setting_id]" #append> <template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }} {{ labelUnitMap[item.setting_id] }}
</template> </template>
</el-input>
</ft-input>
</template> </template>
<template v-else-if="item.val_type === 'enum'"> <template v-else-if="item.val_type === 'enum'">
<el-select
v-model="formData[item.setting_id]"
v-prevent-keyboard
style="width: 80%;height:40px"
placeholder="请选择"
:disabled="true"
readonly
>
<el-select v-model="formData[item.setting_id]" style="width: 80%; height: 40px" placeholder="请选择" readonly>
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" /> <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
</el-select> </el-select>
</template> </template>
<template v-else-if="item.val_type === 'boolean'"> <template v-else-if="item.val_type === 'boolean'">
<el-radio-group v-model="formData[item.setting_id]" :disabled="true">
<el-radio-group v-model="formData[item.setting_id]">
<el-radio :label="true"> <el-radio :label="true">
</el-radio> </el-radio>

33
src/components/formula/RunFormulaConfig.vue

@ -58,16 +58,9 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
<template> <template>
<div class="formula-form"> <div class="formula-form">
<el-form
ref="runtimeFormRef"
:model="formData"
label-width="auto"
label-position="right"
:size="size"
inline
>
<el-form ref="runtimeFormRef" :model="formData" label-width="auto" label-position="right" :size="size" inline>
<el-form-item <el-form-item
v-for="item in formulaConfigList.filter((data) => data.is_visible_in_rt_page)"
v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
:key="item.setting_id" :key="item.setting_id"
:label="formulaNameMap[item.setting_id]" :label="formulaNameMap[item.setting_id]"
style="width: 50%" style="width: 50%"
@ -81,42 +74,38 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
]" ]"
> >
<template v-if="item.val_type === 'int'"> <template v-if="item.val_type === 'int'">
<el-input
v-model.number="formData[item.setting_id]"
v-prevent-keyboard
<ft-input
v-model="formData[item.setting_id]"
style="width: 80%" style="width: 80%"
type="number"
:name="item.setting_id" :name="item.setting_id"
:controls="false" :controls="false"
:disabled="!(item.is_editable)"
:disabled="!item.is_editable"
> >
<template v-if="labelUnitMap[item.setting_id]" #append> <template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }} {{ labelUnitMap[item.setting_id] }}
</template> </template>
</el-input>
</ft-input>
</template> </template>
<template v-if="item.val_type === 'float'"> <template v-if="item.val_type === 'float'">
<el-input
<ft-input
v-model.number="formData[item.setting_id]" v-model.number="formData[item.setting_id]"
v-prevent-keyboard
style="width: 80%" style="width: 80%"
type="number"
:name="item.setting_id" :name="item.setting_id"
:controls="false" :controls="false"
:disabled="!(item.is_editable)"
:disabled="!item.is_editable"
> >
<template v-if="labelUnitMap[item.setting_id]" #append> <template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }} {{ labelUnitMap[item.setting_id] }}
</template> </template>
</el-input>
</ft-input>
</template> </template>
<template v-else-if="item.val_type === 'enum'"> <template v-else-if="item.val_type === 'enum'">
<el-select <el-select
v-model="formData[item.setting_id]" v-model="formData[item.setting_id]"
v-prevent-keyboard v-prevent-keyboard
style="width: 80%;height:40px"
style="width: 80%; height: 40px"
placeholder="请选择" placeholder="请选择"
:disabled="!(item.is_editable)"
:disabled="!item.is_editable"
readonly readonly
> >
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" /> <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />

14
src/components/home/HomeLogLevel.vue

@ -18,10 +18,6 @@ watchEffect(() => {
loglevel.value = formulaStore.loglevel loglevel.value = formulaStore.loglevel
}) })
const openModal = () => {
isModalOpen.value = true
}
const setRealtimeConfig = async (key: string, val: string) => { const setRealtimeConfig = async (key: string, val: string) => {
await syncSendCmd({ await syncSendCmd({
className: 'DisinfectionCtrlServiceExt', className: 'DisinfectionCtrlServiceExt',
@ -51,15 +47,7 @@ const operationState = computed(() => {
<template> <template>
<div class="home-right-level"> <div class="home-right-level">
消毒等级 消毒等级
<el-input
v-model="loglevel"
v-prevent-keyboard
class="input"
placeholder="请选择"
style="height: 4rem"
readonly
@focus="openModal"
>
<el-input v-model="loglevel" class="input" placeholder="请选择" style="height: 4rem" readonly>
<template #append> <template #append>
<bt-button type="primary" button-text="Log" text-color="#ffffff" height="4rem" text-size="16px" /> <bt-button type="primary" button-text="Log" text-color="#ffffff" height="4rem" text-size="16px" />
</template> </template>

61
src/views/liquid/index.vue

@ -26,9 +26,9 @@ const keyboardVisible = ref(false)
const keyboardType = ref<'text' | 'number'>('number') const keyboardType = ref<'text' | 'number'>('number')
const softKeyboardRef = ref() const softKeyboardRef = ref()
const liquidStateData = ref(liquidStore.liquidStateData) const liquidStateData = ref(liquidStore.liquidStateData)
const addWorkState = ref(liquidStore.liquidStateData)//
const drainWorkState = ref(liquidStore.liquidStateData)//
const liquidTotoal = ref(liquidStore.liquidTotal)//
const addWorkState = ref(liquidStore.liquidStateData) //
const drainWorkState = ref(liquidStore.liquidStateData) //
const liquidTotoal = ref(liquidStore.liquidTotal) //
const disinfectionState = ref(homeStore.disinfectionState) const disinfectionState = ref(homeStore.disinfectionState)
const sealInfo = ref(sealStore.sealInfo) const sealInfo = ref(sealStore.sealInfo)
const loading = ref(false) const loading = ref(false)
@ -40,9 +40,7 @@ const btnStyle = {
textColor: '#FFFFFF', textColor: '#FFFFFF',
} }
onMounted(() => {
})
onMounted(() => {})
watchEffect(() => { watchEffect(() => {
addWorkState.value = liquidStore.liquidAddWorkState addWorkState.value = liquidStore.liquidAddWorkState
@ -58,14 +56,6 @@ watch(inputValue, (newVal: string | number) => {
stopatg.value = Number(newVal) stopatg.value = Number(newVal)
}) })
const openKeyboard = () => {
keyboardVisible.value = true
}
// const nowLiquid = computed(() => {
// return roundNumber(liquidStateData.value.nowLiquid, 0)
// })
const handleConfirm = (value: string) => { const handleConfirm = (value: string) => {
console.log('确认输入:', value) console.log('确认输入:', value)
} }
@ -159,14 +149,13 @@ const onStopDrainLiquid = async () => {
<!-- 输入加液/排液量 --> <!-- 输入加液/排液量 -->
<div class="liquid-input"> <div class="liquid-input">
<el-input
<ft-input
v-model="stopatg" v-model="stopatg"
v-prevent-keyboard
layout-name="number"
class="input" class="input"
name="nowLiquid" name="nowLiquid"
placeholder="请输入" placeholder="请输入"
style="height: 4rem"
@focus="openKeyboard"
style="height: 4rem; width: 25vw"
> >
<template #append> <template #append>
<bt-button <bt-button
@ -179,7 +168,7 @@ const onStopDrainLiquid = async () => {
text-size="24px" text-size="24px"
/> />
</template> </template>
</el-input>
</ft-input>
</div> </div>
<!-- 操作区 --> <!-- 操作区 -->
@ -265,7 +254,7 @@ const onStopDrainLiquid = async () => {
v-model="inputValue" v-model="inputValue"
:is-visible="keyboardVisible" :is-visible="keyboardVisible"
:keyboard-type="keyboardType" :keyboard-type="keyboardType"
@update-keyboard-visible="(visible) => keyboardVisible = visible"
@update-keyboard-visible="visible => (keyboardVisible = visible)"
@confirm="handleConfirm" @confirm="handleConfirm"
@close="keyboardVisible = false" @close="keyboardVisible = false"
/> />
@ -273,28 +262,28 @@ const onStopDrainLiquid = async () => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main-content{
.main-content {
display: grid; display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-columns: repeat(3, 1fr);
height: $main-container-height; height: $main-container-height;
gap: 10px; gap: 10px;
overflow: hidden; overflow: hidden;
.liquid-left{
background: #FFFFFF;
grid-column: 1 / 3;
.liquid-left {
background: #ffffff;
grid-column: 1 / 3;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15); box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
background: $gradient-color; background: $gradient-color;
} }
.liquid-right{
background:#FFFFFF;
.liquid-right {
background: #ffffff;
box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15); box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
padding-top: 15vh; padding-top: 15vh;
width: 100%; width: 100%;
background: $gradient-color; background: $gradient-color;
.liquid-surplus-title{
.liquid-surplus-title {
height: 13vh; height: 13vh;
display: flex; display: flex;
padding-left: 2.5rem; padding-left: 2.5rem;
@ -302,30 +291,30 @@ const onStopDrainLiquid = async () => {
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 400;
.liquid-title-g{
color: #2892F3;
.liquid-title-g {
color: #2892f3;
font-weight: bold; font-weight: bold;
} }
} }
.liquid-input{
.liquid-input {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.input{
.input {
width: 25vw; width: 25vw;
} }
} }
.liquid-opt{
.liquid-opt {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 4vh; margin-top: 4vh;
} }
.liquid-add-btn{
.liquid-add-btn {
width: 25vw; width: 25vw;
height: 8vh; height: 8vh;
border-radius: 12px; border-radius: 12px;
color: #FFFFFF;
color: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -333,7 +322,7 @@ const onStopDrainLiquid = async () => {
gap: 10px; gap: 10px;
} }
.liquid-drain{
.liquid-drain {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
} }

Loading…
Cancel
Save