4.2

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

@@ -78,18 +78,19 @@
       </div>
     </div>
   </div>
-  <video-dialog v-model="videoShow" src="" />
+  <!-- <video-dialog v-model="videoShow" src="" /> -->
+  <video-dialog v-model="videoShow" :src="src" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
 </template>
 
 <script setup>
   import countup from 'vue-countup-v3'
   import trafficJam from './traffic-jam'
-
+  import { getPreviewUrlApi } from '@/api/home'
   import { useMap } from '@/hooks/map'
 
-  import { getRouterListApi, getRoutersApi } from '@/api/traffic'
-
-  const { map, initMap } = useMap()
+  import { getRouterListApi, getRoutersApi,getRoutersMapApi } from '@/api/traffic'
+  import mapIcon from '@/assets/images/map-video.png'
+  const { map, initMap,addMarker,marker } = useMap()
 
   let props = defineProps({
     list: {
@@ -97,19 +98,21 @@
       default: () => []
     }
   })
-
+  let src = ref('')
+  let cameraIndexCode = ref('')
   let current = ref(0)
   let routerList = ref([])
   let routers = ref([])
   let videoShow = ref(false)
-
+  let markerList = ref([])
+  let isCollect = ref(0)
   watch(
     () => [routerList.value, routers.value],
     (val) => {
       if (val[0].length > 0) {
         nextTick(() => {
           let { longitude, latitude, level } = val[0][0]
-		  console.log(longitude, latitude, level,'longitude, latitude, level')
+		  // console.log(longitude, latitude, level,'longitude, latitude, level')
           initMap('traffic-map', longitude, latitude, level)
           map.value.setTrafficOn()
         })
@@ -119,7 +122,41 @@
       immediate: true
     }
   )
-
+  watch(
+	() => [markerList.value,map.value],
+	(val) => {
+		
+		if(val[0].length&&val[1]){
+			nextTick(()=>{
+				val[0].forEach((item,index)=>{
+					addMarker(mapIcon,[item.longitude,item.latitude],[40, 60])
+					marker.value.addEventListener('click', (e) => {
+						console.log(item,'111111111111')
+						cameraIndexCode.value = item.cameraIndexCode
+						isCollect.value = item.isCollect
+						getPreviewUrl(item.cameraIndexCode)
+					})
+				})
+				
+			})
+		}
+	},
+	{
+	  immediate: true
+	}
+  )
+  const getPreviewUrl = async (code) => {
+    let res = await getPreviewUrlApi({
+      cameraIndexCode: code,
+      type: 'hls'
+    })
+    src.value = res.data.url
+    videoShow.value = true
+  }
+  const getRoutersMap = async()=>{
+	  let res = await getRoutersMapApi();
+	  markerList.value = res.data
+  }
   const handleNav = (e, index) => {
     current.value = index
     map.value.centerAndZoom(new BMapGL.Point(e.longitude, e.latitude), e.level)
@@ -145,6 +182,7 @@
   onMounted(() => {
     getRouterList()
     getRouters()
+	getRoutersMap()
   })
 </script>