|  |  |  | 
|---|
|  |  |  | <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all"> | 
|---|
|  |  |  | <link rel="stylesheet" href="../../static/css/admin.css?v=318" media="all"> | 
|---|
|  |  |  | <link rel="stylesheet" href="../../static/css/cool.css" media="all"> | 
|---|
|  |  |  | <link rel="stylesheet" href="../../static/css/element.css"> | 
|---|
|  |  |  | <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> | 
|---|
|  |  |  | <script type="text/javascript" src="../../static/layui/layui.js"></script> | 
|---|
|  |  |  | <script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script> | 
|---|
|  |  |  | <script type="text/javascript" src="../../static/js/common.js"></script> | 
|---|
|  |  |  | <script type="text/javascript" src="../../static/js/vue.min.js"></script> | 
|---|
|  |  |  | <script src="../../static/js/element.js"></script> | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | .pointContainer { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /*.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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /*.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; | 
|---|
|  |  |  | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | <div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: wrap;" @click="bgClick()"> | 
|---|
|  |  |  | <div style="flex: 12;"> | 
|---|
|  |  |  | <div style="flex: 12;" :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}"> | 
|---|
|  |  |  | <div> | 
|---|
|  |  |  | <div class="pointContainer" v-for="(x,index) in map" :key="index"> | 
|---|
|  |  |  | <div v-if="index != 0 && (index != map.length-1)" v-for="(y,idx) in x" :key="idx"> | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div style="width: 40px;display: flex;justify-content: center;align-items: center;"> | 
|---|
|  |  |  | {{ getRealRowByX(index) }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="padding: 20px;flex: 5;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 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 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> | 
|---|
|  |  |  | 
|---|
|  |  |  | searchLocNo: "", | 
|---|
|  |  |  | outSite: null, | 
|---|
|  |  |  | outSites: null, | 
|---|
|  |  |  | showScale: 75, //控制地图显示大小比例 | 
|---|
|  |  |  | showScaleMarks: {//比例滑动条显示标记 | 
|---|
|  |  |  | 0: "0%", | 
|---|
|  |  |  | 50: { | 
|---|
|  |  |  | style: { | 
|---|
|  |  |  | color: '#1989FA' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | label: "50%" | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 100: "100%", | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created(){ | 
|---|
|  |  |  | this.init() | 
|---|
|  |  |  | 
|---|
|  |  |  | this.map = data | 
|---|
|  |  |  | this.printData() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getRealRowByX(x) { | 
|---|
|  |  |  | //获取真实库位行号,通过坐标x | 
|---|
|  |  |  | let data = this.map | 
|---|
|  |  |  | let rowData = data[x] | 
|---|
|  |  |  | for (var i = 1; i < rowData.length; i++) { | 
|---|
|  |  |  | if (rowData[i].locNo != undefined) { | 
|---|
|  |  |  | let locNo = rowData[i].locNo; | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(0, 2)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ""; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | rightEvent(x, y, e) { | 
|---|
|  |  |  | this.rightBox = true | 
|---|
|  |  |  | this.mapI = x | 
|---|