update code

package.json

@@ -51,6 +51,7 @@
     "@wangeditor/editor-for-vue": "5.1.10",
     "animate.css": "^4.1.1",
     "axios": "^1.6.8",
+    "clipboard": "^2.0.11",
     "color": "^4.2.3",
     "echarts": "^5.5.0",
     "element-plus": "^2.7.2",
@@ -67,6 +68,7 @@
     "vue": "^3.4.26",
     "vue-i18n": "9.9.1",
     "vue-router": "^4.3.2",
+    "vue3-json-viewer": "^2.2.2",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/main.ts

@@ -4,12 +4,13 @@ import router from "@/router";
 import { setupStore } from "@/store";
 import { setupDirective } from "@/directive";
 import { setupElIcons, setupI18n, setupPermission } from "@/plugins";
-
+import JsonViewer from "vue3-json-viewer"
 // 本地SVG图标
 import "virtual:svg-icons-register";
 
 // 样式
 import "element-plus/theme-chalk/dark/css-vars.css";
+import "vue3-json-viewer/dist/index.css"
 import "@/styles/index.scss";
 import "uno.css";
 import "animate.css";
@@ -25,4 +26,5 @@ setupElIcons(app);
 setupI18n(app);
 // 注册动态路由
 setupPermission();
+app.use(JsonViewer)
 app.use(router).mount("#app");

src/styles/index.scss

@@ -26,3 +26,18 @@
     color: rgb(32 160 255);
   }
 }
+
+.jv-my-json-view{
+  .jv-code{
+    overflow-y: auto;
+     &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgb(1, 169, 255);
+      border-radius: 4px;
+    }
+  }
+}

src/views/manage/datas/edit.vue

@@ -3,8 +3,7 @@
   <div class="app-container model-detail">
     <!-- 用户新增/编辑表单 -->
     <el-card v-loading="loading">
-      <template #header
+      <template #header><svg-icon icon-class="pause" style="width: 20px; height: 20px" />数据集基本信息
-        ><svg-icon icon-class="pause" style="width: 20px; height: 20px" />数据集基本信息
       </template>
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-row>
@@ -15,44 +14,23 @@
           </el-col>
           <el-col :lg="12" :xs="24">
             <el-form-item label="数据集版本" prop="dataset_version">
-              <el-input
+              <el-input v-model="form.dataset_version" type="number" placeholder="请输入数据集版本" />
-                v-model="form.dataset_version"
-                type="number"
-                placeholder="请输入数据集版本"
-              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :lg="12" :xs="24">
             <el-form-item label="适用任务类型" prop="modl_sub_type">
-              <el-select
+              <el-select v-model="form.modl_sub_type" disabled placeholder="请选择适用任务类型">
-                v-model="form.modl_sub_type"
+                <el-option v-for="item in listOpt.modlSubTypeList" :key="item.modl_sub_type"
-                disabled
+                  :label="item.modl_sub_type_name" :value="item.modl_sub_type" />
-                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
+              <el-select v-model="form.dats_dataset_format" disabled placeholder="请选择数据集格式">
-                v-model="form.dats_dataset_format"
+                <el-option v-for="item in listOpt.datasetFormatList" :key="item" :label="item" :value="item" />
-                disabled
-                placeholder="请选择数据集格式"
-              >
-                <el-option
-                  v-for="item in listOpt.datasetFormatList"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
               </el-select>
             </el-form-item>
           </el-col>
@@ -60,17 +38,8 @@
         <el-row>
           <el-col :lg="12" :xs="24">
             <el-form-item label="标注类型" prop="dats_label_type">
-              <el-select
+              <el-select v-model="form.dats_label_type" disabled placeholder="请选择标注类型">
-                v-model="form.dats_label_type"
+                <el-option v-for="item in listOpt.labelTypeList" :key="item" :label="item" :value="item" />
-                disabled
-                placeholder="请选择标注类型"
-              >
-                <el-option
-                  v-for="item in listOpt.labelTypeList"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
               </el-select>
             </el-form-item>
           </el-col>
@@ -78,23 +47,15 @@
             <el-form-item label="图像分辨率" prop="image_height">
               <el-row style="width: 100%">
                 <el-col :lg="11">
