279 lines
9.2 KiB
Vue
279 lines
9.2 KiB
Vue
<template>
|
|
<div class="n_container">
|
|
<div class="zd-row allHeight">
|
|
<div class="hwpl_wrap_1">
|
|
<div class="zd-row jcflexstart state_wrap">
|
|
<div class="state_icon bg_col_1"></div>
|
|
<div class="state_title">满货位</div>
|
|
<div class="state_icon bg_col_2"></div>
|
|
<div class="state_title">空货位</div>
|
|
</div>
|
|
<div class="zd-row pie_num_wrap">
|
|
<div class="pie_wrap">
|
|
<div class="pie_item">
|
|
<p>{{ sum1 }}</p>
|
|
</div>
|
|
<div class="pie_name">1排</div>
|
|
</div>
|
|
<div class="zd-col-6">
|
|
<div class="zd-row num_wrap num_wrap_1">
|
|
<div class="zd-col-12"><p class="num_label">总货位数</p></div>
|
|
<div class="zd-col-12"><p class="num_value">{{detail.sum1}}个</p></div>
|
|
</div>
|
|
<div class="zd-row num_wrap num_wrap_2">
|
|
<div class="zd-col-12"><p class="num_label">已用货位</p></div>
|
|
<div class="zd-col-12"><p class="num_value">{{detail.use1}}个</p></div>
|
|
</div>
|
|
<div class="zd-row num_wrap num_wrap_3">
|
|
<div class="zd-col-12"><p class="num_label">空余货位</p></div>
|
|
<div class="zd-col-12"><p class="num_value">{{detail.empty1}}个</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="pie_wrap">
|
|
<div class="pie_item">
|
|
<p>{{ sum2 }}</p>
|
|
</div>
|
|
<div class="pie_name">2排</div>
|
|
</div>
|
|
<div class="zd-col-6">
|
|
<div class="zd-row num_wrap num_wrap_1">
|
|
<div class="zd-col-12"><p class="num_label">总货位数</p></div>
|
|
<div class="zd-col-12"><p class="num_value">{{detail.sum2}}个</p></div>
|
|
</div>
|
|
<div class="zd-row num_wrap num_wrap_2">
|
|
<div class="zd-col-12"><p class="num_label">已用货位</p></div>
|
|
<div class="zd-col-12"><p class="num_value">{{detail.use2}}个</p></div>
|
|
</div>
|
|
<div class="zd-row num_wrap num_wrap_3">
|
|
<div class="zd-col-12"><p class="num_label">空余货位</p></div>
|
|
<div class="zd-col-12"><p class="num_value">{{detail.empty2}}个</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hwpl_wrap_i">
|
|
<div class="zd-row flexWrap hw_wrap">
|
|
<div class="hw_item" v-for="e in point2" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
|
<div class="hw_item_i">
|
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="zd-row flexWrap hw_wrap">
|
|
<div class="hw_item" v-for="e in point3" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
|
<div class="hw_item_i">
|
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="zd-row flexWrap hw_wrap">
|
|
<div class="hw_item" v-for="e in point4" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
|
<div class="hw_item_i">
|
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="zd-row flexWrap hw_wrap">
|
|
<div class="hw_item" v-for="e in point5" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
|
<div class="hw_item_i">
|
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gd_wrap">
|
|
<p class="txt">A<br>G<br>V<br>过<br>道</p>
|
|
</div>
|
|
<div class="hwpl_wrap_2">
|
|
<div class="zd-row allHeight flexWrap rowReverse">
|
|
<div class="hw_item hw_item_2" v-for="e in point1" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
|
<div class="hw_item_i">
|
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gd_wrap">
|
|
<p class="txt">人<br>工<br>取<br>货<br>通<br>道</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { boardPoint } from '@js/getData2.js'
|
|
export default {
|
|
data () {
|
|
return {
|
|
interTime: this.$store.getters.setTime,
|
|
ltimer: null,
|
|
point1: [],
|
|
point2: [],
|
|
point3: [],
|
|
point4: [],
|
|
point5: [],
|
|
detail: {},
|
|
sum1: '',
|
|
sum2: ''
|
|
|
|
}
|
|
},
|
|
created () {
|
|
this.refresh()
|
|
},
|
|
beforeDestroy () {
|
|
clearInterval(this.ltimer)
|
|
},
|
|
methods: {
|
|
refresh () {
|
|
this._boardPoint()
|
|
this.ltimer = setInterval(() => {
|
|
this._boardPoint()
|
|
}, this.interTime)
|
|
},
|
|
async _boardPoint () {
|
|
let res = await boardPoint()
|
|
this.detail = res.detail
|
|
this.sum1 = Number(this.detail.use1) / Number(this.detail.sum1)
|
|
this.sum1 = this.sum1 * 100
|
|
this.sum1 = this.sum1.toFixed(2) + '%'
|
|
this.sum2 = Number(this.detail.use2) / Number(this.detail.sum2)
|
|
this.sum2 = this.sum2 * 100
|
|
this.sum2 = this.sum2.toFixed(2) + '%'
|
|
this.point1 = [...res.pointList].slice(0, 162)
|
|
this.point2 = [...res.pointList].slice(162, 183)
|
|
this.point3 = [...res.pointList].slice(183, 204)
|
|
this.point4 = [...res.pointList].slice(204, 225)
|
|
this.point5 = [...res.pointList].slice(225, 246)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin'
|
|
.n_container
|
|
_wh(100%, 100%)
|
|
background-color #08225f
|
|
border 1px solid #43b3fa
|
|
// background center / 100% 100% url('../../../images/bg-center.png') no-repeat
|
|
padding 2.2% 0 2.2% 2.2%
|
|
.hwpl_wrap_1
|
|
width calc(43.9% - 20px)
|
|
height 100%
|
|
.hwpl_wrap_2
|
|
width calc(56.1% - 20px)
|
|
height 100%
|
|
.gd_wrap
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width 20px
|
|
height 100%
|
|
.state_wrap
|
|
margin-bottom 10px
|
|
.state_icon
|
|
_wh(10px, 10px)
|
|
.state_title
|
|
_font(12px, 12px, #fff,,)
|
|
margin 0 20px 0 5px
|
|
.bg_col_1
|
|
border-radius 4px
|
|
box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
|
|
border 1px solid #B55F4E
|
|
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
|
|
.bg_col_2
|
|
border-radius 4px
|
|
box-shadow 0px 0px 12px 4px rgba(142, 181, 229, .5)
|
|
border 1px solid rgba(42, 189, 251, 50%)
|
|
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
|
|
.pie_num_wrap
|
|
margin-bottom 10px
|
|
.pie_wrap
|
|
width 50px
|
|
.pie_item
|
|
position relative
|
|
_wh(50px, 50px)
|
|
background center / 100% auto url('../../../images/pie-bg_1.png') no-repeat
|
|
p
|
|
font-size: 12px;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 1;
|
|
transform: scale(0.5);
|
|
white-space: nowrap;
|
|
padding-top: 25px;
|
|
.pie_name
|
|
_font(12px, 20px, #fff,,center)
|
|
transform: scale(0.5);
|
|
.num_wrap
|
|
width 100%
|
|
padding 0 2px
|
|
margin-bottom 5px
|
|
.num_wrap_1
|
|
background center / 100% 100% url('../../../images/gl-bg_1.png') no-repeat
|
|
.num_wrap_2
|
|
background center / 100% 100% url('../../../images/gl-bg_2.png') no-repeat
|
|
.num_wrap_3
|
|
background center / 100% 100% url('../../../images/gl-bg_3.png') no-repeat
|
|
.num_label
|
|
_font(12px, 12px, #fff,,left)
|
|
transform: scale(0.5);
|
|
white-space: nowrap;
|
|
.num_value
|
|
_font(12px, 12px, #fff,,right)
|
|
transform: scale(0.5);
|
|
white-space: nowrap;
|
|
.hwpl_wrap_i
|
|
_wh(100%, calc(100% - 102px))
|
|
.hw_wrap
|
|
align-content: flex-start;
|
|
height 23.4%
|
|
margin-bottom 5%
|
|
&:last-child
|
|
margin-bottom 0
|
|
.hw_item
|
|
_wh(13.6%, 26.6%)
|
|
padding 2px
|
|
margin-bottom 1%
|
|
border-radius 4px
|
|
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
|
|
border 1px solid rgba(42, 189, 251, 50%)
|
|
overflow hidden
|
|
.hw_item_2
|
|
width: 10.5%;
|
|
height: 4.92%;
|
|
.hw_item_i
|
|
_wh(100%, 100%)
|
|
background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
|
|
background-size 12px 12px
|
|
background-repeat repeat
|
|
.hw_item_active
|
|
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
|
|
border 1px solid #B55F4E
|
|
.hw_item_i
|
|
background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
|
|
.hw_p1
|
|
_font(12px, 1,#EFF2FF,,)
|
|
font-family: "SourceHanSansCN-Bold";
|
|
height 50%
|
|
text-shadow: 0px 1px 1px #A0D4FF;
|
|
transform: scale(0.5);
|
|
white-space: nowrap;
|
|
.hw_p2
|
|
_font(12px, 1, #EFF2FF,,center)
|
|
font-family: "SourceHanSansCN-Bold";
|
|
height 50%
|
|
transform: scale(0.5);
|
|
white-space: nowrap;
|
|
.txt
|
|
_font(12px, 16px, #fff,,center)
|
|
font-family: "YouSheBiaoTiHei"
|
|
transform: scale(0.8);
|
|
</style>
|