222 lines
8.8 KiB
Vue
222 lines
8.8 KiB
Vue
|
<template>
|
||
|
|
<div class="flex flex-col items-center card">
|
||
|
|
<div class="max-w-4xl w-full space-y-6">
|
||
|
|
|
||
|
|
<!-- 基本信息 -->
|
||
|
|
<div>
|
||
|
|
<LTitle title="基本信息" type="blue-green" class="mb-4"></LTitle>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 gap-4">
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">号牌种类:</span>
|
||
|
|
<span>{{ plateTypeMapping[data.plateType] }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">核定载客数:</span>
|
||
|
|
<span>{{ data.passengers }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">车牌号:</span>
|
||
|
|
<span>{{ data.plate }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">车架号:</span>
|
||
|
|
<span>{{ data.vin }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">使用性质:</span>
|
||
|
|
<span>{{ data.properties }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">车辆类型:</span>
|
||
|
|
<span>{{ data.vehicleType }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">品牌名称:</span>
|
||
|
|
<span>{{ data.brandName }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">车身颜色:</span>
|
||
|
|
<span>{{ filterDataNull(bodyColorMapping[data.bodyColor]) }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 一致性核验 -->
|
||
|
|
<div>
|
||
|
|
<LTitle title="一致性核验" type="blue-green" class="mb-4"></LTitle>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 gap-4">
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">车牌种类一致性:</span>
|
||
|
|
<span>{{ data.carType }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">车牌号一致性:</span>
|
||
|
|
<span>{{ data.carNumber }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">姓名一致性:</span>
|
||
|
|
<span>{{ data.name }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 发动机信息 -->
|
||
|
|
<div>
|
||
|
|
<LTitle title="发动机信息" type="blue-green" class="mb-4"></LTitle>
|
||
|
|
<div class="grid grid-cols-1 gap-4">
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">发动机型号:</span>
|
||
|
|
<span>{{ data.engineModel }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">发动机号:</span>
|
||
|
|
<span>{{ data.engineNumber }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">排量:</span>
|
||
|
|
<span>{{ data.cc }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">燃料种类:</span>
|
||
|
|
<span>{{ data.fuelType }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 车辆状态 -->
|
||
|
|
<div>
|
||
|
|
<LTitle title="车辆状态" type="blue-green" class="mb-4"></LTitle>
|
||
|
|
<div class="grid grid-cols-1 gap-4">
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">机动车状态:</span>
|
||
|
|
<span>{{ data.vehicleStatus }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">强制报废期止:</span>
|
||
|
|
<span>{{ filterDataNull(data.retirementDate) }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">检验有效期止:</span>
|
||
|
|
<span>{{ filterDataNull(data.validityDayEnd) }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">初次登记日期:</span>
|
||
|
|
<span>{{ filterDataNull(data.firstIssueDate) }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">年检日期:</span>
|
||
|
|
<span>{{ filterDataNull(data.jianCheTime) }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 尺寸及重量 -->
|
||
|
|
<div>
|
||
|
|
<LTitle title="车辆尺寸及重量" type="blue-green" class="mb-4"></LTitle>
|
||
|
|
<div class="grid grid-cols-1 gap-4">
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">总质量:</span>
|
||
|
|
<span>{{ filterDataNull(data.crossWeight) }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">整备质量:</span>
|
||
|
|
<span>{{ filterDataNull(data.curbWeight) }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">轴数:</span>
|
||
|
|
<span>{{ filterDataNull(data.shaft) }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">轴距:</span>
|
||
|
|
<span>{{ filterDataNull(data.wheelBase) }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">前轮距:</span>
|
||
|
|
<span>{{ filterDataNull(data.frontTread) }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="font-medium text-gray-800">后轮距:</span>
|
||
|
|
<span>{{ filterDataNull(data.rearTread) }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
params: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
// 号牌种类映射
|
||
|
|
const plateTypeMapping = {
|
||
|
|
"02": "小型汽车",
|
||
|
|
"01": "大型汽车",
|
||
|
|
"03": "使馆汽车",
|
||
|
|
"04": "领馆汽车",
|
||
|
|
"05": "境外汽车",
|
||
|
|
"06": "外籍汽车",
|
||
|
|
"07": "普通摩托车",
|
||
|
|
"08": "轻便摩托车",
|
||
|
|
"09": "使馆摩托车",
|
||
|
|
"10": "领馆摩托车",
|
||
|
|
"11": "境外摩托车",
|
||
|
|
"12": "外籍摩托车",
|
||
|
|
"13": "低速车",
|
||
|
|
"14": "拖拉机",
|
||
|
|
"15": "挂车",
|
||
|
|
"16": "教练汽车",
|
||
|
|
"17": "教练摩托车",
|
||
|
|
"20": "临时入境汽车",
|
||
|
|
"21": "临时入境摩托车",
|
||
|
|
"22": "临时行驶车",
|
||
|
|
"23": "警用汽车",
|
||
|
|
"24": "警用摩托",
|
||
|
|
"51": "新能源大型汽车",
|
||
|
|
"52": "新能源小型汽车"
|
||
|
|
};
|
||
|
|
|
||
|
|
// 车身颜色映射
|
||
|
|
const bodyColorMapping = {
|
||
|
|
"A": "白",
|
||
|
|
"B": "灰",
|
||
|
|
"C": "黄",
|
||
|
|
"D": "粉",
|
||
|
|
"E": "红",
|
||
|
|
"F": "紫",
|
||
|
|
"G": "绿",
|
||
|
|
"H": "蓝",
|
||
|
|
"I": "棕",
|
||
|
|
"J": "黑",
|
||
|
|
"K": "香槟",
|
||
|
|
"L": "银",
|
||
|
|
"M": "橙",
|
||
|
|
"N": "金",
|
||
|
|
"Z": "其他"
|
||
|
|
};
|
||
|
|
|
||
|
|
// 对请求参数中的姓名进行脱敏
|
||
|
|
const maskValue = (value, type) => {
|
||
|
|
if (type === "name") {
|
||
|
|
return value.length > 1 ? value[0] + "*".repeat(value.length - 1) : "*";
|
||
|
|
} else if (type === "car_license") {
|
||
|
|
return value.slice(0, 2) + "*".repeat(value.length - 2) + value.slice(-2);
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
};
|
||
|
|
const filterDataNull = (data) => {
|
||
|
|
return data ? data : '-'
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|