airoptweb/src/views/titlecomponent/ffds.vue

<template>
  <div class="XFpdding" style="height: 400px;overflow: auto;">
    <div>
      <el-form-item label="FFD包围盒：" :label-width="formLabelWidth1">
        <el-input
          v-model="ffdvalue.fname"
          :max="20"
          controls-position="right"
        >
          <template #append>
            <fileUploads
              :projectId="123"
              solverType="exampleSolver"
              accept=".xyz"
              upId="ffds"
              name="点击选择文件"
              :imgSrc="imageSrc"
              @upload-success="handleFileUploadSuccess"
            />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="参考坐标系：" :label-width="formLabelWidth1">
        <el-radio-group v-model="order">
          <el-radio :value="0" :label="0">x-y-z</el-radio>
          <el-radio :value="1" :label="1">x-z-y</el-radio>
          <el-radio :value="2" :label="2">y-x-z</el-radio>
          <el-radio :value="3" :label="3">y-z-x</el-radio>
          <el-radio :value="4" :label="4">z-x-y</el-radio>
          <el-radio :value="5" :label="5">z-y-x</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
    <el-form-item label="控制点数（X,Y,Z）：" :label-width="formLabelWidth1">
      <el-row style="width: 100%" :gutter="5">
        <el-col :span="6">
          <el-input-number
            style="width: 120px"
            v-model="ffdvalue.nx"
            controls-position="right"
          />
        </el-col>
        <el-col :span="6">
          <el-input-number
            style="width: 120px"
            v-model="ffdvalue.ny"
            controls-position="right"
          />
        </el-col>
        <el-col :span="6">
          <el-input-number
            style="width: 120px"
            v-model="ffdvalue.nz"
            controls-position="right"
          />
        </el-col>
        <el-col :span="6">
          <el-button @click="generateTable" style="width: 100%">应用</el-button>
        </el-col>
      </el-row>
    </el-form-item>
    
    <div class="classtable" style="margin-top: 20px;">
      <el-table
        :data="tableDatacst1"
        style="width: 100%;margin-bottom: 20px;"
        border
        
        :header-cell-class-name="headerCellClassName"
      >
        <el-table-column prop="rowname" label="" width="100" />
        <el-table-column
          v-for="(item,index) in tablecstHeaders" :key="index"
          :prop="item.prop"
          :label="item.label">
          <template #default="{ row }"> 
            <el-input v-model="row[item.prop]"  @change="handleEdit(row)"/>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="height: 260px; overflow: hidden;">
      <cloudChart :data="xyzData" />
    </div>
  </div>
</template>
<script  setup>
import { ref, onMounted, reactive, provide, nextTick } from "vue"
import { RouterView, RouterLink, useRouter, useRoute } from "vue-router"
import myheader from "@/components/header.vue"
import fileUploads from "../components/fileuploads.vue"
import { request, uploadFile } from "@/utils/request"
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import { Edit, CaretBottom } from "@element-plus/icons-vue"
import cloudChart from "../threejsView/index.vue" // 云图
let formLabelWidth1 = ref("200")
let xyzData = ref()

let pid = ref()
let wid = ref()
let fid = ref()
let ffdid = ref()
let ffdvalue = ref({
  fname: "204",
  nx: 10,
  ny: 2,
  nz: 2
})
let order = ref(1)
let vars = ref()
let tableDatacst1 = ref([
  { rowname: 'Y1Z1', X1: null, X2: null, X3: null, X4: null, X5: null, X6: null, X7: null, X8: null, X9: null },
  { rowname: 'Y1Z2', X1: null, X2: null, X3: null, X4: null, X5: null, X6: null, X7: null, X8: null, X9: null },
  { rowname: 'Y2Z1', X1: null, X2: null, X3: null, X4: null, X5: null, X6: null, X7: null, X8: null, X9: null },
  { rowname: 'Y2Z2', X1: null, X2: null, X3: null, X4: null, X5: null, X6: null, X7: null, X8: null, X9: null }
])
let tablecstHeaders = ref([
  { prop: "X1", label: "X1" },
  { prop: "X2", label: "X2" },
  { prop: "X3", label: "X3" },
  { prop: "X4", label: "X4" },
  { prop: "X5", label: "X5" },
  { prop: "X6", label: "X6" },
  { prop: "X7", label: "X7" },
  { prop: "X8", label: "X8" },
  { prop: "X9", label: "X9" }
])
const imageSrc = new URL("@/assets/flowimg/ffdFileSave.png", import.meta.url)
  .href

