Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/process/dataVisualViewList.jsp
2026-01-16 14:13:44 +08:00

1129 lines
59 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ 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" %>
<%String contextPath = request.getContextPath();%>
<%@page import="com.sipai.entity.process.DataVisualFrame" %>
<%request.setAttribute("Type_structure", DataVisualFrame.Type_structure); %>
<%request.setAttribute("Type_frame", DataVisualFrame.Type_frame); %>
<%@page import="com.sipai.entity.process.DataVisualContent" %>
<%request.setAttribute("Type_SignalPoint", DataVisualContent.Type_SignalPoint); %>
<%request.setAttribute("Type_DataPoint", DataVisualContent.Type_DataPoint); %>
<%request.setAttribute("Type_Text", DataVisualContent.Type_Text); %>
<%request.setAttribute("Type_Camera", DataVisualContent.Type_Camera); %>
<%request.setAttribute("Type_Form", DataVisualContent.Type_Form); %>
<%request.setAttribute("Type_BarChart", DataVisualContent.Type_BarChart); %>
<%request.setAttribute("Type_LineChart", DataVisualContent.Type_LineChart); %>
<%request.setAttribute("Type_PieChart", DataVisualContent.Type_PieChart); %>
<%request.setAttribute("Type_PercentChart", DataVisualContent.Type_PercentChart); %>
<%request.setAttribute("Type_RadarChart", DataVisualContent.Type_RadarChart); %>
<%request.setAttribute("Type_GaugeChart", DataVisualContent.Type_GaugeChart); %>
<%request.setAttribute("Type_Picture", DataVisualContent.Type_Picture); %>
<%request.setAttribute("Type_Date", DataVisualContent.Type_Date); %>
<%request.setAttribute("Type_Iframe", DataVisualContent.Type_Iframe); %>
<%request.setAttribute("Type_Tab", DataVisualContent.Type_Tab); %>
<%request.setAttribute("Type_MpView", DataVisualContent.Type_MpView); %>
<%request.setAttribute("Type_ProgressBar", DataVisualContent.Type_ProgressBar); %>
<%request.setAttribute("Type_Line", DataVisualContent.Type_Line); %>
<%request.setAttribute("Type_DateSelect", DataVisualContent.Type_DateSelect); %>
<%request.setAttribute("Type_SuspensionFrame", DataVisualContent.Type_SuspensionFrame); %>
<%request.setAttribute("Type_PolarCoordinates", DataVisualContent.Type_PolarCoordinates); %>
<%request.setAttribute("Type_Weather", DataVisualContent.Type_Weather); %>
<%request.setAttribute("Type_Switch", DataVisualContent.Type_Switch); %>
<%request.setAttribute("Type_PersonnelPositioning", DataVisualContent.Type_PersonnelPositioning); %>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title><%= ServerObject.atttable.get("TOPTITLE")%>
</title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/incProVisual.jsp"></jsp:include>
<!-- 组件自定义js-->
<script type="text/javascript" src="<%=request.getContextPath()%>/jsp/process/dataVisualAssembly/assembly.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jsp/process/dataVisualAssembly/ZResize.js"
charset="utf-8"></script>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/daterangepicker/daterangepicker-bs3.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/daterangepicker/moment.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/node_modules/daterangepicker/daterangepicker.js"></script>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"/>
<script type="text/javascript"
src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
charset="utf-8"></script>
<%@ page import="com.sipai.tools.Mqtt" %>
<%@ page import="org.springframework.context.ApplicationContext" %>
<%@ page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
<%-- mqtt依赖--%>
<script src="<%=request.getContextPath()%>/JS/mqtt/mqtt.min.js" type="text/javascript"></script>
<%-- mqtt事件--%>
<jsp:include page="/jsp/mqtt/alarm_mqtt.jsp"></jsp:include>
<style type="text/css">
.rightClickMenu {
padding: 1px;
border: 1px solid #B8CBCB;
background-color: #fff;
-moz-box-shadow: 2px 2px 5px #666;
-webkit-box-shadow: 2px 2px 5px #666;
box-shadow: 2px 2px 5px #666;
width: 100px;
position: absolute;
display: none;
}
/* .li_separate{
line-height: 0;
margin: 3px;
border-bottom: 1px solid #B8CBCB;
font-size: 0;
} */
.rightClickMenu_a {
display: block;
height: 25px;
line-height: 24px;
padding: 0 5px 0 15px;
color: #000;
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
.rightClickMenu_a:hover {
background: #348CCC;
color: white;
}
</style>
<script type="text/javascript">
//屏蔽浏览器右键菜单
document.oncontextmenu = function () {
return false;
}
var frameId = "";
var nowUnitId = "";
var sdt = "";
var edt = "";
var roundtimeT = null;
var nowTNum = 1;
$(function () {
mqttStatus = '${mqttStatus}';
mqttHostWeb = '${mqttHostWeb}';
if ('${param.unitId}' != '') {
nowUnitId = '${param.unitId}';
} else {
nowUnitId = unitId;
}
var leftToolsTop = $("#leftTools").offset().top;
var leftToolsLeft = $("#leftTools").offset().left;
$(window).scroll(function () {
var offsetTop = leftToolsTop + $(window).scrollTop() + "px";
var offsetLeft = leftToolsLeft + $(window).scrollLeft() + "px";
$("#leftTools").animate({top: offsetTop, left: offsetLeft}, {duration: 300, queue: false});
});
var leftToolsPackupTop = $("#leftToolsPackup").offset().top;
var leftToolsPackupLeft = $("#leftToolsPackup").offset().top;
$(window).scroll(function () {
var offsetTop = leftToolsPackupTop + $(window).scrollTop() + "px";
var offsetLeft = leftToolsPackupLeft + $(window).scrollLeft() + "px";
$("#leftToolsPackup").animate({top: offsetTop, left: offsetLeft}, {duration: 300, queue: false});
});
initFrameTreeView();
$(document).on('click', function () {
$('.rightClickMenu').hide();
})
});
function framePackup() {
$("#leftToolsLvl2").css("display", "none");
$("#leftTools").animate({width: 'toggle'}, 350);
setTimeout('$("#leftToolsPackup").css("display","block");', 350);
}
function frameOpen() {
$("#leftTools").animate({width: 'toggle'}, 350);
setTimeout('$("#leftToolsPackup").css("display","none");$("#leftToolsLvl2").css("display","block");', 350);
}
function getFirstFrame(id, type, data) {
if (type == '${Type_structure}') {
if (data != null) {
getFirstFrame(data[0].id, data[0].type, data[0].nodes);
}
} else if (type == '${Type_frame}') {
showFrame(id);
}
}
var rightClickId = "";
var initFrameTreeView = function () {
$.post(ext.contextPath + '/process/dataVisualFrame/getFrameTree.do', {
unitId: nowUnitId,
menuType: '${param.menuType}'
}, function (data) {
if (data != '') {
getFirstFrame(data[0].id, data[0].type, data[0].nodes);
}
$('#frameTree').treeview({
data: data,
levels: 2,
showBorder: false,
});
$('#frameTree').on('nodeSelected', function (event, data) {
frameId = data.id;
if (client != null) {
client.end();
}
showFrame(data.id);
});
$('.treeview').on('mousedown', 'li', function (e) {
e.stopPropagation();
var key = e.which;//获取鼠标键位 //1代表左键2代表中键3代表右键
var target = e.target;
rightClickId = target.id;
$.post(ext.contextPath + '/process/dataVisualFrame/getFrame.do', {
id: rightClickId
}, function (clickData) {
if (clickData.type == '${Type_frame}') {
//右击事件
if (key == 3) {
//获取右键点击坐标
var x = e.pageX;
var y = e.pageY;
$('.rightClickMenu').show().css({left: x, top: y});
}
}
}, 'json')
})
}, 'json');
};
var nowFrameWidth = "";
var nowFrameHeight = "";
var allContainers = new Array();
var nowFrameDataJson = [];
//mqtt推送服务
var mpValueDataJson = [];
var percentChartDataJson = [];
function showFrame(id) {
roundtimecontentList = '';
nowTNum = 1;
clearInterval(roundtimeT);
allContainers = new Array();
frameId = id;
$.post(ext.contextPath + '/process/dataVisualFrame/getFrame.do', {id: id}, function (data) {
if (data.type == '${Type_frame}') {
nowUnitId = data.unitid;
var id = data.id;
var bodyWidth = $(window).width();
var bodyHeight = $(window).height();
// var bodyWidth = global_width;
// var bodyHeight = global_height;
$('#outFrame').css('width', bodyWidth);
$('#outFrame').css('height', bodyHeight);
// $('#outFrame').css('background-color', data.background);
// $('#bodyId').css('background-color', data.background);
window.onresize = function () {
$('#outFrame').css('width', $(window).width());
$('#outFrame').css('height', $(window).height());
}
var frameStyle = data.style;
if (frameStyle != '' && frameStyle.length > 0) {
document.getElementById("showFrame").style = frameStyle;
} else {
document.getElementById("showFrame").style = "";
}
$('#showFrame').css('width', data.width);
$('#showFrame').css('height', data.height);
// $('#showFrame').css('background', '');
// setTimeout(console.log('等待执行'), 1000);
$.post(ext.contextPath + '/base/getInputFileList.do', {
masterId: id,
tbName: 'tb_pro_dataVisual_frame_file'
}, function (imgdata) {
if (imgdata != '' && imgdata.length > 0) {
var path = imgdata[0].abspath;
path = path.substring(path.indexOf('webapps') + 7, path.length);
path = ext.basePath.replace(ext.contextPath, '') + path.replace(/\\/g, "\/");
$('#showFrame').css("background", "url(" + path + ") no-repeat");
$('#showFrame').css("background-size", "100% 100%");
} else {
$('#showFrame').css('background', data.background);
}
}, 'json');
// showContent(id);
nowFrameWidth = $('#showFrame').width();
nowFrameHeight = $('#showFrame').height();
$.ajax({
type: "GET",
url: ext.contextPath + "/process/dataVisualFrameContainer/getJson.do",
async: true,
globle: false,
data: {
frameId: frameId
},
dataType: 'json',
success: function (data) {
var html = "<table style=\"width: 100%;height: 100%;border-collapse: collapse;\">";
// var trLength=data.length;
// $('#containerC').css('height',(trLength*50)+"px");
for (var i = 0; i < data.length; i++) {
var r = data[i];
let trStyle = "";
if (r.height != null && r.height != '') {
trStyle += "height:" + r.height + ";";
}
if (r.width != null && r.width != '') {
trStyle += "height:" + r.width + ";";
}
html += "<tr style='" + trStyle + "'>";
if (r.nodes != '') {
for (var j = 0; j < r.nodes.length; j++) {
var c = r.nodes[j];
var width = c.width + "%";
var height = c.height + "%";
var bkcolor = c.background;
html += "<td rowspan=" + c.rows + " colspan=" + c.columns + " showRow=" + (r.insertRow) + " showColumn=" + (c.insertColumn) + " style='width:" + width + ";height:" + height + ";background:" + bkcolor + ";' >";
html += "<div id=" + c.id + " style=\"float:left;width:100%;height:100%;border: 1px solid transparent;\">";
html += "<div id=\"" + c.id + "contentRelativeDiv\" style=\"position:relative;width: 100%;height: 100%;\"></div>";
html += "</div>";
allContainers.push(c.id);
html += "</td>";
}
}
html += "</tr>"
}
html += "</table>"
// console.log(html);
$('#showFrame').html(html);
$.ajax({
type: "GET",
url: ext.contextPath + "/process/dataVisualContent/getFrameId_ZJ_Type.do?frameId=" + frameId,
async: false,
globle: false,
// dataType: 'json',
success: function (zjdatas) {
if (zjdatas.length > 0) {
let zjdatass = zjdatas.substring(0, zjdatas.length - 1).split(",");
for (var z = 0; z < zjdatass.length; z++) {
let zjdata = zjdatass[z];
if (zjdata == '11Switch' || zjdata == 'AADateSelect') {
$.ajax({
type: "GET",
url: ext.contextPath + "/process/dataVisualContent/getAllJson.do?frameId=" + frameId + "&sdt=" + sdt + "&edt=" + edt + "&zjdata=" + zjdata,
async: false,
globle: false,
dataType: 'json',
success: function (datas) {
nowFrameDataJson = datas;
console.log(datas)
if (datas != '') {
for (let i = 0; i < datas.length; i++) {
const data = datas[i];
showAllContent(data);
}
}
}
});
} else {
$.ajax({
type: "GET",
url: ext.contextPath + "/process/dataVisualContent/getAllJson.do?frameId=" + frameId + "&sdt=" + sdt + "&edt=" + edt + "&zjdata=" + zjdata,
async: true,
globle: false,
dataType: 'json',
success: function (datas) {
nowFrameDataJson = datas;
console.log(datas)
if (datas != '') {
for (let i = 0; i < datas.length; i++) {
const data = datas[i];
//给mq推送的各组件赋值
let contentId = data.content.id;
if (data.type == 'MpView') {
mpValueDataJson["AA" + contentId] = {
contnent: data.content,
showData: data.showData,
nowIndex: "-"
}
} else if (data.type == 'PercentChart') {
percentChartDataJson["AA" + contentId] = {
contnent: data.content,
showData: data.showData
}
}
showAllContent(data);
clearInterval(roundtimeT);
if (roundtimecontentList != '' && roundtimecontentList.length > 0) {
let roundtimecontentLists = roundtimecontentList.substring(0, roundtimecontentList.length - 1).split(",");
roundtimeT = setInterval(function () {
for (let t = 0; t < roundtimecontentLists.length; t++) {
if (roundtimecontentLists[t] == roundtimecontentLists[nowTNum - 1]) {
$("#" + roundtimecontentLists[t]).css('display', 'block');
} else {
$("#" + roundtimecontentLists[t]).css('display', 'none');
}
}
if (nowTNum < roundtimecontentLists.length) {
nowTNum++;
} else {
nowTNum = 1;
}
}, 5000);
}
}
}
}
});
}
}
}
}
});
setTimeout(function () {
getMqtt(mqttStatus, mqttHostWeb);
}, 5000);
}
});
}
}, 'json');
}
function showContent(containerId, st, containerId2) {
// $('#'+containerId+'contentDiv').html("");
$.ajax({
type: "GET",
url: ext.contextPath + "/process/dataVisualContent/getJson.do?pid=" + containerId,
async: true,
globle: false,
success: function (data) {
var datas = JSON.parse(data);
if (datas != '') {
for (let i = 0; i < datas.length; i++) {
var divHtml = "";
const content = datas[i];
if (content.type == '${Type_SignalPoint}') {
divHtml = showAssembly_mpdata_DI_View(content);
} else if (content.type == '${Type_DataPoint}') {
divHtml = showAssembly_mpdata_AI_View(content);
} else if (content.type == '${Type_Text}') {
divHtml = showAssembly_Text_View(content);
} else if (content.type == '${Type_Camera}') {
divHtml = showAssembly_Camera_View(content);
} else if (content.type == '${Type_Form}') {
divHtml = showAssembly_Form_View(content);
} else if (content.type == '${Type_LineChart}') {
divHtml = showAssembly_LineChart_View(content);
} else if (content.type == '${Type_BarChart}') {
divHtml = showAssembly_BarChart_View(content);
} else if (content.type == '${Type_PercentChart}') {
divHtml = showAssembly_PercentChart_View(content);
} else if (content.type == '${Type_RadarChart}') {
divHtml = showAssembly_RadarChart_View(content);
} else if (content.type == '${Type_PieChart}') {
divHtml = showAssembly_PieChart_View(content);
} else if (content.type == '${Type_Picture}') {
divHtml = showAssembly_Picture_View(content);
} else if (content.type == '${Type_GaugeChart}') {
divHtml = showAssembly_GaugeChart_View(content);
} else if (content.type == '${Type_Date}') {
divHtml = showAssembly_Date_View(content);
} else if (content.type == '${Type_Iframe}') {
divHtml = showAssembly_Iframe_View(content);
} else if (content.type == '${Type_Tab}') {
divHtml = showAssembly_Tab_View(content);
$.ajax({
type: 'GET',
url: ext.contextPath + "/process/dataVisualTab/getJson.do?pid=" + content.id,
async: true,
globle: false,
dataType: 'json',
error: function () {
return false;
},
success: function (tabdata) {
for (let index = 0; index < tabdata.length; index++) {
if (tabdata[index].firstck == 'true') {
showContent(tabdata[index].id, 'tab', containerId2);
$.ajax({
type: "GET",
url: ext.contextPath + "/process/dataVisualContent/getJson.do?pid=" + tabdata[index].id,
async: true,
globle: false,
success: function (data) {
var datas = JSON.parse(data);
if (datas != '') {
for (let i = 0; i < datas.length; i++) {
const content = datas[i];
if (content.type == '${Type_Date}') {
$.ajax({
type: 'GET',
url: ext.contextPath + "/process/dataVisualDate/getJson.do?pid=" + content.id,
async: true,
globle: false,
dataType: 'json',
error: function () {
return false;
},
success: function (dateData) {
if (content.refreshtime != null && content.refreshtime != '' && content.refreshtime != '0') {
setInterval(function () {
showAssembly_Date_View_Show(content.id, dateData[0].types);
}, Number(content.refreshtime) * 1000);
}
}
});
} else {
if (content.type != '${Type_LineChart}' && content.type != '${Type_BarChart}') {
if (content.refreshtime != null && content.refreshtime != '' && content.refreshtime != '0') {
setInterval(function () {
showOneContent(content.id, 'tab');
}, Number(content.refreshtime) * 60000);
}
}
}
}
}
}
});
}
}
}
});
} else if (content.type == '${Type_MpView}') {
divHtml = showAssembly_MpView_View(content);
} else if (content.type == '${Type_ProgressBar}') {
divHtml = showAssembly_ProgressBarChart_View(content);
} else if (content.type == '${Type_Line}') {
divHtml = showAssembly_Line_View(content);
} else if (content.type == '${Type_DateSelect}') {
divHtml = showAssembly_DateSelect_View(content);
} else if (content.type == '${Type_SuspensionFrame}') {
divHtml = showAssembly_SuspensionFrame_View(content);
} else if (content.type == '${Type_PolarCoordinates}') {
divHtml = showAssembly_PolarCoordinates_View(content);
}
if (st == 'tab') {
$('#' + containerId2 + 'contentRelativeDiv').append(divHtml);
} else {
$('#' + containerId + 'contentRelativeDiv').append(divHtml);
}
if (content.type == '${Type_DateSelect}') {
$.ajax({
type: 'GET',
url: ext.contextPath + "/process/dataVisualDateSelect/getJson.do?pid=" + content.id,
async: false,
globle: false,
dataType: 'json',
error: function () {
return false;
},
success: function (dateSelectData) {
dateSelectData = dateSelectData[0];
let dateSelectType = dateSelectData.type;
showDateSelect(content.id, dateSelectType);
}
});
}
if (content.type == '${Type_LineChart}') {
showLineChart(content.id, content.refreshtime);
} else if (content.type == '${Type_BarChart}') {
showBarChart(content.id, content.refreshtime);
} else if (content.type == '${Type_PercentChart}') {
showPercentChart(content.id);
} else if (content.type == '${Type_RadarChart}') {
showRadarChart(content.id);
} else if (content.type == '${Type_PieChart}') {
showPieChart(content.id);
} else if (content.type == '${Type_GaugeChart}') {
showGaugeChart(content.id);
} else if (content.type == '${Type_ProgressBar}') {
showProgressBarChart(content.id);
} else if (content.type == '${Type_PolarCoordinates}') {
showPolarCoordinates(content.id);
}
if (content.type == '${Type_SignalPoint}') {
$("#" + content.id).mousedown(function (e) {
//右键为3
if (3 == e.which) {
let eqid = $("#" + content.id).attr('eqid');
if (eqid != '') {
stopBubbleDefaultEvent();
$.post(ext.contextPath + '/equipment/doview.do', {id: eqid}, function (data) {
$("#subDiv").html(data);
openModal('subModal');
});
}
} else if (1 == e.which) {
//左键为1
showCurveForMp(content.id);
}
})
}
if (content.type == '${Type_Date}') {
$.ajax({
type: 'GET',
url: ext.contextPath + "/process/dataVisualDate/getJson.do?pid=" + content.id,
async: true,
globle: false,
dataType: 'json',
error: function () {
return false;
},
success: function (dateData) {
if (content.refreshtime != null && content.refreshtime != '' && content.refreshtime != '0') {
setInterval(function () {
showAssembly_Date_View_Show(content.id, dateData[0].types);
}, Number(content.refreshtime) * 1000);
}
}
});
} else {
if (content.type != '${Type_LineChart}' && content.type != '${Type_BarChart}') {
if (content.refreshtime != null && content.refreshtime != '' && content.refreshtime != '0') {
setInterval(function () {
showOneContent(content.id);
}, Number(content.refreshtime) * 60000);
}
}
}
}
}
}
});
}
function showOneContent(contentId, st) {
$.ajax({
type: "GET",
url: ext.contextPath + "/process/dataVisualContent/getOneJson.do?id=" + contentId,
async: true,
globle: false,
success: function (data) {
let content = JSON.parse(data);
content = content[0];
// console.log(content);
if (content != '') {
let containerId = content.pid;
$('#' + contentId).remove();
let divHtml = "";
if (content.type == '${Type_SignalPoint}') {
divHtml = showAssembly_mpdata_DI_View(content);
} else if (content.type == '${Type_DataPoint}') {
divHtml = showAssembly_mpdata_AI_View(content);
} else if (content.type == '${Type_Text}') {
divHtml = showAssembly_Text_View(content);
} else if (content.type == '${Type_Camera}') {
divHtml = showAssembly_Camera_View(content);
} else if (content.type == '${Type_Form}') {
divHtml = showAssembly_Form_View(content);
} else if (content.type == '${Type_LineChart}') {
divHtml = showAssembly_LineChart_View(content);
} else if (content.type == '${Type_BarChart}') {
divHtml = showAssembly_BarChart_View(content);
} else if (content.type == '${Type_PercentChart}') {
divHtml = showAssembly_PercentChart_View(content);
} else if (content.type == '${Type_RadarChart}') {
divHtml = showAssembly_RadarChart_View(content);
} else if (content.type == '${Type_PieChart}') {
divHtml = showAssembly_PieChart_View(content);
} else if (content.type == '${Type_Picture}') {
divHtml = showAssembly_Picture_View(content);
} else if (content.type == '${Type_GaugeChart}') {
divHtml = showAssembly_GaugeChart_View(content);
} else if (content.type == '${Type_Date}') {
divHtml = showAssembly_Date_View(content);
} else if (content.type == '${Type_Iframe}') {
divHtml = showAssembly_Iframe_View(content);
} else if (content.type == '${Type_Tab}') {
divHtml = showAssembly_Tab_View(content);
} else if (content.type == '${Type_MpView}') {
divHtml = showAssembly_MpView_View(content);
} else if (content.type == '${Type_ProgressBar}') {
divHtml = showAssembly_ProgressBarChart_View(content);
} else if (content.type == '${Type_Line}') {
divHtml = showAssembly_Line_View(content);
} else if (content.type == '${Type_DateSelect}') {
divHtml = showAssembly_DateSelect_View(content);
} else if (content.type == '${Type_SuspensionFrame}') {
divHtml = showAssembly_SuspensionFrame_View(content);
} else if (content.type == '${Type_PolarCoordinates}') {
divHtml = showAssembly_PolarCoordinates_View(content);
} else if (content.type == '${Type_PersonnelPositioning}') {
divHtml = showAssembly_PersonnelPositioning_View(content);
}
// console.log(divHtml);
if (st != null && st == 'tab') {
$.ajax({
type: 'GET',
url: ext.contextPath + "/process/dataVisualTab/getContainer.do?tabId=" + containerId,
async: false,
globle: false,
dataType: 'json',
error: function () {
return false;
},
success: function (contentData) {
contentData = contentData[0];
$('#' + contentData.containerId + 'contentRelativeDiv').append(divHtml);
}
});
} else {
$('#' + containerId + 'contentRelativeDiv').append(divHtml);
}
if (content.type == '${Type_LineChart}') {
showLineChart(content.id, content.refreshtime);
} else if (content.type == '${Type_BarChart}') {
showBarChart(content.id, content.refreshtime);
} else if (content.type == '${Type_PercentChart}') {
showPercentChart(content.id);
} else if (content.type == '${Type_RadarChart}') {
showRadarChart(content.id);
} else if (content.type == '${Type_PieChart}') {
showPieChart(content.id);
} else if (content.type == '${Type_GaugeChart}') {
showGaugeChart(content.id);
} else if (content.type == '${Type_ProgressBar}') {
showProgressBarChart(content.id);
} else if (content.type == '${Type_PolarCoordinates}') {
showPolarCoordinates(content.id);
}
}
}
});
}
function showCurveForMp(contentId) {
$.post(ext.contextPath + '/process/dataVisualMPoint/getJson.do', {pid: contentId}, function (data) {
var mpid = data[0].mpid;
var unitId = data[0].unitid;
$.post(ext.contextPath + '/data/showOnlyLine.do', {mpcode: mpid, unitId: unitId}, function (data2) {
$("#subDiv").html(data2);
openModal('curveModal');
});
}, 'json');
}
function openLine(mpid) {
$.post(ext.contextPath + '/data/showOnlyLine.do', {mpcode: mpid}, function (data2) {
$("#subDiv").html(data2);
openModal('curveModal');
});
}
function urlClick(st, url, id, name) {
if (url.substring(0, 1) != '/') {
url = "/" + url;
}
if (st == 'openFrame') {
window.open(ext.contextPath + url, 'openFrame', 'width=' + (window.screen.availWidth / 2) + ',height=' + (window.screen.availHeight / 2) + ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
} else if (st == 'tabFrame') {
let tabId = "tabId_" + id;
window.parent.addTab(tabId, name, url);
}
}
var viewCameraWindow = null;
function viewCameraFun(id) {
viewCameraWindow = window.open(ext.contextPath + "/work/camera/getCameraJsp.do?id=" + id, 'largeScreenViewCamera', 'width=720,height=480,top=200,left=300,toolbar=0,menubar=0,scrollbars=0,resizable=0,location=0,status=0')
viewCameraWindow.focus();
}
var websocket = null;
$(function () {
// 浏览器上的websocket对象,用来和服务端通信.
if ('WebSocket' in window) {
// 创建websocket对象
var userName = "控制";
// console.log(ext.basePath.replace("http", "ws") + "/chat/" + userName);
websocket = new WebSocket(ext.basePath.replace("http", "ws") + "/chat/" + userName);
registerEvent();
} else {
alert('当前浏览器不支持websocket')
}
function registerEvent() {
websocket.onopen = function (event) {
}
websocket.onmessage = function (event) {
};
websocket.onclose = function (event) {
websocket.close();
};
//连接发生错误的回调方法
websocket.onerror = function () {
// $("#Putin").attr('disabled', 'disabled');
websocket.close();
};
}
$(window).unload(function () {
console.log("websocket关闭");
websocket.close();
});
});
var largeScreenWindow = null;//大屏Switch的window
function largeScreenOpen() {
largeScreenWindow = window.open(ext.contextPath + "/process/dataVisualFrame/largeScreenView.do?frameId=" + rightClickId + "&unitId=" + nowUnitId, 'largeScreenWindow', 'width=' + (window.screen.availWidth - 10) + ',height=' + (window.screen.availHeight - 30) + ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
setTimeout(sendSocket, 1000);
largeScreenWindow.focus();
}
function sendSocket() {
// //清除交互
// var clearInterationJsonStr = "[{'type':'clearInteraction'}]";
// websocket.send(clearInterationJsonStr);
var jsonstr = "[{'type':'plan','frameId':'" + rightClickId + "'}]";
websocket.send(jsonstr);
}
function largeScreenOpen2() {
sendSocket();
}
function clickTab(ckid, data) {
stopBubbleDefaultEvent();
let tabContentId = "";
for (let i = 0; i < data.length; i++) {
let tab = data[i];
if (i == 0) {
tabContentId = tab.pid;
}
let ckbackground = 'transparent';
if (tab.ckbackground != null && tab.ckbackground != '') {
ckbackground = tab.ckbackground;
if (ckbackground.indexOf("/") >= 0) {
var path = getRootPath() + ckbackground;
ckbackground = 'url(' + path + ')';
}
}
let ckfontcolor = '#3c8dbc';
if (tab.ckfontcolor != null && tab.ckfontcolor != '') {
ckfontcolor = tab.ckfontcolor;
}
let ckfontsize = '14';
if (tab.ckfontsize != null && tab.ckfontsize != '') {
ckfontsize = tab.ckfontsize;
}
let ckfontweight = '400';
if (tab.ckfontweight != null && tab.ckfontweight != '') {
ckfontweight = tab.ckfontweight;
}
let cktextAlign = 'center';
// if (tab.cktextAlign != null && tab.cktextAlign != '') {
// cktextAlign = tab.cktextAlign;
// }
let ckstyle = '';
if (tab.ckstyle != null && tab.ckstyle != '') {
ckstyle = tab.ckstyle;
}
let unckbackground = 'transparent';
if (tab.unckbackground != null && tab.unckbackground != '') {
unckbackground = tab.unckbackground;
if (unckbackground.indexOf("/") >= 0) {
var path = getRootPath() + unckbackground;
unckbackground = 'url(' + path + ')';
}
}
let unckfontcolor = '#555555';
if (tab.unckfontcolor != null && tab.unckfontcolor != '') {
unckfontcolor = tab.unckfontcolor;
}
let unckfontsize = '14';
if (tab.unckfontsize != null && tab.unckfontsize != '') {
unckfontsize = tab.unckfontsize;
}
let unckfontweight = '400';
if (tab.unckfontweight != null && tab.unckfontweight != '') {
unckfontweight = tab.unckfontweight;
}
let uncktextAlign = 'center';
// if (tab.uncktextAlign != null && tab.uncktextAlign != '') {
// uncktextAlign = tab.uncktextAlign;
// }
let unckstyle = '';
if (tab.unckstyle != null && tab.unckstyle != '') {
unckstyle = tab.unckstyle;
}
if (tab.id == ckid) {
$('#' + tab.id).css('background', ckbackground);
$('#' + tab.id).css('background-size', "100% 100%");
$('#' + tab.id).css('color', ckfontcolor);
$('#' + tab.id).css('font-size', ckfontsize + "px");
$('#' + tab.id).css('font-weight', ckfontweight);
} else {
$('#' + tab.id).css('background', unckbackground);
$('#' + tab.id).css('background-size', "100% 100%");
$('#' + tab.id).css('color', unckfontcolor);
$('#' + tab.id).css('font-size', unckfontsize + "px");
$('#' + tab.id).css('font-weight', unckfontweight);
}
$.ajax({
type: "GET",
url: ext.contextPath + "/process/dataVisualContent/getIdsForAllTabContent.do?pid=" + tab.id,
async: false,
globle: false,
success: function (data) {
data = data.split(',');
for (let t = 0; t < (data.length - 1); t++) {
const element = data[t];
// console.log(element)
// $('#' + element).css('display','none');
$('#' + element).remove();
}
}
});
}
$.ajax({
type: "GET",
url: ext.contextPath + "/process/dataVisualContent/getTabAllJson.do?tabId=" + tabContentId + "&ckTabId=" + ckid + "&sdt=" + sdt + "&edt=" + edt,
async: false,
globle: false,
dataType: 'json',
success: function (datas) {
for (let i = 0; i < datas.length; i++) {
const data = datas[i];
showAllContent(data);
}
// data = data.split(',');
// for (let t = 0; t < (data.length - 1); t++) {
// const element = data[t];
// showOneContent(element, 'tab');
// }
}
});
clearInterval(roundtimeT);
if (roundtimecontentList != '' && roundtimecontentList.length > 0) {
let roundtimecontentLists = roundtimecontentList.substring(0, roundtimecontentList.length - 1).split(",");
roundtimeT = setInterval(function () {
for (let t = 0; t < roundtimecontentLists.length; t++) {
if (roundtimecontentLists[t] == roundtimecontentLists[nowTNum - 1]) {
$("#" + roundtimecontentLists[t]).css('display', 'block');
} else {
$("#" + roundtimecontentLists[t]).css('display', 'none');
}
}
if (nowTNum < roundtimecontentLists.length) {
nowTNum++;
} else {
nowTNum = 1;
}
}, 5000);
}
}
function getRootPath() {
// var pathName = window.location.pathname.substring(1);
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
// return window.location.protocol + '//' + window.location.host;
return window.location.protocol;
}
function reFrame(url) {
window.location.href = ext.contextPath + url;
}
function openFrame(id) {
$.ajax({
type: 'GET',
url: ext.contextPath + "/process/dataVisualFrame/getFrame.do?id=" + id,
async: false,
globle: false,
dataType: 'json',
error: function () {
return false;
},
success: function (fdata) {
window.open(ext.contextPath + "/process/dataVisualFrame/view.do?frameId=" + id + "&unitId=" + fdata.unitId, 'openFrame', 'width=' + (window.screen.availWidth / 2) + ',height=' + (window.screen.availHeight / 2) + ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
}
});
// $('#url').html(window.location.host + ext.contextPath + "/process/dataVisualFrame/view.do?frameId="+id+"&unitId=" + ckunitId)
}
function tabFrame(id) {
$.ajax({
type: 'GET',
url: ext.contextPath + "/process/dataVisualFrame/getFrame.do?id=" + id,
async: false,
globle: false,
dataType: 'json',
error: function () {
return false;
},
success: function (fdata) {
let tabId = "tabId_" + id;
let url = "/process/dataVisualFrame/view.do?frameId=" + id + "&unitId=" + fdata.unitId;
window.parent.addTab(tabId, fdata.name, url);
}
});
}
function showRoundtimeOne(id, st) {
let roundtimecontentLists = roundtimecontentList.substring(0, roundtimecontentList.length - 1).split(",");
if (st == 'in') {
clearInterval(roundtimeT);
for (let t = 0; t < roundtimecontentLists.length; t++) {
if (roundtimecontentLists[t] == id) {
$("#" + roundtimecontentLists[t]).css('display', 'block');
} else {
$("#" + roundtimecontentLists[t]).css('display', 'none');
}
}
} else if ('out') {
roundtimeT = setInterval(function () {
for (let t = 0; t < roundtimecontentLists.length; t++) {
if (roundtimecontentLists[t] == roundtimecontentLists[nowTNum - 1]) {
$("#" + roundtimecontentLists[t]).css('display', 'block');
} else {
$("#" + roundtimecontentLists[t]).css('display', 'none');
}
}
if (nowTNum < roundtimecontentLists.length) {
nowTNum++;
} else {
nowTNum = 1;
}
}, 2000);
}
}
</script>
</head>
<body id="bodyId" style="overflow: auto;background-color: transparent;">
<div id="subDiv"></div>
<div id="alertDiv"></div>
<div id="fileInputDiv"></div>
<div id="contentDiv" style="position:relative;"></div>
<!-- <div id="showFrame" ondrop="drop(event)" ondragover="allowDrop(event)"></div> -->
<div id="outFrame">
<div id="showFrame"></div>
</div>
<div class="rightClickMenu" style="z-index:999;">
<div class="rightClickMenu_a" onclick="largeScreenOpen();">投屏</div>
<div class="rightClickMenu_a" onclick="largeScreenOpen2();">切屏</div>
<div id="fullScreenSt1" class="rightClickMenu_a" onclick="fullScreen();">进入全屏</div>
<div id="fullScreenSt2" style="display: none;" class="rightClickMenu_a" onclick="exitFullScreen();">退出全屏</div>
</div>
<div id="leftToolsPackup"
style="display: none;position: absolute;left:10px;top:0px;width: 20px;height: 25px;border-radius: 4px;box-shadow: 2px 2px 4px 0px #696969, 0px 0px 4px 0px #696969;z-index:998;">
<button type="button" class="btn btn-box-tool" onclick="frameOpen();"><i class="fa fa-forward"></i></button>
</div>
<div id="leftTools"
style="position: absolute;left:0px;top:0px;width: 200px;height: 100%;overflow:auto;border-radius: 0px;box-shadow: 2px 2px 4px 0px #696969, 0px 0px 4px 0px #696969;background: #eeeeee;z-index:998;">
<div id="leftToolsLvl2">
<div class="box-header with-border" style="width: 100%;height: 45px;border-bottom: 1px solid #ccc;">
<h3 class="box-title" style="font-size: 16px;">画面列表</h3>
<div class="box-tools">
<!-- <button type="button" class="btn btn-box-tool" onclick="addFrameFun();"><i class="fa fa-plus"></i></button> -->
<button type="button" class="btn btn-box-tool" onclick="framePackup();"><i class="fa fa-backward"></i>
</button>
</div>
</div>
<div id="frameTree"></div>
</div>
</div>
<%--<div id="largeScreen2"--%>
<%-- style="display: block;position: absolute;right:50px;top:0px;width: 28px;height: 25px;border-radius: 4px;box-shadow: 2px 2px 4px 0px #696969, 0px 0px 4px 0px #696969;z-index:999;">--%>
<%-- <button type="button" class="btn btn-box-tool" onclick="largeScreenOpen2();">--%>
<%-- <svg t="1634002071637" class="icon" viewBox="0 0 1536 1024" version="1.1" p-id="3190" width="16" height="16">--%>
<%-- <path d="M512 256H409.6V51.2A51.2 51.2 0 0 1 460.8 0h1024A51.2 51.2 0 0 1 1536 51.2v665.6a51.2 51.2 0 0 1-51.2 51.2H768v-102.4h665.6V102.4H512V256zM102.4 409.6V768h512V409.6h-512zM51.2 307.2h614.4a51.2 51.2 0 0 1 51.2 51.2v460.8a51.2 51.2 0 0 1-51.2 51.2H51.2A51.2 51.2 0 0 1 0 819.2V358.4a51.2 51.2 0 0 1 51.2-51.2zM256 921.6h204.8a51.2 51.2 0 1 1 0 102.4H256a51.2 51.2 0 1 1 0-102.4z m614.4-102.4h204.8a51.2 51.2 0 1 1 0 102.4h-204.8a51.2 51.2 0 1 1 0-102.4z"--%>
<%-- p-id="3191"></path>--%>
<%-- </svg>--%>
<%-- </button>--%>
<%--</div>--%>
<%--<div id="largeScreen"--%>
<%-- style="display: block;position: absolute;right:10px;top:0px;width: 28px;height: 25px;border-radius: 4px;box-shadow: 2px 2px 4px 0px #696969, 0px 0px 4px 0px #696969;z-index:999;">--%>
<%-- <button type="button" class="btn btn-box-tool" onclick="largeScreenOpen();">--%>
<%-- <svg t="1634002071637" class="icon" viewBox="0 0 1536 1024" version="1.1" p-id="3190" width="16" height="16">--%>
<%-- <path d="M512 256H409.6V51.2A51.2 51.2 0 0 1 460.8 0h1024A51.2 51.2 0 0 1 1536 51.2v665.6a51.2 51.2 0 0 1-51.2 51.2H768v-102.4h665.6V102.4H512V256zM102.4 409.6V768h512V409.6h-512zM51.2 307.2h614.4a51.2 51.2 0 0 1 51.2 51.2v460.8a51.2 51.2 0 0 1-51.2 51.2H51.2A51.2 51.2 0 0 1 0 819.2V358.4a51.2 51.2 0 0 1 51.2-51.2zM256 921.6h204.8a51.2 51.2 0 1 1 0 102.4H256a51.2 51.2 0 1 1 0-102.4z m614.4-102.4h204.8a51.2 51.2 0 1 1 0 102.4h-204.8a51.2 51.2 0 1 1 0-102.4z"--%>
<%-- p-id="3191"></path>--%>
<%-- </svg>--%>
<%-- </button>--%>
<%--</div>--%>
</body>
</html>