From f146e491778d49936b8108b980ec32bb1fc7417a Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Tue, 23 Dec 2025 17:11:40 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=86=E5=88=AB=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/image-recognition.js          |   2 +-
 src/views/device/image-recognition/index.vue | 177 ++++++++-----------
 2 files changed, 71 insertions(+), 108 deletions(-)

diff --git a/src/api/device/image-recognition.js b/src/api/device/image-recognition.js
index 20f3730..b6b21cd 100644
--- a/src/api/device/image-recognition.js
+++ b/src/api/device/image-recognition.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 设备管理->图像识别->查询图像识别列表
 export function imageRecognitionListAPI(params) {
     return request({
-        url: '/smartCar/device/imageRecognition/getImageRecognitionList',
+        url: '/smartCar/data/deviceIdentification/getDeviceIdentificationList',
         method: 'GET',
         params
     })
diff --git a/src/views/device/image-recognition/index.vue b/src/views/device/image-recognition/index.vue
index 509e2c0..88a1198 100644
--- a/src/views/device/image-recognition/index.vue
+++ b/src/views/device/image-recognition/index.vue
@@ -5,13 +5,13 @@
         <el-card v-show="showSearch" class="search-card">
             <el-form :inline="true" ref="queryFormRef" :model="queryParams" label-width="auto">
                 <el-form-item>
-                    <el-select clearable filterable v-model="queryParams.vehicleType" placeholder="选择选项"
+                    <el-select clearable filterable v-model="queryParams.carType" placeholder="选择车辆类型"
                         style="width: 250px">
-                        <el-option v-for="item in vehicleTypeOptions" :key="item.value" :label="item.label"
+                        <el-option v-for="item in dict.type.car_type" :key="item.value" :label="item.label"
                             :value="item.value" />
                     </el-select>
                 </el-form-item>
-                <el-form-item >
+                <el-form-item>
                     <el-date-picker v-model="timeRange" type="datetimerange" range-separator=" ~ "
                         start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm"
                         format="yyyy-MM-dd HH:mm" style="width: 400px" @change="handleTimeRangeChange" />
@@ -34,7 +34,7 @@
             <div class="image-grid-container" v-loading="loading">
                 <div v-for="(item, index) in imageList" :key="index" class="image-card">
                     <div class="image-wrapper">
-                        <el-image :src="item.imageUrl || getDefaultImage()" fit="cover" class="detection-image"
+                        <el-image :src="item.imageUrl || test_image" fit="cover" class="detection-image"
                             :preview-src-list="previewImageList">
                             <div slot="error" class="image-error">
                                 <i class="el-icon-picture"></i>
@@ -47,20 +47,6 @@
                                 {{ formatOverlayText(item) }}
                             </div>
                         </div>
-                        <!-- 检测框（如果有坐标数据） -->
-                        <div v-if="item.boxes && item.boxes.length > 0" class="detection-boxes">
-                            <div v-for="(box, boxIndex) in item.boxes" :key="boxIndex" class="detection-box" :style="{
-                                left: (box.xPercent || box.x) + '%',
-                                top: (box.yPercent || box.y) + '%',
-                                width: (box.widthPercent || box.width) + '%',
-                                height: (box.heightPercent || box.height) + '%'
-                            }">
-                                <div class="box-corner corner-tl"></div>
-                                <div class="box-corner corner-tr"></div>
-                                <div class="box-corner corner-bl"></div>
-                                <div class="box-corner corner-br"></div>
-                            </div>
-                        </div>
                     </div>
                 </div>
                 <div v-if="imageList.length === 0 && !loading" class="empty-state">
@@ -80,9 +66,11 @@
 
 <script>
 import { imageRecognitionListAPI, exportImageRecognitionAPI } from '@/api/device/image-recognition'
