Merge branch 'dev_zyh' of United_Software/k_online_ui into dev

.gitignore

@@ -17,6 +17,8 @@ components.d.ts
 package-lock.json
 pnpm-lock.yaml
 auto-imports.d.ts
+*.rar
+*.zip
 
 stats.html
 

src/components/AddRules/src/components/NotiMethods.vue

@@ -77,11 +77,7 @@ defineExpose({
   <div style="margin-top: 11px">
     <div class="Method">
       <el-checkbox-group v-model="checkMethodList" @change="changeMethod">
-        <el-checkbox
-          class="methodcheckbox"
-          value="By Email"
-          v-if="user_type != null && user_type != 'customer'"
-        >
+        <el-checkbox class="methodcheckbox" value="By Email">
           <div>By Email</div>
           <div class="methos_image"><img src="../images/illustration_email@2x.png" /></div>
         </el-checkbox>
@@ -109,4 +105,4 @@ defineExpose({
 .methos_image {
   margin: 9px 0;
 }
-</style>
+</style>

src/components/CreateAddRules/src/components/NotiMethods.vue

@@ -65,11 +65,7 @@ const user_type = localStorage.getItem('user_type')
   <div style="margin-top: 11px">
     <div class="Method">
       <el-checkbox-group v-model="checkMethodList" @change="changeMethod">
-        <el-checkbox
-          class="methodcheckbox"
-          value="By Email"
-          v-if="user_type != null && user_type != 'customer'"
-        >
+        <el-checkbox class="methodcheckbox" value="By Email">
           <div>By Email</div>
           <div class="methos_image"><img src="../images/illustration_email@2x.png" /></div>
         </el-checkbox>
@@ -97,4 +93,4 @@ const user_type = localStorage.getItem('user_type')
 .methos_image {
   margin: 9px 0;
 }
-</style>
+</style>

src/components/DateRange/src/DateRange.vue

@@ -11,16 +11,18 @@ const formatDate = userStore.dateFormat
 const valueFormatDate = 'MM/DD/YYYY'
 
 onMounted(() => {
-  defaultDate()
+  const emitPayload = defaultDate()
+  // 统一 emit（只调用一次）
+  emit('defaultDate', daterangeObj2, emitPayload)
   emitter.on('clearTag', (tag: any) => {
     if (tag.includes('ETD')) {
-      clearDateStart()
+      clearETdDateRange()
     }
     if (tag.includes('ETA')) {
-      clearDateEnd()
+      clearEtaDateRange()
     }
     if (tag.includes('Creation Time')) {
-      clearDateEnd()
+      clearEtaDateRange()
     }
   })
   emitter.on('clearDaterangeObj', () => {
@@ -45,8 +47,8 @@ const AddDateType = ref()
 AddDateType.value = []
 const AddType = () => {
   AddDateType.value.push({
-    value: '',
-    number: ''
+    label: '',
+    value: ''
   })
 }
 const deleteType = (i: any) => {
@@ -57,204 +59,155 @@ const deleteType = (i: any) => {
 const props = defineProps({
   isShipment: Boolean
 })
-let daterangeObj: any = {}
-const DateStart = ref()
-DateStart.value = []
-const DateEnd = ref()
-DateEnd.value = []
+const etdDateRange = ref()
+etdDateRange.value = []
+const etaDateRange = ref()
+etaDateRange.value = []
 const DateCreation = ref()
-DateCreation.value = []
-const searchTableQeury = ref()
-const searchTableQeuryTracking = ref()
 // 查询默认日期
 const defaultDate = () => {
-  if (props.isShipment) {
-    if (
-      sessionStorage.getItem('clickParams') == null ||
-      sessionStorage.getItem('clickParams') == '{}'
-    ) {
-      if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
-        DateStart.value = [dayjs().subtract(2, 'month').startOf('month'), dayjs().add(1, 'month')]
-        daterangeObj.ETD =
-          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
-        const obj = {
-          title: 'ETD',
-          data: [
-            DateStart.value[0].format(valueFormatDate),
-            DateStart.value[1].format(valueFormatDate)
-          ]
-        }
-
-        daterangeObj2.ETD = obj
-      } else {
-        searchTableQeuryTracking.value =
-          JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
-        if (searchTableQeuryTracking.value.etd_start) {
-          DateStart.value = [
-            dayjs(searchTableQeuryTracking.value.etd_start),
-            dayjs(searchTableQeuryTracking.value.etd_end)
-          ]
-          daterangeObj.ETD =
-            DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
-          const obj = {
-            title: 'ETD',
-            data: [
-              DateStart.value[0].format(valueFormatDate),
-              DateStart.value[1].format(valueFormatDate)
-            ]
-          }
-          daterangeObj2.ETD = obj
-        }
-        if (searchTableQeuryTracking.value.eta_start) {
-          DateEnd.value = [
-            dayjs(searchTableQeuryTracking.value.eta_start),
-            dayjs(searchTableQeuryTracking.value.eta_end)
-          ]
-          daterangeObj.ETA =
-            DateEnd.value[0].format(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
-          const obj = {
-            title: 'ETA',
-            data: [
-              DateEnd.value[0].format(valueFormatDate),
-              DateEnd.value[1].format(valueFormatDate)
-            ]
-          }
-          daterangeObj2.ETA = obj
-        }
-        if (searchTableQeuryTracking.value.created_time_start) {
-          DateCreation.value = [
-            dayjs(searchTableQeuryTracking.value.created_time_start),
-            dayjs(searchTableQeuryTracking.value.created_time_end)
-          ]
-          daterangeObj['Creation Time'] =
-            DateCreation.value[0].format(formatDate) +
-            ' To ' +
-            DateCreation.value[1].format(formatDate)
-          const obj = {
-            title: 'Creation Time',
-            data: [
-              DateCreation.value[0].format(valueFormatDate),
-              DateCreation.value[1].format(valueFormatDate)
-            ]
-          }
-          daterangeObj2['Creation Time'] = obj
-        }
-      }
-      emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
-    } else {
-      const data = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
-      searchTableQeuryTracking.value =
-        JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
-      if (data.eta_start) {
-        DateEnd.value = [dayjs(data.eta_start), dayjs(data.eta_end)]
-        daterangeObj.ETA =
-          DateEnd.value[0].format(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
-        const obj = {
-          title: 'ETA',
-          data: [DateEnd.value[0].format(valueFormatDate), DateEnd.value[1].format(valueFormatDate)]
-        }
+  // 工具函数：安全格式化日期范围
+  const formatDateRange = (startStr: string | null, endStr: string | null) => {
+    if (!startStr || !endStr) return [null, null]
+    const start = dayjs(startStr)
+    const end = dayjs(endStr)
+    return start.isValid() && end.isValid()
+      ? [start.format(formatDate), end.format(formatDate)]
+      : [null, null]
+  }
 
-        daterangeObj2.ETA = obj
-        emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
-      }
-      if (data.etd_start) {
-        DateStart.value = [dayjs(data.etd_start), dayjs(data.etd_end)]
-        daterangeObj.ETD =
-          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
-        const obj = {
-          title: 'ETD',
-          data: [
-            DateStart.value[0].format(valueFormatDate),
-            DateStart.value[1].format(valueFormatDate)
-          ]
-        }
-        daterangeObj2.ETD = obj
-        emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
-      }
+  // 工具函数：设置 daterangeObj2 条目
+  const setRange = (key: string, title: string, startStr: string | null, endStr: string | null) => {
+    const [start, end] = formatDateRange(startStr, endStr)
+    if (start && end) {
+      daterangeObj2[key] = { title, data: [start, end] }
     }
-  } else {
-    if (sessionStorage.getItem('searchTableQeury') == null) {
-      DateStart.value = [dayjs().subtract(2, 'month').startOf('month'), dayjs().add(1, 'month')]
-      daterangeObj.ETD =
-        DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
-      const obj = {
-        title: 'ETD',
-        data: [
-          DateStart.value[0].format(valueFormatDate),
-          DateStart.value[1].format(valueFormatDate)
-        ]
-      }
-      daterangeObj2.ETD = obj
+  }
+
+  // 工具函数：设置 AddDateType（仅用于 Creation Time）
+  const setAddDateType = (startStr: string | null, endStr: string | null) => {
+    const [start, end] = formatDateRange(startStr, endStr)
+    AddDateType.value = [{ label: 'Creation Time', value: [start, end] }]
+  }
+
+  // 默认时间范围（2个月前月初 到 下个月）
+  const getDefaultRange = () => [
+    dayjs().subtract(2, 'month').startOf('month').format(formatDate),
+    dayjs().add(1, 'month').format(formatDate)
+  ]
+
+  // ----------------------------
+  // 主逻辑开始
+  // ----------------------------
+
+  let trackingData: Record<string, any> = {}
+  let emitPayload: Record<string, any> = {}
+
+  if (props.isShipment) {
+    const clickParams = sessionStorage.getItem('clickParams')
+    if (clickParams && clickParams !== '{}') {
+      // 场景 A: 有 clickParams → 读取 reportList
+      const reportList = JSON.parse(sessionStorage.getItem('reportList') || '{}')
+      trackingData = JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') || '{}')
+      etdDateRange.value = [
+        reportList.etd_start
+          ? dayjs(reportList.etd_start, valueFormatDate).format(formatDate)
+          : null,
+        reportList.etd_end ? dayjs(reportList.etd_end, valueFormatDate).format(formatDate) : null
+      ]
+      etaDateRange.value = [
+        reportList.eta_start
+          ? dayjs(reportList.eta_start, valueFormatDate).format(formatDate)
+          : null,
+        reportList.eta_end ? dayjs(reportList.eta_end, valueFormatDate).format(formatDate) : null
+      ]
+      setRange('ETD', 'ETD', reportList.etd_start, reportList.etd_end)
+      setRange('ETA', 'ETA', reportList.eta_start, reportList.eta_end)
     } else {
-      searchTableQeury.value =
-        JSON.parse(sessionStorage.getItem('searchTableQeury') as string) || {}
-      if (searchTableQeury.value.f_etd_start) {
-        DateStart.value = [
-          dayjs(searchTableQeury.value.f_etd_start).format(valueFormatDate),
-          dayjs(searchTableQeury.value.f_etd_end).format(valueFormatDate)
+      // 场景 B: 无 clickParams → 读取 searchTableQeuryTracking
+      const stored = sessionStorage.getItem('searchTableQeuryTracking')
+      if (!stored) {
+        // 子场景 B1: 无存储 → 用默认值
+        const [start, end] = getDefaultRange()
+        etdDateRange.value = [start, end]
+        setRange('ETD', 'ETD', start, end)
+      } else {
+        // 子场景 B2: 有存储
+        trackingData = JSON.parse(stored)
+        etdDateRange.value = [
+          trackingData.etd_start ? trackingData.etd_start : null,
+          trackingData.etd_end ? trackingData.etd_end : null
         ]
-        daterangeObj.ETD =
-          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
-        const obj = {
-          title: 'ETD',
-          data: [
-            DateStart.value[0].format(valueFormatDate),
-            DateStart.value[1].format(valueFormatDate)
-          ]
-        }
-        daterangeObj2.ETD = obj
-      }
-      if (searchTableQeury.value.m_eta_start) {
-        DateEnd.value = [
-          dayjs(searchTableQeury.value.m_eta_start),
-          dayjs(searchTableQeury.value.m_eta_end)
+        etaDateRange.value = [
+          trackingData.eta_start ? trackingData.eta_start : null,
+          trackingData.eta_end ? trackingData.eta_end : null
         ]
-        daterangeObj.ETA =
-          DateEnd.value[0].format(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
-        const obj = {
-          title: 'ETA',
-          data: [DateEnd.value[0].format(valueFormatDate), DateEnd.value[1].format(valueFormatDate)]
+        setRange('ETD', 'ETD', trackingData.etd_start, trackingData.etd_end)
+        setRange('ETA', 'ETA', trackingData.eta_start, trackingData.eta_end)
+        if (trackingData.created_time_start) {
+          setAddDateType(trackingData.created_time_start, trackingData.created_time_end)
+          setRange(
+            'Creation Time',
+            'Creation Time',
+            trackingData.created_time_start,
+            trackingData.created_time_end
+          )
         }
-        daterangeObj2.ETA = obj
       }
-      if (searchTableQeury.value.created_time_start) {
-        DateCreation.value = [
-          dayjs(searchTableQeury.value.created_time_start),
-          dayjs(searchTableQeury.value.created_time_end)
-        ]
-        daterangeObj['Creation Time'] =
-          DateCreation.value[0].format(formatDate) +
-          ' To ' +
-          DateCreation.value[1].format(formatDate)
-        const obj = {
-          title: 'Creation Time',
-          data: [
-            DateCreation.value[0].format(valueFormatDate),
-            DateCreation.value[1].format(valueFormatDate)
-          ]
-        }
-        daterangeObj2['Creation Time'] = obj
+    }
+    emitPayload = trackingData
+  } else {
+    // 非 shipment 场景
+    const stored = sessionStorage.getItem('searchTableQeury')
+    if (!stored) {
+      // 无存储 → 默认值
+      const [start, end] = getDefaultRange()
+      etdDateRange.value = [start, end]
+      setRange('ETD', 'ETD', start, end)
+    } else {
+      // 有存储
+      const queryData = JSON.parse(stored)
+      emitPayload = queryData
+
+      etdDateRange.value = [
+        queryData.f_etd_start ? queryData.f_etd_start : null,
+        queryData.f_etd_end ? queryData.f_etd_end : null
+      ]
+      etaDateRange.value = [
+        queryData.m_eta_start ? queryData.m_eta_start : null,
+        queryData.m_eta_end ? queryData.m_eta_end : null
+      ]
+      setRange('ETD', 'ETD', queryData.f_etd_start, queryData.f_etd_end)
+      setRange('ETA', 'ETA', queryData.m_eta_start, queryData.m_eta_end)
+      if (queryData.created_time_start) {
+        setAddDateType(queryData.created_time_start, queryData.created_time_end)
+        setRange(
+          'Creation Time',
+          'Creation Time',
+          queryData.created_time_start,
+          queryData.created_time_end
+        )
       }
     }
-    emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeury.value)
   }
+  return emitPayload
 }
 const daterangedata = ref()
 daterangedata.value = []
 let daterangeObj2: any = {}
 const DateRangeChange = (val: any) => {
   if (val.data != null) {
-    const date1 = dayjs(String(val.data[0])).format(formatDate)
-    const date2 = dayjs(String(val.data[1])).format(formatDate)
-    daterangeObj[val.title] = date1 + ' To ' + date2
+    val.data = [
+      dayjs(val.data[0], valueFormatDate).format(formatDate),
+      dayjs(val.data[1], valueFormatDate).format(formatDate)
+    ]
     daterangeObj2[val.title] = val
   } else {
-    delete daterangeObj[val.title]
     delete daterangeObj2[val.title]
     if (val.title == 'ETD') {
-      DateStart.value = []
+      etdDateRange.value = []
     } else if (val.title == 'ETA') {
-      DateEnd.value = []
+      etaDateRange.value = []
     } else {
       DateCreation.value = []
       AddDateType.value = []
@@ -264,34 +217,26 @@ const DateRangeChange = (val: any) => {
 }
 const emit = defineEmits(['DateRangeSearch', 'clearDaterangeTags', 'defaultDate'])
 const DateRangeSearch = () => {
-  emit('DateRangeSearch', daterangeObj, daterangeObj2)
+  emit('DateRangeSearch', daterangeObj2)
   Date_visible.value = false
 }
-const CalendarTitle = ref('Date Range')
-watch(
-  () => DateType.value,
-  (current) => {
-    CalendarTitle.value = current
-  }
-)
+
 // 清除
-const clearrest = () => {
+const clearRest = () => {
   emit('clearDaterangeTags')
-  clearDateStart()
-  clearDateEnd()
+  clearETdDateRange()
+  clearEtaDateRange()
   clearDateCreation()
   clearDaterangeObj()
 }
 // 清除EDT
-const clearDateStart = () => {
-  DateStart.value = []
-  delete daterangeObj['ETD']
+const clearETdDateRange = () => {
+  etdDateRange.value = []
   delete daterangeObj2['ETD']
 }
 // 清除EDA
-const clearDateEnd = () => {
-  DateEnd.value = []
-  delete daterangeObj['ETA']
+const clearEtaDateRange = () => {
+  etaDateRange.value = []
   delete daterangeObj2['ETA']
 }
 // 清除Creation Time
@@ -299,19 +244,23 @@ const clearDateCreation = () => {
   DateCreation.value = []
   AddDateType.value = []
   DateType.value = ''
-  CalendarTitle.value = 'Date Range'
-  delete daterangeObj['Creation Time']
   delete daterangeObj2['Creation Time']
 }
 // 清除 daterangeObj
 const clearDaterangeObj = () => {
-  daterangeObj = {}
   daterangeObj2 = {}
 }
 </script>
 <template>
   <div class="select">
-    <el-popover trigger="click" :width="400" :visible="Date_visible" popper-class="DaterangeClass">
+    <el-popover
+      trigger="click"
+      :width="400"
+      :visible="Date_visible"
+      popper-class="DaterangeClass"
+      @before-enter="defaultDate()"
+      @hide="clearDateCreation()"
+    >
       <template #reference>
         <div class="Date_Range" @blur="Date_visible = false" @click="Date_visible = !Date_visible">
           <div class="select_title">Date Range</div>
@@ -327,18 +276,18 @@ const clearDaterangeObj = () => {
         <div class="ETD">
           <CalendarDate
             CalendarTitle="ETD"
-            :Date="DateStart"
+            :Date="etdDateRange"
             @DateRangeChange="DateRangeChange"
           ></CalendarDate>
         </div>
         <div class="ETA">
           <CalendarDate
             CalendarTitle="ETA"
-            :Date="DateEnd"
+            :Date="etaDateRange"
             @DateRangeChange="DateRangeChange"
           ></CalendarDate>
         </div>
-        <div class="AddType" v-for="(item, index) in AddDateType" :key="item">
+        <div class="AddType" v-for="(item, index) in AddDateType" :key="item.value">
           <div>
             <div class="ETD_title Date_Title">
               <div class="Date_type">Date Type</div>
@@ -351,7 +300,7 @@ const clearDaterangeObj = () => {
             <el-select
               :suffix-icon="IconDropDown"
               placeholder="Please Select Date Type"
-              v-model="DateType"
+              v-model="item.label"
             >
               <el-option
                 v-for="item in DateTypeoptions"
@@ -364,9 +313,9 @@ const clearDaterangeObj = () => {
           </div>
           <div style="margin-top: 16px">
             <CalendarDate
-              :CalendarTitle="CalendarTitle"
+              :CalendarTitle="item.label || 'Date Range'"
               CalendarWidth="352px"
-              :Date="DateCreation"
+              :Date="item.value"
               @DateRangeChange="DateRangeChange"
               :isType="true"
             ></CalendarDate>
@@ -376,7 +325,7 @@ const clearDaterangeObj = () => {
           <el-button class="el-button--noborder moretype">+ More Date Type</el-button>
         </div>
         <div class="daterange_bottom">
-          <div><el-button type="default" @click="clearrest" class="Clear">Reset</el-button></div>
+          <div><el-button type="default" @click="clearRest" class="Clear">Reset</el-button></div>
           <div>
             <el-button class="search el-button--dark" @click="DateRangeSearch">Search</el-button>
           </div>

src/components/DateRange/src/components/CalendarDate.vue

@@ -4,6 +4,7 @@ import { ref, watch } from 'vue'
 import { useUserStore } from '@/stores/modules/user'
 
 const userStore = useUserStore()
+const formatDate = userStore.dateFormat
 const valueFormatDate = 'MM/DD/YYYY'
 // type RangeValue = [Dayjs, Dayjs]
 // const ETDDate = ref<RangeValue>()
@@ -48,8 +49,8 @@ watch(
   (current: any) => {
     if (current?.length == 2) {
       ETDDate.value = [
-        current[0] ? dayjs(current[0]).format(valueFormatDate) : '',
-        current[1] ? dayjs(current[1]).format(valueFormatDate) : ''
+        current[0] ? dayjs(current[0], formatDate).format(valueFormatDate) : '',
+        current[1] ? dayjs(current[1], formatDate).format(valueFormatDate) : ''
       ]
     } else {
       ETDDate.value = []
@@ -76,15 +77,10 @@ const daterange = (val: any) => {
 }
 const ChangeToday = (val: any) => {
   if (val == 'Earliest') {
-    // ETDDate.value = [dayjs(), dayjs()]
-    ETDDate.value[0] = dayjs()
-    const date1 = dayjs(String(ETDDate.value[0])).format(valueFormatDate)
-    DateList.value[0] = date1
+    DateList.value[0] = dayjs().format(valueFormatDate)
     daterange(DateList.value[1])
   } else {
-    ETDDate.value[1] = dayjs()
-    const date1 = dayjs(String(ETDDate.value[1])).format(valueFormatDate)
-    DateList.value[1] = date1
+    DateList.value[1] = dayjs().format(valueFormatDate)
     daterange(DateList.value[0])
   }
 }
@@ -99,15 +95,11 @@ const handleCalendarOpen = (date: any) => {
   }
 }
 const Earliest = () => {
-  ETDDate.value[0] = dayjs('Oct-05-2009')
-  const date1 = dayjs(String(ETDDate.value[0])).format(valueFormatDate)
-  DateList.value[0] = date1
+  DateList.value[0] = dayjs('Oct-05-2009').format(valueFormatDate)
   daterange(DateList.value[1])
 }
 const Latest = () => {
-  ETDDate.value[1] = dayjs()
-  const date1 = dayjs(String(ETDDate.value[1])).format(valueFormatDate)
-  DateList.value[1] = date1
+  DateList.value[1] = dayjs().format(valueFormatDate)
   daterange(DateList.value[0])
 }
 const changeRangeData = (value: any) => {
@@ -139,7 +131,7 @@ const handlePanelChange = (value: any, mode: any) => {
         width: props.CalendarWidth,
         backgroundColor: props.isType ? 'var(--more-type-bg-color)' : 'var(--management-bg-color)'
       }"
-      :popupClassName="{ 'th-color': props.isShowPopupClass }"
+      :popupClassName="props.isShowPopupClass ? 'th-color' : ''"
       :open="open"
       :disabled="Disabled"
       @change="changeRangeData"

src/components/TransportMode/src/TransportMode.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted, onBeforeMount, watch, computed } from 'vue'
 import type { DropdownInstance } from 'element-plus'
 import emitter from '@/utils/bus'
+import { cloneDeep } from 'lodash'
 
 interface ListItem {
   name: string
@@ -16,21 +17,24 @@ interface Props {
 }
 const props = withDefaults(defineProps<Props>(), {})
 const TransportList = ref(props.TransportListItem)
+const updateTransportList = (data: any) => {
+  TransportList.value = cloneDeep(data)
+  TransportList.value.forEach((item: any) => {
+    if (item.checked) {
+      checkedCount.push(item.sname)
+      const map = new Map()
+      checkedCount.forEach((item) => map.set(item, true))
+      checkedCount = [...map.keys()]
+    }
+    if (checkedCount.length == TransportList.value.length) {
+      checkAll.value = true
+    }
+  })
+}
 watch(
   () => props.TransportListItem,
   (current) => {
-    TransportList.value = current
-    TransportList.value.forEach((item: any) => {
-      if (item.checked) {
-        checkedCount.push(item.sname)
-        const map = new Map()
-        checkedCount.forEach((item) => map.set(item, true))
-        checkedCount = [...map.keys()]
-      }
-      if (checkedCount.length == TransportList.value.length) {
-        checkAll.value = true
-      }
-    })
+    updateTransportList(current)
   }
 )
 
@@ -48,7 +52,7 @@ onBeforeMount(() => {
 })
 
 const checkAll = ref(false)
-const dropdown1 = ref<DropdownInstance>()
+const dropdownVisible = ref<DropdownInstance>()
 let checkedCount: any[] = []
 const TotalAll = computed(() => {
   var total_sum = 0
@@ -119,11 +123,11 @@ const TransportSearch = (visible: any) => {
   }
   TransportData.data = changedata.value
   emit('TransportSearch', TransportData)
-  if (!dropdown1.value) return
+  if (!dropdownVisible.value) return
   if (visible) {
-    dropdown1.value.handleClose()
+    dropdownVisible.value.handleClose()
   } else {
-    dropdown1.value.handleOpen()
+    dropdownVisible.value.handleOpen()
   }
 }
 const searchTableQeury = ref()
@@ -200,10 +204,22 @@ const defaultTransport = () => {
     emit('defaultTransport', TransportData, searchTableQeury.value)
   }
 }
+
+// 每次打开时都应该重新赋值
+const handleDropdownVisibleChange = (visible: boolean) => {
+  if (visible) {
+    updateTransportList(props.TransportListItem)
+  }
+}
 </script>
 <template>
   <div class="select">
-    <el-dropdown ref="dropdown1" trigger="click" :hide-on-click="false">
+    <el-dropdown
+      ref="dropdownVisible"
+      trigger="click"
+      :hide-on-click="false"
+      @visible-change="handleDropdownVisibleChange"
+    >
       <div class="el-dropdown-link">
         <div class="select_title">Transport Mode</div>
         <span class="iconfont_icon">

src/router/index.ts

@@ -245,7 +245,7 @@ router.beforeEach(async (to, from, next) => {
   }
 
   // 未登录白名单
-  const whiteList = ['/login', '/public-tracking', '/public-tracking/detail', '/reset-password']
+  const whiteList = ['/login', '/public-tracking', '/public-tracking/detail', '/reset-password', '/demo-video']
   // 判断是否登录
   if (!whiteList.includes(to.path) && !userStore.isLogin) {
     const userStore = useUserStore()

src/views/Booking/src/BookingView.vue

@@ -7,6 +7,12 @@ import DateRange from '@/components/DateRange'
 import MoreFilters from '@/components/MoreFilters'
 import { ref, reactive } from 'vue'
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
+import { useUserStore } from '@/stores/modules/user'
+import dayjs from 'dayjs'
+
+const userStore = useUserStore()
+const formatDate = userStore.dateFormat
+const valueFormatDate = 'MM/DD/YYYY'
 
 const filterRef: Ref<HTMLElement | null> = ref(null)
 
@@ -21,7 +27,7 @@ const filterData = reactive({
   daterangeData: [] as Array<string>,
   morefiltersData: [] as Array<string>
 })
-onMounted(() => {})
+
 const tagsData: any = ref([])
 const handleClose = (tag: any) => {
   emitter.emit('clearTag', tag)
@@ -111,18 +117,13 @@ const defaultTransport = (val: any, value: any) => {
   renderTagsData()
 }
 // defaultDate
-const defaultDate = (val: any, value: any, data: any) => {
-  filterData.daterangeData = []
-  if (Object.keys(val).length) {
-    for (const key in val) {
-      let str = `${key}:${val[key]}`
-      filterData.daterangeData.push(str)
-    }
-  }
+const defaultDate = (dateRangeData: any, data: any) => {
+  setFilterData(dateRangeData)
+
   if (sessionStorage.getItem('searchTableQeury') == null) {
-    for (const key in value) {
-      searchTableQeury.f_etd_start = value[key].data[0]
-      searchTableQeury.f_etd_end = value[key].data[1]
+    for (const key in dateRangeData) {
+      searchTableQeury.f_etd_start = dateRangeData[key].data[0]
+      searchTableQeury.f_etd_end = dateRangeData[key].data[1]
     }
   } else {
     searchTableQeury = data
@@ -133,16 +134,20 @@ const defaultDate = (val: any, value: any, data: any) => {
   getbookingdata()
   renderTagsData()
 }
-//DateRangeSearch
-const DateRangeSearch = (val: any, value: any) => {
+
+const setFilterData = (dateRangeData: any) => {
   filterData.daterangeData = []
-  if (Object.keys(val).length) {
-    for (const key in val) {
-      let str = `${key}:${val[key]}`
-      filterData.daterangeData.push(str)
-    }
+  for (const key in dateRangeData) {
+    const startEnd = dateRangeData[key].data[0] + ' To ' + dateRangeData[key].data[1]
+    let str = `${key}:${startEnd}`
+    filterData.daterangeData.push(str)
   }
-  if (Object.keys(value).length == 0) {
+}
+//DateRangeSearch
+const DateRangeSearch = (dateRangeData: any) => {
+  setFilterData(dateRangeData)
+
+  if (Object.keys(dateRangeData).length == 0) {
     delete searchTableQeury.f_etd_start
     delete searchTableQeury.f_etd_end
     delete searchTableQeury.m_eta_start
@@ -150,16 +155,31 @@ const DateRangeSearch = (val: any, value: any) => {
     delete searchTableQeury.created_time_start
     delete searchTableQeury.created_time_end
   }
-  for (const key in value) {
+  const fieldList = [
+    {
+      title: 'ETD',
+      keys: ['f_etd_start', 'f_etd_end']
+    },
+    { title: 'ETA', keys: ['m_eta_start', 'm_eta_end'] },
+    { title: 'Creation Time', keys: ['created_time_start', 'created_time_end'] }
+  ]
+  fieldList.forEach((item) => {
+    if (!dateRangeData.hasOwnProperty(item.title)) {
+      // 删除不存在的字段
+      searchTableQeury[item.keys[0]] = undefined
+      searchTableQeury[item.keys[1]] = undefined
+    }
+  })
+  for (const key in dateRangeData) {
     if (key == 'ETD') {
-      searchTableQeury.f_etd_start = value[key].data[0]
-      searchTableQeury.f_etd_end = value[key].data[1]
+      searchTableQeury.f_etd_start = dateRangeData[key].data[0]
+      searchTableQeury.f_etd_end = dateRangeData[key].data[1]
     } else if (key == 'ETA') {
-      searchTableQeury.m_eta_start = value[key].data[0]
-      searchTableQeury.m_eta_end = value[key].data[1]
+      searchTableQeury.m_eta_start = dateRangeData[key].data[0]
+      searchTableQeury.m_eta_end = dateRangeData[key].data[1]
     } else {
-      searchTableQeury.created_time_start = value[key].data[0]
-      searchTableQeury.created_time_end = value[key].data[1]
+      searchTableQeury.created_time_start = dateRangeData[key].data[0]
+      searchTableQeury.created_time_end = dateRangeData[key].data[1]
     }
   }
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
@@ -329,7 +349,23 @@ interface ListItem {
 const TagsList = ref<ListItem[]>([])
 const filterTag = ref(['All'])
 const isShowAlertIcon = ref(false)
+const setSearchQeury = () => {}
 const getbookingdata = () => {
+  const dateRangeKeys = [
+    'f_etd_start',
+    'f_etd_end',
+    'm_eta_start',
+    'm_eta_end',
+    'created_time_start',
+    'created_time_end'
+  ]
+  const curRangeData: any = {}
+  for (const key of dateRangeKeys) {
+    if (searchTableQeury[key] !== undefined) {
+      curRangeData[key] = dayjs(searchTableQeury[key], formatDate).format(valueFormatDate)
+    }
+  }
+
   tableLoadingTableData.value = true
   BookingTable_ref.value.getLoadingData(tableLoadingTableData.value)
   $api
@@ -338,7 +374,8 @@ const getbookingdata = () => {
       ps: BookingTable_ref.value.pageInfo.pageSize,
       rc: -1,
       other_filed: '',
-      ...searchTableQeury
+      ...searchTableQeury,
+      ...curRangeData
     })
     .then((res: any) => {
       if (res.code === 200) {

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

@@ -426,13 +426,13 @@ const handleLinkClick = (row: any, column: any) => {
       path: '/booking/detail',
       query: { a: row.__serial_no, _schemas: row._schemas, status: row.Status }
     })
-    visitedRowState.setBookingTableData(row['__serial_no'])
   } else if (column.title === 'HBOL/HAWB No.') {
     router.push({
       path: '/tracking/detail',
       query: { a: row.__serial_no, _schemas: row._schemas }
     })
   }
+  visitedRowState.setBookingTableData(row['__serial_no'])
 }
 
 const selectedNumber = ref(0)

src/views/Dashboard/src/DashboardView.vue

@@ -141,7 +141,7 @@ const GetKpiData = (val: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        KPIobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
+        KPIobj.ETD_Title = `{a|${res.data.title1}} {b|${res.data.title2}}`
         KPIobj.ETDList = res.data.ETDList
         KPIobj.ETD_Radius = res.data.ETD_Radius
         KPIobj.download_name = res.data.download_name
@@ -158,7 +158,7 @@ const GetKpiData = (val: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        Arrivalobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
+        Arrivalobj.ETD_Title = `{a|${res.data.title1}} {b|${res.data.title2}}`
         Arrivalobj.ETDList = res.data.ETDList
         Arrivalobj.ETD_Radius = res.data.ETD_Radius
         Arrivalobj.download_name = res.data.download_name
@@ -193,7 +193,7 @@ const GetPendingEcharts = (val: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        Pendingobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
+        Pendingobj.ETD_Title = `{a|${res.data.title1}} {b|${res.data.title2}}`
         Pendingobj.ETDList = res.data.ETDList
         Pendingobj.ETD_Radius = res.data.ETD_Radius
         Pendingobj.download_name = res.data.download_name
@@ -210,7 +210,7 @@ const GetPendingEcharts = (val: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        PendingArrivalobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
+        PendingArrivalobj.ETD_Title = `{a|${res.data.title1}} {b|${res.data.title2}}`
         PendingArrivalobj.ETDList = res.data.ETDList
         PendingArrivalobj.ETD_Radius = res.data.ETD_Radius
         PendingArrivalobj.download_name = res.data.download_name
@@ -582,11 +582,7 @@ const ClickParams = (val: any) => {
   }
   //  PendingArrival点击跳转
   else if (val == 'Pending1') {
-    handleTurnData(
-      dashboardObj.PendingDefaultData.date_start,
-      dashboardObj.PendingDefaultData.date_end,
-      ''
-    )
+    handleTurnData('', '', '') // 因为Pending没有时间筛选，所以传空
     reportList._reportRef = pie_chart_pending_arrival.value[0].paramsdata.name
     reportList._reportType = 'r3'
     handlereportlist(
@@ -606,11 +602,7 @@ const ClickParams = (val: any) => {
   }
   // PendingDeparture点击跳转
   else if (val == 'Pending0') {
-    handleTurnData(
-      dashboardObj.PendingDefaultData.date_start,
-      dashboardObj.PendingDefaultData.date_end,
-      ''
-    )
+    handleTurnData('', '', '') // 因为Pending没有时间筛选，所以传空
     reportList._reportType = 'r4'
     reportList._reportRef = pie_chart_pending_departure.value[0].paramsdata.name
     handlereportlist(
@@ -659,7 +651,7 @@ const ClickParams = (val: any) => {
       dashboardObj.KPIDefaulteData.date_end,
       ''
     )
-    reportList._reportRef = pie_chart_kpi_arrival.value[0].paramsdata.name
+    reportList._reportRef = pie_chart_kpi_arrival.value[0]?.paramsdata?.name || ''
     reportList._reportType = 'ata_r3'
     handlereportlist(
       dashboardObj.KPIDefaulteData.transportation,
@@ -670,7 +662,7 @@ const ClickParams = (val: any) => {
     sessionStorage.setItem('reportList', JSON.stringify(reportList))
     let obj: any = {}
     obj.title = 'KPI Arrival'
-    obj.name = pie_chart_kpi_arrival.value[0].paramsdata.name
+    obj.name = pie_chart_kpi_arrival.value[0]?.paramsdata?.name || ''
     sessionStorage.setItem('tagsList', JSON.stringify(obj))
     router.push({
       path: '/tracking'
@@ -880,10 +872,21 @@ function handleImageClick(event) {
             <div class="management_content" v-for="(item, index) in Management" :key="index">
               <div class="management_flex">
                 <div class="content_title">{{ item.title }}</div>
-                <div><el-switch v-model="item.switchValue" :disabled="item.isRevenueDisplay != undefined && item.isRevenueDisplay == false" /></div>
+                <div>
+                  <el-switch
+                    v-model="item.switchValue"
+                    :disabled="item.isRevenueDisplay != undefined && item.isRevenueDisplay == false"
+                  />
+                </div>
               </div>
               <div class="content_text">{{ item.text }}</div>
-              <div class="content_text_warining" v-if="item.isRevenueDisplay != undefined && item.isRevenueDisplay == false">*To ensure the accuracy of the data display, this report needs to be configured and displayed after communicating clearly with Sales.</div>
+              <div
+                class="content_text_warining"
+                v-if="item.isRevenueDisplay != undefined && item.isRevenueDisplay == false"
+              >
+                *To ensure the accuracy of the data display, this report needs to be configured and
+                displayed after communicating clearly with Sales.
+              </div>
             </div>
             <el-divider />
             <div class="tips">
@@ -1167,6 +1170,7 @@ function handleImageClick(event) {
                   v-vloading="containerLoading"
                   style="height: 300px"
                   :isRevenue="true"
+                  save-image-name="Container Count"
                   :barHeight="{ height: '300px' }"
                 ></BarChart>
               </template>
@@ -1212,6 +1216,7 @@ function handleImageClick(event) {
                       :SellerData="Top10Obj.OriginData"
                       v-vloading="TopOriginLoading"
                       :Interval="Top1OInterval"
+                      saveImageName="Top 10 Origin"
                     ></SellerChart>
                   </div>
                   <div class="map">
@@ -1229,10 +1234,11 @@ function handleImageClick(event) {
                       :SellerData="Top10Obj.DestinationData"
                       :Interval="Top1OInterval_dest"
                       v-vloading="TopOriginLoading"
-                      style="height: 272px"
+                      saveImageName="Top 10 Destination"
+                      style="height: 310px"
                     ></SellerChart>
                   </div>
-                  <div class="map" style="height: 272px">
+                  <div class="map" style="height: 310px">
                     <!-- <TopMap :obj="dashboardObj.Top10faultData" ref="Top10Destinationref"></TopMap> -->
                     <TopMap ref="Top10Destinationref"></TopMap>
                   </div>
@@ -1267,6 +1273,7 @@ function handleImageClick(event) {
                 <BarChart
                   ref="seller_chart_CO2_origin"
                   :BarData="EmissionObj"
+                  save-image-name="CO2e Emission by Origin (Top 10)"
                   @clickParams="ClickParams(item.title)"
                   v-vloading="EmissionLoading"
                   style="height: 250px"
@@ -1301,6 +1308,7 @@ function handleImageClick(event) {
                   v-vloading="DestinationLoading"
                   style="height: 250px"
                   :isRevenue="true"
+                  save-image-name="CO2e Emission by Destination (Top 10)"
                   @clickParams="ClickParams(item.title)"
                   :barHeight="{ height: '250px' }"
                 ></BarChart>

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

@@ -7,7 +7,8 @@ import { formatNumber } from '@/utils/tools'
 const themeStore = useThemeStore()
 const props = defineProps({
   BarData: Object,
-  barHeight: Object
+  barHeight: Object,
+  saveImageName: String
 })
 const bar_data = ref(props.BarData)
 const bar_ref = ref()
@@ -21,7 +22,9 @@ watch(
     initOption.yAxis.max = Max.value
     initOption.yAxis.interval = interval.value
     initOption.title.text = bar_title.value
-    initChart()
+    nextTick(() => {
+      barChart.value.setOption(initOption)
+    })
   },
   {
     deep: true
@@ -62,7 +65,7 @@ const Name = computed(() => {
 const initOption = reactive({
   //标题
   title: {
-    text: bar_title.value || 'Total:', //主标题
+    text: bar_title.value || '', //主标题
     left: 19,
     top: 9.5,
     textStyle: {
@@ -144,13 +147,13 @@ const initOption = reactive({
       show: true,
       lineStyle: {
         type: 'dashed',
-        color: '#eaebed'
+        color: '#3F434A'
       }
     },
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#eaebed'
+        color: '#3F434A'
       }
     },
     axisLabel: {
@@ -177,24 +180,56 @@ const initOption = reactive({
       color: '#646A73'
     }
   },
+  toolbox: {
+    top: 6,
+    right: 8,
+    iconStyle: {
+      borderColor: '#2B2F36'
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#ff7500'
+      } // hover上去时的颜色
+    },
+    feature: {
+      saveAsImage: {
+        show: true,
+        name: bar_title.value || props.saveImageName || 'data',
+        type: 'png',
+        backgroundColor: '#fff'
+      }
+    },
+    showTitle: false
+  },
   series: bar_series.value
 })
 onMounted(() => {
   initChart()
   clickParams()
+
   watch(
     () => themeStore.theme,
     (newVal) => {
       if (newVal === 'dark') {
-        initOption.xAxis.axisLine.lineStyle.color = '#3F434A'
-        initOption.yAxis.axisLine.lineStyle.color = '#3F434A'
-        initOption.yAxis.splitLine.lineStyle.color = '#3F434A'
-        initChart()
+        initOption.title.textStyle.color = '#f0f1f3'
+        initOption.xAxis.axisLine.lineStyle.color = '#8d9095'
+        initOption.yAxis.axisLine.lineStyle.color = '#8d9095'
+        initOption.yAxis.splitLine.lineStyle.color = '#8d9095'
+        initOption.toolbox.iconStyle.borderColor = '#f0f1f3'
+        initOption.toolbox.feature.saveAsImage.backgroundColor = '#3F434A'
+        nextTick(() => {
+          barChart.value.setOption(initOption)
+        })
       } else {
+        initOption.title.textStyle.color = '#2B2F36'
         initOption.xAxis.axisLine.lineStyle.color = '#eaebed'
         initOption.yAxis.axisLine.lineStyle.color = '#eaebed'
         initOption.yAxis.splitLine.lineStyle.color = '#eaebed'
-        initChart()
+        initOption.toolbox.iconStyle.borderColor = '#2B2F36'
+        initOption.toolbox.feature.saveAsImage.backgroundColor = '#fff'
+        nextTick(() => {
+          barChart.value.setOption(initOption)
+        })
       }
     },
     {
@@ -210,21 +245,20 @@ const paramsdata = ref({
   type: ''
 })
 const clickParams = () => {
-  const bar_chart = echarts.init(bar_ref.value)
   // 监听点击事件
-  bar_chart.on('click', function (params) {
+  barChart.value.on('click', function (params) {
     paramsdata.value.name = params.name
     paramsdata.value.type = params.seriesName
     emits('ClickParams')
   })
 }
+const barChart = ref()
 const initChart = () => {
-  const bar_chart = echarts.init(bar_ref.value)
+  barChart.value = echarts.init(bar_ref.value)
   //图表响应式
   window.addEventListener('resize', () => {
-    bar_chart.resize()
+    barChart.value.resize()
   })
-  bar_chart.setOption(initOption)
 }
 
 defineExpose({

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

@@ -4,6 +4,7 @@ import * as echarts from 'echarts'
 import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
 import { formatNumber } from '@/utils/tools'
+
 const props = defineProps({
   PieData: Object
 })
@@ -15,7 +16,9 @@ watch(
     pie_data.value = current
     initOption.title.text = pie_title.value
     initOption.toolbox.feature.saveAsImage.name = downloadName.value
-    initChart()
+    nextTick(() => {
+      pieChart.value.setOption(initOption)
+    })
   },
   {
     deep: true
@@ -46,6 +49,25 @@ const downloadName = computed(() => {
 })
 
 const initOption: any = reactive({
+  // graphic: {
+  //   elements: [
+  //     {
+  //       type: 'text',
+  //       right: '16',
+  //       bottom: '16',
+  //       style: {
+  //         text: 'Total: $12,500',
+  //         fontSize: 14,
+  //         fill: '#666'
+  //       },
+  //       // 直接设置 onclick 回调
+  //       onclick: function () {
+  //         alert('Total clicked!')
+  //         // 或者执行其他逻辑
+  //       }
+  //     }
+  //   ]
+  // },
   //标题
   title: {
     text: pie_title.value || '', //主标题
@@ -90,6 +112,8 @@ const initOption: any = reactive({
     }
   },
   toolbox: {
+    top: 6,
+    right: 8,
     iconStyle: {
       borderColor: '#2B2F36'
     },
@@ -98,10 +122,10 @@ const initOption: any = reactive({
         borderColor: '#ff7500'
       } // hover上去时的颜色
     },
-    show: false, // 显示工具箱
+    show: true, // 显示工具箱
     feature: {
-      restore: { show: true },
-      saveAsImage: { show: true, name: downloadName.value }
+      // restore: { show: true },
+      saveAsImage: { show: true, name: downloadName.value, type: 'png', backgroundColor: '#fff' }
     },
     showTitle: false
   },
@@ -143,15 +167,13 @@ const initOption: any = reactive({
       length2: 0,
       maxSurfaceAngle: 80
     },
-    labelLayout: function (params: any) {
-      const pie_chart = echarts.init(pie_ref.value)
-      const isLeft = params.labelRect.x < pie_chart.getWidth() / 2
+    labelLayout: (params) => {
+      const isLeft = params.labelRect.x < containerWidth.value / 2
       const points = params.labelLinePoints
-      // Update the end point.
-      points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
-      return {
-        labelLinePoints: points
+      if (points?.[2]) {
+        points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
       }
+      return { labelLinePoints: points }
     }
   },
   legend: {
@@ -168,49 +190,62 @@ const initOption: any = reactive({
     }
   }
 })
-
+const containerWidth = ref(0)
+onMounted(() => {
+  if (pie_ref.value) {
+    containerWidth.value = pie_ref.value.clientWidth
+    // 如果需要响应式 resize，可用 ResizeObserver
+  }
+})
 onMounted(() => {
   initChart()
   clickParams()
-  watch(
-    () => themeStore.theme,
-    (newVal) => {
-      if (newVal === 'dark') {
-        initOption.title.textStyle.color = '#f0f1f3'
-        initOption.series.label.rich.time.color = 'rgba(240,241,243,0.7)'
-        initOption.series.label.rich.name.color = 'rgba(240,241,243,0.7)'
-        initOption.legend.textStyle.color = 'rgba(240,241,243,0.7)'
-        initChart()
-      } else {
-        initOption.title.textStyle.color = '#2B2F36'
-        initOption.series.label.rich.time.color = '#999'
-        initOption.series.label.rich.name.color = '#646A73'
-        initOption.legend.textStyle.color = '#646A73'
-        initChart()
-      }
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  )
 })
+watch(
+  () => themeStore.theme,
+  (newVal) => {
+    if (newVal === 'dark') {
+      initOption.title.textStyle.color = '#f0f1f3'
+      initOption.series.label.rich.time.color = 'rgba(240,241,243,0.7)'
+      initOption.series.label.rich.name.color = 'rgba(240,241,243,0.7)'
+      initOption.legend.textStyle.color = 'rgba(240,241,243,0.7)'
+      initOption.toolbox.iconStyle.borderColor = '#f0f1f3'
+      initOption.toolbox.feature.saveAsImage.backgroundColor = '#2B2F36'
+      nextTick(() => {
+        pieChart.value.setOption(initOption)
+      })
+    } else {
+      initOption.title.textStyle.color = '#2B2F36'
+      initOption.series.label.rich.time.color = '#999'
+      initOption.series.label.rich.name.color = '#646A73'
+      initOption.legend.textStyle.color = '#646A73'
+      initOption.toolbox.iconStyle.borderColor = '#2B2F36'
+      initOption.toolbox.feature.saveAsImage.backgroundColor = '#fff'
+      nextTick(() => {
+        pieChart.value.setOption(initOption)
+      })
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
 const emits = defineEmits(['ClickParams'])
 const paramsdata = ref()
+const pieChart = ref()
 const clickParams = () => {
-  const pie_chart = echarts.init(pie_ref.value)
   // 监听点击事件
-  pie_chart.on('click', function (params) {
+  pieChart.value.on('click', function (params) {
     paramsdata.value = params.data
     emits('ClickParams')
   })
 }
 const initChart = () => {
-  const pie_chart = echarts.init(pie_ref.value)
-  pie_chart.setOption(initOption)
+  pieChart.value = echarts.init(pie_ref.value)
   //图表响应式
   window.addEventListener('resize', () => {
-    pie_chart.resize()
+    pieChart.value.resize()
   })
 }
 defineExpose({

src/views/Dashboard/src/components/RevenueChart.vue

@@ -23,9 +23,10 @@ watch(
     initOption.xAxis.data = barName.value
     initOption.series = bar_series.value
     initOption.legend.data = Name.value
-    initOption.toolbox.feature.saveAsImage.name = downloadName.value
     initOption.toolbox.show = isShowTooltips.value
-    initChart()
+    nextTick(() => {
+      revenueChart.value.setOption(initOption)
+    })
   },
   {
     deep: true
@@ -37,7 +38,9 @@ watch(
     bar_data.value = current
     initOption.yAxis.max = Max.value
     initOption.yAxis.interval = interval.value
-    initChart()
+    nextTick(() => {
+      revenueChart.value.setOption(initOption)
+    })
   },
   {
     deep: true,
@@ -74,86 +77,10 @@ const Name = computed(() => {
     return []
   }
 })
-const downloadName = computed(() => {
-  return bar_data.value?.download_name
-})
+
 const isShowTooltips = computed(() => {
   return bar_data.value?.isShowTooltips
 })
-const exportData = ({ filename }: any) => {
-  $api
-    .RevenueDownload({
-      date_start: props.RevenueStartDate,
-      date_end: props.RevenueEndDate
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        let header: any = []
-        let data: any = []
-        let sheetname: any = []
-        let filterA = res.data.r2_cloumn.map((el: any) => {
-          return el.dataIndex
-        })
-        let titleA = res.data.r2_cloumn.map((el: any) => {
-          return el.title
-        })
-        let filterB = res.data.r3_cloumn.map((el: any) => {
-          return el.dataIndex
-        })
-        let titleB = res.data.r3_cloumn.map((el: any) => {
-          return el.title
-        })
-        let result: any = [
-          {
-            tHeader: titleA,
-            filterVal: filterA,
-            tableDatas: res.data.r2,
-            sheetName: res.data.r2_title
-          },
-          {
-            tHeader: titleB,
-            filterVal: filterB,
-            tableDatas: res.data.r3,
-            sheetName: res.data.r3_title
-          }
-        ]
-        let formatJson = (filterVal: any, jsonData: any) => {
-          return jsonData.map((v: any) => filterVal.map((j: any) => v[j]))
-        }
-        for (var i in result) {
-          header.push(result[i].tHeader)
-          sheetname.push(result[i].sheetName)
-          data.push(formatJson(result[i].filterVal, result[i].tableDatas))
-        }
-        // 将表头插入数据数组中
-        for (let i = 0; i < header.length; i++) {
-          data[i].unshift(header[i])
-        }
-        let ws_name = sheetname
-        // 创建工作簿对象
-        let wb = XLSX.utils.book_new()
-        let ws: any = []
-        // 创建每个工作表并设置列宽
-        for (let j = 0; j < header.length; j++) {
-          ws.push(XLSX.utils.aoa_to_sheet(data[j]))
-          let arr: any = []
-          header[j].forEach((val: any) => {
-            arr.push({
-              wpx: 120
-            })
-          })
-          ws[j]['!cols'] = arr
-        }
-        // 将工作表对象添加到工作簿中
-        for (let k = 0; k < header.length; k++) {
-          wb.SheetNames.push(ws_name[k])
-          wb.Sheets[ws_name[k]] = ws[k]
-        }
-        XLSX.writeFile(wb, filename + '.xlsx') // 导出文件
-      }
-    })
-    .finally(() => {})
-}
 
 // 数额
 const initOption = reactive({
@@ -284,19 +211,20 @@ const initOption = reactive({
         borderColor: '#ff7500'
       } // hover上去时的颜色
     },
-    itemSize: 25,
     show: isShowTooltips.value, // 显示工具箱
+    top: 6,
+    right: 8,
     feature: {
-      saveAsImage: { show: false, name: downloadName.value },
-      myTool1: {
-        show: true,
-        title: 'update',
-        icon: 'image://' + updateIcon,
-        onclick: function () {
-          let filename = 'Revenue Spent Details ' + barName.value[0] + '-' + barName.value[barName.value.length - 1]
-          exportData({ filename: filename })
-        }
-      }
+      saveAsImage: { show: true, name: 'Revenue Spent', type: 'png', backgroundColor: '#fff' }
+      // myTool1: {
+      //   show: true,
+      //   title: 'update',
+      //   icon: 'image://' + updateIcon,
+      //   onclick: function () {
+      //     let filename = 'Revenue Spent Details ' + barName.value[0] + '-' + barName.value[barName.value.length - 1]
+      //     exportData({ filename: filename })
+      //   }
+      // }
     },
     showTitle: false
   }
@@ -307,19 +235,27 @@ onMounted(() => {
     () => themeStore.theme,
     (newVal) => {
       if (newVal === 'dark') {
-        initOption.title.textStyle.color = '#f0f1f3'
+        initOption.title.textStyle.color = '#fff'
         initOption.xAxis.axisLine.lineStyle.color = '#3F434A'
         initOption.xAxis.axisLine.lineStyle.color = '#3F434A'
         initOption.yAxis.axisLine.lineStyle.color = '#3F434A'
         initOption.legend.textStyle.color = 'rgba(240,241,243,0.7)'
-        initChart()
+        initOption.toolbox.iconStyle.borderColor = '#f0f1f3'
+        initOption.toolbox.feature.saveAsImage.backgroundColor = '#3F434A'
+        nextTick(() => {
+          revenueChart.value.setOption(initOption)
+        })
       } else {
         initOption.title.textStyle.color = '#2B2F36'
         initOption.xAxis.axisLine.lineStyle.color = '#eaebed'
         initOption.yAxis.axisLine.lineStyle.color = '#eaebed'
         initOption.yAxis.splitLine.lineStyle.color = '#eaebed'
         initOption.legend.textStyle.color = '#646A73'
-        initChart()
+        initOption.toolbox.iconStyle.borderColor = '#2B2F36'
+        initOption.toolbox.feature.saveAsImage.backgroundColor = '#fff'
+        nextTick(() => {
+          revenueChart.value.setOption(initOption)
+        })
       }
     },
     {
@@ -329,13 +265,14 @@ onMounted(() => {
   )
 })
 
+const revenueChart = ref()
 const initChart = () => {
-  const bar_chart = echarts.init(bar_ref.value)
+  revenueChart.value = echarts.init(bar_ref.value)
   //图表响应式
   window.addEventListener('resize', () => {
-    bar_chart.resize()
+    revenueChart.value.resize()
   })
-  bar_chart.on('legendselectchanged', function (event: any) {
+  revenueChart.value.on('legendselectchanged', function (event: any) {
     const selected = event.selected
     let trueCount = 0
     let trueObj: any = {}
@@ -380,9 +317,8 @@ const initChart = () => {
       initOption.yAxis.max = max
       initOption.yAxis.interval = interval
     }
-    bar_chart.setOption(initOption)
+    revenueChart.value.setOption(initOption)
   })
-  bar_chart.setOption(initOption)
 }
 </script>
 

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

@@ -7,7 +7,8 @@ import { formatNumber } from '@/utils/tools'
 const themeStore = useThemeStore()
 const props = defineProps({
   SellerData: Array,
-  Interval: Object
+  Interval: Object,
+  saveImageName: String
 })
 const seller_data = ref(props.SellerData)
 const seller_interval = ref(props.Interval)
@@ -16,7 +17,9 @@ watch(
   () => props.SellerData,
   (current) => {
     seller_data.value = current
-    initChart()
+    nextTick(() => {
+      initChart()
+    })
   },
   {
     deep: true
@@ -28,7 +31,9 @@ watch(
     seller_interval.value = current
     initOption.xAxis.max = Max.value
     initOption.xAxis.interval = interval.value
-    initChart()
+    nextTick(() => {
+      initChart()
+    })
   },
   {
     deep: true
@@ -63,10 +68,10 @@ const ColorValue = computed(() => {
 const initOption = reactive({
   // 间距
   grid: {
-    top: '5%',
+    top: '12%',
     left: '3%',
     right: '6%',
-    bottom: '5%',
+    bottom: '3%',
     containLabel: true // 距离包含坐标轴上的文字
   },
   // hover时的文字显示
@@ -163,7 +168,23 @@ const initOption = reactive({
         }
       }
     }
-  ]
+  ],
+  toolbox: {
+    top: 4,
+    right: 8,
+    iconStyle: {
+      borderColor: '#ed6d00'
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#ff7500'
+      } // hover上去时的颜色
+    },
+    feature: {
+      saveAsImage: { show: true, name: props.saveImageName, type: 'png', backgroundColor: '#fff' }
+    },
+    showTitle: false
+  }
 })
 
 onMounted(() => {
@@ -174,9 +195,13 @@ onMounted(() => {
     (newVal) => {
       if (newVal === 'dark') {
         initOption.xAxis.splitLine.lineStyle.color = '#3F434A'
+        initOption.toolbox.iconStyle.borderColor = '#f0f1f3'
+        initOption.toolbox.feature.saveAsImage.backgroundColor = '#2B2F36'
         initChart()
       } else {
         initOption.xAxis.splitLine.lineStyle.color = '#eaebed'
+        initOption.toolbox.iconStyle.borderColor = '#2B2F36'
+        initOption.toolbox.feature.saveAsImage.backgroundColor = '#fff'
         initChart()
       }
     },
@@ -235,6 +260,6 @@ defineExpose({
 }
 #seller_chart {
   width: 100%;
-  height: 272px;
+  height: 310px;
 }
 </style>

src/views/Dashboard/src/components/TopMap.vue

@@ -137,7 +137,7 @@ defineExpose({
 <template>
   <div
     id="map"
-    style="width: 100%; height: 272px"
+    style="width: 100%; height: 310px"
     :class="{ 'dark-mode': themeStore.theme === 'dark' }"
   ></div>
 </template>

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

@@ -158,6 +158,7 @@ router.afterEach(() => {
 
 // 路由跳转函数
 const changeRouter = (path: any) => {
+  sessionStorage.removeItem('reportList')
   if (localStorage.getItem('loginAI')) {
     localStorage.removeItem('loginAI')
     emitter.emit('login-success')
@@ -175,6 +176,7 @@ const changeRouter = (path: any) => {
   }
   if (sessionStorage.getItem('searchTableQeuryTracking')) {
     sessionStorage.removeItem('searchTableQeuryTracking')
+    sessionStorage.removeItem('tagsList')
   }
   if (sessionStorage.getItem('clickParams')) {
     sessionStorage.removeItem('clickParams')

src/views/Tracking/src/TrackingView.vue

@@ -8,6 +8,12 @@ import MoreFilters from '@/components/MoreFilters'
 import { ref, reactive, onMounted } from 'vue'
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
 import { useHeaderSearch } from '@/stores/modules/headerSearch'
+import { useUserStore } from '@/stores/modules/user'
+import dayjs from 'dayjs'
+
+const userStore = useUserStore()
+const formatDate = userStore.dateFormat
+const valueFormatDate = 'MM/DD/YYYY'
 
 const headerSearch = useHeaderSearch()
 
@@ -33,18 +39,18 @@ const handleClose = (tag: any) => {
     sessionStorage.getItem('reportList') != null ||
     sessionStorage.getItem('reportList') != '{}'
   ) {
-    const reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
+    const reportList = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
     let data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
     if (tag.includes('Transport')) {
-      delete reportlist.transport_mode
+      delete reportList.transport_mode
     } else if (tag.includes('Day') || tag.includes('CO2e')) {
-      delete reportlist._reportRef
-      delete reportlist._reportType
-      delete reportlist._reportRefe_date
-      delete reportlist._reportRefb_date
-      delete reportlist._reportStationType
-      delete reportlist._reportDataType
-      delete reportlist._reportStationType
+      delete reportList._reportRef
+      delete reportList._reportType
+      delete reportList._reportRefe_date
+      delete reportList._reportRefb_date
+      delete reportList._reportStationType
+      delete reportList._reportDataType
+      delete reportList._reportStationType
       filterData.dashboardData = []
       data = {}
     } else if (tag.includes('ETD')) {
@@ -53,24 +59,24 @@ const handleClose = (tag: any) => {
           filterData.daterangeData.splice(index, 1)
         }
       })
-      delete reportlist.etd_start
-      delete reportlist.etd_end
+      delete reportList.etd_start
+      delete reportList.etd_end
     } else if (tag.includes('ETA')) {
       filterData.daterangeData.forEach((item: any, index: any) => {
         if (item.includes('ETA')) {
           filterData.daterangeData.splice(index, 1)
         }
       })
-      delete reportlist.eta_start
-      delete reportlist.eta_end
+      delete reportList.eta_start
+      delete reportList.eta_end
     } else if (tag.includes('Origin')) {
-      delete reportlist.shipper_city
-      delete reportlist._city_name
+      delete reportList.shipper_city
+      delete reportList._city_name
       filterData.dashboardData = []
     } else if (tag.includes('Destination')) {
-      delete reportlist.consignee_city
+      delete reportList.consignee_city
     }
-    sessionStorage.setItem('reportList', JSON.stringify(reportlist))
+    sessionStorage.setItem('reportList', JSON.stringify(reportList))
     sessionStorage.setItem('tagsList', JSON.stringify(data))
   }
   if (tag.includes('Transport')) {
@@ -142,14 +148,16 @@ const handleClose = (tag: any) => {
   } else if (tag.includes('Voyage')) {
     delete searchTableQeuryTracking['f_voyage/voyage']
   }
+
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  Gettrackingdata()
+  getTrackingData()
 }
 // 筛选框查询
 const FiltersSeach = (val: any, value: any) => {
   searchTableQeuryTracking[val] = value
+
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  Gettrackingdata()
+  getTrackingData()
 }
 //TransportSearch
 const TransportSearch = (val: any) => {
@@ -179,36 +187,33 @@ const defaultTransport = (val: any, value: any) => {
     searchTableQeuryTracking = value
   }
 }
-//defaultDate
-const defaultDate = (val: any, value: any, data: any) => {
+const setFilterData = (dateRangeData: any) => {
   filterData.daterangeData = []
-  if (Object.keys(val).length) {
-    for (const key in val) {
-      let str = `${key}:${val[key]}`
-      filterData.daterangeData.push(str)
-    }
+  for (const key in dateRangeData) {
+    const startEnd = dateRangeData[key].data[0] + ' To ' + dateRangeData[key].data[1]
+    let str = `${key}:${startEnd}`
+    filterData.daterangeData.push(str)
   }
+}
+//defaultDate
+const defaultDate = (dateRangeData: any, data: any) => {
+  setFilterData(dateRangeData)
 
   if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
     if (
       sessionStorage.getItem('clickParams') === null ||
       sessionStorage.getItem('clickParams') === '{}'
     ) {
-      if (Object.keys(value).length == 0) {
+      if (Object.keys(dateRangeData).length == 0) {
         delete searchTableQeuryTracking.etd_start
         delete searchTableQeuryTracking.etd_end
       }
-      for (const key in value) {
-        searchTableQeuryTracking.etd_start = value[key].data[0]
-        searchTableQeuryTracking.etd_end = value[key].data[1]
+      for (const key in dateRangeData) {
+        searchTableQeuryTracking.etd_start = dateRangeData[key].data[0]
+
+        searchTableQeuryTracking.etd_end = dateRangeData[key].data[1]
       }
     }
-    // else {
-    //   for (const key in value) {
-    //     searchTableQeuryTracking.etd_start = value[key].data[0]
-    //     searchTableQeuryTracking.etd_end = value[key].data[1]
-    //   }
-    // }
   } else {
     searchTableQeuryTracking = data
     if (searchTableQeuryTracking._textSearch) {
@@ -221,22 +226,16 @@ const defaultDate = (val: any, value: any, data: any) => {
   if (trackingData) {
     // 根据顶部搜索框的搜索结果赋值
     initDataByHeaderSearch()
-  } else {
-    Gettrackingdata()
+  } else if (!trackingData && !sessionStorage.getItem('clickParams')) {
+    getTrackingData()
   }
 
   renderTagsData()
 }
 //DateRangeSearch
-const DateRangeSearch = (val: any, value: any) => {
-  filterData.daterangeData = []
-  if (Object.keys(val).length) {
-    for (const key in val) {
-      let str = `${key}:${val[key]}`
-      filterData.daterangeData.push(str)
-    }
-  }
-  if (Object.keys(value).length == 0) {
+const DateRangeSearch = (dateRangeData: any) => {
+  setFilterData(dateRangeData)
+  if (Object.keys(dateRangeData).length == 0) {
     delete searchTableQeuryTracking.etd_start
     delete searchTableQeuryTracking.etd_end
     delete searchTableQeuryTracking.eta_start
@@ -244,20 +243,35 @@ const DateRangeSearch = (val: any, value: any) => {
     delete searchTableQeuryTracking.created_time_start
     delete searchTableQeuryTracking.created_time_end
   }
-  for (const key in value) {
+  const fieldList = [
+    {
+      title: 'ETD',
+      keys: ['etd_start', 'etd_end']
+    },
+    { title: 'ETA', keys: ['eta_start', 'eta_end'] },
+    { title: 'Creation Time', keys: ['created_time_start', 'created_time_end'] }
+  ]
+  fieldList.forEach((item) => {
+    if (!dateRangeData.hasOwnProperty(item.title)) {
+      // 删除不存在的字段
+      searchTableQeuryTracking[item.keys[0]] = undefined
+      searchTableQeuryTracking[item.keys[1]] = undefined
+    }
+  })
+  for (const key in dateRangeData) {
     if (key == 'ETD') {
-      searchTableQeuryTracking.etd_start = value[key].data[0]
-      searchTableQeuryTracking.etd_end = value[key].data[1]
+      searchTableQeuryTracking.etd_start = dateRangeData[key].data[0]
+      searchTableQeuryTracking.etd_end = dateRangeData[key].data[1]
     } else if (key == 'ETA') {
-      searchTableQeuryTracking.eta_start = value[key].data[0]
-      searchTableQeuryTracking.eta_end = value[key].data[1]
+      searchTableQeuryTracking.eta_start = dateRangeData[key].data[0]
+      searchTableQeuryTracking.eta_end = dateRangeData[key].data[1]
     } else {
-      searchTableQeuryTracking.created_time_start = value[key].data[0]
-      searchTableQeuryTracking.created_time_end = value[key].data[1]
+      searchTableQeuryTracking.created_time_start = dateRangeData[key].data[0]
+      searchTableQeuryTracking.created_time_end = dateRangeData[key].data[1]
     }
   }
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  Gettrackingdata()
+  getTrackingData()
   renderTagsData()
 }
 //MoreFiltersSearch
@@ -325,7 +339,7 @@ const MoreFiltersSearch = (val: any, value: any) => {
     }
   }
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  Gettrackingdata()
+  getTrackingData()
   renderTagsData()
 }
 const defaultMorefilters = (val: any, value: any, data: any) => {
@@ -417,19 +431,18 @@ const clearfilters = () => {
     sessionStorage.getItem('reportList') != null ||
     sessionStorage.getItem('reportList') != '{}'
   ) {
-    let reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
-    let data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
-    reportlist = {}
-    data = {}
-    sessionStorage.setItem('reportList', JSON.stringify(reportlist))
-    sessionStorage.setItem('tagsList', JSON.stringify(data))
-  } else {
-    searchTableQeuryTracking.filterTag = ['All']
+    // sessionStorage.removeItem('reportList')
+    sessionStorage.removeItem('tagsList')
   }
-  Gettrackingdata()
+  getTrackingData()
   renderTagsData()
 }
 const renderTagsData = () => {
+  const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
+  if (Object.keys(data).length != 0) {
+    let str = `${data.title}:${data.name}`
+    !filterData.dashboardData.includes(str) && filterData.dashboardData.push(str)
+  }
   tagsData.value = []
   if (filterData.transportData.length) {
     tagsData.value.push(filterData.transportData[0])
@@ -496,6 +509,7 @@ const initDataByHeaderSearch = () => {
     sessionStorage.removeItem('searchTableQeuryTracking')
     searchTableQeuryTracking._textSearch = TrackingSearch.value
     searchTableQeuryTracking.filterTag = ['All']
+
     sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
     setTimeout(() => {
       emitter.emit('clearTag', 'Shipment status')
@@ -549,7 +563,22 @@ interface ListItem {
 const TagsList = ref<ListItem[]>([])
 const filterTag = ref(['All'])
 const isShowAlertIcon = ref(false)
-const Gettrackingdata = () => {
+const getTrackingData = () => {
+  const dateRangeKeys = [
+    'etd_start',
+    'etd_end',
+    'eta_start',
+    'eta_end',
+    'created_time_start',
+    'created_time_end'
+  ]
+  const curRangeData = {}
+  for (const key of dateRangeKeys) {
+    if (searchTableQeuryTracking[key]) {
+      curRangeData[key] = dayjs(searchTableQeuryTracking[key], formatDate).format(valueFormatDate)
+    }
+  }
+
   tableLoadingTableData.value = true
   TrackingTable_ref.value.getLoadingData(tableLoadingTableData.value)
   $api
@@ -558,7 +587,8 @@ const Gettrackingdata = () => {
       ps: TrackingTable_ref.value.pageInfo.pageSize,
       rc: -1,
       other_filed: '',
-      ...searchTableQeuryTracking
+      ...searchTableQeuryTracking,
+      ...curRangeData
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -594,28 +624,64 @@ const Gettrackingdata = () => {
         }
       }
     })
+    .finally(() => {
+      sessionStorage.removeItem('clickParams')
+    })
 }
 onMounted(() => {
   if (
     sessionStorage.getItem('clickParams') != null &&
     sessionStorage.getItem('clickParams') != '{}'
   ) {
-    if (sessionStorage.getItem('searchTableQeuryTracking') != null) {
-      searchTableQeuryTracking = {}
-    }
-    const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
-    const reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
-    for (const key in reportlist) {
-      searchTableQeuryTracking[key] = reportlist[key]
-    }
-    if (reportlist._city_name == '' || reportlist._city_name == undefined) {
-      if (Object.keys(data).length != 0) {
-        let str = `${data.title}:${data.name}`
-        filterData.dashboardData.push(str)
+    const reportList = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
+    for (const key in reportList) {
+      let str = ''
+      switch (key) {
+        case 'etd_start':
+          const startDate = dayjs(reportList['etd_start'], valueFormatDate).format(formatDate)
+          searchTableQeuryTracking['etd_start'] = startDate
+          const endDate = dayjs(reportList['etd_end'], valueFormatDate).format(formatDate)
+          searchTableQeuryTracking['etd_end'] = endDate
+          const startEnd = startDate + ' To ' + endDate
+          str = `ETD:${startEnd}`
+          // filterData.daterangeData.push(str)
+          break
+
+        case 'etd_end':
+          break
+        case 'eta_start':
+          const etaStart = dayjs(reportList['eta_start'], valueFormatDate).format(formatDate)
+          searchTableQeuryTracking['eta_start'] = etaStart
+          const etaEnd = dayjs(reportList['eta_end'], valueFormatDate).format(formatDate)
+          searchTableQeuryTracking['eta_end'] = etaEnd
+          str = `ETA:${etaStart} To ${etaEnd}`
+          // filterData.daterangeData.push(str)
+          break
+
+        case 'eta_end':
+          break
+        case 'created_time_start':
+          const createdTimeStart = dayjs(reportList['created_time_start'], valueFormatDate).format(
+            formatDate
+          )
+          searchTableQeuryTracking['created_time_start'] = createdTimeStart
+          const createdTimeEnd = dayjs(reportList['created_time_end'], valueFormatDate).format(
+            formatDate
+          )
+          searchTableQeuryTracking['created_time_end'] = createdTimeEnd
+          str = `Creation Time:${createdTimeStart} To ${createdTimeEnd}`
+          // filterData.daterangeData.push(str)
+          break
+        case 'created_time_end':
+          break
+        default:
+          searchTableQeuryTracking[key] = reportList[key]
       }
     }
+
+    // sessionStorage.removeItem('reportList')
     sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-    Gettrackingdata()
+    getTrackingData()
   }
   renderTagsData()
 })
@@ -625,17 +691,19 @@ const changeTag = (val: any, boolean: any) => {
   let str = 'Shipment status: ' + val
   filterData.filtersTagData.push(str)
   filterTag.value = val
+
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   if (boolean) {
-    Gettrackingdata()
+    getTrackingData()
   }
   renderTagsData()
 }
 // 点击search按钮
 const SearchInput = () => {
   searchTableQeuryTracking._textSearch = TrackingSearch.value
+
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  Gettrackingdata()
+  getTrackingData()
 }
 
 import TrackingGuide from './components/TrackingGuide.vue'

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

@@ -545,8 +545,8 @@ const handleLinkClick = (row: any, column: any) => {
       path: '/tracking/detail',
       query: { a: row.__serial_no, _schemas: row._schemas }
     })
-    visitedRowState.setTrackingTableData(row['__serial_no'])
   }
+  visitedRowState.setTrackingTableData(row['__serial_no'])
 }
 
 const selectedNumber = ref(0)