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