AIManage/src/views/model/uploadModel.vue

<template>
    <div class="app-container">
        <div class="search-container" style="padding-top:4px;">
            <h4>模型基本信息</h4>
        <el-form ref="uploadForm" :model="upForm" label-width="120" >
        <el-row>
            <el-col :span="12">
                <el-form-item label="模型名称">
                    <el-input v-model="upForm.name" placeholder="请输入模型名称"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="模型类型">
                    <el-select v-model="upForm.mtype1" placeholder="请选择" style="width: 48%">
                        <el-option   label="VIT" value="VIT" />
                        <el-option   label="Mobile-VIT" value="Mobile-VIT" />
                    </el-select>
                    <el-select v-model="upForm.mtype2" placeholder="请选择" style="width: 48%;margin-left:2%;">
                        <el-option   label="YoloV7Small" value="YoloV7Small" />
                        <el-option   label="YoloV7 Tiny" value="YoloV7 Tiny" />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="模型版本">
                    <el-input v-model="upForm.ver" placeholder="请输入模型版本"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="版本描述">
                    <el-input v-model="upForm.desc" type="textarea" style="width:100%;" :rows="4" placeholder="请输入版本描述"/>
                </el-form-item>
            </el-col>

        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="算法框架">
                    <el-select v-model="upForm.framework" placeholder="请选择" style="width: 48%;margin-left:2%;">
                        <el-option   label="PyToRch" value="PyToRch" />
                        <el-option   label="oCcn" value="oCcn" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="模型网络">
                    <el-select v-model="upForm.network" placeholder="请选择" style="width: 48%;margin-left:2%;">
                        <el-option   label="yolov7_tiny" value="yolov7_tiny" />
                        <el-option   label="yolov5_s" value="yolov5_s" />
                        <el-option   label="yolov5_m" value="yolov5_m" />
                        <el-option   label="yolov5_" value="yolov5_" />
                        <el-option   label="yolox_s" value="yolox_s" />
                        <el-option   label="yolox_m" value="yolox_m" />
                        <el-option   label="yolox_l" value="yolox_l" />
                    </el-select>
                </el-form-item>
            </el-col>

        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="文件格式">
                    <el-select v-model="upForm.fileFormat" placeholder="请选择" style="width: 48%;margin-left:2%;">
                        <el-option   label="onnx" value="onnx" />
                        <el-option   label="pth" value="pth" />
                        <el-option   label="pt" value="pt" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
               
            </el-col>

        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="网络参数">
                    <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"        
    :limit="1"
  >
    <el-button type="primary">请选择文件</el-button>
    <template #tip>
      <div class="el-upload__tip">
       请上传大小不超过<span  style="color:coral">10M</span>,格式为<span style="color:coral">onnx/ts</span>的文件
      </div>
    </template>
  </el-upload>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="网络配置">
                    <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"        
    :limit="1"
  >
    <el-button type="primary">请选择文件</el-button>
    <template #tip>
      <div class="el-upload__tip">
       请上传大小不超过<span  style="color:coral">10M</span>,格式为<span style="color:coral">json</span>的文件
      </div>
    </template>
  </el-upload>
                </el-form-item>
            </el-col>

        </el-row>
        </el-form>
        </div>
        <div class="div-log">
            <div style="font-weight: bold;font-size:14px;padding:10px 10px">分割日志</div>
            <el-card class="split-log">
            <div v-for="(it,idx) in logList" :key="idx" class="log-item">
                <span>{{ it.date }}</span>
                <span>{{it.log}}</span>
            </div>
            </el-card>
        </div>
<el-card class="card-footer">
      <el-button type="primary">分割</el-button>
      <el-button>取消</el-button>
    </el-card>
    </div>

</template>

<script  setup>
const uploadForm=ref(ElForm)
const upForm=reactive({
    name:''
})
const logList=reactive([{
    date:'2024-05-06 18:34:36',log:'系统已启动编译'
},{date:'2024-05-06 18:34:36',log:'系统正在分割目标文件'},
{date:'2024-05-06 18:34:36',log:'运行时异常，系统编译已终止'}])

</script>
<style scoped lang='scss'>
.card-footer{
  position: fixed;
  width: calc(100% - 215px);
  bottom: 0px; 
}
</style>