|
|
@@ -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 {
|
Jack Zhou