识别数据
This commit is contained in:
parent
e936ffa471
commit
8bcc2c0f7b
|
|
@ -3,7 +3,16 @@ import request from '@/utils/request'
|
|||
// 设备管理->数据识别->查询数据识别列表
|
||||
export function dataRecognitionListAPI(params) {
|
||||
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',
|
||||
params
|
||||
})
|
||||
|
|
|
|||
|
|
@ -11,10 +11,9 @@ export const formLabel = [
|
|||
]
|
||||
|
||||
export const columnsList = [
|
||||
{ t_props: 'location', t_label: '识别地点' },
|
||||
{ t_props: 'recognitionTime', t_label: '识别时间' },
|
||||
{ t_props: 'licensePlate', t_label: '车牌号' },
|
||||
{ t_props: 'plateColor', t_label: '车牌颜色' },
|
||||
{ t_props: 'vehicleType', t_label: '车辆类型' },
|
||||
{ t_props: 'identificationLocation', t_label: '识别地点' },
|
||||
{ t_props: 'identificationTime', t_label: '识别时间' },
|
||||
{ t_props: 'carColor', t_label: '车牌颜色' },
|
||||
{ t_slot: 'carType', t_label: '车辆类型' },
|
||||
{ t_slot: 'recognitionPhoto', t_label: '识别照片', t_width: '120px' },
|
||||
]
|
||||
|
|
@ -31,10 +31,16 @@
|
|||
<!-- 数据列表 -->
|
||||
<div class="table-container">
|
||||
<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">
|
||||
<h3>数据列表</h3>
|
||||
</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 }">
|
||||
<el-image :src="data.recognitionPhoto || test_image" alt="识别照片" class="recognition-photo"
|
||||
fit="cover" :preview-src-list="previewImageList">
|
||||
|
|
@ -51,7 +57,7 @@
|
|||
<script>
|
||||
import TableModel from '@/components/TableModel2'
|
||||
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'
|
||||
|
||||
export default {
|
||||
|
|
@ -64,16 +70,15 @@ export default {
|
|||
showSearch: true,
|
||||
columnsList,
|
||||
dataRecognitionListAPI,
|
||||
wrappedAPI: null,
|
||||
test_image,
|
||||
timeRange: null,
|
||||
statistics: [
|
||||
{ label: '车辆总数(辆)', value: '20000' },
|
||||
{ label: '油车数量(辆)', value: '15000' },
|
||||
{ label: '新能源数量(辆)', value: '5000' },
|
||||
{ label: '总车流量(PCU/h)', value: '20000' },
|
||||
{ label: '油车车流量(PCU/h)', value: '15000' },
|
||||
{ label: '新能源车流量(PCU/h)', value: '5000' },
|
||||
{ label: '车辆总数(辆)', value: '0' },
|
||||
{ label: '油车数量(辆)', value: '0' },
|
||||
{ label: '新能源数量(辆)', value: '0' },
|
||||
{ label: '总车流量(PCU/h)', value: '0' },
|
||||
{ label: '油车车流量(PCU/h)', value: '0' },
|
||||
{ label: '新能源车流量(PCU/h)', value: '0' },
|
||||
],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
|
|
@ -97,106 +102,81 @@ export default {
|
|||
},
|
||||
|
||||
created() {
|
||||
// 包装API函数以支持测试数据
|
||||
this.wrappedAPI = this.wrapAPIWithTestData(dataRecognitionListAPI)
|
||||
// 初始化默认时间为当天的 0点0分 到 23点59分
|
||||
this.initDefaultTimeRange()
|
||||
// 获取统计数据
|
||||
this.getStatistics()
|
||||
},
|
||||
|
||||
methods: {
|
||||
/** 包装API函数，支持测试数据 */
|
||||
wrapAPIWithTestData(apiFunc) {
|
||||
return async (params) => {
|
||||
try {
|
||||
// 尝试调用真实API
|
||||
const res = await apiFunc(params)
|
||||
if (res.code === 200) {
|
||||
return res
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('API调用失败，使用测试数据:', error)
|
||||
}
|
||||
/** 初始化默认时间范围 */
|
||||
initDefaultTimeRange() {
|
||||
const now = new Date()
|
||||
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0)
|
||||
const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59)
|
||||
const formatTime = (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}`
|
||||
}
|
||||
const defaultTimeRange = [formatTime(todayStart), formatTime(todayEnd)]
|
||||
this.timeRange = defaultTimeRange
|
||||
this.queryParams.startTime = defaultTimeRange[0]
|
||||
this.queryParams.endTime = defaultTimeRange[1]
|
||||
},
|
||||
|
||||
// 使用测试数据
|
||||
const allTestData = this.getTestData()
|
||||
|
||||
// 应用过滤条件
|
||||
let filteredData = allTestData
|
||||
if (params.startTime) {
|
||||
filteredData = filteredData.filter(item => {
|
||||
const itemTime = new Date(item.recognitionTime.replace(/\//g, '-'))
|
||||
const startTime = new Date(params.startTime.replace(' ', 'T'))
|
||||
return itemTime >= startTime
|
||||
})
|
||||
/** 获取统计数据 */
|
||||
async getStatistics() {
|
||||
try {
|
||||
const params = {
|
||||
startTime: this.queryParams.startTime,
|
||||
endTime: this.queryParams.endTime,
|
||||
}
|
||||
if (params.endTime) {
|
||||
filteredData = filteredData.filter(item => {
|
||||
const itemTime = new Date(item.recognitionTime.replace(/\//g, '-'))
|
||||
const endTime = new Date(params.endTime.replace(' ', 'T'))
|
||||
return itemTime <= endTime
|
||||
})
|
||||
}
|
||||
|
||||
// 分页处理
|
||||
const pageNum = params.pageNum || 1
|
||||
const pageSize = params.pageSize || 10
|
||||
const start = (pageNum - 1) * pageSize
|
||||
const end = start + pageSize
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
rows: filteredData.slice(start, end),
|
||||
total: filteredData.length,
|
||||
msg: 'success'
|
||||
const res = await dataRecognitionDetailAPI(params)
|
||||
if (res.code === 200 && res.data) {
|
||||
// 将返回的数据映射到 statistics 数组
|
||||
const data = res.data
|
||||
this.statistics = [
|
||||
{
|
||||
label: '车辆总数(辆)',
|
||||
value: data.totalCarNum || '0'
|
||||
},
|
||||
{
|
||||
label: '油车数量(辆)',
|
||||
value: data.petrolVehiclesNum || '0'
|
||||
},
|
||||
{
|
||||
label: '新能源数量(辆)',
|
||||
value: data.newEnergyNum || '0'
|
||||
},
|
||||
{
|
||||
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() {
|
||||
// 更新统计数据
|
||||
this.getStatistics()
|
||||
if (this.$refs.dataRecognitionTableRef) {
|
||||
// 合并查询参数
|
||||
Object.assign(this.$refs.dataRecognitionTableRef.queryParams, this.queryParams)
|
||||
|
|
@ -207,9 +187,10 @@ export default {
|
|||
|
||||
/** 重置操作 */
|
||||
handleReset() {
|
||||
this.queryParams.startTime = ''
|
||||
this.queryParams.endTime = ''
|
||||
this.timeRange = null
|
||||
// 重置时恢复默认时间范围（当天的 0点0分 到 23点59分）
|
||||
this.initDefaultTimeRange()
|
||||
// 重置后重新获取统计数据
|
||||
this.getStatistics()
|
||||
if (this.$refs.dataRecognitionTableRef) {
|
||||
Object.assign(this.$refs.dataRecognitionTableRef.queryParams, this.queryParams)
|
||||
this.$refs.dataRecognitionTableRef.queryParams.pageNum = 1
|
||||
|
|
|
|||
Loading…
Reference in New Issue