425 lines
12 KiB
Vue
425 lines
12 KiB
Vue
<template>
|
|
<div class="n_container">
|
|
<div class="zd-row">
|
|
<div class="zd-col-10 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">
|
|
<div id="echart_1" style="width: 100%; height: 100%;"></div>
|
|
</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 num_label">总货位数</div>
|
|
<div class="zd-col-12 num_value">{{detail.sum1}}个</div>
|
|
</div>
|
|
<div class="zd-row num_wrap num_wrap_2">
|
|
<div class="zd-col-12 num_label">已用货位</div>
|
|
<div class="zd-col-12 num_value">{{detail.use1}}个</div>
|
|
</div>
|
|
<div class="zd-row num_wrap num_wrap_3">
|
|
<div class="zd-col-12 num_label">空余货位</div>
|
|
<div class="zd-col-12 num_value">{{detail.empty1}}个</div>
|
|
</div>
|
|
</div>
|
|
<div class="pie_wrap">
|
|
<div class="pie_item">
|
|
<div id="echart_2" style="width: 100%; height: 100%;"></div>
|
|
</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 num_label">总货位数</div>
|
|
<div class="zd-col-12 num_value">{{detail.sum2}}个</div>
|
|
</div>
|
|
<div class="zd-row num_wrap num_wrap_2">
|
|
<div class="zd-col-12 num_label">已用货位</div>
|
|
<div class="zd-col-12 num_value">{{detail.use2}}个</div>
|
|
</div>
|
|
<div class="zd-row num_wrap num_wrap_3">
|
|
<div class="zd-col-12 num_label">空余货位</div>
|
|
<div class="zd-col-12 num_value">{{detail.empty2}}个</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="zd-row flexWrap hw_wrap">
|
|
<div class="hw_item" v-for="e in point2" :key="e.point_code">
|
|
<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 class="zd-row flexWrap hw_wrap">
|
|
<div class="hw_item" v-for="e in point3" :key="e.point_code">
|
|
<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 class="zd-row flexWrap hw_wrap">
|
|
<div class="hw_item" v-for="e in point4" :key="e.point_code">
|
|
<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 class="zd-row flexWrap hw_wrap">
|
|
<div class="hw_item" v-for="e in point5" :key="e.point_code">
|
|
<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-col-1 gd_wrap">
|
|
<p class="txt">A<br>G<br>V<br>过<br>道</p>
|
|
</div>
|
|
<div class="zd-col-12 hwpl_wrap_2">
|
|
<div class="zd-row flexWrap">
|
|
<div class="hw_item" v-for="e in point1" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
|
<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-col-1 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: '', empty1: '', empty2: '', use1: '', use2: ''}
|
|
}
|
|
},
|
|
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.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)
|
|
this.setEchart1()
|
|
this.setEchart2()
|
|
},
|
|
setEchart1 () {
|
|
let value = Number(this.detail.use1) / Number(this.detail.sum1)
|
|
value = value * 100
|
|
value = value.toFixed(0)
|
|
let option = {
|
|
grid: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
title: {
|
|
text: `{a|${value}}{b|%}`,
|
|
x: 'center',
|
|
y: 'center',
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 36,
|
|
color: '#DBE7F6',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
},
|
|
b: {
|
|
fontSize: 20,
|
|
padding: [9, 0, 0, 3],
|
|
color: '#fff',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '进度',
|
|
type: 'pie',
|
|
radius: ['76%', '100%'],
|
|
center: ['50%', '50%'],
|
|
clockwise: false,
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
name: '已完成',
|
|
value: value,
|
|
itemStyle: {
|
|
decal: {
|
|
color: '#3D92ED',
|
|
backgroundColor: '#1774E8',
|
|
dashArrayX: [1, 0],
|
|
dashArrayY: [1, 4],
|
|
rotation: -Math.PI / 4
|
|
}
|
|
}
|
|
}, {
|
|
name: '未完成',
|
|
value: 100 - value,
|
|
itemStyle: {
|
|
decal: {
|
|
color: '#597491',
|
|
backgroundColor: '#2f5175',
|
|
dashArrayX: [1, 0],
|
|
dashArrayY: [2, 4],
|
|
rotation: -Math.PI / 4
|
|
}
|
|
},
|
|
emphasis: {
|
|
disabled: true
|
|
}
|
|
}]
|
|
}, {
|
|
type: 'pie',
|
|
radius: ['99%', '100%'],
|
|
clockwise: false,
|
|
itemStyle: {
|
|
color: '#45B1F1'
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [1]
|
|
}, {
|
|
type: 'pie',
|
|
radius: ['75%', '76%'],
|
|
clockwise: false,
|
|
itemStyle: {
|
|
color: '#45B1F1'
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [1]
|
|
}]
|
|
}
|
|
if (document.getElementById('echart_1') == null) {
|
|
return
|
|
}
|
|
this.$echarts.dispose(document.getElementById('echart_1'))
|
|
let echart = this.$echarts.init(document.getElementById('echart_1'))
|
|
echart.setOption(option)
|
|
window.addEventListener('resize', () => {
|
|
echart.resize()
|
|
})
|
|
},
|
|
setEchart2 () {
|
|
let value = Number(this.detail.use2) / Number(this.detail.sum2)
|
|
value = value * 100
|
|
value = value.toFixed(0)
|
|
let option = {
|
|
grid: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
title: {
|
|
text: `{a|${value}}{b|%}`,
|
|
x: 'center',
|
|
y: 'center',
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 36,
|
|
color: '#DBE7F6',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
},
|
|
b: {
|
|
fontSize: 20,
|
|
padding: [9, 0, 0, 3],
|
|
color: '#fff',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '进度',
|
|
type: 'pie',
|
|
radius: ['76%', '100%'],
|
|
center: ['50%', '50%'],
|
|
clockwise: false,
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
name: '已完成',
|
|
value: value,
|
|
itemStyle: {
|
|
decal: {
|
|
color: '#3D92ED',
|
|
backgroundColor: '#1774E8',
|
|
dashArrayX: [1, 0],
|
|
dashArrayY: [1, 4],
|
|
rotation: -Math.PI / 4
|
|
}
|
|
}
|
|
}, {
|
|
name: '未完成',
|
|
value: 100 - value,
|
|
itemStyle: {
|
|
decal: {
|
|
color: '#597491',
|
|
backgroundColor: '#2f5175',
|
|
dashArrayX: [1, 0],
|
|
dashArrayY: [2, 4],
|
|
rotation: -Math.PI / 4
|
|
}
|
|
},
|
|
emphasis: {
|
|
disabled: true
|
|
}
|
|
}]
|
|
}, {
|
|
type: 'pie',
|
|
radius: ['99%', '100%'],
|
|
clockwise: false,
|
|
itemStyle: {
|
|
color: '#45B1F1'
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [1]
|
|
}, {
|
|
type: 'pie',
|
|
radius: ['75%', '76%'],
|
|
clockwise: false,
|
|
itemStyle: {
|
|
color: '#45B1F1'
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [1]
|
|
}]
|
|
}
|
|
if (document.getElementById('echart_2') == null) {
|
|
return
|
|
}
|
|
this.$echarts.dispose(document.getElementById('echart_2'))
|
|
let echart = this.$echarts.init(document.getElementById('echart_2'))
|
|
echart.setOption(option)
|
|
window.addEventListener('resize', () => {
|
|
echart.resize()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin'
|
|
.n_container
|
|
_wh(100%, 100%)
|
|
background center / 100% 100% url('../../../images/bg-center.png') no-repeat
|
|
padding .25rem 0 .25rem .25rem
|
|
.hwpl_wrap_1
|
|
width 4.32rem
|
|
.hwpl_wrap_2
|
|
width 5.56rem
|
|
.gd_wrap
|
|
width calc(50% - 4.94rem)
|
|
.state_wrap
|
|
margin-bottom .38rem
|
|
.state_icon
|
|
_wh(.1rem, .1rem)
|
|
.state_title
|
|
_font(.2rem, .2rem, #fff,,)
|
|
margin 0 .4rem 0 .1rem
|
|
.bg_col_1
|
|
background-color #EF5252
|
|
border-radius 4px
|
|
box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
|
|
.bg_col_2
|
|
background-color #8EB5E5
|
|
border-radius 4px
|
|
box-shadow 0px 0px 12px 4px rgba(142, 181, 229, .5)
|
|
.pie_num_wrap
|
|
margin-bottom .2rem
|
|
.pie_wrap
|
|
width 1.075rem
|
|
.pie_item
|
|
position relative
|
|
_wh(1.075rem, 1.075rem)
|
|
padding .14rem .135rem .135rem .14rem
|
|
background center / 100% auto url('../../../images/pie-bg_1.png') no-repeat
|
|
.pie_name
|
|
_font(.16rem, .16rem, #fff,,center)
|
|
.num_wrap
|
|
_wh(100%, .3rem)
|
|
padding .1rem .05rem
|
|
margin-bottom .058rem
|
|
.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(.1rem, .1rem, #fff,,left)
|
|
.num_value
|
|
_font(.11rem, .1rem, #fff,,right)
|
|
font-family: 'YouSheBiaoTiHei';
|
|
.hw_wrap
|
|
margin-bottom .5rem
|
|
&:last-child
|
|
margin-bottom 0
|
|
.hw_item
|
|
_wh(.6rem, auto)
|
|
padding .096rem .05rem .05rem .05rem
|
|
margin-bottom .02rem
|
|
background center / 100% 100% url('../../../images/bg-hw.png') no-repeat
|
|
.hw_item_active
|
|
background-image url('../../../images/bg-hw_active.png')
|
|
.hw_p1
|
|
color #3CC1FF
|
|
.hw_p1
|
|
_font(.1rem, .11rem,#fff,,)
|
|
font-family: 'YouSheBiaoTiHei'
|
|
height .22rem
|
|
overflow hidden
|
|
.hw_p2
|
|
_font(.1rem, .1rem, #fff,,center)
|
|
font-family: "SourceHanSansCN-Bold";
|
|
height 0.2rem
|
|
overflow hidden
|
|
.txt
|
|
_font(.2rem, .4rem, #fff,,center)
|
|
font-family: "YouSheBiaoTiHei"
|
|
</style>
|