From f3a9d798521fa557d7db67982c7c89c35b575a54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=94=A1=E7=8E=B2?= <8702040+cai-ling@user.noreply.gitee.com> Date: Sat, 12 Oct 2024 15:49:37 +0800 Subject: [PATCH] no message --- src/config/mork2.js | 6 +- src/pages/modules/home/index.vue | 423 ++++++++++++++++++---------- src/pages/modules/home/style.stylus | 37 ++- 3 files changed, 310 insertions(+), 156 deletions(-) diff --git a/src/config/mork2.js b/src/config/mork2.js index 6938582..c7d6d0c 100644 --- a/src/config/mork2.js +++ b/src/config/mork2.js @@ -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 } diff --git a/src/pages/modules/home/index.vue b/src/pages/modules/home/index.vue index 6dc5a16..92e1cf5 100644 --- a/src/pages/modules/home/index.vue +++ b/src/pages/modules/home/index.vue @@ -27,6 +27,15 @@
+
+
+

{{ e.stateName }}

+
+

{{ e.status }}

+

{{ e.rate }}

+
+
+
@@ -52,6 +61,15 @@
+
+
+

{{ e.stateName }}

+
+

{{ e.status }}

+

{{ e.rate }}

+
+
+
@@ -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) } diff --git a/src/pages/modules/home/style.stylus b/src/pages/modules/home/style.stylus index ef1c58f..7f3b9cc 100644 --- a/src/pages/modules/home/style.stylus +++ b/src/pages/modules/home/style.stylus @@ -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%