图
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="bg">
|
<section class="bg">
|
||||||
<t-header title="顺和大屏监控">
|
<t-header title="顺和大屏监控">
|
||||||
<p class="p1">1</p>
|
<!-- <p class="p1">1</p> -->
|
||||||
</t-header>
|
</t-header>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="con1">
|
<div class="con1">
|
||||||
@@ -52,6 +52,12 @@
|
|||||||
<span>吨</span>
|
<span>吨</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
<div class="con4">
|
<div class="con4">
|
||||||
<div class="block_h2">
|
<div class="block_h2">
|
||||||
@@ -72,7 +78,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<section class="bottom"></section>
|
<section class="bottom"></section>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import THeader from '@components/header.vue'
|
import THeader from '@components/header.vue'
|
||||||
@@ -141,12 +147,205 @@ 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.getEchart1()
|
||||||
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()
|
||||||
// 五种状态：未成产、已下发、生产中、停止、完成
|
// 五种状态：未成产、已下发、生产中、停止、完成
|
||||||
},
|
},
|
||||||
|
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 () {
|
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]
|
||||||
@@ -201,7 +400,7 @@ export default {
|
|||||||
max: Math.max.apply(null, barData),
|
max: Math.max.apply(null, barData),
|
||||||
splitNumber: 10,
|
splitNumber: 10,
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: false,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: ['#315070'],
|
color: ['#315070'],
|
||||||
width: 1,
|
width: 1,
|
||||||
@@ -224,6 +423,14 @@ export default {
|
|||||||
splitNumber: 10,
|
splitNumber: 10,
|
||||||
// position: 'right',
|
// position: 'right',
|
||||||
// formatter: '{value}',
|
// formatter: '{value}',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#315070'],
|
||||||
|
width: 1,
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false,
|
show: false,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
@@ -275,198 +482,6 @@ export default {
|
|||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.myCharts02.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))
|
_wh(100%, calc(50% - 69px))
|
||||||
_fj(row)
|
_fj(row)
|
||||||
.con2
|
.con2
|
||||||
width 40%
|
width 30%
|
||||||
height 100%
|
height 100%
|
||||||
overflow hidden
|
overflow hidden
|
||||||
position relative
|
position relative
|
||||||
@@ -579,7 +594,7 @@ export default {
|
|||||||
_wh(calc(100% - 44px), calc(100% - 112px))
|
_wh(calc(100% - 44px), calc(100% - 112px))
|
||||||
margin 17px auto
|
margin 17px auto
|
||||||
.con3
|
.con3
|
||||||
width calc(60% - 15px)
|
width calc(40% - 15px)
|
||||||
height 100%
|
height 100%
|
||||||
overflow hidden
|
overflow hidden
|
||||||
position relative
|
position relative
|
||||||
@@ -596,7 +611,7 @@ export default {
|
|||||||
.desc1
|
.desc1
|
||||||
position absolute
|
position absolute
|
||||||
top .56rem
|
top .56rem
|
||||||
left 4.28rem
|
left 2rem
|
||||||
span
|
span
|
||||||
color #32C5FF
|
color #32C5FF
|
||||||
font-size .16rem
|
font-size .16rem
|
||||||
@@ -605,6 +620,21 @@ export default {
|
|||||||
.num
|
.num
|
||||||
font-size .22rem
|
font-size .22rem
|
||||||
color #F7B502
|
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
|
.con4
|
||||||
_wh(100%, calc(50% - 85px))
|
_wh(100%, calc(50% - 85px))
|
||||||
margin-top 16px
|
margin-top 16px
|
||||||
|
|||||||
Reference in New Issue
Block a user