动态生成线

index.html

@@ -5,6 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="/src/assets/js/leaderline.js"></script>
   <title>元宇宙 App</title>
   <style>
     * {

package-lock.json

@@ -295,6 +295,12 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -398,6 +404,12 @@
         "normalize-wheel-es": "^1.2.0"
       }
     },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true
+    },
     "esbuild": {
       "version": "0.14.47",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.14.47.tgz",
@@ -709,12 +721,37 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.0"
+      }
+    },
     "jsonc-parser": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
+    "leader-line": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/leader-line/-/leader-line-1.0.7.tgz",
+      "integrity": "sha512-PhJpQLV7XychSIuGPD0TEqR9PgRYBbrhReaOcmHFOVtTw4dWKfUMAtOb7UP7xTsoib6sFzq2giQeOUHy7LCuJQ=="
+    },
+    "loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "dev": true,
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      }
+    },
     "local-pkg": {
       "version": "0.4.3",
       "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz",
@@ -787,6 +824,12 @@
         "brace-expansion": "^2.0.1"
       }
     },
+    "minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
+    },
     "mlly": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.4.0.tgz",
@@ -942,6 +985,15 @@
       "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
       "dev": true
     },
+    "skeleton-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/skeleton-loader/-/skeleton-loader-2.0.0.tgz",
+      "integrity": "sha512-juKGqmMbD0MNRYm1X7vJLJIvOQWVJNpupmkYaUHltMS9oqIMuQk9upmPmYfo1n2XiYQnLm7tgDpDCjmueJH0AQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0"
+      }
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "axios": "^1.4.0",
     "echarts": "^5.4.3",
     "element-plus": "^2.3.9",
+    "leader-line": "^1.0.7",
     "postcss-pxtorem": "^6.0.0",
     "vue": "^3.2.25",
     "vue3-video-play": "^1.3.1-beta.6"
@@ -19,6 +20,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
     "sass": "^1.64.2",
+    "skeleton-loader": "^2.0.0",
     "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.1",
     "vite": "^2.9.9"

src/assets/css/home.scss

