STKMonitor.js
4.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
layui.config({
base: "/js/"
}).use(['layer', 'jquery'], function () {
var layer = layui.layer,
$ = layui.jquery
//堆垛机监控属性
var width = 60;
var height = 20;
var STKheight = 40;
var X = 60;
var Y = 30;
var Y2 = Y + (height + STKheight);
var list = [];
//立库和堆垛机俯视图
function GetSTK(stk) {
STK = stk;
$.ajax({
async: false,
url: "/monitor/STKMonitor/GetRow",
type: "post",
data: { Roadway: stk },
dataType: "json",
success: function (data) {
list = [];
arr = data.data;
arr.forEach(function (e) {
$('#canvas' + stk).drawRect({
layer: true,
name: "L" + e.Roadway + "" + e.Row + "1",
strokeStyle: '#000',
strokeWidth: 1,
x: X + (width * (e.Row - 1)), y: Y,
width: width,
height: height,
})
.drawText({
layer: true,
name: "T" + e.Roadway + "" + e.Row + "1",
fillStyle: '#9cf',
strokeStyle: '#25a',
strokeWidth: 2,
x: X + (width * (e.Row - 1)), y: Y,
fontSize: 20,
fontFamily: 'Verdana, sans-serif',
text: e.Row
});
$('#canvas' + stk).drawRect({
layer: true,
name: "L" + e.Roadway + "" + e.Row + "2",
strokeStyle: '#000',
strokeWidth: 1,
x: X + (width * (e.Row - 1)), y: Y2,
width: width,
height: height,
})
.drawText({
layer: true,
name: "T" + e.Roadway + "" + e.Row + "2",
fillStyle: '#9cf',
strokeStyle: '#25a',
strokeWidth: 2,
x: X + (width * (e.Row - 1)), y: Y2,
fontSize: 20,
fontFamily: 'Verdana, sans-serif',
text: e.Row
});
list.push("L" + e.Roadway + "" + e.Row + "1");
list.push("L" + e.Roadway + "" + e.Row + "2");
list.push("T" + e.Roadway + "" + e.Row + "1");
list.push("T" + e.Roadway + "" + e.Row + "2");
});
//堆垛机
$('#canvas' + stk).addLayer({
type: 'image',
name: 'STK' + stk,
source: "/images/STK.gif",
x: X + (width * (1 - 1)) - (width * 0.7), y: Y + height - (height * 0.4),
width: width + (width * 0.5),
height: STKheight * 0.8,
fromCenter: false
})
}
});
setInterval(function () {
var STKstate = 2;
if (STKstate == 2) {
$('#stk1')[0].innerText = '异常';
$('#stk1').css('color', 'red');
}
}, 3000);
}
//堆垛机移动
function STKMove(stk) {
for (var i = 2; i < 7; i++) {
$('#canvas' + stk).animateLayer('STK' + stk, {
x: X + (width * (i - 1)) - (width * 0.7), y: Y + height - (height * 0.4),
}, 1000);
}
}
$(document).on("click", "#move", function () {
for (var i = 1; i < 4; i++) {
STKMove(i);
}
});
//初始加载
$(document).ready(function () {
for (var i = 1; i < 4; i++) {
GetSTK(i);
}
});
});