245 lines
8.4 KiB
Plaintext
245 lines
8.4 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"%>
|
|
<%@page import="com.sipai.entity.visual.JspElement"%>
|
|
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
|
<%request.setAttribute("Type_GetHistory", JspElement.Type_GetHistory); %>
|
|
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
|
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
|
<!DOCTYPE html>
|
|
<!-- <html lang="zh-CN"> -->
|
|
<!-- BEGIN HEAD -->
|
|
|
|
<head>
|
|
<title></title>
|
|
<!-- 引用页头及CSS页-->
|
|
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
|
|
<style>
|
|
.ellipse {
|
|
width: 35px;
|
|
height: 12px;
|
|
background-color: #497A99;
|
|
position: relative;
|
|
-o-border-radius: 100%;
|
|
-ms-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
-webkit-border-radius: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.circle {
|
|
width: 35px;
|
|
height: 35px;
|
|
background-color: #5AD8FF;
|
|
border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
.stick {
|
|
height: 150px;
|
|
width: 20px;
|
|
border-left: 2px solid #63BEDE;
|
|
margin-left: 16px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.blueSpanSmallFont {
|
|
color: #62D7FE;
|
|
font-weight: bold;
|
|
font-family: Microsoft YaHei;
|
|
}
|
|
|
|
.whiteSpanSmallFont {
|
|
color: white;
|
|
font-family: Microsoft YaHei;
|
|
}
|
|
|
|
.darkBlueSpanSmallFont {
|
|
color: #4972B4;
|
|
font-weight: bold;
|
|
font-family: Microsoft YaHei;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
/* 定义变量 */
|
|
var type = "node";
|
|
|
|
|
|
/* 获取数据 */
|
|
function getProcessValue() {
|
|
$("#table").empty();
|
|
$.post(ext.contextPath + '/plan/getProcess.do', { planLayoutId: "${param.planLayoutId}", type: type }, function (data) {
|
|
//console.log("data",data);
|
|
//先生成流程图
|
|
for (var j = 0; j < data.process.length; j++) {
|
|
var batchNo = "-";
|
|
if (data.process[j].mPoint.parmvalue != null && data.process[j].mPoint.parmvalue != "") {
|
|
batchNo = data.process[j].mPoint.parmvalue;
|
|
}
|
|
var num = j+1;//用于生成product1这样的id,从0开始
|
|
var tableStr = '<tr><td colspan="2"><span id="product'+num+'" class="darkBlueSpanSmallFont" style="font-size:'
|
|
+ document.documentElement.clientWidth * 0.02 + 'px"></span></td></tr>'
|
|
+ '<tr>'
|
|
+ '<td align="center"><div class="blueSpanSmallFont" style="font-size:'
|
|
+ document.documentElement.clientWidth * 0.02 + 'px">' + batchNo + '</div></td>'
|
|
+ '<td><div id="dotLine' + j + '" style="height:50px;width:950px"></div></td>'
|
|
+ '</tr>';
|
|
$("#table").append(tableStr);
|
|
option = {
|
|
series: [
|
|
{
|
|
type: 'graph',
|
|
layout: 'none',
|
|
symbolSize: 20,
|
|
roam: 'scale',
|
|
|
|
edgeSymbol: ['circle', 'arrow'],
|
|
edgeSymbolSize: [4, 10],
|
|
data: [{
|
|
name: '节点1',
|
|
x: 500,
|
|
y: 100,
|
|
itemStyle: {
|
|
color: '#2F6D96',
|
|
},
|
|
}, {
|
|
name: '节点2',
|
|
x: 400,
|
|
y: 100,
|
|
itemStyle: {
|
|
color: '#2F6D96',
|
|
},
|
|
}, {
|
|
name: '节点3',
|
|
x: 300,
|
|
y: 100,
|
|
itemStyle: {
|
|
color: '#2F6D96',
|
|
},
|
|
}, {
|
|
name: '节点4',
|
|
x: 200,
|
|
y: 100,
|
|
itemStyle: {
|
|
color: '#2F6D96',
|
|
},
|
|
}, {
|
|
name: '节点5',
|
|
x: 100,
|
|
y: 100,
|
|
//symbol: 'image://<%=request.getContextPath()%>/IMG/material/blueCircle.svg',
|
|
itemStyle: {
|
|
color: '#2F6D96',
|
|
},
|
|
}],
|
|
// links: [],
|
|
links: [{
|
|
source: 4,
|
|
target: 3,
|
|
}, {
|
|
source: 3,
|
|
target: 2,
|
|
}, {
|
|
source: 2,
|
|
target: 1,
|
|
}, {
|
|
source: 1,
|
|
target: 0,
|
|
}],
|
|
lineStyle: {
|
|
normal: {
|
|
opacity: 0.9,
|
|
width: 2,
|
|
curveness: 0,
|
|
color: '#2F6D96',
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
for (var k = data.node.length - 1; k >= 0; k--) {
|
|
option.series[0].data[k].name = data.node[k].location.replace("\\", "");
|
|
if ((data.node[k].morder + 1) == data.process[j].value) {//进行中
|
|
option.series[0].data[k].symbol = 'image://<%=request.getContextPath()%>/IMG/material/ing.svg';
|
|
option.series[0].data[k].symbolSize = [100, 37];
|
|
} else if ((data.node[k].morder + 1) > data.process[j].value) {//打勾
|
|
option.series[0].data[k].symbol = 'image://<%=request.getContextPath()%>/IMG/material/finish.svg';
|
|
option.series[0].data[k].symbolSize = [100, 37];
|
|
} else if ((data.node[k].morder + 1) < data.process[j].value) {//默认
|
|
|
|
}
|
|
}
|
|
var chart = echarts.init(document.getElementById('dotLine' + j));
|
|
chart.setOption(option);
|
|
}
|
|
|
|
//再往流程里塞一些数据
|
|
getValue();
|
|
}, 'json');
|
|
}
|
|
|
|
function getValue() {
|
|
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
|
//每一条循环判断
|
|
//console.log("data", data);
|
|
for (var i = 0; i < data.length; i++) {
|
|
//获取值 和 获取Modbus
|
|
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
|
|
var code = data[i].elementCode;
|
|
if (document.getElementById(code)) {
|
|
//console.log("code", code);
|
|
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue;
|
|
}
|
|
} else if (data[i].getValueType == '${Type_GetHttp}') {
|
|
var code = data[i].elementCode;
|
|
if (document.getElementById(code)) {
|
|
document.getElementById(code).innerHTML = data[i].value;
|
|
}
|
|
} else {
|
|
|
|
}
|
|
}
|
|
}, 'json');
|
|
}
|
|
|
|
/* 定时器 */
|
|
setInterval(getProcessValue, 300000); //<!--每隔5分钟刷新一次-->
|
|
|
|
$(function () {
|
|
getProcessValue();
|
|
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
|
document.getElementById("process").style.width = document.documentElement.clientWidth + "px";
|
|
document.getElementById("process").style.height = document.documentElement.clientHeight + "px";
|
|
|
|
document.getElementById("tableDiv").style.height = 0.6 * document.documentElement.clientHeight + "px";
|
|
document.getElementById("tableDiv").style.width = 0.9 * document.documentElement.clientWidth + "px";
|
|
|
|
//$(".blueSpanSmallFont").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
|
|
//$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body style="width:100%;height:100%;margin:0;padding:0;">
|
|
<div style="width:100%;height:100%;margin:0;padding:0;text-align:center">
|
|
|
|
<div id="tableDiv" style="position:absolute;z-index:1;top:33%;left:7%">
|
|
<table id="table" style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;text-align:left">
|
|
|
|
</table>
|
|
</div>
|
|
|
|
<img id="process" src="<%=request.getContextPath()%>/IMG/bg_2F/工艺过程底图.jpg" style="z-index:-1;positon:relative;"
|
|
alt="" />
|
|
</div>
|
|
</body>
|
|
|
|
</html> |