feat: 整理重构代码

src/components/DateRange/index.ts

@@ -1 +1 @@
-export { default } from './src/DateRange.new.vue'
+export { default } from './src/DateRange.vue'

src/components/DateRange/src/DateRange.new.vue

@@ -1,340 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, onMounted, onBeforeMount } from 'vue'
-import IconDropDown from '@/components/IconDropDown'
-import VCalendarDate from './components/VCalendarDate.vue'
-import { useFiltersStore } from '@/stores/modules/filtersList'
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
-const searchMode = route.path.includes('booking') ? 'booking' : 'tracking'
-const etaKey = searchMode === 'booking' ? ['f_eta_start', 'f_eta_start'] : ['eta_start', 'eta_end']
-const etdKey = searchMode === 'booking' ? ['f_etd_start', 'f_etd_start'] : ['etd_start', 'etd_end']
-
-const filtersStore = useFiltersStore()
-const filtersList = computed(() => filtersStore.filtersList)
-
-const popoverVisible = ref(false)
-const allOtherType = ref([
-  {
-    title: 'Creation Time',
-    key: ['created_time_start', 'created_time_end']
-  }
-])
-const otherDateType = ref([])
-
-const getRangeDate = (title: string) => {
-  const data = filtersStore.getFilterByTitle(title)
-  if (data) {
-    const [startStr, endStr] = data.value
-    return [startStr, endStr]
-  } else {
-    return ['', '']
-  }
-}
-const initDate = () => {
-  etdDateRange.value = getRangeDate('ETD')
-  etaDateRange.value = getRangeDate('ETA')
-
-  otherDateType.value = []
-  filtersList.value.forEach((item) => {
-    const curIndex = allOtherType.value.findIndex((type) => type.title === item.title)
-    if (curIndex !== -1) {
-      otherDateType.value.push({
-        title: item.title,
-        value: getRangeDate(item.title)
-      })
-    }
-  })
-}
-
-const addType = () => {
-  otherDateType.value.push({
-    label: '',
-    value: ['', '']
-  })
-}
-const deleteType = (i: any) => {
-  otherDateType.value.splice(i, 1)
-}
-
-const etdDateRange = ref([])
-const etaDateRange = ref([])
-
-const emit = defineEmits(['DateRangeSearch', 'clearDaterangeTags'])
-const hasValidDate = (date: any) => {
-  return date && date.length === 2 && date[0] && date[1]
-}
-const DateRangeSearch = () => {
-  if (hasValidDate(etaDateRange.value)) {
-    filtersStore.updateFilter({
-      title: 'ETA',
-      keyType: 'dateRange',
-      value: etaDateRange.value,
-      key: etaKey
-    })
-  } else {
-    filtersStore.deleteFilterByTitle('ETA')
-  }
-
-  if (hasValidDate(etdDateRange.value)) {
-    filtersStore.updateFilter({
-      title: 'ETD',
-      keyType: 'dateRange',
-      value: etdDateRange.value,
-      key: etdKey
-    })
-  } else {
-    filtersStore.deleteFilterByTitle('ETD')
-  }
-
-  allOtherType.value.forEach((item) => {
-    const curIndex = otherDateType.value.findIndex((type) => type.title === item.title)
-    if (curIndex !== -1 && hasValidDate(otherDateType.value[curIndex]?.value)) {
-      filtersStore.updateFilter({
-        title: item.title,
-        keyType: 'dateRange',
-        value: otherDateType.value[curIndex].value,
-        key: item.key
-      })
-    } else {
-      filtersStore.deleteFilterByTitle(item.title)
-    }
-  })
-  emit('DateRangeSearch')
-  popoverVisible.value = false
-}
-
-// 清除
-const clearRest = () => {
-  filtersStore.deleteFilterByTitle('ETA')
-  filtersStore.deleteFilterByTitle('ETD')
-  allOtherType.value.forEach((item) => {
-    filtersStore.deleteFilterByTitle(item.title)
-  })
-  emit('clearDaterangeTags')
-}
-
-const closeRset = () => {
-  etdDateRange.value = []
-  etaDateRange.value = []
-  otherDateType.value = []
-}
-</script>
-<template>
-  <div class="select">
-    <el-popover
-      trigger="click"
-      :width="400"
-      :visible="popoverVisible"
-      popper-class="DaterangeClass"
-      @before-enter="initDate()"
-      @close="closeRset"
-    >
-      <template #reference>
-        <div
-          class="Date_Range"
-          @blur="popoverVisible = false"
-          @click="popoverVisible = !popoverVisible"
-        >
-          <div class="select_title">Date Range</div>
-          <span class="iconfont_icon">
-            <svg class="iconfont icon_dark" aria-hidden="true">
-              <use xlink:href="#icon-icon_dropdown_b"></use>
-            </svg>
-          </span>
-        </div>
-      </template>
-      <div class="date_header">
-        <div class="title">Date Range</div>
-        <div class="ETD">
-          <VCalendarDate CalendarTitle="ETD" v-model:date="etdDateRange"></VCalendarDate>
-        </div>
-        <div class="ETA">
-          <VCalendarDate CalendarTitle="ETA" v-model:date="etaDateRange"></VCalendarDate>
-        </div>
-        <div class="addType" v-for="(item, index) in otherDateType" :key="item.title">
-          <div>
-            <div class="ETD_title Date_Title">
-              <div class="Date_type">Date Type</div>
-              <span class="iconfont_icon" @click="deleteType(index)">
-                <svg class="iconfont icon_delete" aria-hidden="true">
-                  <use xlink:href="#icon-icon_delete_b"></use>
-                </svg>
-              </span>
-            </div>
-            <el-select
-              :suffix-icon="IconDropDown"
-              placeholder="Please Select Date Type"
-              v-model="item.title"
-            >
-              <el-option
-                v-for="ite in allOtherType"
-                :key="ite.title"
-                :label="ite.title"
-                :value="ite.title"
-              >
-              </el-option>
-            </el-select>
-          </div>
-          <div style="margin-top: 16px">
-            <VCalendarDate
-              :CalendarTitle="item.label || 'Date Range'"
-              CalendarWidth="352px"
-              v-model:date="item.value"
-              :isType="true"
-            ></VCalendarDate>
-          </div>
-        </div>
-        <div class="MoreType" @click="addType" v-if="otherDateType.length != allOtherType.length">
-          <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 class="search el-button--dark" @click="DateRangeSearch">Search</el-button>
-          </div>
-        </div>
-      </div>
-    </el-popover>
-  </div>
-</template>
-<style lang="scss" scoped>
-.iconfont_icon {
-  margin-right: 8px;
-}
-.icon_delete {
-  fill: var(--color-danger);
-}
-.select {
-  width: 186px;
-  margin-left: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-select-border);
-  border-radius: var(--border-radius-6);
-}
-.Date_Range {
-  width: 186px;
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-}
-.select_title {
-  font-size: var(--font-size-3);
-  font-weight: 400;
-  margin-left: 8.53px;
-  color: var(--color-neutral-1);
-}
-.select_icon {
-  width: 16px;
-  margin-right: 10.5px;
-}
-.select:hover {
-  border: 1px solid var(--color-theme);
-}
-.title {
-  font-weight: 700;
-  font-size: var(--font-size-5);
-  background-color: var(--color-header-bg);
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding-left: 16px;
-  border-radius: 12px 12px 0 0;
-}
-.ETD {
-  margin: 8px 16px;
-}
-.ETA {
-  margin: 16px 16px;
-}
-.ETD_title {
-  font-size: var(--font-size-2);
-  margin-bottom: 4px;
-  color: var(--color-neutral-2);
-}
-.Date_Title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-:deep(.el-dialog__header) {
-  display: none;
-}
-:deep(div.el-dialog) {
-  width: 400px;
-  padding: 0;
-  margin-top: 202px;
-  border: 1px solid var(--color-border);
-}
-:deep(div.el-dialog__body) {
-  padding: 0;
-}
-.MoreType {
-  color: var(--color-accent-2);
-  padding: 0 0 16px 16px;
-}
-:deep(.el-select__wrapper) {
-  border-radius: var(--border-radius-6);
-  height: 40px;
-}
-.addType {
-  background-color: var(--color-header-bg);
-  margin: 0 16px 8px 16px;
-  padding: 8px;
-  border-radius: var(--border-radius-6);
-}
-.daterange_bottom {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  height: 48px;
-  border-top: 1px solid var(--border-color-2);
-  margin-top: 5px;
-  font-weight: 400;
-  font-size: var(--font-size-3);
-}
-.Clear {
-  width: 81px;
-  height: 32px;
-  margin-right: 7.82px;
-}
-.search {
-  width: 86px;
-  height: 32px;
-  margin-right: 16px;
-}
-:deep(.el-date-editor .el-range__icon) {
-  position: absolute;
-  right: 16px;
-}
-@media only screen and (min-width: 1280px) {
-  .Date_Range,
-  .select {
-    width: 224px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  .Date_Range,
-  .select {
-    width: 336px;
-  }
-}
-.moretype {
-  background-color: transparent;
-  padding: 0 4px;
-  height: 24px;
-}
-.icon_dark {
-  fill: var(--color-neutral-1);
-}
-.date_header {
-  background-color: var(--management-bg-color);
-  border-radius: 12px;
-}
-.Date_type {
-  color: var(--color-neutral-2);
-}
-</style>

src/components/DateRange/src/DateRange.vue

@@ -1,227 +1,123 @@
 <script setup lang="ts">
+import { ref, watch, onMounted, onBeforeMount } from 'vue'
 import IconDropDown from '@/components/IconDropDown'
-import CalendarDate from './components/CalendarDate.vue'
-import dayjs from 'dayjs'
-import { useUserStore } from '@/stores/modules/user'
+import VCalendarDate from './components/VCalendarDate.vue'
+import { useFiltersStore } from '@/stores/modules/filtersList'
+import { useRoute } from 'vue-router'
 
-const userStore = useUserStore()
-const formatDate = userStore.dateFormat
-const valueFormatDate = 'MM/DD/YYYY'
+const route = useRoute()
+const searchMode = route.path.includes('booking') ? 'booking' : 'tracking'
+const etaKey = searchMode === 'booking' ? ['f_eta_start', 'f_eta_start'] : ['eta_start', 'eta_end']
+const etdKey = searchMode === 'booking' ? ['f_etd_start', 'f_etd_start'] : ['etd_start', 'etd_end']
+
+const filtersStore = useFiltersStore()
+const filtersList = computed(() => filtersStore.filtersList)
 
 const popoverVisible = ref(false)
-const DateType = ref()
-const DateTypeoptions = ref([
+const allOtherType = ref([
   {
-    value: 'Creation Time',
-    label: 'Creation Time'
+    title: 'Creation Time',
+    key: ['created_time_start', 'created_time_end']
   }
 ])
-const AddDateType = ref()
-AddDateType.value = []
-const AddType = () => {
-  AddDateType.value.push({
+const otherDateType = ref([])
+
+const getRangeDate = (title: string) => {
+  const data = filtersStore.getFilterByTitle(title)
+  if (data) {
+    const [startStr, endStr] = data.value
+    return [startStr, endStr]
+  } else {
+    return ['', '']
+  }
+}
+const initDate = () => {
+  etdDateRange.value = getRangeDate('ETD')
+  etaDateRange.value = getRangeDate('ETA')
+
+  otherDateType.value = []
+  filtersList.value.forEach((item) => {
+    const curIndex = allOtherType.value.findIndex((type) => type.title === item.title)
+    if (curIndex !== -1) {
+      otherDateType.value.push({
+        title: item.title,
+        value: getRangeDate(item.title)
+      })
+    }
+  })
+}
+
+const addType = () => {
+  otherDateType.value.push({
     label: '',
-    value: ''
+    value: ['', '']
   })
 }
 const deleteType = (i: any) => {
-  AddDateType.value.splice(i, 1)
-  DateType.value = ''
-  clearDateCreation()
-}
-const props = defineProps({
-  isShipment: Boolean
-})
-const etdDateRange = ref()
-etdDateRange.value = []
-const etaDateRange = ref()
-etaDateRange.value = []
-const DateCreation = ref()
-// 查询默认日期
-const defaultDate = () => {
-  // 工具函数：安全格式化日期范围
-  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]
-  }
+  otherDateType.value.splice(i, 1)
+}
 
-  // 工具函数：设置 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] }
-    }
-  }
+const etdDateRange = ref([])
+const etaDateRange = ref([])
 
-  // 工具函数：设置 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] }]
+const emit = defineEmits(['DateRangeSearch', 'clearDaterangeTags'])
+const hasValidDate = (date: any) => {
+  return date && date.length === 2 && date[0] && date[1]
+}
+const DateRangeSearch = () => {
+  if (hasValidDate(etaDateRange.value)) {
+    filtersStore.updateFilter({
+      title: 'ETA',
+      keyType: 'dateRange',
+      value: etaDateRange.value,
+      key: etaKey
+    })
+  } else {
+    filtersStore.deleteFilterByTitle('ETA')
   }
 
-  // 默认时间范围（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 {
-      // 场景 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
-        ]
-        etaDateRange.value = [
-          trackingData.eta_start ? trackingData.eta_start : null,
-          trackingData.eta_end ? trackingData.eta_end : null
-        ]
-        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
-          )
-        }
-      }
-    }
-    emitPayload = trackingData
+  if (hasValidDate(etdDateRange.value)) {
+    filtersStore.updateFilter({
+      title: 'ETD',
+      keyType: 'dateRange',
+      value: etdDateRange.value,
+      key: etdKey
+    })
   } 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
-        )
-      }
-    }
+    filtersStore.deleteFilterByTitle('ETD')
   }
