threejs搭建

package-lock.json

@@ -33,6 +33,7 @@
         "pinia-plugin-persistedstate": "^3.2.0",
         "sass": "^1.71.1",
         "sass-loader": "^13.3.3",
+        "three": "^0.174.0",
         "v-scale-screen": "^2.2.0",
         "vite-plugin-monaco-editor": "^1.1.0",
         "vue": "^3.3.4",
@@ -7275,6 +7276,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/three": {
+      "version": "0.174.0",
+      "resolved": "https://registry.npmmirror.com/three/-/three-0.174.0.tgz",
+      "integrity": "sha512-p+WG3W6Ov74alh3geCMkGK9NWuT62ee21cV3jEnun201zodVF4tCE5aZa2U122/mkLRmhJJUQmLLW1BH00uQJQ=="
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",

package.json

@@ -35,6 +35,7 @@
     "pinia-plugin-persistedstate": "^3.2.0",
     "sass": "^1.71.1",
     "sass-loader": "^13.3.3",
+    "three": "^0.174.0",
     "v-scale-screen": "^2.2.0",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vue": "^3.3.4",

src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    CloudChart: typeof import('./components/cloudChart/index.vue')['default']
     Header: typeof import('./components/header.vue')['default']
     NavigateBar: typeof import('./components/layout/NavigateBar.vue')['default']
     PdfReportView: typeof import('./components/pdfReportView/index.vue')['default']

src/style/index.css

@@ -554,6 +554,9 @@ text-align: left;
   max-height: 730px;
   overflow-y: auto;
 }
+.cloudChart .el-dialog__body{
+  padding: 8px;
+}
 .custom-tree{
   width: 195px;
   /* 留出中间拖动位置 */
@@ -749,6 +752,10 @@ height: 30px;
   font-family: 'Source Sans Pro-Regular';
 }
 
