Explorar el Código

adflowtab增加图标,新增分片上传文件功能;

lichunyang hace 6 meses
padre
commit
c527566385

BIN
src/assets/img/analysisParams.png


BIN
src/assets/img/configParams.png


BIN
src/assets/img/inputParams.png


BIN
src/assets/img/meshFile.png


+ 284 - 290
src/views/components/fileuploads.vue

@@ -1,335 +1,329 @@
 <template>
   <div class="webuploader-container">
-        <div :id="'uploader'+upId">
-                <el-row>
-                    <!-- <el-col :span="6"> {{name}}  </el-col>                   
-                    <el-col :span="6"> <div :id="'picker'+upId" class="text_color" >选择文件</div>  </el-col> -->
-                    <!-- <el-button :id="'picker'+upId"> {{name}} </el-button> -->
-                    <div class="btntext upname wenjian" > {{ gfname}}</div>
-                    <div class="btntext upname" :id="'picker'+upId" style="width:28px;height:24px;">
-                        <img :src="imgSrc" alt="upload icon" class="custom-icon"/>
-                    </div>
-                </el-row>
-
-                <el-row v-for="(fileObj,key) in files" :key="key" class="disflex">
-                    <el-col :span="6">{{fileObj.name}} </el-col>
-                    <el-col :span="8"><el-progress :percentage="fileObj.percentage"></el-progress></el-col>
-                    <el-col :span="5">{{fileObj.msg}}</el-col>
-                    <el-col :span="5"> <el-button type="danger" @click="fileDel(fileObj.id)" :icon="Delete" circle /></el-col>
-                </el-row>
-                <!-- <el-button size="mini" @click="uploader.upload()">开始上传</el-button> -->
+    <div :id="'uploader' + upId">
+      <el-row>
+        <!-- <div class="btntext upname wenjian">{{ gfname }}</div> -->
+        <div
+          class="btntext upname"
+          :id="'picker' + upId"
+          style="width: 28px; height: 24px"
+        >
+          <img :src="imgSrc" alt="upload icon" class="custom-icon" />
         </div>
-    </div>
-
+      </el-row>
 
+      <!-- <el-row v-for="(fileObj, key) in files" :key="key" class="disflex">
+        <el-col :span="6">{{ fileObj.name }} </el-col>
+        <el-col :span="8"
+          ><el-progress :percentage="fileObj.percentage"></el-progress
+        ></el-col>
+        <el-col :span="5">{{ fileObj.msg }}</el-col>
+        <el-col :span="5">
+          <el-button
+            type="danger"
+            @click="fileDel(fileObj.id)"
+            :icon="Delete"
+            circle
+        /></el-col>
+      </el-row> -->
+      <!-- <el-button size="mini" @click="uploader.upload()">开始上传</el-button> -->
+    </div>
+  </div>
 </template>
 <script setup>
-import $ from 'jquery' ;
+import $ from "jquery"
 // import WebUploader from 'webuploader';
