Skip to content

Z
zhongtong-avi-web
Commit 9888482a authored by 车宾's avatar 车宾
Browse files
Options

fea（led avi ）：成品车存放区，面色漆工作区开发完成

parent 89cebb73
Expand all Show whitespace changes
Inline Side-by-side
Showing with 966 additions and 6 deletions
src/views/LedCarouselAvi/components/Finished.vue
View file @ 9888482a
<template> <template>
<!-- 成品车存放区 --> <!-- 成品车存放区 -->
<div></div> <div class="page-pack">
<div class="container">
<!-- 在线车体数量 -->
<div class="online-number">
<span>数量：{{onlineNumber !== null ? onlineNumber : '0' }}</span>
</div>
<!-- 显示区域 -->
<div class="view-pack">
<!-- 第一行 -->
<div class="HDG1-147"
v-if="realData.hasOwnProperty('HDG1-147') && realData['HDG1-147'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-147'].busType)">
</div>
<div class="HDG1-163"
v-if="realData.hasOwnProperty('HDG1-163') && realData['HDG1-163'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-163'].busType)">
</div>
<div class="HDG1-205"
v-if="realData.hasOwnProperty('HDG1-205') && realData['HDG1-205'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-205'].busType)">
</div>
<div class="HDG1-206"
v-if="realData.hasOwnProperty('HDG1-206') && realData['HDG1-206'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-206'].busType)">
</div>
<div class="HDG1-207"
v-if="realData.hasOwnProperty('HDG1-207') && realData['HDG1-207'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-207'].busType)">
</div>
<!-- 第二行 -->
<div class="HDG1-148"
v-if="realData.hasOwnProperty('HDG1-148') && realData['HDG1-148'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-148'].busType)">
</div>
<div class="HDG1-164"
v-if="realData.hasOwnProperty('HDG1-164') && realData['HDG1-164'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-164'].busType)">
</div>
<div class="HDG1-208"
v-if="realData.hasOwnProperty('HDG1-208') && realData['HDG1-208'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-208'].busType)">
</div>
<div class="HDG1-209"
v-if="realData.hasOwnProperty('HDG1-209') && realData['HDG1-209'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-209'].busType)">
</div>
<div class="HDG1-210"
v-if="realData.hasOwnProperty('HDG1-210') && realData['HDG1-210'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-210'].busType)">
</div>
<!-- 第三行 -->
<div class="HDG1-149"
v-if="realData.hasOwnProperty('HDG1-149') && realData['HDG1-149'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-149'].busType)">
</div>
<div class="HDG1-165"
v-if="realData.hasOwnProperty('HDG1-165') && realData['HDG1-165'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-165'].busType)">
</div>
<div class="HDG1-211"
v-if="realData.hasOwnProperty('HDG1-211') && realData['HDG1-211'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-211'].busType)">
</div>
<div class="HDG1-212"
v-if="realData.hasOwnProperty('HDG1-212') && realData['HDG1-212'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-212'].busType)">
</div>
<div class="HDG1-213"
v-if="realData.hasOwnProperty('HDG1-213') && realData['HDG1-213'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-213'].busType)">
</div>
<!-- 涂装车出 -->
<div class="HXG2-1"
v-if="realData.hasOwnProperty('HXG2-1') && realData['HXG2-1'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HXG2-1'].busType)">
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return {} return {
// 定时器
timer: null,
// 电泳区实时信息
realData: {},
// 当前在线车体数量
onlineNumber: null
}
},
mounted () {
setTimeout(() => {
this.getFinishedData()
this.timer = setInterval(() => {
// 获取成品车存放区实时信息
this.getFinishedData();
}, 20000);
}, 0)
},
beforeDestroy () {
clearInterval(this.timer);
},
methods: {
//获取成品车存放区数据
getFinishedData () {
this.$fetch('area-controller/realTime-get', { areaNo: '7' }).then(res => {
console.log(res);
for (let item of res) {
if (item.code === '7') {
this.realData = _.cloneDeep(item.stationMap)
this.onlineNumber = _.cloneDeep(item.onlineNum);
break;
}
}
})
},
// 解析车体类型样式
resolveCarTypeStyle (type) {
if (type === 'OTHER') {
return 'car-out';
} else {
return '';
}
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack {
height: 100%;
width: 100%;
.container {
width: 1556px;
height: 1037px;
background: url("../../../assets/images/LedCarouselAvi/finished_bg.png") no-repeat;
overflow: hidden;
position: relative;
// 在线车体数量
.online-number {
width: 270px;
height: 50px;
position: absolute;
right: 126px;
top: 43px;
text-align: center;
line-height: 50px;
font-size: 35px;
color: rgb(255,255,255);
}
// 显示区域
.view-pack {
width: 1070px;
height: 893px;
margin-top: 108px;
margin-left: 242px;
position: relative;
div {
width: 70px;
height: 40px;
position: absolute;
background: url("../../../assets/images/LedCarouselAvi/car.png");
background-position: center 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.HDG1-147 {
top: 337px;
left: -130px;
}
.HDG1-148 {
top: 386px;
left: -130px;
}
.HDG1-149 {
top: 440px;
left: -130px;
}
.HDG1-163 {
top: 337px;
left: 60px;
}
.HDG1-164 {
top: 386px;
left: 60px;
}
.HDG1-165 {
top: 440px;
left: 60px;
}
.HDG1-205 {
top: 337px;
left: 404px;
}
.HDG1-206 {
top: 337px;
left: 573px;
}
.HDG1-207 {
top: 337px;
left: 730px;
}
}
.HDG1-208 {
top: 386px;
left: 404px;
}
.HDG1-209 {
top: 386px;
left: 573px;
}
.HDG1-210 {
top: 386px;
left: 730px;
}
.HDG1-211 {
top: 440px;
left: 404px;
}
.HDG1-212 {
top: 440px;
left:573px;
}
.HDG1-213 {
top: 440px;
left:730px;
}
.HXG2-1 {
top: 380px;
left:1077px;
}
}
// 轻客车体样式
.car-out {
background: url('../../../assets/images/LedCarouselAvi/car_out.png') !important;
background-position: center 0 !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
}
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment