From c8cea421ce730f3210c678280148ec718a28e32a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E7=8E=89=E7=90=A6?=
 <7507756+jiang_yuqi@user.noreply.gitee.com>
Date: Mon, 22 Jul 2024 01:17:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/dataSet/index.js                 |   2 +-
 src/views/manage/calculate/edit.vue      |  16 +-
 src/views/manage/calculateParam/edit.vue |   6 +-
 src/views/manage/datas/add.vue           | 257 +++++----
 src/views/manage/datas/edit.vue          | 647 ++++++++++++++---------
 src/views/manage/datas/index.vue         |  14 +-
 src/views/manage/otherTool/view.vue      |  10 +-
 7 files changed, 566 insertions(+), 386 deletions(-)

diff --git a/src/api/dataSet/index.js b/src/api/dataSet/index.js
index 716e071..423362e 100644
--- a/src/api/dataSet/index.js
+++ b/src/api/dataSet/index.js
@@ -47,7 +47,7 @@ const downloadFile = (id) => {
     })
 }
 //删除指定的图像文件
-const deleteFile = (id) => {
+const deleteFile = (id,data) => {
     return request({
         url: `/dataset/raw/${id}/files`,
         method: "delete",
diff --git a/src/views/manage/calculate/edit.vue b/src/views/manage/calculate/edit.vue
index 4379bd5..e64abf6 100644
--- a/src/views/manage/calculate/edit.vue
+++ b/src/views/manage/calculate/edit.vue
@@ -86,7 +86,13 @@
               <el-divider content-position="left"
                 ><strong style="color: #409eff">算子文件预览</strong></el-divider
               >
-              <code id="codeHtml" v-html="codeHtml"></code>
+              <el-input
+                v-model="codeHtml"
+                placeholder="请输入算子文件JSON"
+                :rows="10"
+                disabled
+                type="textarea"
+              />
             </el-form>
           </div>
         </el-col>
@@ -187,11 +193,9 @@ function handleFileChange(file) {
   }
   uploadFile(file).then((res) => {
     if (isJSON(res)) {
-      let jsonStr = JSON.stringify(res);
-      formData.parameters = jsonStr;
+      formData.parameters = JSON.parse(str);
       formRef.value.validateField("parameters");
-      //let json = JSON.parse(jsonStr);
-      codeHtml.value = res;//highlightJSON(json);
+      codeHtml.value = res;
       fileStatus.value = true;
     }
   });
@@ -231,7 +235,7 @@ function uploadFile(file) {
 // 文件删除
 function handleFileRemove() {
   formData.parameters = "";
-  codeHtml.value = "<p></p>";
+  codeHtml.value = "";
   fileStatus.value = false;
 }
 
diff --git a/src/views/manage/calculateParam/edit.vue b/src/views/manage/calculateParam/edit.vue
index 17c3422..4514a12 100644
--- a/src/views/manage/calculateParam/edit.vue
+++ b/src/views/manage/calculateParam/edit.vue
@@ -259,7 +259,11 @@ function handleChangeOperator() {
   OperatorApi.findOne(formData.operator_id).then((res) => {
     //JSON转换
     codeJson.value = JSON.stringify(res.data.data.parameters);
-    fileStatus.value = true;
+    if(codeJson.value=='{}'){
+      fileStatus.value = false;
+    }else{
+      fileStatus.value = true;
+    }
   });
 }
 
diff --git a/src/views/manage/datas/add.vue b/src/views/manage/datas/add.vue
index 7c42534..13b2fe9 100644
--- a/src/views/manage/datas/add.vue
+++ b/src/views/manage/datas/add.vue
@@ -67,21 +67,30 @@
           </el-col>
           <el-col :lg="12" :xs="24">
             <el-form-item label="图像分辨率" prop="image_height">
-              <el-row style="width:100%">
+              <el-row style="width: 100%">
                 <el-col :lg="11">
-                  <el-input v-model="form.image_width" type="number"  placeholder="请输入分辨率宽度">
+                  <el-input
+                    v-model="form.image_width"
+                    type="number"
+                    placeholder="请输入分辨率宽度"
+                  >
                     <template #prepend> 宽 </template>
                   </el-input>
                 </el-col>
-                <el-col :lg="2" class="fontCenter"><el-icon><Rank /></el-icon></el-col>
+                <el-col :lg="2" class="font-center"
+                  ><el-icon><Rank /></el-icon
+                ></el-col>
                 <el-col :lg="11">
-                  <el-input v-model="form.image_height" type="number" placeholder="请输入分辨率高度">
+                  <el-input
+                    v-model="form.image_height"
+                    type="number"
+                    placeholder="请输入分辨率高度"
+                  >
                     <template #prepend> 高 </template>
                   </el-input>
                 </el-col>
               </el-row>
             </el-form-item>
-            
           </el-col>
         </el-row>
         <el-row>
@@ -97,91 +106,61 @@
           </el-col>
           <el-col :lg="12" :xs="24"> </el-col>
         </el-row>
-      </el-form>
-    </el-card>
-    <el-card style="margin-top: 12px">
-      <template #header
-        ><svg-icon icon-class="pause" style="width: 20px; height: 20px" />图片信息<strong
-          style="color: #409eff"
-          >（15）</strong
-        >
-      </template>
-      <el-form>
-        <el-upload
-          action="https://jsonplaceholder.typicode.com/posts/"
-          list-type="picture-card"
-          :file-list="imgList"
-          :limit="10"
-          :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemove"
-        >
-          <i class="i-ep-plus"></i>
-        </el-upload>
+        <el-row>
+          <el-col :lg="12" :xs="24">
+            <el-form-item label="数据集参数文件" prop="dataset_parameters">
+              <el-upload
+                ref="uploadRef"
+                class="upload-demo"
+                :on-change="handleFileChange"
+                :on-remove="handleFileRemove"
+                :on-exceed="handleFileExceed"
+                :auto-upload="false"
+                :limit="1"
+                accept="application/json"
+              >
+                <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">json</strong> 的文件
+                  </div>
+                </template>
+              </el-upload>
+            </el-form-item>
+          </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>
+            </div>
+          </el-col>
+        </el-row>
       </el-form>
     </el-card>
     <el-card class="card-footer">
-      <el-button type="primary" @click="handleUpload"
-        ><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="dialogOpen"
-      title="dialog.title"
-      width="880"
-      append-to-body
-    >
-      <!-- 用户新增/编辑表单 -->
-      <el-form
-        v-if="dialog.type === 'user-form'"
-        ref="userFormRef"
-        :model="form"
-        label-width="80px"
-      >
-        <el-upload
-          v-model:file-list="fileList"
-          class="upload-demo"
-          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-          multiple
-          :on-preview="handlePreview"
-          :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
-          >
-        </el-upload>
-
-        <el-upload
-          action="https://jsonplaceholder.typicode.com/posts/"
-          list-type="picture-card"
-          :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 @click="dialog.visible = false">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import ConstApi from "@/api/const";
-import ToolChainshApi from "@/api/tool";
+import DataSetApi from "@/api/dataSet";
 
 const router = useRouter();
 
@@ -189,11 +168,9 @@ const form = ref({}); // 基础表单
 const formRef = ref(ElForm); // 表单
 const loading = ref(false); //  加载状态
 const dialogOpen = ref(false); //  加载状态
+const fileStatus = ref(false); //  文件状态
+const codeHtml = ref(""); //  文件信息
 
-// 表单数据
-const formData = reactive({
-  unregisted: null,
-});
 // 上传组件
 const uploadRef = ref<UploadInstance>();
 
@@ -206,26 +183,31 @@ let listOpt = reactive({
 
 // 校验规则
 const rules = reactive({
-    dataset_name: [{ required: true, message: "数据集名称不能为空", trigger: "blur" }],
-    dataset_version: [{ required: true, message: "数据集版本不能为空", trigger: "blur" }],
-    modl_sub_type: [{ required: true, message: "适用任务类型不能为空", trigger: "change" }],
-    dats_dataset_format: [{ required: true, message: "数据集格式不能为空", trigger: "change" }],
-    dats_label_type: [{ required: true, message: "标注类型不能为空", trigger: "change" }],
-    image_width: [{ required: true, message: "分辨率宽度不能为空", trigger: "blur" }],
-    image_height: [{ required: true, message: "分辨率高度不能为空", trigger: "blur" }],
-    dataset_desc: [{ required: false, message: "数据集描述不能为空", trigger: "blur" }],
+  dataset_name: [{ required: true, message: "数据集名称不能为空", trigger: "blur" }],
+  dataset_version: [{ required: true, message: "数据集版本不能为空", trigger: "blur" }],
+  modl_sub_type: [{ required: true, message: "适用任务类型不能为空", trigger: "change" }],
+  dats_dataset_format: [
+    { required: true, message: "数据集格式不能为空", trigger: "change" },
+  ],
+  dats_label_type: [{ required: true, message: "标注类型不能为空", trigger: "change" }],
+  image_width: [{ required: true, message: "分辨率宽度不能为空", trigger: "blur" }],
+  image_height: [{ required: true, message: "分辨率高度不能为空", trigger: "blur" }],
+  dataset_desc: [{ required: false, message: "数据集描述不能为空", trigger: "blur" }],
+  dataset_parameters: [
+    { required: true, message: "数据集参数文件不能为空", trigger: "blur" },
+  ],
 });
 
 /** 表单提交 */
 const handleSubmit = useThrottleFn(() => {
   formRef.value.validate((valid: any) => {
     if (valid) {
-      if (!formData.unregisted) {
-        ElMessage.error("请选择要注册的工具链");
+      if (!form.value.image_width) {
+        ElMessage.error("请输入图片分辨率宽度！");
         return false;
       }
       loading.value = true;
-      ToolChainshApi.addTool(formData)
+      DataSetApi.add(form)
         .then((res) => {
           if (res.data.code == 0) {
             ElMessage.success("保存成功");
@@ -239,18 +221,77 @@ const handleSubmit = useThrottleFn(() => {
   });
 }, 3000);
 
-/** 选中未注册工具链 */
-function getCurrentRow(row: { [key: string]: any }) {
-  formData.uuid = row.uuid;
-  formData.tool_type = row.tool_type;
-  formData.cmpt_hardware_type = row.cmpt_hardware_type;
-  formData.manufacturer = row.manufacturer;
-  formData.tool_version = row.tool_version;
+// 文件上传
+function handleFileChange(file) {
+  //先创建一个读文件的对象 FileReader
+  let reader = new FileReader();
+  //判断浏览器是否支持 FileReader
+  if (typeof FileReader === "undefined") {
+    this.$message({
+      type: "info",
+      message: "您的浏览器不支持文件读取。",
+    });
+    return;
+  }
+  uploadFile(file).then((res) => {
+    if (isJSON(res)) {
+      //let jsonStr = JSON.stringify(res);
+      form.value.dataset_parameters = JSON.parse(res);
+      formRef.value.validateField("dataset_parameters");
+      codeHtml.value = res;
+      fileStatus.value = true;
+    }
+  });
+}
+
+/** 解析json */
+function isJSON(str) {
+  try {
+    // 尝试解析输入的字符串
+    JSON.parse(str);
+    ElMessage.success("JSON文件解析成功");
+    return true;
+    // 成功解析
+  } catch (error) {
+    // 解析失败
+    ElMessage.error("JSON文件解析失败");
+    uploadRef.value.clearFiles();
+    fileStatus.value = false;
+    form.value.dataset_parameters = "";
+    return false;
+  }
+}
+
+// 文件读取
+function uploadFile(file) {
+  return new Promise(function (resolve, reject) {
+    let reader = new FileReader();
+    reader.readAsArrayBuffer(file.raw);
+    reader.onload = function (e) {
+      var ints = new Uint8Array(e.target.result); //要使用读取的内容，所以将读取内容转化成Uint8Array
+      let snippets = new TextDecoder("UTF-8").decode(ints); //二进制缓存区内容转化成中文（即也就是读取到的内容）
+      resolve(snippets);
+    };
+  });
+}
+
+// 文件删除
+function handleFileRemove() {
+  form.value.dataset_parameters = "";
+  codeHtml.value = "";
+  fileStatus.value = false;
+}
+
+// 超出限制，清空文件列表
+function handleFileExceed() {
+  uploadRef.value.clearFiles();
+  ElMessage.warning("已清空文件列表,请重新上传！");
+  handleFileRemove();
 }
 
 /** 返回默认页面 */
 function closeBack() {
-  router.push({ path: "/tester/otherTool" });
+  router.push({ path: "/dataMgr/datas" });
 }
 
 // 初始化选项列表
@@ -304,16 +345,8 @@ onMounted(() => {
     }
   }
 }
-</style>
-<style scope>
-.el-upload--picture-card {
-  display: none !important;
-}
-.dialog-footer {
+.font-center {
   text-align: center;
-}
-.fontCenter{
-  text-align: center;
-  color:#CCCCCC;
+  color: #cccccc;
 }
 </style>
diff --git a/src/views/manage/datas/edit.vue b/src/views/manage/datas/edit.vue
index e97828a..6d0f168 100644
--- a/src/views/manage/datas/edit.vue
+++ b/src/views/manage/datas/edit.vue
@@ -2,147 +2,205 @@
 <template>
   <div class="app-container model-detail">
     <!-- 用户新增/编辑表单 -->
-    <el-card>
+    <el-card v-loading="loading">
       <template #header
         ><svg-icon icon-class="pause" style="width: 20px; height: 20px" />数据集基本信息
       </template>
-
-      <el-form
-        ref="userFormRef"
-        :model="formData"
-        :rules="rules"
-        v-loading="loading"
-        label-width="100px"
-      >
-        <el-row style="width: 100%">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+        <el-row>
           <el-col :lg="12" :xs="24">
-            <el-form-item label="数据集名称" prop="username">
-              <el-input
-                v-model="formData.username"
-                :readonly="!!formData.id"
-                placeholder="请输入数据集名称"
-              />
+            <el-form-item label="数据集名称" prop="dataset_name">
+              <el-input v-model="form.dataset_name" placeholder="请输入数据集名称" />
             </el-form-item>
           </el-col>
           <el-col :lg="12" :xs="24">
-            <el-form-item label="数据集版本" prop="roleIds">
+            <el-form-item label="数据集版本" prop="dataset_version">
               <el-input
-                v-model="formData.roleIds"
-                :readonly="!!formData.id"
+                v-model="form.dataset_version"
+                type="number"
                 placeholder="请输入数据集版本"
               />
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row style="width: 100%">
+        <el-row>
           <el-col :lg="12" :xs="24">
-            <el-form-item label="适合任务" prop="username1">
-              <el-input
-                v-model="formData.usernam3e"
-                :readonly="!!formData.id"
-                placeholder="请输入适合任务"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :lg="12" :xs="24">
-            <el-form-item label="数据标签" prop="roleId2s">
-              <el-input
-                v-model="formData.roleIds3"
-                :readonly="!!formData.id"
-                placeholder="请输入数据标签"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row style="width: 100%">
-          <el-col :lg="12" :xs="24">
-            <el-form-item label="数据集格式" prop="username1">
+            <el-form-item label="适用任务类型" prop="modl_sub_type">
               <el-select
-                v-model="formData.roleIds2"
+                v-model="form.modl_sub_type"
+                disabled
+                placeholder="请选择适用任务类型"
+              >
+                <el-option
+                  v-for="item in listOpt.modlSubTypeList"
+                  :key="item.modl_sub_type"
+                  :label="item.modl_sub_type_name"
+                  :value="item.modl_sub_type"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :lg="12" :xs="24">
+            <el-form-item label="数据集格式" prop="dats_dataset_format">
+              <el-select
+                v-model="form.dats_dataset_format"
+                disabled
                 placeholder="请选择数据集格式"
-                style="width: 100%"
               >
-              <el-option label="PNG" value="0" />
-                <el-option label="jPG" value="1" />
-                <el-option label="BMP" value="2" />
-                <el-option label="GRAY8" value="3" />
-                <el-option label="GRAY16" value="4" />
-                <el-option label="RGB24" value="5" />
-                <el-option label="H264" value="6" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :lg="12" :xs="24">
-            <el-form-item label="是否已标注" prop="rolfeId2s">
-              <el-select
-                v-model="formData.rolfeId2s"
-                placeholder="请选择是否已标注"
-                style="width: 100%"
-              >
-                <el-option label="是" value="1" />
-                <el-option label="否" value="2" />
+                <el-option
+                  v-for="item in listOpt.datasetFormatList"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row style="width: 100%">
+        <el-row>
           <el-col :lg="12" :xs="24">
-            <el-form-item label="数据集名称" prop="usernamedd">
+            <el-form-item label="标注类型" prop="dats_label_type">
+              <el-select
+                v-model="form.dats_label_type"
+                disabled
+                placeholder="请选择标注类型"
+              >
+                <el-option
+                  v-for="item in listOpt.labelTypeList"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :lg="12" :xs="24">
+            <el-form-item label="图像分辨率" prop="image_height">
+              <el-row style="width: 100%">
+                <el-col :lg="11">
+                  <el-input
+                    v-model="form.image_width"
+                    disabled
+                    placeholder="请输入分辨率宽度"
+                  >
+                    <template #prepend> 宽 </template>
+                  </el-input>
+                </el-col>
+                <el-col :lg="2" class="font-center"
+                  ><el-icon><Rank /></el-icon
+                ></el-col>
+                <el-col :lg="11">
+                  <el-input
+                    v-model="form.image_height"
+                    disabled
+                    placeholder="请输入分辨率高度"
+                  >
+                    <template #prepend> 高 </template>
+                  </el-input>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :lg="12" :xs="24">
+            <el-form-item label="数据集描述" prop="dataset_desc">
               <el-input
-                v-model="formData.usernamedd"
-                :readonly="!!formData.id"
-                placeholder="请输入数据集名称"
-                :rows="3"
+                v-model="form.dataset_desc"
+                placeholder="请输入数据集描述"
+                :rows="2"
                 type="textarea"
               />
             </el-form-item>
           </el-col>
           <el-col :lg="12" :xs="24"> </el-col>
         </el-row>
+        <el-row>
+          <el-col :lg="12" :xs="24">
+            <el-form-item label="数据集参数文件" prop="dataset_parameters">
+              <el-upload
+                ref="uploadRef"
+                class="upload-demo upload-demo-1"
+                :on-change="handleFileChange"
+                :on-remove="handleFileRemove"
+                :on-exceed="handleFileExceed"
+                :auto-upload="false"
+                :limit="1"
+                accept="application/json"
+              >
+                <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">json</strong> 的文件
+                  </div>
+                </template>
+              </el-upload>
+            </el-form-item>
+          </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>
+            </div>
+          </el-col>
+        </el-row>
       </el-form>
     </el-card>
-    <el-card style="margin-top: 12px;">
+    <el-card style="margin-top: 12px">
       <template #header
         ><svg-icon icon-class="pause" style="width: 20px; height: 20px" />图片信息<strong
           style="color: #409eff"
-          >（15）</strong
+          >（{{ imgCount }}）</strong
+        >
+        <el-button
+          type="primary"
+          style="position: absolute; right: 30px"
+          @click="handleRemoveAll"
+          :disabled="imageList.length==0"
+          ><i-ep-delete />清空全部</el-button
         >
       </template>
-      <el-form>
-        <el-upload
-          action="https://jsonplaceholder.typicode.com/posts/"
-          list-type="picture-card"
-          :file-list="imgList"
-          :limit="10"
-          :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemove"
-        >
-          <i class="i-ep-plus"></i>
-        </el-upload>
-      </el-form>
+      <el-upload
+        v-model:file-list="imageList"
+        class="upload-demo upload-demo-2"
+        :before-remove="beforeRemove"
+      />
+      <el-empty v-if="imageList.length==0" description="暂 无 数 据" />
     </el-card>
     <el-card class="card-footer">
-        <el-button type="primary" @click="handleUpload"><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-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="dialog.visible"
-      :title="dialog.title"
-      :width="dialog.width"
+      v-model="dialogVisible"
+      title="上传标注图片"
+      width="880"
       append-to-body
-      @close="closeDialog"
     >
       <!-- 用户新增/编辑表单 -->
       <el-form
-        v-if="dialog.type === 'user-form'"
-        ref="userFormRef"
+        ref="dialogFormRef"
         :model="formData"
         label-width="80px"
       >
       <el-upload
           v-model:file-list="fileList"
-          class="upload-demo"
+          class="upload-demo upload-demo-3"
           action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
           multiple
           :on-preview="handlePreview"
@@ -160,6 +218,7 @@
         <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"
@@ -181,168 +240,183 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "User",
-  inheritAttrs: false,
-});
-
-import UserAPI from "@/api/user";
-import { UserForm } from "@/api/user/model";
+import ConstApi from "@/api/const";
+import DataSetApi from "@/api/dataSet";
 
+const route = useRoute();
 const router = useRouter();
+
+const ID = ref(""); // 编号
+const form = ref({}); // 基础表单
+const formRef = ref(ElForm); // 表单
 const loading = ref(false); //  加载状态
+const dialogOpen = ref(false); //  加载状态
+const fileStatus = ref(false); //  文件状态
+const codeHtml = ref(""); //  文件信息
+const imgCount = ref(0); //  图片信息
+const imageList = ref([]); //  图片列表
+const remImageList = ref([]); //  删除图片列表
+// 上传组件
+const uploadRef = ref<UploadInstance>();
 
-const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
+const dialogVisible = ref(false); //  加载状态
 
-// 用户表单数据
-const formData = reactive<UserForm>({
-  status: 1,
-});
-
-// 弹窗对象
-const dialog = reactive({
-  visible: false,
-  type: "user-form",
-  width: 800,
-  title: "",
+// 基础数据列表
+let listOpt = reactive({
+  labelTypeList: [],
+  modlSubTypeList: [],
+  datasetFormatList: [],
 });
 
 // 校验规则
 const rules = reactive({
-  username: [{ required: true, message: "不能为空", trigger: "blur" }],
-  nickname: [{ required: true, message: "不能为空", trigger: "blur" }],
-  deptId: [{ required: true, message: "不能为空", trigger: "blur" }],
-  roleIds: [{ required: true, message: "不能为空", trigger: "blur" }],
-  email: [
-    {
-      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-      message: "请输入正确的邮箱地址",
-      trigger: "blur",
-    },
+  dataset_name: [{ required: true, message: "数据集名称不能为空", trigger: "blur" }],
+  dataset_version: [{ required: true, message: "数据集版本不能为空", trigger: "blur" }],
+  modl_sub_type: [{ required: true, message: "适用任务类型不能为空", trigger: "change" }],
+  dats_dataset_format: [
+    { required: true, message: "数据集格式不能为空", trigger: "change" },
   ],
-  mobile: [
-    {
-      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-      message: "请输入正确的手机号码",
-      trigger: "blur",
-    },
+  dats_label_type: [{ required: true, message: "标注类型不能为空", trigger: "change" }],
+  image_width: [{ required: true, message: "分辨率宽度不能为空", trigger: "blur" }],
+  image_height: [{ required: true, message: "分辨率高度不能为空", trigger: "blur" }],
+  dataset_desc: [{ required: false, message: "数据集描述不能为空", trigger: "blur" }],
+  dataset_parameters: [
+    { required: true, message: "数据集参数文件不能为空", trigger: "blur" },
   ],
 });
 
-const imgList = [
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-];
-
-const imgList2 = [
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  },
-  {
-    name: "demo.jepg",
-    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-  }
-];
-
 /** 表单提交 */
 const handleSubmit = useThrottleFn(() => {
-  loading.value = true;
-  setTimeout(() => {
-    ElMessage.success("修改用户成功");
-    loading.value = false;
-    closeBack();
-  }, 1000);
+  formRef.value.validate((valid: any) => {
+    if (valid) {
+      if (!form.value.image_width) {
+        ElMessage.error("请输入图片分辨率宽度！");
+        return false;
+      }
+      loading.value = true;
+      DataSetApi.add(form)
+        .then((res) => {
+          if (res.data.code == 0) {
+            ElMessage.success("保存成功");
+            closeBack();
+          }
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }
+  });
 }, 3000);
 
-/**
- * 打开弹窗
- *
- * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
- * @param id 用户ID
- */
- async function handleUpload() {
-  dialog.visible = true;
-  dialog.title = "上传标注图片";
-  dialog.width = 880;
+/** 删除文件 */
+function beforeRemove(file) {
+  remImageList.value.push(file.name);
+  let remList = [];
+  remList.push(file.name);
+  return ElMessageBox.confirm("确认删除数据集图片?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(
+    async () => {
+      let res = await DataSetApi.deleteFile(ID.value, { file_name_list: remList });
+      if (res.data.code == 0) {
+        imgCount.value = imageList.value.length - 1;
+        ElMessage.success("删除成功");
+      }
+      return true;
+    },
+    () => false
+  );
+}
+
+/** 删除文件-清空所有 */
+function handleRemoveAll() {
+  ElMessageBox.confirm("确认删除全部数据集图片?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    DataSetApi.deleteFile(ID.value, { file_name_list: imageList.value }).then((res) => {
+      if (res.data.code == 0) {
+        imageList.value = [];
+        imgCount.value = imageList.value.length;
+        ElMessage.success("删除成功");
+      }
+    });
+  });
+}
+
+/** 打开文件上传弹窗 */
+function handleImageDialog(){
+  dialogVisible.value=true;
+}
+
+// 文件上传
+function handleFileChange(file) {
+  //先创建一个读文件的对象 FileReader
+  let reader = new FileReader();
+  //判断浏览器是否支持 FileReader
+  if (typeof FileReader === "undefined") {
+    this.$message({
+      type: "info",
+      message: "您的浏览器不支持文件读取。",
+    });
+    return;
+  }
+  uploadFile(file).then((res) => {
+    if (isJSON(res)) {
+      form.value.dataset_parameters = JSON.parse(res);
+      formRef.value.validateField("dataset_parameters");
+      codeHtml.value = res;
+      fileStatus.value = true;
+    }
+  });
+}
+
+/** 解析json */
+function isJSON(str) {
+  try {
+    // 尝试解析输入的字符串
+    JSON.parse(str);
+    ElMessage.success("JSON文件解析成功");
+    return true;
+    // 成功解析
+  } catch (error) {
+    // 解析失败
+    ElMessage.error("JSON文件解析失败");
+    uploadRef.value.clearFiles();
+    fileStatus.value = false;
+    form.value.dataset_parameters = "";
+    return false;
+  }
+}
+
+// 文件读取
+function uploadFile(file) {
+  return new Promise(function (resolve, reject) {
+    let reader = new FileReader();
+    reader.readAsArrayBuffer(file.raw);
+    reader.onload = function (e) {
+      var ints = new Uint8Array(e.target.result); //要使用读取的内容，所以将读取内容转化成Uint8Array
+      let snippets = new TextDecoder("UTF-8").decode(ints); //二进制缓存区内容转化成中文（即也就是读取到的内容）
+      resolve(snippets);
+    };
+  });
+}
+
+// 文件删除
+function handleFileRemove() {
+  form.value.dataset_parameters = "";
+  codeHtml.value = "";
+  fileStatus.value = false;
+}
+
+// 超出限制，清空文件列表
+function handleFileExceed() {
+  uploadRef.value.clearFiles();
+  ElMessage.warning("已清空文件列表,请重新上传！");
+  handleFileRemove();
 }
 
 /** 返回默认页面 */
@@ -350,41 +424,102 @@ function closeBack() {
   router.push({ path: "/dataMgr/datas" });
 }
 
+// 初始化选项列表
+const initData = () => {
+  let id = route.query.id;
+  ID.value = id;
+  DataSetApi.dataSetInfo(id).then((res) => {
+    if (res.data.code == 0) {
+      form.value = res.data.data;
+      codeHtml.value = JSON.stringify(res.data.data.dataset_parameters);
+      if (codeHtml.value == "{}") {
+        fileStatus.value = false;
+      } else {
+        fileStatus.value = true;
+      }
+    }
+  });
+  handleQuery();
+  ConstApi.modlSubType().then((res) => {
+    if (res.data.code == 0) {
+      listOpt.modlSubTypeList = res.data.data.modl_sub_type_list || [];
+    }
+  });
+  ConstApi.datasetFormatType().then((res) => {
+    if (res.data.code == 0) {
+      listOpt.datasetFormatList = res.data.data.dats_dataset_format_list || [];
+    }
+  });
+  ConstApi.datsLabelType().then((res) => {
+    if (res.data.code == 0) {
+      listOpt.labelTypeList = res.data.data.dats_label_type_list || [];
+    }
+  });
+};
+
+// 初始化选项列表
+const handleQuery = () => {
+  DataSetApi.rawFiles(ID.value).then((res) => {
+    if (res.data.code == 0) {
+      let list = [];
+      res.data.data.file_name_list.forEach((item) => {
+        list.push({ name: item, url: item });
+      });
+      imageList.value = list;
+      imgCount.value = imageList.value.length;
+    }
+  });
+};
+
 onMounted(() => {
-  //handleQuery();
+  initData();
 });
 </script>
-<style scoped lang='scss'>
-.model-detail{
-    :deep(.el-card__header){
-        padding:8px 4px;
-        display: flex;
-        align-items: center
-    }    
+<style scoped lang="scss">
+.model-detail {
+  :deep(.el-card__header) {
+    padding: 8px 4px;
+    display: flex;
+    align-items: center;
+  }
 }
-.sp-file{
-    color:#29d;    
+.sp-file {
+  color: #29d;
 }
-.tb-base-info{
-    line-height: 30px;
+.tb-base-info {
+  line-height: 30px;
 }
-:deep(.svg-icon){
-    margin-right:8px;
+:deep(.svg-icon) {
+  margin-right: 8px;
 }
-.card-footer{
+.card-footer {
   position: fixed;
   width: calc(100% - 215px);
   bottom: 0px;
-  :deep(.el-card__body){
-    padding:10px;
-    .el-pagination{
+  :deep(.el-card__body) {
+    padding: 10px;
+    .el-pagination {
       justify-content: end;
     }
   }
 }
+.font-center {
+  text-align: center;
+  color: #cccccc;
+}
 </style>
 <style scope>
-.el-upload--picture-card{
+.upload-demo-2 > .el-upload {
+  display: none !important;
+}
+.upload-demo-2 > .el-upload-list {
+  margin: 0 !important;
+}
+.upload-demo-2 > * > .el-upload-list__item {
+  float: left !important;
+  width: 25% !important;
+}
+.upload-demo-4 > .el-upload--picture-card{
   display: none !important;
 }
 .dialog-footer{
diff --git a/src/views/manage/datas/index.vue b/src/views/manage/datas/index.vue
index f25f793..013191f 100644
--- a/src/views/manage/datas/index.vue
+++ b/src/views/manage/datas/index.vue
@@ -40,14 +40,14 @@
         @selection-change="handleSelectionChange"
       >
         <el-table-column label="数据集名称" align="left" prop="dataset_name" width="250" />
-        <el-table-column label="版本" align="left" prop="dataset_version" />
+        <el-table-column label="版本" align="left" width="80" prop="dataset_version" />
         <el-table-column label="数据集描述" align="left" prop="dataset_desc" />
-        <el-table-column label="适用模型类型" align="left" prop="modl_sub_type_name" />
-        <el-table-column label="数据格式" align="left" prop="dats_dataset_format" />
-        <el-table-column label="图像分辨率" align="left" prop="image_resolution" />
-        <el-table-column label="数量" align="left" prop="frame_count" />
-        <el-table-column label="标注类型" align="left" prop="dats_label_type" />
-        <el-table-column label="操作" fixed="right" width="250">
+        <el-table-column label="适用模型类型" width="120" align="left" prop="modl_sub_type_name" />
+        <el-table-column label="数据格式" width="120" align="left" prop="dats_dataset_format" />
+        <el-table-column label="图像分辨率" width="150" align="left" prop="image_resolution" />
+        <el-table-column label="数量" width="80" align="left" prop="frame_count" />
+        <el-table-column label="标注类型" width="120" align="left" prop="dats_label_type" />
+        <el-table-column label="操作" align="center" fixed="right" width="200">
           <template #default="scope">
             <el-button
               text
diff --git a/src/views/manage/otherTool/view.vue b/src/views/manage/otherTool/view.vue
index bd44a85..2f58480 100644
--- a/src/views/manage/otherTool/view.vue
+++ b/src/views/manage/otherTool/view.vue
@@ -373,8 +373,7 @@ function handleFileChange(file) {
   }
   uploadFile(file).then((res) => {
     if (isJSON(res)) {
-      let jsonStr = JSON.stringify(res);
-      form.params_content = jsonStr;
+      form.params_content = JSON.parse(res);
       form.params_content_v2 = res;
       formRef.value.validateField("params_content");
       fileStatus.value = true;
@@ -396,7 +395,7 @@ function isJSON(str) {
     uploadRef.value.clearFiles();
     fileStatus.value = false;
     form.params_content = "";
-    form.params_content_v2 = "{}";
+    form.params_content_v2 = "";
     return false;
   }
 }
@@ -441,6 +440,11 @@ function handleDetail(row: { [key: string]: any }) {
       //JSON转换
       res.data.data.params_content_v2 = JSON.stringify(res.data.data.params_content);
       dataInfo.value = res.data.data;
+      if (res.data.data.params_content_v2 == "{}") {
+        fileStatus.value = false;
+      } else {
+        fileStatus.value = true;
+      }
       dialogInfoVisible.value = true;
     })
     .finally(() => {