one
This commit is contained in:
@@ -75,6 +75,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="box2">
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_tip">
|
||||||
|
<div class="item_tip_left">本周混料生产</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content item_content_3">
|
||||||
|
<div id="echart_d05" style="width: 100%; height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_tip">
|
||||||
|
<div class="item_tip_left">本周压制生产</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content item_content_3">
|
||||||
|
<div id="echart_06" style="width: 100%; height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -92,7 +110,9 @@ export default {
|
|||||||
myCharts01: '',
|
myCharts01: '',
|
||||||
myCharts02: '',
|
myCharts02: '',
|
||||||
myCharts03: '',
|
myCharts03: '',
|
||||||
myCharts04: ''
|
myCharts04: '',
|
||||||
|
myCharts05: '',
|
||||||
|
myCharts06: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
@@ -100,6 +120,8 @@ export default {
|
|||||||
this.setEchart02()
|
this.setEchart02()
|
||||||
this.setEchart03()
|
this.setEchart03()
|
||||||
this.setEchart04()
|
this.setEchart04()
|
||||||
|
this.setEchart05()
|
||||||
|
this.setEchart06()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setEchart03 () {
|
setEchart03 () {
|
||||||
@@ -393,6 +415,297 @@ export default {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
setEchart05 () {
|
||||||
|
let date = []
|
||||||
|
let data1 = []
|
||||||
|
this.arrL2.map(e => {
|
||||||
|
date.push(e.date)
|
||||||
|
data1.push(e.elbow_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: '产量（kg）', itemStyle: {color: '#0E90FD'}}]
|
||||||
|
},
|
||||||
|
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: date
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
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: '产量（kg）',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '8',
|
||||||
|
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: data1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
let echart = document.getElementById('echart_d05')
|
||||||
|
if (this.myCharts05 !== '') {
|
||||||
|
this.myCharts05.dispose()
|
||||||
|
}
|
||||||
|
if (echart !== null) {
|
||||||
|
this.myCharts05 = this.$echarts.init(echart)
|
||||||
|
this.myCharts05.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts05.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setEchart06 () {
|
||||||
|
let data1 = []
|
||||||
|
let data2 = []
|
||||||
|
let data3 = []
|
||||||
|
let data4 = []
|
||||||
|
let device = []
|
||||||
|
this.echartData1.map(e => {
|
||||||
|
data1.push(e.data1)
|
||||||
|
data2.push(e.data2)
|
||||||
|
data3.push(e.data3)
|
||||||
|
data4.push(e.data4)
|
||||||
|
device.push(e.device)
|
||||||
|
})
|
||||||
|
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: '#33CCCC'}}, {name: '故障', itemStyle: {color: '#EAAD24'}}, {name: '待机', itemStyle: {color: '#0E90FD'}}, {name: '关机', itemStyle: {color: '#c9c9c9'}}]
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#8FABBF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#8FABBF',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: device
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
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',
|
||||||
|
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: data1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '故障',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '8',
|
||||||
|
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: data2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '待机',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '8',
|
||||||
|
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: data3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '关机',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '8',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#c9c9c9',
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(148,145,145,0.25)',
|
||||||
|
opacity: 0.25
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: data4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
let echart = document.getElementById('echart_06')
|
||||||
|
// if (this.myCharts06 !== '') {
|
||||||
|
// this.myCharts06.dispose()
|
||||||
|
// }
|
||||||
|
if (echart !== null) {
|
||||||
|
this.myCharts06 = this.$echarts.init(echart)
|
||||||
|
this.myCharts06.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts06.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
setEchart10 () {
|
setEchart10 () {
|
||||||
let total = [100, 200, 120, 133, 80, 155, 250]
|
let total = [100, 200, 120, 133, 80, 155, 250]
|
||||||
let names = [10, 20, 30, 40, 50, 60, 70]
|
let names = [10, 20, 30, 40, 50, 60, 70]
|
||||||
@@ -712,9 +1025,10 @@ export default {
|
|||||||
flex-direction row
|
flex-direction row
|
||||||
.box2
|
.box2
|
||||||
clear both
|
clear both
|
||||||
_wh(100%, 38%)
|
_wh(100%, 37%)
|
||||||
_fj()
|
_fj()
|
||||||
flex-direction row
|
flex-direction row
|
||||||
|
margin-bottom 1%
|
||||||
.item_title
|
.item_title
|
||||||
_font(46px, 100%, #fff,,,)
|
_font(46px, 100%, #fff,,,)
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|||||||
Reference in New Issue
Block a user