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>
|