feat: 调整详情页箭头，Tracking详情页ams/isf抽屉接入接口

src/api/module/tracking.ts

@@ -47,3 +47,18 @@ export const getTrackingDetail = (params: any, config: any) => {
     config
   )
 }
+
+/**
+ * 获取Tracking详情页中AMS/ISF表格数据
+ */
+export const getTrackingAmsIsf = (params: any, config: any) => {
+  return HttpAxios.get(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'ams_isf_log',
+      ...params
+    },
+    config
+  )
+}

src/views/Booking/src/components/BookingDetail/src/BookingDetail.vue

@@ -104,19 +104,30 @@ const formatTime = (time: string) => {
       </div>
       <div class="detail-info">
         <div class="item transport-way">
-          <div class="place">
+          <div class="origin">
             <div class="title">Origin</div>
             <div class="content">
-              <span>{{ allData?.transportInfo?.origin }}</span>
+              <!-- <span>{{ allData?.transportInfo?.origin }}</span> -->
+              <el-tooltip placement="top">
+                <template #content>{{ allData?.transportInfo?.origin }}</template>
+                <span class="info single-line-ellipsis">{{ allData?.transportInfo?.origin }}</span>
+              </el-tooltip>
               <div class="line_container">
                 <hr color="#000000" />
                 <div class="right-icon"></div>
               </div>
             </div>
           </div>
-          <div class="place">
+          <div class="destination">
             <div class="title">Destination</div>
-            <div class="content">{{ allData?.transportInfo?.destination }}</div>
+            <div class="content">
+              <el-tooltip placement="top">
+                <template #content>{{ allData?.transportInfo?.destination }}</template>
+                <span class="info single-line-ellipsis">{{
+                  allData?.transportInfo?.destination
+                }}</span>
+              </el-tooltip>
+            </div>
           </div>
         </div>
         <div class="item">
@@ -256,8 +267,15 @@ const formatTime = (time: string) => {
         flex-direction: row;
         justify-content: flex-start;
         gap: 16px;
-        .place {
-          flex: 1;
+        max-width: 500px;
+        .origin {
+          width: 60%;
+        }
+        .destination {
+          width: 40%;
+          .info {
+            width: calc(100% - 16px);
+          }
         }
         .title {
           margin-top: 11px;
@@ -273,6 +291,7 @@ const formatTime = (time: string) => {
           .line_container {
             flex: 1;
             position: relative;
+            min-width: 26px;
             margin-left: 16px;
           }
           .line_container hr {
@@ -329,4 +348,11 @@ const formatTime = (time: string) => {
     color: var(--color-neutral-1);
   }
 }
+
+.single-line-ellipsis {
+  display: inline-block; /* 或者根据需要使用 inline-block */
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
 </style>

src/views/Booking/src/components/BookingDetail/src/components/BasicInformation.vue

@@ -269,12 +269,14 @@ const handLink = (id: string) => {
 }
 
 const handleCopy = (data: any) => {
-  const sanitizedData = data.map((item: string) =>
-    item
-      .replace(/[\r\n]+/g, ' ')
-      .replace(/\s+/g, ' ')
-      .trim()
-  ) // 用空格替换换行符
+  const sanitizedData = data.map((item: string) => {
+    return item
+      ? item
+          .replace(/[\r\n]+/g, ' ')
+          .replace(/\s+/g, ' ')
+          .trim()
+      : ''
+  }) // 用空格替换换行符
   const copyText = sanitizedData.join('\n') // 拼接为单行文本
   if (XEClipboard.copy(copyText)) {
     ElMessage.success('Copy success')

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -72,7 +72,6 @@ const getTableColumns = async (isInit: boolean) => {
     if (res.code === 200) {
       bookingTable.value.columns = [
         { type: 'checkbox', width: 50, fixed: 'left' },
-        { field: '__serial_no', title: 'serial_no', width: 300, fixed: 'left' },
         ...handleColumns(res.data.BookingTableColumns)
       ]
       tableOriginColumnsField.value = res.data.BookingTableColumns

src/views/Layout/src/components/Menu/MenuView.vue

@@ -71,7 +71,6 @@ const menuList = [
 const handler = () => {
   return (() => {
     let screenWidth = document.body.clientWidth
-    let screenHeight = document.body.clientHeight
     if (screenWidth < 1400) {
       isCollapse.value = true
     } else {

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -80,7 +80,7 @@ const handleEmailDrawer = () => {
 
 const AMSISFDrawerRef = ref()
 const handleAMSISF = () => {
-  AMSISFDrawerRef.value.openDrawer()
+  AMSISFDrawerRef.value.openDrawer(allData.value)
 }
 
 const allData = ref()
@@ -134,19 +134,30 @@ const formatTime = (time: string) => {
       </div>
       <div class="detail-info">
         <div class="item transport-way">
-          <div class="place">
+          <div class="origin">
             <div class="title">Origin</div>
             <div class="content">
-              <span>{{ allData?.transportInfo?.origin }}</span>
+              <el-tooltip placement="top">
+                <template #content>{{ allData?.transportInfo?.origin }}</template>
+                <span class="info single-line-ellipsis">{{ allData?.transportInfo?.origin }}</span>
+              </el-tooltip>
+
               <div class="line_container">
                 <hr color="#000000" />
                 <div class="right-icon"></div>
               </div>
             </div>
           </div>
-          <div class="place">
+          <div class="destination">
             <div class="title">Destination</div>
-            <div class="content">{{ allData?.transportInfo?.destination }}</div>
+            <div class="content">
+              <el-tooltip placement="top">
+                <template #content>{{ allData?.transportInfo?.destination }}</template>
+                <span class="info single-line-ellipsis">{{
+                  allData?.transportInfo?.destination
+                }}</span>
+              </el-tooltip>
+            </div>
           </div>
         </div>
         <div class="item">
@@ -333,8 +344,15 @@ const formatTime = (time: string) => {
         flex-direction: row;
         justify-content: flex-start;
         gap: 16px;
-        .place {
-          flex: 1;
+        max-width: 500px;
+        .origin {
+          width: 60%;
+        }
+        .destination {
+          width: 40%;
+          .info {
+            width: calc(100% - 16px);
+          }
         }
         .title {
           margin-top: 11px;
@@ -347,9 +365,12 @@ const formatTime = (time: string) => {
           font-size: 18px;
           font-weight: 700;
           color: var(--color-neutral-1);
+          width: 100%;
+
           .line_container {
             flex: 1;
             position: relative;
+            min-width: 26px;
             margin-left: 16px;
           }
           .line_container hr {
@@ -387,7 +408,6 @@ const formatTime = (time: string) => {
 }
 .fallback-class {
   opacity: 1 !important;
-  // background-color: #fff1e5 !important;
   cursor: move !important;
   background-color: #fff;
   box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.2);
@@ -415,4 +435,11 @@ const formatTime = (time: string) => {
     color: var(--color-neutral-1);
   }
 }
+
+.single-line-ellipsis {
+  display: inline-block; /* 或者根据需要使用 inline-block */
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
 </style>

src/views/Tracking/src/components/TrackingDetail/src/components/AMS&ISF.vue

@@ -3,9 +3,28 @@ import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
 import dayjs from 'dayjs'
 
 const drawer = ref(false)
-const openDrawer = () => {
+const openDrawer = (data: any) => {
+  getData(data)
   drawer.value = true
 }
+const getData = (data: any) => {
+  $api
+    .getTrackingAmsIsf({
+      ams_ss: data.ams_ss,
+      isf_ss: data.isf_ss,
+      _schemas: data._schemas
+    })
+    .then((res: any) => {
+      console.log(res)
+      if (res.code === 200) {
+        const { amsLog, isfLog } = res.data
+        AMSTableData.value.columns = amsLog.amsLog_column
+        AMSTableData.value.data = amsLog.data
+        ISFTableData.value.columns = isfLog.isfLog_column
+        ISFTableData.value.data = res.data.isf
+      }
+    })
+}
 
 const AMSTableRef = ref<VxeGridInstance | null>(null)
 const AMSTableData = ref<VxeGridProps<any>>({
@@ -13,43 +32,8 @@ const AMSTableData = ref<VxeGridProps<any>>({
   round: true,
   minHeight: 70,
   maxHeight: 500,
-  columns: [
-    {
-      field: 'dateTime',
-      title: 'Date Time',
-      width: 217
-    },
-    {
-      field: 'code',
-      title: 'Code',
-      width: 185
-    },
-    {
-      field: 'name',
-      title: 'Name',
-      width: 230
-    },
-    {
-      field: 'description',
-      title: 'Description',
-      minWidth: 330
-    }
-  ],
-  data: [
-    {
-      dateTime: 'Jun-08-2024 12:00 AM',
-      code: 'Code 1',
-      name: 'Name 1',
-      description:
-        "A term commonly used in business transactions, particularly in the realm of recurring payments. It essentially means that a customer's payment information, such as a credit card number, expiration date, and CVV,"
-    },
-    {
-      dateTime: 'Jun-10-2024 12:00 AM',
-      code: 'Code 2',
-      name: 'Name 2',
-      description: 'Description 2'
-    }
-  ],
+  columns: [],
+  data: [],
   scrollY: { enabled: true, oSize: 20, gt: 30 },
   stripe: true,
   emptyText: ' ',
@@ -80,42 +64,8 @@ const ISFTableData = ref<VxeGridProps<any>>({
   round: true,
   minHeight: 70,
   maxHeight: 500,
-  columns: [
-    {
-      field: 'dateTime',
-      title: 'Date Time',
-      width: 217
-    },
-    {
-      field: 'code',
-      title: 'Code',
-      width: 185
-    },
-    {
-      field: 'name',
-      title: 'Name',
-      width: 230
-    },
-    {
-      field: 'description',
-      title: 'Description',
-      minWidth: 330
-    }
-  ],
-  data: [
-    {
-      milestones: 'Milestone 1',
-      dateTime: 'Jun-08-2024 12:00 AM',
-      locations: 'Shenzhen',
-      remarks: 'Remarks 1'
-    },
-    {
-      milestones: 'Milestone 2',
-      dateTime: 'Jun-10-2024 12:00 AM',
-      locations: 'Valencia',
-      remarks: 'Remarks 2'
-    }
-  ],
+  columns: [],
+  data: [],
   scrollY: { enabled: true, oSize: 20, gt: 30 },
   stripe: true,
   emptyText: ' ',
@@ -153,7 +103,12 @@ defineExpose({
           <span class="font_family icon-icon_export_b"></span>
         </el-button>
       </div>
-      <vxe-grid ref="AMSTableRef" class="radius-bottom" :style="{ border: 'none' }" v-bind="AMSTableData">
+      <vxe-grid
+        ref="AMSTableRef"
+        class="radius-bottom"
+        :style="{ border: 'none' }"
+        v-bind="AMSTableData"
+      >
       </vxe-grid>
       <div class="label">
         <span>ISF Log</span>
@@ -161,7 +116,12 @@ defineExpose({
           <span class="font_family icon-icon_export_b"></span>
         </el-button>
       </div>
-      <vxe-grid class="radius-bottom" ref="ISFTableRef" :style="{ border: 'none' }" v-bind="ISFTableData">
+      <vxe-grid
+        class="radius-bottom"
+        ref="ISFTableRef"
+        :style="{ border: 'none' }"
+        v-bind="ISFTableData"
+      >
       </vxe-grid>
     </div>
   </el-drawer>

src/views/Tracking/src/components/TrackingDetail/src/components/BasicInformation.vue

@@ -215,12 +215,14 @@ const handLink = (id: string) => {
 
 // 复制文本
 const handleCopy = (data: any) => {
-  const sanitizedData = data.map((item: string) =>
-    item
-      .replace(/[\r\n]+/g, ' ')
-      .replace(/\s+/g, ' ')
-      .trim()
-  ) // 用空格替换换行符
+  const sanitizedData = data.map((item: string) => {
+    return item
+      ? item
+          .replace(/[\r\n]+/g, ' ')
+          .replace(/\s+/g, ' ')
+          .trim()
+      : ''
+  }) // 用空格替换换行符
   const copyText = sanitizedData.join('\n') // 拼接为单行文本
   if (XEClipboard.copy(copyText)) {
     ElMessage.success('Copy success')

src/views/Tracking/src/components/TrackingDetail/src/components/MapView.vue

@@ -36,7 +36,7 @@ const initMap = () => {
       <p class="label">origin</p>
       <p>
         <span class="font_family icon-icon_location_fill_b" style="color: #ED6D00"></span>
-        ShenZhen,SG
+        <span>ShenZhen,SG</span>
       </p>
     </div>
   `
@@ -57,10 +57,12 @@ onMounted(() => {
 }
 .leaflet-popup-content {
   padding: 4px;
+  padding-right: 8px;
   margin: 0;
   .popup-content {
     p {
       margin: 0;
+      white-space: nowrap;
       span {
         margin-left: -2px;
         font-size: 12px;

src/views/Tracking/src/components/TrackingDetail/src/components/RoutesView.vue

@@ -7,8 +7,8 @@ const routes: any = ref([
   {
     serialNumber: 'Leg 1',
     mode: 'Sea',
-    origin: 'ShenzhenShwe',
-    destination: 'Valenciaenzq',
+    origin: 'ShenzhenShw',
+    destination: 'ShenzhenS',
     etd: 'Jun-08-2024 12:00 AM',
     atd: 'Jun-10-2024 12:00 AM',
     eta: 'Jun-14-2024 12:00 AM',
@@ -21,7 +21,7 @@ const routes: any = ref([
     serialNumber: 'Leg 2',
     mode: 'Sea',
     origin: 'Valenciaenz',
-    destination: 'New York',
+    destination: 'ShenzhenShweShenzhenShweShenzhenShweShenzhenShwe',
     etd: 'Jun-15-2024 12:00 AM',
     atd: 'Jun-17-2024 12:00 AM',
     eta: 'Jun-21-2024 12:00 AM',
@@ -50,10 +50,40 @@ watch(
 const formatDate = (date: string) => {
   return date ? dayjs(date).format('MMM-DD-YYYY HH:mm A') : '--'
 }
+
+const basicDesWidth = ref('180px')
+const detailDesWidth = ref('220px')
+
+const getContainerWidth = () => {
+  let screenWidth = document.body.clientWidth
+  if (screenWidth < 1300) {
+    basicDesWidth.value = '180px'
+    detailDesWidth.value = '220px'
+  } else if (screenWidth < 1500) {
+    basicDesWidth.value = '220px'
+    detailDesWidth.value = '240px'
+  } else {
+    basicDesWidth.value = '240px'
+    detailDesWidth.value = '260px'
+  }
+}
+onMounted(() => {
+  getContainerWidth()
+  window.addEventListener('resize', getContainerWidth)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', getContainerWidth)
+})
 </script>
 
 <template>
-  <div class="routes-view">
+  <div
+    class="routes-view"
+    :style="{
+      '--basic-destination-width': basicDesWidth,
+      '--detail-destination-width': detailDesWidth
+    }"
+  >
     <div class="title">Total number of legs: {{ routes.length }}</div>
     <div class="routes">
       <div class="route-item" v-for="(item, index) in routes" :key="item.serialNumber">
@@ -67,16 +97,23 @@ const formatDate = (date: string) => {
             <div class="origin">
               <div class="title">Origin</div>
               <div class="content">
-                <span>{{ item.origin }}</span>
+                <el-tooltip placement="top">
+                  <template #content>{{ item.origin }}</template>
+                  <span class="single-line-ellipsis">{{ item.origin }}</span>
+                </el-tooltip>
+
                 <div class="line_container">
                   <hr color="#000000" />
                   <div class="right-icon"></div>
                 </div>
               </div>
             </div>
-            <div class="destination">
+            <div class="destination" ref="">
               <div class="title">Destination</div>
-              <div class="content">{{ item.destination }}</div>
+              <el-tooltip placement="top">
+                <template #content>{{ item.destination }}</template>
+                <div class="content single-line-ellipsis">{{ item.destination }}</div>
+              </el-tooltip>
             </div>
           </div>
           <div class="etd border-right">
@@ -98,7 +135,11 @@ const formatDate = (date: string) => {
             <div class="origin">
               <div class="place">
                 <span style="font-size: 24px" class="font_family icon-icon_location_fill_b"></span>
-                <span class="label">{{ item.origin }}</span>
+
+                <el-tooltip placement="top">
+                  <template #content>{{ item.origin }}</template>
+                  <span class="label single-line-ellipsis">{{ item.origin }}</span>
+                </el-tooltip>
                 <div class="line_container">
                   <hr color="#000000" />
                   <div class="right-icon"></div>
@@ -118,7 +159,11 @@ const formatDate = (date: string) => {
             <div class="destination">
               <div class="place">
                 <span style="font-size: 24px" class="font_family icon-icon_location_fill_b"></span>
-                <span class="label">{{ item.destination }}</span>
+
+                <el-tooltip placement="top">
+                  <template #content>{{ item.destination }}</template>
+                  <span class="label single-line-ellipsis">{{ item.destination }}</span>
+                </el-tooltip>
               </div>
               <div class="eta">
                 <span class="font_family icon-icon_date_b"></span>
@@ -192,31 +237,38 @@ const formatDate = (date: string) => {
       font-size: 40px;
     }
   }
-  .origin {
-    flex: 1;
-  }
 
   .destination {
-    flex-basis: 100px;
+    flex: 1;
+    max-width: calc(var(--basic-destination-width) - 16px);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin-left: 16px;
+    & > div.content {
+      display: inline-block;
+      width: 100%;
+    }
   }
   .place {
-    flex: 1 1 140px;
+    flex: 0 0 40%;
     display: flex;
     align-items: center;
     padding: 0 16px;
+    overflow: hidden;
 
     .title {
       margin-top: 2px;
     }
+    .origin {
+      width: calc(100% - var(--basic-destination-width));
+    }
 
     .content {
       position: relative;
       display: flex;
       align-items: center;
+      width: 100%;
       margin-top: 8px;
       font-size: 18px;
       font-weight: 700;
@@ -251,7 +303,12 @@ const formatDate = (date: string) => {
     gap: 8px;
     padding: 16px;
   }
-
+  .etd {
+    min-width: 180px;
+  }
+  .eta {
+    min-width: 220px;
+  }
   .place,
   .etd,
   .eta {
@@ -271,7 +328,9 @@ const formatDate = (date: string) => {
   gap: 8px;
   padding: 8px;
   border-top: 1px solid var(--color-border);
-
+  .line_container {
+    flex: 1;
+  }
   .line_container hr {
     border-color: #484c52;
     border-top: none;
@@ -286,94 +345,101 @@ const formatDate = (date: string) => {
     width: 10px;
     height: 12px;
   }
-}
-
-.date-info {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 8px 12px;
-  background-color: var(--color-header-bg);
-  border-radius: 6px;
-
-  .origin {
-    flex: 1;
+  .date-info {
     display: flex;
-    flex-direction: column;
     justify-content: space-between;
-  }
-
-  .destination {
-    flex-basis: 200px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    margin-left: 16px;
-  }
-
-  .place {
-    display: flex;
-    align-items: center;
-    gap: 8px;
+    gap: 16px;
+    width: calc(100% - 248px);
+    padding: 12px 8px 12px;
+    background-color: var(--color-header-bg);
+    border-radius: 6px;
+
+    .origin {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
 
-    .label {
-      font-size: 18px;
-      font-weight: 700;
+      min-width: var(--detail-destination-width);
+      max-width: calc(100% - var(--detail-destination-width));
     }
 
-    .content {
-      position: relative;
+    .destination {
+      flex: 1;
+      min-width: calc(var(--detail-destination-width) - 16px);
       display: flex;
-      align-items: center;
-      margin-top: 8px;
-      font-size: 18px;
-      font-weight: 700;
-      color: var(--color-neutral-1);
-    }
-  }
-
-  .etd,
-  .eta,
-  .atd,
-  .ata {
-    display: flex;
-    align-items: center;
-    margin-left: 5px;
-    font-size: 12px;
-    line-height: 16px;
-    color: var(--color-neutral-2);
-
-    .font_family {
-      margin-right: 12px;
+      flex-direction: column;
+      justify-content: space-between;
+      .label {
+        width: calc(100% - 40px);
+      }
     }
 
-    .value {
-      margin-left: 4px;
-      font-weight: 700;
+    .place {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .label {
+        display: inline-block;
+        font-size: 18px;
+        font-weight: 700;
+      }
+
+      .content {
+        position: relative;
+        display: flex;
+        align-items: center;
+        margin-top: 8px;
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--color-neutral-1);
+      }
     }
-  }
-}
 
-.transport-info {
-  width: 288px;
-  padding: 8px 16px;
-  background-color: var(--color-header-bg);
-  border-radius: 6px;
-
-  .item {
-    .title {
-      margin-bottom: 4px;
+    .etd,
+    .eta,
+    .atd,
+    .ata {
+      display: flex;
+      align-items: center;
+      margin-left: 5px;
       font-size: 12px;
+      line-height: 16px;
       color: var(--color-neutral-2);
-    }
 
-    .content {
-      font-weight: 700;
+      .font_family {
+        margin-right: 12px;
+      }
+
+      .value {
+        margin-left: 4px;
+        font-weight: 700;
+      }
     }
+  }
 
-    & + .item {
-      margin-top: 16px;
+  .transport-info {
+    width: 248px;
+    padding: 8px 16px;
+    background-color: var(--color-header-bg);
+    border-radius: 6px;
+
+    .item {
+      .title {
+        margin-bottom: 4px;
+        font-size: 12px;
+        color: var(--color-neutral-2);
+      }
+
+      .content {
+        font-weight: 700;
+      }
+
+      & + .item {
+        margin-top: 16px;
+      }
     }
   }
 }
@@ -384,6 +450,7 @@ const formatDate = (date: string) => {
 
 .line_container {
   flex: 1;
+  min-width: 26px;
   position: relative;
   margin-left: 16px;
 }
@@ -404,4 +471,11 @@ const formatDate = (date: string) => {
   transform: rotate(30deg);
   border-radius: 0 1px 0 0;
 }
+
+.single-line-ellipsis {
+  display: inline-block; /* 或者根据需要使用 inline-block */
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
 </style>

src/views/Tracking/src/components/TrackingDetail/src/components/UploadFilesDialog.vue

@@ -140,7 +140,12 @@ const beforeAvatarUpload = (rawFile: any) => {
     </el-scrollbar>
     <template #footer>
       <div class="dialog-footer">
-        <el-button class="download-btn el-button--dark" @click="handleSave">Finish</el-button>
+        <el-button
+          style="height: 40px; padding: 8px 40px"
+          class="download-btn el-button--dark"
+          @click="handleSave"
+          >Finish</el-button
+        >
       </div>
     </template>
   </el-dialog>

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -72,7 +72,6 @@ const getTableColumns = async (isInit: boolean) => {
     if (res.code === 200) {
       trackingTable.value.columns = [
         { type: 'checkbox', width: 50, fixed: 'left' },
-        { field: '__serial_no', title: 'serial_no', width: 300, fixed: 'left' },
         ...handleColumns(res.data.TrackingTableColumns)
       ]
       tableOriginColumnsField.value = res.data.TrackingTableColumns
@@ -159,14 +158,7 @@ const trackingTable = ref<VxeGridProps<any>>({
   border: true,
   round: true,
   columns: [],
-  data: [
-    {
-      trackingNo: '1234567890',
-      mode: 'Air',
-      trackingStatus: 'Cancelled',
-      origin
-    }
-  ],
+  data: [],
   scrollY: { enabled: true, oSize: 20, gt: 30 },
   stripe: true,
   emptyText: ' ',