bug修改

src/assets/css/home.scss

@@ -2,12 +2,14 @@
     margin: 0;
     padding: 0;
     overflow: hidden;
+    width: 100%;
+    height: 100%;
 
     .header {
         position: absolute;
         z-index: 555;
         margin-bottom: 20px;
-
+        height: 70px;
         width: 100%;
         top: 0;
 
@@ -27,11 +29,13 @@
 .modelInfo {
     position: absolute;
     padding: 10px;
-    border-radius: 5px;
-    background-color: #fff;
+    padding-left: 20px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.80);
     width: 206px;
     height: 165px;
     display: none;
+
     z-index: 999;
 
     .model-detail {
@@ -58,9 +62,17 @@
             font-weight: 400;
 
             .title {
-                color: #000;
+                color: #333;
                 font-weight: 700;
             }
+
+            .green {
+                color: #00C767;
+            }
+
+            .red {
+                color: #DB4A36;
+            }
         }
     }
 }

src/assets/css/left.scss

@@ -149,6 +149,7 @@
              margin-bottom: 20px;
          }
 
+
          .table {
              width: 100%;
 
@@ -188,6 +189,8 @@
                  color: #fff;
                  border: none;
              }
+
+
          }
      }
 
@@ -226,21 +229,42 @@
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
-     padding: 10px;
+     //  padding: 10px;
+     //  border: 2px solid firebrick;
+     border-radius: 10px;
 
      span {
          font-size: 16px;
-
-         width: 160px;
+         width: 166px;
          font-family: Microsoft YaHei UI;
-
          // border: 1px solid red;
          margin: 6px;
          font-weight: 400;
+         //  padding: 0;
 
          .title {
              color: #000;
              font-weight: 700;
          }
+
+         .green {
+             color: #00C767;
+         }
+
+         .red {
+             color: #DB4A36;
+         }
      }
+ }
+
+ .scroll::-webkit-scrollbar {
+     width: 5px;
+     height: 5px;
+     background-color: transparent;
+     border-radius: 3px;
+ }
+
+ .scroll::-webkit-scrollbar-thumb {
+     background-color: #999;
+     border-radius: 3px;
  }

src/assets/css/right.scss

@@ -224,7 +224,7 @@
                     span {
                         position: absolute;
                         top: 0;
-                        left: 0;
+                        left: 10px;
                     }
                 }
             }

src/components/CircleProgress.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="number" v-if="textPosition == 'top'">
-            {{ showProgress }} <span> (节)</span>
+            {{ showProgress }} <span> (个)</span>
         </div>
     </div>
     <div class="progress" :style="{ width, height }">

src/components/Login.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="bg">
+        <div class="loginbutton">
+            <img :src="loginimg" alt="" style="">
+            <span @click="login"> 登录</span>
+        </div>
+        <div class="slogan">
+            <span class="slogan1">
+                元宇宙智慧校园
+            </span>
+            <span class="slogan2">
+                校园最好的导游
+            </span>
+
+        </div>
+    </div>
+</template>
+
+<script >
+import * as echarts from "echarts";
+import { ref } from "vue";
+// import login from '/''
+export default ({
+    setup() {
+        const loginimg = ref("./img/login.png")
+        const login = function () {
+            window.open("https://cas.huanghuai.edu.cn/cas/")
+        }
+        return {
+            loginimg,
+            login
+        }
+    }
+})
+
+</script>
+
+<style scoped lang="scss">
+.bg {
+    position: absolute;
+    box-sizing: border-box;
+    // height: 200vw;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    // border: 1px solid red;
+    z-index: 888;
+    // background-color: darkcyan;
+    background: url('/public/img/bg.png');
+    background-size: cover;
+    z-index: 888;
+
+
+}
+
+.loginbutton {
+    display: flex;
+
+    align-items: center;
+    position: absolute;
+    right: 0;
+
+    img {
+        width: 24px;
+        height: 24px;
+    }
+
+    span {
+        cursor: pointer;
+        color: #FFF;
+        font-family: PingFang SC;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        margin-left: 3px;
+    }
+}
+
+.slogan {
+    width: 635px;
+    display: flex;
+    flex-direction: column;
+    // border: 1px solid aliceblue;
+    color: #fff;
+    // display: ;
+    font-family: MF LangQian (Noncommercial);
+
+    font-size: 64px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 126px;
+    position: absolute;
+    bottom: 246px;
+    left: 112px;
+
+    .slogan1 {
+        display: flex;
+
+    }
+
+    .slogan2 {
+        display: flex;
+
+        justify-content: flex-end
+    }
+}
+</style>

