|
|
@@ -52,8 +52,12 @@
|
|
|
color: #27c24c
|
|
|
}
|
|
|
.mui-col-xs-3 {
|
|
|
- width: 24%;
|
|
|
+ width: 23%;
|
|
|
}
|
|
|
+ .mui-col-xs-2 {
|
|
|
+ width: 23%;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
</head>
|
|
|
<body style="background: url(img/bg.png) no-repeat 0px 0px">
|
|
|
@@ -68,53 +72,60 @@
|
|
|
</div>
|
|
|
<div class="mui-col mui-col-xs-12" id="btt" style="min-height:480px;overflow-y:auto;max-height:480px">
|
|
|
<div class="mui-col mui-col-xs-12" style="height: 235px;text-align: center;background: url(img/top_bg2.png) no-repeat 0 0;background-size:100%;">
|
|
|
- <div class="mui-col mui-col-xs-12" style="padding-top: 10px;height: 30px;">
|
|
|
- <div style=" width: 50%;float: left;">
|
|
|
- <img id="speed" src="" style="margin-left: -80px;width: 13%;">
|
|
|
+ <div class="mui-col mui-col-xs-12" style="padding-top: 10px;height: 30px;">
|
|
|
+ <div style=" width: 50%;float: left;">
|
|
|
+ <img id="speed" src="" style="margin-left: -80px;width: 13%;">
|
|
|
+ </div>
|
|
|
+ <div style=" width: 50%;float: left;">
|
|
|
+ <img id="battery" src="img/battery-100.png" style="margin-right: -80px;width: 23%;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mui-col mui-col-xs-12" style="margin-top: -5px;">
|
|
|
+ <div id="tgts" style="width: 120px;height:90px;border-radius: 12px;border: 2px solid #298890;float: left;margin-left: 23px;">
|
|
|
+ <div style="margin-left: -60px;margin-top: 15px;">
|
|
|
+ <a style="color: #FFFFFF;font-size: 18px;">目标</a><br>
|
|
|
</div>
|
|
|
- <div style=" width: 50%;float: left;">
|
|
|
- <img id="battery" src="img/battery-100.png" style="margin-right: -80px;width: 23%;">
|
|
|
+ <div style="margin-left: -60px;margin-top: 10px;">
|
|
|
+ <a style="color: #FFFFFF;font-size: 18px;">站点</a><br>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 40px;margin-top: -35px;">
|
|
|
+ <a id="tgtstation" style="color: #FFFFFF;font-size: 50px;"></a><br>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="mui-col mui-col-xs-12" style="margin-top: -5px;">
|
|
|
- <div id="tgts" style="width: 120px;height:90px;border-radius: 12px;border: 2px solid #298890;float: left;margin-left: 23px;">
|
|
|
- <div style="margin-left: -60px;margin-top: 15px;">
|
|
|
- <a style="color: #FFFFFF;font-size: 18px;">目标</a><br>
|
|
|
- </div>
|
|
|
- <div style="margin-left: -60px;margin-top: 10px;">
|
|
|
- <a style="color: #FFFFFF;font-size: 18px;">站点</a><br>
|
|
|
- </div>
|
|
|
- <div style="margin-left: 40px;margin-top: -35px;">
|
|
|
- <a id="tgtstation" style="color: #FFFFFF;font-size: 50px;"></a><br>
|
|
|
- </div>
|
|
|
+ <div id="jack" style="width: 120px;height:90px;border-radius: 12px;border: 2px solid #298890;float: right;margin-right: 20px;">
|
|
|
+ <div style="margin-left: -60px;margin-top: 15px;">
|
|
|
+ <a style="color: #FFFFFF;font-size: 18px;">顶升</a><br>
|
|
|
</div>
|
|
|
- <div id="jack" style="width: 120px;height:90px;border-radius: 12px;border: 2px solid #298890;float: right;margin-right: 20px;">
|
|
|
- <div style="margin-left: -60px;margin-top: 15px;">
|
|
|
- <a style="color: #FFFFFF;font-size: 18px;">顶升</a><br>
|
|
|
- </div>
|
|
|
- <div style="margin-left: -60px;margin-top: 10px;">
|
|
|
- <a style="color: #FFFFFF;font-size: 18px;">状态</a><br>
|
|
|
- </div>
|
|
|
- <div style="margin-left: 50px;margin-top: -53px;">
|
|
|
- <img id="liftstatus" src="img/liftstatus.png" width="60%">
|
|
|
- </div>
|
|
|
+ <div style="margin-left: -60px;margin-top: 10px;">
|
|
|
+ <a style="color: #FFFFFF;font-size: 18px;">状态</a><br>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 50px;margin-top: -53px;">
|
|
|
+ <img id="liftstatus" src="img/liftstatus.png" width="60%">
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="mui-col mui-col-xs-12" style="height: 40px;padding-left: 15px;margin-top: -5px;">
|
|
|
- <div id="stop" style="width: 30%;height: 40px;line-height:40px;float: left;margin-left: 5px;background: url(img/btn4_bg.png);color: #FFFFFF;text-align: center;">停止</div>
|
|
|
- <div id="run" style="width: 30%;height: 40px;line-height:40px;float: left;margin-left: 5px;background: url(img/btn4_bg.png);color: #FFFFFF;text-align: center;">运行</div>
|
|
|
- <div id="warning" style="width: 30%;height: 40px;line-height:40px;float: left;margin-left: 5px;background: url(img/btn4_bg.png);color: #FFFFFF;text-align: center;">注意</div>
|
|
|
- </div>
|
|
|
- <div class="mui-col mui-col-xs-12">
|
|
|
- <div id="info" style="width: 89%;height: 35px;margin-left: 19px;color:#fff;font-size:15px;line-height: 30px;background-color: #0b6d78;border-radius: 3px;text-align: center;padding-left: 5px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="mui-col mui-col-xs-12" style="margin-top: -5px;">
|
|
|
- <div id="btlist" style="padding-left: 15px;height:190px">
|
|
|
+ <div class="mui-col mui-col-xs-12" style="height: 40px;padding-left: 15px;margin-top: -5px;">
|
|
|
+ <div id="stop" style="width: 30%;height: 40px;line-height:40px;float: left;margin-left: 5px;background: url(img/btn4_bg.png);color: #FFFFFF;text-align: center;">停止</div>
|
|
|
+ <div id="run" style="width: 30%;height: 40px;line-height:40px;float: left;margin-left: 5px;background: url(img/btn4_bg.png);color: #FFFFFF;text-align: center;">运行</div>
|
|
|
+ <div id="warning" style="width: 30%;height: 40px;line-height:40px;float: left;margin-left: 5px;background: url(img/btn4_bg.png);color: #FFFFFF;text-align: center;">注意</div>
|
|
|
+ </div>
|
|
|
+ <div class="mui-col mui-col-xs-12">
|
|
|
+ <div id="info" style="width: 89%;height: 35px;margin-left: 19px;color:#fff;font-size:15px;line-height: 30px;background-color: #0b6d78;border-radius: 3px;text-align: center;padding-left: 5px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="mui-col mui-col-xs-12" style="margin-top: -5px;">
|
|
|
+ <div id="btlist" style="padding-left: 15px;height:190px">
|
|
|
+ <div class="mui-col mui-col-xs-2 client" drag-id="11"><button type="button" class="mui-btn mui-btn-royal mui-btn-block" name="stbtn" id="11" value="11">c11</button></div>
|
|
|
+ <div class="mui-col mui-col-xs-2 client" drag-id="12"><button type="button" class="mui-btn mui-btn-royal mui-btn-block" name="stbtn" id="12" value="12">c12</button></div>
|
|
|
+ <div class="mui-col mui-col-xs-2 client" drag-id="13"><button type="button" class="mui-btn mui-btn-royal mui-btn-block" name="stbtn" id="13" value="13">c13</button></div>
|
|
|
+ <div class="mui-col mui-col-xs-2 client" drag-id="14"><button type="button" class="mui-btn mui-btn-royal mui-btn-block" name="stbtn" id="14" value="14">c14</button></div>
|
|
|
+ <div class="mui-col mui-col-xs-2 client" drag-id="15"><button type="button" class="mui-btn mui-btn-royal mui-btn-block" name="stbtn" id="15" value="15">c15</button></div>
|
|
|
+ <div class="mui-col mui-col-xs-2 client" drag-id="16"><button type="button" class="mui-btn mui-btn-royal mui-btn-block" name="stbtn" id="16" value="16">c16</button></div>
|
|
|
+ <div class="mui-col mui-col-xs-2 client" drag-id="17"><button type="button" class="mui-btn mui-btn-royal mui-btn-block" name="stbtn" id="17" value="17">c17</button></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="mui-col mui-col-xs-12" style="text-align:center;margin-top: 10px;">
|
|
|
+ </div>
|
|
|
+ <div class="mui-col mui-col-xs-12" style="text-align:center;margin-top: 10px;">
|
|
|
<div class="mui-col mui-col-xs-2">
|
|
|
<a href="settings.html" style="color: #9fb3b4;"><span class="mui-icon mui-icon-settings"></span></a>
|
|
|
</div>
|
|
|
@@ -124,10 +135,13 @@
|
|
|
<div class="mui-col mui-col-xs-3" id="gostart">
|
|
|
<button type="button" class="mui-btn mui-btn-royal mui-btn-block operation" id="start" style="border:1px solid #4a5a6a;">搬运</button>
|
|
|
</div>
|
|
|
+ <div class="mui-col mui-col-xs-3" id="gostart_client">
|
|
|
+ <button type="button" class="mui-btn mui-btn-royal mui-btn-block operation" id="start_client" style="border:1px solid #4a5a6a;">搬运</button>
|
|
|
+ </div>
|
|
|
<div class="mui-col mui-col-xs-3">
|
|
|
<button type="button" class="mui-btn mui-btn-royal mui-btn-block operation" id="cancel" style="border:1px solid #4a5a6a;">取消</button>
|
|
|
</div>
|
|
|
- <div class="mui-col mui-col-xs-2">
|
|
|
+ <div class="mui-col mui-col-xs-2" id="task_list">
|
|
|
<a href="tasklist.html" style="color: #9fb3b4;"><span class="mui-icon mui-icon-bars"></span></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -136,6 +150,8 @@
|
|
|
</div>
|
|
|
</body>
|
|
|
<script src="js/jquery.min.js"></script>
|
|
|
+ <script src="js/mui.min.js"></script>
|
|
|
+ <!-- <script src="js/lodash.js"></script> -->
|
|
|
<script src="js/msg.js"></script>
|
|
|
<script src="js/Sortable.min.js"></script>
|
|
|
<script src="js/mui.js"></script>
|
|
|
@@ -144,31 +160,25 @@
|
|
|
<script type="text/javascript">
|
|
|
var $btlist = $('#btlist');
|
|
|
$(function() {
|
|
|
- //获取保存的ip、agvid、mapid等,如果没有数据，则设置为默认
|
|
|
- if (localStorage.getItem("ip") == "" || localStorage.getItem("ip") == null) {
|
|
|
- ip = "192.168.1.92:8888";
|
|
|
- url = "http://192.168.1.92:8888"
|
|
|
- } else {
|
|
|
- ip = localStorage.getItem("ip") + ":8888";
|
|
|
- url = "http://" + localStorage.getItem("ip") + ":8888";
|
|
|
- }
|
|
|
- if (localStorage.getItem("agvid") == "" || localStorage.getItem("agvid") == null) {
|
|
|
- agvid = 1;
|
|
|
- } else {
|
|
|
- agvid = parseInt(localStorage.getItem("agvid"))
|
|
|
- }
|
|
|
- if (localStorage.getItem("mapid") == "" || localStorage.getItem("mapid") == null) {
|
|
|
- mapid = "2020032608412704";
|
|
|
- } else {
|
|
|
- mapid = localStorage.getItem("mapid")
|
|
|
- }
|
|
|
+ SetConfig()
|
|
|
//获取按钮
|
|
|
- createList();
|
|
|
-
|
|
|
+ //获取状态
|
|
|
+ if(workmode == "service"){
|
|
|
+ createList();
|
|
|
+ startLog();
|
|
|
+ setInterval(function() {
|
|
|
+ if (ws.readyState === 3) {
|
|
|
+ startLog();
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ //注册按钮点击事件click touchstart
|
|
|
+ $("button[name]").on("touchstart", onSelectStation);
|
|
|
//设置操作按钮
|
|
|
- $("#gostart").addClass("mui-hidden");
|
|
|
+ //$("#gostart").addClass("mui-hidden");
|
|
|
$("#moving").attr("disabled", true);
|
|
|
$("#start").attr("disabled", true);
|
|
|
+ $("#start_client").attr("disabled", true);
|
|
|
$('#cancel').attr("disabled", true);
|
|
|
/*
|
|
|
//设置页面可以左滑右滑跳转页面
|
|
|
@@ -196,6 +206,34 @@
|
|
|
*/
|
|
|
})
|
|
|
//按钮点击事件
|
|
|
+ function SetConfig() {
|
|
|
+ //获取保存的ip、agvid、mapid等,如果没有数据，则设置为默认
|
|
|
+ if (localStorage.getItem("ip") == "" || localStorage.getItem("ip") == null) {
|
|
|
+ ip = "192.168.1.92:8888";
|
|
|
+ url = "http://192.168.1.92:8888"
|
|
|
+ } else {
|
|
|
+ ip = localStorage.getItem("ip") + ":8888";
|
|
|
+ url = "http://" + localStorage.getItem("ip") + ":8888";
|
|
|
+ }
|
|
|
+ if (localStorage.getItem("agvid") == "" || localStorage.getItem("agvid") == null) {
|
|
|
+ agvid = 1;
|
|
|
+ } else {
|
|
|
+ agvid = parseInt(localStorage.getItem("agvid"))
|
|
|
+ }
|
|
|
+ if (localStorage.getItem("mapid") == "" || localStorage.getItem("mapid") == null) {
|
|
|
+ mapid = "2020032608412704";
|
|
|
+ } else {
|
|
|
+ mapid = localStorage.getItem("mapid")
|
|
|
+ }
|
|
|
+ workmode = localStorage.getItem("workmode");
|
|
|
+ if (workmode == "client") {
|
|
|
+ $("#gostart").addClass("mui-hidden")
|
|
|
+ $("#gostart_client").removeClass("mui-hidden")
|
|
|
+ } else {
|
|
|
+ $("#gostart_client").addClass("mui-hidden")
|
|
|
+ $("#gostart").removeClass("mui-hidden")
|
|
|
+ }
|
|
|
+ }
|
|
|
function onSelectStation(evt) {
|
|
|
var $this = $(this);
|
|
|
if ($("div[id='btlist']").is(':active')) {
|
|
|
@@ -204,16 +242,18 @@
|
|
|
$this.addClass('active');
|
|
|
}
|
|
|
if ($("div[id='btlist']").find(".active").length == 1) {
|
|
|
- $("#moving").attr("disabled", false);
|
|
|
+ //$("#moving").attr("disabled", false);
|
|
|
$this.addClass('up');
|
|
|
- $("#start").removeAttr("disabled");
|
|
|
+ //$("#start").removeAttr("disabled");
|
|
|
$("#cancel").removeAttr("disabled");
|
|
|
} else if ($("div[id='btlist']").find(".active").length == 2) {
|
|
|
- $("#gomoving").addClass("mui-hidden");
|
|
|
- $("#gostart").removeClass("mui-hidden");
|
|
|
+ //$("#gomoving").addClass("mui-hidden");
|
|
|
+ SetConfig();
|
|
|
$this.addClass('down');
|
|
|
$('#start').attr("disabled", false);
|
|
|
+ $("#start_client").attr("disabled", false);
|
|
|
$("#handling").removeAttr("disabled");
|
|
|
+ $("#cancel").removeAttr("disabled");
|
|
|
}
|
|
|
if ($("div[id='btlist']").find(".active").length >= 2) {
|
|
|
$("button[name='stbtn']").css("pointer-events", "none")
|
|
|
@@ -224,15 +264,23 @@
|
|
|
//取消按钮操作
|
|
|
function Reset(evt) {
|
|
|
if ($("div[id='btlist']").find(".active")) {
|
|
|
- $("#gostart").addClass("mui-hidden");
|
|
|
- $("#gomoving").removeClass("mui-hidden");
|
|
|
+ //$("#gostart").addClass("mui-hidden");
|
|
|
+ //$("#gomoving").removeClass("mui-hidden");
|
|
|
$("button[name='stbtn']").removeClass('up');
|
|
|
$("button[name='stbtn']").removeClass('down');
|
|
|
$("button[name='stbtn']").removeClass('active');
|
|
|
$("button[name='stbtn']").css("pointer-events", "auto");
|
|
|
$('#start').attr("disabled", true);
|
|
|
+ $('#start_client').attr("disabled", true);
|
|
|
$('#cancel').attr("disabled", true);
|
|
|
- $('#moving').attr("disabled", true);
|
|
|
+ //$('#moving').attr("disabled", true);
|
|
|
+ if (localStorage.getItem("workmode") == "client") {
|
|
|
+ $("#gostart").addClass("mui-hidden")
|
|
|
+ $("#gostart_client").removeClass("mui-hidden")
|
|
|
+ } else {
|
|
|
+ $("#gostart_client").addClass("mui-hidden")
|
|
|
+ $("#gostart").removeClass("mui-hidden")
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
//移动按钮
|
|
|
@@ -266,6 +314,29 @@
|
|
|
Reset()
|
|
|
})
|
|
|
});
|
|
|
+ //客户端搬运按钮
|
|
|
+ $("#start_client").on("click", function() {
|
|
|
+ var bt_value = [];
|
|
|
+ $("div[id='btlist']").find(".up").each(function(evt) {
|
|
|
+ bt_value.push($(this).val());
|
|
|
+ });
|
|
|
+ $("div[id='btlist']").find(".down").each(function(evt) {
|
|
|
+ bt_value.push($(this).val());
|
|
|
+ });
|
|
|
+ id = Math.round(new Date().getTime()/1000).toString();
|
|
|
+ var s = parseInt(bt_value[0])
|
|
|
+ var d = parseInt(bt_value[1])
|
|
|
+ var strone = {
|
|
|
+ "t": "AddTsk",
|
|
|
+ "id": id,
|
|
|
+ "s": s,
|
|
|
+ "d": d
|
|
|
+ }
|
|
|
+ var ss = JSON.stringify(strone)
|
|
|
+ $.post("http://192.168.0.121:8899", ss);
|
|
|
+ mui.toast("任务发送成功...")
|
|
|
+ Reset()
|
|
|
+ });
|
|
|
function AddTransTask(agvid, from, to, callback) {
|
|
|
$.post(url + "/task", {
|
|
|
id: agvid,
|
|
|
@@ -323,10 +394,43 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- $btlist.append(trs);
|
|
|
- //注册按钮点击事件click touchstart
|
|
|
- $("button[name]").on("touchstart", onSelectStation);
|
|
|
- });
|
|
|
+ if (localStorage.getItem("workmode") == "client") {
|
|
|
+ $(".client").removeClass("mui-hidden")
|
|
|
+ } else {
|
|
|
+ $(".client").addClass("mui-hidden")
|
|
|
+ $btlist.append(trs);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //新建ws连接，获取agv的状态
|
|
|
+ let ws;
|
|
|
+ function startLog() {
|
|
|
+ ws = new WebSocket("ws://" + ip + "/ws/msg/" + agvid);
|
|
|
+ ws.onmessage = function(e) {
|
|
|
+ let result;
|
|
|
+ let msg = JSON.parse(e.data);
|
|
|
+ switch (msg.type) {
|
|
|
+ case msgTypeStatus:
|
|
|
+ // 每秒一次状态
|
|
|
+ let stMap = JSON.parse(msg.data);
|
|
|
+ //根据状态设置图标等
|
|
|
+ showStatusValue(stMap);
|
|
|
+ //当前站点按钮文字闪烁
|
|
|
+ if (agvid == msg.id) {
|
|
|
+ let stMap = JSON.parse(msg.data);
|
|
|
+ $("#agvstatus").toggleClass("text-success");
|
|
|
+ $(".mui-btn").removeClass("text-success");
|
|
|
+ $("#" + stMap.Station + "").addClass("text-success");
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ //读取设置状态，可以获得电池伏数
|
|
|
+ case msgTypeGetCfg:
|
|
|
+ //console.log(msg.type, msg.data);
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ //console.log(msg.type, msg.data);
|
|
|
+ }
|
|
|
+ };
|
|
|
}
|
|
|
//根据获取到的agv状态，设置速度、电量、站点、顶升、提示信息、运行按钮等的颜色和文字显示
|
|
|
function showStatusValue(status) {
|
|
|
@@ -473,9 +577,11 @@
|
|
|
}
|
|
|
};
|
|
|
$(function() {
|
|
|
- GetTransTask(agvid, function (d) {
|
|
|
- console.log("GetTransTask: ", d)
|
|
|
- });
|
|
|
+ if(workmode == "service"){
|
|
|
+ GetTransTask(agvid, function (d) {
|
|
|
+ console.log("GetTransTask: ", d)
|
|
|
+ });
|
|
|
+ }
|
|
|
})
|
|
|
function GetTransTask(agvid, callback) {
|
|
|
$.post(url + "/task/get", {
|
