feat(ui): 重构全局模型参数配置页面

ruoyi-ui/src/views/ccdi/modelParam/index.vue

@@ -1,35 +1,24 @@
 <template>
-  <div class="app-container">
+  <div class="param-config-container">
-    <!-- 顶部标题 -->
+    <!-- 页面标题 -->
-    <div class="header">
+    <div class="page-header">
-      <span class="title">模型参数管理</span>
+      <h2>全局模型参数管理</h2>
     </div>
 
-    <!-- 查询筛选区 -->
+    <!-- 模型参数卡片组（垂直堆叠） -->
-    <div class="filter-container">
+    <div class="model-cards-container">
-      <el-form :inline="true" :model="queryParams" ref="queryForm">
+      <div
-        <el-form-item label="模型名称" prop="modelCode">
+        v-for="model in modelGroups"
-          <el-select v-model="queryParams.modelCode" placeholder="请选择模型">
-            <el-option
-              v-for="model in modelList"
         :key="model.modelCode"
-              :label="model.modelName"
+        class="model-card"
-              :value="model.modelCode"
+      >
-            />
+        <!-- 模型标题 -->
-          </el-select>
+        <div class="model-header">
-        </el-form-item>
+          <h3>{{ model.modelName }}</h3>
-        <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">
+        <el-table :data="model.params" border style="width: 100%">
-      <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">
@@ -37,158 +26,185 @@
               <el-input
                 v-model="row.paramValue"
                 placeholder="请输入阈值"
-              @input="markAsModified(row)"
+                @input="markAsModified(model.modelCode, row)"
               />
             </template>
           </el-table-column>
           <el-table-column label="单位" prop="paramUnit" width="120" />
         </el-table>
       </div>
+    </div>
 
-    <!-- 操作按钮 -->
+    <!-- 统一保存按钮 -->
-    <div class="button-container">
+    <div class="button-section">
-      <el-button type="primary" @click="handleSave" :loading="saving">
+      <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: [],
+      modelGroups: [],
-      // 查询参数
+      // 修改记录（记录哪些参数被修改过）
-      queryParams: {
+      modifiedParams: new Map(),
-        modelCode: undefined,
+      // 保存状态
-        projectId: 0, // 默认查询系统级参数
+      saving: false
-      },
-      // 参数列表
-      paramList: [],
-      // 保存中状态
-      saving: false,
     };
   },
+  computed: {
+    /** 计算已修改参数数量 */
+    modifiedCount() {
+      let count = 0;
+      this.modifiedParams.forEach(params => {
+        count += params.size;
+      });
+      return count;
+    }
+  },
   created() {
-    this.getModelList();
+    this.loadAllParams();
   },
   methods: {
-    /** 查询模型列表 */
+    /** 加载所有模型参数 */
-    getModelList() {
+    async loadAllParams() {
-      listModels({ projectId: this.queryParams.projectId }).then((response) => {
+      try {
-        this.modelList = response.data;
+        const res = await listAllParams({ projectId: 0 });
-        if (this.modelList.length > 0) {
+        this.modelGroups = res.data.models;
-          this.queryParams.modelCode = this.modelList[0].modelCode;
+        // 清空修改记录
-          this.handleQuery();
+        this.modifiedParams.clear();
+      } catch (error) {
+        this.$message.error('加载参数失败：' + error.message);
+        console.error('加载参数失败', error);
       }
-      });
-    },
-    /** 查询参数列表 */
-    handleQuery() {
-      if (!this.queryParams.modelCode) {
-        this.$message.warning("请选择模型");
-        return;
-      }
-      listParams(this.queryParams).then((response) => {
-        this.paramList = response.data;
-      });
     },
+
     /** 标记参数为已修改 */
-    markAsModified(row) {
+    markAsModified(modelCode, row) {
-      row.modified = true;
+      if (!this.modifiedParams.has(modelCode)) {
+        this.modifiedParams.set(modelCode, new Set());
+      }
+      this.modifiedParams.get(modelCode).add(row.paramCode);
     },
-    /** 保存配置 */
+
-    handleSave() {
+    /** 保存所有修改 */
-      if (!this.queryParams.modelCode) {
+    async handleSaveAll() {
-        this.$message.warning("请选择模型");
+      // 验证是否有修改
-        return;
+      if (this.modifiedCount === 0) {
-      }
+        this.$message.info('没有需要保存的修改');
-
-      // 只保存修改过的参数值
-      const modifiedParams = this.paramList.filter((item) => item.modified);
-      if (modifiedParams.length === 0) {
-        this.$message.info("没有需要保存的修改");
         return;
       }
 
+      // 构造保存数据（只包含修改过的参数）
       const saveDTO = {
-        projectId: this.queryParams.projectId,
+        projectId: 0,
-        modelCode: this.queryParams.modelCode,
+        models: []
-        params: modifiedParams.map((item) => ({
-          paramCode: item.paramCode,
-          paramValue: item.paramValue,
-        })),
       };
 
+      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
+          });
+        }
+      });
+
+      // 保存
       this.saving = true;
-      saveParams(saveDTO)
+      try {
-        .then((response) => {
+        await saveAllParams(saveDTO);
-          this.$modal.msgSuccess("保存成功");
+        this.$modal.msgSuccess('保存成功');
-          // 清除修改标记
+        // 清空修改记录并重新加载
-          this.paramList.forEach((item) => {
+        this.modifiedParams.clear();
-            item.modified = false;
+        await this.loadAllParams();
-          });
+      } catch (error) {
-        })
+        if (error.response && error.response.data && error.response.data.msg) {
-        .finally(() => {
+          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 {
+.page-header {
-  display: flex;
-  align-items: center;
   margin-bottom: 20px;
   padding: 15px;
   background: #fff;
   border-radius: 4px;
 
-  .title {
+  h2 {
     font-size: 18px;
     font-weight: bold;
     color: #333;
+    margin: 0;
   }
 }
 
-.filter-container {
+.model-cards-container {
-  padding: 15px;
-  background: #fff;
-  border-radius: 4px;
   margin-bottom: 20px;
 }
 
-.table-container {
+.model-card {
-  padding: 20px;
   background: #fff;
   border-radius: 4px;
+  padding: 20px;
   margin-bottom: 20px;
+  border: 1px solid #e4e7ed;
 
-  .table-title {
+  .model-header {
+    margin-bottom: 15px;
+
+    h3 {
       font-size: 16px;
       font-weight: bold;
       color: #333;
-    margin: 0 0 15px 0;
+      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>