-import store from "@/store";
-import { request, uploadFile } from "@/utils/request";
-import { ElMessage, ElButton, ElDialog } from "element-plus";
-import {
-  Check,
-  Delete,
-  Edit,
-  Message,
-  Search,
-  Star,
-} from '@element-plus/icons-vue'
-const props = defineProps({ 
-        projectId: Number,
-        solverType: String,
-        accept:String,
-        upId:String,
-        name:String,
-        namelist:Array,//文件名的集合
-        gfname:String,
-        imgSrc:String, // 按钮logo
- });
- let emit = defineEmits(['Gassaddgfid', 'Gassaddbfid', 'upload-success'])
-let runupboolen=ref(true);
-let uploader=ref(undefined);
-let fileName=ref(undefined);
-let md5=ref('1212');
-let files=ref([]);
-let gfid=ref('');
-let bfid=ref('');
-let msg=ref();
-let nmllist=ref([]);
-let gridFileId=ref('');
-let boundaryFileId=ref('');
-let uuid=ref('');
-let nmlid=ref('');
-let hcfdBoundarys=ref([]);
+import store from "@/store"
+import { request, uploadFile } from "@/utils/request"
+import { ElMessage, ElButton, ElDialog } from "element-plus"
+import { Check, Delete, Edit, Message, Search, Star } from "@element-plus/icons-vue"
+const props = defineProps({
+  projectId: Number,
+  solverType: String,
+  accept: String,
+  upId: String,
+  name: String,
+  namelist: Array, //文件名的集合
+  gfname: String,
+  imgSrc: String // 按钮logo
+})
+let emit = defineEmits(["Gassaddgfid", "Gassaddbfid", "upload-success", "update-fileName", "update-percentage","upload-status"])
+let runupboolen = ref(true)
+let uploader = ref(undefined)
+let fileName = ref(undefined)
+let md5 = ref("1212")
+let files = ref([])
+let gfid = ref("")
+let bfid = ref("")
+let msg = ref()
+let nmllist = ref([])
+let gridFileId = ref("")
+let boundaryFileId = ref("")
+let uuid = ref("")
+let nmlid = ref("")
+let hcfdBoundarys = ref([])
 onMounted(() => {
-    initup();
+  initup()
+})
+const initup = () => {
+  getUUID()
+  uuid.value = getUUID()
+  initWebUploader()
+}
+const getUUID = () => {
+  return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0,
+      v = c == "x" ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+//fembdf绑定
+const fembdf = (bfid) => {
+  let params = {
+    transCode: "FEM001",
+    pid: props.projectId,
+    gridFileId: bfid
+  }
 
-});
-const initup=()=>{
-    getUUID()
- uuid.value= getUUID()
-    initWebUploader();
+  request(params)
+    .then((res) => {
+      console.log("绑定成功")
+    })
+    .catch((err) => {})
 }