+.dialog_style .cloudbox{
+  margin: 5px;
+}
+
 .dialog_style .cloudbox .el-button{
   color: #333333;
   font-size: 16px;

src/views/home.vue

@@ -867,8 +867,7 @@
           <!-- 云图/等值线图 -->
           <el-dialog v-model="dialog.clouddialog" align-center :modal="false" :close-on-click-modal="false"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
-            :before-close="handleClose" width="800" class="dialog_style bgcolor tianjia sel" style="max-height: 70%;">
-
+            :before-close="handleClose" width="800" class="dialog_style bgcolor tianjia sel cloudChart" style="height: 72%;">
             <template #header="{ titleId, titleClass }">
               <div class="my-header ">
                 <h4 :id="titleId" :class="titleClass">云图/等值线显示</h4>
@@ -886,9 +885,7 @@
                   </el-col>
                 </el-row>
               </div>
-              <div style="height: 300px;">
-
-              </div>
+              <cloudChart/>
             </div>
           </el-dialog>
           <!-- 云图二级弹窗 -->
@@ -1673,6 +1670,7 @@ import fileUploads from './components/fileuploads.vue'
 import Exreport from "./titlecomponent/Exreport.vue";
 import PythonEdit from '@/components/PythonEditor/index.vue'; // python编辑器
 import pdfReportView from '@/components/pdfReportView/index.vue'; //报告查看
+import cloudChart from './threejsView/index.vue'; // 云图
 
 let Sidebarref = ref();
 let resource=ref(0);

src/views/testThreejsView/components/ThreeScene.vue

@@ -1,193 +0,0 @@
-<template>
-  <div ref="threeContainer" class="three-container"></div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, watch } from "vue";
-import * as THREE from "three";
-import { VTKParserFactory } from "../utils/parsers/VTKParserFactory";
-import { UnstructuredGridRenderer } from "../utils/renderers/UnstructuredGridRenderer";
-import { PolyDataRenderer } from "../utils/renderers/PolyDataRenderer";
-import {
-  initScene,
-  initCamera,
-  initRenderer,
-  animateScene,
-  cleanupScene,
-  initControls,
-  initAxesHelper
-} from "../utils/threeUtils";
-
-const props = defineProps({
-  vtkData: {
-    type: Object,
-    required: true,
-  },
-});
-
-const threeContainer = ref(null);
-
-let scene, camera, renderer, controls, axesHelper;
-
-// 创建坐标系指示器
-const createAxesHelper = () => {
-  const axesHelper = new THREE.AxesHelper(20); // 50 是坐标轴的长度
-  axesHelper.position.set(-100, -100, 0); // 将坐标系指示器放置在左下角
-  console.log("Axes helper added to scene:", axesHelper); // 调试日志
-  // 添加标签
-  const labels = ['X', 'Y', 'Z'];
-  const colors = [0xff0000, 0x00ff00, 0x0000ff]; // 红、绿、蓝
-  labels.forEach((label, index) => {
-    const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: colors[index] }));
-    sprite.position.set(60 * (index === 0 ? 1 : 0), 60 * (index === 1 ? 1 : 0), 60 * (index === 2 ? 1 : 0));
-    axesHelper.add(sprite);
-  });
-  return axesHelper;
-};
-
-// 初始化场景
-const init = () => {
-  scene = initScene();
-  camera = initCamera();
-  renderer = initRenderer(threeContainer.value);
-  controls = initControls(camera, renderer);
-   // 初始化 AxesHelper
-  const { axesHelper, updateAxesHelperPosition } = initAxesHelper(scene, camera, renderer.domElement);
-  return { updateAxesHelperPosition };
-};
-
-const adjustCameraToFit = (scene, camera) => {
-  const box = new THREE.Box3().setFromObject(scene);
-  const size = new THREE.Vector3();
-  box.getSize(size);
-
-  const maxDim = Math.max(size.x, size.y, size.z);
-  const fov = camera.fov * (Math.PI / 180);
-  let cameraZ = Math.abs(maxDim / Math.sin(fov / 2));
-
-  const center = new THREE.Vector3();
-  box.getCenter(center);
-  camera.position.set(center.x, center.y, cameraZ);
-  camera.lookAt(center);
-};
-
-// 渲染 VTK 数据
-const renderVTK = (vtkData) => {
-  if (!vtkData) return;
-  // 根据文件格式选择解析器
-  const parser = VTKParserFactory.createParser(vtkData.datasetType);
-  const parsedData = parser.parse(vtkData);
-
-  // 根据文件格式选择渲染器
-  let dataRenderer;
-  switch (vtkData.datasetType) {
-    case "UNSTRUCTURED_GRID":
-      dataRenderer = new UnstructuredGridRenderer();
-      break;
-    case "POLYDATA":
-      dataRenderer = new PolyDataRenderer();
-      break;
-    default:
-      throw new Error(`Unsupported dataset type: ${vtkData.datasetType}`);
-  }
-
-  // 渲染数据
-  dataRenderer.render(parsedData, scene);
-
-  // 根据数据类型调整相机位置
-  if (vtkData.datasetType === "UNSTRUCTURED_GRID") {
-    adjustCameraForUnstructuredGrid(scene, camera);
-  } else if (vtkData.datasetType === "POLYDATA") {
-    adjustCameraForPolydata(scene, camera);
-  }
-
-  // adjustCameraToFit(scene, camera);
-};
-
-// 监听 vtkData 变化
-watch(
-  () => props.vtkData,
-  (newData) => {
-    if (newData) {
-      // 清空场景
-      while (scene.children.length > 0) {
-        scene.remove(scene.children[0]);
-      }
-
-      // 重新渲染 VTK 数据
-      renderVTK(newData);
-    }
-  },
-  { immediate: true }
-);
-
-// VTK 数据
-onMounted(() => {
-  const { updateAxesHelperPosition } = init();
-  animateScene(scene, camera, renderer, controls, () => {
-    updateAxesHelperPosition(); // 更新 AxesHelper 的位置和方向
-  });
-  // 监听窗口大小变化
-  window.addEventListener("resize", onWindowResize);
-});
-onUnmounted(() => {
-  // 清理场景
-  cleanupScene(renderer);
-  // 移除窗口大小变化监听器
-  window.removeEventListener("resize", onWindowResize);
-});
-
-const onWindowResize = () => {
-  const width = threeContainer.value.clientWidth;
-  const height = threeContainer.value.clientHeight;
-  camera.aspect = width / height;
-  camera.updateProjectionMatrix();
-  renderer.setSize(width, height);
-};
-
-const adjustCameraForUnstructuredGrid = (scene, camera) => {
-  const box = new THREE.Box3().setFromObject(scene);
-  const size = new THREE.Vector3();
-  box.getSize(size);
-
-  const maxDim = Math.max(size.x, size.y, size.z);
-  const fov = camera.fov * (Math.PI / 180);
-  let cameraZ = Math.abs(maxDim / Math.sin(fov / 2));
-
-  const center = new THREE.Vector3();
-  box.getCenter(center);
-  camera.position.set(center.x, center.y, cameraZ);
-  camera.lookAt(center);
-};
-
-const adjustCameraForPolydata = (scene, camera) => {
-  const box = new THREE.Box3().setFromObject(scene);
-  // 手动设置边界框
-  box.set(
-    new THREE.Vector3(-100, -100, -100),
-    new THREE.Vector3(100, 100, 100)
-  );
-  const size = new THREE.Vector3();
-  box.getSize(size);
-
-  console.log("Polydata bounding box:", box);
-  console.log("Polydata size:", size);
-
-  const maxDim = Math.max(size.x, size.y, size.z);
-  const fov = camera.fov * (Math.PI / 180);
-  let cameraZ = Math.abs(maxDim / Math.sin(fov / 2));
-
-  const center = new THREE.Vector3();
-  box.getCenter(center);
-  camera.position.set(center.x, center.y, cameraZ * 0.8); // 调整相机距离
-  camera.lookAt(center);
-};
-</script>
-
-<style>
-.three-container {
-  width: 100%;
-  height: calc(89vh - 8px); /* 给容器设置固定高度 */
-  border: 1px solid #ccc; /* 可选：添加边框以便查看容器范围 */
-}
-</style>

