Merge branch 'test_zyh' of United_Software/k_online_ui into test

src/components/DateRange/src/DateRange.vue

@@ -67,32 +67,26 @@ const DateCreation = ref()
 // 查询默认日期
 const defaultDate = () => {
   // 工具函数：安全格式化日期范围
-  const formatDateRange = (startStr: string | null, endStr: string | null, oldFormat: string) => {
+  const formatDateRange = (startStr: string | null, endStr: string | null) => {
     if (!startStr || !endStr) return [null, null]
-    const start = dayjs(startStr, oldFormat)
-    const end = dayjs(endStr, oldFormat)
+    const start = dayjs(startStr)
+    const end = dayjs(endStr)
     return start.isValid() && end.isValid()
       ? [start.format(formatDate), end.format(formatDate)]
       : [null, null]
   }
 
   // 工具函数：设置 daterangeObj2 条目
-  const setRange = (
-    key: string,
-    title: string,
-    startStr: string | null,
-    endStr: string | null,
-    oldFormat: string
-  ) => {
-    const [start, end] = formatDateRange(startStr, endStr, oldFormat)
+  const setRange = (key: string, title: string, startStr: string | null, endStr: string | null) => {
+    const [start, end] = formatDateRange(startStr, endStr)
     if (start && end) {
       daterangeObj2[key] = { title, data: [start, end] }
     }
   }
 
   // 工具函数：设置 AddDateType（仅用于 Creation Time）
-  const setAddDateType = (startStr: string | null, endStr: string | null, oldFormat: string) => {
-    const [start, end] = formatDateRange(startStr, endStr, oldFormat)
+  const setAddDateType = (startStr: string | null, endStr: string | null) => {
+    const [start, end] = formatDateRange(startStr, endStr)
     AddDateType.value = [{ label: 'Creation Time', value: [start, end] }]
   }
 
@@ -115,9 +109,20 @@ const defaultDate = () => {
       // 场景 A: 有 clickParams → 读取 reportList
       const reportList = JSON.parse(sessionStorage.getItem('reportList') || '{}')
       trackingData = JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') || '{}')
-      const oldFormat = trackingData.dateFormat
-      setRange('ETD', 'ETD', reportList.etd_start, reportList.etd_end, oldFormat)
-      setRange('ETA', 'ETA', reportList.eta_start, reportList.eta_end, oldFormat)
+      etdDateRange.value = [
+        reportList.etd_start
+          ? dayjs(reportList.etd_start, valueFormatDate).format(formatDate)
+          : null,
+        reportList.etd_end ? dayjs(reportList.etd_end, valueFormatDate).format(formatDate) : null
+      ]
+      etaDateRange.value = [
+        reportList.eta_start
+          ? dayjs(reportList.eta_start, valueFormatDate).format(formatDate)
+          : null,
+        reportList.eta_end ? dayjs(reportList.eta_end, valueFormatDate).format(formatDate) : null
+      ]
+      setRange('ETD', 'ETD', reportList.etd_start, reportList.etd_end)
+      setRange('ETA', 'ETA', reportList.eta_start, reportList.eta_end)
     } else {
       // 场景 B: 无 clickParams → 读取 searchTableQeuryTracking
       const stored = sessionStorage.getItem('searchTableQeuryTracking')
@@ -125,11 +130,10 @@ const defaultDate = () => {
         // 子场景 B1: 无存储 → 用默认值
         const [start, end] = getDefaultRange()
         etdDateRange.value = [start, end]
-        setRange('ETD', 'ETD', start, end, formatDate)
+        setRange('ETD', 'ETD', start, end)
       } else {
         // 子场景 B2: 有存储
         trackingData = JSON.parse(stored)
-        const oldFormat = trackingData.dateFormat
         etdDateRange.value = [
           trackingData.etd_start ? trackingData.etd_start : null,
           trackingData.etd_end ? trackingData.etd_end : null
@@ -138,16 +142,15 @@ const defaultDate = () => {
           trackingData.eta_start ? trackingData.eta_start : null,
           trackingData.eta_end ? trackingData.eta_end : null
         ]
-        setRange('ETD', 'ETD', trackingData.etd_start, trackingData.etd_end, oldFormat)
-        setRange('ETA', 'ETA', trackingData.eta_start, trackingData.eta_end, oldFormat)
+        setRange('ETD', 'ETD', trackingData.etd_start, trackingData.etd_end)
+        setRange('ETA', 'ETA', trackingData.eta_start, trackingData.eta_end)
         if (trackingData.created_time_start) {
-          setAddDateType(trackingData.created_time_start, trackingData.created_time_end, oldFormat)
+          setAddDateType(trackingData.created_time_start, trackingData.created_time_end)
           setRange(
             'Creation Time',
             'Creation Time',
             trackingData.created_time_start,
-            trackingData.created_time_end,
-            oldFormat
+            trackingData.created_time_end
           )
         }
       }
@@ -160,12 +163,11 @@ const defaultDate = () => {
       // 无存储 → 默认值
       const [start, end] = getDefaultRange()
       etdDateRange.value = [start, end]
-      setRange('ETD', 'ETD', start, end, formatDate)
+      setRange('ETD', 'ETD', start, end)
     } else {
       // 有存储
       const queryData = JSON.parse(stored)
       emitPayload = queryData
-      const oldFormat = queryData.dateFormat
 
       etdDateRange.value = [
         queryData.f_etd_start ? queryData.f_etd_start : null,
@@ -175,16 +177,15 @@ const defaultDate = () => {
         queryData.m_eta_start ? queryData.m_eta_start : null,
         queryData.m_eta_end ? queryData.m_eta_end : null
       ]
-      setRange('ETD', 'ETD', queryData.f_etd_start, queryData.f_etd_end, oldFormat)
-      setRange('ETA', 'ETA', queryData.m_eta_start, queryData.m_eta_end, oldFormat)
+      setRange('ETD', 'ETD', queryData.f_etd_start, queryData.f_etd_end)
+      setRange('ETA', 'ETA', queryData.m_eta_start, queryData.m_eta_end)
       if (queryData.created_time_start) {
-        setAddDateType(queryData.created_time_start, queryData.created_time_end, oldFormat)
+        setAddDateType(queryData.created_time_start, queryData.created_time_end)
         setRange(
           'Creation Time',
           'Creation Time',
           queryData.created_time_start,
-          queryData.created_time_end,
-          oldFormat
+          queryData.created_time_end
         )
       }
     }

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

@@ -131,7 +131,7 @@ const handlePanelChange = (value: any, mode: any) => {
         width: props.CalendarWidth,
         backgroundColor: props.isType ? 'var(--more-type-bg-color)' : 'var(--management-bg-color)'
       }"
-      :popupClassName="{ 'th-color': props.isShowPopupClass }"
+      :popupClassName="props.isShowPopupClass ? 'th-color' : ''"
       :open="open"
       :disabled="Disabled"
       @change="changeRangeData"

src/router/index.ts

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

src/views/Booking/src/BookingView.vue

@@ -83,14 +83,12 @@ const handleClose = (tag: any) => {
   } else if (tag.includes('Voyage')) {
     delete searchTableQeury['f_voyage/m_voyage']
   }
-  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
 }
 // 筛选框查询
 const FiltersSeach = (val: any, value: any) => {
   searchTableQeury[val] = value
-  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
 }
@@ -184,7 +182,6 @@ const DateRangeSearch = (dateRangeData: any) => {
       searchTableQeury.created_time_end = dateRangeData[key].data[1]
     }
   }
-  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
   renderTagsData()
@@ -235,7 +232,6 @@ const MoreFiltersSearch = (val: any, value: any) => {
       searchTableQeury['f_voyage/m_voyage'] = value[key]
     }
   }
-  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
   renderTagsData()
@@ -304,7 +300,6 @@ const clearfilters = () => {
   emitter.emit('clearTag', 'Voyage')
   searchTableQeury = {}
   searchTableQeury.filterTag = ['All']
-  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
   renderTagsData()
@@ -417,7 +412,6 @@ const changeTag = (val: any, boolean: any) => {
   searchTableQeury.filterTag = val
   let str = 'Shipment status: ' + val
   filterData.filtersTagData.push(str)
-  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   if (boolean) {
     getbookingdata()
@@ -428,7 +422,6 @@ const changeTag = (val: any, boolean: any) => {
 // 点击search按钮
 const SearchInput = () => {
   searchTableQeury._textSearch = BookingSearch.value
-  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
 }

src/views/Dashboard/src/DashboardView.vue

@@ -141,7 +141,7 @@ const GetKpiData = (val: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        KPIobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
+        KPIobj.ETD_Title = `{a|${res.data.title1}} {b|${res.data.title2}}`
         KPIobj.ETDList = res.data.ETDList
         KPIobj.ETD_Radius = res.data.ETD_Radius
         KPIobj.download_name = res.data.download_name
@@ -158,7 +158,7 @@ const GetKpiData = (val: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        Arrivalobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
+        Arrivalobj.ETD_Title = `{a|${res.data.title1}} {b|${res.data.title2}}`
         Arrivalobj.ETDList = res.data.ETDList
         Arrivalobj.ETD_Radius = res.data.ETD_Radius
         Arrivalobj.download_name = res.data.download_name
@@ -193,7 +193,7 @@ const GetPendingEcharts = (val: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        Pendingobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
+        Pendingobj.ETD_Title = `{a|${res.data.title1}} {b|${res.data.title2}}`
         Pendingobj.ETDList = res.data.ETDList
         Pendingobj.ETD_Radius = res.data.ETD_Radius
         Pendingobj.download_name = res.data.download_name
@@ -210,7 +210,7 @@ const GetPendingEcharts = (val: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        PendingArrivalobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
+        PendingArrivalobj.ETD_Title = `{a|${res.data.title1}} {b|${res.data.title2}}`
         PendingArrivalobj.ETDList = res.data.ETDList
         PendingArrivalobj.ETD_Radius = res.data.ETD_Radius
         PendingArrivalobj.download_name = res.data.download_name
@@ -651,7 +651,7 @@ const ClickParams = (val: any) => {
       dashboardObj.KPIDefaulteData.date_end,
       ''
     )
-    reportList._reportRef = pie_chart_kpi_arrival.value[0].paramsdata.name
+    reportList._reportRef = pie_chart_kpi_arrival.value[0]?.paramsdata?.name || ''
     reportList._reportType = 'ata_r3'
     handlereportlist(
       dashboardObj.KPIDefaulteData.transportation,
@@ -662,7 +662,7 @@ const ClickParams = (val: any) => {
     sessionStorage.setItem('reportList', JSON.stringify(reportList))
     let obj: any = {}
     obj.title = 'KPI Arrival'
-    obj.name = pie_chart_kpi_arrival.value[0].paramsdata.name
+    obj.name = pie_chart_kpi_arrival.value[0]?.paramsdata?.name || ''
     sessionStorage.setItem('tagsList', JSON.stringify(obj))
     router.push({
       path: '/tracking'
@@ -1170,6 +1170,7 @@ function handleImageClick(event) {
                   v-vloading="containerLoading"
                   style="height: 300px"
                   :isRevenue="true"
+                  save-image-name="Container Count"
                   :barHeight="{ height: '300px' }"
                 ></BarChart>
               </template>
@@ -1215,6 +1216,7 @@ function handleImageClick(event) {
                       :SellerData="Top10Obj.OriginData"
                       v-vloading="TopOriginLoading"
                       :Interval="Top1OInterval"
+                      saveImageName="Top 10 Origin"
                     ></SellerChart>
                   </div>
                   <div class="map">
@@ -1232,6 +1234,7 @@ function handleImageClick(event) {
                       :SellerData="Top10Obj.DestinationData"
                       :Interval="Top1OInterval_dest"
                       v-vloading="TopOriginLoading"
+                      saveImageName="Top 10 Destination"
                       style="height: 272px"
                     ></SellerChart>
                   </div>
@@ -1270,6 +1273,7 @@ function handleImageClick(event) {
                 <BarChart
                   ref="seller_chart_CO2_origin"
                   :BarData="EmissionObj"
+                  save-image-name="CO2e Emission by Origin (Top 10)"
                   @clickParams="ClickParams(item.title)"
                   v-vloading="EmissionLoading"
                   style="height: 250px"
@@ -1304,6 +1308,7 @@ function handleImageClick(event) {
                   v-vloading="DestinationLoading"
                   style="height: 250px"
                   :isRevenue="true"
+                  save-image-name="CO2e Emission by Destination (Top 10)"
                   @clickParams="ClickParams(item.title)"
                   :barHeight="{ height: '250px' }"
                 ></BarChart>

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

@@ -7,7 +7,8 @@ import { formatNumber } from '@/utils/tools'
 const themeStore = useThemeStore()
 const props = defineProps({
   BarData: Object,
-  barHeight: Object
+  barHeight: Object,
+  saveImageName: String
 })
 const bar_data = ref(props.BarData)
 const bar_ref = ref()
@@ -21,7 +22,9 @@ watch(
     initOption.yAxis.max = Max.value
     initOption.yAxis.interval = interval.value
     initOption.title.text = bar_title.value
-    initChart()
+    nextTick(() => {
+      initChart()
+    })
   },
   {
     deep: true
@@ -144,13 +147,13 @@ const initOption = reactive({
       show: true,
       lineStyle: {
         type: 'dashed',
-        color: '#eaebed'
+        color: '#3F434A'
       }
     },
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#eaebed'
+        color: '#3F434A'
       }
     },
     axisLabel: {
@@ -177,6 +180,27 @@ const initOption = reactive({
       color: '#646A73'
     }
   },
+  toolbox: {
+    top: 6,
+    right: 8,
+    iconStyle: {
+      borderColor: '#2B2F36'
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#ff7500'
+      } // hover上去时的颜色
+    },
+    feature: {
+      saveAsImage: {
+        show: true,
+        name: bar_title.value || props.saveImageName || 'data',
+        type: 'png',
+        backgroundColor: '#fff'
+      }
+    },
+    showTitle: false
+  },
   series: bar_series.value
 })
 onMounted(() => {
@@ -186,14 +210,20 @@ onMounted(() => {
     () => themeStore.theme,
     (newVal) => {
       if (newVal === 'dark') {
-        initOption.xAxis.axisLine.lineStyle.color = '#3F434A'
-        initOption.yAxis.axisLine.lineStyle.color = '#3F434A'
-        initOption.yAxis.splitLine.lineStyle.color = '#3F434A'
+        // initOption.title.textStyle.color = '#f0f1f3'
+        initOption.xAxis.axisLine.lineStyle.color = '#8d9095'
+        initOption.yAxis.axisLine.lineStyle.color = '#8d9095'
+        initOption.yAxis.splitLine.lineStyle.color = '#8d9095'
+        initOption.toolbox.iconStyle.borderColor = '#f0f1f3'
+        initOption.toolbox.feature.saveAsImage.backgroundColor = '#3F434A'
         initChart()
       } else {
+        // initOption.title.textStyle.color = '#2B2F36'
         initOption.xAxis.axisLine.lineStyle.color = '#eaebed'
         initOption.yAxis.axisLine.lineStyle.color = '#eaebed'
         initOption.yAxis.splitLine.lineStyle.color = '#eaebed'
+        initOption.toolbox.iconStyle.borderColor = '#2B2F36'
+        initOption.toolbox.feature.saveAsImage.backgroundColor = '#fff'
         initChart()
       }
     },

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

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

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

@@ -23,9 +23,10 @@ watch(
     initOption.xAxis.data = barName.value
     initOption.series = bar_series.value
     initOption.legend.data = Name.value
-    initOption.toolbox.feature.saveAsImage.name = downloadName.value
     initOption.toolbox.show = isShowTooltips.value
-    initChart()
+    nextTick(() => {
+      initChart()
+    })
   },
   {
     deep: true
@@ -37,7 +38,9 @@ watch(
     bar_data.value = current
     initOption.yAxis.max = Max.value
     initOption.yAxis.interval = interval.value
-    initChart()
+    nextTick(() => {
+      initChart()
+    })
   },
   {
     deep: true,
@@ -74,9 +77,7 @@ const Name = computed(() => {
     return []
   }
 })
-const downloadName = computed(() => {
-  return bar_data.value?.download_name
-})
+
 const isShowTooltips = computed(() => {
   return bar_data.value?.isShowTooltips
 })
@@ -284,19 +285,20 @@ const initOption = reactive({
         borderColor: '#ff7500'
       } // hover上去时的颜色
     },
-    itemSize: 25,
     show: isShowTooltips.value, // 显示工具箱
+    top: 6,
+    right: 8,
     feature: {
-      saveAsImage: { show: false, name: downloadName.value },
-      myTool1: {
-        show: true,
-        title: 'update',
-        icon: 'image://' + updateIcon,
-        onclick: function () {
-          let filename = 'Revenue Spent Details ' + barName.value[0] + '-' + barName.value[barName.value.length - 1]
-          exportData({ filename: filename })
-        }
-      }
+      saveAsImage: { show: true, name: 'Revenue Spent', type: 'png', backgroundColor: '#fff' }
+      // myTool1: {
+      //   show: true,
+      //   title: 'update',
+      //   icon: 'image://' + updateIcon,
+      //   onclick: function () {
+      //     let filename = 'Revenue Spent Details ' + barName.value[0] + '-' + barName.value[barName.value.length - 1]
+      //     exportData({ filename: filename })
+      //   }
+      // }
     },
     showTitle: false
   }
@@ -307,11 +309,13 @@ onMounted(() => {
     () => themeStore.theme,
     (newVal) => {
       if (newVal === 'dark') {
-        initOption.title.textStyle.color = '#f0f1f3'
+        initOption.title.textStyle.color = '#fff'
         initOption.xAxis.axisLine.lineStyle.color = '#3F434A'
         initOption.xAxis.axisLine.lineStyle.color = '#3F434A'
         initOption.yAxis.axisLine.lineStyle.color = '#3F434A'
         initOption.legend.textStyle.color = 'rgba(240,241,243,0.7)'
+        initOption.toolbox.iconStyle.borderColor = '#f0f1f3'
+        initOption.toolbox.feature.saveAsImage.backgroundColor = '#3F434A'
         initChart()
       } else {
         initOption.title.textStyle.color = '#2B2F36'
@@ -319,6 +323,8 @@ onMounted(() => {
         initOption.yAxis.axisLine.lineStyle.color = '#eaebed'
         initOption.yAxis.splitLine.lineStyle.color = '#eaebed'
         initOption.legend.textStyle.color = '#646A73'
+        initOption.toolbox.iconStyle.borderColor = '#2B2F36'
+        initOption.toolbox.feature.saveAsImage.backgroundColor = '#fff'
         initChart()
       }
     },

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

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

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

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

src/views/Tracking/src/TrackingView.vue

@@ -149,7 +149,6 @@ const handleClose = (tag: any) => {
     delete searchTableQeuryTracking['f_voyage/voyage']
   }
 
-  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   getTrackingData()
 }
@@ -157,7 +156,6 @@ const handleClose = (tag: any) => {
 const FiltersSeach = (val: any, value: any) => {
   searchTableQeuryTracking[val] = value
 
-  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   getTrackingData()
 }
@@ -212,6 +210,7 @@ const defaultDate = (dateRangeData: any, data: any) => {
       }
       for (const key in dateRangeData) {
         searchTableQeuryTracking.etd_start = dateRangeData[key].data[0]
+
         searchTableQeuryTracking.etd_end = dateRangeData[key].data[1]
       }
     }
@@ -227,7 +226,7 @@ const defaultDate = (dateRangeData: any, data: any) => {
   if (trackingData) {
     // 根据顶部搜索框的搜索结果赋值
     initDataByHeaderSearch()
-  } else {
+  } else if (!trackingData && !sessionStorage.getItem('clickParams')) {
     getTrackingData()
   }
 
@@ -247,11 +246,12 @@ const DateRangeSearch = (dateRangeData: any) => {
   const fieldList = [
     {
       title: 'ETD',
-      keys: ['f_etd_start', 'f_etd_end']
+      keys: ['etd_start', 'etd_end']
     },
-    { title: 'ETA', keys: ['m_eta_start', 'm_eta_end'] },
+    { title: 'ETA', keys: ['eta_start', 'eta_end'] },
     { title: 'Creation Time', keys: ['created_time_start', 'created_time_end'] }
   ]
+  console.log('dateRangeData', dateRangeData)
   fieldList.forEach((item) => {
     if (!dateRangeData.hasOwnProperty(item.title)) {
       // 删除不存在的字段
@@ -271,7 +271,6 @@ const DateRangeSearch = (dateRangeData: any) => {
       searchTableQeuryTracking.created_time_end = dateRangeData[key].data[1]
     }
   }
-  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   getTrackingData()
   renderTagsData()
@@ -340,7 +339,6 @@ const MoreFiltersSearch = (val: any, value: any) => {
       searchTableQeuryTracking['f_voyage/voyage'] = value[key]
     }
   }
-  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   getTrackingData()
   renderTagsData()
@@ -429,7 +427,6 @@ const clearfilters = () => {
   emitter.emit('clearTag', 'Voyage')
   searchTableQeuryTracking = {}
   searchTableQeuryTracking.filterTag = ['All']
-  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   if (
     sessionStorage.getItem('reportList') != null ||
@@ -515,7 +512,6 @@ const initDataByHeaderSearch = () => {
     searchTableQeuryTracking._textSearch = TrackingSearch.value
     searchTableQeuryTracking.filterTag = ['All']
 
-    searchTableQeuryTracking.dateFormat = formatDate
     sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
     setTimeout(() => {
       emitter.emit('clearTag', 'Shipment status')
@@ -630,6 +626,9 @@ const getTrackingData = () => {
         }
       }
     })
+    .finally(() => {
+      sessionStorage.removeItem('clickParams')
+    })
 }
 onMounted(() => {
   if (
@@ -642,7 +641,48 @@ onMounted(() => {
     const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
     const reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
     for (const key in reportlist) {
-      searchTableQeuryTracking[key] = reportlist[key]
+      let str = ''
+      switch (key) {
+        case 'etd_start':
+          const startDate = dayjs(reportlist['etd_start'], valueFormatDate).format(formatDate)
+          searchTableQeuryTracking['etd_start'] = startDate
+          const endDate = dayjs(reportlist['etd_end'], valueFormatDate).format(formatDate)
+          searchTableQeuryTracking['etd_end'] = endDate
+          const startEnd = startDate + ' To ' + endDate
+          str = `ETD:${startEnd}`
+          // filterData.daterangeData.push(str)
+          break
+
+        case 'etd_end':
+          break
+        case 'eta_start':
+          const etaStart = dayjs(reportlist['eta_start'], valueFormatDate).format(formatDate)
+          searchTableQeuryTracking['eta_start'] = etaStart
+          const etaEnd = dayjs(reportlist['eta_end'], valueFormatDate).format(formatDate)
+          searchTableQeuryTracking['eta_end'] = etaEnd
+          str = `ETA:${etaStart} To ${etaEnd}`
+          // filterData.daterangeData.push(str)
+          break
+
+        case 'eta_end':
+          break
+        case 'created_time_start':
+          const createdTimeStart = dayjs(reportlist['created_time_start'], valueFormatDate).format(
+            formatDate
+          )
+          searchTableQeuryTracking['created_time_start'] = createdTimeStart
+          const createdTimeEnd = dayjs(reportlist['created_time_end'], valueFormatDate).format(
+            formatDate
+          )
+          searchTableQeuryTracking['created_time_end'] = createdTimeEnd
+          str = `Creation Time:${createdTimeStart} To ${createdTimeEnd}`
+          // filterData.daterangeData.push(str)
+          break
+        case 'created_time_end':
+          break
+        default:
+          searchTableQeuryTracking[key] = reportlist[key]
+      }
     }
     if (reportlist._city_name == '' || reportlist._city_name == undefined) {
       if (Object.keys(data).length != 0) {
@@ -651,7 +691,6 @@ onMounted(() => {
       }
     }
 
-    searchTableQeuryTracking.dateFormat = formatDate
     sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
     getTrackingData()
   }
@@ -664,7 +703,6 @@ const changeTag = (val: any, boolean: any) => {
   filterData.filtersTagData.push(str)
   filterTag.value = val
 
-  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   if (boolean) {
     getTrackingData()
@@ -675,7 +713,6 @@ const changeTag = (val: any, boolean: any) => {
 const SearchInput = () => {
   searchTableQeuryTracking._textSearch = TrackingSearch.value
 
-  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   getTrackingData()
 }