xyz文件上传增加进度条、加载模型增加loading；adflow加载模型增加loading

src/views/titlecomponent/ADflow.vue

@@ -61,7 +61,10 @@
             </el-col> -->
           </el-row>
         </el-form-item>
-      <div style="flex-grow: 1; height:300px">
+      <div
+        style="flex-grow: 1; height:300px" 
+        v-loading="isLoading"
+        element-loading-text="拼命加载中...">
         <cloudChart :data="cgnsData" :height=canvasHeight />
       </div>
       </div>
@@ -383,6 +386,7 @@ import { da } from "element-plus/es/locale/index.mjs";
 import cloudChart from "../threejsView/index.vue" // 云图
 const meshFileImgSrc = new URL("@/assets/img/open.png", import.meta.url).href;
 let canvasHeight = ref("300px")
+let isLoading = ref(false); // 控制 loading 状态
 let cgnsData = ref()
 let meshFileName = ref('');
 let percentage = ref(0);
@@ -784,6 +788,7 @@ const updatePercentage = (newValue) => {
 const showProgress = computed(() => percentage.value > 0 && percentage.value <= 100);
 
 const fetchCgnsData = async (fpid) =>{
+  isLoading.value = true;
   try {
     const response = await fetch('https://www.adicn.com/airopt/TransServlet', {
       method: 'POST',
@@ -799,6 +804,7 @@ const fetchCgnsData = async (fpid) =>{
       }),
     });
   }catch (error) {
+    isLoading.value = false;
     console.error("请求失败:", error.response || error);
   }
 }
@@ -821,7 +827,9 @@ const getCgnsData = async (fpid) =>{
   const data = await response.json(); //
   console.log('接口返回的数据:', data); // 正确打印数据
   cgnsData.value = data;
+  isLoading.value = false;
   }catch (error) {
+    isLoading.value = false;
     console.error("请求失败:", error.response || error);
   }
 }

src/views/titlecomponent/ffds.vue

@@ -15,10 +15,21 @@
               upId="ffds"
               name="点击选择文件"
               :imgSrc="imageSrc"
+              @update-percentage="updatePercentage"
               @upload-success="handleFileUploadSuccess"
+              @upload-status="getUploadStatus"
             />
           </template>
         </el-input>
+        <!-- 进度条 -->
+          <el-row v-if="showProgress" style="width: 100%; margin-top: 10px;">
+            <el-col :span="20">
+              <el-progress :percentage="percentage"></el-progress>
+            </el-col>
+            <el-col :span="4">
+              <div style="line-height: 15px">{{uploadStatus}}</div>
+            </el-col>
+          </el-row>
       </el-form-item>
       <el-form-item label="参考坐标系：" :label-width="formLabelWidth1">
         <el-radio-group v-model="order">
@@ -80,7 +91,10 @@
       </el-table>
     </div>
 
-    <div style="height: 260px; overflow: hidden;">
+    <div 
+      style="height: 260px; overflow: hidden;" 
+      v-loading="isLoading"
+      element-loading-text="拼命加载中...">
       <cloudChart :data="xyzData" :height=canvasHeight />
     </div>
   </div>
@@ -97,7 +111,9 @@ import cloudChart from "../threejsView/index.vue" // 云图
 import axios from 'axios';
 let formLabelWidth1 = ref("200")
 let xyzData = ref()
-
+let percentage = ref(0);
+let uploadStatus = ref('');
+let isLoading = ref(false); // 控制 loading 状态
 let pid = ref()
 let wid = ref()
 let fid = ref()
@@ -131,6 +147,16 @@ const imageSrc = new URL("@/assets/flowimg/ffdFileSave.png", import.meta.url)
   .href
 
 let canvasHeight = ref("260px")
+// 控制进度条显隐
+const showProgress = computed(() => percentage.value > 0 && percentage.value <= 100);
+// 更新进度条
+const updatePercentage = (newValue) => {
+  percentage.value = newValue
+}
+// 更新上传状态
+const getUploadStatus = (newValue) => {
+  uploadStatus.value = newValue
+}
 
 const headerCellClassName = ({ columnIndex }) => {
   if (columnIndex !== 0) {
@@ -303,6 +329,7 @@ const generateTable = () => {
 //   }
 // };
 const fetchXyzData = async (fpid) =>{
+  isLoading.value = true;
   try {
     const response = await fetch(`https://www.adicn.com/airopt/getXyz?fid=${fpid}`, {
       method: 'POST',
@@ -320,11 +347,17 @@ const fetchXyzData = async (fpid) =>{
   const data = await response.json(); //
   console.log('接口返回的数据:', data); // 正确打印数据
   xyzData.value = data;
+  isLoading.value = false;
   }catch (error) {
+    isLoading.value = false;
     console.error("请求失败:", error.response || error);
   }
 }
 const handleFileUploadSuccess = (data) => {
+  //隐藏进度条
+  setTimeout(() => {
+    percentage.value = 0;
+  }, 1000);
   ffdvalue.value.fname = data.fname
   fid.value = data.bfid
   console.log("文件上传成功，bfid:", data.bfid, "fname:", data.fname)