lml
/
new_company
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:官网提交

Browse Source
master
lml 6 days ago
parent 34c5065678
commit 50dd86837a
2 changed files with 322 additions and 234 deletions
Show Stats Download Patch File Download Diff File

2
src/components/dialog/searchTrackDialog.vue
Unescape Escape View File

@ -2,7 +2,7 @@
<el-dialog
:title="title"
:visible.sync="isDialogVisible"
width="50%"
width="80%"
@close="handleClose"
>
<div>

554
src/components/tabbar/navbar.vue
Unescape Escape View File

@ -1,44 +1,72 @@
<template>
<div>
<div v-if="color==='white'" class=" navbar-white">
<!-- <video autoplay muted playsinline>
<div>
<div v-if="color === 'white'" class="navbar-white">
<!-- <video autoplay muted playsinline>
<source src="@/assets/video/headBack.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> -->
<!-- START NAVBAR fixed-top -->
<div class="navbarHeight">
<nav style="position: relative;" class=" navbar navbar-expand-lg navbar-custom sticky sticky-dark" id="navbar">
<div class="flx-align" style="width: 100%;height: 76px;position: absolute;top: 0;left: 0;">
<!-- START NAVBAR fixed-top -->
<div class="navbarHeight">
<nav
style="position: relative"
class="navbar navbar-expand-lg navbar-custom sticky sticky-dark"
id="navbar"
>
<div
class="flx-align"
style="
width: 100%;
height: 76px;
position: absolute;
top: 0;
left: 0;
"
>
<!-- LOGO -->
<div>
<a href="/newsHome">
<img style="width: 150px;" :src="$ossUrl+'images/home/logo_small.png'" />
<img
style="width: 150px"
:src="$ossUrl + 'images/home/logo_small.png'"
/>
</a>
<!-- <button style="margin-top: 100px;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
<!-- <button style="margin-top: 100px;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="mdi mdi-menu"></i>
</button> -->
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav navbar-center" id="mySidenav">
<span class="nav-item">
<router-link class="nav-link" to="/newsHome">首页</router-link>
<router-link class="nav-link" to="/newsHome"
>首页</router-link
>
</span>
<span class="nav-item" >
<router-link class="nav-link" to="/business">业务介绍</router-link>
<span class="nav-item">
<router-link class="nav-link" to="/business"
>业务介绍</router-link
>
</span>
<span class="nav-item">
<router-link class="nav-link" to="/globalNetwork">智联全球</router-link>
<router-link class="nav-link" to="/globalNetwork"
>智联全球</router-link
>
</span>
<span class="nav-item" >
<router-link class="nav-link" to="/platform">战略合作平台</router-link>
<span class="nav-item">
<router-link class="nav-link" to="/platform"
>战略合作平台</router-link
>
</span>
<span class="nav-item" >
<router-link class="nav-link" to="/about">关于我们</router-link>
<span class="nav-item">
<router-link class="nav-link" to="/about"
>关于我们</router-link
>
</span>
<span class="nav-item" >
<router-link class="nav-link" to="/developmentDocking">开发对接</router-link>
<span class="nav-item">
<router-link class="nav-link" to="/developmentDocking"
>开发对接</router-link
>
</span>
<!-- Additional links omitted for brevity -->
</div>
@ -50,152 +78,180 @@
</div>
</div> -->
</div>
<div class="nav-people" >
<img style="margin-right: 20px;cursor: pointer;" :src="$ossUrl+'images/home/search.png'" @click="showDialog"/>
<img :src="$ossUrl+'images/home/people.png'" alt="logo" class="logo-light" @click="goClient"/>
<div class="nav-people">
<img
style="margin-right: 20px; cursor: pointer"
:src="$ossUrl + 'images/home/search.png'"
@click="showDialog"
/>
<img
:src="$ossUrl + 'images/home/people.png'"
alt="logo"
class="logo-light"
@click="goClient"
/>
</div>
</div>
</nav>
</div>
<!-- <div class="container" style='position:relative'>
</div>
<!-- <div class="container" style='position:relative'>
<div class="titleImages" v-show="show"></div>
<div class="goodImages" v-show="show"></div>
<div class="fontImages" v-show="show"></div>
</div> -->
</div>
<div v-else-if="color==='black'" class="navbarHeightWhite">
<nav style="position: relative;" class="navbar nav-white navbar-expand-lg navbar-custom sticky sticky-dark" id="navbar">
<div class="flx-align" style="width: 100%;height: 76px;position: absolute;top: 0;left: 0;">
<!-- LOGO -->
<div>
<a href="/newsHome">
<img style="width: 150px;" :src="$ossUrl+'images/home/logo_small_black.png'" />
</a>
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse1" data-target="#navbarCollapse1"
</div>
<div v-else-if="color === 'black'" class="navbarHeightWhite">
<nav
style="position: relative"
class="navbar nav-white navbar-expand-lg navbar-custom sticky sticky-dark"
id="navbar"
>
<div
class="flx-align"
style="width: 100%; height: 76px; position: absolute; top: 0; left: 0"
>
<!-- LOGO -->
<div>
<a href="/newsHome">
<img
style="width: 150px"
:src="$ossUrl + 'images/home/logo_small_black.png'"
/>
</a>
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse1" data-target="#navbarCollapse1"
aria-controls="navbarCollapse1" aria-expanded="false" aria-label="Toggle navigation">
<i class="mdi mdi-menu"></i>
</button> -->
</div>
<div class="collapse1 navbar-collapse" id="navbarCollapse1">
<div class="navbar-nav navbar-center" id="mySidenav1">
<span class="nav-item">
<router-link class="nav-link" to="/newsHome">首页</router-link>
</span>
<span class="nav-item" >
<router-link class="nav-link" to="/business">业务介绍</router-link>
</span>
<span class="nav-item">
<router-link class="nav-link" to="/globalNetwork">智联全球</router-link>
</span>
<span class="nav-item" >
<router-link class="nav-link" to="/platform">战略合作平台</router-link>
</span>
<span class="nav-item" >
<router-link class="nav-link" to="/about">关于我们</router-link>
</span>
<span class="nav-item" >
<router-link class="nav-link" to="/developmentDocking">开发对接</router-link>
</span>
<!-- Additional links omitted for brevity -->
</div>
<!-- <div class="nav-button ">
</div>
<div class="collapse1 navbar-collapse" id="navbarCollapse1">
<div class="navbar-nav navbar-center" id="mySidenav1">
<span class="nav-item">
<router-link class="nav-link" to="/newsHome">首页</router-link>
</span>
<span class="nav-item">
<router-link class="nav-link" to="/business"
>业务介绍</router-link
>
</span>
<span class="nav-item">
<router-link class="nav-link" to="/globalNetwork"
>智联全球</router-link
>
</span>
<span class="nav-item">
<router-link class="nav-link" to="/platform"
>战略合作平台</router-link
>
</span>
<span class="nav-item">
<router-link class="nav-link" to="/about">关于我们</router-link>
</span>
<span class="nav-item">
<router-link class="nav-link" to="/developmentDocking"
>开发对接</router-link
>
</span>
<!-- Additional links omitted for brevity -->
</div>
<!-- <div class="nav-button ">
<div class="nav navbar-nav navbar-right">
<span>
<button type="button" class="btn btn-custom navbar-btn btn-rounded">Try it Free</button>
</span>
</div>
</div> -->
</div>
<div class="nav-people" >
<img style="margin-right: 20px;cursor: pointer;" :src="$ossUrl+'images/home/search_black.png'" @click="showDialog"/>
<img :src="$ossUrl+'images/home/people_black.png'" alt="logo" class="logo-light" @click="goClient"/>
</div>
</div>
</nav>
</div>
<div class="nav-people">
<img
style="margin-right: 20px; cursor: pointer"
:src="$ossUrl + 'images/home/search_black.png'"
@click="showDialog"
/>
<img
:src="$ossUrl + 'images/home/people_black.png'"
alt="logo"
class="logo-light"
@click="goClient"
/>
</div>
</div>
<DialogContent
:isDialogVisible.sync="dialogVisible"
title="请输入要查询的轨迹信息并按下键盘“←┘”"
@confirm="handleConfirm"
@cancel="handleCancel"
</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"
>
<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>
<el-input
placeholder="请输入"
v-model="orderNo"
style="width: 60%"
@keyup.enter.native="handleConfirm"
></el-input>
<div style="width: 100%">
<el-table :data="orderNos" style="width: 100%" @expand-change="handleExpand">
<el-table-column type="expand">
<template #default="props">
<div v-if="rawData[props.row.orderNo]">
<el-timeline>
<el-timeline-item
v-for="(it, inx) in rawData[props.row.orderNo].data"
:key="inx"
:timestamp="it.eventTime"
:color="'black'"
placement="bottom"
>
<div class="timeline-content">
<div>{{ it.content }}</div>
</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: [
</el-timeline-item>
</el-timeline>
</div><span>暂无数据</span>
</template>
</el-table-column>
<el-table-column label="订单号" prop="orderNo" />
</el-table>
<el-row style="margin-top: 30px; display: flex; flex-wrap: wrap">
<el-col :span="24">
</el-col>
</el-row>
</div>
</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: "",
orderNos: [],
rawData: [],
showMore: false,
currentIndex: 0,
timelineData: [
// {
// main: { info: "已派送到目的地", time: "2024-07-24 15:22:05" },
// color: "green",
@ -232,101 +288,133 @@
// subItems: [],
// showMore: false
// }
]
};
],
};
},
created() {
// this.timelineData = this.transformData(this.rawData);
},
mounted() {
this.setColor();
// console.log('路由变化了', to.path,this.color);
},
methods: {
setColor() {
if (this.path !== "/newsHome") {
this.color = "black";
} else {
this.color = "white";
}
},
created() {
// this.timelineData = this.transformData(this.rawData);
handleExpand(row, expandedRows) {
// 如果没有该订单号的数据，自动调用接口加载数据
console.log('111111111')
if (!this.rawData[row.orderNo]) {
this.loadOrderData(row.orderNo);
}
},
goClient() {
window.location.href = `http://56carrier.com:80/#/home/index`;
},
mounted() {
this.setColor()
// console.log('路由变化了', to.path,this.color);
showDialog() {
this.dialogVisible = true;
},
methods: {
setColor() {
if(
this.path !=='/newsHome'
) {
this.color = 'black';
}else {
this.color = 'white';
}
},
goClient(){
window.location.href= `http://56carrier.com:80/#/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 => ({
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 => ({
color: "", // 可以根据业务需求定义颜色映射
showMore: false,
subItems: rawData[key].map((event) => ({
info: event.info,
time: event.time
}))
time: event.time,
})),
}));
}
,
fetchOrderTrack() {
if (!this.orderNo) {
console.error('Order number is not set.');
},
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 => {
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);
});
// 拆分订单号并初始化状态
this.orderNos = this.orderNo.split(/[\s,]+/).filter(Boolean);
this.orderNos = this.orderNos.map((it)=>{
return {
orderNo:it
}
})
console.warn("订单号列表为空，无法发送请求。", this.orderNos);
},
// 加载单个订单号的数据
loadOrderData(item,index) {
const orderNo = this.orderNos[index]; // 当前订单号
console.log(`加载订单号 ${orderNo} 数据...`);
// "http://192.168.12.36:9081/v1/v1/track/aafOrderTrack/getTrackInfo",
axios
.get(
"http://56carrier.com:81/v1/track/aafOrderTrack/getTrackInfo",
{
params: {
orderNo: item,
custVisible: "1",
},
}
)
.then((response) => {
if (response.data.code === 200) {
this.$set(this.rawData, item, {
data: response.data.data, // The actual timeline data
});
// this.rawData = response.data.data; // 添加到数据列表
console.log(
`订单号 ${orderNo} 的数据加载成功:`,
response.data.data
);
} else {
console.warn(
`订单号 ${orderNo} 返回错误:`,
response.data.message || "未知错误"
);
}
})
.catch((error) => {
console.error(`订单号 ${orderNo} 请求失败:`, error);
});
},
watch: {
'$route'(to, from) {
// console.log(from,to,'from')
// 路由变化时调用
if(to.path ==='/newsHome') {
this.color = 'white';
}else {
this.color = 'black';
}
// if(from.path === '/developmentDocking/main'){
// window.location()
// }
}
}
};
</script>
<style>
@import "./styles/navbar.css"
</style>
// 点击“更多”时加载下一个订单号
clickMore(item,index) {
console.log('点击“更多”时加载下一个订单号',item,index)
this.loadOrderData(item,index); // If data not loaded, load it
this.$set(this.showData,index,true); // Toggle visibility
},
},
watch: {
$route(to, from) {
// console.log(from,to,'from')
// 路由变化时调用
if (to.path === "/newsHome") {
this.color = "white";
} else {
this.color = "black";
}
},
},
};
</script>
<style>
@import "./styles/navbar.css";
</style>
Write Preview
Loading…
Cancel
Save