+import { isExternal } from '@/utils/validate'
 import test_image from '@/assets/images/test_image.png'
 export default {
     name: 'ImageRecognition',
+    dicts: ['car_type'],
     data() {
         return {
             showSearch: true,
@@ -91,16 +79,10 @@ export default {
             total: 0,
             timeRange: null,
             test_image,
-            vehicleTypeOptions: [
-                { label: '油车', value: '油车' },
-                { label: '货车', value: '货车' },
-                { label: '客车', value: '客车' },
-                { label: '小车', value: '小车' },
-            ],
             queryParams: {
                 pageNum: 1,
                 pageSize: 10,
-                vehicleType: '',
+                carType: '',
                 startTime: '',
                 endTime: '',
             },
@@ -118,38 +100,37 @@ export default {
     },
 
     methods: {
-        /** 获取测试数据 */
-        getTestData() {
-            const vehicleTypes = ['油车', '货车', '客车', '小车']
-            const locations = ['绕城高速', '京沪高速', '沪杭高速', '杭甬高速', '沈海高速']
-            const testData = []
-
-            // 生成20条测试数据
-            for (let i = 0; i < 20; i++) {
-                const vehicleType = vehicleTypes[i % vehicleTypes.length]
-                const location = locations[i % locations.length]
-                const date = new Date()
-                date.setDate(date.getDate() - Math.floor(i / 4))
-                date.setHours(8 + (i % 12), 30 + (i % 30), 0, 0)
-                const detectTime = this.formatDateTime(date)
-
-                testData.push({
-                    id: i + 1,
-                    imageUrl: this.test_image,
-                    location: location,
-                    detectTime: detectTime,
-                    vehicleType: vehicleType,
-                    // 添加检测框数据（部分数据有检测框，使用百分比定位）
-                    boxes: i % 3 === 0 ? [{
-                        xPercent: 20 + (i % 3) * 5,
-                        yPercent: 30 + (i % 2) * 10,
-                        widthPercent: 30 + (i % 5) * 2,
-                        heightPercent: 25 + (i % 4) * 3
-                    }] : []
-                })
+        /** 格式化日期时间字符串（从接口返回的格式转换） */
+        formatDateTimeFromString(dateStr) {
+            if (!dateStr) return ''
+            // 如果已经是格式化的字符串，直接返回
+            if (typeof dateStr === 'string' && dateStr.includes('-')) {
+                // 如果是 yyyy-MM-dd HH:mm:ss 格式，转换为 yyyy-MM-dd HH:mm
+                return dateStr.substring(0, 16)
             }
+            // 如果是 Date 对象，格式化
+            const date = new Date(dateStr)
+            return this.formatDateTime(date)
+        },
 
-            return testData
+        /** 获取车辆类型标签 */
+        getVehicleTypeLabel(carType) {
+            if (!carType) return ''
+            const typeMap = {
+                '1': '油车',
+                '2': '电车'
+            }
+            return typeMap[carType] || carType
+        },
+
+        /** 获取车牌颜色标签 */
+        getCarColorLabel(carColor) {
+            if (!carColor) return ''
+            const colorMap = {
+                '1': '蓝色',
+                '2': '绿色'
+            }
+            return colorMap[carColor] || carColor
         },
 
         /** 格式化日期时间 */
@@ -168,55 +149,43 @@ export default {
                 this.loading = true
                 const params = { ...this.queryParams }
 
-                // 尝试调用API，如果失败则使用测试数据
-                try {
-                    const res = await imageRecognitionListAPI(params)
-                    if (res.code === 200) {
-                        this.imageList = res.rows || []
-                        this.total = res.total || 0
-                        return
-                    }
-                } catch (apiError) {
-                    console.log('API调用失败，使用测试数据:', apiError)
-                }
-
-                // 使用测试数据
-                const allTestData = this.getTestData()
-
-                // 应用过滤条件
-                let filteredData = allTestData
-                if (this.queryParams.vehicleType) {
-                    filteredData = filteredData.filter(item => item.vehicleType === this.queryParams.vehicleType)
-                }
-                if (this.queryParams.startTime) {
-                    filteredData = filteredData.filter(item => {
-                        const itemTime = new Date(item.detectTime.replace(' ', 'T'))
-                        const startTime = new Date(this.queryParams.startTime.replace(' ', 'T'))
-                        return itemTime >= startTime
+                const res = await imageRecognitionListAPI(params)
+                if (res.code === 200) {
+                    // 映射接口返回的数据到前端使用的格式
+                    const list = (res.rows || []).map(item => {
+                        // 处理图片路径，默认使用 test_image
+                        let imageUrl = this.test_image
+                        if (item.filePath) {
+                            if (isExternal(item.filePath)) {
+                                imageUrl = item.filePath
+                            } else {
+                                imageUrl = process.env.VUE_APP_BASE_API + item.filePath
+                            }
+                        }
+                        
+                        return {
+                            id: item.identificationDataId,
+                            imageUrl: imageUrl,
+                            location: item.identificationLocation || '',
+                            detectTime: item.identificationTime ? this.formatDateTimeFromString(item.identificationTime) : '',
+                            vehicleType: this.getVehicleTypeLabel(item.carType),
+                            carColor: this.getCarColorLabel(item.carColor),
+                            // 保留原始数据
+                            originalData: item
+                        }
                     })
+                    this.imageList = list
+                    this.total = res.total || 0
+                } else {
+                    this.$message.error(res.msg || '获取数据失败')
+                    this.imageList = []
+                    this.total = 0
                 }
-                if (this.queryParams.endTime) {
-                    filteredData = filteredData.filter(item => {
-                        const itemTime = new Date(item.detectTime.replace(' ', 'T'))
-                        const endTime = new Date(this.queryParams.endTime.replace(' ', 'T'))
-                        return itemTime <= endTime
-                    })
-                }
-
-                // 分页处理
-                const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
-                const end = start + this.queryParams.pageSize
-                this.imageList = filteredData.slice(start, end)
-                this.total = filteredData.length
-
             } catch (error) {
                 console.error('获取图像列表失败:', error)
-                // 如果出错，也使用测试数据
-                const allTestData = this.getTestData()
-                const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
-                const end = start + this.queryParams.pageSize
-                this.imageList = allTestData.slice(start, end)
-                this.total = allTestData.length
+                this.$message.error('获取数据失败，请稍后重试')
+                this.imageList = []
+                this.total = 0
             } finally {
                 this.loading = false
             }
@@ -230,7 +199,7 @@ export default {
 
         /** 重置操作 */
         handleReset() {
-            this.queryParams.vehicleType = ''
+            this.queryParams.carType = ''
             this.queryParams.startTime = ''
             this.queryParams.endTime = ''
             this.timeRange = null
@@ -282,12 +251,6 @@ export default {
             this.queryParams.pageSize = limit
             this.getImageList()
         },
-
-        /** 获取默认图片 */
-        getDefaultImage() {
-            return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2Y1ZjVmNSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7lm77niYfliqDovb3lpLHotKU8L3RleHQ+PC9zdmc+'
-        },
-
         /** 格式化覆盖文本 */
         formatOverlayText(item) {
             const parts = []