Jelajahi Sumber

811气动初始化,选项保存

tangjunhao 1 bulan lalu
induk
melakukan
a15972c896

+ 25 - 0
src/store/valoptions.js

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useValOptionsStore = defineStore('valoptions', () => {
+  // 初始化为空对象,用来存储 { valCodeType: rows[] }
+  const valOptionsMap = ref({});
+
+  // 设置整个 dataMap
+  const setValOptionsMap = (map) => {
+    valOptionsMap.value = map;
+  }
+
+  // 清空
+  const clearValOptionsMap = () => {
+    valOptionsMap.value = {};
+  }
+  
+  return {
+    valOptionsMap,
+    setValOptionsMap,
+    clearValOptionsMap,
+  }
+}, {
+  persist: true, // 启用持久化
+})

+ 60 - 15
src/views/mainContent/index.vue

@@ -7,10 +7,10 @@
             <ex-design :exDatajson="oneData"/>
           </div>
           <div class="left-2">
-            <agent-model />
+            <agent-model :amDatajson="twoData"/>
           </div>
           <div class="left-3">
-            <op-algorithm />
+            <op-algorithm :oaDatajson="thirdData"/>
           </div>
           <div class="left-4">
             <op-run />
@@ -19,7 +19,7 @@
         <el-main></el-main>
         <el-aside class="rightaside">
           <div class="right-1">
-            <op-problem />
+            <op-problem :opDatajson="fourData" :runtype="type"/>
           </div>
           <div class="right-2">
             <analyze-work />
@@ -47,8 +47,10 @@ import analyzeWork from './rightaside/analyzeWork.vue';
 import opProblem from './rightaside/opProblem.vue';
 
 import { useProjectStore } from '@/store/project'
+import { useValOptionsStore } from '@/store/valoptions'
 
 const projectStore = useProjectStore()
+const valOptionsStore = useValOptionsStore()
 
 const pid = computed(() => projectStore.pid)
 const type = ref(0)
@@ -59,6 +61,8 @@ const oneData = ref()
 const twoData = ref()
 const thirdData = ref()
 const fourData = ref()
+const valType1Items = ref()
+
 
 const getProjectInit = () => {
   const params = {
@@ -76,28 +80,69 @@ const getProjectInit = () => {
       thirdData.value = projectInitJson.value[2];
       fourData.value = projectInitJson.value[3];
 
+      valType1Items.value = findValType1Items(projectInitJson.value);
+      // 去重
+      const valCodeTypes = [
+        ...new Set(
+          valType1Items.value
+            .filter(item => item?.valCodeType)
+            .map(item => item.valCodeType)
+        )
+      ];
+      console.log('valCodeTypes:', valCodeTypes);
+      Promise.all(
+        valCodeTypes.map(async (valCodeType) => {
+          const rows = await getValTypeOptions(valCodeType);
+          return { valCodeType, rows };
+        })
+      )
+      .then(results => {
+        const dataMap = Object.fromEntries(results.map(item => [item.valCodeType, item.rows]));
+        console.log("映射结果 dataMap:", dataMap);
+        valOptionsStore.setValOptionsMap(dataMap);
+      })
+      .catch(err => {
+        ElMessage.error(err.returnMsg || "选项初始化失败");
+        console.log(err);
+      });
+
+      console.log('xuanxiang',valType1Items);
+
       // console.log(oneData.value);
     })
     .catch((err) => {
       ElMessage.error(err.returnMsg || "初始化失败");
-      console.log(err);
+      console.error(err);
     });
 }
 
