数据、样式
This commit is contained in:
@@ -1,31 +1,361 @@
|
||||
<template>
|
||||
<div class="n_container">
|
||||
<div class="zd-row">
|
||||
<div class="zd-col-10">
|
||||
<div class="zd-row jcflexstart">
|
||||
<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">
|
||||
<div class="zd-col-6"></div>
|
||||
<div class="zd-col-6"></div>
|
||||
<div class="zd-col-6"></div>
|
||||
<div class="zd-col-6"></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-12"></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 2%
|
||||
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
|
||||
@@ -39,4 +369,56 @@
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user