-const getUUID=()=> {
-          return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-          
-              var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-              return v.toString(16);
-          })
-          
-     }
-      //fembdf绑定
-      const  fembdf=(bfid)=>{
-                let params = {
-                            transCode: "FEM001",
-                            pid: props.projectId,
-                            gridFileId:bfid,
-                            };
-                      
-                request(params)
-                    .then((res) => {
-                     console.log("绑定成功")
-                    
-                })
-                .catch((err) => {});
-            }
-const  initWebUploader=()=>{
-           files.value=[];
-           uploader.value=WebUploader.create({
-                // swf文件路径
-                swf: './Uploader.swf',
-                // 文件接收服务端。
-                server:import.meta.env.VITE_BASE_URL+'/TransServlet',
-                //文件上传请求的参数表,每次发送都会发送此对象中的参数。
-                formData: {
-                
-                },
-                // 选择文件的按钮。可选。
-                // 内部根据当前运行是创建,可能是input元素,也可能是flash.
-                pick: {
-                        id:'#picker'+props.upId,
-                        multiple:true
-                      },
-                // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
-                  resize: false,
-                // 开起分片上传。
-                chunked: true,
-                chunkSize: 2 * 1024 * 1024,
-                threads :4,
+const initWebUploader = () => {
+  files.value = []
+  uploader.value = WebUploader.create({
+    // swf文件路径
+    swf: "/public/webuploader/Uploader.swf",
+    // 文件接收服务端。
+    server: import.meta.env.VITE_BASE_URL + "/TransServlet",
+    //文件上传请求的参数表,每次发送都会发送此对象中的参数。
+    formData: {},
+    // 选择文件的按钮。可选。
+    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
+    pick: {
+      id: "#picker" + props.upId,
+      multiple: false
+    },
+    // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
+    resize: false,
+    // 开起分片上传。
+    chunked: true,
+    chunkSize: 2 * 1024 * 1024, // 2M
+    threads: 4
+  })
+  // 当有文件被添加进队列的时候
 
-            })
-            // 当有文件被添加进队列的时候
-      
-            uploader.value.on( 'fileQueued', file=> {
-                console.log(2222);
-               fileName.value=file.name;
-             console.log(fileName.value);
-                // const fax=fileName.value.slice(-4) 
-                const fax = fileName.value.split(".")[1];
-                console.log(fax)
-                if(props.accept.indexOf(fax)<0){//判断上传支持文件类型
-                    uploader.value.reset();
-                    ElMessage.error("只支持" +props.accept+"格式文件!");
-                    return;
-                }
-                uploader.value.md5File(file)
-                .progress(percentage=> {//显示加密进度
-                     console.log('Percentage:', percentage);
-                     })
-                .then(md5 =>{ // 完成
-                     md5.value=md5;
-             });
-                if(files.value.length>0){
-                   uploader.value.removeFile(files.value[0].id);
-                  files.value=[];
-                }
-              
-                files.value.push({
-                    id:file.id,
-                    name:file.name,
-                    msg:"等待上传...",
-                    percentage:0
-                })
-              uploader.value.upload();
-           
-            });
-            
-            /**文件发送前
+  uploader.value.on("fileQueued", (file) => {
+    fileName.value = file.name
+    console.log('fileName.value',fileName.value)
+     emit('update-fileName', fileName.value)
+     // 文件上传类型
+    const fax = fileName.value.split(".")[1]
+    if (props.accept.indexOf(fax) < 0) {
+      //判断上传支持文件类型
+      uploader.value.reset()
+      ElMessage.error("只支持" + props.accept + "格式文件!")
+      return
+    }
+    uploader.value
+      .md5File(file)
+      .progress((percentage) => {
+        //显示加密进度
+        console.log("Percentage:", percentage)
+      })
+      .then((md5) => {
+        // 完成
+        md5.value = md5
+      })
+    if (files.value.length > 0) {
+      uploader.value.removeFile(files.value[0].id)
+      files.value = []
+    }
+
+    files.value.push({
+      id: file.id,
+      name: file.name,
+      msg: "等待上传...",
+      percentage: 0
+    })
+    uploader.value.upload()
+  })
+
+  /**文件发送前
              *  object {Object}
                 data {Object}默认的上传参数,可以扩展此对象来控制上传参数。
                 headers {Object}可以扩展此对象来控制上传头部
              */
-             uploader.value.on('uploadBeforeSend', (file,data,headers)=> {
-               data.chunk=file.chunk;
-               data.chunks=file.chunks;
-               data.bfid=uuid.value;
-               data.fileName=fileName.value;
-              //  data.fid=v_this.projectId;
-            //    data.solverType=v_this.solverType;
-            //    data.md5=v_this.md5;
-            //    data.uploadFlag=2;//1 普通 2覆盖 3续传
-               data.channelNo ='service';
-               data.clientToken='e47b87eec69545559d1e81e56626da68';
-               data.transCode='B00028';
-               data.userId='5f06c8bc77234f969d13e160b54c27e3';
-               headers.Content='multipart';
-               headers.Type='form-data';
-
-            })
-           // 文件上传过程中创建进度条实时显示。
-           uploader.value.on( 'uploadProgress', ( file, percentage ) =>{
-                let prage= Math.floor(percentage*100);
-                files.value.forEach(fileObj=>{
-                    if(fileObj.id=file.id)
-                    fileObj.msg='上传中';
-                    msg.value=fileObj.msg;
-                    fileObj.percentage=prage;
-                })
-            });
-            uploader.value.on( 'uploadSuccess', ( file ,response) =>{
-              console.log('文件信息:',file);
-              console.log("返回值:",response);
-              gridFileId.value=response.bfid;
-              emit('upload-success', {
-                bfid:response.bfid,
-                fname: file.name
-              });
-                let params = {
-                    transCode: "B00029",
-                    bfid: response.bfid,
-                };
-                request(params)
-                    .then((res) => {
-                    console.log(res);
-                   files.value.forEach((fileObj) => {
-                        if ((fileObj.id === file.id)) {
-                        fileObj.msg = "已上传";
-                        msg.value=fileObj.msg;
-                       runupboolen.value=false;
-                    
-                        }
-                        if(file.ext=='x'){
-                    gfid.value= response.bfid;
-                    emit("Gassaddgfid", gfid.value);
-                }else if(file.ext=='inp'){
-                    bfid.value= response.bfid;
-                    emit("Gassaddbfid", bfid.value);
-                }
-                    });
-                    })
-                    .catch((err) => {});
-              
-              
-            });
-            //
-            /**
+  uploader.value.on("uploadBeforeSend", (file, data, headers) => {
+    data.chunk = file.chunk
+    data.chunks = file.chunks
+    data.bfid = uuid.value
+    data.fileName = fileName.value
+    //  data.fid=v_this.projectId;
+    //    data.solverType=v_this.solverType;
+    //    data.md5=v_this.md5;
+    //    data.uploadFlag=2;//1 普通 2覆盖 3续传
+    data.channelNo = "service"
+    data.clientToken = "e47b87eec69545559d1e81e56626da68"
+    data.transCode = "B00028"
+    data.userId = "5f06c8bc77234f969d13e160b54c27e3"
+    headers.Content = "multipart"
+    headers.Type = "form-data"
+  })
+  // 文件上传过程中创建进度条实时显示。
+  uploader.value.on("uploadProgress", (file, percentage) => {
+    let prage = Math.floor(percentage * 100)
+    files.value.forEach((fileObj) => {
+      if ((fileObj.id = file.id)) {
+        fileObj.msg = "上传中"
+        emit('upload-status', "上传中")
+        }
+      msg.value = fileObj.msg
+      fileObj.percentage = prage
+      // 更新进度条
+      emit('update-percentage', prage);
+      
+    })
+  })
+  uploader.value.on("uploadSuccess", (file, response) => {
+    console.log("文件信息:", file)
+    console.log("返回值:", response)
+    gridFileId.value = response.bfid
+    emit("upload-success", {
+      bfid: response.bfid,
+      fname: file.name,
+    })
+    let params = {
+      transCode: "B00029",
+      bfid: response.bfid
+    }
+    request(params)
+      .then((res) => {
+        console.log(res)
+        files.value.forEach((fileObj) => {
+          if (fileObj.id === file.id) {
+            fileObj.msg = "已上传"
+            emit('upload-status', "上传成功")
+            msg.value = fileObj.msg
+            runupboolen.value = false
+          }
+          if (file.ext == "x") {
+            gfid.value = response.bfid
+            emit("Gassaddgfid", gfid.value)
+          } else if (file.ext == "inp") {
+            bfid.value = response.bfid
+            emit("Gassaddbfid", bfid.value)
+          }
+        })
+      })
+      .catch((err) => {})
+  })
+  //
+  /**
              * 当某个文件上传到服务端响应后,会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为false, 则此文件将派送server类型的uploadError事件。
              * object {Object}
                 ret {Object}服务端的返回数据,json格式,如果服务端不是json格式,从ret._raw中取数据,自行解析
              */
-           uploader.value.on('uploadAccept',(object,res)=>{
-               if(res.returnCode=="000000000"){
-                   return true;
-               }else{
-                ElMessage.error(res.returnMsg);
-                   return false;
-               }
-            });
-           uploader.value.on( 'uploadError', ( file ,reason)=> {
-                $( '#'+file.id ).text(file.name+'上传出错');
-                getUUID();
-                   uuid.value= getUUID();
-            });
+  uploader.value.on("uploadAccept", (object, res) => {
+    if (res.returnCode == "000000000") {
+      return true
+    } else {
+      ElMessage.error(res.returnMsg)
+      return false
+    }
+  })
+  uploader.value.on("uploadError", (file, reason) => {
+    $("#" + file.id).text(file.name + "上传出错")
+    emit('upload-status', "上传失败")
+    getUUID()
+    uuid.value = getUUID()
+  })
 
-          uploader.value.on('uploadComplete', file => {
-                // $( '#'+file.id ).find('.progress').fadeOut();
-            });
-            
-        }
-        const uploaderClear=()=>{
-  
-             uploader.value.reset();
-             percentage.value=0;
-            files.value=[];
-        }
-     const fileDel=(fileId)=>{
-         console.log(fileId);
-                  getUUID();
-                   uuid.value= getUUID();
-           files.value=files.value.filter(fileObj=>{
-                if( fileObj.id == fileId){
-                       console.log(fileObj);
-                       fileObj.name=fileObj.name
-                       msg.value='';
-                  uploader.value.removeFile(fileId);  
-           
-                }
-               return  fileObj.id != fileId
-              
-            })     
-  
-        }
-        defineExpose({gfid,bfid,initWebUploader,files,msg})
+  uploader.value.on("uploadComplete", (file) => {
+    // $( '#'+file.id ).find('.progress').fadeOut();
+  })
+}
+const uploaderClear = () => {
+  uploader.value.reset()
+  percentage.value = 0
+  files.value = []
+}
+const fileDel = (fileId) => {
+  console.log(fileId)
+  getUUID()
+  uuid.value = getUUID()
+  files.value = files.value.filter((fileObj) => {
+    if (fileObj.id == fileId) {
+      console.log(fileObj)
+      fileObj.name = fileObj.name
+      msg.value = ""
+      uploader.value.removeFile(fileId)
+    }
+    return fileObj.id != fileId
+  })
+}
+defineExpose({ gfid, bfid, initWebUploader, files, msg })
 </script>
 <style>
 .webuploader-container {
-	position: relative;
+  position: relative;
 }
