aircraft-web/src/views/mainContent/rightaside/opProblem.vue

<template>
  <!-- 优化问题 -->
  <div style="height: 100%;">
    <el-card class="custom-card">
      <template #header>
        <span>优化问题</span>
      </template>
      <div class="opProblem-container">
        <div class="first-container">
          <div class="content-container">
            <div class="content-aside">
              <el-row justify="center">
                <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>
              </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-item>
                </el-form>
              </div>
              <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>
                  </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-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
        <el-divider />
        <div class="second-container">
          <div class="content-container">
            <div class="content-aside">
              <el-row justify="center">
                <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>
              </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>
        <el-divider />
        <div class="third-container">
          <div class="content-container">
            <div class="content-aside">
              <el-row justify="center">
                <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>
              </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>
        
    </el-card>
  </div>
</template>

<script setup>


const Labelwidth = '70px';

const qitanOPData1 = ref({
  distortion: 0,
  upperLimit: 100,
  lowerLimit: 0,
  thickness: 0,

});

const qitanOPData2 = ref({
  isConstraint: true,
  constraintParameter: '1',
  inputValue: 0
});

</script>

<style scoped>
.opProblem-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .first-container {
    width: 100%;
    height: 48%;
  }
  .second-container {
    width: 100%;
    height: 25%;
  }
  .third-container {
    width: 100%;
    height: 25%;
  }
}

.content-form-top {
  width: 100%;
  height: 45%;
}

.content-form-bottom {
  width: 100%;
  height: 45%;
}


</style>