<!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">
|
html,
|
body {
|
height: 100%;
|
width: 100%;
|
}
|
.layouts {
|
display: flex;
|
}
|
|
/* ******************************************** */
|
|
#tab {
|
border-collapse: separate;
|
border-spacing: 2;
|
padding: 3px;
|
}
|
|
table td {
|
border: 3px solid white;
|
}
|
|
.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;
|
Opacity: .8;
|
}
|
|
.five {
|
background-color: #ee23ee;
|
Opacity: .8;
|
}
|
|
.filg {
|
background-color: #808080;
|
Opacity: .8;
|
}
|
|
|
.btnShow {
|
width: 17px;
|
height: 15px;
|
cursor: pointer;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="layui-fluid" style="height: 96%;width: 99%;">
|
<div class="layui-row layui-col-space15" style="height: 100%;">
|
<!-- 上 -->
|
<div class="layui-col-md" style="height: 50%;">
|
<div class="layui-card" style="height: 100%;">
|
<div style="height: 20%;">
|
<div class="layui-card-body">
|
<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" style="width: 60px;">所属仓库</label>
|
<div class="layui-input-inline">
|
<select name="WareHouseNo" id="WareHouseNo" lay-filter="getWareHouseNo" lay-search>
|
<!-- <option value=""></option> -->
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline">
|
<label class="layui-form-label" style="width: 60px;">所属巷道</label>
|
<div class="layui-input-inline">
|
<select name="RoadwayNo" id="RoadwayNo" lay-filter="getRoadwayNo" lay-search>
|
<!-- <option value=""></option> -->
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline">
|
<label class="layui-form-label">排</label>
|
<div class="layui-input-inline">
|
<select name="Row" id="Row" lay-filter="SelectRow">
|
<!-- <option value="1">第一排</option>
|
<option value="2">第二排</option> -->
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline">
|
<label class="layui-form-label">深度</label>
|
<div class="layui-input-inline">
|
<select name="Depth" id="Depth" lay-filter="SelectDepth">
|
<option value="01" selected>深度1</option>
|
<option value="02">深度2</option>
|
</select>
|
</div>
|
</div>
|
<!-- //定时自刷新库位图例 -->
|
<div class="layui-inline" style="float: right;">
|
<label class="layui-form-label" style="margin-top: 10px;">自动刷新</label>
|
<div class="layui-input-inline" style="width: auto;">
|
<input type="checkbox" checked="" id="autoRefresh" lay-skin="switch" lay-filter="switchTest" lay-text="开|关">
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="height: 75%;">
|
<!-- 储位图例 -->
|
<table style="margin:0 auto;">
|
<tr>
|
<td><button class="btnShow zero" disabled></button></td>
|
<td>空库位</td>
|
<td><button class="btnShow one" disabled></button></td>
|
<td>有物品</td>
|
<td><button class="btnShow two" disabled></button></td>
|
<td>入库中</td>
|
<td><button class="btnShow three" disabled></button></td>
|
<td>出库中</td>
|
<td><button class="btnShow four" disabled></button></td>
|
<td>移入中</td>
|
<td><button class="btnShow five" disabled></button></td>
|
<td>移出中</td>
|
<td><button class="btnShow filg" disabled></button></td>
|
<td>损坏\屏蔽</td>
|
</tr>
|
</table>
|
<table id="tab" style="width: 100%;height: 90%;"></table>
|
</div>
|
</div>
|
</div>
|
<!-- 下 -->
|
<div class="layui-col-md" style="height: 50%;">
|
<div class="layui-row layui-col-space15" style="height: 100%;">
|
<div class="layui-col-md6" style="height: 100%;">
|
<div class="layui-card" style="height: 100%;">
|
<div class="layui-card-body" id="body">
|
<!-- 巷道柱状图 -->
|
<div class="layui-carousel layadmin-carousel layadmin-dataview">
|
<div id="zhu" style="height: 100%; margin: 0; "></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-col-md6" style="height: 100%;">
|
<div class="layui-card" style="height: 100%;">
|
<div class="layui-card-body" id="body">
|
<!-- 储位状态占比 -->
|
<div class="layui-carousel layadmin-carousel layadmin-dataview">
|
<div id="yuan" style="height: 100%; margin: 0; "></div>
|
</div>
|
</div>
|
</div>
|
</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")
|
var xianga = "";
|
var xiangb = "";
|
|
//获取仓库下拉框信息
|
synData(IP + "/Sys/GetWarehouseDic", {}, 'get', function (res) {
|
if (res.code == 0) { //成功
|
for (var i = 0; i < res.data.length; i++) {
|
// 只加载立体库
|
// console.log(res.data[i].type);
|
if (res.data[i].Type != "1") {
|
continue;
|
}
|
|
$("#WareHouseNo").append('<option value =' + res.data[i].WareHouseNo + '>' + res.data[i].WareHouseNo + '-' +
|
res.data[i].WareHouseName + '</option>');
|
}
|
$("#WareHouseNo option[value='" + res.data[0].WareHouseNo + "']").attr("selected", "selected")
|
form.render('select');
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
getRoadway(); //获取仓库巷道
|
getRow(); //获取巷道中排
|
//funDepth(); //获取排的深度
|
GetSlotVm($("#WareHouseNo").val(), $("#RoadwayNo").val(), $("#Row").val(), $("#Depth").val()); //获取数据渲染库位图
|
GetSlotChart($("#WareHouseNo").val()); //获取圆形信息
|
GetSlotChartz($("#WareHouseNo").val(), $("#RoadwayNo").val()) //获取柱状信息
|
|
|
// 查询事件
|
//仓库变更
|
form.on('select(getWareHouseNo)', function (data) {
|
getRoadway() //获取仓库巷道
|
});
|
//巷道变更
|
form.on('select(getRoadwayNo)', function (data) {
|
if (data.value == "R01")
|
{
|
xianga = "巷道1排";
|
xiangb = "巷道2排";
|
$("#Row").empty();//清空上一个查询下拉值
|
$("#Row option[value ='1']").attr("selected", "selected")
|
$("#Row").append('<option value =1>第1排</option>');
|
$("#Row").append('<option value =2>第2排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R02")
|
{
|
xianga = "巷道3排";
|
xiangb = "巷道4排";
|
$("#Row").empty();//清空上一个查询下拉值
|
$("#Row option[value ='3']").attr("selected", "selected")
|
$("#Row").append('<option value =3>第3排</option>');
|
$("#Row").append('<option value =4>第4排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R03")
|
{
|
|
xianga = "巷道5排";
|
xiangb = "巷道6排";
|
$("#Row").empty();//清空上一个查询下拉值
|
$("#Row option[value ='5']").attr("selected", "selected")
|
$("#Row").append('<option value =5>第5排</option>');
|
$("#Row").append('<option value =6>第6排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R04")
|
{
|
|
xianga = "巷道7排";
|
xiangb = "巷道8排";
|
$("#Row").empty();//清空上一个查询下拉值
|
$("#Row option[value ='7']").attr("selected", "selected")
|
$("#Row").append('<option value =7>第7排</option>');
|
$("#Row").append('<option value =8>第8排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R05")
|
{
|
|
xianga = "巷道9排";
|
xiangb = "巷道10排";
|
$("#Row").empty();//清空上一个查询下拉值
|
$("#Row option[value ='9']").attr("selected", "selected")
|
$("#Row").append('<option value =9>第9排</option>');
|
$("#Row").append('<option value =10>第10排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R06")
|
{
|
|
xianga = "巷道11排";
|
xiangb = "巷道12排";
|
$("#Row").empty();//清空上一个查询下拉值
|
$("#Row option[value ='11']").attr("selected", "selected")
|
$("#Row").append('<option value =11>第11排</option>');
|
$("#Row").append('<option value =12>第12排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R07")
|
{
|
|
xianga = "巷道13排";
|
xiangb = "巷道14排";
|
$("#Row").empty();//清空上一个查询下拉值
|
$("#Row option[value ='13']").attr("selected", "selected")
|
$("#Row").append('<option value =13>第13排</option>');
|
$("#Row").append('<option value =14>第14排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R08")
|
{
|
|
xianga = "巷道15排";
|
xiangb = "巷道16排";
|
$("#Row").empty();//清空上一个查询下拉值
|
$("#Row option[value ='15']").attr("selected", "selected")
|
$("#Row").append('<option value =15>第15排</option>');
|
$("#Row").append('<option value =16>第16排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R09")
|
{
|
|
xianga = "巷道17排";
|
xiangb = "巷道18排";
|
$("#Row").empty();//清空上一个查询下拉值
|
$("#Row option[value ='17']").attr("selected", "selected")
|
$("#Row").append('<option value =17>第17排</option>');
|
$("#Row").append('<option value =18>第18排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R10")
|
{
|
|
xianga = "巷道19排";
|
xiangb = "巷道20排";
|
$("#Row").empty();//清空上一个查询下拉值
|
$("#Row option[value ='19']").attr("selected", "selected")
|
$("#Row").append('<option value =19>第19排</option>');
|
$("#Row").append('<option value =20>第20排</option>');
|
form.render('select');
|
}
|
getRow(); //获取巷道中排
|
GetSlotChartz($("#WareHouseNo").val(), $("#RoadwayNo").val()); //获取柱状信息
|
GetSlotVm($("#WareHouseNo").val(), $("#RoadwayNo").val(), $("#Row").val(), $("#Depth").val());
|
})
|
//排变更
|
form.on('select(SelectRow)', function (data) {
|
//funDepth(); //获取排中深度
|
});
|
//深度变更
|
form.on('select(SelectDepth)', function (data) {
|
GetSlotVm($("#WareHouseNo").val(), $("#RoadwayNo").val(), $("#Row").val(), $("#Depth").val()); //获取数据渲染库位图
|
});
|
// 获取巷道中排
|
function getRow()
|
{
|
$("#Row").empty();//清空上一个查询下拉值
|
synData(IP + "/Sys/ByRoadwayGetRow", { warehouseNo:$("#WareHouseNo").val(), roadwayNo: $("#RoadwayNo").val() }, 'get', function (res) {
|
// console.log(res)
|
if (res.code == 0) { //成功
|
for (var i = 0; i < res.data.length; i++) {
|
$("#Row").append('<option value =' + res.data[i] + '>' + '巷道' + res.data[i] + '排' + '</option>');
|
}
|
$("#Row option[value='" + res.data[0] + "']").attr("selected", "selected")
|
form.render('select');
|
//funDepth(); //获取深度
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
}
|
// 获取排的深度
|
function funDepth()
|
{
|
synData(IP + "/Sys/GetRowDepth", {row: $("#Row").val() }, 'get', function (res) {
|
if (res.code == 0) {
|
$("#Depth").empty();//清空上一个查询下拉值
|
for (var i = 0; i < res.data.length; i++) {
|
$("#Depth").append('<option value =' + res.data[i] + '>' + '深度' + res.data[i] + '</option>');
|
}
|
$("#Depth option[value='" + res.data[0] + "']").attr("selected", "selected")
|
form.render('select');
|
GetSlotVm($("#WareHouseNo").val(), $("#RoadwayNo").val(), $("#Row").val(), $("#Depth").val()); //获取数据渲染库位图
|
}
|
})
|
}
|
|
//获取仓库巷道
|
function getRoadway() {
|
$("#RoadwayNo").empty();//清空上一个查询下拉值
|
synData(IP + "/Sys/GetRoadwayList", { WareHouseNo: $("#WareHouseNo").val() }, 'get', function (res) {
|
// console.log(res)
|
if (res.code == 0) { //成功
|
|
for (var i = 0; i < res.data.length; i++) {
|
$("#RoadwayNo").append('<option value =' + res.data[i].RoadwayNo + '>' + res.data[i].RoadwayNo + '-' +
|
res.data[i].RoadwayName + '</option>');
|
}
|
$("#RoadwayNo option[value='" + res.data[0].RoadwayNo + "']").attr("selected", "selected")
|
$("#Depth option[value ='01']").attr("selected", "selected")
|
form.render('select');
|
if ($("#RoadwayNo").val() == "R01")
|
{
|
xianga = "巷道1排";
|
xiangb = "巷道2排";
|
$("#Row option[value ='1']").attr("selected", "selected")
|
$("#Row").append('<option value =1>第1排</option>');
|
$("#Row").append('<option value =2>第2排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R02")
|
{
|
xianga = "巷道3排";
|
xiangb = "巷道4排";
|
$("#Row option[value ='3']").attr("selected", "selected")
|
$("#Row").append('<option value =3>第3排</option>');
|
$("#Row").append('<option value =4>第4排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R03")
|
{
|
|
xianga = "巷道5排";
|
xiangb = "巷道6排";
|
$("#Row option[value ='5']").attr("selected", "selected")
|
$("#Row").append('<option value =5>第5排</option>');
|
$("#Row").append('<option value =6>第6排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R04")
|
{
|
|
xianga = "巷道7排";
|
xiangb = "巷道8排";
|
$("#Row option[value ='7']").attr("selected", "selected")
|
$("#Row").append('<option value =7>第7排</option>');
|
$("#Row").append('<option value =8>第8排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R05")
|
{
|
|
xianga = "巷道9排";
|
xiangb = "巷道10排";
|
$("#Row option[value ='9']").attr("selected", "selected")
|
$("#Row").append('<option value =9>第9排</option>');
|
$("#Row").append('<option value =10>第10排</option>');
|
form.render('select');
|
}
|
else if ($("#RoadwayNo").val() == "R06")
|
{
|
|
xianga = "巷道11排";
|
xiangb = "巷道12排";
|
$("#Row option[value ='11']").attr("selected", "selected")
|
$("#Row").append('<option value =11>第11排</option>');
|
$("#Row").append('<option value =12>第12排</option>');
|
form.render('select');
|
}
|
getRow(); //获取排
|
GetSlotChartz($("#WareHouseNo").val(), $("#RoadwayNo").val()); //获取柱状信息
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
|
}
|
|
//获取数据渲染库位图
|
function GetSlotVm(houseNo, roadway, row, depth) {
|
var param = {
|
WareHouseNo: houseNo,
|
roadway: roadway,
|
Row: row,
|
Depth: depth
|
}
|
sendData(IP + "/Sys/GetStorageLocatLists", param, 'get', function (res) {
|
// console.log(res)
|
if (res.code == 0) {
|
$("#tab").html("");
|
var html = '';
|
var list = res.data;
|
//按层渲染
|
debugger
|
for (let i = res.maxlayer; i > 0; i--) {
|
|
html += '<tr style="height:10px;">';
|
html += '<td><p>' + i + '</p></td>';
|
//找出每一层的库位
|
for (let a = 1; a <= res.maxcolumn; a++) {
|
|
var statu = list.find(r => r.Column == a && r.Layer == i);
|
|
if (statu != undefined) {
|
//判断储位标识是否为0
|
if(statu.Flag != '0')
|
{
|
html += '<td><button value=' + statu.LocatNo + ' class="btnShow filg" ></button></td>'
|
continue;
|
}
|
//空储位 0
|
if (statu.Status == 0) {
|
html += '<td><button value=' + statu.LocatNo + ' class="btnShow zero" ></button></td>'
|
continue;
|
}
|
//有物品 1
|
if (statu.Status == 1) {
|
html += '<td><button value=' + statu.LocatNo + ' class="btnShow one" ></button></td>'
|
continue;
|
}
|
//入库中 2
|
if (statu.Status == 2) {
|
html += '<td><button value=' + statu.LocatNo + ' class="btnShow two" ></button></td>'
|
continue;
|
}
|
//出库中 3
|
if (statu.Status == 3) {
|
html += '<td><button value=' + statu.LocatNo + ' class="btnShow three" ></button></td>'
|
continue;
|
}
|
//移入中 4
|
if (statu.Status == 4) {
|
html += '<td><button value=' + statu.LocatNo + ' class="btnShow four"></button></td>'
|
}
|
//移出中 5
|
if (statu.Status == 5) {
|
html += '<td><button value=' + statu.LocatNo + ' class="btnShow five"></button></td>'
|
}
|
|
} else {
|
html += '<td></td>'
|
}
|
|
}
|
let num = 0;
|
if (i == 1) {
|
var numlayer = 0;
|
htmltd = '<tr style="height:10px;"><td></td>'
|
|
//循环进行查找最多列的一层
|
for (let aa = 0; aa < res.maxcolumn; aa++) {
|
num = Number(num) + 1;
|
htmltd += '<td><p> ' + num + '</p></td>'
|
}
|
|
htmltd += '</tr>'
|
html += htmltd;
|
}
|
html += '</tr>';
|
}
|
$("#tab").append(html);
|
} else {
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000
|
}, function () { })
|
}
|
});
|
}
|
|
|
// 加载仓库图例
|
//圆
|
function GetSlotChart1(warehouseNo) {
|
|
sendData(IP + "/Sys/GetStorageProportion?WareHouseNo=" + warehouseNo, {}, 'get', function (res) {
|
// console.log("园数据",res)
|
if (res.code == 0) {
|
var LayerName = res.data[0].warehouseNo;
|
|
var list = res.data;
|
//0：空储位 1：有物品 2：入库中 3：出库中 4：移入中 5：移出中 6: 损坏\屏蔽
|
var key = ['空储位', '有物品', '入库中', '出库中','移入中','移出中', '损坏\屏蔽'];
|
var value = [0,0,0,0,0,0,0];
|
list.forEach(item => {
|
value[item.Status] = item.StatusNum;
|
});
|
|
this.chartLine2 = echarts.init(document.getElementById("yuan"));
|
var option2 = {
|
color: [
|
'#5470c6',
|
'#91cc75',
|
'#ffdc60',
|
'#ee6666',
|
'#ffff7f',
|
'#ee23ee',
|
'#808080',
|
],
|
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] }, //损坏\屏蔽
|
],
|
// 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 () { })
|
}
|
});
|
|
};
|
//新版圆形图
|
function GetSlotChart(warehouseNo) {
|
sendData(IP + "/Sys/GetStorageProportion?WareHouseNo=" + warehouseNo, {}, 'get', function (res) {
|
// console.log("圆数据",res)
|
if (res.code == 0) {
|
// console.log("圆数据",res.data)
|
var LayerName = res.data[0].warehouseNo;
|
|
var list = res.data;
|
//0：空储位 1：有物品 2：入库中 3：出库中 4：移入中 5：移出中 6: 损坏\屏蔽
|
var key = ['空储位', '有物品', '入库中', '出库中','移入中','移出中', '损坏/屏蔽'];
|
var value = [0,0,0,0,0,0,0];
|
list.forEach(item => {
|
value[item.Status] = item.StatusNum;
|
});
|
// console.log(value)
|
|
this.chartLine2 = echarts.init(document.getElementById("yuan"));
|
|
var option2 = {
|
tooltip: { //弹出信息
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
},
|
legend: { //左侧信息
|
top:'5%',
|
orient: 'vertical',
|
left: 'left'
|
},
|
series: [
|
{ //中心图
|
type: 'pie',
|
radius: [0, '30%'],
|
label: {
|
position: 'inner',
|
fontSize: 35,
|
},
|
title:'12',
|
},
|
{ //侧边图
|
color: [ //颜色
|
'#5470c6', //空储位
|
'#91cc75', //有物品
|
'#ffdc60', //入库中
|
'#ee6666', //出库中
|
'#ffff7f', //移入中
|
'#ee23ee', //移出中
|
'#808080', //损坏/屏蔽
|
],
|
name: '储位状态',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
label: { //是否显示外部线条信息
|
show: false,
|
position: 'center'
|
},
|
emphasis: { //鼠标移入是否中间显示信息
|
label: {
|
show: true,
|
fontSize: 20,
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: { //标签线条
|
show: false
|
},
|
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: 1048, name: '空储位' },
|
// { value: 735, name: '有物品' },
|
// { value: 580, name: '入库中' },
|
// { value: 484, name: '出库中' },
|
// { value: 484, name: '移入中' },
|
// { value: 484, name: '移出中' },
|
// { value: 300, name: '损坏/屏蔽' }
|
]
|
},
|
],
|
};
|
|
this.chartLine2.setOption(option2);
|
|
} else {
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000
|
}, function () { })
|
}
|
});
|
};
|
// option = {
|
// tooltip: { //弹出信息
|
// trigger: 'item',
|
// formatter: '{a} <br/>{b}: {c} ({d}%)'
|
// },
|
// legend: { //左侧信息
|
// top:'5%',
|
// orient: 'vertical',
|
// left: 'left'
|
// },
|
// series: [
|
// //中心图
|
// {
|
// type: 'pie',
|
// radius: [0, '30%'],
|
// label: {
|
// position: 'inner',
|
// fontSize: 35,
|
// },
|
// title:'12',
|
// },
|
// {
|
// color: [
|
// '#5470c6', //空储位
|
// '#91cc75', //有物品
|
// '#ffdc60', //入库中
|
// '#ee6666', //出库中
|
// '#ffff7f', //移入中
|
// '#ee23ee', //移出中
|
// '#808080', //损坏/屏蔽
|
// ],
|
// name: '储位状态',
|
// type: 'pie',
|
// radius: ['40%', '70%'],
|
// avoidLabelOverlap: false,
|
// itemStyle: {
|
// borderRadius: 10,
|
// borderColor: '#fff',
|
// borderWidth: 2
|
// },
|
// label: { //是否显示外部线条信息
|
// show: false,
|
// position: 'center'
|
// },
|
// emphasis: { //鼠标移入是否中间显示信息
|
// label: {
|
// show: true,
|
// fontSize: 40,
|
// fontWeight: 'bold'
|
// }
|
// },
|
// labelLine: { //标签线条
|
// show: false
|
// },
|
// data: [
|
// { value: 1048, name: '空储位' },
|
// { value: 735, name: '有物品' },
|
// { value: 580, name: '入库中' },
|
// { value: 484, name: '出库中' },
|
// { value: 484, name: '移入中' },
|
// { value: 484, name: '移出中' },
|
// { value: 300, name: '损坏/屏蔽' }
|
// ]
|
// }
|
// ]
|
// };
|
//柱
|
function GetSlotChartz(warehouseNo, roadwayNo) {
|
|
sendData(IP + "/Sys/GetStorageProportion1?WareHouseNo=" + warehouseNo + "&&RoadwayNo=" + roadwayNo, {}, 'get', function (res) {
|
if (res.code == 0) {
|
|
var list = res.data;
|
//0：空储位 1：有物品 2：入库中 3：出库中 4：移入中 5：移出中 6：损坏\屏蔽
|
var key = ['空储位', '有物品', '入库中', '出库中','移入中','移出中','损坏\屏蔽'];
|
this.chartLine2 = echarts.init(document.getElementById("zhu"));
|
//巷道
|
var roarylist = [xianga, xiangb];
|
//各储位状态数量
|
var status0 = [];
|
var status1 = [];
|
var status2 = [];
|
var status3 = [];
|
var status4 = [];
|
var status5 = [];
|
var status6 = [];
|
//获取
|
//总
|
for (var i = 0; i < list.length; i++) {
|
if (list[i].Status == '0') {
|
status0.push(list[i].StatusNum)
|
}
|
if (list[i].Status == '1') {
|
status1.push(list[i].StatusNum)
|
}
|
if (list[i].Status == '2') {
|
status2.push(list[i].StatusNum)
|
}
|
if (list[i].Status == '3') {
|
status3.push(list[i].StatusNum)
|
}
|
if (list[i].Status == '4') {
|
status4.push(list[i].StatusNum)
|
}
|
if (list[i].Status == '5') {
|
status5.push(list[i].StatusNum)
|
}
|
if (list[i].Status == '6') {
|
status6.push(list[i].StatusNum)
|
}
|
}
|
if (status0.length == 0)
|
{
|
status0.push(0)
|
status0.push(0)
|
}
|
else
|
{
|
status0.push(0)
|
}
|
if (status1.length == 0)
|
{
|
status1.push(0)
|
status1.push(0)
|
}
|
else
|
{
|
status1.push(0)
|
}
|
if (status2.length == 0)
|
{
|
status2.push(0)
|
status2.push(0)
|
}
|
else
|
{
|
status2.push(0)
|
}
|
if (status3.length == 0)
|
{
|
status3.push(0)
|
status3.push(0)
|
}
|
else
|
{
|
status3.push(0)
|
}
|
if (status4.length == 0)
|
{
|
status4.push(0)
|
status4.push(0)
|
}
|
else
|
{
|
status4.push(0)
|
}
|
if (status5.length == 0)
|
{
|
status5.push(0)
|
status5.push(0)
|
}
|
else
|
{
|
status5.push(0)
|
}
|
if (status6.length == 0)
|
{
|
status6.push(0)
|
status6.push(0)
|
}
|
else
|
{
|
status6.push(0)
|
}
|
// console.log('status0:'+status0,'status1:'+status1,'status2:'+status2,'status3:'+status3)
|
option2 = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
// legend: { //顶部列表
|
// data: ['空储位','有物品','入库中','出库中','移入中','移出中']
|
// },
|
xAxis: [
|
{
|
type: 'category',
|
axisTick: { show: false },
|
data: roarylist
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '空储位',
|
type: 'bar',
|
barGap: 0,
|
color: '#5470c6',
|
//label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: status0
|
},
|
{
|
name: '有物品',
|
type: 'bar',
|
color: '#91cc75',
|
//label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: status1
|
},
|
{
|
name: '入库中',
|
type: 'bar',
|
color: '#ffdc60',
|
//label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: status2
|
},
|
{
|
name: '出库中',
|
type: 'bar',
|
color: '#ee6666',
|
//label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: status3
|
},
|
{
|
name: '移入中',
|
type: 'bar',
|
color: '#ffff7f',
|
//label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: status4
|
},
|
{
|
name: '移出中',
|
type: 'bar',
|
color: '#ee23ee',
|
//label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: status5
|
},
|
{
|
name: '损坏\屏蔽',
|
type: 'bar',
|
color: '#808080',
|
//label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: status6
|
}
|
]
|
};
|
|
this.chartLine2.setOption(option2);
|
|
} else {
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000
|
}, function () { })
|
}
|
});
|
|
};
|
|
//#region 点击储位btn按钮查看储位上信息
|
var tipsVal;
|
// 1.找到触发的事件对象（绑定全局） 2.事件处理程序
|
$('body').on('click','.btnShow', function () {
|
var html;
|
var that=this;
|
var locatNo = $(that)[0].value;
|
var className=$(that)[0].className;
|
if(className=='btnShow zero'){
|
html = "<p style='word-wrap:break-word;width: 100%;height:100%;line-height:24px;font-size:18px'>储位编码：" + locatNo + "<br/>储位状态：空储位</p>";
|
tipsVal=layer.tips(html,that,{tips:[1,"rgb(58, 61, 73)"],area: ['220px'],time: 0});
|
}else{
|
var param={
|
locatNo:locatNo
|
}
|
sendData(IP + "/Sys/GetLocateInfo", param, 'get', function (res) {
|
// console.log(res)
|
if (res.code == 0) {
|
html = "<p style='word-wrap:break-word;width: 100%;height:100%;line-height:24px;font-size:18px;'>";
|
html += "储位编码：" + locatNo;
|
html += "<br/>储位状态："+res.data.Status;
|
if (res.data.GoodsInfoList != null)
|
{
|
html += "<br/>托盘号： "+res.data.PalletNo;
|
res.data.GoodsInfoList.forEach(item => {
|
html += "<br/><br/>物料编码："+item.SkuNo;
|
html += "<br/>物料名称："+item.SkuName;
|
html += "<br/>批次号： "+item.LotNo;
|
html += "<br/>数量： "+item.Qty;
|
if (item.Standard != null) {
|
html += "<br/>物料规格："+item.Standard;
|
}
|
if (res.data.Status != '2') {
|
html += "<br/>质检状态："+item.InspectStatus;
|
html += "<br/>有效期："+item.ExpirationTime;
|
}
|
});
|
html += "</p>"
|
}
|
tipsVal=layer.tips(html,that,{tips:[1,"rgb(58, 61, 73)"],area: ['260px'],time: 0});
|
} else {
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000
|
}, function () { })
|
}
|
});
|
}
|
|
});
|
//鼠标移出
|
$('body').on('mouseout','.btnShow', function () {
|
layer.close(tipsVal);
|
});
|
//#endregion
|
|
// #region 定时刷新库位图例
|
//获取是否自动刷新
|
var autoRefresh=$('#autoRefresh').prop('checked');
|
//绑定自动刷新change事件监听器
|
form.on('switch(switchTest)', function (data) {
|
autoRefresh=$('#autoRefresh').prop('checked');
|
});
|
//定时器
|
setInterval(function(){
|
if(autoRefresh){
|
GetSlotVm($("#WareHouseNo").val(), $("#RoadwayNo").val(), $("#Row").val(), $("#Depth").val());
|
}
|
},10000)//10秒自动刷新一次
|
// #endregion
|
});
|
</script>
|
</body>
|
|
</html>
|
