550 lines
12 KiB
Markdown
550 lines
12 KiB
Markdown
# 模型参数配置功能 - 前端代码开发
|
|
|
|
## 任务概述
|
|
|
|
**任务编号:** 04
|
|
**任务名称:** 前端代码开发
|
|
**前置任务:** 03-后端功能测试
|
|
**预计工时:** 2小时
|
|
|
|
## 任务目标
|
|
|
|
开发模型参数配置功能的前端页面,包括 API 请求文件和 Vue 页面组件,实现模型选择、参数查询、参数修改、保存配置等功能。
|
|
|
|
---
|
|
|
|
## 开发步骤
|
|
|
|
### 1. 创建 API 文件
|
|
|
|
#### 1.1 创建 API 目录
|
|
|
|
```
|
|
ruoyi-ui/src/api/
|
|
└── ccdi/
|
|
```
|
|
|
|
#### 1.2 编写 API 文件
|
|
|
|
**文件路径:** `ruoyi-ui/src/api/ccdi/modelParam.js`
|
|
|
|
```javascript
|
|
import request from '@/utils/request'
|
|
|
|
/**
|
|
* 查询模型列表
|
|
* @param {Object} query - 查询参数
|
|
* @param {Number} query.projectId - 项目ID
|
|
*/
|
|
export function listModels(query) {
|
|
return request({
|
|
url: '/ccdi/modelParam/modelList',
|
|
method: 'get',
|
|
params: query
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 查询模型参数列表
|
|
* @param {Object} query - 查询参数
|
|
* @param {Number} query.projectId - 项目ID
|
|
* @param {String} query.modelCode - 模型编码
|
|
*/
|
|
export function listParams(query) {
|
|
return request({
|
|
url: '/ccdi/modelParam/list',
|
|
method: 'get',
|
|
params: query
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 保存模型参数
|
|
* @param {Object} data - 保存数据
|
|
*/
|
|
export function saveParams(data) {
|
|
return request({
|
|
url: '/ccdi/modelParam/save',
|
|
method: 'post',
|
|
data: data
|
|
})
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### 2. 创建页面组件
|
|
|
|
#### 2.1 创建页面目录
|
|
|
|
```
|
|
ruoyi-ui/src/views/
|
|
└── ccdi/
|
|
└── modelParam/
|
|
```
|
|
|
|
#### 2.2 编写页面组件
|
|
|
|
**文件路径:** `ruoyi-ui/src/views/ccdi/modelParam/index.vue`
|
|
|
|
```vue
|
|
<template>
|
|
<div class="app-container">
|
|
<!-- 顶部标题 -->
|
|
<div class="header">
|
|
<span class="title">模型参数管理</span>
|
|
<router-link :to="{ path: '/project/manage' }" class="link">
|
|
<i class="el-icon-arrow-left"></i> 返回项目管理
|
|
</router-link>
|
|
</div>
|
|
|
|
<!-- 查询筛选区 -->
|
|
<div class="filter-container">
|
|
<el-form :inline="true" :model="queryParams" ref="queryForm">
|
|
<el-form-item label="模型名称" prop="modelCode">
|
|
<el-select v-model="queryParams.modelCode" placeholder="请选择模型">
|
|
<el-option
|
|
v-for="model in modelList"
|
|
:key="model.modelCode"
|
|
:label="model.modelName"
|
|
:value="model.modelCode"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">
|
|
查询
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 参数配置表格 -->
|
|
<div class="table-container">
|
|
<h3 class="table-title">阈值参数配置</h3>
|
|
<el-table :data="paramList" border style="width: 100%">
|
|
<el-table-column label="监测项" prop="paramName" width="200" />
|
|
<el-table-column label="描述" prop="paramDesc" />
|
|
<el-table-column label="阈值设置" width="200">
|
|
<template #default="{ row }">
|
|
<el-input
|
|
v-model="row.paramValue"
|
|
placeholder="请输入阈值"
|
|
@input="markAsModified(row)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="单位" prop="paramUnit" width="120" />
|
|
</el-table>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="button-container">
|
|
<el-button type="primary" @click="handleSave" :loading="saving">
|
|
保存配置
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listModels, listParams, saveParams } from "@/api/ccdi/modelParam";
|
|
|
|
export default {
|
|
name: "ModelParam",
|
|
data() {
|
|
return {
|
|
// 模型列表
|
|
modelList: [],
|
|
// 查询参数
|
|
queryParams: {
|
|
modelCode: undefined,
|
|
projectId: 0, // 默认查询系统级参数
|
|
},
|
|
// 参数列表
|
|
paramList: [],
|
|
// 保存中状态
|
|
saving: false,
|
|
};
|
|
},
|
|
created() {
|
|
this.getModelList();
|
|
},
|
|
methods: {
|
|
/** 查询模型列表 */
|
|
getModelList() {
|
|
listModels({ projectId: this.queryParams.projectId }).then((response) => {
|
|
this.modelList = response.data;
|
|
if (this.modelList.length > 0) {
|
|
this.queryParams.modelCode = this.modelList[0].modelCode;
|
|
this.handleQuery();
|
|
}
|
|
});
|
|
},
|
|
/** 查询参数列表 */
|
|
handleQuery() {
|
|
if (!this.queryParams.modelCode) {
|
|
this.$message.warning("请选择模型");
|
|
return;
|
|
}
|
|
listParams(this.queryParams).then((response) => {
|
|
this.paramList = response.data;
|
|
});
|
|
},
|
|
/** 标记参数为已修改 */
|
|
markAsModified(row) {
|
|
row.modified = true;
|
|
},
|
|
/** 保存配置 */
|
|
handleSave() {
|
|
if (!this.queryParams.modelCode) {
|
|
this.$message.warning("请选择模型");
|
|
return;
|
|
}
|
|
|
|
// 只保存修改过的参数值
|
|
const modifiedParams = this.paramList.filter((item) => item.modified);
|
|
if (modifiedParams.length === 0) {
|
|
this.$message.info("没有需要保存的修改");
|
|
return;
|
|
}
|
|
|
|
const saveDTO = {
|
|
projectId: this.queryParams.projectId,
|
|
modelCode: this.queryParams.modelCode,
|
|
modelName: this.modelList.find(
|
|
(m) => m.modelCode === this.queryParams.modelCode
|
|
)?.modelName,
|
|
params: modifiedParams.map((item) => ({
|
|
paramCode: item.paramCode,
|
|
paramName: item.paramName,
|
|
paramDesc: item.paramDesc,
|
|
paramValue: item.paramValue,
|
|
paramUnit: item.paramUnit,
|
|
sortOrder: item.sortOrder,
|
|
})),
|
|
};
|
|
|
|
this.saving = true;
|
|
saveParams(saveDTO)
|
|
.then((response) => {
|
|
this.$modal.msgSuccess("保存成功");
|
|
// 清除修改标记
|
|
this.paramList.forEach((item) => {
|
|
item.modified = false;
|
|
});
|
|
})
|
|
.finally(() => {
|
|
this.saving = false;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.app-container {
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
|
|
.title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.link {
|
|
color: #1890ff;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
|
|
i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.filter-container {
|
|
padding: 15px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.table-container {
|
|
padding: 20px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
|
|
.table-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin: 0 0 15px 0;
|
|
}
|
|
}
|
|
|
|
.button-container {
|
|
padding: 15px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
---
|
|
|
|
### 3. 配置路由(可选)
|
|
|
|
如果需要独立访问路径,可以配置路由。
|
|
|
|
#### 3.1 查找路由配置文件
|
|
|
|
**文件路径:** `ruoyi-ui/src/router/index.js`
|
|
|
|
#### 3.2 添加路由配置(如需要)
|
|
|
|
```javascript
|
|
{
|
|
path: '/ccdi/modelParam',
|
|
component: Layout,
|
|
children: [
|
|
{
|
|
path: '',
|
|
name: 'ModelParam',
|
|
component: () => import('@/views/ccdi/modelParam/index'),
|
|
meta: { title: '模型参数管理', icon: 'setting' }
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
**注意:** 若依框架通常通过数据库菜单表动态生成路由,可以不配置静态路由。
|
|
|
|
---
|
|
|
|
### 4. 添加菜单(通过数据库)
|
|
|
|
#### 4.1 准备菜单数据
|
|
|
|
```sql
|
|
-- 添加模型参数管理菜单
|
|
INSERT INTO sys_menu (menu_name, parent_id, order_num, path, component, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, remark) VALUES
|
|
('模型参数管理', 0, 10, 'modelParam', 'ccdi/modelParam/index', 1, 0, 'C', '0', '0', 'ccdi:modelParam:list', 'setting', 'admin', sysdate(), '模型参数管理菜单');
|
|
```
|
|
|
|
#### 4.2 执行 SQL
|
|
|
|
```bash
|
|
mysql -h<数据库地址> -u<用户名> -p<密码> ccdi < sql/ccdi_model_param_menu.sql
|
|
```
|
|
|
|
**注意:** 具体的 parent_id 需要根据实际的父菜单ID调整。
|
|
|
|
---
|
|
|
|
### 5. 前端测试
|
|
|
|
#### 5.1 启动前端服务
|
|
|
|
```bash
|
|
cd ruoyi-ui
|
|
npm run dev
|
|
```
|
|
|
|
#### 5.2 访问页面
|
|
|
|
浏览器访问: http://localhost:80
|
|
|
|
登录后,在菜单中找到"模型参数管理"并点击。
|
|
|
|
#### 5.3 功能测试清单
|
|
|
|
**测试1: 页面加载**
|
|
|
|
- [ ] 页面正常加载,显示标题"模型参数管理"
|
|
- [ ] 模型下拉框自动加载模型列表
|
|
- [ ] 默认选中第一个模型
|
|
- [ ] 自动加载第一个模型的参数
|
|
|
|
**测试2: 模型切换**
|
|
|
|
- [ ] 切换模型下拉框选择"可疑兼职模型"
|
|
- [ ] 点击"查询"按钮
|
|
- [ ] 参数列表正确显示可疑兼职模型的参数
|
|
|
|
**测试3: 参数修改**
|
|
|
|
- [ ] 在"阈值设置"输入框中修改数值
|
|
- [ ] 只能修改阈值列,其他列只读
|
|
- [ ] 修改后可以继续编辑其他参数
|
|
|
|
**测试4: 保存配置**
|
|
|
|
- [ ] 点击"保存配置"按钮
|
|
- [ ] 按钮显示 loading 状态
|
|
- [ ] 保存成功后显示"保存成功"提示
|
|
- [ ] 页面刷新后数据已更新
|
|
|
|
**测试5: 未修改提示**
|
|
|
|
- [ ] 不修改任何参数
|
|
- [ ] 点击"保存配置"按钮
|
|
- [ ] 显示"没有需要保存的修改"提示
|
|
|
|
**测试6: 验证只能修改阈值**
|
|
|
|
- [ ] 尝试点击"监测项"、"描述"、"单位"列
|
|
- [ ] 确认这些列无法编辑
|
|
- [ ] 只有"阈值设置"列可以编辑
|
|
|
|
---
|
|
|
|
### 6. 样式调整
|
|
|
|
#### 6.1 检查页面样式
|
|
|
|
确保页面样式与设计稿一致:
|
|
|
|
- [ ] 背景色为 #f5f5f5
|
|
- [ ] 卡片背景色为 #fff
|
|
- [ ] 标题颜色为 #333
|
|
- [ ] 链接颜色为 #1890ff
|
|
- [ ] 边框圆角为 4px
|
|
- [ ] 表格边框清晰
|
|
|
|
#### 6.2 响应式适配(可选)
|
|
|
|
如需支持移动端,可以添加响应式样式:
|
|
|
|
```scss
|
|
@media screen and (max-width: 768px) {
|
|
.app-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.el-table {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 验证清单
|
|
|
|
完成以下验证后,本任务才算完成:
|
|
|
|
- [ ] API 文件创建完成
|
|
- [ ] 页面组件创建完成
|
|
- [ ] 页面可以正常访问
|
|
- [ ] 模型列表加载正常
|
|
- [ ] 参数列表查询正常
|
|
- [ ] 参数修改功能正常
|
|
- [ ] 保存配置功能正常
|
|
- [ ] 只有阈值列可编辑
|
|
- [ ] 样式与设计稿一致
|
|
- [ ] 所有功能测试通过
|
|
|
|
---
|
|
|
|
## 常见问题
|
|
|
|
### 问题1: 跨域错误
|
|
|
|
**现象:** 浏览器控制台显示 CORS 错误
|
|
|
|
**解决:**
|
|
检查 `ruoyi-ui/vue.config.js` 中的代理配置:
|
|
|
|
```javascript
|
|
proxy: {
|
|
[process.env.VUE_APP_BASE_API]: {
|
|
target: 'http://localhost:8080',
|
|
changeOrigin: true,
|
|
pathRewrite: {
|
|
['^' + process.env.VUE_APP_BASE_API]: ''
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 问题2: Token 过期
|
|
|
|
**现象:** 接口返回 401 未授权
|
|
|
|
**解决:**
|
|
重新登录获取新 Token,或清除浏览器缓存。
|
|
|
|
### 问题3: 菜单不显示
|
|
|
|
**现象:** 登录后看不到"模型参数管理"菜单
|
|
|
|
**解决:**
|
|
|
|
1. 检查菜单 SQL 是否执行成功
|
|
2. 检查当前用户是否有该菜单权限
|
|
3. 清除浏览器缓存并重新登录
|
|
|
|
---
|
|
|
|
## 优化建议(可选)
|
|
|
|
### 1. 输入验证
|
|
|
|
为阈值输入框添加数值验证:
|
|
|
|
```vue
|
|
<el-input
|
|
v-model.number="row.paramValue"
|
|
type="number"
|
|
placeholder="请输入阈值"
|
|
@input="markAsModified(row)"
|
|
/>
|
|
```
|
|
|
|
### 2. 批量修改
|
|
|
|
添加"批量修改"功能,一次性修改多个模型的参数。
|
|
|
|
### 3. 修改历史记录
|
|
|
|
显示参数的修改历史,包括修改时间、修改人、修改前后的值。
|
|
|
|
---
|
|
|
|
## 下一步
|
|
|
|
完成本任务后,整个模型参数配置功能开发完成!
|
|
|
|
**总结:**
|
|
|
|
- ✅ 后端实体类创建完成
|
|
- ✅ 后端业务逻辑开发完成
|
|
- ✅ 后端功能测试通过
|
|
- ✅ 前端代码开发完成
|
|
|
|
**功能已上线,可以进行功能验收。**
|