130 lines
4.4 KiB
Vue
130 lines
4.4 KiB
Vue
<template>
|
||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||
<!-- 车辆总数统计 -->
|
||
<div class="flex justify-between items-center mb-6 pb-4 border-b border-gray-100">
|
||
<div class="flex items-center gap-3">
|
||
<div>
|
||
<div class="text-lg font-semibold text-gray-900">个人名下车辆</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-blue-50 text-blue-700 px-4 py-2 rounded-full text-sm font-medium">
|
||
共 {{ vehicleCount }} 辆
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 车辆列表 -->
|
||
<div class="space-y-3" v-if="vehicleList && vehicleList.length > 0">
|
||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200 hover:bg-blue-50 hover:border-blue-200 transition-colors duration-200"
|
||
v-for="(vehicle, index) in vehicleList" :key="index">
|
||
<div class="space-y-3">
|
||
<div class="text-xl font-bold text-gray-900 font-mono tracking-wider">
|
||
{{ vehicle.plateNum }}
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="inline-flex items-center gap-1 px-3 py-1 rounded text-sm font-medium text-white"
|
||
:class="getPlateColorClass(vehicle.plateColor)">
|
||
<span>🏷️</span>
|
||
<span>{{ getPlateColorText(vehicle.plateColor) }}</span>
|
||
</div>
|
||
<div class="text-sm text-gray-600">
|
||
<span class="text-gray-500">车辆类型:</span>
|
||
<span class="font-medium text-gray-900 ml-1">{{ getVehicleTypeText(vehicle.vehicleType)
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 无数据状态 -->
|
||
<div class="text-center py-12 text-gray-500" v-else>
|
||
<div class="text-4xl mb-3">🚫</div>
|
||
<div class="text-lg font-medium mb-1">暂无车辆信息</div>
|
||
<div class="text-sm">No vehicle records found</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps, computed } from 'vue';
|
||
|
||
// 接收父组件传入的 props
|
||
const props = defineProps({
|
||
data: Object,
|
||
params: Object,
|
||
});
|
||
|
||
// 车牌颜色映射
|
||
const plateColorMap = {
|
||
0: '蓝色 - 普通燃油车',
|
||
1: '黄色 - 大型车/货车',
|
||
2: '黑色 - 外籍车辆/港澳台车',
|
||
3: '白色 - 警车/军车/武警车',
|
||
4: '渐变绿色 - 新能源汽车',
|
||
5: '黄绿双拼色 - 大型新能源汽车',
|
||
6: '蓝白渐变色 - 临时牌照',
|
||
7: '临时牌照 - 临时行驶车辆',
|
||
11: '绿色 - 新能源汽车',
|
||
12: '红色 - 教练车/试验车'
|
||
};
|
||
|
||
// 车辆类型映射
|
||
const vehicleTypeMap = {
|
||
1: '一型客车',
|
||
2: '二型客车',
|
||
3: '三型客车',
|
||
4: '四型客车',
|
||
11: '一型货车',
|
||
12: '二型货车',
|
||
13: '三型货车',
|
||
14: '四型货车',
|
||
15: '五型货车',
|
||
16: '六型货车',
|
||
21: '一型专项作业车',
|
||
22: '二型专项作业车',
|
||
23: '三型专项作业车',
|
||
24: '四型专项作业车',
|
||
25: '五型专项作业车',
|
||
26: '六型专项作业车'
|
||
};
|
||
|
||
// 计算属性
|
||
const vehicleList = computed(() => props.data?.list || []);
|
||
const vehicleCount = computed(() => props.data?.vehicleCount || 0);
|
||
|
||
// 获取车牌颜色文本
|
||
const getPlateColorText = (plateColor) => {
|
||
return plateColorMap[plateColor] || '未知颜色 - 未知类型';
|
||
};
|
||
|
||
// 获取车牌颜色样式类
|
||
const getPlateColorClass = (plateColor) => {
|
||
const colorClassMap = {
|
||
0: 'bg-blue-500',
|
||
1: 'bg-yellow-500',
|
||
2: 'bg-gray-800',
|
||
3: 'bg-gray-200 text-gray-800',
|
||
4: 'bg-green-500',
|
||
5: 'bg-gradient-to-r from-yellow-500 to-green-500',
|
||
6: 'bg-gradient-to-r from-blue-500 to-white text-blue-800',
|
||
7: 'bg-red-500',
|
||
11: 'bg-green-500',
|
||
12: 'bg-red-500'
|
||
};
|
||
return colorClassMap[plateColor] || 'bg-gray-500';
|
||
};
|
||
|
||
// 获取车辆类型文本
|
||
const getVehicleTypeText = (vehicleType) => {
|
||
return vehicleTypeMap[vehicleType] || '未知类型';
|
||
};
|
||
|
||
onMounted(() => {
|
||
console.log('车辆数据:', props.data);
|
||
});
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 自定义样式 - 仅保留必要的样式 */
|
||
</style> |