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

<template>
  <!-- 优化问题 -->
  <div style="height: 100%;">
    <el-card class="custom-card">
      <template #header>
        <span>{{ opDatajson?.vo.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;">{{ opDatajson?.svo[0]?.vo.name }}</span>
                <el-switch v-if="ophasSwitch1.switch" v-model="ophasSwitch1.switch.val" active-value="1" inactive-value="0" class="custom-switch custom-switch-colors" />
              </el-row>
            </div>
            <div class="content-form content-form-right">
              <template v-for="(form, formIndex) in opDataObj1" :key="formIndex">
                <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
                  <el-form-item v-if="form.header.code !== 'is_cons'"  :label="form.header.name"></el-form-item>
                  <template v-for="(item, index) in form.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"
                      true-value = 1
                      false-value = 0
                    >
                      {{ item.vo.name }}
                    </el-checkbox>
                  </template>
                </el-form>
              </template>
            </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;">{{ opDatajson?.svo[1]?.vo.name }}</span>
                <el-switch v-if="ophasSwitch2.switch" v-model="ophasSwitch2.switch.val" active-value="1" inactive-value="0" class="custom-switch custom-switch-colors" />
              </el-row>
            </div>
            <div class="content-form content-form-right">
              <template v-for="(form, formIndex) in opDataObj2" :key="formIndex">
                <el-form v-show="form.body.length>0" class="custom-form" :label-width="Labelwidth" label-position="left">
                  <el-form-item v-if="form.header.code !== 'is_cons'"  :label="form.header.name"></el-form-item>
                  <template v-for="(item, index) in form.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"
                      true-value = 1
                      false-value = 0
                    >
                      {{ item.vo.name }}
                    </el-checkbox>
                  </template>
                </el-form>
              </template>
            </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;">{{ opDatajson?.svo[2]?.vo.name }}</span>
                <el-switch v-if="ophasSwitch3.switch" v-model="ophasSwitch3.switch.val" active-value="1" inactive-value="0" class="custom-switch custom-switch-colors" />
              </el-row>
            </div>
            <div class="content-form content-form-right">
              <template v-for="(form, formIndex) in opDataObj3" :key="formIndex">
                <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
                  <el-form-item v-if="form.header.code !== 'is_cons'"  :label="form.header.name"></el-form-item>
                  <template v-for="(item, index) in form.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"
                      true-value = 1
                      false-value = 0
                    >
                      {{ item.vo.name }}
                    </el-checkbox>
                  </template>
                </el-form>
              </template>
            </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([])


const ophasSwitch1 = ref({})
const ophasSwitch2 = ref({})
const ophasSwitch3 = ref({})

// 监听 opDatajson 变化
watch(
  () => props.opDatajson,
  (newVal) => {
    getdatainit()
  },
  { deep: true } // 深度监听
);

const getdatainit = () => {
  // 整体数据
  opDataObj.value = analysisJson(props.opDatajson);

  ophasSwitch1.value = analysisJson(props.opDatajson.svo[0])
  ophasSwitch2.value = analysisJson(props.opDatajson.svo[1])
  ophasSwitch3.value = analysisJson(props.opDatajson.svo[2])

  // 生成各个子组的数组
  const groups = [opDataObj1, opDataObj2, opDataObj3];
  
  groups.forEach((targetRef, index) => {
    const subGroup = props.opDatajson?.svo?.[index]?.svo;
    targetRef.value = Array.isArray(subGroup)
      ? subGroup.map(group => analysisJson(group))
      : [];
  });

  console.log('props.opDatajson', props.opDatajson);
  console.log('opDataObj', opDataObj.value);
  console.log('opDataObj1', opDataObj1.value);
  console.log('opDataObj2', opDataObj2.value);
  console.log('opDataObj3', opDataObj3.value);
};

const gatherData = () => {
  let opdata1 = saveData(ophasSwitch1)
  let opdata2 = saveData(ophasSwitch2)
  let opdata3 = saveData(ophasSwitch3)
  let opdata = [...opdata1,...opdata2,...opdata3]

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

// 保存前过滤
const saveData = (obj) => {
  // 过滤 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: 33%;
  }
  .second-container {
    width: 100%;
    height: 33%;
  }
  .third-container {
    width: 100%;
    height: 33%;
  }
}

.class-qitan {
  .first-container {
    width: 100%;
    height: 44%;
  }
  .second-container {
    width: 100%;
    height: 34%;
  }
  .third-container {
    width: 100%;
    height: 20%;
  }
}

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

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


</style>