src/views/testThreejsView/index.vue

@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <ThreeScene :vtkData="vtkData"/>
-  </div>
-</template>
-
-<script setup>
-import ThreeScene from "./components/ThreeScene.vue";
-import useVtkStore  from '@/store/modules/vtkData';
-const vtkStore = useVtkStore(); // 使用 useVtkStore
-const route = useRoute();
-const vtkData = ref(null);
-onMounted(() => {
-
-  // 从 VtkStore 中获取数据
-  vtkData.value = vtkStore.getVTKData;
-  
-  if (!vtkData.value) {
-    console.error("未接收到 VTK 数据");
-    return;
-  }
-});
-
-onUnmounted(() => {
-  // 清除 VtkStore 中的数据
-  // vtkStore.clearVTKData();
-});
-</script>
-
-<style>
-</style> 

src/views/testThreejsView/utils/threeUtils.js

@@ -1,89 +0,0 @@
-import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-
-// 初始化场景
-export function initScene() {
-  const scene = new THREE.Scene();
-  scene.background = new THREE.Color(230 / 255, 231 / 255, 233 / 255); // 设置背景颜色
-  return scene;
-}
-
-// 初始化相机
-export function initCamera() {
-  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-  camera.position.set(100, 100, 300); // 调整相机位置
-  camera.lookAt(0, 0, 0); // 让相机看向点数据的中心
-  return camera;
-}
-
-// 初始化渲染器
-export function initRenderer(container) {
-  const renderer = new THREE.WebGLRenderer();
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  container.appendChild(renderer.domElement);
-  return renderer;
-}
-
-// 初始化轨道控制器
-export function initControls(camera, renderer) {
-  const controls = new OrbitControls(camera, renderer.domElement);
-  controls.enableDamping = true; // 启用阻尼效果，使操作更平滑
-  controls.dampingFactor = 0.05; // 阻尼系数
-  controls.screenSpacePanning = true; // 允许平移
-  controls.minDistance = 10; // 最小缩放距离
-  controls.maxDistance = 8000; // 最大缩放距离
-  return controls;
-}
-
-// 添加 AxesHelper 到场景
-export function initAxesHelper(scene, camera, container) {
-  if (!scene || !camera || !container) {
-    throw new Error("initAxesHelper: scene, camera, or container is undefined");
-  }
-  // 创建 AxesHelper
-  const axesHelper = new THREE.AxesHelper(10); // 设置 AxesHelper 的大小为 5
-  // 将 AxesHelper 添加到场景
-  scene.add(axesHelper);
-  // 更新 AxesHelper 的位置和方向
-  const updateAxesHelperPosition = () => {
-    // 将 AxesHelper 放置在屏幕左下角
-    const width = container.clientWidth;
-    const height = container.clientHeight;
-    const offset = 50; // 距离左下角的偏移量
-    // 计算屏幕左下角的坐标
-    const screenPosition = new THREE.Vector3(-width / 2 + offset, -height / 2 + offset, 0);
-    // 将屏幕坐标转换为世界坐标
-    const worldPosition = screenPosition.unproject(camera);
-    // 设置 AxesHelper 的位置
-    axesHelper.position.copy(worldPosition);
-    // 确保 AxesHelper 的方向与相机保持一致
-    axesHelper.quaternion.copy(camera.quaternion);
-    // 打印调试信息
-    console.log("AxesHelper Position:", worldPosition);
-    console.log("AxesHelper Quaternion:", axesHelper.quaternion);
-  };
-
-  // 返回 AxesHelper 对象和更新函数
-  return {
-    axesHelper,
-    updateAxesHelperPosition,
-  };
-}
-
-// 动画循环
-export const animateScene = (scene, camera, renderer, controls, updateCallback) => {
-  const animate = () => {
-    requestAnimationFrame(animate);
-    controls.update(); // 更新控制器
-    if (updateCallback) updateCallback(); // 调用回调函数
-    renderer.render(scene, camera);
-  };
-  animate();
-};
-
-// 清理场景
-export const cleanupScene = (renderer) => {
-  if (renderer) {
-    renderer.dispose();
-  }
-};

