From a9d0f68f524fc4dc3f046aff48138a9f666b3eab Mon Sep 17 00:00:00 2001
From: guocan <mark.guo@farben.com.cn>
Date: Wed, 28 May 2025 18:20:06 +0800
Subject: [PATCH] =?UTF-8?q?ui=E8=87=AA=E5=8A=A8=E5=8C=96=E6=8A=A5=E8=A1=A8?=
 =?UTF-8?q?=E6=88=AA=E5=9B=BE=E6=9F=A5=E7=9C=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../test/controller/UiReportController.java   | 37 ++++++++---
 .../service/impl/UiSceneStepsServiceImpl.java |  7 +-
 test-ui/src/api/uiTest/testReport.js          | 10 +++
 .../views/test/uiTest/testReportDetail.vue    | 64 +++++++++++++++----
 4 files changed, 94 insertions(+), 24 deletions(-)

diff --git a/test-test/src/main/java/com/test/test/controller/UiReportController.java b/test-test/src/main/java/com/test/test/controller/UiReportController.java
index 4a0f23c..83720f0 100644
--- a/test-test/src/main/java/com/test/test/controller/UiReportController.java
+++ b/test-test/src/main/java/com/test/test/controller/UiReportController.java
@@ -1,5 +1,9 @@
 package com.test.test.controller;
 
+import java.io.File;
+import java.io.FileInputStream;
+import java.io.IOException;
+import java.io.OutputStream;
 import java.util.List;
 
 import com.test.test.domain.UiReport;
@@ -7,14 +11,7 @@ import com.test.test.service.IUiReportService;
 import jakarta.servlet.http.HttpServletResponse;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.PutMapping;
-import org.springframework.web.bind.annotation.DeleteMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 import com.test.common.annotation.Log;
 import com.test.common.core.controller.BaseController;
 import com.test.common.core.domain.AjaxResult;
@@ -70,4 +67,28 @@ public class UiReportController extends BaseController
     {
         return toAjax(uiReportService.deleteUiReportByIds(ids));
     }
+
+
+    @GetMapping("/screenshot")
+    public void getScreenshot(@RequestParam String path, HttpServletResponse response) throws IOException {
+        File file = new File(path);
+        if (!file.exists()) {
+            try {
+                response.sendError(HttpServletResponse.SC_NOT_FOUND);
+            } catch (IOException e) {
+                throw new RuntimeException(e);
+            }
+            return;
+        }
+
+        response.setContentType("image/png");
+        try (FileInputStream in = new FileInputStream(file);
+             OutputStream out = response.getOutputStream()) {
+            byte[] buffer = new byte[4096];
+            int length;
+            while ((length = in.read(buffer)) > 0) {
+                out.write(buffer, 0, length);
+            }
+        }
+    }
 }
diff --git a/test-test/src/main/java/com/test/test/service/impl/UiSceneStepsServiceImpl.java b/test-test/src/main/java/com/test/test/service/impl/UiSceneStepsServiceImpl.java
index 46c79be..4b14e40 100644
--- a/test-test/src/main/java/com/test/test/service/impl/UiSceneStepsServiceImpl.java
+++ b/test-test/src/main/java/com/test/test/service/impl/UiSceneStepsServiceImpl.java
@@ -424,13 +424,14 @@ public class UiSceneStepsServiceImpl implements IUiSceneStepsService {
                 Thread.sleep(beforeAwaitTime);
             }
 
+
+            // 3. 执行具体步骤
+            stepExecution.execute(step, seleniumUtils);
+
             if (screenshotConfiguration == 1) {
                 report.setScreenshot(seleniumUtils.takeScreenshotAsFile(TestConfig.getProfile()));
                 log.info("截图成功,路径:{}", seleniumUtils.takeScreenshotAsFile(TestConfig.getProfile()));
             }
-            // 3. 执行具体步骤
-            stepExecution.execute(step, seleniumUtils);
-
             // 执行后置等待
             if (afterAwaitTime > 0) {
                 log.info("执行后置等待: {}ms", afterAwaitTime);
diff --git a/test-ui/src/api/uiTest/testReport.js b/test-ui/src/api/uiTest/testReport.js
index 9d3540f..ec424c0 100644
--- a/test-ui/src/api/uiTest/testReport.js
+++ b/test-ui/src/api/uiTest/testReport.js
@@ -24,3 +24,13 @@ export function getTestReportDetail(query) {
     method: 'get',
   })
 }
