feat: 修改邮箱和route部分相关的样式

src/components/MoreFilters/src/MoreFilters.vue

@@ -7,6 +7,23 @@ import { ref, onMounted, onBeforeMount, computed } from 'vue'
 import SelectTable from '@/components/SelectTable/src/SelectTable.vue'
 
 onMounted(() => {
+  if (sessionStorage.getItem('reportList') != null && sessionStorage.getItem('reportList') != '') {
+    const reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
+    const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
+    if (reportlist._city_name != '') {
+      if (data.title.includes('Origin')) {
+        InputForm.value.palces.Origin.push(reportlist._city_name)
+        MoreFiltersObj.Origin = reportlist._city_name
+        MoreFiltersObj2.Origin = InputForm.value.palces.Origin
+      } else {
+        InputForm.value.palces.Destination.push(reportlist._city_name)
+        MoreFiltersObj.Destination = reportlist._city_name
+        MoreFiltersObj2.Destination = InputForm.value.palces.Origin
+      }
+      sessionStorage.removeItem('reportList')
+      sessionStorage.removeItem('tagsList')
+    }
+  }
   emitter.on('clearTag', (tag: any) => {
     if (tag.includes('Shippername')) {
       clearname(InputForm.value, 'parties', 'Shippername')
@@ -360,6 +377,7 @@ const changeAutoSelectvoyage = (val: any) => {
 const check = (row: any, value: any, key1: any, key2: any) => {
   value[key1][key2] = row
   MoreFiltersObj[key2] = row
+  MoreFiltersObj2[key2] = row
 }
 //选择origin
 const checkorigin = (row: any) => {

src/components/VBox/src/VBox.vue

@@ -116,6 +116,8 @@ const vBoxPopoverRef = ref()
       display: flex;
       align-items: center;
       justify-content: center;
+      height: 32px;
+      width: 32px;
       span.icon-icon_dragsort__b {
         color: var(--color-neutral-1);
       }

src/styles/elementui.scss

@@ -495,6 +495,9 @@ div .el-badge {
 .el-year-table td span.el-date-table-cell__text:hover {
   color: var(--color-theme);
 }
+div.el-date-picker {
+  --el-datepicker-header-text-color: #b5b9bf;
+}
 div.el-date-picker__header {
   padding-top: 4px;
 }
@@ -531,9 +534,18 @@ div .el-range-editor.is-active,
   box-shadow: 0 0 0 1px var(--color-theme) !important;
   border-color: var(--color-theme);
 }
-div .el-date-table td.today .el-date-table-cell__text,
-.el-date-table td.available:hover {
-  color: var(--color-theme);
+
+table.el-date-table td.available:hover {
+  span {
+    color: var(--color-theme);
+  }
+}
+div .el-date-table td.today .el-date-table-cell__text {
+  color: var(--color-neutral-1);
+  font-weight: 400;
+}
+.el-date-table td .el-date-table-cell span.el-date-table-cell__text {
+  border-radius: 6px;
 }
 div .el-date-table td.in-range .el-date-table-cell {
   background-color: var(--color-orange-6) !important;

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

@@ -216,7 +216,7 @@ const sendEmail = () => {
       <div class="record-item" v-for="(item, index) in emailRecords" :key="index">
         <div class="header">
           <div class="avatar">
-            <span>{{ item.name?.slice(0, 1) }}</span>
+            <div>{{ item.name?.slice(0, 1) }}</div>
           </div>
           <div class="name">{{ item.name }}</div>
           <div class="date">{{ dayjs(item.creatTime).format('MM-DD-YYYY HH:mm:ss') }}</div>
@@ -255,17 +255,22 @@ const sendEmail = () => {
 
 .email-path {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   margin-bottom: 12px;
   font-weight: 600;
 
   & > .label {
     margin-left: 8px;
+    padding-top: 2px;
     color: var(--color-neutral-1);
+    white-space: nowrap;
   }
 
   & > .content {
+    padding-top: 2px;
+    line-height: 18px;
     color: var(--color-theme);
+    word-break: break-all;
   }
 }
 
@@ -285,14 +290,15 @@ const sendEmail = () => {
     padding-left: 0px;
 
     .avatar {
-      display: flex;
-      justify-content: center;
-      align-items: center;
       width: 24px;
       height: 24px;
+      padding-top: 5px;
+      text-align: center;
       border-radius: 50%;
       background-color: var(--color-theme);
-      span {
+      div {
+        height: 14px;
+        line-height: 14px;
         color: #fff;
         font-weight: 700;
       }

src/views/Dashboard/src/DashboardView.vue

@@ -280,6 +280,8 @@ const GetCo2DestinationEcharts = () => {
     }
   })
 }
+const topdestinationinType = ref()
+const toporiginType = ref()
 //获取Top10 Origin/Destination
 const Top10Obj = reactive({
   OriginData: [],
@@ -302,6 +304,8 @@ const GetTop10ODEcharts = () => {
       Top1OInterval.interval = res.data.interval
       Top1OInterval_dest.Max = res.data.dest_Max
       Top1OInterval_dest.interval = res.data.dest_interval
+      topdestinationinType.value = res.data.topdestinationinType
+      toporiginType.value = res.data.toporiginType
     }
   })
 }
@@ -384,6 +388,7 @@ const ClickParams = (val: any) => {
         if (res.code == 200) {
           reportList._reportRef = pie_chart_ETD.value[0].paramsdata.name
           reportList._reportRefe_date = currentDate.getMonth() + 1 + '/' + currentDate.getFullYear()
+          reportList._reportType = 'r1'
           reportList._reportRefb_date = currentDate.getMonth() + 3 + '/' + tenyear
           sessionStorage.setItem('clickParams', JSON.stringify(res.data))
           sessionStorage.setItem('reportList', JSON.stringify(reportList))
@@ -406,6 +411,7 @@ const ClickParams = (val: any) => {
       .then((res: any) => {
         if (res.code == 200) {
           reportList._reportRef = pie_chart_pending_arrival.value[0].paramsdata.name
+          reportList._reportType = 'r3'
           sessionStorage.setItem('clickParams', JSON.stringify(res.data))
           sessionStorage.setItem('reportList', JSON.stringify(reportList))
           let obj: any = {}
@@ -426,6 +432,7 @@ const ClickParams = (val: any) => {
       })
       .then((res: any) => {
         if (res.code == 200) {
+          reportList._reportType = 'r4'
           reportList._reportRef = pie_chart_pending_departure.value[0].paramsdata.name
           sessionStorage.setItem('clickParams', JSON.stringify(res.data))
           sessionStorage.setItem('reportList', JSON.stringify(reportList))
@@ -448,6 +455,7 @@ const ClickParams = (val: any) => {
       .then((res: any) => {
         if (res.code == 200) {
           reportList._reportRef = pie_chart_kpi_departure.value[0].paramsdata.name
+          reportList._reportType = 'atd_r4'
           sessionStorage.setItem('clickParams', JSON.stringify(res.data))
           sessionStorage.setItem('reportList', JSON.stringify(reportList))
           let obj: any = {}
@@ -469,6 +477,7 @@ const ClickParams = (val: any) => {
       .then((res: any) => {
         if (res.code == 200) {
           reportList._reportRef = pie_chart_kpi_arrival.value[0].paramsdata.name
+          reportList._reportType = 'ata_r3'
           sessionStorage.setItem('clickParams', JSON.stringify(res.data))
           sessionStorage.setItem('reportList', JSON.stringify(reportList))
           let obj: any = {}
@@ -483,22 +492,23 @@ const ClickParams = (val: any) => {
   }
   // Top10 origin点击跳转
   else if (val == 'Top 10 Origin') {
-    let array: any = []
-    array.push(seller_chart_top10_origin.value[0].paramsdata)
     $api
       .ClickTop10({
-        _reportRef: array,
-        _reportStationType: 'origin'
+        _reportRef: seller_chart_top10_origin.value[0].paramsdata,
+        _reportStationType: toporiginType.value,
+        _city_name: seller_chart_top10_origin.value[0].paramscityname
       })
       .then((res: any) => {
         if (res.code == 200) {
-          reportList._reportRef = array
-          reportList._reportStationType = 'origin'
+          reportList._reportRef = seller_chart_top10_origin.value[0].paramsdata
+          reportList._reportType = 'top'
+          reportList._reportStationType = toporiginType.value
+          reportList._city_name = seller_chart_top10_origin.value[0].paramscityname
           sessionStorage.setItem('clickParams', JSON.stringify(res.data))
           sessionStorage.setItem('reportList', JSON.stringify(reportList))
           let obj: any = {}
           obj.title = 'Top 10 Origin'
-          obj.data = seller_chart_top10_origin.value[0].paramsdata
+          obj.data = seller_chart_top10_origin.value[0].paramscityname
           sessionStorage.setItem('tagsList', JSON.stringify(obj))
           router.push({
             path: '/tracking'
@@ -508,22 +518,23 @@ const ClickParams = (val: any) => {
   }
   // Top10 destination点击跳转
   else if (val == 'Top 10 Destination') {
-    let array: any = []
-    array.push(seller_chart_top10_destination.value[0].paramsdata)
     $api
       .ClickTop10({
-        _reportRef: array,
-        _reportStationType: 'agent'
+        _reportRef: seller_chart_top10_destination.value[0].paramsdata,
+        _reportStationType: topdestinationinType.value,
+        _city_name: seller_chart_top10_destination.value[0].paramscityname
       })
       .then((res: any) => {
         if (res.code == 200) {
-          reportList._reportRef = array
-          reportList._reportStationType = 'agent'
+          reportList._reportRef = seller_chart_top10_destination.value[0].paramsdata
+          reportList._reportStationType = topdestinationinType.value
+          reportList._reportType = 'top'
+          reportList._city_name = seller_chart_top10_destination.value[0].paramscityname
           sessionStorage.setItem('clickParams', JSON.stringify(res.data))
           sessionStorage.setItem('reportList', JSON.stringify(reportList))
           let obj: any = {}
           obj.title = 'Top 10 Destination'
-          obj.data = seller_chart_top10_destination.value[0].paramsdata
+          obj.data = seller_chart_top10_destination.value[0].paramscityname
           sessionStorage.setItem('tagsList', JSON.stringify(obj))
           router.push({
             path: '/tracking'
@@ -544,6 +555,7 @@ const ClickParams = (val: any) => {
           reportList._reportRef = seller_chart_CO2_origin.value[0].paramsdata.name
           reportList._reportDataType = seller_chart_CO2_origin.value[0].paramsdata.type
           reportList._reportStationType = 'origin'
+          reportList._reportType = 'co2e'
           sessionStorage.setItem('clickParams', JSON.stringify(res.data))
           sessionStorage.setItem('reportList', JSON.stringify(reportList))
           let obj: any = {}
@@ -568,6 +580,7 @@ const ClickParams = (val: any) => {
         if (res.code == 200) {
           reportList._reportRef = seller_chart_CO2_destination.value[0].paramsdata.name
           reportList._reportDataType = seller_chart_CO2_destination.value[0].paramsdata.type
+          reportList._reportType = 'co2e'
           reportList._reportStationType = 'agent'
           sessionStorage.setItem('clickParams', JSON.stringify(res.data))
           sessionStorage.setItem('reportList', JSON.stringify(reportList))
@@ -630,7 +643,7 @@ const ClickParams = (val: any) => {
             <el-button
               class="el-button--default"
               @click="SaveVisible = !SaveVisible"
-              @blur="SaveFilters"
+              @blur="SaveVisible = false"
             >
               <span class="iconfont_icon">
                 <svg class="iconfont" aria-hidden="true">
@@ -704,7 +717,13 @@ const ClickParams = (val: any) => {
     <!-- 图表 -->
     <div class="echarts">
       <VueDraggable
-        style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px"
+        style="
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          gap: 8px;
+          width: 100%;
+        "
         ref="infoContentRef"
         ghost-class="ghost-class"
         :forceFallback="true"
@@ -1223,7 +1242,7 @@ const ClickParams = (val: any) => {
   height: 32px;
 }
 .echarts {
-  padding: 0 24px;
+  padding: 0 22px;
 }
 .kpi {
   width: 50%;

src/views/Dashboard/src/components/BarChart.vue

@@ -15,7 +15,6 @@ watch(
     initOption.title.text = bar_title.value
     initOption.xAxis.data = barName.value
     initOption.series = bar_series.value
-    console.log(initOption.series)
     initOption.legend.data = Name.value
     initOption.yAxis.max = Max.value
     initOption.yAxis.interval = interval.value
@@ -196,6 +195,7 @@ const initOption = reactive({
 })
 onMounted(() => {
   initChart()
+  clickParams()
 })
 
 const emits = defineEmits(['ClickParams'])
@@ -219,7 +219,6 @@ const initChart = () => {
   window.addEventListener('resize', () => {
     bar_chart.resize()
   })
-  clickParams()
 }
 defineExpose({
   paramsdata

src/views/Dashboard/src/components/PieChart.vue

@@ -159,6 +159,7 @@ const initOption: any = reactive({
 
 onMounted(() => {
   initChart()
+  clickParams()
 })
 const emits = defineEmits(['ClickParams'])
 const paramsdata = ref()
@@ -177,7 +178,6 @@ const initChart = () => {
   window.addEventListener('resize', () => {
     pie_chart.resize()
   })
-  clickParams()
 }
 defineExpose({
   paramsdata

src/views/Dashboard/src/components/RecentStatus.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
+import dayjs from 'dayjs'
 
 const router = useRouter()
 interface RecentItem {
@@ -16,13 +17,14 @@ interface RecentItem {
   type: string
   Arrived: string
   Time: string
+  timezone: string
+  act_time: string
 }
 interface Props {
   RecentStatusList: RecentItem[]
 }
 const props = withDefaults(defineProps<Props>(), {})
 const RouteToDetail = (val: any) => {
-  console.log(val)
   router.push({
     path: '/tracking/detail',
     query: {
@@ -31,6 +33,13 @@ const RouteToDetail = (val: any) => {
     }
   })
 }
+const formatDate = (date: string) => {
+  if (date != '') {
+    return dayjs(date).format('MMM/DD/YYYY')
+  } else {
+    return ''
+  }
+}
 </script>
 <template>
   <div class="recent_route" v-for="(item, index) in props.RecentStatusList" :key="index">
@@ -120,7 +129,9 @@ const RouteToDetail = (val: any) => {
       <div class="recent-content-right">
         <VTag :type="item.type" style="margin-bottom: 4px">{{ item.type }}</VTag>
         <div class="right_text">{{ item.Arrived }}</div>
-        <div class="startStation_time">{{ item.Time }}</div>
+        <div class="startStation_time">
+          {{ formatDate(item.Time) }}&nbsp;&nbsp;{{ item.act_time }}&nbsp;&nbsp;{{ item.timezone }}
+        </div>
       </div>
     </div>
   </div>

src/views/Dashboard/src/components/SellerChart.vue

@@ -142,7 +142,7 @@ const initOption = reactive({
       label: {
         show: true,
         color: '#646A73',
-        position: 'insideRight',
+        position: 'right',
         fontFamily: 'Lato-Light',
         // 数据每三位加一个逗号
         formatter: function (data: { value: { toString: () => string } }) {
@@ -157,14 +157,22 @@ const initOption = reactive({
 
 onMounted(() => {
   initChart()
+  clickParams()
 })
 const emits = defineEmits(['ClickParams'])
 const paramsdata = ref()
+const paramscityname = ref()
 const clickParams = () => {
   const seller_chart = echarts.init(seller_ref.value)
   // 监听点击事件
   seller_chart.on('click', function (params) {
     paramsdata.value = params.name
+    seller_data.value?.forEach((item: any) => {
+      if (item.name == paramsdata.value) {
+        paramscityname.value = item.city_name
+        console.log(paramscityname.value)
+      }
+    })
     emits('ClickParams')
   })
 }
@@ -178,10 +186,10 @@ const initChart = () => {
   window.addEventListener('resize', () => {
     seller_chart.resize()
   })
-  clickParams()
 }
 defineExpose({
-  paramsdata
+  paramsdata,
+  paramscityname
 })
 </script>
 

src/views/Layout/src/components/Header/HeaderView.vue

@@ -162,8 +162,8 @@ const handleLogin = () => {
           </div>
         </div>
         <template #reference>
-          <div class="avatar" v-if="userStore.username">
-            <span>{{ userStore.username?.slice(0, 1) }}</span>
+          <div class="header-avatar" v-if="userStore.username">
+            <span style="">{{ userStore.username?.slice(0, 1) }}</span>
           </div>
         </template>
       </el-popover>
@@ -192,16 +192,17 @@ const handleLogin = () => {
 </template>
 
 <style lang="scss" scoped>
-.avatar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.header-avatar {
   width: 24px;
   height: 24px;
+  padding: 2px;
+  text-align: center;
   border-radius: 50%;
   background-color: var(--color-theme);
   cursor: pointer;
   & > span {
+    display: block;
+    height: 16px;
     color: #fff;
     font-size: 16px;
     font-weight: 700;
@@ -250,17 +251,18 @@ div.el-popover.el-popper.user-config-popover {
     gap: 8px;
     height: 70px;
     border-bottom: 1px solid #eeeeed;
-    .avatar {
+    & > .avatar {
       width: 48px;
       height: 48px;
+      padding-top: 7px;
       border-radius: 50%;
       text-align: center;
       background-color: var(--color-theme);
-      display: flex;
-      justify-content: center;
-      align-items: center;
       span {
+        display: block;
         color: #fff;
+        height: 32px;
+        line-height: 32px;
         font-size: 32px;
         font-weight: 700;
       }

src/views/Tracking/src/TrackingView.vue

@@ -59,7 +59,7 @@ const handleClose = (tag: any) => {
   } else if (tag.includes('Sales')) {
     delete searchTableQeury.sales_rep
   } else if (tag.includes('Origin')) {
-    delete searchTableQeury.from_station
+    delete searchTableQeury['shipper_city/consignee_city']
   } else if (tag.includes('Destination')) {
     delete searchTableQeury.final_desination
   } else if (tag.includes('Place of Receipt')) {
@@ -305,11 +305,19 @@ onMounted(() => {
   ) {
     const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
     const reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
-    let str = `${data.title}:${data.data}`
-    filterData.daterangeData.push(str)
     for (const key in reportlist) {
       searchTableQeury[key] = reportlist[key]
     }
+    if (reportlist._city_name == '') {
+      let str = `${data.title}:${data.data}`
+      filterData.dashboardData.push(str)
+    } else if (data.title.includes('Origin')) {
+      let str = `Origin: ${data.data}`
+      filterData.morefiltersData.push(str)
+    } else {
+      let str = `Destination: ${data.data}`
+      filterData.morefiltersData.push(str)
+    }
     renderTagsData()
   }
   Gettrackingdata()

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

@@ -230,7 +230,7 @@ defineExpose({
         <div class="record-item" v-for="(item, index) in emailRecords" :key="index">
           <div class="header">
             <div class="avatar">
-              <span>{{ item.name?.slice(0, 1) }}</span>
+              <div>{{ item.name?.slice(0, 1) }}</div>
             </div>
             <div class="name">{{ item.name }}</div>
             <div class="date">{{ dayjs(item.creatTime).format('MM-DD-YYYY HH:mm:ss') }}</div>
@@ -263,16 +263,23 @@ defineExpose({
 
 .email-path {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   margin-bottom: 12px;
   font-weight: 600;
 
   & > .label {
     margin-left: 8px;
+    padding-top: 2px;
     color: var(--color-neutral-1);
+    white-space: nowrap;
   }
 
   & > .content {
+    display: inline-block;
+    flex: 1;
+    padding-top: 2px;
+    line-height: 18px;
+    word-break: break-all;
     color: var(--color-theme);
   }
 }
@@ -294,14 +301,15 @@ defineExpose({
     padding-left: 0px;
 
     .avatar {
-      display: flex;
-      justify-content: center;
-      align-items: center;
       width: 24px;
       height: 24px;
+      padding-top: 5px;
+      text-align: center;
       border-radius: 50%;
       background-color: var(--color-theme);
-      span {
+      div {
+        height: 14px;
+        line-height: 14px;
         color: #fff;
         font-weight: 700;
       }

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+import { transportationMode } from '@/components/TransportationMode'
+
 const props = defineProps({
   data: Object
 })
@@ -20,7 +22,7 @@ const routes: any = ref([
   {
     serialNumber: 'Leg 2',
     mode: 'Sea',
-    origin: 'Valenciaenz',
+    origin: 'ValeShenzhenShweShenzhenShweShenzhenShweShenzhenShwenciaenz',
     destination: 'ShenzhenShweShenzhenShweShenzhenShweShenzhenShwe',
     etd: 'Jun-15-2024 12:00 AM',
     atd: 'Jun-17-2024 12:00 AM',
@@ -50,48 +52,23 @@ 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"
-    :style="{
-      '--basic-destination-width': basicDesWidth,
-      '--detail-destination-width': detailDesWidth
-    }"
-  >
+  <div class="routes-view">
     <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">
+      <div
+        class="route-item"
+        @click="item.isCollapse = !item.isCollapse"
+        v-for="(item, index) in routes"
+        :key="item.serialNumber"
+      >
         <div class="basic-info">
           <div class="serial-number border-right">Leg {{ index + 1 }}</div>
           <div class="mode border-right">
-            <span class="font_family icon-icon_ocean_b"></span>
-            {{ item.mode }}
+            <span class="font_family" :class="[`icon-${transportationMode?.[item.mode]}`]"></span>
+            {{ item.mode_label }}
           </div>
           <div class="place border-right">
             <div class="origin">
@@ -124,7 +101,6 @@ onBeforeUnmount(() => {
             <div class="title">ETA</div>
             <div class="content">{{ formatDate(item.eta) }}</div>
             <span
-              @click="item.isCollapse = !item.isCollapse"
               :class="{ collapse: item.isCollapse }"
               class="font_family icon-icon_dropdown_b"
             ></span>
@@ -138,7 +114,9 @@ onBeforeUnmount(() => {
 
                 <el-tooltip placement="top">
                   <template #content>{{ item.origin || '--' }}</template>
-                  <span class="label single-line-ellipsis">{{ item.origin || '--' }}</span>
+                  <span class="label origin-label single-line-ellipsis">{{
+                    item.origin || '--'
+                  }}</span>
                 </el-tooltip>
                 <div class="line_container">
                   <hr color="#000000" />
@@ -215,7 +193,13 @@ onBeforeUnmount(() => {
 .basic-info {
   display: flex;
   height: 80px;
-
+  cursor: pointer;
+  &:hover {
+    background-color: #fef8f3;
+    .serial-number {
+      background-color: #f6f2ee;
+    }
+  }
   .serial-number {
     width: 80px;
     background: var(--color-header-bg);
@@ -237,10 +221,12 @@ onBeforeUnmount(() => {
       font-size: 40px;
     }
   }
+  .origin {
+    flex: 1;
+  }
 
   .destination {
-    flex: 1;
-    max-width: calc(var(--basic-destination-width) - 16px);
+    max-width: calc(40% - 16px);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -248,10 +234,11 @@ onBeforeUnmount(() => {
     & > div.content {
       display: inline-block;
       width: 100%;
+      overflow: hidden;
     }
   }
   .place {
-    flex: 0 0 40%;
+    flex: 1;
     display: flex;
     align-items: center;
     padding: 0 16px;
@@ -261,7 +248,7 @@ onBeforeUnmount(() => {
       margin-top: 2px;
     }
     .origin {
-      width: calc(100% - var(--basic-destination-width));
+      width: 60%;
     }
 
     .content {
@@ -278,9 +265,7 @@ onBeforeUnmount(() => {
   }
 
   div.eta {
-    flex-basis: 80px;
     position: relative;
-
     & > .font_family {
       position: absolute;
       right: 20px;
@@ -331,6 +316,7 @@ onBeforeUnmount(() => {
   border-top: 1px solid var(--color-border);
   .line_container {
     flex: 1;
+    margin-left: 8px;
   }
   .line_container hr {
     border-color: #484c52;
@@ -339,40 +325,44 @@ onBeforeUnmount(() => {
 
   .line_container .right-icon {
     border-top: 1px solid #484c52;
-
     border-radius: 0 1px 1px 0;
-    top: -4px;
+    top: -2px;
     right: 0px;
     width: 10px;
     height: 12px;
   }
   .date-info {
+    flex: 1;
+    max-width: calc(100% - (100% - 165px) / 3);
     display: flex;
     justify-content: space-between;
     gap: 16px;
-    width: calc(100% - 248px);
-    padding: 12px 8px 12px;
+    padding: 12px 8px;
+    padding-right: 16px;
     background-color: var(--color-header-bg);
     border-radius: 6px;
 
     .origin {
-      flex: 1;
+      flex-grow: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-
-      min-width: var(--detail-destination-width);
-      max-width: calc(100% - var(--detail-destination-width));
+      overflow: hidden;
+      .label {
+        margin-top: 1px;
+      }
     }
 
     .destination {
-      flex: 1;
-      min-width: calc(var(--detail-destination-width) - 16px);
+      flex-shrink: 0; /* 防止右边的子盒子缩小 */
+      flex-basis: auto; /* 根据内容决定初始宽度 */
+      max-width: 40%;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       .label {
         width: calc(100% - 40px);
+        margin-top: 1px;
       }
     }
 
@@ -422,11 +412,10 @@ onBeforeUnmount(() => {
   }
 
   .transport-info {
-    width: 248px;
+    width: calc((100% - 165px) / 3);
     padding: 8px 16px;
     background-color: var(--color-header-bg);
     border-radius: 6px;
-
     .item {
       .title {
         margin-bottom: 4px;
@@ -474,6 +463,7 @@ onBeforeUnmount(() => {
 }
 
 .single-line-ellipsis {
+  height: 18px;
   display: inline-block; /* 或者根据需要使用 inline-block */
   white-space: nowrap; /* 不换行 */
   overflow: hidden; /* 隐藏超出部分 */

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

@@ -95,6 +95,16 @@ const handleColumns = (columns: any) => {
           edit: 'vInput'
         }
       }
+    } else if (item.edit_type === 'number') {
+      curColumn = {
+        ...curColumn,
+        editRender: {
+          name: 'vInputNumber'
+        },
+        slots: {
+          edit: 'vInputNumber'
+        }
+      }
     } else if (item.edit_type === 'dateTime') {
       curColumn = {
         ...curColumn,
@@ -246,22 +256,26 @@ const handleSave = () => {
     }
   })
 
-  const variableList = Object.keys(tableRowData[0])
-  const tableInfo = {}
-  variableList.forEach((item) => {
-    if (item === '_X_ROW_KEY') return
-    if (item === 'vgm_date' || item === 'vgm_time') {
+  let variableList = []
+  let tableInfo = {}
+  if (tableRowData.length !== 0) {
+    variableList = Object.keys(tableRowData?.[0])
+    variableList.forEach((item) => {
+      if (item === '_X_ROW_KEY') return
+      if (item === 'vgm_date' || item === 'vgm_time') {
+        Object.assign(tableInfo, {
+          [item]: tableRowData.map((row) =>
+            row[item] ? dayjs(row[item]).format('YYYY-MM-DD HH:mm:ss') : ''
+          )
+        })
+        return
+      }
       Object.assign(tableInfo, {
-        [item]: tableRowData.map((row) =>
-          row[item] ? dayjs(row[item]).format('YYYY-MM-DD HH:mm:ss') : ''
-        )
+        [item]: tableRowData.map((row) => row[item])
       })
-      return
-    }
-    Object.assign(tableInfo, {
-      [item]: tableRowData.map((row) => row[item])
     })
-  })
+  }
+
   $api
     .saveVGMData({
       serial_no: allData.value.serial_no,
@@ -271,7 +285,7 @@ const handleSave = () => {
     })
     .then((res) => {
       if (res.code === 200) {
-        // router.push({ name: 'Tracking' })
+        router.push({ name: 'Tracking' })
         ElMessage.success('Save success')
       } else if (res.code === 400) {
         ElMessage.error('No access')
@@ -282,6 +296,19 @@ const handleSave = () => {
 const formatTime = (time: string) => {
   return time ? dayjs(time).format('MMM/DD/YYYY') : '--'
 }
+const stopScroll = (evt) => {
+  evt = evt || window.event
+  if (evt.preventDefault) {
+    // Firefox
+    evt.preventDefault()
+    evt.stopPropagation()
+  } else {
+    // IE
+    evt.cancelBubble = true
+    evt.returnValue = false
+  }
+  return false
+}
 </script>
 
 <template>
@@ -372,13 +399,18 @@ const formatTime = (time: string) => {
         </div>
         <div class="table">
           <vxe-grid ref="tableRef" class="vgm-table" v-bind="tableData">
-            <template #vInput="{ row, column }">
+            <template #vInputNumber="{ row, column }">
               <el-input
                 v-model="row[column.field]"
                 placeholder="Please enter..."
-                clearable
+                type="number"
+                class="no-spinner"
+                @wheel.prevent="stopScroll($event)"
               ></el-input>
             </template>
+            <template #vInput="{ row, column }">
+              <el-input v-model="row[column.field]" placeholder="Please enter..."></el-input>
+            </template>
 
             <template #vUnitSelect="{ row, column }">
               <vxe-select v-model="row[column.field]" placeholder="Please select..." clearable>
@@ -398,21 +430,13 @@ const formatTime = (time: string) => {
               <el-date-picker
                 v-model="row[column.field]"
                 type="datetime"
+                class="vgm-date-picker"
                 style="width: 190px"
                 placeholder="Pick a Date"
                 format="MMM-DD-YYYY HH:mm:ss"
                 date-format="MMM-DD-YYYY"
                 time-format="HH:mm:ss"
               />
-              <!-- <a-date-picker
-                :showNow="false"
-                class="test-date-picker"
-                placement="topLeft"
-                v-model:value="row[column.field]"
-                format="MMM-DD-YYYY HH:mm:ss"
-                :getPopupContainer="(target) => target.parentElement"
-                :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
-              /> -->
             </template>
           </vxe-grid>
         </div>
@@ -531,19 +555,18 @@ const formatTime = (time: string) => {
 .el-checkbox__input.is-checked + .el-checkbox__label {
   color: var(--color-neutral-1);
 }
-// .test-date-picker {
-//   .ant-picker-dropdown {
-//     // top: 40px !important;
-//   }
-//   .anticon svg {
-//     color: #202020;
-//   }
-// }
 
-// .vgm-table {
-//   .vxe-grid .vxe-grid--table-wrapper,
-//   div.vxe-table--body-wrapper {
-//     overflow: visible;
-//   }
-// }
+.no-spinner {
+  /* 隐藏计步器 */
+  input::-webkit-inner-spin-button,
+  input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* 针对 Firefox 浏览器 */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+}
 </style>