Skip to content

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

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

parent 89cebb73
Hide whitespace changes
Inline Side-by-side
Showing with 966 additions and 6 deletions
src/views/LedCarouselAvi/components/ComplexionPaint.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-134"
v-if="realData.hasOwnProperty('HDG1-134') && realData['HDG1-134'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-134'].busType)">
</div>
<div class="HDG1-150"
v-if="realData.hasOwnProperty('HDG1-150') && realData['HDG1-150'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-150'].busType)">
</div>
<div class="HDG1-166"
v-if="realData.hasOwnProperty('HDG1-166') && realData['HDG1-166'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-166'].busType)">
</div>
<div class="HDG1-167"
v-if="realData.hasOwnProperty('HDG1-167') && realData['HDG1-167'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-167'].busType)">
</div>
<div class="HDG1-168"
v-if="realData.hasOwnProperty('HDG1-168') && realData['HDG1-168'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-168'].busType)">
</div>
<div class="HDG5-21"
v-if="realData.hasOwnProperty('HDG5-21') && realData['HDG5-21'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-21'].busType)">
</div>
<!-- 第二行 -->
<div class="HDG1-135"
v-if="realData.hasOwnProperty('HDG1-135') && realData['HDG1-135'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-135'].busType)">
</div>
<div class="HDG1-151"
v-if="realData.hasOwnProperty('HDG1-151') && realData['HDG1-151'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-151'].busType)">
</div>
<div class="HDG1-169"
v-if="realData.hasOwnProperty('HDG1-169') && realData['HDG1-169'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-169'].busType)">
</div>
<div class="HDG1-170"
v-if="realData.hasOwnProperty('HDG1-170') && realData['HDG1-170'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-170'].busType)">
</div>
<div class="HDG1-171"
v-if="realData.hasOwnProperty('HDG1-171') && realData['HDG1-171'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-171'].busType)">
</div>
<div class="HDG5-22"
v-if="realData.hasOwnProperty('HDG5-22') && realData['HDG5-22'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-22'].busType)">
</div>
<!-- 第三行 -->
<div class="HDG1-136"
v-if="realData.hasOwnProperty('HDG1-136') && realData['HDG1-136'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-136'].busType)">
</div>
<div class="HDG1-152"
v-if="realData.hasOwnProperty('HDG1-152') && realData['HDG1-152'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-152'].busType)">
</div>
<div class="HDG1-172"
v-if="realData.hasOwnProperty('HDG1-172') && realData['HDG1-172'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-172'].busType)">
</div>
<div class="HDG1-173"
v-if="realData.hasOwnProperty('HDG1-173') && realData['HDG1-173'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-173'].busType)">
</div>
<div class="HDG1-174"
v-if="realData.hasOwnProperty('HDG1-174') && realData['HDG1-174'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-174'].busType)">
</div>
<div class="HDG5-23"
v-if="realData.hasOwnProperty('HDG5-23') && realData['HDG5-23'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-23'].busType)">
</div>
<!-- 第四行 -->
<div class="HDG1-137"
v-if="realData.hasOwnProperty('HDG1-137') && realData['HDG1-137'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-137'].busType)">
</div>
<div class="HDG1-153"
v-if="realData.hasOwnProperty('HDG1-153') && realData['HDG1-153'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-153'].busType)">
</div>
<div class="HDG1-175"
v-if="realData.hasOwnProperty('HDG1-175') && realData['HDG1-175'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-175'].busType)">
</div>
<div class="HDG1-176"
v-if="realData.hasOwnProperty('HDG1-176') && realData['HDG1-176'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-176'].busType)">
</div>
<div class="HDG1-177"
v-if="realData.hasOwnProperty('HDG1-177') && realData['HDG1-177'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-177'].busType)">
</div>
<div class="HDG5-24"
v-if="realData.hasOwnProperty('HDG5-24') && realData['HDG5-24'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-24'].busType)">
</div>
<!-- 第五行 -->
<div class="HDG1-138"
v-if="realData.hasOwnProperty('HDG1-138') && realData['HDG1-138'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-138'].busType)">
</div>
<div class="HDG1-154"
v-if="realData.hasOwnProperty('HDG1-154') && realData['HDG1-154'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-154'].busType)">
</div>
<div class="HDG1-178"
v-if="realData.hasOwnProperty('HDG1-178') && realData['HDG1-178'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-178'].busType)">
</div>
<div class="HDG1-179"
v-if="realData.hasOwnProperty('HDG1-179') && realData['HDG1-179'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-179'].busType)">
</div>
<div class="HDG1-180"
v-if="realData.hasOwnProperty('HDG1-180') && realData['HDG1-180'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-180'].busType)">
</div>
<div class="HDG5-25"
v-if="realData.hasOwnProperty('HDG5-25') && realData['HDG5-25'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-25'].busType)">
</div>
<!-- 第六行 -->
<div class="HDG1-139"
v-if="realData.hasOwnProperty('HDG1-139') && realData['HDG1-139'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-139'].busType)">
</div>
<div class="HDG1-155"
v-if="realData.hasOwnProperty('HDG1-155') && realData['HDG1-155'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-155'].busType)">
</div>
<div class="HDG1-181"
v-if="realData.hasOwnProperty('HDG1-181') && realData['HDG1-181'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-181'].busType)">
</div>
<div class="HDG1-182"
v-if="realData.hasOwnProperty('HDG1-182') && realData['HDG1-182'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-182'].busType)">
</div>
<div class="HDG1-183"
v-if="realData.hasOwnProperty('HDG1-183') && realData['HDG1-183'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-183'].busType)">
</div>
<div class="HDG5-26"
v-if="realData.hasOwnProperty('HDG5-26') && realData['HDG5-26'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-26'].busType)">
</div>
<!-- 第七行 -->
<div class="HDG1-140"
v-if="realData.hasOwnProperty('HDG1-140') && realData['HDG1-140'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-140'].busType)">
</div>
<div class="HDG1-156"
v-if="realData.hasOwnProperty('HDG1-156') && realData['HDG1-156'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-156'].busType)">
</div>
<div class="HDG1-184"
v-if="realData.hasOwnProperty('HDG1-184') && realData['HDG1-184'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-184'].busType)">
</div>
<div class="HDG1-185"
v-if="realData.hasOwnProperty('HDG1-185') && realData['HDG1-185'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-185'].busType)">
</div>
<div class="HDG1-186"
v-if="realData.hasOwnProperty('HDG1-186') && realData['HDG1-186'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-186'].busType)">
</div>
<div class="HDG5-27"
v-if="realData.hasOwnProperty('HDG5-27') && realData['HDG5-27'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-27'].busType)">
</div>
<!-- 第八行 -->
<div class="HDG1-141"
v-if="realData.hasOwnProperty('HDG1-141') && realData['HDG1-141'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-141'].busType)">
</div>
<div class="HDG1-157"
v-if="realData.hasOwnProperty('HDG1-157') && realData['HDG1-157'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-157'].busType)">
</div>
<div class="HDG1-187"
v-if="realData.hasOwnProperty('HDG1-187') && realData['HDG1-187'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-187'].busType)">
</div>
<div class="HDG1-188"
v-if="realData.hasOwnProperty('HDG1-188') && realData['HDG1-188'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-188'].busType)">
</div>
<div class="HDG1-189"
v-if="realData.hasOwnProperty('HDG1-189') && realData['HDG1-189'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-189'].busType)">
</div>
<div class="HDG5-28"
v-if="realData.hasOwnProperty('HDG5-28') && realData['HDG5-28'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-28'].busType)">
</div>
<!-- 第九行 -->
<div class="HDG1-142"
v-if="realData.hasOwnProperty('HDG1-142') && realData['HDG1-142'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-142'].busType)">
</div>
<div class="HDG1-158"
v-if="realData.hasOwnProperty('HDG1-158') && realData['HDG1-158'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-158'].busType)">
</div>
<div class="HDG1-190"
v-if="realData.hasOwnProperty('HDG1-190') && realData['HDG1-190'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-190'].busType)">
</div>
<div class="HDG1-191"
v-if="realData.hasOwnProperty('HDG1-191') && realData['HDG1-191'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-191'].busType)">
</div>
<div class="HDG1-192"
v-if="realData.hasOwnProperty('HDG1-192') && realData['HDG1-192'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-192'].busType)">
</div>
<div class="HDG5-29"
v-if="realData.hasOwnProperty('HDG5-29') && realData['HDG5-29'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-29'].busType)">
</div>
<!-- 第十行 -->
<div class="HDG1-143"
v-if="realData.hasOwnProperty('HDG1-143') && realData['HDG1-143'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-143'].busType)">
</div>
<div class="HDG1-159"
v-if="realData.hasOwnProperty('HDG1-159') && realData['HDG1-159'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-159'].busType)">
</div>
<div class="HDG1-193"
v-if="realData.hasOwnProperty('HDG1-193') && realData['HDG1-193'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-193'].busType)">
</div>
<div class="HDG1-194"
v-if="realData.hasOwnProperty('HDG1-194') && realData['HDG1-194'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-194'].busType)">
</div>
<div class="HDG1-195"
v-if="realData.hasOwnProperty('HDG1-195') && realData['HDG1-195'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-195'].busType)">
</div>
<div class="HDG5-30"
v-if="realData.hasOwnProperty('HDG5-30') && realData['HDG5-30'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-30'].busType)">
</div>
<!-- 第十一行 -->
<div class="HDG1-144"
v-if="realData.hasOwnProperty('HDG1-144') && realData['HDG1-144'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-144'].busType)">
</div>
<div class="HDG1-160"
v-if="realData.hasOwnProperty('HDG1-160') && realData['HDG1-160'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-160'].busType)">
</div>
<div class="HDG1-196"
v-if="realData.hasOwnProperty('HDG1-196') && realData['HDG1-196'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-196'].busType)">
</div>
<div class="HDG1-197"
v-if="realData.hasOwnProperty('HDG1-197') && realData['HDG1-197'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-197'].busType)">
</div>
<div class="HDG1-198"
v-if="realData.hasOwnProperty('HDG1-198') && realData['HDG1-198'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-198'].busType)">
</div>
<div class="HDG5-31"
v-if="realData.hasOwnProperty('HDG5-31') && realData['HDG5-31'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-31'].busType)">
</div>
<!-- 第十二行 -->
<div class="HDG1-145"
v-if="realData.hasOwnProperty('HDG1-145') && realData['HDG1-145'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-145'].busType)">
</div>
<div class="HDG1-161"
v-if="realData.hasOwnProperty('HDG1-161') && realData['HDG1-161'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-161'].busType)">
</div>
<div class="HDG1-199"
v-if="realData.hasOwnProperty('HDG1-199') && realData['HDG1-199'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-199'].busType)">
</div>
<div class="HDG1-200"
v-if="realData.hasOwnProperty('HDG1-200') && realData['HDG1-200'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-200'].busType)">
</div>
<div class="HDG1-201"
v-if="realData.hasOwnProperty('HDG1-201') && realData['HDG1-201'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-201'].busType)">
</div>
<div class="HDG5-32"
v-if="realData.hasOwnProperty('HDG5-32') && realData['HDG5-32'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-32'].busType)">
</div>
<!-- 第十三行 -->
<div class="HDG1-146"
v-if="realData.hasOwnProperty('HDG1-146') && realData['HDG1-146'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-146'].busType)">
</div>
<div class="HDG1-162"
v-if="realData.hasOwnProperty('HDG1-162') && realData['HDG1-162'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-162'].busType)">
</div>
<div class="HDG1-202"
v-if="realData.hasOwnProperty('HDG1-202') && realData['HDG1-202'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-202'].busType)">
</div>
<div class="HDG1-203"
v-if="realData.hasOwnProperty('HDG1-203') && realData['HDG1-203'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-203'].busType)">
</div>
<div class="HDG1-204"
v-if="realData.hasOwnProperty('HDG1-204') && realData['HDG1-204'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG1-204'].busType)">
</div>
<div class="HDG5-33"
v-if="realData.hasOwnProperty('HDG5-33') && realData['HDG5-33'].state !== 'FREE'"
:class="resolveCarTypeStyle(realData['HDG5-33'].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.getComplexionPaintData()
this.timer = setInterval(() => {
// 查询面/色漆工作区实时信息
this.getComplexionPaintData();
}, 20000);
}, 0)
},
beforeDestroy () {
clearInterval(this.timer);
},
methods: {
//获取面/色漆工作区信息
getComplexionPaintData () {
this.$fetch('area-controller/realTime-get', { areaNo: '6' }).then(res => {
console.log(res);
for (let item of res) {
if (item.code === '6') {
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/complexion_paint_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 {
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-134 {
top: 134px;
left: 90px;
}
.HDG1-135 {
top: 243px;
left: 90px;
}
.HDG1-136 {
top: 307px;
left: 90px;
}
.HDG1-137 {
top: 370px;
left: 90px;
}
.HDG1-138 {
top: 435px;
left: 90px;
}
.HDG1-139 {
top: 497px;
left: 90px;
}
.HDG1-140 {
top: 560px;
left: 90px;
}
.HDG1-141 {
top: 625px;
left: 90px;
}
.HDG1-142 {
top: 689px;
left: 90px;
}
.HDG1-143 {
top: 752px;
left: 90px;
}
.HDG1-144 {
top: 814px;
left: 90px;
}
.HDG1-145 {
top: 880px;
left: 90px;
}
.HDG1-146 {
top: 938px;
left: 133px;
}
.HDG1-150 {
top: 134px;
left: 275px;
}
.HDG1-151 {
top: 241px;
left: 275px;
}
.HDG1-152 {
top: 307px;
left: 275px;
}
.HDG1-153 {
top: 366px;
left: 275px;
}
.HDG1-154 {
top: 431px;
left: 275px;
}
.HDG1-155 {
top: 493px;
left: 275px;
}
.HDG1-156 {
top: 556px;
left: 275px;
}
.HDG1-157 {
top: 621px;
left: 275px;
}
.HDG1-158 {
top: 685px;
left: 275px;
}
.HDG1-159 {
top: 748px;
left: 275px;
}
.HDG1-160 {
top: 812px;
left: 275px;
}
.HDG1-161 {
top: 874px;
left: 275px;
}
.HDG1-162 {
top: 943px;
left: 275px;
}
.HDG1-166 {
top: 134px;
left: 635px;
}
.HDG1-169 {
top:241px;
left: 582px;
}
.HDG1-172 {
top:307px;
left: 582px;
}
.HDG1-175 {
top: 374px;
left: 582px;
}
.HDG1-178 {
top: 431px;
left: 635px;
}
.HDG1-181 {
top: 493px;
left: 575px;
}
.HDG1-184 {
top: 556px;
left: 635px;
}
.HDG1-187 {
top: 621px;
left: 635px;
}
.HDG1-190 {
top: 689px;
left: 575px;
}
.HDG1-193 {
top: 754px;
left: 575px;
}
.HDG1-196 {
top: 818px;
left: 575px;
}
.HDG1-199 {
top: 880px;
left: 635px;
}
.HDG1-202 {
top: 943px;
left: 575px;
}
.HDG1-167 {
top: 134px;
left: 775px;
}
.HDG1-170 {
top: 241px;
left: 775px;
}
.HDG1-173 {
top: 307px;
left: 823px;
}
.HDG1-176 {
top: 366px;
left: 823px;
}
.HDG1-179 {
top: 431px;
left: 823px;
}
.HDG1-182 {
top: 493px;
left: 823px;
}
.HDG1-185 {
top: 564px;
left: 775px;
}
.HDG1-188 {
top: 621px;
left: 823px;
}
.HDG1-194 {
top: 748px;
left: 823px;
}
.HDG1-197 {
top: 818px;
left: 770px;
}
.HDG1-200 {
top: 880px;
left: 823px;
}
.HDG1-203 {
top: 943px;
left: 823px;
}
.HDG1-191 {
top: 680px;
left: 823px;
}
.HDG1-168 {
top: 134px;
left: 965px;
}
.HDG1-171 {
top: 236px;
left: 1019px;
}
.HDG1-174 {
top: 307px;
left: 965px;
}
.HDG1-177 {
top: 374px;
left: 965px;
}
.HDG1-180 {
top: 431px;
left: 1019px;
}
.HDG1-183 {
top: 493px;
left: 965px;
}
.HDG1-186 {
top: 564px;
left: 965px;
}
.HDG1-189 {
top: 621px;
left: 1019px;
}
.HDG1-192 {
top: 689px;
left: 965px;
}
.HDG1-195 {
top: 754px;
left: 965px;
}
.HDG1-198 {
top: 818px;
left: 965px;
}
.HDG1-201 {
top: 880px;
left: 965px;
}
.HDG1-204 {
top: 943px;
left: 1019px;
}
.HDG5-21 {
top: 134px;
left: 1288px;
}
.HDG5-22 {
top: 240px;
left: 1288px;
}
.HDG5-23 {
top: 302px;
left: 1288px;
}
.HDG5-24 {
top: 366px;
left: 1288px;
}
.HDG5-25 {
top: 431px;
left: 1288px;
}
.HDG5-26 {
top: 493px;
left: 1288px;
}
.HDG5-27 {
top: 556px;
left: 1288px;
}
.HDG5-28 {
top: 621px;
left: 1288px;
}
.HDG5-29 {
top: 685px;
left: 1288px;
}
.HDG5-30 {
top: 748px;
left: 1288px;
}
.HDG5-31 {
top: 812px;
left: 1288px;
}
.HDG5-32 {
top: 874px;
left: 1288px;
}
.HDG5-33 {
top: 938px;
left: 1288px;
}
}
}
// 轻客车体样式
.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
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