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