From 50dd86837ac673a68684c6be085804a34fe6cbbe Mon Sep 17 00:00:00 2001
From: lml <2367212933@qq.com>
Date: Mon, 13 Jan 2025 15:39:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=98=E7=BD=91=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dialog/searchTrackDialog.vue |   2 +-
 src/components/tabbar/navbar.vue            | 554 ++++++++++++--------
 2 files changed, 322 insertions(+), 234 deletions(-)

diff --git a/src/components/dialog/searchTrackDialog.vue b/src/components/dialog/searchTrackDialog.vue
index ae6e8d0..84b5853 100644
--- a/src/components/dialog/searchTrackDialog.vue
+++ b/src/components/dialog/searchTrackDialog.vue
@@ -2,7 +2,7 @@
     <el-dialog
       :title="title"
       :visible.sync="isDialogVisible"
-      width="50%"
+      width="80%"
       @close="handleClose"
     >
       <div>
diff --git a/src/components/tabbar/navbar.vue b/src/components/tabbar/navbar.vue
index 45d376a..2947274 100644
--- a/src/components/tabbar/navbar.vue
+++ b/src/components/tabbar/navbar.vue
@@ -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>
 
-  
\ No newline at end of file
+    // 点击“更多”时加载下一个订单号
+    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>
\ No newline at end of file