264 lines
11 KiB
Plaintext
264 lines
11 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><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
|||
|
|
<!-- 引用页头及CSS页-->
|
|||
|
|
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/WebControl/jsencrypt.min.js"></script>
|
|||
|
|
<script type="text/javascript"
|
|||
|
|
src="<%=request.getContextPath()%>/node_modules/WebControl/jsWebControl-1.0.0.min.js"></script>
|
|||
|
|
<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 != "大屏已断开") {
|
|||
|
|
//传递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")) {
|
|||
|
|
//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("大屏已断开");
|
|||
|
|
reconnect();
|
|||
|
|
};
|
|||
|
|
//连接发生错误的回调方法
|
|||
|
|
websocket.onerror = function () {
|
|||
|
|
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")) {
|
|||
|
|
//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 () {
|
|||
|
|
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) {
|
|||
|
|
destroyIframe();
|
|||
|
|
$("#layout").empty();//先清空
|
|||
|
|
$.post(ext.contextPath + '/plan/getPlanWholeInfo.do', { planId: planId }, function (data) {
|
|||
|
|
//console.log("data", data);
|
|||
|
|
//背景赋色
|
|||
|
|
document.getElementById('pageBody').style.backgroundColor = data[0].backgroundColor;
|
|||
|
|
//背景图
|
|||
|
|
if(data[0].image!=''){
|
|||
|
|
$('#pageBody').css("background","url("+getRootPath()+""+data[0].image+") no-repeat");
|
|||
|
|
$('#pageBody').css("background-size","cover");
|
|||
|
|
}
|
|||
|
|
//生成框架
|
|||
|
|
var rowno = 0;
|
|||
|
|
var $tr = $('');
|
|||
|
|
var layoutList = data[0].planLayout;
|
|||
|
|
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=frameView' + i + '&videoType=view"></iframe></td>');
|
|||
|
|
$tr.append($td);
|
|||
|
|
} else {
|
|||
|
|
var $td = $('<td width="' + layoutList[i].width + '%" colspan="' + layoutList[i].layoutDetail.colspan + '" rowspan = "' + layoutList[i].layoutDetail.rowspan
|
|||
|
|
+ '"><iframe scrolling="no" allowtransparency="yes" style="height:100%;width:100%;border:0px;padding:0px;margin:0px"></iframe></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>');
|
|||
|
|
|
|||
|
|
//以及此行第一个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=frameView' + i + '&videoType=view"></iframe></td>');
|
|||
|
|
$tr.append($td);
|
|||
|
|
} else {
|
|||
|
|
var $td = $('<td width="' + layoutList[i].width + '%" colspan="' + layoutList[i].layoutDetail.colspan + '" rowspan = "' + layoutList[i].layoutDetail.rowspan
|
|||
|
|
+ '"><iframe scrolling="no" allowtransparency="yes" style="height:100%;width:100%;border:0px;padding:0px;margin:0px"></iframe></td>');
|
|||
|
|
$tr.append($td);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$("#layout").append($tr);
|
|||
|
|
} else {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$("#layout").append($tr);//最后一次添加tr
|
|||
|
|
}, 'json');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var interactionId = "";//用于表示两次点击的是否是同一个交互按钮
|
|||
|
|
function createInteraction(id) {
|
|||
|
|
destroyIframe();//删除所有iframe
|
|||
|
|
//先关闭模态
|
|||
|
|
if (document.getElementById("subModal")) {
|
|||
|
|
//console.log(document.getElementById("subModal"));
|
|||
|
|
closeModal("subModal");
|
|||
|
|
$("div").removeClass("modal-backdrop fade in");
|
|||
|
|
//setTimeout($("div").removeClass("modal-backdrop fade in"),3000);
|
|||
|
|
}
|
|||
|
|
//再判断连续两次是否相同交互
|
|||
|
|
if (interactionId == id) {
|
|||
|
|
//相同交互
|
|||
|
|
interactionId = "";
|
|||
|
|
} else {
|
|||
|
|
//非相同交互
|
|||
|
|
$.post(ext.contextPath + '/plan/openInteraction.do', { id: id, videoTypeInteraction:"view" }, 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();
|
|||
|
|
}
|
|||
|
|
$("#layout").height(data[0].height);
|
|||
|
|
$("#layout").width(data[0].width);
|
|||
|
|
|
|||
|
|
if ('WebSocket' in window) {
|
|||
|
|
// 创建websocket对象
|
|||
|
|
var userName = "大屏";
|
|||
|
|
if (websocket) {
|
|||
|
|
websocket.close();
|
|||
|
|
}
|
|||
|
|
// websocket = new WebSocket('ws://' + window.location.host + ext.contextPath + '/chat?userName=' + userName);
|
|||
|
|
websocket = new WebSocket(ext.basePath.replace("http","ws")+"/chat/"+userName);
|
|||
|
|
registerEvent();
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
alert('当前浏览器不支持websocket');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//点击树节点自动显示浏览界面
|
|||
|
|
createPage('${planId}');
|
|||
|
|
},'json');
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body id="pageBody" style="width:100%;height:100%;margin:0;padding:0;overflow:hidden;">
|
|||
|
|
<div id="interactionDiv"></div>
|
|||
|
|
<div style="width:100%;height:100%;margin:0;padding:0;overflow:auto;">
|
|||
|
|
<table id="layout" style="width:100%;height:100%;"></table>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|