-                  <el-input
+                  <el-input v-model="form.image_width" disabled placeholder="请输入分辨率宽度">
-                    v-model="form.image_width"
-                    disabled
-                    placeholder="请输入分辨率宽度"
-                  >
                     <template #prepend> 宽 </template>
                   </el-input>
                 </el-col>
-                <el-col :lg="2" class="font-center"
+                <el-col :lg="2" class="font-center"><el-icon>
-                  ><el-icon><Rank /></el-icon
+                    <Rank />
-                ></el-col>
+                  </el-icon></el-col>
                 <el-col :lg="11">
-                  <el-input
+                  <el-input v-model="form.image_height" disabled placeholder="请输入分辨率高度">
-                    v-model="form.image_height"
-                    disabled
-                    placeholder="请输入分辨率高度"
-                  >
                     <template #prepend> 高 </template>
                   </el-input>
                 </el-col>
@@ -105,12 +66,7 @@
         <el-row>
           <el-col :lg="12" :xs="24">
             <el-form-item label="数据集描述" prop="dataset_desc">
-              <el-input
+              <el-input v-model="form.dataset_desc" placeholder="请输入数据集描述" :rows="2" type="textarea" />
-                v-model="form.dataset_desc"
-                placeholder="请输入数据集描述"
-                :rows="2"
-                type="textarea"
-              />
             </el-form-item>
           </el-col>
           <el-col :lg="12" :xs="24"> </el-col>
@@ -118,20 +74,11 @@
         <el-row>
           <el-col :lg="12" :xs="24">
             <el-form-item label="数据集参数文件" prop="dataset_parameters">
-              <el-upload
+              <el-upload ref="uploadRef" class="upload-demo upload-demo-1" :on-change="handleFileChange"
-                ref="uploadRef"
+                :on-remove="handleFileRemove" :on-exceed="handleFileExceed" :auto-upload="false" :limit="1"
-                class="upload-demo upload-demo-1"
+                accept="application/json">
-                :on-change="handleFileChange"
+                <el-button type="primary"><el-icon class="el-icon--upload"> <i-ep-upload-filled />
-                :on-remove="handleFileRemove"
+                  </el-icon>选择文件</el-button>
-                :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>，格式为
@@ -143,66 +90,34 @@
           </el-col>
           <el-col :lg="12" :xs="24">
             <div style="padding-left: 35px" v-if="fileStatus">
-              <el-divider content-position="left"
+              <el-divider content-position="left"><strong style="color: #409eff">数据集参数文件预览</strong></el-divider>
-                ><strong style="color: #409eff">数据集参数文件预览</strong></el-divider
+              <json-viewer :value="jsonData.data" copyable boxed sort theme="my-json-view jv-light" />
-              >
-              <el-input
-                v-model="codeHtml"
-                placeholder="请输入数据集参数JSON"
-                :rows="10"
-                disabled
-                type="textarea"
-              />
             </div>
           </el-col>
         </el-row>
       </el-form>
     </el-card>
     <el-card style="margin-top: 12px">
-      <template #header
+      <template #header><svg-icon icon-class="pause" style="width: 20px; height: 20px" />图片信息<strong
-        ><svg-icon icon-class="pause" style="width: 20px; height: 20px" />图片信息<strong
+          style="color: #409eff">（{{ imgCount }}）</strong>
-          style="color: #409eff"
+        <el-button type="primary" style="position: absolute; right: 30px" @click="handleRemoveAll"
-          >（{{ imgCount }}）</strong
+          :disabled="imageList.length == 0"><i-ep-delete />清空全部</el-button>
-        >
-        <el-button
-          type="primary"
-          style="position: absolute; right: 30px"
-          @click="handleRemoveAll"
-          :disabled="imageList.length == 0"
-          ><i-ep-delete />清空全部</el-button
-        >
       </template>
-      <el-upload
+      <el-upload v-model:file-list="imageList" class="upload-demo upload-demo-2" :before-remove="beforeRemove" />
-        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="handleImageDialog"
+      <el-button type="primary" @click="handleImageDialog"><i-ep-upload-filled />上传图片</el-button>
-        ><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-card v-loading.fullscreen.lock="uploadLoading">
-        <el-upload
+        <el-upload v-model:file-list="uploadImgFileList" class="upload-demo upload-demo-3"
-          v-model:file-list="uploadImgFileList"
+          :before-remove="handleRemoveFiles" :auto-upload="autoUpload" :on-change="handleChangeFiles"
-          class="upload-demo upload-demo-3"
+          list-type="picture" multiple accept="application/json,image/jpeg">
-          :before-remove="handleRemoveFiles"
-          :auto-upload="autoUpload"
-          :on-change="handleChangeFiles"
-          list-type="picture"
-          multiple
-          accept="application/json,image/jpeg"
-        >
           <!--accept="application/json,image/png,image/jpg,image/jpeg"-->
