330 lines
13 KiB
Plaintext
330 lines
13 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8"%>
|
||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
|
||
<head>
|
||
<title>大屏</title>
|
||
<style>
|
||
#subModal {
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
min-width: 80%;
|
||
/*这个比例可以自己按需调节*/
|
||
overflow: visible;
|
||
bottom: inherit;
|
||
right: inherit;
|
||
}
|
||
|
||
.dropdown::-webkit-scrollbar{
|
||
width:10px;
|
||
height:10px;
|
||
}
|
||
.dropdown::-webkit-scrollbar-thumb{
|
||
width:4px;
|
||
height:60px;
|
||
background-color:#33acd1;
|
||
border-radius:3px;
|
||
}
|
||
.dropdown::-webkit-scrollbar-track
|
||
{
|
||
border-radius: 10px;
|
||
background-color: rgba(255,255,255,.5);
|
||
}
|
||
</style>
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
|
||
<script type="text/javascript">
|
||
var websocket = null;
|
||
|
||
//websocket接收信息，触发换屏
|
||
function registerEvent() {
|
||
websocket.onopen = function (event) {
|
||
console.log("大屏已连接");
|
||
}
|
||
|
||
websocket.onmessage = function (event) {
|
||
//console.log("height", document.documentElement.offsetHeight);
|
||
if (event.data != "大屏已连接" && event.data != "大屏已断开" && event.data != "控制已断开" && event.data != "控制已连接") {
|
||
//传递JSON先转换为数组再判定type
|
||
var json = eval(event.data);
|
||
if (json[0].type == "interaction") {//交互
|
||
//交互模态判断
|
||
if (json[0].id != null && json[0].id != "") {
|
||
createInteraction(json[0].id);
|
||
}
|
||
} else if (json[0].type == "clearInteraction") {//清除交互
|
||
if (document.getElementById("subModal")) {
|
||
if (document.getElementById("frameCamera")) {
|
||
$("frameCamera").remove();
|
||
}
|
||
//console.log(document.getElementById("subModal"));
|
||
closeModal("subModal");
|
||
$("div").removeClass("modal-backdrop fade in");
|
||
//setTimeout($("div").removeClass("modal-backdrop fade in"),1000);
|
||
}
|
||
} else if (json[0].type == "plan") {//方案
|
||
//根据方案id获取方案数据
|
||
createPage(json[0].id);
|
||
} else {
|
||
|
||
}
|
||
}
|
||
};
|
||
websocket.onclose = function (event) {
|
||
console.log("大屏已断开");
|
||
$("#Show").hide();
|
||
$("#Start").show();
|
||
$("#Start h2").text("连接已断开！");
|
||
reconnect();
|
||
};
|
||
//连接发生错误的回调方法
|
||
websocket.onerror = function () {
|
||
$("#Show").hide();
|
||
$("#Start").show();
|
||
$("#Start h2").text("连接已断开！");
|
||
reconnect();
|
||
};
|
||
}
|
||
|
||
//setTimeout(function(){location.reload()},3600000); //指定1小时刷新一次
|
||
//自动重连websocket
|
||
function reconnect() {
|
||
var userName = "大屏";
|
||
// websocket = new WebSocket('ws://' + window.location.host + ext.contextPath + '/chat?userName=' + userName);
|
||
websocket = new WebSocket(ext.basePath.replace("http","ws")+"/chat/"+userName);
|
||
websocket.onopen = function (event) {
|
||
console.log("大屏已连接");
|
||
}
|
||
|
||
websocket.onmessage = function (event) {
|
||
if (event.data != "大屏已连接" && event.data != "大屏已断开") {
|
||
//传递JSON先转换为数组再判定type
|
||
var json = eval(event.data);
|
||
if (json[0].type == "interaction") {//交互
|
||
//交互模态判断
|
||
if (json[0].id != null && json[0].id != "") {
|
||
createInteraction(json[0].id);
|
||
}
|
||
} else if (json[0].type == "clearInteraction") {//清除交互
|
||
if (document.getElementById("subModal")) {
|
||
if (document.getElementById("frameCamera")) {
|
||
$("frameCamera").remove();
|
||
}
|
||
//console.log(document.getElementById("subModal"));
|
||
closeModal("subModal");
|
||
$("div").removeClass("modal-backdrop fade in");
|
||
//setTimeout($("div").removeClass("modal-backdrop fade in"),1000);
|
||
}
|
||
} else if (json[0].type == "plan") {//方案
|
||
//根据方案id获取方案数据
|
||
createPage(json[0].id);
|
||
} else {
|
||
|
||
}
|
||
}
|
||
};
|
||
|
||
websocket.onclose = function (event) {
|
||
setTimeout("reconnect();", 8000);
|
||
};
|
||
//连接发生错误的回调方法 `1
|
||
websocket.onerror = function () {
|
||
$("#Show").hide();
|
||
$("#Start").show();
|
||
$("#Start h2").text("连接已断开！");
|
||
websocket.close();
|
||
};
|
||
}
|
||
$(window).unload(function () {
|
||
console.log("大屏关闭");
|
||
websocket.close();
|
||
});
|
||
|
||
//获取url地址根目录 当前taomcat下路径
|
||
function getRootPath(){
|
||
var pathName = window.location.pathname.substring(1);
|
||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||
return window.location.protocol + '//' + window.location.host;
|
||
}
|
||
|
||
function createPage(planId) {
|
||
// console.log("opener",opener);
|
||
if(opener == null){
|
||
window.close();
|
||
}
|
||
destroyIframe();
|
||
$("#layout").html("");//先清空
|
||
$("#Start").hide();
|
||
$("#Show").show();
|
||
$.post(ext.contextPath + '/plan/getPlanWholeInfo.do', { planId: planId }, function (data) {
|
||
//console.log("tbheight", document.getElementById("layout").offsetHeight);
|
||
//背景赋色
|
||
document.getElementById('layout').style.backgroundColor = data[0].backgroundColor;
|
||
//背景图
|
||
if(data[0].image!=''){
|
||
$('#layout').css("background","url("+getRootPath()+""+data[0].image+") no-repeat");
|
||
$('#layout').css("background-size","contain");
|
||
}
|
||
//生成框架
|
||
var rowno = 0;
|
||
var $tr = $('');
|
||
var layoutList = data[0].planLayout;
|
||
// console.log(layoutList);
|
||
for (var i = 0; i < layoutList.length; i++) {
|
||
if (layoutList[i].layoutDetail.rowno == rowno) {
|
||
//添加td
|
||
if (layoutList[i].jspCode != "" && layoutList[i].jspCode != undefined) {
|
||
var iframeHeight=layoutHeight*(Number(layoutList[i].height)/100)+"px";
|
||
// console.log(miniHeight);
|
||
// console.log(iframeHeight);
|
||
var $td = $('<td width="' + layoutList[i].width + '%" colspan="' + layoutList[i].layoutDetail.colspan + '" rowspan = "' + layoutList[i].layoutDetail.rowspan
|
||
+ '"><iframe id="frame' + i + '" scrolling="no" allowtransparency="yes" style="height:'+iframeHeight+';width:100%;border:0px;padding:0px;margin:0px" src="'
|
||
+ ext.contextPath + '/jsp/visual/modules/' + layoutList[i].jspCode + '.jsp?backgroundColor=' + data[0].backgroundColor.replace(/\#/g, "")
|
||
+ '&planLayoutId=' + layoutList[i].id + '&fId=frame' + i + '&videoType=switch"></iframe></td>');
|
||
$tr.append($td);
|
||
} else {
|
||
var $td = $('<td width="' + layoutList[i].width + '%" colspan="' + layoutList[i].layoutDetail.colspan + '" rowspan = "' + layoutList[i].layoutDetail.rowspan
|
||
+ '"></td>');
|
||
$tr.append($td);
|
||
}
|
||
} else if (layoutList[i].layoutDetail.rowno > rowno) {
|
||
//大于表示要换行 将原来tr添加到table
|
||
// if (i != 0) {
|
||
// $("#layout").append($tr);
|
||
// }
|
||
//生成新tr
|
||
rowno = layoutList[i].layoutDetail.rowno;
|
||
var miniHeight = 0;
|
||
for (var j = 0; j < layoutList.length; j++) {
|
||
if (layoutList[j].layoutDetail.rowno == rowno) {
|
||
if (miniHeight == 0) {
|
||
miniHeight = layoutList[j].height;//此行号第一条先默认miniHeigth
|
||
} else {
|
||
if (Number(miniHeight) > Number(layoutList[j].height) ) {
|
||
miniHeight = layoutList[j].height;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
$tr = $('<tr height="' + miniHeight + '%"></tr>');
|
||
// console.log(layoutHeight);
|
||
// console.log(miniHeight);
|
||
//以及此行第一个td
|
||
if (layoutList[i].jspCode != "" && layoutList[i].jspCode != undefined) {
|
||
var iframeHeight=layoutHeight*(layoutList[i].height/100)+"px";
|
||
// console.log(layoutHeight);
|
||
// console.log(miniHeight);
|
||
// console.log(iframeHeight);
|
||
var $td = $('<td width="' + layoutList[i].width + '%" colspan="' + layoutList[i].layoutDetail.colspan + '" rowspan = "' + layoutList[i].layoutDetail.rowspan
|
||
+ '"><iframe id="frame' + i + '" scrolling="no" allowtransparency="yes" style="height:'+iframeHeight+';width:100%;border:0px;padding:0px;margin:0px" src="'
|
||
+ ext.contextPath + '/jsp/visual/modules/' + layoutList[i].jspCode + '.jsp?backgroundColor=' + data[0].backgroundColor.replace(/\#/g, "")
|
||
+ '&planLayoutId=' + layoutList[i].id + '&fId=frame' + i + '&videoType=switch"></iframe></td>');
|
||
$tr.append($td);
|
||
} else {
|
||
var $td = $('<td width="' + layoutList[i].width + '%" colspan="' + layoutList[i].layoutDetail.colspan + '" rowspan = "' + layoutList[i].layoutDetail.rowspan
|
||
+ '"></td>');
|
||
$tr.append($td);
|
||
}
|
||
|
||
$("#layout").append($tr);
|
||
} else {
|
||
|
||
}
|
||
}
|
||
$("#layout").append($tr);//最后一次添加tr
|
||
}, 'json');
|
||
}
|
||
|
||
var interactionId = "";//用于表示两次点击的是否是同一个交互按钮
|
||
function createInteraction(id) {
|
||
destroyIframe();//删除所有iframe
|
||
//先关闭模态
|
||
if (document.getElementById("subModal")) {
|
||
//有摄像头先关闭摄像头
|
||
if (document.getElementById("frameCamera")) {
|
||
$("#frameCamera").remove();
|
||
}
|
||
//console.log(document.getElementById("subModal"));
|
||
closeModal("subModal");
|
||
$("div").removeClass("modal-backdrop fade in");
|
||
//setTimeout($("div").removeClass("modal-backdrop fade in"),1000);
|
||
}
|
||
//再判断连续两次是否相同交互
|
||
if (interactionId == id) {
|
||
//相同交互
|
||
interactionId = "";
|
||
} else {
|
||
//非相同交互
|
||
$.post(ext.contextPath + '/plan/openInteraction.do', { id: id }, function (data) {
|
||
$("#interactionDiv").html(data);
|
||
openModal('subModal');
|
||
//console.log("height", document.documentElement.offsetHeight);
|
||
});
|
||
interactionId = id;
|
||
}
|
||
}
|
||
var layoutHeight="";
|
||
//websocket触发换屏
|
||
$(document).ready(function () {
|
||
$.post(ext.contextPath + '/plan/getPlanById.do', { id: '${planId}' }, function (data) {
|
||
// console.log(data);
|
||
layoutHeight=data[0].height;
|
||
if(layoutHeight.indexOf("%")>0){
|
||
layoutHeight=$(document).height();
|
||
}
|
||
$("#pageBody").height(data[0].height);
|
||
$("#pageBody").width(data[0].width);
|
||
if(Number(window.screen.width)<Number(data[0].width)){
|
||
$("#pageBody").css('overflow-x','scroll');
|
||
}else{
|
||
$("#pageBody").css('overflow-x','hidden');
|
||
}
|
||
if(Number(window.screen.height)<Number(data[0].height)){
|
||
$("#pageBody").css('overflow-y','scroll');
|
||
}else{
|
||
$("#pageBody").css('overflow-y','hidden');
|
||
}
|
||
if ('WebSocket' in window) {
|
||
window.focus();
|
||
// 创建websocket对象
|
||
var userName = "大屏";
|
||
if (websocket) {
|
||
websocket.close();
|
||
}
|
||
websocket = new WebSocket(ext.basePath.replace("http","ws")+"/chat/"+userName);
|
||
// websocket = new WebSocket('ws://' + window.location.host + ext.contextPath + '/chat?userName=' + userName);
|
||
registerEvent();
|
||
//点击树节点自动显示浏览界面
|
||
// createPage('${planId}');
|
||
}
|
||
else {
|
||
alert('当前浏览器不支持websocket')
|
||
}
|
||
},'json');
|
||
});
|
||
|
||
</script>
|
||
|
||
</head>
|
||
|
||
<body id="pageBody" class="dropdown" style="margin:0;padding:0;">
|
||
<div id="interactionDiv"></div>
|
||
<div style="width:100%;height:100%;margin:0;padding:0;display: none;" id="Show">
|
||
<table id="layout" style="overflow: auto;width:100%;height:100%;">
|
||
|
||
</table>
|
||
</div>
|
||
|
||
<div style="width:100%;height:100%;margin:0;padding:0;" id="Start">
|
||
<h2>请拖动至大屏中，然后进行方案投至。</h2>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |