参数配置
This commit is contained in:
549
doc/参数配置功能/04-前端代码开发.md
Normal file
549
doc/参数配置功能/04-前端代码开发.md
Normal file
@@ -0,0 +1,549 @@
|
||||
# 模型参数配置功能 - 前端代码开发
|
||||
|
||||
## 任务概述
|
||||
|
||||
**任务编号:** 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. 修改历史记录
|
||||
|
||||
显示参数的修改历史,包括修改时间、修改人、修改前后的值。
|
||||
|
||||
---
|
||||
|
||||
## 下一步
|
||||
|
||||
完成本任务后,整个模型参数配置功能开发完成!
|
||||
|
||||
**总结:**
|
||||
|
||||
- ✅ 后端实体类创建完成
|
||||
- ✅ 后端业务逻辑开发完成
|
||||
- ✅ 后端功能测试通过
|
||||
- ✅ 前端代码开发完成
|
||||
|
||||
**功能已上线,可以进行功能验收。**
|
||||
Reference in New Issue
Block a user