<template>
|
<div class="screen1-center" v-loading="loading">
|
<div class="center-box">
|
<div class="center-layer1">
|
<div class="store-blocks-frame">
|
<!-- *************************** -->
|
<div class="store-block-item"
|
:class="[machineWarn[3] === '故障' ? 'abnormal' : machineWarn[3] === '空闲' ? 'empty' : '']">
|
<div class="shelves-row shelves-row2"></div>
|
<div class="shelves-row3"></div>
|
|
<div class="line-row">
|
<div class="line-track-row">
|
<div class="machine-box a1" :style="{ left: machinePos[3] + 'px' }"></div>
|
</div>
|
</div>
|
<!-- <div class="rate-block">
|
<div class="rate-box">占用:{{storeRate[3]}}</div>
|
</div> -->
|
</div>
|
|
<div class="store-block-item store-block-item2"
|
:class="[machineWarn[2] === '故障' ? 'abnormal' : machineWarn[2] === '空闲' ? 'empty' : '']">
|
<div class="shelves-row4 "></div>
|
<!-- <div class="line-row">
|
<div class="line-track-row">
|
<div class="machine-box" :style="{left:machinePos[2]+'px'}"></div>
|
</div>
|
</div> -->
|
<!-- <div class="shelves-row4 shelves-row2"></div> -->
|
<!-- <div class="rate-block">
|
<div class="rate-box">占用:{{storeRate[2]}}</div>
|
</div> -->
|
</div>
|
|
<!-- *************************** -->
|
</div>
|
</div>
|
<!-- <div class="center-layer2" :class="[rgvWarn==='故障'?'abnormal':rgvWarn==='空闲'?'empty':'']">
|
<div class="rgv-box" :style="{top:rgvPos+'px'}"></div>
|
<div class="rgv-block"></div>
|
</div> -->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'screen1Center',
|
props:{
|
hideSheB:{
|
type:Boolean
|
}
|
},
|
data() {
|
return {
|
posLimit: {
|
machine: {
|
view: {
|
left: -2,
|
right: 329
|
},
|
server: {
|
left: 18986,
|
right: 1123
|
}
|
},
|
rgv: {
|
view: {
|
top: 21,
|
bottom: 235
|
},
|
server: {
|
top: 457,
|
bottom: 18133
|
}
|
}
|
},
|
storeRate: ['50%', '50%', '50%', '50%'],
|
rgvWarn: false,
|
rgvPos: 21,
|
rgvServerPos: 457,
|
rgvStationPos: [21, 61, 71, 77, 118, 137, 177, 182, 195, 233, 235],
|
rgvStationServerPos: [457, 3571, 5030, 5239, 8392, 10104, 13288, 13410, 14970, 18130, 18133],
|
machineWarn: [false, false, true, false],
|
machinePos: [10, 10, 10, 10],
|
machineServerPos: [18986, 18986, 18986, 18986],
|
loading: false,
|
refreshInterval: null,
|
refreshIntervalX: null
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
// watch: {
|
// $route: {
|
// handler(to, from) {
|
// console.log(to.from )
|
// if (to.from == '/screen1') {
|
// this.clearInterVal()
|
// }
|
// },
|
// immediate: true
|
// }
|
// },
|
beforeDestroy() {
|
this.clearInterVal()
|
},
|
methods: {
|
init() {
|
this.getData(() => {
|
this.getPosData(() => {
|
this.createInterval()
|
this.createIntervalX()
|
})
|
})
|
},
|
getData(callback) {
|
this.loading = false;
|
callback && callback(true)
|
// this.loading = true;
|
// this.$api.get('GetAreaStore',{},{block:'screen',needToken:false}).then((d)=>{
|
// this.rgvWarn = d.RgvState;
|
// this.handleMachineData(d)
|
// this.loading = false;
|
// callback && callback(true)
|
// }).catch(()=>{
|
// this.loading = false;
|
// callback && callback(false)
|
// })
|
},
|
getPosData(callback) {
|
// 跳页面 停止请求- 设备位置请求
|
if(this.hideSheB){
|
this.clearInterVal()
|
return
|
}
|
this.$api.get('pagedetails', {}, { block: 'screen', needToken: false }).then((d) => {
|
d.statisticalAnalysis.map(item => {
|
let rateB = 40
|
console.log(item.key)
|
if (item.key === '一号堆垛机位置') {
|
if(item.value>0){
|
//this.machinePos[3] = (item.value - 1) * rateB + 25
|
if(item.value==1){this.machinePos[3]=10}
|
else if(item.value==2){this.machinePos[3]=55}
|
else if(item.value==3){this.machinePos[3]=95}
|
else if(item.value==4){this.machinePos[3]=135}
|
else if(item.value==5){this.machinePos[3]=175}
|
else if(item.value==6){this.machinePos[3]=220}
|
else if(item.value==7){this.machinePos[3]=260}
|
else if(item.value==8){this.machinePos[3]=300}
|
else if(item.value==9){this.machinePos[3]=345}
|
else if(item.value==10){this.machinePos[3]=385}
|
else if(item.value==11){this.machinePos[3]=425}
|
}else{
|
this.machinePos[3] = 10
|
}
|
}else{
|
|
}
|
if (item.key == '二号堆垛机位置') {
|
if(item.value>0){
|
this.machinePos[0] = item.value * rateB + 10
|
}else{
|
this.machinePos[0] = 10
|
}
|
}
|
})
|
// console.log(this.machinePos)
|
// this.calRgvPos(d.RgvCoordinate)
|
// this.handleMachinePosData(d)
|
callback && callback(true)
|
}).catch(() => {
|
//this.calRgvPos(18138)
|
callback && callback(false)
|
})
|
},
|
calRgvPos(val) {
|
this.formatRgvServerPos(val)
|
let n = 0;
|
if (this.rgvServerPos < this.rgvStationServerPos[0]) {
|
n = 0;
|
} else if (this.rgvServerPos >= this.rgvStationServerPos[this.rgvStationServerPos.length - 1]) {
|
n = this.rgvStationServerPos.length - 2
|
} else {
|
for (let i = 0; i < this.rgvStationServerPos.length - 1; i++) {
|
if ((this.rgvServerPos >= this.rgvStationServerPos[i]) && (this.rgvServerPos < this.rgvStationServerPos[i + 1])) {
|
n = i;
|
break;
|
}
|
}
|
}
|
let totalServerLen = this.rgvStationServerPos[n + 1] - this.rgvStationServerPos[n];
|
let moveServerLen = this.rgvServerPos - this.rgvStationServerPos[n];
|
let moveRate = moveServerLen / totalServerLen;
|
let totalViewLen = this.rgvStationPos[n + 1] - this.rgvStationPos[n];
|
let moveViewLen = Math.floor(totalViewLen * moveRate);
|
this.rgvPos = moveViewLen + this.rgvStationPos[n];
|
},
|
formatRgvServerPos(val) {
|
let ans = val || 0;
|
if (ans < this.posLimit.rgv.server.top) {
|
ans = this.posLimit.rgv.server.top
|
} else if (ans > this.posLimit.rgv.server.bottom) {
|
ans = this.posLimit.rgv.server.bottom
|
}
|
this.rgvServerPos = ans;
|
},
|
handleMachineData(obj) {
|
let arr1 = [], arr2 = [];
|
arr1.push(obj.AState)
|
arr2.push(obj.AStore)
|
arr1.push(obj.BState)
|
arr2.push(obj.BStore)
|
arr1.push(obj.CState)
|
arr2.push(obj.CStore)
|
arr1.push(obj.DState)
|
arr2.push(obj.DStore)
|
this.machineWarn = arr1;
|
console.log(this.machineWarn)
|
this.storeRate = arr2;
|
},
|
handleMachinePosData(obj) {
|
let arr1 = [], arr2 = [];
|
arr1.push(this.formatMachiineServerPos(obj.ACoordinate))
|
arr1.push(this.formatMachiineServerPos(obj.BCoordinate))
|
arr1.push(this.formatMachiineServerPos(obj.CCoordinate))
|
arr1.push(this.formatMachiineServerPos(obj.DCoordinate))
|
arr1.forEach((arr1Item) => {
|
arr2.push(this.calEachMachinePos(arr1Item))
|
})
|
this.machineServerPos = arr1;
|
this.machinePos = arr2;
|
},
|
formatMachiineServerPos(val) {
|
let ans = Number(val)
|
if (ans === NaN) ans = 0;
|
if (ans < this.posLimit.machine.server.right) {
|
ans = this.posLimit.machine.server.right
|
} else if (ans > this.posLimit.machine.server.left) {
|
ans = this.posLimit.machine.server.left
|
}
|
return ans;
|
},
|
calEachMachinePos(val) {
|
let totalServerLen = this.posLimit.machine.server.left - this.posLimit.machine.server.right;
|
let moveServerLen = totalServerLen - (val - this.posLimit.machine.server.right);
|
let moveRate = moveServerLen / totalServerLen;
|
let totalViewLen = this.posLimit.machine.view.right - this.posLimit.machine.view.left;
|
let moveViewLen = Math.floor(totalViewLen * moveRate);
|
let res = moveViewLen + this.posLimit.machine.view.left;
|
return res;
|
},
|
createInterval() {
|
this.refreshInterval = window.setInterval(() => {
|
this.getData();
|
}, this.$config.base.screen.screen1.refreshTime)
|
},
|
createIntervalX() {
|
this.refreshIntervalX = window.setInterval(() => {
|
this.getPosData();
|
}, this.$config.base.screen.screen1.refreshTimeX)
|
},
|
clearInterVal() {
|
this.clearInterVal1()
|
this.clearInterVal2()
|
},
|
clearInterVal1() {
|
try {
|
window.clearInterval(this.refreshInterval);
|
this.refreshInterval = null;
|
} catch (e) {
|
//TODO handle the exception
|
}
|
},
|
clearInterVal2() {
|
try {
|
window.clearInterval(this.refreshIntervalX);
|
this.refreshIntervalX = null;
|
} catch (e) {
|
//TODO handle the exception
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.screen1-center {
|
height: 100%;
|
box-sizing: border-box;
|
padding: 10px;
|
margin-top: 30px;
|
.center-box {
|
position: relative;
|
height: 100%;
|
}
|
|
.center-layer1 {
|
box-sizing: border-box;
|
padding-top: 0px;
|
height: 100%;
|
}
|
|
.store-blocks-frame {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.store-block-item {
|
height: 40%;
|
flex-shrink: 0;
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
|
.shelves-row,
|
.line-row {
|
height: 1px;
|
}
|
|
.shelves-row {
|
flex-grow: 8;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url(@/assets/img/screen/center/shelves_normal.png);
|
|
&.shelves-row2 {
|
background-image: url(@/assets/img/screen/center/shelves_normal.png);
|
}
|
}
|
|
.shelves-row4 {
|
flex-grow: 8;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url(@/assets/img/screen/center/shelves_normal2.png);
|
}
|
|
.shelves-row3 {
|
flex-grow: 8;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url(@/assets/img/screen/center/shelves_normal.png);
|
}
|
|
.line-row {
|
flex-grow: 9;
|
|
// padding-left: 38.5px;
|
.line-track-row {
|
position: relative;
|
height: 100%;
|
background-repeat: no-repeat;
|
background-size: 100% auto;
|
background-position: center;
|
background-image: url(@/assets/img/screen/center/machine_track_normal.png);
|
overflow: hidden;
|
}
|
|
.machine-box {
|
position: absolute;
|
top: 4px;
|
width: 24px;
|
height: 18px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url(@/assets/img/screen/center/machine_normal.png);
|
}
|
}
|
|
&.abnormal {
|
.line-row {
|
.machine-box {
|
// background-image: url(@/assets/img/screen/center/machine_abnormal.png);
|
}
|
}
|
}
|
|
&.empty {
|
.line-row {
|
.machine-box {
|
// background-image: url(@/assets/img/screen/center/machine_green.png);
|
}
|
}
|
}
|
|
.rate-block {
|
position: absolute;
|
top: 0;
|
left: 200px;
|
width: 80px;
|
height: 100%;
|
z-index: 5;
|
box-sizing: border-box;
|
padding: 10px 0;
|
|
.rate-box {
|
width: 100%;
|
height: 100%;
|
// background-repeat: no-repeat;
|
// background-size: 100% 100%;
|
// background-image: url(@/assets/img/screen/center/rate_box.png);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #F0F8FF;
|
font-size: 14px;
|
}
|
}
|
|
&.store-block-item2 {
|
height: 15%;
|
}
|
}
|
|
}
|
|
.center-layer2 {
|
position: absolute;
|
top: 0;
|
height: 100%;
|
left: 14px;
|
width: 24px;
|
box-sizing: border-box;
|
|
.rgv-block {
|
visibility: hidden;
|
height: 100%;
|
width: 100%;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url(@/assets/img/screen/center/rgv_track_normal.png);
|
}
|
|
.rgv-box {
|
visibility: hidden;
|
position: absolute;
|
width: 100%;
|
height: 19px;
|
left: 0;
|
// background-repeat: no-repeat;
|
// background-size: 100% 100%;
|
// background-image: url(@/assets/img/screen/center/rgv_normal.png);
|
}
|
|
&.abnormal {
|
.rgv-box {
|
// background-image: url(@/assets/img/screen/center/rgv_abnormal.png);
|
}
|
}
|
|
&.empty {
|
.rgv-box {
|
// background-image: url(@/assets/img/screen/center/rgv_green.png);
|
}
|
}
|
}
|
}
|
</style>
|
