From 493aa5d81e359a284688b769e3973249b58c8a31 Mon Sep 17 00:00:00 2001
From: haha <lj7788@126.com>
Date: Tue, 18 Jun 2024 01:04:33 +0800
Subject: [PATCH] update code

---
 src/api/menu/index.ts           |  13 ++
 src/views/model/index.vue       | 207 +++++++++++++++++++++++++++++++-
 src/views/model/uploadModel.vue | 127 ++++++++++++++++++++
 3 files changed, 342 insertions(+), 5 deletions(-)
 create mode 100644 src/views/model/uploadModel.vue

diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts
index 04aea84..6c43b6a 100644
--- a/src/api/menu/index.ts
+++ b/src/api/menu/index.ts
@@ -33,6 +33,19 @@ class MenuAPI {
                 keepAlive: true,
                 alwaysShow: false,
               },
+            },
+            {
+              path: "uploadModel",
+              component: "model/uploadModel",
+              name: "uploadModel",
+              meta: {
+                title: "模型管理",
+                icon: "user",
+                hidden: true,
+                roles: ["ADMIN", "GUEST"],
+                keepAlive: true,
+                alwaysShow: false,
+              },
             }
           ],
         },
diff --git a/src/views/model/index.vue b/src/views/model/index.vue
index 2310889..68382a1 100644
--- a/src/views/model/index.vue
+++ b/src/views/model/index.vue
@@ -1,11 +1,208 @@
+<!-- 用户管理 -->
 <template>
-  <div>
-1111111111
+  <div class="app-container">
+    <div class="search-container">      
+      <el-button type="primary" @click="doUploadModel" ><i-ep-plus />上传模型</el-button>
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true" style="flex-grow: 1;text-align: right;">
+        <el-form-item label="" prop="keywords">
+          <el-input v-model="queryParams.keywords" placeholder="请输入模型名称" clearable style="width: 200px"
+            @keyup.enter="handleQuery" />
+        </el-form-item>        
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
+          <el-button @click="resetQuery">
+            <i-ep-refresh />
+            重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
 
+    <el-card shadow="never" class="table-container">      
+
+      <el-table v-loading="loading" :data="tableData" stripe @selection-change="handleSelectionChange">
+        <el-table-column label="模型名称" align="left" prop="name" width="300"/>
+        <el-table-column label="网络名称" align="left" prop="netName" />
+        <el-table-column label="模型类型"  align="left" prop="modelType" />
+        <el-table-column label="版本" align="left" prop="ver" />
+        <el-table-column label="说明" width="300" align="left" prop="desc" />
+        <el-table-column label="上传时间" width="120" align="left" prop="upTime" />
+        <el-table-column label="上传用户" width="100" align="left" prop="upUser" />
+        <el-table-column label="操作" fixed="right" width="250">
+          <template #default="scope">
+            <el-button text type="primary" size="small"
+              @click="openDialog('user-form', scope.row.id)"><i-ep-edit />查看</el-button>
+            <el-button text type="primary" size="small"
+              @click="openDialog('user-form', scope.row.id)"><i-ep-link/>互联</el-button>
+            <el-button text type="primary" size="small" @click="handleDelete(scope.row)"><i-ep-delete />删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="card-footer">
+      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
+    </el-card>
   </div>
 </template>
 
