| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944 |
- <!DOCTYPE html>
- <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>
- <!-- CSRF Token -->
- <meta name="csrf-token" content="{{ csrf_token() }}">
- <title>设备平面</title>
- <link href="{{ mix('css/app.css') }}" rel="stylesheet">
- <link href="{{ mix('css/animation.css') }}" rel="stylesheet">
- <style>
- html{
- width: 100%;
- height: 100%;
- }
- body{
- width: 100%;
- height: 100%;
- }
- .p1{
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .el-center{
- display:flex;
- align-items:center;
- justify-content:center;
- }
- .el-left-bottom{
- position: absolute;
- bottom: 0;
- left: 0;
- }
- .el-right-bottom{
- position: absolute;
- bottom: 0;
- right: 0;
- }
- .txt-sty{
- filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
- font-family: "Microsoft YaHei Light","sans-serif";
- font-size: 10px;
- white-space:nowrap;
- font-weight:bold;
- }
- .re{transform:rotate(-90deg);
- -ms-transform:rotate(-90deg); /* Internet Explorer 9*/
- -moz-transform:rotate(-90deg); /* Firefox */
- -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
- -o-transform:rotate(-90deg); /* Opera */
- }
- /*opacity是设置遮罩透明度的,可以自己调节*/
- #loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#f8f8f8;opacity:0.6;z-index:15000;}
- #loading i{position:absolute;top:50%;left:50%;font-size:33px;margin-top:-15px;margin-left:-40px;}
- #loading p{position:absolute;top:55%;left:48%;width:33px;height:33px;margin-top:-15px;margin-left:-15px;}
- </style>
- </head>
- <body>
- <div class="container-fluid w-100 h-100" id="container" @mousemove="eqMove()" @mouseup="eqUp()">
- <div class="row w-100 h-100">
- <div class="col-2 " style="user-select: none;" id="tool">
- <div class="dropdown">
- <button type="button" class="btn p-0 w-100" id="dropdownMenu"
- data-toggle="dropdown">
- <h4 class="text-muted mt-1 p1">@{{ name }} <i class="fa fa-exchange text-info"></i></h4>
- </button>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li role="presentation" v-for="warehouse in warehouses" v-if="warehouse.id!==selected">
- <a role="menuitem" tabindex="-1" style="cursor: pointer" class="ml-3"
- @click="selectedWarehouse(warehouse)">@{{ warehouse.name }}</a>
- </li>
- <li role="presentation" class="text-center" @click="showAddWarehouseDetail()">
- <a role="menuitem" tabindex="-1" style="cursor: pointer" class="ml-3 text-primary"
- ><i class="fa fa-plus"></i> 新增</a>
- </li>
- </ul>
- </div>
- <button class="btn btn-info mt-5 w-100 text-white" @click="openRepository()">新增库区</button>
- <p class="font-weight-bold p-0 mb-0 mt-1">位置</p>
- <div class="row text-muted small">
- <small class="col-6">X</small>
- <small class="col-6">Y</small>
- </div>
- <div class="row m-0 p-0">
- <input type="number" class="col-5 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.x"
- @blur="changeNumber('x')"></input>
- <input type="number" class="col-5 offset-1 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.y"
- @blur="changeNumber('y')"></input>
- </div>
- <p class="font-weight-bold p-0 mb-0 mt-3">大小</p>
- <div class="row text-muted small">
- <small class="col-6">高</small>
- <small class="col-6">宽</small>
- </div>
- <div class="row m-0 p-0">
- <input type="number" class="col-5 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.height" @blur="changeNumber('height')"></input>
- <input type="number" class="col-5 offset-1 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.width" @blur="changeNumber('width')"></input>
- </div>
- <p class="font-weight-bold p-0 mb-0 mt-3">其他</p>
- <div class="row text-muted small">
- <small class="col-6">层级</small>
- <small class="col-6">颜色</small>
- </div>
- <div class="row m-0 p-0">
- <input type="number" class="col-5 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.index" @blur="changeNumber('index')"></input>
- <input class="col-5 offset-1 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.color" @blur="changeText('color')"></input>
- </div>
- <div class="row text-muted small">
- <small class="col-6">名称</small>
- <small class="col-6">名称位置</small>
- </div>
- <div class="row m-0 p-0">
- <input class="col-5 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.name" @blur="changeText('name')"></input>
- <select class="col-5 offset-1 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" v-model="currentEl.coords">
- <option value="左上">左上</option>
- <option value="左下">左下</option>
- <option value="右上">右上</option>
- <option value="右下">右下</option>
- <option value="居中">居中</option>
- <option value="中上">中上</option>
- </select>
- </div>
- <div class="row text-muted small">
- <small class="col-6">边框</small>
- </div>
- <div class="m-0 small row">
- <div class="col-6 p-0">
- <div class="form-check">
- <label class="form-check-label">
- <input type="checkbox" class="form-check-input" v-model="currentEl.border" value="top" :disabled="currentEl.x===undefined">上
- </label>
- </div>
- <div class="form-check">
- <label class="form-check-label">
- <input type="checkbox" class="form-check-input" v-model="currentEl.border" value="bottom" :disabled="currentEl.x===undefined">下
- </label>
- </div>
- <div class="form-check">
- <label class="form-check-label">
- <input type="checkbox" class="form-check-input" v-model="currentEl.border" value="left" :disabled="currentEl.x===undefined">左
- </label>
- </div>
- <div class="form-check">
- <label class="form-check-label">
- <input type="checkbox" class="form-check-input" v-model="currentEl.border" value="right" :disabled="currentEl.x===undefined">右
- </label>
- </div>
- </div>
- <div class="col-6 p-0">
- <div class="form-check">
- <label class="form-check-label">
- <button class="btn btn-sm btn-success" @click="addCoords()">生成场景元素</button>
- </label>
- </div>
- </div>
- </div>
- <p class="font-weight-bold p-0 mb-0 mt-5 h5">全局</p>
- <div class="row text-muted">
- <div class="col-4">缩放</div>
- <div class="input-group input-group-sm col-8 m-0">
- <input type="number" class="form-control" step="1" v-model="scale"></input>
- <div class="input-group-append">
- <span class="input-group-text">%</span>
- </div>
- </div>
- </div>
- <div class="row mt-3">
- <h5 class="font-weight-bold ml-3">设备</h5>
- <div class="form-check ml-3">
- <label class="form-check-label">
- <input type="checkbox" class="form-check-input" v-model="grid">网格
- </label>
- <label class="form-check-label ml-4">
- <input type="checkbox" class="form-check-input" v-model="turn">翻转
- </label>
- </div>
- </div>
- <div style="height: 250px;overflow-y: auto;overflow-x: hidden" class="w-100">
- <div class="row" v-for="equipment in equipments" @mousedown="eqDown(equipment)">
- <div class="col-5">
- <div style="border: 1px #0070C0 solid" :style="[{backgroundColor:equipment.color},{width:(equipment.h*ratio)+'px'},{height:(equipment.w*ratio)+'px'}]"></div>
- </div>
- <div class="col-7 p1">
- @{{ equipment.describe }}
- </div>
- </div>
- </div>
- <button @click="clickEditOrSave()" :class="isNotEdit ? 'btn-info' : 'btn-success'"
- style="position:absolute;bottom: 20px;cursor: pointer" class="btn col-10 text-white">
- <span v-if="isNotEdit">开启场景编辑</span>
- <span v-else>保存更改</span>
- </button>
- </div>
- <div class="col-10 p-0">
- <div class="w-100 bg-secondary" id="canvasApp" style="height: 100vh;overflow: auto;user-select: none;">
- <div id="canvas" v-if="isLoad" @keydown.delete="delElement()" :style="[{width:container.width*(scale/100)+'px'},{height:container.height*(scale/100)+'px'},{transform: 'scale('+(scale/100)+')'}]"
- style="position: relative;transform-origin: 0 0" class="bg-white"
- @mousedown="contentOnmousedown" @mousemove="contentOnmousemove" @mouseup="contentOnmouseup">
- <vue-drag-resize v-for="(element,index) in elements" v-if="!element.removeSign"
- @activated="onActivated(element)"
- @dragging="onDragging"
- @resizing="onResizing"
- :minw="1" :minh="1"
- :style="[{backgroundColor:element.color},
- element.border.indexOf('left')===-1 ? {borderLeft:'none'} : {},
- element.border.indexOf('right')===-1 ? {borderRight:'none'} : {},
- element.border.indexOf('top')===-1 ? {borderTop:'none'} : {},
- element.border.indexOf('bottom')===-1 ? {borderBottom:'none'} : {}]"
- style="border-width:1px;border-color: #000000;border-style: solid"
- :key="index" :prevent-active-behavior="isNotEdit"
- :parent-limitation="true" :w="element.width*ratio" :h="element.height*ratio"
- :x="element.x" :y="element.y" :z="element.index">
- <div :class="coordsMapping[element.coords]">@{{ element.name }}</div>
- </vue-drag-resize>
- <vue-drag-resize style="border-width:1px;border-color: #0070C0;border-style: dashed;cursor: pointer"
- v-for="(element,index) in equipmentElements" @clicked="showDetail(element)"
- v-if="!element.removeSign"
- :is-resizable="false" :snap-to-grid="grid" :grid-x="40" :grid-y="30"
- :style="[{backgroundColor:element.color}]"
- @activated="onActivated(element)"
- @dragging="equipmentDrag"
- :key="'eq-'+index+element.turn" :prevent-active-behavior="isNotEdit"
- :parent-limitation="true" :w="(element.turn ? element.w : element.h)*ratio" :h="(element.turn ? element.h : element.w)*ratio"
- :x="element.x" :y="element.y" :z="90">
- <div class="h-100 txt-sty w-100 el-center" :class="element.turn ? 're' : ''">@{{ element.code }}</div>
- </vue-drag-resize>
- </div>
- </div>
- </div>
- <div id="loading" class="list-item">
- <i class="fa fa-spinner fa-spin"></i>
- <p style="line-height: 24px;">loading...</p>
- </div>
- </div>
- @include("equipment._detailInfo")
- @include("equipment._location")
- @include("equipment._warehouseDetail")
- @include("equipment._repository")
- </div>
- </body>
- <script src="{{ mix('js/app.js') }}"></script>
- <script src="{{ asset('js/utilities/toast.js') }}"></script>
- <script type="text/javascript">
- var vue = new Vue({
- el:"#container",
- data:{
- group:[],//库区列表
- ws:[],//仓库列表
- locationMapping:{},//库位的信息映射
- warehouseDetail:{},//当前操作的仓库
- repository:{},//当前操作的库区
- warehouses:[], //仓库描述
- repositories:[], //库区
- selected:"", //当前选中的仓库ID
- container:{width:90,height:60}, //容器初始大小
- ratio:20, //设备大小缩放比例值
- name:"", //当前选中的仓库NAME
- isNotEdit:true, //是否允许编辑
- isLoad:true, //是否加载
- currentEl:{}, //当前选中的元素
- coordsMapping:{ //元素信息映射
- "居中":"h-100 w-100 el-center",
- "中上":"text-center",
- "左上":"",
- "左下":"el-left-bottom",
- "右上":"text-right",
- "右下":"el-right-bottom",
- },
- elements:[], //场景元素池
- clientCoords:{}, //坐标系记录
- scale:100, //缩放值
- equipments:[ //备选设备池
- {id:1,w:1.2,h:2.4,grid:2,layer:4,color:"RGB(252,228,214)",describe:"4层高位货架,可设八个标准托盘位"},
- {id:2,w:1.2,h:2.4,grid:2,layer:5,color:"RGB(255,255,255)",describe:"5层高位货架,可设十个标准托盘位"},
- {id:3,w:1.2,h:2.4,grid:1,layer:3,color:"RGB(169,208,142)",describe:"叉车通道,可设三个标准托盘位"},
- {id:4,w:1.2,h:2.4,grid:2,layer:3,color:"RGB(221,235,247)",describe:"叉车通道,可设六个标准托盘位"},
- {id:5,w:1.2,h:1.2,grid:1,layer:4,color:"RGB(255,255,0)",describe:"半组货架,可设四层高四个标准托盘位"},
- {id:6,w:1.2,h:1.2,grid:2,layer:1,color:"RGB(189,215,238)",describe:"叉车通道,顶上两个托盘位"},
- {id:7,w:1.2,h:1.2,grid:1,layer:5,color:"RGB(255,255,5)",describe:"半组货架,可设五层高五个标准托盘位"},
- ],
- currentEq:{ //选中的设备
- el:null,
- obj:null,
- },
- equipmentElements:[], //设备元素池
- grid:true, //设备拖拽是否开启网格
- turn:true, //设备是否翻转
- isLoadLocation:false, //开启加载库位
- baseUrl:"http://127.0.0.1:8112/",
- //baseUrl:"https://swms.baoshi56.com/",
- current:{}, //当前操作的设备
- error:{},
- locations:[],
- currentEqChildIndex:null,
- buildPool:{},
- },
- mounted() {
- this.initPage();
- },
- computed:{
- flipLayer(){
- let layer = [];
- for (let i=this.current.layer;i>0;i--){
- layer.push(i);
- }
- return layer;
- },
- },
- created: function() {
- document.onkeydown = e=> {
- let key = e.keyCode;
- if (key === 8) {
- this.delElement();
- }
- };
- },
- methods:{
- delCoords(){
- this.elements.some((el,index)=>{
- if (this.currentEl.name === el.name &&
- this.currentEl.x === el.x && this.currentEl.y === el.y){
- this.$set(this.elements[index],"removeSign",true);
- return true;
- }
- })
- },
- delEquipment(){
- this.equipmentElements.some((el,index)=>{
- if (this.currentEl.eqId === el.eqId){
- this.$set(this.equipmentElements[index],"removeSign",true);
- return true;
- }
- })
- },
- delElement(){
- if (this.isNotEdit || !this.current)return;
- if (this.currentEl.eqId)this.delEquipment();
- else this.delCoords();
- },
- addCoords(){
- if (this.isNotEdit)return;
- this.elements.push({"x":200,"y":200,"width":2,"height":2,"name":"","coords":"居中","border":["left","top","right","bottom"],"color":"white","index":1})
- },
- clickEditOrSave(){
- if(this.isNotEdit){this.isNotEdit = false;return;}
- let equipments = [];
- let delEquipments = [];
- let elements = [];
- this.equipmentElements.forEach(equipment=>{
- if (equipment.removeSign){
- delEquipments.push(equipment.eqId);
- }else if (equipment.updateCoords){
- equipments.push({
- id:equipment.eqId,
- info:JSON.stringify({x:equipment.x,y:equipment.y,id:equipment.id})
- });
- }
- });
- this.elements.forEach(el=>{
- if (!el.removeSign){
- elements.push(el);
- }
- });
- $.ajax({
- url : this.baseUrl+"warehouse/saveScene",
- type : "POST",
- headers:{'Content-Type':'application/json;charset=utf8'},
- data:JSON.stringify({id:this.selected,warehouse:JSON.stringify(elements),equipment:equipments,delEquipments:delEquipments}),
- success : (res,status)=>{
- if (res.code===200){
- this.isNotEdit = true;
- window.toast.success("场景更改保存成功");
- }else window.toast.error(res.message);
- },
- error : (err,status)=>{
- window.tempTip.show("加载失败");
- },
- complete:(req,status)=>{
- if (status==='timeout'){
- window.toast.error("服务器响应超时");
- }
- },
- timeout:10000,
- })
- },
- initPage(){
- $.ajax({
- url : this.baseUrl+"warehouse/detail",
- type : "GET",
- success : (res,status)=>{
- this.warehouses = res.data;
- //这里获取warehouses
- let id = localStorage.getItem("equipment:warehouse");
- if (!id || !this.warehouses.some(warehouse=>{
- if (warehouse.id == id){
- this.selectedWarehouse(warehouse);
- return true;
- }
- })
- ){
- if (this.warehouses.length>0)this.selectedWarehouse(this.warehouses[0]);
- }
- $("#loading").hide();
- },
- error : (err,status)=>{
- window.tempTip.show("加载失败");
- },
- timeout:3000,
- })
- },
- //备选设备拖拽按下事件
- eqDown(equipment){
- if (this.isNotEdit)return;
- if (this.currentEq.obj!==null)return;
- let wid = (this.turn ? equipment.w : equipment.h)*this.ratio;
- let hei = (this.turn ? equipment.h : equipment.w)*this.ratio;
- let div = document.createElement("div");
- div.style.width = wid+'px';
- div.style.height = hei+'px';
- div.style.backgroundColor = equipment.color;
- div.style.zIndex = '999';
- div.style.position = 'fixed';
- div.style.left = event.clientX+'px';
- div.style.top = event.clientY+'px';
- div.style.border = '1px #0070C0 solid';
- div.style.opacity = '0.5';
- document.getElementById("container").append(div);
- this.currentEq.el = div;
- this.currentEq.obj = equipment;
- },
- //备选设备拖拽移动事件
- eqMove(){
- if (this.isNotEdit)return;
- if (this.currentEq.obj===null)return;
- let x = event.clientX;
- let y = event.clientY;
- setTimeout(()=>{
- this.currentEq.el.style.left = x+'px';
- this.currentEq.el.style.top = y+'px';
- },10);
- },
- //备选设备拖拽松开事件
- eqUp(){
- if (this.isNotEdit)return;
- if (this.currentEq.obj===null)return;
- this.currentEq.el.remove();
- setTimeout(()=>{
- this.currentEq.el.remove();
- this.currentEq.el = null;
- },20);
- let content = document.getElementById("canvasApp");
- let toolWid = document.getElementById("tool").offsetWidth;
- let x = event.clientX-toolWid+content.scrollLeft;
- let y = event.clientY+content.scrollTop;
- if (x>=0 && y>=0){
- let children = [];
- for (let i=0;i<this.currentEq.obj.layer;i++)children.push({});
- let newEquipment = Object.assign({children:children,x:x,y:y}, this.currentEq.obj);
- if (this.turn){
- let wid = newEquipment.w;
- newEquipment.w = newEquipment.h;
- newEquipment.h = wid;
- }
- newEquipment.width = newEquipment.w;
- newEquipment.depth = newEquipment.h;
- this.equipmentElements.push(newEquipment);
- this.current = this.equipmentElements[this.equipmentElements.length-1];
- setTimeout(()=>{
- $("#detailInfo").modal("show");
- },20);
- }
- this.currentEq.obj = null;
- },
- //场景拖拽按下事件
- contentOnmousedown(event){
- if (!this.isNotEdit || this.clientCoords.x!==undefined)return;
- this.clientCoords = {
- x:event.clientX,
- y:event.clientY
- };
- },
- //场景拖拽移动事件
- contentOnmousemove(event){
- if (this.clientCoords.x===undefined)return;
- let diffX = event.clientX-this.clientCoords.x-2;
- let diffY = event.clientY-this.clientCoords.y-2;
- let content = document.getElementById("canvasApp");
- setTimeout(()=>{
- content.scrollTo(content.scrollLeft+diffX,content.scrollTop+diffY);
- },10);
- },
- //场景拖拽松开事件
- contentOnmouseup(){
- this.clientCoords = {};
- },
- onActivated(element){
- if (this.isNotEdit)return;
- this.currentEl = element;
- },
- //场景大小调整事件
- onResizing(newRect){
- if (this.isNotEdit)return;
- this.currentEl.width=this.accDiv(newRect.width,this.ratio);
- this.currentEl.height=this.accDiv(newRect.height,this.ratio);
- },
- accDiv(arg1,arg2){
- let t1=0,t2=0,r1,r2;
- try{t1=arg1.toString().split(".")[1].length}catch(e){}
- try{t2=arg2.toString().split(".")[1].length}catch(e){}
- with(Math){
- r1=Number(arg1.toString().replace(".",""))
- r2=Number(arg2.toString().replace(".",""))
- return this.accMul((r1/r2),pow(10,t2-t1));
- }
- },
- accMul(arg1,arg2){
- let m=0,s1=arg1.toString(),s2=arg2.toString();
- try{m+=s1.split(".")[1].length}catch(e){}
- try{m+=s2.split(".")[1].length}catch(e){}
- return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
- },
- //场景拖拽事件
- onDragging(newRect){
- if (this.isNotEdit)return;
- this.currentEl.x=newRect.left;
- this.currentEl.y=newRect.top;
- $("#canvas").focus();
- },
- equipmentDrag(newRect){
- if (this.isNotEdit)return;
- this.currentEl.x=newRect.left;
- this.currentEl.y=newRect.top;
- this.currentEl.updateCoords = true;
- $("#canvas").focus();
- },
- //仓库切换
- selectedWarehouse(warehouse){
- this.isLoad = false;
- setTimeout(()=>{
- this.selected = warehouse.id;
- this.name = warehouse.name;
- this.ratio = warehouse.ratio;
- this.container = {width:warehouse.length*this.ratio,height:warehouse.width*this.ratio};
- localStorage.setItem("equipment:warehouse", warehouse.id);
- $.ajax({
- url : this.baseUrl+"warehouse/detail/getCoordsInfo",
- type : "post",
- dataType : "JSON",
- data : {id:warehouse.id},
- success : (res,status)=>{
- this.elements = res.data[0] ? JSON.parse(res.data[0]) : [];
- if(res.data[1] && res.data[1].length>0){
- let equipmentElements = [];
- res.data[1].forEach(eq=>{
- let coords = JSON.parse(eq.info);
- let selfInfo = this.equipments[coords.id-1];
- equipmentElements.push(Object.assign({
- eqId:eq.id,
- code:eq.code,
- width:eq.width,
- depth:eq.depth,
- repository:eq.repositoryId,
- x:coords.x,
- y:coords.y,
- turn:!!coords.turn,
- },selfInfo));
- });
- this.equipmentElements = equipmentElements;
- }else this.equipmentElements = [];
- this.repositories = res.data[2];
- this.isNotEdit = true;
- this.isLoad = true;
- },
- error : (err,status)=>{
- window.tempTip.show("坐标信息加载失败");
- },
- timeout:3000,
- })
- },200);
- },
- //文本类属性改变
- changeText(key){
- this.currentEl[key] = event.target.value;
- },
- //数值类属性改变
- changeNumber(key){
- let val = event.target.value;
- this.currentEl[key] = val ? parseFloat(val) : 0;
- },
- //子设备选定时的库位加载
- nextDetail(index){
- if (!this.current.eqId)return;
- this.currentEqChildIndex = index-1;
- this.isLoadLocation = true;
- setTimeout(function (){
- let parentDom = document.getElementById("detailInfo").firstChild.firstChild;
- let childDom = document.getElementById("locationModal").firstChild.firstChild;
- childDom.style.minWidth = parentDom.offsetWidth+'px';
- childDom.style.minHeight = parentDom.offsetHeight+'px';
- $("#locationModal").modal("show");
- },20);
- let children = this.current.children[this.currentEqChildIndex];
- $.ajax({
- url : this.baseUrl+"location/get",
- type : "post",
- dataType : "JSON",
- data : {id:children.id},
- success : (res)=>{
- switch (res.code){
- case 200:
- this.locations = res.data[0];
- this.locationMapping = res.data[1];
- this.isLoadLocation = false;
- setTimeout(()=>{
- let parentDom = document.getElementById("detailInfo").firstChild.firstChild;
- let childDom = document.getElementById("locationModal").firstChild.firstChild;
- childDom.children[1].firstChild.style.height = parentDom.children[1].offsetHeight+'px';
- },10);
- break;
- default:
- window.toast.error(res.message);
- }
- },
- error : (err)=>{
- window.tempTip.setIndex(999);
- window.tempTip.show("网络错误");
- },
- timeout:3000,
- })
- },
- showDetail(equipment){
- if (!this.isNotEdit)return;
- this.current = equipment;
- setTimeout(()=>{
- $("#detailInfo").modal("show");
- this.contentOnmouseup();
- },20);
- $.ajax({
- url : this.baseUrl+"equipment/getChildren",
- type : "post",
- dataType : "JSON",
- data : {id:this.current.eqId},
- success : (res)=>{
- switch (res.code){
- case 200:
- res.data.forEach(eq=>{
- let tab = eq.location_tab.split("-");
- eq.row = Number(tab[0]);
- eq.column = Number(tab[1]);
- });
- this.$set(this.current,"children",res.data);
- break;
- default:
- window.toast.error("服务器错误");
- }
- },
- error : (err)=>{
- window.tempTip.setIndex(999);
- window.tempTip.show("网络错误");
- },
- timeout:3000,
- })
- },
- saveOrUpdate(){
- this.error = {};
- let error = this._checkEquipmentData(this.current);
- if (JSON.stringify(error)!=="{}"){
- this.error = error;return;
- }
- let params = this._formatEquipmentData(this.current);
- params.warehouseDetailId = this.selected;
- $.ajax({
- url : this.baseUrl+"equipment/saveOrUpdate",
- type : "post",
- dataType : "JSON",
- headers:{'Content-Type':'application/json;charset=utf8'},
- data : JSON.stringify(params),
- success : (res)=>{
- switch (res.code){
- case 200:
- this.current.eqId = res.data[0];
- this.current.children.forEach((item,index)=>{
- item.id = res.data[1][index];
- })
- $("#detailInfo").modal("hide");
- window.toast.success("保存成功");
- break;
- case 701:
- this.error = res.data;
- break;
- case 414:
- this.error = {"code":"设备编码重复"};
- this.toast.error(this.error.code);
- break;
- default:
- window.toast.error("服务器错误:"+res.message);
- }
- },
- error : (err)=>{
- window.tempTip.setIndex(999);
- window.tempTip.show("网络错误");
- },
- timeout:3000,
- })
- },
- _checkEquipmentData(equipment){
- let error = {};
- if (!equipment.code)error.code = "设备编号未填写";
- if (!equipment.width)error.width = "设备宽度未填写";
- if (!equipment.depth)error.depth = "设备深度未填写";
- //if (!equipment.repository)error.repositoryId = "设备库区未选定";
- if (equipment.layer !== equipment.children.length)error.children = "设备绑定错误";
- for (let i=0;i<equipment.layer;i++){
- if (!equipment.children[i].height)error["children["+i+"].height"] = "设备高度不得为空"
- if (!equipment.children[i].column && equipment.children[i].column!=0)error["children["+i+"].column"] = "库位列数不得为空"
- if (!equipment.children[i].row && equipment.children[i].row!=0)error["children["+i+"].row"] = "库位行数不得为空"
- }
- return error;
- },
- _formatEquipmentData(equipment){
- let eq = {};
- eq.id = equipment.eqId;
- eq.code = equipment.code;
- eq.repositoryId = equipment.repository;
- eq.info = JSON.stringify({'x':equipment.x,'y':equipment.y,'id':equipment.id,'turn':!!equipment.turn});
- eq.depth = equipment.depth;
- eq.width = equipment.width;
- eq.children = equipment.children;
- return eq;
- },
- removeLocationBind(){
- if (this.isLoadLocation)return;
- this.isLoadLocation = true;
- $.ajax({
- url : this.baseUrl+"location/removeLocationBind",
- type : "post",
- dataType : "JSON",
- data : {id:this.current.children[this.currentEqChildIndex].id},
- success : (res)=>{
- switch (res.code){
- case 200:
- this.current.children[this.currentEqChildIndex].row = 0;
- this.current.children[this.currentEqChildIndex].column = 0;
- this.locations = [];
- window.toast.success("解除成功!");
- break;
- default:
- window.toast.error("库位无法释放,解除失败");
- }
- },
- error : (err)=>{
- window.tempTip.setIndex(999);
- window.tempTip.show("网络错误");
- },
- complete:()=>{
- this.isLoadLocation = false;
- },
- timeout:3000,
- })
- },
- locationBind(){
- if (this.isLoadLocation)return;
- let eq = this.current.children[this.currentEqChildIndex];
- let code = this.current.code+'-'+((this.currentEqChildIndex+1)<10 ? '0'+(this.currentEqChildIndex+1) : (this.currentEqChildIndex+1));
- this.isLoadLocation = true;
- $.ajax({
- url : this.baseUrl+"location/locationBind",
- type : "post",
- dataType : "JSON",
- data : {id:eq.id,row:this.buildPool.row,column:this.buildPool.column,code:code},
- success : (res)=>{
- switch (res.code){
- case 200:
- this.locations = res.data;
- window.toast.success("构建成功!");
- this.current.children[this.currentEqChildIndex].row = Number(this.buildPool.row);
- this.current.children[this.currentEqChildIndex].column = Number(this.buildPool.column);
- this.buildPool = {};
- this.$forceUpdate();
- break;
- default:
- window.toast.error(res.message);
- }
- },
- error : (err)=>{
- window.tempTip.setIndex(999);
- window.tempTip.show("网络错误");
- },
- complete:(req,status)=>{
- this.isLoadLocation = false;
- if (status==='timeout'){
- window.toast.error("库位建立失败,响应超时");
- }
- },
- timeout:3000,
- })
- },
- showAddWarehouseDetail(){
- if (this.ws.length>0){
- $("#warehouseDetail").modal("show");
- return;
- }
- $.ajax({
- url : this.baseUrl+"warehouse/getList",
- type : "get",
- dataType : "JSON",
- success : (res)=>{
- switch (res.code){
- case 200:
- this.ws = res.data;
- $("#warehouseDetail").modal("show");
- break;
- default:
- window.toast.error("仓库获取失败");
- }
- },
- error : (err)=>{
- window.tempTip.setIndex(999);
- window.tempTip.show("网络错误");
- },
- complete:(req,status)=>{
- this.isLoadLocation = false;
- if (status==='timeout'){
- window.toast.error("获取仓库超时");
- }
- },
- timeout:3000,
- })
- },
- addWarehouseDetail(){
- $.ajax({
- url : this.baseUrl+"warehouse/detail",
- type : "post",
- dataType : "JSON",
- headers:{'Content-Type':'application/json;charset=utf8'},
- data : JSON.stringify(this.warehouseDetail),
- success : (res)=>{
- switch (res.code){
- case 200:
- window.toast.success("仓库新建成功");
- this.warehouses = res.data;
- $("#warehouseDetail").modal("hide");
- break;
- default:
- window.toast.error(res.message);
- }
- },
- error : (err)=>{
- window.tempTip.setIndex(999);
- window.tempTip.show("网络错误");
- },
- timeout:3000,
- })
- },
- openRepository(){
- $.ajax({
- url : this.baseUrl+"repository/group",
- type : "get",
- dataType : "JSON",
- data:{id:this.selected},
- success : (res)=>{
- switch (res.code){
- case 200:
- this.group = res.data;
- $("#repository").modal("show");
- break;
- default:
- window.toast.error("获取区域失败");
- }
- },
- error : (err)=>{
- window.tempTip.setIndex(999);
- window.tempTip.show("网络错误");
- },
- complete:(req,status)=>{
- this.isLoadLocation = false;
- if (status==='timeout'){
- window.toast.error("获取区域超时");
- }
- },
- timeout:3000,
- })
- },
- addRepository(){
- this.repository.warehouseDetailId = this.selected;
- $.ajax({
- url : this.baseUrl+"repository/addRepository",
- type : "post",
- dataType : "JSON",
- headers:{'Content-Type':'application/json;charset=utf8'},
- data:JSON.stringify(this.repository),
- success : (res)=>{
- switch (res.code){
- case 200:
- this.repositories.push(res.data);
- $("#repository").modal("hide");
- break;
- default:
- window.toast.error("库区建立失败");
- }
- },
- error : (err)=>{
- window.tempTip.setIndex(999);
- window.tempTip.show("网络错误");
- },
- complete:(req,status)=>{
- this.isLoadLocation = false;
- if (status==='timeout'){
- window.toast.error("建立库区超时");
- }
- },
- timeout:3000,
- })
- },
- },
- filters:{
- qty(code){
- let inv = vue.locationMapping[code];
- if(!inv)return 0;
- return inv.QTY;
- },
- qtyOver(code){
- let inv = vue.locationMapping[code];
- if(!inv)return 0;
- return inv.QTYALLOCATED + inv.QTYMVIN + inv.QTYMVOUT + inv.QTYONHOLD + inv.QTYPA + inv.QTYRPIN + inv.QTYRPOUT;
- },
- childStyle(code){
- let inv = vue.locationMapping[code];
- if (!inv)return '';
- let qty = inv.QTY;
- let other = inv.QTYALLOCATED + inv.QTYMVIN + inv.QTYMVOUT + inv.QTYONHOLD + inv.QTYPA + inv.QTYRPIN + inv.QTYRPOUT;
- return (qty>0 || other>0) ?
- 'color: #fff;background-color: #38c172;border-color: #38c172;' : '';
- },
- }
- });
- </script>
- </html>
|