瀏覽代碼

Merge remote-tracking branch 'origin/develop' into dev_lsk_label

Suuuuuukang 10 月之前
父節點
當前提交
7604e17c24
共有 5 個文件被更改,包括 172 次插入195 次删除
  1. 2 2
      .env.development
  2. 2 2
      .env.production
  3. 92 134
      src/components/ImportPicDataset/index.vue
  4. 1 1
      src/components/ProTable/interface/index.ts
  5. 75 56
      src/views/demo/data/index.vue

+ 2 - 2
.env.development

@@ -25,8 +25,8 @@ VITE_APP_RSA_PRIVATE_KEY = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3C
 VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
 
 # 开发环境跨域代理,支持配置多个
-# VITE_PROXY = [["/api","http://localhost:9090"]]
-VITE_PROXY = [["/api","http://192.168.101.34/prod-api"]]
+VITE_PROXY = [["/api","http://localhost:9090"]]
+#VITE_PROXY = [["/api","http://192.168.101.34/prod-api"]]
 # VITE_PROXY = [["/api","https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e"]]
 # VITE_PROXY = [["/api","https://www.fastmock.site/mock/f81e8333c1a9276214bcdbc170d9e0a0"]]
 # VITE_PROXY = [["/api-easymock","https://mock.mengxuegu.com"],["/api-fastmock","https://www.fastmock.site"]]

+ 2 - 2
.env.production

@@ -20,7 +20,7 @@ VITE_DROP_CONSOLE = true
 
 # 是否开启 VitePWA
 VITE_PWA = true
-
+VITE_API_URL = /api
 # 接口加密传输 RSA 公钥与后端解密私钥对应 如更换需前后端一同更换
 VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
 # 接口响应解密 RSA 私钥与后端加密公钥对应 如更换需前后端一同更换
@@ -30,4 +30,4 @@ VITE_APP_RSA_PRIVATE_KEY = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3C
 VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
 
 # 线上环境接口地址
-VITE_API_URL = "http://localhost:8080"
+# VITE_API_URL = "http://localhost:8080"

+ 92 - 134
src/components/ImportPicDataset/index.vue

@@ -20,53 +20,52 @@
           </slot>
           <template #tip>
             <slot name="tip">
-              <!-- <div class="el-upload__tip text-center">
-                <el-checkbox v-model="isCover">是否更新已存在的数据</el-checkbox>
-              </div> -->
-              <div class="el-upload__tip text-center">
-                请上传 .zip 标准格式文件,文件最大为 {{ parameter.fileSize }}M。
-                <!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="downloadTemp">
-                  模板下载
-                </el-link> -->
-              </div>
+              <div class="el-upload__tip text-center">请上传 .zip 标准格式文件,文件最大为 {{ parameter.fileSize }}M。</div>
             </slot>
           </template>
         </el-upload>
       </el-form-item>
 
-      <el-form-item label="文件上传">
-        <el-upload
-          action="#"
-          class="upload"
-          :drag="true"
-          :limit="parameter.limit"
-          :multiple="parameter.multiple"
-          :show-file-list="true"
-          :http-request="uploadExcel"
-          :before-upload="beforeExcelUpload"
-          :on-exceed="handleExceed"
-          :accept="parameter.fileType!.join(',')"
-        >
-          <slot name="empty">
-            <el-icon class="el-icon--upload">
-              <upload-filled />
-            </el-icon>
-            <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
-          </slot>
-          <template #tip>
-            <slot name="tip">
-              <!-- <div class="el-upload__tip text-center">
-                <el-checkbox v-model="isCover">是否更新已存在的数据</el-checkbox>
-              </div> -->
-              <div class="el-upload__tip text-center">
-                请上传 .xls , .xlsx 标准格式文件,文件最大为 {{ parameter.fileSize }}M。
-                <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="downloadTemp">
-                  模板下载
-                </el-link>
-              </div>
-            </slot>
-          </template>
-        </el-upload>
+      <!-- 新增的表单字段 -->
+      <el-form-item label="批次号" prop="batchNum">
+        <el-input v-model="formModel.batchNum" placeholder="请输入批次号" />
+      </el-form-item>
+
+      <el-form-item label="目标类型" prop="objectType">
+        <el-input v-model="formModel.objectType" placeholder="请输入目标类型" />
+      </el-form-item>
+
+      <el-form-item label="目标子类型" prop="objectSubtype">
+        <el-input v-model="formModel.objectSubtype" placeholder="请输入目标子类型" />
+      </el-form-item>
+
+      <el-form-item label="场景" prop="scene">
+        <el-input v-model="formModel.scene" placeholder="请输入场景" />
+      </el-form-item>
+
+      <el-form-item label="数据源" prop="dataSource">
+        <el-input v-model="formModel.dataSource" placeholder="请输入数据源" />
+      </el-form-item>
+
+      <el-form-item label="采集地点" prop="gatherSpot">
+        <el-input v-model="formModel.gatherSpot" placeholder="请输入采集地点" />
+      </el-form-item>
+
+      <el-form-item label="采集时间" prop="gatherTime">
+        <el-date-picker v-model="formModel.gatherTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择采集时间" />
+      </el-form-item>
+
+      <el-form-item label="数据类型" prop="dataType">
+        <el-select v-model="formModel.dataType" placeholder="请选择数据类型">
+          <el-option v-for="item in dataTypes" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="是否已标注">
+        <el-radio-group v-model="formModel.labeled">
+          <el-radio :label="true">是</el-radio>
+          <el-radio :label="false">否</el-radio>
+        </el-radio-group>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -80,28 +79,40 @@
 
 <script setup lang="ts" name="ImportPicDataset">
 import { ref } from 'vue'
