804爆炸演化加载动画

src/view/index/explode.vue

@@ -72,7 +72,7 @@ import zhCn from "element-plus/es/locale/lang/zh-cn"
 import { ref, onMounted, reactive } from "vue"
 import { RouterView, RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request"
-import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
+import { ElMessage, ElButton, ElDialog, ElSelect, ElLoading } from "element-plus"
 import { createGassControl } from "@/control/gassControl.js"
 import emitter from "@/utils/emitter"
 
@@ -451,6 +451,14 @@ function sliderchange(val) {
   fcon.step = count.value
 }
 function vtkGridRead() {
+  // 创建 loading 实例，绑定到 expleft3 容器
+  const loadingInstance = ElLoading.service({
+    target: '#expleft1',
+    lock: true,
+    text: '加载中...',
+    background: 'transparent',
+  });
+
   initVtk();
   const fcon = vtkObj.fcon
   aid.value = props.aid
@@ -465,13 +473,31 @@ function vtkGridRead() {
     fcon
       .initGemetry(aid.value)
       .then((result) => {
-        vtkScalarRead(count.value) //步数
+        vtkScalarRead(count.value, true) //步数
+      })
+      .catch((err) => { 
+        console.error('initGemetry 错误:', err);
       })
-      .catch((err) => { })
+      .finally(() => {
+          loadingInstance.close(); // 无论成功失败都关闭 loading
+      });
   
-  }).catch((err) => { })
+  }).catch((err) => { 
+    console.error('请求错误:', err);
+    loadingInstance.close();
+  })
 }
-function vtkScalarRead(step) {
+function vtkScalarRead(step, isshowloading = false) {
+  let loadingInstance = null;
+  if (isshowloading) {
+    // 创建 loading 实例，绑定到 expleft1 容器
+    loadingInstance = ElLoading.service({
+      target: '#expleft1',
+      lock: true,
+      text: '加载中...',
+      background: 'transparent',
+    });
+  }
   arr=[];
   let i=0;
   const fcon = vtkObj.fcon
@@ -498,6 +524,11 @@ function vtkScalarRead(step) {
     .catch((err) => {
       console.log(err)
     })
+    .finally(() => {
+      if (isshowloading) {
+        loadingInstance.close(); // 无论成功失败都关闭 loading
+      }
+    });
 }
  //深度监视
 const regionchange=(val)=>{

src/view/index/explode3d.vue

@@ -72,7 +72,7 @@ import zhCn from "element-plus/es/locale/lang/zh-cn"
 import { ref, onMounted, reactive } from "vue"
 import { RouterView, RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request"
-import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
+import { ElMessage, ElButton, ElDialog, ElSelect, ElLoading } from "element-plus"
 import { createGassControl } from "@/control/gassControl.js"
 import emitter from "@/utils/emitter"
 
@@ -456,6 +456,14 @@ function sliderchange(val) {
   fcon.step = count.value
 }
 function vtkGridRead() {
+  // 创建 loading 实例，绑定到 expleft3 容器
+  const loadingInstance = ElLoading.service({
+    target: '#expleft3',
+    lock: true,
+    text: '加载中...',
+    background: 'transparent',
+  });
+
   initVtk();
   const fcon = vtkObj.fcon
   aid.value = props.aid
@@ -470,13 +478,32 @@ function vtkGridRead() {
     fcon
       .initGemetry(aid.value)
       .then((result) => {
-        vtkScalarRead(count.value) //步数
+        vtkScalarRead(count.value, true) //步数
       })
-      .catch((err) => { })
-  
-  }).catch((err) => { })
+      .catch((err) => {
+        console.error('initGemetry 错误:', err);
+      })
+      .finally(() => {
+          loadingInstance.close(); // 无论成功失败都关闭 loading
+      });
+
+  }).catch((err) => {
+    console.error('请求错误:', err);
+    loadingInstance.close();
+  })
 }
-function vtkScalarRead(step) {
+function vtkScalarRead(step, isshowloading = false) {
+  let loadingInstance = null;
+  if (isshowloading) {
+    // 创建 loading 实例，绑定到 expleft3 容器
+    loadingInstance = ElLoading.service({
+      target: '#expleft3',
+      lock: true,
+      text: '加载中...',
+      background: 'transparent',
+    });
+  }
+
   arr=[];
   let i=0;
   const fcon = vtkObj.fcon
@@ -503,6 +530,11 @@ function vtkScalarRead(step) {
     .catch((err) => {
       console.log(err)
     })
+    .finally(() => {
+      if (isshowloading) {
+        loadingInstance.close();
+      }
+    });
 }
  //深度监视
 const regionchange=(val)=>{