@@ -27,17 +27,19 @@
 .model-detail {
     display: flex;
     justify-content: space-between;
-    flex-wrap: wrap;
+    flex-direction: column;
+    // flex-wrap: wrap;
     padding: 10px;
 
     span {
         font-size: 16px;
 
-        width: 160px;
+        width: 100%;
         font-family: Microsoft YaHei UI;
 
         // border: 1px solid red;
-        margin: 6px;
+        // margin: 6px;
+        margin: 6px 0;
         font-weight: 400;
 
         .title {

src/assets/css/left.scss

@@ -74,7 +74,7 @@
              justify-content: space-around;
              height: 108px;
              // border: 1px solid sandybrown;
-             width: 93px;
+             //  width: 93px;
              box-sizing: border-box;
              // margin-top: 42px;
              margin: 40px 16px 39px 22px;
@@ -219,4 +219,28 @@
      overflow: hidden;
      justify-content: space-evenly;
 
+ }
+
+ // 点击模型弹出框
+ .model-detail {
+     display: flex;
+     justify-content: space-between;
+     flex-wrap: wrap;
+     padding: 10px;
+
+     span {
+         font-size: 16px;
+
+         width: 160px;
+         font-family: Microsoft YaHei UI;
+
+         // border: 1px solid red;
+         margin: 6px;
+         font-weight: 400;
+
+         .title {
+             color: #000;
+             font-weight: 700;
+         }
+     }
  }

src/components/home.vue

@@ -3,72 +3,56 @@
         <div class="header">
             <img src="../assets/img/head.png" alt="" />
         </div>
-
         <el-container>
             <left></left>
             <right></right>
-        </el-container>
+            <div ref="linedomRef" style="width: 2px;height:2px;background-color: green;position: absolute;z-index: 228;">
+            </div>
 
-        <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" align-center>
-            <span>
-                {{ clickData.value && clickData.value.status }}
-            </span>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="centerDialogVisible = false">Cancel</el-button>
-                    <el-button type="primary" @click="centerDialogVisible = false">
-                        Confirm
-                    </el-button>
-                </span>
-            </template>
-        </el-dialog>
+        </el-container>
 
 
-        <el-popover ref="popoverRef" v-model:visible="visible" :width="400" :virtual-ref="triggerRef" trigger="click"
+        <el-popover placement="right" v-model:visible="visible" :width="260" :virtual-ref="triggerRef" trigger="click"
             virtual-triggering>
-            <div class="model-detail">
-                <span><span class="title">教室状态: </span>{{ clickData.value && clickData.value.status }}</span>
-                <span><span class="title">班级: </span>{{ clickData.value && clickData.value.classes }}</span>
-                <span><span class="title">课程名称: </span>{{ clickData.value && clickData.value.course }}</span>
-                <span><span class="title">应到人数: </span>{{ clickData.value && clickData.value.theory }}</span>
-                <span><span class="title">教室: </span>{{ clickData.value && clickData.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 class="model-detail" ref="popoverRef" id="popoverRef">
+                <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>
 
         <!-- 视频播放弹框 -->
         <el-dialog class="videoDialog" v-model="videoDialog" title="互动教师1" width="60%" align="center" top="4%">
             <videoPlay v-bind="videoData" @play="onPlay" />
-
-            <!-- <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="centerDialogVisible = false">Cancel</el-button>
-                    <el-button type="primary" @click="centerDialogVisible = false">
-                        Confirm
-                    </el-button>
-                </span>
-            </template> -->
         </el-dialog>
     </div>
 </template>
 
-<script >
+<script>
 import { reactive, onMounted, ref, toRefs, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
 import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, ElMessage } from "element-plus";
 import "vue3-video-play/dist/style.css";
-import {
-    callUIInteraction,
-    addResponseEventListener
-} from "../webrtcVideo.js";
-import { testApi } from '../request/api'
+import { addResponseEventListener } from "../webrtcVideo.js";
 import { videoPlay } from "vue3-video-play";
 import CircleProgress from './CircleProgress.vue';
 import Left from './left.vue'
 import Right from './right.vue'
-
+import LeaderLine from "../assets/js/leaderline.js"
+import { getClassDetail } from '../request/api.js'
 export default ({
-
     name: 'Histogram',
     components: { Left, Right, ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
     setup() {
@@ -100,49 +84,47 @@ export default ({
                 "fullScreen",
             ], //显示所有按钮,
         });
-
-
-
         // 物联设备类型统计
-        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(
+            [
+                // {
+                //     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: "安全管理"
+                // },
+
+            ])
         // 位置弹框
         let centerDialogVisible = ref(false)
         // 获取点击点数据
@@ -170,10 +152,7 @@ export default ({
             })
         }
 
-        const testGetApi = async () => {
-            let res = await testApi("ymy")
-            console.log("请求到的", res);
-        }
+
         //视频播放弹框
         const videoDialog = ref(false)
         // 播放视频
@@ -186,119 +165,111 @@ export default ({
         const onPlay = function () {
             console.log("播放视频")
         }
-        //智慧教室实时监控---数据
-        const carouselData = ref([
-            {
-                activeMonitor: {
-                    title: "多屏互动教室",
-                    array: [
-                        {
-                            title: "互动教室22",
-                            poster: 'rb1',
-                            src: '',
-                        },
-                        {
-                            title: "互动教室22",
-                            poster: 'rb2',
-                            src: '',
-                        }
-                    ]
-                },
-                wisdomMonitor:
-                {
-                    title: "多屏智慧教室",
-                    array: [
-                        {
-                            title: "智慧教室11",
-                            poster: 'rb1',
-                            src: '',
-                        },
-                        {
-                            title: "智慧教室11",
-                            poster: 'rb2',
-                            src: '',
-                        }
-                    ]
-                }
-            },
-            {
-                activeMonitor: {
-                    title: "多屏互动教室",
-                    array: [
-                        {
-                            title: "互动教室33",
-                            poster: 'rb1',
-                            src: '',
-                        },
-                        {
-                            title: "互动教室33",
-                            poster: 'rb2',
-                            src: '',
-                        }
-                    ]
-                },
-
-                wisdomMonitor:
-                {
-                    title: "多屏智慧教室",
-                    array: [
-                        {
-                            title: "智慧教室22",
-                            poster: 'rb1',
-                            src: '',
-                        },
-                        {
-                            title: "智慧教室22",
-                            poster: 'rb2',
-                            src: '',
-                        }
-                    ]
-                }
-            }
 
-        ]
-        )
+        const linedomRef = ref(null)
+        let lineContainer = ref(null)
+        const popoverRef = ref(null)
+        const lineStyleOption = ref({
+            startPlug: 'disc',
+            endPlug: 'disc',
+            dash: true,
+            color: '#2AC367',
+            startPlugColor: '#fff',
+            startPlugOutlineColor: '#2AC367',
+            endPlugColor: '#fff', // translucent
+            endPlugOutlineColor: '#2AC367',
+            size: 3,
+            startPlugSize: 1.5,
+            startPlugOutlineSize: 1,
+            endPlugSize: 3,
+            endPlugOutlineSize: 3
+        })
+        const classDeviceInfo = ref([])
+        const classDevice = async function (deviceCode) {
+            let res = await getClassDetail(deviceCode)
+            // console.log("获取到了当前点击物体得详情", res)
+            classDeviceInfo.value = res.data
+        }
+        const clickData1 = ref({})
+        const mouseClick = function (e) {
+            // console.log("屏幕点击位置看", e)
+            clickData1.value.x = e.clientX;
+            clickData1.value.y = e.clientY;
 
-        let timer = ref(null)
-        let testMain = ref(null)
+        }
         onMounted(() => {
+            // window.addEventListener('mousedown', mouseClick);
 
-            // const { appContext } = getCurrentInstance()
-
-            // console.log("获取当前组件实例", appContext)
-            // const globalProxy = appContext.config.globalProperties;
-            // console.log("看一下 globalProxy", globalProxy, typeof globalProxy)
-            // globalProxy.$message({
-            //     type: 'success',
-            //     messsage: 'xxxx'
-            // })
-            // ElMessage.success("ok");
-            // globalProxy1 = appContext.config.globalProperties;
-            // console.log("xxxx", globalProxy1);
-            // testGetApi()
             // 监听一下页面点击情况
             addResponseEventListener("open", (data) => {
                 if (data) {
                     let json = eval("(" + data + ")");//转对象
                     clickData.value = json;
-                    console.log("clickData---点击的数据", clickData.value)
-                    visible.value = true;
-                    mousemoveHandler(json.x, json.y)
-                }
-            })
-
-        })
-
+                    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
+                    }
+                    console.log("看一下---小圆点的值--top", linedomRef.value.style.top)
+                    console.log("看一下---小圆点的值--left", linedomRef.value.style.left)
+                    // alert(json.x, json.y)
+                    switch (json.direction) {
+                        case "Left":
+                            mousemoveHandler(json.x - 380, dot.y)
+                            break;
+                        case "Up":
+                            console.log("在最上面", json.x, json.x - 100);
+                            mousemoveHandler(dot.x - 80, dot.y - 200);
+                            break;
+                        case "Right":
+                            console.log("没有走到这里来吗", 12312);
+                            mousemoveHandler(Number(json.x) + 30, Number(json.y) - 80)
+                            break;
+                        case "Down":
+                            // console.log("xxxx没有走到这里来吗--down", json.y,);
+                            mousemoveHandler(Number(json.y), Number(json.x) - 260);
+                            break;
+                        default:
+                            mousemoveHandler(json.x, json.y);
+                            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);
 
 
 
+                }
+            })
 
+            addResponseEventListener("End", data => {
+                let json = eval("(" + data + ")");
+                clickData.value = json;
+                classDevice()
+                // // classDevice()
+                // console.log("移动结束", 123123, data)
 
+            })
 
+        })
 
         return {
-
-
             centerDialogVisible,
             interDevice,
             clickData,
@@ -308,8 +279,11 @@ export default ({
             onPlay,
             videoDialog,
             lookVideo,
-            ...toRefs(carouselData),
-            carouselData,
+            linedomRef,
+            popoverRef,
+            lineContainer,
+            classDeviceInfo,
+            mouseClick,
         }
     },
 })

src/components/left copy.vue

@@ -0,0 +1,333 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <img src="../assets/img/head.png" alt="" />
+        </div>
+        <el-container>
+            <!-- <left></left>
+            <right></right> -->
+            <div ref="linedomRef" style="width: 50px;height: 50px;background-color: #f00;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">
+                <span><span class="title">设备名称: </span>{{ clickData.value && clickData.value.status }}</span>
+                <span><span class="title">设备状态: </span>{{ clickData.value && clickData.value.classes }}</span>
+                <span><span class="title">位置: </span>{{ clickData.value && clickData.value.course }}</span>
+                <span><span class="title">型号: </span>{{ clickData.value && clickData.value.theory }}</span>
+                <span><span class="title">质保期: </span>{{ clickData.value && clickData.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>
+
+        <!-- 视频播放弹框 -->
+        <el-dialog class="videoDialog" v-model="videoDialog" title="互动教师1" width="60%" align="center" top="4%">
+            <videoPlay v-bind="videoData" @play="onPlay" />
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { reactive, onMounted, ref, toRefs, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
+import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, ElMessage } from "element-plus";
+import "vue3-video-play/dist/style.css";
+import { addResponseEventListener } from "../webrtcVideo.js";
+import { videoPlay } from "vue3-video-play";
+import CircleProgress from './CircleProgress.vue';
+import Left from './left.vue'
+import Right from './right.vue'
+import LeaderLine from "../assets/js/leaderline.js"
+
+export default ({
+    name: 'Histogram',
+    components: { Left, Right, ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
+    setup() {
+        // 视频数据
+        const videoData = reactive({
+            width: "100%", //播放器高度
+            height: "100%", //播放器高度
+            color: "red", //主题色
+            title: "互动教室", //视频名称
+            src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
+            muted: false, //静音
+            webFullScreen: false,
+            // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
+            autoPlay: false, //自动播放
+            loop: false, //循环播放
+            mirror: false, //镜像画面
+            ligthOff: false, //关灯模式
+            volume: 0.3, //默认音量大小
+            control: true, //是否显示控制
+            currentTime: 0,//跳转到固定播放时间
+            controlBtns: [
+                "audioTrack",
+                "quality",
+                "speedRate",
+                "volume",
+                "setting",
+                "pip",
+                "pageFullScreen",
+                "fullScreen",
+            ], //显示所有按钮,
+        });
+        // 物联设备类型统计
+        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: "安全管理"
+                // },
+
+            ])
+        // 位置弹框
+        let centerDialogVisible = ref(false)
+        // 获取点击点数据
+        let clickData = reactive({})
+        const visible = ref(false)
+        const triggerRef = ref({
+            getBoundingClientRect() {
+                // console.log("positon----方法返回元素的大小及其相对于视口的位置", position.value)
+                return position.value
+            },
+        })
+        const position = ref({
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+        })
+        // 点击某个模型跟随移动
+        const mousemoveHandler = (x, y) => {
+            position.value = DOMRect.fromRect({
+                width: 0,
+                height: 0,
+                x: x,
+                y: y,
+            })
+        }
+
+
+        //视频播放弹框
+        const videoDialog = ref(false)
+        // 播放视频
+        const lookVideo = function () {
+
+            videoDialog.value = true;
+            console.log("点击了播放视频", 12312312)
+        }
+        // 播放视频
+        const onPlay = function () {
+            console.log("播放视频")
+        }
+        //智慧教室实时监控---数据
+        const carouselData = ref([
+            // {
+            //     activeMonitor: {
+            //         title: "多屏互动教室",
+            //         array: [
+            //             {
+            //                 title: "互动教室22",
+            //                 poster: 'rb1',
+            //                 src: '',
+            //             },
+            //             {
+            //                 title: "互动教室22",
+            //                 poster: 'rb2',
+            //                 src: '',
+            //             }
+            //         ]
+            //     },
+            //     wisdomMonitor:
+            //     {
+            //         title: "多屏智慧教室",
+            //         array: [
+            //             {
+            //                 title: "智慧教室11",
+            //                 poster: 'rb1',
+            //                 src: '',
+            //             },
+            //             {
+            //                 title: "智慧教室11",
+            //                 poster: 'rb2',
+            //                 src: '',
+            //             }
+            //         ]
+            //     }
+            // },
+            // {
+            //     activeMonitor: {
+            //         title: "多屏互动教室",
+            //         array: [
+            //             {
+            //                 title: "互动教室33",
+            //                 poster: 'rb1',
+            //                 src: '',
+            //             },
+            //             {
+            //                 title: "互动教室33",
+            //                 poster: 'rb2',
+            //                 src: '',
+            //             }
+            //         ]
+            //     },
+
+            //     wisdomMonitor:
+            //     {
+            //         title: "多屏智慧教室",
+            //         array: [
+            //             {
+            //                 title: "智慧教室22",
+            //                 poster: 'rb1',
+            //                 src: '',
+            //             },
+            //             {
+            //                 title: "智慧教室22",
+            //                 poster: 'rb2',
+            //                 src: '',
+            //             }
+            //         ]
+            //     }
+            // }
+
+        ]
+        )
+        const linedomRef = ref(null)
+        let lineContainer = ref(null)
+        const popoverRef = ref(null)
+        const lineStyleOption = ref({
+            // color: '#2AC367', // 指引线颜色
+            // startPlug: 'disc',
+            // endPlug: 'disc', // 指引线结束点的样式 hand,disc
+            // size: 2, // 线条尺寸
+            // startSocket: 'bottom', //在指引线开始的地方从元素左侧开始
+            // endSocket: 'top', //在指引线开始的地方从元素右侧结束
+            // // hide: true, // 绘制时隐藏，默认为false，在初始化时可能会出现闪烁的线条
+            // // startPlugColor: '#2AC367', // 渐变色开始色
+            // // endPlugColor: '#fff386', // 渐变色结束色
+            // // gradient: false, // 使用渐变色
+            // outLineColor: 'blue',
+            // path: 'magnet', // straight,arc,fluid,magnet,grid
+            // dash: {
+            //     // 虚线样式
+            //     animation: true // 让线条滚动起来
+            // },
+            // hide: true
+            startPlug: 'disc',
+            endPlug: 'disc',
+            startPlugColor: 'rgb(248, 205, 30)',
+            startPlugOutlineColor: 'rgb(30, 130, 250)',
+            endPlugColor: '#ff0000', // translucent
+            endPlugOutlineColor: '#2AC367',
+            size: 2,
+            startPlugSize: 1.5,
+            startPlugOutlineSize: 1,
+            endPlugSize: 3,
+            endPlugOutlineSize: 3
+        })
+        onMounted(() => {
+
+
+            // 监听一下页面点击情况
+            addResponseEventListener("open", (data) => {
+                if (data) {
+                    let json = eval("(" + data + ")");//转对象
+                    clickData.value = json;
+                    // console.log("clickData---点击的数据", clickData.value)
+                    // console.log("看一下", linedomRef.value.style.top, json, "json")
+                    visible.value = true
+                    linedomRef.value.style.top = json.x + "px";
+                    linedomRef.value.style.left = json.y + "px";
+
+                    let popoverRef2 = document.getElementById("popoverRef")
+                    // setTimeout(() => {
+                    //     console.log("popoverRef", popoverRef, "popoverRef.value", popoverRef.value);
+                    // }, 2000);
+                    // setTimeout(() => {
+                    console.log("linedomRef.value", linedomRef.value, "popoverRef.value", popoverRef.value);
+                    lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value)
+                    lineContainer.value.show('draw', {
+                        duration: 1000, //持续时长
+                        timing: 'ease-in' // 动画函数
+                    })
+                    lineContainer.value.endPlugOutline = true;
+                    lineContainer.value.position()
+                    console.log("隔几秒在连接", 1312312)
+                    // }, 3000);
+
+                }
+            })
+
+            // addResponseEventListener("End", data => {
+            //     console.log("移动结束", 123123, data)
+            // })
+
+        })
+
+
+
+
+
+
+
+
+        return {
+            centerDialogVisible,
+            interDevice,
+            clickData,
+            visible,
+            triggerRef,
+            videoData,
+            onPlay,
+            videoDialog,
+            lookVideo,
+            ...toRefs(carouselData),
+            carouselData,
+            linedomRef,
+            popoverRef,
+            lineContainer
+        }
+    },
+})
+
+</script>
+
+<style scoped lang="scss">
+@import '../assets/css/home.scss';
+</style>

src/components/left.vue

@@ -56,7 +56,7 @@
                             <li>{{ item.people }}</li>
                             <li>{{ item.percentage }}</li>
                             <li>
-                                <el-button size="small" class="look" @click.prevent="handleRoom">查看</el-button>
+                                <el-button size="small" class="look" @click.prevent="handleRoom(item)">查看</el-button>
                             </li>
 
                         </ul>
@@ -66,28 +66,36 @@
                 </div>
             </div>
         </div>
-
+        <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>{{ classInfo && classInfo.className }}</span>
+                <span><span class="title">课程名称: </span>{{ classInfo && classInfo.courseName }}</span>
+                <span><span class="title">应到人数: </span>{{ classInfo && classInfo.expected }}</span>
+                <span><span class="title">教室: </span>{{ classInfo && classInfo.class }}</span>
+                <span><span class="title">实到人数: </span>{{ classInfo && classInfo.actual }}</span>
+                <span><span class="title">老师: </span>{{ classInfo && classInfo.teacher }}</span>
+            </div>
+        </el-popover>
     </el-aside>
 </template>
 
 <script >
 import * as echarts from "echarts";
-import { reactive, onMounted, ref, toRefs, onBeforeUnmount, onUnmounted, nextTick, getCurrentInstance } from 'vue';
-import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, ElMessage } from "element-plus";
-import "vue3-video-play/dist/style.css";
-import {
-    callUIInteraction,
-    addResponseEventListener
-} from "../webrtcVideo.js";
+import { reactive, onMounted, ref, onBeforeUnmount, onUnmounted, nextTick, getCurrentInstance } from 'vue';
+import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem } from "element-plus";
 import { getClass } from '../request/api'
