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 title="飞行包线" name="1">
          <el-table :data="fxbxtable" border style="width: 100%; ">
          <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 title="起飞着陆" name="2">
          <el-table :data="qfzltable" border style="width: 100%; ">
          <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">
            <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> -->
            <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">
          <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">
          <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(156)

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
  },
])

</script>