<template> <div class="container-div"> <div class="row"> <div class="col-sm-12 select-info"> <form id="container-form"> <div class="select-list"> <ul id="select_info"> <li> <a-select show-search placeholder="请选择库位类型" option-filter-prop="children" v-model="zoneCode" style="width: 200px"> <a-select-option selected="0" id="zoneCode" v-for="item in locationTypeList" :key="item.name" :value="item.code">{{item.name}} </a-select-option> </a-select> </li> <li>第 <select id="editable-num" name="num" style="width: 70px"> </select> </li> <li> <select id="editable-select" name="col" style="width: 70px"> <option value="row" selected>行</option> <option value="line">列</option> <option value="layer">层</option> </select> </li> <li> <a-button type="primary" @click="Search()" icon="search">查询</a-button> </li> </ul> </div> </form> </div> <div class="col-sm-12 select-info"> <form id="receiptHeader-form"> <div class="select-list"> <ul id="img_list" style=""> <li> 空柜空闲:<img src="~@/assets/icon/空柜空闲.png"> </li> <li> 空盘空闲:<img src="~@/assets/icon/空盘空闲.png"> </li> <li> 半盘空闲:<img src="~@/assets/icon/半盘空闲.png"> </li> <li> 整盘空闲:<img src="~@/assets/icon/整盘空闲.png"> </li> <li> 空柜锁定:<img src="~@/assets/icon/空柜锁定.png"> </li> <li> 空盘锁定:<img src="~@/assets/icon/空盘锁定.png"> </li> <li> 半盘锁定:<img src="~@/assets/icon/半盘锁定.png"> </li> <li> 整盘锁定:<img src="~@/assets/icon/整盘锁定.png"> </li> <li> 空柜禁用:<img src="~@/assets/icon/空柜禁用.png"> </li> <li> 空盘禁用:<img src="~@/assets/icon/空盘禁用.png"> </li> <li> 半盘禁用:<img src="~@/assets/icon/半盘禁用.png"> </li> <li> 整盘禁用:<img src="~@/assets/icon/整盘禁用.png"> </li> <li><span style="font-size: 12px">库位统计情况:</span> <input style="width: 400px; font-size: 12px" type="text" id="zone" disabled/> </li> </ul><br><br> <ul id="info_list"> <li><span>库位:</span><input type="text" id="code" disabled/></li> <li><span>容器编码:</span><input type="text" id="containerCode" disabled/></li> <li><span>物料信息:<select id="material" style="width: auto"><option>无</option></select></span></li> </ul> </div> </form> </div> <div class="col-sm-12 select-info"> <div id="borderCol" style="overflow-y: auto;white-space:nowrap" v-show="showPrise"> <div class="location" id="location"> </div> </div> <a-spin tip="库位视图生成中..." :spinning="spinning"> <a-skeleton active :loading="loading" :paragraph="{ rows: 5 }"/> </a-spin> </div> </div> </div> </template> <script> var prefix = "/location/locationMonitor"; var grid_row; var grid_row_first; var grid_line; var grid_layer; var list_info; var grid_num_1=0; var grid_num_2=0; var grid_num_3=0; var grid_num_4=0; var grid_num_5=0; var grid_num_6=0; var grid_num_7=0; var grid_num_8=0; var grid_num_9=0; var grid_num_10=0; var grid_num_11=0; var grid_num_12=0; var currentContainerCode; var currentLocationCode=0; var currentMaterialCode=0; import huahengUI from '../../../assets/css/huahengUI.css' import $ from '../../../assets/js/jquery-1.11.1.min' import grid_rest from '@/assets/icon/空柜空闲.png' import grid_empty from '@/assets/icon/空盘空闲.png' import grid_half from '@/assets/icon/半盘空闲.png' import grid_all from '@/assets/icon/整盘空闲.png' import grid_emp_waing from '@/assets/icon/空柜禁用.png' import grid_empty_waring from '@/assets/icon/空盘禁用.png' import grid_half_waring from '@/assets/icon/半盘禁用.png' import grid_all_waring from '@/assets/icon/整盘禁用.png' import grid_emp_lock from '@/assets/icon/空柜锁定.png' import grid_empty_lock from '@/assets/icon/空盘锁定.png' import grid_half_lock from '@/assets/icon/半盘锁定.png' import grid_all_lock from '@/assets/icon/整盘锁定.png' import rel_empty from '@/assets/icon/空.png' import Vue from 'vue' import {ACCESS_TOKEN} from "@/store/mutation-types" import {getLocationTypeList} from '@/api/api' export default { name: "locationStatus", zoneCode:"", data() { return { spinning:true, loading:true, showPrise:false, // loading:true, zoneCode:'', locationTypeList: [], model:{}, locationContent:'' } }, // setup() { // const spinning = ref<boolean>(false); // // const changeSpinning = () => { // spinning.value = !spinning.value; // }; created() { let _this=this _this.loadFrom() window.gridMsg=_this.gridMsg window.Mclose=_this.Mclose window.lays=_this.lays }, mounted() { //监听浏览器宽度的改变 // window.onresize = function(){ // _this.changeMargin(); // _this.border() // }; // // this.changeMargin(); // // this.border() }, methods: { loadFrom() { getLocationTypeList().then((res) => { if (res.success) { this.locationTypeList = res.result; if (this.locationTypeList.length > 0) { this.zoneCode = this.locationTypeList[0].code; let _this=this; this.resetAjax(this.zoneCode); } } }) }, initEvent() { //库位类型和行列层选择 $("#editable-select").change(function () { let num=$("#editable-select").val(); $("#editable-num").children().remove(); if (num === "row") { for (let i = grid_row_first; i <= grid_row; i++) { $("#editable-num").append("<option value='"+i+"'>"+i+"</option>") } } else if (num === "line") { for (let i = 1; i <= grid_line; i++) { $("#editable-num").append("<option value='"+i+"'>"+i+"</option>") } } else if (num === "layer") { for (let i = 1; i <= grid_layer; i++) { $("#editable-num").append("<option value='"+i+"'>"+i+"</option>") } } }); $("#zoneCode").change(function () { let type=$("#zoneCode").val(); this.resetAjax(type); }); }, //边框高度 border() { let box_height=$("#borderCol").offset().top; let window_height=$(window).height()-20; $("#borderCol").css({"height":window_height-box_height}); }, //格子宽度 changeMargin(){ let box_width=document.getElementById("location").offsetWidth; box_width=box_width-80; let num=$("#editable-select").val(); let grid_width; if (num === "layer" || num === "row") { grid_width=box_width/grid_line; } else if (num === "line") { grid_width=box_width/grid_row; } if (grid_width >= 50) { $(".grid").css({"width":"50px","height":"50px"}); } else if (grid_width <= 20) { $(".grid").css({"width":"20px","height":"20px"}); } else { $(".grid").css({"width":grid_width,"height":grid_width}); }}, //tips信息 lays(x){ let $j=$(x); let row=$j.attr("data-i"); let line=$j.attr("data-j"); let layers=$j.attr("data-k"); row=parseInt(row); line=parseInt(line); layers=parseInt(layers); if (list_info) { for (let i = 0; i < list_info.length; i++) { if (list_info[i].row === row && list_info[i].icolumn === line && list_info[i].layer === layers) { let str_info=''; let container_code=''; let list_qty=0; if (list_info[i].containerCode) { container_code="\n容器编码:"+ list_info[i].containerCode+""; if (list_info[i].materialName) { for (let j = 0; j < list_info[i].materialName.length; j++) { let list_batch=list_info[i].batch[j]===null?"无":list_info[i].batch[j]===""?"无":list_info[i].batch[j]; list_qty +=list_info[i].qty[j]; if(j==list_info[i].materialName.length-1){ str_info=str_info + "\n批次:"+ list_batch +",物料名称:"+ list_info[i].materialName[j] +",物料编码:"+ list_info[i].materialCode[j] + ",数量:"+ list_qty +"" } } } } let code=list_info[i].code===null?"无":list_info[i].code; $("[data-i='"+row+"']"+"[data-j='"+line+"']"+"[data-k='"+layers+"']").attr({ "title":"第"+row+"行,第"+line+"列,第"+ layers +"层\n库位:"+ code + container_code + str_info}); // Vue.prototype.$Jnotification.success({message: '系统提示', description: "第"+row+"行,第"+line+"列,第"+ layers +"层<br>库位:"+ code + container_code + str_info, duration: 4}) } } }else {return ""} }, //关闭tips Mclose(x){ //关闭 // Vue.prototype.$Jnotification.error({message: '系统提示', description: "鼠标拿走了", duration: 4}) }, //库位信息请求和状态显示 ajaxGrid(x, info) { let _this=this // let load=layer.msg('加载中', {icon: 16,shade: 0.4,time: false}); $.ajax({ url:window._CONFIG['domianURL']+prefix+"/getLocationInfo", type:"post", headers:{ "X-Access-Token":Vue.ls.get(ACCESS_TOKEN) }, data:info, success:function (res) { if (res.code===200||res.result) { grid_num_1 = 0; grid_num_2 = 0; grid_num_3 = 0; grid_num_4 = 0; grid_num_5 = 0; grid_num_6 = 0; grid_num_7 = 0; grid_num_8 = 0; grid_num_9 = 0; grid_num_10 = 0; grid_num_11 = 0; grid_num_12 = 0; if (x === "row") { for (let i = 0; i < res.result.length; i++) { let index=res.result[i].icolumn+((res.result[i].layer-1)*grid_line); index=index-1; _this.resShow(res,index,i); } _this.clearLocation(grid_line,grid_layer); // layer.close(load); } else if (x === "line") { for (let i = 0; i < res.result.length; i++) { let index=res.result[i].row+((res.result[i].layer-1)*grid_row); index=index-1; _this.resShow(res,index,i); } _this.clearLocation(grid_row,grid_layer); // layer.close(load); } else if (x === "layer") { for (let i = 0; i < res.result.length; i++) { let index=res.result[i].icolumn+((res.result[i].row-1)*grid_line); index=index-1; _this.resShow(res,index,i); } _this.clearLocation(grid_line,grid_row); // layer.close(load); } } else if (res.code!==200) { // layer.close(load); // layer.open({ // title: '错误', // content: res.msg // }); } list_info=res.result; }, error:function (req, msg) { console.log(msg); } }) }, //库位请求的结果显示 resShow(res, index ,i) { // if (res.result[i].deleted === false) { var row=res.result[i].row; var jColumn=res.result[i].icolumn; var kLayer=res.result[i].layer; if (res.result[i].locationAttribute === "1") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_rest, "isTrue": 1}); grid_num_1 = grid_num_1 + 1; } else if (res.result[i].locationAttribute === "2") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_empty, "isTrue": 1}); grid_num_2 = grid_num_2 + 1; } else if (res.result[i].locationAttribute === "3") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_half, "isTrue": 1}); grid_num_3 = grid_num_3 + 1; } else if (res.result[i].locationAttribute === "4") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_all, "isTrue": 1}); grid_num_4 = grid_num_4 + 1; } else if (res.result[i].locationAttribute === "5") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_emp_lock, "isTrue": 1}); grid_num_5 = grid_num_5 + 1; } else if (res.result[i].locationAttribute === "6") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_empty_lock, "isTrue": 1}); grid_num_6 = grid_num_6 + 1; } else if (res.result[i].locationAttribute === "7") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_half_lock, "isTrue": 1}); grid_num_7 = grid_num_7 + 1; } else if (res.result[i].locationAttribute === "8") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_all_lock, "isTrue": 1}); grid_num_8 = grid_num_8 + 1; } else if (res.result[i].locationAttribute === "9") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_emp_waing, "isTrue": 1}); grid_num_9 = grid_num_9 + 1; } else if (res.result[i].locationAttribute === "10") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_empty_waring, "isTrue": 1}); grid_num_10 = grid_num_10 + 1; } else if (res.result[i].locationAttribute === "11") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_half_waring, "isTrue": 1}); grid_num_11 = grid_num_11 + 1; } else if (res.result[i].locationAttribute === "12") { $("[data-i='"+row+"']"+"[data-j='"+jColumn+"']"+"[data-k='"+kLayer+"']").attr({"src": grid_all_waring, "isTrue": 1}); grid_num_12 = grid_num_12 + 1; } // } // else if (res.result[i].deleted === true) { // $(".grid").eq(i).attr({"src": rel_empty, "onmouseover": "", "onclick": ""}); // } }, //清除将数据库中没有的库位 clearLocation(x, y) { for (let j = 0; j < x * y; j++) { let sta=$(".grid").eq(j).attr("isTrue"); if (sta !== "1") { $(".grid").eq(j).attr({"src": rel_empty,"onmouseover": "","onclick": ""}); } } this.spinning=false; this.showPrise=true; this.loading=false; }, //点击显示当前库位信息 gridMsg(msg) { let $j=$(msg); let row=$j.attr("data-i"); let line=$j.attr("data-j"); let layers=$j.attr("data-k"); row=parseInt(row); line=parseInt(line); layers=parseInt(layers); if (list_info) {//缓存查询 for (let i = 0; i < list_info.length; i++) { if (list_info[i].row === row && list_info[i].icolumn === line && list_info[i].layer === layers) { if (list_info[i].materialName) { let list_batch=''; let list_qty=0; $("#material").children().remove(); for (let j = 0; j < list_info[i].materialName.length; j++) { list_batch=list_info[i].batch[j]===null?"无":list_info[i].batch[j]===""?"无":list_info[i].batch[j]; list_qty +=list_info[i].qty[j]; let str_info="批次:"+ list_batch +"/ 物料名称:"+ list_info[i].materialName[j] +"/ 物料编码:"+ list_info[i].materialCode[j] + "/ 数量:"+ list_qty +""; if (j==list_info[i].materialName.length-1){ $("#material").append("<option>"+ str_info +"</option>"); } currentMaterialCode = list_info[i].materialCode[j] } } else { $("#material").children().remove(); $("#material").append("<option>无</option>"); } $("#code").val(list_info[i].code); $("#containerCode").val(list_info[i].containerCode===""?"无":list_info[i].containerCode); currentContainerCode = $("#containerCode").val() currentLocationCode = $("#code").val() } } }else {return ""} }, //页面初始化请求 resetAjax(type){ var _this=this; $.ajax({ url:window._CONFIG['domianURL']+prefix+"/getAllLocation", type:"post", data:{ type:type }, headers:{ "X-Access-Token":Vue.ls.get(ACCESS_TOKEN) }, success:function (res) { grid_row=res.result.maxRow; grid_row_first = res.result.minRow; grid_line=res.result.maxLine; grid_layer=res.result.maxLayer; //初始格子 $("#location").children().remove(); for (let i = 1; i <= grid_layer; i++) { // var index=i+1;<span style='margin-top:30px'>第"+ index +"行</span> $(".location").append("<br>"); for (let j = 1; j <= grid_line; j++) { // $(".location").append("<img data-i='1' data-j="+j+" data-k="+ i +" class='grid'>"); $(".location").append("<img v-html data-i='1' data-j="+j+" data-k="+ i +" class='grid' onmouseove='lays(this)' onmouseout='Mclose(this)' onclick='gridMsg(this)'>"); } } let num=$("#editable-select").val(); $("#editable-num").children().remove(); if (num === "row") { for (let i = grid_row_first; i <= grid_row; i++) { $("#editable-num").append("<option value='"+i+"'>"+i+"</option>") } } else if (num === "line") { for (let i = 1; i <= grid_line; i++) { $("#editable-num").append("<option value='"+i+"'>"+i+"</option>") } } else if (num === "layer") { for (let i = 1; i <= grid_layer; i++) { $("#editable-num").append("<option value='"+i+"'>"+i+"</option>") } } _this.changeMargin(); _this.Search(); } }); }, //搜索平面库位 Search(){ this.spinning=true; this.showPrise=false; this.loading=true; let index=$("#editable-select").val(); let num=$("#editable-num").val(); let zoneCode=""; if ($("#zoneCode").val()==null) { zoneCode=this.locationTypeList[0].zoneCode; }else { zoneCode=this.locationTypeList[$("#zoneCode").val()].zoneCode; } $("#code").val(""); $("#containerCode").val(""); $("#material").children().remove(); $("#material").append("<option>无</option>"); let data; this.seachZone(); if (index === "row") { data={type:zoneCode, row:num}; $("#location").children().remove(); for (let i = grid_layer; i > 0; i--) { $(".location").append("<br><span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第"+ i+"层</span>"); for (let j = 1; j <= grid_line; j++) { $(".location").append("<img data-i="+num+" data-j="+j+" data-k="+i+" class='grid' onmouseover='lays(this)' onmouseout='Mclose(this)' onclick='gridMsg(this)'>"); } } this.changeMargin(); this.ajaxGrid(index,data); } else if (index === "line") { data={type:zoneCode, line:num}; $("#location").children().remove(); for (let k = grid_layer; k > 0; k--) { $(".location").append("<br><span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第"+ k+"层</span>"); for (let l = 1; l <= grid_row; l++) { $(".location").append("<img data-i="+l+" data-j="+num+" data-k="+k+" class='grid' onmouseover='lays(this)' onmouseout='Mclose(this)' onclick='gridMsg(this)'>"); } } this.changeMargin(); this.ajaxGrid(index,data); } else if (index === "layer") { data={type:zoneCode, layer:num}; $("#location").children().remove(); for (let m = 1; m <= grid_row; m++) { $(".location").append("<br><span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第"+ m+"行</span>"); for (let n = 1; n <= grid_line; n++) { $(".location").append("<img data-i="+m+" data-j="+n+" data-k="+num+" class='grid' onmouseover='lays(this)' onmouseout='Mclose(this)' onclick='gridMsg(this)'>"); } } this.changeMargin(); this.ajaxGrid(index,data); } }, seachZone(){ let _this=this let zoneCode=""; if ($("#zoneCode").val()==null) { zoneCode=this.locationTypeList[0].zoneCode; }else { zoneCode=this.locationTypeList[$("#zoneCode").val()].zoneCode; } $.ajax({ url:window._CONFIG['domianURL']+prefix+"/getStatus", data:{ zoneCode:zoneCode }, headers:{ "X-Access-Token":Vue.ls.get(ACCESS_TOKEN) }, success:function (response) { if (response.code==200){ $("#zone").val("库位总数:"+response.result.location+", 空闲库位:"+response.result.emptyLocation+ ", 空托盘库位:"+response.result.haveContainLocation+", 有货库位:"+response.result.haveInventoryLocation) }else { alert(response.message) } }, error:function () { alert("未知的错误") } }) }, } } </script> <style scoped> </style>