6 changed files with 323 additions and 89 deletions
-
34src/components/formula/HomeFormulaConfig.vue
-
196src/components/formula/RunFormulaConfig.vue
-
114src/components/home/HomeSetting.vue
-
46src/components/home/Runtime.vue
-
4src/components/home/config.vue
-
18src/stores/formulaStore.ts
@ -0,0 +1,196 @@ |
|||
<script lang="ts" setup> |
|||
import { formulaNameMap } from 'libs/constant' |
|||
import { inject, onMounted, ref, watchEffect } from 'vue' |
|||
|
|||
import { convertValuesToInt, convertValuesToString } from '@/libs/utils' |
|||
import { useFormulaStore } from '@/stores/formulaStore' |
|||
|
|||
const formulaStore = useFormulaStore() |
|||
const runtimeFormRef = ref() |
|||
const saveFormData = () => { |
|||
runtimeFormRef.value.validate((valid: any) => { |
|||
if (valid) { |
|||
return convertValuesToString(formData.value, 'name') |
|||
} |
|||
return null |
|||
}) |
|||
} |
|||
/** |
|||
* 注册孙子组件方法的注入函数 |
|||
*/ |
|||
const registerGrandsonMethods = inject<(methods: any) => void>('registerGrandsonMethods', () => {}) |
|||
onMounted(() => { |
|||
registerGrandsonMethods && registerGrandsonMethods({ saveFormData }) |
|||
}) |
|||
/** |
|||
* 当前表单数据 |
|||
* - home: 当前选中的配方 或者默认配方 |
|||
*/ |
|||
const formData = ref<Record<string, any>>({}) |
|||
/** |
|||
* 标签单位映射表，用于显示各参数的单位 |
|||
*/ |
|||
const labelUnitMap: Record<string, any> = formulaStore.labelUnitMap |
|||
/** |
|||
* 监听事件 |
|||
*/ |
|||
watchEffect(() => { |
|||
formData.value = convertValuesToInt(formulaStore.getRealtimeConfig()) |
|||
}) |
|||
/** |
|||
* 配方配置列表 |
|||
*/ |
|||
const formulaConfigList = formulaStore.formulaConfigList |
|||
const size = 'default' |
|||
const validatePass = (rule: any, value: any, callback: any, config: Formula.FormulaConfig) => { |
|||
if (!value && value !== 0 && value !== '0') { |
|||
callback(new Error('此为必填项')) |
|||
} |
|||
else if (config.val_type === 'int' || config.val_type === 'float') { |
|||
const temp = Number(value) |
|||
if (temp < config.val_lower_limit || temp > config.val_upper_limit) { |
|||
callback(new Error(`输入范围为${config.val_lower_limit}-${config.val_upper_limit}`)) |
|||
} |
|||
} |
|||
callback() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="formula-form"> |
|||
<el-form |
|||
ref="runtimeFormRef" |
|||
:model="formData" |
|||
label-width="auto" |
|||
label-position="right" |
|||
:size="size" |
|||
inline |
|||
> |
|||
<el-form-item |
|||
v-for="item in formulaConfigList.filter((data) => data.is_visible_in_rt_page)" |
|||
:key="item.setting_id" |
|||
:label="formulaNameMap[item.setting_id]" |
|||
style="width: 50%" |
|||
:prop="item.setting_id" |
|||
:rules="[ |
|||
{ |
|||
required: true, |
|||
validator: (rule, value, callback) => validatePass(rule, value, callback, item), |
|||
trigger: 'blur', |
|||
}, |
|||
]" |
|||
> |
|||
<template v-if="item.val_type === 'int'"> |
|||
<el-input |
|||
v-model.number="formData[item.setting_id]" |
|||
v-prevent-keyboard |
|||
style="width: 80%" |
|||
type="number" |
|||
:name="item.setting_id" |
|||
:controls="false" |
|||
:disabled="!(item.is_editable)" |
|||
> |
|||
<template v-if="labelUnitMap[item.setting_id]" #append> |
|||
{{ labelUnitMap[item.setting_id] }} |
|||
</template> |
|||
</el-input> |
|||
</template> |
|||
<template v-if="item.val_type === 'float'"> |
|||
<el-input |
|||
v-model.number="formData[item.setting_id]" |
|||
v-prevent-keyboard |
|||
style="width: 80%" |
|||
type="number" |
|||
:name="item.setting_id" |
|||
:controls="false" |
|||
:disabled="!(item.is_editable)" |
|||
> |
|||
<template v-if="labelUnitMap[item.setting_id]" #append> |
|||
{{ labelUnitMap[item.setting_id] }} |
|||
</template> |
|||
</el-input> |
|||
</template> |
|||
<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="!(item.is_editable)" |
|||
readonly |
|||
> |
|||
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" /> |
|||
</el-select> |
|||
</template> |
|||
<template v-else-if="item.val_type === 'boolean'"> |
|||
<el-radio-group v-model="formData[item.setting_id]" :disabled="!item.is_editable"> |
|||
<el-radio :label="true"> |
|||
是 |
|||
</el-radio> |
|||
<el-radio :label="false"> |
|||
否 |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</template> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.formula-form { |
|||
font-size: 20px !important; |
|||
padding: 5px; |
|||
padding-left: 15px; |
|||
align-items: center; |
|||
.default-btn { |
|||
margin-top: 1rem; |
|||
} |
|||
.config-btn { |
|||
height: 3rem; |
|||
width: 8rem; |
|||
} |
|||
} |
|||
|
|||
.formula-form-item { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
} |
|||
|
|||
.formData-input-config { |
|||
width: 10vw; |
|||
} |
|||
:deep(.el-input__inner) { |
|||
text-align: left; |
|||
height: 40px; |
|||
} |
|||
:deep(.el-form-item) { |
|||
margin-right: 0; |
|||
align-items: center; |
|||
} |
|||
|
|||
/* 进入动画的初始状态 */ |
|||
.slide-right-enter-from { |
|||
transform: translateX(100%); |
|||
} |
|||
/* 进入动画的结束状态（也可以理解为激活状态） */ |
|||
.slide-right-enter-to { |
|||
transform: translateX(0); |
|||
} |
|||
/* 进入动画的过渡曲线等 */ |
|||
.slide-right-enter-active { |
|||
transition: transform 0.3s ease-in-out; |
|||
} |
|||
/* 离开动画的初始状态（激活状态） */ |
|||
.slide-right-leave-from { |
|||
transform: translateX(0); |
|||
} |
|||
/* 离开动画的结束状态 */ |
|||
.slide-right-leave-to { |
|||
transform: translateX(100%); |
|||
} |
|||
/* 离开动画的过渡曲线等 */ |
|||
.slide-right-leave-active { |
|||
transition: transform 0.3s ease-in-out; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,46 @@ |
|||
<script lang="ts" setup> |
|||
import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue' |
|||
import { onMounted } from 'vue' |
|||
|
|||
/** |
|||
* 配方选择页面组件 |
|||
* @description 负责处理配方选择逻辑、设备状态判断及界面交互 |
|||
*/ |
|||
|
|||
/** |
|||
* @hook 生命周期钩子 - 挂载完成时执行 |
|||
* @description 初始化时检查配方列表，若为空则重新获取 |
|||
*/ |
|||
onMounted(() => { |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="main-content"> |
|||
<div class="formula-config"> |
|||
<RunFormulaConfig/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main-content { |
|||
overflow: hidden; |
|||
//height: auto; |
|||
//background: $gradient-color; |
|||
padding: 15px; |
|||
.formula-config { |
|||
display: grid; |
|||
padding: 10px; |
|||
width: 100%; |
|||
} |
|||
.formula-config-form { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
gap: 5px; |
|||
} |
|||
.formdata-input { |
|||
width: 10vw; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue