bonus
/
smart-car-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

识别数据

This commit is contained in:
cwchen 2025-12-23 18:15:23 +08:00
parent e936ffa471
commit 8bcc2c0f7b
3 changed files with 95 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/device/data-recognition.js
View File

@ -3,7 +3,16 @@ import request from '@/utils/request'
// 设备管理->数据识别->查询数据识别列表 // 设备管理->数据识别->查询数据识别列表
export function dataRecognitionListAPI(params) { export function dataRecognitionListAPI(params) {
return request({ return request({
url: '/smartCar/device/dataRecognition/getDataRecognitionList', url: '/smartCar/data/deviceIdentification/getDeviceIdentificationByDataList',
method: 'GET',
params
})
}
// 设备管理->数据识别->查询数据识别详情
export function dataRecognitionDetailAPI(params) {
return request({
url: '/smartCar/data/deviceIdentification/getDeviceIdentificationByDataDetail',
method: 'GET', method: 'GET',
params params
}) })

9
src/views/device/data-recognition/config.js
View File

@ -11,10 +11,9 @@ export const formLabel = [
] ]
export const columnsList = [ export const columnsList = [
{ t_props: 'location', t_label: '识别地点' }, { t_props: 'identificationLocation', t_label: '识别地点' },
{ t_props: 'recognitionTime', t_label: '识别时间' }, { t_props: 'identificationTime', t_label: '识别时间' },
{ t_props: 'licensePlate', t_label: '车牌号' }, { t_props: 'carColor', t_label: '车牌颜色' },
{ t_props: 'plateColor', t_label: '车牌颜色' }, { t_slot: 'carType', t_label: '车辆类型' },
{ t_props: 'vehicleType', t_label: '车辆类型' },
{ t_slot: 'recognitionPhoto', t_label: '识别照片', t_width: '120px' }, { t_slot: 'recognitionPhoto', t_label: '识别照片', t_width: '120px' },
] ]

181
src/views/device/data-recognition/index.vue
View File

@ -31,10 +31,16 @@
<!-- 数据列表 --> <!-- 数据列表 -->
<div class="table-container"> <div class="table-container">
<TableModel :formLabel="[]" :showOperation="false" :showRightTools="false" ref="dataRecognitionTableRef" <TableModel :formLabel="[]" :showOperation="false" :showRightTools="false" ref="dataRecognitionTableRef"
:columnsList="columnsList" :request-api="wrappedAPI" :handleColWidth="250" :showSearch="false"> :columnsList="columnsList" :request-api="dataRecognitionListAPI" :handleColWidth="250"
:showSearch="false">
<template slot="tableTitle"> <template slot="tableTitle">
<h3>数据列表</h3> <h3>数据列表</h3>
</template> </template>
<template slot="carType" slot-scope="{ data }">
<el-tag v-if="data.carType === '1'" type="success">油车</el-tag>
<el-tag v-else-if="data.carType === '2'" type="warning">新能源</el-tag>
<el-tag v-else type="info">其他</el-tag>
</template>
<template slot="recognitionPhoto" slot-scope="{ data }"> <template slot="recognitionPhoto" slot-scope="{ data }">
<el-image :src="data.recognitionPhoto || test_image" alt="识别照片" class="recognition-photo" <el-image :src="data.recognitionPhoto || test_image" alt="识别照片" class="recognition-photo"
fit="cover" :preview-src-list="previewImageList"> fit="cover" :preview-src-list="previewImageList">
@ -51,7 +57,7 @@
<script> <script>
import TableModel from '@/components/TableModel2' import TableModel from '@/components/TableModel2'
import { columnsList } from './config' import { columnsList } from './config'
import { dataRecognitionListAPI, exportDataRecognitionAPI } from '@/api/device/data-recognition' import { dataRecognitionListAPI, dataRecognitionDetailAPI, exportDataRecognitionAPI } from '@/api/device/data-recognition'
import test_image from '@/assets/images/test_image.png' import test_image from '@/assets/images/test_image.png'
export default { export default {
@ -64,16 +70,15 @@ export default {
showSearch: true, showSearch: true,
columnsList, columnsList,
dataRecognitionListAPI, dataRecognitionListAPI,
wrappedAPI: null,
test_image, test_image,
timeRange: null, timeRange: null,
statistics: [ statistics: [
{ label: '车辆总数(辆)', value: '20000' }, { label: '车辆总数(辆)', value: '0' },
{ label: '油车数量(辆)', value: '15000' }, { label: '油车数量(辆)', value: '0' },
{ label: '新能源数量(辆)', value: '5000' }, { label: '新能源数量(辆)', value: '0' },
{ label: '总车流量(PCU/h)', value: '20000' }, { label: '总车流量(PCU/h)', value: '0' },
{ label: '油车车流量(PCU/h)', value: '15000' }, { label: '油车车流量(PCU/h)', value: '0' },
{ label: '新能源车流量(PCU/h)', value: '5000' }, { label: '新能源车流量(PCU/h)', value: '0' },
], ],
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
@ -97,106 +102,81 @@ export default {
}, },
created() { created() {
// 包装API函数以支持测试数据 // 初始化默认时间为当天的 0点0分 到 23点59分
this.wrappedAPI = this.wrapAPIWithTestData(dataRecognitionListAPI) this.initDefaultTimeRange()
// 获取统计数据
this.getStatistics()
}, },
methods: { methods: {
/** 包装API函数，支持测试数据 */ /** 初始化默认时间范围 */
wrapAPIWithTestData(apiFunc) { initDefaultTimeRange() {
return async (params) => { const now = new Date()
try { const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0)
// 尝试调用真实API const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59)
const res = await apiFunc(params) const formatTime = (date) => {
if (res.code === 200) { const year = date.getFullYear()
return res const month = String(date.getMonth() + 1).padStart(2, '0')
} const day = String(date.getDate()).padStart(2, '0')
} catch (error) { const hours = String(date.getHours()).padStart(2, '0')
console.log('API调用失败，使用测试数据:', error) const minutes = String(date.getMinutes()).padStart(2, '0')
} return `${year}-${month}-${day} ${hours}:${minutes}`
}
const defaultTimeRange = [formatTime(todayStart), formatTime(todayEnd)]
this.timeRange = defaultTimeRange
this.queryParams.startTime = defaultTimeRange[0]
this.queryParams.endTime = defaultTimeRange[1]
},
// 使用测试数据 /** 获取统计数据 */
const allTestData = this.getTestData() async getStatistics() {
try {
// 应用过滤条件 const params = {
let filteredData = allTestData startTime: this.queryParams.startTime,
if (params.startTime) { endTime: this.queryParams.endTime,
filteredData = filteredData.filter(item => {
const itemTime = new Date(item.recognitionTime.replace(/\//g, '-'))
const startTime = new Date(params.startTime.replace(' ', 'T'))
return itemTime >= startTime
})
} }
if (params.endTime) { const res = await dataRecognitionDetailAPI(params)
filteredData = filteredData.filter(item => { if (res.code === 200 && res.data) {
const itemTime = new Date(item.recognitionTime.replace(/\//g, '-')) // 将返回的数据映射到 statistics 数组
const endTime = new Date(params.endTime.replace(' ', 'T')) const data = res.data
return itemTime <= endTime this.statistics = [
}) {
} label: '车辆总数(辆)',
value: data.totalCarNum || '0'
// 分页处理 },
const pageNum = params.pageNum || 1 {
const pageSize = params.pageSize || 10 label: '油车数量(辆)',
const start = (pageNum - 1) * pageSize value: data.petrolVehiclesNum || '0'
const end = start + pageSize },
{
return { label: '新能源数量(辆)',
code: 200, value: data.newEnergyNum || '0'
rows: filteredData.slice(start, end), },
total: filteredData.length, {
msg: 'success' label: '总车流量(PCU/h)',
value: data.totalPCU || '0'
},
{
label: '油车车流量(PCU/h)',
value: data.petrolVehiclesPCU || '0'
},
{
label: '新能源车流量(PCU/h)',
value: data.newEnergyPCU || '0'
},
]
} }
} catch (error) {
console.error('获取统计数据失败:', error)
// 如果接口调用失败，保持默认值
} }
}, },
/** 获取测试数据 */
getTestData() {
const plateColors = ['蓝色', '黄色', '绿色', '白色']
const vehicleTypes = ['油车', '新能源']
const locations = ['合肥市蜀山区xxxxxx', '合肥市包河区xxxxxx', '合肥市庐阳区xxxxxx']
const testData = []
// 生成1000条测试数据
for (let i = 0; i < 1000; i++) {
const date = new Date()
date.setDate(date.getDate() - Math.floor(i / 50))
date.setHours(8 + (i % 12), (i % 60), 0, 0)
const recognitionTime = this.formatDateTime(date)
// 生成车牌号（皖A + 字母数字组合）
const letters = 'ABCDEFGHJKLMNPQRSTUVWXYZ'
const numbers = '0123456789'
const plateLetter = letters[Math.floor(Math.random() * letters.length)]
const plateNumbers = Array.from({ length: 4 }, () => numbers[Math.floor(Math.random() * numbers.length)]).join('')
const licensePlate = `皖A${plateLetter}${plateNumbers}`
testData.push({
serialNo: i + 1,
location: locations[i % locations.length],
recognitionTime: recognitionTime,
licensePlate: licensePlate,
plateColor: plateColors[i % plateColors.length],
vehicleType: vehicleTypes[i % vehicleTypes.length],
recognitionPhoto: this.test_image,
})
}
return testData
},
/** 格式化日期时间 */
formatDateTime(date) {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
return `${year}/${month}/${day} ${hours}:${minutes}`
},
/** 查询操作 */ /** 查询操作 */
handleQuery() { handleQuery() {
// 更新统计数据
this.getStatistics()
if (this.$refs.dataRecognitionTableRef) { if (this.$refs.dataRecognitionTableRef) {
// 合并查询参数 // 合并查询参数
Object.assign(this.$refs.dataRecognitionTableRef.queryParams, this.queryParams) Object.assign(this.$refs.dataRecognitionTableRef.queryParams, this.queryParams)
@ -207,9 +187,10 @@ export default {
/** 重置操作 */ /** 重置操作 */
handleReset() { handleReset() {
this.queryParams.startTime = '' // 重置时恢复默认时间范围（当天的 0点0分 到 23点59分）
this.queryParams.endTime = '' this.initDefaultTimeRange()
this.timeRange = null // 重置后重新获取统计数据
this.getStatistics()
if (this.$refs.dataRecognitionTableRef) { if (this.$refs.dataRecognitionTableRef) {
Object.assign(this.$refs.dataRecognitionTableRef.queryParams, this.queryParams) Object.assign(this.$refs.dataRecognitionTableRef.queryParams, this.queryParams)
this.$refs.dataRecognitionTableRef.queryParams.pageNum = 1 this.$refs.dataRecognitionTableRef.queryParams.pageNum = 1