分拣
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
<div class="n_body_container">
|
||||
<div class="n_body_container_wraper">
|
||||
<div class="n_content">
|
||||
<div class="item_wrap">
|
||||
<div class="item_wrap item_wrap_bg">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">当日拆码垛</div>
|
||||
</div>
|
||||
@@ -16,7 +16,7 @@
|
||||
<div id="sortpack_echart_1" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_wrap item_wrap_bg">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">当日成品</div>
|
||||
</div>
|
||||
@@ -95,9 +95,9 @@
|
||||
<div class="tooltip_pages" :style="expand ? 'width: 240px' : 'width: 0'">
|
||||
<div class="tooltip_page pointer" @click="toJumpPage(1)">1</div>
|
||||
<div class="tooltip_page pointer" @click="toJumpPage(2)">2</div>
|
||||
<div class="tooltip_page current_page pointer" @click="toJumpPage(3)">3</div>
|
||||
<div class="tooltip_page pointer" @click="toJumpPage(3)">3</div>
|
||||
<div class="tooltip_page pointer" @click="toJumpPage(4)">4</div>
|
||||
<div class="tooltip_page pointer" @click="toJumpPage(5)">5</div>
|
||||
<div class="tooltip_page current_page pointer" @click="toJumpPage(5)">5</div>
|
||||
<div class="tooltip_page pointer" @click="toJumpPage(6)">6</div>
|
||||
</div>
|
||||
<div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '<<' : '>>'"></div>
|
||||
@@ -122,6 +122,8 @@ export default {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
expand: false,
|
||||
myCharts1: '',
|
||||
myCharts2: '',
|
||||
SortingDayList: [],
|
||||
PackingAreaTaskList: [],
|
||||
HalfSupportCacheList: [],
|
||||
@@ -186,6 +188,307 @@ export default {
|
||||
this.PackingAreaTaskList = [...res.result.PackingAreaTaskList]
|
||||
this.HalfSupportCacheList = [...res.result.HalfSupportCacheList]
|
||||
this.CPDayList = [...res.result.CPDayList]
|
||||
this.setEchart1()
|
||||
this.setEchart2()
|
||||
}
|
||||
},
|
||||
setEchart1 () {
|
||||
let barName = []
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
this.SortingDayList.map(el => {
|
||||
barName.push(el.material_code)
|
||||
barData1.push(el.total_stripping_qty)
|
||||
barData2.push(el.total_palletizing_qty)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14.16,
|
||||
itemHeight: 7.38,
|
||||
data: [{name: '拆垛数', itemStyle: {color: '#0E90FD'}}, {name: '码垛数', itemStyle: {color: '#33CCCC'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
}
|
||||
// rotate: 50
|
||||
},
|
||||
data: barName
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位：块',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 2,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [8, 4],
|
||||
dashOffset: 4,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '拆垛数',
|
||||
type: 'bar',
|
||||
barWidth: '8',
|
||||
barGap: '200%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(96,112,128,0.10)',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0E90FD',
|
||||
opacity: 0.1
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: barData1
|
||||
},
|
||||
{
|
||||
name: '码垛数',
|
||||
type: 'bar',
|
||||
barWidth: '8',
|
||||
barGap: '200%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#33CCCC',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(31,89,89,0.25)',
|
||||
opacity: 0.25
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: barData2
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('sortpack_echart_1')
|
||||
if (this.myCharts1 !== '') {
|
||||
this.myCharts1.dispose()
|
||||
}
|
||||
if (echart !== null) {
|
||||
this.myCharts1 = this.$echarts.init(echart)
|
||||
this.myCharts1.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts1.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
setEchart2 () {
|
||||
let barName = []
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
let barData3 = []
|
||||
this.CPDayList.map(el => {
|
||||
barName.push(el.material_code)
|
||||
barData1.push(el.inventory_qty)
|
||||
barData2.push(el.qualified_in_qty)
|
||||
barData3.push(el.unqualified_in_qty)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14.16,
|
||||
itemHeight: 7.38,
|
||||
data: [{name: '库存数', itemStyle: {color: '#0E90FD'}}, {name: '合格入库', itemStyle: {color: '#33CCCC'}}, {name: '不合格入库', itemStyle: {color: '#EAAD24'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
}
|
||||
// rotate: 50
|
||||
},
|
||||
data: barName
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位：块',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 2,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [8, 4],
|
||||
dashOffset: 4,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '库存数',
|
||||
type: 'bar',
|
||||
barWidth: '8',
|
||||
barGap: '200%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(96,112,128,0.10)',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0E90FD',
|
||||
opacity: 0.1
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: barData1
|
||||
},
|
||||
{
|
||||
name: '合格入库',
|
||||
type: 'bar',
|
||||
barWidth: '8',
|
||||
barGap: '200%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#33CCCC',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(31,89,89,0.25)',
|
||||
opacity: 0.25
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: barData2
|
||||
},
|
||||
{
|
||||
name: '不合格入库',
|
||||
type: 'bar',
|
||||
barWidth: '8',
|
||||
barGap: '200%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#B68845',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(134,98,45,0.25)',
|
||||
opacity: 0.25
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: barData3
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('sortpack_echart_2')
|
||||
if (this.myCharts2 !== '') {
|
||||
this.myCharts2.dispose()
|
||||
}
|
||||
if (echart !== null) {
|
||||
this.myCharts2 = this.$echarts.init(echart)
|
||||
this.myCharts2.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts2.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
expandTooltip () {
|
||||
@@ -200,12 +503,12 @@ export default {
|
||||
this.$router.push('/hnlktwo')
|
||||
break
|
||||
case 3:
|
||||
this.$router.push('/takeshapetwo')
|
||||
break
|
||||
case 4:
|
||||
this.$router.push('/firedrytwo')
|
||||
break
|
||||
case 5:
|
||||
this.$router.push('/sortpacktwo')
|
||||
break
|
||||
case 6:
|
||||
this.$router.push('/pdtwo')
|
||||
@@ -254,6 +557,8 @@ export default {
|
||||
_wh(calc(50% - 8px), 100%)
|
||||
&:nth-child(2)
|
||||
margin-left 16px
|
||||
.item_wrap_bg
|
||||
background-image linear-gradient(to bottom, #070b1c, transparent)
|
||||
.item_tip
|
||||
_wh(100%, 32px)
|
||||
line-height 32px
|
||||
|
||||
Reference in New Issue
Block a user