<template>
<div class="container">
<div class="header">
<img :src="headImg" alt="" />
</div>
<el-container>
<Left></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 class="model-detail" >
<div v-for="item in classDeviceInfo" >
<div class="list">
{{ item[0].value }}
</div>
<div v-for="item2 in item" class="listtitle">
<span style="color: #fff;margin-left: 5px; font-weight: 700;padding-left: 8px; "> {{ item2.name }} :</span>
<span v-if="item2.value!='在线'" style=" font-family: 100; margin-left: 5px;color: #ffffffeb;">{{ item2.value }}</span>
<span v-else style=" font-family: 100; margin-left: 5px;color: #10C383;">{{ item2.value }}</span>
</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 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 handleResponseFunction = (data) => {
console.log("从UE返回过来的值", data)
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;
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)) -100+ '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
}
},
})
</script>
<style scoped lang="scss">
@import '../assets/css/home.scss';
</style>