<%@ page language="java" contentType="text/html; charset=UTF-8"
|
pageEncoding="UTF-8"%>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
|
<c:set var="ctx" value="${pageContext.request.contextPath}" />
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<title>动态显示</title>
|
<script type="text/javascript" src="${ctx}/static/jquery/jquery-3.1.0.min.js"></script>
|
<link href="${ctx}/static/styles/default.css" type="text/css" rel="stylesheet" />
|
<link href="${ctx}/static/styles/dongtaixianshi.css" type="text/css" rel="stylesheet" />
|
<script src="${ctx}/static/holder.js" type="text/javascript"></script>
|
<script language="javascript" type="text/javascript" src="${ctx}/static/util.js"></script>
|
<script type="text/javascript"
|
src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
|
<script>
|
var contextPath = "${pageContext.request.contextPath}";
|
</script>
|
<style type="text/css">
|
.main-sidebar{
|
display: none;
|
}
|
|
.main-header{
|
display: none;
|
}
|
.content-wrapper, .main-footer {
|
margin-left: 0px;
|
}
|
.main-footer{
|
display: none;
|
}
|
|
</style>
|
|
|
|
</head>
|
<body>
|
<div style="background:#eeeeee">
|
<svg width="1920" height="960" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<g stroke="null" id="Layer_1">
|
<title stroke="null">Layer 1</title>
|
<image x="100" y="50" width="100" xlink:href="${pageContext.request.contextPath}/static/images/log2.png"/>
|
<text stroke="#000" xml:space="preserve" font-family="'Catamaran'" font-size="45" class="font1" y="105" x="740">${line}号线玻璃落架指导</text>
|
<line stroke="#000" stroke-dasharray="2,2" id="svg_2" y2="135" x2="1797" y1="142" x1="122" fill="none"/>
|
<rect id="jiazi1" height="180" width="300" y="326" x="450" stroke-dasharray="2,2" stroke-width="0" fill="#6a6da9"/>
|
<path id="path1" d="" stroke="red" stroke-width="5" fill="none"/>
|
<text id="NG01" font-size="30" font-weight="bold" y="310" alignment-baseline="baseline" x="600" fill="black" text-anchor="middle">N1</text>
|
<text id="glassCount1" font-weight="bold" font-size="30" y="275" x="600" fill="#ff0000" alignment-baseline="baseline" text-anchor="middle">N1C</text>
|
<text font-weight="bold" font-size="30" y="240" x="600" fill="#ff0000" alignment-baseline="baseline" text-anchor="middle">1号位</text>
|
|
|
<rect id="jiazi2" height="180" width="300" y="617" x="450" stroke-dasharray="2,2" stroke-width="0" fill="#6a6da9"/>
|
<path id="path2" d="" stroke="red" stroke-width="5" fill="none" />
|
<text id="NG02" font-size="30" y="830" x="600" font-weight="bold" fill="black" alignment-baseline="baseline" text-anchor="middle">NG20000002</text>
|
<text id="glassCount2" font-size="30" font-weight="bold" y="865" x="600" fill="#ff0000" text-anchor="middle" alignment-baseline="baseline">2</text>
|
<text font-weight="bold" font-size="30" y="240" x="1000" fill="#ff0000" alignment-baseline="baseline" text-anchor="middle">3号位</text>
|
|
|
<rect id="jiazi3" height="180" width="300" y="326" x="850" stroke-dasharray="2,2" stroke-width="0" fill="#6a6da9"/>
|
<path id="path3" d="" stroke="red" stroke-width="5" fill="none" />
|
<text id="NG03" font-size="30" font-weight="bold" y="310" x="1000" fill="#000000" alignment-baseline="baseline" text-anchor="middle">NG30000003</text>
|
<text id="glassCount3" font-size="30" font-weight="bold" y="275" x="1000" fill="#ff0000" alignment-baseline="baseline" text-anchor="middle">3</text>
|
<text font-weight="bold" font-size="30" y="900" x="600" fill="#ff0000" alignment-baseline="baseline" text-anchor="middle">2号位</text>
|
|
|
<rect id="jiazi4" height="180" width="300" y="617" x="850" stroke-dasharray="2,2" stroke-width="0" fill="#6a6da9"/>
|
<path id="path4" d="" rostroke-width="5" fill="ff0000" stroke="red"/>
|
<text id="NG04" font-size="30" y="830" x="1000" font-weight="bold" fill="#000000" alignment-baseline="baseline" text-anchor="middle">NG40000004</text>
|
<text id="glassCount4" font-size="30" y="865" x="1000" font-weight="bold" fill="#ff0000" alignment-baseline="baseline" text-anchor="middle">4</text>
|
<text font-weight="bold" font-size="30" y="900" x="1000" fill="#ff0000" alignment-baseline="baseline" text-anchor="middle">4号位</text>
|
|
|
<rect id="jiazi5" height="300" width="180" y="417" x="1250" stroke-dasharray="2,2" stroke-width="0" fill="#6a6da9"/>
|
<path id="path5" d="" stroke="red" stroke-width="5" fill="none" />
|
<text id="NG05" font-size="30" y="405" font-weight="bold" x="1340" fill="#000000" alignment-baseline="baseline" text-anchor="middle">NG0000005</text>
|
<text id="glassCount5" font-size="30" font-weight="bold" y="370" x="1340" fill="#ff0000" alignment-baseline="baseline" text-anchor="middle">5</text>
|
<text font-weight="bold" font-size="30" y="335" x="1340" fill="#ff0000" alignment-baseline="baseline" text-anchor="middle">5号位</text>
|
|
|
<rect id="glass" x="100" y="600" width="0" height="0" fill="red"/>
|
|
<text id="glass_size" font-size="30px" font-weight="bold" x="100" y="600" text-anchor="middle" alignment-baseline="middle"></text>
|
|
<text id="glass_pos" font-size="30px" font-weight="bold" x="100" y="600" text-anchor="middle" alignment-baseline="middle"></text>
|
|
|
<!--text y="200" font-size="20" text-anchor="start">
|
<tspan x="1550" dy="35">原片数量</tspan>
|
<tspan x="1550" dy="35">小片数量</tspan>
|
<tspan x="1550" dy="35">破损数量</tspan>
|
</text>
|
|
<text y="200" font-size="20" text-anchor="end">
|
<tspan x="1800" dy="35" id="var1">0</tspan>
|
<tspan x="1800" dy="35" id="var2">0</tspan>
|
<tspan x="1800" dy="35" id="var3" dx="-5">0</tspan>
|
</text>-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
</svg>
|
</div>
|
<script type="text/javascript">
|
var radio=300.0/2000;
|
var margin=1;
|
var style={
|
radio:300.0/2000,
|
rectcolor:['#333333','#72777b','#1b315e','#c85d44','#009ad6'],
|
linecolor:['#009ad6','#aa2200'],
|
font_size:['10px','20px','30px'],
|
pos:["1号位","2号位","3号位","4号位","5号位"],
|
text2:['空闲','空架']
|
}
|
|
|
|
|
|
var glasspos={ right:300,center:561 , radio:300.0/2000};
|
|
function showglass(width,height,pos){
|
var gls=document.getElementById("glass");
|
var x=glasspos.right-width*glasspos.radio;
|
var y=glasspos.center-height*glasspos.radio/2;
|
var w=width*glasspos.radio;
|
var h=height*glasspos.radio;
|
gls.setAttribute("x",x);
|
gls.setAttribute("y",y);
|
gls.setAttribute("width",w);
|
gls.setAttribute("height",h);
|
gls.setAttribute("fill",style.linecolor[1]);
|
var txt=document.getElementById("glass_size");
|
var show="";
|
show+=width+"*"+height;
|
var x=x+w/2;
|
var y=y+h/2;
|
txt.setAttribute("x",x);
|
txt.setAttribute("y",y+15);
|
txt.textContent=show;
|
var txt=document.getElementById("glass_pos");
|
txt.setAttribute("x",x);
|
txt.setAttribute("y",y-15);
|
txt.textContent=style.pos[pos-1];
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function line(data,width,index,number,rect,thickness)
|
{
|
var tk=thickness*radio+margin;
|
if(number!=5)
|
{
|
var x1= rect.x+rect.width/2-width/2;
|
var x2=x1+width;
|
var y1=null;
|
switch(number)
|
{
|
case 1:
|
y1=index*tk+rect.y;
|
break;
|
case 3:
|
y1=index*tk+rect.y;
|
break;
|
case 2:
|
y1=rect.y+rect.height-(index*tk);
|
break;
|
case 4:
|
y1=rect.y+rect.height-(index*tk);
|
break;
|
|
}
|
var y2=y1;
|
return data+" M " +x1+" "+y1+" L "+x2+" "+y2;
|
}
|
else
|
{
|
var x1=rect.x+rect.width-index*tk;
|
var x2=x1;
|
var y1=rect.y+rect.height/2-width/2;
|
var y2=y1+width;
|
return data+" M " +x1+" "+y1+" L "+x2+" "+y2;
|
}
|
}
|
function GetLine(data,index,r)
|
{
|
var s="";
|
for(var i=0;i<data.widths.length;i++)
|
{
|
s= line(s,data.widths[i]*radio,i+1,index,r,data.thickness*radio);
|
}
|
return s;
|
}
|
function updateFrame(number,data)
|
{
|
var rect=null;
|
var text1=null;
|
var text2=null;
|
var path1=null;
|
var r=null;
|
var L=null;
|
switch(number)
|
{
|
case 1:
|
rect=document.getElementById("jiazi1"); //矩形图
|
text1=document.getElementById("NG01"); //流程卡
|
text2=document.getElementById("glassCount1"); //数量
|
path1=document.getElementById("path1"); //线
|
break;
|
case 2:
|
rect=document.getElementById("jiazi2");
|
text1=document.getElementById("NG02");
|
text2=document.getElementById("glassCount2");
|
path1=document.getElementById("path2");
|
break;
|
case 3:
|
rect=document.getElementById("jiazi3");
|
text1=document.getElementById("NG03");
|
text2=document.getElementById("glassCount3");
|
path1=document.getElementById("path3");
|
break;
|
case 4:
|
rect=document.getElementById("jiazi4");
|
text1=document.getElementById("NG04");
|
text2=document.getElementById("glassCount4");
|
path1=document.getElementById("path4");
|
break;
|
case 5:
|
rect=document.getElementById("jiazi5");
|
text1=document.getElementById("NG05");
|
text2=document.getElementById("glassCount5");
|
path1=document.getElementById("path5");
|
break;
|
default:
|
return ;
|
}
|
r={
|
x:parseInt( rect.getAttribute("x")),
|
y: parseInt(rect.getAttribute("y")),
|
width: parseInt(rect.getAttribute("width")),
|
height: parseInt(rect.getAttribute("height"))
|
}
|
if(data.isnextframe==false)
|
rect.setAttribute("fill",style.rectcolor[data.state]);
|
else
|
rect.setAttribute("fill",style.linecolor[1]);
|
if(data.state>1){
|
text1.textContent=data.cardname;
|
}
|
else{
|
text1.textContent="";
|
}
|
switch(data.state){
|
case 0:
|
text2.textContent=style.text2[0];
|
|
break;
|
case 1:
|
text2.textContent=style.text2[1];
|
break;
|
case 2:
|
text2.textContent=data.widths.length+"/"+data.total;
|
break;
|
case 3:
|
text2.textContent=data.widths.length+"/"+data.total+"(已满)";
|
break;
|
}
|
|
|
|
if(data.widths!=null)
|
{
|
L=GetLine(data,number,r);
|
path1.setAttribute("stroke-width",data.thickness);
|
path1.setAttribute("d",L);
|
path1.setAttribute("stroke",style.linecolor[0]);
|
}
|
else{
|
path1.setAttribute("d","");
|
}
|
|
|
}
|
function back(data)
|
{
|
if(data.nextpos!=0){
|
showglass(data.nextwidth,data.nextheight,data.nextpos);
|
|
}
|
updateFrame(1,data.frames[0]);
|
updateFrame(2,data.frames[1]);
|
updateFrame(3,data.frames[2]);
|
updateFrame(4,data.frames[3]);
|
updateFrame(5,data.frames[4]);
|
|
}
|
var a={
|
area:1000,
|
sheetcount:80,
|
frames:[
|
{
|
state: 1, //状态
|
cardname:"NG0001", //流程卡名
|
jiahao:"A1", //架号
|
widths:[700,600,400,600,333.777,1000,800,700,600,400,600,333.777,1000,800,700,600,400,600,333.777,2000,800], // 玻璃宽度
|
area:10.03, //面积
|
total:30,
|
thickness:6
|
},
|
{
|
state: 2, //状态
|
cardname:"NG0002", //流程卡名
|
jiahao:"A1", //架号
|
widths:[700,600,400,600,333.777,1000,800,700,600,400,600,333.777,1000,800,700,600,400,600,333.777,1000,800], // 玻璃宽度
|
area:10.03, //面积
|
total:30,
|
thickness:6
|
},
|
{
|
state:3, //状态
|
cardname:"NG0003", //流程卡名
|
jiahao:"A1", //架号
|
widths:[700,600,400,600,333.777,1000,800,700,600,400,600,333.777,1000,800,700,600,400,600,333.777,1000,800], // 玻璃宽度
|
area:10.03, //面积
|
total:30,
|
thickness:6
|
},
|
{
|
state: 4, //状态
|
cardname:"NG0004", //流程卡名
|
jiahao:"A1", //架号
|
widths:[700,600,400,600,333.777,1000,800,700,600,400,600,333.777,1000,800,700,600,400,600,333.777,1000,800], // 玻璃宽度
|
area:10.03, //面积
|
total:30,
|
thickness:6
|
},
|
{
|
state: 5, //状态
|
cardname:"NG0005", //流程卡名
|
jiahao:"A1", //架号
|
widths:[700,600,400,600,333.777,1000,800,700,600,400,600,333.777,1000,800,700,600,400,600,333.777,1000,800], // 玻璃宽度
|
area:10.03, //面积
|
total:30,
|
thickness:6
|
}]
|
};
|
|
|
|
|
|
|
|
/* var iv=setInterval(update,400);
|
function update(){
|
$.get("tv",function(data,sta){
|
back(data);
|
});
|
} */
|
|
var lines=${line};
|
var segment=${segment};
|
var iv=setInterval(update,400);
|
function update(){
|
|
var str="tv?lines="+lines+"&segment="+segment;
|
$.get(str,function(data,sta){
|
back(data);
|
});
|
|
}
|
|
|
</script>
|
|
</body>
|
|
|
</html>
|
