| | |
| | | .pointContainer { |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 1px; |
| | | /*margin-top: 1px;*/ |
| | | } |
| | | |
| | | .pointBox { |
| | | background: #bababa; |
| | | width: 40px; |
| | | height: 40px; |
| | | margin-right: 1px; |
| | | /*margin-right: 1px;*/ |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | |
| | | </head> |
| | | <body> |
| | | <div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: wrap;" @click="bgClick()"> |
| | | <div style="flex: 12;display: flex;" :style="{scale:showScale/100.0,marginTop:(showScale-100)*0.7 + 'px'}"> |
| | | <div style="flex: 18;display: flex;justify-content: center;" :style="{zoom:showScale/100.0,marginTop:(showScale)*4 + 'px'}"> |
| | | <div style="margin-top: -110px;"> |
| | | <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 style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 2" :style="{background: currentLev==2?'red':''}">2F</button></div> |
| | | <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 3" :style="{background: currentLev==3?'red':''}">3F</button></div> |
| | | <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 4" :style="{background: currentLev==4?'red':''}">4F</button></div> |
| | | <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 5" :style="{background: currentLev==5?'red':''}">5F</button></div> |
| | | <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 6" :style="{background: currentLev==6?'red':''}">6F</button></div> |
| | | <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 7" :style="{background: currentLev==7?'red':''}">7F</button></div> |
| | | <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 8" :style="{background: currentLev==8?'red':''}">8F</button></div> |
| | | <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 9" :style="{background: currentLev==9?'red':''}">9F</button></div> |
| | | <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 10" :style="{background: currentLev==10?'red':''}">10F</button></div> |
| | | </div> |
| | | </div> |
| | | <div style="padding: 40px 20px 10px 10px;flex: 5;margin-top: -70px;"> |
| | | <div style="padding: 40px 20px 10px 10px;" :style="window.innerWidth < 2100 ? 'margin-top: 0px;' : '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%;"> |
| | |
| | | searchLocNo: "", |
| | | outSite: null, |
| | | outSites: null, |
| | | showScale: 80, //控制地图显示大小比例 |
| | | showScale: 65, //控制地图显示大小比例 |
| | | showScaleMarks: {//比例滑动条显示标记 |
| | | 0: "0%", |
| | | 50: { |
| | |
| | | created(){ |
| | | this.init() |
| | | |
| | | this.getOutSite() |
| | | |
| | | // setInterval((that) => { |
| | | // //定时获取堆垛机数据 |
| | | // that.getCrnData() |
| | | // },1000,this) |
| | | // this.getOutSite() |
| | | }, |
| | | watch: { |
| | | map: { |
| | |
| | | |
| | | }) |
| | | }) |
| | | data.forEach((item,index) => { |
| | | let locNo = item.locNo |
| | | let y = parseInt(locNo.substr(2,3)) |
| | | let x = parseInt(locNo.substr(0,2)) |
| | | if (x >= 2 && x <= 12) { |
| | | x += 1; |
| | | }else if (x == 13) { |
| | | x += 2; |
| | | } |
| | | |
| | | tmp[x][y].searchStatus = true//搜索标记 |
| | | data.forEach((item,i) => { |
| | | let locNo = item.locNo |
| | | tmp.forEach((item,index) => { |
| | | item.forEach((val,idx) => { |
| | | if (tmp[index][idx].locNo == locNo) { |
| | | tmp[index][idx].searchStatus = true//搜索标记 |
| | | } |
| | | }) |
| | | }) |
| | | }) |
| | | that.map = tmp |
| | | $layui.layer.msg("搜索成功"); |