gx

src/view/dialog/dialogCameras.vue

@@ -39,6 +39,7 @@
           </div>
         </div>
         <div
+          id="videoBox"
           style="
             width: 100%;
             height: calc(100% - 110px);
@@ -89,22 +90,51 @@ const data = reactive({
   columns: [],
   tableData: [],
 });
-
+const num = ref(false);
+const hlsUriSslNow = ref("");
 const gridData = [];
 // 监听
 watch(
   () => props.cameraShow,
   (newVal, oldVal) => {
-    cameraShow.value = newVal;
-    attachmentLink.value = props.hlsUriSsl;
-    nextTick(() => {
-      loadVideo();
-    });
+    if (newVal) {
+      if (hlsUriSslNow.value == "") {
+        num.value = false;
+      } else {
+        num.value = true;
+      }
+      // if (hlsUriSslNow.value != "" && props.hlsUriSsl != hlsUriSslNow.value)
+      cameraShow.value = newVal;
+      hlsUriSslNow.value = props.hlsUriSsl;
+      attachmentLink.value = hlsUriSslNow.value;
+      dp.value = null;
+      //当摄像头第二次打开时，要先创建dom
+      if (num.value) {
+        console.log(22222, document.getElementById("videoBox"));
+        insertVideo();
+      }
+      nextTick(() => {
+        loadVideo();
+      });
+    }
   }
 );
-
+const insertVideo = () => {
+  const videoElement = document.createElement("video");
+  videoElement.id = "videoPlayer";
+  videoElement.className = "video-js vjs-default-skin";
+  videoElement.controls = true;
+  videoElement.crossOrigin = "anonymous";
+  videoElement.playsinline = true;
+  videoElement.autoplay = true;
+  const sourceElement = document.createElement("source");
+  sourceElement.src = attachmentLink.value;
+  sourceElement.type = "application/x-mpegURL";
+  videoElement.appendChild(sourceElement);
+  document.getElementById("videoBox").appendChild(videoElement);
+};
 const dp = ref(null);
-const videoElement = ref(null);
+const videohtml = ref("");
 const attachmentLink = ref("");
 const options = {
   playbackRates: [0.5, 1.0, 1.5, 2.0],
@@ -129,6 +159,8 @@ const closeDialog = () => {
   cameraShow.value = false;
   if (dp.value) {
     dp.value.dispose(); // dispose()会直接删除Dom元素
+    // dp.value.pause();
+    dp.value = null;
   }
   emit("close");
 };

src/view/sy_map.vue

@@ -111,7 +111,9 @@
       <div class="right" style="width: 517px" v-show="!showEdit">
         <div class="jbggfwq">
           <div class="title">
-            <div class="title_name"><span @click="openSxt" > 基本公共服务圈</span></div>
+            <div class="title_name">
+              <span @click="openCamera"> 基本公共服务圈</span>
+            </div>
           </div>
           <div class="jbggfwq_content">
             <div
@@ -208,12 +210,12 @@
           <!-- v-if="currentData.camera" -->
         </template>
       </Dialog>
-      <DialogCameras
-        style="width: 1920px; height: 1080px"
-        v-show="sxtShow"
-        @sxt="onsxt"
+      <DialogCamera
+        :cameraShow="sxtShow.show"
+        :hlsUriSsl="sxtShow.hlsUriSsl"
+        @close="close1"
       >
-      </DialogCameras>
+      </DialogCamera>
       <!-- 详情 -->
       <personDetail
         class="detail"
@@ -328,7 +330,7 @@ import b6 from "@/assets/images/map/b6.png";
 import xcbg from "@/assets/images/map/xcbg.png";
 import AED from "@/assets/images/map/AED.png";
 import Dialog from "./dialog/dialogMapDp.vue";
-import DialogCameras from "./dialog/dialogCameras.vue";
+import DialogCamera from "./dialog/dialogCameras.vue";
 import personDetail from "./person/index.vue";
 // import gcj02towgs84 from "@/utils/gcj02towgs84.js";
 // import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw";
@@ -788,7 +790,11 @@ const yaosuIcon = ref({
 let currentMarker = null; // 用于保存当前标记的引用
 // 详情弹框
 const dialogShow = ref(false);
-const sxtShow = ref(false);
+const sxtShow = reactive({
+  show: false,
+  deviceCode: "",
+  hlsUriSsl: "",
+});
 const tableType = reactive({
   url: "",
   title: "人员列表",
@@ -2217,10 +2223,12 @@ const close = () => {
   pagination.currentPage = 1;
   tableType.data = [];
 };
-
+// 摄像头关闭
+const close1 = () => {
+  sxtShow.show = false;
+};
 const onsxt = () => {
-  console.log('sxt');
-  
+  console.log("sxt");
 };
 //表格分页
 const handlePagination = (current) => {
@@ -2258,9 +2266,10 @@ const handlePagination = (current) => {
     person_detail(age);
   }
 };
+
 // 打开摄像头
-const openSxt = (e) => {
-  sxtShow.value = true;
+const openCamera = () => {
+  sxtShow.show = true;
 };
 //打开人物详情页面
 const openMessage = (e) => {