添加新的需求
This commit is contained in:
xuqiuyun
256
pc-cattle-transportation/src/views/entry/attestation.vue
Normal file
256
pc-cattle-transportation/src/views/entry/attestation.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div>
|
||||
<base-search :formItemList="formItemList" @search="searchFrom" ref="baseSearchRef"> </base-search>
|
||||
|
||||
<div class="main-container">
|
||||
<el-table v-loading="dataListLoading" :data="data.rows" border element-loading-text="数据加载中...">
|
||||
<el-table-column label="运单号" prop="deliveryNumber"></el-table-column>
|
||||
<el-table-column label="核验状态" prop="statusDesc" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusTagType(scope.row.status)">
|
||||
{{ scope.row.statusDesc || getStatusText(scope.row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="车牌号" prop="licensePlate"> </el-table-column>
|
||||
<el-table-column label="车身照片" prop="" width="160">
|
||||
<template #default="scope">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="scope.row.carFrontPhoto ? scope.row.carFrontPhoto : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[scope.row.carFrontPhoto] ? [scope.row.carFrontPhoto] : []"
|
||||
preview-teleported
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
style="width: 50px; height: 50px; display: flex; justify-content: center; align-items: center"
|
||||
class="image-slot"
|
||||
>
|
||||
<el-icon style="font-size: 50px"><Picture /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<el-image
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="scope.row.carBehindPhoto ? scope.row.carBehindPhoto : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[scope.row.carBehindPhoto] ? [scope.row.carBehindPhoto] : []"
|
||||
preview-teleported
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
style="width: 50px; height: 50px; display: flex; justify-content: center; align-items: center"
|
||||
class="image-slot"
|
||||
>
|
||||
<el-icon style="font-size: 50px"><Picture /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="起始地" prop="startLocation"> </el-table-column>
|
||||
<el-table-column label="送达目的地" prop="endLocation"> </el-table-column>
|
||||
<el-table-column label="预计送达时间" prop="estimatedDeliveryTime"> </el-table-column>
|
||||
<el-table-column label="登记设备数量" prop="registeredJbqCount" width="120">
|
||||
<template #default="scope">
|
||||
{{ scope.row.registeredJbqCount || '0' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="车内盘点耳标数量" prop="earTagCount" width="140">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.earTagCount == scope.row.registeredJbqCount">
|
||||
{{ scope.row.earTagCount || '0' }}
|
||||
</span>
|
||||
<span style="color: red" v-else>
|
||||
{{ scope.row.earTagCount || '0' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="预警类型">
|
||||
<template #default="scope">
|
||||
<div v-for="(item, index) in scope.row.warningTypeList" :key="index">
|
||||
<el-tag type="warning" v-if="item == '运输距离预警'" style="margin-top: 10px">运输距离预警</el-tag>
|
||||
<el-tag type="danger" v-if="item == '数量盘点预警'" style="margin-top: 10px">数量盘点预警</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="司机姓名" prop="driverName"> </el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime"></el-table-column>
|
||||
<el-table-column label="创建人" prop="createByName"></el-table-column>
|
||||
<el-table-column label="操作" width="194">
|
||||
<template #default="scope">
|
||||
<div class="table_column_operation">
|
||||
<a v-hasPermi="['entry:view']" @click="details(scope.row, scope.row.warningTypeList ? scope.row.warningTypeList.length : 0)">详情</a>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
v-if="scope.row.status == 4 || scope.row.status == 5"
|
||||
v-hasPermi="['entry:download']"
|
||||
@click="download(scope.row.zipUrl)"
|
||||
:loading="downLoading[scope.row.id]"
|
||||
style="padding: 0"
|
||||
>下载文件</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<div class="dataListOnEmpty">暂无数据</div>
|
||||
</template>
|
||||
</el-table>
|
||||
<pagination v-model:limit="form.pageSize" v-model:page="form.pageNum" :total="data.total" @pagination="getDataList" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import baseSearch from '@/components/common/searchCustom/index.vue';
|
||||
import { inspectionList, downloadZip } from '@/api/abroad.js';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const baseSearchRef = ref();
|
||||
const dataListLoading = ref(false);
|
||||
const downLoading = reactive({});
|
||||
const form = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const data = reactive({
|
||||
rows: [],
|
||||
total: 20,
|
||||
});
|
||||
const formItemList = reactive([
|
||||
{
|
||||
label: '运单号',
|
||||
type: 'input',
|
||||
param: 'deliveryNumber',
|
||||
labelWidth: 65,
|
||||
span: 7,
|
||||
},
|
||||
{
|
||||
label: '车牌号',
|
||||
type: 'input',
|
||||
param: 'licensePlate',
|
||||
labelWidth: 65,
|
||||
span: 7,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
type: 'daterange',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
param: 'myTimes',
|
||||
span: 7,
|
||||
},
|
||||
{
|
||||
label: '核验状态',
|
||||
type: 'select',
|
||||
selectOptions: [
|
||||
{ value: 1, text: '待核验' },
|
||||
{ value: 2, text: '已核验' },
|
||||
],
|
||||
param: 'status',
|
||||
span: 7,
|
||||
},
|
||||
]);
|
||||
|
||||
const searchFrom = () => {
|
||||
form.pageNum = 1;
|
||||
getDataList();
|
||||
};
|
||||
const getDataList = () => {
|
||||
dataListLoading.value = true;
|
||||
|
||||
// 安全获取搜索参数
|
||||
let searchParams = {};
|
||||
if (baseSearchRef.value && baseSearchRef.value.penetrateParams) {
|
||||
searchParams = baseSearchRef.value.penetrateParams();
|
||||
}
|
||||
|
||||
const params = {
|
||||
...form,
|
||||
...searchParams,
|
||||
};
|
||||
params.interfaceType = 2;
|
||||
|
||||
// 安全处理时间参数
|
||||
if (searchParams.myTimes && Array.isArray(searchParams.myTimes) && searchParams.myTimes.length > 0) {
|
||||
params.startTime = searchParams.myTimes[0];
|
||||
params.endTime = searchParams.myTimes[1];
|
||||
}
|
||||
|
||||
inspectionList(params)
|
||||
.then((ret) => {
|
||||
console.log('入境检疫列表返回结果:', ret);
|
||||
data.rows = ret.data.rows;
|
||||
data.total = ret.data.total;
|
||||
dataListLoading.value = false;
|
||||
|
||||
// 调试：检查第一行数据的字段
|
||||
if (ret.data.rows && ret.data.rows.length > 0) {
|
||||
const firstRow = ret.data.rows[0];
|
||||
console.log('入境检疫第一行数据完整字段:', firstRow);
|
||||
console.log('入境检疫关键字段检查:', {
|
||||
status: firstRow.status,
|
||||
statusDesc: firstRow.statusDesc,
|
||||
registeredJbqCount: firstRow.registeredJbqCount,
|
||||
earTagCount: firstRow.earTagCount,
|
||||
driverName: firstRow.driverName,
|
||||
licensePlate: firstRow.licensePlate
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
dataListLoading.value = false;
|
||||
});
|
||||
};
|
||||
// 详情
|
||||
const details = (row, length) => {
|
||||
router.push({
|
||||
path: '/entry/details',
|
||||
query: {
|
||||
id: row.id,
|
||||
status: row.status,
|
||||
length,
|
||||
},
|
||||
});
|
||||
};
|
||||
// 下载文件
|
||||
const download = (url) => {
|
||||
window.location.href = url;
|
||||
};
|
||||
|
||||
// 状态文本转换
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
1: '待装车',
|
||||
2: '已装车/待资金方付款',
|
||||
3: '待核验/资金方已付款',
|
||||
4: '已核验/待买家付款',
|
||||
5: '买家已付款'
|
||||
};
|
||||
return statusMap[status] || '未知状态';
|
||||
};
|
||||
|
||||
// 状态标签类型
|
||||
const getStatusTagType = (status) => {
|
||||
const typeMap = {
|
||||
1: 'warning', // 待装车 - 橙色
|
||||
2: 'info', // 已装车/待资金方付款 - 蓝色
|
||||
3: 'warning', // 待核验/资金方已付款 - 橙色
|
||||
4: 'success', // 已核验/待买家付款 - 绿色
|
||||
5: 'success' // 买家已付款 - 绿色
|
||||
};
|
||||
return typeMap[status] || 'info';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDataList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
878
pc-cattle-transportation/src/views/entry/details.vue
Normal file
878
pc-cattle-transportation/src/views/entry/details.vue
Normal file
@@ -0,0 +1,878 @@
|
||||
<template>
|
||||
<!-- 参数缺失时的友好提示 -->
|
||||
<div v-if="!route.query.id" class="error-container">
|
||||
<el-result
|
||||
icon="warning"
|
||||
title="参数缺失"
|
||||
sub-title="缺少必要的参数，无法加载详情页面"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="goBack">返回上一页</el-button>
|
||||
<el-button @click="goToList">前往列表页面</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
|
||||
<!-- 正常内容 -->
|
||||
<section v-else>
|
||||
<div class="main-container">
|
||||
<div class="info-box">
|
||||
<div class="title">基础信息</div>
|
||||
<el-descriptions :column="4">
|
||||
<el-descriptions-item label="运单号:">{{ data.baseInfo.deliveryNumber || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="订单标题:">{{ data.baseInfo.deliveryTitle || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="资金方:">{{ data.baseInfo.fundName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="采购商:">{{ data.baseInfo.buyerName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车牌号:">{{ data.baseInfo.licensePlate || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="司机姓名:">{{ data.baseInfo.driverName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="起始地:">{{ data.baseInfo.startLocation || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="送达目的地:">{{ data.baseInfo.endLocation || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="预计送达时间:">{{ data.baseInfo.estimatedDeliveryTime || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间:">{{ data.baseInfo.createTime || '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="登记设备数量:">{{ data.baseInfo.registeredJbqCount || '-' }} 个</el-descriptions-item>
|
||||
<el-descriptions-item label="状态:">
|
||||
<el-tag :type="data.baseInfo.status === 2 ? 'success' : 'warning'">{{ getStatusText(data.baseInfo.status) }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="车身照片:">
|
||||
<span style="vertical-align: top">
|
||||
<el-image
|
||||
v-if="data.baseInfo.carFrontPhoto"
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="data.baseInfo.carFrontPhoto ? data.baseInfo.carFrontPhoto : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.carFrontPhoto] ? [data.baseInfo.carFrontPhoto] : []"
|
||||
preview-teleported
|
||||
/>
|
||||
<el-image
|
||||
v-if="data.baseInfo.carBehindPhoto"
|
||||
style="width: 50px; height: 50px; margin-right: 10px"
|
||||
:src="data.baseInfo.carBehindPhoto ? data.baseInfo.carBehindPhoto : ''"
|
||||
fit="cover"
|
||||
:preview-src-list="[data.baseInfo.carBehindPhoto] ? [data.baseInfo.carBehindPhoto] : []"
|
||||
preview-teleported
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="info-box" v-if="data.length != 0">
|
||||
<div class="title">预警信息</div>
|
||||
<el-descriptions :column="4">
|
||||
<template v-for="(item, index) in data.warnInfo" :key="index">
|
||||
<template v-if="item.warningType == 2">
|
||||
<el-descriptions-item label="预警原因:">
|
||||
<span class="red">{{ item.warningTypeDesc }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="预警时间:">{{ item.warningTime || '--' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="智能耳标数:"> {{ data.baseInfo.registeredJbqCount || '--' }} 个 </el-descriptions-item>
|
||||
<el-descriptions-item label="车内盘点数量:"> {{ item.inventoryJbqCount || '--' }} 个 </el-descriptions-item>
|
||||
</template>
|
||||
<template v-if="item.warningType == 3">
|
||||
<el-descriptions-item label="预警原因:">
|
||||
<span class="red">{{ item.warningTypeDesc || '' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="预警时间:">{{ item.warningTime || '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="应行驶距离:"> {{ item.expectedDistance || '' }} km </el-descriptions-item>
|
||||
<el-descriptions-item label="实际行驶距离:"> {{ item.actualDistance || '' }} km </el-descriptions-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-descriptions>
|
||||
</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="检疫票:">
|
||||
<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" 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>
|
||||
</div>
|
||||
<div class="host-box" v-if="data.serverIds != ''">
|
||||
<div class="title">智能主机</div>
|
||||
<el-descriptions :column="1">
|
||||
<el-descriptions-item label="主机编号:">
|
||||
{{ data.serverIds }}
|
||||
<el-button type="primary" style="margin-left: 20px" size="small" @click="locationClick(item)" v-if="data.serverIds"
|
||||
>查看主机定位</el-button
|
||||
>
|
||||
<el-button type="primary" style="margin-left: 20px" size="small" @click="trackClick(data.serverIds)" v-if="data.serverIds"
|
||||
>查看运动轨迹</el-button
|
||||
>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="ear-box">
|
||||
<div class="title">智能项圈</div>
|
||||
<el-table
|
||||
:data="data.collarRows"
|
||||
border
|
||||
v-loading="data.collarDataListLoading"
|
||||
element-loading-text="数据加载中..."
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="智能项圈编号" prop="sn"></el-table-column>
|
||||
<el-table-column label="设备电量" prop="battery">
|
||||
<template #default="scope"> {{ scope.row.battery }}% </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="步数" prop="steps">
|
||||
<template #default="scope"> {{ scope.row.steps }}步</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备温度" prop="temperature">
|
||||
<template #default="scope"> {{ scope.row.temperature }}/℃ </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数据最后更新时间" prop="time"></el-table-column>
|
||||
<el-table-column label="操作" prop="">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="collarLogClick(scope.row)">日志</el-button>
|
||||
<el-button link type="primary" @click="collarTrackClick(scope.row)">运动轨迹</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-model:limit="collarForm.pageSize"
|
||||
v-model:page="collarForm.pageNum"
|
||||
:total="data.collarTotal"
|
||||
@pagination="getCollarList"
|
||||
/>
|
||||
</div>
|
||||
<div class="ear-box">
|
||||
<div class="title">智能耳标</div>
|
||||
<el-table :data="data.rows" border v-loading="data.dataListLoading" element-loading-text="数据加载中..." style="width: 100%">
|
||||
<el-table-column label="智能耳标编号" prop="deviceId"></el-table-column>
|
||||
<el-table-column label="设备电量" prop="deviceVoltage">
|
||||
<template #default="scope"> {{ scope.row.deviceVoltage }}% </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="步数" prop="walkSteps">
|
||||
<template #default="scope"> {{ scope.row.walkSteps }}步</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备温度" prop="deviceTemp">
|
||||
<template #default="scope"> {{ scope.row.deviceTemp }}/℃ </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数据最后更新时间" prop="updateTime"></el-table-column>
|
||||
<el-table-column label="操作" prop="">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="earLogClick(scope.row)">日志</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-model:limit="form.pageSize" v-model:page="form.pageNum" :total="data.total" @pagination="getEarList" />
|
||||
</div>
|
||||
<!-- <div class="info-box" v-if="data.status == 4 || data.status == 5">
|
||||
<div class="title">核验信息</div>
|
||||
<el-descriptions :column="4">
|
||||
<el-descriptions-item label="到货核验人:">{{ data.baseInfo.checkByName || '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核验时间:">{{ data.baseInfo.checkTime || '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核验空车过磅重量:">{{
|
||||
data.baseInfo.checkEmptyWeight ? data.baseInfo.checkEmptyWeight + 'kg' : ''
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="核验满车过磅重量:">{{
|
||||
data.baseInfo.checkEntruckWeight ? data.baseInfo.checkEntruckWeight + 'kg' : ''
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="核验空车过磅视频:">
|
||||
<span style="vertical-align: top" v-if="data.baseInfo.checkEmptyWeightVideo">
|
||||
<video
|
||||
style="height: 250px; width: auto; border-radius: 5px; margin-left: 60px"
|
||||
controls
|
||||
:src="data.baseInfo.checkEmptyWeightVideo"
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="核验装车过磅视频:">
|
||||
<span style="vertical-align: top" v-if="data.baseInfo.checkEntruckWeightVideo">
|
||||
<video
|
||||
style="height: 250px; width: auto; border-radius: 5px; margin-left: 60px"
|
||||
controls
|
||||
:src="data.baseInfo.checkEntruckWeightVideo"
|
||||
/>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div> -->
|
||||
<div class="btn-box">
|
||||
<el-button @click="cancelClick">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 查看主机定位 -->
|
||||
<el-dialog v-model="data.dialogVisible" title="查看定位" style="width: 650px; padding-bottom: 20px">
|
||||
<div>
|
||||
<baidu-map style="height: 500px" class="map" :zoom="15" :center="data.center" :scroll-wheel-zoom="true" v-if="data.dialogVisible">
|
||||
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type>
|
||||
<bm-marker :position="data.center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
|
||||
<bm-label
|
||||
:content="data.updateTime"
|
||||
:labelStyle="{
|
||||
color: '#67c23a',
|
||||
fontSize: '12px',
|
||||
borderColor: '#fff',
|
||||
borderRadius: 10,
|
||||
}"
|
||||
:offset="{ width: -60, height: 10 }"
|
||||
/>
|
||||
</bm-marker>
|
||||
</baidu-map>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<!-- <el-button @click="cancelClick">取消</el-button> -->
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 查看轨迹 -->
|
||||
<el-dialog v-model="data.trackDialogVisible" title="查看运动轨迹" style="width: 650px; padding-bottom: 20px">
|
||||
<div
|
||||
v-loading="data.trackLoading"
|
||||
element-loading-text="正在加载中..."
|
||||
style="height: 450px"
|
||||
element-loading-background="rgba(255, 255, 255,1)"
|
||||
>
|
||||
<div class="empty-box" v-if="data.trajectoryStatus">
|
||||
<img style="width: 50%" src="../../assets/images/wuguiji.png" />
|
||||
</div>
|
||||
<baidu-map
|
||||
v-else
|
||||
class="map"
|
||||
@ready="handler"
|
||||
:center="data.centerPoint"
|
||||
:zoom="data.trackZoom"
|
||||
:dragging="true"
|
||||
:auto-resize="true"
|
||||
:scroll-wheel-zoom="true"
|
||||
style="height: 450px"
|
||||
>
|
||||
<!-- 运行轨迹的路线 stroke-weight边线的宽度stroke-opacity边线透明度-->
|
||||
<bm-polyline stroke-color="blue" :path="data.path" :stroke-opacity="0.5" :stroke-weight="3" :editing="false"></bm-polyline>
|
||||
<!-- marker 可以展示的图标 起点、终点 -->
|
||||
<bm-marker :icon="startMarkIcon" :position="{ lng: data.startMark.lng, lat: data.startMark.lat }"></bm-marker>
|
||||
<bm-marker :icon="endMarkIcon" :position="{ lng: data.endMark.lng, lat: data.endMark.lat }"></bm-marker>
|
||||
<!-- <bm-marker
|
||||
v-for="(item, index) in data.path"
|
||||
:key="index"
|
||||
:icon="biaoMarkIcon"
|
||||
:position="{ lng: item.lng, lat: item.lat }"
|
||||
></bm-marker> -->
|
||||
<!-- 暂停是根据你提供的坐标，如果还没过第一个，就会返回，如果过了，在第一个到第二个之间暂停，他会跑掉第二个后面 -->
|
||||
<!-- <bml-lushu @stop="reset" :path="data.path" :icon="iconss" :play="data.play" :rotation="true" :speed="1000"></bml-lushu> -->
|
||||
</baidu-map>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 耳标日志 -->
|
||||
<el-dialog v-model="data.earLogDialogVisible" title="设备日志" style="width: 900px; padding-bottom: 20px">
|
||||
<el-table :data="data.earLogRows" border v-loading="data.logListLoading" element-loading-text="数据加载中..." style="width: 100%">
|
||||
<el-table-column label="智能耳标编号" prop="deviceId"></el-table-column>
|
||||
<el-table-column label="设备电量" prop="deviceVoltage">
|
||||
<template #default="scope"> {{ scope.row.deviceVoltage }}% </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="步数" prop="walkSteps">
|
||||
<template #default="scope"> {{ scope.row.walkSteps }}步</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备温度" prop="deviceTemp">
|
||||
<template #default="scope"> {{ scope.row.deviceTemp }}/℃ </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数据最后更新时间" prop="updateTime" width="200"></el-table-column>
|
||||
<el-table-column label="操作" prop="">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="locateClick(scope.row)">定位</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-model:limit="earLogForm.pageSize" v-model:page="earLogForm.pageNum" :total="data.earLogTotal" @pagination="getEarLogList" />
|
||||
</el-dialog>
|
||||
<!-- 项圈日志 -->
|
||||
<el-dialog v-model="data.collarDialogVisible" title="设备日志" style="width: 900px; padding-bottom: 20px">
|
||||
<el-table :data="data.collarLogRows" border v-loading="data.logListLoading" element-loading-text="数据加载中..." style="width: 100%">
|
||||
<el-table-column label="智能项圈编号" prop="sn"></el-table-column>
|
||||
<el-table-column label="设备电量" prop="battery">
|
||||
<template #default="scope"> {{ scope.row.battery }}% </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="步数" prop="steps">
|
||||
<template #default="scope"> {{ scope.row.steps }}步</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备温度" prop="temperature">
|
||||
<template #default="scope"> {{ scope.row.temperature }}/℃ </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数据最后更新时间" prop="time" width="200"></el-table-column>
|
||||
<el-table-column label="操作" prop="">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="collarlocateClick(scope.row)">定位</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-model:limit="collarLogForm.pageSize"
|
||||
v-model:page="collarLogForm.pageNum"
|
||||
:total="data.collarLogTotal"
|
||||
@pagination="getCollarLogList"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
<TrackDialog ref="TrackDialogRef" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { earList, hostLocation, hostTrack, waybillDetail, collarList, collarLogList, earLogList, testDeliveryDevices } from '@/api/abroad.js';
|
||||
import startIcon from '../../assets/images/qi.png';
|
||||
import endIcon from '../../assets/images/zhong.png';
|
||||
import TrackDialog from '../hardware/trackDialog.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const TrackDialogRef = ref();
|
||||
const startMarkIcon = reactive({
|
||||
url: startIcon,
|
||||
size: { width: 32, height: 32 },
|
||||
opts: { anchor: { width: 16, height: 16 } },
|
||||
});
|
||||
const endMarkIcon = reactive({
|
||||
url: endIcon,
|
||||
size: { width: 32, height: 32 },
|
||||
opts: { anchor: { width: 16, height: 16 } },
|
||||
});
|
||||
const data = reactive({
|
||||
status: '',
|
||||
length: '',
|
||||
imgArr: [],
|
||||
baseInfo: {
|
||||
id: 1,
|
||||
createByDesc: '申报人',
|
||||
createByPhone: '联系电话',
|
||||
rgstJbqNum: '申报数量',
|
||||
createTime: '创建时间',
|
||||
deliverNo: '申报运单号',
|
||||
carNo: '车牌号',
|
||||
quarStatusDesc: '入场状态', // 根据status反显
|
||||
status: '订单状态 1境外预检 2 已入境待隔离（检疫成功） 3 已入隔离场 4 隔离场出场 ',
|
||||
deliverTime: '启运时间',
|
||||
},
|
||||
warnInfo: [],
|
||||
serverIds: '',
|
||||
dataListLoading: false,
|
||||
rows: [],
|
||||
total: 0,
|
||||
radio: '1',
|
||||
checkStatus: '', // 车内盘点状态
|
||||
hgCheckStatus: '', // 海关盘点状态
|
||||
dialogVisible: false, // 查看主机弹窗
|
||||
center: { lng: 0, lat: 0 },
|
||||
updateTime: '', // 主机定位时间
|
||||
// 轨迹
|
||||
trackDialogVisible: false,
|
||||
trackZoom: 15,
|
||||
path: [],
|
||||
centerPoint: { lng: 0, lat: 0 },
|
||||
trackLoading: false,
|
||||
trajectoryStatus: true,
|
||||
startMark: {},
|
||||
endMark: {},
|
||||
confirmLoading: false,
|
||||
collarDataListLoading: false,
|
||||
collarRows: [],
|
||||
collarTotal: 0,
|
||||
logListLoading: false,
|
||||
earLogRows: [],
|
||||
earLogDialogVisible: false,
|
||||
collarDialogVisible: false,
|
||||
earLogTotal: 0,
|
||||
collarLogRows: [],
|
||||
collarLogTotal: 0,
|
||||
deviceId: '', // 耳标编号
|
||||
sn: '', // 项圈编号
|
||||
});
|
||||
const form = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const collarForm = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
// 耳标日志
|
||||
const earLogForm = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
// 项圈日志
|
||||
const collarLogForm = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
// 查详情
|
||||
const getDetail = () => {
|
||||
console.log('查询运单详情, deliveryId:', route.query.id);
|
||||
|
||||
if (!route.query.id) {
|
||||
console.warn('=== 警告：deliveryId为空，跳过运单详情查询');
|
||||
return;
|
||||
}
|
||||
|
||||
waybillDetail(route.query.id)
|
||||
.then((res) => {
|
||||
console.log('运单详情返回结果:', res);
|
||||
if (res.code === 200) {
|
||||
data.baseInfo = res.data.delivery ? res.data.delivery : {};
|
||||
data.warnInfo = res.data.warningLog ? res.data.warningLog : {};
|
||||
data.serverIds = res.data.serverIds ? res.data.serverIds : [];
|
||||
console.log('基础信息:', {
|
||||
driverName: data.baseInfo.driverName,
|
||||
licensePlate: data.baseInfo.licensePlate,
|
||||
carFrontPhoto: data.baseInfo.carFrontPhoto,
|
||||
carBehindPhoto: data.baseInfo.carBehindPhoto,
|
||||
driverId: data.baseInfo.driverId
|
||||
});
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 查看主机定位
|
||||
const locationClick = (item) => {
|
||||
getHostLocation(item);
|
||||
};
|
||||
//
|
||||
// 查询主机经纬度
|
||||
const getHostLocation = (item) => {
|
||||
hostLocation({
|
||||
serverDeviceId: data.serverIds,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
data.center.lng = res.data.longitude;
|
||||
data.center.lat = res.data.latitude;
|
||||
data.updateTime = res.data.updateTime;
|
||||
data.dialogVisible = true;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 查看运动轨迹
|
||||
const trackClick = (item) => {
|
||||
data.trackDialogVisible = true;
|
||||
getHostTrack(item);
|
||||
};
|
||||
// 查询主机运动轨迹
|
||||
const getHostTrack = (item) => {
|
||||
data.trackLoading = true;
|
||||
hostTrack({
|
||||
deliveryId: data.baseInfo.id,
|
||||
serverDeviceId: Number(item),
|
||||
})
|
||||
.then((res) => {
|
||||
data.trackLoading = false;
|
||||
if (res.code === 200) {
|
||||
if (res.data.length > 0) {
|
||||
data.trajectoryStatus = false;
|
||||
data.path = [];
|
||||
res.data.forEach((item, index) => {
|
||||
data.path.unshift({
|
||||
lng: item.longitude,
|
||||
lat: item.latitude,
|
||||
});
|
||||
});
|
||||
data.startMark = data.path[0]; // 起点
|
||||
data.endMark = data.path[data.path.length - 1]; // 终点
|
||||
} else {
|
||||
data.trajectoryStatus = true;
|
||||
data.path = [];
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
data.trackLoading = false;
|
||||
data.trajectoryStatus = true;
|
||||
});
|
||||
};
|
||||
// --------- 智能耳标 -----------
|
||||
// 耳标列表查询
|
||||
const getEarList = () => {
|
||||
if (!route.query.id) {
|
||||
console.warn('=== 警告：deliveryId为空，跳过耳标列表查询');
|
||||
data.dataListLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
data.dataListLoading = true;
|
||||
earList({
|
||||
pageNum: form.pageNum,
|
||||
pageSize: form.pageSize,
|
||||
deliveryId: route.query.id,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log('=== 耳标设备API返回结果:', res);
|
||||
data.dataListLoading = false;
|
||||
if (res.code === 200) {
|
||||
console.log('=== 耳标设备数据:', res.data);
|
||||
data.rows = res.data.rows || [];
|
||||
data.total = res.data.total || 0;
|
||||
console.log('=== 设置后的rows:', data.rows);
|
||||
console.log('=== 设置后的total:', data.total);
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
data.total = 0;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
data.dataListLoading = false;
|
||||
});
|
||||
};
|
||||
const earLogClick = (row) => {
|
||||
data.deviceId = row.deviceId;
|
||||
data.earLogDialogVisible = true;
|
||||
getEarLogList();
|
||||
};
|
||||
// 智能项圈列表查询
|
||||
const getCollarList = () => {
|
||||
if (!route.query.id) {
|
||||
console.warn('=== 警告：deliveryId为空，跳过项圈列表查询');
|
||||
data.collarDataListLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
data.collarDataListLoading = true;
|
||||
collarList({
|
||||
pageNum: collarForm.pageNum,
|
||||
pageSize: collarForm.pageSize,
|
||||
deliveryId: route.query.id,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log('=== 项圈设备API返回结果:', res);
|
||||
data.collarDataListLoading = false;
|
||||
if (res.code === 200) {
|
||||
console.log('=== 项圈设备数据:', res.data);
|
||||
data.collarRows = res.data.rows || [];
|
||||
data.collarTotal = res.data.total || 0;
|
||||
console.log('=== 设置后的collarRows:', data.collarRows);
|
||||
console.log('=== 设置后的collarTotal:', data.collarTotal);
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
data.collarTotal = 0;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
data.collarDataListLoading = false;
|
||||
data.collarTotal = 0; // 确保total有默认值
|
||||
});
|
||||
};
|
||||
const collarLogClick = (row) => {
|
||||
data.sn = row.sn;
|
||||
data.collarDialogVisible = true;
|
||||
getCollarLogList();
|
||||
};
|
||||
const handler = ({ BMap, map }) => {
|
||||
// 自动获取展示的比例
|
||||
const view = map.getViewport(eval(data.path));
|
||||
data.trackZoom = view.zoom;
|
||||
data.centerPoint = view.center;
|
||||
};
|
||||
// 取消按钮
|
||||
const cancelClick = () => {
|
||||
window.history.go(-1);
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
window.history.go(-1);
|
||||
};
|
||||
|
||||
// 前往列表页面
|
||||
const goToList = () => {
|
||||
router.push('/entry/attestation');
|
||||
};
|
||||
// 弹层
|
||||
const locateClick = (row) => {
|
||||
data.center.lng = row.longitude;
|
||||
data.center.lat = row.latitude;
|
||||
data.updateTime = row.updateTime;
|
||||
data.dialogVisible = true;
|
||||
};
|
||||
//
|
||||
const collarlocateClick = (row) => {
|
||||
data.center.lng = row.longitude;
|
||||
data.center.lat = row.latitude;
|
||||
data.updateTime = row.time;
|
||||
data.dialogVisible = true;
|
||||
};
|
||||
// 耳标日志列表
|
||||
const getEarLogList = () => {
|
||||
data.logListLoading = true;
|
||||
earLogList({
|
||||
pageNum: earLogForm.pageNum,
|
||||
pageSize: earLogForm.pageSize,
|
||||
deliveryId: route.query.id,
|
||||
deviceId: data.deviceId,
|
||||
})
|
||||
.then((res) => {
|
||||
data.logListLoading = false;
|
||||
if (res.code === 200) {
|
||||
data.earLogRows = res.data.rows;
|
||||
data.earLogTotal = res.data.total;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
data.logListLoading = false;
|
||||
data.earLogTotal = 0; // 确保total有默认值
|
||||
});
|
||||
};
|
||||
// 项圈日志列表
|
||||
const getCollarLogList = () => {
|
||||
data.logListLoading = true;
|
||||
collarLogList({
|
||||
pageNum: collarLogForm.pageNum,
|
||||
pageSize: collarLogForm.pageSize,
|
||||
deliveryId: route.query.id,
|
||||
deviceId: data.sn,
|
||||
})
|
||||
.then((res) => {
|
||||
data.logListLoading = false;
|
||||
if (res.code === 200) {
|
||||
data.collarLogRows = res.data.rows;
|
||||
data.collarLogTotal = res.data.total;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
data.logListLoading = false;
|
||||
data.collarLogTotal = 0; // 确保total有默认值
|
||||
});
|
||||
};
|
||||
// 查看运动轨迹
|
||||
const collarTrackClick = (row) => {
|
||||
if (TrackDialogRef.value) {
|
||||
const info = {
|
||||
deliveryId: route.query.id,
|
||||
deviceId: row.sn,
|
||||
type: 'order',
|
||||
};
|
||||
TrackDialogRef.value.onShowTrackDialog(info);
|
||||
}
|
||||
};
|
||||
// 状态文本转换
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
1: '待装车',
|
||||
2: '装车中',
|
||||
3: '运输中',
|
||||
4: '已送达',
|
||||
5: '已完成'
|
||||
};
|
||||
return statusMap[status] || '未知状态';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
data.id = route.query.id;
|
||||
data.status = route.query.status;
|
||||
data.length = route.query.length;
|
||||
|
||||
console.log('=== 详情页面初始化，deliveryId:', route.query.id);
|
||||
console.log('=== 路由参数:', route.query);
|
||||
|
||||
// 检查deliveryId是否存在
|
||||
if (!route.query.id) {
|
||||
console.warn('=== 警告：deliveryId为空，无法加载详情页面');
|
||||
ElMessage.error('缺少必要的参数，请从列表页面点击详情按钮进入');
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查deliveryId是否存在，存在时才测试设备关联情况
|
||||
testDeliveryDevices({ deliveryId: route.query.id })
|
||||
.then(res => {
|
||||
console.log('=== 测试设备关联结果:', res);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('=== 测试设备关联失败:', err);
|
||||
});
|
||||
|
||||
getDetail(); // 查详情
|
||||
getEarList(); // 耳标列表查询
|
||||
getCollarList(); // 项圈类别查询
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.error-container {
|
||||
padding: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.quarantine-text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
:deep(.my-label) {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
.label {
|
||||
width: 140px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
::v-deep .anchorBL {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
.img-box {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
.img-label {
|
||||
width: 120px;
|
||||
font-size: 14px;
|
||||
margin-right: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.empty-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.red {
|
||||
color: #ff6332;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user