feat:修改接口数据，修改日历组件。

src/components/AutoSelect/src/AutoSelect.vue

@@ -42,7 +42,6 @@ const remoteMethod = (query: string) => {
           type: type.value
         })
         .then((res: any) => {
-          console.log(res)
           loading.value = false
           if (res.code == 200) {
             list.value = res.data.map((item: any) => {

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

@@ -29,12 +29,10 @@ const Disabled = ref([false, false])
 const isShowExtra = ref(true)
 
 const ChangeToday = (val: any) => {
-  console.log(ETDDate.value)
   if (val == 'Earliest') {
     // ETDDate.value = [dayjs(), dayjs()]
     ETDDate.value[0] = dayjs()
     open.value = false
-    console.log(ETDDate.value)
   } else {
     ETDDate.value[1] = dayjs()
     open.value = false

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

@@ -0,0 +1,147 @@
+<script lang="ts" setup>
+import dayjs, { Dayjs } from 'dayjs'
+import { ref, watch } from 'vue'
+
+// type RangeValue = [Dayjs, Dayjs]
+// const ETDDate = ref<RangeValue>()
+const props = defineProps({
+  CalendarWidth: {
+    type: String,
+    default: '368px'
+  },
+  CalendarTitle: {
+    type: String
+  },
+  Date: {
+    type: Array
+  }
+})
+const ETDDate = ref(props.Date)
+watch(
+  () => props.Date,
+  (current) => {
+    ETDDate.value = current
+  }
+)
+const emit = defineEmits(['DateRangeChange', 'DateChange'])
+const open = ref(false)
+const Disabled = ref([false, false])
+const isShowExtra = ref(true)
+
+const ChangeToday = (val: any) => {
+  if (val == 'Earliest') {
+    // ETDDate.value = [dayjs(), dayjs()]
+    ETDDate.value[0] = dayjs()
+    open.value = false
+  } else {
+    ETDDate.value[1] = dayjs()
+    open.value = false
+    // ETDDate.value = [dayjs(), dayjs()]
+  }
+}
+const handleCalendarOpen = () => {
+  open.value = !open.value
+}
+const Earliest = () => {
+  Disabled.value = [true, false]
+  ETDDate.value = [dayjs('Oct-05-2009'), dayjs()]
+}
+const Latest = () => {
+  Disabled.value = [false, true]
+}
+const changeRangeData = (value: any) => {
+  if (value != '') {
+    const rangedata = {
+      title: props.CalendarTitle,
+      data: value
+    }
+    emit('DateRangeChange', rangedata)
+    emit('DateChange', value)
+  }
+}
+const handlePanelChange = (value: any, mode: any) => {
+  if (mode[0] == 'year' || mode[0] == 'month') {
+    isShowExtra.value = false
+  } else {
+    isShowExtra.value = true
+  }
+}
+//预设范围
+const rangePresets = ref([
+  { label: 'Current Month', value: [dayjs().startOf('month'), dayjs().endOf('month')] },
+  {
+    label: 'Last Month',
+    value: [
+      dayjs().startOf('month').subtract(1, 'month'),
+      dayjs().endOf('month').subtract(1, 'month')
+    ]
+  },
+  { label: 'This Year', value: [dayjs().startOf('year'), dayjs().endOf('year')] }
+])
+</script>
+<template>
+  <div>
+    <div class="ETD_title">{{ props.CalendarTitle }}</div>
+    <a-range-picker
+      separator="To"
+      :showToday="false"
+      :allowClear="false"
+      :style="{ width: props.CalendarWidth }"
+      :open="open"
+      :presets="rangePresets"
+      :disabled="Disabled"
+      @change="changeRangeData"
+      :placeholder="['Start Time', 'End Time']"
+      format="MMM-DD-YYYY"
+      valueFormat="MM/DD/YYYY"
+      @openChange="handleCalendarOpen"
+      @panelChange="handlePanelChange"
+      v-model:value="ETDDate"
+    >
+      <template #suffixIcon>
+        <span class="iconfont_icon">
+          <svg class="iconfont" aria-hidden="true">
+            <use xlink:href="#icon-icon_date_b"></use>
+          </svg>
+        </span>
+      </template>
+      <template #renderExtraFooter v-if="isShowExtra">
+        <div class="flex">
+          <div class="footer_left">
+            <el-button class="el-button--noborder" @click="Earliest">Earliest Time</el-button>
+            <el-button class="el-button--noborder" @click="ChangeToday('Earliest')"
+              >Today</el-button
+            >
+          </div>
+          <div class="footer_left footer_right">
+            <el-button @click="Latest" class="el-button--noborder">Latest Time</el-button>
+            <el-button class="el-button--noborder" @click="ChangeToday('Latest')">Today</el-button>
+          </div>
+        </div>
+      </template>
+    </a-range-picker>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+.footer_left {
+  display: flex;
+  flex: 50%;
+  padding: 4px 0 4px 8px;
+}
+.footer_right {
+  border-left: 1px solid var(--color-border);
+}
+.el-button--noborder {
+  color: var(--color-theme);
+}
+.ETD_title {
+  font-size: var(--font-size-2);
+  margin-bottom: 4px;
+  color: var(--color-neutral-2);
+}
+</style>

src/components/MoreFilters/src/MoreFilters.vue

@@ -8,7 +8,6 @@ import SelectTable from '@/components/SelectTable/src/SelectTable.vue'
 
 onMounted(() => {
   emitter.on('clearTag', (tag: any) => {
-    console.log(tag)
     if (tag.includes('shippername')) {
       clearname(InputForm.value, 'parties', 'shippername')
     } else if (tag.includes('consigneename')) {
@@ -240,12 +239,14 @@ const changeCollapse = (val: any) => {
 const verification = ref('')
 const placesVerification = ref('')
 let MoreFiltersObj: any = {}
+let MoreFiltersObj2: any = {}
 // 赋值
 const changeAutoSelect = (Array: any, val: any, value: any, arraykey1: any, arraykey2: any) => {
   if (value == 'InputForm') {
     if (Array) {
       Array[arraykey1][arraykey2] = val.value
       MoreFiltersObj[arraykey2] = val.value.join()
+      MoreFiltersObj2[arraykey2] = val.value
     }
   } else if (value == 'AddDateType') {
     if (Array.length) {
@@ -254,6 +255,7 @@ const changeAutoSelect = (Array: any, val: any, value: any, arraykey1: any, arra
           item.partyname = val.value
         }
         MoreFiltersObj[item.partyType] = val.value.join()
+        MoreFiltersObj2[item.partyType] = val.value
       })
     }
   }
@@ -363,8 +365,11 @@ const changeAutoSelectAddType = (index: any, val: any) => {
 const changeAutoSelectPlacesAddType = (index: any, val: any) => {
   pushPlacesSelectedList(index, val)
 }
-const changeAutoSelectVal = (val: any) => {
+const changeAutoSelectVal = (val: any, value: any) => {
   MoreFiltersObj = { ...MoreFiltersObj, ...val }
+  for (const key in value) {
+    MoreFiltersObj2[key] = value[key]
+  }
 }
 // 点击search
 const emit = defineEmits(['MoreFiltersSearch', 'clearMoreFiltersTags'])
@@ -385,12 +390,12 @@ const SearchMore = () => {
     const AlertInput = document.getElementsByClassName('AlertInput')
     if (AlertInput.length == 0) {
       // 传数据给父组件
-      emit('MoreFiltersSearch', MoreFiltersObj)
+      emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
       drawer.value = false
     }
   } else {
     // 传数据给父组件
-    emit('MoreFiltersSearch', MoreFiltersObj)
+    emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
     drawer.value = false
   }
 }

src/components/selectAutoSelect/src/selectAutoSelect.vue

@@ -102,9 +102,11 @@ const changeSelect = (val: any) => {
 // 选中name改变
 const emit = defineEmits(['changeAutoSelectAddType', 'delSelect', 'changeAutoSelect'])
 let AutoSelectObj: any = {}
+let AutoSelectObj2: any = {}
 const changeAutoSelect = (val: any, value: any) => {
   AutoSelectObj[val] = value.join()
-  emit('changeAutoSelect', AutoSelectObj)
+  AutoSelectObj2[val] = value
+  emit('changeAutoSelect', AutoSelectObj, AutoSelectObj2)
 }
 // 清除警告样式
 const removeClass = (val: any, index: any) => {
@@ -220,7 +222,7 @@ const typeSelectClick = (index: any, val: any) => {
           :label="item.label"
           :value="item.value"
         >
-          <el-checkbox :checked="value?.includes(item.value)"></el-checkbox>
+          <el-checkbox :checked="AddType[index].partyname?.includes(item.value)"></el-checkbox>
           <div class="label">{{ item.value }}</div>
         </el-option>
       </el-select>

src/styles/Antdui.scss

@@ -63,4 +63,7 @@
   }
   :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-panel {
     border: none;
+  }
+  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-panel-container .ant-picker-presets ul li:hover {
+    background: var(--color-orange-6);
   }

src/styles/elementui.scss

@@ -41,14 +41,6 @@ button.el-button.el-button--text {
       color: var(--color-theme);
     }
   }
-  &:focus {
-    border: 1px solid var(--color-btn-default-bg-hover);
-    background-color: var(--color-btn-default-bg-hover);
-    fill: var(--color-theme);
-    span {
-      color: var(--color-theme);
-    }
-  }
 }
 
 .el-button.el-button--main.is-plain {

src/views/Booking/src/BookingView.vue

@@ -63,21 +63,23 @@ const DateRangeSearch = (val: any, value: any) => {
   renderTagsData()
 }
 //MoreFiltersSearch
-const MoreFiltersSearch = (val: any) => {
+const MoreFiltersSearch = (val: any, value: any) => {
   filterData.morefiltersData = []
   for (const key in val) {
     let str = `${key}:${val[key]}`
     filterData.morefiltersData.push(str)
     if (key == 'shippername') {
-      searchTableQeury.shipper = val[key]
+      searchTableQeury.shipper = value[key]
     } else if (key == 'consigneename') {
-      searchTableQeury.consignee = val[key]
+      searchTableQeury.consignee = value[key]
     } else if (key == 'Origin Agent') {
-      searchTableQeury.origin = val[key]
+      searchTableQeury.origin = value[key]
     } else if (key == 'Destination Agent') {
-      searchTableQeury.agent = val[key]
+      searchTableQeury.agent = value[key]
     } else if (key == 'Sales') {
-      searchTableQeury.sales_rep = val[key]
+      searchTableQeury.sales_rep = value[key]
+    } else if (key == 'origin') {
+      searchTableQeury.from_station = val[key]
     } else if (key == 'destination') {
       searchTableQeury['final_desination/final_desination_exp'] = val[key]
     } else if (key == 'Place of Receipt') {
@@ -87,11 +89,12 @@ const MoreFiltersSearch = (val: any) => {
     } else if (key == 'Port of delivery') {
       searchTableQeury['place_of_delivery/place_of_delivery_exp'] = val[key]
     } else if (key == 'vessel') {
-      searchTableQeury.vessel = val[key]
+      searchTableQeury.vessel = value[key]
     } else if (key == 'voyage') {
-      searchTableQeury['f_voyage/m_voyage'] = val[key]
+      searchTableQeury['f_voyage/m_voyage'] = value[key]
     }
   }
+  // for(const key in value)
   BookingTable_ref.value.searchTableData(searchTableQeury)
   renderTagsData()
 }

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -83,22 +83,21 @@ const getTableColumns = async (isInit: boolean) => {
 }
 
 const pageInfo = ref({ pageNo: 1, pageSize: 100, total: 0 })
-const querydata = ref()
 const TransportListItem = ref()
 const TagsList = ref()
 
 // 获取表格数据
+let filterdataobj: any = {}
 const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
   const rc = isPageChange ? pageInfo.value.total : -1
   tableLoading.value = true
-  querydata.value = { cp: pageInfo.value.pageNo, ps: pageInfo.value.pageSize, rc: rc }
   await $api
     .getBookingTableData({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
       rc,
       other_filed: '',
-      _textSearch: ''
+      ...filterdataobj
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -124,19 +123,19 @@ const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
 // 查询列表数据
 const searchTableData = (data: any) => {
   tableLoading.value = true
-  console.log(data)
+  filterdataobj = data
   $api
     .getBookingTableData({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
-      rc: pageInfo.value.total,
+      rc: -1,
       other_filed: '',
-      _textSearch: '',
-      filterTag: data.filterTag ? data.filterTag : ['All']
+      ...data
     })
     .then((res: any) => {
       if (res.code === 200) {
         bookingTable.value.data = res.data.searchData
+        pageInfo.value.total = Number(res.data.rc)
         tableLoading.value = false
       }
     })
@@ -327,7 +326,6 @@ const handleCheckAllChange = ({ records }: any) => {
   selectedNumber.value = records.length
 }
 defineExpose({
-  querydata,
   searchTableData,
   TransportListItem,
   TagsList

src/views/Dashboard/src/DashboardView.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, reactive } from 'vue'
-import CalendarDate from '@/components/DateRange/src/components/CalendarDate.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'
@@ -27,14 +27,19 @@ const checkboxGroup1 = ref(['All'])
 const changeCheckboxGroup2 = ref('ETD')
 const shipper = ref(['All', 'Air', 'Sea', 'Road'])
 const shipper_two = ref(['ETD', 'ETA'])
+const DashDate = ref(['', ''])
 const changeCheckboxGroup1 = (val: any) => {
-  if (val.length == 0) {
+  if (val.length == 3) {
     checkboxGroup1.value = ['All']
-  } else if (val.indexOf('All') != -1) {
-    checkboxGroup1.value.splice(val.indexOf('All'), 1)
   }
-  if (val.length == 3 && val.indexOf('All') == -1) {
+  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)
+    }
   }
 }
 
@@ -202,7 +207,9 @@ const GetPendingArrivalEcharts = () => {
 const containerObj = reactive({
   bar_title: '',
   barList: [],
-  barSeries: [{ name: '' }]
+  barSeries: [{ name: '' }],
+  Max: 0,
+  interval: 0
 })
 const GetContainerCountEcharts = (val: any) => {
   $api
@@ -216,6 +223,8 @@ const GetContainerCountEcharts = (val: any) => {
         containerObj.bar_title = res.data.ContainerCount_Title
         containerObj.barList = res.data.ContainerCountList
         containerObj.barSeries = res.data.ContainerCounSeries
+        containerObj.Max = res.data.Max
+        containerObj.interval = res.data.interval
       }
     })
 }
@@ -223,7 +232,9 @@ const GetContainerCountEcharts = (val: any) => {
 const EmissionObj = reactive({
   bar_title: '',
   barList: [],
-  barSeries: []
+  barSeries: [],
+  Max: 0,
+  interval: 0
 })
 const GetCo2EmissionEcharts = () => {
   $api.GetCo2EmissionEcharts({}).then((res: any) => {
@@ -231,6 +242,8 @@ const GetCo2EmissionEcharts = () => {
       EmissionObj.bar_title = res.data.ContainerCount_Title
       EmissionObj.barList = res.data.ContainerCountList
       EmissionObj.barSeries = res.data.ContainerCounSeries
+      EmissionObj.Max = res.data.Max
+      EmissionObj.interval = res.data.interval
     }
   })
 }
@@ -238,7 +251,9 @@ const GetCo2EmissionEcharts = () => {
 const DestinationObj = reactive({
   bar_title: '',
   barList: [],
-  barSeries: []
+  barSeries: [],
+  Max: 0,
+  interval: 0
 })
 const GetCo2DestinationEcharts = () => {
   $api.GetCo2DestinationEcharts({}).then((res: any) => {
@@ -246,6 +261,8 @@ const GetCo2DestinationEcharts = () => {
       DestinationObj.bar_title = res.data.ContainerCount_Title
       DestinationObj.barList = res.data.ContainerCountList
       DestinationObj.barSeries = res.data.ContainerCounSeries
+      DestinationObj.Max = res.data.Max
+      DestinationObj.interval = res.data.interval
     }
   })
 }
@@ -306,6 +323,10 @@ const SaveLayout = () => {
       }
     })
 }
+//Save Filters
+const SaveFilters = () => {
+  SaveVisible.value = false
+}
 </script>
 <template>
   <div class="dashboard">
@@ -365,7 +386,7 @@ const SaveLayout = () => {
               </span>
             </el-button>
           </template>
-          <div class="Save_filters">
+          <div class="Save_filters" @click="SaveFilters">
             <span class="iconfont_icon iconfont_icon_save">
               <svg class="iconfont" aria-hidden="true">
                 <use xlink:href="#icon-icon_save_b"></use>
@@ -401,7 +422,7 @@ const SaveLayout = () => {
           </el-radio-group>
         </div>
         <div class="tips_filter">
-          <CalendarDate @DateChange="DateChange"></CalendarDate>
+          <QuickCalendarDate @DateChange="DateChange" :Date="DashDate"></QuickCalendarDate>
         </div>
       </div>
       <div class="filters_right">
@@ -652,7 +673,7 @@ const SaveLayout = () => {
                     ></SellerChart>
                   </div>
                   <div class="map">
-                    <!-- <TopMap></TopMap> -->
+                    <TopMap></TopMap>
                   </div>
                 </div>
               </template>
@@ -666,7 +687,9 @@ const SaveLayout = () => {
                       style="height: 272px"
                     ></SellerChart>
                   </div>
-                  <div class="map">MAP</div>
+                  <div class="map">
+                    <TopMap></TopMap>
+                  </div>
                 </div>
               </template>
             </VBox_Dashboard>
@@ -695,8 +718,8 @@ const SaveLayout = () => {
                 <BarChart
                   ref="seller_chart"
                   :BarData="EmissionObj"
-                  style="height: 222px"
-                  :barHeight="{ height: '222px' }"
+                  style="height: 250px"
+                  :barHeight="{ height: '250px' }"
                 ></BarChart>
               </template>
             </VBox_Dashboard>
@@ -725,8 +748,8 @@ const SaveLayout = () => {
                 <BarChart
                   ref="seller_chart"
                   :BarData="DestinationObj"
-                  style="height: 222px"
-                  :barHeight="{ height: '222px' }"
+                  style="height: 250px"
+                  :barHeight="{ height: '250px' }"
                 ></BarChart>
               </template>
             </VBox_Dashboard>
@@ -894,7 +917,7 @@ const SaveLayout = () => {
   margin-bottom: 8px;
 }
 :deep(.ETD_title) {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 :deep(:where(.css-dev-only-do-not-override-19iuou).ant-picker-range) {
   height: 32px;
@@ -949,5 +972,6 @@ const SaveLayout = () => {
   z-index: 2014;
   position: relative;
   background-color: white;
+  padding-bottom: 20px;
 }
 </style>

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

@@ -16,12 +16,22 @@ watch(
     initOption.xAxis.data = barName.value
     initOption.series = bar_series.value
     initOption.legend.data = Name.value
+    initOption.yAxis.max = Max.value
+    initOption.yAxis.interval = interval.value
     initChart()
   },
   {
     deep: true
   }
 )
+// 最大值
+const Max = computed(() => {
+  return bar_data.value?.Max
+})
+// 刻度
+const interval = computed(() => {
+  return bar_data.value?.interval
+})
 // x轴值
 const barName = computed(() => {
   return bar_data.value?.barList
@@ -148,8 +158,8 @@ const initOption = reactive({
       color: '#B5B9BF'
     },
     min: 0, // 最小值
-    max: 3000, // 最大值
-    interval: 500 // 刻度
+    max: Max.value, // 最大值
+    interval: interval.value // 刻度
   },
   series: bar_series.value,
   legend: {
@@ -160,7 +170,7 @@ const initOption = reactive({
     itemHeight: 8.5, //修改icon图形大小
     itemWidth: 8.5, //修改icon图形大小
     textStyle: {
-      fontSize: 10,
+      fontSize: 12,
       fontFamily: 'Lato-Light',
       color: '#646A73'
     }

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
 onMounted(() => {
   init()
 })
@@ -16,4 +15,8 @@ const init = () => {
 </script>
 <template>
   <div id="map" style="height: 272px"></div>
-</template>
+</template>
+
+<style lang="scss" scoped>
+@import 'leaflet/dist/leaflet.css';
+</style>