<%@ page contentType="text/html;charset=UTF-8"%>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
<%@page import="com.northglass.Globel.mes"%>
|
<%@page import="com.northglass.SqlHelper.*"%>
|
<%@ page contentType="text/html;charset=UTF-8"%>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
<html>
|
<head>
|
<script src="/gmms2/static/js/ng/layout_ex.js"></script>
|
<script src="gmms2/static/jquery/jquery-3.1.0.min.js" type="text/javascript"></script>
|
|
<style>
|
|
.rect{
|
background-color: lightblue;
|
border: 1px solid blue;
|
grid-row-start: 1;
|
overflow:auto;
|
}
|
#back{
|
width:1000;
|
height:600;
|
background-color: gray;
|
}
|
#panel{
|
display: grid;
|
width: 100%;
|
height: 100%;
|
grid-template-columns: 2.5fr 2.5fr 2.5fr 2.5fr 6fr;
|
grid-template-rows: 40% 50%;
|
overflow: hidden;
|
|
|
}
|
.seg{
|
|
margin:5px;
|
display: grid;
|
grid-template-rows: 30px auto;
|
|
|
}
|
|
.seg0{
|
|
grid-row-start: 1 ;
|
grid-column-start: 2;
|
grid-column-end: 3 span;
|
margin:5px;
|
display: grid;
|
grid-template-rows: 30px auto;
|
}
|
|
|
.seg1{
|
|
grid-row-start: 2 ;
|
grid-column-start: 4;
|
margin:5px;
|
display: grid;
|
grid-template-rows: auto 30px;
|
}
|
|
|
|
|
|
.seg2{
|
|
grid-row-start: 2 ;
|
grid-column-start: 5;
|
margin:5px;
|
display: grid;
|
grid-template-rows: auto 30px;
|
}
|
|
.content1{
|
grid-row-start: 1 ;
|
grid-column-start: 1 ;
|
background-color: gray;
|
}
|
|
|
.content2{
|
grid-row-start: 1;
|
grid-column-start: 1;
|
z-index: 100;
|
}
|
|
#action_panel{
|
margin-top:30px;
|
margin-left:30px;
|
display: grid;
|
grid-template-columns: 50% 50%;
|
}
|
|
</style>
|
</head>
|
<body>
|
<div class="content-wrapper" style="height:800px;backgroud-color:red">
|
<div id="panel" >
|
<div id="seg1" class="seg">
|
<div style="margin: auto;font-weight: bold;">机械手</div>
|
<div style="display:grid;">
|
<div class="content1" id="layout1"></div>
|
|
</div>
|
|
</div>
|
|
<div id="seg2" class="seg0">
|
<div style="margin: auto;font-weight: bold;">上片台/旋转台/复合台</div>
|
<div style="display:grid;">
|
<div class="content1" id="layout2"></div>
|
|
</div>
|
|
</div>
|
<div id="action_panel">
|
<span id="glass">
|
|
</span>
|
<div>
|
<button>上片完成</button>
|
<button>复合完成</button>
|
<button>摆片完成</button>
|
</div>
|
</div>
|
|
<div id="seg4" class="seg1">
|
|
<div style="display:grid;">
|
<div class="content1" id="layout3"></div>
|
|
</div>
|
<div style="margin: auto;font-weight: bold;">摆片台</div>
|
</div>
|
<div id="seg5" class="seg2">
|
|
<div style="display:grid;">
|
<div class="content1" id="layout4"></div>
|
|
</div>
|
<div style="margin: auto;font-weight: bold;">上片台</div>
|
</div>
|
</div>
|
</div>
|
|
|
|
|
<script>
|
<%
|
String p=request.getParameter("l");
|
if(p!=null)
|
out.print("var line="+p+";\r\n");
|
else
|
out.print("var line=null;\r\n");
|
%>
|
var select=null;
|
function updateSelect(){
|
if(select==null){
|
var str="编号：";
|
str+="\r\n长度：";
|
str+="\r\n宽度：";
|
str+="\r\n炉号：";
|
str+="\r\n工艺：";
|
str+="\r\n状态：";
|
document.getElementById("glass").innerText=str;
|
}
|
else{
|
var str="编号："+select.glass_id;
|
str+="\r\n长度："+select.width;
|
str+="\r\n宽度："+select.height;
|
str+="\r\n炉号："+select.layout_number;
|
str+="\r\n工艺："+select.proc;
|
str+="\r\n状态："+select.state;
|
document.getElementById("glass").innerText=str;
|
}
|
}
|
|
var selectid=0;
|
var layout1=createLayout(document.getElementById("layout1"));
|
var layout2=createLayout(document.getElementById("layout2"));
|
var layout3=createLayout(document.getElementById("layout3"));
|
var layout4=createLayout(document.getElementById("layout4"));
|
var opt1=layout1.createOneSelectOption(2500,2500," lightblue","white");
|
function itemclick(evt){
|
selectid=evt.item.id;
|
layout1.updateView();
|
layout2.updateView();
|
layout3.updateView();
|
layout4.updateView();
|
select=evt.item;
|
updateSelect();
|
}
|
function itemupdate(evt){
|
if(evt.item.id==selectid){
|
evt.element.style["background-color"]="white";
|
}
|
else{
|
var color="lightblue";
|
evt.element.style["background-color"]=color;
|
}
|
}
|
|
|
|
|
var opt2=layout2.createOneSelectOption(7500,2500," lightblue","lightblue");
|
var opt3=layout3.createOneSelectOption(2500,2500," lightblue","white");
|
var opt4=layout4.createOneSelectOption(6000,3000," lightblue","white");
|
opt1.onItemClick=itemclick;
|
opt2.onItemClick=itemclick;
|
opt3.onItemClick=itemclick;
|
opt4.onItemClick=itemclick;
|
opt1.onItemUpdate=itemupdate;
|
opt2.onItemUpdate=itemupdate;
|
opt3.onItemUpdate=itemupdate;
|
opt4.onItemUpdate=itemupdate;
|
|
var datas=[
|
{id:1,glass_id:1,x:0,y:0,width:1000,height:1000,proc:'钢化',state:'等待中',orders:1},
|
{id:2,glass_id:2,x:0,y:1100,width:1000,height:1000,proc:'钢化',state:'等待中',orders:2},
|
{id:3,glass_id:3,x:1100,y:0,width:1000,height:1000,proc:'钢化前摆片',state:'已完成',orders:3},
|
{id:4,glass_id:4,x:1100,y:1100,width:1000,height:1000,proc:'钢化前摆片',state:'正在工作',orders:4},
|
{id:5,glass_id:5,x:2200,y:0,width:1000,height:1000,proc:'钢化前复合',state:'正在工作',orders:5},
|
{id:6,glass_id:6,x:2200,y:1100,width:1000,height:1000,proc:'钢化前复合',state:'正在工作',orders:6},
|
{id:7,glass_id:7,x:3300,y:0,width:1000,height:1000,proc:'钢化上片',state:'正在工作',orders:7},
|
|
];
|
|
function sortCompare(a,b){
|
return a.orders-b.orders;
|
}
|
|
|
function setLayout(number,data){
|
if(data.length>0){
|
data.sort(sortCompare);
|
}
|
|
|
if(number==1){
|
|
if(data.length==1){
|
for(var i=0;i<data.length;i++){
|
data[i].x=(2500-data[i].width)/2;
|
data[i].y=(2500-data[i].height)/2;
|
data[i].text=data[i].glass_id+"\r\n"+data[i].proc+"-"+data[i].state;
|
}
|
}
|
else{
|
var pos=2490;
|
for(var i=0;i<data.length;i++){
|
pos-=data[i].width;
|
data[i].x=pos;
|
pos-=50;
|
data[i].y=(2500-data[i].height)/2;
|
data[i].text=data[i].glass_id+"\r\n"+data[i].proc+"-"+data[i].state;
|
}
|
}
|
opt1.items=data;
|
layout1.layout(opt1);
|
}
|
if(number==2){
|
|
var pos=5000;
|
for(var i=0;i<data.length;i++){
|
if(i==0){
|
data[i].x=(7500-data[i].width);
|
if(data.proc=='钢化前摆片')
|
data[i].y=2500-data[i].height+50;
|
else
|
data[i].y=(2500-data[i].height)/2;
|
data[i].text=data[i].glass_id+"\r\n"+data[i].proc+"-"+data[i].state;
|
continue;
|
}
|
pos-=data[i].width;
|
if(data.length==3 && i==2){
|
data[i].x=(2500-data[i].width)/2;
|
}
|
else
|
data[i].x=pos;
|
pos-=50;
|
data[i].y=(2500-data[i].height)/2;
|
data[i].text=data[i].glass_id+"\r\n"+data[i].proc+"-"+data[i].state;
|
}
|
opt2.items=data;
|
layout2.layout(opt2);
|
}
|
|
if(number==3){
|
for(var i=0;i<data.length;i++){
|
data[i].x=(2500-data[i].width);
|
data[i].y=(2500-data[i].height-data[i].y);
|
data[i].text=data[i].glass_id+"\r\n"+data[i].proc+"-"+data[i].state;
|
}
|
opt3.items=data;
|
layout3.layout(opt3);
|
}
|
if(number==4){
|
var maxx=0;
|
for(var i=0;i<data.length;i++){
|
if(maxx<data[i].x+data[i].width)
|
maxx=data[i].x+data[i].width;
|
data[i].text=data[i].glass_id+"\r\n"+data[i].proc+"-"+data[i].state;
|
data[i].y=(2500-data[i].height-data[i].y);
|
}
|
for(var i=0;i<data.length;i++){
|
data[i].x=maxx-data[i].width+200;
|
}
|
opt4.items=data;
|
layout4.layout(opt4);
|
}
|
}
|
|
function is_layout_1(data){
|
return data.proc=="钢化上片" && data.state=='正在工作';
|
}
|
|
function is_layout_2(data){
|
|
return (data.proc=="钢化前摆片" && data.state=='正在工作' ) || (data.proc=="钢化前复合" && data.state=='正在工作' )
|
|| (data.proc=="钢化前复合" && data.state=='匹配失败' )
|
|| (data.proc=="钢化前复合" && data.state=='已完成' )
|
;
|
// || (data.proc=="钢化前复合" && data.state=='匹配失败')
|
// || (data.proc=="钢化前复合" && data.state=='已完成')
|
// ||(data.proc=="钢化前摆片" && data.state=='正在工作')
|
|
}
|
|
function is_layout_3(data){
|
return (data.proc=="钢化前摆片" && data.state!='正在工作' && data.state!='破损');
|
}
|
|
function is_layout_4(data){
|
return data.proc=="钢化" && data.state=='等待中';
|
}
|
|
|
|
|
function selectData(datas,filter){
|
var ret=[];
|
for(var i=0;i<datas.length;i++){
|
if(filter(datas[i])==true)
|
ret.push(datas[i]);
|
}
|
return ret;
|
}
|
|
|
function udpateView(datas){
|
|
var ret1= selectData(datas,is_layout_1);
|
var ret2= selectData(datas,is_layout_2);
|
var ret3= selectData(datas,is_layout_3);
|
var ret4= selectData(datas,is_layout_4);
|
|
setLayout(1,ret1);
|
setLayout(2,ret2);
|
setLayout(3,ret3);
|
setLayout(4,ret4);
|
}
|
|
function update(datas){
|
var dd=JSON.parse(datas);
|
if(dd.result=="ok"){
|
udpateView(dd.data);
|
}
|
}
|
|
function error(data){
|
|
}
|
|
|
function load(){
|
$.ajax({
|
type:"post",
|
data:{ a:"update",b:line },
|
url:"/gmms2/mesview/data/_layoutEx",
|
success:update,
|
error:error,
|
async:false
|
});
|
setTimeout(load,2000);
|
}
|
load();
|
</script>
|
|
|
</body>
|
</html>
|