const headerCellClassName = ({ columnIndex }) => {
  if (columnIndex !== 0) {
    return "header-blue"
  }

  return ""
}

// for (let i = 0; i < yCount; i++) {
//   for(let j = 0; j< zCount; j++) {
//     rows.push({
//     label: `Y${i + 1}Z${j + 1}`,
//     prop: `Y${i + 1}Z${j + 1}`
//     })
//   }
// }

const generateTable = () => {
  console.log("generateTable")

  // 获取 X, Y, Z 方向的数值
  const xCount = Number(ffdvalue.value.nx)
  const yCount = Number(ffdvalue.value.ny)
  const zCount = Number(ffdvalue.value.nz)
  console.log("xCount", xCount, "yCount", yCount, "zCount", zCount)

  // 定义表格的列和行
  let columns = []
  let rows = []

  switch (order.value) {
    case 0: // x-y-z
      columns = Array.from({ length: xCount }, (_, i) => ({
        label: `X${i + 1}`,
        prop: `X${i + 1}`
      }))
      rows = Array.from({ length: yCount * zCount }, (_, index) => {
        const yIndex = Math.floor(index / zCount)
        const zIndex = index % zCount
        return {
          label: `Y${yIndex + 1}Z${zIndex + 1}`,
          prop: `Y${yIndex + 1}Z${zIndex + 1}`
        }
      })
      break
    case 1: // x-z-y
      columns = Array.from({ length: xCount }, (_, i) => ({
        label: `X${i + 1}`,
        prop: `X${i + 1}`
      }))
      rows = Array.from({ length: zCount * yCount }, (_, index) => {
        const zIndex = Math.floor(index / yCount)
        const yIndex = index % yCount
        return {
          label: `Z${zIndex + 1}Y${yIndex + 1}`,
          prop: `Z${zIndex + 1}Y${yIndex + 1}`
        }
      })
      break
    case 2: // y-x-z
      columns = Array.from({ length: yCount }, (_, i) => ({
        label: `Y${i + 1}`,
        prop: `Y${i + 1}`
      }))
      rows = Array.from({ length: xCount * zCount }, (_, index) => {
        const xIndex = Math.floor(index / zCount)
        const zIndex = index % zCount
        return {
          label: `X${xIndex + 1}Z${zIndex + 1}`,
          prop: `X${xIndex + 1}Z${zIndex + 1}`
        }
      })
      break
    case 3: // y-z-x
      columns = Array.from({ length: yCount }, (_, i) => ({
        label: `Y${i + 1}`,
        prop: `Y${i + 1}`
      }))
      rows = Array.from({ length: zCount * xCount }, (_, index) => {
        const zIndex = Math.floor(index / xCount)
        const xIndex = index % xCount
        return {
          label: `Z${zIndex + 1}X${xIndex + 1}`,
          prop: `Z${zIndex + 1}X${xIndex + 1}`
        }
      })
      break
    case 4: // z-x-y
      columns = Array.from({ length: zCount }, (_, i) => ({
        label: `Z${i + 1}`,
        prop: `Z${i + 1}`
      }))
      rows = Array.from({ length: xCount * yCount }, (_, index) => {
        const xIndex = Math.floor(index / yCount)
        const yIndex = index % yCount
        return {
          label: `X${xIndex + 1}Y${yIndex + 1}`,
          prop: `X${xIndex + 1}Y${yIndex + 1}`
        }
      })
      break
    case 5: // z-y-x
      columns = Array.from({ length: zCount }, (_, i) => ({
        label: `Z${i + 1}`,
        prop: `Z${i + 1}`
      }))
      rows = Array.from({ length: yCount * xCount }, (_, index) => {
        const yIndex = Math.floor(index / xCount)
        const xIndex = index % xCount
        return {
          label: `Y${yIndex + 1}X${xIndex + 1}`,
          prop: `Y${yIndex + 1}X${xIndex + 1}`
        }
      })
      break
    default:
      console.error('无效的 order 值:', order.value)
      break
  }

  // 更新表格列头
  tablecstHeaders.value = columns

  // 生成表格的数据行
  tableDatacst1.value = []
  for (let i = 1; i <= rows.length; i++) {
    let row = { rowname: rows[i - 1].label }
    columns.forEach((column) => {
      row[column.prop] = null // 每个单元格初始化为空
    })
    tableDatacst1.value.push(row)
  }
}

