弹出框样式调整

src/App.vue

@@ -6,6 +6,10 @@
 import UeVideo from './components/UeVideo.vue'
 </script>
 <style scoped>
+#app {
+    overflow: hidden;
+}
+
 /* html,
 body,
 #app,

src/assets/css/home.scss

@@ -24,27 +24,43 @@
 }
 
 // 点击模型弹出框
-.model-detail {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    // flex-wrap: wrap;
+.modelInfo {
+    position: absolute;
     padding: 10px;
+    border-radius: 5px;
+    background-color: #fff;
+    width: 206px;
+    height: 165px;
+    display: none;
+    z-index: 999;
 
-    span {
-        font-size: 16px;
+    .model-detail {
+        position: absolute;
+        // border: 2px dashed #00CF78;
+        display: none;
 
-        width: 100%;
-        font-family: Microsoft YaHei UI;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        // flex-wrap: wrap;
+        // padding: 10px;
+
+
+        span {
+            font-size: 16px;
+
+            width: 100%;
+            font-family: Microsoft YaHei UI;
 
-        // border: 1px solid red;
-        // margin: 6px;
-        margin: 6px 0;
-        font-weight: 400;
+            // border: 1px solid red;
+            // margin: 6px;
+            margin: 6px 0;
+            font-weight: 400;
 
-        .title {
-            color: #000;
-            font-weight: 700;
+            .title {
+                color: #000;
+                font-weight: 700;
+            }
         }
     }
 }

src/components/UeVideo.vue

@@ -57,5 +57,6 @@ export default {
   width: 100%;
   height: 100%;
   position: absolute;
+  overflow: hidden;
 }
 </style>

src/components/home.vue

@@ -6,33 +6,24 @@
         <el-container>
             <left></left>
             <right></right>
-            <div ref="linedomRef" style="width: 2px;height:2px;background-color: green;position: absolute;z-index: 228;">
+            <div ref="linedomRef" style="width:10px;height:1px;position: absolute;z-index: 228;">
             </div>
 
         </el-container>
 
 
-        <el-popover placement="right" v-model:visible="visible" :width="260" :virtual-ref="triggerRef" trigger="click"
-            virtual-triggering>
-            <div class="model-detail" ref="popoverRef" id="popoverRef">
+
+        <div ref="popoverRef" id="popoverRef" class="modelInfo">
+            <div class="model-detail">
                 <span v-for="item in classDeviceInfo">
                     <span class="title">{{ item && item.name }}: </span>
                     {{ item && item.value }}
                     {{ classDeviceInfo.value &&
                         classDeviceInfo.value.status }}
                 </span>
-
-                <!-- <span><span class="title">{{ classDeviceInfo.value && classDeviceInfo.value.name }}: </span>{{
-                    classDeviceInfo.value &&
-                    classDeviceInfo.value.status }}</span>
-                <span><span class="title">设备状态: </span>{{ classDeviceInfo.value && classDeviceInfo.value.classes }}</span>
-                <span><span class="title">位置: </span>{{ classDeviceInfo.value && classDeviceInfo.value.course }}</span>
-                <span><span class="title">型号: </span>{{ classDeviceInfo.value && classDeviceInfo.value.theory }}</span>
-                <span><span class="title">质保期: </span>{{ classDeviceInfo.value && classDeviceInfo.value.name }}</span> -->
-                <!-- <span><span class="title">实到人数: </span>{{ clickData.value && clickData.value.actual }}</span>
-                <span><span class="title">老师: </span>{{ clickData.value && clickData.value.teacher }}</span> -->
             </div>
-        </el-popover>
+        </div>
+
 
         <!-- 视频播放弹框 -->
         <el-dialog class="videoDialog" v-model="videoDialog" title="互动教师1" width="60%" align="center" top="4%">
@@ -129,7 +120,6 @@ export default ({
         let centerDialogVisible = ref(false)
         // 获取点击点数据
         let clickData = reactive({})
-        const visible = ref(false)
         const triggerRef = ref({
             getBoundingClientRect() {
                 // console.log("positon----方法返回元素的大小及其相对于视口的位置", position.value)
@@ -180,15 +170,18 @@ export default ({
             endPlugOutlineColor: '#2AC367',
             size: 3,
             startPlugSize: 1.5,
-            startPlugOutlineSize: 1,
-            endPlugSize: 3,
-            endPlugOutlineSize: 3
+            startPlugOutlineSize: 2,
+            endPlugSize: 1.5,
+            endPlugOutlineSize: 2
         })
         const classDeviceInfo = ref([])
+        const classDataLoaded = ref(false)
         const classDevice = async function (deviceCode) {
             let res = await getClassDetail(deviceCode)
-            // console.log("获取到了当前点击物体得详情", res)
-            classDeviceInfo.value = res.data
+            console.log("获取到了当前点击物体得详情", res)
+            classDeviceInfo.value = res.data;
+            classDataLoaded.value = true
+
         }
         const clickData1 = ref({})
         const mouseClick = function (e) {
@@ -197,75 +190,204 @@ export default ({
             clickData1.value.y = e.clientY;
 
         }
-        onMounted(() => {
-            // window.addEventListener('mousedown', mouseClick);
-
-            // 监听一下页面点击情况
-            addResponseEventListener("open", (data) => {
-                if (data) {
-                    let json = eval("(" + data + ")");//转对象
-                    clickData.value = json;
-                    console.log("clickData---点击的数据", json)
-                    // console.log("看一下", linedomRef.value.style.top, json, "json")
-                    visible.value = true
-                    linedomRef.value.style.top = (json.y - 60) + "px";
-                    linedomRef.value.style.left = json.x + "px";
-
-                    let dot = {
-                        x: json.x,
-                        y: json.y - 80
-                    }
+        const handleResponseFunction = (data) => {
+            // console.log("从UE返回过来的值", data)
+            let json = eval("(" + data + ")");//转对象
+            clickData.value = json;
+            console.log("clickData---点击的数据", json)
+            if (json.deviceCode) {
+                getClassDetail(json.deviceCode).then(res => {
+                    classDeviceInfo.value = res.data;
+                    console.log("json.y ", json,);
+                    linedomRef.value.style.top = clickData.value.y + "px";
+                    linedomRef.value.style.left = clickData.value.x + "px";
+                    console.log("可以开始移动")
                     console.log("看一下---小圆点的值--top", linedomRef.value.style.top)
                     console.log("看一下---小圆点的值--left", linedomRef.value.style.left)
-                    // alert(json.x, json.y)
+
+                    // // 弹出框位置
+                    popoverRef.value.style.display = "block"
                     switch (json.direction) {
                         case "Left":
-                            mousemoveHandler(json.x - 380, dot.y)
+                            popoverRef.value.style.top = json.y - 30 + 'px'
+                            popoverRef.value.style.left = json.x - 320 + 'px'
                             break;
                         case "Up":
-                            console.log("在最上面", json.x, json.x - 100);
-                            mousemoveHandler(dot.x - 80, dot.y - 200);
+                            popoverRef.value.style.top = (json.y - 300) + 'px'
+                            popoverRef.value.style.left = (json.x - 120) + 'px'
                             break;
                         case "Right":
-                            console.log("没有走到这里来吗", 12312);
-                            mousemoveHandler(Number(json.x) + 30, Number(json.y) - 80)
+                            popoverRef.value.style.top = (Number(json.y)) + 'px'
+                            popoverRef.value.style.left = Number(json.x) + 100 + 'px'
+
                             break;
                         case "Down":
-                            // console.log("xxxx没有走到这里来吗--down", json.y,);
-                            mousemoveHandler(Number(json.y), Number(json.x) - 260);
+                            popoverRef.value.style.top = (Number(json.y) + 100) + 'px'
+                            popoverRef.value.style.left = Number(json.x) + 'px'
                             break;
                         default:
-                            mousemoveHandler(json.x, json.y);
+                            popoverRef.value.style.top = json.y - 60 + 'px'
+                            popoverRef.value.style.left = json.x + 'px'
+
                             break;
                     }
-                    // mousemoveHandler(Number(json.x) + 30, Number(json.y) - 80)
+
                     if (lineContainer.value) {
                         lineContainer.value.remove()
                     }
-                    setTimeout(() => {
-                        lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value, lineStyleOption.value)
-                        lineContainer.value.show('draw', {
-                            duration: 1000, //持续时长
-                            timing: 'ease-in' // 动画函数
-                        })
-                        lineContainer.value.endPlugOutline = true;
-                        lineContainer.value.startPlugOutline = true;
-                        lineContainer.value.position();
-                    }, 0);
 
+                    lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value, lineStyleOption.value)
+                    lineContainer.value.show('draw', {
+                        duration: 1000, //持续时长
+                        timing: 'ease-in' // 动画函数
+                    })
+                    lineContainer.value.endPlugOutline = true;
+                    lineContainer.value.startPlugOutline = true;
+                    lineContainer.value.position();
 
 
-                }
-            })
+                })
 
-            addResponseEventListener("End", data => {
-                let json = eval("(" + data + ")");
-                clickData.value = json;
-                classDevice()
-                // // classDevice()
-                // console.log("移动结束", 123123, data)
+            }
 
-            })
+
+
+            // linedomRef.value.style.top = json.y + "px";
+            // linedomRef.value.style.left = json.x + "px";
+
+
+            // console.log("看一下---小圆点的值--top", linedomRef.value.style.top)
+            // console.log("看一下---小圆点的值--left", linedomRef.value.style.left)
+
+            // // 弹出框位置
+
+            // popoverRef.value.style.display = "block"
+            // switch (json.direction) {
+            //     case "Left":
+            //         popoverRef.value.style.top = json.y - 30 + 'px'
+            //         popoverRef.value.style.left = json.x - 320 + 'px'
+            //         break;
+            //     case "Up":
+            //         popoverRef.value.style.top = (json.y - 350) + 'px'
+            //         popoverRef.value.style.left = (json.x - 120) + 'px'
+            //         break;
+            //     case "Right":
+            //         popoverRef.value.style.top = (Number(json.y)) + 'px'
+            //         popoverRef.value.style.left = Number(json.x) + 100 + 'px'
+
+            //         break;
+            //     case "Down":
+            //         popoverRef.value.style.top = (Number(json.y) + 100) + 'px'
+            //         popoverRef.value.style.left = Number(json.x) + 'px'
+            //         break;
+            //     default:
+            //         popoverRef.value.style.top = json.y - 60 + 'px'
+            //         popoverRef.value.style.left = json.x + 'px'
+
+            //         break;
+            // }
+            // if (lineContainer.value) {
+            //     lineContainer.value.remove()
+            // }
+            // setTimeout(() => {
+            //     lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value, lineStyleOption.value)
+            //     lineContainer.value.show('draw', {
+            //         duration: 1000, //持续时长
+            //         timing: 'ease-in' // 动画函数
+            //     })
+            //     lineContainer.value.endPlugOutline = true;
+            //     lineContainer.value.startPlugOutline = true;
+            //     lineContainer.value.position();
+            // }, 3000);
+
+
+        }
+        onMounted(() => {
+            // window.addEventListener('mousedown', mouseClick);
+
+            // 监听一下页面点击情况
+            // addResponseEventListener("open", (data) => {
+            //     if (data) {
+            //         let json = eval("(" + data + ")");//转对象
+            //         clickData.value = json;
+            //         console.log("clickData---点击的数据", json)
+            //         // console.log("看一下", linedomRef.value.style.top, json, "json")
+            //         visible.value = true
+            //         linedomRef.value.style.top = json.y + "px";
+            //         linedomRef.value.style.left = json.x + "px";
+
+            //         // let dot = {
+            //         //     x: json.x,
+            //         //     y: json.y - 80
+            //         // }
+            //         console.log("看一下---小圆点的值--top", linedomRef.value.style.top)
+            //         console.log("看一下---小圆点的值--left", linedomRef.value.style.left)
+
+            //         // 弹出框位置
+            //         // popoverRef.value.style.display = "block"
+            //         // popoverRef.value.style.top = json.y - 60 + 'px'
+            //         // popoverRef.value.style.left = json.x + 'px'
+            //         popoverRef.value.style.display = "block"
+            //         // alert(json.x, json.y)
+            //         switch (json.direction) {
+            //             case "Left":
+            //                 // mousemoveHandler(json.x - 380, dot.y)
+            //                 popoverRef.value.style.top = json.y - 60 + 'px'
+            //                 popoverRef.value.style.left = json.x - 380 + 'px'
+
+            //                 break;
+            //             case "Up":
+            //                 // console.log("在最上面", json.x, json.x - 100);
+            //                 // mousemoveHandler(dot.x - 80, dot.y - 200);
+            //                 popoverRef.value.style.top = (json.y - 350) + 'px'
+            //                 popoverRef.value.style.left = (json.x - 120) + 'px'
+
+            //                 break;
+            //             case "Right":
+            //                 console.log("没有走到这里来吗", 12312);
+            //                 popoverRef.value.style.top = (Number(json.y)) + 'px'
+            //                 popoverRef.value.style.left = Number(json.x) + 100 + 'px'
+
+            //                 // mousemoveHandler(Number(json.x) + 30, Number(json.y) - 80)
+            //                 break;
+            //             case "Down":
+            //                 popoverRef.value.style.top = (Number(json.y) + 100) + 'px'
+            //                 popoverRef.value.style.left = Number(json.x) + 'px'
+            //                 break;
+            //             default:
+            //                 popoverRef.value.style.top = json.y - 60 + 'px'
+            //                 popoverRef.value.style.left = json.x + 'px'
+
+            //                 break;
+            //         }
+            //         if (lineContainer.value) {
+            //             lineContainer.value.remove()
+            //         }
+            //         setTimeout(() => {
+            //             lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value, lineStyleOption.value)
+            //             lineContainer.value.show('draw', {
+            //                 duration: 1000, //持续时长
+            //                 timing: 'ease-in' // 动画函数
+            //             })
+            //             lineContainer.value.endPlugOutline = true;
+            //             lineContainer.value.startPlugOutline = true;
+            //             lineContainer.value.position();
+            //         }, 0);
+
+
+
+            //     }
+            // })
+
+            addResponseEventListener("End", handleResponseFunction)
+            // addResponseEventListener("End", (data) => {
+            //     let json = eval("(" + data + ")");
+            //     // clickData.value = json;
+            //     // classDevice()
+            //     // // classDevice()
+            //     console.log("移动结束", 123123, data)
+
+            // })
 
         })
 
@@ -273,7 +395,7 @@ export default ({
             centerDialogVisible,
             interDevice,
             clickData,
-            visible,
+
             triggerRef,
             videoData,
             onPlay,

src/webrtcVideo.js

@@ -25,7 +25,7 @@ const WS_OPEN_STATE = 1;
 
 let qualityController = false;
 let qualityControlOwnershipCheckBox;
-let matchViewportResolution = true;
+let matchViewportResolution;
 // TODO: Remove this - workaround because of bug causing UE to crash when switching resolutions too quickly
 let lastTimeResized = new Date().getTime();
 let resizeTimeout;
@@ -562,6 +562,7 @@ function createWebRtcOffer() {
 function sendInputData(data) {
     if (webRtcPlayerObj) {
         resetAfkWarningTimer();
+        // console.log("最后发送的事件",data )
         webRtcPlayerObj.send(data);
     }
 }
@@ -1300,11 +1301,11 @@ function setupMouseAndFreezeFrame(playerElement) {
 }
 
 function updateVideoStreamSize() {
-    console.log(matchViewportResolution, !matchViewportResolution);
-    // if (!matchViewportResolution) {
-    //     return;
-    // }
-    console.log("看一下走到这里美哟u");
+    // console.log(matchViewportResolution, !matchViewportResolution);
+    if (!matchViewportResolution) {
+        return;
+    }
+    // console.log("看一下走到这里美哟u");
 
     let now = new Date().getTime();
     if (now - lastTimeResized > 1000) {
@@ -1312,10 +1313,15 @@ function updateVideoStreamSize() {
         if (!playerElement)
             return;
 
+        // let descriptor = {
+        //     ConsoleCommand: 'setres ' + playerElement.clientWidth + 'x' + playerElement.clientHeight
+        //     // ConsoleCommand: 'setres ' + playerElement.clientWidth + 'x' + 1080
+        // };
         let descriptor = {
-            // ConsoleCommand: 'setres ' + playerElement.clientWidth + 'x' + playerElement.clientHeight
-            ConsoleCommand: 'setres ' + playerElement.clientWidth + 'x' + 1080
+            "Resolution.Width": playerElement.clientWidth,
+            "Resolution.Height": playerElement.clientHeight
         };
+        console.log(" playerElement.clientWidth ", playerElement.clientWidth, "playerElement.clientHeight", playerElement.clientHeight)
         emitCommand(descriptor);
         console.log(descriptor);
         lastTimeResized = new Date().getTime();