one
This commit is contained in:
@@ -75,6 +75,24 @@
|
||||
</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>
|
||||
@@ -92,7 +110,9 @@ export default {
|
||||
myCharts01: '',
|
||||
myCharts02: '',
|
||||
myCharts03: '',
|
||||
myCharts04: ''
|
||||
myCharts04: '',
|
||||
myCharts05: '',
|
||||
myCharts06: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@@ -100,6 +120,8 @@ export default {
|
||||
this.setEchart02()
|
||||
this.setEchart03()
|
||||
this.setEchart04()
|
||||
this.setEchart05()
|
||||
this.setEchart06()
|
||||
},
|
||||
methods: {
|
||||
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 () {
|
||||
let total = [100, 200, 120, 133, 80, 155, 250]
|
||||
let names = [10, 20, 30, 40, 50, 60, 70]
|
||||
@@ -712,9 +1025,10 @@ export default {
|
||||
flex-direction row
|
||||
.box2
|
||||
clear both
|
||||
_wh(100%, 38%)
|
||||
_wh(100%, 37%)
|
||||
_fj()
|
||||
flex-direction row
|
||||
margin-bottom 1%
|
||||
.item_title
|
||||
_font(46px, 100%, #fff,,,)
|
||||
display inline-block
|
||||
|
||||
Reference in New Issue
Block a user