// const generateTable = () => {
//   // 获取 X, Y, Z 方向的数值
//   const xCount = Number(ffdvalue.value.nx);
//   const yCount = Number(ffdvalue.value.ny);
//   const zCount = Number(ffdvalue.value.nz);

//   // 计算总行数
//   const rowCount = xCount * yCount * zCount;

//   // 确定最大维度
//   const maxCount = Math.max(xCount, yCount, zCount);
//   let maxAxis = "x";
//   if (yCount === maxCount) maxAxis = "y";
//   if (zCount === maxCount) maxAxis = "z";

//   // 清空表格数据
//   tableDatacst1.value = [];

//   // 循环填充数据
//   for (let i = 0; i < rowCount; i++) {
//     // 计算 x, y, z 的索引
//     const xIndex = i + 1;
//     const yIndex = i + 1;
//     const zIndex = i + 1;

//     // 构造 row 数据
//     const row = {
//       x: maxAxis === "x" ? xIndex : i < xCount ? xIndex : "/",
//       y: maxAxis === "y" ? yIndex : i < yCount ? yIndex : "/",
//       z: maxAxis === "z" ? zIndex : i < zCount ? zIndex : "/",
//     };

//     // 追加到 table 数据中
//     tableDatacst1.value.push(row);
//   }
// };

