no message
This commit is contained in:
蔡玲
@@ -403,7 +403,11 @@ export const getAllBigScreen = () => {
|
||||
"region_name": "蒸汽脱蜡区",
|
||||
"region_code": "ZQTL"
|
||||
}
|
||||
]
|
||||
],
|
||||
stateStatistics: {
|
||||
count: '110',
|
||||
fourState: [{'status': '50', 'stateName': '正常运行'}, {'status': '30', 'stateName': '暂未生产'}, {'status': '20', 'stateName': '空闲设备'}, {'status': '10', 'stateName': '故障设备'}]
|
||||
},
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
@@ -27,6 +27,15 @@
|
||||
<div class="pie_wraper">
|
||||
<div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
<div class="pie_legend">
|
||||
<div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
|
||||
<p class="pie_legend_txt_1">{{ e.stateName }}</p>
|
||||
<div class="pie_legend_txt_wraper">
|
||||
<p class="pie_legend_txt_2">{{ e.status }}</p>
|
||||
<p class="pie_legend_txt_3">{{ e.rate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,6 +61,15 @@
|
||||
<div class="pie_wraper">
|
||||
<div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
<div class="pie_legend">
|
||||
<div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
|
||||
<p class="pie_legend_txt_1">{{ e.stateName }}</p>
|
||||
<div class="pie_legend_txt_wraper">
|
||||
<p class="pie_legend_txt_2">{{ e.status }}</p>
|
||||
<p class="pie_legend_txt_3">{{ e.rate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,6 +95,7 @@ export default {
|
||||
taskList: [], // 当日搬运任务
|
||||
agvList: [],
|
||||
rgvList: [],
|
||||
stateStatistics: {}, // 设备运行统计
|
||||
myChart1: null,
|
||||
myChart2: null,
|
||||
myChart3: null,
|
||||
@@ -140,6 +159,12 @@ export default {
|
||||
let res = await getAllBigScreen()
|
||||
this.materList = [...res.inventoryAnalysis]
|
||||
this.curList = [...res.inventoryIOAnalysis]
|
||||
res.stateStatistics.fourState.map(el => {
|
||||
let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
|
||||
rate = rate.toFixed(2) + '%'
|
||||
this.$set(el, 'rate', rate)
|
||||
})
|
||||
this.stateStatistics = res.stateStatistics
|
||||
this.setEchart1()
|
||||
this.setEchart2()
|
||||
this.setEchart3()
|
||||
@@ -174,7 +199,7 @@ export default {
|
||||
itemGap: 15,
|
||||
itemWidth: 4,
|
||||
itemHeight: 4,
|
||||
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
|
||||
data: [{name: '生产中', itemStyle: {color: '#67D470'}}, {name: '已完成', itemStyle: {color: '#1980EA'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@@ -221,7 +246,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '入库',
|
||||
name: '生产中',
|
||||
type: 'bar',
|
||||
barWidth: '10',
|
||||
itemStyle: {
|
||||
@@ -243,7 +268,7 @@ export default {
|
||||
data: barData1
|
||||
},
|
||||
{
|
||||
name: '出库',
|
||||
name: '已完成',
|
||||
type: 'bar',
|
||||
barWidth: '10',
|
||||
itemStyle: {
|
||||
@@ -289,24 +314,14 @@ export default {
|
||||
},
|
||||
setEchart2 () {
|
||||
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
|
||||
let seriesData = []
|
||||
let seriesName = []
|
||||
this.materList.map((e, i) => {
|
||||
if (i === 0) {
|
||||
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage, radius: ['70%', '100%']})
|
||||
} else {
|
||||
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
|
||||
}
|
||||
seriesName.push({name: e.material_name})
|
||||
let colorListIn = ['#15347b', '#67D470', '#B4C9EF', '#EF5252']
|
||||
let colorListOut = ['#1980EA', '#15347b', '#15347b', '#15347b']
|
||||
let seriesData = this.stateStatistics.fourState
|
||||
seriesData.map((el, i) => {
|
||||
el.value = el.status
|
||||
el.name = el.stateName
|
||||
})
|
||||
console.log(seriesData)
|
||||
let total = 0
|
||||
this.materList.map(e => {
|
||||
total = total + Number(e.total_material_qty)
|
||||
}, 0)
|
||||
if (!this.materList.length) {
|
||||
total = '0'
|
||||
}
|
||||
let total = this.stateStatistics.count
|
||||
let option = {
|
||||
color: colors,
|
||||
grid: {
|
||||
@@ -317,9 +332,9 @@ export default {
|
||||
containLabel: true
|
||||
},
|
||||
title: {
|
||||
left: '19%',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
text: `{a|总数（台）}\n{b|${total}}`,
|
||||
text: `{a|总数/台}\n{b|${total}}`,
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle',
|
||||
padding: 0,
|
||||
@@ -338,70 +353,86 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
// type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
itemGap: 6,
|
||||
icon: 'rect',
|
||||
itemWidth: 4,
|
||||
itemHeight: 4,
|
||||
data: seriesName,
|
||||
formatter: (name) => {
|
||||
const item = seriesData.filter((item) => item.name === name)[0]
|
||||
return `{a|${name}}\n{b| ${item.value + '}'}`
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 8,
|
||||
lineHeight: 10,
|
||||
padding: [0, 0, 0, 0],
|
||||
wordWrap: 'break-word',
|
||||
color: '#9BB9DD',
|
||||
align: 'left'
|
||||
},
|
||||
b: {
|
||||
fontSize: 8,
|
||||
lineHeight: 10,
|
||||
padding: [0, 0, 0, 0],
|
||||
color: '#DFECFB',
|
||||
align: 'left'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// show: true,
|
||||
// // type: 'scroll',
|
||||
// orient: 'vertical',
|
||||
// right: 0,
|
||||
// bottom: 0,
|
||||
// itemGap: 6,
|
||||
// icon: 'rect',
|
||||
// itemWidth: 4,
|
||||
// itemHeight: 4,
|
||||
// itemStyle: {
|
||||
// color: (params) => {
|
||||
// return colors[params.dataIndex]
|
||||
// }
|
||||
// },
|
||||
// data: seriesData,
|
||||
// formatter: (name) => {
|
||||
// const item = seriesData.filter((item) => item.name === name)[0]
|
||||
// return `{a|${name}}\n{b| ${item.value + '}'}`
|
||||
// },
|
||||
// textStyle: {
|
||||
// rich: {
|
||||
// a: {
|
||||
// fontSize: 8,
|
||||
// lineHeight: 10,
|
||||
// padding: [0, 0, 0, 0],
|
||||
// wordWrap: 'break-word',
|
||||
// color: '#9BB9DD',
|
||||
// align: 'left'
|
||||
// },
|
||||
// b: {
|
||||
// fontSize: 8,
|
||||
// lineHeight: 10,
|
||||
// padding: [0, 0, 0, 0],
|
||||
// color: '#DFECFB',
|
||||
// align: 'left'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
clockwise: true,
|
||||
hoverAnimation: false,
|
||||
legendHoverLink: false,
|
||||
hoverOffset: 0,
|
||||
name: '外层空心圆',
|
||||
name: '内层实心圆',
|
||||
type: 'pie',
|
||||
radius: ['80%', '80%'],
|
||||
center: ['19%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
hoverOffset: 0,
|
||||
radius: '51%',
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 270,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#4774AD',
|
||||
borderColor: '#2C4E6E',
|
||||
borderWidth: 3,
|
||||
color: '#132942'
|
||||
},
|
||||
data: [{ value: 0 }]
|
||||
},
|
||||
{
|
||||
name: '外层空心圆',
|
||||
type: 'pie',
|
||||
hoverOffset: 0,
|
||||
radius: ['90%', '90%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 270,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#4677B8',
|
||||
borderWidth: 1
|
||||
},
|
||||
data: [{ value: 0 }]
|
||||
},
|
||||
{
|
||||
name: '库存量监控',
|
||||
name: '设备运行统计内圈',
|
||||
type: 'pie',
|
||||
radius: ['50%', '60%'],
|
||||
center: ['19%', '50%'],
|
||||
radius: ['60%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 270,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
@@ -409,15 +440,39 @@ export default {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: 'RGBA(27, 58, 98, .5)',
|
||||
borderWidth: 2
|
||||
borderColor: '#15347b',
|
||||
borderWidth: 1,
|
||||
color: (params) => {
|
||||
return colorListIn[params.dataIndex]
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: seriesData
|
||||
},
|
||||
{
|
||||
name: '设备运行统计外圈',
|
||||
type: 'pie',
|
||||
radius: ['70%', '80%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 270,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#15347b',
|
||||
borderWidth: 1,
|
||||
color: (params) => {
|
||||
return colorListOut[params.dataIndex]
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
selectedMode: true,
|
||||
hoverAnimation: false,
|
||||
selectedOffset: 2,
|
||||
data: seriesData
|
||||
}
|
||||
]
|
||||
@@ -453,7 +508,7 @@ export default {
|
||||
itemGap: 15,
|
||||
itemWidth: 4,
|
||||
itemHeight: 4,
|
||||
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
|
||||
data: [{name: '生产中', itemStyle: {color: '#67D470'}}, {name: '已完成', itemStyle: {color: '#1980EA'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@@ -500,7 +555,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '入库',
|
||||
name: '生产中',
|
||||
type: 'bar',
|
||||
barWidth: '10',
|
||||
itemStyle: {
|
||||
@@ -522,7 +577,7 @@ export default {
|
||||
data: barData1
|
||||
},
|
||||
{
|
||||
name: '出库',
|
||||
name: '已完成',
|
||||
type: 'bar',
|
||||
barWidth: '10',
|
||||
itemStyle: {
|
||||
@@ -558,19 +613,14 @@ export default {
|
||||
},
|
||||
setEchart4 () {
|
||||
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
|
||||
let seriesData = []
|
||||
let seriesName = []
|
||||
this.materList.map((e, i) => {
|
||||
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
|
||||
seriesName.push({name: e.material_name})
|
||||
let colorListIn = ['#15347b', '#67D470', '#B4C9EF', '#EF5252']
|
||||
let colorListOut = ['#1980EA', '#15347b', '#15347b', '#15347b']
|
||||
let seriesData = this.stateStatistics.fourState
|
||||
seriesData.map((el, i) => {
|
||||
el.value = el.status
|
||||
el.name = el.stateName
|
||||
})
|
||||
let total = 0
|
||||
this.materList.map(e => {
|
||||
total = total + Number(e.total_material_qty)
|
||||
}, 0)
|
||||
if (!this.materList.length) {
|
||||
total = '0'
|
||||
}
|
||||
let total = this.stateStatistics.count
|
||||
let option = {
|
||||
color: colors,
|
||||
grid: {
|
||||
@@ -581,79 +631,150 @@ export default {
|
||||
containLabel: true
|
||||
},
|
||||
title: {
|
||||
x: '16%',
|
||||
y: '35%',
|
||||
text: '总数',
|
||||
subtext: total,
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
text: `{a|总数/台}\n{b|${total}}`,
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 9,
|
||||
lineHeight: 10,
|
||||
color: '#A8C3E6'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 10,
|
||||
lineHeight: 8,
|
||||
color: '#DBE7F6'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
// type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
itemGap: 6,
|
||||
icon: 'rect',
|
||||
itemWidth: 4,
|
||||
itemHeight: 4,
|
||||
data: seriesName,
|
||||
formatter: (name) => {
|
||||
const item = seriesData.filter((item) => item.name === name)[0]
|
||||
return `{a|${name}}\n{b| ${item.value + '}'}`
|
||||
},
|
||||
textVerticalAlign: 'middle',
|
||||
padding: 0,
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 8,
|
||||
lineHeight: 10,
|
||||
padding: [0, 0, 0, 0],
|
||||
wordWrap: 'break-word',
|
||||
color: '#9BB9DD',
|
||||
align: 'left'
|
||||
color: '#A8C3E6'
|
||||
},
|
||||
b: {
|
||||
fontSize: 8,
|
||||
lineHeight: 10,
|
||||
padding: [0, 0, 0, 0],
|
||||
color: '#DFECFB',
|
||||
align: 'left'
|
||||
fontSize: 14,
|
||||
lineHeight: 16,
|
||||
color: '#DBE7F6'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '库存量监控',
|
||||
type: 'pie',
|
||||
radius: ['50%', '60%'],
|
||||
center: ['19%', '50%'],
|
||||
labelLine: {
|
||||
show: false
|
||||
// legend: {
|
||||
// show: true,
|
||||
// // type: 'scroll',
|
||||
// orient: 'vertical',
|
||||
// right: 0,
|
||||
// bottom: 0,
|
||||
// itemGap: 6,
|
||||
// icon: 'rect',
|
||||
// itemWidth: 4,
|
||||
// itemHeight: 4,
|
||||
// itemStyle: {
|
||||
// color: (params) => {
|
||||
// return colors[params.dataIndex]
|
||||
// }
|
||||
// },
|
||||
// data: seriesData,
|
||||
// formatter: (name) => {
|
||||
// const item = seriesData.filter((item) => item.name === name)[0]
|
||||
// return `{a|${name}}\n{b| ${item.value + '}'}`
|
||||
// },
|
||||
// textStyle: {
|
||||
// rich: {
|
||||
// a: {
|
||||
// fontSize: 8,
|
||||
// lineHeight: 10,
|
||||
// padding: [0, 0, 0, 0],
|
||||
// wordWrap: 'break-word',
|
||||
// color: '#9BB9DD',
|
||||
// align: 'left'
|
||||
// },
|
||||
// b: {
|
||||
// fontSize: 8,
|
||||
// lineHeight: 10,
|
||||
// padding: [0, 0, 0, 0],
|
||||
// color: '#DFECFB',
|
||||
// align: 'left'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: '内层实心圆',
|
||||
type: 'pie',
|
||||
hoverOffset: 0,
|
||||
radius: '51%',
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 270,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#2C4E6E',
|
||||
borderWidth: 3,
|
||||
color: '#132942'
|
||||
},
|
||||
data: [{ value: 0 }]
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
{
|
||||
name: '外层空心圆',
|
||||
type: 'pie',
|
||||
hoverOffset: 0,
|
||||
radius: ['90%', '90%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 270,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#4677B8',
|
||||
borderWidth: 1
|
||||
},
|
||||
data: [{ value: 0 }]
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: 'RGBA(27, 58, 98, .5)',
|
||||
borderWidth: 2
|
||||
{
|
||||
name: '设备运行统计内圈',
|
||||
type: 'pie',
|
||||
radius: ['60%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 270,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#15347b',
|
||||
borderWidth: 1,
|
||||
color: (params) => {
|
||||
return colorListIn[params.dataIndex]
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: seriesData
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
selectedMode: 'single',
|
||||
selectedOffset: 20,
|
||||
data: seriesData
|
||||
}]
|
||||
{
|
||||
name: '设备运行统计外圈',
|
||||
type: 'pie',
|
||||
radius: ['70%', '80%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 270,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#15347b',
|
||||
borderWidth: 1,
|
||||
color: (params) => {
|
||||
return colorListOut[params.dataIndex]
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: seriesData
|
||||
}
|
||||
]
|
||||
}
|
||||
this.myChart4.setOption(option, true)
|
||||
}
|
||||
|
||||
@@ -75,23 +75,52 @@
|
||||
width 100%
|
||||
height calc(100% - 24px)
|
||||
padding 4px
|
||||
background-color rgba(30, 65, 126, 70%)
|
||||
background-color #15347b
|
||||
.content_wraper_2
|
||||
padding 0
|
||||
display flex
|
||||
justify-content space-between
|
||||
.pie_wraper
|
||||
width 100%
|
||||
width 50%
|
||||
height 100%
|
||||
// padding 1px 0 0 1px
|
||||
// background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat
|
||||
.pie_legend
|
||||
width calc(100% - 200px)
|
||||
width 50%
|
||||
height 100%
|
||||
margin-left 200px
|
||||
display flex
|
||||
flex-direction row
|
||||
justify-content space-between
|
||||
align-items center
|
||||
flex-wrap: wrap
|
||||
.pie_legend_item
|
||||
width 50%
|
||||
padding 0 0px 2px 10px
|
||||
.pie_legend_txt_1
|
||||
font-size: 8px;
|
||||
line-height: 8px
|
||||
color: #9BB9DD;
|
||||
margin-bottom 2px
|
||||
.pie_legend_txt_wraper
|
||||
width 100%
|
||||
.pie_legend_txt_2
|
||||
font-size 8px
|
||||
line-height: 8px
|
||||
color: #fff
|
||||
margin-bottom 2px
|
||||
.pie_legend_txt_3
|
||||
font-size: 8px;
|
||||
line-height: 8px
|
||||
color: #9BB9DD;
|
||||
opacity: 0.5;
|
||||
.pie_legend_item_bg_1
|
||||
background top left / 8px auto url('../../../images/fk_1.png') no-repeat
|
||||
.pie_legend_item_bg_2
|
||||
background top left / 8px auto url('../../../images/fk_2.png') no-repeat
|
||||
.pie_legend_item_bg_3
|
||||
background top left / 8px auto url('../../../images/fk_3.png') no-repeat
|
||||
.pie_legend_item_bg_4
|
||||
background top left / 8px auto url('../../../images/fk_5.png') no-repeat
|
||||
.scroll_wrap
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
Reference in New Issue
Block a user