新增地图弹窗 bug修改

2025-03-21 18:12:04 +08:00
parent 2208efc12e
commit 08041130e8
13 changed files with 262 additions and 51 deletions
--- a/src/views/hotel/components/video-box.vue
+++ b/src/views/hotel/components/video-box.vue
@@ -12,13 +12,13 @@
 	          <div
 	            v-if="item.isCollect == 1"
 	            class="video-item__follow"
-	            @click.stop="handleCollect(item.id, item.isCollect, index)"
+	            @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
 	            >取消关注
 	          </div>
 	          <div
 	            v-if="item.isCollect == 0"
 	            class="video-item__unfollow"
-	            @click.stop="handleCollect(item.id, item.isCollect, index)"
+	            @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
 	            >关注
 	          </div>
 	          <video
@@ -170,7 +170,7 @@
 	// 关注
 	const handleCollect = async (id, status, index) => {
 	  await postVideoCollectApi({
-	    id,
+	    cameraIndexCode:id,
 	    isCollect: status == 0 ? 1 : 0
 	  })
 	  if (status == 0) {
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -14,11 +14,16 @@
            {{ item.dictLabel }}
          </span>
        </div>
+		<div 
+		 :class="{ active: current == 3 }"
+		@click="handleNav(3)" class="li">
+			<span>自定义</span>
+		</div>
      </div>
      <div class="bom-box">
        <Title2 title="检索" />
        <div class="search-box">
-          <el-input placeholder="请输入内容" v-model="cameraName" clearable @input="onInput" />
+          <el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" />
          <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
        </div>

@@ -38,7 +43,7 @@
                class="tree-item__child-item"
                v-for="(resource, x) in item.videoResources"
                :key="x"
-                @click="handleCamera(resource.cameraIndexCode)"
+                @click="handleCamera(resource.cameraIndexCode,resource)"
              >
                {{ resource.cameraName || resource.cameraIndexCode }}
              </div>
@@ -60,13 +65,13 @@
            <div
              v-if="item.isCollect == 1"
              class="video-item__follow"
-              @click.stop="handleCollect(item.id, item.isCollect, index)"
+              @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
              >取消关注
            </div>
            <div
              v-if="item.isCollect == 0"
              class="video-item__unfollow"
-              @click.stop="handleCollect(item.id, item.isCollect, index)"
+              @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
              >关注
            </div>
            <video
@@ -157,7 +162,7 @@
      </div>
    </div>
  </div>
-  <VideoDialog v-model="show" :src="videoSrc" />
+  <VideoDialog v-model="show" :isCollect="isCollect" :src="videoSrc" />
 </template>

 <script setup>
@@ -188,6 +193,7 @@
    label: 'label',
    children: 'children'
  }
+  let isCollect = ref(0)
  let command = ref('')
  let videoList = ref([])
  let navList = ref([])
@@ -264,6 +270,10 @@
    videoList.value = []
    total.value = 0
    current.value = e
+	if(e==3){
+		getVideoList(3)
+		return false
+	}
    getVideoList()
  }
  const handleBack = () => {
@@ -311,17 +321,18 @@
  const handleRegions = (e) => {
    regionList.value[e].show = !regionList.value[e].show
  }
-  const handleCamera = async (cameraIndexCode) => {
+  const handleCamera = async (cameraIndexCode,resource) => {
    show.value = true
    let res = await getPreviewUrlApi({
      type: 'hls',
      cameraIndexCode
    })
+	isCollect.value = resource.isCollect
    videoSrc.value = res.data.url
  }
  const handleCollect = async (id, status, index) => {
    await postVideoCollectApi({
-      id,
+      cameraIndexCode:id,
      isCollect: status == 0 ? 1 : 0
    })
    if (status == 0) {
@@ -331,15 +342,22 @@
    }
    pubSub.publish('videoCollect', id)
  }
-  const getVideoList = async () => {
+  const getVideoList = async (val) => {
+	  
    try {
      if (loading.value) return
      loading.value = true
-      params.businessVideoDisplayPosition = navList.value[current.value].dictValue
+	  if(val==3){
+		  params.businessVideoDisplayPosition = ''
+	  }else{
+		 params.businessVideoDisplayPosition = navList.value[current.value].dictValue 
+	  }
+	  
      let res = await getVideoListApi(params)
+	  console.log(res,'list   55555')
      total.value = res.total
      if (res.data.length > 0) {
-        postVideoRemain()
+        // postVideoRemain()
        videoList.value = res.data
        nextTick(() => {
          videoList.value.forEach(async (x, index) => {
@@ -386,7 +404,9 @@
    console.log(regionList.value, ' regionList.value')
  }
  const onMonitorChange = () => {
+	  
    monitorChange = pubSub.subscribe('monitorChange', (res, data) => {
+		current.value = 0
      params.businessScenicArea = data.scenicSpotId
      params.pageNum = 1
      videoList.value = []
@@ -558,7 +578,7 @@
          &__child-item {
            padding: vh(0) vw(20) vh(20) vw(20);
            cursor: pointer;
-            color: #999;
+            color: rgb(192,216,254);
            font-weight: 400;
            font-size: vw(15);
            white-space: nowrap;
--- a/src/views/scenic/components/big-map.vue
+++ b/src/views/scenic/components/big-map.vue
@@ -366,6 +366,7 @@

  onMounted(() => {
    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+		console.log(data,'99999999999999999999999999999999999999')
      scenicSpotId.value = data.scenicSpotId
      lat.value = data.lat
      lng.value = data.lng
--- a/src/views/scenic/components/box-2.vue
+++ b/src/views/scenic/components/box-2.vue
@@ -139,7 +139,10 @@
    </div>
    <div class="flex mt-8">
      <div class="box-3 mr-8">
-        <Title1 title="交通信息" />
+		  <div class="look-box">
+			  <Title1 title="交通信息" />
+			  <div @click="hanldeLookMap" class="look-btn">查看详情</div>
+		  </div>
        <div class="count-box flex">
          <count-item
            v-for="(item, index) in scenicStore.trafficData.infoList"
@@ -270,7 +273,7 @@
              </div>
            </div>
            <div class="car-box mt-10">
-              <img class="icon" src="@/assets/images/icon-6.png" />
+              <img class="icon" src="@/assets/images/icon-7.png" />
              <div class="car-item pr-20">
                <div class="label">运营船只</div>
                <div class="value flex">
@@ -300,6 +303,7 @@
    :carList="scenicStore.carShipData.car.list"
    :shipList="scenicStore.carShipData.ship.list"
  />
+  <traMap :longitude="longitude" :latitude="latitude" v-model="traMapShow"></traMap>
 </template>

 <script setup>
@@ -317,6 +321,7 @@
  import age from './age'
  import jam from './jam'
  import BigMap from './big-map'
+  import traMap from './tra-map'
  import TrafficFlow from './traffic-flow'

  import { useMap } from '@/hooks/map'
@@ -329,7 +334,13 @@
  let scenicChange = null
  let carOverlays = ref([])
  let shipOverlays = ref([])
-
+  let traMapShow = ref(false)
+  //查看交通信息
+  let latitude = ref('')
+  let longitude = ref('')
+  const hanldeLookMap = ()=>{
+	  traMapShow.value = true
+  }
  const garageList = computed(() => {
    return scenicStore.stopCarData.headList
  })
@@ -437,6 +448,8 @@

  onMounted(() => {
    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+		latitude.value = data.lat
+		longitude.value = data.lng
      carOverlays.value = []
      shipOverlays.value = []
      initMap('car-ship', data.lng, data.lat, 15)
@@ -448,6 +461,22 @@
 </script>

 <style scoped lang="scss">
+	.look-box{
+		position:relative;
+		.look-btn{
+			position:absolute;
+			right:vw(20);
+			top:50%;
+			transform: translateY(-50%);
+			padding: vw(16);
+			display: flex;
+			align-items: center;
+			background: #0a4190;
+			border-radius: vw(8);
+			font-size:vw(24);
+			color:#fff;
+		}
+	}
  :deep(.BMap_cpyCtrl) {
    display: none;
  }
--- a/src/views/scenic/components/tra-map.vue
+++ b/src/views/scenic/components/tra-map.vue
@@ -0,0 +1,63 @@
+<template>
+	<div class="dialog">
+	  <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
+		  <img @click="modelValue = false" class="close" src="@/assets/images/close.png"  />
+		  <div id="big-car-ship" class="big-car-ship" />
+	  </el-dialog>
+    </div>
+</template>
+
+<script setup>
+	import { useMap } from '@/hooks/map'
+	const { map, marker, initMap, addMarker } = useMap()
+	let modelValue = defineModel()
+	let props = defineProps({
+	  longitude: {
+	    type: String,
+	    default: ''
+	  },
+	  latitude: {
+	    type: String,
+	    default: ''
+	  }
+	})
+	watch(
+	  () => modelValue.value,
+	  (val) => {
+	    if (val) {
+	      setTimeout(() => {
+			  console.log(props.longitude,props.latitude)
+	        initMap('big-car-ship', props.longitude, props.latitude, 17)
+			map.value.setTrafficOn()
+	      }, 1000)
+	    }
+	  },
+	  { immediate: true }
+	)
+</script>
+
+<style scoped lang="scss">
+	.big-car-ship {
+	  flex: 1;
+	  height: vh(820);
+	}
+	.dialog {
+	  :deep(.el-dialog) {
+	    width: vw(2540);
+	    padding: vw(8);
+	    background-image: url('@/assets/images/dialog-bg.png') !important;
+	    background-size: 100% 100%;
+	  }
+	  :deep(.el-dialog__header) {
+	    padding-bottom: 0 !important;
+	  }
+	}
+	.close {
+	  cursor: pointer;
+	  position: absolute;
+	  right: vw(20);
+	  top: vw(20);
+	  width: vw(60);
+	  z-index: 9999;
+	}
+</style>
--- a/src/views/traffic/components/box-2.vue
+++ b/src/views/traffic/components/box-2.vue
@@ -109,6 +109,7 @@
      if (val[0].length > 0) {
        nextTick(() => {
          let { longitude, latitude, level } = val[0][0]
+		  console.log(longitude, latitude, level,'longitude, latitude, level')
          initMap('traffic-map', longitude, latitude, level)
          map.value.setTrafficOn()
        })