root/screen-shunhe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

echart

Browse Source
This commit is contained in:
xiangxy
2023-08-15 11:29:05 +08:00
parent 52ee218e68
commit 0932ffb3a9
1 changed files with 157 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

560
src/pages/shunhe/ProdCount.vue
View File

@@ -1,7 +1,7 @@
<template>
<section class="bg">
<t-header title="顺和大屏监控">
<p class="p1" @click="toJump">1</p>
<p class="p1">1</p>
</t-header>
<div class="container">
<div class="con1">
@@ -39,23 +39,19 @@
</div>
</div>
<div class="con3" style="position: relative">
<div class="title">成品计划完成情况</div>
<div class="item_content_1">
<div id="echart_d05" style="width: 100%; height: 100%"></div>
</div>
</div>
<!-- <div class="con3" style="position: relative">
<div class="title">在制品设备生产量</div>
<div id="echarts2" style="width: 100%; height: 100%;"></div>
<div class="item_content_1">
<div id="echarts2" style="width: 100%; height: 100%;"></div>
</div>
<div class="desc1">
<span>当日产量：</span>
<span class="num">{{showNum3}}</span>
<span class="num">{{showNum4}}</span>
<span class="span3">块</span>
<span>当班产量：</span>
<span class="num">{{showNum4}}</span>
<span class="num">{{showNum5}}</span>
<span>吨</span>
</div>
</div> -->
</div>
</div>
<div class="con4">
<div class="block_h2">
@@ -93,9 +89,11 @@ export default {
timer: null,
showNum1: '',
showNum2: '',
showNum3: '222',
showNum3: '',
showNum4: '333',
myCharts05: '',
showNum5: '333',
myCharts01: '',
myCharts02: '',
materData: [],
deviceData: [],
resData: {},
@@ -143,136 +141,141 @@ export default {
this.showNum2 = (res.result.finishedRes[1].real_qty + '').split('')
this.showNum3 = (res.result.finishedRes[2].real_qty + '').split('')
this.taskData = [...res.result.productionTask]
this.setEchart05()
// this.getEchart2()
this.getEchart2()
this.realqty = res.result.materialTask[0].real_qty
this.planqty = res.result.materialTask[0].plan_qty
this.setEchart01()
// 五种状态：未成产、已下发、生产中、停止、完成
},
// getEchart2 () {
// // 基于准备好的dom，初始化echarts实例
// var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
// var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
// var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
// // var lineData = []
// // var barData = []
// // var xData = []
// // this.deviceData.map(el => {
// // console.log(el.produce_qty)
// // lineData.push(el.produce_qty)
// // barData.push(el.produce_num)
// // xData.push(el.device_name)
// // })
// var myChart = echarts.init(document.getElementById('echarts2'))
// var option = {
// legend: {
// top: 20,
// right: 10,
// textStyle: {
// color: '#ffffff',
// fontSize: 12,
// lineHeight: 20
// },
// itemGap: 20,
// itemHeight: 8,
// data: ['数量', '重量']
// },
// // tooltip: {
// // trigger: 'axis'
// // },
// xAxis: {
// // name: '设备',
// type: 'category',
// data: xData,
// nameGap: 60, // 坐标轴名称与轴线之间的距离。
// axisLine: {
// show: true,
// lineStyle: {
// color: '#fff'
// }
// },
// axisLabel: {
// color: '#fff'
// }
// },
// yAxis: [
// {
// // name: '交易额（亿元）',
// type: 'value',
// min: 0,
// // max: 100000,
// max: Math.max.apply(null, barData),
// splitNumber: 10,
// splitLine: {
// show: true,
// lineStyle: {
// color: ['#315070'],
// width: 1,
// type: 'dotted'
// }
// },
// axisLine: {
// show: false,
// lineStyle: {
// color: '#fff'
// }
// }
// },
// {
// // name: '增长率',
// type: 'value',
// min: 0,
// // max: 10,
// max: Math.max.apply(null, lineData),
// splitNumber: 10,
// // position: 'right',
// // formatter: '{value}',
// axisLine: {
// show: false,
// lineStyle: {
// color: '#fff'
// }
// },
// itemStyle: {
// color: '#F7B502'
// }
// }
// ],
// series: [
// {
// name: '数量',
// type: 'bar',
// data: barData,
// barWidth: 10,
// itemStyle: {
// color: '#32C5FF'
// }
// },
// {
// name: '重量',
// type: 'line',
// symbolSize: 12, // 拐点圆的大小
// symbol: 'circle',
// data: lineData,
// lineStyle: {
// color: '#F7B502'
// },
// itemStyle: {
// normal: {
// color: '#F7B502'
// }
// },
// yAxisIndex: 1
// }
// ]
// }
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option)
// window.addEventListener('resize', function () {
// myChart.resize()
// })
// },
getEchart2 () {
// 基于准备好的dom，初始化echarts实例
var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
// var lineData = []
// var barData = []
// var xData = []
// this.deviceData.map(el => {
// console.log(el.produce_qty)
// lineData.push(el.produce_qty)
// barData.push(el.produce_num)
// xData.push(el.device_name)
// })
var option = {
legend: {
top: 20,
right: 10,
textStyle: {
color: '#ffffff',
fontSize: 12,
lineHeight: 20
},
itemGap: 20,
itemHeight: 8,
data: ['数量', '重量']
},
// tooltip: {
// trigger: 'axis'
// },
xAxis: {
// name: '设备',
type: 'category',
data: xData,
nameGap: 60, // 坐标轴名称与轴线之间的距离。
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff'
}
},
yAxis: [
{
// name: '交易额（亿元）',
type: 'value',
min: 0,
// max: 100000,
max: Math.max.apply(null, barData),
splitNumber: 10,
splitLine: {
show: true,
lineStyle: {
color: ['#315070'],
width: 1,
type: 'dotted'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
}
},
{
// name: '增长率',
type: 'value',
min: 0,
// max: 10,
max: Math.max.apply(null, lineData),
splitNumber: 10,
// position: 'right',
// formatter: '{value}',
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
itemStyle: {
color: '#F7B502'
}
}
],
series: [
{
name: '数量',
type: 'bar',
data: barData,
barWidth: 10,
itemStyle: {
color: '#32C5FF'
}
},
{
name: '重量',
type: 'line',
symbolSize: 12, // 拐点圆的大小
symbol: 'circle',
data: lineData,
lineStyle: {
color: '#F7B502'
},
itemStyle: {
normal: {
color: '#F7B502'
}
},
yAxisIndex: 1
}
]
}
// 使用刚指定的配置项和数据显示图表。
// var myChart = echarts.init(document.getElementById('echarts2'))
// myChart.setOption(option)
// window.addEventListener('resize', function () {
// myChart.resize()
// })
let echart = document.getElementById('echarts2')
this.myCharts02 = this.$echarts.init(echart)
this.myCharts02.setOption(option)
window.addEventListener('resize', () => {
this.myCharts02.resize()
})
},
setEchart01 () {
let data = [
{
@@ -303,7 +306,7 @@ export default {
var option = {
legend: {
orient: 'horizontal',
bottom: '1%',
bottom: '0%',
textStyle: {
color: '#fff',
fontWeight: 'bold',
@@ -344,145 +347,6 @@ export default {
this.myCharts01.resize()
})
},
setEchart05 () {
var data05d0 = []
var data05d1 = []
var data05d2 = []
this.resData.planRes.map(el => {
data05d0.push(el.workorder_procedure)
data05d1.push(el.plan_qty)
data05d2.push(el.real_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: '#EAAD24'}}]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
data: data05d0
// data: ['压制', '干燥', '包装']
},
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',
opacity: 0.2
}
}
},
series: [
{
name: '计划生产数量',
type: 'bar',
barWidth: '28',
barGap: '100%', // 柱图间距
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: data05d1
// data: ['390', '390', '390']
},
{
name: '已完成数量',
type: 'bar',
barWidth: '28',
barGap: '100%', // 柱图间距
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: data05d2
// data: ['210', '210', '210']
}
]
}
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()
})
}
},
getEchart1 () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart_d1'))
@@ -603,129 +467,6 @@ export default {
window.addEventListener('resize', function () {
myChart.resize()
})
},
getEchart2 () {
// 基于准备好的dom，初始化echarts实例
// var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
// var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
// var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
var lineData = []
var barData = []
var xData = []
this.deviceData.map(el => {
console.log(el.produce_qty)
lineData.push(el.produce_qty)
barData.push(el.produce_num)
xData.push(el.device_name)
})
var myChart = echarts.init(document.getElementById('echarts2'))
var option = {
legend: {
top: 20,
right: 10,
textStyle: {
color: '#ffffff',
fontSize: 12,
lineHeight: 20
},
itemGap: 20,
itemHeight: 8,
data: ['数量', '重量']
},
// tooltip: {
// trigger: 'axis'
// },
xAxis: {
// name: '设备',
type: 'category',
data: xData,
nameGap: 60, // 坐标轴名称与轴线之间的距离。
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff'
}
},
yAxis: [
{
// name: '交易额（亿元）',
type: 'value',
min: 0,
// max: 100000,
max: Math.max.apply(null, barData),
splitNumber: 10,
splitLine: {
show: true,
lineStyle: {
color: ['#315070'],
width: 1,
type: 'dotted'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
}
},
{
// name: '增长率',
type: 'value',
min: 0,
// max: 10,
max: Math.max.apply(null, lineData),
splitNumber: 10,
// position: 'right',
// formatter: '{value}',
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
itemStyle: {
color: '#F7B502'
}
}
],
series: [
{
name: '数量',
type: 'bar',
data: barData,
barWidth: 10,
itemStyle: {
color: '#32C5FF'
}
},
{
name: '重量',
type: 'line',
symbolSize: 12, // 拐点圆的大小
symbol: 'circle',
data: lineData,
lineStyle: {
color: '#F7B502'
},
itemStyle: {
normal: {
color: '#F7B502'
}
},
yAxisIndex: 1
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
@@ -843,14 +584,27 @@ export default {
overflow hidden
position relative
.title
position absolute
_wh(calc(100% - 34px), 32px)
margin 17px
padding-left 0.48rem
_font(16px, 32px, #fff,,left)
background center center / 100% 100% url(../../assets/images/screen1/title_bg_d2.png) no-repeat
.item_content_1
_wh(calc(100% - 44px), calc(100% - 90px))
margin 17px auto
_wh(calc(100% - 44px), 100%)
margin 45px auto
.desc1
position absolute
top .56rem
left 4.28rem
span
color #32C5FF
font-size .16rem
.span3
margin-right .5rem
.num
font-size .22rem
color #F7B502
.con4
_wh(100%, calc(50% - 85px))
margin-top 16px