airoptweb/src/views/titlecomponent/Flight.vue

<template>
  <div class="XFpdding" style="height: 470px;">
    <ul>
      <li
        class="item"
        v-for="(tab, index) in tabslist1"
        :key="index"
        :class="{ active: currentTab1 === index }"
        @click="selectTab1(index)"
      >
        <img :src="tab.imgSrc" style="width: 24px;margin-top: -8px;"/>
        {{ tab.name }}
      </li>
    </ul>
    <div v-show="currentTab1 == '0'" class="eldesign classtable" style="margin-top: 10px">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template #title>
            <span class="collapse-title">飞行包线</span>
          </template>
          <el-table :data="fxbxtable" border style="width: 100%; " :header-cell-class-name="headerCellClassName">
          <el-table-column type="index" width="70" label="编号" />
          <el-table-column prop="name" label="参数名称" >
            <!-- <template #default="{ row }">
              <el-input v-model="row.name" @change="handleEdit(row)" />
            </template> -->
          </el-table-column>
          <el-table-column prop="value" label="参数值">
            <template #default="{ row }">
              <el-input v-model="row.value" type="number" />
            </template>
          </el-table-column>
          <el-table-column prop="flag" label="启用" width="100">
            <template v-slot="scope">
              <el-checkbox
                :false-label="0"
                :true-label="1"
                :label="false"
                v-model="scope.row.flag"
              />
            </template>
          </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template #title>
            <span class="collapse-title">起飞着陆</span>
          </template>
          <el-table :data="qfzltable" border style="width: 100%; " :header-cell-class-name="headerCellClassName">
          <el-table-column type="index" width="70" label="编号" />
          <el-table-column prop="name" label="参数名称">
            <!-- <template #default="{ row }">
              <el-input v-model="row.name" @change="handleEdit(row)" />
            </template> -->
          </el-table-column>
          <el-table-column prop="value" label="参数值">
            <template #default="{ row }">
              <el-input v-model="row.value" type="number" />
            </template>
          </el-table-column>
          <el-table-column prop="flag" label="启用" width="100">
            <template v-slot="scope">
              <el-checkbox
                :false-label="0"
                :true-label="1"
                :label="false"
                v-model="scope.row.flag"
              />
            </template>
          </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>

      <div v-show="currentTab1 == '1'" class="eldesign classtable" style="margin-top: 10px">
        <el-collapse v-model="activeNames1">
          <el-collapse-item title="静稳定性" name="1">
            <template #title>
              <span class="collapse-title">静稳定性</span>
            </template>
            <el-form-item label="纵向静稳定导数:" :label-width="formLabelWidth1">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="航向静稳定导数:" :label-width="formLabelWidth1">
              <el-input></el-input>
            </el-form-item>
          </el-collapse-item >
          <el-collapse-item title="动稳定性" name="2">
            <!-- <el-form-item label="纵向" :label-width="formLabelWidth1">
            </el-form-item> -->
            <template #title>
              <span class="collapse-title">动稳定性</span>
            </template>
            <span style="padding-left: 20px;">纵向</span>
            <el-form>
              <el-form-item label="长周期模态" :label-width="formLabelWidth1">
              </el-form-item>
              <el-form-item label="阻尼比:" :label-width="formLabelWidth1">
                <el-input></el-input>
              </el-form-item>
              <el-form-item label="频率:" :label-width="formLabelWidth1">
                <el-input></el-input>
              </el-form-item>
            </el-form>
            
            <el-form>
              <el-form-item label="短周期模态" :label-width="formLabelWidth1">
              </el-form-item>
              <el-form-item label="阻尼比:" :label-width="formLabelWidth1">
                <el-input></el-input>
              </el-form-item>
              <el-form-item label="频率:" :label-width="formLabelWidth1">
                <el-input></el-input>
              </el-form-item>
            </el-form>

            <el-form-item label="横航向" :label-width="formLabelWidth1"></el-form-item>
            <el-form>
              <el-form-item label="螺旋模态" :label-width="formLabelWidth1"></el-form-item>
              <el-form-item label="时间常数:" :label-width="formLabelWidth1">
                <el-input></el-input>
              </el-form-item>
              <el-form-item label="运动周期:" :label-width="formLabelWidth1">
                <el-input></el-input> 
              </el-form-item>
              <el-form-item label="滚转模态" :label-width="formLabelWidth1"></el-form-item>
              <el-form-item label="时间常数:" :label-width="formLabelWidth1">
                <el-input></el-input>
              </el-form-item>
              <el-form-item label="荷兰滚模态" :label-width="formLabelWidth1"></el-form-item>
              <el-form-item label="阻尼比:" :label-width="formLabelWidth1">
                <el-input></el-input>
              </el-form-item>
              <el-form-item label="固有频率:" :label-width="formLabelWidth1">
                <el-input></el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </div> 

      <div v-show="currentTab1 == '2'" class="eldesign classtable" style="margin-top: 10px">
        <el-table :data="zltxtable" border style="width: 100%; height: 400px" :header-cell-class-name="headerCellClassName">
          <el-table-column type="index" width="70" label="编号" />
          <el-table-column prop="name" label="参数名称">
            <!-- <template #default="{ row }">
              <el-input v-model="row.name" @change="handleEdit(row)" />
            </template> -->
          </el-table-column>
          <el-table-column prop="value" label="参数值">
            <template #default="{ row }">
              <el-input v-model="row.value" type="number" />
            </template>
          </el-table-column>
          <el-table-column prop="flag" label="启用" width="100">
            <template v-slot="scope">
              <el-checkbox
                :false-label="0"
                :true-label="1"
                :label="false"
                v-model="scope.row.flag"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-show="currentTab1 == '3'" class="eldesign classtable" style="margin-top: 10px">
        <el-table :data="tltxtable" border style="width: 100%; height: 400px" :header-cell-class-name="headerCellClassName">
          <el-table-column type="index" width="70" label="编号" />
          <el-table-column prop="name" label="参数名称">
            <!-- <template #default="{ row }">
              <el-input v-model="row.name" @change="handleEdit(row)" />
            </template> -->
          </el-table-column>
          <el-table-column prop="value" label="参数值">
            <template #default="{ row }">
              <el-input v-model="row.value" type="number" />
            </template>
          </el-table-column>
          <el-table-column prop="flag" label="启用" width="100">
            <template v-slot="scope">
              <el-checkbox
                :false-label="0"
                :true-label="1"
                :label="false"
                v-model="scope.row.flag"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

  </div>
