zacfrontuser_v2/src/ui/CQCXG9P1C.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>