const handleFileUploadSuccess = (data) => {
  ffdvalue.value.fname = data.fname
  fid.value = data.bfid
  console.log("文件上传成功，bfid:", data.bfid, "fname:", data.fname)
  //bwb
  xyzData.value = {
    "data": {
      "uvw": [4, 2, 4],
      "datasetType": "xyz",
      "points": [0, -3.1, -23.5, 10.00333333, -3.1, -23.5, 20.00666667, -3.1, -23.5, 30.01, -3.1, -23.5, 0, 3, -23.5, 10.00333333, 3, -23.5, 20.00666667, 3, -23.5, 30.01, 3, -23.5, 0, -3.1, -3.98354861, 10.00333333, -3.1, -3.98354861, 20.00666667, -3.1, -3.98354861, 30.01, -3.1, -3.98354861, 0, 3, -3.98354861, 10.00333333, 3, -3.98354861, 20.00666667, 3, -3.98354861, 30.01, 3, -3.98354861, 0, -3.1, 10.4801155, 10.00333333, -3.1, 10.4801155, 20.00666667, -3.1, 10.4801155, 30.01, -3.1, 10.4801155, 0, 3, 10.4801155, 10.00333333, 3, 10.4801155, 20.00666667, 3, 10.4801155, 30.01, 3, 10.4801155, 0, -3.1, 23.5, 10.00333333, -3.1, 23.5, 20.00666667, -3.1, 23.5, 30.01, -3.1, 23.5, 0, 3, 23.5, 10.00333333, 3, 23.5, 20.00666667, 3, 23.5, 30.01, 3, 23.5]
    }
  }
  // ffd
  // xyzData.value = {
  //   data: {
  //     uvw: [10, 2, 2],
  //     datasetType: "xyz",
  //     points: [
  //       -0.001, -0.02221365166194, 0, 0.110333333333333, -0.0666100429735, 0,
  //       0.221666666666667, -0.0746911997999, 0, 0.333, -0.0742001960868, 0,
  //       0.444333333333333, -0.0687689907986, 0, 0.555666666666667,
  //       -0.059906331372, 0, 0.667, -0.0489160613387, 0, 0.778333333333333,
  //       -0.0359079976976, 0, 0.889666666666667, -0.0213458626849, 0, 1.001,
  //       -0.005339065876895, 0, -0.001, 0.020015, 0, 0.110333333333333,
  //       0.0666100429762, 0, 0.221666666666667, 0.0746911998011, 0, 0.333,
  //       0.0742001960863, 0, 0.444333333333333, 0.0687689907954, 0,
  //       0.555666666666667, 0.059906331369, 0, 0.667, 0.0489160613418, 0,
  //       0.778333333333333, 0.0359079976956, 0, 0.889666666666667,
  //       0.0213458626807, 0, 1.001, 0.004985000012241, 0, -0.001,
  //       -0.02221365166194, 1, 0.110333333333333, -0.0666100429735, 1,
  //       0.221666666666667, -0.0746911997999, 1, 0.333, -0.0742001960868, 1,
  //       0.444333333333333, -0.0687689907986, 1, 0.555666666666667,
  //       -0.059906331372, 1, 0.667, -0.0489160613387, 1, 0.778333333333333,
  //       -0.0359079976976, 1, 0.889666666666667, -0.0213458626849, 1, 1.001,
  //       -0.005339065876895, 1, -0.001, 0.020015, 1, 0.110333333333333,
  //       0.0666100429762, 1, 0.221666666666667, 0.0746911998011, 1, 0.333,
  //       0.0742001960863, 1, 0.444333333333333, 0.0687689907954, 1,
  //       0.555666666666667, 0.059906331369, 1, 0.667, 0.0489160613418, 1,
  //       0.778333333333333, 0.0359079976956, 1, 0.889666666666667,
  //       0.0213458626807, 1, 1.001, 0.004985000012241, 1
  //     ]
  //   }
  // }

  // xyzData.value = {"0":{"x":0,"y":-3.1,"z":-23.5},"1":{"x":10.00333333,"y":-3.1,"z":-23.5},"2":{"x":20.00666667,"y":-3.1,"z":-23.5},"3":{"x":30.01,"y":-3.1,"z":-23.5},"4":{"x":0,"y":3,"z":-23.5},"5":{"x":10.00333333,"y":3,"z":-23.5},"6":{"x":20.00666667,"y":3,"z":-23.5},"7":{"x":30.01,"y":3,"z":-23.5},"8":{"x":0,"y":-3.1,"z":-3.98354861},"9":{"x":10.00333333,"y":-3.1,"z":-3.98354861},"10":{"x":20.00666667,"y":-3.1,"z":-3.98354861},"11":{"x":30.01,"y":-3.1,"z":-3.98354861},"12":{"x":0,"y":3,"z":-3.98354861},"13":{"x":10.00333333,"y":3,"z":-3.98354861},"14":{"x":20.00666667,"y":3,"z":-3.98354861},"15":{"x":30.01,"y":3,"z":-3.98354861},"16":{"x":0,"y":-3.1,"z":10.4801155},"17":{"x":10.00333333,"y":-3.1,"z":10.4801155},"18":{"x":20.00666667,"y":-3.1,"z":10.4801155},"19":{"x":30.01,"y":-3.1,"z":10.4801155},"20":{"x":0,"y":3,"z":10.4801155},"21":{"x":10.00333333,"y":3,"z":10.4801155},"22":{"x":20.00666667,"y":3,"z":10.4801155},"23":{"x":30.01,"y":3,"z":10.4801155},"24":{"x":0,"y":-3.1,"z":23.5},"25":{"x":10.00333333,"y":-3.1,"z":23.5},"26":{"x":20.00666667,"y":-3.1,"z":23.5},"27":{"x":30.01,"y":-3.1,"z":23.5},"28":{"x":0,"y":3,"z":23.5},"29":{"x":10.00333333,"y":3,"z":23.5},"30":{"x":20.00666667,"y":3,"z":23.5},"31":{"x":30.01,"y":3,"z":23.5}}
  // xyzData.value = {"0":{"x":-0.05,"y":-0.25,"z":-0.01},"1":{"x":0.53333333,"y":-0.25,"z":-0.01},"2":{"x":1.11666667,"y":-0.25,"z":-0.01},"3":{"x":1.7,"y":-0.25,"z":-0.01},"4":{"x":-0.05,"y":0.25,"z":-0.01},"5":{"x":0.53333333,"y":0.25,"z":-0.01},"6":{"x":1.11666667,"y":0.25,"z":-0.01},"7":{"x":1.7,"y":0.25,"z":-0.01},"8":{"x":-0.05,"y":-0.25,"z":2.27799249},"9":{"x":0.53333333,"y":-0.25,"z":2.27799249},"10":{"x":1.11666667,"y":-0.25,"z":2.27799249},"11":{"x":1.7,"y":-0.25,"z":2.27799249},"12":{"x":-0.05,"y":0.25,"z":2.27799249},"13":{"x":0.53333333,"y":0.25,"z":2.27799249},"14":{"x":1.11666667,"y":0.25,"z":2.27799249},"15":{"x":1.7,"y":0.25,"z":2.27799249},"16":{"x":-0.05,"y":-0.25,"z":3.97362631},"17":{"x":0.53333333,"y":-0.25,"z":3.97362631},"18":{"x":1.11666667,"y":-0.25,"z":3.97362631},"19":{"x":1.7,"y":-0.25,"z":3.97362631},"20":{"x":-0.05,"y":0.25,"z":3.97362631},"21":{"x":0.53333333,"y":0.25,"z":3.97362631},"22":{"x":1.11666667,"y":0.25,"z":3.97362631},"23":{"x":1.7,"y":0.25,"z":3.97362631},"24":{"x":-0.05,"y":-0.25,"z":5.5},"25":{"x":0.53333333,"y":-0.25,"z":5.5},"26":{"x":1.11666667,"y":-0.25,"z":5.5},"27":{"x":1.7,"y":-0.25,"z":5.5},"28":{"x":-0.05,"y":0.25,"z":5.5},"29":{"x":0.53333333,"y":0.25,"z":5.5},"30":{"x":1.11666667,"y":0.25,"z":5.5},"31":{"x":1.7,"y":0.25,"z":5.5}}
}

