feat(ui): 重构全局模型参数配置页面
This commit is contained in:
@@ -1,194 +1,210 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 顶部标题 -->
|
||||
<div class="header">
|
||||
<span class="title">模型参数管理</span>
|
||||
<div class="param-config-container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h2>全局模型参数管理</h2>
|
||||
</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 class="model-cards-container">
|
||||
<div
|
||||
v-for="model in modelGroups"
|
||||
:key="model.modelCode"
|
||||
class="model-card"
|
||||
>
|
||||
<!-- 模型标题 -->
|
||||
<div class="model-header">
|
||||
<h3>{{ model.modelName }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- 参数表格 -->
|
||||
<el-table :data="model.params" 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(model.modelCode, row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" prop="paramUnit" width="120" />
|
||||
</el-table>
|
||||
</div>
|
||||
</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">
|
||||
保存配置
|
||||
<!-- 统一保存按钮 -->
|
||||
<div class="button-section">
|
||||
<el-button type="primary" @click="handleSaveAll" :loading="saving">
|
||||
保存所有修改
|
||||
</el-button>
|
||||
<span v-if="modifiedCount > 0" class="modified-tip">
|
||||
已修改 {{ modifiedCount }} 个参数
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {listModels, listParams, saveParams} from "@/api/ccdi/modelParam";
|
||||
import { listAllParams, saveAllParams } from "@/api/ccdi/modelParam";
|
||||
|
||||
export default {
|
||||
name: "ModelParam",
|
||||
data() {
|
||||
return {
|
||||
// 模型列表
|
||||
modelList: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
modelCode: undefined,
|
||||
projectId: 0, // 默认查询系统级参数
|
||||
},
|
||||
// 参数列表
|
||||
paramList: [],
|
||||
// 保存中状态
|
||||
saving: false,
|
||||
// 模型参数数据（按模型分组）
|
||||
modelGroups: [],
|
||||
// 修改记录（记录哪些参数被修改过）
|
||||
modifiedParams: new Map(),
|
||||
// 保存状态
|
||||
saving: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
/** 计算已修改参数数量 */
|
||||
modifiedCount() {
|
||||
let count = 0;
|
||||
this.modifiedParams.forEach(params => {
|
||||
count += params.size;
|
||||
});
|
||||
return count;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getModelList();
|
||||
this.loadAllParams();
|
||||
},
|
||||
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;
|
||||
/** 加载所有模型参数 */
|
||||
async loadAllParams() {
|
||||
try {
|
||||
const res = await listAllParams({ projectId: 0 });
|
||||
this.modelGroups = res.data.models;
|
||||
// 清空修改记录
|
||||
this.modifiedParams.clear();
|
||||
} catch (error) {
|
||||
this.$message.error('加载参数失败：' + error.message);
|
||||
console.error('加载参数失败', error);
|
||||
}
|
||||
listParams(this.queryParams).then((response) => {
|
||||
this.paramList = response.data;
|
||||
});
|
||||
},
|
||||
|
||||
/** 标记参数为已修改 */
|
||||
markAsModified(row) {
|
||||
row.modified = true;
|
||||
markAsModified(modelCode, row) {
|
||||
if (!this.modifiedParams.has(modelCode)) {
|
||||
this.modifiedParams.set(modelCode, new Set());
|
||||
}
|
||||
this.modifiedParams.get(modelCode).add(row.paramCode);
|
||||
},
|
||||
/** 保存配置 */
|
||||
handleSave() {
|
||||
if (!this.queryParams.modelCode) {
|
||||
this.$message.warning("请选择模型");
|
||||
return;
|
||||
}
|
||||
|
||||
// 只保存修改过的参数值
|
||||
const modifiedParams = this.paramList.filter((item) => item.modified);
|
||||
if (modifiedParams.length === 0) {
|
||||
this.$message.info("没有需要保存的修改");
|
||||
|
||||
/** 保存所有修改 */
|
||||
async handleSaveAll() {
|
||||
// 验证是否有修改
|
||||
if (this.modifiedCount === 0) {
|
||||
this.$message.info('没有需要保存的修改');
|
||||
return;
|
||||
}
|
||||
|
||||
// 构造保存数据（只包含修改过的参数）
|
||||
const saveDTO = {
|
||||
projectId: this.queryParams.projectId,
|
||||
modelCode: this.queryParams.modelCode,
|
||||
params: modifiedParams.map((item) => ({
|
||||
paramCode: item.paramCode,
|
||||
paramValue: item.paramValue,
|
||||
})),
|
||||
projectId: 0,
|
||||
models: []
|
||||
};
|
||||
|
||||
this.saving = true;
|
||||
saveParams(saveDTO)
|
||||
.then((response) => {
|
||||
this.$modal.msgSuccess("保存成功");
|
||||
// 清除修改标记
|
||||
this.paramList.forEach((item) => {
|
||||
item.modified = false;
|
||||
this.modifiedParams.forEach((paramCodes, modelCode) => {
|
||||
const modelGroup = this.modelGroups.find(m => m.modelCode === modelCode);
|
||||
const modifiedParamList = modelGroup.params
|
||||
.filter(p => paramCodes.has(p.paramCode))
|
||||
.map(p => ({
|
||||
paramCode: p.paramCode,
|
||||
paramValue: p.paramValue
|
||||
}));
|
||||
|
||||
if (modifiedParamList.length > 0) {
|
||||
saveDTO.models.push({
|
||||
modelCode: modelCode,
|
||||
params: modifiedParamList
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
this.saving = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
// 保存
|
||||
this.saving = true;
|
||||
try {
|
||||
await saveAllParams(saveDTO);
|
||||
this.$modal.msgSuccess('保存成功');
|
||||
// 清空修改记录并重新加载
|
||||
this.modifiedParams.clear();
|
||||
await this.loadAllParams();
|
||||
} catch (error) {
|
||||
if (error.response && error.response.data && error.response.data.msg) {
|
||||
this.$message.error('保存失败：' + error.response.data.msg);
|
||||
} else {
|
||||
this.$message.error('保存失败：' + error.message);
|
||||
}
|
||||
console.error('保存失败', error);
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
.param-config-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
.title {
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
.model-cards-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
.model-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e4e7ed;
|
||||
|
||||
.table-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 0 0 15px 0;
|
||||
.model-header {
|
||||
margin-bottom: 15px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-container {
|
||||
.button-section {
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
|
||||
.modified-tip {
|
||||
margin-left: 15px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user