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

图

Browse Source
This commit is contained in:
xiangxy
2023-08-15 15:37:22 +08:00
parent 0932ffb3a9
commit d48d28b8fb
1 changed files with 228 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<section class="bg">
<t-header title="顺和大屏监控">
<p class="p1">1</p>
<!-- <p class="p1">1</p> -->
</t-header>
<div class="container">
<div class="con1">
@@ -52,6 +52,12 @@
<span>吨</span>
</div>
</div>
<div class="con03">
<div class="title">成品计划完成率</div>
<div class="item_content_1">
<div id="echart_d1" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
<div class="con4">
<div class="block_h2">
@@ -72,7 +78,7 @@
</div>
<section class="bottom"></section>
</section>
</template>
</template>
<script>
import THeader from '@components/header.vue'
@@ -141,12 +147,205 @@ 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.getEchart1()
this.getEchart2()
this.realqty = res.result.materialTask[0].real_qty
this.planqty = res.result.materialTask[0].plan_qty
this.setEchart01()
// 五种状态：未成产、已下发、生产中、停止、完成
},
setEchart01 () {
let data = [
{
value: 10,
name: '1号砖'
},
{
value: 20,
name: '2号砖'
},
{
value: 30,
name: '3号砖'
},
{
value: 40,
name: '4号砖'
},
{
value: 50,
name: '5号砖'
},
{
value: 60,
name: '6号砖'
}
]
var option = {
legend: {
orient: 'horizontal',
bottom: '0%',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 14
},
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖']
},
color: ['#0966E8', '#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
series: [
{
type: 'pie',
radius: ['43%', '70%'],
label: {
normal: {
// position: 'inner',
formatter: '{d}%',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 14
}
}
},
labelLine: {
show: true
},
data: data
}
]
}
let echart = document.getElementById('echart_d01')
this.myCharts01 = this.$echarts.init(echart)
this.myCharts01.setOption(option)
window.addEventListener('resize', () => {
this.myCharts01.resize()
})
},
getEchart1 () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart_d1'))
// var finishArr = []
// var unFinishArr = []
// var materArr = []
// this.materData.map(el => {
// finishArr.push(el.finished_qty)
// unFinishArr.push(el.unfinished_qty)
// materArr.push(el.material_code)
// })
// 指定图表的配置项和数据
var option = {
legend: {
top: 20,
right: 10,
textStyle: {
color: '#ffffff',
fontSize: 12,
lineHeight: 20
},
itemGap: 20,
itemHeight: 8,
data: ['完成', '未完成']
},
// title: {
// text: '半成品计划完成率', // 标题
// top: '12px',
// left: '20px',
// textStyle: {
// color: '#fff',
// fontSize: '16'
// }
// },
// tooltip: {
// trigger: 'axis'
// },
xAxis: {
data: ['1号砖', '2号砖', '3号砖', '4号砖'],
// data: materArr,
axisLine: {
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: false
}
},
// xAxis: {
// type: 'category',
// axisLine: {
// lineStyle: {
// color: '#fff'
// }
// }
// },
yAxis: {
axisLine: {
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: false
}
},
series: [{
name: '未完成',
type: 'bar',
barWidth: 14,
stack: '完成情况',
data: [15, 20, 36, 10],
// data: unFinishArr,
itemStyle: {
normal: {
color: '#32C5FF'
// label: {
// show: true,
// position: 'inside',
// formatter: function (params) {
// if (params.value !== 0) {
// return params.value
// } else {
// return ''
// }
// }
// }
}
}
}, {
name: '完成',
type: 'bar',
barWidth: 14,
stack: '完成情况',
data: [40, 57, 18, 20],
// data: finishArr,
itemStyle: {
normal: {
color: '#F7B502'
// label: {
// show: true,
// position: 'inside',
// formatter: function (params) {
// if (params.value !== 0) {
// return params.value
// } else {
// return ''
// }
// }
// }
}
}
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
},
getEchart2 () {
// 基于准备好的dom，初始化echarts实例
var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
@@ -201,7 +400,7 @@ export default {
max: Math.max.apply(null, barData),
splitNumber: 10,
splitLine: {
show: true,
show: false,
lineStyle: {
color: ['#315070'],
width: 1,
@@ -224,6 +423,14 @@ export default {
splitNumber: 10,
// position: 'right',
// formatter: '{value}',
splitLine: {
show: true,
lineStyle: {
color: ['#315070'],
width: 1,
type: 'dashed'
}
},
axisLine: {
show: false,
lineStyle: {
@@ -275,198 +482,6 @@ export default {
window.addEventListener('resize', () => {
this.myCharts02.resize()
})
},
setEchart01 () {
let data = [
{
value: 10,
name: '1号砖'
},
{
value: 20,
name: '2号砖'
},
{
value: 30,
name: '3号砖'
},
{
value: 40,
name: '4号砖'
},
{
value: 50,
name: '5号砖'
},
{
value: 60,
name: '6号砖'
}
]
var option = {
legend: {
orient: 'horizontal',
bottom: '0%',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 14
},
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖']
},
color: ['#0966E8', '#07E083', '#e7E255', '#cda02e', '#01E38a', '#57c01d'],
series: [
{
type: 'pie',
radius: ['43%', '70%'],
label: {
normal: {
// position: 'inner',
formatter: '{d}%',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 14
}
}
},
labelLine: {
show: true
},
data: data
}
]
}
let echart = document.getElementById('echart_d01')
this.myCharts01 = this.$echarts.init(echart)
this.myCharts01.setOption(option)
window.addEventListener('resize', () => {
this.myCharts01.resize()
})
},
getEchart1 () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart_d1'))
var finishArr = []
var unFinishArr = []
var materArr = []
this.materData.map(el => {
finishArr.push(el.finished_qty)
unFinishArr.push(el.unfinished_qty)
materArr.push(el.material_code)
})
// 指定图表的配置项和数据
var option = {
legend: {
top: 20,
right: 10,
textStyle: {
color: '#ffffff',
fontSize: 12,
lineHeight: 20
},
itemGap: 20,
itemHeight: 8,
data: ['完成', '未完成']
},
title: {
text: '半成品计划完成率', // 标题
top: '12px',
left: '20px',
textStyle: {
color: '#fff',
fontSize: '16'
}
},
// tooltip: {
// trigger: 'axis'
// },
xAxis: {
// data: ['1号砖', '2号砖', '3号砖', '4号砖'],
data: materArr,
axisLine: {
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: false
}
},
// xAxis: {
// type: 'category',
// axisLine: {
// lineStyle: {
// color: '#fff'
// }
// }
// },
yAxis: {
axisLine: {
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: false
}
},
series: [{
name: '未完成',
type: 'bar',
barWidth: 14,
stack: '完成情况',
// data: [15, 20, 36, 10],
data: unFinishArr,
itemStyle: {
normal: {
color: '#32C5FF'
// label: {
// show: true,
// position: 'inside',
// formatter: function (params) {
// if (params.value !== 0) {
// return params.value
// } else {
// return ''
// }
// }
// }
}
}
}, {
name: '完成',
type: 'bar',
barWidth: 14,
stack: '完成情况',
// data: [40, 57, 18, 20],
data: finishArr,
itemStyle: {
normal: {
color: '#F7B502'
// label: {
// show: true,
// position: 'inside',
// formatter: function (params) {
// if (params.value !== 0) {
// return params.value
// } else {
// return ''
// }
// }
// }
}
}
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
@@ -556,7 +571,7 @@ export default {
_wh(100%, calc(50% - 69px))
_fj(row)
.con2
width 40%
width 30%
height 100%
overflow hidden
position relative
@@ -579,7 +594,7 @@ export default {
_wh(calc(100% - 44px), calc(100% - 112px))
margin 17px auto
.con3
width calc(60% - 15px)
width calc(40% - 15px)
height 100%
overflow hidden
position relative
@@ -596,7 +611,7 @@ export default {
.desc1
position absolute
top .56rem
left 4.28rem
left 2rem
span
color #32C5FF
font-size .16rem
@@ -605,6 +620,21 @@ export default {
.num
font-size .22rem
color #F7B502
.con03
width calc(30% - 15px)
height 100%
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_d1.png) no-repeat
.item_content_1
_wh(calc(100% - 44px), 100%)
margin 45px auto
.con4
_wh(100%, calc(50% - 85px))
margin-top 16px