-  return emitPayload
-}
-const daterangedata = ref()
-daterangedata.value = []
-let daterangeObj2: any = {}
-const DateRangeChange = (val: any) => {
-  if (val.data != null) {
-    val.data = [
-      dayjs(val.data[0], valueFormatDate).format(formatDate),
-      dayjs(val.data[1], valueFormatDate).format(formatDate)
-    ]
-    daterangeObj2[val.title] = val
-  } else {
-    delete daterangeObj2[val.title]
-    if (val.title == 'ETD') {
-      etdDateRange.value = []
-    } else if (val.title == 'ETA') {
-      etaDateRange.value = []
+
+  allOtherType.value.forEach((item) => {
+    const curIndex = otherDateType.value.findIndex((type) => type.title === item.title)
+    if (curIndex !== -1 && hasValidDate(otherDateType.value[curIndex]?.value)) {
+      filtersStore.updateFilter({
+        title: item.title,
+        keyType: 'dateRange',
+        value: otherDateType.value[curIndex].value,
+        key: item.key
+      })
     } else {
-      DateCreation.value = []
-      AddDateType.value = []
-      DateType.value = ''
+      filtersStore.deleteFilterByTitle(item.title)
     }
-  }
-}
-const emit = defineEmits(['DateRangeSearch', 'clearDaterangeTags', 'defaultDate'])
-const DateRangeSearch = () => {
-  emit('DateRangeSearch', daterangeObj2)
+  })
+  emit('DateRangeSearch')
   popoverVisible.value = false
 }
 
 // 清除
 const clearRest = () => {
+  filtersStore.deleteFilterByTitle('ETA')
+  filtersStore.deleteFilterByTitle('ETD')
+  allOtherType.value.forEach((item) => {
+    filtersStore.deleteFilterByTitle(item.title)
+  })
   emit('clearDaterangeTags')
-  clearETdDateRange()
-  clearEtaDateRange()
-  clearDateCreation()
-  clearDaterangeObj()
 }
-// 清除EDT
-const clearETdDateRange = () => {
+
+const closeRset = () => {
   etdDateRange.value = []
-  delete daterangeObj2['ETD']
-}
-// 清除EDA
-const clearEtaDateRange = () => {
   etaDateRange.value = []
-  delete daterangeObj2['ETA']
-}
-// 清除Creation Time
-const clearDateCreation = () => {
-  DateCreation.value = []
-  AddDateType.value = []
-  DateType.value = ''
-  delete daterangeObj2['Creation Time']
-}
-// 清除 daterangeObj
-const clearDaterangeObj = () => {
-  daterangeObj2 = {}
+  otherDateType.value = []
 }
 </script>
 <template>
@@ -231,8 +127,8 @@ const clearDaterangeObj = () => {
       :width="400"
       :visible="popoverVisible"
       popper-class="DaterangeClass"
-      @before-enter="defaultDate()"
-      @hide="clearDateCreation()"
+      @before-enter="initDate()"
+      @close="closeRset"
     >
       <template #reference>
         <div
@@ -251,20 +147,12 @@ const clearDaterangeObj = () => {
       <div class="date_header">
         <div class="title">Date Range</div>
         <div class="ETD">
-          <CalendarDate
-            CalendarTitle="ETD"
-            :Date="etdDateRange"
-            @DateRangeChange="DateRangeChange"
-          ></CalendarDate>
+          <VCalendarDate CalendarTitle="ETD" v-model:date="etdDateRange"></VCalendarDate>
         </div>
         <div class="ETA">
-          <CalendarDate
-            CalendarTitle="ETA"
-            :Date="etaDateRange"
-            @DateRangeChange="DateRangeChange"
-          ></CalendarDate>
+          <VCalendarDate CalendarTitle="ETA" v-model:date="etaDateRange"></VCalendarDate>
         </div>
-        <div class="AddType" v-for="(item, index) in AddDateType" :key="item.value">
+        <div class="addType" v-for="(item, index) in otherDateType" :key="item.title">
           <div>
             <div class="ETD_title Date_Title">
               <div class="Date_type">Date Type</div>
@@ -277,28 +165,27 @@ const clearDaterangeObj = () => {
             <el-select
               :suffix-icon="IconDropDown"
               placeholder="Please Select Date Type"
-              v-model="item.label"
+              v-model="item.title"
             >
               <el-option
-                v-for="item in DateTypeoptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="ite in allOtherType"
+                :key="ite.title"
+                :label="ite.title"
+                :value="ite.title"
               >
               </el-option>
             </el-select>
           </div>
           <div style="margin-top: 16px">
-            <CalendarDate
+            <VCalendarDate
               :CalendarTitle="item.label || 'Date Range'"
               CalendarWidth="352px"
-              :Date="item.value"
-              @DateRangeChange="DateRangeChange"
+              v-model:date="item.value"
               :isType="true"
-            ></CalendarDate>
+            ></VCalendarDate>
           </div>
         </div>
-        <div class="MoreType" @click="AddType" v-if="AddDateType.length != DateTypeoptions.length">
+        <div class="MoreType" @click="addType" v-if="otherDateType.length != allOtherType.length">
           <el-button class="el-button--noborder moretype">+ More Date Type</el-button>
         </div>
         <div class="daterange_bottom">
@@ -393,7 +280,7 @@ const clearDaterangeObj = () => {
   border-radius: var(--border-radius-6);
   height: 40px;
 }
-.AddType {
+.addType {
   background-color: var(--color-header-bg);
   margin: 0 16px 8px 16px;
   padding: 8px;

src/components/MoreFilters/index.ts

@@ -1 +1 @@
-export { default } from './src/MoreFilters.new.vue'
+export { default } from './src/MoreFilters.vue'

src/components/MoreFilters/src/MoreFilters.new.vue

@@ -1,409 +0,0 @@
-<script setup lang="ts">
-import AutoSelect from '@/components/AutoSelect'
-// import SelectAutoSelect from '@/components/SelectAutoSelect'
-import { useFiltersStore } from '@/stores/modules/filtersList'
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
-const searchMode = route.path.includes('booking') ? 'booking' : 'tracking'
-
-const filtersStore = useFiltersStore()
-const filtersList = computed(() => filtersStore.filtersList)
-
-const drawer = ref(false)
-
-const props = defineProps({
-  isShowMoreFiltersGuidePhoto: Boolean,
-  incotermsList: Array<any>,
-  serviceList: Array<any>
-})
-
-const InputForm = ref({
-  parties: {
-    Shippername: [],
-    Consigneename: []
-  },
-  transportation: {
-    Vessel: [],
-    Voyage: []
-  },
-  palces: {
-    Origin: [],
-    Destination: []
-  },
-  General: {
-    Incoterms: '',
-    Service: ''
-  }
-})
-
-const transportaionData = ref([
-  {
-    title: 'Vessel',
-    key: 'f_vessel/m_vessel',
-    type: 'vessel',
-    value: [],
-    placeholder: 'Please input vessel name or code'
-  },
-  {
-    title: 'Voyage/Flight',
-    key: 'f_voyage/m_voyage',
-    value: [],
-    type: 'voyage',
-    placeholder: 'Please input Voyage or flight no.'
-  }
-])
-
-const partiesViewRef = ref()
-const placesViewRef = ref()
-const initData = () => {
-  partiesViewRef.value.initData()
-  placesViewRef.value.initData()
-  if (searchMode === 'tracking') {
-    incotermsRef.value?.initData()
-    serviceRef.value?.initData()
-  }
-  transportaionData.value.forEach((item) => {
-    const filterItem = filtersList.value.find((filterItem) => filterItem.title === item.title)
-    if (filterItem) {
-      item.value = filterItem.value as string[]
-    } else {
-      item.value = []
-    }
-  })
-}
-const transportationBadgeCount = computed(() => {
-  let count = 0
-  transportaionData.value.forEach((item) => {
-    if (item.value.length !== 0) {
-      count++
-    }
-  })
-  return count
-})
-
-const incotermsRef = ref()
-const serviceRef = ref()
-const getQueryData = () => {
-  if (searchMode === 'tracking') {
-    incotermsRef.value.getQueryData()
-    serviceRef.value.getQueryData()
-  }
-  partiesViewRef.value.getQueryData()
-  placesViewRef.value.getQueryData()
-  // Transportation
-  transportaionData.value.forEach((item) => {
-    if (item.value.length !== 0) {
-      filtersStore.updateFilter({
-        title: item.title,
-        key: item.key,
-        value: item.value,
-        keyType: 'array'
-      })
-    } else {
-      filtersStore.deleteFilterByTitle(item.title)
-    }
-  })
-}
-const GeneralBadge = ref()
-
-const collapseValue = ref()
-
-const changeTransportationData = (data: any, title: string) => {
-  const index = transportaionData.value.findIndex((item: any) => item.title === title)
-  transportaionData.value[index].value = data
-}
-
-// 点击search
-const emit = defineEmits(['handleSearch', 'clearMoreFiltersTags'])
-const handleSearch = () => {
-  getQueryData()
-  emit('handleSearch')
-  drawer.value = false
-}
-// 清除
-const clearrest = () => {}
-
-const IncotermsSearch = (val: any, value: any) => {
-  InputForm.value.General.Incoterms = val.data
-}
-const ServiceSearch = (val: any, value: any) => {
-  InputForm.value.General.Service = val.data
-}
-const clickmorefilters = () => {
-  drawer.value = true
-}
-
-import trackingMoreFiltersImgLight from './image/tracking-more-filters-guide.png'
-import trackingMoreFiltersImgDark from './image/tracking-dark-more-filters-guide.png'
-import bookingMoreFiltersImgLight from './image/booking-more-filters-guide.png'
-import bookingMoreFiltersImgDark from './image/booking-dark-more-filters-guide.png'
-import { useThemeStore } from '@/stores/modules/theme'
-
-const themeStore = useThemeStore()
-
-const moreFiltersGuideImg = computed(() => {
-  if (searchMode === 'tracking') {
-    return themeStore.theme === 'dark' ? trackingMoreFiltersImgDark : trackingMoreFiltersImgLight
-  } else {
-    return themeStore.theme === 'dark' ? bookingMoreFiltersImgDark : bookingMoreFiltersImgLight
-  }
-})
-</script>
-<template>
-  <div style="position: relative">
-    <div style="width: 0; height: 0">
-      <img
-        id="more-filters-guide"
-        v-show="props.isShowMoreFiltersGuidePhoto"
-        class="more-filters-guide-class position-absolute-guide"
-        :src="moreFiltersGuideImg"
-        alt=""
-      />
-    </div>
-    <el-button class="More_Filters el-button--grey" @click="clickmorefilters">
-      <span class="iconfont_icon icon_more">
-        <svg class="iconfont" aria-hidden="true">
-          <use xlink:href="#icon-icon_filter_b"></use>
-        </svg>
-      </span>
-      <div class="Filters_title">More Filters</div>
-    </el-button>
-    <el-drawer @open="initData" size="400px" title="More Filters" v-model="drawer">
-      <el-collapse v-model="collapseValue"
-        ><!-- General -->
-        <el-collapse-item class="collapse_item" name="General" v-if="searchMode === 'tracking'">
-          <template #title>
-            <span class="collapse-title"
-              >General <el-badge class="mark" :value="GeneralBadge" type="warning"
-            /></span>
-          </template>
-          <div class="ETD">
-            <div class="ETD_title">Incoterms</div>
-            <SelectValue
-              title="Incoterms"
-              key="incoterms"
-              ref="incotermsRef"
-              :transportListData="props.incotermsList"
-              @generalSearch="IncotermsSearch"
-            ></SelectValue>
-          </div>
-          <div class="ETA">
-            <div class="ETD_title">Service</div>
-            <SelectValue
-              title="Service"
-              key="service"
-              ref="serviceRef"
-              :transportListData="props.serviceList"
-              @generalSearch="ServiceSearch"
-            ></SelectValue>
-          </div>
-        </el-collapse-item>
-        <!-- Parties -->
-        <el-collapse-item class="collapse_item" name="Parties">
-          <template #title>
-            <span class="collapse-title"
-              >Parties
-              <el-badge
-                v-if="partiesViewRef?.getBadgeData() && !collapseValue?.includes('Parties')"
-                :value="partiesViewRef?.getBadgeData()"
-                class="mark"
-                type="warning"
-            /></span>
-          </template>
-          <PartiesView ref="partiesViewRef"></PartiesView>
-        </el-collapse-item>
-        <!-- Places -->
-        <el-collapse-item class="collapse_item" name="Places">
-          <template #title
-            ><span class="collapse-title"
-              >Places<el-badge
-                class="mark"
-                v-if="placesViewRef?.getBadgeData() && !collapseValue?.includes('Places')"
-                :value="placesViewRef?.getBadgeData()"
-                type="warning" /></span
-          ></template>
-          <PlacesView ref="placesViewRef"></PlacesView>
-        </el-collapse-item>
-        <!-- Transportation -->
-        <el-collapse-item class="collapse_item" name="Transportation">
-          <template #title
-            ><span class="collapse-title"
-              >Transportation
-              <el-badge
-                class="mark"
-                v-if="transportationBadgeCount && !collapseValue?.includes('Transportation')"
-                :value="transportationBadgeCount"
-                type="warning" /></span
-          ></template>
-          <div class="ETD" v-for="item in transportaionData" :key="item.title">
-            <div class="ETD_title">{{ item.title }}</div>
-            <AutoSelect
-              :type="item.type"
-              :title="item.title"
-              @changeAutoSelect="changeTransportationData"
-              :data="item.value"
-              :placeholder="item.placeholder"
-            >
-            </AutoSelect>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
-      <div class="more_bottom">
-        <el-button class="reset" type="default" @click="clearrest">
-          <span class="font_family icon-icon_reset_b" style="padding-right: 4px"></span>
-          Reset
-        </el-button>
-        <el-button class="reset el-button--dark" style="margin-left: 8px" @click="handleSearch">
-          <span class="font_family icon-icon_search_b" style="padding-right: 4px"></span>
-          Search
-        </el-button>
-      </div>
-    </el-drawer>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-img.more-filters-guide-class {
-  right: -20px;
-  top: -1px;
-  width: 361px;
-  z-index: 1500;
-}
-
-.icon_more {
-  margin-left: 8px;
-  margin-right: 0;
-}
-
-.icon_delete {
-  fill: var(--color-danger);
-  cursor: pointer;
-}
-:deep(.el-collapse-item__header) {
-  background-color: var(--color-header-bg);
-}
-.More_Filters {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  font-size: var(--font-size-3);
-  margin-left: 8px;
-  width: 116px;
-}
-
-.More_Filters:hover {
-  .Filters_title {
-    color: var(--color-theme);
-  }
-}
-
-.Filters_title {
-  margin: 0 8px;
-  margin-left: 7px;
-}
-
-:deep(.el-drawer__header) {
-  background-color: var(--color-table-header-bg);
-  display: flex;
-  align-items: center;
-  height: 64px;
-  padding: 0;
-  padding-left: 17.12px;
-  margin-bottom: 0;
-  color: var(--color-neutral-1);
-}
-
-:deep(.el-drawer__title) {
-  font-size: var(--font-size-6);
-  font-weight: bold;
-}
-
-:deep(.el-drawer__close-btn) {
-  font-size: var(--font-size-4);
-  color: var(--icon-color-black);
-  margin-right: 24px;
-  padding: 0;
-}
-
-:deep(.el-drawer__body) {
-  padding: 0;
-  position: relative;
-}
-
-.collapse-title {
-  flex: 1 0 90%;
-  order: 1;
-  text-align: left;
-}
-
-:deep(.el-collapse-item__header) {
-  border-bottom: none;
-  height: 48px;
-  color: var(--icon-color-blac);
-  font-size: var(--font-size-4);
-  font-weight: bold;
-  padding-left: 16px;
-}
-
-:deep(.el-collapse-item__wrap) {
-  border-bottom: none;
-  background-color: var(--more-filters-background-color);
-}
-
-.ETD {
-  margin: 8px 16px;
-}
-
-.ETA {
-  margin: 16px 16px;
-}
-
-.ETD_title {
-  font-size: var(--font-size-2);
-  color: var(--color-neutral-2);
-}
-
-.more_bottom {
-  position: sticky;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  bottom: 0;
-  height: 64px;
-  border-top: 1px solid var(--color-border-top);
-  width: 400px;
-  padding: 16px;
-  background-color: var(--color-mode);
-}
-
-.reset {
-  width: 180px;
-  display: flex;
-  align-items: center;
-  height: 40px;
-  justify-content: center;
-  border: 1px solid var(--color-accent-13);
-  border-radius: var(--border-radius-6);
-}
-
-:deep(.el-drawer__body) {
-  padding: 0 !important;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow-x: hidden;
-}
-
-:deep(.el-overlay) {
-  background-color: transparent;
-}
-:deep(.el-drawer__close-btn) {
-  margin-right: 0;
-}
-.moretype {
-  background-color: transparent;
-  padding: 0 4px;
-  height: 24px;
-}
-</style>

src/views/Booking/index.ts

@@ -1 +1 @@
-export { default } from './src/BookingView.new.vue'
+export { default } from './src/BookingView.vue'

src/views/Booking/src/BookingView.new.vue

@@ -1,384 +0,0 @@
-<script setup lang="ts">
-import FilterTags from '@/components/FliterTags'
-import TransportMode from '@/components/TransportMode'
-import BookingTable from './components/BookingTable'
-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'
-import { useFiltersStore } from '@/stores/modules/filtersList'
-
-const userStore = useUserStore()
-const formatDate = userStore.dateFormat
-const filtersStore = useFiltersStore()
-const filtersList = computed(() => filtersStore.filtersList)
-
-const filterRef: Ref<HTMLElement | null> = ref(null)
-const containerHeight = useCalculatingHeight(document.documentElement, 246, [filterRef])
-
-const tabList = ref([
-  {
-    name: 'All',
-    number: 0,
-    checked: true,
-    type: 'all'
-  },
-  {
-    name: 'Created',
-    number: 0,
-    checked: false,
-    type: 'created'
-  },
-  {
-    name: 'Confirmed',
-    number: 0,
-    checked: false,
-    type: 'confirmed'
-  },
-  {
-    name: 'Cancelled',
-    number: 0,
-    checked: false,
-    type: 'cancelled'
-  }
-])
-
-const initPage = () => {
-  if (!filtersList.value || (filtersList.value && filtersList.value.length == 0)) {
-    filtersStore.updateFilter({
-      title: 'Transport Mode',
-      value: ['All'],
-      keyType: 'array',
-      key: 'transport_mode'
-    })
-    filtersStore.updateFilter({
-      title: 'ETD',
-      value: [
-        dayjs().subtract(2, 'month').startOf('month').format(formatDate),
-        dayjs().add(1, 'month').format(formatDate)
-      ],
-      keyType: 'dateRange',
-      key: ['f_etd_start', 'f_etd_end']
-    })
-    filtersStore.updateFilter({
-      title: 'Shipment Status',
-      value: ['All'],
-      keyType: 'array',
-      key: 'filterTag'
-    })
-  }
-}
-
-initPage()
-
-const textSearch = ref()
-const tableLoadingTableData = ref(false)
-
-const handleClose = (tagTitle: any) => {
-  filtersStore.deleteFilterByTitle(tagTitle)
-  getBookingData()
-}
-
-const clearfilters = () => {
-  filtersStore.clearFilters()
-  getBookingData()
-}
-
-const clearDaterangeTags = () => {}
-const clearMoreFiltersTags = () => {}
-
-const BookingTable_ref = ref()
-const transportListItem = ref()
-
-const isShowAlertIcon = ref(false)
-const getBookingData = () => {
-  const queryData = filtersStore.getQueryData
-
-  tableLoadingTableData.value = true
-  BookingTable_ref.value.getLoadingData(tableLoadingTableData.value)
-  $api
-    .getBookingTableData({
-      cp: BookingTable_ref.value.pageInfo.pageNo,
-      ps: BookingTable_ref.value.pageInfo.pageSize,
-      rc: -1,
-      other_filed: '',
-      _textSearch: textSearch.value,
-      ...queryData
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        transportListItem.value = res.data.TransportList
-
-        tabList.value = res.data.tagsList
-        const checkedTabNames = tabList.value
-          .filter((item) => item.checked)
-          .map((item) => item.name)
-        filtersStore.updateFilter({
-          title: 'Shipment Status',
-          value: checkedTabNames,
-          keyType: 'array',
-          key: 'filterTag'
-        })
-
-        sessionStorage.setItem('BookingData', JSON.stringify(res.data))
-        BookingTable_ref.value.searchTableData()
-        // 查询没结果的话显示icon
-        if (textSearch.value != '' && textSearch.value != undefined) {
-          if (res.data.searchData.length == 0) {
-            isShowAlertIcon.value = true
-          }
-        } else {
-          isShowAlertIcon.value = false
-        }
-      }
-    })
-}
-const tabChange = (changeTabList: any) => {
-  tabList.value = changeTabList
-  const checkedTabNames = tabList.value.filter((item) => item.checked).map((item) => item.name)
-  filtersStore.updateFilter({
-    title: 'Shipment Status',
-    value: checkedTabNames,
-    keyType: 'array',
-    key: 'filterTag'
-  })
-
-  getBookingData()
-}
-// 点击search按钮
-const SearchInput = () => {
-  getBookingData()
-}
-
-onMounted(() => {
-  getBookingData()
-})
-import BookingGuide from './components/BookingGuide.vue'
-import { useGuideStore } from '@/stores/modules/guide'
-import { onBeforeRouteLeave } from 'vue-router'
-
-const guideStore = useGuideStore()
-const bookingGuideRef = ref()
-const handleGuide = () => {
-  bookingGuideRef.value.startGuide() // 开始引导
-}
-
-onBeforeRouteLeave((route: any) => {
-  // guideStore.clearGuide()
-  const whiteList = ['Booking Detail', 'Tracking Detail']
-  if (!whiteList.includes(route?.name)) {
-    filtersStore.clearFilters()
-  }
-})
-
-const handleSearch = () => {
-  getBookingData()
-}
-</script>
-
-<template>
-  <div class="Title">
-    <span>Booking</span>
-    <VDriverGuide @click="handleGuide"></VDriverGuide>
-  </div>
-  <BookingGuide ref="bookingGuideRef"></BookingGuide>
-  <div class="display" ref="filterRef">
-    <div class="filter-box">
-      <div class="filters-container" id="booking-filters-container-guide">
-        <FilterTags :tagsList="tabList" @tabChange="tabChange"></FilterTags>
-        <div class="heaer_top">
-          <div class="search">
-            <el-input
-              placeholder="Enter Booking/HBL/PO/Carrier Booking No. "
-              v-model="textSearch"
-              class="log_input"
-              @keyup.enter="SearchInput"
-            >
-              <template #prefix>
-                <span class="iconfont_icon">
-                  <svg class="iconfont icon_search" aria-hidden="true">
-                    <use xlink:href="#icon-icon_search_b"></use>
-                  </svg>
-                </span>
-              </template>
-              <template #suffix>
-                <el-tooltip
-                  v-if="isShowAlertIcon"
-                  :offset="6"
-                  popper-class="ShowAlerIcon"
-                  effect="dark"
-                  content="We support the following references number to find bookings:· Booking No./HAWB No./MAWB No./PO No./Carrier Booking No./Contract No./File No./Quote No."
-                  placement="bottom"
-                >
-                  <span class="iconfont_icon iconfont_icon_tip">
-                    <svg class="iconfont icon_search" aria-hidden="true">
-                      <use xlink:href="#icon-icon_info_b"></use>
-                    </svg>
-                  </span>
-                </el-tooltip>
-              </template>
-            </el-input>
-          </div>
-          <TransportMode
-            :transportListItem="transportListItem"
-            @transportSearch="getBookingData()"
-          ></TransportMode>
-          <DateRange
-            @DateRangeSearch="getBookingData()"
-            @clearDaterangeTags="clearDaterangeTags"
-          ></DateRange>
-        </div>
-      </div>
-      <MoreFilters
-        @handleSearch="handleSearch"
-        @clearMoreFiltersTags="clearMoreFiltersTags"
-        :isShowMoreFiltersGuidePhoto="guideStore.booking.isShowMoreFiltersGuidePhoto"
-      ></MoreFilters>
-      <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
-        >Search</el-button
-      >
-    </div>
-    <!-- 筛选项 -->
-    <div class="filtersTag" v-if="filtersStore.getTagsList.length" id="booking-filter-tag-guide">
-      <el-tag
-        class="tag"
-        v-for="tag in filtersStore.getTagsList"
-        :key="tag.title"
-        :closable="!tag.title.includes('Shipment')"
-        :disable-transitions="false"
-        @close="handleClose(tag.title)"
-        color="#EFEFF0"
-      >
-        <el-tooltip
-          class="box-item"
-          effect="dark"
-          :content="tag.value"
-          placement="top"
-          :popper-style="{ maxWidth: '500px', whiteSpace: 'normal', wordWrap: 'break-word' }"
-          v-if="tag.value.length > 39"
-        >
-          {{ tag.value.length > 39 ? tag.value.slice(0, 39) + '...' : tag.value }}
-        </el-tooltip>
-        <div v-else>{{ tag.value }}</div>
-      </el-tag>
-      <div class="text_button" @click="clearfilters">Clear Filters</div>
-    </div>
-  </div>
-  <BookingTable
-    :textSearch="textSearch"
-    :height="containerHeight"
-    ref="BookingTable_ref"
-  ></BookingTable>
-</template>
-
-<style lang="scss" scoped>
-.filter-box {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  height: 100%;
-}
-.filters-container {
-  max-width: 1426px;
-  width: 80%;
-  display: flex;
-  flex-direction: column;
-}
-.filter-guide-class {
-  top: -3px;
-  left: -2px;
-  height: 29px;
-  width: 592px;
-}
-img.more-filters-guide-class {
-  right: 38px;
-  top: 155px;
-  height: 634px;
-  width: 243px;
-  z-index: 20000;
-}
-.download-file-guide-class {
-  right: 85px;
-  top: 243px;
-  width: 377px;
-  height: 236px;
-}
-.customize-columns-guide-class {
-  right: 8px;
-  top: 249px;
-  width: 694px;
-  height: 474px;
-}
-.tab-filter-guide-class {
-  left: 248px;
-  top: 118px;
-  height: 42px;
-  z-index: 20000;
-}
-
-.Title {
-  display: flex;
-  height: 68px;
-  border-bottom: 1px solid var(--color-border);
-  font-size: var(--font-size-6);
-  font-weight: 700;
-  padding: 0 24px;
-  align-items: center;
-}
-.display {
-  border: 1px solid var(--color-border);
-  border-width: 0 0 1px 0;
-  padding: 0 24px;
-}
-.heaer_top {
-  margin-top: 6.57px;
-  display: flex;
-}
-.search {
-  width: 400px;
-  height: 32px;
-}
-.filtersTag {
-  margin-top: 8px;
-  margin-bottom: 4px;
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.tag {
-  border-radius: var(--border-radius-22);
-  margin: 0 8px 8px 0;
-  color: var(--color-neutral-1);
-  font-weight: 600;
-  font-size: var(--font-size-2);
-  border-color: var(--tag-boder-color);
-  background-color: var(--tag-bg-color) !important;
-}
-.iconfont_icon_tip {
-  margin-left: 8px;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-}
-.icon_search {
-  fill: var(--color-neutral-1);
-}
-@media only screen and (min-width: 1280px) {
-  .search {
-    width: 480px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  .search {
-    width: 740px;
-  }
-}
-:deep(.log_input .el-input__wrapper) {
-  box-shadow: 0 0 0 1px var(--color-select-border) inset;
-  border-radius: 6px;
-}
-</style>

src/views/Booking/src/BookingView.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import emitter from '@/utils/bus'
 import FilterTags from '@/components/FliterTags'
 import TransportMode from '@/components/TransportMode'
 import BookingTable from './components/BookingTable'
@@ -9,362 +8,93 @@ import { ref, reactive } from 'vue'
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
 import { useUserStore } from '@/stores/modules/user'
 import dayjs from 'dayjs'
+import { useFiltersStore } from '@/stores/modules/filtersList'
 
 const userStore = useUserStore()
 const formatDate = userStore.dateFormat
-const valueFormatDate = 'MM/DD/YYYY'
+const filtersStore = useFiltersStore()
+const filtersList = computed(() => filtersStore.filtersList)
 
 const filterRef: Ref<HTMLElement | null> = ref(null)
-
 const containerHeight = useCalculatingHeight(document.documentElement, 246, [filterRef])
 
-const BookingSearch = ref()
-const tableLoadingTableData = ref(false)
-let searchTableQeury: any = {}
-const filterData = reactive({
-  filtersTagData: [] as Array<string>,
-  transportData: [] as Array<string>,
-  daterangeData: [] as Array<string>,
-  morefiltersData: [] as Array<string>
-})
+const tabList = ref([
+  {
+    name: 'All',
+    number: 0,
+    checked: true,
+    type: 'all'
+  },
+  {
+    name: 'Created',
+    number: 0,
+    checked: false,
+    type: 'created'
+  },
+  {
+    name: 'Confirmed',
+    number: 0,
+    checked: false,
+    type: 'confirmed'
+  },
+  {
+    name: 'Cancelled',
+    number: 0,
+    checked: false,
+    type: 'cancelled'
+  }
+])
 
-const tagsData: any = ref([])
-const handleClose = (tag: any) => {
-  emitter.emit('clearTag', tag)
-  tagsData.value.splice(tagsData.value.indexOf(tag), 1)
-  if (tag.includes('Transport')) {
-    delete searchTableQeury.transport_mode
-  } else if (tag.includes('ETD')) {
-    filterData.daterangeData.forEach((item: any, index: any) => {
-      if (item.includes('ETD')) {
-        filterData.daterangeData.splice(index, 1)
-      }
+const initPage = () => {
+  if (!filtersList.value || (filtersList.value && filtersList.value.length == 0)) {
+    filtersStore.updateFilter({
+      title: 'Transport Mode',
+      value: ['All'],
+      keyType: 'array',
+      key: 'transport_mode'
     })
-    delete searchTableQeury.f_etd_start
-    delete searchTableQeury.f_etd_end
-  } else if (tag.includes('ETA')) {
-    filterData.daterangeData.forEach((item: any, index: any) => {
-      if (item.includes('ETA')) {
-        filterData.daterangeData.splice(index, 1)
-      }
+    filtersStore.updateFilter({
+      title: 'ETD',
+      value: [
+        dayjs().subtract(2, 'month').startOf('month').format(formatDate),
+        dayjs().add(1, 'month').format(formatDate)
+      ],
+      keyType: 'dateRange',
+      key: ['f_etd_start', 'f_etd_end']
     })
-    delete searchTableQeury.m_eta_start
-    delete searchTableQeury.m_eta_end
-  } else if (tag.includes('Creation')) {
-    filterData.daterangeData.forEach((item: any, index: any) => {
-      if (item.includes('Creation')) {
-        filterData.daterangeData.splice(index, 1)
-      }
+    filtersStore.updateFilter({
+      title: 'Shipment Status',
+      value: ['All'],
+      keyType: 'array',
+      key: 'filterTag'
     })
-    delete searchTableQeury.created_time_start
-    delete searchTableQeury.created_time_end
-  } else if (tag.includes('Shippername')) {
-    delete searchTableQeury.shipper
-  } else if (tag.includes('Consigneename')) {
-    delete searchTableQeury.consignee
-  } else if (tag.includes('Origin Agent')) {
-    delete searchTableQeury.origin
-  } else if (tag.includes('Destination Agent')) {
-    delete searchTableQeury.agent
-  } else if (tag.includes('Sales')) {
-    delete searchTableQeury.sales_rep
-  } else if (tag.includes('Origin')) {
-    delete searchTableQeury.shipper_city
-  } else if (tag.includes('Destination')) {
-    delete searchTableQeury.consignee_city
-  } else if (tag.includes('Place of Receipt')) {
-    delete searchTableQeury['place_of_receipt/place_of_receipt_exp']
-  } else if (tag.includes('Port of Loading')) {
-    delete searchTableQeury['fport_of_loading_uncode/fport_of_loading_exp']
-  } else if (tag.includes('Place of delivery')) {
-    delete searchTableQeury['place_of_delivery/place_of_delivery_exp']
-  } else if (tag.includes('Vessel')) {
-    delete searchTableQeury['f_vessel/m_vessel']
-  } else if (tag.includes('Voyage')) {
-    delete searchTableQeury['f_voyage/m_voyage']
   }
-  sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
-  getbookingdata()
 }
-// 筛选框查询
-const FiltersSeach = (val: any, value: any) => {
-  searchTableQeury[val] = value
-  sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
-  getbookingdata()
-}
-//TransportSearch
-const TransportSearch = (val: any) => {
-  filterData.transportData = []
-  if (val.data.length != 0) {
-    let str = `${val.title}:${val.data}`
-    filterData.transportData.push(str)
-  }
-  FiltersSeach('transport_mode', val.data)
-  renderTagsData()
-}
-// defaultTransport
-const defaultTransport = (val: any, value: any) => {
-  filterData.transportData = []
-  if (val.data.length != 0) {
-    let str = `${val.title}:${val.data}`
-    filterData.transportData.push(str)
-  }
-  if (sessionStorage.getItem('searchTableQeury') == null) {
-    searchTableQeury.transport_mode = val.data
-  } else {
-    searchTableQeury = value
-  }
-  renderTagsData()
-}
-// defaultDate
-const defaultDate = (dateRangeData: any, data: any) => {
-  setFilterData(dateRangeData)
 
-  if (sessionStorage.getItem('searchTableQeury') == null) {
-    for (const key in dateRangeData) {
-      searchTableQeury.f_etd_start = dateRangeData[key].data[0]
-      searchTableQeury.f_etd_end = dateRangeData[key].data[1]
-    }
-  } else {
-    searchTableQeury = data
-    if (searchTableQeury._textSearch) {
-      BookingSearch.value = searchTableQeury._textSearch
-    }
-  }
-  getbookingdata()
-  renderTagsData()
-}
+initPage()
 
-const setFilterData = (dateRangeData: any) => {
-  filterData.daterangeData = []
-  for (const key in dateRangeData) {
-    const startEnd = dateRangeData[key].data[0] + ' To ' + dateRangeData[key].data[1]
-    let str = `${key}:${startEnd}`
-    filterData.daterangeData.push(str)
-  }
-}
-//DateRangeSearch
-const DateRangeSearch = (dateRangeData: any) => {
-  setFilterData(dateRangeData)
+const textSearch = ref()
+const tableLoadingTableData = ref(false)
 
-  if (Object.keys(dateRangeData).length == 0) {
-    delete searchTableQeury.f_etd_start
-    delete searchTableQeury.f_etd_end
-    delete searchTableQeury.m_eta_start
-    delete searchTableQeury.m_eta_end
-    delete searchTableQeury.created_time_start
-    delete searchTableQeury.created_time_end
-  }
-  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 = dateRangeData[key].data[0]
-      searchTableQeury.f_etd_end = dateRangeData[key].data[1]
-    } else if (key == 'ETA') {
-      searchTableQeury.m_eta_start = dateRangeData[key].data[0]
-      searchTableQeury.m_eta_end = dateRangeData[key].data[1]
-    } else {
-      searchTableQeury.created_time_start = dateRangeData[key].data[0]
-      searchTableQeury.created_time_end = dateRangeData[key].data[1]
-    }
-  }
-  sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
-  getbookingdata()
-  renderTagsData()
-}
-//MoreFiltersSearch
-const MoreFiltersSearch = (val: any, value: any) => {
-  filterData.morefiltersData = []
-  if (Object.keys(value).length == 0) {
-    delete searchTableQeury.shipper
-    delete searchTableQeury.consignee
-    delete searchTableQeury.origin
-    delete searchTableQeury.agent
-    delete searchTableQeury.sales_rep
-    delete searchTableQeury.shipper_city
-    delete searchTableQeury.consignee_city
-    delete searchTableQeury['place_of_receipt/place_of_receipt_exp']
-    delete searchTableQeury['fport_of_loading_uncode/fport_of_loading_exp']
-    delete searchTableQeury['place_of_delivery/place_of_delivery_exp']
-    delete searchTableQeury['f_vessel/m_vessel']
-    delete searchTableQeury['f_voyage/m_voyage']
-  }
-  for (const key in val) {
-    let str = `${key}:${val[key]}`
-    filterData.morefiltersData.push(str)
-    if (key == 'Shippername') {
-      searchTableQeury.shipper = value[key]
-    } else if (key == 'Consigneename') {
-      searchTableQeury.consignee = value[key]
-    } else if (key == 'Origin Agent') {
-      searchTableQeury.origin = value[key]
-    } else if (key == 'Destination Agent') {
-      searchTableQeury.agent = value[key]
-    } else if (key == 'Sales') {
-      searchTableQeury.sales_rep = value[key]
-    } else if (key == 'Origin') {
-      searchTableQeury.shipper_city = value[key]
-    } else if (key == 'Destination') {
-      searchTableQeury.consignee_city = value[key]
-    } else if (key == 'Place of Receipt') {
-      searchTableQeury['place_of_receipt/place_of_receipt_exp'] = value[key]
-    } else if (key == 'Port of Loading') {
-      searchTableQeury['fport_of_loading_uncode/fport_of_loading_exp'] = value[key]
-    } else if (key == 'Place of delivery') {
-      searchTableQeury['place_of_delivery/place_of_delivery_exp'] = value[key]
-    } else if (key == 'Vessel') {
-      searchTableQeury['f_vessel/m_vessel'] = value[key]
-    } else if (key == 'Voyage') {
-      searchTableQeury['f_voyage/m_voyage'] = value[key]
-    }
-  }
-  sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
-  getbookingdata()
-  renderTagsData()
-}
-const defaultMorefilters = (val: any, value: any, data: any) => {
-  filterData.morefiltersData = []
-  for (const key in val) {
-    let str = `${key}:${val[key]}`
-    filterData.morefiltersData.push(str)
-    if (key == 'Shippername') {
-      searchTableQeury.shipper = value[key]
-    } else if (key == 'Consigneename') {
-      searchTableQeury.consignee = value[key]
-    } else if (key == 'Origin Agent') {
-      searchTableQeury.origin = value[key]
-    } else if (key == 'Destination Agent') {
-      searchTableQeury.agent = value[key]
-    } else if (key == 'Sales') {
-      searchTableQeury.sales_rep = value[key]
-    } else if (key == 'Origin') {
-      searchTableQeury.shipper_city = value[key]
-    } else if (key == 'Destination') {
-      searchTableQeury.consignee_city = value[key]
-    } else if (key == 'Place of Receipt') {
-      searchTableQeury['place_of_receipt/place_of_receipt_exp'] = value[key]
-    } else if (key == 'Port of Loading') {
-      searchTableQeury['fport_of_loading_uncode/fport_of_loading_exp'] = value[key]
-    } else if (key == 'Place of delivery') {
-      searchTableQeury['place_of_delivery/place_of_delivery_exp'] = value[key]
-    } else if (key == 'Vessel') {
-      searchTableQeury['f_vessel/m_vessel'] = value[key]
-    } else if (key == 'Voyage') {
-      searchTableQeury['f_voyage/m_voyage'] = value[key]
-    }
-  }
-  if (sessionStorage.getItem('searchTableQeury') != null) {
-    searchTableQeury = data
-  }
-  renderTagsData()
+const handleClose = (tagTitle: any) => {
+  filtersStore.deleteFilterByTitle(tagTitle)
+  getBookingData()
 }
+
 const clearfilters = () => {
-  BookingSearch.value = ''
-  filterData.filtersTagData = []
-  tagsData.value = []
-  let str = 'Shipment status: All'
-  filterData.filtersTagData.push(str)
-  filterData.transportData = []
-  filterData.daterangeData = []
-  filterData.morefiltersData = []
-  emitter.emit('clearTag', 'Shipment status')
-  emitter.emit('clearTag', 'Transport Mode')
-  emitter.emit('clearTag', 'ETD')
-  emitter.emit('clearTag', 'ETA')
-  emitter.emit('clearTag', 'Creation Time')
-  emitter.emit('clearTag', 'Shippername')
-  emitter.emit('clearTag', 'Consigneename')
-  emitter.emit('clearTag', 'Origin Agent')
-  emitter.emit('clearTag', 'Destination Agent')
-  emitter.emit('clearTag', 'Sales')
-  emitter.emit('clearTag', 'Origin')
-  emitter.emit('clearTag', 'Destination')
-  emitter.emit('clearTag', 'Place of Receipt')
-  emitter.emit('clearTag', 'Port of Loading')
-  emitter.emit('clearTag', 'Place of delivery')
-  emitter.emit('clearTag', 'Vessel')
-  emitter.emit('clearTag', 'Voyage')
-  searchTableQeury = {}
-  searchTableQeury.filterTag = ['All']
-  sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
-  getbookingdata()
-  renderTagsData()
-}
-const renderTagsData = () => {
-  tagsData.value = []
-  if (filterData.transportData.length) {
-    tagsData.value.push(filterData.transportData[0])
-  }
-  if (filterData.daterangeData.length) {
-    filterData.daterangeData.forEach((item) => {
-      tagsData.value.push(item)
-    })
-  }
-  if (filterData.morefiltersData.length) {
-    filterData.morefiltersData.forEach((item) => {
-      tagsData.value.push(item)
-    })
-  }
-  if (filterData.filtersTagData.length) {
-    filterData.filtersTagData.forEach((item) => {
-      tagsData.value.push(item)
-    })
-  }
-}
-// 清除 Transport Tags
-const clearTransportTags = () => {
-  filterData.transportData = []
-}
-// 清除 Daterange Tags
-const clearDaterangeTags = () => {
-  filterData.daterangeData = []
-}
-// 清除 MoreFilters Tags
-const clearMoreFiltersTags = () => {
-  filterData.morefiltersData = []
+  filtersStore.clearFilters()
+  getBookingData()
 }
 
+const clearDaterangeTags = () => {}
+const clearMoreFiltersTags = () => {}
+
 const BookingTable_ref = ref()
-const TransportListItem = ref()
-interface ListItem {
-  name: string
-  number: number
-  type: string
-  checked: boolean
-}
-const TagsList = ref<ListItem[]>([])
-const filterTag = ref(['All'])
+const transportListItem = ref()
+
 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)
-    }
-  }
+const getBookingData = () => {
+  const queryData = filtersStore.getQueryData
 
   tableLoadingTableData.value = true
   BookingTable_ref.value.getLoadingData(tableLoadingTableData.value)
@@ -374,30 +104,28 @@ const getbookingdata = () => {
       ps: BookingTable_ref.value.pageInfo.pageSize,
       rc: -1,
       other_filed: '',
-      ...searchTableQeury,
-      ...curRangeData
+      _textSearch: textSearch.value,
+      ...queryData
     })
     .then((res: any) => {
       if (res.code === 200) {
-        TransportListItem.value = res.data.TransportList
-        TagsList.value = res.data.tagsList
-        let taglist: any = []
-        if (Object.keys(filterData.filtersTagData).length == 0) {
-          TagsList.value.forEach((item: any) => {
-            if (item.checked == true) {
-              taglist.push(item.name)
-            }
-          })
-          let str = 'Shipment status: ' + taglist.toString()
-          filterData.filtersTagData.push(str)
-          filterData.filtersTagData.forEach((item) => {
-            tagsData.value.push(item)
-          })
-        }
+        transportListItem.value = res.data.TransportList
+
+        tabList.value = res.data.tagsList
+        const checkedTabNames = tabList.value
+          .filter((item) => item.checked)
+          .map((item) => item.name)
+        filtersStore.updateFilter({
+          title: 'Shipment Status',
+          value: checkedTabNames,
+          keyType: 'array',
+          key: 'filterTag'
+        })
+
         sessionStorage.setItem('BookingData', JSON.stringify(res.data))
-        BookingTable_ref.value.searchTableData(searchTableQeury)
+        BookingTable_ref.value.searchTableData()
         // 查询没结果的话显示icon
-        if (BookingSearch.value != '' && BookingSearch.value != undefined) {
+        if (textSearch.value != '' && textSearch.value != undefined) {
           if (res.data.searchData.length == 0) {
             isShowAlertIcon.value = true
           }
@@ -407,33 +135,47 @@ const getbookingdata = () => {
       }
     })
 }
-const changeTag = (val: any, boolean: any) => {
-  filterData.filtersTagData = []
-  searchTableQeury.filterTag = val
-  let str = 'Shipment status: ' + val
-  filterData.filtersTagData.push(str)
-  sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
-  if (boolean) {
-    getbookingdata()
-  }
-  renderTagsData()
-  filterTag.value = val
+const tabChange = (changeTabList: any) => {
+  tabList.value = changeTabList
+  const checkedTabNames = tabList.value.filter((item) => item.checked).map((item) => item.name)
+  filtersStore.updateFilter({
+    title: 'Shipment Status',
+    value: checkedTabNames,
+    keyType: 'array',
+    key: 'filterTag'
+  })
+
+  getBookingData()
 }
 // 点击search按钮
 const SearchInput = () => {
-  searchTableQeury._textSearch = BookingSearch.value
-  sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
-  getbookingdata()
+  getBookingData()
 }
 
+onMounted(() => {
+  getBookingData()
+})
 import BookingGuide from './components/BookingGuide.vue'
 import { useGuideStore } from '@/stores/modules/guide'
+import { onBeforeRouteLeave } from 'vue-router'
 
 const guideStore = useGuideStore()
 const bookingGuideRef = ref()
 const handleGuide = () => {
   bookingGuideRef.value.startGuide() // 开始引导
 }
+
+onBeforeRouteLeave((route: any) => {
+  // guideStore.clearGuide()
+  const whiteList = ['Booking Detail', 'Tracking Detail']
+  if (!whiteList.includes(route?.name)) {
+    filtersStore.clearFilters()
+  }
+})
+
+const handleSearch = () => {
+  getBookingData()
+}
 </script>
 
 <template>
@@ -445,12 +187,12 @@ const handleGuide = () => {
   <div class="display" ref="filterRef">
     <div class="filter-box">
       <div class="filters-container" id="booking-filters-container-guide">
-        <FilterTags :TagsListItem="TagsList" @changeTag="changeTag"></FilterTags>
+        <FilterTags :tagsList="tabList" @tabChange="tabChange"></FilterTags>
         <div class="heaer_top">
           <div class="search">
             <el-input
               placeholder="Enter Booking/HBL/PO/Carrier Booking No. "
-              v-model="BookingSearch"
+              v-model="textSearch"
               class="log_input"
               @keyup.enter="SearchInput"
             >
@@ -480,27 +222,18 @@ const handleGuide = () => {
             </el-input>
           </div>
           <TransportMode
-            :isShipment="false"
-            :TransportListItem="TransportListItem"
-            @TransportSearch="TransportSearch"
-            @defaultTransport="defaultTransport"
-            @clearTransportTags="clearTransportTags"
+            :transportListItem="transportListItem"
+            @transportSearch="getBookingData()"
           ></TransportMode>
           <DateRange
-            :isShipment="false"
-            @DateRangeSearch="DateRangeSearch"
+            @DateRangeSearch="getBookingData()"
             @clearDaterangeTags="clearDaterangeTags"
-            @defaultDate="defaultDate"
           ></DateRange>
         </div>
       </div>
       <MoreFilters
-        :isShipment="false"
-        :pageMode="'booking'"
-        :searchTableQeury="searchTableQeury"
-        @MoreFiltersSearch="MoreFiltersSearch"
+        @handleSearch="handleSearch"
         @clearMoreFiltersTags="clearMoreFiltersTags"
-        @defaultMorefilters="defaultMorefilters"
         :isShowMoreFiltersGuidePhoto="guideStore.booking.isShowMoreFiltersGuidePhoto"
       ></MoreFilters>
       <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
@@ -508,33 +241,34 @@ const handleGuide = () => {
       >
     </div>
     <!-- 筛选项 -->
-    <div class="filtersTag" v-if="tagsData.length" id="booking-filter-tag-guide">
+    <div class="filtersTag" v-if="filtersStore.getTagsList.length" id="booking-filter-tag-guide">
       <el-tag
-        :key="tag"
         class="tag"
-        v-for="tag in tagsData"
-        :closable="!tag.includes('Shipment')"
+        v-for="tag in filtersStore.getTagsList"
+        :key="tag.title"
+        :closable="!tag.title.includes('Shipment')"
         :disable-transitions="false"
-        @close="handleClose(tag)"
+        @close="handleClose(tag.title)"
         color="#EFEFF0"
       >
         <el-tooltip
           class="box-item"
           effect="dark"
-          :content="tag"
+          :content="tag.value"
           placement="top"
-          v-if="tag.length > 39"
+          :popper-style="{ maxWidth: '500px', whiteSpace: 'normal', wordWrap: 'break-word' }"
+          v-if="tag.value.length > 39"
         >
-          {{ tag.length > 39 ? tag.substr(0, 39) + '...' : tag }}
+          {{ tag.value.length > 39 ? tag.value.slice(0, 39) + '...' : tag.value }}
         </el-tooltip>
-        <div v-else>{{ tag }}</div>
+        <div v-else>{{ tag.value }}</div>
       </el-tag>
       <div class="text_button" @click="clearfilters">Clear Filters</div>
     </div>
   </div>
   <BookingTable
+    :textSearch="textSearch"
     :height="containerHeight"
-    :tagsData="tagsData"
     ref="BookingTable_ref"
   ></BookingTable>
 </template>

src/views/Dashboard/index.ts

@@ -1 +1 @@
-export { default } from './src/DashboardView.new.vue'
+export { default } from './src/DashboardView.vue'

src/views/Dashboard/src/DashboardView.new.vue

@@ -1,1640 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, reactive } from 'vue'
-import { VueDraggable } from 'vue-draggable-plus'
-import PieChart from './components/PieChart.vue'
-import SellerChart from './components/SellerChart.vue'
-import BarChart from './components/BarChart.vue'
-import RevenueChart from './components/RevenueChart.vue'
-import RecentStatus from './components/RecentStatus.vue'
-import ScoringSystem from './components/ScoringSystem.vue'
-import TopMap from './components/TopMap.vue'
-import DashFilters from './components/DashFiters.vue'
-import CustomerFilter from './components/CustomerFilter.vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { formatNumber } from '@/utils/tools'
-import { useFiltersStore, FiltersType } from '@/stores/modules/filtersList'
-import dayjs from 'dayjs'
-import { useUserStore } from '@/stores/modules/user'
-
-const userStore = useUserStore()
-const formatDate = userStore.dateFormat
-const filtersStore = useFiltersStore()
-
-const router = useRouter()
-const activeName = ref('first')
-const SaveVisible = ref(false)
-// 可拖拽模块的列表
-interface ManagementItem {
-  title: string
-  switchValue: boolean
-  isRevenueDisplay: boolean
-  text: string
-  id: number
-  title1: string
-  title2: string
-}
-const Management = ref<ManagementItem[]>([])
-
-const changeCancel = (id: any) => {
-  Management.value[id - 1].switchValue = false
-}
-
-const customerInfo = ref({
-  customerCode: [],
-  customerType: []
-})
-const changeCustomerData = (val: string[], type: string) => {
-  customerInfo.value[type] = val
-}
-
-//RecentStatusList
-const RecentStatusList = ref()
-const pageInfo = ref({ pageNo: 1, pageSize: 10, total: 10000 })
-const isShowtitle1 = ref(true)
-// 点击tab
-const handleTabClick = (tab: any) => {
-  if (tab.props.name == 'first') {
-    isShowtitle1.value = true
-  } else {
-    isShowtitle1.value = false
-  }
-  GetTop10ODEcharts(top10DefaultData.value)
-}
-const kpiDefaultData = ref()
-const pendingDefaultData = ref()
-const recentDefaultData = ref()
-const etdDefaultData = ref()
-const containerDefaultData = ref()
-const top10DefaultData = ref()
-const co2OriginDefaultData = ref()
-const co2DestinationDefaultData = ref()
-const revenueDefaultData = ref()
-
-const GetDashboardData = () => {
-  $api.getDashboardFilters({}).then((res: any) => {
-    if (res.code == 200) {
-      //给默认筛选条件赋值
-      kpiDefaultData.value = res.data.KPIDefaulteData
-      pendingDefaultData.value = res.data.PendingDefaultData
-      recentDefaultData.value = res.data.RecentDefaultData
-      etdDefaultData.value = res.data.ETDDefaultData
-      containerDefaultData.value = res.data.ContainerefaultData
-      top10DefaultData.value = res.data.Top10faultData
-      co2OriginDefaultData.value = res.data.OriginCo2Top10faultData
-      co2DestinationDefaultData.value = res.data.DestinationCo2Top10faultData
-      revenueDefaultData.value = res.data.RevenueDefaultData
-
-      nextTick(() => {
-        getTableData(recentDefaultData.value, false)
-      })
-    }
-  })
-}
-// 获取表单数据
-const getTableData = (val: any, isPage?: any) => {
-  const rc = isPage ? pageInfo.value.total : -1
-  $api
-    .GetDashboardData({
-      cp: pageInfo.value.pageNo,
-      ps: pageInfo.value.pageSize,
-      rc,
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        pageInfo.value.total = Number(res.data.rc)
-        Management.value = res.data.Management
-        RecentStatusList.value = res.data.searchData
-      }
-    })
-}
-const KPIobj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const arrivalObj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const kpiLoading = ref(false)
-const kpiArrivalLoading = ref(false)
-//查询KPI
-const GetKpiData = (val: any) => {
-  kpiLoading.value = true
-  kpiArrivalLoading.value = true
-  kpiDefaultData.value = val
-  // 获取KPI Departure图表数据
-  $api
-    .GetKPIEcharts({
-      r_type: 'atd_r4',
-      ...val,
-      ...customerInfo.value
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        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
-      }
-    })
-    .finally(() => {
-      kpiLoading.value = false
-    })
-  // 获取KPI Arrival图表数据
-  $api
-    .GetKPIEcharts({
-      r_type: 'ata_r3',
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        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
-      }
-    })
-    .finally(() => {
-      kpiArrivalLoading.value = false
-    })
-}
-const pendingObj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const pendingArrivalObj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const pendingLoading = ref(false)
-const pendingArrivalLoading = ref(false)
-// 查询Pending
-const GetPendingEcharts = (val: any) => {
-  // 获取Pending Departure图表数据
-  pendingLoading.value = true
-  pendingArrivalLoading.value = true
-  pendingDefaultData.value = val
-  $api
-    .GetPendingEcharts({
-      r_type: 'r4',
-      ...val,
-      ...customerInfo.value
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        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
-      }
-    })
-    .finally(() => {
-      pendingLoading.value = false
-    })
-  // 获取Pending Arrival图表数据
-  $api
-    .GetPendingEcharts({
-      r_type: 'r3',
-      ...val,
-      ...customerInfo.value
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        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
-      }
-    })
-    .finally(() => {
-      pendingArrivalLoading.value = false
-    })
-}
-const etdObj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const etdLoading = ref(false)
-// 获取ETD/ETA 图表数据
-const GetETDEcharts = (val: any) => {
-  etdLoading.value = true
-  etdDefaultData.value = val
-  $api
-    .GetETDEcharts({
-      ...val,
-      ...customerInfo.value
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        etdObj.ETD_Title = `{a|${res.data.ETD_Title}}`
-        etdObj.ETDList = res.data.ETDList
-        etdObj.ETD_Radius = res.data.ETD_Radius
-        etdObj.download_name = res.data.download_name
-      }
-    })
-    .finally(() => {
-      etdLoading.value = false
-    })
-}
-// 获取ContainerCount
-const containerObj = reactive({
-  bar_title: '',
-  barList: [],
-  barSeries: [],
-  Max: 0,
-  interval: 0,
-  download_name: ''
-})
-const containerLoading = ref(false)
-const GetContainerCountEcharts = (val: any) => {
-  containerLoading.value = true
-  containerDefaultData.value = val
-  $api
-    .GetContainerCountEcharts({
-      ...val,
-      ...customerInfo.value
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        containerObj.bar_title = res.data.ContainerCount_Title
-        containerObj.barList = res.data.ContainerCountList
-        containerObj.barSeries = res.data.ContainerCounSeries
-        containerObj.Max = res.data.Max
-        containerObj.interval = res.data.interval
-        containerObj.download_name = res.data.download_name
-      }
-    })
-    .finally(() => {
-      containerLoading.value = false
-    })
-}
-const topdestinationinType = ref()
-const toporiginType = ref()
-//获取Top10 Origin/Destination
-const Top10Obj = reactive({
-  OriginData: [],
-  DestinationData: []
-})
-const top1OInterval = reactive({
-  Max: 0,
-  interval: 0
-})
-const top1OInterval_dest = reactive({
-  Max: 0,
-  interval: 0
-})
-const topOriginLoading = ref(false)
-const top10Originref = ref()
-const top10Destinationref = ref()
-const GetTop10ODEcharts = (val: any) => {
-  topOriginLoading.value = true
-  top10DefaultData.value = val
-  $api
-    .GetTop10ODEcharts({
-      ...val,
-      ...customerInfo.value
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        if (isShowtitle1.value) {
-          top10Originref.value[0].updataMapObj(res.data.toporiginMap)
-        } else {
-          top10Destinationref.value[0].updataMapObj(res.data.topdestinationinMap)
-        }
-        Top10Obj.DestinationData = res.data.seller_data_list_destination
-        Top10Obj.OriginData = res.data.seller_data_list_origin
-        top1OInterval.Max = res.data.Max
-        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
-      }
-    })
-    .finally(() => {
-      topOriginLoading.value = false
-    })
-}
-//获取CO2 Origin
-const emissionLoading = ref(false)
-const emissionObj = reactive({
-  bar_title: '',
-  barList: [],
-  barSeries: [],
-  Max: 0,
-  interval: 0,
-  download_name: ''
-})
-const GetCo2EmissionEcharts = (val: any) => {
-  emissionLoading.value = true
-  co2OriginDefaultData.value = val
-  $api
-    .GetCo2EmissionEcharts({
-      ...val,
-      ...customerInfo.value
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        emissionObj.bar_title = res.data.ContainerCount_Title
-        emissionObj.barList = res.data.ContainerCountList
-        emissionObj.barSeries = res.data.ContainerCounSeries
-        emissionObj.Max = res.data.Max
-        emissionObj.interval = res.data.interval
-        emissionObj.download_name = res.data.download_name
-      }
-    })
-    .finally(() => {
-      emissionLoading.value = false
-    })
-}
-//获取CO2 Destination
-const destinationObj = reactive({
-  bar_title: '',
-  barList: [],
-  barSeries: [],
-  Max: 0,
-  interval: 0,
-  download_name: ''
-})
-const destinationLoading = ref(false)
-const GetCo2DestinationEcharts = (val: any) => {
-  destinationLoading.value = true
-  co2DestinationDefaultData.value = val
-  $api
-    .GetCo2DestinationEcharts({
-      ...val,
-      ...customerInfo.value
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        destinationObj.bar_title = res.data.ContainerCount_Title
-        destinationObj.barList = res.data.ContainerCountList
-        destinationObj.barSeries = res.data.ContainerCounSeries
-        destinationObj.Max = res.data.Max
-        destinationObj.interval = res.data.interval
-        destinationObj.download_name = res.data.download_name
-      }
-    })
-    .finally(() => {
-      destinationLoading.value = false
-    })
-}
-//获取Revenue Spent
-
-const revenueObj = reactive({
-  bar_title: '',
-  barList: [],
-  barSeries: [],
-  Max: 0,
-  interval: 0,
-  download_name: '',
-  isShowTooltips: true
-})
-const revenueLoading = ref(false)
-const revenue_date_start = ref()
-const revenue_date_end = ref()
-const GetRevenueEcharts = (val: any) => {
-  revenue_date_start.value = val.date_start
-  revenue_date_end.value = val.date_end
-  revenueLoading.value = true
-  revenueDefaultData.value = val
-  $api
-    .GetRevenueEcharts({
-      ...val,
-      ...customerInfo.value
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        revenueObj.bar_title = res.data.bar_title
-        revenueObj.barList = res.data.barList
-        revenueObj.barSeries = res.data.barSeries
-        revenueObj.Max = res.data.Max
-        revenueObj.interval = res.data.interval
-        revenueObj.download_name = res.data.download_name
-      }
-    })
-    .finally(() => {
-      revenueLoading.value = false
-    })
-}
-onMounted(() => {
-  GetDashboardData()
-})
-
-// Save Layout
-const SaveLayout = () => {
-  SaveVisible.value = false
-  Management.value.forEach((item: any, index: any) => {
-    item.id = index + 1
-  })
-  $api
-    .SaveLayout({
-      management: Management.value
-    })
-    .then((res: any) => {
-      if (res.code == 200) {
-        ElMessage({
-          message: res.data.msg,
-          duration: 3000,
-          type: 'success'
-        })
-      }
-    })
-}
-//Save Filters
-const SaveFilters = () => {
-  SaveVisible.value = false
-  Management.value.forEach((item: any, index: any) => {
-    item.id = index + 1
-  })
-  const filterConfig = {
-    kpiDefaultData: kpiDefaultData.value,
-    pendingDefaultData: pendingDefaultData.value,
-    recentDefaultData: recentDefaultData.value,
-    etdDefaultData: etdDefaultData.value,
-    containerDefaultData: containerDefaultData.value,
-    top10DefaultData: top10DefaultData.value,
-    co2OriginDefaultData: co2OriginDefaultData.value,
-    co2DestinationDefaultData: co2DestinationDefaultData.value,
-    revenueDefaultData: revenueDefaultData.value
-  }
-  $api
-    .SaveLayout({
-      management: Management.value,
-      dashboardObj: filterConfig
-    })
-    .then((res: any) => {
-      if (res.code == 200) {
-        ElMessage({
-          message: res.data.msg,
-          duration: 3000,
-          type: 'success'
-        })
-      }
-    })
-}
-//ETD to ETA(DAYS)点击跳转
-const pie_chart_ETD = ref()
-const pie_chart_pending_arrival = ref()
-const pie_chart_pending_departure = ref()
-const pie_chart_kpi_departure = ref()
-const pie_chart_kpi_arrival = ref()
-const seller_chart_top10_origin = ref()
-const seller_chart_top10_destination = ref()
-const seller_chart_CO2_origin = ref()
-const seller_chart_CO2_destination = ref()
-
-// 定义点击项的配置类型
-interface ClickConfig {
-  reportType: string
-  reportRefGetter: () => string
-  extraFilters?: Record<string, any>
-  dateConfig?: {
-    type: 'ETD' | 'ETA'
-    start: string
-    end: string
-    formatType?: 'Container' | 'Revenue'
-  }
-  transportMode: any
-}
-
-// 配置映射表：将 val 映射到具体配置
-const CLICK_CONFIG_MAP: Record<string, (val: string) => ClickConfig> = {
-  'KPI Departure': () => ({
-    reportType: 'atd_r4',
-    reportRefGetter: () => pie_chart_kpi_departure.value[0]?.paramsdata?.name || '',
-    dateConfig: {
-      title: 'KPI Departure',
-      type: kpiDefaultData.value.date_type,
-      start: kpiDefaultData.value.date_start,
-      end: kpiDefaultData.value.date_end
-    },
-    transportMode: kpiDefaultData.value.transportation
-  }),
-  'KPI Arrival': () => ({
-    reportType: 'ata_r3',
-    reportRefGetter: () => pie_chart_kpi_arrival.value[0]?.paramsdata?.name || '',
-    dateConfig: {
-      title: 'KPI Arrival',
-      type: kpiDefaultData.value.date_type,
-      start: kpiDefaultData.value.date_start,
-      end: kpiDefaultData.value.date_end
-    },
-    transportMode: kpiDefaultData.value.transportation
-  }),
-  'Pending Departure': () => ({
-    reportType: 'r4',
-
-    reportRefGetter: () => pie_chart_pending_departure.value[0]?.paramsdata?.name || '',
-    transportMode: pendingDefaultData.value.transportation
-  }),
-  'Pending Arrival': () => ({
-    reportType: 'r3',
-    reportRefGetter: () => pie_chart_pending_arrival.value[0]?.paramsdata?.name || '',
-    transportMode: pendingDefaultData.value.transportation
-  }),
-  'ETD to ETA (Days)': () => ({
-    reportType: 'r1',
-    reportRefGetter: () => pie_chart_ETD.value[0]?.paramsdata?.name || '',
-    dateConfig: {
-      type: etdDefaultData.value.date_type,
-      start: etdDefaultData.value.date_start,
-      end: etdDefaultData.value.date_end,
-      formatType: 'Container'
-    },
-    transportMode: etdDefaultData.value.transportation,
-    extraFilters: {
-      _reportRefe_date: {
-        value: [dayjs().startOf('year').format('MM/YYYY'), dayjs().endOf('year').format('MM/YYYY')],
-        keyType: 'dateRange'
-      }
-    }
-  }),
-  'Top 10 Origin': () => ({
-    reportType: 'top',
-    reportRefGetter: () => seller_chart_top10_origin.value[0]?.paramsdata || '',
-    dateConfig: {
-      type: top10DefaultData.value.date_type,
-      start: top10DefaultData.value.date_start,
-      end: top10DefaultData.value.date_end
-    },
-    transportMode: top10DefaultData.value.transportation,
-    extraFilters: {
-      _reportStationType: {
-        value: toporiginType.value,
-        keyType: 'normal'
-      }
-    }
-  }),
-  'Top 10 Destination': () => ({
-    reportType: 'top',
-    reportRefGetter: () => seller_chart_top10_destination.value[0]?.paramsdata || '',
-    dateConfig: {
-      type: top10DefaultData.value.date_type,
-      start: top10DefaultData.value.date_start,
-      end: top10DefaultData.value.date_end
-    },
-    transportMode: top10DefaultData.value.transportation,
-    extraFilters: {
-      _reportStationType: {
-        value: topdestinationinType.value,
-        keyType: 'normal'
-      },
-      consignee_city: {
-        value: [seller_chart_top10_destination.value[0]?.paramscityname],
-        keyType: 'array'
-      }
-    }
-  }),
-  'CO2e Emission by Origin (Top 10)': () => ({
-    reportType: 'co2e',
-    reportRefGetter: () => seller_chart_CO2_origin.value[0]?.paramsdata?.name || '',
-    dateConfig: {
-      type: co2OriginDefaultData.value.date_type,
-      start: co2OriginDefaultData.value.date_start,
-      end: co2OriginDefaultData.value.date_end
-    },
-    transportMode: co2OriginDefaultData.value.transportation,
-    extraFilters: {
-      _reportDataType: {
-        value: seller_chart_CO2_origin.value[0]?.paramsdata?.type,
-        keyType: 'normal'
-      },
-      _reportStationType: {
-        value: 'origin',
-        keyType: 'normal'
-      }
-    }
-  }),
-  'CO2e Emission by Destination (Top 10)': () => ({
-    reportType: 'co2e',
-    reportRefGetter: () => seller_chart_CO2_destination.value[0]?.paramsdata?.name || '',
-    dateConfig: {
-      type: co2DestinationDefaultData.value.date_type,
-      start: co2DestinationDefaultData.value.date_start,
-      end: co2DestinationDefaultData.value.date_end
-    },
-    transportMode: co2DestinationDefaultData.value.transportation,
-    extraFilters: {
-      _reportDataType: {
-        value: seller_chart_CO2_destination.value[0]?.paramsdata?.type,
-        keyType: 'normal'
-      },
-      _reportStationType: {
-        value: 'agent',
-        keyType: 'normal'
-      }
-    }
-  })
-}
-
-// 公共工具函数：处理日期转换
-const transformDateRange = (
-  type: 'ETD' | 'ETA',
-  [start, end]: [string, string],
-  formatType?: 'Container' | 'Revenue'
-): [string, string] => {
-  const parseFormat = formatType === 'Container' ? 'MM/YYYY' : 'MM/DD/YYYY'
-
-  const transform = (dateStr: string): string => {
-    let parsed = dayjs(dateStr, parseFormat, true)
-    if (formatType === 'Container') {
-      parsed = parsed.date(1)
-    }
-    return parsed.format(formatDate)
-  }
-
-  return [transform(start), transform(end)]
-}
-
-// 主函数
-const ClickParams = (val: string) => {
-  const configFactory = CLICK_CONFIG_MAP[val]
-  if (!configFactory) {
-    console.warn(`No config found for click value: ${val}`)
-    return
-  }
-
-  const config = configFactory(val)
-
-  // 1. 设置日期范围（如果存在）
-  if (config.dateConfig) {
-    const { type, start, end, formatType } = config.dateConfig
-    const [etdStart, etdEnd] = transformDateRange(type, [start, end], formatType)
-
-    const keyMap = { ETD: ['etd_start', 'etd_end'], ETA: ['eta_start', 'eta_end'] }
-    filtersStore.updateFilter({
-      title: type,
-      key: keyMap[type],
-      value: [etdStart, etdEnd],
-      keyType: 'dateRange'
-    })
-  }
-
-  // 2. 设置运输方式
-  filtersStore.updateFilter({
-    title: 'Transport Mode',
-    key: 'transport_mode',
-    value: config.transportMode,
-    keyType: 'array'
-  })
-
-  // 3. 设置报告引用和类型
-  filtersStore.updateFilter({
-    title: val,
-    key: '_reportRef',
-    value: config.reportRefGetter(),
-    keyType: 'normal'
-  })
-
-  filtersStore.updateFilter({
-    title: '_reportType',
-    key: '_reportType',
-    value: config.reportType,
-    keyType: 'normal',
-    isHide: true
-  })
-  if (val === 'Top 10 Origin') {
-    filtersStore.updateFilter({
-      title: 'Origin',
-      key: 'shipper_city',
-      value: [seller_chart_top10_origin.value[0]?.paramscityname],
-      keyType: 'array'
-    })
-  }
-  if (val === 'Top 10 Destination') {
-    filtersStore.updateFilter({
-      title: 'Destination',
-      key: 'consignee_city',
-      value: [seller_chart_top10_destination.value[0]?.paramscityname],
-      keyType: 'array'
-    })
-  }
-
-  // 4. 设置额外过滤器（如有）
-  if (config.extraFilters) {
-    Object.entries(config.extraFilters).forEach(([key, data]) => {
-      filtersStore.updateFilter({
-        title: key,
-        key: key,
-        value: data.value,
-        keyType: data.keyType,
-        isHide: true
-      })
-    })
-  }
-
-  // 5. 跳转
-  router.push({ path: '/tracking' })
-}
-
-const isShowCumstomerFilter = ref(false)
-const handleCumstomerFilter = () => {
-  isShowCumstomerFilter.value = !isShowCumstomerFilter.value
-}
-
-import DashboardGuide from '../src/components/DashboardGuide.vue'
-import { useGuideStore } from '@/stores/modules/guide'
-import { useThemeStore } from '@/stores/modules/theme'
-
-import kpiChartTipLight from './tipsImage/kpi-chart-tip.png'
-import kpiChartTipDark from './tipsImage/dark-kpi-chart-tip.png'
-import pendingChartTipLight from './tipsImage/pending-chart-tip.png'
-import pendingChartTipDark from './tipsImage/dark-pending-chart-tip.png'
-import etdToEtaChartsTipLight from './tipsImage/etd-to-eta-chart-tip.png'
-import etdToEtaChartsTipDark from './tipsImage/dark-etd-to-eta-chart-tip.png'
-import containerChartTipLight from './tipsImage/container-count-chart-tip.png'
-import containerChartTipDark from './tipsImage/dark-container-count-chart-tip.png'
-import top10ChartTipLight from './tipsImage/top-10-chart-tip.png'
-import top10ChartTipDark from './tipsImage/dark-top-10-chart-tip.png'
-import co2eChartTipLight from './tipsImage/co2e-chart-tip.png'
-import co2eChartTipDark from './tipsImage/dark-co2e-chart-tip.png'
-import revenueSpentChartTipLight from './tipsImage/revenue-spent-chart-tip.png'
-import revenueSpentChartTipDark from './tipsImage/dark-revenue-spent-chart-tip.png'
-import recentStatusChartTipLight from './tipsImage/recent-status-chart-tip.png'
-import recentStatusChartTipDark from './tipsImage/dark-recent-status-chart-tip.png'
-
-// Guide 图片
-import viewManagementLight from './guideImage/view-management.png'
-import viewManagementDark from './guideImage/dark-view-management.png'
-import saveConfigLight from './guideImage/save-config-guide.png'
-import saveConfigDark from './guideImage/dark-save-config-guide.png'
-import kpiChartLight from './guideImage/kpi-chart-guide.png'
-import kpiChartDark from './guideImage/dark-kpi-chart-guide.png'
-
-// ====== 2. 主题 store ======
-const themeStore = useThemeStore()
-const guideStore = useGuideStore()
-
-// ====== 3. 工具函数：根据主题返回对应图片 ======
-const getThemeImage = (light: string, dark: string) => {
-  return computed(() => (themeStore.theme === 'dark' ? dark : light))
-}
-
-// ====== 4. 自动生成 computed 图片引用 ======
-// Tips 图片
-const kpiChartTip = getThemeImage(kpiChartTipLight, kpiChartTipDark)
-const pendingChartTip = getThemeImage(pendingChartTipLight, pendingChartTipDark)
-const etdToEtaChartsTip = getThemeImage(etdToEtaChartsTipLight, etdToEtaChartsTipDark)
-const containerChartTip = getThemeImage(containerChartTipLight, containerChartTipDark)
-const top10ChartTip = getThemeImage(top10ChartTipLight, top10ChartTipDark)
-const co2eChartTip = getThemeImage(co2eChartTipLight, co2eChartTipDark)
-const revenueSpentChartTip = getThemeImage(revenueSpentChartTipLight, revenueSpentChartTipDark)
-const recentStatusChartTip = getThemeImage(recentStatusChartTipLight, recentStatusChartTipDark)
-
-// Guide 图片
-const viewManagementImg = getThemeImage(viewManagementLight, viewManagementDark)
-const saveConfigImg = getThemeImage(saveConfigLight, saveConfigDark)
-const kpiChartImg = getThemeImage(kpiChartLight, kpiChartDark)
-
-// ====== 5. 其他逻辑 ======
-const dashboardGuideRef = ref(null)
-const handleGuide = () => {
-  dashboardGuideRef.value?.startGuide()
-}
-</script>
-<template>
-  <div class="dashboard">
-    <!-- 评分 -->
-    <ScoringSystem></ScoringSystem>
-    <DashboardGuide ref="dashboardGuideRef"></DashboardGuide>
-    <!-- Title -->
-    <div class="Title">
-      <div>
-        <span>Dashboard</span>
-        <VDriverGuide style="margin-top: -1px" @click="handleGuide"></VDriverGuide>
-      </div>
-
-      <div style="position: relative">
-        <el-popover trigger="click" width="400" popper-style="border-radius: 12px">
-          <template #reference>
-            <el-button class="el-button--default">
-              <span class="iconfont_icon">
-                <svg class="iconfont" aria-hidden="true">
-                  <use xlink:href="#icon-icon_view__management_b"></use>
-                </svg>
-              </span>
-              View Management
-            </el-button>
-          </template>
-
-          <div class="Management">
-            <div class="title">View Management</div>
-            <div class="management-content">
-              <div class="management-item" 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>
-                <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>
-            </div>
-            <el-divider style="margin-top: 0; margin-bottom: 8px" />
-            <div class="tips">
-              <span class="iconfont_icon">
-                <svg class="iconfont iconfont_tips" aria-hidden="true">
-                  <use xlink:href="#icon-icon_info_b"></use>
-                </svg>
-              </span>
-              <div class="tips_text">
-                Please remember to click the save button in order to keep the new dashboard layout
-                and widgets.
-              </div>
-            </div>
-          </div>
-        </el-popover>
-
-        <img
-          id="view-management-guide"
-          v-if="guideStore.dashboard.isShowViewManagementGuidePhoto"
-          class="view-management-guide-class"
-          :class="{
-            'view-management-guide-dark-class': themeStore.theme === 'dark'
-          }"
-          :src="viewManagementImg"
-          alt=""
-        />
-        <el-popover
-          :visible="SaveVisible"
-          :popper-style="{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            padding: '8px 4px',
-            borderRadius: '12px',
-            width: '142px',
-            minWidth: '140px',
-            backgroundColor: 'var(--management-bg-color)'
-          }"
-        >
-          <template #reference>
-            <el-button
-              class="el-button--default"
-              @blur="SaveVisible = false"
-              @click="SaveVisible = !SaveVisible"
-            >
-              <span class="iconfont_icon">
-                <svg class="iconfont" aria-hidden="true">
-                  <use xlink:href="#icon-icon_save_b"></use>
-                </svg>
-              </span>
-              Save
-              <span class="iconfont_icon">
-                <svg class="iconfont" aria-hidden="true">
-                  <use xlink:href="#icon-icon_dropdown_b"></use>
-                </svg>
-              </span>
-            </el-button>
-          </template>
-          <div class="Save_filters" @click="SaveFilters">
-            <span class="iconfont_icon iconfont_icon_save">
-              <svg class="iconfont" aria-hidden="true">
-                <use xlink:href="#icon-icon_save_b"></use>
-              </svg>
-            </span>
-            <div>Save Filters</div>
-          </div>
-          <div class="Save_filters" @click="SaveLayout">
-            <span class="iconfont_icon iconfont_icon_save">
-              <svg class="iconfont" aria-hidden="true">
-                <use xlink:href="#icon-icon_save_b"></use>
-              </svg>
-            </span>
-            <div>Save Layout</div>
-          </div>
-        </el-popover>
-
-        <!--  -->
-        <img
-          id="save-config-guide"
-          v-if="guideStore.dashboard.isShowSaveConfigGuidePhoto"
-          class="save-config-guide-class position-absolute-guide"
-          :src="saveConfigImg"
-          :class="{
-            'save-config-guide-dark-class': themeStore.theme === 'dark'
-          }"
-          alt=""
-        />
-        <el-button
-          class="el-button--default"
-          :class="{ 'customer-filter-focus': isShowCumstomerFilter }"
-          style="padding: 8px"
-          @click="handleCumstomerFilter"
-        >
-          <span class="font_family icon-icon_search__user_b"></span>
-          <div style="margin-left: 4px" class="count" v-if="customerInfo.customerCode.length">
-            <span>{{ customerInfo.customerCode.length }}</span>
-          </div>
-        </el-button>
-      </div>
-    </div>
-    <!-- customer-filter -->
-    <CustomerFilter
-      v-if="isShowCumstomerFilter"
-      :data="customerInfo"
-      @changeCustomerData="changeCustomerData"
-    ></CustomerFilter>
-    <!-- 图表 -->
-    <div class="echarts">
-      <VueDraggable
-        style="
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-between;
-          gap: 8px;
-          width: 100%;
-        "
-        ref="infoContentRef"
-        ghost-class="ghost-class"
-        :forceFallback="true"
-        fallback-class="fallback-class"
-        v-model="Management"
-        handle=".handle-draggable"
-      >
-        <template v-for="item in Management" :key="item">
-          <div v-if="item.title === 'KPI' && item.switchValue" class="filters_left">
-            <!-- KPI -->
-            <VBox_Dashboard
-              style="overflow: visible"
-              @changeCancel="changeCancel(item.id)"
-              :isShowDragIconGudie="true"
-            >
-              <template #header>
-                <div class="Title_flex" style="position: relative">
-                  <img
-                    id="kpi-chart-guide"
-                    v-if="guideStore.dashboard.isShowKpiChartGuidePhoto"
-                    class="kpi-chart-guide-class position-absolute-guide"
-                    :src="kpiChartImg"
-                    alt=""
-                  />
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="kpiChartTip"
-                      :width="410"
-                      :label="'KPI Report：Day difference between actual and estimate.'"
-                      placement="bottom-start"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="kpiDefaultData"
-                    :isShowTransportModeGuide="true"
-                    :threeMonthsInterval="true"
-                    @FilterSearch="GetKpiData"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <div class="KPI_Pending">
-                  <div class="kpi">
-                    <PieChart
-                      ref="pie_chart_kpi_departure"
-                      @ClickParams="ClickParams(item.title + ' Departure')"
-                      :PieData="KPIobj"
-                      v-vloading="kpiLoading"
-                      style="height: 300px"
-                    ></PieChart>
-                  </div>
-                  <div class="kpi">
-                    <PieChart
-                      ref="pie_chart_kpi_arrival"
-                      :PieData="arrivalObj"
-                      v-vloading="kpiArrivalLoading"
-                      @ClickParams="ClickParams(item.title + ' Arrival')"
-                      style="height: 300px"
-                    ></PieChart>
-                  </div>
-                </div>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <div v-else-if="item.title === 'Pending' && item.switchValue" class="filters_left">
-            <!-- Pending -->
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="pendingChartTip"
-                      :width="420"
-                      :placement="'bottom-start'"
-                      :label="'Pending Report：Showing shipments which are soon to depart/arrive.'"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="pendingDefaultData"
-                    :isPending="true"
-                    :img="'./image/kpi-chart-tip.png'"
-                    @FilterSearch="GetPendingEcharts"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <div class="KPI_Pending">
-                  <div class="kpi">
-                    <PieChart
-                      ref="pie_chart_pending_departure"
-                      :PieData="pendingObj"
-                      v-vloading="pendingLoading"
-                      @ClickParams="ClickParams(item.title + ' Departure')"
-                      style="height: 300px"
-                    ></PieChart>
-                  </div>
-                  <div class="kpi">
-                    <PieChart
-                      ref="pie_chart_pending_arrival"
-                      @ClickParams="ClickParams(item.title + ' Arrival')"
-                      :PieData="pendingArrivalObj"
-                      v-vloading="pendingArrivalLoading"
-                      style="height: 300px"
-                    ></PieChart>
-                  </div>
-                </div>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- ETD to ETA -->
-          <div
-            v-else-if="item.title === 'ETD to ETA (Days)' && item.switchValue"
-            class="filters_left"
-          >
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="etdToEtaChartsTip"
-                      :width="430"
-                      :placement="'bottom-start'"
-                      :label="'ETD to ETA (Days)：Distribution of Transit Time (ETA-ETD) for All Shipments in Last 12 Months.'"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="etdDefaultData"
-                    @FilterSearch="GetETDEcharts"
-                    :isETDToETA="true"
-                    :isContainer="true"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <PieChart
-                  ref="pie_chart_ETD"
-                  @ClickParams="ClickParams(item.title)"
-                  :PieData="etdObj"
-                  v-vloading="etdLoading"
-                  style="height: 300px"
-                ></PieChart>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- Container Count -->
-          <div
-            v-else-if="item.title === 'Container Count' && item.switchValue"
-            class="filters_left"
-          >
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="containerChartTip"
-                      :placement="'bottom-start'"
-                      :label="'Container Count：Total Container Volume by Month (Last 12 Months)'"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="containerDefaultData"
-                    @FilterSearch="GetContainerCountEcharts"
-                    :isContainer="true"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <BarChart
-                  ref="seller_chart_Container_count"
-                  :BarData="containerObj"
-                  v-vloading="containerLoading"
-                  style="height: 300px"
-                  :isRevenue="true"
-                  save-image-name="Container Count"
-                  :barHeight="{ height: '300px' }"
-                ></BarChart>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- Top10 Origin/Top 10 Destination -->
-          <div
-            v-else-if="item.title === 'Top 10 Origin/Destination' && item.switchValue"
-            class="KPI_Pending"
-          >
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
-              <template #header>
-                <div class="Title_flex" style="height: 48px">
-                  <div style="display: flex">
-                    <el-tabs
-                      v-model="activeName"
-                      class="demo-tabs"
-                      style="height: 48px"
-                      @tab-click="handleTabClick"
-                    >
-                      <el-tab-pane :label="item.title1" name="first"></el-tab-pane>
-                      <el-tab-pane :label="item.title2" name="second"></el-tab-pane>
-                    </el-tabs>
-                    <VTipTooltip
-                      style="margin-left: 4px"
-                      :img="top10ChartTip"
-                      :label="'Top 10 Origin & Destination: Last 12 Months Shipment Volume Rankings: Top 10 Origin Cities and Top 10 Destination Cities'"
-                      :width="700"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="top10DefaultData"
-                    @FilterSearch="GetTop10ODEcharts"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template v-if="isShowtitle1" #content>
-                <div class="KPI_Pending">
-                  <div class="seller_chart">
-                    <SellerChart
-                      ref="seller_chart_top10_origin"
-                      @clickParams="ClickParams(item.title1)"
-                      :SellerData="Top10Obj.OriginData"
-                      v-vloading="topOriginLoading"
-                      :Interval="top1OInterval"
-                      saveImageName="Top 10 Origin"
-                    ></SellerChart>
-                  </div>
-                  <div class="map">
-                    <!-- <TopMap :obj="top10DefaultData.value" ref="top10Originref"></TopMap> -->
-                    <TopMap ref="top10Originref"></TopMap>
-                  </div>
-                </div>
-              </template>
-              <template v-else #content2>
-                <div class="KPI_Pending">
-                  <div class="seller_chart">
-                    <SellerChart
-                      ref="seller_chart_top10_destination"
-                      @clickParams="ClickParams(item.title2)"
-                      :SellerData="Top10Obj.DestinationData"
-                      :Interval="top1OInterval_dest"
-                      v-vloading="topOriginLoading"
-                      saveImageName="Top 10 Destination"
-                      style="height: 310px"
-                    ></SellerChart>
-                  </div>
-                  <div class="map" style="height: 310px">
-                    <!-- <TopMap :obj="top10DefaultData.value" ref="top10Destinationref"></TopMap> -->
-                    <TopMap ref="top10Destinationref"></TopMap>
-                  </div>
-                </div>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- CO2e Emission by Origin (Top 10) -->
-          <div
-            v-else-if="item.title === 'CO2e Emission by Origin (Top 10)' && item.switchValue"
-            class="filters_left"
-          >
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="co2eChartTip"
-                      :label="'CO2e Emission by Origin or Destination: Last 12 Months CO2e Emission Rankings: Top 10 Origin Cities and Top 10 Destination Cities'"
-                      :width="700"
-                      :placement="'bottom-start'"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="co2OriginDefaultData"
-                    @FilterSearch="GetCo2EmissionEcharts"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <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"
-                  :isRevenue="true"
-                  :barHeight="{ height: '250px' }"
-                ></BarChart>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- CO2e Emission by Destination (Top 10) -->
-          <div
-            v-else-if="item.title === 'CO2e Emission by Destination (Top 10)' && item.switchValue"
-            class="filters_left"
-          >
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <!-- <VTipTooltip :img="co2eChartTip"></VTipTooltip> -->
-                  </div>
-                  <DashFilters
-                    :defaultData="co2DestinationDefaultData"
-                    @FilterSearch="GetCo2DestinationEcharts"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <BarChart
-                  ref="seller_chart_CO2_destination"
-                  :BarData="destinationObj"
-                  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>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- <div
-            v-else-if="item.title === 'Revenue' && item.switchValue"
-            class="KPI_Pending"
-          > -->
-          <div
-            v-else-if="
-              item.title === 'Recent Status' && item.switchValue && RecentStatusList.length != 0
-            "
-            class="KPI_Pending"
-          >
-            <!-- Recent Status -->
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="recentStatusChartTip"
-                      :label="'Recent Status: Active shipment list with ETD within the past three months and the next month.'"
-                      :width="700"
-                      :placement="'bottom-start'"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="recentDefaultData"
-                    @FilterSearch="getTableData"
-                    :isRecent="true"
-                    :threeMonthsInterval="true"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <RecentStatus :RecentStatusList="RecentStatusList"></RecentStatus>
-                <div class="pagination">
-                  <span>Total {{ formatNumber(pageInfo.total) }}</span>
-                  <el-pagination
-                    v-model:current-page="pageInfo.pageNo"
-                    v-model:page-size="pageInfo.pageSize"
-                    :page-sizes="[10, 50, 100, 200]"
-                    layout="prev, pager, next"
-                    :pager-count="3"
-                    :total="pageInfo.total"
-                    @size-change="getTableData(recentDefaultData, true)"
-                    @current-change="getTableData(recentDefaultData, true)"
-                  />
-                </div>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- Revenue -->
-          <div v-else-if="item.title === 'Revenue Spent' && item.switchValue" class="KPI_Pending">
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    Revenue Spent
-                    <VTipTooltip
-                      :img="revenueSpentChartTip"
-                      :label="'Revenue Spent: Based on the billto object, display the corresponding revenue data. '"
-                      :placement="'bottom-start'"
-                      :width="700"
-                    ></VTipTooltip>
-                  </div>
-
-                  <DashFilters
-                    :defaultData="revenueDefaultData"
-                    @FilterSearch="GetRevenueEcharts"
-                    :isRevenue="true"
-                    :isContainer="true"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <RevenueChart
-                  :BarData="revenueObj"
-                  v-vloading="revenueLoading"
-                  :RevenueStartDate="revenue_date_start"
-                  :RevenueEndDate="revenue_date_end"
-                  style="height: 300px"
-                  :barHeight="{ height: '300px' }"
-                ></RevenueChart>
-              </template>
-            </VBox_Dashboard>
-          </div>
-        </template>
-      </VueDraggable>
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-.Title {
-  display: flex;
-  background-color: var(--color-mode);
-  height: 68px;
-  font-size: var(--font-size-6);
-  font-weight: 700;
-  padding: 0 24px;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.iconfont {
-  vertical-align: -2px;
-}
-
-.view-management-guide-class {
-  position: absolute;
-  top: 0px;
-  right: 85px;
-  width: 437px;
-  height: 603px;
-  z-index: 1500;
-  &.view-management-guide-dark-class {
-    width: 439px;
-    height: 622px;
-  }
-}
-.save-config-guide-class {
-  position: absolute;
-  top: -1px;
-  right: -13px;
-  width: 183px;
-  height: 160px;
-  z-index: 1500;
-  transform: translate(-0.8px, 0px);
-  &.save-config-guide-dark-class {
-    width: 182px;
-    height: 157px;
-    right: -12px;
-  }
-}
-.dashboard {
-  .count {
-    display: inline-flex;
-    height: 17px;
-    padding-left: 5px;
-    padding-right: 5px;
-    background-color: var(--color-theme);
-    border-radius: 9px;
-    font-size: 12px;
-    line-height: 19px;
-    text-align: center;
-    span {
-      color: var(--color-white) !important;
-      font-weight: 700;
-    }
-  }
-}
-.customer-filter-focus {
-  border: 1px solid var(--color-btn-default-bg-hover);
-  background-color: var(--color-btn-default-bg-hover);
-  fill: var(--color-theme);
-  span {
-    color: var(--color-theme);
-  }
-}
-.kpi-chart-guide-class {
-  top: -2px;
-  left: -50px;
-  width: 589px;
-  height: 478px;
-  z-index: 3500;
-}
-
-.Management {
-  max-height: 640px;
-  overflow: hidden;
-  border-radius: 12px;
-  background-color: var(--management-bg-color);
-}
-
-.management-content {
-  overflow-y: auto;
-  max-height: 533px;
-}
-.title {
-  font-weight: 700;
-  font-size: var(--font-size-5);
-  background-color: var(--color-header-bg);
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding-left: 16px;
-}
-.management-item {
-  width: 368px;
-  min-height: 54px;
-  margin: 10px auto;
-  background-color: var(--color-header-bg);
-  border-radius: var(--border-radius-6);
-  padding: 8px 16px;
-}
-.management_flex {
-  display: flex;
-  height: 20px;
-  justify-content: space-between;
-  align-items: center;
-}
-.content_title {
-  font-weight: 700;
-  font-size: var(--font-size-3);
-}
-.content_text {
-  color: var(--color-neutral-2);
-  font-size: var(--font-size-2);
-  line-height: 16px;
-}
-.content_text_warining {
-  color: var(--color-warning);
-  font-size: var(--font-size-2);
-  line-height: 16px;
-}
-.tips {
-  display: flex;
-  justify-content: center;
-  padding-bottom: 8px;
-}
-.iconfont_tips {
-  fill: var(--color-neutral-2);
-}
-.tips_text {
-  width: 278.43px;
-  text-align: center;
-  font-size: var(--font-size-2);
-  color: var(--color-neutral-2);
-}
-
-.Save_filters {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  font-size: var(--font-size-3);
-  width: 126px;
-  border-radius: 6px;
-  cursor: pointer;
-}
-.iconfont_icon_save {
-  margin-right: 16px;
-  fill: var(--color-neutral-1);
-}
-.Save_filters:hover {
-  border-color: var(--color-btn-default-bg-hover);
-  background-color: var(--color-btn-default-bg-hover);
-  .iconfont_icon_save {
-    fill: var(--color-theme);
-  }
-  div {
-    color: var(--color-theme);
-  }
-}
-.filters {
-  display: flex;
-  padding: 0 24px;
-  height: 32px;
-  align-items: center;
-  margin-bottom: 8px;
-  justify-content: space-between;
-}
-.KPI_Pending {
-  display: flex;
-  width: 100%;
-}
-.filters_left {
-  border-radius: var(--border-radius-6);
-  width: calc(50% - 4px);
-  flex: 0 0 calc(50% - 4px);
-  min-width: 0;
-  box-sizing: border-box;
-}
-
-:deep(.ETD_title) {
-  margin-bottom: 0 !important;
-}
-:deep(:where(.css-dev-only-do-not-override-19iuou).ant-picker-range) {
-  height: 32px;
-}
-.echarts {
-  padding: 0 22px;
-  background-color: var(--color-mode);
-  :deep(> div) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 8px;
-    width: 100%;
-    > * {
-      box-sizing: border-box;
-    }
-  }
-}
-.kpi {
-  width: 50%;
-  border-right: 1px solid var(--color-border);
-}
-.kpi:last-child {
-  border-right: none;
-}
-.ghost-class {
-  opacity: 0;
-}
-.fallback-class {
-  opacity: 1 !important;
-  background-color: var(--color-v-box-content-drag-bg);
-  cursor: move !important;
-  box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.2);
-  border-radius: 12px;
-}
-.pagination {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: 1px solid var(--color-border);
-  padding: 4px 8px;
-}
-
-.seller_chart {
-  width: 30%;
-  border-right: 1px solid var(--color-border);
-}
-.map {
-  width: 70%;
-}
-.Title_flex {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-right: 30px;
-}
-
-.dashboard {
-  z-index: 2014;
-  position: relative;
-  background-color: var(--color-mode);
-  padding-bottom: 40px;
-}
-:deep(.el-tabs__header) {
-  height: 48px;
-  margin-bottom: 0;
-}
-</style>
-<style lang="scss">
-:not(body):has(> img.driver-active-element) {
-  overflow: visible !important;
-}
-</style>

src/views/Dashboard/src/components/CustomerFilter.vue

@@ -35,7 +35,7 @@ watch(
     immediate: true
   }
 )
-const emit = defineEmits(['changeCustomerData'])
+const emit = defineEmits(['changeCustomerData', 'handleCumstomerSearch'])
 const changeData = (val: string[], type: string) => {
   // 同步选中状态
   emit('changeCustomerData', val, type)
@@ -113,6 +113,10 @@ const typeOptions = ref([
     value: 'notify_party_id'
   }
 ])
+
+const handleSearch = () => {
+  emit('handleCumstomerSearch')
+}
 </script>
 
 <template>
@@ -176,7 +180,7 @@ const typeOptions = ref([
         </div>
       </el-option>
     </el-select>
-    <el-button class="el-button--default">Search</el-button>
+    <el-button class="el-button--default" @click="handleSearch">Search</el-button>
   </div>
 </template>
 

src/views/Dashboard/src/components/test.vue

@@ -1,1570 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, reactive } from 'vue'
-import { VueDraggable } from 'vue-draggable-plus'
-import PieChart from './components/PieChart.vue'
-import SellerChart from './components/SellerChart.vue'
-import BarChart from './components/BarChart.vue'
-import RevenueChart from './components/RevenueChart.vue'
-import RecentStatus from './components/RecentStatus.vue'
-import ScoringSystem from './components/ScoringSystem.vue'
-import TopMap from './components/TopMap.vue'
-import DashFilters from './components/DashFiters.vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { formatNumber } from '@/utils/tools'
-import { useFiltersStore, FiltersType } from '@/stores/modules/filtersList'
-import dayjs from 'dayjs'
-import { useUserStore } from '@/stores/modules/user'
-
-const userStore = useUserStore()
-const formatDate = userStore.dateFormat
-const filtersStore = useFiltersStore()
-
-const router = useRouter()
-const activeName = ref('first')
-const SaveVisible = ref(false)
-// 可拖拽模块的列表
-interface ManagementItem {
-  title: string
-  switchValue: boolean
-  isRevenueDisplay: boolean
-  text: string
-  id: number
-  title1: string
-  title2: string
-}
-const Management = ref<ManagementItem[]>([])
-
-const changeCancel = (id: any) => {
-  Management.value[id - 1].switchValue = false
-}
-
-//RecentStatusList
-const RecentStatusList = ref()
-const pageInfo = ref({ pageNo: 1, pageSize: 10, total: 10000 })
-const isShowtitle1 = ref(true)
-// 点击tab
-const handleTabClick = (tab: any) => {
-  if (tab.props.name == 'first') {
-    isShowtitle1.value = true
-  } else {
-    isShowtitle1.value = false
-  }
-  GetTop10ODEcharts(dashboardObj.Top10faultData)
-}
-const KPIDefaulteData = ref()
-const PendingDefaulteData = ref()
-const RecentDefaulteData = ref()
-const ETDDefaulteData = ref()
-const ContainerefaultData = ref()
-const Top10DefaultData = ref()
-const Co2OriginDefaultData = ref()
-const Co2DestinationDefaultData = ref()
-const RevenueDefaultData = ref()
-// 获取首页数据
-let dashboardObj: any = {}
-const GetDashboardData = () => {
-  $api.getDashboardFilters({}).then((res: any) => {
-    if (res.code == 200) {
-      //给默认筛选条件赋值
-      KPIDefaulteData.value = res.data.KPIDefaulteData
-      dashboardObj.KPIDefaulteData = res.data.KPIDefaulteData
-      PendingDefaulteData.value = res.data.PendingDefaultData
-      dashboardObj.PendingDefaultData = res.data.PendingDefaultData
-      RecentDefaulteData.value = res.data.RecentDefaultData
-      dashboardObj.RecentDefaultData = res.data.RecentDefaultData
-      ETDDefaulteData.value = res.data.ETDDefaultData
-      dashboardObj.ETDDefaultData = res.data.ETDDefaultData
-      ContainerefaultData.value = res.data.ContainerefaultData
-      dashboardObj.ContainerefaultData = res.data.ContainerefaultData
-      Top10DefaultData.value = res.data.Top10faultData
-      dashboardObj.Top10faultData = res.data.Top10faultData
-      Co2OriginDefaultData.value = res.data.OriginCo2Top10faultData
-      dashboardObj.OriginCo2Top10faultData = res.data.OriginCo2Top10faultData
-      Co2DestinationDefaultData.value = res.data.DestinationCo2Top10faultData
-      dashboardObj.DestinationCo2Top10faultData = res.data.DestinationCo2Top10faultData
-      RevenueDefaultData.value = res.data.RevenueDefaultData
-      dashboardObj.RevenueDefaultData = res.data.RevenueDefaultData
-
-      nextTick(() => {
-        GetKpiData(KPIDefaulteData.value)
-        GetPendingEcharts(PendingDefaulteData.value)
-        getTableData(RecentDefaulteData.value, false)
-        GetETDEcharts(ETDDefaulteData.value)
-        GetContainerCountEcharts(ContainerefaultData.value)
-        GetTop10ODEcharts(Top10DefaultData.value)
-        GetCo2EmissionEcharts(Co2OriginDefaultData.value)
-        GetCo2DestinationEcharts(Co2DestinationDefaultData.value)
-        GetRevenueEcharts(RevenueDefaultData.value)
-      })
-    }
-  })
-}
-// 获取表单数据
-const getTableData = (val: any, isPage?: any) => {
-  dashboardObj.RecentDefaultData = val
-  const rc = isPage ? pageInfo.value.total : -1
-  $api
-    .GetDashboardData({
-      cp: pageInfo.value.pageNo,
-      ps: pageInfo.value.pageSize,
-      rc,
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        pageInfo.value.total = Number(res.data.rc)
-        Management.value = res.data.Management
-        RecentStatusList.value = res.data.searchData
-      }
-    })
-}
-const KPIobj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const Arrivalobj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const KPILoading = ref(true)
-const KPIArrivalLoading = ref(true)
-//查询KPI
-const GetKpiData = (val: any) => {
-  dashboardObj.KPIDefaulteData = val
-  // 获取KPI Departure图表数据
-  $api
-    .GetKPIEcharts({
-      r_type: 'atd_r4',
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        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
-      }
-    })
-    .finally(() => {
-      KPILoading.value = false
-    })
-  // 获取KPI Arrival图表数据
-  $api
-    .GetKPIEcharts({
-      r_type: 'ata_r3',
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        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
-      }
-    })
-    .finally(() => {
-      KPIArrivalLoading.value = false
-    })
-}
-const Pendingobj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const PendingArrivalobj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const PendingLoading = ref(true)
-const PendingArrivalLoading = ref(true)
-// 查询Pending
-const GetPendingEcharts = (val: any) => {
-  dashboardObj.PendingDefaultData = val
-  // 获取Pending Departure图表数据
-  $api
-    .GetPendingEcharts({
-      r_type: 'r4',
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        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
-      }
-    })
-    .finally(() => {
-      PendingLoading.value = false
-    })
-  // 获取Pending Arrival图表数据
-  $api
-    .GetPendingEcharts({
-      r_type: 'r3',
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        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
-      }
-    })
-    .finally(() => {
-      PendingArrivalLoading.value = false
-    })
-}
-const ETDobj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const ETDLoading = ref(true)
-// 获取ETD/ETA 图表数据
-const GetETDEcharts = (val: any) => {
-  dashboardObj.ETDDefaultData = val
-  $api
-    .GetETDEcharts({
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        ETDobj.ETD_Title = `{a|${res.data.ETD_Title}}`
-        ETDobj.ETDList = res.data.ETDList
-        ETDobj.ETD_Radius = res.data.ETD_Radius
-        ETDobj.download_name = res.data.download_name
-      }
-    })
-    .finally(() => {
-      ETDLoading.value = false
-    })
-}
-// 获取ContainerCount
-const containerObj = reactive({
-  bar_title: '',
-  barList: [],
-  barSeries: [],
-  Max: 0,
-  interval: 0,
-  download_name: ''
-})
-const containerLoading = ref(true)
-const GetContainerCountEcharts = (val: any) => {
-  dashboardObj.ContainerefaultData = val
-  $api
-    .GetContainerCountEcharts({
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        containerObj.bar_title = res.data.ContainerCount_Title
-        containerObj.barList = res.data.ContainerCountList
-        containerObj.barSeries = res.data.ContainerCounSeries
-        containerObj.Max = res.data.Max
-        containerObj.interval = res.data.interval
-        containerObj.download_name = res.data.download_name
-      }
-    })
-    .finally(() => {
-      containerLoading.value = false
-    })
-}
-const topdestinationinType = ref()
-const toporiginType = ref()
-//获取Top10 Origin/Destination
-const Top10Obj = reactive({
-  OriginData: [],
-  DestinationData: []
-})
-const Top1OInterval = reactive({
-  Max: 0,
-  interval: 0
-})
-const Top1OInterval_dest = reactive({
-  Max: 0,
-  interval: 0
-})
-const TopOriginLoading = ref(true)
-const Top10Originref = ref()
-const Top10Destinationref = ref()
-const GetTop10ODEcharts = (val: any) => {
-  dashboardObj.Top10faultData = val
-  $api
-    .GetTop10ODEcharts({
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        // Top10Originref.value[0].updataMapObj(dashboardObj.Top10faultData)
-        if (isShowtitle1.value) {
-          Top10Originref.value[0].updataMapObj(res.data.toporiginMap)
-        } else {
-          Top10Destinationref.value[0].updataMapObj(res.data.topdestinationinMap)
-        }
-        Top10Obj.DestinationData = res.data.seller_data_list_destination
-        Top10Obj.OriginData = res.data.seller_data_list_origin
-        Top1OInterval.Max = res.data.Max
-        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
-      }
-    })
-    .finally(() => {
-      TopOriginLoading.value = false
-    })
-}
-//获取CO2 Origin
-const EmissionLoading = ref(true)
-const EmissionObj = reactive({
-  bar_title: '',
-  barList: [],
-  barSeries: [],
-  Max: 0,
-  interval: 0,
-  download_name: ''
-})
-const GetCo2EmissionEcharts = (val: any) => {
-  dashboardObj.OriginCo2Top10faultData = val
-  $api
-    .GetCo2EmissionEcharts({
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        EmissionObj.bar_title = res.data.ContainerCount_Title
-        EmissionObj.barList = res.data.ContainerCountList
-        EmissionObj.barSeries = res.data.ContainerCounSeries
-        EmissionObj.Max = res.data.Max
-        EmissionObj.interval = res.data.interval
-        EmissionObj.download_name = res.data.download_name
-      }
-    })
-    .finally(() => {
-      EmissionLoading.value = false
-    })
-}
-//获取CO2 Destination
-const DestinationObj = reactive({
-  bar_title: '',
-  barList: [],
-  barSeries: [],
-  Max: 0,
-  interval: 0,
-  download_name: ''
-})
-const DestinationLoading = ref(true)
-const GetCo2DestinationEcharts = (val: any) => {
-  dashboardObj.DestinationCo2Top10faultData = val
-  $api
-    .GetCo2DestinationEcharts({
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        DestinationObj.bar_title = res.data.ContainerCount_Title
-        DestinationObj.barList = res.data.ContainerCountList
-        DestinationObj.barSeries = res.data.ContainerCounSeries
-        DestinationObj.Max = res.data.Max
-        DestinationObj.interval = res.data.interval
-        DestinationObj.download_name = res.data.download_name
-      }
-    })
-    .finally(() => {
-      DestinationLoading.value = false
-    })
-}
-//获取Revenue Spent
-
-const RevenueObj = reactive({
-  bar_title: '',
-  barList: [],
-  barSeries: [],
-  Max: 0,
-  interval: 0,
-  download_name: '',
-  isShowTooltips: true
-})
-const RevenueLoading = ref(true)
-const revenue_date_start = ref()
-const revenue_date_end = ref()
-const GetRevenueEcharts = (val: any) => {
-  revenue_date_start.value = val.date_start
-  revenue_date_end.value = val.date_end
-  dashboardObj.RevenueDefaultData = val
-  $api
-    .GetRevenueEcharts({
-      ...val
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        RevenueObj.bar_title = res.data.bar_title
-        RevenueObj.barList = res.data.barList
-        RevenueObj.barSeries = res.data.barSeries
-        RevenueObj.Max = res.data.Max
-        RevenueObj.interval = res.data.interval
-        RevenueObj.download_name = res.data.download_name
-      }
-    })
-    .finally(() => {
-      RevenueLoading.value = false
-    })
-}
-onMounted(() => {
-  GetDashboardData()
-})
-
-// Save Layout
-const SaveLayout = () => {
-  SaveVisible.value = false
-  Management.value.forEach((item: any, index: any) => {
-    item.id = index + 1
-  })
-  $api
-    .SaveLayout({
-      management: Management.value
-    })
-    .then((res: any) => {
-      if (res.code == 200) {
-        ElMessage({
-          message: res.data.msg,
-          duration: 3000,
-          type: 'success'
-        })
-      }
-    })
-}
-//Save Filters
-const SaveFilters = () => {
-  SaveVisible.value = false
-  Management.value.forEach((item: any, index: any) => {
-    item.id = index + 1
-  })
-  $api
-    .SaveLayout({
-      management: Management.value,
-      dashboardObj
-    })
-    .then((res: any) => {
-      if (res.code == 200) {
-        ElMessage({
-          message: res.data.msg,
-          duration: 3000,
-          type: 'success'
-        })
-      }
-    })
-}
-//ETD to ETA(DAYS)点击跳转
-const pie_chart_ETD = ref()
-const pie_chart_pending_arrival = ref()
-const pie_chart_pending_departure = ref()
-const pie_chart_kpi_departure = ref()
-const pie_chart_kpi_arrival = ref()
-const seller_chart_top10_origin = ref()
-const seller_chart_top10_destination = ref()
-const seller_chart_CO2_origin = ref()
-const seller_chart_CO2_destination = ref()
-
-// 定义点击项的配置类型
-interface ClickConfig {
-  reportType: string
-  reportRefGetter: () => string
-  extraFilters?: Record<string, any>
-  dateConfig?: {
-    type: 'ETD' | 'ETA'
-    start: string
-    end: string
-    formatType?: 'Container' | 'Revenue'
-  }
-  transportMode: any
-}
-
-// 配置映射表：将 val 映射到具体配置
-const CLICK_CONFIG_MAP: Record<string, (val: string) => ClickConfig> = {
-  'KPI Departure': () => ({
-    reportType: 'atd_r4',
-    reportRefGetter: () => pie_chart_kpi_departure.value[0]?.paramsdata?.name || '',
-    dateConfig: {
-      title: 'KPI Departure',
-      type: dashboardObj.KPIDefaulteData.date_type,
-      start: dashboardObj.KPIDefaulteData.date_start,
-      end: dashboardObj.KPIDefaulteData.date_end
-    },
-    transportMode: dashboardObj.KPIDefaulteData.transportation
-  }),
-  'KPI Arrival': () => ({
-    reportType: 'ata_r3',
-    reportRefGetter: () => pie_chart_kpi_arrival.value[0]?.paramsdata?.name || '',
-    dateConfig: {
-      title: 'KPI Arrival',
-      type: dashboardObj.KPIDefaulteData.date_type,
-      start: dashboardObj.KPIDefaulteData.date_start,
-      end: dashboardObj.KPIDefaulteData.date_end
-    },
-    transportMode: dashboardObj.KPIDefaulteData.transportation
-  }),
-  'Pending Departure': () => ({
-    reportType: 'r4',
-
-    reportRefGetter: () => pie_chart_pending_departure.value[0]?.paramsdata?.name || '',
-    transportMode: dashboardObj.PendingDefaultData.transportation
-  }),
-  'Pending Arrival': () => ({
-    reportType: 'r3',
-    reportRefGetter: () => pie_chart_pending_arrival.value[0]?.paramsdata?.name || '',
-    transportMode: dashboardObj.PendingDefaultData.transportation
-  }),
-  'ETD to ETA (Days)': () => ({
-    reportType: 'r1',
-    reportRefGetter: () => pie_chart_ETD.value[0]?.paramsdata?.name || '',
-    dateConfig: {
-      type: dashboardObj.ETDDefaultData.date_type,
-      start: dashboardObj.ETDDefaultData.date_start,
-      end: dashboardObj.ETDDefaultData.date_end,
-      formatType: 'Container'
-    },
-    transportMode: dashboardObj.ETDDefaultData.transportation,
-    extraFilters: {
-      _reportRefe_date: {
-        value: [dayjs().startOf('year').format('MM/YYYY'), dayjs().endOf('year').format('MM/YYYY')],
-        keyType: 'dateRange'
-      }
-    }
-  }),
-  'Top 10 Origin': () => ({
-    reportType: 'top',
-    reportRefGetter: () => seller_chart_top10_origin.value[0]?.paramsdata || '',
-    dateConfig: {
-      type: dashboardObj.Top10faultData.date_type,
-      start: dashboardObj.Top10faultData.date_start,
-      end: dashboardObj.Top10faultData.date_end
-    },
-    transportMode: dashboardObj.Top10faultData.transportation,
-    extraFilters: {
-      _reportStationType: {
-        value: toporiginType.value,
-        keyType: 'normal'
-      }
-    }
-  }),
-  'Top 10 Destination': () => ({
-    reportType: 'top',
-    reportRefGetter: () => seller_chart_top10_destination.value[0]?.paramsdata || '',
-    dateConfig: {
-      type: dashboardObj.Top10faultData.date_type,
-      start: dashboardObj.Top10faultData.date_start,
-      end: dashboardObj.Top10faultData.date_end
-    },
-    transportMode: dashboardObj.Top10faultData.transportation,
-    extraFilters: {
-      _reportStationType: {
-        value: topdestinationinType.value,
-        keyType: 'normal'
-      },
-      consignee_city: {
-        value: [seller_chart_top10_destination.value[0]?.paramscityname],
-        keyType: 'array'
-      }
-    }
-  }),
-  'CO2e Emission by Origin (Top 10)': () => ({
-    reportType: 'co2e',
-    reportRefGetter: () => seller_chart_CO2_origin.value[0]?.paramsdata?.name || '',
-    dateConfig: {
-      type: dashboardObj.OriginCo2Top10faultData.date_type,
-      start: dashboardObj.OriginCo2Top10faultData.date_start,
-      end: dashboardObj.OriginCo2Top10faultData.date_end
-    },
-    transportMode: dashboardObj.OriginCo2Top10faultData.transportation,
-    extraFilters: {
-      _reportDataType: {
-        value: seller_chart_CO2_origin.value[0]?.paramsdata?.type,
-        keyType: 'normal'
-      },
-      _reportStationType: {
-        value: 'origin',
-        keyType: 'normal'
-      }
-    }
-  }),
-  'CO2e Emission by Destination (Top 10)': () => ({
-    reportType: 'co2e',
-    reportRefGetter: () => seller_chart_CO2_destination.value[0]?.paramsdata?.name || '',
-    dateConfig: {
-      type: dashboardObj.DestinationCo2Top10faultData.date_type,
-      start: dashboardObj.DestinationCo2Top10faultData.date_start,
-      end: dashboardObj.DestinationCo2Top10faultData.date_end
-    },
-    transportMode: dashboardObj.DestinationCo2Top10faultData.transportation,
-    extraFilters: {
-      _reportDataType: {
-        value: seller_chart_CO2_destination.value[0]?.paramsdata?.type,
-        keyType: 'normal'
-      },
-      _reportStationType: {
-        value: 'agent',
-        keyType: 'normal'
-      }
-    }
-  })
-}
-
-// 公共工具函数：处理日期转换
-const transformDateRange = (
-  type: 'ETD' | 'ETA',
-  [start, end]: [string, string],
-  formatType?: 'Container' | 'Revenue'
-): [string, string] => {
-  const parseFormat = formatType === 'Container' ? 'MM/YYYY' : 'MM/DD/YYYY'
-
-  const transform = (dateStr: string): string => {
-    let parsed = dayjs(dateStr, parseFormat, true)
-    if (formatType === 'Container') {
-      parsed = parsed.date(1)
-    }
-    return parsed.format(formatDate)
-  }
-
-  return [transform(start), transform(end)]
-}
-
-// 主函数
-const ClickParams = (val: string) => {
-  const configFactory = CLICK_CONFIG_MAP[val]
-  if (!configFactory) {
-    console.warn(`No config found for click value: ${val}`)
-    return
-  }
-
-  const config = configFactory(val)
-
-  // 1. 设置日期范围（如果存在）
-  if (config.dateConfig) {
-    const { type, start, end, formatType } = config.dateConfig
-    const [etdStart, etdEnd] = transformDateRange(type, [start, end], formatType)
-
-    const keyMap = { ETD: ['etd_start', 'etd_end'], ETA: ['eta_start', 'eta_end'] }
-    filtersStore.updateFilter({
-      title: type,
-      key: keyMap[type],
-      value: [etdStart, etdEnd],
-      keyType: 'dateRange'
-    })
-  }
-
-  // 2. 设置运输方式
-  filtersStore.updateFilter({
-    title: 'Transport Mode',
-    key: 'transport_mode',
-    value: config.transportMode,
-    keyType: 'array'
-  })
-
-  // 3. 设置报告引用和类型
-  filtersStore.updateFilter({
-    title: val,
-    key: '_reportRef',
-    value: config.reportRefGetter(),
-    keyType: 'normal'
-  })
-
-  filtersStore.updateFilter({
-    title: '_reportType',
-    key: '_reportType',
-    value: config.reportType,
-    keyType: 'normal',
-    isHide: true
-  })
-  if (val === 'Top 10 Origin') {
-    filtersStore.updateFilter({
-      title: 'Origin',
-      key: 'shipper_city',
-      value: [seller_chart_top10_origin.value[0]?.paramscityname],
-      keyType: 'array'
-    })
-  }
-  if (val === 'Top 10 Destination') {
-    filtersStore.updateFilter({
-      title: 'Destination',
-      key: 'consignee_city',
-      value: [seller_chart_top10_destination.value[0]?.paramscityname],
-      keyType: 'array'
-    })
-  }
-
-  // 4. 设置额外过滤器（如有）
-  if (config.extraFilters) {
-    Object.entries(config.extraFilters).forEach(([key, data]) => {
-      filtersStore.updateFilter({
-        title: key,
-        key: key,
-        value: data.value,
-        keyType: data.keyType,
-        isHide: true
-      })
-    })
-  }
-
-  // 5. 跳转
-  router.push({ path: '/tracking' })
-}
-
-import { useGuideStore } from '@/stores/modules/guide'
-import { useThemeStore } from '@/stores/modules/theme'
-
-import kpiChartTipLight from './tipsImage/kpi-chart-tip.png'
-import kpiChartTipDark from './tipsImage/dark-kpi-chart-tip.png'
-import pendingChartTipLight from './tipsImage/pending-chart-tip.png'
-import pendingChartTipDark from './tipsImage/dark-pending-chart-tip.png'
-import etdToEtaChartsTipLight from './tipsImage/etd-to-eta-chart-tip.png'
-import etdToEtaChartsTipDark from './tipsImage/dark-etd-to-eta-chart-tip.png'
-import containerChartTipLight from './tipsImage/container-count-chart-tip.png'
-import containerChartTipDark from './tipsImage/dark-container-count-chart-tip.png'
-import top10ChartTipLight from './tipsImage/top-10-chart-tip.png'
-import top10ChartTipDark from './tipsImage/dark-top-10-chart-tip.png'
-import co2eChartTipLight from './tipsImage/co2e-chart-tip.png'
-import co2eChartTipDark from './tipsImage/dark-co2e-chart-tip.png'
-import revenueSpentChartTipLight from './tipsImage/revenue-spent-chart-tip.png'
-import revenueSpentChartTipDark from './tipsImage/dark-revenue-spent-chart-tip.png'
-import recentStatusChartTipLight from './tipsImage/recent-status-chart-tip.png'
-import recentStatusChartTipDark from './tipsImage/dark-recent-status-chart-tip.png'
-
-// Guide 图片
-import viewManagementLight from './guideImage/view-management.png'
-import viewManagementDark from './guideImage/dark-view-management.png'
-import saveConfigLight from './guideImage/save-config-guide.png'
-import saveConfigDark from './guideImage/dark-save-config-guide.png'
-import kpiChartLight from './guideImage/kpi-chart-guide.png'
-import kpiChartDark from './guideImage/dark-kpi-chart-guide.png'
-
-// ====== 2. 主题 store ======
-const themeStore = useThemeStore()
-const guideStore = useGuideStore()
-
-// ====== 3. 工具函数：根据主题返回对应图片 ======
-const getThemeImage = (light: string, dark: string) => {
-  return computed(() => (themeStore.theme === 'dark' ? dark : light))
-}
-
-// ====== 4. 自动生成 computed 图片引用 ======
-// Tips 图片
-const kpiChartTip = getThemeImage(kpiChartTipLight, kpiChartTipDark)
-const pendingChartTip = getThemeImage(pendingChartTipLight, pendingChartTipDark)
-const etdToEtaChartsTip = getThemeImage(etdToEtaChartsTipLight, etdToEtaChartsTipDark)
-const containerChartTip = getThemeImage(containerChartTipLight, containerChartTipDark)
-const top10ChartTip = getThemeImage(top10ChartTipLight, top10ChartTipDark)
-const co2eChartTip = getThemeImage(co2eChartTipLight, co2eChartTipDark)
-const revenueSpentChartTip = getThemeImage(revenueSpentChartTipLight, revenueSpentChartTipDark)
-const recentStatusChartTip = getThemeImage(recentStatusChartTipLight, recentStatusChartTipDark)
-
-// Guide 图片
-const viewManagementImg = getThemeImage(viewManagementLight, viewManagementDark)
-const saveConfigImg = getThemeImage(saveConfigLight, saveConfigDark)
-const kpiChartImg = getThemeImage(kpiChartLight, kpiChartDark)
-
-// ====== 5. 其他逻辑 ======
-const dashboardGuideRef = ref(null)
-const handleGuide = () => {
-  dashboardGuideRef.value?.startGuide()
-}
-</script>
-<template>
-  <div class="dashboard">
-    <!-- 评分 -->
-    <ScoringSystem></ScoringSystem>
-    <DashboardGuide ref="dashboardGuideRef"></DashboardGuide>
-    <!-- Title -->
-    <div class="Title">
-      <div>
-        <span>Dashboard</span>
-        <VDriverGuide style="margin-top: -1px" @click="handleGuide"></VDriverGuide>
-      </div>
-
-      <div style="position: relative">
-        <el-popover trigger="click" width="400" popper-style="border-radius: 12px">
-          <template #reference>
-            <el-button class="el-button--default">
-              <span class="iconfont_icon">
-                <svg class="iconfont" aria-hidden="true">
-                  <use xlink:href="#icon-icon_view__management_b"></use>
-                </svg>
-              </span>
-              View Management
-            </el-button>
-          </template>
-
-          <div class="Management">
-            <div class="title">View Management</div>
-            <div class="management-content">
-              <div class="management-item" 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>
-                <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>
-            </div>
-            <el-divider style="margin-top: 0; margin-bottom: 8px" />
-            <div class="tips">
-              <span class="iconfont_icon">
-                <svg class="iconfont iconfont_tips" aria-hidden="true">
-                  <use xlink:href="#icon-icon_info_b"></use>
-                </svg>
-              </span>
-              <div class="tips_text">
-                Please remember to click the save button in order to keep the new dashboard layout
-                and widgets.
-              </div>
-            </div>
-          </div>
-        </el-popover>
-
-        <img
-          id="view-management-guide"
-          v-if="guideStore.dashboard.isShowViewManagementGuidePhoto"
-          class="view-management-guide-class"
-          :class="{
-            'view-management-guide-dark-class': themeStore.theme === 'dark'
-          }"
-          :src="viewManagementImg"
-          alt=""
-        />
-        <el-popover
-          :visible="SaveVisible"
-          :popper-style="{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            padding: '8px 4px',
-            borderRadius: '12px',
-            width: '142px',
-            minWidth: '140px',
-            backgroundColor: 'var(--management-bg-color)'
-          }"
-        >
-          <template #reference>
-            <el-button
-              class="el-button--default"
-              @blur="SaveVisible = false"
-              @click="SaveVisible = !SaveVisible"
-            >
-              <span class="iconfont_icon">
-                <svg class="iconfont" aria-hidden="true">
-                  <use xlink:href="#icon-icon_save_b"></use>
-                </svg>
-              </span>
-              Save
-              <span class="iconfont_icon">
-                <svg class="iconfont" aria-hidden="true">
-                  <use xlink:href="#icon-icon_dropdown_b"></use>
-                </svg>
-              </span>
-            </el-button>
-          </template>
-          <div class="Save_filters" @click="SaveFilters">
-            <span class="iconfont_icon iconfont_icon_save">
-              <svg class="iconfont" aria-hidden="true">
-                <use xlink:href="#icon-icon_save_b"></use>
-              </svg>
-            </span>
-            <div>Save Filters</div>
-          </div>
-          <div class="Save_filters" @click="SaveLayout">
-            <span class="iconfont_icon iconfont_icon_save">
-              <svg class="iconfont" aria-hidden="true">
-                <use xlink:href="#icon-icon_save_b"></use>
-              </svg>
-            </span>
-            <div>Save Layout</div>
-          </div>
-        </el-popover>
-
-        <!--  -->
-        <img
-          id="save-config-guide"
-          v-if="guideStore.dashboard.isShowSaveConfigGuidePhoto"
-          class="save-config-guide-class position-absolute-guide"
-          :src="saveConfigImg"
-          :class="{
-            'save-config-guide-dark-class': themeStore.theme === 'dark'
-          }"
-          alt=""
-        />
-      </div>
-    </div>
-    <!-- 图表 -->
-    <div class="echarts">
-      <VueDraggable
-        style="
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-between;
-          gap: 8px;
-          width: 100%;
-        "
-        ref="infoContentRef"
-        ghost-class="ghost-class"
-        :forceFallback="true"
-        fallback-class="fallback-class"
-        v-model="Management"
-        handle=".handle-draggable"
-      >
-        <template v-for="item in Management" :key="item">
-          <div v-if="item.title === 'KPI' && item.switchValue" class="filters_left">
-            <!-- KPI -->
-            <VBox_Dashboard
-              style="overflow: visible"
-              @changeCancel="changeCancel(item.id)"
-              :isShowDragIconGudie="true"
-            >
-              <template #header>
-                <div class="Title_flex" style="position: relative">
-                  <img
-                    id="kpi-chart-guide"
-                    v-if="guideStore.dashboard.isShowKpiChartGuidePhoto"
-                    class="kpi-chart-guide-class position-absolute-guide"
-                    :src="kpiChartImg"
-                    alt=""
-                  />
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="kpiChartTip"
-                      :width="410"
-                      :label="'KPI Report：Day difference between actual and estimate.'"
-                      placement="bottom-start"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="KPIDefaulteData"
-                    :isShowTransportModeGuide="true"
-                    @FilterSearch="GetKpiData"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <div class="KPI_Pending">
-                  <div class="kpi">
-                    <PieChart
-                      ref="pie_chart_kpi_departure"
-                      @ClickParams="ClickParams(item.title + ' Departure')"
-                      :PieData="KPIobj"
-                      v-vloading="KPILoading"
-                      style="height: 300px"
-                    ></PieChart>
-                  </div>
-                  <div class="kpi">
-                    <PieChart
-                      ref="pie_chart_kpi_arrival"
-                      :PieData="Arrivalobj"
-                      v-vloading="KPIArrivalLoading"
-                      @ClickParams="ClickParams(item.title + ' Arrival')"
-                      style="height: 300px"
-                    ></PieChart>
-                  </div>
-                </div>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <div v-else-if="item.title === 'Pending' && item.switchValue" class="filters_left">
-            <!-- Pending -->
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="pendingChartTip"
-                      :width="420"
-                      :placement="'bottom-start'"
-                      :label="'Pending Report：Showing shipments which are soon to depart/arrive.'"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="PendingDefaulteData"
-                    :radioisDisabled="true"
-                    :img="'./image/kpi-chart-tip.png'"
-                    @FilterSearch="GetPendingEcharts"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <div class="KPI_Pending">
-                  <div class="kpi">
-                    <PieChart
-                      ref="pie_chart_pending_departure"
-                      :PieData="Pendingobj"
-                      v-vloading="PendingLoading"
-                      @ClickParams="ClickParams(item.title + ' Departure')"
-                      style="height: 300px"
-                    ></PieChart>
-                  </div>
-                  <div class="kpi">
-                    <PieChart
-                      ref="pie_chart_pending_arrival"
-                      @ClickParams="ClickParams(item.title + ' Arrival')"
-                      :PieData="PendingArrivalobj"
-                      v-vloading="PendingArrivalLoading"
-                      style="height: 300px"
-                    ></PieChart>
-                  </div>
-                </div>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- ETD to ETA -->
-          <div
-            v-else-if="item.title === 'ETD to ETA (Days)' && item.switchValue"
-            class="filters_left"
-          >
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="etdToEtaChartsTip"
-                      :width="430"
-                      :placement="'bottom-start'"
-                      :label="'ETD to ETA (Days)：Distribution of Transit Time (ETA-ETD) for All Shipments in Last 12 Months.'"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="ETDDefaulteData"
-                    @FilterSearch="GetETDEcharts"
-                    :isETDToETA="true"
-                    :isContainer="true"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <PieChart
-                  ref="pie_chart_ETD"
-                  @ClickParams="ClickParams(item.title)"
-                  :PieData="ETDobj"
-                  v-vloading="ETDLoading"
-                  style="height: 300px"
-                ></PieChart>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- Container Count -->
-          <div
-            v-else-if="item.title === 'Container Count' && item.switchValue"
-            class="filters_left"
-          >
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="containerChartTip"
-                      :placement="'bottom-start'"
-                      :label="'Container Count：Total Container Volume by Month (Last 12 Months)'"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="ContainerefaultData"
-                    @FilterSearch="GetContainerCountEcharts"
-                    :isContainer="true"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <BarChart
-                  ref="seller_chart_Container_count"
-                  :BarData="containerObj"
-                  v-vloading="containerLoading"
-                  style="height: 300px"
-                  :isRevenue="true"
-                  save-image-name="Container Count"
-                  :barHeight="{ height: '300px' }"
-                ></BarChart>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- Top10 Origin/Top 10 Destination -->
-          <div
-            v-else-if="item.title === 'Top 10 Origin/Destination' && item.switchValue"
-            class="KPI_Pending"
-          >
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
-              <template #header>
-                <div class="Title_flex" style="height: 48px">
-                  <div style="display: flex">
-                    <el-tabs
-                      v-model="activeName"
-                      class="demo-tabs"
-                      style="height: 48px"
-                      @tab-click="handleTabClick"
-                    >
-                      <el-tab-pane :label="item.title1" name="first"></el-tab-pane>
-                      <el-tab-pane :label="item.title2" name="second"></el-tab-pane>
-                    </el-tabs>
-                    <VTipTooltip
-                      style="margin-left: 4px"
-                      :img="top10ChartTip"
-                      :label="'Top 10 Origin & Destination: Last 12 Months Shipment Volume Rankings: Top 10 Origin Cities and Top 10 Destination Cities'"
-                      :width="700"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="Top10DefaultData"
-                    @FilterSearch="GetTop10ODEcharts"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template v-if="isShowtitle1" #content>
-                <div class="KPI_Pending">
-                  <div class="seller_chart">
-                    <SellerChart
-                      ref="seller_chart_top10_origin"
-                      @clickParams="ClickParams(item.title1)"
-                      :SellerData="Top10Obj.OriginData"
-                      v-vloading="TopOriginLoading"
-                      :Interval="Top1OInterval"
-                      saveImageName="Top 10 Origin"
-                    ></SellerChart>
-                  </div>
-                  <div class="map">
-                    <!-- <TopMap :obj="dashboardObj.Top10faultData" ref="Top10Originref"></TopMap> -->
-                    <TopMap ref="Top10Originref"></TopMap>
-                  </div>
-                </div>
-              </template>
-              <template v-else #content2>
-                <div class="KPI_Pending">
-                  <div class="seller_chart">
-                    <SellerChart
-                      ref="seller_chart_top10_destination"
-                      @clickParams="ClickParams(item.title2)"
-                      :SellerData="Top10Obj.DestinationData"
-                      :Interval="Top1OInterval_dest"
-                      v-vloading="TopOriginLoading"
-                      saveImageName="Top 10 Destination"
-                      style="height: 310px"
-                    ></SellerChart>
-                  </div>
-                  <div class="map" style="height: 310px">
-                    <!-- <TopMap :obj="dashboardObj.Top10faultData" ref="Top10Destinationref"></TopMap> -->
-                    <TopMap ref="Top10Destinationref"></TopMap>
-                  </div>
-                </div>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- CO2e Emission by Origin (Top 10) -->
-          <div
-            v-else-if="item.title === 'CO2e Emission by Origin (Top 10)' && item.switchValue"
-            class="filters_left"
-          >
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="co2eChartTip"
-                      :label="'CO2e Emission by Origin or Destination: Last 12 Months CO2e Emission Rankings: Top 10 Origin Cities and Top 10 Destination Cities'"
-                      :width="700"
-                      :placement="'bottom-start'"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="Co2OriginDefaultData"
-                    @FilterSearch="GetCo2EmissionEcharts"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <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"
-                  :isRevenue="true"
-                  :barHeight="{ height: '250px' }"
-                ></BarChart>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- CO2e Emission by Destination (Top 10) -->
-          <div
-            v-else-if="item.title === 'CO2e Emission by Destination (Top 10)' && item.switchValue"
-            class="filters_left"
-          >
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <!-- <VTipTooltip :img="co2eChartTip"></VTipTooltip> -->
-                  </div>
-                  <DashFilters
-                    :defaultData="Co2DestinationDefaultData"
-                    @FilterSearch="GetCo2DestinationEcharts"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <BarChart
-                  ref="seller_chart_CO2_destination"
-                  :BarData="DestinationObj"
-                  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>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- <div
-            v-else-if="item.title === 'Revenue' && item.switchValue"
-            class="KPI_Pending"
-          > -->
-          <div
-            v-else-if="
-              item.title === 'Recent Status' && item.switchValue && RecentStatusList.length != 0
-            "
-            class="KPI_Pending"
-          >
-            <!-- Recent Status -->
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    {{ item.title }}
-                    <VTipTooltip
-                      :img="recentStatusChartTip"
-                      :label="'Recent Status: Active shipment list with ETD within the past three months and the next month.'"
-                      :width="700"
-                      :placement="'bottom-start'"
-                    ></VTipTooltip>
-                  </div>
-                  <DashFilters
-                    :defaultData="RecentDefaulteData"
-                    @FilterSearch="getTableData"
-                    :isRecent="true"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <RecentStatus :RecentStatusList="RecentStatusList"></RecentStatus>
-                <div class="pagination">
-                  <span>Total {{ formatNumber(pageInfo.total) }}</span>
-                  <el-pagination
-                    v-model:current-page="pageInfo.pageNo"
-                    v-model:page-size="pageInfo.pageSize"
-                    :page-sizes="[10, 50, 100, 200]"
-                    layout="prev, pager, next"
-                    :pager-count="3"
-                    :total="pageInfo.total"
-                    @size-change="getTableData(RecentDefaulteData, true)"
-                    @current-change="getTableData(RecentDefaulteData, true)"
-                  />
-                </div>
-              </template>
-            </VBox_Dashboard>
-          </div>
-          <!-- Revenue -->
-          <div v-else-if="item.title === 'Revenue Spent' && item.switchValue" class="KPI_Pending">
-            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
-              <template #header>
-                <div class="Title_flex">
-                  <div>
-                    Revenue Spent
-                    <VTipTooltip
-                      :img="revenueSpentChartTip"
-                      :label="'Revenue Spent: Based on the billto object, display the corresponding revenue data. '"
-                      :placement="'bottom-start'"
-                      :width="700"
-                    ></VTipTooltip>
-                  </div>
-
-                  <DashFilters
-                    :defaultData="RevenueDefaultData"
-                    @FilterSearch="GetRevenueEcharts"
-                    :isRevenue="true"
-                    :isContainer="true"
-                  ></DashFilters>
-                </div>
-              </template>
-              <template #content>
-                <RevenueChart
-                  :BarData="RevenueObj"
-                  v-vloading="RevenueLoading"
-                  :RevenueStartDate="revenue_date_start"
-                  :RevenueEndDate="revenue_date_end"
-                  style="height: 300px"
-                  :barHeight="{ height: '300px' }"
-                ></RevenueChart>
-              </template>
-            </VBox_Dashboard>
-          </div>
-        </template>
-      </VueDraggable>
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-.Title {
-  display: flex;
-  background-color: var(--color-mode);
-  height: 68px;
-  font-size: var(--font-size-6);
-  font-weight: 700;
-  padding: 0 24px;
-  align-items: center;
-  justify-content: space-between;
-}
-.iconfont {
-  vertical-align: -2px;
-}
-
-.view-management-guide-class {
-  position: absolute;
-  top: 0px;
-  right: 85px;
-  width: 437px;
-  height: 603px;
-  z-index: 1500;
-  &.view-management-guide-dark-class {
-    width: 439px;
-    height: 622px;
-  }
-}
-.save-config-guide-class {
-  position: absolute;
-  top: -1px;
-  right: -13px;
-  width: 183px;
-  height: 160px;
-  z-index: 1500;
-  transform: translate(-0.8px, 0px);
-  &.save-config-guide-dark-class {
-    width: 182px;
-    height: 157px;
-    right: -12px;
-  }
-}
-.kpi-chart-guide-class {
-  top: -2px;
-  left: -50px;
-  width: 589px;
-  height: 478px;
-  z-index: 3500;
-}
-
-.Management {
-  max-height: 640px;
-  overflow: hidden;
-  border-radius: 12px;
-  background-color: var(--management-bg-color);
-}
-
-.management-content {
-  overflow-y: auto;
-  max-height: 533px;
-}
-.title {
-  font-weight: 700;
-  font-size: var(--font-size-5);
-  background-color: var(--color-header-bg);
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding-left: 16px;
-}
-.management-item {
-  width: 368px;
-  min-height: 54px;
-  margin: 10px auto;
-  background-color: var(--color-header-bg);
-  border-radius: var(--border-radius-6);
-  padding: 8px 16px;
-}
-.management_flex {
-  display: flex;
-  height: 20px;
-  justify-content: space-between;
-  align-items: center;
-}
-.content_title {
-  font-weight: 700;
-  font-size: var(--font-size-3);
-}
-.content_text {
-  color: var(--color-neutral-2);
-  font-size: var(--font-size-2);
-  line-height: 16px;
-}
-.content_text_warining {
-  color: var(--color-warning);
-  font-size: var(--font-size-2);
-  line-height: 16px;
-}
-.tips {
-  display: flex;
-  justify-content: center;
-  padding-bottom: 8px;
-}
-.iconfont_tips {
-  fill: var(--color-neutral-2);
-}
-.tips_text {
-  width: 278.43px;
-  text-align: center;
-  font-size: var(--font-size-2);
-  color: var(--color-neutral-2);
-}
-
-.Save_filters {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  font-size: var(--font-size-3);
-  width: 126px;
-  border-radius: 6px;
-  cursor: pointer;
-}
-.iconfont_icon_save {
-  margin-right: 16px;
-  fill: var(--color-neutral-1);
-}
-.Save_filters:hover {
-  border-color: var(--color-btn-default-bg-hover);
-  background-color: var(--color-btn-default-bg-hover);
-  .iconfont_icon_save {
-    fill: var(--color-theme);
-  }
-  div {
-    color: var(--color-theme);
-  }
-}
-.filters {
-  display: flex;
-  padding: 0 24px;
-  height: 32px;
-  align-items: center;
-  margin-bottom: 8px;
-  justify-content: space-between;
-}
-.KPI_Pending {
-  display: flex;
-  width: 100%;
-}
-.filters_left {
-  border-radius: var(--border-radius-6);
-  width: calc(50% - 4px);
-  flex: 0 0 calc(50% - 4px);
-  min-width: 0;
-  box-sizing: border-box;
-}
-
-:deep(.ETD_title) {
-  margin-bottom: 0 !important;
-}
-:deep(:where(.css-dev-only-do-not-override-19iuou).ant-picker-range) {
-  height: 32px;
-}
-.echarts {
-  padding: 0 22px;
-  background-color: var(--color-mode);
-  :deep(> div) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 8px;
-    width: 100%;
-    > * {
-      box-sizing: border-box;
-    }
-  }
-}
-.kpi {
-  width: 50%;
-  border-right: 1px solid var(--color-border);
-}
-.kpi:last-child {
-  border-right: none;
-}
-.ghost-class {
-  opacity: 0;
-}
-.fallback-class {
-  opacity: 1 !important;
-  background-color: var(--color-v-box-content-drag-bg);
-  cursor: move !important;
-  box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.2);
-  border-radius: 12px;
-}
-.pagination {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: 1px solid var(--color-border);
-  padding: 4px 8px;
-}
-
-.seller_chart {
-  width: 30%;
-  border-right: 1px solid var(--color-border);
-}
-.map {
-  width: 70%;
-}
-.Title_flex {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-right: 30px;
-}
-
-.dashboard {
-  z-index: 2014;
-  position: relative;
-  background-color: var(--color-mode);
-  padding-bottom: 40px;
-}
-:deep(.el-tabs__header) {
-  height: 48px;
-  margin-bottom: 0;
-}
-</style>
-<style lang="scss">
-:not(body):has(> img.driver-active-element) {
-  overflow: visible !important;
-}
-</style>

