提交代码

2024-07-22 16:46:27 +08:00 · 2024-07-22 16:46:27 +08:00 · 07e50117a2
parent c8cea421ce
commit 07e50117a2
4 changed files with 173 additions and 66 deletions
--- a/src/api/dataSet/index.js
+++ b/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`,
--- a/src/views/manage/calculate/edit.vue
+++ b/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;
--- a/src/views/manage/datas/add.vue
+++ b/src/views/manage/datas/add.vue
@ -134,18 +134,16 @@
          </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
-                >
-                <el-input
+              <el-divider content-position="left"
+                ><strong style="color: #409eff">数据集参数文件预览</strong></el-divider
+              >
+              <el-input
                v-model="codeHtml"
                placeholder="请输入数据集参数JSON"
                :rows="10"
                disabled
                type="textarea"
              />
-              </el-form>
            </div>
          </el-col>
        </el-row>
--- a/src/views/manage/datas/edit.vue
+++ b/src/views/manage/datas/edit.vue
@ -143,18 +143,16 @@
          </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
-                >
-                <el-input
-                  v-model="codeHtml"
-                  placeholder="请输入数据集参数JSON"
-                  :rows="10"
-                  disabled
-                  type="textarea"
-                />
-              </el-form>
+              <el-divider content-position="left"
+                ><strong style="color: #409eff">数据集参数文件预览</strong></el-divider
+              >
+              <el-input
+                v-model="codeHtml"
+                placeholder="请输入数据集参数JSON"
+                :rows="10"
+                disabled
+                type="textarea"
+              />
            </div>
          </el-col>
        </el-row>
@ -170,7 +168,7 @@
          type="primary"
          style="position: absolute; right: 30px"
          @click="handleRemoveAll"
-          :disabled="imageList.length==0"
+          :disabled="imageList.length == 0"
          ><i-ep-delete />清空全部</el-button
        >
      </template>
@ -179,60 +177,50 @@
        class="upload-demo upload-demo-2"
        :before-remove="beforeRemove"
      />
-      <el-empty v-if="imageList.length==0" description="暂 无 数 据" />
+      <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
-      v-model="dialogVisible"
-      title="上传标注图片"
-      width="880"
-      append-to-body
-    >
-      <!-- 用户新增/编辑表单 -->
-      <el-form
-        ref="dialogFormRef"
-        :model="formData"
-        label-width="80px"
-      >
-      <el-upload
-          v-model:file-list="fileList"
+    <el-dialog v-model="dialogVisible" title="上传标注图片" width="880" append-to-body>
+      <el-card v-loading.fullscreen.lock="uploadLoading">
+        <el-upload
+          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"
-          :on-remove="handleRemove"
-          :before-remove="beforeRemove"
-          :limit="3"
-          :on-exceed="handleExceed"
+          accept="application/json,image/png,image/jpg,image/jpeg"
        >
          <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-upload
-          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>
-
+        <el-empty v-if="uploadImgFileList.length == 0" description="暂 无 数 据" />
+      </el-card>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
-          <el-button type="primary" @click="dialog.visible=false">开始上传</el-button>
-          <el-button @click="dialog.visible=false">取 消</el-button>
+          <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);
@ -348,8 +442,8 @@ function handleRemoveAll() {
 }

 /** 打开文件上传弹窗 */
-function handleImageDialog(){
-  dialogVisible.value=true;
+function handleImageDialog() {
+  dialogVisible.value = true;
 }

 // 文件上传
@ -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{
-  display: none !important;
+.upload-demo-3 > * > .el-upload-list__item {
+  float: left !important;
+  width: 49% !important;
 }
-.dialog-footer{
+.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>