From 1ce4aa9f12dcfd4221ccf5a8614ce0fd2d1baea9 Mon Sep 17 00:00:00 2001
From: haha <lj7788@126.com>
Date: Sun, 7 Jul 2024 00:09:42 +0800
Subject: [PATCH] update code

---
 src/views/model/modelDetail.vue |  60 ++++--
 src/views/model/uploadModel.vue | 318 ++++++++++++++++++--------------
 2 files changed, 227 insertions(+), 151 deletions(-)

diff --git a/src/views/model/modelDetail.vue b/src/views/model/modelDetail.vue
index 033c990..e7c410e 100644
--- a/src/views/model/modelDetail.vue
+++ b/src/views/model/modelDetail.vue
@@ -8,47 +8,61 @@
             <tr>
                 <td style="width: 50%;">
                     <span class="sp-title">模型名称:</span>
-                    <span class="sp-text">目标分类模型</span>
+                    <span class="sp-text">{{modelInfo.info.model_name}}</span>
                 </td>
                 <td style="width: 50%;">
                     <span class="sp-title">模型类型:</span>
-                    <span class="sp-text">目标分类</span>
+                    <span class="sp-text">{{modelInfo.info.modl_main_type_name}}
+                        /{{modelInfo.info.modl_sub_type_name}}
+                    </span>
                 </td>
             </tr>
             <tr>
                 <td style="width: 50%;">
                     <span class="sp-title">模型版本:</span>
-                    <span class="sp-text">1.0</span>
+                    <span class="sp-text">
+                        {{modelInfo.info.model_version}}
+                    </span>
                 </td>
                 <td style="width: 50%;">
                     <span class="sp-title">版本描述:</span>
-                    <span class="sp-text">进行10中类型的目标分类建模和一些其他操作。</span>
+                    <span class="sp-text">
+                        {{modelInfo.info.model_desc}}
+                    </span>
                 </td>
             </tr>
             <tr>
                 <td style="width: 50%;">
                     <span class="sp-title">模型网络:</span>
-                    <span class="sp-text">目标分类</span>
+                    <span class="sp-text">
+                        {{modelInfo.info.modl_net_type}}
+                    </span>
                 </td>
                 <td style="width: 50%;">
                     <span class="sp-title">上传用户:</span>
-                    <span class="sp-text">王大大</span>
+                    <span class="sp-text"> {{modelInfo.info.user_name}}</span>
                 </td>
             </tr>
             <tr>
                 <td style="width: 50%;">
                     <span class="sp-title">算法框架:</span>
-                    <span class="sp-text">ONNX</span>
+                    <span class="sp-text">
+                        {{modelInfo.info.modl_framework}}
+                    </span>
                 </td>
                 <td style="width: 50%;">
                     <span class="sp-title">上传时间:</span>
-                    <span class="sp-text">2023-12-12 12:12:12</span>
+                    <span class="sp-text">
+                        {{modelInfo.info.create_time}}
+                    </span>
                 </td>
             </tr>
             <tr>
                 <td style="width: 50%;">
                     <span class="sp-title">文件格式:</span>
-                    <span class="sp-text">ONNX</span>
+                    <span class="sp-text">
+                        {{modelInfo.info.modl_file_type}}
+                    </span>
                 </td>
                 <td style="width: 50%;">
                     <span class="sp-title">网络配置:</span>
@@ -62,10 +76,8 @@
     <el-card style="margin-top: 12px;">
         <template #header>
             <svg-icon  icon-class="pause" style="width:20px;height:20px;" />可适配算子</template>
-        <el-button>前处理-GRAY图像格式</el-button>
-        <el-button>前处理-GRAY图像格式</el-button>
-        <el-button>前处理-GRAY图像格式</el-button>
-        <el-button>前处理-RGB24图像格式</el-button>
+        <el-button v-for="(it,idx) in modelInfo.opers" :key="idx">{{ it.oper_type_name }}</el-button>
+        
     </el-card>
     <el-card style="margin-top: 12px;margin-bottom:60px;">
         <template #header>
@@ -82,11 +94,28 @@
 </template>
 
 <script  setup>
+import ModelApi from '@/api/models'
+import request from 'axios'
 const router = useRouter();
 const route =useRoute()
 let url=ref("")