+
+// 测试报告 - 获取截图
+export function getScreenshot(path) {
+  return request({
+    url: '/test/report/screenshot',
+    method: 'get',
+    params: { path },
+    responseType: 'blob'
+  })
+}
diff --git a/test-ui/src/views/test/uiTest/testReportDetail.vue b/test-ui/src/views/test/uiTest/testReportDetail.vue
index cb8541c..3b96b39 100644
--- a/test-ui/src/views/test/uiTest/testReportDetail.vue
+++ b/test-ui/src/views/test/uiTest/testReportDetail.vue
@@ -105,7 +105,7 @@
                         </div>
                         <div class="right-collapse">
                           <div>{{ item.take }}</div>
-                          <el-button size="mini" type="text" @click.native.stop="clickHandleScreenshot">截图</el-button>
+                          <el-button v-if="item.screenshot" size="mini" type="text" @click.native.stop="clickHandleScreenshot(item.screenshot)">截图</el-button>
                           <div class="collapse-status">
                             <div v-if="item.executionFlag === '1'">成功</div>
                             <div v-if="item.executionFlag === '0'">未执行</div>
@@ -148,7 +148,7 @@
                         </div>
                         <div class="right-collapse">
                           <div>{{ item.take }}</div>
-                          <el-button size="mini" type="text" @click.native.stop="clickHandleScreenshot">截图</el-button>
+                          <el-button v-if="item.screenshot" size="mini" type="text" @click.native.stop="clickHandleScreenshot(item.screenshot)">截图</el-button>
                           <div class="collapse-status">
                             <div v-if="item.executionFlag === '1'">成功</div>
                             <div v-if="item.executionFlag === '0'">未执行</div>
@@ -191,7 +191,7 @@
                         </div>
                         <div class="right-collapse">
                           <div>{{ item.take }}</div>
-                          <el-button size="mini" type="text" @click.native.stop="clickHandleScreenshot">截图</el-button>
+                          <el-button v-if="item.screenshot" size="mini" type="text" @click.native.stop="clickHandleScreenshot(item.screenshot)">截图</el-button>
                           <div class="collapse-status">
                             <div v-if="item.executionFlag === '1'">成功</div>
                             <div v-if="item.executionFlag === '0'">未执行</div>
@@ -219,12 +219,25 @@
         </el-tab-pane>
       </el-tabs>
     </div>
+
+    <!-- 图片预览对话框 -->
+    <el-dialog :visible.sync="dialogVisible" append-to-body width="80%" :close-on-click-modal="false">
+      <div v-loading="imageLoading" style="min-height: 200px;">
+        <el-image 
+          v-if="previewUrl"
+          style="width: 100%" 
+          :src="previewUrl" 
+          :preview-src-list="[previewUrl]"
+          fit="contain"
+        />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts';
-import { getTestReportDetail } from '../../../api/uiTest/testReport';
+import { getTestReportDetail, getScreenshot } from '../../../api/uiTest/testReport';
 
 export default {
   name: "TestReportDetail",
@@ -233,10 +246,13 @@ export default {
     return {
       activeName: 'first',
       uiSceneStepsAllReportVOList: [], // 全部
-      uiSceneStepsErrorReportVOList: [{ title: 'aaa', contentList: [{}, {}] }, { title: 'bbb', contentList: [{}, {}] }], // 失败
-      uiSceneStepsNotReportVOList: [{ title: 'aaa', contentList: [{}, {}] }, { title: 'bbb', contentList: [{}, {}] }], // 未执行
+      uiSceneStepsErrorReportVOList: [], // 失败
+      uiSceneStepsNotReportVOList: [], // 未执行
       active: 'first',
       detailData: {}, // 详情内容
+      dialogVisible: false, // 图片预览对话框是否显示
+      previewUrl: '', // 预览图片的URL
+      imageLoading: false, // 图片加载状态
     }
   },
   mounted() {
@@ -255,18 +271,40 @@ export default {
         }
       })
     },
-    // 截图
-    clickHandleScreenshot() {
-      console.log('截图')
+    // 截图预览
+    async clickHandleScreenshot(screenshot) {
+      if (screenshot) {
+        try {
+          this.imageLoading = true;
+          this.dialogVisible = true;
+          
+          // 获取图片数据
+          const response = await getScreenshot(screenshot);
+          
+          // 创建 Blob URL
+          const blob = new Blob([response], { type: 'image/png' });
+          if (this.previewUrl) {
+            URL.revokeObjectURL(this.previewUrl); // 释放之前的 URL
+          }
+          this.previewUrl = URL.createObjectURL(blob);
+        } catch (error) {
+          this.$message.error('图片加载失败');
+          this.dialogVisible = false;
+        } finally {
+          this.imageLoading = false;
+        }
+      }
     },
+  },
+  beforeDestroy() {
+    // 清理 Blob URL
+    if (this.previewUrl) {
+      URL.revokeObjectURL(this.previewUrl);
+    }
   }
-
 }
-
 </script>
 
-
-
 <style scoped lang="scss">
 .report-detail {
   padding: 20px;