v3_yyz/src/components/home.vue

<template>
    <div class="container">
        <div class="header">
            <img :src="headImg" alt="" />
        </div>
        <el-container>
            <Left ref="childRef" @childMethod="childMethod"></Left>
            <right></right>
            <div ref="linedomRef" style="width:1px;height:1px;position: absolute;z-index: 228;background:#ccc;">
            </div>

        </el-container>
        <div ref="popoverRef" id="popoverRef" class="modelInfo">
            <div v-if="orientation=='Left' || orientation=='Right'" class="model-detail"  >
                <div v-for="item in classDeviceInfo" class="listbox" >
                    
                    <div class="list">
                    {{ item[0].value }}
                    </div>
                    <div   v-for="item2 in item" class="listtitle" >
                        
                        <div  v-if="item2.name!=='设备名称'" style="height: 30px;display: flex;align-items: center;">
                            <span class="name"> {{ item2.name }} :</span>
                       <span v-if="item2.value!='在线'" class="value">{{ item2.value }}</span>
                       <span v-else style=" font-family: 100; margin-left: 5px;color: #10C383;">{{ item2.value }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="model-detail2"  >
                <div style="display: flex;">
                    <div v-for="item in classDeviceInfo" class="listbox2"  >
                        
                        <div class="list" style="text-align: center;width: 100%;">
                        {{ item[0].value }}
                        </div>
                        
                        <div class="listtitlebox">
                                <div   v-for="item2 in item" class="listtitle" >
                            
                                
                            
                                <div v-if="item2.name!=='设备名称'">
                                    <span class="name"> {{ item2.name }} :</span>
                                <span v-if="item2.value!='在线'" class="value" style="font-weight: 400;">{{ item2.value }}</span>
                                <span v-else style=" font-family: 100; margin-left: 5px;color: #10C383;">{{ item2.value }}</span>
                                </div>
                         
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>


        <!-- 视频播放弹框 -->
        <el-dialog class="videoDialog" v-model="videoDialog" :title="titleDialog" 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 Login from './Login.vue'
import LeaderLine from "../../public/js/leaderline.js"
import { getClassDetail } from '../request/api.js'
import {
    callUIInteraction,
} from "../webrtcVideo";

import { getVideoUrl } from '../request/api';

export default ({
    name: 'Histogram',
    components: { Login, Left, Right, ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
  
    setup() {
        const titleDialog = ref("")
        const orientation = ref("")
        // 视频数据
        const videoData = reactive({
            width: "100%", //播放器高度
            height: "100%", //播放器高度
            color: "red", //主题色
            title: "互动教室", //视频名称
            // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
            type: 'm3u8',
            src: '',
            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([])
        // 位置弹框
        let centerDialogVisible = ref(false)
        // 获取点击点数据
        let clickData = reactive({})
        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 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: 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;
        //     classDataLoaded.value = true

        // }
        const clickData1 = ref({})
        const mouseClick = function (e) {
            // console.log("屏幕点击位置看", e)
            clickData1.value.x = e.clientX;
            clickData1.value.y = e.clientY;
        }


        //消失线的方法
        const childMethod =()=>{
            
            if (lineContainer.value) {
                    lineContainer.value.remove()
                    lineContainer.value = null
                }
        }


        const childRef = ref(null);
        const handleResponseFunction = (data) => {
            console.log("从UE返回过来的值", data)

            //如果退出教室
            if(data=='quit_class'){

                //消失线
                lineContainer.value.remove()
                lineContainer.value = null
                //消失点击详情
                popoverRef.value.style.display = "none"
                //消失面板
                if (childRef.value) {
                    childRef.value.clearPanel();
                }

                
            }



            if (data == "{isrotate}") {
                // console.log("旋转场景了", lineContainer, lineContainer.value);
                if (lineContainer.value) {
                    lineContainer.value.remove()
                    lineContainer.value = null
                }
                popoverRef.value.style.display = "none"
                return
            }
            let json = eval("(" + data + ")");//转对象
            console.log("clickData---点击的数据", json)
            if (json.url) {
                videoDialog.value = true;
                titleDialog.value = json.name
                getVideoUrl({ "rtsp": json.url }).then(res => {
                    videoData.src = res.data.httpFlv;
                    console.log("32424", videoData.src)
                })

                return
            }
            clickData.value = json;


            orientation.value=clickData.value.direction

            console.log('看看这个',clickData.value.direction);
            if (json.deviceCode) {
               
              
                console.log('sadasd',json.deviceCode);
                let replacedStr = json.deviceCode.replace("/", "A");
                getClassDetail(replacedStr).then(res => {
                    console.log('sad21312',res);
                    classDeviceInfo.value = res.data;

                    console.log('asd2121',classDeviceInfo.value);
                    // classDeviceInfo.value.map(i => {
                    //     if (i.value == "在线") {
                    //         i.online = true
                    //     }
                    //     if (i.value == "离线") {
                    //         i.online = false
                    //     }
                    // })
                    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)

                    // 弹出框位置
                    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 - 300) + 'px'
                            popoverRef.value.style.left = (json.x - 120) + 'px'
                            break;
                        case "Right":
                            popoverRef.value.style.top = (Number(json.y)) -150+ '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()

                    }

                    lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value, lineStyleOption.value)


                    lineContainer.value.show('draw', {
                        duration: 100, //持续时长
                        timing: 'ease-in' // 动画函数
                    })
                    lineContainer.value.endPlugOutline = true;
                    lineContainer.value.startPlugOutline = true;
                    lineContainer.value.position();



                })

            }


        }
        const windowSize = function () {
            // console.log("监听一下窗口是不是改了--click", lineContainer);
            callUIInteraction("windowSize")
        }
  

        onMounted(() => {
            addResponseEventListener("444", handleResponseFunction);
            window.addEventListener('resize', windowSize);
            // window.addEventListener('click', windowSize);
            // addResponseEventListener("widowSizeChange", windoChangeFunction);



        })

    
        const headImg = ref('./img/head.png')
        return {
            centerDialogVisible,
            interDevice,
            clickData,

            triggerRef,
            videoData,
            onPlay,
            videoDialog,
            lookVideo,
            linedomRef,
            popoverRef,
            lineContainer,
            classDeviceInfo,
            mouseClick,
            headImg,
            titleDialog,
            orientation,
            childMethod,
            childRef
    
        }
    },
})

</script>

<style scoped lang="scss">
@import '../assets/css/home.scss';
</style>