山东大学项目实训（十五）——文件列表、分类模型上传、合并工作以及最后的挣扎

今天是项目实训的最后一天，所有工作都要在今天收尾，今天我主要完成了之前遗留工作——文件列表一部分的实现，就是写了单个文件列表的逻辑，而将其复制到五个模块以及拓展至响应webgl页面则由前端另一位负责webgl交接的成员完成，主要代码大致如下：

<el-dialog title="确认" v-model="editVisible2" width="30%" >

      <el-table
          :data="tabledata2"
          style="width: 100%"
          @row-click="click2"
      >
        <template v-slot="scope">
        <el-table-column
            prop="name"
            label="文件名"
            width="360"
            border
            >
        </el-table-column>
        </template>
      </el-table>

      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click=";editVisible2 = false">确 定</el-button>
                </span>
      </template>
    </el-dialog>

const tabledata2=reactive([])
    const show2=()=>{
     xlist(param1).then((res)=>{
       tabledata2.splice(0,tabledata2.length)
      for(var i=0;i<res.data.length;i++)
      {
        tabledata2.push({name:res.data[i]})
      }
      editVisible2.value=true
     })
    }
    const click2=(row)=>{
      if(row)
      {
        const url2="http://106.14.19.174:8080/case/XPanorama/"+row.name+"?SESSION="+param1.SESSION+"&case_id="+param1.case_id
        console.log(url2)
      }

    }

提取固定后缀的代码则为：

const show2=()=>{
     xlist(param1).then((res)=>{
       tabledata2.splice(0,tabledata2.length)
      for(var i=0;i<res.data.length;i++)
      {
        if(res.data[i].match('jpg')||res.data[i].match('JPG')||res.data[i].match('png'))
        tabledata2.push({name:res.data[i]})
      }
      editVisible2.value=true
     })
    }

效果如下：

然后是分类模型的上传，主要是上传一个分类模型，就写在切割与分类界面了，代码如下：

<el-tab-pane label="分类算法模型替换">
      <el-upload :on-change="filechange3"  action="" drag >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">请上传新的分类模型文件（单个）并点击以下按钮完成替换</div>
      </el-upload>
      <el-button class="sale-button-default" type="primary" round @click="submitmodel">上传分类模型</el-button>
    </el-tab-pane>

 const file3=ref([])
    const filechange3=(file0)=>{
      file3.value=(file0.raw)
    }
    const submitmodel=()=>{
      let formData = new FormData();
      formData.append('file',file3.value);
      submitsortmodel(param0,formData).then((res)=>{
        if(res.code==200){
          ElMessage.success("文件上传成功")
        }
      }).catch(()=>{
        router.push('/login')
        ElMessage.error("登录信息失效，请重新登录")
      })

效果如下：

接着等到所有工作都差不多的时候，我进行了和另一位前端成员项目的合并，因为他主要负责webgl的嵌入和交接，我主要负责其他全部内容，所以我们是分开作业，项目合并也同样出现了几个BUG，比如：进入无文件的案例详细信息界面网页会崩掉，上传或删除文件有点问题，新建案例因为合并关系跳转崩溃等等，我也用了一部分时间修复了这些BUG，最后成功完成工作的合并。
到这里项目实训的工作也就基本完成了，接下来就是一些零碎的事情，录视频、写配音文案、突然出现BUG、修复BUG，最终赶在时间截止末尾把工作交了上去，也算是一番艰苦的挣扎吧。