From 2d5a6e8254bbea1014fc824561944f4b1e5907eb Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Fri, 26 Dec 2025 11:15:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E5=87=BA=E4=B8=8B=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/image-recognition.js           |  22 +-
 src/router/index.js                           |   5 +
 .../image-recognition/ExportProgress.vue      | 414 ++++++++++++++++++
 src/views/device/image-recognition/index.vue  |  58 +--
 4 files changed, 463 insertions(+), 36 deletions(-)
 create mode 100644 src/views/device/image-recognition/ExportProgress.vue

diff --git a/src/api/device/image-recognition.js b/src/api/device/image-recognition.js
index b6b21cd..f42a135 100644
--- a/src/api/device/image-recognition.js
+++ b/src/api/device/image-recognition.js
@@ -9,10 +9,28 @@ export function imageRecognitionListAPI(params) {
     })
 }
 
-// 设备管理->图像识别->导出图像识别数据
+// 设备管理->图像识别->导出图像识别数据（启动导出任务）
 export function exportImageRecognitionAPI(params) {
     return request({
-        url: '/smartCar/device/imageRecognition/exportImageRecognition',
+        url: '/smartCar/device/imageRecognition/export',
+        method: 'GET',
+        params
+    })
+}
+
+// 设备管理->图像识别->查询导出进度
+export function getExportProgressAPI(params) {
+    return request({
+        url: '/smartCar/device/imageRecognition/progress',
+        method: 'GET',
+        params
+    })
+}
+
+// 设备管理->图像识别->下载导出文件
+export function downloadExportFileAPI(params) {
+    return request({
+        url: '/smartCar/device/imageRecognition/download',
         method: 'GET',
         params,
         responseType: 'blob'
diff --git a/src/router/index.js b/src/router/index.js
index ff857a1..05549ec 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -87,6 +87,11 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
+  },
+  {
+    path: '/device/image-recognition/export-progress',
+    component: () => import('@/views/device/image-recognition/ExportProgress'),
+    hidden: true
   }
 ]
 
diff --git a/src/views/device/image-recognition/ExportProgress.vue b/src/views/device/image-recognition/ExportProgress.vue
new file mode 100644
index 0000000..ccb9946
--- /dev/null
+++ b/src/views/device/image-recognition/ExportProgress.vue
@@ -0,0 +1,414 @@
+<template>
+    <div class="export-progress-container">
+        <div class="progress-card">
+            <div class="card-header">
+                <h3 class="title">导出进度</h3>
+            </div>
+            <div class="card-body">
+                <!-- 进度显示 -->
+                <div v-if="!isCompleted && !isError" class="progress-section">
+                    <div class="progress-info">
+                        <i class="el-icon-loading loading-icon"></i>
+                        <span class="progress-text">{{ progressText }}</span>
+                    </div>
+                    <el-progress 
+                        :percentage="progress" 
+                        :status="progressStatus"
+                        :stroke-width="8"
+                        class="progress-bar">
+                    </el-progress>
+                    <div class="progress-detail">
+                        <span>正在生成压缩包，请稍候...</span>
+                    </div>
+                </div>
+
+                <!-- 完成状态 -->
+                <div v-if="isCompleted" class="completed-section">
+                    <div class="success-icon">
+                        <i class="el-icon-success"></i>
+                    </div>
+                    <div class="success-text">压缩包生成完成！</div>
+                    <el-button 
+                        type="primary" 
+                        class="download-btn"
+                        @click="handleDownload">
+                        <i class="el-icon-download"></i>
+                        下载文件
+                    </el-button>
+                </div>
+
+                <!-- 错误状态 -->
+                <div v-if="isError" class="error-section">
+                    <div class="error-icon">
+                        <i class="el-icon-error"></i>
+                    </div>
+                    <div class="error-text">{{ errorMessage || '导出失败，请稍后重试' }}</div>
+                    <el-button 
+                        type="default" 
+                        class="close-btn"
+                        @click="handleClose">
+                        关闭窗口
+                    </el-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { exportImageRecognitionAPI, getExportProgressAPI, downloadExportFileAPI } from '@/api/device/image-recognition'
+
+export default {
+    name: 'ExportProgress',
+    data() {
+        return {
+            progress: 0,
+            progressText: '0%',
+            progressStatus: '',
+            isCompleted: false,
+            isError: false,
+            errorMessage: '',
+            taskId: null,
+            downloadUrl: null,
+            fileName: null,
+            pollTimer: null,
+            params: {}
+        }
+    },
+    created() {
+        // 从URL参数获取导出参数
+        const urlParams = new URLSearchParams(window.location.search)
+        const paramsStr = urlParams.get('params')
+        if (paramsStr) {
+            try {
+                this.params = JSON.parse(decodeURIComponent(paramsStr))
+            } catch (e) {
+                console.error('解析参数失败:', e)
+                this.isError = true
+                this.errorMessage = '参数解析失败'
+                return
+            }
+        }
+        // 开始导出任务
+        this.startExport()
+    },
+    beforeDestroy() {
+        // 清理定时器
+        if (this.pollTimer) {
+            clearInterval(this.pollTimer)
+        }
+    },
+    methods: {
+        /** 开始导出任务 */
+        async startExport() {
+            try {
+                // 调用导出接口，启动导出任务
+                const res = await exportImageRecognitionAPI(this.params)
+                if (res.code === 200) {
+                    // 如果接口直接返回任务ID
+                    if (res.data && res.data.taskId) {
+                        this.taskId = res.data.taskId
+                        // 开始轮询进度
+                        this.startPolling()
+                    } else if (res.data && res.data.downloadUrl) {
+                        // 如果接口直接返回下载地址，说明已完成
+                        this.downloadUrl = res.data.downloadUrl
+                        this.fileName = res.data.fileName || `图像识别数据_${new Date().getTime()}.zip`
+                        this.isCompleted = true
+                        this.progress = 100
+                    } else if (res.data && typeof res.data === 'string') {
+                        // 如果返回的是字符串，可能是任务ID
+                        this.taskId = res.data
+                        this.startPolling()
+                    } else if (res.taskId) {
+                        // 任务ID在根级别
+                        this.taskId = res.taskId
+                        this.startPolling()
+                    } else {
+                        // 默认情况：假设返回的是任务ID（根据实际后端接口调整）
+                        this.taskId = res.data || res.taskId
+                        if (this.taskId) {
+                            this.startPolling()
+                        } else {
+                            this.isError = true
+                            this.errorMessage = '未获取到任务ID'
+                        }
+                    }
+                } else {
+                    this.isError = true
+                    this.errorMessage = res.msg || '启动导出任务失败'
+                }
+            } catch (error) {
+                console.error('启动导出任务失败:', error)
+                this.isError = true
+                this.errorMessage = error.message || '启动导出任务失败，请稍后重试'
+            }
+        },
+        /** 开始轮询进度 */
+        startPolling() {
+            // 立即查询一次
+            this.checkProgress()
+            // 每2秒查询一次进度
+            this.pollTimer = setInterval(() => {
+                this.checkProgress()
+            }, 2000)
+        },
+        /** 查询导出进度 */
+        async checkProgress() {
+            if (!this.taskId) {
+                this.isError = true
+                this.errorMessage = '任务ID不存在'
+                return
+            }
+            try {
+                const res = await getExportProgressAPI({ taskId: this.taskId })
+                if (res.code === 200) {
+                    const data = res.data
+                    // 更新进度
+                    this.progress = data.progress || 0
+                    this.progressText = `${this.progress}%`
+                    
+                    // 如果进度为100%或状态为完成
+                    if (this.progress >= 100 || data.status === 'completed' || data.status === 'success') {
+                        this.isCompleted = true
+                        this.downloadUrl = data.downloadUrl
+                        this.fileName = data.fileName || `图像识别数据_${new Date().getTime()}.zip`
+                        // 停止轮询
+                        if (this.pollTimer) {
+                            clearInterval(this.pollTimer)
+                            this.pollTimer = null
+                        }
+                    } else if (data.status === 'failed' || data.status === 'error') {
+                        // 任务失败
+                        this.isError = true
+                        this.errorMessage = data.message || '导出任务失败'
+                        if (this.pollTimer) {
+                            clearInterval(this.pollTimer)
+                            this.pollTimer = null
+                        }
+                    }
+                } else {
+                    this.isError = true
+                    this.errorMessage = res.msg || '查询进度失败'
+                    if (this.pollTimer) {
+                        clearInterval(this.pollTimer)
+                        this.pollTimer = null
+                    }
+                }
+            } catch (error) {
+                console.error('查询进度失败:', error)
+                // 不立即显示错误，可能是网络问题，继续轮询
+            }
+        },
+        /** 下载文件 */
+        async handleDownload() {
+            try {
+                let blob
+                let fileName = this.fileName || `图像识别数据_${new Date().getTime()}.zip`
+                
+                if (this.downloadUrl && this.downloadUrl.startsWith('http')) {
+                    // 如果是完整的URL，直接下载
+                    window.open(this.downloadUrl, '_blank')
+                    this.$message.success('开始下载')
+                    return
+                } else if (this.taskId) {
+                    // 使用任务ID调用下载接口
+                    const res = await downloadExportFileAPI({ 
+                        taskId: this.taskId
+                    })
+                    
+                    // 检查响应是否为blob
+                    if (res instanceof Blob) {
+                        blob = res
+                    } else if (res.code === 200 && res.data) {
+                        blob = res.data instanceof Blob ? res.data : new Blob([res.data], { type: 'application/zip' })
+                        if (res.data.fileName) {
+                            fileName = res.data.fileName
+                        }
+                    } else {
+                        this.$message.error(res.msg || '下载失败')
+                        return
+                    }
+                } else if (this.downloadUrl) {
+                    // 使用下载URL调用接口
+                    const res = await downloadExportFileAPI({ 
+                        downloadUrl: this.downloadUrl 
+                    })
+                    if (res instanceof Blob) {
+                        blob = res
+                    } else if (res.code === 200 && res.data) {
+                        blob = res.data instanceof Blob ? res.data : new Blob([res.data], { type: 'application/zip' })
+                    } else {
+                        this.$message.error(res.msg || '下载失败')
+                        return
+                    }
+                } else {
+                    this.$message.error('下载地址不存在')
+                    return
+                }
+                
+                // 处理文件下载
+                const url = window.URL.createObjectURL(blob)
+                const link = document.createElement('a')
+                link.href = url
+                link.download = fileName
+                link.click()
+                window.URL.revokeObjectURL(url)
+                this.$message.success('下载成功')
+            } catch (error) {
+                console.error('下载失败:', error)
+                // 如果接口调用失败，尝试直接使用downloadUrl下载
+                if (this.downloadUrl && this.downloadUrl.startsWith('http')) {
+                    window.open(this.downloadUrl, '_blank')
+                } else {
+                    this.$message.error('下载失败，请稍后重试')
+                }
+            }
+        },
+        /** 关闭窗口 */
+        handleClose() {
+            window.close()
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.export-progress-container {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(180deg, #f1f6ff 20%, #e5efff 100%);
+    padding: 20px;
+
+    .progress-card {
+        width: 500px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+
+        .card-header {
+            padding: 20px 24px;
+            border-bottom: 1px solid #ebeef5;
+            background: #fff;
+
+            .title {
+                font-size: 18px;
+                font-weight: 600;
+                color: #333;
+                margin: 0;
+            }
+        }
+
+        .card-body {
+            padding: 40px 24px;
+
+            .progress-section {
+                text-align: center;
+
+                .progress-info {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-bottom: 20px;
+
+                    .loading-icon {
+                        font-size: 24px;
+                        color: #1f72ea;
+                        margin-right: 12px;
+                        animation: rotating 2s linear infinite;
+                    }
+
+                    .progress-text {
+                        font-size: 16px;
+                        font-weight: 600;
+                        color: #333;
+                    }
+                }
+
+                .progress-bar {
+                    margin-bottom: 16px;
+                }
+
+                .progress-detail {
+                    color: #606266;
+                    font-size: 14px;
+                }
+            }
+
+            .completed-section {
+                text-align: center;
+
+                .success-icon {
+                    margin-bottom: 20px;
+
+                    i {
+                        font-size: 64px;
+                        color: #67c23a;
+                    }
+                }
+
+                .success-text {
+                    font-size: 16px;
+                    color: #333;
+                    margin-bottom: 24px;
+                    font-weight: 500;
+                }
+
+                .download-btn {
+                    width: 160px;
+                    height: 40px;
+                    background: #1f72ea;
+                    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
+                    border-radius: 4px;
+                    border: none;
+                    font-size: 14px;
+
+                    &:hover {
+                        background: #4a8bff;
+                        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
+                    }
+                }
+            }
+
+            .error-section {
+                text-align: center;
+
+                .error-icon {
+                    margin-bottom: 20px;
+
+                    i {
+                        font-size: 64px;
+                        color: #f56c6c;
+                    }
+                }
+
+                .error-text {
+                    font-size: 16px;
+                    color: #333;
+                    margin-bottom: 24px;
+                }
+
+                .close-btn {
+                    width: 160px;
+                    height: 40px;
+                    border-radius: 4px;
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+}
+
+@keyframes rotating {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>
+
diff --git a/src/views/device/image-recognition/index.vue b/src/views/device/image-recognition/index.vue
index 9f597fa..fd8c77a 100644
--- a/src/views/device/image-recognition/index.vue
+++ b/src/views/device/image-recognition/index.vue
@@ -184,13 +184,13 @@ export default {
                     const list = (res.rows || []).map(item => {
                         // 处理图片路径，默认使用 test_image
                         let imageUrl = this.test_image
-                        if (item.filePath) {
+                        /* if (item.filePath) {
                             if (isExternal(item.filePath)) {
                                 imageUrl = item.filePath
                             } else {
                                 imageUrl = process.env.VUE_APP_BASE_API + item.filePath
                             }
-                        }
+                        } */
                         
                         return {
                             id: item.identificationDataId,
@@ -236,39 +236,29 @@ export default {
         },
 
         /** 导出操作 */
-        async handleExport() {
-            try {
-                this.loading = true
-                const params = { ...this.queryParams }
-                
-                // 导出时给开始时间添加 :00 秒，结束时间添加 :59 秒
-                if (params.startTime && params.startTime.length === 16) {
-                    params.startTime = params.startTime + ':00'
-                }
-                if (params.endTime && params.endTime.length === 16) {
-                    params.endTime = params.endTime + ':59'
-                }
-                
-                const res = await exportImageRecognitionAPI(params)
-                if (res.code === 200) {
-                    // 处理文件下载
-                    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
-                    const url = window.URL.createObjectURL(blob)
-                    const link = document.createElement('a')
-                    link.href = url
-                    link.download = `图像识别数据_${new Date().getTime()}.xlsx`
-                    link.click()
-                    window.URL.revokeObjectURL(url)
-                    this.$message.success('导出成功')
-                } else {
-                    this.$message.error(res.msg || '导出失败')
-                }
-            } catch (error) {
-                console.error('导出失败:', error)
-                this.$message.error('导出失败')
-            } finally {
-                this.loading = false
+        handleExport() {
+            const params = { ...this.queryParams }
+            
+            // 导出时给开始时间添加 :00 秒，结束时间添加 :59 秒
+            if (params.startTime && params.startTime.length === 16) {
+                params.startTime = params.startTime + ':00'
             }
+            if (params.endTime && params.endTime.length === 16) {
+                params.endTime = params.endTime + ':59'
+            }
+            
+            // 将参数编码后作为URL参数传递
+            const paramsStr = encodeURIComponent(JSON.stringify(params))
+            const url = `${window.location.origin}${process.env.VUE_APP_ENV === 'production' ? '/smart-car' : ''}/device/image-recognition/export-progress?params=${paramsStr}`
+            
+            // 计算窗口居中位置
+            const width = 750
+            const height = 500
+            const left = (window.screen.width - width) / 2
+            const top = (window.screen.height - height) / 2
+            
+            // 打开新窗口（居中显示）
+            window.open(url, '_blank', `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`)
         },
 
         /** 时间范围变化 */