识别图片
This commit is contained in:
parent
63bf3719c7
commit
f146e49177
|
|
@ -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
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 = []
|
||||
|
|
|
|||
Loading…
Reference in New Issue