feat：对接交通大屏

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

@@ -4,16 +4,16 @@
       <li
         class="nav-item"
         :class="{ active: current == index }"
-        v-for="(item, index) in 20"
+        v-for="(item, index) in routerList"
         :key="index"
-        @click="handleNav(index)"
-        >路段{{ index + 1 }}
+        @click="handleNav(item, index)"
+      >
+        {{ item.name }}
       </li>
     </ul>
-
+    <div id="traffic-map" class="traffic-map" />
     <div class="map-box">
-      <Map />
-      <div class="video-list">
+      <!-- <div class="video-list">
         <div class="li">
           <vue3VideoPlay v-bind="options" />
         </div>
@@ -21,53 +21,47 @@
           <vue3VideoPlay v-bind="options" />
         </div>
         <div class="menu">查看更多</div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script setup>
-  import Map from '@/components/Map/marker.vue'
-  let current = ref(0)
-  const options = reactive({
-    src: 'http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8', //视频源
-    type: 'm3u8', //视频类型
-    width: '100%',
-    height: '100%',
-    color: '#409eff', //主题色
-    title: '', //视频名称
-    muted: false, //静音
-    webFullScreen: false,
-    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-    autoPlay: true, //自动播放
-    loop: false, //循环播放
-    mirror: false, //镜像画面
-    ligthOff: false, //关灯模式
-    volume: 0.3, //默认音量大小
-    control: true, //是否显示控制
-    controlBtns: [
-      // "audioTrack",
-      // "quality",
-      // "speedRate",
-      // "volume",
-      'setting',
-      'pip',
-      'pageFullScreen',
-      'fullScreen'
-    ] //显示所有按钮,
-  })
+  import { getRouterListApi } from '@/api/traffic'
+  import { useMap } from '@/hooks/map'
 
-  const handleNav = (e) => {
-    current.value = e
+  const { map, initMap } = useMap()
+
+  let current = ref(0)
+  let routerList = ref([])
+  const handleNav = (e, index) => {
+    current.value = index
+    map.value.centerAndZoom(new BMapGL.Point(e.longitude, e.latitude), e.level)
   }
+
+  const getRouterList = async () => {
+    let res = await getRouterListApi()
+    routerList.value = res.data
+    let { longitude, latitude, level } = routerList.value[0]
+    nextTick(() => {
+      initMap('traffic-map', longitude, latitude, level)
+      map.value.setTrafficOn()
+    })
+  }
+
+  onMounted(() => {
+    getRouterList()
+  })
 </script>
 
 <style lang="scss" scoped>
   .box-2 {
-    display: flex;
     margin-top: vh(120);
+    display: flex;
+    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
   }
   .nav {
+    width: vw(232);
     margin-left: vw(10);
     overflow: auto;
     height: vh(950);
@@ -79,7 +73,7 @@
     &-item {
       cursor: pointer;
       margin-bottom: vw(15);
-      width: vw(120);
+      width: vw(220);
       height: vh(54);
       font-weight: bold;
       font-size: vw(18);
@@ -96,7 +90,7 @@
     }
   }
 
-  .map-box {
+  .traffic-map {
     position: relative;
     z-index: 9;
     width: vw(1290);