-const getProjectInit1 = () => {
+const getValTypeOptions = async (valCodeType) => {
   const params = {
-    transCode: 'AC00004',
-    pid: pid.value,
-    type: type.value,
+    transCode: 'BES001',
+    type: valCodeType,
   };
-  request(params)
-    .then((res) => {
-      console.log(res.rows);
-    })
-    .catch((err) => {
-      ElMessage.error(err.returnMsg || "初始化失败");
-      console.log(err);
+  const res = await request(params);
+  return res.rows;
+};
+
+function findValType1Items(nodes) {
+  let result = [];
+
+  function traverse(nodeList) {
+    nodeList.forEach(node => {
+      // 判断当前节点
+      if (node.vo?.valType === 1 && node.vo?.valCodeType !== "swithType") {
+        result.push(node.vo);
+      }
+      // 递归遍历子节点
+      if (Array.isArray(node.svo) && node.svo.length > 0) {
+        traverse(node.svo);
+      }
     });
+  }
+
+  traverse(nodes);
+  return result;
 }
 
 onMounted(() => {

+ 34 - 0
src/views/mainContent/js/analysisData.js

@@ -0,0 +1,34 @@
+// 递归处理函数,展平节点并过滤 code === "switch" 的节点
+export function flattenBody(nodes) {
+  let result = [];
+  nodes.forEach(item => {
+    if (item?.vo?.code === "switch") {
+      return; // 跳过
+    }
+
+    if (item?.vo?.valType === 3 && Array.isArray(item.svo)) {
+      // 组节点递归展开
+      result.push(...flattenBody(item.svo));
+    } else {
+      result.push(item);
+    }
+  });
+  return result;
+}
+
+// 主处理函数,接收数据参数,返回处理后的对象
+export function analysisJson(data) {
+  const DataObj = {};
+
+  DataObj['header'] = data?.vo || null;
+  DataObj['body'] = flattenBody(data?.svo || []);
+
+  if (data?.svo) {
+    const switchItem = data.svo.find(item => item?.vo?.code === "switch");
+    DataObj['swich'] = switchItem?.vo || null;
+  } else {
+    DataObj['swich'] = null;
+  }
+
+  return DataObj;
+}

+ 80 - 32
src/views/mainContent/leftaside/agentModel.vue

@@ -3,30 +3,61 @@
   <div style="height: 100%;">
     <el-card class="custom-card">
       <template #header>
-        <span>代理模型</span>
+        <span>{{ amDataObj.header?.name }}</span>
       </template>
       <div class="content-container">
         <!-- 左侧 -->
         <div class="content-form content-form-left">
           <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
-            <el-form-item label="选择文件">
-              <el-input v-model="qitanAMData.fileName" class="noline"  size="small">
-                <template #append>
-                  <el-button  :icon="FolderOpened" />
-                </template>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="选择模型">
-              <el-select v-model="qitanAMData.model"  size="small">
-                <el-option label="Kriging" value="1"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-checkbox v-model="qitanAMData.rmse" label="均方根误差" class="custom-checkbox"/>
-            <el-form-item label="线性代数库">
-              <el-select v-model="qitanAMData.linearAlgebraLibrary"  size="small">
-                <el-option label="gesdd" value="1"></el-option>
-              </el-select>
-            </el-form-item>
+            <template v-for="(item, index) in amDataObj.body" :key="index">
+              <!-- 下拉框和输入框(带 label) -->
+              <el-form-item 
+                v-if="item.vo.valCodeType !== 'swithType' && item.vo.code !== 'from_file'" 
+                :label="item.vo.name"
+              >
+                <el-select
+                  v-if="item.vo.valType === 1"  
+                  v-model="item.vo.val" 
+                  size="small"
+                >
+                  <el-option
+                    v-for="option in valoption[item.vo.valCodeType]"
+                    :key="option.val"
+                    :label="option.tag"
+                    :value="option.val"
+                  />
+                </el-select>
+                <el-input 
+                  v-else-if="item.vo.valType === 2"
+                  v-model="item.vo.val" 
+                  size="small"
+                />
+              </el-form-item>
+
+              <el-form-item 
+                v-else-if="item.vo.code === 'from_file'" 
+                :label="item.vo.name"
+              >
+                <el-input 
+                  v-if="item.vo.valType === 2"
+                  v-model="item.vo.val" 
+                  size="small"
+                >
+                  <template #append>
+                    <el-button :icon="FolderOpened" />
+                  </template>
+                </el-input>
+              </el-form-item>
+
+              <!-- 复选框(无 label、不占位) -->
+              <el-checkbox 
+                v-else-if="item.vo.valType === 1 && item.vo.valCodeType === 'swithType'"
+                v-model="item.vo.val"
+                class="custom-checkbox"
+              >
+                {{ item.vo.name }}
+              </el-checkbox>
+            </template>
           </el-form>
         </div>
         <!-- 右侧 -->
@@ -35,12 +66,9 @@
             <img src="@/assets/img/dlmx.png" class="content-aside-img" alt="Experiment Icon" />
           </el-row>
           <el-row justify="center" align="middle">
-            <el-col :span="14" :push="4">
-              <span style="font-size: 10px;">代理模型</span>
-            </el-col>
-            <el-col :span="10">
-              <el-switch v-model="qitanAMData.isAgentModel" class="custom-switch custom-switch-colors" />
-            </el-col>
+            <span style="font-size: 10px;">{{ amDataObj.swich?.name }}</span>
+            <el-switch v-if="amDataObj.swich" v-model="amDataObj.swich.val" active-value="1" inactive-value="0"
+              class="custom-switch custom-switch-colors" />
           </el-row>
         </div>
       </div>
@@ -49,18 +77,38 @@
 </template>
 
 <script setup>
+import { analysisJson } from '../js/analysisData.js'
+
+import { useValOptionsStore } from '@/store/valoptions'
 import { FolderOpened } from '@element-plus/icons-vue'
 
+const valOptionsStore = useValOptionsStore()
+
+const props = defineProps({
+  amDatajson: {
+    type: Object,
+  }
+})
+
 const Labelwidth = '80px';
 
-const qitanAMData = ref({
-  isAgentModel: true,
-  fileName: '',
-  model: '1',
-  rmse: true,
-  linearAlgebraLibrary: '1',
-});
+const valoption = computed(() => valOptionsStore.valOptionsMap)
+
+const amDataObj  = ref({})
+
+// 监听 amDatajson 变化
+watch(
+  () => props.amDatajson,
+  (newVal) => {
+    getdatainit()
+  },
+  { deep: true } // 深度监听
+);
 
+const getdatainit = () => {
+  amDataObj.value = analysisJson(props.amDatajson);
+  console.log('amDataObj', amDataObj.value );
+}
 
 
 </script>

+ 49 - 44
src/views/mainContent/leftaside/exDesign.vue

@@ -11,28 +11,46 @@
             <img src="@/assets/img/sysj.png" class="content-aside-img" alt="Experiment Icon" />
           </el-row>
           <el-row justify="center" align="middle" >
-            <el-col :span="14" :push="4">
-              <span style="font-size: 10px;">{{ exDataObj.swich?.name }}</span>
-            </el-col>
-            <el-col :span="10">
-              <el-switch v-model="ExdeData.isAgentModel" class="custom-switch custom-switch-colors" />
-            </el-col>
+            <span style="font-size: 10px;">{{ exDataObj.swich?.name }}</span>
+            <el-switch v-if="exDataObj.swich" v-model="exDataObj.swich.val" active-value="1" inactive-value="0" class="custom-switch custom-switch-colors" />
           </el-row>
         </div>
         <div class="content-form content-form-right">
           <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
-            <el-form-item label="采样方法">
-              <el-select v-model="ExdeData.samplingMethod"  size="small">
-                <el-option label="拉丁超立方" value="1"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="样本数量">
-              <el-input v-model="ExdeData.sampleNum"  size="small"></el-input>
-            </el-form-item>
-            <el-form-item label="随机种子">
-              <el-input v-model="ExdeData.randomSeed"  size="small"></el-input>
-            </el-form-item>
-            <el-checkbox v-model="ExdeData.isAgentModel" label="代理优化" class="custom-checkbox"/>
+            <template v-for="(item, index) in exDataObj.body" :key="index">
+              <!-- 下拉框和输入框(带 label) -->
+              <el-form-item 
+                v-if="item.vo.valCodeType !== 'swithType'" 
+                :label="item.vo.name"
+              >
+                <el-select
+                  v-if="item.vo.valType === 1"  
+                  v-model="item.vo.val" 
+                  size="small"
+                >
+                  <el-option
+                    v-for="option in valoption[item.vo.valCodeType]"
+                    :key="option.val"
+                    :label="option.tag"
+                    :value="option.val"
+                  />
+                </el-select>
+                <el-input 
+                  v-else-if="item.vo.valType === 2"
+                  v-model="item.vo.val" 
+                  size="small"
+                />
+              </el-form-item>
+
+              <!-- 复选框(无 label、不占位) -->
+              <el-checkbox 
+                v-else-if="item.vo.valType === 1 && item.vo.valCodeType === 'swithType'"
+                v-model="item.vo.val"
+                class="custom-checkbox"
+              >
+                {{ item.vo.name }}
+              </el-checkbox>
+            </template>
           </el-form>
         </div>
       </div>
@@ -41,7 +59,11 @@
 </template>
 
 <script setup>
+import { analysisJson } from '../js/analysisData.js'
+
+import { useValOptionsStore } from '@/store/valoptions'
 
+const valOptionsStore = useValOptionsStore()
 
 const props = defineProps({
   exDatajson: {
@@ -51,43 +73,26 @@ const props = defineProps({
 
 const Labelwidth = '70px';
 
-const ExdeData = ref({
-  isAgentModel: true,
-  samplingMethod: '1',
-  sampleNum: 100,
-  randomSeed: 42,
-});
+const valoption = computed(() => valOptionsStore.valOptionsMap)
 
 const exDataObj  = ref({})
 
-const analysisJson = () => {
-  console.log("dayin",props.exDatajson)
-  exDataObj.value['header'] = props.exDatajson?.vo;
-  exDataObj.value['body'] = props.exDatajson?.svo;
-
-  // 遍历svo数组,查找vo.code为"switch"的项
-  if (props.exDatajson?.svo) {
-    const switchItem = props.exDatajson.svo.find(item => 
-      item?.vo?.code === "switch"
-    );
-    // 只赋值vo对象,不包含svo
-    exDataObj.value['swich'] = switchItem?.vo || null;  // 如果找不到设为null
-  } else {
-    exDataObj.value['swich'] = null;
-  }
-
-  console.log("sss",exDataObj.value)
-}
-
 // 监听 exDatajson 变化
 watch(
   () => props.exDatajson,
   (newVal) => {
-    analysisJson()
+    getdatainit()
   },
   { deep: true } // 深度监听
 );
 
+const getdatainit = () => {
+  exDataObj.value = analysisJson(props.exDatajson);
+  // console.log('exDataObj', exDataObj.value );
+  
+}
+
+
 
 </script>
 

+ 64 - 26
src/views/mainContent/leftaside/opAlgorithm.vue

@@ -3,7 +3,7 @@
   <div style="height: 100%;">
     <el-card class="custom-card">
       <template #header>
-        <span>优化算法</span>
+        <span>{{ oaDataObj.header?.name }}</span>
       </template>
       <div class="content-container">
         <div class="content-aside">
@@ -11,28 +11,46 @@
             <img src="@/assets/img/yhsf.png" class="content-aside-img" alt="Experiment Icon" />
           </el-row>
           <el-row justify="center" align="middle" >
-            <el-col :span="14" :push="4">
-              <span style="font-size: 10px;">优化算法</span>
-            </el-col>
-            <el-col :span="10">
-              <el-switch v-model="opAlgorithmData.isAgentModel" class="custom-switch custom-switch-colors" />
-            </el-col>
+            <span style="font-size: 10px;">{{ oaDataObj.swich?.name }}</span>
+            <el-switch v-if="oaDataObj.swich" v-model="oaDataObj.swich.val" active-value="1" inactive-value="0" class="custom-switch custom-switch-colors" />
           </el-row>
         </div>
         <div class="content-form content-form-right">
           <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
-            <el-form-item label="采样方法">
-              <el-select v-model="opAlgorithmData.samplingMethod"  size="small">
-                <el-option label="拉丁超立方" value="1"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="样本数量">
-              <el-input v-model="opAlgorithmData.sampleNum"  size="small"></el-input>
-            </el-form-item>
-            <el-form-item label="随机种子">
-              <el-input v-model="opAlgorithmData.randomSeed"  size="small"></el-input>
-            </el-form-item>
-            <el-checkbox v-model="opAlgorithmData.isAgentModel" label="代理优化" class="custom-checkbox"/>
+            <template v-for="(item, index) in oaDataObj.body" :key="index">
+              <!-- 下拉框和输入框(带 label) -->
+              <el-form-item 
+                v-if="item.vo.valCodeType !== 'swithType'" 
+                :label="item.vo.name"
+              >
+                <el-select
+                  v-if="item.vo.valType === 1"  
+                  v-model="item.vo.val" 
+                  size="small"
+                >
+                  <el-option
+                    v-for="option in valoption[item.vo.valCodeType]"
+                    :key="option.val"
+                    :label="option.tag"
+                    :value="option.val"
+                  />
+                </el-select>
+                <el-input 
+                  v-else-if="item.vo.valType === 2"
+                  v-model="item.vo.val" 
+                  size="small"
+                />
+              </el-form-item>
+
+              <!-- 复选框(无 label、不占位) -->
+              <el-checkbox 
+                v-else-if="item.vo.valType === 1 && item.vo.valCodeType === 'swithType'"
+                v-model="item.vo.val"
+                class="custom-checkbox"
+              >
+                {{ item.vo.name }}
+              </el-checkbox>
+            </template>
           </el-form>
         </div>
       </div>
@@ -41,15 +59,35 @@
 </template>
 
 <script setup>
+import { analysisJson } from '../js/analysisData.js'
+
+import { useValOptionsStore } from '@/store/valoptions'
+
+const valOptionsStore = useValOptionsStore()
+
+const props = defineProps({
+  oaDatajson: {
+    type: Object,
+  }
+})
+
+const Labelwidth = '80px';
+
+const valoption = computed(() => valOptionsStore.valOptionsMap)
 
-const Labelwidth = '70px';
+const oaDataObj  = ref({})
 
-const opAlgorithmData = ref({
-  isAgentModel: true,
-  samplingMethod: '1',
-  sampleNum: 100,
-  randomSeed: 42,
-});
+// 监听 oaDatajson 变化
+watch(
+  () => props.oaDatajson,
+  (newVal) => {
+    getdatainit()
+  },
+  { deep: true } // 深度监听
+);
 
+const getdatainit = () => {
+  oaDataObj.value = analysisJson(props.oaDatajson);
+}
 
 </script>

+ 189 - 55
src/views/mainContent/rightaside/opProblem.vue

@@ -3,9 +3,9 @@
   <div style="height: 100%;">
     <el-card class="custom-card">
       <template #header>
-        <span>优化问题</span>
+        <span>{{ opDataObj.header?.name }}</span>
       </template>
-      <div class="opProblem-container">
+      <div class="opProblem-container" :class="currentClass">
         <div class="first-container">
           <div class="content-container">
             <div class="content-aside">
@@ -13,26 +13,50 @@
                 <img src="@/assets/img/yhwt.png" class="content-aside-img" alt="Experiment Icon" />
               </el-row>
               <el-row justify="center" align="middle">
-                <el-col style="text-align: center;line-height: 32px;">
-                  <span style="font-size: 10px;">设计变量</span>
-                </el-col>
+                <span style="font-size: 10px;line-height: 32px;">{{ opDataObj1.header?.name }}</span>
+                <el-switch v-if="opDataObj1.swich" v-model="opDataObj1.swich.val" active-value="1" inactive-value="0" class="custom-switch custom-switch-colors" />
               </el-row>
             </div>
             <div class="content-form content-form-right">
-              <div class="content-form-top">
-                <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
-                  <el-form-item label="扭曲分布">
-                    <el-input v-model="qitanOPData1.distortion"  size="small"></el-input>
-                  </el-form-item>
-                  <el-form-item label="上限">
-                    <el-input-number v-model="qitanOPData1.upperLimit"  size="small" controls-position="right"></el-input-number>
-                  </el-form-item>
-                  <el-form-item label="下限">
-                    <el-input-number v-model="qitanOPData1.lowerLimit"  size="small" controls-position="right"></el-input-number>
+              
+              <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
+                <template v-for="(item, index) in opDataObj1.body" :key="index">
+                  <!-- 下拉框和输入框(带 label) -->
+                  <el-form-item 
+                    v-if="item.vo.valCodeType !== 'swithType'" 
+                    :label="item.vo.name"
+                  >
+                    <el-select
+                      v-if="item.vo.valType === 1"  
+                      v-model="item.vo.val" 
+                      size="small"
+                    >
+                      <el-option
+                        v-for="option in valoption[item.vo.valCodeType]"
+                        :key="option.val"
+                        :label="option.tag"
+                        :value="option.val"
+                      />
+                    </el-select>
+                    <el-input 
+                      v-else-if="item.vo.valType === 2"
+                      v-model="item.vo.val" 
+                      size="small"
+                    />
                   </el-form-item>
-                </el-form>
-              </div>
-              <div class="content-form-bottom">
+
+                  <!-- 复选框(无 label、不占位) -->
+                  <el-checkbox 
+                    v-else-if="item.vo.valType === 1 && item.vo.valCodeType === 'swithType'"
+                    v-model="item.vo.val"
+                    class="custom-checkbox"
+                  >
+                    {{ item.vo.name }}
+                  </el-checkbox>
+                </template>
+              </el-form>
+              
+              <!-- <div class="content-form-bottom">
                 <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
                   <el-form-item label="厚度分布">
                     <el-input v-model="qitanOPData1.thickness"  size="small"></el-input>
@@ -44,7 +68,7 @@
                     <el-input-number v-model="qitanOPData1.lowerLimit"  size="small" controls-position="right"></el-input-number>
                   </el-form-item>
                 </el-form>
-              </div>
+              </div> -->
             </div>
           </div>
         </div>
@@ -56,24 +80,46 @@
                 <img src="@/assets/img/yhwt.png" class="content-aside-img" alt="Experiment Icon" />
               </el-row>
               <el-row justify="center" align="middle" >
-                <el-col :span="14" :push="4">
-                  <span style="font-size: 10px;">约束条件</span>
-                </el-col>
-                <el-col :span="10">
-                  <el-switch v-model="qitanOPData2.isConstraint" class="custom-switch custom-switch-colors" />
-                </el-col>
+                <span style="font-size: 10px;line-height: 32px;">{{ opDataObj2.header?.name }}</span>
+                <el-switch v-if="opDataObj2.swich" v-model="opDataObj2.swich.val" active-value="1" inactive-value="0" class="custom-switch custom-switch-colors" />
               </el-row>
             </div>
             <div class="content-form content-form-right">
               <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
-                <el-form-item label="约束参数">
-                 <el-select v-model="qitanOPData2.constraintParameter"  size="small">
-                  <el-option label="失效应力" value="1"></el-option>
-                 </el-select>
-                </el-form-item>
-                <el-form-item label="输入数值">
-                  <el-input-number v-model="qitanOPData2.inputValue"  size="small" controls-position="right"></el-input-number>
-                </el-form-item>
+                <template v-for="(item, index) in opDataObj2.body" :key="index">
+                  <!-- 下拉框和输入框(带 label) -->
+                  <el-form-item 
+                    v-if="item.vo.valCodeType !== 'swithType'" 
+                    :label="item.vo.name"
+                  >
+                    <el-select
+                      v-if="item.vo.valType === 1"  
+                      v-model="item.vo.val" 
+                      size="small"
+                    >
+                      <el-option
+                        v-for="option in valoption[item.vo.valCodeType]"
+                        :key="option.val"
+                        :label="option.tag"
+                        :value="option.val"
+                      />
+                    </el-select>
+                    <el-input 
+                      v-else-if="item.vo.valType === 2"
+                      v-model="item.vo.val" 
+                      size="small"
+                    />
+                  </el-form-item>
+
+                  <!-- 复选框(无 label、不占位) -->
+                  <el-checkbox 
+                    v-else-if="item.vo.valType === 1 && item.vo.valCodeType === 'swithType'"
+                    v-model="item.vo.val"
+                    class="custom-checkbox"
+                  >
+                    {{ item.vo.name }}
+                  </el-checkbox>
+                </template>
               </el-form>
             </div>
           </div>
@@ -86,21 +132,46 @@
                 <img src="@/assets/img/yhwt.png" class="content-aside-img" alt="Experiment Icon" />
               </el-row>
               <el-row justify="center" align="middle">
-                <el-col style="text-align: center;line-height: 32px;">
-                  <span style="font-size: 10px;">优化目标</span>
-                </el-col>
+                <span style="font-size: 10px;line-height: 32px;">{{ opDataObj3.header?.name }}</span>
+                <el-switch v-if="opDataObj3.swich" v-model="opDataObj3.swich.val" active-value="1" inactive-value="0" class="custom-switch custom-switch-colors" />
               </el-row>
             </div>
             <div class="content-form content-form-right">
               <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
-                <el-form-item label="约束参数">
-                 <el-select v-model="qitanOPData2.constraintParameter"  size="small">
-                  <el-option label="失效应力" value="1"></el-option>
-                 </el-select>
-                </el-form-item>
-                <el-form-item label="输入数值">
-                  <el-input-number v-model="qitanOPData2.inputValue"  size="small" controls-position="right"></el-input-number>
-                </el-form-item>
+                <template v-for="(item, index) in opDataObj3.body" :key="index">
+                  <!-- 下拉框和输入框(带 label) -->
+                  <el-form-item 
+                    v-if="item.vo.valCodeType !== 'swithType'" 
+                    :label="item.vo.name"
+                  >
+                    <el-select
+                      v-if="item.vo.valType === 1"  
+                      v-model="item.vo.val" 
+                      size="small"
+                    >
+                      <el-option
+                        v-for="option in valoption[item.vo.valCodeType]"
+                        :key="option.val"
+                        :label="option.tag"
+                        :value="option.val"
+                      />
+                    </el-select>
+                    <el-input 
+                      v-else-if="item.vo.valType === 2"
+                      v-model="item.vo.val" 
+                      size="small"
+                    />
+                  </el-form-item>
+
+                  <!-- 复选框(无 label、不占位) -->
+                  <el-checkbox 
+                    v-else-if="item.vo.valType === 1 && item.vo.valCodeType === 'swithType'"
+                    v-model="item.vo.val"
+                    class="custom-checkbox"
+                  >
+                    {{ item.vo.name }}
+                  </el-checkbox>
+                </template>
               </el-form>
             </div>
           </div>
@@ -113,23 +184,54 @@
 </template>
 
 <script setup>
+import { analysisJson } from '../js/analysisData.js'
+
+import { useValOptionsStore } from '@/store/valoptions'
+
+const valOptionsStore = useValOptionsStore()
+
+const props = defineProps({
+  opDatajson: {
+    type: Object
+  },
+  runtype: {
+    type: Number,
+    default: 0
+  }
+})
 
+const currentClass = computed(() => {
+  if (props.runtype === 0) return 'class-qidong'
+  if (props.runtype === 1) return 'class-jiegou'
+  return 'class-qitan'
+})
 
 const Labelwidth = '70px';
 
-const qitanOPData1 = ref({
-  distortion: 0,
-  upperLimit: 100,
-  lowerLimit: 0,
-  thickness: 0,
+const valoption = computed(() => valOptionsStore.valOptionsMap)
+
+const opDataObj  = ref({})
+const opDataObj1  = ref({})
+const opDataObj2  = ref({})
+const opDataObj3  = ref({})
+
+// 监听 opDatajson 变化
+watch(
+  () => props.opDatajson,
+  (newVal) => {
+    getdatainit()
+  },
+  { deep: true } // 深度监听
+);
 
-});
+const getdatainit = () => {
+  opDataObj.value = analysisJson(props.opDatajson);
+  opDataObj1.value = analysisJson(props.opDatajson.svo[0]);
+  opDataObj2.value = analysisJson(props.opDatajson.svo[1]);
+  opDataObj3.value = analysisJson(props.opDatajson.svo[2]);
+  console.log('opDataObj1',opDataObj1.value);
+}
 
-const qitanOPData2 = ref({
-  isConstraint: true,
-  constraintParameter: '1',
-  inputValue: 0
-});
 
 </script>
 
@@ -139,7 +241,39 @@ const qitanOPData2 = ref({
   height: 100%;
   display: flex;
   flex-direction: column;
+}
+
+.class-qidong {
+  .first-container {
+    width: 100%;
+    height: 33%;
+  }
+  .second-container {
+    width: 100%;
+    height: 33%;
+  }
+  .third-container {
+    width: 100%;
+    height: 33%;
+  }
+}
+
+.class-jiegou {
+  .first-container {
+    width: 100%;
+    height: 48%;
+  }
+  .second-container {
+    width: 100%;
+    height: 25%;
+  }
+  .third-container {
+    width: 100%;
+    height: 25%;
+  }
+}
 
+.class-qitan {
   .first-container {
     width: 100%;
     height: 48%;