-import { videoPlay } from "vue3-video-play";
 import CircleProgress from './CircleProgress.vue';
-
+// import {
+//     callUIInteraction,
+//     addResponseEventListener
+// } from "../webRtcPlayer";
 
 export default ({
 
     name: 'Histogram',
-    components: { ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
+    components: { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, CircleProgress },
     setup() {
 
         const pieData = reactive([{
@@ -155,61 +163,82 @@ 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: "安全管理"
-            },
-
+            // {
+            //     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 handleRoom = function () {
-            // 发送消息给UE
-            // console.log("查看当前教室使用情况", 'adsfasdfasdfa', ElMessage)
-            // ElMessage('this is a message.')
-
-            // ElMessage.success("xsxxx")
-            // callUIInteraction("open");
-            // addResponseEventListener("open", (data) => {
-            //     console.log("接收到的信息", data, typeof data,)
-            // })
-            // centerDialogVisible.value = true
+        const popoverVisible = ref(false)
+        const popoverRef = ref(null)
+        const triggerRef = ref({
+            getBoundingClientRect() {
+                // console.log("positon----方法返回元素的大小及其相对于视口的位置", position.value)
+                return position.value
+            },
+        })
+        // 点击某个模型跟随移动
+        const mousemoveHandler = (x, y) => {
+            position.value = DOMRect.fromRect({
+                width: 0,
+                height: 0,
+                x: x,
+                y: y,
+            })
+        }
+        const position = ref({
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+        })
+        let classInfo = ref({})
+        const handleRoom = function (item) {
+
+            popoverVisible.value = true;
+            classInfo.value = item;
+            mousemoveHandler(1000, 60)
+            console.log("item", item, item.lat);
+
+            // callUIInteraction({
+            //     "x": item.lat,
+            //     "y": item.lot,
+            //     "level": item.leaf
+            // });
         }
 
 
@@ -308,6 +337,7 @@ export default ({
             }
         }
         return {
+            popoverVisible,
             classCount,
             classRoom,
             interDevice,
@@ -315,7 +345,10 @@ export default ({
             testMend,
             testMove,
             testMain,
-            classRoomCount
+            popoverRef,
+            classRoomCount,
+            triggerRef,
+            classInfo
         }
     },
 })
@@ -324,4 +357,19 @@ export default ({
 
 <style scoped lang="scss">
 @import '../assets/css/left.scss';
+</style>
+<style>
+.classpopover {
+    .el-popper__arrow {
+        top: 216px !important;
+    }
+
+    .el-popper[data-popper-placement^=bottom],
+    .el-popper__arrow::before {
+        border-left-color: transparent !important;
+        border-top-color: transparent !important;
+    }
+}
+
+/* el-popper__arrow {} */
 </style>

src/components/line.vue

@@ -0,0 +1,196 @@
+<template>
+    <div class="line-block">
+        <span style="font-size: '40px';color: saddlebrown;">1111dsdfg</span>
+        <div class="one">
+            <div class="block-one" id="block-one">1</div>
+            <div class="block-two" id="block-two">2</div>
+        </div>
+        <div class="two">
+            <div class="block-three" id="block-three">3</div>
+            <div class="block-four" id="block-four">4</div>
+        </div>
+        <div id="start" class="target">start</div>
+        <div id="end" class="target">end</div>
+    </div>
+</template>
+
+<script>
+import LeaderLine from "../assets/js/leaderline"
+// var LeaderLine = require("../assets/js/leaderline")
+import { onMounted, ref } from 'vue'
+export default {
+    setup() {
+        onMounted(() => {
+            console.log("看一下", LeaderLine)
+            getLine()
+            let startEle = document.getElementById('start');
+            let endEle = document.getElementById('end');
+            let leader_line = new LeaderLine(
+                startEle,
+                endEle,
+                {
+                    dash: true,
+                }
+            );
+        })
+
+
+
+
+
+
+
+        let lineContainer = ref(null)
+        let lineContainer2 = ref(null)
+        let lineContainer3 = ref(null)
+        let lineContainer4 = ref(null)
+        const getLine = () => {
+            let dom1 = document.getElementById('block-one')
+            let dom2 = document.getElementById('block-two')
+            let dom3 = document.getElementById('block-three')
+            let dom4 = document.getElementById('block-four')
+            let styleOption = {
+                // color: '#2AC367', // 指引线颜色
+                // startPlug: 'disc',
+                // endPlug: 'disc', // 指引线结束点的样式 hand,disc
+                // size: 2, // 线条尺寸
+                // startSocket: 'bottom', //在指引线开始的地方从元素左侧开始
+                // endSocket: 'top', //在指引线开始的地方从元素右侧结束
+                // // hide: true, // 绘制时隐藏，默认为false，在初始化时可能会出现闪烁的线条
+                // // startPlugColor: '#2AC367', // 渐变色开始色
+                // // endPlugColor: '#fff386', // 渐变色结束色
+                // // gradient: false, // 使用渐变色
+                // outLineColor: 'blue',
+                // path: 'magnet', // straight,arc,fluid,magnet,grid
+                // dash: {
+                //     // 虚线样式
+                //     animation: true // 让线条滚动起来
+                // },
+                // hide: true
+                startPlug: 'disc',
+                endPlug: 'disc',
+                startPlugColor: 'rgb(248, 205, 30)',
+                startPlugOutlineColor: 'rgb(30, 130, 250)',
+                endPlugColor: '#ff0000', // translucent
+                endPlugOutlineColor: 'green',
+                size: 2,
+                startPlugSize: 1.5,
+                startPlugOutlineSize: 1,
+                endPlugSize: 3,
+                endPlugOutlineSize: 3
+            }
+            // lineContainer.value = new LeaderLine(
+            //     LeaderLine.mouseHoverAnchor(dom1),
+            //     dom3,
+            //     styleOption
+            // )
+            // lineContainer2.value = new LeaderLine(
+            //     LeaderLine.mouseHoverAnchor(dom1),
+            //     dom4,
+            //     styleOption
+            // )
+            lineContainer3.value = new LeaderLine(dom2, dom4, styleOption)
+
+            // lineContainer4.value = new LeaderLine(dom2, dom3, styleOption)
+            /** 显示效果
+             *  draw 绘制线条
+             *  fade 淡入
+             *  none 无效果，即直接显示
+             */
+            let showEffectName = 'draw'
+            // 动画参数
+            let animOptions = {
+                duration: 1000, //持续时长
+                timing: 'ease-in' // 动画函数
+            }
+            console.log("lineContainer", lineContainer)
+            // lineContainer.value.show(showEffectName, animOptions)
+            // lineContainer2.value.show(showEffectName, animOptions)
+            lineContainer3.value.show(showEffectName, animOptions)
+            lineContainer3.value.endPlugOutline = true;
+            // lineContainer4.value.show(showEffectName, animOptions)
+            // lineContainer.value.position()
+            // lineContainer2.value.position()
+            lineContainer3.value.position()
+            console.log("lineContainer3", lineContainer3.value);
+            // lineContainer4.value.position()
+        }
+
+        return {
+            lineContainer,
+            lineContainer2,
+            lineContainer3,
+            lineContainer4,
+            // leader_line
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.line-block {
+
+    border: 1px solid red;
+
+    position: absolute;
+    width: 412px;
+    height: 90vh;
+    top: 111px;
+    z-index: 300;
+
+    .one {
+        display: flex;
+        justify-content: space-around;
+        // height: 100px;
+    }
+
+    .two {
+        margin-top: 100px;
+        display: flex;
+        justify-content: space-around;
+    }
+
+    .iframe-block {
+        margin-top: 50px;
+    }
+
+    .target {
+        display: inline-block;
+        background-color: #9ee7ea;
+        padding: 12px;
+    }
+
+    .block-one {
+        border: 1px solid blue;
+        padding: 10px;
+    }
+
+    .block-two {
+        border: 1px solid blue;
+        padding: 10px;
+    }
+
+    .block-three {
+        border: 1px solid blue;
+        padding: 10px;
+    }
+
+    .block-four {
+        border: 1px solid blue;
+        padding: 10px;
+    }
+}
+
+.target {
+    display: inline-block;
+    background-color: #9ee7ea;
+    padding: 12px;
+}
+
+#start {}
+
+#end {
+    float: right;
+    margin-top: 200px;
+}
+</style>

src/request/api.js

@@ -5,4 +5,7 @@ export const testApi = p => post(`https://test.lqkj.top/wsngt-server/system/sysu
 
 export const getClass = () => get("http://192.168.4.219:12397/ioc-server/wisdomClass/classroomStatistic")
 
-export const getDevice = () => get("http://192.168.4.219:12397/ioc-server/wisdomClass/deviceStatistic")
+export const getDevice = () => get("http://192.168.4.219:12397/ioc-server/wisdomClass/deviceStatistic")
+
+
+export const getClassDetail = (deviceCode) => get(`http://192.168.4.219:12397/ioc-server/wisdomClass/deviceDetail/${deviceCode}`)

src/request/http.js

@@ -22,7 +22,7 @@ axios.interceptors.request.use(
 
 axios.interceptors.response.use(
     response => {
-        console.log("response", response)
+        // console.log("response", response)
         if (response.status === 200) {
             return Promise.resolve(response.data)
         } else {

src/webRtcPlayer.js

@@ -132,7 +132,7 @@ function webRtcPlayer(parOptions) {
         video.style.top = 0;
         video.style.left = 0;
         video.style.position = "relative";
-        video.style.zIndex = 100;
+        // video.style.zIndex = 0;
         video.style.cursor = "pointer";
         // video.style.overflow="hidden";
 

src/webrtcVideo.js

@@ -25,7 +25,7 @@ const WS_OPEN_STATE = 1;
 
 let qualityController = false;
 let qualityControlOwnershipCheckBox;
-let matchViewportResolution;
+let matchViewportResolution = true;
 // TODO: Remove this - workaround because of bug causing UE to crash when switching resolutions too quickly
 let lastTimeResized = new Date().getTime();
 let resizeTimeout;
@@ -1267,7 +1267,7 @@ function resizePlayerStyle(event) {
 
     if (!playerElement)
         return;
-
+    console.log("resizePlayerStyle");
     updateVideoStreamSize();
 
     if (playerElement.classList.contains('fixed-size')) {
@@ -1300,9 +1300,11 @@ function setupMouseAndFreezeFrame(playerElement) {
 }
 
 function updateVideoStreamSize() {
-    if (!matchViewportResolution) {
-        return;
-    }
+    console.log(matchViewportResolution, !matchViewportResolution);
+    // if (!matchViewportResolution) {
+    //     return;
+    // }
+    console.log("看一下走到这里美哟u");
 
     let now = new Date().getTime();
     if (now - lastTimeResized > 1000) {
@@ -1311,7 +1313,8 @@ function updateVideoStreamSize() {
             return;
 
         let descriptor = {
-            ConsoleCommand: 'setres ' + playerElement.clientWidth + 'x' + playerElement.clientHeight
+            // ConsoleCommand: 'setres ' + playerElement.clientWidth + 'x' + playerElement.clientHeight
+            ConsoleCommand: 'setres ' + playerElement.clientWidth + 'x' + 1080
         };
         emitCommand(descriptor);
         console.log(descriptor);
@@ -2055,16 +2058,15 @@ function onExpandOverlay_Click( /* e */) {
 
 function showConnectOverlay() {
 
-    let aa = null;
-    aa = function () {
-        return 4;
-    }
-    let b = aa();
 
     const startText = document.createElement('div');
     startText.id = 'playButton';
     startText.innerHTML = '点击连接';
     startText.style.zIndex = "999"
+    startText.style.position = "absolute"
+    startText.style.top = "50%"
+    startText.style.left = "50%"
+
     // fix remove html to clear click listener
     const videoPlayOverlay = document.getElementById('videoPlayOverlay');
     if (videoPlayOverlay) {
@@ -2090,6 +2092,7 @@ function start() {
         } else {
             connect();
         }
+        console.log("start", 234242342);
         resizePlayerStyle();
     } else {
         connect();

vite.config.js

@@ -5,20 +5,6 @@ import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import postCssPxToRem from "postcss-pxtorem";
 
-// https://vitejs.dev/config/
-// export default defineConfig({
-//   plugins: [
-//     vue(),
-
-//     Components({
-//       resolvers: [ElementPlusResolver()]
-//     }),
-//     AutoImport({
-//       resolvers: [ElementPlusResolver()]
-//     })
-//   ]
-
-// })
 export default defineConfig({
   plugins: [
     vue(),
@@ -27,7 +13,7 @@ export default defineConfig({
     }),
     AutoImport({
       resolvers: [ElementPlusResolver()]
-    })
+    }),
   ],
   css: {
     postcss:
@@ -40,5 +26,17 @@ export default defineConfig({
           // 需要转换的属性，这里选择全部都进行转换
         })]
     }
-  }
+  },
+  configureWebpack: (config) => {
+    console.log("config");
+    config.module.rules.push(
+      {
+        test: path.resolve(__dirname, 'node_modules/leader-line/'),
+        use: [{
+          loader: 'skeleton-loader',
+          options: { procedure: content => `${content}export default LeaderLine` }
+        }]
+      }
+    )
+  },
 })