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