807布局调整

src/style/index.css

@@ -237,10 +237,10 @@ img{
     justify-content: center;
 
     .content-aside-img{
-      width: 85px;
-      height: 85px;
+      width: 70%;
+      /* height: 85px; */
       position: relative;
-      
+      top: 10px;
     }
   }
 

src/views/mainContent/index.vue

@@ -75,29 +75,29 @@ import opProblem from './rightaside/opProblem.vue';
 .leftaside {
   .left-1 {
     width: 100%;
-    height: 25%;
+    height: 23%;
   }
 
   .left-2 {
     width: 100%;
-    height: 25%;
+    height: 23%;
   }
 
   .left-3 {
     width: 100%;
-    height: 30%;
+    height: 29%;
   }
 
   .left-4 {
     width: 100%;
-    height: 20%;
+    height: 22%;
   }
 }
 
 .rightaside {
   .right-1 {
     width: 100%;
-    height: 70%;
+    height: 67%;
   }
 
   .right-2 {

src/views/mainContent/leftaside/exDesign.vue

@@ -15,24 +15,24 @@
               <span style="font-size: 10px;">代理优化</span>
             </el-col>
             <el-col :span="10">
-              <el-switch v-model="qitanExdeData.isAgentModel" class="custom-switch custom-switch-colors" />
+              <el-switch v-model="ExdeData.isAgentModel" class="custom-switch custom-switch-colors" />
             </el-col>
           </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="qitanExdeData.samplingMethod"  size="small">
+              <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="qitanExdeData.sampleNum"  size="small"></el-input>
+              <el-input v-model="ExdeData.sampleNum"  size="small"></el-input>
             </el-form-item>
             <el-form-item label="随机种子">
-              <el-input v-model="qitanExdeData.randomSeed"  size="small"></el-input>
+              <el-input v-model="ExdeData.randomSeed"  size="small"></el-input>
             </el-form-item>
-            <el-checkbox v-model="qitanExdeData.isAgentModel" label="代理优化" class="custom-checkbox"/>
+            <el-checkbox v-model="ExdeData.isAgentModel" label="代理优化" class="custom-checkbox"/>
           </el-form>
         </div>
       </div>
@@ -45,7 +45,7 @@
 
 const Labelwidth = '70px';
 
-const qitanExdeData = ref({
+const ExdeData = ref({
   isAgentModel: true,
   samplingMethod: '1',
   sampleNum: 100,

src/views/mainContent/leftaside/opAlgorithm.vue

@@ -5,11 +5,51 @@
       <template #header>
         <span>优化算法</span>
       </template>
-
+      <div class="content-container">
+        <div class="content-aside">
+          <el-row justify="center">
+            <img src="@/assets/img/start.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>
+          </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"/>
+          </el-form>
+        </div>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script setup>
 
+const Labelwidth = '70px';
+
+const opAlgorithmData = ref({
+  isAgentModel: true,
+  samplingMethod: '1',
+  sampleNum: 100,
+  randomSeed: 42,
+});
+
+
 </script>

src/views/mainContent/leftaside/opRun.vue

@@ -6,11 +6,13 @@
         <span>优化运行</span>
       </template>
       <div class="container">
-        <div>
+        <div class="container-item">
           <img src="@/assets/img/start.png" class="container-img" alt="Experiment Icon" />
+          <span class="container-text">开始</span>
         </div>
-        <div>
+        <div class="container-item">
           <img src="@/assets/img/stop.png" class="container-img" alt="Experiment Icon" />
+          <span class="container-text">停止</span>
         </div>
       </div>
     </el-card>
@@ -23,8 +25,29 @@
 
 <style scoped>
 .container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
   display: flex;
-  justify-content: space-between;
-  padding: 16px;
+}
+
+.container-item {
+  width: 50%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .container-img {
+    height: 70%;
+    cursor: pointer;
+    position: relative;
+    top: 10px;
+  }
+
+  .container-text {
+    cursor: pointer;
+  }
 }
 </style>

src/views/mainContent/rightaside/opProblem.vue

@@ -13,8 +13,8 @@
                 <img src="@/assets/img/start.png" class="content-aside-img" alt="Experiment Icon" />
               </el-row>
               <el-row justify="center" align="middle">
-                <el-col :span="24" :push="6">
-                  <span>设计变量</span>
+                <el-col :span="24" :push="8">
+                  <span style="font-size: 10px;">设计变量</span>
                 </el-col>
               </el-row>
             </div>
@@ -80,6 +80,30 @@
         </div>
         <el-divider />
         <div class="third-container">
+          <div class="content-container">
+            <div class="content-aside">
+              <el-row justify="center">
+                <img src="@/assets/img/start.png" class="content-aside-img" alt="Experiment Icon" />
+              </el-row>
+              <el-row justify="center" align="middle">
+                <el-col :span="24" :push="8">
+                  <span style="font-size: 10px;">优化目标</span>
+                </el-col>
+              </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>
+              </el-form>
+            </div>
+          </div>
         </div>
         
       </div>
@@ -118,15 +142,15 @@ const qitanOPData2 = ref({
 
   .first-container {
     width: 100%;
-    height: 40%;
+    height: 50%;
   }
   .second-container {
     width: 100%;
-    height: 30%;
+    height: 25%;
   }
   .third-container {
     width: 100%;
-    height: 30%;
+    height: 25%;
   }
 }