|
|
|
|
@ -50,8 +50,9 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav-people" @click="goClient">
|
|
|
|
|
<img src="../../assets/images/home/people.png" alt="logo" class="logo-light" />
|
|
|
|
|
<div class="nav-people" >
|
|
|
|
|
<img style="margin-right: 20px;cursor: pointer;" src="../../assets/images/home/search.png" @click="showDialog"/>
|
|
|
|
|
<img src="../../assets/images/home/people.png" alt="logo" class="logo-light" @click="goClient"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
@ -109,28 +110,133 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav-people" @click="goClient">
|
|
|
|
|
<img src="../../assets/images/home/people_black.png" alt="logo" class="logo-light" />
|
|
|
|
|
<div class="nav-people" >
|
|
|
|
|
<img style="margin-right: 20px;cursor: pointer;" src="../../assets/images/home/search_black.png" @click="showDialog"/>
|
|
|
|
|
<img src="../../assets/images/home/people_black.png" alt="logo" class="logo-light" @click="goClient"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<DialogContent
|
|
|
|
|
:isDialogVisible.sync="dialogVisible"
|
|
|
|
|
title="请输入要查询的轨迹信息并按下键盘“←┘”"
|
|
|
|
|
@confirm="handleConfirm"
|
|
|
|
|
@cancel="handleCancel"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
<template v-slot>
|
|
|
|
|
<div class="scrollable-container" style="min-height: 200px;max-height: 500px;">
|
|
|
|
|
<el-input placeholder="请输入" v-model="orderNo" style="width: 60%;" @keyup.enter.native="handleConfirm"></el-input>
|
|
|
|
|
<el-timeline>
|
|
|
|
|
<el-timeline-item
|
|
|
|
|
v-for="(item, index) in timelineData"
|
|
|
|
|
:key="index"
|
|
|
|
|
:timestamp="item.main.time"
|
|
|
|
|
:color="item.color"
|
|
|
|
|
placement="bottom"
|
|
|
|
|
>
|
|
|
|
|
<div class="timeline-content">
|
|
|
|
|
<div>{{ item.main.info }}</div>
|
|
|
|
|
<div v-if="item.showMore" style="margin-top: 15px;">
|
|
|
|
|
<div v-for="(subItem, subIndex) in item.subItems" :key="subIndex" class="showMoreData">
|
|
|
|
|
<span class="sub-item-info">{{ subItem.info }}</span>
|
|
|
|
|
<span class="sub-item-time">{{ subItem.time }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="item.subItems && item.subItems.length && !item.showMore" @click="item.showMore = true" class="show-more">
|
|
|
|
|
更多...
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-timeline-item>
|
|
|
|
|
</el-timeline>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</DialogContent>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import DialogContent from '../dialog/searchTrackDialog.vue';
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Navbar',
|
|
|
|
|
components: {
|
|
|
|
|
DialogContent
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
color: 'white',
|
|
|
|
|
path: this.$route.path,
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
orderNo:'',
|
|
|
|
|
rawData: {
|
|
|
|
|
// "ZSBL2407090170": [
|
|
|
|
|
// { info: "已派送到目的地", time: "2024-07-24 15:22:05" },
|
|
|
|
|
// { info: "预约送亚马逊仓库时间：2024-7-24", time: "2024-07-23 18:23:16" },
|
|
|
|
|
// { info: "清关已放行", time: "2024-07-23 15:22:42" },
|
|
|
|
|
// { info: "预计到监管仓：7月23日", time: "2024-07-22 15:06:05" },
|
|
|
|
|
// { info: "已抵达(空运)", time: "2024-07-21 17:54:00" },
|
|
|
|
|
// { info: "已离港", time: "2024-07-21 09:32:45" },
|
|
|
|
|
// { info: "预计离港：7月21日，预计抵达：7月22日", time: "2024-07-19 17:36:36" },
|
|
|
|
|
// { info: "深圳3号仓（机场仓） 已收货", time: "2024-07-18 20:00:36" },
|
|
|
|
|
// { info: "已下单", time: "2024-07-17 09:18:29" }
|
|
|
|
|
// ],
|
|
|
|
|
// "ZSBL24070901701": [
|
|
|
|
|
// { info: "已派送到目的地", time: "2024-07-24 15:22:05" },
|
|
|
|
|
// { info: "预约送亚马逊仓库时间：2024-7-24", time: "2024-07-23 18:23:16" },
|
|
|
|
|
// { info: "清关已放行", time: "2024-07-23 15:22:42" },
|
|
|
|
|
// { info: "预计到监管仓：7月23日", time: "2024-07-22 15:06:05" },
|
|
|
|
|
// { info: "已抵达(空运)", time: "2024-07-21 17:54:00" },
|
|
|
|
|
// { info: "已离港", time: "2024-07-21 09:32:45" },
|
|
|
|
|
// { info: "预计离港：7月21日，预计抵达：7月22日", time: "2024-07-19 17:36:36" },
|
|
|
|
|
// { info: "深圳3号仓（机场仓） 已收货", time: "2024-07-18 20:00:36" },
|
|
|
|
|
// { info: "已下单", time: "2024-07-17 09:18:29" }
|
|
|
|
|
// ],
|
|
|
|
|
},
|
|
|
|
|
timelineData: [
|
|
|
|
|
// {
|
|
|
|
|
// main: { info: "已派送到目的地", time: "2024-07-24 15:22:05" },
|
|
|
|
|
// color: "green",
|
|
|
|
|
// subItems: [],
|
|
|
|
|
// showMore: false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// main: { info: "预约送亚马逊仓库时间：2024-7-24", time: "2024-07-23 18:23:16" },
|
|
|
|
|
// color: "blue",
|
|
|
|
|
// subItems: [
|
|
|
|
|
// { info: "清关已放行", time: "2024-07-23 15:22:42" },
|
|
|
|
|
// { info: "预计到监管仓：7月23日", time: "2024-07-22 15:06:05" }
|
|
|
|
|
// ],
|
|
|
|
|
// showMore: false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// main: { info: "已抵达(空运)", time: "2024-07-21 17:54:00" },
|
|
|
|
|
// color: "red",
|
|
|
|
|
// subItems: [
|
|
|
|
|
// { info: "已离港", time: "2024-07-21 09:32:45" },
|
|
|
|
|
// { info: "预计离港：7月21日，预计抵达：7月22日", time: "2024-07-19 17:36:36" }
|
|
|
|
|
// ],
|
|
|
|
|
// showMore: false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// main: { info: "深圳3号仓（机场仓） 已收货", time: "2024-07-18 20:00:36" },
|
|
|
|
|
// color: "blue",
|
|
|
|
|
// subItems: [],
|
|
|
|
|
// showMore: false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// main: { info: "已下单", time: "2024-07-17 09:18:29" },
|
|
|
|
|
// color: "black",
|
|
|
|
|
// subItems: [],
|
|
|
|
|
// showMore: false
|
|
|
|
|
// }
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
|
|
|
|
|
// this.timelineData = this.transformData(this.rawData);
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.setColor()
|
|
|
|
|
@ -148,15 +254,64 @@
|
|
|
|
|
}else {
|
|
|
|
|
this.color = 'white';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
goClient(){
|
|
|
|
|
window.location.href= `http://56carrier.com:82/#/home/index`
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
goClient(){
|
|
|
|
|
window.location.href= `http://56carrier.com:82/#/home/index`
|
|
|
|
|
},
|
|
|
|
|
showDialog() {
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
},
|
|
|
|
|
handleConfirm() {
|
|
|
|
|
// console.log('确认操作');
|
|
|
|
|
this.fetchOrderTrack()
|
|
|
|
|
},
|
|
|
|
|
handleCancel() {
|
|
|
|
|
// console.log('取消操作');
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
},
|
|
|
|
|
transformData(rawData) {
|
|
|
|
|
return Object.keys(rawData).map(key => ({
|
|
|
|
|
main: { info: key },
|
|
|
|
|
color: '', // 可以根据业务需求定义颜色映射
|
|
|
|
|
showMore:false,
|
|
|
|
|
subItems: rawData[key].map(event => ({
|
|
|
|
|
info: event.info,
|
|
|
|
|
time: event.time
|
|
|
|
|
}))
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
fetchOrderTrack() {
|
|
|
|
|
if (!this.orderNo) {
|
|
|
|
|
console.error('Order number is not set.');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
axios.get('https://track.szaaf.com:8089/trajectory/index', {
|
|
|
|
|
// axios.get('http://192.168.10.62:8088/api/sync/xzh/order/getTrackNew', {
|
|
|
|
|
params: {
|
|
|
|
|
orderNo: this.orderNo // 设置请求的查询参数
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(response => {
|
|
|
|
|
console.log(response,'response')
|
|
|
|
|
if(response.data.code===200){
|
|
|
|
|
this.rawData = response.data.data;
|
|
|
|
|
// this.timelineData = this.transformData(this.rawData);
|
|
|
|
|
this.timelineData = this.transformData(this.rawData);
|
|
|
|
|
}else {
|
|
|
|
|
this.rawData = {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('请求失败:', error);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
|
'$route'(to, from) {
|
|
|
|
|
console.log(from,to,'from')
|
|
|
|
|
// console.log(from,to,'from')
|
|
|
|
|
// 路由变化时调用
|
|
|
|
|
if(to.path ==='/newsHome') {
|
|
|
|
|
this.color = 'white';
|
|
|
|
|
@ -174,4 +329,5 @@
|
|
|
|
|
@import "./styles/navbar.css"
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
