From 7648480dcdfd97ad823107640e2506c5c5d88ce0 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: Thu, 17 Oct 2024 12:57:22 +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        |  7 +++----
 src/views/manage/datas/edit.vue | 37 ++++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/api/dataSet/index.js b/src/api/dataSet/index.js
index 824621f..43d7cf0 100644
--- a/src/api/dataSet/index.js
+++ b/src/api/dataSet/index.js
@@ -39,11 +39,10 @@ const updateDataSet = (id, data) => {
     });
 }
 //下载图像文件
-const downloadFile = (id) => {
+const downloadFile = (id,fileName) => {
     return request({
-        url: `/dataset/raw/${id}/download`,
-        method: 'get',
-        params: data
+        url: `/dataset/raw/${id}/download?fileName=${fileName}`,
+        method: 'get'
     })
 }
 //删除指定的图像文件
diff --git a/src/views/manage/datas/edit.vue b/src/views/manage/datas/edit.vue
index 7b414c4..404a739 100644
--- a/src/views/manage/datas/edit.vue
+++ b/src/views/manage/datas/edit.vue
@@ -103,7 +103,7 @@
         <el-button type="primary" style="position: absolute; right: 30px" @click="handleRemoveAll"
           :disabled="imageList.length == 0"><i-ep-delete />清空全部</el-button>
       </template>
-      <el-upload v-model:file-list="imageList" class="upload-demo upload-demo-2" :before-remove="beforeRemove" />
+      <el-upload v-model:file-list="imageList" class="upload-demo upload-demo-2" :before-remove="beforeRemove" :on-preview="handlePreview"/>
       <el-empty v-if="imageList.length == 0" description="暂 无 数 据" />
     </el-card>
     <el-card class="card-footer">
@@ -135,6 +135,20 @@
         </div>
       </template>
     </el-dialog>
+    <div class="demo-image__preview">
+      <el-image
+        
+        class="imgPreView"
+        :src="imgPreSrc"
+        :zoom-rate="1.2"
+        :max-scale="7"
+        :min-scale="0.2"
+        :preview-src-list="imgPreSrcList"
+        :initial-index="4"
+        style="width: 1px; height: 1px"
+        fit="cover"
+      />
+    </div>
   </div>
 </template>
 
@@ -154,6 +168,10 @@ const codeHtml = ref(""); //  文件信息
 const jsonData = reactive({
   data: {}
 })
+const imgViewer = ref(false);
+const imgPreSrc = ref("");
+const imgPreSrcList = ref([]);
+const imgViewerRef = ref(""); // 图片预览组件
 const imgCount = ref(0); //  图片信息
 const imageList = ref([]); //  图片列表
 const remImageList = ref([]); //  删除图片列表
@@ -450,6 +468,23 @@ function closeBack() {
   router.push({ path: "/dataMgr/datas" });
 }
 
+/** 预览图片 */
+function handlePreview(file) {
+  imgPreSrcList.value = [];
+  DataSetApi.downloadFile(ID.value,file.name).then(res =>{
+    console.log(res)
+    if(res.data.code==0){
+      imgPreSrc.value = "data:image/gif;base64," + res.data.data.file_content;
+      imgPreSrcList.value.push(imgPreSrc.value);
+      setTimeout(() => {
+        console.log("点击事件===>");
+        imgViewer.value = true;
+        document.getElementsByClassName("imgPreView")[0].children[0].click();
+      }, 50);
+    }
+  });
+}
+
 // 初始化选项列表
 const initData = () => {
   let id = route.query.id;