-import { useDownload } from '@/hooks/useDownload'
 import { ElNotification, UploadRequestOptions, UploadRawFile } from 'element-plus'
 
 export interface ParameterProps {
-  title: string // 标题
-  fileSize?: number // 上传文件的大小
-  limit?: number // 上传文件个数
-  top?: string // 离顶部距离
-  width?: number // 弹框宽度
-  multiple?: boolean // 是否支持多选文件
-  fileType?: File.ExcelMimeType[] // 上传文件的类型
-  ZipFileType?: File.ZipMimeType[] //上传zip文件的类型
-  tempApi?: (params: any) => Promise<any> // 下载模板的Api
-  importApi?: (params: any) => Promise<any> // 批量导入的Api
-  getTableList?: () => void // 获取表格数据的Api
+  title: string
+  fileSize?: number
+  limit?: number
+  top?: string
+  width?: number
+  multiple?: boolean
+  fileType?: File.ExcelMimeType[]
+  ZipFileType?: File.ZipMimeType[]
+  tempApi?: (params: any) => Promise<any>
+  importApi?: (params: any) => Promise<any>
+  getTableList?: () => void
 }
 
-// 是否覆盖数据
-// const isCover = ref(false)
-// dialog状态
+const formModel = ref({
+  batchNum: '',
+  name: '',
+  objectType: '',
+  objectSubtype: '',
+  scene: '',
+  dataSource: '',
+  gatherSpot: '',
+  gatherTime: '',
+  dataType: '',
+  labeled: false
+})
+const dataTypes = ref([
+  { dictValue: '1', dictLabel: '训练' },
+  { dictValue: '2', dictLabel: '测试' }
+  // 添加更多数据类型
+])
 const dialogVisible = ref(false)
