集成百度鹰眼服务AK
This commit is contained in:
xuqiuyun
@@ -80,183 +80,187 @@
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<div class="title">装车信息</div>
|
||||
<el-descriptions :column="4">
|
||||
<!-- 重量信息 -->
|
||||
<el-descriptions-item label="空车过磅重量:">{{
|
||||
data.baseInfo.emptyWeight ? data.baseInfo.emptyWeight + 'kg' : ''
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="装车过磅重量:">{{
|
||||
data.baseInfo.entruckWeight ? data.baseInfo.entruckWeight + 'kg' : ''
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="落地过磅重量:">{{
|
||||
data.baseInfo.landingEntruckWeight ? data.baseInfo.landingEntruckWeight + 'kg' : ''
|
||||
}}</el-descriptions-item>
|
||||
|
||||
<!-- 照片上传区域 -->
|
||||
<el-descriptions-item label="检疫票:">
|
||||
<span style="vertical-align: top">
|
||||
<el-image
|
||||
v-if="data.baseInfo.quarantineTickeyUrl"
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="data.baseInfo.quarantineTickeyUrl ? data.baseInfo.quarantineTickeyUrl : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.quarantineTickeyUrl] ? [data.baseInfo.quarantineTickeyUrl] : []"
|
||||
preview-teleported
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="纸质磅单:">
|
||||
<span style="vertical-align: top">
|
||||
<el-image
|
||||
v-if="data.baseInfo.poundListImg"
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="data.baseInfo.poundListImg ? data.baseInfo.poundListImg : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.poundListImg] ? [data.baseInfo.poundListImg] : []"
|
||||
preview-teleported
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="车辆空磅上磅车头照片:">
|
||||
<span style="vertical-align: top">
|
||||
<el-image
|
||||
v-if="data.baseInfo.emptyVehicleFrontPhoto"
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="data.baseInfo.emptyVehicleFrontPhoto ? data.baseInfo.emptyVehicleFrontPhoto : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.emptyVehicleFrontPhoto] ? [data.baseInfo.emptyVehicleFrontPhoto] : []"
|
||||
preview-teleported
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="车辆过重磅车头照片:">
|
||||
<span style="vertical-align: top">
|
||||
<el-image
|
||||
v-if="data.baseInfo.loadedVehicleFrontPhoto"
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="data.baseInfo.loadedVehicleFrontPhoto ? data.baseInfo.loadedVehicleFrontPhoto : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.loadedVehicleFrontPhoto] ? [data.baseInfo.loadedVehicleFrontPhoto] : []"
|
||||
preview-teleported
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="车辆重磅照片:">
|
||||
<span style="vertical-align: top">
|
||||
<el-image
|
||||
v-if="data.baseInfo.loadedVehicleWeightPhoto"
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="data.baseInfo.loadedVehicleWeightPhoto ? data.baseInfo.loadedVehicleWeightPhoto : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.loadedVehicleWeightPhoto] ? [data.baseInfo.loadedVehicleWeightPhoto] : []"
|
||||
preview-teleported
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="驾驶员手持身份证站车头照片:">
|
||||
<span style="vertical-align: top">
|
||||
<el-image
|
||||
v-if="data.baseInfo.driverIdCardPhoto"
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="data.baseInfo.driverIdCardPhoto ? data.baseInfo.driverIdCardPhoto : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.driverIdCardPhoto] ? [data.baseInfo.driverIdCardPhoto] : []"
|
||||
preview-teleported
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<!-- 到地相关照片 -->
|
||||
<el-descriptions-item label="到地纸质磅单:">
|
||||
<span style="vertical-align: top">
|
||||
<el-image
|
||||
v-if="data.baseInfo.destinationPoundListImg"
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="data.baseInfo.destinationPoundListImg ? data.baseInfo.destinationPoundListImg : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.destinationPoundListImg] ? [data.baseInfo.destinationPoundListImg] : []"
|
||||
preview-teleported
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="到地车辆过重磅车头照片:">
|
||||
<span style="vertical-align: top">
|
||||
<el-image
|
||||
v-if="data.baseInfo.destinationVehicleFrontPhoto"
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="data.baseInfo.destinationVehicleFrontPhoto ? data.baseInfo.destinationVehicleFrontPhoto : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.destinationVehicleFrontPhoto] ? [data.baseInfo.destinationVehicleFrontPhoto] : []"
|
||||
preview-teleported
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<!-- 视频上传区域 -->
|
||||
<el-descriptions-item label="空车过磅视频（含车牌、地磅数）:">
|
||||
<span style="vertical-align: top" v-if="data.baseInfo.emptyWeightVideo">
|
||||
<video
|
||||
style="height: 250px; width: auto; border-radius: 5px; margin-left: 60px"
|
||||
controls
|
||||
:src="data.baseInfo.emptyWeightVideo"
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="装车过磅视频:">
|
||||
<span style="vertical-align: top" v-if="data.baseInfo.entruckWeightVideo">
|
||||
<video
|
||||
style="height: 250px; width: auto; border-radius: 5px; margin-left: 60px"
|
||||
controls
|
||||
:src="data.baseInfo.entruckWeightVideo"
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="装车视频:">
|
||||
<span style="vertical-align: top" v-if="data.baseInfo.entruckVideo">
|
||||
<video
|
||||
style="height: 250px; width: auto; border-radius: 5px; margin-left: 60px"
|
||||
controls
|
||||
:src="data.baseInfo.entruckVideo"
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="控槽视频:">
|
||||
<span style="vertical-align: top" v-if="data.baseInfo.controlSlotVideo">
|
||||
<video
|
||||
style="height: 250px; width: auto; border-radius: 5px; margin-left: 60px"
|
||||
controls
|
||||
:src="data.baseInfo.controlSlotVideo"
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="装完牛绕车一圈视频:">
|
||||
<span style="vertical-align: top" v-if="data.baseInfo.cattleLoadingCircleVideo">
|
||||
<video
|
||||
style="height: 250px; width: auto; border-radius: 5px; margin-left: 60px"
|
||||
controls
|
||||
:src="data.baseInfo.cattleLoadingCircleVideo"
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="卸牛视频:">
|
||||
<span style="vertical-align: top" v-if="data.baseInfo.unloadCattleVideo">
|
||||
<video
|
||||
style="height: 250px; width: auto; border-radius: 5px; margin-left: 60px"
|
||||
controls
|
||||
:src="data.baseInfo.unloadCattleVideo"
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="到地过磅视频:">
|
||||
<span style="vertical-align: top" v-if="data.baseInfo.destinationWeightVideo">
|
||||
<video
|
||||
style="height: 250px; width: auto; border-radius: 5px; margin-left: 60px"
|
||||
controls
|
||||
:src="data.baseInfo.destinationWeightVideo"
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- 重量信息分组 -->
|
||||
<div v-if="hasValue(data.baseInfo.emptyWeight) || hasValue(data.baseInfo.entruckWeight) || hasValue(data.baseInfo.landingEntruckWeight)" class="info-group">
|
||||
<div class="group-title">重量信息</div>
|
||||
<el-descriptions :column="3" border>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.emptyWeight)" label="空车过磅重量:">
|
||||
{{ data.baseInfo.emptyWeight }}kg
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.entruckWeight)" label="装车过磅重量:">
|
||||
{{ data.baseInfo.entruckWeight }}kg
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.landingEntruckWeight)" label="落地过磅重量:">
|
||||
{{ data.baseInfo.landingEntruckWeight }}kg
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 照片信息分组 -->
|
||||
<div v-if="hasValue(data.baseInfo.quarantineTickeyUrl) || hasValue(data.baseInfo.poundListImg) || hasValue(data.baseInfo.emptyVehicleFrontPhoto) || hasValue(data.baseInfo.loadedVehicleFrontPhoto) || hasValue(data.baseInfo.loadedVehicleWeightPhoto) || hasValue(data.baseInfo.driverIdCardPhoto) || hasValue(data.baseInfo.destinationPoundListImg) || hasValue(data.baseInfo.destinationVehicleFrontPhoto)" class="info-group">
|
||||
<div class="group-title">照片信息</div>
|
||||
<el-descriptions :column="3" border>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.quarantineTickeyUrl)" label="检疫票:">
|
||||
<div class="photo-container">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px; border-radius: 4px; cursor: pointer"
|
||||
:src="data.baseInfo.quarantineTickeyUrl"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.quarantineTickeyUrl]"
|
||||
preview-teleported
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.poundListImg)" label="纸质磅单:">
|
||||
<div class="photo-container">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px; border-radius: 4px; cursor: pointer"
|
||||
:src="data.baseInfo.poundListImg"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.poundListImg]"
|
||||
preview-teleported
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.emptyVehicleFrontPhoto)" label="车辆空磅上磅车头照片:">
|
||||
<div class="photo-container">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px; border-radius: 4px; cursor: pointer"
|
||||
:src="data.baseInfo.emptyVehicleFrontPhoto"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.emptyVehicleFrontPhoto]"
|
||||
preview-teleported
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.loadedVehicleFrontPhoto)" label="车辆过重磅车头照片:">
|
||||
<div class="photo-container">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px; border-radius: 4px; cursor: pointer"
|
||||
:src="data.baseInfo.loadedVehicleFrontPhoto"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.loadedVehicleFrontPhoto]"
|
||||
preview-teleported
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.loadedVehicleWeightPhoto)" label="车辆重磅照片:">
|
||||
<div class="photo-container">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px; border-radius: 4px; cursor: pointer"
|
||||
:src="data.baseInfo.loadedVehicleWeightPhoto"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.loadedVehicleWeightPhoto]"
|
||||
preview-teleported
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.driverIdCardPhoto)" label="驾驶员手持身份证站车头照片:">
|
||||
<div class="photo-container">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px; border-radius: 4px; cursor: pointer"
|
||||
:src="data.baseInfo.driverIdCardPhoto"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.driverIdCardPhoto]"
|
||||
preview-teleported
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.destinationPoundListImg)" label="到地纸质磅单:">
|
||||
<div class="photo-container">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px; border-radius: 4px; cursor: pointer"
|
||||
:src="data.baseInfo.destinationPoundListImg"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.destinationPoundListImg]"
|
||||
preview-teleported
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.destinationVehicleFrontPhoto)" label="到地车辆过重磅车头照片:">
|
||||
<div class="photo-container">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px; border-radius: 4px; cursor: pointer"
|
||||
:src="data.baseInfo.destinationVehicleFrontPhoto"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.destinationVehicleFrontPhoto]"
|
||||
preview-teleported
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 视频信息分组 -->
|
||||
<div v-if="hasValue(data.baseInfo.emptyWeightVideo) || hasValue(data.baseInfo.entruckWeightVideo) || hasValue(data.baseInfo.entruckVideo) || hasValue(data.baseInfo.controlSlotVideo) || hasValue(data.baseInfo.cattleLoadingCircleVideo) || hasValue(data.baseInfo.unloadCattleVideo) || hasValue(data.baseInfo.destinationWeightVideo)" class="info-group">
|
||||
<div class="group-title">视频信息</div>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.emptyWeightVideo)" label="空车过磅视频（含车牌、地磅数）:">
|
||||
<div class="video-container">
|
||||
<video
|
||||
style="max-width: 100%; height: 200px; border-radius: 4px"
|
||||
controls
|
||||
:src="data.baseInfo.emptyWeightVideo"
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.entruckWeightVideo)" label="装车过磅视频:">
|
||||
<div class="video-container">
|
||||
<video
|
||||
style="max-width: 100%; height: 200px; border-radius: 4px"
|
||||
controls
|
||||
:src="data.baseInfo.entruckWeightVideo"
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.entruckVideo)" label="装车视频:">
|
||||
<div class="video-container">
|
||||
<video
|
||||
style="max-width: 100%; height: 200px; border-radius: 4px"
|
||||
controls
|
||||
:src="data.baseInfo.entruckVideo"
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.controlSlotVideo)" label="控槽视频:">
|
||||
<div class="video-container">
|
||||
<video
|
||||
style="max-width: 100%; height: 200px; border-radius: 4px"
|
||||
controls
|
||||
:src="data.baseInfo.controlSlotVideo"
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.cattleLoadingCircleVideo)" label="装完牛绕车一圈视频:">
|
||||
<div class="video-container">
|
||||
<video
|
||||
style="max-width: 100%; height: 200px; border-radius: 4px"
|
||||
controls
|
||||
:src="data.baseInfo.cattleLoadingCircleVideo"
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.unloadCattleVideo)" label="卸牛视频:">
|
||||
<div class="video-container">
|
||||
<video
|
||||
style="max-width: 100%; height: 200px; border-radius: 4px"
|
||||
controls
|
||||
:src="data.baseInfo.unloadCattleVideo"
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="hasValue(data.baseInfo.destinationWeightVideo)" label="到地过磅视频:">
|
||||
<div class="video-container">
|
||||
<video
|
||||
style="max-width: 100%; height: 200px; border-radius: 4px"
|
||||
controls
|
||||
:src="data.baseInfo.destinationWeightVideo"
|
||||
/>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ear-box">
|
||||
<div class="title">智能主机</div>
|
||||
@@ -1158,6 +1162,17 @@ const getStatusType = (status) => {
|
||||
return typeMap[status] || 'info';
|
||||
};
|
||||
|
||||
// 判断字段是否有有效值（用于隐藏空值字段）
|
||||
const hasValue = (value) => {
|
||||
if (value === null || value === undefined) {
|
||||
return false;
|
||||
}
|
||||
if (typeof value === 'string') {
|
||||
return value.trim() !== '';
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
data.id = route.query.id;
|
||||
data.status = route.query.status;
|
||||
@@ -1200,6 +1215,21 @@ onMounted(() => {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.info-group {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.group-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 12px;
|
||||
padding-left: 8px;
|
||||
border-left: 4px solid #409eff;
|
||||
}
|
||||
.quarantine-text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -1240,4 +1270,19 @@ onMounted(() => {
|
||||
.red {
|
||||
color: #ff6332;
|
||||
}
|
||||
.photo-container {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
transition: transform 0.2s;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
.video-container {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
video {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user