src/views/Tracking/index.ts

@@ -1 +1 @@
-export { default } from './src/TrackingView.new.vue'
+export { default } from './src/TrackingView.vue'

src/views/Tracking/src/TrackingView.new.vue

@@ -1,410 +0,0 @@
-<script setup lang="ts">
-import FilterTags from '@/components/FliterTags'
-import emitter from '@/utils/bus'
-import TransportMode from '@/components/TransportMode'
-import TrackingTable from './components/TrackingTable'
-import DateRange from '@/components/DateRange'
-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'
-import { useFiltersStore } from '@/stores/modules/filtersList'
-
-const userStore = useUserStore()
-const formatDate = userStore.dateFormat
-
-const filterRef: Ref<HTMLElement | null> = ref(null)
-const containerHeight = useCalculatingHeight(document.documentElement, 246, [filterRef])
-
-const filtersStore = useFiltersStore()
-const filtersList = computed(() => filtersStore.filtersList)
-
-const headerSearch = useHeaderSearch()
-// 从 store 中获取数据并绑定到输入框
-const headerSearchValue = computed(() => headerSearch.searchValue)
-// 监听顶部搜索结果的变化
-watch(
-  () => headerSearchValue.value,
-  (newData) => {
-    if (newData) {
-      // 从顶部获取的值
-      filtersStore.clearFilters()
-      filtersStore.updateFilter({
-        title: 'Shipment Status',
-        value: ['All'],
-        keyType: 'array',
-        key: 'filterTag'
-      })
-      textSearch.value = headerSearchValue.value
-      getTrackingData()
-    }
-  }
-)
-
-const textSearch = ref()
-const tableLoadingTableData = ref(false)
-
-const tabList = ref([
-  {
-    name: 'All',
-    number: 0,
-    type: 'all',
-    checked: true
-  },
-  {
-    name: 'Created',
-    number: 0,
-    type: 'created',
-    checked: false
-  },
-  {
-    name: 'Cargo Received',
-    number: 0,
-    type: 'cargo_received',
-    checked: false
-  },
-  {
-    name: 'Departed',
-    number: 0,
-    type: 'departed',
-    checked: false
-  },
-  {
-    name: 'Arrived',
-    number: 0,
-    type: 'arrived',
-    checked: false
-  },
-  {
-    name: 'Completed',
-    number: 0,
-    type: 'completed',
-    checked: false
-  }
-])
-
-const getTrackingData = () => {
-  const queryData = filtersStore.getQueryData
-
-  tableLoadingTableData.value = true
-  trackingTable_ref.value.getLoadingData(tableLoadingTableData.value)
-  $api
-    .getTrackingTableData({
-      cp: trackingTable_ref.value.pageInfo.pageNo,
-      ps: trackingTable_ref.value.pageInfo.pageSize,
-      rc: -1,
-      other_filed: '',
-      _textSearch: textSearch.value,
-      ...queryData
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        transportListItem.value = res.data.TransportList
-
-        tabList.value = res.data.tagsList
-        const checkedTabNames = tabList.value
-          .filter((item) => item.checked)
-          .map((item) => item.name)
-        filtersStore.updateFilter({
-          title: 'Shipment Status',
-          value: checkedTabNames,
-          keyType: 'array',
-          key: 'filterTag'
-        })
-        incotermsList.value = res.data.IncotermsList
-        serviceList.value = res.data.ServiceList
-
-        sessionStorage.setItem('TrackingData', JSON.stringify(res.data))
-        trackingTable_ref.value.searchTableData()
-        // 查询没结果的话显示icon
-        if (textSearch.value != '' && textSearch.value != undefined) {
-          if (res.data.searchData.length == 0) {
-            isShowAlertIcon.value = true
-          }
-        } else {
-          isShowAlertIcon.value = false
-        }
-      }
-    })
-}
-onMounted(() => {})
-const initPage = () => {
-  if (headerSearchValue.value) {
-    filtersStore.clearFilters()
-    filtersStore.updateFilter({
-      title: 'Shipment Status',
-      value: ['All'],
-      keyType: 'array',
-      key: 'filterTag'
-    })
-    textSearch.value = headerSearchValue.value
-  } else if (!filtersList.value || (filtersList.value && filtersList.value.length == 0)) {
-    filtersStore.updateFilter({
-      title: 'Transport Mode',
-      value: ['All'],
-      keyType: 'array',
-      key: 'transport_mode'
-    })
-    filtersStore.updateFilter({
-      title: 'ETD',
-      value: [
-        dayjs().subtract(2, 'month').startOf('month').format(formatDate),
-        dayjs().add(1, 'month').format(formatDate)
-      ],
-      keyType: 'dateRange',
-      key: ['etd_start', 'etd_end']
-    })
-    filtersStore.updateFilter({
-      title: 'Shipment Status',
-      value: ['All'],
-      keyType: 'array',
-      key: 'filterTag'
-    })
-  }
-  getTrackingData()
-}
-
-onMounted(() => {
-  initPage()
-})
-
-//defaultDate
-
-const trackingTable_ref = ref()
-const transportListItem = ref()
-
-const isShowAlertIcon = ref(false)
-const incotermsList = ref([])
-const serviceList = ref([])
-
-const tabChange = (changeTabList: any) => {
-  tabList.value = changeTabList
-  const checkedTabNames = tabList.value.filter((item) => item.checked).map((item) => item.name)
-  filtersStore.updateFilter({
-    title: 'Shipment Status',
-    value: checkedTabNames,
-    keyType: 'array',
-    key: 'filterTag'
-  })
-
-  getTrackingData()
-}
-// 点击search按钮
-const SearchInput = () => {
-  getTrackingData()
-}
-
-import TrackingGuide from './components/TrackingGuide.vue'
-import { useGuideStore } from '@/stores/modules/guide'
-import { onBeforeRouteLeave } from 'vue-router'
-
-const guideStore = useGuideStore()
-const trackingGuideRef = ref()
-const handleGuide = () => {
-  trackingGuideRef.value.startGuide() // 开始引导
-}
-
-const clearfilters = () => {
-  filtersStore.clearFilters()
-  getTrackingData()
-}
-
-const handleClose = (tagTitle: any) => {
-  filtersStore.deleteFilterByTitle(tagTitle)
-  getTrackingData()
-}
-
-const clearDaterangeTags = () => {}
-
-const clearMoreFiltersTags = () => {}
-
-onBeforeRouteLeave((route: any) => {
-  // guideStore.clearGuide()
-  const whiteList = ['Booking Detail', 'Tracking Detail']
-  if (!whiteList.includes(route?.name)) {
-    filtersStore.clearFilters()
-  }
-})
-</script>
-
-<template>
-  <div class="Title">
-    <span>Tracking</span>
-    <VDriverGuide @click="handleGuide"></VDriverGuide>
-  </div>
-  <TrackingGuide ref="trackingGuideRef"></TrackingGuide>
-  <div class="display" ref="filterRef">
-    <div class="filter-box">
-      <div class="filters-container" id="filters-container-guide">
-        <FilterTags :tagsList="tabList" @tabChange="tabChange"></FilterTags>
-        <div class="heaer_top">
-          <div class="search">
-            <el-input
-              placeholder="Enter Booking/HBL/PO/Container/Carrier Booking No. "
-              v-model="textSearch"
-              class="log_input"
-              @keyup.enter="SearchInput"
-            >
-              <template #prefix>
-                <span class="iconfont_icon">
-                  <svg class="iconfont icon_search" aria-hidden="true">
-                    <use xlink:href="#icon-icon_search_b"></use>
-                  </svg>
-                </span>
-              </template>
-              <template #suffix>
-                <el-tooltip
-                  v-if="isShowAlertIcon"
-                  :offset="6"
-                  popper-class="ShowAlerIcon"
-                  effect="dark"
-                  content="We support the following references number to find bookings:· Booking No./HAWB No./MAWB No./PO No./Carrier Booking No./Contract No./File No./Quote No."
-                  placement="bottom"
-                >
-                  <span class="iconfont_icon iconfont_icon_tip">
-                    <svg class="iconfont icon_search" aria-hidden="true">
-                      <use xlink:href="#icon-icon_info_b"></use>
-                    </svg>
-                  </span>
-                </el-tooltip>
-              </template>
-            </el-input>
-          </div>
-
-          <TransportMode
-            :transportListItem="transportListItem"
-            @TransportSearch="getTrackingData()"
-          ></TransportMode>
-          <DateRange
-            @DateRangeSearch="getTrackingData()"
-            @clearDaterangeTags="clearDaterangeTags"
-          ></DateRange>
-        </div>
-      </div>
-      <MoreFilters
-        @handleSearch="getTrackingData()"
-        :incotermsList="incotermsList"
-        :serviceList="serviceList"
-        @clearMoreFiltersTags="clearMoreFiltersTags"
-        :isShowMoreFiltersGuidePhoto="guideStore.tracking.isShowMoreFiltersGuidePhoto"
-      ></MoreFilters>
-      <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
-        >Search</el-button
-      >
-    </div>
-    <!-- 筛选项 -->
-    <div class="filtersTag" v-if="filtersStore.getTagsList.length" id="filter-tag-guide">
-      <el-tag
-        :key="tag.title"
-        class="tag"
-        v-for="tag in filtersStore.getTagsList"
-        :closable="!tag.title.includes('Shipment')"
-        :disable-transitions="false"
-        @close="handleClose(tag.title)"
-        color="#EFEFF0"
-      >
-        <el-tooltip
-          class="box-item"
-          effect="dark"
-          :content="tag.value"
-          placement="top"
-          :popper-style="{ maxWidth: '500px', whiteSpace: 'normal', wordWrap: 'break-word' }"
-          v-if="tag.value.length > 39"
-        >
-          {{ tag.value.length > 39 ? tag.value.slice(0, 39) + '...' : tag.value }}
-        </el-tooltip>
-        <div v-else>{{ tag.value }}</div>
-      </el-tag>
-      <div class="text_button" @click="clearfilters">Clear Filters</div>
-    </div>
-  </div>
-  <TrackingTable
-    :textSearch="textSearch"
-    :height="containerHeight"
-    ref="trackingTable_ref"
-  ></TrackingTable>
-</template>
-
-<style lang="scss" scoped>
-.filter-box {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  height: 100%;
-}
-.filters-container {
-  max-width: 1426px;
-  width: 80%;
-  display: flex;
-  flex-direction: column;
-}
-
-.Title {
-  display: flex;
-  height: 68px;
-  border: 1px solid var(--color-border);
-  border-top: none;
-  border-width: 1px 0 1px 0;
-  font-size: var(--font-size-6);
-  font-weight: 700;
-  padding: 0 24px;
-  align-items: center;
-}
-.display {
-  border: 1px solid var(--color-border);
-  border-width: 0 0 1px 0;
-  padding: 0 24px;
-}
-.heaer_top {
-  position: relative;
-  margin-top: 6.57px;
-  display: flex;
-}
-.search {
-  // width: 400px;
-  height: 32px;
-}
-.filtersTag {
-  margin-top: 8px;
-  margin-bottom: 4px;
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.tag {
-  border-radius: var(--border-radius-22);
-  margin: 0 8px 8px 0;
-  color: var(--color-neutral-1);
-  font-weight: 600;
-  font-size: var(--font-size-2);
-  border-color: var(--tag-boder-color);
-  background-color: var(--tag-bg-color) !important;
-}
-.iconfont_icon_tip {
-  margin-left: 8px;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-}
-.icon_search {
-  fill: var(--color-neutral-1);
-}
-@media only screen and (min-width: 1280px) {
-  .search {
-    width: 480px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  .search {
-    width: 740px;
-  }
-}
-:deep(.log_input .el-input__wrapper) {
-  box-shadow: 0 0 0 1px var(--color-select-border) inset;
-  border-radius: 6px;
-}
-</style>

src/views/Tracking/src/TrackingView.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import FilterTags from '@/components/FliterTags'
-import emitter from '@/utils/bus'
 import TransportMode from '@/components/TransportMode'
 import TrackingTable from './components/TrackingTable'
 import DateRange from '@/components/DateRange'
@@ -10,612 +9,116 @@ import { useCalculatingHeight } from '@/hooks/calculatingHeight'
 import { useHeaderSearch } from '@/stores/modules/headerSearch'
 import { useUserStore } from '@/stores/modules/user'
 import dayjs from 'dayjs'
+import { useFiltersStore } from '@/stores/modules/filtersList'
 
 const userStore = useUserStore()
 const formatDate = userStore.dateFormat
-const valueFormatDate = 'MM/DD/YYYY'
-
-const headerSearch = useHeaderSearch()
 
 const filterRef: Ref<HTMLElement | null> = ref(null)
-
 const containerHeight = useCalculatingHeight(document.documentElement, 246, [filterRef])
 
-const TrackingSearch = ref()
-const tableLoadingTableData = ref(false)
-let searchTableQeuryTracking: any = {}
-const filterData = reactive({
-  filtersTagData: [] as Array<string>,
-  transportData: [] as Array<string>,
-  daterangeData: [] as Array<string>,
-  morefiltersData: [] as Array<string>,
-  dashboardData: [] as Array<string>
-})
-const tagsData: any = ref([])
-const handleClose = (tag: any) => {
-  emitter.emit('clearTag', tag)
-  tagsData.value.splice(tagsData.value.indexOf(tag), 1)
-  if (
-    sessionStorage.getItem('reportList') != null ||
-    sessionStorage.getItem('reportList') != '{}'
-  ) {
-    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
-    } 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
-      filterData.dashboardData = []
-      data = {}
-    } else if (tag.includes('ETD')) {
-      filterData.daterangeData.forEach((item: any, index: any) => {
-        if (item.includes('ETD')) {
-          filterData.daterangeData.splice(index, 1)
-        }
-      })
-      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
-    } else if (tag.includes('Origin')) {
-      delete reportList.shipper_city
-      delete reportList._city_name
-      filterData.dashboardData = []
-    } else if (tag.includes('Destination')) {
-      delete reportList.consignee_city
-    }
-    sessionStorage.setItem('reportList', JSON.stringify(reportList))
-    sessionStorage.setItem('tagsList', JSON.stringify(data))
-  }
-  if (tag.includes('Transport')) {
-    delete searchTableQeuryTracking.transport_mode
-  } else if (tag.includes('Day') || tag.includes('CO2e')) {
-    delete searchTableQeuryTracking._reportRef
-    delete searchTableQeuryTracking._reportType
-    delete searchTableQeuryTracking._reportRefe_date
-    delete searchTableQeuryTracking._reportRefb_date
-    delete searchTableQeuryTracking._reportStationType
-    delete searchTableQeuryTracking._reportDataType
-    delete searchTableQeuryTracking._reportStationType
-    filterData.dashboardData = []
-  } else if (tag.includes('ETD')) {
-    filterData.daterangeData.forEach((item: any, index: any) => {
-      if (item.includes('ETD')) {
-        filterData.daterangeData.splice(index, 1)
-      }
-    })
-    delete searchTableQeuryTracking.etd_start
-    delete searchTableQeuryTracking.etd_end
-  } else if (tag.includes('ETA')) {
-    filterData.daterangeData.forEach((item: any, index: any) => {
-      if (item.includes('ETA')) {
-        filterData.daterangeData.splice(index, 1)
-      }
-    })
-    delete searchTableQeuryTracking.eta_start
-    delete searchTableQeuryTracking.eta_end
-  } else if (tag.includes('Creation')) {
-    delete searchTableQeuryTracking.created_time_start
-    delete searchTableQeuryTracking.created_time_end
-  } else if (tag.includes('Shippername')) {
-    delete searchTableQeuryTracking.shipper
-  } else if (tag.includes('Consigneename')) {
-    delete searchTableQeuryTracking.consignee
-  } else if (tag.includes('Service')) {
-    delete searchTableQeuryTracking.service
-  } else if (tag.includes('Incoterms')) {
-    delete searchTableQeuryTracking.incoterms
-  } else if (tag.includes('Notify Party')) {
-    delete searchTableQeuryTracking.notify_party
-  } else if (tag.includes('Bill to')) {
-    delete searchTableQeuryTracking.billto
-  } else if (tag.includes('Origin Agent')) {
-    delete searchTableQeuryTracking.origin
-  } else if (tag.includes('Destination Agent')) {
-    delete searchTableQeuryTracking.agent
-  } else if (tag.includes('Destination Operator')) {
-    delete searchTableQeuryTracking.dest_op
-  } else if (tag.includes('Sales')) {
-    delete searchTableQeuryTracking.sales_rep
-  } else if (tag.includes('Origin')) {
-    delete searchTableQeuryTracking.shipper_city
-    delete searchTableQeuryTracking._city_name
-    filterData.dashboardData = []
-  } else if (tag.includes('Destination')) {
-    delete searchTableQeuryTracking.consignee_city
-  } else if (tag.includes('Place of Receipt')) {
-    delete searchTableQeuryTracking.place_of_receipt_exp
-  } else if (tag.includes('Port of Loading')) {
-    delete searchTableQeuryTracking.port_of_loading
-  } else if (tag.includes('Place of delivery')) {
-    delete searchTableQeuryTracking.place_of_delivery_exp
-  } else if (tag.includes('Place of Discharge')) {
-    delete searchTableQeuryTracking.port_of_discharge
-  } else if (tag.includes('Vessel')) {
-    delete searchTableQeuryTracking['f_vessel/vessel']
-  } else if (tag.includes('Voyage')) {
-    delete searchTableQeuryTracking['f_voyage/voyage']
-  }
-
-  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  getTrackingData()
-}
-// 筛选框查询
-const FiltersSeach = (val: any, value: any) => {
-  searchTableQeuryTracking[val] = value
-
-  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  getTrackingData()
-}
-//TransportSearch
-const TransportSearch = (val: any) => {
-  filterData.transportData = []
-  if (val.data.length != 0) {
-    let str = `${val.title}:${val.data}`
-    filterData.transportData.push(str)
-  }
-  FiltersSeach('transport_mode', val.data)
-  renderTagsData()
-}
-// defaultTransport
-const defaultTransport = (val: any, value: any) => {
-  filterData.transportData = []
-  if (val.data.length != 0) {
-    let str = `${val.title}:${val.data}`
-    filterData.transportData.push(str)
-  }
-  if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
-    if (
-      sessionStorage.getItem('clickParams') === null ||
-      sessionStorage.getItem('clickParams') === '{}'
-    ) {
-      searchTableQeuryTracking.transport_mode = val.data
-    }
-  } else {
-    searchTableQeuryTracking = value
-  }
-}
-const setFilterData = (dateRangeData: any) => {
-  filterData.daterangeData = []
-  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(dateRangeData).length == 0) {
-        delete searchTableQeuryTracking.etd_start
-        delete searchTableQeuryTracking.etd_end
-      }
-      for (const key in dateRangeData) {
-        searchTableQeuryTracking.etd_start = dateRangeData[key].data[0]
-
-        searchTableQeuryTracking.etd_end = dateRangeData[key].data[1]
-      }
-    }
-  } else {
-    searchTableQeuryTracking = data
-    if (searchTableQeuryTracking._textSearch) {
-      TrackingSearch.value = searchTableQeuryTracking._textSearch
-    }
-  }
-
-  const rawData = localStorage.getItem('searchData')
-  const trackingData = rawData ? JSON.parse(rawData) : null
-  if (trackingData) {
-    // 根据顶部搜索框的搜索结果赋值
-    initDataByHeaderSearch()
-  } else if (!trackingData && !sessionStorage.getItem('clickParams')) {
-    getTrackingData()
-  }
-
-  renderTagsData()
-}
-//DateRangeSearch
-const DateRangeSearch = (dateRangeData: any) => {
-  setFilterData(dateRangeData)
-  if (Object.keys(dateRangeData).length == 0) {
-    delete searchTableQeuryTracking.etd_start
-    delete searchTableQeuryTracking.etd_end
-    delete searchTableQeuryTracking.eta_start
-    delete searchTableQeuryTracking.eta_end
-    delete searchTableQeuryTracking.created_time_start
-    delete searchTableQeuryTracking.created_time_end
-  }
-  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 = dateRangeData[key].data[0]
-      searchTableQeuryTracking.etd_end = dateRangeData[key].data[1]
-    } else if (key == 'ETA') {
-      searchTableQeuryTracking.eta_start = dateRangeData[key].data[0]
-      searchTableQeuryTracking.eta_end = dateRangeData[key].data[1]
-    } else {
-      searchTableQeuryTracking.created_time_start = dateRangeData[key].data[0]
-      searchTableQeuryTracking.created_time_end = dateRangeData[key].data[1]
-    }
-  }
-  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  getTrackingData()
-  renderTagsData()
-}
-//MoreFiltersSearch
-const MoreFiltersSearch = (val: any, value: any) => {
-  filterData.morefiltersData = []
-  if (Object.keys(value).length == 0) {
-    delete searchTableQeuryTracking.shipper
-    delete searchTableQeuryTracking.consignee
-    delete searchTableQeuryTracking.service
-    delete searchTableQeuryTracking.incoterms
-    delete searchTableQeuryTracking.notify_party
-    delete searchTableQeuryTracking.billto
-    delete searchTableQeuryTracking.origin
-    delete searchTableQeuryTracking.agent
-    delete searchTableQeuryTracking.sales_rep
-    delete searchTableQeuryTracking.dest_op
-    delete searchTableQeuryTracking.consignee_city
-    delete searchTableQeuryTracking.place_of_receipt_exp
-    delete searchTableQeuryTracking.place_of_delivery_exp
-    delete searchTableQeuryTracking.port_of_discharge
-    delete searchTableQeuryTracking.shipper_city
-    delete searchTableQeuryTracking['port_of_loading/fport_of_loading_un']
-    delete searchTableQeuryTracking['f_vessel/vessel']
-    delete searchTableQeuryTracking['f_voyage/voyage']
-  }
-  for (const key in val) {
-    let str = `${key}:${val[key]}`
-    filterData.morefiltersData.push(str)
-    if (key == 'Shippername') {
-      searchTableQeuryTracking.shipper = value[key]
-    } else if (key == 'Consigneename') {
-      searchTableQeuryTracking.consignee = value[key]
-    } else if (key == 'Service') {
-      searchTableQeuryTracking.service = value[key]
-    } else if (key == 'Incoterms') {
-      searchTableQeuryTracking.incoterms = value[key]
-    } else if (key == 'Notify Party') {
-      searchTableQeuryTracking.notify_party = value[key]
-    } else if (key == 'Bill to') {
-      searchTableQeuryTracking.billto = value[key]
-    } else if (key == 'Origin Agent') {
-      searchTableQeuryTracking.origin = value[key]
-    } else if (key == 'Destination Agent') {
-      searchTableQeuryTracking.agent = value[key]
-    } else if (key == 'Destination Operator') {
-      searchTableQeuryTracking.dest_op = value[key]
-    } else if (key == 'Sales') {
-      searchTableQeuryTracking.sales_rep = value[key]
-    } else if (key == 'Destination') {
-      searchTableQeuryTracking.consignee_city = value[key]
-    } else if (key == 'Place of Receipt') {
-      searchTableQeuryTracking.place_of_receipt_exp = value[key]
-    } else if (key == 'Origin') {
-      searchTableQeuryTracking.shipper_city = value[key]
-    } else if (key == 'Port of Loading') {
-      searchTableQeuryTracking['port_of_loading/fport_of_loading_un'] = value[key]
-    } else if (key == 'Place of delivery') {
-      searchTableQeuryTracking.place_of_delivery_exp = value[key]
-    } else if (key == 'Port of Discharge') {
-      searchTableQeuryTracking.port_of_discharge = value[key]
-    } else if (key == 'Vessel') {
-      searchTableQeuryTracking['f_vessel/vessel'] = value[key]
-    } else if (key == 'Voyage') {
-      searchTableQeuryTracking['f_voyage/voyage'] = value[key]
-    }
-  }
-  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  getTrackingData()
-  renderTagsData()
-}
-const defaultMorefilters = (val: any, value: any, data: any) => {
-  filterData.morefiltersData = []
-  for (const key in val) {
-    let str = `${key}:${val[key]}`
-    filterData.morefiltersData.push(str)
-    for (const key in val) {
-      if (key == 'Shippername') {
-        searchTableQeuryTracking.shipper = value[key]
-      } else if (key == 'Consigneename') {
-        searchTableQeuryTracking.consignee = value[key]
-      } else if (key == 'Service') {
-        searchTableQeuryTracking.service = value[key]
-      } else if (key == 'Incoterms') {
-        searchTableQeuryTracking.incoterms = value[key]
-      } else if (key == 'Notify Party') {
-        searchTableQeuryTracking.notify_party = value[key]
-      } else if (key == 'Bill to') {
-        searchTableQeuryTracking.billto = value[key]
-      } else if (key == 'Destination Operator') {
-        searchTableQeuryTracking.dest_op = value[key]
-      } else if (key == 'Origin Agent') {
-        searchTableQeuryTracking.origin = value[key]
-      } else if (key == 'Destination Agent') {
-        searchTableQeuryTracking.agent = value[key]
-      } else if (key == 'Sales') {
-        searchTableQeuryTracking.sales_rep = value[key]
-      } else if (key == 'Origin') {
-        searchTableQeuryTracking.shipper_city = value[key]
-      } else if (key == 'Destination') {
-        searchTableQeuryTracking.consignee_city = value[key]
-      } else if (key == 'Place of Receipt') {
-        searchTableQeuryTracking.place_of_receipt_exp = value[key]
-      } else if (key == 'Port of Loading') {
-        searchTableQeuryTracking.port_of_loading = value[key]
-      } else if (key == 'Place of delivery') {
-        searchTableQeuryTracking.place_of_delivery_exp = value[key]
-      } else if (key == 'Place of Discharge') {
-        searchTableQeuryTracking.port_of_discharge = value[key]
-      } else if (key == 'Vessel') {
-        searchTableQeuryTracking['f_vessel/vessel'] = value[key]
-      } else if (key == 'Voyage') {
-        searchTableQeuryTracking['f_voyage/voyage'] = value[key]
-      }
-    }
-    if (sessionStorage.getItem('searchTableQeuryTracking') != null) {
-      searchTableQeuryTracking = data
-    }
-  }
-}
-const clearfilters = () => {
-  TrackingSearch.value = ''
-  filterData.filtersTagData = []
-  tagsData.value = []
-  let str = 'Shipment status: All'
-  filterData.filtersTagData.push(str)
-  filterData.transportData = []
-  filterData.daterangeData = []
-  filterData.morefiltersData = []
-  filterData.dashboardData = []
-  emitter.emit('clearTag', 'Shipment status')
-  emitter.emit('clearTag', 'Transport Mode')
-  emitter.emit('clearTag', 'ETD')
-  emitter.emit('clearTag', 'ETA')
-  emitter.emit('clearTag', 'Creation Time')
-  emitter.emit('clearTag', 'Shippername')
-  emitter.emit('clearTag', 'Consigneename')
-  emitter.emit('clearTag', 'Service')
-  emitter.emit('clearTag', 'Incoterms')
-  emitter.emit('clearTag', 'Notify Party')
-  emitter.emit('clearTag', 'Bill to')
-  emitter.emit('clearTag', 'Origin Agent')
-  emitter.emit('clearTag', 'Destination Agent')
-  emitter.emit('clearTag', 'Destination Operator')
-  emitter.emit('clearTag', 'Sales')
-  emitter.emit('clearTag', 'Origin')
-  emitter.emit('clearTag', 'Destination')
-  emitter.emit('clearTag', 'Place of Receipt')
-  emitter.emit('clearTag', 'Port of Loading')
-  emitter.emit('clearTag', 'Place of delivery')
-  emitter.emit('clearTag', 'Port of Discharge')
-  emitter.emit('clearTag', 'Vessel')
-  emitter.emit('clearTag', 'Voyage')
-  searchTableQeuryTracking = {}
-  searchTableQeuryTracking.filterTag = ['All']
-  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  if (
-    sessionStorage.getItem('reportList') != null ||
-    sessionStorage.getItem('reportList') != '{}'
-  ) {
-    // sessionStorage.removeItem('reportList')
-    sessionStorage.removeItem('tagsList')
-  }
-  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])
-  }
-  if (filterData.daterangeData.length) {
-    filterData.daterangeData.forEach((item) => {
-      tagsData.value.push(item)
-    })
-  }
-  if (filterData.morefiltersData.length) {
-    filterData.morefiltersData.forEach((item) => {
-      tagsData.value.push(item)
-    })
-  }
-  if (filterData.dashboardData.length) {
-    filterData.dashboardData.forEach((item) => {
-      tagsData.value.push(item)
-    })
-  }
-  if (filterData.filtersTagData.length) {
-    filterData.filtersTagData.forEach((item) => {
-      tagsData.value.push(item)
-    })
-  }
-}
-// 清除 Transport Tags
-const clearTransportTags = () => {
-  filterData.transportData = []
-}
-// 清除 Daterange Tags
-const clearDaterangeTags = () => {
-  filterData.daterangeData = []
-}
-// 清除 MoreFilters Tags
-const clearMoreFiltersTags = () => {
-  filterData.morefiltersData = []
-}
-
-const initDataByHeaderSearch = () => {
-  const data = JSON.parse(localStorage.getItem('searchData'))
-  if (data) {
-    // 更新搜索框的值
-    TrackingSearch.value = data.searchValue
-    // 更新表格数据
-    TrackingTable_ref.value.getSharedTableData()
-    // 更新tagsList和TransportList
-    TransportListItem.value = data.trackingData.TransportList
-    TagsList.value = data.trackingData.tagsList
-    let obj = {
-      IncotermsList: data.trackingData.IncotermsList,
-      ServiceList: data.trackingData.ServiceList
-    }
-    sessionStorage.setItem('incotermsList', JSON.stringify(obj))
-    headerSearch.clearSearchData()
-    tagsData.value = []
-    filterData.transportData = []
-    filterData.daterangeData = []
-    filterData.morefiltersData = []
-    filterData.dashboardData = []
-    filterData.filtersTagData = []
-    let str = 'Shipment status: All'
-    filterData.filtersTagData.push(str)
-    searchTableQeuryTracking = {}
-    sessionStorage.removeItem('searchTableQeuryTracking')
-    searchTableQeuryTracking._textSearch = TrackingSearch.value
-    searchTableQeuryTracking.filterTag = ['All']
-
-    sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-    setTimeout(() => {
-      emitter.emit('clearTag', 'Shipment status')
-      emitter.emit('clearTag', 'Transport Mode')
-      emitter.emit('clearTag', 'ETD')
-      emitter.emit('clearTag', 'ETA')
-      emitter.emit('clearTag', 'Creation Time')
-      emitter.emit('clearTag', 'Shippername')
-      emitter.emit('clearTag', 'Consigneename')
-      emitter.emit('clearTag', 'Service')
-      emitter.emit('clearTag', 'Incoterms')
-      emitter.emit('clearTag', 'Notify Party')
-      emitter.emit('clearTag', 'Bill to')
-      emitter.emit('clearTag', 'Origin Agent')
-      emitter.emit('clearTag', 'Destination Agent')
-      emitter.emit('clearTag', 'Destination Operator')
-      emitter.emit('clearTag', 'Sales')
-      emitter.emit('clearTag', 'Origin')
-      emitter.emit('clearTag', 'Destination')
-      emitter.emit('clearTag', 'Place of Receipt')
-      emitter.emit('clearTag', 'Port of Loading')
-      emitter.emit('clearTag', 'Place of delivery')
-      emitter.emit('clearTag', 'Port of Discharge')
-      emitter.emit('clearTag', 'Vessel')
-      emitter.emit('clearTag', 'Voyage')
-    }, 2000)
-    renderTagsData()
-  }
-}
+const filtersStore = useFiltersStore()
+const filtersList = computed(() => filtersStore.filtersList)
 
