feat:修改查询、修改地图数据、修改警告样式

src/components/MoreFilters/src/MoreFilters.vue

@@ -320,8 +320,6 @@ const changeCollapse = (val: any) => {
     PlacesBadge.value = ''
   }
 }
-const verification = ref('')
-const placesVerification = ref('')
 let MoreFiltersObj: any = {}
 let MoreFiltersObj2: any = {}
 // 赋值
@@ -354,7 +352,10 @@ const changeAutoSelectvessel = (val: any) => {
   changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'vessel')
 }
 const changeAutoSelectvoyage = (val: any) => {
-  changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'voyage')
+  console.log(val)
+  // changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'voyage')
+  MoreFiltersObj.voyage = val
+  MoreFiltersObj2.voyage = val
 }
 const check = (row: any, value: any, key1: any, key2: any) => {
   value[key1][key2] = row
@@ -451,11 +452,13 @@ const changeAutoSelectPlacesAddType = (index: any, val: any) => {
 }
 const isError = ref(false)
 const changeAutoSelectVal = (val: any, value: any, boolaen: any) => {
-  if (boolaen) {
+  console.log(boolaen, value)
+  if (boolaen || value == true) {
     isError.value = true
   } else {
     isError.value = false
   }
+
   MoreFiltersObj = { ...MoreFiltersObj, ...val }
   for (const key in value) {
     MoreFiltersObj2[key] = value[key]
@@ -463,34 +466,37 @@ const changeAutoSelectVal = (val: any, value: any, boolaen: any) => {
 }
 // 点击search
 const emit = defineEmits(['MoreFiltersSearch', 'clearMoreFiltersTags'])
-const errorList: any = ref({
-  partyorigin: false,
-  partydestination: false,
-  partysales: false
-})
 const SearchMore = () => {
-  console.log(AddDateType.value)
-  if (AddDateType.value.length) {
-    AddDateType.value.forEach((item: any) => {
-      if (item.partyType != '' && item.partyname.length == 0) {
-        if (item.partyType == 'Origin Agent') {
-          errorList.value.partyorigin = true
-        } else if (item.partyType == 'Destination Agent') {
-          errorList.value.partydestination = true
-        } else {
-          errorList.value.partysales = true
+  if (AddDatePlaceType.value.length) {
+    for (let i = 0; i < AddDatePlaceType.value.length; i++) {
+      if (AddDatePlaceType.value[i].placesType != '') {
+        if (isError.value) {
+          // 传数据给父组件
+          emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
+          drawer.value = false
         }
+      } else {
+        emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
+        drawer.value = false
       }
-    })
-  }
-  if (isError.value) {
+    }
+  } else if (AddDateType.value.length) {
+    for (let i = 0; i < AddDateType.value.length; i++) {
+      if (AddDateType.value[i].partyType != '') {
+        if (isError.value) {
+          // 传数据给父组件
+          emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
+          drawer.value = false
+        }
+      } else {
+        emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
+        drawer.value = false
+      }
+    }
+  } else {
     // 传数据给父组件
     emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
     drawer.value = false
-  } else {
-    // 传数据给父组件
-    // emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
-    // drawer.value = false
   }
 }
 // 清除
@@ -684,7 +690,6 @@ const ServiceSearch = (val: any, value: any) => {
             ref="placeSelectTableSelectRef"
             :AddDateType="AddDatePlaceType"
             :DateTypeoptions="PlaceTypeoptions"
-            :Verification="placesVerification"
             @changeAutoSelectAddType="changeAutoSelectPlacesAddType"
             @changeAutoSelect="changeAutoSelectVal"
             :selectedPartyTypeoptions="selectedPlacesTypeoptions"
@@ -713,7 +718,6 @@ const ServiceSearch = (val: any, value: any) => {
             <AutoSelect
               ASType="vessel"
               @changeAutoSelect="changeAutoSelectvessel"
-              class="input_change"
               :ASValue="InputForm.transportation.vessel"
               ASPlaceholder="Please input vessel name or code"
             >
@@ -721,13 +725,17 @@ const ServiceSearch = (val: any, value: any) => {
           </div>
           <div class="ETA">
             <div class="ETD_title">Voyage/Flight</div>
-            <AutoSelect
+            <el-input
+              placeholder="Please input voyage or flight no."
+              @change="changeAutoSelectvoyage(InputForm.transportation.voyage)"
+              v-model="InputForm.transportation.voyage"
+            ></el-input>
+            <!-- <AutoSelect
               ASType="vessel"
               @changeAutoSelect="changeAutoSelectvoyage"
-              class="input_change"
               :ASValue="InputForm.transportation.voyage"
               ASPlaceholder="Please input voyage or flight no."
-            ></AutoSelect>
+            ></AutoSelect> -->
           </div>
         </el-collapse-item>
         <!-- Others -->

src/components/SelectTable/src/SelectTable.vue

@@ -20,6 +20,10 @@ const props = defineProps({
   keyVal: {
     type: String,
     default: 'city'
+  },
+  isError: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -148,6 +152,7 @@ const onInput = () => {
         <div
           class="el-input el-input--suffix el-tooltip__trigger"
           @click="disabled ? null : onInput"
+          :class="{ is_error: props.isError }"
         >
           <div class="el-input__wrapper" :class="{ 'is-disabled': disabled }">
             <el-space :class="[innerTags.length ? 'custom-el-spaceno' : 'custom-el-space']">
@@ -338,4 +343,10 @@ const onInput = () => {
 :deep(.custom-el-space .el-space__item) {
   width: 100%;
 }
+
+.is_error {
+  :deep(.el-input__wrapper) {
+    box-shadow: 0 0 0 0.5px var(--color-danger) !important;
+  }
+}
 </style>

src/components/SelectTableSelect/src/SelectTableSelect.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import IconDropDown from '@/components/IconDropDown'
-import VerrifyInformation from '@/components/VerrifyInformation'
 import SelectTable from '@/components/SelectTable'
 
 interface TypeItem {
@@ -17,7 +16,6 @@ interface Props {
   AddDateType: TypeItem[]
   ASPlaceholder: string
   DateTypeoptions: dateoptions[]
-  Verification: string
   selectedPartyTypeoptions: Array<string>
 }
 interface optionsItem {
@@ -74,10 +72,16 @@ const changeSelect = (val: any) => {
 }
 // 选中name改变
 const emit = defineEmits(['changeAutoSelectAddType', 'delSelect', 'changeAutoSelect'])
+const errorBoolean = ref(false)
 let AutoSelectObj: any = {}
 const changeAutoSelect = (val: any, value: any) => {
+  if (value.length) {
+    errorBoolean.value = true
+  } else {
+    errorBoolean.value = false
+  }
   AutoSelectObj[val] = value.join()
-  emit('changeAutoSelect', AutoSelectObj)
+  emit('changeAutoSelect', AutoSelectObj, errorBoolean.value)
 }
 const typeSelectFocus = (index: any, e: any) => {
   typeSelectIndex.value = index
@@ -173,15 +177,20 @@ const checkdestination = (row: any, index: any) => {
             ? 'uncode'
             : 'city'
         "
+        :is-error="
+          AddType[index].placesType != '' && AddType[index].placesname.length == 0 ? true : false
+        "
         :disabled="AddType[index].placesType ? false : true"
         :searchInput="AddType[index].placesname"
         @check="(row) => checkdestination(row, index)"
       />
-      <VerrifyInformation
-        :isshowVerfication="AddDateType[index]?.isshowVerfication"
-        :verification="props.Verification"
+
+      <div
+        class="error"
+        v-if="AddType[index].placesType != '' && AddType[index].placesname.length == 0"
       >
-      </VerrifyInformation>
+        Please Input Places Details
+      </div>
     </div>
   </div>
 </template>
@@ -233,8 +242,10 @@ const checkdestination = (row: any, index: any) => {
     color: var(--badge__content--warning);
   }
 }
-
-.AlertInput :deep(.el-select__wrapper) {
-  box-shadow: 0 0 0 0.5px var(--color-danger);
+.error {
+  font-size: 12px;
+  color: var(--color-danger);
+  line-height: 14px;
+  margin-top: 5px;
 }
 </style>

src/components/selectAutoSelect/src/selectAutoSelect.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
 import IconDropDown from '@/components/IconDropDown'
+import { isLength } from 'lodash'
 interface TypeItem {
   partyType: ''
   partyname: []
@@ -106,6 +107,11 @@ let AutoSelectObj2: any = {}
 const changeAutoSelect = (val: any, value: any) => {
   AutoSelectObj[val] = value.join()
   AutoSelectObj2[val] = value
+  if (value.length) {
+    ErrorNumber.value = true
+  } else {
+    ErrorNumber.value = false
+  }
   emit('changeAutoSelect', AutoSelectObj, AutoSelectObj2, ErrorNumber.value)
 }
 const typeSelectFocus = (index: any, e: any) => {
@@ -189,8 +195,6 @@ const typeSelectClick = (index: any, val: any) => {
     </div>
     <div style="margin-top: 16px">
       <div class="ETD_title">Party Details</div>
-      {{ AddType[index].partyname }}
-      {{ AddType[index].partyType }}
       <el-select
         v-model="AddType[index].partyname"
         multiple
@@ -220,6 +224,12 @@ const typeSelectClick = (index: any, val: any) => {
           <div class="label">{{ item.value }}</div>
         </el-option>
       </el-select>
+      <div
+        class="error"
+        v-if="AddType[index].partyType != '' && AddType[index].partyname.length == 0"
+      >
+        Please Input Party Details
+      </div>
     </div>
   </div>
 </template>
@@ -272,12 +282,15 @@ const typeSelectClick = (index: any, val: any) => {
   }
 }
 
-.AlertInput :deep(.el-select__wrapper) {
-  box-shadow: 0 0 0 0.5px var(--color-danger);
-}
-.is-error {
-  :deep(.el-input__wrapper) {
-    box-shadow: 0 0 0 1px var(--color-danger) inset;
+.is_error {
+  :deep(.el-select__wrapper) {
+    box-shadow: 0 0 0 0.5px var(--color-danger);
   }
 }
+.error {
+  font-size: 12px;
+  color: var(--color-danger);
+  line-height: 14px;
+  margin-top: 5px;
+}
 </style>

src/styles/elementui.scss

@@ -623,4 +623,4 @@ div .el-radio-button__inner:hover {
 div .el-space {
   flex-wrap: wrap;
   margin: 3px 0 0 0;
-}
+}

src/views/Booking/src/BookingView.vue

@@ -88,11 +88,11 @@ const DateRangeSearch = (val: any, value: any) => {
   }
   for (const key in value) {
     if (key == 'ETD') {
-      searchTableQeury.m_etd_start = value[key].data[0]
-      searchTableQeury.m_etd_end = value[key].data[1]
+      searchTableQeury.f_etd_start = value[key].data[0]
+      searchTableQeury.f_etd_end = value[key].data[1]
     } else if (key == 'ETA') {
-      searchTableQeury.f_eta_start = value[key].data[0]
-      searchTableQeury.f_eta_end = value[key].data[1]
+      searchTableQeury.m_eta_start = value[key].data[0]
+      searchTableQeury.m_eta_end = value[key].data[1]
     } else {
       searchTableQeury.created_time_start = value[key].data[0]
       searchTableQeury.created_time_end = value[key].data[1]
@@ -119,9 +119,9 @@ const MoreFiltersSearch = (val: any, value: any) => {
     } else if (key == 'Sales') {
       searchTableQeury.sales_rep = value[key]
     } else if (key == 'origin') {
-      searchTableQeury.from_station = val[key]
+      searchTableQeury.shipper_city = val[key]
     } else if (key == 'destination') {
-      searchTableQeury['final_desination/final_desination_exp'] = val[key]
+      searchTableQeury.consignee_city = val[key]
     } else if (key == 'Place of Receipt') {
       searchTableQeury.place_of_receipt = val[key]
     } else if (key == 'Port of Loading') {
@@ -129,7 +129,7 @@ const MoreFiltersSearch = (val: any, value: any) => {
     } else if (key == 'Port of delivery') {
       searchTableQeury['place_of_delivery/place_of_delivery_exp'] = val[key]
     } else if (key == 'vessel') {
-      searchTableQeury.vessel = value[key]
+      searchTableQeury['f_vessel/m_vessel'] = value[key]
     } else if (key == 'voyage') {
       searchTableQeury['f_voyage/m_voyage'] = value[key]
     }

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

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, computed } from 'vue'
+import { onMounted, ref } from 'vue'
 import L from 'leaflet'
-const props = defineProps({
-  MapData: Array
-})
-const MapDataList = ref(props.MapData)
-watch(
-  () => props.MapData,
-  (current) => {
-    MapDataList.value = current
-  }
-)
+// const props = defineProps({
+//   MapData: Array
+// })
+// const MapDataList = ref(props.MapData)
+// watch(
+//   () => props.MapData,
+//   (current) => {
+//     MapDataList.value = current
+//   }
+// )
+const MapDataList = ref()
 const init = () => {
   const map = L.map('map').setView([51.505, -0.09], 3)
 
@@ -23,34 +24,33 @@ const init = () => {
     autoClose: false, // 禁止点击其他地方自动关闭
     closeOnClick: false // 禁止点击地图时自动关闭
   }
-  var markers = [
-    {
-      qandL: [151.5, -0.09],
-      divIcon: { iconSize: 0 },
-      name: 'CNSGH1',
-      color: '#FF7500',
-      value: 1,
-      textcolor: '#FFF'
-    },
-    {
-      qandL: [85.7128, 22.006],
-      divIcon: { iconSize: 0 },
-      name: 'CNSGH2',
-      color: '#ff9033',
-      value: 1,
-      textcolor: '#FFF'
-    },
-    {
-      qandL: [81.5, 27.6298],
-      divIcon: { iconSize: 0 },
-      name: 'CNSGH3',
-      color: '#ff9e4d',
-      value: 1,
-      textcolor: '#FFF'
-    }
-    // 添加更多点...
-  ]
-  console.log(props.MapData)
+  // var markers = [
+  //   {
+  //     qandL: [151.5, -0.09],
+  //     divIcon: { iconSize: 0 },
+  //     name: 'CNSGH1',
+  //     color: '#FF7500',
+  //     value: 1,
+  //     textcolor: '#FFF'
+  //   },
+  //   {
+  //     qandL: [85.7128, 22.006],
+  //     divIcon: { iconSize: 0 },
+  //     name: 'CNSGH2',
+  //     color: '#ff9033',
+  //     value: 1,
+  //     textcolor: '#FFF'
+  //   },
+  //   {
+  //     qandL: [81.5, 27.6298],
+  //     divIcon: { iconSize: 0 },
+  //     name: 'CNSGH3',
+  //     color: '#ff9e4d',
+  //     value: 1,
+  //     textcolor: '#FFF'
+  //   }
+  //   // 添加更多点...
+  // ]
   if (MapDataList.value) {
     MapDataList.value.forEach((item: any) => {
       const marker = L.marker(item.qandl, { icon: L.divIcon(item.divIcon) }).addTo(map)
@@ -71,9 +71,17 @@ const init = () => {
     })
   }
 }
-
+const GetTop10ODEcharts = () => {
+  $api.GetTop10ODEcharts({}).then((res: any) => {
+    if (res.code === 200) {
+      MapDataList.value = res.data.toporiginMap
+      console.log(MapDataList.value)
+    }
+  })
+}
 onMounted(() => {
   init()
+  GetTop10ODEcharts()
 })
 </script>
 <template>

src/views/Tracking/src/TrackingView.vue

@@ -113,8 +113,8 @@ const DateRangeSearch = (val: any, value: any) => {
       searchTableQeury.etd_start = value[key].data[0]
       searchTableQeury.etd_end = value[key].data[1]
     } else if (key == 'ETA') {
-      searchTableQeury.f_eta_start = value[key].data[0]
-      searchTableQeury.f_eta_end = value[key].data[1]
+      searchTableQeury.eta_start = value[key].data[0]
+      searchTableQeury.eta_end = value[key].data[1]
     } else {
       searchTableQeury.created_time_start = value[key].data[0]
       searchTableQeury.created_time_end = value[key].data[1]
@@ -156,7 +156,7 @@ const MoreFiltersSearch = (val: any, value: any) => {
     } else if (key == 'Place of Receipt') {
       searchTableQeury.place_of_receipt_exp = val[key]
     } else if (key == 'origin') {
-      searchTableQeury.from_station = val[key]
+      searchTableQeury['shipper_city/consignee_city'] = val[key]
     } else if (key == 'Port of Loading') {
       searchTableQeury.port_of_loading = val[key]
     } else if (key == 'Port of delivery') {