-.webuploader-pick{
-    color: #fff !important;
+.webuploader-pick {
+  color: #fff !important;
 }
 .webuploader-element-invisible {
-	position: absolute !important;
-	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-    clip: rect(1px,1px,1px,1px);
+  position: absolute !important;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
 }
 .webuploader-pick {
-	position: relative;
-	display: inline-block;
-	cursor: pointer;
-    padding: 1px 2px;
-    font-size: 12px;
-	color: #606266;
-	text-align: center;
-	border-radius: 3px;
-	overflow: hidden;
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  padding: 1px 2px;
+  font-size: 12px;
+  color: #606266;
+  text-align: center;
+  border-radius: 3px;
+  overflow: hidden;
 }
 .webuploader-pick-hover {
-	background: #00a2d4;
+  background: #00a2d4;
 }
 
 .webuploader-pick-disable {
-	opacity: 0.6;
-	pointer-events:none;
+  opacity: 0.6;
+  pointer-events: none;
 }
-.disflex{
-    display: flex;
-    align-items: center;
+.disflex {
+  display: flex;
+  align-items: center;
 }
-.text_color  .webuploader-pick{
-   color: #d5d5d5;
+.text_color .webuploader-pick {
+  color: #d5d5d5;
 }
-.el-progress__text{
- color: #d5d5d5 !important;
+.el-progress__text {
+  color: #d5d5d5 !important;
 }
-.disflex .el-col{
-color: #fff;
+.disflex .el-col {
+  color: #fff;
 }
-.disflex .el-icon{
-    font-size: 20px;
+.disflex .el-icon {
+  font-size: 20px;
 }
-.wenjian{
-    color: #fff;  
-    padding-right: 10px;
+.wenjian {
+  color: #fff;
+  padding-right: 10px;
 }
-.webuploader-container .el-icon{
-    color: #fff;
+.webuploader-container .el-icon {
+  color: #fff;
 }
 
 .custom-icon {
-    width: 100%; 
-    height: auto; 
-    display: block; 
+  width: 100%;
+  height: auto;
+  display: block;
 }
 </style>

+ 128 - 58
src/views/titlecomponent/ADflow.vue

@@ -8,6 +8,7 @@
         :class="{ active: currentTab1 === index }"
         @click="selectTab1(index)"
       >
+        <img :src="tab.imgSrc"/>
         {{ tab.name }}
       </li>
     </ul>
@@ -18,21 +19,51 @@
       style="margin-top: 10px"
       v-if="currentTab1 == '0'"
     >
-      <div style="display: flex">
-        <el-form-item label="选择路径" :label-width="formLabelWidth3">
-          <!-- <el-select v-model="zhixing" :suffix-icon="CaretBottom" placeholder="请选择">
-                            <el-option label="Rosenbrock" value="Rosenbrock">
-                            </el-option>
-                          </el-select> -->
-          <el-input
-            v-model="adflowvalue.gridfile"
-            :step="100"
-            :min="0"
-            :max="1000"
-            controls-position="right"
-          />
+      <div style="display: flex;flex-direction: column;">
+        <el-form-item label="网格文件:" :label-width="formLabelWidth3" style="width: 100%">
+          <el-row style="width: 100%">
+            <el-col :span="23">
+              <el-input
+                v-model="meshFileName"
+                readonly
+                :step="100"
+                :min="0"
+                :max="1000"
+                controls-position="right"
+              />
+            </el-col>
+            <!-- 文件上传按钮部分 -->
+            <el-col :span="1" style="display: flex; align-items: center; margin-left: -35px">
+              <fileUploads
+                :projectId="123" 
+                solverType="exampleSolver" 
+                accept=".cgns" 
+                upId="uniqueId1" 
+                name="点击选择文件"
+                :imgSrc="meshFileImgSrc"
+                @upload-success="handleFileUploadSuccess"
+                @update-fileName="updateFileName"
+                @update-percentage="updatePercentage"
+                @upload-status="getUploadStatus"
+              />
+            </el-col>
+          </el-row>
+          <!-- 进度条 -->
+          <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-col :span="2">
+              <el-button type="text" @click="fileDel" :icon="Delete" circle style="color: red; padding-bottom:25px;" />
+            </el-col> -->
+          </el-row>
         </el-form-item>
-        <el-button type="primary" style="margin-left: 10px">选择路径</el-button>
+      <div style="flex-grow: 1; height: 300px;">
+
+      </div>
       </div>
     </div>
     <!-- 来流参数 v-show="currentTab=='0'"-->
@@ -281,8 +312,18 @@
 <script  setup>
 import { ref, onMounted, reactive, provide, nextTick } from "vue"
 import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
-import { Edit, CaretBottom } from "@element-plus/icons-vue"
+import { Edit, CaretBottom, Delete } from "@element-plus/icons-vue"
 import { request, uploadFile } from "@/utils/request"
+import fileUploads from "../components/fileuploads.vue";
+import meshFile from "@/assets/img/meshFile.png";
+import inputParams from "@/assets/img/inputParams.png";
+import configParams from "@/assets/img/configParams.png";
+import analysisParams from "@/assets/img/analysisParams.png";
+const meshFileImgSrc = new URL("@/assets/img/open.png", import.meta.url).href;
+let meshFileName = ref('');
+let percentage = ref(0);
+let uploadStatus = ref('');
+let isUploadSuccess = ref(true);
 let formLabelWidth3 = ref(100)
 let formLabelWidth1 = ref(170)
 let formLabelWidth200 = ref(200)
@@ -313,21 +354,21 @@ let liftindexlist = ref([
 ])
 let inParams = ref([
   {
-    code:'alpha',
+    code: "alpha",
     value: 2.66482,
     name: "攻角",
     type: 1,
     flag: 1
   },
   {
-    code:'mach',
+    code: "mach",
     value: 0.734,
     name: "马赫数",
     type: 1,
     flag: 1
   },
   {
-    code:'reynolds',
+    code: "reynolds",
     value: 6.5e6,
     name: "雷诺数",
     type: 1,
@@ -366,7 +407,6 @@ let outParams = ref([
   }
 ])
 
-
 let adflowvalue = ref({
   gridfile: "",
   proname: "巡航工况",
@@ -379,58 +419,60 @@ let adflowvalue = ref({
   momz: 0,
   mgcycle: "sg",
   ncycles: 500,
-  l2convergence: 1.00E-5,
-  l2convergencecoarse: 1.00E-4,
+  l2convergence: 1.0e-5,
+  l2convergencecoarse: 1.0e-4
 })
 
-let wclist = ref([
-  { label: "巡航工况", value: "cruise" }
-])
+let wclist = ref([{ label: "巡航工况", value: "cruise" }])
 let tabslist1 = ref([
-  { id: "0", name: "网格文件" },
-  { id: "1", name: "来流参数" },
-  { id: "2", name: "设置参数" },
-  { id: "3", name: "分析参数" }
+  { id: "0", name: "网格文件", imgSrc: meshFile },
+  { id: "1", name: "来流参数", imgSrc: inputParams },
+  { id: "2", name: "设置参数", imgSrc: configParams },
+  { id: "3", name: "分析参数", imgSrc: analysisParams }
 ])
 const selectTab1 = (index) => {
   currentTab1.value = index
 }
 
 const convertToStringArray = (result, Data) => {
-  console.log('Data:', Data);
+  console.log("Data:", Data)
 
   // 安全检查 Data,确保它是一个数组
   if (!Array.isArray(Data)) {
-    console.error('Data should be an array');
-    return result; // 返回原 result 或者根据需要返回其他默认值
+    console.error("Data should be an array")
+    return result // 返回原 result 或者根据需要返回其他默认值
   }
 
-  result = Data.map(row => {
+  result = Data.map((row) => {
     // 获取每一行的 `code`, `name`, `value` 和 `flag`
-    const code = row.code || ' ';
-    const name = row.name || ' ';
-    const value = (row.value === null || row.value === undefined || row.value === '') ? ' ' : row.value;
-    const flag = row.flag || ' ';
+    const code = row.code || " "
+    const name = row.name || " "
+    const value =
+      row.value === null || row.value === undefined || row.value === ""
+        ? " "
+        : row.value
+    const flag = row.flag || " "
 
     // 将字段连接为一个以逗号分隔的字符串
-    return `${code},${name},${value},${flag}`;
-  }).join(';');  // 每行之间用分号分隔
+    return `${code},${name},${value},${flag}`
+  }).join(";") // 每行之间用分号分隔
 
-  return result;
+  return result
 }
 
 const getadflow = (id) => {
-  pid.value = id;
+  pid.value = id
   const params = {
     transCode: "MDO0049",
-    pid: pid.value,
-  };
-  request(params).then((res) => {
-    if (res.hasOwnProperty("adid")) {
-      getadflowAssign(res);
-    }
-  })
-  .catch((err) => {
+    pid: pid.value
+  }
+  request(params)
+    .then((res) => {
+      if (res.hasOwnProperty("adid")) {
+        getadflowAssign(res)
+      }
+    })
+    .catch((err) => {
       ElMessage.error(err.returnMsg)
     })
 }
@@ -459,7 +501,7 @@ const getadflowsave = () => {
     transCode: "MDO0050",
     pid: pid.value,
     gridfile: adflowvalue.value.gridfile,
-    fid:'', 
+    fid: "",
     proname: adflowvalue.value.proname,
     isairfoil: adflowvalue.value.isairfoil,
     temperature: adflowvalue.value.temperature,
@@ -472,27 +514,55 @@ const getadflowsave = () => {
     ncycles: adflowvalue.value.ncycles,
     l2convergence: adflowvalue.value.l2convergence,
     l2convergencecoarse: adflowvalue.value.l2convergencecoarse,
-    checked:1,
-    inParams: convertToStringArray([],inParams.value),
-    outParams: convertToStringArray([],outParams.value)
+    checked: 1,
+    inParams: convertToStringArray([], inParams.value),
+    outParams: convertToStringArray([], outParams.value)
   }
-  request(params).then((res) => {
-    ElMessage({
+  request(params)
+    .then((res) => {
+      ElMessage({
         message: res.returnMsg,
-        type: 'success',
+        type: "success"
       })
-  })
-  .catch((err) => {
+    })
+    .catch((err) => {
       ElMessage.error(err.returnMsg)
     })
 }
+// 更新文件名
+const updateFileName = (newValue) => {
+  meshFileName.value = newValue
+}
+
+// 更新进度条
+const updatePercentage = (newValue) => {
+  percentage.value = newValue
+}
+
+// 控制进度条显隐
+const showProgress = computed(() => percentage.value > 0 && percentage.value <= 100);
+
+// 处理上传成功后的逻辑
+const handleFileUploadSuccess = (newValue) => {
+  //隐藏进度条
+  setTimeout(() => {
+    percentage.value = 0;
+  }, 1000);
+}
+
+// 更新上传状态
+const getUploadStatus = (newValue) => {
+  uploadStatus.value = newValue
+}
+
+const fileDel = () => {
+}
 
 defineExpose({
   getadflow,
   getadflowAssign,
   getadflowsave
 })
-
 </script>