当前位置：首页 > news >正文

前端违规页面车主信息优化说明

news 2025/9/21 10:01:16

📋 概述

根据后端接口的优化，前端违规页面现在支持区分三种车主类型：

本地车主 (ownerType: 'local') - 在违规记录中只有 owner_id

月票车主 (ownerType: 'monthly') - 在违规记录中只有 month_ticket_id

预约车辆 (ownerType: 'unknown') - 在违规记录中既没有 owner_id 也没有 month_ticket_id

🔧 修改内容

1. 接口数据结构适配

后端响应示例

{"severity": "moderate","ownerType": "monthly","isNewEnergy": 0,"ownerPhone": "13904656840","parkName": "四季上东","description": "车牌被遮挡，无法正常识别","remark": "车牌被遮挡，无法正常识别","plateNumber": "黑AFB2588","photos": "[\"http://tmp/55l6JaQMnDYB21f2425524048d53aa71cdbebf23edee.png\"]","createdAt": 1755330566000,"monthTicketName": "四季上东二期","violationType": "遮挡车牌","appointmentTime": "2025-08-16 07:49:26","ownerName": "王嘉诚15-3-3901","statusText": "待处理","monthTicketStatus": 1,"location": "测试位置","id": 23,"ownerAddress": "四季上东停车场月票车主","status": "pending"
}

前端数据映射

// 在 loadRealtimeViolations 方法中
this.realtimeRecords = records.map(item => ({id: item.id,plateNumber: item.plateNumber || item.plate_number,violationType: item.violationType || item.violation_type,// ... 基础字段 ...// 新增：车主类型相关信息ownerType: item.ownerType || 'unknown',// 月票车主专属信息monthTicketName: item.monthTicketName || '',parkName: item.parkName || '',monthTicketStatus: item.monthTicketStatus || 0,// 本地车主专属信息community: item.community || '',creditScore: item.creditScore || null,// ... 其他字段 ...
}));

2. 界面显示优化

车主类型标识

本地车主: 🏠 绿色标签，显示 "本地车主"

月票车主: 🎫 蓝色标签，显示 "月票车主"

预约车辆: 🚗 橙色标签，显示 "预约车辆"

车主信息显示逻辑

// 获取车主地址文本
getOwnerAddressText(car) {if (car.ownerType === 'monthly') {return car.parkName ? `${car.parkName}月票车主` : '未知车场';} else if (car.ownerType === 'local') {return car.address || '未知地址';} else {return '预约访客车辆';}
}

3. 专属信息显示

月票车主专属信息

月票名称

车场名称

月票状态（有效/无效）

<view v-if="car.ownerType === 'monthly'" class="monthly-info"><view class="info-row"><view class="info-item"><text class="label">月票名称</text><text class="value">{{ car.monthTicketName || '未知' }}</text></view><view class="info-item"><text class="label">车场名称</text><text class="value">{{ car.parkName || '未知' }}</text></view></view><view class="info-row"><view class="info-item"><text class="label">月票状态</text><view class="status-indicator" :class="car.monthTicketStatus === 1 ? 'active' : 'inactive'"><text class="status-text">{{ car.monthTicketStatus === 1 ? '有效' : '无效' }}</text></view></view></view></view>

本地车主专属信息

小区名称

信用分数

<view v-if="car.ownerType === 'local'" class="local-owner-info"><view class="info-row"><view class="info-item" v-if="car.community"><text class="label">小区</text><text class="value">{{ car.community }}</text></view><view class="info-item" v-if="car.creditScore"><text class="label">信用分数</text><text class="value score" :class="getCreditScoreClass(car.creditScore)">{{ car.creditScore }}</text></view></view></view>

预约车辆信息

显示提示文本：该车辆为预约访客车辆或无车主信息

<view v-if="car.ownerType === 'unknown' || !car.ownerType" class="visitor-info"><view class="info-row"><text class="visitor-tip">该车辆为预约访客车辆或无车主信息</text></view></view>

4. 样式设计

车主类型标签样式

.type-tag.type-local {background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);color: white;
}.type-tag.type-monthly {background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);color: white;
}.type-tag.type-visitor {background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);color: white;
}

信用分数颜色区分

.score.score-excellent { background: #4CAF50; } /* 90+ 优秀 */
.score.score-good { background: #8BC34A; }      /* 80-89 良好 */
.score.score-normal { background: #FF9800; }    /* 70-79 一般 */
.score.score-poor { background: #F44336; }      /* <70 较差 */

月票状态指示器

.status-indicator.active {background: #4CAF50;color: white;
}.status-indicator.inactive {background: #F44336;color: white;
}

5. 新增的工具方法

// 获取车主类型样式类
getOwnerTypeClass(ownerType) {switch(ownerType) {case 'local': return 'type-local';case 'monthly': return 'type-monthly';case 'unknown':default: return 'type-visitor';}
}// 获取车主类型图标
getOwnerTypeIcon(ownerType) {switch(ownerType) {case 'local': return '🏠';case 'monthly': return '🎫';case 'unknown':default: return '🚗';}
}// 获取车主类型文本
getOwnerTypeText(ownerType) {switch(ownerType) {case 'local': return '本地车主';case 'monthly': return '月票车主';case 'unknown':default: return '预约车辆';}
}// 获取信用分数样式类
getCreditScoreClass(score) {if (score >= 90) return 'score-excellent';if (score >= 80) return 'score-good';if (score >= 70) return 'score-normal';return 'score-poor';
}