feat: 重构首页图表跳转功能

.env.development

@@ -1,2 +1,2 @@
-VITE_API_HOST = 'http://192.168.14.224/Customer_Service_Online'
-VITE_BASE_URL = '/k_new_online/'
+VITE_API_HOST = 'http://localhost/api'
+VITE_BASE_URL = '/'

src/components/AutoSelect/src/AutoSelect.vue

@@ -103,7 +103,7 @@ const removeClass = () => {
       :loading="loading"
     >
       <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-        <el-checkbox :checked="item.checked">
+        <el-checkbox :checked="item.checked" style="flex: 1">
           <span class="label" @click="item.checked = !item.checked">{{ item.value }}</span>
         </el-checkbox>
       </el-option>

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

@@ -298,10 +298,6 @@ img.more-filters-guide-class {
   }
 }
 
-.select_icon {
-  margin-right: 8px;
-}
-
 .Filters_title {
   margin: 0 8px;
   margin-left: 7px;
@@ -368,25 +364,6 @@ img.more-filters-guide-class {
   color: var(--color-neutral-2);
 }
 
-.Date_Title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.MoreType {
-  color: var(--color-accent-2);
-  padding: 0 0 16px 16px;
-  cursor: pointer;
-}
-
-.AddType {
-  background-color: var(--addparties-background-color);
-  margin: 0 16px 8px 16px;
-  padding: 8px;
-  border-radius: var(--border-radius-6);
-}
-
 .more_bottom {
   position: sticky;
   bottom: 0;
@@ -410,10 +387,6 @@ img.more-filters-guide-class {
   border-radius: var(--border-radius-6);
 }
 
-.AlertInput :deep(.el-select__wrapper) {
-  box-shadow: 0 0 0 0.5px var(--color-danger);
-}
-
 :deep(.el-drawer__body) {
   padding: 0 !important;
   display: flex;

src/components/MoreFilters/src/components/PartiesView.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useFiltersStore } from '@/stores/modules/filtersList'
-import { cloneDeep } from 'lodash'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
@@ -224,13 +223,6 @@ defineExpose({
   cursor: pointer;
 }
 
-.AddType {
-  background-color: var(--addparties-background-color);
-  margin: 0 16px 8px 16px;
-  padding: 8px;
-  border-radius: var(--border-radius-6);
-}
-
 .moretype {
   background-color: transparent;
   padding: 0 4px;

src/components/MoreFilters/src/components/PlacesView.vue

@@ -191,165 +191,30 @@ defineExpose({
 </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;
 }
 
-.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);
-  }
-}
-
-.select_icon {
-  margin-right: 8px;
-}
-
-.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);
 }
 
-.Date_Title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .MoreType {
   color: var(--color-accent-2);
   padding: 0 0 16px 16px;
   cursor: pointer;
 }
 
-.AddType {
-  background-color: var(--addparties-background-color);
-  margin: 0 16px 8px 16px;
-  padding: 8px;
-  border-radius: var(--border-radius-6);
-}
-
-.more_bottom {
-  display: flex;
-  align-items: center;
-  bottom: 0;
-  height: 64px;
-  border-top: 1px solid var(--color-border-top);
-  width: 400px;
-  padding: 16px;
-}
-
-.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);
-}
-
-.AlertInput :deep(.el-select__wrapper) {
-  box-shadow: 0 0 0 0.5px var(--color-danger);
-}
-
-: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;

src/components/VTag/src/VTag.vue

@@ -27,7 +27,7 @@ const mappingTable = new Map([
   ['Departure', 'departure'],
   ['Arrived', 'arrived'],
   ['Completed', 'completed'],
-  ['Departed', 'Departed'],
+  ['Departed', 'departed'],
   ['Pending Approval', 'pending-approval']
 ])
 defineProps<internalProps>()
@@ -100,7 +100,7 @@ defineProps<internalProps>()
       background-color: var(--color-tag-cargo-received);
     }
   }
