feat: 给详情页milestone加上默认展示

src/components/ContainerStatus/src/ContainerStatus.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+import emptyImage from './image/no-data.png'
 
 const props = defineProps({
   data: Object
@@ -48,7 +49,7 @@ const formatTimezone = (time: string, timezone: string) => {
 
 <template>
   <div class="container-status">
-    <el-collapse class="container" v-model="activeNames">
+    <el-collapse class="container" v-if="containerStatusData.length !== 0" v-model="activeNames">
       <el-collapse-item
         :title="containers.label"
         v-for="(containers, name) in containerStatusData"
@@ -75,6 +76,10 @@ const formatTimezone = (time: string, timezone: string) => {
         </div>
       </el-collapse-item>
     </el-collapse>
+    <div v-else class="empty-content" style="">
+      <el-image :src="emptyImage" alt="empty"></el-image>
+      <div class="empty-text" style="">No data</div>
+    </div>
     <div class="footer">
       Tracking on carrier website:
       <a href="http://www.rcjgroup.com/" target="_blank" class="link">http://www.rcjgroup.com/</a>
@@ -93,6 +98,22 @@ const formatTimezone = (time: string, timezone: string) => {
     padding-bottom: 8px;
     overflow: auto;
   }
+  .empty-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 394px;
+    .el-image {
+      width: 200px;
+      height: 200px;
+      margin-top: 20px;
+      object-fit: cover;
+    }
+    .empty-text {
+      margin-top: 8px;
+      color: #b5b9bf;
+    }
+  }
   .footer {
     line-height: 38px;
     color: #999;

src/views/Tracking/src/components/PublicTracking/src/components/MilestonesTable.vue

@@ -94,7 +94,11 @@ useRowClickStyle(tableRef)
 
 <template>
   <div class="containers">
-    <vxe-grid ref="tableRef" :style="{ border: 'none' }" v-bind="tableData"> </vxe-grid>
+    <vxe-grid ref="tableRef" :style="{ border: 'none' }" v-bind="tableData">
+      <template #empty>
+        <div class="empty">No data</div>
+      </template>
+    </vxe-grid>
   </div>
 </template>
 

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

@@ -95,6 +95,9 @@ useRowClickStyle(tableRef)
 <template>
   <div class="Milestones">
     <vxe-grid class="radius-bottom" ref="tableRef" :style="{ border: 'none' }" v-bind="tableData">
+      <template #empty>
+        <div class="empty">No data</div>
+      </template>
     </vxe-grid>
   </div>
 </template>