-          <el-button type="primary"
+          <el-button type="primary"><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon>选择文件</el-button>
-            ><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>，格式为
@@ -215,12 +130,7 @@
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div class="dialog-footer">
-          <el-button
+          <el-button type="primary" :disabled="uploadImgFileList.length == 0" @click="startUploadFiles">开始上传</el-button>
-            type="primary"
-            :disabled="uploadImgFileList.length == 0"
-            @click="startUploadFiles"
-            >开始上传</el-button
-          >
           <el-button @click="dialogVisible = false">取 消</el-button>
         </div>
       </template>
@@ -231,7 +141,7 @@
 <script setup lang="ts">
 import ConstApi from "@/api/const";
 import DataSetApi from "@/api/dataSet";
-
+import { json } from 'stream/consumers';
 const route = useRoute();
 const router = useRouter();
 
@@ -242,6 +152,9 @@ const loading = ref(false); //  加载状态
 const dialogOpen = ref(false); //  加载状态
 const fileStatus = ref(false); //  文件状态
 const codeHtml = ref(""); //  文件信息
+const jsonData = reactive({
+  data: {}
+})
 const imgCount = ref(0); //  图片信息
 const imageList = ref([]); //  图片列表
 const remImageList = ref([]); //  删除图片列表
@@ -467,6 +380,7 @@ function handleFileChange(file) {
       form.value.dataset_parameters = JSON.parse(res);
       formRef.value.validateField("dataset_parameters");
       codeHtml.value = res;
+      jsonData.data = res;
       fileStatus.value = true;
     }
   });
@@ -507,6 +421,7 @@ function uploadFile(file) {
 function handleFileRemove() {
   form.value.dataset_parameters = "";
   codeHtml.value = "";
+  jsonData.data = {};
   fileStatus.value = false;
 }
 
@@ -533,6 +448,7 @@ const initData = () => {
       res.data.data.image_height = resolution[1];
       form.value = res.data.data;
       codeHtml.value = JSON.stringify(res.data.data.dataset_parameters);
+      jsonData.data = res.data.data.dataset_parameters;
       if (codeHtml.value == "{}") {
         fileStatus.value = false;
       } else {
@@ -586,26 +502,33 @@ onMounted(() => {
     align-items: center;
   }
 }
+
 .sp-file {
   color: #29d;
 }
+
 .tb-base-info {
   line-height: 30px;
 }
+
 :deep(.svg-icon) {
   margin-right: 8px;
 }
+
 .card-footer {
   position: fixed;
   width: calc(100% - 215px);
   bottom: 0px;
+
   :deep(.el-card__body) {
     padding: 10px;
+
     .el-pagination {
       justify-content: end;
     }
   }
 }
+
 .font-center {
   text-align: center;
   color: #cccccc;
@@ -615,29 +538,37 @@ onMounted(() => {
 .el-dialog__body {
   overflow: auto;
 }
+
 .el-card__body {
   overflow: auto;
 }
-.upload-demo-2 > .el-upload {
+
+.upload-demo-2>.el-upload {
   display: none !important;
 }
-.upload-demo-2 > .el-upload-list {
+
+.upload-demo-2>.el-upload-list {
   margin: 0 !important;
 }
-.upload-demo-2 > * > .el-upload-list__item {
+
+.upload-demo-2>*>.el-upload-list__item {
   float: left !important;
   width: 25% !important;
 }
-.upload-demo-3 > * > .el-upload-list__item {
+
+.upload-demo-3>*>.el-upload-list__item {
   float: left !important;
   width: 49% !important;
 }
-.upload-demo-3 > * > .el-upload-list__item:nth-child(even) {
+
+.upload-demo-3>*>.el-upload-list__item:nth-child(even) {
   margin-left: 10px;
 }
+
 .dialog-footer {
   text-align: center;
 }
+
 .mylabel {
   position: absolute;
   right: 10px;