src/views/threejsView/components/ThreeScene.vue

@@ -0,0 +1,172 @@
+<template>
+  <div ref="threeContainer" class="three-container"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from "vue"
+import * as THREE from "three"
+import { VTKParserFactory } from "../utils/parsers/VTKParserFactory"
+import { UnstructuredGridRenderer } from "../utils/renderers/UnstructuredGridRenderer"
+import { PolyDataRenderer } from "../utils/renderers/PolyDataRenderer"
+import {
+  initScene,
+  initCamera,
+  initRenderer,
+  animateScene,
+  cleanupScene,
+  initControls,
+  createAxesHelper
+} from "../utils/threeUtils"
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  }
+})
+
+const threeContainer = ref(null)
+
+let scene, camera, renderer, controls
+
+// 初始化场景
+const init = () => {
+  scene = initScene();
+  camera = initCamera();
+  renderer = initRenderer(threeContainer.value);
+  controls = initControls(camera, renderer);
+  // createAxesHelper(scene); // 添加坐标轴指示器
+}
+
+const adjustCameraToFit = (scene, camera) => {
+  const box = new THREE.Box3().setFromObject(scene)
+  const size = new THREE.Vector3()
+  box.getSize(size)
+
+  const maxDim = Math.max(size.x, size.y, size.z)
+  const fov = camera.fov * (Math.PI / 180)
+  let cameraZ = Math.abs(maxDim / Math.sin(fov / 2))
+
+  const center = new THREE.Vector3()
+  box.getCenter(center)
+  camera.position.set(center.x, center.y, cameraZ)
+  camera.lookAt(center)
+}
+
+// 渲染 VTK 数据
+const renderVTK = (data) => {
+  if (!data) return
+  // 根据文件格式选择解析器
+  const parser = VTKParserFactory.createParser(data.datasetType)
+  const parsedData = parser.parse(data)
+
+  // 根据文件格式选择渲染器
+  let dataRenderer
+  switch (data.datasetType) {
+    case "UNSTRUCTURED_GRID":
+      dataRenderer = new UnstructuredGridRenderer()
+      break
+    case "POLYDATA":
+      dataRenderer = new PolyDataRenderer()
+      break
+    default:
+      throw new Error(`Unsupported dataset type: ${data.datasetType}`)
+  }
+
+  // 渲染数据
+  dataRenderer.render(parsedData, scene)
+
+  // 根据数据类型调整相机位置
+  if (data.datasetType === "UNSTRUCTURED_GRID") {
+    adjustCameraForUnstructuredGrid(scene, camera)
+  } else if (data.datasetType === "POLYDATA") {
+    adjustCameraForPolydata(scene, camera)
+  }
+
+  // adjustCameraToFit(scene, camera);
+}
+
+// 监听 data 变化
+watch(
+  () => props.data,
+  (newData) => {
+    if (newData) {
+      // 清空场景
+      while (scene.children.length > 0) {
+        scene.remove(scene.children[0])
+      }
+
+      // 重新渲染 VTK 数据
+      renderVTK(newData)
+    }
+  },
+  { immediate: true }
+)
+
+// VTK 数据
+onMounted(() => {
+  nextTick(() => {
+    init()
+    animateScene(scene, camera, renderer, controls)
+    // 监听窗口大小变化
+    window.addEventListener("resize", onWindowResize)
+  })
+})
+onUnmounted(() => {
+  // 清理场景
+  cleanupScene(renderer)
+  // 移除窗口大小变化监听器
+  window.removeEventListener("resize", onWindowResize)
+})
+
+const onWindowResize = () => {
+  const width = threeContainer.value.clientWidth
+  const height = threeContainer.value.clientHeight
+  camera.aspect = width / height
+  camera.updateProjectionMatrix()
+  renderer.setSize(width, height)
+}
+
+const adjustCameraForUnstructuredGrid = (scene, camera) => {
+  const box = new THREE.Box3().setFromObject(scene)
+  const size = new THREE.Vector3()
+  box.getSize(size)
+
+  const maxDim = Math.max(size.x, size.y, size.z)
+  const fov = camera.fov * (Math.PI / 180)
+  let cameraZ = Math.abs(maxDim / Math.sin(fov / 2))
+
+  const center = new THREE.Vector3()
+  box.getCenter(center)
+  camera.position.set(center.x, center.y, cameraZ)
+  camera.lookAt(center)
+}
+
+const adjustCameraForPolydata = (scene, camera) => {
+  const box = new THREE.Box3().setFromObject(scene)
+  // 手动设置边界框
+  box.set(new THREE.Vector3(-100, -100, -100), new THREE.Vector3(100, 100, 100))
+  const size = new THREE.Vector3()
+  box.getSize(size)
+
+  console.log("Polydata bounding box:", box)
+  console.log("Polydata size:", size)
+
+  const maxDim = Math.max(size.x, size.y, size.z)
+  const fov = camera.fov * (Math.PI / 180)
+  let cameraZ = Math.abs(maxDim / Math.sin(fov / 2))
+
+  const center = new THREE.Vector3()
+  box.getCenter(center)
+  camera.position.set(center.x, center.y, cameraZ * 0.8) // 调整相机距离
+  camera.lookAt(center)
+}
+</script>
+
+<style>
+.three-container {
+  width: 100%;
+  height: calc(60vh - 8px); /* 给容器设置固定高度 */
+  border: 1px solid #ccc; /* 可选：添加边框以便查看容器范围 */
+}
+</style>

