diff --git a/src/views/scenic/components/box-1.vue b/src/views/scenic/components/box-1.vue
index f55860e..00879c2 100644
--- a/src/views/scenic/components/box-1.vue
+++ b/src/views/scenic/components/box-1.vue
@@ -20,10 +20,8 @@
       </div>
     </div>
     <div class="main">
-      <img v-if="scenicSpotId == 'root000000'" src="@/assets/images/bdc.png" alt="" />
-      <img v-if="scenicSpotId == 'root00000000'" src="@/assets/images/sxzd.png" alt="" />
-      <img v-if="scenicSpotId == '龙桥河'" src="@/assets/images/lqh.jpg" alt="" />
-      <!-- <div class="scenic-box" id="scenic-map"></div> -->
+      <iframe v-if="scenicSpotId == 'root000000' || scenicSpotId == 'root00000000'" width="100%" height="100%" src="/sxzd/sxzd.html"></iframe>
+      <iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/lqh/lqh.html"></iframe>
     </div>
     <div class="footer">
       <div class="flex">
@@ -97,6 +95,7 @@
       </div>
     </div>
   </div>
+  <video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
 </template>
 
 <script setup>
@@ -108,8 +107,7 @@
   import { useScenicStore } from '@/stores/scenic'
 
   import { useMap } from '@/hooks/map'
-
-  import sxzd from '@/assets/images/sxzd.png'
+  import {getPreviewUrlApi} from "@/api/home.js";
 
   const router = useRouter()
   const scenicStore = useScenicStore()
@@ -126,6 +124,20 @@
   const handleMore = () => {
     router.push('/workOrder')
   }
+  let src = ref('')
+  let cameraIndexCode = ref('')
+  let videoShow = ref(false)
+  window.addEventListener("message", async(e) => {
+    let {code,data} = await getPreviewUrlApi({
+      type: 'hls',
+      cameraIndexCode:e.data.cameraIndexCode
+    })
+    if(code===200){
+      src.value = data.url
+      cameraIndexCode.value = e.data.cameraIndexCode
+      videoShow.value = true
+    }
+  });
 
   // onMounted(() => {
   //   scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {