1262 lines
69 KiB
Plaintext
1262 lines
69 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" %>
|
||
<%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_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>
|
||
<!-- 语音识别 -->
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/Recorder-master/recorder.mp3.min.js"
|
||
charset="utf-8"></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>
|
||
|
||
<%-- 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>
|
||
|
||
<script type="text/javascript">
|
||
var frameId = "";
|
||
var nowUnitId = "";
|
||
var sdt = "";
|
||
var edt = "";
|
||
var roundtimeT = null;
|
||
var nowTNum = 1;
|
||
|
||
var websocket = null;
|
||
|
||
//websocket接收信息，触发换屏
|
||
function registerEvent() {
|
||
websocket.onopen = function (event) {
|
||
console.log("大屏已连接");
|
||
}
|
||
|
||
websocket.onmessage = function (event) {
|
||
// console.log(event)
|
||
if (event.data != "大屏已连接" && event.data != "大屏已断开" && event.data != "控制已断开" && event.data != "控制已连接") {
|
||
//传递JSON先转换为数组再判定type
|
||
var json = eval(event.data);
|
||
if (json[0].type == "plan") {
|
||
showFrame(json[0].frameId);
|
||
} else {
|
||
|
||
}
|
||
}
|
||
};
|
||
websocket.onclose = function (event) {
|
||
console.log("大屏已断开");
|
||
reconnect();
|
||
};
|
||
//连接发生错误的回调方法
|
||
websocket.onerror = function () {
|
||
console.log('连接已断开！')
|
||
reconnect();
|
||
};
|
||
}
|
||
|
||
//自动重连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) {
|
||
// console.log(event)
|
||
if (event.data != "大屏已连接" && event.data != "大屏已断开") {
|
||
//传递JSON先转换为数组再判定type
|
||
var json = eval(event.data);
|
||
if (json[0].type == "plan") {//方案
|
||
showFrame(frameId);
|
||
} else {
|
||
|
||
}
|
||
}
|
||
};
|
||
|
||
websocket.onclose = function (event) {
|
||
setTimeout("reconnect();", 8000);
|
||
};
|
||
//连接发生错误的回调方法 `1
|
||
websocket.onerror = function () {
|
||
console.log('连接已断开！')
|
||
websocket.close();
|
||
};
|
||
}
|
||
|
||
$(window).unload(function () {
|
||
console.log("大屏关闭");
|
||
websocket.close();
|
||
});
|
||
|
||
|
||
$(function () {
|
||
mqttStatus = '${mqttStatus}';
|
||
mqttHostWeb = '${mqttHostWeb}';
|
||
|
||
if ('${param.unitId}' != '') {
|
||
nowUnitId = '${param.unitId}';
|
||
} else {
|
||
nowUnitId = unitId;
|
||
}
|
||
frameId = '${param.frameId}'
|
||
// console.log(frameId);
|
||
// showFrame(frameId);
|
||
|
||
if ('WebSocket' in window) {
|
||
window.focus();
|
||
// 创建websocket对象
|
||
var userName = "大屏";
|
||
if (websocket) {
|
||
websocket.close();
|
||
}
|
||
websocket = new WebSocket(ext.basePath.replace("http", "ws") + "/chat/" + userName);
|
||
registerEvent();
|
||
} else {
|
||
alert('当前浏览器不支持websocket')
|
||
}
|
||
});
|
||
|
||
|
||
var nowFrameWidth = "";
|
||
var nowFrameHeight = "";
|
||
var allContainers = new Array();
|
||
var nowFrameDataJson = [];
|
||
//mqtt推送服务
|
||
var mpValueDataJson = [];
|
||
var percentChartDataJson = [];
|
||
|
||
function showFrame(id) {
|
||
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();
|
||
|
||
$('#bodyId').css('width', bodyWidth);
|
||
$('#bodyId').css('height', bodyHeight);
|
||
// $('#bodyId').css('background-color', data.background);
|
||
|
||
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', '');
|
||
$.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%;\">";
|
||
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);
|
||
|
||
// let t = setInterval(function () {
|
||
// console.log(t)
|
||
// }, 1000)
|
||
// for (let m = 1; m <= t; m++) {
|
||
// clearInterval(m);
|
||
// }
|
||
$.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);
|
||
// for (let index = 0; index < allContainers.length; index++) {
|
||
// const did = allContainers[index];
|
||
// showContent(did, 'td', did);
|
||
// // $.ajax({
|
||
// // type: "GET",
|
||
// // url: ext.contextPath + "/process/dataVisualContent/getJson.do?pid=" + did,
|
||
// // 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];
|
||
// //
|
||
// // }
|
||
// // }
|
||
// // }
|
||
// // });
|
||
// }
|
||
}
|
||
// complete: function () {
|
||
// setTimeout(function () {
|
||
// 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;
|
||
// }
|
||
// }, 2000);
|
||
// }
|
||
// },
|
||
// 10000
|
||
// )
|
||
// }
|
||
});
|
||
}
|
||
}, 'json');
|
||
}
|
||
|
||
<%--function showAllContent(data) {--%>
|
||
<%-- if (data.type == '${Type_SignalPoint}') {--%>
|
||
<%-- divHtml = showAssembly_mpdata_DI_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_DataPoint}') {--%>
|
||
<%-- divHtml = showAssembly_mpdata_AI_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_Text}') {--%>
|
||
<%-- divHtml = showAssembly_Text_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_Camera}') {--%>
|
||
<%-- divHtml = showAssembly_Camera_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_Form}') {--%>
|
||
<%-- divHtml = showAssembly_Form_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_PieChart}') {--%>
|
||
<%-- divHtml = showAssembly_PieChart_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_PercentChart}') {--%>
|
||
<%-- divHtml = showAssembly_PercentChart_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_RadarChart}') {--%>
|
||
<%-- divHtml = showAssembly_RadarChart_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_GaugeChart}') {--%>
|
||
<%-- divHtml = showAssembly_GaugeChart_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_Picture}') {--%>
|
||
<%-- divHtml = showAssembly_Picture_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_Date}') {--%>
|
||
<%-- divHtml = showAssembly_Date_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_DateSelect}') {--%>
|
||
<%-- divHtml = showAssembly_DateSelect_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_Weather}') {--%>
|
||
<%-- divHtml = showAssembly_Weather_View(data.content, data.showData, data.showWeatherData);--%>
|
||
<%-- } else if (data.type == '${Type_Iframe}') {--%>
|
||
<%-- divHtml = showAssembly_Iframe_View(data.content);--%>
|
||
<%-- } else if (data.type == '${Type_Line}') {--%>
|
||
<%-- divHtml = showAssembly_Line_View(data.content);--%>
|
||
<%-- } else if (data.type == '${Type_MpView}') {--%>
|
||
<%-- divHtml = showAssembly_MpView_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_ProgressBar}') {--%>
|
||
<%-- divHtml = showAssembly_ProgressBarChart_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_SuspensionFrame}') {--%>
|
||
<%-- divHtml = showAssembly_SuspensionFrame_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_PolarCoordinates}') {--%>
|
||
<%-- divHtml = showAssembly_PolarCoordinates_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_LineChart}') {--%>
|
||
<%-- divHtml = showAssembly_LineChart_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_BarChart}') {--%>
|
||
<%-- divHtml = showAssembly_BarChart_View(data.content, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_Tab}') {--%>
|
||
<%-- divHtml = showAssembly_Tab_View(data.content, data.showData);--%>
|
||
<%-- // console.log(divHtml)--%>
|
||
<%-- $('#' + data.cid + 'contentRelativeDiv').append(divHtml);--%>
|
||
<%-- if (data.showTabData != null && data.showTabData.length > 0) {--%>
|
||
<%-- for (let i = 0; i < data.showTabData.length; i++) {--%>
|
||
<%-- data.showTabData[i].cid = data.cid;--%>
|
||
<%-- showAllContent(data.showTabData[i]);--%>
|
||
<%-- clearInterval(roundtimeT);--%>
|
||
<%-- if (roundtimecontentList != '' && roundtimecontentList.length > 0) {--%>
|
||
<%-- let roundtimecontentLists = roundtimecontentList.substring(0, roundtimecontentList.length - 1).split(",");--%>
|
||
<%-- roundtimeT = setInterval(function () {--%>
|
||
<%-- console.log(nowTNum);--%>
|
||
<%-- 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);--%>
|
||
<%-- }--%>
|
||
<%-- }--%>
|
||
<%-- }--%>
|
||
<%-- }--%>
|
||
|
||
<%-- if (data.type != '${Type_Tab}') {--%>
|
||
<%-- $('#' + data.cid + 'contentRelativeDiv').append(divHtml);--%>
|
||
<%-- }--%>
|
||
|
||
<%-- if (data.type == '${Type_SignalPoint}') {--%>
|
||
<%-- $("#" + data.content.id).mousedown(function (e) {--%>
|
||
<%-- //右键为3--%>
|
||
<%-- if (3 == e.which) {--%>
|
||
<%-- let eqid = $("#" + data.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(data.content.id);--%>
|
||
<%-- }--%>
|
||
<%-- })--%>
|
||
<%-- }--%>
|
||
|
||
<%-- if (data.type == '${Type_PieChart}') {--%>
|
||
<%-- showPieChart(data.content.id, data.showData, data.showSeriesData);--%>
|
||
<%-- } else if (data.type == '${Type_PercentChart}') {--%>
|
||
<%-- showPercentChart(data.content.id, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_RadarChart}') {--%>
|
||
<%-- showRadarChart(data.content.id, data.showData, data.showSeriesData, data.showAxisData);--%>
|
||
<%-- } else if (data.type == '${Type_GaugeChart}') {--%>
|
||
<%-- showGaugeChart(data.content.id, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_ProgressBar}') {--%>
|
||
<%-- showProgressBarChart(data.content.id, data.showData);--%>
|
||
<%-- } else if (data.type == '${Type_PolarCoordinates}') {--%>
|
||
<%-- showPolarCoordinates(data.content.id, data.showData, data.showSeriesData);--%>
|
||
<%-- } else if (data.type == '${Type_Date}') {--%>
|
||
<%-- if (data.content.refreshtime != null && data.content.refreshtime != '' && data.content.refreshtime != '0') {--%>
|
||
<%-- setInterval(function () {--%>
|
||
<%-- showAssembly_Date_View_Show(data.content.id, data.showData.types);--%>
|
||
<%-- }, Number(data.content.refreshtime) * 1000);--%>
|
||
<%-- }--%>
|
||
<%-- } else if (data.type == '${Type_LineChart}') {--%>
|
||
<%-- showLineChart(data.content.id, data.content.refreshtime, data.showData, data.showSeriesData, data.showYAxisData);--%>
|
||
<%-- } else if (data.type == '${Type_BarChart}') {--%>
|
||
<%-- showBarChart(data.content.id, data.content.refreshtime, data.showData, data.showSeriesData, data.showYAxisData);--%>
|
||
<%-- } else if (data.type == '${Type_DateSelect}') {--%>
|
||
<%-- let dateSelectType = data.showData.type;--%>
|
||
<%-- showDateSelect(data.content.id, dateSelectType);--%>
|
||
<%-- }--%>
|
||
<%--}--%>
|
||
|
||
|
||
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_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');
|
||
});
|
||
}
|
||
|
||
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();
|
||
}
|
||
|
||
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];
|
||
$('#' + 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) {
|
||
console.log(datas)
|
||
if (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 () {
|
||
console.log(nowTNum);
|
||
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 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);
|
||
}
|
||
}
|
||
|
||
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);
|
||
}
|
||
}
|
||
|
||
<%--function getMqtt() {--%>
|
||
<%-- try {--%>
|
||
<%-- //初始化mqtt--%>
|
||
<%-- let mqttStatus = '${mqttStatus}';--%>
|
||
<%-- let userId = '${userId}';--%>
|
||
<%-- if (mqttStatus == '0') {--%>
|
||
<%-- let mqttId = "dataVisual_consumer_" + userId + "_" + frameId + "_" + Math.random();--%>
|
||
<%-- // console.log(mqttId)--%>
|
||
<%-- initialMqtt(mqttId);--%>
|
||
<%-- } else {--%>
|
||
<%-- console.log('mq已关闭')--%>
|
||
<%-- }--%>
|
||
<%-- } catch (err) {--%>
|
||
<%-- //处理错误--%>
|
||
<%-- }--%>
|
||
<%--}--%>
|
||
|
||
<%--function initialMqtt(mqttId) {--%>
|
||
<%-- const options = {--%>
|
||
<%-- clean: true,--%>
|
||
<%-- connectTimeout: 10000,--%>
|
||
<%-- clientId: mqttId,--%>
|
||
<%-- username: "admin",--%>
|
||
<%-- password: 'public'--%>
|
||
<%-- }--%>
|
||
<%-- const connectUrl = '${mqttHostWeb}';--%>
|
||
<%-- const client = mqtt.connect(connectUrl, options);--%>
|
||
|
||
<%-- //当重新连接启动触发回调--%>
|
||
<%-- client.on('reconnect', function () {--%>
|
||
<%-- // console.log('正在重连.....');--%>
|
||
<%-- });--%>
|
||
<%-- //连接断开后触发的回调--%>
|
||
<%-- client.on("close", function () {--%>
|
||
<%-- console.log('客户端已断开连接.....');--%>
|
||
<%-- });--%>
|
||
<%-- //从broker接收到断开连接的数据包后发出。MQTT 5.0特性--%>
|
||
<%-- client.on("disconnect", function (packet) {--%>
|
||
<%-- console.log('从broker接收到断开连接的数据包.....' + packet);--%>
|
||
<%-- });--%>
|
||
<%-- //客户端脱机下线触发回调--%>
|
||
<%-- client.on("offline", function () {--%>
|
||
<%-- console.log('客户端脱机下线.....');--%>
|
||
<%-- });--%>
|
||
<%-- //当客户端无法连接或出现错误时触发回调--%>
|
||
<%-- client.on("error", (error) => {--%>
|
||
<%-- console.log('客户端出现错误.....' + error);--%>
|
||
<%-- });--%>
|
||
<%-- //当客户端发送任何数据包时发出。这包括published()包以及MQTT用于管理订阅和连接的包--%>
|
||
<%-- client.on("packetsend", (packet) => {--%>
|
||
<%-- // console.log('客户端已发出数据包：' + packet);--%>
|
||
<%-- });--%>
|
||
<%-- //当客户端接收到任何数据包时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息包--%>
|
||
<%-- client.on("packetreceive", (packet) => {--%>
|
||
<%-- // console.log('收到：' + packet);--%>
|
||
<%-- });--%>
|
||
|
||
<%-- //成功连接后触发的回调--%>
|
||
<%-- client.on("connect", function (connack) {--%>
|
||
<%-- // layer.msg('成功连接上mq服务器');--%>
|
||
<%-- console.log('可视化' + mqttId + '成功连接上mqtt服务器');--%>
|
||
<%-- //订阅某主题--%>
|
||
<%-- /**--%>
|
||
<%-- * client.subscribe(topic/topic array/topic object, [options], [callback])--%>
|
||
<%-- * topic:一个string类型的topic或者一个topic数组,也可以是一个对象--%>
|
||
<%-- * options--%>
|
||
<%-- */--%>
|
||
<%-- client.subscribe(['dataVisualData_' + frameId, nowUnitId + '_01_UP_VUE'], {qos: 2});--%>
|
||
<%-- //每隔2秒发布一次数据--%>
|
||
<%-- // setInterval(publish, 2000)--%>
|
||
<%-- });--%>
|
||
|
||
<%-- function publish() {--%>
|
||
<%-- //发布数据--%>
|
||
<%-- /**--%>
|
||
<%-- * client.publish(topic,message,[options], [callback])--%>
|
||
<%-- *--%>
|
||
<%-- * message: Buffer or String--%>
|
||
<%-- * options:{--%>
|
||
<%-- * qos:0, //默认0--%>
|
||
<%-- * retain:false, //默认false--%>
|
||
<%-- * dup:false, //默认false--%>
|
||
<%-- * properties:{}--%>
|
||
<%-- * }--%>
|
||
<%-- * callback:function (err){}--%>
|
||
<%-- */--%>
|
||
<%-- const message = "h5 message " + Math.random() + new Date();--%>
|
||
<%-- client.publish("testtopic/123", message, {qos: 2});--%>
|
||
<%-- }--%>
|
||
|
||
<%-- //当客户端接收到发布消息时触发回调--%>
|
||
<%-- /**--%>
|
||
<%-- * topic:收到的数据包的topic--%>
|
||
<%-- * message:收到的数据包的负载playload--%>
|
||
<%-- * packet:收到的数据包--%>
|
||
<%-- */--%>
|
||
<%-- client.on('message', (topic, message, packet) => {--%>
|
||
<%-- // console.log(message.getpay));--%>
|
||
<%-- // console.log(topic)--%>
|
||
<%-- if (topic == 'dataVisualData_' + frameId) {--%>
|
||
<%-- var json = JSON.parse(message.toString());--%>
|
||
<%-- // console.log(json);--%>
|
||
<%-- if (json.length > 0) {--%>
|
||
<%-- for (let i = 0; i < json.length; i++) {--%>
|
||
<%-- if (json[i].type == '${Type_SignalPoint}') {--%>
|
||
<%-- if (document.getElementById(json[i].id)) {--%>
|
||
<%-- let divHtml = showAssembly_mpdata_DI_View(json[i].content, json[i].showData);--%>
|
||
<%-- $('#' + json[i].id).remove();--%>
|
||
<%-- $('#' + json[i].cid + 'contentRelativeDiv').append(divHtml);--%>
|
||
<%-- }--%>
|
||
<%-- } else if (json[i].type == '${Type_DataPoint}') {--%>
|
||
<%-- if (document.getElementById(json[i].id)) {--%>
|
||
<%-- let divHtml = showAssembly_mpdata_AI_View(json[i].content, json[i].showData);--%>
|
||
<%-- $('#' + json[i].id).remove();--%>
|
||
<%-- $('#' + json[i].cid + 'contentRelativeDiv').append(divHtml);--%>
|
||
<%-- // $('#' + json[i].id+"value").text(json[i].value);--%>
|
||
<%-- }--%>
|
||
|
||
<%-- } else {--%>
|
||
<%-- if (document.getElementById(json[i].id)) {--%>
|
||
<%-- $('#' + json[i].id).text(json[i].value);--%>
|
||
<%-- }--%>
|
||
<%-- }--%>
|
||
|
||
<%-- }--%>
|
||
<%-- }--%>
|
||
|
||
<%-- } else if (topic == nowUnitId + '_01_UP_VUE') {--%>
|
||
<%-- var json = JSON.parse(message.toString());--%>
|
||
<%-- // console.log(json);--%>
|
||
<%-- if (json.length > 0) {--%>
|
||
<%-- for (let i = 0; i < json.length; i++) {--%>
|
||
<%-- $('.' + json[i].id).text(json[i].parmvalue);--%>
|
||
<%-- }--%>
|
||
<%-- }--%>
|
||
<%-- }--%>
|
||
<%-- });--%>
|
||
|
||
<%-- //页面离开自动断开连接--%>
|
||
<%-- $(window).bind("beforeunload", () => {--%>
|
||
<%-- // console.log("客户端窗口关闭,断开连接");--%>
|
||
<%-- client.disconnect();--%>
|
||
<%-- })--%>
|
||
<%--}--%>
|
||
|
||
</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="showFrame"></div>
|
||
</body>
|
||
|
||
</html> |