WuXi/NPP_Vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 泵速策略ui美化

Browse Source
This commit is contained in:
Asoka 2025-06-10 10:30:13 +08:00
parent 9a62ccc99d
commit 5f529f2f06
2 changed files with 138 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/views/admin/feedingconfig/components/feeding-config-form.vue
View File

@ -29,52 +29,72 @@
<el-input v-model="formData.configName" clearable placeholder="请输入策略名称" />
</el-form-item>
<el-form-item label="总理论时长" prop="totalTheoryTime" required>
<el-input-number v-model="formData.totalTheoryTime" :min="0" style="width:100%" />
<template #append>min</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.totalTheoryTime" disabled style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">分钟</span>
</div>
</el-form-item>
<div class="sub-group">
<div class="sub-title">校准</div>
<el-form-item label="校准阶段时长" prop="calibrateDuration" required>
<el-input-number v-model="formData.calibrateDuration" :min="0" style="width:100%" />
<template #append>s</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.calibrateDuration" :min="0" style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">秒</span>
</div>
</el-form-item>
<el-form-item label="校准阶段补料占总量百分比" prop="calibrateVolumePercent" required>
<el-input-number v-model="formData.calibrateVolumePercent" :min="0" :max="100" style="width:100%" />
<template #append>%</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.calibrateVolumePercent" :min="0" :max="100" style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">%</span>
</div>
</el-form-item>
<el-form-item label="校准理论速度" prop="calibrateTheorySpeed" required>
<el-input-number v-model="formData.calibrateTheorySpeed" :min="0" style="width:100%" />
<template #append>%</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.calibrateTheorySpeed" :min="0" style="flex: 1;" disabled />
<span style="margin-left: 8px; white-space: nowrap;">%</span>
</div>
</el-form-item>
</div>
<div class="sub-group">
<div class="sub-title">高速</div>
<el-form-item label="高速阶段泵速百分比" prop="highSpeedPercent" required>
<el-input-number v-model="formData.highSpeedPercent" :min="0" :max="100" style="width:100%" />
<template #append>%</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.highSpeedPercent" :min="0" :max="100" style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">%</span>
</div>
</el-form-item>
<el-form-item label="高速阶段补料占总量百分比" prop="highSpeedVolumePercent" required>
<el-input-number v-model="formData.highSpeedVolumePercent" :min="0" :max="100" style="width:100%" />
<template #append>%</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.highSpeedVolumePercent" :min="0" :max="100" style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">%</span>
</div>
</el-form-item>
<el-form-item label="高速理论时长" prop="highSpeedTheoryTime" required>
<el-input-number v-model="formData.highSpeedTheoryTime" :min="0" style="width:100%" />
<template #append>min</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.highSpeedTheoryTime" :min="0" style="flex: 1;" disabled />
<span style="margin-left: 8px; white-space: nowrap;">分钟</span>
</div>
</el-form-item>
</div>
<div class="sub-group">
<div class="sub-title">低速</div>
<el-form-item label="低速阶段泵速百分比" prop="lowSpeedPercent" required>
<el-input-number v-model="formData.lowSpeedPercent" :min="0" :max="100" style="width:100%" />
<template #append>%</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.lowSpeedPercent" :min="0" :max="100" style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">%</span>
</div>
</el-form-item>
<el-form-item label="低速阶段补料占总量百分比" prop="lowSpeedVolumePercent" required>
<el-input-number v-model="formData.lowSpeedVolumePercent" :min="0" :max="100" style="width:100%" />
<template #append>%</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.lowSpeedVolumePercent" :min="0" :max="100" style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">%</span>
</div>
</el-form-item>
<el-form-item label="低速理论时长" prop="lowSpeedTheoryTime" required>
<el-input-number v-model="formData.lowSpeedTheoryTime" :min="0" style="width:100%" />
<template #append>min</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.lowSpeedTheoryTime" :min="0" style="flex: 1;" disabled />
<span style="margin-left: 8px; white-space: nowrap;">分钟</span>
</div>
</el-form-item>
</div>
</el-card>
@ -84,20 +104,28 @@
<el-card shadow="hover" class="group-card">
<div class="section-title">监控</div>
<el-form-item label="环控间隔时间" prop="intervalTime" required>
<el-input-number v-model="formData.intervalTime" :min="0" style="width:100%" />
<template #append>s</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.intervalTime" :min="0" style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">秒</span>
</div>
</el-form-item>
<el-form-item label="补料超量百分比" prop="excessPercentage" required>
<el-input-number v-model="formData.excessPercentage" :min="0" style="width:100%" />
<template #append>%</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.excessPercentage" :min="0" style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">%</span>
</div>
</el-form-item>
<el-form-item label="超时时间" prop="timeOutSeconds" required>
<el-input-number v-model="formData.timeOutSeconds" :min="0" style="width:100%" />
<template #append>s</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.timeOutSeconds" :min="0" style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">秒</span>
</div>
</el-form-item>
<el-form-item label="终点百分比" prop="terminalVolumePercent" required>
<el-input-number v-model="formData.terminalVolumePercent" :min="0" :max="100" style="width:100%" />
<template #append>%</template>
<div style="display: flex; align-items: center; width: 100%;">
<el-input-number v-model="formData.terminalVolumePercent" :min="0" :max="100" style="flex: 1;" />
<span style="margin-left: 8px; white-space: nowrap;">%</span>
</div>
</el-form-item>
<div class="sub-group">
<div class="sub-title">抖动</div>
@ -236,6 +264,49 @@ watch(
}
)
watch(
() => [formData.calibrateVolumePercent, formData.calibrateDuration],
([volume, duration]) => {
if (duration > 0) {
formData.calibrateTheorySpeed = Number((volume / duration * 60).toFixed(2))
} else {
formData.calibrateTheorySpeed = 0
}
}
)
// 新增：高速理论时长自动计算
watch(
() => [formData.highSpeedVolumePercent, formData.highSpeedPercent],
([volume, percent]) => {
if (percent > 0) {
formData.highSpeedTheoryTime = Number((volume / percent).toFixed(2))
} else {
formData.highSpeedTheoryTime = 0
}
}
)
// 新增：低速理论时长自动计算
watch(
() => [formData.lowSpeedVolumePercent, formData.lowSpeedPercent],
([volume, percent]) => {
if (percent > 0) {
formData.lowSpeedTheoryTime = Number((volume / percent).toFixed(2))
} else {
formData.lowSpeedTheoryTime = 0
}
}
)
// 新增：总理论时长自动计算
watch(
() => [formData.calibrateDuration, formData.highSpeedTheoryTime, formData.lowSpeedTheoryTime],
([calibrateDuration, highSpeedTheoryTime, lowSpeedTheoryTime]) => {
formData.totalTheoryTime = Number(((calibrateDuration / 60) + highSpeedTheoryTime + lowSpeedTheoryTime).toFixed(2))
}
)
function resetForm() {
formRef.value?.resetFields()
Object.assign(formData, {
@ -295,6 +366,14 @@ async function open(row?: any) {
async function handleSubmit() {
if (!formRef.value) return
// 新增：补料占总量百分比之和校验
const sum = Number(formData.calibrateVolumePercent) + Number(formData.highSpeedVolumePercent) + Number(formData.lowSpeedVolumePercent)
if (sum !== 100) {
ElMessage.warning('补料占总量百分比之和必须等于100！')
return
}
await formRef.value.validate(async (valid: boolean) => {
if (!valid) return
loading.value = true
@ -335,7 +414,7 @@ defineExpose({ open })
<style scoped>
.group-card {
margin-bottom: 24px;
margin-bottom: 15px;
border-radius: 10px;
box-shadow: 0 2px 12px #f0f1f2;
background: #fff;
@ -369,4 +448,31 @@ defineExpose({ open })
margin-bottom: 16px;
}
}
.ant-card::before, .ant-card::after,
.el-card::before, .el-card::after {
border: none !important;
box-shadow: none !important;
}
/* 针对所有 input、select、textarea */
form input,
form select,
form textarea {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* 针对常见UI库的表单项容器 */
.ant-input, .el-input__inner, .n-input__input {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* 针对分组容器 */
.ant-card, .el-card, .card, .fieldset, .form-group {
border: none !important;
box-shadow: none !important;
}
</style>

6
src/views/admin/feedingconfig/index.vue
View File

@ -53,7 +53,7 @@
<el-tag type="info" v-else>三段式</el-tag>
</template>
</el-table-column>
<el-table-column prop="feedTime" label="补料时长(s)" min-width="100" show-overflow-tooltip />
<el-table-column prop="feedTime" label="补料时长" min-width="100" show-overflow-tooltip />
<el-table-column prop="calibrateDuration" label="校准阶段时长/s" min-width="120" show-overflow-tooltip />
<el-table-column prop="calibrateVolumePercent" label="校准阶段补料占总量百分比/%" min-width="180" show-overflow-tooltip />
<el-table-column prop="highSpeedPercent" label="高速阶段泵速比例/%" min-width="140" show-overflow-tooltip />
@ -101,7 +101,7 @@
</div>
</el-card>
<feeding-config-form ref="formRef" @success="handleSuccess" :model-value="false" title="补料配置" />
<feeding-config-form ref="formRef" @success="handleSuccess" :model-value="false" title="泵速策略" />
</MyLayout>
</template>
@ -198,7 +198,7 @@ const handleEdit = (row: FeedingConfigGetPageOutput) => {
}
const handleDelete = (row: FeedingConfigGetPageOutput) => {
ElMessageBox.confirm('确认要删除该策略吗？', '提示', {
ElMessageBox.confirm('确认要删除该泵速策略吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'