| New file |
| | |
|---|
| | | <!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> |
|---|
