<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8">
|
<title>储位图例</title>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
|
<style type="text/css">
|
.layouts {
|
display: flex;
|
}
|
.layui-card-header {
|
border-bottom: 1px solid #C9C5C5;
|
}
|
/* ******************************************** */
|
|
#tab{
|
border: 1px solid black ;
|
border-collapse: separate;
|
border-spacing: 2;
|
padding: 3px;
|
}
|
table td{
|
border: 3px solid white;
|
/* width: 35px;
|
height: 45px;
|
|
background-color: red;
|
text-align: center; */
|
|
}
|
.btncls{
|
width: 30px;
|
height: 40px;
|
line-height: 20px;
|
}
|
.divcls{
|
box-shadow: 2px 2px 1px #888888;
|
border-radius: 2px;
|
}
|
.textSty{
|
color: black;
|
text-align: center;
|
word-break: break-all; word-wrap:break-word;
|
}
|
.zero{
|
background-color:#5470c6;
|
Opacity:.8;
|
}
|
.one{
|
background-color:#91cc75;
|
Opacity:.8;
|
}
|
.two{
|
background-color:#ffdc60;
|
}
|
.three{
|
background-color:#ee6666;
|
Opacity:.8;
|
}
|
.four{
|
background-color:#ffff7f;/*#ffff7f*/
|
Opacity:.8;
|
}
|
.five{
|
background-color:#ee23ee;
|
/* background-color:#9dee77; */
|
Opacity:.8;
|
}
|
/* .six{
|
background-color:#ee23ee;
|
Opacity:.8;
|
}
|
.seven{
|
background-color:#eea6c0;
|
Opacity:.8;
|
} */
|
.eight{
|
background-color:#adacac;
|
}
|
.btnShow{
|
width: 20px;
|
height: 15px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="layui-fluid" style="padding-bottom: 0;">
|
<div class="layui-card">
|
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
|
<div class="layui-form-item">
|
<div class="layui-inline">
|
<label class="layui-form-label">层</label>
|
<div class="layui-input-inline">
|
<select name="SlotLayer" id="SlotLayer" lay-filter="SelectLayer">
|
<option value="1">一层</option>
|
<option value="2">二层</option>
|
|
</select>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-card-body">
|
|
<div class="layouts">
|
<!-- 左边图 -->
|
<div id="chartMap1" style="width:66%;height:86vh; display: flex; justify-content: space-around;">
|
<div>
|
<table id="tab"></table>
|
</div>
|
<div>
|
<table>
|
<tr>
|
<td><button class="btnShow" disabled></button></td>
|
<td>跑道</td>
|
</tr>
|
<tr>
|
<td><button class="btnShow eight" disabled></button></td>
|
<td>已屏蔽</td>
|
</tr>
|
<!-- <tr>
|
<td><button class="btnShow six" disabled></button></td>
|
<td>空托跺</td>
|
</tr> -->
|
<tr>
|
<td><button class="btnShow five" disabled></button></td>
|
<td>移出中</td>
|
</tr>
|
<tr>
|
<td><button class="btnShow four" disabled></button></td>
|
<td>移入中</td>
|
</tr>
|
<tr>
|
<td><button class="btnShow three" disabled></button></td>
|
<td>出库中</td>
|
</tr>
|
<tr>
|
<td><button class="btnShow two" disabled></button></td>
|
<td>入库中</td>
|
</tr>
|
<tr>
|
<td><button class="btnShow one" disabled></button></td>
|
<td>有物品</td>
|
</tr>
|
<tr>
|
<td><button class="btnShow zero" disabled></button></td>
|
<td>空库位</td>
|
</tr>
|
</table>
|
</div>
|
|
</div>
|
<!-- 右边图 -->
|
<div id="chartMap2" style="width:34%;height:87vh; border-left: 1px solid #C9C5C5;"></div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
<script src="../../layuiadmin/layui/layui.js"></script>
|
<script src="../../js/public.js"></script>
|
<script src="../../js/jquery-3.5.1.min.js"></script>
|
<script src="../../js/jquery.cookie.js"></script>
|
<script src="../../js/echarts.min.js"></script>
|
<script>
|
var uid = $.cookie('userId');
|
if (uid == null) {
|
alert('请登录后操作');
|
window.parent.location.href = '../Login.html'
|
}
|
layui.config({
|
base: '../../layuiadmin/' //静态资源所在路径
|
}).extend({
|
index: 'lib/index' //主入口模块
|
}).use(['index', 'table', 'laypage', 'layer'], function () {
|
var table = layui.table,
|
form = layui.form,
|
laypage = layui.laypage,
|
layer = layui.layer,
|
$ = layui.$;
|
|
var cengShu = "1";
|
var dom = $('#LAY_app_tabsheader', parent.document).children()//.find(s=>s.s.nodeType == 1 && className == "layui-this")
|
|
setInterval(() => {
|
for (let i = 0; i < dom.length; i++) {
|
const e = dom[i];
|
if (e.getAttribute("class") == "layui-this" && e.getAttribute("lay-id") == "EquipmentManage/Roadway.html") {
|
GetSlotVm(cengShu);
|
// GetSlotChart(cengShu);
|
}
|
}
|
}, 5000);
|
|
|
|
// 查询事件
|
GetSlotVm(cengShu);
|
// GetSlotChart(cengShu);
|
form.on('select(SelectLayer)', function(data){
|
// console.log(data.elem); //得到select原始DOM对象
|
// console.log(data.value); //得到被选中的值
|
// console.log(data.othis); //得到美化后的DOM对象
|
cengShu = data.value;
|
GetSlotVm(data.value);
|
// GetSlotChart(data.value);
|
});
|
//获取数据渲染库位图
|
function GetSlotVm(ceng) {
|
console.log(ceng);
|
var item = {
|
layer:ceng
|
};
|
sendData(IP + "/Bord/GetSlotVm", item, 'get', function (res) {
|
|
if (res.code == 0) {
|
$("#tab").html("");
|
var html = '';
|
var list = res.data;
|
var slots = list.SlotsVm;
|
for (let i = list.Col; i > 0; i--) {
|
html += '<tr >';
|
for (let k = 1; k <= list.Row; k++) {
|
var statu = slots.find(r=> r.SlotColumn==i && r.SlotRow == k);
|
|
var d = "";
|
var s ="eight";
|
if (statu != undefined) {
|
s= statu.SlotStatusCls;
|
d = statu.SlotCode;
|
if (statu.Make =="02") {
|
html +='<td><button val='+d+' class="btncls " disabled></button></td>'
|
} else {
|
var lie=d.substr(2,2);
|
var hang=d.substr(0,2);
|
console.log(lie);
|
console.log(hang);
|
html +='<td><div val='+d+' class="btncls divcls textSty '+ s +'" >'+lie+'<br/>'+hang+'</div></td>'
|
}
|
|
|
}else{
|
html +='<td></td>'
|
}
|
}
|
html +='</tr>';
|
|
}
|
$("#tab").append(html);
|
$(".btncls").mouseover(function () {
|
var codes = $(this).attr("val")
|
console.log(codes);
|
var params={
|
code:codes
|
}
|
var ss = this;
|
// sendData(IP + "/Bord/GetStockMsgBySlot", params, 'post', function (res) {
|
// if (res.code == 1) {
|
// console.log(res.data);
|
// if (res.data != "") {
|
// // layer.tips(res.data, ss);
|
// layer.msg(res.data, {
|
// // icon: 1,
|
// time: 3000
|
// })
|
// }
|
|
// }
|
// });
|
|
});
|
} else {
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000
|
}, function () { })
|
}
|
});
|
}
|
|
// 加载仓库图例
|
function GetSlotChart(warehouseId) {
|
var items = {
|
slotLayer: warehouseId,
|
};
|
var index = document.getElementById("SlotLayer").selectedIndex;//获取当前选择项的索引.
|
var LayerName = document.getElementById("SlotLayer").options[index].text;
|
sendData(IP + "/Bord/GetSlotList", items, 'post', function (res) {
|
|
if (res.code == 1) {
|
var list = res.data;
|
var key = [];
|
var value = [];
|
for (var i in list) {
|
key.push(i)
|
value.push(list[i])
|
}
|
this.chartLine2 = echarts.init(document.getElementById("chartMap2"));
|
var option2 = {
|
title: {
|
text: LayerName,
|
left: 'center',
|
// top: '15.5%'
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
//formatter: '{a} <br/>{b} ({d}%)'
|
},
|
legend: {
|
orient: 'vertical',
|
left: 'left'
|
},
|
series: [{
|
name: '储位数量及占比',
|
type: 'pie',
|
radius: '85%',
|
data: [{ value: value[0], name: key[0] },
|
{ value: value[1], name: key[1] },
|
{ value: value[2], name: key[2] },
|
{ value: value[3], name: key[3] },
|
{ value: value[4], name: key[4] },
|
{ value: value[5], name: key[5] },
|
{ value: value[6], name: key[6] },
|
{ value: value[7], name: key[7] },
|
{ value: value[8], name: key[8] },
|
],
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(255, 0, 0, 0.5)'
|
}
|
}
|
}],
|
|
|
};
|
this.chartLine2.setOption(option2);
|
|
} else {
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000
|
}, function () { })
|
}
|
});
|
|
};
|
|
});
|
</script>
|
</body>
|
|
</html>
|