+let modelInfo=reactive({
+    info:{},
+    opers:[]
+})
+const initData=()=>{    
+    let id=route.query.id;
+    let ajaxs=[];
+    ajaxs.push(ModelApi.findOne(id))
+    ajaxs.push(ModelApi.adaptOperators(id));
+    request.all(ajaxs).then(res=>{
+        modelInfo.info=res[0].data?.data||{};
+        modelInfo.opers=res[1].data?.data?.adapt_operator_list||[];
+    });
+};
 onMounted(()=>{
-  url.value="./onnx/onnx.html?url=/ai/siamRPN_192.onnx"
+  url.value="./onnx/onnx.html?url=/ai/siamRPN_192.onnx";
+  initData();
 });
 const doBack=()=>{
     if(route.query.from=='simulation'){
@@ -109,6 +138,9 @@ const doBack=()=>{
 }
 .tb-base-info{
     line-height: 30px;
+    :deep(span){
+        font-size: 14px;
+    }
 }
 :deep(.svg-icon){
     margin-right:8px;
diff --git a/src/views/model/uploadModel.vue b/src/views/model/uploadModel.vue
index 03750fe..bfca290 100644
--- a/src/views/model/uploadModel.vue
+++ b/src/views/model/uploadModel.vue
@@ -2,162 +2,206 @@
     <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-form ref="uploadForm" :rules="upRules" :model="upForm" label-width="120">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="模型名称" prop="model_name">
+                            <el-input v-model="upForm.model_name" placeholder="请输入模型名称" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="模型类型" prop="modl_main_type">
+                            <el-select v-model="upForm.modl_main_type" placeholder="请选择" style="width: 48%"
+                                @change="doMainTypeChange">
+                                <el-option v-for="(it, idx) in listOpt.modelType" :key="idx"
+                                    :label="it.modl_main_type_name" :value="it.modl_main_type" />
+                            </el-select>
+                            <el-select v-model="upForm.modl_sub_type" placeholder="请选择"
+                                style="width: 48%;margin-left:2%;">
+                                <el-option v-for="(it, idx) in listOpt.modelSubType" :key="idx"
+                                    :label="it.modl_sub_type_name" :value="it.modl_sub_type" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="模型版本" prop="model_version">
+                            <el-input v-model="upForm.model_version" 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="算法框架" prop="modl_framework">
+                            <el-select v-model="upForm.modl_framework" placeholder="请选择"
+                                style="width: 48%;margin-left:2%;">
+                                <el-option v-for="(it, idx) in listOpt.modelFramework" :label="it" :value="it"
+                                    :key="idx" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="模型网络" prop="modl_net_type">
+                            <el-select v-model="upForm.modl_net_type" placeholder="请选择" style="width: 48%;margin-left:2%;">
+                                <el-option v-for="(it,idx) in listOpt.modelNetType" :label="it" :value="it" :key="idx" />
+                                
+                            </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="文件格式" prop="modl_file_type">
+                            <el-select v-model="upForm.modl_file_type" placeholder="请选择" style="width: 48%;margin-left:2%;">
+                                <el-option v-for="(it,idx) in listOpt.modelFileType" :label="it" :value="it" :key="idx" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
 
-        </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-col>
 
-        </el-row>
-        </el-form>
+                </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>
+                <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" @click="doSave">分割</el-button>
-      <el-button @click="doBack">取消</el-button>
-    </el-card>
+        <el-card class="card-footer">
+            <el-button type="primary" @click="doSave">分割</el-button>
+            <el-button @click="doBack">取消</el-button>
+        </el-card>
     </div>
 
 </template>
 
-<script  setup>
+<script setup>
+import ConstApi from '@/api/const'
+import request from "axios";
 const router = useRouter();
-const doSave=()=>{
-    router.replace({path:"/modelMgr/index"})
-}
-const doBack=()=>{
-    router.replace({path:"/modelMgr/index"})
-}
-const uploadForm=ref(ElForm)
-const upForm=reactive({
-    name:''
+let listOpt = reactive({
+    modelType: [],
+    modelFramework: [],
+    modelNetType: [],
+    modelFileType: [],
+    modelSubType: [],
 })
-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:'运行时异常，系统编译已终止'}])
+const doSave = () => {
+    router.replace({ path: "/modelMgr/index" })
+}
+const doBack = () => {
+    router.replace({ path: "/modelMgr/index" })
+}
+const uploadForm = ref(ElForm)
+let upForm = reactive({
+    model_name: '',
+    model_version: '',
+    model_desc: '',
+    modl_main_type: '',
+    modl_sub_type: '',
+    modl_net_type: '',
+    modl_framework: '',
+    modl_file_type: '',
+    model_parameters: {},
+    model_file_list: []
+})
+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: '运行时异常，系统编译已终止' }])
+
+const upRules = computed(() => {
+    return {
+        model_name: [{required: true,trigger: "blur",message: "请输入模型名称",},],
+        modl_main_type: [{required: true,trigger: "blur",message: "请选择主类型",}],
+        model_version: [{required: true,trigger: "blur",message: "请输入模型版本",}],
+        modl_framework: [{required: true,trigger: "blur",message: "请选择算法框架",}],
+        modl_net_type: [{required: true,trigger: "blur",message: "请选择模型网络",}],
+        modl_file_type: [{required: true,trigger: "blur",message: "请选择文件类型",}],
+    }
+});
+
+const initData = () => {
+    let ajaxs = [];
+    ajaxs.push(ConstApi.modlMainType());
+    ajaxs.push(ConstApi.modlFramework());
+    ajaxs.push(ConstApi.modlNetType());
+    ajaxs.push(ConstApi.modlFileType());
+    request.all(ajaxs).then(res => {
+        listOpt.modelType = res[0].data?.data?.modl_main_type_list || [];
+        listOpt.modelFramework = res[1].data?.data?.modl_framework_list || [];
+        listOpt.modelNetType = res[2].data?.data?.model_net_type_list || [];
+        listOpt.modelFileType = res[3].data?.data?.modl_file_type_list || [];
+    });
+}
+const doMainTypeChange = () => {
+    let mainType = upForm.modl_main_type;
+    let subList = listOpt.modelType.filter(d => d.modl_main_type == mainType);
+    listOpt.modelSubType = subList.length > 0 ? subList[0].modl_sub_type_list || [] : [];
+}
+onMounted(() => {
+    initData();
+});
 
 </script>
 <style scoped lang='scss'>
-.card-footer{
-  position: fixed;
-  width: calc(100% - 215px);
-  bottom: 0px; 
+.card-footer {
+    position: fixed;
+    width: calc(100% - 215px);
+    bottom: 0px;
 }
-.div-log{
-    font-size:12px;
-    :deep(.el-card__body){
-            padding:8px;
-        }
+
+.div-log {
+    font-size: 12px;
+
+    :deep(.el-card__body) {
+        padding: 8px;
+    }
 }
 </style>
\ No newline at end of file