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

add 补糖规则

Browse Source
This commit is contained in:
Asoka.Wang 2025-06-18 17:29:53 +08:00
parent 915ca512f5
commit 790f31dc1d
3 changed files with 149 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/admin/enum-contracts.ts
View File

@ -136,3 +136,13 @@ export const EnumFeedingType = {
Percentage: { name: 'Percentage', value: 1, desc: '百分比' },
Volume: { name: 'Volume', value: 2, desc: '体积' },
}
export const EnumFeedingOperator = {
LessThan: { name: '<', value: 1, desc: '<' },
GreaterThan: { name: '<=', value: 2, desc: '<=' },
}
export const EnumFeedingCalculationMode = {
Add: { name: '残糖', value: 1, desc: '残糖' },
Subtract: { name: '残糖和乳酸', value: 3, desc: '残糖和乳酸' },
}

193
src/views/admin/template/components/culture-protocol-form.vue
View File

@ -116,17 +116,24 @@
:label="`${pump.feedingPumpName}${pump.mediumName ? ' / ' + pump.mediumName : ''}`"
:name="String(pump.feedingPumpNo)">
<div style="text-align: left; margin-bottom: 6px;">
<el-button type="primary" icon="ele-Plus" @click="addTaskByPump(pump.feedingPumpNo)">添加任务</el-button>
<el-button type="primary" icon="ele-Plus"
@click="addTaskByPump(pump.feedingPumpNo)">添加任务</el-button>
</div>
<el-table :data="getTasksByPumpNo(pump.feedingPumpNo)" border stripe size="small"
style="width: 100%; margin-bottom: 10px; border-radius: 8px; box-shadow: 0 2px 8px #e0e7ef; overflow: hidden; max-height: 400px;"
class="pretty-table" :height="400">
<el-table-column label="天数" prop="day" width="200" align="center" header-align="center">
<template #default="scope">
<div style="display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px;">
<el-input-number v-model="scope.row.day" :min="1" style="width: 190px; height: 28px;" placeholder="天数" />
<el-button size="mini" type="primary" style="padding: 0 8px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 13px;" @click="addDayCopy(scope.row, pump.feedingPumpNo)">
<el-icon style="margin-right:2px;"><Plus /></el-icon>
<div
style="display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px;">
<el-input-number v-model="scope.row.day" :min="1" style="width: 190px; height: 28px;"
placeholder="天数" />
<el-button size="mini" type="primary"
style="padding: 0 8px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 13px;"
@click="addDayCopy(scope.row, pump.feedingPumpNo)">
<el-icon style="margin-right:2px;">
<Plus />
</el-icon>
</el-button>
</div>
</template>
@ -135,10 +142,15 @@
header-align="center">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 4px; justify-content: center;">
<el-time-picker v-model="scope.row.feedingTime" format="HH:mm:ss" style="width: 100%;" placeholder="补料时间" />
<el-time-picker v-model="scope.row.feedingTime" format="HH:mm:ss" style="width: 100%;"
placeholder="补料时间" />
<el-tooltip content="将当前时间批量赋值给本泵所有任务" placement="top">
<el-button size="mini" style="padding: 0 6px; height: 28px; display: flex; align-items: center; justify-content: center;" @click="pasteFeedingTime(scope.row, pump.feedingPumpNo)">
<el-icon><DocumentCopy /></el-icon>
<el-button size="mini"
style="padding: 0 6px; height: 28px; display: flex; align-items: center; justify-content: center;"
@click="pasteFeedingTime(scope.row, pump.feedingPumpNo)">
<el-icon>
<DocumentCopy />
</el-icon>
</el-button>
</el-tooltip>
</div>
@ -150,12 +162,16 @@
<div style="display: flex; align-items: center; gap: 4px; justify-content: center;">
<el-select v-model="scope.row.feedingType" placeholder="请选择补料类型" clearable style="width: 100%"
@change="handleFeedingTypeChange(scope.row, $event)">
<el-option v-for="item in state.feedingTypeOptions" :key="item.value"
:label="item.label" :value="item.value" />
<el-option v-for="item in state.feedingTypeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<el-tooltip content="将当前类型批量赋值给本泵所有任务" placement="top">
<el-button size="mini" style="padding: 0 6px; height: 28px; display: flex; align-items: center;" @click="pasteFeedingType(scope.row, pump.feedingPumpNo)">
<el-icon><DocumentCopy /></el-icon>
<el-button size="mini"
style="padding: 0 6px; height: 28px; display: flex; align-items: center;"
@click="pasteFeedingType(scope.row, pump.feedingPumpNo)">
<el-icon>
<DocumentCopy />
</el-icon>
</el-button>
</el-tooltip>
</div>
@ -166,12 +182,15 @@
header-align="center">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 4px; justify-content: center;">
<el-input-number v-model="scope.row.feedingVolume"
v-bind="getFeedingVolumeProps(scope.row)"
<el-input-number v-model="scope.row.feedingVolume" v-bind="getFeedingVolumeProps(scope.row)"
style="width: 100%" placeholder="补料体积" />
<el-tooltip content="将当前体积批量赋值给本泵所有任务" placement="top">
<el-button size="mini" style="padding: 0 6px; height: 28px; display: flex; align-items: center;" @click="pasteFeedingVolume(scope.row, pump.feedingPumpNo)">
<el-icon><DocumentCopy /></el-icon>
<el-button size="mini"
style="padding: 0 6px; height: 28px; display: flex; align-items: center;"
@click="pasteFeedingVolume(scope.row, pump.feedingPumpNo)">
<el-icon>
<DocumentCopy />
</el-icon>
</el-button>
</el-tooltip>
</div>
@ -197,41 +216,74 @@
<!-- 自动葡萄糖补料规则 -->
<el-tab-pane label="自动葡萄糖补料规则" name="glucose">
<div class="form-section">
<div v-for="(rule, index) in form.autoGlucoseFeedingRules" :key="index" class="rule-item">
<el-row :gutter="25">
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
<el-form-item :label="index === 0 ? '培养开始天数' : ''"
:prop="'autoGlucoseFeedingRules.' + index + '.cultureDayStarting'">
<el-input-number v-model="rule.cultureDayStarting" :min="0" style="width: 100%"
<template v-if="hasGlucosePump">
<div style="text-align: left; margin-bottom: 6px;">
<el-button type="primary" icon="ele-Plus" @click="addRule">添加规则</el-button>
</div>
<el-table :data="form.autoGlucoseFeedingRules" border stripe size="small"
style="width: 100%; margin-bottom: 10px; border-radius: 8px; box-shadow: 0 2px 8px #e0e7ef; overflow: hidden;"
class="pretty-table">
<el-table-column label="培养天数(开始)" prop="cultureDayStarting" min-width="120" align="center"
header-align="center">
<template #default="scope">
<el-input-number v-model="scope.row.cultureDayStarting" :min="0" style="width: 100%"
placeholder="开始天数" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
<el-form-item :label="index === 0 ? '培养结束天数' : ''"
:prop="'autoGlucoseFeedingRules.' + index + '.cultureDayEnding'">
<el-input-number v-model="rule.cultureDayEnding" :min="0" style="width: 100%"
</template>
</el-table-column>
<el-table-column label="培养天数(结束)" prop="cultureDayEnding" min-width="120" align="center"
header-align="center">
<template #default="scope">
<el-input-number v-model="scope.row.cultureDayEnding" :min="0" style="width: 100%"
placeholder="结束天数" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
<el-form-item :label="index === 0 ? '下限值' : ''"
:prop="'autoGlucoseFeedingRules.' + index + '.lowerLimit'">
<el-input-number v-model="rule.lowerLimit" :min="0" :precision="2" style="width: 100%"
</template>
</el-table-column>
<el-table-column label="下限操作符" prop="lowerLimitOperator" min-width="120" align="center"
header-align="center">
<template #default="scope">
<el-select v-model="scope.row.lowerLimitOperator" placeholder="请选择下限操作符" clearable
style="width: 100%">
<el-option v-for="item in state.feedingOperatorOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</template>
</el-table-column>
<el-table-column label="糖下限 (g/L)" prop="lowerLimit" min-width="120" align="center"
header-align="center">
<template #default="scope">
<el-input-number v-model="scope.row.lowerLimit" :min="0" :precision="2" style="width: 100%"
placeholder="下限值" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
<el-form-item :label="index === 0 ? '补料目标值' : ''"
:prop="'autoGlucoseFeedingRules.' + index + '.feedingTo'">
<el-input-number v-model="rule.feedingTo" :min="0" :precision="2" style="width: 100%"
</template>
</el-table-column>
<el-table-column label="糖补料至 (g/L)" prop="feedingTo" min-width="120" align="center"
header-align="center">
<template #default="scope">
<el-input-number v-model="scope.row.feedingTo" :min="0" :precision="2" style="width: 100%"
placeholder="目标值" />
</el-form-item>
</el-col>
</el-row>
<el-button type="danger" icon="ele-Delete" circle @click="removeRule(index)"
v-if="form.autoGlucoseFeedingRules.length > 1" />
</div>
<el-button type="primary" icon="ele-Plus" @click="addRule">添加规则</el-button>
</template>
</el-table-column>
<el-table-column label="计算模式" prop="calculationMode" min-width="120" align="center"
header-align="center">
<template #default="scope">
<el-select v-model="scope.row.calculationMode" placeholder="请选择计算模式" clearable
style="width: 100%">
<el-option v-for="item in state.feedingCalculationModeOptions" :key="item.value"
:label="item.label" :value="item.value" />
</el-select>
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center" header-align="center">
<template #default="scope">
<el-button type="danger" icon="ele-Delete" circle size="mini" @click="removeRule(scope.$index)"
v-if="form.autoGlucoseFeedingRules.length > 1" class="pretty-delete-btn" />
</template>
</el-table-column>
<template #empty>
<div style="text-align:center;color:#bbb;padding:20px 0;">暂无规则</div>
</template>
</el-table>
</template>
<div v-else style="color:#bbb;text-align:center;padding:30px 0;">请先在"固定补料泵"选择糖补料培养基</div>
</div>
</el-tab-pane>
</el-tabs>
@ -258,7 +310,7 @@ import { UspFeedingConfigApi } from '/@/api/admin/UspFeedingConfigApi'
import type { CultureProtocolDto } from '/@/api/types/cultureprotocol'
import { ElMessageBox, ElMessage } from 'element-plus'
import { toOptionsByValue } from '/@/utils/enum'
import { EnumFeedingType } from '/@/api/admin/enum-contracts'
import { EnumFeedingType, EnumFeedingOperator, EnumFeedingCalculationMode } from '/@/api/admin/enum-contracts'
import { DocumentCopy, Plus } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance() as any
@ -303,7 +355,9 @@ const state = reactive({
cellTypeOptions: [],
configOptions: [] as Array<{ id: number; name: string; isTwo: number; }>,
selectedReactor: null as any,
feedingTypeOptions: toOptionsByValue(EnumFeedingType)
feedingTypeOptions: toOptionsByValue(EnumFeedingType),
feedingOperatorOptions: toOptionsByValue(EnumFeedingOperator),
feedingCalculationModeOptions: toOptionsByValue(EnumFeedingCalculationMode)
})
const { form } = toRefs(state)
@ -325,6 +379,11 @@ const feedingPumpTabs = computed(() => {
})
})
// 添加判断是否存在糖补料的计算属性
const hasGlucosePump = computed(() => {
return state.form.fixedFeedingPumps.some(pump => pump.isGlucose)
})
watch(
() => feedingPumpTabs.value,
(tabs) => {
@ -481,7 +540,7 @@ const addRule = () => {
lowerLimit: 0,
feedingTo: 0,
lowerLimitOperator: '',
calculationMode: 0
calculationMode: 1
})
}
@ -499,11 +558,14 @@ const handleTabClick = async (tab: any, event: any) => {
activeTab.value = lastActiveTab.value
return
}
// 检查液体选择是否正确
lastActiveTab.value = tab.paneName
}
else if (lastActiveTab.value == 'glucose') {
if (!checkGlucose()) {
await nextTick()
activeTab.value = lastActiveTab.value
return
}
}
else {
lastActiveTab.value = tab.paneName
@ -539,6 +601,29 @@ const checkPumps = () => {
return valid
}
const checkGlucose = () => {
let valid = true
state.form.autoGlucoseFeedingRules.forEach(rule => {
if (rule.cultureDayStarting > rule.cultureDayEnding) {
valid = false
proxy.$modal.msgError('培养天数(开始)不能大于培养天数(结束)')
}
})
// 校验培养天数 (开始)和培养天数 (结束)是否存在重叠
const rules = state.form.autoGlucoseFeedingRules
for (let i = 0; i < rules.length; i++) {
for (let j = i + 1; j < rules.length; j++) {
if (rules[i].cultureDayStarting < rules[j].cultureDayEnding && rules[i].cultureDayEnding > rules[j].cultureDayStarting) {
valid = false
proxy.$modal.msgError('培养天数(开始)和培养天数(结束)存在重叠')
}
return valid
}
}
return valid
}
// 提交表单
const onSure = async () => {
if (!formRef.value) return

207
页面开发数据模板.md
View File

@ -1,207 +0,0 @@
# 页面开发指南
## 路由配置
1. 路由参数
```typescript
// 路由定义
{
path: '/admin/device',
name: 'admin/device',
component: () => import('/@/views/admin/device/index.vue'),
meta: {
title: '设备管理',
icon: 'ele-Setting',
roles: ['admin']
}
}
```
2. 权限控制
```typescript
// 按钮权限
v-auth="'api:admin:device:add'" // 新增权限
v-auth="'api:admin:device:update'" // 修改权限
v-auth="'api:admin:device:soft-delete'" // 删除权限
```
## 数据结构
1. 列表查询参数
```typescript
interface PageInput {
currentPage: number
pageSize: number
filter: {
keyWord?: string
startTime?: string
endTime?: string
}
}
```
2. 表单数据结构
```typescript
interface FormData {
id?: number
deviceNo: string
assetNo?: string
ip: string
port: string
serviceName?: string
status: boolean
}
```
3. API 接口
```typescript
// 列表接口
GET /api/admin/device/get-page
// 详情接口
GET /api/admin/device/get
// 新增接口
POST /api/admin/device/add
// 修改接口
PUT /api/admin/device/update
// 删除接口
DELETE /api/admin/device/soft-delete
```
## 页面结构
1. 列表页面
- 搜索区域：关键词搜索
- 操作按钮：新增、查询
- 表格区域：基础字段展示
- 分页区域：标准分页组件
2. 编辑页面
- 基本信息模块
- 网络配置模块
- 设备配置模块
## 样式规范
1. 对话框配置
```html
<el-dialog
v-model="state.showDialog"
destroy-on-close
:title="title"
draggable
:close-on-click-modal="false"
:close-on-press-escape="false"
width="900px"
>
```
2. 表单布局
```html
<el-form :model="form" ref="formRef" size="default" label-width="120px">
<div class="form-section">
<div class="section-title">模块标题</div>
<el-row :gutter="25">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="字段名称" prop="fieldName">
<el-input v-model="form.fieldName" clearable placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
```
3. 样式定义
```scss
.form-section {
margin-bottom: 24px;
&:last-child { margin-bottom: 0; }
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #f0f0f0;
position: relative;
&:before {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 40px;
height: 2px;
background: #409eff;
}
}
```
## 开发规范
1. 组件命名
- 目录：小写字母，用横线分隔
- 组件：PascalCase
- 组合函数：camelCase
2. 代码组织
```typescript
// 1. 导入声明
import { reactive, ref } from 'vue'
// 2. 类型定义
interface State {
showDialog: boolean
form: FormData
}
// 3. 组件定义
const props = defineProps({
title: String
})
// 4. 状态定义
const state = reactive<State>({
showDialog: false,
form: {}
})
// 5. 方法定义
const handleSubmit = async () => {
// 处理逻辑
}
```
3. 表单验证
```typescript
const rules = {
fieldName: [
{ required: true, message: '请输入', trigger: ['blur', 'change'] }
]
}
```
4. API 调用
```typescript
const handleSave = async () => {
try {
const res = await api.save(state.form)
if (res.success) {
ElMessage.success('保存成功')
emit('refresh')
state.showDialog = false
}
} catch (error) {
console.error(error)
}
}
```
## 注意事项
1. 保持与 uspscale 页面风格一致
2. 使用响应式布局适配不同屏幕
3. 统一表单验证规则和错误提示
4. 优化用户交互体验
5. 保持代码风格统一
6. 注意性能优化
7. 遵循 TypeScript 类型规范