system_AGV.js
3.3 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
/**
* 初始化agv 点位路线图
* @param {*} 容器id
* @param {*} 数据源
*/
// String.prototype.initMarksLine
var initMarksLine = function (containerEle, data) {
const container = $(containerEle)
const html = [];
for (let i = 0; i < data.length; i++) {
const id = !data[i].id ? "" : `id=a_${data[i].id}`;
if (!data[i].bgcolor) {
data[i].flag === 2 ? data[i].bgcolor = '#98afdb' : data[i].bgcolor = '#006fdf'
}
if (!data[i].fontColor) {
data[i].fontColor = '#fff'
}
if (!data[i].fontWeight) {
data[i].fontWeight = 500
}
data[i].flag === 1 ? data[i].show = 'none' : data[i].show = 'block'
var tempDivInfo = `<div ${id} style='position:absolute;width: 1.2vw;height: 1.2vw;
top:${data[i].top};left:${data[i].left};background-color:${data[i].bgcolor};
color:${data[i].fontColor};
font-weight:${data[i].fontWeight};
font-size:0.7vw ;text-align:center;'>
<span style='position:absolute;width:3vw;margin-left:-1.5vw;z-index:9;text-align: center;'>
${data[i].lender || ""}
</span>
</div>`;
html.push(tempDivInfo)
}
container.append(html.join(" "))
}
var findMarkInfo = function (markInfos, sysinfo) {
function task (i, info) {
setTimeout(function () {
var $nowMark = $(`#${info.id}`);
// 如果已经存在 .agv-bubble，就不再添加
if ($nowMark.find('.agv-bubble').length > 0) {
$nowMark.find('.agv-bubble').remove();
}
$nowMark.append(`
<div class="bubble agv-bubble" style='color: ${info.fontColor};'>
<p class="color: yellow;
font-size: 1vw;
text-align: left;
margin-left: 0.5vw;
z-index: 999;">
小車編碼: ${info.carCode}<br>
狀態：${info.status}<br>
電量：${info.battery}%<br>
</p>
</div>
`);
const currentIds = markInfos.map(info => info.id);
if (sysinfo.length > 0) {
sysinfo.forEach(i => {
// 如果当前页面上没有该 id 的元素,则删除它
if (!currentIds.includes(i.id)) {
var $oldMark = $(`#${i.id}`);
// $oldMark.remove();
// 只移除带有 agv-bubble 类的元素
$oldMark.find('.agv-bubble').remove();
}
});
}
}, 0);
}
for (let i = 0; i < markInfos.length; i++) {
if (markInfos[i].status === "任务执行中") {
markInfos[i].fontColor = "#1afa29"
}
if (markInfos[i].status === "待机") {
markInfos[i].fontColor = "#f5f50bff"
}
if (markInfos[i].status === "错误") {
markInfos[i].fontColor = "#f92819ff"
}
if (markInfos[i].status === "充电") {
markInfos[i].fontColor = "#fff"
}
task(i, markInfos[i]);
}
/* 起始地标：${ info.startLandmark } <br>
终点地标：${info.endLandmark} */
// 记录当前页面上已有的元素 id
}