a

src/ui/CQCXG9P1C.vue

@@ -0,0 +1,130 @@
+<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>