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 <el-dialog
:title="title" :title="title"
:visible.sync="isDialogVisible" :visible.sync="isDialogVisible"
width="50%" width="80%"
@close="handleClose" @close="handleClose"
> >
<div> <div>

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

@ -7,12 +7,28 @@
</video> --> </video> -->
<!-- START NAVBAR fixed-top --> <!-- START NAVBAR fixed-top -->
<div class="navbarHeight"> <div class="navbarHeight">
<nav style="position: relative;" class=" navbar navbar-expand-lg navbar-custom sticky sticky-dark" id="navbar"> <nav
<div class="flx-align" style="width: 100%;height: 76px;position: absolute;top: 0;left: 0;"> 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 --> <!-- LOGO -->
<div> <div>
<a href="/newsHome"> <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> </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"> aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
@ -23,22 +39,34 @@
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav navbar-center" id="mySidenav"> <div class="navbar-nav navbar-center" id="mySidenav">
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/newsHome">首页</router-link> <router-link class="nav-link" to="/newsHome"
>首页</router-link
>
</span> </span>
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/business">业务介绍</router-link> <router-link class="nav-link" to="/business"
>业务介绍</router-link
>
</span> </span>
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/globalNetwork">智联全球</router-link> <router-link class="nav-link" to="/globalNetwork"
>智联全球</router-link
>
</span> </span>
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/platform">战略合作平台</router-link> <router-link class="nav-link" to="/platform"
>战略合作平台</router-link
>
</span> </span>
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/about">关于我们</router-link> <router-link class="nav-link" to="/about"
>关于我们</router-link
>
</span> </span>
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/developmentDocking">开发对接</router-link> <router-link class="nav-link" to="/developmentDocking"
>开发对接</router-link
>
</span> </span>
<!-- Additional links omitted for brevity --> <!-- Additional links omitted for brevity -->
</div> </div>
@ -51,8 +79,17 @@
</div> --> </div> -->
</div> </div>
<div class="nav-people"> <div class="nav-people">
<img style="margin-right: 20px;cursor: pointer;" :src="$ossUrl+'images/home/search.png'" @click="showDialog"/> <img
<img :src="$ossUrl+'images/home/people.png'" alt="logo" class="logo-light" @click="goClient"/> 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>
</div> </div>
</nav> </nav>
@ -65,14 +102,22 @@
</div> --> </div> -->
</div> </div>
<div v-else-if="color === 'black'" class="navbarHeightWhite"> <div v-else-if="color === 'black'" class="navbarHeightWhite">
<nav
style="position: relative"
<nav style="position: relative;" class="navbar nav-white navbar-expand-lg navbar-custom sticky sticky-dark" id="navbar"> class="navbar nav-white navbar-expand-lg navbar-custom sticky sticky-dark"
<div class="flx-align" style="width: 100%;height: 76px;position: absolute;top: 0;left: 0;"> id="navbar"
>
<div
class="flx-align"
style="width: 100%; height: 76px; position: absolute; top: 0; left: 0"
>
<!-- LOGO --> <!-- LOGO -->
<div> <div>
<a href="/newsHome"> <a href="/newsHome">
<img style="width: 150px;" :src="$ossUrl+'images/home/logo_small_black.png'" /> <img
style="width: 150px"
:src="$ossUrl + 'images/home/logo_small_black.png'"
/>
</a> </a>
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse1" data-target="#navbarCollapse1" <!-- <button class="navbar-toggler" type="button" data-toggle="collapse1" data-target="#navbarCollapse1"
aria-controls="navbarCollapse1" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navbarCollapse1" aria-expanded="false" aria-label="Toggle navigation">
@ -86,19 +131,27 @@
<router-link class="nav-link" to="/newsHome">首页</router-link> <router-link class="nav-link" to="/newsHome">首页</router-link>
</span> </span>
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/business">业务介绍</router-link> <router-link class="nav-link" to="/business"
>业务介绍</router-link
>
</span> </span>
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/globalNetwork">智联全球</router-link> <router-link class="nav-link" to="/globalNetwork"
>智联全球</router-link
>
</span> </span>
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/platform">战略合作平台</router-link> <router-link class="nav-link" to="/platform"
>战略合作平台</router-link
>
</span> </span>
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/about">关于我们</router-link> <router-link class="nav-link" to="/about">关于我们</router-link>
</span> </span>
<span class="nav-item"> <span class="nav-item">
<router-link class="nav-link" to="/developmentDocking">开发对接</router-link> <router-link class="nav-link" to="/developmentDocking"
>开发对接</router-link
>
</span> </span>
<!-- Additional links omitted for brevity --> <!-- Additional links omitted for brevity -->
</div> </div>
@ -111,46 +164,68 @@
</div> --> </div> -->
</div> </div>
<div class="nav-people"> <div class="nav-people">
<img style="margin-right: 20px;cursor: pointer;" :src="$ossUrl+'images/home/search_black.png'" @click="showDialog"/> <img
<img :src="$ossUrl+'images/home/people_black.png'" alt="logo" class="logo-light" @click="goClient"/> 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>
</div> </div>
</nav> </nav>
</div> </div>
<DialogContent <DialogContent
:isDialogVisible.sync="dialogVisible" :isDialogVisible.sync="dialogVisible"
title="请输入要查询的轨迹信息并按下键盘“←┘”" title="请输入要查询的轨迹信息并按下键盘“←┘”"
@confirm="handleConfirm" @confirm="handleConfirm"
@cancel="handleCancel" @cancel="handleCancel"
> >
<template v-slot> <template v-slot>
<div class="scrollable-container" style="min-height: 200px;max-height: 500px;"> <div
<el-input placeholder="请输入" v-model="orderNo" style="width: 60%;" @keyup.enter.native="handleConfirm"></el-input> 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>
<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>
<el-timeline-item <el-timeline-item
v-for="(item, index) in timelineData" v-for="(it, inx) in rawData[props.row.orderNo].data"
:key="index" :key="inx"
:timestamp="item.main.time" :timestamp="it.eventTime"
:color="item.color" :color="'black'"
placement="bottom" placement="bottom"
> >
<div class="timeline-content"> <div class="timeline-content">
<div>{{ item.main.info }}</div> <div>{{ it.content }}</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> </div>
</el-timeline-item> </el-timeline-item>
</el-timeline> </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> </div>
</template> </template>
</DialogContent> </DialogContent>
@ -158,43 +233,24 @@
</template> </template>
<script> <script>
import DialogContent from '../dialog/searchTrackDialog.vue'; import DialogContent from "../dialog/searchTrackDialog.vue";
import axios from 'axios'; import axios from "axios";
export default { export default {
name: 'Navbar', name: "Navbar",
components: { components: {
DialogContent DialogContent,
}, },
data() { data() {
return { return {
color: 'white', color: "white",
path: this.$route.path, path: this.$route.path,
dialogVisible: false, dialogVisible: false,
orderNo:'', orderNo: "",
rawData: { orderNos: [],
// "ZSBL2407090170": [ rawData: [],
// { info: "已派送到目的地", time: "2024-07-24 15:22:05" }, showMore: false,
// { info: "预约送亚马逊仓库时间：2024-7-24", time: "2024-07-23 18:23:16" }, currentIndex: 0,
// { 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: [ timelineData: [
// { // {
// main: { info: "已派送到目的地", time: "2024-07-24 15:22:05" }, // main: { info: "已派送到目的地", time: "2024-07-24 15:22:05" },
@ -232,101 +288,133 @@
// subItems: [], // subItems: [],
// showMore: false // showMore: false
// } // }
] ],
}; };
}, },
created() { created() {
// this.timelineData = this.transformData(this.rawData); // this.timelineData = this.transformData(this.rawData);
}, },
mounted() { mounted() {
this.setColor() this.setColor();
// console.log('路由变化了', to.path,this.color); // console.log('路由变化了', to.path,this.color);
}, },
methods: { methods: {
setColor() { setColor() {
if( if (this.path !== "/newsHome") {
this.path !=='/newsHome' this.color = "black";
) {
this.color = 'black';
} else { } else {
this.color = 'white'; this.color = "white";
}
},
handleExpand(row, expandedRows) {
// 如果没有该订单号的数据，自动调用接口加载数据
console.log('111111111')
if (!this.rawData[row.orderNo]) {
this.loadOrderData(row.orderNo);
} }
}, },
goClient() { goClient() {
window.location.href= `http://56carrier.com:80/#/home/index` window.location.href = `http://56carrier.com:80/#/home/index`;
}, },
showDialog() { showDialog() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
handleConfirm() { handleConfirm() {
// console.log('确认操作'); // console.log('确认操作');
this.fetchOrderTrack() this.fetchOrderTrack();
}, },
handleCancel() { handleCancel() {
// console.log('取消操作'); // console.log('取消操作');
this.dialogVisible = false; this.dialogVisible = false;
}, },
transformData(rawData) { transformData(rawData) {
return Object.keys(rawData).map(key => ({ return Object.keys(rawData).map((key) => ({
main: { info: key }, main: { info: key },
color: '', // 可以根据业务需求定义颜色映射 color: "", // 可以根据业务需求定义颜色映射
showMore: false, showMore: false,
subItems: rawData[key].map(event => ({ subItems: rawData[key].map((event) => ({
info: event.info, info: event.info,
time: event.time time: event.time,
})) })),
})); }));
} },
,
fetchOrderTrack() { fetchOrderTrack() {
if (!this.orderNo) { if (!this.orderNo) {
console.error('Order number is not set.'); console.error("Order number is not set.");
return; return;
} }
axios.get('https://track.szaaf.com:8089/trajectory/index', {
// axios.get('http://192.168.10.62:8088/api/sync/xzh/order/getTrackNew', { // 拆分订单号并初始化状态
params: { this.orderNos = this.orderNo.split(/[\s,]+/).filter(Boolean);
orderNo: this.orderNo // 设置请求的查询参数 this.orderNos = this.orderNos.map((it)=>{
return {
orderNo:it
} }
}) })
.then(response => { 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) { if (response.data.code === 200) {
this.rawData = response.data.data; this.$set(this.rawData, item, {
// this.timelineData = this.transformData(this.rawData); data: response.data.data, // The actual timeline data
this.timelineData = this.transformData(this.rawData); });
// this.rawData = response.data.data; // 添加到数据列表
console.log(
`订单号 ${orderNo} 的数据加载成功:`,
response.data.data
);
} else { } else {
this.rawData = {} console.warn(
`订单号 ${orderNo} 返回错误:`,
response.data.message || "未知错误"
);
} }
}) })
.catch(error => { .catch((error) => {
console.error('请求失败:', error); console.error(`订单号 ${orderNo} 请求失败:`, error);
}); });
}, },
// 点击“更多”时加载下一个订单号
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: { watch: {
'$route'(to, from) { $route(to, from) {
// console.log(from,to,'from') // console.log(from,to,'from')
// 路由变化时调用 // 路由变化时调用
if(to.path ==='/newsHome') { if (to.path === "/newsHome") {
this.color = 'white'; this.color = "white";
} else { } else {
this.color = 'black'; this.color = "black";
}
// if(from.path === '/developmentDocking/main'){
// window.location()
// }
}
} }
},
},
}; };
</script> </script>
<style> <style>
@import "./styles/navbar.css" @import "./styles/navbar.css";
</style> </style>
Write Preview
Loading…
Cancel
Save