feat: 重构首页筛选项

src/components/DateRange/src/components/QuickCalendarDate.vue

@@ -25,7 +25,11 @@ const ETDDate = ref(props.Date)
 watch(
   () => props.Date,
   (current) => {
+    console.log('props.Date', props.Date)
     ETDDate.value = current
+  },
+  {
+    immediate: true
   }
 )
 const emit = defineEmits(['DateRangeChange', 'DateChange'])

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

@@ -77,15 +77,15 @@ const GetDashboardData = () => {
       revenueDefaultData.value = res.data.RevenueDefaultData
 
       nextTick(() => {
-        GetKpiData(kpiDefaultData.value)
-        GetPendingEcharts(pendingDefaultData.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)
+        //   GetETDEcharts(etdDefaultData.value)
+        //   GetContainerCountEcharts(containerDefaultData.value)
+        //   GetTop10ODEcharts(top10DefaultData.value)
+        //   GetCo2EmissionEcharts(co2OriginDefaultData.value)
+        //   GetCo2DestinationEcharts(co2DestinationDefaultData.value)
+        //   GetRevenueEcharts(revenueDefaultData.value)
       })
     }
   })
@@ -120,10 +120,12 @@ const arrivalObj = reactive({
   ETD_Radius: [],
   download_name: ''
 })
