| | |
|---|
| | | </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 < 2000 ? '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: { |
|---|
| | |
|---|
| | | this.init() |
|---|
| | | |
|---|
| | | this.getOutSite() |
|---|
| | | |
|---|
| | | // setInterval((that) => { |
|---|
| | | // //定时获取堆垛机数据 |
|---|
| | | // that.getCrnData() |
|---|
| | | // },1000,this) |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | map: { |
|---|
