feat: 重构首页筛选功能

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

@@ -50,59 +50,48 @@ const handleTabClick = (tab: any) => {
   } else {
     isShowtitle1.value = false
   }
-  GetTop10ODEcharts(dashboardObj.Top10faultData)
+  GetTop10ODEcharts(top10DefaultData.value)
 }
-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 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) {
       //给默认筛选条件赋值
-      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
+      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(() => {
-        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)
+        GetKpiData(kpiDefaultData.value)
+        GetPendingEcharts(pendingDefaultData.value)
+        getTableData(recentDefaultData.value, false)
+        GetETDEcharts(etdDefaultData.value)
+        GetContainerCountEcharts(containerDefaultData.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({
@@ -125,17 +114,16 @@ const KPIobj = reactive({
   ETD_Radius: [],
   download_name: ''
 })
-const Arrivalobj = reactive({
+const arrivalObj = reactive({
   ETD_Title: '',
   ETDList: [],
   ETD_Radius: [],
   download_name: ''
 })
-const KPILoading = ref(true)
+const kpiLoading = ref(true)
 const KPIArrivalLoading = ref(true)
 //查询KPI
 const GetKpiData = (val: any) => {
-  dashboardObj.KPIDefaulteData = val
   // 获取KPI Departure图表数据
   $api
     .GetKPIEcharts({
@@ -151,7 +139,7 @@ const GetKpiData = (val: any) => {
       }
     })
     .finally(() => {
-      KPILoading.value = false
+      kpiLoading.value = false
     })
   // 获取KPI Arrival图表数据
   $api
@@ -161,33 +149,32 @@ const GetKpiData = (val: any) => {
     })
     .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
+        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({
+const pendingObj = reactive({
   ETD_Title: '',
   ETDList: [],
   ETD_Radius: [],
   download_name: ''
 })
-const PendingArrivalobj = reactive({
+const pendingArrivalObj = reactive({
   ETD_Title: '',
   ETDList: [],
   ETD_Radius: [],
   download_name: ''
 })
-const PendingLoading = ref(true)
-const PendingArrivalLoading = ref(true)
+const pendingLoading = ref(true)
+const pendingArrivalLoading = ref(true)
 // 查询Pending
 const GetPendingEcharts = (val: any) => {
-  dashboardObj.PendingDefaultData = val
   // 获取Pending Departure图表数据
   $api
     .GetPendingEcharts({
@@ -196,14 +183,14 @@ const GetPendingEcharts = (val: any) => {
     })
     .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
+        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
+      pendingLoading.value = false
     })
   // 获取Pending Arrival图表数据
   $api
@@ -213,40 +200,39 @@ const GetPendingEcharts = (val: any) => {
     })
     .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
+        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
+      pendingArrivalLoading.value = false
     })
 }
-const ETDobj = reactive({
+const etdObj = reactive({
   ETD_Title: '',
   ETDList: [],
   ETD_Radius: [],
   download_name: ''
 })
-const ETDLoading = ref(true)
+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
+        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
+      etdLoading.value = false
     })
 }
 // 获取ContainerCount
@@ -260,7 +246,6 @@ const containerObj = reactive({
 })
 const containerLoading = ref(true)
 const GetContainerCountEcharts = (val: any) => {
-  dashboardObj.ContainerefaultData = val
   $api
     .GetContainerCountEcharts({
       ...val
@@ -286,48 +271,46 @@ const Top10Obj = reactive({
   OriginData: [],
   DestinationData: []
 })
-const Top1OInterval = reactive({
+const top1OInterval = reactive({
   Max: 0,
   interval: 0
 })
-const Top1OInterval_dest = reactive({
+const top1OInterval_dest = reactive({
   Max: 0,
   interval: 0
 })
-const TopOriginLoading = ref(true)
-const Top10Originref = ref()
-const Top10Destinationref = ref()
+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)
+          top10Originref.value[0].updataMapObj(res.data.toporiginMap)
         } else {
-          Top10Destinationref.value[0].updataMapObj(res.data.topdestinationinMap)
+          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
+        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
+      topOriginLoading.value = false
     })
 }
 //获取CO2 Origin
-const EmissionLoading = ref(true)
-const EmissionObj = reactive({
+const emissionLoading = ref(true)
+const emissionObj = reactive({
   bar_title: '',
   barList: [],
   barSeries: [],
@@ -336,27 +319,26 @@ const EmissionObj = reactive({
   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
+        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
+      emissionLoading.value = false
     })
 }
 //获取CO2 Destination
-const DestinationObj = reactive({
+const destinationObj = reactive({
   bar_title: '',
   barList: [],
   barSeries: [],
@@ -366,19 +348,18 @@ const DestinationObj = reactive({
 })
 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
+        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(() => {
@@ -387,7 +368,7 @@ const GetCo2DestinationEcharts = (val: any) => {
 }
 //获取Revenue Spent
 
-const RevenueObj = reactive({
+const revenueObj = reactive({
   bar_title: '',
   barList: [],
   barSeries: [],
@@ -396,29 +377,28 @@ const RevenueObj = reactive({
   download_name: '',
   isShowTooltips: true
 })
-const RevenueLoading = ref(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
+        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
+      revenueLoading.value = false
     })
 }
 onMounted(() => {
@@ -451,6 +431,17 @@ const SaveFilters = () => {
   Management.value.forEach((item: any, index: any) => {
     item.id = index + 1
   })
+  const dashboardObj = {
+    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,
@@ -498,44 +489,44 @@ const CLICK_CONFIG_MAP: Record<string, (val: string) => ClickConfig> = {
     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
+      type: kpiDefaultData.value.date_type,
+      start: kpiDefaultData.value.date_start,
+      end: kpiDefaultData.value.date_end
     },
-    transportMode: dashboardObj.KPIDefaulteData.transportation
+    transportMode: kpiDefaultData.value.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
+      type: kpiDefaultData.value.date_type,
+      start: kpiDefaultData.value.date_start,
+      end: kpiDefaultData.value.date_end
     },
-    transportMode: dashboardObj.KPIDefaulteData.transportation
+    transportMode: kpiDefaultData.value.transportation
   }),
   'Pending Departure': () => ({
     reportType: 'r4',
 
     reportRefGetter: () => pie_chart_pending_departure.value[0]?.paramsdata?.name || '',
-    transportMode: dashboardObj.PendingDefaultData.transportation
+    transportMode: pendingDefaultData.value.transportation
   }),
   'Pending Arrival': () => ({
     reportType: 'r3',
     reportRefGetter: () => pie_chart_pending_arrival.value[0]?.paramsdata?.name || '',
-    transportMode: dashboardObj.PendingDefaultData.transportation
+    transportMode: pendingDefaultData.value.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,
+      type: etdDefaultData.value.date_type,
+      start: etdDefaultData.value.date_start,
+      end: etdDefaultData.value.date_end,
       formatType: 'Container'
     },
-    transportMode: dashboardObj.ETDDefaultData.transportation,
+    transportMode: etdDefaultData.value.transportation,
     extraFilters: {
       _reportRefe_date: {
         value: [dayjs().startOf('year').format('MM/YYYY'), dayjs().endOf('year').format('MM/YYYY')],
@@ -547,11 +538,11 @@ const CLICK_CONFIG_MAP: Record<string, (val: string) => ClickConfig> = {
     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
+      type: top10DefaultData.value.date_type,
+      start: top10DefaultData.value.date_start,
+      end: top10DefaultData.value.date_end
     },
-    transportMode: dashboardObj.Top10faultData.transportation,
+    transportMode: top10DefaultData.value.transportation,
     extraFilters: {
       _reportStationType: {
         value: toporiginType.value,
@@ -563,11 +554,11 @@ const CLICK_CONFIG_MAP: Record<string, (val: string) => ClickConfig> = {
     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
+      type: top10DefaultData.value.date_type,
+      start: top10DefaultData.value.date_start,
+      end: top10DefaultData.value.date_end
     },
-    transportMode: dashboardObj.Top10faultData.transportation,
+    transportMode: top10DefaultData.value.transportation,
     extraFilters: {
       _reportStationType: {
         value: topdestinationinType.value,
@@ -583,11 +574,11 @@ const CLICK_CONFIG_MAP: Record<string, (val: string) => ClickConfig> = {
     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
+      type: co2OriginDefaultData.value.date_type,
+      start: co2OriginDefaultData.value.date_start,
+      end: co2OriginDefaultData.value.date_end
     },
-    transportMode: dashboardObj.OriginCo2Top10faultData.transportation,
+    transportMode: co2OriginDefaultData.value.transportation,
     extraFilters: {
       _reportDataType: {
         value: seller_chart_CO2_origin.value[0]?.paramsdata?.type,
@@ -603,11 +594,11 @@ const CLICK_CONFIG_MAP: Record<string, (val: string) => ClickConfig> = {
     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
+      type: co2DestinationDefaultData.value.date_type,
+      start: co2DestinationDefaultData.value.date_start,
+      end: co2DestinationDefaultData.value.date_end
     },
-    transportMode: dashboardObj.DestinationCo2Top10faultData.transportation,
+    transportMode: co2DestinationDefaultData.value.transportation,
     extraFilters: {
       _reportDataType: {
         value: seller_chart_CO2_destination.value[0]?.paramsdata?.type,
@@ -721,6 +712,7 @@ const ClickParams = (val: string) => {
   router.push({ path: '/tracking' })
 }
 
+import DashboardGuide from '../src/components/DashboardGuide.vue'
 import { useGuideStore } from '@/stores/modules/guide'
 import { useThemeStore } from '@/stores/modules/theme'
 
@@ -962,7 +954,7 @@ const handleGuide = () => {
                     ></VTipTooltip>
                   </div>
                   <DashFilters
-                    :defaultData="KPIDefaulteData"
+                    :defaultData="kpiDefaultData"
                     :isShowTransportModeGuide="true"
                     @FilterSearch="GetKpiData"
                   ></DashFilters>
@@ -975,14 +967,14 @@ const handleGuide = () => {
                       ref="pie_chart_kpi_departure"
                       @ClickParams="ClickParams(item.title + ' Departure')"
                       :PieData="KPIobj"
-                      v-vloading="KPILoading"
+                      v-vloading="kpiLoading"
                       style="height: 300px"
                     ></PieChart>
                   </div>
                   <div class="kpi">
                     <PieChart
                       ref="pie_chart_kpi_arrival"
-                      :PieData="Arrivalobj"
+                      :PieData="arrivalObj"
                       v-vloading="KPIArrivalLoading"
                       @ClickParams="ClickParams(item.title + ' Arrival')"
                       style="height: 300px"
@@ -1007,7 +999,7 @@ const handleGuide = () => {
                     ></VTipTooltip>
                   </div>
                   <DashFilters
-                    :defaultData="PendingDefaulteData"
+                    :defaultData="pendingDefaultData"
                     :radioisDisabled="true"
                     :img="'./image/kpi-chart-tip.png'"
                     @FilterSearch="GetPendingEcharts"
@@ -1019,8 +1011,8 @@ const handleGuide = () => {
                   <div class="kpi">
                     <PieChart
                       ref="pie_chart_pending_departure"
-                      :PieData="Pendingobj"
-                      v-vloading="PendingLoading"
+                      :PieData="pendingObj"
+                      v-vloading="pendingLoading"
                       @ClickParams="ClickParams(item.title + ' Departure')"
                       style="height: 300px"
                     ></PieChart>
@@ -1029,8 +1021,8 @@ const handleGuide = () => {
                     <PieChart
                       ref="pie_chart_pending_arrival"
                       @ClickParams="ClickParams(item.title + ' Arrival')"
-                      :PieData="PendingArrivalobj"
-                      v-vloading="PendingArrivalLoading"
+                      :PieData="pendingArrivalObj"
+                      v-vloading="pendingArrivalLoading"
                       style="height: 300px"
                     ></PieChart>
                   </div>
@@ -1056,7 +1048,7 @@ const handleGuide = () => {
                     ></VTipTooltip>
                   </div>
                   <DashFilters
-                    :defaultData="ETDDefaulteData"
+                    :defaultData="etdDefaultData"
                     @FilterSearch="GetETDEcharts"
                     :isETDToETA="true"
                     :isContainer="true"
@@ -1067,8 +1059,8 @@ const handleGuide = () => {
                 <PieChart
                   ref="pie_chart_ETD"
                   @ClickParams="ClickParams(item.title)"
-                  :PieData="ETDobj"
-                  v-vloading="ETDLoading"
+                  :PieData="etdObj"
+                  v-vloading="etdLoading"
                   style="height: 300px"
                 ></PieChart>
               </template>
@@ -1091,7 +1083,7 @@ const handleGuide = () => {
                     ></VTipTooltip>
                   </div>
                   <DashFilters
-                    :defaultData="ContainerefaultData"
+                    :defaultData="containerDefaultData"
                     @FilterSearch="GetContainerCountEcharts"
                     :isContainer="true"
                   ></DashFilters>
@@ -1136,7 +1128,7 @@ const handleGuide = () => {
                     ></VTipTooltip>
                   </div>
                   <DashFilters
-                    :defaultData="Top10DefaultData"
+                    :defaultData="top10DefaultData"
                     @FilterSearch="GetTop10ODEcharts"
                   ></DashFilters>
                 </div>
@@ -1148,14 +1140,14 @@ const handleGuide = () => {
                       ref="seller_chart_top10_origin"
                       @clickParams="ClickParams(item.title1)"
                       :SellerData="Top10Obj.OriginData"
-                      v-vloading="TopOriginLoading"
-                      :Interval="Top1OInterval"
+                      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>
+                    <!-- <TopMap :obj="top10DefaultData.value" ref="top10Originref"></TopMap> -->
+                    <TopMap ref="top10Originref"></TopMap>
                   </div>
                 </div>
               </template>
@@ -1166,15 +1158,15 @@ const handleGuide = () => {
                       ref="seller_chart_top10_destination"
                       @clickParams="ClickParams(item.title2)"
                       :SellerData="Top10Obj.DestinationData"
-                      :Interval="Top1OInterval_dest"
-                      v-vloading="TopOriginLoading"
+                      :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>
+                    <!-- <TopMap :obj="top10DefaultData.value" ref="top10Destinationref"></TopMap> -->
+                    <TopMap ref="top10Destinationref"></TopMap>
                   </div>
                 </div>
               </template>
@@ -1198,7 +1190,7 @@ const handleGuide = () => {
                     ></VTipTooltip>
                   </div>
                   <DashFilters
-                    :defaultData="Co2OriginDefaultData"
+                    :defaultData="co2OriginDefaultData"
                     @FilterSearch="GetCo2EmissionEcharts"
                   ></DashFilters>
                 </div>
@@ -1206,10 +1198,10 @@ const handleGuide = () => {
               <template #content>
                 <BarChart
                   ref="seller_chart_CO2_origin"
-                  :BarData="EmissionObj"
+                  :BarData="emissionObj"
                   save-image-name="CO2e Emission by Origin (Top 10)"
                   @clickParams="ClickParams(item.title)"
-                  v-vloading="EmissionLoading"
+                  v-vloading="emissionLoading"
                   style="height: 250px"
                   :isRevenue="true"
                   :barHeight="{ height: '250px' }"
@@ -1230,7 +1222,7 @@ const handleGuide = () => {
                     <!-- <VTipTooltip :img="co2eChartTip"></VTipTooltip> -->
                   </div>
                   <DashFilters
-                    :defaultData="Co2DestinationDefaultData"
+                    :defaultData="co2DestinationDefaultData"
                     @FilterSearch="GetCo2DestinationEcharts"
                   ></DashFilters>
                 </div>
@@ -1238,7 +1230,7 @@ const handleGuide = () => {
               <template #content>
                 <BarChart
                   ref="seller_chart_CO2_destination"
-                  :BarData="DestinationObj"
+                  :BarData="destinationObj"
                   v-vloading="DestinationLoading"
                   style="height: 250px"
                   :isRevenue="true"
@@ -1273,7 +1265,7 @@ const handleGuide = () => {
                     ></VTipTooltip>
                   </div>
                   <DashFilters
-                    :defaultData="RecentDefaulteData"
+                    :defaultData="recentDefaultData"
                     @FilterSearch="getTableData"
                     :isRecent="true"
                   ></DashFilters>
@@ -1290,8 +1282,8 @@ const handleGuide = () => {
                     layout="prev, pager, next"
                     :pager-count="3"
                     :total="pageInfo.total"
-                    @size-change="getTableData(RecentDefaulteData, true)"
-                    @current-change="getTableData(RecentDefaulteData, true)"
+                    @size-change="getTableData(recentDefaultData, true)"
+                    @current-change="getTableData(recentDefaultData, true)"
                   />
                 </div>
               </template>
@@ -1313,7 +1305,7 @@ const handleGuide = () => {
                   </div>
 
                   <DashFilters
-                    :defaultData="RevenueDefaultData"
+                    :defaultData="revenueDefaultData"
                     @FilterSearch="GetRevenueEcharts"
                     :isRevenue="true"
                     :isContainer="true"
@@ -1322,8 +1314,8 @@ const handleGuide = () => {
               </template>
               <template #content>
                 <RevenueChart
-                  :BarData="RevenueObj"
-                  v-vloading="RevenueLoading"
+                  :BarData="revenueObj"
+                  v-vloading="revenueLoading"
                   :RevenueStartDate="revenue_date_start"
                   :RevenueEndDate="revenue_date_end"
                   style="height: 300px"

src/views/Dashboard/src/components/DashFiters.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, computed } from 'vue'
-import moment from 'moment'
 import dayjs from 'dayjs'
 import { formatTimezone } from '@/utils/tools'
 
@@ -129,10 +128,10 @@ const StartChange = (val: any) => {
     let current = currentYear + '-' + currentMonth
     EndDate.value = current
   }
-  const date1 = moment(String(val)).format('MM/YYYY')
-  const date1_two = moment(String(val)).format('MM-YYYY')
-  const date2 = moment(EndDate.value).format('MM/YYYY')
-  const date2_two = moment(EndDate.value).format('MM-YYYY')
+  const date1 = dayjs(String(val)).format('MM/YYYY')
+  const date1_two = dayjs(String(val)).format('MM-YYYY')
+  const date2 = dayjs(EndDate.value).format('MM/YYYY')
+  const date2_two = dayjs(EndDate.value).format('MM-YYYY')
   dashboardObj.date_start = date1
   dashboardObj.date_start_two = date1_two
   dashboardObj.date_end = date2
@@ -146,10 +145,10 @@ const EndChange = (val: any) => {
     let current = currentYear + '-' + currentMonth
     startDate.value = current
   }
-  const date1 = moment(startDate.value).format('MM/YYYY')
-  const date1_two = moment(startDate.value).format('MM-YYYY')
-  const date2 = moment(String(val)).format('MM/YYYY')
-  const date2_two = moment(String(val)).format('MM-YYYY')
+  const date1 = dayjs(startDate.value).format('MM/YYYY')
+  const date1_two = dayjs(startDate.value).format('MM-YYYY')
+  const date2 = dayjs(String(val)).format('MM/YYYY')
+  const date2_two = dayjs(String(val)).format('MM-YYYY')
   dashboardObj.date_start = date1
   dashboardObj.date_start_two = date1_two
   dashboardObj.date_end = date2

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

@@ -89,7 +89,7 @@ const GetDashboardData = () => {
       nextTick(() => {
         GetKpiData(KPIDefaulteData.value)
         GetPendingEcharts(PendingDefaulteData.value)
-        getTableData(false, RecentDefaulteData.value)
+        getTableData(RecentDefaulteData.value, false)
         GetETDEcharts(ETDDefaulteData.value)
         GetContainerCountEcharts(ContainerefaultData.value)
         GetTop10ODEcharts(Top10DefaultData.value)
@@ -101,7 +101,7 @@ const GetDashboardData = () => {
   })
 }
 // 获取表单数据
-const getTableData = (isPage: any, val: any) => {
+const getTableData = (val: any, isPage?: any) => {
   dashboardObj.RecentDefaultData = val
   const rc = isPage ? pageInfo.value.total : -1
   $api
@@ -477,291 +477,248 @@ const seller_chart_top10_destination = ref()
 const seller_chart_CO2_origin = ref()
 const seller_chart_CO2_destination = ref()
 
-const ClickParams = (val: any) => {
-  const setEstimatedTime = (
-    type: 'ETD' | 'ETA',
-    value: string[],
+// 定义点击项的配置类型
+interface ClickConfig {
+  reportType: string
+  reportRefGetter: () => string
+  extraFilters?: Record<string, any>
+  dateConfig?: {
+    type: 'ETD' | 'ETA'
+    start: string
+    end: string
     formatType?: 'Container' | 'Revenue'
-  ) => {
-    const parseFormat = formatType === 'Container' ? 'MM/YYYY' : 'MM/DD/YYYY'
+  }
+  transportMode: any
+}
 
-    // 处理单个日期字符串的转换函数
-    const transformDate = (dateStr: string): string => {
-      let parsed = dayjs(dateStr, parseFormat, true) // 使用 strict 模式更安全
+// 配置映射表：将 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',
 
-      // 如果是 Container 格式（MM/YYYY），强制日期为 1 号
-      if (formatType === 'Container') {
-        parsed = parsed.date(1) // 设置为当月 1 日
+    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'
 
-      return parsed.format(formatDate)
+  const transform = (dateStr: string): string => {
+    let parsed = dayjs(dateStr, parseFormat, true)
+    if (formatType === 'Container') {
+      parsed = parsed.date(1)
     }
-    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'
-    })
+    return parsed.format(formatDate)
   }
 
-  const setTransportMode = (value: any) => {
-    filtersStore.updateFilter({
-      title: 'Transport Mode',
-      key: 'transport_mode',
-      value: value,
-      keyType: 'array'
-    })
+  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
   }
 
-  // KPI Departure点击跳转
-  if (val === 'KPI0') {
-    setEstimatedTime(dashboardObj.KPIDefaulteData.date_type, [
-      dashboardObj.KPIDefaulteData.date_start,
-      dashboardObj.KPIDefaulteData.date_end
-    ])
-    setTransportMode(dashboardObj.KPIDefaulteData.transportation)
-    // KPI Departure点击跳转
-    filtersStore.updateFilter({
-      title: 'KPI Departure',
-      key: '_reportRef',
-      value: pie_chart_kpi_departure.value[0].paramsdata.name,
-      keyType: 'normal'
-    })
-    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
-    ])
-    setTransportMode(dashboardObj.KPIDefaulteData.transportation)
-    // KPI Arrival点击跳转
-    filtersStore.updateFilter({
-      title: 'KPI Arrival',
-      key: '_reportRef',
-      value: pie_chart_kpi_arrival.value[0]?.paramsdata?.name || '',
-      keyType: 'normal'
-    })
-    filtersStore.updateFilter({
-      title: '_reportType',
-      key: '_reportType',
-      value: 'ata_r3',
-      keyType: 'normal',
-      isHide: true
-    })
-  } else if (val === 'Pending0') {
-    setTransportMode(dashboardObj.PendingDefaultData.transportation)
-    // 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.transportation)
-    //  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'
-    )
-    setTransportMode(dashboardObj.ETDDefaultData.transportation)
-    filtersStore.updateFilter({
-      title: 'ETD to ETA (Days)',
-      key: '_reportRef',
-      value: pie_chart_ETD.value[0].paramsdata.name,
-      keyType: 'normal'
-    })
-    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.transportation)
-    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
-    })
+  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: '_reportStationType',
-      key: '_reportStationType',
-      value: toporiginType.value,
-      keyType: 'normal',
-      isHide: true
+      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],
+      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.transportation)
-    // 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
-    })
+  }
+  if (val === 'Top 10 Destination') {
     filtersStore.updateFilter({
       title: 'Destination',
       key: 'consignee_city',
-      value: [seller_chart_top10_destination.value[0].paramscityname],
+      value: [seller_chart_top10_destination.value[0]?.paramscityname],
       keyType: 'array'
     })
-  } 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
-    ])
-    setTransportMode(dashboardObj.OriginCo2Top10faultData.transportation)
-    filtersStore.updateFilter({
-      title: 'CO2e Emission by Origin (Top 10)',
-      key: '_reportRef',
-      value: seller_chart_CO2_origin.value[0].paramsdata.name,
-      keyType: 'normal'
-    })
-    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
-    ])
-    setTransportMode(dashboardObj.DestinationCo2Top10faultData.transportation)
-    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
+  }
+
+  // 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
+      })
     })
   }
 
-  router.push({
-    path: '/tracking'
-  })
+  // 5. 跳转
+  router.push({ path: '/tracking' })
 }
 
 import { useGuideStore } from '@/stores/modules/guide'
@@ -791,7 +748,6 @@ 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()
@@ -1017,7 +973,7 @@ const handleGuide = () => {
                   <div class="kpi">
                     <PieChart
                       ref="pie_chart_kpi_departure"
-                      @ClickParams="ClickParams(item.title + '0')"
+                      @ClickParams="ClickParams(item.title + ' Departure')"
                       :PieData="KPIobj"
                       v-vloading="KPILoading"
                       style="height: 300px"
@@ -1028,7 +984,7 @@ const handleGuide = () => {
                       ref="pie_chart_kpi_arrival"
                       :PieData="Arrivalobj"
                       v-vloading="KPIArrivalLoading"
-                      @ClickParams="ClickParams(item.title + '1')"
+                      @ClickParams="ClickParams(item.title + ' Arrival')"
                       style="height: 300px"
                     ></PieChart>
                   </div>
@@ -1065,14 +1021,14 @@ const handleGuide = () => {
                       ref="pie_chart_pending_departure"
                       :PieData="Pendingobj"
                       v-vloading="PendingLoading"
-                      @ClickParams="ClickParams(item.title + '0')"
+                      @ClickParams="ClickParams(item.title + ' Departure')"
                       style="height: 300px"
                     ></PieChart>
                   </div>
                   <div class="kpi">
                     <PieChart
                       ref="pie_chart_pending_arrival"
-                      @ClickParams="ClickParams(item.title + '1')"
+                      @ClickParams="ClickParams(item.title + ' Arrival')"
                       :PieData="PendingArrivalobj"
                       v-vloading="PendingArrivalLoading"
                       style="height: 300px"
@@ -1334,8 +1290,8 @@ const handleGuide = () => {
                     layout="prev, pager, next"
                     :pager-count="3"
                     :total="pageInfo.total"
-                    @size-change="getTableData(true, RecentDefaulteData)"
-                    @current-change="getTableData(true, RecentDefaulteData)"
+                    @size-change="getTableData(RecentDefaulteData, true)"
+                    @current-change="getTableData(RecentDefaulteData, true)"
                   />
                 </div>
               </template>