STKMonitor.js
4.41 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
120
121
122
123
124
125
126
127
128
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
})
}
});
}
//堆垛机移动
function STKMove(stk) {
var road = stk.Fork1_Code.substring(3, 4);
$('#canvas' + road).animateLayer('STK' + road, {
x: X + (width * (stk.AxisY_NO - 1)) - (width * 0.7), y: Y + height - (height * 0.4),
}, 2500);
if (stk.SRM_Err == 0 && stk.Fork1_Err == 0) {
$('#stk' + road)[0].innerText = '正常';
$('#stk' + road).css('color', 'green');
} else {
$('#stk' + road)[0].innerText = '异常';
$('#stk' + road).css('color', 'red');
}
}
function PushLoad() {
var connection = new signalR.HubConnectionBuilder()
.withUrl("/ChartHub"
)
.build();
connection.on("sendStkData", function (json) {
json.forEach(function (j) {
STKMove(j)
});
});
connection.start().then(function () {
}).catch(function (err) {
return console.error(err.toString());
});
}
//初始加载
$(document).ready(function () {
for (var i = 2; i < 4; i++) {
GetSTK(i);
}
PushLoad();
});
});