feat添加首页筛选

src/api/module/common.ts

@@ -114,7 +114,7 @@ export const GetETDEcharts = (params: any, config: any) => {
   return HttpAxios.get(
     `${baseUrl}`,
     {
-      action: 'main_report',
+      action: 'main_report_etd',
       r_type: 'r1',
       ...params
     },

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

@@ -1,19 +1,21 @@
 <script lang="ts" setup>
-import dayjs, { Dayjs } from 'dayjs'
-import { ref, watch } from 'vue'
+import dayjs from 'dayjs'
+import { ref, watch, computed } from 'vue'
+import moment from 'moment'
 
-// type RangeValue = [Dayjs, Dayjs]
-// const ETDDate = ref<RangeValue>()
 const props = defineProps({
   CalendarWidth: {
     type: String,
-    default: '368px'
+    default: '250px'
   },
   CalendarTitle: {
     type: String
   },
   Date: {
     type: Array
+  },
+  isDisabled: {
+    type: Array
   }
 })
 const ETDDate = ref(props.Date)
@@ -25,29 +27,48 @@ watch(
 )
 const emit = defineEmits(['DateRangeChange', 'DateChange'])
 const open = ref(false)
-const Disabled = ref([false, false])
 const isShowExtra = ref(true)
 
+const DateList = ref()
+const daterange = (val: any) => {
+  if (DateList.value.length == 2 && val != undefined) {
+    emit('DateChange', DateList.value)
+  }
+}
 const ChangeToday = (val: any) => {
   if (val == 'Earliest') {
     // ETDDate.value = [dayjs(), dayjs()]
     ETDDate.value[0] = dayjs()
-    open.value = false
+    const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
+    DateList.value[0] = date1
+    daterange(DateList.value[1])
   } else {
     ETDDate.value[1] = dayjs()
-    open.value = false
-    // ETDDate.value = [dayjs(), dayjs()]
+    const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
+    DateList.value[1] = date1
+    daterange(DateList.value[0])
   }
 }
-const handleCalendarOpen = () => {
+const handleCalendarOpen = (date: any) => {
   open.value = !open.value
+  if (open.value == false) {
+    if (date.length != 2) {
+      DateList.value = []
+      ETDDate.value = []
+    }
+  }
 }
 const Earliest = () => {
-  Disabled.value = [true, false]
-  ETDDate.value = [dayjs('Oct-05-2009'), dayjs()]
+  ETDDate.value[0] = dayjs('Oct-05-2009')
+  const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
+  DateList.value[0] = date1
+  daterange(DateList.value[1])
 }
 const Latest = () => {
-  Disabled.value = [false, true]
+  ETDDate.value[1] = dayjs()
+  const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
+  DateList.value[1] = date1
+  daterange(DateList.value[0])
 }
 const changeRangeData = (value: any) => {
   if (value != '') {
@@ -78,10 +99,16 @@ const rangePresets = ref([
   },
   { label: 'This Year', value: [dayjs().startOf('year'), dayjs().endOf('year')] }
 ])
+const placeholder = computed(() => {
+  if (props.isDisabled) {
+    return ['No Start Limit', 'No End Limit']
+  } else {
+    return ['Start Time', 'End Time']
+  }
+})
 </script>
 <template>
   <div>
-    <div class="ETD_title">{{ props.CalendarTitle }}</div>
     <a-range-picker
       separator="To"
       :showToday="false"
@@ -89,12 +116,12 @@ const rangePresets = ref([
       :style="{ width: props.CalendarWidth }"
       :open="open"
       :presets="rangePresets"
-      :disabled="Disabled"
+      :disabled="props.isDisabled"
       @change="changeRangeData"
-      :placeholder="['Start Time', 'End Time']"
+      :placeholder="placeholder"
       format="MMM-DD-YYYY"
       valueFormat="MM/DD/YYYY"
-      @openChange="handleCalendarOpen"
+      @openChange="handleCalendarOpen(ETDDate)"
       @panelChange="handlePanelChange"
       v-model:value="ETDDate"
     >
@@ -148,4 +175,7 @@ const rangePresets = ref([
   margin-bottom: 4px;
   color: var(--color-neutral-2);
 }
+:deep(.ant-picker-range) {
+  padding: 4px 8px;
+}
 </style>

src/components/DateRange/src/components/QuickMonth.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import moment from 'moment'
+
+const props = defineProps({
+  MonthStartDate: {
+    type: String
+  },
+  MonthEndDate: {
+    type: String
+  },
+  isETDToETA: {
+    type: Boolean,
+    default: false
+  }
+})
+const startDate = ref(props.MonthStartDate)
+const EndDate = ref(props.MonthEndDate)
+watch(
+  () => props.MonthStartDate,
+  (current) => {
+    startDate.value = current
+  }
+)
+watch(
+  () => props.MonthEndDate,
+  (current) => {
+    EndDate.value = current
+  }
+)
+const emit = defineEmits(['DateChange'])
+const StartChange = (val: any) => {
+  if (!props.isETDToETA) {
+    const nextMonth = new Date(val)
+    let currentYear = nextMonth.getFullYear() + 1
+    let currentMonth = nextMonth.getMonth() + 2
+    let current = currentYear + '-' + currentMonth
+    EndDate.value = current
+  }
+  const date1 = moment(String(val)).format('MM/YYYY')
+  const date2 = moment(EndDate.value).format('MM/YYYY')
+  emit('DateChange', date1, date2)
+}
+const EndChange = (val: any) => {
+  if (!props.isETDToETA) {
+    const nextMonth = new Date(val)
+    let currentYear = nextMonth.getFullYear() - 1
+    let currentMonth = nextMonth.getMonth()
+    let current = currentYear + '-' + currentMonth
+    startDate.value = current
+  }
+  const date1 = moment(startDate.value).format('MM/YYYY')
+  const date2 = moment(String(val)).format('MM/YYYY')
+  emit('DateChange', date1, date2)
+}
+</script>
+
+<template>
+  <div>
+    <el-date-picker
+      style="width: 120px"
+      v-model="startDate"
+      format="MMM-YYYY"
+      type="month"
+      @change="StartChange"
+      :clearable="false"
+      placeholder="Start month"
+      placement="bottom"
+    />
+    <el-date-picker
+      style="width: 120px; margin-left: 8px"
+      v-model="EndDate"
+      format="MMM-YYYY"
+      type="month"
+      @change="EndChange"
+      :clearable="false"
+      placeholder="End month"
+      placement="bottom"
+    />
+  </div>
+</template>

src/components/ScoringGrade/components/DialogUe.vue

@@ -11,18 +11,18 @@ const props = defineProps({
 const checkboxGroup1 = ref([])
 const checkboxGroup2 = ref([])
 const evaluate = [
-  'Lacking in functionality',
-  'Inaccurate data',
-  'Unclear information',
-  'Difficult to use',
-  'Poor system performance'
+  'Functionality',
+  'Data accuracy',
+  'Look and feel',
+  'Ease of use',
+  'Website performance'
 ]
 const happyevaluate = [
-  'Complete funtionality',
-  'Accurate data',
-  'Clear information',
-  'Easy to use',
-  'Good performance'
+  'Functionality',
+  'Data accuracy',
+  'Look and feel',
+  'Ease of use',
+  'Website performance'
 ]
 const emits = defineEmits(['changeAngryDetails', 'changeSmileRadio', 'changeHappybuttonbox'])
 const changebuttonbox = () => {
@@ -47,27 +47,27 @@ interface smileAspectsItem {
 const smileAspects = ref<smileAspectsItem[]>([])
 smileAspects.value = [
   {
-    title: 'Complete funtionality',
+    title: 'Functionality',
     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
     radio: ''
   },
   {
-    title: 'Accurate data',
+    title: 'Data accuracy',
     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
     radio: ''
   },
   {
-    title: 'Clear information',
+    title: 'Look and feel',
     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
     radio: ''
   },
   {
-    title: 'Easy to use',
+    title: 'Ease of use',
     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
     radio: ''
   },
   {
-    title: 'System Performance',
+    title: 'Website performance',
     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
     radio: ''
   }

src/styles/Antdui.scss

@@ -69,4 +69,8 @@
   }
  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {
   color: var(--color-neutral-3);
- }
+ }
+.ant-picker-dropdown .ant-picker-decade-panel,.ant-picker-dropdown .ant-picker-year-panel,.ant-picker-dropdown .ant-picker-quarter-panel,.ant-picker-dropdown .ant-picker-month-panel,.ant-picker-dropdown .ant-picker-week-panel,.ant-picker-dropdown .ant-picker-date-panel,.ant-picker-dropdown .ant-picker-time-panel {
+  
+  border-left: 1px solid var(--color-border);
+}

src/styles/elementui.scss

@@ -704,4 +704,7 @@ div .el-loading-spinner .path {
 }
 div .ShowAlerIcon {
   width: 342px;
+}
+div .dash_popver {
+  border-radius: 12px !important;
 }

src/views/Dashboard/src/DashboardView.vue

@@ -8,9 +8,9 @@ import BarChart from './components/BarChart.vue'
 import RecentStatus from './components/RecentStatus.vue'
 import ScoringSystem from './components/ScoringSystem.vue'
 import TopMap from './components/TopMap.vue'
+import DashFilters from './components/DashFiters.vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import dayjs from 'dayjs'
 
 const router = useRouter()
 const value = ref('All')
@@ -26,25 +26,6 @@ interface ManagementItem {
   title2: string
 }
 const Management = ref<ManagementItem[]>([])
-const BookingSearch = ref()
-const checkboxGroup1 = ref(['All'])
-const changeCheckboxGroup2 = ref('ETD')
-const shipper = ref(['All', 'Air', 'Sea', 'Road'])
-const shipper_two = ref(['ETD', 'ETA'])
-const changeCheckboxGroup1 = (val: any) => {
-  if (val.length == 3) {
-    checkboxGroup1.value = ['All']
-  }
-  if (val.length == 0) {
-    checkboxGroup1.value = ['All']
-  } else if (val.indexOf('All') != -1) {
-    if (val.indexOf('All') == 1 && val.length == 2) {
-      checkboxGroup1.value = ['All']
-    } else {
-      checkboxGroup1.value.splice(val.indexOf('All'), 1)
-    }
-  }
-}
 
 const changeCancel = (id: any) => {
   Management.value[id - 1].switchValue = false
@@ -62,117 +43,94 @@ const handleTabClick = (tab: any) => {
     isShowtitle1.value = false
   }
 }
-const DashDate = ref()
+const KPIDefaulteData = ref()
+const PendingDefaulteData = ref()
+const RecentDefaulteData = ref()
+const ETDDefaulteData = ref()
+const ContainerefaultData = ref()
+const Top10DefaultData = ref()
+const Co2OriginDefaultData = ref()
+const Co2DestinationDefaultData = ref()
 // 获取首页数据
 let dashboardObj: any = {}
-const GetDashboardData = (value: any, is_default: any) => {
+const GetDashboardData = () => {
   $api
     .getDashboardFilters({})
     .then((res: any) => {
       if (res.code == 200) {
-        DashDate.value = [dayjs(res.data.date_start), dayjs(res.data.date_end)]
-        BookingSearch.value = res.data.customer
-        changeCheckboxGroup2.value = res.data.date_type
-        dashboardObj.date_start = DashDate.value[0].format('MM/DD/YYYY')
-        dashboardObj.date_end = DashDate.value[1].format('MM/DD/YYYY')
-        dashboardObj.date_type = changeCheckboxGroup2.value
-        dashboardObj.customer = BookingSearch.value
+        //给默认筛选条件赋值
+        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
       }
     })
     .finally(() => {
       nextTick(() => {
-        $api
-          .GetDashboardData({
-            cp: pageInfo.value.pageNo,
-            ps: pageInfo.value.pageSize,
-            rc: -1,
-            is_default: is_default,
-            ...value
-          })
-          .then((res: any) => {
-            if (res.code === 200) {
-              pageInfo.value.total = Number(res.data.rc)
-              Management.value = res.data.Management
-              RecentStatusList.value = res.data.searchData
-            }
-          })
+        GetKpiData(KPIDefaulteData.value)
+        GetPendingEcharts(PendingDefaulteData.value)
+        getTableData(false, RecentDefaulteData.value)
+        GetETDEcharts(ETDDefaulteData.value)
+        GetContainerCountEcharts(ContainerefaultData.value)
+        GetTop10ODEcharts(Top10DefaultData.value)
+        GetCo2EmissionEcharts(Co2OriginDefaultData.value)
+        GetCo2DestinationEcharts(Co2DestinationDefaultData.value)
       })
     })
 }
 // 获取表单数据
-const getTableData = () => {
-  let is_default: any = ''
-  if (Object.keys(dashboardObj).length === 0) {
-    is_default = 'yes'
-  } else {
-    is_default = 'no'
-  }
+const getTableData = (isPage: any, val: any) => {
+  dashboardObj.RecentDefaultData = val
+  const rc = isPage ? pageInfo.value.total : -1
   $api
     .GetDashboardData({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
-      rc: pageInfo.value.total,
-      is_default: is_default,
-      ...dashboardObj
+      rc,
+      ...val
     })
     .then((res: any) => {
       if (res.code === 200) {
+        pageInfo.value.total = Number(res.data.rc)
         Management.value = res.data.Management
         RecentStatusList.value = res.data.searchData
       }
     })
 }
-const DateChange = (value: any) => {
-  dashboardObj.date_start = value[0]
-  dashboardObj.date_end = value[1]
-  dashboardObj.date_type = changeCheckboxGroup2.value
-  GetDashboardData(dashboardObj, 'no')
-}
-// 获取ETD/ETA 图表数据
-const ETDobj = reactive({
+const KPIobj = reactive({
   ETD_Title: '',
   ETDList: [],
   ETD_Radius: [],
   download_name: ''
 })
-const ETDLoading = ref(true)
-const GetETDEcharts = () => {
-  const currentDate = new Date()
-  let tenyear = currentDate.getFullYear()
-  let tenmonth = currentDate.getMonth() - 11
-  if (tenmonth < 0) {
-    tenyear -= 1
-    tenmonth += 11
-  }
-  $api
-    .GetETDEcharts({
-      e_date: currentDate.getMonth() + 1 + '/' + currentDate.getFullYear(),
-      b_date: tenmonth + '/' + tenyear
-    })
-    .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
-      }
-    })
-    .finally(() => {
-      ETDLoading.value = false
-    })
-}
-// 获取KPI Departure图表数据
-const KPIobj = reactive({
+const Arrivalobj = reactive({
   ETD_Title: '',
   ETDList: [],
   ETD_Radius: [],
   download_name: ''
 })
 const KPILoading = ref(true)
-const GetKPIEcharts = () => {
+const KPIArrivalLoading = ref(true)
+//查询KPI
+const GetKpiData = (val: any) => {
+  dashboardObj.KPIDefaulteData = val
+  // 获取KPI Departure图表数据
   $api
     .GetKPIEcharts({
-      r_type: 'atd_r4'
+      r_type: 'atd_r4',
+      ...val
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -185,19 +143,11 @@ const GetKPIEcharts = () => {
     .finally(() => {
       KPILoading.value = false
     })
-}
-// 获取KPI Arrival图表数据
-const Arrivalobj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const KPIArrivalLoading = ref(true)
-const GetKPIArrivalEcharts = () => {
+  // 获取KPI Arrival图表数据
   $api
     .GetKPIEcharts({
-      r_type: 'ata_r3'
+      r_type: 'ata_r3',
+      ...val
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -211,18 +161,28 @@ const GetKPIArrivalEcharts = () => {
       KPIArrivalLoading.value = false
     })
 }
-// 获取Pending Departure图表数据
 const Pendingobj = reactive({
   ETD_Title: '',
   ETDList: [],
   ETD_Radius: [],
   download_name: ''
 })
+const PendingArrivalobj = reactive({
+  ETD_Title: '',
+  ETDList: [],
+  ETD_Radius: [],
+  download_name: ''
+})
 const PendingLoading = ref(true)
-const GetPendingEcharts = () => {
+const PendingArrivalLoading = ref(true)
+// 查询Pending
+const GetPendingEcharts = (val: any) => {
+  dashboardObj.PendingDefaultData = val
+  // 获取Pending Departure图表数据
   $api
     .GetPendingEcharts({
-      r_type: 'r4'
+      r_type: 'r4',
+      ...val
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -235,19 +195,11 @@ const GetPendingEcharts = () => {
     .finally(() => {
       PendingLoading.value = false
     })
-}
-// 获取Pending Arrival图表数据
-const PendingArrivalobj = reactive({
-  ETD_Title: '',
-  ETDList: [],
-  ETD_Radius: [],
-  download_name: ''
-})
-const PendingArrivalLoading = ref(true)
-const GetPendingArrivalEcharts = () => {
+  // 获取Pending Arrival图表数据
   $api
     .GetPendingEcharts({
-      r_type: 'r3'
+      r_type: 'r3',
+      ...val
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -261,6 +213,32 @@ const GetPendingArrivalEcharts = () => {
       PendingArrivalLoading.value = false
     })
 }
+const ETDobj = reactive({
+  ETD_Title: '',
+  ETDList: [],
+  ETD_Radius: [],
+  download_name: ''
+})
+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
+      }
+    })
+    .finally(() => {
+      ETDLoading.value = false
+    })
+}
 // 获取ContainerCount
 const containerObj = reactive({
   bar_title: '',
@@ -270,21 +248,11 @@ const containerObj = reactive({
   interval: 0,
   download_name: ''
 })
-const containerType = ref([])
 const containerLoading = ref(true)
 const GetContainerCountEcharts = (val: any) => {
-  const currentDate = new Date()
-  let tenyear = currentDate.getFullYear()
-  let tenmonth = currentDate.getMonth() - 11
-  if (tenmonth < 0) {
-    tenyear -= 1
-    tenmonth += 11
-  }
-  containerType.value = []
+  dashboardObj.ContainerefaultData = val
   $api
     .GetContainerCountEcharts({
-      e_date: currentDate.getMonth() + 1 + '/' + currentDate.getFullYear(),
-      b_date: tenmonth + '/' + tenyear,
       ...val
     })
     .then((res: any) => {
@@ -295,16 +263,50 @@ const GetContainerCountEcharts = (val: any) => {
         containerObj.Max = res.data.Max
         containerObj.interval = res.data.interval
         containerObj.download_name = res.data.download_name
-        for (let i = 0; i < res.data.ContainerCounSeries.length; i++) {
-          containerType.value.push(res.data.ContainerCounSeries[i].name)
-        }
-        containerType.value.push('All')
       }
     })
     .finally(() => {
       containerLoading.value = false
     })
 }
+const topdestinationinType = ref()
+const toporiginType = ref()
+//获取Top10 Origin/Destination
+const Top10Obj = reactive({
+  OriginData: [],
+  DestinationData: []
+})
+const Top1OInterval = reactive({
+  Max: 0,
+  interval: 0
+})
+const Top1OInterval_dest = reactive({
+  Max: 0,
+  interval: 0
+})
+const TopOriginLoading = ref(true)
+const GetTop10ODEcharts = (val: any) => {
+  dashboardObj.Top10faultData = val
+  $api
+    .GetTop10ODEcharts({
+      ...val
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        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
+        topdestinationinType.value = res.data.topdestinationinType
+        toporiginType.value = res.data.toporiginType
+      }
+    })
+    .finally(() => {
+      TopOriginLoading.value = false
+    })
+}
 //获取CO2 Origin
 const EmissionLoading = ref(true)
 const EmissionObj = reactive({
@@ -315,9 +317,12 @@ const EmissionObj = reactive({
   interval: 0,
   download_name: ''
 })
-const GetCo2EmissionEcharts = () => {
+const GetCo2EmissionEcharts = (val: any) => {
+  dashboardObj.OriginCo2Top10faultData = val
   $api
-    .GetCo2EmissionEcharts({})
+    .GetCo2EmissionEcharts({
+      ...val
+    })
     .then((res: any) => {
       if (res.code === 200) {
         EmissionObj.bar_title = res.data.ContainerCount_Title
@@ -342,9 +347,12 @@ const DestinationObj = reactive({
   download_name: ''
 })
 const DestinationLoading = ref(true)
-const GetCo2DestinationEcharts = () => {
+const GetCo2DestinationEcharts = (val: any) => {
+  dashboardObj.DestinationCo2Top10faultData = val
   $api
-    .GetCo2DestinationEcharts({})
+    .GetCo2DestinationEcharts({
+      ...val
+    })
     .then((res: any) => {
       if (res.code === 200) {
         DestinationObj.bar_title = res.data.ContainerCount_Title
@@ -359,61 +367,9 @@ const GetCo2DestinationEcharts = () => {
       DestinationLoading.value = false
     })
 }
-const topdestinationinType = ref()
-const toporiginType = ref()
-//获取Top10 Origin/Destination
-const Top10Obj = reactive({
-  OriginData: [],
-  DestinationData: []
-})
-const Top1OInterval = reactive({
-  Max: 0,
-  interval: 0
-})
-const Top1OInterval_dest = reactive({
-  Max: 0,
-  interval: 0
-})
-const TopOriginLoading = ref(true)
-const GetTop10ODEcharts = () => {
-  $api
-    .GetTop10ODEcharts({})
-    .then((res: any) => {
-      if (res.code === 200) {
-        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
-        topdestinationinType.value = res.data.topdestinationinType
-        toporiginType.value = res.data.toporiginType
-      }
-    })
-    .finally(() => {
-      TopOriginLoading.value = false
-    })
-}
 onMounted(() => {
-  GetDashboardData(dashboardObj, 'yes')
-  GetETDEcharts()
-  GetKPIEcharts()
-  GetKPIArrivalEcharts()
-  GetContainerCountEcharts(container_type)
-  GetCo2EmissionEcharts()
-  GetCo2DestinationEcharts()
-  GetTop10ODEcharts()
-  GetPendingEcharts()
-  GetPendingArrivalEcharts()
+  GetDashboardData()
 })
-let container_type: any = {
-  container_type: 'All'
-}
-const changeType = (val: any) => {
-  container_type.container_type = val
-  GetContainerCountEcharts(container_type)
-  GetDashboardData(dashboardObj, 'no')
-}
 
 // Save Layout
 const SaveLayout = () => {
@@ -456,11 +412,6 @@ const SaveFilters = () => {
       }
     })
 }
-//输入框失焦时查询数据
-const SearchCustomer = () => {
-  dashboardObj.customer = BookingSearch.value
-  GetDashboardData(dashboardObj, 'no')
-}
 //ETD to ETA(DAYS)点击跳转
 const pie_chart_ETD = ref()
 const pie_chart_pending_arrival = ref()
@@ -794,43 +745,6 @@ const ClickParams = (val: any) => {
         </el-popover>
       </div>
     </div>
-    <!-- 筛选 -->
-    <div class="filters">
-      <div style="display: flex; align-items: center">
-        <div class="tips_filter">
-          <el-checkbox-group
-            @change="changeCheckboxGroup1"
-            v-model="checkboxGroup1"
-            size="large"
-            style="height: 32px"
-          >
-            <el-checkbox-button v-for="item in shipper" :key="item" :value="item">
-              {{ item }}
-            </el-checkbox-button>
-          </el-checkbox-group>
-        </div>
-        <div class="tips_filter">
-          <el-radio-group v-model="changeCheckboxGroup2">
-            <el-radio-button v-for="item in shipper_two" :key="item" :value="item" :label="item">
-            </el-radio-button>
-          </el-radio-group>
-        </div>
-        <div class="tips_filter">
-          <QuickCalendarDate @DateChange="DateChange" :Date="DashDate"></QuickCalendarDate>
-        </div>
-      </div>
-      <div class="filters_right">
-        <el-input placeholder="Customer" v-model="BookingSearch" @blur="SearchCustomer">
-          <template #prefix>
-            <span class="iconfont_icon">
-              <svg class="iconfont" aria-hidden="true">
-                <use xlink:href="#icon-icon_search_b"></use>
-              </svg>
-            </span>
-          </template>
-        </el-input>
-      </div>
-    </div>
     <!-- 图表 -->
     <div class="echarts">
       <VueDraggable
@@ -855,7 +769,11 @@ const ClickParams = (val: any) => {
               <template #header>
                 <div class="Title_flex">
                   {{ item.title }}
-                  <el-tooltip
+                  <DashFilters
+                    :defaultData="KPIDefaulteData"
+                    @FilterSearch="GetKpiData"
+                  ></DashFilters>
+                  <!-- <el-tooltip
                     effect="dark"
                     :offset="6"
                     :content="item.text"
@@ -866,7 +784,7 @@ const ClickParams = (val: any) => {
                         <use xlink:href="#icon-icon_info_b"></use>
                       </svg>
                     </span>
-                  </el-tooltip>
+                  </el-tooltip> -->
                 </div>
               </template>
               <template #content>
@@ -899,13 +817,11 @@ const ClickParams = (val: any) => {
               <template #header>
                 <div class="Title_flex">
                   {{ item.title }}
-                  <el-tooltip :offset="6" effect="dark" :content="item.text" placement="bottom">
-                    <span class="iconfont_icon iconfont_icon_tip">
-                      <svg class="iconfont" aria-hidden="true">
-                        <use xlink:href="#icon-icon_info_b"></use>
-                      </svg>
-                    </span>
-                  </el-tooltip>
+                  <DashFilters
+                    :defaultData="PendingDefaulteData"
+                    :radioisDisabled="true"
+                    @FilterSearch="GetKpiData"
+                  ></DashFilters>
                 </div>
               </template>
               <template #content>
@@ -943,18 +859,11 @@ const ClickParams = (val: any) => {
               <template #header>
                 <div class="Title_flex">
                   {{ item.title }}
-                  <el-tooltip
-                    :offset="6"
-                    effect="dark"
-                    :content="item.text"
-                    placement="bottom-start"
-                  >
-                    <span class="iconfont_icon iconfont_icon_tip">
-                      <svg class="iconfont" aria-hidden="true">
-                        <use xlink:href="#icon-icon_info_b"></use>
-                      </svg>
-                    </span>
-                  </el-tooltip>
+                  <DashFilters
+                    :defaultData="RecentDefaulteData"
+                    @FilterSearch="getTableData"
+                    :isRecent="true"
+                  ></DashFilters>
                 </div>
               </template>
               <template #content>
@@ -968,8 +877,8 @@ const ClickParams = (val: any) => {
                     layout="prev, pager, next"
                     :pager-count="3"
                     :total="pageInfo.total"
-                    @size-change="getTableData"
-                    @current-change="getTableData"
+                    @size-change="getTableData(true, RecentDefaulteData)"
+                    @current-change="getTableData(true, RecentDefaulteData)"
                   />
                 </div>
               </template>
@@ -984,18 +893,12 @@ const ClickParams = (val: any) => {
               <template #header>
                 <div class="Title_flex">
                   {{ item.title }}
-                  <el-tooltip
-                    :offset="6"
-                    effect="dark"
-                    :content="item.text"
-                    placement="bottom-start"
-                  >
-                    <span class="iconfont_icon iconfont_icon_tip">
-                      <svg class="iconfont" aria-hidden="true">
-                        <use xlink:href="#icon-icon_info_b"></use>
-                      </svg>
-                    </span>
-                  </el-tooltip>
+                  <DashFilters
+                    :defaultData="ETDDefaulteData"
+                    @FilterSearch="GetETDEcharts"
+                    :isETDToETA="true"
+                    :isContainer="true"
+                  ></DashFilters>
                 </div>
               </template>
               <template #content>
@@ -1019,34 +922,11 @@ const ClickParams = (val: any) => {
                 <div class="Title_flex" style="justify-content: space-between">
                   <div class="Title_flex">
                     {{ item.title }}
-                    <el-tooltip
-                      :offset="6"
-                      effect="dark"
-                      :content="item.text"
-                      placement="bottom-start"
-                    >
-                      <span class="iconfont_icon iconfont_icon_tip">
-                        <svg class="iconfont" aria-hidden="true">
-                          <use xlink:href="#icon-icon_info_b"></use>
-                        </svg>
-                      </span>
-                    </el-tooltip>
-                  </div>
-                  <div style="margin-right: 50px; display: flex; align-items: center">
-                    <span style="font-weight: 400; font-size: 14px; margin-right: 4px">Type</span>
-                    <el-select
-                      v-model="value"
-                      placeholder="Select"
-                      style="width: 100px"
-                      @change="changeType"
-                    >
-                      <el-option
-                        v-for="item in containerType"
-                        :key="item"
-                        :label="item"
-                        :value="item"
-                      />
-                    </el-select>
+                    <DashFilters
+                      :defaultData="ContainerefaultData"
+                      @FilterSearch="GetContainerCountEcharts"
+                      :isContainer="true"
+                    ></DashFilters>
                   </div>
                 </div>
               </template>
@@ -1078,18 +958,10 @@ const ClickParams = (val: any) => {
                     <el-tab-pane :label="item.title1" name="first"></el-tab-pane>
                     <el-tab-pane :label="item.title2" name="second"></el-tab-pane>
                   </el-tabs>
-                  <el-tooltip
-                    :offset="6"
-                    effect="dark"
-                    :content="item.text"
-                    placement="bottom-start"
-                  >
-                    <span class="iconfont_icon iconfont_icon_tip">
-                      <svg class="iconfont" aria-hidden="true" style="vertical-align: 1px">
-                        <use xlink:href="#icon-icon_info_b"></use>
-                      </svg>
-                    </span>
-                  </el-tooltip>
+                  <DashFilters
+                    :defaultData="Top10DefaultData"
+                    @FilterSearch="GetTop10ODEcharts"
+                  ></DashFilters>
                 </div>
               </template>
               <template v-if="isShowtitle1" #content>
@@ -1136,18 +1008,10 @@ const ClickParams = (val: any) => {
               <template #header>
                 <div class="Title_flex">
                   {{ item.title }}
-                  <el-tooltip
-                    :offset="6"
-                    effect="dark"
-                    :content="item.text"
-                    placement="bottom-start"
-                  >
-                    <span class="iconfont_icon iconfont_icon_tip">
-                      <svg class="iconfont" aria-hidden="true">
-                        <use xlink:href="#icon-icon_info_b"></use>
-                      </svg>
-                    </span>
-                  </el-tooltip>
+                  <DashFilters
+                    :defaultData="Co2OriginDefaultData"
+                    @FilterSearch="GetCo2EmissionEcharts"
+                  ></DashFilters>
                 </div>
               </template>
               <template #content>
@@ -1171,18 +1035,10 @@ const ClickParams = (val: any) => {
               <template #header>
                 <div class="Title_flex">
                   {{ item.title }}
-                  <el-tooltip
-                    :offset="6"
-                    effect="dark"
-                    :content="item.text"
-                    placement="bottom-start"
-                  >
-                    <span class="iconfont_icon iconfont_icon_tip">
-                      <svg class="iconfont" aria-hidden="true">
-                        <use xlink:href="#icon-icon_info_b"></use>
-                      </svg>
-                    </span>
-                  </el-tooltip>
+                  <DashFilters
+                    :defaultData="Co2DestinationDefaultData"
+                    @FilterSearch="GetCo2DestinationEcharts"
+                  ></DashFilters>
                 </div>
               </template>
               <template #content>
@@ -1285,49 +1141,6 @@ const ClickParams = (val: any) => {
     color: var(--color-theme);
   }
 }
-:deep(.el-checkbox-button__inner) {
-  color: var(--tag-info-text-color);
-  font-size: var(--font-size-3);
-  font-weight: 400;
-  padding: 0;
-  width: 61px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--color-border);
-  margin-bottom: 8px;
-}
-:deep(.el-checkbox-button__inner:hover) {
-  color: var(--color-theme);
-  background-color: var(--color-btn-default-bg-hover);
-  border-color: var(--color-btn-default-bg-hover);
-}
-:deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
-  border-color: transparent;
-}
-:deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
-  border-left: 1px solid var(--color-border);
-  border-top-left-radius: var(--border-radius-6);
-  border-bottom-left-radius: var(--border-radius-6);
-}
-:deep(.el-checkbox-button:last-child .el-checkbox-button__inner) {
-  border-top-right-radius: var(--border-radius-6);
-  border-bottom-right-radius: var(--border-radius-6);
-}
-:deep(.el-checkbox-button.is-checked .el-checkbox-button__inner) {
-  color: #ffffff;
-  background-color: var(--color-theme);
-  border-color: var(--color-theme);
-  box-shadow: none;
-  font-weight: 700;
-}
-:deep(.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner) {
-  border-left-color: var(--color-theme);
-}
-:deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
-  border-color: var(--color-border);
-}
 .filters {
   display: flex;
   padding: 0 24px;
@@ -1412,6 +1225,8 @@ const ClickParams = (val: any) => {
 .Title_flex {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  width: 95%;
 }
 .iconfont_icon_tip {
   margin-left: 8px;

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

@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, computed } from 'vue'
+import dayjs from 'dayjs'
+
+const props = defineProps({
+  defaultData: {
+    type: Object
+  },
+  radioisDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isRecent: {
+    type: Boolean,
+    default: false
+  },
+  isETDToETA: {
+    type: Boolean,
+    default: false
+  },
+  isContainer: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const defaultfiltersData = ref(props.defaultData)
+watch(
+  () => props.defaultData,
+  (current) => {
+    defaultfiltersData.value = current
+  }
+)
+const isDisabled = ref([false, false])
+const checkboxGroup1 = ref(['All'])
+const CheckboxGroup2 = ref('ETD')
+const filters_visible = ref(false)
+const shipper = ref(['All', 'Air', 'Sea', 'Road'])
+const shipper_two = ref(['ETD', 'ETA'])
+const DashDate = ref()
+DashDate.value = []
+const MonthStartDate = ref('')
+const MonthEndDate = ref('')
+let dashboardObj: any = {}
+
+const checkboxDisabled = computed(() => {
+  if (props.isContainer && !props.isETDToETA) {
+    return true
+  } else {
+    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, true]
+  } else {
+    if (props.isContainer) {
+      MonthStartDate.value = defaultfiltersData.value?.date_start_two
+      MonthEndDate.value = defaultfiltersData.value?.date_end_two
+      console.log(MonthStartDate.value, MonthEndDate.value)
+    } 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_end = defaultfiltersData.value?.date_end
+    } else {
+      dashboardObj.date_start = dayjs(DashDate.value[0]).format('MM/DD/YYYY')
+      dashboardObj.date_end = dayjs(DashDate.value[1]).format('MM/DD/YYYY')
+    }
+  }
+  dashboardObj.transportation = checkboxGroup1.value
+  dashboardObj.date_type = CheckboxGroup2.value
+}
+const changeCheckboxGroup1 = (val: any) => {
+  if (val.length == 3) {
+    checkboxGroup1.value = ['All']
+  }
+  if (val.length == 0) {
+    checkboxGroup1.value = ['All']
+  } else if (val.indexOf('All') != -1) {
+    if (val.indexOf('All') == 1 && val.length == 2) {
+      checkboxGroup1.value = ['All']
+    } else {
+      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, date2: any) => {
+  if (props.isContainer) {
+    dashboardObj.date_start = value
+    dashboardObj.date_end = date2
+  } else {
+    dashboardObj.date_start = value[0]
+    dashboardObj.date_end = value[1]
+  }
+}
+// 清除
+const clearrest = () => {
+  getdefaultdata()
+}
+// 查询
+const DateRangeSearch = () => {
+  if (props.isRecent) {
+    emit('FilterSearch', false, dashboardObj)
+  } else {
+    emit('FilterSearch', dashboardObj)
+  }
+  filters_visible.value = false
+}
+</script>
+<template>
+  <div class="DashFilters">
+    <el-popover trigger="click" popper-class="dash_popver" :visible="filters_visible" :width="400">
+      <template #reference>
+        <el-button class="el-button--default" @click="filters_visible = !filters_visible">
+          <span class="iconfont_icon">
+            <svg class="iconfont" aria-hidden="true">
+              <use xlink:href="#icon-icon_filter_b"></use>
+            </svg>
+          </span>
+          Filters
+          <span class="iconfont_icon">
+            <svg class="iconfont" aria-hidden="true">
+              <use xlink:href="#icon-icon_dropdown_b"></use>
+            </svg>
+          </span>
+        </el-button>
+      </template>
+      <div class="Dash_title">Transport Mode</div>
+      <div class="filter_filter">
+        <el-checkbox-group
+          @change="changeCheckboxGroup1"
+          v-model="checkboxGroup1"
+          size="large"
+          :disabled="checkboxDisabled"
+        >
+          <el-checkbox-button v-for="item in shipper" :key="item" :value="item">
+            {{ item }}
+          </el-checkbox-button>
+        </el-checkbox-group>
+      </div>
+      <div class="Dash_title">
+        <div>Date Range</div>
+        <div v-if="props.isContainer && !props.isETDToETA" class="dash_tips">
+          The time range is fixed at 12 months.
+        </div>
+      </div>
+      <div class="dash_flex">
+        <div class="filter_filter">
+          <el-radio-group
+            v-model="CheckboxGroup2"
+            @change="changeCheckboxGroup2"
+            :disabled="props.radioisDisabled"
+          >
+            <el-radio-button v-for="item in shipper_two" :key="item" :value="item" :label="item">
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="filter_filter" style="margin-left: 8px">
+          <QuickMonth
+            v-if="props.isContainer"
+            :isETDToETA="props.isETDToETA"
+            @DateChange="DateChange"
+            :MonthStartDate="MonthStartDate"
+            :MonthEndDate="MonthEndDate"
+          ></QuickMonth>
+          <QuickCalendarDate
+            v-else
+            @DateChange="DateChange"
+            :Date="DashDate"
+            :isDisabled="isDisabled"
+          ></QuickCalendarDate>
+        </div>
+      </div>
+      <div class="daterange_bottom">
+        <div><el-button type="default" @click="clearrest" class="Clear">Reset</el-button></div>
+        <div>
+          <el-button class="search el-button--dark" @click="DateRangeSearch">Search</el-button>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+<style lang="scss" scoped>
+:deep(.el-checkbox-button__inner) {
+  color: var(--tag-info-text-color);
+  font-size: var(--font-size-3);
+  font-weight: 400;
+  padding: 0;
+  width: 92px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border);
+  margin-bottom: 8px;
+}
+:deep(.el-checkbox-button__inner:hover) {
+  color: var(--color-theme);
+  background-color: var(--color-btn-default-bg-hover);
+  border-color: var(--color-btn-default-bg-hover);
+}
+:deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
+  border-color: var(--color-border);
+}
+:deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
+  border-left: 1px solid var(--color-border);
+  border-top-left-radius: var(--border-radius-6);
+  border-bottom-left-radius: var(--border-radius-6);
+}
+:deep(.el-checkbox-button:last-child .el-checkbox-button__inner) {
+  border-top-right-radius: var(--border-radius-6);
+  border-bottom-right-radius: var(--border-radius-6);
+}
+:deep(.el-checkbox-button.is-checked .el-checkbox-button__inner) {
+  color: var(--color-theme);
+  background-color: transparent;
+  border-color: var(--color-theme);
+  box-shadow: none;
+  font-weight: 700;
+}
+:deep(.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner) {
+  border-left-color: var(--color-theme);
+}
+:deep(.el-checkbox-button.is-disabled.is-checked .el-checkbox-button__inner) {
+  background-color: #eaebed;
+  border-color: var(--color-border);
+  color: #2b2f36;
+  font-weight: 700;
+}
+// :deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
+//   border-color: var(--color-border);
+// }
+.Dash_title {
+  height: 48px;
+  font-size: 16px;
+  font-weight: 700;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 8px 16px 0 16px;
+}
+.filter_filter {
+  margin-left: 16px;
+}
+.dash_flex {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin-bottom: 16px;
+}
+.daterange_bottom {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 48px;
+  border-top: 1px solid var(--color-border);
+  margin-top: 5px;
+  font-weight: 400;
+  font-size: var(--font-size-3);
+}
+.Clear {
+  width: 81px;
+  height: 32px;
+  margin-right: 7.82px;
+}
+.search {
+  width: 86px;
+  height: 32px;
+  margin-right: 16px;
+}
+.dash_tips {
+  font-weight: 100;
+  font-size: 12px;
+  color: var(--color-neutral-5);
+}
+</style>

src/views/Dashboard/src/components/ScoringSystem.vue

@@ -88,18 +88,18 @@ avater.value = [
 const checkboxGroup1 = ref([])
 const checkboxGroup2 = ref([])
 const evaluate = [
-  'Lacking in functionality',
-  'Inaccurate data',
-  'Unclear information',
-  'Difficult to use',
-  'Poor system performance'
+  'Functionality',
+  'Data accuracy',
+  'Look and feel',
+  'Ease of use',
+  'Website performance'
 ]
 const happyevaluate = [
-  'Complete funtionality',
-  'Accurate data',
-  'Clear information',
-  'Easy to use',
-  'Good performance'
+  'Functionality',
+  'Data accuracy',
+  'Look and feel',
+  'Ease of use',
+  'Website performance'
 ]
 const Aspects = ref([
   'Highly Dissatisfied',
@@ -116,27 +116,27 @@ interface smileAspectsItem {
 const smileAspects = ref<smileAspectsItem[]>([])
 smileAspects.value = [
   {
-    title: 'Complete funtionality',
+    title: 'Functionality',
     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
     radio: ''
   },
   {
-    title: 'Accurate data',
+    title: 'Data accuracy',
     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
     radio: ''
   },
   {
-    title: 'Clear information',
+    title: 'Look and feel',
     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
     radio: ''
   },
   {
-    title: 'Easy to use',
+    title: 'Ease of use',
     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
     radio: ''
   },
   {
-    title: 'System Performance',
+    title: 'Website performance',
     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
     radio: ''
   }