新增地图弹窗 bug修改

src/components/VideoDialog/index.vue

@@ -32,7 +32,22 @@
             />
             <img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
             <img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
+			
           </div>
+		  <div class="action-item">
+			  <div
+			    v-if="colletCond == 1"
+			    class="video-follow"
+			    @click.stop="handleCollect()"
+			    >取消关注
+			  </div>
+			  <div
+			    v-if="colletCond == 0"
+			    class="video-unfollow"
+			    @click.stop="handleCollect()"
+			    >关注
+			  </div>
+		  </div>
         </div>
       </div>
       <img class="close" src="@/assets/images/close.png" @click="handleClose" />
@@ -43,9 +58,11 @@
 <script setup>
   import Hls from 'hls.js'
   import { ElMessage } from 'element-plus'
-
+  import {
+    postVideoCollectApi
+  } from '@/api/monitor'
   import { postVideoControlApi } from '@/api/monitor'
-
+  import pubSub from 'pubsub-js'
   const Z00M_IN = 'ZOOM_IN' // 焦距变大
   const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
   const UP = 'UP' // 上转
@@ -64,28 +81,45 @@
     cameraIndexCode: {
       type: String,
       default: ''
-    }
+    },
+	isCollect:{
+		type: Number,
+		default: 0
+	}
   })
-
+  let colletCond = ref(0)
   let modelValue = defineModel()
   let videoRef = ref()
   let webRtcServer = null
   let hlsRef = null
 
-  // watch(
-  //   () => modelValue.value,
-  //   (val) => {
-  //     if (val) {
-  //       setTimeout(() => {
-  //         init()
-  //       }, 1000)
-  //     }
-  //   },
-  //   {
-  //     immediate: true
-  //   }
-  // )
-
+  watch(
+    () => props.isCollect,
+    (val) => {
+      if (val) {
+		  colletCond.value = val
+        // setTimeout(() => {
+        //   init()
+        // }, 1000)
+      }
+    },
+    {
+      immediate: true
+    }
+  )
+  // 关注
+  const handleCollect = async (id, status, index) => {
+    await postVideoCollectApi({
+      cameraIndexCode:props.cameraIndexCode,
+      isCollect: colletCond.value == 0 ? 1 : 0
+    })
+    if (colletCond.value == 0) {
+      colletCond.value = 1
+    } else {
+      colletCond.value = 0
+    }
+    pubSub.publish('videoCollect', props.cameraIndexCode)
+  }
   const handleAction = async (e) => {
     if (e == STOP) {
       ACTION = '1'
@@ -143,9 +177,34 @@
       }
     })
   }
+  onMounted(()=>{
+	  
+  })
 </script>
 
 <style scoped lang="scss">
+	.video-follow,.video-unfollow {
+	  // cursor: pointer;
+	  // display: none;
+	  // position: absolute;
+	  // right: vw(8);
+	  // top: vw(8);
+	  // z-index: 9999;
+	  // margin-left:vw(20);
+	  padding: 0 vw(20);
+	  height: vh(24);
+	  text-align: center;
+	  line-height: vh(24);
+	  font-weight: 400;
+	  font-size: vw(16);
+	  color: #ffffff;
+	  // background-image: url('@/assets/images/unfollow.png');
+	  background-size: 100% 100%;
+	}
+	.video-item__follow {
+	  
+	  // background-image: url('@/assets/images/unfollow.png');
+	}
   .dialog {
     z-index: 9999;
     .action {