-// 父组件传过来的参数
 const parameter = ref<ParameterProps>({
   title: '',
   limit: 1,
@@ -113,45 +124,48 @@ const parameter = ref<ParameterProps>({
   ZipFileType: ['application/zip', 'application/x-zip-compressed', 'application/x-rar-compressed']
 })
 
-// 接收父组件参数
 const acceptParams = (params: ParameterProps) => {
   parameter.value = { ...parameter.value, ...params }
   dialogVisible.value = true
+  formModel.value = {
+    batchNum: '',
+    name: '',
+    objectType: '',
+    objectSubtype: '',
+    scene: '',
+    dataSource: '',
+    gatherSpot: '',
+    gatherTime: '',
+    dataType: '',
+    labeled: false
+  }
 }
-
-// Excel 导入模板下载
-const downloadTemp = () => {
-  if (!parameter.value.tempApi) return
-  useDownload(parameter.value.tempApi, `${parameter.value.title}_template_${new Date().getTime()}`)
-}
-// const uploadRef = ref<UploadInstance>()
-
 const formData = new FormData()
 const handleSubmit = async () => {
   const zipFile = formData.get('file')
-  const excelFile = formData.get('excelFile')
   console.log(zipFile)
-  console.log(excelFile)
-  // 检查是否同时上传了压缩文件和 Excel 文件
-  if (!zipFile || !excelFile) {
+  if (!zipFile) {
     ElNotification({
       title: '温馨提示',
-      message: '请同时上传一个压缩文件和一个Excel文件!',
+      message: '请上传一个压缩文件!',
       type: 'warning'
     })
     return
   }
-
+  const formDataInfo = new FormData()
+  formDataInfo.append('file', zipFile)
+  for (const key in formModel.value) {
+    if (Object.prototype.hasOwnProperty.call(formModel.value, key)) {
+      formDataInfo.append(key, formModel.value[key])
+    }
+  }
   try {
-    // 同时上传了两个文件,可以进行提交处理
-    await parameter.value.importApi!(formData)
-
+    await parameter.value.importApi!(formDataInfo)
     ElNotification({
       title: '温馨提示',
       message: `文件上传成功`,
       type: 'success'
     })
-
     parameter.value.getTableList && parameter.value.getTableList()
     dialogVisible.value = false
   } catch (error) {
@@ -163,50 +177,12 @@ const handleSubmit = async () => {
   }
 }
 
-// 压缩文件上传
 const uploadZip = (param: UploadRequestOptions) => {
   formData.append('file', param.file)
-
-  // parameter.value.getTableList && parameter.value.getTableList()
-  // dialogVisible.value = false
-}
-
-// 文件上传
-const uploadExcel = (param: UploadRequestOptions) => {
-  formData.append('excelFile', param.file)
-
-  // parameter.value.getTableList && parameter.value.getTableList()
-  // dialogVisible.value = false
-}
-
-/**
- * @description 文件上传之前判断
- * @param file 上传的文件
- * */
-const beforeExcelUpload = (file: UploadRawFile) => {
-  const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType)
-
-  const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!
-  if (!isExcel)
-    ElNotification({
-      title: '温馨提示',
-      message: '上传文件只能是 xls / xlsx 格式!',
-      type: 'warning'
-    })
-  if (!fileSize)
-    setTimeout(() => {
-      ElNotification({
-        title: '温馨提示',
-        message: `上传文件大小不能超过 ${parameter.value.fileSize}MB!`,
-        type: 'warning'
-      })
-    }, 0)
-  return isExcel && fileSize
 }
 
 const beforeZipUpload = (file: UploadRawFile) => {
   const isZip = parameter.value.ZipFileType!.includes(file.type as File.ZipMimeType)
-
   const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!
   if (!isZip)
     ElNotification({
@@ -225,7 +201,6 @@ const beforeZipUpload = (file: UploadRawFile) => {
   return isZip && fileSize
 }
 
-// 文件数超出提示
 const handleExceed = () => {
   ElNotification({
     title: '温馨提示',
@@ -234,28 +209,11 @@ const handleExceed = () => {
   })
 }
 
-// 上传错误提示
-// const excelUploadError = () => {
-//   ElNotification({
-//     title: '温馨提示',
-//     message: `批量添加${parameter.value.title}失败,请您重新上传!`,
-//     type: 'error'
-//   })
-// }
-
-// 上传成功提示
-// const excelUploadSuccess = () => {
-//   ElNotification({
-//     title: '温馨提示',
-//     message: `批量添加${parameter.value.title}成功!`,
-//     type: 'success'
-//   })
-// }
-
 defineExpose({
   acceptParams
 })
 </script>
+
 <style lang="scss" scoped>
 @import './index.scss';
 </style>

+ 1 - 1
src/components/ProTable/interface/index.ts

@@ -1,7 +1,7 @@
 import { VNode, ComponentPublicInstance, Ref } from 'vue'
 import { BreakPoint, Responsive } from '@/components/Grid/interface'
 import { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
-import { ProTableProps } from '@/components/ProTable/index.vue'
+import ProTableProps from '@/components/ProTable/index.vue'
 import ProTable from '@/components/ProTable/index.vue'
 
 export interface EnumProps {

+ 75 - 56
src/views/demo/data/index.vue

@@ -57,7 +57,8 @@ import ImportPicDataset from '@/components/ImportPicDataset/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { Delete, EditPen, Download, Upload, View, CirclePlus } from '@element-plus/icons-vue'
 // import { fabric } from 'fabric'
-// import { useDrawArea } from '@/utils/fabric'
+import { useDrawArea } from '@/utils/fabric'
+import { getDictsApi } from '@/api/modules/system/dictData'
 import ImgDetect from '../components/img-detect.vue'
 import {
   listDataApi,
@@ -268,6 +269,17 @@ const labelFile = (data, filename) => {
   return uploadPure(formData)
 }
 
+const labeledTypeData = [
+  {
+    label: '是',
+    value: true
+  },
+  {
+    label: '否',
+    value: false
+  }
+]
+
 // 批量删除数据管理信息
 const batchDelete = async (ids: string[]) => {
   await useHandleData(delDataApi, ids, '删除所选数据信息')
@@ -320,24 +332,16 @@ const columns = reactive<ColumnProps<any>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
   { prop: 'yuan', label: '原图', width: 200 },
   {
-    prop: 'name',
-    label: '名称',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'dataType',
-    label: '数据类型',
+    prop: 'batchNum',
+    label: '批次号',
     search: {
       el: 'input'
     },
     width: 120
   },
   {
-    prop: 'fileType',
-    label: '文件类型',
+    prop: 'name',
+    label: '名称',
     search: {
       el: 'input'
     },
@@ -360,24 +364,24 @@ const columns = reactive<ColumnProps<any>[]>([
     width: 120
   },
   {
-    prop: 'batchNum',
-    label: '批次号',
+    prop: 'scene',
+    label: '场景',
     search: {
       el: 'input'
     },
     width: 120
   },
   {
-    prop: 'scene',
-    label: '场景',
+    prop: 'dataSource',
+    label: '数据源',
     search: {
       el: 'input'
     },
     width: 120
   },
   {
-    prop: 'dataSource',
-    label: '数据源',
+    prop: 'gatherSpot',
+    label: '采集地点',
     search: {
       el: 'input'
     },
@@ -393,21 +397,31 @@ const columns = reactive<ColumnProps<any>[]>([
     width: 120
   },
   {
-    prop: 'gatherSpot',
-    label: '采集地点',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'increment',
-    label: '扩增方式',
+    prop: 'dataType',
+    label: '数据类型',
+    enum: () => getDictsApi('data_type'),
     search: {
-      el: 'input'
+      el: 'tree-select'
     },
+    fieldNames: { label: 'dictLabel', value: 'dictValue' },
     width: 120
   },
+  // {
+  //   prop: 'fileType',
+  //   label: '文件类型',
+  //   search: {
+  //     el: 'input'
+  //   },
+  //   width: 120
+  // },
+  // {
+  //   prop: 'increment',
+  //   label: '扩增方式',
+  //   search: {
+  //     el: 'input'
+  //   },
+  //   width: 120
+  // },
   {
     prop: 'labeled',
     label: '是否标注',
@@ -423,35 +437,27 @@ let formItems: ProForm.ItemsOptions[] = []
 const setFormItems = () => {
   formItems = [
     {
-      label: '图',
+      label: '图',
       prop: 'url',
       compOptions: {
         elTagName: 'img-upload',
-        placeholder: '请选择上传图片'
-      }
-    },
-    {
-      label: '名称',
-      prop: 'name',
-      rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
-      compOptions: {
-        placeholder: '请输入名称'
+        placeholder: '请选择上传原图'
       }
     },
     {
-      label: '数据类型',
-      prop: 'dataType',
-      rules: [{ required: true, message: '数据类型不能为空', trigger: 'blur' }],
+      label: '批次号',
+      prop: 'batchNum',
+      rules: [{ required: true, message: '批次号不能为空', trigger: 'blur' }],
       compOptions: {
-        placeholder: '请输入数据类型'
+        placeholder: '请输入批次号'
       }
     },
     {
-      label: '文件类型',
-      prop: 'fileType',
-      rules: [{ required: true, message: '文件类型不能为空', trigger: 'blur' }],
+      label: '名称',
+      prop: 'name',
+      rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
       compOptions: {
-        placeholder: '请输入文件类型'
+        placeholder: '请输入名称'
       }
     },
     {
@@ -487,6 +493,14 @@ const setFormItems = () => {
         placeholder: '请输入数据源'
       }
     },
+    {
+      label: '采集地点',
+      prop: 'gatherSpot',
+      rules: [{ required: true, message: '采集地点不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入采集地点'
+      }
+    },
     {
       label: '采集时间',
       prop: 'gatherTime',
@@ -499,19 +513,24 @@ const setFormItems = () => {
       }
     },
     {
-      label: '采集地点',
-      prop: 'gatherSpot',
-      rules: [{ required: true, message: '采集地点不能为空', trigger: 'blur' }],
+      label: '数据类型',
+      prop: 'dataType',
+      rules: [{ required: true, message: '数据类型不能为空', trigger: 'change' }],
       compOptions: {
-        placeholder: '请输入采集地点'
+        elTagName: 'select',
+        labelKey: 'dictLabel',
+        valueKey: 'dictValue',
+        enum: () => getDictsApi('data_type'),
+        placeholder: '请选择数据类型'
       }
     },
     {
-      label: '扩增方式',
-      prop: 'increment',
-      rules: [{ required: true, message: '扩增方式不能为空', trigger: 'blur' }],
+      label: '是否标注',
+      prop: 'labeled',
+      rules: [{ required: true, message: '请选择是否标注' }],
       compOptions: {
-        placeholder: '请输入扩增方式'
+        elTagName: 'radio-group',
+        enum: labeledTypeData
       }
     }
   ]