-  &.v-tag__departure {
+  &.v-tag__departed {
     background-color: var(--color-tag-departure-bg);
     color: var(--color-tag-departure);
     .dot {

src/components/selectAutoSelect/src/selectAutoSelect.vue

@@ -153,7 +153,7 @@ const createQueryHandler = (title: string, curValue: string[]) => {
           :label="infoItem.label"
           :value="infoItem.label"
         >
-          <el-checkbox :checked="infoItem.checked">
+          <el-checkbox :checked="infoItem.checked" style="flex: 1">
             <span class="label" @click="infoItem.checked = !infoItem.checked">{{
               infoItem.label
             }}</span>

src/stores/modules/filtersList.ts

@@ -8,23 +8,26 @@ interface StateType {
   filtersList: FiltersType[]
 }
 
-type FiltersType =
+export type FiltersType =
   | {
     title: string
     key: string
     keyType: 'normal'
     value: string
+    isHide?: boolean
   }
   | {
     title: string
     key: string
     keyType: 'array'
     value: string[]
+    isHide?: boolean
   } | {
     title: string
     key: string[]
     keyType: 'dateRange'
     value: string[]
+    isHide?: boolean
   }
 
 export const useFiltersStore = defineStore('filtersStore', {
@@ -40,11 +43,29 @@ export const useFiltersStore = defineStore('filtersStore', {
         } else if (cur.keyType === 'array') {
           acc[cur.key] = cur.value
         } else if (cur.keyType === 'dateRange') {
-          acc[cur.key[0]] = dayjs(cur.value[0], formatDate).format(valueFormat)
-          acc[cur.key[1]] = dayjs(cur.value[1], formatDate).format(valueFormat)
+          acc[cur.key[0]] = cur.isHide ? cur.value[0] : dayjs(cur.value[0], formatDate).format(valueFormat)
+          acc[cur.key[1]] = cur.isHide ? cur.value[1] : dayjs(cur.value[1], formatDate).format(valueFormat)
         }
         return acc
       }, {})
+    },
+    getTagsList(state) {
+      return state.filtersList
+        .filter(item => !item.isHide)
+        .map(filter => {
+          let displayValue: string
+          if (filter.keyType === 'dateRange') {
+            displayValue = `${filter.value[0]} To ${filter.value[1]}`
+          } else if (filter.keyType === 'array') {
+            displayValue = filter.value.join(', ')
+          } else {
+            displayValue = String(filter.value) // 防止 value 是 number/null
+          }
+          return {
+            title: filter.title,
+            value: `${filter.title}: ${displayValue}`
+          }
+        })
     }
   },
   actions: {
@@ -76,8 +97,6 @@ export const useFiltersStore = defineStore('filtersStore', {
         this.filtersList.splice(index, 1)
       }
     },
-
-
     updateFilter(filter: FiltersType) {
       const index = this.getFilterIndexByTitle(filter.title)
       if (index !== -1) {

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

@@ -18,27 +18,6 @@ const filtersList = computed(() => filtersStore.filtersList)
 const filterRef: Ref<HTMLElement | null> = ref(null)
 const containerHeight = useCalculatingHeight(document.documentElement, 246, [filterRef])
 
-const filterTagsList = computed(() => {
-  return filtersList.value.map((filter) => {
-    if (filter.keyType === 'dateRange') {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value[0] + ' To ' + filter.value[1]
-      }
-    } else if (filter.keyType === 'array') {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value.join(', ')
-      }
-    } else {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value
-      }
-    }
-  })
-})
-
 const tabList = ref([
   {
     name: 'All',
@@ -263,10 +242,10 @@ const handleSearch = () => {
       >
     </div>
     <!-- 筛选项 -->
-    <div class="filtersTag" v-if="filterTagsList.length" id="booking-filter-tag-guide">
+    <div class="filtersTag" v-if="filtersStore.getTagsList.length" id="booking-filter-tag-guide">
       <el-tag
         class="tag"
-        v-for="tag in filterTagsList"
+        v-for="tag in filtersStore.getTagsList"
         :key="tag.title"
         :closable="!tag.title.includes('Shipment')"
         :disable-transitions="false"

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

@@ -2,30 +2,9 @@
 import { useFiltersStore } from '@/stores/modules/filtersList'
 
 const filtersStore = useFiltersStore()
-const filtersList = computed(() => filtersStore.filtersList)
 
 const dialogVisible = ref(false)
 
-const listData = computed(() => {
-  return filtersList.value.map((filter) => {
-    if (filter.keyType === 'dateRange') {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value[0] + ' To ' + filter.value[1]
-      }
-    } else if (filter.keyType === 'array') {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value.join(', ')
-      }
-    } else {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value
-      }
-    }
-  })
-})
 const openDialog = (selectedColumns: string[], slectedDataNumber: number) => {
   selectedDataNumber.value = slectedDataNumber
   columns.value = selectedColumns
@@ -67,7 +46,7 @@ defineExpose({
           </div>
         </div>
         <div class="data-filter">
-          <div class="filter-item" v-for="item in listData" :key="item.title">
+          <div class="filter-item" v-for="item in filtersStore.getTagsList" :key="item.title">
             <el-tooltip
               class="box-item"
               effect="dark"

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

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { ref, onMounted, reactive } from 'vue'
-import QuickCalendarDate from '@/components/DateRange/src/components/QuickCalendarDate.vue'
 import { VueDraggable } from 'vue-draggable-plus'
 import PieChart from './components/PieChart.vue'
 import SellerChart from './components/SellerChart.vue'
@@ -13,6 +12,13 @@ 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')
@@ -500,269 +506,443 @@ const handleTurnData = (startdate: any, enddata: any, name: any) => {
     }
   }
 }
-const ClickParams = (val: any) => {
-  const currentDate = new Date()
-  let tenyear = currentDate.getFullYear()
-  let tenmonth = currentDate.getMonth() - 11
-  if (tenmonth < 0) {
-    tenyear -= 1
-    tenmonth += 11
+
+// 1. 定义配置映射表
+interface ClickConfig {
+  reportType: string
+  reportRefGetter: () => string
+  extraFilters?: Array<FiltersType>
+  useContainerFormat?: boolean // 是否使用 Container 格式（MM/YYYY → DD=01）
+  dateSource?: {
+    type: string
+    start: string
+    end: string
   }
-  const reportList: any = {}
-  const handlereportlist = (transportation: any, type: any, name: any) => {
-    if (transportation.includes('All')) {
-      reportList.transport_mode = ['All']
-    } else {
-      reportList.transport_mode = transportation
-    }
-    if (name == 'Container') {
-      if (type == 'ETA') {
-        if (startyear.value) {
-          reportList.eta_start = startmonth.value + '/01/' + startyear.value
-          reportList.eta_end =
-            endmonth.value +
-            '/' +
-            new Date(endyear.value, endmonth.value, 0).getDate() +
-            '/' +
-            endyear.value
-        }
-      } else {
-        if (startyear.value) {
-          reportList.etd_start = startmonth.value + '/01/' + startyear.value
-          reportList.etd_end =
-            endmonth.value +
-            '/' +
-            new Date(endyear.value, endmonth.value, 0).getDate() +
-            '/' +
-            endyear.value
-        }
+  originCityKey?: string
+  destinationCityKey?: string
+}
+
+const CLICK_CONFIG_MAP: Record<string, ClickConfig> = {
+  KPI0: {
+    reportType: 'atd_r4',
+    reportRefGetter: () => pie_chart_kpi_departure.value[0]?.paramsdata?.name || '',
+    dateSource: dashboardObj.KPIDefaulteData
+  },
+  KPI1: {
+    reportType: 'ata_r3',
+    reportRefGetter: () => pie_chart_kpi_arrival.value[0]?.paramsdata?.name || '',
+    dateSource: dashboardObj.KPIDefaulteData
+  },
+  Pending0: {
+    reportType: 'r4',
+    reportRefGetter: () => pie_chart_pending_departure.value[0]?.paramsdata?.name || ''
+  },
+  Pending1: {
+    reportType: 'r3',
+    reportRefGetter: () => pie_chart_pending_arrival.value[0]?.paramsdata?.name || ''
+  },
+  'ETD to ETA (Days)': {
+    reportType: 'r1',
+    reportRefGetter: () => pie_chart_ETD.value[0]?.paramsdata?.name || '',
+    useContainerFormat: true,
+    dateSource: dashboardObj.ETDDefaultData,
+    extraFilters: [
+      {
+        title: '_reportRefe_date',
+        key: ['_reportRefe_date', '_reportRefb_date'],
+        value: [dayjs().startOf('year').format('MM/YYYY'), dayjs().endOf('year').format('MM/YYYY')],
+        keyType: 'dateRange',
+        isHide: true
       }
-    } else {
-      if (type == 'ETA') {
-        if (startyear.value) {
-          reportList.eta_start = startmonth.value + '/' + startday.value + '/' + startyear.value
-          reportList.eta_end = endmonth.value + '/' + endday.value + '/' + endyear.value
-        }
-      } else {
-        if (startyear.value) {
-          reportList.etd_start = startmonth.value + '/' + startday.value + '/' + startyear.value
-          reportList.etd_end = endmonth.value + '/' + endday.value + '/' + endyear.value
-        }
+    ]
+  },
+  'Top 10 Origin': {
+    reportType: 'top',
+    reportRefGetter: () => seller_chart_top10_origin.value[0]?.paramsdata || '',
+    dateSource: dashboardObj.Top10faultData,
+    originCityKey: 'shipper_city',
+    extraFilters: [
+      {
+        title: '_reportStationType',
+        key: '_reportStationType',
+        value: toporiginType.value,
+        keyType: 'normal',
+        isHide: true
       }
-    }
+    ]
+  },
+  'Top 10 Destination': {
+    reportType: 'top',
+    reportRefGetter: () => seller_chart_top10_destination.value[0]?.paramsdata || '',
+    dateSource: dashboardObj.Top10faultData,
+    destinationCityKey: 'consignee_city',
+    extraFilters: [
+      {
+        title: '_reportStationType',
+        key: '_reportStationType',
+        value: topdestinationinType.value,
+        keyType: 'normal',
+        isHide: true
+      }
+    ]
+  },
+  'CO2e Emission by Origin (Top 10)': {
+    reportType: 'co2e',
+    reportRefGetter: () => seller_chart_CO2_origin.value?.[0]?.paramsdata?.name || '',
+    dateSource: dashboardObj.OriginCo2Top10faultData,
+    extraFilters: [
+      {
+        title: '_reportDataType',
+        key: '_reportDataType',
+        value: seller_chart_CO2_origin.value?.[0]?.paramsdata?.type || '',
+        keyType: 'normal',
+        isHide: true
+      },
+      {
+        title: '_reportStationType',
+        key: '_reportStationType',
+        value: 'origin',
+        keyType: 'normal',
+        isHide: true
+      }
+    ]
+  },
+  'CO2e Emission by Destination (Top 10)': {
+    reportType: 'co2e',
+    reportRefGetter: () => seller_chart_CO2_destination.value[0]?.paramsdata?.name || '',
+    dateSource: dashboardObj.DestinationCo2Top10faultData,
+    extraFilters: [
+      {
+        title: '_reportDataType',
+        key: '_reportDataType',
+        value: seller_chart_CO2_destination.value?.[0]?.paramsdata?.type || '',
+        keyType: 'normal',
+        isHide: true
+      },
+      {
+        title: '_reportStationType',
+        key: '_reportStationType',
+        value: 'agent',
+        keyType: 'normal',
+        isHide: true
+      }
+    ]
   }
-  // ETD to ETA(DAYS)点击跳转
-  if (val == 'ETD to ETA (Days)') {
-    handleTurnData(
-      dashboardObj.ETDDefaultData.date_start,
-      dashboardObj.ETDDefaultData.date_end,
-      'Container'
-    )
-    reportList._reportRef = pie_chart_ETD.value[0].paramsdata.name
-    reportList._reportRefe_date = currentDate.getMonth() + 1 + '/' + currentDate.getFullYear()
-    reportList._reportType = 'r1'
-    reportList._reportRefb_date = tenmonth + '/' + tenyear
-    handlereportlist(
-      dashboardObj.ETDDefaultData.transportation,
-      dashboardObj.ETDDefaultData.date_type,
-      'Container'
-    )
-    sessionStorage.setItem('clickParams', 'clickParams')
-    sessionStorage.setItem('reportList', JSON.stringify(reportList))
-    let obj: any = {}
-    obj.title = 'ETD to ETA (Days)'
-    obj.name = pie_chart_ETD.value[0].paramsdata.name
-    sessionStorage.setItem('tagsList', JSON.stringify(obj))
-    router.push({
-      path: '/tracking'
-    })
+}
+
+// === 2. 提取 setEstimatedTime 为独立函数（可复用）===
+const setEstimatedTime = (
+  type: 'ETD' | 'ETA',
+  value: string[],
+  formatType: 'Container' | 'Revenue' = 'Revenue'
+) => {
+  const parseFormat = formatType === 'Container' ? 'MM/YYYY' : 'MM/DD/YYYY'
+  const transformDate = (dateStr: string): string => {
+    let parsed = dayjs(dateStr, parseFormat, true)
+    if (formatType === 'Container') parsed = parsed.date(1)
+    return parsed.format('MM/DD/YYYY') // 或你实际需要的 formatDate
   }
-  //  PendingArrival点击跳转
-  else if (val == 'Pending1') {
-    handleTurnData('', '', '') // 因为Pending没有时间筛选，所以传空
-    reportList._reportRef = pie_chart_pending_arrival.value[0].paramsdata.name
-    reportList._reportType = 'r3'
-    handlereportlist(
-      dashboardObj.PendingDefaultData.transportation,
-      dashboardObj.PendingDefaultData.date_type,
-      ''
-    )
-    sessionStorage.setItem('clickParams', 'clickParams')
-    sessionStorage.setItem('reportList', JSON.stringify(reportList))
-    let obj: any = {}
-    obj.title = 'Pending Arrival'
-    obj.name = pie_chart_pending_arrival.value[0].paramsdata.name
-    sessionStorage.setItem('tagsList', JSON.stringify(obj))
-    router.push({
-      path: '/tracking'
+
+  const config =
+    type === 'ETD'
+      ? { title: 'ETD', key: ['etd_start', 'etd_end'] }
+      : { title: 'ETA', key: ['eta_start', 'eta_end'] }
+
+  filtersStore.updateFilter({
+    ...config,
+    value: [transformDate(value[0]), transformDate(value[1])],
+    keyType: 'dateRange'
+  })
+}
+
+const ClickParams = (val: any) => {
+  console.log(dashboardObj, 'value', val)
+
+  const setEstimatedTime = (
+    type: 'ETD' | 'ETA',
+    value: string[],
+    formatType?: 'Container' | 'Revenue'
+  ) => {
+    const parseFormat = formatType === 'Container' ? 'MM/YYYY' : 'MM/DD/YYYY'
+
+    // 处理单个日期字符串的转换函数
+    const transformDate = (dateStr: string): string => {
+      let parsed = dayjs(dateStr, parseFormat, true) // 使用 strict 模式更安全
+
+      // 如果是 Container 格式（MM/YYYY），强制日期为 1 号
+      if (formatType === 'Container') {
+        parsed = parsed.date(1) // 设置为当月 1 日
+      }
+
+      return parsed.format(formatDate)
+    }
+    const config =
+      type === 'ETD'
+        ? {
+            title: 'ETD',
+            key: ['etd_start', 'etd_end']
+          }
+        : {
+            title: 'ETA',
+            key: ['eta_start', 'eta_end']
+          }
+    filtersStore.updateFilter({
+      ...config,
+      value: [transformDate(value[0]), transformDate(value[1])],
+      keyType: 'dateRange'
     })
   }
-  // PendingDeparture点击跳转
-  else if (val == 'Pending0') {
-    handleTurnData('', '', '') // 因为Pending没有时间筛选，所以传空
-    reportList._reportType = 'r4'
-    reportList._reportRef = pie_chart_pending_departure.value[0].paramsdata.name
-    handlereportlist(
-      dashboardObj.PendingDefaultData.transportation,
-      dashboardObj.PendingDefaultData.date_type,
-      ''
-    )
-    sessionStorage.setItem('clickParams', 'clickParams')
-    sessionStorage.setItem('reportList', JSON.stringify(reportList))
-    let obj: any = {}
-    obj.title = 'Pending Departure'
-    obj.name = pie_chart_pending_departure.value[0].paramsdata.name
-    sessionStorage.setItem('tagsList', JSON.stringify(obj))
-    router.push({
-      path: '/tracking'
+
+  const setTransportMode = (value: any) => {
+    filtersStore.updateFilter({
+      title: 'Transport Mode',
+      key: 'transport_mode',
+      value: value,
+      keyType: 'array'
     })
   }
-  // KPIDeparture点击跳转
-  else if (val == 'KPI0') {
-    handleTurnData(
+
+  // KPI Departure点击跳转
+  if (val === 'KPI0') {
+    setEstimatedTime(dashboardObj.KPIDefaulteData.date_type, [
       dashboardObj.KPIDefaulteData.date_start,
-      dashboardObj.KPIDefaulteData.date_end,
-      ''
-    )
-    reportList._reportRef = pie_chart_kpi_departure.value[0].paramsdata.name
-    reportList._reportType = 'atd_r4'
-    handlereportlist(
-      dashboardObj.KPIDefaulteData.transportation,
-      dashboardObj.KPIDefaulteData.date_type,
-      ''
-    )
-    sessionStorage.setItem('clickParams', 'clickParams')
-    sessionStorage.setItem('reportList', JSON.stringify(reportList))
-    let obj: any = {}
-    obj.title = 'KPI Departure'
-    obj.name = pie_chart_kpi_departure.value[0].paramsdata.name
-    sessionStorage.setItem('tagsList', JSON.stringify(obj))
-    router.push({
-      path: '/tracking'
+      dashboardObj.KPIDefaulteData.date_end
+    ])
+    setTransportMode(dashboardObj.KPIDefaulteData.transport_mode)
+    // KPI Departure点击跳转
+    filtersStore.updateFilter({
+      title: 'KPI Departure',
+      key: '_reportRef',
+      value: pie_chart_kpi_departure.value[0].paramsdata.name,
+      keyType: 'normal'
     })
-  }
-  // KPIArrival点击跳转
-  else if (val == 'KPI1') {
-    handleTurnData(
+    filtersStore.updateFilter({
+      title: '_reportType',
+      key: '_reportType',
+      value: 'atd_r4',
+      keyType: 'normal',
+      isHide: true
+    })
+  } else if (val === 'KPI1') {
+    setEstimatedTime(dashboardObj.KPIDefaulteData.date_type, [
       dashboardObj.KPIDefaulteData.date_start,
-      dashboardObj.KPIDefaulteData.date_end,
-      ''
-    )
-    reportList._reportRef = pie_chart_kpi_arrival.value[0]?.paramsdata?.name || ''
-    reportList._reportType = 'ata_r3'
-    handlereportlist(
-      dashboardObj.KPIDefaulteData.transportation,
-      dashboardObj.KPIDefaulteData.date_type,
-      ''
-    )
-    sessionStorage.setItem('clickParams', 'clickParams')
-    sessionStorage.setItem('reportList', JSON.stringify(reportList))
-    let obj: any = {}
-    obj.title = 'KPI Arrival'
-    obj.name = pie_chart_kpi_arrival.value[0]?.paramsdata?.name || ''
-    sessionStorage.setItem('tagsList', JSON.stringify(obj))
-    router.push({
-      path: '/tracking'
+      dashboardObj.KPIDefaulteData.date_end
+    ])
+    setTransportMode(dashboardObj.KPIDefaulteData.transport_mode)
+    // KPI Arrival点击跳转
+    filtersStore.updateFilter({
+      title: 'KPI Arrival',
+      key: '_reportRef',
+      value: pie_chart_kpi_arrival.value[0]?.paramsdata?.name || '',
+      keyType: 'normal'
     })
-  }
-  // Top10 origin点击跳转
-  else if (val == 'Top 10 Origin') {
-    handleTurnData(dashboardObj.Top10faultData.date_start, dashboardObj.Top10faultData.date_end, '')
-    reportList._reportRef = seller_chart_top10_origin.value[0].paramsdata
-    reportList._reportType = 'top'
-    reportList._reportStationType = toporiginType.value
-    reportList._city_name = seller_chart_top10_origin.value[0].paramscityname
-    handlereportlist(
-      dashboardObj.Top10faultData.transportation,
-      dashboardObj.Top10faultData.date_type,
-      ''
-    )
-    sessionStorage.setItem('clickParams', 'clickParams')
-    sessionStorage.setItem('reportList', JSON.stringify(reportList))
-    let obj: any = {}
-    obj.title = 'Top 10 Origin'
-    obj.name = seller_chart_top10_origin.value[0].paramsdata
-    obj.data = seller_chart_top10_origin.value[0].paramscityname
-    sessionStorage.setItem('tagsList', JSON.stringify(obj))
-    router.push({
-      path: '/tracking'
+    filtersStore.updateFilter({
+      title: '_reportType',
+      key: '_reportType',
+      value: 'ata_r3',
+      keyType: 'normal',
+      isHide: true
     })
-  }
-  // Top10 destination点击跳转
-  else if (val == 'Top 10 Destination') {
-    handleTurnData(dashboardObj.Top10faultData.date_start, dashboardObj.Top10faultData.date_end, '')
-    reportList._reportRef = seller_chart_top10_destination.value[0].paramsdata
-    reportList._reportStationType = topdestinationinType.value
-    reportList._reportType = 'top'
-    reportList._city_name = seller_chart_top10_destination.value[0].paramscityname
-    handlereportlist(
-      dashboardObj.Top10faultData.transportation,
-      dashboardObj.Top10faultData.date_type,
-      ''
+  } else if (val === 'Pending0') {
+    setTransportMode(dashboardObj.PendingDefaultData.transport_mode)
+    // PendingDeparture点击跳转
+    filtersStore.updateFilter({
+      title: 'Pending Departure',
+      key: '_reportRef',
+      value: pie_chart_pending_departure.value[0].paramsdata.name,
+      keyType: 'normal'
+    })
+    filtersStore.updateFilter({
+      title: '_reportType',
+      key: '_reportType',
+      value: 'r4',
+      keyType: 'normal',
+      isHide: true
+    })
+  } else if (val === 'Pending1') {
+    setTransportMode(dashboardObj.PendingDefaultData.transport_mode)
+    //  PendingArrival点击跳转
+    filtersStore.updateFilter({
+      title: 'Pending Arrival',
+      key: '_reportRef',
+      value: pie_chart_pending_arrival.value[0].paramsdata.name,
+      keyType: 'normal'
+    })
+    filtersStore.updateFilter({
+      title: '_reportType',
+      key: '_reportType',
+      value: 'r3',
+      keyType: 'normal',
+      isHide: true
+    })
+  } else if (val === 'ETD to ETA (Days)') {
+    // ETD to ETA(DAYS)点击跳转
+    setEstimatedTime(
+      dashboardObj.ETDDefaultData.date_type,
+      [dashboardObj.ETDDefaultData.date_start, dashboardObj.ETDDefaultData.date_end],
+      'Container'
     )
-    sessionStorage.setItem('clickParams', 'clickParams')
-    sessionStorage.setItem('reportList', JSON.stringify(reportList))
-    let obj: any = {}
-    obj.title = 'Top 10 Destination'
-    obj.name = seller_chart_top10_destination.value[0].paramsdata
-    obj.data = seller_chart_top10_destination.value[0].paramscityname
-    sessionStorage.setItem('tagsList', JSON.stringify(obj))
-    router.push({
-      path: '/tracking'
+    setTransportMode(dashboardObj.ETDDefaultData.transportation)
+    filtersStore.updateFilter({
+      title: 'ETD to ETA (Days)',
+      key: '_reportRef',
+      value: pie_chart_ETD.value[0].paramsdata.name,
+      keyType: 'normal'
     })
-  }
-  // CO2e Emission by Origin (Top 10)点击跳转
-  else if (val == 'CO2e Emission by Origin (Top 10)') {
-    handleTurnData(
+    filtersStore.updateFilter({
+      title: '_reportType',
+      key: '_reportType',
+      value: 'r1',
+      keyType: 'normal',
+      isHide: true
+    })
+    filtersStore.updateFilter({
+      title: '_reportRefe_date',
+      key: ['_reportRefe_date', '_reportRefb_date'],
+      value: [dayjs().startOf('year').format('MM/YYYY'), dayjs().endOf('year').format('MM/YYYY')],
+      keyType: 'dateRange',
+      isHide: true
+    })
+  } else if (val === 'Top 10 Origin') {
+    // Top10 origin点击跳转
+    setEstimatedTime(dashboardObj.Top10faultData.date_type, [
+      dashboardObj.Top10faultData.date_start,
+      dashboardObj.Top10faultData.date_end
+    ])
+    setTransportMode(dashboardObj.Top10faultData.transport_mode)
+    filtersStore.updateFilter({
+      title: 'Top 10 Origin',
+      key: '_reportRef',
+      value: seller_chart_top10_origin.value[0].paramsdata,
+      keyType: 'normal'
+    })
+    filtersStore.updateFilter({
+      title: '_reportType',
+      key: '_reportType',
+      value: 'top',
+      keyType: 'normal',
+      isHide: true
+    })
+    filtersStore.updateFilter({
+      title: '_reportStationType',
+      key: '_reportStationType',
+      value: toporiginType.value,
+      keyType: 'normal',
+      isHide: true
+    })
+    filtersStore.updateFilter({
+      title: 'Origin',
+      key: 'shipper_city',
+      value: [seller_chart_top10_origin.value[0].paramscityname],
+      keyType: 'array'
+    })
+  } else if (val === 'Top 10 Destination') {
+    setEstimatedTime(dashboardObj.Top10faultData.date_type, [
+      dashboardObj.Top10faultData.date_start,
+      dashboardObj.Top10faultData.date_end
+    ])
+    setTransportMode(dashboardObj.Top10faultData.transport_mode)
+    // Top10 destination点击跳转
+    filtersStore.updateFilter({
+      title: 'Top 10 Destination',
+      key: '_reportRef',
+      value: seller_chart_top10_destination.value[0].paramsdata,
+      keyType: 'normal'
+    })
+    filtersStore.updateFilter({
+      title: '_reportType',
+      key: '_reportType',
+      value: 'top',
+      keyType: 'normal',
+      isHide: true
+    })
+    filtersStore.updateFilter({
+      title: '_reportStationType',
+      key: '_reportStationType',
+      value: topdestinationinType.value,
+      keyType: 'normal',
+      isHide: true
+    })
+    filtersStore.updateFilter({
+      title: 'Destination',
+      key: 'consignee_city',
+      value: [seller_chart_top10_destination.value[0].paramscityname],
+      keyType: 'array',
+      isHide: true
+    })
+  } else if (val === 'CO2e Emission by Origin (Top 10)') {
+    // CO2e Emission by Origin (Top 10)点击跳转
+    setEstimatedTime(dashboardObj.OriginCo2Top10faultData.date_type, [
       dashboardObj.OriginCo2Top10faultData.date_start,
-      dashboardObj.OriginCo2Top10faultData.date_end,
-      ''
-    )
-    reportList._reportRef = seller_chart_CO2_origin.value[0].paramsdata.name
-    reportList._reportDataType = seller_chart_CO2_origin.value[0].paramsdata.type
-    reportList._reportStationType = 'origin'
-    reportList._reportType = 'co2e'
-    handlereportlist(
-      dashboardObj.OriginCo2Top10faultData.transportation,
-      dashboardObj.OriginCo2Top10faultData.date_type,
-      ''
-    )
-    sessionStorage.setItem('clickParams', 'clickParams')
-    sessionStorage.setItem('reportList', JSON.stringify(reportList))
-    let obj: any = {}
-    obj.title = 'CO2e Emission by Origin (Top 10)'
-    obj.name = seller_chart_CO2_origin.value[0].paramsdata.name
-    sessionStorage.setItem('tagsList', JSON.stringify(obj))
-    router.push({
-      path: '/tracking'
+      dashboardObj.OriginCo2Top10faultData.date_end
+    ])
+    setTransportMode(dashboardObj.OriginCo2Top10faultData.transport_mode)
+    filtersStore.updateFilter({
+      title: 'CO2e Emission by Origin (Top 10)',
+      key: '_reportRef',
+      value: seller_chart_CO2_origin.value[0].paramsdata.name,
+      keyType: 'normal'
     })
-  }
-  // CO2e Emission by Origin (Top 10)点击跳转
-  else if (val == 'CO2e Emission by Destination (Top 10)') {
-    handleTurnData(
+    filtersStore.updateFilter({
+      title: '_reportDataType',
+      key: '_reportDataType',
+      value: seller_chart_CO2_origin.value[0].paramsdata.type,
+      keyType: 'normal',
+      isHide: true
+    })
+    filtersStore.updateFilter({
+      title: '_reportStationType',
+      key: '_reportStationType',
+      value: 'origin',
+      keyType: 'normal',
+      isHide: true
+    })
+    filtersStore.updateFilter({
+      title: '_reportType',
+      key: '_reportType',
+      value: 'co2e',
+      keyType: 'normal',
+      isHide: true
+    })
+  } else if (val === 'CO2e Emission by Destination (Top 10)') {
+    // CO2e Emission by Origin (Top 10)点击跳转
+    setEstimatedTime(dashboardObj.DestinationCo2Top10faultData.date_type, [
       dashboardObj.DestinationCo2Top10faultData.date_start,
-      dashboardObj.DestinationCo2Top10faultData.date_end,
-      ''
-    )
-    reportList._reportRef = seller_chart_CO2_destination.value[0].paramsdata.name
-    reportList._reportDataType = seller_chart_CO2_destination.value[0].paramsdata.type
-    reportList._reportType = 'co2e'
-    reportList._reportStationType = 'agent'
-    handlereportlist(
-      dashboardObj.DestinationCo2Top10faultData.transportation,
-      dashboardObj.DestinationCo2Top10faultData.date_type,
-      ''
-    )
-    sessionStorage.setItem('clickParams', 'clickParams')
-    sessionStorage.setItem('reportList', JSON.stringify(reportList))
-    let obj: any = {}
-    obj.title = 'CO2e Emission by Destination (Top 10)'
-    obj.name = seller_chart_CO2_destination.value[0].paramsdata.name
-    sessionStorage.setItem('tagsList', JSON.stringify(obj))
-    router.push({
-      path: '/tracking'
+      dashboardObj.DestinationCo2Top10faultData.date_end
+    ])
+    setTransportMode(dashboardObj.DestinationCo2Top10faultData.transport_mode)
+    filtersStore.updateFilter({
+      title: 'CO2e Emission by Destination (Top 10)',
+      key: '_reportRef',
+      value: seller_chart_CO2_destination.value[0].paramsdata.name,
+      keyType: 'normal'
+    })
+    filtersStore.updateFilter({
+      title: '_reportDataType',
+      key: '_reportDataType',
+      value: seller_chart_CO2_destination.value[0].paramsdata.type,
+      keyType: 'normal',
+      isHide: true
+    })
+    filtersStore.updateFilter({
+      title: '_reportType',
+      key: '_reportType',
+      value: 'co2e',
+      keyType: 'normal',
+      isHide: true
+    })
+    filtersStore.updateFilter({
+      title: '_reportStationType',
+      key: '_reportStationType',
+      value: 'agent',
+      keyType: 'normal',
+      isHide: true
     })
   }
+
+  router.push({
+    path: '/tracking'
+  })
 }
 
 import { useGuideStore } from '@/stores/modules/guide'
@@ -792,6 +972,7 @@ 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'
+import { set } from 'lodash'
 
 // ====== 2. 主题 store ======
 const themeStore = useThemeStore()
@@ -851,26 +1032,30 @@ const handleGuide = () => {
 
           <div class="Management">
             <div class="title">View Management</div>
-            <div class="management_content" v-for="(item, index) in Management" :key="index">
-              <div class="management_flex">
-                <div class="content_title">{{ item.title }}</div>
-                <div>
-                  <el-switch
-                    v-model="item.switchValue"
-                    :disabled="item.isRevenueDisplay != undefined && item.isRevenueDisplay == false"
-                  />
+            <div 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 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>
-            <el-divider />
+            <el-divider style="margin-top: 0" />
             <div class="tips">
               <span class="iconfont_icon">
                 <svg class="iconfont iconfont_tips" aria-hidden="true">
@@ -901,6 +1086,10 @@ const handleGuide = () => {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
+            padding: '8px 4px',
+            borderRadius: '12px',
+            width: '142px',
+            minWidth: '140px',
             backgroundColor: 'var(--management-bg-color)'
           }"
         >
@@ -1436,12 +1625,14 @@ const handleGuide = () => {
 
 .Management {
   max-height: 640px;
-  overflow-y: hidden;
+  overflow: hidden;
   border-radius: 12px;
   background-color: var(--management-bg-color);
 }
-.Management:hover {
-  overflow-y: scroll;
+
+.management-content {
+  overflow-y: auto;
+  max-height: 533px;
 }
 .title {
   font-weight: 700;
@@ -1452,7 +1643,7 @@ const handleGuide = () => {
   align-items: center;
   padding-left: 16px;
 }
-.management_content {
+.management-item {
   width: 368px;
   min-height: 54px;
   margin: 10px auto;
@@ -1504,7 +1695,7 @@ const handleGuide = () => {
   height: 40px;
   font-size: var(--font-size-3);
   width: 126px;
-  margin: 4px 0;
+  border-radius: 6px;
   cursor: pointer;
 }
 .iconfont_icon_save {

src/views/Dashboard/src/DashboardView.vue

@@ -740,7 +740,7 @@ const ClickParams = (val: any) => {
       path: '/tracking'
     })
   }
-  // CO2e Emission by Origin (Top 10)点击跳转
+  // CO2e Emission by Destination (Top 10)点击跳转
   else if (val == 'CO2e Emission by Destination (Top 10)') {
     handleTurnData(
       dashboardObj.DestinationCo2Top10faultData.date_start,

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

@@ -43,27 +43,6 @@ watch(
   }
 )
 
-const filterTagsList = computed(() => {
-  return filtersList.value.map((filter) => {
-    if (filter.keyType === 'dateRange') {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value[0] + ' To ' + filter.value[1]
-      }
-    } else if (filter.keyType === 'array') {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value.join(', ')
-      }
-    } else {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value
-      }
-    }
-  })
-})
-
 const textSearch = ref()
 const tableLoadingTableData = ref(false)
 
@@ -221,7 +200,6 @@ const SearchInput = () => {
 import TrackingGuide from './components/TrackingGuide.vue'
 import { useGuideStore } from '@/stores/modules/guide'
 import { onBeforeRouteLeave } from 'vue-router'
-import { get } from 'lodash'
 
 const guideStore = useGuideStore()
 const trackingGuideRef = ref()
@@ -317,11 +295,11 @@ onBeforeRouteLeave((route: any) => {
       >
     </div>
     <!-- 筛选项 -->
-    <div class="filtersTag" v-if="filterTagsList.length" id="filter-tag-guide">
+    <div class="filtersTag" v-if="filtersStore.getTagsList.length" id="filter-tag-guide">
       <el-tag
         :key="tag.title"
         class="tag"
-        v-for="tag in filterTagsList"
+        v-for="tag in filtersStore.getTagsList"
         :closable="!tag.title.includes('Shipment')"
         :disable-transitions="false"
         @close="handleClose(tag.title)"

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

@@ -2,30 +2,9 @@
 import { useFiltersStore } from '@/stores/modules/filtersList'
 
 const filtersStore = useFiltersStore()
-const filtersList = computed(() => filtersStore.filtersList)
 
 const dialogVisible = ref(false)
 
-const listData = computed(() => {
-  return filtersList.value.map((filter) => {
-    if (filter.keyType === 'dateRange') {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value[0] + ' To ' + filter.value[1]
-      }
-    } else if (filter.keyType === 'array') {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value.join(', ')
-      }
-    } else {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value
-      }
-    }
-  })
-})
 const openDialog = (selectedColumns: string[], slectedDataNumber: number) => {
   selectedDataNumber.value = slectedDataNumber
   columns.value = selectedColumns
@@ -66,7 +45,7 @@ defineExpose({
           </div>
         </div>
         <div class="data-filter">
-          <div class="filter-item" v-for="item in listData" :key="item.title">
+          <div class="filter-item" v-for="item in filtersStore.getTagsList" :key="item.title">
             <el-tooltip
               class="box-item"
               effect="dark"

vite.config.ts

@@ -52,13 +52,13 @@ export default defineConfig(({ mode }) => {
       })
     ],
     server: {
-      port: 8080,
+      port: 80,
       hmr: true,
       open: true,
       // 设置 https 代理
       proxy: {
         '/api': {
-          target: 'http://192.168.14.224',
+          target: 'https://online-beta.kln.com/online_backend',
           changeOrigin: true,
           rewrite: (path: string) => path.replace(/^\/api/, '')
         }