271 lines
10 KiB
Plaintext
271 lines
10 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"%>
|
||
|
|
<!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;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
/* 定义变量 */
|
||
|
|
var type = "node";
|
||
|
|
|
||
|
|
|
||
|
|
/* 获取数据 */
|
||
|
|
function getProcessValue() {
|
||
|
|
$("#tanghulu").empty();
|
||
|
|
$.post(ext.contextPath + '/plan/getProcess.do', { planLayoutId: "${param.planLayoutId}", type: type }, function (data) {
|
||
|
|
//console.log(data);
|
||
|
|
//生成飞行棋上的糖葫芦
|
||
|
|
for (var i = 0; i < data.node.length; i++) {
|
||
|
|
var array = new Array();//该节点内需要放的糖葫芦数组
|
||
|
|
var num = data.node[i].morder;//取用morder数字作为比对节点
|
||
|
|
for (var j = 0; j < data.process.length; j++) {
|
||
|
|
if (data.process[j].value == num) {
|
||
|
|
array.push(data.process[j].elementCode.match(/\d+/g));//将elementcode的数字作为糖葫芦
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//console.log("array", array);
|
||
|
|
//生成该节点的糖葫芦
|
||
|
|
if (array.length != 0) {
|
||
|
|
//height控制bottom width控制left 定位
|
||
|
|
var divStr = '<div style="position: absolute;z-index:1;bottom:' + data.node[i].height + '%;left:'
|
||
|
|
+ data.node[i].width + '%"><div style="position: absolute;z-index:3;">';
|
||
|
|
//循环遍历array 插上糖葫芦
|
||
|
|
for (var t = 0; t < array.length; t++) {
|
||
|
|
divStr += '<div class="circle"><span style="font-size:25px;font-weight: bold;">' + array[t] + '</span></div><div style="height:7px"></div>';
|
||
|
|
}
|
||
|
|
divStr += '</div>';
|
||
|
|
//数组过长加长糖葫芦杆子
|
||
|
|
if (array.length > 3) {
|
||
|
|
divStr += '<div class="stick" style="height:200px"></div><div style="height:195px;position: relative;z-index:1;"></div><div class="ellipse"></div></div>';
|
||
|
|
} else {
|
||
|
|
divStr += '<div class="stick"></div><div style="height:145px;position: relative;z-index:1;"></div><div class="ellipse"></div></div>';
|
||
|
|
}
|
||
|
|
//console.log(divStr);
|
||
|
|
$("#tanghulu").append(divStr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#table").empty();
|
||
|
|
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 tableStr = '<tr><td><div class="blueSpanSmallFont" style="font-size:' + document.documentElement.clientWidth * 0.02 + 'px">' + batchNo
|
||
|
|
+ '</div></td><td><div id="dotLine' + j + '" style="height:30px;width:500px"></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 == data.process[j].value){//进行中
|
||
|
|
option.series[0].data[k].symbol = 'image://<%=request.getContextPath()%>/IMG/material/ing.svg';
|
||
|
|
option.series[0].data[k].symbolSize = [58, 25];
|
||
|
|
}else if(data.node[k].morder > data.process[j].value){//打勾
|
||
|
|
option.series[0].data[k].symbol = 'image://<%=request.getContextPath()%>/IMG/material/finish.svg';
|
||
|
|
option.series[0].data[k].symbolSize = [58, 25];
|
||
|
|
}else if(data.node[k].morder < data.process[j].value){//默认
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var chart = echarts.init(document.getElementById('dotLine' + j));
|
||
|
|
chart.setOption(option);
|
||
|
|
}
|
||
|
|
//生成工单批次table
|
||
|
|
// 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 tableStr = '<tr><td><div class="blueSpanSmallFont" style="font-size:' + document.documentElement.clientWidth * 0.03 + 'px">' + data.process[j].name
|
||
|
|
// + '</div></td><td><div class="whiteSpanSmallFont" style="font-size:' + document.documentElement.clientWidth * 0.03 + 'px">'
|
||
|
|
// + batchNo + '</div></td></tr>';
|
||
|
|
// $("#table").append(tableStr);
|
||
|
|
// }
|
||
|
|
}, '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("tanghulu").style.width = document.documentElement.clientWidth + "px";
|
||
|
|
document.getElementById("tanghulu").style.height = document.documentElement.clientHeight + "px";
|
||
|
|
document.getElementById("tableDiv").style.height = 0.4 * document.documentElement.clientHeight + "px";
|
||
|
|
document.getElementById("tableDiv").style.width = 0.4 * 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-->
|
||
|
|
<div id="tanghulu" style="position: absolute;z-index:1;">
|
||
|
|
<!--糖葫芦牌子-->
|
||
|
|
<!--培养基-->
|
||
|
|
<!-- <div style="position: absolute;z-index:1;bottom:65%;left:25%"> -->
|
||
|
|
<!--糖葫芦-->
|
||
|
|
<!-- <div style="position: absolute;z-index:3;">
|
||
|
|
<div class="circle">
|
||
|
|
<span style="font-size:25px;font-weight: bold;">5</span>
|
||
|
|
</div>
|
||
|
|
<div style="height:7px"></div>
|
||
|
|
<div class="circle">
|
||
|
|
<span style="font-size:25px;font-weight: bold;">3</span>
|
||
|
|
</div>
|
||
|
|
<div style="height:7px"></div>
|
||
|
|
<div class="circle">
|
||
|
|
<span style="font-size:25px;font-weight: bold;">2</span>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<!--糖葫芦棍子-->
|
||
|
|
<!-- <div class="stick"></div> -->
|
||
|
|
<!-- 糖葫芦棍子底层div将椭圆顶下去 -->
|
||
|
|
<!-- <div style="height:145px;position: relative;z-index:1;"></div> -->
|
||
|
|
<!--糖葫芦底椭圆-->
|
||
|
|
<!-- <div class="ellipse"></div> -->
|
||
|
|
<!-- </div> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tableDiv" style="position:absolute;z-index:1;top:55%;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/process.jpg" style="z-index:-1;positon:relative;"
|
||
|
|
alt="" />
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|