feat：对接消息相关接口

src/views/home/components/box-2.vue

@@ -49,7 +49,19 @@
           </li>
         </ul>
       </div>
-      <Map />
+      <div class="map" id="map"></div>
+      <div class="spot-wrap">
+        <ul class="spot-list">
+          <li
+            class="spot-item"
+            v-for="(item, index) in spotList"
+            :key="index"
+            @click="handleMap(item.scenicSpotId)"
+          >
+            <img :src="`http://36.138.38.16:8001/fjtcc-api${item.img}`" />
+          </li>
+        </ul>
+      </div>
     </div>
     <div class="footer">
       <div class="left">
@@ -122,12 +134,24 @@
 <script setup>
   import countup from 'vue-countup-v3'
   import ScrollNumber from '@/components/ScrollNumber/index.vue'
+  import { getSpotListApi, getBaiduMapCrowdedApi } from '@/api/home'
+
   import icon8 from '@/assets/images/icon-8.png'
   import icon9 from '@/assets/images/icon-9.png'
   import icon10 from '@/assets/images/icon-10.png'
   import icon11 from '@/assets/images/icon-11.png'
 
-  let count = ref('6945959')
+  import { useMap } from '@/hooks/map'
+
+  let emit = defineEmits(['switch-spot'])
+
+  const { map, initMap, addMarker } = useMap()
+
+  const homeData = inject('homeData')
+
+  let count = ref(69459)
+  let spotList = ref([])
+
   let list = ref([
     {
       label: '安全异常',
@@ -146,14 +170,65 @@
       icon: icon11
     }
   ])
+  const handleMap = (e) => {
+    emit('switch-spot', e)
+    // map.value.centerAndZoom(new BMapGL.Point('108.704166', '30.94776'), 16)
+  }
+  const getSpotList = async () => {
+    let res = await getSpotListApi()
+    spotList.value = res.data
+    let res1 = await getBaiduMapCrowdedApi({
+      nodeId: res.data[0].nodeid
+    })
+    console.log(res1, 'res1')
+  }
+
+  watch(
+    () => homeData.value?.baiduMap,
+    (val) => {
+      if (val) init(val)
+    },
+    { immediate: true }
+  )
+  const init = (val) => {
+    initMap('map', val.index.lng, val.index.lat, 15, false)
+    val.list.map((item) => {
+      item.map((i) => {
+        // 创建折线
+        let arr = []
+        i.path.map((j) => {
+          arr.push(new BMapGL.Point(j[0], j[1]))
+        })
+        var polyline = new BMapGL.Polyline(arr, {
+          strokeColor: '#1EBA29',
+          strokeWeight: 4,
+          strokeOpacity: 0.8
+        })
+        map.value.addOverlay(polyline)
+      })
+    })
+  }
+  onMounted(() => {
+    getSpotList()
+  })
 </script>
 
 <style lang="scss" scoped>
+  :deep(.BMap_cpyCtrl) {
+    display: none;
+  }
+  :deep(.anchorBL) {
+    display: none;
+  }
+  .map {
+    width: 100%;
+    height: vh(700);
+    background-color: transparent;
+  }
   .box-3 {
     width: vw(1614);
     height: vh(950);
     margin-top: vh(120);
-
     .header {
       width: vw(1614);
       height: vh(128);
@@ -163,7 +238,7 @@
       background-size: 100% 100%;
       .left {
         display: flex;
-        width: vw(950);
+        width: vw(890);
         margin-top: vh(20);
       }
       .right {
@@ -176,7 +251,7 @@
         .label {
           margin-bottom: vh(20);
           font-weight: 400;
-          font-size: vw(16);
+          font-size: vw(18);
           color: rgba(255, 255, 255, 0.9);
         }
         .value {
@@ -224,6 +299,26 @@
         }
       }
     }
+    .spot-wrap {
+      position: absolute;
+      bottom: vw(20);
+      left: vw(20);
+      z-index: 99999;
+    }
+    .spot-list {
+      display: flex;
+      align-items: center;
+    }
+    .spot-item {
+      cursor: pointer;
+      width: vw(80);
+      height: vw(80);
+      margin-right: vw(10);
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
     .footer {
       display: flex;
       width: 100%;