-const kpiLoading = ref(true)
-const KPIArrivalLoading = ref(true)
+const kpiLoading = ref(false)
+const kpiArrivalLoading = ref(false)
 //查询KPI
 const GetKpiData = (val: any) => {
+  kpiLoading.value = true
+  kpiArrivalLoading.value = true
   // 获取KPI Departure图表数据
   $api
     .GetKPIEcharts({
@@ -156,7 +158,7 @@ const GetKpiData = (val: any) => {
       }
     })
     .finally(() => {
-      KPIArrivalLoading.value = false
+      kpiArrivalLoading.value = false
     })
 }
 const pendingObj = reactive({
@@ -171,11 +173,13 @@ const pendingArrivalObj = reactive({
   ETD_Radius: [],
   download_name: ''
 })
-const pendingLoading = ref(true)
-const pendingArrivalLoading = ref(true)
+const pendingLoading = ref(false)
+const pendingArrivalLoading = ref(false)
 // 查询Pending
 const GetPendingEcharts = (val: any) => {
   // 获取Pending Departure图表数据
+  pendingLoading.value = true
+  pendingArrivalLoading.value = true
   $api
     .GetPendingEcharts({
       r_type: 'r4',
@@ -190,6 +194,7 @@ const GetPendingEcharts = (val: any) => {
       }
     })
     .finally(() => {
+      console.log('pendingLoading', pendingLoading.value)
       pendingLoading.value = false
     })
   // 获取Pending Arrival图表数据
@@ -216,9 +221,10 @@ const etdObj = reactive({
   ETD_Radius: [],
   download_name: ''
 })
-const etdLoading = ref(true)
+const etdLoading = ref(false)
 // 获取ETD/ETA 图表数据
 const GetETDEcharts = (val: any) => {
+  etdLoading.value = true
   $api
     .GetETDEcharts({
       ...val
@@ -244,8 +250,9 @@ const containerObj = reactive({
   interval: 0,
   download_name: ''
 })
-const containerLoading = ref(true)
+const containerLoading = ref(false)
 const GetContainerCountEcharts = (val: any) => {
+  containerLoading.value = true
   $api
     .GetContainerCountEcharts({
       ...val
@@ -279,10 +286,12 @@ const top1OInterval_dest = reactive({
   Max: 0,
   interval: 0
 })
-const topOriginLoading = ref(true)
+const topOriginLoading = ref(false)
 const top10Originref = ref()
 const top10Destinationref = ref()
 const GetTop10ODEcharts = (val: any) => {
+  topOriginLoading.value = true
+
   $api
     .GetTop10ODEcharts({
       ...val
@@ -309,7 +318,7 @@ const GetTop10ODEcharts = (val: any) => {
     })
 }
 //获取CO2 Origin
-const emissionLoading = ref(true)
+const emissionLoading = ref(false)
 const emissionObj = reactive({
   bar_title: '',
   barList: [],
@@ -319,6 +328,7 @@ const emissionObj = reactive({
   download_name: ''
 })
 const GetCo2EmissionEcharts = (val: any) => {
+  emissionLoading.value = true
   $api
     .GetCo2EmissionEcharts({
       ...val
@@ -346,8 +356,9 @@ const destinationObj = reactive({
   interval: 0,
   download_name: ''
 })
-const DestinationLoading = ref(true)
+const destinationLoading = ref(false)
 const GetCo2DestinationEcharts = (val: any) => {
+  destinationLoading.value = true
   $api
     .GetCo2DestinationEcharts({
       ...val
@@ -363,7 +374,7 @@ const GetCo2DestinationEcharts = (val: any) => {
       }
     })
     .finally(() => {
-      DestinationLoading.value = false
+      destinationLoading.value = false
     })
 }
 //获取Revenue Spent
@@ -377,12 +388,13 @@ const revenueObj = reactive({
   download_name: '',
   isShowTooltips: true
 })
-const revenueLoading = ref(true)
+const revenueLoading = ref(false)
 const revenue_date_start = ref()
 const revenue_date_end = ref()
 const GetRevenueEcharts = (val: any) => {
   revenue_date_start.value = val.date_start
   revenue_date_end.value = val.date_end
+  revenueLoading.value = true
   $api
     .GetRevenueEcharts({
       ...val
@@ -442,20 +454,21 @@ const SaveFilters = () => {
     co2DestinationDefaultData: co2DestinationDefaultData.value,
     revenueDefaultData: revenueDefaultData.value
   }
-  $api
-    .SaveLayout({
-      management: Management.value,
-      dashboardObj
-    })
-    .then((res: any) => {
-      if (res.code == 200) {
-        ElMessage({
-          message: res.data.msg,
-          duration: 3000,
-          type: 'success'
-        })
-      }
-    })
+  console.log(dashboardObj, '保存内容')
+  // $api
+  //   .SaveLayout({
+  //     management: Management.value,
+  //     dashboardObj
+  //   })
+  //   .then((res: any) => {
+  //     if (res.code == 200) {
+  //       ElMessage({
+  //         message: res.data.msg,
+  //         duration: 3000,
+  //         type: 'success'
+  //       })
+  //     }
+  //   })
 }
 //ETD to ETA(DAYS)点击跳转
 const pie_chart_ETD = ref()
@@ -956,6 +969,7 @@ const handleGuide = () => {
                   <DashFilters
                     :defaultData="kpiDefaultData"
                     :isShowTransportModeGuide="true"
+                    :threeMonthsInterval="true"
                     @FilterSearch="GetKpiData"
                   ></DashFilters>
                 </div>
@@ -975,7 +989,7 @@ const handleGuide = () => {
                     <PieChart
                       ref="pie_chart_kpi_arrival"
                       :PieData="arrivalObj"
-                      v-vloading="KPIArrivalLoading"
+                      v-vloading="kpiArrivalLoading"
                       @ClickParams="ClickParams(item.title + ' Arrival')"
                       style="height: 300px"
                     ></PieChart>
@@ -1000,7 +1014,7 @@ const handleGuide = () => {
                   </div>
                   <DashFilters
                     :defaultData="pendingDefaultData"
-                    :radioisDisabled="true"
+                    :isPending="true"
                     :img="'./image/kpi-chart-tip.png'"
                     @FilterSearch="GetPendingEcharts"
                   ></DashFilters>
@@ -1231,7 +1245,7 @@ const handleGuide = () => {
                 <BarChart
                   ref="seller_chart_CO2_destination"
                   :BarData="destinationObj"
-                  v-vloading="DestinationLoading"
+                  v-vloading="destinationLoading"
                   style="height: 250px"
                   :isRevenue="true"
                   save-image-name="CO2e Emission by Destination (Top 10)"
@@ -1268,6 +1282,7 @@ const handleGuide = () => {
                     :defaultData="recentDefaultData"
                     @FilterSearch="getTableData"
                     :isRecent="true"
+                    :threeMonthsInterval="true"
                   ></DashFilters>
                 </div>
               </template>

src/views/Dashboard/src/DashboardView.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { ref, onMounted, reactive } from 'vue'
-import QuickCalendarDate from '@/components/DateRange/src/components/QuickCalendarDate.vue'
 import { VueDraggable } from 'vue-draggable-plus'
 import PieChart from './components/PieChart.vue'
 import SellerChart from './components/SellerChart.vue'

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

@@ -7,7 +7,7 @@ const props = defineProps({
   defaultData: {
     type: Object
   },
-  radioisDisabled: {
+  isPending: {
     type: Boolean,
     default: false
   },
@@ -30,17 +30,13 @@ const props = defineProps({
   isShowTransportModeGuide: {
     type: Boolean,
     default: false
+  },
+  threeMonthsInterval: {
+    type: Boolean,
+    default: false
   }
 })
 
-const defaultfiltersData = ref(props.defaultData)
-watch(
-  () => props.defaultData,
-  (current) => {
-    defaultfiltersData.value = current
-  }
-)
-const isDisabled = ref(false)
 const checkboxGroup1 = ref(['All'])
 const CheckboxGroup2 = ref('ETD')
 const CheckboxGroup3 = ref('Invoice Issue Date')
@@ -48,11 +44,9 @@ const filters_visible = ref(false)
 const shipper = ref(['All', 'Air', 'Sea', 'Road', 'Rail'])
 const shipper_two = ref(['ETD', 'ETA'])
 const shipper_three = ref(['Invoice Issue Date'])
-const DashDate = ref()
-DashDate.value = []
+const DashDate = ref([])
 const startDate = ref()
 const EndDate = ref()
-let dashboardObj: any = {}
 
 const checkboxDisabled = computed(() => {
   if (props.isContainer && !props.isETDToETA) {
@@ -61,40 +55,82 @@ const checkboxDisabled = computed(() => {
     return false
   }
 })
-onMounted(() => {
-  getdefaultdata()
-})
-const getdefaultdata = () => {
-  checkboxGroup1.value = defaultfiltersData.value?.transportation
-  CheckboxGroup2.value = defaultfiltersData.value?.date_type
-  if (defaultfiltersData.value?.date_start == '') {
-    DashDate.value = []
-    isDisabled.value = true
+// onMounted(() => {
+//   getdefaultdata()
+// })
+
+const emit = defineEmits(['FilterSearch'])
+const timeRange = ref([])
+const DateChange = (value: any) => {
+  timeRange.value = value
+}
+const DateRangeSearch = () => {
+  let date = { date_start: '', date_end: '' }
+  if (!props.isPending) {
+    date = props.isContainer
+      ? {
+          date_start: dayjs(startDate.value).format('MM/YYYY'),
+          date_end: dayjs(EndDate.value).format('MM/YYYY')
+        }
+      : {
+          date_start: dayjs(timeRange.value[0]).format('MM/DD/YYYY'),
+          date_end: dayjs(timeRange.value[1]).format('MM/DD/YYYY')
+        }
+  }
+  const data = {
+    transportation: checkboxGroup1.value,
+    date_type: CheckboxGroup2.value,
+    date_start: date.date_start,
+    date_end: date.date_end
+  }
+  emit('FilterSearch', data)
+  filters_visible.value = false
+}
+const getdefaultdata = (data: any, isReset: boolean = false) => {
+  checkboxGroup1.value = data?.transportation
+  CheckboxGroup2.value = data?.date_type
+
+  if (props.isContainer) {
+    // 容器模式：固定12个月范围（含当前月）
+    startDate.value = dayjs().subtract(12, 'month').format('YYYY-MM')
+    EndDate.value = dayjs().format('YYYY-MM')
   } else {
-    if (props.isContainer) {
-      startDate.value = defaultfiltersData.value?.date_start_two
-      EndDate.value = defaultfiltersData.value?.date_end_two
-    } else {
-      DashDate.value = [
-        dayjs(defaultfiltersData.value?.date_start_two),
-        dayjs(defaultfiltersData.value?.date_end_two)
-      ]
-    }
-    if (props.isContainer) {
-      dashboardObj.date_start = defaultfiltersData.value?.date_start
-      dashboardObj.date_start_two = defaultfiltersData.value?.date_start_two
-      dashboardObj.date_end = defaultfiltersData.value?.date_end
-      dashboardObj.date_end_two = defaultfiltersData.value?.date_end_two
+    if (props.isPending) {
+      DashDate.value = ['', '']
     } else {
-      dashboardObj.date_start = dayjs(DashDate.value[0]).format('MM/DD/YYYY')
-      dashboardObj.date_start_two = dayjs(DashDate.value[0]).format('YYYY-MM-DD')
-      dashboardObj.date_end = dayjs(DashDate.value[1]).format('MM/DD/YYYY')
-      dashboardObj.date_end_two = dayjs(DashDate.value[1]).format('YYYY-MM-DD')
+      const monthsInterval = props.threeMonthsInterval ? 3 : 12
+
+      let start = dayjs().subtract(monthsInterval, 'month').startOf('month')
+      let end = dayjs()
+
+      // isRecent 模式下，结束时间延后一个月
+      if (props.isRecent) {
+        end = dayjs().add(1, 'month')
+      }
+
+      DashDate.value = [start, end]
     }
+    timeRange.value = DashDate.value
+  }
+  if (!isReset) {
+    DateRangeSearch()
   }
-  dashboardObj.transportation = checkboxGroup1.value
-  dashboardObj.date_type = CheckboxGroup2.value
 }
+watch(
+  () => props.defaultData,
+  (value) => {
+    if (value && Object.keys(value).length) {
+      nextTick(() => {
+        getdefaultdata(value)
+      })
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
 const changeCheckboxGroup1 = (val: any) => {
   if (val.length == 4) {
     checkboxGroup1.value = ['All']
@@ -108,18 +144,8 @@ const changeCheckboxGroup1 = (val: any) => {
       checkboxGroup1.value.splice(val.indexOf('All'), 1)
     }
   }
-  dashboardObj.transportation = checkboxGroup1.value
-}
-const changeCheckboxGroup2 = (val: any) => {
-  dashboardObj.date_type = val
-}
-const emit = defineEmits(['FilterSearch'])
-const DateChange = (value: any) => {
-  dashboardObj.date_start = value[0]
-  dashboardObj.date_start_two = dayjs(value[0]).format('YYYY-MM-DD')
-  dashboardObj.date_end = value[1]
-  dashboardObj.date_end_two = dayjs(value[1]).format('YYYY-MM-DD')
 }
+
 const StartChange = (val: any) => {
   if (!props.isETDToETA) {
     const nextMonth = new Date(val)
@@ -128,14 +154,6 @@ const StartChange = (val: any) => {
     let current = currentYear + '-' + currentMonth
     EndDate.value = current
   }
-  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
-  dashboardObj.date_end_two = date2_two
 }
 const EndChange = (val: any) => {
   if (!props.isETDToETA) {
@@ -145,23 +163,10 @@ const EndChange = (val: any) => {
     let current = currentYear + '-' + currentMonth
     startDate.value = current
   }
-  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
-  dashboardObj.date_end_two = date2_two
 }
 // 清除
 const clearrest = () => {
-  getdefaultdata()
-}
-// 查询
-const DateRangeSearch = () => {
-  emit('FilterSearch', dashboardObj)
-  filters_visible.value = false
+  getdefaultdata({}, true)
 }
 
 import { useThemeStore } from '@/stores/modules/theme'
@@ -231,11 +236,7 @@ const guideStore = useGuideStore()
           </el-radio-group>
         </div>
         <div class="filter_filter" v-else>
-          <el-radio-group
-            v-model="CheckboxGroup2"
-            @change="changeCheckboxGroup2"
-            :disabled="props.radioisDisabled"
-          >
+          <el-radio-group v-model="CheckboxGroup2" :disabled="props.isPending">
             <el-radio-button v-for="item in shipper_two" :key="item" :value="item" :label="item">
             </el-radio-button>
           </el-radio-group>
@@ -274,7 +275,7 @@ const guideStore = useGuideStore()
             v-else
             @DateChange="DateChange"
             :Date="DashDate"
-            :isDisabled="isDisabled"
+            :isDisabled="isPending"
           ></QuickCalendarDate>
         </div>
       </div>