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

no message

Browse Source
This commit is contained in:
蔡玲
2024-10-12 15:49:37 +08:00
parent f6253aeb33
commit f3a9d79852
3 changed files with 310 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/config/mork2.js
View File

@@ -403,7 +403,11 @@ export const getAllBigScreen = () => {
"region_name": "蒸汽脱蜡区", "region_name": "蒸汽脱蜡区",
"region_code": "ZQTL" "region_code": "ZQTL"
} }
] ],
stateStatistics: {
count: '110',
fourState: [{'status': '50', 'stateName': '正常运行'}, {'status': '30', 'stateName': '暂未生产'}, {'status': '20', 'stateName': '空闲设备'}, {'status': '10', 'stateName': '故障设备'}]
},
} }
return res return res
} }

423
src/pages/modules/home/index.vue
View File

@@ -27,6 +27,15 @@
<div class="pie_wraper"> <div class="pie_wraper">
<div ref="echartsRef2" style="width: 100%; height: 100%;"></div> <div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
</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> </div>
</div> </div>
@@ -52,6 +61,15 @@
<div class="pie_wraper"> <div class="pie_wraper">
<div ref="echartsRef4" style="width: 100%; height: 100%;"></div> <div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
</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> </div>
</div> </div>
@@ -77,6 +95,7 @@ export default {
taskList: [], // 当日搬运任务 taskList: [], // 当日搬运任务
agvList: [], agvList: [],
rgvList: [], rgvList: [],
stateStatistics: {}, // 设备运行统计
myChart1: null, myChart1: null,
myChart2: null, myChart2: null,
myChart3: null, myChart3: null,
@@ -140,6 +159,12 @@ export default {
let res = await getAllBigScreen() let res = await getAllBigScreen()
this.materList = [...res.inventoryAnalysis] this.materList = [...res.inventoryAnalysis]
this.curList = [...res.inventoryIOAnalysis] 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.setEchart1()
this.setEchart2() this.setEchart2()
this.setEchart3() this.setEchart3()
@@ -174,7 +199,7 @@ export default {
itemGap: 15, itemGap: 15,
itemWidth: 4, itemWidth: 4,
itemHeight: 4, itemHeight: 4,
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}] data: [{name: '生产中', itemStyle: {color: '#67D470'}}, {name: '已完成', itemStyle: {color: '#1980EA'}}]
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@@ -221,7 +246,7 @@ export default {
}, },
series: [ series: [
{ {
name: '入库', name: '生产中',
type: 'bar', type: 'bar',
barWidth: '10', barWidth: '10',
itemStyle: { itemStyle: {
@@ -243,7 +268,7 @@ export default {
data: barData1 data: barData1
}, },
{ {
name: '出库', name: '已完成',
type: 'bar', type: 'bar',
barWidth: '10', barWidth: '10',
itemStyle: { itemStyle: {
@@ -289,24 +314,14 @@ export default {
}, },
setEchart2 () { setEchart2 () {
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252'] let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
let seriesData = [] let colorListIn = ['#15347b', '#67D470', '#B4C9EF', '#EF5252']
let seriesName = [] let colorListOut = ['#1980EA', '#15347b', '#15347b', '#15347b']
this.materList.map((e, i) => { let seriesData = this.stateStatistics.fourState
if (i === 0) { seriesData.map((el, i) => {
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage, radius: ['70%', '100%']}) el.value = el.status
} else { el.name = el.stateName
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
}
seriesName.push({name: e.material_name})
}) })
console.log(seriesData) let total = this.stateStatistics.count
let total = 0
this.materList.map(e => {
total = total + Number(e.total_material_qty)
}, 0)
if (!this.materList.length) {
total = '0'
}
let option = { let option = {
color: colors, color: colors,
grid: { grid: {
@@ -317,9 +332,9 @@ export default {
containLabel: true containLabel: true
}, },
title: { title: {
left: '19%', left: '50%',
top: '50%', top: '50%',
text: `{a|总数（台）}\n{b|${total}}`, text: `{a|总数/台}\n{b|${total}}`,
textAlign: 'center', textAlign: 'center',
textVerticalAlign: 'middle', textVerticalAlign: 'middle',
padding: 0, padding: 0,
@@ -338,70 +353,86 @@ export default {
} }
} }
}, },
legend: { // legend: {
show: true, // show: true,
// type: 'scroll', // // type: 'scroll',
orient: 'vertical', // orient: 'vertical',
right: 0, // right: 0,
bottom: 0, // bottom: 0,
itemGap: 6, // itemGap: 6,
icon: 'rect', // icon: 'rect',
itemWidth: 4, // itemWidth: 4,
itemHeight: 4, // itemHeight: 4,
data: seriesName, // itemStyle: {
formatter: (name) => { // color: (params) => {
const item = seriesData.filter((item) => item.name === name)[0] // return colors[params.dataIndex]
return `{a|${name}}\n{b| ${item.value + '}'}` // }
}, // },
textStyle: { // data: seriesData,
rich: { // formatter: (name) => {
a: { // const item = seriesData.filter((item) => item.name === name)[0]
fontSize: 8, // return `{a|${name}}\n{b| ${item.value + '}'}`
lineHeight: 10, // },
padding: [0, 0, 0, 0], // textStyle: {
wordWrap: 'break-word', // rich: {
color: '#9BB9DD', // a: {
align: 'left' // fontSize: 8,
}, // lineHeight: 10,
b: { // padding: [0, 0, 0, 0],
fontSize: 8, // wordWrap: 'break-word',
lineHeight: 10, // color: '#9BB9DD',
padding: [0, 0, 0, 0], // align: 'left'
color: '#DFECFB', // },
align: 'left' // b: {
} // fontSize: 8,
} // lineHeight: 10,
} // padding: [0, 0, 0, 0],
}, // color: '#DFECFB',
// align: 'left'
// }
// }
// }
// },
series: [ series: [
{ {
clockwise: true, name: '内层实心圆',
hoverAnimation: false,
legendHoverLink: false,
hoverOffset: 0,
name: '外层空心圆',
type: 'pie', type: 'pie',
radius: ['80%', '80%'], hoverOffset: 0,
center: ['19%', '50%'], radius: '51%',
avoidLabelOverlap: false, center: ['50%', '50%'],
startAngle: 270,
label: { label: {
show: false,
position: 'center'
},
labelLine: {
show: false show: false
}, },
itemStyle: { 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 borderWidth: 1
}, },
data: [{ value: 0 }] data: [{ value: 0 }]
}, },
{ {
name: '库存量监控', name: '设备运行统计内圈',
type: 'pie', type: 'pie',
radius: ['50%', '60%'], radius: ['60%', '70%'],
center: ['19%', '50%'], center: ['50%', '50%'],
startAngle: 270,
labelLine: { labelLine: {
show: false show: false
}, },
@@ -409,15 +440,39 @@ export default {
show: false show: false
}, },
itemStyle: { itemStyle: {
borderColor: 'RGBA(27, 58, 98, .5)', borderColor: '#15347b',
borderWidth: 2 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: { label: {
show: false show: false
}, },
selectedMode: true,
hoverAnimation: false,
selectedOffset: 2,
data: seriesData data: seriesData
} }
] ]
@@ -453,7 +508,7 @@ export default {
itemGap: 15, itemGap: 15,
itemWidth: 4, itemWidth: 4,
itemHeight: 4, itemHeight: 4,
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}] data: [{name: '生产中', itemStyle: {color: '#67D470'}}, {name: '已完成', itemStyle: {color: '#1980EA'}}]
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@@ -500,7 +555,7 @@ export default {
}, },
series: [ series: [
{ {
name: '入库', name: '生产中',
type: 'bar', type: 'bar',
barWidth: '10', barWidth: '10',
itemStyle: { itemStyle: {
@@ -522,7 +577,7 @@ export default {
data: barData1 data: barData1
}, },
{ {
name: '出库', name: '已完成',
type: 'bar', type: 'bar',
barWidth: '10', barWidth: '10',
itemStyle: { itemStyle: {
@@ -558,19 +613,14 @@ export default {
}, },
setEchart4 () { setEchart4 () {
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252'] let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
let seriesData = [] let colorListIn = ['#15347b', '#67D470', '#B4C9EF', '#EF5252']
let seriesName = [] let colorListOut = ['#1980EA', '#15347b', '#15347b', '#15347b']
this.materList.map((e, i) => { let seriesData = this.stateStatistics.fourState
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage}) seriesData.map((el, i) => {
seriesName.push({name: e.material_name}) el.value = el.status
el.name = el.stateName
}) })
let total = 0 let total = this.stateStatistics.count
this.materList.map(e => {
total = total + Number(e.total_material_qty)
}, 0)
if (!this.materList.length) {
total = '0'
}
let option = { let option = {
color: colors, color: colors,
grid: { grid: {
@@ -581,79 +631,150 @@ export default {
containLabel: true containLabel: true
}, },
title: { title: {
x: '16%', left: '50%',
y: '35%', top: '50%',
text: '总数', text: `{a|总数/台}\n{b|${total}}`,
subtext: total,
textAlign: 'center', textAlign: 'center',
textStyle: { textVerticalAlign: 'middle',
fontSize: 9, padding: 0,
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 + '}'}`
},
textStyle: { textStyle: {
rich: { rich: {
a: { a: {
fontSize: 8, fontSize: 8,
lineHeight: 10, lineHeight: 10,
padding: [0, 0, 0, 0], color: '#A8C3E6'
wordWrap: 'break-word',
color: '#9BB9DD',
align: 'left'
}, },
b: { b: {
fontSize: 8, fontSize: 14,
lineHeight: 10, lineHeight: 16,
padding: [0, 0, 0, 0], color: '#DBE7F6'
color: '#DFECFB',
align: 'left'
} }
} }
} }
}, },
series: [{ // legend: {
name: '库存量监控', // show: true,
type: 'pie', // // type: 'scroll',
radius: ['50%', '60%'], // orient: 'vertical',
center: ['19%', '50%'], // right: 0,
labelLine: { // bottom: 0,
show: false // 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)', name: '设备运行统计内圈',
borderWidth: 2 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 name: '设备运行统计外圈',
}, type: 'pie',
selectedMode: 'single', radius: ['70%', '80%'],
selectedOffset: 20, center: ['50%', '50%'],
data: seriesData 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) this.myChart4.setOption(option, true)
} }

37
src/pages/modules/home/style.stylus
View File

@@ -75,23 +75,52 @@
width 100% width 100%
height calc(100% - 24px) height calc(100% - 24px)
padding 4px padding 4px
background-color rgba(30, 65, 126, 70%) background-color #15347b
.content_wraper_2 .content_wraper_2
padding 0 padding 0
display flex
justify-content space-between
.pie_wraper .pie_wraper
width 100% width 50%
height 100% height 100%
// padding 1px 0 0 1px // padding 1px 0 0 1px
// background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat // background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat
.pie_legend .pie_legend
width calc(100% - 200px) width 50%
height 100% height 100%
margin-left 200px
display flex display flex
flex-direction row flex-direction row
justify-content space-between justify-content space-between
align-items center align-items center
flex-wrap: wrap 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 .scroll_wrap
width 100% width 100%
height 100% height 100%