SysMonitor.js
6.6 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
layui.config({
base: "/js/"
}).use(['form', 'element', 'layer', 'jquery'], function () {
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : parent.layer,
element = layui.element,
$ = layui.jquery;
//给按钮添加快捷键
//Ctrl+I键添加,Ctrl+R键刷新,Ctrl+D键删除,Ctrl+E键编辑,Ctrl+F查询,Ctrl+S保存,Ctrl+A全选,Ctrl+Shift+A取消全选,左 上一页 右 下一页
$(document).bind("keydown", function (e) {
//禁用页面F5刷新
if (e.which == 116) {
e.preventDefault(); //Skip default behavior of the enter key
}
});
$(document).ready(function () {
var CarInfo = $("#CarInfo");
var date = [];
var temp = [];
for (var i = 0; i < 100; i++) {
date.push('');
temp.push(0);
}
option1 = {
title: {
text: '动态数据 + 时间坐标轴'
},
legend: { //图表上方的类别显示
show: true,
//data: ['温度（℃）']
},
color: [
'#FF3333'
],
tooltip: {
trigger: 'axis',
formatter: '{b0}<br/><font color=#FF3333> ● </font>{a0} : {c0} ℃ ',
axisPointer: {
animation: false
}
},
xAxis: {
type: 'category',
data: []
},
yAxis:
[ //Y轴（这里我设置了两个Y轴，左右各一个）
{
//第一个（左边）Y轴，yAxisIndex为0
type: 'value',
name: '温度',
max: 200,
min: 0,
axisLabel: {
formatter: '{value} ℃' //控制输出格式
}
},
{
//第二个（右边）Y轴，yAxisIndex为1
type: 'value',
name: '温度',
max: 200,
min: 0,
axisLabel: {
formatter: '{value} ℃' //控制输出格式
}
}
],
series: [{
name: '温度数据',
type: 'line',
symbol: 'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
data: [] //数据值通过Ajax动态获取
}]
};
option2 = {
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '车间温度',
min: 0,
max: 200,
type: 'gauge',
detail: { formatter: '{value}℃' },
data: [{ value: 50, name: '温度' }]
}
]
};
myChart1 = echarts.init(document.getElementById('test1'));
myChart1.setOption(option1);
myChart2 = echarts.init(document.getElementById('test2'));
myChart2.setOption(option2);
$(function () {
var connection = new signalR.HubConnectionBuilder()
.withUrl("/ChartHub"
//, {
//skipNegotiation: true,
//transport: signalR.HttpTransportType.WebSockets
//}
)
.build();
connection.on("sendStkData", function (json) {
now = new Date();
date.shift();
date.push(now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds());
temp.shift();
temp.push(json.temp);
option1.xAxis.data = date;
option1.series[0].data = temp;
option2.series[0].data[0].value = json.temp;
try {
if (myChart1 == undefined && $('#test1').width() != 0) {
myChart1 = echarts.init(document.getElementById('test1'));
}
if (myChart2 == undefined && $('#test2').width() != 0) {
myChart2 = echarts.init(document.getElementById('test2'));
}
myChart1.setOption(option1, true);
myChart2.setOption(option2, true);
} catch (e) {
if (myChart1 != undefined) {
myChart1.dispose();
myChart1 = undefined;
}
if (myChart2 != undefined) {
myChart2.dispose();
myChart2 = undefined;
}
//console.log("error" + e.toString());
}
});
connection.on("sendAgvData", function (json) {
var x = json.X; //AGV x坐标
RefreshCar({ X: x * 2, Y: 60, AgvNo: 'Test' });
});
connection.start().then(function () {
}).catch(function (err) {
return console.error(err.toString());
});
});
//刷新单个小车
function RefreshCar(data) {
var carname = data.AgvNo;
var carLayer = $(CarInfo).getLayer(carname);
if (carLayer == undefined) {
DrawCar(data);
}
else {
EraseCar(data);
DrawCar(data);
}
}
//画小车
function DrawCar(data) {
var carx = data.X;
var cary = data.Y;
var carname = data.AgvNo;
var imgsrc = "/images/car.png";
$(CarInfo).drawImage({
layer: true,
name: carname,
source: imgsrc,
x: carx, y: cary,
fromCenter: false,
width: 20,
height: 20,
shadowColor: '#222',
shadowBlur: 5,
});
}
//移除小车
function EraseCar(data) {
$(CarInfo).removeLayer(data.AgvNo).drawLayers();
}
})
});