From c7e0e0a645707b5e1faf4c11421691d56772fae6 Mon Sep 17 00:00:00 2001 From: pang.jiabao <pang_jiabao@163.com> Date: 星期六, 13 四月 2024 14:47:44 +0800 Subject: [PATCH] 增加库位平面图 --- src/main/webapp/views/home/map.html | 484 ++++------------------------------------------------ 1 files changed, 44 insertions(+), 440 deletions(-) diff --git a/src/main/webapp/views/home/map.html b/src/main/webapp/views/home/map.html index 1108a13..cca2125 100644 --- a/src/main/webapp/views/home/map.html +++ b/src/main/webapp/views/home/map.html @@ -20,20 +20,7 @@ margin-top: 1px; } - /*.pointBox {*/ - /* background: #bababa;*/ - /* width: 40px;*/ - /* height: 40px;*/ - /* margin-right: 1px;*/ - /* display: flex;*/ - /* justify-content: center;*/ - /* align-items: center;*/ - /* font-size: 14px;*/ - /* user-select: none;*/ - /* color: #fff;*/ - /*}*/ - - .pointBox2 { + .pointBox { background: #fffef9; width: 35px; height: 35px; @@ -44,36 +31,13 @@ font-size: 14px; user-select: none; color: #fff; - /*transform: perspective(130px) rotateX(30deg) translateZ(-20px);*/ - /*box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);*/ - /*border-radius: 50% 20% / 10% 40%;*/ - } - - .pointBox { - background: #fffef9; - width: 300px; - height: 35px; - margin-right: 1px; - display: flex; - justify-content: center; - align-items: center; - font-size: 14px; - user-select: none; - color: #fff; - /*transform: perspective(130px) rotateX(30deg) translateZ(-20px);*/ - /*box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);*/ - /*border-radius: 50% 20% / 10% 40%;*/ } .pointBox:hover{ - /*background: #20a162;*/ - /*background: #55bb8a;*/ background: #945833; - /*background: #20894d;*/ } .pointBoxEmpty { - /*background: #12a182;*/ background: #57c3c2; } @@ -89,20 +53,12 @@ background: #e2c027; } - .pointBoxGreen { - background: #945833; - } - .pointBoxBlue { background: #89BCEF; } .pointBoxRed { background: #ee4866; - } - - .pointBoxStart { - background: #ffaa00; } .pointBoxEnd { @@ -121,15 +77,6 @@ background: #ffffff; } - .pointBoxSelected { - /*background: #945833 !important;*/ - background: #20894d !important; - } - - .pointBoxSearch { - background: #8076a3; - } - .crnLine{ width: auto; height: 2px; @@ -138,31 +85,8 @@ position: relative; } - /*.crnBox{*/ - /* width: 120px;*/ - /* height: 40px;*/ - /* background: url("../../static/image/Crane_manual.png") no-repeat;*/ - /* position: absolute;*/ - /* top: -25px;*/ - /* left: -120px;*/ - /* transition:left 2s;*/ - /* cursor: pointer;*/ - /*}*/ - - /*.carBox{*/ - /* width: 40px;*/ - /* height: 40px;*/ - /* background: url("../../static/image/ste/car.png") no-repeat;*/ - /* background-size: 100% 100%;*/ - /* position: absolute;*/ - /* top: 0;*/ - /* left: 0;*/ - /* transition:left 2s;*/ - /* cursor: pointer;*/ - /*}*/ - .popBox { - position: absolute; + position: fixed; } /*鍗$墖鏍峰紡start*/ @@ -400,32 +324,11 @@ } /*妤煎眰鎺у埗end*/ - /*鎼滅储start*/ - .search-input { - line-height: 28px; - border: 2px solid transparent; - border-bottom-color: #777; - padding: .2rem 0; - outline: none; - background-color: transparent; - color: #0d0c22; - transition: .3s cubic-bezier(0.645, 0.045, 0.355, 1); - } - .search-input:focus, .search-input:hover { outline: none; padding: .2rem 1rem; border-radius: 1rem; border-color: #7a9cc6; - } - - .search-input::placeholder { - color: #777; - } - - .search-input:focus::placeholder { - opacity: 0; - transition: opacity .3s; } /*鎼滅储end*/ @@ -440,10 +343,13 @@ </style> </head> <body> -<div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap:nowrap; " @click="bgClick()"> +<div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap:nowrap; " @click="bgClick()" > <div style="flex: 3;overflow: auto; " :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}"> <div style="width: 100%;overflow: auto;"> <div class="pointContainer" v-for="(x,index) in map" :key="index"> + <div style="width: 40px; display: flex;justify-content: flex-end;align-items: center;"> + {{ getRealRowByX(index) }} + </div> <div v-if="index != 0 && (index != map.length-1)" v-for="(y,idx) in x" :key="idx"> <div v-if="idx != 0 && (idx != map[index].length-1)"> <div v-if="map[index][idx].value < 0" style="visibility: hidden;" class="pointBox"></div> @@ -459,87 +365,35 @@ <div v-else-if="map[index][idx].locSts == 'X'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxEnd">{{ map[index][idx].locSts }}</div> <div v-else class="pointBox pointBoxDefault" :class="{'pointBoxSearch':map[index][idx].searchStatus}">{{ map[index][idx].locSts }}</div> </div> - - <!--鍫嗗灈鏈�--> - <div v-else-if="map[index][idx].value == 3"> - <div v-if="idx == 1" class="crnLine" :style="{width:pointContainerWidth + 'px'}"> -<!-- <div v-if="index == 2" @contextmenu.prevent="clickCrnBox($event,1)" :style="{left:crnList[0].left + 'px'}" class="crnBox" id="crnBox1"></div>--> -<!-- <div v-else @contextmenu.prevent="clickCrnBox($event,2)" :style="{left:crnList[1].left + 'px'}" class="crnBox" id="crnBox2"></div>--> - </div> - </div> - - <div v-else-if="map[index][idx].value == 4" class="pointBox pointBoxStation" - @contextmenu.prevent="rightEvent(index,idx,$event)"></div> - <div v-else-if="map[index][idx].value == 5" class="pointBox chargeStation" - @contextmenu.prevent="rightEvent(index,idx,$event)"></div> - <div v-else-if="map[index][idx].value == 9" class="pointBox pointBoxRed" - @contextmenu.prevent="rightEvent(index,idx,$event)"></div> - <div v-else-if="map[index][idx].value == 10" class="pointBox pointBoxRed" style="visibility: hidden" - @contextmenu.prevent="rightEvent(index,idx,$event)"> - <!--绌挎杞﹁建閬�--> - </div> - </div> </div> - - <div style="width: 40px; display: flex;justify-content: flex-end;align-items: center;"> - {{ getRealRowByX(index) }} - </div> - </div> </div> </div> - <div style="padding: 20px;flex: 1;margin-top: -70px;"> + <div style="padding: 20px;flex: 1;margin-top: -70px;"> <el-slider v-model="showScale" :marks="showScaleMarks"></el-slider> <div style="display: flex;justify-content: space-between;flex-wrap: wrap;"> - <div class="hoverCard" style="width: 100%;"> - <div class="card-details" style="place-content: normal;height: auto;"> - <div class="text-body" style="display: flex;flex-wrap: wrap;"> - <div style="width: 100%;margin-bottom: 20px;"> - <div style="display: flex;justify-content: space-between;"> - <div><input v-model="searchMatnr" placeholder="鐗╂枡鍙�" type="text" class="search-input"></div> - <div style="margin-left: 20px"><input v-model="searchOrderNo" placeholder="璁㈠崟鍙�" type="text" class="search-input"></div> - </div> - <div style="display: flex;justify-content: space-between;margin-top: 10px;"> - <div><input style="width: 110px;" v-model="searchMaktx" placeholder="鐗╂枡鍚嶇О" type="text" class="search-input"></div> - <div><input style="width: 110px;" v-model="searchSpecs" placeholder="瑙勬牸" type="text" class="search-input"></div> - <div><input style="width: 110px;" v-model="searchLocNo" placeholder="搴撲綅鍙�" type="text" class="search-input"></div> - </div> - <button style="width: 100%;margin-top: 10px;" @click="searchLoc" class="layui-btn layui-btn-sm">鎼滅储</button> - </div> - <div> - <button @click="init" class="layui-btn layui-btn-sm">鍒锋柊</button> - </div> - <div style="margin-left: 10px;"> - <button @click="resetSearch" class="layui-btn layui-btn-sm">閲嶇疆</button> - </div> -<!-- <div style="margin-left: 10px;">--> -<!-- <button @click="locToLoc2" class="layui-btn layui-btn-sm">渚ц竟绉诲簱</button>--> -<!-- </div>--> -<!-- <div v-if="!locOutStatus" style="margin-left: 10px;">--> -<!-- <button @click="locOutStatus = true" class="layui-btn layui-btn-sm">鍑哄簱閫夋嫨</button>--> -<!-- </div>--> - <div v-else style="margin-left: 10px;border: 1px red solid;display: flex;"> - <div> - <button @click="cancelSelectLoc" class="layui-btn layui-btn-sm">鍙栨秷閫夋嫨</button> - </div> - <div style="display: flex;justify-content: center;align-items: center;"> - <select v-model="outSite"> - <option v-for="(item,index) in outSites" :key="index" :value="item.siteId">{{ item.desc }}</option> - </select> - </div> - <div> - <button @click="locOut" class="layui-btn layui-btn-sm">鍑哄簱</button> - </div> + <div class="hoverCard"> + <div class="card-details"> + <p class="text-title" style="text-align: center;">搴撳尯 {{currentArea}}</p> + <div class="text-body" style="display: flex;"> + <div class="floorSelect"> + <label for="a">A鍖�</label> + <input id="a" type="radio" name="k" v-model="currentArea" value="A" checked=""> + <label for="b">B鍖�</label> + <input id="b" type="radio" v-model="currentArea" name="k" value="B"> + <label for="c">C鍖�</label> + <input id="c" type="radio" v-model="currentArea" name="k" value="C"> + <label for="d">D鍖�</label> + <input id="d" type="radio" v-model="currentArea" name="k" value="D"> + <label for="e">E鍖�</label> + <input id="e" type="radio" v-model="currentArea" name="k" value="E"> </div> </div> </div> - <button class="card-button">鍔熻兘鍖�</button> + <button class="card-button">搴撳尯 {{currentArea}}</button> </div> - - - - <div class="hoverCard"> + <div class="hoverCard" id="myElement"> <div class="card-details"> <p class="text-title" style="text-align: center;">搴撲綅灞� {{currentLev}}</p> <div class="text-body" style="display: flex;"> @@ -550,70 +404,18 @@ <input id="02" type="radio" v-model="currentLev" name="r" value="2"> <label for="03">3F</label> <input id="03" type="radio" v-model="currentLev" name="r" value="3"> - + <label for="04">4F</label> + <input id="04" type="radio" v-model="currentLev" name="r" value="4"> + <label for="05">5F</label> + <input id="05" type="radio" v-model="currentLev" name="r" value="5"> + <label for="06">6F</label> + <input id="06" type="radio" v-model="currentLev" name="r" value="6"> + <label for="07">7F</label> + <input id="07" type="radio" v-model="currentLev" name="r" value="7"> </div> </div> </div> <button class="card-button">妤煎眰 {{currentLev}}F</button> - </div> - -<!-- <div class="hoverCard">--> -<!-- <div class="card-details">--> -<!-- <p class="text-title" style="text-align: center;">搴撳尯 {{areaName}}</p>--> -<!-- <div class="text-body" style="display: flex;">--> -<!-- <div class="floorSelect">--> -<!-- <label for="area01">A鍖�</label>--> -<!-- <input id="area01" type="radio" name="r" v-model="area" value="1" checked="">--> -<!-- <label for="area03">B鍖�</label>--> -<!-- <input id="area03" type="radio" v-model="area" name="r" value="3">--> -<!-- <label for="area04">C鍖�</label>--> -<!-- <input id="area04" type="radio" v-model="area" name="r" value="4">--> -<!-- <label for="area05">D鍖�</label>--> -<!-- <input id="area05" type="radio" v-model="area" name="r" value="5">--> - - -<!-- </div>--> -<!-- </div>--> -<!-- </div>--> -<!-- <button class="card-button">搴撳尯 {{areaName}}</button>--> -<!-- </div>--> - - <div class="hoverCard"> - <div class="card-details"> - <div class="text-body" style="display: flex;justify-content: space-around;flex-wrap: wrap;"> - <div style="flex: 1;margin-top: 10px;"> - <div style="font-size: 10px;">绌哄簱浣�</div><div class="pointBox2 pointBoxBlue">O</div> - </div> - <div style="flex: 1;margin-top: 10px;"> - <div style="font-size: 10px;">鍦ㄥ簱</div><div class="pointBox2 pointBoxRed">F</div> - </div> -<!-- <div style="flex: 1;margin-top: 10px;">--> -<!-- <div style="font-size: 10px;">绌烘澘</div><div class="pointBox2 pointBoxEmpty">D</div>--> -<!-- </div>--> -<!-- <div style="flex: 1;margin-top: 10px;">--> -<!-- <div style="font-size: 10px;">鍑哄簱涓�</div><div class="pointBox2 pointBoxOut">P</div>--> -<!-- </div>--> -<!-- <div style="flex: 1;margin-top: 10px;">--> -<!-- <div style="font-size: 10px;">鍑哄簱棰勭害</div><div class="pointBox2 pointBoxOutYy">R</div>--> -<!-- </div>--> -<!-- <div style="flex: 1;margin-top: 10px;">--> -<!-- <div style="font-size: 10px;">鍏ュ簱棰勭害</div><div class="pointBox2 pointBoxInYy">S</div>--> -<!-- </div>--> - <div style="flex: 1;margin-top: 10px;"> - <div style="font-size: 10px;">鎼滅储</div><div class="pointBox2 pointBoxSearch"></div> - </div> -<!-- <div style="flex: 1;margin-top: 10px;">--> -<!-- <div style="font-size: 10px;">閫夋嫨</div><div class="pointBox2 pointBoxSelected"></div>--> -<!-- </div>--> - <div style="flex: 1;margin-top: 10px;"> - <div style="font-size: 10px;text-align: center">鍏朵粬</div><div class="pointBox2 pointBoxDefault"></div> - </div> -<!-- <div style="flex: 1;margin-top: 10px;">--> -<!-- <div style="font-size: 10px;text-align: center">鍐荤粨</div><div class="pointBox2 pointBoxEnd"></div>--> -<!-- </div>--> - </div> - </div> - <button class="card-button">搴撲綅鐘舵��</button> </div> </div> @@ -643,42 +445,10 @@ <div style="margin-top: 5px;"> <button class="layui-btn layui-btn-sm" @click="openLocDetail(map[mapI][mapJ].locNo)">搴撲綅璇︽儏</button> </div> -<!-- <div style="margin-top: 5px;">--> -<!-- <button v-if="map[mapI][mapJ].locSts == 'F'" class="layui-btn layui-btn-sm" @click="locMove(map[mapI][mapJ].locNo)">搴撲綅绉昏浆</button>--> -<!-- <button v-else-if="map[mapI][mapJ].locSts == 'D'" class="layui-btn layui-btn-sm" @click="locMove(map[mapI][mapJ].locNo)">搴撲綅绉昏浆</button>--> -<!-- <button v-else class="layui-btn layui-btn-sm layui-btn-disabled" disabled>搴撲綅绉昏浆</button>--> -<!-- </div>--> </div> </div> </div> </div> - - <div v-if="crnBox" @click.stop="" :style="{left: crnBoxLeft,top: crnBoxTop}" class="popBox"> - <div class="apple-card"> - <div class="tools"> - <div class="circle" @click.stop="crnBox = false"> - <span class="red box"></span> - </div> - <div class="circle"> - <span class="yellow box"></span> - </div> - <div class="circle"> - <span class="green box"></span> - </div> - </div> - <div class="card-content"> - <div>鍫嗗灈鏈哄彿锛歿{crnList[crnBox - 1].crnNo}}</div> - <div>宸ヤ綔鍙凤細{{crnList[crnBox - 1].wrkNo}}</div> - <div>婧愬簱浣嶏細{{crnList[crnBox - 1].frmLocno}}</div> - <div>鐩爣搴撲綅锛歿{crnList[crnBox - 1].toLocno}}</div> - <div>鍙叆锛歿{crnList[crnBox - 1].inEnable}}</div> - <div>鍙嚭锛歿{crnList[crnBox - 1].outEnable}}</div> - <div>鐘舵�侊細{{crnList[crnBox - 1].crnSts$}}</div> - <div>寮傚父锛歿{crnList[crnBox - 1].crnErr$}}</div> - </div> - </div> - </div> - </div> <script> @@ -701,6 +471,7 @@ rightBoxLeft: "0px", pointContainerWidth: 0, currentLev: 1, + currentArea: 'A', area:1, areaName:"绔嬪簱", crnList: null, @@ -734,11 +505,6 @@ this.init() this.getOutSite() - - // setInterval((that) => { - // //瀹氭椂鑾峰彇鍫嗗灈鏈烘暟鎹� - // that.getCrnData() - // },1000,this) }, watch: { map: { @@ -751,35 +517,18 @@ deep: true, handler(val) { this.init() - if (this.searchMatnr != "" - || this.searchOrderNo != "" - || this.searchSpecs != "" - || this.searchMaktx != "" - || this.searchLocNo != "") { - this.searchLoc() - } + this.searchLoc() } }, - area: { + currentArea: { deep: true, handler(val) { - if (val == 1){ - this.areaName = "A鍖�" - - }else if (val == 3){ - this.areaName = "B鍖�" + let element = document.getElementById("myElement"); + if (val === "A") { + element.style.display = "block"; + } else { + element.style.display = "none"; } - else if (val == 4){ - this.areaName = "C鍖�" - } - else if (val == 5){ - this.areaName = "D鍖�" - } - else if (val == 6){ - this.areaName = "E鍖�" - } - - this.init() if (this.searchMatnr != "" || this.searchOrderNo != "" @@ -798,7 +547,7 @@ url: baseUrl + "/map/getData/auth", data:{ lev : this.currentLev, - area : this.area + area : this.currentArea }, headers: {'token': localStorage.getItem('token')}, method: "get", @@ -843,25 +592,10 @@ let data = this.map let rowData = data[x] - for (var i = 1; i < rowData.length; i++) { - - if (this.area == 1){ - if (rowData[i].locNo != undefined) { - let locNo = rowData[i].locNo; - return "#" + parseInt(locNo.substr(2, 2)); - } - }else if (this.area == 6){ - if (rowData[i].locNo != undefined) { - let locNo = rowData[i].locNo; - return "#" + parseInt(locNo.substr(7, 2)); - } - } - else { - if (rowData[i].locNo != undefined) { - let locNo = rowData[i].locNo; - return "#" + parseInt(locNo.substr(7, 2)); - } + let locNo = rowData[i].locNo; + if (locNo != undefined) { + return "#" + parseInt(locNo.substr(1, 2)); } } @@ -1040,111 +774,6 @@ } }) - // let result = true;//鏈�缁堢粨鏋� - // //妫�娴嬪簱浣嶆槸鍚︾己灏戦�夋嫨瀵艰嚧涓嶅畬鏁� - // bayList.forEach((item,index) => { - // //鎼滅储褰撳墠宸烽亾鏈夋晥鍦ㄥ簱list - // //涓婂崐閮ㄥ垎锛屽贩閬� - // let topList = [] - // for (var i = 8; i >= 3; i--) { - // let obj = { - // x: i, - // y: index, - // status: false, - // locNo: map[i][index].locNo - // } - // - // if (map[i][index].locSts == 'F') { - // //鍦ㄥ簱鐘舵�侊紝瀛樺叆宸烽亾鍦ㄥ簱list - // topList.push(obj) - // } - // } - // - // //涓嬪崐閮ㄥ垎锛屽贩閬� - // let bottomList = [] - // for (var i = 9; i < 14; i++) { - // let obj = { - // x: i, - // y: index, - // status: false, - // locNo: map[i][index].locNo - // } - // - // if (map[i][index].locSts == 'F') { - // //鍦ㄥ簱鐘舵�侊紝瀛樺叆宸烽亾鍦ㄥ簱list - // bottomList.push(obj) - // } - // } - // - // // if (topList.length == 0 && bottomList.length == 0) { - // // result = false; - // // } - // - // for (var i = 0; i < item.length; i++) { - // if (item[i].x > 8) { - // //涓嬪崐閮ㄥ垎鏁版嵁 - // let index = this.searchDataIndex(item[i],bottomList) - // // console.log(item[i],bottomList,index) - // if (index == -1) { - // continue - // } - // bottomList[index].status = true - // }else { - // //涓婂崐閮ㄥ垎鏁版嵁 - // let index = this.searchDataIndex(item[i],topList) - // // console.log(item[i],topList,index) - // if (index == -1) { - // continue - // } - // topList[index].status = true - // } - // - // } - // - // let tmp1 = [] - // let tmp2 = [] - // for (var i = item.length - 1; i >= 0; i--) { - // if (item[i].x < 9) { - // tmp1.push(item[i]); - // } - // } - // for (var i = 0; i < item.length; i++) { - // if (item[i].x > 8) { - // tmp2.push(item[i]); - // } - // } - // - // if (tmp1.length > 0) { - // //鍒ゆ柇涓婂崐閮ㄥ垎鍑哄簱鏄惁閫夋嫨瀹屾暣 - // let topIndex = this.searchDataIndex(tmp1[0],topList); - // if (topIndex != -1) { - // for (var i = topIndex; i < topList.length; i++) { - // if (topList[i].status != true) { - // result = false; - // } - // } - // } - // } - // - // if (tmp2.length > 0) { - // //鍒ゆ柇涓嬪崐閮ㄥ垎鍑哄簱鏄惁閫夋嫨瀹屾暣 - // let bottomIndex = this.searchDataIndex(tmp2[0],bottomList) - // if (bottomIndex != -1) { - // for (var i = bottomIndex; i < bottomList.length; i++) { - // if (bottomList[i].status != true) { - // result = false; - // } - // } - // console.log(tmp2[0],bottomList,bottomIndex) - // } - // } - // }) - // - // if (!result) { - // $layui.layer.msg("鍑哄簱璺緞閫夋嫨鏈夎"); - // return; - // } - //鍑嗗鍑哄簱 if (this.outSite == null) { $layui.layer.msg("璇烽�夋嫨鍑哄簱绔欑偣"); @@ -1252,12 +881,6 @@ this.locOutStatus = false }, searchLoc() { - //閫氳繃鐗╂枡缂栧彿鎼滅储搴撲綅鍙� - // if (this.searchValue == "") { - // $layui.layer.msg("璇疯緭鍏ョ墿鏂欑紪鍙锋垨璁㈠崟鍙�"); - // return; - // } - let that = this; $.ajax({ url: baseUrl + "/map/searchData/auth", @@ -1293,25 +916,6 @@ }) }) - // data.forEach((item,index) => { - // let locNo = item.locNo - // let y = parseInt(locNo.substr(2,3)) - // let x = parseInt(locNo.substr(0,2)) - // console.log(x) - // // if ( (x+2) %5 === 0 ) { - // // x = 5*item.crnNo-2; - // // }else - // if(x<17){ - // if (x % 4 == 0 || (x+1) % 4 == 0){ - // x = item.crnNo+x - // }else { - // x = item.crnNo+x-1 - // } - // } - // console.log(x) - // - // tmp[x][y].searchStatus = true//鎼滅储鏍囪 - // }) data.forEach((item,i) => { let locNo = item.locNo tmp.forEach((item,index) => { -- Gitblit v1.9.1