src/components/UeVideo.vue

@@ -19,7 +19,6 @@ export default {
     let videoInstance = ref(null);
 
     onMounted(() => {
-      console.log("video.value", video.value);
 
       videoInstance = initLoad({
         context,
@@ -32,6 +31,7 @@ export default {
           suppressBrowserKeys: false,
         },
       });
+      console.log("video.videoInstance", videoInstance);
 
     });
     // function handleResponseFunction(data) {

src/components/home.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- <Login></Login> -->
     <div class="container">
         <div class="header">
             <img :src="headImg" alt="" />
@@ -6,7 +7,8 @@
         <el-container>
             <left></left>
             <right></right>
-            <div ref="linedomRef" style="width:10px;height:1px;position: absolute;z-index: 228;">
+            <div ref="linedomRef"
+                style="width:1px;height:1px;position: absolute;z-index: 228;border-radius:15px;background:#ccc;border: 1px solid darkcyan;">
             </div>
 
         </el-container>
@@ -15,11 +17,14 @@
 
         <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 }}
+                    <!-- {{ item }} -->
+                    <!-- {{ item.value === "在线" }} -->
+                    <span class="title">{{ item && item.name }}： </span>
+                    <span :class="item.online ? 'green' : item.online == 'false' ? 'red' : ''">{{ item && item.value }}
+                    </span>
+
                 </span>
             </div>
         </div>
@@ -41,11 +46,17 @@ import { videoPlay } from "vue3-video-play";
 import CircleProgress from './CircleProgress.vue';
 import Left from './left.vue'
 import Right from './right.vue'
+import Login from './Login.vue'
 import LeaderLine from "../../public/js/leaderline.js"
 import { getClassDetail } from '../request/api.js'
