first commit
This commit is contained in:
264
WebRoot/jsp/visual/view.jsp
Normal file
264
WebRoot/jsp/visual/view.jsp
Normal file
@ -0,0 +1,264 @@
|
||||
<%@ 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>
|
||||
Reference in New Issue
Block a user