gemercheung 2 년 전
부모
커밋
9456a21cd3
4개의 변경된 파일62개의 추가작업 그리고 7개의 파일을 삭제
  1. 1 1
      index.html
  2. 5 6
      src/App.vue
  3. 0 0
      src/components/scenceList.vue
  4. 56 0
      src/components/sceneList.vue

+ 1 - 1
index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title></title>
   </head>

+ 5 - 6
src/App.vue

@@ -8,12 +8,12 @@
           :collapsed-width="10"
           :width="200"
           show-trigger="arrow-circle"
-          content-style="padding: 24px;"
+          content-style="padding:0px;"
           bordered
         >
+          <sceneList></sceneList>
         </n-layout-sider>
         <n-layout-content content-style="padding: 0px;">
-
           <iframe
             v-if="isOK"
             id="mainFrame"
@@ -51,6 +51,7 @@ import {
 } from "naive-ui";
 import { onMounted, ref, computed } from "vue";
 import { useUrlSearchParams } from "@vueuse/core";
+import sceneList from "./components/sceneList.vue";
 const isOK = ref(true);
 // const iframe = ref(
 //   "https://127.0.0.1:6100/livestream/?vruserId=066893f525e56f09ce8b4420dff7e068&roomId=fd_22253&role=leader&avatar=https%3A%2F%2F4dkk.4dage.com%2Ftake-look%2Fimages%2Fother%2F1573b607db124917804edfaf1887df7a.jpeg&name=Gemer1&isTour=0&m=KJ-t-wOXfx2SDFy&vlog=1"
@@ -68,7 +69,7 @@ const params: needParams = useUrlSearchParams("history");
 
 const iframeURL = computed(() => {
   const searchParams = new URLSearchParams(
-    Object.assign({}, params ? params : {})
+    Object.assign({ platform: "fire" }, params ? params : {})
   );
   const iframeDomain = import.meta.env.VITE_APP_IFRAME_URL;
   const url = searchParams.toString();
@@ -88,8 +89,7 @@ const loadFrame = (event: Event) => {
   // console.log("target", event.target);
   const ele = event.target as any as HTMLIFrameElement;
   if (ele.contentWindow) {
-    // debugger;
-    // console.warn("target", ele.contentWindow);
+
   }
 };
 const getIframeMessage = (event: MessageEvent) => {
@@ -98,7 +98,6 @@ const getIframeMessage = (event: MessageEvent) => {
     if (type === "metadata") {
       document.title = data.title;
       console.warn("getIframeMessage", data);
-      // debugger;
     }
   }
 };

+ 0 - 0
src/components/scenceList.vue


+ 56 - 0
src/components/sceneList.vue

@@ -0,0 +1,56 @@
+<template>
+  <n-list hoverable clickable class="sceneList">
+    <n-list-item @click.stop="handleClickScene">
+      <n-thing title="相见恨晚" content-style="margin-top: 10px;">
+        <template #description> 八目相机 </template>
+      </n-thing>
+    </n-list-item>
+    <n-list-item @click.stop="handleClickScene">
+      <n-thing title="相见恨晚xxx22222" content-style="margin-top: 10px;">
+        <template #description> 八目相机 </template>
+      </n-thing>
+    </n-list-item>
+    <n-list-item @click.stop="handleClickScene">
+      <n-thing title="相见恨晚xxx22222" content-style="margin-top: 10px;">
+        <template #description> 转台相机 </template>
+      </n-thing>
+    </n-list-item>
+    <n-list-item @click.stop="handleClickScene">
+      <n-thing
+        title="相见恨晚xxx22222xxxxxxxxxx"
+        content-style="margin-top: 10px;"
+      >
+        <template #description> 八目相机 </template>
+      </n-thing>
+    </n-list-item>
+    <n-list-item @click.stop="handleClickScene">
+      <n-thing title="相见恨晚xxx22222" content-style="margin-top: 10px;">
+        <template #description> 八目相机 </template>
+      </n-thing>
+    </n-list-item>
+  </n-list>
+</template>
+<script setup lang="ts">
+import { NList, NListItem, NThing } from "naive-ui";
+const handleClickScene = () => {
+  const iframe = document.querySelector("iframe");
+  console.log("iframe", iframe);
+  if (iframe) {
+    iframe.contentWindow?.postMessage(
+      {
+        type: "sync-scene",
+        data: {
+          id: "xxxxxx",
+        },
+      },
+      "*"
+    );
+  }
+};
+</script>
+<style lang="scss">
+.sceneList {
+  display: block;
+  width: 200px;
+}
+</style>