提交代码

src/api/dataSet/index.js

@@ -31,7 +31,7 @@ const dataSetInfo = (id) => {
     });
 }
 //更新指定数据集的内容
-const updateDataSet = (id) => {
+const updateDataSet = (id,data) => {
     return request({
         url: `/dataset/raw/${id}`,
         method: "put",
@@ -61,7 +61,7 @@ const rawFiles = (id) => {
         method: "get"
     });
 }
-//获取设备信息
+//上传数据文件
 const rawUpload = (id, data) => {
     return request({
         url: `/dataset/raw/${id}/upload`,

src/views/manage/calculate/edit.vue

@@ -193,7 +193,7 @@ function handleFileChange(file) {
   }
   uploadFile(file).then((res) => {
     if (isJSON(res)) {
-      formData.parameters = JSON.parse(str);
+      formData.parameters = JSON.parse(res);
       formRef.value.validateField("parameters");
       codeHtml.value = res;
       fileStatus.value = true;

src/views/manage/datas/add.vue

@@ -134,7 +134,6 @@
           </el-col>
           <el-col :lg="12" :xs="24">
             <div style="padding-left: 35px" v-if="fileStatus">
-              <el-form label-width="100px" size="small">
               <el-divider content-position="left"
                 ><strong style="color: #409eff">数据集参数文件预览</strong></el-divider
               >
@@ -145,7 +144,6 @@
                 disabled
                 type="textarea"
               />
-              </el-form>
             </div>
           </el-col>
         </el-row>

src/views/manage/datas/edit.vue

@@ -143,7 +143,6 @@
           </el-col>
           <el-col :lg="12" :xs="24">
             <div style="padding-left: 35px" v-if="fileStatus">
-              <el-form label-width="100px" size="small">
               <el-divider content-position="left"
                 ><strong style="color: #409eff">数据集参数文件预览</strong></el-divider
               >
@@ -154,7 +153,6 @@
                 disabled
                 type="textarea"
               />
-              </el-form>
             </div>
           </el-col>
         </el-row>
@@ -182,57 +180,47 @@
       <el-empty v-if="imageList.length == 0" description="暂 无 数 据" />
     </el-card>
     <el-card class="card-footer">
-      <el-button type="primary" @click="handleImageDialog"><i-ep-upload-filled />上传图片</el-button>
+      <el-button type="primary" @click="handleImageDialog"
+        ><i-ep-upload-filled />上传图片</el-button
+      >
       <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
       <el-button @click="closeBack"><i-ep-close />取 消</el-button>
     </el-card>
-    <el-dialog
+    <el-dialog v-model="dialogVisible" title="上传标注图片" width="880" append-to-body>
-      v-model="dialogVisible"
+      <el-card v-loading.fullscreen.lock="uploadLoading">
-      title="上传标注图片"
-      width="880"
-      append-to-body
-    >
-      <!-- 用户新增/编辑表单 -->
-      <el-form
-        ref="dialogFormRef"
-        :model="formData"
-        label-width="80px"
-      >
         <el-upload
-          v-model:file-list="fileList"
+          v-model:file-list="uploadImgFileList"
           class="upload-demo upload-demo-3"
-          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          :before-remove="handleRemoveFiles"
+          :auto-upload="autoUpload"
+          :on-change="handleChangeFiles"
+          list-type="picture"
           multiple
-          :on-preview="handlePreview"
+          accept="application/json,image/png,image/jpg,image/jpeg"
-          :on-remove="handleRemove"
-          :before-remove="beforeRemove"
-          :limit="3"
-          :on-exceed="handleExceed"
         >
           <el-button type="primary"
             ><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon
             >选择文件</el-button
           >
+          <template #tip>
+            <div class="el-upload__tip">
+              请上传大小不超过 <strong style="color: red">10M</strong>，格式为
+              <strong style="color: red">png/jpg/jpeg/json</strong> 的文件
+            </div>
+          </template>
         </el-upload>
-
+        <el-empty v-if="uploadImgFileList.length == 0" description="暂 无 数 据" />
-        <el-upload
+      </el-card>
-          action="https://jsonplaceholder.typicode.com/posts/"
-          list-type="picture-card"
-          class="upload-demo upload-demo-4"
-          :file-list="imgList2"
-          :limit="10"
-          :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemove"
-        >
-          <i class="i-ep-plus"></i>
-        </el-upload>
-      </el-form>
-
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="dialog.visible=false">开始上传</el-button>
+          <el-button
-          <el-button @click="dialog.visible=false">取 消</el-button>
+            type="primary"
+            :disabled="uploadImgFileList.length == 0"
+            @click="startUploadFiles"
+            >开始上传</el-button
+          >
+          <el-button @click="dialogVisible = false">取 消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -259,7 +247,13 @@ const remImageList = ref([]); //  删除图片列表
 // 上传组件
 const uploadRef = ref<UploadInstance>();
 
+const autoTime = ref(""); //  自动上传
+const autoUpload = ref(false); //  自动上传
 const dialogVisible = ref(false); //  加载状态
+const uploadLoading = ref(false); //  加载状态
+const uploadAllList = ref([]); //  待上传文件列表
+const uploadJsonList = ref([]); //  待上传JSON列表
+const uploadImgFileList = ref([]); //  待上传图片列表
 
 // 基础数据列表
 let listOpt = reactive({
@@ -294,7 +288,7 @@ const handleSubmit = useThrottleFn(() => {
         return false;
       }
       loading.value = true;
-      DataSetApi.add(form)
+      DataSetApi.updateDataSet(form.value.dataset_id, form.value)
         .then((res) => {
           if (res.data.code == 0) {
             ElMessage.success("保存成功");
@@ -308,6 +302,106 @@ const handleSubmit = useThrottleFn(() => {
   });
 }, 3000);
 
+/** 上传文件 */
+function handleChangeFiles(uploadFile, uploadFiles) {
+  //uploadFile.status = 'success';
+  clearTimeout(autoTime.value);
+  if (uploadFile.raw.type == "application/json") {
+    uploadJsonList.value.push(uploadFile);
+  }
+  autoTime.value = setTimeout(doEquipmentFiles, 280);
+}
+
+/** 上传文件>回调 */
+const doEquipmentFiles = () => {
+  uploadImgFileList.value = uploadImgFileList.value.filter(
+    (it) => it.raw.type != "application/json"
+  );
+  if (form.value.dats_label_type != "no_label") {
+    var element = document.getElementsByClassName("upload-demo-3")[0];
+    var children = element.querySelectorAll(".el-upload-list__item");
+    children.forEach((item) => {
+      var mylabel = item.querySelectorAll(".mylabel");
+      //console.log("mylabel.length==>" + mylabel.length);
+      if (mylabel.length > 0) {
+        mylabel.forEach((lab) => {
+          lab.remove();
+        });
+      }
+      let name = item.querySelector(".el-upload-list__item-file-name").textContent;
+      let disp = uploadJsonList.value.filter((it) => disName(name, it.name));
+      //console.log("disp==>" + disp.length);
+      if (disp.length > 0) {
+        item.insertAdjacentHTML(
+          "beforeend",
+          "<span class='el-tag el-tag--success el-tag--dark mylabel mylabel--success'><span class='el-tag__content'>已标注JSON</span></span>"
+        );
+      } else {
+        item.insertAdjacentHTML(
+          "beforeend",
+          "<span class='el-tag el-tag--danger el-tag--dark mylabel mylabel--error'><span class='el-tag__content'>未标注JSON</span></span>"
+        );
+      }
+    });
+  }
+};
+
+/** 标注文件名称比对 */
+function disName(img, json) {
+  if (
+    img.substring(0, img.lastIndexOf(".")) == json.substring(0, json.lastIndexOf("."))
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+/** 删除图片的json标注 */
+function handleRemoveFiles(uploadFile, uploadFiles) {
+  uploadJsonList.value = uploadJsonList.value.filter(
+    (it) => !disName(uploadFile.name, it.name)
+  );
+  return true;
+}
+
+/** 开始上传文件 */
+function startUploadFiles() {
+  var element = document.getElementsByClassName("upload-demo-3")[0];
+  var errors = element.querySelectorAll(".mylabel--error");
+  if (errors.length > 0) {
+    ElMessage.error(errors.length + " 个图片未上传标注文件！请上传或删除图片。");
+    return false;
+  }
+  uploadImgFileList.value.forEach((item) => {
+    let json = uploadJsonList.value.filter((it) => disName(item.name, it.name));
+    let data = {
+      image_file_name: item.name,
+      image_file: item,
+      label_file: json.length > 0 ? json[0] : null,
+    };
+    uploadLoading.value = true;
+    DataSetApi.rawUpload(form.value.dataset_id, data)
+      .then((res) => {
+        if (res.data.code == 0) {
+          uploadImgFileList.value = uploadImgFileList.value.filter(
+            (it) => item.name != it.name
+          );
+          uploadJsonList.value = uploadJsonList.value.filter(
+            (it) => !disName(item.name, it.name)
+          );
+          if (uploadImgFileList.value.length == 0) {
+            handleQuery();
+            dialogVisible.value = false;
+          }
+        }
+      })
+      .finally(() => {
+        uploadLoading.value = false;
+      });
+  });
+}
+
 /** 删除文件 */
 function beforeRemove(file) {
   remImageList.value.push(file.name);
@@ -509,6 +603,12 @@ onMounted(() => {
 }
 </style>
 <style scope>
+.el-dialog__body {
+  overflow: auto;
+}
+.el-card__body {
+  overflow: auto;
+}
 .upload-demo-2 > .el-upload {
   display: none !important;
 }
@@ -519,10 +619,19 @@ onMounted(() => {
   float: left !important;
   width: 25% !important;
 }
-.upload-demo-4 > .el-upload--picture-card{
+.upload-demo-3 > * > .el-upload-list__item {
-  display: none !important;
+  float: left !important;
+  width: 49% !important;
+}
+.upload-demo-3 > * > .el-upload-list__item:nth-child(even) {
+  margin-left: 10px;
 }
 .dialog-footer {
   text-align: center;
 }
+.mylabel {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
 </style>