src/views/threejsView/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div style="height: 400px">
+    <ThreeScene :data="cloudData"/>
+  </div>
+</template>
+
+<script setup>
+import ThreeScene from "./components/ThreeScene.vue";
+const cloudData = ref(null);
+onMounted(() => {
+});
+
+onUnmounted(() => {
+});
+</script>
+
+<style>
+</style> 

src/views/threejsView/utils/threeUtils.js

@@ -0,0 +1,101 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { ArrowHelper } from 'three';
+
+
+// 初始化场景
+export function initScene() {
+  const scene = new THREE.Scene();
+  scene.background = new THREE.Color(230 / 255, 231 / 255, 233 / 255); // 设置背景颜色
+  return scene;
+}
+
+// 初始化相机
+export function initCamera() {
+  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+  camera.position.set(100, 100, 300); // 调整相机位置
+  camera.lookAt(0, 0, 0); // 让相机看向点数据的中心
+  return camera;
+}
+
+// 初始化渲染器
+export function initRenderer(container) {
+  const renderer = new THREE.WebGLRenderer({ antialias: true }); // 可选：启用抗锯齿
+  console.log("container.clientWidth",container.clientWidth)
+  const width = container.clientWidth || 775; // 获取容器的宽度
+  const height = container.clientHeight || 410; // 获取容器的高度
+  renderer.setSize(width, height); // 根据容器尺寸设置渲染器大小
+  container.appendChild(renderer.domElement); // 将渲染器的 DOM 元素添加到容器中
+  return renderer;
+}
+
+// 初始化轨道控制器
+export function initControls(camera, renderer) {
+  const controls = new OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true; // 启用阻尼效果，使操作更平滑
+  controls.dampingFactor = 0.05; // 阻尼系数
+  controls.screenSpacePanning = true; // 允许平移
+  controls.minDistance = 10; // 最小缩放距离
+  controls.maxDistance = 8000; // 最大缩放距离
+  return controls;
+}
+
+// 创建坐标轴指示器
+export function createAxesHelper(scene) {
+  const axisLength = 50; // 坐标轴长度
+  const headLength = 15; // 箭头头部长度
+const headWidth = 8; // 箭头头部宽度
+  const origin = new THREE.Vector3(0, 0, 0); // 原点
+
+  // X 轴（红色）
+  const xAxis = new ArrowHelper(
+    new THREE.Vector3(1, 0, 0), // 方向
+    origin, // 起点
+    axisLength, // 长度
+    0xff0000, // 颜色（红色）
+    headLength,
+    headWidth
+  );
+
+  // Y 轴（绿色）
+  const yAxis = new ArrowHelper(
+    new THREE.Vector3(0, 1, 0), // 方向
+    origin, // 起点
+    axisLength, // 长度
+    0x00ff00, // 颜色（绿色）
+    headLength,
+    headWidth
+  );
+
+  // Z 轴（蓝色）
+  const zAxis = new ArrowHelper(
+    new THREE.Vector3(0, 0, 1), // 方向
+    origin, // 起点
+    axisLength, // 长度
+    0x0000ff, // 颜色（蓝色）
+    headLength,
+    headWidth
+  );
+
+  // 将坐标轴添加到场景中
+  scene.add(xAxis);
+  scene.add(yAxis);
+  scene.add(zAxis);
+}
+
+// 动画循环
+export const animateScene = (scene, camera, renderer, controls) => {
+  const animate = () => {
+    requestAnimationFrame(animate);
+    controls.update(); // 更新控制器
+    renderer.render(scene, camera);
+  };
+  animate();
+};
+
+// 清理场景
+export const cleanupScene = (renderer) => {
+  if (renderer) {
+    renderer.dispose();
+  }
+};

src/views/titlecomponent/Cloudsecond.vue

@@ -6,7 +6,6 @@
         <el-row style="width: 100%">
             <el-col :span="24">
               <el-input
-               
                 readonly
                 :step="100"
                 :min="0"
@@ -19,7 +18,7 @@
               <fileUploads
                 :projectId="123" 
                 solverType="exampleSolver" 
-                accept=".cgns" 
+                accept=".cgns,.xyz,.bdf" 
                 upId="uniqueId1" 
                 name="点击选择文件"
                 :imgSrc="meshFileImgSrc"
@@ -397,7 +396,7 @@ let filecheckbox = ref([
 
 
 let domainbtnbox1 = ref(['显示全部','隐藏全部','倒转互换'])
-let domainbtnbox2 = ref(['显示','隐藏','表明绘制'])
+let domainbtnbox2 = ref(['显示','隐藏','表面绘制'])
 
 
 let tableDatadomain = ref([