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

<template>
  <!-- 优化问题 -->
  <div style="height: 100%;">
    <el-card class="custom-card">
      <template #header>
        <span>{{ opDataObj.header?.name }}</span>
      </template>
      <div class="opProblem-container" :class="currentClass">
        <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">
                <span style="font-size: 10px;line-height: 32px;">{{ opDataObj1.header?.name }}</span>
                <el-switch v-if="opDataObj1.switch" v-model="opDataObj1.switch.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">
                <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>

                  <!-- 复选框（无 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>
                  </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" >
                <span style="font-size: 10px;line-height: 32px;">{{ opDataObj2.header?.name }}</span>
                <el-switch v-if="opDataObj2.switch" v-model="opDataObj2.switch.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">
                <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>
        </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">
                <span style="font-size: 10px;line-height: 32px;">{{ opDataObj3.header?.name }}</span>
                <el-switch v-if="opDataObj3.switch" v-model="opDataObj3.switch.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">
                <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>
        </div>
        
      </div>
        
    </el-card>
  </div>
</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 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('opDataObj',opDataObj.value);
  console.log('opDataObj1',opDataObj1.value);
}

const gatherData = () => {
  let opdata1 = saveData(opDataObj1)
  let opdata2 = saveData(opDataObj2)
  let opdata3 = saveData(opDataObj3)
  let opdata = [...opdata1,...opdata2,...opdata3]

  console.log("op保存数据：", opdata)
  return opdata
}

// 保存前过滤
const saveData = (obj) => {
  // 获取当前选中的 选项value
  const selectValue = obj.value.body
    .find(item => item?.vo?.valCodeType === 'samplingMethod')?.vo?.val;

  // 过滤 body
  const filteredBody = obj.value.body
  .map(item => item.vo);

  const switchObj = obj.value.switch
  const saveArr = switchObj ? [...filteredBody, switchObj] : filteredBody;

  // 这里执行你的上传或保存逻辑
  return saveArr;
};

defineExpose({gatherData})


</script>

<style scoped>
.opProblem-container {
  width: 100%;
  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%;
  }
  .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>