+const headerSearch = useHeaderSearch()
 // 从 store 中获取数据并绑定到输入框
-const headerSearchdData = computed(() => headerSearch.searchValue)
+const headerSearchValue = computed(() => headerSearch.searchValue)
 // 监听顶部搜索结果的变化
 watch(
-  () => headerSearchdData.value,
+  () => headerSearchValue.value,
   (newData) => {
     if (newData) {
-      initDataByHeaderSearch()
+      // 从顶部获取的值
+      filtersStore.clearFilters()
+      filtersStore.updateFilter({
+        title: 'Shipment Status',
+        value: ['All'],
+        keyType: 'array',
+        key: 'filterTag'
+      })
+      textSearch.value = headerSearchValue.value
+      getTrackingData()
     }
   }
 )
 
-const TrackingTable_ref = ref()
-const TransportListItem = ref()
-interface ListItem {
-  name: string
-  number: number
-  type: string
-  checked: boolean
-}
-const TagsList = ref<ListItem[]>([])
-const filterTag = ref(['All'])
-const isShowAlertIcon = ref(false)
-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)
-    }
+const textSearch = ref()
+const tableLoadingTableData = ref(false)
+
+const tabList = ref([
+  {
+    name: 'All',
+    number: 0,
+    type: 'all',
+    checked: true
+  },
+  {
+    name: 'Created',
+    number: 0,
+    type: 'created',
+    checked: false
+  },
+  {
+    name: 'Cargo Received',
+    number: 0,
+    type: 'cargo_received',
+    checked: false
+  },
+  {
+    name: 'Departed',
+    number: 0,
+    type: 'departed',
+    checked: false
+  },
+  {
+    name: 'Arrived',
+    number: 0,
+    type: 'arrived',
+    checked: false
+  },
+  {
+    name: 'Completed',
+    number: 0,
+    type: 'completed',
+    checked: false
   }
+])
+
+const getTrackingData = () => {
+  const queryData = filtersStore.getQueryData
 
   tableLoadingTableData.value = true
-  TrackingTable_ref.value.getLoadingData(tableLoadingTableData.value)
+  trackingTable_ref.value.getLoadingData(tableLoadingTableData.value)
   $api
     .getTrackingTableData({
-      cp: TrackingTable_ref.value.pageInfo.pageNo,
-      ps: TrackingTable_ref.value.pageInfo.pageSize,
+      cp: trackingTable_ref.value.pageInfo.pageNo,
+      ps: trackingTable_ref.value.pageInfo.pageSize,
       rc: -1,
       other_filed: '',
-      ...searchTableQeuryTracking,
-      ...curRangeData
+      _textSearch: textSearch.value,
+      ...queryData
     })
     .then((res: any) => {
       if (res.code === 200) {
-        TransportListItem.value = res.data.TransportList
-        TagsList.value = res.data.tagsList
-        let obj = {
-          IncotermsList: res.data.IncotermsList,
-          ServiceList: res.data.ServiceList
-        }
-        let taglist: any = []
-        if (Object.keys(filterData.filtersTagData).length == 0) {
-          TagsList.value.forEach((item: any) => {
-            if (item.checked == true) {
-              taglist.push(item.name)
-            }
-          })
-          let str = 'Shipment status: ' + taglist.toString()
-          filterData.filtersTagData.push(str)
-          filterData.filtersTagData.forEach((item) => {
-            tagsData.value.push(item)
-          })
-        }
-        sessionStorage.setItem('incotermsList', JSON.stringify(obj))
+        transportListItem.value = res.data.TransportList
+
+        tabList.value = res.data.tagsList
+        const checkedTabNames = tabList.value
+          .filter((item) => item.checked)
+          .map((item) => item.name)
+        filtersStore.updateFilter({
+          title: 'Shipment Status',
+          value: checkedTabNames,
+          keyType: 'array',
+          key: 'filterTag'
+        })
+        incotermsList.value = res.data.IncotermsList
+        serviceList.value = res.data.ServiceList
+
         sessionStorage.setItem('TrackingData', JSON.stringify(res.data))
-        TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
+        trackingTable_ref.value.searchTableData()
         // 查询没结果的话显示icon
-        if (TrackingSearch.value != '' && TrackingSearch.value != undefined) {
+        if (textSearch.value != '' && textSearch.value != undefined) {
           if (res.data.searchData.length == 0) {
             isShowAlertIcon.value = true
           }
@@ -624,96 +127,105 @@ const getTrackingData = () => {
         }
       }
     })
-    .finally(() => {
-      sessionStorage.removeItem('clickParams')
+}
+onMounted(() => {})
+const initPage = () => {
+  if (headerSearchValue.value) {
+    filtersStore.clearFilters()
+    filtersStore.updateFilter({
+      title: 'Shipment Status',
+      value: ['All'],
+      keyType: 'array',
+      key: 'filterTag'
+    })
+    textSearch.value = headerSearchValue.value
+  } else if (!filtersList.value || (filtersList.value && filtersList.value.length == 0)) {
+    filtersStore.updateFilter({
+      title: 'Transport Mode',
+      value: ['All'],
+      keyType: 'array',
+      key: 'transport_mode'
+    })
+    filtersStore.updateFilter({
+      title: 'ETD',
+      value: [
+        dayjs().subtract(2, 'month').startOf('month').format(formatDate),
+        dayjs().add(1, 'month').format(formatDate)
+      ],
+      keyType: 'dateRange',
+      key: ['etd_start', 'etd_end']
     })
+    filtersStore.updateFilter({
+      title: 'Shipment Status',
+      value: ['All'],
+      keyType: 'array',
+      key: 'filterTag'
+    })
+  }
+  getTrackingData()
 }
+
 onMounted(() => {
-  if (
-    sessionStorage.getItem('clickParams') != null &&
-    sessionStorage.getItem('clickParams') != '{}'
-  ) {
-    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
+  initPage()
+})
 
-        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
+//defaultDate
 
-        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]
-      }
-    }
+const trackingTable_ref = ref()
+const transportListItem = ref()
 
-    // sessionStorage.removeItem('reportList')
-    sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-    getTrackingData()
-  }
-  renderTagsData()
-})
-const changeTag = (val: any, boolean: any) => {
-  filterData.filtersTagData = []
-  searchTableQeuryTracking.filterTag = val
-  let str = 'Shipment status: ' + val
-  filterData.filtersTagData.push(str)
-  filterTag.value = val
+const isShowAlertIcon = ref(false)
+const incotermsList = ref([])
+const serviceList = ref([])
 
-  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  if (boolean) {
-    getTrackingData()
-  }
-  renderTagsData()
+const tabChange = (changeTabList: any) => {
+  tabList.value = changeTabList
+  const checkedTabNames = tabList.value.filter((item) => item.checked).map((item) => item.name)
+  filtersStore.updateFilter({
+    title: 'Shipment Status',
+    value: checkedTabNames,
+    keyType: 'array',
+    key: 'filterTag'
+  })
+
+  getTrackingData()
 }
 // 点击search按钮
 const SearchInput = () => {
-  searchTableQeuryTracking._textSearch = TrackingSearch.value
-
-  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   getTrackingData()
 }
 
 import TrackingGuide from './components/TrackingGuide.vue'
 import { useGuideStore } from '@/stores/modules/guide'
+import { onBeforeRouteLeave } from 'vue-router'
 
 const guideStore = useGuideStore()
 const trackingGuideRef = ref()
 const handleGuide = () => {
   trackingGuideRef.value.startGuide() // 开始引导
 }
+
+const clearfilters = () => {
+  filtersStore.clearFilters()
+  getTrackingData()
+}
+
+const handleClose = (tagTitle: any) => {
+  filtersStore.deleteFilterByTitle(tagTitle)
+  getTrackingData()
+}
+
+const clearDaterangeTags = () => {}
+
+const clearMoreFiltersTags = () => {}
+
+onBeforeRouteLeave((route: any) => {
+  // guideStore.clearGuide()
+  const whiteList = ['Booking Detail', 'Tracking Detail']
+  if (!whiteList.includes(route?.name)) {
+    filtersStore.clearFilters()
+  }
+})
 </script>
 
 <template>
@@ -725,12 +237,12 @@ const handleGuide = () => {
   <div class="display" ref="filterRef">
     <div class="filter-box">
       <div class="filters-container" id="filters-container-guide">
-        <FilterTags :TagsListItem="TagsList" @changeTag="changeTag"></FilterTags>
+        <FilterTags :tagsList="tabList" @tabChange="tabChange"></FilterTags>
         <div class="heaer_top">
           <div class="search">
             <el-input
               placeholder="Enter Booking/HBL/PO/Container/Carrier Booking No. "
-              v-model="TrackingSearch"
+              v-model="textSearch"
               class="log_input"
               @keyup.enter="SearchInput"
             >
@@ -761,62 +273,56 @@ const handleGuide = () => {
           </div>
 
           <TransportMode
-            :isShipment="true"
-            :TransportListItem="TransportListItem"
-            @TransportSearch="TransportSearch"
-            @defaultTransport="defaultTransport"
-            @clearTransportTags="clearTransportTags"
+            :transportListItem="transportListItem"
+            @TransportSearch="getTrackingData()"
           ></TransportMode>
           <DateRange
-            :isShipment="true"
-            @DateRangeSearch="DateRangeSearch"
+            @DateRangeSearch="getTrackingData()"
             @clearDaterangeTags="clearDaterangeTags"
-            @defaultDate="defaultDate"
           ></DateRange>
         </div>
       </div>
       <MoreFilters
-        :isShipment="true"
-        :searchTableQeury="searchTableQeuryTracking"
-        @MoreFiltersSearch="MoreFiltersSearch"
+        @handleSearch="getTrackingData()"
+        :incotermsList="incotermsList"
+        :serviceList="serviceList"
         @clearMoreFiltersTags="clearMoreFiltersTags"
-        @defaultMorefilters="defaultMorefilters"
         :isShowMoreFiltersGuidePhoto="guideStore.tracking.isShowMoreFiltersGuidePhoto"
-        :pageMode="'tracking'"
       ></MoreFilters>
       <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
         >Search</el-button
       >
     </div>
     <!-- 筛选项 -->
-    <div class="filtersTag" v-if="tagsData.length" id="filter-tag-guide">
+    <div class="filtersTag" v-if="filtersStore.getTagsList.length" id="filter-tag-guide">
       <el-tag
-        :key="tag"
+        :key="tag.title"
         class="tag"
-        v-for="tag in tagsData"
-        :closable="!tag.includes('Shipment')"
+        v-for="tag in filtersStore.getTagsList"
+        :closable="!tag.title.includes('Shipment')"
         :disable-transitions="false"
-        @close="handleClose(tag)"
+        @close="handleClose(tag.title)"
         color="#EFEFF0"
       >
         <el-tooltip
           class="box-item"
           effect="dark"
-          :content="tag"
+          :content="tag.value"
           placement="top"
-          v-if="tag.length > 39"
+          :popper-style="{ maxWidth: '500px', whiteSpace: 'normal', wordWrap: 'break-word' }"
+          v-if="tag.value.length > 39"
         >
-          {{ tag.length > 39 ? tag.substr(0, 39) + '...' : tag }}
+          {{ tag.value.length > 39 ? tag.value.slice(0, 39) + '...' : tag.value }}
         </el-tooltip>
-        <div v-else>{{ tag }}</div>
+        <div v-else>{{ tag.value }}</div>
       </el-tag>
       <div class="text_button" @click="clearfilters">Clear Filters</div>
     </div>
   </div>
   <TrackingTable
+    :textSearch="textSearch"
     :height="containerHeight"
-    :tagsData="tagsData"
-    ref="TrackingTable_ref"
+    ref="trackingTable_ref"
   ></TrackingTable>
 </template>