+import {
+    callUIInteraction,
+} from "../webrtcVideo";
+import axios from 'axios';
+
 export default ({
     name: 'Histogram',
-    components: { Left, Right, ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
+    components: { Login, Left, Right, ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
     setup() {
         // 视频数据
         const videoData = reactive({
@@ -151,22 +162,40 @@ export default ({
             clickData1.value.y = e.clientY;
 
         }
+        const clickFun = function (e) {
+            console.log("当前鼠标点击的坐标", e, e.clientX, e.clientY);
+        }
         const handleResponseFunction = (data) => {
             // console.log("从UE返回过来的值", data)
+            console.log("重新变了坐标", 2423423423);
             let json = eval("(" + data + ")");//转对象
             clickData.value = json;
             console.log("clickData---点击的数据", json)
             if (json.deviceCode) {
                 getClassDetail(json.deviceCode).then(res => {
                     classDeviceInfo.value = res.data;
+                    classDeviceInfo.value.map(i => {
+                        // if (i.name === "设备状态") {
+                        //     i.online = true
+                        // } else {
+                        //     i.online = "no"
+                        // }
+                        if (i.value == "在线") {
+                            i.online = true
+                        }
+                        if (i.value == "离线") {
+                            i.online = false
+                        }
+                        // i.online = i.name === "设备状态" ? true : false
+                    })
                     console.log("json.y ", json,);
-                    linedomRef.value.style.top = clickData.value.y + "px";
-                    linedomRef.value.style.left = clickData.value.x + "px";
+                    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)
 
-                    // // 弹出框位置
+                    // 弹出框位置
                     popoverRef.value.style.display = "block"
                     switch (json.direction) {
                         case "Left":
@@ -189,7 +218,6 @@ export default ({
                         default:
                             popoverRef.value.style.top = json.y - 60 + 'px'
                             popoverRef.value.style.left = json.x + 'px'
-
                             break;
                     }
 
@@ -199,7 +227,7 @@ export default ({
 
                     lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value, lineStyleOption.value)
                     lineContainer.value.show('draw', {
-                        duration: 1000, //持续时长
+                        duration: 100, //持续时长
                         timing: 'ease-in' // 动画函数
                     })
                     lineContainer.value.endPlugOutline = true;
@@ -213,19 +241,38 @@ export default ({
 
 
         }
-        const getWindowInfo = function () {
-            console.log("监听一下窗口是不是改了", lineContainer);
-            setTimeout(() => {
-                if (lineContainer) {
-                    console.log("怎么没有变黄啊");
-                    lineContainer.value.position();
-                }
-            }, 0);
+        const windowSize = function () {
+            // console.log("监听一下窗口是不是改了--click", lineContainer);
+            callUIInteraction("windowSizeChange")
+        }
+        const getUserInfo = (url) => {
+            let userurl = "   https://weizhi.huanghuai.edu.cn/cmccr-server/center/cas/v1/getUser?casLoginUrl=https://cas.huanghuai.edu.cn/cas/serviceValidate?"
+                + url + "&service=https://weizhi.huanghuai.edu.cn/cmips/"
+            // axios.get(userurl).then(res => {
+
+            // })
+
+
 
         }
         onMounted(() => {
-            addResponseEventListener("End", handleResponseFunction);
-            window.addEventListener('resize', getWindowInfo);
+            addResponseEventListener("444", handleResponseFunction);
+            window.addEventListener('resize', windowSize);
+            // window.addEventListener('click', windowSize);
+            // addResponseEventListener("widowSizeChange", windoChangeFunction);
+
+            let search = window.location.hash.split("?")[1];
+            getUserInfo(search)
+            // console.log(search, "编码")
+            // let code = result.split("?")[0]; //去掉&之后的冗余部分
+
+            // console.log(result);
+            // // window.addEventListener('hashchange', pathChange);
+            // const searchParams = currentUrl.searchParams;
+            // let ticket = searchParams.get("ticket"); // 'devpoint'
+            // console.log("ticket", ticket);
+            // searchParams.get("page"); // '1'
+
 
         })
         const headImg = ref('./img/head.png')

src/components/left.vue

@@ -49,7 +49,7 @@
                         <li>到课率</li>
                         <li>操作</li>
                     </ul>
-                    <div ref="testMain" style="height: 310px;overflow: hidden;">
+                    <div ref="testMain" style="height: 310px;overflow: scroll;" class="scroll">
                         <ul v-for="item in classRoom" @mouseenter="testMove" @mouseleave="testMend">
                             <li> {{ item.class }} </li>
                             <li>{{ item.status }}</li>
@@ -69,7 +69,13 @@
         <el-popover ref="popoverRef" v-model:visible="popoverVisible" placement="bottom" :width="400"
             :virtual-ref="triggerRef" trigger="click" virtual-triggering popper-class="classpopover">
             <div class="model-detail">
-                <span><span class="title">教室状态: </span>{{ classInfo && classInfo.status }} </span>
+                <span><span class="title">教室状态: </span>
+                    <span :class="classInfo.online ? 'green' : 'red'">{{ classInfo &&
+                        classInfo.status }}</span>
+                </span>
+
+
+
                 <span><span class="title">班级: </span>{{ classInfo && classInfo.className }}</span>
                 <span><span class="title">课程名称: </span>{{ classInfo && classInfo.courseName }}</span>
                 <span><span class="title">应到人数: </span>{{ classInfo && classInfo.expected }}</span>
@@ -87,10 +93,8 @@ import { reactive, onMounted, ref, onBeforeUnmount, onUnmounted, nextTick, getCu
 import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem } from "element-plus";
 import { getClass } from '../request/api'
 import CircleProgress from './CircleProgress.vue';
-// import {
-//     callUIInteraction,
-//     addResponseEventListener
-// } from "../webRtcPlayer";
+import { callUIInteraction }
+    from "../webrtcVideo";
 
 export default ({
 
@@ -164,44 +168,7 @@ export default ({
 
 
         // 物联设备类型统计
-        const interDevice = ref([
-            // {
-            //     number: 98,
-            //     color: "#63ABFF",
-            //     icon: 'r1',
-            //     text: "显示系统"
-            // },
-            // {
-            //     number: 185,
-            //     color: "#63FFC7",
-            //     icon: 'r2',
-            //     text: "控制设备"
-            // },
-            // {
-            //     number: 58,
-            //     color: "#918EFF",
-            //     icon: 'r3',
-            //     text: "音频设备"
-            // },
-            // {
-            //     number: 68,
-            //     color: "#00C8E3",
-            //     icon: 'r4',
-            //     text: "录播设备"
-            // },
-            // {
-            //     number: 189,
-            //     color: "#FFBB54",
-            //     icon: 'r5',
-            //     text: "环境设备"
-            // },
-            // {
-            //     number: 98,
-            //     color: "#00CF78",
-            //     icon: 'r6',
-            //     text: "安全管理"
-            // },   
-        ])
+        const interDevice = ref([])
 
         const popoverVisible = ref(false)
         const popoverRef = ref(null)
@@ -231,36 +198,18 @@ export default ({
 
             popoverVisible.value = true;
             classInfo.value = item;
+            console.log(classInfo.value);
+            classInfo.value.online = classInfo.value.status == "在用" ? true : false
+
             mousemoveHandler(1000, 60)
+            callUIInteraction("initRoom")
             console.log("item", item, item.lat);
-
-            // callUIInteraction({
-            //     "x": item.lat,
-            //     "y": item.lot,
-            //     "level": item.leaf
-            // });
         }
 
 
 
         // 教室分类统计
-        const classRoomCount = ref([
-            {
-                name: "基础性",
-                color: '#4ED2E4',
-                number: '40%'
-            },
-            {
-                name: "扩展型",
-                color: '#5E91F6',
-                number: '25%'
-            },
-            {
-                name: "其他",
-                color: '#67F0A8',
-                number: '45%'
-            }
-        ])
+        const classRoomCount = ref([])
         // 本周课程统计数据
         const classCount = ref([])
         // 智慧教室使用数据
@@ -271,8 +220,11 @@ export default ({
             let res = await getClass()
             console.log("res----教室分类统计", res)
             let { course, classroomDetail, category } = res.data;
-            classRoomCount.value = category
-            classCount.value = course
+            classRoomCount.value = category;
+
+
+            classCount.value = course;
+            console.log("看一下颜色", classCount.value)
             classRoom.value = classroomDetail
 
         }
@@ -363,7 +315,7 @@ export default ({
 <style>
 .classpopover {
     .el-popper__arrow {
-        top: 216px !important;
+        top: 196px !important;
     }
 
     .el-popper[data-popper-placement^=bottom],
@@ -373,5 +325,7 @@ export default ({
     }
 }
 
-/* el-popper__arrow {} */
+.el-popper.is-light {
+    border-radius: 10px;
+}
 </style>

src/components/right.vue

@@ -53,7 +53,9 @@
             <div class="monitorContent">
                 <el-carousel class="monitor">
                     <el-carousel-item v-for="(item, index) in carouselData" :key="index">
+                        <p>{{ item.activeMonitor.title }}</p>
                         <div class="interactclass">
+
                             <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
                                 <span>{{ item.title }}</span>
                                 <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item.src)">
@@ -61,7 +63,7 @@
                             </div>
                         </div>
 
-                        <p>{{ item.activeMonitor.title }}</p>
+                        <p style="margin-top: 5px;">{{ item.activeMonitor.title }}</p>
                         <div class="interactclass">
                             <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
                                 <span>{{ item.title }}</span>

src/webrtcVideo.js

@@ -424,6 +424,7 @@ function setOverlay(htmlClass, htmlElement, onClickFunction) {
 
     if (onClickFunction) {
         videoPlayOverlay.addEventListener('click', function onOverlayClick(event) {
+            console.log("32342342", "嘻嘻嘻嘻");
             onClickFunction(event);
             videoPlayOverlay.removeEventListener('click', onOverlayClick);
         });
@@ -1302,9 +1303,9 @@ function setupMouseAndFreezeFrame(playerElement) {
 
 function updateVideoStreamSize() {
     // console.log(matchViewportResolution, !matchViewportResolution);
-    if (!matchViewportResolution) {
-        return;
-    }
+    // if (!matchViewportResolution) {
+    //     return;
+    // }
     // console.log("看一下走到这里美哟u");
 
     let now = new Date().getTime();
@@ -1321,7 +1322,7 @@ function updateVideoStreamSize() {
             "Resolution.Width": playerElement.clientWidth,
             "Resolution.Height": playerElement.clientHeight
         };
-        console.log(" playerElement.clientWidth ", playerElement.clientWidth, "playerElement.clientHeight", playerElement.clientHeight)
+        // console.log(" playerElement.clientWidth ", playerElement.clientWidth, "playerElement.clientHeight", playerElement.clientHeight)
         emitCommand(descriptor);
         console.log(descriptor);
         lastTimeResized = new Date().getTime();
@@ -1420,6 +1421,7 @@ function emitDescriptor(messageType, descriptor) {
 // JavaScript as opposed to pressing a button which is part of the pixel
 // streamed UI from the UE4 client.
 function emitUIInteraction(descriptor) {
+    console.log("看一下进入这里没有", descriptor)
     emitDescriptor(MessageType.UIInteraction, descriptor);
 }
 
@@ -2064,11 +2066,10 @@ function onExpandOverlay_Click( /* e */) {
 
 function showConnectOverlay() {
 
-
     const startText = document.createElement('div');
     startText.id = 'playButton';
     startText.innerHTML = '点击连接';
-    startText.style.zIndex = "999"
+    startText.style.zIndex = "777"
     startText.style.position = "absolute"
     startText.style.top = "50%"
     startText.style.left = "50%"
@@ -2253,3 +2254,5 @@ export const callCommand = emitCommand;
 
 //给UE5发消息,json
 export const callUIInteraction = emitUIInteraction;
+
+// export default emitUIInteraction