feat：地图数据为空时清除数据。

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

@@ -72,10 +72,14 @@ const getdefaultdata = () => {
     }
     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
     } 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')
     }
   }
   dashboardObj.transportation = checkboxGroup1.value
@@ -100,14 +104,11 @@ 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 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) {
@@ -118,9 +119,13 @@ const StartChange = (val: any) => {
     EndDate.value = current
   }
   const date1 = moment(String(val)).format('MM/YYYY')
+  const date1_two = moment(String(val)).format('MM-YYYY')
   const date2 = moment(EndDate.value).format('MM/YYYY')
+  const date2_two = moment(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) {
@@ -131,9 +136,13 @@ const EndChange = (val: any) => {
     startDate.value = current
   }
   const date1 = moment(startDate.value).format('MM/YYYY')
+  const date1_two = moment(startDate.value).format('MM-YYYY')
   const date2 = moment(String(val)).format('MM/YYYY')
+  const date2_two = moment(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 = () => {

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

@@ -3,20 +3,7 @@ import { onMounted, ref, watch } from 'vue'
 import OriginIcon from '../image/hhh_2.png'
 import L from 'leaflet'
 const MapDataList = ref([])
-// const props = defineProps({
-//   obj: {
-//     type: Object
-//   }
-// })
-// const mapobj = ref(props.obj)
 const mapobj = ref()
-// watch(
-//   () => props.obj,
-//   (current) => {
-//     mapobj.value = current
-//   }
-// )
-
 const originIcon = L.icon({
   iconUrl: OriginIcon,
   iconSize: [0, 0],
@@ -29,58 +16,54 @@ const init = () => {
   if (map) {
     return
   }
-
   map = L.map('map', { attributionControl: false }).setView([51.505, -0.09], 3)
 
   L.tileLayer('https://map.kerryapex.com/osm_tiles/{z}/{x}/{y}.png', {
     attribution:
       '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   }).addTo(map)
+}
 
-  const addResetZoomButton = (center: L.LatLng, zoom: number) => {
-    const ResetZoomControl = L.Control.extend({
-      options: {
-        position: 'topleft'
-      },
-      onAdd: function () {
-        const container = L.DomUtil.create('div', 'reset-zoom-control leaflet-bar')
-
-        // 创建重置缩放按钮
-        const resetZoomButton = L.DomUtil.create(
-          'a',
-          'reset-zoom-button leaflet-bar-part',
-          container
-        )
-        resetZoomButton.href = '#'
-        resetZoomButton.title = 'Reset Zoom'
-        resetZoomButton.innerHTML = `<div class="outer-ring" style="height: 100%; padding: 4px;border: 1px solid #2b2f36;border-radius: 50%;">
+const addResetZoomButton = (center: L.LatLng, zoom: number) => {
+  const ResetZoomControl = L.Control.extend({
+    options: {
+      position: 'topleft'
+    },
+    onAdd: function () {
+      const container = L.DomUtil.create('div', 'reset-zoom-control leaflet-bar')
+
+      // 创建重置缩放按钮
+      const resetZoomButton = L.DomUtil.create('a', 'reset-zoom-button leaflet-bar-part', container)
+      resetZoomButton.href = '#'
+      resetZoomButton.title = 'Reset Zoom'
+      resetZoomButton.innerHTML = `<div class="outer-ring" style="height: 100%; padding: 4px;border: 1px solid #2b2f36;border-radius: 50%;">
         <div class="inner-ring" style=" height: 100%; width: 100%; background-color: #2b2f36; border-radius: 50%;"></div>
         </div>`
-        resetZoomButton.setAttribute('role', 'button')
-
-        // 点击按钮时重置地图到首次标记后的缩放和中心
-        resetZoomButton.addEventListener('click', () => {
-          map!.setView(center, zoom)
-        })
+      resetZoomButton.setAttribute('role', 'button')
 
-        return container
-      }
-    })
+      // 点击按钮时重置地图到首次标记后的缩放和中心
+      resetZoomButton.addEventListener('click', () => {
+        map!.setView(center, zoom)
+      })
 
-    // 添加重置按钮到地图
-    new ResetZoomControl().addTo(map!)
-  }
-  // 定义首次渲染地图的中心和缩放级别
-  let initialCenter: L.LatLng | null = null
-  let initialZoomLevel: number | null = null
-  let isFirstRender = true // 标记是否为首次渲染
+      return container
+    }
+  })
 
-  const addMarkersToMap = () => {
-    if (!map) return // 确保地图已经初始化
-    const latLngBounds: any = [] // 用来存储所有标记的坐标
-    MapDataList.value.forEach((item: any) => {
-      const marker = L.marker(item.qandl, { icon: originIcon }).addTo(map)
-      const customPopupContent = `
+  // 添加重置按钮到地图
+  new ResetZoomControl().addTo(map!)
+}
+// 定义首次渲染地图的中心和缩放级别
+let initialCenter: L.LatLng | null = null
+let initialZoomLevel: number | null = null
+let isFirstRender = true // 标记是否为首次渲染
+
+const addMarkersToMap = () => {
+  if (!map) return // 确保地图已经初始化
+  const latLngBounds: any = [] // 用来存储所有标记的坐标
+  MapDataList.value.forEach((item: any) => {
+    const marker = L.marker(item.qandl, { icon: originIcon }).addTo(map)
+    const customPopupContent = `
     <div class="popup-content" style="background-color:${item.color}">
       <div class="popup-content-text">
         <p class="popup-label" style="color:${item.textcolor}">${item.name}</p>
@@ -88,30 +71,42 @@ const init = () => {
       </div>
     </div>
   `
-      marker
-        .bindPopup(customPopupContent, {
-          closeButton: false,
-          autoClose: false,
-          closeOnClick: false
-        })
-        .openPopup()
-      latLngBounds.push([item.qandl[0], item.qandl[1]])
+    marker
+      .bindPopup(customPopupContent, {
+        closeButton: false,
+        autoClose: false,
+        closeOnClick: false
+      })
+      .openPopup()
+    latLngBounds.push([item.qandl[0], item.qandl[1]])
+  })
+
+  if (latLngBounds.length > 0) {
+    const bounds = L.latLngBounds(latLngBounds)
+    map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [400, 0] })
+    setTimeout(() => {
+      if (isFirstRender) {
+        initialCenter = map!.getCenter()
+        initialZoomLevel = map!.getZoom()
+        isFirstRender = false
+      }
+      addResetZoomButton(initialCenter!, initialZoomLevel!)
+    }, 0)
+  }
+  // 数据为空时关闭图层
+  if (MapDataList.value.length == 0) {
+    map.eachLayer(function (layer) {
+      layer.closePopup()
     })
-
-    if (latLngBounds.length > 0) {
-      const bounds = L.latLngBounds(latLngBounds)
-      map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [400, 0] })
-      setTimeout(() => {
-        if (isFirstRender) {
-          initialCenter = map!.getCenter()
-          initialZoomLevel = map!.getZoom()
-          isFirstRender = false
-        }
-        addResetZoomButton(initialCenter!, initialZoomLevel!)
-      }, 0)
-    }
   }
-  if (mapobj.value) {
+}
+onMounted(() => {
+  init()
+})
+const getmapData = () => {
+  if (Object.keys(mapobj.value).length == 0) {
+    MapDataList.value = []
+  } else {
     mapobj.value.forEach((item: any) => {
       MapDataList.value.push({
         color: item.color,
@@ -121,40 +116,14 @@ const init = () => {
         value: item.value
       })
     })
-
-    // 请求成功后添加标记，并动态添加重置按钮
-    addMarkersToMap()
   }
-  // $api
-  //   .GetTop10ODEcharts({
-  //     ...mapobj.value
-  //   })
-  //   .then((res: any) => {
-  //     if (res.code === 200) {
-  //       res.data.toporiginMap &&
-  //         res.data.toporiginMap.forEach((item: any) => {
-  //           MapDataList.value.push({
-  //             color: item.color,
-  //             name: item.name,
-  //             qandl: item.qandl,
-  //             textcolor: item.textcolor,
-  //             value: item.value
-  //           })
-  //         })
-
-  //       // 请求成功后添加标记，并动态添加重置按钮
-  //       addMarkersToMap()
-  //     }
-  //   })
+  // 请求成功后添加标记，并动态添加重置按钮
+  addMarkersToMap()
 }
-// onMounted(() => {
-//   init()
-// })
 
 const updataMapObj = (val: any) => {
   mapobj.value = val
-  console.log(mapobj.value)
-  init()
+  getmapData()
 }
 
 defineExpose({