// 用来生成 vars，存储表格中除了行名与列名的所有值
const generateVars = () => {
  let values = []

  tableDatacst1.value.forEach((row) => {
    tablecstHeaders.value.forEach((col) => {
      let value = row[col.prop]
      if (value === null || value === undefined || value === "") {
        value = " "
      }
      values.push(value)
    })
  })

  // 将值拼接成用逗号分隔的字符串
  vars.value = values.join(",")
}

// 用来初始化表格，将 vars 中的值填充到表格中
const initializeTableFromVars = () => {
  if (!vars.value) return

  const values = vars.value.split(",")
  console.log("ffdchaxun", values)

  let index = 0

  // 遍历 tableDatacst1 中的每一行
  tableDatacst1.value.forEach((row) => {
    tablecstHeaders.value.forEach((col) => {
      if (index < values.length) {
        // 将解析后的值赋给相应的单元格
        row[col.prop] = values[index] === " " ? "" : values[index] // 空格用空字符串代替
        index++
      }
    })
  })
}

// ffd查询
const getffds = (id,nowid) => {
  pid.value = id;
  wid.value = nowid;
  const params = {
    transCode: "MDO0043",
    pid: pid.value,
    wid: wid.value
  }
  request(params)
    .then((res) => {
      if (res.hasOwnProperty("ffdid")) {
        // ffdid.value = res.ffdid;
        // ffdvalue.value.fname = res.fname;
        // ffdvalue.value.nx = res.nx;
        // ffdvalue.value.ny = res.ny;
        // ffdvalue.value.nz = res.nz;
        // order.value = Number(res.order);
        // vars.value = res.vars;
        // generateTable();
        // initializeTableFromVars();

        getffdsAssign(res)
      }
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}

const getffdsAssign = (data) => {
  pid.value = data.pid
  ffdid.value = data.ffdid
  ffdvalue.value.fname = data.fname
  ffdvalue.value.nx = data.nx
  ffdvalue.value.ny = data.ny
  ffdvalue.value.nz = data.nz
  order.value = Number(data.order)
  vars.value = data.vars
  generateTable()
  // initializeTableFromVars()
}

// ffd保存
const getffdsave = (id,nowid) => {
  if(nowid){
    wid.value = nowid
  }
  pid.value = id;
  // generateVars()
  const params = {
    transCode: "MDO0044",
    pid: pid.value,
    wid: wid.value,
    fid: fid.value,
    fname: ffdvalue.value.fname,
    nx: ffdvalue.value.nx,
    ny: ffdvalue.value.ny,
    nz: ffdvalue.value.nz,
    order: order.value,
    vars: vars.value,
    checked: 1
  }
  request(params)
    .then((res) => {
      ElMessage({
        message: '保存成功',
        type: "success"
      })
    })
    .catch((err) => {
      ElMessage.error('保存失败')
    })
}

defineExpose({ getffds, getffdsAssign, getffdsave })
</script>