</template>

<script  setup>
import { ref, onMounted, reactive, provide, nextTick } from "vue"
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import { request, uploadFile } from "@/utils/request"

import configParams from "@/assets/img/configParams.png";
import flight1 from "@/assets/img/flight1.png";
import flight2 from "@/assets/img/flight2.png";
import flight3 from "@/assets/img/flight3.png";
import flight4 from "@/assets/img/flight4.png";

let currentTab1 = ref(0)
let formLabelWidth1 = ref(176)

let activeNames = ref(['1','2'])
let activeNames1 = ref(['1','2'])

let fsi = ref({
  maxIter: 2,
  result: 1,
  interpolation: "MELD",
  aeroRegion: "wall",
  
})

let tabslist1 = ref([
  { id: "0", name: "飞行性能", imgSrc: flight1 },
  { id: "1", name: "操稳特性", imgSrc: flight2 },
  { id: "2", name: "重量特性", imgSrc: flight3 },
  { id: "3", name: "推力特性", imgSrc: flight4 },
])

const selectTab1 = (index) => {
  console.log('dayin',index)
  currentTab1.value = index
  console.log('currentTab1',currentTab1.value)
}

let fxbxtable = ref([
  {
    value: 80,
    name: "最小平飞速度",
    flag: 1
  },
  {
    value: 270,
    name: "最大平飞速度",
    flag: 1
  },
  {
    value: 0,
    name: "升限",
    flag: 1
  },
  {
    value: 0,
    name: "爬升率",
    flag: 1
  }
])

let qfzltable = ref([
  {
    value: 1353.5816,
    name: "航程",
    flag: 1
  },
  {
    value: 2.4344,
    name: "航时",
    flag: 1
  },
  {
    value: 2600,
    name: "起飞场长",
    flag: 1
  },
  {
    value: 2000,
    name: "着陆场长",
    flag: 1
  }
])

let zltxtable = ref([
  {
    value: 16700,
    name: "空重",
    flag: 1
  },
  {
    value: 18600,
    name: "最大起飞重量",
    flag: 1
  },
])

let tltxtable = ref([
  {
    value: 0.000001298,
    name: "耗油率",
    flag: 1
  },
  {
    value: 0.85,
    name: "螺旋桨效率",
    flag: 1
  },
])


const headerCellClassName = ({ column }) => {
  // console.log('列：',column.property)
  if (column.property === 'name') {
    console.log('yanse',column.property)
    return 'header-blue';
  } else if (column.property === 'value') {
    return 'header-green';
  } else if (column.property === 'flag') {
    return 'header-yellow';
  }
  return '';
};


</script>

<style scoped>

:deep(.collapse-title) {
  flex: 1 0 90%;
  order: 1;
  text-align: left;
}

:deep(.collapse-title) .el-collapse-item__header {
  flex: 1 0 auto;
  order: -1;
}



</style>