-<script  setup>
+<script setup lang="ts">
+defineOptions({
+  name: "calculateIndex",
+  inheritAttrs: false,
+});
+
+import { UserQuery } from "@/api/user/model";
+
+const queryFormRef = ref(ElForm); // 查询表单
+const router = useRouter();
+
+const loading = ref(false); //  加载状态
+const removeIds = ref([]); // 删除用户ID集合 用于批量删除
+const queryParams = reactive<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const dateTimeRange = ref("");
+const total = ref(100); // 数据总数
+
+watch(dateTimeRange, (newVal) => {
+  if (newVal) {
+    queryParams.startTime = newVal[0];
+    queryParams.endTime = newVal[1];
+  }
+});
+
+const tableData = [
+  {
+    id:"1",
+    name: "模型名称模型名称模型名称查看",
+    netName: "VIT",
+    modelType: "图像分类",
+    desc:'进行10种类型 的目标分类模型查看',
+    ver: "1.0",
+    upTime: "2024-02-02",
+    upUser:'USER'    
+  },
+  {
+    id:"1",
+    name: "模型名称模型名称模型名称查看",
+    netName: "Mobile-VIT",
+    modelType: "图像分类",
+    ver: "1.0",
+    desc:'进行10种类型 的目标分类模型查看',
+    upTime: "2024-02-02",
+    upUser:'USER'    
+  },
+  {
+    id:"1",
+    name: "模型名称模型名称模型名称查看",
+    netName: "VIT",
+    modelType: "图像分类",
+    ver: "1.0",
+    desc:'进行人员检测的模型',
+    upTime: "2024-02-02",
+    upUser:'USER'    
+  },
+  {
+    id:"1",
+    name: "模型名称模型名称模型名称查看",
+    netName: "Mobile-VIT",
+    modelType: "图像分类",
+    ver: "1.0",
+    desc:'进行10种类型 的目标分类模型查看',
+    upTime: "2024-02-02",
+    upUser:'USER'    
+  },
+  {
+    id:"1",
+    name: "模型名称模型名称模型名称查看",
+    netName: "VIT",
+    modelType: "图像分类",
+    ver: "1.0",
+    desc:'进行人员检测的模型',
+    upTime: "2024-02-02",
+    upUser:'USER'    
+  }
+];
+
+/** 查询 */
+function handleQuery() {
+  loading.value = true;
+  ElMessage.success("查询成功");
+  loading.value = false;
+  
+}
+
+function doUploadModel(){
+  router.replace({ path: "/modelMgr/uploadModel" });
+}
+
+/** 重置查询 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  dateTimeRange.value = "";
+  queryParams.pageNum = 1;
+  queryParams.deptId = undefined;
+  queryParams.startTime = undefined;
+  queryParams.endTime = undefined;
+  handleQuery();
+}
+
+/** 行选中 */
+function handleSelectionChange(selection: any) {
+  removeIds.value = selection.map((item: any) => item.id);
+}
+
+/** 删除数据 */
+function handleDelete(row: { [key: string]: any }) {
+  ElMessageBox.confirm("确认删除算子?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    ElMessage.success("删除成功");
+  });
+}
+
+/**
+ * 打开弹窗
+ *
+ * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
+ * @param id 用户ID
+ */
+async function openDialog(type: string, id?: number) {
+  router.replace({ path: "/operatorLibrary/calculateEdit" });
+}
+
+/** 下载导入模板 */
+function downloadTemplate() {
+  ElMessage.success("下载模板成功");
+}
+
+/** 导出用户 */
+function handleExport() {
+  ElMessage.success("导出成功");
+}
+
+onMounted(() => {
+  //handleQuery();
+});
 </script>
-<style scoped lang='less'>
-</style>
\ No newline at end of file
+
+
+<style scoped lang='scss'>
+.search-container{
+  display:flex;
+}
+.card-footer{
+  position: fixed;
+  width: calc(100% - 215px);
+  bottom: 0px;
+  :deep(.el-card__body){
+    padding:0px;
+    .el-pagination{
+      justify-content: end;
+    }
+  }
+}
+</style>
diff --git a/src/views/model/uploadModel.vue b/src/views/model/uploadModel.vue
new file mode 100644
index 0000000..185668b
--- /dev/null
+++ b/src/views/model/uploadModel.vue
@@ -0,0 +1,127 @@
+<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>
+
+</template>
+
+<script  setup>
+const uploadForm=ref(ElForm)
+const upForm=reactive({
+    name:''
+})
+
+</script>
+<style scoped lang='less'></style>
\ No newline at end of file