@{
|
ViewBag.Title = "LocationView";
|
Layout = "~/Views/Shared/_LayoutVue.cshtml";
|
}
|
<style type="text/css">
|
li {
|
list-style: none;
|
}
|
/*仓库货位*/
|
.wareHouse {
|
padding: 10px;
|
}
|
/*巷道数*/
|
.laneway {
|
float: left;
|
padding: 0px 5px 0 0;
|
width: 70px;
|
}
|
|
.laneway h2 {
|
font-size: 16px;
|
margin: 5px 0 10px 0;
|
font-weight: bold;
|
}
|
|
.laneMenu {
|
overflow: hidden;
|
}
|
|
.laneMenu ul li {
|
float: left;
|
margin: 0 5px 5px 0;
|
}
|
|
.laneMenu ul li a {
|
width: 30px;
|
height: 30px;
|
line-height: 30px;
|
background: #3a93d4;
|
display: inline-block;
|
text-align: center;
|
font-size: 20px;
|
color: #fff;
|
}
|
|
.laneMenu ul li a:hover, .laneMenu ul li a.currentLane {
|
background: #E13E00;
|
}
|
|
.laneInfo {
|
border-top: 1px solid #ddd;
|
position: relative;
|
margin-top: 20px;
|
}
|
|
.laneInfo .title {
|
background: #fff;
|
padding: 4px;
|
display: inline-block;
|
color: #00F;
|
font-weight: bold;
|
font-size: 14px;
|
position: absolute;
|
top: -12px;
|
left: 10px;
|
}
|
|
.laneInfo .infoBox {
|
margin: 20px 10px 15px 14px;
|
}
|
|
.laneInfo .infoBox div {
|
margin: 8px 0;
|
}
|
|
/*货位*/
|
.locationList {
|
border-left: 1px solid #ddd;
|
margin-left: 10px; /*75*/
|
}
|
|
.colorDiv {
|
overflow: hidden;
|
border-bottom: 1px solid #ddd;
|
padding: 0 5px 10px 10px;
|
font-size: 12px;
|
}
|
|
.colorDiv ul {
|
float: left;
|
}
|
|
.colorDiv ul li {
|
border-left: 3px solid #3a93d4;
|
padding: 0px 10px;
|
float: left;
|
margin-right: 10px;
|
}
|
|
.colorDiv ul li div {
|
clear: both;
|
margin: 6px 0;
|
}
|
|
.colorDiv ul li div:after {
|
content: ".";
|
visibility: hidden;
|
}
|
|
.colorDiv ul li div span {
|
float: left;
|
margin-left: 5px;
|
}
|
|
.colorDiv ul li label {
|
float: left;
|
}
|
/*颜色*/
|
.spaceState {
|
width: 15px;
|
height: 15px;
|
display: inline-block;
|
}
|
|
.cyan {
|
background: #66CC99;
|
border: 1px solid #66CC99;
|
}
|
|
.notcyan {
|
background: #d9e47a;
|
border: 1px solid #66CC99;
|
}
|
|
.orange {
|
background: #FF9900;
|
border: 1px solid #FF9900;
|
}
|
|
.purple {
|
background: #9999FF;
|
border: 1px solid #9999FF;
|
}
|
|
.grey {
|
background: #ccc;
|
border: 1px solid #ccc;
|
}
|
|
.black {
|
background: #000;
|
border: 1px solid #000;
|
}
|
|
.pink {
|
background: #FF9999;
|
border: 1px solid #FF9999;
|
}
|
|
.white {
|
background: #fff;
|
border: 1px solid #ddd;
|
}
|
|
.red {
|
background: #f00;
|
border: 1px solid #f00;
|
}
|
|
.green {
|
background: #04c614;
|
border: 1px solid #04c614;
|
}
|
|
.pick{
|
background: #FF9999;
|
border: 1px solid #FF9999;
|
}
|
|
.locaDisplay table tr td {
|
padding: 2px;
|
}
|
|
div.conText {
|
display: inline-block;
|
}
|
|
div.conText label {
|
color: #000;
|
margin-right: 10px;
|
}
|
|
.conditions .conLi .conText label {
|
color: #000;
|
}
|
|
.size20 a.queryeds {
|
border: 2px solid #ffd800;
|
width: 20px;
|
height: 20px;
|
background: #fff;
|
}
|
|
.rowNum td {
|
padding: 5px 1px;
|
/*font-size:11px;*/
|
}
|
|
.gridNum td {
|
padding: 1px 1px;
|
}
|
</style>
|
|
@section head{
|
|
}
|
@section scripts{
|
<script src="~/Content/js/linq.js_ver2.2.0.2/linq.js"></script>
|
<script>
|
var locationViewObj = new Vue({
|
el: '#locationView',
|
data: {
|
stockCode: "",
|
areaCode: "",
|
tunnels: {},
|
locations: { Row: 0, Col: 0, LocationViewLine: [] },
|
locationStates: [],
|
locationsKey: [],
|
locationSelected: "",
|
locationAreaItems: [],
|
stateTotls: {},
|
tunnel:"",//当前选中的巷道
|
itemInfo: [
|
{ f: 'CN_S_ITEM_CODE', n: '物料编码' },
|
{ f: 'CN_S_ITEM_NAME', n: '物料名称' },
|
{ f: 'CN_S_MODEL', n: '规格型号' },
|
{ f: 'CN_S_PRODUCTION_BATCH', n: '生产批次' },
|
{ f: 'CN_F_QUANTITY', n: '数量' },
|
{ f: 'CN_S_ITEM_STATE', n: '物料状态' }
|
],
|
},
|
methods: {
|
GetTunnel: function (tunnel) {
|
//获取左侧巷道
|
var $this = this;
|
ajaxManage({
|
url: "@Url.Action("GetTunnel")?stockCode=" + $this.stockCode + "&areaCode=" + $this.areaCode,
|
success: function (result) {
|
if (result.Status) {
|
$this.tunnels = result.Data;
|
} else {
|
wms.error(result.Msg);
|
}
|
}
|
});
|
},
|
stockSuccess: function (data) {
|
if (data.length == 1)
|
this.stockCode = data[0];
|
},
|
GetStructList: function (tunnel) {
|
if (tunnel == undefined) {
|
tunnel = "";
|
}
|
|
//获取巷道的排信息
|
var $this = this;
|
$this.tunnel = tunnel;
|
ajaxManage({
|
url: "@Url.Action("GetRowsList")?stockCode=" + $this.stockCode + "&areaCode=" + $this.areaCode + "&tunnelCode=" + tunnel,
|
success: function (result) {
|
console.log("获取巷道的排信息: ");
|
console.log(result);
|
|
$this.locations.LocationViewLine = result.Data;
|
$this.GetTunnelLocations(tunnel);
|
}
|
});
|
},
|
GetTunnelLocations: function (tunnel) {
|
var $this = this;
|
ajaxManage({
|
url: "@Url.Action("GetTunnelLocations")?stockCode=" + $this.stockCode + "&areaCode=" + $this.areaCode + "&tunnel=" + tunnel,
|
success: function (result) {
|
console.log("获取货位：");
|
console.log(result);
|
|
$this.locationStates = [];
|
$this.locationsKey = [];
|
|
var print = false;
|
|
for (x in result.Data) {
|
var floor = $this.CovnertStr($.trim(result.Data[x].CN_S_FLOOR), 2);
|
var col = $this.CovnertStr($.trim(result.Data[x].CN_S_COL), 2);
|
|
if (!print) {
|
//console.log($.trim(result.Data[x].CN_S_ROW) + floor + col);
|
//console.log($.trim(result.Data[x].CN_S_LOCATION_CODE));
|
print = true;
|
}
|
|
console.log("货位码：" + $.trim(result.Data[x].CN_S_LOCATION_CODE));
|
console.log("货位状态：" + $.trim(result.Data[x].VIEW_STATE));
|
|
$this.locationsKey[$.trim(result.Data[x].CN_S_ROW) + floor + col] = $.trim(result.Data[x].CN_S_LOCATION_CODE);
|
|
$this.locationStates[$.trim(result.Data[x].CN_S_ROW) + floor + col] = $.trim(result.Data[x].VIEW_STATE);
|
|
|
}
|
//console.log($this.locationsKey);
|
//console.log($this.locationStates);
|
}
|
});
|
},
|
getLatticeStyle: function (row, floor, col) {
|
var $this = this;
|
floor = $this.CovnertStr(floor, 2);
|
col = $this.CovnertStr(col, 2);
|
|
//console.log(row + floor + col);
|
//console.log($this.locationStates[row + floor + col]);
|
//console.log($this.locationStates);
|
|
var VIEW_STATE = $this.locationStates[row + floor + col];
|
switch (VIEW_STATE) {
|
case "预出库锁定"://预出库锁定
|
return 'spaceState orange';
|
case "11":
|
return 'spaceState orange selected';
|
case "预入库锁定"://预入库锁定
|
return 'spaceState purple';
|
case "21":
|
return 'spaceState purple selected';
|
case "满"://满货位
|
return 'spaceState cyan';
|
case "不满"://不满货位
|
return 'spaceState notcyan';
|
case "报废":
|
return 'spaceState black';
|
case "故障":
|
return 'spaceState red';
|
case "31":
|
return 'spaceState cyan selected';
|
case "空"://空
|
return 'spaceState white';
|
case "41":
|
return 'spaceState white selected';
|
case "盘点锁定":
|
return 'spaceState pick';
|
case "搬运锁定":
|
return 'spaceState red';
|
|
}
|
},
|
getNumber: function (num) {
|
var _num = parseInt(num);
|
if (_num < 10) return "0" + _num;
|
return num;
|
},
|
showLocationDtl: function (row, floor, col) {
|
var $this = this;
|
floor = $this.CovnertStr(floor, 2);
|
col = $this.CovnertStr(col, 2);
|
$this.locationStates[row + floor + col] = "41";
|
$("#" + row + floor + col).attr("class", "spaceState white selected");
|
this.showBitInfo(row, floor, col);
|
},
|
showBitInfo: function (row, floor, col) {
|
var $this = this;
|
var locationCode = $this.locationsKey[$.trim(row) + $.trim(floor) + $.trim(col)]
|
wms.showDialogFrame({
|
title: '货位信息',
|
dh: 280,
|
width: "970px",
|
btn: false,
|
callBack: function (frame) {
|
//$this.$refs.busslist.loadData();
|
},
|
url: "@Url.Action("ShowLocationContext")?locationCode=" + locationCode
|
});
|
},
|
GetStateQty: function () {
|
var $this = this;
|
ajaxManage({
|
url: "@Url.Action("GetStateQty")?stockCode=" + $this.stockCode,
|
success: function (result) {
|
$this.stateTotls = result.Data;
|
|
}
|
});
|
},
|
GetQty: function (level,state) {
|
var $this = this;
|
var v;
|
if (level == 1) {
|
v = Enumerable.From($this.stateTotls).GroupBy("$.CN_S_LOCATION_STATE", null,
|
function (key, g) {
|
var result = {
|
CN_S_LOCATION_STATE: key,
|
QTY: parseFloat(g.Sum("x=>x.QTY"))
|
}
|
return result;
|
}).Where("x=>x.CN_S_LOCATION_STATE=='" + state + "'").ToArray();
|
}
|
else if ($this.tunnel != "")
|
{
|
v = Enumerable.From($this.stateTotls).Where("x=>x.CN_S_ROADWAY=='" + $this.tunnel + "'").Where("x=>x.CN_S_LOCATION_STATE=='" + state + "'").ToArray();
|
}
|
if (v != null && v.length > 0)
|
return v[0].QTY;
|
else
|
return 0;
|
},
|
CovnertStr: function (str, n) {
|
//格式化字符-自动补0(后期如果确认存在超过100个货位的情况 则进行修改)
|
//需要补0的字符
|
//需要补多少位
|
var len = str.toString().length;
|
while (len < n) {
|
str = "0" + str;
|
len++;
|
}
|
return str;
|
},
|
ConvertInt: function (string) {
|
return parseInt(string);
|
},
|
refresh: function () {
|
this.GetStructList("");
|
}
|
},
|
mounted: function () {
|
var $this = this;
|
},
|
computed: {
|
areaUrl: function () {
|
if (this.stockCode != "")
|
return '/Basic/Common/AreaList?stockCode=' + this.stockCode + "&include=1";
|
}
|
},
|
watch: {
|
stockCode: function () {
|
var $this = this;
|
$this.tunnel=""
|
$this.GetStateQty();
|
//alert($this.stockCode);
|
},
|
areaCode: function () {
|
var $this = this;
|
if ($this.areaCode != "")
|
$this.GetStructList();
|
//$this.GetTunnel();
|
}
|
}
|
});
|
</script>
|
}
|
|
<div id="locationView" v-cloak>
|
<div class="main" style="min-width: 1000px;" id="closeDialog">
|
<el-form label-width="90px" class="demo-ruleForm" v-bind:inline="true">
|
<el-form-item label="仓库名：">
|
<hh-select-url v-model="stockCode"
|
url="/Basic/Common/StockList"
|
valuefield="CN_S_STOCK_CODE"
|
textfield="CN_S_STOCK_NAME"
|
datafield="Data"
|
v-bind:usedefault="true"
|
v-on:success="stockSuccess">
|
</hh-select-url>
|
</el-form-item>
|
<el-form-item label="库区：">
|
<hh-select-url v-model="areaCode"
|
v-bind:url="areaUrl"
|
valuefield="CN_S_AREA_CODE"
|
textfield="CN_S_AREA_NAME"
|
datafield="Data"
|
v-bind:usedefault="false">
|
</hh-select-url>
|
</el-form-item>
|
<el-form-item>
|
<el-button style="margin-top:2px;" size="mini" type="primary" v-on:click="refresh">刷新</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="clear height10"></div>
|
<!--仓库-->
|
<div class="wareHouse shadowBoxWhite">
|
<!--巷道-->
|
<div class="laneway" style="display: none;">
|
<h2 id="h2_stockname">巷道</h2>
|
<div class="laneMenu">
|
<ul id="ul_tunnel" style="padding: 0;">
|
<li v-for="tunnel in tunnels">
|
<a href='javascript:void(0)' name='turren_one_name' class='currentLane'
|
v-on:click=" GetStructList(tunnel)">{{tunnel}}</a>
|
</li>
|
@*<%--显示巷道区域--%>*@
|
</ul>
|
</div>
|
</div>
|
<!--货位-->
|
<div class="locationList">
|
<!--颜色定义-->
|
<div class="colorDiv" id="div_colorDiv">
|
<ul style="padding: 0px 10px 0px 10px; ">
|
<li>
|
<div>
|
<label class="spaceState white"></label>
|
<span>空货位</span>
|
</div>
|
<div>
|
<label>巷道合计：</label><em class="redWord" id="tunnle_Empty">{{GetQty(2,'空')}}</em>
|
</div>
|
<div>
|
<label>仓库总计：</label><em class="redWord" id="stock_Empty">{{GetQty(1,'空')}}</em>
|
</div>
|
</li>
|
<li>
|
<div>
|
<label class="spaceState cyan"></label>
|
<span>满货位</span>
|
</div>
|
<div>
|
<label>巷道合计：</label><em class="redWord" id="tunnle_Full">{{GetQty(2,'满')}}</em>
|
</div>
|
<div>
|
<label>仓库总计：</label><em class="redWord" id="stock_Full">{{GetQty(1,'满')}}</em>
|
</div>
|
</li>
|
<li>
|
<div>
|
<label class="spaceState notcyan"></label>
|
<span>不满货位</span>
|
</div>
|
<div>
|
<label>巷道合计：</label><em class="redWord">{{GetQty(2,'不满')}}</em>
|
</div>
|
<div>
|
<label>仓库总计：</label><em class="redWord">{{GetQty(1,'不满')}}</em>
|
</div>
|
</li>
|
<li>
|
<div>
|
<label class="spaceState purple"></label>
|
<span>预入库锁定</span>
|
</div>
|
<div>
|
<label>巷道合计：</label><em class="redWord" id="tunnle_InLock">{{GetQty(2,'预入库锁定')}}</em>
|
</div>
|
<div>
|
<label>仓库总计：</label><em class="redWord" id="stock_InLock">{{GetQty(1,'预入库锁定')}}</em>
|
</div>
|
</li>
|
<li>
|
<div>
|
<label class="spaceState orange"></label>
|
<span>预出库锁定</span>
|
</div>
|
<div>
|
<label>巷道合计：</label><em class="redWord" id="tunnle_OutLock">{{GetQty(2,'预出库锁定')}}</em>
|
</div>
|
<div>
|
<label>仓库总计：</label><em class="redWord" id="stock_OutLock">{{GetQty(1,'预出库锁定')}}</em>
|
</div>
|
</li>
|
@*<li>
|
<div>
|
<label class="spaceState pink"></label>
|
<span>锁定</span>
|
</div>
|
<div>
|
<label>巷道合计：</label><em class="redWord" id="tunnle_Lock">{{GetQty(2,'锁定')}}</em>
|
</div>
|
<div>
|
<label>仓库总计：</label><em class="redWord" id="stock_Lock">{{GetQty(1,'锁定')}}</em>
|
</div>
|
</li>
|
<li>
|
<div>
|
<label class="spaceState red"></label>
|
<span>故障</span>
|
</div>
|
<div>
|
<label>巷道合计：</label><em class="redWord" id="tunnle_Fault">{{GetQty(2,'故障')}}</em>
|
</div>
|
<div>
|
<label>仓库总计：</label><em class="redWord" id="stock_Fault">{{GetQty(1,'故障')}}</em>
|
</div>
|
</li>*@
|
<li>
|
<div>
|
<label class="spaceState black"></label>
|
<span>报废</span>
|
</div>
|
<div>
|
<label>巷道合计：</label><em class="redWord" id="tunnle_Scrap">{{GetQty(2,'报废')}}</em>
|
</div>
|
<div>
|
<label>仓库总计：</label><em class="redWord" id="stock_Scrap">{{GetQty(1,'报废')}}</em>
|
</div>
|
</li>
|
<li>
|
<div>
|
<label class="spaceState pink"></label>
|
<span>盘点锁定</span>
|
</div>
|
<div>
|
<label>巷道合计：</label><em class="redWord" id="tunnle_Scrap">{{GetQty(2,'盘点锁定')}}</em>
|
</div>
|
<div>
|
<label>仓库总计：</label><em class="redWord" id="stock_Scrap">{{GetQty(1,'盘点锁定')}}</em>
|
</div>
|
</li>
|
<li>
|
<div>
|
<label class="spaceState red"></label>
|
<span>搬运锁定</span>
|
</div>
|
<div>
|
<label>巷道合计：</label><em class="redWord" id="tunnle_Scrap">{{GetQty(2,'搬运锁定')}}</em>
|
</div>
|
<div>
|
<label>仓库总计：</label><em class="redWord" id="stock_Scrap">{{GetQty(1,'搬运锁定')}}</em>
|
</div>
|
</li>
|
|
@*<li>
|
<div>
|
<label></label>
|
<span>容器</span>
|
</div>
|
<div>
|
<label>空容器：</label><em class="redWord" id="emptyTray">0</em>
|
</div>
|
<div>
|
<label>有料容器：</label><em class="redWord" id="feedTray">0</em>
|
</div>
|
</li>*@
|
</ul>
|
</div>
|
<!--货位平面图-->
|
<div class="planDiv">
|
@*<div class="sizeMenu">
|
货位大小：
|
<a href="javascript:void(0)" id="bigSize" onclick="bigSize(this)">大</a>
|
<a href="javascript:void(0)" id="midSize" onclick="midSize(this)">中</a>
|
<a href="javascript:void(0)" id="smallSize" onclick="smallSize(this)">小</a>
|
</div>*@
|
<div class="locationDiv" style="overflow: scroll">
|
<div v-for="(pai,i) in locations.LocationViewLine" class="afLocatio">
|
<table border="0" cellpadding="0" cellspacing="0" class="size20">
|
<tbody>
|
<tr class="rowNum">
|
<td v-bind:rowspan="2+pai.CN_N_FLOOR" style="padding:10px;font-weight:bold">{{pai.CN_S_ROW}}排</td>
|
<td></td>
|
<td v-for="c in ConvertInt(pai.CN_N_COL)"><span>{{CovnertStr(c,2)}}</span></td><!--v-if="i==0"-->
|
</tr>
|
<tr v-for="(floor,j) in ConvertInt(pai.CN_N_FLOOR)" class="gridNum">
|
<td><span>{{CovnertStr(1+j,2)}}</span></td>
|
<td v-for="col in ConvertInt(pai.CN_N_COL)">
|
<a v-bind:id="pai.CN_S_ROW+floor+col" href="javascript:void(0)" selecttype="locationClass"
|
v-bind:class="getLatticeStyle(pai.CN_S_ROW,floor,col)"
|
v-on:click="showLocationDtl(pai.CN_S_ROW,floor,col)"></a>
|
</td>
|
</tr>
|
@*<tr v-if="i==1" class="rowNum">
|
<td></td>
|
<td v-for="c in ConvertInt(pai.CN_N_COL)"><span>{{CovnertStr(c,2)}}</span></td>
|
</tr>*@
|
</tbody>
|
</table>
|
</div>
|
@*<div class="laneNum"><b id="b_tunnel"></b>巷道</div>*@
|
</div>
|
</div>
|
</div>
|
<div class="clear"></div>
|
</div>
|
</div>
|
<!--货位详细信息--弹出-->
|
<div id="dialog_div" style="display: none">
|
<div class="locationDetail" id="locaDetail" style="width: 98%; padding: 0 1%; height: 100%;">
|
<div class="conditions" style="padding: 5px 0;">
|
<div class="conLi">
|
<label>货位编号：</label>
|
<span class="conText" id="lbl_location_id"></span>
|
</div>
|
<div class="conLi">
|
<label>货位逻辑分区：</label>
|
<div class="conText" id="div_logic_code">
|
@*<%--货位逻辑分区--%>*@
|
</div>
|
</div>
|
<div class="conLi">
|
<label>对应AGV货位：</label>
|
<div class="conText" id="div_logic_agv">
|
@*<%--对应AGV货位--%>*@
|
</div>
|
</div>
|
<div class="conLi">
|
<label>容器重量：</label>
|
<div class="conText" id="div_tray_zl">
|
@*<%--对应AGV货位--%>*@
|
</div>
|
</div>
|
<div style="clear: both; margin-bottom:10px;">
|
<label style="line-height:26px;color:#666;">容器编码：</label>
|
<div class="tray" id="div_tray_code">
|
@*<%--托盘号--%>*@
|
</div>
|
</div>
|
|
<div style="clear: both; margin-top: 5px;">
|
<input type="text" class="inputText" id="txtValue" style="margin-right:5px;" />
|
<a href="javascript:void(0)" class="button blueButton" onclick="fixed()">定位</a>
|
</div>
|
</div>
|
<div class="clear height10"></div>
|
@*<div class="tableDiv" id="dialog_div_scroll" style="overflow-y: auto; max-height: 220px">
|
<table id="tbList" width="100%" border="0" cellspacing="1" cellpadding="5">
|
<thead>
|
<tr>
|
<th align="center" width="30%">产品编号</th>
|
<th align="center" width="25%">产品名称</th>
|
<th align="center" width="25%">物料规格</th>
|
<th align="center" width="10%">数量</th>
|
<th align="center" width="10%">计量单位</th>
|
</tr>
|
</thead>
|
<tbody></tbody>
|
</table>
|
</div>*@
|
</div>
|
</div>
|
</div>
|
