airoptweb/src/views/titlecomponent/MathFunc.vue

<template>
  <div class="XFpdding" style="height: 350px;">
    <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: 22px;"/>
        {{ tab.name }}
      </li>
    </ul>
    <div v-show="currentTab1 == '0'" class="eldesign classtable" style="margin-top: 10px">
      <el-table :data="xvaluelist" 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" />
            </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="-1"
                :true-label="1"
                :label="false"
                v-model="scope.row.flag"
              />
            </template>
          </el-table-column>
        </el-table>
    </div>

      <div v-show="currentTab1 == '1'" style="margin-top: 10px">
        <PythonEdit :value="textarea" language="python" />
      </div> 

      <div v-show="currentTab1 == '2'" class="eldesign classtable" style="margin-top: 10px">
        <el-table :data="yvaluelist" border style="width: 100%; height: 280px" :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 PythonEdit from '@/components/PythonEditor/index.vue'; 
import configParams from "@/assets/img/configParams.png";
import MathFuncX from "@/assets/img/MathFuncX.png";
import MathFuncFx from "@/assets/img/MathFuncFx.png";
import MathFuncY from "@/assets/img/MathFuncY.png";

let currentTab1 = ref(0)

let tabslist1 = ref([
  { id: "0", name: "自变量x", imgSrc: MathFuncX },
  { id: "1", name: "表达式y=F(x)", imgSrc: MathFuncFx },
  { id: "2", name: "因变量y", imgSrc: MathFuncY },
])

let xvaluelist = ref([
  { name: "00", value: 0, flag: 1 },
  { name: "00", value: 0, flag: 1 },
  { name: "00", value: 0, flag: 1 },
])

let textarea = ref(`import os
import numpy as np
from surromdao.solver import BaseSolver

class Branin(BaseSolver):
    def __init__(self, filename=os.path):
        super().__init__(filename)

    def compute(self, xdict):
        x = np.zeros(2)
        # x[1] = x[2]`);

let yvaluelist = ref([
  { name: "00", value: 0, flag: 1 },
  { name: "00", value: 0, flag: 1 },
  { name: "00", value: 0, flag: 1 },
  { name: "00", value: 0, flag: 1 },
  { name: "00", value: 0, flag: 1 },
  { name: "00", value: 0, flag: 1 },
])

let emit = defineEmits(['selectTab']);
const selectTab1 = (index) => {
  // console.log('dayin',index);
  currentTab1.value = index;
  // console.log('currentTab1',currentTab1.value);
  emit('selectTab', index);
}

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>